/* =========================================================
   Annaliese Faith Hernandez — Mis Quince Años
   "Midnight & Gilt" — navy + gold, engraved-invitation feel
   ========================================================= */

:root{
  /* ink */
  --navy-950:#040A1B;
  --navy-900:#060F26;
  --navy-850:#08142E;
  --navy-800:#0A1836;
  --navy-700:#102247;
  --navy-600:#16305F;
  --navy-line:rgba(201,162,74,.22);

  /* gilt */
  --gold-100:#FBF3D2;
  --gold-200:#F3E3AE;
  --gold-300:#E8CC8A;
  --gold-500:#C9A24A;
  --gold-700:#8C6B2A;

  --ivory:#F6F1E6;
  --ivory-dim:rgba(246,241,230,.72);
  --ivory-faint:rgba(246,241,230,.5);

  /* champagne surface — the one light section on the page */
  --cham-bg:#F7F1E4;
  --cham-bg-2:#EFE4CC;
  --cham-card:#FFFDF7;
  --cham-ink:#0A1836;
  --cham-muted:#5C5545;
  --cham-gold:#7A5C22;      /* 5.5:1 on --cham-bg — the light-surface gold */
  --cham-line:rgba(122,92,34,.28);

  /* the video's own edge colour, so letterboxing on a phone is invisible */
  --video-edge:#141D2E;

  --foil:linear-gradient(102deg,#8C6B2A 0%,#F3E3AE 24%,#C9A24A 46%,#FBF3D2 68%,#A87F33 100%);

  /* type */
  --f-display:"Bodoni Moda", "Didot", Georgia, serif;
  --f-script:"Great Vibes", "Snell Roundhand", cursive;
  --f-label:"Cinzel", "Trajan Pro", Georgia, serif;
  --f-body:"Cormorant Garamond", Georgia, serif;

  /* rhythm */
  --gut:clamp(20px, 5vw, 48px);
  --sec-y:clamp(72px, 11vw, 148px);
  --maxw:1120px;
  --maxw-narrow:720px;

  --ease:cubic-bezier(.22,.61,.36,1);
}

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

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* the nav is fixed, so anchored sections must leave room for it or their
   first line lands underneath it */
section[id]{scroll-margin-top:clamp(72px,9vh,92px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--navy-900);
  color:var(--ivory);
  font-family:var(--f-body);
  font-size:clamp(17px,1.05vw + 14px,19px);
  line-height:1.72;
  font-weight:300;
  letter-spacing:.005em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img,svg{max-width:100%}
a{color:inherit}

::selection{background:var(--gold-500);color:var(--navy-900)}

.skip-link{
  position:fixed;top:-100px;left:16px;z-index:200;
  background:var(--gold-500);color:var(--navy-900);
  padding:10px 16px;border-radius:2px;font-family:var(--f-label);font-size:13px;
  text-decoration:none;transition:top .2s;
}
.skip-link:focus{top:16px}

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

/* ---------- backdrop ---------- */
.backdrop{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(120% 80% at 50% -10%, #12234A 0%, transparent 60%),
    radial-gradient(90% 60% at 50% 110%, #0C1A3B 0%, transparent 62%),
    var(--navy-900);
}
.backdrop__glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5}
.backdrop__glow--a{width:52vw;height:52vw;top:-14vw;left:-10vw;
  background:radial-gradient(circle,rgba(201,162,74,.16),transparent 68%)}
.backdrop__glow--b{width:46vw;height:46vw;bottom:-16vw;right:-12vw;
  background:radial-gradient(circle,rgba(22,48,95,.7),transparent 66%)}
.backdrop__stars{position:absolute;inset:0;opacity:.55;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(251,243,210,.9), transparent 60%),
    radial-gradient(1px 1px at 78% 12%, rgba(232,204,138,.75), transparent 60%),
    radial-gradient(1.2px 1.2px at 34% 62%, rgba(251,243,210,.55), transparent 60%),
    radial-gradient(1px 1px at 62% 78%, rgba(232,204,138,.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 54%, rgba(251,243,210,.5), transparent 60%),
    radial-gradient(1px 1px at 22% 88%, rgba(232,204,138,.5), transparent 60%),
    radial-gradient(1.1px 1.1px at 50% 32%, rgba(251,243,210,.45), transparent 60%);
  animation:twinkle 7s ease-in-out infinite alternate;
}
@keyframes twinkle{from{opacity:.32}to{opacity:.7}}
.backdrop__grain{position:absolute;inset:-50%;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- shared type ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.wrap--narrow{max-width:var(--maxw-narrow)}
.center{text-align:center}
.section{padding-block:var(--sec-y);position:relative}

.overline{
  font-family:var(--f-label);
  font-size:clamp(10px,.42vw + 9px,12px);
  letter-spacing:.42em;text-transform:uppercase;
  color:var(--gold-300);margin:0 0 1.1em;font-weight:500;
  text-indent:.42em;
}
.overline--center{text-align:center}

.h2{
  font-family:var(--f-display);
  font-weight:400;
  font-size:clamp(34px,5.2vw,60px);
  line-height:1.08;letter-spacing:.01em;
  margin:0 0 .35em;
}
.h3{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(24px,2.6vw,32px);line-height:1.2;margin:0 0 .5em;
  color:var(--gold-200);
}
.script{font-family:var(--f-script);font-weight:400;line-height:1.15}

.foil{
  background:var(--foil);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  animation:shimmer 9s linear infinite;
}
@keyframes shimmer{0%{background-position:0% 50%}100%{background-position:220% 50%}}

.lede{
  font-size:clamp(18px,1.1vw + 15px,22px);
  color:var(--ivory-dim);
  max-width:60ch;margin:0 auto 1.4em;
  font-weight:300;
}
.lede--tight{max-width:52ch}
.lede--es{font-style:italic;color:var(--gold-200);opacity:.85}

.fineprint{
  font-family:var(--f-label);
  font-size:clamp(10px,.4vw + 9px,12px);
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--ivory-faint);margin:2.2em 0 0;
}

.tbd{
  border-bottom:1px dashed rgba(232,204,138,.55);
  color:var(--gold-200);
  cursor:help;
}

/* gold hairline rule with a diamond */
.rule{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 auto 2.2em;max-width:280px}
.rule--wide{max-width:420px;margin-block:1.4em 1.6em}
.rule i{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold-500))}
.rule i:last-of-type{background:linear-gradient(90deg,var(--gold-500),transparent)}
.rule span{width:7px;height:7px;background:var(--gold-500);transform:rotate(45deg);flex:none;
  box-shadow:0 0 12px rgba(201,162,74,.55)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--f-label);
  font-size:clamp(11px,.4vw + 10px,13px);
  letter-spacing:.22em;text-transform:uppercase;text-indent:.22em;
  padding:16px 30px;text-decoration:none;border:1px solid transparent;
  border-radius:2px;cursor:pointer;position:relative;overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),color .3s,border-color .3s,background-color .3s;
}
.btn--sm{padding:11px 20px;font-size:11px}
.btn--block{width:100%;padding-block:19px}

.btn--gold{
  background:var(--foil);background-size:200% 100%;
  color:var(--navy-900);font-weight:600;
  box-shadow:0 8px 26px -12px rgba(201,162,74,.8);
}
.btn--gold:hover{transform:translateY(-2px);background-position:100% 50%;
  box-shadow:0 14px 34px -12px rgba(201,162,74,.95)}
.btn--gold:active{transform:translateY(0)}

.btn--ghost{border-color:var(--navy-line);color:var(--gold-200);background:rgba(246,241,230,.02)}
.btn--ghost:hover{border-color:var(--gold-500);color:var(--gold-100);transform:translateY(-2px);
  background:rgba(201,162,74,.08)}

.link-gold{
  font-family:var(--f-label);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-300);text-decoration:none;border-bottom:1px solid rgba(201,162,74,.3);
  padding-bottom:3px;transition:border-color .3s,color .3s;
}
.link-gold:hover{color:var(--gold-100);border-color:var(--gold-300)}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background-color .4s var(--ease),backdrop-filter .4s,border-color .4s,padding .4s;
  border-bottom:1px solid transparent;
  padding-block:6px;
}
.nav.is-stuck{
  background:rgba(6,15,38,.86);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--navy-line);
}
.nav__inner{
  max-width:var(--maxw);margin-inline:auto;padding:14px var(--gut);
  display:flex;align-items:center;gap:24px;
}
.nav__mark{text-decoration:none;flex:none}
.nav__mark-letters{
  font-family:var(--f-label);font-size:15px;letter-spacing:.28em;font-weight:600;
  background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.nav__mark-letters i{font-style:normal;opacity:.6}

.nav__links{margin-left:auto;display:flex;gap:clamp(16px,2vw,34px)}
.nav__links a{
  font-family:var(--f-label);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  text-decoration:none;color:var(--ivory-dim);position:relative;padding-block:4px;
  transition:color .3s;
}
.nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
  background:var(--gold-500);transform:scaleX(0);transform-origin:right;
  transition:transform .38s var(--ease);
}
.nav__links a:hover{color:var(--gold-100)}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav__links a.is-active{color:var(--gold-200)}
.nav__links a.is-active::after{transform:scaleX(1)}

