/* ==========================================================================
   Syed Muhammad Hassaan — portfolio
   Layers:  1 tokens/base  2 primitives  3 chrome (bar, index, ruler)
            4 sections (static, works with no JS)  5 html.gl (stage grid + WebGL)  6 motion prefs
   ========================================================================== */

/* ---------- 1 · tokens / base ---------- */
@font-face { font-family: "Unbounded"; src: url("./fonts/unbounded.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Geist"; src: url("./fonts/geist.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Martian Mono"; src: url("./fonts/martian-mono.woff2") format("woff2"); font-weight: 100 800; font-stretch: 75% 112.5%; font-display: swap; }

:root {
  --vh: 1vh; /* 1dvh where supported (below), so the layout tracks phone browser chrome; plain vh before that */
  --ink: #05060a;
  --ink-2: #0b0d15;
  --paper: #ece8df;
  --dim: rgba(236, 232, 223, 0.68);
  --faint: rgba(236, 232, 223, 0.12);
  --line: rgba(236, 232, 223, 0.2);
  --signal: #ffd23f;
  --cobalt: #6b86ff;
  --alarm: #ff5a45;

  --f-display: "Unbounded", "Segoe UI", system-ui, sans-serif;
  --f-body: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "Martian Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;

  --gutter: clamp(20px, 4.2vw, 72px);
  --max: 1560px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --bar-h: 64px;
}

@supports (height: 100dvh) { :root { --vh: 1dvh; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; color-scheme: dark; background: var(--ink); overflow-x: clip; }
body {
  margin: 0;
  min-height: calc(100 * var(--vh));
  overflow-x: clip;
  background:
    radial-gradient(1200px 720px at 82% -8%, rgba(107, 134, 255, 0.11), transparent 62%),
    radial-gradient(900px 620px at -6% 42%, rgba(255, 210, 63, 0.05), transparent 62%),
    var(--ink);
  color: var(--paper);
  font: 400 clamp(16px, 0.35vw + 15px, 18px) / 1.6 var(--f-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
::selection { background: var(--signal); color: var(--ink); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 2px; }

.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; user-select: none; } /* read aloud, never copied twice */
.skip { position: fixed; left: 12px; top: -60px; z-index: 200; padding: 10px 16px; background: var(--signal); color: var(--ink); font: 500 12px var(--f-mono); text-transform: uppercase; letter-spacing: 0.1em; border-radius: 4px; transition: top 0.2s var(--ease); }
.skip:focus { top: 12px; }

/* ---------- 2 · primitives ---------- */
.eyebrow { font: 400 clamp(10px, 0.2vw + 9.4px, 11.5px) / 1.5 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.act-tag { font: 400 11px / 1 var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); display: flex; gap: 0.7em; align-items: baseline; margin-bottom: clamp(16px, 3vh, 30px); }
.act-tag b { font-weight: 500; color: var(--signal); }
.act-tag span { opacity: 0.8; }

.display { font: 300 clamp(2.3rem, 5.6vw, 5.8rem) / 0.98 var(--f-display); letter-spacing: -0.04em; text-wrap: balance; }
.display--sm { font-size: clamp(1.7rem, 3.6vw, 3.4rem); line-height: 1.02; }
.display--xl { font-size: clamp(3.4rem, 12.5vw, 13rem); line-height: 0.88; letter-spacing: -0.055em; }
.lede { font: 300 clamp(1.05rem, 0.7vw + 0.95rem, 1.4rem) / 1.5 var(--f-body); color: rgba(236, 232, 223, 0.82); max-width: 44ch; margin-top: clamp(16px, 2.4vh, 26px); text-wrap: pretty; }
.meta { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 14px 0; font: 400 11px / 1.6 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.meta > * + *::before { content: "·"; margin: 0 0.8em; opacity: 0.6; }
.meta time { font: inherit; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.chips li { font: 400 10.5px / 1 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 11px 5px; border: 1px solid rgba(236, 232, 223, 0.14); border-radius: 999px; color: rgba(236, 232, 223, 0.74); background: rgba(236, 232, 223, 0.04); white-space: nowrap; transition: border-color 0.25s, color 0.25s; }
.chips li:hover { border-color: rgba(255, 210, 63, 0.45); color: var(--paper); }

.ticks { display: grid; gap: 10px; margin-top: 16px; }
.ticks li { position: relative; padding-left: 26px; color: rgba(236, 232, 223, 0.86); text-wrap: pretty; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 0.85em; width: 14px; height: 1px; background: var(--signal); }

.readouts { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); margin-top: 22px; border-top: 1px solid var(--line); }
.readout { display: flex; flex-direction: column; padding: 14px 14px 6px 0; }
.readout dt { order: 2; margin-top: 8px; font: 400 10.5px / 1.4 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.readout dd { order: 1; font: 300 clamp(1.5rem, 2.4vw, 2.3rem) / 1 var(--f-display); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.readout dd i { font-style: normal; color: var(--signal); }

.btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border: 1px solid var(--line); border-radius: 999px; font: 500 11.5px / 1 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper); }
.btn svg { width: 15px; height: 15px; flex: none; }
.btn:hover, .btn:focus-visible { border-color: rgba(255, 210, 63, 0.35); background: rgba(255, 210, 63, 0.09); }
.btn--solid { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--solid:hover, .btn--solid:focus-visible { background: var(--signal); border-color: var(--signal); color: var(--ink); }
.btn--wide { width: 100%; justify-content: center; }

/* buttons answer the pointer: lit where it touches them, a comet of light runs the edge, the arrow launches, a press dips.
   The lean towards the pointer and the --x/--y light position come from src/ui/buttons.js (fine pointers only). */
@property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.btn, .bar__cta { position: relative; isolation: isolate; overflow: hidden; transition: background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease), translate 0.45s var(--ease), scale 0.15s var(--ease); }
.btn::before, .bar__cta::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: radial-gradient(140px circle at var(--x, 50%) var(--y, 50%), rgba(255, 210, 63, 0.32), transparent 70%); opacity: 0; transition: opacity 0.35s var(--ease); }
.btn--solid::before, .bar__cta::before { background: radial-gradient(140px circle at var(--x, 50%) var(--y, 50%), rgba(255, 255, 255, 0.6), transparent 70%); }
.btn::after, .bar__cta::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: conic-gradient(from var(--spin), transparent 0 62%, rgba(255, 210, 63, 0.95) 80%, #fff 86%, transparent 92%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: 0; transition: opacity 0.35s var(--ease); }
.btn:hover::before, .btn:focus-visible::before, .bar__cta:hover::before, .bar__cta:focus-visible::before { opacity: 1; }
.btn:hover::after, .btn:focus-visible::after, .bar__cta:hover::after, .bar__cta:focus-visible::after { opacity: 1; animation: comet 1.8s linear infinite; }
.btn:active, .bar__cta:active { scale: 0.96; }
.btn:hover svg, .bar__cta:hover svg, .link:hover svg { animation: launch 0.55s var(--ease); }
.btn:hover svg:has(> use[href="#i-down"]) { animation-name: drop; }
@keyframes comet { to { --spin: 360deg; } }
@keyframes launch { 45% { translate: 110% -110%; opacity: 0; } 46% { translate: -110% 110%; opacity: 0; } 100% { translate: 0 0; opacity: 1; } }
@keyframes drop { 45% { translate: 0 110%; opacity: 0; } 46% { translate: 0 -110%; opacity: 0; } 100% { translate: 0 0; opacity: 1; } }

/* text links: the underline draws itself in, like a pen stroke */
.link { display: inline-flex; align-items: center; gap: 8px; font: 500 11.5px / 1.4 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; padding-bottom: 4px; background: linear-gradient(var(--signal), var(--signal)) 0 100% / 0 1px no-repeat, linear-gradient(var(--line), var(--line)) 0 100% / 100% 1px no-repeat; transition: background-size 0.45s var(--ease), color 0.25s; }
.link svg { width: 14px; height: 14px; }
.link:hover, .link:focus-visible { background-size: 100% 1px, 100% 1px; color: var(--signal); }
.links { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; margin-top: 22px; }
.step > .btn, .step > .link { margin-top: 22px; }

.fav { display: inline-block; vertical-align: -0.2em; margin-right: 0.35em; border-radius: 4px; object-fit: contain; }
.fav--letter { width: 22px; height: 22px; line-height: 22px; text-align: center; font: 500 12px/22px var(--f-display); border: 1px solid var(--line); }
.ar { unicode-bidi: isolate; font-family: "Segoe UI", "Noto Sans Arabic", Tahoma, system-ui, sans-serif; font-weight: 500; }

details.more { margin-top: 18px; border-top: 1px solid var(--faint); padding-top: 12px; }
details.more summary { cursor: pointer; font: 500 11.5px / 1.4 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); list-style: none; display: flex; align-items: center; gap: 10px; }
details.more summary::-webkit-details-marker { display: none; }
details.more summary::before { content: "+"; display: inline-grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--line); border-radius: 50%; font-size: 13px; transition: transform 0.25s var(--ease); }
details.more[open] summary::before { transform: rotate(45deg); }
details.more[open] > :not(summary) { animation: fade-in 0.4s var(--ease) both; }
@keyframes fade-in { from { opacity: 0; transform: translateY(6px); } }

.pulse { display: inline-block; width: 7px; height: 7px; margin-right: 10px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 0 rgba(255, 210, 63, 0.6); animation: pulse 2.4s infinite; vertical-align: 1px; }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(255, 210, 63, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 210, 63, 0); } }

/* film grain + vignette, cheap and static */
.veil { position: fixed; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(2, 3, 6, 0.55) 100%); }
.veil::after { content: ""; position: absolute; inset: -50%; opacity: 0.055; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } }

#gl { position: fixed; inset: 0; z-index: 0; pointer-events: none; display: none; }
#gl canvas { width: 100%; height: 100%; }

/* loader (only exists when JS+modules are supported; CSS also removes it on its own after 9s) */
.loader { display: none; }
html.js .loader { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background: var(--ink); animation: loader-fail 0.6s 14s forwards; transition: opacity 0.9s var(--ease), visibility 0s 0.9s; }
html.js .loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes loader-fail { to { opacity: 0; visibility: hidden; pointer-events: none; } }
.loader__line { position: absolute; left: var(--gutter); right: var(--gutter); top: 50%; height: 1px; background: linear-gradient(90deg, var(--cobalt), var(--paper) 60%, var(--signal)); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); box-shadow: 0 0 18px rgba(255, 210, 63, 0.45); }
.loader__pct { position: absolute; left: var(--gutter); bottom: calc(50% + 18px); font: 200 clamp(2.4rem, 8vw, 6rem) / 1 var(--f-display); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.loader__label { position: absolute; right: var(--gutter); top: calc(50% + 16px); font: 400 11px var(--f-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); }

/* ---------- 3 · chrome ---------- */
.bar { position: fixed; z-index: 50; top: 0; left: 0; right: 0; height: var(--bar-h); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 var(--gutter); }
.bar::before { content: ""; position: absolute; inset: 0 0 -26px 0; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, rgba(5, 6, 10, 0.9) 30%, rgba(5, 6, 10, 0)); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); -webkit-mask-image: linear-gradient(#000 45%, transparent); mask-image: linear-gradient(#000 45%, transparent); }
.bar__brand { display: flex; align-items: center; gap: 12px; }
.bar__mark { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; font: 500 10px var(--f-display); letter-spacing: 0; }
.bar__name { font: 400 11px var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.bar__nav { display: flex; align-items: center; gap: clamp(12px, 2.2vw, 30px); font: 400 11px var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; }
.bar__nav > a:not(.bar__cta), .bar__index, .bar__calm { color: var(--dim); transition: color 0.2s; }
.bar__nav > a:not(.bar__cta):hover, .bar__index:hover, .bar__calm:hover { color: var(--paper); }
.bar__index span { opacity: 0.6; }
.bar__calm { display: inline-flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: inherit; font: inherit; }
.bar__calm-dot { width: 8px; height: 8px; border-radius: 50%; border: 1px solid currentColor; background: var(--signal); border-color: var(--signal); transition: background 0.2s; }
.bar__calm[aria-pressed="true"] .bar__calm-dot { background: transparent; }
.bar__cta { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px; color: var(--paper); }
.bar__cta svg { width: 13px; height: 13px; }
.bar__cta:hover, .bar__cta:focus-visible { background: var(--signal); border-color: var(--signal); color: var(--ink); }
[hidden] { display: none !important; }

.index { border: 0; padding: 0; margin: 0; width: 100%; max-width: none; height: calc(100 * var(--vh)); max-height: none; background: rgba(5, 6, 10, 0.94); color: var(--paper); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.index::backdrop { background: transparent; }
.index[open] { animation: fade-in 0.35s var(--ease) both; }
.index__inner { height: 100%; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--bar-h) + 10px) var(--gutter) 24px; max-width: var(--max); margin-inline: auto; }
.index__close { position: absolute; top: 18px; right: var(--gutter); font: 400 11px var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); padding: 10px 0; }
.index__close span { border: 1px solid var(--line); border-radius: 4px; padding: 2px 6px; margin-left: 8px; }
.index__close:hover { color: var(--paper); }
.index__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(20px, 5vw, 90px); counter-reset: idx; overflow: auto; max-height: calc(calc(100 * var(--vh)) - var(--bar-h) - 40px); }
.index__list li { counter-increment: idx; border-bottom: 1px solid var(--faint); }
.index__list a { display: flex; align-items: baseline; gap: 18px; padding: clamp(8px, 1.6vh, 16px) 0; font: 300 clamp(1.25rem, 2.7vw, 2.5rem) / 1.1 var(--f-display); letter-spacing: -0.03em; transition: padding-left 0.35s var(--ease), color 0.25s, font-weight 0.35s; }
.index__list a::before { content: counter(idx, decimal-leading-zero); font: 400 11px var(--f-mono); letter-spacing: 0.1em; color: var(--signal); min-width: 2ch; }
.index__list a:hover, .index__list a:focus-visible { padding-left: 14px; color: var(--signal); font-weight: 500; }
.index__list a[aria-current="true"] { color: var(--signal); }

