/* ───────── Page chrome (fixed) ───────── */
:root {
  color-scheme: dark;
  --page: #0b0b0c; --page-2: #141416; --page-ink: #ececea; --page-mute: #8a8a85; --page-line: #232326;
  --sans: "Geist", ui-sans-serif, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
  --serif: "Newsreader", Georgia, serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--page); color: var(--page-ink); font-family: var(--sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
.mono { font-family: var(--mono); }
button { font: inherit; color: inherit; }
main, .top, footer { max-width: 1480px; margin: 0 auto; padding-left: clamp(16px, 3vw, 40px); padding-right: clamp(16px, 3vw, 40px); }

.top { display: flex; align-items: center; gap: 20px; height: 60px; border-bottom: 1px solid var(--page-line); }
.top .who { font-weight: 600; letter-spacing: -0.01em; }
.top .role { color: var(--page-mute); font-size: 12px; margin-right: auto; }
.top .mail { font-size: 12px; color: var(--page-mute); }
.top .mail:hover { color: var(--page-ink); }

.intro { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: end; padding: clamp(40px, 7vh, 88px) 0 36px; }
.intro h1 { margin: 0; font-weight: 600; font-size: clamp(40px, 6vw, 92px); line-height: .95; letter-spacing: -0.055em; }
.intro h1 span { color: var(--page-mute); }
.intro p { margin: 0; color: var(--page-mute); font-size: 17px; max-width: 44ch; }

/* Controls */
.controls { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 32px; padding: 14px 0; background: rgba(11,11,12,.86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--page-line); border-bottom: 1px solid var(--page-line); }
.dial { display: flex; align-items: center; gap: 12px; }
.dl { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--page-mute); }
.opts { display: flex; gap: 2px; background: var(--page-2); border: 1px solid var(--page-line); border-radius: 8px; padding: 3px; }
.opts button { background: none; border: 0; padding: 7px 11px; border-radius: 6px; font-size: 13px; color: var(--page-mute); cursor: pointer; transition: background .2s, color .2s; }
.opts button:hover { color: var(--page-ink); }
.opts button[aria-pressed="true"] { background: var(--page-ink); color: var(--page); }
.shuffle { margin-left: auto; background: none; border: 1px solid var(--page-line); border-radius: 8px; padding: 9px 14px; font-size: 12px; color: var(--page-ink); cursor: pointer; }
.shuffle:hover { border-color: var(--page-mute); }