.nav__toggle{
  display:none;margin-left:auto;background:none;border:1px solid var(--navy-line);
  width:44px;height:40px;border-radius:2px;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:6px;
}
.nav__toggle span{display:block;width:18px;height:1px;background:var(--gold-300);transition:transform .3s var(--ease),opacity .3s}
.nav__toggle[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

.mobile-menu{
  position:fixed;inset:0;z-index:99;
  background:rgba(4,10,27,.97);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:grid;place-items:center;
}
.mobile-menu[hidden]{display:none}
.mobile-menu nav{display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
.mobile-menu a{
  font-family:var(--f-label);font-size:16px;letter-spacing:.22em;text-transform:uppercase;
  text-decoration:none;color:var(--ivory-dim);
  opacity:0;transform:translateY(12px);
  animation:menuIn .5s var(--ease) forwards;
}
.mobile-menu a:nth-child(1){animation-delay:.04s}
.mobile-menu a:nth-child(2){animation-delay:.08s}
.mobile-menu a:nth-child(3){animation-delay:.12s}
.mobile-menu a:nth-child(4){animation-delay:.16s}
.mobile-menu a:nth-child(5){animation-delay:.2s}
.mobile-menu a:nth-child(6){animation-delay:.24s}
.mobile-menu a:nth-child(7){animation-delay:.28s}
@keyframes menuIn{to{opacity:1;transform:none}}
.mobile-menu__cta{
  margin-top:10px;border:1px solid var(--gold-500);padding:14px 34px;color:var(--gold-100)!important;
}

@media (max-width:860px){
  .nav__links,.nav__cta{display:none}
  .nav__toggle{display:flex}
}

/* ---------- hero ---------- */
.hero{
  min-height:100svh;display:grid;place-items:center;position:relative;
  /* symmetric padding so the block sits dead centre of the viewport;
     the nav is cleared by the top value, the scroll cue is absolute */
  padding:clamp(104px,14vh,148px) var(--gut);
  text-align:center;
  isolation:isolate;          /* keeps the video's z-index inside the hero */
  overflow:hidden;
}

/* ---------- hero background video ---------- */
.hero__media{position:absolute;inset:0;z-index:-1;overflow:hidden;background:var(--navy-900)}
.hero__video{
  width:100%;height:100%;display:block;
  object-fit:cover;
  /* The clip is a tall 964x2048 with its balloons and ribbons along the top
     and bottom and an empty navy middle. Anchoring to the top means a wide
     screen shows the decorated band rather than the blank centre; a phone is
     almost exactly the clip's aspect ratio, so it sees nearly the whole frame. */
  object-position:center top;
  filter:saturate(1.06);
  transform:scale(1.03);
}
/* Only wide screens upscale the 964px width enough to need softening. */
@media (min-width:900px){
  .hero__video{filter:blur(.9px) saturate(1.08)}
}

/* Phones: `cover` was shaving a sliver off each side. The clip's aspect ratio
   (0.471) is within ~2% of a typical phone (0.462), so `contain` shows the
   whole animation and leaves only a hairline band top and bottom, filled with
   the clip's own sampled edge colour so the join is invisible. */
@media (max-width:560px){
  .hero__media{background:var(--video-edge)}
  .hero__video{object-fit:contain;object-position:center;transform:none}
}
/* Darkest through the middle so the type stays legible, clearing towards the
   edges where the balloons and ribbons are — plus a fade top and bottom so the
   hero blends into the nav above and the countdown below. */
.hero__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(4,10,27,.88) 0%,rgba(4,10,27,.14) 18%,rgba(4,10,27,0) 32%),
    radial-gradient(ellipse 58% 46% at 50% 50%,rgba(6,15,38,.72) 0%,rgba(6,15,38,.42) 55%,rgba(6,15,38,.06) 100%),
    linear-gradient(0deg,var(--navy-900) 0%,rgba(6,15,38,.5) 11%,rgba(6,15,38,0) 26%);
}

/* No video for anyone who has asked for less motion — the poster stands in. */
@media (prefers-reduced-motion:reduce){
  .hero__video{display:none}
  .hero__media{
    background:var(--navy-900) url("../img/hero-poster.jpg") center top/cover no-repeat;
  }
}

/* The video brightens and darkens as it loops, so every line of hero type
   carries its own shadow rather than relying on the scrim alone. */
.hero__inner{
  max-width:900px;position:relative;
  text-shadow:0 1px 2px rgba(4,10,27,.7),0 2px 22px rgba(4,10,27,.6);
}
/* .foil glyphs are transparent — a text-shadow would paint a dark silhouette
   through them, so those get a drop-shadow on the box instead. */