.ruler { position: fixed; z-index: 40; right: clamp(10px, 1.6vw, 26px); top: 50%; transform: translateY(-50%); display: none; }
.ruler ol { display: grid; gap: 0; }
.ruler a { position: relative; display: flex; align-items: center; justify-content: flex-end; height: clamp(15px, calc(2.8 * var(--vh)), 24px); width: 46px; }
.ruler a i { display: block; height: 1px; width: 9px; background: var(--dim); transition: width 0.3s var(--ease), background 0.3s; }
.ruler a span { position: absolute; right: 44px; white-space: nowrap; font: 400 10px var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper); opacity: 0; transform: translateX(8px); pointer-events: none; transition: opacity 0.25s, transform 0.3s var(--ease); background: rgba(5, 6, 10, 0.7); padding: 3px 8px; border-radius: 3px; }
.ruler a:hover i, .ruler a:focus-visible i { width: 26px; background: var(--paper); }
.ruler a:hover span, .ruler a:focus-visible span { opacity: 1; transform: none; }
.ruler a[aria-current="true"] i { width: 34px; background: var(--signal); box-shadow: 0 0 10px rgba(255, 210, 63, 0.7); }
.ruler a[aria-current="true"] span { opacity: 1; transform: none; color: var(--signal); }
@media (min-width: 1100px) {
  html.js .ruler { display: block; }
  /* the current chapter's name stays lit on the ruler: keep full-width content clear of it */
  html.js .also, html.js .career, html.js .creds, html.js .toolbox { padding-right: calc(var(--gutter) + 110px); }
  html.js.gl .case--flip .stage__copy { padding-right: 110px; }
}

