/* ═══════════════════════════════════════════════════════════════
   MUGGU — ముగ్గు
   The rice-flour kolam laid on the threshold before sunrise. Where
   Vaibhavam is a temple at noon, Swarnakamala a lotus at dawn, Mangala
   Deepam a lamp at night and Thoranam the garland over the door, this
   one is the GROUND — the pulli grid a Telugu household puts down at
   the doorstep, and the single unbroken line looped around it.

   This is the modern one, and the only cool one. Indigo is the ground,
   chalk is the ink, marigold is spent on the dots and one button.

   THE SIGNATURE DEVICE is the dot grid itself, used as the layout
   system rather than as an ornament: a faint chalk lattice behind every
   band, headers flush left on it, every rule dotted instead of solid,
   and cards that are plain rectangles pinned to the grid with a single
   marigold dot at one corner. Designed on graph paper. Nothing else in
   the template competes for that job — no centred flourishes, no arches.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --in-300:#7f8fd6; --in-400:#5566b8; --in-500:#3a4794; --in-600:#2a3370; --in-700:#1d2350; --in-800:#131734;
  --ch-50:#fffdf8; --ch-100:#f7f3e9; --ch-200:#e9e2d2; --ch-300:#d6ccb6;
  --mg-300:#ffc861; --mg-400:#f7a91f; --mg-500:#d98708; --mg-600:#a96504;
  --sl-500:#6b7391; --sl-600:#4a5170; --sl-700:#2f3452; --sl-800:#1a1d30;
  --ease-luxe:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);

  /* ── THE GRID ─────────────────────────────────────────────────
     One cell size drives the lattice behind every band, the gap
     between cards and the rhythm of the dotted rules, so the page
     genuinely sits on a grid rather than merely being decorated
     with one. */
  --cell:34px;
  --dot-dark:rgba(58,71,148,.16);          /* the lattice on chalk  */
  --dot-light:rgba(214,204,182,.13);       /* the lattice on indigo */
  --rule-dark:rgba(58,71,148,.42);         /* dotted rules on chalk */
  --rule-light:rgba(214,204,182,.36);      /* dotted rules on indigo */
}

/* Every rule in this template is DOTTED — one dot per 9px, drawn as a
   radial gradient rather than a `dotted` border so the dots stay round
   and identical at every width and in every engine. */
.dot-rule,.dot-row,.head-rule,.rit-row + .rit-row::before,.num-row + .num-row::before{
  background-image:radial-gradient(circle at 50% 50%,var(--rule-dark) 0 1.1px,transparent 1.2px);
  background-size:9px 2px;background-repeat:repeat-x;background-position:left center}
.band-indigo .dot-rule,.band-indigo .head-rule,
.band-indigo .rit-row + .rit-row::before,.band-indigo .num-row + .num-row::before{
  background-image:radial-gradient(circle at 50% 50%,var(--rule-light) 0 1.1px,transparent 1.2px)}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:hidden;background:var(--ch-50);color:var(--sl-700);
  font-weight:400;line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
::selection{background:rgba(58,71,148,.2);color:var(--in-800)}

/* Scrollbar — chalk on indigo */
html{scrollbar-width:thin;scrollbar-color:var(--in-400) var(--in-800)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--in-800)}
::-webkit-scrollbar-thumb{border-radius:99px;border:2px solid var(--in-800);
  background:linear-gradient(180deg,var(--in-300),var(--in-500))}
::-webkit-scrollbar-thumb:hover{background:var(--in-300)}
::-webkit-scrollbar-corner{background:var(--in-800)}

/* The verb is DRAWN: content fades UP behind a hairline that traces in.
   No blur, no brightness ramp, no wipe, no skew — those belong to the
   other four templates. */
[data-reveal]{opacity:0;will-change:transform,opacity}

/* The traced hairline. Held at full dashoffset until GSAP draws it; the
   five-second safety net clears the offset alongside opacity. */
.trace{position:absolute;left:0;top:-1px;width:100%;height:4px;overflow:visible;
  pointer-events:none}
.trace line{stroke:var(--in-500);stroke-width:1.6;stroke-linecap:round}
.band-indigo .trace line{stroke:var(--in-300)}

