/* Shared components for inner pages and the reader. Home sections live in v7/sections. Tokens, type, nav, buttons and footer live in v7/base.css, which is appended after this file. */
:root { color-scheme: light;
  --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
  --gutter: 20px; --container: calc(1040px + var(--gutter) * 2); --section: 96px;
  --radius-sm: 12px; --radius: 20px; --radius-lg: 28px; --radius-pill: 999px;
  --bg: var(--white); --surface: var(--apple-grey); --surface-2: oklch(93.5% 0.003 85);
  --wine: var(--apple-grey); --accent: var(--burgundy); --accent-2: var(--burgundy-hover); --accent-3: oklch(44% 0.15 15); --accent-4: oklch(24% 0.09 15); --on-accent: oklch(99% 0.002 85); --on-accent-i: oklch(100% 0 0 / 0.16);
  --bone: var(--on-light-1); --bone-2: var(--on-light-2); --muted: var(--on-light-2);
  --gold: var(--on-light-accent); --gold-2: oklch(65% 0.006 85); --gold-3: oklch(30% 0.006 85);
  --line: oklch(0% 0 0 / 0.1); --line-2: oklch(0% 0 0 / 0.18); --glass: oklch(100% 0 0 / 0.78); --scrim: oklch(99.4% 0.001 85 / 0.9); --scrim-1: oklch(99.4% 0.001 85 / 0.55); --scrim-0: oklch(99.4% 0.001 85 / 0);
  --shadow: oklch(28% 0.01 60 / 0.3); --mask: oklch(0% 0.005 20); --inner: oklch(0% 0 0 / 0.05); --gold-wash: oklch(35% 0.13 15 / 0.12); --dim: oklch(0% 0 0 / 0.06); --sh-soft: oklch(28% 0.01 60 / 0.2); --ov: oklch(20% 0.01 60 / 0.36);
  --cloth-ox: oklch(30% 0.11 15); --cloth-ink: oklch(16% 0.004 85); --cloth-tob: oklch(27% 0.006 85); --cloth-bone: oklch(87% 0.008 85); --cloth-ink-text: oklch(20% 0.006 85); --cloth-fg: oklch(90% 0.012 85); --pages: oklch(90% 0.015 85); --pages-2: oklch(76% 0.008 85);
  --display: var(--th-sans); --sans: var(--th-sans); --read: "Literata", Georgia, serif;
  --spring: cubic-bezier(0.32, 0.72, 0, 1); --out: cubic-bezier(0.16, 1, 0.3, 1);
  --read-paper: oklch(96% 0.018 85); --read-paper-ink: oklch(24% 0.02 60); --read-paper-soft: oklch(45% 0.025 60); --read-paper-line: oklch(24% 0.02 60 / 0.14); --read-paper-glass: oklch(96% 0.018 85 / 0.82);
  --read-white: oklch(99.5% 0.002 85); --read-white-ink: oklch(21% 0.006 60); --read-white-soft: oklch(46% 0.008 60); --read-white-line: oklch(21% 0.006 60 / 0.12); --read-white-glass: oklch(99.5% 0.002 85 / 0.82);
  --read-calm: oklch(87% 0.035 80); --read-calm-ink: oklch(25% 0.03 60); --read-calm-soft: oklch(42% 0.035 60); --read-calm-line: oklch(25% 0.03 60 / 0.16); --read-calm-glass: oklch(87% 0.035 80 / 0.82);
  --read-night: oklch(16% 0.004 85); --read-night-ink: oklch(86% 0.014 75); --read-night-soft: oklch(65% 0.014 70); --read-night-line: oklch(100% 0 0 / 0.13); --read-night-glass: oklch(15% 0.01 40 / 0.82); }
@media (min-width: 900px) {
:root { --gutter: 56px; --section: 144px; }
}
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; scrollbar-color: var(--surface-2) var(--bg); }
body { margin: 0; background: var(--bg); color: var(--bone); font: 400 1.0625rem/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 600; line-height: 1.04; letter-spacing: 0; text-wrap: balance; overflow-wrap: break-word; min-width: 0; }
h2 { font-size: clamp(2.5rem, 5.4vw, 5.5rem); }
h3 { font-size: clamp(1.5rem, 2vw, 2rem); line-height: 1.14; }
p { margin: 0; }
a { color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--bone); }
.sec { padding-block: var(--section); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lead { font-size: clamp(1.1875rem, 0.5vw + 1.05rem, 1.4375rem); line-height: 1.42; color: var(--bone-2); }
.gold { color: var(--gold); }
.skip { position: fixed; top: -80px; left: var(--space-md); z-index: 600; padding: var(--space-sm) var(--space-md); background: var(--bone); color: var(--bg); border-radius: var(--radius-sm); }
.skip:focus { top: var(--space-md); }
.token { display: inline-block; padding: 0 var(--space-xs); border: 1px dashed var(--gold-2); border-radius: var(--space-xs); color: var(--gold); font-size: 0.875rem; overflow-wrap: anywhere; }
.sig { display: block; aspect-ratio: 1324 / 631; background: currentColor; -webkit-mask: url(img/signature.png) center / contain no-repeat; mask: url(img/signature.png) center / contain no-repeat; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.fc { flex: none; width: 90%; transform-style: preserve-3d; will-change: transform; }
.yt { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: var(--radius); overflow: hidden; background: var(--surface); cursor: pointer; box-shadow: 0 32px 60px -28px var(--shadow); }
.yt img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--spring); }
.yt b { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: var(--bone); color: var(--bg); transition: transform 400ms var(--spring); }
.yt b svg { width: 24px; height: 24px; margin-left: 3px; }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt:active b { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
.yt:hover img { transform: scale(1.04); }
.yt:hover b { transform: scale(1.1); }
}
.fc h3 { margin-top: var(--space-md); font-size: clamp(1.75rem, 2.6vw, 2.5rem); }
.fc p { margin-top: var(--space-2xs); color: var(--muted); }
.fc--hulu .yt { box-shadow: 0 0 0 1px var(--gold-2), 0 40px 80px -30px var(--shadow); }
.fc--hulu .when { margin-top: var(--space-md); color: var(--gold); font-family: var(--display); font-size: clamp(1.5rem, 2.4vw, 2.25rem); line-height: 1.1; }
.fc--hulu .actions { margin-top: var(--space-md); }
@media (min-width: 900px) {
.fc { width: min(800px, 60%); }
}
.rail { display: flex; gap: var(--space-sm); margin-top: var(--space-xl); padding-inline: var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; perspective: 1000px; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { flex: none; scroll-snap-align: center; }
.hub { display: flex; flex-direction: column; justify-content: space-between; width: min(78vw, 340px); min-height: 300px; padding: var(--space-lg); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); text-decoration: none; transition: background-color 300ms var(--out); }
.hub h3 { font-size: 2rem; }
.hub p { margin-top: var(--space-sm); color: var(--bone-2); }
.hub span { display: inline-flex; margin-top: var(--space-lg); color: var(--gold); font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
.hub:hover { background: var(--surface-2); }
}
@media (min-width: 1040px) {
.rail--grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: var(--container); margin-inline: auto; overflow: visible; }
.rail--grid .hub { width: auto; }
}
.pts { display: grid; gap: var(--space-sm); margin-top: var(--space-xl); }
.pt { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-lg); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.pt h3 { font-size: 2rem; }
.pt p { color: var(--bone-2); }
.pt .code { color: var(--bone); font-weight: 600; }
.note { margin-top: var(--space-lg); color: var(--muted); font-size: 0.9375rem; max-width: 72ch; }
@media (min-width: 900px) {
.pts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.prods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); margin-top: var(--space-md); }
.prod { display: flex; flex-direction: column; justify-content: space-between; min-height: 150px; padding: var(--space-md); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); text-decoration: none; font-family: var(--display); font-size: 1.75rem; line-height: 1.1; }
.prod small { display: block; margin-top: var(--space-2xs); font-family: var(--sans); font-size: 0.9375rem; line-height: 1.3; color: var(--bone-2); }
.prod span { margin-top: var(--space-sm); font-family: var(--sans); font-size: 0.9375rem; color: var(--gold); }
@media (min-width: 900px) {
.prods { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.bks { --cols: 2; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--space-xl) var(--space-md); }
@media (min-width: 640px) {
.bks { --cols: 3; }
}
@media (min-width: 900px) {
.bks { --cols: 4; gap: var(--space-2xl) var(--space-lg); }
}
@media (min-width: 1200px) {
.bks { --cols: 5; }
}
.bk { display: block; text-decoration: none; perspective: 900px; }
.bk[hidden] { display: none; }
.bk3 { position: relative; display: block; aspect-ratio: 2 / 3; transform-style: preserve-3d; transform: rotateY(-14deg); transition: transform 700ms var(--spring); }
.bk3 s { position: absolute; top: 1.5%; bottom: 1.5%; right: 0; width: 22px; background: repeating-linear-gradient(0deg, var(--pages), var(--pages) 1px, var(--bone-2) 1px, var(--bone-2) 2px); transform-origin: 100% 50%; transform: rotateY(90deg); }
.bkc { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; container-type: inline-size; padding: 9% 8% 7%; border-radius: 3px 7px 7px 3px; background: var(--cloth-ox); color: var(--gold); text-align: center; box-shadow: inset 7px 0 8px -5px var(--shadow), inset -1px 0 0 var(--inner), -10px 24px 36px -18px var(--shadow); overflow: hidden; }
.bkc::before { content: ""; position: absolute; inset: 0; opacity: 0.22; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8 1.4' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23c)'/%3E%3C/svg%3E"); }
.bkc::after { content: ""; position: absolute; inset: 4.5%; border: 1px solid currentColor; opacity: 0.45; border-radius: 2px; }
.bkc > * { position: relative; z-index: 1; }
.bkc__a { font-weight: 600; font-size: max(13px, 7.6cqw); letter-spacing: 0.02em; }
.bkc__t { margin-block: auto; font-family: var(--display); font-size: calc(var(--s, 0.14) * 100cqw); line-height: 1.1; overflow-wrap: break-word; max-width: 100%; }
.bkc .sig { width: 48%; }
.bkc--ink { background: var(--cloth-ink); }
.bkc--tob { background: var(--cloth-tob); }
.bkc--bone { background: var(--cloth-bone); color: var(--cloth-ink-text); }
.bk__n { display: block; margin-top: var(--space-md); font-weight: 600; line-height: 1.25; }
.bk__m { display: block; margin-top: var(--space-2xs); color: var(--muted); font-size: 0.9375rem; }
.bk:active .bk3 { transform: rotateY(-4deg) scale(0.98); }
@media (hover: hover) and (pointer: fine) {
.bk:hover .bk3 { transform: rotateY(-30deg) translateX(8px); }
}
.drift { display: flex; gap: var(--space-lg); width: max-content; margin-top: var(--space-lg); padding-inline: var(--space-md); --bw: 168px; }
.drift .bk { width: var(--bw); }
.drift .bk__n, .drift .bk__m { display: none; }
@media (min-width: 900px) {
.drift { --bw: 216px; gap: var(--space-xl); }
}
.lib__h h1 { font-size: clamp(3.25rem, 8vw, 7.5rem); }
.lib__h p { margin-top: var(--space-sm); max-width: 44ch; }
.tools { position: sticky; top: 76px; z-index: 40; margin-top: var(--space-xl); margin-inline: calc(var(--gutter) * -1); padding: var(--space-sm) var(--gutter); background: var(--scrim); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.srch { position: relative; display: flex; align-items: center; height: 60px; padding: 0 var(--space-xs) 0 var(--space-lg); border: 1px solid var(--line-2); border-radius: var(--radius-pill); background: var(--surface); box-shadow: inset 0 1px 0 var(--inner); transition: border-color 200ms var(--out), box-shadow 300ms var(--out); }
.srch:focus-within { border-color: var(--gold-2); box-shadow: 0 0 0 4px var(--gold-wash); }
.srch svg { flex: none; width: 20px; height: 20px; color: var(--muted); }
.srch input { flex: 1; min-width: 0; height: 100%; margin-left: var(--space-sm); border: 0; background: transparent; font-size: 1.125rem; outline: 0; }
.srch input::placeholder { color: var(--muted); }
.srch input::-webkit-search-cancel-button { display: none; }
.srch kbd { display: none; padding: var(--space-2xs) var(--space-xs); margin-right: var(--space-xs); border: 1px solid var(--line-2); border-radius: var(--space-xs); color: var(--muted); font: inherit; font-size: 0.875rem; }
.srch .clr { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--inner); cursor: pointer; }
.srch .clr[hidden] { display: none; }
.srch .clr svg { width: 14px; height: 14px; color: var(--bone); }
@media (min-width: 900px) {
.srch kbd { display: inline-block; }
.tools { margin-inline: 0; padding-inline: 0; }
}
.chips { display: flex; gap: var(--space-xs); margin-top: var(--space-sm); overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--line-2); border-radius: var(--radius-pill); background: transparent; font-weight: 500; cursor: pointer; transition: background-color 200ms var(--out), color 200ms var(--out); }
.chip[aria-pressed="true"] { background: var(--bone); border-color: var(--bone); color: var(--bg); }
.lib__c { margin-block: var(--space-lg); color: var(--muted); }
.empty { padding-block: var(--space-2xl); text-align: center; color: var(--bone-2); }
.st { display: grid; gap: var(--space-xl); align-items: center; }
.st__b { width: min(60%, 260px); margin-inline: auto; perspective: 900px; }
.st__b img { border-radius: 3px 6px 6px 3px; box-shadow: -14px 40px 60px -24px var(--shadow); transform: rotateY(18deg) rotateX(4deg); }
.ebf { display: grid; gap: var(--space-sm); margin-top: var(--space-lg); }
.ebf input { height: 56px; padding: 0 var(--space-lg); border: 1px solid var(--line-2); border-radius: var(--radius-pill); background: var(--surface); font-size: 1.0625rem; }
.ebf input[aria-invalid] { border-color: var(--gold); }
.help { min-height: 24px; margin-top: var(--space-xs); color: var(--gold); font-size: 0.9375rem; }
.eb__ok { display: none; margin-top: var(--space-lg); }
.is-done .ebf, .is-done .help { display: none; }
.is-done .eb__ok { display: block; }
.eb__ok b { display: block; margin-bottom: var(--space-sm); font-family: var(--display); font-weight: 600; letter-spacing: -0.012em; font-size: 1.75rem; }
@media (min-width: 900px) {
.st { grid-template-columns: 340px minmax(0, 1fr); gap: var(--space-3xl); }
.st__b { width: 100%; }
.ebf { grid-template-columns: 1fr 1fr auto; }
}
.ph { position: relative; display: flex; align-items: flex-end; min-height: 76svh; overflow: clip; }
.ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--bg), var(--scrim-1) 46%, var(--scrim-0)); }
.ph h1 { font-size: clamp(3.25rem, 9vw, 8.5rem); }
.ph p { margin-top: var(--space-sm); max-width: 40ch; color: var(--bone); }
.ph--plain { min-height: 0; padding-top: 136px; }
.ph--plain::after { display: none; }
.jr { position: relative; display: grid; gap: var(--space-2xl); perspective: 1000px; }
.st8 { display: grid; gap: var(--space-md); }
.st8 figure { margin: 0; border-radius: var(--radius); overflow: hidden; }
.st8 img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 20%; }
.st8 small { display: block; color: var(--gold); font-family: var(--display); font-size: 2.25rem; line-height: 1.1; }
.st8 h3 { margin-top: var(--space-2xs); font-size: clamp(1.75rem, 3vw, 2.75rem); }
.st8 p { margin-top: var(--space-xs); color: var(--bone-2); max-width: 46ch; }
@media (min-width: 900px) {
.st8 { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; gap: var(--space-xl); }
.st8 > div { grid-column: 1 / span 6; }
.st8 figure { grid-column: 7 / span 6; }
.st8:nth-child(even) > div { grid-column: 7 / span 6; grid-row: 1; }
.st8:nth-child(even) figure { grid-column: 1 / span 6; grid-row: 1; }
}
.facts { margin-top: var(--space-lg); }
.fact { display: grid; gap: var(--space-xs); padding-block: var(--space-lg); border-top: 1px solid var(--line); }
.fact h3 { font-size: 1.75rem; }
.fact p { color: var(--bone-2); }
.fact small { display: block; margin-top: var(--space-xs); color: var(--muted); font-size: 0.9375rem; }
.fact a { color: var(--gold); text-underline-offset: 3px; }
@media (min-width: 900px) {
.fact { grid-template-columns: 4fr 8fr; gap: var(--space-xl); }
}
.faq { margin-top: var(--space-lg); }
.faq details { border-top: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-md); font-size: 1.1875rem; font-weight: 500; cursor: pointer; list-style: none; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--gold); font-size: 1.5rem; line-height: 1; transition: transform 300ms var(--spring); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { padding-bottom: var(--space-md); color: var(--bone-2); }
.plans { display: grid; gap: var(--space-sm); margin-top: var(--space-xl); }
.plan { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-lg); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.plan b { font-family: var(--display); font-weight: 600; letter-spacing: -0.012em; font-size: 3rem; line-height: 1.04; color: var(--gold); }
.plan p { color: var(--bone-2); }
@media (min-width: 900px) {
.plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.grid2 { display: grid; gap: var(--space-xl); margin-top: var(--space-xl); }
.grid2 h3 { font-size: 1.75rem; }
.grid2 p { margin-top: var(--space-xs); color: var(--bone-2); }
@media (min-width: 900px) {
.grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid2--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.form { display: grid; gap: var(--space-md); margin-top: var(--space-xl); max-width: 720px; }
.form label { display: block; margin-bottom: var(--space-2xs); font-weight: 500; }
.form input, .form select, .form textarea { width: 100%; min-height: 56px; padding: var(--space-sm) var(--space-md); border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface); font-size: 1.0625rem; }
.lk { display: grid; gap: var(--space-sm); max-width: 560px; margin-inline: auto; }
.lk a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 72px; padding: var(--space-sm) var(--space-lg); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); text-decoration: none; }
.lk b { display: block; font-weight: 600; }
.lk span { color: var(--muted); font-size: 0.9375rem; }
.lk-sig { width: 180px; margin: 0 auto var(--space-xl); color: var(--gold); }
.rd { --r-bg: var(--read-paper); --r-ink: var(--read-paper-ink); --r-soft: var(--read-paper-soft); --r-line: var(--read-paper-line); --r-glass: var(--read-paper-glass); --r-size: 1.25rem; --r-lead: 1.62; --r-font: var(--read); background: var(--r-bg); color: var(--r-ink); transition: background-color 300ms var(--out), color 300ms var(--out); color-scheme: light; }
.rd[data-theme="white"] { --r-bg: var(--read-white); --r-ink: var(--read-white-ink); --r-soft: var(--read-white-soft); --r-line: var(--read-white-line); --r-glass: var(--read-white-glass); }
.rd[data-theme="calm"] { --r-bg: var(--read-calm); --r-ink: var(--read-calm-ink); --r-soft: var(--read-calm-soft); --r-line: var(--read-calm-line); --r-glass: var(--read-calm-glass); }
.rd[data-theme="night"] { --r-bg: var(--read-night); --r-ink: var(--read-night-ink); --r-soft: var(--read-night-soft); --r-line: var(--read-night-line); --r-glass: var(--read-night-glass); color-scheme: dark; }
.rd[data-face="sans"] { --r-font: var(--sans); }
.rt { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; gap: var(--space-xs); height: calc(56px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) var(--space-xs) 0; background: var(--r-glass); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); transition: transform 400ms var(--spring); }
.rt__t { flex: 1; min-width: 0; text-align: center; font-family: var(--sans); font-size: 0.9375rem; font-weight: 600; color: var(--r-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity 200ms var(--out); }
.rd.is-past .rt__t { opacity: 1; }
.ib { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--r-ink); cursor: pointer; text-decoration: none; font-family: var(--sans); transition: background-color 200ms var(--out), transform 200ms var(--spring); }
.ib svg { width: 22px; height: 22px; }
.ib:active { transform: scale(0.92); background: var(--r-line); }
.ib[aria-pressed="true"] { color: var(--r-bg); background: var(--r-ink); }
.ib b { font-family: var(--read); font-size: 1.25rem; font-weight: 500; }
.rb { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; padding: var(--space-2xs) var(--space-xs) calc(var(--space-2xs) + env(safe-area-inset-bottom)); background: var(--r-glass); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); transition: transform 400ms var(--spring); }
.rb__p { height: 2px; margin: 0 var(--space-xs); background: var(--r-line); }
.rb__p i { display: block; height: 100%; background: var(--r-ink); transform: scaleX(0); transform-origin: 0 50%; }
.rb__r { display: flex; align-items: center; justify-content: space-between; max-width: 560px; margin-inline: auto; }
.rb__m { font-family: var(--sans); font-size: 0.875rem; color: var(--r-soft); font-variant-numeric: tabular-nums; }
.rd.is-hide .rt { transform: translateY(-100%); }
.rd.is-hide .rb { transform: translateY(100%); }
.ra { max-width: 38rem; margin-inline: auto; padding: calc(var(--space-3xl) + env(safe-area-inset-top)) var(--space-lg) 160px; font-family: var(--r-font); font-size: var(--r-size); line-height: var(--r-lead); }
.ra h1 { font-family: var(--r-font); font-size: 2.125em; line-height: 1.12; font-weight: 600; letter-spacing: -0.015em; color: var(--r-ink); }
.rd[data-face="serif"] .ra h1 { font-family: var(--display); font-weight: 600; letter-spacing: -0.012em; }
.ra__m { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-md); margin-top: var(--space-md); font-family: var(--sans); font-size: 0.9375rem; color: var(--r-soft); }
.ra__m .sig { width: 72px; color: var(--r-ink); }
.sum { margin-top: var(--space-xl); padding: var(--space-lg); border-radius: var(--radius); background: var(--r-line); font-family: var(--sans); font-size: 1.0625rem; line-height: 1.5; }
.sum h2 { font-family: var(--sans); font-size: 1rem; font-weight: 700; letter-spacing: 0; color: var(--r-ink); }
.sum ul { margin-top: var(--space-sm); }
.sum li { padding-block: var(--space-xs); border-top: 1px solid var(--r-line); }
.sum li:first-child { border-top: 0; padding-top: 0; }
.sum p { margin-top: var(--space-sm); }
.rx-b { margin-top: var(--space-xl); }
.rx-b p, .rx-b ul, .rx-b ol, .rx-b blockquote, .rx-b .tb { margin: 0 0 1.05em; hanging-punctuation: first; }
.rx-b h2 { margin: 1.9em 0 0.5em; font-family: var(--r-font); font-size: 1.4em; font-weight: 600; line-height: 1.22; letter-spacing: -0.01em; color: var(--r-ink); scroll-margin-top: 72px; }
.rx-b h3 { margin: 1.5em 0 0.4em; font-family: var(--r-font); font-size: 1.1em; font-weight: 600; line-height: 1.3; letter-spacing: 0; color: var(--r-ink); }
.rx-b ul, .rx-b ol { padding-left: 1.2em; }
.rx-b ul { list-style: disc; }
.rx-b ol { list-style: decimal; }
.rx-b li { margin-bottom: 0.5em; padding-left: 0.2em; }
.rx-b strong { font-weight: 600; }
.rx-b a { color: inherit; text-decoration-color: var(--r-soft); text-underline-offset: 3px; }
.rx-b blockquote { padding-left: 1em; border-left: 2px solid var(--r-ink); }
.rx-b img { width: 100%; height: auto; border-radius: var(--radius-sm); }
.rx-b .is-reading { background: var(--r-line); border-radius: var(--space-2xs); box-shadow: 0 0 0 6px var(--r-line); }
.tb { overflow-x: auto; margin-inline: calc(var(--space-lg) * -1); padding-inline: var(--space-lg); -webkit-overflow-scrolling: touch; }
.tb table { width: 100%; min-width: 460px; border-collapse: collapse; font-family: var(--sans); font-size: 0.8em; line-height: 1.4; }
.tb th, .tb td { padding: var(--space-xs) var(--space-sm) var(--space-xs) 0; border-bottom: 1px solid var(--r-line); text-align: left; vertical-align: top; }
.tb th { font-weight: 700; }
.fold { border-top: 1px solid var(--r-line); font-family: var(--sans); font-size: 1rem; }
.fold summary { display: flex; align-items: center; justify-content: space-between; min-height: 56px; font-weight: 600; cursor: pointer; list-style: none; }
.fold summary::-webkit-details-marker { display: none; }
.fold summary::after { content: "+"; font-size: 1.5rem; transition: transform 300ms var(--spring); }
.fold[open] summary::after { transform: rotate(45deg); }
.fold > div { padding-bottom: var(--space-md); }
.fold h3 { margin: var(--space-md) 0 var(--space-2xs); font-family: var(--sans); font-size: 1rem; font-weight: 700; letter-spacing: 0; color: var(--r-ink); }
.fold p, .fold ul, .fold ol { margin: 0 0 var(--space-sm); }
.fold ul, .fold ol { padding-left: 1.2em; }
.fold a { color: inherit; overflow-wrap: anywhere; }
.ra__f { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--r-line); font-family: var(--sans); font-size: 0.9375rem; color: var(--r-soft); }
.nxt { display: block; margin-top: var(--space-xl); padding: var(--space-lg); border-radius: var(--radius); background: var(--r-ink); color: var(--r-bg); font-family: var(--sans); text-decoration: none; }
.nxt small { display: block; font-size: 0.9375rem; opacity: 0.75; }
.nxt b { display: block; margin-top: var(--space-2xs); font-family: var(--display); font-weight: 600; letter-spacing: -0.012em; font-size: 1.625rem; line-height: 1.16; }
.ov { position: fixed; inset: 0; z-index: 200; background: var(--ov); visibility: hidden; opacity: 0; transition: opacity 300ms var(--out), visibility 0s linear 300ms; }
.ov.is-on { visibility: visible; opacity: 1; transition-delay: 0s; }
.sh { padding: var(--space-lg); font-family: var(--sans); }
.js .sh { position: fixed; left: 0; right: 0; bottom: 0; z-index: 210; max-width: 560px; margin-inline: auto; max-height: 78svh; padding: var(--space-xs) var(--space-lg) calc(var(--space-lg) + env(safe-area-inset-bottom)); border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--r-bg); color: var(--r-ink); box-shadow: 0 -20px 50px -20px var(--shadow); font-family: var(--sans); transform: translateY(105%); visibility: hidden; transition: transform 500ms var(--spring), visibility 0s linear 500ms; overflow-y: auto; }
.js .sh.is-on { transform: none; visibility: visible; transition-delay: 0s; }
.sh__g { width: 40px; height: 4px; margin: var(--space-2xs) auto var(--space-md); border-radius: 2px; background: var(--r-line); }
.sh h2 { font-family: var(--sans); font-size: 1.125rem; font-weight: 700; letter-spacing: 0; color: var(--r-ink); margin-bottom: var(--space-sm); }
.sh a { display: flex; align-items: center; min-height: 48px; border-top: 1px solid var(--r-line); text-decoration: none; line-height: 1.3; }
.sh a[aria-current] { font-weight: 700; }
.ctl { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 60px; border-top: 1px solid var(--r-line); }
.seg { display: flex; gap: var(--space-2xs); padding: 3px; border-radius: var(--radius-pill); background: var(--r-line); }
.seg button { min-width: 56px; min-height: 40px; padding: 0 var(--space-sm); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--r-ink); font-size: 1rem; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--r-bg); font-weight: 600; box-shadow: 0 1px 3px var(--sh-soft); }
.swt { display: flex; gap: var(--space-sm); }
.swt button { width: 44px; height: 44px; border: 1px solid var(--r-line); border-radius: 50%; cursor: pointer; }
.swt button[aria-pressed="true"] { outline: 2px solid var(--r-ink); outline-offset: 2px; }
.toast { position: fixed; left: 50%; bottom: 96px; z-index: 120; display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-2xs) var(--space-2xs) var(--space-2xs) var(--space-md); border-radius: var(--radius-pill); background: var(--r-ink); color: var(--r-bg); font-family: var(--sans); font-size: 0.9375rem; transform: translate(-50%, 24px); opacity: 0; pointer-events: none; transition: transform 500ms var(--spring), opacity 300ms var(--out); white-space: nowrap; }
.toast.is-on { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.toast button { min-height: 40px; padding: 0 var(--space-md); border: 0; border-radius: var(--radius-pill); background: var(--r-bg); color: var(--r-ink); font-weight: 600; cursor: pointer; }
@media (min-width: 900px) {
.ra { padding-top: 120px; }
.rd { --r-size: 1.3125rem; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
* { animation: none !important; }
.bk3 { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
.rt, .rb { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg); }
.rt, .rb { background: var(--r-bg); }
}
img { height: auto; }
.fc--hulu .when, .st8 small, .bkc__t { font-weight: 600; letter-spacing: -0.012em; }
.fc--hulu .yt { box-shadow: 0 0 0 1px var(--line-2), 0 40px 80px -30px var(--shadow); }
.pt { background: var(--surface-2); }
.prod span { color: var(--bone-2); }
.lk .gold { color: var(--bone-2); }
.st__b { width: min(52%, 220px); }
.st__b img { width: 100%; height: auto; border-radius: 2px 5px 5px 2px; transform: rotateY(18deg) rotateX(3deg); box-shadow: -2px 0 0 var(--pages), -16px 36px 56px -24px var(--shadow); }
@media (min-width: 900px) {
.st { grid-template-columns: 260px minmax(0, 1fr); gap: var(--space-2xl); }
.st__b { width: 100%; }
}
.lib__c a { color: var(--bone) !important; }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--bone); }
.srch:focus-within { border-color: var(--line-2); }
.ct { display: grid; gap: var(--space-2xl); }
.ct h1 { font-size: clamp(3.25rem, 7vw, 6.5rem); }
.ct .lead { margin-top: var(--space-md); max-width: 34ch; }
.ct__m { margin-top: var(--space-xl); display: grid; gap: var(--space-lg); }
.ct__m small { display: block; color: var(--muted); font-size: 0.9375rem; }
.ct__m a { font-size: clamp(1.25rem, 1.6vw + 0.6rem, 1.625rem); font-weight: 600; letter-spacing: -0.02em; text-underline-offset: 5px; text-decoration-color: var(--accent-3); }
.ct__s { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-xs); }
.ct__s a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--line-2); border-radius: var(--radius-pill); font-size: 1rem; font-weight: 500; letter-spacing: 0; text-decoration: none; }
.ct__c { padding: var(--space-xs); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--inner); }
.ct__i { padding: var(--space-lg); border-radius: var(--radius); background: var(--surface); box-shadow: inset 0 1px 1px var(--inner); }
.ct .form { margin-top: 0; max-width: none; }
.ct .form input, .ct .form select, .ct .form textarea { background: var(--bg); border-color: var(--line); }
.ct .form input:focus, .ct .form select:focus, .ct .form textarea:focus { border-color: var(--bone-2); outline: 0; }
@media (min-width: 900px) {
.ct { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3xl); align-items: start; }
.ct__i { padding: var(--space-xl); }
}
.rd[data-face="serif"] .ra h1 { font-family: var(--read); font-weight: 600; }
.ra { max-width: 40rem; }
@media (min-width: 900px) {
.ra { max-width: 47rem; }
}
::selection { color: var(--on-accent); }
.chip[aria-pressed="true"] { color: var(--on-accent); }
.fc { width: 80vw; }
@media (min-width: 900px) {
.fc { width: min(720px, 46vw); }
}
.bkc { color: var(--cloth-fg); }
.bkc--bone { color: var(--cloth-ink-text); }
.bk3 s { background: repeating-linear-gradient(0deg, var(--pages), var(--pages) 1px, var(--pages-2) 1px, var(--pages-2) 2px); }
.ph::after { display: none; }
.ph:not(.ph--plain) { flex-direction: column-reverse; align-items: stretch; min-height: 0; padding-top: 104px; }
.ph > img { position: static; width: calc(100% - var(--gutter) * 2); height: auto; aspect-ratio: 4 / 3.6; margin-inline: var(--gutter); border-radius: var(--radius-lg); object-fit: cover; object-position: 50% 18%; }
.ph h1 { font-size: clamp(3.25rem, 6vw, 6.5rem); }
.ph p { color: var(--bone-2); }
@media (min-width: 900px) {
.ph:not(.ph--plain) { flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: var(--space-2xl); max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.ph:not(.ph--plain) { min-height: 76svh; padding-block: 104px var(--space-xl); }
.ph > img { flex: 0 0 50%; width: 50%; height: min(70svh, 640px); aspect-ratio: auto; margin: 0; }
.ph h1 { max-width: 8em; }
}
.lead { text-wrap: pretty; }
.fact small a { padding-block: var(--space-sm); }
.lib__c a { padding-block: var(--space-sm); }
@media (min-width: 900px) {
.fc { width: min(640px, 40vw); }
}

/* Tony Huge v7 foundation. Appended after main.css in dist/site.css, so fonts/ and img/ paths resolve from dist/. */

/* ---------- fonts ---------- */
@font-face { font-family: "League Gothic"; src: url("fonts/league-gothic-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: "Switzer"; src: url("fonts/switzer-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; size-adjust: 94%; ascent-override: 95.7%; descent-override: 26.6%; line-gap-override: 0%; }
@font-face { font-family: "Switzer"; src: url("fonts/switzer-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; size-adjust: 94%; ascent-override: 95.7%; descent-override: 26.6%; line-gap-override: 0%; }
@font-face { font-family: "Switzer"; src: url("fonts/switzer-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; size-adjust: 94%; ascent-override: 95.7%; descent-override: 26.6%; line-gap-override: 0%; }

/* ---------- tokens ---------- */
:root {
  /* never add system-ui here: it becomes Roboto on Android and Segoe UI on Windows */
  --th-sans: -apple-system, BlinkMacSystemFont, "Switzer", "Helvetica Neue", Arial, sans-serif;
  --th-poster: "League Gothic", Impact, "Arial Narrow", sans-serif;
  --w-wrap: 1040px; --w-measure: 640px;
  --th-out: cubic-bezier(.215, .61, .355, 1);

  --white: #FFFFFF; --apple-grey: #F5F5F7; --ivory: #F6F2E9; --stone: #E5DED2; --titanium: #B9AE9E;
  --ink: #0B0809; --graphite: #1C181A;
  --velvet-crown: #691022; --velvet-lit: #540A1B; --velvet-base: #3D0714; --velvet-edge: #2A050E;
  --cherry: #1A050A; --burgundy: #5A0F22; --burgundy-hover: #6E1529;
  --champagne: #DCC7A3;
  --on-light-1: #1C1A1B; --on-light-2: #625C5E; --on-light-accent: #5A0F22;
  --on-velvet-1: #FFFFFF; --on-velvet-2: #F0E4E5; --on-velvet-3: #D9C4C8;
  --on-ink-1: #F5F5F7; --on-ink-2: #B4AEB0; --on-ink-3: #918B8D;
  --btn-light-bg: #5A0F22; --btn-light-fg: #FFFFFF; --btn-light-hover: #6E1529;
  --btn-velvet-bg: #FFFFFF; --btn-velvet-fg: #5A0F22; --btn-velvet-hover: #F6F2E9;
  --btn-ink-bg: #FFFFFF; --btn-ink-fg: #0B0809; --btn-ink-hover: #F5F5F7;
  --line-on-light: rgba(28, 26, 27, .12); --line-on-dark: rgba(255, 255, 255, .14); --line-champagne: rgba(220, 199, 163, .42);
  --radius-sheet: 32px; --shadow-sheet: 0 -24px 70px rgba(11, 8, 9, .42); --edge-sheet-dark: inset 0 1px 0 rgba(255, 255, 255, .10);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cfilter id='a' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .66 0 0 0 0 .1 0 0 0 0 .2 0 0 0 1.6 -.72'/%3E%3C/filter%3E%3Cfilter id='b' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.6 -.72'/%3E%3C/filter%3E%3Crect width='360' height='360' filter='url(%23a)' opacity='.5'/%3E%3Crect width='360' height='360' filter='url(%23b)' opacity='.55'/%3E%3C/svg%3E");

  /* defaults outside any theme: pages are light unless a section says otherwise */
  --fg: var(--on-light-1); --fg2: var(--on-light-2);
  --btn-bg: var(--btn-light-bg); --btn-fg: var(--btn-light-fg); --btn-hover: var(--btn-light-hover);
  --gh-fg: var(--on-light-accent); --gh-line: transparent; --gh-hover: rgba(90, 15, 34, .07); --gh-deco: underline;
}
@media (max-width: 700px) { :root { --radius-sheet: 28px; } }

/* ---------- reset of type ---------- */
html.site { background: var(--velvet-edge); }
html:has(.s-hero) { scroll-padding-top: 0; }
html { font-family: var(--th-sans); font-optical-sizing: auto; font-kerning: normal; font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-family: var(--th-sans); }
body:not(.rd) { font-size: 17px; line-height: 1.47; letter-spacing: -.022em; background: var(--white); color: var(--on-light-1); }
html.no-sf body:not(.rd) { letter-spacing: -.004em; }
h1, h2, h3 { font-family: var(--th-sans); letter-spacing: 0; }
h3 { line-height: 1.1; }
::selection { background: var(--burgundy); color: #fff; }

.wrap { width: 100%; max-width: calc(var(--w-wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.measure { max-width: var(--w-measure); }
.pad { padding-block: var(--section); }
.fill { min-height: 100svh; }

/* ---------- the ladder. 390px to 1256px. No uppercase tracked labels in SF. ---------- */
.hero-1 { font-family: var(--th-sans); font-weight: 700; font-size: clamp(52px, 17.4vw, 104px); line-height: 1.02; letter-spacing: -.022em; }
.display { font-family: var(--th-sans); font-weight: 600; font-size: clamp(44px, 11.3vw, 80px); line-height: 1.05; letter-spacing: -.015em; }
.title { font-family: var(--th-sans); font-weight: 600; font-size: clamp(34px, 8.2vw, 56px); line-height: 1.07; letter-spacing: -.005em; }
.heading { font-family: var(--th-sans); font-weight: 600; font-size: clamp(26px, 5.6vw, 40px); line-height: 1.1; letter-spacing: 0; }
.sub { font-family: var(--th-sans); font-weight: 600; font-size: clamp(21px, 5.4vw, 28px); line-height: 1.14; letter-spacing: .007em; text-wrap: pretty; }
.lead { font-weight: 400; font-size: clamp(19px, 4.9vw, 21px); line-height: 1.38; letter-spacing: .011em; color: var(--fg2); text-wrap: pretty; }
.body { font-weight: 400; font-size: 17px; line-height: 1.47; letter-spacing: -.022em; text-wrap: pretty; }
.small { font-weight: 400; font-size: 14px; line-height: 1.43; letter-spacing: -.016em; }
.caption { font-weight: 400; font-size: 12px; line-height: 1.33; letter-spacing: -.01em; }
html.no-sf .lead { letter-spacing: .004em; }
html.no-sf .body { letter-spacing: -.004em; }
html.no-sf .small { letter-spacing: 0; }
.quiet { color: var(--fg2); }
.quiet b { color: var(--fg); font-weight: 600; }

/* League Gothic: every section statement. Capitals only, weight 400 only. Size comes from TH.fit or data-fit. */
.poster, h2[data-m], .ph h1, .lib__h h1, .ct h1 { font-family: var(--th-poster); font-weight: 400; line-height: .92; letter-spacing: 0; text-transform: uppercase; }
.poster { margin: 0; font-size: clamp(72px, 19vw, 168px); color: var(--fg, inherit); text-wrap: balance; }
.poster--giant { font-size: clamp(150px, 43vw, 360px); white-space: nowrap; }
.poster .ln { display: block; white-space: nowrap; }
h2[data-m], .ph h1, .lib__h h1, .ct h1 { font-size: clamp(64px, 14vw, 132px); }
.w { display: inline-block; position: relative; }

/* ---------- sections and themes ---------- */
.s { position: relative; z-index: 1; }
:not(body)[data-theme=white] { --bg: var(--white); --fg: var(--on-light-1); --fg2: var(--on-light-2); --accent: var(--on-light-accent); --line: var(--line-on-light); --btn-bg: var(--btn-light-bg); --btn-fg: var(--btn-light-fg); --btn-hover: var(--btn-light-hover); --surface: var(--apple-grey); --surface-2: var(--stone); }
:not(body)[data-theme=grey] { --bg: var(--apple-grey); --fg: var(--on-light-1); --fg2: var(--on-light-2); --accent: var(--on-light-accent); --line: var(--line-on-light); --btn-bg: var(--btn-light-bg); --btn-fg: var(--btn-light-fg); --btn-hover: var(--btn-light-hover); --surface: var(--white); --surface-2: var(--stone); }
:not(body)[data-theme=ivory] { --bg: var(--ivory); --fg: var(--on-light-1); --fg2: var(--on-light-2); --accent: var(--on-light-accent); --line: var(--line-on-light); --btn-bg: var(--btn-light-bg); --btn-fg: var(--btn-light-fg); --btn-hover: var(--btn-light-hover); --surface: var(--white); --surface-2: var(--stone); }
:not(body)[data-theme=ink] { --bg: var(--ink); --fg: var(--on-ink-1); --fg2: var(--on-ink-2); --fg3: var(--on-ink-3); --accent: var(--champagne); --line: var(--line-on-dark); --btn-bg: var(--btn-ink-bg); --btn-fg: var(--btn-ink-fg); --btn-hover: var(--btn-ink-hover); --surface: var(--graphite); --surface-2: #2A2427; }
:not(body)[data-theme=velvet] { --bg: var(--velvet-base); --fg: var(--on-velvet-1); --fg2: var(--on-velvet-2); --fg3: var(--on-velvet-3); --accent: var(--champagne); --line: var(--line-on-dark); --btn-bg: var(--btn-velvet-bg); --btn-fg: var(--btn-velvet-fg); --btn-hover: var(--btn-velvet-hover); --surface: rgba(255, 255, 255, .08); --surface-2: rgba(255, 255, 255, .14); }
:not(body)[data-theme=deep] { --bg: #1A050A; --fg: var(--on-ink-1); --fg2: var(--on-ink-2); --fg3: var(--on-ink-3); --accent: var(--champagne); --line: var(--line-on-dark); --btn-bg: var(--btn-ink-bg); --btn-fg: var(--btn-ink-fg); --btn-hover: var(--btn-ink-hover); --surface: rgba(255, 255, 255, .07); --surface-2: rgba(255, 255, 255, .13); }

/* Shared components (hubs, partner cards, film cards, books, forms) use the older names. These keep them right on any theme. */
:not(body)[data-theme=white], :not(body)[data-theme=grey], :not(body)[data-theme=ivory] { --bone: var(--on-light-1); --bone-2: var(--on-light-2); --muted: var(--on-light-2); --gold: var(--on-light-accent); --gold-2: var(--on-light-2); --line-2: rgba(28, 26, 27, .2); --inner: rgba(0, 0, 0, .05); --gh-fg: var(--on-light-accent); --gh-line: transparent; --gh-hover: rgba(90, 15, 34, .07); --gh-deco: underline; }
:not(body)[data-theme=ink], :not(body)[data-theme=velvet], :not(body)[data-theme=deep] { --bone: var(--fg); --bone-2: var(--fg2); --muted: var(--fg3); --gold: var(--champagne); --gold-2: var(--line-champagne); --line-2: rgba(255, 255, 255, .24); --inner: rgba(255, 255, 255, .08); --shadow: rgba(0, 0, 0, .55); --gh-fg: #fff; --gh-line: rgba(255, 255, 255, .40); --gh-hover: rgba(255, 255, 255, .10); --gh-deco: none; }

:not(body)[data-theme] { color: var(--fg); background-color: var(--bg); }

/* Lit velvet. Move the light on a section with --kx and --ky. Do not use ::before or ::after on a velvet section or its .stage: they carry the sheen and grain. */
.velvet, :not(body)[data-theme=velvet], :not(body)[data-theme=deep] { --kx: 50%; --ky: 34%; --c: var(--velvet-crown); --l: var(--velvet-lit); --b: var(--velvet-base); --e: var(--velvet-edge); }
:not(body)[data-theme=deep] { --c: #3F0713; --l: #2B040D; --b: #1A050A; --e: #0D0306; }
.velvet, :not(body)[data-theme=velvet], :not(body)[data-theme=deep], :not(body)[data-theme=velvet] > .stage, :not(body)[data-theme=deep] > .stage {
  position: relative; isolation: isolate; overflow: clip; background-color: var(--b);
  background-image: radial-gradient(96% 64% at var(--kx) var(--ky), var(--c) 0, var(--l) 38%, var(--b) 76%, var(--e) 130%);
}
.velvet::after, :not(body)[data-theme=velvet]::after, :not(body)[data-theme=deep]::after, :not(body)[data-theme=velvet] > .stage::after, :not(body)[data-theme=deep] > .stage::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--grain); background-size: 360px 360px; opacity: .16; }
.velvet::before, :not(body)[data-theme=velvet]::before, :not(body)[data-theme=deep]::before, :not(body)[data-theme=velvet] > .stage::before, :not(body)[data-theme=deep] > .stage::before { content: ""; position: absolute; inset: -10% -30%; z-index: -1; pointer-events: none; background: linear-gradient(112deg, rgba(150, 22, 52, 0) 34%, rgba(150, 22, 52, .20) 48%, rgba(150, 22, 52, 0) 62%); transform: translate3d(var(--sheen, 0), 0, 0); }

/* Sticky scenes: <section class="s s-x track" style="--h:200svh"><div class="stage">...</div></section>. Never overflow:hidden on an ancestor of .stage. */
.track { position: relative; }
.stage { position: relative; min-height: 100svh; overflow: clip; }
html.gs .track:where(:not([data-still], [data-still] *)) { height: var(--h, 200svh); }
/* a scene the visitor has already scrolled past takes less scrolling when they come back up to it.
   --seen-k is how much of the extra length is kept: 1 = full length (off), 0 = one screen. The class is set by core.js (seen scenes). */
html.gs .track.is-seen:where(:not([data-still], [data-still] *)) { height: calc(100svh + (var(--h, 200svh) - 100svh) * var(--seen-k, .4)); }
html.gs .track:where(:not([data-still], [data-still] *)) > .stage { position: sticky; top: 0; height: 100svh; min-height: 0; }

/* ---------- reveal: hidden only behind html.gs, core has a timed failsafe ---------- */
html.gs [data-r]:not(.is-in) { opacity: 0; transform: translate3d(0, 12px, 0); }
html.gs [data-r].is-in { transition: opacity .5s var(--th-out), transform .5s var(--th-out); transition-delay: var(--rd, 0s); }
html.gs [data-sign]:not(.is-in) { clip-path: inset(0 100% 0 0); }
html.gs [data-sign].is-in { transition: clip-path 1.5s cubic-bezier(.65, 0, .35, 1); }
.s[data-failed] { height: auto !important; }
.s[data-failed] .stage { position: relative !important; height: auto !important; min-height: 100svh; }

/* ---------- sheet transition: data-enter="sheet" on the arriving section ---------- */
.s[data-enter=sheet] { margin-top: calc(var(--radius-sheet) * -1); border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; overflow: clip; box-shadow: var(--shadow-sheet); }
.s[data-enter=sheet][data-theme=velvet], .s[data-enter=sheet][data-theme=deep], .s[data-enter=sheet][data-theme=ink] { box-shadow: var(--edge-sheet-dark); }
.s[data-enter=sheet].th-clean:not([data-theme=velvet]):not([data-theme=deep]):not([data-theme=ink]) { box-shadow: none; }
.s.th-held { position: sticky; top: var(--st, 0px); transform-origin: 50% var(--o, 100%); }
#th-under { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.th-dim { position: absolute; inset: 0; z-index: 60; pointer-events: none; opacity: 0; background: #000; }
:not(body)[data-theme=white] > .th-dim, :not(body)[data-theme=grey] > .th-dim, :not(body)[data-theme=ivory] > .th-dim { background: var(--velvet-edge); }
.th-nc { position: absolute; top: -1px; z-index: 61; width: var(--radius-sheet); height: var(--radius-sheet); pointer-events: none; transform: scale(0); }
.th-nc--l { left: -1px; transform-origin: 0 0; background: radial-gradient(circle at 100% 100%, transparent var(--radius-sheet), var(--nc) calc(var(--radius-sheet) + 1px)); }
.th-nc--r { right: -1px; transform-origin: 100% 0; background: radial-gradient(circle at 0 100%, transparent var(--radius-sheet), var(--nc) calc(var(--radius-sheet) + 1px)); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border: 1px solid transparent; border-radius: 999px; background: var(--btn-bg); color: var(--btn-fg); font-family: var(--th-sans); font-weight: 600; font-size: 17px; line-height: 1; letter-spacing: -.016em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform .3s var(--spring), background-color .25s var(--out), color .25s var(--out); }
.btn i { display: inline-grid; place-items: center; width: 13px; height: 13px; font-style: normal; transition: transform .35s var(--spring); }
.btn svg { width: 13px; height: 13px; }
.btn:active { transform: scale(.97); transition-duration: .1s; }
.btn--ghost, .btn--line { background: transparent; border-color: var(--gh-line); color: var(--gh-fg); text-decoration: var(--gh-deco); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.btn--bone { background: var(--btn-bg); color: var(--btn-fg); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--btn-hover); }
  .btn:hover i { transform: translate(2px, -2px); }
  .btn--ghost:hover, .btn--line:hover { background: var(--gh-hover); }
}

/* ---------- nav pill: the page sets html[data-under] from the section under it ---------- */
html[data-under=light] { --nav-fg: #1C1A1B; --nav-fg2: #625C5E; --nav-bg: rgba(255, 255, 255, .74); --nav-solid: #FFFFFF; --nav-line: rgba(28, 26, 27, .10); --nav-btn-bg: #5A0F22; --nav-btn-fg: #FFFFFF; --nav-btn-hover: #6E1529; --bar: #5A0F22; }
html[data-under=dark], html.menu-open { --nav-fg: #FFFFFF; --nav-fg2: rgba(255, 255, 255, .76); --nav-bg: rgba(26, 6, 12, .46); --nav-solid: #2A050E; --nav-line: rgba(255, 255, 255, .18); --nav-btn-bg: #FFFFFF; --nav-btn-fg: #5A0F22; --nav-btn-hover: #F6F2E9; --bar: #FFFFFF; }
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 500; background: var(--bar, #5A0F22); transform: scaleX(0); transform-origin: 0 50%; }
.nav { position: fixed; top: max(12px, env(safe-area-inset-top)); left: 0; right: 0; z-index: 300; pointer-events: none; }
.nav__p { pointer-events: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 56px; padding: 0 8px 0 20px; border: 1px solid var(--nav-line); border-radius: 999px; background: var(--nav-bg); color: var(--nav-fg); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); transition: background-color .3s var(--out), border-color .3s var(--out), color .3s var(--out); }
html[data-motion=lite] .nav__p, html[data-motion=still] .nav__p { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--nav-solid); }
.nav__m { display: flex; align-items: center; min-height: 44px; color: inherit; }
.nav__m .sig { width: 88px; }
.nav__l { display: none; gap: 24px; }
.nav__l a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; letter-spacing: -.016em; text-decoration: none; color: var(--nav-fg2); transition: color .2s var(--out); }
.nav__l a:hover, .nav__l a[aria-current] { color: var(--nav-fg); }
.nav__e { display: flex; align-items: center; gap: 8px; }
.nav .btn { min-height: 40px; padding: 0 18px; font-size: 14px; background: var(--nav-btn-bg); color: var(--nav-btn-fg); }
@media (hover: hover) and (pointer: fine) { .nav .btn:hover { background: var(--nav-btn-hover); } }
.nav__cta { display: none; }
.burger { position: relative; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.burger span { position: absolute; left: 12px; right: 12px; top: 50%; height: 1.5px; margin-top: -1px; background: var(--nav-fg); transition: transform .4s var(--spring), background-color .3s var(--out); }
.burger span:first-child { transform: translateY(-4px); }
.burger span:last-child { transform: translateY(4px); }
.burger[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }

/* phone menu: drops in with a hard edge */
html.menu-open { overflow-y: hidden; }
.sheet { position: fixed; inset: 0; z-index: 250; display: flex; flex-direction: column; justify-content: flex-start; padding: 96px var(--gutter) max(32px, env(safe-area-inset-bottom)); overflow-y: auto; color: #fff; background-color: var(--velvet-base); background-image: radial-gradient(96% 64% at 50% 30%, var(--velvet-crown) 0, var(--velvet-lit) 38%, var(--velvet-base) 76%, var(--velvet-edge) 130%); --btn-bg: #fff; --btn-fg: #5A0F22; --btn-hover: #F6F2E9; --gh-fg: #fff; --gh-line: rgba(255, 255, 255, .4); --gh-hover: rgba(255, 255, 255, .1); --gh-deco: none; transform: translate3d(0, -101%, 0); visibility: hidden; transition: transform .55s var(--spring), visibility 0s linear .55s; }
.sheet.is-open { transform: none; visibility: visible; transition-delay: 0s; }
html[data-motion=still] .sheet { transition: none; }
.sheet > :first-child { margin-top: auto; }
.sheet a.big { display: block; font-family: var(--th-poster); font-weight: 400; font-size: clamp(30px, min(14vw, calc((100svh - 236px) / 8.4)), 72px); line-height: 1.04; letter-spacing: 0; text-transform: uppercase; text-decoration: none; color: #fff; opacity: 0; transform: translateY(24px); transition: opacity .5s var(--out), transform .6s var(--spring); transition-delay: calc(var(--n) * 40ms); }
.sheet.is-open a.big { opacity: 1; transform: none; }
.sheet .actions { margin-top: 24px; }
@media (min-width: 1040px) { .nav__l { display: flex; } .burger { display: none; } .nav__cta { display: inline-flex; } .sheet { display: none; } }

/* ---------- footer ---------- */
.ft { padding-block: var(--section) 40px; }
.ft__w { font-size: clamp(90px, 25vw, 288px); white-space: nowrap; color: #fff; }
.ft__t { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; margin-top: 32px; }
.ft__sg { width: min(62%, 300px); color: #fff; }
.ft__c { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line); }
.ft__c h3 { font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: #fff; }
.ft__c ul { margin-top: 8px; }
.ft__l a { display: inline-block; min-width: 40px; padding-block: 11px; margin-block: -11px; }
.ft__c a { display: inline-flex; align-items: center; min-height: 40px; min-width: 40px; font-size: 15px; color: var(--on-velvet-2); text-decoration: none; transition: color .2s var(--out); }
.ft__c a:hover { color: #fff; }
.ft__l { margin-top: 40px; font-size: 14px; line-height: 1.6; letter-spacing: -.01em; color: var(--on-velvet-3); }
.ft__l a { color: inherit; text-underline-offset: 3px; }
@media (min-width: 900px) { .ft__c { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Tony Huge v7 inner pages and reader. Loaded after base.css, before the home sections. Everything is scoped to i-* classes, .ih or .rd. ---------- */
:not(body)[data-theme=white], :not(body)[data-theme=grey], :not(body)[data-theme=ivory] { --hot: var(--on-light-accent); }
:not(body)[data-theme=velvet], :not(body)[data-theme=deep], :not(body)[data-theme=ink] { --hot: #fff; }

/* sentences: SF, large, one breath */
.i-say { font-weight: 600; font-size: clamp(23px, 6vw, 34px); line-height: 1.16; letter-spacing: -.02em; color: var(--fg); max-width: 640px; text-wrap: pretty; }
html.no-sf .i-say { letter-spacing: -.01em; }
.i-gap { margin-top: clamp(20px, 3vw, 32px); }
.i-cap { margin-top: 14px; font-size: 14px; line-height: 1.43; letter-spacing: -.016em; color: var(--fg2); }

/* ---------- page head: poster, one sentence, then the photo, hard-edged, flush to the bottom so the next sheet rides over it ---------- */
.ih { display: flex; flex-direction: column; min-height: calc(100svh + var(--radius-sheet)); padding-top: 96px; }
.ih__t { padding-bottom: 28px; }
.ih__c { width: 100%; }
.ih h1 { color: var(--hot); }
.ih__l { margin-top: 18px; max-width: 20em; font-weight: 600; font-size: clamp(25px, 6.8vw, 42px); line-height: 1.12; letter-spacing: -.024em; color: var(--fg); text-wrap: balance; }
html.no-sf .ih__l { letter-spacing: -.012em; }
.ih__f { flex: 1 0 var(--mh, 112vw); margin: 0; min-height: 0; overflow: clip; background: var(--bg); }
.ih__f { position: relative; }
.ih__f img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--op, 50% 30%); }
.ih__row { flex: 1 0 auto; display: flex; align-items: flex-end; overflow: clip; padding-block: 12px calc(var(--radius-sheet) + 44px); perspective: 1200px; }
.ih__row .drift { margin-top: 0; }
.ih__row .bkc { background: var(--ivory); color: var(--on-light-accent); box-shadow: inset 7px 0 8px -5px rgba(90, 15, 34, .35), -10px 24px 36px -18px rgba(13, 3, 6, .7); }
.ih__row .bkc--ink { background: var(--ink); color: #fff; }
.ih__row .bkc--tob { background: var(--titanium); color: var(--on-light-1); }
.ih__row .bkc--bone { background: #fff; color: var(--on-light-accent); }
.ih__row .bkc__t, .bks .bkc__t { font-family: var(--th-poster); font-weight: 400; letter-spacing: 0; text-transform: uppercase; font-size: calc(var(--s, .14) * 148cqw); line-height: 1; }
.ih__row .bkc__a, .bks .bkc__a { letter-spacing: -.01em; }
@media (min-width: 900px) {
  .ih { padding-top: 116px; }
  .ih__t { padding-bottom: 44px; }
  .ih__f { flex: 0 0 min(88svh, 56vw); transform-origin: 50% 0; }
  .ih__f img { object-position: var(--op-w, var(--op, 50% 30%)); }
  .ih--split { flex-direction: row; align-items: center; padding-block: 116px calc(var(--radius-sheet) + 64px); }
  .ih--split .ih__t { padding-bottom: 0; }
  .ih--split .ih__c { width: 46%; }
  .ih--split .ih__f { position: absolute; top: 0; bottom: 0; left: 50%; right: 0; height: auto; }
}

/* ---------- story bands ---------- */
.i-step__w { padding-block: 84px 44px; }
.i-step--t .i-step__w { padding-block: 84px; }
.i-step[data-enter=sheet] .i-step__w { padding-top: 100px; }
.i-y { color: var(--hot); }
.i-step__x { margin-top: 18px; }
.i-step__h { font-family: var(--th-sans); font-weight: 600; font-size: clamp(31px, 8.4vw, 46px); line-height: 1.07; letter-spacing: -.022em; color: var(--fg); text-wrap: balance; }
html.no-sf .i-step__h { letter-spacing: -.012em; }
.i-step__x .lead { margin-top: 14px; max-width: 34em; }
.i-step__x .lead, .i-big .lead, .i-two .lead, .i-film__b .lead { font-size: clamp(19px, 4.9vw, 24px); line-height: 1.34; }
.i-step__end { margin-top: 48px; }
.i-step__end .actions { margin-top: 24px; }
.i-step__f { margin: 0; height: 118vw; overflow: clip; }
.i-step__f img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--op, 50% 30%); }
@media (min-width: 900px) {
  .i-step--p { display: flex; align-items: center; min-height: 100svh; }
  .i-step--p .i-step__w { padding-block: 120px; }
  .i-step--p .i-step__c { width: 46%; }
  .i-step--p.i-step--flip .i-step__c { margin-left: auto; }
  .i-step--p .i-step__f { position: absolute; top: 0; bottom: 0; left: 50%; right: 0; height: auto; }
  .i-step--p.i-step--flip .i-step__f { left: 0; right: 50%; }
  .i-step--framed .i-step__f, .i-step--p.i-step--flip.i-step--framed .i-step__f { top: 50%; bottom: auto; left: auto; right: max(var(--gutter), calc(50% - 520px)); width: 38%; max-width: 390px; height: auto; aspect-ratio: 4 / 5; transform: translateY(-50%); }
  .i-step--p.i-step--flip.i-step--framed .i-step__f { right: auto; left: max(var(--gutter), calc(50% - 520px)); }
  .i-step--t .i-step__w { padding-block: var(--section); }
  .i-step--t .i-step__c { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: end; }
  .i-step--t .i-step__x { margin-top: 0; padding-bottom: 12px; }
}

/* ---------- films ---------- */
.i-when { margin-top: 18px; font-size: clamp(48px, 12.4vw, 84px); color: var(--hot); }
.i-tv { margin-top: clamp(28px, 5vw, 56px); }
.i-tv .yt { border-radius: 0; background: var(--surface, #111); box-shadow: none; }
.i-tv .yt b { background: #fff; color: var(--velvet-base); }
.i-film__b { display: grid; gap: 18px; margin-top: 24px; }
.i-film__y { font-size: clamp(38px, 10vw, 60px); color: var(--hot); white-space: normal; }
.i-film__l { display: grid; gap: clamp(88px, 13vw, 144px); }
@media (min-width: 900px) {
  .i-film__b { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
  .i-film__b .actions { justify-content: flex-end; }
}

/* ---------- two sides ---------- */
.i-two { display: grid; gap: 40px; margin-top: clamp(44px, 7vw, 80px); }
.i-two > div { padding-top: 24px; border-top: 1px solid var(--line); }
.i-two .lead { margin-top: 14px; }
@media (min-width: 900px) { .i-two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; } }

/* ---------- big statement stack ---------- */
.i-big { display: grid; gap: clamp(56px, 9vw, 96px); margin-top: clamp(56px, 9vw, 104px); }
.i-big .poster { color: var(--hot); }
.i-big .lead { margin-top: 18px; max-width: 640px; }

/* ---------- numbered rows and fact rows ---------- */
.i-num { margin-top: clamp(40px, 7vw, 72px); padding: 0; list-style: none; }
.i-num li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; align-items: start; padding-block: 28px; border-top: 1px solid var(--line); }
.i-num b { font-size: 96px; color: #fff; line-height: .84; }
.i-num h3 { font-size: clamp(50px, 13.4vw, 92px); color: #fff; line-height: .94; }
.i-num .lead { margin-top: 10px; }
.i-rows { margin-top: clamp(40px, 7vw, 72px); }
.i-rows--0 { margin-top: 0; }
.i-rows--0 .i-row:first-child { border-top: 0; padding-top: 0; }
.i-row { display: grid; gap: 14px; padding-block: 28px 32px; border-top: 1px solid var(--line); }
.i-row .poster { font-size: clamp(62px, 16.6vw, 112px); line-height: .94; color: var(--hot); }
.i-row small { display: block; margin-top: 14px; font-size: 15px; line-height: 1.4; color: var(--fg2); }
.i-row small a { display: inline-block; padding-block: 12px; color: inherit; text-underline-offset: 3px; }
.i-row .code { margin-top: 12px; font-weight: 600; color: var(--fg); }
.i-row .actions { margin-top: 18px; }
@media (min-width: 900px) {
  .i-row { grid-template-columns: 5fr 7fr; gap: 48px; padding-block: 36px 42px; align-items: baseline; }
  .i-num li { grid-template-columns: 136px minmax(0, 1fr); gap: 32px; padding-block: 36px; }
  .i-num b { font-size: 176px; }
}

/* ---------- bento tiles: colour, huge name, nothing else ---------- */
.i-tile { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-height: 300px; padding: 26px; border-radius: var(--radius-lg); background: var(--bg); color: var(--fg); text-decoration: none; overflow: clip; }
.i-tile[data-tile=ti] { --bg: var(--titanium); --fg: var(--on-light-1); --fg2: #2F2A2C; }
.i-tile[data-tile=stone] { --bg: var(--stone); --fg: var(--on-light-1); --fg2: var(--on-light-2); }
.i-tile__m { min-width: 0; }
.i-tile .poster { font-size: 64px; line-height: .92; color: var(--fg); overflow-wrap: normal; }
.i-tile p { margin-top: 12px; max-width: 26em; font-size: 17px; line-height: 1.35; letter-spacing: -.016em; color: var(--fg2); }
.i-tile__go { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 17px; letter-spacing: -.016em; }
.i-tile__go i { display: inline-grid; place-items: center; width: 13px; height: 13px; transition: transform .35s var(--spring); }
.i-tile__go svg { width: 13px; height: 13px; }
@media (hover: hover) and (pointer: fine) { .i-tile:hover .i-tile__go i { transform: translate(3px, -3px); } }
.i-bento { display: grid; gap: 12px; margin-top: clamp(32px, 5vw, 48px); }
.i-rail { margin-top: clamp(32px, 5vw, 48px); }
.i-rail .i-tile { width: min(80vw, 340px); min-height: 400px; }
@media (min-width: 900px) {
  .i-bento, .i-rail { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
  .i-rail { max-width: var(--container); margin-inline: auto; overflow: visible; }
  .i-bento .i-tile, .i-rail .i-tile { grid-column: span 7; width: auto; min-height: 380px; padding: 36px; }
  .i-bento .i-tile:nth-child(4n+2), .i-bento .i-tile:nth-child(4n+3), .i-rail .i-tile:nth-child(4n+2), .i-rail .i-tile:nth-child(4n+3) { grid-column: span 5; }
}

/* ---------- index of guides ---------- */
.i-idx { display: grid; margin-top: clamp(32px, 5vw, 56px); }
.i-idx__a { position: relative; display: block; padding-block: 24px 26px; padding-right: 32px; border-top: 1px solid var(--line); color: var(--fg); text-decoration: none; }
.i-idx__a h3 { font-size: clamp(56px, 15vw, 84px); line-height: .94; color: #fff; }
.i-idx__a p { margin-top: 8px; font-size: 17px; line-height: 1.35; letter-spacing: -.016em; color: var(--fg2); }
.i-idx__a i { position: absolute; top: 34px; right: 2px; width: 16px; height: 16px; color: #fff; transition: transform .35s var(--spring); }
@media (hover: hover) and (pointer: fine) { .i-idx__a:hover i { transform: translate(3px, -3px); } }
@media (min-width: 900px) { .i-idx { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; } }

/* ---------- wall of names, each line fitted to the column ---------- */
.i-wall { display: grid; gap: clamp(40px, 7vw, 76px); }
.i-wall .poster { color: #fff; }
.i-wall .i-say { margin-top: 12px; color: var(--on-velvet-2); font-weight: 600; font-size: clamp(19px, 5vw, 26px); }

/* ---------- plans ---------- */
.i-plans { display: grid; margin-top: clamp(40px, 6vw, 64px); }
.i-plan { display: grid; justify-items: start; gap: 12px; padding-block: 28px 36px; border-top: 1px solid var(--line); }
.i-plan h3 { font-family: var(--th-sans); font-weight: 600; font-size: clamp(22px, 5.6vw, 26px); line-height: 1.14; letter-spacing: -.016em; color: #fff; }
.i-plan b { font-size: clamp(148px, 42vw, 196px); line-height: .92; color: #fff; }
.i-plan p { font-size: 19px; line-height: 1.32; letter-spacing: -.012em; color: var(--on-velvet-2); min-height: 2.64em; }
@media (min-width: 900px) {
  .i-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; }
  .i-plan { padding-bottom: 0; }
}

/* ---------- what you get, how it runs ---------- */
.i-get { display: grid; gap: 0 56px; margin-top: clamp(40px, 7vw, 72px); }
.i-get > div { padding-block: 24px 30px; border-top: 1px solid var(--line); }
.i-get h3 { font-size: clamp(54px, 14.4vw, 76px); line-height: .94; color: var(--hot); }
.i-get .lead { margin-top: 10px; }
@media (min-width: 900px) { .i-get { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.i-how { display: grid; gap: 8px; margin-top: clamp(40px, 7vw, 72px); padding: 0; list-style: none; }
.i-how li { padding-block: 24px 28px; border-top: 1px solid var(--line); }
.i-how b { display: block; font-size: clamp(180px, 50vw, 250px); line-height: .9; color: #fff; }
.i-how h3 { margin-top: 6px; font-size: clamp(50px, 13.4vw, 68px); line-height: .94; color: #fff; }
.i-how .lead { margin-top: 8px; }
@media (min-width: 900px) { .i-how { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; } }

/* ---------- forms ---------- */
.i-form { max-width: none; margin-top: clamp(36px, 6vw, 64px); gap: 20px; }
.i-form label { font-weight: 600; font-size: 15px; letter-spacing: -.012em; }
.i-form input, .i-form select, .i-form textarea { min-height: 60px; border-color: transparent; background: var(--apple-grey); }
.i-form input:focus, .i-form select:focus, .i-form textarea:focus { border-color: var(--on-light-accent); outline: 0; }
.i-form [aria-invalid] { border-color: var(--on-light-accent); }
@media (min-width: 900px) {
  .i-form:not(.i-form--1) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .i-form__w { grid-column: 1 / -1; }
}

/* ---------- questions ---------- */
.i-faq { margin-top: clamp(36px, 6vw, 64px); }
.i-faq summary { align-items: center; padding-block: 20px; font-weight: 600; font-size: clamp(21px, 5.4vw, 28px); line-height: 1.16; letter-spacing: -.016em; }
.i-faq summary::after { color: var(--fg); font-size: 28px; }
.i-faq p { max-width: 640px; padding-bottom: 24px; font-size: 19px; line-height: 1.42; letter-spacing: -.012em; color: var(--fg2); }

/* ---------- library shelf ---------- */
.i-lib { padding-block: 44px var(--section); }
.i-lib .tools { margin-top: 0; background: rgba(255, 255, 255, .94); }
.i-lib .srch { background: var(--apple-grey); border-color: transparent; }
.i-lib .chip { border-color: var(--line); font-weight: 600; font-size: 15px; letter-spacing: -.012em; }
.i-lib .chip[aria-pressed="true"] { background: var(--burgundy); border-color: var(--burgundy); color: #fff; }
.bks .bkc { background: var(--velvet-lit); color: #fff; }
.bks .bkc--ink { background: var(--ink); color: #fff; }
.bks .bkc--tob { background: var(--titanium); color: var(--on-light-1); }
.bks .bkc--bone { background: var(--ivory); color: var(--on-light-accent); }
.bks .bk__n { font-size: 17px; letter-spacing: -.016em; }
.bks .bk__m { font-size: 14px; letter-spacing: -.012em; color: var(--on-light-2); }

/* ---------- links ---------- */
.i-lks__sig { width: min(62vw, 300px); margin-bottom: 40px; color: #fff; }
.i-lk { display: grid; }
.i-lk a { position: relative; display: block; padding-block: 18px 20px; padding-right: 32px; border-top: 1px solid var(--line); color: #fff; text-decoration: none; }
.i-lk b { display: block; font-size: clamp(44px, 12vw, 76px); line-height: .96; color: #fff; }
.i-lk span { display: block; margin-top: 6px; font-size: 17px; letter-spacing: -.016em; color: var(--on-velvet-2); }
.i-lk i { position: absolute; top: 26px; right: 2px; width: 16px; height: 16px; transition: transform .35s var(--spring); }
@media (hover: hover) and (pointer: fine) { .i-lk a:hover i { transform: translate(3px, -3px); } }
@media (min-width: 900px) { .i-lk { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; } }

/* ---------- contact ---------- */
.i-ct { display: grid; gap: 56px; padding-top: 16px; }
.i-ct__m { display: grid; gap: 40px; align-content: start; }
.i-ct__e { display: block; margin-top: 8px; font-family: var(--th-poster); font-size: clamp(44px, 12.6vw, 68px); line-height: 1; text-transform: uppercase; color: var(--on-light-accent); text-decoration: none; overflow-wrap: anywhere; }
.i-ct__s { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 8px; }
.i-ct__s a { font-size: clamp(48px, 13vw, 68px); line-height: 1.04; color: var(--on-light-1); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .i-ct__s a:hover, .i-ct__e:hover { color: var(--burgundy-hover); } }
.i-ct .i-form { margin-top: 0; }
@media (min-width: 900px) { .i-ct { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; } }

/* ---------- e-book band: a burgundy book on ivory, one hard edge into the velvet footer ---------- */
.i-eb { --bw: min(60vw, 280px); --bd: calc(var(--bw) * .13); }
.i-eb__w { display: grid; gap: 44px; padding-block: 100px var(--section); }
.i-eb .poster { color: var(--on-light-accent); }
.i-eb .ebx { margin-top: 8px; }
.i-eb .ebf input { width: 100%; min-width: 0; }
.i-bk { display: grid; place-items: center; }
.i-bk__s { perspective: 1100px; }
.i-bk__b { position: relative; width: var(--bw); height: calc(var(--bw) * 1.42); transform-style: preserve-3d; transform: rotateX(4deg) rotateY(-26deg); }
.i-bk__f { position: absolute; display: block; }
.i-bk__c { inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: calc(var(--bw) * .09); border-radius: 2px 6px 6px 2px; background: radial-gradient(120% 90% at 40% 22%, var(--velvet-crown), var(--velvet-lit) 44%, var(--velvet-base) 100%); color: #fff; transform: translateZ(calc(var(--bd) / 2)); box-shadow: inset calc(var(--bw) * .035) 0 calc(var(--bw) * .04) calc(var(--bw) * -.02) rgba(13, 3, 6, .6), -26px 44px 60px -28px rgba(42, 5, 14, .55); }
.i-eb .i-bk__t { display: block; line-height: .9; color: #fff; }
.i-bk__t span { display: block; white-space: nowrap; }
.i-bk__t span:nth-child(1) { font-size: calc(var(--bw) * .307); }
.i-bk__t span:nth-child(2) { font-size: calc(var(--bw) * .415); }
.i-bk__t span:nth-child(3) { font-size: calc(var(--bw) * .46); }
.i-bk__c .sig { width: 46%; align-self: flex-end; color: #fff; }
.i-bk__p { top: 1%; left: calc(50% - var(--bd) / 2); width: var(--bd); height: 98%; background: repeating-linear-gradient(90deg, #F6F2E9 0 1px, #DDD4C4 1px 2px); transform: rotateY(90deg) translateZ(calc(var(--bw) / 2 - 2px)); }
.i-bk__sp { top: 0; left: calc(50% - var(--bd) / 2); width: var(--bd); height: 100%; background: var(--velvet-base); transform: rotateY(-90deg) translateZ(calc(var(--bw) / 2)); }
@media (min-width: 900px) {
  .i-eb { --bw: 300px; }
  .i-eb__w { grid-template-columns: 380px minmax(0, 1fr); gap: 72px; align-items: center; padding-block: var(--section); }
}

/* ---------- reader: white and quiet by default, the site's title voice on top. All the reading controls stay. ---------- */
.rd { --read-white: #FFFFFF; --read-white-ink: var(--on-light-1); --read-white-soft: var(--on-light-2); --read-white-line: rgba(28, 26, 27, .12); --read-white-glass: rgba(255, 255, 255, .84); }
.ra { max-width: calc(640px + var(--space-lg) * 2); }
.ra h1, .rd[data-face="serif"] .ra h1 { font-family: var(--th-poster); font-weight: 400; font-size: clamp(60px, 15.8vw, 92px); line-height: .94; letter-spacing: 0; text-transform: uppercase; text-wrap: balance; }
.rd[data-theme="white"] .ra h1 { color: var(--on-light-accent); }
.ra__m { margin-top: 20px; font-size: 15px; letter-spacing: -.012em; }
.sum { margin-top: 44px; padding: 20px 0 8px; border-radius: 0; border-top: 2px solid var(--r-ink); background: transparent; font-size: 1.0625rem; letter-spacing: -.012em; }
.rd[data-theme="white"] .sum { border-top-color: var(--on-light-accent); }
.sum h2 { font-family: var(--th-poster); font-weight: 400; font-size: 44px; line-height: 1; text-transform: uppercase; }
.rx-b { margin-top: 36px; }
.rx-b h2 { font-weight: 700; letter-spacing: -.02em; }
.rd[data-face="sans"] .rx-b { letter-spacing: -.012em; }
.rd[data-theme="white"] .rx-b a { text-decoration-color: var(--on-light-accent); }
.rd[data-theme="white"] .rx-b blockquote { border-left-color: var(--on-light-accent); }
.rd[data-theme="white"] .rb__p i { background: var(--on-light-accent); }
.rx-b img { border-radius: 0; }
.nxt { border-radius: 0; color: #fff; background: radial-gradient(96% 90% at 50% 20%, var(--velvet-crown) 0, var(--velvet-lit) 44%, var(--velvet-base) 100%); padding: 28px 24px 30px; }
.nxt small { font-size: 15px; opacity: .85; }
.nxt b { margin-top: 6px; font-family: var(--th-poster); font-weight: 400; font-size: clamp(48px, 12vw, 76px); line-height: .96; letter-spacing: 0; text-transform: uppercase; text-wrap: balance; }

/* a partner row that leads with the brand's own logo instead of its name set in the poster face */
.i-logo { margin: 0; line-height: 0; }
.i-logo img { display: block; width: auto; height: calc(var(--lh, 40px) * .82); max-width: 100%; }
@media (min-width: 900px) { .i-logo img { height: var(--lh, 40px); } .i-row--logo { align-items: center; } }

/* 00-hero */
/* Hero. Back to front: wall, light, grain, his shadow on the wall, the ring's shadow on the wall, far half of the ring, him, the ring's shadow on him, near half of the ring, hook. Each half is its own stacked plane, so the ring goes behind and in front of him in every browser. */
.s-hero { --hxcol: calc(100vw - var(--gutter) * 2); --hxtw: 134vw; --hxth: calc(134vw * 1.0346); --hxcx: 50%; --kx: 70%; --ky: 24%; }
.s-hero .stage { touch-action: pan-y; }

/* ---------- the wall ---------- */
.hx-wall { position: absolute; inset: -5%; z-index: 0; will-change: transform; }
.hx-c { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .7s linear; }
.hx-c.is-on { opacity: 1; }
.hx-c--b.is-on { opacity: 0; transition: none; }
.hx-pool { position: absolute; left: 0; top: 0; z-index: 1; width: 130vmax; height: 130vmax; margin: -65vmax 0 0 -65vmax; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(176, 30, 66, .16), rgba(150, 24, 58, .07) 46%, rgba(120, 16, 48, 0) 100%); will-change: transform; }
.hx-grain { position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: var(--grain); background-size: 360px 360px; opacity: .2; }
.hx-cast { position: absolute; left: 0; top: 0; z-index: 2; max-width: none; pointer-events: none; opacity: .78; will-change: transform; }
.hx-foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 34%; pointer-events: none; background: linear-gradient(180deg, rgba(26, 4, 11, 0), rgba(26, 4, 11, .55)); }

/* ---------- 3D planes: never opacity, filter, overflow or masks on the nodes inside ---------- */
.hx-3d { position: absolute; inset: 0; pointer-events: none; perspective: var(--hxp, 900px); perspective-origin: var(--hxcx) 50%; }
.hx-3d--ws { z-index: 3; }
.hx-3d--bk { z-index: 4; }
.hx-3d--tn { z-index: 5; }
.hx-3d--bs { z-index: 6; transform-origin: var(--hxcx) 50%; will-change: transform; -webkit-mask: url(img/v7/hero-final-900.webp) var(--hxmx, 0) var(--hxmy, 0) / var(--hxtw) var(--hxth) no-repeat; mask: url(img/v7/hero-final-900.webp) var(--hxmx, 0) var(--hxmy, 0) / var(--hxtw) var(--hxth) no-repeat; }
.hx-3d--fr { z-index: 7; }
.hx-n { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; }
.hx-cam, .hx-3d--ws > .hx-ring { left: var(--hxcx); top: 50%; }
.s-hero.hx-off { visibility: hidden; }

.hx-tony { position: absolute; left: 0; top: 0; width: var(--hxtw); height: var(--hxth); transform: translate3d(calc(var(--hxtw) * -.5), -6svh, 0); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.hx-tony__i { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; -webkit-user-select: none; user-select: none; -webkit-mask-image: linear-gradient(#000 80%, rgba(0, 0, 0, .25) 97%, transparent 100%); mask-image: linear-gradient(#000 80%, rgba(0, 0, 0, .25) 97%, transparent 100%); }
/* the kicker: a sliver of lamp on the inside of his lit edge. Cut from his own outline minus the same outline nudged away from the lamp, so it can never sit outside the skin as a halo */
.hx-tony__r { position: absolute; inset: 0 0 16% 0; pointer-events: none; filter: blur(calc(var(--hxtw) * .0011)); background: linear-gradient(100deg, rgba(255, 222, 190, 0) 50%, rgba(255, 222, 190, .24) 72%, rgba(255, 232, 208, .5) 100%); -webkit-mask: url(img/v7/hero-final-900.webp) 0 0 / 100% 119.05% no-repeat, url(img/v7/hero-final-900.webp) calc(var(--hxtw) * -.0042) calc(var(--hxtw) * .0028) / 100% 119.05% no-repeat; mask: url(img/v7/hero-final-900.webp) 0 0 / 100% 119.05% no-repeat, url(img/v7/hero-final-900.webp) calc(var(--hxtw) * -.0042) calc(var(--hxtw) * .0028) / 100% 119.05% no-repeat; -webkit-mask-composite: source-out; mask-composite: subtract; }
/* the two relight sheets: cut to his outline, only their opacity ever changes */
.hx-tony__s, .hx-tony__l { position: absolute; inset: 0; pointer-events: none; -webkit-mask: url(img/v7/hero-final-900.webp) center / 100% 100% no-repeat; mask: url(img/v7/hero-final-900.webp) center / 100% 100% no-repeat; }
.hx-tony__s { background: linear-gradient(98deg, rgba(58, 4, 20, .56) 0, rgba(58, 4, 20, .24) 26%, rgba(58, 4, 20, 0) 52%), linear-gradient(180deg, rgba(40, 3, 14, 0) 62%, rgba(40, 3, 14, .58) 100%); }
.hx-tony__l { background: radial-gradient(70% 54% at 66% 30%, rgba(255, 226, 190, .28) 0, rgba(255, 214, 170, .1) 46%, rgba(255, 214, 170, 0) 74%); opacity: .7; will-change: opacity; }

/* ---------- ring panels: each one holds the whole sentence, slid so only its own slice shows ---------- */
.hx-p { position: absolute; left: calc(var(--hxw) / -2 - 1.5px); top: calc(var(--hxh) / -2); width: calc(var(--hxw) + 3px); height: var(--hxh); transform-style: preserve-3d; }
.hx-f { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.hx-f--o { color: #fff; }
.hx-f--b { color: #F0E4E5; transform: rotateY(180deg); }
.hx-l { position: absolute; top: 0; white-space: nowrap; font-family: var(--th-poster); font-weight: 400; font-size: var(--hxfs); line-height: var(--hxh); letter-spacing: .012em; text-transform: uppercase; }
.hx-l b { font-weight: 400; margin-right: .62em; }
/* the near half has a body: a hard burgundy return on the letters, then a soft fall-off onto whatever is behind */
.hx-3d--fr .hx-l { text-shadow: -.006em .007em 0 #d8c3c8, -.012em .014em 0 #8d1f38, -.018em .021em 0 #6c1329, -.024em .028em 0 #560d20, -.03em .035em 0 #450a1a, -.036em .042em 0 #370815, -.04em .08em .16em rgba(22, 2, 8, .55); }
.hx-3d--bk .hx-l { text-shadow: 0 0 .03em rgba(240, 228, 229, .5); }
.hx-3d--ws .hx-f { backface-visibility: visible; -webkit-backface-visibility: visible; }
.hx-3d--ws .hx-l { color: transparent; text-shadow: 0 0 .2em rgba(14, 1, 5, .4), 0 0 .42em rgba(14, 1, 5, .24); }
.hx-3d--bs .hx-l { color: transparent; text-shadow: 0 0 .12em rgba(48, 10, 8, .62), 0 0 .3em rgba(48, 10, 8, .4); }
#hx-measure { position: absolute; left: -99999px; top: 0; visibility: hidden; --hxfs: 100px; --hxh: 100px; }

.hx-dark { position: absolute; inset: 0; z-index: 8; pointer-events: none; background: #0d0205; opacity: 0; }

/* ---------- the hook: phone stacks it on top ---------- */
.hx-hook { position: absolute; inset: 0; z-index: 9; pointer-events: none; padding-top: calc(max(12px, env(safe-area-inset-top)) + 56px + 10px); }
.hx-col { position: relative; width: var(--hxcol); }
.hx-col a, .hx-col button { pointer-events: auto; }
.hx-a { will-change: transform, opacity; }
.hx-h { color: #fff; text-wrap: initial; }
.hx-h .ln { position: relative; line-height: .9; }
.hx-h .ln1 { font-size: calc(var(--hxcol) / 2.53); margin-bottom: .02em; }
.hx-h .ln2 { font-size: calc(var(--hxcol) / 5.87); }
.hx-h .ln3 { font-size: calc(var(--hxcol) / 5.14); }
.hx-red { display: none; }
/* the censor bars: the scroll blacks out his own headline, line by line */
.hx-cb { position: absolute; left: calc(var(--ink, 0px) - 3px); right: -3px; top: .07em; bottom: .05em; overflow: hidden; pointer-events: none; }
.hx-cb i { display: block; width: 100%; height: 100%; background: #0B0304; will-change: transform; }
.hx-sub { margin: 10px 0 0; font-size: 17px; line-height: 1.32; letter-spacing: -.016em; color: var(--on-velvet-2); text-wrap: pretty; }
.hx-sub b { font-weight: 600; color: #fff; }

.hx-dr { display: block; position: relative; height: 1.5em; width: 100%; margin-block: .04em -.12em; perspective: 260px; -webkit-mask-image: linear-gradient(transparent, #000 24%, #000 76%, transparent); mask-image: linear-gradient(transparent, #000 24%, #000 76%, transparent); }
.hx-dr__in { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-style: preserve-3d; animation: hx-dr 26s infinite; }
.hx-off .hx-dr__in { animation-play-state: paused; }
.hx-dr i { position: absolute; left: 0; top: 0; width: 100%; height: 100%; font-style: normal; font-weight: 600; line-height: 1.5; color: #fff; white-space: nowrap; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.hx-dr i:nth-child(1) { transform: rotateX(0deg) translateZ(2.1em); }
.hx-dr i:nth-child(2) { transform: rotateX(-45deg) translateZ(2.1em); }
.hx-dr i:nth-child(3) { transform: rotateX(-90deg) translateZ(2.1em); }
.hx-dr i:nth-child(4) { transform: rotateX(-135deg) translateZ(2.1em); }
.hx-dr i:nth-child(5) { transform: rotateX(-180deg) translateZ(2.1em); }
.hx-dr i:nth-child(6) { transform: rotateX(-225deg) translateZ(2.1em); }
.hx-dr i:nth-child(7) { transform: rotateX(-270deg) translateZ(2.1em); }
.hx-dr i:nth-child(8) { transform: rotateX(-315deg) translateZ(2.1em); }
@keyframes hx-dr {
  0%, 9.5% { transform: translateZ(-2.1em) rotateX(0deg); animation-timing-function: cubic-bezier(.7, 0, .18, 1); }
  12.5%, 22% { transform: translateZ(-2.1em) rotateX(45deg); animation-timing-function: cubic-bezier(.7, 0, .18, 1); }
  25%, 34.5% { transform: translateZ(-2.1em) rotateX(90deg); animation-timing-function: cubic-bezier(.7, 0, .18, 1); }
  37.5%, 47% { transform: translateZ(-2.1em) rotateX(135deg); animation-timing-function: cubic-bezier(.7, 0, .18, 1); }
  50%, 59.5% { transform: translateZ(-2.1em) rotateX(180deg); animation-timing-function: cubic-bezier(.7, 0, .18, 1); }
  62.5%, 72% { transform: translateZ(-2.1em) rotateX(225deg); animation-timing-function: cubic-bezier(.7, 0, .18, 1); }
  75%, 84.5% { transform: translateZ(-2.1em) rotateX(270deg); animation-timing-function: cubic-bezier(.7, 0, .18, 1); }
  87.5%, 97% { transform: translateZ(-2.1em) rotateX(315deg); animation-timing-function: cubic-bezier(.7, 0, .18, 1); }
  100% { transform: translateZ(-2.1em) rotateX(360deg); }
}

.hx-b { position: absolute; left: 0; right: 0; top: 0; }
.hx-st { margin: 0; font-size: clamp(25px, 7vw, 30px); font-weight: 600; line-height: 1.12; letter-spacing: -.012em; color: #fff; text-wrap: balance; }
.hx-sig { width: 148px; margin: 12px 0 14px -4px; color: #fff; }
.hx-hulu { display: inline-flex; align-items: center; min-height: 44px; margin-top: 2px; font-size: 15px; letter-spacing: -.012em; color: var(--on-velvet-2); text-underline-offset: 3px; }

/* phone and any first paint: the second beat waits for the scroll, and shows by itself if the script never takes over */
html[data-motion=full] .s-hero:not(.hx-on) .hx-b, html[data-motion=lite] .s-hero:not(.hx-on) .hx-b { opacity: 0; visibility: hidden; animation: hx-failsafe 0s linear 7s forwards; }
@keyframes hx-failsafe { to { opacity: 1; visibility: visible; } }
.s-hero[data-failed] .hx-b, html[data-motion=still] .hx-b { position: static; opacity: 1; visibility: visible; margin-top: 18px; }

/* first paint: the room is dark, a censor bar sits on the word, the lights come up, the bar is pulled away. CSS only, so it never waits on a script. */
@media (prefers-reduced-motion: no-preference) {
  html[data-motion=full] .hx-dark, html[data-motion=lite] .hx-dark { animation: hx-lights 1.5s cubic-bezier(.3, 0, .2, 1) both; }
  html[data-motion=full] .hx-h .ln, html[data-motion=lite] .hx-h .ln { animation: hx-rise .95s var(--out, ease-out) both; }
  html[data-motion=full] .hx-h .ln2, html[data-motion=lite] .hx-h .ln2 { animation-delay: .09s; }
  html[data-motion=full] .hx-h .ln3, html[data-motion=lite] .hx-h .ln3 { animation-delay: .16s; }
  html[data-motion=full] .hx-sub, html[data-motion=lite] .hx-sub { animation: hx-rise .95s var(--out, ease-out) .26s both; }
  html[data-motion=full] .hx-red, html[data-motion=lite] .hx-red { display: block; position: absolute; left: -.015em; right: -.015em; top: .055em; bottom: .03em; background: #0B0304; transform-origin: 100% 50%; animation: hx-red .78s cubic-bezier(.77, 0, .18, 1) .62s both; }
}
@keyframes hx-lights { from { opacity: .92; } to { opacity: 0; } }
@keyframes hx-rise { from { opacity: 0; transform: translate3d(0, 34px, 0); } to { opacity: 1; transform: none; } }
@keyframes hx-red { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* short phones: one tight subtitle bar instead of two lines */
@media (max-height: 740px) and (max-width: 639px) {
  .hx-h .ln1 { font-size: min(calc(var(--hxcol) / 2.53), 21svh); }
  .hx-sub { font-size: 16px; margin-top: 8px; }
  .hx-st { font-size: 25px; }
  .hx-sig { width: 118px; margin: 8px 0 10px -4px; }
  .hx-hulu { min-height: 36px; }
}

/* desktop: hook left in a 380px column, body right */
@media (min-width: 900px), (min-width: 640px) and (min-aspect-ratio: 6/5) {
  .s-hero { --hxcol: 380px; --hxth: 90svh; --hxtw: calc(90svh / 1.0346); --hxcx: calc(max(var(--gutter), (100vw - 1040px) / 2) + 380px + 40px + var(--hxtw) / 2); }
  .hx-hook { padding-top: 56px; display: flex; align-items: center; }
  .hx-hook .wrap { width: 100%; }
  .hx-tony { transform: translate3d(calc(var(--hxtw) * -.5), -38svh, 0); }
  .hx-sub { font-size: 19px; margin-top: 16px; letter-spacing: -.014em; }
  .hx-b { position: static; margin-top: 26px; }
  html[data-motion=full] .s-hero:not(.hx-on) .hx-b, html[data-motion=lite] .s-hero:not(.hx-on) .hx-b { opacity: 1; visibility: visible; animation: none; }
  .hx-st { font-size: 20px; line-height: 1.22; }
  .hx-sig { width: 128px; margin: 10px 0 16px -4px; }
}

/* lite and still: no ring shadows, no relight */
html[data-motion=lite] .hx-3d--ws, html[data-motion=still] .hx-3d--ws, html[data-motion=lite] .hx-3d--bs, html[data-motion=still] .hx-3d--bs, html[data-motion=lite] .hx-tony__l, html[data-motion=still] .hx-tony__l { display: none; }
html[data-motion=still] .hx-dr__in { animation: none; transform: translateZ(-2.1em); }
html[data-motion=still] .hx-c { transition: none; }


/* 01-logos */
/* Logos: true colours, very big. Full tier: one ring of logos turning in true 3D, the same idea as the hero ring. Lite: a two-row marquee. Ink slides over the held hero with a hard edge. */
html.gs .s-logos { margin-top: -100svh; }
.s-logos { --lgk: 2.05; --lgx: 34px; display: flex; align-items: center; overflow: clip; }
.lg { width: 100%; display: flex; flex-direction: column; gap: clamp(36px, 9svh, 96px); perspective: 900px; perspective-origin: 50% 50%; }
.lg-r { will-change: transform; }
.lg-r--a { transform: rotateX(13deg); transform-origin: 50% 100%; }
.lg-r--b { transform: rotateX(-13deg); transform-origin: 50% 0; }
.lg-t { display: flex; align-items: center; width: max-content; margin: 0; padding: 0; list-style: none; animation: lg-run 54s linear infinite; }
.lg-t--rev { animation-direction: reverse; animation-duration: 66s; }
.lg-t li { flex: none; padding-inline: var(--lgx); }
.lg-t img { display: block; width: auto; height: calc(var(--h) * var(--lgk)); max-width: none; }
@keyframes lg-run { to { transform: translate3d(-33.3333%, 0, 0); } }
.s-logos.lg-off .lg-t { animation-play-state: paused; }
@media (min-width: 900px) { .s-logos { --lgk: 2.5; --lgx: 58px; } }
html[data-motion=lite] .lg-r--b { display: none; }
html[data-motion=still] .lg-t { animation: none; width: auto; flex-wrap: wrap; justify-content: center; gap: 24px 8px; }
html[data-motion=still] .lg-t li:nth-child(n + 6) { display: none; }
html[data-motion=still] .lg-r--b { display: none; }
html[data-motion=still] .lg-r--a { transform: none; }
html[data-motion=still] .s-logos { --lgk: 1.3; }

/* the ring */
.lgr { display: none; position: absolute; inset: 0; pointer-events: none; }
.lgr__v { position: absolute; inset: 0; perspective: var(--lgp, 1000px); perspective-origin: 50% 50%; }
.lgr__n { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.lgr__ring { left: 0; top: 0; }
.lgr__f { position: absolute; left: 0; top: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.lgr__f img { display: block; width: 100%; height: 100%; max-width: none; }
/* the reflection: flipped, so its fade runs from the element's bottom. A mask on a leaf costs nothing to the 3D around it */
.lgr__f--m { -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, .44), rgba(0, 0, 0, .12) 42%, rgba(0, 0, 0, 0) 78%); mask-image: linear-gradient(to top, rgba(0, 0, 0, .44), rgba(0, 0, 0, .12) 42%, rgba(0, 0, 0, 0) 78%); }
.lgr__g { position: absolute; left: 0; top: 0; pointer-events: none; }
.s-logos.is-ring .lgr { display: block; }
.s-logos.is-ring { position: relative; }
.s-logos.is-ring .lg { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.s-logos.is-ring .lg-t { animation: none; }


/* 01b-pioneer */
/* Pioneer: four real columns. They rise out of the ink and lock into one wall with the poster printed across it. Each scroll beat the camera pulls back, the wall opens into four pillars, they turn, and lock again on the next statement. The white sheet of Who arrives through the opening joints. */
.s-pioneer { --pi-c: #A01A3A; --pi-l: #7C112A; --pi-b: #560B1E; --pi-e: #33060F; }

/* lite, still and any failure: the same words, stacked on the same colour */
.pi-src { padding: 96px var(--gutter) 88px; background-color: var(--pi-b); background-image: radial-gradient(110% 60% at 40% 14%, var(--pi-c) 0, var(--pi-l) 40%, var(--pi-b) 82%, var(--pi-e) 130%); color: #fff; }
/* the poster is fitted to its parent, so the parent carries the column width */
.pi-hd, .pi-list, .pi-close { max-width: var(--w-wrap); margin-inline: auto; }
.pi-list { margin-top: 56px; padding: 0; list-style: none; display: grid; gap: 40px; }
.pi-i h3 { font-size: clamp(64px, 19vw, 150px); line-height: .94; }
.pi-i p { margin: 10px 0 0; font-family: var(--th-poster); text-transform: uppercase; font-size: clamp(32px, 9vw, 60px); line-height: 1; color: var(--on-velvet-2); }
.pi-close { margin-top: 64px; font-size: clamp(52px, 15vw, 120px); line-height: .96; }

.pi-room, .pi-view { display: none; }

.pi-on .pi-src { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pi-on > .stage { overflow-x: clip; overflow-y: visible; background: var(--ink); }
.pi-on.pi-out > .stage { background: var(--white); }
/* the section leaves through its own joints, so the core dim would only grey the white behind them */
.s-pioneer > .th-dim { display: none; }

.pi-on .pi-room { display: block; position: absolute; inset: 0; overflow: hidden; visibility: hidden; background-color: #1F040B; background-image: radial-gradient(90% 62% at 50% 40%, #5B0B1F 0, #3A0612 50%, #1F040B 100%); }
.pi-on.pi-covered .pi-room { visibility: visible; }
.pi-on.pi-gone .pi-room { visibility: hidden; }
.pi-floor { position: absolute; left: 0; right: 0; top: 50%; height: 60%; background: linear-gradient(180deg, rgba(8, 1, 4, .62), rgba(120, 18, 44, .3) 7%, rgba(13, 3, 6, .78) 52%, rgba(13, 3, 6, .96)); transform-origin: 50% 0; will-change: transform; }
.pi-rf { position: absolute; left: 50%; top: 0; transform-origin: 50% 0; background: linear-gradient(180deg, rgba(190, 40, 72, .3), rgba(190, 40, 72, 0) 72%); opacity: 0; will-change: transform; }
.pi-rf.is-i { background: linear-gradient(180deg, rgba(255, 228, 214, .24), rgba(255, 228, 214, 0) 62%); }

.pi-on .pi-view { display: block; position: absolute; inset: 0; pointer-events: none; perspective-origin: 50% 50%; }
.pi-world { position: absolute; left: 50%; top: 0; width: 0; height: 100%; transform-style: preserve-3d; transform-origin: 0 50%; will-change: transform; }
.pi-col { position: absolute; top: 0; transform-style: preserve-3d; will-change: transform; }
.pi-face { position: absolute; left: 0; top: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: #33060F; }
.pi-sl { position: absolute; top: 0; }
.pi-st { position: absolute; inset: 0; visibility: hidden; color: #fff; background-color: var(--pi-b); }
.pi-st.is-on { visibility: visible; }
.pi-st::before { content: ""; position: absolute; inset: 0; background-image: var(--grain); background-size: 360px 360px; opacity: .16; pointer-events: none; }
.pi-face::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(14, 1, 6, .3), rgba(14, 1, 6, 0) 9px, rgba(14, 1, 6, 0) calc(100% - 12px), rgba(14, 1, 6, .34)); }
.pi-sh { position: absolute; inset: 0; background: #12020A; opacity: 0; pointer-events: none; }
.pi-eg { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255, 214, 196, .3); pointer-events: none; visibility: hidden; }
.pi-face.is-t .pi-eg { visibility: visible; }
.pi-eg--l { left: 0; }
.pi-eg--r { right: 0; background: rgba(10, 1, 5, .4); }

.pi-bg { position: absolute; top: 0; bottom: 0; }
.pi-g-a { background-color: var(--pi-b); background-image: radial-gradient(120% 74% at 34% 26%, var(--pi-c) 0, var(--pi-l) 40%, var(--pi-b) 80%, var(--pi-e) 128%); }
.pi-g-b { background-color: #470919; background-image: radial-gradient(120% 74% at 72% 24%, #8D1633 0, #6A0E25 42%, #470919 82%, #2B0510 128%); }
.pi-g-c { background-color: #3A0614; background-image: radial-gradient(120% 74% at 44% 70%, #7A122C 0, #560B1F 44%, #3A0614 84%, #220410 128%); }
.pi-g-i { background-color: var(--ivory); color: var(--burgundy); }

.pi-blk { position: absolute; }
.pi-ln { display: block; font-family: var(--th-poster); font-weight: 400; text-transform: uppercase; line-height: .96; white-space: nowrap; }
.pi-v { position: absolute; font-family: var(--th-poster); font-weight: 400; text-transform: uppercase; line-height: 1; white-space: nowrap; writing-mode: vertical-rl; transform: rotate(180deg); }

/* the columns change colour under the nav, so while they stand behind it the pill stays one solid colour */
html.pi-nav .nav__p { background: var(--nav-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* if the script fails, the words come back plain */
.s-pioneer[data-failed] .pi-src { position: static; width: auto; height: auto; padding: 96px var(--gutter) 88px; overflow: visible; clip-path: none; white-space: normal; }
.s-pioneer[data-failed] .pi-view, .s-pioneer[data-failed] .pi-room { display: none; }

/* the plain line under the title */
.pi-say { margin: 22px 0 0; max-width: 24em; font-family: var(--th-sans); font-weight: 600; font-size: clamp(20px, 5.4vw, 26px); line-height: 1.24; letter-spacing: -.014em; text-transform: none; color: var(--on-velvet-2); text-wrap: balance; }
/* light version (data-theme set to white by build.py): burgundy statements on white, smaller, two by two on a wide screen */
.s-pioneer[data-theme=white] .pi-src { padding-block: 96px 80px; background: none; color: var(--fg); }
.s-pioneer[data-theme=white] .pi-t, .s-pioneer[data-theme=white] .pi-i h3 { color: var(--on-light-accent); }
.s-pioneer[data-theme=white] .pi-say { color: var(--fg2); }
.s-pioneer[data-theme=white] .pi-list { margin-top: 48px; gap: 30px; }
.s-pioneer[data-theme=white] .pi-i h3 { font-size: clamp(46px, 13vw, 84px); }
.s-pioneer[data-theme=white] .pi-i p { margin-top: 8px; font-family: var(--th-sans); font-weight: 600; text-transform: none; font-size: clamp(19px, 5vw, 24px); line-height: 1.24; letter-spacing: -.012em; color: var(--fg); max-width: 22em; }
.s-pioneer[data-theme=white] .pi-close { margin-top: 52px; font-size: clamp(38px, 10.6vw, 72px); color: var(--fg); }
@media (min-width: 900px) { .s-pioneer[data-theme=white] .pi-list { grid-template-columns: 1fr 1fr; gap: 44px 56px; } }


/* 02-who */
/* Who: one giant wheel. The title and the paragraph are printed on the drum, the numbers are velvet plates bolted to it, shaded by their real angle. A velvet disc rises at the end and becomes the next section. */
.who-src { padding-block: 104px var(--section); }
.who-t { width: 100%; color: var(--fg); }
.who-t--d { display: none; }
.who-p { margin: 56px 0 0; font-family: var(--th-sans); font-weight: 600; font-size: clamp(38px, 10.4vw, 68px); line-height: 1.1; letter-spacing: -.024em; color: var(--fg); }
html.no-sf .who-p { letter-spacing: -.012em; }
.who-p em { font-style: normal; color: var(--on-light-accent); }
.who-last { display: block; margin-top: .5em; }
/* lite and still: the same plates, stacked flat */
.who-stats { margin: 72px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.who-stats li { display: flex; flex-direction: column; gap: 14px; padding: 24px 22px; border-radius: 26px; color: #fff; background-color: #4A0A19; background-image: radial-gradient(130% 120% at 82% 0%, #6B1124 0, #540A1B 42%, #3D0714 100%); }
.who-stats b { display: block; font-size: min(38vw, 176px); line-height: .9; color: #fff; white-space: nowrap; }
.who-stats span { font-size: clamp(21px, 5.6vw, 26px); font-weight: 600; line-height: 1.2; letter-spacing: -.012em; color: var(--on-velvet-2); }
.who-wheel, .who-disc { display: none; }

.who-on .who-src { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.who-on .who-wheel { display: block; position: absolute; inset: 0; perspective: var(--P, 1200px); perspective-origin: 50% 50%; }
.who-drum { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.whl { position: absolute; top: 50%; left: calc(50% - var(--W, 350px) / 2); width: var(--W, 350px); backface-visibility: hidden; -webkit-backface-visibility: hidden; white-space: nowrap; }
.whl--p { font-family: var(--th-poster); font-weight: 400; line-height: .92; text-transform: uppercase; color: var(--fg); }
.whl--l { font-family: var(--th-sans); font-weight: 600; line-height: 1.1; letter-spacing: -.024em; color: var(--fg); }
html.no-sf .whl--l { letter-spacing: -.012em; }
.whl--l .hot { color: var(--on-light-accent); }
.whl--s { display: flex; gap: 16px; white-space: normal; }
.whl-pl { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; border-radius: 26px; padding: var(--pd, 22px); color: #fff; background-color: #4A0A19; background-image: radial-gradient(130% 120% at 82% 0%, #6B1124 0, #540A1B 42%, #3D0714 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
.whl-pl b, .whl-pl span { position: relative; }
.whl-pl b { font-family: var(--th-poster); font-weight: 400; line-height: .9; color: #fff; white-space: nowrap; }
.whl-pl span { font-family: var(--th-sans); font-weight: 600; line-height: 1.16; letter-spacing: -.016em; color: var(--on-velvet-2); text-wrap: balance; }
html.no-sf .whl-pl span { letter-spacing: -.008em; }
.whl-sh { position: absolute; inset: 0; background: #14030A; opacity: 0; pointer-events: none; }
.whl-m { position: absolute; left: 0; top: 0; visibility: hidden; pointer-events: none; }
.who-on .who-disc { display: block; position: absolute; left: 50%; top: 130svh; width: 1200px; height: 1200px; margin: -600px 0 0 -600px; border-radius: 50%; background: #360612; transform: scale(0); will-change: transform; z-index: 3; }
@media (min-width: 900px) {
  .who-t--p { display: none; }
  .who-t--d { display: block; }
  .who-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .who-stats b { font-size: 200px; }
}

/* the simple version (data-lite, set by build.py): a short paragraph you can read in one go and four plates in a grid */
.s-who[data-lite] .who-src { padding-block: 100px 72px; }
.s-who[data-lite] .who-t--p { display: none; }
.s-who[data-lite] .who-t--d { display: block; }
.s-who[data-lite] .who-p { margin-top: 36px; max-width: 22em; font-size: clamp(26px, 7vw, 42px); line-height: 1.17; letter-spacing: -.02em; }
.s-who[data-lite] .who-last { display: inline; margin-top: 0; }
.s-who[data-lite] .who-stats { margin-top: 44px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.s-who[data-lite] .who-stats li { gap: 8px; padding: 18px 16px 16px; border-radius: 20px; }
.s-who[data-lite] .who-stats b { font-size: min(20vw, 104px); }
.s-who[data-lite] .who-stats span { font-size: clamp(15px, 4vw, 19px); line-height: 1.22; }
@media (min-width: 900px) {
  .s-who[data-lite] .who-src { padding-block: 120px 96px; }
  .s-who[data-lite] .who-p { margin-top: 44px; }
  .s-who[data-lite] .who-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 56px; }
  .s-who[data-lite] .who-stats b { font-size: min(7.6vw, 104px); }
  .s-who[data-lite] .who-stats span { font-size: 18px; }
}


/* 02b-life */
/* 02b life: the cigar photo rises out of the velvet and lies flat as a full screen, the sky keeps sailing past the windows, then he flies past and the rest of his life comes at you out of the dark, one big photograph at a time. The last one stays. */
.s.s-life { background-image: none; background-color: #4E0A19; }

/* stacked by default: this is what still tier shows */
.li-head { position: relative; padding-block: 104px 44px; }
.li-t { width: 100%; color: #fff; }
.li-say { margin: 24px 0 0; font-family: var(--th-sans); font-weight: 600; font-size: clamp(28px, 7.6vw, 40px); line-height: 1.12; letter-spacing: -.022em; color: var(--on-velvet-2); text-wrap: balance; }
html.no-sf .li-say { letter-spacing: -.01em; }
.li-say span { display: block; }
@media (min-width: 900px) { .li-say span { display: inline; } }
.li-wall { display: none; }
.li-cam { display: grid; gap: 4px; }
.li-pl { position: relative; margin: 0; overflow: hidden; background: #3A0611; }
.li-pl img { display: block; width: 100%; height: 100%; object-fit: cover; }
.li-dim { display: none; }
/* the journey: one line under each photograph, never on it */
.li-cap { margin: 14px var(--gutter) 26px; font-family: var(--th-sans); font-weight: 600; font-size: clamp(19px, 5vw, 22px); line-height: 1.26; letter-spacing: -.012em; color: var(--on-velvet-2); text-wrap: balance; }
.li-cap b { font-weight: 700; color: #fff; }
html.no-sf .li-cap { letter-spacing: -.004em; }
.li-cig { aspect-ratio: 4 / 5; }
.li-cig img { position: absolute; inset: 0; }
.li-cars { aspect-ratio: 1 / 1.05; } .li-cars img { object-position: 44% 50%; }
.li-expo { aspect-ratio: 1500 / 1754; }
.li-crew { aspect-ratio: 1 / .9; } .li-crew img { object-position: 96% 40%; }
.li-booth { aspect-ratio: 1 / .62; } .li-booth img { object-position: 40% 30%; }
.li-suit { aspect-ratio: 1080 / 1300; } .li-suit img { object-position: 50% 12%; }
.li-villa { aspect-ratio: 1 / .72; }
.li-team { aspect-ratio: 1 / .62; }
.li-ride { aspect-ratio: 960 / 1127; }
.li-dinner { aspect-ratio: 1 / .84; } .li-dinner img { object-position: 50% 62%; }
@media (min-width: 900px) {
  html:not(.gs) .li-cam { max-width: calc(var(--w-wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); gap: 12px; padding-bottom: 96px; }
  .li-cars, .li-crew, .li-team { aspect-ratio: 16 / 9; }
  .li-dinner { aspect-ratio: 3 / 2; }
  .li-booth { aspect-ratio: 16 / 9; }
  .li-suit { aspect-ratio: 4 / 3; } .li-suit img { object-position: 50% 16%; }
  .li-villa { aspect-ratio: 16 / 10; }
  .li-ride { aspect-ratio: 4 / 3; } .li-ride img { object-position: 50% 62%; }
  .li-expo { aspect-ratio: 4 / 3; } .li-expo img { object-position: 50% 26%; }
  .li-cig { aspect-ratio: 16 / 10; } .li-cig img { object-position: 50% 0; }
}

/* the scene */
/* flat #4E0A19 under the light: the same colour the Who disc ends on, and the colour the next chapter starts from */
.li-on .li-wall { display: block; position: absolute; inset: 0; z-index: 0; overflow: clip; pointer-events: none; background: #4E0A19; }
.li-on .li-wall i { position: absolute; inset: -18% -34%; opacity: 0; background: radial-gradient(60% 58% at 40% 38%, #8A1730 0, #6E1124 36%, #570C1B 68%, #430814 104%); will-change: transform, opacity; }
.li-on .li-head { position: absolute; left: 0; right: 0; top: 0; z-index: 1; height: 86%; display: flex; flex-direction: column; justify-content: center; padding-block: 76px 0; will-change: transform; }
.li-on .li-view { position: absolute; inset: 0; z-index: 2; perspective: 1100px; perspective-origin: 50% 46%; pointer-events: none; }
.li-on .li-cam { position: absolute; inset: 0; display: block; transform-style: preserve-3d; }
.li-on .li-pl { position: absolute; left: 50%; top: 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden; visibility: hidden; will-change: transform; box-shadow: 0 54px 90px -34px rgba(12, 1, 5, .78); }
.li-on .li-pl img { position: absolute; top: 0; left: -6%; width: 112%; height: 100%; max-width: none; will-change: transform; }
.li-on .li-dim { display: block; position: absolute; inset: 0; background: #3A0611; opacity: 0; will-change: opacity; }

/* in the flight the lines wait at the foot of the screen, under whichever photograph is holding */
.li-on .li-caps { position: absolute; left: 0; right: 0; bottom: max(22px, 3.4svh); z-index: 4; pointer-events: none; }
/* a floor of the wall's own dark colour: photographs flying past sink into it, so a line is never on top of a picture */
.li-on .li-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 24svh; z-index: 3; pointer-events: none; opacity: 0; background: linear-gradient(180deg, rgba(78, 10, 25, 0) 0, rgba(78, 10, 25, .94) 34%, #4E0A19 44%); will-change: opacity; }
@media (min-width: 900px) { .li-on .li-floor { height: 19svh; } }
.li-on .li-cap { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 0; margin: 0 auto; max-width: 21em; text-align: center; opacity: 0; will-change: opacity, transform; }
@media (min-width: 900px) { .li-cap { font-size: 21px; } .li-on .li-cap { max-width: 46em; } }

/* the cigar is the whole screen, laid out by the script so the sky can sail behind the windows */
.li-on .li-cig { left: 0; top: var(--ct, 0px); width: 100%; height: calc(100% - var(--ct, 0px)); aspect-ratio: auto; transform-origin: 50% 100%; visibility: visible; background: #8DB7E6; box-shadow: none; }
.li-on .li-cig img { inset: auto; left: 0; top: 0; width: auto; height: auto; object-fit: fill; transform-origin: 0 0; }

/* phone first: every photograph runs edge to edge */
.li-on .li-cars { width: 100vw; height: min(126vw, 62svh); aspect-ratio: auto; }
.li-on .li-expo { width: 100vw; height: min(126vw, 64svh); aspect-ratio: auto; }
.li-on .li-expo img { object-position: 62% 30%; }
.li-on .li-crew { width: 100vw; height: min(120vw, 60svh); aspect-ratio: auto; }
.li-on .li-booth { width: 100vw; height: min(62vw, 42svh); aspect-ratio: auto; }
.li-on .li-suit { width: 100vw; height: min(126vw, 64svh); aspect-ratio: auto; }
.li-on .li-suit img { object-position: 50% 10%; }
/* group shots stay wide on a phone so nobody is cut off at the edges */
.li-on .li-villa { width: 100vw; height: min(72vw, 46svh); aspect-ratio: auto; }
.li-on .li-team { width: 100vw; height: min(62vw, 42svh); aspect-ratio: auto; }
.li-on .li-dinner { width: 100vw; height: min(84vw, 50svh); aspect-ratio: auto; }
.li-on .li-ride { width: 100vw; height: min(126vw, 64svh); aspect-ratio: auto; }
@media (min-width: 900px) {
  .li-on .li-view { perspective: 1500px; }
  .li-on .li-head { height: 84%; padding-top: 88px; }
  .li-on .li-cars { width: min(86vw, 1120px, 136svh); height: auto; aspect-ratio: 16 / 9; }
  .li-on .li-expo { width: min(72vw, 940px, 104svh); height: auto; aspect-ratio: 4 / 3; }
  .li-on .li-expo img { object-position: 50% 26%; }
  .li-on .li-crew { width: min(86vw, 1120px, 136svh); height: auto; aspect-ratio: 16 / 9; }
  .li-on .li-booth { width: min(86vw, 1120px, 136svh); height: auto; aspect-ratio: 16 / 9; }
  .li-on .li-suit { height: min(76svh, 880px); width: auto; aspect-ratio: 5 / 6; }
  .li-on .li-suit img { object-position: 50% 14%; }
  .li-on .li-villa { width: min(84vw, 1100px, 126svh); height: auto; aspect-ratio: 16 / 10; }
  .li-on .li-team { width: min(86vw, 1120px, 136svh); height: auto; aspect-ratio: 16 / 9; }
  .li-on .li-dinner { width: min(80vw, 1060px, 118svh); height: auto; aspect-ratio: 3 / 2; }
  .li-on .li-ride { height: min(76svh, 880px); width: auto; aspect-ratio: 5 / 6; }
  .li-on .li-ride img { object-position: 50% 50%; }
}

/* Natural fades its wall up from the Who disc colour. With this chapter in between, it starts from this one's last frame, which is that same colour */
.s-life + .s-natural .nat-seam { display: block; position: absolute; left: 0; right: 0; top: 0; height: 42svh; z-index: -1; pointer-events: none; background: linear-gradient(180deg, #4E0A19 0, rgba(78, 10, 25, 0) 100%); }


/* 03-natural */
/* Natural years: converging title, an album page that turns from 16 to 23 while the age rolls, a mechanical rep counter on real drums, then the dead end */
.s.s-natural { background-image: none; background-color: #360612; }
/* one wall behind the whole chapter, so the light never pulses from scene to scene */
.nat-wall { position: sticky; top: 0; height: 100svh; margin-bottom: -100svh; z-index: -1; overflow: clip; pointer-events: none; }
.nat-wall i { position: absolute; inset: -18% -34%; background: radial-gradient(62% 62% at 62% 36%, #6B1024 0, #540C1D 36%, #3F0816 68%, #2A050E 104%); will-change: transform, opacity; }
.nat-head, .nat-end { position: relative; }
.nat-head { display: flex; align-items: center; min-height: 100svh; padding-block: 92px 40px; }
.nat-t, .nat-e { width: 100%; }
.nat-t--d, .nat-e--d { display: none; }

/* stacked by default: this is what still tier shows */
.nat-yrs__in { display: grid; gap: 40px; padding-block: 24px 96px; }
.nat-fw { display: grid; gap: 40px; }
.nat-ph { margin: 0; }
.nat-fr { position: relative; overflow: hidden; background: #12040A; }
.nat-fr img { position: absolute; top: 0; display: block; max-width: none; height: auto; }
.nat-ph figcaption { margin-top: 14px; font-family: var(--th-poster); font-weight: 400; font-size: clamp(60px, 17vw, 88px); line-height: .92; text-transform: uppercase; color: var(--fg); }
/* whole face, hair to chin, sky either side, shoulders kept out. The top strip goes too, it had debris in his hair. */
.nat-ph--16 .nat-fr { aspect-ratio: 1 / 1.13; }
.nat-ph--16 img { width: 100%; height: 100%; left: 0; object-fit: cover; transform-origin: 50% 74%; }
/* stops above the waistband at every point in the parallax */
.nat-ph--23 .nat-fr { aspect-ratio: 1 / 1.13; }
.nat-ph--23 img { width: 112%; left: -6%; transform-origin: 50% 18%; }
/* the kitchen sinks into the wall so the eye goes to him */
.nat-ph--23 .nat-fr::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(58% 52% at 0 0, rgba(30, 4, 11, .86) 0, rgba(30, 4, 11, .5) 52%, rgba(30, 4, 11, 0) 100%), radial-gradient(52% 50% at 100% 0, rgba(30, 4, 11, .82) 0, rgba(30, 4, 11, .46) 52%, rgba(30, 4, 11, 0) 100%); }
.nat-roll { display: none; }
.nat-says { display: grid; gap: 24px; }
.nat-say { margin: 0; font-family: var(--th-sans); font-weight: 600; font-size: clamp(30px, 8vw, 46px); line-height: 1.13; letter-spacing: -.022em; color: var(--fg); text-wrap: pretty; }
html.no-sf .nat-say { letter-spacing: -.01em; }

/* the scene: one frame, one caption, one sentence at a time */
.nat-on .nat-yrs__in { --fh: min(calc(100svh - 372px), 113vw); height: 100%; padding-block: 78px 20px; gap: 0; grid-template-rows: var(--fh) minmax(0, 1fr); }
.nat-on .nat-fw { position: relative; display: grid; gap: 0; margin-inline: calc(var(--gutter) * -1); height: var(--fh); }
.nat-on .nat-ph { grid-area: 1 / 1; min-height: 0; height: var(--fh); }
.nat-on .nat-ph figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.nat-on .nat-ph--16 { z-index: 2; }
.nat-on .nat-fr { height: 100%; aspect-ratio: auto; }
.nat-on .nat-ph--16 .nat-fr { backface-visibility: hidden; -webkit-backface-visibility: hidden; will-change: transform; }
.nat-on .nat-ph--16 { --ih: max(calc(var(--fh) * 1.476), 128vw); }
.nat-on .nat-ph--16 img { width: 100%; height: 100%; left: 0; top: 0; margin-left: 0; }
.nat-on .nat-ph--23 img { width: auto; height: max(calc(var(--fh) * 1.24), 140vw); left: 50%; margin-left: calc(max(calc(var(--fh) * 1.24), 140vw) * -.4006); }
.nat-shade { position: absolute; inset: 0; background: #0D0306; opacity: 0; pointer-events: none; }
.nat-side { min-height: 0; display: flex; flex-direction: column; justify-content: center; }
.nat-on .nat-roll { display: flex; align-items: center; gap: .2em; font-size: min(26vw, 12.6svh); line-height: 1; color: #fff; }
.nat-roll .nat-roll__a { line-height: 1; }
.nat-roll__d { display: flex; }
.nat-on .nat-says { display: grid; margin-top: 2px; }
.nat-on .nat-say { grid-area: 1 / 1; font-size: min(8.5vw, 3.95svh); line-height: 1.11; }

/* the counter */
.nat-reps { --d: min(calc((100vw - 16px) / .74), 58svh); }
.nat-reps__in { display: grid; gap: 10px; justify-items: start; }
html.gs-off .nat-reps__in { height: 100%; align-content: center; }
.nat-n { font-size: min(62vw, 320px); line-height: .9; white-space: nowrap; }
.nat-cap { margin: 0; font-family: var(--th-sans); font-weight: 600; font-size: clamp(32px, 8.4vw, 60px); line-height: 1.08; letter-spacing: -.022em; color: var(--fg); text-wrap: balance; }
html.no-sf .nat-cap { letter-spacing: -.01em; }
.nat-lift + .nat-lift { margin-top: 40px; }
.nat-odo { display: none; }
/* the tally: one bar for every rep he did */
.nat-ticks { display: none; }
.odo-on .nat-ticks { display: flex; align-items: flex-end; gap: clamp(3px, .9vw, 10px); width: 100%; height: clamp(38px, 6.4svh, 62px); margin-top: 16px; }
.nat-ticks i { flex: 1 1 0; height: 100%; background: #fff; opacity: .26; transform: scaleY(.22); transform-origin: 50% 100%; transition: transform .16s var(--th-out), opacity .16s var(--th-out); }
.nat-ticks i.on { opacity: 1; transform: none; }
.odo-on .nat-odo { display: flex; font-family: var(--th-poster); font-size: var(--d); line-height: 1; color: #fff; margin-inline: -.03em; }
.odo-on .nat-lifts { display: grid; width: 100%; }
.odo-on .nat-lift { grid-area: 1 / 1; margin: 0; }
.odo-on .nat-n { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.dr { --fh: .88em; --dw: .37em; --R: calc(var(--fh) * 1.5388); position: relative; width: var(--dw); height: var(--fh); overflow: hidden; perspective: 5.5em; -webkit-mask-image: linear-gradient(transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(transparent 0, #000 7%, #000 93%, transparent 100%); }
.dr__c { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; transform: translateZ(calc(var(--R) * -1)); }
.dr__c span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; line-height: var(--fh); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.nat-odo__n { display: block; line-height: .92; }

.nat-end { display: flex; align-items: center; min-height: 100svh; padding-block: 92px 56px; }
.nat-e--p .ln:nth-child(-n+2), .nat-e--d .ln:nth-child(1) { color: transparent; -webkit-text-stroke: clamp(2px, .22vw, 3px) #fff; }

@media (min-width: 900px) {
  .nat-t--p, .nat-e--p { display: none; }
  .nat-t--d, .nat-e--d { display: block; }
  .nat-head { padding-block: 100px 40px; }
  .nat-yrs__in { grid-template-columns: 460px minmax(0, 1fr); column-gap: 64px; align-items: center; }
  .nat-say { font-size: 40px; }
  .nat-on .nat-yrs__in { --fh: min(calc(100svh - 150px), 720px); --fw: calc(var(--fh) * .88); height: 100%; padding-block: 92px 40px; grid-template-rows: minmax(0, 1fr); grid-template-columns: var(--fw) minmax(0, 1fr); column-gap: 64px; }
  .nat-on .nat-fw { margin-inline: 0; align-self: center; }
  .nat-on .nat-ph--16 { --ih: calc(var(--fh) * 1.476); }
  .nat-on .nat-ph--23 img { height: calc(var(--fh) * 1.24); margin-left: calc(var(--fh) * 1.24 * -.4006); }
  .nat-on .nat-roll { font-size: min(calc((min(var(--w-wrap), 100vw - var(--gutter) * 2) - var(--fw) - 64px) / 2.02), 30svh); }
  .nat-on .nat-say { font-size: min(3.5vw, 44px); line-height: 1.12; }
  .nat-on .nat-side { justify-content: center; }
  .nat-reps { --d: min(52vw, 66svh); }
  html.gs-off .nat-reps__in { grid-template-columns: auto minmax(0, 1fr); align-items: end; column-gap: 56px; }
  .nat-cap { padding-bottom: .55em; font-size: 64px; }
  .odo-on .nat-ticks { grid-column: 1 / -1; margin-top: 8px; }
}

/* the velvet disc from Who becomes this section: start on the disc colour so the join never shows, and arrive while the disc is still growing */
.nat-seam { display: none; }
.s-who.who-on + .s-natural { margin-top: -36svh; }
.s-who.who-on + .s-natural .nat-seam { display: block; position: absolute; left: 0; right: 0; top: 0; height: 42svh; z-index: -1; pointer-events: none; background: linear-gradient(180deg, #360612 0, rgba(54, 6, 18, 0) 100%); }


/* 04-quote */
/* Quote: he was a California lawyer, so his words are typed on California pleading paper, numbered lines and a double rule. They light up, the page tips back and falls away, the belief lands line by line, then he signs it. */
.s-quote { --q-left: 46px; --q-rule: 34px; --q-num: 26px; }
.qt-page { position: relative; background: #FFFDF8; }
html.gs-off .qt-page { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; box-shadow: 0 34px 90px rgba(60, 10, 22, .24); will-change: transform; }
.qt-page__in { position: relative; padding-block: 112px 64px; }
html.gs-off .qt-page__in { padding-block: 76px 24px; }
.qt-rule { position: absolute; top: 0; bottom: 0; pointer-events: none; }
.qt-rule--l { left: calc(max(var(--gutter), (100% - var(--w-wrap)) / 2) + var(--q-rule)); width: 4px; border-inline: 1px solid rgba(90, 15, 34, .55); }
.qt-rule--r { display: none; right: calc(max(var(--gutter), (100% - var(--w-wrap)) / 2) - 18px); width: 1px; background: rgba(90, 15, 34, .55); }
.qt-nums { position: absolute; top: 0; left: max(var(--gutter), (100% - var(--w-wrap)) / 2); width: var(--q-num); overflow: hidden; font-family: var(--th-sans); font-size: 12px; font-weight: 400; font-variant-numeric: tabular-nums; letter-spacing: 0; color: var(--on-light-2); }
.qt-nums span { display: flex; align-items: center; justify-content: flex-end; }

.qt-q { margin: 0; padding-left: var(--q-left); }
.qt-mark { display: block; height: .36em; font-size: min(78vw, 34svh); line-height: .86; color: var(--on-light-accent); transform-origin: 0% 50%; }
.qt-q p { margin: 0; font-family: var(--th-sans); font-weight: 600; font-size: min(9.9vw, 5.1svh); line-height: 1.1; letter-spacing: -.024em; color: var(--fg); }
html.no-sf .qt-q p { letter-spacing: -.012em; }
.qt-q .hot { color: var(--on-light-accent); }

.qt-in { position: relative; z-index: 3; display: grid; padding-block: 72px 96px; }
html.gs-off .qt-in { height: 100%; padding-block: 76px 24px; align-items: center; pointer-events: none; }
.qt-t { width: 100%; }
.qt-t--d { display: none; }
.qt-t .k { color: var(--on-light-accent); }
.qt-t .ln.c { margin-bottom: .1em; } /* a League Gothic comma hangs below the line, this keeps it off the line under */
.qt-sig { width: min(58%, 300px, 26svh); margin-top: 24px; margin-left: auto; color: var(--on-light-accent); }
@media (min-width: 900px) {
  .s-quote { --q-left: 76px; --q-rule: 58px; --q-num: 44px; }
  .qt-rule--r { display: block; }
  .qt-nums { font-size: 14px; }
  .qt-t--p { display: none; }
  .qt-t--d { display: block; }
  .qt-sig { margin-top: 2px; width: min(170px, 21svh); }
  .qt-mark { font-size: min(46vw, 62svh); }
  .qt-q p { font-size: min(5.7vw, 9.2svh, 74px); line-height: 1.09; }
}


/* 05-cross */
/* 05-cross: two flush lacquered ivory slabs swing toward you, velvet and the payoff behind */
.s-cross { --kx: 50%; --ky: 22%; --T: 28px; }
@media (min-width: 900px) { .s-cross { --kx: 26%; --ky: 46%; --T: 56px; } }

/* the payoff, behind the doors */
.cr-still { margin: 0 0 12px; font-family: var(--th-poster); font-size: clamp(44px, 12vw, 72px); line-height: 1; text-transform: uppercase; color: var(--on-velvet-2); }
html.gs-off .cr-still { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cr-pay { position: relative; z-index: 2; }
html.gs-off .cr-pay { position: absolute; inset: 0; will-change: transform; }
.cr-pay__in { display: flex; flex-direction: column; height: 100%; padding-top: 84px; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
.cr-copy { flex: none; }
.cr-title { color: #fff; }
.cr-fig { flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 16px calc(var(--gutter) * -1) 0; }
.cr-fig__f { position: relative; flex: 1; min-height: 0; overflow: hidden; isolation: isolate; background: var(--velvet-lit); }
html:not(.gs-off) .cr-fig__f { flex: none; aspect-ratio: 4 / 5; }
/* one grade: pulls the orange tan to bronze, the yellow wall to clean cream */
.cr-fig__f img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
/* takes the last of the yellow out of the wall */
.cr-fig__f::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: multiply; background: #F1EEF3; }
html.gs-off .cr-fig__f img { will-change: transform; }
.cr-cap { flex: none; margin-top: 8px; padding-inline: var(--gutter); font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -.016em; color: #fff; }
@media (min-width: 900px) {
  .cr-pay__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; padding-block: 96px; }
  .cr-fig { display: block; margin: 0; }
  .cr-fig__f { flex: none; aspect-ratio: 4 / 5; }
  .cr-cap { padding-inline: 0; }
  /* with motion the photo is a hard slab: full height, off the right edge of the screen */
  html.gs-off .cr-pay__in { position: relative; display: flex; flex-direction: row; align-items: center; padding-block: 76px 28px; }
  html.gs-off .cr-copy { width: calc(50% - 40px); }
  html.gs-off .cr-fig { position: absolute; top: 0; bottom: 0; right: calc(50% - 50vw); width: calc(50vw - 4px); }
  html.gs-off .cr-fig__f { height: 100%; aspect-ratio: auto; }
  html.gs-off .cr-cap { position: absolute; right: calc(100% + 20px); bottom: 28px; margin: 0; white-space: nowrap; }
}

/* doors and everything that belongs to them exist only with motion */
html:not(.gs-off) .cr-doors, html:not(.gs-off) .cr-seam, html:not(.gs-off) .cr-glow, html:not(.gs-off) .cr-shade { display: none; }
.cr-glow { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(38% 72% at 50% 50%, rgba(214, 44, 84, .62) 0, rgba(150, 22, 52, .34) 44%, rgba(105, 16, 34, 0) 100%); opacity: 0; will-change: opacity; }
.cr-shade { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(90deg, rgba(20, 3, 8, .86) 0, rgba(20, 3, 8, 0) 42%, rgba(20, 3, 8, 0) 58%, rgba(20, 3, 8, .86) 100%); will-change: opacity; }
.cr-doors { position: absolute; inset: 0; z-index: 4; pointer-events: none; perspective: var(--P, 1400px); perspective-origin: 50% 50%; }
.cr-door { position: absolute; top: 0; bottom: 0; width: 50%; transform-style: preserve-3d; will-change: transform; }
.cr-door--l { left: 0; transform-origin: 0 50%; }
.cr-door--r { right: 0; transform-origin: 100% 50%; }

/* the face: flush lacquer, nothing on it but the word. Lit from the seam. */
.cr-face { position: absolute; inset: 0; overflow: hidden; background-color: var(--ivory); transform: translateZ(var(--T)); }
.cr-door--l .cr-face { background-image: linear-gradient(90deg, #E9E3D6 0, #F4EFE5 38%, #FBF8F1 80%, #FFFEFA 100%); box-shadow: inset -1px 0 0 rgba(255, 255, 255, .9); }
.cr-door--r .cr-face { background-image: linear-gradient(270deg, #E9E3D6 0, #F4EFE5 38%, #FBF8F1 80%, #FFFEFA 100%); box-shadow: inset 1px 0 0 rgba(255, 255, 255, .9); }

/* the word is set per door and meets the seam in a gap between letters, so the crack never cuts a letter */
.cr-art { position: absolute; inset: 0; display: flex; align-items: center; }
.cr-door--l .cr-art { justify-content: flex-end; }
.cr-door--r .cr-art { justify-content: flex-start; }
.cr-word { display: block; color: var(--on-light-accent); text-shadow: 0 1px 0 rgba(255, 255, 255, .85); }
.cr-word .ln { display: block; width: max-content; white-space: nowrap; }
.cr-door--l .cr-word { padding-right: .028em; }
.cr-door--l .cr-word .ln { margin-left: auto; }
.cr-door--r .cr-word { padding-left: .028em; }

/* a tight bloom where the light hits the paint, never a pink wash */
.cr-spill { position: absolute; top: 0; bottom: 0; width: clamp(12px, 1.6vw, 22px); opacity: 0; will-change: opacity; }
.cr-door--l .cr-spill { right: 0; background: linear-gradient(270deg, rgba(190, 22, 60, .62) 0, rgba(190, 22, 60, .16) 38%, rgba(190, 22, 60, 0) 100%); }
.cr-door--r .cr-spill { left: 0; background: linear-gradient(90deg, rgba(190, 22, 60, .62) 0, rgba(190, 22, 60, .16) 38%, rgba(190, 22, 60, 0) 100%); }
.cr-tone { position: absolute; inset: 0; background: #3D0714; opacity: 0; will-change: opacity; }

/* the thickness: crisp lacquered edge with one burgundy inlay */
.cr-edge { position: absolute; top: 0; bottom: 0; width: var(--T); }
.cr-door--l .cr-edge { left: 100%; transform-origin: 0 50%; transform: rotateY(-90deg); background-image: linear-gradient(270deg, #FFFDF7 0, #EFE8DA 10%, #E6DCCB 58%, #7A1228 58%, #7A1228 68%, #DACFBC 68%, #CFC3AE 100%); }
.cr-door--r .cr-edge { right: 100%; transform-origin: 100% 50%; transform: rotateY(90deg); background-image: linear-gradient(90deg, #FFFDF7 0, #EFE8DA 10%, #E6DCCB 58%, #7A1228 58%, #7A1228 68%, #DACFBC 68%, #CFC3AE 100%); }

/* the lit crack where they meet */
.cr-seam { position: absolute; top: 0; bottom: 0; left: 50%; z-index: 5; width: 3px; margin-left: -1.5px; pointer-events: none; background: linear-gradient(180deg, #A01A3A 0, #E8254F 50%, #A01A3A 100%); transform-origin: 50% 50%; will-change: transform, opacity; }
.cr-seam::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 12px; margin-left: -6px; background: linear-gradient(90deg, rgba(200, 24, 63, 0) 0, rgba(200, 24, 63, .34) 50%, rgba(200, 24, 63, 0) 100%); }

/* lite: the same doors slide apart flat, no slab */
html[data-motion=lite] .cr-edge { display: none; }
html[data-motion=lite] .cr-face { transform: none; }


/* 06-lab */
/* 06-lab: the photo opens from inset to full-bleed, then five words turn like a solid block */
.la-head { padding-top: 88px; position: relative; z-index: 1; }
.la-title { color: var(--on-light-1); }
.la-title .ln { white-space: nowrap; }
html.gs-off .la-title { will-change: transform; }
/* phone: the poster stands under the photo, so the photo can open to the edges and stay sharp */
@media (max-width: 899.98px) { html.gs-off .la-head { position: absolute; left: 0; right: 0; bottom: max(24px, env(safe-area-inset-bottom)); padding-top: 0; } }

.la-frame { position: relative; z-index: 2; width: min(1040px, calc(100% - var(--gutter) * 2)); aspect-ratio: 16 / 9; margin: 28px auto 0; overflow: hidden; background: var(--apple-grey); }
.la-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* with motion the frame is laid out at its final size and only ever scaled down, so it stays sharp */
html.gs-off .la-frame { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; aspect-ratio: auto; transform-origin: 0 0; will-change: transform; }
html.gs-off .la-frame img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; will-change: transform; }
html:not(.gs-off) .la-grow .stage { min-height: 0; padding-bottom: 32px; }

/* the list on white, the block full-bleed to the bottom of the screen: one hard edge */
html.gs-off .la-flip .stage { display: flex; flex-direction: column; }
.la-flip__in { flex: none; padding-top: 92px; }
html:not(.gs-off) .la-flip__in { padding-block: 64px 0; }
html:not(.gs-off) .la-flip .stage { min-height: 0; }
.la-list { font-size: clamp(25px, 6.5vw, 40px); line-height: 1.12; }
.la-cube { position: relative; flex: 1; min-height: 0; margin-top: 24px; perspective: 1200px; perspective-origin: 50% 50%; }
.la-rig { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.la-w { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; color: #fff; text-align: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; will-change: transform; background-color: var(--velvet-base); background-image: radial-gradient(96% 90% at 50% 34%, var(--velvet-crown) 0, var(--velvet-lit) 42%, var(--velvet-base) 84%, var(--velvet-edge) 130%); }
/* every other face is near-black cherry, so a turn reads as a block with sides */
.la-w:nth-child(even) { background-color: var(--cherry); background-image: radial-gradient(96% 90% at 50% 30%, #3F0713 0, #2B040D 46%, #1A050A 88%); }
.la-t { position: relative; z-index: 1; color: #fff; transform: scaleY(var(--tall, 1)); }
.la-t .ln { display: block; white-space: nowrap; }
.la-shade { position: absolute; inset: 0; background: #1A050A; opacity: 0; pointer-events: none; will-change: opacity; }
html:not(.gs-off) .la-cube { perspective: none; margin-top: 32px; }
html:not(.gs-off) .la-rig { position: static; }
html:not(.gs-off) .la-w { position: relative; padding-block: 40px; margin-top: 0; }

/* the last line gets a whole screen */
.la-end { position: relative; display: flex; align-items: center; min-height: 100svh; padding-block: 96px; }
.la-end .title { color: var(--on-light-1); }
.la-end em { font-style: normal; color: var(--on-light-accent); }


/* 07-peptides */
/* 07 peptides. One glass ribbon on deep velvet. Static flow is the default; the sticky scene exists only under html.gs. */
.s-peptides { --kx: 50%; --ky: 44%; }
.s-peptides .pep-head { position: relative; z-index: 2; padding-top: max(var(--section), 96px); }
.s-peptides .pep-col { width: 100%; }
/* each line is its own size: pull every stem back to the same left edge */
.s-peptides .pep-head .ln { margin-left: -.034em; }
.s-peptides .pep-fig { position: relative; margin: 40px 0 32px; }
.s-peptides .pep-poster { display: block; width: min(100%, 560px); height: auto; margin-inline: auto; -webkit-mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent); }
.s-peptides .pep-gl { display: none; }
.s-peptides .pep-end { position: relative; z-index: 2; padding-bottom: var(--section); }
.s-peptides .pep-lead { margin: 0; font-family: var(--th-sans); font-weight: 600; font-size: clamp(27px, 7.2vw, 38px); line-height: 1.08; letter-spacing: -.012em; color: #fff; text-wrap: balance; }
.s-peptides .pep-more { margin: 14px 0 0; font-family: var(--th-sans); font-weight: 400; font-size: clamp(18px, 4.7vw, 21px); line-height: 1.36; letter-spacing: .004em; color: var(--on-velvet-2); text-wrap: pretty; }
.s-peptides .pep-copy .actions { margin-top: 24px; }

@media (min-width: 900px) {
  .s-peptides .pep-col, .s-peptides .pep-copy { width: min(52%, 540px); }
  .s-peptides .pep-fig { position: absolute; top: 0; right: 0; bottom: 0; width: 48%; margin: 0; }
  .s-peptides .pep-poster { width: 100%; height: 100%; object-fit: contain; }
  .s-peptides .pep-end { padding-top: 32px; }
}

/* the scene */
html.gs .s-peptides:not(.pep-flat) .pep-fig { position: absolute; inset: 0; width: auto; margin: 0; z-index: 0; }
html.gs .s-peptides:not(.pep-flat) .pep-gl { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
html.gs .s-peptides:not(.pep-flat) .pep-poster { position: absolute; left: 7vw; top: 54%; width: 86vw; height: auto; margin: 0; transition: opacity .5s var(--th-out), visibility 0s linear .5s; }
html.gs .s-peptides.pep-live .pep-poster { opacity: 0; visibility: hidden; }
html.gs .s-peptides:not(.pep-flat) .pep-head { position: absolute; top: 88px; left: 0; right: 0; padding-block: 0; pointer-events: none; }
html.gs .s-peptides:not(.pep-flat) .pep-end { position: absolute; bottom: max(28px, env(safe-area-inset-bottom)); left: 0; right: 0; padding-block: 0; pointer-events: none; }
html.gs .s-peptides:not(.pep-flat) .pep-end a { pointer-events: auto; }
html.gs .s-peptides:not(.pep-flat) .pep-head .ln { will-change: transform; }

@media (min-width: 900px) {
  html.gs .s-peptides:not(.pep-flat) .pep-poster { left: auto; right: 2vw; top: -6%; width: auto; height: 112%; }
  html.gs .s-peptides:not(.pep-flat) .pep-head { top: 0; bottom: 0; display: flex; align-items: center; }
  html.gs .s-peptides:not(.pep-flat) .pep-end { top: 0; bottom: 0; display: flex; align-items: center; justify-content: flex-end; }
  html.gs .s-peptides:not(.pep-flat) .pep-copy { width: min(42%, 440px); }
}

/* WebGL could not start: the section stops being a scene */
html.gs .s-peptides.pep-flat { height: auto; }
html.gs .s-peptides.pep-flat > .stage { position: relative; height: auto; min-height: 100svh; }


/* 08-censored */
/* 08-censored: he is erased tile by tile. The same tiles then clear to a white document and wipe it to black. */
.s-censored { --doc-ink: var(--ink); }
.cn-still { margin: 0; }
.cn-still img { display: block; width: 100%; height: auto; }
.cn-doc { background: var(--white); color: var(--doc-ink); padding-block: var(--section); }
.cn-title { color: var(--doc-ink); }
.cn-title .ln, .cn-kept .ln { position: relative; width: fit-content; }
.cn-hot .cn-t { color: var(--on-light-accent); }
.cn-bar { position: absolute; inset: .03em -.02em .02em; background: var(--doc-ink); transform: scaleX(0); transform-origin: 0 50%; }
.cn-kept .cn-bar { background: var(--white); }
.cn-rx { max-width: var(--w-measure); margin: 48px 0 0; font-size: clamp(30px, min(9.2vw, 5.2svh), 46px); font-weight: 600; line-height: 1.2; letter-spacing: -.022em; color: var(--doc-ink); }
@media (min-width: 900px) { .cn-rx { font-size: clamp(44px, 6.4svh, 54px); } }
@media (min-width: 900px) { .cn-title .ln { margin-inline: auto; } }
.cn-rx .w { position: relative; display: inline-block; }
.cn-rx .w > i { position: absolute; left: -.07em; right: -.3em; top: .08em; bottom: .02em; background: var(--doc-ink); transform: scaleX(0); transform-origin: 0 50%; }
.cn-rx .w.e > i { right: -.05em; }
.cn-rx .w.k { z-index: 2; } /* the kept words travel across the sunken bars */
html:not(.gs) .cn-rx .w:not(.k) > i { transform: scaleX(1); }
html:not(.gs) .cn-rx .w.k { color: var(--on-light-accent); }
.cn-end { padding-block: var(--section); }
.cn-kept { color: #fff; }
.cn-kept .ln { margin-inline: auto; }
.cn-tiles { display: none; }

/* the scene */
html.gs .s-censored:not([data-failed]) .cn-still { display: none; }
html.gs .s-censored:not([data-failed]) .stage { background: var(--ink); }
html.gs .s-censored:not([data-failed]) .stage[data-s="1"] { background: var(--white); }
html.gs .s-censored:not([data-failed]) .cn-tiles { display: block; position: absolute; inset: 0; z-index: 1; perspective: 1000px; will-change: transform; }
html.gs .s-censored:not([data-failed]) .cn-doc { position: absolute; inset: 0; z-index: 2; padding: 0; background: none; pointer-events: none; }
html.gs .s-censored:not([data-failed]) .cn-doc__in { position: relative; height: 100%; }
html.gs .s-censored:not([data-failed]) .cn-title { position: absolute; left: var(--gutter); right: var(--gutter); top: 50%; transform: translateY(-46%); }
html.gs .s-censored:not([data-failed]) .cn-rx { position: absolute; left: var(--gutter); right: var(--gutter); top: 50%; max-width: none; margin: 0; line-height: 1.18; transform: translateY(-46%); }
html.gs .s-censored:not([data-failed]) .cn-end { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; padding: 0; pointer-events: none; }
html.gs .s-censored:not([data-failed]) .cn-end__in { transform: translate3d(0, var(--ksh, 0px), 0); }
.tl { position: absolute; transform-style: preserve-3d; will-change: transform; }
.tl b, .tl i { position: absolute; inset: 0; display: block; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.tl b { inset: -1px; background-color: #000; background-image: var(--cn, none); background-repeat: no-repeat; }
.tl i { display: grid; place-items: center; font-style: normal; background: var(--white); box-shadow: inset 0 0 0 .5px var(--line-on-light); transform: rotateY(180deg); }
.tl.t0 i { padding-top: 76px; }
.tl.v i { background: var(--velvet-lit); box-shadow: none; }
.tl.v em { color: #fff; }
.tl em { font-family: var(--th-poster); font-style: normal; font-size: var(--lb, 26px); line-height: 1; text-transform: uppercase; color: var(--on-light-accent); }
.cn-tiles[data-s="1"] .tl b, .cn-tiles[data-s="2"] .tl b { background-image: none; background-color: var(--white); }
.cn-tiles[data-s="2"] .tl i { background: var(--ink); box-shadow: none; }
.cn-tiles[data-s="2"] .tl em { visibility: hidden; }

/* lite: flat fades, no flip */
html[data-motion=lite] .tl i { transform: none; }
html[data-motion=lite] .tl b, html[data-motion=lite] .tl i { -webkit-backface-visibility: visible; backface-visibility: visible; }
html[data-motion=lite] .tl b { z-index: 1; }
html[data-motion=lite] .cn-tiles[data-s="2"] .tl b { background-color: var(--ink); }
html[data-motion=lite] .cn-tiles[data-s="2"] .tl i { background: var(--white); }


/* 09-films */
/* 09-films: cover flow turned by scroll, the room takes its colour from the film in front */
.s-films .stage { padding-block: 96px 40px; }
.s-films .fl-title { color: #fff; }
.fl-stage { margin-top: 24px; }
.flow { display: grid; gap: 48px; width: 100%; max-width: calc(var(--w-wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.s-films .fc { width: 100%; will-change: auto; }
.s-films .yt { border-radius: 0; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 34px 70px -18px rgba(0, 0, 0, .8); }
/* the play control sits in the corner: the film's art stays whole */
.s-films .yt b { left: auto; top: auto; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 7px; width: auto; height: 44px; margin: 0; padding: 0 18px 0 15px; border-radius: 999px; background: #fff; color: var(--ink); font-family: var(--th-sans); font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: -.012em; transition: transform .4s var(--spring), opacity .25s linear; }
.s-films .yt b::after { content: "Play"; }
@media (min-width: 900px) { .s-films .fc--hulu .yt b::after { content: "Play the trailer"; } }
.s-films .yt b svg { width: 13px; height: 13px; margin: 0; }
.s-films .fc h3, .fl-cap h3 { font-family: var(--th-poster); font-weight: 400; line-height: .96; letter-spacing: 0; text-transform: uppercase; color: #fff; }
.s-films .fc h3 { margin-top: 16px; font-size: 52px; }
.s-films .fc p { color: var(--on-ink-2); }
.s-films .fc--hulu .when { font-family: var(--th-sans); font-size: 21px; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; color: #fff; }
.fl-amb, .flow__dots { display: none; }
.flow__dots i { display: block; width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .32); transition: transform .3s var(--th-out), background-color .3s linear; }
.flow__dots i.is-on { background: #fff; transform: scale(1.35); }

/* the scene */
html.gs-off .s-films:not([data-failed]) .stage { padding: 0; }
html.gs-off .s-films:not([data-failed]) .fl-head { position: absolute; left: 0; right: 0; top: var(--ht, 84px); z-index: 4; pointer-events: none; }
html.gs-off .s-films .fl-title { will-change: transform, opacity; text-align: center; }
html.gs-off .s-films .fl-title .ln { margin-inline: auto; }
html.gs-off .s-films:not([data-failed]) .fl-stage { position: absolute; inset: 0; z-index: 2; margin: 0; perspective: var(--p, 1100px); perspective-origin: 50% var(--cy, 50%); touch-action: pan-y; }
html.gs-off .s-films:not([data-failed]) .flow { display: block; position: absolute; inset: 0; max-width: none; padding: 0; transform-style: preserve-3d; }
html.gs-off .s-films:not([data-failed]) .fc { position: absolute; left: 50%; top: var(--cy, 50%); width: var(--cw, 320px); margin: calc(var(--ch, 180px) / -2) 0 0 calc(var(--cw, 320px) / -2); will-change: transform, opacity; }
/* cards sit behind the plane of .flow in 3D, so .flow must not catch the tap */
html.gs-off .s-films:not([data-failed]) .flow { pointer-events: none; }
html.gs-off .s-films:not([data-failed]) .fc { pointer-events: auto; }
html.gs-off .s-films .fc:not(.is-on) .yt b { opacity: 0; }
/* side covers fall back into shadow */
.fl-sh { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; will-change: opacity; }
html.gs-off .s-films:not([data-failed]) .fl-cap { position: absolute; left: 0; right: 0; top: var(--capy, 70%); z-index: 3; height: var(--caph, 120px); will-change: transform; }
.fl-cap__i { position: absolute; left: var(--gutter); right: var(--gutter); top: 0; text-align: center; opacity: 0; visibility: hidden; transform: translate3d(0, 14px, 0); transition: opacity .3s linear, transform .45s var(--th-out), visibility 0s linear .3s; }
.fl-cap__i.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .3s linear .08s, transform .45s var(--th-out) .08s, visibility 0s; }
.fl-cap__i h3 { margin: 0; font-size: 56px; }
.fl-cap__i h3 .ln { display: block; white-space: nowrap; }
.fl-cap__i p { margin: 8px 0 0; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.3; letter-spacing: -.02em; color: #E4DEDF; }
.fl-cap__i .when { font-size: clamp(22px, 2.1vw, 28px); font-weight: 600; color: #fff; }
.fl-cap__i .actions { display: flex; justify-content: center; margin-top: 16px; }
html.gs-off .s-films:not([data-failed]) .flow__dots { display: flex; justify-content: center; gap: 12px; position: absolute; left: 0; right: 0; bottom: max(18px, env(safe-area-inset-bottom)); z-index: 3; }
html.gs-off .s-films:not([data-failed]) .fl-amb { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.fl-amb i { position: absolute; inset: 0; opacity: 0; will-change: opacity; background: var(--a); }
.fl-amb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--ink) 0, rgba(11, 8, 9, .3) 20%, rgba(11, 8, 9, 0) 40%, rgba(11, 8, 9, 0) 68%, rgba(11, 8, 9, .72) 92%, var(--ink) 100%); }
.fl-amb i:nth-child(1) { --a: radial-gradient(78% 60% at 26% var(--ay, 58%), rgba(244, 78, 22, .92) 0, rgba(244, 78, 22, 0) 100%), radial-gradient(72% 56% at 78% var(--ay, 58%), rgba(255, 146, 58, .62) 0, rgba(255, 146, 58, 0) 100%); }
.fl-amb i:nth-child(2) { --a: radial-gradient(72% 60% at 20% var(--ay, 58%), rgba(18, 178, 98, .88) 0, rgba(18, 178, 98, 0) 100%), radial-gradient(72% 60% at 82% var(--ay, 58%), rgba(218, 16, 50, .9) 0, rgba(218, 16, 50, 0) 100%); }
.fl-amb i:nth-child(3) { --a: radial-gradient(82% 62% at 28% var(--ay, 58%), rgba(32, 150, 190, .92) 0, rgba(32, 150, 190, 0) 100%), radial-gradient(52% 44% at 86% var(--ay, 58%), rgba(246, 196, 44, .6) 0, rgba(246, 196, 44, 0) 100%); }
.fl-amb i:nth-child(4) { --a: radial-gradient(36% 58% at 0% var(--ay, 58%), rgba(16, 158, 140, .8) 0, rgba(16, 158, 140, 0) 100%), radial-gradient(64% 68% at 72% var(--ay, 58%), rgba(238, 38, 136, .96) 0, rgba(238, 38, 136, 0) 100%); }

/* the line under the title: only shown when the section is a plain story section */
.fl-say { display: none; }
.s-films[data-still] .fl-say { display: block; margin: 18px 0 0; max-width: 24em; font-family: var(--th-sans); font-weight: 600; font-size: clamp(20px, 5.4vw, 26px); line-height: 1.22; letter-spacing: -.014em; color: var(--fg2); text-wrap: balance; }
/* light version (data-theme set to ivory by build.py): the same cards, dark type on paper */
.s-films[data-theme=ivory] .fl-title, .s-films[data-theme=ivory] .fc h3, .s-films[data-theme=ivory] .fc--hulu .when { color: var(--fg); }
.s-films[data-theme=ivory] .fl-title { color: var(--on-light-accent); }
.s-films[data-theme=ivory] .fc p { color: var(--fg2); }
.s-films[data-theme=ivory] .fl-amb { display: none; }
/* on paper the thumbnails get a soft warm shadow instead of the heavy black one, and sit two by two on a wide screen */
.s-films[data-theme=ivory] .yt { box-shadow: 0 0 0 1px rgba(11, 8, 9, .08), 0 22px 44px -24px rgba(46, 4, 13, .4); }
@media (min-width: 900px) {
  .s-films[data-still] .flow { grid-template-columns: 1fr 1fr; gap: 48px 28px; }
  .s-films[data-still] .fc h3 { font-size: 40px; }
}


/* 10-champions */
/* ---------- 10 champions: the word zoom ---------- */
.s-czoom .only-w { display: none; }
@media (min-width: 900px) { .s-czoom .only-w { display: block; } .s-czoom .only-p { display: none; } }
.s-czoom .stage { background: var(--ink); }
.cz__hold { display: flex; align-items: center; min-height: 100svh; }
.s-czoom .cz__w { color: var(--ivory); }
.cz__c { position: absolute; inset: 0; width: 100%; height: 100%; display: none; pointer-events: none; }
html.gs-off .s-czoom:not([data-failed]) .cz__c { display: block; }
.cz__after { display: flex; align-items: center; min-height: 100svh; padding-block: 84px 24px; }
.cz__after .wrap { width: 100%; }
.cz__hit { color: var(--on-light-accent); }
html.gs-off .s-czoom:not([data-failed]) .cz__after { position: absolute; inset: 0; min-height: 0; }
/* as a plain story section the word and the headline are two bands, not a whole screen each */
.s-czoom[data-still] .stage { min-height: 0; }
.s-czoom[data-still] .cz__hold { display: none; }
.s-czoom[data-still] .cz__after { min-height: 0; padding-block: 104px 40px; }

/* ---------- 10 champions: drum and prism turning together ---------- */
.s-champions { --dh: min(45vw, 21svh); }
.cd { display: flex; flex-direction: column; padding-block: 88px calc(var(--radius-sheet) + 12px); }
html.gs-off .s-champions:not([data-failed]) .cd { height: 100svh; }
.cd__words { padding-inline: var(--gutter); }
.cd__lead { margin: 0 0 6px; font-family: var(--th-sans); font-weight: 600; font-size: clamp(24px, 7vw, 30px); line-height: 1.1; letter-spacing: -.012em; color: var(--fg); }
.s-champions .cd__drum.poster { position: relative; height: var(--dh); font-size: 80px; color: var(--on-light-accent); perspective: 900px; overflow-x: visible; overflow-y: clip; }
.cd__r { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; transform-style: preserve-3d; }
.cd__f { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; line-height: .92; white-space: nowrap; margin-left: -.03em; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.cd__win { position: relative; flex: 1 1 0; min-height: 0; margin-top: 12px; overflow: hidden; perspective: 1100px; background: var(--velvet-base); }
.cd__p { position: absolute; inset: -3px 0; transform-style: preserve-3d; }
.cd__ph { position: absolute; inset: 0; margin: 0; overflow: hidden; background: var(--velvet-base); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.cd__ph img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--px, 50%) var(--py, 50%); }
.cd__s { position: absolute; inset: 0; background: var(--velvet-edge); opacity: 0; pointer-events: none; }
.cd__end { margin: 14px 0 0; padding-inline: var(--gutter); font-family: var(--th-sans); font-weight: 600; font-size: clamp(20px, 5.6vw, 24px); line-height: 1.18; letter-spacing: -.01em; color: var(--fg); text-wrap: balance; }

/* Wide: not a text-left photo-right card. One sentence across the column, the word on one line, and the prism is a full-bleed cinema strip down to the floor. */
@media (min-width: 900px) {
  .s-champions { --dh: min(190px, 23svh); --edge: max(var(--gutter), calc((100% - var(--w-wrap)) / 2)); }
  .cd { display: grid; grid-template-columns: var(--edge) minmax(0, 1fr) var(--edge); grid-template-rows: auto auto minmax(0, 1fr); padding: 82px 0 0; }
  .cd__words { display: contents; }
  .cd__lead { grid-column: 2; grid-row: 1; align-self: end; margin: 0; font-size: 32px; }
  .cd__end { grid-column: 2; grid-row: 1; justify-self: end; align-self: end; margin: 0; padding: 0 0 2px; font-size: 24px; line-height: 1.2; }
  .s-champions .cd__drum.poster { grid-column: 2; grid-row: 2; }
  .cd__f { flex-direction: row; justify-content: flex-start; align-items: center; column-gap: .22em; }
  .cd__win { grid-column: 1 / -1; grid-row: 3; flex: none; margin: 10px 0 0; perspective: 1200px; }
  .cd__ph img { object-position: var(--dx, var(--px, 50%)) var(--dy, var(--py, 50%)); }
}

/* no motion, or the section failed: a plain stack */
html:not(.gs-off) .cd__drum.poster, .s-champions[data-failed] .cd__drum.poster { height: auto; overflow: visible; perspective: none; }
html:not(.gs-off) .cd__r, .s-champions[data-failed] .cd__r { position: static; }
html:not(.gs-off) .cd__f, .s-champions[data-failed] .cd__f { position: static; display: block; }
html:not(.gs-off) .cd__win, .s-champions[data-failed] .cd__win { flex: none; height: auto; overflow: visible; perspective: none; background: none; }
html:not(.gs-off) .cd__p, .s-champions[data-failed] .cd__p { position: static; display: grid; gap: 8px; }
html:not(.gs-off) .cd__ph, .s-champions[data-failed] .cd__ph { position: static; aspect-ratio: 1 / 1; }
@media (min-width: 900px) { html:not(.gs-off) .cd__ph, .s-champions[data-failed] .cd__ph { aspect-ratio: 21 / 9; } }

/* plain story version: one wide photograph and four small ones, not five full screens */
.s-champions[data-still] .cd { padding-block: 8px calc(var(--radius-sheet) + 28px); }
.s-champions[data-still] .cd__win { margin-top: 28px; padding-inline: var(--gutter); }
.s-champions[data-still] .cd__p { grid-template-columns: 1fr 1fr; gap: 8px; }
.s-champions[data-still] .cd__ph { aspect-ratio: 4 / 5; }
.s-champions[data-still] .cd__ph:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.s-champions[data-still] .cd__end { margin-top: 26px; }
@media (min-width: 900px) {
  .s-champions[data-still] .cd { display: flex; flex-direction: column; padding: 8px 0 calc(var(--radius-sheet) + 40px); }
  .s-champions[data-still] .cd__words, .s-champions[data-still] .cd__end { display: block; width: 100%; max-width: calc(var(--w-wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
  .s-champions[data-still] .cd__win { width: 100%; max-width: calc(var(--w-wrap) + var(--gutter) * 2); margin: 32px auto 0; }
  .s-champions[data-still] .cd__p { grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .s-champions[data-still] .cd__ph { aspect-ratio: 4 / 5; }
  .s-champions[data-still] .cd__ph:first-child { aspect-ratio: 21 / 9; }
  .s-champions[data-still] .cd__end { margin-top: 28px; }
}


/* 11-career */
/* ---------- 11 career: a ring of real photos that tells the story ---------- */
.s-career .only-w { display: none; }
@media (min-width: 900px) { .s-career .only-w { display: block; } .s-career .only-p { display: none; } }
.cr__head { padding-top: 96px; }
.cr__ring { padding: 32px var(--gutter); }
.rg__r { margin: 0; padding: 0; list-style: none; }
.rg__f { margin: 0; }
.s-career { --ar: 5 / 7; }
@media (min-width: 900px) { .s-career { --ar: 4 / 5; } }
.rg__ph { position: relative; aspect-ratio: var(--ar); overflow: hidden; background: var(--cherry); }
.rg__ph img, .rg__b img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rg__s { position: absolute; inset: 0; background: var(--velvet-edge); opacity: 0; pointer-events: none; }
.rg__cap { padding-top: 12px; }
.rg__y { display: block; font-family: var(--th-poster); font-weight: 400; font-size: 64px; line-height: .96; text-transform: uppercase; color: #fff; }
.rg__t { display: block; margin-top: 4px; font-family: var(--th-sans); font-weight: 600; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.2; letter-spacing: -.012em; color: var(--on-velvet-2); text-wrap: balance; }
.rg__b { display: none; }
.cr__end { padding-block: 40px 96px; }
.cr__end .wrap { width: 100%; }
.cr__say { margin: 0 0 10px; font-family: var(--th-sans); font-weight: 600; font-size: clamp(24px, 7vw, 40px); line-height: 1.1; letter-spacing: -.012em; color: var(--on-velvet-1); }
.cr__sig { width: min(58vw, 280px); margin-top: 22px; color: #fff; }

/* the ring itself: only when it can move */
html.gs .s-career:not([data-failed]) .cr__head { position: absolute; left: 0; right: 0; top: 96px; padding-top: 0; z-index: 3; }
html.gs .s-career:not([data-failed]) .cr__ring { position: absolute; inset: 0; z-index: 2; padding: 0; perspective: var(--p, 950px); perspective-origin: 50% var(--cy, 50%); touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; }
html.gs .s-career:not([data-failed]) .cr__ring.is-down { cursor: grabbing; }
html.gs .s-career:not([data-failed]) .rg__r { position: absolute; left: 50%; top: var(--cy, 50%); width: 0; height: 0; transform-style: preserve-3d; }
html.gs .s-career:not([data-failed]) .rg__p { position: absolute; left: calc(var(--pw, 280px) / -2); top: calc(var(--pt, 480px) / -2); width: var(--pw, 280px); transform-style: preserve-3d; }
html.gs .s-career:not([data-failed]) .rg__f { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
html.gs .s-career:not([data-failed]) .rg__b { display: block; position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: var(--ar); overflow: hidden; background: var(--cherry); transform: rotateY(180deg); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
html.gs .s-career:not([data-failed]) .rg__b img { opacity: .4; }
html[data-motion=lite] .s-career .rg__b { display: none !important; }
html.gs .s-career:not([data-failed]) .rg__ph img { -webkit-user-drag: none; pointer-events: none; }
html.gs .s-career:not([data-failed]) .cr__end { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; padding-block: 84px 60px; pointer-events: none; }

/* no motion, or the section failed: a plain grid of the same panels */
html:not(.gs) .rg__r, .s-career[data-failed] .rg__r { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; max-width: var(--w-wrap); margin-inline: auto; }
@media (min-width: 900px) { html:not(.gs) .rg__r, .s-career[data-failed] .rg__r { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 20px; } }


/* 12-built */
/* ---------- 12 what he built: Apple-grey ground, tiles in real colour ---------- */
.s-built { padding-top: clamp(104px, 11vw, 132px); padding-bottom: clamp(88px, 10vw, 128px); }
.s-built .only-w { display: none; }
@media (min-width: 900px) { .s-built .only-w { display: block; } .s-built .only-p { display: none; } }
.bt__head { margin-bottom: clamp(28px, 3.6vw, 44px); }

.bt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.bt__c { grid-column: span 2; min-width: 0; }
.bt__c--half { grid-column: span 1; }
.bt__m { height: 100%; }
.bt__t { position: relative; display: flex; flex-direction: column; height: 100%; overflow: clip; border-radius: 26px; }

/* the velvet, ink, titanium and stone tiles */
.bt__t--ti { background: linear-gradient(116deg, #978B7B 0, #C9BFAF 22%, #EFE9DF 38%, #BCB1A1 54%, #8F8373 76%, #AEA393 100%); color: var(--on-light-1); --line-c: var(--on-light-1); }
.bt__ti { position: absolute; top: -10%; bottom: -10%; left: -100%; width: 130%; pointer-events: none; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 36%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0) 64%); }
.bt__t--ti > .bt__art, .bt__t--ti > .bt__copy { position: relative; z-index: 1; }
.bt__t--st { background: radial-gradient(120% 78% at 28% 8%, #F5EFE5 0, var(--stone) 54%, #CFC4B2 100%); color: var(--on-light-1); --line-c: var(--on-light-1); }
.bt__t[data-theme=ink] { --line-c: var(--on-ink-1); }

/* phone sizes */
.bt__c--v .bt__t { min-height: 430px; }
.bt__c--p .bt__t { aspect-ratio: 4 / 5; }
.bt__c--i .bt__t { min-height: 500px; }
.bt__c--half .bt__t { min-height: 412px; }

/* every tile is one picture and a few words. Nothing sits on the picture. */
.bt__art { position: relative; flex: 1 1 auto; min-height: 120px; display: grid; place-items: center; }
.bt__say { flex: none; margin: 0; padding: 0 26px 28px; font-weight: 600; font-size: 21px; line-height: 1.2; letter-spacing: .002em; color: var(--fg2); text-wrap: pretty; }
.bt__say b { color: var(--fg); font-weight: 600; }
.bt__copy { flex: none; padding: 0 26px 26px; }
.bt__copy--top { padding: 30px 26px 0; position: relative; z-index: 1; }
.bt__c--half .bt__copy { padding: 0 16px 18px; }
.bt__h { font-size: 64px; }
.bt__line { margin: 10px 0 0; font-weight: 600; font-size: 19px; line-height: 1.2; letter-spacing: .002em; color: var(--line-c, inherit); text-wrap: pretty; }
.bt__c--half .bt__line { font-size: 16px; line-height: 1.22; letter-spacing: -.008em; }

/* photo tile: only the photo */
.bt__t--ph { background: var(--ink); }
.bt__t--ph img { position: absolute; left: 0; top: -9%; width: 100%; height: 118%; object-fit: cover; object-position: 53% 50%; }

/* the Enhanced logo, cut as a solid block that turns, in front of the year pressed into the velvet */
.bt__art--lg { perspective: 760px; container-type: inline-size; }
.bt__yr { position: absolute; inset: 0; display: grid; place-items: center; font-size: 240px; font-size: 68cqw; line-height: 1; white-space: nowrap; color: #84203A; opacity: .62; }
.bt__lg { position: relative; width: 82%; aspect-ratio: 200 / 33; transform-style: preserve-3d; }
.bt__lg i { position: absolute; inset: 0; background: #1F040B; -webkit-mask: url("img/logos/enhanced.svg") center / 100% 100% no-repeat; mask: url("img/logos/enhanced.svg") center / 100% 100% no-repeat; transform: translateZ(calc(var(--z) * 1.6px)); }
.bt__lg i.bt__lg-f { background: #fff; }

/* thousands of them: a crowd that runs off the tile, lit one person at a time */
.bt__art--crowd { display: block; flex: 1 1 auto; min-height: 210px; margin-top: 14px; overflow: clip; background: linear-gradient(180deg, rgba(122, 22, 46, 0) 0, rgba(122, 22, 46, .9) 40px, rgba(122, 22, 46, .9) 100%); }
.bt__crowd { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* the floor shadow under the plus and the book */
.bt__sh { position: absolute; left: 50%; top: calc(50% + var(--sy, 66px)); width: var(--sw, 148px); height: 26px; margin-left: calc(var(--sw, 148px) / -2); background: radial-gradient(closest-side, rgba(38, 22, 12, .3), rgba(38, 22, 12, 0)); }

/* the plus: solid, turning */
.bt__art--plus { perspective: 620px; --sy: 74px; --sw: 124px; }
.bt__pl { position: relative; width: 104px; height: 104px; transform-style: preserve-3d; }
.bt__pl i { position: absolute; inset: 0; background: #2A050E; clip-path: polygon(38% 0, 62% 0, 62% 38%, 100% 38%, 100% 62%, 62% 62%, 62% 100%, 38% 100%, 38% 62%, 0 62%, 0 38%, 38% 38%); transform: translateZ(calc((var(--z) - 4.5) * 3px)); }
.bt__pl i.bt__pl-r { background: var(--champagne); }
.bt__pl i.bt__pl-f { background: linear-gradient(135deg, #8C1B36 0, #6A1127 52%, #43081A 100%); }

/* the book */
.bt__art--bk { perspective: 760px; --sy: 88px; --sw: 136px; }
.bt__bk { --bw: 112px; --bh: 158px; --bd: 26px; position: relative; width: var(--bw); height: var(--bh); transform-style: preserve-3d; }
.bt__bk i, .bt__bk-f { position: absolute; display: block; }
.bt__bk-f { inset: 0; display: flex; flex-direction: column; align-items: center; padding: 14px 6px 10px; border-radius: 2px 5px 5px 2px; background: linear-gradient(120deg, #6E1529 0, #5A0F22 46%, #3D0714 100%); box-shadow: inset 7px 0 0 -5px rgba(0, 0, 0, .28), inset 0 0 0 1px rgba(255, 255, 255, .06); color: var(--champagne); transform: translateZ(calc(var(--bd) / 2)); }
.bt__bk-n { display: block; font-family: var(--th-poster); text-transform: uppercase; font-size: 26px; line-height: .98; }
.bt__bk .sig { width: 76%; margin-top: auto; color: #fff; }
.bt__bk-b { inset: 0; border-radius: 5px 2px 2px 5px; background: #3D0714; transform: translateZ(calc(var(--bd) / -2)) rotateY(180deg); }
.bt__bk-s { left: calc(var(--bd) / -2); top: 0; width: var(--bd); height: 100%; background: linear-gradient(90deg, #2A050E, #4D0A1C 50%, #2A050E); transform: rotateY(-90deg); }
.bt__bk-p { right: calc(var(--bd) / -2); top: 2px; width: var(--bd); height: calc(100% - 4px); background: linear-gradient(90deg, #E9E1D2, #FBF8F1 42%, #DCD3C3); transform: rotateY(90deg); }
.bt__bk-t { left: 0; top: calc(var(--bd) / -2); width: calc(100% - 2px); height: var(--bd); background: linear-gradient(0deg, #E9E1D2, #FBF8F1); transform: rotateX(90deg); }

@media (min-width: 900px) {
  .bt { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
  .bt__c, .bt__c--half { grid-column: auto; }
  .bt__c--v { grid-column: span 5; }
  .bt__c--p { grid-column: span 7; }
  .bt__c--i { grid-column: span 5; }
  .bt__c--n { grid-column: span 3; }
  .bt__c--b { grid-column: span 4; }
  .bt__t { border-radius: 30px; }
  .bt__c--v .bt__t, .bt__c--p .bt__t { min-height: 500px; aspect-ratio: auto; }
  .bt__c--i .bt__t, .bt__c--half .bt__t { min-height: 520px; }
  .bt__say { padding: 0 34px 34px; font-size: 24px; line-height: 1.18; }
  .bt__copy, .bt__c--half .bt__copy { padding: 0 28px 30px; }
  .bt__copy--top { padding: 34px 34px 0; }
  .bt__line, .bt__c--half .bt__line { font-size: 19px; line-height: 1.2; letter-spacing: .002em; }
  .bt__pl { width: 140px; height: 140px; }
  .bt__art--plus { --sy: 96px; --sw: 160px; }
  .bt__bk { --bw: 142px; --bh: 200px; --bd: 32px; }
  .bt__art--bk { --sy: 110px; --sw: 170px; }
  .bt__bk-n { font-size: 35px; }
}


/* 13-decide */
/* ---------- 13 you decide: a hard white and ink split, the new series stated and held ---------- */
.s-decide { --h: 350svh; --dc-side: max(var(--gutter), calc((100vw - var(--w-wrap)) / 2)); }
.s-decide .only-w { display: none; }
@media (min-width: 900px) { .s-decide { --h: 260svh; } .s-decide .only-w { display: block; } .s-decide .dc__act.only-w { display: flex; } .s-decide .only-p { display: none; } }

/* the message */
.dc__dead { margin: 0; font-weight: 700; font-size: clamp(38px, 10.4vw, 44px); line-height: 1.06; letter-spacing: -.012em; text-wrap: balance; }
.dc__names { margin: 22px 0 0; }
.dc__nm { display: block; white-space: nowrap; line-height: .94; color: inherit; }
.dc__and { display: block; margin: 3px 0 4px; font-weight: 600; font-size: 22px; line-height: 1.2; }
.dc__real { margin: 22px 0 0; font-weight: 600; font-size: 22px; line-height: 1.22; letter-spacing: .002em; text-wrap: pretty; }
.dc__you { margin: 10px 0 0; font-weight: 700; font-size: 34px; line-height: 1.1; letter-spacing: -.008em; }
.dc__act { display: flex; }

/* the card */
.dc__flip { position: relative; display: block; padding: 0; border: 0; background: none; cursor: pointer; perspective: 1300px; -webkit-tap-highlight-color: transparent; }
.dc__flipb:focus-visible + .dc__tap { outline: 2px solid var(--champagne); outline-offset: 6px; border-radius: 30px; }
html:not(.gs) .dc__flipb, .s-decide[data-failed] .dc__flipb { display: none; }
.dc__tap, .dc__spin { position: absolute; inset: 0; transform-style: preserve-3d; }
.dc__ed { position: absolute; inset: 0; border-radius: 28px; background: #5A0F22; transform: translateZ(calc(var(--z) * 1px)); }
.dc__ed--c { background: var(--champagne); }
.dc__f { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 28px; -webkit-backface-visibility: hidden; backface-visibility: hidden; text-align: left; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10); }
.dc__f--h { background: var(--ivory); color: var(--on-light-1); --dc-by: var(--on-light-2); --dc-w: var(--on-light-accent); --dc-rule: var(--line-on-light); }
.s-decide .dc__f--v { position: absolute; transform: rotateY(180deg); --dc-by: var(--on-velvet-2); --dc-w: #fff; --dc-rule: var(--line-on-dark); }
.dc__ph { position: relative; flex: 0 0 auto; height: var(--dc-ph, 47%); overflow: hidden; background: #000; }
.dc__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; }
.dc__f--h .dc__ph img { object-position: 50% 6%; transform: scale(1.2); transform-origin: 54% 0; }
.dc__f--v .dc__ph img { object-position: 50% 2%; }
.dc__turn { position: absolute; right: 12px; top: 12px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(16, 6, 9, .58); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.dc__gl { position: absolute; inset: -10% -60%; z-index: 3; pointer-events: none; opacity: 0; background: linear-gradient(104deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 62%); }
html:not(.gs) .dc__turn, .s-decide[data-failed] .dc__turn, html:not(.gs) .dc__gl, .s-decide[data-failed] .dc__gl { display: none; }
.dc__tx { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 14px 22px 16px; }
.dc__top { display: flex; flex-direction: column; gap: 2px; }
.dc__w { font-size: clamp(72px, min(15.4svh, 33vw), 132px); line-height: .92; white-space: nowrap; color: var(--dc-w); }
.dc__by { margin: 0; font-weight: 600; font-size: 15px; line-height: 1.2; letter-spacing: -.01em; color: var(--dc-by); white-space: nowrap; }
.dc__l { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-evenly; margin: 6px 0 0; padding: 0; list-style: none; }
.dc__l li { padding: 7px 0; border-top: 1px solid var(--dc-rule); font-weight: 600; font-size: clamp(16px, 2.4svh, 20px); line-height: 1.2; letter-spacing: -.008em; text-wrap: balance; }

/* ---------- the running scene ---------- */
html.gs .s-decide:not([data-failed]) .stage { background: var(--white); }
html.gs .s-decide:not([data-failed]) .dc__bill { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; }
html.gs .s-decide:not([data-failed]) .dc__line { padding-inline: var(--dc-side); }
html.gs .s-decide:not([data-failed]) .dc__half { display: flex; padding-inline: var(--gutter); }
html.gs .s-decide:not([data-failed]) .dc__half--t { height: 61%; }
html.gs .s-decide:not([data-failed]) .dc__half--b { height: 39%; padding-top: 16px; }
html.gs .s-decide:not([data-failed]) .dc__half .poster { width: 100%; }
.dc__half--t { align-items: flex-end; }
.dc__half--b { align-items: flex-start; }
html.gs .s-decide:not([data-failed]) .dc__ink { position: absolute; inset: 0; z-index: 2; overflow: hidden; will-change: transform; }
html.gs .s-decide:not([data-failed]) .dc__ink2 { position: absolute; inset: 0; will-change: transform; }
.dc__glow { position: absolute; left: 50%; top: 66%; width: 170vw; height: 92svh; margin: -46svh 0 0 -85vw; opacity: 0; pointer-events: none; }
.dc__glow--h { background: radial-gradient(closest-side, rgba(255, 238, 214, .13), rgba(255, 238, 214, 0)); }
.dc__glow--v { background: radial-gradient(closest-side, rgba(158, 22, 54, .78), rgba(158, 22, 54, 0)); }

html.gs .s-decide:not([data-failed]) .dc__msg { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; padding: 84px var(--gutter) 24px; color: #fff; pointer-events: none; }
html.gs .s-decide:not([data-failed]) .dc__msg a { pointer-events: auto; }
.dc__in { width: 100%; }
.dc__msg .dc__real { color: var(--on-ink-2); }

html.gs .s-decide:not([data-failed]) .dc__cardw { position: absolute; left: 0; right: 0; top: 80px; z-index: 4; display: flex; justify-content: center; }
html.gs .s-decide:not([data-failed]) .dc__flip { width: min(100vw - 40px, 420px); height: min(100svh - 80px - 92px, 700px); }
html.gs .s-decide:not([data-failed]) .dc__act--p { position: absolute; left: 0; right: 0; bottom: max(20px, env(safe-area-inset-bottom)); z-index: 4; justify-content: center; gap: 10px; margin: 0; padding-inline: var(--gutter); background: none; }
.dc__act--p .btn { flex: 1 1 0; min-width: 0; padding: 0 12px; font-size: 16px; }
.dc__act--p .btn i { flex: none; }
@media (max-width: 379.98px) { .dc__act--p .btn { gap: 6px; padding: 0 8px; font-size: 15px; } }

@media (min-width: 900px) {
  html.gs .s-decide:not([data-failed]) .dc__half { display: none; }
  html.gs .s-decide:not([data-failed]) .dc__msg { right: 50%; padding: 76px 56px 24px var(--dc-side); color: var(--on-light-1); }
  .dc__msg .dc__real { color: var(--on-light-2); }
  html.gs .s-decide:not([data-failed]) .dc__cardw { left: 50%; right: var(--dc-side); top: 0; bottom: 0; align-items: center; justify-content: flex-end; padding-top: 44px; }
  html.gs .s-decide:not([data-failed]) .dc__flip { height: min(100svh - 112px, 672px); width: min(calc(min(100svh - 112px, 672px) * .68), 456px); }
  .dc__glow { left: 75%; top: 54%; width: 1000px; height: 1000px; margin: -500px 0 0 -500px; }
  .dc__dead { font-size: clamp(34px, 3.3vw, 42px); }
  .dc__names { margin-top: 20px; }
  .dc__real { margin-top: 20px; font-size: 21px; }
  .dc__you { font-size: 32px; }
  .dc__act { margin-top: 26px; }
  .dc__f--h .dc__ph img { transform: none; }
  .dc__top { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; }
  .dc__w { font-size: 128px; }
  .dc__tx { padding: 16px 28px 20px; }
  .dc__by { font-size: 16px; }
  .dc__l li { font-size: 20px; padding: 9px 0; }
}

/* short screens */
@media (max-height: 720px) and (max-width: 899.98px) { .dc__f { --dc-ph: 40%; } .dc__tx { padding: 10px 18px 10px; } .dc__l li { padding: 5px 0; } .dc__by { font-size: 13px; } .dc__w { font-size: min(13.4svh, 30vw); } .dc__dead { font-size: 32px; } .dc__names { margin-top: 14px; } .dc__real { margin-top: 14px; font-size: 19px; } .dc__you { font-size: 28px; } }
@media (max-height: 600px) and (max-width: 899.98px) { .dc__f { --dc-ph: 32%; } .dc__w { font-size: 62px; } }
@media (max-height: 720px) and (min-width: 900px) { .dc__dead { font-size: 32px; } .dc__names { margin-top: 12px; } .dc__real { margin-top: 12px; font-size: 19px; } .dc__you { font-size: 26px; } .dc__act { margin-top: 16px; } .dc__w { font-size: 84px; } .dc__l li { padding: 6px 0; font-size: 17px; } }

/* ---------- no motion, or the section failed: both sides, stacked ---------- */
html:not(.gs) .dc__ink, .s-decide[data-failed] .dc__ink { display: none; }
html:not(.gs) .s-decide .stage, .s-decide[data-failed] .stage { height: auto; min-height: 0; }
html:not(.gs) .dc__bill, .s-decide[data-failed] .dc__bill { padding: var(--section) var(--gutter) 24px; max-width: calc(var(--w-wrap) + var(--gutter) * 2); margin-inline: auto; }
html:not(.gs) .dc__msg, .s-decide[data-failed] .dc__msg { max-width: calc(var(--w-measure) + var(--gutter) * 2); margin-inline: auto; padding: 0 var(--gutter) 56px; color: var(--on-light-1); }
html:not(.gs) .dc__msg .dc__real, .s-decide[data-failed] .dc__msg .dc__real { color: var(--on-light-2); }
html:not(.gs) .dc__cardw, .s-decide[data-failed] .dc__cardw { background: var(--ink); padding: 40px var(--gutter); }
html:not(.gs) .dc__flip, .s-decide[data-failed] .dc__flip { perspective: none; cursor: default; max-width: var(--w-wrap); margin-inline: auto; }
html:not(.gs) .dc__tap, html:not(.gs) .dc__spin, .s-decide[data-failed] .dc__tap, .s-decide[data-failed] .dc__spin { position: static; transform: none !important; }
html:not(.gs) .dc__spin, .s-decide[data-failed] .dc__spin { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
html:not(.gs) .dc__f, .s-decide[data-failed] .dc__f { position: relative; inset: auto; transform: none; }
html:not(.gs) .dc__ph, .s-decide[data-failed] .dc__ph { height: 300px; }
html:not(.gs) .dc__act--p, .s-decide[data-failed] .dc__act--p { padding: 0 var(--gutter) 56px; background: var(--ink); justify-content: center; }

/* over the split, the nav stays one clean white pill instead of going grey over the ink half */
html.dc-split .nav__p { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }


/* 14-free */
/* ---------- 14 free: a deck dealt face up, then a white disc blooms into protocols ---------- */
.s-free { --h: 250svh; }
/* protocols sits on the last screen of this track, hidden, so the disc lands straight on it with no empty white screen */
html.gs .s-free.fr--scene:not([data-failed]) + .s-protocols { margin-top: -100svh; }
.s-free .only-w { display: none; }
.fr { padding-block: 104px calc(var(--radius-sheet) + 40px); }
.fr__deck { display: grid; gap: 12px; margin-top: 32px; }
.fr__c { position: relative; display: block; color: inherit; text-decoration: none; border-radius: 24px; }
.fr__in { display: block; }
.fr__f { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; min-height: 340px; padding: 20px; border-radius: 24px; overflow: hidden; box-shadow: 0 30px 60px -22px rgba(10, 2, 5, .62); }
.fr__t { display: block; font-size: 88px; }
.fr__f[data-theme=white] .fr__t, .fr__f[data-theme=ivory] .fr__t { color: var(--on-light-accent); }
/* every card holds the thing itself, in the space between its name and its button */
.fr__art { position: relative; display: block; flex: 1 1 0; min-height: 110px; }
.fr__bk { position: absolute; top: 0; bottom: 2px; right: 6%; aspect-ratio: 1 / 1.36; transform-style: preserve-3d; transform: perspective(620px) rotateY(-24deg) rotateX(3deg); filter: drop-shadow(-14px 16px 14px rgba(58, 8, 20, .34)); }
.fr__bk-f, .fr__bk-p { position: absolute; inset: 0; display: block; }
.fr__bk-f { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 4%; container-type: inline-size; padding: 0 8% 0 21%; border-radius: 2px 5px 5px 2px; overflow: hidden; background: radial-gradient(120% 90% at 62% 20%, #7D1730 0, var(--velvet-crown) 44%, var(--velvet-base) 100%); transform: translateZ(9px); }
.fr__bk-f > i { position: absolute; top: 0; bottom: 0; left: 0; width: 13%; background: linear-gradient(90deg, #26040C, #4A0918 62%, #1C0309 100%); }
.fr__bk-f .poster { display: block; color: #fff; font-size: 30cqw; line-height: .9; }
.fr__bk-f .poster span { display: block; }
.fr__bk-f .sig { align-self: flex-end; width: 44%; color: #fff; }
.fr__bk-p { left: auto; right: -1px; width: 18px; background: linear-gradient(90deg, #E4DBCB, #F7F3EA 40%, #CFC5B3); transform-origin: 100% 50%; transform: translateZ(9px) rotateY(90deg); }
.fr__art--n { display: flex; align-items: flex-end; }
.fr__n { display: block; color: #fff; font-size: 110px; }
.fr__keys { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 6px; container-type: size; }
.fr__keys i { display: grid; place-items: center; min-height: 0; border-radius: 10px; font-family: var(--th-poster); font-style: normal; font-size: min(26px, 12cqh + 8px); line-height: 1; color: var(--on-light-accent); background: linear-gradient(180deg, #FFFFFF, #EFE9DE); box-shadow: inset 0 0 0 1px rgba(90, 15, 34, .10), 0 2px 0 rgba(90, 15, 34, .16); }
.fr__keys .is-eq { color: #fff; background: linear-gradient(180deg, var(--burgundy-hover), var(--velvet-lit)); box-shadow: 0 2px 0 var(--velvet-edge); }
.fr__sps { position: absolute; inset: 0 -24px 0 0; display: flex; align-items: flex-end; gap: 3px; border-bottom: 5px solid var(--velvet-lit); }
.fr__sps b { display: grid; place-items: center; flex: 0 0 auto; width: clamp(30px, 11cqw, 44px); height: 96%; padding: 0; border-radius: 3px 3px 0 0; overflow: hidden; writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--th-poster); font-weight: 400; font-size: 22px; line-height: 1; text-transform: uppercase; white-space: nowrap; color: #fff; background: linear-gradient(90deg, var(--burgundy-hover), var(--velvet-lit)); }
.fr__sps b:nth-child(2) { height: 84%; background: linear-gradient(90deg, #2A2427, var(--ink)); }
.fr__sps b:nth-child(3) { height: 100%; color: var(--on-light-accent); background: linear-gradient(90deg, #FFFFFF, #EDE7DC); }
.fr__sps b:nth-child(4) { height: 90%; }
.fr__sps b:nth-child(5) { height: 100%; background: linear-gradient(90deg, #2A2427, var(--ink)); }
.fr__sps b:nth-child(6) { height: 86%; background: linear-gradient(90deg, #7D1730, var(--velvet-base)); }
.fr__sps b:nth-child(7) { height: 96%; color: var(--on-light-accent); background: linear-gradient(90deg, #FFFFFF, #EDE7DC); }
.fr__f--ti { background: linear-gradient(165deg, #CFC5B4 0, var(--titanium) 70%, #A89C8A 100%); --fg2: #38322F; }
.fr__f--ti .fr__t { color: var(--velvet-base); }
.fr__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.fr__p { font-size: 17px; line-height: 1.3; letter-spacing: -.014em; color: var(--fg2); text-wrap: pretty; }
.fr__go { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 999px; background: var(--btn-bg); color: var(--btn-fg); font-weight: 600; font-size: 16px; letter-spacing: -.016em; white-space: nowrap; }
.fr__go i { display: inline-grid; place-items: center; width: 13px; height: 13px; font-style: normal; }
.fr__go svg { width: 13px; height: 13px; }
.fr__b { display: none; }
.fr__disc { display: none; }

/* the scene: only once the script has taken over */
.fr--scene:not([data-failed]) .fr { position: absolute; inset: 0; padding-block: 84px 0; }
.fr--scene:not([data-failed]) .fr__h .ln { transform-origin: 0 0; }
.fr--scene:not([data-failed]) .fr__deck { position: absolute; left: var(--gutter); right: var(--gutter); top: calc(84px + var(--head, 96px) + 14px); bottom: 20px; max-height: 560px; display: block; margin: 0; }
.fr--scene:not([data-failed]) .fr__c { position: absolute; inset: 0; z-index: calc(4 - var(--i)); perspective: 1100px; }
.fr--scene:not([data-failed]) .fr__in { position: absolute; inset: 0; transform-style: preserve-3d; }
.fr--scene:not([data-failed]) .fr__f, .fr--scene:not([data-failed]) .fr__b { position: absolute; inset: 0; min-height: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.fr--scene:not([data-failed]) .fr__b { display: grid; place-items: center; border-radius: 24px; transform: rotateY(180deg); background: radial-gradient(110% 80% at 50% 36%, #7A1529 0, var(--velvet-crown) 46%, var(--velvet-lit) 100%); box-shadow: inset 0 0 0 1px rgba(220, 199, 163, .22), 0 26px 50px -18px rgba(10, 2, 5, .72); }
.fr__b .sig { width: 58%; color: #fff; }
.fr--scene:not([data-failed]) .fr__disc { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; }

/* flat: reduced motion, very short screens */
.fr--flat .fr__c, .fr--flat .fr__in, .fr--flat .fr__f { height: 100%; }
html.gs .s-free.fr--flat { height: auto; }
html.gs .s-free.fr--flat > .stage { position: relative; height: auto; min-height: 100svh; }

@media (min-width: 900px) {
  .s-free { --h: 210svh; }
  .s-free .only-w { display: block; }
  .s-free .only-p { display: none; }
  .fr__deck { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .fr__f { padding: 22px; }
  .fr__p { font-size: 16px; }
  .fr__sps b { font-size: 21px; }
  .fr--scene:not([data-failed]) .fr { display: flex; flex-direction: column; justify-content: center; padding-block: 78px 20px; }
  .fr--scene:not([data-failed]) .fr__h.only-w { margin-block: -.07em; }
  .fr--scene:not([data-failed]) .fr__deck { position: relative; left: auto; right: auto; top: auto; bottom: auto; flex: 1 1 0; min-height: 0; max-height: 480px; margin-top: 14px; display: grid; }
  .fr--scene:not([data-failed]) .fr__c { position: relative; inset: auto; }
}
@media (min-width: 900px) and (max-height: 700px) {
  .fr__art--bk, .fr__art--k, .fr__art--sp { display: none; }
}


/* 15-protocols */
/* ---------- 15 protocols: a wallet of six coloured cards piling up on white ---------- */
.s-protocols { --top: 84px; --strip: min(72px, 8.6svh); --card: min(calc(100svh - var(--top) - var(--strip) * 5 - 16px), 340px); padding-block: 72px 56px; }
.s-protocols .only-w { display: none; }
.s-protocols .poster { color: var(--on-light-accent); }
.s-protocols .ln { overflow: clip; padding-block: .05em; margin-block: -.05em; }
.s-protocols .ln > span { display: block; }
.pr__stack { margin-top: 44px; }
.pr__stack::after { content: ""; display: block; height: 24svh; }
.s-protocols .hub { --c-fg: #fff; --c-fg2: var(--on-velvet-2); --c-bg: var(--ink); --c-pill: #fff; --c-pill-fg: var(--ink); position: relative; display: flex; flex-direction: column; justify-content: space-between; width: auto; min-height: var(--card); padding: 0 20px 20px; margin-bottom: 18px; border: 0; border-radius: 24px; overflow: hidden; isolation: isolate; background: var(--c-bg); color: var(--c-fg); box-shadow: 0 -18px 40px -26px rgba(11, 8, 9, .5); text-decoration: none; }
/* a hard-cropped photograph in the corner of every card. Text never touches it. */
.s-protocols .hub::after { content: ""; position: absolute; z-index: -1; right: 0; bottom: 0; width: calc(100% - 208px); height: 46%; background: var(--ph) var(--pos, 50% 20%) / cover no-repeat; transition: transform .7s var(--th-out); }
.s-protocols .hub:last-child { margin-bottom: 0; }
html.gs .s-protocols:not([data-failed]) .hub { position: sticky; top: calc(var(--top) + var(--strip) * var(--i)); height: var(--card); margin-top: calc((6 - var(--i)) * var(--strip) * -1); margin-bottom: calc(18px + (5 - var(--i)) * var(--strip)); }
html.gs .s-protocols:not([data-failed]) .hub:first-child { margin-top: 0; }
html.gs .s-protocols:not([data-failed]) .hub:last-child { margin-bottom: 0; }
.s-protocols .hub:nth-child(1) { --i: 0; --ph: url("img/v7/page-about.webp"); --pos: 50% 34%; --c-bg: radial-gradient(120% 140% at 18% 0, var(--velvet-crown) 0, var(--velvet-lit) 45%, var(--velvet-base) 100%); }
.s-protocols .hub:nth-child(2) { --i: 1; --ph: url("img/v7/page-shop.webp"); --pos: 40% 30%; --c-bg: var(--ink); --c-fg2: var(--on-ink-2); }
.s-protocols .hub:nth-child(3) { --i: 2; --ph: url("img/v7/page-films.webp"); --pos: 62% 24%; --c-bg: var(--titanium); --c-fg: var(--on-light-1); --c-fg2: #38322F; --c-pill: var(--burgundy); --c-pill-fg: #fff; }
.s-protocols .hub:nth-child(4) { --i: 3; --ph: url("img/v7/page-protocols.webp"); --pos: 62% 20%; --c-bg: linear-gradient(160deg, var(--burgundy-hover) 0, var(--burgundy) 60%, var(--velvet-base) 100%); }
.s-protocols .hub:nth-child(5) { --i: 4; --ph: url("img/v7/ring-10.webp"); --pos: 58% 34%; --c-bg: var(--stone); --c-fg: var(--on-light-accent); --c-fg2: var(--on-light-2); --c-pill: var(--burgundy); --c-pill-fg: #fff; }
.s-protocols .hub:nth-child(6) { --i: 5; --ph: url("img/v7/champ-billionaires.webp"); --pos: 66% 26%; --c-bg: radial-gradient(120% 140% at 82% 0, var(--velvet-crown) 0, var(--velvet-lit) 50%, var(--velvet-edge) 110%); }
.s-protocols .hub h3 { display: flex; align-items: center; height: var(--strip); margin: 0; font-family: var(--th-poster); font-weight: 400; font-size: min(calc(var(--strip) * .8), calc((100vw - var(--gutter) * 2 - 40px) / 6.6)); line-height: 1; letter-spacing: 0; text-transform: uppercase; color: var(--c-fg); white-space: nowrap; }
.s-protocols .hub p { margin: 10px 0 0; max-width: 34em; font-size: 18px; line-height: 1.32; letter-spacing: -.014em; color: var(--c-fg2); text-wrap: pretty; }
.s-protocols .hub > span { display: inline-flex; align-items: center; align-self: flex-start; min-height: 46px; margin: 0; padding: 0 22px; border-radius: 999px; background: var(--c-pill); color: var(--c-pill-fg); font-weight: 600; font-size: 16px; letter-spacing: -.016em; }
@media (min-width: 900px) {
  .s-protocols { --top: 88px; --strip: min(88px, 10.4svh); --card: min(calc(100svh - var(--top) - var(--strip) * 5 - 16px), 300px); padding-block: 96px 72px; }
  .s-protocols .only-w { display: block; }
  .s-protocols .only-p { display: none; }
  .s-protocols .hub { padding: 0 32px 28px; }
  .s-protocols .hub::after { top: 0; width: 42%; height: auto; }
  .s-protocols .hub > div { max-width: 54%; }
  .s-protocols .hub p { font-size: 21px; }
}
@media (hover: hover) and (pointer: fine) {
  .s-protocols .hub:hover::after { transform: scale(1.04); }
}


/* 16-partners */
/* ---------- 16 partners: burgundy redaction bars pull off each name. Out in the open. ---------- */
.pa__l { margin-top: 20px; }
.pa__list { margin-top: 56px; }
.s-partners .pt { display: flex; flex-direction: column; gap: 10px; padding: 26px 0 38px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; }
.s-partners .pt h3 { position: relative; align-self: flex-start; margin: 0; font-family: var(--th-poster); font-weight: 400; font-size: 80px; line-height: .92; letter-spacing: 0; text-transform: uppercase; color: #fff; text-wrap: nowrap; }
.pa__bar { position: absolute; inset: .05em 0 .02em; display: block; transform-origin: 100% 50%; background: linear-gradient(100deg, var(--velvet-base) 0, var(--velvet-crown) 55%, var(--velvet-lit) 100%); }
.s-partners .pt p { max-width: 34em; margin: 0; font-size: 19px; line-height: 1.34; letter-spacing: -.012em; color: var(--on-ink-2); }
.s-partners .pt .code { display: inline-flex; align-self: flex-start; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--line-champagne); border-radius: 999px; font-size: 16px; font-weight: 600; color: var(--champagne); }
.s-partners .pt .btn { align-self: flex-start; margin-top: 8px; }
.s-partners .pt p:has(.token), .s-partners .pt .token { display: none; }
.s-partners .note { margin-top: 12px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.45; color: var(--on-ink-3); }
/* the names run the full column, like credits, with the small print on one line below */
@media (min-width: 900px) {
  .s-partners .pt { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 14px; align-items: center; padding: 34px 0 40px; }
  .s-partners .pt h3 { grid-column: 1 / -1; justify-self: start; margin-bottom: 20px; }
  .s-partners .pt .btn { margin-top: 0; }
  .s-partners .pt p { font-size: 21px; }
  .s-partners .pt .code { font-size: 16px; min-height: 52px; padding: 0 22px; }
}


/* 17-library */
/* ---------- 17 library: two shelves of real 3D books, each turning to face you as it passes ---------- */
.s-library { padding-block: calc(var(--section) * .8) 72px; min-height: 100svh; }
.li__h { color: var(--on-light-accent); }
.li__l { margin-top: 18px; max-width: 26em; }
.li__shelf { margin-top: 44px; }
.li__row { position: relative; padding-top: 28px; overflow-x: auto; scrollbar-width: none; }
.li__row + .li__row { margin-top: 26px; }
.li__row::after { content: ""; display: block; width: 100vw; min-width: 100%; height: 12px; background: linear-gradient(180deg, #7D1730 0, var(--velvet-lit) 34%, var(--velvet-edge) 100%); box-shadow: 0 18px 24px -12px rgba(42, 5, 14, .42); }
html.gs .li__row { overflow-x: clip; overflow-y: visible; }
.s-library .drift { position: relative; --bw: 44vw; gap: 18px; margin-top: 0; padding-inline: var(--gutter); }
.s-library .bk { perspective-origin: 50% 100%; }
.s-library .bk3 { transition: none; will-change: transform; }
.s-library .bk3 s { width: 18px; }
.s-library .bkc { background: linear-gradient(112deg, rgba(255, 255, 255, .16) 0, rgba(255, 255, 255, 0) 30%), radial-gradient(120% 90% at 58% 22%, #7D1730 0, var(--velvet-crown) 42%, var(--velvet-base) 100%); color: #fff; }
.s-library .bkc::before { opacity: .07; }
.s-library .bkc::after { border-color: var(--champagne); opacity: .55; }
.s-library .bkc--ink { background: linear-gradient(112deg, rgba(255, 255, 255, .13) 0, rgba(255, 255, 255, 0) 30%), #0F0B0C; color: #fff; }
.s-library .bkc--tob { background: linear-gradient(112deg, rgba(255, 255, 255, .15) 0, rgba(255, 255, 255, 0) 30%), linear-gradient(150deg, #6E1529 0, var(--velvet-lit) 62%, var(--velvet-edge) 100%); color: #fff; }
.s-library .bkc--bone { background: var(--white); color: var(--on-light-accent); }
.s-library .bkc--bone::after { border-color: var(--on-light-accent); opacity: .4; }
.s-library .bkc__a { font-size: max(12px, 7cqw); letter-spacing: -.005em; }
.s-library .bkc__t { font-family: var(--th-poster); font-weight: 400; text-transform: uppercase; font-size: calc(var(--s, .14) * 158cqw); line-height: .96; }
.li__end { margin-top: 44px; }
@media (min-width: 900px) {
  .s-library { padding-block: 120px 96px; }
  .s-library .drift { --bw: 216px; gap: 40px; }
  .li__row { padding-top: 40px; }
  .li__end { margin-top: 56px; }
}


/* 18-ebook */
/* ---------- 18 e-book: the ivory page turns, velvet and a real 3D book behind it ---------- */
.s-ebook { --bw: min(62vw, 34svh); --bh: calc(var(--bw) * 1.34); --bd: calc(var(--bw) * .095); --ky: 40%; min-height: 100svh; }
.ek__page { display: none; }
html.gs .s-ebook:not([data-failed]) .ek__page { display: block; position: absolute; top: 0; left: 0; right: 0; height: 100svh; z-index: 6; pointer-events: none; background: var(--ivory); transform-origin: 0 50%; }
.ek__gut { position: absolute; top: 0; bottom: 0; left: 0; width: 44px; background: linear-gradient(90deg, rgba(90, 70, 50, .16), rgba(90, 70, 50, 0)); }
.ek__shade { position: absolute; inset: 0; background: #D9CDB9; opacity: 0; }
.ek { display: flex; flex-direction: column; gap: 34px; padding-block: 104px calc(var(--radius-sheet) + 56px); }
.ek__art { position: relative; order: 2; display: grid; place-items: center; padding-block: 10px 26px; touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; }
.ek__scene { perspective: 1100px; }
.ek__book { position: relative; width: var(--bw); height: var(--bh); transform-style: preserve-3d; transform: rotateX(4deg) rotateY(-20deg); }
.ek__face { position: absolute; display: block; }
.ek__front, .ek__back { inset: 0; border-radius: 2px 6px 6px 2px; overflow: hidden; }
.ek__front { display: flex; flex-direction: column; justify-content: space-between; padding: calc(var(--bw) * .085) calc(var(--bw) * .075) calc(var(--bw) * .07) calc(var(--bw) * .185); background: linear-gradient(118deg, rgba(255, 255, 255, 0) 56%, rgba(90, 15, 34, .07) 100%), #FFFFFF; color: var(--on-light-accent); transform: translateZ(calc(var(--bd) / 2)); }
/* quarter binding: a burgundy cloth spine wrapped onto a clean white board */
.ek__hinge { position: absolute; top: 0; bottom: 0; left: 0; width: calc(var(--bw) * .125); background: linear-gradient(90deg, #3A0713 0, var(--velvet-crown) 34%, #7D1730 58%, var(--velvet-lit) 86%, #2E0510 100%); box-shadow: calc(var(--bw) * .012) 0 calc(var(--bw) * .02) rgba(42, 5, 14, .28); }
.ek__hinge::after { content: ""; position: absolute; top: 0; bottom: 0; right: calc(var(--bw) * -.012); width: 1px; background: var(--line-champagne); }
.ek__ft.poster { display: block; font-size: calc(var(--bw) * .3); color: var(--on-light-accent); line-height: .9; }
.ek__ft span { display: block; white-space: nowrap; }
.ek__ft span:nth-child(1) { font-size: calc(var(--bw) * .278); }
.ek__ft span:nth-child(2) { font-size: calc(var(--bw) * .376); }
.ek__ft span:nth-child(3) { font-size: calc(var(--bw) * .416); }
.ek__front .sig { width: 42%; align-self: flex-end; color: var(--on-light-accent); }
.ek__sheen { opacity: 0; position: absolute; inset: -20% -60%; background: linear-gradient(105deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .85) 50%, rgba(255, 255, 255, 0) 60%); }
.ek__back { display: grid; place-items: center; background: linear-gradient(155deg, var(--burgundy-hover), var(--burgundy) 60%, var(--velvet-base)); transform: rotateY(180deg) translateZ(calc(var(--bd) / 2)); }
.ek__back .sig { width: 52%; color: #fff; }
.ek__spine { top: 0; left: calc(50% - var(--bd) / 2); width: var(--bd); height: 100%; display: grid; place-items: center; background: linear-gradient(90deg, #3A0713, #7D1730 50%, #3A0713); transform: rotateY(-90deg) translateZ(calc(var(--bw) / 2)); }
.ek__spine .poster { writing-mode: vertical-rl; font-size: calc(var(--bd) * .66); line-height: 1; color: #fff; white-space: nowrap; }
.ek__pages { background: repeating-linear-gradient(90deg, #F8F4EC 0 2px, #E3DACB 2px 3px); outline: 1px solid transparent; }
.ek__right { top: 1%; left: calc(50% - var(--bd) / 2); width: var(--bd); height: 98%; transform: rotateY(90deg) translateZ(calc(var(--bw) / 2 - 2px)); }
.ek__top, .ek__bottom { left: 0; top: calc(50% - var(--bd) / 2); width: 99%; height: var(--bd); background: repeating-linear-gradient(0deg, #F8F4EC 0 2px, #E3DACB 2px 3px); }
.ek__top { transform: rotateX(90deg) translateZ(calc(var(--bh) / 2 - 2px)); }
.ek__bottom { transform: rotateX(-90deg) translateZ(calc(var(--bh) / 2 - 2px)); }
.ek__floor { position: absolute; left: 50%; bottom: 0; width: calc(var(--bw) * 1.15); height: 26px; margin-left: calc(var(--bw) * -.575); border-radius: 50%; background: radial-gradient(closest-side, rgba(13, 3, 6, .62), rgba(13, 3, 6, 0)); }
.ek__copy { order: 1; min-width: 0; }
.ek__h { color: #fff; }
.s-ebook .ebx { order: 3; margin-top: 28px; }
.s-ebook .ebf { margin-top: 0; }
.s-ebook .ebf input { width: 100%; color: #fff; background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .34); }
.s-ebook .ebf input::placeholder { color: var(--on-velvet-3); opacity: 1; }
.s-ebook .ebf .btn { width: 100%; }
.s-ebook .help { color: var(--on-velvet-2); }
.s-ebook .eb__ok b { font-family: var(--th-poster); font-weight: 400; font-size: 64px; line-height: .95; text-transform: uppercase; color: #fff; }

/* phone reading order: poster, book, form */
@media (max-width: 899px) {
  .ek__copy { display: contents; }
  .ek__h { order: 1; }
  .ek { gap: 26px; }
  .s-ebook .ebx { margin-top: 0; }
}
@media (min-width: 900px) {
  .s-ebook { --bw: min(330px, 45svh); --kx: 34%; }
  .ek { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: center; gap: 56px; min-height: 100svh; padding-block: 96px 72px; }
  .ek__art { order: 0; }
  .ek__copy { order: 0; }
  .s-ebook .ebf { grid-template-columns: 1fr 1fr; }
  .s-ebook .ebf .btn { grid-column: 1 / -1; }
}


/* 19-call */
/* ---------- 19 call: the photo stands up, two rich price tiles, then the word zoom into the footer ---------- */
.s-call .only-w { display: none; }
.s-call { padding-block: calc(var(--section) * .8) 40px; }
.ca__h { color: var(--on-light-accent); }
.ca__g { margin-top: 40px; padding-inline: 0; }
.ca__txt { padding-inline: var(--gutter); }
.ca__ph { perspective: 1300px; }
.ca__img { display: block; width: 100%; height: min(112vw, 76svh); object-fit: cover; object-position: 50% 12%; }
.ca__l { margin-top: 40px; max-width: 22em; text-wrap: pretty; }
.ca__fees { display: grid; gap: 12px; margin-top: 40px; }
.ca__fee { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 24px; border-radius: 24px; }
.ca__n { display: block; padding-bottom: .05em; font-size: 150px; color: #fff; }
.ca__m { margin: 16px 0 22px; font-size: 21px; font-weight: 600; letter-spacing: -.012em; color: var(--fg); }
.s-tz { display: none; }
html.gs-off .s-tz:not([data-failed]) { display: block; }
.s-tz .stage { background: var(--white); }
main:has(.s-tz) ~ .s-footer::before { display: none; }
/* one pool of light centred on the join: the bottom edge of this wall and the top edge of the footer are the same colour, and there is no dark trough between them */
main:has(.s-tz) ~ .s-footer { --ky: 0%; padding-top: clamp(72px, 12svh, 110px); }
.tz__v { position: absolute; inset: 0; background-color: var(--velvet-base); background-image: radial-gradient(96% 64% at 50% 100%, var(--velvet-crown) 0, var(--velvet-lit) 38%, var(--velvet-base) 76%, var(--velvet-edge) 130%); }
.tz__g { position: absolute; inset: 0; background-image: var(--grain); background-size: 360px 360px; opacity: .16; }
.tz__c { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
@media (min-width: 900px) {
  .s-call { padding-block: 120px 56px; }
  .s-call .only-w { display: block; }
  .s-call .only-p { display: none; }
  .ca__g { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 40px; margin-top: 56px; padding-inline: var(--gutter); }
  .ca__txt { padding-inline: 0; }
  .ca__ph { position: relative; min-height: 620px; }
  .ca__img { position: absolute; inset: 0; height: 100%; object-position: 48% 10%; }
  .ca__l { margin-top: 0; }
  .ca__fees { gap: 14px; margin-top: 32px; }
  .ca__fee { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 26px 30px 26px; }
  .ca__n { grid-column: 1 / -1; }
  .ca__m { margin: 12px 0 0; }
}


/* ---------- live ---------- */
/* Live build: the generated pages. Everything is lv-*. Tokens and themes come from base.css. */

/* head band */
.lv-h h1 { color: var(--hot); }
.lv-h .ih__l { font-size: clamp(21px, 5.6vw, 34px); line-height: 1.16; max-width: 24em; }
.lv-h[data-theme=white] .ih__l, .lv-h[data-theme=ivory] .ih__l { color: var(--on-light-1); }

/* bands */
.lv-b { padding-block: clamp(80px, 12vw, 136px); }
.lv-b[data-enter=sheet] { padding-top: clamp(96px, 13vw, 148px); }
.lv-b--st { padding-block: clamp(72px, 10vw, 120px); }
.lv-h2 { color: var(--hot); }
.lv-longh { color: var(--fg); max-width: 22em; text-wrap: balance; }
.lv-x { margin-top: clamp(32px, 5vw, 60px); }
.lv-t { max-width: var(--w-measure); }
.lv-t > * + * { margin-top: 20px; }
.lv-x > * + *, .lv-b--i .wrap > * + *, .lv-split__b > * + * { margin-top: clamp(32px, 5vw, 56px); }
.lv-p { font-size: clamp(19px, 4.9vw, 21px); line-height: 1.52; letter-spacing: -.012em; color: var(--fg2); text-wrap: pretty; }
html.no-sf .lv-p { letter-spacing: 0; }
.lv-p strong, .lv-ul strong, .lv-ol strong { color: var(--fg); font-weight: 600; }
.lv-p a, .lv-ul a, .lv-ol a, .lv-q a, .lv-note a, .lv-facts p a, .lv-card p a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--hot); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.lv-t .i-say { max-width: 24em; }
.lv-t .i-say + .lv-p { margin-top: 24px; }
.lv-h3 { font-weight: 600; font-size: clamp(27px, 7vw, 40px); line-height: 1.08; letter-spacing: -.022em; color: var(--fg); text-wrap: balance; }
html.no-sf .lv-h3 { letter-spacing: -.012em; }
.lv-t > .lv-h3 { margin-top: 56px; }
.lv-t > .lv-h3:first-child { margin-top: 0; }
.lv-t > .lv-h3 + * { margin-top: 14px; }
.lv-h4 { font-weight: 600; font-size: clamp(20px, 5.2vw, 24px); line-height: 1.16; letter-spacing: -.016em; color: var(--fg); margin-top: 36px; }
.lv-note { font-size: 14px; line-height: 1.5; letter-spacing: -.01em; color: var(--fg2); }
.lv-acts { margin-top: 32px !important; align-items: center; }
.lv-num { font-size: clamp(44px, 12vw, 64px); color: var(--hot); }

/* lists */
.lv-ul { padding: 0; list-style: none; font-size: clamp(19px, 4.9vw, 21px); line-height: 1.42; letter-spacing: -.012em; color: var(--fg2); }
.lv-ul > li { position: relative; padding: 14px 0 15px 26px; border-top: 1px solid var(--line); }
.lv-ul > li::before { content: ""; position: absolute; left: 2px; top: 25px; width: 9px; height: 9px; background: var(--hot); }
.lv-ul ul, .lv-ul ol { margin-top: 8px; padding-left: 18px; list-style: disc; font-size: .92em; }
.lv-ol { padding: 0; list-style: none; counter-reset: lv; font-size: clamp(19px, 4.9vw, 21px); line-height: 1.42; letter-spacing: -.012em; color: var(--fg2); }
.lv-ol > li { counter-increment: lv; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 8px; align-items: baseline; padding-block: 16px 18px; border-top: 1px solid var(--line); }
.lv-ol > li::before { content: counter(lv); font-family: var(--th-poster); font-size: 52px; line-height: .9; color: var(--hot); }
.lv-tags { display: grid; grid-template-columns: minmax(0, 1fr); padding: 0; list-style: none; }
.lv-tags li { padding-block: 10px 11px; border-top: 1px solid var(--line); font-family: var(--th-poster); text-transform: uppercase; font-size: clamp(38px, 10.4vw, 52px); line-height: 1; color: var(--fg); }
.lv-tags strong { font-weight: 400; }

/* term and sentence */
.lv-facts { display: grid; gap: 0 clamp(32px, 5vw, 64px); }
.lv-facts > div { padding-block: 22px 28px; border-top: 1px solid var(--line); }
.lv-facts h3 { font-size: clamp(42px, 11.4vw, 62px); line-height: .96; color: var(--hot); }
.lv-facts p { margin-top: 10px; font-size: clamp(18px, 4.7vw, 20px); line-height: 1.42; letter-spacing: -.012em; color: var(--fg2); text-wrap: pretty; }

/* quotes */
.lv-q { margin: 0; padding-left: 20px; border-left: 3px solid var(--hot); }
.lv-q p { font-weight: 600; font-size: clamp(22px, 5.8vw, 30px); line-height: 1.2; letter-spacing: -.018em; color: var(--fg); text-wrap: pretty; }
.lv-q cite { display: block; margin-top: 10px; font-style: normal; font-size: 15px; color: var(--fg2); }

/* cards */
.lv-grid { display: grid; gap: 12px; }
.lv-card { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: clip; border-radius: var(--radius-lg); background: var(--surface); color: var(--fg); text-decoration: none; }
:not(body)[data-theme=ivory] .lv-card, :not(body)[data-theme=white] .lv-card { background: var(--surface); }
:not(body)[data-theme=white] .lv-card { background: var(--ivory); }
:not(body)[data-theme=ivory] .lv-card { background: var(--white); }
.lv-card__f { margin: 0; aspect-ratio: 16 / 10; overflow: clip; background: var(--surface-2); }
.lv-card__f img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--spring); }
.lv-card__b { display: flex; flex-direction: column; flex: 1; gap: 10px; padding: 24px; }
.lv-card h3 { font-weight: 600; font-size: clamp(21px, 5.4vw, 25px); line-height: 1.14; letter-spacing: -.018em; color: var(--fg); text-wrap: balance; }
.lv-card p { font-size: 17px; line-height: 1.4; letter-spacing: -.014em; color: var(--fg2); text-wrap: pretty; }
.lv-card ul, .lv-card ol { padding-left: 18px; list-style: disc; font-size: 16px; line-height: 1.4; color: var(--fg2); }
.lv-card__n { font-size: 40px; line-height: 1; color: var(--hot); }
.lv-card .actions { margin-top: auto; padding-top: 12px; }
.lv-go { display: inline-flex; align-items: center; gap: 9px; margin-top: auto; padding-top: 10px; font-weight: 600; font-size: 16px; letter-spacing: -.014em; color: var(--hot); }
.lv-go i { display: inline-grid; place-items: center; width: 12px; height: 12px; transition: transform .35s var(--spring); }
.lv-go svg { width: 12px; height: 12px; }
@media (hover: hover) and (pointer: fine) {
  a.lv-card:hover .lv-card__f img { transform: scale(1.05); }
  a.lv-card:hover .lv-go i { transform: translate(3px, -3px); }
}

/* numbers */
.lv-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
.lv-stats b { display: block; font-size: clamp(72px, 21vw, 150px); line-height: .9; color: var(--hot); }
.lv-stats span { display: block; margin-top: 6px; font-size: 16px; line-height: 1.3; letter-spacing: -.012em; color: var(--fg2); }

/* media */
.lv-fig { margin: 0; }
.lv-fig img { display: block; width: 100%; height: auto; }
.lv-fig figcaption { margin-top: 10px; font-size: 14px; line-height: 1.4; color: var(--fg2); }
.lv-fig--c img { aspect-ratio: 4 / 5; object-fit: cover; }
.lv-gal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lv-vids { display: grid; gap: 16px; }
.lv-vids .yt, .lv-em { border-radius: 0; box-shadow: none; }
.lv-vids .yt b { background: #fff; color: var(--velvet-base); }
.lv-em { aspect-ratio: 16 / 9; background: var(--surface); }
.lv-em iframe, .lv-em video { display: block; width: 100%; height: 100%; border: 0; background: #000; }
.lv-ph { position: relative; z-index: 1; margin: 0; height: 74vw; overflow: clip; }
.lv-ph img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--op, 50% 30%); }
.lv-rv { position: relative; aspect-ratio: 16 / 9; margin: 0 0 1.05em; background: #000; }
.lv-rv iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.rx-b video { width: 100%; height: auto; margin-bottom: 1.05em; }

/* tables */
.lv-tb { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
.lv-tb table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 16px; line-height: 1.38; letter-spacing: -.012em; }
.lv-tb th, .lv-tb td { padding: 13px 18px 13px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; color: var(--fg2); }
.lv-tb th { font-weight: 600; color: var(--fg); border-bottom-color: var(--hot); }
.lv-tb td strong { color: var(--fg); font-weight: 600; }
.lv-tb a { color: var(--fg); text-underline-offset: 3px; }

/* article index */
.lv-idx { display: grid; }
.lv-idx > a, .lv-idx > span { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding-block: 15px 16px; border-top: 1px solid var(--line); color: var(--fg); text-decoration: none; }
.lv-idx > [hidden] { display: none; }
.lv-idx b { font-weight: 600; font-size: clamp(18px, 4.7vw, 20px); line-height: 1.26; letter-spacing: -.014em; text-wrap: pretty; }
.lv-idx small { flex: none; font-size: 14px; color: var(--fg2); font-variant-numeric: tabular-nums; }
.lv-count { font-size: 15px; color: var(--fg2); }
@media (hover: hover) and (pointer: fine) { .lv-idx > a:hover b { color: var(--hot); } }

/* FAQ */
.lv-faq { margin-top: 0; }
.lv-faq details > div { max-width: 640px; padding-bottom: 24px; font-size: 19px; line-height: 1.46; letter-spacing: -.012em; color: var(--fg2); }
.lv-faq details > div p + p, .lv-faq details > div ul { margin-top: 12px; }
.lv-faq details > div ul { padding-left: 20px; list-style: disc; }
.lv-faq a { color: var(--fg); text-underline-offset: 3px; }

/* code pill */
.lv-code { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.lv-code b { font-size: clamp(60px, 16vw, 96px); line-height: 1; color: var(--hot); }

/* forms on bands */
.lv-fbox { padding-top: 8px; }
.lv-form input:not([type=hidden]) { background: var(--surface); border-color: var(--line); color: var(--fg); }
.lv-form input::placeholder { color: var(--fg2); }
.lv-form { margin-top: 0; }
.lv-form .help { grid-column: 1 / -1; }

/* calculator */
.lv-calc-b { min-height: 60svh; }
.lv-calc { display: grid; gap: 24px; max-width: 560px; }
.lv-calc__f label { display: block; margin-bottom: 8px; font-weight: 600; font-size: 15px; letter-spacing: -.012em; }
.lv-calc input, .lv-calc select { width: 100%; min-height: 60px; padding: 0 18px; border: 1px solid transparent; border-radius: 12px; background: var(--apple-grey); color: var(--on-light-1); font: inherit; font-size: 18px; }
.lv-calc input:focus, .lv-calc select:focus { border-color: var(--on-light-accent); outline: 0; }
.lv-calc .btn { justify-self: start; }
.lv-calc__r { padding-top: 22px; border-top: 1px solid var(--line); font-weight: 600; font-size: clamp(25px, 6.6vw, 40px); line-height: 1.12; letter-spacing: -.022em; color: var(--on-light-accent); text-wrap: balance; }

/* legal: plain and readable */
.lv-legal-h { padding-block: 120px calc(var(--radius-sheet) + 56px); }
.lv-legal-h h1 { color: #fff; }
.lv-legal { padding-block: 72px var(--section); }
.lv-legal__t { max-width: 720px; font-size: 18px; line-height: 1.6; letter-spacing: -.012em; color: var(--on-light-1); }
.lv-legal__t > * + * { margin-top: 16px; }
.lv-legal__t h2 { margin-top: 44px; font-weight: 600; font-size: clamp(26px, 6.2vw, 34px); line-height: 1.14; letter-spacing: -.018em; }
.lv-legal__t h3 { margin-top: 32px; font-weight: 600; font-size: 22px; line-height: 1.2; letter-spacing: -.014em; }
.lv-legal__t h4 { margin-top: 24px; font-weight: 600; font-size: 19px; }
.lv-legal__t ul, .lv-legal__t ol { padding-left: 22px; list-style: disc; }
.lv-legal__t ol { list-style: decimal; }
.lv-legal__t li + li { margin-top: 8px; }
.lv-legal__t a { color: var(--on-light-accent); text-underline-offset: 3px; overflow-wrap: anywhere; }

/* archives */
.lv-arch { padding-block: 128px calc(var(--radius-sheet) + 64px); }
.lv-arch h1 { color: #fff; }
.lv-arch__d { margin-top: 14px; max-width: 34em; font-size: 19px; line-height: 1.4; color: var(--fg2); }
.lv-archb { padding-top: 64px; }
.lv-pg { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin-top: 64px; }
.lv-pg a, .lv-pg b, .lv-pg span { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: 999px; font-size: 16px; font-weight: 600; letter-spacing: -.012em; color: var(--on-light-1); text-decoration: none; }
.lv-pg b { background: var(--burgundy); color: #fff; }
.lv-pg span { color: var(--on-light-2); font-weight: 400; }
.lv-pg__s { color: var(--on-light-accent) !important; }
@media (hover: hover) and (pointer: fine) { .lv-pg a:hover { background: var(--apple-grey); } }
.lv-lmore { justify-content: center; margin-top: 56px; }

@media (min-width: 700px) {
  .lv-grid--2, .lv-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lv-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lv-tags { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  .lv-vids--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lv-gal--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .lv-grid { gap: 16px; }
  .lv-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lv-card__b { padding: 30px; }
  .lv-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lv-ph { height: min(82svh, 56vw); }
  .lv-ph img { object-position: var(--op-w, var(--op, 50% 30%)); }
  .lv-split { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
  .lv-b--sr .lv-split { grid-template-columns: 7fr 5fr; }
  .lv-b--sr .lv-split__h { order: 2; }
  .lv-b--sr .lv-split__b { order: 1; }
  .lv-split__h { position: sticky; top: 104px; }
  .lv-b--of .lv-x { margin-left: calc(100% * 5 / 12 + 8px); }
  .lv-b--of .lv-t { max-width: none; }
  .lv-tb { margin-inline: 0; padding-inline: 0; }
  .lv-tb table { font-size: 17px; }
  .lv-arch { padding-top: 156px; }
}

/* Literata and iframes inside the reader stay inside the column */
.rx-b iframe { max-width: 100%; }
.lv-anc { display: block; position: relative; top: -96px; visibility: hidden; height: 0; margin: 0 !important; }
.lv-card--ph { background: transparent !important; border-radius: 0; }
.lv-card--ph .lv-card__f { aspect-ratio: 4 / 5; }
.lv-grid--ph { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 900px) { .lv-grid--ph { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lv-fig img { width: auto; max-width: 100%; max-height: 78svh; }
.lv-fig--c img { width: 100%; max-height: none; }

/* ---------- reader and library ---------- */
/* Live build: the Kindle reader and the library. Appended to site.css after live.css. */

/* ---------- reader: type ---------- */
.rd {
  --r-base: clamp(1.3125rem, 1.17rem + .476vw, 1.4375rem);
  --r-step: 1;
  --r-size: calc(var(--r-base) * var(--r-step));
  --r-lead: 1.7;
  --r-gut: 24px;
  --r-col: min(100vw - var(--r-gut) * 2, var(--r-size) * 29, 46rem);
  --r-acc: var(--on-light-accent);
}
.rd[data-theme="night"] { --r-acc: var(--r-ink); }
.ra { max-width: calc(min(var(--r-size) * 29, 46rem) + var(--r-gut) * 2); padding-inline: var(--r-gut); font-weight: 400; font-variant-numeric: lining-nums; overflow-wrap: break-word; }
.rd[data-face="serif"] .ra { letter-spacing: 0; }

.ra h1, .rd[data-face="serif"] .ra h1 { --h: clamp(60px, 15.8vw, 92px); font-size: min(var(--h), calc(var(--r-col) / (var(--w, 8) * .43))); color: var(--r-acc); overflow-wrap: normal; }
.ra h1[data-l="m"], .rd[data-face="serif"] .ra h1[data-l="m"] { --h: clamp(52px, 13.4vw, 80px); }
.ra h1[data-l="l"], .rd[data-face="serif"] .ra h1[data-l="l"] { --h: clamp(44px, 11.4vw, 68px); }
.ra__m { margin-top: 20px; font-size: 1rem; line-height: 1.4; }

.sum { font-family: var(--r-font); font-size: .9em; line-height: 1.55; letter-spacing: 0; border-top-color: var(--r-acc); }
.rd[data-face="sans"] .sum { letter-spacing: -.012em; }
.sum h2 { font-family: var(--th-poster); }
.sum p { margin-top: 12px; }
.sum li { padding-block: .6em; }

.rx-b p, .rx-b ul, .rx-b ol, .rx-b blockquote, .rx-b .tb { margin-bottom: 1em; text-wrap: pretty; }
.rx-b h2 { margin: 1.8em 0 .55em; font-size: 1.36em; font-weight: 600; line-height: 1.24; letter-spacing: -.008em; text-wrap: balance; }
.rx-b h3 { margin: 1.45em 0 .4em; font-size: 1.12em; font-weight: 600; line-height: 1.32; }
.rx-b li { margin-bottom: .45em; }
.rx-b li > p { margin-bottom: .45em; }
.rx-b strong, .rx-b b { font-weight: 600; }
.rx-b a { text-decoration-color: var(--r-acc); text-decoration-thickness: 1px; text-underline-offset: .18em; }
.rx-b blockquote { border-left-color: var(--r-acc); }
.rb__p i { background: var(--r-acc); }
.rd[data-theme="night"] .rb__p i { background: var(--r-ink); }

/* images: real size when small, never a broken box */
.rx-b img { display: block; width: 100%; max-width: 100%; height: auto; margin: .25em auto .85em; }
.rx-b img.is-small { width: auto; }
.rx-b img.is-gone { display: none; }
.rd[data-theme="night"] .rx-b img { filter: brightness(.82); }

/* tables: scroll sideways inside the page, with a soft edge that says there is more */
.tb, .rd .rx-b .tb { margin-inline: calc(var(--r-gut) * -1); padding-inline: var(--r-gut); background: linear-gradient(90deg, var(--r-bg) 40%, transparent) 0 0 / 44px 100% no-repeat local, linear-gradient(270deg, var(--r-bg) 40%, transparent) 100% 0 / 44px 100% no-repeat local, radial-gradient(farthest-side at 0 50%, var(--r-line), transparent) 0 0 / 14px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, var(--r-line), transparent) 100% 0 / 14px 100% no-repeat scroll; }
.tb table { min-width: max(100%, 30em); font-size: .78em; line-height: 1.45; letter-spacing: 0; font-variant-numeric: lining-nums tabular-nums; }
.tb th, .tb td { padding: .7em 1em .7em 0; }
.tb th:last-child, .tb td:last-child { padding-right: 0; }
.tb thead th, .tb tbody:first-child tr:first-child > * { border-bottom: 1.5px solid var(--r-ink); }
.tb strong { font-weight: 600; }

/* the end of the article */
.fold { font-family: var(--r-font); font-size: .9em; line-height: 1.55; }
.fold summary { font-family: var(--sans); font-size: 1.0625rem; }
.fold h3 { font-family: var(--r-font); font-size: 1.04em; font-weight: 600; }
.ra__f { font-size: 1rem; line-height: 1.5; }
.nxt b { --h: clamp(48px, 12vw, 76px); font-size: min(var(--h), calc((var(--r-col) - 48px) / (var(--w, 8) * .43))); overflow-wrap: normal; }
.nxt b[data-l="l"] { --h: clamp(34px, 8.8vw, 54px); }

/* controls */
html:has(> body.rd) { scroll-padding-top: 76px; }
.rd .rx-b h2 { scroll-margin-top: 0; }
#toc-l a { padding-block: 12px; line-height: 1.35; }
.ib[hidden] { display: none; }
.seg button[aria-disabled="true"] { opacity: .32; cursor: default; }
.sh { -webkit-overflow-scrolling: touch; }

@media (min-width: 900px) {
  .rd { --r-gut: 32px; }
  .ra { padding-top: 132px; }
}

/* ---------- library: search stays, chips scroll away ---------- */
.i-lib .tools { display: contents; }
.i-lib .srch { position: sticky; top: 76px; z-index: 40; background: var(--apple-grey); box-shadow: 0 0 0 8px var(--white); }
.i-lib .chips { margin: 16px calc(var(--gutter) * -1) 0; padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); -webkit-overflow-scrolling: touch; }
.i-lib .lib__c { margin-block: 24px 28px; }
.lv-lmore[hidden] { display: none; }
.bks .bk__n { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; }
.bk__m:empty { display: none; }

@media (min-width: 900px) {
  .i-lib .chips { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
}

/* a long shelf on a phone: flat covers, no noise layer, offscreen books skipped */
@media (max-width: 899px), (hover: none) {
  .i-lib .bks .bk, .lv-archb .bks .bk { perspective: none; content-visibility: auto; contain-intrinsic-size: auto 340px; }
  .i-lib .bks .bk3, .lv-archb .bks .bk3 { transform: none; transform-style: flat; transition: none; }
  .i-lib .bks .bk:active .bk3, .lv-archb .bks .bk:active .bk3 { transform: scale(.98); }
  .i-lib .bks .bk3 s, .lv-archb .bks .bk3 s, .i-lib .bks .bkc::before, .lv-archb .bks .bkc::before { display: none; }
  .i-lib .bks .bkc, .lv-archb .bks .bkc { box-shadow: inset 7px 0 8px -5px var(--shadow), inset -1px 0 0 var(--inner); }
}

/* override contact-me.css */
/* ---------- /contact-me/: hero, the gate, three lanes, the form, follow. Phone first. Everything is ct-*. ---------- */

/* hero: poster on lit velvet, his live cut-out under it, the two ways to reach him at the bottom */
.ct-hero { --kx: 64%; --ky: 52%; display: flex; flex-direction: column; min-height: calc(100svh + var(--radius-sheet)); padding-top: 92px; }
.ct-hero__t { position: relative; z-index: 2; padding-inline: var(--gutter); }
.ct-hero__h { color: #fff; font-size: clamp(86px, 22.6vw, 220px); }
.ct-hero__h .ln { overflow: clip; padding-top: .045em; margin-top: -.045em; }
.ct-hero__h .ct-r { display: block; }
.ct-hero__h .ln:last-child .ct-r { color: var(--on-velvet-3); }
.ct-hero__f { position: relative; z-index: 1; flex: 1 1 280px; min-height: 280px; margin: -6px 0 0; }
.ct-hero__m { position: absolute; inset: 0; }
.ct-hero__f img { position: absolute; left: 50%; top: 0; width: 124vw; max-width: none; height: auto; margin-left: -60vw; filter: drop-shadow(0 30px 60px rgba(13, 3, 6, .55)); }
.ct-hero__d { position: relative; z-index: 3; display: grid; gap: 10px; padding: 0 var(--gutter) calc(var(--radius-sheet) + 18px); }
.ct-go { width: 100%; min-height: 58px; font-size: 18px; box-shadow: 0 18px 40px -12px rgba(13, 3, 6, .7); }
.ct-mail { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 22px; border-radius: 999px; background: var(--velvet-edge); color: #fff; font-weight: 600; font-size: 17px; letter-spacing: -.012em; text-decoration: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.ct-mail:active { transform: scale(.97); }

/* the gate: his line lights up word by word, then a burgundy disc blooms and the invitation turns in */
.ct-gate .stage { display: flex; flex-direction: column; justify-content: center; }
.ct-gate__a { position: relative; z-index: 1; padding-block: 104px 56px; }
.ct-gate__l { max-width: 30em; font-weight: 600; font-size: clamp(19px, 5vw, 26px); line-height: 1.24; letter-spacing: -.016em; color: var(--on-light-1); text-wrap: pretty; }
.ct-gate__p { margin-top: 26px; font-size: min(16.4vw, 10.2svh); line-height: .9; color: var(--on-light-1); text-wrap: pretty; }
.ct-gate__p .is-hit { color: var(--on-light-accent); }
.ct-disc { display: none; }
.ct-gate__b { padding-block: 88px 104px; }
.ct-gate__bw { display: flex; flex-direction: column; }
.ct-gate__s { font-weight: 600; font-size: clamp(22px, 6vw, 36px); line-height: 1.14; letter-spacing: -.02em; color: var(--on-velvet-2); text-wrap: balance; }
.ct-gate__w { margin-top: 10px; font-size: clamp(76px, 21vw, 190px); color: #fff; perspective: 900px; }
.ct-gate__w .ln { white-space: nowrap; }
.ct-gate__w .ct-fl { display: inline-block; transform-origin: 50% 100%; backface-visibility: hidden; }
.ct-gate__e { margin-top: 18px; max-width: 18em; font-weight: 600; font-size: clamp(26px, 7.2vw, 46px); line-height: 1.08; letter-spacing: -.024em; color: #fff; text-wrap: balance; }
html.gs .ct-gate .ct-disc { display: block; position: absolute; left: 50%; bottom: -112vmax; z-index: 2; width: 224vmax; height: 224vmax; margin-left: -112vmax; border-radius: 50%; background: var(--velvet-base); transform: scale(0); pointer-events: none; }
html.gs .ct-gate .ct-gate__b { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; padding-block: 88px 56px; }
html.gs .ct-gate .ct-gate__bw { width: 100%; }

/* three lanes: who to contact for what. On a phone the tiles stack like cards. */
.ct-lanes { padding-block: calc(var(--radius-sheet) + 72px) var(--section); }
.ct-lanes__h { color: var(--on-light-accent); }
.ct-tiles { display: grid; gap: 16px; margin-top: 40px; }
.ct-tiles > .ct-tile { position: sticky; top: 84px; display: flex; flex-direction: column; overflow: clip; border-radius: 26px; background: var(--bg); color: var(--fg); box-shadow: 0 -14px 40px -18px rgba(13, 3, 6, .45); transform-origin: 50% 0; }
.ct-tile[data-theme=white] { box-shadow: 0 -14px 40px -18px rgba(13, 3, 6, .3), inset 0 0 0 1px var(--line-on-light); }
.ct-tile__f { margin: 0; aspect-ratio: 16 / 10; overflow: clip; background: var(--ink); }
.ct-tile__f img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--op, 50% 30%); transition: transform .9s var(--spring); }
.ct-tile__b { display: flex; flex-direction: column; flex: 1; padding: 22px 22px 24px; }
.ct-tile__h { color: var(--hot); }
.ct-tile[data-theme=white] .ct-tile__h { color: var(--on-light-accent); }
.ct-tile__p { margin-top: 12px; font-weight: 600; font-size: clamp(20px, 5.4vw, 24px); line-height: 1.18; letter-spacing: -.018em; color: var(--fg); text-wrap: pretty; }
.ct-tile__m { margin-top: 8px; font-size: 17px; }
.ct-tile__m a { color: var(--fg2); text-underline-offset: 3px; }
.ct-tile__a { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: auto; padding-top: 22px; }
.ct-tile__a .btn--ghost { padding-inline: 14px; }
:not(body)[data-theme=ink].ct-tile .btn--ghost, :not(body)[data-theme=velvet].ct-tile .btn--ghost { border-color: transparent; text-decoration: underline; text-underline-offset: 4px; }

/* the form: velvet room, white card, his phrase as the headline */
.ct-form { padding-top: calc(var(--radius-sheet) + 76px); --ky: 26%; --kx: 30%; }
.ct-form__g { display: grid; gap: 36px; }
.ct-form__h { color: #fff; font-size: clamp(92px, 25vw, 200px); }
.ct-form__s { margin-top: 16px; max-width: 20em; font-weight: 600; font-size: clamp(22px, 6vw, 30px); line-height: 1.16; letter-spacing: -.02em; color: var(--on-velvet-1); text-wrap: balance; }
.ct-form__m { margin-top: 14px; font-size: 17px; color: var(--on-velvet-2); }
.ct-form__m a { color: #fff; font-weight: 600; text-underline-offset: 3px; }
.ct-form__sig { width: 148px; margin-top: 26px; color: #fff; }
.ct-box { perspective: 1600px; }
.ct-flip { position: relative; display: grid; transform-style: preserve-3d; transition: transform 1.1s var(--spring); }
.ct-card, .ct-sent { grid-area: 1 / 1; border-radius: 28px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ct-card { padding: 22px 18px 18px; background: #fff; box-shadow: 0 40px 80px -30px rgba(13, 3, 6, .75), 0 2px 0 rgba(255, 255, 255, .7) inset; }
.ct-sent { display: flex; flex-direction: column; justify-content: center; padding: 32px 28px; transform: rotateY(180deg); visibility: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.ct-box.is-sent .ct-flip { transform: rotateY(180deg); }
.ct-box.is-sent .ct-sent { visibility: visible; }
.ct-sent__h { font-size: clamp(120px, 34vw, 220px); color: #fff; }
.ct-sent__p { margin-top: 12px; font-weight: 600; font-size: clamp(22px, 6vw, 30px); line-height: 1.16; letter-spacing: -.02em; color: #fff; }
.ct-sent .sig { width: 140px; margin-top: 28px; color: #fff; }

.ct-f { display: grid; gap: 12px; }
.ct-chips { margin: 0 0 6px; padding: 0; border: 0; min-width: 0; }
.ct-chips__g { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ct-chips legend { margin-bottom: 10px; padding: 0; font-weight: 600; font-size: 15px; letter-spacing: -.012em; color: var(--on-light-2); }
.ct-chip { position: relative; display: block; cursor: pointer; }
.ct-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ct-chip span { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 12px; border-radius: 999px; background: var(--apple-grey); color: var(--on-light-1); font-weight: 600; font-size: 16px; letter-spacing: -.014em; text-align: center; transition: background-color .3s var(--out), color .3s var(--out), transform .4s var(--spring); }
.ct-chip input:checked + span { background: var(--burgundy); color: #fff; }
.ct-chip input:active + span { transform: scale(.95); }
.ct-chip input:focus-visible + span { outline: 2px solid var(--burgundy); outline-offset: 2px; }
.ct-fl { position: relative; }
.ct-fl input, .ct-fl textarea { display: block; width: 100%; min-height: 64px; padding: 27px 18px 9px; border: 0; border-radius: 16px; background: var(--apple-grey); color: var(--on-light-1); font: inherit; font-size: 18px; line-height: 1.35; letter-spacing: -.014em; transition: background-color .3s var(--out), box-shadow .3s var(--out); }
.ct-fl textarea { min-height: 156px; resize: vertical; }
.ct-fl label { position: absolute; left: 18px; top: 20px; font-size: 18px; line-height: 1.35; letter-spacing: -.014em; color: var(--on-light-2); transform-origin: 0 0; pointer-events: none; transition: transform .35s var(--spring), color .3s var(--out); }
.ct-fl i { position: absolute; left: 16px; right: 16px; bottom: 0; height: 2px; border-radius: 2px; background: var(--burgundy); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--spring); }
.ct-fl input:focus, .ct-fl textarea:focus { outline: 0; background: #EFEDF0; }
.ct-fl :focus ~ i { transform: scaleX(1); }
.ct-fl :focus ~ label, .ct-fl :not(:placeholder-shown) ~ label { transform: translateY(-12px) scale(.72); }
.ct-fl :focus ~ label { color: var(--burgundy); }
.ct-fl [aria-invalid] { background: #FBEFF1; box-shadow: inset 0 0 0 1.5px var(--burgundy); }
.ct-send { width: 100%; min-height: 62px; margin-top: 6px; font-size: 18px; }
.ct-f .help { min-height: 24px; margin: 2px 0 0; font-size: 16px; line-height: 1.4; color: var(--on-light-accent); text-wrap: pretty; }
.ct-f .help a { color: var(--on-light-accent); font-weight: 600; text-underline-offset: 3px; }
.ct-f.is-failed .help { padding: 14px 16px; border-radius: 14px; background: #FBEFF1; font-size: 17px; }
.ct-f.is-shake { animation: ct-shake .42s var(--out); }
@keyframes ct-shake { 20% { transform: translateX(-7px); } 45% { transform: translateX(6px); } 70% { transform: translateX(-3px); } 100% { transform: none; } }

/* the address, running */
.ct-mq { display: block; margin-top: clamp(64px, 10vw, 112px); padding-block: 4px calc(var(--radius-sheet) + 22px); overflow: clip; color: #fff; text-decoration: none; }
.ct-mq__t { display: flex; width: max-content; animation: ct-mq 36s linear infinite; }
.ct-mq__t span { padding-right: .32em; font-family: var(--th-poster); font-size: clamp(104px, 27vw, 250px); line-height: .9; text-transform: uppercase; white-space: nowrap; }
.ct-mq__t span:nth-child(even) { color: var(--on-velvet-3); }
@keyframes ct-mq { to { transform: translate3d(-50%, 0, 0); } }
html[data-motion=still] .ct-mq__t { animation: none; }

/* follow */
.ct-follow { padding-block: calc(var(--radius-sheet) + 72px) var(--section); }
.ct-follow__h { color: var(--on-light-accent); }
.ct-soc { margin: 32px 0 0; padding: 0; list-style: none; }
.ct-soc a { position: relative; display: flex; align-items: baseline; gap: 12px; padding: 12px 0 6px; border-top: 1px solid var(--line-on-light); color: var(--on-light-1); text-decoration: none; isolation: isolate; }
.ct-soc a::before { content: ""; position: absolute; inset: 0 calc(var(--gutter) * -1); z-index: -1; background: var(--burgundy); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .5s var(--spring); }
.ct-soc b { font-family: var(--th-poster); font-weight: 400; font-size: clamp(60px, 16vw, 104px); line-height: .96; text-transform: uppercase; }
.ct-soc span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; letter-spacing: -.012em; color: var(--on-light-2); text-align: right; }
.ct-soc i { flex: none; display: grid; place-items: center; width: 14px; height: 14px; color: var(--on-light-accent); transition: transform .4s var(--spring); }
.ct-soc svg { width: 14px; height: 14px; }
.ct-soc a:active::before { transform: scaleY(1); }
.ct-soc a:active, .ct-soc a:active span, .ct-soc a:active i { color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .ct-soc a:hover::before { transform: scaleY(1); }
  .ct-soc a:hover, .ct-soc a:hover span, .ct-soc a:hover i { color: #fff; }
  .ct-soc a:hover i { transform: translate(3px, -3px); }
  .ct-tile:hover .ct-tile__f img { transform: scale(1.05); }
  .ct-mail:hover { background: var(--cherry); }
}
.ct-last { margin-top: clamp(72px, 12vw, 136px); padding-top: 28px; border-top: 1px solid var(--line-on-light); }
.ct-last__h { color: var(--on-light-1); }
.ct-last .actions { margin-top: 28px; }

/* desktop */
@media (min-width: 900px) {
  .ct-hero { --kx: 70%; --ky: 46%; display: grid; grid-template-columns: max(var(--gutter), calc((100% - var(--w-wrap)) / 2)) minmax(0, 540px) 1fr; grid-template-rows: 1fr auto auto 1fr; padding-top: 88px; padding-bottom: var(--radius-sheet); }
  .ct-hero__t { grid-column: 2; grid-row: 2; padding: 0; }
  .ct-hero__h { font-size: clamp(110px, 13vw, 190px); }
  .ct-hero__f { position: absolute; top: 0; right: 0; bottom: 0; width: 54%; min-height: 0; margin: 0; }
  /* arms-crossed cut-out: a little smaller and pushed right so his elbow clears the two buttons and his head clears the nav */
  .ct-hero__f img { left: auto; right: -7%; top: auto; bottom: calc(var(--radius-sheet) - 6%); width: auto; height: min(88%, calc((100vw - 620px) * 1.25)); margin: 0; }
  .ct-hero__d { grid-column: 2; grid-row: 3; grid-template-columns: auto auto; justify-content: start; gap: 12px; padding: 36px 0 0; }
  .ct-go { width: auto; padding-inline: 30px; }
  .ct-gate__a { padding-block: 120px 64px; }
  .ct-gate__l { max-width: 34em; }
  .ct-gate__p { font-size: min(9.4vw, 15svh); max-width: 11.5em; }
  .ct-gate__w { font-size: min(14vw, 22svh); }
  .ct-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 56px; }
  .ct-tiles > .ct-tile { position: relative; top: auto; }
  .ct-tile__f { aspect-ratio: 4 / 3; }
  .ct-tile__b { padding: 26px 26px 28px; }
  .ct-form__g { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: center; }
  .ct-form__h { font-size: clamp(120px, 13vw, 176px); }
  .ct-card { padding: 30px 30px 26px; }
  .ct-chips__g { display: flex; flex-wrap: wrap; }
  .ct-chip span { padding: 0 20px; white-space: nowrap; }
  .ct-soc { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; }
  .ct-soc b { font-size: clamp(72px, 7.4vw, 96px); }
}

/* override enhanced-athlete-protocol.css */
/* Hand-tuned pages: Enhanced Athlete Protocol and its guides, Enhanced Movement, Credentials, Tony Huge, Field Reports, Miracle Molecules. Everything here is ap-*. */

/* ---------- rhythm and type ---------- */
.ap-s { padding-block: clamp(72px, 11vw, 128px); }
.ap-s[data-enter=sheet] { padding-top: clamp(88px, 12vw, 144px); }
.ap-s--t { padding-top: clamp(40px, 6vw, 64px); }
.ap-h { color: var(--hot); }
.ap-t { font-size: clamp(50px, 13.4vw, 88px); line-height: .94; color: var(--hot); }
.ap-t--s { font-size: clamp(42px, 11.2vw, 64px); }
.ap-p { font-size: clamp(19px, 4.9vw, 21px); line-height: 1.5; letter-spacing: -.012em; color: var(--fg2); text-wrap: pretty; }
html.no-sf .ap-p { letter-spacing: 0; }
.ap-p + .ap-p { margin-top: 18px; }
.ap-2 > .ap-p + .ap-p { margin-top: 0; }
.ap-p strong, .ap-li strong { color: var(--fg); font-weight: 600; }
.ap-p a, .ap-li a, .ap-c p a, .ap-tile p a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--hot); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ap-say { font-weight: 600; font-size: clamp(25px, 6.5vw, 40px); line-height: 1.16; letter-spacing: -.022em; color: var(--fg); text-wrap: pretty; }
html.no-sf .ap-say { letter-spacing: -.012em; }
.ap-lit { max-width: 860px; }
.ap-gap { margin-top: clamp(28px, 4.4vw, 52px); }
.ap-gap2 { margin-top: clamp(40px, 6.4vw, 80px); }
.ap-m { max-width: var(--w-measure); }
.ap-2 { display: grid; gap: 18px clamp(32px, 5vw, 64px); }
.ap-note { font-size: 15px; line-height: 1.5; letter-spacing: -.01em; color: var(--fg2); text-wrap: pretty; }
.ap-note a { color: inherit; text-underline-offset: 3px; }
.ap-acts { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; }
.ap-sg { display: block; width: min(56%, 230px); color: var(--hot); }

/* ---------- head band extras ---------- */
.ap-hd .ih__l { max-width: 22em; }
.ap-hd--flush { min-height: 0; padding-bottom: calc(var(--radius-sheet) + clamp(56px, 8vw, 96px)); }

/* ---------- ledger: statement beside its sentences ---------- */
.ap-row { padding-block: 24px 40px; border-top: 1px solid var(--line); }
.ap-row:last-child { padding-bottom: 0; }
.ap-row__t { color: var(--hot); font-size: clamp(44px, 11.8vw, 72px); line-height: .96; }
.ap-row__b { margin-top: 14px; }
.ap-led { margin-top: clamp(36px, 5.4vw, 64px); }
.ap-led--0 { margin-top: 0; }

/* ---------- lists of terms ---------- */
.ap-li { padding: 0; list-style: none; font-size: clamp(19px, 4.9vw, 21px); line-height: 1.42; letter-spacing: -.012em; color: var(--fg2); }
.ap-li > li { padding-block: 16px 18px; border-top: 1px solid var(--line); text-wrap: pretty; }
.ap-li > li > b.poster { display: block; margin-bottom: 8px; font-size: clamp(40px, 10.6vw, 60px); line-height: .98; color: var(--hot); }

/* one word per line, big */
.ap-w { padding: 0; list-style: none; }
.ap-w > li { padding-block: 10px 12px; border-top: 1px solid var(--line); }
.ap-w b { display: block; font-size: clamp(44px, 12vw, 80px); line-height: .96; color: var(--hot); }
.ap-w span { display: block; margin-top: 4px; font-size: clamp(17px, 4.4vw, 19px); line-height: 1.34; letter-spacing: -.012em; color: var(--fg2); }

/* a word wall of markers */
.ap-mk { display: flex; flex-wrap: wrap; gap: 0 .36em; padding: 0; list-style: none; font-size: clamp(44px, 12.4vw, 92px); line-height: 1; color: var(--hot); }
.ap-mk li:nth-child(even) { color: var(--fg2); }

/* ---------- giant figure ---------- */
.ap-fig { display: grid; gap: clamp(20px, 3.4vw, 40px); }
.ap-fig__n { color: var(--hot); }
.ap-fig__c { font-weight: 600; font-size: clamp(22px, 5.6vw, 32px); line-height: 1.2; letter-spacing: -.018em; color: var(--fg); text-wrap: pretty; }
.ap-fig__s { display: block; margin-top: 12px; font-weight: 400; font-size: clamp(18px, 4.6vw, 20px); line-height: 1.46; letter-spacing: -.012em; color: var(--fg2); }

/* ---------- tiles ---------- */
.ap-tris { display: grid; gap: 10px; margin-top: clamp(36px, 5.4vw, 64px); }
.ap-tile { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 26px 24px 28px; border-radius: var(--radius-lg); background: var(--surface); color: var(--fg); text-decoration: none; }
.ap-tile h3, .ap-tile .ap-tile__t { font-family: var(--th-poster); font-weight: 400; text-transform: uppercase; letter-spacing: 0; font-size: clamp(46px, 12vw, 72px); line-height: .96; color: var(--hot); }
.ap-tile p { font-size: 18px; line-height: 1.42; letter-spacing: -.012em; color: var(--fg2); text-wrap: pretty; }
.ap-tile__go { display: inline-flex; align-items: center; gap: 9px; margin-top: auto; padding-top: 12px; font-weight: 600; font-size: 16px; letter-spacing: -.014em; color: var(--hot); }
.ap-tile__go i, .ap-go i { display: inline-grid; place-items: center; width: 12px; height: 12px; font-style: normal; transition: transform .35s var(--spring); }
.ap-tile__go svg, .ap-go svg { width: 12px; height: 12px; }
.ap-ph { position: relative; min-height: 88vw; margin: 0; overflow: clip; border-radius: var(--radius-lg); background: var(--surface); }
.ap-ph img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--op, 50% 25%); }
@media (hover: hover) and (pointer: fine) { a.ap-tile:hover .ap-tile__go i, a:hover > .ap-go i { transform: translate(3px, -3px); } }

/* ---------- full-bleed photograph between bands ---------- */
.ap-bleed { position: relative; z-index: 1; height: 86vw; margin: 0; overflow: clip; background: var(--ink); }
.ap-bleed img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--op, 50% 30%); }

/* ---------- split: words one side, hard-cropped photo the other ---------- */
.ap-sp__f { position: relative; height: 112vw; margin: clamp(36px, 6vw, 56px) calc(var(--gutter) * -1) 0; overflow: clip; }
.ap-sp__f img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--op, 50% 20%); }

/* ---------- the seven-pillar wall ---------- */
.ap-wl { overflow: clip; }
.ap-wall { --g: 3px; --cw: calc((min(100vw - var(--gutter) * 2, 1040px) - var(--g) * 6) / 7); --wh: clamp(430px, 74svh, 660px); display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--g); height: var(--wh); margin-top: clamp(36px, 5.4vw, 64px); }
.ap-wall a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding-block: 14px 16px; color: #fff; text-decoration: none; background-color: var(--velvet-base); background-image: radial-gradient(120% 74% at 40% 20%, #A01A3A 0, #7C112A 42%, #560B1E 88%); transition: transform .5s var(--spring); }
.ap-wall a:nth-child(odd) { color: var(--burgundy); background: var(--ivory); }
.ap-wall b { font-family: var(--th-poster); font-weight: 400; font-size: min(calc(var(--cw) * .74), 72px); line-height: 1; }
.ap-wall span { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--th-poster); font-weight: 400; text-transform: uppercase; font-size: min(calc((var(--wh) - 130px) / 5.3), calc(var(--cw) * .78)); line-height: 1; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .ap-wall a:hover { transform: translate3d(0, -10px, 0); } }

/* ---------- the deck: seven cards that pile up ---------- */
.ap-deck { display: grid; gap: 12px; margin-top: 0; }
.ap-c { --cf: #fff; --cf2: var(--on-velvet-2); --cl: rgba(255, 255, 255, .22); position: relative; display: grid; gap: 14px; padding: 24px 22px 28px; border-radius: var(--radius-lg); color: var(--cf); background: var(--ink); box-shadow: 0 -18px 40px -26px rgba(11, 8, 9, .5); }
.ap-c__n { font-family: var(--th-poster); font-size: clamp(112px, 32vw, 260px); line-height: .82; color: var(--cf); }
.ap-c h3 { font-family: var(--th-poster); font-weight: 400; text-transform: uppercase; letter-spacing: 0; font-size: clamp(46px, 12.6vw, 88px); line-height: .94; color: var(--cf); }
.ap-c p { font-size: 18px; line-height: 1.46; letter-spacing: -.012em; color: var(--cf2); text-wrap: pretty; }
.ap-c p + p { margin-top: 12px; }
.ap-c__k { padding-top: 12px; border-top: 1px solid var(--cl); font-size: 16px !important; line-height: 1.4 !important; }
.ap-c .ap-go { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; font-weight: 600; font-size: 17px; letter-spacing: -.014em; color: var(--cf); text-decoration: none; }
.ap-c--v { background: radial-gradient(120% 140% at 18% 0, var(--velvet-crown) 0, var(--velvet-lit) 45%, var(--velvet-base) 100%); }
.ap-c--i { background: var(--ink); --cf2: var(--on-ink-2); }
.ap-c--t { background: var(--titanium); --cf: var(--on-light-1); --cf2: #38322F; --cl: rgba(28, 26, 27, .2); }
.ap-c--b { background: linear-gradient(160deg, var(--burgundy-hover) 0, var(--burgundy) 60%, var(--velvet-base) 100%); }
.ap-c--s { background: var(--stone); --cf: var(--on-light-accent); --cf2: var(--on-light-2); --cl: rgba(28, 26, 27, .16); }
.ap-c--e { background: radial-gradient(120% 140% at 82% 0, var(--velvet-crown) 0, var(--velvet-lit) 50%, var(--velvet-edge) 110%); }
.ap-c--w { background: var(--ivory); --cf: var(--on-light-accent); --cf2: var(--on-light-2); --cl: rgba(28, 26, 27, .16); }

/* ---------- related guides ---------- */
.ap-rel { display: grid; margin-top: clamp(28px, 4vw, 44px); }
.ap-rel a { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 76px; padding-block: 12px 14px; border-top: 1px solid var(--line); font-family: var(--th-poster); text-transform: uppercase; font-size: clamp(38px, 10.4vw, 72px); line-height: 1; color: var(--hot); text-decoration: none; transition: transform .4s var(--spring); }
.ap-rel a:last-child { border-bottom: 1px solid var(--line); }
.ap-rel i { flex: none; display: grid; place-items: center; width: 18px; height: 18px; }
.ap-rel svg { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) { .ap-rel a:hover { transform: translate3d(10px, 0, 0); } }

/* ---------- tables that are really term and value ---------- */
.ap-tb { display: grid; }
.ap-tb > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding-block: 14px 16px; border-top: 1px solid var(--line); }
.ap-tb b { font-family: var(--th-poster); font-weight: 400; text-transform: uppercase; font-size: clamp(34px, 9vw, 48px); line-height: 1; color: var(--hot); }
.ap-tb span { font-size: clamp(18px, 4.7vw, 21px); line-height: 1.36; letter-spacing: -.012em; color: var(--fg2); }

/* ---------- steps on a line ---------- */
.ap-steps { position: relative; padding: 0; list-style: none; }
.ap-steps > li { position: relative; padding: 0 0 clamp(26px, 4vw, 36px) 34px; }
.ap-steps > li::before { content: ""; position: absolute; left: 0; top: 7px; width: 13px; height: 13px; background: var(--hot); }
.ap-steps > li::after { content: ""; position: absolute; left: 6px; top: 20px; bottom: -7px; width: 1px; background: var(--line); }
.ap-steps > li:last-child { padding-bottom: 0; }
.ap-steps > li:last-child::after { display: none; }
.ap-steps b { display: block; font-family: var(--th-poster); font-weight: 400; text-transform: uppercase; font-size: clamp(38px, 10vw, 56px); line-height: 1; color: var(--hot); }
.ap-steps span { display: block; margin-top: 4px; font-size: clamp(18px, 4.6vw, 20px); line-height: 1.4; letter-spacing: -.012em; color: var(--fg2); text-wrap: pretty; }

/* ---------- reference range bar ---------- */
.ap-rg { margin-top: clamp(32px, 5vw, 56px); }
.ap-rg__t { position: relative; height: 72px; background: var(--surface); }
.ap-rg__b { position: absolute; top: 0; bottom: 0; left: var(--l); width: var(--w); display: flex; align-items: center; padding-inline: 12px; font-family: var(--th-poster); text-transform: uppercase; white-space: nowrap; font-size: clamp(24px, 6.4vw, 38px); line-height: 1; transform-origin: 0 50%; }
.ap-rg__b--r { background: var(--titanium); color: var(--on-light-1); }
.ap-rg__b--o { background: var(--burgundy); color: #fff; }
.ap-rg__l { position: relative; height: 22px; margin-top: 8px; font-size: 15px; letter-spacing: -.01em; color: var(--fg2); font-variant-numeric: tabular-nums; }
.ap-rg__l span { position: absolute; top: 0; left: var(--x); transform: translateX(-50%); white-space: nowrap; }
.ap-rg__l span:first-child { transform: none; }
.ap-rg__l span:last-child { left: auto; right: 0; transform: none; }
.ap-rg__t + .ap-rg__t { margin-top: 4px; }

/* ---------- red flag numbers ---------- */
.ap-fl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 18px; margin-top: clamp(36px, 5.4vw, 64px); padding: 0; list-style: none; }
.ap-fl b { display: block; font-size: clamp(78px, 23vw, 170px); line-height: .92; color: var(--hot); }
.ap-fl span { display: block; margin-top: 6px; font-size: clamp(16px, 4.2vw, 19px); line-height: 1.32; letter-spacing: -.012em; color: var(--fg2); }
.ap-fl--w li { grid-column: 1 / -1; }
.ap-fl--w b { font-size: clamp(52px, 14vw, 104px); }

/* ---------- hot and cold: one card, two faces ---------- */
.ap-hc__f { position: relative; display: grid; align-content: end; min-height: 100svh; padding: 112px var(--gutter) 56px; overflow: clip; color: #fff; }
.ap-hc__f--h { background-color: var(--velvet-base); background-image: radial-gradient(90% 66% at 30% 70%, #C2264A 0, #7C112A 42%, #3D0714 100%); }
.ap-hc__f--c { background: var(--apple-grey); color: var(--ink); --hot: var(--ink); --fg: var(--ink); --fg2: var(--on-light-2); }
.ap-hc__f .wrap { padding-inline: 0; }
.ap-hc__n { color: inherit; }
.ap-hc__s { margin-top: 18px; max-width: 26em; font-weight: 600; font-size: clamp(23px, 6vw, 36px); line-height: 1.16; letter-spacing: -.02em; text-wrap: pretty; }
.ap-hc-on .ap-hc__v { position: absolute; inset: 0; perspective: 1400px; }
.ap-hc-on .ap-hc__c { position: absolute; inset: 0; transform-style: preserve-3d; }
.ap-hc-on .ap-hc__f { position: absolute; inset: 0; min-height: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ap-hc-on .ap-hc__f--c { transform: rotateY(180deg); }

/* ---------- the loop diagram ---------- */
.ap-lp { display: grid; gap: clamp(32px, 5vw, 64px); margin-top: clamp(36px, 5.4vw, 64px); }
.ap-lp__r { position: relative; aspect-ratio: 1; width: min(100%, 460px); margin-inline: auto; }
.ap-lp__r svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ap-lp__r text { font-family: var(--th-poster); text-transform: uppercase; fill: #fff; }
.ap-lp__d { fill: var(--velvet-lit); stroke: var(--champagne); stroke-width: 1.5; }

/* ---------- film rows ---------- */
.ap-fm { display: grid; gap: 18px; padding-block: clamp(28px, 4vw, 44px); border-top: 1px solid var(--line); }
.ap-fm .yt { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 0; overflow: clip; }
.ap-fm__n { font-size: 16px; line-height: 1.3; letter-spacing: -.012em; color: var(--fg2); }
.ap-fm h3 { margin-top: 6px; font-family: var(--th-poster); font-weight: 400; text-transform: uppercase; letter-spacing: 0; font-size: clamp(52px, 14vw, 96px); line-height: .94; color: var(--hot); }
.ap-fm__d { margin-top: 12px; font-size: clamp(18px, 4.6vw, 20px); line-height: 1.44; letter-spacing: -.012em; color: var(--fg2); text-wrap: pretty; }
.ap-fm__l { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 14px; font-size: 16px; color: var(--fg2); }
.ap-fm__l a { display: inline-flex; align-items: center; min-height: 44px; color: var(--fg); text-decoration: underline; text-decoration-color: var(--hot); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ap-lg { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 36px; margin-top: 28px; padding: 0; list-style: none; }
.ap-lg img { display: block; width: auto; height: var(--h, 40px); }
.ap-lg li:last-child img { --h: 60px; }

/* ---------- identity row on credentials ---------- */
.ap-id { display: grid; gap: 0; margin-top: clamp(32px, 5vw, 56px); }
.ap-id > div { padding-block: 18px 24px; border-top: 1px solid var(--line); }
.ap-id dt { font-size: 16px; color: var(--fg2); letter-spacing: -.012em; }
.ap-id dd { margin: 0; }
.ap-id b { display: block; margin-top: 4px; font-size: clamp(54px, 15vw, 100px); line-height: .94; color: var(--hot); }
.ap-id p { margin-top: 10px; font-size: 18px; line-height: 1.44; letter-spacing: -.012em; color: var(--fg2); text-wrap: pretty; }
.ap-id p strong { color: var(--fg); font-weight: 600; }
.ap-disc { margin-top: clamp(24px, 3.6vw, 36px); padding-top: 18px; border-top: 2px solid var(--hot); font-weight: 600; font-size: clamp(19px, 4.9vw, 22px); line-height: 1.32; letter-spacing: -.014em; color: var(--fg); text-wrap: pretty; }

/* ---------- running ribbon ---------- */
.ap-rb { overflow: clip; padding-block: 16px 14px; background: var(--ivory); color: var(--burgundy); }
.ap-rb__r { display: flex; gap: .7em; width: max-content; font-family: var(--th-poster); text-transform: uppercase; font-size: clamp(36px, 9.6vw, 60px); line-height: 1; white-space: nowrap; }

/* ---------- three big links ---------- */
.ap-bl { display: grid; margin-top: clamp(28px, 4vw, 44px); }
.ap-bl a { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 8px 10px; border-top: 1px solid var(--line); font-family: var(--th-poster); text-transform: uppercase; font-size: clamp(76px, 23vw, 176px); line-height: 1; color: var(--hot); text-decoration: none; transition: transform .4s var(--spring); }
.ap-bl a:last-child { border-bottom: 1px solid var(--line); }
.ap-bl i { flex: none; width: clamp(22px, 5vw, 44px); height: clamp(22px, 5vw, 44px); display: grid; place-items: center; }
.ap-bl svg { width: 100%; height: 100%; }
@media (hover: hover) and (pointer: fine) { .ap-bl a:hover { transform: translate3d(14px, 0, 0); } }

/* ---------- magazines on field reports ---------- */
.ap-iss { display: grid; gap: 28px; padding-block: clamp(32px, 5vw, 56px); border-top: 1px solid var(--line); }
.ap-iss:first-of-type { border-top: 0; padding-top: 0; }
.ap-mg { perspective: 1400px; width: min(68vw, 300px); margin-inline: auto; }
.ap-mg__b { position: relative; display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 3 / 4; padding: 18px 18px 16px; color: #fff; text-decoration: none; background-color: var(--velvet-base); background-image: radial-gradient(120% 80% at 30% 18%, #A01A3A 0, #7C112A 40%, #3D0714 100%); box-shadow: inset 7px 0 8px -5px rgba(0, 0, 0, .4), -14px 28px 44px -20px rgba(13, 3, 6, .7); transform: rotateY(-16deg) rotateX(2deg); transform-origin: 50% 50%; }
.ap-mg__b--i { color: var(--burgundy); background: var(--ivory); box-shadow: inset 7px 0 8px -5px rgba(90, 15, 34, .32), -14px 28px 44px -20px rgba(13, 3, 6, .7); }
.ap-mg__e { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; letter-spacing: -.008em; }
.ap-mg__t { font-family: var(--th-poster); text-transform: uppercase; font-size: clamp(44px, 14vw, 60px); line-height: .92; }
.ap-mg__t span { display: block; }
.ap-mg .sig { width: 52%; }
.ap-iss h2 { font-family: var(--th-poster); font-weight: 400; text-transform: uppercase; letter-spacing: 0; font-size: clamp(56px, 15vw, 104px); line-height: .94; color: var(--hot); }
.ap-iss__d { margin-top: 14px; font-size: clamp(19px, 4.9vw, 21px); line-height: 1.46; letter-spacing: -.012em; color: var(--fg2); text-wrap: pretty; }
.ap-iss__e { display: flex; gap: 14px; margin-bottom: 10px; font-size: 16px; letter-spacing: -.012em; color: var(--fg2); }
.ap-ch { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; padding: 0; list-style: none; }
.ap-ch li { padding: 6px 12px 7px; border-radius: 999px; background: var(--surface); font-size: 15px; line-height: 1.2; letter-spacing: -.012em; color: var(--fg); }

/* ---------- article index ---------- */
.ap-ix { display: grid; margin-top: clamp(28px, 4vw, 44px); }
.ap-ix a { display: block; padding-block: 15px 17px; border-top: 1px solid var(--line); color: var(--fg); text-decoration: none; }
.ap-ix a:last-child { border-bottom: 1px solid var(--line); }
.ap-ix b { font-weight: 600; font-size: clamp(19px, 4.9vw, 22px); line-height: 1.28; letter-spacing: -.014em; text-wrap: pretty; }
.ap-ix small { display: block; margin-top: 4px; font-size: 14px; color: var(--fg2); font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) { .ap-ix a:hover b { color: var(--hot); } }

@media (min-width: 700px) {
  .ap-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-tris--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ap-tris--2, .ap-tris--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-fl { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ap-fl--w { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-fl--w li { grid-column: auto; }
  .ap-tb > div { grid-template-columns: 5fr 7fr; gap: 32px; align-items: baseline; }
  .ap-w--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  .ap-id { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; }
}
@media (min-width: 900px) {
  .ap-row { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; padding-block: 28px 56px; }
  .ap-row__t { position: sticky; top: 104px; font-size: 72px; }
  .ap-row__b { margin-top: 6px; }
  .ap-fig { grid-template-columns: 7fr 5fr; align-items: end; gap: 56px; }
  .ap-fig__c { padding-bottom: 8px; }
  .ap-bleed { height: min(82svh, 56vw); }
  .ap-bleed img { object-position: var(--op-w, var(--op, 50% 30%)); }
  .ap-sp { display: grid; grid-template-columns: 7fr 5fr; gap: 56px; align-items: stretch; }
  .ap-sp--r .ap-sp__x { order: 2; }
  .ap-sp--r { grid-template-columns: 5fr 7fr; }
  .ap-sp { align-items: start; }
  .ap-sp__f { position: sticky; top: 96px; height: min(78svh, 720px); margin: 0; }
  .ap-sp__f img { object-position: var(--op-w, var(--op, 50% 20%)); }
  .ap-tile { padding: 32px 32px 34px; }
  .ap-ph { min-height: 0; }
  .ap-c { grid-template-columns: 240px minmax(0, 1fr); gap: 8px 40px; padding: 32px 40px 36px; align-items: start; }
  .ap-c__n { grid-row: 1 / span 2; font-size: 264px; }
  .ap-c h3 { font-size: 88px; }
  .ap-c p { font-size: 19px; }
  .ap-rel a { font-size: 76px; }
  .ap-tb b { font-size: 48px; }
  .ap-lp { grid-template-columns: 5fr 7fr; align-items: center; }
  .ap-fm { grid-template-columns: 7fr 5fr; gap: 48px; align-items: center; }
  .ap-fm:nth-of-type(even) .ap-fm__v { order: 2; }
  .ap-fm:nth-of-type(even) { grid-template-columns: 5fr 7fr; }
  .ap-fm h3 { font-size: 84px; }
  .ap-iss { grid-template-columns: 4fr 8fr; gap: 56px; align-items: center; }
  .ap-mg { width: 300px; margin-inline: 0; }
  .ap-mg__t { font-size: 60px; }
  .ap-iss h2 { font-size: 104px; }
  .ap-hc__f { align-content: center; padding-block: 120px; }
  .ap-hc__f .wrap { padding-inline: var(--gutter); }
}
@media (min-width: 900px) and (min-height: 700px) {
  html.gs .ap-deck .ap-c { position: sticky; top: calc(88px + var(--i) * 10px); }
}

.ap-big { font-size: clamp(96px, 24vw, 300px); line-height: .9; white-space: nowrap; }

/* override forms-pages.css */
/* ---------- form pages: /newsletter/, /free-guide/, /your-miracle-cheat-sheet-is-ready/, /peptide-dosage-calculator/. Everything is fp-*. ---------- */

/* head band: poster, sentence, the form, then a hard-cropped photo */
.fp-h { --kx: 32%; --ky: 30%; padding-top: 104px; }
.fp-h__t { color: #fff; }
.fp-lead { margin-top: 18px; max-width: 30em; font-weight: 600; font-size: clamp(20px, 5.3vw, 26px); line-height: 1.22; letter-spacing: -.018em; color: var(--fg); text-wrap: pretty; }
.fp-ask { margin-top: 26px; font-weight: 600; font-size: 18px; letter-spacing: -.014em; color: var(--fg); }
.fp-micro { margin-top: 12px; font-size: 15px; line-height: 1.4; letter-spacing: -.012em; color: var(--fg2); }
.fp-h__f { position: relative; margin: 44px 0 0; height: 104vw; max-height: 86svh; overflow: clip; }
.fp-h__f img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--op, 50% 30%); }
.fp-h:not(.fp-h--ph) { padding-bottom: calc(var(--radius-sheet) + 72px); }
.fp-h--ph .fp-h__f { margin-bottom: 0; }

/* the AWeber forms, on any theme */
.fp-f { display: grid; gap: 10px; margin-top: 26px; max-width: 560px; }
.fp-h .fp-ask + .fp-f { margin-top: 12px; }
.fp-f input:not([type=hidden]) { width: 100%; min-width: 0; height: 60px; padding: 0 22px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface, rgba(255, 255, 255, .08)); color: var(--fg); font: inherit; font-size: 18px; letter-spacing: -.014em; transition: border-color .3s var(--out), background-color .3s var(--out); }
:not(body)[data-theme=velvet] .fp-f input:not([type=hidden]), :not(body)[data-theme=ink] .fp-f input:not([type=hidden]) { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .3); color: #fff; }
.fp-f input::placeholder { color: var(--fg2); opacity: .9; }
.fp-f input:focus { outline: 0; border-color: currentColor; }
:not(body)[data-theme=velvet] .fp-f input:focus, :not(body)[data-theme=ink] .fp-f input:focus { border-color: #fff; background: rgba(255, 255, 255, .14); }
.fp-f .btn { min-height: 60px; font-size: 18px; }
.fp-h .i-say, .fp-end .i-say { margin-top: 26px; color: #fff; }

/* bands */
.fp-b { padding-block: calc(var(--radius-sheet) + 76px) var(--section); }
.fp-b__h { color: var(--hot); }
.fp-t { margin-top: 32px; max-width: var(--w-measure); }
.fp-t > * + * { margin-top: 22px; }
.fp-p { font-size: clamp(19px, 4.9vw, 22px); line-height: 1.46; letter-spacing: -.012em; color: var(--fg2); text-wrap: pretty; }
.fp-p strong { color: var(--fg); font-weight: 600; }
.fp-note { font-size: 14px; line-height: 1.45; letter-spacing: -.01em; color: var(--fg2); }

/* numbered cards */
.fp-cards { display: grid; gap: 14px; margin-top: 40px; }
.fp-card { display: flex; flex-direction: column; padding: 26px 24px 30px; border-radius: 26px; background: var(--bg); color: var(--fg); }
.fp-card[data-theme=white] { box-shadow: inset 0 0 0 1px var(--line-on-light); }
.fp-card b { font-weight: 400; font-size: clamp(88px, 24vw, 128px); line-height: .9; color: var(--hot); }
.fp-card h3 { margin-top: 18px; font-weight: 600; font-size: clamp(25px, 6.6vw, 32px); line-height: 1.08; letter-spacing: -.022em; color: var(--fg); text-wrap: balance; }
.fp-card p { margin-top: 12px; font-size: 18px; line-height: 1.42; letter-spacing: -.014em; color: var(--fg2); text-wrap: pretty; }

/* closing band */
.fp-end__h { color: #fff; }
.fp-end .fp-lead { color: var(--fg2); }
.fp-sig { margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--line); }
.fp-sig .sig { width: 168px; color: #fff; }
.fp-sig p { margin-top: 8px; font-size: 15px; color: var(--fg2); }

/* what's inside */
.fp-facts { margin-top: 36px; }

/* the ready page: a real 3D book you can tap */
.fp-ready { min-height: calc(100svh + var(--radius-sheet)); display: flex; align-items: center; padding-bottom: calc(var(--radius-sheet) + 56px); }
.fp-ready__g { display: grid; gap: 48px; }
.fp-ready__a { margin-top: 28px; }
.fp-dl { width: 100%; min-height: 60px; padding-block: 12px; font-size: 18px; line-height: 1.2; white-space: normal; text-align: center; }
.fp-book { --bw: min(52vw, 230px); --bd: calc(var(--bw) * .13); position: relative; display: grid; place-items: center; justify-self: center; padding-bottom: 28px; text-decoration: none; }
.fp-book .i-bk__t { color: #fff; }
.fp-book .i-bk__b { animation: fp-sway 9s var(--th-out, ease-in-out) infinite alternate; }
.fp-book__floor { position: absolute; left: 12%; right: 12%; bottom: 0; height: 26px; border-radius: 50%; background: radial-gradient(closest-side, rgba(13, 3, 6, .6), rgba(13, 3, 6, 0)); }
@keyframes fp-sway { from { transform: rotateX(4deg) rotateY(-30deg); } to { transform: rotateX(2deg) rotateY(-12deg) translateY(-8px); } }
html[data-motion=still] .fp-book .i-bk__b { animation: none; }

/* calculator: the live page's fields and values, on a white card in the velvet room */
.fp-calc { padding-bottom: calc(var(--radius-sheet) + 64px); }
.fp-calc__g { display: grid; gap: 32px; }
.fp-calc__card { max-width: none; padding: 24px 20px 22px; border-radius: 28px; background: #fff; box-shadow: 0 40px 80px -30px rgba(13, 3, 6, .75); }
.fp-calc__card .lv-calc__f label { color: var(--on-light-1); }
.fp-sel { position: relative; }
.fp-sel select { appearance: none; -webkit-appearance: none; padding-right: 48px; background-image: linear-gradient(45deg, transparent 50%, var(--on-light-accent) 50%), linear-gradient(135deg, var(--on-light-accent) 50%, transparent 50%); background-position: calc(100% - 26px) 50%, calc(100% - 20px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.fp-calc__card .btn { justify-self: stretch; min-height: 60px; font-size: 18px; }
.fp-calc__card .lv-calc__r { color: var(--on-light-1); font-size: clamp(22px, 5.6vw, 28px); }
.fp-calc__card .lv-calc__r span { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.012em; color: var(--on-light-2); }
.fp-calc__card .lv-calc__r b { display: block; margin-top: 4px; font-family: var(--th-poster); font-weight: 400; font-size: clamp(96px, 27vw, 150px); line-height: .9; letter-spacing: 0; color: var(--on-light-accent); text-transform: none; }
.fp-calc__card .lv-calc__r.is-on b { animation: fp-pop .7s var(--spring); }
.fp-calc__card .lv-calc__r.is-err { color: var(--on-light-accent); animation: ct-shake .42s var(--out); }
@keyframes fp-pop { from { opacity: 0; transform: translateY(18px) scale(.94); } to { opacity: 1; transform: none; } }
html[data-motion=still] .fp-calc__card .lv-calc__r b, html[data-motion=still] .fp-calc__card .lv-calc__r.is-err { animation: none; }
.fp-ph { margin: 0; }

@media (min-width: 900px) {
  .fp-h--ph { display: flex; align-items: center; min-height: calc(100svh + var(--radius-sheet)); padding-block: 104px calc(var(--radius-sheet) + 56px); }
  .fp-h--ph .fp-h__c { width: 52%; }
  .fp-h--ph .fp-h__f { position: absolute; top: 0; right: 0; bottom: 0; width: 42%; height: auto; max-height: none; margin: 0; }
  .fp-f { grid-template-columns: 1fr 1fr; }
  .fp-f .btn { grid-column: 1 / -1; justify-self: start; padding-inline: 32px; }
  .fp-f--one { grid-template-columns: minmax(0, 1fr) auto; }
  .fp-f--one .btn { grid-column: auto; }
  .fp-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: start; }
  .fp-split .fp-t { margin-top: 0; padding-top: 8px; }
  .fp-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 56px; }
  .fp-end__w { max-width: calc(820px + var(--gutter) * 2); }
  .fp-ready__g { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; gap: 64px; }
  .fp-book { --bw: 300px; }
  .fp-dl { width: auto; }
  .fp-calc { display: flex; align-items: center; min-height: calc(100svh + var(--radius-sheet)); padding-top: 96px; }
  .fp-calc__g { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: center; }
  .fp-calc__card { padding: 34px 34px 30px; }
}

/* override protocols.css */
/* Hand-tuned protocol pages. Everything here is pz-*. Tokens, themes, .poster and .btn come from base.css. */

.pz-after { margin-top: clamp(40px, 6vw, 72px); }
.pz-h2 { color: var(--hot); }
.s .poster.i-rise, .pz-cta .poster { color: var(--hot); }
.pz-lead { margin-top: clamp(20px, 3vw, 32px); max-width: 34em; font-size: clamp(20px, 5.2vw, 25px); line-height: 1.34; letter-spacing: -.016em; color: var(--fg2); text-wrap: pretty; }
html.no-sf .pz-lead { letter-spacing: 0; }
.pz-lead--s { font-size: clamp(19px, 4.9vw, 21px); line-height: 1.42; }
.pz-lead a, .pz-say a, .pz-fine a, .pz-facts a, .pz-meta a { color: inherit; text-decoration: underline; text-decoration-color: var(--hot); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.pz-lead strong, .pz-say strong { color: var(--fg); font-weight: 600; }
.pz-say { margin-top: clamp(20px, 3vw, 32px); max-width: 26em; font-size: clamp(24px, 6.2vw, 38px); }
.pz-say--w { max-width: 30em; color: var(--on-velvet-1); }
.pz-fine { margin-top: clamp(36px, 5vw, 56px); padding-top: 18px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.5; letter-spacing: -.01em; color: var(--fg2); }
.pz-go { display: inline-flex; align-items: center; gap: 9px; margin-top: 22px; font-weight: 600; font-size: 17px; letter-spacing: -.014em; color: var(--hot); text-decoration: none; }
.pz-go i { display: inline-grid; place-items: center; width: 12px; height: 12px; transition: transform .35s var(--spring); }
.pz-go svg { width: 12px; height: 12px; }
@media (hover: hover) and (pointer: fine) { .pz-go:hover i { transform: translate(3px, -3px); } }
.pz-sig { width: clamp(120px, 30vw, 190px); margin-top: 26px; color: var(--hot); }
.pz-meta { margin-top: 16px; font-size: 15px; line-height: 1.4; letter-spacing: -.01em; color: var(--fg2); }
.pz-sub { margin-top: clamp(56px, 8vw, 88px); font-size: clamp(38px, 10.4vw, 72px); color: var(--hot); }

/* ---------- heads: each page has its own ---------- */
.pz-h { min-height: 0; padding-top: 0; }
.pz-h h1 { color: var(--hot); }
.pz-h > .wrap { padding-top: 104px; }

/* one poster across the column, then a very wide photograph (Mass Blast) */
.pz-h--stack { display: flex; flex-direction: column; min-height: calc(100svh + var(--radius-sheet)); }
.pz-h__wide { position: relative; flex: 1 0 min(78svh, 92vw); margin: clamp(32px, 5vw, 56px) 0 0; overflow: clip; }
.pz-h__wide img, .pz-band img, .pz-h__f img, .pz-ed__f img, .pz-tony__f img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--op, 50% 30%); }

/* magazine page: poster, then portrait beside the sentence (Natural Plus) */
.pz-h--ed { display: block; padding-bottom: calc(var(--radius-sheet) + clamp(48px, 7vw, 80px)); }
.pz-ed { display: grid; gap: 28px; margin-top: clamp(28px, 4vw, 48px); }
.pz-ed__f { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: clip; background: var(--ivory); }

/* split: words one side, photograph flush to the other */
.pz-h--split { display: flex; flex-direction: column; min-height: calc(100svh + var(--radius-sheet)); padding-bottom: calc(var(--radius-sheet) + 44px); }
.pz-h__f { position: relative; margin: 0; overflow: clip; }
@media (max-width: 899px) {
  /* phone: poster, then the photograph, then the sentence and buttons */
  .pz-h--split .pz-h__c { display: contents; }
  .pz-h--split .pz-h__c > * { margin-inline: var(--gutter); }
  .pz-h--split h1 { order: 1; margin-top: 100px; }
  .pz-h--split .pz-h__f { order: 2; flex: none; height: 118vw; margin-top: 28px; }
  .pz-h--split .pz-h__c > :not(h1) { order: 3; }
  .pz-h--split .pz-wave { order: 2; margin-top: 22px; }
}

/* type only (Live Forever, Pioneers) */
.pz-h--mono { display: flex; flex-direction: column; justify-content: flex-end; min-height: calc(100svh + var(--radius-sheet)); padding-bottom: calc(var(--radius-sheet) + clamp(40px, 6vw, 64px)); }

/* before and after (Looksmaxxing) */
.pz-h--ba { display: block; padding-bottom: calc(var(--radius-sheet) + clamp(48px, 7vw, 80px)); }
.pz-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: clamp(28px, 4vw, 48px); }
.pz-ba figure { margin: 0; }
.pz-ba img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; background: var(--apple-grey); }
.pz-ba figcaption { margin-top: 10px; font-family: var(--th-poster); text-transform: uppercase; font-size: clamp(30px, 8vw, 52px); line-height: 1; color: var(--on-light-1); }
.pz-ba figure:last-child figcaption { color: var(--on-light-accent); }

/* ---------- full-bleed photographs between bands ---------- */
.pz-band { position: relative; z-index: 1; margin: 0; height: 92vw; overflow: clip; }
.pz-band--t { height: 118vw; }

/* ---------- numbers ---------- */
.pz-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
.pz-stats b { display: block; font-size: clamp(84px, 24vw, 168px); line-height: .9; color: var(--hot); }
.pz-stats span { display: block; margin-top: 8px; font-size: 17px; line-height: 1.3; letter-spacing: -.012em; color: var(--fg2); }
.pz-stats--lead > :first-child { grid-column: 1 / -1; }
.pz-stats--4 b { font-size: clamp(64px, 17vw, 96px); }
.pz-stats--lead > :first-child b { font-size: clamp(190px, 58vw, 440px); line-height: .84; }
.pz-stats--lead > :first-child span { font-size: clamp(22px, 5.6vw, 30px); font-weight: 600; color: var(--fg); }
.pz-stats--col { grid-template-columns: minmax(0, 1fr); gap: 24px; }

.pz-zero__g { display: grid; gap: 40px; }
.pz-zero__a b { display: block; font-size: clamp(280px, 86vw, 620px); line-height: .8; color: var(--on-light-accent); }
.pz-zero__a span { display: block; margin-top: 14px; font-weight: 600; font-size: clamp(24px, 6.2vw, 38px); letter-spacing: -.02em; color: var(--fg); }

/* ---------- pillars: stacked sheets (Mass Blast) ---------- */
.pz-pillhead { padding-bottom: clamp(56px, 8vw, 96px); }
.pz-stack { background: var(--ivory); }
.pz-card { position: sticky; top: 0; display: flex; align-items: center; min-height: 100svh; padding-block: 88px 56px; border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; box-shadow: var(--shadow-sheet); overflow: clip; }
.pz-card:first-child { border-radius: 0; box-shadow: none; }
.pz-card__g { display: grid; gap: 8px; }
.pz-card__n { font-size: clamp(90px, 26vw, 300px); line-height: .84; color: var(--hot); }
.pz-card__b { min-width: 0; }
.pz-card__w { color: var(--fg); }
.pz-card__t { margin-top: 16px; font-weight: 600; font-size: clamp(25px, 6.6vw, 40px); line-height: 1.1; letter-spacing: -.022em; color: var(--fg); text-wrap: balance; }
.pz-card__d { margin-top: 12px; max-width: 32em; font-size: clamp(19px, 4.9vw, 22px); line-height: 1.42; letter-spacing: -.012em; color: var(--fg2); text-wrap: pretty; }
@media (max-height: 620px) { .pz-card { position: relative; min-height: 0; } }

/* ---------- pillars: ledger (Natural Plus) ---------- */
.pz-led { display: grid; gap: 8px; padding-block: 22px 30px; border-top: 1px solid var(--line); }
.pz-led__w { font-size: clamp(72px, 21vw, 138px); line-height: .92; color: var(--hot); }
.pz-led h3 { font-weight: 600; font-size: clamp(24px, 6.2vw, 32px); line-height: 1.14; letter-spacing: -.02em; color: var(--fg); }
.pz-led div p { margin-top: 10px; max-width: 34em; font-size: clamp(19px, 4.9vw, 21px); line-height: 1.42; letter-spacing: -.012em; color: var(--fg2); text-wrap: pretty; }

/* ---------- pillars: the turning drum (High Frequency) ---------- */
.pz-dr__w { padding-block: 104px 56px; }
.pz-di + .pz-di { margin-top: 56px; }
.pz-dw { font-size: clamp(88px, 26vw, 300px); line-height: .9; color: var(--hot); }
.pz-db { margin-top: 14px; max-width: 34em; }
.pz-db h3 { font-weight: 600; font-size: clamp(25px, 6.6vw, 40px); line-height: 1.1; letter-spacing: -.022em; color: var(--fg); text-wrap: balance; }
.pz-db p { margin-top: 12px; font-size: clamp(19px, 4.9vw, 23px); line-height: 1.4; letter-spacing: -.012em; color: var(--fg2); text-wrap: pretty; }
.pz-on .pz-dr__w { position: relative; height: 100%; padding-block: 0; }
.pz-on .pz-di { position: absolute; inset: 0 var(--gutter); display: flex; flex-direction: column; justify-content: center; margin: 0; padding-top: 56px; }
.pz-on .pz-dw { will-change: transform; backface-visibility: hidden; }

/* the frequency line */
.pz-wave { width: 100%; max-width: 460px; height: clamp(34px, 6vw, 52px); margin-top: 28px; overflow: hidden; color: var(--champagne); opacity: .9; }
.pz-wave svg { display: block; width: 200%; height: 100%; animation: pz-wave 7s linear infinite; }
.pz-wave path { fill: none; stroke: currentColor; stroke-width: 2; vector-effect: non-scaling-stroke; }
@keyframes pz-wave { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .pz-wave svg { animation: none; } }
html[data-motion=still] .pz-wave svg { animation: none; }

/* ---------- pillars: instrument panel, hard edged (Better Than Natural) ---------- */
.pz-tls { display: flex; gap: 1px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; background: var(--line); perspective: 1200px; }
.pz-tls::-webkit-scrollbar { display: none; }
.pz-tl { flex: 0 0 min(84vw, 340px); scroll-snap-align: center; display: flex; flex-direction: column; min-height: 500px; padding: 32px 24px 36px; background: var(--ink); }
.pz-tl__w { font-size: clamp(64px, 19vw, 92px); line-height: .92; color: #fff; }
.pz-tl h3 { margin-top: auto; padding-top: 32px; font-weight: 600; font-size: 25px; line-height: 1.14; letter-spacing: -.02em; color: var(--fg); }
.pz-tl > p:last-child { margin-top: 10px; font-size: 17px; line-height: 1.42; letter-spacing: -.012em; color: var(--fg2); text-wrap: pretty; }

/* ---------- pillars: sticky poster and the running order (Harem Quest) ---------- */
.pz-sp { display: grid; gap: 36px; }
.pz-sp__l h2 { color: var(--hot); }
.pz-os { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 12px; padding-block: 22px 30px; border-top: 1px solid var(--line); }
.pz-os__n { font-size: 52px; line-height: .92; color: var(--hot); }
.pz-os__w { font-size: clamp(60px, 17vw, 112px); line-height: .92; color: var(--fg); }
.pz-os h3 { margin-top: 14px; font-weight: 600; font-size: clamp(23px, 6vw, 30px); line-height: 1.14; letter-spacing: -.02em; color: var(--fg); }
.pz-os div > p:last-child { margin-top: 10px; font-size: clamp(18px, 4.7vw, 20px); line-height: 1.44; letter-spacing: -.012em; color: var(--fg2); text-wrap: pretty; }
.pz-tier { display: grid; gap: 4px; margin-top: 16px; }
.pz-tier span { display: block; padding: 8px 14px 6px; line-height: 1; color: #fff; background: var(--burgundy); }
.pz-tier span:nth-child(1) { width: 46%; font-size: clamp(30px, 8vw, 44px); background: var(--velvet-crown, #691022); }
.pz-tier span:nth-child(2) { width: 68%; font-size: clamp(30px, 8vw, 44px); background: var(--burgundy); }
.pz-tier span:nth-child(3) { width: 100%; font-size: clamp(30px, 8vw, 44px); background: var(--ink); }

/* ---------- pillars: coloured tiles (Looksmaxxing) ---------- */
.pz-bento { display: grid; gap: 10px; }
.pz-bt { display: flex; flex-direction: column; justify-content: space-between; min-height: 320px; padding: 24px; border-radius: var(--radius-lg); background: var(--bg, var(--ivory)); color: var(--fg); }
.pz-bt--titanium { background: var(--titanium); --fg: var(--on-light-1); --fg2: var(--on-light-2); --hot: var(--on-light-accent); }
.pz-bt--stone { background: var(--stone); --fg: var(--on-light-1); --fg2: var(--on-light-2); --hot: var(--on-light-accent); }
.pz-bt__w { font-size: clamp(92px, 27vw, 190px); line-height: .9; color: var(--hot); }
.pz-bt h3 { margin-top: 40px; font-weight: 600; font-size: clamp(24px, 6.2vw, 30px); line-height: 1.12; letter-spacing: -.02em; color: var(--fg); }
.pz-bt div p { margin-top: 8px; font-size: 18px; line-height: 1.4; letter-spacing: -.012em; color: var(--fg2); text-wrap: pretty; }

/* ---------- pillars: staircase (Live Forever) ---------- */
.pz-st { padding-block: 22px 34px; border-top: 1px solid var(--line); }
.pz-st h3 { color: var(--on-light-accent); }
.pz-st p { margin-top: 12px; max-width: 34em; font-size: clamp(19px, 4.9vw, 21px); line-height: 1.42; letter-spacing: -.012em; color: var(--fg2); text-wrap: pretty; }

/* ---------- quote ---------- */
.pz-qb { margin: 0; }
.pz-q { font-size: clamp(54px, 14.6vw, 124px); line-height: .96; color: var(--hot); text-wrap: pretty; }

/* ---------- library ---------- */
.pz-idx { counter-reset: pz; }
.pz-idx > a { counter-increment: pz; justify-content: flex-start; gap: 16px; padding-block: 16px 18px; }
.pz-idx > a::before { content: counter(pz, decimal-leading-zero); flex: none; width: 52px; font-family: var(--th-poster); font-size: 38px; line-height: 1; color: var(--hot); }
.pz-idx b { font-size: clamp(20px, 5.2vw, 25px); line-height: 1.2; letter-spacing: -.018em; }
.pz-lib .lv-acts { justify-content: flex-start; }

/* ---------- close ---------- */
.pz-cta { padding-block: clamp(96px, 14vw, 168px) clamp(96px, 13vw, 160px); }
.pz-faq { margin-top: 0; }
.pz-faq details > div { font-size: clamp(18px, 4.7vw, 20px); }
.pz-faq summary { font-weight: 600; font-size: clamp(21px, 5.4vw, 26px); letter-spacing: -.018em; line-height: 1.2; }

/* ---------- videos ---------- */
.pz-ch { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 18px; align-items: start; padding-top: 22px; border-top: 1px solid var(--line); }
.pz-ch img { display: block; width: 96px; height: 96px; object-fit: cover; background: var(--surface); }
.pz-ch h3 { font-weight: 600; font-size: clamp(25px, 6.6vw, 34px); line-height: 1.1; letter-spacing: -.02em; color: var(--fg); }
.pz-ch__m { margin-top: 4px; font-size: 15px; color: var(--fg2); }
.pz-ch p:not(.pz-ch__m) { margin-top: 10px; grid-column: 1 / -1; font-size: clamp(18px, 4.7vw, 20px); line-height: 1.44; letter-spacing: -.012em; color: var(--fg2); text-wrap: pretty; }
.pz-v { display: block; color: var(--fg); text-decoration: none; }
.pz-v__f { position: relative; display: flex; align-items: flex-end; aspect-ratio: 16 / 9; padding: 18px 64px 16px 18px; overflow: clip; container-type: inline-size; background: var(--ink); color: #fff; transition: background-color .4s var(--spring); }
:not(body)[data-theme=ink] .pz-v__f { background: var(--velvet-base); }
:not(body)[data-theme=white] .pz-v__f, :not(body)[data-theme=ivory] .pz-v__f { background: var(--velvet-base); }
.pz-v__f .poster { font-size: clamp(26px, 9.4cqw, 54px); line-height: .94; color: #fff; text-wrap: balance; }
.pz-v__p, .pz-ft .pz-v__p { position: absolute; right: 16px; top: 16px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--velvet-base); transition: transform .35s var(--spring); }
.pz-v__p svg { width: 18px; height: 18px; margin-left: 2px; }
.pz-ft { position: relative; display: flex; align-items: flex-end; aspect-ratio: 16 / 9; padding: clamp(20px, 4vw, 48px); padding-right: 96px; background: var(--velvet-base); color: #fff; text-decoration: none; container-type: inline-size; }
.pz-ft .poster { font-size: clamp(44px, 9cqw, 120px); line-height: .94; color: #fff; text-wrap: balance; }
.pz-ft .pz-v__p { right: clamp(20px, 4vw, 48px); top: clamp(20px, 4vw, 48px); width: clamp(56px, 8vw, 88px); height: clamp(56px, 8vw, 88px); }
.pz-ft .pz-v__p svg { width: 40%; height: 40%; }
@media (hover: hover) and (pointer: fine) { .pz-v:hover .pz-v__p, .pz-ft:hover .pz-v__p { transform: scale(1.1); } }
.pz-v b { display: block; margin-top: 12px; font-weight: 600; font-size: 19px; line-height: 1.2; letter-spacing: -.016em; text-wrap: pretty; }
.pz-v small { display: block; margin-top: 4px; font-size: 15px; color: var(--fg2); }
.pz-vr { display: flex; gap: 12px; margin-top: 24px; padding-inline: max(var(--gutter), calc(50vw - 520px)); padding-bottom: 8px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: max(var(--gutter), calc(50vw - 520px)); -webkit-overflow-scrolling: touch; scrollbar-width: none; perspective: 1400px; }
.pz-vr::-webkit-scrollbar { display: none; }
.pz-vr .pz-v { flex: 0 0 min(78vw, 380px); scroll-snap-align: start; }
.pz-vg { display: grid; gap: 20px; margin-top: 24px; }

/* ---------- Live Forever parts ---------- */
.pz-two { display: grid; gap: 8px; }
.pz-two .pz-lead { margin-top: 0; }
.pz-mq { overflow: clip; padding-block: 18px 16px; }
.pz-mq__r { display: flex; width: max-content; animation: pz-mq 42s linear infinite; }
.pz-mq__r span { flex: none; padding-inline: 28px; font-size: clamp(34px, 9vw, 60px); line-height: 1; color: #fff; white-space: nowrap; }
@keyframes pz-mq { to { transform: translateX(-33.3333%); } }
@media (prefers-reduced-motion: reduce) { .pz-mq__r { animation: none; flex-wrap: wrap; width: auto; } .pz-mq__r span[aria-hidden=true] { display: none; } }
html[data-motion=still] .pz-mq__r { animation: none; flex-wrap: wrap; width: auto; }
html[data-motion=still] .pz-mq__r span[aria-hidden=true] { display: none; }
.pz-tony__g { display: grid; gap: 32px; }
.pz-tony__f { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: clip; }
.pz-eco__g { display: grid; gap: 36px; }
.pz-eco__h { font-size: 17px; letter-spacing: -.012em; color: var(--fg2); }
.pz-eco__h a { color: inherit; text-underline-offset: 3px; }
.pz-eco nav { display: grid; margin-top: 8px; }
.pz-eco nav a { padding-block: 10px 8px; border-top: 1px solid var(--line); font-size: clamp(44px, 12vw, 68px); line-height: 1; color: #fff; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .pz-eco nav a:hover { color: var(--champagne); } }
.pz-eco .pz-fine { border-top: 0; padding-top: 0; }

/* ---------- Pioneers parts ---------- */
.pz-pi2 { display: grid; gap: 64px; }
.pz-facts { margin-top: 28px; }
.pz-facts > div { padding-block: 16px 20px; border-top: 1px solid var(--line); }
.pz-facts h3 { font-weight: 600; font-size: clamp(22px, 5.6vw, 26px); line-height: 1.16; letter-spacing: -.018em; color: var(--fg); }
.pz-facts p { margin-top: 6px; font-size: clamp(18px, 4.7vw, 20px); line-height: 1.44; letter-spacing: -.012em; color: var(--fg2); text-wrap: pretty; }

@media (min-width: 700px) {
  .pz-stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pz-stats--4 b { font-size: clamp(84px, 10.4vw, 132px); }
  .pz-two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
  .pz-vg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pz-eco__g { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; }
  .pz-pi2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; }
}
@media (min-width: 900px) {
  .pz-h > .wrap { padding-top: 124px; }
  .pz-h__wide { flex: 1 0 min(86svh, 62vw); }
  .pz-band { height: min(88svh, 56vw); }
  .pz-band--t { height: min(92svh, 60vw); }
  .pz-band img, .pz-h__f img, .pz-h__wide img { object-position: var(--op-w, var(--op, 50% 30%)); }

  .pz-ed { grid-template-columns: 5fr 6fr; gap: 56px; align-items: end; }
  .pz-h--ba .pz-ba { grid-template-columns: repeat(2, minmax(0, 420px)); }

  .pz-h--split { display: block; min-height: calc(100svh + var(--radius-sheet)); }
  .pz-h__c { display: flex; flex-direction: column; justify-content: center; width: 50%; min-height: calc(100svh + var(--radius-sheet)); padding: 124px 56px calc(var(--radius-sheet) + 56px) max(var(--gutter), calc(50vw - 520px)); }
  .pz-h__f { position: absolute; top: 0; bottom: 0; left: 50%; right: 0; }
  .pz-h--rev .pz-h__c { margin-left: 50%; padding-left: 56px; padding-right: max(var(--gutter), calc(50vw - 520px)); }
  .pz-h--rev .pz-h__f { left: 0; right: 50%; }

  /* three figures beside the zero: columns as wide as their own number, so "100%" stays inside the page edge */
  .pz-stats--col { grid-template-columns: repeat(3, auto); justify-content: space-between; }
  .pz-stats--col b { font-size: clamp(84px, 13vw, 168px); }
  .pz-zero__g { grid-template-columns: 5fr 7fr; gap: 56px; align-items: end; }

  .pz-card__g { grid-template-columns: 4fr 8fr; gap: 56px; align-items: center; }

  .pz-led { grid-template-columns: 5fr 7fr; gap: 56px; align-items: baseline; }

  .pz-tls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; perspective: none; }
  .pz-tl { min-height: 520px; padding: 40px max(32px, calc((100vw - 1040px) / 6)) 44px; }
  .pz-tl__w { font-size: clamp(64px, 6.2vw, 80px); }

  .pz-sp { grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
  .pz-sp__l { position: sticky; top: 104px; }
  .pz-os { grid-template-columns: 76px minmax(0, 1fr); }
  .pz-os__n { font-size: 68px; }

  .pz-bento { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
  .pz-bt { min-height: 400px; padding: 32px; }
  .pz-bt--a { grid-column: span 7; } .pz-bt--b { grid-column: span 5; }
  .pz-bt--c { grid-column: span 5; } .pz-bt--d { grid-column: span 7; }
  .pz-bt--e { grid-column: span 6; } .pz-bt--f { grid-column: span 6; }

  .pz-st--0 { padding-right: 16%; }
  .pz-st--1 { padding-left: 16%; }

  .pz-tony__g { grid-template-columns: 7fr 5fr; gap: 64px; align-items: center; }

  .pz-lib__h { display: grid; grid-template-columns: 6fr 6fr; gap: 56px; align-items: end; }
  .pz-lib__h .pz-lead { margin-top: 0; padding-bottom: 8px; }
  .pz-idx { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
}

/* override shop-style.css */
/* Hand-tuned shop, hub and guide pages: Enhanced Labs, Top T, Black Ox, Blue Ox, SLIN, specials, biohacking, the five hubs and the eight guides.
   Everything here is sh-*. Words come from the live pages; this file only sets how they sit. */

.sh-b { padding-block: clamp(88px, 13vw, 152px); overflow-x: clip; }
.sh-b[data-enter=sheet] { padding-top: clamp(104px, 14vw, 168px); }
.sh-say { font-weight: 600; font-size: clamp(25px, 6.4vw, 40px); line-height: 1.12; letter-spacing: -.024em; color: var(--fg); text-wrap: balance; max-width: 20em; }
.sh-say--l { font-size: clamp(27px, 7vw, 52px); line-height: 1.1; max-width: 19em; text-wrap: pretty; }
.sh-say--m { font-size: clamp(23px, 6vw, 34px); line-height: 1.16; max-width: 24em; text-wrap: pretty; }
html.no-sf .sh-say { letter-spacing: -.012em; }
.sh-help { margin-top: 18px; max-width: 40em; font-size: 16px; line-height: 1.45; letter-spacing: -.012em; color: var(--fg2); }
.sh-b .poster + .sh-say, .sh-b .poster + .actions { margin-top: clamp(24px, 4vw, 40px); }

/* ---------- product head: poster and price left, the bottle on its own tile right ---------- */
.sh-p { display: flex; align-items: center; min-height: calc(100svh + var(--radius-sheet)); padding: 108px 0 calc(var(--radius-sheet) + 40px); overflow: clip; }
.sh-p__w { display: grid; gap: 36px; }
.sh-p__h { color: var(--hot); }
.sh-p .sh-say { margin-top: 18px; }
.sh-buy { display: flex; align-items: flex-end; gap: 14px; margin-top: 28px; }
.sh-buy b { font-size: clamp(64px, 18vw, 108px); line-height: .8; color: var(--hot); }
.sh-buy span { padding-bottom: 2px; font-size: 16px; line-height: 1.35; letter-spacing: -.012em; color: var(--fg2); }
.sh-p .actions { margin-top: 28px; }
.sh-tile { position: relative; display: grid; place-items: center; aspect-ratio: 1; margin: 0; border-radius: 28px; overflow: clip; background: #fff; perspective: 1400px; }
.sh-tile--ivory { background: var(--ivory); }
.sh-tile--velvet, .sh-el__f--v { background: radial-gradient(110% 90% at 50% 26%, #691022 0%, #540A1B 40%, #3D0714 74%, #2A050E 100%); }
.sh-tile img { display: block; width: 88%; height: 88%; object-fit: contain; mix-blend-mode: multiply; }
.sh-tile img.sh-nb, img.sh-nb { mix-blend-mode: normal; }
@keyframes sh-turn { from { transform: rotateY(-38deg) scale(.86); opacity: 0; } to { transform: none; opacity: 1; } }
html.gs[data-motion=full] .sh-tile--hero img { animation: sh-turn 1.4s cubic-bezier(.2, .7, .2, 1) .2s both; }
html.gs[data-motion=lite] .sh-tile--hero img { animation: sh-turn .9s cubic-bezier(.2, .7, .2, 1) .1s both; }
@supports (animation-timeline: view()) {
  @keyframes sh-lean { to { transform: perspective(1400px) rotateX(16deg) rotateY(-12deg) translateY(-6%) scale(.92); } }
  html.gs[data-motion=full] .sh-tile--hero { animation: sh-lean linear both; animation-timeline: view(); animation-range: exit -20% exit 90%; }
}

/* ---------- what it is ---------- */
.sh-what__b { display: grid; gap: 28px; margin-top: clamp(32px, 5vw, 56px); }
.sh-num { display: flex; align-items: flex-end; gap: 14px; }
.sh-num b { font-size: clamp(150px, 42vw, 300px); line-height: .78; color: var(--hot); }
.sh-num span { padding-bottom: 6px; font-weight: 600; font-size: 20px; letter-spacing: -.016em; color: var(--fg2); }

/* ---------- split: poster holds on the left while the list scrolls ---------- */
.sh-split { display: grid; gap: clamp(36px, 6vw, 56px); }
.sh-lines { padding: 0; list-style: none; counter-reset: sh; }
.sh-lines > li { counter-increment: sh; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; align-items: baseline; padding-block: 20px 22px; border-top: 1px solid var(--line); font-weight: 600; font-size: clamp(23px, 6vw, 36px); line-height: 1.14; letter-spacing: -.022em; color: var(--fg); text-wrap: balance; }
.sh-lines > li::before { content: counter(sh, decimal-leading-zero); font-family: var(--th-poster); font-weight: 400; font-size: clamp(30px, 7.6vw, 44px); line-height: 1; color: var(--fg3, var(--hot)); }

/* ---------- made for: a stack of names that slide in from alternate sides ---------- */
.sh-stack { margin-top: clamp(28px, 5vw, 48px); padding: 0; list-style: none; }
.sh-stack li { padding-block: 8px 10px; border-top: 1px solid var(--line); }
.sh-stack .poster { display: block; font-size: clamp(46px, 12.4vw, 112px); line-height: .96; color: var(--fg); text-wrap: balance; }
.sh-stack li:nth-child(even) .poster { color: var(--fg3, var(--hot)); }
.sh-adult { margin-top: 24px; font-size: 16px; color: var(--fg2); }

/* ---------- what it supports: three tiles ---------- */
.sh-sup { display: grid; gap: 12px; margin-top: clamp(32px, 5vw, 56px); }
.sh-sup__t { display: flex; align-items: flex-end; min-height: clamp(200px, 52vw, 340px); padding: clamp(26px, 4vw, 40px); border-radius: 28px; overflow: clip; background: var(--bg); color: var(--fg); }
.sh-sup__t[data-theme=velvet] { background: radial-gradient(120% 100% at 40% 20%, #691022 0%, #540A1B 45%, #3D0714 100%); }
.sh-sup__t p { font-weight: 600; font-size: clamp(26px, 6.6vw, 38px); line-height: 1.1; letter-spacing: -.022em; text-wrap: balance; }

/* ---------- Black Ox or Blue Ox ---------- */
.sh-vs__g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-block: clamp(32px, 5vw, 56px); }
.sh-vs__t { display: flex; flex-direction: column; gap: 8px; min-height: clamp(280px, 70vw, 460px); padding: clamp(22px, 4vw, 40px); border-radius: 28px; background: var(--bg); color: var(--fg); text-decoration: none; }
.sh-vs__t[data-theme=velvet] { background: radial-gradient(120% 100% at 40% 20%, #691022 0%, #540A1B 45%, #3D0714 100%); }
.sh-vs__t b { font-size: clamp(120px, 34vw, 300px); line-height: .8; color: var(--hot); }
.sh-vs__n { margin-top: auto; font-family: var(--th-poster); text-transform: uppercase; font-size: clamp(34px, 9vw, 64px); line-height: .95; }
.sh-vs__i { font-size: 16px; color: var(--fg2); }
.sh-vs__t .lv-go { padding-top: 6px; }

/* ---------- the code ---------- */
.sh-code__w { margin-block: 18px 8px; color: var(--hot); }
.sh-code .actions { margin-top: 28px; }
.sh-fine { display: grid; gap: 14px; margin-top: clamp(48px, 7vw, 80px); padding-top: 24px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.5; letter-spacing: -.01em; color: var(--fg2); }
.sh-fine a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Enhanced Labs ---------- */
.sh-el__h { color: var(--fg); }
.sh-el__code { color: var(--fg3); }
.sh-el__g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sh-el__t { display: flex; flex-direction: column; border-radius: 28px; overflow: clip; background: var(--bg); color: var(--fg); text-decoration: none; }
.sh-el__t[data-theme=velvet] { background: var(--velvet-edge); }
.sh-el__f { display: grid; place-items: center; aspect-ratio: 1; overflow: clip; background: #fff; }
.sh-el__t[data-theme=ivory] .sh-el__f { background: var(--ivory); }
.sh-el__f.sh-el__f--v { background: radial-gradient(110% 90% at 50% 26%, #691022 0%, #540A1B 40%, #3D0714 74%, #2A050E 100%); }
.sh-elh .ih__l { max-width: 26em; font-size: clamp(21px, 5.6vw, 34px); line-height: 1.16; }
.sh-el__f img { display: block; width: 84%; height: 84%; object-fit: contain; mix-blend-mode: multiply; }
.sh-el__f img.sh-nb { mix-blend-mode: normal; }
.sh-el__b { display: flex; flex-direction: column; gap: 4px; padding: 6px 20px 22px; }
.sh-el__b b { font-size: clamp(40px, 10.6vw, 64px); line-height: .92; }

/* ---------- hub heads and the ribbon of names ---------- */
.sh-hh .ih__l { max-width: 24em; font-size: clamp(19px, 5vw, 24px); line-height: 1.3; letter-spacing: -.014em; text-wrap: pretty; }
.sh-rib { overflow: clip; padding-block: clamp(36px, 6vw, 72px); background: var(--bg); }
.sh-rib__r { display: flex; gap: .3em; width: max-content; padding-inline: var(--gutter); font-size: clamp(88px, 24vw, 220px); line-height: .9; white-space: nowrap; color: var(--fg); }
.sh-rib__r span:nth-child(even) { color: var(--fg3, var(--hot)); }
.sh-rib__r--2 { margin-top: .04em; color: var(--fg3, var(--hot)); }
.sh-rib__r--2 span:nth-child(even) { color: var(--fg); }

/* rows: League Gothic title, one sentence, read */
.sh-rows { display: grid; }
.sh-a, .sh-gi, .sh-bkr, .sh-lx { color: var(--fg); text-decoration: none; border-top: 1px solid var(--line); }
.sh-a { display: grid; gap: 10px; padding-block: 26px 30px; }
.sh-a h3, .sh-gi h3, .sh-tl h3 { font-family: var(--th-poster); font-weight: 400; text-transform: uppercase; color: var(--fg); text-wrap: balance; }
.sh-a h3 { font-size: clamp(34px, 9vw, 54px); line-height: .96; }
.sh-a p, .sh-tl p, .sh-gi p, .sh-bkr p, .sh-lx p { font-size: 17px; line-height: 1.45; letter-spacing: -.012em; color: var(--fg2); text-wrap: pretty; max-width: 40em; }
html.no-sf .sh-a p, html.no-sf .sh-tl p, html.no-sf .sh-gi p, html.no-sf .sh-bkr p, html.no-sf .sh-lx p { letter-spacing: 0; }
.sh-a .lv-go, .sh-gi .lv-go, .sh-bkr .lv-go, .sh-lx .lv-go { margin-top: 0; padding-top: 2px; }

.sh-tls { display: grid; gap: 12px; margin-top: clamp(32px, 5vw, 56px); }
.sh-tl { display: flex; flex-direction: column; gap: 14px; min-height: 280px; padding: clamp(24px, 3.4vw, 40px); border-radius: 28px; background: var(--bg); color: var(--fg); text-decoration: none; }
.sh-tl[data-theme=velvet] { background: radial-gradient(120% 100% at 30% 10%, #691022 0%, #540A1B 45%, #3D0714 100%); }
.sh-tl h3 { font-size: clamp(36px, 9.4vw, 52px); line-height: .96; overflow-wrap: normal; hyphens: manual; }
.sh-tl .lv-go { margin-top: auto; padding-top: 8px; }

.sh-gis { margin-top: clamp(32px, 5vw, 56px); }
.sh-gi { display: grid; gap: 14px; padding-block: 28px 32px; }
.sh-gi h3 { font-size: clamp(40px, 10.6vw, 72px); line-height: .94; }
.sh-gi > div { display: grid; gap: 12px; align-content: start; justify-items: start; }

.sh-bkrs { display: grid; column-gap: 48px; margin-top: clamp(32px, 5vw, 56px); }
.sh-bkr { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 20px; align-items: start; padding-block: 24px 28px; perspective: 900px; }
.sh-bkr__b { display: grid; gap: 8px; justify-items: start; }
.sh-bkr h3, .sh-lx h3 { font-weight: 600; font-size: clamp(21px, 5.4vw, 26px); line-height: 1.14; letter-spacing: -.018em; color: var(--fg); text-wrap: balance; }
.sh-cv { position: relative; display: flex; flex-direction: column; align-items: center; aspect-ratio: 2 / 3; padding: 11% 8% 8%; container-type: inline-size; border-radius: 3px 7px 7px 3px; text-align: center; transform: rotateY(-18deg); transform-origin: 0 50%; transition: transform .7s var(--spring); box-shadow: inset 6px 0 8px -5px rgba(0, 0, 0, .4), 10px 18px 28px -16px rgba(13, 3, 6, .55); }
.sh-cv--velvet { background: var(--velvet-lit); color: #fff; }
.sh-cv--ink { background: var(--ink); color: #fff; }
.sh-cv--ivory { background: #fff; color: var(--burgundy); }
.sh-cv--titan { background: var(--titanium); color: var(--on-light-1); }
.sh-cv__a { font-weight: 600; font-size: max(8px, 9cqw); letter-spacing: -.01em; }
.sh-cv__t { margin-block: auto; max-width: 100%; font-size: calc(var(--s, .16) * 148cqw); line-height: 1; overflow-wrap: anywhere; }
.sh-cv .sig { width: 54%; }

.sh-lxs { margin-top: clamp(32px, 5vw, 56px); }
.sh-lx { display: grid; gap: 10px; padding-block: 22px 30px; }
.sh-lx__w { font-size: clamp(76px, 21vw, 176px); line-height: .84; color: var(--hot); }
.sh-lx__b { display: grid; gap: 8px; justify-items: start; }

.sh-all .ln + .ln { color: var(--fg3, var(--hot)); }
.sh-all .actions { margin-top: clamp(28px, 4vw, 44px); }
.sh-all .btn { max-width: 100%; white-space: normal; text-align: left; }

@media (hover: hover) and (pointer: fine) {
  .sh-a:hover h3, .sh-gi:hover h3, .sh-bkr:hover h3, .sh-lx:hover h3, .sh-mo__r > a:hover b { color: var(--hot); }
  .sh-a:hover .lv-go i, .sh-gi:hover .lv-go i, .sh-tl:hover .lv-go i, .sh-bkr:hover .lv-go i, .sh-lx:hover .lv-go i, .sh-el__t:hover .lv-go i, .sh-vs__t:hover .lv-go i { transform: translate(3px, -3px); }
  .sh-bkr:hover .sh-cv { transform: rotateY(-34deg); }
  .sh-tl, .sh-el__t, a.sh-vs__t { transition: transform .5s var(--spring); }
  .sh-tl:hover, .sh-el__t:hover, a.sh-vs__t:hover { transform: translateY(-4px); }
}

/* ---------- guides: count, intro, then every article by month ---------- */
.sh-gh .sh-gh__k { color: var(--fg3, var(--fg2)); }
.sh-in__w { display: grid; gap: clamp(36px, 6vw, 56px); }
.sh-in__n b { display: block; font-size: clamp(150px, 44vw, 320px); line-height: .8; color: var(--hot); }
.sh-in__n span { display: block; margin-top: 18px; font-weight: 600; font-size: clamp(21px, 5.4vw, 26px); line-height: 1.2; letter-spacing: -.018em; color: var(--fg); }
.sh-in__n small { display: block; margin-top: 6px; font-size: 15px; color: var(--fg2); }
.sh-gd__bar { display: grid; gap: 14px; margin-top: clamp(28px, 4vw, 44px); }
.sh-gd .srch { width: 100%; max-width: 640px; }
.sh-gd .srch input { color: var(--fg); }
.sh-gd .chips { flex-wrap: wrap; overflow: visible; margin-top: 0; }
.sh-gd .chip { color: var(--fg); }
.sh-gd .lv-count:empty { display: none; }
.sh-mo { display: grid; gap: 6px; padding-top: clamp(32px, 5vw, 56px); }
.sh-mo[hidden], .sh-mo__r > [hidden] { display: none; }
.sh-mo h3 { font-size: clamp(52px, 14vw, 96px); line-height: .9; color: var(--hot); }
.sh-mo__r { display: grid; }
.sh-mo__r > * { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding-block: 15px 16px; border-top: 1px solid var(--line); color: var(--fg); text-decoration: none; }
.sh-mo__r b { font-weight: 600; font-size: clamp(18px, 4.7vw, 20px); line-height: 1.28; letter-spacing: -.014em; text-wrap: pretty; }
.sh-mo__r small { flex: none; font-size: 14px; color: var(--fg2); font-variant-numeric: tabular-nums; }
.sh-gd__more { justify-content: center; margin-top: 48px; }
.sh-gd__more[hidden], .sh-gd__none[hidden] { display: none; }
.sh-gd__none { margin-top: 32px; }

/* ---------- biohacking ---------- */
.sh-qt { margin: 0; }
.sh-qt footer { margin-top: 32px; }
.sh-qt .sig { width: min(260px, 56vw); color: var(--hot); }
.sh-hubs { display: grid; gap: 12px; margin-top: clamp(32px, 5vw, 56px); }
.sh-hubs .hub { width: auto; min-height: 220px; border-radius: 28px; }
.sh-get { margin-top: clamp(64px, 9vw, 112px); }
.sh-get .sh-lines { margin-top: 20px; }
.sh-sp { margin-top: 22px; color: var(--fg2); }
.sh-coach__p { margin-top: 28px; max-width: 640px; }
.sh-tiers { display: grid; gap: 12px; margin-top: clamp(40px, 6vw, 64px); }
.sh-tier { display: flex; flex-direction: column; padding: clamp(26px, 4vw, 44px); border-radius: 28px; background: var(--bg); color: var(--fg); }
.sh-tier[data-theme=velvet] { background: radial-gradient(120% 100% at 30% 10%, #691022 0%, #540A1B 45%, #3D0714 100%); }
.sh-tier h3 { font-size: clamp(44px, 11vw, 72px); line-height: .92; color: var(--fg); }
.sh-tier__len { margin-top: 8px; font-weight: 600; font-size: 20px; letter-spacing: -.016em; color: var(--fg2); }
.sh-tier__p { display: flex; align-items: flex-end; gap: 12px; margin-block: 28px 20px; }
.sh-tier__p b { font-size: clamp(88px, 24vw, 140px); line-height: .8; color: var(--hot); }
.sh-tier__p span { padding-bottom: 4px; font-size: 16px; color: var(--fg2); }
.sh-tier .lv-ul { font-size: 18px; }
.sh-tier .actions { margin-top: auto; padding-top: 28px; }

@media (min-width: 700px) {
  .sh-sup--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sh-sup--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sh-tls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sh-tls > :first-child { grid-column: 1 / -1; }
  .sh-hubs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .sh-p__w { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: 64px; }
  .sh-tile { border-radius: 32px; }
  .sh-what__b:has(.sh-num) { grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 56px; }
  .sh-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
  .sh-split__h { position: sticky; top: 112px; }
  .sh-stack li:nth-child(even) { text-align: right; }
  .sh-fine { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
  .sh-el__g { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .sh-tls--bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sh-tls--bento > .sh-tl--w2 { grid-column: span 2; }
  .sh-tls--bento > .sh-tl--w3 { grid-column: span 3; }
  .sh-tls--bento > .sh-tl--w4 { grid-column: span 4; }
  .sh-tl--w4 h3 { font-size: 76px; }
  .sh-tl--w3 h3 { font-size: 60px; }
  .sh-tl--w2 h3 { font-size: 38px; }
  .sh-tls--bento .sh-tl { min-height: 360px; }
  .sh-gi { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 48px; align-items: start; }
  .sh-gi > div { padding-top: 8px; }
  .sh-bkrs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sh-bkr { grid-template-columns: 116px minmax(0, 1fr); gap: 24px; }
  .sh-lx { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 40px; align-items: end; }
  .sh-lx__w { font-size: 128px; }
  .sh-lx--nw .sh-lx__b { grid-column: 2; }
  .sh-in__w { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end; gap: 64px; }
  .sh-mo { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; align-items: start; }
  .sh-mo h3 { position: sticky; top: 112px; }
  .sh-hubs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sh-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .sh-tile--hero, .sh-tile--hero img { animation: none !important; }
  .sh-cv { transition: none; }
}