/* James & Elaine: concept C "The Red Thread" with Envelope 3 "Dusk".
   Promoted from lab/redesign (the approved mockups) by tools/promote.mjs. */
:root {
  --wine: #821420; --deep: #5D0C13; --ink: #351719; --ink-soft: #7E5F58;
  --ivory: #F7F2E7; --paper: #FBF6EA; --rose: #EFB9AE; --cream: #F7EFDF;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
}
/* the envelope hands over to the site with no white flash between pages */
@view-transition { navigation: auto; }
* { box-sizing: border-box; }
html { background: var(--ivory); }
body { margin: 0; font-family: "Cormorant Garamond", "Times New Roman", serif; color: var(--ink); }
img { display: block; max-width: none; }
/* progress starts at 0 in the stylesheet itself, so the first paint (before
   js/scroll.js runs) already matches: no thread or caption flashes fully drawn */
.scene { --p: 0; position: relative; height: var(--len, 400vh); }
.stage { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; }
.script { font-family: "Great Vibes", cursive; font-weight: 400; line-height: 1.1; }
.display { font-weight: 600; letter-spacing: -0.01em; line-height: 1.02; margin: 0; }
.line { font-size: clamp(1.25rem, 1rem + 1vw, 1.8rem); line-height: 1.35; margin: 0; max-width: 22ch; text-wrap: balance; }

