/* ==========================================================================
   Hussein Muhammad: personal site
   Order: fonts, tokens, base, header, hero, trace, sections, footer, motion,
          responsive (<=860px), reduced motion, print
   ========================================================================== */

@font-face {
  font-family: "Manrope";
  src: url(/assets/manrope-latin-wght.a30ddcd349.woff2) format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url(/assets/plex-mono-latin-400.08949f728d.woff2) format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- design tokens ---------- */
:root {
  color-scheme: dark;
  --vh: 1vh;

  /* colour: charcoal and graphite, gold as accent only */
  --bg-deep: #0f1215;
  --bg: #161a1e;
  --surface: #1b1e21;
  --surface-elevated: #26282a;
  --text-primary: #f1efea;
  --text-secondary: #aaa79f;
  --text-muted: #8a8b85;
  --ivory: #ece7de;
  --gold: #c5a36a;
  --gold-bright: #d8b16d;
  --gold-dark: #806239;
  --border: rgba(197, 163, 106, 0.18);
  --border-gold: rgba(197, 163, 106, 0.42);
  --border-neutral: rgba(241, 239, 234, 0.08);

  /* type */
  --font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-micro: 0.75rem;
  --fs-small: 0.875rem;
  --fs-body: 1.0625rem;
  --fs-lead: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem);
  --fs-h2: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
  --fs-h1: clamp(3.25rem, min(7.4vw, calc(11.5 * var(--vh))), 5.4rem);

  /* spacing, radius */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --s-9: 7rem;
  --r-0: 0; --r-1: 2px; --r-2: 4px; --r-3: 8px;

  /* motion */
  --dur-fast: 160ms; --dur-base: 320ms; --dur-slow: 700ms; --dur-trace: 1250ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* layout */
  --container: 1200px;
  --gutter: clamp(20px, 4vw, 48px);
  --rail: 56px;
  --rail-gap: 24px;
  --header-h: 76px;
  --strip-h: 112px;
  --section-y: clamp(4rem, 2.5rem + 5vw, 7rem);
  --edge: calc((100% - min(var(--container), 100% - 2 * var(--gutter))) / 2);
  --rail-x: calc(var(--edge) + var(--rail) / 2);
}
@supports (height: 100svh) { :root { --vh: 1svh; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  background: var(--bg-deep);
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 8px);
}
html.menu-open { overflow: hidden; }
body {
  margin: 0; min-height: 100vh;
  background: var(--bg-deep); color: var(--text-secondary);
  font: 400 var(--fs-body) / 1.7 var(--font-sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
svg { display: block; }
img { display: block; max-width: 100%; height: auto; }
::selection { background: var(--gold); color: var(--bg-deep); }
:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 4px; border-radius: 2px; }
main:focus { outline: none; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

.skip {
  position: fixed; left: 16px; top: -80px; z-index: 120;
  padding: 12px 18px; border-radius: var(--r-1);
  background: var(--gold); color: var(--bg-deep);
  font: 600 var(--fs-small) / 1 var(--font-sans);
  transition: top var(--dur-fast) var(--ease-standard);
}
.skip:focus { top: 16px; }

.grain {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background-image: url(/assets/grain.7ffc49a32b.png); background-size: 128px 128px;
  opacity: 0.85;
}

.wrap {
  position: relative;
  width: min(var(--container), 100% - 2 * var(--gutter));
  margin-inline: auto;
  padding-left: calc(var(--rail) + var(--rail-gap));
}

/* ---------- header and navigation ---------- */
.site-header {
  position: absolute; inset: 0 0 auto 0; z-index: 60;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-standard);
}
.header-inner {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  width: min(var(--container), 100% - 2 * var(--gutter)); height: var(--header-h); margin-inline: auto;
}
.brand-mark {
  display: inline-flex; align-items: center; min-height: 44px;
  font: 700 1.25rem / 1 var(--font-sans); letter-spacing: -0.04em; color: var(--text-primary);
}
.brand-mark span { color: var(--gold); }
.site-nav { position: relative; }
.nav-list { display: flex; gap: clamp(18px, 3vw, 38px); }
.nav-list a {
  display: inline-flex; align-items: center; min-height: 44px;
  font: 500 var(--fs-small) / 1 var(--font-sans); letter-spacing: 0.01em; color: var(--text-secondary);
  transition: color var(--dur-fast) var(--ease-standard);
}
.nav-list a:hover { color: var(--text-primary); }
.nav-list a[aria-current] { color: var(--gold-bright); }
.nav-ind {
  position: absolute; left: 0; bottom: 7px; height: 1px; width: var(--ind-w, 0px); background: var(--gold);
  transform: translateX(var(--ind-x, 0px)); opacity: 0;
  transition: transform var(--dur-base) var(--ease-out), width var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-standard);
}
.site-nav.has-active .nav-ind { opacity: 1; }
.nav-foot, .menu-btn { display: none; }

