/* The Formhouse Passport: only what is unique to the unified app.
   Formhouse near-black and electric blue as the base; gold is kept for the visa and membership,
   violet for the crew. Shared pieces come from shared/passport.css, club.css and crew.css. */

/* ---------------------------------------------------------------- Zones: accent overrides */

/* The visa and everything it opens speaks in gold */
[data-screen='club'], #visa, #classup, #members, #letter, .pw {
  --accent: var(--gold);
  --accent-hi: color-mix(in srgb, var(--gold) 70%, var(--text));
  --accent-dim: color-mix(in srgb, var(--gold) 14%, transparent);
}
/* The crew speaks in violet, like a night out */
[data-screen='crew'], [data-screen='invite'], #overtake {
  --accent: var(--violet);
  --accent-hi: color-mix(in srgb, var(--violet) 62%, var(--text));
  --accent-dim: color-mix(in srgb, var(--violet) 16%, transparent);
}

.eyebrow--gold { color: var(--gold); }

.btn--gold {
  background: linear-gradient(110deg, color-mix(in srgb, var(--gold) 70%, var(--text)), var(--gold) 45%, color-mix(in srgb, var(--gold) 72%, var(--ink-0)));
  border-color: transparent; color: var(--ink-0);
  box-shadow: 0 10px 30px -10px var(--gold), inset 0 1px 0 color-mix(in srgb, var(--text) 45%, transparent);
}
.btn--crew { background: var(--crew-gradient); border-color: transparent; color: var(--ink-0); box-shadow: 0 10px 30px -12px var(--violet); }

/* ---------------------------------------------------------------- Brief: chapter labels and the chapter jump */

.brief__ch {
  display: block; margin-bottom: 0.25rem;
  font-family: var(--font-mono); font-size: var(--fs-page-xs); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-hi);
}
.brief__steps li.is-done .brief__ch { color: var(--text-3); }

.chapters { order: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.chapters__label { grid-column: 1 / -1; font-size: var(--fs-page-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
.chapters__btn {
  display: grid; gap: 0.15rem; align-content: start; text-align: left;
  min-height: var(--tap-min); padding: 0.7rem 0.85rem; border-radius: 14px;
  border: 1px solid var(--line-strong); background: var(--glass);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.chapters__btn b { font-size: var(--fs-page-sm); }
.chapters__btn small { font-size: var(--fs-page-xs); color: var(--text-3); line-height: 1.35; }
.chapters__btn:hover { border-color: var(--accent); background: var(--accent-dim); }
.chapters__btn[aria-current='step'] { border-color: var(--accent); background: var(--accent-dim); box-shadow: inset 0 0 0 1px var(--accent); }

/* Headings that receive focus when a screen opens are not controls: no ring on them */
[tabindex='-1']:focus-visible { outline: none; }

/* ---------------------------------------------------------------- Passport home */

.founder-chip {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding-left: var(--sp-3); border-left: 1px solid var(--line-strong);
  font-size: var(--fs-2xs); letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-2);
}
.founder-chip:empty { display: none; }
.founder-chip svg { width: 1.2em; height: 1.2em; color: var(--blue-hi); }

.scores {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-4); margin-bottom: var(--sp-3);
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--blue-dim), transparent 60%), var(--glass);
}
.score { display: grid; gap: var(--sp-1); align-content: start; min-width: 0; }
.score + .score { padding-left: var(--sp-4); border-left: 1px solid var(--line); }
.score__k { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-2xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); }
.score__k i { display: inline-flex; align-items: center; gap: 2px; font-style: normal; font-size: 0.9em; letter-spacing: 0.08em; color: var(--text-4); }
.score__k i svg { width: 1em; height: 1em; }
.score b { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.score--miles b { background: linear-gradient(95deg, var(--text) 30%, var(--blue-hi)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.score small { font-size: var(--fs-2xs); line-height: 1.4; color: var(--text-3); }
.scores__note { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.scores__note svg { flex: none; width: 1.2em; height: 1.2em; color: var(--blue-hi); }

.next-ch {
  position: relative; display: grid; gap: 2px; width: 100%; text-align: left;
  padding: var(--sp-4) calc(var(--sp-4) + 12cqw) var(--sp-4) var(--sp-4); margin-bottom: var(--sp-4);
  border-radius: var(--r-lg); border: 1px solid var(--blue-line);
  background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--blue) 26%, transparent), transparent 60%), var(--ink-2);
  animation: reveal var(--t-slow) var(--ease-out) both;
}
.next-ch[hidden] { display: none; }
.next-ch__k { font-size: var(--fs-2xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue-hi); }
.next-ch b { font-size: var(--fs-lg); letter-spacing: -0.02em; }
.next-ch small { font-size: var(--fs-xs); color: var(--text-3); }
.next-ch__go {
  position: absolute; right: var(--sp-4); top: 50%; translate: 0 -50%;
  display: grid; place-items: center; width: 10cqw; height: 10cqw; border-radius: 50%;
  background: var(--blue); color: var(--ink-0); box-shadow: 0 0 24px -4px var(--blue);
}
.next-ch__go svg { width: 50%; height: 50%; }
[data-screen='club'] .next-ch { border-color: color-mix(in srgb, var(--gold) 40%, transparent); }

.vstrip, .visa-strip {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-3); align-items: center;
  width: 100%; text-align: left; padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md); border: 1px dashed var(--line-strong); background: var(--glass);
}
.visa-strip.is-issued {
  border-style: solid; border-color: color-mix(in srgb, var(--gold) 45%, transparent);
  background: linear-gradient(110deg, color-mix(in srgb, var(--gold) 16%, transparent), transparent 70%), var(--glass);
}
.vstrip__ic { display: grid; place-items: center; width: 9cqw; height: 9cqw; border-radius: 50%; background: var(--glass-strong); color: var(--text-3); }
.visa-strip.is-issued .vstrip__ic { background: var(--gold); color: var(--ink-0); }
.vstrip__ic svg { width: 50%; height: 50%; }
.vstrip__copy b { display: block; font-size: var(--fs-sm); }
.visa-strip.is-issued .vstrip__copy b { color: var(--gold); }
.vstrip__copy small { display: block; font-size: var(--fs-2xs); color: var(--text-3); margin-top: 2px; }
.vstrip__dots { display: flex; gap: 4px; }
.vstrip__dots i { width: 2.4cqw; min-width: 8px; aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--text-4); }
.vstrip__dots i.is-on { background: var(--blue-hi); border-color: var(--blue-hi); box-shadow: 0 0 8px var(--blue); }
.vstrip__go { width: 5cqw; color: var(--gold); }