.hero__inner .foil{text-shadow:none;filter:drop-shadow(0 1px 2px rgba(4,10,27,.8)) drop-shadow(0 2px 16px rgba(4,10,27,.6))}

.hero__name{margin:0;display:flex;flex-direction:column;align-items:center;gap:2px}
.hero__name .script{
  font-size:clamp(52px,11.5vw,132px);
  color:var(--gold-200);
  line-height:1;
  padding-bottom:.08em;
  text-shadow:0 0 42px rgba(201,162,74,.28),0 1px 3px rgba(4,10,27,.75),0 2px 26px rgba(4,10,27,.65);
}
.hero__surname{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(22px,4.4vw,46px);
  letter-spacing:.36em;text-transform:uppercase;text-indent:.36em;
  line-height:1.2;
}

.hero__occasion{
  font-family:var(--f-label);font-weight:400;
  font-size:clamp(13px,1.1vw + 9px,19px);
  letter-spacing:.34em;text-transform:uppercase;text-indent:.34em;
  color:var(--ivory-dim);margin:22px 0 0;
}

.hero__date{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:clamp(14px,2.4vw,26px);margin:0;
}
.hero__date span{
  font-family:var(--f-label);font-size:clamp(11px,.5vw + 9px,14px);
  letter-spacing:.3em;text-transform:uppercase;color:var(--gold-300);
}
.hero__date b{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(24px,3.4vw,40px);letter-spacing:.04em;color:var(--ivory);
  position:relative;padding-inline:clamp(14px,2.4vw,26px);
}
.hero__date b::before,.hero__date b::after{
  content:"";position:absolute;top:50%;width:1px;height:34px;transform:translateY(-50%);
  background:linear-gradient(180deg,transparent,var(--gold-500),transparent);
}
.hero__date b::before{left:0}
.hero__date b::after{right:0}

.hero__place{
  font-family:var(--f-label);font-size:clamp(10px,.42vw + 9px,12px);
  letter-spacing:.3em;text-transform:uppercase;color:var(--ivory-faint);margin:14px 0 0;
}

.hero__actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:clamp(32px,5vh,48px)}

.scroll-cue{
  position:absolute;bottom:clamp(26px,5vh,44px);left:50%;translate:-50% 0;
  width:1px;height:56px;background:linear-gradient(180deg,transparent,rgba(201,162,74,.5));
  display:block;
}
.scroll-cue span{
  position:absolute;top:0;left:50%;translate:-50% 0;
  width:5px;height:5px;background:var(--gold-300);transform:rotate(45deg);
  animation:cue 2.4s var(--ease) infinite;
}
@keyframes cue{0%{top:0;opacity:0}20%{opacity:1}80%{opacity:1}100%{top:52px;opacity:0}}

@media (max-width:520px){
  .hero__date b::before,.hero__date b::after{display:none}
  .hero__date{gap:8px;flex-direction:column}
}

/* =========================================================
   SAVE THE DATE - the page's one light section
   ========================================================= */
.datepanel{
  position:relative;overflow:hidden;
  padding-block:clamp(60px,8vw,104px);
  background:
    radial-gradient(120% 90% at 50% -20%,#FFFBF0 0%,transparent 55%),
    linear-gradient(168deg,var(--cham-bg) 0%,var(--cham-bg-2) 100%);
  color:var(--cham-ink);
  border-block:1px solid rgba(122,92,34,.34);
}
/* soft shading top and bottom so the panel meets the dark sections
   without a hard seam */
.datepanel::before,.datepanel::after{
  content:"";position:absolute;left:0;right:0;height:70px;pointer-events:none;
}
.datepanel::before{top:0;background:linear-gradient(180deg,rgba(6,15,38,.16),transparent)}
.datepanel::after{bottom:0;background:linear-gradient(0deg,rgba(6,15,38,.16),transparent)}

/* drifting gold flecks - the celebration touch, cheap and CSS-only */
.datepanel__sparkles{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    radial-gradient(2px 2px at 8% 22%,rgba(184,142,52,.85),transparent 60%),
    radial-gradient(1.6px 1.6px at 24% 72%,rgba(201,162,74,.7),transparent 60%),
    radial-gradient(2.2px 2.2px at 47% 14%,rgba(184,142,52,.6),transparent 60%),
    radial-gradient(1.4px 1.4px at 68% 60%,rgba(201,162,74,.8),transparent 60%),
    radial-gradient(2px 2px at 84% 28%,rgba(184,142,52,.7),transparent 60%),
    radial-gradient(1.6px 1.6px at 92% 78%,rgba(201,162,74,.6),transparent 60%),
    radial-gradient(1.8px 1.8px at 15% 90%,rgba(184,142,52,.55),transparent 60%);
  animation:drift 14s ease-in-out infinite alternate;
}
@keyframes drift{
  from{transform:translate3d(0,0,0) scale(1);opacity:.34}
  to{transform:translate3d(0,-14px,0) scale(1.04);opacity:.62}
}

.datepanel__head{position:relative;margin-bottom:clamp(28px,4vw,44px)}

.script-eyebrow{
  font-family:var(--f-script);
  font-size:clamp(34px,5vw,54px);
  line-height:1;color:var(--cham-gold);margin:0 0 .18em;
}
.datepanel__title{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(25px,3.6vw,44px);line-height:1.14;
  margin:0 0 .6em;color:var(--cham-ink);letter-spacing:.01em;
}
.rule--dark i{background:linear-gradient(90deg,transparent,var(--cham-gold))}
.rule--dark i:last-of-type{background:linear-gradient(90deg,var(--cham-gold),transparent)}
.rule--dark span{background:var(--cham-gold);box-shadow:0 0 10px rgba(122,92,34,.35)}

.datepanel__grid{
  position:relative;
  display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);
  gap:clamp(26px,4vw,56px);align-items:center;
}
@media (max-width:820px){
  .datepanel__grid{grid-template-columns:1fr;justify-items:center}
  .datepanel__side{width:100%;max-width:460px;text-align:center}
}