/* ---------- hero: portrait as an integrated artifact ---------- */
.hero {
  --hero-h: clamp(680px, calc(100 * var(--vh)), 920px);
  --stage: clamp(400px, min(46vw, calc(78 * var(--vh))), 700px);
  --k: 0.895;
  --ring-r: calc(var(--stage) * var(--k) / 2);
  --stage-right: calc(var(--edge) - 48px);
  --horizon: calc(var(--header-h) + (var(--hero-h) - var(--header-h) - var(--strip-h)) / 2);
  position: relative; height: var(--hero-h); isolation: isolate; overflow-x: clip;
}
.hero-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle at calc(100% - var(--stage-right) - var(--stage) / 2) var(--horizon), rgba(197, 163, 106, 0.075), transparent 46%),
    linear-gradient(rgba(197, 163, 106, 0.05) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(90deg, rgba(197, 163, 106, 0.05) 1px, transparent 1px) 0 0 / 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 62% 72% at calc(100% - var(--stage-right) - var(--stage) / 2) var(--horizon), #000 18%, transparent 78%);
  mask-image: radial-gradient(ellipse 62% 72% at calc(100% - var(--stage-right) - var(--stage) / 2) var(--horizon), #000 18%, transparent 78%);
}
.stage {
  position: absolute; z-index: 1;
  width: var(--stage); aspect-ratio: 1;
  right: var(--stage-right); top: var(--horizon); translate: 0 -50%;
}
.stage picture, .stage-img { display: block; width: 100%; height: 100%; }
.stage-img {
  -webkit-mask-image: radial-gradient(closest-side, #000 93%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 93%, transparent 100%);
}
.stage-layer { position: absolute; inset: -25%; pointer-events: none; color: var(--gold); translate: 0 var(--par, 0px); }
.stage-svg { width: 100%; height: 100%; overflow: visible; }
.stage-svg * { vector-effect: non-scaling-stroke; }
.ov-ticks { stroke-width: 1; opacity: 0.6; }
.ov-arc { stroke-width: 1; stroke-dasharray: 2 7; opacity: 0.45; }
.ov-trace { stroke-width: 1; }
.ov-trace-a { opacity: 0.55; }
.ov-trace-b { opacity: 0.4; }
.ov-cross { stroke-width: 1; opacity: 0.35; }
.ov-node { fill: var(--bg-deep); stroke-width: 1; }
.ov-dot { fill: var(--gold); stroke: none; opacity: 0.8; }
.ov-label {
  position: absolute; left: 83%; top: 22.6%;
  font: 400 var(--fs-micro) / 1 var(--font-mono); letter-spacing: 0.08em; color: var(--text-muted);
}

.hero-lines { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hl-horizon {
  position: absolute; top: var(--horizon); left: var(--rail-x);
  right: calc(var(--stage-right) + var(--stage) / 2 + var(--ring-r));
  height: 1px; background: linear-gradient(90deg, rgba(197, 163, 106, 0.28), rgba(197, 163, 106, 0.8));
}
.hl-ruler {
  position: absolute; left: var(--rail-x); right: 0; top: calc(var(--hero-h) - var(--strip-h)); height: 1px;
  background: linear-gradient(90deg, var(--border-gold), var(--border) 55%, transparent);
}
.hl-drop {
  position: absolute; width: 1px;
  left: calc(100% - var(--stage-right) - var(--stage) / 2);
  top: calc(var(--horizon) + var(--ring-r));
  height: calc(var(--hero-h) - var(--strip-h) - var(--horizon) - var(--ring-r));
  background: linear-gradient(to bottom, rgba(197, 163, 106, 0.75), rgba(197, 163, 106, 0.25));
}
.hl-node {
  position: absolute; width: 9px; height: 9px; translate: -50% -50%; rotate: 45deg;
  border: 1px solid var(--gold); background: var(--bg-deep);
}
.hl-node-start { left: var(--rail-x); top: var(--horizon); background: var(--gold); }
.hl-node-ring { right: calc(var(--stage-right) + var(--stage) / 2 + var(--ring-r)); top: var(--horizon); translate: 50% -50%; }
.hl-node-ruler { left: var(--rail-x); top: calc(var(--hero-h) - var(--strip-h)); }
.hl-node-drop { left: calc(100% - var(--stage-right) - var(--stage) / 2); top: calc(var(--hero-h) - var(--strip-h)); }
.hl-label {
  position: absolute; left: calc(var(--rail-x) + 12px); top: calc(var(--horizon) + 30px);
  writing-mode: vertical-rl;
  font: 400 var(--fs-micro) / 1 var(--font-mono); letter-spacing: 0.14em; color: var(--text-muted);
}

.hero-body {
  position: absolute; z-index: 3; left: var(--edge); top: var(--header-h); bottom: var(--strip-h);
  width: calc(100% - var(--edge) - var(--stage-right) - var(--stage) / 2 - var(--ring-r) - 28px);
  padding-left: calc(var(--rail) + var(--rail-gap));
  display: grid; grid-template-rows: minmax(0, 1fr) 0 minmax(0, 1fr);
}
.hero-top { align-self: end; padding-bottom: 16px; }
.hero-bottom { align-self: start; padding-top: 28px; }
.handle {
  display: flex; align-items: center; gap: 12px;
  font: 400 0.8125rem / 1 var(--font-mono); letter-spacing: 0.06em; color: var(--gold);
}
.handle::before { content: ""; width: 28px; height: 1px; background: var(--gold); }
.hero h1 {
  margin-top: 20px;
  font: 350 var(--fs-h1) / 0.98 var(--font-sans); letter-spacing: -0.045em; color: var(--text-primary);
}
.hero h1 span { display: block; }
.positioning {
  display: flex; flex-wrap: wrap; margin-top: 22px;
  font: 500 0.9375rem / 1.5 var(--font-sans); color: var(--text-primary);
}
.positioning li { white-space: nowrap; }
.positioning li:not(:last-child)::after { content: "\2022"; margin-inline: 0.7em; color: var(--gold); }
.statement {
  max-width: 34ch;
  font: 400 clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem) / 1.6 var(--font-sans); color: var(--text-secondary);
}
.mark-line-host, .statement-mark { position: relative; display: inline; color: var(--text-primary); white-space: nowrap; }
.mark-line { position: absolute; left: 0; bottom: -7px; width: 100%; height: 10px; overflow: visible; stroke: var(--gold); stroke-width: 1.6; fill: none; stroke-linecap: round; }
.mark-line path { stroke-dasharray: 1; stroke-dashoffset: 0; }

.strip { position: absolute; z-index: 3; left: var(--edge); bottom: 0; width: min(var(--container), 100% - 2 * var(--gutter)); height: var(--strip-h); }
.strip-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); height: 100%; padding-left: calc(var(--rail) + var(--rail-gap)); }
.strip-list li { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 22px 18px 0 0; }
.strip-list li::before { content: ""; position: absolute; top: 0; left: 0; width: 1px; height: 10px; background: var(--gold); }
.strip-term { font: 500 1.0625rem / 1.3 var(--font-sans); letter-spacing: -0.005em; color: var(--text-primary); }
.strip-note { font: 400 var(--fs-micro) / 1.55 var(--font-mono); letter-spacing: 0.01em; color: var(--text-muted); }

