/* Ahmet Eren Güvercin, personal site.
   Light paper for content, dark stages for product work, glass only on the floating controls. */

/* ---------- fonts (self-hosted, SIL OFL) ---------- */
@font-face { font-family: "Mona Sans"; font-weight: 200 900; font-stretch: 75% 125%; font-display: swap; src: url("../fonts/mona-sans-latin-wdth-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Mona Sans"; font-weight: 200 900; font-stretch: 75% 125%; font-display: swap; src: url("../fonts/mona-sans-latin-ext-wdth-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* the two mega titles use a fixed cut of Mona Sans at their own weight and width (lab/tools/mega-font.py). Drawn from the
   variable font, part of the f crossbar sat a fraction of a pixel below the t in "Rooftop", and the tracked pair met
   with a seam; the fixed cut has level bars and draws "ft" as one joined outline, spaced for the -.035em tracking of .mega
   (change one, regenerate with the other) */
@font-face { font-family: "AEG Display"; font-weight: 800; font-stretch: 125%; font-display: swap; src: url("../fonts/aeg-display-800-125-latin.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+2018-201D, U+2026; }
@font-face { font-family: "AEG Display"; font-weight: 800; font-stretch: 125%; font-display: swap; src: url("../fonts/aeg-display-800-125-latin-ext.woff2") format("woff2");
  unicode-range: U+011E-011F, U+0130, U+015E-015F; }
@font-face { font-family: "Monaspace Krypton"; font-weight: 400; font-display: swap; src: url("../fonts/monaspace-krypton-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Monaspace Krypton"; font-weight: 500; font-display: swap; src: url("../fonts/monaspace-krypton-latin-500-normal.woff2") format("woff2"); }

/* ---------- tokens ---------- */
:root {
  --sans: "Mona Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "Monaspace Krypton", ui-monospace, Consolas, monospace;
  --bg: #f2f2ef; --paper: #ffffff; --sunk: #e9e9e4;
  --ink: #0e0f11; --ink-2: #47494f; --ink-3: #6b6d73;
  --line: #dcdcd5; --line-2: #c9c9c2;
  --stage: #070708; --stage-2: #111113; --s-ink: #f4f4f2; --s-ink-2: #a6a7ad; --s-line: #26262a;
  --accent: #ff5b14; --accent-ink: #b23c0a; /* 5.3:1 on the paper */
  --ok: #1f8a4c; --warn: #8f5d12; --bad: #c2362b;
  --r: 12px; --r-lg: 18px;
  --wrap: 1180px; --gut: clamp(16px, 4vw, 40px);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --out: cubic-bezier(.16, 1, .3, 1);
  --in: cubic-bezier(.7, 0, .84, 0);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; accent-color: var(--accent); caret-color: var(--accent-ink); scrollbar-color: #bdbdb6 var(--bg); }
@media (prefers-reduced-motion: no-preference) { html:not(.lenis) { scroll-behavior: smooth; } }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 420 17px/1.55 var(--sans); font-stretch: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; }
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: from-font; }
button { font: inherit; color: inherit; }
p { margin: 0 0 .9em; }
h1, h2, h3 { margin: 0; font-weight: 700; }
h1, h2, h3, h4 { text-wrap: balance; }
p, li, dd, figcaption { text-wrap: pretty; }
ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
figure { margin: 0; }
b, strong { font-weight: 640; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: #ffd7c2; color: #000; }

/* two languages, one shown */
html[data-lang="en"] [lang="tr"] { display: none !important; }
html[data-lang="tr"] [lang="en"] { display: none !important; }

.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: 10px; background: var(--ink); color: #fff; text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { width: min(var(--wrap), 100% - 2 * var(--gut)); margin-inline: auto; }

/* ---------- type ---------- */
.mega { font-family: "AEG Display", var(--sans); font-size: clamp(4rem, 15vw, 12.5rem); font-stretch: 125%; font-weight: 800; letter-spacing: -.035em; line-height: .86; }
.h2 { font-size: clamp(2rem, 4.4vw, 3.6rem); font-stretch: 112%; font-weight: 720; letter-spacing: -.028em; line-height: 1.02; text-wrap: balance; }
.h3 { font-size: clamp(1.2rem, 1.7vw, 1.45rem); font-stretch: 106%; font-weight: 660; letter-spacing: -.012em; line-height: 1.18; margin-bottom: .55em; }
.label { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font: 500 13px/1.3 var(--mono); color: var(--ink-3); }
.label::before { content: ""; width: 18px; height: 1px; background: currentColor; }
.label--icon::before { display: none; }
.sec__lead { max-width: 62ch; font-size: clamp(1.05rem, 1.4vw, 1.22rem); line-height: 1.55; color: var(--ink-2); }
.note { margin: 12px 0 0; font: 400 12.5px/1.5 var(--mono); color: var(--ink-3); }
.note b { color: var(--ink); font-weight: 500; }
.mono { font: 400 13px/1.6 var(--mono); color: var(--ink-3); }

/* ---------- glass (floating controls only) ---------- */
.glass { background: rgba(250, 250, 248, .62); -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -1px 0 rgba(0, 0, 0, .05), 0 10px 30px -14px rgba(0, 0, 0, .35); }
.glass--dark { background: rgba(22, 22, 24, .48); color: #f4f4f2; border-color: rgba(255, 255, 255, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 10px 30px -14px rgba(0, 0, 0, .6); }
/* the rim: light catching the top-left edge, fading round the sides; all glass surfaces are positioned */
.glass::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(155deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .2) 34%, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, .4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.glass--dark::before, .nav.on-dark .nav__glass::before { background: linear-gradient(155deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .08) 34%, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, .16)); }
@media (prefers-reduced-transparency: reduce) { .glass { background: #fafaf8; -webkit-backdrop-filter: none; backdrop-filter: none; } .glass--dark { background: #18181a; } .film { background: #18181a; -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (prefers-contrast: more) { :root { --ink-2: #2e3035; --ink-3: #46484e; --line: #a3a39c; --line-2: #8d8d86; } .glass { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; border-color: var(--ink); } .glass--dark { background: #111113; border-color: #fff; } }

/* ---------- nav ---------- */
.nav { position: fixed; z-index: 50; top: 14px; left: 0; right: 0; display: flex; justify-content: center; pointer-events: none; }
.nav__glass { position: relative; pointer-events: auto; display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 999px; transition: background-color .4s, color .4s, border-color .4s; }
.nav.is-lens .nav__glass { -webkit-backdrop-filter: url(#lens) blur(14px) saturate(170%); backdrop-filter: url(#lens) blur(14px) saturate(170%); }
.nav__prog { position: absolute; left: 22px; right: 22px; bottom: 1px; height: 2px; border-radius: 2px; background: var(--accent); transform-origin: left; transform: scaleX(var(--p, 0)); pointer-events: none; }
.nav__brand { padding: 8px 14px; font-weight: 800; font-stretch: 125%; font-size: 14px; letter-spacing: .02em; text-decoration: none; }
.nav__where { display: none; margin: 0; min-width: 0; max-width: 46vw; padding-right: 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 500 12px/1 var(--mono); color: var(--ink-3); }
.nav__where b { font-weight: 500; color: var(--ink); }
.nav__links { position: relative; display: flex; gap: 2px; }
.nav__links a { position: relative; z-index: 1; padding: 8px 13px; border-radius: 999px; font-size: 14px; font-weight: 520; text-decoration: none; color: var(--ink-2); transition: color .25s, transform .12s ease-out; }
.nav__links a:hover, .nav__links a.is-on { color: var(--ink); }
.nav__links a:active { transform: scale(.95); }
.nav__ind { position: absolute; top: 0; bottom: 0; left: 0; width: var(--w, 0); transform: translateX(var(--x, 0)); border-radius: 999px; background: rgba(0, 0, 0, .07); opacity: 0; transition: transform .5s var(--out), width .5s var(--out), opacity .3s; pointer-events: none; }
.nav__ind.is-on { opacity: 1; }
.lang { position: relative; display: flex; padding: 3px; border-radius: 999px; background: rgba(0, 0, 0, .06); }
.lang button { position: relative; z-index: 1; border: 0; background: none; padding: 5px 10px; border-radius: 999px; font: 500 12px/1 var(--mono); color: var(--ink-3); cursor: pointer; transition: background-color .25s, color .25s; }
.lang button[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
.nav.on-dark .nav__glass { background: rgba(24, 24, 26, .5); border-color: rgba(255, 255, 255, .14); color: #f4f4f2; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 10px 30px -14px rgba(0, 0, 0, .7); }
.nav.on-dark .nav__links a { color: #b9bac0; }
.nav.on-dark .nav__links a:hover, .nav.on-dark .nav__links a.is-on { color: #fff; }
.nav.on-dark .nav__ind { background: rgba(255, 255, 255, .12); }
.nav.on-dark .nav__where { color: #a6a7ad; }
.nav.on-dark .nav__where b { color: #fff; }
.nav.on-dark .lang { background: rgba(255, 255, 255, .1); }
.nav.on-dark .lang button { color: #a6a7ad; }
.nav.on-dark .lang button[aria-pressed="true"] { background: #f4f4f2; color: #0e0f11; }
.nav__menu { display: none; align-items: center; gap: 6px; border: 0; background: rgba(0, 0, 0, .06); padding: 6px 10px; border-radius: 999px; font: 500 12px/1 var(--mono); color: var(--ink-2); cursor: pointer; }
.nav__menu svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.nav__menu[aria-expanded="true"] { background: var(--ink); color: #fff; }
.nav.on-dark .nav__menu { background: rgba(255, 255, 255, .1); color: #d0d1d5; }
.nav__sheet { position: fixed; z-index: 49; top: 70px; left: var(--gut); right: var(--gut); max-height: calc(100vh - 90px); overflow: auto; padding: 8px; border-radius: 18px; }
.nav__sheet nav { display: grid; }
.nav__sheet a { display: flex; align-items: baseline; gap: 12px; padding: 11px 12px; border-radius: 12px; font-size: 16px; font-weight: 560; text-decoration: none; color: var(--ink); }
.nav__sheet a b { min-width: 22px; font: 500 11.5px/1 var(--mono); color: var(--ink-3); }
.nav__sheet a:hover, .nav__sheet a:focus-visible { background: rgba(0, 0, 0, .06); }
@media (max-width: 720px) { .nav__links { display: none; } .nav__where { display: block; } .nav__menu { display: inline-flex; } }
@media (min-width: 721px) { .nav__sheet { display: none !important; } }

/* ---------- page map ---------- */
.rail { position: fixed; z-index: 45; right: 12px; top: 50%; transform: translateY(-50%); display: grid; padding: 10px 8px; border-radius: 14px; border: 1px solid transparent; transition: background-color .3s, border-color .3s, box-shadow .3s; }
.rail a { display: flex; align-items: center; justify-content: flex-end; gap: 10px; height: 24px; text-decoration: none; color: var(--ink-3); font: 500 11.5px/1 var(--mono); }
.rail a::after { content: ""; flex: none; width: 10px; height: 2px; border-radius: 2px; background: currentColor; opacity: .5; transition: width .45s var(--out), opacity .25s, background-color .25s; }
.rail span { white-space: nowrap; opacity: 0; transform: translateX(8px); transition: opacity .25s, transform .45s var(--out); }
.rail a.is-on { color: var(--ink); }
.rail a.is-on::after { width: 24px; opacity: 1; background: var(--accent); }
.rail:hover, .rail:focus-within { background: rgba(250, 250, 248, .82); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); border-color: rgba(0, 0, 0, .06); box-shadow: 0 14px 34px -18px rgba(0, 0, 0, .35); }
.rail:hover span, .rail:focus-within span { opacity: 1; transform: none; }
.rail a:hover { color: var(--ink); }
.rail a:hover::after { opacity: 1; width: 18px; }
.rail.on-dark a { color: #8d8e94; }
.rail.on-dark a.is-on, .rail.on-dark a:hover { color: #fff; }
.rail.on-dark:hover, .rail.on-dark:focus-within { background: rgba(24, 24, 26, .78); border-color: rgba(255, 255, 255, .1); }
@media (min-width: 1500px) { .rail a.is-on span { opacity: 1; transform: none; } }
@media (max-width: 1279px) { .rail { display: none; } }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 9px; min-height: 46px; padding: 0 20px; border-radius: 999px; border: 1px solid transparent; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; transition: transform .25s var(--out), background-color .2s, border-color .2s, box-shadow .25s; }
@media (hover: hover) { .btn:hover { transform: translateY(-1px); } }
.btn:active { transform: translateY(0) scale(.97); transition-duration: .08s; }
.btn svg { width: 14px; height: 14px; fill: currentColor; }
.btn__meta { font: 400 12px/1 var(--mono); opacity: .65; }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #26272b; box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .55); }
.btn--line { border-color: var(--line-2); background: transparent; }
.btn--line:hover { border-color: var(--ink); }
.btn--light { background: #f4f4f2; color: #0e0f11; }
.btn--light:hover { background: #fff; }
.btn--ghost-light { border-color: rgba(255, 255, 255, .25); color: #f4f4f2; }
.btn--ghost-light:hover { border-color: rgba(255, 255, 255, .6); }
.is-soon { opacity: .5; cursor: default; }
.link { border: 0; background: none; padding: 0; font: 500 13px/1.4 var(--mono); color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pill { border: 1px solid var(--line-2); background: var(--paper); padding: 6px 12px; border-radius: 999px; font: 500 12px/1 var(--mono); cursor: pointer; }
.pill:hover { border-color: var(--ink); }
.seg { position: relative; display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 999px; background: var(--sunk); }
.seg button { position: relative; z-index: 1; border: 0; background: none; padding: 7px 13px; border-radius: 999px; font-size: 13.5px; font-weight: 560; color: var(--ink-2); cursor: pointer; transition: background-color .2s, color .2s; }
.seg button[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .14); }
.seg--dark { background: rgba(255, 255, 255, .08); }
.seg--dark button { color: #a6a7ad; }
.seg--dark button[aria-pressed="true"] { background: #f4f4f2; color: #0e0f11; }
.pill-ind { position: absolute; z-index: 0; left: 0; top: 0; width: var(--w, 0); height: var(--h, 0); transform: translate(var(--x, 0), var(--y, 0)); border-radius: 999px; background: var(--paper); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 1px 2px rgba(0, 0, 0, .12), 0 4px 10px -4px rgba(0, 0, 0, .2); opacity: 0; transition: transform .5s var(--out), width .5s var(--out), height .5s var(--out), opacity .25s; pointer-events: none; }
.pill-ind.is-on { opacity: 1; }
.pill-ind.is-instant { transition: opacity .25s; }
.has-pill button[aria-pressed="true"] { background: transparent !important; box-shadow: none !important; }
.seg--dark .pill-ind, .nav.on-dark .lang .pill-ind { background: #f4f4f2; }
/* press feedback lives on the press, not on release */
.seg button:active, .lang button:active, .pill:active, .ledger__row:active, .dossier__toc button:active, .torch__modes button:active, .bar:active, .link:active { transform: scale(.95); transition: transform .08s ease-out; }
.seg button, .lang button, .pill, .ledger__row, .dossier__toc button, .torch__modes button, .bar { transition-property: background-color, color, border-color, opacity, transform; transition-duration: .2s, .2s, .2s, .2s, .18s; }

/* ---------- range ---------- */
.rng { display: grid; gap: 8px; }
.rng__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; color: var(--ink-2); }
.rng output { font: 500 14px/1 var(--mono); color: var(--ink); }
.rng input { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; margin: 0; background: transparent; cursor: pointer; --fill: 50%; }
.rng input::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--ink) var(--fill), var(--line-2) var(--fill)); }
.rng input::-moz-range-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--ink) var(--fill), var(--line-2) var(--fill)); }
.rng input::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8px; border-radius: 50%; background: var(--paper); border: 1px solid var(--line-2); box-shadow: 0 2px 6px rgba(0, 0, 0, .25); transition: transform .1s; }
.rng input::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--paper); border: 1px solid var(--line-2); box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.rng input:active::-webkit-slider-thumb { transform: scale(1.12); }
.rng--big output { font-size: 20px; }

/* ---------- hero ---------- */
.hero { padding: 120px 0 56px; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.hero__name { font-size: clamp(3.2rem, 8.6vw, 7.6rem); font-stretch: 125%; font-weight: 800; letter-spacing: -.04em; line-height: .88; margin-bottom: 20px; }
.hero__tag { margin: 0 0 18px; font: 500 13px/1.3 var(--mono); letter-spacing: .02em; color: var(--ink-3); }
.hero__pos { max-width: 21ch; margin: 0 0 14px; font-size: clamp(1.5rem, 2.7vw, 2.2rem); font-stretch: 112%; font-weight: 680; letter-spacing: -.022em; line-height: 1.1; color: var(--ink); text-wrap: balance; }
.hero__tag i { font-style: normal; color: var(--accent); }
.hero__lead { max-width: 38ch; font-size: clamp(1.05rem, 1.45vw, 1.25rem); line-height: 1.5; font-weight: 450; color: var(--ink-2); letter-spacing: -.005em; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

.hero-film { position: relative; aspect-ratio: 4 / 5; max-height: 80vh; justify-self: end; width: 100%; border-radius: var(--r-lg); overflow: hidden; background: var(--stage); user-select: none; -webkit-user-select: none; box-shadow: 0 40px 90px -50px rgba(0, 0, 0, .55); }
.hero-film video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.hero-film__ctl { position: absolute; z-index: 2; right: 14px; bottom: 14px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; cursor: pointer; }
.hero-film__ctl svg { width: 14px; height: 14px; fill: currentColor; }
.hero-film__ctl .i-play, .hero-film__ctl[aria-pressed="true"] .i-pause { display: none; }
.hero-film__ctl[aria-pressed="true"] .i-play { display: block; }
.hero-film::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }

.spec { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; margin-top: 64px; border-top: 1px solid var(--line); }
.spec > div { padding: 18px 18px 6px 0; border-right: 1px solid var(--line); padding-left: 18px; }
.spec > div:first-child { padding-left: 0; }
.spec > div:last-child { border-right: 0; }
.spec dt { margin-bottom: 8px; font: 500 12px/1.3 var(--mono); color: var(--ink-3); }
.spec dd { font-size: 14px; line-height: 1.55; color: var(--ink); }
.spec__lang dd b { font-weight: 650; }
@media (max-width: 1080px) { .spec { grid-template-columns: repeat(3, minmax(0, 1fr)); } .spec > div:nth-child(3) { border-right: 0; } .spec > div:nth-child(4) { padding-left: 0; } .spec > div { border-bottom: 1px solid var(--line); padding-bottom: 16px; } }
@media (max-width: 860px) { .hero { padding-top: 100px; } .hero__grid { grid-template-columns: 1fr; } .hero-film { justify-self: start; max-width: 440px; max-height: none; } }
@media (max-width: 560px) { .spec { grid-template-columns: 1fr 1fr; } .spec > div { border-right: 0; padding-left: 0; } .spec > div:nth-child(odd) { padding-right: 12px; } }

/* ---------- how I work ---------- */
.method { padding-top: 8px; }
.flow4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.flow4 li { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: 12px; padding: 24px 24px 6px; border-left: 1px solid var(--line); }
.flow4 li:first-child { padding-left: 0; border-left: 0; }
.flow4 li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--ink); transform-origin: left; }
.flow4 li:first-child::before { right: 0; }
.flow4.reveal li::before { transform: scaleX(0); transition: transform .9s var(--out); }
.flow4.reveal li:nth-child(2)::before { transition-delay: .15s; } .flow4.reveal li:nth-child(3)::before { transition-delay: .3s; } .flow4.reveal li:nth-child(4)::before { transition-delay: .45s; }
.flow4.reveal.is-in li::before { transform: none; }
.flow4 b { font: 500 12px/1 var(--mono); color: var(--accent-ink); }
.flow4 h3 { font-size: clamp(1.6rem, 2.7vw, 2.2rem); font-stretch: 120%; font-weight: 760; letter-spacing: -.035em; line-height: 1; }
.flow4 p { margin: 0; max-width: 30ch; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.flow4 a { justify-self: start; display: inline-flex; gap: 6px; padding: 6px 0; font: 500 12.5px/1 var(--mono); color: var(--ink-3); text-decoration: none; transition: color .2s; }
.flow4 a::after { content: "→"; transition: transform .35s var(--out); }
.flow4 a:hover { color: var(--accent-ink); }
@media (hover: hover) { .flow4 a:hover::after { transform: translateX(3px); } }
.flow5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.flow5 li { padding: 22px 18px 6px; }
.flow5 h3 { font-size: clamp(1.3rem, 1.9vw, 1.7rem); }
.flow5 p { font-size: 14.5px; }
.flow4.reveal li:nth-child(5)::before { transition-delay: .6s; }
@media (max-width: 1080px) { .flow5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .flow5 li:nth-child(4) { padding-left: 0; border-left: 0; } .flow5 li { padding-bottom: 18px; } }
@media (max-width: 960px) { .flow4 { grid-template-columns: 1fr 1fr; } .flow4 li:nth-child(3) { padding-left: 0; border-left: 0; } .flow5 li:nth-child(3) { padding-left: 18px; border-left: 1px solid var(--line); } .flow5 li:nth-child(4) { padding-left: 18px; border-left: 1px solid var(--line); } .flow5 li:nth-child(odd) { padding-left: 0; border-left: 0; } }
@media (max-width: 520px) { .flow4 { grid-template-columns: 1fr; } .flow4 li { padding-left: 0; border-left: 0; padding-bottom: 14px; } }

/* ---------- sections ---------- */
.sec { padding: clamp(64px, 8vw, 112px) 0; }
.sec--tight { padding: clamp(56px, 7vw, 90px) 0; }
.sec__head { margin-bottom: clamp(32px, 4vw, 52px); }
.sec__head .h2 { margin-bottom: 18px; max-width: 18ch; }
.sec__head--row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 48px; align-items: end; }
.sec__head--row .h2 { margin: 0; }
.sec__head--row p { color: var(--ink-2); max-width: 52ch; }
@media (max-width: 860px) { .sec__head--row { grid-template-columns: 1fr; } }
.stage { background: var(--stage); color: var(--s-ink); }
.stage .label, .stage .note, .stage .mono { color: var(--s-ink-2); }
.stage .sec__lead { color: var(--s-ink-2); }

/* ---------- everyday ---------- */
.ex { padding: 28px; border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--line); }
.ex > p { color: var(--ink-2); font-size: 15.5px; }
.ex--wide { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 36px; align-items: center; margin-bottom: 16px; }
.ex__text p { color: var(--ink-2); }
.ex-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.ex--ledger { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
@media (max-width: 760px) { .ex--wide, .ex-grid { grid-template-columns: 1fr; } .ex { padding: 20px; } }

.win { border-radius: 12px; border: 1px solid var(--line); background: #fbfbfa; overflow: hidden; }
.win__bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--line); background: #f3f3f0; }
.win__bar i { width: 9px; height: 9px; border-radius: 50%; background: #d9d9d3; }
.win__bar span { margin-left: 8px; font: 400 11.5px/1 var(--mono); color: var(--ink-3); }
.tags { display: grid; gap: 12px; }
.tags__body { padding: 16px; }
.tags__label { font-size: 13px; color: var(--ink-3); margin-bottom: 8px; }
.tags__label b { color: var(--ink); margin-right: 6px; }
.tags__field { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 48px; padding: 8px; border: 1px solid var(--line-2); border-radius: 10px; background: #fff; font: 400 13px/1 var(--mono); }
.tags__chips { display: contents; }
.tags__chips span { padding: 5px 8px; border-radius: 6px; background: #eef0ec; color: var(--ink-2); animation: chip .25s var(--ease); }
@keyframes chip { from { opacity: 0; transform: scale(.85); } }
.tags__caret { width: 1.5px; height: 16px; background: var(--ink); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.tags__meter { display: flex; justify-content: space-between; margin: 12px 0 6px; font: 400 12.5px/1 var(--mono); color: var(--ink-3); }
.tags__meter b { color: var(--ink); }
.tags__track { height: 3px; border-radius: 3px; background: var(--sunk); overflow: hidden; }
.tags__track i { display: block; height: 100%; width: 0; background: var(--ink); }
.tags.is-done .tags__track i { background: var(--ok); }
.tags__code { filter: grayscale(1) brightness(.78); transition: filter .5s; } /* held back, still readable */
.tags[data-step="2"] .tags__code { filter: none; }
.tags__chips span, .tags__track i, #tTyping { transition: opacity .35s ease, transform .35s ease; }
.tags.is-clearing .tags__chips span, .tags.is-clearing #tTyping { opacity: 0; transform: translateY(-6px) scale(.94); }
.tags.is-clearing .tags__track i { opacity: 0; }
.code { margin: 0; padding: 16px 18px; border-radius: 12px; background: #101114; color: #d9dcd6; font: 400 12.5px/1.65 var(--mono); overflow-x: auto; white-space: pre; scrollbar-color: #3a3d44 transparent; scrollbar-width: thin; }
.code .c { color: #7d8580; } .code .k { color: #ff9d6c; } .code .s { color: #b6d98a; } .code .n { color: #8fc3ff; }

.ledger { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1.1fr); font-size: 12.5px; }
.ledger__col { display: grid; gap: 6px; align-content: start; min-width: 0; }
.ledger__col:last-child { grid-column: 3; }
.ledger__h { margin: 0 0 2px; font: 500 11.5px/1 var(--mono); color: var(--ink-3); }
.ledger__row, .ledger__inv { display: grid; align-items: center; gap: 6px; padding: 8px 9px; border-radius: 8px; border: 1px solid var(--line); background: #fbfbfa; text-align: left; transition: border-color .2s, background-color .2s, color .2s; }
.ledger__row { grid-template-columns: auto 1fr auto; cursor: pointer; font-size: 12.5px; }
.ledger__row span:first-child, .ledger__inv > span { font-family: var(--mono); color: var(--ink-3); font-size: 11.5px; }
.ledger__inv { grid-template-columns: auto 1fr auto; }
.ledger b { font: 500 12px/1 var(--mono); text-align: right; }
.ledger__links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.ledger__links path { fill: none; stroke: var(--line-2); stroke-width: 1.3; transition: stroke .2s, opacity .2s; }
.ledger__links path.is-on { stroke: var(--accent); stroke-width: 1.8; }
/* the rows outside the current match go quiet without fading, so their text keeps its contrast */
.ledger.has-focus .ledger__row:not(.is-on), .ledger.has-focus .ledger__inv:not(.is-on) { border-color: transparent; background: transparent; color: var(--ink-3); }
.ledger.has-focus :not(.is-on) > .st { background: var(--sunk); color: var(--ink-2); }
.ledger .is-on { border-color: var(--ink); background: #fff; }
.st { font: normal 500 10.5px/1 var(--mono); padding: 4px 6px; border-radius: 5px; white-space: nowrap; }
.st--ok { background: #e3f1e8; color: #1c6b3e; }
.st--part { background: #f6ecd8; color: #8a5a14; }
.st--open { background: #f7e2df; color: #9b2c22; }
@media (max-width: 640px) {
  .ledger { grid-template-columns: 1fr; gap: 14px; }
  .ledger__col:last-child { grid-column: 1; }
  .ledger__links { display: none; }
  .ledger__row, .ledger__inv { grid-template-columns: 18px auto 1fr auto; }
  .ledger__inv { grid-template-columns: 18px auto 1fr auto; }
  .ledger__row::before, .ledger__inv::before { content: attr(data-pay); display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; background: var(--ink); color: #fff; font: 500 10px/1 var(--mono); text-transform: uppercase; }
  .ledger__inv::before { content: attr(data-by); }
  .ledger__inv[data-by=""]::before { background: var(--bad); content: "!"; }
}

.quote { display: grid; gap: 14px; margin-top: 18px; }
.ex--quote .quote { margin-top: 0; }
.ex--wide:last-child { margin-bottom: 0; }
.quote__out { display: grid; gap: 9px; padding-top: 14px; border-top: 1px solid var(--line); }
.q-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 13.5px; color: var(--ink-2); }
.q-row b { font: 500 14px/1 var(--mono); color: var(--ink); }
.q-row i { grid-column: 1 / -1; height: 6px; border-radius: 6px; background: var(--sunk); overflow: hidden; }
.q-row i::after { content: ""; display: block; height: 100%; width: var(--w, 0%); background: var(--ink); border-radius: 6px; transition: width .45s var(--ease); }
.q-row--travel i::after { background: var(--accent); }

.files { margin-top: 18px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fbfbfa; }
.files__bar { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--line); background: #f3f3f0; }
.files__mode { font: 500 11.5px/1 var(--mono); color: var(--warn); }
.files[data-state="done"] .files__mode { color: var(--ok); }
.files__list { display: grid; }
.files__list li { display: grid; grid-template-columns: 1fr; gap: 3px; padding: 9px 12px; border-bottom: 1px solid var(--line); font: 400 12px/1.35 var(--mono); }
.files__list s { color: var(--ink-3); text-decoration-color: rgba(0, 0, 0, .3); transition: opacity .4s; }
.files__list span { color: var(--ink); }
.files__list em { justify-self: start; }
.files[data-state="done"] .files__list s { opacity: 0; height: 0; overflow: hidden; display: block; }
.files[data-state="done"] .files__list span { color: var(--ok); }
.files[data-state="done"] .files__list li:last-child span { color: var(--bad); }
.files__sum { margin: 0; padding: 10px 12px; font: 400 12px/1.4 var(--mono); color: var(--ink-3); }

/* ---------- rooftop ---------- */
.rt__intro { padding: clamp(90px, 12vw, 150px) 0 40px; }
.rt__intro .mega { margin: 6px 0 28px; }
.rt__sub { max-width: 44ch; font-size: clamp(1.15rem, 2vw, 1.55rem); line-height: 1.42; color: var(--s-ink-2); }
.rt__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.rt__seq { position: relative; height: 170vh; }
.rt__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 5vw, 80px); width: min(var(--wrap), 100% - 2 * var(--gut)); margin-inline: auto; }
.rt__frame { position: relative; justify-self: center; height: min(84vh, 860px); aspect-ratio: 600 / 1018; border-radius: var(--r-lg); overflow: hidden; background: #140f0c; }
.rt__frame canvas { width: 100%; height: 100%; }
.rt__day { position: absolute; left: 14px; top: 14px; margin: 0; padding: 8px 12px; border-radius: 12px; font-size: 13px; font-weight: 560; }
.rt__day b { font: 500 15px/1 var(--mono); margin-left: 4px; }
.rt__copy { position: relative; max-width: 30ch; }
.rt__step { position: absolute; inset: 0 0 auto; margin: 0; font-size: clamp(1.4rem, 2.6vw, 2.2rem); font-stretch: 108%; font-weight: 640; line-height: 1.18; letter-spacing: -.015em; color: var(--s-ink); opacity: 0; transform: translateY(14px); transition: opacity .45s, transform .6s var(--ease); }
.rt__step.is-on { position: relative; opacity: 1; transform: none; }
.rt__track { height: 2px; margin-top: 34px; background: var(--s-line); border-radius: 2px; overflow: hidden; }
.rt__track i { display: block; height: 100%; width: 0; background: var(--accent); }
.rt__hint { margin-top: 12px; font: 400 12px/1 var(--mono); color: var(--s-ink-2); }
@media (max-width: 860px) {
  .rt__seq { height: 160vh; }
  .rt__sticky { grid-template-columns: 1fr; align-content: center; gap: 18px; }
  .rt__frame { height: 62svh; }
  .rt__copy { max-width: none; text-align: center; }
  .rt__step { font-size: 1.15rem; }
  .rt__track { max-width: 240px; margin: 16px auto 0; }
}

.studio { background: #e6e5e1; padding: clamp(64px, 8vw, 110px) 0; }
.studio__top { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 56px; align-items: end; margin-bottom: 40px; }
.studio__top .h2 { margin: 0; }
.studio__top p { color: var(--ink-2); max-width: 54ch; }
.studio__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.shot { position: relative; border-radius: var(--r-lg); overflow: hidden; background: #dcdbd6; }
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot figcaption { position: absolute; left: 12px; bottom: 12px; right: 12px; width: fit-content; padding: 7px 10px; border-radius: 9px; background: rgba(250, 250, 248, .78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 12.5px; font-weight: 520; color: var(--ink); }
.cmp { width: 100%; border-collapse: collapse; background: var(--paper); border-radius: var(--r-lg); overflow: hidden; font-size: 14px; }
.cmp th, .cmp td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line); }
.cmp thead th { font: 500 12px/1 var(--mono); color: var(--ink-3); }
.cmp tbody th { font-weight: 500; color: var(--ink-2); }
.cmp td { font: 500 13.5px/1.2 var(--mono); }
.cmp td:last-child { color: var(--accent-ink); }
.cmp tr:last-child th, .cmp tr:last-child td { border-bottom: 0; }
.checks { margin-top: 16px; padding: 24px 28px; border-radius: var(--r-lg); background: var(--paper); }
.checks .h3 { margin-bottom: 16px; }
.checks__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.checks__row li { display: grid; gap: 8px; align-content: start; padding: 2px 20px; border-left: 1px solid var(--line); font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.checks__row li:first-child { padding-left: 0; border-left: 0; }
.checks__row b { font: 500 clamp(1.25rem, 2vw, 1.6rem)/1 var(--mono); letter-spacing: -.02em; color: var(--ink); }
.data { display: grid; gap: 0; }
.data li { display: grid; grid-template-columns: 98px 1fr; gap: 16px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; color: var(--ink-2); }
.data li:last-child { border-bottom: 0; }
.data b { font: 500 14px/1.2 var(--mono); color: var(--ink); }
@media (max-width: 960px) { .studio__top, .studio__grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .checks__row { grid-template-columns: 1fr 1fr; gap: 18px 0; } .checks__row li:nth-child(3) { padding-left: 0; border-left: 0; } }
@media (max-width: 560px) { .data li { grid-template-columns: 74px 1fr; gap: 10px; } .checks { padding: 20px; } }

/* ---------- bloom + lab ---------- */
.duo { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
.duo .shot { aspect-ratio: 4 / 3; background: #e9e7e2; }
.duo__text .h2 { margin-bottom: 16px; }
.duo__text p { color: var(--ink-2); }
.facts { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 22px; margin-top: 22px; }
.facts li { display: grid; gap: 4px; }
.facts b { font: 500 18px/1 var(--mono); }
.facts span { font-size: 13px; color: var(--ink-3); }
@media (max-width: 860px) { .duo { grid-template-columns: 1fr; } .facts { grid-template-columns: repeat(2, auto); } }

.lab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.drawing { padding: 26px 26px 18px; border-radius: var(--r-lg); background: #f7f7f3; border: 1px solid var(--line); background-image: linear-gradient(rgba(0, 0, 0, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, .035) 1px, transparent 1px); background-size: 16px 16px; }
.drawing svg { width: 100%; height: auto; overflow: visible; }
.d-body { fill: #fff; stroke: #0e0f11; stroke-width: .45; }
.d-holes circle { fill: #f7f7f3; stroke: #0e0f11; stroke-width: .35; }
.d-holes .d-rib { fill: #0e0f11; stroke: none; }
.d-tags text { font: 500 2.6px var(--mono); fill: var(--ink-2); text-anchor: middle; }
.d-dim path { fill: none; stroke: var(--accent); stroke-width: .25; }
.d-dim .d-arrow { fill: var(--accent); stroke: none; }
.d-dim text { font: 500 3px var(--mono); fill: var(--accent-ink); text-anchor: middle; }
.d-dim .d-l { text-anchor: start; }
.d-dim .d-v { text-anchor: start; }
.drawing figcaption { margin-top: 14px; font: 400 12.5px/1.5 var(--mono); color: var(--ink-3); }
.lab__shots { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lab__shots .shot { aspect-ratio: 4 / 3; background: #e7e7e5; }
.lab__shots .shot:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 8; }
@media (max-width: 860px) { .lab { grid-template-columns: 1fr; } }

/* ---------- energy ---------- */
.solar { padding: clamp(20px, 3vw, 32px); border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--line); }
.solar__in { display: grid; grid-template-columns: auto 1fr; gap: 20px 32px; align-items: end; }
.chain { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 26px 0; counter-reset: ch; }
.chain li { position: relative; display: grid; gap: 8px; padding: 14px; border-radius: 12px; background: #f6f6f3; font-size: 13px; color: var(--ink-3); }
.chain li b { font: 500 clamp(1.1rem, 2vw, 1.5rem)/1 var(--mono); color: var(--ink); letter-spacing: -.02em; }
.chain li b small { margin-left: 4px; font-size: .6em; color: var(--ink-3); letter-spacing: 0; }
.chain__end { background: #fff1e9 !important; }
.chain__end b { color: var(--accent-ink) !important; }
.chart { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; height: 200px; align-items: end; }
.chart__line { position: absolute; left: 0; right: 0; bottom: calc(26px + (100% - 26px) * var(--lh)); border-top: 1px dashed var(--ink-3); pointer-events: none; z-index: 1; }
.bar { display: grid; grid-template-rows: 1fr 22px; height: 100%; border: 0; padding: 0; background: none; cursor: pointer; }
.bar__col { display: flex; align-items: flex-end; }
.bar__col i { width: 100%; height: calc(var(--h) * 100%); border-radius: 6px 6px 2px 2px; background: #ffb48c; transform-origin: bottom; transform: scaleY(0); transition: transform .8s var(--ease) calc(var(--i) * 40ms), background-color .2s; }
.bar.is-under .bar__col i { background: #d9d7d0; }
.chart.is-in .bar__col i { transform: none; }
.bar:hover .bar__col i, .bar:focus-visible .bar__col i { background: var(--accent); }
.bar__m { align-self: end; font: 400 11px/1 var(--mono); color: var(--ink-3); }
.chart__tip { min-height: 1.5em; margin: 10px 0 0; font: 500 13px/1.5 var(--mono); color: var(--ink); }
@media (max-width: 860px) { .solar__in { grid-template-columns: 1fr; } .chain { grid-template-columns: 1fr 1fr; } .chain__end { grid-column: 1 / -1; } .chart { height: 160px; gap: 3px; } }

.dossier-wrap { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 16px; margin-top: 16px; }
.dossier { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 28px; align-items: center; padding: clamp(22px, 3vw, 34px); border-radius: var(--r-lg); background: #e5e7e2; }
.dossier__deck { position: relative; width: 100%; max-width: 270px; aspect-ratio: 210 / 297; justify-self: center; }
.page { position: absolute; inset: 0; display: grid; align-content: start; gap: 8px; padding: 18px 16px; border-radius: 6px; background: #fff; color: #1a1b1e; box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 18px 34px -20px rgba(0, 0, 0, .45); transition: transform .6s var(--ease), opacity .4s; font-size: 10px; }
.page[data-pos="0"] { z-index: 6; transform: none; }
.page[data-pos="1"] { z-index: 5; transform: translate(10px, 8px) rotate(2.5deg); }
.page[data-pos="2"] { z-index: 4; transform: translate(18px, 15px) rotate(5deg); opacity: .9; }
.page[data-pos="3"], .page[data-pos="4"], .page[data-pos="5"] { z-index: 1; transform: translate(22px, 18px) rotate(6deg); opacity: 0; }
.page[data-pos="out"] { z-index: 7; transform: translate(-30%, -4%) rotate(-10deg); opacity: 0; }
.page__k { margin: 0; font: 500 9px/1.2 var(--mono); color: #6b6d73; }
.page__t { margin: 6px 0 0; font-size: 22px; font-stretch: 115%; font-weight: 760; line-height: 1; letter-spacing: -.02em; }
.page__s { margin: 0; color: #47494f; }
.page__f { margin: auto 0 0; font: 400 8.5px var(--mono); color: #6b6d73; }
.page--cover { grid-template-rows: auto auto auto 1fr auto; }
.page--cover svg { align-self: center; }
.pv-mini path { stroke: #2d4a6b; stroke-width: 4; }
.page--cover rect, .lay rect { fill: var(--accent); }
.redact { display: inline-block; width: 46px; height: 8px; border-radius: 2px; background: #1a1b1e; vertical-align: middle; }
.bom { width: 100%; border-collapse: collapse; font-size: 9px; }
.bom td { padding: 5px 0; border-bottom: 1px solid #ececea; }
.bom td:last-child { text-align: right; }
.sld path, .sld rect, .sld circle { fill: none; stroke: #1a1b1e; stroke-width: 1.2; }
.sld text, .lay text { font: 6px var(--mono); fill: #6b6d73; }
.lay__f { fill: none; stroke: #1a1b1e; stroke-dasharray: 3 2; stroke-width: .8; }
.lay__r path { stroke: #2d4a6b; stroke-width: 3; }
.lay__road { stroke: #d0d1cb; stroke-width: 4; fill: none; }
.mini-bars { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; height: 90px; align-items: end; margin-top: 10px; }
.mini-bars i { height: calc(var(--h) * 100%); background: #ffb48c; border-radius: 2px 2px 0 0; }
.gantt { display: grid; gap: 7px; margin-top: 6px; }
.gantt p { display: grid; grid-template-columns: 62px 1fr; align-items: center; margin: 0; font-size: 8.5px; color: #47494f; }
.gantt i { height: 7px; border-radius: 3px; background: linear-gradient(90deg, transparent calc(var(--a) * 100%), #2d4a6b calc(var(--a) * 100%), #2d4a6b calc(var(--b) * 100%), transparent calc(var(--b) * 100%)); }
.gantt p:last-child i { background: linear-gradient(90deg, transparent calc(var(--a) * 100%), var(--accent) calc(var(--a) * 100%)); }
.dossier__toc { display: grid; gap: 2px; counter-reset: toc; }
.dossier__toc button { display: flex; gap: 10px; width: 100%; border: 0; background: none; padding: 8px 10px; border-radius: 8px; text-align: left; font-size: 14px; color: var(--ink-2); cursor: pointer; counter-increment: toc; transition: background-color .25s, color .25s; }
.dossier__toc button::before { content: counter(toc, decimal-leading-zero); font: 400 12px/1.6 var(--mono); }
.dossier__toc button.is-on { background: #fff; color: var(--ink); font-weight: 600; }
.dossier-wrap__text { padding: clamp(22px, 3vw, 30px); border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--line); }
.data--plain li { grid-template-columns: 86px 1fr; font-size: 14px; }
@media (max-width: 960px) { .dossier-wrap { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .dossier { grid-template-columns: 1fr; } .dossier__deck { max-width: 220px; margin-bottom: 18px; } }

/* ---------- media ---------- */
.stage--media { padding: clamp(64px, 8vw, 112px) 0; }
/* the editing workspace: illustrative, compact, every panel does something */
.nle { --lh: 128px; position: relative; border-radius: var(--r-lg); background: #0c0c0e; border: 1px solid #232327; box-shadow: 0 60px 120px -70px rgba(0, 0, 0, .9); overflow: hidden; color: var(--s-ink); }
.nle__bar { display: flex; align-items: center; gap: 14px; min-height: 42px; padding: 8px 14px; border-bottom: 1px solid #232327; background: #131316; }
.nle__dots { display: flex; gap: 6px; }
.nle__dots i { width: 10px; height: 10px; border-radius: 50%; background: #2e2e33; }
.nle__title { margin: 0; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 500 12px/1 var(--mono); color: #9fa0a6; }
.nle__badge { margin: 0 0 0 auto; flex: none; padding: 6px 11px; border-radius: 999px; border: 1px solid rgba(255, 91, 20, .45); background: rgba(255, 91, 20, .08); font: 500 11.5px/1.25 var(--mono); color: #ffb08a; }
.nle__body { display: grid; grid-template-columns: 184px minmax(0, 1fr) 236px; grid-template-areas: "proj mon fx" "tl tl tl"; }
.nle__proj, .nle__fx { padding: 12px 14px; font-size: 12.5px; }
.nle__proj { grid-area: proj; border-right: 1px solid #232327; }
.nle__fx { grid-area: fx; border-left: 1px solid #232327; }
.nle__ph { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; font: 500 11.5px/1.3 var(--mono); color: #8d8e94; }
.nle__ph b { color: var(--accent); font-weight: 500; }
.nle__tree { display: grid; gap: 2px; font: 400 12px/1.5 var(--mono); color: #b9bac0; }
.nle__tree li { padding: 3px 6px; border-radius: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nle__tree li:first-child { background: rgba(255, 255, 255, .06); color: #f4f4f2; }
.nle__tree .i1 { padding-left: 20px; color: #8d8e94; }
.nle__mon { grid-area: mon; display: grid; gap: 12px; align-content: start; padding: 14px; background: #08080a; }
.nle__transport { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.nle .btn { min-height: 38px; padding: 0 16px; font-size: 14px; }
.cut__screen { position: relative; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #0c0c0e; }
.cut__screen::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 95% at 50% 42%, transparent 52%, rgba(0, 0, 0, .5)); opacity: 0; transition: opacity .4s; }
.cut__screen.is-graded::after { opacity: 1; }
.cut__clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.12); filter: contrast(.8) saturate(.55) brightness(1.1); transition: filter .4s; }
.cut__screen.is-graded .cut__clip { filter: contrast(1.05) saturate(1.08); }
.cut__clip.is-on { opacity: 1; transform: scale(1.02); transition: transform 2.2s cubic-bezier(.25, .6, .35, 1), filter .4s; }
.cut__clip--fit { object-fit: contain; padding: 9% 0; background: #f0eee9; }
.cut__clip--fit:last-of-type { background: #0f6f69; }
.cut__flash { position: absolute; inset: 0; z-index: 3; background: #fff; opacity: 0; pointer-events: none; }
.cut__flash.is-on { animation: cutFlash .16s ease-out; }
@keyframes cutFlash { from { opacity: .16; } to { opacity: 0; } }
.cut__tc { position: absolute; z-index: 3; right: 10px; top: 10px; margin: 0; padding: 6px 10px; border-radius: 9px; font: 500 12px/1 var(--mono); }
.ov-shape { position: absolute; inset: 9% 7%; z-index: 2; pointer-events: none; transform: scale(var(--sp, 1)); transition: opacity .3s; }
.ov-shape i { position: absolute; width: 6%; aspect-ratio: 1; border: 0 solid var(--accent); }
.ov-shape i:nth-child(1) { left: 0; top: 0; border-width: 2px 0 0 2px; }
.ov-shape i:nth-child(2) { right: 0; top: 0; border-width: 2px 2px 0 0; }
.ov-shape i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 2px 2px; }
.ov-shape i:nth-child(4) { right: 0; bottom: 0; border-width: 0 2px 2px 0; }
.ov-title { position: absolute; left: 9%; bottom: 14%; z-index: 2; pointer-events: none; transition: opacity .3s; }
.ov-t { position: absolute; left: 0; bottom: 0; width: max-content; margin: 0; opacity: 0; color: #fff; font: 500 clamp(10px, 1.05vw, 13px)/1.3 var(--mono); text-shadow: 0 1px 14px rgba(0, 0, 0, .55); }
.ov-t b { display: block; margin-bottom: 5px; font: 760 clamp(17px, 2.4vw, 30px)/1 var(--sans); font-stretch: 120%; letter-spacing: -.03em; }
.cut__screen.no-title .ov-title, .cut__screen.no-shape .ov-shape { opacity: 0; }
.fxs { margin-top: 14px; }
.fxs:first-of-type { margin-top: 0; }
.fxh { margin: 0 0 6px; font: 600 12.5px/1.3 var(--sans); color: #f4f4f2; }
.fxh::before { content: "▾ "; color: #6b6d73; font-size: 10px; }
.fxr { display: grid; grid-template-columns: minmax(0, 1fr) auto 10px; gap: 8px; align-items: center; margin: 0; padding: 6px 0; border-bottom: 1px solid #1d1d21; font-size: 12.5px; color: #a6a7ad; }
.fxr b { font: 500 12px/1 var(--mono); color: #f4f4f2; font-variant-numeric: tabular-nums; }
.sw { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid #55565c; transition: background-color .2s, border-color .2s; }
.sw.on { border-color: var(--accent); background: var(--accent); }
.wheels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wheels > div { display: grid; justify-items: center; gap: 6px; font: 400 11px/1 var(--mono); color: #8d8e94; }
.wh { position: relative; width: 100%; max-width: 58px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, #26262a 30%, rgba(38, 38, 42, 0)), conic-gradient(from 90deg, #a65f5f, #a6935f, #6c9a5f, #5f9a92, #5f74a6, #8b5fa6, #a65f5f); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.wh u { position: absolute; left: calc(50% + var(--x, 0) * 50%); top: calc(50% + var(--y, 0) * 50%); width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .6); transition: left .5s var(--out), top .5s var(--out); }
.curve { width: 100%; height: auto; border-radius: 6px; background: #0a0a0c; box-shadow: inset 0 0 0 1px #1d1d21; }
.curve .cg { fill: none; stroke: #232328; stroke-width: 1; }
.curve .cv { fill: none; stroke: #f4f4f2; stroke-width: 1.8; transition: d .5s var(--out); }
.nle__tl { grid-area: tl; position: relative; padding: 6px 12px 12px; border-top: 1px solid #232327; background: #101013; }
.nle__ruler { position: relative; height: 22px; margin-left: var(--lh); border-bottom: 1px solid #232327; cursor: ew-resize; touch-action: none; font: 500 10.5px/22px var(--mono); color: #8d8e94; }
.nle__ruler span { position: absolute; top: 0; height: 100%; padding-left: 5px; border-left: 1px solid #3a3a40; }
.mk { position: absolute; top: 4px; padding: 0 5px 0 6px; border-left: 2px solid var(--accent); border-radius: 0 4px 4px 0; background: #2b1d14; font: 500 9.5px/14px var(--mono); font-style: normal; color: #ffb08a; }
.lane { --h: 30px; position: relative; display: grid; grid-template-columns: 24px calc(var(--lh) - 30px) minmax(0, 1fr); gap: 0 3px; align-items: center; height: var(--h); border-bottom: 1px solid #1a1a1e; }
.lane--a { --h: 40px; }
.lane--k { --h: 38px; }
.lane.is-sel { background: rgba(255, 255, 255, .035); }
.eye { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: none; color: #c9cacf; --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.2 8S3.7 3.4 8 3.4 14.8 8 14.8 8 12.3 12.6 8 12.6 1.2 8 1.2 8z' fill='none' stroke='black' stroke-width='1.4'/%3E%3Ccircle cx='8' cy='8' r='2.3'/%3E%3C/svg%3E"); }
button.eye { cursor: pointer; }
button.eye:hover { background: rgba(255, 255, 255, .08); }
.eye::before { content: ""; width: 15px; height: 15px; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.eye[aria-pressed="false"] { color: #5d5e64; --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.2 8S3.7 3.4 8 3.4 14.8 8 14.8 8 12.3 12.6 8 12.6 1.2 8 1.2 8z' fill='none' stroke='black' stroke-width='1.4'/%3E%3Cpath d='M2.5 13.5l11-11' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E"); }
.eye--lock { color: #4a4b50; }
.lane--a .eye--lock { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 6h2.8L8.6 3v10L4.8 10H2z'/%3E%3Cpath d='M11 5.4a3.6 3.6 0 0 1 0 5.2' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E"); }
.lh { display: flex; align-items: center; gap: 7px; min-width: 0; height: 24px; margin: 0; padding: 0 8px; border: 0; border-radius: 6px; background: none; font: 500 11.5px/1 var(--mono); color: #a6a7ad; text-align: left; white-space: nowrap; overflow: hidden; }
button.lh { cursor: pointer; }
button.lh:hover { background: rgba(255, 255, 255, .06); color: #f4f4f2; }
.lh b { font-weight: 500; color: #8d8e94; }
.lh em { margin-left: auto; padding: 2px 4px; border-radius: 3px; background: #3a2a1a; font: 500 9.5px/1 var(--mono); font-style: normal; color: #ffb08a; }
.lane.is-sel .lh { background: rgba(255, 91, 20, .14); color: #fff; }
.lane.is-sel .lh b { color: var(--accent); }
.lc { position: relative; height: var(--h); min-width: 0; }
.lane .clip { position: absolute; top: 4px; bottom: 4px; display: block; padding: 0 8px; border-radius: 5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 500 10.5px/22px var(--mono); font-style: normal; color: rgba(255, 255, 255, .8); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); transition: opacity .25s, box-shadow .2s; }
.clip.t { background: #3a3350; }
.clip.s { background: #22433f; }
.clip.a { background: repeating-linear-gradient(135deg, #3b3122 0 6px, #352c1f 6px 12px); }
.lane.is-sel .clip { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); }
.kf { position: absolute; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; background: #d9dade; transform: rotate(45deg); transition: background-color .2s, transform .25s var(--out), opacity .25s; }
/* keyframed layers: the clip name on top, the keyframes along the bottom */
.lane--k .clip { line-height: 16px; padding-top: 2px; }
.lane--k .kf { top: auto; bottom: 8px; margin: 0 0 -3.5px -3.5px; }
.kf.is-hit { background: var(--accent); transform: rotate(45deg) scale(1.6); }
.lane.is-off .clip, .lane.is-off .kf { opacity: .28; }
.cut__c { position: absolute; top: 3px; bottom: 3px; border-radius: 4px; background: #2a2a30 center / cover no-repeat; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); transition: left .5s var(--out), width .5s var(--out), box-shadow .2s; }
.cut__c.is-on { box-shadow: inset 0 0 0 2px var(--accent); }
.lane--a .lc::before { content: ""; position: absolute; inset: 3px 0; border-radius: 4px; background: rgba(95, 150, 120, .12); box-shadow: inset 0 0 0 1px rgba(130, 190, 155, .16); }
.lane--a canvas, .vwave { position: relative; width: 100%; height: var(--h); }
.vwave path { fill: rgba(190, 225, 205, .42); }
.lane.is-muted .lc { opacity: .42; }
.nle__over { position: absolute; top: 6px; bottom: 12px; left: calc(12px + var(--lh)); right: 12px; pointer-events: none; }
.cut__grid { position: absolute; inset: 22px 0 0; }
.cut__grid i { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, .045); }
.cut__grid i.is-kick { background: rgba(255, 255, 255, .08); }
.cut__grid i.is-bar { background: rgba(255, 255, 255, .17); }
.cut__head { position: absolute; top: 0; bottom: 0; left: calc(var(--t, 0) * 100%); width: 1.5px; margin-left: -.75px; background: var(--accent); }
.cut__head::before { content: ""; position: absolute; top: 3px; left: 50%; width: 11px; height: 14px; margin-left: -5.5px; border-radius: 2px; background: var(--accent); clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%); }
.cut__note { max-width: 76ch; margin: 18px 0 0; color: var(--s-ink-2); font-size: 14.5px; }
.cut__play .i-stop, .cut__play .cut__play-off { display: none; }
.cut__play[aria-pressed="true"] .i-play, .cut__play[aria-pressed="true"] .cut__play-on { display: none; }
.cut__play[aria-pressed="true"] .i-stop { display: block; }
.cut__play[aria-pressed="true"] .cut__play-off { display: inline; }
@media (max-width: 1080px) { .nle__body { grid-template-columns: minmax(0, 1fr) 216px; grid-template-areas: "mon fx" "tl tl"; } .nle__proj { display: none; } }
@media (max-width: 760px) {
  .nle { --lh: 70px; }
  .nle__body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "mon" "tl"; }
  .nle__fx, .nle__title, .nle__dots { display: none; }
  .nle__badge { flex: 1 1 auto; min-width: 0; margin-left: 0; border-radius: 10px; white-space: normal; }
  .nle__mon { padding: 10px; }
  .nle__tl { padding: 6px 8px 10px; }
  .nle__over { left: calc(8px + var(--lh)); right: 8px; }
  .lh > span { display: none; }
  .lh { padding: 0 6px; }
}

.design { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: clamp(56px, 7vw, 90px); align-items: start; }
.design--one { grid-template-columns: minmax(0, 1fr); margin-top: 28px; }
.design--one .makes__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.design--one .makes__list > div { grid-template-columns: 1fr; gap: 6px; padding: 4px 20px; border-bottom: 0; border-left: 1px solid var(--s-line); }
.design--one .makes__list > div:first-child { padding-left: 0; border-left: 0; }
@media (max-width: 860px) { .design--one .makes__list { grid-template-columns: 1fr 1fr; gap: 18px 0; } .design--one .makes__list > div:nth-child(3) { padding-left: 0; border-left: 0; } }
@media (max-width: 520px) { .design--one .makes__list { grid-template-columns: 1fr; } .design--one .makes__list > div { padding-left: 0; border-left: 0; } }
.brand { padding: 22px; border-radius: var(--r-lg); background: #f0eee9; color: #1c1b1a; }
.brand__banner { width: 100%; border-radius: 10px; }
.brand__row { display: grid; grid-template-columns: 92px 1fr; gap: 18px; margin-top: 18px; align-items: start; }
.brand__logo { width: 92px; border-radius: 16px; }
.brand .brand__name { margin: 0 0 6px; font-size: 22px; font-stretch: 118%; font-weight: 760; letter-spacing: -.02em; color: #1c1b1a; }
.duo__text .btn { margin-top: 10px; }
.brand p { font-size: 14.5px; color: #4a4744; }
.swatches { display: flex; gap: 6px; margin-top: 10px; }
.swatches li { width: 30px; height: 30px; border-radius: 8px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.makes { padding: 22px 24px; border-radius: var(--r-lg); background: var(--stage-2); border: 1px solid var(--s-line); }
.makes__list > div { display: grid; grid-template-columns: 72px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--s-line); }
.makes__list > div:last-child { border-bottom: 0; }
.makes dt { font: 500 12.5px/1.5 var(--mono); color: var(--accent); }
.makes dd { font-size: 14.5px; color: var(--s-ink-2); }
.edeck { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 20px 40px; align-items: center; margin-top: 16px; padding: clamp(22px, 3vw, 34px); border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--line); }
.edeck__text p { color: var(--ink-2); }
.deck { display: grid; gap: 14px; }
.deck__view { position: relative; aspect-ratio: 16 / 10; }
.deck__slide { position: absolute; inset: 0; padding: 26px 26px 20px; border-radius: var(--r-lg); overflow: hidden; transition: opacity .45s, transform .55s var(--ease); }
.deck[data-v="after"] .deck__slide--before, .deck[data-v="before"] .deck__slide--after { opacity: 0; transform: scale(.97); pointer-events: none; }
.deck__slide--before { box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px -28px rgba(0, 0, 0, .4); background: #fff; color: #000; font-family: "Times New Roman", Times, serif; }
.old-t { margin: 22px 0 10px; font-size: 15px; font-weight: 700; color: #1f3e8c; text-decoration: underline; }
.old-p { font-size: 12.5px; line-height: 1.35; }
.old-tb { border-collapse: collapse; width: 100%; font-size: 11.5px; }
.old-tb td, .old-tb th { border: 1px solid #888; padding: 3px 6px; font-weight: inherit; text-align: left; }
.deck__slide--after { background: #121214; color: #f4f4f2; display: grid; align-content: start; gap: 6px; }
.new-k { margin: 26px 0 0; font: 500 12px/1 var(--mono); color: var(--s-ink-2); }
.new-t { margin: 0; font-size: clamp(1.6rem, 3.2vw, 2.4rem); font-stretch: 116%; font-weight: 760; letter-spacing: -.025em; line-height: 1.05; }
.new-bars { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; height: 90px; align-items: end; margin: 8px 0; }
.new-bars i { height: calc(var(--h) * 100%); border-radius: 3px 3px 0 0; background: #3a3a40; }
.new-bars i.hi { background: var(--accent); }
.new-bars i.lo { background: #6f7fa3; }
.new-s { margin: 0; font-size: 13.5px; color: var(--s-ink-2); }
.stamp { position: absolute; top: 14px; left: 14px; z-index: 2; padding: 6px 10px; border-radius: 8px; background: #c2362b; color: #fff; font: 600 12px/1 var(--sans); letter-spacing: .01em; }
.stamp--after { background: var(--accent); color: #0e0f11; }
.deck__switch { justify-self: start; }
@media (max-width: 960px) { .design, .edeck { grid-template-columns: minmax(0, 1fr); } }
.design > *, .nle__body > *, .edeck > *, .zil > *, .about > *, .duo > *, .lab > * { min-width: 0; }
@media (max-width: 520px) { .deck__view { aspect-ratio: 4 / 5; } .old-p { font-size: 11.5px; } }

/* ---------- zilerno ---------- */
.zil { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 6vw, 80px); align-items: center; }
.zil__visual { position: relative; display: grid; place-items: center; padding: 30px 0; border-radius: var(--r-lg); background: #0f6f69; min-height: 520px; overflow: hidden; }
.phone { width: min(250px, 56%); padding: 8px; border-radius: 34px; background: #111; box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .6); }
.phone img { border-radius: 27px; }
.zil__mascot { position: absolute; width: 38%; right: 4%; bottom: 3%; filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .3)); }
.zil__icon { width: 26px; height: 26px; border-radius: 7px; }
.zil__text .h2 { margin-bottom: 16px; }
.zil__text > p { color: var(--ink-2); }
.workshop__h { margin-top: 34px; }
.workshop { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.workshop li { display: grid; gap: 4px; padding: 14px 16px; border-radius: 12px; border: 1px dashed var(--line-2); }
.workshop b { font-size: 15px; }
.workshop span { font-size: 13px; color: var(--ink-3); }
@media (max-width: 860px) { .zil { grid-template-columns: 1fr; } .zil__visual { min-height: 440px; } }

/* ---------- capabilities ---------- */
.caps { border-top: 1px solid var(--ink); }
.cap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1.3fr) 128px; gap: 12px 32px; padding: 22px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.cap__see { justify-self: end; display: inline-flex; gap: 6px; font: 500 12.5px/1.2 var(--mono); color: var(--ink-3); text-decoration: none; white-space: nowrap; transition: color .2s; }
a.cap__see::after { content: "→"; transition: transform .35s var(--out); }
a.cap__see:hover { color: var(--accent-ink); }
@media (hover: hover) { a.cap__see:hover::after { transform: translateX(3px); } }
.cap h3 { font-size: 1.15rem; font-stretch: 108%; font-weight: 680; letter-spacing: -.01em; }
.cap__one { margin: 0; font-size: 15.5px; color: var(--ink); }
.cap__list { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-3); }
@media (max-width: 960px) { .cap { grid-template-columns: 1fr; gap: 6px; } .cap__see { justify-self: start; margin-top: 4px; } .cap__see--none { display: none; } }

/* ---------- about ---------- */
.about { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 88px); }
.about__text .h2 { margin-bottom: 26px; }
.about__big { font-size: clamp(1.25rem, 2.2vw, 1.7rem); line-height: 1.4; font-weight: 500; letter-spacing: -.01em; color: var(--ink); }
.about__text p:not(.about__big) { color: var(--ink-2); max-width: 58ch; }
.about__side { display: grid; gap: 28px; align-content: start; }
.journey ol { position: relative; display: grid; gap: 0; }
.journey li { position: relative; display: grid; gap: 2px; padding: 0 0 18px 24px; }
.journey li::before { content: ""; position: absolute; left: 4px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); }
.journey li::after { content: ""; position: absolute; left: 8px; top: 18px; bottom: 0; width: 1px; background: var(--line-2); }
.journey li:last-child::after { display: none; }
.journey li.is-next::before { background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--accent); }
.journey b { font-size: 15px; }
.journey span { font-size: 13.5px; color: var(--ink-3); }
.langs { padding: 24px; border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--line); }
.langs .h3 { margin-bottom: 8px; }
.langs__list > div { display: grid; grid-template-columns: 92px 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.langs__list > div:last-child { border-bottom: 0; padding-bottom: 0; }
.langs__list dt { font-size: 15px; font-weight: 640; }
.langs__list dd { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 960px) { .about { grid-template-columns: 1fr; } }

/* ---------- off-hours ---------- */
.off { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tile { padding: 26px; border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--line); }
.tile > p { color: var(--ink-2); font-size: 15px; }
.overload svg { width: 100%; height: 150px; margin-top: 10px; overflow: visible; }
.overload__grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.overload__line { fill: none; stroke: var(--accent); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-dasharray: 1000; stroke-dashoffset: 1000; transition: stroke-dashoffset 1.8s var(--ease); }
.overload.is-in .overload__line { stroke-dashoffset: 0; }
.overload__x { display: flex; justify-content: space-between; font: 400 11px/1 var(--mono); color: var(--ink-3); margin-top: 6px; }
.torch { position: relative; height: 220px; margin-top: 14px; border-radius: 14px; overflow: hidden; background: #05070c; cursor: crosshair; touch-action: pan-y; --x: 50%; --y: 60%; --r: 140px; --a: .93; }
.torch__scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.t-ground { fill: #2c3a26; } .t-tree { fill: #1e3b2a; } .t-tent { fill: #c2603a; stroke: #7a3520; stroke-width: 2; } .t-fire { fill: #f59e0b; }
.torch__beam { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle var(--r) at var(--x) var(--y), rgba(255, 238, 200, .12) 0%, rgba(255, 238, 200, 0) 55%, rgba(2, 3, 6, var(--a)) 100%); }
.torch__modes { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; flex-wrap: wrap; gap: 4px; }
.torch__modes button { border: 0; padding: 6px 9px; border-radius: 8px; background: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .85); font: 500 11.5px/1 var(--mono); cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.torch__modes button[aria-pressed="true"] { background: #fff; color: #111; }
.pan { display: grid; gap: 12px; margin-top: 14px; --fat: #efe3d1; --mt: #c0605c; --mm: #c0605c; --mb: #b0675a; --cr: #8a5a3c; --crust: 0; --steam: 0; --smoke: 0; --fizz: 0; --flame: .6; --p: .64; }
.pan__stage { position: relative; border-radius: 14px; overflow: hidden; background: radial-gradient(120% 100% at 50% 100%, #24170f 0%, #0b0b0d 62%); }
.pan__svg { width: 100%; height: auto; }
.m-top { stop-color: var(--mt); } .m-mid { stop-color: var(--mm); } .m-bot { stop-color: var(--mb); }
.pan__meat { transition: fill .3s; }
.pan__crust { fill: var(--cr); transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(var(--crust)); transition: transform .35s var(--out), fill .3s; }
.pan__body { stroke: rgba(255, 255, 255, .08); stroke-width: 1; }
.pan__handle { fill: #1d1e22; }
.pan__oil { fill: none; stroke: #d9b45a; stroke-width: 2.4; stroke-linecap: round; opacity: calc(.35 + var(--fizz) * .5); }
.pan__fizz circle { fill: #f3ead7; opacity: var(--fizz); animation: fizz .7s ease-in-out infinite alternate; }
.pan__fizz circle:nth-child(2n) { animation-delay: -.35s; animation-duration: .55s; }
.pan__fizz circle:nth-child(3n) { animation-delay: -.2s; animation-duration: .8s; }
@keyframes fizz { from { transform: translateY(0); } to { transform: translateY(-3px); } }
.pan__steam path, .pan__smoke path { fill: none; stroke-linecap: round; }
.pan__steam path { stroke: rgba(235, 238, 242, .55); stroke-width: 3; opacity: var(--steam); animation: rise 2.4s ease-in-out infinite; }
.pan__smoke path { stroke: rgba(140, 140, 146, .7); stroke-width: 9; filter: blur(3px); opacity: var(--smoke); animation: rise 3s ease-in-out infinite; }
.pan__steam path:nth-child(2), .pan__smoke path:nth-child(2) { animation-delay: -1.2s; }
.pan__steam path:nth-child(3) { animation-delay: -.6s; }
@keyframes rise { 0% { transform: translateY(6px); } 50% { transform: translateY(-4px); } 100% { transform: translateY(6px); } }
.pan__flame path { fill: #4b8cff; opacity: .9; transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(var(--flame)); transition: transform .4s var(--out); }
.pan__flame path:nth-child(2) { fill: #7fb0ff; }
.pan__burner { stroke: #2a2b30; stroke-width: 4; stroke-linecap: round; }
.pan__ir { position: absolute; left: 10px; top: 10px; margin: 0; padding: 6px 9px; border-radius: 9px; font: 400 11.5px/1 var(--mono); }
.pan__ir b { font-weight: 500; margin-left: 4px; }
.pan__fat { fill: none; stroke: var(--fat); stroke-width: 9; transition: stroke .3s; }
.pan__marble path { fill: none; stroke: rgba(255, 236, 226, .3); stroke-width: 1.3; stroke-linecap: round; }
.pan .rng { gap: 4px; }
#panTemp::-webkit-slider-runnable-track { background: linear-gradient(90deg, #6f8093 0 36.4%, #c9a24a 36.4% 54.5%, #c46a2a 54.5% 72.7%, #8a3a14 72.7% 90.9%, #3b3b3f 90.9%); }
#panTemp::-moz-range-track { background: linear-gradient(90deg, #6f8093 0 36.4%, #c9a24a 36.4% 54.5%, #c46a2a 54.5% 72.7%, #8a3a14 72.7% 90.9%, #3b3b3f 90.9%); }
.pan__ticks { position: relative; height: 12px; margin-top: -6px; font: 400 10.5px/1 var(--mono); color: var(--ink-3); }
.pan__ticks span { position: absolute; left: calc(10px + (100% - 20px) * var(--at)); transform: translateX(-50%); }
.pan__state { min-height: 4.6em; margin: 0; font-size: 14px; color: var(--ink-2); }
.pan__state b { color: var(--ink); }
@media (max-width: 860px) { .off { grid-template-columns: 1fr; } .tile--kit { grid-row: auto; } .tile { padding: 20px; } }

/* ---------- off the clock: each hobby with something to watch or to try ---------- */
.tile--wide { grid-column: 1 / -1; }
.tile__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 8px 32px; align-items: end; margin-bottom: 18px; }
.tile__head .h3 { margin: 0; }
.tile__head p { margin: 0; color: var(--ink-2); font-size: 15px; }
.ico { width: 44px; height: 44px; flex: none; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.ico .fill { fill: var(--ink); stroke: none; }
.ico .acc { fill: var(--accent); }
.ico .thick { stroke-width: 3.4; }
.ico .hl { stroke: var(--paper); stroke-width: 1.6; }
/* the small animations run only while their tile is on screen */
.off .ico * { animation-play-state: paused; }
.off .tile.is-live .ico * { animation-play-state: running; }

/* sport: six cards, each with its own little loop */
.sport { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.sport li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; row-gap: 3px; align-items: center; padding: 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); }
.sport .ico { grid-row: 1 / 3; }
.sport li b { font-size: 15px; font-weight: 640; line-height: 1.25; }
.sport li > span { grid-column: 2; font: 400 12.5px/1.25 var(--mono); color: var(--ink-3); }
.sport li > i { grid-column: 1 / -1; height: 6px; margin-top: 12px; border-radius: 6px; background: var(--sunk); overflow: hidden; }
.sport li > i::after { content: ""; display: block; height: 100%; width: calc(var(--y) * 10%); border-radius: 6px; background: var(--ink); transform-origin: left; transform: scaleX(0); transition: transform 1.1s var(--out); }
.sport li:nth-child(2) > i::after { transition-delay: .08s; } .sport li:nth-child(3) > i::after { transition-delay: .16s; } .sport li:nth-child(4) > i::after { transition-delay: .24s; } .sport li:nth-child(5) > i::after { transition-delay: .32s; } .sport li:nth-child(6) > i::after { transition-delay: .4s; }
.sport.is-in li > i::after { transform: none; }
.sp-ball .b { transform-origin: 24px 31px; animation: spBounce .85s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
.sp-ball .sh { fill: var(--line-2); stroke: none; transform-origin: 24px 44px; animation: spShadow .85s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
@keyframes spBounce { 0% { transform: translateY(0); } 86% { transform: translateY(12px); } 100% { transform: translateY(12px) scale(1.08, .88); } }
@keyframes spShadow { from { transform: scaleX(.55); opacity: .45; } to { transform: scaleX(1); opacity: 1; } }
.sp-belt .t1 { transform-origin: 22px 27px; animation: spTail 1.5s ease-in-out infinite alternate; }
.sp-belt .t2 { transform-origin: 26px 27px; animation: spTail 1.5s ease-in-out infinite alternate-reverse; }
@keyframes spTail { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
.sp-db .db { transform-origin: 24px 24px; animation: spDb 1.5s ease-in-out infinite alternate; }
@keyframes spDb { from { transform: translateY(6px) rotate(-10deg); } to { transform: translateY(-6px) rotate(8deg); } }
.sp-glove .g { animation: spJab 1.25s cubic-bezier(.3, 0, .2, 1) infinite; }
.sp-glove .hit { stroke: var(--accent); opacity: 0; animation: spHit 1.25s linear infinite; }
@keyframes spJab { 0%, 55%, 100% { transform: translateX(0); } 66% { transform: translateX(7px); } 80% { transform: translateX(0); } }
@keyframes spHit { 0%, 63%, 80%, 100% { opacity: 0; } 66%, 74% { opacity: 1; } }
.sp-grip .w1 { transform-origin: 15px 40px; animation: spPushA 1.7s ease-in-out infinite alternate; }
.sp-grip .w2 { transform-origin: 33px 40px; animation: spPushB 1.7s ease-in-out infinite alternate; }
@keyframes spPushA { from { transform: rotate(-3deg); } to { transform: translateX(3px) rotate(6deg); } }
@keyframes spPushB { from { transform: translateX(-3px) rotate(-6deg); } to { transform: rotate(3deg); } }
.sp-bar .bb { animation: spLift 2.4s cubic-bezier(.5, 0, .3, 1) infinite; }
@keyframes spLift { 0%, 14% { transform: translateY(8px); } 48%, 62% { transform: translateY(-6px); } 100% { transform: translateY(8px); } }

/* cycling: a rider whose legs follow the cranks, and a gear you can change */
.ride { margin-top: 12px; }
.ride__scene { width: 100%; height: auto; border-radius: 14px; background: linear-gradient(#f7f3ea, #eee6d4); }
.ride__hills { fill: #e3d9c4; }
.ride__road { stroke: var(--ink-2); stroke-width: 2; }
.ride__dash { stroke: #b7ad97; stroke-width: 2; stroke-dasharray: 10 12; }
.ride__wheel circle { fill: none; stroke: var(--ink); stroke-width: 3; }
.ride__wheel path { stroke: #8d8f95; stroke-width: 1; }
.ride__frame { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.ride__crank { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.ride__body { fill: none; stroke: var(--ink); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.ride__head { fill: var(--ink); }
.ride__leg { fill: none; stroke: var(--ink); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.ride__leg--far { stroke: #8d8f95; }
.ride__ctl { display: grid; gap: 10px; margin-top: 14px; }
.ride__ctl .seg { justify-self: start; }
.ride__out { margin: 12px 0 0; color: var(--ink-2); font-size: 15px; }
.ride__out b { font: 680 28px/1 var(--sans); font-stretch: 112%; color: var(--ink); font-variant-numeric: tabular-nums; }
.ride__out span { margin-left: 8px; font: 400 12.5px/1.4 var(--mono); color: var(--ink-3); }

/* flashlights: the beam you can aim, and the distance FL 1 would print on the box */
.beam { display: grid; gap: 10px; margin-top: 12px; }
.beam__svg { width: 100%; height: auto; border-radius: 12px; background: #05070c; }
.beam__cone { fill: rgba(255, 238, 200, .45); transition: opacity .3s; }
.beam__torch { fill: #2f3136; stroke: #8d8f95; stroke-width: 1; }
.beam__ticks path { stroke: rgba(255, 255, 255, .28); }
.beam__ticks text { fill: rgba(255, 255, 255, .62); font: 8.5px var(--mono); }
.beam__end { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 3 3; }
.beam__out { margin: 0; font-size: 14px; color: var(--ink-2); }
.beam__out b { color: var(--ink); font-weight: 680; font-variant-numeric: tabular-nums; }
.beam__out span { display: block; margin-top: 4px; font: 400 12px/1.4 var(--mono); color: var(--ink-3); }

/* the EDC bag: nine modules laid out flat, packed per scenario */
.tile--kit { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr); gap: 28px; align-items: start; }
.kit__text .seg { margin: 4px 0 10px; }
.kit__count { min-height: 1.4em; margin: 0; font: 500 13px/1.4 var(--mono); color: var(--accent-ink); }
.kit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.kit li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: start; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); transition: opacity .35s, transform .5s var(--out), border-color .3s, background-color .3s; }
.kit li .ico { width: 40px; height: 40px; grid-row: 1 / 3; }
.kit li b { font-size: 14.5px; font-weight: 640; }
.kit li span { font-size: 12.5px; line-height: 1.4; color: var(--ink-2); }
.kit.has-scen li:not(.is-match) { opacity: .3; transform: scale(.97); }
.kit li.is-match { border-color: var(--accent); background: #fff6f1; transform: translateY(-3px); }
html.has-anim .kit:not(.is-in) li { opacity: 0; transform: translateY(18px) rotate(-3deg); }
.kit.is-knolling li { transition-delay: calc(var(--i) * 75ms); }
.k-sun .rays { transform-origin: 36px 12px; animation: kSpin 8s linear infinite; }
.k-torch .bm { animation: kBlink 2.6s ease-in-out infinite; }
.k-drop .d { animation: kDrop 1.9s cubic-bezier(.5, 0, .8, .4) infinite; }
.k-flame .f { stroke: var(--accent); fill: rgba(255, 91, 20, .14); transform-origin: 24px 36px; animation: kFlick .45s ease-in-out infinite alternate; }
.k-tool .bl { transform-origin: 11px 30px; animation: kOpen 2.8s ease-in-out infinite; }
.k-comp .n { transform-origin: 24px 24px; animation: kNeedle 3.2s ease-in-out infinite; }
.k-can .tab { transform-origin: 22px 12px; animation: kTab 2.4s ease-in-out infinite; }
.k-snow .s { transform-origin: 24px 24px; animation: kSpin 10s linear infinite; }
.k-aid .x { stroke: var(--bad); stroke-width: 3; transform-origin: 24px 26.5px; animation: kBeat 1.6s ease-in-out infinite; }
@keyframes kSpin { to { transform: rotate(360deg); } }
@keyframes kBlink { 0%, 44%, 100% { opacity: 1; } 50%, 56% { opacity: .12; } }
@keyframes kDrop { 0% { transform: translateY(-2px); opacity: 0; } 15% { opacity: 1; } 70% { transform: translateY(15px); opacity: 1; } 82%, 100% { transform: translateY(17px); opacity: 0; } }
@keyframes kFlick { from { transform: scale(1, 1) skewX(0); } to { transform: scale(.94, 1.07) skewX(-3deg); } }
@keyframes kOpen { 0%, 18% { transform: rotate(27deg); } 48%, 70% { transform: rotate(0); } 100% { transform: rotate(27deg); } }
@keyframes kNeedle { 0% { transform: rotate(-32deg); } 30% { transform: rotate(18deg); } 55% { transform: rotate(-8deg); } 75%, 100% { transform: rotate(0); } }
@keyframes kTab { 0%, 58%, 100% { transform: rotate(0); } 74% { transform: rotate(-28deg); } }
@keyframes kBeat { 0%, 30%, 100% { transform: scale(1); } 12% { transform: scale(1.25); } 20% { transform: scale(.94); } }

/* training: the block, a marker walking its weeks, and the rules behind it */
.overload { position: relative; }
.overload__dot { position: absolute; left: 0; top: 0; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(255, 91, 20, .18); opacity: 0; transition: opacity .4s; pointer-events: none; }
.overload.is-in .overload__dot { opacity: 1; transition-delay: 1.4s; }
.rules { display: grid; gap: 10px; margin-top: 16px; }
.rules li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 2px 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.rules b { grid-row: 1 / 3; font: 500 12.5px/1.5 var(--mono); color: var(--accent-ink); }
.rules span { font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.rules cite { font: italic 400 12px/1.3 var(--sans); color: var(--ink-3); }

/* supplements: what the studies used, and how strong the evidence is */
.tile--supp { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); gap: 28px; align-items: start; }
.dose { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0 6px; }
.dose > div { padding: 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); }
.dose dt { font: 500 12px/1.3 var(--mono); color: var(--ink-2); }
.dose dd { margin: 5px 0 3px; font: 680 20px/1.1 var(--sans); font-stretch: 108%; color: var(--ink); font-variant-numeric: tabular-nums; }
.dose small { display: block; margin-top: 3px; font: 400 12px/1.35 var(--sans); font-stretch: 100%; color: var(--ink-2); }
.supp { display: grid; margin: 0; }
.supp li { --ev: var(--ink); display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-areas: "cap name ev" "cap what tag"; column-gap: 12px; row-gap: 2px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); }
.supp li:last-child { border-bottom: 0; }
.supp li[data-e="3"] { --ev: #19733f; } .supp li[data-e="1"] { --ev: var(--ink-3); } .supp li[data-e="0"] { --ev: var(--bad); }
.supp .capsule { grid-area: cap; position: relative; width: 26px; height: 12px; border-radius: 99px; border: 1.5px solid var(--ev); background: linear-gradient(90deg, var(--ev) 50%, var(--paper) 50%); transform: rotate(-32deg); }
.supp b { grid-area: name; font-size: 15px; font-weight: 640; }
.supp__what { grid-area: what; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.supp .ev { grid-area: ev; justify-self: end; display: inline-flex; gap: 4px; }
.supp .ev i { position: relative; width: 18px; height: 8px; border-radius: 99px; background: var(--sunk); overflow: hidden; }
.supp .ev i::after { content: ""; position: absolute; inset: 0; background: var(--ev); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--out); transition-delay: calc(var(--i) * 90ms + var(--k, 0) * 70ms); }
.supp .ev i:nth-child(2) { --k: 1; } .supp .ev i:nth-child(3) { --k: 2; }
.supp.is-in li[data-e="1"] .ev i:nth-child(1)::after, .supp.is-in li[data-e="2"] .ev i:nth-child(-n+2)::after, .supp.is-in li[data-e="3"] .ev i::after { transform: none; }
.supp em { grid-area: tag; justify-self: end; font: normal 500 11.5px/1 var(--mono); color: var(--ev); }
html.has-anim .supp:not(.is-in) .capsule { transform: translateY(-14px) rotate(-120deg); opacity: 0; }
.supp .capsule { transition: transform .6s var(--out), opacity .4s; transition-delay: calc(var(--i) * 90ms); }
@media (hover: hover) { .supp li:hover .capsule { animation: capWiggle .5s ease-in-out; } }
@keyframes capWiggle { 25% { transform: rotate(-12deg); } 75% { transform: rotate(-48deg); } }
.supp__src { grid-column: 1 / -1; margin: 4px 0 0; font: 400 12px/1.6 var(--mono); color: var(--ink-3); }
.supp__src a { color: var(--ink-2); white-space: nowrap; }

@media (max-width: 960px) {
  .tile--kit, .tile--supp { grid-template-columns: minmax(0, 1fr); }
  .sport { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile__head { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .sport, .kit { grid-template-columns: minmax(0, 1fr); }
  .dose { grid-template-columns: minmax(0, 1fr); }
  .kit li .ico { width: 34px; height: 34px; }
}
@media (min-width: 561px) and (max-width: 860px) { .kit { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- contact + footer ---------- */
.contact { padding-bottom: 80px; }
.mega--contact { font-size: clamp(3.4rem, 11vw, 9rem); margin-bottom: 24px; }
.contact__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.foot { border-top: 1px solid var(--line); padding: 26px 0 40px; }
.foot__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font: 400 12px/1.5 var(--mono); color: var(--ink-3); }

/* ---------- film ---------- */
.film { width: min(1120px, 94vw); max-width: none; padding: 8px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 26px; color: #f4f4f2; background: rgba(28, 28, 31, .5); -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 50px 120px -40px rgba(0, 0, 0, .85); overflow: visible; }
.film::backdrop { background: rgba(5, 5, 6, .82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.film__box { position: relative; border-radius: 19px; overflow: hidden; background: #000; }
.film video { width: 100%; max-height: 86vh; }
.film__close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.film__close svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.8; fill: none; }
.film[open] { animation: filmIn .5s var(--out); }
@keyframes filmIn { from { opacity: 0; transform: scale(.96); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); } }


/* ---------- projects: a catalogue of four, real captures, one control each ---------- */
.pj { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.pj__card { display: grid; align-content: start; gap: 12px; padding: 22px 28px 30px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.pj__card:nth-child(even) { padding: 22px 0 30px 28px; border-left: 1px solid var(--line); }
.pj__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pj__k, .pj__role { margin: 0; font: 500 12px/1.3 var(--mono); color: var(--ink-3); }
.pj__role { color: var(--accent-ink); }
.pj__name { font-size: clamp(1.9rem, 3.3vw, 2.8rem); font-stretch: 125%; font-weight: 800; letter-spacing: -.04em; line-height: .95; }
.pj__name a { text-decoration: none; transition: color .2s; }
.pj__name a:hover { color: var(--accent-ink); }
.pj__line { margin: 0; max-width: 48ch; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.pj__view { display: grid; margin-top: 4px; }
.pj__view img { grid-area: 1 / 1; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top center; border-radius: 12px; background: #ebe9e3; border: 1px solid var(--line); opacity: 0; transition: opacity .35s ease; }
.pj__view--dark img { background: #0f1012; border-color: #26282d; }
.pj__view img.is-on { opacity: 1; }
.pj__view figcaption { grid-area: 2 / 1; margin-top: 10px; min-height: 3em; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.pj__view figcaption > span:not(.is-on) { display: none; }
.pj__ctl { justify-self: start; }
.pj__facts { display: flex; flex-wrap: wrap; gap: 4px 18px; font: 400 12.5px/1.5 var(--mono); color: var(--ink-3); }
.pj__facts b { color: var(--ink); font-weight: 500; }
.pj__go { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 15px; font-weight: 620; text-decoration: none; }
.pj__go::after { content: "→"; transition: transform .35s var(--out); }
.pj__go:hover { color: var(--accent-ink); }
@media (hover: hover) { .pj__go:hover::after { transform: translateX(4px); } }
@media (max-width: 900px) { .pj { grid-template-columns: 1fr; } .pj__card, .pj__card:nth-child(even) { padding: 22px 0 30px; border-left: 0; } }

/* ---------- project stages: each card plays its own mechanism, with the numbers from its evidence ---------- */
.pj__view { position: relative; container-type: inline-size; }
.pa { display: none; }
.has-anim .pa { display: block; position: relative; grid-area: 1 / 1; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 12px; font: 400 clamp(8px, 1.9cqw, 12.5px)/1.3 var(--mono); }
.has-anim .pj__view img { display: none; aspect-ratio: 16 / 10; }
.has-anim .pj__view[data-real] img.is-on { display: block; position: relative; z-index: 2; animation: realIn .35s var(--out); }
@keyframes realIn { from { opacity: 0; transform: scale(.985); } }
.pa--light { background: linear-gradient(rgba(14, 15, 17, .045) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, rgba(14, 15, 17, .045) 1px, transparent 1px) 0 0 / 22px 22px, #fbfbfa; border: 1px solid var(--line); color: var(--ink-2); }
.pa--dark { background: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 22px 22px, #0f1012; border: 1px solid #26282d; color: #a6a7ad; }
.pa p { margin: 0; }
.pa__k { color: var(--ink-3); margin-bottom: .5em !important; }
.pa__chip { position: absolute; padding: .35em .75em; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--ink-2); white-space: nowrap; }
.pa__chip b { font-weight: 500; color: var(--ink); display: inline-block; min-width: 2.1em; text-align: right; }
.pa__status { position: absolute; left: 4%; bottom: 5%; right: 40%; }
.pa__status > span { display: none; }
.pa__status > span.is-on { display: inline-flex; align-items: center; gap: .5em; animation: stIn .3s var(--out); }
.pa__status > span::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: currentColor; }
@keyframes stIn { from { opacity: 0; transform: translateY(4px); } }
.pa__foot { margin-top: .5em !important; color: var(--ink-3); font-size: .9em; }
.pj__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.pj__real { display: none; }
.has-anim .pj__real { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border: 1px solid var(--line-2); border-radius: 999px; background: transparent; font: 500 12px/1 var(--mono); color: var(--ink-2); cursor: pointer; transition: background-color .2s, color .2s; }
.pj__real::before { content: ""; width: 12px; height: 9px; border: 1.5px solid currentColor; border-radius: 2px; }
.pj__real:hover { color: var(--ink); border-color: var(--ink-3); }
.pj__real[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

/* FORMTRACE: the history and the drawing build together; at 1.8 mm the rim fillet fails and says why */
.sft-iso { position: absolute; left: 2%; top: 15%; width: 58%; height: 72%; overflow: visible; }
.sft-iso path { fill: none; stroke: #2b2d31; stroke-width: .95; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .55s var(--out), stroke .3s, opacity .4s; }
.sft-iso .sft-face { stroke: none; fill: #fff; opacity: 0; transition: opacity .5s; }
.sft-iso .sft-face--side { fill: #f1f0ea; }
.sft-iso .sft-face--in { fill: #e6e5de; }
.sft-iso .is-drawn.sft-face--lid { opacity: .62; } /* the lifted lid lets the ribs and bosses show through */
.sft-iso .sft-sketch { stroke: var(--accent); stroke-width: .9; }
.sft-iso .is-drawn { stroke-dashoffset: 0; opacity: 1; }
.sft-iso.is-reset path { transition: none !important; }
.sft-iso .is-ghost { opacity: .28; }
.sft-iso .sft-rim.is-bad { stroke: var(--bad); stroke-width: 2.2; }
.sft-iso .sft-rim.is-bad.is-flash { animation: ftFlash .6s steps(2) 3; }
@keyframes ftFlash { 50% { stroke: transparent; } }
.sft-wall { left: 3.5%; top: 5%; transition: border-color .3s, box-shadow .3s; }
.sft-wall.is-hot { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 91, 20, .14); }
.sft-hist { position: absolute; right: 3%; top: 6%; width: 35%; padding: .85em .9em .75em; border-radius: 10px; background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 24px -18px rgba(0, 0, 0, .35); }
.sft-ops li { display: flex; align-items: center; gap: .6em; padding: .26em 0; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .3s; }
.sft-ops li + li { border-top: 1px solid #f0f0ec; }
.sft-ops i { flex: none; width: .78em; height: .78em; border-radius: 50%; border: 1.5px solid #c9c9c2; transition: background-color .25s, border-color .25s, transform .25s; }
.sft-ops .is-due i { border-color: #d39a2c; }
.sft-ops .is-run i { border-color: var(--accent); background: var(--accent); animation: ftPulse .5s ease-in-out infinite alternate; }
@keyframes ftPulse { to { transform: scale(.6); } }
.sft-ops .is-ok i { border-color: var(--ok); background: var(--ok); }
.sft-ops .is-cache i { border-color: var(--ok); }
.sft-ops .is-fail { color: var(--bad); }
.sft-ops .is-fail i { border-color: var(--bad); background: var(--bad); }
.sft-ops .is-wait { color: var(--ink-3); }
.sft-ops .is-wait i { border-style: dashed; }
.sft-status [data-st="build"], .sft-status [data-st="redo"] { color: var(--warn); }
.sft-status [data-st="valid"] { color: #19733f; }
.sft-status [data-st="fail"] { color: var(--bad); }
.sft-card { position: absolute; left: 3.5%; bottom: 17%; width: 52%; padding: .85em .9em; border-radius: 10px; background: #fff; border: 1px solid #f1c7bd; box-shadow: 0 18px 34px -20px rgba(120, 30, 10, .45); opacity: 0; transform: translateY(14px) scale(.97); transition: opacity .35s, transform .5s var(--out); }
.pa--ft.is-card .sft-card { opacity: 1; transform: none; }
.sft-card__k { color: var(--bad); }
.sft-card__t { margin: .45em 0 .6em !important; font: 500 1.05em/1.35 var(--sans); color: var(--ink); }
.sft-card__fix { display: flex; flex-wrap: wrap; gap: .4em; }
.sft-card__fix > span { padding: .35em .7em; border-radius: 999px; background: var(--ink); color: #fff; }

/* TRACEFORGE: the incident replayed from its event log, then the same run with the fix */
.stf-lane { position: absolute; left: 4%; right: 4%; top: 8%; height: 34%; }
.stf-node { position: absolute; top: 0; bottom: 0; width: 27%; display: grid; place-content: center; gap: .3em; text-align: center; border-radius: 10px; border: 1px solid #34363c; background: #17181b; transition: border-color .25s, box-shadow .25s, background-color .25s; }
.stf-node b { font: 650 1.25em/1.1 var(--sans); color: #f4f4f2; }
.stf-node small { font-size: .92em; color: #a6a7ad; }
.stf-n1 { left: 0; } .stf-n2 { left: 36.5%; } .stf-n3 { right: 0; }
.stf-n2.is-lease { border-color: #d39a2c; box-shadow: 0 0 0 3px rgba(211, 154, 44, .18); }
.stf-n3.is-hit { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 91, 20, .2); }
.stf-n3.is-crash { border-color: var(--bad); background: #2a1412; box-shadow: 0 0 0 3px rgba(194, 54, 43, .3); }
.stf-n3.is-dedupe { border-color: #2fae69; box-shadow: 0 0 0 3px rgba(47, 174, 105, .22); }
.stf-a { display: inline-block; min-width: 1.4em; color: #f4f4f2; transition: color .25s; }
.stf-a.is-bad { color: #ff7a6b; }
.stf-wire { position: absolute; top: 50%; height: 1px; background: #3a3c42; }
.stf-w1 { left: 27%; width: 9.5%; } .stf-w2 { left: 63.5%; width: 9.5%; }
.stf-msg { position: absolute; top: 50%; left: 0; width: .75em; height: .75em; margin: -.375em 0 0 -.375em; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 .3em rgba(255, 91, 20, .2); opacity: 0; }
.stf-msg em { position: absolute; bottom: 160%; left: 50%; transform: translateX(-50%); font-style: normal; color: #ffb48f; white-space: nowrap; }
.stf-ev { position: absolute; left: 4%; right: 4%; top: 48%; min-height: 2.7em; color: #e9e9e6; font-size: 1.05em; }
.stf-ev .t { color: #8d8f95; margin-right: .6em; }
.stf-ev .bad { color: #ff7a6b; } .stf-ev .ok { color: #45c983; } .stf-ev .warn { color: #e3ad4b; }
.stf-ev > span { display: block; animation: stIn .3s var(--out); }
.stf-ev > span.old { opacity: .62; }
.stf-ev em { font-style: normal; }
.stf-time { position: absolute; left: 4%; right: 4%; bottom: 23%; height: 1.5em; border-radius: 6px; background: #17181b; border: 1px solid #26282d; }
.stf-ticks { position: absolute; inset: 0; }
.stf-ticks span { position: absolute; top: 18%; bottom: 18%; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--c, #e3ad4b); opacity: .35; transition: opacity .3s; }
.stf-ticks span.is-past { opacity: 1; }
.stf-ph { position: absolute; top: -.35em; bottom: -.35em; left: 0; width: 2px; margin-left: -1px; background: #f4f4f2; border-radius: 1px; }
.stf-ms { position: absolute; right: .6em; top: 50%; transform: translateY(-50%); font-size: .9em; color: #c9cacc; }
.stf-rules { position: absolute; left: 4%; right: 4%; bottom: 5%; display: flex; flex-wrap: wrap; gap: .3em 1.4em; }
.stf-rules li { display: flex; align-items: center; gap: .5em; color: #a6a7ad; transition: color .3s; }
.stf-rules i { width: .62em; height: .62em; border-radius: 50%; background: #4a4c52; transition: background-color .3s; }
.stf-rules .is-ok { color: #cfe9da; } .stf-rules .is-ok i { background: #45c983; }
.stf-rules .is-bad { color: #ffb3a9; } .stf-rules .is-bad i { background: #ff5a48; }

/* WEAVE: two valid offline copies, one broken merge, one recorded decision */
.swv-dev, .swv-merged { position: absolute; top: 7%; display: flex; flex-direction: column; padding: .85em .9em; border-radius: 10px; background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 24px -18px rgba(0, 0, 0, .35); transition: transform .8s var(--out), opacity .5s; }
.swv-dev { width: 45.5%; height: 66%; }
.swv-a { left: 3%; } .swv-b { right: 3%; }
.swv-h { display: flex; align-items: center; justify-content: space-between; gap: .6em; }
.swv-h b { font: 650 1.1em/1.1 var(--sans); color: var(--ink); }
.swv-h em { font-style: normal; padding: .15em .6em; border-radius: 999px; background: #fbe9df; color: #a2470f; }
.swv-h em.swv-sync { background: #e6f4ec; color: #19733f; }
.swv-flow { flex: 1; display: flex; flex-wrap: wrap; align-items: center; align-content: center; gap: .6em .3em; margin: .5em 0; }
.swv-flow > i { flex: none; width: 1em; height: 1.5px; background: #b9bab3; }
.swv-n { position: relative; padding: .42em .6em; border-radius: 7px; border: 1px solid #d9dad3; background: #f7f7f4; font: 500 1.1em/1.15 var(--sans); color: var(--ink); white-space: nowrap; transition: border-color .3s, box-shadow .3s, transform .4s var(--out), opacity .3s; }
.swv-n small { display: block; margin-top: .15em; font: 400 .78em/1.2 var(--mono); color: var(--ink-3); }
.swv-smooth .swv-o2, .swv-smooth.is-edit .swv-o1 { display: none; }
.swv-smooth.is-edit .swv-o2 { display: block; color: #a2470f; }
.swv-n.is-edit { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 91, 20, .14); }
.swv-b .swv-over, .swv-b .swv-gap { display: none; }
.swv-b.is-added .swv-over, .swv-b.is-added .swv-gap { display: block; }
.swv-b.is-added .swv-over { animation: wvPop .5s var(--out); }
@keyframes wvPop { from { opacity: 0; transform: scale(.6); } }
.swv-ok { color: #19733f; opacity: 0; transition: opacity .3s; }
.swv-ok::before { content: "✓ "; }
.swv-dev.is-ok .swv-ok { opacity: 1; }
.pa--wv.is-merging .swv-a { transform: translateX(52%) scale(.92); opacity: 0; }
.pa--wv.is-merging .swv-b { transform: translateX(-52%) scale(.92); opacity: 0; }
.swv-merged { left: 3%; right: 3%; bottom: 7%; opacity: 0; transform: scale(.94); pointer-events: none; }
.pa--wv.is-merged .swv-merged { opacity: 1; transform: none; }
.swv-tagA::after, .swv-tagB::after { position: absolute; top: -.75em; right: -.6em; width: 1.5em; height: 1.5em; display: grid; place-items: center; border-radius: 50%; font: 600 .8em/1 var(--mono); color: #fff; opacity: 0; transform: scale(.5); transition: opacity .3s, transform .4s var(--out); }
.swv-tagA::after { content: "A"; background: var(--accent); } .swv-tagB::after { content: "B"; background: #2f6fde; }
.pa--wv.is-bad .swv-tagA::after, .pa--wv.is-bad .swv-tagB::after { opacity: 1; transform: none; }
.pa--wv.is-bad .swv-tagA, .pa--wv.is-bad .swv-tagB { border-color: #f1b3a8; }
.swv-flow > i.swv-bad { width: 2em; height: 2px; background: repeating-linear-gradient(90deg, var(--bad) 0 4px, transparent 4px 7px); }
.swv-mean, .swv-bad2 { display: none !important; }
.pa--wv.is-decided .swv-mean { display: block !important; animation: wvPop .5s var(--out); border-color: var(--ok); box-shadow: 0 0 0 3px rgba(31, 138, 76, .14); }
.pa--wv.is-decided .swv-bad2 { display: block !important; }
.pa--wv.is-decided .swv-flow > i.swv-bad, .pa--wv.is-decided .swv-flow > i.swv-bad2 { width: 1em; height: 1.5px; background: var(--ok); }
.pa--wv.is-decided .swv-tagA, .pa--wv.is-decided .swv-tagB { border-color: #d9dad3; }
.pa--wv.is-decided .swv-tagA::after, .pa--wv.is-decided .swv-tagB::after { opacity: 0; }
.swv-msg { display: none; padding: .55em .75em; border-radius: 8px; font: 500 .98em/1.35 var(--sans); }
.swv-msg--bad { background: #fdf0ee; color: #a8281e; } .swv-msg--ok { background: #eaf6ee; color: #19733f; }
.pa--wv.is-bad .swv-msg--bad, .pa--wv.is-decided .swv-msg--ok { display: block; animation: stIn .35s var(--out); }
.pa--wv.is-decided .swv-msg--bad { display: none; }

/* FRAMEPORT: the real renders of the three published packages, swapped splat by splat */
.sfp-cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.sfp-hud { position: absolute; left: 3.5%; right: 3.5%; top: 5%; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5em; }
.sfp-hud > p { padding: .45em .8em; border-radius: 999px; background: rgba(10, 10, 12, .62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #e9e9e6; white-space: nowrap; }
.sfp-pkg b { font: 650 1.15em/1 var(--sans); color: #fff; margin-right: .5em; }
.sfp-pkg span + span::before { content: " · "; color: #8d8f95; }
.sfp-q b { font-weight: 500; color: var(--accent); }
.sfp-bars { position: absolute; left: 3.5%; right: 3.5%; bottom: 5%; display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; align-items: center; gap: .5em .8em; padding: .65em .85em; border-radius: 10px; background: rgba(10, 10, 12, .64); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.sfp-bar { display: contents; color: #c9cacc; }
.sfp-bar span, .sfp-bar em { white-space: nowrap; color: #c9cacc; }
.sfp-bar i { height: .5em; border-radius: 99px; background: rgba(255, 255, 255, .13); overflow: hidden; }
.sfp-bar i b { display: block; height: 100%; width: var(--w, 0%); border-radius: inherit; background: #f4f4f2; }
.sfp-bar--load i b { background: var(--accent); }
.sfp-bar em { font-style: normal; text-align: right; color: #f4f4f2; }
@container (max-width: 470px) {
  .has-anim .pa, .has-anim .pj__view img { aspect-ratio: 4 / 3; }
  .pa { font-size: max(8px, 2.45cqw); }
  .sft-iso { top: 16%; width: 60%; height: 64%; }
  .sft-hist { width: 39%; top: 5%; padding: .7em; }
  .sft-card { left: 3%; width: 60%; bottom: 17%; }
  .pa__status { right: 3%; }
  .swv-dev { height: 70%; }
}

/* ---------- opening: the initials are drawn, then built layer by layer, then the page opens ---------- */
.boot { display: none; }
html.is-booting .boot, html.boot-quick .boot { position: fixed; inset: 0; z-index: 200; display: grid; grid-template-rows: auto 1fr auto; padding: clamp(18px, 3vw, 34px); color: var(--ink); cursor: pointer;
  background: linear-gradient(rgba(14, 15, 17, .05) 1px, transparent 1px) 0 0 / 26px 26px, linear-gradient(90deg, rgba(14, 15, 17, .05) 1px, transparent 1px) 0 0 / 26px 26px, var(--bg); }
html.is-booting .boot { animation: bootOut .62s var(--in) 1.86s forwards; }
html.boot-quick .boot { animation: bootOutQuick .45s var(--in) forwards; }
@keyframes bootOutQuick { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); visibility: hidden; } }
@keyframes bootOut { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); visibility: hidden; } }
.boot p { margin: 0; }
.boot__top, .boot__bot { display: flex; justify-content: space-between; gap: 16px; font: 500 12px/1.3 var(--mono); color: var(--ink-3); }
.boot__bot b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.boot__mark { position: relative; align-self: center; justify-self: center; line-height: .8; }
.boot__draft, .boot__print { font-size: clamp(110px, 25vw, 380px); font-weight: 800; font-stretch: 125%; letter-spacing: -.04em; }
.boot__draft { color: transparent; -webkit-text-stroke: 1px var(--ink); clip-path: inset(0 100% 0 0); animation: bootDraw .62s var(--out) .08s forwards, bootFade .3s ease 1.5s forwards; }
.boot__print { position: absolute; inset: 0; color: transparent; background: repeating-linear-gradient(0deg, var(--ink) 0 3px, #34363c 3px 4px); -webkit-background-clip: text; background-clip: text; clip-path: inset(100% 0 0 0); animation: bootBuild 1.05s steps(24, end) .5s forwards; }
.boot__nozzle { position: absolute; left: -2%; width: 18%; height: 5px; border-radius: 3px; background: var(--accent); box-shadow: 0 0 18px 2px rgba(255, 91, 20, .55); bottom: 0; opacity: 0;
  animation: bootRise 1.05s steps(24, end) .5s forwards, bootSweep .16s ease-in-out .5s 7 alternate, bootGone .2s ease 1.55s forwards; }
.boot__dim { position: absolute; left: 0; right: 0; top: -34px; height: 11px; border: solid var(--ink-3); border-width: 0 1px; transform: scaleX(0); transform-origin: left; animation: bootDim .62s var(--out) .08s forwards, bootFade .3s ease 1.5s forwards; }
.boot__dim::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 1px; background: var(--ink-3); }
.boot__dim b { position: absolute; left: 50%; top: -18px; transform: translateX(-50%); padding: 0 8px; background: var(--bg); font: 500 11px/1 var(--mono); color: var(--ink-3); }
.boot__steps { display: inline-grid; }
.boot__steps > span { grid-area: 1 / 1; opacity: 0; }
.boot__steps .is-a { animation: bootStep 1s linear forwards 0s; }
.boot__steps .is-b { animation: bootStep .95s linear forwards .52s; }
.boot__steps .is-c { animation: bootStay .3s linear forwards 1.5s; }
@keyframes bootDraw { to { clip-path: inset(0 0 0 0); } }
@keyframes bootDim { to { transform: scaleX(1); } }
@keyframes bootBuild { to { clip-path: inset(0 0 0 0); } }
@keyframes bootRise { from { opacity: 1; bottom: 0; } to { opacity: 1; bottom: 100%; } }
@keyframes bootSweep { from { transform: translateX(0); } to { transform: translateX(470%); } }
@keyframes bootGone { to { opacity: 0; } }
@keyframes bootFade { to { opacity: 0; } }
@keyframes bootStep { 0%, 100% { opacity: 0; } 4%, 92% { opacity: 1; } }
@keyframes bootStay { to { opacity: 1; } }
/* the page arrives with the opening: transforms only, so nothing is hidden from a first paint */
html.is-booting .hero__text > *, html.is-booting .hero-film { animation: heroRise .95s var(--out) both; animation-delay: calc(1.98s + var(--i, 0) * 70ms); }
html.boot-quick .hero__text > *, html.boot-quick .hero-film { animation: heroRiseQuick .8s var(--out) both; animation-delay: calc(.18s + var(--i, 0) * 60ms); }
.hero__text > :nth-child(2) { --i: 1; } .hero__text > :nth-child(3) { --i: 2; } .hero__text > :nth-child(4) { --i: 3; } .hero__text > :nth-child(5) { --i: 4; } .hero-film { --i: 2; }
@keyframes heroRise { from { transform: translateY(34px); } }
@keyframes heroRiseQuick { from { transform: translateY(26px); } }

/* ---------- brand: the initials open into the name ---------- */
.nav__brand, .nav__mark { display: inline-flex; align-items: baseline; white-space: nowrap; }
.nb { display: inline-grid; grid-template-columns: 0fr; transition: grid-template-columns .55s var(--out); }
.nb > span { overflow: hidden; min-width: 0; opacity: 0; transition: opacity .3s; }
@media (hover: hover) and (min-width: 721px) {
  .nav__brand:hover .nb, .nav__brand:focus-visible .nb { grid-template-columns: 1fr; }
  .nav__brand:hover .nb > span, .nav__brand:focus-visible .nb > span { opacity: 1; transition-delay: .08s; }
}
.spec__time { display: block; margin-top: 2px; font: 400 12.5px/1.5 var(--mono); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.spec__time::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--ok); vertical-align: 1px; animation: liveDot 2s ease-in-out infinite; }
@keyframes liveDot { 50% { opacity: .3; } }
.foot__links a { text-decoration: none; }
.foot__links a:hover { color: var(--ink); text-decoration: underline; }

/* ---------- Zilerno: the bell rings, the details stay under wraps ---------- */
.zil__visual { isolation: isolate; }
.zil__light { position: absolute; inset: -20%; z-index: -1; opacity: .5; pointer-events: none;
  background: radial-gradient(40% 30% at 30% 20%, rgba(255, 255, 255, .22), transparent 70%), radial-gradient(35% 25% at 75% 70%, rgba(130, 255, 236, .2), transparent 70%); animation: zilLight 14s ease-in-out infinite alternate; }
@keyframes zilLight { to { transform: translate(6%, -4%) rotate(8deg); } }
.zil__bubbles i { position: absolute; bottom: -20px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .08); animation: zilBubble var(--d) linear var(--t) infinite; }
.zil__bubbles i:nth-child(1) { --x: 12%; --s: 10px; --d: 9s; --t: -1s; } .zil__bubbles i:nth-child(2) { --x: 24%; --s: 6px; --d: 7s; --t: -4s; }
.zil__bubbles i:nth-child(3) { --x: 38%; --s: 14px; --d: 11s; --t: -7s; } .zil__bubbles i:nth-child(4) { --x: 55%; --s: 8px; --d: 8s; --t: -2s; }
.zil__bubbles i:nth-child(5) { --x: 68%; --s: 5px; --d: 6.5s; --t: -5s; } .zil__bubbles i:nth-child(6) { --x: 79%; --s: 12px; --d: 10s; --t: -8s; }
.zil__bubbles i:nth-child(7) { --x: 88%; --s: 7px; --d: 7.5s; --t: -3s; } .zil__bubbles i:nth-child(8) { --x: 46%; --s: 9px; --d: 12s; --t: -9s; }
@keyframes zilBubble { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 1; } 50% { transform: translate(10px, -280px); } 90% { opacity: .8; } 100% { transform: translate(-6px, -580px); opacity: 0; } }
.zil__rings { position: absolute; right: 22%; bottom: 30%; width: 0; height: 0; pointer-events: none; }
.zil__rings i { position: absolute; left: -60px; top: -60px; width: 120px; height: 120px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .55); opacity: 0; animation: zilRing 4.2s var(--out) infinite; }
.zil__rings i:nth-child(2) { animation-delay: .22s; } .zil__rings i:nth-child(3) { animation-delay: .44s; }
@keyframes zilRing { 0% { transform: scale(.3); opacity: 0; } 4% { opacity: .9; } 40%, 100% { transform: scale(2.6); opacity: 0; } }
.phone { animation: zilFloat 7s ease-in-out infinite; }
@keyframes zilFloat { 50% { transform: translateY(-10px) rotate(-1deg); } }
.zil__mascot { transform-origin: 50% 90%; animation: zilRingBell 4.2s ease-in-out infinite; }
@keyframes zilRingBell { 0%, 14%, 100% { transform: rotate(0); } 2% { transform: rotate(-7deg); } 5% { transform: rotate(6deg); } 8% { transform: rotate(-4deg); } 11% { transform: rotate(2deg); } 50% { transform: translateY(-6px); } }
.zsheet { margin: 22px 0 6px; padding: 16px 18px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); }
.zsheet__k { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 10px; font: 500 12.5px/1.3 var(--mono); color: var(--ink-3); }
.zsheet__k em { font-style: normal; color: var(--accent-ink); }
.zsheet dl > div { display: grid; grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr); align-items: center; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); }
.zsheet dt { font-size: 14px; color: var(--ink-2); }
.zsheet dd i { position: relative; display: block; width: var(--w); height: 12px; border-radius: 3px; overflow: hidden; background: var(--ink); }
.zsheet dd i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%); transform: translateX(-100%); animation: zsheet 3.4s ease-in-out infinite; }
.zsheet dl > div:nth-child(2) i::after { animation-delay: .25s; } .zsheet dl > div:nth-child(3) i::after { animation-delay: .5s; } .zsheet dl > div:nth-child(4) i::after { animation-delay: .75s; }
@keyframes zsheet { 60%, 100% { transform: translateX(100%); } }
.workshop li { border: 0; background:
  linear-gradient(90deg, var(--line-2) 50%, transparent 0) 0 0 / 10px 1px repeat-x, linear-gradient(90deg, var(--line-2) 50%, transparent 0) 0 100% / 10px 1px repeat-x,
  linear-gradient(var(--line-2) 50%, transparent 0) 0 0 / 1px 10px repeat-y, linear-gradient(var(--line-2) 50%, transparent 0) 100% 0 / 1px 10px repeat-y; }
.workshop li.is-live { background:
  linear-gradient(90deg, var(--accent) 50%, transparent 0) 0 0 / 10px 1px repeat-x, linear-gradient(90deg, var(--accent) 50%, transparent 0) 0 100% / 10px 1px repeat-x,
  linear-gradient(var(--accent) 50%, transparent 0) 0 0 / 1px 10px repeat-y, linear-gradient(var(--accent) 50%, transparent 0) 100% 0 / 1px 10px repeat-y; animation: ants 1.4s linear infinite; }
@keyframes ants { to { background-position: 10px 0, -10px 100%, 0 -10px, 100% 10px; } }
.workshop li.is-live b::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-radius: 50%; background: var(--accent); vertical-align: 2px; animation: liveDot 1.6s ease-in-out infinite; }

/* ---------- about: the line arrives word by word, the path fills as you read ---------- */
.about__big .w { display: inline-block; transform: translateY(.5em); opacity: 0; transition: transform .7s var(--out), opacity .5s; transition-delay: calc(var(--i) * 32ms); }
.about__big.is-on .w { transform: none; opacity: 1; }
.about__big .hl { font-style: normal; background: linear-gradient(var(--accent), var(--accent)) 0 92% / 0 .09em no-repeat; transition: background-size 1s var(--out) .75s; }
.about__big.is-on .hl, html:not(.has-anim) .about__big .hl { background-size: 100% .09em; }
.journey ol::before { content: ""; position: absolute; left: 8px; top: 12px; width: 1px; height: calc((100% - 30px) * var(--jp, 0)); background: var(--accent); z-index: 1; }
.journey li.is-past::before { background: var(--accent); box-shadow: 0 0 0 4px rgba(255, 91, 20, .14); transition: background-color .3s, box-shadow .3s; }
.journey li.is-next::before { animation: nextPulse 2.4s ease-in-out infinite; }
@keyframes nextPulse { 50% { box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 6px rgba(255, 91, 20, .16); } }
.langs__say { display: flex; align-items: center; gap: 8px; min-height: 1.6em; margin-top: 6px; font: 400 13px/1.4 var(--mono); color: var(--accent-ink); }
.langs__say::before { content: ""; flex: none; width: 14px; height: 10px; background: currentColor; opacity: .85;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M1 1h12v6H6l-3 2.5V7H1z' fill='none' stroke='black' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M1 1h12v6H6l-3 2.5V7H1z' fill='none' stroke='black' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.langs__say:empty::before { opacity: .35; }
.langs__say::after { content: ""; width: 1.5px; height: 1.05em; background: currentColor; animation: blink 1s steps(1) infinite; }
.langs__say:not(.is-typing)::after { opacity: 0; animation: none; }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform 1s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- blueprint mode (↑↑↓↓←→←→BA) ---------- */
.bp { position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: 0; transition: opacity .4s;
  background-image: linear-gradient(rgba(40, 120, 255, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(40, 120, 255, .09) 1px, transparent 1px); background-size: 24px 24px; }
html.is-bp .bp { opacity: 1; }
html.is-bp main > section, html.is-bp .wrap, html.is-bp article, html.is-bp figure { outline: 1px dashed rgba(40, 120, 255, .55); outline-offset: -1px; }
.bp-tag { position: absolute; z-index: 41; padding: 3px 6px; border-radius: 4px; background: #1f6bff; color: #fff; font: 500 10.5px/1 var(--mono); pointer-events: none; }

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .boot { display: none !important; }
  .about__big .w { opacity: 1; transform: none; }
}