.tool--plain { grid-template-columns: auto 1fr; column-gap: var(--sp-3); align-items: center; min-height: 0; }
.tool--plain > span { grid-row: span 2; margin: 0; }

/* ---------------------------------------------------------------- Founder: the passport opens */

.fd {
  position: relative; min-height: 100%; isolation: isolate; overflow: hidden;
  display: grid; grid-template-rows: 1fr auto; gap: var(--sp-5);
  padding: calc(var(--safe-top) + var(--sp-4)) var(--sp-5) calc(var(--safe-bottom) + var(--sp-6));
  background: radial-gradient(90% 55% at 50% 30%, color-mix(in srgb, var(--blue) 22%, transparent), transparent 70%), var(--ink-1);
}
.fd__book { position: relative; align-self: center; justify-self: center; width: 70cqw; aspect-ratio: 0.7; perspective: 1400px; }
.fd__page, .fd__cover { position: absolute; inset: 0; border-radius: 4px var(--r-md) var(--r-md) 4px; }
.fd__page {
  display: grid; grid-template-rows: auto 1fr auto; justify-items: center; align-items: center; padding: var(--sp-4);
  background:
    repeating-radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--blue) 6%, transparent) 0 1px, transparent 1px 7px),
    linear-gradient(170deg, color-mix(in srgb, var(--blue-deep) 16%, var(--ink-1)), color-mix(in srgb, var(--blue-deep) 8%, var(--ink-0)));
  border: 1px solid var(--blue-line);
  box-shadow: inset 6px 0 18px -8px color-mix(in srgb, var(--ink-0) 80%, transparent);
}
.fd__page-head, .fd__page-foot { font-size: var(--fs-2xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); }
.fd__page .seal { width: 84%; opacity: 0; transform: scale(2.2) rotate(-30deg); }
.fd.is-sealed .fd__page .seal { animation: seal-press 700ms cubic-bezier(0.2, 1.6, 0.4, 1) forwards; }
@keyframes seal-press { 0% { opacity: 0; transform: scale(2.2) rotate(-30deg); } 60% { opacity: 1; transform: scale(0.94) rotate(-6deg); } 100% { opacity: 1; transform: scale(1) rotate(-8deg); } }
.fd.is-sealed .fd__book { animation: shake 380ms ease 380ms; }
.fd__cover {
  display: grid; gap: var(--sp-3); align-content: center; justify-items: center;
  transform-origin: 0 50%;
  background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--text) 2%, transparent) 0 2px, transparent 2px 6px), linear-gradient(150deg, color-mix(in srgb, var(--blue-deep) 16%, var(--ink-1)), color-mix(in srgb, var(--blue-deep) 6%, var(--ink-0)) 70%);
  border: 1px solid var(--blue-line);
  box-shadow: 0 30px 60px -20px color-mix(in srgb, var(--ink-0) 90%, transparent), inset -2px 0 0 color-mix(in srgb, var(--text) 5%, transparent);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: transform 1100ms var(--ease-in-out);
}
.fd__cover img { width: 46%; height: auto; }
.fd__cover .mono { font-size: var(--fs-2xs); letter-spacing: 0.2em; color: var(--text-3); text-align: center; }
.fd__cover-no { color: var(--blue-hi) !important; }
.fd.is-open .fd__cover { transform: rotateY(-165deg); }
.fd__body { display: grid; gap: var(--sp-3); }
.fd__body > * { opacity: 0; transform: translateY(12px); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); }
.fd.is-sealed .fd__body > * { opacity: 1; transform: none; }
.fd.is-sealed .fd__body > :nth-child(2) { transition-delay: 120ms; }
.fd.is-sealed .fd__body > :nth-child(3) { transition-delay: 240ms; }
.fd.is-sealed .fd__body > :nth-child(4) { transition-delay: 360ms; }

/* The Founder seal: platinum and electric blue */
.seal { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 0 18px color-mix(in srgb, var(--blue) 55%, transparent)); }
.seal__ring { fill: none; stroke: color-mix(in srgb, var(--text) 85%, transparent); stroke-width: 2.4; }
.seal__ring--in { stroke: var(--blue-hi); stroke-width: 1.2; stroke-dasharray: 3 3; fill: color-mix(in srgb, var(--blue) 10%, transparent); }
.seal__text { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; fill: var(--text-2); }
.seal__spin { transform-box: view-box; transform-origin: 50% 50%; animation: crew-spin 50s linear infinite; }
.seal__k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.3em; fill: var(--blue-hi); }
.seal__no { font-family: var(--font-sans); font-size: 38px; font-weight: 800; letter-spacing: -0.04em; fill: var(--text); }
.seal__of { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.24em; fill: var(--text-3); }

/* ---------------------------------------------------------------- Book: visa and Founder pages */

