/* ===========================================================================
   moekayal.me — home (Story edition): the Network Map, printed warm
   One career drawn as a transit diagram, in the site's own materials: a
   warm-dark ground (cream by day), Spectral for the voice, Overpass for
   signage labels and controls, one line colour per visit. Tokens +
   components for index.html and 404.html. No build step; plain CSS.
   Theme:        [data-theme="dark|light"] on <html> (pre-paint bootstrap).
   Line colour:  [data-line="amber|gold|sage|azure|crimson"] on <html>
                 (random per visit, cycled live by js/home.js).
   =========================================================================== */

/* ---- Self-hosted fonts (latin, woff2) ------------------------------------- */
@font-face { font-family:'Spectral'; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/spectral-400.woff2) format('woff2'); }
@font-face { font-family:'Spectral'; font-style:normal; font-weight:500; font-display:swap; src:url(../fonts/spectral-500.woff2) format('woff2'); }
@font-face { font-family:'Spectral'; font-style:normal; font-weight:600; font-display:swap; src:url(../fonts/spectral-600.woff2) format('woff2'); }
@font-face { font-family:'Spectral'; font-style:italic; font-weight:400; font-display:swap; src:url(../fonts/spectral-400i.woff2) format('woff2'); }
@font-face { font-family:'Spectral'; font-style:italic; font-weight:500; font-display:swap; src:url(../fonts/spectral-500i.woff2) format('woff2'); }
@font-face { font-family:'Spectral'; font-style:italic; font-weight:600; font-display:swap; src:url(../fonts/spectral-600i.woff2) format('woff2'); }
@font-face { font-family:'Overpass'; font-style:normal; font-weight:100 900; font-display:swap; src:url(../fonts/overpass.woff2) format('woff2'); }
@font-face { font-family:'Overpass'; font-style:italic; font-weight:400; font-display:swap; src:url(../fonts/overpass-italic.woff2) format('woff2'); }
@font-face { font-family:'Overpass Mono'; font-style:normal; font-weight:300 800; font-display:swap; src:url(../fonts/overpassmono.woff2) format('woff2'); }

/* ---- Tokens ---------------------------------------------------------------
   Dark = the map at night: warm near-black ground, cream ink, lit lines.
   Light = the same map printed on cream paper.
   Every line colour clears 4.5:1 as text on its ground, so a line colour is
   safe for labels, rules and controls alike. */
:root {
  color-scheme:dark;
  --bg:#15100a; --bg2:#1e1810; --bg3:#271f14;
  --text:#ece3d4; --text2:#cbbfa6; --muted:#9a8c72; --faint:#93856a;
  --line:#2a2115; --line2:#342a1d;
  --nav-bg:rgba(21,16,10,0.78);
  --c-amber:#e07a3a; --c-gold:#cf9b3f; --c-sage:#8fb07a; --c-azure:#5b9cf6; --c-crimson:#e8557a;
  --ok:#5cc98a; --spec:#7aa2e3;
  --accent:var(--c-amber);
  --font:'Overpass', 'Helvetica Neue', Arial, sans-serif;
  --serif:'Spectral', Georgia, 'Times New Roman', serif;
  --mono:'Overpass Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --maxw:1200px; --gutter:48px; --lw:8px;
}
:root[data-theme="light"] {
  color-scheme:light;
  --bg:#f6f1e7; --bg2:#efe7d8; --bg3:#e7dfcd;
  --text:#23190f; --text2:#3f3326; --muted:#6f6151; --faint:#6a5c44;
  --line:#e4dac9; --line2:#dacdb9;
  --nav-bg:rgba(246,241,231,0.82);
  --c-amber:#a24b16; --c-gold:#7f5c1c; --c-sage:#4f6a41; --c-azure:#1a5fd0; --c-crimson:#c21f4a;
  --ok:#2f8f5b; --spec:#2f5fd0;
}
/* CSS-only fallback: if JS never sets data-theme, still follow the OS. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme:light;
    --bg:#f6f1e7; --bg2:#efe7d8; --bg3:#e7dfcd;
    --text:#23190f; --text2:#3f3326; --muted:#6f6151; --faint:#6a5c44;
    --line:#e4dac9; --line2:#dacdb9;
    --nav-bg:rgba(246,241,231,0.82);
    --c-amber:#a24b16; --c-gold:#7f5c1c; --c-sage:#4f6a41; --c-azure:#1a5fd0; --c-crimson:#c21f4a;
    --ok:#2f8f5b; --spec:#2f5fd0;
  }
}
:root[data-line="gold"]    { --accent:var(--c-gold); }
:root[data-line="sage"]    { --accent:var(--c-sage); }
:root[data-line="azure"]   { --accent:var(--c-azure); }
:root[data-line="crimson"] { --accent:var(--c-crimson); }

/* ---- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scrollbar-gutter:stable; -webkit-text-size-adjust:100%; scrollbar-color:var(--line2) var(--bg); caret-color:var(--accent); }
body { margin:0; background:var(--bg); color:var(--text); font-family:var(--font); font-size:16.5px; line-height:1.6; font-weight:400; }
/* Slow colour morph only while a theme / line swap is in flight (js adds .theme-anim for ~.6s). */
html.theme-anim body :where(*:not(canvas):not(svg *)) { transition:background-color .5s ease, border-color .5s ease, color .5s ease; }
a { color:inherit; text-decoration-thickness:1.5px; text-underline-offset:.2em; text-decoration-color:var(--accent); }
a, button { transition:color .18s ease, border-color .18s ease, background-color .18s ease, opacity .18s ease, transform .18s ease; }
button { font:inherit; }
::selection { background:color-mix(in srgb, var(--accent) 32%, transparent); }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }
h1, h2, h3 { font-family:var(--serif); font-weight:500; letter-spacing:-0.015em; line-height:1.1; margin:0; text-wrap:balance; }
p { margin:0; }
img { display:block; max-width:100%; height:auto; }
ol, ul { margin:0; padding:0; list-style:none; }
[hidden] { display:none !important; }
.accent { color:var(--accent); }
.mono { font-family:var(--mono); font-variant-numeric:tabular-nums; }
.wrap { max-width:var(--maxw); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); }
.ext { width:14px; height:14px; color:var(--accent); flex-shrink:0; }
/* 'a · b' label lists: the dot is drawn by CSS so its spacing never depends on the glyph */
.dots > span + span::before { content:"·"; margin:0 .5em; color:var(--faint); font-weight:700; }
.sprite { position:absolute; width:0; height:0; overflow:hidden; }