/* ── Layout ───────────────────────────────────────────────────── */
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}
.wrap-sm{max-width:760px;margin:0 auto;padding:0 28px}
.band{position:relative;overflow:hidden;padding:132px 0 126px}
@media (max-width:768px){.band{padding:92px 0 88px}}

/* the lattice sits behind every band — the thing that should make this
   template recognisable in a thumbnail */
.band::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(circle at 1px 1px,var(--dot-dark) 0 1.15px,transparent 1.3px);
  background-size:var(--cell) var(--cell)}
.band-indigo::before{background-image:radial-gradient(circle at 1px 1px,var(--dot-light) 0 1.15px,transparent 1.3px)}
.band > *{position:relative;z-index:1}

.band-chalk{background:var(--ch-50);color:var(--sl-700)}
.band-chalk-warm{background:var(--ch-100);color:var(--sl-700)}
.band-indigo{background:var(--in-700);color:var(--ch-100)}
.band-deep{background:var(--in-800)}

/* ── Type ─────────────────────────────────────────────────────── */
/* Section headers: a marigold dot, then the kicker and heading FLUSH
   LEFT on the grid, with a dotted rule running the full width beneath.
   Never centred — that is what the other four do. */
.head{position:relative;text-align:left}
.kicker{display:flex;align-items:center;gap:11px;margin:0;
  font-family:"Space Grotesk",sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.26em;
  text-transform:uppercase;color:var(--in-500)}
.band-indigo .kicker{color:var(--in-300)}
.kdot{width:7px;height:7px;border-radius:50%;background:var(--mg-400);flex:none}

.h2{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:clamp(29px,4.4vw,52px);
  line-height:1.16;letter-spacing:-.015em;text-align:left;margin:18px 0 0;color:var(--in-800)}
.band-indigo .h2{color:var(--ch-50)}

.head-rule{position:relative;display:block;height:2px;margin-top:30px}

.lede{font-family:"Newsreader",Georgia,serif;font-weight:300;font-size:clamp(18px,2.1vw,23px);
  line-height:1.78;color:var(--sl-600);margin:26px 0 0}
.band-indigo .lede{color:rgba(247,243,233,.82)}

.micro{font-family:"Space Grotesk",sans-serif;font-size:11.5px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--sl-500);margin:34px 0 0;line-height:2}

.script-xl{font-family:"Redressed",cursive;font-size:clamp(34px,4.8vw,54px);line-height:1.3;
  color:var(--in-500);margin:0}

/* ═══ 1 · HERO — the muggu drawing itself on wet granite ═════ */
/* Viewport height, done the only way that survives Tailwind CDN. Two
   utilities (min-h-screen min-h-[100svh]) do NOT cascade by class order —
   the generated stylesheet decides, and .min-h-screen is emitted last, so
   100vh wins and svh never applies. That is backwards: on iOS 100vh is the
   tall value measured under the collapsing toolbar, which is the exact bug
   svh exists to fix. Two declarations in one rule is the correct idiom. */
.hero{min-height:100vh;min-height:100svh;
  justify-content:flex-start;text-align:center;
  padding-top:clamp(96px,15vh,180px);padding-bottom:clamp(140px,34vh,340px);
  transition:padding-bottom 1s var(--ease-luxe);
  background:
    radial-gradient(120% 62% at 50% 4%, var(--in-600), transparent 62%),
    linear-gradient(180deg,var(--in-700) 0%,var(--in-700) 34%,var(--in-800) 100%)}
#muggu{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.hero-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(78% 30% at 50% 22%, rgba(42,51,112,.6), transparent 72%),
    linear-gradient(180deg,rgba(19,23,52,.5) 0%,transparent 26%,transparent 74%,rgba(19,23,52,.62) 100%)}

/* The prompt lives in the clear strip below the muggu. It is a WIDE
   rule-style flourish — never a flat drawing of the 3D subject sitting on
   top of the 3D subject, which reads as a rendering bug. */
.hero-open{position:absolute;left:50%;bottom:3.4vh;transform:translateX(-50%);
  z-index:12;display:flex;flex-direction:column;align-items:center;
  cursor:pointer;padding:14px 20px;transition:opacity .9s var(--ease-luxe),transform .9s var(--ease-luxe)}
