/* HYPERSOLID — interface layer over the canvas. Fonts come from fonts.css (appended by the build). */
:root {
  --bg: #05070a;
  --fog: #0d2a2e;
  --ink: #e9f3f1;
  --ink-2: #bfd0cd;
  --dim: #93aaa6;
  --line: rgba(207, 238, 232, 0.14);
  --line-2: rgba(207, 238, 232, 0.26);
  --signal: #9cffe0;
  --cyan: #62e3ff;
  --violet: #a68bff;
  --amber: #ffb866;
  --glass: rgba(14, 26, 28, 0.38);
  --f-display-fallback: 'Unbounded', 'Syne', 'Michroma', 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono-fallback: 'JetBrains Mono', 'IBM Plex Mono', 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --f-text-fallback: 'Space Grotesk', 'Sora', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-display: var(--f-display-fallback);
  --f-mono: var(--f-mono-fallback);
  --f-text: var(--f-text-fallback);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --sa-t: env(safe-area-inset-top, 0px);
  --sa-r: env(safe-area-inset-right, 0px);
  --sa-b: env(safe-area-inset-bottom, 0px);
  --sa-l: env(safe-area-inset-left, 0px);
  --gut: clamp(18px, 3.2vw, 44px);
  --gl: calc(var(--gut) + var(--sa-l));
  --gr: calc(var(--gut) + var(--sa-r));
  --top: clamp(16px, 2.6vw, 34px);
  --bot: calc(clamp(20px, 3.4vh, 34px) + var(--sa-b));
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); }
body {
  font-family: var(--f-text);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow: hidden;
  overscroll-behavior: none;
}
/* single-finger gestures drive the camera; two fingers still zoom the page */
html[data-route='home'] body, html[data-route='work'] body { touch-action: pinch-zoom; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--signal); color: #04110d; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; box-shadow: 0 0 0 5px rgba(5, 7, 10, 0.65); border-radius: 4px; }
.pill a:focus-visible, .cta:focus-visible, .wn:focus-visible, .snd:focus-visible, .cl-open:focus-visible, .mini-btn:focus-visible, .hp-ticks button:focus-visible { border-radius: 999px; }
:focus:not(:focus-visible) { outline: none; }
.visually-hidden, .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.mono { font-family: var(--f-mono); }
.display, .title, .cap-title, .np-name, .cl-name, .mf-line, .steps h3, .caps-list h3, .about-intro { font-stretch: 125%; }
.display { font-family: var(--f-display); }
html.has-cursor, html.has-cursor a, html.has-cursor button { cursor: none; }
kbd { font-family: var(--f-mono); }

