/* Mudliar Sabhagruh & Lawns — public site.
   Loaded only on /, /book and /hoarding. The console has its own sheet.

   The organising idea: this business is one date at a time, so the page asks
   for the date first and dresses that question as a lagna patrika — the
   printed invitation the family is about to commission for their own event. */

:root {
  --wine: #6e2019;
  --wine-deep: #4a120e;
  --wine-lift: #8c3226;
  --gold: #b8862b;
  --gold-lit: #e8b84b;
  --ivory: #fcf7ee;
  --paper: #fffdf8;
  --ink: #241d1b;
  --ink-soft: #6b615b;
  --rule: #ddd2c2;
  --green: #2f5238;
  --red: #a8392f;

  --display: 'Iowan Old Style', Charter, 'Palatino Linotype', Palatino,
             'Noto Serif', Georgia, serif;
  --sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --deva: 'Noto Serif Devanagari', 'Nirmala UI', var(--display);
}

*, *::before, *::after { box-sizing: border-box; }

body.public {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.public h1, .public h2, .public h3 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.1;
  margin: 0;
  letter-spacing: -0.01em;
}
.public :lang(mr), .public :lang(hi) { font-family: var(--deva); }

/* Only bare links inherit. A link wearing a component class keeps that
   component's colour — otherwise this rule silently wins on specificity
   and paints button text the wrong colour. */
.public a:not([class]) { color: inherit; }
.public a.wordmark, .public a.link, .public a.skip-link { color: inherit; }
.public button, .public input, .public select, .public textarea { font: inherit; }

.shell-wrap { width: min(1080px, calc(100% - 40px)); margin-inline: auto; }

/* Wide-tracked small caps. Used for eyebrows and section marks only — it is
   the utility voice, never body copy. */
.eyebrow {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--gold);
}

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--wine); color: #fff; padding: 12px 20px;
}
.skip-link:focus { left: 0; }

/* ── Masthead ─────────────────────────────────────────────────────────────
   A slim bar, not a hero. The hero's job belongs to the date. */
.masthead { border-bottom: 1px solid var(--rule); background: var(--paper); }
.masthead-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 14px 0;
}
.wordmark { display: flex; align-items: center; gap: 13px; text-decoration: none; }
.wordmark img {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--gold); background: var(--paper);
}
.wordmark .name {
  font-family: var(--display); font-size: 1.06rem; font-weight: 600;
  line-height: 1.15; letter-spacing: -0.005em;
}
.wordmark .place {
  font-family: var(--sans); font-size: 0.66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.2em; color: var(--ink-soft);
}
.masthead .link {
  font-size: 0.87rem; font-weight: 600; text-decoration: none;
  border-bottom: 1px solid var(--gold); padding-bottom: 2px;
}

/* ── The patrika ──────────────────────────────────────────────────────────
   The signature. Double rule, corner lozenges, the venue's own diya at the
   head — the border language of the invitation this family will print.
   Built once here; used in the hero and on the acknowledgement. */
.patrika-stage { padding: clamp(38px, 7vw, 80px) 0 clamp(30px, 5vw, 56px); }

.patrika {
  position: relative;
  max-width: 620px;
  margin-inline: auto;
  background: var(--paper);
  border: 2px solid var(--wine);
  padding: clamp(48px, 7vw, 66px) clamp(24px, 5vw, 56px) clamp(34px, 5vw, 46px);
  text-align: center;
}
/* Inner hairline — the second rule of the double border. */
.patrika::before {
  content: ""; position: absolute; inset: 6px;
  border: 1px solid var(--gold); pointer-events: none;
}
/* Corner lozenges, sat on the rules where an engraver would put them. */
.patrika .corner {
  position: absolute; width: 9px; height: 9px;
  background: var(--wine); transform: rotate(45deg);
}
.patrika .corner.tl { top: -5px; left: -5px; }
.patrika .corner.tr { top: -5px; right: -5px; }
.patrika .corner.bl { bottom: -5px; left: -5px; }
.patrika .corner.br { bottom: -5px; right: -5px; }

/* The diya breaks the top rule, the way a motif does on a printed card. */
.patrika .crest {
  position: absolute; top: 0; left: 50%;
  transform: translate(-50%, -50%);
  width: 62px; height: 62px; border-radius: 50%;
  border: 2px solid var(--wine); background: var(--ivory);
  padding: 3px;
}
.patrika .crest img { width: 100%; height: 100%; border-radius: 50%; display: block; }

.patrika .invite {
  font-family: var(--display);
  font-size: clamp(1.85rem, 4.4vw, 2.7rem);
  line-height: 1.18;
  margin: 0 0 10px;
  text-wrap: balance;
}
.patrika .invite em { font-style: italic; color: var(--wine); }
.patrika .sub {
  color: var(--ink-soft); font-size: 0.95rem; max-width: 46ch;
  margin: 0 auto 26px;
}