/* Skip link: hidden above the viewport until focused */
.skip { position:fixed; top:10px; left:10px; z-index:300; background:var(--text); color:var(--bg); font-weight:600; font-size:14px; padding:12px 18px; border-radius:24px; text-decoration:none; transform:translateY(-80px); transition:transform .2s ease; }
.skip:focus { transform:none; }

/* ---- Ambient layer: the flow field, the scroll line, the cursor ring -------
   The canvas sits behind the page (negative z-index keeps it under every
   in-flow element and above the page background). js/home.js draws it and
   skips it entirely under reduced motion. */
.bg-flow { position:fixed; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; }
.scroll-prog { position:fixed; top:0; left:0; height:2px; width:100%; background:var(--accent); z-index:100; transform:scaleX(0); transform-origin:left; pointer-events:none; }
@supports (animation-timeline: scroll()) {
  .scroll-prog { animation:mk-scrollprog linear both; animation-timeline:scroll(root); }
  @keyframes mk-scrollprog { to { transform:scaleX(1); } }
}
.cursor-ring { position:fixed; top:0; left:0; width:34px; height:34px; border:1px solid var(--accent); border-radius:50%; transform:translate(-50%,-50%); pointer-events:none; z-index:120; opacity:0; transition:transform .25s ease, background-color .25s ease, opacity .3s ease; }
.cursor-ring.is-hover { transform:translate(-50%,-50%) scale(1.6); background:color-mix(in srgb, var(--accent) 14%, transparent); }

/* ---- Shared glyph: the vertical line rail (menu, record, strips) ---------
   A coloured rail down the left with ring stations on each item. --rc is the
   rail colour; items own their own ring via ::before. */
.vline { position:relative; padding-left:38px; --rc:var(--accent); }
.vline::before { content:""; position:absolute; left:10px; top:18px; bottom:18px; width:var(--lw); border-radius:4px; background:var(--rc); }
.vline > li { position:relative; }
.vline > li::before { content:""; position:absolute; left:-34px; top:50%; width:12px; height:12px; margin-top:-10px; border-radius:50%; background:var(--bg); border:4px solid var(--rc); }

/* ---- Navigation ---------------------------------------------------------- */
.nav { position:sticky; top:0; z-index:50; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); background:var(--nav-bg); border-bottom:1px solid var(--line); }
.nav__inner { height:70px; display:flex; align-items:center; gap:26px; }
.brand { font-family:var(--serif); font-size:21px; font-weight:600; font-style:italic; color:var(--text); text-decoration:none; white-space:nowrap; line-height:1; }
.brand:hover { color:var(--accent); }
.nav__links { display:flex; gap:4px; }
.nav__link { position:relative; padding:8px 10px; font-size:13.5px; font-weight:600; color:var(--muted); text-decoration:none; border-radius:4px; }
.nav__link:hover { color:var(--text); }
.nav__link::after { content:""; position:absolute; left:10px; right:10px; bottom:0; height:2px; border-radius:2px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .25s cubic-bezier(.2,.7,.2,1); }
.nav__link.is-current { color:var(--text); }
.nav__link.is-current::after { transform:scaleX(1); }
.nav__actions { margin-left:auto; display:flex; align-items:center; gap:10px; }

.avail { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--muted); white-space:nowrap; }
.avail__dot { width:8px; height:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 9px var(--ok); }
.avail.is-closed .avail__dot { background:var(--faint); box-shadow:none; }

/* Small round controls: ⌘K, Spec, line colour, theme, menu */
.ctl { display:inline-flex; align-items:center; justify-content:center; gap:6px; height:34px; min-width:34px; padding:0 11px; border:1px solid var(--line2); border-radius:17px; background:var(--bg2); color:var(--muted); font-size:12px; font-weight:600; cursor:pointer; text-decoration:none; white-space:nowrap; }
.ctl:hover { color:var(--text); border-color:var(--text2); }
.ctl svg { width:15px; height:15px; flex-shrink:0; }
.nav__edition:hover, .nav__edition:focus-visible { color:var(--spec); border-color:var(--spec); }
.line-swatch { padding:0 10px; }
.line-swatch__bar { display:block; width:22px; height:8px; border-radius:4px; background:var(--accent); box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent); transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease; }
.line-swatch:hover .line-swatch__bar { box-shadow:0 0 11px 1px color-mix(in srgb, var(--accent) 60%, transparent); }
.line-swatch.is-pop .line-swatch__bar { transform:scaleX(1.35); }
.theme-toggle { padding:0; width:34px; }
.theme-toggle .ico-sun { display:none; }
:root[data-theme="dark"] .theme-toggle .ico-sun { display:block; }
:root[data-theme="dark"] .theme-toggle .ico-moon { display:none; }
.nav .nav__email { display:none; height:36px; padding:0 16px; font-size:13px; }
.nav__burger { display:none; padding:0; width:40px; height:40px; border-radius:20px; }
.burger { position:relative; display:block; width:16px; height:11px; }
.burger span { position:absolute; left:0; width:16px; height:1.7px; background:var(--text); border-radius:2px; }
.burger span:first-child { top:0; }
.burger span:last-child { bottom:0; }