/* ---------- system trace (rail that runs down the page) ---------- */
main { position: relative; }
.trace {
  position: absolute; z-index: 3; left: var(--rail-x); top: 0; width: 1px; height: 0; translate: -0.5px 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(197, 163, 106, 0.3), rgba(197, 163, 106, 0.14));
}
.trace-fill { position: absolute; inset: 0; background: var(--gold); transform-origin: top center; transform: scaleY(var(--p, 0)); opacity: 0.9; }
.trace-head {
  position: absolute; left: -2px; top: -2px; width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold-bright); box-shadow: 0 0 9px 1px rgba(216, 177, 109, 0.4);
  transform: translateY(var(--py, 0px));
}

/* ---------- shared section anatomy ---------- */
.section { position: relative; padding-block: var(--section-y); scroll-margin-top: calc(var(--header-h) - var(--section-y)); }
.section-head { position: relative; padding-top: var(--s-6); margin-bottom: var(--s-8); }
.section-head::before {
  content: ""; position: absolute; top: 0; right: 0; height: 1px;
  left: calc(-1 * (var(--rail-gap) + var(--rail) / 2));
  background: var(--border); transform-origin: left center;
  transition: transform 1s var(--ease-in-out);
}
.section-head::after {
  content: ""; position: absolute; top: 0; width: 9px; height: 9px; translate: -50% -50%; rotate: 45deg;
  left: calc(-1 * (var(--rail-gap) + var(--rail) / 2));
  background: var(--bg-deep); border: 1px solid var(--gold-dark);
  transition: background-color var(--dur-base), border-color var(--dur-base), box-shadow var(--dur-base);
}
.section-head.on::after { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 0 4px rgba(197, 163, 106, 0.12); }
.section-head h2 {
  font: 300 var(--fs-h2) / 1.06 var(--font-sans); letter-spacing: -0.04em; color: var(--text-primary);
  transition: opacity var(--dur-slow) var(--ease-out) 0.12s, transform var(--dur-slow) var(--ease-out) 0.12s;
}
.section-sub {
  max-width: 46ch; margin-top: var(--s-4); color: var(--text-secondary);
  transition: opacity var(--dur-slow) var(--ease-out) 0.22s, transform var(--dur-slow) var(--ease-out) 0.22s;
}

/* generic reveal: default is the final state; JS adds .pre-reveal only to off-screen items */
[data-reveal="up"] { transition: opacity var(--dur-slow) var(--ease-out) var(--d, 0ms), transform var(--dur-slow) var(--ease-out) var(--d, 0ms); }
[data-reveal="up"].pre-reveal { opacity: 0; transform: translateY(14px); }
.section-head.pre-reveal::before { transform: scaleX(0); }
.section-head.pre-reveal > * { opacity: 0; transform: translateY(10px); }