.visa-page { position: relative; overflow: hidden; padding: var(--sp-5) var(--sp-4); border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.visa-page[hidden] { display: none; }
.visa-page .guilloche { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.55; }
.visa-page__head { position: relative; text-align: center; font-size: var(--fs-2xs); letter-spacing: 0.3em; color: var(--gold); opacity: 0.8; margin-bottom: var(--sp-3); }
.visa-page__stamp { position: relative; width: 92%; margin: 0 auto; rotate: -5deg; }
.founder-book { display: grid; grid-template-columns: 30cqw 1fr; gap: var(--sp-4); align-items: center; }
.founder-book b { font-size: var(--fs-md); }
.founder-book .small { margin-top: var(--sp-1); }

.visa-stamp { display: block; width: 100%; height: auto; overflow: visible; color: var(--gold); filter: drop-shadow(0 0 14px color-mix(in srgb, var(--gold) 40%, transparent)); }
.vst__line { fill: none; stroke: currentColor; }
.visa-stamp text { fill: currentColor; font-family: var(--font-mono); }
.vst__ring { font-size: 9.5px; letter-spacing: 0.12em; }
.vst__small { font-size: 10px; letter-spacing: 0.22em; }
.vst__cls { font-family: var(--font-sans) !important; font-weight: 800; letter-spacing: 0.02em; }
.vst__no { font-size: 20px; font-weight: 600; letter-spacing: 0.08em; }
.vst__icon { color: currentColor; }

.guilloche ellipse { fill: none; stroke: color-mix(in srgb, var(--gold) 30%, transparent); stroke-width: 0.6; }
.guilloche ellipse:nth-child(even) { stroke: color-mix(in srgb, var(--blue) 26%, transparent); }

/* ---------------------------------------------------------------- Race */

.race__back { position: absolute; top: var(--safe-top); left: var(--sp-5); z-index: 2; background: color-mix(in srgb, var(--ink-0) 55%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); margin: 0; }

/* ---------------------------------------------------------------- Pieces toward the visa */

.pieces-card { margin: var(--sp-4) 0; }
.pm {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); align-items: center;
  padding: var(--sp-4); border-radius: var(--r-lg);
  border: 1px solid var(--line); background: var(--glass);
  transition: border-color var(--t-med), background var(--t-med);
}
.pm.is-full { border-color: color-mix(in srgb, var(--gold) 50%, transparent); background: linear-gradient(110deg, color-mix(in srgb, var(--gold) 14%, transparent), transparent 70%), var(--glass); }
.pm__slots { display: flex; align-items: center; }
.pm__slot {
  display: grid; place-items: center; width: 14cqw; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  border: 1.5px dashed var(--text-4); color: var(--text-3);
}
.pm__slot svg { width: 40%; height: 40%; }
.pm__slot img { width: 100%; height: 100%; object-fit: cover; }
.pm__slot.is-on { border: 1.5px solid var(--blue-hi); box-shadow: 0 0 16px -4px var(--blue); }
.pm.is-full .pm__slot.is-on { border-color: var(--gold); box-shadow: 0 0 18px -4px var(--gold); }
.pm__link { width: 4cqw; height: 2px; background: var(--text-4); }
.pm.is-full .pm__link { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.pm__copy b { display: block; font-size: var(--fs-md); }
.pm.is-full .pm__copy b { color: var(--gold); }
.pm__copy small { display: block; margin-top: 2px; font-size: var(--fs-xs); line-height: 1.4; color: var(--text-3); }
.pieces-card.is-full .pm { animation: pm-full 900ms var(--ease-spring); }
@keyframes pm-full { 30% { transform: scale(1.04); box-shadow: 0 0 40px -8px var(--gold); } }

/* ---------------------------------------------------------------- Kit */

.kit-list { display: grid; gap: var(--sp-3); }
.kp { display: grid; grid-template-columns: 22cqw 1fr; gap: var(--sp-4); align-items: start; padding: var(--sp-3); border-radius: var(--r-lg); background: var(--glass); border: 1px dashed var(--line-strong); }
.kp.is-owned { border-style: solid; border-color: var(--blue-line); background: linear-gradient(160deg, var(--blue-dim), transparent 60%), var(--glass); }
.kp__img { position: relative; aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden; }
.kp__img img { width: 100%; height: 100%; object-fit: cover; }
.kp:not(.is-owned) .kp__img img { filter: grayscale(0.7) brightness(0.6); }
.kp__img i { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-2); }
.kp__img i svg { width: 32%; height: 32%; }
.kp__body { display: grid; gap: var(--sp-1); min-width: 0; }
.kp__moment { font-size: var(--fs-2xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue-hi); }
.kp:not(.is-owned) .kp__moment { color: var(--text-3); }
.kp__body > b { font-size: var(--fs-md); }
.kp__tool {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-2); align-items: center; text-align: left;
  margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3); min-height: var(--tap-min);
  border-radius: var(--r-md); background: var(--ink-2); border: 1px solid var(--blue-line);
}
.kp__tool > svg { width: 4.5cqw; height: 4.5cqw; color: var(--text-3); }
.kp__tool-ic { display: grid; place-items: center; width: 8cqw; height: 8cqw; border-radius: 50%; background: var(--blue); color: var(--ink-0); }
.kp__tool-ic svg { width: 55%; height: 55%; }
.kp__tool b { display: block; font-size: var(--fs-xs); }
.kp__tool small { display: block; font-size: var(--fs-2xs); color: var(--text-3); }
.kp__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); }
.kit-note { display: flex; gap: var(--sp-2); align-items: flex-start; margin-top: var(--sp-4); }
.kit-note > span { flex: none; display: inline-flex; width: 4.5cqw; color: var(--blue-hi); }

/* ---------------------------------------------------------------- Club: the visa */

