/* Layout: 12-col dark editorial. Condensed-light display, quiet sans body, mono labels.
   Tribe-like calm statements + ruled stats; Koto-like work masonry (sticky filters/industries aside) and rounded media tiles.
   Each case tints its details through --accent. One signal colour, used sparingly. */
:root {
  --bg: #060606;
  --surface: #151514;
  --surface-2: #1d1d1b;
  --fg: #f2f0ea;
  --mute: #9b9891;
  --line: rgba(242, 240, 234, .12);
  --paper: #f3f1ec;
  --ink: #0b0b0a;
  --ink-mute: #5f5d58;
  --signal: #ff4f1f;
  --accent: #ff4f1f;
  --accent-soft: color-mix(in srgb, var(--accent) 55%, var(--fg));
  --display: "Roboto Flex", "Helvetica Neue", Arial, sans-serif;
  --body: "Roboto Flex", "Helvetica Neue", Arial, sans-serif;
  --dv: "wdth" 80, "opsz" 36;
  --bv: "opsz" 14, "YTLC" 470;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --m: clamp(20px, 3.4vw, 56px);
  --gut-l: max(var(--m), env(safe-area-inset-left, 0px));
  --gut-r: max(var(--m), env(safe-area-inset-right, 0px));
  --r: 6px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  color-scheme: dark;
}
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; animation-timing-function: var(--ease); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 350 17px/1.6 var(--body); font-variation-settings: var(--bv); -webkit-font-smoothing: antialiased; }
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--signal); color: var(--ink); }

