/* ==========================================================================
   James & Elaine · In Every Lifetime
   Page styles. Tokens first (the invitation's palette and faces), then the
   envelope gate, then each act. scrollcraft.css carries the floor.
   ========================================================================== */

:root {
  --sc-canvas:     #F7F2E7;
  --sc-surface:    #FDFAF2;
  --sc-ink:        #351719;
  --sc-ink-soft:   #7E5F58;
  --sc-accent:     #8A1621;
  --sc-accent-ink: #F9F4E8;

  --sc-font-display: "Cormorant Garamond", "Times New Roman", serif;
  --sc-font-text:    "Cormorant Garamond", "Times New Roman", serif;

  /* light canvas: soft warm shadows, no dark edge-lip */
  --sc-shadow-color: 18 30% 16%;
  --sc-e1: 0 1px 2px hsl(var(--sc-shadow-color) / 0.10),
           0 2px 6px -1px hsl(var(--sc-shadow-color) / 0.08);
  --sc-e2: 0 2px 4px hsl(var(--sc-shadow-color) / 0.10),
           0 8px 18px -4px hsl(var(--sc-shadow-color) / 0.14);
  --sc-e3: 0 4px 8px hsl(var(--sc-shadow-color) / 0.10),
           0 18px 40px -8px hsl(var(--sc-shadow-color) / 0.18),
           0 48px 90px -24px hsl(var(--sc-shadow-color) / 0.16);
  --sc-edge: inset 0 1px 0 rgba(255, 255, 255, 0.65);

  /* the deep red of the invitation's inner pages */
  --je-red:      #821420;
  --je-red-deep: #5D0C13;
  --je-rose:     #EFB9AE;
  --je-paper:    #FBF6EA;
}

body { font-weight: 500; }

/* deep-red zone: tokens re-declared AND color restated (inheritance rule) */
.zone-red {
  --sc-ink:      #F7EFDF;
  --sc-ink-soft: #E2C3B6;
  --sc-accent:   #EFB9AE;
  --sc-accent-ink: #4A090F;
  --sc-surface:  #741220;
  --sc-shadow-color: 352 60% 6%;
  --sc-edge: inset 0 1px 0 rgba(255, 245, 225, 0.14);
  color: var(--sc-ink);
}

.script {
  font-family: "Great Vibes", cursive;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.1;
}
.lbl {
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
}