/* Device wall */
.wall { display: grid; grid-template-columns: repeat(12, 1fr); gap: 28px 24px; padding: 36px 0 24px; align-items: start; }
.dev { margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dev figcaption { font-size: 11px; color: var(--page-mute); letter-spacing: .06em; text-transform: uppercase; }
.web { grid-column: 1 / span 7; }
.app { grid-column: 8 / span 2; }
.ai { grid-column: 10 / span 3; }
.seat { grid-column: 1 / span 5; }
.gate { grid-column: 6 / span 4; }
.watch { grid-column: 10 / span 3; align-items: center; }
.watch figcaption { align-self: stretch; }
.car { grid-column: 1 / span 7; }
.entry { grid-column: 8 / span 5; }

.bezel { container-type: inline-size; background: #1b1b1e; border: 1px solid #2a2a2e; border-radius: 14px; padding: 8px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); }
.chrome { display: flex; align-items: center; gap: 6px; padding: 2px 6px 8px; }
.chrome i { width: 9px; height: 9px; border-radius: 50%; background: #3a3a3f; }
.chrome .url { margin-left: 10px; flex: 1; font-size: 11px; color: #8a8a85; background: #111113; border-radius: 6px; padding: 4px 10px; }
.phone { border-radius: 30px; padding: 7px; }
.phone .screen { border-radius: 24px; }
.seatback { border-radius: 18px; padding: 14px 14px 26px; background: linear-gradient(#202024, #18181b); }
.tv { border-radius: 6px; padding: 10px; background: #111; }
.round { width: min(100%, 210px); aspect-ratio: 1; border-radius: 34%; padding: 12px; background: #1d1d20; }
.round .screen { border-radius: 30%; height: 100%; }
.dash { border-radius: 22px; padding: 10px; background: #151517; }
.panel { border-radius: 16px; }

/* ───────── Theme dimension (color tokens) ───────── */
[data-theme="midnight"] { --t-bg:#0f1218; --t-surface:#171b23; --t-ink:#eef1f6; --t-mute:#8f98a8; --t-line:#2a3140; --t-accent:#6ea8ff; --t-on:#0b1020; }
[data-theme="paper"]    { --t-bg:#f6f4ef; --t-surface:#ffffff; --t-ink:#16150f; --t-mute:#6f6b62; --t-line:#e2ddd2; --t-accent:#16150f; --t-on:#f6f4ef; }
[data-theme="glacier"]  { --t-bg:#eef4f8; --t-surface:#ffffff; --t-ink:#0b2a3c; --t-mute:#58717f; --t-line:#d3e1ea; --t-accent:#0b84c6; --t-on:#ffffff; }
[data-theme="ember"]    { --t-bg:#fbf1e8; --t-surface:#fffaf5; --t-ink:#2b140c; --t-mute:#8a6a5a; --t-line:#efd9c7; --t-accent:#e5482b; --t-on:#ffffff; }
[data-theme="forest"]   { --t-bg:#11201a; --t-surface:#182b23; --t-ink:#ecf0e4; --t-mute:#9aab9c; --t-line:#2a4036; --t-accent:#e9c46a; --t-on:#11201a; }

/* ───────── UI dimension (shape, type, density) ───────── */
[data-ui="soft"]      { --r: 2.6cqw; --r-btn: 999px; --bw: 1px; --hf: var(--sans); --hw: 600; --ht: -0.035em; --hcase: none; --kcase: none; --kls: 0; --pad: 1; --img-r: 2cqw; }
[data-ui="sharp"]     { --r: 0px;    --r-btn: 0px;   --bw: 2px; --hf: var(--sans); --hw: 700; --ht: -0.02em;  --hcase: uppercase; --kcase: uppercase; --kls: .12em; --pad: .75; --img-r: 0px; }
[data-ui="editorial"] { --r: .4cqw;  --r-btn: .4cqw; --bw: 1px; --hf: var(--serif); --hw: 400; --ht: -0.02em; --hcase: none; --kcase: uppercase; --kls: .16em; --pad: 1.25; --img-r: 0px; }

.screen { container-type: inline-size; position: relative; overflow: hidden; border-radius: 8px; background: var(--t-bg); color: var(--t-ink); font-family: var(--sans); transition: background-color .5s, color .5s; }
.logo { font-weight: 700; letter-spacing: -0.02em; }
[data-ui="sharp"] .logo { text-transform: uppercase; letter-spacing: .06em; }
[data-ui="editorial"] .logo { font-family: var(--serif); font-weight: 500; font-style: italic; letter-spacing: 0; }
.hl { font-family: var(--hf); font-weight: var(--hw); letter-spacing: var(--ht); text-transform: var(--hcase); margin: 0; line-height: 1.02; }
.kick { display: inline-block; text-transform: var(--kcase); letter-spacing: var(--kls); color: var(--t-accent); font-weight: 600; }
.sub { color: var(--t-mute); margin: 0; }
.cta { display: inline-flex; align-items: center; justify-content: center; background: var(--t-accent); color: var(--t-on); border-radius: var(--r-btn); font-weight: 600; white-space: nowrap; transition: background-color .5s, color .5s, border-radius .5s; }
[data-ui="sharp"] .cta { text-transform: uppercase; letter-spacing: .08em; }
[data-ui="editorial"] .cta { background: transparent; color: var(--t-ink); box-shadow: inset 0 0 0 1px var(--t-ink); }
.offer { color: var(--t-mute); font-family: var(--mono); }

/* Art: placeholder until photos are swapped in */
.art { position: absolute; inset: 0; background-size: cover; background-position: center; transition: opacity .5s; }
.art[data-art="aurora"] { background: url(img/aurora.webp) center / cover no-repeat, radial-gradient(60% 50% at 30% 30%, rgba(80,255,190,.55), transparent 60%), radial-gradient(50% 40% at 70% 20%, rgba(120,140,255,.5), transparent 60%), linear-gradient(180deg, #08142a 0%, #0c2a3a 60%, #e8eef2 61%, #c7d3dc 100%); }
.art[data-art="sunset"] { background: url(img/sunset.webp) center / cover no-repeat, radial-gradient(30% 30% at 70% 52%, #ffe7a8, transparent 60%), linear-gradient(180deg, #ff9a6b 0%, #ff6f7d 38%, #ffc59e 55%, #1e6c8f 56%, #0f4a68 100%); }
.art[data-art="neon"]   { background: url(img/neon.webp) center / cover no-repeat, radial-gradient(40% 40% at 25% 70%, rgba(255,60,170,.6), transparent 60%), radial-gradient(40% 50% at 75% 30%, rgba(60,140,255,.6), transparent 60%), repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 2px, transparent 2px 9%), linear-gradient(180deg, #120a2a, #1a0f3d); }

/* ── Web ── */
.s-web { aspect-ratio: 16 / 9.2; font-size: 1.15cqw; }
.w-nav { position: relative; z-index: 2; display: flex; gap: 2.4cqw; align-items: center; padding: calc(1.6cqw * var(--pad)) 3cqw; font-size: 1.2cqw; color: var(--t-ink); background: var(--t-bg); border-bottom: var(--bw) solid var(--t-line); }
.w-nav .logo { font-size: 1.7cqw; margin-right: auto; }
.w-sign { font-style: normal; border: var(--bw) solid var(--t-line); padding: .5cqw 1.2cqw; border-radius: var(--r-btn); }
.w-hero { position: relative; height: 62%; margin: calc(2cqw * var(--pad)) 3cqw 0; border-radius: var(--img-r); overflow: hidden; }
.w-copy { position: absolute; left: 0; bottom: 0; width: 52%; padding: 3cqw; background: var(--t-bg); border-top-right-radius: var(--r); transition: background-color .5s; }
.w-copy .kick { font-size: 1.15cqw; margin-bottom: 1cqw; }
.w-copy .hl { font-size: 4.4cqw; margin-bottom: 1.2cqw; }
.w-copy .sub { font-size: 1.35cqw; margin-bottom: 2cqw; }
.w-cta { display: flex; align-items: center; gap: 1.6cqw; }
.w-cta .cta { font-size: 1.3cqw; padding: 1.1cqw 2cqw; }
.w-cta .offer { font-size: 1.2cqw; }
.w-search { display: grid; grid-template-columns: repeat(3, 1fr) auto; margin: calc(1.8cqw * var(--pad)) 3cqw 0; border: var(--bw) solid var(--t-line); border-radius: var(--r); background: var(--t-surface); font-size: 1.3cqw; overflow: hidden; }
.w-search > div { padding: 1.1cqw 1.6cqw; border-right: var(--bw) solid var(--t-line); }
.w-search small { display: block; color: var(--t-mute); font-size: 1cqw; }
.w-search .go { display: grid; place-items: center; background: var(--t-accent); color: var(--t-on); font-weight: 600; padding: 0 3cqw; border: 0; }
/* UI kit changes layout, not just style */
[data-ui="sharp"] .w-hero { height: 58%; }
[data-ui="sharp"] .w-copy { width: 46%; left: auto; right: 0; top: 0; bottom: 0; border-radius: 0; display: flex; flex-direction: column; justify-content: center; border-left: var(--bw) solid var(--t-ink); }
[data-ui="editorial"] .w-hero { margin: 0; height: 66%; border-radius: 0; }
[data-ui="editorial"] .w-copy { background: transparent; color: #fff; width: 70%; border-radius: 0; padding-bottom: 4cqw; }
[data-ui="editorial"] .w-copy .hl { font-size: 6.2cqw; }
[data-ui="editorial"] .w-copy .sub, [data-ui="editorial"] .w-copy .offer { color: rgba(255,255,255,.82); }
[data-ui="editorial"] .w-copy .kick { color: #fff; }
[data-ui="editorial"] .w-copy .cta { color: #fff; box-shadow: inset 0 0 0 1px #fff; }
[data-ui="editorial"] .w-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.7), rgba(0,0,0,.2) 60%, transparent 85%), linear-gradient(90deg, rgba(0,0,0,.45), transparent 70%); }
[data-ui="editorial"] .w-copy { z-index: 1; }

/* ── App ── */
.s-app { aspect-ratio: 9 / 19.5; font-size: 5cqw; padding: 0 6cqw; display: flex; flex-direction: column; gap: calc(4cqw * var(--pad)); }
.a-status { display: flex; justify-content: space-between; padding-top: 4cqw; font-size: 4cqw; color: var(--t-mute); }
.a-head { display: flex; justify-content: space-between; align-items: center; }
.a-head .logo { font-size: 7cqw; }
.avatar { width: 9cqw; height: 9cqw; border-radius: 50%; background: var(--t-line); }
[data-ui="sharp"] .avatar { border-radius: 0; }
.a-card { position: relative; border-radius: var(--r); overflow: hidden; background: var(--t-surface); border: var(--bw) solid var(--t-line); }
[data-ui="soft"] .a-card { border-radius: 6cqw; }
.a-card .art { position: relative; height: 34cqw; }
.a-copy { padding: 5cqw; }
.a-copy .kick { font-size: 4cqw; }
.a-copy .hl { font-size: 8.6cqw; margin: 2cqw 0; }
.a-copy .offer { font-size: 4cqw; }
[data-ui="editorial"] .a-card { border: 0; background: transparent; }
[data-ui="editorial"] .a-card .art { height: 46cqw; }
[data-ui="editorial"] .a-copy { padding: 4cqw 0; }
[data-ui="editorial"] .a-copy .hl { font-size: 11cqw; }
[data-ui="sharp"] .a-card { display: grid; grid-template-columns: 34% 1fr; }
[data-ui="sharp"] .a-card .art { height: auto; }
[data-ui="sharp"] .a-copy .hl { font-size: 6.4cqw; }
.a-trip { background: var(--t-surface); border: var(--bw) solid var(--t-line); border-radius: var(--r); padding: 4.5cqw; }
[data-ui="soft"] .a-trip { border-radius: 6cqw; }
.a-trip small { color: var(--t-mute); font-size: 3.6cqw; }
.a-route { display: flex; align-items: center; gap: 3cqw; font-size: 8cqw; font-weight: 700; margin: 1.5cqw 0; }
.a-route .line { flex: 1; height: 0; border-top: 2px dashed var(--t-line); }
.a-meta { display: flex; justify-content: space-between; color: var(--t-mute); font-size: 3.6cqw; }
.cta.wide { font-size: 4.4cqw; padding: 4cqw; }
.a-tab { margin-top: auto; display: flex; justify-content: space-around; padding: 4cqw 0 6cqw; border-top: var(--bw) solid var(--t-line); }
.a-tab i { width: 5cqw; height: 5cqw; border-radius: 1.5cqw; background: var(--t-line); }
.a-tab i.on { background: var(--t-accent); }

/* ── AI assistant ── */
.s-ai { aspect-ratio: 3 / 4; font-size: 3.8cqw; padding: 5cqw; display: flex; flex-direction: column; gap: 4cqw; }
.ai-head { display: flex; justify-content: space-between; font-size: 3.2cqw; color: var(--t-mute); padding-bottom: 3cqw; border-bottom: var(--bw) solid var(--t-line); }
.ai-head .dot { color: var(--t-accent); }
.msg { padding: 3.6cqw 4.2cqw; border-radius: var(--r); line-height: 1.45; }
[data-ui="soft"] .msg { border-radius: 5cqw; }
.msg.me { align-self: flex-end; background: var(--t-accent); color: var(--t-on); max-width: 80%; }
.msg.bot { background: var(--t-surface); border: var(--bw) solid var(--t-line); }
.msg.bot p { margin: 0 0 3cqw; }
[data-ui="editorial"] .msg.bot p { font-family: var(--serif); font-size: 4.6cqw; line-height: 1.35; }
.ai-facts { list-style: none; margin: 0; padding: 0; font-size: 3.2cqw; }
.ai-facts li { display: flex; justify-content: space-between; padding: 1.6cqw 0; border-top: 1px solid var(--t-line); }
.ai-facts span { color: var(--t-mute); }
.ai-chips { display: flex; flex-wrap: wrap; gap: 2cqw; }
.ai-chips span { font-size: 3.2cqw; padding: 1.8cqw 3cqw; border: var(--bw) solid var(--t-line); border-radius: var(--r-btn); color: var(--t-ink); }
[data-ui="editorial"] .ai-chips span { font-family: var(--serif); font-style: italic; border-width: 0 0 1px; border-radius: 0; padding: 1cqw 0; margin-right: 3cqw; }
.ai-note { margin-top: auto; font-size: 2.9cqw; color: var(--t-mute); }

/* ── Seatback ── */
.s-seat { aspect-ratio: 16 / 9; font-size: 1.6cqw; }
.s-seat .art { opacity: .9; }
.s-seat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--t-bg) 0%, color-mix(in srgb, var(--t-bg) 70%, transparent) 45%, transparent 75%); transition: background .5s; }
.se-top, .se-main, .se-tiles { position: relative; z-index: 1; }
.se-top { display: flex; justify-content: space-between; padding: 3cqw 4cqw 0; font-size: 1.8cqw; color: var(--t-mute); }
.se-top .logo { color: var(--t-ink); font-size: 2.6cqw; }
.se-main { padding: 5cqw 4cqw 0; max-width: 62%; }
.se-main .kick { font-size: 1.8cqw; }
.se-main .hl { font-size: 6cqw; margin: 1.4cqw 0 3cqw; }
.se-prog { display: flex; align-items: center; gap: 1.6cqw; font-family: var(--mono); font-size: 1.8cqw; }
.se-prog .bar { flex: 1; height: .6cqw; background: var(--t-line); border-radius: var(--r-btn); overflow: hidden; }
.se-prog .bar i { display: block; width: 38%; height: 100%; background: var(--t-accent); }
.se-main small { display: block; margin-top: 1.4cqw; color: var(--t-mute); font-size: 1.6cqw; }
.se-tiles { position: absolute; left: 4cqw; right: 4cqw; bottom: 3.4cqw; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6cqw; }
.se-tiles span { background: var(--t-surface); border: var(--bw) solid var(--t-line); border-radius: var(--r); padding: calc(1.8cqw * var(--pad)) 2cqw; font-size: 1.9cqw; font-weight: 500; }
[data-ui="soft"] .se-tiles span { border-radius: 2cqw; }
[data-ui="sharp"] .se-tiles span { text-transform: uppercase; letter-spacing: .08em; font-size: 1.6cqw; }
[data-ui="sharp"] .se-tiles { grid-template-columns: repeat(4, 1fr); gap: 0; }
[data-ui="sharp"] .se-tiles span + span { border-left: 0; }
[data-ui="editorial"] .se-tiles span { background: color-mix(in srgb, var(--t-bg) 82%, transparent); padding-right: 1.4cqw; border: 0; border-top: 1px solid var(--t-ink); border-radius: 0; padding-left: 0; font-family: var(--serif); font-size: 2.4cqw; }

/* ── Gate display ── */
.s-gate { aspect-ratio: 16 / 9; font-size: 2cqw; display: grid; grid-template-rows: auto 1fr auto; }
.g-bar { display: flex; justify-content: space-between; align-items: center; padding: 3cqw 4cqw; background: var(--t-accent); color: var(--t-on); font-size: 3cqw; }
.g-bar .logo { font-size: 4cqw; }
.g-main { padding: 4cqw; display: flex; flex-direction: column; justify-content: center; gap: 1.5cqw; }
.g-flight { font-size: 3.4cqw; color: var(--t-mute); }
.g-dest { font-size: 9.5cqw; line-height: .95; }
.g-status { font-size: 3.6cqw; font-weight: 600; color: var(--t-accent); }
.g-foot { display: flex; justify-content: space-between; padding: 2cqw 4cqw; border-top: var(--bw) solid var(--t-line); color: var(--t-mute); font-size: 2.6cqw; }
[data-ui="sharp"] .g-main { flex-direction: row; align-items: center; justify-content: space-between; }
[data-ui="sharp"] .g-dest { font-size: 7.5cqw; }
[data-ui="editorial"] .g-bar { background: transparent; color: var(--t-ink); border-bottom: 1px solid var(--t-ink); }

/* ── Watch ── */
.s-watch { font-size: 7cqw; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.5cqw; text-align: center; background: #000; color: #fff; }
.s-watch::before { content: ""; position: absolute; inset: 0; background: var(--t-accent); opacity: .18; transition: background .5s; }
.s-watch > * { position: relative; }
.wt-brand { font-size: 6cqw; color: color-mix(in srgb, var(--t-accent) 55%, #fff); text-transform: uppercase; letter-spacing: .1em; }
.wt-gate { font-family: var(--hf); font-weight: var(--hw); font-size: 15cqw; line-height: 1; letter-spacing: var(--ht); }
.wt-time, .wt-flight { font-size: 6.4cqw; opacity: .8; }
.wt-qr { width: 18cqw; height: 18cqw; margin-top: 2cqw; border-radius: calc(var(--r) * 2); background:
  conic-gradient(from 90deg, #fff 25%, #000 0 50%, #fff 0 75%, #000 0) 0 0 / 25% 25%; opacity: .9; }

/* ── Car ── */
.s-car { aspect-ratio: 3 / 1; font-size: 1.6cqw; display: grid; grid-template-columns: 1.1fr 1.4fr .6fr; }
.c-map { position: relative; color: var(--t-accent); background:
  repeating-linear-gradient(0deg, var(--t-line) 0 1px, transparent 1px 3cqw), repeating-linear-gradient(90deg, var(--t-line) 0 1px, transparent 1px 3cqw), var(--t-surface); }
.c-map svg { position: absolute; inset: 12% 8%; width: 84%; height: 76%; }
.c-copy { padding: 3cqw 3.4cqw; display: flex; flex-direction: column; justify-content: center; gap: 1cqw; }
.c-copy .kick { font-size: 1.8cqw; }
.c-copy .hl { font-size: 4.4cqw; }
.c-meta { color: var(--t-mute); font-size: 1.6cqw; }
.c-side { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; padding: 3cqw; border-left: var(--bw) solid var(--t-line); font-size: 3cqw; color: var(--t-mute); }
.c-side .logo { font-size: 2cqw; color: var(--t-ink); }
[data-ui="sharp"] .s-car { grid-template-columns: 1.4fr 1.1fr .6fr; }
[data-ui="sharp"] .c-map { order: 2; }
[data-ui="editorial"] .c-map { background: var(--t-bg); }

/* ── Entry JSON ── */
.json { background: #111113; border: 1px solid var(--page-line); border-radius: 12px; overflow: hidden; }
.j-head { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--page-line); font-size: 11px; color: var(--page-mute); }
.json pre { margin: 0; padding: 14px; font-size: 11.5px; line-height: 1.6; color: #c9c9c4; white-space: pre-wrap; max-height: 300px; overflow: auto; }

.wall.pulse .screen { animation: swap .5s ease; }
@keyframes swap { from { opacity: .55; } to { opacity: 1; } }

/* Tally + story */
.tally { padding: 28px 0 8px; border-top: 1px solid var(--page-line); }
.tally p { margin: 0; font-size: clamp(14px, 1.6vw, 18px); color: var(--page-mute); }
.tally b { color: var(--page-ink); font-weight: 500; }
.tally span { color: var(--page-ink); }
.story { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; padding: clamp(56px, 9vh, 100px) 0; border-top: 1px solid var(--page-line); }
.story h2 { margin: 0 0 20px; font-weight: 600; font-size: clamp(28px, 3.4vw, 48px); line-height: 1.02; letter-spacing: -0.045em; max-width: 20ch; }
.story p { color: var(--page-mute); font-size: 17px; max-width: 60ch; margin: 0 0 14px; }
.facts { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--page-line); }
.facts li { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--page-line); font-size: 13px; }
.facts b { display: block; font-weight: 500; color: var(--page-ink); margin-bottom: 2px; }
.facts span { color: var(--page-mute); }
.paths { display: flex; flex-direction: column; border-top: 1px solid var(--page-line); }
.path { display: grid; grid-template-columns: 48px 1fr 1.6fr 24px; gap: 20px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--page-line); transition: padding .25s; }
.path:hover { padding-left: 8px; }
.path span { color: var(--page-mute); font-size: 12px; }
.path b { font-weight: 500; font-size: 19px; letter-spacing: -0.02em; }
.path em { font-style: normal; color: var(--page-mute); font-size: 15px; }
.path i { font-style: normal; color: var(--page-mute); }
.contact { padding: clamp(64px, 12vh, 140px) 0 48px; border-top: 1px solid var(--page-line); }
.contact .big { display: inline-block; font-weight: 600; font-size: clamp(30px, 6.4vw, 96px); letter-spacing: -0.055em; line-height: 1; border-bottom: 2px solid var(--page-line); padding-bottom: 8px; word-break: break-all; }
.contact .big:hover { border-color: var(--page-ink); }
.links { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 32px; font-size: 13px; color: var(--page-mute); }
.links a:hover { color: var(--page-ink); }
footer a { color: inherit; }
footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding-top: 20px; padding-bottom: 36px; border-top: 1px solid var(--page-line); font-size: 11px; color: var(--page-mute); }

/* Responsive */
@media (max-width: 1100px) {
  .web { grid-column: 1 / span 8; } .app { grid-column: 9 / span 4; }
  .ai { grid-column: 1 / span 5; } .seat { grid-column: 6 / span 7; }
  .gate { grid-column: 1 / span 7; } .watch { grid-column: 8 / span 5; }
  .car { grid-column: 1 / -1; } .entry { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .intro { grid-template-columns: 1fr; gap: 16px; padding-top: 32px; }
  .top .role { display: none; } .top .who { margin-right: auto; }
  .controls { gap: 8px; padding: 10px 0; }
  .dial { width: 100%; } .dl { width: 56px; flex-shrink: 0; font-size: 10px; }
  .opts { flex: 1; overflow-x: auto; scrollbar-width: none; } .opts::-webkit-scrollbar { display: none; }
  .opts button { flex: 1; padding: 6px 8px; font-size: 12px; }
  .shuffle { display: none; }
  .wall { grid-template-columns: repeat(6, 1fr); gap: 24px 12px; }
  .web, .seat, .gate, .car, .entry { grid-column: 1 / -1; }
  .app { grid-column: 1 / span 3; } .ai { grid-column: 4 / span 3; }
  .watch { grid-column: 1 / -1; }
  .story { grid-template-columns: 1fr; gap: 12px; }
  .facts { grid-template-columns: 1fr; }
  .path { grid-template-columns: 32px 1fr 20px; } .path em { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }