/* ═══════════════════════════════════════════════════════════════
   SWARNAKAMALA — स्वर्णकमल
   A golden lotus on dark water. Deep emerald and antique gold, with
   warm cream for relief — the temple-green counterpart to
   Vaibhavam's maroon and saffron.

   Type is deliberately weighted: Playfair Display 600 for display,
   Cormorant 500 for body. Nothing thin, nothing washed out.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --am-300:#f0b98a; --am-400:#e59a5f; --am-500:#d2721f;
  --am-600:#b85a15; --am-700:#8f430c; --am-800:#5e2b07;
  --gold-200:#f0dfae; --gold-300:#e2c67c; --gold-400:#d4af5f; --gold-500:#b08d3c; --gold-600:#8a6d2b;
  --cream-50:#fffaf3; --cream-100:#fdf1e3; --cream-200:#f9e3ce; --cream-300:#f3d0b0;
  --saffron-500:#d2721f;
  --ink-500:#8a6a4c; --ink-600:#6b4a2f; --ink-700:#4a2f1c; --ink-800:#2e1c0f;
  --ease-luxe:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:hidden;background:var(--cream-100);color:var(--ink-700);
  font-weight:400;line-height:1.68;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
::selection{background:rgba(212,175,95,.32);color:var(--ink-800)}

/* Scrollbar in the temple-green palette */
html{scrollbar-width:thin;scrollbar-color:var(--am-500) var(--cream-200)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--cream-200)}
::-webkit-scrollbar-thumb{border-radius:99px;border:2px solid var(--cream-200);
  background:linear-gradient(180deg,var(--am-400),var(--am-600))}
::-webkit-scrollbar-thumb:hover{background:var(--gold-300)}
::-webkit-scrollbar-corner{background:var(--cream-200)}

[data-reveal]{opacity:0;will-change:transform,opacity,filter}

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

/* warm cream, with a faint gold bloom so it is never flat white */
.band-ivory{background:
  radial-gradient(90% 60% at 50% 0%, rgba(240,223,174,.36), transparent 62%),
  var(--cream-100);
  color:var(--ink-700)}
/* deep emerald — the alternating dark band */
.band-shell{background:
  radial-gradient(110% 80% at 50% 0%, var(--am-600), var(--am-700) 58%, var(--am-800));
  color:var(--cream-100)}
.band + .band::before{content:"";position:absolute;top:0;left:50%;width:min(460px,66%);height:1px;
  transform:translateX(-50%);background:linear-gradient(90deg,transparent,var(--gold-400),transparent)}

/* ── Type — weighted for legibility ───────────────────────────── */
.eyebrow{font-family:"Jost",sans-serif;font-size:12px;font-weight:500;letter-spacing:.34em;
  text-transform:uppercase;color:var(--gold-500);text-align:center;padding-left:.34em;margin:0}
.band-shell .eyebrow{color:var(--gold-300)}

.h2{font-family:"Playfair Display",serif;font-weight:600;font-size:clamp(32px,5vw,58px);
  line-height:1.16;text-align:center;margin:18px 0 0;color:var(--am-700)}
.band-shell .h2{color:var(--cream-50)}

.lede{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:clamp(19px,2.2vw,25px);
  line-height:1.75;color:var(--ink-600)}
.band-shell .lede{color:rgba(247,239,224,.86)}

.script-xl{font-family:"Italianno",cursive;font-size:clamp(44px,6.4vw,74px);line-height:1;
  color:var(--gold-500)}
.band-shell .script-xl{color:var(--gold-300)}

/* ═══ 1 · HERO — deep emerald, gold lotus ════════════════════ */
/* 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 order decides, and .min-h-screen is
   emitted last, so 100vh won and svh never applied. 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 of the same
   property in one rule is the correct idiom: browsers without svh keep
   the first, browsers with it take the second. */
.hero{min-height:100vh;min-height:100svh;
  background:linear-gradient(180deg,var(--cream-50) 0%,var(--cream-100) 24%,var(--cream-200) 52%,var(--am-300) 84%,var(--am-400) 100%)}
#lotus{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.hero-wash{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(56% 42% at 50% 60%,rgba(255,255,255,.5),transparent 70%),
             linear-gradient(180deg,rgba(255,250,243,.55) 0%,transparent 26%,transparent 64%,rgba(143,67,12,.28) 100%)}