/* hand-drawn marks: imperfect annotation over a precise system */
.hand { overflow: visible; fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hand path { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s var(--ease-in-out) 0.3s; }
.pre-reveal .hand path { stroke-dashoffset: 1; }

/* ---------- how I think ---------- */
.about-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-7) clamp(32px, 6vw, 96px); }
.about-aside { position: relative; }
.hand-arrow { width: min(150px, 100%); height: auto; opacity: 0.8; }
.lead { max-width: 30ch; font: 300 var(--fs-lead) / 1.28 var(--font-sans); letter-spacing: -0.02em; color: var(--text-primary); }
.about-copy p + p { max-width: 56ch; margin-top: var(--s-6); }
.hl {
  padding: 0 3px; margin: 0 -3px; color: var(--text-primary);
  background: url(/assets/hl.58432bf9d8.svg) 0 88% / 100% 58% no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size 0.9s var(--ease-in-out) 0.6s;
}
.pre-reveal .hl { background-size: 0% 58%; }

/* ---------- system map: staircase trace ---------- */
.map {
  --row: 134px; --line-y: 46px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: var(--row);
  margin-left: calc(-1 * (var(--rail-gap) + var(--rail) / 2));
  margin-top: var(--s-7);
}
.stop { position: relative; display: grid; grid-template-rows: var(--line-y) auto; align-content: start; padding: 0 18px 0 24px; }
.stop:nth-child(1) { grid-column: 1; grid-row: 1; }
.stop:nth-child(2) { grid-column: 2; grid-row: 2; }
.stop:nth-child(3) { grid-column: 3; grid-row: 3; }
.stop:nth-child(4) { grid-column: 4; grid-row: 4; }
.stop h3 { align-self: end; padding-bottom: 12px; font: 400 1.25rem / 1.2 var(--font-sans); letter-spacing: -0.01em; color: var(--text-primary); transition: color var(--dur-fast); }
.stop p { max-width: 25ch; margin-top: 14px; font-size: 0.9375rem; line-height: 1.55; }
.stop::before, .stop::after { content: ""; position: absolute; background: var(--border-gold); transition: background-color var(--dur-base), transform 0.7s var(--ease-in-out); }
.stop::before { left: 0; right: 0; top: var(--line-y); height: 1px; transform-origin: left center; }
.stop::after { right: 0; top: var(--line-y); width: 1px; height: var(--row); transform-origin: top center; }
.stop-last::after { display: none; }
.stop-node {
  position: absolute; left: 0; top: var(--line-y); width: 9px; height: 9px; translate: -50% -50%; rotate: 45deg;
  background: var(--bg-deep); border: 1px solid var(--gold); transition: background-color var(--dur-base) var(--ease-standard) , scale var(--dur-base) var(--ease-out);
}
.stop-end { position: absolute; right: 0; top: var(--line-y); width: 8px; height: 8px; translate: 0 -50%; rotate: 45deg; border-top: 1px solid var(--gold); border-right: 1px solid var(--gold); }
.stop:hover::before, .stop:hover::after { background: var(--gold-bright); }
.stop:hover h3 { color: var(--gold-bright); }
.hand-loop { position: absolute; left: -26px; top: calc(var(--line-y) - 22px); width: 52px; height: 44px; opacity: 0.85; pointer-events: none; }
.map .stop:nth-child(1) { --t: 0ms; } .map .stop:nth-child(2) { --t: 800ms; } .map .stop:nth-child(3) { --t: 1600ms; } .map .stop:nth-child(4) { --t: 2400ms; }
.map.pre-reveal .stop::before { transform: scaleX(0); }
.map.pre-reveal .stop::after { transform: scaleY(0); }
.map.pre-reveal .stop-node { background: var(--bg-deep); scale: 0.4; }
.map:not(.pre-reveal) .stop-node { background: var(--gold); transition-delay: var(--t); }
.map:not(.pre-reveal) .stop::before { transition-delay: var(--t); }
.map:not(.pre-reveal) .stop::after { transition-delay: calc(var(--t) + 380ms); }
.map.pre-reveal .stop h3, .map.pre-reveal .stop p { opacity: 0; }
.map .stop h3, .map .stop p { transition: opacity var(--dur-slow) var(--ease-out) calc(var(--t, 0ms) + 120ms), color var(--dur-fast); }
.map .stop-last .hand path { transition-delay: 2.9s; }

/* ---------- principles ---------- */
.principle-list { margin-top: calc(-1 * var(--s-4)); }
.principle { position: relative; padding: clamp(20px, 3vw, 34px) 0; border-top: 1px solid var(--border-neutral); }
.principle:last-child { border-bottom: 1px solid var(--border-neutral); }
.principle::before { content: ""; position: absolute; top: -1px; left: 0; width: 28px; height: 1px; background: var(--gold); }
.principle p { max-width: 34ch; font: 300 clamp(1.5rem, 1rem + 2.1vw, 2.5rem) / 1.2 var(--font-sans); letter-spacing: -0.025em; color: var(--text-primary); }
.rej {
  color: var(--text-muted);
  background: url(/assets/strike.ca1168dbd4.svg) 0 56% / 100% 14px no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size 0.9s var(--ease-in-out) 0.35s;
}
.pre-reveal .rej { background-size: 0% 14px; }