[data-screen='club'] .tier-name { background: linear-gradient(100deg, color-mix(in srgb, var(--gold) 55%, var(--text)), var(--gold) 45%, color-mix(in srgb, var(--gold) 60%, var(--ink-0)) 80%, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.club-card { width: 92%; margin: var(--sp-2) auto var(--sp-5); }
.class-rail .rail__nodes li.is-invite i { border-style: dashed; border-color: var(--gold); }
.class-rail .rail__nodes li.is-invite small { color: var(--gold); }
.club-note { display: flex; gap: var(--sp-2); align-items: flex-start; margin-top: var(--sp-4); }
.club-note svg { flex: none; width: 1.2em; height: 1.2em; color: var(--gold); }
.club-note b { color: var(--text); }
.club-actions { margin-top: var(--sp-5); }

.vlock { display: grid; gap: var(--sp-2); justify-items: start; }
.vlock__art { position: relative; width: 84%; justify-self: center; margin: var(--sp-2) 0 var(--sp-4); rotate: -4deg; }
.vlock__art .visa-stamp { color: color-mix(in srgb, var(--gold) 45%, transparent); filter: none; opacity: 0.55; }
.vlock__lock { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 16cqw; height: 16cqw; border-radius: 50%; background: var(--ink-0); border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent); color: var(--gold); box-shadow: 0 0 40px -8px var(--gold); }
.vlock__lock svg { width: 45%; height: 45%; }
.classes { list-style: none; display: grid; gap: 2px; margin-top: var(--sp-2); }
.classes li { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); background: var(--glass); font-size: var(--fs-xs); }
.classes b { color: var(--text); }
.classes span { color: var(--text-3); }
.classes__diplomatic b, .classes__diplomatic span { color: var(--gold); }

.mp { display: grid; grid-template-columns: 28cqw 1fr; gap: var(--sp-4); align-items: center; width: 100%; text-align: left; padding: var(--sp-3); border-radius: var(--r-lg); border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); background: linear-gradient(120deg, color-mix(in srgb, var(--gold) 12%, transparent), transparent 70%), var(--glass); }
.mp__img { position: relative; aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden; }
.mp__img img, .mps__hero img { width: 100%; height: 100%; object-fit: cover; filter: sepia(0.55) saturate(1.3) brightness(0.9); }
.mp__img::after, .mps__hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 28%, transparent), transparent 60%); mix-blend-mode: overlay; }
.mp__label { position: absolute; left: 6%; bottom: 6%; z-index: 1; padding: 2px var(--sp-2); border-radius: 4px; font-size: var(--fs-2xs); letter-spacing: 0.12em; text-transform: uppercase; background: var(--gold); color: var(--ink-0); }
.mp__body { display: grid; gap: var(--sp-1); justify-items: start; }
.mp__body b { font-size: var(--fs-md); }
.mp__body small { font-size: var(--fs-xs); color: var(--text-3); }

.optin { display: grid; gap: var(--sp-3); }
.switch { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-3); align-items: center; width: 100%; text-align: left; min-height: var(--tap-min); }
.switch__copy b { display: block; font-size: var(--fs-sm); }
.switch__copy small { display: block; margin-top: 2px; font-size: var(--fs-2xs); line-height: 1.4; color: var(--text-3); }
.switch__track { position: relative; width: 13cqw; min-width: 44px; aspect-ratio: 1.7; border-radius: var(--r-pill); background: var(--glass-strong); border: 1px solid var(--line-strong); transition: background var(--t-med); }
.switch__track span { position: absolute; top: 8%; left: 6%; height: 84%; aspect-ratio: 1; border-radius: 50%; background: var(--text); transition: left var(--t-med) var(--ease-spring); }
.switch[aria-checked='true'] .switch__track { background: var(--gold); border-color: var(--gold); }
.switch[aria-checked='true'] .switch__track span { left: 46%; background: var(--ink-0); }

.letter-card { display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-4); align-items: center; width: 100%; text-align: left; margin-top: var(--sp-5); padding: var(--sp-4); border-radius: var(--r-lg); border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent); background: radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--gold) 20%, transparent), transparent 60%), var(--ink-2); box-shadow: 0 0 40px -16px var(--gold); animation: reveal var(--t-slow) var(--ease-out) both; }
.letter-card > svg { width: 5cqw; color: var(--gold); }
.letter-card b { display: block; font-size: var(--fs-md); }
.letter-card small { display: block; font-size: var(--fs-xs); color: var(--text-3); }
.letter-card__env { position: relative; width: 14cqw; aspect-ratio: 1.45; border-radius: 3px; background: color-mix(in srgb, var(--text) 92%, var(--gold)); }
.letter-card__env::before { content: ''; position: absolute; inset: 0 0 40%; background: color-mix(in srgb, var(--text) 80%, var(--gold)); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.letter-card__env span { position: absolute; left: 50%; top: 52%; translate: -50% -50%; width: 30%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--gold) 50%, var(--text)), var(--gold) 50%, color-mix(in srgb, var(--gold) 55%, var(--ink-0))); }

/* ---------------------------------------------------------------- Crew */

.crew-soon { display: grid; gap: var(--sp-4); justify-items: center; text-align: center; }
.crew-soon__emblem { width: 46cqw; opacity: 0.4; filter: grayscale(0.6); }
.crew-soon__emblem.is-lit { opacity: 1; filter: drop-shadow(0 0 30px color-mix(in srgb, var(--violet) 55%, transparent)); }
.crew-soon .perks { text-align: left; width: 100%; }
.crew-soon .perks svg { color: var(--violet); }
.crew-soon .perks li { align-items: center; }
[data-screen='crew'] .pool { margin-top: calc(var(--safe-top) * -1); }
.seats--home .seat { position: relative; }
.seat__cap { margin-top: 2px; }

/* ---------------------------------------------------------------- Week 3: the pillow */

.pw__hero { position: relative; height: 40cqh; overflow: hidden; }
.pw__hero img { width: 100%; height: 100%; object-fit: cover; }
.pw__hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--ink-1) 45%, transparent), transparent 30%, transparent 50%, var(--ink-1)); }
.pw__body { position: relative; margin-top: -8cqh; padding: 0 var(--sp-5); display: grid; gap: var(--sp-3); }

