/* ═══════════════════════════════════════════════════════════════
   THORANAM — తోరణం
   The festive garland strung across a doorway. Where Vaibhavam is a
   temple at noon, Swarnakamala a lotus at dawn and Mangala Deepam a
   brass lamp at night, this one is the THRESHOLD — the morning of the
   wedding, mango leaves over the door, and every guest walking under it.

   Peacock is the ground, gold is the thread, one flower accent.
   The signature device is the temple-border strip: a row of small
   temple triangles under two gold stripes, built once here and used to
   separate every band, frame the couple niches and edge the countdown
   cards. It is what should make this template recognisable in a
   thumbnail, so nothing else does that job — no thin centred hairline.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --pk-300:#6fc3bd; --pk-400:#3da39d; --pk-500:#1c7f7c; --pk-600:#0f6260; --pk-700:#0a4746; --pk-800:#06302f;
  --go-200:#f7e6b4; --go-300:#e9cd82; --go-400:#d4ae55; --go-500:#b08b34; --go-600:#8a6b24;
  --bl-300:#f08cb0; --bl-400:#e05b8c; --bl-500:#c33a6c; --bl-600:#9c2652;
  --iv-50:#fffcf6; --iv-100:#fbf3e6; --iv-200:#f3e6cf; --iv-300:#e6d3b4;
  --ik-500:#7a6a55; --ik-600:#55483a; --ik-700:#3a3028; --ik-800:#241d18;
  --ease-luxe:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);

  /* ── THE SIGNATURE DEVICE ─────────────────────────────────────
     One repeating strip, drawn once, used everywhere. Triangles
     hang downward in --strip and point upward in --strip-up, so a
     panel can be closed on both edges with the same motif. */
  --strip:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='15' viewBox='0 0 18 15'%3E%3Crect width='18' height='2.6' fill='%23d4ae55'/%3E%3Crect y='3.9' width='18' height='1.1' fill='%23b08b34'/%3E%3Cpath d='M0 6.4h18L9 15Z' fill='%23d4ae55'/%3E%3C/svg%3E");
  --strip-up:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='15' viewBox='0 0 18 15'%3E%3Crect y='12.4' width='18' height='2.6' fill='%23d4ae55'/%3E%3Crect y='10' width='18' height='1.1' fill='%23b08b34'/%3E%3Cpath d='M0 8.6h18L9 0Z' fill='%23d4ae55'/%3E%3C/svg%3E");
}

/* every strip in the template is this one rule wearing a different width */
.head-strip,.panel-strip,.niche-edge,.ib-edge,.fam-strip,.detail-strip,.rule-strip,
.band::before,.count-box::before,.card-ivory::before,.foot::before,
.venue-item + .venue-item::before{
  background-image:var(--strip);background-repeat:repeat-x;background-position:center top;
  height:15px;pointer-events:none}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:hidden;background:var(--iv-50);color:var(--ik-700);
  font-weight:400;line-height:1.72;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
::selection{background:rgba(28,127,124,.22);color:var(--ik-800)}

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

/* The verb is STRUNG: every reveal is a horizontal clip wipe, so it holds
   at zero width until GSAP draws it across. clip-path is set here as well
   as opacity because the five-second safety net has to be able to clear
   BOTH — an element at opacity 1 inside inset(0 100% 0 0) is still invisible. */
[data-reveal]{opacity:0;will-change:transform,opacity}

/* ── Layout ───────────────────────────────────────────────────── */
.wrap{max-width:1140px;margin:0 auto;padding:0 28px}
.wrap-sm{max-width:720px;margin:0 auto;padding:0 28px}
.band{position:relative;overflow:hidden;padding:140px 0 132px}
@media (max-width:768px){.band{padding:96px 0 90px}}

/* the border strip separates every band — this replaces the thin centred
   gradient hairline the other templates use */
.band::before,.foot::before{content:"";position:absolute;top:0;left:0;right:0;z-index:3}

/* ivory is the ground */
.band-ivory{background:
  radial-gradient(110% 62% at 50% 0%, rgba(28,127,124,.10), transparent 58%),
  linear-gradient(180deg,var(--iv-50),var(--iv-100) 72%,var(--iv-100));
  color:var(--ik-700)}