/* ------------------------------------------------------------- site bar -- */
.site-bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(0.9rem, 2.4vw, 1.4rem) var(--sc-gutter);
  pointer-events: none;
  transition: color var(--sc-d-slow) var(--sc-ease-out);
  color: var(--sc-ink);
}
.site-bar a { pointer-events: auto; text-decoration: none; }
.site-bar__mark {
  font-family: var(--sc-font-display); font-weight: 600;
  font-size: 1.15rem; letter-spacing: 0.14em;
}
.site-bar__mark .amp { font-family: "Great Vibes", cursive; font-weight: 400; letter-spacing: 0; }
.site-bar__rsvp {
  font-family: var(--sc-font-display); font-weight: 600;
  font-size: var(--sc-t-sm); letter-spacing: 0.2em; text-transform: uppercase;
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
html.on-red .site-bar { color: #F7EFDF; }
html.on-red [data-sc-progress] { background: var(--je-rose); }

.site-bar__end { display: flex; align-items: center; gap: clamp(0.9rem, 2vw, 1.4rem); pointer-events: auto; }

/* The countdown moves up into the chrome once its own section has passed.
   It carries its own maroon plate: the bar crosses both the red ground and
   the ivory cards, so inheriting the bar's colour would make it vanish over
   one of them. */
.bar-count {
  margin: 0; display: flex; align-items: baseline; gap: 0.1em;
  font-family: var(--sc-font-display); font-weight: 600;
  font-size: var(--sc-t-sm); letter-spacing: 0.06em;
  color: #F7EFDF;
  background: color-mix(in oklab, var(--je-red-deep) 94%, transparent);
  border: 1px solid color-mix(in oklab, var(--je-rose) 32%, transparent);
  border-radius: var(--sc-r-pill);
  padding: 0.34em 0.9em 0.4em;
  box-shadow: var(--sc-e1);
  opacity: 0; transform: translateY(-6px);
  transition: opacity var(--sc-d-slow) var(--sc-ease-out),
              transform var(--sc-d-slow) var(--sc-ease-out);
}
.bar-count.is-in { opacity: 1; transform: none; }
.bar-count i {
  font-style: normal; font-size: 0.72em; letter-spacing: 0.1em;
  opacity: 0.62; margin-right: 0.45em;
}
.bar-count i:last-child { margin-right: 0; }
.bar-count.is-done { display: none; }

/* music: four bars that stand still until the track is playing */
.bgm {
  display: grid; place-items: center;
  width: 2rem; height: 2rem; padding: 0;
  border: 0; background: none; color: inherit; cursor: pointer;
  border-radius: var(--sc-r-sm);
}
.bgm svg { width: 1.15rem; height: auto; overflow: visible; }
/* The envelope covers the whole screen, so a guest whose music just started
   on the wax seal would have no way to switch it off until they were through
   the gate. Lift the bar over the gate, but show nothing on it except the
   music control, and only once the music is actually playing. */
html.gate-locked .site-bar { z-index: 130; }
html.gate-locked .site-bar__mark,
html.gate-locked .site-bar__rsvp,
html.gate-locked .bar-count { opacity: 0; pointer-events: none; }
html.gate-locked .bgm { opacity: 0; pointer-events: none; }
html.gate-locked .bgm.is-on {
  opacity: 1; pointer-events: auto;
  transition: opacity var(--sc-d-slow) var(--sc-ease-out);
}
.bgm__bar { fill: currentColor; opacity: 0.55; transform-origin: 50% 50%; }
.bgm:hover .bgm__bar { opacity: 0.8; }
.bgm.is-on .bgm__bar { opacity: 1; animation: bgm-pulse 1.1s var(--sc-ease-in-out) infinite alternate; }
.bgm.is-on .bgm__bar:nth-child(2) { animation-delay: 0.18s; }
.bgm.is-on .bgm__bar:nth-child(3) { animation-delay: 0.36s; }
.bgm.is-on .bgm__bar:nth-child(4) { animation-delay: 0.54s; }
@keyframes bgm-pulse { from { transform: scaleY(0.55); } to { transform: scaleY(1.35); } }
@media (prefers-reduced-motion: reduce) {
  .bgm.is-on .bgm__bar { animation: none; }
}

.skip {
  position: fixed; left: 1rem; top: -3rem; z-index: 200;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  padding: 0.5rem 1rem; border-radius: var(--sc-r-sm);
  transition: top 160ms var(--sc-ease-out);
}
.skip:focus-visible { top: 1rem; }

/* ==================================================================== gate
   The envelope. The page's front door and its signature move.            */
html.gate-locked { overflow: hidden; }

.gate {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center;
  background:
    radial-gradient(120% 90% at 50% 30%, #FAF5E9 0%, #F1EAD8 58%, #E7DCC2 100%);
  transition: opacity 900ms var(--sc-ease-out);
}
.gate::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}
.gate.is-leaving { opacity: 0; pointer-events: none; }

.gate__inner { position: relative; z-index: 1; width: min(46rem, 94vw); text-align: center; }

.env {
  position: relative;
  width: min(42rem, 92vw);
  aspect-ratio: 1.58;
  margin-inline: auto;
  background: linear-gradient(176deg, #FCF8EE 0%, var(--je-paper) 52%, #F3EBD8 100%);
  border: 1px solid color-mix(in oklab, var(--sc-ink) 14%, transparent);
  border-radius: 6px;
  box-shadow: var(--sc-e3), var(--sc-edge);
  transform-style: preserve-3d;
}

/* the letter inside, revealed when the flap opens */
.env__letter {
  position: absolute; left: 7%; right: 7%; top: 6%; bottom: 14%;
  background: #FDFBF3;
  border: 1px solid color-mix(in oklab, var(--sc-accent) 30%, transparent);
  box-shadow: var(--sc-e2);
  z-index: 1;
  display: grid; justify-items: center; align-content: start; gap: 0.4rem;
  padding: clamp(1.4rem, 4vw, 2.2rem) 1.2rem 1.2rem;
  text-align: center;
  opacity: 0;
  transform: translateY(6%);
  transition: transform 900ms var(--sc-ease-out) 350ms, opacity 500ms var(--sc-ease-out) 350ms;
}
.env__letter .script { font-size: clamp(1.9rem, 5.4vw, 2.8rem); color: var(--sc-accent); }
.env__letter p { margin: 0; }
.env__letter .lbl { letter-spacing: 0.26em; }

/* front pocket: two side folds and a bottom fold, drawn as gradients */
.env__pocket {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: 6px;
  background:
    linear-gradient(115deg, #F8F2E2 0%, #F8F2E2 26%, transparent 26.5%),
    linear-gradient(245deg, #F8F2E2 0%, #F8F2E2 26%, transparent 26.5%),
    linear-gradient(0deg,   #FAF5E7 0%, #FAF5E7 34%, transparent 60%);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,0.6);
}
.env__pocket::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(115deg, transparent 25.8%, rgba(66,31,26,0.10) 26%, transparent 27.2%),
    linear-gradient(245deg, transparent 25.8%, rgba(66,31,26,0.10) 26%, transparent 27.2%);
}

/* the flap */
.env__flap {
  position: absolute; inset: 0 0 auto 0; height: 56%; z-index: 3;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: linear-gradient(184deg, #F6EFDE 4%, #EFE6CE 70%, #E9DDC0 100%);
  border-radius: 6px 6px 0 0;
  transform-origin: 50% 0;
  transition: transform 850ms var(--sc-ease-in-out);
  backface-visibility: hidden;
}
.env__flap::after {
  content: ""; position: absolute; inset: 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: linear-gradient(184deg, transparent 55%, rgba(66, 31, 26, 0.08) 98%);
}

/* postmark, upper left */
.env__postmark {
  position: absolute; left: 5%; top: 9%; width: 21%; z-index: 4;
  color: color-mix(in oklab, var(--sc-ink) 38%, transparent);
  pointer-events: none;
}

/* the wax seal */
.env__seal {
  position: absolute; left: 50%; top: 56%; z-index: 5;
  width: clamp(72px, 17%, 104px); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 0; padding: 0; background: none; cursor: pointer;
  filter: drop-shadow(0 3px 6px rgba(53, 23, 25, 0.35));
  transition: transform 200ms var(--sc-ease-out);
}
.env__seal:hover { transform: translate(-50%, -50%) scale(1.04); }
.env__seal:active { transform: translate(-50%, -50%) scale(0.97); }
.env__seal svg { width: 100%; height: 100%; }
.env__seal-half { transition: transform 700ms var(--sc-ease-in-out), opacity 500ms var(--sc-ease-out) 150ms; }

/* the address block on the front */
.env__address {
  position: absolute; left: 10%; right: 10%; bottom: 7%; z-index: 4;
  min-height: 34%;
  display: grid; align-content: end; justify-items: center; gap: 0.5rem;
  text-align: center;
}
.env__to { font-size: clamp(1.7rem, 4.6vw, 2.4rem); color: var(--sc-ink); margin: 0; }
.env__tap { margin: 0; }

.env__form { display: grid; justify-items: center; gap: 0.65rem; width: 100%; }
.env__form label { cursor: pointer; }
.env__input {
  width: min(24rem, 86%);
  border: 0; border-bottom: 1px solid color-mix(in oklab, var(--sc-ink) 40%, transparent);
  background: transparent;
  text-align: center;
  font-family: "Great Vibes", cursive;
  font-size: clamp(1.5rem, 4.2vw, 2rem);
  color: var(--sc-ink);
  padding: 0.1em 0.4em 0.18em;
  border-radius: 0;
}
.env__input::placeholder { color: color-mix(in oklab, var(--sc-ink) 38%, transparent); font-size: 0.72em; letter-spacing: 0.04em; }
.env__input:focus-visible { outline: none; border-bottom-color: var(--sc-accent); box-shadow: 0 1px 0 var(--sc-accent); }
.env__open {
  font-family: var(--sc-font-display); font-weight: 600;
  font-size: var(--sc-t-sm); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--sc-accent-ink); background: var(--sc-accent);
  border: 0; border-radius: var(--sc-r-sm);
  padding: 0.62rem 1.6rem; cursor: pointer;
  transition: transform 140ms var(--sc-ease-out), background 140ms var(--sc-ease-out);
}
.env__open:hover { background: #9C1B27; }
.env__open:active { transform: translateY(1px) scale(0.98); }

.env__hint { min-height: 1.4em; margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); font-style: italic; }
.env__hint a { color: var(--sc-accent); }

.gate__whisper { margin-top: var(--sc-6); color: var(--sc-ink-soft); font-style: italic; }

/* gate states */
.gate[data-state="asking"] .env__to { display: none; }
.gate[data-state="sealed"] .env__form { display: none; }
.gate[data-state="asking"] .env__seal,
.gate[data-state="opening"] .env__seal {
  pointer-events: none;
  transform: translate(-50%, -175%) scale(0.85);
  transition: transform 520ms var(--sc-ease-in-out);
}

.gate[data-state="opening"] .env__flap { transform: rotateX(-168deg); }
.gate[data-state="opening"] .env__seal { pointer-events: none; }
.gate[data-state="opening"] .env__seal .seal-left  { transform: translate(-14%, 4%) rotate(-14deg); opacity: 0; }
.gate[data-state="opening"] .env__seal .seal-right { transform: translate(14%, 6%) rotate(12deg); opacity: 0; }
.gate[data-state="opening"] .env__letter { opacity: 1; transform: translateY(-60%); }
@media (max-width: 640px) {
  .gate[data-state="opening"] .env__letter { transform: translateY(-76%); }
}
.gate[data-state="opening"] .env__address,
.gate[data-state="opening"] .env__postmark { opacity: 0; transition: opacity 400ms var(--sc-ease-out); }
.gate[data-state="opening"] .gate__whisper { opacity: 0; transition: opacity 400ms var(--sc-ease-out); }

.env.shake { animation: env-shake 340ms var(--sc-ease-out); }
@keyframes env-shake {
  0%, 100% { translate: 0 0; }
  25% { translate: -7px 0; }
  55% { translate: 6px 0; }
  80% { translate: -3px 0; }
}

/* hero entrance, played the moment the envelope opens */
.hero-line { display: block; }
body:not(.revealed) .hero-enter .hero-line,
body:not(.revealed) .hero-enter .hero-sub {
  opacity: 0; transform: translateY(0.35em);
}
body.revealed .hero-enter .hero-line,
body.revealed .hero-enter .hero-sub {
  opacity: 1; transform: none;
  transition: opacity 800ms var(--sc-ease-out), transform 800ms var(--sc-ease-out);
}
body.revealed .hero-enter .hero-line:nth-child(2) { transition-delay: 120ms; }
body.revealed .hero-enter .hero-line:nth-child(3) { transition-delay: 240ms; }
body.revealed .hero-enter .hero-sub { transition-delay: 420ms; }

/* ==================================================================== hero */
.hero .sc-copy--lead { bottom: clamp(2.5rem, 9vh, 7rem); }
.hero__kicker { font-size: clamp(1.9rem, 4.5vw, 2.9rem); color: var(--sc-accent); margin: 0 0 0.2em; }
.hero h1 { font-weight: 600; letter-spacing: 0.02em; }
.hero h1 .hero-line { line-height: 0.98; }
.hero h1 .amp {
  font-family: "Great Vibes", cursive; font-weight: 400;
  font-size: 0.52em; display: block; line-height: 1;
  color: var(--sc-accent); margin: 0.06em 0 0.02em 1.6em;
}
.hero__date { margin-top: var(--sc-4); font-size: var(--sc-t-lg); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; }
.hero__date .sep { color: var(--sc-accent); padding-inline: 0.45em; }
.hero .sc-scrim--lead {
  background: linear-gradient(to top right,
    color-mix(in oklab, var(--sc-canvas) 98%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 88%, transparent) 34%,
    color-mix(in oklab, var(--sc-canvas) 46%, transparent) 58%,
    transparent 78%);
}
@media (max-width: 860px) {
  .hero .sc-scrim--lead {
    background: linear-gradient(to top,
      color-mix(in oklab, var(--sc-canvas) 96%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 80%, transparent) 26%,
      color-mix(in oklab, var(--sc-canvas) 34%, transparent) 48%,
      transparent 62%);
  }
}
@media (max-width: 700px) {
  .hero h1 { font-size: var(--sc-t-2xl); }
}

/* ==================================================================== past */
.past .sc-stage { display: grid; align-items: center; }
.past__grid {
  width: 100%; max-width: var(--sc-maxw); margin-inline: auto;
  padding-inline: var(--sc-gutter);
  display: grid; grid-template-columns: minmax(0, 54%) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
/* A pile of prints that scatters across the table as you scroll.
   --p rides the act's own progress, so the hand does the spreading. */
.past__prints {
  position: relative;
  width: 100%; aspect-ratio: 1.04;
  --p: var(--sc-p, 0);
}
.print {
  background: var(--sc-surface);
  padding: clamp(0.4rem, 0.9vw, 0.7rem) clamp(0.4rem, 0.9vw, 0.7rem) clamp(1.3rem, 2.4vw, 1.9rem);
  box-shadow: var(--sc-e2);
  border: 1px solid color-mix(in oklab, var(--sc-ink) 8%, transparent);
}
.print img { width: 100%; height: auto; }

.past__prints .print {
  position: absolute; left: 50%; top: 50%;
  width: var(--w, 32%);
  margin: 0;
  translate: -50% -50%;
  transform:
    translate(calc(var(--x, 0%) * var(--p) * var(--k, 1)),
              calc(var(--y, 0%) * var(--p) * var(--k, 1)))
    rotate(calc(var(--r, 0deg) * var(--p) + var(--r0, 0deg) * (1 - var(--p))));
  z-index: calc(20 - var(--z, 1));
}
.past__prints .print--hero { box-shadow: var(--sc-e3); }

/* belongs to the pile: it is there while the memories are stacked,
   and it leaves as they spread across the table */
.past__note {
  position: absolute; left: 50%; bottom: 24%;
  translate: -50% 0;
  transform: rotate(-2.5deg);
  white-space: nowrap; margin: 0;
  font-size: clamp(1.3rem, 2.4vw, 1.8rem); color: var(--sc-ink-soft);
  opacity: max(0, calc(1 - var(--p) * 2.2)); z-index: 21;
}
.past__copy .lbl { display: block; margin-bottom: var(--sc-3); }
.past__title { font-size: clamp(2.6rem, 5vw, 3.9rem); color: var(--sc-accent); margin: 0 0 var(--sc-5); }
.past__copy p.line { font-size: var(--sc-t-xl); line-height: 1.3; font-weight: 500; margin: 0 0 var(--sc-4); max-width: 24ch; text-wrap: pretty; }
/* The motto belongs to the past, but it outlives the section: it holds
   through the hand-off and settles at the foot of the screen while the
   present travels past, then leaves before the breath. Page-driven, not
   act-driven, which is the whole point. */
.motto {
  position: fixed; z-index: 30; margin: 0;
  pointer-events: none; visibility: hidden;
  width: min(26rem, 40vw);
  --mx0: 71vw; --my0: 66vh;
  --mx1: 50vw; --my1: 88vh;
  left: calc(var(--mx0) + (var(--mx1) - var(--mx0)) * var(--t, 0));
  top:  calc(var(--my0) + (var(--my1) - var(--my0)) * var(--t, 0));
  transform: translate(-50%, -50%) scale(calc(1 - 0.46 * var(--t, 0)));
  opacity: var(--o, 0);
  font-family: var(--sc-font-display);
  font-style: italic; font-weight: 600;
  font-size: var(--sc-t-2xl); line-height: 1.14;
  letter-spacing: var(--sc-track-snug);
  color: var(--sc-accent);
  text-align: center; text-wrap: balance;
}
/* a soft ivory ground, but only once it is riding over the photographs */
.motto span { position: relative; z-index: 1; }
.motto::before {
  content: ""; position: absolute; inset: -0.7em -1.4em; z-index: 0;
  background: radial-gradient(closest-side,
    color-mix(in oklab, var(--sc-canvas) 92%, transparent) 40%, transparent 100%);
  opacity: var(--t, 0);
}
@media (max-width: 860px) {
  .past__grid { grid-template-columns: 1fr; gap: 1.2rem; padding-top: 3rem; }
  .past__prints { width: 84%; margin-inline: auto; aspect-ratio: 0.94; --k: 0.78; }
  .past__copy p.line { font-size: var(--sc-t-lg); }
  .motto {
    width: min(20rem, 80vw); font-size: var(--sc-t-xl);
    --mx0: 50vw; --my0: 80vh; --mx1: 50vw; --my1: 91vh;
  }
  .cd { min-width: 3.4rem; }
  .peak__count { gap: 1rem 1.4rem; }
  .bar-count { font-size: var(--sc-t-xs); }
}
@media (max-width: 430px) {
  /* a phone bar has room for the shape of the countdown, not the seconds */
  .bar-count__s { display: none; }
}

/* ================================================================= present */
.present .sc-stage { display: grid; align-items: center; }
.rail { align-items: center; gap: clamp(1.2rem, 3vw, 2.6rem); padding-inline: var(--sc-gutter); }
.rail__lead { flex: 0 0 auto; width: min(30rem, 78vw); }
.rail__lead .lbl { display: block; margin-bottom: var(--sc-3); }
.rail__title { font-size: clamp(2.6rem, 5vw, 3.9rem); color: var(--sc-accent); margin: 0 0 var(--sc-4); }
.rail__lead h2 { margin: 0 0 var(--sc-4); }
/* the present rides in the same polaroid frames, pinned up unevenly */
.moment {
  flex: 0 0 auto; margin: 0;
  rotate: var(--r, 0deg);
  translate: 0 var(--dy, 0px);
}
.moment img {
  height: calc(clamp(17rem, 48vh, 26rem) * var(--h, 1)); width: auto;
}
.rail__end { flex: 0 0 auto; width: 16rem; }
.rail__end p { font-size: clamp(1.6rem, 3vw, 2.1rem); color: var(--sc-ink-soft); }
@media (prefers-reduced-motion: no-preference) {
  .moment {
    opacity: max(0.55, min(1, calc((var(--sc-p, 1) * 3.2) - var(--i, 0) * 0.45)));
    translate: 0 calc(var(--dy, 0px) + max(0, min(1, calc(1 - ((var(--sc-p, 1) * 3.2) - var(--i, 0) * 0.45)))) * 14px);
  }
}

/* ================================================================== breath */
.breath {
  min-height: 64vh;
  display: grid; place-content: center; text-align: center;
  padding-block: var(--sc-9);
}
.breath .lbl { margin-bottom: var(--sc-5); }
.breath blockquote {
  margin: 0; font-family: var(--sc-font-display); font-style: italic; font-weight: 500;
  font-size: clamp(1.5rem, 3.4vw, 2.4rem); line-height: 1.35; max-width: 26ch;
}

/* ==================================================================== peak */
.peak .sc-stage { background: #EDE2CC; }
.red-flood {
  position: absolute; inset: 0;
  background:
    radial-gradient(130% 100% at 50% 0%, #8F1824 0%, var(--je-red) 55%, #6B0E17 100%);
}
.red-flood::before, .red-flood::after {
  position: absolute; font-family: var(--sc-font-display); font-weight: 600;
  color: rgba(247, 239, 223, 0.09); line-height: 0.8; pointer-events: none;
}
.red-flood::before { content: "J"; top: -0.08em; left: 0.02em; font-size: clamp(16rem, 38vw, 34rem); }
.red-flood::after  { content: "E"; bottom: -0.1em; right: 0.02em; font-size: clamp(16rem, 38vw, 34rem); }
.peak .sc-copy--center { width: 100%; max-width: min(60rem, 92vw); }
.peak__kicker { font-size: clamp(2rem, 5vw, 3rem); color: var(--je-rose); margin: 0 0 0.3em; }
.peak__date {
  font-size: clamp(3.6rem, 11vw, 8.5rem); font-weight: 600; letter-spacing: 0.04em;
  color: #F7EFDF; line-height: 1;
}
.peak__day { margin-top: var(--sc-4); font-size: var(--sc-t-lg); letter-spacing: 0.18em; text-transform: uppercase; color: #EAD9C4; }
/* the countdown, set as three quiet dials under the date */
.peak__count {
  margin-top: clamp(1.8rem, 4vw, 3rem);
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: clamp(1.4rem, 5vw, 3.4rem);
}
.cd { display: grid; justify-items: center; gap: 0.3rem; min-width: 4.5rem; }
.cd__n {
  font-family: var(--sc-font-display); font-weight: 600;
  font-size: clamp(2.2rem, 5.4vw, 3.4rem); line-height: 1;
  color: #F7EFDF;
}
.cd__l {
  font-size: var(--sc-t-xs); letter-spacing: 0.2em; text-transform: uppercase;
  color: #E2C3B6;
}
.cd__note {
  flex-basis: 100%; margin: 0;
  font-family: "Great Vibes", cursive; font-size: clamp(2rem, 5vw, 3rem);
  color: #F7EFDF;
}
.peak__count.is-done .cd { display: none; }

/* ==================================== admin: the printed invitation suite */
.admin { padding-block: clamp(2.5rem, 5vw, 4rem); }
.admin .sc-wrap + .sc-wrap { margin-top: clamp(2rem, 3.6vw, 3rem); }
.card-wrap { display: grid; justify-items: center; }

.card {
  width: min(46rem, 100%);
  background: linear-gradient(178deg, #FCF8EE 0%, #F8F2E2 60%, #F3EBD8 100%);
  box-shadow: var(--sc-e3);
  padding: clamp(0.8rem, 2vw, 1.2rem);
  text-align: center;
}
.card--ivory {
  --sc-ink: #571117; --sc-ink-soft: #86564C;
  --sc-accent: #8A1621; --sc-accent-ink: #F9F4E8;
  --sc-edge: inset 0 1px 0 rgba(255, 255, 255, 0.65);
  color: var(--sc-ink);
}
.card--red {
  width: min(50rem, 100%);
  background: linear-gradient(178deg, #7E1321 0%, #6E101B 55%, #5F0E17 100%);
  --sc-ink: #F7EFDF; --sc-ink-soft: #E2C3B6;
  --sc-accent: #EFB9AE; --sc-accent-ink: #4A090F;
  color: var(--sc-ink);
}
.card__frame {
  border: 1px solid color-mix(in oklab, currentColor 40%, transparent);
  outline: 1px solid color-mix(in oklab, currentColor 16%, transparent);
  outline-offset: 3px;
  padding: clamp(1.5rem, 3.4vw, 2.2rem) clamp(1.1rem, 4vw, 2.4rem);
}
.card__title {
  font-size: clamp(2.1rem, 4.8vw, 3rem);
  color: var(--sc-accent); margin: 0 0 var(--sc-4); font-weight: 400;
}
.card--red .card__title { color: #F3E2CE; }
.card__mono { font-size: 1.9rem; color: color-mix(in oklab, currentColor 55%, transparent); margin: 0 0 -0.5rem; }

.card .lbl { display: block; color: var(--sc-accent); font-weight: 700; margin-bottom: var(--sc-2); }
.card--ivory .lbl { color: var(--sc-accent); }
.lbl--standalone { margin: calc(-1 * var(--sc-3)) 0 var(--sc-5); }

.card__block > h3 {
  font-family: var(--sc-font-display); font-weight: 600;
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  margin: 0 0 var(--sc-1); text-wrap: balance;
}
.card__block > p { margin: 0 auto var(--sc-2); color: var(--sc-ink-soft); max-width: 46ch; text-wrap: pretty; }
.card__block .addr { font-size: var(--sc-t-sm); letter-spacing: 0.05em; }
.maps {
  display: inline-block; margin-top: var(--sc-2);
  font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  font-size: var(--sc-t-xs); color: var(--sc-accent);
  text-underline-offset: 0.3em;
}
.card__rule {
  width: clamp(4rem, 9vw, 6rem); height: 1px;
  background: color-mix(in oklab, currentColor 38%, transparent);
  margin: clamp(1.5rem, 3vw, 2.1rem) auto;
}
.qr {
  width: clamp(4rem, 6.6vw, 4.8rem); height: auto;
  display: block; margin: var(--sc-2) auto 0;
  border: 4px solid #FCF8EE;
  box-shadow: var(--sc-e1);
}
.qr-cap {
  margin: var(--sc-1) 0 0; font-size: var(--sc-t-xs);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sc-ink-soft);
}
.ent-fold summary {
  list-style: none; cursor: pointer;
  margin-top: clamp(1.5rem, 3vw, 2rem);
  padding: 0.7rem 1rem;
}
.ent-fold summary::-webkit-details-marker { display: none; }
.ent-fold summary .lbl { color: var(--je-rose); display: inline; }
.ent-fold summary .lbl::after { content: "  ▾"; }
.ent-fold[open] summary .lbl::after { content: "  ▴"; }
@media (min-width: 861px) {
  .ent-fold summary { display: none; }
}

/* the invitation's own artwork, lifted from the PDF */
.card--details { width: min(52rem, 100%); }
.card__row {
  display: grid; grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(0.8rem, 2.5vw, 1.8rem); align-items: center;
}
.card__art { width: 100%; max-width: 14rem; height: auto; justify-self: center; }
.card__row--flip .card__art { order: 2; }
.card__figures { width: min(19rem, 76%); height: auto; margin: var(--sc-3) auto 0; display: block; }
.card__figures--wide { width: min(23.5rem, 92%); }
.card__bows { width: clamp(7.5rem, 20vw, 9.5rem); height: auto; margin: 0 auto; display: block; }
.card__medallions { width: min(16rem, 64%); height: auto; margin: clamp(1rem, 2.2vw, 1.5rem) auto; display: block; }
.card__watermark {
  position: absolute; left: 50%; top: 54%; translate: -50% -50%;
  width: min(80%, 34rem); height: auto;
  opacity: 0.11; pointer-events: none;
}
.card--red .card__frame { position: relative; overflow: clip; }
.card--red .card__frame > :not(.card__watermark) { position: relative; z-index: 1; }

/* cards settle onto the table as they arrive */
.card-wrap { --settle: 0deg; }
@media (prefers-reduced-motion: no-preference) {
  .card-wrap[data-sc-in] { transform: translate3d(0, 30px, 0) rotate(calc(var(--settle) - 1.1deg)); }
  .card-wrap[data-sc-in].sc-in { transform: rotate(var(--settle)); }
}

.sched { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sc-3) clamp(1.4rem, 4vw, 2.8rem); }
.sched time { display: block; font-weight: 600; font-size: var(--sc-t-lg); font-variant-numeric: tabular-nums; }
.sched span { font-style: italic; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.countline { margin: var(--sc-4) 0 0; font-style: italic; color: var(--sc-ink-soft); }
.countline strong { color: var(--sc-ink); font-variant-numeric: tabular-nums; }

.warn {
  margin: var(--sc-5) auto 0; max-width: 44ch;
  font-size: var(--sc-t-xs); font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--sc-accent);
}
.swatch-row { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(0.9rem, 2vw, 1.5rem); margin-top: var(--sc-3); }
.swatch {
  display: grid; justify-items: center; gap: 0.5rem;
  font-size: var(--sc-t-xs); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--sc-ink-soft);
}
.swatch i {
  width: clamp(2.4rem, 4.6vw, 3rem); aspect-ratio: 1; border-radius: 50%;
  border: 2px solid color-mix(in oklab, currentColor 30%, transparent);
  box-shadow: var(--sc-e1);
}

/* entourage, on the red card */
.ent-group { margin-top: clamp(1.7rem, 3.4vw, 2.3rem); padding-top: clamp(1.5rem, 3vw, 2rem); border-top: 1px solid color-mix(in oklab, currentColor 18%, transparent); }
.ent-group--first { margin-top: 0; padding-top: 0; border-top: 0; }
.ent-group p { margin: 0 0 var(--sc-1); font-size: var(--sc-t-sm); }
.ent-duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-4) clamp(1.4rem, 4vw, 3rem); }
.ent-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sc-4) clamp(1rem, 3vw, 2rem); }
.ent-pairs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-1) clamp(1.6rem, 4vw, 3rem); }
.ent-pairs p:nth-child(odd) { text-align: right; }
.ent-pairs p:nth-child(even) { text-align: left; }
.sub { font-style: italic; color: var(--sc-ink-soft); font-size: var(--sc-t-xs); margin-bottom: var(--sc-1); }

/* the film */
.h-script { font-size: clamp(2.8rem, 6vw, 4.2rem); color: var(--je-rose); margin: 0 0 var(--sc-5); font-weight: 400; }
.film-block { text-align: center; }
.film-block video {
  width: 100%; max-width: 44rem; margin-inline: auto;
  border: 6px solid rgba(247, 239, 223, 0.12);
  box-shadow: var(--sc-e3);
  background: #000;
}

/* =================================================================== close */
.close-act .sc-copy--center {
  max-width: min(52rem, 92vw);
  top: auto; bottom: clamp(4.5rem, 13vh, 9rem);
  translate: -50% 0;
}
.close__kicker {
  font-size: clamp(3.4rem, 9vw, 6.5rem); font-weight: 400;
  color: #F7EFDF; margin: 0 0 0.2em;
  text-shadow: 0 1px 28px rgba(50, 5, 9, 0.55);
}
.btn-rsvp {
  display: inline-block; margin-top: var(--sc-6);
  background: #F7EFDF; color: #5D0C13;
  font-family: var(--sc-font-display); font-weight: 700;
  font-size: var(--sc-t-base); letter-spacing: 0.26em; text-transform: uppercase;
  text-decoration: none;
  padding: 1rem 2.6rem; border-radius: var(--sc-r-sm);
  box-shadow: var(--sc-e2);
  transition: transform 140ms var(--sc-ease-out), background 140ms var(--sc-ease-out);
}
.btn-rsvp:hover { background: #FFFDF6; }
.btn-rsvp:active { transform: translateY(1px) scale(0.98); }
.close__tag { margin-top: var(--sc-5); color: #E2C3B6; letter-spacing: 0.08em; font-style: italic; }
.close-act .sc-scrim--band {
  background: linear-gradient(to top,
    color-mix(in oklab, #40070C 96%, transparent) 0%,
    color-mix(in oklab, #40070C 84%, transparent) 30%,
    color-mix(in oklab, #40070C 48%, transparent) 56%,
    transparent 76%);
}
.close-act .sc-scrim--vignette {
  background: radial-gradient(120% 90% at 50% 42%, transparent 42%, rgba(48, 6, 10, 0.55) 100%);
}
.foot {
  position: absolute; inset: auto 0 0 0; z-index: 21;
  display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; align-items: baseline; justify-content: center;
  padding: 1.1rem var(--sc-gutter);
  color: #DDBFB2; font-size: var(--sc-t-xs); letter-spacing: 0.12em; text-transform: uppercase;
}
.foot p { margin: 0; }

/* ------------------------------------------------------------- responsive */
@media (max-width: 860px) {
  /* the engine resets .sc-copy inset-inline below 860px; clear the centering
     translate too, or the block shifts half its width off the left edge */
  .peak .sc-copy--center {
    left: var(--sc-gutter); right: var(--sc-gutter);
    top: 50%; translate: 0 -50%; text-align: center;
  }
  .close-act .sc-copy--center {
    left: var(--sc-gutter); right: var(--sc-gutter);
    top: auto; bottom: clamp(4rem, 11vh, 7rem); translate: 0 0; text-align: center;
  }
  .ent-duo { grid-template-columns: 1fr; }
  .ent-trio { grid-template-columns: 1fr; }
  /* a phone has no room for a viewport-tall polaroid: size it by width */
  .moment img { height: auto; width: calc(min(68vw, 18rem) * var(--h, 1)); }
  .card__row { grid-template-columns: 1fr; }
  .card__row--flip .card__art { order: 0; }
  .card__art { max-width: 11.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .env.shake { animation: none; }
  .env__flap, .env__letter, .env__seal-half { transition-duration: 1ms; }
  .gate { transition-duration: 200ms; }
  body:not(.revealed) .hero-enter .hero-line,
  body:not(.revealed) .hero-enter .hero-sub { transform: none; }
  .moment { opacity: 1 !important; translate: 0 var(--dy, 0px) !important; }
  /* the pile is the navigation here: show it already scattered */
  .past__prints { --p: 1; }
}