.skip { position: fixed; left: calc(12px + var(--sa-l)); top: -70px; z-index: 60; padding: 14px 18px; background: var(--signal); color: #04110d; border-radius: 999px; font: 600 12px/1 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; transition: top 0.3s var(--ease-out); }
.skip:focus { top: calc(12px + var(--sa-t)); }

canvas.gl { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; z-index: 0; }
.ui { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
.ui a, .ui button { pointer-events: auto; }

/* ---------------------------------------------------------------- header */
.top { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; align-items: center; padding: calc(var(--top) + var(--sa-t)) var(--gr) 0 var(--gl); z-index: 5; }
.brand { display: inline-flex; align-items: center; gap: 14px; padding: 9px; margin: -9px; color: var(--ink); transition: color 0.3s; will-change: transform; }
.brand-mark { display: block; width: 30px; height: 30px; color: var(--signal); filter: drop-shadow(0 0 10px rgba(156, 255, 224, 0.45)); }
.brand-mark svg { width: 100%; height: 100%; display: block; overflow: visible; }
.brand-word { display: block; height: 15px; }
.brand-word svg { height: 100%; width: auto; display: block; }
.brand:hover .brand-mark { animation: markspin 1.4s var(--ease-io); }
@keyframes markspin { 50% { transform: rotate(90deg) scale(0.9); } 100% { transform: rotate(180deg); } }

/* pill nav: the active item is marked inside the pill by a square-cornered signal capsule (no glow bar) */
.pill { position: relative; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(20, 38, 40, 0.5), rgba(8, 14, 16, 0.42)); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 10px 40px rgba(0, 0, 0, 0.35); pointer-events: auto; }
.pill a { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; font: 500 11px/1 var(--f-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); border-radius: 10px; transition: color 0.35s; will-change: transform; }
.pill a::before { content: ''; width: 5px; height: 5px; border: 1px solid currentColor; opacity: 0; transform: rotate(45deg) scale(0.4); transition: opacity 0.35s, transform 0.5s var(--ease-out); }
.pill a:hover { color: var(--ink); }
.pill a.is-active { color: var(--ink); }
.pill a.is-active::before { opacity: 1; transform: rotate(0) scale(1); border-color: var(--signal); background: rgba(156, 255, 224, 0.35); }
.pill-sep { display: none; }
.pill-glow { position: absolute; left: 0; top: 0; width: 60px; height: 34px; border-radius: 10px; background: rgba(156, 255, 224, 0.09); border: 1px solid rgba(156, 255, 224, 0.28); opacity: 0; transition: transform 0.7s var(--ease-out), width 0.7s var(--ease-out), opacity 0.4s; pointer-events: none; }

/* ---------------------------------------------------------------- type + reveals */
.kicker { margin: 0 0 18px; font: 500 11px/1.4 var(--f-mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--signal); }
.kicker .tag, .tag { display: inline-block; margin-left: 8px; padding: 3px 8px; border: 1px solid rgba(156, 255, 224, 0.35); border-radius: 999px; font-size: 10px; letter-spacing: 0.16em; color: var(--signal); }
.nw { white-space: nowrap; }
.title { margin: 0 0 22px; font-weight: 500; font-size: clamp(34px, 4.9vw, 84px); line-height: 1.02; letter-spacing: -0.02em; color: var(--ink); max-width: 13.5ch; text-wrap: balance; }
.title.sm { font-size: clamp(30px, 3.6vw, 60px); }
.body { margin: 0; max-width: 34em; font-size: clamp(15px, 1.12vw, 17px); color: var(--ink-2); }
.lead { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.45; color: var(--ink); margin: 0 0 30px; max-width: 30em; }
.sw { white-space: nowrap; } /* measure whole words: a hyphenated word must not break inside the measuring span */
.split-line { display: block; overflow: hidden; padding: 0.06em 0 0.12em; margin: -0.06em 0 -0.12em; }
.split-line > span { display: block; transform: translate3d(0, 115%, 0) rotate(2deg); transform-origin: 0 100%; transition: transform 1.15s var(--ease-out); transition-delay: calc(var(--li, 0) * 80ms + var(--d, 0ms) + 120ms); }
.is-in .split-line > span { transform: none; }
.is-out .split-line > span { transform: translate3d(0, -110%, 0); transition: transform 0.55s var(--ease-in); transition-delay: calc(var(--li, 0) * 30ms); }
.chapter.is-out .split-line > span { transition-duration: 0.38s; transition-delay: calc(var(--li, 0) * 20ms); }
[data-split]:not(:has(.split-line)) { opacity: 0; }
.is-in [data-split]:not(:has(.split-line)) { opacity: 1; transition: opacity 0.6s; }
.rv { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity 0.9s var(--ease-out), transform 1.1s var(--ease-out); transition-delay: calc(var(--d, 0ms) + 380ms); }
.is-in .rv { opacity: 1; transform: none; }
.is-out .rv { opacity: 0; transform: translate3d(0, -10px, 0); transition-duration: 0.4s; transition-delay: 0ms; }
.body.is-in .split-line > span, .is-in .body .split-line > span { transition-delay: calc(var(--li, 0) * 60ms + 280ms); }

.cta { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; padding: 15px 22px 15px 24px; border-radius: 999px; border: 1px solid var(--line-2); font: 500 11px/1 var(--f-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); background: rgba(10, 22, 24, 0.35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: border-color 0.4s, background 0.4s, color 0.4s, box-shadow 0.4s; will-change: transform; }
.cta:hover { border-color: rgba(156, 255, 224, 0.7); background: rgba(156, 255, 224, 0.08); box-shadow: 0 0 30px rgba(156, 255, 224, 0.15); }
.cta.solid { background: var(--signal); color: #03120e; border-color: var(--signal); }
.cta.solid:hover { background: #c6fff0; box-shadow: 0 0 40px rgba(156, 255, 224, 0.4); }
.cta.ghost { background: transparent; }
.ico-arrow { width: 22px; height: 11px; flex: none; transition: transform 0.5s var(--ease-out); }
.cta:hover .ico-arrow { transform: translateX(4px); }
.ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- views */
.view { position: absolute; inset: 0; visibility: hidden; }
.view.is-active { visibility: visible; }
.view:not(.is-active) * { pointer-events: none !important; }
/* leaving without per-line exits: one short fade (home -> anywhere, work -> project) */
.view.is-leaving { opacity: 0; transition: opacity 0.18s linear; }
.view.is-leaving * { pointer-events: none !important; }

/* home chapters */
.chapter { position: absolute; left: var(--gl); right: var(--gr); pointer-events: none; will-change: transform; transition: opacity 0.15s linear; }
.chapter:not(.is-in) a, .chapter:not(.is-in) button { pointer-events: none; }
html.is-flying .view-home .chapter:not(.is-in) { opacity: 0; }
/* hero: the emblem owns the first screen — one short statement, bottom left */
.ch-0 { bottom: calc(clamp(72px, 11vh, 120px) + var(--sa-b)); }
.ch-0 .title { font-size: clamp(28px, 3.1vw, 46px); max-width: 17ch; margin-bottom: 0; line-height: 1.06; }
.ch-0 .kicker { margin-bottom: 14px; }
.ch-1 { top: 50%; transform: translateY(-50%); max-width: min(38vw, 520px); }
.ch-1 .title { font-size: clamp(30px, 3.6vw, 62px); }
/* tunnel: the copy sits low and centred, the portal (the emblem at the vanishing point) above it */
.ch-2 { top: auto; bottom: calc(clamp(70px, 11vh, 120px) + var(--sa-b)); left: 50%; right: auto; width: min(760px, 86vw); text-align: center; margin-left: calc(min(760px, 86vw) / -2); }
.ch-2 .title { max-width: none; margin-left: auto; margin-right: auto; font-size: clamp(34px, 4.8vw, 82px); }
.ch-2 .body { margin: 0 auto; }
.ch-2::before { content: ''; position: absolute; left: 50%; top: 50%; width: 125%; height: 175%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(3, 6, 8, 0.72), rgba(3, 6, 8, 0.42) 58%, rgba(3, 6, 8, 0) 100%); z-index: -1; opacity: 0; transition: opacity 1s var(--ease-out); pointer-events: none; }
.ch-2.is-in::before { opacity: 1; }
.ch-3 { bottom: calc(clamp(90px, 13vh, 140px) + var(--sa-b)); max-width: 560px; }
.ch-3 .title { font-size: clamp(30px, 3.6vw, 62px); }
.ch-3 .body { margin-bottom: 28px; }
.ch-4 { top: 50%; margin-top: -170px; max-width: 600px; }
.ch-4 .body { margin-bottom: 30px; }
.chapter .kicker { transition-delay: 150ms; }

/* capability labels: small frosted plates just outside their cells, joined by a 1 px leader */
.caps { position: fixed; inset: 0; pointer-events: none; z-index: 1; }
.cap { position: absolute; left: 0; top: 0; display: grid; gap: 5px; padding: 9px 12px 10px; max-width: 230px; min-height: 44px; text-align: left; opacity: 0; pointer-events: none; will-change: transform, opacity; border-radius: 10px; border: 1px solid rgba(207, 238, 232, 0.16); background: linear-gradient(150deg, rgba(20, 40, 42, 0.62), rgba(6, 12, 14, 0.5)); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); transition: border-color 0.3s, background 0.3s; }
.caps.is-live .cap { pointer-events: auto; }
.cap[data-side='l'] { text-align: right; justify-items: end; }
.cap[data-side='t'], .cap[data-side='b'] { text-align: center; justify-items: center; }
.cap-lead { position: absolute; background: rgba(156, 255, 224, 0.5); pointer-events: none; }
.cap[data-side='r'] .cap-lead { left: -16px; top: 50%; width: 15px; height: 1px; }
.cap[data-side='l'] .cap-lead { right: -16px; top: 50%; width: 15px; height: 1px; }
.cap[data-side='t'] .cap-lead { bottom: -16px; left: 50%; width: 1px; height: 15px; }
.cap[data-side='b'] .cap-lead { top: -16px; left: 50%; width: 1px; height: 15px; }
.cap-idx { font: 500 10px/1 var(--f-mono); letter-spacing: 0.2em; color: var(--signal); }
.cap-title { font: 500 clamp(14px, 1.1vw, 17px)/1.2 var(--f-display); letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; transition: color 0.3s, text-shadow 0.3s; }
.cap-body { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
.cap:hover, .cap.is-hot, .cap[aria-pressed='true'] { border-color: rgba(156, 255, 224, 0.55); background: linear-gradient(150deg, rgba(30, 70, 66, 0.7), rgba(6, 16, 16, 0.55)); }
.cap:hover .cap-title, .cap.is-hot .cap-title { color: var(--signal); text-shadow: 0 0 22px rgba(156, 255, 224, 0.5); }

/* scroll cue: aligned with the copy column; a 1 px line with a travelling signal dot */
.scroll-cue { position: absolute; left: 61%; bottom: var(--bot); transform: translateX(-50%); display: flex; align-items: center; gap: 14px; opacity: 0; transition: opacity 0.8s; } /* under the emblem */
.scroll-cue.is-on { opacity: 1; transition-delay: 0.6s; }
html.is-intro-late .scroll-cue { opacity: 0; transition-delay: 0s; }
.scroll-cue span { font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-2); }
.scroll-cue kbd { display: none; padding: 3px 7px; border: 1px solid var(--line-2); border-radius: 5px; font-size: 10px; letter-spacing: 0.08em; color: var(--ink-2); }
html.kb-nav .scroll-cue kbd { display: inline-block; }
.scroll-cue i { position: relative; display: block; width: 1px; height: 34px; background: linear-gradient(var(--line-2), transparent); overflow: hidden; }
.scroll-cue i::after { content: ''; position: absolute; left: -1px; top: 0; width: 3px; height: 8px; border-radius: 2px; background: var(--signal); box-shadow: 0 0 8px var(--signal); animation: cue 2.2s var(--ease-io) infinite; }
@keyframes cue { 0% { transform: translateY(-10px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(36px); opacity: 0; } }

/* work */
.work-head { position: absolute; left: var(--gl); top: calc(var(--top) + var(--sa-t) + 86px); max-width: 330px; }
.work-head::before { content: ''; position: absolute; inset: -50px -70px -40px -60px; background: radial-gradient(closest-side, rgba(3, 6, 8, 0.72), rgba(3, 6, 8, 0.38) 60%, rgba(3, 6, 8, 0)); z-index: -1; pointer-events: none; }
.work-head .title { margin-bottom: 14px; }
.work-head .body { font-size: 14px; max-width: 26em; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6); }
.work-list { position: absolute; left: var(--gl); bottom: calc(clamp(96px, 14vh, 130px) + var(--sa-b)); margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.work-list a { display: flex; gap: 14px; align-items: baseline; padding: 5px 0; font: 500 11px/1.3 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); transition: color 0.3s, transform 0.5s var(--ease-out); }
.work-list a .idx { color: rgba(156, 255, 224, 0.55); }
.work-list a:hover, .work-list a.is-on { color: var(--ink); }
.work-list a.is-on { transform: translateX(10px); }
.work-list a.is-on .idx { color: var(--signal); }
/* the list is for wide screens (and screen readers); arrows / keys browse everywhere else */
@media (max-width: 1599px) {
  .work-list { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
  .work-list:focus-within { width: auto; height: auto; clip: auto; clip-path: none; overflow: visible; padding: 12px 16px; border-radius: 12px; background: rgba(5, 10, 12, 0.86); border: 1px solid var(--line); }
}
.card-label { position: absolute; left: 0; top: 0; text-align: center; opacity: 0; transition: opacity 0.6s; pointer-events: none; }
.view-work.is-in .card-label { opacity: 1; transition-delay: 0.5s; }
.cl-meta { display: flex; gap: 14px; justify-content: center; margin: 0 0 10px; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-2); }
.cl-n { color: var(--signal); }
.cl-name { margin: 0; font-size: clamp(22px, 2.2vw, 36px); line-height: 1.05; letter-spacing: -0.01em; white-space: nowrap; }
.cl-open { display: inline-flex; gap: 10px; align-items: center; margin: 8px 0 0; min-height: 44px; padding: 14px 16px; border-radius: 999px; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-2); transition: color 0.3s, background 0.3s; will-change: transform; }
.cl-open:hover { color: var(--signal); background: rgba(156, 255, 224, 0.06); }
.view-work.is-in .card-label .cl-open { pointer-events: auto; }
.card-label.swap .cl-name, .card-label.swap .cl-meta { animation: swapin 0.7s var(--ease-out); }
@keyframes swapin { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } }
.work-nav { position: absolute; left: 50%; bottom: var(--bot); translate: -50% 0; display: flex; align-items: center; gap: 18px; }
.work-nav .hint { margin: 0; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.wn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: rgba(10, 22, 24, 0.35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: border-color 0.3s, background 0.3s; will-change: transform; }
.wn:hover { border-color: rgba(156, 255, 224, 0.6); background: rgba(156, 255, 224, 0.08); }

/* project */
.view-project { z-index: 3; }
.proj-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3, 6, 8, 0.9) 0%, rgba(3, 6, 8, 0.75) 40%, rgba(3, 6, 8, 0) 70%); opacity: 0; transition: opacity 0.9s var(--ease-out); pointer-events: none; }
.view-project.is-in .proj-scrim { opacity: 1; }
.proj-scroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; pointer-events: none; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent calc(var(--top) + var(--sa-t) + 64px), #000 calc(var(--top) + var(--sa-t) + 130px), #000 calc(100% - 150px - var(--sa-b)), transparent calc(100% - 84px - var(--sa-b)));
  mask-image: linear-gradient(180deg, transparent 0, transparent calc(var(--top) + var(--sa-t) + 64px), #000 calc(var(--top) + var(--sa-t) + 130px), #000 calc(100% - 150px - var(--sa-b)), transparent calc(100% - 84px - var(--sa-b))); }
.proj-scroll::-webkit-scrollbar { display: none; }
.view-project.is-in .proj-scroll { pointer-events: auto; }
.proj { width: min(560px, 44vw); padding: calc(var(--top) + var(--sa-t) + 96px) 0 calc(170px + var(--sa-b)) var(--gl); }
.back { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin-bottom: 36px; padding: 14px 0; font: 500 11px/1 var(--f-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); transition: color 0.3s; }
.back:hover { color: var(--signal); }
.back kbd { padding: 3px 6px; border: 1px solid var(--line); border-radius: 5px; font: inherit; font-size: 9px; color: var(--dim); }
.proj-name { max-width: 12ch; }
.proj-meta { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 0 0 34px; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.proj-meta div { display: grid; grid-template-columns: 90px 1fr; gap: 14px; }
.proj-meta dt { font: 500 10px/1.6 var(--f-mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); }
.proj-meta dd { margin: 0; font-size: 14px; color: var(--ink); }
.pm-stack { display: flex; flex-wrap: wrap; gap: 6px; }
.pm-stack span { padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; font: 500 11px/1.5 var(--f-mono); color: var(--ink-2); background: rgba(3, 6, 8, 0.4); }
.proj-body p { margin: 0 0 18px; color: var(--ink-2); font-size: 15.5px; text-shadow: 0 1px 14px rgba(3, 6, 8, 0.8); }
.stills { margin: 44px 0 30px; }
.stills .kicker span { color: var(--dim); }
.stills-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.still { margin: 0; }
.still:first-child { grid-column: 1 / -1; }
.still-img { position: relative; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: linear-gradient(110deg, rgba(156, 255, 224, 0.04) 20%, rgba(156, 255, 224, 0.12) 40%, rgba(156, 255, 224, 0.04) 60%) 0 0 / 250% 100%; border: 1px solid var(--line); }
.still.is-loading .still-img { animation: shimmer 1.6s linear infinite; }
@keyframes shimmer { to { background-position: -250% 0; } }
.still img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.8s; }
.still:not(.is-loading) img { opacity: 1; }
.still figcaption { margin-top: 8px; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.concept-note { margin: 0 0 40px; font-size: 11px; letter-spacing: 0.08em; color: var(--dim); }
.next-proj { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 10px 20px; padding: 28px 0 8px; border-top: 1px solid var(--line); will-change: transform; }
.next-proj .kicker { grid-column: 1 / -1; margin: 0; }
.np-name { font-size: clamp(26px, 2.6vw, 44px); line-height: 1.05; letter-spacing: -0.02em; transition: color 0.3s; }
.next-proj:hover .np-name { color: var(--signal); }
.next-proj .ico-arrow { width: 34px; height: 17px; margin-bottom: 10px; }
.next-proj:hover .ico-arrow { transform: translateX(6px); }

/* about: unboxed rows, one idea at a time, revealed as each section enters */
.view-about { z-index: 3; }
.view-about::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3, 6, 8, 0.74) 0%, rgba(3, 6, 8, 0.46) 45%, rgba(3, 6, 8, 0) 75%); opacity: 0; transition: opacity 1s var(--ease-out); pointer-events: none; }
.view-about.is-in::before { opacity: 1; }
.about-scroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; pointer-events: none; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent calc(var(--top) + var(--sa-t) + 60px), #000 calc(var(--top) + var(--sa-t) + 130px), #000 calc(100% - 110px - var(--sa-b)), transparent calc(100% - 64px - var(--sa-b)));
  mask-image: linear-gradient(180deg, transparent 0, transparent calc(var(--top) + var(--sa-t) + 60px), #000 calc(var(--top) + var(--sa-t) + 130px), #000 calc(100% - 110px - var(--sa-b)), transparent calc(100% - 64px - var(--sa-b))); }
.about-scroll::-webkit-scrollbar { display: none; }
.view-about.is-in .about-scroll { pointer-events: auto; }
.about { padding: calc(var(--top) + var(--sa-t) + 120px) var(--gr) calc(180px + var(--sa-b)) var(--gl); max-width: 1180px; }
.manifesto { margin: 0 0 22vh; }
.mf-line { margin: 0 0 0.12em; font-size: clamp(30px, 5.1vw, 88px); line-height: 1.04; letter-spacing: -0.025em; max-width: 16ch; text-wrap: balance; }
.mf-line:nth-child(2n) { color: var(--ink-2); padding-left: clamp(0px, 8vw, 140px); }
.mf-line:last-child { color: var(--signal); }
.about-sec { margin: 0 0 22vh; }
.view-about.is-in .about-sec:not(.is-in) .rv, .view-about.is-in .about-sec.rv:not(.is-in) { opacity: 0; transform: translate3d(0, 28px, 0); }
.about-tag { margin: 0 0 18px; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--signal); }
.about-intro { margin: 0; max-width: 24ch; font: 500 clamp(24px, 2.8vw, 44px)/1.18 var(--f-display); letter-spacing: -0.015em; color: var(--ink); text-wrap: balance; }
.steps, .caps-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.steps li, .caps-list li { display: grid; grid-template-columns: minmax(90px, 140px) minmax(0, 1fr) minmax(0, 1.1fr); align-items: baseline; gap: 10px 32px; padding: 30px 0 32px; border-bottom: 1px solid var(--line); }
.steps .idx, .caps-list .idx { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--signal); }
.steps h3, .caps-list h3 { margin: 0; font: 500 clamp(22px, 2.6vw, 40px)/1.08 var(--f-display); letter-spacing: -0.015em; }
.steps p, .caps-list p { margin: 0; font-size: 15px; color: var(--ink-2); max-width: 34em; }
.about-sec.note { max-width: 640px; padding: 30px; border: 1px solid rgba(156, 255, 224, 0.28); border-radius: 16px; background: rgba(6, 18, 17, 0.86); }
.about-sec.note p { color: var(--ink-2); margin: 0 0 22px; }

