/* Propagation — production stylesheet for abdullahsemihturhan.com.
   Ported 1:1 from the approved Phase 2 prototype (design freeze 2026-09-28).
   Differences from the prototype are limited to: self-hosted fonts, prototype chrome removed,
   no-JS / reduced-motion final states (html.js / html.motion set before first paint),
   and multi-page view transitions. */

@font-face{ font-family:'Archivo'; src:url('../fonts/archivo.woff2') format('woff2'); font-weight:300 800; font-stretch:62% 125%; font-style:normal; font-display:swap; }
@font-face{ font-family:'Newsreader'; src:url('../fonts/newsreader.woff2') format('woff2'); font-weight:400 500; font-style:normal; font-display:swap; }
@font-face{ font-family:'Newsreader'; src:url('../fonts/newsreader-italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face{ font-family:'Martian Mono'; src:url('../fonts/martian.woff2') format('woff2'); font-weight:400 500; font-style:normal; font-display:swap; }

:root{
  /* colour — light "Mineral" */
  --bg:#ECEEEA; --bg-2:#E1E5DF; --surface:#F6F7F4; --raised:#FCFCFA;
  --ink:#151A18; --ink-2:#3C4541; --ink-3:#5E6863;
  --line:#BFC6C0; --line-soft:#D3D8D2; --grid:#DCE0DA;
  --signal:#0A6A5C; --signal-2:#0E8573; --signal-soft:#CBE2DB;
  --heat:#8F5400; --heat-2:#C4861A; --heat-soft:#F1DEBC;
  --stream-1:#0E8573; --stream-2:#1C7A86; --stream-3:#3F7F5E; --stream-4:#0B5E57;
  --map-land:#DDE1DB; --map-edge:#C7CDC6; --map-on:#CFDDD5; --map-on-edge:#6E8A7E;
  --ok:#2C6A38; --warn:#8F5400; --err:#A8261C; --focus:#0A6A5C; --selection:#CBE2DB;
  --glow:none; --glow-soft:none;
  --shadow-pop:0 22px 48px -24px rgba(21,26,24,.35), 0 2px 6px -2px rgba(21,26,24,.12);
  --inv-bg:#151A18; --inv-fg:#ECEEEA;
  --logo-light:block; --logo-dark:none;

  /* type */
  --f-display:'Archivo','Arial Narrow',Arial,sans-serif;
  --f-serif:'Newsreader','Iowan Old Style',Georgia,serif;
  --f-mono:'Martian Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --t-xs:.75rem; --t-sm:.875rem; --t-base:1.0625rem; --t-md:1.25rem; --t-lg:1.625rem;
  --t-xl:clamp(1.9rem,1.2rem + 2.4cqi,3rem);
  --t-xxl:clamp(2.6rem,1.2rem + 5.2cqi,5.4rem);
  --t-name:clamp(3.6rem,1rem + 11cqi,11.5rem);

  /* space */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;
  --gutter:clamp(16px,4.2cqi,64px); --col-gap:clamp(12px,1.8cqi,28px); --max:1440px; --measure:66ch;

  /* geometry: structure is square, controls barely soften, only status dots are round */
  --r-0:0; --r-1:2px; --r-dot:999px; --b-hair:1px; --b-rule:1.5px; --b-strong:3px;

  /* motion families — one language, three speeds */
  --d-fast:160ms;     /* response: hover, focus, press */
  --d-med:420ms;      /* state: menus, filters, form, content swaps */
  --d-slow:1100ms;    /* narrative: routes, diagrams, drawing */
  --d-beat:380ms;     /* gap between narrative steps */
  --stagger:60ms;     /* sibling offset */
  --e-response:cubic-bezier(.2,.7,.2,1);
  --e-state:cubic-bezier(.65,0,.35,1);
  --e-narrative:cubic-bezier(.5,0,.1,1);

  /* layers */
  --z-raised:10; --z-header:50; --z-menu:80; --z-pop:90; --z-toast:100; --z-proto:120;
  /* breakpoints (container widths): 520 / 820 / 1100 / 1400 */
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0F1311; --bg-2:#141916; --surface:#19201C; --raised:#212823;
  --ink:#E5E9E2; --ink-2:#B1BBB4; --ink-3:#8C9690; --line:#313a35; --line-soft:#252c28; --grid:#1B211E;
  --signal:#5CD6BD; --signal-2:#3FBFA6; --signal-soft:#15352F; --heat:#F1B54C; --heat-2:#E4A53A; --heat-soft:#3A2C13;
  --stream-1:#4FCDB5; --stream-2:#5BB8D0; --stream-3:#8CCB8E; --stream-4:#3E9E8C;
  --map-land:#161C19; --map-edge:#222a26; --map-on:#1C2A25; --map-on-edge:#4E7A6C;
  --ok:#7ECB88; --warn:#F1B54C; --err:#F08C80; --focus:#5CD6BD; --selection:#1D4A41;
  --glow:drop-shadow(0 0 4px rgba(92,214,189,.35)); --glow-soft:drop-shadow(0 0 2px rgba(92,214,189,.25));
  --shadow-pop:0 24px 60px -20px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.04);
  --inv-bg:#1B2420; --inv-fg:#E5E9E2;
  --logo-light:none; --logo-dark:block;
  color-scheme:dark; } }
:root[data-theme="dark"], .tone-dark{
  --bg:#0F1311; --bg-2:#141916; --surface:#19201C; --raised:#212823;
  --ink:#E5E9E2; --ink-2:#B1BBB4; --ink-3:#8C9690; --line:#313a35; --line-soft:#252c28; --grid:#1B211E;
  --signal:#5CD6BD; --signal-2:#3FBFA6; --signal-soft:#15352F; --heat:#F1B54C; --heat-2:#E4A53A; --heat-soft:#3A2C13;
  --stream-1:#4FCDB5; --stream-2:#5BB8D0; --stream-3:#8CCB8E; --stream-4:#3E9E8C;
  --map-land:#161C19; --map-edge:#222a26; --map-on:#1C2A25; --map-on-edge:#4E7A6C;
  --ok:#7ECB88; --warn:#F1B54C; --err:#F08C80; --focus:#5CD6BD; --selection:#1D4A41;
  --glow:drop-shadow(0 0 4px rgba(92,214,189,.35)); --glow-soft:drop-shadow(0 0 2px rgba(92,214,189,.25));
  --shadow-pop:0 24px 60px -20px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.04);
  --inv-bg:#1B2420; --inv-fg:#E5E9E2;
  --logo-light:none; --logo-dark:block;
  color-scheme:dark;
}
.tone-light{
  --inv-bg:#151A18; --inv-fg:#ECEEEA; --logo-light:block; --logo-dark:none;
  --bg:#ECEEEA; --bg-2:#E1E5DF; --surface:#F6F7F4; --raised:#FCFCFA;
  --ink:#151A18; --ink-2:#3C4541; --ink-3:#5E6863; --line:#BFC6C0; --line-soft:#D3D8D2; --grid:#DCE0DA;
  --signal:#0A6A5C; --signal-2:#0E8573; --signal-soft:#CBE2DB; --heat:#8F5400; --heat-2:#C4861A; --heat-soft:#F1DEBC;
  --glow:none; --glow-soft:none; color-scheme:light;
}
.tone-light, .tone-dark{ background:var(--bg); color:var(--ink); }

/* ================= base ================= */
html{ -webkit-text-size-adjust:100%; }
body{ background:var(--bg); color:var(--ink); font-family:var(--f-serif); font-size:var(--t-base); line-height:1.55; }
*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none!important; }
::selection{ background:var(--selection); color:var(--ink); }
a{ color:inherit; }
button,input,select,textarea{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; border-radius:var(--r-1); }
h1,h2,h3,h4{ margin:0; font-family:var(--f-display); font-weight:700; text-wrap:balance; letter-spacing:-.01em; }
p{ margin:0; }
.sr{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.mono{ font-family:var(--f-mono); font-size:var(--t-xs); font-variation-settings:'wdth' 87.5; letter-spacing:.01em; font-variant-numeric:tabular-nums; }

.site{ container:site / inline-size; min-height:100vh; background:var(--bg); position:relative; }
.wrap{ max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter); }
.grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--col-gap); }
.skip{ position:absolute; left:var(--s-4); top:-60px; z-index:var(--z-toast); background:var(--ink); color:var(--bg); padding:10px 14px; font-family:var(--f-display); font-weight:600; text-decoration:none; }
.skip:focus{ top:var(--s-3); }

/* link: underline retracts and re-draws from the left, like a signal re-sent */
.link{ color:var(--signal); text-decoration:none; font-family:var(--f-display); font-weight:600; font-size:var(--t-base);
  background:linear-gradient(currentColor,currentColor) 0 100% / 100% 1.5px no-repeat; padding-bottom:2px; }
.link:hover, .link:focus-visible{ animation:relink var(--d-med) var(--e-state); }
@keyframes relink{ 0%{background-size:100% 1.5px;background-position:100% 100%} 49%{background-size:0% 1.5px;background-position:100% 100%} 50%{background-position:0 100%;background-size:0% 1.5px} 100%{background-size:100% 1.5px;background-position:0 100%} }
.ext{ display:inline-block; width:.7em; height:.7em; margin-left:.3em; vertical-align:.02em; transition:transform var(--d-fast) var(--e-response); }
a:hover .ext, a:focus-visible .ext{ transform:translate(2px,-2px); }

.status{ display:inline-flex; align-items:center; gap:8px; font-family:var(--f-mono); font-size:var(--t-xs); font-variation-settings:'wdth' 87.5; color:var(--ink-2); }
.status i{ width:8px; height:8px; border-radius:var(--r-dot); background:var(--heat-2); position:relative; flex:none; }
.status i::after{ content:""; position:absolute; inset:-4px; border-radius:var(--r-dot); border:1px solid var(--heat-2); opacity:0; animation:beacon 2.6s var(--e-response) 3; }
.status.is-flow i{ background:var(--signal-2); } .status.is-flow i::after{ border-color:var(--signal-2); }
.status.is-plain i{ background:transparent; border:1.5px solid var(--ink-3); } .status.is-plain i::after{ display:none; }
@keyframes beacon{ 0%{opacity:.9; transform:scale(.6)} 70%,100%{opacity:0; transform:scale(1.7)} }

.tagline{ display:flex; flex-wrap:wrap; gap:6px 16px; font-family:var(--f-display); font-size:var(--t-sm); color:var(--ink-2); font-variation-settings:'wdth' 88; }
.tagline span{ display:inline-flex; align-items:center; gap:6px; }
.tagline span::before{ content:""; width:10px; height:1.5px; background:currentColor; opacity:.6; }
.kicker{ font-family:var(--f-display); font-size:var(--t-sm); font-weight:600; color:var(--ink-3); font-variation-settings:'wdth' 90; }
.lead{ font-family:var(--f-serif); font-size:clamp(1.15rem,1rem + .7cqi,1.5rem); line-height:1.45; color:var(--ink-2); max-width:38ch; }
.note{ font-size:var(--t-sm); color:var(--ink-3); border-left:var(--b-hair) solid var(--line); padding-left:var(--s-3); }
.example{ display:inline-flex; gap:8px; align-items:center; font-family:var(--f-mono); font-size:var(--t-xs); color:var(--heat); border:var(--b-hair) dashed var(--heat-2); padding:4px 8px; }

.btn{ min-height:44px; padding:0 16px; border:var(--b-rule) solid var(--ink); background:transparent; color:var(--ink); border-radius:var(--r-1); cursor:pointer; font-family:var(--f-display); font-weight:650; font-size:var(--t-sm); display:inline-flex; align-items:center; gap:10px; font-variation-settings:'wdth' 92; text-decoration:none; transition:background var(--d-fast) var(--e-response), color var(--d-fast) var(--e-response); }
.btn:hover{ background:var(--ink); color:var(--bg); }
.btn.solid{ background:var(--ink); color:var(--bg); }
.btn.solid:hover{ background:var(--signal); border-color:var(--signal); color:var(--bg); }
.chip{ min-height:36px; padding:0 12px; border:var(--b-hair) solid var(--line); background:var(--bg); border-radius:var(--r-1); cursor:pointer; font-family:var(--f-display); font-size:var(--t-sm); font-weight:600; font-variation-settings:'wdth' 90; transition:border-color var(--d-fast), background var(--d-fast); }
.chip:hover{ border-color:var(--ink-3); }
.chip[aria-pressed="true"]{ border-color:var(--ink); background:var(--ink); color:var(--bg); }