/* labels pinned to points in the world */
.hud { position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.hud__tag { position: absolute; left: 0; top: 0; margin: -26px 0 0 -2px; padding: 3px 7px; font: 500 10px / 1 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); background: var(--signal); border-radius: 3px; opacity: 0; transition: opacity 0.25s; white-space: nowrap; will-change: transform; }
.hud__tag--dim { margin-top: -20px; padding: 0; background: none; color: var(--dim); font-weight: 400; text-shadow: 0 0 10px rgba(5, 6, 10, 0.9); }

@media (hover: none), (pointer: coarse) { .veil::after { animation: none; } }

/* ---------- 4 · sections (static baseline) ---------- */
main { position: relative; z-index: 3; }
.stage__pin { display: none; }
section[id] { position: relative; }
.stage, .method, .also, .career, .creds, .commits, .toolbox, .contact { padding: clamp(84px, 15vh, 190px) var(--gutter); max-width: var(--max); margin-inline: auto; }
.step { margin-block: clamp(40px, 8vh, 96px); }
.step--intro { margin-top: 0; }
.step h3 { font: 400 clamp(1.2rem, 1.6vw, 1.7rem) / 1.2 var(--f-display); letter-spacing: -0.025em; }
.step h3.eyebrow, h3.eyebrow, h4.eyebrow { font: 400 clamp(10px, 0.2vw + 9.4px, 11.5px) / 1.5 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.step h3 small { display: block; margin-top: 8px; font: 400 11px / 1.4 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.step p + p, .step p + ul, .step p + ol, .step ul + p { margin-top: 14px; }
.step > p:not(.eyebrow):not(.meta):not(.lede):not(.bignum):not(.links) { max-width: 52ch; color: rgba(236, 232, 223, 0.84); text-wrap: pretty; }
.stage__copy { max-width: 760px; }
.career .stage__copy, .toolbox .stage__copy, .contact .stage__copy, .web .stage__copy { max-width: none; }

/* hero */
.hero { min-height: calc(100 * var(--vh)); padding: calc(var(--bar-h) + 4vh) var(--gutter) clamp(24px, 5vh, 48px); display: flex; }
.hero__grid { position: relative; width: 100%; max-width: var(--max); margin-inline: auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(12px, 1.6vw, 28px); row-gap: clamp(14px, 2.6vh, 28px); align-content: end; }
.hero__status { grid-column: 1 / -1; margin-bottom: auto; }
.hero__title { grid-column: 1 / 9; font: 300 clamp(2.9rem, min(8.4vw, calc(16 * var(--vh))), 9.4rem) / 0.9 var(--f-display); letter-spacing: -0.055em; }
.hero__line { display: block; white-space: nowrap; }
.hero__line--accent { font-weight: 600; color: var(--paper); }
.hero__role { grid-column: 1 / 9; font: 400 clamp(0.95rem, 1.5vw, 1.35rem) / 1.35 var(--f-mono); letter-spacing: -0.01em; color: var(--signal); }
.hero__bio { grid-column: 1 / 7; font: 300 clamp(1.05rem, 1.15vw + 0.6rem, 1.35rem) / 1.5 var(--f-body); color: rgba(236, 232, 223, 0.86); text-wrap: pretty; }
.hero__cta { grid-column: 1 / 8; display: flex; flex-wrap: wrap; gap: 12px; }
.hero__stats { grid-column: 1 / -1; margin-top: clamp(4px, 2vh, 20px); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hero__stats .readout dd { font-size: clamp(1.6rem, 3.4vw, 3.2rem); font-weight: 300; }
.hero__portrait { grid-column: 9 / -1; grid-row: 2 / span 4; align-self: center; position: relative; }
.hero__portrait img { width: 100%; height: auto; -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }
.hero__portrait figcaption { margin-top: 10px; text-align: right; }
.hero__scroll { display: none; }

/* method */
.method { padding-block: clamp(90px, 20vh, 240px); }
.method__label { margin-bottom: clamp(24px, 6vh, 64px); }
.method__steps { display: grid; gap: clamp(6px, 1.4vh, 16px); }
.method__step { display: flex; align-items: baseline; gap: clamp(14px, 2.4vw, 40px); font: 300 clamp(2rem, 6.4vw, 6.4rem) / 1.02 var(--f-display); letter-spacing: -0.045em; }
.method__n { font: 400 clamp(11px, 1vw, 14px) var(--f-mono); letter-spacing: 0.12em; min-width: 3ch; color: var(--signal); transform: translateY(-0.9em); }

/* client countries (numbered by CSS, so rows can be added or removed freely) */
.countries { display: grid; counter-reset: country; }
.country { counter-increment: country; margin-block: clamp(22px, 4.5vh, 48px); }
.country__n { display: block; font: 400 12px var(--f-mono); letter-spacing: 0.1em; color: var(--signal); margin-bottom: 10px; }
.country__n::before { content: counter(country, decimal-leading-zero); }
.country h3 { font: 300 clamp(2rem, 4.6vw, 4.4rem) / 1 var(--f-display); letter-spacing: -0.045em; margin-bottom: 12px; }

/* sites */
.web .stage__copy { max-width: none; }
.sites { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 22px; }
.also .sites { margin-top: clamp(28px, 5vh, 56px); }
.site { position: relative; margin: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: rgba(255, 255, 255, 0.025); transition: border-color 0.3s, transform 0.4s var(--ease); }
.site:hover, .site:focus-within { border-color: var(--signal); }
.site__shot img { width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; object-position: top; }
.site__body { padding: 18px 20px 22px; }
.site__n { font: 400 11px var(--f-mono); letter-spacing: 0.12em; color: var(--signal); }
.site h3 { margin-top: 6px; }
.site__tag { font: 400 10.5px / 1.4 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); margin: 6px 0 10px; }
.site__go { display: inline-block; margin-top: 16px; font: 500 11px var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); transition: color 0.3s, letter-spacing 0.45s var(--ease); }
.site:hover .site__go, .site:focus-within .site__go { color: var(--signal); letter-spacing: 0.22em; }
.stretch::after { content: ""; position: absolute; inset: 0; z-index: 1; }

/* lab */
.lab { margin-top: clamp(56px, 10vh, 120px); }
.archive__list { margin-top: 16px; border-top: 1px solid var(--line); }
.archive__row { position: relative; display: grid; grid-template-columns: 8ch minmax(0, 1.1fr) minmax(0, 1.4fr); grid-template-areas: "date title body" "date sub body" "date chips chips"; column-gap: clamp(16px, 3vw, 48px); padding: clamp(22px, 4vh, 38px) 0; border-bottom: 1px solid var(--line); transition: background 0.35s var(--ease); }
.archive__row:hover { background: linear-gradient(90deg, rgba(255, 210, 63, 0.06), transparent 70%); }
.archive__date { grid-area: date; font: 400 11px var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--signal); padding-top: 0.6em; }
.archive__row h4 { grid-area: title; font: 300 clamp(1.3rem, 2.2vw, 2.1rem) / 1.05 var(--f-display); letter-spacing: -0.04em; }
.archive__sub { grid-area: sub; font: 400 11px var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); margin-top: 8px; }
.archive__body { grid-area: body; }
.archive__body > p:not(.links) { color: rgba(236, 232, 223, 0.8); max-width: 62ch; }
.archive__body .links { margin-top: 14px; }
.archive__row .chips { grid-area: chips; }