.unlock {
  display: grid; grid-template-columns: 24cqw 1fr; gap: var(--sp-4); align-items: center;
  padding: var(--sp-4); border-radius: var(--r-lg);
  background: var(--ink-2); border: 1px solid var(--line-strong);
  transition: border-color var(--t-med), box-shadow var(--t-med);
}
.unlock.is-open { border-color: color-mix(in srgb, var(--blue) 55%, transparent); box-shadow: 0 0 40px -16px var(--blue); }
.unlock__vault { display: block; padding: 0; border: 0; background: none; }
.unlock__vault .vault__art { aspect-ratio: 1; }
.unlock__copy { display: grid; gap: var(--sp-1); justify-items: start; }
.unlock__copy b { font-size: var(--fs-lg); }
.unlock__copy small { font-size: var(--fs-xs); color: var(--text-3); line-height: 1.4; margin-bottom: var(--sp-1); }
.unlock__copy > * { transition: opacity var(--t-slow); }
.unlock:not(.is-open) .unlock__copy > :not(.eyebrow) { opacity: 0.35; }
.unlock:not(.is-open) .unlock__copy .eyebrow { color: var(--text-3); }

.pw__pts { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-4); }
.pw__pt { font-size: var(--fs-xs); color: var(--text-3); }
.pw__pt b { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -0.03em; color: var(--gold); margin-right: 2px; }
.pw__pt--mi b { color: var(--text-4); }
.pw__pts small { flex-basis: 100%; font-size: var(--fs-2xs); color: var(--text-3); }

/* ---------------------------------------------------------------- The visa ceremony */

.visa-sheet { background: var(--ink-0); transform: none; opacity: 0; transition: opacity var(--t-slow) var(--ease-out), visibility 0s linear var(--t-slow); }
.visa-sheet.is-open { opacity: 1; transition-delay: 0s; }

.vc {
  position: relative; min-height: 100%; isolation: isolate; overflow: hidden;
  display: grid; grid-template-rows: 1fr auto auto; gap: var(--sp-4);
  padding: calc(var(--safe-top) + var(--sp-3)) var(--sp-5) calc(var(--safe-bottom) + var(--sp-5));
  background: radial-gradient(80% 50% at 50% 38%, color-mix(in srgb, var(--gold) 0%, transparent), transparent 70%), var(--ink-0);
  transition: background 1.2s var(--ease-out);
}
.vc:not([data-stage='join']) { background: radial-gradient(85% 52% at 50% 38%, color-mix(in srgb, var(--gold) 26%, transparent), transparent 72%), radial-gradient(90% 40% at 50% 110%, color-mix(in srgb, var(--blue) 18%, transparent), transparent 70%), var(--ink-0); }
.vc__fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }
.vc__rays {
  position: absolute; left: 50%; top: 38%; width: 230cqw; aspect-ratio: 1; z-index: -1;
  translate: -50% -50%; opacity: 0;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--gold) 16%, transparent) 0deg 3deg, transparent 3deg 14deg);
  -webkit-mask: radial-gradient(closest-side, var(--ink-0), transparent 72%); mask: radial-gradient(closest-side, var(--ink-0), transparent 72%);
  transition: opacity 1.4s var(--ease-out);
  animation: club-spin 50s linear infinite;
}
.vc[data-stage='stamp'] .vc__rays, .vc[data-stage='card'] .vc__rays, .vc[data-stage='done'] .vc__rays { opacity: 1; }

.vc__stage { position: relative; min-height: 0; }

/* Stage 1: the two pieces meet */
.vc__pieces { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity var(--t-slow), transform var(--t-slow) var(--ease-out); }
.vc__piece {
  position: absolute; top: 50%; display: grid; justify-items: center; gap: var(--sp-2);
  width: 30cqw; translate: 0 -50%;
}
.vc__piece img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--gold) 70%, transparent); box-shadow: 0 0 40px -10px var(--gold); }
.vc__piece small { font-size: var(--fs-2xs); color: var(--text-2); letter-spacing: 0.1em; }
.vc__piece--a { left: 50%; animation: piece-in-a 1400ms var(--ease-out) both; transform: translateX(-108%); }
.vc__piece--b { right: 50%; animation: piece-in-b 1400ms var(--ease-out) both; transform: translateX(108%); }
@keyframes piece-in-a { from { transform: translateX(-190%) rotate(-12deg); opacity: 0; } }
@keyframes piece-in-b { from { transform: translateX(190%) rotate(12deg); opacity: 0; } }
.vc.is-joined .vc__piece--a { transform: translateX(-62%); transition: transform 500ms var(--ease-spring); }
.vc.is-joined .vc__piece--b { transform: translateX(62%); transition: transform 500ms var(--ease-spring); }
.vc__spark { width: 18cqw; aspect-ratio: 1; border-radius: 50%; opacity: 0; z-index: 2; background: radial-gradient(circle, var(--text), color-mix(in srgb, var(--gold) 70%, transparent) 35%, transparent 70%); }
.vc.is-joined .vc__spark { animation: spark 900ms var(--ease-out); }
.vc:not([data-stage='join']) .vc__pieces { opacity: 0; transform: scale(0.6); pointer-events: none; }