/* reveal primitives (only used where named in the motion spec) */
.motion .draw{ stroke-dasharray:var(--len,1000); stroke-dashoffset:var(--len,1000); }
.motion .is-on .draw, .motion .draw.is-on{ stroke-dashoffset:0; transition:stroke-dashoffset var(--d-slow) var(--e-narrative); transition-delay:var(--delay,0ms); }
.lines > *{ display:block; overflow:hidden; }
.lines > * > span{ display:block; }
.is-on.lines > * > span, .is-on .lines > * > span{ animation:lineup var(--d-slow) var(--e-narrative) both; animation-delay:calc(var(--i,0) * 110ms); }
@keyframes lineup{ from{ transform:translateY(105%); } to{ transform:none; } }

/* ================= header ================= */
.hdr{ position:sticky; top:env(safe-area-inset-top,0px); z-index:var(--z-header); background:color-mix(in oklab,var(--bg) 88%,transparent); backdrop-filter:saturate(1.2) blur(10px); -webkit-backdrop-filter:saturate(1.2) blur(10px); border-bottom:var(--b-hair) solid var(--line-soft); }
.hdr-in{ display:flex; align-items:center; gap:var(--s-5); min-height:64px; }
.mark{ display:inline-flex; align-items:baseline; gap:10px; text-decoration:none; color:var(--ink); flex:none; }
.mark-name{ font-family:var(--f-display); font-size:1.02rem; font-weight:750; font-variation-settings:'wdth' 78; letter-spacing:-.005em; white-space:nowrap; }
.mark-name .sn{ font-weight:400; color:var(--ink-2); }
.mark-meta{ color:var(--ink-3); }
.nav{ margin-left:auto; position:relative; }
.nav ul{ list-style:none; margin:0; padding:0; display:flex; align-items:center; }
.nav li.sep{ width:1px; height:18px; background:var(--line); margin-inline:10px; }
.nav a{ display:block; padding:20px 10px; text-decoration:none; font-family:var(--f-display); font-size:.95rem; font-weight:500; color:var(--ink-2); font-variation-settings:'wdth' 88; transition:color var(--d-fast) var(--e-response), font-variation-settings var(--d-med) var(--e-state); }
.nav a:hover{ color:var(--ink); }
.nav a[aria-current="page"]{ color:var(--ink); font-weight:650; font-variation-settings:'wdth' 100; }
.nav a.nav-contact{ color:var(--signal); font-weight:650; }
.nav-ind{ position:absolute; left:0; bottom:-1px; height:2px; width:40px; background:var(--signal-2); pointer-events:none; filter:var(--glow); transition:transform var(--d-med) var(--e-state), width var(--d-med) var(--e-state), opacity var(--d-fast); }
.nav-ind::after{ content:""; position:absolute; right:-3px; top:-2px; width:6px; height:6px; border-radius:var(--r-dot); background:var(--signal-2); }
.ctrls{ display:flex; align-items:center; gap:6px; flex:none; }
.ctrl{ min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:0 10px; border:var(--b-hair) solid transparent; background:transparent; border-radius:var(--r-1); cursor:pointer; color:var(--ink); font-family:var(--f-display); font-size:var(--t-sm); font-weight:600; transition:border-color var(--d-fast); }
.ctrl:hover{ border-color:var(--line); }
.ctrl[aria-expanded="true"]{ border-color:var(--ink); }
.menu-btn{ display:none; }
.disc{ width:20px; height:20px; border-radius:var(--r-dot); border:1.5px solid var(--ink); position:relative; overflow:hidden; transition:transform var(--d-med) var(--e-state); }
.disc::before{ content:""; position:absolute; inset:0 50% 0 0; background:var(--ink); }
:root[data-theme="dark"] .disc{ transform:rotate(180deg); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .disc{ transform:rotate(180deg); } }
.lang{ position:relative; }
.pop{ position:absolute; right:0; top:calc(100% + 8px); width:270px; background:var(--raised); border:var(--b-hair) solid var(--line); box-shadow:var(--shadow-pop); padding:6px; z-index:var(--z-pop); animation:popin var(--d-med) var(--e-state); }
@keyframes popin{ from{ opacity:0; clip-path:inset(0 0 100% 0); } to{ opacity:1; clip-path:inset(0 0 0 0); } }
.pop h2{ font-size:var(--t-xs); font-weight:600; color:var(--ink-3); padding:8px 10px 6px; font-variation-settings:'wdth' 90; }
.opt{ display:flex; align-items:center; justify-content:space-between; width:100%; min-height:44px; padding:0 10px; background:transparent; border:0; text-align:left; cursor:pointer; font-family:var(--f-display); font-size:var(--t-base); position:relative; }
.opt:hover, .opt:focus-visible{ background:var(--bg-2); }
.opt[aria-checked="true"]{ font-weight:700; }
.opt .code{ font-family:var(--f-mono); font-size:var(--t-xs); color:var(--ink-3); display:inline-flex; align-items:center; gap:8px; }
.opt .code::before{ content:""; width:8px; height:8px; border-radius:var(--r-dot); background:var(--signal-2); transform:scale(0); transition:transform var(--d-med) var(--e-state); }
.opt[aria-checked="true"] .code::before{ transform:scale(1); }
.opt[disabled]{ cursor:default; color:var(--ink-3); font-size:var(--t-sm); }
.opt[disabled]:hover{ background:transparent; }
.pop-note{ border-top:var(--b-hair) solid var(--line-soft); margin-top:4px; padding:8px 10px 6px; font-size:var(--t-sm); color:var(--ink-3); font-style:italic; }
.progress{ position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--signal-2); transform:scaleX(0); transform-origin:left; }