.hero-open{position:absolute;left:50%;bottom:6vh;transform:translateX(-50%);
  z-index:10;display:flex;flex-direction:column;align-items:center;
  cursor:pointer;padding: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}
/* a wide flourish, never a flat lotus drawn on top of the 3D one — see
   TEMPLATE-SPEC 2a. A second, smaller copy of the hero subject reads as a bug. */
.open-lotus{width:clamp(120px,17vw,190px);color:var(--am-600);opacity:.85}
.open-lotus svg{width:100%;height:auto}
.open-hint{display:inline-flex;align-items:center;gap:12px;margin:22px 0 0;
  font-family:"Jost",sans-serif;font-size:12px;font-weight:500;letter-spacing:.34em;
  text-transform:uppercase;color:var(--ink-700);padding:15px 32px 15px calc(32px + .34em);
  border:1px solid rgba(212,175,95,.5);border-radius:999px;
  transition:border-color .6s var(--ease-luxe),background-color .6s var(--ease-luxe)}
.hero-open:hover .open-hint{border-color:var(--gold-300);background:rgba(212,175,95,.12)}
.open-dot{width:6px;height:6px;border-radius:50%;background:var(--am-500);flex:none;
  animation:openPulse 2.4s var(--ease-soft) infinite}
@keyframes openPulse{0%,100%{opacity:.35;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:940px}
.hero-eyebrow{font-family:"Jost",sans-serif;font-size:12px;font-weight:500;letter-spacing:.38em;
  text-transform:uppercase;color:var(--am-600);padding-left:.38em;margin:0}
.hero-names{margin:26px 0 0;display:flex;align-items:center;justify-content:center;
  gap:clamp(16px,3.2vw,40px);flex-wrap:wrap}
.hero-name{font-family:"Playfair Display",serif;font-weight:600;font-size:clamp(44px,8.6vw,102px);
  line-height:1.04;color:var(--ink-800);
  text-shadow:0 2px 30px rgba(255,250,243,.7)}
.hero-amp{color:var(--gold-300);width:clamp(48px,7vw,76px);flex:none}
.hero-amp svg{width:100%;height:auto}
.hero-telugu{margin:16px 0 0;font-size:clamp(16px,2.2vw,22px);color:var(--am-600);font-weight:400;opacity:.9}
.hero-rule{width:130px;height:1px;margin:32px auto 0;
  background:linear-gradient(90deg,transparent,var(--gold-400),transparent)}
.hero-date{font-family:"Jost",sans-serif;font-size:clamp(11px,1.5vw,14px);font-weight:500;
  letter-spacing:.28em;text-transform:uppercase;color:var(--ink-600);margin:22px 0 0;padding-left:.28em}

/* ═══ Buttons ════════════════════════════════════════════════ */
.btn-line{position:relative;display:inline-flex;align-items:center;gap:10px;padding:15px 36px;
  border:1px solid rgba(212,175,95,.55);border-radius:999px;cursor:pointer;text-decoration:none;
  font-family:"Jost",sans-serif;font-size:12px;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-700);background:transparent;padding-left:calc(36px + .24em);
  transition:border-color .6s var(--ease-luxe),background-color .6s var(--ease-luxe)}
.btn-line:hover{border-color:var(--gold-300);background:rgba(212,175,95,.14)}
/* on cream bands the same button needs dark ink */
.band-ivory .btn-line,.venue-card .btn-line{color:var(--am-700);border-color:rgba(176,141,60,.55)}
.band-ivory .btn-line:hover,.venue-card .btn-line:hover{border-color:var(--gold-500);background:rgba(212,175,95,.14)}
.band-shell .btn-line,.band-shell .venue-card .btn-line{color:var(--cream-50);border-color:rgba(212,175,95,.55)}

.btn-saffron{position:relative;display:inline-flex;align-items:center;justify-content:center;
  padding:18px 38px;border:none;border-radius:999px;cursor:pointer;overflow:hidden;
  font-family:"Jost",sans-serif;font-size:12px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--cream-50);padding-left:calc(38px + .22em);
  background:linear-gradient(135deg,var(--am-500),var(--am-600) 60%,var(--am-700));
  box-shadow:0 16px 32px -16px rgba(14,47,33,.75),inset 0 0 0 1px rgba(212,175,95,.3);
  transition:transform .6s var(--ease-luxe),box-shadow .6s var(--ease-luxe)}
.btn-saffron:hover{transform:translateY(-2px);
  box-shadow:0 22px 42px -16px rgba(14,47,33,.85),inset 0 0 0 1px rgba(212,175,95,.55)}

