/* =================================================================
   Paola & Javier — Save the Date
   Design system by Paola. Motion & build by Javi.

   Look      "eucalyptus suite": white cards on a sage table, watercolour
             greenery in the corners, gold calligraphy for the names
   Type      Beau Rivage (script) · Cormorant Garamond (serif) · Jost (sans)
   ================================================================= */

:root{
  --surface:#9DAB94;         /* the sage table everything sits on */
  --surface-2:#8F9E87;
  --card:#FBFAF5;            /* white card */
  --card-sage:#8E9F87;       /* the "Details" card */
  --card-deep:#4F6350;       /* the music card */

  --ink:#2F3A30;
  --ink-soft:#66736A;
  --ink-faint:#9AA598;
  --sage:#7B907A;
  --sage-soft:#B9C7B2;
  --sage-line:#D8DFD3;
  --gold:#B3924F;
  --gold-2:#CDB27A;
  --cream:#F6F4EC;
  --line:#E1E4DA;

  /* envelope (sage) + gold wax */
  --env:#A3B29B;
  --env-2:#94A38C;
  --env-3:#86967F;
  --wax:#B99553;
  --wax-hi:#E4CE95;
  --wax-lo:#7A5F2F;

  --serif:'Cormorant Garamond', Georgia, serif;
  --script:'Beau Rivage', 'Snell Roundhand', cursive;
  --sans:'Jost', 'Helvetica Neue', Arial, sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in:cubic-bezier(.55,.05,.85,.4);

  /* handmade-paper grain, tiled */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .40 0 0 0 0 .34 0 0 0 0 .26 0 0 0 .28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-soft:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .30 0 0 0 0 .34 0 0 0 0 .26 0 0 0 .10 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* the eucalyptus branch (tools/make-foliage.mjs) — swap for a watercolour PNG here if you buy one */
  --foliage:url(../img/foliage.svg);
  /* a tiny sprig, for the envelope liner */
  --sprig-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23C3CFBC'%3E%3Cpath d='M12 22.5c-.4-5-.4-11 0-20' stroke='%23C3CFBC' stroke-width='.9' fill='none' stroke-linecap='round'/%3E%3Cpath d='M12 18.4c-3.8.2-6.2-1.6-6.6-4.9 3.6-.1 5.9 1.6 6.6 4.9zM12 18.4c3.8.2 6.2-1.6 6.6-4.9-3.6-.1-5.9 1.6-6.6 4.9zM12 12.6c-3.4.2-5.6-1.4-6-4.4 3.2-.1 5.3 1.4 6 4.4zM12 12.6c3.4.2 5.6-1.4 6-4.4-3.2-.1-5.3 1.4-6 4.4zM12 7.2c-2.2.1-3.6-.9-3.9-2.9 2.1 0 3.4.9 3.9 2.9zM12 7.2c2.2.1 3.6-.9 3.9-2.9-2.1 0-3.4.9-3.9 2.9z'/%3E%3C/g%3E%3C/svg%3E");

  /* photo treatment — Paola's black-and-white with a breath of warmth */
  --bw:grayscale(1) contrast(.92) brightness(1.06) sepia(.12);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
html{
  background:var(--grain-soft), linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%) var(--surface);
  scrollbar-color:rgba(47,58,48,.35) var(--surface-2);
}
body{
  font-family:var(--sans);
  color:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  background:transparent;
}
/* the scrollbar sits on the sage, not on a grey track */
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:var(--surface-2); }
::-webkit-scrollbar-thumb{ background:rgba(47,58,48,.35); border-radius:999px; border:2px solid var(--surface-2); }
::-webkit-scrollbar-thumb:hover{ background:rgba(47,58,48,.5); }
body.is-locked{ overflow:hidden; height:100vh; height:100svh; }
img{ max-width:100%; }
button{ font:inherit; color:inherit; }
[hidden]{ display:none !important; }

/* language crossfade happens on containers, so it never fights the reveal rules */
.lang-scope{ transition:opacity .32s ease, filter .32s ease; }
body.is-switching .lang-scope{ opacity:0; filter:blur(3px); }

/* =================================================================
   ENVELOPE INTRO
   One 3D scene. Depth is set with translateZ only (no z-index inside
   the scene — browsers disagree about z-index in preserve-3d):
     back 0 · liner .5 · card 1 · front 2 · flap-shadow 2.5 · flap 3 → -8 when open · wax 6
   ================================================================= */