/* ---- Mobile menu: the sections as a strip map ---------------------------- */
.mobile-menu { position:fixed; inset:0; z-index:120; display:none; flex-direction:column; padding:16px 22px max(40px, env(safe-area-inset-bottom)); background:var(--bg); opacity:0; transition:opacity .25s ease; overflow-y:auto; overscroll-behavior:contain; }
.mobile-menu__head { display:flex; align-items:center; justify-content:space-between; height:40px; }
.mobile-menu__close { width:40px; padding:0; border-radius:20px; }
.mm-strip { margin-top:30px; }
.mm-strip a { display:block; padding:11px 0; font-family:var(--serif); font-size:31px; font-weight:500; letter-spacing:-0.01em; text-decoration:none; color:var(--text); }
.mm-strip a:active { color:var(--accent); }
.mm-appearance { margin-top:30px; padding-top:18px; border-top:1px solid var(--line); display:grid; gap:14px; }
.mm-row { display:flex; align-items:center; justify-content:space-between; font-size:12.5px; font-weight:600; color:var(--muted); }
.mobile-menu__foot { margin-top:28px; padding-top:18px; border-top:1px solid var(--line); display:grid; gap:14px; }
.mobile-menu__foot a { font-size:15px; font-weight:600; text-decoration:none; color:var(--text2); }
.mobile-menu__foot a:active { color:var(--accent); }
.mobile-menu__social { display:flex; gap:22px; }
/* Only one rendered instance may hold a view-transition-name. */
.mobile-menu .theme-toggle, .mobile-menu .line-swatch { view-transition-name:none; }

/* ---- Hero ---------------------------------------------------------------- */
.hero { padding-top:84px; padding-bottom:8px; }
.hero__top { display:flex; justify-content:space-between; align-items:flex-start; gap:32px; }
.hero__name { font-family:var(--serif); font-size:clamp(54px, 8.2vw, 118px); font-weight:400; line-height:.92; letter-spacing:-0.025em; transition:transform .3s ease-out; }
.hero__role { margin-top:22px; font-family:var(--serif); font-style:italic; font-size:21px; line-height:1.4; color:var(--text2); max-width:36ch; text-wrap:pretty; }
.hero__clock { font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:12px; line-height:1.8; color:var(--muted); text-align:right; white-space:nowrap; padding-top:14px; flex-shrink:0; }
.hero__hello { display:block; color:var(--accent); font-weight:600; }
.hero__clock-line { display:block; }
.hero__ship { display:block; min-height:1.8em; color:var(--faint); }
.hero__ship a { color:inherit; text-decoration:none; }
.hero__ship a:hover { color:var(--accent); }

/* The route: one line, five stops. A flex row on wide screens; the same
   markup turns into a vertical strip map on phones (see the 640px query).
   Each stop draws the segment to its successor (::after) so the line can be
   drawn stop by stop; the ring is ::before. */