.ic-round{position:fixed;top:24px;right:24px;z-index:120;display:grid;place-items:center;
  width:44px;height:44px;border-radius:50%;cursor:pointer;background:rgba(255,250,243,.85);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(184,90,21,.4);color:var(--am-600);
  transition:border-color .5s var(--ease-luxe),transform .5s var(--ease-luxe)}
.ic-round svg{width:18px;height:18px}
.ic-round:hover{border-color:var(--gold-300);transform:scale(1.05)}
@media (max-width:880px){.ic-round{top:auto;bottom:22px;right:18px}}

.petal-rule{width:190px;margin:0 auto;color:var(--gold-500)}
.petal-rule svg{width:100%;height:auto}

/* The two families under the invitation message. Each couple holds ONE line —
   the old single string wrapped wherever it ran out of room, which on a phone
   broke a name in half and left the separator stranded. So: one <p> per house,
   never broken, stacked at every width with a hairline between them — side by
   side needs ~755px and the wrap is 644px, so the pair only ever wrapped with
   the divider dangling off the first name. The size is tied to the viewport below
   520px so the longest name still fits the line on the narrowest phone —
   fixed 12px with .34em tracking needs ~390px of text width and never had it. */
.inv-fams{margin-top:clamp(30px,5.4vw,46px)}
.inv-fams-rule{width:44px;height:1px;margin:0 auto clamp(22px,3.4vw,30px);
  background:rgba(176,141,60,.55)}
.band-shell .inv-fams-rule{background:rgba(212,175,95,.6)}
.inv-fams-row{display:flex;flex-direction:column;align-items:center;justify-content:center;
  row-gap:13px}
.inv-fam{font-family:"Jost",sans-serif;font-size:12px;font-weight:500;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold-500);text-align:center;padding-left:.28em;margin:0;
  line-height:1.6;white-space:nowrap}
.band-shell .inv-fam{color:var(--gold-300)}
.inv-fam-sep{flex:none;width:40px;height:1px;background:rgba(176,141,60,.6)}
.band-shell .inv-fam-sep{background:rgba(212,175,95,.6)}
@media (max-width:520px){
  .inv-fam{font-size:clamp(8.5px,2.6vw,12px);letter-spacing:.18em;padding-left:.18em}
}

/* A person's name is one unbreakable unit wherever it appears, so a line that
   has to wrap breaks at the "&" between the two of them and never mid-name.
   Kept to the name alone: taking the "Son of …" prefix in too made the couple
   card's min-content wider than its column and pushed the photo off the page. */
.nb{white-space:nowrap}

/* ═══ 3 · Couple ═════════════════════════════════════════════ */
.couple-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(24px,5vw,68px);align-items:start}
.person{text-align:center}
.person-frame{position:relative;overflow:hidden;border-radius:3px;
  box-shadow:0 40px 70px -46px rgba(0,0,0,.7)}
.person-frame::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(212,175,95,.45)}
.person-frame img{aspect-ratio:4/5;object-fit:cover;width:100%;filter:saturate(.92);
  transition:transform 1.5s var(--ease-luxe),filter 1.5s var(--ease-luxe)}
.person:hover .person-frame img{transform:scale(1.04);filter:saturate(1.02)}
.person-name{font-family:"Playfair Display",serif;font-weight:600;font-size:clamp(26px,3.3vw,36px);
  margin:28px 0 0;color:var(--gold-200)}
.person-role{font-family:"Jost",sans-serif;font-size:11px;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold-400);margin:12px 0 0;padding-left:.24em}
.person-note{font-family:"Cormorant Garamond",serif;font-style:italic;font-weight:500;font-size:18px;
  color:rgba(247,239,224,.72);margin:16px 0 0}
.couple-stem{align-self:stretch;width:1px;margin-top:40px;
  background:linear-gradient(180deg,transparent,rgba(212,175,95,.6),transparent)}
@media (max-width:860px){
  .couple-grid{grid-template-columns:1fr;gap:56px}
  .couple-stem{width:80px;height:1px;margin:0 auto;
    background:linear-gradient(90deg,transparent,rgba(212,175,95,.6),transparent)}
}

/* ═══ 4 · Shloka ═════════════════════════════════════════════ */
.shloka{font-family:"Noto Serif Telugu","Cormorant Garamond",serif;font-weight:600;
  font-size:clamp(21px,3vw,32px);line-height:1.65;color:var(--am-600);margin:0;border:0;padding:0}