.envelope-intro{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center;
  background:radial-gradient(120% 90% at 50% 42%, #FBF9F3 0%, #F3F0E6 50%, #E8E4D8 100%);
  perspective:1400px;
  perspective-origin:50% 42%;
}
.envelope-intro::before{               /* faint grain over the whole stage */
  content:''; position:absolute; inset:0;
  background:var(--grain-soft);
  pointer-events:none;
}
.envelope-intro.is-leaving{ opacity:0; transition:opacity .9s ease .25s; pointer-events:none; }   /* taps reach the page (and the music button) as it dissolves */
.envelope-intro.is-gone{ visibility:hidden; pointer-events:none; }

/* stage = idle float · tilt = pointer parallax + the push-through at the end · envelope = the 3D object */
.env-stage{
  position:relative;
  width:min(86vw, 420px);
  animation:envFloat 5.5s ease-in-out infinite;
  transform-style:preserve-3d;
}
.envelope-intro.is-opening .env-stage{ animation-play-state:paused; }
@keyframes envFloat{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-6px); }
}
.env-tilt{
  transform-style:preserve-3d;
  transition:transform .7s var(--ease-out);
  will-change:transform;
}
/* the scene grows towards the viewer and the page is underneath: one continuous move, no cut */
.envelope-intro.is-leaving .env-tilt{
  transform-origin:50% -10%;
  transform:scale(2.2) translateY(6%);
  transition:transform 1.15s var(--ease-in);
}