/* Stage 2: a fresh passport page */
.vc__page {
  position: absolute; left: 0; right: 0; top: 4%; margin: 0 auto; width: 100%; aspect-ratio: 1.38;
  overflow: hidden; border-radius: var(--r-md);
  background: linear-gradient(170deg, color-mix(in srgb, var(--blue-deep) 14%, var(--ink-2)), color-mix(in srgb, var(--blue-deep) 8%, var(--ink-1)));
  border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
  box-shadow: 0 30px 60px -24px var(--ink-0), inset 0 0 50px color-mix(in srgb, var(--ink-0) 50%, transparent);
  opacity: 0; transform: translateY(8%) scale(0.92);
  transition: opacity var(--t-slow) var(--ease-out), transform 900ms var(--ease-out);
}
.vc__page .guilloche { position: absolute; inset: 0; width: 100%; height: 100%; }
.vc__page .guilloche ellipse { stroke-dasharray: 1; stroke-dashoffset: 1; }
.vc:not([data-stage='join']) .vc__page { opacity: 1; transform: none; }
.vc:not([data-stage='join']) .vc__page .guilloche ellipse { animation: draw-line 1.6s var(--ease-in-out) forwards; animation-delay: calc(var(--k) * 45ms); }
@keyframes draw-line { to { stroke-dashoffset: 0; } }
.vc__head { position: absolute; top: 7%; left: 0; right: 0; text-align: center; font-size: var(--fs-2xs); letter-spacing: 0.32em; color: var(--gold); opacity: 0.8; }
.vc__stamp { position: absolute; left: 7%; right: 7%; top: 20%; opacity: 0; }

/* Stage 3: the gold stamp comes down */
.vc[data-stage='stamp'] .vc__stamp, .vc[data-stage='card'] .vc__stamp, .vc[data-stage='done'] .vc__stamp { animation: visa-slam 700ms cubic-bezier(0.2, 1.6, 0.4, 1) forwards; }
@keyframes visa-slam { 0% { opacity: 0; transform: scale(2.4) rotate(-22deg); } 60% { opacity: 1; transform: scale(0.95) rotate(-4deg); } 100% { opacity: 1; transform: scale(1) rotate(-6deg); } }
.vc[data-stage='stamp'] .vc__page { animation: shake 380ms ease 380ms; }
.vc__stamp::after {
  content: ''; position: absolute; inset: -10%; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, color-mix(in srgb, var(--text) 55%, transparent) 50%, transparent 65%);
  mix-blend-mode: overlay; transform: translateX(-120%);
}
.vc[data-stage='done'] .vc__stamp::after { animation: foil 2.6s var(--ease-in-out) 400ms infinite; }
@keyframes foil { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

/* Stage 4: the page steps back, the card lands on it */
.vc[data-stage='card'] .vc__page, .vc[data-stage='done'] .vc__page { transform: translateY(-4%) scale(0.86) rotate(-3deg); }
.vc__card { position: absolute; left: 50%; bottom: 0; width: 76%; translate: -50% 0; opacity: 0; transform: translateY(40%) rotate(8deg) scale(0.8); transition: opacity var(--t-slow) var(--ease-out), transform 1000ms var(--ease-spring); z-index: 2; }
.vc[data-stage='card'] .vc__card, .vc[data-stage='done'] .vc__card { opacity: 1; transform: rotate(4deg); }
.vc__card .mcard__face { box-shadow: 0 30px 50px -18px var(--ink-0), 0 0 50px -14px var(--gold), 0 0 0 1px color-mix(in srgb, var(--text) 16%, transparent); }

.vc__copy { display: grid; gap: var(--sp-1); justify-items: center; text-align: center; }
.vc__kicker { color: var(--gold); min-height: 1.4em; }
.vc__title { display: grid; justify-items: center; gap: 2px; outline: none; opacity: 0; transform: translateY(10px); transition: opacity var(--t-slow), transform var(--t-slow) var(--ease-out); }
.vc__title small { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--text-2); }
.vc__sub { font-size: var(--fs-sm); color: var(--text-2); opacity: 0; transition: opacity var(--t-slow) 300ms; }
.vc.is-rolled .vc__title, .vc[data-stage='done'] .vc__title { opacity: 1; transform: none; }
.vc.is-rolled .vc__sub, .vc[data-stage='done'] .vc__sub { opacity: 1; }

.odo { display: inline-flex; font-size: var(--fs-hero); font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: color-mix(in srgb, var(--gold) 82%, var(--text)); filter: drop-shadow(0 0 18px color-mix(in srgb, var(--gold) 55%, transparent)); }
.odo__d { display: inline-block; height: 1em; overflow: hidden; }
.odo__d > span { display: flex; flex-direction: column; transition: transform 1600ms cubic-bezier(0.2, 0.9, 0.2, 1); }
.odo__d i { font-style: normal; height: 1em; line-height: 1; }
.vc.is-rolled .odo__d > span, .vc[data-stage='done'] .odo__d > span { transform: translateY(calc(var(--d) * -1em)); }
.odo__d:nth-child(2) > span { transition-delay: 120ms; }
.odo__d:nth-child(3) > span { transition-delay: 240ms; }
.odo__d:nth-child(4) > span { transition-delay: 360ms; }