.rt { display:flex; position:relative; margin:48px 0 40px; }
.rt__stop { position:relative; flex:1 1 0; min-width:0; padding:32px 14px 0 0; }
.rt__stop::after { content:""; position:absolute; top:7px; left:50%; width:100%; height:var(--lw); background:var(--accent); z-index:0; transform-origin:left; }
.rt__stop:last-child::after { width:50%; background:none; border-top:var(--lw) dotted var(--accent); opacity:.55; height:0; mask-image:linear-gradient(90deg, #000 40%, transparent); -webkit-mask-image:linear-gradient(90deg, #000 40%, transparent); }
.rt__stop::before { content:""; position:absolute; top:4px; left:50%; width:14px; height:14px; margin-left:-7px; border-radius:50%; background:var(--bg); border:4px solid var(--accent); box-sizing:border-box; z-index:1; }
.rt__stop--ic::before { width:18px; height:18px; margin-left:-9px; top:2px; border-color:var(--text); }
.rt__stop--origin::before { width:var(--lw); height:24px; margin-left:-4px; top:-1px; border-radius:2px; background:var(--accent); border:0; }
.rt__stop--plan::before { opacity:.45; }
.rt__name { display:block; font-family:var(--serif); font-weight:600; font-size:17px; line-height:1.3; text-align:center; }
.rt__sub { display:block; margin-top:4px; font-size:13px; line-height:1.45; color:var(--muted); text-align:center; text-wrap:balance; }
.rt__you { display:block; margin-top:6px; font-size:11.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--accent); text-align:center; }
.rt__here { position:absolute; top:11px; left:50%; width:0; height:0; z-index:0; }
.rt__here::before { content:""; position:absolute; left:-14px; top:-14px; width:28px; height:28px; border-radius:50%; border:2px solid var(--accent); opacity:0; }
/* mini variant: a stack line inside a board, in that board's line colour */
.rt--mini { margin:22px 0 6px; }
.rt--sage { --accent:var(--c-sage); }
.rt--mini .rt__stop { padding:22px 8px 0 0; }
.rt--mini .rt__stop::after { height:5px; top:5px; }
.rt--mini .rt__stop::before { width:11px; height:11px; margin-left:-5px; top:2px; border-width:3px; }
.rt--mini .rt__stop--origin::before { width:5px; height:17px; margin-left:-2px; top:-1px; }
.rt--mini .rt__stop:last-child::after { border-top-width:5px; }
.rt--mini .rt__name { font-family:var(--font); font-weight:700; font-size:12.5px; }
.rt--mini .rt__sub { font-size:11.5px; margin-top:2px; }

.hero__cta { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:28px 56px; align-items:end; }
.hero__pitch { font-family:var(--serif); font-weight:400; font-size:clamp(23px, 2.5vw, 30px); line-height:1.35; letter-spacing:-0.01em; max-width:30ch; text-wrap:pretty; }
.hero__proof { margin-top:16px; font-size:16.5px; line-height:1.6; color:var(--muted); max-width:60ch; text-wrap:pretty; }
.ic { color:var(--text); font-weight:600; white-space:nowrap; }
.ic::before { content:""; display:inline-block; width:10px; height:10px; margin:0 5px 2px 0; border-radius:50%; border:2.5px solid var(--text); background:var(--bg); vertical-align:middle; }
.hero__actions { display:flex; gap:14px; align-items:center; padding-bottom:4px; }

/* ---- Buttons ------------------------------------------------------------- */
.btn { display:inline-flex; align-items:center; gap:10px; height:50px; padding:0 28px; border-radius:25px; font-weight:600; font-size:14.5px; text-decoration:none; white-space:nowrap; border:1.5px solid transparent; line-height:1; }
.btn svg { width:16px; height:16px; }
.btn--solid { background:var(--text); color:var(--bg); }
.btn--solid:hover { opacity:.88; transform:translateY(-1px); }
.btn--ghost { border-color:var(--line2); color:var(--text); background:transparent; }
.btn--ghost:hover { border-color:var(--text2); }

/* ---- Sections ------------------------------------------------------------ */
.sec { padding:96px 0; border-top:1px solid var(--line); }
.sec__head { margin-bottom:52px; }
.sec__bar { width:48px; height:8px; border-radius:4px; background:var(--accent); margin-bottom:22px; }
.sec__title { font-family:var(--serif); font-weight:400; font-size:clamp(32px, 4vw, 46px); letter-spacing:-0.02em; }
.sec__lead { margin-top:16px; font-size:17.5px; line-height:1.6; color:var(--muted); max-width:56ch; text-wrap:pretty; }
.more-link { display:inline-flex; align-items:center; gap:8px; margin-top:22px; font-weight:600; font-size:14.5px; text-decoration:none; color:var(--text); border-bottom:1.5px solid var(--accent); padding-bottom:3px; }
.more-link:hover { color:var(--accent); }
.more-link svg { width:14px; height:14px; color:var(--accent); }

/* ---- Work: station boards ------------------------------------------------
   A board is a framed panel with a name sign: a short piece of line in the
   domain's colour, the station name in the serif, the line name in mono. */
.board { border:1px solid var(--line2); border-radius:12px; overflow:hidden; background:var(--bg2); transition:border-color .3s ease, transform .25s ease; --sc:var(--accent); }
.board__sign { display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line2); font-family:var(--serif); font-weight:600; font-size:16px; line-height:1.2; color:var(--text); }
.board__sign::before { content:""; width:22px; height:8px; border-radius:4px; background:var(--sc); flex-shrink:0; }
.board__sign small { margin-left:auto; font-family:var(--mono); font-weight:500; font-size:10.5px; letter-spacing:.02em; color:var(--muted); white-space:nowrap; }
.board__sign--amber { --sc:var(--c-amber); } .board__sign--sage { --sc:var(--c-sage); } .board__sign--crimson { --sc:var(--c-crimson); }
.board__sign--gold { --sc:var(--c-gold); } .board__sign--azure { --sc:var(--c-azure); }
.board__img { width:100%; aspect-ratio:16 / 10; object-fit:cover; object-position:top; background:var(--bg3); }

.feature { display:grid; grid-template-columns:1.2fr 1fr; gap:48px; align-items:start; }
.feature__body h3 { font-size:clamp(24px, 2.6vw, 30px); }
.feature__role { margin-top:10px; color:var(--accent); font-weight:600; font-size:15px; }
.outcomes { margin-top:22px; display:grid; gap:12px; }
.outcomes li { position:relative; padding-left:26px; color:var(--text2); font-size:15.5px; line-height:1.6; }
.outcomes li::before { content:""; position:absolute; left:0; top:.52em; width:11px; height:11px; border-radius:50%; border:3px solid var(--accent); background:var(--bg); }
.chips { display:flex; flex-wrap:wrap; gap:7px; margin-top:20px; }
.chip { display:inline-flex; align-items:center; height:27px; padding:0 11px; border-radius:14px; border:1px solid var(--line2); font-size:12px; font-weight:500; color:var(--muted); white-space:nowrap; }

.stations { display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; margin-top:56px; }
.station { display:block; text-decoration:none; color:inherit; }
.station:hover .board, .station:focus-visible .board { border-color:var(--accent); transform:translateY(-2px); }
.station__desc { margin-top:14px; font-size:14.5px; line-height:1.55; color:var(--muted); display:flex; gap:10px; align-items:flex-start; }
.station__desc .ext { margin-top:4px; }