/* ---------- background ---------- */
.records { margin-top: calc(-1 * var(--s-4)); }
.record { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3) var(--s-7); padding-bottom: var(--s-7); }
.record:last-child { padding-bottom: 0; }
.record h3 { font: 400 1.375rem / 1.3 var(--font-sans); letter-spacing: -0.01em; color: var(--text-primary); }
.record p { max-width: 52ch; margin-top: 6px; }
.rec-node {
  position: absolute; top: 0.55rem; width: 8px; height: 8px; translate: -50% 0; rotate: 45deg;
  left: calc(-1 * (var(--rail-gap) + var(--rail) / 2));
  background: var(--bg-deep); border: 1px solid var(--gold-dark);
  transition: background-color var(--dur-base), border-color var(--dur-base);
}
.record.on .rec-node { background: var(--gold); border-color: var(--gold); }

/* ---------- capability index ---------- */
.cap-list { display: grid; grid-auto-flow: column; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); column-gap: var(--s-7); margin-top: calc(-1 * var(--s-4)); }
.cap { display: flex; align-items: baseline; gap: 0; padding: 17px 0; border-top: 1px solid var(--border-neutral); }
.cap-t { font: 400 1.125rem / 1.35 var(--font-sans); color: var(--text-primary); }
.cap::after { content: ""; flex: 1; align-self: center; min-width: 16px; border-bottom: 1px dotted var(--border-gold); opacity: 0.6; transition: opacity var(--dur-base), border-color var(--dur-base); }
.cap:hover::after { opacity: 1; border-color: var(--gold); }

/* ---------- connect ---------- */
.connect { padding-bottom: calc(var(--section-y) * 0.8); }
.connect-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--s-7) clamp(32px, 6vw, 96px); align-items: start; margin-top: calc(-1 * var(--s-4)); }
.identity-name { font: 500 1.0625rem / 1.3 var(--font-sans); color: var(--text-primary); }
.copy-handle {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-height: 44px; margin-top: var(--s-3); text-align: left;
  font: 300 clamp(2.25rem, 1.1rem + 4vw, 4.25rem) / 1.05 var(--font-sans); letter-spacing: -0.04em; color: var(--text-primary);
  transition: color var(--dur-fast);
}
.copy-handle:hover .handle-text { color: var(--gold-bright); }
.handle-text { transition: color var(--dur-fast); }
.copy-state {
  padding: 4px 10px; border: 1px solid var(--border-gold); border-radius: var(--r-1);
  font: 400 var(--fs-micro) / 1 var(--font-mono); letter-spacing: 0.08em; color: var(--text-secondary);
  transition: color var(--dur-fast), border-color var(--dur-fast), background-color var(--dur-fast);
}
.copy-handle:hover .copy-state { color: var(--gold); border-color: var(--gold); }
.copy-handle.is-copied .copy-state { color: var(--bg-deep); background: var(--gold); border-color: var(--gold); }
.social-list { display: grid; grid-auto-flow: column; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); column-gap: var(--s-6); }
.social-link {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px;
  min-height: 68px; padding: 12px 0; border-top: 1px solid var(--border-neutral);
}
.sl-name { font: 400 1.25rem / 1.3 var(--font-sans); color: var(--text-primary); transition: color var(--dur-fast); }
.sl-path { grid-column: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 var(--fs-micro) / 1.5 var(--font-mono); color: var(--text-muted); }
.sl-arrow { grid-column: 2; grid-row: 1 / span 2; color: var(--gold); transition: translate var(--dur-base) var(--ease-out); }
.social-link:hover .sl-name, .social-link:focus-visible .sl-name { color: var(--gold-bright); }
.social-link:hover .sl-arrow, .social-link:focus-visible .sl-arrow { translate: 3px -3px; }

/* ---------- footer ---------- */
.site-footer { position: relative; padding: var(--s-6) 0 var(--s-8); color: var(--text-muted); font-size: var(--fs-small); }
.footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-6); }
.footer-row::before { content: ""; position: absolute; top: calc(-1 * var(--s-6)); right: 0; left: calc(var(--rail) / 2); height: 1px; background: var(--border); }
.foot-node {
  position: absolute; top: calc(-1 * var(--s-6)); left: calc(var(--rail) / 2); width: 9px; height: 9px; translate: -50% -50%; rotate: 45deg;
  background: var(--bg-deep); border: 1px solid var(--gold-dark); transition: background-color var(--dur-base), border-color var(--dur-base);
}
.foot-node.on { background: var(--gold); border-color: var(--gold); }
.foot-id { font-weight: 500; color: var(--text-primary); }
.foot-id span { margin-left: 12px; font: 400 var(--fs-micro) / 1 var(--font-mono); letter-spacing: 0.06em; color: var(--gold); }
.back-top { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--text-secondary); transition: color var(--dur-fast); }
.back-top svg { transition: translate var(--dur-base) var(--ease-out); }
.back-top:hover { color: var(--gold-bright); }
.back-top:hover svg { translate: 0 -3px; }