/* the polaroid frame the current site already uses */
.print { background: #FCF8EE; padding: 3.2% 3.2% 12%; box-shadow: 0 2px 4px rgba(40, 10, 12, .18), 0 18px 40px -12px rgba(40, 10, 12, .45); }
.print img { width: 100%; height: auto; }


/* ---------- shared endings: the 3-minute film, then the kiss close */
.film-sec { padding: 14vh 6vw; display: grid; justify-items: center; gap: 1.6rem; text-align: center; }
.film-sec h2 { font-family: "Great Vibes", cursive; font-weight: 400; font-size: clamp(2.8rem, 6vw, 4.4rem); margin: 0; }
.film-sec video { width: min(58rem, 100%); display: block; background: #000; }
.close { --len: 260vh; }
.close .stage { background: #120304; }
.close video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.close .scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(40,5,9,.92), rgba(40,5,9,.5) 34%, transparent 62%); }
.close .say { position: absolute; left: 0; right: 0; bottom: 12vh; text-align: center; color: var(--cream);
  opacity: clamp(0, (var(--p) - .45) * 5, 1); transform: translateY(calc((1 - clamp(0, (var(--p) - .45) * 5, 1)) * 24px)); }
.close .say .script { font-size: clamp(3.4rem, 9vw, 6.4rem); margin: 0; }
.rsvp { display: inline-block; margin-top: 1.4rem; background: var(--cream); color: var(--deep); text-decoration: none;
  font-weight: 700; letter-spacing: .26em; text-transform: uppercase; padding: 1rem 2.6rem; border-radius: 4px;
  transition: transform 140ms var(--ease); }
.rsvp:active { transform: scale(.97); }

/* the couple's own monogram (Downloads/monogram), used as a mask so it takes
   the colour of wherever it sits: ink on ivory, cream on wine, dark on gold.
   Never a monogram of our own making. Size it with font-size (height = 1em). */
.mono { display: inline-block; height: 1em; aspect-ratio: 738 / 758; vertical-align: middle; background: currentColor;
  -webkit-mask: url(assets/monogram-mask.png) center / contain no-repeat; mask: url(assets/monogram-mask.png) center / contain no-repeat; }

/* ===================== page styles (from the approved mockup) */

  /* The red thread of fate: one wine-red thread, drawn by your scroll, that
     has always tied these two together. It runs through every era, behind
     some photos and in front of others (that occlusion is the depth), and in
     the future it closes into a ring around the date. Then it asks you to
     begin again: in every lifetime. */
  .layer { position: absolute; inset: 0; pointer-events: none; }
  .back  { z-index: 1; transform: translateY(calc((.5 - var(--p)) * 18vh)); filter: blur(2.2px) saturate(.8); opacity: .75; }
  .mid   { z-index: 3; transform: translateY(calc((.5 - var(--p)) * 55vh)); }
  .front { z-index: 5; transform: translateY(calc((.5 - var(--p)) * 120vh)); }
  .thread { z-index: 4; }
  .thread svg { width: 100%; height: 100%; overflow: visible; }
  .thread path { fill: none; stroke: var(--wine); stroke-width: 3; stroke-linecap: round;
    /* hidden = the offset sits just past the end, inside the gap, so no round cap shows */
    stroke-dasharray: 1 2; stroke-dashoffset: calc(1.01 - clamp(0, var(--p) * 1.15, 1) * 1.01); filter: drop-shadow(0 2px 2px rgba(80,10,15,.3)); }
  .ph { position: absolute; }
  .ph.print { padding: 2.4% 2.4% 9%; }
  .bw img { filter: grayscale(1) sepia(.3); }
  .copy { position: absolute; z-index: 6; }
  .copy .script { font-size: clamp(2.8rem, 6vw, 4.8rem); color: var(--wine); margin: 0; }
  .fade-a { opacity: calc(clamp(0, (var(--p) - .1) * 6, 1) * clamp(0, (.55 - var(--p)) * 6, 1)); }
  .fade-b { opacity: clamp(0, (var(--p) - .55) * 6, 1); position: absolute; top: 0; }

  .past .stage   { background: var(--ivory); }
  .present .stage { background: var(--paper); }
  .open h1 { font-size: clamp(3.4rem, 10vw, 8.5rem); }
  .open h1 .script { color: var(--wine); font-size: 1em; }
  /* the future: the page turns wine as the thread closes into a ring */
  .future { --f: clamp(0, (var(--p) - .12) * 3, 1); }
  .future .stage { background: color-mix(in oklab, var(--wine) calc(var(--f) * 100%), var(--paper)); }
  .future .thread path { stroke: color-mix(in oklab, var(--rose) calc(var(--f) * 100%), var(--wine)); }
  .ring path { stroke-width: .5 !important; stroke-dashoffset: calc(1.01 - clamp(0, (var(--p) - .3) * 2.4, 1) * 1.01); stroke-width: 2.5; }
  .ringvid { --u: min(1vw, 1vh); position: absolute; z-index: 2; left: 50%; top: calc(50vh + 4 * var(--u)); translate: -50% -50%;
    width: calc(51 * var(--u)); height: calc(51 * var(--u)); border-radius: 50%; overflow: hidden;
    opacity: calc(clamp(0, (var(--p) - .06) * 6, 1) * (1 - clamp(0, (var(--p) - .5) * 4, 1) * .82)); }
  .ringvid video { width: 100%; height: 100%; object-fit: cover; display: block; }
  /* iPhone Safari lets a playing video escape a parent's border-radius +
     overflow:hidden, showing the whole rectangle; a clip-path (and a radius
     on the video itself) holds it to the circle */
  .ringvid { clip-path: circle(50% at 50% 50%); -webkit-clip-path: circle(50% at 50% 50%); }
  .ringvid video { border-radius: 50%; }
  .date { position: absolute; inset: 0; z-index: 6; display: grid; place-content: center; text-align: center; color: var(--cream);
    opacity: clamp(0, (var(--p) - .5) * 5, 1); }
  .date .script { color: var(--rose); font-size: clamp(2.6rem, 5vw, 4rem); margin: 0; }
  .date .display { font-size: clamp(4rem, 13vw, 10rem); }
  .date .day { letter-spacing: .22em; text-transform: uppercase; font-size: .9rem; margin: .5rem 0 0; }
  .motto { font-style: italic; color: var(--rose); font-size: clamp(1.3rem, 2.4vw, 1.8rem); margin-top: 2.2rem;
    opacity: clamp(0, (var(--p) - .78) * 6, 1); }
  .again { display: inline-block; margin-top: 1rem; color: var(--cream); letter-spacing: .2em; text-transform: uppercase;
    font-size: .8rem; text-decoration: none; border-bottom: 1px solid currentColor; opacity: clamp(0, (var(--p) - .85) * 6, 1); pointer-events: auto; }
  /* ---------- phones: words on top, photos arranged below at their own depths */
  @media (max-width: 700px) {
    .ph { left: var(--ml) !important; top: var(--mt) !important; width: var(--mw) !important; }
    .ph.print { padding: 2.2% 2.2% 8%; }
    .past .copy, .present .copy { left: 6vw !important; right: 6vw; top: 12vh !important; max-width: none !important;
      /* a soft ivory halo, so photos drifting underneath never hide the words */
      background: rgba(247, 242, 231, .9); box-shadow: 0 0 28px 18px rgba(247, 242, 231, .9); border-radius: 8px; }
    .copy .script { font-size: 2.8rem; }
    .open .copy p { letter-spacing: .16em !important; font-size: .74rem !important; }
    /* the ring grows to fit the date; its video and its drawn line grow together */
    .ringvid { width: 84vw; height: 84vw; }
    .ring svg { transform: scale(1.62); transform-origin: 50% calc(50% + 4 * min(1vw, 1vh)); }
    .date { padding-top: 4vh; }
    .date .script { font-size: 2.3rem; }
    .date .display { font-size: 3.6rem; }
    .date .day { font-size: .66rem; letter-spacing: .14em; max-width: 60vw; margin-inline: auto; line-height: 1.6; }
    .motto { font-size: 1.05rem; max-width: 60vw; margin: 1rem auto 0; }
  }

  /* ---------- tokens the live FAQ styles expect */
  :root { --sc-1: .25rem; --sc-2: .5rem; --sc-3: .75rem; --sc-4: 1rem; --sc-5: 1.5rem; --sc-6: 2rem;
    --sc-t-xs: clamp(.75rem, .72rem + .15vw, .82rem); --sc-t-sm: clamp(.875rem, .84rem + .18vw, .95rem);
    --sc-t-base: clamp(1rem, .96rem + .22vw, 1.125rem); --sc-t-lg: clamp(1.2rem, 1.1rem + .5vw, 1.5rem);
    --sc-ease-out: cubic-bezier(.23, 1, .32, 1); --sc-e2: 0 2px 4px rgba(20,2,4,.24), 0 12px 24px -8px rgba(20,2,4,.4);
    --sc-font-display: "Cormorant Garamond", serif; --je-rose: #EFB9AE; --je-red-deep: #5D0C13; }
  .h-script { font-size: clamp(2.8rem, 6vw, 4.2rem); color: var(--je-rose); margin: 0 0 1.5rem; font-weight: 400; text-align: center; }

  /* ---------- a light header: names left, RSVP right, readable on any ground */
  .bar { position: fixed; z-index: 30; inset: 0 0 auto 0; display: flex; justify-content: space-between; align-items: center;
    padding: .8rem 1.2rem 1.4rem; font-weight: 600; letter-spacing: .14em; pointer-events: none; color: var(--ink); transition: color 300ms; }
  .bar a { pointer-events: auto; color: inherit; text-decoration: none; }
  .bar .rs { letter-spacing: .2em; font-size: .85rem; border-bottom: 1px solid currentColor; }
  .bar::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 300ms;
    background: linear-gradient(to bottom, rgba(93,12,19,.9), rgba(93,12,19,.6) 55%, transparent); }
  body.on-wine .bar { color: var(--cream); } body.on-wine .bar::before { opacity: 1; }

  /* ---------- the invitation: her four pages at different depths, the thread behind */
  .invite-sec { position: relative; background: var(--wine); color: var(--cream); padding: 16vh 5vw 10vh; overflow: hidden; }
  .invite-sec .thread { position: absolute; inset: 0; z-index: 0; }
  .invite-sec .thread path { stroke: var(--rose); stroke-width: 2; opacity: .8; }
  .inv { position: relative; z-index: 1; width: min(30rem, 88vw); margin: 0 auto 12vh; }
  .inv img { width: 100%; height: auto; display: block; box-shadow: 0 2px 4px rgba(20,2,4,.3), 0 40px 70px -30px rgba(20,2,4,.8); }
  @media (min-width: 900px) { .inv.l { margin-left: 14vw; } .inv.r { margin-right: 14vw; } }
  .waypoints { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 2rem; margin-top: 1.2rem; }
  .maps { display: inline-flex; align-items: center; min-height: 44px; color: var(--rose); font-weight: 700; letter-spacing: .16em;
    text-transform: uppercase; font-size: var(--sc-t-xs); text-underline-offset: .3em; }
  .faq-sec { position: relative; background: var(--wine); padding: 4vh 5vw 16vh; }
  .again { opacity: 1 !important; }
/* ===================================================================== faq
   Her FAQ, typed out word for word, as ivory cards on the red (like the
   invitation pages above it), under a framed RSVP deadline and topic links.
   Native <details> so each card opens with no JS; the script only makes the
   topic links open the card they jump to. Radius rule: pills for things you
   tap, near-square for surfaces, matching the invitation pages. */
.faq { text-align: center; margin-top: clamp(3rem, 6vw, 4.5rem); }
.faq > * { width: min(40rem, 100%); margin-inline: auto; }

.faq__deadline {
  position: relative; padding: clamp(1.2rem, 3vw, 1.6rem) var(--sc-4);
  border: 1px solid rgba(239, 185, 174, 0.55);
}
.faq__deadline::after {
  content: ''; position: absolute; inset: 5px; pointer-events: none;
  border: 1px solid rgba(239, 185, 174, 0.25);
}
.faq__deadline p { margin: 0; }
/* her sentence, set as a sentence: not an uppercase label */
.faq__lead { font-style: italic; font-size: var(--sc-t-lg); color: var(--je-rose); }
.faq__date {
  font-family: var(--sc-font-display); font-weight: 600;
  font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.4rem); line-height: 1.15;
  color: #F7EFDF; margin-block: 0.1rem 0.25rem !important;
}
.faq__note { color: #E9D3C8; font-size: var(--sc-t-base); }

.faq__topics {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sc-2);
  margin-block: var(--sc-5) var(--sc-6);
}
.faq__topics a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1rem;
  border: 1px solid rgba(247, 239, 223, 0.3); border-radius: 999px;
  color: #F7EFDF; text-decoration: none;
  font-size: var(--sc-t-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease,
              transform 140ms var(--sc-ease-out);
}
.faq__topics a:active { transform: scale(0.97); }
.faq__topics a:focus-visible { outline: 2px solid var(--je-rose); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .faq__topics a:hover { background: #F7EFDF; color: #5D0C13; border-color: #F7EFDF; }
}

.faq__item {
  text-align: left; color: #571117;
  background: linear-gradient(178deg, #FCF8EE 0%, #F8F2E2 60%, #F3EBD8 100%);
  box-shadow: var(--sc-e2); border-radius: 2px;
  scroll-margin-top: 5rem;
  interpolate-size: allow-keywords;
}
.faq__item + .faq__item { margin-top: var(--sc-3); }
.faq__item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sc-4);
  min-height: 44px; padding: var(--sc-4) clamp(1rem, 3vw, 1.4rem);
  border-radius: inherit;
  transition: background-color 160ms ease;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__q {
  font-family: var(--sc-font-display); font-weight: 700;
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem); line-height: 1.3; text-wrap: balance;
}
/* the plus: two drawn strokes, not a font glyph, so it sits true in every
   font; a quarter-turn-and-a-half makes it an x when the card is open */