.hero-open.is-open{opacity:0;transform:translateX(-50%) translateY(-14px);pointer-events:none}
.open-orn{width:clamp(180px,28vw,280px);color:var(--in-300);opacity:.85}
.open-orn svg{width:100%;height:auto}
.open-hint{display:inline-flex;align-items:center;gap:12px;margin:20px 0 0;white-space:nowrap;
  font-family:"Space Grotesk",sans-serif;font-size:12px;font-weight:600;letter-spacing:.28em;
  text-transform:uppercase;color:var(--ch-100);padding:14px 30px 14px calc(30px + .28em);
  border:1px solid rgba(214,204,182,.32);border-radius:2px;background:rgba(19,23,52,.5);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:border-color .6s var(--ease-luxe),background-color .6s var(--ease-luxe)}
@media (max-width:420px){.open-hint{font-size:11px;letter-spacing:.2em;padding:13px 22px}}
.hero-open:hover .open-hint{border-color:var(--mg-400);background:rgba(19,23,52,.72)}
.open-dot{width:6px;height:6px;border-radius:50%;background:var(--mg-400);flex:none;
  box-shadow:0 0 10px 2px rgba(247,169,31,.45);animation:openPulse 2.6s var(--ease-soft) infinite}
@keyframes openPulse{0%,100%{opacity:.4;transform:scale(.8)}50%{opacity:1;transform:scale(1.3)}}
body.gate-shut{overflow:hidden;position:fixed;inset:0;width:100%;height:100%;overscroll-behavior:none}

.hero-in{position:relative;z-index:10;max-width:960px;width:100%;flex:1 1 auto;
  display:flex;flex-direction:column;align-items:center}
/* Open, nothing sits above the names and nothing below the button, so both
   reservations shrink: the copy climbs toward the top edge and the foot
   drops to the floor, which is the clear band the muggu wants back. */
.hero.is-open{padding-top:clamp(46px,7vh,104px);padding-bottom:clamp(30px,7vh,76px)}
.hero-kicker{font-family:"Space Grotesk",sans-serif;font-size:12px;font-weight:600;letter-spacing:.36em;
  text-transform:uppercase;color:var(--ch-300);padding-left:.36em;margin:0;
  text-shadow:0 1px 2px rgba(19,23,52,.9)}
.hero-names{margin:22px 0 0;display:flex;align-items:center;justify-content:center;
  gap:clamp(12px,2.4vw,30px);flex-wrap:wrap}
.hero-name{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:clamp(38px,7vw,86px);
  line-height:1.1;letter-spacing:-.02em;color:var(--ch-50);
  text-shadow:0 2px 24px rgba(19,23,52,.75)}
.hero-join{color:var(--mg-400);width:clamp(56px,7.4vw,86px);flex:none}
.hero-join svg{width:100%;height:auto}
.hero-telugu{margin:16px 0 0;font-size:clamp(17px,2.3vw,24px);color:var(--ch-200);font-weight:400;
  text-shadow:0 1px 2px rgba(19,23,52,.95),0 0 18px rgba(19,23,52,.85)}
.hero-rule{position:relative;display:block;height:2px;width:min(220px,58%);margin:28px auto 0;
  background-image:radial-gradient(circle at 50% 50%,rgba(214,204,182,.34) 0 1.1px,transparent 1.2px);
  background-size:9px 2px;background-repeat:repeat-x;background-position:left center}
.hero-rule .trace line{stroke:var(--mg-400)}
.hero-foot{margin-top:auto;padding-top:clamp(24px,5vh,52px);display:flex;flex-direction:column;
  align-items:center;width:100%}
.hero-date{font-family:"Space Grotesk",sans-serif;font-size:clamp(11px,1.5vw,14px);font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:rgba(247,243,233,.82);margin:0;padding-left:.24em;
  text-shadow:0 1px 2px rgba(19,23,52,.9)}
#open-invite{margin-top:clamp(16px,2.4vh,26px)}