/* ---------- the calendar leaf ---------- */
.calendar{
  margin:0;width:100%;max-width:360px;
  background:var(--cham-card);
  border:1px solid rgba(122,92,34,.3);
  border-radius:4px;
  padding:clamp(18px,2.4vw,26px) clamp(16px,2.2vw,24px) clamp(14px,2vw,20px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 18px 40px -26px rgba(10,24,54,.55),
    0 3px 10px -6px rgba(10,24,54,.28);
  position:relative;
}
/* gold bar across the top, like the binding of a desk calendar */
.calendar::before{
  content:"";position:absolute;left:22%;right:22%;top:-1px;height:3px;
  background:var(--foil);border-radius:0 0 3px 3px;
}
.calendar__month{text-align:center;margin-bottom:14px}
.calendar__month-es{
  display:block;font-family:var(--f-script);
  font-size:clamp(28px,3.4vw,38px);line-height:1;color:var(--cham-gold);
}
.calendar__month-en{
  display:block;font-family:var(--f-label);
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;text-indent:.28em;
  color:var(--cham-muted);margin-top:6px;
}
.calendar__dows,.calendar__days{
  display:grid;grid-template-columns:repeat(7,1fr);gap:2px;
}
.calendar__dows{
  margin-bottom:6px;padding-bottom:8px;
  border-bottom:1px solid var(--cham-line);
}
.calendar__dows span{
  text-align:center;font-family:var(--f-label);
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--cham-gold);
}
.calendar__days b{
  font-weight:400;font-family:var(--f-display);
  font-size:clamp(13px,1.5vw,15px);
  color:var(--cham-ink);
  aspect-ratio:1;display:grid;place-items:center;
  font-variant-numeric:tabular-nums;border-radius:50%;
}
.calendar__days b:empty{visibility:hidden}
.calendar__days b.is-past{color:var(--cham-muted);opacity:.45}

/* the day itself */
.calendar__days b.is-day{
  position:relative;color:#FFFDF7;font-weight:500;
  background:radial-gradient(circle at 34% 28%,#16305F 0%,#0A1836 62%,#060F26 100%);
  box-shadow:0 0 0 2px var(--cham-card),0 0 0 3px var(--cham-gold),
             0 6px 16px -6px rgba(10,24,54,.6);
}
.calendar__days b.is-day::after{
  content:"";position:absolute;inset:-9px;border-radius:50%;
  border:1px solid rgba(122,92,34,.4);
  animation:pulseRing 2.8s var(--ease) infinite;
}
@keyframes pulseRing{
  0%{transform:scale(.86);opacity:0}
  40%{opacity:.85}
  100%{transform:scale(1.18);opacity:0}
}

.calendar__foot{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:14px;padding-top:12px;border-top:1px solid var(--cham-line);
  font-family:var(--f-label);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--cham-gold);
}
.calendar__pin{width:14px;height:14px;flex:none}