.band-ivory-warm{background:
  radial-gradient(96% 60% at 50% 100%, rgba(212,174,85,.20), transparent 62%),
  linear-gradient(180deg,var(--iv-100),var(--iv-200));
  color:var(--ik-700)}
/* deep peacock is the alternating band */
.band-peacock{background:
  radial-gradient(112% 74% at 50% 0%, var(--pk-600), var(--pk-700) 58%, var(--pk-800));
  color:var(--iv-100)}
.band-deep{background:
  radial-gradient(78% 56% at 50% 44%, rgba(28,127,124,.32), transparent 66%),
  var(--pk-800);
  color:var(--iv-100)}

/* ── Type ─────────────────────────────────────────────────────── */
.eyebrow{font-family:"Manrope",sans-serif;font-size:12px;font-weight:600;letter-spacing:.3em;
  text-transform:uppercase;color:var(--go-600);text-align:center;padding-left:.3em;margin:0}
.band-peacock .eyebrow{color:var(--go-300)}

.h2{font-family:"Yeseva One",serif;font-weight:400;font-size:clamp(28px,4.2vw,50px);
  line-height:1.24;text-align:center;margin:16px 0 0;color:var(--ik-800)}
.band-peacock .h2{color:var(--iv-50)}

/* Section headers: centred, a short border strip above, a gold rule below */
.head{position:relative;text-align:center}
.head-strip{display:block;width:126px;margin:0 auto 24px}
.head-rule{display:block;width:66px;height:1px;margin:24px auto 0;background:var(--go-500)}
.band-peacock .head-rule{background:var(--go-400)}

.lede{font-family:"Spectral",serif;font-weight:400;font-size:clamp(18px,2.1vw,22px);
  line-height:1.84;color:var(--ik-600)}
.band-peacock .lede{color:rgba(251,243,230,.86)}

.script-xl{font-family:"Yellowtail",cursive;font-size:clamp(34px,4.8vw,56px);line-height:1.28;
  color:var(--bl-500);margin:0}
.band-peacock .script-xl{color:var(--bl-300)}

/* ═══ 1 · HERO — the thoranam over the door ══════════════════ */
/* 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;
  justify-content:center;
  padding-top:clamp(150px,30vh,300px);padding-bottom:clamp(96px,17vh,190px);
  background:
    radial-gradient(120% 58% at 50% 0%, rgba(28,127,124,.20), transparent 62%),
    radial-gradient(90% 50% at 50% 100%, rgba(212,174,85,.20), transparent 64%),
    linear-gradient(180deg,#f7efe0 0%,var(--iv-50) 44%,var(--iv-100) 78%,var(--iv-200) 100%)}
#thoranam{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(72% 34% at 50% 4%, rgba(6,48,47,.10), transparent 70%),
    linear-gradient(180deg,transparent 42%,rgba(255,252,246,.55) 62%,rgba(255,252,246,.15) 88%,transparent)}

/* The prompt lives in the clear strip below the garland. 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.6vh;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(-16px);pointer-events:none}
.open-orn{width:clamp(170px,26vw,260px);color:var(--go-500);opacity:.9}
.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:"Manrope",sans-serif;font-size:12px;font-weight:600;letter-spacing:.3em;
  text-transform:uppercase;color:var(--pk-700);padding:14px 30px 14px calc(30px + .3em);
  border:1px solid rgba(176,139,52,.55);border-radius:999px;background:rgba(255,252,246,.66);
  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:.22em;padding:13px 22px}}
.hero-open:hover .open-hint{border-color:var(--pk-500);background:rgba(255,252,246,.9)}
.open-dot{width:6px;height:6px;border-radius:50%;background:var(--bl-400);flex:none;
  box-shadow:0 0 10px 2px rgba(224,91,140,.5);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}
.hero-eyebrow{font-family:"Manrope",sans-serif;font-size:12px;font-weight:600;letter-spacing:.36em;
  text-transform:uppercase;color:var(--pk-500);padding-left:.36em;margin:0}
.hero-names{margin:24px 0 0;display:flex;align-items:center;justify-content:center;
  gap:clamp(12px,2.6vw,32px);flex-wrap:wrap}
.hero-name{font-family:"Yeseva One",serif;font-weight:400;font-size:clamp(36px,6.8vw,82px);
  line-height:1.14;color:var(--ik-800);text-shadow:0 2px 26px rgba(255,252,246,.9)}
.hero-amp{color:var(--go-500);width:clamp(58px,8vw,90px);flex:none}
.hero-amp svg{width:100%;height:auto}
.hero-telugu{margin:14px 0 0;font-size:clamp(15px,2vw,20px);color:var(--pk-600);font-weight:400}
.hero-rule{width:150px;height:1px;margin:26px auto 0;
  background:linear-gradient(90deg,transparent,var(--go-500),transparent)}
.hero-date{font-family:"Manrope",sans-serif;font-size:clamp(11px,1.5vw,14px);font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;color:var(--ik-500);margin:18px 0 0;padding-left:.26em}

/* ═══ Buttons ════════════════════════════════════════════════ */
.btn-line{position:relative;display:inline-flex;align-items:center;gap:10px;padding:15px 36px;
  border:1px solid rgba(176,139,52,.6);border-radius:999px;cursor:pointer;text-decoration:none;
  font-family:"Manrope",sans-serif;font-size:12px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ik-700);background:transparent;padding-left:calc(36px + .22em);
  transition:border-color .6s var(--ease-luxe),background-color .6s var(--ease-luxe),color .6s var(--ease-luxe)}