.wrap { padding-left: var(--gut-l); padding-right: var(--gut-r); max-width: 1680px; margin: 0 auto; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.label { font: 500 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.display { font-family: var(--display); font-weight: 320; font-variation-settings: var(--dv); letter-spacing: 0; line-height: .9; text-wrap: balance; }
.statement { font: 350 clamp(26px, 2.9vw, 42px)/1.18 var(--body); letter-spacing: 0; text-wrap: balance; }
.mute { color: var(--mute); }
.rule { border-top: 1px solid var(--line); }
section { position: relative; }
[hidden] { display: none !important; }

/* ---------- nav pill ---------- */
.nav { position: fixed; top: calc(14px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); z-index: 40;
  display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 999px;
  background: rgba(21, 21, 20, .62); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(242, 240, 234, .1); white-space: nowrap; max-width: calc(100vw - 24px); }
.nav > a, .nav > span, .nav summary { font: 500 15px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 10px 14px; border-radius: 999px; }
.nav .mark { padding: 0; width: 50px; height: 50px; display: inline-grid; place-items: center; }
.nav .mark img { width: 50px; height: 50px; border-radius: 50%; display: block; transition: transform .6s var(--ease); }
.nav .mark:hover { background: none; }
.nav .mark:hover img { transform: rotate(-12deg) scale(1.06); }
.nav > a:hover, .nav summary:hover, .nav details[open] > summary { background: rgba(242, 240, 234, .1); }
.nav > a.nl[aria-current="page"] { background: rgba(242, 240, 234, .1); }
.nav > a:focus-visible, .nav summary:focus-visible { border-radius: 999px; outline-offset: 0; }
.nav .here { color: var(--mute); min-width: 9ch; text-align: center; transition: opacity .3s; }
.nav .clock { color: var(--mute); }
.nav .dot { width: 6px; height: 6px; padding: 0; border-radius: 50%; background: var(--signal); display: inline-block; margin-left: 2px; box-shadow: 0 0 10px var(--signal); }
/* Language switch: EN / DE as a small segmented control in the pill, in the nav's mono. Each side links to this page in that
   language (build.py lang_switch()); the current one is lit like the current nav item. site.js remembers a click. */
.nav .lang { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid rgba(242, 240, 234, .12); }
.nav .lang a { font: 500 15px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 7px 8px 7px 9.5px; border-radius: 999px; color: var(--mute); transition: background-color 167ms linear, color 167ms linear; }
.nav .lang a:hover { color: var(--fg); background: rgba(242, 240, 234, .06); }
.nav .lang a[aria-current] { color: var(--fg); background: rgba(242, 240, 234, .1); }
.nav .lang a:focus-visible { border-radius: 999px; outline-offset: 0; }
/* Industries (phones: Menu): a <details> dropdown in the pill, Fluid's pattern in Koto's dark glass. Counts in mono. */
.menu { position: relative; }
.nav summary { display: inline-flex; align-items: center; gap: 7px; list-style: none; cursor: pointer; user-select: none; -webkit-user-select: none; }
.nav summary::-webkit-details-marker { display: none; }
.nav summary .m { display: none; }
.nav .chev { transition: rotate 167ms linear; }
.nav details[open] .chev { rotate: 180deg; }
.menu-panel { position: absolute; top: calc(100% + 14px); left: 50%; translate: -50% 0; width: 320px; padding: 8px; border-radius: 18px;
  background: rgb(21 21 20 / .97); border: 1px solid rgba(242, 240, 234, .1); white-space: normal; text-align: left; animation: menu-in 167ms linear; }
@keyframes menu-in { from { opacity: 0; } }
.menu-main { display: none; }
.menu-h { margin: 8px 12px 6px; font: 500 10px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.menu-list { list-style: none; margin: 0; padding: 0; }
.menu-panel a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 9px 12px; border-radius: 10px; font-size: 15px; line-height: 1.3; transition: background 167ms linear; }
.menu-panel a:hover { background: rgba(242, 240, 234, .08); }
.menu-panel a:focus-visible { outline-offset: -2px; border-radius: 10px; }
.menu-panel a[aria-current="page"] { background: rgba(242, 240, 234, .08); }
.menu-panel .n { font: 500 10px/1 var(--mono); letter-spacing: .1em; color: var(--mute); font-variant-numeric: tabular-nums; white-space: nowrap; }
.menu-all { position: relative; margin-top: 9px; color: var(--mute); }
.menu-all::before { content: ""; position: absolute; left: 12px; right: 12px; top: -5px; border-top: 1px solid var(--line); }
.menu-all:hover { color: var(--fg); }
.scrim { position: fixed; inset: 0; z-index: 39; background: rgb(6 6 6 / .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 167ms linear, visibility 0s linear 167ms; }
.nav:has(details[open]) + .scrim { opacity: 1; visibility: visible; transition: opacity 167ms linear; }
.js-nav .nav:has(details[open]) + .scrim { pointer-events: auto; }

/* ---------- hero ---------- */
.hero { padding-top: clamp(130px, 20vh, 220px); padding-bottom: clamp(48px, 8vw, 110px); }
.hero h1 { font-size: clamp(64px, 11.4vw, 200px); margin: 22px 0 0; }
.hero h1 .w { display: inline-block; }
.hero .intro { grid-column: 7 / span 5; margin-top: clamp(32px, 5vw, 64px); font-size: clamp(18px, 1.45vw, 22px); line-height: 1.5; color: var(--mute); }
.hero .intro strong { color: var(--fg); font-weight: 400; }
.hero .ctas { grid-column: 1 / span 6; align-self: end; display: flex; gap: 10px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 20px; border-radius: 999px; border: 1px solid var(--line); font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; transition: background .3s, color .3s, border-color .3s; cursor: pointer; background: none; }
.btn:hover { background: var(--fg); color: var(--ink); border-color: var(--fg); }
.btn.solid { background: var(--fg); color: var(--ink); }
.btn.solid:hover { background: var(--signal); border-color: var(--signal); }

/* reel card */
.reel { padding-bottom: clamp(60px, 10vw, 140px); }
.reel .card { position: relative; border-radius: var(--r); overflow: hidden; background: #000; aspect-ratio: 16 / 9; transform-origin: 50% 0; will-change: transform; }
.reel video { width: 100%; height: 100%; object-fit: cover; }
.reel .cap { position: absolute; left: 18px; bottom: 16px; right: 18px; display: flex; justify-content: space-between; color: rgba(255, 255, 255, .8); pointer-events: none; }
/* showreel sound (worker) */
/* The reel autoplays muted (browser policy); this pill turns the music on and off. A <button aria-pressed> at the right of
   the caption row (build.py reel_sound(), only when the film has an audio track), in the nav's dark glass, 44 px tall and
   always visible, so touch needs no hover. Speaker with waves when on, with a small cross when off. Shipped `hidden`;
   site.js reveals it. ::before widens the hit area by 5 px all round (54 px), so it stays over 44 px while the card's
   scroll "grow" scales it down to .9. */
.reel .cap { align-items: center; }
.reel-sound { position: relative; pointer-events: auto; display: inline-flex; align-items: center; gap: 9px; min-width: 44px; min-height: 44px; margin: 0; padding: 0 17px 0 13px;
  border-radius: 999px; border: 1px solid rgba(242, 240, 234, .14); background: rgba(21, 21, 20, .62);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  color: var(--fg); font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background-color 167ms linear, border-color 167ms linear; }
.reel-sound::before { content: ""; position: absolute; inset: -5px; border-radius: 999px; }
.reel-sound:hover { background: rgba(40, 40, 38, .74); border-color: rgba(242, 240, 234, .28); }
.reel-sound:focus-visible { border-radius: 999px; outline-offset: 2px; }
.reel-sound .ic { flex: none; overflow: visible; }
.reel-sound .ic path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.reel-sound .ic .spk { fill: currentColor; stroke-width: 1; }
.reel-sound[aria-pressed="false"] .on, .reel-sound[aria-pressed="true"] .off { display: none; }
.reel-sound[aria-pressed="false"] .t { color: rgba(242, 240, 234, .82); }
@media (max-width: 600px) { .reel .cap { left: 14px; right: 10px; bottom: 10px; } .reel-sound { padding: 0 15px 0 12px; } }
/* end */

/* marquee */
.marquee { overflow: hidden; border-block: 1px solid var(--line); padding-block: 22px; }
.marquee .track { display: flex; gap: 64px; width: max-content; animation: marq 40s linear infinite; }
.marquee span { font: 320 clamp(22px, 2.4vw, 34px)/1 var(--display); font-variation-settings: var(--dv); color: var(--mute); white-space: nowrap; display: inline-flex; align-items: center; gap: 64px; }
.marquee span::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
@keyframes marq { to { transform: translateX(-50%); } }

/* ---------- selected work: sticky aside (dek + industries) beside the tile masonry; ends on "View all work" ---------- */
.work { padding-block: clamp(80px, 12vw, 180px); }
.work-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: clamp(32px, 5vw, 64px); }
.work-head h2 { font-size: clamp(48px, 7vw, 120px); margin: 0; }
.work .grid { align-items: start; }
.work-aside { grid-column: 1 / span 4; position: sticky; top: 110px; padding-right: clamp(0px, 3vw, 48px); }
.work-aside .dek { margin: 0 0 clamp(28px, 3.4vw, 48px); max-width: 24ch; font-size: clamp(20px, 1.7vw, 26px); line-height: 1.3; color: var(--mute); text-wrap: balance; }
.work-aside > .label { margin-bottom: 10px; }
.work-cards { grid-column: 5 / span 8; }
/* industry sub-nav and filter options: ruled rows, mono counts, Koto's 3px dot on the current one */
.ind-list { list-style: none; margin: 0; padding: 0; }
.ind-list a, .opt { position: relative; display: grid; grid-template-columns: 11px minmax(0, 1fr) auto; align-items: baseline; padding-block: 9px; border-top: 1px solid var(--line); color: var(--mute); cursor: pointer; transition: color 167ms linear; }
.ind-list li:last-child a, .opt:last-child { border-bottom: 1px solid var(--line); }
.ind-list a::before, .opt::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: currentColor; align-self: center; opacity: 0; transition: opacity 167ms linear; }
.ind-list .t, .opt .t { font-size: 16px; line-height: 1.35; }
.ind-list .n, .opt .n { padding-left: 12px; font: 500 10px/1 var(--mono); letter-spacing: .1em; color: var(--mute); font-variant-numeric: tabular-nums; }
.ind-list a:hover, .ind-list a[aria-current="page"], .opt:hover, .opt:has(input:checked) { color: var(--fg); }
.ind-list a[aria-current="page"]::before, .opt:has(input:checked)::before { opacity: 1; }
.opt input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.opt:has(input:focus-visible) { outline: 2px solid var(--signal); outline-offset: 2px; border-radius: 2px; }
.opt:has(input:disabled) { opacity: .35; cursor: default; }
.opt:has(input:disabled):hover { color: var(--mute); }
/* tiles: two independent columns (Koto /work). Device still at rest; on hover the mini reel plays and the other tiles dim
   to 30% (Koto timing: 167ms linear). The caption sits below the media, always visible: the stills carry no brand mark. */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8px; align-items: start; }
.tiles .col { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.tile { display: block; }
.has-chip .tile { cursor: none; }
.tile .frame { position: relative; aspect-ratio: var(--ar); }
.tile .media { position: relative; height: 100%; border-radius: var(--r); overflow: hidden; background: var(--surface); }
.tile .media > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile video { opacity: 0; transition: opacity 300ms cubic-bezier(.4, 0, .2, 1); }
.tile.playing video { opacity: 1; }
.tile .media::after { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / .7); opacity: 0; pointer-events: none; transition: opacity 167ms linear; }
.tile .cap { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t t" "s tag"; gap: 3px 12px; padding: 12px 2px 0; transition: opacity 167ms linear; }
.tile .cap .t { grid-area: t; font-size: 16px; line-height: 1.3; }
.tile .cap .s { grid-area: s; min-width: 0; font-size: 14px; line-height: 1.4; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .cap .tag { grid-area: tag; align-self: center; font: 500 10px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); white-space: nowrap; }
.tiles:has(.tile:hover) .tile:not(:hover) .media::after, .tiles:has(.tile:focus-visible) .tile:not(:focus-visible) .media::after { opacity: 1; }
.tiles:has(.tile:hover) .tile:not(:hover) .cap, .tiles:has(.tile:focus-visible) .tile:not(:focus-visible) .cap { opacity: .3; }
.tile:focus-visible { outline: none; }
.tile:focus-visible .media { outline: 2px solid var(--signal); outline-offset: 3px; }
/* the way into /work */
.all-work { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: clamp(56px, 7vw, 104px); padding-block: clamp(22px, 2.6vw, 38px); border-block: 1px solid var(--line); transition: color 167ms linear; }
.all-work .display { font-size: clamp(40px, 5.6vw, 96px); }
.all-work .go { display: inline-flex; align-items: center; gap: 18px; transition: gap 167ms linear; }
.all-work .arr { font: 320 clamp(32px, 3.6vw, 60px)/1 var(--display); }
.all-work:hover .go { gap: 34px; }
.all-work:hover .label { color: var(--fg); }

/* cursor chip */
.chip { position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none; padding: 12px 16px; border-radius: 999px; background: var(--fg); color: var(--ink); font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; transform: translate(-50%, -50%) scale(0); transition: transform .35s var(--ease); white-space: nowrap; }
.chip.show { transform: translate(-50%, -50%) scale(1); }

/* ---------- proof (paper) ---------- */
.paper { background: var(--paper); color: var(--ink); --line: rgba(11, 11, 10, .14); --mute: var(--ink-mute); }
.proof { padding-block: clamp(80px, 12vw, 170px); }
.proof h2 { grid-column: 1 / span 6; font-size: clamp(40px, 5.4vw, 88px); margin: 0 0 clamp(40px, 6vw, 90px); }
.stats { list-style: none; margin: 0; padding: 0; }
.stats li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; align-items: baseline; padding-block: 22px; border-top: 1px solid var(--line); }
.stats li:last-child { border-bottom: 1px solid var(--line); }
.stats b { font: 320 clamp(56px, 7.6vw, 128px)/.9 var(--display); font-variation-settings: var(--dv); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.stats span { font-size: clamp(17px, 1.4vw, 21px); line-height: 1.4; max-width: 34ch; }
.stats a { border-bottom: 1px solid currentColor; }

/* principles */
.lead { padding-block: clamp(80px, 11vw, 160px); }
.lead h2 { font-size: clamp(40px, 5.4vw, 88px); margin: 0 0 clamp(36px, 5vw, 70px); }
.principles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.principles div { border-top: 1px solid var(--line); padding-top: 18px; }
.principles h3 { margin: 10px 0 10px; font: 350 22px/1.2 var(--body); letter-spacing: 0; }
.principles p { margin: 0; color: var(--mute); font-size: 16px; }

/* ---------- archive index ---------- */
.archive { padding-block: clamp(80px, 11vw, 160px); }
.archive h2 { font-size: clamp(40px, 5.4vw, 88px); margin: 0 0 clamp(30px, 4vw, 56px); }
.rows { list-style: none; margin: 0; padding: 0; }
.rows a { display: grid; grid-template-columns: 90px minmax(0, 4fr) minmax(0, 4fr) minmax(0, 3fr) 24px; gap: 24px; align-items: center; padding-block: 20px; border-top: 1px solid var(--line); transition: padding .5s var(--ease), color .3s; }
.rows li:last-child a { border-bottom: 1px solid var(--line); }
.rows .t { font: 350 clamp(22px, 2.2vw, 34px)/1.1 var(--body); letter-spacing: 0; }
.rows .arrow { opacity: 0; transform: translateX(-8px); transition: .4s var(--ease); }
.rows a:hover { padding-left: 14px; }
.rows a:hover .arrow { opacity: 1; transform: none; }
.rows:hover a:not(:hover) { color: var(--mute); }
.preview { position: fixed; left: 0; top: 0; z-index: 30; width: 320px; aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.9); transition: opacity .3s, transform .4s var(--ease); }
.preview.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.preview img { width: 100%; height: 100%; object-fit: cover; }
.archive-head { display: flex; justify-content: space-between; align-items: end; gap: 12px 24px; flex-wrap: wrap; margin-bottom: clamp(30px, 4vw, 56px); }
.archive-head h2 { margin: 0; }
.archive-head a:hover { color: var(--fg); }

/* ---------- /work (Koto /work: sticky filters + masonry, plus a list view) and /industries/<slug>/ ---------- */
.wk-hero h1, .ind-hero h1 { font-size: clamp(56px, 8.4vw, 150px); }
.wk, .ind { padding-bottom: clamp(80px, 11vw, 160px); }
.wk-grid, .ind-grid { align-items: start; }
.wk-aside, .ind-aside { grid-column: 1 / span 3; position: sticky; top: 100px; max-height: calc(100vh - 116px); overflow: auto; overscroll-behavior: contain; scrollbar-width: none; padding-bottom: 24px; }
.wk-main, .ind-main { grid-column: 4 / span 9; min-width: 0; }
.facet { border: 0; margin: 0 0 30px; padding: 0; min-width: 0; }
.facet legend { padding: 0; margin-bottom: 10px; }
.wk-sheet-head, .wk-filter { display: none; }
.wk-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 42px; margin-bottom: 16px; }
.wk-status { margin: 0; display: flex; align-items: center; gap: 16px; color: var(--fg); }
.wk-status:focus { outline: none; }
.wk-clear, .wk-empty button { background: none; border: 0; padding: 4px 0; cursor: pointer; color: var(--mute); font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; transition: color 167ms linear; }
.wk-clear:hover, .wk-empty button:hover { color: var(--fg); }
.wk-tools { display: flex; align-items: center; gap: 6px; }
.seg { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid var(--line); }
.seg button, .wk-filter { background: none; border: 0; cursor: pointer; padding: 9px 14px; border-radius: 999px; font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); transition: background 167ms linear, color 167ms linear; }
.seg button:hover { color: var(--fg); }
.seg button[aria-pressed="true"] { background: var(--fg); color: var(--ink); }
.wk-filter .n:empty { display: none; }
.wk-filter .n::before { content: "· "; }
.wk-empty { margin: 24px 0; padding-block: 28px; border-block: 1px solid var(--line); color: var(--mute); font-size: 18px; }
.ind-aside > .label { margin-bottom: 10px; }
.ind-aside .btn { margin-top: 28px; }
.ind-aside .more { display: block; margin-top: 18px; transition: color 167ms linear; }
.ind-aside .more:hover { color: var(--fg); }
/* an industry with one project: the tile beside its facts */
.tiles.solo { column-gap: 24px; align-items: end; }
.solo-note { display: grid; gap: 28px; padding-bottom: 50px; }
.solo-note .statement { margin: 0; font-size: clamp(22px, 2vw, 32px); }
.solo-note .meta { grid-column: auto; }
.solo-note .btn { justify-self: start; }
.meta dd a { border-bottom: 1px solid var(--line); transition: border-color 167ms linear; }
.meta dd a:hover { border-color: currentColor; }