.shloka-en{font-family:"Cormorant Garamond",serif;font-style:italic;font-weight:500;
  font-size:clamp(19px,2.4vw,27px);color:var(--ink-600);margin:26px 0 0;line-height:1.6}
.shloka-src{font-family:"Jost",sans-serif;font-size:11px;font-weight:500;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold-500);margin:22px 0 0;padding-left:.26em}

/* ═══ 5 · Families ═══════════════════════════════════════════ */
/* min() on the track floor: a bare 290px minimum is wider than the content box
   on a 320px phone, so the cards used to run past the padding and get clipped. */
.fam-grid{display:grid;gap:30px;grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr))}
.fam-card{padding:42px 32px;text-align:center;background:rgba(253,249,240,.05);
  border:1px solid rgba(212,175,95,.28);
  transition:transform .7s var(--ease-luxe),border-color .7s var(--ease-luxe)}
.fam-card:hover{transform:translateY(-4px);border-color:rgba(212,175,95,.6)}
.fam-side{font-family:"Jost",sans-serif;font-size:11px;font-weight:500;letter-spacing:.28em;
  text-transform:uppercase;color:var(--am-300);margin:0;padding-left:.28em}
.fam-names{font-family:"Playfair Display",serif;font-weight:600;font-size:clamp(19px,2.2vw,24px);
  color:var(--cream-50);margin:16px 0 0;line-height:1.42}
.fam-rule{width:44px;height:1px;margin:18px auto;background:rgba(212,175,95,.6)}
.fam-note{font-family:"Cormorant Garamond",serif;font-style:italic;font-weight:500;font-size:17px;
  color:rgba(247,239,224,.66);margin:0}

/* ═══ 6 · Countdown + scratch ════════════════════════════════ */
.count-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1.6vw,18px)}
.count-box{padding:28px 8px;text-align:center;background:var(--cream-50);
  border:1px solid rgba(176,141,60,.3)}
.count-num{display:block;font-family:"Playfair Display",serif;font-weight:600;
  font-size:clamp(26px,4.4vw,44px);line-height:1;color:var(--am-700);font-variant-numeric:tabular-nums}
.count-label{display:block;font-family:"Jost",sans-serif;font-size:10px;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--gold-600);margin-top:12px;padding-left:.24em}
.count-when{font-family:"Jost",sans-serif;font-size:12px;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold-500);padding-left:.24em}
.scratch-hint{font-family:"Cormorant Garamond",serif;font-style:italic;font-weight:500;
  font-size:clamp(17px,2vw,21px);color:var(--ink-500)}
.scratch-wrap{position:relative;max-width:600px;margin-inline:auto;overflow:hidden;touch-action:none}
.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:"Jost",sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;color:rgba(14,47,33,.6);padding-left:.3em;
  transition:opacity .5s var(--ease-luxe)}
.scratch-label.is-done{opacity:0}
@media (max-width:520px){.count-grid{grid-template-columns:repeat(2,1fr)}}

/* ═══ 7 · Rituals ════════════════════════════════════════════ */
.tl{position:relative;max-width:730px;margin-inline:auto;padding-left:40px}
.tl-spine{position:absolute;left:8px;top:8px;bottom:8px;width:1px;background:rgba(212,175,95,.28)}
.tl-spine i{position:absolute;inset:0;transform-origin:top;transform:scaleY(0);background:var(--gold-400)}
.tl-item{position:relative;padding-bottom:42px}
.tl-item:last-child{padding-bottom:0}
.tl-dot{position:absolute;left:-36px;top:11px;width:9px;height:9px;border-radius:50%;
  background:var(--am-700);border:1px solid var(--gold-400);
  transition:background-color .6s var(--ease-luxe)}
.tl-item:hover .tl-dot{background:var(--gold-400)}
.tl-card{transition:transform .8s var(--ease-luxe)}
.tl-item:hover .tl-card{transform:translateX(5px)}
.tl-when{font-family:"Jost",sans-serif;font-size:11px;font-weight:500;letter-spacing:.26em;
  text-transform:uppercase;color:var(--am-300);margin:0;padding-left:.26em}
.tl-name{font-family:"Playfair Display",serif;font-weight:600;font-size:clamp(21px,2.5vw,28px);
  color:var(--cream-50);margin:11px 0 0}
.tl-note{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:18px;
  color:rgba(247,239,224,.7);margin:10px 0 0}