/* career */
.career__head { max-width: 900px; }
.timeline { margin-top: clamp(40px, 8vh, 90px); border-left: 1px solid var(--line); }
.role { position: relative; display: grid; grid-template-columns: minmax(150px, 230px) minmax(0, 1fr); gap: clamp(16px, 3vw, 44px); padding: clamp(26px, 5vh, 46px) 0 clamp(26px, 5vh, 46px) clamp(22px, 3vw, 44px); border-bottom: 1px solid var(--faint); }
.role::before { content: ""; position: absolute; left: -4px; top: clamp(34px, 6vh, 56px); width: 7px; height: 7px; border-radius: 50%; background: var(--ink); border: 1px solid var(--cobalt); }
.role[data-end="present"]::before { background: var(--signal); border-color: var(--signal); box-shadow: 0 0 12px rgba(255, 210, 63, 0.7); }
.role__when { display: grid; gap: 6px; align-content: start; font: 400 11px / 1.5 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.role__when time { color: var(--paper); }
.role h3 { font: 300 clamp(1.5rem, 2.6vw, 2.5rem) / 1.05 var(--f-display); letter-spacing: -0.04em; }
.role__title { margin: 8px 0 12px; font: 400 11.5px var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--signal); }
.role__what > p:not(.role__title):not(.role__more) { max-width: 62ch; color: rgba(236, 232, 223, 0.84); }
.role__what .link { margin-top: 18px; }
.role__more { margin-top: 12px; font: 400 11px var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.role__more a { color: var(--dim); border-bottom: 1px solid var(--faint); }
.role__more a:hover { color: var(--signal); }

/* credentials */
.creds__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 5vw, 90px); margin-top: clamp(28px, 5vh, 56px); }
.creds__list { margin-top: 16px; border-top: 1px solid var(--line); }
.creds__list > li { padding: 20px 0; border-bottom: 1px solid var(--faint); }
.creds__list time { font: 400 11px var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--signal); }
.creds__list h4 { margin: 8px 0 4px; font: 400 clamp(1.05rem, 1.4vw, 1.3rem) / 1.25 var(--f-display); letter-spacing: -0.025em; }
.creds__deg { font: 400 11px / 1.5 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.creds__id { margin-top: 4px; font: 400 10.5px var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(236, 232, 223, 0.45); }
.creds__list > li > p:not(.creds__deg):not(.creds__id) { margin-top: 8px; color: rgba(236, 232, 223, 0.78); font-size: 0.95em; }

/* commits */
.commits__copy { max-width: 900px; }
.commits__total { margin: 22px 0; color: var(--signal); }
.commits__heat { margin-top: 28px; overflow-x: auto; padding: 20px 22px 14px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; background: rgba(10, 12, 20, 0.72); backdrop-filter: blur(6px); }
.commits__heat svg { display: block; width: 100%; min-width: 640px; height: auto; max-width: none; }
.note.is-sent .btn--solid { background: var(--signal); border-color: var(--signal); }

/* toolbox */
.toolbox__head { max-width: 900px; }
.toolbox__rings { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0; margin-top: clamp(32px, 6vh, 70px); border-top: 1px solid var(--line); }
.ring { padding: 20px 16px 26px 0; border-right: 1px solid var(--faint); }
.ring ul { margin-top: 14px; display: grid; gap: 4px; }
.ring li { font: 300 clamp(1.15rem, 1.6vw, 1.55rem) / 1.25 var(--f-display); letter-spacing: -0.03em; }
.toolbox__aside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 70px); margin-top: clamp(28px, 5vh, 56px); }
.toolbox__aside .chips { margin-top: 12px; }
.pairs { margin-top: 12px; display: grid; gap: 8px; font: 400 12px var(--f-mono); letter-spacing: 0.04em; }
.pairs i { font-style: normal; color: var(--signal); margin: 0 0.6em; }
.toolbox__foot { grid-column: 1 / -1; font: 400 11px var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); padding-top: 24px; border-top: 1px dashed var(--line); }