/* ================= mobile menu: its own environment ================= */
.sheet{ position:fixed; inset:0; z-index:var(--z-menu); background:var(--bg); display:flex; flex-direction:column; padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px); overflow:auto; }
.sheet::before{ content:""; position:absolute; inset:0; background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px); background-size:48px 48px; opacity:.55; pointer-events:none; mask-image:linear-gradient(to bottom,transparent,#000 30%,#000 70%,transparent); }
.sheet > *{ position:relative; }
.sheet-top{ display:flex; align-items:center; justify-content:space-between; min-height:60px; border-bottom:var(--b-hair) solid var(--line-soft); }
.sheet-list{ list-style:none; margin:0; padding:var(--s-4) 0 var(--s-5) 0; position:relative; }
.sheet-list::before{ content:""; position:absolute; left:6px; top:24px; bottom:24px; width:1.5px; background:var(--signal-2); transform-origin:top; animation:drawdown var(--d-slow) var(--e-narrative) both; }
@keyframes drawdown{ from{ transform:scaleY(0);} to{ transform:scaleY(1);} }
.sheet-list li{ opacity:0; transform:translateX(-12px); animation:slidein var(--d-med) var(--e-response) forwards; animation-delay:calc(160ms + var(--i) * var(--stagger)); }
@keyframes slidein{ to{ opacity:1; transform:none; } }
.sheet-list a{ display:grid; grid-template-columns:20px 1fr; align-items:baseline; column-gap:12px; padding:9px 0; text-decoration:none; }
.sheet-list a::before{ content:""; width:10px; height:10px; border-radius:var(--r-dot); border:1.5px solid var(--ink-3); background:var(--bg); align-self:center; margin-left:1px; transition:transform var(--d-fast); }
.sheet-list a:hover::before{ transform:scale(1.3); }
.sheet-list a[aria-current="page"]::before{ background:var(--signal-2); border-color:var(--signal-2); box-shadow:0 0 0 4px var(--signal-soft); }
.sheet-list .t{ font-family:var(--f-display); font-size:2.1rem; font-weight:750; line-height:1.05; font-variation-settings:'wdth' 72; transition:font-variation-settings var(--d-med) var(--e-state); }
.sheet-list a:hover .t, .sheet-list a:focus-visible .t, .sheet-list a[aria-current="page"] .t{ font-variation-settings:'wdth' 92; }
.sheet-list .d{ grid-column:2; font-size:var(--t-sm); color:var(--ink-3); font-style:italic; }
.sheet-sub{ list-style:none; margin:2px 0 4px 32px; padding:0; display:flex; gap:16px; }
.sheet-sub a{ display:inline; padding:0; font-family:var(--f-display); font-weight:600; font-size:var(--t-sm); color:var(--ink-2); }
.sheet-sub a::before{ display:none; }
.sheet-ctrls{ margin-top:auto; border-top:var(--b-hair) solid var(--line-soft); padding-block:var(--s-5); display:grid; gap:var(--s-4); }
.sheet-foot{ display:flex; justify-content:space-between; color:var(--ink-3); padding-bottom:var(--s-4); }
.seg{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; border:var(--b-hair) solid var(--ink); position:relative; }
.seg button{ min-height:48px; background:transparent; border:0; cursor:pointer; font-family:var(--f-display); font-weight:600; font-size:var(--t-sm); position:relative; z-index:1; transition:color var(--d-med) var(--e-state); }
.seg button + button{ border-left:var(--b-hair) solid var(--ink); }
.seg button[aria-pressed="true"]{ background:var(--ink); color:var(--bg); }
.seg-label{ font-family:var(--f-display); font-size:var(--t-sm); font-weight:600; color:var(--ink-3); margin-bottom:6px; display:block; }

/* ================= HOME: hero ================= */
.hero{ position:relative; padding-block:var(--s-6) var(--s-8); overflow:hidden; overflow-anchor:none; }
.hero-meta{ display:flex; flex-wrap:wrap; gap:6px 28px; color:var(--ink-3); padding-bottom:var(--s-6); }
.hero-meta b{ font-weight:500; color:var(--ink-2); }
.hero-grid{ position:relative; z-index:1; align-items:center; }
.name{ grid-column:1 / span 8; font-family:var(--f-display); font-size:var(--t-name); line-height:.84; font-weight:800; letter-spacing:-.035em; margin:0; }
.name .w{ display:block; white-space:nowrap; }
.name .w + .w{ margin-top:.02em; }
.name .i{ position:relative; display:inline-block; transition:color var(--d-med) var(--e-state); }
.name .w:nth-child(1){ font-variation-settings:'wdth' 64; }
.name .w:nth-child(2){ font-variation-settings:'wdth' 100; font-weight:300; letter-spacing:-.02em; color:var(--ink-2); }
.name .w:nth-child(3){ font-variation-settings:'wdth' 78; }
.motion:not(.hero-seen) .name .w{ animation:settle 1200ms var(--e-narrative) both; }
.motion:not(.hero-seen) .name .w:nth-child(1){ --w0:108; --w1:64; }
.motion:not(.hero-seen) .name .w:nth-child(2){ animation-delay:90ms; --w0:125; --w1:100; }
.motion:not(.hero-seen) .name .w:nth-child(3){ animation-delay:180ms; --w0:112; --w1:78; }
@keyframes settle{ from{ clip-path:inset(-30% 100% -40% 0); font-variation-settings:'wdth' var(--w0); } 60%{ clip-path:inset(-30% -400% -40% -5%); } to{ clip-path:inset(-30% -400% -40% -5%); font-variation-settings:'wdth' var(--w1); } }
.outs{ grid-column:10 / span 3; grid-row:1 / span 2; list-style:none; margin:0; padding:0; display:grid; gap:var(--s-4); }
.out > a{ display:block; text-decoration:none; padding:4px 0 4px 20px; position:relative; }
.out > a::before{ content:""; position:absolute; left:0; top:12px; width:9px; height:9px; border:1.5px solid var(--ink); background:var(--bg); transform:rotate(45deg); transition:background var(--d-fast) var(--e-response), border-color var(--d-fast); }
.out.hot > a::before{ border-color:var(--heat-2); } .out.flow > a::before{ border-color:var(--signal-2); }
.out > a:hover::before, .out > a:focus-visible::before, .out.is-lit > a::before{ background:currentColor; }
.out .ot{ display:block; font-family:var(--f-display); font-weight:700; font-size:1.2rem; line-height:1.15; font-variation-settings:'wdth' 80; transition:font-variation-settings var(--d-med) var(--e-state); }
.out > a:hover .ot, .out > a:focus-visible .ot, .out.is-lit > a .ot{ font-variation-settings:'wdth' 100; }
.out .od{ display:block; font-size:var(--t-sm); color:var(--ink-3); line-height:1.35; margin-top:2px; }
.subs{ list-style:none; margin:10px 0 0 20px; padding:0; display:grid; gap:10px; }
.subs .out > a{ padding-left:18px; }
.subs .out > a::before{ width:8px; height:8px; top:9px; }
.subs .ot{ font-size:1.05rem; }
.hero-svg{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; overflow:visible; }
.hero-svg path{ fill:none; stroke:var(--line); stroke-width:1.25; transition:stroke var(--d-med) var(--e-state); }
.hero-svg path.base{ stroke:var(--ink-3); stroke-width:1.25; }
.hero-svg path.lit{ stroke:var(--signal-2); stroke-width:1.75; filter:var(--glow-soft); }
.hero-svg path.lit.hot{ stroke:var(--heat-2); }
.hero-svg .pulse{ fill:var(--signal-2); filter:var(--glow); }
.hero-svg .pulse.hot{ fill:var(--heat-2); }
.hero-svg .jn{ fill:var(--bg); stroke:var(--ink-2); stroke-width:1.5; }
.hero-foot{ margin-top:var(--s-7); align-items:start; position:relative; z-index:1; }
.hero-state{ grid-column:1 / span 6; font-family:var(--f-serif); font-size:clamp(1.25rem,1rem + 1cqi,1.7rem); line-height:1.38; max-width:34ch; }
.hero-state em{ font-style:italic; color:var(--ink-2); }
.hero-links{ grid-column:8 / span 5; display:flex; flex-wrap:wrap; gap:var(--s-5); align-self:end; }


/* hero morph: person becomes system, around the shared initials A, S, T */
.name{ --travel:.2em; }
.name .w{ position:relative; transform-origin:0 80%; transition:transform 700ms var(--e-state); }
.name .tail{ display:inline-block; white-space:nowrap; }
.name .ts{ position:absolute; left:var(--ix,0px); top:0; letter-spacing:-.035em; pointer-events:none; }
.name .ch{ display:inline-block; transition:transform var(--d-med) var(--e-state), opacity var(--d-med) var(--e-state); }
.name .ts .ch{ opacity:0; transform:translateX(calc(var(--k) * -1 * var(--travel) - .2em)); }
.name.to-sys .tn .ch{ opacity:0; transform:translateX(calc(var(--k) * -1 * var(--travel) - .15em)); transition-delay:calc((var(--n) - var(--k)) * 34ms); }
.name.to-sys .ts .ch{ opacity:1; transform:none; transition-delay:calc(300ms + var(--k) * 38ms); }
.name.to-sys .w{ transform:scale(var(--fit,1)); transition-delay:180ms; }
.name.back .ts .ch{ transition-delay:calc((var(--n) - var(--k)) * 28ms); }
.name.back .tn .ch{ transition-delay:calc(260ms + var(--k) * 36ms); }
.name.back .w{ transition-delay:120ms; }
.name.to-sys .i{ color:var(--heat); }
.name .i::after{ content:""; position:absolute; left:.04em; right:.04em; bottom:-.07em; height:.035em; min-height:3px; background:var(--signal-2); transform:scaleX(0); transform-origin:left; transition:transform var(--d-med) var(--e-state), background var(--d-med); }
.hero.drawn .name .i::after{ transform:scaleX(1); }
.name.to-sys .i::after{ background:var(--heat-2); }
.hero-tag{ grid-column:1 / span 8; justify-self:start; margin-top:var(--s-5); display:inline-flex; flex-wrap:wrap; align-items:center; gap:6px 14px; background:none; border:0; padding:4px 0; cursor:pointer; text-align:left; font-family:var(--f-mono); font-size:var(--t-xs); color:var(--ink-3); font-variation-settings:'wdth' 87.5; transition:color var(--d-med) var(--e-state); }
.hero-tag b{ font-family:var(--f-display); font-weight:750; font-size:.95rem; color:var(--ink-2); font-variation-settings:'wdth' 84; transition:color var(--d-med); }
.hero-tag .rp{ border-bottom:1px solid var(--line); transition:border-color var(--d-fast); }
.hero-tag:hover .rp, .hero-tag:focus-visible .rp{ border-color:var(--ink-3); }
.hero.is-sys .hero-tag{ color:var(--ink-2); }
.hero.is-sys .hero-tag b{ color:var(--heat); }
@container site (max-width:520px){ .name{ --travel:.08em; } .hero-tag{ grid-column:1 / -1; } }

/* focus strip */
.focus{ border-top:var(--b-hair) solid var(--line); border-bottom:var(--b-hair) solid var(--line); }
.focus-in{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.focus-in > div{ padding:var(--s-5) var(--s-5) var(--s-5) 0; display:grid; gap:6px; align-content:start; min-width:0; }
.focus-in > div + div{ padding-left:var(--s-5); border-left:var(--b-hair) solid var(--line-soft); }
.focus .v{ font-family:var(--f-display); font-weight:650; font-size:1.05rem; font-variation-settings:'wdth' 88; line-height:1.25; }
.focus .v small{ display:block; font-family:var(--f-serif); font-weight:400; font-size:var(--t-sm); color:var(--ink-3); margin-top:2px; }

/* sections */
.sec{ padding-block:var(--s-9); }
.sec-head{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--col-gap); align-items:end; margin-bottom:var(--s-7); }
.sec-head h2{ grid-column:1 / span 7; font-size:var(--t-xxl); line-height:.92; font-weight:800; font-variation-settings:'wdth' 72; letter-spacing:-.03em; }
.sec-head p{ grid-column:9 / span 4; color:var(--ink-2); max-width:38ch; }
.band{ background:var(--bg-2); border-top:var(--b-hair) solid var(--line-soft); border-bottom:var(--b-hair) solid var(--line-soft); }

/* ================= featured systems (equal status) ================= */
.fs{ background:var(--bg-2); border-top:var(--b-hair) solid var(--line-soft); border-bottom:var(--b-hair) solid var(--line-soft); }
.sys{ padding-block:var(--s-8); }
.sys + .sys{ border-top:var(--b-hair) solid var(--line); }
.sys-grid{ align-items:center; }
.sys-fig{ grid-column:1 / span 7; min-width:0; margin:0; }
.sys-copy{ grid-column:9 / span 4; display:grid; gap:var(--s-5); align-content:start; min-width:0; }
.sys.flip .sys-fig{ grid-column:6 / span 7; grid-row:1; }
.sys.flip .sys-copy{ grid-column:1 / span 4; grid-row:1; }
.sys-title{ font-size:clamp(2.4rem,1.2rem + 4cqi,4.6rem); line-height:.9; font-weight:800; font-variation-settings:'wdth' 70; letter-spacing:-.03em; }
.sys-title .sub{ display:block; font-size:.36em; font-weight:500; letter-spacing:0; font-variation-settings:'wdth' 90; color:var(--ink-2); margin-top:.5em; line-height:1.2; }
.sys-copy .desc{ font-size:1.2rem; line-height:1.5; max-width:34ch; }
.concepts{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 20px; }
.concepts li{ font-family:var(--f-display); font-size:var(--t-sm); font-weight:600; font-variation-settings:'wdth' 88; padding-top:8px; border-top:var(--b-hair) solid var(--line); transition:border-color var(--d-med) var(--e-state), color var(--d-med); }
.concepts li span{ display:block; font-family:var(--f-serif); font-weight:400; color:var(--ink-3); font-size:var(--t-sm); margin-top:2px; }
.concepts li.is-now{ border-top-color:var(--signal-2); }
.sys.hot .concepts li.is-now{ border-top-color:var(--heat-2); }
.fineprint{ font-size:var(--t-sm); color:var(--ink-3); font-style:italic; max-width:48ch; }
.fig-ctrl{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:var(--s-4); }
.figcap{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 20px; padding-top:var(--s-3); margin-top:var(--s-3); border-top:var(--b-hair) solid var(--line); color:var(--ink-3); }
.sys-svg{ width:100%; height:auto; display:block; overflow:visible; }

/* AST: conceptual propagation field */
.ast-svg .stratum{ fill:none; stroke:var(--line); stroke-width:1; stroke-dasharray:2 5; }
.ast-svg .slabel{ font-family:var(--f-display); font-size:13px; font-weight:600; fill:var(--ink-3); font-variation-settings:'wdth' 88; }
.ast-svg .edge{ fill:none; stroke:var(--line); stroke-width:1.1; transition:stroke var(--d-slow) var(--e-state), opacity var(--d-med); }
.ast-svg .edge.on{ stroke:var(--heat-2); filter:var(--glow-soft); }
.ast-svg .edge.settled{ stroke:var(--ink-3); filter:none; }
.ast-svg .edge.run{ stroke-dasharray:var(--len) var(--len); stroke-dashoffset:var(--len); animation:dash 700ms var(--e-narrative) forwards; animation-delay:var(--delay); }
@keyframes dash{ to{ stroke-dashoffset:0; } }
.ast-svg .second{ fill:none; stroke:var(--heat-2); stroke-width:1; opacity:0; transition:opacity var(--d-slow) var(--e-state), stroke var(--d-slow); }
.ast-svg .second.on{ opacity:.8; }
.ast-svg .second.settled{ stroke:var(--ink-3); opacity:.5; }
.ast-svg .node{ fill:var(--bg-2); stroke:var(--ink-2); stroke-width:1.5; transition:fill var(--d-med) var(--e-state), stroke var(--d-med); }
.ast-svg .node.on{ fill:var(--heat-2); stroke:var(--heat-2); }
.ast-svg .node.settled{ fill:var(--ink-2); stroke:var(--ink-2); }
.ast-svg .node.src{ cursor:pointer; }
.ast-svg .ring{ fill:none; stroke:var(--heat-2); stroke-width:1.5; opacity:0; }
.ast-svg .ring.go{ animation:ring 1000ms var(--e-response) forwards; animation-delay:var(--delay); }
@keyframes ring{ 0%{ opacity:.9; transform:scale(.6);} 100%{ opacity:0; transform:scale(2.4);} }

/* Market System: data flow */
.ms-svg .col{ fill:none; stroke:var(--line); stroke-width:1; }
.ms-svg .clabel{ font-family:var(--f-display); font-size:13px; font-weight:700; fill:var(--ink); font-variation-settings:'wdth' 88; transition:fill var(--d-med); }
.ms-svg .clabel.dim{ fill:var(--ink-3); }
.ms-svg .slab{ font-family:var(--f-display); font-size:12px; font-weight:600; fill:var(--ink-2); font-variation-settings:'wdth' 88; }
.ms-svg .stream{ fill:none; stroke-width:1.5; }
.ms-svg .tick{ fill:var(--ink-2); transform-box:fill-box; transform-origin:center; }
.ms-svg .arc{ fill:none; stroke:var(--signal-2); stroke-width:1.25; }
.ms-svg .ldot{ fill:var(--signal-2); }
.ms-svg .layer{ fill:var(--signal-soft); stroke:var(--signal-2); stroke-width:1; transform-box:fill-box; transform-origin:left center; }
.ms-svg .particle{ filter:var(--glow); }
.ms-svg .step-hide{ opacity:0; }
.ms-svg .tick.step-hide{ transform:scaleY(0); opacity:1; }
.ms-svg .layer.step-hide{ transform:scaleX(0); opacity:1; }
.ms-svg .tick, .ms-svg .layer, .ms-svg .ldot{ transition:transform var(--d-med) var(--e-state), opacity var(--d-med) var(--e-state); transition-delay:var(--delay,0ms); }

/* ================= selected technical work ================= */
.tw{ align-items:start; }
.tw-list{ grid-column:1 / span 7; min-width:0; }
.tw-prev{ grid-column:9 / span 4; position:sticky; top:96px; min-width:0; }
.tw-group{ font-family:var(--f-display); font-size:var(--t-sm); font-weight:650; color:var(--ink-3); font-variation-settings:'wdth' 90; margin:var(--s-6) 0 var(--s-2); }
.tw-group:first-child{ margin-top:0; }
.tw-items{ list-style:none; margin:0; padding:0; border-top:var(--b-rule) solid var(--ink); }
.tw-items > li{ border-bottom:var(--b-hair) solid var(--line); position:relative; }
.tw-row{ width:100%; display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:var(--col-gap); align-items:center; padding:var(--s-4) 0 var(--s-4) var(--s-5); background:transparent; border:0; text-align:left; cursor:pointer; position:relative; }
.tw-row::before{ content:""; position:absolute; left:0; top:50%; width:10px; height:1.5px; background:var(--ink-3); transform-origin:left; transition:transform var(--d-med) var(--e-state), background var(--d-fast); }
.tw-row[aria-pressed="true"]::before{ transform:scaleX(1.8); background:var(--signal-2); }
.tw-row .wt{ font-family:var(--f-display); font-size:clamp(1.3rem,1rem + 1.1cqi,2rem); font-weight:700; line-height:1.05; font-variation-settings:'wdth' 74; transition:font-variation-settings var(--d-med) var(--e-state), color var(--d-fast); }
.tw-row:hover .wt, .tw-row:focus-visible .wt, .tw-row[aria-pressed="true"] .wt{ font-variation-settings:'wdth' 96; }
.tw-row[aria-pressed="true"] .wt{ color:var(--signal); }
.tw-row .wm{ color:var(--ink-3); text-align:right; }
.tw-row .wd{ grid-column:1 / -1; font-family:var(--f-serif); font-size:var(--t-sm); color:var(--ink-2); max-width:56ch; margin-top:6px; }
.stages{ display:grid; grid-template-columns:repeat(5,1fr); gap:3px; width:110px; }
.stages i{ height:9px; border:1.25px solid var(--ink-3); transition:background var(--d-fast) var(--e-response), border-color var(--d-fast); transition-delay:calc(var(--k) * 70ms); }
.stages i.on{ background:var(--ink-3); }
.tw-row[aria-pressed="true"] .stages i.on{ background:var(--signal-2); border-color:var(--signal-2); }
.tw-stage-l{ display:flex; justify-content:space-between; width:110px; font-family:var(--f-mono); font-size:8px; color:var(--ink-3); margin-top:3px; }
.pv{ border:var(--b-hair) solid var(--line); background:var(--surface); }
.pv-head{ display:flex; justify-content:space-between; gap:12px; padding:var(--s-3) var(--s-4); border-bottom:var(--b-hair) solid var(--line-soft); color:var(--ink-3); }
.pv svg{ display:block; width:100%; height:auto; }
.pv-cap{ padding:var(--s-3) var(--s-4); font-size:var(--t-sm); color:var(--ink-3); border-top:var(--b-hair) solid var(--line-soft); }
.pv-inline{ display:none; }
.mini .ax{ stroke:var(--line); stroke-width:1; }
.mini .ln{ fill:none; stroke:var(--ink); stroke-width:1.75; }
.mini .fc{ fill:none; stroke:var(--signal-2); stroke-width:1.75; stroke-dasharray:5 4; }
.mini .band{ fill:var(--signal-soft); opacity:.7; }
.mini .t{ font-family:var(--f-display); font-size:11px; font-weight:600; fill:var(--ink-3); font-variation-settings:'wdth' 88; }
.mini .tt{ font-family:var(--f-display); font-size:12px; font-weight:700; fill:var(--ink); font-variation-settings:'wdth' 88; }
.mini .bar{ fill:var(--ink-2); transform-box:fill-box; transform-origin:bottom; }
.mini .bar.next{ fill:none; stroke:var(--signal-2); stroke-width:1.5; stroke-dasharray:4 3; }
.mini .tile{ fill:var(--bg-2); stroke:var(--line); }
.mini .lbl{ font-family:var(--f-mono); font-size:9px; fill:var(--ink); }
.mini .item{ fill:var(--surface); stroke:var(--ink-2); stroke-width:1.5; }
.mini .assoc{ fill:none; stroke:var(--signal-2); stroke-width:1.25; }
.mini .box{ fill:var(--surface); stroke:var(--ink-2); stroke-width:1.5; }
.mini .db{ fill:var(--bg-2); stroke:var(--ink); stroke-width:1.5; }
.mini .wire{ fill:none; stroke:var(--ink-3); stroke-width:1.25; }
.mini .rec{ fill:var(--signal-2); }
.motion .mini .pop{ opacity:0; transition:opacity var(--d-med) var(--e-state); transition-delay:var(--delay,0ms); }
.motion .pv.is-on .mini .pop{ opacity:1; }
.motion .mini .grow{ transform:scaleY(0); transition:transform var(--d-med) var(--e-state); transition-delay:var(--delay,0ms); }
.motion .pv.is-on .mini .grow{ transform:scaleY(1); }
.motion .mini .draw{ transition:none; }
.motion .pv.is-on .mini .draw{ stroke-dashoffset:0; transition:stroke-dashoffset var(--d-slow) var(--e-narrative); transition-delay:var(--delay,0ms); }
.motion .mini .fc.draw{ stroke-dasharray:var(--len); }
.motion .pv.is-on .mini .fc.draw{ stroke-dasharray:5 4; stroke-dashoffset:0; transition:stroke-dasharray 0ms linear calc(var(--delay,0ms) + 900ms), stroke-dashoffset var(--d-slow) var(--e-narrative) var(--delay,0ms); }
.learning{ margin-top:var(--s-6); font-size:var(--t-sm); color:var(--ink-3); }
.learning b{ font-family:var(--f-display); color:var(--ink-2); font-weight:600; }

/* ================= Lab: state machine ================= */
.lab-wrap{ position:relative; }
.lab-svg{ width:100%; height:auto; display:block; overflow:visible; }
.lab-svg .trk{ fill:none; stroke:var(--ink); stroke-width:1.5; }
.lab-svg .trk.soft{ stroke:var(--line); stroke-dasharray:3 5; }
.lab-svg .st{ fill:var(--bg); stroke:var(--ink); stroke-width:1.5; transition:fill var(--d-med) var(--e-state), stroke var(--d-med); }
.lab-svg .st.neg{ stroke-dasharray:3 3; }
.lab-svg .st.hit{ fill:var(--signal-2); stroke:var(--signal-2); }
.lab-svg .st.hit.neg{ fill:var(--ink-3); stroke:var(--ink-3); }
.lab-svg .st.faded{ stroke:var(--ink-3); }
.lab-svg .sn{ font-family:var(--f-display); font-weight:750; font-size:17px; fill:var(--ink); font-variation-settings:'wdth' 82; }
.lab-svg .sd{ font-family:var(--f-serif); font-style:italic; font-size:13px; fill:var(--ink-3); }
.lab-svg .tok{ fill:var(--signal-2); filter:var(--glow); }
.lab-svg .tok.ghost{ fill:var(--ink-3); }
.lab-svg .osc{ transform-box:fill-box; transform-origin:center; }
.lab-svg .cnt{ font-family:var(--f-mono); font-size:11px; fill:var(--ink-3); }
.lab-list{ margin-top:var(--s-6); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:var(--col-gap); row-gap:var(--s-5); }
.lab-list > div{ min-width:0; }
.lab-list h3{ font-size:var(--t-base); font-variation-settings:'wdth' 85; display:flex; justify-content:space-between; border-bottom:var(--b-hair) solid var(--line); padding-bottom:6px; margin-bottom:8px; }
.lab-list ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.lab-list li a{ display:block; text-decoration:none; padding:10px 12px; background:var(--surface); border-left:var(--b-strong) solid var(--signal-2); font-family:var(--f-display); font-size:var(--t-sm); font-weight:600; line-height:1.3; font-variation-settings:'wdth' 90; transition:transform var(--d-fast) var(--e-response); }
.lab-list li a:hover{ transform:translateX(4px); }
.lab-list li a small{ display:block; font-family:var(--f-mono); font-weight:400; font-size:10px; color:var(--ink-3); margin-top:4px; }
.lab-list .empty{ font-style:italic; color:var(--ink-3); font-size:var(--t-sm); }

/* ================= Writing ================= */
.wr{ align-items:start; }
.wr-lead{ grid-column:1 / span 7; display:block; text-decoration:none; padding-top:var(--s-4); border-top:var(--b-rule) solid var(--ink); }
.wr-lead h3{ font-family:var(--f-serif); font-weight:500; font-size:clamp(1.9rem,1.2rem + 2.6cqi,3.4rem); line-height:1.06; letter-spacing:-.015em; margin-top:var(--s-3); transition:color var(--d-fast); }
.wr-lead:hover h3{ color:var(--signal); }
.wr-lead p{ margin-top:var(--s-4); color:var(--ink-2); max-width:52ch; }
.wr-side{ grid-column:9 / span 4; list-style:none; margin:0; padding:0; display:grid; }
.wr-side a{ display:block; text-decoration:none; padding:var(--s-4) 0; border-top:var(--b-hair) solid var(--line); }
.wr-side h3{ font-family:var(--f-serif); font-weight:500; font-size:1.35rem; line-height:1.2; transition:color var(--d-fast); }
.wr-side a:hover h3{ color:var(--signal); }
.wmeta{ display:flex; gap:14px; flex-wrap:wrap; color:var(--ink-3); }
.wi{ list-style:none; margin:0; padding:0; border-top:var(--b-rule) solid var(--ink); }
.wi > li{ border-bottom:var(--b-hair) solid var(--line); display:grid; grid-template-rows:1fr; transition:grid-template-rows var(--d-med) var(--e-state), opacity var(--d-med) var(--e-state), border-color var(--d-med); }
.wi > li > a{ overflow:hidden; min-height:0; }
.wi > li.out{ grid-template-rows:0fr; opacity:0; border-bottom-color:transparent; }
.wi > li > a{ transition:padding var(--d-med) var(--e-state); }
.wi > li.out > a{ padding-block:0; }
.wi a{ display:grid; grid-template-columns:48px minmax(0,1fr) minmax(0,.7fr); column-gap:var(--col-gap); align-items:start; padding:var(--s-5) 0; text-decoration:none; }
.wi .glyph{ width:40px; height:40px; }
.wi .glyph path, .wi .glyph circle, .wi .glyph line{ fill:none; stroke:var(--ink-3); stroke-width:1.5; transition:stroke var(--d-fast); }
.wi a:hover .glyph path, .wi a:hover .glyph circle, .wi a:hover .glyph line, .wi a:focus-visible .glyph *{ stroke:var(--signal-2); }
.wi h3{ font-family:var(--f-serif); font-weight:500; font-size:clamp(1.4rem,1rem + 1.4cqi,2.2rem); line-height:1.12; transition:color var(--d-fast); }
.wi a:hover h3, .wi a:focus-visible h3{ color:var(--signal); }
.wi .sum{ color:var(--ink-2); font-size:var(--t-sm); clip-path:inset(0 100% 0 0); transition:clip-path var(--d-med) var(--e-state); }
.wi a:hover .sum, .wi a:focus-visible .sum{ clip-path:inset(0 0 0 0); }

/* ================= Journey: map + route (Education family) ================= */
.journey{ position:relative; }
.map-wrap{ position:relative; }
.map-svg{ width:100%; height:auto; display:block; overflow:visible; }
.map-svg .grat{ stroke:var(--grid); stroke-width:1; fill:none; }
.map-svg .gl{ font-family:var(--f-mono); font-size:10px; fill:var(--ink-3); }
.map-svg .land{ fill:var(--map-land); stroke:var(--map-edge); stroke-width:.6; transition:fill var(--d-slow) var(--e-state), stroke var(--d-slow) var(--e-state); }
.map-svg .land.key{ stroke:var(--map-edge); }
.map-svg .land.active{ fill:var(--map-on); stroke:var(--map-on-edge); stroke-width:.9; }
.map-svg .land.focus{ stroke:var(--signal-2); stroke-width:1.2; }
.motion .map-svg .world{ opacity:.25; transition:opacity 1400ms var(--e-state); }
.motion .journey.is-on .map-svg .world, .motion .journey.static .map-svg .world{ opacity:1; }
.map-svg .route{ fill:none; stroke:var(--signal-2); stroke-width:1.75; stroke-linecap:round; filter:var(--glow-soft); }
.map-svg .route-ghost{ fill:none; stroke:var(--line); stroke-width:1; stroke-dasharray:2 4; }
.map-svg .city{ cursor:pointer; outline:none; }
.map-svg .city .dot{ fill:var(--bg); stroke:var(--ink); stroke-width:1.5; transition:fill var(--d-med) var(--e-state), stroke var(--d-med), r var(--d-med) var(--e-state); }
.map-svg .city.active .dot{ fill:var(--signal-2); stroke:var(--signal-2); }
.map-svg .city .halo{ fill:none; stroke:var(--signal-2); stroke-width:1; opacity:0; transition:opacity var(--d-med), r var(--d-med) var(--e-state); }
.map-svg .city.focus .halo, .map-svg .city:focus-visible .halo{ opacity:.9; }
.map-svg .city:focus-visible .dot{ stroke:var(--focus); stroke-width:2.5; }
.map-svg .cname{ font-family:var(--f-display); font-weight:800; font-size:26px; fill:var(--ink); font-variation-settings:'wdth' 72; letter-spacing:-.02em; opacity:.35; transition:opacity var(--d-med) var(--e-state); }
.map-svg .cco{ font-family:var(--f-mono); font-size:10px; fill:var(--ink-3); opacity:0; transition:opacity var(--d-med) var(--e-state); }
.map-svg .city.active .cname, .journey.static .map-svg .cname{ opacity:1; }
.map-svg .city.active .cco, .journey.static .map-svg .cco{ opacity:1; }
.map-svg .now{ fill:none; stroke:var(--signal-2); stroke-width:1.25; opacity:0; }
.map-svg .now.go{ opacity:1; animation:nowping 2.8s var(--e-response) 3; transform-box:fill-box; transform-origin:center; }
@keyframes nowping{ 0%{ transform:scale(.7); opacity:.9; } 100%{ transform:scale(2.2); opacity:0; } }
.stations{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:var(--col-gap); margin-top:var(--s-5); }
.station{ display:grid; gap:10px; align-content:start; min-width:0; padding:var(--s-4) var(--s-3) var(--s-3) 0; border-top:var(--b-rule) solid var(--line); position:relative; outline:none; transition:border-color var(--d-med) var(--e-state); cursor:default; }
.station::before{ content:""; position:absolute; left:0; top:-1.5px; height:1.5px; width:100%; background:var(--signal-2); transform:scaleX(0); transform-origin:left; transition:transform var(--d-slow) var(--e-narrative); }
.station.active::before{ transform:scaleX(1); }
.station:focus-visible{ outline:2px solid var(--focus); outline-offset:4px; }
.station .yr{ color:var(--ink-3); transition:color var(--d-med); }
.station.active .yr{ color:var(--signal); }
.station h3{ font-size:1.15rem; font-weight:700; font-variation-settings:'wdth' 82; line-height:1.2; color:var(--ink-2); transition:color var(--d-med), font-variation-settings var(--d-med) var(--e-state); }
.station.active h3{ color:var(--ink); font-variation-settings:'wdth' 96; }
.station p{ font-size:var(--t-sm); color:var(--ink-2); }
.station ul{ margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:4px 12px; font-family:var(--f-display); font-size:var(--t-xs); font-weight:600; color:var(--ink-3); font-variation-settings:'wdth' 90; }
.station ul li{ transition:color var(--d-med); }
.station.active ul li{ color:var(--ink-2); }
.inst{ display:flex; gap:12px; align-items:center; }

/* Education page: time + place */
.edu-grid{ align-items:start; row-gap:var(--s-7); }
.edu-map{ grid-column:1 / -1; }
.gantt{ overflow-x:auto; }
.gantt svg{ min-width:720px; width:100%; height:auto; display:block; }
.gantt .yr{ font-family:var(--f-mono); font-size:11px; fill:var(--ink-3); }
.gantt .gl{ stroke:var(--grid); stroke-width:1; transform-box:fill-box; transform-origin:top; }
.gantt .bar{ fill:var(--ink-2); transform-box:fill-box; transform-origin:left; transition:fill var(--d-med) var(--e-state); }
.gantt .bar.now{ fill:var(--signal-2); }
.gantt .bar.alt{ fill:var(--bg); stroke:var(--ink-2); stroke-width:1.5; }
.gantt .row.active .bar{ fill:var(--ink); }
.gantt .row.active .bar.now{ fill:var(--signal); }
.gantt .row.dim{ opacity:.35; }
.gantt .row{ transition:opacity var(--d-med) var(--e-state); cursor:pointer; }
.gantt .bl{ font-family:var(--f-display); font-size:13px; font-weight:650; fill:var(--ink); font-variation-settings:'wdth' 88; }
.gantt .cur{ fill:none; stroke:var(--signal-2); stroke-width:1.5; }
.gantt .today{ stroke:var(--signal-2); stroke-width:1; stroke-dasharray:2 3; }
.gantt .tl{ font-family:var(--f-mono); font-size:10px; fill:var(--signal); }
.motion .gantt .grow-x{ transform:scaleX(0); transition:transform var(--d-slow) var(--e-narrative); transition-delay:var(--delay,0ms); }
.motion .gantt.is-on .grow-x{ transform:scaleX(1); }
.motion .gantt .grow-y{ transform:scaleY(0); transition:transform var(--d-med) var(--e-state); transition-delay:var(--delay,0ms); }
.motion .gantt.is-on .grow-y{ transform:scaleY(1); }
.motion .gantt .fade{ opacity:0; transition:opacity var(--d-med) var(--e-state); transition-delay:var(--delay,0ms); }
.motion .gantt.is-on .fade{ opacity:1; }
.gantt-key{ display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:var(--s-3); color:var(--ink-3); }
.eduRows{ list-style:none; margin:0; padding:0; border-top:var(--b-rule) solid var(--ink); }
.eduRow{ display:grid; grid-template-columns:56px minmax(0,5fr) minmax(0,3fr) minmax(0,3fr); column-gap:var(--col-gap); align-items:center; padding:var(--s-4) 0; border-bottom:var(--b-hair) solid var(--line); position:relative; outline:none; cursor:default; transition:background var(--d-med) var(--e-state); }
.eduRow::before{ content:""; position:absolute; left:-16px; top:0; bottom:0; width:3px; background:var(--signal-2); transform:scaleY(0); transition:transform var(--d-med) var(--e-state); }
.eduRow.active::before{ transform:scaleY(1); }
.eduRow:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.eduRow .en{ font-family:var(--f-display); font-weight:700; font-size:1.1rem; line-height:1.2; font-variation-settings:'wdth' 84; transition:font-variation-settings var(--d-med) var(--e-state); }
.eduRow.active .en{ font-variation-settings:'wdth' 96; }
.eduRow .en small{ display:block; font-family:var(--f-serif); font-weight:400; font-size:var(--t-sm); color:var(--ink-3); margin-top:2px; }
.eduRow .ep{ color:var(--ink-2); font-size:var(--t-sm); }
.eduRow .ed{ color:var(--ink-3); }
.eduRow .more{ grid-column:2 / -1; display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--d-med) var(--e-state); }
.eduRow .more > div{ overflow:hidden; font-size:var(--t-sm); color:var(--ink-2); }
.eduRow.active .more{ grid-template-rows:1fr; }
.eduRow.active .more > div{ padding-top:8px; }

/* ================= About: biography as propagation ================= */
.bio{ align-items:start; padding-block:var(--s-8) var(--s-9); }
.bio-rail{ grid-column:1 / span 3; position:sticky; top:96px; display:grid; gap:var(--s-5); view-transition-name:journey; }
.bio-steps{ list-style:none; margin:0; padding:0 0 0 22px; position:relative; display:grid; gap:18px; }
.bio-steps::before{ content:""; position:absolute; left:5px; top:6px; bottom:6px; width:1.5px; background:var(--line); }
.bio-fill{ position:absolute; left:5px; top:6px; width:1.5px; height:calc(100% - 12px); background:var(--signal-2); transform-origin:top; transform:scaleY(var(--p,0)); transition:transform var(--d-med) var(--e-state); filter:var(--glow-soft); }
.bio-steps li{ position:relative; font-family:var(--f-display); font-weight:650; font-size:var(--t-sm); color:var(--ink-3); font-variation-settings:'wdth' 86; transition:color var(--d-med), font-variation-settings var(--d-med) var(--e-state); }
.bio-steps li::before{ content:""; position:absolute; left:-22px; top:3px; width:11px; height:11px; border-radius:var(--r-dot); border:1.5px solid var(--ink-3); background:var(--bg); transition:background var(--d-med), border-color var(--d-med); }
.bio-steps li.done::before{ background:var(--signal-2); border-color:var(--signal-2); }
.bio-steps li.cur{ color:var(--ink); font-variation-settings:'wdth' 100; }
.bio-steps li a{ text-decoration:none; }
.toolkit{ display:flex; flex-wrap:wrap; gap:6px; }
.toolkit span{ font-family:var(--f-display); font-size:var(--t-xs); font-weight:600; font-variation-settings:'wdth' 90; padding:4px 8px; border:var(--b-hair) solid var(--line-soft); color:var(--ink-3); opacity:.45; transition:opacity var(--d-med) var(--e-state), color var(--d-med), border-color var(--d-med), background var(--d-med); }
.toolkit span.on{ opacity:1; color:var(--ink); border-color:var(--ink-3); }
.toolkit span.new{ background:var(--signal-soft); border-color:var(--signal-2); }
.bio-body{ grid-column:5 / span 8; display:grid; gap:var(--s-9); }
.chap{ display:grid; gap:var(--s-4); scroll-margin-top:96px; }
.chap .mono{ color:var(--ink-3); }
.chap h2{ font-size:clamp(2.4rem,1rem + 5cqi,5.4rem); line-height:.9; font-weight:800; font-variation-settings:'wdth' 68; letter-spacing:-.03em; transition:font-variation-settings var(--d-slow) var(--e-narrative); }
.chap.cur h2{ font-variation-settings:'wdth' 76; }
.chap p{ font-size:1.2rem; line-height:1.6; max-width:58ch; }

/* ================= Credentials: curated technical record ================= */
.ledger{ list-style:none; margin:0; padding:0; border-top:var(--b-rule) solid var(--ink); }
.ledger > li{ display:grid; grid-template-rows:1fr; border-bottom:var(--b-hair) solid var(--line); transition:grid-template-rows var(--d-med) var(--e-state), opacity var(--d-med) var(--e-state), border-color var(--d-med); }
.ledger > li > .lr{ min-height:0; overflow:hidden; }
.ledger > li.out{ grid-template-rows:0fr; opacity:0; border-bottom-color:transparent; }
.ledger > li > .lr{ transition:padding var(--d-med) var(--e-state); }
.ledger > li.out > .lr{ padding-block:0; }
.lr{ display:grid; grid-template-columns:minmax(0,6fr) minmax(0,3fr) minmax(0,2fr) minmax(88px,auto); column-gap:var(--col-gap); align-items:baseline; padding:14px 0; }
.lr .ct{ font-family:var(--f-display); font-weight:650; font-size:1.1rem; line-height:1.25; font-variation-settings:'wdth' 86; }
.lr .ct small{ display:block; font-family:var(--f-serif); font-weight:400; font-size:var(--t-sm); color:var(--ink-3); margin-top:2px; }
.lr .ci{ color:var(--ink-2); font-size:var(--t-sm); transition:color var(--d-fast); }
.lr .cy{ color:var(--ink-3); transition:color var(--d-fast); }
.lr .cv{ text-align:right; }
.lr:hover .ci, .lr:focus-within .ci{ color:var(--ink); }
.lr:hover .cy, .lr:focus-within .cy{ color:var(--ink-2); }
.verify{ font-family:var(--f-display); font-weight:650; font-size:var(--t-sm); color:var(--signal); text-decoration:none; position:relative; padding-bottom:2px; white-space:nowrap; }
.verify::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px; background:currentColor; transform:scaleX(.25); transform-origin:left; transition:transform var(--d-med) var(--e-state); }
.verify:hover::after, .verify:focus-visible::after{ transform:scaleX(1); }
.record{ font-family:var(--f-mono); font-size:var(--t-xs); color:var(--ink-3); }
.tbc{ font-family:var(--f-mono); font-size:var(--t-xs); color:var(--ink-3); opacity:.8; }
.sel-toggle{ background:transparent; border:0; padding:0; cursor:pointer; text-align:left; font:inherit; color:inherit; display:block; width:100%; }
.sel-toggle .ct::after{ content:"+"; font-family:var(--f-mono); font-weight:400; font-size:12px; color:var(--ink-3); margin-left:8px; display:inline-block; transition:transform var(--d-med) var(--e-state); }
.sel-toggle[aria-expanded="true"] .ct::after{ transform:rotate(45deg); }
.sel-more{ display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--d-med) var(--e-state); }
.sel-more > div{ overflow:hidden; font-size:var(--t-sm); color:var(--ink-2); max-width:62ch; }
.sel-more.open{ grid-template-rows:1fr; }
.sel-more.open > div{ padding-bottom:14px; }
.cfil{ position:relative; display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; border-bottom:var(--b-hair) solid var(--line); margin-bottom:var(--s-5); }
.cfil::-webkit-scrollbar{ display:none; }
.cfil button{ flex:none; min-height:44px; padding:0 12px; background:transparent; border:0; cursor:pointer; font-family:var(--f-display); font-weight:600; font-size:var(--t-sm); color:var(--ink-2); font-variation-settings:'wdth' 90; transition:color var(--d-fast); white-space:nowrap; }
.cfil button[aria-pressed="true"]{ color:var(--ink); }
.cfil button .n{ font-family:var(--f-mono); font-size:10px; color:var(--ink-3); margin-left:4px; }
.cfil-ind{ position:absolute; bottom:-1px; left:0; height:2px; background:var(--signal-2); transition:transform var(--d-med) var(--e-state), width var(--d-med) var(--e-state); }
.arch-head{ display:flex; align-items:baseline; gap:14px; margin:var(--s-6) 0 var(--s-3); }
.arch-head h2{ font-size:var(--t-lg); font-variation-settings:'wdth' 80; }
.arch-head .n{ font-family:var(--f-mono); font-size:var(--t-sm); color:var(--ink-3); font-variant-numeric:tabular-nums; }
.gh{ font-family:var(--f-display); font-weight:650; font-size:var(--t-sm); color:var(--ink-3); padding:18px 0 6px; font-variation-settings:'wdth' 90; border-bottom:0!important; }

/* credentials v3: filter → focus → verify */
.ledger > li > .lr{ position:relative; }
.ledger > li > .lr::before{ content:""; position:absolute; left:-14px; top:14px; bottom:14px; width:2px; background:var(--signal-2); transform:scaleY(0); transform-origin:top; transition:transform var(--d-fast) var(--e-response); }
.ledger > li:hover > .lr::before, .ledger > li:focus-within > .lr::before{ transform:scaleY(1); }
.ledger > li:not(.gh):hover, .ledger > li:not(.gh):focus-within{ background:linear-gradient(90deg, color-mix(in oklab,var(--signal-soft) 45%,transparent), transparent 70%); }
.ledger > li.col{ grid-template-rows:0fr; opacity:0; border-bottom-color:transparent; }
.ledger > li.col > .lr{ padding-block:0; }
.ledger > li.sub .ct{ padding-left:22px; font-size:1rem; position:relative; }
.ledger > li.sub .ct::before{ content:""; position:absolute; left:4px; top:.6em; width:10px; height:1.5px; background:var(--line); }
.set-toggle{ background:transparent; border:0; padding:0; cursor:pointer; text-align:left; font:inherit; color:inherit; }
.set-toggle .st-t::after{ content:""; display:inline-block; width:8px; height:8px; margin-left:10px; border-right:1.5px solid var(--ink-3); border-bottom:1.5px solid var(--ink-3); transform:rotate(45deg) translateY(-3px); transition:transform var(--d-med) var(--e-state); }
.set-toggle[aria-expanded="true"] .st-t::after{ transform:rotate(225deg) translateY(-1px); }
.ledger > li.gh{ position:sticky; top:64px; z-index:2; background:var(--bg); }
.ledger > li.gh{ padding:0; }
.ledger > li.gh > .gh-in{ min-height:0; overflow:hidden; transition:padding var(--d-med) var(--e-state); }
.ledger > li.gh.out > .gh-in{ padding-block:0; }
.gh-in{ display:flex; align-items:baseline; gap:12px; padding:22px 0 8px; position:relative; }
.gh-in h3{ font-size:var(--t-md); font-weight:750; font-variation-settings:'wdth' 70; transition:font-variation-settings var(--d-slow) var(--e-narrative); }
.gh.is-on .gh-in h3, html:not(.motion) .gh .gh-in h3{ font-variation-settings:'wdth' 88; }
.gh-in .mono{ color:var(--ink-3); }
.gh-in::after{ content:""; position:absolute; left:0; bottom:0; height:1.5px; width:100%; background:var(--ink); transform:scaleX(0); transform-origin:left; transition:transform var(--d-slow) var(--e-narrative); }
.gh.is-on .gh-in::after, html:not(.motion) .gh .gh-in::after{ transform:scaleX(1); }
.yr-r{ display:inline-block; }
.motion .yr-r{ clip-path:inset(0 100% 0 0); transition:clip-path var(--d-med) var(--e-state); transition-delay:calc(var(--k,0) * 45ms); }
.motion .rv .yr-r{ clip-path:inset(0 0 0 0); }
.cfil button{ position:relative; }
.cfil button::before{ content:""; position:absolute; top:9px; right:3px; width:5px; height:5px; border-radius:var(--r-dot); background:var(--signal-2); transform:scale(0); transition:transform var(--d-fast) var(--e-response); }
.cfil button.rel::before{ transform:scale(1); }
#archTitle{ display:inline-block; overflow:hidden; }
#archTitle span{ display:inline-block; transition:transform var(--d-med) var(--e-state), opacity var(--d-med); }
#archTitle.sw span{ transform:translateY(-100%); opacity:0; }
.verify{ display:inline-flex; align-items:center; gap:2px; }
.verify:hover .ext, .verify:focus-visible .ext{ transform:translate(2px,-2px); }
.lr:hover .verify::after, .lr:focus-within .verify::after{ transform:scaleX(.6); }
.lr:hover .verify:hover::after, .verify:focus-visible::after{ transform:scaleX(1); }

/* section boundaries */
.sec-head{ position:relative; }
.sec-head::before{ content:""; position:absolute; left:0; right:0; top:calc(-1 * var(--s-6)); height:1px; background:var(--line); transform:scaleX(0); transform-origin:left; transition:transform var(--d-slow) var(--e-narrative); }
.sec-head::after{ content:""; position:absolute; left:0; top:calc(-1 * var(--s-6) - 3px); width:7px; height:7px; border-radius:var(--r-dot); background:var(--signal-2); transform:translateX(0); opacity:0; transition:transform var(--d-slow) var(--e-narrative), opacity var(--d-fast); }
.sec-head.is-on::before, html:not(.motion) .sec-head::before{ transform:scaleX(1); }
.sec-head.is-on::after, html:not(.motion) .sec-head::after{ opacity:1; transform:translateX(calc(min(100cqi, 1440px) - 2 * var(--gutter) - 7px)); }
.sec-head h2{ transition:font-variation-settings var(--d-slow) var(--e-narrative); font-variation-settings:'wdth' 64; }
.sec-head.is-on h2, html:not(.motion) .sec-head h2{ font-variation-settings:'wdth' 72; }

.eduRow{ grid-template-columns:64px minmax(0,5fr) minmax(0,3fr) minmax(0,3fr); }

/* institutional marks: official files, proportions kept, contained in a quiet frame */
.logo-mark{ flex:none; width:52px; height:52px; display:grid; place-items:center; padding:4px; border:var(--b-hair) solid var(--line-soft); background:var(--surface); opacity:.82; transition:opacity var(--d-med) var(--e-state), border-color var(--d-med) var(--e-state); }
.logo-mark img{ width:100%; height:100%; object-fit:contain; }
.logo-mark .lm-light{ display:var(--logo-light); } .logo-mark .lm-dark{ display:var(--logo-dark); }
.eduRow .logo-mark{ width:56px; height:56px; }
.station.active .logo-mark, .eduRow.active .logo-mark, .station:hover .logo-mark, .eduRow:hover .logo-mark{ opacity:1; border-color:var(--ink-3); }

/* ================= Contact: signal ================= */
.contact{ position:relative; padding-block:var(--s-8) var(--s-9); overflow:hidden; }
.sig{ position:absolute; left:0; right:0; top:0; height:100%; pointer-events:none; }
.sig svg{ width:100%; height:100%; display:block; }
.sig .wave{ fill:none; stroke:var(--line); stroke-width:1.25; }
.sig .wave.lit{ stroke:var(--signal-2); filter:var(--glow-soft); }
.sig .packet{ fill:var(--signal-2); filter:var(--glow); }
.sig .end{ fill:var(--bg); stroke:var(--ink-3); stroke-width:1.5; transition:fill var(--d-med), stroke var(--d-med); }
.sig .end.ok{ fill:var(--signal-2); stroke:var(--signal-2); }
.ct-head{ position:relative; font-size:clamp(2.6rem,1rem + 6.2cqi,7rem); line-height:.92; font-weight:800; font-variation-settings:'wdth' 68; letter-spacing:-.035em; max-width:14ch; transition:font-size var(--d-slow) var(--e-state); }
.contact.open .ct-head{ font-size:clamp(2rem,1rem + 2.8cqi,3.4rem); }
.ct-mail{ position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-4); margin-top:var(--s-6); }
.mailbox{ position:relative; display:inline-grid; overflow:hidden; font-family:var(--f-display); font-size:clamp(1.15rem,.9rem + 1.3cqi,2rem); font-weight:650; font-variation-settings:'wdth' 84; }
.mailbox > span{ grid-area:1/1; transition:transform var(--d-med) var(--e-state), opacity var(--d-med) var(--e-state); user-select:all; }
.mailbox .copied{ transform:translateY(100%); opacity:0; color:var(--signal); user-select:none; }
.mailbox.done .addr{ transform:translateY(-100%); opacity:0; }
.mailbox.done .copied{ transform:none; opacity:1; }
.ct-form{ display:grid; grid-template-rows:1fr; transition:grid-template-rows var(--d-slow) var(--e-state); }
.ct-form > div{ min-height:0; padding-top:var(--s-7); }
.js .ct-form{ grid-template-rows:0fr; }
.js .ct-form > div{ overflow:hidden; padding-top:0; }
.js .contact.open .ct-form{ grid-template-rows:1fr; }
.js .contact.open .ct-form > div{ padding-top:var(--s-7); overflow:visible; }
.ct-form .grid{ align-items:start; }
.form{ display:grid; gap:var(--s-5); max-width:680px; grid-column:1 / span 7; }
.field{ display:grid; gap:8px; }
.field label{ font-family:var(--f-display); font-weight:650; font-size:var(--t-sm); font-variation-settings:'wdth' 90; display:flex; justify-content:space-between; gap:8px; }
.field label .opt-l{ font-weight:400; color:var(--ink-3); }
.in{ width:100%; min-height:52px; padding:12px 14px; background:var(--surface); border:var(--b-hair) solid var(--line); border-bottom:var(--b-rule) solid var(--ink-2); border-radius:var(--r-0); font-family:var(--f-serif); font-size:1.1rem; transition:border-color var(--d-fast), background var(--d-fast), box-shadow var(--d-fast); }
.in:hover{ border-bottom-color:var(--ink); background:var(--raised); }
.in:focus{ outline:none; border-color:var(--signal-2); border-bottom-color:var(--signal-2); box-shadow:0 0 0 3px var(--signal-soft); background:var(--raised); }
.in[aria-invalid="true"]{ border-bottom-color:var(--err); }
textarea.in{ min-height:180px; resize:vertical; line-height:1.5; }
.reasons{ display:flex; flex-wrap:wrap; gap:8px; border:0; margin:0; padding:0; }
.reasons legend{ font-family:var(--f-display); font-weight:650; font-size:var(--t-sm); margin-bottom:8px; padding:0; font-variation-settings:'wdth' 90; }
.reasons label{ position:relative; }
.reasons input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.reasons span{ display:inline-flex; align-items:center; min-height:44px; padding:0 14px; border:var(--b-hair) solid var(--line); background:var(--surface); font-family:var(--f-display); font-weight:600; font-size:var(--t-sm); font-variation-settings:'wdth' 90; transition:background var(--d-fast), border-color var(--d-fast), color var(--d-fast); }
.reasons input:hover + span{ border-color:var(--ink); }
.reasons input:checked + span{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.reasons input:focus-visible + span{ outline:2px solid var(--focus); outline-offset:3px; }
.reasons[aria-invalid="true"] span{ border-color:var(--err); }
.err{ font-family:var(--f-display); font-size:var(--t-sm); color:var(--err); font-weight:600; display:flex; gap:6px; align-items:center; animation:errin var(--d-med) var(--e-state); }
.err::before{ content:"!"; display:inline-grid; place-items:center; width:16px; height:16px; border:1.5px solid currentColor; border-radius:var(--r-dot); font-size:11px; flex:none; }
@keyframes errin{ from{ clip-path:inset(0 100% 0 0);} to{ clip-path:inset(0 0 0 0);} }
.count{ font-family:var(--f-mono); font-size:10px; color:var(--ink-3); justify-self:end; }
.hp{ position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.submit-row{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-4); }
.send{ position:relative; overflow:hidden; min-width:190px; justify-content:center; }
.send .lbl{ display:inline-grid; }
.send .lbl > span{ grid-area:1/1; transition:transform var(--d-med) var(--e-state), opacity var(--d-med); }
.send .l2, .send .l3{ transform:translateY(120%); opacity:0; }
.send.sending .l1, .send.sent .l1{ transform:translateY(-120%); opacity:0; }
.send.sending .l2{ transform:none; opacity:1; }
.send.sent .l2{ transform:translateY(-120%); opacity:0; }
.send.sent .l3{ transform:none; opacity:1; }
.dots i{ display:inline-block; width:4px; height:4px; margin-left:3px; border-radius:var(--r-dot); background:currentColor; animation:dot 1s var(--e-state) infinite; vertical-align:middle; }
.dots i:nth-child(2){ animation-delay:.15s; } .dots i:nth-child(3){ animation-delay:.3s; }
@keyframes dot{ 0%,100%{ opacity:.25; } 50%{ opacity:1; } }
.result{ border-top:var(--b-rule) solid var(--ink); padding:var(--s-5) 0; display:grid; gap:var(--s-3); max-width:680px; animation:errin var(--d-slow) var(--e-state); }
.result.ok{ border-top-color:var(--ok); }
.result.bad{ border-top-color:var(--heat-2); }
.result h2{ font-size:var(--t-lg); font-variation-settings:'wdth' 82; display:flex; gap:10px; align-items:center; }
.result h2 i{ width:10px; height:10px; border-radius:var(--r-dot); background:var(--ok); }
.result.bad h2 i{ background:transparent; border:2px solid var(--heat-2); }
.ct-side{ grid-column:9 / span 4; display:grid; gap:var(--s-4); align-content:start; }
.states-demo{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }

/* closing */
.closing{ background:var(--inv-bg); color:var(--inv-fg); border-top:var(--b-hair) solid var(--line-soft); }
.closing .wrap{ padding-block:var(--s-9) var(--s-6); }
.closing h2{ font-size:clamp(2.2rem,1rem + 5cqi,5.2rem); line-height:.95; font-weight:800; font-variation-settings:'wdth' 70; letter-spacing:-.03em; max-width:16ch; }
.closing .mailrow{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-4); margin-top:var(--s-6); }
.closing .mail{ font-family:var(--f-display); font-size:clamp(1.1rem,.9rem + 1.2cqi,1.9rem); font-weight:600; font-variation-settings:'wdth' 85; user-select:all; }
.closing .btn{ border-color:var(--inv-fg); color:var(--inv-fg); }
.closing .btn:hover{ background:var(--inv-fg); color:var(--inv-bg); }
.foot{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--col-gap); margin-top:var(--s-9); padding-top:var(--s-5); border-top:var(--b-hair) solid color-mix(in oklab,var(--inv-fg) 25%,transparent); align-items:end; }
.foot .big{ grid-column:1 / span 8; font-family:var(--f-display); font-weight:800; font-size:clamp(2rem,1rem + 4cqi,4.2rem); line-height:.9; font-variation-settings:'wdth' 64; letter-spacing:-.03em; }
.foot nav{ grid-column:9 / span 4; display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:flex-end; }
.foot nav a{ font-family:var(--f-display); font-size:var(--t-sm); color:var(--inv-fg); opacity:.8; text-decoration:none; }
.foot nav a:hover{ opacity:1; text-decoration:underline; }
.foot .fm{ grid-column:1 / -1; display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; margin-top:var(--s-5); opacity:.7; }

/* ================= inner page chrome ================= */
.ph{ padding-block:var(--s-8) var(--s-7); border-bottom:var(--b-hair) solid var(--line); }
.crumb{ display:flex; gap:10px; color:var(--ink-3); margin-bottom:var(--s-5); }
.crumb a{ color:var(--ink-3); }
.ph h1{ font-size:var(--t-xxl); line-height:.9; font-weight:800; font-variation-settings:'wdth' 70; letter-spacing:-.035em; max-width:14ch; }
h1:focus{ outline:none; }
.ph-grid{ align-items:end; }
.ph-grid > :first-child{ grid-column:1 / span 8; }
.ph-grid > :last-child{ grid-column:9 / span 4; }
.pd-hero{ padding-block:var(--s-8) var(--s-7); }
.pd-title{ font-size:clamp(3rem,1rem + 8cqi,8.5rem); line-height:.86; font-weight:800; letter-spacing:-.04em; font-variation-settings:'wdth' 66; }
.pd-rail{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:var(--b-rule) solid var(--ink); margin-top:var(--s-6); }
.pd-rail > div{ padding:var(--s-3) var(--s-4) var(--s-3) 0; display:grid; gap:4px; min-width:0; }
.pd-rail > div + div{ padding-left:var(--s-4); border-left:var(--b-hair) solid var(--line); }
.pd-rail .v{ font-family:var(--f-display); font-weight:650; font-variation-settings:'wdth' 88; line-height:1.25; }
.prose{ max-width:var(--measure); font-size:1.2rem; line-height:1.62; }
.prose > * + *{ margin-top:1.1em; }
.prose h2{ font-size:1.7rem; line-height:1.15; margin-top:2em; font-variation-settings:'wdth' 82; scroll-margin-top:96px; }
.prose a{ color:var(--signal); }
.body-grid{ padding-block:var(--s-8); }
.body-grid > .prose{ grid-column:3 / span 7; }
.body-grid > aside{ grid-column:10 / span 3; }
.withheld{ display:grid; grid-template-columns:auto 1fr; gap:var(--s-4) var(--s-5); padding:var(--s-5) 0; border-top:var(--b-rule) solid var(--ink); border-bottom:var(--b-hair) solid var(--line); margin-top:2em; }
.withheld svg{ width:44px; height:44px; }
.withheld svg rect{ fill:none; stroke:var(--ink-3); stroke-width:1.5; }
.withheld svg .bar{ fill:var(--ink-3); stroke:none; }
.withheld p{ font-size:1.05rem; }
.withheld small{ display:block; color:var(--ink-3); font-size:var(--t-sm); margin-top:6px; }
.tpl{ list-style:none; margin:0; padding:0; border-top:var(--b-rule) solid var(--ink); }
.tpl li{ display:grid; grid-template-columns:minmax(0,3fr) minmax(0,9fr); column-gap:var(--col-gap); padding:var(--s-4) 0; border-bottom:var(--b-hair) solid var(--line); }
.tpl h3{ font-size:1.1rem; font-variation-settings:'wdth' 85; }
.tpl p{ color:var(--ink-3); font-style:italic; }
.pd-sticky{ position:sticky; top:96px; display:grid; gap:var(--s-4); align-content:start; }

/* article */
.art-hero{ padding-block:var(--s-8) var(--s-6); }
.art-hero h1{ font-family:var(--f-serif); font-weight:500; font-size:clamp(2.4rem,1.3rem + 4cqi,5rem); line-height:1.02; letter-spacing:-.02em; max-width:18ch; }
.art-hero .dek{ font-family:var(--f-serif); font-style:italic; font-size:1.35rem; color:var(--ink-2); max-width:44ch; margin-top:var(--s-5); }
.art-body{ padding-block:var(--s-6) var(--s-9); align-items:start; }
.art-body .prose{ grid-column:4 / span 6; font-size:1.25rem; }
.art-toc{ grid-column:1 / span 2; position:sticky; top:96px; }
.art-toc ol{ list-style:none; margin:0; padding:0 0 0 14px; position:relative; display:grid; gap:10px; }
.art-toc ol::before{ content:""; position:absolute; left:0; top:4px; bottom:4px; width:1.5px; background:var(--line); }
.art-toc .fill{ position:absolute; left:0; top:4px; width:1.5px; height:calc(100% - 8px); background:var(--signal-2); transform-origin:top; transform:scaleY(var(--p,0)); }
.art-toc a{ text-decoration:none; font-family:var(--f-display); font-size:var(--t-sm); color:var(--ink-3); font-variation-settings:'wdth' 88; transition:color var(--d-fast), font-variation-settings var(--d-med) var(--e-state); }
.art-toc a.cur{ color:var(--ink); font-weight:650; font-variation-settings:'wdth' 98; }
.art-notes{ grid-column:10 / span 3; position:sticky; top:96px; display:grid; gap:var(--s-5); }
.fnote{ font-size:var(--t-sm); color:var(--ink-3); border-left:var(--b-hair) solid var(--line); padding-left:var(--s-3); transition:border-color var(--d-med), color var(--d-med), background var(--d-med); }
.fnote.hl{ border-left-color:var(--signal-2); color:var(--ink); background:var(--signal-soft); }
.fn{ font-family:var(--f-mono); font-size:10px; vertical-align:super; color:var(--signal); text-decoration:none; background:none; border:0; cursor:pointer; padding:0 2px; }
.fn-inline{ display:none; }
.art-fig svg{ width:100%; height:auto; display:block; }
.art-fig figcaption{ font-family:var(--f-display); font-size:var(--t-sm); color:var(--ink-3); margin-top:8px; font-variation-settings:'wdth' 90; }

/* 404 */
.nf{ padding-block:var(--s-9); }
.nf svg{ width:100%; height:auto; display:block; max-width:900px; }
.nf .trk{ fill:none; stroke:var(--ink); stroke-width:1.5; }
.nf .gap{ fill:none; stroke:var(--line); stroke-dasharray:2 6; stroke-width:1.5; }

/* design system page */
.spec-tones{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; border:var(--b-hair) solid var(--line); }
.spec-tones > section{ padding:var(--s-6); min-width:0; display:grid; gap:var(--s-5); align-content:start; }
.spec-row{ display:grid; grid-template-columns:120px minmax(0,1fr); column-gap:var(--s-4); align-items:baseline; border-top:var(--b-hair) solid var(--line); padding-top:10px; }
.spec-row > .mono{ color:var(--ink-3); }
.sw{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px; }
.sw div{ border:var(--b-hair) solid var(--line); }
.sw i{ display:block; height:44px; }
.sw span{ display:block; padding:6px 8px; font-family:var(--f-mono); font-size:10px; color:var(--ink-2); }
.mo{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s-4); }
.mo li{ display:grid; grid-template-columns:minmax(0,3fr) minmax(0,5fr) auto; gap:var(--col-gap); align-items:center; padding:var(--s-3) 0; border-top:var(--b-hair) solid var(--line); }
.mo .trk{ height:10px; position:relative; background:var(--bg-2); }
.mo .trk b{ position:absolute; left:0; top:0; bottom:0; width:24px; background:var(--signal-2); }
.mo .trk.go b{ left:calc(100% - 24px); }
.tokt{ width:100%; border-collapse:collapse; font-size:var(--t-sm); }
.tokt th, .tokt td{ text-align:left; padding:8px 12px 8px 0; border-top:var(--b-hair) solid var(--line); vertical-align:top; }
.tokt th{ font-family:var(--f-display); font-weight:650; }
.tokt td.mono{ color:var(--ink-2); }

/* ================= responsive (container) ================= */
@container site (max-width:1100px){
  .nav, .mark-meta{ display:none; }
  .menu-btn{ display:inline-flex; }
  .ctrls{ margin-left:auto; }
  .lang-desk{ display:none; }
  .name{ grid-column:1 / -1; }
  .outs{ grid-column:1 / -1; grid-row:auto; margin-top:var(--s-7); padding-left:var(--s-5); max-width:560px; }
  .hero-state{ grid-column:1 / span 7; } .hero-links{ grid-column:8 / span 5; }
  .sys-fig, .sys-copy, .sys.flip .sys-fig, .sys.flip .sys-copy{ grid-column:1 / -1; grid-row:auto; }
  .sys-copy{ order:-1; margin-bottom:var(--s-6); }
  .tw-list{ grid-column:1 / span 7; } .tw-prev{ grid-column:8 / span 5; }
  .wr-lead{ grid-column:1 / -1; } .wr-side{ grid-column:1 / -1; margin-top:var(--s-6); grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--col-gap); }
  .body-grid > .prose, .art-body .prose{ grid-column:1 / span 8; }
  .body-grid > aside, .art-notes{ grid-column:9 / span 4; }
  .art-toc{ display:none; }
  .sec-head h2{ grid-column:1 / -1; } .sec-head p{ grid-column:1 / span 8; margin-top:var(--s-4); }
  .bio-rail{ grid-column:1 / span 4; } .bio-body{ grid-column:5 / span 8; }
  .form{ grid-column:1 / span 8; } .ct-side{ grid-column:9 / span 4; }
}
@container site (max-width:820px){
  .focus-in{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .focus-in > div:nth-child(3){ border-left:0; padding-left:0; }
  .focus-in > div:nth-child(n+3){ border-top:var(--b-hair) solid var(--line-soft); }
  .hero-state, .hero-links{ grid-column:1 / -1; } .hero-links{ margin-top:var(--s-5); }
  .tw-list, .tw-prev{ grid-column:1 / -1; }
  .tw-prev{ display:none; }
  .pv-inline{ display:block; grid-column:1 / -1; }
  .pv-inline .pv{ margin:0 0 var(--s-4) var(--s-5); }
  .stations{ grid-template-columns:minmax(0,1fr); row-gap:var(--s-3); }
  .lab-list{ grid-template-columns:minmax(0,1fr); }
  .body-grid > .prose, .body-grid > aside, .art-body .prose, .art-notes{ grid-column:1 / -1; }
  .art-notes{ position:static; display:none; }
  .fn-inline.open{ display:block; margin:.6em 0; font-size:var(--t-sm); color:var(--ink-2); border-left:2px solid var(--signal-2); padding-left:var(--s-3); }
  .ph-grid > :first-child, .ph-grid > :last-child{ grid-column:1 / -1; } .ph-grid > :last-child{ margin-top:var(--s-5); }
  .pd-rail{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pd-rail > div:nth-child(3){ border-left:0; padding-left:0; }
  .tpl li{ grid-template-columns:minmax(0,1fr); row-gap:6px; }
  .foot .big, .foot nav{ grid-column:1 / -1; } .foot nav{ justify-content:flex-start; margin-top:var(--s-5); }
  .lr{ grid-template-columns:minmax(0,1fr) auto; row-gap:4px; }
  .lr .ci{ grid-column:1; } .lr .cy{ grid-column:2; grid-row:1; text-align:right; } .lr .cv{ grid-column:2; grid-row:2; }
  .eduRow{ grid-template-columns:56px minmax(0,1fr); row-gap:4px; }
  .verify{ min-height:44px; padding-inline:4px; }
  .ledger > li > .lr::before{ left:-8px; }
  .ledger > li.gh{ top:56px; }
  .sec-head.is-on::after, html:not(.motion) .sec-head::after{ transform:translateX(calc(100cqi - 2 * var(--gutter) - 7px)); }
  .eduRow .ep, .eduRow .ed{ grid-column:2; }
  .bio-rail{ grid-column:1 / -1; position:sticky; top:56px; z-index:5; background:var(--bg); padding-block:10px; grid-template-columns:1fr; border-bottom:var(--b-hair) solid var(--line-soft); }
  .bio-steps{ grid-auto-flow:column; padding:0; gap:0; }
  .bio-steps::before{ left:0; right:0; top:5px; bottom:auto; width:auto; height:1.5px; }
  .bio-fill{ left:0; top:5px; height:1.5px; width:100%; transform-origin:left; transform:scaleX(var(--p,0)); }
  .bio-steps li{ padding-top:18px; font-size:11px; }
  .bio-steps li::before{ left:0; top:0; }
  .toolkit{ display:none; }
  .bio-body{ grid-column:1 / -1; gap:var(--s-8); margin-top:var(--s-5); }
  .form, .ct-side{ grid-column:1 / -1; } .ct-side{ margin-top:var(--s-6); }
  .spec-tones{ grid-template-columns:minmax(0,1fr); }
  .mo li{ grid-template-columns:minmax(0,1fr); row-gap:6px; }
  .withheld{ grid-template-columns:minmax(0,1fr); }
  .sec{ padding-block:var(--s-8); }
  .pd-sticky{ position:static; }
}
@container site (max-width:520px){
  .hdr-in{ min-height:56px; gap:var(--s-3); }
  .mark-name{ font-size:.95rem; }
  .hero{ padding-block:var(--s-4) var(--s-7); }
  .hero-meta{ gap:4px 16px; padding-bottom:var(--s-5); }
  .hero-meta .hm-coord{ display:none; }
  .name{ font-size:clamp(3.2rem,21cqi,6rem); line-height:.86; }
  .name .w:nth-child(2){ font-variation-settings:'wdth' 90; }
  .outs{ gap:var(--s-3); margin-top:var(--s-7); }
  .focus-in{ grid-template-columns:minmax(0,1fr); }
  .focus-in > div, .focus-in > div + div{ padding-left:0; border-left:0; border-top:var(--b-hair) solid var(--line-soft); }
  .focus-in > div:first-child{ border-top:0; }
  .concepts{ grid-template-columns:minmax(0,1fr); }
  .wr-side{ grid-template-columns:minmax(0,1fr); }
  .pd-rail{ grid-template-columns:minmax(0,1fr); }
  .pd-rail > div + div{ border-left:0; padding-left:0; border-top:var(--b-hair) solid var(--line); }
  .wi a{ grid-template-columns:36px minmax(0,1fr); }
  .wi .sum{ grid-column:2; clip-path:none; margin-top:6px; }
  .wi .glyph{ width:30px; height:30px; }
  .ct-head{ font-size:clamp(2.2rem,12cqi,3.4rem); }
  .closing .wrap{ padding-block:var(--s-8) var(--s-5); }
  .map-svg .cname{ font-size:34px; }
}

/* ================= production additions ================= */
body{ margin:0; }
html:not(.js) .js-only{ display:none!important; }
img{ max-width:100%; }

/* figures: two server-rendered compositions, one per container size (no layout shift when JS starts) */
.fig-v.v-compact{ display:none; }
@container site (max-width:520px){ .fig-v.v-wide{ display:none; } .fig-v.v-compact{ display:block; } }

/* journey: final state when motion is off (reduced motion or no JS) */
html:not(.motion) .map-svg .land.key{ fill:var(--map-on); stroke:var(--map-on-edge); stroke-width:.9; }
html:not(.motion) .map-svg .land.focus{ stroke:var(--signal-2); stroke-width:1.2; }
html:not(.motion) .map-svg .city .dot{ fill:var(--signal-2); stroke:var(--signal-2); }
html:not(.motion) .map-svg .cname, html:not(.motion) .map-svg .cco{ opacity:1; }

/* planned entries have no page yet: same typography, no link affordance */
a:not([href]){ cursor:default; }
.wr-lead:not([href]):hover h3, .wr-side a:not([href]):hover h3, .wi a:not([href]):hover h3{ color:inherit; }
.wi a:not([href]):hover .glyph *{ stroke:var(--ink-3); }
.lab-list li .lab-item{ display:block; padding:10px 12px; background:var(--surface); border-left:var(--b-strong) solid var(--signal-2); font-family:var(--f-display); font-size:var(--t-sm); font-weight:600; line-height:1.3; font-variation-settings:'wdth' 90; }
.lab-list li .lab-item small{ display:block; font-family:var(--f-mono); font-weight:400; font-size:10px; color:var(--ink-3); margin-top:4px; }

/* contact: server-side result states reuse the prototype's result panel */
.form-alert{ grid-column:1 / span 7; max-width:680px; }
.contact .field .in:disabled{ opacity:.7; }

/* production: markup differences from the prototype */
.logo-mark picture{ width:100%; height:100%; }
a.opt{ text-decoration:none; color:inherit; }
.seg a.seg-a{ display:grid; place-items:center; min-height:48px; text-decoration:none; font-family:var(--f-display); font-weight:600; font-size:var(--t-sm); color:inherit; }
.seg a.seg-a[aria-current="true"]{ background:var(--ink); color:var(--bg); }
.seg > * + *{ border-left:var(--b-hair) solid var(--ink); }
.seg button[disabled]{ color:var(--ink-3); cursor:default; }
.seg button small{ font-weight:400; font-size:.8em; }
.closing a.mail, .mailbox a.addr{ color:inherit; text-decoration:none; }
.mailbox > *{ grid-area:1/1; transition:transform var(--d-med) var(--e-state), opacity var(--d-med) var(--e-state); }
.wi .wi-t{ font-family:var(--f-serif); font-weight:500; font-size:clamp(1.4rem,1rem + 1.4cqi,2.2rem); line-height:1.12; transition:color var(--d-fast); }
.wi a[href]:hover .wi-t, .wi a[href]:focus-visible .wi-t{ color:var(--signal); }
html:not(.js) .sel-more{ grid-template-rows:1fr; }
html:not(.js) .sel-more > div{ padding-bottom:14px; }
html:not(.js) .sel-toggle .ct::after, html:not(.js) .set-toggle .st-t::after{ display:none; }
html:not(.js) .ledger > li.col{ grid-template-rows:1fr; opacity:1; border-bottom-color:var(--line); }
html:not(.js) .ledger > li.col > .lr{ padding-block:14px; }
/* the route draws in story order: Istanbul → Famagusta first, the Atlantic crossing second */
.motion .journey .route.draw:not(.is-on){ stroke-dashoffset:var(--len,1000); }

/* multi-page transitions (progressive enhancement, Chromium) */
@media (prefers-reduced-motion: no-preference){
  @view-transition{ navigation:auto; }
  ::view-transition-group(proj-title-ast), ::view-transition-group(proj-title-ms), ::view-transition-group(art-title), ::view-transition-group(journey){ animation-duration:520ms; animation-timing-function:cubic-bezier(.65,0,.35,1); }
  ::view-transition-old(root), ::view-transition-new(root){ animation-duration:260ms; }
}

@media print{
  .hdr, .sheet, .skip, .hero-svg, .fig-ctrl, .closing .mailrow, .ct-mail .btn{ display:none!important; }
  body, .site{ background:#fff; color:#000; }
}

/* ================= reduced motion: content identical, motion removed ================= */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:1ms!important; animation-iteration-count:1!important; animation-delay:0ms!important; transition-duration:1ms!important; transition-delay:0ms!important; }
}

/* theme morph via View Transitions */
html.vt-theme::view-transition-old(root), html.vt-theme::view-transition-new(root){ animation:none; mix-blend-mode:normal; }
html.vt-theme::view-transition-image-pair(root){ isolation:auto; }
::view-transition-group(proj-title), ::view-transition-group(art-title), ::view-transition-group(journey){ animation-duration:520ms; animation-timing-function:cubic-bezier(.65,0,.35,1); }
html.theme-anim *, html.theme-anim *::before{ transition:background-color 260ms, color 260ms, border-color 260ms, fill 260ms, stroke 260ms!important; }