.vc__actions { display: grid; gap: var(--sp-2); opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out), visibility 0s linear var(--t-slow); }
.vc[data-stage='done'] .vc__actions { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

/* ---------------------------------------------------------------- Chapter interstitial */

.chapter-card {
  position: absolute; inset: 0; z-index: 86;
  display: grid; align-content: center; justify-items: center; gap: var(--sp-3); text-align: center;
  padding: var(--safe-top) var(--sp-6) calc(var(--safe-bottom) + var(--sp-6));
  background: var(--ink-0);
  opacity: 0; transition: opacity var(--t-slow) var(--ease-out);
}
.chapter-card[hidden] { display: none; }
.chapter-card.is-on { opacity: 1; }
.cc__glow { position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 45% at 50% 45%, color-mix(in srgb, var(--blue) 22%, transparent), transparent 70%); }
.cc__k { font-size: var(--fs-sm); letter-spacing: 0.4em; text-transform: uppercase; color: var(--blue-hi); }
.cc__title { font-size: var(--fs-3xl); font-weight: 300; letter-spacing: -0.04em; line-height: 0.95; }
.cc__date { font-size: var(--fs-sm); color: var(--text-2); }
.cc__lead { font-size: var(--fs-sm); color: var(--text-3); max-width: 60cqw; }
.chapter-card > * { opacity: 0; transform: translateY(14px); }
.chapter-card.is-on > * { animation: reveal var(--t-slow) var(--ease-out) forwards; }
.chapter-card.is-on > :nth-child(3) { animation-delay: 120ms; }
.chapter-card.is-on > :nth-child(4) { animation-delay: 240ms; }
.chapter-card.is-on > :nth-child(5) { animation-delay: 360ms; }
.chapter-card.is-on > :nth-child(6) { animation-delay: 520ms; }
.chapter-card.is-on > :nth-child(7) { animation-delay: 900ms; }
.chapter-card .cc__glow { opacity: 1; transform: none; animation: none; }
.cc__line { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); width: 76cqw; margin: var(--sp-4) 0 var(--sp-2); }
.cc__line li { position: relative; display: grid; justify-items: center; gap: var(--sp-2); font-size: var(--fs-2xs); color: var(--text-4); font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.cc__line li::before { content: ''; position: absolute; top: calc(1.4cqw + 1px); left: -50%; right: 50%; height: 2px; background: var(--line-strong); }
.cc__line li:first-child::before { display: none; }
.cc__line li.is-done::before, .cc__line li.is-now::before { background: var(--blue-hi); box-shadow: 0 0 10px var(--blue); }
.cc__line i { position: relative; z-index: 1; width: 3cqw; min-width: 10px; aspect-ratio: 1; border-radius: 50%; background: var(--ink-0); border: 2px solid var(--text-4); }
.cc__line li.is-done i { background: var(--blue-hi); border-color: var(--blue-hi); }
.cc__line li.is-now { color: var(--text); }
.cc__line li.is-now i { border-color: var(--blue-hi); box-shadow: 0 0 0 4px var(--blue-dim), 0 0 16px var(--blue); }

/* ---------------------------------------------------------------- Another owner's passport */

.owner { display: grid; gap: var(--sp-3); }
.owner__tap { position: relative; height: 26cqw; display: grid; place-items: center; }
.owner__label { position: relative; z-index: 1; display: grid; justify-items: center; gap: var(--sp-1); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); background: linear-gradient(160deg, var(--ink-3), var(--ink-1)); border: 1px solid var(--line-strong); color: var(--blue-hi); font-size: var(--fs-2xs); }
.owner__label svg { width: 8cqw; height: 8cqw; }
.owner__label .mono { color: var(--text-2); }
.owner__rings { position: absolute; inset: 0; display: grid; place-items: center; }
.owner__rings i { position: absolute; width: 26cqw; aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--blue-hi); animation: ring 2.4s var(--ease-out) infinite; }
.owner__rings i + i { animation-delay: 1.2s; }
.owner__page {
  position: relative; overflow: hidden; display: grid; gap: var(--sp-3);
  padding: var(--sp-4); border-radius: var(--r-lg);
  background: linear-gradient(170deg, color-mix(in srgb, var(--blue-deep) 16%, var(--ink-1)), color-mix(in srgb, var(--blue-deep) 8%, var(--ink-0))); border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
  animation: reveal var(--t-slow) var(--ease-out) 300ms both;
}
.owner__page .guilloche { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.35; z-index: 0; }
.owner__page > :not(.guilloche) { position: relative; }
.owner__top { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-2xs); color: var(--text-3); letter-spacing: 0.12em; }
.owner__top img { height: 3.6cqw; width: auto; }
.owner__cls { display: grid; gap: 2px; }
.owner__cls small { font-size: var(--fs-2xs); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.owner__cls b { font-size: var(--fs-2xl); font-weight: 300; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); outline: none; }
.owner__chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.owner__stats { display: grid; grid-template-columns: repeat(3, 1fr); padding-block: var(--sp-3); border-block: 1px solid var(--line); }
.owner__stats div { display: grid; gap: 2px; }
.owner__stats b { font-size: var(--fs-lg); font-weight: 800; letter-spacing: -0.02em; }
.owner__stats small { font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.owner__stamps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.owner__stamps .stamp-cell { margin: -1cqw; background: none; }
.owner__note { display: flex; gap: var(--sp-2); align-items: flex-start; }
.owner__note svg { flex: none; width: 1.2em; height: 1.2em; color: var(--success); }

/* ---------------------------------------------------------------- Members-only piece */

.mps { display: grid; gap: var(--sp-3); }
.mps__hero { position: relative; height: 46cqw; border-radius: var(--r-lg); overflow: hidden; }
.mps__tag { position: absolute; left: var(--sp-3); bottom: var(--sp-3); z-index: 1; display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill); font-size: var(--fs-2xs); letter-spacing: 0.1em; text-transform: uppercase; background: var(--gold); color: var(--ink-0); }
.mps__tag svg { width: 1.2em; height: 1.2em; }
.mps .vault {
  display: grid; grid-template-columns: 26cqw 1fr; gap: var(--sp-3) var(--sp-4); align-items: center;
  padding: var(--sp-4); border-radius: var(--r-lg);
  background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 10%, transparent), transparent 60%), var(--ink-1);
  border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent);
}
.mps .vault__art { position: relative; display: grid; place-items: center; aspect-ratio: 1; }
.mps .vault__copy { display: grid; gap: var(--sp-1); }
.mps .vault__go { grid-column: 1 / -1; }
.unlock .vault__art { position: relative; display: grid; place-items: center; }

/* ---------------------------------------------------------------- The letter from Formhouse */

.letter-sheet { background: var(--ink-0); transform: none; opacity: 0; transition: opacity var(--t-slow) var(--ease-out), visibility 0s linear var(--t-slow); }
.letter-sheet.is-open { opacity: 1; transition-delay: 0s; }
.lt {
  position: relative; min-height: 100%; isolation: isolate; overflow: hidden;
  display: grid; grid-template-rows: auto 1fr auto; gap: var(--sp-4);
  padding: calc(var(--safe-top) + var(--sp-4)) var(--sp-5) calc(var(--safe-bottom) + var(--sp-5));
  background: radial-gradient(70% 45% at 50% 45%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 70%), var(--ink-0);
}
.lt__close { position: absolute; top: calc(var(--safe-top) - var(--sp-2)); right: var(--sp-4); z-index: 5; display: grid; place-items: center; width: max(var(--tap-min), 11cqw); height: max(var(--tap-min), 11cqw); border-radius: 50%; background: var(--glass-strong); }
.lt__close svg { width: 42%; height: 42%; }
.lt__kicker { text-align: center; }
.lt__scene { position: relative; display: grid; place-items: center; perspective: 1200px; }
.lt__actions { display: grid; gap: var(--sp-2); }
.lt__fine { text-align: center; }

.env { position: relative; width: 80cqw; aspect-ratio: 1.5; transition: transform 1s var(--ease-out); }
.env__back, .env__front, .env__flap { position: absolute; inset: 0; border-radius: 6px; }
.env__back { background: color-mix(in srgb, var(--text) 84%, var(--gold)); box-shadow: 0 40px 70px -24px var(--ink-0); }
.env__front { background: color-mix(in srgb, var(--text) 92%, var(--gold)); clip-path: polygon(0 0, 50% 52%, 100% 0, 100% 100%, 0 100%); z-index: 3; }
.env__flap { background: color-mix(in srgb, var(--text) 78%, var(--gold)); clip-path: polygon(0 0, 100% 0, 50% 58%); transform-origin: 50% 0; z-index: 4; transition: transform 800ms var(--ease-in-out), z-index 0s linear 400ms; }
.env__seal { position: absolute; left: 50%; top: 52%; z-index: 5; translate: -50% -50%; display: grid; place-items: center; width: 22cqw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--gold) 45%, var(--text)), var(--gold) 45%, color-mix(in srgb, var(--gold) 50%, var(--ink-0))); box-shadow: 0 6px 14px -4px color-mix(in srgb, var(--ink-0) 60%, transparent), inset 0 0 0 3px color-mix(in srgb, var(--gold) 70%, var(--ink-0)); transition: opacity var(--t-med), transform var(--t-med); }
.env__seal img { width: 78%; filter: brightness(0); opacity: 0.6; }
.letter {
  position: absolute; left: 6%; right: 6%; top: 6%; height: 140%; z-index: 2;
  display: grid; align-content: start; justify-items: center; gap: var(--sp-2); text-align: center;
  padding: var(--sp-5) var(--sp-4);
  border-radius: 4px; background: linear-gradient(180deg, color-mix(in srgb, var(--text) 97%, var(--gold)), color-mix(in srgb, var(--text) 90%, var(--gold)));
  color: var(--ink-0);
  box-shadow: 0 20px 40px -18px color-mix(in srgb, var(--ink-0) 70%, transparent);
  transition: transform 1100ms var(--ease-out) 500ms;
}
.letter__logo { width: 34%; filter: brightness(0); }
.letter__k { font-size: var(--fs-2xs); letter-spacing: 0.3em; text-transform: uppercase; color: color-mix(in srgb, var(--gold) 70%, var(--ink-0)); }
.letter__cls { font-size: var(--fs-2xl); font-weight: 300; letter-spacing: 0.14em; text-transform: uppercase; }
.letter__body { font-size: var(--fs-xs); line-height: 1.55; color: color-mix(in srgb, var(--ink-0) 78%, transparent); text-align: left; }
.letter__sign { justify-self: end; font-size: var(--fs-xl); font-style: italic; font-weight: 300; }
.letter__stamp { position: absolute; left: 8%; bottom: 8%; padding: var(--sp-1) var(--sp-3); border: 2px solid var(--gold); border-radius: 6px; font-size: var(--fs-xs); letter-spacing: 0.2em; text-transform: uppercase; color: color-mix(in srgb, var(--gold) 80%, var(--ink-0)); opacity: 0; transform: scale(2) rotate(-14deg); }
.lt.is-accepted .letter__stamp { animation: letter-stamp 600ms cubic-bezier(0.2, 1.6, 0.4, 1) forwards; }
@keyframes letter-stamp { to { opacity: 1; transform: scale(1) rotate(-10deg); } }

.lt:not(.is-open) .letter > :not(.letter__logo) { visibility: hidden; }
.lt:not(.is-open) .env { animation: env-float 4s ease-in-out infinite; }
@keyframes env-float { 50% { transform: translateY(-6px) rotate(-1deg); } }
.lt.is-open .env__flap { transform: rotateX(180deg); z-index: 1; }
.lt.is-open .env__seal { opacity: 0; transform: scale(1.4); }
.lt.is-open .env { transform: translateY(42%); }
.lt.is-open .letter { transform: translateY(-62%); z-index: 4; }

/* ---------------------------------------------------------------- Reduced motion: final states, no loops */

@media (prefers-reduced-motion: reduce) {
  .seal__spin, .vc__rays, .owner__rings i, .lt:not(.is-open) .env, .vc[data-stage='done'] .vc__stamp::after { animation: none !important; }
  .fd__page .seal { opacity: 1; transform: rotate(-8deg); }
  .fd.is-sealed .fd__page .seal, .fd.is-sealed .fd__book,
  .vc__piece--a, .vc__piece--b, .vc__stamp, .vc__page .guilloche ellipse, .chapter-card.is-on > *,
  .pieces-card.is-full .pm, .next-ch, .letter-card, .owner__page, .lt.is-accepted .letter__stamp { animation: none !important; }
  .vc__stamp, .chapter-card > *, .letter__stamp { opacity: 1; transform: none; }
  .vc__page .guilloche ellipse { stroke-dashoffset: 0; }
  .lt.is-accepted .letter__stamp { opacity: 1; transform: rotate(-10deg); }
}