/* ---------- countdown beside it ---------- */
.datepanel__kicker{
  font-family:var(--f-label);font-size:11px;letter-spacing:.28em;
  text-transform:uppercase;text-indent:.28em;color:var(--cham-muted);
  margin:0 0 18px;
}
.cd-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1.4vw,14px)}
.cd{
  position:relative;text-align:center;
  padding:clamp(14px,1.8vw,20px) 4px clamp(10px,1.4vw,14px);
  background:linear-gradient(170deg,rgba(255,253,247,.96),rgba(247,241,228,.7));
  border:1px solid rgba(122,92,34,.26);border-radius:3px;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 10px 24px -20px rgba(10,24,54,.6);
}
.cd__num{
  display:block;font-family:var(--f-display);font-weight:500;
  font-size:clamp(26px,4.4vw,46px);line-height:1;
  font-variant-numeric:tabular-nums;color:var(--cham-ink);
}
.cd__label{
  display:block;margin-top:8px;
  font-family:var(--f-label);font-size:clamp(8.5px,.34vw + 7.5px,10px);
  letter-spacing:.2em;text-transform:uppercase;text-indent:.2em;
  color:var(--cham-gold);
}
.countdown__done{
  font-family:var(--f-display);font-size:clamp(22px,3vw,32px);
  color:var(--cham-ink);margin:0;
}
.datepanel__actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(20px,2.6vw,28px)}
@media (max-width:820px){.datepanel__actions{justify-content:center}}

/* buttons tuned for the light surface */
.btn--ink{
  background:linear-gradient(165deg,#16305F,#0A1836);color:var(--gold-200);
  box-shadow:0 10px 26px -14px rgba(10,24,54,.9);
}
.btn--ink:hover{transform:translateY(-2px);color:var(--gold-100);
  box-shadow:0 16px 34px -14px rgba(10,24,54,1)}
.btn--outline-ink{border-color:rgba(122,92,34,.5);color:var(--cham-gold);background:rgba(255,253,247,.5)}
.btn--outline-ink:hover{border-color:var(--cham-gold);background:#FFFDF7;transform:translateY(-2px)}

/* ---------- story ---------- */
.story .signature{
  font-size:clamp(40px,6vw,64px);color:var(--gold-200);margin:.4em 0 0;
  text-shadow:0 0 30px rgba(201,162,74,.22);
}

/* ---------- details cards ---------- */
.card-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(18px,2.4vw,30px);margin-top:clamp(20px,3vw,36px);
}
.card{
  position:relative;padding:clamp(30px,3.6vw,46px) clamp(22px,3vw,38px);
  text-align:center;
  background:linear-gradient(165deg,rgba(22,48,95,.42),rgba(8,20,46,.62));
  border:1px solid var(--navy-line);
  transition:transform .45s var(--ease),border-color .45s,box-shadow .45s;
  overflow:hidden;
}
.card::before{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .45s;
  background:radial-gradient(120% 90% at 50% 0%,rgba(201,162,74,.14),transparent 62%);
}
.card::after{
  content:"";position:absolute;inset:9px;border:1px solid rgba(201,162,74,.1);pointer-events:none;
}
.card:hover{transform:translateY(-5px);border-color:rgba(201,162,74,.46);
  box-shadow:0 26px 60px -34px rgba(0,0,0,.9)}
.card:hover::before{opacity:1}

.card__icon{width:64px;margin:0 auto 18px;position:relative}
.card__icon svg{display:block;width:100%;height:auto;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.55))}
.card__icon::before{
  content:"";position:absolute;inset:-26% -18%;z-index:-1;
  background:radial-gradient(circle,rgba(201,162,74,.2),transparent 68%);
}
.card__kicker{
  font-family:var(--f-label);font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold-300);margin:0 0 .5em;text-indent:.26em;position:relative;
}
.card__title{
  font-family:var(--f-display);font-weight:400;font-size:clamp(26px,2.8vw,34px);
  margin:0 0 .4em;color:var(--ivory);position:relative;
}
.card__time{
  font-family:var(--f-display);font-size:clamp(17px,1.4vw,20px);color:var(--gold-200);
  margin:0 0 1em;position:relative;
}
.card__venue{margin:0 0 .2em;font-size:1.05em;position:relative}
.card__addr{font-style:normal;color:var(--ivory-faint);margin:0 0 1.6em;font-size:.95em;position:relative}
.card .link-gold{position:relative}

/* ---------- timeline ---------- */
.timeline{list-style:none;margin:clamp(16px,3vw,32px) auto 0;position:relative}
.timeline::before{
  content:"";position:absolute;left:calc(var(--gut) + 92px);top:8px;bottom:8px;width:1px;
  background:linear-gradient(180deg,transparent,var(--navy-line) 8%,var(--navy-line) 92%,transparent);
}
.timeline li{
  display:grid;grid-template-columns:92px 1fr;gap:clamp(20px,3vw,34px);
  padding-block:clamp(14px,2vw,20px);position:relative;
}
.timeline li::before{
  content:"";position:absolute;left:88px;top:calc(clamp(14px,2vw,20px) + 9px);
  width:9px;height:9px;background:var(--navy-900);border:1px solid var(--gold-500);
  transform:rotate(45deg);z-index:1;transition:background-color .4s,box-shadow .4s;
}
.timeline li:hover::before{background:var(--gold-500);box-shadow:0 0 14px rgba(201,162,74,.7)}
.timeline__time{
  font-family:var(--f-label);font-size:clamp(11px,.44vw + 9px,13px);
  letter-spacing:.12em;color:var(--gold-300);text-align:right;padding-top:3px;
  font-variant-numeric:tabular-nums;
}
.timeline__body h3{
  font-family:var(--f-display);font-weight:400;font-size:clamp(19px,1.9vw,24px);
  margin:0 0 .2em;color:var(--ivory);
}
.timeline__body p{margin:0;color:var(--ivory-faint);font-size:.98em}

@media (max-width:600px){
  .timeline::before{left:calc(var(--gut) + 6px)}
  .timeline li{grid-template-columns:1fr;gap:2px;padding-left:30px}
  .timeline li::before{left:2px;top:calc(clamp(14px,2vw,20px) + 6px)}
  .timeline__time{text-align:left}
}

/* ---------- attire ---------- */
.swatches{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(16px,3vw,34px);margin:clamp(26px,4vw,42px) 0 0}
.swatch{display:flex;flex-direction:column;align-items:center;gap:10px}
.swatch i{
  display:block;width:clamp(42px,5.4vw,58px);height:clamp(42px,5.4vw,58px);
  background:var(--c);border:1px solid rgba(201,162,74,.34);
  transform:rotate(45deg);border-radius:3px;
  box-shadow:inset 0 0 20px rgba(0,0,0,.35);
  transition:transform .5s var(--ease);
}
.swatch:hover i{transform:rotate(45deg) scale(1.1)}
.swatch span{
  font-family:var(--f-label);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ivory-faint);margin-top:6px;
}

/* ---------- court ---------- */
.court__grid{
  list-style:none;margin:clamp(18px,3vw,34px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1px;background:var(--navy-line);border:1px solid var(--navy-line);
}
.court__grid li{
  background:linear-gradient(160deg,rgba(16,34,71,.42),rgba(6,15,38,.7));
  padding:clamp(22px,2.6vw,30px) 18px;text-align:center;
  display:flex;flex-direction:column;gap:6px;
  transition:background-color .4s;
}
.court__grid li:hover{background:rgba(22,48,95,.62)}
.court__role{
  font-family:var(--f-label);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-300);text-indent:.24em;
}
.court__name{font-family:var(--f-display);font-size:clamp(17px,1.6vw,20px);color:var(--ivory-dim)}
.court__name.tbd{border-bottom:none;font-style:italic;opacity:.6;cursor:default}

/* ---------- gifts panel ---------- */
.panel{
  border:1px solid var(--navy-line);
  padding:clamp(36px,5vw,60px) clamp(24px,4vw,54px);
  background:linear-gradient(165deg,rgba(22,48,95,.3),rgba(8,20,46,.5));
  position:relative;
}
.panel__ornament{display:block;width:120px;margin:0 auto 22px}
.panel .lede{margin-bottom:0}

/* ---------- form ---------- */
.form{margin-top:clamp(22px,3vw,36px);display:flex;flex-direction:column;gap:22px}
.field{display:flex;flex-direction:column;gap:9px;border:0;padding:0;margin:0;min-width:0}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media (max-width:600px){.field-row{grid-template-columns:1fr}}

.field label,.field legend{
  font-family:var(--f-label);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-300);padding:0;
}
.field em{font-style:normal;color:var(--gold-500)}

.field input,.field select,.field textarea{
  width:100%;font-family:var(--f-body);font-size:17px;font-weight:300;color:var(--ivory);
  background:rgba(4,10,27,.6);
  border:1px solid var(--navy-line);border-radius:2px;
  padding:14px 16px;
  transition:border-color .3s,background-color .3s,box-shadow .3s;
}
.field textarea{resize:vertical;line-height:1.6;min-height:60px}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23C9A24A' stroke-width='1.4'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;padding-right:42px}
.field select option{background:var(--navy-800);color:var(--ivory)}
.field input::placeholder,.field textarea::placeholder{color:rgba(246,241,230,.3)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--gold-500);background:rgba(4,10,27,.85);
  box-shadow:0 0 0 3px rgba(201,162,74,.12);
}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:#C4643F}
.field__error{
  font-family:var(--f-label);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#E08A63;margin:0;min-height:0;
}
.field__error:empty{display:none}

.choices{display:flex;gap:12px;flex-wrap:wrap}
.choice{position:relative;flex:1;min-width:180px;cursor:pointer}
.choice input{position:absolute;opacity:0;width:0;height:0}
.choice span{
  display:block;text-align:center;padding:15px 18px;
  border:1px solid var(--navy-line);border-radius:2px;
  background:rgba(4,10,27,.5);
  font-family:var(--f-label);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ivory-dim);transition:all .3s var(--ease);
}
.choice:hover span{border-color:rgba(201,162,74,.5);color:var(--gold-100)}
.choice input:checked+span{
  border-color:var(--gold-500);color:var(--gold-100);
  background:rgba(201,162,74,.12);
  box-shadow:inset 0 0 22px rgba(201,162,74,.12);
}
.choice input:focus-visible+span{outline:2px solid var(--gold-300);outline-offset:2px}

.conditional{display:flex;flex-direction:column;gap:22px;
  animation:fadeUp .45s var(--ease)}
.conditional[hidden]{display:none}
@keyframes fadeUp{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form__status{
  font-family:var(--f-label);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  text-align:center;margin:0;min-height:1em;color:var(--gold-300);
}
.form__status.is-error{color:#E08A63;text-transform:none;letter-spacing:.04em;font-size:13px;line-height:1.6}

#rsvpSubmit.is-busy{opacity:.65;pointer-events:none}

.form-success{
  text-align:center;border:1px solid var(--navy-line);
  padding:clamp(42px,6vw,68px) clamp(24px,4vw,48px);
  background:linear-gradient(165deg,rgba(22,48,95,.34),rgba(8,20,46,.56));
  margin-top:clamp(22px,3vw,36px);
  animation:fadeUp .6s var(--ease);
}
.form-success[hidden]{display:none}
.form-success__mark{width:64px;margin:0 auto 18px;display:block;
  filter:drop-shadow(0 0 18px rgba(201,162,74,.4))}
.form-success p{color:var(--ivory-dim);max-width:42ch;margin:0 auto 26px}

/* ---------- footer ---------- */
.footer{
  text-align:center;padding:clamp(56px,8vw,90px) var(--gut) clamp(40px,6vw,60px);
  border-top:1px solid var(--navy-line);
  background:linear-gradient(180deg,rgba(6,15,38,0),rgba(4,10,27,.85));
}
.footer__ornament{display:block;width:120px;margin:0 auto 20px;opacity:.8}
.footer__script{font-size:clamp(36px,5vw,54px);color:var(--gold-200);margin:0 0 .2em}
.footer__meta{
  font-family:var(--f-label);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ivory-faint);margin:0 0 1.4em;
}
.footer__meta a{color:var(--gold-300);text-decoration:none;transition:color .3s}
.footer__meta a:hover{color:var(--gold-100)}
.footer__fine{font-style:italic;color:var(--ivory-faint);margin:0;font-size:1.02em}

/* ---------- celebration confetti (RSVP success) ---------- */
.confetti{
  position:fixed;inset:0;pointer-events:none;z-index:150;overflow:hidden;
}
.confetti i{
  position:absolute;top:-24px;display:block;
  width:var(--w);height:var(--h);background:var(--c);
  opacity:0;border-radius:1px;
  animation:confettiFall var(--dur) cubic-bezier(.25,.6,.4,1) var(--delay) forwards;
}
@keyframes confettiFall{
  0%{opacity:0;transform:translate3d(0,0,0) rotate(0deg)}
  8%{opacity:1}
  100%{opacity:0;transform:translate3d(var(--dx),102vh,0) rotate(var(--rot))}
}

/* ---------- reveal animations ---------- */
.reveal{opacity:0;transform:translateY(16px);
  animation:revealIn .9s var(--ease) forwards;animation-delay:var(--d,0s)}
@keyframes revealIn{to{opacity:1;transform:none}}

.js-reveal{opacity:0;transform:translateY(22px);
  transition:opacity .8s var(--ease) var(--d,0s),transform .8s var(--ease) var(--d,0s)}
.js-reveal.is-visible{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .reveal,.js-reveal{opacity:1;transform:none}
  .datepanel__sparkles{animation:none;opacity:.4}
  .calendar__days b.is-day::after{animation:none;opacity:.6}
  .confetti{display:none}
}

/* ---------- print (a guest printing the invitation) ---------- */
@media print{
  .backdrop,.nav,.mobile-menu,.scroll-cue,.rsvp,.footer__ornament,.hero__media,
  .datepanel__sparkles,.confetti{display:none!important}
  body{background:#fff;color:#111}
  .foil{background:none;-webkit-text-fill-color:#8C6B2A;color:#8C6B2A}
  .hero{min-height:auto;page-break-after:always}
  .card,.panel,.court__grid li{background:none;border-color:#c9a24a}
  .js-reveal,.reveal{opacity:1!important;transform:none!important}
}