.btn-line:hover{border-color:var(--pk-500);background:rgba(28,127,124,.1);color:var(--pk-700)}
.band-peacock .btn-line{color:var(--iv-100);border-color:rgba(233,205,130,.55)}
.band-peacock .btn-line:hover{border-color:var(--go-300);background:rgba(233,205,130,.14);color:var(--iv-50)}

/* the single bloom-coloured button — the flower accent, used once */
.btn-bloom{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:"Manrope",sans-serif;font-size:12px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--iv-50);padding-left:calc(38px + .2em);
  background:linear-gradient(135deg,var(--bl-400),var(--bl-500) 56%,var(--bl-600));
  box-shadow:0 18px 34px -18px rgba(195,58,108,.8),inset 0 0 0 1px rgba(255,252,246,.24);
  transition:transform .6s var(--ease-luxe),box-shadow .6s var(--ease-luxe)}
.btn-bloom:hover{transform:translateY(-2px);
  box-shadow:0 26px 46px -18px rgba(195,58,108,.9),inset 0 0 0 1px rgba(255,252,246,.42)}

.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,252,246,.86);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(176,139,52,.5);color:var(--pk-600);
  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(--pk-500);color:var(--pk-700);transform:scale(1.05)}
@media (max-width:880px){.ic-round{top:auto;bottom:22px;right:18px}}

/* ═══ 2 · Invitation — a panel closed on both edges ══════════ */
.panel{position:relative;padding:66px 34px 62px;text-align:center;
  border:1px solid rgba(176,139,52,.34);border-radius:4px;
  background:linear-gradient(180deg,rgba(255,252,246,.9),rgba(243,230,207,.5))}
.panel-strip{position:absolute;left:0;right:0}
.panel-strip-t{top:0}
.panel-strip-b{bottom:0;background-image:var(--strip-up);background-position:center bottom}
@media (max-width:560px){.panel{padding:52px 20px 50px}}

/* ═══ 3 · Couple — two arched niches either side of a doorway ═ */
.niche-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,4vw,56px);align-items:start}
.niche-frame{position:relative;overflow:hidden;border-radius:999px 999px 5px 5px;
  border:1px solid rgba(212,174,85,.55);background:var(--pk-800);
  box-shadow:0 40px 70px -48px rgba(6,48,47,.9)}
.niche-frame img{aspect-ratio:3/4.3;object-fit:cover;width:100%;
  filter:saturate(.92) contrast(1.02);
  transition:transform 1.6s var(--ease-luxe),filter 1.6s var(--ease-luxe)}
.niche:hover .niche-frame img{transform:scale(1.04);filter:saturate(1) contrast(1.05)}
.niche-edge{position:absolute;left:0;right:0;bottom:0;z-index:2;
  background-image:var(--strip-up);background-position:center bottom}
.niche-text{padding:26px 6px 0;text-align:center}
.niche-name{font-family:"Yeseva One",serif;font-weight:400;font-size:clamp(23px,2.9vw,32px);
  margin:0;color:var(--go-200)}