/* ---------- contact footer ---------- */
.contact { padding-block: clamp(90px, 14vw, 200px) 28px; border-top: 1px solid var(--line); }
.contact h2 { font-size: clamp(60px, 11vw, 190px); margin: 18px 0 clamp(40px, 6vw, 80px); }
.contact .grid > * { min-width: 0; }
.contact .lines { grid-column: 1 / span 7; display: grid; gap: 0; }
.contact .lines a, .contact .lines div { display: flex; justify-content: space-between; gap: 16px; padding-block: 18px; border-top: 1px solid var(--line); font-size: clamp(18px, 1.6vw, 24px); }
.contact .lines > :last-child { border-bottom: 1px solid var(--line); }
.contact .lines a:hover { color: var(--signal); }
.contact .side { grid-column: 9 / span 4; align-self: end; color: var(--mute); }
.copy { background: none; border: 0; padding: 0; cursor: pointer; color: var(--mute); font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: clamp(60px, 9vw, 120px); }

/* ---------- case page ---------- */
.case-hero { padding-top: clamp(130px, 18vh, 200px); padding-bottom: clamp(36px, 5vw, 64px); }
.case-hero h1 { font-size: clamp(60px, 10.4vw, 184px); margin: 18px 0 clamp(26px, 4vw, 48px); }
.case-hero > .label { text-wrap: balance; }   /* QA: no single-word second line on phones */
.case-hero .sum { grid-column: 1 / span 7; margin: 0; }
.meta { grid-column: 9 / span 4; align-self: end; display: grid; gap: 0; margin: 0; }
.meta div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding-block: 11px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.4; }
.meta div:last-child { border-bottom: 1px solid var(--line); }
.meta dt { margin: 0; } .meta dd { margin: 0; }
.cover { padding-bottom: clamp(60px, 9vw, 130px); }
.cover .card { border-radius: var(--r); overflow: hidden; background: var(--surface); transform-origin: 50% 0; will-change: transform; }
.cover img, .cover video { width: 100%; max-height: 88vh; object-fit: cover; }