/* Date-first: the question the whole business turns on. */
.date-ask { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.date-ask label {
  display: block; text-align: left;
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--ink-soft); margin-bottom: 6px;
}
.date-ask .field { flex: 1 1 210px; min-width: 0; }
.date-ask input {
  width: 100%; max-width: 100%; min-width: 0; min-height: 54px;
  border: 1px solid var(--rule); background: var(--ivory);
  padding: 12px 14px; color: var(--ink);
  font-family: var(--display); font-size: 1.12rem;
}
.date-ask input:focus { border-color: var(--wine); background: var(--paper); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 54px; padding: 14px 26px;
  border: 1px solid transparent; background: var(--wine); color: #fff;
  font-family: var(--sans); font-size: 0.92rem; font-weight: 650;
  letter-spacing: 0.01em; text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--wine-lift); }
.btn.gold { background: var(--gold-lit); color: #3a1f10; }
.btn.gold:hover { background: var(--gold); color: #fff; }
.btn.quiet {
  background: transparent; color: var(--ink); border-color: var(--rule);
}
.btn.quiet:hover { border-color: var(--wine); color: var(--wine); }
.btn.full { width: 100%; }
.btn.self-end { align-self: flex-end; }

.patrika .assurance {
  margin: 22px auto 0; max-width: 42ch;
  font-size: 0.8rem; color: var(--ink-soft);
}

/* One orchestrated arrival. Nothing else on the page moves. */
@media (prefers-reduced-motion: no-preference) {
  .patrika { animation: settle 620ms cubic-bezier(.2,.7,.3,1) both; }
  .patrika .crest { animation: lift 620ms cubic-bezier(.2,.7,.3,1) 180ms both; }
  .patrika::before { animation: fade 700ms ease 260ms both; }
  @keyframes settle { from { opacity: 0; transform: translateY(14px) scale(.985); } }
  @keyframes lift   { from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)); } }
  @keyframes fade   { from { opacity: 0; } }
}

/* ── Section rhythm ───────────────────────────────────────────────────────
   One class owns vertical spacing so nothing fights over margins. */
.band { padding: clamp(44px, 7vw, 86px) 0; border-top: 1px solid var(--rule); }
.band-head { max-width: 54ch; margin-bottom: clamp(26px, 4vw, 40px); }
.band-head h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  margin: 10px 0 12px;
}
.band-head p { margin: 0; color: var(--ink-soft); }

/* ── The spaces ───────────────────────────────────────────────────────────
   A comparison, not three equal cards. Capacity is the fact that decides the
   venue, so capacity is the anchor and everything aligns to it. */
.spaces { border-top: 1px solid var(--rule); }
.space {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) 132px minmax(0, 1.9fr);
  gap: clamp(16px, 3vw, 40px);
  align-items: baseline;
  padding: 26px 0;
  border-bottom: 1px solid var(--rule);
}
.space .name {
  font-family: var(--display); font-size: 1.4rem; margin: 0;
}
.space .name span {
  display: block; font-family: var(--sans); font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.18em; color: var(--gold);
  margin-bottom: 5px;
}
.space .capacity {
  font-family: var(--display); font-size: 1.6rem; color: var(--wine);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.space .capacity small {
  display: block; font-family: var(--sans); font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-soft);
}
.space p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }

/* ── The tour ─────────────────────────────────────────────────────────────
   Numbered because it is genuinely a route walked in order — the numbers
   carry information the reader needs, they are not ornament. */
.route { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
         background: var(--rule); border: 1px solid var(--rule); }
.stop { background: var(--ivory); padding: 18px 22px 20px; }
.stop .n {
  font-family: var(--display); font-size: 0.9rem; color: var(--gold);
  font-variant-numeric: tabular-nums; display: block; margin-bottom: 4px;
}
.stop .what { font-family: var(--display); font-size: 1.12rem; }
.stop .detail { font-size: 0.82rem; color: var(--ink-soft); margin-top: 4px; }

.tour-foot {
  display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
  margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--rule);
}
.tour-foot p { margin: 0; color: var(--ink-soft); font-size: 0.9rem; max-width: 46ch; }