/* ═══ Buttons ════════════════════════════════════════════════ */
/* Square corners, not pills — this is the geometric template. */
.btn-line{position:relative;display:inline-flex;align-items:center;gap:10px;padding:15px 34px;
  border:1px solid rgba(58,71,148,.42);border-radius:2px;cursor:pointer;text-decoration:none;
  font-family:"Space Grotesk",sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--in-600);background:transparent;padding-left:calc(34px + .22em);
  transition:border-color .5s var(--ease-luxe),background-color .5s var(--ease-luxe),color .5s var(--ease-luxe)}
.btn-line:hover{border-color:var(--mg-400);color:var(--in-800);background:rgba(247,169,31,.08)}
.hero-in .btn-line,.band-indigo .btn-line{color:var(--ch-100);border-color:rgba(214,204,182,.34)}
.hero-in .btn-line:hover,.band-indigo .btn-line:hover{border-color:var(--mg-400);color:var(--ch-50);background:rgba(247,169,31,.1)}

/* the single marigold fill in the whole template */
.btn-solid{position:relative;display:inline-flex;align-items:center;justify-content:center;width:100%;
  padding:18px 36px;border:none;border-radius:2px;cursor:pointer;
  font-family:"Space Grotesk",sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--in-800);padding-left:calc(36px + .2em);
  background:var(--mg-400);
  box-shadow:0 16px 30px -18px rgba(169,101,4,.85);
  transition:transform .5s var(--ease-luxe),background-color .5s var(--ease-luxe)}
.btn-solid:hover{transform:translateY(-2px);background:var(--mg-300)}

.ic-round{position:fixed;top:24px;right:24px;z-index:120;display:grid;place-items:center;
  width:44px;height:44px;border-radius:2px;cursor:pointer;background:rgba(19,23,52,.72);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(214,204,182,.28);color:var(--ch-100);
  transition:border-color .5s var(--ease-luxe),transform .5s var(--ease-luxe),color .5s var(--ease-luxe)}
.ic-round svg{width:18px;height:18px}
.ic-round:hover{border-color:var(--mg-400);color:var(--mg-300);transform:scale(1.05)}
@media (max-width:880px){.ic-round{top:auto;bottom:22px;right:18px}}

/* ═══ Cards — plain rectangles pinned to the grid ════════════ */
/* One marigold dot at the top-left corner, sitting ON the hairline. It
   is the pulli the card is pegged to, and the only warm mark in the band. */
.pin{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;
  background:var(--mg-400);z-index:2}

/* ═══ 2 · Invitation ═════════════════════════════════════════ */
.panel{position:relative;padding:56px 40px 52px;
  border:1px solid rgba(58,71,148,.22);border-radius:2px;background:var(--ch-50)}
@media (max-width:560px){.panel{padding:44px 24px 42px}}

/* ═══ 3 · Couple — two equal cards, square photos, captions below ═ */
/* Deliberately plain and modular: no arches, no offsets, no overlap. */
.pair-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--cell);margin-top:68px}
.pair{position:relative;border:1px solid rgba(214,204,182,.22);border-radius:2px;
  background:rgba(19,23,52,.34);padding:16px;
  transition:border-color .6s var(--ease-luxe)}
.pair:hover{border-color:rgba(247,169,31,.42)}
.pair-shot{overflow:hidden;background:var(--in-800)}
.pair-shot img{aspect-ratio:1/1;object-fit:cover;width:100%;
  filter:saturate(.86) contrast(1.03);
  transition:transform 1.4s var(--ease-luxe),filter 1.4s var(--ease-luxe)}
.pair:hover .pair-shot img{transform:scale(1.03);filter:saturate(.98) contrast(1.05)}
.pair-text{padding:24px 4px 6px}
.pair-name{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:clamp(22px,2.8vw,30px);
  letter-spacing:-.01em;margin:0;color:var(--ch-50)}
.pair-role{font-family:"Space Grotesk",sans-serif;font-size:10.5px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--in-300);margin:14px 0 0;padding-left:.18em;line-height:1.9}
.pair-note{font-family:"Newsreader",Georgia,serif;font-weight:300;font-size:17px;
  color:rgba(247,243,233,.74);margin:14px 0 0}
@media (max-width:620px){
  .pair-grid{grid-template-columns:1fr;gap:26px;margin-top:52px}
}