/* ═══ 8 · Venue ══════════════════════════════════════════════ */
.venue-grid{display:grid;gap:40px;grid-template-columns:1fr 1fr;align-items:stretch}
.venue-card{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:20px 0}
.venue-name{font-family:"Playfair Display",serif;font-weight:600;font-size:clamp(24px,3vw,34px);
  color:var(--am-700);margin:0;line-height:1.28}
.venue-addr{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:19px;
  color:var(--ink-600);margin:18px 0 0}
.venue-note{font-family:"Cormorant Garamond",serif;font-style:italic;font-weight:500;font-size:17px;
  color:var(--ink-500);margin:14px 0 0}
.venue-map{position:relative;overflow:hidden;min-height:340px;border:1px solid rgba(176,141,60,.3)}
.venue-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:saturate(.7) contrast(.96)}
@media (max-width:860px){.venue-grid{grid-template-columns:1fr}}

/* ═══ 9 · Details ════════════════════════════════════════════ */
.detail-grid{display:grid;gap:30px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.detail-card{padding:38px 32px;text-align:center;background:rgba(253,249,240,.05);
  border:1px solid rgba(212,175,95,.26);transition:transform .7s var(--ease-luxe)}
.detail-card:hover{transform:translateY(-4px)}
.detail-h{font-family:"Playfair Display",serif;font-weight:600;font-size:23px;
  color:var(--gold-200);margin:0}
.detail-p{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:18px;
  color:rgba(247,239,224,.72);margin:15px 0 0}

/* ═══ 10 · Gallery ═══════════════════════════════════════════ */
.gal-grid{display:grid;gap:16px;grid-template-columns:repeat(4,1fr);grid-auto-rows:190px}
.gal{position:relative;overflow:hidden;margin:0;border:1px solid rgba(176,141,60,.24)}
.gal img{width:100%;height:100%;object-fit:cover;filter:saturate(.9);
  transition:transform 1.5s var(--ease-luxe),filter 1.5s var(--ease-luxe)}
.gal:hover img{transform:scale(1.05);filter:saturate(1.02)}
/* one big tile and four quarters: 4 + 1 + 1 + 1 + 1 fills 4 columns x 2 rows
   exactly. The old arrangement spent 10 units on a 12-cell grid and left two
   of them empty in the bottom right. */
.gal.g1{grid-column:span 2;grid-row:span 2}
.gal.g2,.gal.g3,.gal.g4,.gal.g5{grid-column:span 1}
@media (max-width:760px){
  .gal-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px}
  .gal.g1,.gal.g2,.gal.g5{grid-column:span 2}
}

/* ═══ 11 · Blessings ═════════════════════════════════════════ */
.bless-mark{width:112px;margin:36px auto 0;color:var(--gold-300)}
.bless-mark svg{width:100%;height:auto}
.bless-ring{transform-origin:50px 50px;animation:blessTurn 72s linear infinite}
@keyframes blessTurn{to{transform:rotate(360deg)}}
.bless-quote{font-family:"Cormorant Garamond",serif;font-style:italic;font-weight:500;
  font-size:clamp(20px,2.8vw,30px);line-height:1.62;color:rgba(247,239,224,.88);margin:34px 0 0}
.bless-src{font-family:"Jost",sans-serif;font-size:11px;font-weight:500;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold-400);margin:22px 0 0;padding-left:.26em}

/* ═══ 12 · RSVP ══════════════════════════════════════════════ */
.card-marble{background:var(--cream-50);border:1px solid rgba(176,141,60,.32);
  box-shadow:0 44px 80px -56px rgba(14,47,33,.5)}
.f-label{display:block;font-family:"Jost",sans-serif;font-size:11px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--am-500);margin-bottom:10px;padding-left:.24em}
.f-in{width:100%;padding:14px 2px;background:transparent;color:var(--ink-700);
  border:0;border-bottom:1px solid rgba(176,141,60,.45);
  font-family:"Cormorant Garamond",serif;font-weight:500;font-size:20px;
  transition:border-color .5s var(--ease-luxe)}
.f-in::placeholder{color:rgba(42,33,24,.42)}
.f-in:focus{outline:none;border-bottom-color:var(--gold-500)}
.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='%231c5c42' 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}
textarea.f-in{resize:none}
.f-fine{text-align:center;font-family:"Jost",sans-serif;font-size:11.5px;color:var(--ink-500);margin:0}