.faq__item summary::after {
  content: ''; flex: none; width: 14px; height: 14px;
  background:
    linear-gradient(#8A1621, #8A1621) center / 100% 1.5px no-repeat,
    linear-gradient(#8A1621, #8A1621) center / 1.5px 100% no-repeat;
  transition: rotate 220ms var(--sc-ease-out);
}
.faq__item[open] summary::after { rotate: 135deg; }
.faq__item summary:focus-visible { outline: 2px solid #8A1621; outline-offset: -4px; }
@media (hover: hover) and (pointer: fine) {
  .faq__item summary:hover { background-color: rgba(239, 185, 174, 0.16); }
}
/* the answer eases open instead of snapping; browsers without
   ::details-content simply open instantly, as before */
.faq__item::details-content {
  block-size: 0; opacity: 0; overflow: clip;
  transition: block-size 260ms var(--sc-ease-out), opacity 200ms ease,
              content-visibility 260ms allow-discrete;
}
.faq__item[open]::details-content { block-size: auto; opacity: 1; }
.faq__item p, .faq__item ul {
  margin: 0; padding: 0 clamp(1rem, 3vw, 1.4rem) var(--sc-4);
  font-size: var(--sc-t-base); line-height: 1.6; color: #6D4A44; text-wrap: pretty;
}
.faq__item ul { padding-left: clamp(2.2rem, 5vw, 2.6rem); }
.faq__item li + li { margin-top: var(--sc-1); }
.faq__tag { font-style: italic; color: #8A1621; letter-spacing: 0.04em; }
@media (prefers-reduced-motion: reduce) {
  /* keep the fade (it helps you see what changed), drop the movement */
  .faq__item::details-content { transition: opacity 200ms ease, content-visibility 200ms allow-discrete; block-size: auto; }
  .faq__item summary::after, .faq__topics a { transition: none; }
  .faq__topics a:active { transform: none; }
}



  /* ---------- the envelope (Envelope 3 · Dusk), scoped to the gate layer */

  /* Three planes: the lit mansion at dusk, far back and out of focus; the
     envelope in the middle, turning toward your hand; soft lights floating in
     front of it. Yes: the flap opens behind the card, the card rises out of
     the pocket, and the card is the website itself, which grows until it is
     the page. No: the envelope turns its back and a gold seal closes it. */
  .gate { position: fixed; inset: 0; z-index: 200; min-height: 100dvh; background: #1c0609; color: var(--cream); overflow-x: hidden; overflow-y: auto; display: grid; place-items: start center; }
  html.gate-locked, html.gate-locked body { overflow: hidden; }
  .far { position: fixed; inset: -6%; background: url(assets/f154.webp) center / cover; filter: blur(14px) brightness(.42) saturate(1.1);
    transform: translate(calc(var(--mx, 0) * -14px), calc(var(--my, 0) * -10px)) scale(1.05); }
  .far::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 70% at 50% 45%, rgba(93,12,19,.25), rgba(28,6,9,.85)); }
  .near { position: fixed; inset: 0; pointer-events: none; transform: translate(calc(var(--mx, 0) * 26px), calc(var(--my, 0) * 18px)); }
  .near i { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(255,214,150,.55), transparent 70%); filter: blur(6px); }
  /* the envelope's centre is pinned to the middle of the screen (it is 3:2,
     so half its height is a third of its width); the words hang below it
     and can change length without moving the envelope */
  .gate__wrap { --ew: min(88vw, 540px); position: relative; width: var(--ew); display: grid; justify-items: center; align-content: start; gap: 1.4rem;
    margin-top: calc(50dvh - var(--ew) / 3); padding-bottom: 2rem; perspective: 1400px; }
  .gate__wrap > * { min-width: 0; max-width: 100%; }
  .env { position: relative; width: 100%; aspect-ratio: 3 / 2; transform-style: preserve-3d;
    transform: rotateX(calc(var(--my, 0) * -8deg)) rotateY(calc(var(--mx, 0) * 12deg)); }
  /* the tilt follows the pointer every frame; only the state turns are eased */
  body[data-state="opening"] .env, body[data-state="locked"] .env { transition: transform 500ms cubic-bezier(.77,0,.175,1); }
  body[data-state="opening"] .env { transform: translateY(12vh); }   /* room above for the card to rise into */
  body[data-state="locked"] .env { transition-duration: 900ms; }

  .side { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 3px; }
  /* the front side is the envelope seen from the front: its own colour is
     the inside you glimpse once the flap is up; the pocket is drawn over it */
  .side--front { perspective: 900px; background: linear-gradient(180deg, #3a060c, #52101a);
    box-shadow: 0 50px 90px -30px rgba(0,0,0,.9); }
  .side--back { transform: rotateY(180deg); background: linear-gradient(160deg, #7a1420, #560b14); box-shadow: inset 0 0 0 1px rgba(226,196,140,.55), 0 50px 90px -30px rgba(0,0,0,.9); }
  .side--back::before { content: ""; position: absolute; inset: 0 0 42% 0; background: #6a1019; clip-path: polygon(0 0, 100% 0, 50% 100%); box-shadow: inset 0 0 0 1px rgba(226,196,140,.4); }

  /* layer order inside the front, back to front: inside, (open flap), card, pocket, (closed flap) */
  .card { position: absolute; left: 6%; right: 6%; top: 6%; height: 84%; z-index: 2; overflow: hidden; border-radius: 2px;
    background: var(--ivory); box-shadow: 0 -6px 18px rgba(0,0,0,.35); }
  .pocket { position: absolute; inset: 0; z-index: 3; border-radius: 3px;
    background: linear-gradient(160deg, #8e1a26, #6b0f19 60%, #560b14);
    clip-path: polygon(0 0, 50% 46%, 100% 0, 100% 100%, 0 100%); }
  .pocket::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(226,196,140,.55), inset 0 0 0 8px rgba(226,196,140,.12); }
  .pocket::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, rgba(255,230,190,.16) 48%, transparent 60%) calc(50% + var(--mx, 0) * 60%) 0 / 220% 100% no-repeat; }
  .flap { position: absolute; left: 0; right: 0; top: 0; height: 56%; z-index: 4; transform-origin: 50% 0; clip-path: polygon(0 0, 100% 0, 50% 100%);
    background: linear-gradient(180deg, #971d2a, #71111c); box-shadow: inset 0 1px 0 rgba(226,196,140,.5); }
  .addressee { position: absolute; inset: 50% 0 6% 0; display: grid; place-content: center; text-align: center; transition: opacity 300ms; }
  body[data-state="opening"] .addressee { opacity: 0; }
  .addressee small { letter-spacing: .3em; text-transform: uppercase; font-size: .72rem; color: #E6C98C; }
  .addressee .script { font-size: clamp(2.2rem, 8vw, 3.4rem); color: #F1D9A6; margin: .2rem 0; }
  .gold { position: absolute; left: 50%; top: 56%; width: 20%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
    background: radial-gradient(circle at 36% 32%, #fbe7b0, #d4ab5e 45%, #9a7430 80%); color: #6a4a12;
    display: grid; place-items: center; font: 400 clamp(1.3rem, 4vw, 1.9rem) "Great Vibes", cursive;
    box-shadow: inset 0 -3px 6px rgba(80,50,10,.5), 0 8px 18px rgba(0,0,0,.5); opacity: 0; transform: scale(1.7) translateZ(40px);
    transition: opacity 200ms 900ms, transform 360ms cubic-bezier(.3,1.4,.5,1) 900ms; }

  .panel { width: 100%; text-align: center; transition: opacity 300ms; }
  .panel h1, .panel h2 { margin: 0; font-weight: 600; font-size: clamp(1.4rem, 5vw, 1.8rem); color: var(--cream); }
  .panel p, .panel blockquote { margin: .5rem auto 0; color: #E2C3B6; line-height: 1.5; max-width: 32rem; }
  .panel blockquote { font-style: italic; }
  .panel .script { font-size: 2.2rem; color: #F1D9A6; margin: 0; }
  .engrave { display: flex; gap: .6rem; margin-top: 1rem; }
  .engrave input { flex: 1; min-width: 0; min-height: 48px; border: 0; border-bottom: 1px solid #D4AB5E; background: transparent; color: #F7EFDF;
    font: 400 1.5rem "Cormorant Garamond", serif; text-align: center; }
  .engrave input::placeholder { color: rgba(241,217,166,.45); font-style: italic; font-size: 1.1rem; }
  .engrave input:focus { outline: none; border-bottom-color: #F1D9A6; }
  .g-btn { min-height: 48px; padding: 0 1.4rem; border-radius: 999px; border: 1px solid #D4AB5E; background: transparent; color: #F1D9A6;
    font: 700 .78rem "Cormorant Garamond", serif; letter-spacing: .22em; text-transform: uppercase; cursor: pointer; transition: background-color 160ms, color 160ms, transform 140ms var(--ease); }
  .g-btn--fill { background: #D4AB5E; color: #3a0a10; }
  .g-btn:active { transform: scale(.97); }
  .g-btn:focus-visible, .g-link:focus-visible { outline: 2px solid #F1D9A6; outline-offset: 3px; }
  @media (hover: hover) and (pointer: fine) { .g-btn:not(.g-btn--fill):hover { background: rgba(212,171,94,.14); } }
  .row { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; margin-top: 1.1rem; }
  .g-link { background: none; border: 0; color: #F1D9A6; text-decoration: underline; text-underline-offset: 4px; font: italic 1rem "Cormorant Garamond", serif; cursor: pointer; margin-top: .6rem; }
  [data-show] { display: none; }
  body[data-state="sealed"] [data-show~="sealed"], body[data-state="name"] [data-show~="name"], body[data-state="checking"] [data-show~="name"],
  body[data-state="question"] [data-show~="question"], body[data-state="notfound"] [data-show~="notfound"],
  body[data-state="locked"] [data-show~="locked"], body[data-state="opening"] [data-show~="question"] { display: block; }
  body[data-state="opening"] .panel { opacity: 0; pointer-events: none; }

  body[data-state="locked"] .env { transform: rotateY(180deg); }
  body[data-state="locked"] .gold { opacity: 1; transform: translateZ(2px); }
  @media (prefers-reduced-motion: reduce) { .gate *, .gate *::before, .gate *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; transition-delay: 0ms !important; }
    .env, .far, .near { transform: none !important; } }


/* ===================== header additions carried over from the first site */
.skip { position: fixed; left: 1rem; top: -3rem; z-index: 250; background: var(--wine); color: var(--cream);
  padding: .5rem 1rem; border-radius: 4px; transition: top 160ms var(--ease); }
.skip:focus { top: 1rem; }
html.gate-locked .skip { display: none; }
.bar__end { display: flex; align-items: center; gap: clamp(.7rem, 2vw, 1.2rem); pointer-events: auto; }
/* the countdown carries its own maroon plate, so it reads over ivory and wine alike */
.bar-count { margin: 0; display: flex; align-items: baseline; gap: .1em; font-weight: 600; font-size: var(--sc-t-sm);
  letter-spacing: .06em; color: var(--cream); background: rgba(93, 12, 19, .94); border: 1px solid rgba(239, 185, 174, .32);
  border-radius: 999px; padding: .34em .9em .4em; box-shadow: 0 1px 2px rgba(20, 2, 4, .3);
  opacity: 0; transform: translateY(-6px); transition: opacity 500ms var(--ease), transform 500ms var(--ease); }
.bar-count.is-in { opacity: 1; transform: none; }
.bar-count i { font-style: normal; font-size: .72em; letter-spacing: .1em; opacity: .62; margin-right: .45em; }
.bar-count i:last-child { margin-right: 0; }
.bar-count.is-done { display: none; }
/* their display rules would otherwise override the hidden attribute */
.bar-count[hidden], .bgm[hidden] { display: none; }
@media (max-width: 420px) { .bar-count__s { display: none; } }
/* music: four bars that stand still until the track is playing */
.bgm { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; background: none;
  color: inherit; cursor: pointer; border-radius: 6px; }
.bgm svg { width: 1.15rem; height: auto; overflow: visible; }
.bgm__bar { fill: currentColor; opacity: .55; transform-origin: 50% 50%; }
.bgm.is-on .bgm__bar { opacity: 1; animation: bgm-pulse 1.1s cubic-bezier(.77, 0, .175, 1) infinite alternate; }
.bgm.is-on .bgm__bar:nth-child(2) { animation-delay: .18s; }
.bgm.is-on .bgm__bar:nth-child(3) { animation-delay: .36s; }
.bgm.is-on .bgm__bar:nth-child(4) { animation-delay: .54s; }
@keyframes bgm-pulse { from { transform: scaleY(.55); } to { transform: scaleY(1.35); } }
.bgm:focus-visible, .bar a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .bgm.is-on .bgm__bar { animation: none; } }
/* while the envelope is up, the header shows only the music control (once
   playing), lifted above the gate so it can be switched off */
html.gate-locked .bar { z-index: 210; color: var(--cream); }
html.gate-locked .bar::before { opacity: 0 !important; }
html.gate-locked .bar > a, html.gate-locked .bar-count, html.gate-locked .rs, html.gate-locked .bgm:not(.is-on) { visibility: hidden; }

/* ===================== the invitation's own words */
.breath { position: relative; min-height: 80vh; display: grid; place-items: center; padding: 14vh 8vw; background: var(--paper); text-align: center; overflow: hidden; }
.breath figure { position: relative; z-index: 6; margin: 0; background: var(--paper); padding: 1.2rem 1rem; }
.breath blockquote { margin: 0 auto; max-width: 20ch; font-style: italic; font-size: clamp(1.6rem, 4vw, 2.6rem); line-height: 1.3; color: var(--wine); text-wrap: balance; }
.breath figcaption { margin-top: 1rem; font-size: .82rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); }