/* ═══ 4 · Shloka ═════════════════════════════════════════════ */
.dot-row{display:block;height:2px;width:100%}
.shloka{font-weight:600;font-size:clamp(19px,2.6vw,29px);line-height:1.9;
  color:var(--in-600);margin:48px 0 0;border:0;padding:0}
.shloka-en{font-family:"Newsreader",Georgia,serif;font-weight:300;font-style:italic;
  font-size:clamp(18px,2.2vw,25px);color:var(--sl-600);margin:26px 0 0;line-height:1.7}
.shloka-src{font-family:"Space Grotesk",sans-serif;font-size:11px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--in-500);margin:22px 0 48px;padding-left:.22em}

/* ═══ 5 · Families ═══════════════════════════════════════════ */
.fam-grid{display:grid;gap:var(--cell);grid-template-columns:repeat(auto-fit,minmax(290px,1fr));margin-top:68px}
.fam-card{position:relative;padding:38px 30px 34px;
  border:1px solid rgba(58,71,148,.2);border-radius:2px;background:var(--ch-50);
  transition:border-color .6s var(--ease-luxe)}
.fam-card:hover{border-color:rgba(247,169,31,.5)}
.fam-side{font-family:"Space Grotesk",sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--in-500);margin:0;padding-left:.24em}
.fam-names{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:clamp(18px,2vw,22px);
  color:var(--in-800);margin:16px 0 0;line-height:1.45;letter-spacing:-.01em}
.fam-card .dot-rule{height:2px;margin:22px 0}
.fam-note{font-family:"Newsreader",Georgia,serif;font-weight:300;font-size:16px;
  color:var(--sl-500);margin:0}

/* ═══ 6 · Countdown — four large numerals in hairline boxes ══ */
.scratch-hint{font-family:"Newsreader",Georgia,serif;font-weight:300;font-style:italic;
  font-size:clamp(16px,1.9vw,20px);color:rgba(247,243,233,.72);margin:34px 0 0}
.scratch-wrap{position:relative;margin-top:40px;overflow:hidden;touch-action:none}
.count-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:rgba(214,204,182,.16)}
.count-box{position:relative;padding:38px 4px 26px;text-align:center;background:var(--in-700)}
.count-num{display:block;font-family:"Space Grotesk",sans-serif;font-weight:600;
  font-size:clamp(26px,5.6vw,58px);line-height:1;color:var(--ch-50);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.count-label{display:block;font-family:"Space Grotesk",sans-serif;font-size:9.5px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--in-300);margin-top:16px;padding-left:.18em}
.count-when{font-family:"Space Grotesk",sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mg-300);padding-left:.22em;margin:36px 0 0}
.scratch-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:3;cursor:grab;
  transition:opacity .9s var(--ease-luxe)}
.scratch-canvas.is-done{opacity:0;pointer-events:none}
.scratch-label{position:absolute;inset:0;z-index:4;display:grid;place-items:center;margin:0;
  pointer-events:none;font-family:"Space Grotesk",sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.28em;text-transform:uppercase;color:rgba(19,23,52,.62);padding-left:.28em;
  transition:opacity .5s var(--ease-luxe)}
.scratch-label.is-done{opacity:0}
@media (max-width:420px){
  .count-box{padding:28px 2px 20px}
  .count-label{font-size:8px;letter-spacing:.06em}
}

/* ═══ 7 · Rituals — a two-column grid, not a spine or a ladder ═ */
/* Time in a narrow left column, name and note in a wide right one, each
   row separated by a dotted rule. */
.rit{margin-top:68px}
.rit-row{position:relative;display:grid;grid-template-columns:minmax(118px,152px) 1fr;
  gap:var(--cell);padding:30px 0}
.rit-row + .rit-row::before{content:"";position:absolute;left:0;right:0;top:0;height:2px}
.rit-when{display:flex;align-items:baseline;gap:10px;
  font-family:"Space Grotesk",sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--in-500);line-height:1.9}
.rit-dot{width:6px;height:6px;border-radius:50%;background:var(--mg-400);flex:none;
  transform:translateY(-2px)}
.rit-name{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:clamp(19px,2.2vw,26px);
  letter-spacing:-.01em;color:var(--in-800);margin:0}
.rit-note{font-family:"Newsreader",Georgia,serif;font-weight:300;font-size:17px;
  color:var(--sl-600);margin:10px 0 0}
