/* 0x.Dev
   One accent (jade), automatic light/dark, motion only on transform and opacity (plus SVG
   strokes). Shape rule: interactive things are pills, surfaces are 20px, panels inside them 14px.
   Everything that moves is behind prefers-reduced-motion: no-preference. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/BricolageGrotesque-Variable.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Martian Mono";
  src: url("fonts/MartianMono-Variable.woff2") format("woff2");
  font-weight: 100 800;
  font-stretch: 75% 112.5%;
  font-display: swap;
}

:root {
  /* Obsidian, porcelain and jade: cool neutrals, platinum-graded display type, one jewel accent. */
  --bg: #f3f3f1;
  --card: #fafaf9;
  --ink: #0e0f10;
  --muted: #5d5f63;
  --faint: #a7a9ad;
  --line: rgb(14 15 16 / 0.1);
  --soft: rgb(14 15 16 / 0.06);
  --accent: #277a5e;
  --accent-ink: #1f6b52;
  --on-accent: #ffffff;
  --field-ink: rgb(14 15 16 / 0.32);
  --metal: linear-gradient(180deg, #34363a 0%, #0e0f10 62%);
  --shadow: 0 -30px 70px -44px rgb(14 15 16 / 0.42);
  --grain: 0.035;
  --peak: 0.28;
  --hx-line: #16171a;
  --hx-shadow: rgb(14 15 16 / 0.14);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pad: clamp(16px, 4vw, 56px);
  --max: 1400px;
  --sans: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Martian Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #08090a;
    --card: #0f1012;
    --ink: #edebe7;
    --muted: #8d8f94;
    --faint: #4a4c51;
    --line: rgb(237 235 231 / 0.08);
    --soft: rgb(237 235 231 / 0.06);
    --accent: #5bc79e;
    --accent-ink: #74d3ae;
    --on-accent: #08090a;
    --field-ink: rgb(237 235 231 / 0.26);
    --metal: linear-gradient(180deg, #ffffff 0%, #e7e4de 46%, #a3a2a0 100%);
    --shadow: 0 -30px 70px -36px rgb(0 0 0 / 0.95);
    --grain: 0.05;
    --peak: 0.42;
    --hx-shadow: rgb(0 0 0 / 0.6);
    color-scheme: dark;
  }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: var(--grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
h1, h2, h3, p, figure, ol, ul, dl { margin: 0; }
a { color: inherit; }
button { font: inherit; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.mono, .lines { font-family: var(--mono); font-stretch: 87.5%; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip {
  position: absolute; left: 12px; top: -64px; z-index: 200;
  background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: 999px; text-decoration: none;
}
.skip:focus { top: 12px; }
.w { display: inline-block; white-space: nowrap; }
.ch, .fl { display: inline-block; }
/* "0x" is always set in the mono face: its slashed zero keeps it from reading as the letter O. */
.ox { color: var(--accent-ink); font-family: var(--mono); font-stretch: 87.5%; letter-spacing: -0.03em; }
.caret {
  display: inline-block; width: 0.09em; height: 0.8em; margin-left: 0.07em;
  vertical-align: -0.06em; background: var(--accent);
}
.beacon { position: relative; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.beacon::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--accent); opacity: 0; }

/* ---------- top bar ---------- */
.progress {
  position: fixed; top: 0; left: 0; right: 0; z-index: 70; height: 2px;
  background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); display: none;
}
.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; gap: 28px; padding: 13px var(--pad);
}
.bar::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: color-mix(in oklab, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--line);
}
.mark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-size: 18px; font-weight: 720; letter-spacing: -0.03em; }
.mark-hex {
  width: 26px; height: 23px; flex: none;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  background:
    radial-gradient(3px 4.5px at 36% 50%, var(--accent) 92%, transparent),
    radial-gradient(3px 4.5px at 64% 50%, var(--accent) 92%, transparent),
    #17171b;
}
.bar nav { display: flex; gap: 24px; margin-left: auto; font-size: 14px; }
.bar nav a { position: relative; color: var(--muted); text-decoration: none; transition: color 0.25s; }
.bar nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform 0.4s var(--ease);
}
.bar nav a:hover { color: var(--ink); }
.bar nav a:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
.status {
  display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--muted);
  padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px;
}