/* contact */
.contact { padding-bottom: clamp(60px, 10vh, 120px); }
.contact__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-areas: "head form" "side form"; column-gap: clamp(24px, 6vw, 110px); row-gap: clamp(28px, 5vh, 56px); align-items: start; }
.contact__head { grid-area: head; }
.contact__now { margin-top: 26px; font: 400 12px var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal); }
.contact__fits { margin-top: clamp(24px, 4vh, 40px); }
.contact__fits + .ticks { margin-top: 12px; max-width: 52ch; }
.contact__side { grid-area: side; display: grid; gap: 34px; }
.contact__side ul { margin-top: 14px; display: grid; gap: 4px; }
.basics li { padding: 6px 0; color: rgba(236, 232, 223, 0.88); }
.basics a { border-bottom: 1px solid var(--line); }
.basics a:hover { border-color: var(--signal); color: var(--signal); }
.elsewhere a { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--faint); transition: padding-left 0.3s var(--ease), color 0.2s; }
.elsewhere a svg { width: 18px; height: 18px; flex: none; }
.elsewhere a b { display: block; font: 500 0.95rem var(--f-body); }
.elsewhere a em { display: block; font: 400 11px var(--f-mono); letter-spacing: 0.06em; font-style: normal; color: var(--dim); }
.elsewhere a i { margin-left: auto; font-style: normal; color: var(--dim); transition: transform 0.3s var(--ease), color 0.2s; }
.elsewhere a:hover { padding-left: 10px; color: var(--signal); }
.elsewhere a:hover i { transform: translate(3px, -3px); color: var(--signal); }
.note { grid-area: form; display: grid; gap: 22px; padding: clamp(22px, 3vw, 40px); border: 1px solid var(--line); border-radius: 14px; background: rgba(9, 11, 18, 0.62); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.field { display: grid; gap: 8px; }
.field span { font: 400 10.5px var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.field input, .field textarea { width: 100%; padding: 10px 0 12px; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; font: 300 1.2rem / 1.4 var(--f-body); color: var(--paper); resize: vertical; transition: border-color 0.25s; }
.field input::placeholder, .field textarea::placeholder { color: rgba(236, 232, 223, 0.32); }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--signal); }
.field input:focus-visible, .field textarea:focus-visible { outline: none; }
.field input:user-invalid, .field textarea:user-invalid { border-bottom-color: var(--alarm); }
.note__hint { text-align: center; font: 400 10.5px var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(236, 232, 223, 0.45); }
.note__status { min-height: 1.2em; text-align: center; font: 400 12px var(--f-mono); color: var(--signal); }

