/* ============================================================
   f1da «Seni Sevaman» — 00-base: palette, reset, page shell
   Light blush photograph world; the keyboard is the motif.
   ============================================================ */

:root{
  --blush:#F6D7DC; --petal:#FBEAEC; --paper:#FDF4F5;
  --rose:#E0447E; --crimson:#C21E56;
  --ink:#5A2436; --ink-soft:#6B3548;
  --gold:#D9A94E; --glow:#FF6B9E;
  --tint-rose:#F9E3E7; --tint-cream:#FBEDEA;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* the invitation reads like a card — no scrollbar, scrolling itself stays */
html{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar{width:0;height:0;display:none}

body{
  background:var(--blush);
  color:var(--ink);
  font-family:"Manrope",system-ui,sans-serif;
  font-size:1rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  /* long unbroken values must wrap, never overflow the fixed column */
  overflow-wrap:break-word;
}
body.lock{overflow:hidden;height:100dvh}

/* fine grain, like the photographs */
body::after{
  content:"";position:fixed;inset:0;z-index:999;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- page column ---- */
.page{
  max-width:480px;margin:0 auto;min-height:100dvh;
  background:var(--paper);
  box-shadow:0 0 60px rgba(90,36,54,.25);
  overflow:hidden;
}

/* ---- typography ---- */
h1,h2,h3{
  font-family:"Cormorant",serif;font-weight:600;line-height:1.15;
  color:var(--ink);text-wrap:balance;
}
h1{font-size:clamp(2.6rem,10vw,4rem)}
h2{font-size:clamp(1.7rem,6vw,2.2rem)}
h3{font-size:clamp(1.2rem,4.5vw,1.5rem)}
p{font-size:clamp(.95rem,3.6vw,1.05rem)}

.sec{padding:4.5rem 1.5rem;position:relative}
/* flex/grid sections would cancel [hidden] — the repo's recurring gotcha */
.sec[hidden]{display:none!important}

.kicker{
  display:block;font-family:"Manrope",sans-serif;
  font-size:.72rem;font-weight:600;letter-spacing:.35em;text-transform:uppercase;
  color:var(--crimson);text-align:center;text-indent:.35em;
  margin-bottom:1.75rem;
}

.script{font-family:"Marck Script",cursive;font-weight:400;font-style:normal;line-height:1.2}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:.9em 2.2em;
  background:linear-gradient(92deg,var(--crimson),var(--rose));
  color:#fff;
  font-family:"Manrope",sans-serif;font-size:.92rem;font-weight:600;letter-spacing:.06em;
  border-radius:14px;text-decoration:none;
  transition:transform .3s ease,box-shadow .3s ease,filter .3s ease;
  box-shadow:0 8px 22px -8px rgba(194,30,86,.55);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px -8px rgba(194,30,86,.6)}
.btn:active{transform:translateY(0)}

.art{display:block;width:100%;height:auto}

/* ---- reveal ---- */
.reveal{
  opacity:0;transform:translateY(24px);
  transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1),filter .8s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--d,0s);
}
.reveal.is-visible{opacity:1;transform:none;filter:none}
.reveal--scale{transform:translateY(18px) scale(.955)}
.reveal--blur{filter:blur(9px)}

/* ---- tinted chapters with painted-wave edges ---- */
:root{
  --wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 32' preserveAspectRatio='none'%3E%3Cpath d='M0 32 L0 20 C60 6 120 26 200 14 C280 2 360 24 480 10 L480 32 Z'/%3E%3C/svg%3E");
}
.sec-tint{background:var(--secbg,var(--tint-rose))}
.sec-tint::before,
.sec-tint::after{
  content:"";position:absolute;left:0;right:0;height:32px;
  background:var(--secbg,var(--tint-rose));
  -webkit-mask:var(--wave) center / 100% 100% no-repeat;
  mask:var(--wave) center / 100% 100% no-repeat;
  pointer-events:none;
}
.sec-tint::before{top:-31px}
.sec-tint::after{bottom:-31px;transform:scaleY(-1)}
#rsvp{--secbg:var(--tint-cream)}

/* ---- focus / reduced motion ---- */
:focus-visible{outline:3px solid var(--rose);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;transition-delay:0s !important;
  }
  .reveal{opacity:1;transform:none}
}