.envelope{
  position:relative;
  width:100%;
  aspect-ratio:1 / .7;
  transform-style:preserve-3d;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.envelope-intro.is-opening .envelope{ cursor:default; animation:envNudge .55s var(--ease-out); }
@keyframes envNudge{
  0%  { transform:scale(1); }
  30% { transform:scale(.985) translateY(2px); }
  100%{ transform:scale(1); }
}
/* the envelope fades away a beat before the stage does, so the card stands alone at the end */
.envelope-intro.is-leaving .env-back,
.envelope-intro.is-leaving .env-front,
.envelope-intro.is-leaving .env-flap,
.envelope-intro.is-leaving .env-flap-shadow{ opacity:0; transition:opacity .45s ease; }

/* --- envelope body + patterned liner --- */
.env-back{
  position:absolute; inset:0;
  background:var(--grain), linear-gradient(160deg, var(--env) 0%, var(--env-2) 55%, var(--env-3) 100%);
  background-blend-mode:multiply, normal;
  border-radius:3px;
  box-shadow:0 30px 70px -18px rgba(40,55,40,.5), 0 2px 5px rgba(40,55,40,.14);
  transform:translateZ(0);
  overflow:hidden;
}
.env-liner{                                     /* the paper glued inside — little sprigs, revealed when the flap lifts */
  position:absolute; inset:0;
  background:var(--sprig-light) 4px 2px / 28px 28px repeat, #F8F7F1;
  clip-path:polygon(0 0, 100% 0, 50% 55%);
  box-shadow:inset 0 6px 12px rgba(0,0,0,.10);
}
/* the pocket: front panel that the card slides out of */
.env-front{
  position:absolute; inset:0;
  border-radius:3px;
  overflow:hidden;
  pointer-events:none;
  transform:translateZ(2px);
}
.env-front::before,
.env-front::after{
  content:''; position:absolute; bottom:0;
  width:52%; height:100%;
  background-blend-mode:multiply, normal;
}
.env-front::before{
  left:0; clip-path:polygon(0 0, 100% 50%, 0 100%);
  background:var(--grain), linear-gradient(115deg, #A9B8A1 0%, #90A089 100%);
}
.env-front::after{
  right:0; clip-path:polygon(100% 0, 0 50%, 100% 100%);
  background:var(--grain), linear-gradient(245deg, #9EAD96 0%, #83937C 100%);
}
.env-front-bottom{
  position:absolute; left:0; right:0; bottom:0; height:100%;
  background:var(--grain), linear-gradient(180deg, #8B9B84 0%, #A3B29B 100%);
  background-blend-mode:multiply, normal;
  clip-path:polygon(0 100%, 50% 47%, 100% 100%);
  box-shadow:0 -1px 0 rgba(255,255,255,.35);
}
/* the "addressed" line on the front — like a real envelope */
.env-address{
  position:absolute; left:0; right:0; bottom:9%;
  text-align:center;
  font-family:var(--script);
  font-size:clamp(1.35rem, 6.2vw, 1.9rem);
  line-height:1;
  color:rgba(251,250,245,.92);
  letter-spacing:.01em;
  text-shadow:0 1px 1px rgba(40,55,40,.18);
  transition:opacity .4s ease;
}
.env-address .amp{ color:var(--gold-2); font-size:.9em; padding:0 .06em; }
.envelope-intro.is-opening .env-address{ opacity:.35; }

/* --- the flap --- */
.env-flap-shadow{                               /* cut-paper shadow the closed flap casts on the body */
  position:absolute; left:0; right:0; top:0;
  height:52%;
  transform:translateY(4px) translateZ(2.5px);
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  background:rgba(40,55,40,.18);
  pointer-events:none;
  transition:opacity .35s ease .25s;
}
.envelope-intro.is-opening .env-flap-shadow{ opacity:0; }
.env-flap{
  position:absolute; left:0; right:0; top:0;
  height:52%;
  transform-origin:top center;
  transform:translateZ(3px) rotateX(0deg);
  transform-style:preserve-3d;
  pointer-events:none;
}
.env-flap-face{
  position:absolute; inset:0;
  background:var(--grain), linear-gradient(185deg, #AEBDA6 0%, #9FAE97 70%, #90A089 100%);
  background-blend-mode:multiply, normal;
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.env-flap-inner{                                /* same liner paper on the inside of the flap */
  position:absolute; inset:0;
  background:var(--sprig-light) 4px 2px / 28px 28px repeat, #F8F7F1;
  clip-path:polygon(0 100%, 100% 100%, 50% 0);
  transform:rotateX(180deg);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.envelope-intro.is-opening .env-flap{ animation:flapOpen 1.15s linear .3s forwards; }
@keyframes flapOpen{
  0%    { transform:translateZ(3px) rotateX(0deg);     animation-timing-function:var(--ease-in); }
  49.9% { transform:translateZ(3px) rotateX(89.5deg);  animation-timing-function:linear; }
  50.1% { transform:translateZ(-8px) rotateX(90.5deg); animation-timing-function:cubic-bezier(.15,.6,.3,1); }
  100%  { transform:translateZ(-8px) rotateX(180deg); }
}

/* --- gold wax seal --- */
.wax{
  position:absolute; left:50%; top:52%;
  width:29%; aspect-ratio:1;
  transform:translate(-50%,-50%) translateZ(6px);
  border:none; padding:0;
  background:none;
  cursor:pointer;
  transition:transform .5s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.wax:hover{ transform:translate(-50%,-50%) translateZ(6px) scale(1.06); }
.wax:active{ transform:translate(-50%,-50%) translateZ(6px) scale(.95); transition-duration:.12s; }
.wax:focus-visible{ outline:2px solid var(--gold); outline-offset:8px; border-radius:50%; }
.envelope-intro.is-opening .wax{ pointer-events:none; }
/* the seal's shadow lives on its own layer — the halves are clipped with polygons, which would cut a shadow flat */
.wax::before{
  content:''; position:absolute; inset:0;
  border-radius:49% 51% 50% 50% / 52% 48% 52% 48%;
  box-shadow:0 12px 24px -10px rgba(40,35,20,.5), 0 1px 2px rgba(40,35,20,.28);
  transition:opacity .5s ease;
}
.envelope-intro.is-opening .wax::before{ opacity:0; }

.wax-half{                                     /* ivory matte wax */
  position:absolute; inset:0;
  border-radius:49% 51% 50% 50% / 52% 48% 52% 48%;
  background:radial-gradient(circle at 40% 36%, #FFFEF9 0%, #F6F1E4 55%, #E4DCC6 100%);
  box-shadow:
    inset 0 -3px 4px rgba(90,70,30,.16),
    inset 0 2px 3px rgba(255,255,255,.95),
    inset 0 0 0 5px rgba(255,255,255,.22),
    inset 0 0 10px 6px rgba(90,70,30,.07);
  transition:transform .85s var(--ease), opacity .7s ease;
}
.wax-half.top{ clip-path:polygon(0 0, 100% 0, 100% 48%, 0 54%); }
.wax-half.bot{ clip-path:polygon(0 54%, 100% 48%, 100% 100%, 0 100%); }

/* a slow light sweep so the seal reads as the thing to touch */
.wax-shine{
  position:absolute; inset:0;
  border-radius:49% 51% 50% 50% / 52% 48% 52% 48%;
  background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%);
  background-size:260% 100%;
  background-position:120% 0;
  animation:waxShine 4.8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes waxShine{
  0%, 62%{ background-position:120% 0; }
  100%   { background-position:-120% 0; }
}


.wax-mark{                                     /* rings, the JP signature and two leaves — centred on the ink by main.js */
  position:absolute; inset:0; width:100%; height:100%;
  overflow:visible; pointer-events:none;
  transition:opacity .4s ease;
}
/* the eucalyptus sprig tucked under the seal */
.env-sprig{
  position:absolute; left:50%; top:52%;
  width:64%; aspect-ratio:340 / 220;
  transform:translate(-47%,-56%) rotate(-22deg) translateZ(5px);
  background:var(--foliage) center / contain no-repeat;
  pointer-events:none;
  transition:opacity .5s ease;
}
.envelope-intro.is-opening .env-sprig{ opacity:0; }

.envelope-intro.is-opening .wax-half.top{ transform:translate(-16%,-58%) rotate(-22deg); opacity:0; }
.envelope-intro.is-opening .wax-half.bot{ transform:translate(14%,62%) rotate(17deg);  opacity:0; }
.envelope-intro.is-opening .wax-mark,
.envelope-intro.is-opening .wax-shine{ opacity:0; transition:opacity .25s ease; animation:none; }

/* --- the card that rises out (a small version of the invitation) --- */
.env-card{
  position:absolute; left:5%; right:5%; bottom:6%;
  height:86%;
  background:var(--grain-soft), var(--card);
  border-radius:2px;
  box-shadow:0 12px 30px -10px rgba(40,55,40,.34);
  display:grid; place-items:center; align-items:start;
  text-align:center;
  padding:9% 8% 6%;
  overflow:hidden;
  transform:translateY(0) translateZ(1px);
  transition:transform 1.15s var(--ease-out) 1.35s, box-shadow 1.15s ease 1.35s;   /* waits for the flap to settle — no depth fight */
}
.env-card::before{                              /* a sprig of eucalyptus in the lower corner — clear of the names */
  content:''; position:absolute; right:-5%; bottom:-6%; width:38%; aspect-ratio:340/220;
  background:var(--foliage) center / contain no-repeat;
  transform:rotate(180deg);
  opacity:.9; pointer-events:none;
}
.envelope-intro.is-opening .env-card{
  transform:translateY(-72%) translateZ(1px);
  box-shadow:0 30px 50px -16px rgba(40,55,40,.4);
}
.env-card-inner{ position:relative; opacity:0; transform:translateY(6px); transition:opacity .6s ease 1.95s, transform .6s var(--ease-out) 1.95s; }
.envelope-intro.is-opening .env-card-inner{ opacity:1; transform:none; }
.envelope-intro.is-leaving .env-card-inner{ opacity:0; transition:opacity .4s ease; }      /* the text leaves before the page arrives */
.env-card .mono{
  font-family:var(--script);
  font-size:clamp(2.2rem, 9.6vw, 3rem);
  color:var(--gold);
  line-height:1;
}
.env-card .mono .amp{ font-size:.85em; color:var(--sage); padding:0 .08em; }
.env-card .sub{
  margin-top:.5em;
  font-size:.62rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--sage);
}
.env-card .sub2{
  margin-top:.9em;
  font-family:var(--serif); font-weight:600;
  font-size:.86rem; letter-spacing:.14em; color:var(--ink);
}

.env-hint{
  position:absolute; left:0; right:0; bottom:-19%;
  text-align:center;
  font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-soft);
  animation:pulse 2.4s ease-in-out infinite;
}
.envelope-intro.is-opening .env-hint{ animation:none; opacity:0; transition:opacity .3s ease; }
@keyframes pulse{ 0%,100%{ opacity:.45; } 50%{ opacity:.95; } }

.env-skip{
  position:absolute; right:18px; bottom:calc(18px + env(safe-area-inset-bottom));
  background:none; border:none; cursor:pointer;
  font-family:var(--sans);
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft);
  padding:10px 12px;
  transition:color .3s ease;
}
.env-skip:hover{ color:var(--sage); }
.envelope-intro.is-opening .env-skip{ opacity:0; transition:opacity .3s ease; pointer-events:none; }

/* the page arrives underneath the dissolving stage */
body.has-intro .page{ opacity:0; transform:translateY(14px); }      /* a rise, not a scale — never wider than the screen */
body.has-intro.page-enter .page{ opacity:1; transform:none; transition:opacity 1s ease, transform 1.5s var(--ease-out); }

/* =================================================================
   CHROME — progress bar, language toggle
   ================================================================= */
.progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:80;
  background:transparent; pointer-events:none;
}
.progress span{
  display:block; height:100%; width:0%;
  background:var(--gold); opacity:.75;
  transform-origin:left;
}

.lang-toggle{
  position:fixed; top:16px; right:16px; z-index:90;
  background:rgba(251,250,245,.82);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.6);
  border-radius:999px;
  padding:9px 14px;
  cursor:pointer;
  font-family:var(--sans);
  font-size:.62rem; letter-spacing:.14em;
  color:var(--ink-soft);
  display:flex; gap:5px; align-items:center;
  box-shadow:0 4px 14px -6px rgba(40,55,40,.35);
  transition:border-color .3s ease, background .3s ease;
}
.lang-toggle:hover{ border-color:var(--gold); }
.lang-toggle .lang-opt{ transition:color .3s ease, opacity .3s ease; opacity:.45; }
.lang-toggle .lang-opt.is-active{ color:var(--ink); opacity:1; font-weight:500; }
.lang-toggle .lang-sep{ opacity:.3; }

/* =================================================================
   THE TABLE + THE CARDS
   ================================================================= */
.page{
  position:relative;
  max-width:780px;
  margin:0 auto;
  padding:12px 12px calc(28px + env(safe-area-inset-bottom));
}
.card{
  position:relative;
  background:var(--card);
  border-radius:4px;
  box-shadow:0 18px 44px -22px rgba(30,45,32,.55), 0 1px 2px rgba(30,45,32,.12);
  margin-bottom:12px;
  overflow:hidden;
}
.card-inner{ position:relative; z-index:1; padding:60px 28px 56px; text-align:center; }

/* eucalyptus in two corners */
.leafy::before, .leafy::after{
  content:''; position:absolute; z-index:0;
  width:min(54%, 300px); aspect-ratio:340 / 220;
  background:var(--foliage) center / contain no-repeat;
  pointer-events:none;
}
.leafy::before{ top:-10px; left:-14px; }
.leafy::after{ bottom:-10px; right:-14px; transform:rotate(180deg); }
.leafy-light::before, .leafy-light::after{
  content:''; position:absolute; z-index:0;
  width:min(60%, 260px); aspect-ratio:340 / 220;
  background:var(--foliage) center / contain no-repeat;
  pointer-events:none;
  opacity:.45; filter:saturate(.5) brightness(1.45);
}
.leafy-light::before{ top:-8px; left:-10px; }
.leafy-light::after{ bottom:-8px; right:-10px; transform:rotate(180deg); }

/* --- shared type --- */
.label{
  font-size:.66rem; letter-spacing:.26em; text-transform:uppercase; color:var(--sage);
  font-weight:400;
}
.eyebrow{ font-size:.68rem; letter-spacing:.32em; text-transform:uppercase; color:var(--sage); }
.script-title{
  font-family:var(--script); font-weight:400;
  font-size:clamp(2.6rem, 11vw, 3.4rem); line-height:1;
  color:var(--cream);
}
.script-title.gold{ color:var(--gold); }

/* =================================================================
   1 · THE INVITATION CARD
   ================================================================= */
.card-invite .card-inner{ padding:98px 26px 104px; }
.names{
  margin-top:24px;
  font-family:var(--script); font-weight:400;
  font-size:clamp(3rem, 14vw, 4.2rem); line-height:1.02;
  color:var(--gold);
}
.names .mask{ display:block; overflow:hidden; padding:0 .12em; }
.names .line{ display:block; transform:translateY(110%); opacity:0; }
.names .amp{ font-size:.58em; color:var(--sage); line-height:1.1; padding:.06em 0; }
.hero.is-in .mask > *{ animation:maskRise 1.05s var(--ease-out) forwards; }
.hero.is-in .mask:nth-child(1) > *{ animation-delay:.05s; }
.hero.is-in .mask:nth-child(2) > *{ animation-delay:.17s; }
.hero.is-in .mask:nth-child(3) > *{ animation-delay:.29s; }
@keyframes maskRise{ to{ transform:translateY(0); opacity:1; } }
.hero-rest{ opacity:0; }
.hero.is-in .hero-rest{ animation:rise .95s var(--ease-out) forwards .6s; }

.invite-line{
  margin-top:22px;
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:1.12rem; line-height:1.5; color:var(--ink-soft);
}
.date-row{
  margin-top:28px;
  display:flex; align-items:center; justify-content:center; gap:14px;
}
.date-side{
  font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink);
  padding:9px 0; min-width:84px;
  border-top:1px solid var(--sage-line); border-bottom:1px solid var(--sage-line);
}
.date-num{
  font-family:var(--serif); font-weight:600;
  font-size:3.1rem; line-height:1; color:var(--ink);
  padding:0 4px;
}
.invite-time{
  margin-top:14px;
  font-family:var(--serif); font-style:italic; font-size:1.05rem; color:var(--ink-soft);
}
.invite-venue{
  margin-top:24px;
  font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink); line-height:1.7;
}
.invite-city{
  display:block;
  font-family:var(--serif); font-style:italic; font-size:.98rem; letter-spacing:.04em; text-transform:none;
  color:var(--ink-soft);
}
.scroll-cue{
  margin:30px auto 0;
  background:none; border:none; color:var(--sage); cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  font-family:var(--sans); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
  padding:6px 10px;
}
.scroll-cue .chev{ animation:bob 1.9s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(5px); } }

/* =================================================================
   2 · 5 · PHOTOS  (borderless cards; torn edges are still available — see README)
   ================================================================= */
.card-photo{ padding:0; background:transparent; }        /* no white behind the photo — no hairline under it */
.band-media{
  position:relative; overflow:hidden;
  aspect-ratio:4 / 5;
  border-radius:4px;
  background:var(--surface-2);                   /* same as the table — nothing can peek out under the photo */
}
.band-media::after{                              /* a thin printed line inside the photo — the minimal frame */
  content:''; position:absolute; inset:12px;
  border:1px solid rgba(251,250,245,.55);
  pointer-events:none; z-index:3;
}
.band-media > img{
  position:absolute; inset:-1px;               /* overshoot a pixel — no hairline from sub-pixel rounding */
  width:calc(100% + 2px); height:calc(100% + 2px);
  object-fit:cover; object-position:var(--pos, center 60%);
  display:block;
  filter:var(--bw);
}
/* the second print scrolls a touch slower than the page */
.band-photo .band-media > img{ inset:-8% 0; height:116%; will-change:transform; }
/* a card with several frames crossfades between them, each with a slow push.
   The outgoing frame keeps its zoom (paused) until it has fully faded — otherwise it would snap back mid-fade. */
.band-media .hero-img{ opacity:0; transform:scale(1.06); transition:opacity 1.8s ease; }
.band-media .hero-img.is-active, .band-media .hero-img.is-out{ animation:kenburns 14s ease-out forwards; }
.band-media .hero-img.is-active{ opacity:1; }
.band-media .hero-img.is-out{ animation-play-state:paused; }
@keyframes kenburns{
  from{ transform:scale(1.06) translate3d(0,0,0); }
  to{   transform:scale(1.16) translate3d(0,-1.5%,0); }
}
.print-caption{
  padding:4px 8px 18px; text-align:center;
  font-family:var(--serif); font-style:italic; font-size:1.08rem; color:var(--cream);
}

.tear{
  position:absolute; left:0; right:0; height:46px;
  z-index:5; pointer-events:none; line-height:0;
}
.tear svg{ width:100%; height:100%; display:block; }
.tear-bottom{ bottom:-1px; }
.tear-top{ top:-1px; transform:scaleY(-1); }
.tear .tear-paper{ fill:var(--card); }
.tear .tear-fiber{ fill:#fff; opacity:.6; }

/* missing-photo hint — shows the filename to drop in; disappears once the photo exists */
[data-photo].is-missing::after{
  content:attr(data-file);
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  font-family:var(--sans); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(47,58,48,.55);
  border:1px dashed rgba(47,58,48,.35);
  padding:10px 14px; border-radius:3px;
  white-space:nowrap;
  pointer-events:none; z-index:6;
}

/* =================================================================
   3 · DETAILS  (sage card)
   ================================================================= */
.card-sage{
  background:var(--grain-soft), var(--card-sage);
  color:var(--cream);
}
.card-sage .label{ color:rgba(246,244,236,.74); }
.countdown{ margin-top:34px; }
.cd-boxes{ display:flex; justify-content:center; align-items:stretch; }
.cbox{ padding:0 14px; text-align:center; min-width:58px; }
.cnum{
  display:block;
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(1.8rem, 6vw, 2.3rem);
  font-variant-numeric:tabular-nums;
  line-height:1.1;
  color:var(--cream);
}
.cnum.tick{ animation:tick .5s var(--ease-out); }
@keyframes tick{
  0%  { transform:translateY(28%); opacity:0; }
  100%{ transform:translateY(0);   opacity:1; }
}
.clabel{ display:block; margin-top:3px; font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(246,244,236,.72); }
.cdiv{ width:1px; background:rgba(246,244,236,.3); }
.cd-today{
  font-family:var(--script);
  font-size:clamp(2.4rem, 11vw, 3.4rem);
  color:var(--cream); line-height:1.1;
  animation:rise 1s var(--ease-out);
}

.date-actions{
  margin-top:22px;
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:2px 12px;
}
.actions-label{
  width:100%;
  font-size:.64rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(246,244,236,.72);
  margin-bottom:4px;
}
.date-actions .dot{ color:rgba(246,244,236,.4); font-size:1rem; }

.rule{ width:54px; height:1px; background:rgba(246,244,236,.4); margin:36px auto 40px; }
.detail-block + .detail-block{ margin-top:34px; }
.detail-big{ margin-top:12px; font-family:var(--serif); font-weight:600; font-size:1.55rem; line-height:1.2; }
.detail-sub{ margin-top:6px; font-family:var(--serif); font-style:italic; font-size:1.02rem; line-height:1.5; color:rgba(246,244,236,.88); }
.detail-block .link-btn{ margin-top:14px; font-size:.7rem; }
/* the one real action on the card: a button, not a text link */
.btn-chip{
  margin-top:20px; padding:13px 24px; gap:9px;
  font-size:.68rem;
  text-decoration:none;
  box-shadow:0 10px 24px -10px rgba(30,45,32,.55);
}
.btn-chip svg{ flex:none; color:var(--sage); }
.detail-big{ font-size:1.7rem; }

/* --- text links (light on the sage card, dark on white) --- */
.link-btn{
  position:relative;
  display:inline-block;
  font-family:var(--sans);
  font-size:.76rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink);
  background:none; border:none;
  padding:10px 1px;
  cursor:pointer;
  text-decoration:none;
  transition:color .25s ease, opacity .25s ease;
}
.link-btn::after{
  content:''; position:absolute; left:0; bottom:7px; height:1px; width:100%;
  background:currentColor;
  transform:scaleX(1); transform-origin:right;
  transition:transform .4s var(--ease);
}
.link-btn:hover{ color:var(--gold); }
.link-btn:hover::after{ transform:scaleX(0); }
.link-btn:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; }
.card-sage .link-btn, .footer .link-btn{ color:var(--cream); }
.card-sage .link-btn:hover, .footer .link-btn:hover{ color:#fff; opacity:.85; }
.link-btn-quiet{ margin-top:22px; font-size:.64rem; }

.btn-pill{
  margin-top:28px; display:inline-flex; align-items:center; justify-content:center; gap:12px;
  background:var(--cream); color:var(--ink);
  border:none; border-radius:999px; padding:15px 32px;
  font-family:var(--sans); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  cursor:pointer;
  box-shadow:0 10px 26px -8px rgba(0,0,0,.45);
  transition:transform .3s var(--ease), box-shadow .3s ease, background .3s ease, color .3s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn-pill:hover{ transform:translateY(-2px); box-shadow:0 16px 30px -10px rgba(0,0,0,.5); }
.btn-pill:active{ transform:translateY(0) scale(.98); }
.btn-pill:focus-visible{ outline:2px solid var(--cream); outline-offset:4px; }

/* =================================================================
   8 · LOS DE SIEMPRE — one print on the table, closing the page
   ================================================================= */
.closing-print{ padding:46px 16px 6px; display:flex; justify-content:center; }
.closing-print .print-wide{ width:min(92%, 560px); }
.print{
  --tilt:0deg;
  position:relative;
  width:80%;
  background:var(--card);
  padding:10px 10px 0;
  box-shadow:0 22px 44px -18px rgba(30,45,32,.6), 0 1px 2px rgba(30,45,32,.16);
  opacity:0;
  transform:translateY(28px) rotate(0deg);
  transition:opacity .9s var(--ease-out) var(--d,0s), transform 1.15s var(--ease-out) var(--d,0s);
}
.print.is-in{ opacity:1; transform:translateY(0) rotate(var(--tilt)); }
.print-tape{
  position:absolute; top:-11px; left:50%;
  width:76px; height:24px;
  transform:translateX(-50%) rotate(-2deg);
  background:rgba(251,250,245,.55);
  box-shadow:0 1px 2px rgba(30,45,32,.2);
  z-index:2;
}
.print-btn{
  display:block; width:100%;
  background:linear-gradient(160deg, #E4E7DE, #B9C2B2);
  border:none; padding:0;
  cursor:zoom-in;
  aspect-ratio:4 / 5;
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
}
.print-wide{ width:92%; }
.print-wide .print-btn{ aspect-ratio:5 / 4; }
.print-btn:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.print-btn img{
  display:block; width:100%; height:100%; object-fit:cover; object-position:var(--pos, center);
  filter:var(--bw);
  transform:scale(1.04);
  transition:transform 1.2s var(--ease-out);
}
.print.is-in .print-btn img{ transform:scale(1); }
.print figcaption{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:11px 4px 13px;
  font-family:var(--serif); font-style:italic; font-size:1rem; color:var(--ink);
  text-align:left;
}
.print figcaption small{
  font-family:var(--sans); font-style:normal;
  font-size:.62rem; letter-spacing:.16em; color:var(--ink-faint);
}
.print.is-missing .print-btn{ cursor:default; }
.print.is-missing::after{ top:44%; }
@media (hover:hover){
  .print.is-in:hover{ transform:translateY(-4px) rotate(var(--tilt)); transition-duration:.5s, .5s; }
}

/* --- lightbox --- */
.lightbox{
  position:fixed; inset:0; z-index:150;
  display:grid; place-items:center;
  padding:24px;
  background:rgba(47,58,48,.9);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  opacity:0;
  transition:opacity .35s ease;
}
.lightbox.is-open{ opacity:1; }
.lightbox figure{
  width:min(100%, 520px);
  background:var(--card);
  padding:12px 12px 14px;
  box-shadow:0 40px 90px -20px rgba(0,0,0,.7);
  transform:scale(.94) translateY(12px);
  transition:transform .55s var(--ease-out);
}
.lightbox.is-open figure{ transform:none; }
.lightbox img{
  display:block; width:100%; max-height:72vh; object-fit:contain;
  filter:var(--bw);
  background:#E4E7DE;
}
.lightbox figcaption{
  margin-top:12px; text-align:center;
  font-family:var(--serif); font-style:italic; font-size:1.05rem; color:var(--ink-soft);
}
.lightbox-close{
  position:absolute; top:16px; right:16px;
  width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(246,244,236,.3);
  background:rgba(47,58,48,.5);
  color:var(--cream); font-size:1.5rem; line-height:1;
  cursor:pointer;
  transition:background .25s ease, border-color .25s ease;
}
.lightbox-close:hover{ background:rgba(246,244,236,.14); border-color:rgba(246,244,236,.6); }
.lightbox-close:focus-visible{ outline:2px solid var(--cream); outline-offset:3px; }

/* =================================================================
   7 · ADD TO CALENDAR
   ================================================================= */
.cal-card .label{ margin-top:14px; }
.cal-card .lead{
  margin-top:12px;
  font-family:var(--serif); font-style:italic; font-size:1.05rem; color:var(--ink);
}
.cal-card .invite-line{ margin-top:8px; font-size:1.02rem; }
.cal-actions{
  margin:30px auto 0; max-width:320px;
  display:flex; flex-direction:column; gap:12px;
}
.btn-cal{
  margin-top:0; gap:10px; padding:15px 24px;
  background:var(--card-deep); color:var(--cream);
  text-decoration:none;
  box-shadow:0 12px 26px -12px rgba(30,45,32,.6);
}
.btn-cal svg{ flex:none; color:var(--gold-2); }
.btn-cal:hover{ background:var(--sage); }
.btn-cal:focus-visible{ outline-color:var(--gold); }

/* =================================================================
   FOOTER  (on the table)
   ================================================================= */
.footer{ text-align:center; padding:26px 16px 6px; color:var(--cream); }
.footer-note{
  font-family:var(--serif);
  font-style:italic; font-size:1rem; color:rgba(246,244,236,.9); line-height:1.9;
}
.footer-note .amp{ font-family:var(--script); font-size:1.9em; color:var(--gold-2); }
.footer .link-btn-quiet{ color:rgba(246,244,236,.75); }

/* =================================================================
   MUSIC WIDGET — floating control
   ================================================================= */
.music-widget{
  position:fixed; right:18px; bottom:calc(18px + env(safe-area-inset-bottom)); z-index:60;
}
.music-toggle{                                 /* a round speaker button, no text */
  position:relative;
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; padding:0;
  border-radius:50%;
  background:var(--card-deep); color:var(--cream);
  border:1px solid rgba(246,244,236,.18);
  cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.28);
  transition:background .3s ease, transform .25s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.music-toggle:hover{ transform:translateY(-1px); }
.music-toggle:active{ transform:scale(.97); }
.music-toggle:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.spk{ display:block; }
.spk-on, body.music-playing .spk-off{ display:none; }
body.music-playing .spk-on{ display:inline; }
.spk-on path{ animation:wave 1.8s ease-in-out infinite; }
.spk-on path + path{ animation-delay:.3s; }
@keyframes wave{ 0%, 100%{ opacity:1; } 50%{ opacity:.35; } }
body.music-playing .music-toggle{ background:var(--gold); color:#fff; }
/* while it hasn't been started, a soft ring invites the tap */
body.music-idle .music-toggle::before{
  content:''; position:absolute; inset:-1px; border-radius:inherit;
  border:1px solid var(--cream);
  animation:ring 2.4s ease-out infinite;
  pointer-events:none;
}
@keyframes ring{ 0%{ transform:scale(1); opacity:.8; } 100%{ transform:scale(1.35); opacity:0; } }

/* =================================================================
   SCROLL REVEAL + MOTION PREFERENCES
   ================================================================= */
.reveal{ opacity:0; transform:translateY(18px); }
.reveal.is-in{
  opacity:1; transform:translateY(0);
  transition:opacity .85s var(--ease-out) var(--d,0s), transform .85s var(--ease-out) var(--d,0s);
}
.label.reveal{ letter-spacing:.42em; }
.label.reveal.is-in{ letter-spacing:.26em; transition:opacity .85s var(--ease-out) var(--d,0s), transform .85s var(--ease-out) var(--d,0s), letter-spacing 1.2s var(--ease-out) var(--d,0s); }
@keyframes rise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal, .print{ opacity:1; transform:none; }
  .label.reveal{ letter-spacing:.26em; }
  .names .line{ transform:none; opacity:1; }
  .hero-rest{ opacity:1; }
  .print-btn img{ transform:none; }
  .band-media .hero-img.is-active{ animation:none; transform:none; }
  .spk-on path{ animation:none; }
}

/* =================================================================
   WIDER SCREENS — the same suite of cards, with room to breathe
   ================================================================= */
@media (min-width:600px){
  .page{ padding:24px 20px 40px; }
  .card{ margin-bottom:20px; }
  .card-inner{ padding:76px 56px 70px; }
  .card-invite .card-inner{ padding:100px 56px 96px; }
  .names{ font-size:clamp(4rem, 8vw, 5.4rem); }
  .invite-line{ font-size:1.25rem; }
  .date-side{ min-width:110px; font-size:.72rem; }
  .date-num{ font-size:3.8rem; }
  .band-media{ aspect-ratio:4 / 3; }
  .band-media::after{ inset:18px; }
  .print-caption{ font-size:1.2rem; padding:8px 8px 22px; }
  .script-title{ font-size:3.8rem; }
  .cbox{ padding:0 22px; min-width:80px; }
  .cnum{ font-size:2.8rem; }
  .detail-big{ font-size:1.8rem; }
  .detail-sub{ font-size:1.1rem; }
  .closing-print{ padding-top:64px; }
  .cal-actions{ flex-direction:row; justify-content:center; max-width:none; margin-bottom:84px; }
  .footer{ padding-top:40px; }
  .lang-toggle{ top:24px; right:24px; }
  .music-widget{ right:24px; bottom:24px; }
  .env-stage{ width:min(70vw, 520px); }
}
@media (min-width:960px){
  .page{ max-width:820px; padding:44px 24px 56px; }
  .leafy::before, .leafy::after{ width:min(42%, 330px); }
  .lang-toggle{ right:32px; }
  .music-widget{ right:32px; bottom:32px; }
  .lightbox-close{ top:24px; right:32px; }
}