.niche-role{font-family:"Manrope",sans-serif;font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--go-300);margin:13px 0 0;padding-left:.2em}
.niche-note{font-family:"Spectral",serif;font-style:italic;font-weight:400;font-size:17px;
  color:rgba(243,230,207,.76);margin:15px 0 0}
@media (max-width:560px){
  .niche-grid{grid-template-columns:1fr;gap:52px}
  .niche-frame{max-width:340px;margin-inline:auto}
}

/* ═══ 4 · Shloka ═════════════════════════════════════════════ */
.rule-strip{display:block;width:min(288px,72%);margin:0 auto 44px}
.rule-strip-b{margin:44px auto 0;background-image:var(--strip-up);background-position:center bottom}
.shloka{font-weight:600;font-size:clamp(19px,2.6vw,29px);line-height:1.9;
  color:var(--pk-700);margin:0;border:0;padding:0}
.shloka-en{font-family:"Spectral",serif;font-style:italic;font-weight:400;
  font-size:clamp(18px,2.2vw,25px);color:var(--ik-600);margin:28px 0 0;line-height:1.7}
.shloka-src{font-family:"Manrope",sans-serif;font-size:11px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--go-600);margin:22px 0 0;padding-left:.24em}

/* ═══ 5 · Families ═══════════════════════════════════════════ */
.fam-grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.fam-card{position:relative;padding:46px 28px 34px;text-align:center;
  border:1px solid rgba(176,139,52,.32);border-radius:4px;
  background:linear-gradient(180deg,rgba(255,252,246,.94),rgba(243,230,207,.44));
  transition:transform .7s var(--ease-luxe),border-color .7s var(--ease-luxe)}
.fam-card:hover{transform:translateY(-5px);border-color:rgba(28,127,124,.5)}
.fam-strip{position:absolute;left:0;right:0;top:0}
.fam-side{font-family:"Manrope",sans-serif;font-size:11px;font-weight:600;letter-spacing:.26em;
  text-transform:uppercase;color:var(--pk-500);margin:0;padding-left:.26em}
.fam-names{font-family:"Yeseva One",serif;font-weight:400;font-size:clamp(18px,2vw,22px);
  color:var(--ik-800);margin:16px 0 0;line-height:1.5}
.fam-rule{width:44px;height:1px;margin:18px auto;background:rgba(176,139,52,.7)}
.fam-note{font-family:"Spectral",serif;font-style:italic;font-weight:400;font-size:16px;
  color:var(--ik-500);margin:0}

/* ═══ 6 · Countdown — four border-edged cards on deep peacock ═ */
.count-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(7px,1.4vw,16px)}
.count-box{position:relative;padding:32px 4px 22px;text-align:center;
  background:rgba(6,48,47,.55);border:1px solid rgba(212,174,85,.45)}
.count-box::before{content:"";position:absolute;left:0;right:0;top:0}
.count-num{display:block;font-family:"Manrope",sans-serif;font-weight:600;
  font-size:clamp(23px,4.2vw,42px);line-height:1;color:var(--go-200);font-variant-numeric:tabular-nums}
.count-label{display:block;font-family:"Manrope",sans-serif;font-size:9.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--pk-300);margin-top:12px;padding-left:.14em}
.count-when{font-family:"Manrope",sans-serif;font-size:12px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--go-300);padding-left:.22em}
.scratch-hint{font-family:"Spectral",serif;font-style:italic;font-weight:400;
  font-size:clamp(16px,1.9vw,20px);color:rgba(243,230,207,.8)}
.scratch-wrap{position:relative;max-width:620px;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:"Manrope",sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.28em;text-transform:uppercase;color:rgba(247,230,180,.8);padding-left:.28em;
  transition:opacity .5s var(--ease-luxe)}
.scratch-label.is-done{opacity:0}
@media (max-width:400px){.count-box{padding:26px 2px 18px}.count-label{font-size:8.5px;letter-spacing:.08em}}

/* ═══ 7 · Rituals — alternating cards on a central gold thread ═ */
.tl{position:relative;max-width:920px;margin-inline:auto}
.tl-thread{position:absolute;left:50%;top:6px;bottom:6px;width:2px;margin-left:-1px;
  background:rgba(176,139,52,.22)}
.tl-thread i{position:absolute;inset:0;transform-origin:top;transform:scaleY(0);
  background:linear-gradient(180deg,var(--go-400),var(--go-500))}