/* ---- desktop backdrop: drifting hearts around the card ---- */
.backdrop{display:none}
@media (min-width:640px){
  .backdrop{
    display:block;position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
    background:
      radial-gradient(55% 60% at 50% 40%, rgba(255,255,255,.5), transparent 70%),
      radial-gradient(120% 90% at 50% 110%, rgba(224,68,126,.16), transparent 60%);
  }
  .bd-heart{
    position:absolute;left:var(--x);top:var(--y);
    width:calc(14px * var(--s,1));height:calc(14px * var(--s,1));
    background:var(--rose);opacity:.16;
    transform:rotate(45deg) scale(var(--s,1));
    animation:bd-drift var(--t,12s) ease-in-out var(--fd,0s) infinite;
  }
  .bd-heart::before,.bd-heart::after{
    content:"";position:absolute;width:100%;height:100%;border-radius:50%;background:inherit;
  }
  .bd-heart::before{top:-50%;left:0}
  .bd-heart::after{top:0;left:-50%}
  .page{position:relative;z-index:1}
}
@keyframes bd-drift{
  0%,100%{translate:0 0;opacity:.1}
  50%{translate:0 -26px;opacity:.3}
}
@media (prefers-reduced-motion:reduce){.bd-heart{animation:none;opacity:.15}}