.indie { display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:28px; align-items:start; }
.indie .board:hover { border-color:var(--accent); }
.indie__body { padding:22px 24px 26px; }
.indie__body h3 { font-size:24px; }
.indie__body p { margin-top:10px; color:var(--muted); font-size:15px; line-height:1.6; text-wrap:pretty; }
.indie__body .more-link { margin-top:18px; }

.stops { display:grid; grid-template-columns:1fr 1fr; gap:48px; margin-top:64px; }
.stops__label { font-weight:600; font-size:13.5px; color:var(--muted); margin-bottom:6px; }
.stop { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 4px; border-top:1px solid var(--line); text-decoration:none; color:inherit; transition:transform .25s ease; }
.stop:last-child { border-bottom:1px solid var(--line); }
.stop:hover { transform:translateX(12px); }
.stop:hover .stop__name { color:var(--accent); }
.stop__name { font-family:var(--serif); font-weight:500; font-size:21px; transition:color .2s ease; }
.stop__meta { font-size:13px; color:var(--faint); display:flex; align-items:center; gap:10px; text-align:right; }

/* ---- Record: the line diagram with the detail ----------------------------- */
.record { display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:64px; align-items:start; }
.record__side { position:sticky; top:98px; }
.about { margin-top:24px; font-size:17.5px; line-height:1.65; color:var(--text2); max-width:52ch; text-wrap:pretty; }
.record__links { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.tl { --rc:var(--accent); padding-left:52px; }
.tl::before { left:12px; top:14px; bottom:14px; }
.tl > li { padding-bottom:52px; }
.tl > li:last-child { padding-bottom:0; }
.tl > li::before { left:-48px; top:8px; margin-top:0; width:16px; height:16px; border:4px solid var(--text); }
.tl > li.tl__stop--origin::before { width:var(--lw); height:24px; left:-40px; top:6px; border:0; border-radius:2px; background:var(--accent); }
.tl > li.tl__stop--here::after { content:""; position:absolute; left:-50px; top:6px; width:28px; height:28px; border-radius:50%; border:2px solid var(--accent); opacity:0; }
.tl__meta { font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:12px; color:var(--muted); display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.tl__you { font-family:var(--font); font-size:11.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--accent); }
.tl__org { font-size:26px; margin-top:8px; }
.tl__role { color:var(--accent); font-weight:600; font-size:15px; margin-top:4px; }
.tl__list { margin-top:16px; display:grid; gap:10px; max-width:64ch; }
.tl__list li { position:relative; padding-left:22px; color:var(--text2); font-size:15.5px; line-height:1.6; }
.tl__list li::before { content:""; position:absolute; left:0; top:.65em; width:10px; height:3px; border-radius:2px; background:var(--accent); }
.tl .chips { margin-top:14px; }
.tl__edu { color:var(--text2); font-size:15.5px; margin-top:8px; }

/* ---- Approach ------------------------------------------------------------ */
.rules { display:grid; grid-template-columns:repeat(3, 1fr); gap:40px; }
.rule::before { content:""; display:block; width:16px; height:16px; border-radius:50%; border:4px solid var(--accent); background:var(--bg); margin-bottom:18px; }
.rule h3 { font-size:22px; }
.rule p { margin-top:11px; color:var(--muted); font-size:15.5px; line-height:1.65; max-width:40ch; text-wrap:pretty; }

/* ---- Network: the systems map as a 5-line diagram ------------------------- */
.net-wrap { border:1px solid var(--line2); border-radius:16px; background:radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 55%), var(--bg2); padding:22px 24px 16px; }
.net { display:block; width:100%; height:auto; overflow:visible; }
.net text { font-family:var(--font); font-size:12.5px; font-weight:600; fill:var(--text2); }
.net .st--company text { font-family:var(--serif); font-size:15px; font-weight:600; fill:var(--text); }
.net .st--ic text { fill:var(--text); }
.net .n-col, .net .dot { pointer-events:none; }
.net .n-col { font-size:10.5px; font-weight:700; fill:var(--muted); letter-spacing:.1em; text-transform:uppercase; }
.net .ln { fill:none; stroke-width:8; stroke-linecap:round; stroke-linejoin:round; opacity:.78; transition:opacity .3s ease, stroke-width .3s ease; }
.net .ln--term { stroke-linecap:butt; }
.net .ln--amber { stroke:var(--c-amber); } .net .ln--sage { stroke:var(--c-sage); } .net .ln--azure { stroke:var(--c-azure); }
.net .ln--gold { stroke:var(--c-gold); } .net .ln--crimson { stroke:var(--c-crimson); }
.net .st { cursor:pointer; outline:none; transition:opacity .3s ease; }
.net .st circle { fill:var(--bg); stroke:var(--text); stroke-width:4; transition:stroke-width .2s ease; }
.net .st--amber circle { stroke:var(--c-amber); } .net .st--sage circle { stroke:var(--c-sage); } .net .st--azure circle { stroke:var(--c-azure); }
.net .st--gold circle { stroke:var(--c-gold); } .net .st--crimson circle { stroke:var(--c-crimson); }
.net .st:hover circle, .net .st:focus-visible circle, .net .st.is-on circle { stroke-width:6; }
/* the focus ring doubles as the hit area (a painted transparent fill catches the pointer) */
.net .st__focus { fill:transparent; stroke:var(--accent); stroke-width:3; opacity:0; }
.net .st:focus-visible .st__focus { opacity:1; }
.net .st:hover .st__focus { opacity:.35; }
.net.is-tracing .ln:not(.is-on) { opacity:.1; }
.net.is-tracing .st:not(.is-on) { opacity:.28; }
.net .ln.is-on { opacity:1; stroke-width:11; }
/* service particles: three per line, always riding at rest; brighter on a trace */
.net .dot { r:3.5; fill:var(--sc); opacity:.55; offset-rotate:0deg; animation:ride 14s linear infinite; transition:opacity .3s ease; }
.net .dot--amber { --sc:var(--c-amber); } .net .dot--sage { --sc:var(--c-sage); } .net .dot--azure { --sc:var(--c-azure); }
.net .dot--gold { --sc:var(--c-gold); } .net .dot--crimson { --sc:var(--c-crimson); }
.net.is-tracing .dot:not(.is-on) { opacity:.06; }
.net .dot.is-on { opacity:1; r:5; }
@keyframes ride { from { offset-distance:0%; } to { offset-distance:100%; } }
.net-foot { display:flex; justify-content:space-between; align-items:center; gap:16px 28px; flex-wrap:wrap; margin-top:14px; }
.net-key { display:flex; gap:16px 20px; flex-wrap:wrap; }
.net-key li { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--text2); }
.net-key i { display:inline-block; width:22px; height:8px; border-radius:4px; }
.net-key .k-amber { background:var(--c-amber); } .net-key .k-sage { background:var(--c-sage); } .net-key .k-azure { background:var(--c-azure); }
.net-key .k-gold { background:var(--c-gold); } .net-key .k-crimson { background:var(--c-crimson); }
.net-thread { font-size:14px; line-height:1.5; color:var(--text2); min-height:1.5em; flex:1 1 320px; }
.net-thread b { color:var(--text); font-family:var(--serif); font-weight:600; font-size:15px; }
.net-thread span { display:block; }
.net-reset { height:30px; padding:0 12px; font-size:11.5px; }