.tl-item{position:relative;width:calc(50% - 44px);padding-bottom:40px}
.tl-item:last-child{padding-bottom:0}
.tl-item:nth-of-type(odd){text-align:right}
.tl-item:nth-of-type(even){margin-left:auto;text-align:left}
/* each card is tied to the thread by a short stitch, knotted where it meets */
.tl-stitch{position:absolute;top:15px;width:44px;height:1px;background:var(--go-500)}
.tl-item:nth-of-type(odd) .tl-stitch{right:-44px}
.tl-item:nth-of-type(even) .tl-stitch{left:-44px}
.tl-knot{position:absolute;top:11px;width:9px;height:9px;transform:rotate(45deg);
  background:var(--go-300);border:1px solid var(--go-600)}
.tl-item:nth-of-type(odd) .tl-knot{right:-48.5px}
.tl-item:nth-of-type(even) .tl-knot{left:-48.5px}
.tl-card{transition:transform .8s var(--ease-luxe)}
.tl-item:nth-of-type(odd):hover .tl-card{transform:translateX(-6px)}
.tl-item:nth-of-type(even):hover .tl-card{transform:translateX(6px)}
.tl-when{font-family:"Manrope",sans-serif;font-size:11px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--pk-500);margin:0;padding-left:.24em}
.tl-name{font-family:"Yeseva One",serif;font-weight:400;font-size:clamp(19px,2.2vw,26px);
  color:var(--ik-800);margin:11px 0 0}
.tl-note{font-family:"Spectral",serif;font-weight:400;font-size:17px;
  color:var(--ik-600);margin:10px 0 0}
@media (max-width:760px){
  .tl-thread{left:14px}
  .tl-item,.tl-item:nth-of-type(odd),.tl-item:nth-of-type(even){
    width:auto;margin:0;text-align:left;padding-left:58px}
  .tl-item:nth-of-type(odd) .tl-stitch,.tl-item:nth-of-type(even) .tl-stitch{
    left:15px;right:auto;width:30px}
  .tl-item:nth-of-type(odd) .tl-knot,.tl-item:nth-of-type(even) .tl-knot{left:41px;right:auto}
  .tl-item:nth-of-type(odd):hover .tl-card,.tl-item:nth-of-type(even):hover .tl-card{transform:translateX(6px)}
}

/* ═══ 8 · Venue ══════════════════════════════════════════════ */
.venue-grid{display:grid;gap:40px;grid-template-columns:1.05fr .95fr;align-items:stretch}
.venue-map{position:relative;overflow:hidden;min-height:370px;border-radius:200px 200px 4px 4px;
  border:1px solid rgba(176,139,52,.42)}
.venue-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;
  filter:saturate(.62) contrast(1.02)}
.venue-card{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:20px 0}
.venue-name{font-family:"Yeseva One",serif;font-weight:400;font-size:clamp(22px,2.7vw,31px);
  color:var(--ik-800);margin:0;line-height:1.36}
.venue-addr{font-family:"Spectral",serif;font-weight:400;font-size:18px;
  color:var(--ik-600);margin:18px 0 0}
.venue-note{font-family:"Spectral",serif;font-style:italic;font-weight:400;font-size:16px;
  color:var(--ik-500);margin:14px 0 0}
@media (max-width:860px){
  .venue-grid{grid-template-columns:1fr}
  .venue-map{min-height:300px;border-radius:140px 140px 4px 4px}
}
/* Two or more venues stack down the band, each keeping its own map. The
   separator between them is the signature strip again, not a new device. */
.venue-list{display:grid;gap:clamp(52px,6.5vw,84px)}
.venue-item{position:relative}
.venue-item + .venue-item{padding-top:clamp(46px,5.5vw,70px)}
.venue-item + .venue-item::before{content:"";position:absolute;top:0;left:50%;
  width:min(288px,72%);transform:translateX(-50%)}
.venue-tag{font-family:"Manrope",sans-serif;font-size:11.5px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--go-600);
  text-align:center;margin:0 0 28px;padding-left:.24em}

/* ═══ 9 · Invited by — a pair that never stacks ══════════════
   The brief was explicit: side by side on a phone too. So the grid keeps
   its three tracks at every width and the frames just get smaller —
   no breakpoint collapses this to one column. */