/* contact */
.view-contact { display: grid; align-items: start; overflow-y: auto; overscroll-behavior: contain; padding: calc(var(--top) + var(--sa-t) + 64px) 0 calc(var(--bot) + 70px); }
.glass-panel { position: relative; margin: auto 0 auto var(--gl); width: min(560px, calc(100vw - var(--gl) - var(--gr))); padding: clamp(28px, 3.4vw, 48px); border-radius: 26px; background: linear-gradient(140deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.015) 55%, rgba(156, 255, 224, 0.03)); border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 40px 120px rgba(0, 0, 0, 0.5); opacity: 0; transform: translate3d(-20px, 0, 0) scale(0.985); transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out); pointer-events: none; }
.glass-panel::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: conic-gradient(from 200deg, rgba(98, 227, 255, 0.5), rgba(166, 139, 255, 0.45), rgba(255, 184, 102, 0.4), rgba(156, 255, 224, 0.55), rgba(98, 227, 255, 0.5)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.55; pointer-events: none; }
.view-contact.is-in .glass-panel { opacity: 1; transform: none; pointer-events: auto; }
.glass-panel .title { max-width: 12ch; }
.glass-panel > p:last-child { margin-bottom: 0; }
.glass-panel .body { margin-bottom: 30px; }
.email { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 30px; padding: 16px 18px; border-radius: 14px; border: 1px dashed rgba(207, 238, 232, 0.25); background: rgba(0, 0, 0, 0.2); }
.email-addr { font-size: 15px; color: var(--ink); text-decoration: line-through; text-decoration-color: rgba(156, 255, 224, 0.5); text-decoration-thickness: 1px; }
.email-tag { flex-basis: 100%; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); }