/* Phones: five vertical strip maps instead of the diagram */
.strips { display:none; grid-template-columns:1fr; gap:26px; }
.strip { --rc:var(--c-amber); }
.strip--sage { --rc:var(--c-sage); } .strip--azure { --rc:var(--c-azure); } .strip--gold { --rc:var(--c-gold); } .strip--crimson { --rc:var(--c-crimson); }
.strip__name { display:flex; align-items:center; gap:10px; margin:0 0 4px; font-family:var(--font); font-size:13.5px; font-weight:700; color:var(--rc); }
.strip__name::before { content:""; width:22px; height:8px; border-radius:4px; background:var(--rc); }
.strip .vline { padding-left:34px; --rc:inherit; }
.strip .vline::before { left:11px; top:16px; bottom:16px; width:6px; }
.strip .vline > li::before { width:12px; height:12px; margin-top:-10px; left:-30px; }
.strip button { display:block; width:100%; appearance:none; background:none; border:0; padding:8px 0; text-align:left; font-size:16px; font-weight:600; color:var(--text); cursor:pointer; border-radius:4px; transition:color .2s ease; }
.strip button small { font-size:12px; font-weight:600; color:var(--muted); }
.strip li.is-on button { color:var(--rc); }
.strip button[aria-pressed="true"] { text-decoration:underline; text-decoration-thickness:3px; text-underline-offset:5px; text-decoration-color:var(--rc); }
.strips.is-tracing .strip:not(.is-on) { opacity:.3; }
.strips.is-tracing .strip.is-on li:not(.is-on) button { color:var(--muted); }
.strips__foot { margin-top:18px; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }

/* ---- Terminus (contact) -------------------------------------------------- */
.terminus { padding:120px 0 96px; border-top:1px solid var(--line); }
.terminus__title { font-family:var(--serif); font-weight:400; font-size:clamp(46px, 7vw, 84px); line-height:.98; letter-spacing:-0.025em; max-width:12ch; }
.terminus__lead { margin-top:32px; font-size:19px; line-height:1.6; color:var(--muted); max-width:46ch; text-wrap:pretty; }
.terminus__email { display:inline-flex; align-items:center; gap:14px; margin-top:44px; font-family:var(--serif); font-size:clamp(22px, 3.2vw, 34px); font-weight:500; text-decoration:none; color:var(--text); border-bottom:1.5px solid var(--line2); padding-bottom:8px; transition:color .2s ease, border-color .2s ease; }
.terminus__email:hover { color:var(--accent); border-color:var(--accent); }
.terminus__email svg { width:.8em; height:.8em; color:var(--accent); }
.terminus__social { display:flex; gap:26px; margin-top:36px; }
.terminus__social a { font-weight:600; font-size:14.5px; color:var(--muted); text-decoration:none; padding:10px 0; }
.terminus__social a:hover { color:var(--accent); }

/* ---- Footer -------------------------------------------------------------- */
.footer { border-top:1px solid var(--line); }
.footer__inner { padding-top:30px; padding-bottom:34px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px 28px; font-size:13px; color:var(--faint); }
.footer__inner a { text-decoration:none; color:var(--muted); padding:8px 0; font-weight:600; }
.footer__inner a:hover { color:var(--accent); }
.footer__links { display:flex; gap:22px; flex-wrap:wrap; }