@media (max-width:640px){
  .rit-row{grid-template-columns:1fr;gap:12px;padding:26px 0}
}

/* ═══ 8 · Venue ══════════════════════════════════════════════ */
.venue-grid{display:grid;gap:var(--cell);grid-template-columns:1fr 1fr;align-items:stretch;margin-top:68px}
.venue-map{position:relative;overflow:hidden;min-height:380px;border-radius:2px;
  border:1px solid rgba(58,71,148,.22)}
.venue-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;
  filter:saturate(.5) contrast(1.04)}
.venue-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;
  justify-content:center;padding:44px 34px;
  border:1px solid rgba(58,71,148,.22);border-radius:2px;background:var(--ch-50)}
.venue-name{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:clamp(22px,2.7vw,31px);
  letter-spacing:-.015em;color:var(--in-800);margin:0;line-height:1.3}
.venue-addr{font-family:"Newsreader",Georgia,serif;font-weight:400;font-size:18px;
  color:var(--sl-600);margin:20px 0 0}
.venue-note{font-family:"Newsreader",Georgia,serif;font-weight:300;font-style:italic;font-size:16px;
  color:var(--sl-500);margin:14px 0 0}
.venue-card .btn-line{margin-top:30px}
@media (max-width:860px){
  .venue-grid{grid-template-columns:1fr}
  .venue-map{min-height:300px}
  .venue-card{padding:36px 26px}
}

/* ═══ 9 · Details — numbered rows on the grid ════════════════ */
.num-list{counter-reset:num;margin-top:68px}
.num-row{position:relative;display:grid;grid-template-columns:minmax(118px,152px) 1fr;
  gap:var(--cell);padding:32px 0;counter-increment:num}
.num-row + .num-row::before{content:"";position:absolute;left:0;right:0;top:0;height:2px}
.num-idx{font-family:"Space Grotesk",sans-serif;font-size:13px;font-weight:600;letter-spacing:.1em;
  color:var(--mg-300);line-height:1.9}
.num-idx::before{content:counter(num,decimal-leading-zero)}
.num-h{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:clamp(19px,2.1vw,24px);
  letter-spacing:-.01em;color:var(--ch-50);margin:0}
.num-p{font-family:"Newsreader",Georgia,serif;font-weight:300;font-size:17px;
  color:rgba(247,243,233,.76);margin:10px 0 0}
@media (max-width:640px){
  .num-row{grid-template-columns:1fr;gap:10px;padding:26px 0}
}

/* ═══ 10 · Gallery — strict uniform 3-column grid ════════════ */
/* Every cell the same size at every width. No bento, no stagger — the
   regularity IS the design, and it is what makes the band read as grid
   paper rather than as a scrapbook. */
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:68px;
  background:rgba(58,71,148,.18);border:1px solid rgba(58,71,148,.18)}
.gal{position:relative;overflow:hidden;margin:0;aspect-ratio:1/1;background:var(--in-800)}
.gal img{width:100%;height:100%;object-fit:cover;filter:saturate(.86);
  transition:transform 1.4s var(--ease-luxe),filter 1.4s var(--ease-luxe)}
.gal:hover img{transform:scale(1.04);filter:saturate(1)}

/* ═══ 11 · Blessings ═════════════════════════════════════════ */
.bless-quote{font-family:"Newsreader",Georgia,serif;font-weight:300;font-style:italic;
  font-size:clamp(20px,2.5vw,29px);line-height:1.66;color:rgba(247,243,233,.9);margin:52px 0 0}
.bless-src{font-family:"Space Grotesk",sans-serif;font-size:11px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--in-300);margin:24px 0 0;padding-left:.22em}

/* ═══ 12 · RSVP ══════════════════════════════════════════════ */
.card-form{position:relative;display:grid;gap:26px;margin-top:48px;padding:44px 36px;
  border:1px solid rgba(58,71,148,.22);border-radius:2px;background:var(--ch-50);text-align:left}