/* ── Forms (the /book page) ───────────────────────────────────────────────── */
.form-shell { max-width: 620px; margin-inline: auto; }
.step-mark {
  display: flex; align-items: center; gap: 12px;
  margin: clamp(30px, 5vw, 44px) 0 18px;
}
.step-mark .num {
  font-family: var(--display); font-size: 1.5rem; color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.step-mark h2 { font-size: 1.25rem; }
.step-mark .rule { flex: 1; height: 1px; background: var(--rule); }

/* Grid and flex children default to min-width:auto, so a control with a wide
   intrinsic size — date and datetime-local are the offenders — refuses to
   shrink and pushes the page sideways on a phone. Measured: /book scrolled to
   590px inside a 390px viewport. */
.field { margin-bottom: 18px; min-width: 0; }
.field > label {
  display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--ink-soft); margin-bottom: 7px;
}
.field input:not([type="radio"]):not([type="checkbox"]),
.field select, .field textarea {
  width: 100%; max-width: 100%; min-width: 0; min-height: 52px;
  border: 1px solid var(--rule); background: var(--paper);
  padding: 13px 14px; color: var(--ink); font-size: 1rem;
}
.field textarea { min-height: 104px; resize: vertical; line-height: 1.55; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--wine); }
.field.bad input, .field.bad select { border-color: var(--red); background: #fdf3f1; }
.field .help { font-size: 0.8rem; color: var(--ink-soft); margin: 6px 0 0; }
.field.bad input, .field.bad select { border-color: var(--red); background: #fdf3f1; }
.field .err { font-size: 0.82rem; color: var(--red); font-weight: 600; margin: 6px 0 0; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.pair > * { min-width: 0; }

.choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.choice {
  position: relative;                 /* containing block for the input below */
  border: 1px solid var(--rule); background: var(--paper);
  padding: 15px 12px; text-align: center; cursor: pointer;
}
/* The input covers the whole card so the entire tile is the hit target, and
   stays in the tab order rather than being hidden from it. */
.choice input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.choice .t { font-family: var(--display); font-size: 1.05rem; display: block; }
.choice .d { font-size: 0.75rem; color: var(--ink-soft); }
.choice:has(input:checked) {
  border-color: var(--wine); background: #fdf4f0;
  box-shadow: inset 0 0 0 1px var(--wine);
}
.choice:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }

.consent {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 0.9rem; border-top: 1px solid var(--rule); padding-top: 20px;
}
.consent input { width: 20px; height: 20px; min-height: 0; margin-top: 2px; flex: none; }

.honeypot {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.honeypot input { width: 1px; min-width: 0; }

.form-errors {
  border: 1px solid var(--red); background: #fdf3f1;
  padding: 16px 18px; margin-bottom: 24px;
}
.form-errors strong { display: block; margin-bottom: 6px; }
.form-errors ul { margin: 0; padding-left: 20px; font-size: 0.9rem; }

/* ── Acknowledgement ──────────────────────────────────────────────────────── */
.reference {
  font-family: var(--display); font-size: clamp(1.9rem, 5vw, 2.5rem);
  color: var(--wine); letter-spacing: 0.06em; margin: 6px 0 4px;
  font-variant-numeric: tabular-nums;
}
.reference-label {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.18em; color: var(--ink-soft);
}

/* ── Footer ───────────────────────────────────────────────────────────────── */
.public-foot { background: var(--wine-deep); color: #e8d8d2; padding: 40px 0; margin-top: 0; }
.public-foot .name { font-family: var(--display); color: #fff; font-size: 1.15rem; }
.public-foot p { margin: 8px 0 0; font-size: 0.85rem; opacity: 0.8; }

/* ── Hoarding artwork ─────────────────────────────────────────────────────── */
.hoarding {
  aspect-ratio: 2 / 1; display: grid; grid-template-columns: 1.15fr 0.85fr;
  border: 8px solid var(--gold-lit); background: var(--ivory); overflow: hidden;
}
.hoarding-copy { display: flex; flex-direction: column; justify-content: center; padding: 6%; }
.hoarding-copy h2 { font-size: clamp(1.7rem, 4vw, 3.8rem); color: var(--wine); }
.hoarding-copy p { color: var(--ink-soft); font-size: clamp(0.9rem, 1.4vw, 1.3rem); }
.hoarding-qr {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; background: var(--wine); color: #fff; padding: 5%; gap: 16px;
}
.hoarding-qr h3 { font-size: clamp(1.1rem, 2.1vw, 2.2rem); }
.qr-slot { width: clamp(110px, 15vw, 190px); background: #fff; padding: 10px; }
.qr-slot svg { display: block; width: 100%; height: auto; }
.note {
  border-left: 3px solid var(--gold); padding: 14px 18px;
  background: #fff8e8; font-size: 0.88rem; margin-bottom: 26px;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .route { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .space { grid-template-columns: minmax(0, 1fr) 118px; }
  .space p { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  body.public { font-size: 16px; }
  .route { grid-template-columns: 1fr; }
  .choices, .pair { grid-template-columns: 1fr; }
  .date-ask { flex-direction: column; gap: 14px; }
  .date-ask .field { flex: 0 0 auto; }
  .date-ask .btn { width: 100%; }
  .space { grid-template-columns: 1fr; gap: 6px; padding: 22px 0; }
  .space .capacity { font-size: 1.35rem; }
  .space .capacity small { display: inline; margin-left: 6px; }
  .masthead .link { display: none; }
  .patrika { padding-left: 20px; padding-right: 20px; }
}

@media print {
  .masthead, .public-foot, .btn, .note, .skip-link { display: none !important; }
  body.public { background: #fff; }
}