/* ---------- hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: clip;
  min-height: 100dvh;
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(220px, 27vw, 400px); align-items: end; gap: 40px;
  padding: 120px var(--pad) clamp(40px, 8vh, 88px);
}
.field {
  position: absolute; inset: 0; z-index: -1; display: block; width: 100%; height: 100%;
  -webkit-mask-image: radial-gradient(125% 95% at 78% 36%, #000 30%, transparent 78%);
  mask-image: radial-gradient(125% 95% at 78% 36%, #000 30%, transparent 78%);
}
.hero-copy { max-width: 1100px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.eyebrow::before { content: ""; width: 30px; height: 1px; background: var(--accent); }
.hero h1 {
  margin-top: 22px;
  font-size: clamp(2.7rem, 6.3vw, 7.6rem);
  line-height: 0.95; letter-spacing: -0.048em; font-weight: 640;
}
.hero h1 em { display: block; font-style: normal; font-weight: 290; color: var(--muted); padding-bottom: 0.06em; }
.lede { margin-top: 28px; max-width: 36ch; font-size: clamp(1.06rem, 1.35vw, 1.3rem); color: var(--muted); line-height: 1.5; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 38px; }
.btn {
  display: inline-flex; align-items: center; gap: 14px; height: 56px; padding: 0 10px 0 26px;
  border-radius: 999px; background: var(--ink); color: var(--bg);
  font-size: 16px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: translate 0.5s var(--ease), transform 0.2s var(--ease);
}
.btn i {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 999px;
  background: var(--accent); color: var(--on-accent); font-style: normal; font-size: 17px;
  transform: rotate(90deg); transition: transform 0.45s var(--ease);
}
.btn:hover i { transform: rotate(180deg); }
.btn:active { transform: scale(0.97); }
.link {
  font-size: 15.5px; font-weight: 500; text-decoration: none; padding-bottom: 3px;
  background: linear-gradient(var(--accent), var(--accent)) 0 100% / 100% 1px no-repeat;
  transition: background-size 0.4s var(--ease);
}
.link:hover { background-size: 35% 1px; }
.hero-side { display: flex; flex-direction: column; align-items: flex-end; gap: 26px; }
.hero-hex { position: relative; width: 100%; max-width: 380px; }
.hero-meta {
  list-style: none; padding: 0 0 6px; display: grid; gap: 10px;
  font-size: 12px; color: var(--muted); text-align: right;
}
.hero-meta li span { color: var(--accent-ink); margin-right: 0.7em; }

/* Platinum-graded display type (a quiet metallic fall-off, top to bottom). */
.hero h1 .ch, .sec-head h2, .gallery-head h2, .meet h2, .card h3, .step h3 {
  background: var(--metal); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero h1 em .ch { background: none; -webkit-text-fill-color: currentColor; }

/* ---------- Hex, the mascot ---------- */
.hex { display: block; width: 100%; height: auto; overflow: visible; -webkit-tap-highlight-color: transparent; }
.hex .hx-limb { fill: url(#hxShell); stroke: var(--hx-line); stroke-width: 3; }
.hex .hx-rim { fill: var(--hx-line); stroke: var(--hx-line); stroke-width: 30; stroke-linejoin: round; }
.hex .hx-shell { fill: url(#hxShell); stroke: url(#hxShell); stroke-width: 24; stroke-linejoin: round; }
.hex .hx-visor { fill: url(#hxVisor); stroke: url(#hxVisor); stroke-width: 18; stroke-linejoin: round; }
.hex .hx-gloss { fill: none; stroke: rgb(255 255 255 / 0.13); stroke-width: 6; stroke-linecap: round; }
.hex .hx-panel { fill: #141418; stroke: var(--hx-line); stroke-width: 3; }
.hex .hx-chest { font: 700 15px var(--mono); fill: var(--accent); }
.hex .hx-cursor { fill: var(--accent); }
.hex .hx-stalk { fill: none; stroke: var(--hx-line); stroke-width: 5; stroke-linecap: round; }
.hex .hx-bulb { fill: var(--accent); stroke: var(--hx-line); stroke-width: 3; filter: url(#hxGlow); transition: opacity 0.4s; }
.hex .hx-eyes { filter: url(#hxGlow); }
.hex .eyes-open rect, .hex .eyes-wide .pupil, .hex .m-grin { fill: var(--accent); }
.hex .eyes-happy path, .hex .eyes-closed path { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; }
.hex .eyes-wide circle:not(.pupil) { fill: none; stroke: var(--accent); stroke-width: 5; }
.hex .m-smile, .hex .m-flat, .hex .m-o { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; }
.hex .hx-cheek { fill: #ffffff; opacity: 0.1; transition: opacity 0.3s; }
.hex .hx-shadow { fill: var(--hx-shadow); }
.hex .hx-z { font: 700 22px var(--sans); fill: var(--muted); opacity: 0; transform-box: fill-box; transform-origin: center; }
.hex .hx-bang { font: 800 46px var(--sans); fill: var(--accent); opacity: 0; }

/* expressions: which eyes and mouth show for each mood */
.hex .hx-eyes > *, .hex .hx-mouth > * { opacity: 0; transition: opacity 0.12s; }
.hex .eyes-open, .hex .m-smile { opacity: 1; }
.hex:is([data-mood="happy"], [data-mood="cheer"], [data-mood="pet"], [data-mood="sleep"], [data-mood="bug"]) .eyes-open { opacity: 0; }
.hex:is([data-mood="happy"], [data-mood="cheer"], [data-mood="pet"]) .eyes-happy { opacity: 1; }
.hex[data-mood="sleep"] .eyes-closed { opacity: 1; }
.hex[data-mood="bug"] .eyes-wide { opacity: 1; }
.hex:is([data-mood="happy"], [data-mood="cheer"], [data-mood="wave"], [data-mood="bug"], [data-mood="sleep"]) .m-smile { opacity: 0; }
.hex:is([data-mood="happy"], [data-mood="cheer"], [data-mood="wave"]) .m-grin { opacity: 1; }
.hex[data-mood="bug"] .m-o { opacity: 1; }
.hex[data-mood="sleep"] .m-flat { opacity: 1; }
.hex[data-mood="pet"] .hx-cheek { opacity: 0.3; }
.hex[data-mood="bug"] .hx-bang { opacity: 1; }
.hex[data-mood="sleep"] .hx-bulb { opacity: 0.3; }

/* poses */
.hex .hx-float { transform-box: view-box; transform-origin: 130px 290px; }
.hex .hx-eyes { transform: translate(var(--ex, 0px), var(--ey, 0px)); transition: transform 0.2s ease-out; }
.hex .hx-mouth { transform: translate(calc(var(--ex, 0px) * 0.5), calc(var(--ey, 0px) * 0.5)); transition: transform 0.2s ease-out; }
.hex .hx-head { transform-box: view-box; transform-origin: 130px 196px; transform: rotate(var(--tilt, 0deg)); transition: transform 0.5s var(--ease); }
.hex[data-mood="sleep"] .hx-head { transform: rotate(8deg); }
.hex .eyes-open { transform-box: fill-box; transform-origin: center; transition: transform 0.08s, opacity 0.12s; }
.hex.blink .eyes-open { transform: scaleY(0.1); }
.hex .hx-arm { transform-box: fill-box; transform-origin: 50% 12%; transition: transform 0.45s var(--ease); }
.hex .hx-arm-l { transform: rotate(9deg); }
.hex .hx-arm-r { transform: rotate(-9deg); }
.hex[data-mood="cheer"] .hx-arm-l { transform: rotate(150deg); }
.hex[data-mood="cheer"] .hx-arm-r { transform: rotate(-150deg); }
.hex[data-mood="wave"] .hx-arm-r { transform: rotate(-145deg); }
.hex[data-mood="bug"] .hx-arm-l { transform: rotate(38deg); }
.hex[data-mood="bug"] .hx-arm-r { transform: rotate(-38deg); }

.hx-say {
  position: absolute; z-index: 2; left: -6%; top: 0; max-width: 72%;
  padding: 10px 14px; border-radius: 16px 16px 16px 4px;
  background: var(--ink); color: var(--bg); font: 500 14px/1.35 var(--sans);
  opacity: 0; transform: translateY(6px) scale(0.96); transform-origin: 0 100%;
  transition: opacity 0.3s, transform 0.45s var(--ease); pointer-events: none;
}
.hx-say.on { opacity: 1; transform: none; }
.hx-bit {
  position: absolute; left: 50%; top: 36%; z-index: 3; pointer-events: none;
  font: 700 15px var(--mono); font-stretch: 87.5%; color: var(--accent); white-space: nowrap;
}
.hx-bit.ink { color: var(--ink); }

/* ---------- sections ---------- */
.sec { max-width: var(--max); margin-inline: auto; padding: clamp(96px, 15vh, 180px) var(--pad); }
.sec-head {
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 24px 48px; align-items: end;
  margin-bottom: clamp(44px, 8vh, 96px);
}
.sec-head h2 {
  font-size: clamp(2.2rem, 5.2vw, 4.8rem); line-height: 1; letter-spacing: -0.04em; font-weight: 610;
  max-width: 13ch; text-wrap: balance;
}
.sec-head p { justify-self: end; max-width: 38ch; color: var(--muted); font-size: 1.08rem; }

/* ---------- about ---------- */
.about-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.about-lead { font-size: clamp(1.9rem, 3.6vw, 3.4rem); line-height: 1.08; letter-spacing: -0.035em; font-weight: 520; text-wrap: pretty; }
.ox-word { font-weight: 740; }
.about-side > p { color: var(--muted); font-size: 1.08rem; }
.facts { margin-top: 28px; border-top: 1px solid var(--line); font-size: 12.5px; }
.facts div { display: grid; grid-template-columns: 7.5em 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; display: flex; align-items: center; gap: 8px; }

/* ---------- selected work: horizontal gallery ---------- */
.gallery { position: relative; padding-block: clamp(64px, 10vh, 120px); }
.gallery-pin {
  display: grid; grid-template-columns: minmax(250px, 330px) minmax(0, 1fr); gap: clamp(24px, 3vw, 48px);
  padding-left: var(--pad); align-items: stretch;
}
.gallery-head { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; padding-block: 6px; }
.gallery-head h2 { font-size: clamp(2.4rem, 4.4vw, 4.2rem); line-height: 0.98; letter-spacing: -0.04em; font-weight: 620; }
.gallery-head p { color: var(--muted); margin-top: 18px; max-width: 30ch; }
.gallery-meter { display: grid; gap: 12px; font-size: 12.5px; color: var(--muted); }
.gallery-meter b { color: var(--ink); font-weight: 500; }
.gallery-bar { display: block; width: 100%; height: 2px; overflow: hidden; background: var(--line); }
.gallery-bar i {
  display: block; height: 100%; background: var(--accent); transform-origin: 0 50%;
  transform: scaleX(var(--gal-p, 0.1667)); transition: transform 0.6s var(--ease);
}
.gallery-view {
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scrollbar-width: thin; scrollbar-color: var(--faint) transparent; padding-bottom: 14px;
}
.gallery-track { display: flex; gap: 20px; width: max-content; list-style: none; margin: 0; padding: 0 var(--pad) 0 0; }
.proj {
  flex: none; width: clamp(300px, 34vw, 500px); display: flex; flex-direction: column;
  border-radius: 20px; border: 1px solid var(--line); background: var(--card); overflow: hidden;
  scroll-snap-align: start; transition: border-color 0.4s;
}
.proj:hover { border-color: color-mix(in oklab, var(--accent) 45%, var(--line)); }
.proj-body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 22px 26px 26px; }
.proj-meta { font-size: 11px; color: var(--accent-ink); }
.proj h3 { font-size: clamp(1.5rem, 2.1vw, 2rem); line-height: 1.05; letter-spacing: -0.035em; font-weight: 620; }
.proj-body > p:not(.proj-meta) { color: var(--muted); }
.proj-did { list-style: none; padding: 0; margin-top: 4px; display: grid; gap: 6px; font-size: 14.5px; }
.proj-did li { display: grid; grid-template-columns: 14px 1fr; gap: 6px; }
.proj-did li::before { content: ""; width: 6px; height: 6px; margin-top: 0.6em; border-radius: 50%; background: var(--accent); }
.proj-stack { list-style: none; padding: 10px 0 0; margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; font-size: 11px; }
.proj-stack li { padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); }

/* project covers: small animated diagrams, one idea each */
.cv {
  position: relative; height: clamp(190px, 30vh, 300px); overflow: hidden; container-type: size;
  display: grid; place-items: center; border-bottom: 1px solid var(--line); background: var(--bg);
}
.cv-cap { position: absolute; left: 16px; bottom: 12px; font-size: 10.5px; color: var(--muted); letter-spacing: 0.02em; }

.cv-fan i {
  position: absolute; left: 50%; top: 50%; width: 36cqmin; height: 1px; background: var(--line);
  transform-origin: 0 50%; transform: rotate(calc(var(--k, 0) * 30deg));
}
.cv-fan i::before {
  content: ""; position: absolute; left: -3.5px; top: -3.5px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--accent); opacity: 0;
}
.cv-fan i::after {
  content: ""; position: absolute; right: -6px; top: -6px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--accent); opacity: 0.22;
}
.cv-fan .hub {
  position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px;
  border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 8px color-mix(in oklab, var(--accent) 18%, transparent);
}

.cv-stack { perspective: 900px; }
.cv-stack i {
  position: absolute; left: 50%; top: 56%; width: 50cqmin; height: 32cqmin; margin: -16cqmin 0 0 -25cqmin;
  display: grid; place-items: center; border-radius: 14px; border: 1px solid var(--line); background: var(--card);
  transform: rotateX(58deg) rotateZ(-38deg) translateZ(calc(var(--k, 0) * 22px));
}
.cv-stack i span { font: 500 11px var(--mono); font-stretch: 87.5%; color: var(--muted); }
.cv-stack i:nth-of-type(4) { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 16%, var(--card)); }
.cv-stack i:nth-of-type(4) span { color: var(--accent-ink); }

.cv-match svg { width: 84%; height: 74%; }
.cv-match .pills rect { fill: var(--soft); }
.cv-match .links path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 0; }
.cv-ok { position: absolute; right: 16px; bottom: 12px; font-size: 10.5px; color: var(--accent-ink); }

.lang-doc { width: 62cqw; display: grid; gap: 10px; }
.lang-doc i { display: block; height: 9px; border-radius: 999px; background: var(--soft); transform-origin: 0 50%; }
.lang-doc i:nth-child(1) { width: 70%; height: 15px; margin-bottom: 4px; background: color-mix(in oklab, var(--ink) 22%, transparent); }
.lang-doc i:nth-child(3) { width: 92%; }
.lang-doc i:nth-child(4) { width: 96%; }
.lang-doc i:nth-child(5) { width: 58%; }
.lang-chip {
  position: absolute; right: 16px; top: 14px; height: 26px; padding: 0 11px; overflow: hidden;
  border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 11px;
}
.lang-roll { display: flex; flex-direction: column; }
.lang-roll b { height: 26px; line-height: 26px; font-weight: 600; }

.floor {
  position: relative; width: 74cqw; height: 64cqh; display: grid;
  grid-template-columns: 1.3fr 1fr; grid-template-rows: 1fr 1fr;
  border: 1px solid var(--line); border-radius: 12px;
}
.floor i { margin: 8px; border: 1px dashed var(--line); border-radius: 8px; }
.who { position: absolute; width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: var(--ink); opacity: 0.75; }
.who.w1 { left: 18%; top: 28%; }
.who.w2 { left: 74%; top: 26%; }
.who.w3 { left: 30%; top: 76%; }
.who.agent {
  left: 66%; top: 72%; background: var(--accent); opacity: 1;
  box-shadow: 0 0 0 5px color-mix(in oklab, var(--accent) 22%, transparent);
}

.cv-auto { grid-template-rows: 1fr auto; padding: 18px 0 36px; }
.gauge { width: 40cqmin; height: 40cqmin; transform: rotate(-90deg); }
.gauge circle { fill: none; stroke-width: 9; }
.gauge .g-bg { stroke: var(--soft); }
.gauge .g-fg { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0.22; }
.strip {
  width: 100%; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}
.reel { display: flex; gap: 8px; width: max-content; }
.reel i { width: 44px; height: 30px; border-radius: 6px; border: 1px solid var(--line); background: var(--soft); }
.reel i.a { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 45%, transparent); }

/* ---------- principles: sticky stack ---------- */
.stack { list-style: none; padding: 0 0 6vh; display: grid; gap: 5vh; }
.card { position: sticky; top: calc(92px + var(--k) * 16px); }
.card:nth-child(1) { --k: 0; }
.card:nth-child(2) { --k: 1; }
.card:nth-child(3) { --k: 2; }
.card:nth-child(4) { --k: 3; }
.card:nth-child(5) { --k: 4; }
.card-in {
  position: relative; display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(24px, 4vw, 56px);
  min-height: min(520px, 66vh); padding: clamp(24px, 4vw, 56px);
  border-radius: 20px; border: 1px solid var(--line); background: var(--card);
  box-shadow: var(--shadow); transform-origin: 50% 0;
}
/* Receding cards dim under this veil instead of turning see-through. */
.card-in::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  background: var(--bg); opacity: 0;
}
.card-copy { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; }
.tag { font-size: 12.5px; color: var(--accent-ink); }
.card h3 {
  margin-top: auto; font-size: clamp(2rem, 4.2vw, 3.9rem); line-height: 1; letter-spacing: -0.04em; font-weight: 600;
  max-width: 12ch; text-wrap: balance;
}
.card p { color: var(--muted); max-width: 42ch; font-size: 1.06rem; }

.art {
  position: relative; overflow: hidden; min-height: 220px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--bg);
  display: grid; place-items: center;
}
.trace { list-style: none; padding: 0; display: grid; gap: 12px; font-size: 13px; width: min(86%, 340px); }
.trace li { display: grid; grid-template-columns: 4.6em 1fr; color: var(--muted); opacity: 0.35; }
.trace li span { color: var(--faint); }
.trace li:nth-child(1) { --k: 0; }
.trace li:nth-child(2) { --k: 1; }
.trace li:nth-child(3) { --k: 2; }
.trace li:nth-child(4) { --k: 3; }
.trace li:nth-child(5) { --k: 4; }

.art-rings i { position: absolute; width: calc(48px + var(--k) * 48px); aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--line); }
.art-rings i:nth-child(1) { --k: 0; }
.art-rings i:nth-child(2) { --k: 1; }
.art-rings i:nth-child(3) { --k: 2; }
.art-rings i:nth-child(4) { --k: 3; }
.art-rings::before {
  content: ""; position: absolute; width: 192px; aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(from 0deg, color-mix(in oklab, var(--accent) 55%, transparent), transparent 24%);
}
.art-rings b { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }

.art-slices { grid-auto-flow: column; gap: 10px; align-content: center; justify-content: center; }
.art-slices i { width: 14px; height: 76px; border-radius: 999px; background: var(--soft); transform: translateY(10px); }
.art-slices i:nth-child(1) { --k: 0; }
.art-slices i:nth-child(2) { --k: 1; }
.art-slices i:nth-child(3) { --k: 2; }
.art-slices i:nth-child(4) { --k: 3; }
.art-slices i:nth-child(5) { --k: 4; }
.art-slices i:nth-child(6) { --k: 5; }
.art-slices i:nth-child(7) { --k: 6; }
.art-slices i:nth-child(8) { --k: 7; }
.art-slices i:nth-child(9) { --k: 8; }
.art-slices i::after { content: ""; display: block; height: 100%; border-radius: inherit; background: var(--accent); opacity: 0; }

.art-notes { place-items: start; align-content: center; gap: 12px; padding: 0 12%; }
.art-notes p { font-size: 12.5px; color: var(--accent-ink); margin-bottom: 4px; }
.art-notes i { display: block; height: 8px; border-radius: 999px; background: var(--soft); transform-origin: 0 50%; }
.art-notes i:nth-of-type(1) { width: 92%; --k: 0; }
.art-notes i:nth-of-type(2) { width: 74%; --k: 1; }
.art-notes i:nth-of-type(3) { width: 86%; --k: 2; background: color-mix(in oklab, var(--accent) 55%, transparent); }
.art-notes i:nth-of-type(4) { width: 58%; --k: 3; }
.art-notes i:nth-of-type(5) { width: 80%; --k: 4; }
.art-notes i:nth-of-type(6) { width: 40%; --k: 5; }

.art-loop .orbit { position: absolute; width: 168px; aspect-ratio: 1; border-radius: 50%; border: 1px dashed var(--faint); }
.art-loop .orbit b {
  position: absolute; top: -7px; left: calc(50% - 7px); width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 6px color-mix(in oklab, var(--accent) 22%, transparent);
}
.art-loop span { font-size: 28px; font-weight: 500; letter-spacing: -0.02em; }

/* ---------- marquee ---------- */
.marquee { overflow: clip; border-block: 1px solid var(--line); padding-block: clamp(22px, 4.5vh, 44px); }
.track { display: flex; width: max-content; }
.track ul { display: flex; list-style: none; margin: 0; padding: 0; }
.track li {
  display: flex; align-items: center; white-space: nowrap;
  font-size: clamp(2.4rem, 6.2vw, 5.8rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1.1;
  padding-right: 0.42em;
}
.track li::after { content: ""; width: 0.2em; height: 0.2em; margin-left: 0.42em; border-radius: 50%; background: var(--accent); }
.track li:nth-child(even) { color: transparent; -webkit-text-stroke: 1.2px var(--ink); }

/* ---------- process ---------- */
.route { position: relative; }
.route-line { position: absolute; left: 0; top: 0; width: 100%; height: 94px; overflow: visible; }
.route-line path { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.route-line .ghost { stroke: var(--line); }
.route-line .draw { stroke: var(--accent); stroke-dasharray: 1; stroke-dashoffset: 0; }
.steps { position: relative; list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.step { position: relative; padding-top: 112px; }
.step:nth-child(1) { --k: 0; }
.step:nth-child(2) { --k: 1; }
.step:nth-child(3) { --k: 2; }
.step:nth-child(4) { --k: 3; }
.node {
  position: absolute; top: 37px; left: -10px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--accent);
}
.node::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--accent); }
.step h3 { font-size: clamp(1.8rem, 3.2vw, 2.9rem); line-height: 1; letter-spacing: -0.04em; font-weight: 600; }
.step p { margin-top: 14px; max-width: 30ch; color: var(--muted); }

/* ---------- ship log: deploy heatmap fed by deployments.json ---------- */
.ship-panel {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(30px, 4vw, 48px);
  padding: clamp(22px, 3.2vw, 44px); border-radius: 20px; border: 1px solid var(--line); background: var(--card);
}
html:not(.js) .ship-panel { display: none; }
.ship-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ship-stats > div { padding: 2px clamp(16px, 2.4vw, 32px); border-left: 1px solid var(--line); cursor: default; }
.ship-stats > div:first-child { padding-left: 0; border-left: 0; }
.ship-stats dt { font-size: 11.5px; color: var(--muted); }
.ship-stats dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 6px 0 0; }
.ship-stats b {
  min-width: 2ch; font-size: clamp(2.3rem, 4.4vw, 4.2rem); line-height: 1; letter-spacing: -0.045em; font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: var(--metal); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  transition: -webkit-text-fill-color 0.3s;
}
.ship-stats > div:hover b { -webkit-text-fill-color: var(--accent-ink); }
.ship-stats b:empty::before {
  content: ""; display: inline-block; width: 3.2ch; height: 0.78em; border-radius: 8px; background: var(--soft);
}
.ship-stats small { font-size: 11px; color: var(--muted); }
.ship-stats b:empty + small { visibility: hidden; }

.hm-wrap { position: relative; min-width: 0; display: grid; gap: 26px; padding-top: clamp(28px, 3.6vw, 44px); border-top: 1px solid var(--line); }
.hm {
  --gap: clamp(3px, 0.42vw, 6px);
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; gap: 10px 12px;
}
.hm-months, .hm-grid { grid-column: 2; display: grid; grid-template-columns: repeat(var(--weeks, 26), minmax(0, 1fr)); column-gap: var(--gap); }
.hm-months { height: 1.5em; font-size: 10.5px; color: var(--muted); }
.hm-months span { white-space: nowrap; }
.hm-days { grid-row: 2; display: grid; grid-template-rows: repeat(7, minmax(0, 1fr)); row-gap: var(--gap); font-size: 10.5px; color: var(--muted); }
.hm-days span { display: flex; align-items: center; line-height: 1; }
.hm-days span:nth-child(1) { grid-row: 1; }
.hm-days span:nth-child(2) { grid-row: 3; }
.hm-days span:nth-child(3) { grid-row: 5; }
.hm-grid { grid-row: 2; grid-auto-flow: column; grid-template-rows: repeat(7, auto); row-gap: var(--gap); }
.hm-grid i {
  position: relative; aspect-ratio: 1; border-radius: 24%; background: var(--soft);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.hm-grid i:hover { box-shadow: 0 0 0 1.5px var(--card), 0 0 0 3px var(--ink); }
.hm-grid i.today { box-shadow: 0 0 0 1.5px var(--card), 0 0 0 3px var(--accent); }
.hm-grid i.today::after { content: ""; position: absolute; inset: -3px; border-radius: 30%; border: 1.5px solid var(--accent); opacity: 0; }
.hm-grid.dim i:not(.hl) { opacity: 0.14; }
.hm-grid.dim i.hl { transform: scale(1.08); }
.hm-grid .l1, .hm-legend .l1 { background: color-mix(in oklab, var(--accent) 32%, var(--card)); }
.hm-grid .l2, .hm-legend .l2 { background: color-mix(in oklab, var(--accent) 56%, var(--card)); }
.hm-grid .l3, .hm-legend .l3 { background: color-mix(in oklab, var(--accent) 80%, var(--card)); }
.hm-grid .l4, .hm-legend .l4 { background: var(--accent); }

.hm-tip {
  position: absolute; left: 0; top: 0; z-index: 3; margin: 0; padding: 9px 13px; pointer-events: none;
  border-radius: 14px; background: var(--ink); color: var(--bg); font-size: 10.5px; line-height: 1.55; white-space: nowrap;
  transform: translate(-50%, calc(-100% - 12px)); opacity: 0; transition: opacity 0.18s;
}
.hm-tip.on { opacity: 1; }
.hm-tip b { display: block; font: 600 14px/1.3 var(--sans); letter-spacing: -0.01em; }
.hm-tip span { display: block; opacity: 0.62; }

.hm-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; font-size: 11px; color: var(--muted); }
.hm-last { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.hm-mix { text-wrap: balance; }
.ship-panel.err .hm-last .beacon { background: var(--faint); }
.ship-panel.err .hm-last .beacon::after { animation: none; }
.hm-legend { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.hm-legend i { width: 11px; height: 11px; border-radius: 3px; background: var(--soft); }
.hm-legend i:first-of-type { margin-left: 6px; }
.hm-legend i:last-of-type { margin-right: 6px; }

@media (prefers-reduced-motion: no-preference) {
  .hm-grid.loading i { animation: skel 1.8s ease-in-out infinite; animation-delay: calc(var(--x, 0) * 40ms); }
  .js .hm-grid:not(.go):not(.loading) i { opacity: 0; }
  .hm-grid.go i { animation: cellIn 0.8s var(--ease) backwards; animation-delay: calc(var(--x) * 16ms + var(--y) * 38ms); }
  .hm-grid.go i.today::after { animation: cellPing 2.4s var(--ease) 1.6s infinite; }
  .hm-tip.on { transition: opacity 0.18s, translate 0.16s var(--ease); }
}
@keyframes skel { 50% { opacity: 0.35; } }
@keyframes cellIn { from { opacity: 0; transform: scale(0.3); } }
@keyframes cellPing { 0% { transform: scale(1); opacity: 0.8; } 70%, 100% { transform: scale(1.7); opacity: 0; } }

@media (max-width: 880px) {
  .ship-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; }
  .ship-stats > div:nth-child(odd) { padding-left: 0; border-left: 0; }
}
@media (max-width: 600px) {
  /* The grid keeps a readable cell size and scrolls sideways; site.js starts it on the latest weeks. */
  .hm-scroll { overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  .hm-scroll::-webkit-scrollbar { display: none; }
  .hm { --gap: 3px; width: max-content; padding-right: 10px; }
  .hm-months, .hm-grid { grid-template-columns: repeat(var(--weeks, 26), 13px); }
  .ship-stats b { font-size: 1.9rem; }
  .hm-legend { margin-left: 0; }
}

/* ---------- what I do: bento ---------- */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.tile {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px;
  min-height: 300px; padding: 28px; border-radius: 20px; border: 1px solid var(--line); background: var(--card);
  transition: border-color 0.4s;
}
.tile:hover { border-color: color-mix(in oklab, var(--accent) 45%, var(--line)); }
.tile h3 { font-size: clamp(1.45rem, 2vw, 1.95rem); line-height: 1.1; letter-spacing: -0.03em; font-weight: 600; }
.tile p { max-width: 46ch; color: var(--muted); }
.viz { position: relative; flex: 1; min-height: 130px; margin-bottom: 16px; }
.t-platforms { grid-column: span 4; grid-row: span 2; }
.t-pay, .t-infra { grid-column: span 2; }
.t-agents, .t-rt { grid-column: span 3; }

.tiles { display: grid; grid-template-columns: repeat(var(--cols, 22), minmax(0, 1fr)); gap: 5px; align-content: center; min-height: 240px; }
.tiles i { aspect-ratio: 1; border-radius: 3px; background: var(--ink); opacity: 0.07; }
.tiles i.a { background: var(--accent); opacity: 0.22; --peak: 0.95; }

.bars { display: flex; align-items: flex-end; gap: 8px; }
.bars i {
  flex: 1; height: 100%; border-radius: 6px 6px 3px 3px; background: var(--soft);
  transform-origin: 50% 100%; transform: scaleY(var(--h));
}
.bars i:nth-child(1) { --h: 0.34; --k: 0; }
.bars i:nth-child(2) { --h: 0.52; --k: 1; }
.bars i:nth-child(3) { --h: 0.41; --k: 2; }
.bars i:nth-child(4) { --h: 0.66; --k: 3; }
.bars i:nth-child(5) { --h: 0.58; --k: 4; }
.bars i:nth-child(6) { --h: 0.8; --k: 5; }
.bars i:nth-child(7) { --h: 0.96; --k: 6; background: var(--accent); }

.pulse svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pulse path { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.pulse .base { stroke: var(--line); }
.pulse .beat { stroke: var(--accent); stroke-dasharray: 0.22 1; stroke-dashoffset: -0.3; }
.pulse span { position: absolute; right: 0; top: 0; font-size: 11px; color: var(--accent-ink); }

.pipe { display: grid; align-items: center; }
.rail { position: relative; container-type: inline-size; display: flex; justify-content: space-between; font-size: 11.5px; }
.rail::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line); }
.rail span {
  position: relative; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--card); color: var(--muted);
}
.rail span::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; opacity: 0;
  border: 1px solid var(--accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 16%, transparent);
}
.rail span:nth-of-type(1) { --k: 0; }
.rail span:nth-of-type(2) { --k: 1; }
.rail span:nth-of-type(3) { --k: 2; }
.rail span:nth-of-type(4) { --k: 3; }
.rail b {
  position: absolute; z-index: 1; left: 0; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 5px color-mix(in oklab, var(--accent) 25%, transparent); opacity: 0;
}

.chat { display: grid; align-content: center; gap: 10px; }
.chat i { display: block; height: 30px; border-radius: 999px; background: var(--soft); }
.chat i.l { width: 58%; }
.chat i.r { width: 44%; justify-self: end; background: color-mix(in oklab, var(--accent) 40%, transparent); }
.chat i.s { width: 34%; }
.chat i:nth-of-type(1) { --k: 0; }
.chat i:nth-of-type(2) { --k: 1; }
.chat i:nth-of-type(3) { --k: 2; }
.typing { display: inline-flex; gap: 5px; padding: 10px 14px; border-radius: 999px; background: var(--soft); width: max-content; justify-self: end; }
.typing b { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.typing b:nth-child(1) { --k: 0; }
.typing b:nth-child(2) { --k: 1; }
.typing b:nth-child(3) { --k: 2; }

/* ---------- meet Hex ---------- */
.meet-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.meet h2 { font-size: clamp(2.6rem, 6vw, 5.6rem); line-height: 0.95; letter-spacing: -0.045em; font-weight: 640; }
.meet-copy > p { margin-top: 22px; max-width: 40ch; color: var(--muted); font-size: 1.12rem; }
.meet-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.chip {
  height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); font-size: 15px; font-weight: 500; cursor: pointer;
  transition: border-color 0.25s, background-color 0.25s, color 0.25s, transform 0.2s var(--ease);
}
.chip:hover { border-color: var(--accent); }
.chip:active { transform: scale(0.97); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.meet-copy > .meet-hint { margin-top: 16px; font-size: 11.5px; color: var(--muted); }
.meet-stage {
  position: relative; isolation: isolate; overflow: hidden; min-height: 520px;
  display: grid; place-items: center; padding: 64px 24px 28px;
  border-radius: 20px; border: 1px solid var(--line);
  background:
    radial-gradient(60% 55% at 50% 44%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 70%),
    radial-gradient(circle, var(--soft) 1px, transparent 1.5px) 0 0 / 22px 22px,
    var(--card);
}
.meet-stage::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 0.8s var(--ease);
  background: radial-gradient(circle, rgb(255 255 255 / 0.35) 1px, transparent 1.5px) 11px 7px / 44px 37px, #07070a;
}
.meet-stage.night::after { opacity: 0.9; }
.meet-stage.night .hx-say { background: #f1f1f0; color: #111113; }
.stage-hex { position: relative; width: min(330px, 76%); cursor: pointer; }
.stage-hex .hx-say { left: -18%; top: -9%; }

/* ---------- defaults ---------- */
.defaults-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.code { border-radius: 20px; border: 1px solid var(--line); background: var(--card); overflow: hidden; }
.code figcaption {
  display: flex; align-items: center; gap: 10px; padding: 14px 20px;
  border-bottom: 1px solid var(--line); font-size: 11.5px; color: var(--muted);
}
.code figcaption::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.lines { list-style: none; margin: 0; padding: 20px 0; overflow-x: auto; counter-reset: ln; font-size: 13.5px; line-height: 1.9; }
.lines li { counter-increment: ln; white-space: pre; padding-right: 24px; }
.lines li::before { content: counter(ln); display: inline-block; width: 3.4em; padding-right: 1.3em; text-align: right; color: var(--faint); }
.lines .k { color: var(--ink); }
.lines .p, .lines .c { color: var(--muted); }
.lines .v { color: var(--accent-ink); }
.lines .caret { height: 1.1em; width: 0.55em; vertical-align: -0.2em; margin-left: 0.3em; opacity: 0.85; }
.together h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); letter-spacing: -0.03em; font-weight: 600; margin-bottom: 22px; }
.together ul { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.together li {
  display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 20px 0;
  border-bottom: 1px solid var(--line); font-size: 1.08rem; transition: translate 0.45s var(--ease);
}
.together li::before { content: ""; width: 8px; height: 8px; margin-top: 0.62em; border-radius: 50%; background: var(--accent); }
.together li:hover { translate: 6px 0; }

/* ---------- manifesto ---------- */
.manifesto { padding: clamp(96px, 16vh, 200px) var(--pad); }
.manifesto p {
  max-width: 1160px; margin-inline: auto;
  font-size: clamp(2rem, 4.9vw, 4.7rem); line-height: 1.07; letter-spacing: -0.04em; font-weight: 560;
}
.mw.hot { color: var(--accent-ink); }

/* ---------- footer ---------- */
.foot { padding: clamp(84px, 14vh, 168px) var(--pad) 32px; border-top: 1px solid var(--line); }
.foot-line {
  max-width: var(--max); margin: 0 auto;
  font-size: clamp(1.4rem, 2.6vw, 2.4rem); letter-spacing: -0.03em; font-weight: 520; color: var(--muted);
}
.foot-mark {
  max-width: var(--max); margin: 14px auto 0; display: flex; align-items: flex-end; gap: 2vw;
  border-bottom: 1px solid var(--line);
}
.foot-big {
  position: relative; font-size: clamp(4.4rem, 19vw, 19rem); line-height: 0.8;
  letter-spacing: -0.065em; font-weight: 740; padding-bottom: 0.03em;
}
.foot-big .ox { color: var(--accent); font-stretch: 75%; font-weight: 700; letter-spacing: -0.07em; }
.fl { transition: translate 0.6s var(--ease), color 0.3s; }
.fl.near { color: var(--accent); }
.foot-hex {
  --peek-w: clamp(96px, 15vw, 220px);
  flex: none; width: var(--peek-w); height: calc(var(--peek-w) * 0.66); margin-left: auto; overflow: hidden;
}
.foot-row {
  max-width: var(--max); margin: 28px auto 0;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 28px;
  font-size: 11.5px; color: var(--muted);
}
.foot-row a { text-decoration: none; }
.foot-row a:hover { color: var(--ink); }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  .beacon::after { animation: ping 2.2s var(--ease) infinite; }
  .caret { animation: blink 1.1s steps(1) infinite; }

  /* hero entrance: letters are split by site.js; the failsafe shows the heading if that never happens */
  .js .hero h1:not(.split) { opacity: 0; animation: show 0s 1.2s forwards; }
  .js .hero h1 .ch {
    opacity: 0; transform: translateY(0.42em) rotate(7deg);
    animation: rise 0.95s var(--ease) forwards; animation-delay: calc(120ms + var(--i) * 24ms);
  }
  .js .hero .late { opacity: 0; transform: translateY(14px); animation: rise 1s var(--ease) 0.95s forwards; }
  .js .hero .hero-side.late { animation-delay: 0.5s; }

  /* reveal on view (site.js adds .ready, then .in per element) */
  .ready [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
  .ready [data-stagger] > [data-reveal] { transition-delay: calc(var(--d, 0) * 90ms); }
  .ready [data-reveal].in { opacity: 1; transform: none; }
  .ready .code .lines li { opacity: 0; translate: -10px 0; transition: opacity 0.5s var(--ease), translate 0.5s var(--ease); transition-delay: calc(250ms + var(--d, 0) * 70ms); }
  .ready .code.in .lines li { opacity: 1; translate: 0 0; }
  .ready .together ul li { opacity: 0; transition: opacity 0.6s var(--ease), translate 0.45s var(--ease); transition-delay: calc(300ms + var(--d, 0) * 110ms); }
  .ready .together.in ul li { opacity: 1; }

  .track { animation: slide 46s linear infinite; }
  .marquee:hover .track { animation-play-state: paused; }

  /* ambient pieces only run while on screen (site.js toggles .live) */
  [data-ambient] *, [data-ambient]::before, [data-ambient]::after,
  [data-ambient] *::before, [data-ambient] *::after { animation-play-state: paused !important; }
  [data-ambient].live *, [data-ambient].live::before, [data-ambient].live::after,
  [data-ambient].live *::before, [data-ambient].live *::after { animation-play-state: running !important; }

  /* Hex */
  .hex .hx-float { animation: hxBob 3.4s ease-in-out infinite; }
  .hex .hx-shadow { transform-box: fill-box; transform-origin: center; animation: hxShadow 3.4s ease-in-out infinite; }
  .hex .hx-antenna { transform-box: fill-box; transform-origin: 10% 100%; animation: hxSway 2.9s ease-in-out infinite; }
  .hex .hx-bulb { animation: hxBulb 1.8s ease-in-out infinite; }
  .hex .hx-cursor { animation: blink 1.1s steps(1) infinite; }
  .hex[data-mood="wave"] .hx-arm-r { animation: hxWave 0.5s ease-in-out infinite; }
  .hex[data-mood="cheer"] .hx-float { animation: hxHop 0.6s var(--ease) infinite; }
  .hex[data-mood="bug"] .hx-float { animation: hxShake 0.32s linear infinite; }
  .hex[data-mood="bug"] .hx-bang { animation: blink 0.5s steps(1) infinite; }
  .hex[data-mood="sleep"] .hx-float { animation-duration: 5.5s; }
  .hex[data-mood="sleep"] .hx-bulb { animation: none; }
  .hex[data-mood="sleep"] .hx-z { animation: hxZ 2.7s ease-in infinite; }
  .hex[data-mood="sleep"] .hx-z2 { animation-delay: 0.9s; }
  .hex[data-mood="sleep"] .hx-z3 { animation-delay: 1.8s; }
  .hex[data-mood="pet"] .hx-float { animation: hxSquish 0.55s var(--ease) 1; }

  /* principles */
  .trace li { animation: traceLine 5s var(--ease) infinite; animation-delay: calc(var(--k) * 0.6s); }
  .art-rings::before { animation: spin 5.5s linear infinite; }
  .art-rings b { animation: core 2.75s var(--ease) infinite; }
  .art-slices i { animation: sliceUp 6.3s var(--ease) infinite; animation-delay: calc(var(--k) * 0.45s); }
  .art-slices i::after { animation: sliceLit 6.3s var(--ease) infinite; animation-delay: calc(var(--k) * 0.45s); }
  .art-notes i { transform: scaleX(0); animation: writeLine 6.5s var(--ease) infinite; animation-delay: calc(var(--k) * 0.45s); }
  .art-loop .orbit { animation: spin 6s linear infinite; }

  /* project covers */
  .cv-fan i::before { animation: fanDot 3.6s var(--ease) infinite; animation-delay: calc(var(--k, 0) * 0.3s); }
  .cv-fan i::after { animation: fanHit 3.6s linear infinite; animation-delay: calc(var(--k, 0) * 0.3s); }
  .cv-fan .hub { animation: core 1.8s var(--ease) infinite; }
  .cv-stack i { animation: layer 5s var(--ease) infinite; animation-delay: calc(var(--k, 0) * 0.1s); }
  .cv-match .links path { stroke-dashoffset: 1; animation: matchDraw 6s var(--ease) infinite; }
  .cv-match .links path:nth-child(2) { animation-delay: 0.45s; }
  .cv-match .links path:nth-child(3) { animation-delay: 0.9s; }
  .cv-match .links path:nth-child(4) { animation-delay: 1.35s; }
  .cv-match .links path:nth-child(5) { animation-delay: 1.8s; }
  .cv-ok { animation: okIn 6s linear infinite; }
  .lang-roll { animation: langRoll 10s var(--ease) infinite; }
  .lang-doc i { animation: retype 2s var(--ease) infinite; animation-delay: calc(var(--k, 0) * 0.08s); }
  .who.w1 { animation: walk1 9s ease-in-out infinite; }
  .who.w2 { animation: walk2 11s ease-in-out infinite; }
  .who.w3 { animation: walk3 10s ease-in-out infinite; }
  .who.agent { animation: walkAgent 8s ease-in-out infinite; }
  .gauge .g-fg { animation: gauge 6s var(--ease) infinite; }
  .reel { animation: slide 12s linear infinite; }

  /* bento */
  .tiles i { animation: wave 6s ease-in-out infinite; animation-delay: calc(var(--d, 0) * 120ms); }
  .bars i { animation: bar 5.5s var(--ease) infinite; animation-delay: calc(var(--k) * 0.12s); }
  .pulse .beat { animation: beat 2.6s linear infinite; }
  .rail b { animation: travel 4.8s linear infinite; }
  .rail span::after { animation: stop 4.8s linear infinite; animation-delay: calc(var(--k) * 1.6s - 0.1s); }
  .chat i { opacity: 0; animation: pop 6s var(--ease) infinite; animation-delay: calc(var(--k) * 0.9s); }
  .typing { opacity: 0; animation: pop 6s var(--ease) 2.7s infinite; }
  .typing b { animation: dot 1s ease-in-out infinite; animation-delay: calc(var(--k) * 0.15s); }

  /* without scroll-driven animation support: draw on reveal */
  .ready:not(.sda) .route-line .draw { stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--ease) 0.2s; }
  .ready:not(.sda) .route.in .route-line .draw { stroke-dashoffset: 0; }
  .ready:not(.sda) .manifesto .mw { opacity: 0.14; transition: opacity 0.6s var(--ease); transition-delay: calc(var(--d, 0) * 45ms); }
  .ready:not(.sda) .manifesto.in .mw { opacity: 1; }

  /* scroll-driven (Chrome, Edge, Safari 26+) */
  .sda .progress { display: block; animation: grow linear both; animation-timeline: scroll(root block); }

  .sda .stack { timeline-scope: --c2, --c3, --c4, --c5; }
  .sda .card:nth-child(2) { view-timeline-name: --c2; }
  .sda .card:nth-child(3) { view-timeline-name: --c3; }
  .sda .card:nth-child(4) { view-timeline-name: --c4; }
  .sda .card:nth-child(5) { view-timeline-name: --c5; }
  .sda .card:nth-child(1) .card-in, .sda .card:nth-child(1) .card-in::after { animation-timeline: --c2; }
  .sda .card:nth-child(2) .card-in, .sda .card:nth-child(2) .card-in::after { animation-timeline: --c3; }
  .sda .card:nth-child(3) .card-in, .sda .card:nth-child(3) .card-in::after { animation-timeline: --c4; }
  .sda .card:nth-child(4) .card-in, .sda .card:nth-child(4) .card-in::after { animation-timeline: --c5; }
  .sda .card:not(:last-child) .card-in { animation-name: recede; animation-timing-function: linear; animation-fill-mode: both; animation-range: entry 0% entry 100%; }
  .sda .card:not(:last-child) .card-in::after { animation-name: veil; animation-timing-function: linear; animation-fill-mode: both; animation-range: entry 0% entry 100%; }

  .sda .route { view-timeline: --route block; }
  .sda .route-line .draw { animation: draw linear both; animation-timeline: --route; animation-range: cover 14% cover 50%; }
  .sda .step {
    animation: stepIn linear both; animation-timeline: --route;
    animation-range: cover calc(12% + var(--k) * 9%) cover calc(21% + var(--k) * 9%);
  }

  .sda .manifesto { height: 250vh; padding: 0; view-timeline: --mf block; }
  .sda .manifesto .stick { position: sticky; top: 0; min-height: 100dvh; display: grid; place-items: center; padding: 0 var(--pad); }
  .sda .manifesto .mw { animation: lit linear both; animation-timeline: --mf; }
}