/* ═══ Footer ═════════════════════════════════════════════════ */
.foot{background:var(--am-800);color:var(--cream-200);padding:92px 0 0;text-align:center;position:relative}
.foot::before{content:"";position:absolute;top:0;left:50%;width:min(460px,66%);height:1px;
  transform:translateX(-50%);background:linear-gradient(90deg,transparent,var(--gold-400),transparent)}
.foot-mark{width:60px;margin:0 auto;color:var(--gold-400)}
.foot-mark svg{width:100%;height:auto}
.foot-names{font-size:clamp(46px,6vw,70px);line-height:1;color:var(--gold-300);margin:22px 0 0}
.foot-rule{width:48px;height:1px;margin:22px auto;background:rgba(212,175,95,.6)}
.foot-meta{font-family:"Jost",sans-serif;font-size:11px;font-weight:500;letter-spacing:.28em;
  text-transform:uppercase;color:rgba(236,224,203,.75);margin:0;padding-left:.28em}
.foot-tag{font-family:"Jost",sans-serif;font-size:11px;font-weight:500;letter-spacing:.2em;
  color:var(--gold-400);margin:15px 0 0;padding-left:.2em}

/* ═══ Invitocraft bar ════════════════════════════════════════ */
.ic-bar{margin-top:60px;padding:28px 28px 8px;border-top:1px solid rgba(212,175,95,.22)}
.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(--gold-300);text-decoration:none;
  transition:color .4s var(--ease-luxe)}
.ic-brand:hover{color:var(--gold-200)}
.ic-seal{width:30px;height:30px;border-radius:50%;flex:none;background:var(--cream-50);padding:3px;
  box-shadow:0 0 0 1px rgba(212,175,95,.45)}
.ic-made{font-family:"Jost",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(--saffron-500)}
.ic-cta{font-family:"Jost",sans-serif;font-size:11px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-400);text-decoration:none;
  padding:10px 20px 10px calc(20px + .18em);
  border:1px solid rgba(212,175,95,.35);border-radius:999px;
  transition:border-color .4s var(--ease-luxe),color .4s var(--ease-luxe),transform .4s var(--ease-luxe)}
.ic-cta:hover{border-color:var(--gold-300);color:var(--gold-200);transform:translateY(-2px)}
.ic-fine{margin:20px 0 0;text-align:center;font-family:"Jost",sans-serif;font-size:10.5px;
  letter-spacing:.14em;color:rgba(236,224,203,.45)}
@media (max-width:560px){.ic-bar-in{justify-content:center;text-align:center}}

/* ═══ Cursor glow ════════════════════════════════════════════ */
#cursor-glow{position:fixed;top:0;left:0;width:380px;height:380px;border-radius:50%;pointer-events:none;
  z-index:90;opacity:0;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(212,175,95,.11),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(--gold-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 tiles run tall used to be the composition here, but the spans do
   not divide into the column count, so the last cell was left standing empty.
   The tiles carry their own variety through their aspect ratios. */
@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}


/* Do not bounce past the ends where the browser will let us say so.

   Chrome and Android honour this; iOS Safari does NOT apply
   overscroll-behavior to the document scroller, only to nested ones, which
   is why the rubber-band still happens there and why the page-canvas colour
   below is the fix that actually lands. Kept because it is free and it does
   remove the bounce everywhere else. */
html{overscroll-behavior-y:none}


/* ═══ The page canvas ══════════════════════════════════════════════
   iOS Safari's page-level rubber-band CANNOT be turned off — the root's
   overscroll-behavior is honoured for nested scrollers, not for the
   document — so flinging to the bottom of a long page always exposes a
   strip below the content. Whatever is painted there is the CANVAS
   background, and the canvas takes html's background; only if html has
   none does it fall back to body's. body is the pale page colour, which
   is why the strip read as "the page ran out" under a dark footer, on
   every page of the site including the marketing pages.

   Giving html the colour the page ENDS in fixes it by definition rather
   than by covering it, and costs no layout. body keeps the page colour,
   so nothing inside the document changes. Token, not a hex, so a reskin
   carries it. */
html{background:var(--am-800)}

/* body{overflow-x:hidden} forces overflow-y to compute to `auto`, which makes
   body a scroll container in its own right and lets it hold a scroll extent
   that can diverge from the viewport's. `clip` clips exactly the same and
   creates no scroller. Guarded: Safari below 16 has no clip and keeps hidden. */
@supports (overflow-x:clip){ body{overflow-x:clip} }