.case-body { align-items: start; }
.rail { grid-column: 1 / span 2; position: sticky; top: 110px; padding-bottom: 40px; }
.rail ol { list-style: none; margin: 14px 0 0; padding: 0; counter-reset: c; }
.rail li a { display: flex; gap: 10px; padding-block: 7px; color: var(--mute); font-size: 15px; transition: color .3s; }
.rail li a::before { content: ""; width: 14px; height: 1px; background: currentColor; align-self: center; transition: width .4s var(--ease); }
.rail li.on a { color: var(--fg); }
.rail li.on a::before { width: 28px; background: var(--accent-soft); }
.content { grid-column: 3 / span 10; min-width: 0; }
.chap { padding-bottom: clamp(70px, 10vw, 150px); }
.story p { margin: 0 0 1.1em; max-width: 60ch; font-size: clamp(18px, 1.35vw, 21px); line-height: 1.6; color: var(--mute); }
.story p.lead-in { color: var(--fg); max-width: 30ch; margin-bottom: 1.2em; font-size: clamp(26px, 2.9vw, 42px); line-height: 1.18; letter-spacing: 0; }
.story p.ask { font-family: var(--display); font-weight: 320; font-variation-settings: var(--dv); font-size: clamp(34px, 4.4vw, 72px); line-height: 1; letter-spacing: 0; color: var(--accent-soft); max-width: 18ch; margin: 1.2em 0; text-wrap: balance; }
.story p.resolve { color: var(--fg); }
.role { margin-top: clamp(40px, 5vw, 70px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.role p { margin: 0; max-width: 56ch; }
.h-chap { display: flex; gap: 16px; align-items: baseline; margin-bottom: 26px; }
.h-chap h2 { font: 350 clamp(28px, 3vw, 46px)/1.08 var(--body); letter-spacing: 0; margin: 0; text-wrap: balance; }
.h-chap .label { color: var(--accent-soft); }
.chap > p { max-width: 62ch; color: var(--mute); margin: 0 0 32px; font-size: 18px; }
.hard { list-style: none; margin: 0; padding: 0; }
.hard li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 24px; padding-block: 20px; border-top: 1px solid var(--line); }
.hard li:last-child { border-bottom: 1px solid var(--line); }
.hard b { font-weight: 400; font-size: 20px; letter-spacing: 0; }
.hard p { margin: 0; color: var(--mute); }
.qs { list-style: none; margin: 0; padding: 0; counter-reset: q; }
.qs li { padding-block: 18px; border-top: 1px solid var(--line); font-size: clamp(20px, 1.9vw, 28px); line-height: 1.3; letter-spacing: 0; display: grid; grid-template-columns: 50px minmax(0, 1fr); }
.qs li::before { counter-increment: q; content: counter(q, decimal-leading-zero); font: 500 11px/2.6 var(--mono); color: var(--mute); }

.media { display: grid; gap: 8px; }
.media figure { margin: 0; border-radius: var(--r); overflow: hidden; background: var(--surface); cursor: zoom-in; }
.media figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.media figure:hover img { transform: scale(1.02); }
.media.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.media.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.media.row { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.media.grid-3 figure, .media.row figure { aspect-ratio: 1 / 1.1; }
.media.grid-3 figure img, .media.row figure img { object-fit: contain; background: #fff; }
.media.feature { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.media.feature figure:first-child { grid-column: span 2; }
.media.wide figure img { object-fit: contain; }
/* bento: one 4:5 tile beside two stacked 5:3 tiles (column ratio keeps both sides the same height) */
.media.split { grid-template-columns: minmax(0, .96fr) minmax(0, 1fr); grid-template-rows: auto auto; }
.media.split figure:first-child { grid-row: span 2; aspect-ratio: 4 / 5; }
.media.split figure:not(:first-child) { aspect-ratio: 5 / 3; }
.media.split figure img, .media.split figure video, .media.split-r figure img, .media.split-r figure video { width: 100%; height: 100%; object-fit: cover; }
.media.split-r { grid-template-columns: minmax(0, 1fr) minmax(0, .96fr); grid-template-rows: auto auto; }
.media.split-r figure:first-child { grid-column: 2; grid-row: 1 / span 2; aspect-ratio: 4 / 5; }
.media.split-r figure:not(:first-child) { grid-column: 1; aspect-ratio: 5 / 3; }
.media.grid-2, .media.feature { align-items: start; }
.media.grid-2 figure img, .media.feature figure img, .media.wide figure img { height: auto; object-fit: contain; }
.phones { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; align-items: start; padding: clamp(18px, 3vw, 44px); border-radius: var(--r); margin-top: 8px;
  background: radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--accent) 30%, var(--surface)), var(--surface) 70%); }
.phones figure { margin: 0; border-radius: 14px; overflow: hidden; aspect-ratio: 9 / 17; box-shadow: 0 20px 40px rgba(0, 0, 0, .4); cursor: zoom-in; }
.phones img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.vid { border-radius: var(--r); overflow: hidden; background: #000; }
.vid video { width: 100%; }
.media figure.v { cursor: default; background: #000; }
.media figure.v video { width: 100%; height: auto; }
.chap > .cap { margin: 14px 0 0; color: var(--mute); max-width: 70ch; font-size: 15px; }

.outcomes .stats li { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); }
.outcomes .stats b { font-size: clamp(54px, 6.4vw, 108px); }
.outlist { list-style: none; padding: 0; margin: 28px 0 0; }
.outlist li { padding: 12px 0 12px 26px; border-top: 1px solid var(--line); position: relative; }
.outlist li::before { content: "↗"; position: absolute; left: 0; color: var(--accent-soft); }
.reflect { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; list-style: none; padding: 0; margin: 0; }
.reflect li { border-top: 1px solid var(--fg); padding-top: 16px; font-size: 18px; line-height: 1.45; }
.credits { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 24px; margin-top: 48px; }
.credits div { padding-block: 12px; border-top: 1px solid var(--line); }

.next { display: block; padding-block: clamp(40px, 6vw, 80px) clamp(70px, 10vw, 140px); border-top: 1px solid var(--line); }
.next .row { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 26px; }
.next .t { font-size: clamp(56px, 9vw, 160px); }
.next .card { border-radius: var(--r); overflow: hidden; aspect-ratio: 16 / 9; background: var(--surface); }   /* QA: covers are 16:9; 21:9 cut devices */
.next img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.4s var(--ease); }
.next:hover img { transform: scale(1); }

/* about */
.about-body p { font-size: clamp(19px, 1.6vw, 24px); line-height: 1.5; max-width: 40ch; margin: 0 0 1em; color: var(--mute); }
.about-body p:first-child { color: var(--fg); }

/* lightbox */
.lb { position: fixed; inset: 0; z-index: 60; background: rgba(8, 8, 7, .94); display: grid; place-items: center; padding: 24px; cursor: zoom-out; }
.lb img { max-height: 92vh; width: auto; max-width: 100%; border-radius: var(--r); }

/* reveal (JS sets the start state only when motion is allowed) */
.js [data-reveal] { will-change: transform, opacity, filter; }

@media (max-width: 980px) {
  .hero .intro, .hero .ctas, .case-hero .sum, .meta, .proof h2 { grid-column: 1 / -1; }
  .hero .ctas { margin-top: 28px; }
  .meta { margin-top: 32px; }
  .work-aside { grid-column: 1 / -1; position: static; padding-right: 0; margin-bottom: 28px; }
  .work-aside > .label, .work-aside .ind-list { display: none; }
  .work-cards { grid-column: 1 / -1; }
  /* one column, every tile 4:3, captions below, in reading order (Koto mobile) */
  .tiles { display: flex; flex-direction: column; align-items: stretch; gap: 32px; }
  .tiles .col { display: contents; }
  .tile { order: var(--i); }
  .has-chip .tile { cursor: pointer; }
  .tile .frame { aspect-ratio: 4 / 3; }
  .tile.tall .frame { aspect-ratio: var(--ar); }   /* QA: 4:5 phone tiles stay whole */
  .wk-main, .ind-main, .wk-aside, .ind-aside { grid-column: 1 / -1; }
  .ind-aside { order: 2; position: static; max-height: none; overflow: visible; margin-top: 64px; }
  .ind-main { order: 1; }
  .tiles.solo { gap: 28px; }
  .solo-note { padding-bottom: 0; }
  /* /work on phones: the filters become a full-screen sheet; Grid/List and Filter sit in a glass dock (Koto mobile) */
  html:not(.wk-js) .wk-aside { position: static; max-height: none; overflow: visible; margin-bottom: 32px; }
  .wk-js .wk-aside { position: fixed; inset: 0; z-index: 45; max-height: none; margin: 0; padding: calc(28px + env(safe-area-inset-top, 0px)) var(--gut-r) 128px var(--gut-l);
    background: var(--bg); opacity: 0; visibility: hidden; transition: opacity 167ms linear, visibility 0s linear 167ms; }
  .wk-sheet .wk-aside { opacity: 1; visibility: visible; transition: opacity 167ms linear; }
  .wk-js .wk-sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1;
    padding: 28px var(--gut-r) calc(16px + env(safe-area-inset-bottom, 0px)) var(--gut-l); background: linear-gradient(rgb(6 6 6 / 0), var(--bg) 45%); }
  .wk-tools { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); translate: -50% 0; z-index: 41; width: max-content; white-space: nowrap; padding: 4px; border-radius: 999px;
    background: rgba(21, 21, 20, .62); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border: 1px solid rgba(242, 240, 234, .1); }
  .wk-tools .seg { border: 0; padding: 0; }
  .wk-filter { display: inline-flex; gap: 6px; color: var(--fg); }
  .wk-js .contact { padding-bottom: 104px; }
  .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rows a { grid-template-columns: 56px minmax(0, 1fr) 20px; }
  .rows .d, .rows .c { display: none; }
  .rail { display: none; }
  .content { grid-column: 1 / -1; }
  .contact .lines, .contact .side { grid-column: 1 / -1; }
  .contact .side { margin-top: 32px; }
  .reflect { grid-template-columns: minmax(0, 1fr); }
  .nav .here, .nav .clock { display: none; }
}
@media (max-width: 600px) {
  .media.split, .media.split-r { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .media.split figure, .media.split-r figure { grid-column: auto !important; grid-row: auto !important; }
  .grid { column-gap: 12px; }
  .stats li, .hard li, .role, .outcomes .stats li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .principles { grid-template-columns: minmax(0, 1fr); }
  .media.grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .media.grid-2, .media.feature { grid-template-columns: minmax(0, 1fr); }
  .media.feature figure:first-child { grid-column: auto; }
  .nav > a, .nav > span, .nav summary { padding: 9px 10px; }
  .next .row { flex-direction: column; align-items: start; gap: 10px; }   /* QA: the summary sits under the title on phones */
  /* the pill keeps Work + Menu; the panel spans the screen and also holds Work, About and Contact */
  .nav .nl-x, .nav summary .d { display: none; }
  .nav summary .m { display: inline; }
  .nav details.menu { position: static; }
  .menu-panel { top: calc(100% + 10px); width: calc(100vw - 24px); max-height: calc(100dvh - 96px); overflow: auto; overscroll-behavior: contain; padding: 10px; }
  .menu-main { display: block; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
  .menu-main a { align-items: center; padding-block: 8px; font: 320 32px/1.05 var(--display); font-variation-settings: var(--dv); }
}
/* Room for the language switch. Below 700px it gets tighter. German labels run longer, so up to 680px the German pill
   collapses to Work + Menu, as every language does at 600px (the same rules as the 600px block above). On narrow
   phones the pill tightens, and below 360px German leaves the Work link to the menu, where it comes first. */
@media (max-width: 700px) {
  .nav .lang { padding: 2px; }
  .nav .lang a { padding: 7px 5px 7px 6.5px; }
}
@media (min-width: 601px) and (max-width: 680px) {
  :lang(de) .nav > a.nl, :lang(de) .nav summary { padding: 9px 10px; }
  :lang(de) .nav .nl-x, :lang(de) .nav summary .d { display: none; }
  :lang(de) .nav summary .m { display: inline; }
  :lang(de) .nav details.menu { position: static; }
  :lang(de) .menu-panel { top: calc(100% + 10px); width: calc(100vw - 24px); max-height: calc(100dvh - 96px); overflow: auto; overscroll-behavior: contain; padding: 10px; }
  :lang(de) .menu-main { display: block; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
  :lang(de) .menu-main a { align-items: center; padding-block: 8px; font: 320 32px/1.05 var(--display); font-variation-settings: var(--dv); }
}
@media (max-width: 379px) {
  .nav { gap: 2px; }
  .nav > a, .nav summary { padding: 9px 8px; }
  /* QA 320px: the email address cannot break, so its Copy button drops below it instead of pushing the page sideways */
  .contact .lines div { flex-wrap: wrap; row-gap: 6px; }
  .contact .lines div > :first-child { min-width: 0; overflow-wrap: anywhere; }
  .contact .lines div > :last-child { margin-left: auto; }
}
@media (max-width: 359px) {
  :lang(de) .nav > a.nl:not(.nl-x) { display: none; }
  :lang(de) .hero h1 { font-size: 17.5vw; }   /* QA 320px: "Unternehmen" in the German headline fits the screen */
}
/* a long German industry name ("Unternehmenstools") breaks with a hyphen instead of running out of a phone-width heading;
   case titles stay whole (they are English names) */
@media (max-width: 600px) { :lang(de) .ind-hero .display { -webkit-hyphens: auto; hyphens: auto; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---------- intro splash (once per session): the P grows as a glossy 3D stroke (pre-rendered film, brand/splash.*), holds,
   then blur-dissolves into the page. The ground is the film's own gradient, anchored to the film's side --s, so film and
   page meet without an edge at any viewport size. Sources and render scripts: visual-kit/brand/splash/ ---------- */
.preload { display: none; }
.pl-run .preload, .pl-out .preload { display: block; position: fixed; inset: 0; z-index: 100; overflow: hidden; --s: min(80vw, 60vh);
  background: #ff9418 linear-gradient(70.72deg, #ffd23f calc(50% - 1.1 * var(--s)), #ffab1a calc(50% - .42 * var(--s)), #ff7a12 calc(50% + .3 * var(--s)), #f2520a calc(50% + .95 * var(--s)));
  transition: opacity .95s cubic-bezier(.45, 0, .2, 1) .1s; }
.preload-film, .preload-still { position: absolute; left: 50%; top: 50%; width: var(--s); height: var(--s); translate: -50% -50%; display: block; object-fit: cover;
  transition: filter .95s cubic-bezier(.3, 0, .2, 1), scale .95s cubic-bezier(.3, 0, .2, 1), opacity .65s cubic-bezier(.4, 0, .2, 1); }
.preload-film { -webkit-mask: radial-gradient(closest-side, #000 80%, transparent); mask: radial-gradient(closest-side, #000 80%, transparent); will-change: filter, scale; }
.preload-still { opacity: 0; filter: blur(16px); scale: .96; }
.preload-still.in { opacity: 1; filter: blur(0); scale: 1; transition: opacity .7s var(--ease), filter 1s var(--ease), scale 1.2s var(--ease); }
.pl-still .preload-film { opacity: 0; }
.preload-cap { position: absolute; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom, 0px)); translate: -50% 0; white-space: nowrap;
  font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(70, 22, 0, .62); animation: pl-cap .9s var(--ease) 1.3s backwards; transition: opacity .35s ease; }
@keyframes pl-cap { from { opacity: 0; translate: -50% 6px; } }
.pl-out .preload { opacity: 0; pointer-events: none; }
.pl-out .preload-film, .pl-out .preload-still.in { filter: blur(24px); scale: 1.06; opacity: 0; }
.pl-out .preload-cap { opacity: 0; }
.pl-done .preload, .no-preload .preload { display: none; }
/* the page eases in from a soft blur as the splash dissolves */
.pl-run .nav { opacity: .001; will-change: opacity; }
.pl-run .hero, .pl-run .case-hero { opacity: .001; filter: blur(14px); translate: 0 18px; will-change: opacity, filter, translate; }
.pl-out .nav { transition: opacity 1s var(--ease) .35s; }
.pl-out .hero, .pl-out .case-hero { transition: opacity 1.1s var(--ease) .25s, filter 1.1s var(--ease) .25s, translate 1.3s var(--ease) .25s; }
/* safety net: the splash clears itself even if its script never finishes */
.pl-run .preload { animation: pl-gone .6s ease 4.4s forwards; }
.pl-run .nav, .pl-run .hero, .pl-run .case-hero { animation: pl-back .6s ease 4.4s forwards; }
@keyframes pl-gone { to { opacity: 0; visibility: hidden; pointer-events: none; } }
@keyframes pl-back { to { opacity: 1; filter: none; translate: none; } }

/* ---- Ambient edge glow (31 Oct 2026, at Preetham's request) ---- */
/* Out-of-focus warm light (brand #F3CC63 → #E59438 → #DD4234) along the top edge of the viewport and, softer, the bottom:
   about 20% at its brightest, clear by about a quarter of the way in. Three fixed layers behind all content: z-index -1
   paints them over the #060606 canvas (body's background, so <html> must keep no background of its own) and under
   everything in <body>. Each sways slowly side to side and breathes, out of phase with the others, like far-off flames.
   Large soft radial gradients, no blur filter; only transform and opacity animate. The layers are 130vw wide so the sway
   never shows an edge (fixed boxes add no scroll width). Static under reduced motion.
   html::before = top wash, body::before = top hot cores, html::after = bottom glow; body::after stays free.
   Departs from KOTO_BENCHMARK rule 1 (colour only from the work, never in the chrome) at Preetham's explicit request. */
html::before, html::after, body::before {
  content: ""; position: fixed; left: -15vw; z-index: -1; width: 130vw; height: clamp(240px, 46vh, 520px);
  pointer-events: none; contain: strict; will-change: transform, opacity;
}
html::before {
  top: 0; transform-origin: 50% 0;
  background:
    radial-gradient(max(30vw, 150px) 84% at 17% 0%, rgb(229 148 56 / .113), rgb(229 138 55 / .102) 20%, rgb(227 120 53 / .073) 40%, rgb(224 98 52 / .04) 60%, rgb(221 66 52 / .011) 80%, rgb(221 66 52 / 0)),
    radial-gradient(max(22vw, 110px) 64% at 47% 0%, rgb(229 148 56 / .086), rgb(229 138 55 / .077) 20%, rgb(227 120 53 / .056) 40%, rgb(224 98 52 / .03) 60%, rgb(221 66 52 / .009) 80%, rgb(221 66 52 / 0)),
    radial-gradient(max(28vw, 140px) 76% at 80% 0%, rgb(229 148 56 / .108), rgb(229 138 55 / .097) 20%, rgb(227 120 53 / .07) 40%, rgb(224 98 52 / .038) 60%, rgb(221 66 52 / .011) 80%, rgb(221 66 52 / 0));
  animation: edge-glow-sway-a 23s ease-in-out -6s infinite alternate, edge-glow-breathe 11s ease-in-out -3s infinite alternate;
}
body::before {
  top: 0; transform-origin: 50% 0;
  background:
    radial-gradient(max(11vw, 70px) 52% at 33% 3%, rgb(236 176 77 / .119), rgb(234 166 70 / .107) 20%, rgb(231 154 62 / .077) 40%, rgb(229 140 56 / .042) 60%, rgb(227 120 53 / .012) 80%, rgb(227 120 53 / 0)),
    radial-gradient(max(9vw, 60px) 42% at 60% 5%, rgb(236 176 77 / .103), rgb(234 166 70 / .093) 20%, rgb(231 154 62 / .067) 40%, rgb(229 140 56 / .036) 60%, rgb(227 120 53 / .01) 80%, rgb(227 120 53 / 0)),
    radial-gradient(max(10vw, 64px) 48% at 85% 2%, rgb(236 176 77 / .092), rgb(234 166 70 / .083) 20%, rgb(231 154 62 / .06) 40%, rgb(229 140 56 / .032) 60%, rgb(227 120 53 / .009) 80%, rgb(227 120 53 / 0));
  animation: edge-glow-sway-b 17s ease-in-out -11s infinite alternate, edge-glow-breathe 7.5s ease-in-out -5s infinite alternate;
}
html::after {
  bottom: 0; transform-origin: 50% 100%;
  background:
    radial-gradient(max(30vw, 150px) 74% at 27% 100%, rgb(229 148 56 / .113), rgb(229 138 55 / .102) 20%, rgb(227 120 53 / .073) 40%, rgb(224 98 52 / .04) 60%, rgb(221 66 52 / .011) 80%, rgb(221 66 52 / 0)),
    radial-gradient(max(10vw, 64px) 42% at 48% 100%, rgb(236 176 77 / .081), rgb(234 166 70 / .073) 20%, rgb(231 154 62 / .053) 40%, rgb(229 140 56 / .028) 60%, rgb(227 120 53 / .008) 80%, rgb(227 120 53 / 0)),
    radial-gradient(max(24vw, 130px) 62% at 73% 100%, rgb(227 120 53 / .103), rgb(226 108 52 / .093) 20%, rgb(224 94 52 / .067) 40%, rgb(222 80 52 / .036) 60%, rgb(221 66 52 / .01) 80%, rgb(221 66 52 / 0));
  animation: edge-glow-sway-c 26s ease-in-out -14s infinite alternate, edge-glow-breathe 13s ease-in-out -8s infinite alternate;
}
@keyframes edge-glow-sway-a { from { transform: translate3d(-9vw, 0, 0) scale(1.04, .92); } to { transform: translate3d(9vw, 0, 0) scale(1, 1.06); } }
@keyframes edge-glow-sway-b { from { transform: translate3d(12vw, 0, 0) scale(1.02, 1.08); } to { transform: translate3d(-11vw, 0, 0) scale(1.06, .9); } }
@keyframes edge-glow-sway-c { from { transform: translate3d(8vw, 0, 0) scale(1.03, .94); } to { transform: translate3d(-10vw, 0, 0) scale(1, 1.07); } }
@keyframes edge-glow-breathe { 0% { opacity: .72; } 45% { opacity: .96; } 70% { opacity: .84; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  html::before, html::after, body::before { animation: none; will-change: auto; }
}

/* ---- Organisation logos in the marquee (31 Oct 2026, at Preetham's request) ----
   site/media/orgs/<slug>.svg: official marks, flat #9b9891 (= --mute, the old text colour), optical size baked into
   each file's 100-unit-high viewBox, so one height serves all. Names without a file stay text. */
.marquee .org img { height: 1.41em; width: auto; flex: none; }

/* ---- About portrait twilight (31 Oct 2026, at Preetham's request) ---- */
/* Preetham's portrait (media/about/, from his own photo; see build.py) sits on the left of About, immersed in the dark.
   The photo's black was taken down to 0 and the figure is screen-blended, so its darkness *is* the page, edge glow
   included: no frame, edge or box at any size. A heavily feathered band of dusk light (amber core, rose then cool violet
   on the trailing edge) crosses it left to right as the page scrolls through About; where it falls the face is revealed,
   the rest stays in shadow. site.js scrubs --ap-p (0 = band off the left edge, 1 = off the right) and each layer turns it
   into one transform, so nothing lays out or repaints. No JS or reduced motion: .42, a still portrait lit on one side. */
.ap { grid-column: 1 / span 6; align-self: start; position: sticky; top: 75px; margin: 0; mix-blend-mode: screen; --ap-p: .42; }
.ap-frame { position: relative; aspect-ratio: 4 / 5; width: min(100%, calc((100vh - 150px) * .8)); width: min(100%, calc((100svh - 150px) * .8));
  overflow: hidden; isolation: isolate; background: #000;
  -webkit-mask: radial-gradient(closest-side at 50% 46%, #000 70%, transparent); mask: radial-gradient(closest-side at 50% 46%, #000 70%, transparent); }
.ap-frame img { width: 100%; height: 100%; object-fit: cover; }
.ap-frame i { position: absolute; left: -100%; top: -50%; width: 300%; height: 200%; pointer-events: none; will-change: transform;
  transform: translate3d(calc(var(--ap-p) * 50% - 25%), 0, 0) rotate(10deg); }
.ap-tint { mix-blend-mode: soft-light;
  background: linear-gradient(90deg, rgb(92 96 150 / 0) 36%, rgb(93 97 151 / .18) 37.3%, rgb(95 99 151 / .37) 38.7%, rgb(96 100 152 / .55) 40%, rgb(121 108 146 / .57) 41.3%, rgb(145 116 140 / .58) 42.7%, rgb(170 122 132 / .6) 44%, rgb(189 135 124 / .65) 45.3%, rgb(208 149 115 / .71) 46.7%, rgb(223 161 106 / .77) 48%, rgb(228 164 107 / .79) 49.3%, rgb(229 164 107 / .79) 50.7%, rgb(228 160 106 / .78) 52%, rgb(226 156 104 / .76) 53.3%, rgb(221 150 104 / .7) 54.7%, rgb(216 145 104 / .63) 56%, rgb(211 140 104 / .48) 57.3%, rgb(206 135 105 / .24) 58.7%, rgb(200 130 106 / 0) 60%); }
.ap-shade {
  background: linear-gradient(180deg, rgb(0 0 0 / .55) 18%, rgb(0 0 0 / 0) 36%, rgb(0 0 0 / 0) 52%, rgb(0 0 0 / .5) 72%),
    linear-gradient(90deg, rgb(0 0 0 / .93) 40%, rgb(0 0 0 / .919) 41.1%, rgb(0 0 0 / .859) 42.2%, rgb(0 0 0 / .735) 43.3%, rgb(0 0 0 / .561) 44.4%, rgb(0 0 0 / .369) 45.6%, rgb(0 0 0 / .195) 46.7%, rgb(0 0 0 / .071) 47.8%, rgb(0 0 0 / .011) 48.9%, rgb(0 0 0 / 0) 50%, rgb(0 0 0 / .015) 51.1%, rgb(0 0 0 / .096) 52.2%, rgb(0 0 0 / .256) 53.2%, rgb(0 0 0 / .465) 54.3%, rgb(0 0 0 / .674) 55.4%, rgb(0 0 0 / .834) 56.5%, rgb(0 0 0 / .915) 57.6%, rgb(0 0 0 / .93) 58.7%); }
.ap-air { background: radial-gradient(9% 21% at 50% 47%, rgb(236 170 108 / .085), rgb(236 166 106 / .06) 35%, rgb(232 150 100 / .025) 65%, rgb(232 150 100 / 0)); }
.ap figcaption { position: absolute; left: 0; bottom: 9%; }
.ap + .about-body { grid-column: 7 / span 6; }
@media (max-width: 980px) {
  .ap { grid-column: 1 / -1; position: relative; top: auto; margin-bottom: 36px; }
  .ap-frame { width: min(100%, 560px); }
  .ap + .about-body { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .ap { margin-inline: calc(-1 * var(--gut-l)) calc(-1 * var(--gut-r)); }
  .ap-frame { width: 100%; }
  .ap figcaption { left: var(--gut-l); }
}
/* ---- end About portrait twilight ---- */