/* leonandvera.com — the studio's stylesheet. Tokens from the brand system (26 Oct 2026, https://claude.ai/artifact/3EedFzKsKxp4eYUHhA2N5X);
   every value on the site comes from the :root block. Strict CSP: no inline styles anywhere, everything here. */

/* 1 Fonts: Geist and Geist Mono, SIL Open Font License, self-hosted. Latin first, Latin Extended on demand. */
@font-face { font-family: "Geist"; src: url("/fonts/geist-latin-variable.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist"; src: url("/fonts/geist-latin-ext-variable.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist Mono"; src: url("/fonts/geist-mono-latin-variable.woff2") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist Mono"; src: url("/fonts/geist-mono-latin-ext-variable.woff2") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* 2 Tokens. Clear is the page; Deep is where the studio speaks (hero, manifesto, corrections, footer). */
:root, [data-theme="clear"] {
  --surface: #FFFFFF; --surface-raised: #F2F2EF; --ink: #0B0B0C; --text: #3A3A3C; --text-muted: #6B6B70; --line: #D9D9D5;
  --signal: #FF2D95; --on-signal: #0B0B0C; --button: #0B0B0C; --on-button: #FFFFFF; --focus: #0B0B0C;
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --page-max: 1280px; --gutter: clamp(16px, 5.5vw, 80px);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  color-scheme: light;
}
[data-theme="deep"] {
  --surface: #0B0B0C; --surface-raised: #161618; --ink: #FFFFFF; --text: #FFFFFF; --text-muted: #A1A1A6; --line: #2A2A2D;
  --signal: #FF2D95; --on-signal: #0B0B0C; --button: #FFFFFF; --on-button: #0B0B0C; --focus: #FFFFFF;
  color-scheme: dark;
}

/* 3 Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--surface); color: var(--ink); font-family: var(--font-sans); font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
h1, h2, h3, h4 { text-wrap: balance; font-weight: 600; }
p { text-wrap: pretty; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 4px; }
img, video, svg { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
[data-theme] { background: var(--surface); color: var(--ink); }
.skip { position: absolute; left: 16px; top: -64px; z-index: 50; background: var(--signal); color: var(--on-signal); padding: 10px 14px; border-radius: 6px; font-weight: 500; text-decoration: none; }
.skip:focus { top: 16px; }
.mono { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; line-height: 1.7; }
.eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.kicker { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em; color: var(--text-muted); }
.wrap { max-width: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(64px, 6.6vw, 96px); }
.section--tight { padding-block: clamp(40px, 4.4vw, 64px); }
.section--tall { padding-block: clamp(72px, 7.8vw, 112px); }
.bone { background: var(--surface-raised); }
.stack { display: flex; flex-direction: column; gap: 40px; }
.stack--s { gap: 24px; }
.head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 40px; flex-wrap: wrap; }
.h-display { font-size: clamp(40px, 7.2vw, 104px); letter-spacing: -0.05em; line-height: 0.98; }
.h-display-l { font-size: clamp(30px, 3.9vw, 56px); font-weight: 500; letter-spacing: -0.04em; line-height: 1.05; }
.h-headline { font-size: clamp(30px, 3.4vw, 48px); letter-spacing: -0.045em; line-height: 1.02; max-width: 20ch; }
.h-title { font-size: 28px; letter-spacing: -0.035em; line-height: 1.05; }
.h-section { font-size: clamp(22px, 2.6vw, 28px); letter-spacing: -0.035em; line-height: 1.1; }
.lead { font-size: clamp(18px, 1.8vw, 26px); line-height: 1.35; color: var(--text); max-width: 34ch; }
.body-l { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; color: var(--text-muted); }
.note { font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.wm { font-weight: 600; letter-spacing: -0.05em; line-height: 1; white-space: nowrap; text-decoration: none; color: var(--ink); }
.wm .amp { font-weight: 400; color: var(--signal); margin-inline: 0.1em; }
.lockup { display: inline-flex; flex-direction: column; line-height: 1; }
.lockup .claim { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 0.255em; letter-spacing: 0.02em; line-height: 1; color: var(--text-muted); padding-left: 0.2757em; margin-right: -0.3945em; white-space: nowrap; }

/* 4 Buttons and links */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding-inline: 22px; border-radius: 6px; font-weight: 500; font-size: 16px; text-decoration: none; border: 1px solid transparent; background: none; cursor: pointer; transition: background-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease), border-color 0.25s var(--ease); }
.btn--primary { background: var(--signal); color: var(--on-signal); border-color: var(--signal); }
.btn--primary:hover { background: color-mix(in srgb, var(--signal) 88%, var(--ink)); border-color: color-mix(in srgb, var(--signal) 88%, var(--ink)); }
.btn--secondary { border-color: var(--button); color: var(--ink); }
.btn--secondary:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.btn:active { transform: translateY(1px); }
.link { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.02em; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; transition: text-underline-offset 0.2s var(--ease), text-decoration-color 0.2s var(--ease); }
.link:hover { text-underline-offset: 6px; text-decoration-color: var(--signal); }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* 5 The certainty mark */
.mark { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; color: var(--ink); line-height: 1.5; }
.mark__label { padding: 3px 7px; border-radius: 4px; font-weight: 500; text-transform: uppercase; border: 1px solid var(--ink); background: var(--ink); color: var(--surface); }
.mark__label--real { background: var(--surface); color: var(--ink); }
.mark__label--unknown { background: var(--surface-raised); color: var(--ink); border-style: dashed; border-color: var(--text-muted); }
.mark__dot { color: var(--text-muted); }
.meter { display: inline-flex; gap: 3px; }
.meter i { display: block; width: 12px; height: 9px; background: var(--signal); transform-origin: left center; }
.meter i.off { background: transparent; border: 1px solid var(--ink); }
.figure { position: relative; overflow: hidden; border-radius: 12px; background: #0B0B0C; color: #FFFFFF; }
.figure img { width: 100%; height: 100%; object-fit: cover; }
.figure .mark { position: absolute; left: 20px; right: 20px; bottom: 16px; color: #FFFFFF; }
.figure .mark__label { background: #FFFFFF; color: #0B0B0C; border-color: #FFFFFF; }
.figure .mark__dot { color: #A1A1A6; }
.figure .meter i.off { border-color: #FFFFFF; }

/* 6 Header */
.hd { position: sticky; top: 0; z-index: 20; background: var(--surface); border-bottom: 1px solid var(--line); }
.hd--over { position: fixed; left: 0; right: 0; background: transparent; border-bottom-color: transparent; }
.hd__in { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.hd .wm { font-size: 22px; letter-spacing: -0.045em; }
.nav { display: flex; gap: clamp(16px, 2.4vw, 32px); font-size: 15px; font-weight: 500; }
.nav a { text-decoration: none; white-space: nowrap; color: var(--ink); opacity: 0.92; transition: opacity 0.2s var(--ease); position: relative; padding-block: 4px; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a:hover { opacity: 1; }
.menu { display: none; }
@media (max-width: 860px) {
  .nav { display: none; }
  .menu { display: block; position: relative; }
  .menu summary { list-style: none; cursor: pointer; font-size: 15px; font-weight: 500; padding: 10px 0 10px 12px; display: flex; align-items: center; gap: 8px; }
  .menu summary::-webkit-details-marker { display: none; }
  .menu summary::before { content: ""; width: 18px; height: 2px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; }
  .menu[open] summary::before { box-shadow: none; transform: rotate(45deg); }
  .menu__list { position: absolute; right: 0; top: calc(100% + 8px); min-width: 240px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; box-shadow: 0 20px 40px rgba(11, 11, 12, 0.18); }
  .menu__list a { text-decoration: none; padding: 12px 14px; border-radius: 8px; font-weight: 500; font-size: 16px; color: var(--ink); }
  .menu__list a:hover, .menu__list a[aria-current="page"] { background: var(--surface-raised); }
}

/* 7 Hero */
.hero { position: relative; overflow: hidden; min-height: clamp(560px, 58vw, 840px); display: flex; flex-direction: column; justify-content: flex-end; padding-top: 136px; padding-bottom: clamp(28px, 4.4vw, 64px); }
.hero__media { position: absolute; inset: 0; }
.hero__media img, .hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 74% 50%; }
.hero__media video { opacity: 0; transition: opacity 1.2s var(--ease); }
.hero__media video.is-playing { opacity: 1; }
.hero__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 11, 12, 0.94) 0%, rgba(11, 11, 12, 0.78) 42%, rgba(11, 11, 12, 0.12) 100%); }
.hero__loop { position: absolute; top: 96px; right: var(--gutter); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; display: flex; align-items: center; gap: 10px; color: #FFFFFF; }
.hero__loop i { width: 8px; height: 8px; border-radius: 4px; background: var(--signal); display: inline-block; }
.hero__in { position: relative; display: flex; flex-direction: column; gap: clamp(16px, 2.2vw, 32px); max-width: 1180px; }
.hero h1 { max-width: 1100px; }
.hero .lead { color: #FFFFFF; max-width: 720px; }
.hero .mark { margin-top: 8px; }
.hero .mark__label { background: #FFFFFF; color: #0B0B0C; border-color: #FFFFFF; }
@media (max-width: 760px) { .hero .mark__long, .hero .mark__dot, .hero__loop { display: none; } .hero .mark { gap: 8px 12px; } }
.hero .meter i.off { border-color: #FFFFFF; }
@media (max-width: 760px) {
  .hero__scrim { background: linear-gradient(180deg, rgba(11, 11, 12, 0.35) 0%, rgba(11, 11, 12, 0.92) 60%); }
  .hero__loop { top: 88px; right: auto; left: var(--gutter); }
  .hero__media img, .hero__media video { object-position: 68% 30%; }
}
.strip { display: flex; gap: 12px 40px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); padding-bottom: 28px; border-bottom: 1px solid var(--line); }

/* 8 Tiles */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1000px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .tiles { grid-template-columns: 1fr; } }
.tile { background: var(--surface-raised); color: var(--ink); border-radius: 12px; padding: 28px; min-height: 230px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; text-decoration: none; transition: transform 0.35s var(--ease), background-color 0.35s var(--ease); }
.tile:hover { transform: translateY(-3px); background: color-mix(in srgb, var(--surface-raised) 92%, var(--ink)); }
.tile__t { font-size: 28px; font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; }
.tile__d { font-size: 15px; color: var(--text); line-height: 1.45; }
.tile .mono { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.tile__go { display: inline-flex; align-items: center; gap: 6px; }
.tile__go::after { content: "→"; transition: transform 0.3s var(--ease); }
.tile:hover .tile__go::after { transform: translateX(4px); }

/* 9 Steps */
.steps { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.steps::before { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 100%; background: var(--ink); transform-origin: left; }
.steps > div { padding: 24px 20px 0 0; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.steps > div:not(:first-child) { padding-left: 20px; }
.steps > div:last-child { border-right: 0; }
.steps .t { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.steps .d { font-size: 14px; color: var(--text); line-height: 1.45; }
@media (max-width: 1000px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } .steps > div:nth-child(3) { border-right: 0; } .steps > div:nth-child(4) { padding-left: 0; } .steps > div:nth-child(n+4) { padding-top: 32px; } }
@media (max-width: 640px) { .steps { grid-template-columns: 1fr; } .steps > div { border-right: 0; border-bottom: 1px solid var(--line); padding: 20px 0; } .steps > div:not(:first-child) { padding-left: 0; } }

/* 10 Principles, about, corrections */
.principles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 48px; font-size: 17px; line-height: 1.5; color: var(--text); }
.principles strong { color: var(--ink); font-weight: 600; }
@media (max-width: 760px) { .principles { grid-template-columns: 1fr; } }
.about { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: clamp(32px, 4.4vw, 64px); align-items: center; }
@media (max-width: 900px) { .about { grid-template-columns: 1fr; } }
.photo { max-width: 480px; display: flex; flex-direction: column; gap: 12px; }
.photo img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; background: #0B0B0C; }
.worked { display: flex; flex-direction: column; border-top: 1px solid var(--ink); }
.worked__row { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 8px 32px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.worked__row p { font-size: 16px; line-height: 1.55; color: var(--text); max-width: 68ch; }
.worked__row .mono { font-size: 13px; line-height: 1.6; }
@media (max-width: 760px) { .worked__row { grid-template-columns: 1fr; } }
.quote { font-size: clamp(24px, 2.6vw, 36px); font-weight: 500; letter-spacing: -0.035em; line-height: 1.15; }
.corr { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.02em; overflow-x: auto; }
.corr table { border-collapse: collapse; width: 100%; min-width: 760px; }
.corr th { text-align: left; font-weight: 400; color: var(--text-muted); padding: 12px 20px 12px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.corr td { padding: 16px 20px 16px 0; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--text-muted); }
.corr td.has { color: var(--ink); }

/* 11 Footer */
.ft { border-top: 1px solid var(--line); padding-block: 56px 48px; display: flex; flex-direction: column; gap: 40px; color: var(--text-muted); }
.ft__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; flex-wrap: wrap; }
.ft .lockup { font-size: 32px; text-decoration: none; }
.ft .lockup .claim { text-decoration: none; }
.ft__links { display: grid; grid-template-columns: repeat(3, auto); gap: 12px 40px; font-size: 15px; }
.ft__links a { color: var(--ink); text-decoration: none; }
.ft__links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.ft__bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 13px; }
@media (max-width: 520px) { .ft__links { grid-template-columns: repeat(2, auto); } }

/* 12 Inner pages */
.page-head { padding-top: 136px; padding-bottom: clamp(48px, 5vw, 80px); }
.page-head .stack { gap: 20px; max-width: 900px; }
.page-head .lead { max-width: 46ch; color: var(--text-muted); }
.prose { font-size: 17px; line-height: 1.6; color: var(--text); max-width: 68ch; display: flex; flex-direction: column; gap: 16px; }
.prose h2 { color: var(--ink); font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -0.035em; line-height: 1.1; margin-top: 24px; }
.prose h3 { color: var(--ink); font-size: 20px; letter-spacing: -0.02em; margin-top: 8px; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose em { color: var(--ink); }
.prose ul, .prose ol { padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.prose .mono { color: var(--text); }
.prose a { color: var(--ink); }
.prose blockquote { border-left: 2px solid var(--signal); padding-left: 20px; color: var(--ink); font-size: 20px; line-height: 1.4; }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 64px; align-items: start; }
@media (max-width: 860px) { .two { grid-template-columns: 1fr; } }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 20px; }
.cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cards--4 { grid-template-columns: 1fr; } }
.card { background: var(--surface-raised); border-radius: 12px; padding: 28px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.card h3 { font-size: 20px; letter-spacing: -0.02em; }
.card p { font-size: 15px; line-height: 1.5; color: var(--text); }
.card .mono { font-size: 12px; color: var(--text-muted); }
.rules { display: flex; flex-direction: column; border-top: 1px solid var(--ink); }
.rules > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 12px 40px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.rules h3 { font-size: 20px; letter-spacing: -0.02em; }
.rules p { font-size: 15px; line-height: 1.5; color: var(--text); }
.rules .mono { font-size: 12px; color: var(--text-muted); display: block; margin-top: 6px; }
@media (max-width: 760px) { .rules > div { grid-template-columns: 1fr; } }
.tbl { overflow-x: auto; }
.tbl table { border-collapse: collapse; width: 100%; font-size: 15px; line-height: 1.45; color: var(--text); }
.tbl th { text-align: left; font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--text-muted); padding: 8px 16px 8px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.tbl td { padding: 10px 16px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl td:first-child { color: var(--ink); font-weight: 500; }
.show { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px 64px; padding-block: 40px; border-top: 1px solid var(--line); align-items: start; }
.show:first-of-type { border-top: 1px solid var(--ink); }
.show h2 { font-size: clamp(28px, 3.2vw, 40px); letter-spacing: -0.04em; line-height: 1.02; }
.show .prose { font-size: 16px; }
.show__meta { display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 860px) { .show { grid-template-columns: 1fr; } }
.manifesto { display: flex; flex-direction: column; gap: 28px; max-width: 760px; font-size: clamp(20px, 2vw, 26px); line-height: 1.45; color: var(--text-muted); }
.manifesto p:first-child { color: var(--ink); font-size: clamp(32px, 4.2vw, 64px); font-weight: 500; letter-spacing: -0.04em; line-height: 1.02; }
.manifesto p.sign { color: var(--ink); font-weight: 500; }
.contact { display: inline-flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.contact code { font-family: var(--font-mono); font-size: 15px; letter-spacing: 0.02em; color: var(--ink); user-select: all; }
.nf { min-height: 70vh; display: flex; align-items: center; }

/* 13 Motion. Calm, and only where it explains; everything here is progressive and off with prefers-reduced-motion. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 160ms var(--ease) both vt-out; }
::view-transition-new(root) { animation: 240ms var(--ease) both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(6px); } }
.hd .wm { view-transition-name: wordmark; }
::view-transition-group(wordmark) { animation-duration: 240ms; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 32%; }
    .reveal--late { animation-range: entry 8% entry 45%; }
    .meter--live i { animation: fill linear both; animation-timeline: view(); animation-range: entry 20% entry 60%; }
    .meter--live i:nth-child(2) { animation-range: entry 30% entry 70%; }
    .meter--live i:nth-child(3) { animation-range: entry 40% entry 80%; }
    .meter--live i:nth-child(4) { animation-range: entry 50% entry 90%; }
    .steps::before { animation: draw linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    .hd--over { animation: hd-solid linear both; animation-timeline: scroll(root); animation-range: 0 160px; }
  }
  .hero .mark { animation: fade 0.8s var(--ease) 0.4s both; }
  @media (min-width: 761px) { .hero .mark { animation: type 1.1s steps(44, end) 0.5s both; } }
  .hero .mark .meter i { animation: fill 0.4s var(--ease) both; }
  .hero .mark .meter i:nth-child(1) { animation-delay: 1.5s; } .hero .mark .meter i:nth-child(2) { animation-delay: 1.65s; } .hero .mark .meter i:nth-child(3) { animation-delay: 1.8s; } .hero .mark .meter i:nth-child(4) { animation-delay: 1.95s; }
}
@keyframes reveal { from { opacity: 0.2; transform: translateY(18px); } }
@keyframes fill { from { transform: scaleX(0); } }
@keyframes draw { from { transform: scaleX(0); } }
@keyframes fade { from { opacity: 0; } }
@keyframes type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes hd-solid { to { background: color-mix(in srgb, #0B0B0C 82%, transparent); border-bottom-color: #2A2A2D; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } }
@supports not (animation-timeline: view()) { .hd--over { background: color-mix(in srgb, #0B0B0C 72%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .tile, .btn, .nav a::after, .link { transition: none; }
}
@media print { .hd, .ft, .hero__media video, .skip { display: none; } .hero { min-height: 0; padding-top: 24px; } }

/* 14 The pipeline rail: seven stages, five gates on the rail (26 Oct 2026) */
.pipe { list-style: none; margin: 0; padding: 72px 0 0; position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0 20px; }
.pipe::before, .pipe::after { content: ""; position: absolute; left: 0; right: 0; top: 36px; height: 2px; background: var(--line); }
.pipe::after { background: var(--ink); transform-origin: left; }
.st { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.st::before { content: ""; position: absolute; left: 0; top: -43px; width: 14px; height: 14px; background: var(--ink); }
.st__n { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.st__t { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.st__d { font-size: 14px; line-height: 1.5; color: var(--text); }
.who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 6px; font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.chip { display: inline-block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; padding: 4px 7px; border-radius: 4px; background: var(--ink); color: var(--surface); border: 1px solid var(--ink); }
.chip--ai { background: transparent; color: var(--ink); }
.st--gate::after { content: attr(data-gate); position: absolute; right: -10px; top: -78px; transform: translateX(50%); white-space: nowrap; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); padding-top: 36px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Crect width='28' height='28' rx='6' fill='%230B0B0C'/%3E%3Cpath d='M8 14.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center top / 28px 28px; text-align: center; }
.st--gate::after { top: -50px; padding-top: 34px; }
@media (max-width: 1000px) {
  .pipe { grid-template-columns: 1fr; gap: 32px; padding: 0 0 0 36px; }
  .pipe::before, .pipe::after { left: 6px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; transform-origin: top; }
  .st::before { left: -37px; top: 4px; }
  .st--gate::after { position: static; transform: none; display: inline-flex; align-items: center; gap: 10px; padding: 0 0 0 38px; min-height: 28px; background-position: left center; text-align: left; margin-top: 10px; white-space: normal; }
}
/* 15 The eight rules as cards */
.rules8 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1000px) { .rules8 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .rules8 { grid-template-columns: 1fr; } }
.rule { background: var(--surface); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 12px; border: 1px solid transparent; transition: border-color 0.3s var(--ease), transform 0.35s var(--ease); min-width: 0; }
.rule:hover { border-color: var(--ink); transform: translateY(-3px); }
.rule__n { font-size: 40px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; color: var(--line); transition: color 0.3s var(--ease); }
.rule:hover .rule__n { color: var(--ink); }
.rule__t { font-size: 19px; letter-spacing: -0.02em; line-height: 1.2; }
.rule p { font-size: 14px; line-height: 1.5; color: var(--text); }
/* 16 Character tiles and portraits */
.tile--show { padding: 0; overflow: hidden; gap: 0; }
.tile__img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; display: block; background: var(--surface-raised); transition: transform 0.6s var(--ease); }
.tile--show:hover .tile__img { transform: scale(1.03); }
.tile__body { padding: 24px 28px 28px; display: flex; flex-direction: column; gap: 20px; flex: 1; justify-content: space-between; }
.tile__imgwrap { overflow: hidden; }
.show { grid-template-columns: minmax(0, 260px) minmax(0, 1.1fr) minmax(0, 1fr); }
.portrait { display: flex; flex-direction: column; gap: 10px; }
.portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; border-radius: 12px; background: var(--surface-raised); }
.portrait .mark { font-size: 11px; }
@media (max-width: 860px) { .show { grid-template-columns: 1fr; } .portrait { max-width: 320px; } }
/* 17 More motion, all progressive: the reading line, the headline's words, the manifesto's words, the legend popover */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: #FFFFFF; transform-origin: left; transform: scaleX(0); z-index: 30; pointer-events: none; }
.rise .wc { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.rise .w { display: inline-block; }
.words .w { display: inline; }
.mark__how { all: unset; display: inline-flex; align-items: center; gap: 10px; cursor: help; border-bottom: 1px dotted currentColor; padding-bottom: 1px; }
.mark__how:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.legend { position: fixed; inset: auto; margin: 0; width: min(400px, calc(100vw - 32px)); background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; box-shadow: 0 24px 48px rgba(11, 11, 12, 0.35); font-size: 14px; line-height: 1.5; display: none; }
.legend:popover-open { display: flex; flex-direction: column; gap: 10px; }
.legend ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.legend li { display: grid; grid-template-columns: 66px 1fr; gap: 12px; align-items: baseline; color: var(--text); }
.legend .meter i.off { border-color: var(--ink); }
.legend p { color: var(--text-muted); font-size: 13px; }
@supports (anchor-name: --a) { .mark__how--hero { anchor-name: --how-hero; } .legend--hero { position-anchor: --how-hero; top: anchor(bottom); left: anchor(left); margin-top: 10px; position-try-fallbacks: flip-block; } }
@supports not (anchor-name: --a) { .legend { top: 50%; left: 50%; transform: translate(-50%, -50%); } }
@media (prefers-reduced-motion: no-preference) {
  .rise .w { animation: rise 0.7s var(--ease) both; }
  .rise .wc:nth-child(2) .w { animation-delay: 0.06s; } .rise .wc:nth-child(3) .w { animation-delay: 0.12s; } .rise .wc:nth-child(4) .w { animation-delay: 0.18s; } .rise .wc:nth-child(5) .w { animation-delay: 0.24s; } .rise .wc:nth-child(6) .w { animation-delay: 0.3s; } .rise .wc:nth-child(7) .w { animation-delay: 0.36s; }
  .legend:popover-open { animation: legend-in 0.25s var(--ease); }
  @supports (animation-timeline: view()) {
    .progress { animation: grow linear both; animation-timeline: scroll(root); }
    .pipe::after { animation: draw linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    .st::before { animation: pop linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
    .st--gate::after { animation: pop linear both; animation-timeline: view(); animation-range: entry 10% entry 60%; }
    .words .w { animation: wordin linear both; animation-timeline: view(); }
    .words .w:nth-child(1) { animation-range: entry 10% entry 30%; } .words .w:nth-child(2) { animation-range: entry 13% entry 33%; } .words .w:nth-child(3) { animation-range: entry 16% entry 36%; } .words .w:nth-child(4) { animation-range: entry 19% entry 39%; } .words .w:nth-child(5) { animation-range: entry 22% entry 42%; } .words .w:nth-child(6) { animation-range: entry 25% entry 45%; } .words .w:nth-child(7) { animation-range: entry 28% entry 48%; } .words .w:nth-child(8) { animation-range: entry 31% entry 51%; } .words .w:nth-child(9) { animation-range: entry 34% entry 54%; } .words .w:nth-child(10) { animation-range: entry 37% entry 57%; } .words .w:nth-child(11) { animation-range: entry 40% entry 60%; } .words .w:nth-child(12) { animation-range: entry 43% entry 63%; } .words .w:nth-child(13) { animation-range: entry 46% entry 66%; } .words .w:nth-child(14) { animation-range: entry 49% entry 69%; }
    .hero__in { animation: drift linear both; animation-timeline: scroll(root); animation-range: 0 600px; }
    .tiles .tile { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 30%; }
  }
}
@keyframes rise { from { transform: translateY(110%); } }
@keyframes grow { to { transform: scaleX(1); } }
@keyframes pop { from { transform: scale(0); opacity: 0; } }
@keyframes wordin { from { color: var(--text-muted); opacity: 0.45; } }
@keyframes drift { to { transform: translateY(120px); opacity: 0.2; } }
@keyframes legend-in { from { opacity: 0; transform: translateY(6px); } }
/* 18 Fine-tuning after the first look (26 Oct 2026) */
@media (min-width: 1001px) { .st--gate + .st::before { display: none; } }
@media (max-width: 640px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .tile--show .tile__img { aspect-ratio: 1; }
  .tile__body { padding: 14px 14px 16px; gap: 12px; }
  .tile--show .tile__t { font-size: 18px; }
  .tile--show .tile__d { font-size: 13px; }
  .tile--show .mono { font-size: 11px; }
}
.tile__img, .portrait img { height: auto; }

/* 19 The shows' frames from their look books (27 Oct 2026) */
.show__frame { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.show__frame img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; background: var(--surface-raised); }
.show__frame .mark { font-size: 11px; }

/* 20 The journey (1 Nov 2026): the start page as one camera move through six worlds, after The Pendragon Cycle.
   Every scene is a tall track with a sticky stage; scrolling moves the camera into the frame, cuts to black between
   worlds, and lets the clues pop into the scenery. Everything is progressive: without the script or without
   scroll-driven animations every scene is a full picture with its words, read top to bottom. */
.hd--over .hd__in { padding-inline: var(--gutter); }
.hd__right { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 32px); }
.counter { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.06em; display: inline-flex; align-items: baseline; gap: 8px; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.counter[hidden] { display: none; }
.counter__of, .counter__w { color: #A1A1A6; }
.counter__w { text-transform: uppercase; font-size: 11px; }
@media (max-width: 560px) { .counter__w { display: none; } }
.menu { display: block; position: static; }
.menu summary { list-style: none; cursor: pointer; font-size: 15px; font-weight: 500; padding: 10px 14px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 6px; color: #FFFFFF; display: inline-flex; align-items: center; gap: 10px; position: relative; z-index: 41; min-width: 88px; justify-content: center; transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease); }
.menu summary:hover { border-color: #FFFFFF; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary::before { content: ""; width: 14px; height: 2px; background: currentColor; box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor; }
.menu__close { display: none; }
.menu[open] summary::before { box-shadow: none; transform: rotate(45deg); }
.menu[open] .menu__open { display: none; }
.menu[open] .menu__close { display: inline; }
.menu__panel { position: fixed; inset: 0; z-index: 40; display: none; background: #0B0B0C; color: #FFFFFF; }
.menu[open] .menu__panel { display: block; }
.menu__in { height: 100%; overflow: auto; padding: 112px var(--gutter) 40px; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px clamp(32px, 6vw, 120px); align-content: start; }
.menu__main { display: flex; flex-direction: column; gap: clamp(4px, 1vw, 10px); }
.menu__main a { font-size: clamp(34px, 5.6vw, 80px); font-weight: 600; letter-spacing: -0.05em; line-height: 1.02; text-decoration: none; color: #FFFFFF; display: flex; align-items: baseline; gap: 20px; opacity: 0.92; transition: opacity 0.2s var(--ease), transform 0.3s var(--ease); }
.menu__main a:hover, .menu__main a[aria-current="page"] { opacity: 1; transform: translateX(8px); }
.menu__n { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.06em; color: #A1A1A6; font-weight: 400; min-width: 28px; }
.menu__side { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; }
.menu__side .eyebrow { margin-top: 18px; color: #A1A1A6; }
.menu__side .eyebrow:first-child { margin-top: 0; }
.menu__side a { color: #FFFFFF; text-decoration: none; font-size: 16px; opacity: 0.85; }
.menu__side a:hover, .menu__side a[aria-current="page"] { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.menu__foot { grid-column: 1 / -1; color: #A1A1A6; font-size: 12px; border-top: 1px solid #2A2A2D; padding-top: 20px; }
@media (max-width: 860px) { .menu__in { grid-template-columns: 1fr; gap: 32px; padding-top: 96px; } .menu__main a { font-size: clamp(30px, 9vw, 44px); } }
.nav { display: none; }
.journey { position: relative; background: #0B0B0C; color: #FFFFFF; }
.jopen { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 136px var(--gutter) clamp(72px, 10vh, 120px); }
.jopen__media { position: absolute; inset: 0; }
.jopen__media img, .jopen__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 74% 50%; }
.jopen__media video { opacity: 0; transition: opacity 1.2s var(--ease); }
.jopen__media video.is-playing { opacity: 1; }
.jopen__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 11, 12, 0.94) 0%, rgba(11, 11, 12, 0.72) 42%, rgba(11, 11, 12, 0.1) 100%); }
.jopen__in { position: relative; display: flex; flex-direction: column; gap: clamp(16px, 2.2vw, 28px); max-width: 1180px; }
.jopen .lead { color: #FFFFFF; max-width: 640px; }
.jopen .mark { margin-top: 4px; }
.jopen .mark__label, .scene__mark .mark__label { background: #FFFFFF; color: #0B0B0C; border-color: #FFFFFF; }
.jopen .meter i.off, .scene__mark .meter i.off { border-color: #FFFFFF; }
.jopen__loop { position: absolute; top: 96px; right: var(--gutter); font-size: 12px; letter-spacing: 0.04em; display: flex; align-items: center; gap: 10px; color: #FFFFFF; }
.jopen__loop i { width: 8px; height: 8px; border-radius: 4px; background: var(--signal); display: inline-block; }
.scrollhint { position: absolute; left: var(--gutter); bottom: 24px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #A1A1A6; display: flex; align-items: center; gap: 12px; }
.scrollhint i { display: block; width: 1px; height: 36px; background: #A1A1A6; transform-origin: top; }
@media (max-width: 760px) {
  .jopen { padding-bottom: 72px; }
  .jopen__scrim { background: linear-gradient(180deg, rgba(11, 11, 12, 0.35) 0%, rgba(11, 11, 12, 0.92) 60%); }
  .jopen__media img, .jopen__media video { object-position: 68% 30%; }
  .jopen .mark__long, .jopen__loop, .jopen .mark__dot { display: none; }
}
.scene { position: relative; height: 320vh; view-timeline-name: --scene; view-timeline-axis: block; }
.scene__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #0B0B0C; }
.scene__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.scene__img--io { object-position: 50% 50%; }
.scene__img--engine { object-position: 90% 50%; }
.scene__img--setae { object-position: 30% 50%; }
.scene__img--hellcreek { object-position: 50% 50%; }
.scene__img--kitchen { object-position: 50% 30%; }
.scene__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 11, 12, 0.5) 0%, rgba(11, 11, 12, 0) 28%, rgba(11, 11, 12, 0) 46%, rgba(11, 11, 12, 0.88) 100%); }
.scene__cut { position: absolute; inset: 0; background: #0B0B0C; opacity: 0; pointer-events: none; }
.pins { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; pointer-events: none; }
.pin { position: absolute; display: flex; align-items: center; gap: 10px; transform: translate(-7px, -7px); pointer-events: auto; }
.pin i { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid #FFFFFF; background: rgba(11, 11, 12, 0.45); box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.14); }
.pin__t { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.3; color: #FFFFFF; background: rgba(11, 11, 12, 0.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 7px 10px; border-radius: 4px; display: flex; flex-direction: column; gap: 2px; white-space: nowrap; }
.pin__t em { font-style: normal; text-transform: none; letter-spacing: 0.02em; color: #A1A1A6; }
#space .pin:nth-child(1) { left: 62%; top: 16%; }
#space .pin:nth-child(2) { left: 34%; top: 47%; }
#space .pin:nth-child(3) { left: 71%; top: 37%; }
#engineering .pin:nth-child(1) { left: 21%; top: 30%; }
#engineering .pin:nth-child(2) { left: 52%; top: 36%; }
#engineering .pin:nth-child(3) { left: 54%; top: 70%; }
#history .pin:nth-child(1) { left: 44%; top: 22%; }
#history .pin:nth-child(2) { left: 53%; top: 56%; }
#life .pin:nth-child(1) { left: 66%; top: 38%; }
#life .pin:nth-child(2) { left: 24%; top: 32%; }
#earth .pin:nth-child(1) { left: 55%; top: 37%; }
#earth .pin:nth-child(2) { left: 40%; top: 24%; }
#earth .pin:nth-child(3) { left: 76%; top: 46%; }
#mind .pin:nth-child(1) { left: 70%; top: 40%; }
#mind .pin:nth-child(2) { left: 40%; top: 20%; }
.scene__slate { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(64px, 9vh, 112px); max-width: 680px; display: flex; flex-direction: column; gap: 14px; }
.scene__kicker { color: #FFFFFF; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 12px; }
.scene__n { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 24px; border: 1px solid #FFFFFF; border-radius: 4px; padding-inline: 6px; }
.scene__t { font-size: clamp(38px, 6.4vw, 92px); font-weight: 600; letter-spacing: -0.05em; line-height: 0.96; }
.scene__d { font-size: clamp(16px, 1.5vw, 20px); line-height: 1.4; max-width: 54ch; color: #FFFFFF; }
.scene__row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 6px; }
.host { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: #FFFFFF; }
.host img { width: 56px; height: 70px; object-fit: cover; object-position: center top; border-radius: 6px; background: #161618; transition: transform 0.35s var(--ease); }
.host:hover img { transform: translateY(-2px); }
.host__t { display: flex; flex-direction: column; gap: 1px; font-size: 15px; font-weight: 500; line-height: 1.25; }
.host__t .mono, .host__t em { font-size: 11px; color: #A1A1A6; font-style: normal; line-height: 1.4; }
.scene__mark { position: absolute; right: var(--gutter); bottom: 22px; max-width: min(46%, 560px); justify-content: flex-end; color: #FFFFFF; font-size: 11px; }
.scene__mark .mark__dot { color: #A1A1A6; }
@media (max-width: 1000px) {
  .pins { display: none; }
  .scene__mark { left: auto; right: var(--gutter); max-width: none; bottom: auto; top: 88px; justify-content: flex-end; }
  .scene__mark > span:nth-child(2) { display: none; }
  /* On a phone the picture is cut to a third of its width: show the part that carries the scene. */
  .scene__img--io { object-position: 72% 50%; } .scene__img--engine { object-position: 50% 50%; } .scene__img--pompeii { object-position: 50% 50%; }
  .scene__img--setae { object-position: 22% 50%; } .scene__img--hellcreek { object-position: 62% 50%; } .scene__img--kitchen { object-position: 50% 30%; }
}
@media (max-width: 760px) { .scene__slate { bottom: 40px; } .scene__mark .mark__long, .scene__mark .mark__dot { display: none; } .scene__d { font-size: 15px; } }
.jclose { position: relative; background: #0B0B0C; padding: clamp(96px, 16vh, 180px) 0; }
.jclose__in { display: flex; flex-direction: column; gap: 28px; max-width: 960px; }
.jclose .lead { color: #FFFFFF; max-width: 52ch; }
.jclose .btn--secondary { border-color: #FFFFFF; color: #FFFFFF; }
.rail { position: fixed; right: 22px; top: 50%; transform: translateY(-50%); z-index: 15; display: flex; flex-direction: column; gap: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0; pointer-events: none; transition: opacity 0.4s var(--ease); }
.rail[hidden] { display: none; }
.rail.is-on { opacity: 1; pointer-events: auto; }
.rail a { color: #A1A1A6; text-decoration: none; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.rail a span { display: none; }
.rail a::after { content: ""; width: 6px; height: 6px; border-radius: 50%; border: 1px solid #A1A1A6; transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease); }
.rail a.is-active { color: #FFFFFF; }
.rail a.is-active::after { background: #FFFFFF; border-color: #FFFFFF; }
@media (max-width: 1000px) { .rail { display: none; } }
.cast { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 1000px) { .cast { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cast { grid-template-columns: 1fr; } }
.castcard { display: flex; flex-direction: column; gap: 18px; min-width: 0; scroll-margin-top: 96px; }
.castcard__fig { display: flex; flex-direction: column; gap: 10px; }
.castcard__fig img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; border-radius: 12px; background: #161618; }
.castcard__fig .mark { font-size: 11px; }
.castcard__fig .mark__label { background: #FFFFFF; color: #0B0B0C; border-color: #FFFFFF; }
.castcard__body { display: flex; flex-direction: column; gap: 10px; }
.castcard__t { font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -0.035em; line-height: 1.05; }
.castcard__show { font-size: 13px; color: #A1A1A6; }
.castcard__d { font-size: 15px; line-height: 1.5; color: #FFFFFF; }
.castcard__rule { font-size: 14px; line-height: 1.5; color: #A1A1A6; display: flex; flex-direction: column; gap: 4px; border-top: 1px solid #2A2A2D; padding-top: 10px; }
@media (prefers-reduced-motion: no-preference) {
  .scrollhint i { animation: hint 1.8s var(--ease) infinite; }
  @supports (animation-timeline: view()) {
    .scene__img { animation: cam linear both; animation-timeline: --scene; animation-range: cover 0% cover 100%; }
    .scene__cut { animation: cuts linear both; animation-timeline: --scene; animation-range: cover 0% cover 100%; }
    .scene__slate > * { animation: slate linear both; animation-timeline: --scene; animation-range: cover 24% cover 34%; }
    .scene__slate > :nth-child(2) { animation-range: cover 26% cover 36%; }
    .scene__slate > :nth-child(3) { animation-range: cover 28% cover 38%; }
    .scene__slate > :nth-child(4) { animation-range: cover 30% cover 40%; }
    .scene__mark { animation: slate linear both; animation-timeline: --scene; animation-range: cover 30% cover 40%; }
    .pin { animation: pinin linear both; animation-timeline: --scene; animation-range: cover 38% cover 44%; }
    .pin:nth-child(2) { animation-range: cover 46% cover 52%; }
    .pin:nth-child(3) { animation-range: cover 54% cover 60%; }
    .jopen__in { animation: drift linear both; animation-timeline: scroll(root); animation-range: 0 600px; }
    .jclose__in { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
  }
  @supports not (animation-timeline: view()) {
    .js .scene__slate > *, .js .scene__mark, .js .pin { opacity: 0; transform: translateY(24px); transition: opacity 0.6s var(--ease), transform 0.7s var(--ease); }
    .js .pin { transform: translate(-7px, -7px) scale(0.6); }
    .js .scene__slate > :nth-child(2) { transition-delay: 0.08s; } .js .scene__slate > :nth-child(3) { transition-delay: 0.16s; } .js .scene__slate > :nth-child(4) { transition-delay: 0.24s; }
    .js .pin:nth-child(1) { transition-delay: 0.5s; } .js .pin:nth-child(2) { transition-delay: 0.8s; } .js .pin:nth-child(3) { transition-delay: 1.1s; }
    .js .scene.is-in .scene__slate > *, .js .scene.is-in .scene__mark { opacity: 1; transform: none; }
    .js .scene.is-in .pin { opacity: 1; transform: translate(-7px, -7px) scale(1); }
    .js .scene__cut { transition: opacity 0.5s linear; }
  }
}
@keyframes cam { from { transform: scale(1.22) translateY(-2%); } to { transform: scale(1) translateY(2%); } }
/* On a phone every frame is its own 9:16 picture (the <picture> source), the track is shorter and the camera moves
   more, so a scroll shows. The hero's film stays off there: its poster is the portrait. */
@media (max-width: 760px) {
  .scene { height: 240vh; }
  .scene__img { object-position: 50% 32%; }
  @keyframes cam { from { transform: scale(1.45) translateY(-5%); } to { transform: scale(1) translateY(5%); } }
}
@keyframes cuts { 0% { opacity: 1; } 22% { opacity: 0; } 78% { opacity: 0; } 94% { opacity: 1; } 100% { opacity: 1; } }
@keyframes slate { from { opacity: 0; transform: translateY(24px); } }
@keyframes pinin { from { opacity: 0; transform: translate(-7px, -7px) scale(0.6); } }
@keyframes hint { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (prefers-reduced-motion: reduce) { .scene__cut { display: none; } .rail, .menu__main a, .host img { transition: none; } }
@media print { .scene { height: auto; } .scene__stage { position: static; height: auto; } .scene__img { position: static; } .jopen { position: static; height: auto; } .rail, .counter, .menu { display: none; } }

html.menu-open { overflow: hidden; }
/* The open menu: the header grows to the whole screen and drops its blur, because a blurred or filtered
   header would become the containing block of the fixed panel and clip it. */
.hd:has(.menu[open]), html.menu-open .hd { height: 100vh; height: 100dvh; animation: none; background: #0B0B0C; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
@media (max-width: 1000px) { .scene__mark { background: rgba(11, 11, 12, 0.55); padding: 8px 10px; border-radius: 6px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } }
/* 21 The editorial team as functions (CEO, 1 Nov 2026): desks, not faces; the founder's photo small */
.desks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1000px) { .desks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .desks { grid-template-columns: 1fr; } }
.desk { background: var(--surface); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--line); min-width: 0; }
.desk__n { font-size: 12px; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; }
.desk h3 { font-size: 20px; letter-spacing: -0.02em; line-height: 1.2; }
.desk p { font-size: 15px; line-height: 1.5; color: var(--text); }
.about--small { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); align-items: start; }
.photo--small { max-width: 200px; }
@media (max-width: 900px) { .about--small { grid-template-columns: 1fr; } }
.photo img { height: auto; }

/* The hero is the anatomy of one frame (CEO, 1 Nov 2026): a frame from an episode fans open into the layers it is
   made of, the sources, the measurements, the drawing, the model, the render computing in tiles, the checks, then folds
   back into the one approved frame. Markup here, the timeline in site.js; without it, and with reduced motion, the fan
   stands still. The pictures are the great hall of the Library of Alexandria, built for this page from the sources. */
.jopen--anat { background: #0B0B0C; }
.jopen--anat .jopen__in { max-width: 560px; } .jopen--anat .lead { max-width: 560px; }
.anat { position: absolute; right: calc(var(--gutter) + 70px); top: 50%; width: 600px; height: 338px; margin-top: -200px; perspective: 2000px; perspective-origin: 96% 50%; transform: scale(var(--anat-s, 1)); transform-origin: 100% 50%; pointer-events: none; }
.anat__fit { position: absolute; inset: 0; transform-style: preserve-3d; }
.anat__stack { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(38deg) rotateX(-5deg) translateX(-30px); }
.anat__plane { position: absolute; inset: 0; transform-style: preserve-3d; backface-visibility: hidden; }
.anat__plane--sources { transform: translateZ(-720px); } .anat__plane--data { transform: translateZ(-600px); }
.anat__plane--img:nth-child(3) { transform: translateZ(-480px); } .anat__plane--model { transform: translateZ(-360px); }
.anat__plane--render { transform: translateZ(-240px); } .anat__plane--checks { transform: translateZ(-120px); }
.anat__plane--img { outline: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55); background: #161618; }
.anat__plane--img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.anat__tag { position: absolute; left: 0; top: -28px; margin: 0; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: #A1A1A6; white-space: nowrap; }
.anat__page { position: absolute; width: 160px; height: 204px; background: #161618; outline: 1px solid rgba(255, 255, 255, 0.22); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); overflow: hidden; }
.anat__page:nth-of-type(1) { left: 30px; top: -60px; transform: rotate(-7deg); } .anat__page:nth-of-type(2) { left: 190px; top: 20px; transform: rotate(3deg); }
.anat__page:nth-of-type(3) { left: 330px; top: -40px; transform: rotate(-3deg); } .anat__page:nth-of-type(4) { left: 470px; top: 30px; transform: rotate(5deg); }
.anat__page:nth-of-type(5) { left: 580px; top: -20px; transform: rotate(-5deg); }
.anat__sheet { position: absolute; inset: 0; width: 100%; height: 100%; }
.anat__sheet .bar { fill: #8F8F94; } .anat__sheet .ln { stroke: #BDBDC2; fill: none; stroke-width: 1.2; } .anat__sheet .lnA { stroke: var(--signal); fill: none; stroke-width: 1.4; }
.anat__grid { position: absolute; inset: 0; width: 100%; height: 100%; } .anat__grid path { stroke: #5C5C61; fill: none; stroke-width: 1; } .anat__grid .v { opacity: 0.35; } .anat__grid circle { fill: #FFFFFF; }
.anat__tiles { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(16, 1fr); grid-template-rows: repeat(9, 1fr); } .anat__tiles i { display: block; background: #0B0B0C; outline: 1px solid rgba(255, 255, 255, 0.08); }
.anat__pin { position: absolute; display: flex; align-items: center; gap: 10px; transform: translate(-8px, -8px); }
.anat__pin i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #FFFFFF; box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.16); background: rgba(11, 11, 12, 0.4); }
.anat__pin span { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: #FFFFFF; background: rgba(11, 11, 12, 0.78); padding: 6px 9px; white-space: nowrap; }
.anat__pin:nth-of-type(1) { left: 30%; top: 34%; } .anat__pin:nth-of-type(2) { left: 76%; top: 42%; } .anat__pin:nth-of-type(3) { left: 50%; top: 12%; }
.anat__mark { position: absolute; left: 0; top: calc(100% + 30px); white-space: nowrap; font-size: 12px; }
.jopen--anat .mark__label { background: #FFFFFF; color: #0B0B0C; border-color: #FFFFFF; } .jopen--anat .meter i.off { border-color: #FFFFFF; }
@media (max-width: 1500px) { .anat { --anat-s: 0.8; } }
@media (min-width: 1800px) { .anat { --anat-s: 1.3; } }
@media (max-width: 1280px) { .anat { --anat-s: 0.64; right: calc(var(--gutter) + 40px); } .jopen--anat .jopen__in { max-width: 460px; } .jopen--anat .lead { max-width: 460px; } }
@media (max-width: 1000px) {
  .jopen--anat { position: relative; height: auto; min-height: 0; padding-top: 120px; padding-bottom: 48px; display: block; }
  .jopen--anat .jopen__in { max-width: 820px; }
  .anat { position: relative; right: auto; top: auto; margin: 56px 0 60px auto; --anat-s: 1; transform: none; width: 600px; max-width: 100%; height: 338px; }
  .anat__mark { top: calc(100% + 24px); white-space: normal; }
  .jopen--anat .scrollhint { display: none; }
}
@media (max-width: 760px) {
  /* On a phone the whole fan, scaled to the width of the screen (site.js sets --anat-s from it); the timeline runs here too. */
  .anat { width: 100%; height: calc(338px * var(--anat-s, 0.58)); perspective: 1600px; perspective-origin: 60% 50%; margin: 60px 0 64px; transform: none; }
  .anat__plane--sources { transform: translateZ(-360px); } .anat__plane--data { transform: translateZ(-300px); }
  .anat__plane--img:nth-child(3) { transform: translateZ(-240px); } .anat__plane--model { transform: translateZ(-180px); }
  .anat__plane--render { transform: translateZ(-120px); } .anat__plane--checks { transform: translateZ(-60px); }
  .anat__stack { transform: rotateY(38deg) rotateX(-5deg) translateX(100px); }
  .anat__fit { inset: auto; left: 0; top: 0; width: 600px; height: 338px; transform: scale(var(--anat-s, 0.58)); transform-origin: 0 0; }
  .anat__mark .mark__dot { display: none; }
  .anat__mark { top: calc(100% + 16px); white-space: normal; }
}
}