/* 404 */
.view-404 { display: grid; align-items: start; overflow-y: auto; padding: calc(var(--top) + var(--sa-t) + 64px) 0 calc(var(--bot) + 70px); }
.nf { margin: auto 0 auto var(--gl); }

/* ---------------------------------------------------------------- HUD */
.hud { position: absolute; inset: auto 0 0 0; height: 0; z-index: 4; } /* above the project / about overlays so the player stays usable */
.player { position: absolute; left: var(--gl); bottom: var(--bot); display: flex; align-items: center; gap: 14px; pointer-events: auto; }
.snd { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; min-width: 44px; padding: 10px 16px 10px 13px; border-radius: 12px; border: 1px solid var(--line); background: rgba(10, 22, 24, 0.35); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font: 500 10px/1 var(--f-mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-2); transition: border-color 0.3s, color 0.3s; will-change: transform; }
.snd:hover { border-color: rgba(156, 255, 224, 0.5); color: var(--ink); }
.snd-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.snd-bars i { width: 2px; height: 12px; border-radius: 1px; background: var(--ink-2); transform-origin: 50% 100%; transform: scaleY(0.25); transition: background 0.3s; }
.snd-bars i:nth-child(2) { transform: scaleY(0.5); }
.snd-bars i:nth-child(3) { transform: scaleY(0.75); }
.snd-bars i:nth-child(4) { transform: scaleY(0.42); }
.player.is-on .snd-bars i { background: var(--signal); }
.player.is-loading .snd-bars i { animation: sndload 0.8s var(--ease-io) infinite alternate; }
@keyframes sndload { to { transform: scaleY(1); } }
.mini { display: flex; align-items: center; gap: 4px; opacity: 0; transform: translateX(-8px); transition: opacity 0.5s, transform 0.6s var(--ease-out); pointer-events: none; }
.player.is-on .mini { opacity: 1; transform: none; pointer-events: auto; }
.mini-btn { width: 40px; height: 44px; display: grid; place-items: center; border-radius: 10px; color: var(--ink-2); transition: color 0.3s; }
.mini-btn .portal { width: 16px; height: 16px; transition: transform 0.6s var(--ease-out); }
.mini-btn:hover { color: var(--signal); }
.mini-btn:hover .portal { transform: rotate(90deg); }
.mini-track { display: grid; gap: 4px; min-width: 0; max-width: 190px; }
.mini-idx { font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--signal); }
.mini-name { font: 500 11px/1.1 var(--f-mono); letter-spacing: 0.08em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-name.swap { animation: swapin 0.6s var(--ease-out); }

.hud-progress { position: absolute; right: var(--gr); bottom: var(--bot); display: flex; align-items: center; gap: 14px; pointer-events: auto; transition: opacity 0.6s; }
.hud-progress[data-mode='off'] { opacity: 0; pointer-events: none; }
html.is-intro-late .hud-progress { opacity: 0; }
@media (max-width: 1179px) { html[data-route='work'] .hud-progress { opacity: 0; visibility: hidden; } }
.hp-num { font-size: 11px; letter-spacing: 0.16em; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.hp-cur { color: var(--ink); font-weight: 500; }
.hp-track { position: relative; width: 120px; height: 1px; background: var(--line); overflow: hidden; }
.hp-fill { position: absolute; inset: 0; background: var(--signal); transform-origin: 0 50%; transform: scaleX(0); box-shadow: 0 0 10px var(--signal); }
.hp-ticks { display: flex; gap: 6px; }
.hud-progress[data-mode='work'] .hp-ticks { display: none; }
.hp-ticks button { width: 18px; height: 18px; border-radius: 50%; position: relative; }
.hp-ticks button::before { content: ''; position: absolute; inset: -13px; } /* 44 px hit area */
.hp-ticks button::after { content: ''; position: absolute; inset: 6px; border-radius: 50%; border: 1px solid var(--line-2); transition: background 0.3s, border-color 0.3s, transform 0.4s var(--ease-out); }
.hp-ticks button.is-on::after { background: var(--signal); border-color: var(--signal); transform: scale(1.2); box-shadow: 0 0 10px var(--signal); }
.hp-ticks button:hover::after { border-color: var(--signal); }

/* honesty note: a real footer, legible, linked */
.foot { position: absolute; left: 50%; bottom: calc(var(--bot) + 4px); transform: translateX(-50%); width: min(52ch, calc(100vw - 2 * var(--gut) - 440px)); margin: 0; transition: opacity 0.6s; }
.footnote { margin: 0; text-align: center; font-size: 11px; line-height: 1.5; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); text-shadow: 0 1px 10px rgba(3, 6, 8, 0.9); }
.footnote a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(156, 255, 224, 0.5); text-underline-offset: 3px; pointer-events: auto; }
.footnote a:hover { color: var(--signal); }
html[data-route='work'] .foot, html[data-route='project'] .foot, html[data-route='home'] .foot, html[data-route='about'] .foot { opacity: 0; visibility: hidden; }
html[data-route='home'].at-end .foot { opacity: 1; visibility: visible; }