/* ---- Command palette (⌘K): "Where to?" ----------------------------------- */
.cmdk { position:fixed; inset:0; z-index:200; display:none; align-items:flex-start; justify-content:center; background:rgba(0,0,0,.45); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); opacity:0; transition:opacity .2s; }
.cmdk__box { margin-top:13vh; width:min(560px, 92vw); background:var(--bg2); border:1px solid var(--line2); border-radius:14px; box-shadow:0 30px 90px rgba(0,0,0,.55); overflow:hidden; transform:translateY(10px); transition:transform .2s; }
.cmdk__head { display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line2); }
.cmdk__hint { font-family:var(--serif); font-style:italic; font-weight:600; font-size:15px; color:var(--accent); white-space:nowrap; }
.cmdk__input { flex:1; min-width:0; background:transparent; border:none; outline:none; color:var(--text); font-family:var(--font); font-size:15.5px; }
.cmdk__input::placeholder { color:var(--faint); }
.cmdk__esc { font-family:var(--mono); font-size:10px; color:var(--faint); border:1px solid var(--line2); border-radius:4px; padding:2px 6px; }
.cmdk__list { max-height:344px; overflow-y:auto; padding:8px; }
.cmdk__item { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 12px 11px 32px; border-radius:8px; cursor:pointer; font-size:14px; font-weight:500; color:var(--text); position:relative; }
.cmdk__item::before { content:""; position:absolute; left:12px; top:50%; width:8px; height:8px; margin-top:-6px; border-radius:50%; border:2.5px solid var(--line2); }
.cmdk__item.is-active { background:var(--line2); }
.cmdk__item.is-active::before { border-color:var(--accent); }
.cmdk__item-kbd { font-family:var(--mono); font-size:10px; color:var(--faint); white-space:nowrap; }

/* ---- 404 ----------------------------------------------------------------- */
.nf { min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding-top:64px; padding-bottom:64px; }
.nf__title { font-family:var(--serif); font-weight:400; font-size:clamp(42px, 8vw, 88px); letter-spacing:-0.025em; line-height:1; max-width:14ch; margin-top:28px; }
.nf__lead { margin-top:26px; font-size:18px; line-height:1.6; color:var(--muted); max-width:46ch; text-wrap:pretty; }
.nf__lead a { color:var(--text); }
.nf__actions { display:flex; gap:12px; align-items:center; margin-top:36px; flex-wrap:wrap; }
.nf__links { display:flex; flex-wrap:wrap; gap:22px; margin-top:34px; }
.nf__links a { font-weight:600; color:var(--muted); text-decoration:none; padding:8px 0; }
.nf__links a:hover { color:var(--accent); }

/* ---- Motion ---------------------------------------------------------------
   Arrival: the name settles, the route draws itself stop by stop, the
   "you are here" ring breathes. At rest the ambient layer keeps the page
   alive: the flow field, the particles riding the network lines, and the
   sections fading up as they arrive (js). Content is visible by default
   (no-JS, print, reduced motion and headless renders all get the drawn line). */