/* ---------- 404 ---------- */
.nf-page { display: grid; place-items: center; min-height: 100vh; padding: 24px; }
.nf { width: min(520px, 100%); padding-left: 28px; border-left: 1px solid var(--gold-dark); }
.nf-code { font: 400 var(--fs-micro) / 1 var(--font-mono); letter-spacing: 0.12em; color: var(--gold); }
.nf h1 { margin: 14px 0 12px; font: 300 clamp(2.25rem, 1.5rem + 3vw, 3.5rem) / 1.08 var(--font-sans); letter-spacing: -0.04em; color: var(--text-primary); }
.nf-text { margin-bottom: 26px; }
.nf-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--gold); border-bottom: 1px solid var(--gold); }

/* ---------- motion (system behaviours only) ---------- */
@keyframes draw-x { from { transform: scaleX(0); } }
@keyframes draw-y { from { transform: scaleY(0); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes node-in { from { opacity: 0; scale: 0.4; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes dash-in { from { stroke-dashoffset: 1; } }

@media (prefers-reduced-motion: no-preference) {
  .hl-horizon { transform-origin: right center; animation: draw-x var(--dur-trace) var(--ease-in-out) 0.15s both; }
  .hl-ruler { transform-origin: left center; animation: draw-x 1.5s var(--ease-in-out) 0.8s both; }
  .hl-drop { transform-origin: top center; animation: draw-y 1.2s var(--ease-in-out) 1s both; }
  .hl-node { animation: node-in 0.7s var(--ease-out) 0.55s both; }
  .hl-label, .ov-label { animation: fade-in 1s ease 1.6s both; }
  .stage-svg { animation: fade-in 1.4s ease 0.5s both; }
  .hero-top > *, .hero-bottom > *, .strip-list li { animation: rise 0.9s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 90ms + 200ms); }
  .hero-top > :nth-child(2) { --i: 1; } .hero-top > :nth-child(3) { --i: 2; } .hero-bottom > * { --i: 3; }
  .strip-list li:nth-child(1) { --i: 4; } .strip-list li:nth-child(2) { --i: 5; } .strip-list li:nth-child(3) { --i: 6; } .strip-list li:nth-child(4) { --i: 7; }
  .mark-line path { animation: dash-in 0.9s var(--ease-in-out) 1.5s both; }
}

/* ---------- small screens: a different composition, not the desktop stacked ---------- */
@media (max-width: 860px) {
  :root {
    --gutter: clamp(16px, 4.6vw, 22px);
    --rail: 14px;
    --rail-gap: 12px;
    --header-h: calc(64px + env(safe-area-inset-top));
    --section-y: clamp(4rem, 14vw, 5.25rem);
  }

  html { scroll-padding-top: 18px; }
  body { font-size: 1rem; line-height: 1.68; }
  .grain { opacity: 0.62; }
  .wrap { padding-left: calc(var(--rail) + var(--rail-gap)); }
  .section { scroll-margin-top: 18px; }

  /* mobile header stays part of the hero; it never follows scroll */
  .header-inner { padding-top: env(safe-area-inset-top); }
  .brand-mark { font-size: 1.125rem; }
  .menu-btn { display: none; }
  .js .menu-btn {
    display: inline-flex; align-items: center; justify-content: flex-end;
    min-height: 44px; min-width: 44px;
    font: 400 0.75rem / 1 var(--font-mono); letter-spacing: 0.11em; color: var(--text-primary);
    touch-action: manipulation;
  }
  .nav-ind { display: none; }
  .nav-list { flex-direction: column; gap: 0; }
  .site-nav { margin-top: 0; }
  .nav-foot {
    display: block; margin-top: auto;
    font: 400 var(--fs-micro) / 1 var(--font-mono); letter-spacing: 0.08em; color: var(--text-muted);
  }
  .js .site-nav {
    position: fixed; inset: 0; z-index: -1; display: flex; flex-direction: column;
    padding: calc(var(--header-h) + 18px) max(var(--gutter), env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) calc(var(--gutter) + var(--rail) + var(--rail-gap));
    background:
      radial-gradient(circle at 18% 16%, rgba(197, 163, 106, 0.06), transparent 30%),
      var(--bg-deep);
    visibility: hidden; opacity: 0;
    transition: opacity var(--dur-base) var(--ease-standard), visibility 0s linear var(--dur-base);
    overflow-y: auto; overscroll-behavior: contain;
  }
  .js .site-nav::before {
    content: ""; position: absolute; top: calc(var(--header-h) + 26px); bottom: 54px; left: var(--rail-x);
    width: 1px; background: linear-gradient(var(--border-gold), rgba(197, 163, 106, 0.08));
  }
  .menu-open .site-nav { visibility: visible; opacity: 1; transition-delay: 0s; }
  .js .nav-list li {
    position: relative; opacity: 0; translate: 0 10px;
    transition: opacity var(--dur-base) var(--ease-out), translate var(--dur-base) var(--ease-out);
  }
  .js .nav-list li::before {
    content: ""; position: absolute; left: calc(-1 * (var(--rail-gap) + var(--rail) / 2)); top: 50%;
    width: 8px; height: 8px; translate: -50% -50%; rotate: 45deg;
    background: var(--bg-deep); border: 1px solid var(--gold);
  }
  .menu-open .nav-list li { opacity: 1; translate: 0 0; }
  .menu-open .nav-list li:nth-child(1) { transition-delay: 60ms; }
  .menu-open .nav-list li:nth-child(2) { transition-delay: 120ms; }
  .menu-open .nav-list li:nth-child(3) { transition-delay: 180ms; }
  .menu-open .nav-list li:nth-child(4) { transition-delay: 240ms; }
  .nav-list a {
    min-height: 62px;
    font: 300 clamp(2rem, 9vw, 2.7rem) / 1.08 var(--font-sans);
    letter-spacing: -0.035em; color: var(--text-primary);
    touch-action: manipulation;
  }

  /* mobile hero: preserve the desktop identity, remove the geometry that collides at phone widths */
  .hero {
    --stage: min(86vw, 430px);
    --stage-right: calc((100% - var(--stage)) / 2);
    --horizon: calc(var(--header-h) + 8px + var(--stage) / 2);
    height: auto; padding-top: var(--header-h); padding-bottom: var(--s-7);
  }
  .stage {
    position: relative; right: auto; top: auto; translate: none;
    margin: 8px auto 0; isolation: isolate;
  }
  .stage-layer {
    display: block; inset: -10%; opacity: 0.58;
    translate: 0 var(--par, 0px);
  }
  .stage-layer .ov-trace, .stage-layer .ov-node, .stage-layer .ov-dot, .ov-label { display: none; }
  .stage-layer .ov-ticks { opacity: 0.38; }
  .stage-layer .ov-arc { opacity: 0.32; }
  .stage-layer .ov-cross { opacity: 0.22; }
  .hero-bg {
    background:
      radial-gradient(circle at 50% var(--horizon), rgba(197, 163, 106, 0.065), transparent 50%),
      linear-gradient(rgba(197, 163, 106, 0.032) 1px, transparent 1px) 0 0 / 52px 52px,
      linear-gradient(90deg, rgba(197, 163, 106, 0.032) 1px, transparent 1px) 0 0 / 52px 52px;
    -webkit-mask-image: radial-gradient(ellipse 92% 56% at 50% var(--horizon), #000 18%, transparent 80%);
    mask-image: radial-gradient(ellipse 92% 56% at 50% var(--horizon), #000 18%, transparent 80%);
  }

  /* desktop hero line system becomes one clean mobile trace anchor */
  .hero-lines > * { display: none; }
  .hl-node-start {
    display: block; left: var(--rail-x);
    top: calc(var(--header-h) + 8px + var(--stage) + 29px);
    width: 8px; height: 8px; background: var(--gold);
    box-shadow: 0 0 0 4px rgba(197, 163, 106, 0.08);
  }
  .hero-body {
    position: relative; left: auto; top: auto; bottom: auto; width: auto; display: block;
    margin: 10px var(--gutter) 0; padding-left: calc(var(--rail) + var(--rail-gap));
  }
  .hero-body::before {
    content: ""; position: absolute; left: calc(var(--rail) / 2); top: 9px;
    width: calc(var(--rail) / 2 + var(--rail-gap)); height: 1px;
    background: linear-gradient(90deg, var(--gold), var(--border-gold));
    transform: translateX(-50%);
  }
  .hero-axis { display: none; }
  .hero-top { padding-bottom: 0; }
  .hero-bottom { padding-top: 20px; }
  .handle { gap: 9px; font-size: 0.75rem; }
  .handle::before { width: 22px; }
  .hero h1 {
    margin-top: 16px;
    font-size: clamp(3.2rem, 14.3vw, 4.45rem);
    line-height: 0.96;
    letter-spacing: -0.05em;
  }

  /* explicitly keep the three positioning titles on one line on phones */
  .positioning {
    flex-wrap: nowrap; align-items: center; width: 100%; margin-top: 16px;
    font: 500 clamp(0.66rem, 2.7vw, 0.78rem) / 1.25 var(--font-sans);
    letter-spacing: -0.012em; white-space: nowrap;
  }
  .positioning li { flex: 0 0 auto; white-space: nowrap; }
  .positioning li:not(:last-child)::after { margin-inline: 0.48em; }
  .statement { max-width: 31ch; font-size: clamp(1rem, 3.9vw, 1.1rem); line-height: 1.62; }
  .mark-line { bottom: -6px; }

  .strip {
    position: relative; left: auto; bottom: auto; width: auto; height: auto;
    margin: var(--s-7) var(--gutter) 0;
  }
  .strip-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(12px, 4vw, 20px);
    height: auto; padding-left: calc(var(--rail) + var(--rail-gap));
  }
  .strip-list li {
    min-height: 92px; padding: 17px 8px 17px 0;
    border-top: 1px solid var(--border-neutral);
  }
  .strip-list li::before { top: -1px; width: 20px; height: 1px; }
  .strip-term { font-size: 0.98rem; }
  .strip-note { font-size: 0.67rem; line-height: 1.5; }

  /* sections: mobile gets the same system logic, with less horizontal competition */
  .section-head { margin-bottom: var(--s-7); padding-top: 1.6rem; }
  .section-head h2 { font-size: clamp(2.1rem, 10.5vw, 3rem); line-height: 1.02; }
  .section-sub { margin-top: 0.85rem; font-size: 0.96rem; line-height: 1.6; }
  .about-grid, .connect-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .about-aside { display: none; }
  .lead, .lead-sm { max-width: none; }
  .lead { font-size: clamp(1.42rem, 6.1vw, 1.78rem); line-height: 1.27; }
  .about-copy p + p { margin-top: var(--s-5); font-size: 0.98rem; }
  .principle-list { margin-top: -0.5rem; }
  .principle { padding: 22px 0; }
  .principle p { max-width: none; font-size: clamp(1.45rem, 6.2vw, 1.9rem); line-height: 1.2; }

  .map { display: block; margin-left: 0; margin-top: var(--s-6); }
  .stop { display: block; min-height: 94px; padding: 0 0 var(--s-6) 0; }
  .stop::before, .stop::after, .stop-end { display: none; }
  .stop-node { left: calc(-1 * (var(--rail-gap) + var(--rail) / 2)); top: 0.62em; }
  .stop h3 { padding-bottom: 0; font-size: 1.14rem; }
  .stop p { max-width: 36ch; margin-top: 5px; font-size: 0.9rem; line-height: 1.55; }
  .hand-loop { left: calc(-1 * (var(--rail-gap) + var(--rail) / 2) - 24px); top: calc(0.62em - 20px); width: 48px; }

  .record { grid-template-columns: minmax(0, 1fr); gap: 4px; padding-bottom: var(--s-6); }
  .record h3 { font-size: 1.22rem; }
  .record p { font-size: 0.96rem; line-height: 1.62; }

  .cap-list { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .cap { min-height: 52px; padding: 14px 0; }
  .cap-t { font-size: 1.02rem; }

  .connect { padding-bottom: var(--section-y); }
  .connect-grid { margin-top: -0.25rem; }
  .copy-handle {
    max-width: 100%; margin-top: 0.6rem;
    font-size: clamp(2rem, 10.4vw, 3rem); line-height: 1.05;
  }
  .social-list { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .social-link { min-height: 64px; }
  .sl-name { font-size: 1.14rem; }

  .footer-row { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .foot-id { display: flex; flex-wrap: wrap; gap: 4px 10px; }
  .foot-id span { margin-left: 0; }
  .back-top { margin-top: 0.25rem; }
}

/* phone-specific tightening prevents edge collisions at the smallest supported widths */
@media (max-width: 380px) {
  :root { --gutter: 15px; --rail-gap: 10px; }
  .hero { --stage: 84vw; }
  .hero h1 { font-size: clamp(3rem, 14.1vw, 3.35rem); }
  .positioning { font-size: 0.64rem; letter-spacing: -0.018em; }
  .positioning li:not(:last-child)::after { margin-inline: 0.34em; }
  .statement { max-width: 29ch; }
  .strip-list { column-gap: 10px; }
  .strip-term { font-size: 0.92rem; }
  .copy-handle { font-size: 1.95rem; }
}

/* tablet / large-phone refinement: preserve breathing room instead of simply stretching phone layouts */
@media (min-width: 640px) and (max-width: 860px) {
  :root { --gutter: 28px; --rail: 18px; --rail-gap: 15px; }
  .hero { --stage: min(56vw, 430px); }
  .hero-body, .strip { width: min(680px, calc(100% - 2 * var(--gutter))); margin-left: auto; margin-right: auto; }
  .strip-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .strip-list li { min-height: 96px; }
  .cap-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-6); }
  .connect-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-7); }
}

/* landscape phones: cap portrait height so the opening remains usable */
@media (max-width: 860px) and (max-height: 560px) and (orientation: landscape) {
  .hero { --stage: min(52vh, 42vw, 320px); }
}

@media (hover: none) and (pointer: coarse) {
  .social-link:hover .sl-arrow, .back-top:hover svg { translate: 0 0; }
  .stop:hover h3, .social-link:hover .sl-name, .copy-handle:hover .handle-text { color: inherit; }
}

/* ---------- reduced motion: nothing moves, everything is visible ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .pre-reveal, .pre-reveal * { opacity: 1 !important; transform: none !important; }
  .stage-layer, .env-ar { translate: none !important; }
}

@media print {
  :root { --bg-deep: #fff; --text-primary: #111; --text-secondary: #333; --text-muted: #555; --gold: #7a5b1e; --border: #ccc; }
  .grain, .trace, .site-header, .hero-bg, .hero-lines, .stage-layer, .env-ar, .back-top, .skip { display: none !important; }
  body { background: #fff; }
}