@media (max-width:560px){.card-form{padding:34px 22px}}
.f-two{display:grid;gap:26px;grid-template-columns:1fr 1fr}
@media (max-width:520px){.f-two{grid-template-columns:1fr}}
.f-label{display:block;font-family:"Space Grotesk",sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--in-500);margin-bottom:10px;padding-left:.22em}
.f-in{width:100%;padding:13px 2px;background:transparent;color:var(--in-800);
  border:0;border-bottom:1px solid rgba(58,71,148,.32);
  font-family:"Newsreader",Georgia,serif;font-weight:400;font-size:19px;
  transition:border-color .4s var(--ease-luxe)}
.f-in::placeholder{color:rgba(107,115,145,.6)}
.f-in:focus{outline:none;border-bottom-color:var(--mg-400)}
.f-sel{cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233a4794' stroke-width='1.8'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 2px center;background-size:16px;padding-right:32px}
.f-sel option{background:var(--ch-50);color:var(--in-800)}
textarea.f-in{resize:none}
.f-fine{font-family:"Space Grotesk",sans-serif;font-size:11px;color:var(--sl-500);margin:0}
#rsvp .script-xl,#rsvp .h2,#rsvp .lede{text-align:left}
#rsvp .h2{margin-top:8px}

/* ═══ Footer ═════════════════════════════════════════════════ */
.foot{position:relative;background:var(--in-800);color:var(--ch-200);padding:96px 0 0;text-align:center}
.foot::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px,var(--dot-light) 0 1.15px,transparent 1.3px);
  background-size:var(--cell) var(--cell)}
.foot > *{position:relative;z-index:1}
.foot-mark{display:block;width:min(280px,74%);margin:0 auto;color:var(--in-400)}
.foot-mark svg{width:100%;height:auto}
.foot-names{font-size:clamp(38px,5vw,58px);line-height:1.3;color:var(--mg-300);margin:26px 0 0}
.foot-meta{font-family:"Space Grotesk",sans-serif;font-size:11px;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(233,226,210,.68);margin:18px 0 0;padding-left:.24em}
.foot-tag{font-family:"Space Grotesk",sans-serif;font-size:11px;font-weight:600;letter-spacing:.16em;
  color:var(--in-300);margin:14px 0 0;padding-left:.16em}

/* ═══ Invitocraft bar ════════════════════════════════════════ */
.ic-bar{position:relative;z-index:1;margin-top:60px;padding:28px 28px 14px;
  border-top:1px solid rgba(214,204,182,.16)}
.ic-bar-in{max-width:44rem;margin:0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap}
.ic-brand{display:inline-flex;align-items:center;gap:12px;color:var(--ch-200);text-decoration:none;
  transition:color .4s var(--ease-luxe)}
.ic-brand:hover{color:var(--ch-50)}
.ic-seal{width:30px;height:30px;border-radius:50%;flex:none;background:var(--ch-50);padding:3px;
  box-shadow:0 0 0 1px rgba(214,204,182,.4)}
.ic-made{font-family:"Space Grotesk",sans-serif;font-size:12px;font-weight:400;letter-spacing:.06em;
  display:inline-flex;align-items:center;gap:6px}
.ic-made strong{font-weight:600;letter-spacing:.1em}
.ic-heart{width:13px;height:13px;color:var(--mg-400)}
.ic-cta{font-family:"Space Grotesk",sans-serif;font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ch-200);text-decoration:none;
  padding:10px 20px 10px calc(20px + .16em);
  border:1px solid rgba(214,204,182,.24);border-radius:2px;
  transition:border-color .4s var(--ease-luxe),color .4s var(--ease-luxe),transform .4s var(--ease-luxe)}
.ic-cta:hover{border-color:var(--mg-400);color:var(--mg-300);transform:translateY(-2px)}
.ic-fine{margin:20px 0 0;text-align:center;font-family:"Space Grotesk",sans-serif;font-size:10.5px;
  letter-spacing:.14em;color:rgba(233,226,210,.4)}
@media (max-width:560px){.ic-bar-in{justify-content:center;text-align:center}}

/* ═══ Cursor glow ════════════════════════════════════════════ */
#cursor-glow{position:fixed;top:0;left:0;width:420px;height:420px;border-radius:50%;pointer-events:none;
  z-index:90;opacity:0;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(85,102,184,.1),transparent 66%)}