@keyframes heroIn { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: no-preference) {
  .hero__name { animation:heroIn 1s cubic-bezier(.2,.7,.2,1) both; }
  .hero .rt__stop::after { transform:scaleX(0); animation:rt-draw .55s cubic-bezier(.2,.7,.2,1) both; }
  .hero .rt__stop::before, .hero .rt__stop > * { opacity:0; animation:rt-pop .5s cubic-bezier(.16,1,.3,1) both; }
  .hero .rt__stop:nth-child(1)::after { animation-delay:.35s; } .hero .rt__stop:nth-child(1)::before, .hero .rt__stop:nth-child(1) > * { animation-delay:.3s; }
  .hero .rt__stop:nth-child(2)::after { animation-delay:.8s; }  .hero .rt__stop:nth-child(2)::before, .hero .rt__stop:nth-child(2) > * { animation-delay:.8s; }
  .hero .rt__stop:nth-child(3)::after { animation-delay:1.25s; } .hero .rt__stop:nth-child(3)::before, .hero .rt__stop:nth-child(3) > * { animation-delay:1.25s; }
  .hero .rt__stop:nth-child(4)::after { animation-delay:1.7s; } .hero .rt__stop:nth-child(4)::before, .hero .rt__stop:nth-child(4) > * { animation-delay:1.7s; }
  .hero .rt__stop:nth-child(5)::after { animation-delay:2.15s; } .hero .rt__stop:nth-child(5)::before, .hero .rt__stop:nth-child(5) > * { animation-delay:2.15s; }
  .hero .rt__here::before { animation:rt-pulse 2.6s cubic-bezier(.2,.6,.3,1) 2.6s infinite; }
  .tl__stop--here::after { animation:rt-pulse 2.6s cubic-bezier(.2,.6,.3,1) infinite; }
}
@keyframes rt-draw { to { transform:scaleX(1); } }
@keyframes rt-pop { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@keyframes rt-pulse { 0% { transform:scale(.45); opacity:.9; } 100% { transform:scale(1.6); opacity:0; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .net .dot, .scroll-prog, .cursor-ring { display:none; }
}

/* Cross-document view transitions (index ↔ résumé ↔ architecture): crossfade. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation:auto; }
  .theme-toggle { view-transition-name:theme-toggle; }
}

/* Touch: real press feedback (no hover on phones) */
@media (hover: none) {
  .btn:active, .ctl:active { transform:scale(.97); }
  .strip button:active { color:var(--rc); }
  .station:active .board { border-color:var(--accent); }
}

/* ===========================================================================
   Responsive
   =========================================================================== */
@media (max-width: 960px) {
  :root { --gutter:24px; }
  .nav__links, .avail, .nav__cmdk, .nav__edition, .nav .line-swatch, .nav .theme-toggle { display:none !important; }
  .nav .nav__email { display:inline-flex; }
  .nav__burger { display:inline-flex; }
  .nav__actions { gap:8px; }
  .feature { grid-template-columns:1fr; gap:28px; }
  .stations { grid-template-columns:1fr 1fr; gap:22px; }
  .rules { grid-template-columns:1fr; gap:30px; }
  .record { grid-template-columns:1fr; gap:40px; }
  .record__side { position:static; }
  .net-wrap { display:none; }
  .strips { display:grid; }
  .sec { padding:72px 0; }
  .terminus { padding:88px 0 72px; }
}
@media (max-width: 640px) {
  :root { --gutter:20px; }
  .hero { padding-top:36px; }
  .hero__top { flex-direction:column; gap:14px; }
  .hero__clock { text-align:left; padding-top:0; order:-1; white-space:normal; }
  .hero__name { font-size:clamp(50px, 14vw, 62px); }
  .hero__role { margin-top:14px; font-size:18px; }
  /* The route becomes a vertical strip map: rail on the left, rings on the
     station name line, labels to the right. */
  .rt { flex-direction:column; margin:30px 0 30px; }
  .rt__stop { padding:0 0 22px 40px; flex:none; }
  .rt__stop::after { left:11px; top:10px; width:var(--lw); height:100%; transform-origin:top; }
  .rt__stop:last-child::after { width:0; height:60%; border-top:0; border-left:var(--lw) dotted var(--accent); mask-image:linear-gradient(180deg, #000 30%, transparent); -webkit-mask-image:linear-gradient(180deg, #000 30%, transparent); }
  .rt__stop::before { left:8px; top:3px; margin-left:0; }
  .rt__stop--ic::before { left:6px; top:1px; margin-left:0; }
  .rt__stop--origin::before { left:11px; top:-2px; margin-left:0; width:var(--lw); height:24px; }
  .rt__here { left:15px; top:10px; }
  .rt__name, .rt__sub, .rt__you { text-align:left; }
  .rt__sub { text-wrap:pretty; }
  .hero .rt__stop::after { animation-name:rt-draw-v; }
  .rt--mini { flex-direction:row; margin:18px 0 4px; }
  .rt--mini .rt__stop { padding:20px 6px 0 0; flex:1 1 0; }
  .rt--mini .rt__stop::after { left:50%; top:5px; width:100%; height:5px; transform-origin:left; }
  .rt--mini .rt__stop:last-child::after { width:50%; height:0; border-left:0; border-top:5px dotted var(--accent); mask-image:linear-gradient(90deg, #000 40%, transparent); -webkit-mask-image:linear-gradient(90deg, #000 40%, transparent); }
  .rt--mini .rt__stop::before { left:50%; top:2px; margin-left:-5px; }
  .rt--mini .rt__stop--origin::before { margin-left:-2px; top:-1px; width:5px; height:17px; }
  .rt--mini .rt__name, .rt--mini .rt__sub { text-align:center; }
  .hero__cta { grid-template-columns:1fr; gap:22px; }
  .hero__pitch { font-size:23px; }
  .hero__actions { flex-wrap:wrap; }
  .btn { height:48px; padding:0 22px; }
  .sec { padding:60px 0; }
  .sec__head { margin-bottom:32px; }
  .stations { grid-template-columns:1fr; }
  .indie { grid-template-columns:1fr; }
  .stops { grid-template-columns:1fr; gap:28px; margin-top:48px; }
  .stop { flex-direction:column; align-items:flex-start; gap:4px; }
  .stop:hover { transform:none; }
  .stop__meta { text-align:left; }
  .tl { padding-left:44px; }
  .tl > li::before { left:-40px; }
  .tl > li.tl__stop--origin::before { left:-32px; }
  .tl > li.tl__stop--here::after { left:-42px; }
  .tl > li { padding-bottom:40px; }
  .terminus { padding:72px 0 56px; }
  .terminus__social { flex-wrap:wrap; gap:8px 22px; }
  .footer__inner { flex-direction:column; align-items:flex-start; gap:6px; }
  .mm-strip a { font-size:28px; }
}
@keyframes rt-draw-v { to { transform:scaleY(1); } }
@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  .hero .rt__stop::after { transform:scaleY(0); }
}

/* ---- Print: the printed map, minus the chrome ----------------------------- */
@media print {
  :root, :root[data-theme] { --bg:#fff; --bg2:#f6f2ea; --bg3:#f1ebdd; --text:#1c1611; --text2:#3d3327; --muted:#5f5342; --faint:#6b5e4a; --line:#ddd3c4; --line2:#d2c6b2; --c-amber:#a24b16; --c-gold:#7f5c1c; --c-sage:#4f6a41; --c-azure:#1a5fd0; --c-crimson:#c21f4a; }
  .nav, .mobile-menu, .cmdk, .skip, .bg-flow, .scroll-prog, .cursor-ring, .hero__actions, .net-reset, .strips, .footer__links { display:none !important; }
  .net-wrap { display:block !important; }
  .sec, .terminus { padding:36px 0; break-inside:avoid; }
  *, *::before, *::after { animation:none !important; transition:none !important; opacity:1 !important; transform:none !important; }
}