.ib-pair{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;
  gap:clamp(10px,3.4vw,34px);max-width:560px;margin-inline:auto}
.ib{margin:0;text-align:center}
.ib-frame{position:relative;overflow:hidden;border-radius:999px 999px 5px 5px;
  border:1px solid rgba(212,174,85,.55);background:var(--pk-800);
  box-shadow:0 30px 54px -40px rgba(6,48,47,.85)}
.ib-frame img{aspect-ratio:3/4.1;object-fit:cover;width:100%;display:block;
  filter:saturate(.92) contrast(1.02);
  transition:transform 1.6s var(--ease-luxe)}
.ib:hover .ib-frame img{transform:scale(1.04)}
.ib-edge{position:absolute;left:0;right:0;bottom:0;z-index:2;
  background-image:var(--strip-up);background-position:center bottom}
.ib-amp{align-self:center;font-family:"Yeseva One",serif;line-height:1;
  font-size:clamp(19px,4.4vw,29px);color:var(--go-500);
  padding-top:clamp(28px,9vw,62px)}
.ib-name{font-family:"Yeseva One",serif;font-weight:400;line-height:1.24;
  font-size:clamp(16px,4.2vw,25px);color:var(--ik-800);margin:16px 0 0}
.ib-role{font-family:"Manrope",sans-serif;font-weight:600;
  font-size:clamp(8.5px,2.1vw,11px);letter-spacing:.2em;text-transform:uppercase;
  color:var(--go-600);margin:7px 0 0;padding-left:.2em}
.ib-note{font-family:"Spectral",serif;font-style:italic;font-weight:400;
  font-size:clamp(15px,2vw,18px);color:var(--ik-500);
  text-align:center;margin:34px auto 0;max-width:52ch}
/* One wide couple photograph instead of the pair, centred in the band. Any
   value other than "single" falls through to the pair above, so a typo cannot
   empty this. */
.ib-pair[data-layout="single"]{grid-template-columns:minmax(0,430px);
  justify-content:center;justify-items:center;max-width:none}
.ib-pair[data-layout="single"] .ib{width:100%}
.ib-pair[data-layout="single"] .ib-amp,
.ib-pair[data-layout="single"] .ib-2{display:none}
.ib-pair[data-layout="single"] .ib-frame img{aspect-ratio:4/3.4}
.ib-pair[data-layout="single"] .ib-name{font-size:clamp(22px,4.6vw,30px)}

/* ═══ 9 · Details — two-column cards, strip along the top edge ═ */
.detail-grid{display:grid;gap:22px;grid-template-columns:1fr 1fr}
.detail-card{position:relative;padding:44px 28px 30px;
  border:1px solid rgba(212,174,85,.34);border-radius:4px;
  background:linear-gradient(180deg,rgba(6,48,47,.55),rgba(6,48,47,.24));
  transition:border-color .7s var(--ease-luxe),transform .7s var(--ease-luxe)}
.detail-card:hover{border-color:rgba(233,205,130,.7);transform:translateY(-4px)}
.detail-strip{position:absolute;left:0;right:0;top:0}
.detail-h{font-family:"Yeseva One",serif;font-weight:400;font-size:clamp(18px,2vw,22px);
  color:var(--go-200);margin:0}
.detail-p{font-family:"Spectral",serif;font-weight:400;font-size:17px;
  color:rgba(243,230,207,.78);margin:12px 0 0}
@media (max-width:700px){.detail-grid{grid-template-columns:1fr}}

/* ═══ 10 · Gallery — a checked grid, like festive cloth ══════ */
.gal-grid{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);align-items:center}
.gal{position:relative;overflow:hidden;margin:0;border:1px solid rgba(176,139,52,.5)}
.gal img{width:100%;height:100%;object-fit:cover;filter:saturate(.9);
  transition:transform 1.6s var(--ease-luxe),filter 1.6s var(--ease-luxe)}
.gal::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,252,246,.3);
  transition:opacity 1s var(--ease-luxe)}
.gal:hover img{transform:scale(1.05);filter:saturate(1.04)}
/* alternate cells are taller; the short ones ride the middle of the row,
   so three columns read as a check rather than a stagger */