@media (hover:none),(pointer:coarse){#cursor-glow{display:none}}

/* No prefers-reduced-motion block, on purpose: iOS sets that flag in Low
   Power Mode, so an override here would quietly give most phone guests a
   different invitation. See the note at the top of script.js. */

/* ═══ Accessibility ══════════════════════════════════════════ */
:focus-visible{outline:2px solid var(--mg-400);outline-offset:3px}

/* ═══════════════════════════════════════════════════════════════════
   PREMIUM LAYER
   Appended, not rewritten — every rule below refines what the template
   already renders, so no markup moves and no data-edit hook changes.
   Ordered by the audit that produced it:
     1 typography scale and tracking   2 surface texture and tinted light
     3 spacing rhythm (optical, not mathematical)
     4 cards and gallery              5 micro-interaction and focus
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1 · Typography ────────────────────────────────────────────────
   Display type was set at the same tracking as body copy, which is why
   it read as "large text" rather than as a headline. Big type needs
   NEGATIVE tracking and a tighter leading; small caps need positive. */
.h2{letter-spacing:-.022em;line-height:1.06;text-wrap:balance}
.hero-name{letter-spacing:-.035em;text-wrap:balance}
.lede,.care,.venue-note,.venue-park{text-wrap:pretty;max-width:62ch;margin-inline:auto}
.kicker{letter-spacing:.32em}
/* digits must not dance as they count down */
.count-num,.count-box{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ── 2 · Surface ───────────────────────────────────────────────────
   Flat vector gradients read as sterile. A fixed grain breaks the
   digital evenness without costing a request — it is a data URI, and
   it sits above everything with pointer-events off so it can never
   swallow a tap. */
body::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;
  opacity:.035;transform:translateZ(0);will-change:transform;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
  background-size:140px 140px}

/* Alternating bands were the same flat fill. Give the second one a
   breath of the accent from a single, consistent light direction —
   top-left, matching the 3D key light in every hero. */
.band-b{position:relative;isolation:isolate}
.band-b::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 70% at 12% 0%, var(--accent-soft), transparent 62%)}

/* ── 3 · Rhythm ────────────────────────────────────────────────────
   Equal top and bottom padding measures correct and looks top-heavy.
   The eye wants a little more beneath a block than above it. */
@media (min-width:768px){
  .band{padding-top:clamp(78px,9vh,124px);padding-bottom:clamp(96px,12vh,168px)}
}
/* a hairline that belongs to the palette, instead of a hard edge */
.band + .band{border-top:1px solid color-mix(in srgb, var(--fg) 8%, transparent)}

/* ── 4 · Cards and gallery ─────────────────────────────────────────
   Border + shadow + fill on every card is the generic look. Drop the
   border, tint the shadow with the page's own hue so the light reads as
   one source, and vary the radius — softer on the container than on
   what sits inside it. */
.gal,.count-box{border:0;border-radius:18px;
  box-shadow:0 1px 2px color-mix(in srgb, var(--fg-hi) 8%, transparent),
             0 14px 34px -12px color-mix(in srgb, var(--fg-hi) 22%, transparent);
  transition:transform .45s cubic-bezier(.2,.9,.25,1), box-shadow .45s ease}
.gal{overflow:hidden}
.gal img{transition:transform .7s cubic-bezier(.2,.9,.25,1)}
/* Letting two tiles run tall used to be the composition here, but six items
   across three columns then consume eight row-units in a nine-cell grid and
   the ninth is left standing empty. The tiles carry their own variety. */
@media (hover:hover){
  .gal:hover{transform:translateY(-4px)}
  .gal:hover img{transform:scale(1.045)}
}

/* ── 5 · Interaction ───────────────────────────────────────────────
   Nothing acknowledged a press. A button that does not move under the
   finger feels broken on a phone even when it works. */
.btn{transition:transform .28s cubic-bezier(.2,.9,.25,1), box-shadow .28s ease,
     background-color .28s ease, color .28s ease}
@media (hover:hover){ .btn:hover{transform:translateY(-2px)} }
.btn:active{transform:translateY(1px) scale(.985)}
.f:focus-visible,.btn:focus-visible,a:focus-visible,button:focus-visible,
[role="button"]:focus-visible{outline:2px solid var(--accent);outline-offset:3px;
  border-radius:10px}