/* toast (WebGL context lost) */
.toast { position: fixed; left: 50%; top: calc(var(--top) + var(--sa-t) + 70px); transform: translateX(-50%); z-index: 20; padding: 12px 18px; border-radius: 12px; border: 1px solid rgba(255, 184, 102, 0.45); background: rgba(8, 12, 14, 0.9); color: var(--ink); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.toast[hidden] { display: none; }

/* ---------------------------------------------------------------- cursor */
.cursor { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; opacity: 0; transition: opacity 0.3s; }
.cursor.is-visible { opacity: 1; }
.cursor-ring { position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(233, 243, 241, 0.7); transform: translate(-50%, -50%); transition: border-color 0.3s, background 0.3s; }
.cursor-dot { position: absolute; left: 0; top: 0; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 8px var(--signal); transition: opacity 0.2s; }
/* over interactive items the ring inverts what is under it, so the label stays readable */
.cursor.is-hover:not(.has-label) { mix-blend-mode: difference; }
.cursor.is-hover:not(.has-label) .cursor-ring { border-color: #fff; background: #fff; }
.cursor.is-hover .cursor-dot { opacity: 0; }
.cursor.has-label .cursor-ring { background: rgba(156, 255, 224, 0.9); border-color: transparent; }
.cursor.has-label .cursor-dot { opacity: 0; }
.cursor-label { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); font: 600 9px/1 var(--f-mono); letter-spacing: 0.18em; text-transform: uppercase; color: #03120e; opacity: 0; transition: opacity 0.2s; white-space: nowrap; }
.cursor.has-label .cursor-label { opacity: 1; transition-delay: 0.1s; }
.cursor.is-down .cursor-ring { border-color: var(--signal); }

/* ---------------------------------------------------------------- reduced motion */
html.reduced-motion .split-line > span, html.reduced-motion .rv { transform: none !important; transition-property: opacity !important; }
html.reduced-motion .split-line > span { opacity: 0; }
html.reduced-motion .is-in .split-line > span { opacity: 1; }
html.reduced-motion .scroll-cue i::after { animation: none; }

/* ---------------------------------------------------------------- intro choreography */
.top, .hud { transition: opacity 1.2s var(--ease-out), transform 1.4s var(--ease-out); }
html.is-intro .top { opacity: 0; transform: translateY(-12px); }
html.is-intro .hud { opacity: 0; transform: translateY(12px); }

/* ---------------------------------------------------------------- phones (and short landscape windows) */
@media (max-width: 760px) {
  .brand-word { height: 12px; }
  .brand { gap: 10px; }
  .brand-mark { width: 26px; height: 26px; }
  .pill a { min-height: 44px; padding: 16px 11px; font-size: 10.5px; letter-spacing: 0.12em; }
  .pill a::before { display: none; }
  .title { font-size: clamp(30px, 9vw, 44px); max-width: none; }
  .ch-0 .title { font-size: clamp(26px, 7.4vw, 34px); }
  .ch-0 { bottom: calc(112px + var(--sa-b)); }
  .ch-1 { top: auto; bottom: calc(96px + var(--sa-b)); transform: none; max-width: none; }
  .ch-1 .title { margin-bottom: 10px; }
  .ch-1 .body { font-size: 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .ch-2 { left: var(--gl); right: var(--gr); width: auto; margin-left: 0; bottom: calc(104px + var(--sa-b)); }
  .ch-2 .title { font-size: clamp(30px, 9vw, 44px); }
  .ch-3 { bottom: calc(96px + var(--sa-b)); }
  .ch-4 { margin-top: -80px; }
  .cap { max-width: 128px; padding: 6px 8px 7px; min-height: 0; }
  .cap-title { font-size: 12px; white-space: normal; }
  .cap-idx { font-size: 9px; }
  .scroll-cue { left: var(--gl); transform: none; bottom: calc(76px + var(--sa-b)); }
  .work-head { top: calc(var(--top) + var(--sa-t) + 64px); }
  .work-head .body { display: none; }
  .work-nav { bottom: calc(76px + var(--sa-b)); }
  .work-nav .hint { position: absolute; left: 50%; bottom: calc(100% + 12px); translate: -50% 0; font-size: 9.5px; letter-spacing: 0.14em; opacity: 0; pointer-events: none; }
  .view-work.is-in .work-nav .hint { animation: hintblink 5.5s 1.2s var(--ease-out) both; }
  .card-label { transform: none !important; left: var(--gl); right: var(--gr); top: auto; bottom: calc(150px + var(--sa-b)); }
  .cl-meta { flex-wrap: wrap; gap: 4px 10px; }
  .cl-name { white-space: normal; }
  .proj-scrim { background: linear-gradient(180deg, rgba(3, 6, 8, 0) 0%, rgba(3, 6, 8, 0.2) 34%, rgba(3, 6, 8, 0.92) 58%); }
  .proj { width: 100%; padding: 46vh var(--gr) calc(150px + var(--sa-b)) var(--gl); }
  .about { padding-top: calc(var(--top) + var(--sa-t) + 90px); }
  .steps li, .caps-list li { grid-template-columns: 1fr; gap: 10px; padding: 24px 0; }
  .view-about::before { background: linear-gradient(180deg, rgba(3, 6, 8, 0.55), rgba(3, 6, 8, 0.72)); }
  .view-contact { align-items: end; padding: calc(var(--top) + var(--sa-t) + 70px) 0 calc(96px + var(--sa-b)); }
  .glass-panel { margin: 0 auto; padding: 24px 22px; }
  .glass-panel .title { font-size: clamp(26px, 7.6vw, 34px); margin-bottom: 12px; }
  .glass-panel .body { font-size: 14px; margin-bottom: 20px; }
  .email { margin-bottom: 20px; padding: 12px 14px; }
  /* compact player: cell + portals, a short visible label on the toggle */
  .player { gap: 4px; }
  .mini { gap: 0; }
  .mini-track { max-width: 92px; }
  .mini-idx { display: none; }
  .mini-name { font-size: 10px; }
  .snd { padding: 10px 11px; gap: 8px; }
  .snd-label { font-size: 9px; letter-spacing: 0.12em; }
  .hp-track { width: 56px; }
  .hp-ticks { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
  .foot { left: var(--gl); right: var(--gr); width: auto; transform: none; bottom: calc(70px + var(--sa-b)); }
  .footnote { font-size: 10px; text-align: left; }
  html[data-route='contact'] .foot { display: none; }
  html[data-route='about'].about-end .foot { opacity: 1; visibility: visible; }
  html[data-route='home'].at-end .ch-4 { bottom: calc(150px + var(--sa-b)); top: auto; margin-top: 0; }
}
@media (max-width: 760px) and (min-height: 700px) { .ch-1 { bottom: calc(110px + var(--sa-b)); } }
@media (max-width: 760px) and (max-height: 760px) {
  .ch-3 { bottom: calc(80px + var(--sa-b)); }
  .ch-3 .body { font-size: 14px; }
  .ch-3 .kicker { text-shadow: 0 1px 10px rgba(3, 6, 8, 0.95); }
}
@media (max-width: 480px) {
  .brand-word { display: none; }
  .pill a { padding: 16px 9px; letter-spacing: 0.1em; }
}
@keyframes hintblink { 0% { opacity: 0; } 12%, 78% { opacity: 1; } 100% { opacity: 0; } }
/* short viewports: phones in landscape, zoomed or short desktop windows */
@media (max-height: 520px) {
  .title, .ch-0 .title, .ch-2 .title, .ch-1 .title, .ch-3 .title { font-size: clamp(22px, 5vh + 1.6vw, 38px); margin-bottom: 10px; max-width: 22ch; }
  .kicker { margin-bottom: 10px; }
  .body { font-size: 14px; }
  .ch-0, .ch-3 { bottom: calc(64px + var(--sa-b)); }
  .ch-1 { top: auto; bottom: calc(64px + var(--sa-b)); transform: none; }
  .ch-1 .body, .ch-2 .body, .ch-3 .body { display: none; }
  .ch-2 { bottom: calc(60px + var(--sa-b)); }
  .ch-3 .body + p { margin-top: 12px; }
  .ch-4 { top: auto; bottom: calc(64px + var(--sa-b)); margin-top: 0; }
  .ch-4 .body { display: none; }
  .scroll-cue { display: none; }
  .work-head { top: calc(var(--top) + var(--sa-t) + 52px); }
  .work-head .body, .work-nav .hint { display: none; }
  .work-nav { bottom: var(--bot); }
  .cl-disc { display: none; }
  .work-list { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
  .card-label { transform: none !important; left: auto; right: var(--gr); top: auto; bottom: var(--bot); text-align: right; }
  .cl-open { margin-top: 2px; padding-right: 0; }
  .cl-meta { justify-content: flex-end; }
  .cl-name { font-size: 20px; }
  .view-contact, .view-404 { padding: calc(var(--top) + var(--sa-t) + 56px) 0 calc(var(--bot) + 56px); }
  .glass-panel { padding: 16px 20px; }
  .glass-panel .title { max-width: none; font-size: clamp(22px, 4vh + 1.4vw, 32px); }
  .glass-panel .kicker { margin-bottom: 8px; }
  .email { flex-wrap: nowrap; padding: 10px 14px; gap: 14px; margin-bottom: 12px; }
  .email-tag { flex-basis: auto; white-space: nowrap; }
  .glass-panel .body { display: none; }
  .email { margin-bottom: 12px; }
  .foot { display: none; }
  .proj { padding-top: calc(var(--top) + var(--sa-t) + 56px); padding-bottom: calc(var(--bot) + 70px); }
  .proj-scroll, .about-scroll { -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent calc(var(--top) + var(--sa-t) + 36px), #000 calc(var(--top) + var(--sa-t) + 70px), #000 calc(100% - var(--bot) - 60px), transparent calc(100% - var(--bot) - 30px)); mask-image: linear-gradient(180deg, transparent 0, transparent calc(var(--top) + var(--sa-t) + 36px), #000 calc(var(--top) + var(--sa-t) + 70px), #000 calc(100% - var(--bot) - 60px), transparent calc(100% - var(--bot) - 30px)); }
  .back { margin-bottom: 14px; }
  .proj-scrim { background: linear-gradient(90deg, rgba(3, 6, 8, 0.92) 0%, rgba(3, 6, 8, 0.78) 45%, rgba(3, 6, 8, 0) 75%); }
  .about { padding-top: calc(var(--top) + var(--sa-t) + 64px); padding-bottom: calc(var(--bot) + 70px); }
  .manifesto, .about-sec { margin-bottom: 14vh; }
  .caps .cap { max-width: 150px; padding: 5px 8px; min-height: 0; }
}
@media (max-height: 680px) and (min-height: 521px) {
  .glass-panel { padding: 24px 30px; }
  .glass-panel .kicker { margin-bottom: 12px; }
  .glass-panel .title { font-size: clamp(28px, 3vw, 40px); margin-bottom: 12px; }
  .glass-panel .body { margin-bottom: 16px; }
  .email { margin-bottom: 16px; padding: 12px 16px; }
}
@media (max-height: 520px) and (max-width: 760px) { .proj { width: min(420px, 60vw); padding-left: var(--gl); padding-right: 0; } }

/* ---------------------------------------------------------------- fallback (no WebGL / no JS) */
html.is-fallback body, html.no-js body { overflow: auto; background: radial-gradient(1200px 600px at 0 0, rgba(13, 42, 46, 0.9), transparent 60%), var(--bg); background-attachment: fixed; }
.fb { max-width: 1100px; margin: 0 auto; padding: 0 22px 80px; font-family: var(--f-text); color: var(--ink); }
.fb-skip { position: absolute; left: 12px; top: -60px; z-index: 5; padding: 12px 16px; border-radius: 999px; background: var(--signal); color: #04110d; font: 600 12px/1 var(--f-mono); text-transform: uppercase; letter-spacing: 0.1em; }
.fb-skip:focus { top: 12px; }
.fb-head { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 -22px 70px; padding: 18px 22px; background: rgba(5, 7, 10, 0.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.fb-home { display: inline-flex; align-items: center; gap: 14px; color: var(--signal); }
.fb-mark svg { width: 40px; height: 40px; display: block; }
.fb-word { color: var(--ink); height: 16px; display: inline-flex; }
.fb-word svg { height: 16px; width: auto; }
.fb-nav { display: flex; gap: 4px; }
.fb-nav a { padding: 13px 12px; font: 500 11px/1 var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); border-radius: 10px; }
.fb-nav a:hover { color: var(--signal); }
.fb h1, .fb h2, .fb h3, .fb-manifesto span { font-stretch: 125%; }
.fb h1 { font: 500 clamp(36px, 6vw, 84px)/1.02 var(--f-display); font-stretch: 125%; letter-spacing: -0.02em; margin: 0 0 24px; max-width: 14ch; }
.fb h2 { font: 500 clamp(24px, 3vw, 40px)/1.1 var(--f-display); font-stretch: 125%; margin: 0 0 16px; }
.fb h3 { font: 500 20px/1.2 var(--f-display); font-stretch: 125%; margin: 8px 0; }
.fb p { color: var(--ink-2); max-width: 40em; }
.fb-lead { font-size: 20px; color: var(--ink) !important; }
.fb-note { font: 500 12px/1.6 var(--f-mono); letter-spacing: 0.06em; color: var(--dim) !important; }
.fb-kicker { font: 500 11px/1.4 var(--f-mono) !important; letter-spacing: 0.2em; text-transform: uppercase; color: var(--signal) !important; }
.fb-chapter, .fb-block { margin: 90px 0; scroll-margin-top: 90px; }
.fb-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.fb-grid li { padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.02); }
.fb-projects { display: grid; gap: 14px; }
.fb-project { padding: 28px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, 0.02); scroll-margin-top: 90px; }
.fb-project h3 { font-size: clamp(24px, 2.6vw, 34px); }
.fb-idea { color: var(--ink) !important; font-size: 18px; }
.fb-meta { display: grid; gap: 8px; margin: 16px 0; font-size: 14px; }
.fb-meta div { display: grid; grid-template-columns: 80px 1fr; gap: 12px; }
.fb-meta dt { font: 500 10px/1.8 var(--f-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); }
.fb-meta dd { margin: 0; color: var(--ink-2); }
.fb-idx { font: 500 10px/1 var(--f-mono); letter-spacing: 0.2em; color: var(--signal); }
.fb-manifesto span { display: block; font: 500 clamp(22px, 3vw, 36px)/1.2 var(--f-display); font-stretch: 125%; color: var(--ink); }
.fb-email { font: 500 15px/1 var(--f-mono); text-decoration: line-through; }
.fb-tag { font: 500 10px/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); }
.fb-cta, .fb-retry { display: inline-block; margin-top: 10px; padding: 15px 22px; border-radius: 999px; border: 1px solid var(--signal); color: var(--signal); font: 500 11px/1 var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; }
.fb-foot { margin-top: 100px; padding-top: 24px; border-top: 1px solid var(--line); font: 500 12px/1.6 var(--f-mono); color: var(--ink-2); }
.fb-foot p { color: var(--ink-2); }
.fb-foot a { color: var(--signal); }
@media (max-width: 600px) { .fb-word { display: none; } .fb-nav a { padding: 13px 8px; font-size: 10px; } }

h1[tabindex='-1']:focus, h1[tabindex='-1']:focus-visible, main:focus, main:focus-visible { outline: none; box-shadow: none; }

/* fonts */
/* HYPERSOLID — self-hosted fonts (owned by BRAND).
 *
 * Archivo (Omnibus-Type) and JetBrains Mono (JetBrains), both SIL Open Font License 1.1 —
 * licences in src/assets/fonts/OFL-*.txt. Latin subset, variable, built by brand/tools/make-fonts.py.
 *
 * URL note: '../assets/fonts/…' resolves correctly both from this source file (src/styles/ → src/assets/fonts/)
 * and from the built stylesheet dist/assets/app.css (dist/assets/../assets/fonts/ = dist/assets/fonts/),
 * and esbuild's CSS bundler can resolve it too. Keep fonts in assets/fonts/ next to the CSS.
 *
 * Usage:
 *   display / headlines  font-family: var(--font-display); font-stretch: 125%; font-weight: 500–700
 *   body text            font-family: var(--font-text);    font-stretch: 100%; font-weight: 300–500
 *   UI labels, counters  font-family: var(--font-mono);    font-weight: 400; letter-spacing: .08em; uppercase
 * Archivo has tabular figures: font-variant-numeric: tabular-nums (for the 12/48 preloader counter).
 */

@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo-var-latin.woff2') format('woff2');
  font-weight: 300 800;
  font-stretch: 100% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/jetbrains-mono-var-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-display: 'Archivo', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --font-text: 'Archivo', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

:root{--f-display:var(--font-display);--f-mono:var(--font-mono);--f-text:var(--font-text, var(--font-body));}