.foot { position: relative; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 30px; padding: 28px var(--gutter) calc(28px + env(safe-area-inset-bottom)); border-top: 1px solid var(--faint); font: 400 11px var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.foot__name { color: var(--paper); font-family: var(--f-display); font-weight: 400; letter-spacing: -0.01em; font-size: 12px; }
.foot__top:hover { color: var(--signal); }

/* ---------- static, narrow ---------- */
@media (max-width: 899px) {
  .bar__name, .bar__nav > a:not(.bar__cta) { display: none; }
  .hero__title { grid-column: 1 / -1; }
  .hero__role, .hero__bio, .hero__cta { grid-column: 1 / -1; }
  .hero__portrait { grid-column: 1 / -1; grid-row: auto; order: -1; max-width: 420px; margin-inline: auto; }
  .hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .archive__row { grid-template-columns: 1fr; grid-template-areas: "date" "title" "sub" "body" "chips"; }
  .archive__date { padding-top: 0; margin-bottom: 8px; }
  .role { grid-template-columns: 1fr; padding-left: 20px; }
  .creds__grid, .toolbox__aside { grid-template-columns: 1fr; }
  .contact__grid { grid-template-columns: 1fr; grid-template-areas: "head" "form" "side"; }
  .index__list { grid-template-columns: 1fr; }
}

/* ---------- 5 · html.gl — the world is on ---------- */
html.gl { scroll-behavior: auto; }
html.gl body { background: var(--ink); }
html.gl #gl { display: block; }
html.gl .hero__portrait img { opacity: 0; }
html.gl .hero__portrait { pointer-events: none; }
html.gl .hero__portrait figcaption { display: none; }

/* every scene section owns a sticky "pin" that tells the renderer where its subject sits */
html.gl .stage, html.gl .web { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: none; padding: 0 var(--gutter); }
html.gl .stage__copy { grid-column: 1; grid-row: 1; max-width: none; padding-right: clamp(0px, 3vw, 60px); }
html.gl .stage__pin { display: block; grid-column: 2; grid-row: 1; pointer-events: none; }
html.gl .case--flip .stage__copy { grid-column: 2; padding-right: 0; padding-left: clamp(0px, 3vw, 60px); }
html.gl .case--flip .stage__pin { grid-column: 1; }
html.gl .stage__subject { position: sticky; top: 0; height: calc(100 * var(--vh)); }
html.gl .stage__frame { position: absolute; inset: 9% 0 9% 0; display: block; }
html.gl .stage .step { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; min-height: calc(82 * var(--vh)); margin-block: 0; padding-block: calc(9 * var(--vh)); }
html.gl .stage .step--intro { min-height: calc(100 * var(--vh)); }
html.gl .stage .step > * { max-width: 620px; }
html.gl .career__head, html.gl .toolbox__head, html.gl .contact__head, html.gl .note { max-width: 640px; }
html.gl .countries .country { min-height: calc(34 * var(--vh)); padding-block: calc(4 * var(--vh)); }
html.gl .countries { padding-bottom: calc(40 * var(--vh)); } /* the last country is read before the globe starts turning into the next chapter */
html.gl .web .stage__copy { max-width: none; }
/* the corridor: each site is one screen, its screenshot becomes a slab in the world (the static grid in .also stays a grid) */
html.gl .web .sites { display: block; }
html.gl .web .site { display: block; min-height: calc(82 * var(--vh)); border: 0; border-radius: 0; background: none; overflow: visible; padding-block: calc(9 * var(--vh)); display: flex; flex-direction: column; justify-content: center; }
html.gl.slabs .web .site__shot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
html.gl:not(.slabs) .web .site__shot { margin-bottom: 16px; max-width: 520px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
html.gl .web .site__body { padding: 0; max-width: 560px; }
html.gl .web .site__n { display: block; font-size: 12px; margin-bottom: 8px; }
html.gl .web .site h3 { font-size: clamp(1.8rem, 3.6vw, 3.4rem); font-weight: 300; letter-spacing: -0.04em; line-height: 1.02; }
html.gl .web .site .fav { display: none; }
html.gl .web .site:hover { border-color: transparent; }
html.slab-hover, html.slab-hover * { cursor: pointer; }

/* hero */
html.gl .hero { position: relative; height: auto; min-height: calc(100 * var(--vh)); display: block; padding: 0; }
html.gl .hero .stage__pin { position: absolute; inset: 0; }
html.gl .hero .stage__frame { inset: 9% 1% 7% 52%; }
html.gl .hero__grid { min-height: calc(100 * var(--vh)); padding: calc(var(--bar-h) + 3vh) var(--gutter) clamp(20px, 4vh, 44px); }

/* method: one long runway; the lines light up as you pass through */
html.gl .method { min-height: calc(240 * var(--vh)); padding-block: 0; }
html.gl .method__label { position: sticky; top: calc(var(--bar-h) + 20px); margin: 0; padding-top: 3vh; }
html.gl .method__steps { position: sticky; top: 0; height: calc(100 * var(--vh)); align-content: center; margin-top: -3vh; }
html.gl .method__t { opacity: 0.5; transition: opacity 0.6s var(--ease); }
html.gl .method__step.is-past .method__t { opacity: 0.7; }
html.gl .method__step.is-on .method__t { opacity: 1; }

/* sections that keep the subject behind a wide layout instead of beside it */
html.gl .commits { max-width: var(--max); min-height: calc(130 * var(--vh)); padding-top: 0; padding-bottom: 0; }
html.gl .commits .stage__pin { position: absolute; inset: 0; }
html.gl .commits .stage__frame { inset: 44% 0 4% 0; }
html.gl .commits__copy { position: sticky; top: calc(16 * var(--vh)); }
html.gl .career .stage__copy, html.gl .toolbox .stage__copy, html.gl .contact .stage__copy { padding-block: calc(14 * var(--vh)) calc(12 * var(--vh)); }
/* career and toolbox share their half of the screen with the timeline and the tool logos */
html.gl .career__head { margin-bottom: calc(4 * var(--vh)); }
html.gl .role { grid-template-columns: 1fr; gap: 14px; }
html.gl .toolbox .stage__frame { inset: 6% 0 6% 0; }
html.gl .toolbox__rings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html.gl .toolbox__aside { grid-template-columns: 1fr; }
html.gl .contact .stage__frame { inset: 10% 8% 6% 2%; } /* a margin on the copy side */
html.gl .contact__grid { display: block; }
html.gl .contact__head { margin-bottom: calc(5 * var(--vh)); }
html.gl .note { margin-bottom: calc(5 * var(--vh)); }

/* readability over moving light */
html.gl .stage .step, html.gl .career__head, html.gl .commits__copy, html.gl .toolbox__head, html.gl .contact__head, html.gl .role__what, html.gl .archive__row, html.gl .site__body { text-shadow: 0 0 22px rgba(5, 6, 10, 0.9), 0 0 3px rgba(5, 6, 10, 0.8); }
html.gl .btn:not(.btn--solid), html.gl .chips li { text-shadow: none; background-color: rgba(5, 6, 10, 0.5); }
html.gl .btn { text-shadow: none; }

@media (max-width: 899px) {
  .bar__index span, .bar__calm [data-calm-label] { display: none; }
  .bar__calm { gap: 0; padding: 6px; }
  .bar__cta { padding: 9px 13px; }

  /* one column: the subject stays pinned in the top ~half of the screen, the copy arrives as sheets that slide up
     over it. The blank run in front of each sheet is what lets the subject show. */
  html.gl .stage, html.gl .web { grid-template-columns: minmax(0, 1fr); }
  html.gl .stage__copy, html.gl .case--flip .stage__copy { grid-column: 1; grid-row: 1; padding: 0; z-index: 1; }
  html.gl .stage__pin, html.gl .case--flip .stage__pin { grid-column: 1; grid-row: 1; z-index: 0; }
  html.gl .stage__frame { inset: calc(var(--bar-h) + calc(1 * var(--vh))) 0 auto 0; height: calc(46 * var(--vh)); }
  html.gl .stage .step, html.gl .stage .site { position: relative; isolation: isolate; min-height: 0; justify-content: flex-start; margin: calc(56 * var(--vh)) 0 0; padding: calc(6 * var(--vh)) 0 calc(9 * var(--vh)); }
  html.gl .stage .step--intro { margin-top: calc(54 * var(--vh)); }
  html.gl .stage .step::before { content: ""; position: absolute; z-index: -1; inset: calc(-12 * var(--vh)) -20px 0 -20px; pointer-events: none; background: linear-gradient(to bottom, rgba(5, 6, 10, 0), rgba(5, 6, 10, 0.9) calc(12 * var(--vh))); }
  /* the countries are short, so they come closer together: the globe still shows above each one */
  html.gl .countries .country { min-height: 0; margin-top: calc(22 * var(--vh)); }

  /* long lists that scroll over their subject sit on a sheet too */
  html.gl .career .stage__copy, html.gl .toolbox .stage__copy, html.gl .contact .stage__copy { padding-top: calc(46 * var(--vh)); }
  html.gl .career__head, html.gl .timeline, html.gl .toolbox__head, html.gl .toolbox__rings, html.gl .toolbox__aside, html.gl .contact__head, html.gl .contact__side { position: relative; isolation: isolate; }
  html.gl .timeline { margin-top: calc(8 * var(--vh)); }
  html.gl .career__head::before, html.gl .timeline::before, html.gl .toolbox__head::before, html.gl .toolbox__rings::before, html.gl .toolbox__aside::before, html.gl .contact__head::before, html.gl .contact__side::before { content: ""; position: absolute; z-index: -1; inset: calc(-10 * var(--vh)) -20px calc(-4 * var(--vh)) -20px; pointer-events: none; background: linear-gradient(to bottom, rgba(5, 6, 10, 0), rgba(5, 6, 10, 0.9) calc(10 * var(--vh))); }

  html.gl .hero .stage__frame { inset: calc(var(--bar-h) + calc(1 * var(--vh))) 0 auto 0; height: calc(44 * var(--vh)); }
  html.gl .hero__grid { padding-top: calc(var(--bar-h) + calc(47 * var(--vh))); }
  html.gl .hero__portrait { display: none; }
  html.gl .method__step { font-size: clamp(1.7rem, 8.4vw, 3rem); }
}

/* ---------- 6 · motion preferences ---------- */
html.calm { scroll-behavior: auto; }
html.calm .pulse, html.calm .veil::after, html.calm .btn::after, html.calm .bar__cta::after, html.calm .btn svg, html.calm .bar__cta svg, html.calm .link svg { animation: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pulse, .veil::after, .btn::after, .bar__cta::after, .btn svg, .bar__cta svg, .link svg { animation: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}
@media print {
  #gl, .veil, .bar, .ruler, .loader { display: none !important; }
  body { background: #fff; color: #000; }
}