/* Pinned horizontal gallery: vertical scroll drives the track sideways (site.js measures --travel). */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .sda .gallery { height: calc(100vh + var(--travel, 0px)); padding: 0; view-timeline: --gal block; }
  .sda .gallery-pin { position: sticky; top: 0; height: 100vh; padding-top: 104px; padding-bottom: 48px; align-items: stretch; }
  .sda .gallery-view {
    overflow: hidden; scroll-snap-type: none; padding-bottom: 0; display: flex; align-items: center;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 72px);
    mask-image: linear-gradient(90deg, transparent, #000 72px);
  }
  .sda .gallery-track { animation: galSlide linear both; animation-timeline: --gal; animation-range: contain 0% contain 100%; }
}

@keyframes show { to { opacity: 1; } }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes ping { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(3.2); opacity: 0; } }
@keyframes slide { to { transform: translateX(-50%); } }
@keyframes spin { to { transform: rotate(1turn); } }
@keyframes core { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3); } }
@keyframes hxBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes hxShadow { 0%, 100% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(0.84); opacity: 0.55; } }
@keyframes hxSway { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(7deg); } }
@keyframes hxBulb { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@keyframes hxWave { 0%, 100% { transform: rotate(-128deg); } 50% { transform: rotate(-168deg); } }
@keyframes hxHop { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-26px); } }
@keyframes hxShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px) rotate(-1deg); } 75% { transform: translateX(4px) rotate(1deg); } }
@keyframes hxZ { 0% { opacity: 0; transform: translate(0, 0) scale(0.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(14px, -30px) scale(1.15); } }
@keyframes hxSquish { 0% { transform: scale(1); } 30% { transform: scale(1.07, 0.92); } 60% { transform: scale(0.97, 1.04); } 100% { transform: scale(1); } }
@keyframes traceLine {
  0% { opacity: 0.35; transform: none; }
  6%, 30% { opacity: 1; transform: translateX(6px); }
  42%, 100% { opacity: 0.35; transform: none; }
}
@keyframes sliceUp { 0%, 100% { transform: translateY(10px); } 8%, 72% { transform: translateY(-6px); } }
@keyframes sliceLit { 0%, 3% { opacity: 0; } 9%, 70% { opacity: 1; } 80%, 100% { opacity: 0; } }
@keyframes writeLine { 0% { transform: scaleX(0); opacity: 1; } 14%, 80% { transform: scaleX(1); opacity: 1; } 92%, 100% { transform: scaleX(1); opacity: 0; } }
@keyframes fanDot { 0% { transform: translateX(0); opacity: 0; } 8% { opacity: 1; } 55% { transform: translateX(36cqmin); opacity: 1; } 62%, 100% { transform: translateX(36cqmin); opacity: 0; } }
@keyframes fanHit { 0%, 52% { opacity: 0.22; } 58% { opacity: 1; } 85%, 100% { opacity: 0.22; } }
@keyframes layer {
  0%, 100% { transform: rotateX(58deg) rotateZ(-38deg) translateZ(calc(var(--k, 0) * 14px)); }
  50% { transform: rotateX(58deg) rotateZ(-38deg) translateZ(calc(var(--k, 0) * 34px)); }
}
@keyframes matchDraw { 0% { stroke-dashoffset: 1; opacity: 1; } 14% { stroke-dashoffset: 0; } 82% { stroke-dashoffset: 0; opacity: 1; } 92%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes okIn { 0%, 45% { opacity: 0; } 52%, 82% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes langRoll {
  0%, 16% { transform: translateY(0); }
  20%, 36% { transform: translateY(-26px); }
  40%, 56% { transform: translateY(-52px); }
  60%, 76% { transform: translateY(-78px); }
  80%, 96% { transform: translateY(-104px); }
  100% { transform: translateY(-130px); }
}
@keyframes retype { 0% { transform: scaleX(0); } 30%, 100% { transform: scaleX(1); } }
@keyframes walk1 { 0%, 16% { transform: translate(0, 0); } 30%, 50% { transform: translate(32cqw, 6cqh); } 64%, 84% { transform: translate(26cqw, 30cqh); } 100% { transform: translate(0, 0); } }
@keyframes walk2 { 0%, 20% { transform: translate(0, 0); } 36%, 58% { transform: translate(-22cqw, 30cqh); } 74%, 90% { transform: translate(-40cqw, 4cqh); } 100% { transform: translate(0, 0); } }
@keyframes walk3 { 0%, 24% { transform: translate(0, 0); } 40%, 62% { transform: translate(26cqw, -32cqh); } 78%, 92% { transform: translate(8cqw, -6cqh); } 100% { transform: translate(0, 0); } }
@keyframes walkAgent { 0%, 12% { transform: translate(0, 0); } 25%, 37% { transform: translate(-30cqw, -28cqh); } 50%, 62% { transform: translate(4cqw, -30cqh); } 75%, 87% { transform: translate(-28cqw, 0); } 100% { transform: translate(0, 0); } }
@keyframes gauge { 0% { stroke-dashoffset: 1; } 60%, 85% { stroke-dashoffset: 0.22; } 100% { stroke-dashoffset: 1; } }
@keyframes wave { 0%, 22%, 100% { opacity: 0.07; transform: scale(0.8); } 10% { opacity: var(--peak); transform: scale(1); } }
@keyframes bar { 0% { transform: scaleY(0.06); } 28%, 82% { transform: scaleY(var(--h)); } 100% { transform: scaleY(0.06); } }
@keyframes beat { from { stroke-dashoffset: 0.22; } to { stroke-dashoffset: -1; } }
@keyframes travel { 0% { transform: translateX(0); opacity: 0; } 4%, 92% { opacity: 1; } 100% { transform: translateX(100cqw); opacity: 0; } }
@keyframes stop { 0%, 100% { opacity: 0; } 4%, 14% { opacity: 1; } 26% { opacity: 0; } }
@keyframes pop {
  0% { opacity: 0; transform: translateY(8px) scale(0.96); }
  8%, 78% { opacity: 1; transform: none; }
  90%, 100% { opacity: 0; transform: none; }
}
@keyframes dot { 0%, 100% { transform: translateY(0); opacity: 0.5; } 40% { transform: translateY(-4px); opacity: 1; } }
@keyframes grow { to { transform: scaleX(1); } }
@keyframes recede { to { transform: scale(0.94); } }
@keyframes veil { to { opacity: 0.82; } }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes stepIn { from { opacity: 0.18; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes lit { from { opacity: 0.14; } to { opacity: 1; } }
@keyframes galSlide { to { transform: translateX(calc(-1 * var(--travel, 0px))); } }
@keyframes growY { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t-platforms { grid-column: span 2; grid-row: auto; }
  .t-pay, .t-infra, .t-agents, .t-rt { grid-column: span 1; }
}
@media (max-width: 899px) {
  .gallery-pin { grid-template-columns: minmax(0, 1fr); padding-right: 0; }
  .gallery-head { padding-right: var(--pad); }
  .gallery-view { margin-left: calc(-1 * var(--pad)); padding-left: var(--pad); scroll-padding-left: var(--pad); }
  .proj { width: min(84vw, 440px); }
}
@media (max-width: 880px) {
  .bar nav { display: none; }
  .status { margin-left: auto; }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 96px; }
  .hero-side { order: -1; flex-direction: row-reverse; justify-content: space-between; align-items: flex-end; }
  .hero-hex { width: 150px; }
  .hero-hex .hx-say { display: none; }
  .hero-meta { text-align: left; }
  .sec-head, .about-grid, .meet-grid { grid-template-columns: minmax(0, 1fr); }
  .sec-head p { justify-self: start; }
  .card { top: calc(76px + var(--k) * 12px); }
  .card-in { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .art { min-height: 180px; }
  .defaults-grid { grid-template-columns: minmax(0, 1fr); }
  .meet-stage { min-height: 420px; }
}
@media (max-width: 760px) {
  .route-line { display: none; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-left: 34px; }
  .steps::before {
    content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px;
    background: var(--accent); transform-origin: 50% 0;
  }
  .step { padding-top: 0; }
  .node { top: 4px; left: -44px; }
  @media (prefers-reduced-motion: no-preference) {
    .sda .steps { view-timeline: --steps block; }
    .sda .steps::before { animation: growY linear both; animation-timeline: --steps; animation-range: cover 10% cover 70%; }
    .sda .step { animation-timeline: view(); animation-range: entry 20% cover 35%; }
  }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .t-platforms, .t-pay, .t-infra, .t-agents, .t-rt { grid-column: auto; }
  .tiles { min-height: 0; }
  .tile { min-height: 260px; padding: 22px; }
  .lines { font-size: 10.5px; font-stretch: 75%; }
  .lines li::before { width: 2.6em; padding-right: 0.9em; }
  .status { display: none; }
  .bar nav + .status { display: none; }
  .foot-mark { gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .track { flex-wrap: wrap; width: auto; }
  .track ul + ul { display: none; }
  .track ul { flex-wrap: wrap; padding-inline: var(--pad); }
}