.gal:nth-child(odd){aspect-ratio:3/4.4}
.gal:nth-child(even){aspect-ratio:1/1}
@media (max-width:720px){
  .gal-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  /* two columns need a different parity or the check collapses to stripes */
  .gal:nth-child(odd),.gal:nth-child(even){aspect-ratio:1/1}
  .gal:nth-child(4n+1),.gal:nth-child(4n){aspect-ratio:3/4.4}
}

/* ═══ 11 · Blessings ═════════════════════════════════════════ */
.bless-mark{width:min(270px,80%);margin:40px auto 0;color:var(--go-400)}
.bless-mark svg{width:100%;height:auto}
.bless-quote{font-family:"Spectral",serif;font-style:italic;font-weight:400;
  font-size:clamp(19px,2.5vw,28px);line-height:1.7;color:rgba(251,243,230,.92);margin:34px 0 0}
.bless-src{font-family:"Manrope",sans-serif;font-size:11px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--go-300);margin:22px 0 0;padding-left:.24em}

/* ═══ 12 · RSVP ══════════════════════════════════════════════ */
.card-ivory{position:relative;padding-top:52px;
  background:linear-gradient(180deg,rgba(255,252,246,.96),rgba(251,243,230,.86));
  border:1px solid rgba(176,139,52,.36);border-radius:4px;
  box-shadow:0 44px 84px -60px rgba(36,29,24,.6)}
.card-ivory::before{content:"";position:absolute;left:0;right:0;top:0}
.f-label{display:block;font-family:"Manrope",sans-serif;font-size:11px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--go-600);margin-bottom:10px;padding-left:.22em}
.f-in{width:100%;padding:14px 2px;background:transparent;color:var(--ik-800);
  border:0;border-bottom:1px solid rgba(176,139,52,.45);
  font-family:"Spectral",serif;font-weight:400;font-size:19px;
  transition:border-color .5s var(--ease-luxe)}
.f-in::placeholder{color:rgba(122,106,85,.55)}
.f-in:focus{outline:none;border-bottom-color:var(--pk-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='%23b08b34' 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(--iv-50);color:var(--ik-800)}
textarea.f-in{resize:none}
.f-fine{text-align:center;font-family:"Manrope",sans-serif;font-size:11.5px;
  color:var(--ik-500);margin:0}

/* ═══ Footer ═════════════════════════════════════════════════ */
.foot{position:relative;background:var(--pk-800);color:var(--iv-200);padding:96px 0 0;text-align:center}
.foot-mark{width:min(230px,72%);margin:0 auto;color:var(--go-400)}
.foot-mark svg{width:100%;height:auto}
.foot-names{font-size:clamp(38px,5vw,58px);line-height:1.24;color:var(--bl-300);margin:24px 0 0}
.foot-rule{width:48px;height:1px;margin:22px auto;background:rgba(212,174,85,.6)}
.foot-meta{font-family:"Manrope",sans-serif;font-size:11px;font-weight:500;letter-spacing:.26em;
  text-transform:uppercase;color:rgba(243,230,207,.74);margin:0;padding-left:.26em}
.foot-tag{font-family:"Manrope",sans-serif;font-size:11px;font-weight:600;letter-spacing:.18em;
  color:var(--go-300);margin:15px 0 0;padding-left:.18em}

/* ═══ Invitocraft bar ════════════════════════════════════════ */
.ic-bar{margin-top:60px;padding:28px 28px 8px;border-top:1px solid rgba(212,174,85,.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(--go-300);text-decoration:none;
  transition:color .4s var(--ease-luxe)}
.ic-brand:hover{color:var(--go-200)}
.ic-seal{width:30px;height:30px;border-radius:50%;flex:none;background:var(--iv-50);padding:3px;
  box-shadow:0 0 0 1px rgba(212,174,85,.5)}
.ic-made{font-family:"Manrope",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(--bl-400)}
.ic-cta{font-family:"Manrope",sans-serif;font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--go-300);text-decoration:none;
  padding:10px 20px 10px calc(20px + .16em);
  border:1px solid rgba(212,174,85,.34);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(--go-300);color:var(--go-200);transform:translateY(-2px)}
.ic-fine{margin:20px 0 0;text-align:center;font-family:"Manrope",sans-serif;font-size:10.5px;
  letter-spacing:.14em;color:rgba(243,230,207,.44)}
@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(28,127,124,.09),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(--pk-500);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(--pk-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} }