/* v3: the case films, the read that shares their scenes, the case heroes, the home wall and the small surprises.
   Sizes inside a film are container units (cqw, cqh, cqmin), so one scene lays itself out for a wide film,
   full screen, or a tall phone. */

@property --sweep { syntax: "<number>"; inherits: true; initial-value: 1; }

:root { --ink3: #0b0b0d; --paper3: #f3efe7; --cream3: #f6f2ea; }

/* ============================================================================================
   The film player
   ============================================================================================ */
.f3 { --acc: #ff5a1f; --acc-2: var(--acc); --acc-ink: #0b0b0d; position: relative; width: 100%; border-radius: clamp(14px, 1.6vw, 26px); overflow: hidden; background: var(--card, #fff); isolation: isolate; box-shadow: 0 0 0 1px rgba(11, 11, 13, 0.08), 0 1px 2px rgba(11, 11, 13, 0.06), 0 24px 50px -30px rgba(11, 11, 13, 0.32), 0 40px 90px -50px color-mix(in srgb, var(--acc) 45%, transparent); user-select: none; -webkit-user-select: none; }
.f3-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; container-type: size; overflow: hidden; cursor: pointer; perspective: 1400px; }
@media (max-width: 760px) { .f3-stage { aspect-ratio: 4 / 5; } }
.f3:fullscreen { border-radius: 0; display: grid; place-items: center; background: #fff; }
.f3:fullscreen .f3-stage { width: min(100vw, calc(100vh * 16 / 9)); aspect-ratio: 16 / 9; }
@media (max-aspect-ratio: 1/1) { .f3:fullscreen .f3-stage { width: 100vw; aspect-ratio: auto; height: 100vh; } }
.f3::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0.09; mix-blend-mode: overlay; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* big play, before it starts */
.f3-play { position: absolute; z-index: 6; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 14px; padding: 16px 26px 16px 18px; border-radius: 99px; background: var(--acc); color: var(--ink, #0b0b0d); font: 700 clamp(15px, 1.2vw, 18px)/1 var(--f-sans); letter-spacing: -0.01em; box-shadow: 0 0 0 1px rgba(11, 11, 13, 0.06), 0 12px 36px -10px color-mix(in srgb, var(--acc) 70%, rgba(11, 11, 13, 0.4)); transition: transform 0.4s var(--ease), opacity 0.3s; }
/* ink on every accent (5.4:1 or better): the films' own white-on-red and white-on-blue read 3.3 to 3.6:1 here */
.f3-play i { width: 34px; height: 34px; border-radius: 50%; background: var(--ink, #0b0b0d); position: relative; flex: none; }
.f3-play i::after { content: ""; position: absolute; left: 13px; top: 10px; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent var(--acc); }
.f3-play:hover { transform: translate(-50%, -50%) scale(1.05); }
.f3.has-started .f3-play { opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(0.8); }
.f3:not(.has-started) .sc-shot[data-i="0"] { visibility: visible !important; opacity: 0.35 !important; filter: blur(2px); }

/* the bar: a frosted white capsule floating in the frame, so it reads on any scene's ground */
.f3-ui { position: absolute; z-index: 7; left: clamp(8px, 1.2vw, 16px); right: clamp(8px, 1.2vw, 16px); bottom: clamp(8px, 1.2vw, 16px); display: flex; align-items: center; gap: 12px; padding: 6px 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); box-shadow: 0 0 0 1px rgba(11, 11, 13, 0.08), 0 10px 28px -12px rgba(11, 11, 13, 0.4); color: var(--ink, #0b0b0d); opacity: 0; transform: translateY(8px); transition: opacity 0.35s, transform 0.35s var(--ease); }
.f3-ui { pointer-events: none; }
.f3:hover .f3-ui, .f3:focus-within .f3-ui, .f3.is-ended .f3-ui, .f3:not(.is-playing).has-started .f3-ui, .f3.is-scrubbing .f3-ui { opacity: 1; transform: none; pointer-events: auto; }
@media (pointer: coarse) { .f3.has-started .f3-ui { opacity: 1; transform: none; pointer-events: auto; } }
.f3-btn { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; background: transparent; color: var(--ink, #0b0b0d); font: 700 12px/1 var(--f-sans); transition: background 0.2s; }
.f3-btn:hover { background: rgba(11, 11, 13, 0.07); }
.f3-btn[data-state] { background: var(--ink, #0b0b0d); color: #fff; }
.f3-btn[data-state]:hover { background: #2a2a2e; }
.f3-btn[data-state="play"]::before { content: ""; margin-left: 3px; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; }
.f3-btn[data-state="pause"]::before { content: ""; width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; box-sizing: border-box; }
.f3-btn.is-speed { width: auto; padding: 0 12px; border-radius: 99px; font-variant-numeric: tabular-nums; }
.f3-track { position: relative; flex: 1; height: 26px; cursor: pointer; touch-action: none; }
.f3-track::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 4px; border-radius: 4px; background: rgba(11, 11, 13, 0.14); }
.f3-fill { position: absolute; left: 0; right: 0; top: 11px; height: 4px; border-radius: 4px; background: var(--acc-tx, #0b0b0d); transform-origin: 0 50%; transform: scaleX(0); }
.f3-track:hover::after { content: attr(data-hover); position: absolute; bottom: 28px; left: calc(var(--hover, 0) * 100%); transform: translateX(-50%); white-space: nowrap; padding: 6px 10px; border-radius: 8px; background: rgba(11, 11, 13, 0.9); color: #fff; font: 600 12px/1 var(--f-sans); pointer-events: none; }
.f3-ticks { position: absolute; inset: 0; }
.f3-tick { position: absolute; top: 7px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: transparent; }
.f3-tick::after { content: ""; position: absolute; left: 5px; top: 4px; width: 2px; height: 4px; background: rgba(11, 11, 13, 0.5); border-radius: 1px; }
.f3-time { font: 500 12px/1 var(--f-sans); font-variant-numeric: tabular-nums; opacity: 0.85; white-space: nowrap; }
.f3-chap { position: absolute; z-index: 7; left: clamp(14px, 1.6vw, 24px); top: clamp(12px, 1.4vw, 20px); margin: 0; padding: 7px 12px; border-radius: 99px; background: rgba(255, 255, 255, 0.88); color: var(--ink, #0b0b0d); box-shadow: 0 0 0 1px rgba(11, 11, 13, 0.1); font: 600 11px/1 var(--f-sans); letter-spacing: 0.16em; text-transform: uppercase; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity 0.35s; pointer-events: none; }
.f3.has-started .f3-chap { opacity: 1; }
@media (max-width: 560px) { .f3-time { display: none; } .f3-ui { gap: 8px; } }

/* ============================================================================================
   Scenes
   ============================================================================================ */
.sc { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 2.6cqmin; padding: 8cqmin 8cqw 10cqmin; overflow: hidden; visibility: hidden; transform-origin: 50% 50%; }
.sc.is-ink { background: radial-gradient(120% 90% at 85% 10%, color-mix(in srgb, var(--acc) 14%, transparent), transparent 60%), var(--ink3); color: #f5f2ec; }
.sc.is-deep { background: radial-gradient(90% 120% at 10% 100%, color-mix(in srgb, var(--acc-2) 38%, transparent), transparent 65%), radial-gradient(80% 80% at 90% 0%, color-mix(in srgb, var(--acc) 30%, transparent), transparent 60%), #0a0a10; color: #f5f2ec; }
.sc.is-paper { background: var(--paper3); color: #121212; }
.sc.is-acc { background: var(--acc); color: var(--acc-ink); }
.sc.is-ink .k-acc, .sc.is-deep .k-acc { color: var(--acc); }
.sc.is-paper .k-acc { color: color-mix(in srgb, var(--acc) 70%, #000); }
.k-acc { font-style: normal; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 92%; background-size: calc(var(--sweep) * 100%) 0.07em; }
.sc.is-acc .k-acc { background-size: calc(var(--sweep) * 100%) 0.09em; }

.k-kicker { margin: 0; font: 650 clamp(10px, 2cqmin, 22px)/1.25 var(--f-sans); letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.72; max-width: 70cqw; }
.k-h { margin: 0; font: 800 8.6cqmin/0.95 var(--f-sans); letter-spacing: -0.045em; max-width: 21ch; text-wrap: balance; }
.k-h-s { font-size: 5.4cqmin; max-width: 28ch; line-height: 1; }
.t-statement.is-xl .k-h { font-size: 12.5cqmin; line-height: 0.9; }
.t-statement.is-center { align-items: center; text-align: center; }
.k-sub { margin: 0; font: 450 clamp(12px, 2.7cqmin, 30px)/1.4 var(--f-sans); letter-spacing: -0.01em; max-width: 54ch; opacity: 0.78; text-wrap: pretty; }
.k-cap { font-size: clamp(11px, 2.2cqmin, 24px); }
.t-cards .k-cap, .t-shot .k-cap { position: relative; z-index: 20 !important; padding: 0.7em 1.1em; border-radius: 99px; background: rgba(11, 11, 13, 0.78); color: #f5f2ec; opacity: 1; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); max-width: 70ch; }

/* counters */
.t-counter { gap: 1.4cqmin; }
.k-num { font: 800 min(27cqmin, 19cqw)/0.82 var(--f-sans); letter-spacing: -0.065em; font-variant-numeric: tabular-nums; transform-origin: 0 70%; white-space: nowrap; }
.sc.is-ink .k-num, .sc.is-deep .k-num { color: var(--acc); }
.k-num-l { margin: 0; font: 700 4.6cqmin/1.05 var(--f-sans); letter-spacing: -0.03em; max-width: 26ch; }

/* stats row */
.k-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24cqw), 1fr)); gap: 3cqmin 4cqw; width: 100%; margin-top: 2cqmin; }
.k-stat { display: flex; flex-direction: column; gap: 1.2cqmin; padding-top: 2cqmin; border-top: 2px solid color-mix(in srgb, currentColor 25%, transparent); }
.k-stat b { font: 800 min(9.6cqmin, 7.5cqw)/0.9 var(--f-sans); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.k-stat b.is-text { font-size: min(7cqmin, 5.6cqw); white-space: normal; line-height: 1; }
.k-stat > span { font: 500 clamp(11px, 2.4cqmin, 26px)/1.3 var(--f-sans); opacity: 0.8; max-width: 28ch; }
.k-stat.is-hot { border-top-color: var(--acc); }
.sc.is-ink .k-stat.is-hot b, .sc.is-deep .k-stat.is-hot b { color: var(--acc); }
.sc.is-acc .k-stat { border-top-color: color-mix(in srgb, currentColor 35%, transparent); }

/* horizontal bars */
.k-bars-h { display: flex; flex-direction: column; gap: 3cqmin; width: 100%; margin-top: 2cqmin; }
.k-bh { display: grid; grid-template-columns: minmax(0, 30%) minmax(0, 1fr) auto; align-items: center; gap: 2.4cqw; }
.k-bh-l { font: 600 clamp(11px, 2.5cqmin, 28px)/1.2 var(--f-sans); opacity: 0.85; }
.k-bh-t { height: 6cqmin; border-radius: 1.2cqmin; background: color-mix(in srgb, currentColor 8%, transparent); overflow: hidden; }
.k-bh-t i { display: block; height: 100%; border-radius: inherit; background: color-mix(in srgb, currentColor 32%, transparent); transform-origin: 0 50%; }
.k-bh.is-hot .k-bh-t i { background: linear-gradient(90deg, var(--acc), var(--acc-2)); }
.sc.is-acc .k-bh.is-hot .k-bh-t i { background: var(--acc-ink); }
.k-bh-v { font: 800 5cqmin/1 var(--f-sans); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.k-bh.is-hot .k-bh-v { color: var(--acc); }
.sc.is-acc .k-bh.is-hot .k-bh-v, .sc.is-paper .k-bh.is-hot .k-bh-v { color: inherit; }
@container (aspect-ratio < 1) { .k-bh { grid-template-columns: minmax(0, 1fr) auto; } .k-bh-l { grid-column: 1 / -1; } }

/* vertical bars */
.k-cols { display: flex; align-items: flex-end; gap: 3cqw; width: 100%; height: 50cqh; margin-top: 2cqmin; }
.k-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 1.2cqmin; height: 100%; }
.k-col b { font: 800 4.6cqmin/1 var(--f-sans); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.k-col i { width: 100%; max-width: 13cqw; height: calc(var(--h) * 36cqh); border-radius: 1.2cqmin 1.2cqmin 0.4cqmin 0.4cqmin; background: color-mix(in srgb, currentColor 26%, transparent); transform-origin: 50% 100%; }
.k-col.is-hot i { background: linear-gradient(to top, var(--acc-2), var(--acc)); box-shadow: 0 0 6cqmin -1cqmin var(--acc); }
.k-col.is-hot b { color: var(--acc); font-size: 7cqmin; }
.k-col span { font: 600 clamp(10px, 2.2cqmin, 22px)/1 var(--f-sans); opacity: 0.75; text-transform: uppercase; letter-spacing: 0.12em; }

/* the climbing line */
.k-line { position: relative; width: 100%; height: 48cqh; margin-top: 3cqmin; color: var(--acc); }
.k-line svg { width: 100%; height: 100%; overflow: visible; }
.k-pt { position: absolute; transform: translate(-50%, -125%); display: flex; flex-direction: column; align-items: center; gap: 0.4cqmin; color: #f5f2ec; white-space: nowrap; }
.sc.is-paper .k-pt { color: #121212; }
.k-pt b { font: 800 4cqmin/1 var(--f-sans); letter-spacing: -0.03em; }
.k-pt span { font: 600 clamp(9px, 1.8cqmin, 18px)/1 var(--f-sans); opacity: 0.6; text-transform: uppercase; letter-spacing: 0.12em; }
.k-pt::after { content: ""; position: absolute; left: 50%; bottom: -3.4cqmin; width: 1.8cqmin; height: 1.8cqmin; margin-left: -0.9cqmin; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 0.8cqmin color-mix(in srgb, var(--acc) 30%, transparent); }
.k-pt.is-hot b { color: var(--acc); font-size: 6cqmin; }

/* chips */
.k-chips { display: flex; flex-wrap: wrap; gap: 2cqmin; max-width: 92cqw; margin-top: 1.5cqmin; }
.k-chip { padding: 1.6cqmin 3cqmin; border-radius: 99px; border: 0.35cqmin solid currentColor; font: 700 clamp(12px, 3.1cqmin, 34px)/1.1 var(--f-sans); letter-spacing: -0.02em; }
.k-chip.is-alt { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
.sc.is-acc .k-chip.is-alt { background: var(--acc-ink); border-color: var(--acc-ink); color: var(--acc); }

/* flow */
.k-flow { display: flex; align-items: stretch; gap: 1.6cqw; width: 100%; margin-top: 2cqmin; }
.k-node { flex: 1; display: flex; flex-direction: column; gap: 1.6cqmin; padding: 2.6cqmin; border-radius: 2cqmin; background: color-mix(in srgb, currentColor 8%, transparent); border: 1px solid color-mix(in srgb, currentColor 16%, transparent); font: 700 clamp(12px, 2.9cqmin, 32px)/1.15 var(--f-sans); letter-spacing: -0.02em; }
.k-node span { font: 700 clamp(10px, 1.9cqmin, 20px)/1 var(--f-sans); color: var(--acc); letter-spacing: 0.1em; }
.sc.is-acc .k-node span { color: inherit; opacity: 0.6; }
.k-node:last-child { background: var(--acc); color: var(--acc-ink); border-color: transparent; }
.k-node:last-child span { color: inherit; opacity: 0.6; }
.k-arrow { align-self: center; width: 3.6cqw; height: 0.5cqmin; background: currentColor; position: relative; transform-origin: 0 50%; opacity: 0.6; flex: none; }
.k-arrow::after { content: ""; position: absolute; right: -0.2cqmin; top: 50%; width: 1.6cqmin; height: 1.6cqmin; border-top: 0.5cqmin solid currentColor; border-right: 0.5cqmin solid currentColor; transform: translateY(-50%) rotate(45deg); }
@container (aspect-ratio < 1) { .k-flow { flex-direction: column; } .k-arrow { width: 0.5cqmin; height: 3cqh; transform-origin: 50% 0; } .k-arrow::after { right: auto; left: 50%; top: auto; bottom: -0.2cqmin; transform: translateX(-50%) rotate(135deg); } }

/* the work, as cards */
.t-cards { align-items: center; text-align: center; }
.t-cards .k-h { max-width: 30ch; }
.k-cards { position: relative; width: 100%; flex: 1; min-height: 0; display: grid; place-items: center; }
.k-card { margin: 0; border-radius: 1.4cqmin; overflow: hidden; background: #222; box-shadow: 0 2.4cqmin 6cqmin -1.6cqmin rgba(0, 0, 0, 0.6); aspect-ratio: var(--ar, 4 / 5); }
.k-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.t-cards.is-fan .k-card { --k: 1; position: absolute; height: min(50cqh, 60cqw); transform: translate(calc(var(--x) * var(--k)), calc(var(--y) * var(--k) + 2cqh + (1 - var(--k)) * 80cqh)) rotate(calc(var(--r) * var(--k))); }
@container (aspect-ratio < 1) { .t-cards.is-fan .k-card { height: 46cqh; transform: translate(calc(var(--x) * 0.55 * var(--k)), calc(var(--y) * var(--k) + (1 - var(--k)) * 80cqh)) rotate(calc(var(--r) * var(--k))); } }
.t-cards.is-grid .k-cards { grid-template-columns: repeat(var(--cols, 6), minmax(0, 1fr)); gap: 1.1cqmin; place-items: stretch; align-content: center; width: min(100%, calc(var(--cols, 6) * 14cqh)); flex: none; margin: auto; }
.t-cards.is-grid .k-card { border-radius: 0.8cqmin; }
@container (aspect-ratio < 1) { .t-cards.is-grid .k-cards { grid-template-columns: repeat(6, minmax(0, 1fr)); width: 100%; } }
.t-cards.is-cascade .k-cards { display: flex; justify-content: center; align-items: center; gap: 0; perspective: 1200px; }
.t-cards.is-cascade .k-card { --k: 1; height: 60cqh; margin: 0 -3cqw; transform: translateX(calc((1 - var(--k)) * 70cqw)) rotate(calc((var(--i) - 2) * 4deg)) translateY(calc(var(--i) * 1cqh)) rotateY(calc((1 - var(--k)) * -35deg)); }
@container (aspect-ratio < 1) { .t-cards.is-cascade .k-card { height: 40cqh; margin: 0 -9cqw; } }

/* one screenshot */
.t-shot { align-items: center; text-align: center; }
.k-shotf { margin: 0; width: min(86cqw, 140cqh); aspect-ratio: var(--ar); border-radius: 1.6cqmin; overflow: hidden; box-shadow: 0 4cqmin 10cqmin -2cqmin rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.1); transform-origin: 50% 100%; }
.k-shotf img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }

/* an Instagram-style profile */
.t-profile { align-items: center; }
.k-ig { width: min(70cqw, 92cqh); display: flex; flex-direction: column; gap: 2.4cqmin; padding: 3.4cqmin; border-radius: 3cqmin; background: #fff; color: #121212; box-shadow: 0 4cqmin 10cqmin -3cqmin rgba(0, 0, 0, 0.35); }
.k-ig-head { display: flex; align-items: center; gap: 2.4cqmin; }
.k-ig-head b { display: block; font: 700 3.6cqmin/1 var(--f-sans); letter-spacing: -0.02em; }
.k-ig-av { width: 10cqmin; height: 10cqmin; border-radius: 50%; flex: none; background: conic-gradient(from 200deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75); padding: 0.6cqmin; }
.k-ig-av::after { content: ""; display: block; width: 100%; height: 100%; border-radius: 50%; background: #121212 radial-gradient(circle at 50% 38%, var(--acc) 0 22%, transparent 23%); border: 0.6cqmin solid #fff; box-sizing: border-box; }
.k-ig-btn { display: inline-block; margin-top: 1cqmin; padding: 0.9cqmin 2.4cqmin; border-radius: 1cqmin; background: #0095f6; color: #fff; font: 700 2cqmin/1 var(--f-sans); }
.k-ig-counts { display: grid; grid-template-columns: 1fr; text-align: center; }
.k-ig-counts b { display: block; font: 800 4.6cqmin/1.05 var(--f-sans); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.k-ig-counts .is-main b { font-size: 8cqmin; }
.k-ig-counts span { font: 500 2.1cqmin/1.2 var(--f-sans); opacity: 0.6; }
.k-ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5cqmin; }
.k-ig-grid i { aspect-ratio: 1; overflow: hidden; background: #eee; }
.k-ig-grid img { width: 100%; height: 100%; object-fit: cover; }
.t-profile .k-sub { text-align: center; max-width: 60ch; align-self: center; }

/* spreadsheets */
.t-sheets { align-items: center; text-align: center; }
.k-sheets { position: relative; width: 100%; flex: 1; min-height: 0; display: grid; place-items: center; }
.k-sheet { --k: 1; --m: 1; --wob: 0deg; position: absolute; width: 19cqmin; padding: 1cqmin; border-radius: 1.2cqmin; background: #fff; color: #222; box-shadow: 0 2cqmin 5cqmin -1cqmin rgba(0, 0, 0, 0.5); transform: translate(calc(var(--x) * var(--k)), calc(var(--y) * var(--k))) rotate(calc(var(--r) + var(--wob))) scale(calc((0.3 + 0.7 * var(--k)) * var(--m))); display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.35cqmin; }
.k-sheet b { grid-column: 1 / -1; padding: 0.6cqmin 0.8cqmin; border-radius: 0.6cqmin; background: #1e8e4e; color: #fff; font: 700 1.6cqmin/1 var(--f-sans); text-align: left; }
.k-sheet i { height: 1.3cqmin; background: #eef0f2; border-radius: 0.2cqmin; }
.k-sheet i:nth-of-type(3n + 1) { background: #dfe3e8; }
.k-vault { position: relative; padding: 5cqmin 7cqmin; border-radius: 3cqmin; background: linear-gradient(140deg, color-mix(in srgb, var(--acc) 92%, #fff), var(--acc-2)); color: var(--acc-ink); box-shadow: 0 0 12cqmin -2cqmin var(--acc); display: flex; flex-direction: column; gap: 1.4cqmin; }
.k-vault b { font: 800 9cqmin/0.9 var(--f-sans); letter-spacing: -0.05em; }
.k-vault span { font: 600 2.8cqmin/1.2 var(--f-sans); opacity: 0.8; }

/* stamps on the posters */
.t-stamps { align-items: center; text-align: center; }
.k-stampwall { position: relative; width: 100%; flex: 1; min-height: 0; display: flex; justify-content: center; align-items: center; gap: 1.6cqw; }
.k-stampwall .k-card { height: 56cqh; transform: rotate(var(--r)); }
@container (aspect-ratio < 1) { .k-stampwall { flex-wrap: wrap; } .k-stampwall .k-card { height: 22cqh; } }
.k-stamp { position: absolute; z-index: 3; padding: 1.2cqmin 3cqmin; border: 0.9cqmin solid #1f9d55; border-radius: 1.4cqmin; color: #1f9d55; font: 900 7cqmin/1 var(--f-sans); letter-spacing: 0.06em; transform: rotate(var(--r)); background: rgba(255, 255, 255, 0.86); mix-blend-mode: multiply; box-shadow: inset 0 0 0 0.3cqmin rgba(255, 255, 255, 0.5); }
.k-stamp.is-bad { border-color: #e23b2e; color: #e23b2e; }

/* checklist */
.k-checks { display: flex; flex-direction: column; gap: 2.4cqmin; margin-top: 1cqmin; }
.k-checks li { display: flex; align-items: center; gap: 2.4cqmin; font: 700 clamp(12px, 3.4cqmin, 38px)/1.15 var(--f-sans); letter-spacing: -0.02em; }
.k-checks i { flex: none; width: 5cqmin; height: 5cqmin; border-radius: 50%; background: var(--acc); position: relative; }
.k-checks i::after { content: ""; position: absolute; left: 1.6cqmin; top: 0.9cqmin; width: 1.4cqmin; height: 2.6cqmin; border-right: 0.7cqmin solid var(--acc-ink); border-bottom: 0.7cqmin solid var(--acc-ink); transform: rotate(45deg); }

/* people */
.k-groups { display: flex; gap: 5cqw; margin-top: 3cqmin; width: 100%; }
.k-group { flex: 1; display: flex; flex-direction: column; gap: 2cqmin; }
.k-ppl { display: flex; gap: 1.6cqmin; height: 22cqh; }
.k-ppl svg { height: 100%; width: auto; fill: currentColor; opacity: 0.85; }
.k-group.is-hot .k-ppl svg { fill: var(--acc); opacity: 1; }
.k-group span { font: 650 clamp(11px, 2.6cqmin, 28px)/1.25 var(--f-sans); opacity: 0.85; max-width: 22ch; }
@container (aspect-ratio < 1) { .k-groups { flex-direction: column; gap: 3cqh; } .k-ppl { height: 10cqh; } }

/* two sides */
.k-split { display: flex; align-items: stretch; gap: 3cqw; width: 100%; margin-top: 2cqmin; }
.k-side { flex: 1; display: flex; flex-direction: column; gap: 1.8cqmin; padding: 4cqmin; border-radius: 3cqmin; background: color-mix(in srgb, currentColor 7%, transparent); border: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
.k-side b { font: 800 7cqmin/0.95 var(--f-sans); letter-spacing: -0.045em; }
.k-side span { font: 500 clamp(12px, 2.8cqmin, 30px)/1.3 var(--f-sans); opacity: 0.8; }
.k-side.is-hot { background: var(--acc); color: var(--acc-ink); border-color: transparent; }
.k-ico { width: 8cqmin; height: 8cqmin; color: var(--acc); }
.k-side.is-hot .k-ico { color: inherit; }
.k-ico svg { width: 100%; height: 100%; }
.k-mid { align-self: center; font: 800 8cqmin/1 var(--f-sans); color: var(--acc); }
.sc.is-acc .k-mid { color: inherit; }
@container (aspect-ratio < 1) { .k-split { flex-direction: column; gap: 2cqh; } .k-side b { font-size: 9cqmin; } }

/* quote */
.t-quote { justify-content: center; }
.k-quote { margin: 0; font: 800 7.4cqmin/1 var(--f-sans); letter-spacing: -0.04em; max-width: 22ch; text-wrap: balance; }
.k-by { margin: 0; font: 600 clamp(11px, 2.4cqmin, 26px)/1.3 var(--f-sans); opacity: 0.7; }

/* the newspaper */
.t-paper { flex-direction: row; align-items: center; gap: 4cqw; }
.t-paper .k-kicker { position: absolute; left: 8cqw; top: 6cqmin; }
.k-news { flex: none; width: min(48cqw, 74cqh); aspect-ratio: 3 / 4; padding: 2.6cqmin; background: #fbf8f1; color: #1a1a1a; border-radius: 0.6cqmin; box-shadow: 0 3cqmin 8cqmin -2cqmin rgba(0, 0, 0, 0.35); display: flex; flex-direction: column; gap: 1.6cqmin; transform-origin: 50% 50%; }
.k-news-mast { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 1cqmin; border-bottom: 0.4cqmin double #1a1a1a; }
.k-news-mast b { font: 700 5cqmin/1 Georgia, "Times New Roman", serif; letter-spacing: -0.02em; }
.k-news-mast span { font: 500 1.4cqmin/1 var(--f-sans); opacity: 0.6; }
.k-news-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqmin; }
.k-news-col { display: flex; flex-direction: column; gap: 0.7cqmin; }
.k-news-col i { height: 0.7cqmin; background: #cfcac0; border-radius: 0.2cqmin; }
.k-news-col i:nth-child(5n) { width: 70%; }
.k-ad { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 1cqmin; padding: 2.4cqmin; border: 0.4cqmin solid #1a1a1a; background: linear-gradient(135deg, var(--acc), var(--acc-2)); color: #141006; }
.k-ad b { font: 900 7cqmin/0.9 var(--f-sans); letter-spacing: -0.04em; }
.k-ad span { font: 600 1.7cqmin/1.3 var(--f-sans); max-width: 70%; }
.k-ad-qr { position: absolute; right: 2cqmin; bottom: 2cqmin; width: 34%; aspect-ratio: 1; background: #fff; padding: 0.6cqmin; border-radius: 0.6cqmin; box-shadow: 0 1cqmin 3cqmin rgba(0, 0, 0, 0.25); }
.k-qr { width: 100%; height: 100%; display: block; }
.k-branch { display: flex; flex-direction: column; gap: 1cqmin; padding: 3cqmin 3.6cqmin; border-radius: 2.4cqmin; background: color-mix(in srgb, currentColor 7%, transparent); border: 1px solid color-mix(in srgb, currentColor 18%, transparent); min-width: 28cqw; position: relative; }
.k-branch b { font: 800 5.4cqmin/1 var(--f-sans); letter-spacing: -0.04em; }
.k-branch span { font: 600 2.6cqmin/1.2 var(--f-sans); opacity: 0.7; }
.k-branch.is-0 { background: var(--acc); color: var(--acc-ink); border-color: transparent; }
.t-paper .k-branch { margin-left: -6cqw; }
.t-paper > .k-branch + .k-branch { margin-top: -1cqmin; }
.t-paper { flex-wrap: wrap; align-content: center; }
.t-paper .k-news { margin-right: 2cqw; }
.t-paper .k-branch { flex-basis: 34cqw; }
@container (aspect-ratio >= 1) { .t-paper { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr 1fr; column-gap: 4cqw; row-gap: 3cqmin; align-items: center; } .t-paper .k-news { grid-row: 1 / 3; } .t-paper .k-branch { margin: 0; align-self: end; } .t-paper .k-branch.is-1 { align-self: start; } }
@container (aspect-ratio < 1) { .t-paper { flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 2cqh; } .k-news { width: min(54cqw, 38cqh); margin: 0 !important; } .t-paper .k-branch { margin: 0; min-width: 0; width: 84cqw; flex-basis: auto; padding: 2cqh 4cqw; } .t-paper .k-branch b { font-size: 6cqw; } .t-paper .k-branch span { font-size: 3.4cqw; } .t-paper .k-kicker { position: static; } }

/* the nine-post grid */
.t-grid9 { align-items: center; text-align: center; }
.k-g9 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4cqmin; width: min(46cqh, 60cqw); aspect-ratio: 1; }
.k-g9 i { background-size: 300% 300%; background-color: color-mix(in srgb, var(--acc) 30%, #fff); border-radius: 0.6cqmin; }

/* end card */
.t-end { justify-content: center; }
.t-end .k-h { font-size: 9cqmin; max-width: 20ch; }
.k-endacts { display: flex; flex-wrap: wrap; gap: 1.6cqmin; margin-top: 2cqmin; }
.k-endacts > * { display: inline-flex; align-items: center; gap: 1cqmin; padding: 1.8cqmin 3.2cqmin; border-radius: 99px; font: 700 clamp(12px, 2.4cqmin, 22px)/1 var(--f-sans); text-decoration: none; border: 2px solid currentColor; color: inherit; cursor: pointer; transition: transform 0.3s var(--ease); }
.k-endacts > *:hover { transform: translateY(-2px); }
.k-endacts a { background: var(--acc-ink); color: var(--acc); border-color: var(--acc-ink); }
.sc.is-ink .k-endacts a, .sc.is-deep .k-endacts a { background: var(--acc); color: var(--acc-ink); border-color: var(--acc); }

/* ============================================================================================
   Case page, v3: a hero with the film, then the read
   ============================================================================================ */
.c3-hero { --acc: #ff5a1f; padding-top: calc(var(--header-h) + clamp(28px, 6vh, 72px)); padding-bottom: clamp(40px, 8vh, 96px); }
.c3-top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(20px, 4vw, 64px); align-items: end; margin-bottom: clamp(24px, 5vh, 56px); }
@media (max-width: 900px) { .c3-top { grid-template-columns: 1fr; } }
.c3-kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 clamp(14px, 2.4vh, 24px); }
.c3-kicker .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--acc-tx); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc) 40%, transparent); }
.c3-title { font-size: clamp(48px, 9.2vw, 170px); margin: 0; }
.c3-title em { color: var(--acc-tx); font-style: normal; }
.c3-thesis { margin: 0 0 clamp(14px, 2vh, 22px); font: 600 clamp(19px, 1.8vw, 30px)/1.25 var(--f-sans); letter-spacing: -0.02em; max-width: 30ch; text-wrap: balance; }
.c3-meta { display: grid; grid-template-columns: repeat(3, auto); gap: 6px 26px; margin: 0; justify-content: start; }
.c3-meta div { display: flex; flex-direction: column; gap: 4px; }
.c3-meta dt { font: 500 11px/1 var(--f-sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.c3-meta dd { margin: 0; font-size: 15px; line-height: 1.35; }
@media (max-width: 560px) { .c3-meta { grid-template-columns: 1fr; } }
.c3-hint { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 16px; color: var(--muted); font: 500 12.5px/1.4 var(--f-sans); }
.c3-hint kbd { display: inline-block; min-width: 22px; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--line-2); font: 600 11px/1 var(--f-sans); text-align: center; color: var(--fg); }
.c3-modes { display: inline-flex; gap: 8px; margin-top: 18px; }
.c3-modes a, .c3-modes button { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 99px; border: 1px solid var(--line-2); font: 600 14px/1 var(--f-sans); text-decoration: none; color: var(--fg); transition: background 0.25s, color 0.25s, border-color 0.25s; }
.c3-modes a:hover, .c3-modes button:hover { background: var(--acc); color: var(--ink); border-color: var(--acc); }

/* the read: steps on the left, the stage stuck on the right */
.r3 { --acc: #ff5a1f; position: relative; display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(24px, 4vw, 72px); padding-block: clamp(40px, 8vh, 120px); }
.r3-head { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 16px; padding-bottom: clamp(12px, 2vh, 20px); border-bottom: 1px solid var(--line); }
.r3-head h2 { margin: 0; font: 700 clamp(28px, 3.4vw, 54px)/1 var(--f-sans); letter-spacing: -0.04em; }
.r3-stagewrap { grid-column: 2; grid-row: 2; position: relative; }
.r3-stagebox { position: sticky; top: calc(var(--header-h) + 4vh); border-radius: clamp(14px, 1.6vw, 24px); overflow: hidden; background: var(--card, #fff); box-shadow: 0 0 0 1px rgba(11, 11, 13, 0.08), 0 1px 2px rgba(11, 11, 13, 0.06), 0 24px 50px -30px rgba(11, 11, 13, 0.32); }
.r3-stagebox .f3-stage { cursor: default; aspect-ratio: auto; height: calc(100vh - var(--header-h) - 8vh); max-height: 860px; }
.r3-steps { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; }
.r3-step { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding-block: 6vh; opacity: 0.32; transition: opacity 0.5s var(--ease); }
.r3-step:first-child { min-height: 60vh; }
.r3-step:last-child { min-height: 92vh; }
.r3-step.is-on { opacity: 1; }
.r3-step .mono { color: var(--acc-tx); }
.r3-step h3 { margin: 0; font: 700 clamp(26px, 2.6vw, 44px)/1.05 var(--f-sans); letter-spacing: -0.035em; text-wrap: balance; }
.r3-step .prose p, .r3-step .prose li { font-size: clamp(16px, 1.15vw, 19.5px); line-height: 1.6; color: var(--fg-2); }
.r3-step .prose p + p { margin-top: 0.8em; }
.r3-step .prose strong, .r3-step .prose b { color: var(--fg); font-weight: 650; }
.r3-step .pull { font: 700 clamp(22px, 2vw, 32px)/1.2 var(--f-sans) !important; letter-spacing: -0.03em; color: var(--fg) !important; }
.r3-step .list, .r3-step .dots { display: flex; flex-direction: column; gap: 10px; }
.r3-step .list li, .r3-step .dots li { padding-left: 18px; position: relative; }
.r3-step .list li::before, .r3-step .dots li::before { content: ""; position: absolute; left: 0; top: 0.68em; width: 7px; height: 7px; border-radius: 50%; background: var(--acc-tx); }
@media (max-width: 900px) {
  .r3 { grid-template-columns: 1fr; }
  .r3-stagewrap { grid-column: 1; grid-row: 2; position: sticky; top: calc(var(--header-h) + 6px); z-index: 6; box-shadow: 0 0 0 6px var(--paper), 0 22px 30px -14px rgba(11, 11, 13, 0.4); border-radius: 18px; }
  .r3-stagebox { position: relative; top: 0; }
  .r3-stagebox .f3-stage { height: 44vh; }
  .r3-steps { grid-column: 1; grid-row: 3; }
  .r3-step { opacity: 0.45; padding: 22px 4px; margin-bottom: 34vh; position: relative; z-index: 1; min-height: 0; }
  .r3-step.is-on { opacity: 1; }
  .r3-steps { padding-top: 6vh; }
}

/* the work, after the read */
.w3-sec { padding-block: clamp(30px, 6vh, 90px); }
.w3-sec > .r3-head { margin-bottom: clamp(20px, 3vh, 36px); }

/* ============================================================================================
   Small things
   ============================================================================================ */
.egg-toast { position: fixed; z-index: 200; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); transform: translate(-50%, 20px); padding: 12px 18px; border-radius: 14px; background: rgba(255, 255, 255, 0.97); color: var(--ink); font: 600 14px/1.35 var(--f-sans); box-shadow: 0 2px 6px rgba(11, 11, 13, 0.06), 0 18px 44px -16px rgba(11, 11, 13, 0.4); border: 1px solid var(--rule); opacity: 0; pointer-events: none; transition: opacity 0.35s, transform 0.45s var(--ease); max-width: calc(100vw - 32px); text-align: center; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.egg-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* atmosphere */
.f3-stage { background: var(--ink3); }
.f3-aura { position: absolute; inset: -10%; z-index: 0; pointer-events: none; filter: blur(9cqmin); opacity: 0.55; }
.f3-aura i { position: absolute; width: 46cqmin; height: 46cqmin; border-radius: 50%; background: var(--acc); left: 58%; top: 8%; mix-blend-mode: screen; opacity: 0.55; }
.f3-aura i:nth-child(2) { background: var(--acc-2); left: 6%; top: 52%; width: 56cqmin; height: 56cqmin; opacity: 0.45; }
.f3-aura i:nth-child(3) { background: #ffffff; left: 40%; top: 70%; width: 22cqmin; height: 22cqmin; opacity: 0.08; }
.sc.is-ink { background: radial-gradient(120% 90% at 85% 10%, color-mix(in srgb, var(--acc) 10%, transparent), transparent 60%), rgba(11, 11, 13, 0.72); }
.sc.is-deep { background: radial-gradient(90% 120% at 10% 100%, color-mix(in srgb, var(--acc-2) 30%, transparent), transparent 65%), radial-gradient(80% 80% at 90% 0%, color-mix(in srgb, var(--acc) 24%, transparent), transparent 60%), rgba(10, 10, 16, 0.78); }
.sc { z-index: 1; }
.sc > *:not(.k-ghost) { position: relative; z-index: 1; }
.k-ghost { position: absolute; z-index: 0; right: -4cqw; bottom: -6cqmin; font: 900 34cqmin/0.8 var(--f-sans); letter-spacing: -0.06em; white-space: nowrap; color: transparent; -webkit-text-stroke: 0.3cqmin var(--ghost, rgba(245, 242, 236, 0.16)); pointer-events: none; user-select: none; }
.sc.is-acc .k-ghost { --ghost: color-mix(in srgb, var(--acc-ink) 22%, transparent); }
.sc.is-paper .k-ghost { --ghost: rgba(18, 18, 18, 0.12); }
.f3-wipe { position: absolute; inset: 0; z-index: 5; display: block; pointer-events: none; transform: scaleX(0); }
.f3-hud { position: absolute; z-index: 7; right: clamp(14px, 1.6vw, 24px); top: clamp(12px, 1.4vw, 20px); margin: 0; padding: 7px 12px; border-radius: 99px; background: rgba(255, 255, 255, 0.88); color: var(--ink, #0b0b0d); box-shadow: 0 0 0 1px rgba(11, 11, 13, 0.1); font: 600 11px/1 var(--f-sans); letter-spacing: 0.16em; font-variant-numeric: tabular-nums; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity 0.35s; pointer-events: none; }
.f3.has-started .f3-hud { opacity: 1; }

/* ============================================================================================
   Home: the wall
   ============================================================================================ */
html:has(.h3) body { overflow: hidden; }
.h3 { --focus: transparent; position: fixed; inset: 0; overflow: hidden; background: #09090b; color: #f5f2ec; }
.h3-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.h3.is-dragging .h3-canvas { cursor: grabbing; }
.h3-shade { position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(90deg, rgba(9, 9, 11, 0.97) 0%, rgba(9, 9, 11, 0.93) 30%, rgba(9, 9, 11, 0.6) 40%, rgba(9, 9, 11, 0.12) 52%, rgba(9, 9, 11, 0) 60%),
  linear-gradient(180deg, rgba(9, 9, 11, 0.55), rgba(9, 9, 11, 0) 18%, rgba(9, 9, 11, 0) 80%, rgba(9, 9, 11, 0.6));
  transition: background 0.6s; }
.h3-shade::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 70% at 70% 50%, color-mix(in srgb, var(--focus) 16%, transparent), transparent 70%); transition: background 0.6s; }
.h3.is-thinking .h3-shade { background: linear-gradient(90deg, rgba(9, 9, 11, 0.96) 0%, rgba(9, 9, 11, 0.9) 30%, rgba(9, 9, 11, 0.3) 50%, rgba(9, 9, 11, 0.1) 100%); }
.h3-panel { position: absolute; z-index: 3; left: 0; top: 0; bottom: 0; width: min(600px, 44vw); display: flex; flex-direction: column; justify-content: space-between; gap: 2vh; padding: calc(var(--header-h) + 3vh) 0 3vh var(--pad); }
.h3-kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 1.4vh; color: rgba(245, 242, 236, 0.72); }
.h3-dot { width: 8px; height: 8px; border-radius: 50%; background: #3df07f; box-shadow: 0 0 0 4px rgba(61, 240, 127, 0.18); animation: h3-live 2.4s ease-in-out infinite; }
@keyframes h3-live { 50% { box-shadow: 0 0 0 7px rgba(61, 240, 127, 0.05); } }
.h3-title { margin: 0; display: flex; flex-direction: column; gap: 1.4vh; }
.h3-big { font: 800 clamp(84px, min(11.5vw, 19vh), 210px)/0.8 var(--f-sans); letter-spacing: -0.065em; font-variant-numeric: tabular-nums; background: linear-gradient(100deg, #fff 30%, #ffb08a 60%, #9fb1ff 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.h3-lede { font: 600 clamp(17px, 1.35vw, 22px)/1.3 var(--f-sans); letter-spacing: -0.02em; color: rgba(245, 242, 236, 0.86); max-width: 30ch; }
.h3-index { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.h3-index > ol { display: flex; flex-direction: column; }
.h3-row { position: relative; border-top: 1px solid rgba(245, 242, 236, 0.1); }
.h3-row:last-child { border-bottom: 1px solid rgba(245, 242, 236, 0.1); }
.h3-co { display: flex; align-items: baseline; gap: 14px; padding: clamp(6px, 1.05vh, 12px) 0; text-decoration: none; color: inherit; }
.h3-i { color: rgba(245, 242, 236, 0.4); min-width: 2.2em; font-size: 10.5px; }
.h3-name { font: 800 clamp(28px, min(3.2vw, 5.4vh), 58px)/0.98 var(--f-sans); letter-spacing: -0.045em; transition: color 0.35s, transform 0.5s var(--ease); }
.h3-co:hover .h3-name, .h3-co:focus-visible .h3-name { color: var(--acc); transform: translateX(10px); }
.h3-len { margin-left: 4px; align-self: center; padding: 5px 9px; border-radius: 99px; border: 1px solid rgba(245, 242, 236, 0.2); font-size: 10px; letter-spacing: 0.12em; color: rgba(245, 242, 236, 0.7); white-space: nowrap; transition: background 0.3s, color 0.3s, border-color 0.3s; }
.h3-co:hover .h3-len, .h3-sub:hover .h3-len { background: var(--acc); border-color: var(--acc); color: #0b0b0d; }
.h3-line { margin: 0; color: rgba(245, 242, 236, 0.66); font-size: 14px; line-height: 1.4; overflow: hidden; max-height: 0; padding-left: calc(2.2em + 14px); transition: max-height 0.45s var(--ease), padding 0.45s; }
.h3-row:hover .h3-line, .h3-row:focus-within .h3-line { max-height: 64px; padding-bottom: 10px; }
.h3-role { display: block; margin-top: 3px; font-size: 10px; color: rgba(245, 242, 236, 0.42); }
.h3-subs { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; padding: 0 0 clamp(6px, 1vh, 12px) calc(2.2em + 14px); }
.h3-sub { display: flex; align-items: center; gap: 8px; padding: 5px 0; text-decoration: none; color: rgba(245, 242, 236, 0.88); font: 650 clamp(14px, 1.05vw, 17px)/1.2 var(--f-sans); letter-spacing: -0.015em; }
.h3-sub-i { color: rgba(245, 242, 236, 0.38); font-size: 9.5px; }
.h3-sub:hover .h3-sub-n, .h3-sub:focus-visible .h3-sub-n { color: var(--acc); }
.h3-sub .h3-len { margin-left: 0; padding: 3px 7px; font-size: 9px; opacity: 0; transform: translateX(-4px); transition: opacity 0.3s, transform 0.3s var(--ease), background 0.3s, color 0.3s; }
.h3-sub:hover .h3-len, .h3-sub:focus-visible .h3-len { opacity: 1; transform: none; }
.h3-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.h3-reel { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px 0 8px; border-radius: 99px; background: #f5f2ec; color: #0b0b0d; font: 700 14px/1 var(--f-sans); transition: transform 0.3s var(--ease), background 0.3s; }
.h3-reel i { width: 30px; height: 30px; border-radius: 50%; background: #0b0b0d; position: relative; }
.h3-reel i::after { content: ""; position: absolute; left: 12px; top: 9px; border-style: solid; border-width: 6px 0 6px 9px; border-color: transparent transparent transparent #f5f2ec; }
.h3-reel:hover { background: #ff5a1f; transform: translateY(-2px); }
.h3-think { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 99px; border: 1px solid rgba(245, 242, 236, 0.22); color: rgba(245, 242, 236, 0.85); font: 600 13px/1 var(--f-sans); }
.h3-think kbd { padding: 4px 7px; border-radius: 6px; border: 1px solid rgba(245, 242, 236, 0.3); font: 600 10.5px/1 var(--f-sans); }
.h3-think[aria-pressed="true"] { background: #ffd23f; color: #0b0b0d; border-color: #ffd23f; }
.h3-think[aria-pressed="true"] kbd { border-color: rgba(0, 0, 0, 0.3); }
.h3-help { position: absolute; z-index: 2; right: var(--pad); bottom: 2.4vh; margin: 0; color: rgba(245, 242, 236, 0.5); font-size: 10px; pointer-events: none; }

.h3-peek { position: absolute; z-index: 4; right: var(--pad); top: calc(var(--header-h) + 3vh); width: min(360px, 30vw); padding: 22px 22px 18px; border-radius: 20px; background: rgba(12, 12, 15, 0.72); border: 1px solid color-mix(in srgb, var(--acc) 45%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 20px 60px -20px color-mix(in srgb, var(--acc) 60%, transparent); display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.h3-peek p { margin: 0; }
.h3-peek .mono { color: var(--acc); }
.h3-peek b { font: 800 clamp(44px, 4.4vw, 76px)/0.9 var(--f-sans); letter-spacing: -0.055em; color: var(--acc); }
.h3-peek span { font: 600 15px/1.3 var(--f-sans); }
.h3-peek [data-p-line] { color: rgba(245, 242, 236, 0.72); font-size: 14px; line-height: 1.45; }
.h3-peek-go { margin-top: 4px; color: rgba(245, 242, 236, 0.6) !important; font-size: 10px !important; }

.h3-tip { position: fixed; z-index: 6; left: 0; top: 0; max-width: 300px; padding: 11px 13px; border-radius: 12px; background: rgba(12, 12, 15, 0.86); border: 1px solid rgba(255, 255, 255, 0.1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); pointer-events: none; display: flex; flex-direction: column; gap: 4px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4); }
.h3-tip b { font: 700 12px/1.2 var(--f-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--acc); }
.h3-tip span { font: 500 13px/1.42 var(--f-sans); color: rgba(245, 242, 236, 0.88); }
.h3-notes { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.h3-note { position: absolute; left: 0; top: 0; padding: 10px 11px; border-radius: 10px; background: rgba(10, 10, 12, 0.9); border-left: 3px solid var(--acc); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); display: flex; flex-direction: column; gap: 5px; margin-left: 2px; }
.h3-note b { font: 700 9.5px/1.2 var(--f-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--acc); }
.h3-note span { font: 500 12px/1.38 var(--f-sans); color: rgba(245, 242, 236, 0.92); }

.h3-zoom { position: fixed; z-index: 150; border-radius: 12px; overflow: hidden; background: var(--acc); }
.h3-zoom img { width: 100%; height: 100%; object-fit: cover; }
.h3-zoom.is-wipe { inset: 0; border-radius: 0; }
.h3-reelbox { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 4vh 3vw; background: rgba(255, 255, 255, 0.86); -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1); }
.h3-reelbox .f3 { width: min(1500px, 94vw, calc(88vh * 16 / 9)); }
.h3-reelx { position: absolute; right: 2vw; top: 2vh; width: 46px; height: 46px; border-radius: 50%; background: #fff; color: #0b0b0d; box-shadow: inset 0 0 0 1px #e7e4de, 0 6px 16px -8px rgba(0, 0, 0, 0.25); font-size: 26px; line-height: 1; }
.h3-reelx:hover { background: #0b0b0d; color: #fff; }
html.reel-open .site-header { opacity: 0; pointer-events: none; }
.h3.no-webgl .h3-canvas { display: none; }

@media (max-width: 900px) {
  .h3-panel { width: 100%; padding-right: var(--pad); justify-content: flex-end; }
  .h3-shade { background: linear-gradient(180deg, rgba(9, 9, 11, 0.94) 0%, rgba(9, 9, 11, 0.82) 22%, rgba(9, 9, 11, 0.12) 36%, rgba(9, 9, 11, 0.18) 44%, rgba(9, 9, 11, 0.95) 58%, #09090b); }
  .h3-subs { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 10px; }
  .h3-sub { padding: 7px 11px; border-radius: 99px; border: 1px solid rgba(245, 242, 236, 0.18); font-size: 13px; }
  .h3-sub-i, .h3-sub .h3-len { display: none; }
  .h3-kicker { font-size: 10px; }
  .h3-intro { position: absolute; left: var(--pad); right: var(--pad); top: calc(var(--header-h) + 1vh); }
  .h3-big { font-size: clamp(64px, 22vw, 120px); }
  .h3-lede { font-size: 15px; }
  .h3-index { flex: none; }
  .h3-name { font-size: clamp(22px, 7vw, 34px); }
  .h3-co { padding: 7px 0; }
  .h3-subs { grid-template-columns: 1fr 1fr; padding-left: 0; }
  .h3-sub { font-size: 13.5px; }
  .h3-line { display: none; }
  .h3-peek, .h3-help { display: none; }
  .h3-foot { margin-top: 8px; }
  .h3-reel, .h3-think { height: 40px; font-size: 12.5px; }
}
@media (max-width: 900px) and (max-height: 760px) { .h3-sub-i { display: none; } .h3-intro .h3-lede-2 { display: none; } }

/* ============================================================================================
   Work, v3: a band per company, a card per case
   ============================================================================================ */
.w4 { padding-top: calc(var(--header-h) + clamp(30px, 7vh, 90px)); }
.w4-head { margin-bottom: clamp(30px, 6vh, 70px); }
.w4-head .mono { color: var(--muted); margin-bottom: 14px; display: block; }
.w4-title { font-size: clamp(44px, 7.4vw, 132px); margin: 0; }
.w4-title em { color: var(--blue); font-style: normal; }
.w4-list { display: flex; flex-direction: column; gap: clamp(36px, 7vh, 90px); }
.w4-co-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; padding-top: 18px; border-top: 1px solid var(--line); }
.w4-i { color: var(--muted); }
.w4-co-name { font-size: clamp(36px, 5vw, 84px); text-decoration: none; transition: color 0.3s; }
.w4-co-name:hover { color: var(--acc-tx); }
.w4-role { margin-left: auto; color: var(--muted); }
.w4-co-line { margin: 8px 0 22px; color: var(--fg-2); font-size: clamp(16px, 1.3vw, 21px); }
.w4-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.w4-cards.is-many { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .w4-cards.is-many { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .w4-cards.is-many { grid-template-columns: minmax(0, 1fr); } }
/* a card leads with the case's real work (posts and posters fanned, screens stacked, a phone rising) or, where
   there is none to show, with its number set large in the case's accent. Pointing at one spreads the work out, then
   its film plays inside it (lens.js). */
.w4-card { position: relative; display: flex; flex-direction: column; gap: 14px; min-height: clamp(300px, 40vh, 400px); padding: 18px 22px 22px; border-radius: 18px; background: var(--card); color: var(--ink); text-decoration: none; overflow: hidden; isolation: isolate; container-type: inline-size; box-shadow: 0 0 0 1px var(--rule), 0 1px 2px rgba(11, 11, 13, 0.04); transition: box-shadow 0.6s var(--ease), translate 0.6s var(--ease); }
.w4-card:hover, .w4-card:focus-visible { box-shadow: 0 0 0 1px color-mix(in srgb, var(--acc-tx) 45%, var(--rule)), 0 2px 4px rgba(11, 11, 13, 0.04), 0 34px 70px -40px color-mix(in srgb, var(--acc-tx) 55%, rgba(11, 11, 13, 0.5)); }
.w4-len { order: -1; align-self: flex-start; justify-self: start; padding: 6px 10px; border-radius: 99px; background: var(--acc); color: var(--ink); font-size: 10.5px; font-weight: 600; }
.w4-txt { display: flex; flex-direction: column; gap: 6px; margin-top: auto; min-width: 0; }
.w4-num { font: 800 clamp(40px, 16cqi, 92px)/0.9 var(--f-sans); letter-spacing: -0.05em; white-space: nowrap; max-width: 100%; color: var(--acc-tx); font-variant-numeric: tabular-nums; }
.w4-num.is-long { font-size: clamp(30px, 11.5cqi, 80px); }
.w4-numl { font: 600 14.5px/1.25 var(--f-sans); color: var(--ink-2); }
.w4-name { margin-top: 12px; font: 800 clamp(22px, 1.8vw, 30px)/1 var(--f-sans); letter-spacing: -0.035em; }
.w4-line { font: 500 14px/1.4 var(--f-sans); color: var(--ink-2); max-width: 40ch; }
/* no work to show: the number is the picture */
.w4-card.is-type .w4-txt { flex: 1; margin-top: 4px; }
.w4-card.is-type .w4-num { font-size: clamp(60px, 29cqi, 150px); line-height: 0.84; }
.w4-card.is-type .w4-num.is-long { font-size: clamp(40px, 15cqi, 120px); }
.w4-card.is-type .w4-name { margin-top: auto; padding-top: 18px; }

/* the real work, each piece shown whole */
.w4-work { position: relative; display: block; height: clamp(180px, 60cqi, 280px); margin-bottom: 6px; }
.w4-work img { position: absolute; display: block; max-width: none; border-radius: 8px; background: var(--surface); box-shadow: 0 0 0 1px rgba(11, 11, 13, 0.07), 0 2px 3px rgba(11, 11, 13, 0.06), 0 16px 26px -14px rgba(11, 11, 13, 0.42); transition: transform 0.7s var(--ease); }
/* posts and posters: a fan of three, the middle one in front */
.w4-work.is-slides img { --s: 62%; --r: 6deg; --y: 0%; left: 50%; top: 50%; height: 84%; width: auto; aspect-ratio: 4 / 5; object-fit: cover; translate: -50% -50%; transform: translateX(calc((var(--i) - 1) * var(--s))) rotate(calc((var(--i) - 1) * var(--r))) translateY(var(--y)); }
.w4-work.is-slides img:nth-child(2) { z-index: 1; }
.w4-card:is(:hover, :focus-visible) .w4-work.is-slides img { --s: 80%; --r: 3deg; --y: -4%; }
/* screens: stacked like windows, the case's own tool in front */
.w4-work.is-screens img { --sx: 0%; --sy: 0%; width: 80%; height: auto; left: calc(var(--i) * 10%); top: calc((2 - var(--i)) * 14%); z-index: calc(3 - var(--i)); border-radius: 6px; transform: translate(calc((var(--i) - 1) * var(--sx)), calc((var(--i) - 1) * var(--sy))); }
.w4-card:is(:hover, :focus-visible) .w4-work.is-screens img { --sx: 3%; --sy: -14%; }
/* a phone screen, rising out of the card */
.w4-work.is-phone { overflow: hidden; -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent); }
.w4-work.is-phone img { --py: 0%; left: 50%; top: 8%; width: min(46%, 190px); height: auto; translate: -50% 0; border-radius: 14px; transform: translateY(var(--py)); }
.w4-card:is(:hover, :focus-visible) .w4-work.is-phone img { --py: -6%; }

/* a company with one case: one wide card, its words on the left and the work (or its film, on hover) on the right */
@media (min-width: 760px) {
  .w4-cards:not(.is-many) .w4-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-rows: auto minmax(0, 1fr); column-gap: clamp(24px, 4vw, 64px); min-height: clamp(300px, 38vh, 400px); }
  .w4-cards:not(.is-many) .w4-len { grid-area: 1 / 1; }
  .w4-cards:not(.is-many) .w4-txt { grid-area: 2 / 1; }
  .w4-cards:not(.is-many) .w4-work { grid-area: 1 / 2 / 3 / 3; height: auto; min-height: 260px; }
  .w4-cards:not(.is-many) .w4-num { font-size: clamp(56px, 8cqi, 124px); }
  .w4-cards:not(.is-many) .w4-num.is-long { font-size: clamp(40px, 6cqi, 100px); }
  .w4-cards:not(.is-many) .is-type .w4-txt { grid-column: 1 / 3; }
  .w4-cards:not(.is-many) .is-type .w4-num { font-size: clamp(80px, 13cqi, 190px); }
  .w4-cards:not(.is-many) .is-type .w4-num.is-long { font-size: clamp(56px, 9cqi, 150px); }
  .w4-cards:not(.is-many) .w4-line { max-width: 60ch; }
  .w4-cards:not(.is-many) .w4-work.is-slides img { height: 86%; }
  .w4-cards:not(.is-many) .w4-work.is-phone img { width: min(34%, 230px); }
}
.ws-len { margin-left: auto; padding: 4px 8px; border-radius: 99px; border: 1px solid var(--line-2); font-size: 10px; color: var(--muted); white-space: nowrap; }

/* ============================================================================================
   The small things
   ============================================================================================ */
::selection { background: color-mix(in srgb, var(--case-acc, var(--blue-soft)) 40%, var(--paper)); color: var(--ink); }
.egg-toast small { display: block; margin-top: 4px; font-size: 12px; font-weight: 500; opacity: 0.72; }
.egg-toast kbd, .egg-sheet kbd { display: inline-block; min-width: 20px; padding: 2px 6px; border-radius: 5px; border: 1px solid var(--rule-2); border-bottom-width: 2px; background: var(--card); color: var(--ink); font: 600 11px/1.3 var(--f-sans); text-align: center; }
.egg-work { display: flex; flex-direction: column; gap: 8px; min-width: min(420px, 80vw); text-align: left; }
.egg-work > b { font-size: 15px; }
.egg-work div { display: grid; grid-template-columns: 1fr 120px 52px; gap: 10px; align-items: center; font-size: 12.5px; font-weight: 500; }
.egg-work i { display: block; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #ff5a1f, #5b7cff); width: var(--w); min-width: 3px; }
.egg-work em { font-style: normal; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.egg-work small { opacity: 0.72; }
/* the Konami card: a white card on the paper, the gauge on a pale track, the stamp in a green that reads on white */
.egg-score { position: fixed; z-index: 160; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(420px, 86vw); padding: 28px 28px 34px; border-radius: 26px; background: var(--card); border: 1px solid var(--rule); box-shadow: 0 2px 6px rgba(11, 11, 13, 0.06), 0 40px 90px -30px rgba(11, 11, 13, 0.45); display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--ink); text-align: center; }
.egg-score svg { width: 100%; }
.egg-score b { margin-top: -64px; font: 800 64px/1 var(--f-sans); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.egg-score span { font: 600 13px/1 var(--f-sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.egg-stamp { position: absolute; right: 18px; top: 18px; padding: 6px 12px; border: 4px solid var(--green); border-radius: 10px; color: var(--green); font: 900 20px/1 var(--f-sans); letter-spacing: 0.08em; transform: rotate(12deg); background: rgba(255, 255, 255, 0.7); }
.egg-dog { position: fixed; z-index: 140; left: 0; bottom: 0; width: 240px; aspect-ratio: 16 / 9; pointer-events: none; }
.egg-dog img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; border-radius: 120px 120px 0 0; -webkit-mask-image: radial-gradient(ellipse at 50% 55%, #000 55%, transparent 72%); mask-image: radial-gradient(ellipse at 50% 55%, #000 55%, transparent 72%); }
/* the screensaver: the page goes to paper and the number bounces in the cases' on-paper colours (eggs.js) */
.egg-saver { position: fixed; inset: 0; z-index: 170; background: var(--paper); cursor: none; }
.egg-saver b { position: absolute; left: 0; top: 0; font: 800 clamp(70px, 9vw, 140px)/1 var(--f-sans); letter-spacing: -0.06em; color: #c2410c; will-change: transform; }
/* the ? sheet: a white card over a soft dim of the page */
.egg-sheet { position: fixed; inset: 0; z-index: 180; display: grid; place-items: center; padding: 20px; background: var(--scrim); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.egg-sheet-in { position: relative; width: min(620px, 100%); max-height: 86vh; overflow: auto; padding: 26px 26px 22px; border-radius: 22px; background: var(--card); color: var(--ink); border: 1px solid var(--rule); box-shadow: 0 2px 6px rgba(11, 11, 13, 0.05), 0 40px 100px -30px rgba(11, 11, 13, 0.45); }
.egg-sheet .mono { margin: 4px 0 12px; color: var(--muted); }
.egg-sheet dl { display: flex; flex-direction: column; gap: 8px; margin: 0 0 20px; }
.egg-sheet dl div { display: grid; grid-template-columns: 170px 1fr; gap: 12px; align-items: baseline; font-size: 14px; }
.egg-sheet dd { margin: 0; color: var(--ink-2); }
.egg-sheet ul { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.egg-sheet li { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--paper); border: 1px dashed var(--rule-2); font-size: 13px; }
.egg-sheet li b { font-weight: 650; color: var(--muted); }
.egg-sheet li span { color: var(--muted); font-size: 12px; }
.egg-sheet li.is-found { border-style: solid; border-color: color-mix(in srgb, var(--green) 45%, var(--paper)); background: color-mix(in srgb, var(--green) 7%, var(--card)); }
.egg-sheet li.is-found b { color: var(--ink); }
.egg-x { position: absolute; right: 14px; top: 12px; width: 34px; height: 34px; border-radius: 50%; background: var(--surface); color: var(--ink); font-size: 20px; transition: background-color 0.2s; }
.egg-x:hover { background: var(--rule); }
@media (max-width: 560px) { .egg-sheet ul { grid-template-columns: 1fr; } .egg-sheet dl div { grid-template-columns: 1fr; gap: 2px; } }
.room-egg { position: fixed; inset: 0; z-index: 130; background: #f3efe8; }
.room-egg .rm { position: absolute; }
.room-egg-x { position: absolute; z-index: 60; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); height: 42px; padding: 0 16px; border-radius: 99px; background: rgba(255, 253, 249, 0.86); color: #1d1e22; font: 600 14px/1 var(--f-sans); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); }
html.room-open body { overflow: hidden; }
html.is-party { --case-acc: #ff5a8a; }
html.is-party .h3-big, html.is-party .display { animation: party 1.2s linear infinite; }
@keyframes party { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } }
html.is-15aug .h3-big { background: linear-gradient(180deg, #ff9933 0 33%, #fff 33% 66%, #138808 66%); -webkit-background-clip: text; background-clip: text; }

/* the 404 */
/* the 404 on paper: a faint red wash that turns green when the draw clears it; the big digits are 3:1 or better */
.lost3 { --lost: #e5281e; --won: #1a9447; min-height: 100vh; display: grid; align-items: center; padding: calc(var(--header-h) + 4vh) 0 6vh; background: radial-gradient(70% 60% at 70% 30%, rgba(229, 40, 30, 0.09), transparent 70%), var(--paper); transition: background 1s; }
.lost3.is-cleared { background: radial-gradient(70% 60% at 70% 30%, rgba(26, 148, 71, 0.1), transparent 70%), var(--paper); }
.lost3-in { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.lost3-k { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--muted); }
.lost3-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--lost); box-shadow: 0 0 0 5px rgba(229, 40, 30, 0.16); }
.is-cleared .lost3-dot { background: var(--won); box-shadow: 0 0 0 5px rgba(26, 148, 71, 0.16); }
.lost3-code { position: relative; margin: 0; font: 800 clamp(140px, 26vw, 420px)/0.8 var(--f-sans); letter-spacing: -0.07em; color: var(--lost); font-variant-numeric: tabular-nums; transition: color 0.8s; }
.is-cleared .lost3-code { color: var(--won); }
.lost3-stamp { position: absolute; right: -6%; top: 18%; padding: 0.06em 0.22em; border: 0.06em solid var(--green); border-radius: 0.12em; color: var(--green); font: 900 0.22em/1 var(--f-sans); letter-spacing: 0.06em; font-style: normal; transform: rotate(-10deg); background: rgba(255, 255, 255, 0.82); }
.lost3-say { margin: 0; font: 800 clamp(28px, 3.4vw, 54px)/1 var(--f-sans); letter-spacing: -0.04em; }
.lost3-sub { margin: 0; max-width: 52ch; color: var(--fg-2); font-size: clamp(16px, 1.2vw, 19px); }
.lost3-reel { height: 0; overflow: hidden; width: min(420px, 100%); border-radius: 14px; background: var(--surface); transition: height 0.4s var(--ease); -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); }
.lost3-reel.is-on { height: 56px; }
.lost3-reel span { display: block; height: 56px; line-height: 56px; padding: 0 18px; font: 700 20px/56px var(--f-sans); font-variant-numeric: tabular-nums; }
.lost3-reel .is-win { color: var(--green); }
.lost3-acts { display: flex; gap: 10px; flex-wrap: wrap; }
.lost3-go { width: min(640px, 100%); margin-top: 10px; }
.lost3-go .mono { color: var(--muted); margin-bottom: 10px; }
.lost3-go a { display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; padding: 14px 0; border-top: 1px solid var(--line); text-decoration: none; }
.lost3-go a b { font-size: 20px; letter-spacing: -0.02em; transition: color 0.2s; }
.lost3-go a span { grid-column: 1; color: var(--muted); font-size: 14px; }
.lost3-go a i { grid-row: 1 / 3; grid-column: 2; align-self: center; font-style: normal; transition: transform 0.3s var(--ease); }
.lost3-go a:hover b { color: var(--green); }
.lost3-go a:hover i { transform: translateX(6px); }

/* printing: a one-page statement */
.print-sheet { display: none; }
@media print {
  html, body { background: #fff !important; color: #000 !important; }
  body:has(.print-sheet) > *:not(.print-sheet) { display: none !important; }
  /* everywhere else: the words and the work, without the moving parts */
  .site-header, .progress, .f3, .r3-stagewrap, .f3-chapters, .c3-hint, .c3-modes, .egg-toast, .cursor-tag, .h3-canvas, .site-footer .footer-word, .motion-toggle { display: none !important; }
  .r3 { display: block !important; }
  .r3-step { opacity: 1 !important; min-height: 0 !important; padding: 4mm 0 !important; margin: 0 !important; break-inside: avoid; }
  .r3-step h3, .c3-title, .r3-head h2 { color: #000 !important; }
  .r3-step .prose p, .r3-step .prose li { color: #222 !important; }
  .c3-hero::before { display: none; }
  a { color: #000 !important; }
  .print-sheet { display: block; padding: 10mm; font: 12pt/1.5 Inter, Helvetica, sans-serif; color: #000; }
  .print-sheet h1 { font-size: 30pt; letter-spacing: -0.03em; margin: 0 0 2mm; }
  .print-sheet h2 { font-size: 14pt; margin: 8mm 0 3mm; text-transform: uppercase; letter-spacing: 0.12em; }
  .print-sheet table { width: 100%; border-collapse: collapse; }
  .print-sheet td { padding: 3mm 0; border-bottom: 0.3mm solid #ccc; }
  .print-sheet td + td { text-align: right; font-weight: 700; }
  .print-url { margin-top: 8mm; color: #555; font-size: 10pt; }
}

.on-touch { display: none; }
@media (pointer: coarse) { .on-fine { display: none; } .on-touch { display: inline; } }
/* keep scenes clear of the chapter and scene labels on small stages */
.f3 .sc { padding-top: max(8cqmin, 54px); }
@container (max-width: 520px) { .sc { padding-left: 6cqw; padding-right: 6cqw; } }
@media (pointer: coarse) { .c3-hint { display: none; } }

/* chapters under the film */
.f3-chapters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.f3-chip { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 13px 0 10px; border-radius: 99px; border: 1px solid var(--line-2); background: var(--card); color: var(--fg-2); font: 600 12.5px/1 var(--f-sans); transition: background 0.25s, color 0.25s, border-color 0.25s; }
.f3-chip span { font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.f3-chip:hover { border-color: var(--acc-tx); color: var(--fg); }
.f3-chip.is-on { background: var(--acc); border-color: var(--acc); color: var(--ink); }
.f3-chip.is-on span { color: var(--ink); }
@media (max-width: 760px) { .f3-chapters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); scroll-padding-inline: var(--pad); } .f3-chip { flex: none; } }
/* the ⌘K palette: a white sheet over a soft dim, the chosen row in a blue tint */
.egg-pal { position: fixed; inset: 0; z-index: 185; display: flex; justify-content: center; align-items: flex-start; padding: 14vh 16px 20px; background: var(--scrim); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.egg-pal-in { width: min(620px, 100%); border-radius: 18px; background: var(--card); border: 1px solid var(--rule); box-shadow: 0 2px 6px rgba(11, 11, 13, 0.05), 0 40px 100px -30px rgba(11, 11, 13, 0.45); overflow: hidden; color: var(--ink); }
.egg-pal input { width: 100%; height: 60px; padding: 0 20px; border: 0; border-bottom: 1px solid var(--rule); background: transparent; color: var(--ink); font: 600 18px/1 var(--f-sans); outline: none; }
.egg-pal input::placeholder { color: var(--muted); }
.egg-pal ol { max-height: 52vh; overflow: auto; padding: 6px; }
.egg-pal li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.egg-pal li b { font-size: 15px; }
.egg-pal li span { grid-column: 1; color: var(--ink-2); font-size: 13px; }
.egg-pal li i { grid-row: 1 / 3; grid-column: 2; align-self: center; font: 600 10px/1 var(--f-sans); letter-spacing: 0.14em; text-transform: uppercase; font-style: normal; color: var(--muted); }
.egg-pal li[aria-selected="true"] { background: color-mix(in srgb, var(--blue) 8%, var(--card)); }
.egg-pal li[aria-selected="true"] i { color: var(--blue); }
.egg-pal .is-empty { color: var(--ink-2); cursor: default; }
.egg-pal .mono { margin: 0; padding: 10px 18px 12px; color: var(--muted); font-size: 10px; border-top: 1px solid var(--rule); background: var(--paper); }

/* contact: a brief that writes itself */
.c4 { --acc: #ff5a1f; --acc-tx: #c2410c; padding-top: calc(var(--header-h) + clamp(30px, 7vh, 90px)); padding-bottom: clamp(60px, 10vh, 120px); }
.c4-k { color: var(--muted); margin-bottom: 14px; display: block; }
.c4-title { font-size: clamp(54px, 9vw, 160px); margin: 0; }
.c4-title em { color: var(--acc-tx); font-style: normal; }
.c4-sub { max-width: 56ch; margin: 18px 0 clamp(30px, 6vh, 64px); color: var(--fg-2); font-size: clamp(16px, 1.25vw, 20px); }
.c4-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(24px, 4vw, 70px); align-items: start; }
@media (max-width: 900px) { .c4-grid { grid-template-columns: 1fr; } }
.c4-form { display: flex; flex-direction: column; gap: 22px; }
.c4-field { display: flex; flex-direction: column; gap: 8px; }
.c4-field span, .c4-chips legend { font: 600 11px/1 var(--f-sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.c4-field input, .c4-field textarea { width: 100%; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--control); background: var(--card); color: var(--fg); font: 500 17px/1.4 var(--f-sans); resize: vertical; transition: border-color 0.2s, background 0.2s; }
.c4-field input:focus, .c4-field textarea:focus { outline: none; border-color: var(--acc-tx); background: var(--card); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 22%, transparent); }
.c4-field input::placeholder, .c4-field textarea::placeholder { color: var(--muted); }
.c4-chips { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.c4-chips legend { margin-bottom: 10px; }
.c4-chips button { height: 38px; padding: 0 15px; border-radius: 99px; border: 1px solid var(--line-2); background: var(--card); color: var(--fg-2); font: 600 14px/1 var(--f-sans); transition: all 0.2s; }
.c4-chips button:hover { border-color: var(--fg-2); color: var(--fg); }
.c4-chips button[aria-pressed="true"] { background: var(--acc); border-color: var(--acc); color: var(--ink); }
.c4-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.c4-side { position: sticky; top: calc(var(--header-h) + 20px); display: flex; flex-direction: column; gap: 18px; }
.c4-card { padding: 26px; border-radius: 22px; background: #ffffff; color: #141414; box-shadow: 0 0 0 1px rgba(11, 11, 13, 0.06), 0 2px 4px rgba(11, 11, 13, 0.05), 0 28px 50px -28px rgba(11, 11, 13, 0.4), 0 40px 90px -50px rgba(255, 90, 31, 0.55); transform: rotate(-1.2deg); } /* an index card on the desk */
.c4-card .mono { color: #6b665c; margin: 0 0 10px; }
.c4-card h2 { margin: 0 0 16px; font: 800 clamp(28px, 2.6vw, 42px)/1 var(--f-sans); letter-spacing: -0.04em; overflow-wrap: anywhere; }
.c4-card dl { display: flex; flex-direction: column; gap: 10px; margin: 0 0 16px; }
.c4-card dl div { display: grid; grid-template-columns: 92px 1fr; gap: 10px; padding-top: 10px; border-top: 1px dashed var(--rule-2); font-size: 15px; }
.c4-card dt { color: #6b665c; font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; padding-top: 2px; }
.c4-card dd { margin: 0; font-weight: 600; }
.c4-line { margin: 0 0 14px; font: 600 18px/1.4 var(--f-sans); white-space: pre-wrap; }
.c4-to { margin: 0; color: #6b665c; }
.c4-card .is-new { animation: c4-in 0.45s var(--ease); }
@keyframes c4-in { from { opacity: 0.2; transform: translateY(4px); } }
.c4-qr { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; width: 100%; padding: 0; border: 0; background: none; color: var(--muted); font: 500 14px/1.45 var(--f-sans); text-align: left; cursor: zoom-in; }
.c4-qr-code { display: block; width: 96px; height: 96px; border-radius: 10px; overflow: hidden; background: #fff; padding: 4px; box-shadow: 0 0 0 1px var(--rule); transform-origin: 0 100%; transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease); }
.c4-qr-code svg { display: block; width: 100%; height: 100%; }
.c4-qr:hover .c4-qr-code { box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 70%, transparent); }
.c4-qr.is-big { cursor: zoom-out; }
.c4-qr.is-big .c4-qr-code { transform: scale(2.3); box-shadow: 0 30px 60px -24px rgba(11, 11, 13, 0.5), 0 0 0 1px rgba(11, 11, 13, 0.1); position: relative; z-index: 5; }
.c4-qr.is-big .c4-qr-t { opacity: 0; }
.c4-qr-t { transition: opacity 0.3s; }
@media (pointer: coarse) { .c4-qr { display: none; } }
.c4-elsewhere { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 15px; }

.k-nw { white-space: nowrap; }
.k-node:last-child .k-acc { color: inherit !important; }

/* the hero carries its case's accent, faintly, behind the title */
.c3-hero { position: relative; isolation: isolate; }
.c3-hero::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 92%; background: radial-gradient(42% 50% at 16% 22%, var(--acc), transparent 72%); filter: blur(60px); opacity: 0.1; -webkit-mask-image: linear-gradient(#000 30%, transparent); mask-image: linear-gradient(#000 30%, transparent); pointer-events: none; }
/* the read's rail */
.r3-stagebox { position: sticky; }
.r3-rail { position: absolute; z-index: 8; left: 14px; right: 14px; top: 10px; display: flex; gap: 4px; padding: 4px 6px; border-radius: 99px; background: rgba(255, 255, 255, 0.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 0 0 1px rgba(11, 11, 13, 0.08); pointer-events: none; } /* a white capsule, so the parts read on any scene */
.r3-rail i { flex: 1; height: 3px; border-radius: 3px; background: rgba(11, 11, 13, 0.12); overflow: hidden; position: relative; }
.r3-rail i::after { content: ""; position: absolute; inset: 0; background: var(--acc-tx, #0b0b0d); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.5s var(--ease); }
.r3-rail i.is-done::after, .r3-rail i.is-on::after { transform: scaleX(1); }
.r3-rail i.is-on::after { animation: r3-on 1.6s ease-in-out infinite alternate; }
@keyframes r3-on { from { opacity: 0.55; } to { opacity: 1; } }
.r3-label { position: absolute; z-index: 8; left: 14px; top: 30px; margin: 0; padding: 6px 10px; border-radius: 99px; background: rgba(255, 255, 255, 0.88); color: var(--ink, #0b0b0d); box-shadow: 0 0 0 1px rgba(11, 11, 13, 0.1); font: 600 10.5px/1 var(--f-sans); letter-spacing: 0.16em; text-transform: uppercase; pointer-events: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.r3-label:empty { display: none; }
.r3-stagebox .sc { padding-top: max(8cqmin, 62px); }

/* the newspaper scene: the kicker floats, the two answers sit to the right of the page */
@container (aspect-ratio >= 1) { .t-paper > .k-kicker { position: absolute; } }
@container (aspect-ratio >= 1) { .t-paper .k-branch.is-0 { grid-column: 2; grid-row: 1; } .t-paper .k-branch.is-1 { grid-column: 2; grid-row: 2; } }
.h3.is-whisper .h3-tip { transition: transform 0.6s var(--ease); }

/* phones: the header fits, the play button reads on one line, the hero is tighter so the film shows sooner */
.f3-play { white-space: nowrap; }
@media (max-width: 560px) {
  .nav { gap: 16px; }
  .nav a { letter-spacing: 0.12em; font-size: 12px; }
  .nav a[aria-current="page"]::before { left: -9px; width: 5px; height: 5px; margin-top: -2.5px; }
  .c3-hero { padding-top: calc(var(--header-h) + 18px); }
  .c3-top { gap: 14px; margin-bottom: 22px; }
  .c3-title { font-size: clamp(44px, 13vw, 64px); }
  .c3-thesis { font-size: 17px; }
  .c3-meta { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 12px; }
  .c3-meta dd { font-size: 12.5px; }
  .c3-meta dt { font-size: 9.5px; }
  .c3-modes { margin-top: 12px; }
  .c3-modes a, .c3-modes button { height: 40px; padding: 0 14px; font-size: 13px; }
  .f3-play { padding: 12px 18px 12px 12px; font-size: 14px; }
  .f3-play i { width: 28px; height: 28px; }
  .f3-play i::after { left: 10px; top: 8px; border-width: 6px 0 6px 9px; }
}
.c4-acts .pill { max-width: 100%; white-space: normal; text-align: center; height: auto; min-height: 46px; line-height: 1.2; padding-block: 12px; }
.c4-grid > * { min-width: 0; }

.h3-panel, .h3-intro { pointer-events: none; }
.h3-panel a, .h3-panel button { pointer-events: auto; }