/* ---- language switcher ---- */
.lang{
  position:fixed;top:.9rem;
  /* hug the phone column's right edge on desktop, the window edge on mobile */
  right:max(.9rem, calc((100% - 480px) / 2 + .9rem));
  z-index:1001; /* above splash and grain */
  display:flex;gap:2px;padding:3px;border-radius:999px;
  background:rgba(253,244,245,.8);backdrop-filter:blur(8px);
  border:1px solid rgba(194,30,86,.18);
  box-shadow:0 4px 14px rgba(90,36,54,.12);
}
.lang[hidden]{display:none}
.lang-btn{
  padding:.36em .78em;border-radius:999px;
  font-size:.72rem;font-weight:700;letter-spacing:.06em;color:var(--ink-soft);
  transition:background .3s,color .3s;
}
.lang-btn:hover{color:var(--ink)}
.lang-btn.is-active{background:linear-gradient(92deg,var(--crimson),var(--rose));color:#fff}

/* ---- demo-only back link ---- */
.demo-back{
  display:none;position:fixed;top:.9rem;
  left:max(.9rem, calc((100% - 480px) / 2 + .9rem));
  z-index:1002;
  padding:.45em 1em;border-radius:999px;font-size:.8rem;font-weight:600;
  background:rgba(253,244,245,.8);backdrop-filter:blur(8px);
  border:1px solid rgba(194,30,86,.18);color:var(--ink);text-decoration:none;
  box-shadow:0 4px 14px rgba(90,36,54,.12);
}
html.is-demo .demo-back{display:inline-flex}

/* ============================================================
   01-splash — the keyboard moment
   ============================================================ */
.splash{
  position:fixed;inset:0;
  /* desktop: the same phone-width column as .page, centered over the blush body */
  width:min(100%,480px);margin-inline:auto;
  box-shadow:0 0 60px rgba(90,36,54,.3);
  z-index:998; /* below grain (999) so the splash carries the same texture */
  touch-action:none;overscroll-behavior:contain;
  display:grid;place-items:center;overflow:hidden;text-align:center;
  /* blush gradient echo — paints instantly while splash.webp streams in */
  background:
    radial-gradient(120% 55% at 50% 42%, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, var(--petal) 0%, var(--blush) 55%, #F3CBD4 100%);
  transition:opacity .9s ease,transform 1.1s cubic-bezier(.22,1,.36,1),visibility 0s linear .9s;
}
.splash--closing{opacity:0;transform:scale(1.08);visibility:hidden;pointer-events:none}
.splash:focus,.splash:focus-visible{outline:none}

/* the desk photograph, slow cinematic drift */
.splash-art{position:absolute;inset:0;overflow:hidden}
.splash-art img{
  width:100%;height:100%;object-fit:cover;
  animation:splash-drift 20s ease-in-out infinite alternate;
}
@keyframes splash-drift{from{transform:scale(1)}to{transform:scale(1.09) translateY(-1.5%)}}

.splash-inner{position:relative;padding:2rem 1.5rem;max-width:30rem;display:flex;flex-direction:column;align-items:center}

.splash-monogram{
  font-family:"Cormorant",serif;font-weight:500;
  font-size:clamp(1.4rem,5vw,1.8rem);letter-spacing:.3em;margin-left:.3em;
  color:var(--ink);
  animation:splash-up 1s cubic-bezier(.22,1,.36,1) both;
}
.splash-heart{
  display:inline-block;color:var(--rose);font-size:.8em;vertical-align:.08em;
  animation:cal-beat 2.2s ease-in-out 1.8s infinite;
}
.splash-kicker{
  margin:1.2rem 0 0;color:var(--crimson);
  animation:splash-up 1s cubic-bezier(.22,1,.36,1) .18s both;
}
.splash .kb{
  margin-top:1.5rem;
  animation:splash-up 1.1s cubic-bezier(.22,1,.36,1) .32s both;
}
/* the pinned note ("ticket") carries the names and the date */
.splash-note{
  margin-top:1.9rem;width:min(78vw,330px);
  background:linear-gradient(175deg,#FDF1F3,#F9DEE4);
  border-radius:6px;rotate:-1.5deg;position:relative;
  box-shadow:0 14px 30px -12px rgba(90,36,54,.35), inset 0 1px 0 rgba(255,255,255,.8);
  padding:1.5rem 1.2rem 1.55rem;
  animation:splash-up 1.1s cubic-bezier(.22,1,.36,1) .46s both;
}
.splash-note::before{ /* the heart pin */
  content:"♥";position:absolute;top:-.85em;left:50%;translate:-50% 0;
  font-size:1.3rem;color:var(--crimson);
  text-shadow:0 2px 6px rgba(194,30,86,.4);
}
.splash-names{
  font-size:clamp(2rem,8.4vw,2.7rem);line-height:1.15;font-weight:400;
  color:var(--crimson);
}
.splash-i{font-size:.6em;color:var(--ink-soft);margin:0 .08em}
.splash-date{
  margin-top:.7rem;
  font-family:"Cormorant",serif;font-size:1rem;font-weight:700;
  letter-spacing:.24em;text-indent:.24em;text-transform:uppercase;
  color:#A97B22; /* deep antique gold — the token gold washes out on blush */
}
.splash-btn{
  margin-top:2rem;
  animation:
    splash-up 1.1s cubic-bezier(.22,1,.36,1) .72s both,
    splash-glow 2.8s ease-in-out 2.2s infinite;
}
@keyframes splash-glow{
  0%,100%{box-shadow:0 8px 22px -8px rgba(194,30,86,.55)}
  50%{box-shadow:0 8px 32px -6px rgba(224,68,126,.85)}
}
@keyframes splash-up{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* ============================================================
   02-keyboard — one fixed-ratio component, initials glow
   ============================================================ */
.kb{
  width:min(88vw,380px);
  padding:4.4% 3.8%;
  border-radius:20px;
  background:linear-gradient(172deg,#FCE9EC 4%,#F5D2DA 60%,#EFC2CD 100%);
  box-shadow:
    0 24px 42px -18px rgba(90,36,54,.5),    /* contact shadow — sits IN the photo */
    0 2px 0 rgba(255,255,255,.85) inset,
    0 -4px 10px rgba(194,30,86,.14) inset,
    0 0 0 1px rgba(255,255,255,.5) inset;   /* rim highlight = plastic lip */
  perspective:700px;
  display:flex;flex-direction:column;gap:3%;
  transform:rotateX(9deg);
  transform-origin:50% 100%;
}
.kb-row{display:flex;gap:2.4%;justify-content:center}
/* stagger like a real board */
.kb-row:nth-child(2){padding:0 4.5%}
.kb-row:nth-child(3){padding:0 2%}
.kb-key{
  position:relative;flex:1;aspect-ratio:1/1.02;max-width:36px;
  display:flex;align-items:center;justify-content:center;
  border-radius:22%;
  background:linear-gradient(172deg,#FFFBFB 6%,var(--petal) 60%,#F3CDD6 100%);
  /* extruded keycap: side wall + drop + crisp top light */
  box-shadow:
    0 3px 0 #EBBFCA,
    0 4px 0 #E2AFBD,
    0 6px 7px rgba(90,36,54,.22),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -2px 3px rgba(194,30,86,.07);
  font-family:"Manrope",sans-serif;font-size:clamp(.62rem,2.9vw,.82rem);font-weight:700;
  color:var(--ink-soft);
  text-shadow:0 1px 0 rgba(255,255,255,.9); /* engraved legend */
  transition:transform .18s ease,box-shadow .18s ease;
}
/* the couple's keys: larger, front and center */
.kb-key--main{flex:1.3;max-width:44px;font-size:clamp(.78rem,3.6vw,1rem)}
.kb-key--heart{
  color:#fff;font-size:clamp(.72rem,3.3vw,.92rem);
  background:linear-gradient(172deg,#F9A8C4 6%,var(--rose) 70%);
  box-shadow:0 3px 0 #B93A6C,0 4px 0 #A52D5D,0 6px 9px rgba(194,30,86,.35),inset 0 1px 0 rgba(255,255,255,.7);
}
.kb-key--tap{transform:translateY(3px);box-shadow:0 1px 0 #EBBFCA,0 1px 2px rgba(90,36,54,.16),inset 0 1px 0 rgba(255,255,255,1)}

/* glow: a pre-blurred halo layer faded in (opacity only — perf budget) */
.kb-key--g,.kb-key--b,.kb-key--pair{color:#fff;font-weight:700;z-index:1}
.kb-key--g{background:linear-gradient(178deg,var(--rose),var(--crimson))}
.kb-key--b{background:linear-gradient(178deg,var(--crimson),var(--rose))}
.kb-key--pair{background:linear-gradient(135deg,var(--rose) 30%,var(--crimson) 70%)}
.kb-key--g::before,.kb-key--b::before,.kb-key--pair::before{
  content:"";position:absolute;inset:-38%;border-radius:50%;z-index:-1;
  background:radial-gradient(closest-side,var(--glow),transparent 72%);
  opacity:0;animation:kb-glow 2.6s ease-in-out infinite;
}
.kb-key--b::before{animation-delay:1.3s} /* counter-phase with the groom key */
.kb-key--pair::before{animation-duration:1.8s}
@keyframes kb-glow{0%,100%{opacity:.45}50%{opacity:.95}}
/* the heart badge; the pair state wears two */
.kb-key--g::after,.kb-key--b::after{
  content:"♥";position:absolute;top:-.5em;right:-.28em;
  font-size:.72em;color:var(--crimson);
  text-shadow:0 0 6px rgba(255,255,255,.9);
}
.kb-key--pair::after{
  content:"♥♥";position:absolute;top:-.55em;right:-.4em;
  font-size:.68em;letter-spacing:-.12em;color:var(--crimson);
  text-shadow:0 0 6px rgba(255,255,255,.9);
}
@media (prefers-reduced-motion:reduce){
  .kb-key--g::before,.kb-key--b::before,.kb-key--pair::before{animation:none;opacity:.8}
}

/* ============================================================
   03-hero
   ============================================================ */
/* the photo is a bounded band, never full-bleed — names/date live BELOW it on
   the page's own paper fill, never on top of the art. Guarantees contrast on
   every device without fighting whatever the photo happens to show there
   (see the hero-date wrap-onto-the-candle bug this replaced). */
.hero{min-height:100svh;display:flex;flex-direction:column;padding:0;overflow:hidden;background:var(--paper)}
.hero-canvas{position:relative;flex:none;height:52svh;overflow:hidden}
.hero-art{width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.hero-scrim{
  position:absolute;inset:auto 0 0 0;height:26%;
  background:linear-gradient(180deg,rgba(253,244,245,0),var(--paper));
}
.hero-content{
  position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;
  text-align:center;padding:1rem 1.5rem 4.5rem;
}
.hero-content>h1,.hero-content>p{position:relative;z-index:1} /* above the glade */

/* ---- the glade: rose sprigs + drifting glow dots on the paper fill ---- */
.hero-glade{position:absolute;inset:0;pointer-events:none;overflow:hidden}
body.is-open .hero-glade{animation:hero-fade 1.6s ease .9s both}
.hero-flora{position:absolute;bottom:0;width:clamp(96px,30vw,150px);height:auto;opacity:.9}
.hero-flora--l{left:.4rem}
.hero-flora--r{right:.4rem;transform:scaleX(-1)}
.hero-fly{
  position:absolute;left:var(--x);top:var(--y);width:4px;height:4px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 6px 2px rgba(217,169,78,.75);opacity:0;
  animation:hero-firefly var(--t,8s) ease-in-out var(--fd,0s) infinite;
}
@keyframes hero-fade{from{opacity:0}to{opacity:1}}
@keyframes hero-firefly{
  0%,100%{transform:translate(0,0);opacity:0}
  12%{opacity:.95}
  45%{transform:translate(14px,-30px);opacity:.3}
  60%{transform:translate(4px,-44px);opacity:.9}
  88%{transform:translate(-8px,-20px);opacity:0}
}
@media (prefers-reduced-motion:reduce){.hero-fly{animation:none;opacity:.55}}

.hero-names{display:flex;flex-direction:column;align-items:center;gap:.05em;color:var(--ink)}
.hero-name{opacity:0;translate:0 22px;transition:opacity 1s cubic-bezier(.22,1,.36,1),translate 1s cubic-bezier(.22,1,.36,1)}
.hero-name:nth-child(3){transition-delay:.25s}
.hero-amp{
  font-size:.55em;color:var(--rose);
  opacity:0;scale:.6;transition:opacity .9s ease .45s,scale .9s cubic-bezier(.22,1,.36,1) .45s;
}
body.is-open .hero-name{opacity:1;translate:0 0}
body.is-open .hero-amp{opacity:1;scale:1}
.hero-date{
  margin-top:1.1rem;font-family:"Cormorant",serif;font-weight:600;
  font-size:clamp(.85rem,3.4vw,1rem);letter-spacing:.24em;text-transform:uppercase;color:var(--crimson);
  opacity:0;transition:opacity 1s ease .7s;
}
body.is-open .hero-date{opacity:1}

/* ============================================================
   04-invite / couple
   ============================================================ */
.invite-lead{max-width:34ch;margin:0 auto 2.6rem;text-align:center;font-size:clamp(1.05rem,4.2vw,1.2rem)}
.invite-accent{font-size:1.35em;color:var(--crimson)}
.couple-grid{
  display:grid;grid-template-columns:1fr auto 1fr;gap:.8rem;align-items:start;
  max-width:420px;margin:0 auto 2.8rem;
}
.couple-card{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.couple-frame{
  width:100%;aspect-ratio:3/4;border-radius:60px 60px 14px 14px;overflow:hidden;
  border:3px solid #fff;
  box-shadow:0 14px 26px -12px rgba(90,36,54,.3);
  margin-bottom:.9rem;background:var(--tint-rose);
}
.couple-photo{width:100%;height:100%;object-fit:cover}
.couple-name{margin-bottom:.15rem}
.couple-line{font-size:.78rem;color:var(--ink-soft)}
.couple-amp{align-self:center;margin-top:1.6rem;font-size:clamp(1.8rem,7vw,2.4rem);color:var(--rose)}
.couple-ig{
  margin-top:.5rem;display:inline-flex;align-items:flex-start;gap:.35em;max-width:100%;
  font-size:.78rem;font-weight:600;color:var(--crimson);text-decoration:none;
}
.couple-ig-handle{min-width:0;overflow-wrap:anywhere}
.couple-ig[hidden]{display:none}
.couple-ig::before{
  content:"";flex:none;width:14px;
  height:14px;height:1lh;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1'/%3E%3C/svg%3E") center/contain no-repeat;
}
.invite-quote{max-width:40ch;margin:0 auto;text-align:center;position:relative;padding-top:1.4rem}
.invite-quote-mark{
  position:absolute;top:-.2rem;left:50%;translate:-50% 0;
  font-family:"Cormorant",serif;font-size:2.6rem;color:var(--rose);opacity:.55;line-height:1;
}
.invite-quote-text{font-family:"Cormorant",serif;font-size:clamp(1.2rem,4.6vw,1.4rem);font-weight:500;font-style:italic}
.invite-quote-sub{margin-top:.7rem;font-size:.82rem;color:var(--ink-soft)}

/* ============================================================
   05-story / 06-calendar+countdown (keycap tiles)
   ============================================================ */
#story{text-align:center}
.story-art{
  max-width:340px;margin:0 auto 1.8rem;border-radius:18px;overflow:hidden;
  box-shadow:0 16px 30px -14px rgba(90,36,54,.3);rotate:1.2deg;
}
.story-title{margin-bottom:1rem}
.story-text{max-width:38ch;margin:0 auto;color:var(--ink-soft)}
.story-text[hidden]{display:none}

#calendar{text-align:center}
.cal-title{margin-bottom:1.4rem}
.cal-card{
  max-width:330px;margin:0 auto 2.2rem;padding:1.2rem 1.1rem 1.35rem;border-radius:20px;
  background:#fff;box-shadow:0 16px 32px -16px rgba(90,36,54,.28);
  border:1px solid rgba(194,30,86,.1);
}
.cal-week{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:.4rem}
.cal-week span{font-size:.62rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-day{
  position:relative;aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  font-size:.82rem;color:var(--ink);border-radius:9px;
}
.cal-day--wed{color:#fff;font-weight:700;background:linear-gradient(135deg,var(--rose),var(--crimson));box-shadow:0 6px 14px -6px rgba(194,30,86,.6)}
.cal-heart{
  position:absolute;top:-.55em;right:-.2em;font-size:.72em;color:var(--crimson);
  animation:cal-beat 1.6s ease-in-out infinite;
}
@keyframes cal-beat{0%,100%{scale:1}50%{scale:1.25}}
.cal-fallback{margin-top:.8rem;font-size:.9rem}

.cd-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem;max-width:360px;margin:0 auto}
/* countdown digits AS keycaps — the motif carried through */
.cd-tile{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:.3rem;
  padding:.85rem .2rem .7rem;border-radius:14px;
  background:linear-gradient(178deg,#FEF6F7 12%,var(--petal) 88%);
  box-shadow:0 3px 0 rgba(194,30,86,.13),0 5px 9px rgba(90,36,54,.15),inset 0 1px 0 rgba(255,255,255,.95);
}
.cd-num{
  font-family:"Cormorant",serif;font-size:clamp(1.5rem,7vw,2rem);font-weight:600;color:var(--crimson);
  font-variant-numeric:tabular-nums;line-height:1;
}
.cd-label{font-size:clamp(.5rem,2.2vw,.6rem);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.cd-grid[hidden]{display:none}
.cd-today{font-size:1.7rem;color:var(--crimson);margin-top:1rem}
.cd-today[hidden]{display:none}

/* ============================================================
   07-venue / 08-program
   ============================================================ */
#venue{text-align:center}
.venue-card{
  border-radius:20px;overflow:hidden;margin-bottom:1.6rem;
  box-shadow:0 18px 34px -16px rgba(90,36,54,.32);
}
.venue-name{margin-bottom:.3rem}
.venue-address{color:var(--ink-soft)}
.venue-time{margin:.5rem 0 1.1rem;font-family:"Cormorant",serif;font-weight:600;font-size:1.15rem}
.venue-hour{color:var(--crimson)}
.venue-btn-arrow{font-size:1.05em}
.venue-note{margin-top:1rem;font-size:.85rem;color:var(--ink-soft)}

.prog-list{
  list-style:none;max-width:320px;margin:0 auto 2.4rem;padding-left:0;
}
.prog-item{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:.15rem;
  padding:.4rem 0 0;text-align:center;
}
.prog-item[hidden]{display:none}
/* a short connector BETWEEN items (never through the text) — drawn only when a
   visible item follows, so the last shown item never dangles a line */
.prog-item::after{content:"";width:2px;height:0;margin-top:.6rem;border-radius:2px;
  background:linear-gradient(180deg,var(--rose),var(--gold));
  transition:height .7s cubic-bezier(.22,1,.36,1) var(--d,0s)}
.prog-item:has(+ .prog-item:not([hidden]))::after{height:1.6rem}
.prog-item::before{
  content:"";width:11px;height:11px;border-radius:50%;
  background:var(--paper);border:2.5px solid var(--rose);
  margin-bottom:.35rem;scale:0;transition:scale .5s cubic-bezier(.22,1,.36,1) var(--d,0s);
}
.reveal.is-visible .prog-item::before,.prog-item.is-visible::before{scale:1}
/* the time chip is a small keycap */
.prog-time{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.28em .85em;border-radius:10px;
  background:linear-gradient(178deg,#FEF6F7,var(--petal));
  box-shadow:0 2px 0 rgba(194,30,86,.13),0 3px 5px rgba(90,36,54,.12),inset 0 1px 0 rgba(255,255,255,.95);
  font-family:"Cormorant",serif;font-weight:600;font-size:1.05rem;color:var(--crimson);
  font-variant-numeric:tabular-nums;
}
.prog-label{font-size:.92rem}
.prog-label[hidden]{display:none}
.prog-ridge{
  max-width:340px;margin:0 auto;border-radius:16px;overflow:hidden;opacity:.9;
}
.prog-ridge img{aspect-ratio:16/6;object-fit:cover}

/* ============================================================
   09-gallery / 10-rsvp
   ============================================================ */
#gallery{text-align:center}
.gallery-title{margin-bottom:1.4rem}
.gallery-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:.7rem;max-width:420px;margin:0 auto;
}
.gallery-photo{
  width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:14px;
  border:3px solid #fff;box-shadow:0 10px 20px -10px rgba(90,36,54,.3);
}
.gallery-photo:nth-child(4n+2){rotate:1.2deg}
.gallery-photo:nth-child(4n+3){rotate:-1.2deg}

#rsvp{text-align:center}
.rsvp-title{max-width:34ch;margin:0 auto 1.6rem;font-size:clamp(1.15rem,4.4vw,1.35rem)}
.rsvp-form{max-width:360px;margin:0 auto;text-align:left}
.rsvp-row{margin-bottom:1rem}
.rsvp-label{
  display:block;margin-bottom:.4rem;
  font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);
}
.rsvp-input{
  display:block;width:100%;padding:.8em 1em;border-radius:12px;
  border:1.5px solid rgba(194,30,86,.25);
  background:#fff;color:var(--ink);font:inherit;font-size:.95rem;line-height:1.5;
  resize:vertical;transition:border-color .3s,box-shadow .3s;
}
.rsvp-input:focus{border-color:var(--rose);outline:none;box-shadow:0 0 0 3px rgba(224,68,126,.15)}
.rsvp-status{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1rem}
.rsvp-status-opt{
  flex:1;display:flex;align-items:center;gap:.5em;justify-content:center;
  padding:.6em .8em;border-radius:12px;font-size:.85rem;
  background:#fff;border:1.5px solid rgba(194,30,86,.2);cursor:pointer;
}
.rsvp-status-opt input{accent-color:var(--rose)}
.rsvp-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.rsvp-submit{width:100%;margin-top:.4rem}
.rsvp-msg{min-height:1.4em;margin-top:.8rem;text-align:center;font-size:.9rem;color:var(--crimson)}

/* ============================================================
   11-wishes / 12-gift / footer
   ============================================================ */
.wish{text-align:center}
.wish-art{
  border-radius:20px;overflow:hidden;margin-bottom:1.7rem;
  box-shadow:0 18px 34px -16px rgba(90,36,54,.32);
}
.wish-closing{font-family:"Cormorant",serif;font-size:clamp(1.15rem,4.4vw,1.35rem);font-weight:500}
.wish-closing[hidden]{display:none}
.wish-closing strong{color:var(--crimson)}
.wish-bless{margin-top:.8rem;font-family:"Marck Script",cursive;font-size:1.35rem;color:var(--gold)}

#gift{text-align:center}
.gift-note{max-width:36ch;margin:0 auto 1.5rem;color:var(--ink-soft)}
/* the blank generated card is the backdrop; number/name are live text on top */
/* premium card (shared look across templates): the blush-card artwork is the
   texture under a rose-tinted dusk scrim, with a gold chip, the Yor♥Yor mark,
   and the number embossed on top. */
.gift-card{
  position:relative;overflow:hidden;
  width:100%;max-width:23rem;aspect-ratio:1.585;margin:1.6rem auto 0;
  border-radius:16px;
  background:url("../assets/gift-card.webp?v=1785314415") center/cover no-repeat, var(--tint-rose);
  border:1px solid rgba(248,217,150,.42);
  box-shadow:0 20px 46px rgba(90,36,54,.4), inset 0 1px 0 rgba(255,255,255,.18);
  display:flex;flex-direction:column;align-items:stretch;
  padding:clamp(.85rem,4vw,1.2rem) clamp(1rem,4.6vw,1.4rem);
  text-align:left;color:#FFF3EC;overflow-wrap:anywhere;
}
.gift-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 92% at 82% 8%, rgba(255,107,158,.32), transparent 55%),
    linear-gradient(135deg, rgba(90,36,54,.82), rgba(194,30,86,.42) 55%, rgba(90,36,54,.9));
}
.gift-scrim::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(118deg,transparent 42%,rgba(255,255,255,.12) 50%,transparent 58%);
}
.gift-card-top{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between}
.gift-chip{
  position:relative;width:clamp(2rem,9vw,2.5rem);aspect-ratio:1.38;border-radius:5px;
  background:linear-gradient(150deg,#F8DE96 0%,#E8C36A 46%,#C8983C 100%);
  box-shadow:inset 0 0 0 1px rgba(120,80,20,.4);
}
.gift-chip::before{
  content:'';position:absolute;inset:22% 16%;
  background:
    linear-gradient(rgba(120,80,20,.45),rgba(120,80,20,.45)) center/100% 1.2px no-repeat,
    linear-gradient(rgba(120,80,20,.45),rgba(120,80,20,.45)) 32% 0/1.2px 100% no-repeat,
    linear-gradient(rgba(120,80,20,.45),rgba(120,80,20,.45)) 68% 0/1.2px 100% no-repeat;
}
.gift-brand{font-family:"Cormorant",serif;font-weight:700;font-size:clamp(.92rem,4vw,1.15rem);color:rgba(255,243,236,.94)}
.gift-brand span{color:var(--rose);margin:0 .04em}
.gift-card-number{
  margin-top:auto;position:relative;z-index:1;
  font-family:"Cormorant",serif;font-weight:600;
  font-size:clamp(1.4rem,6.6vw,1.9rem);letter-spacing:.06em;color:#FFF3EC;
  white-space:nowrap;font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1;
  text-shadow:0 1px 0 rgba(0,0,0,.4),0 0 14px rgba(255,217,142,.28);
}
.gift-card-name{
  position:relative;z-index:1;margin-top:.4rem;
  font-size:clamp(.7rem,3vw,.88rem);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,217,142,.92);
}
.gift-card-name:empty{display:none}
.gift-copy{margin-top:1.4rem}
.gift-copy-icon{width:14px;height:14px}

.footer{
  padding:3rem 1.5rem 3.4rem;text-align:center;
  background:linear-gradient(180deg,var(--tint-rose),var(--blush));
}
.nav-logo{font-family:"Cormorant",serif;font-weight:600;font-size:1.5rem;letter-spacing:.02em}
.nav-logo-heart{color:var(--rose);font-size:.8em;padding:0 .06em}
.footer p{margin-top:.5rem;font-size:.78rem;color:var(--ink-soft)}

/* ---- music button ---- */
.music-btn{
  position:fixed;bottom:1.1rem;
  right:max(1.1rem, calc((100% - 480px) / 2 + 1.1rem));
  z-index:990; /* below grain and splash */
  width:52px;height:52px;border-radius:50%;
  background:linear-gradient(135deg,var(--crimson),var(--rose));
  box-shadow:0 10px 22px -8px rgba(194,30,86,.6);
  display:flex;align-items:center;justify-content:center;
  opacity:1;transition:opacity .6s ease;
}
.music-btn[hidden]{display:none}
.music-eq{display:flex;align-items:flex-end;gap:2.5px;height:15px}
.music-bar{
  width:2.5px;height:5px;border-radius:2px;background:#fff;
  transition:height .3s ease;
}
.music-btn.is-playing .music-bar{animation:eq 1s ease-in-out infinite}
.music-btn.is-playing .music-bar:nth-child(2){animation-delay:.15s}
.music-btn.is-playing .music-bar:nth-child(3){animation-delay:.3s}
.music-btn.is-playing .music-bar:nth-child(4){animation-delay:.45s}
@keyframes eq{0%,100%{height:5px}50%{height:14px}}
@media (prefers-reduced-motion:reduce){.music-btn.is-playing .music-bar{animation:none;height:10px}}

/* in-page mini board (invite section) — the splash board is removed on open */
.kb--mini{
  width:min(80vw,320px);margin:2.6rem auto 0;
  transform:rotateX(7deg);
}
.kb--mini .kb-key{max-width:30px;font-size:clamp(.56rem,2.5vw,.72rem)}