/* ---------- fonts (self-hosted) ---------- */
@font-face {
  font-family: 'Dela Gothic One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/dela-gothic-one-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('assets/fonts/archivo-latin.woff2') format('woff2');
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
button { font: inherit; }

/* ---------- tokens ---------- */
:root {
  color-scheme: light;
  --paper: #f4efea;
  --ink: #17150f;
  --body-ink: #4e463b;
  --emph-ink: #2b2721;
  --label: #6f6558;
  --faint: #a89c8b;
  --tint: #e6ddd0;
  --yellow: #f2d613;
  --rule-major: var(--ink);
  --rule-minor: #d8cdbd;
  --focus: #0d5aa8; /* focus indicator: >=3:1 on paper */
  /* legacy aliases still referenced by the map SVG + 404.html */
  --ink-soft: var(--body-ink);
  --card: #fffdf8;
  --rule: var(--rule-minor);
  --r-focus: var(--focus);
  --r-btn: var(--yellow);
  --r-highlight: var(--yellow);
  --r-status: #ff9538;
  --blue: #2ba5ff;
  --blue-soft: #97d4ff; /* soft blue — no current page use (retired from the selected-work tags in PR #6; kept for the palette lab) */
  --display: 'Dela Gothic One', 'Arial Black', sans-serif;
  --body: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --mono: ui-monospace, 'Cascadia Code', Consolas, 'SF Mono', monospace;
  --ease: cubic-bezier(0.22, 0.9, 0.3, 1);
  --pad-x: clamp(20px, 5vw, 56px);
}

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  background: var(--paper);
  color: var(--body-ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--yellow); color: var(--ink); }

a { color: inherit; text-decoration: none; }
:is(a, button, input, textarea):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

sub { font-size: 0.68em; line-height: 0; }

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 300;
  background: var(--ink); color: var(--paper); font-weight: 600;
  padding: 10px 16px; border-radius: 8px; transition: top 0.2s;
}
.skip:focus { top: 14px; }

.mono {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  line-height: 1.6;
  text-transform: uppercase;
}

.wrap { max-width: 1080px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 44px); }

/* marker highlight — static band, short phrase, clean across wraps */
.hl {
  background: linear-gradient(to top, var(--yellow) 0 44%, transparent 44%);
  padding: 0 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--ink);
}
.nav-inner {
  padding-inline: var(--pad-x);
  height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand { display: flex; align-items: center; gap: 13px; }
.brand svg { display: block; width: 33px; height: 33px; }
.brand-role { color: var(--ink); }
.nav-links { display: flex; gap: 30px; }
.nav-links a { color: var(--label); border-bottom: 2px solid transparent; padding-bottom: 3px; transition: color 0.15s, border-color 0.15s; }
.nav-links a:hover { color: var(--ink); }
.nav-links a.active { color: var(--ink); border-bottom-color: var(--yellow); }
.nav-cta {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--ink); background: var(--yellow);
  border: 2px solid var(--ink); border-radius: 8px;
  padding: 8px 14px; box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.nav-cta:hover { color: var(--ink); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.nav-cta:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }

/* ---------- layout: full-bleed blocks + asymmetric split ---------- */
.block { padding: 64px var(--pad-x); border-bottom: 1px solid var(--rule-major); }
.split {
  display: grid; grid-template-columns: 1.35fr 1fr;
  border-bottom: 1px solid var(--rule-major);
}
.split-main { padding: 64px var(--pad-x); border-right: 1px solid var(--rule-minor); min-width: 0; }
.split-side { min-width: 0; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 84svh; }
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; background: var(--yellow); pointer-events: none;
}
.hero .split-main { display: flex; flex-direction: column; justify-content: center; padding-top: 104px; padding-bottom: 84px; }
.hero-cta { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 30px; }

/* hero entrance — one orchestrated rise, motion-safe */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: hero-rise 0.7s var(--ease) backwards; }
  .hero-copy > .eyebrow   { animation-delay: 0.05s; }
  .hero-copy > h1         { animation-delay: 0.13s; }
  .hero-copy > .lead      { animation-delay: 0.21s; }
  .hero-copy > .body-line { animation-delay: 0.27s; }
  .hero-copy > .hero-cta  { animation-delay: 0.34s; }
  @keyframes hero-rise { from { opacity: 0; transform: translateY(14px); } }
}
.hero-portrait {
  position: relative; overflow: hidden;
  background: var(--tint); min-height: 400px;
}
.hero-portrait img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%;
  border: 0; border-radius: 0;
  filter: grayscale(1) contrast(1.08) brightness(1.02) sepia(0.16);
}
.portrait-tab, .portrait-note { position: absolute; margin: 0; background: var(--paper); }
.portrait-tab { /* pill, top-left; 96px clears the 68px fixed nav on the 2-col hero */
  top: 96px; left: 14px;
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--emph-ink);
  border: 2px solid var(--ink); border-radius: 999px;
  padding: 7px 14px; box-shadow: 3px 3px 0 var(--ink);
}
.portrait-note { /* flat caption, bottom-left */
  left: 0; bottom: 0; display: block; text-align: left;
  color: var(--label); padding: 11px 18px;
}
.portrait-dot {
  width: 9px; height: 9px; flex: none; border-radius: 50%;
  background: var(--r-status); border: 1.5px solid var(--ink);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
/* ---------- hero graph: framed field-map card ---------- */
.hero-graph {
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: 14px;
  padding: 10px;
  box-shadow: 5px 5px 0 var(--ink);
  animation: card-in 0.5s var(--ease) 0.25s backwards;
}
@keyframes card-in {
  from { opacity: 0; transform: scale(1.04) translateY(10px); }
}
.hero-graph svg {
  display: block; width: 100%; height: auto;
  border: 1.5px solid var(--rule); border-radius: 8px;
}

/* map: provinces (geometry from tools/generate_map.py)
   printed-sheet inversion: paper land on the card-white sea */
.hero-graph .prov { pointer-events: auto; }
.hero-graph .prov-fill {
  fill: var(--paper); stroke: none;
  transition: fill 0.2s var(--ease);
  animation: fade-in 0.8s ease calc(var(--d, 0.2s) + 0.3s) backwards;
}
.hero-graph .prov:hover .prov-fill { fill: var(--r-highlight); }
.hero-graph .prov-line {
  pointer-events: none;
  fill: none; stroke: var(--rule); stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1000;
  animation: coast-draw 1.1s var(--ease) var(--d, 0.2s) backwards;
}
@keyframes coast-draw { from { stroke-dashoffset: 1000; } }
@keyframes fade-in { from { opacity: 0; } }
.hero-graph .ptip {
  pointer-events: none;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  text-anchor: middle; fill: var(--ink);
  paint-order: stroke; stroke: var(--r-highlight); stroke-width: 4; stroke-linejoin: round;
  opacity: 0; transition: opacity 0.15s var(--ease);
}
.hero-graph .prov:hover .ptip { opacity: 1; }

/* map: sea */
.hero-graph .waves { animation: fade-in 0.8s ease 1.1s backwards; }
.hero-graph .wave {
  fill: none; stroke: var(--rule); stroke-width: 1.75; stroke-linecap: round;
  transform-box: fill-box; transform-origin: center;
  animation: wave-bob 7s ease-in-out var(--wd, 0s) infinite;
}
@keyframes wave-bob {
  0%, 100% { transform: translateY(0); opacity: 0.35; }
  50%      { transform: translateY(-2.5px); opacity: 0.7; }
}

/* map: furniture */
.hero-graph .furniture { animation: fade-in 0.8s ease 1.6s backwards; }
.hero-graph .sea-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.45em;
  text-anchor: middle; fill: var(--ink-soft); opacity: 0.75;
}
.hero-graph .fur-line { fill: none; stroke: var(--ink-soft); stroke-width: 1.25; }
.hero-graph .fur-solid { fill: var(--ink-soft); }
.hero-graph .fur-text {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em;
  text-anchor: middle; fill: var(--ink-soft);
  paint-order: stroke; stroke: var(--card); stroke-width: 3; stroke-linejoin: round;
}

/* map: status feed (replaces the old figcaption pill) */
.hero-graph .feed { animation: fade-in 0.5s ease 2.2s backwards; }
.hero-graph .feed text {
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em;
  fill: var(--ink-soft);
  paint-order: stroke; stroke: var(--card); stroke-width: 4; stroke-linejoin: round;
}
.hero-graph #feed-line { transition: opacity 0.25s ease; }
.hero-graph #feed-line.swap { opacity: 0; }
.hero-graph .feed-cursor { animation: blink 1.1s linear 2.2s infinite; }
@keyframes blink { 0%, 49% { fill-opacity: 1; } 50%, 100% { fill-opacity: 0; } }

.hero-graph .wire {
  fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 6 8; opacity: 0.85;
  animation: fade-in 0.5s ease var(--d) backwards, march 7s linear infinite;
}
@keyframes march { to { stroke-dashoffset: -140; } }  /* exact multiple of the 14u dash period */

.hero-graph .node { pointer-events: auto; }
.hero-graph .pop, .hero-graph .bump, .hero-graph .ring {
  transform-box: fill-box; transform-origin: center;
}
.hero-graph .pop {
  animation: slap 0.45s var(--ease) var(--d) backwards;
}
@keyframes slap {
  from { transform: scale(1.55); opacity: 0; }
  60%  { transform: scale(0.92); opacity: 1; }
}
.hero-graph .shadow { fill: var(--ink); }
.hero-graph .plate  { fill: var(--card); stroke: var(--ink); stroke-width: 2; }
.hero-graph .hub .plate    { fill: var(--r-status); }
.hero-graph #n-ledn .plate { fill: var(--r-highlight); }
.hero-graph .code {
  font-family: var(--mono); font-size: 14px; letter-spacing: 0.08em;
  text-anchor: middle; fill: var(--ink);
}
.hero-graph .hub .code { font-size: 16px; }

.hero-graph .ring {
  fill: none; stroke: var(--r-status); stroke-width: 2; opacity: 0;
  animation: ring-pulse 3s ease-out 1.4s infinite;
}
@keyframes ring-pulse {
  from { transform: scale(0.4); opacity: 0.9; }
  to   { transform: scale(2.2); opacity: 0; }
}

.hero-graph .lift { transition: transform 0.15s var(--ease); }
.hero-graph .node:hover .lift { transform: translate(-2px, -2px); }
.hero-graph .tip {
  pointer-events: none; opacity: 0; transform: translateY(3px);
  transition: opacity 0.15s var(--ease), transform 0.15s var(--ease);
}
.hero-graph .node:hover .tip { opacity: 1; transform: none; }
.hero-graph .tip rect { fill: var(--card); stroke: var(--ink); stroke-width: 1.5; }
.hero-graph .tip text {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  text-anchor: middle; fill: var(--ink);
}

.hero-graph .pkt { display: none; }
@supports (offset-path: path("M0 0")) {
  .hero-graph .pkt {
    display: inline; opacity: 0;
    fill: var(--r-highlight); stroke: var(--ink); stroke-width: 1.5;
    offset-rotate: auto;
  }
  .hero-graph #pkt-a {
    offset-path: path("M 72 372 Q 150 250 262 140 Q 270 98 300 64");
    animation: ride 6.5s linear 2.8s infinite;
  }
  .hero-graph #pkt-b {
    offset-path: path("M 474 147 Q 440 164 412 168 Q 398 110 362 66 Q 331 78 300 64");
    animation: ride 4s linear 2.8s infinite;
  }
  .hero-graph #pkt-r {
    fill: var(--blue);
    offset-path: path("M 300 64 Q 270 98 262 140 Q 150 250 72 372");
    animation: ride-return 14s linear 6s infinite;
  }
  @keyframes ride {
    from { offset-distance: 0%; opacity: 1; }
    to   { offset-distance: 100%; opacity: 1; }
  }
  @keyframes ride-return {
    0%           { offset-distance: 0%;   opacity: 1; }
    32%          { offset-distance: 100%; opacity: 1; }
    32.01%, 100% { offset-distance: 100%; opacity: 0; }
  }
  .hero-graph #n-ledn .bump { animation: blip 6.5s linear 7.84s infinite; }
  .hero-graph #n-ut .bump   { animation: blip 4s   linear 3.87s infinite; }
  .hero-graph #n-asd .bump  { animation: blip 4s   linear 5.74s infinite; }
  @keyframes blip { 0%, 8%, 100% { transform: scale(1); } 3% { transform: scale(1.16); } }
}

.eyebrow { display: flex; align-items: center; gap: 12px; color: var(--label); margin-bottom: 40px; }
.eyebrow-sq { width: 7px; height: 7px; flex: none; background: var(--ink); }

.hero h1 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.5rem, 1.75rem + 3.9vw, 4.25rem);
  line-height: 0.98; letter-spacing: -0.028em;
  color: var(--ink); text-wrap: balance; overflow-wrap: break-word;
  max-width: 15ch; margin-bottom: 30px;
}

.lead {
  font-size: 1.1875rem; line-height: 1.5; font-weight: 600;
  color: var(--emph-ink); max-width: 60ch; margin-bottom: 20px; text-wrap: pretty;
}
.body-line { font-size: 1.0625rem; line-height: 1.6; color: var(--body-ink); max-width: 46ch; margin: 0; text-wrap: pretty; }
/* the two hero sub-lines share one treatment */
.hero .lead, .hero .body-line {
  font-size: clamp(1.15rem, 1rem + 0.55vw, 1.375rem);
  line-height: 1.45; font-weight: 600; color: var(--emph-ink);
  max-width: 44ch; margin: 0 0 16px;
}
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 24px; border-radius: 10px; font-weight: 600; font-size: 1rem;
  border: 2px solid var(--ink); cursor: pointer; background: var(--card); color: var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn-solid { background: var(--r-btn); }

.link-mono { color: var(--ink); border-bottom: 1px solid var(--faint); padding-bottom: 3px; }
.link-mono:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* ---------- evidence bar (welded under the hero) ---------- */
.evbar {
  display: grid; grid-template-columns: minmax(150px, 210px) repeat(3, 1fr);
  border-bottom: 1px solid var(--rule-major);
}
.evbar-tag {
  display: flex; align-items: center;
  padding: 20px 24px; color: var(--faint);
  border-right: 1px solid var(--rule-minor);
}
.evbar-cell { padding: 20px 24px; border-right: 1px solid var(--rule-minor); }
.evbar-cell:last-child { border-right: 0; }
.evbar-fig {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.05rem, 0.95rem + 0.55vw, 1.375rem);
  line-height: 1.15; letter-spacing: -0.02em; color: var(--ink);
  overflow-wrap: anywhere;
}
.evbar-ctx {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--label);
  line-height: 1.6; margin-top: 10px;
}

/* ---------- pull quote (between experience & map) ---------- */
.pull {
  padding: clamp(52px, 9vw, 92px) var(--pad-x);
  background: var(--card);
  border-bottom: 1px solid var(--rule-major);
  display: flex; flex-direction: column; align-items: flex-start; gap: 22px;
}
.pull-mark { width: 40px; height: 40px; color: var(--ink); flex: none; }
.pull-q {
  margin: 0; max-width: 24ch;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.65rem, 1.15rem + 2.5vw, 2.875rem);
  line-height: 1.25; letter-spacing: -0.02em;
  color: var(--ink); text-wrap: balance;
}
.pull-attr { margin: 0; color: var(--label); }

/* ---------- map band: the only full-bleed element ---------- */
.map-band {
  position: relative;
  background: #16150f; overflow: hidden;
  padding: 40px clamp(20px, 4vw, 56px);
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--rule-major);
}
.map-band .hero-graph {
  margin: 0 auto; padding: 0; border: 0; border-radius: 0;
  background: none; box-shadow: none; animation: none;
  max-width: 940px; width: 100%; height: auto;
  display: flex; align-items: center; justify-content: center;
}
.map-band .hero-graph svg { width: 100%; height: auto; border: 0; border-radius: 0; }
.map-band .prov { cursor: pointer; }
.map-band .prov-fill { fill: #211d14; }
.map-band .prov-line { stroke: rgba(244, 239, 234, 0.22); }
.map-band .ptip { fill: var(--paper); stroke: #16150f; }
.map-band .sea-label { fill: rgba(244, 239, 234, 0.4); opacity: 1; }
.map-band .wave { stroke: rgba(244, 239, 234, 0.16); }
.map-band .fur-line { stroke: rgba(244, 239, 234, 0.42); }
.map-band .fur-solid { fill: rgba(244, 239, 234, 0.42); }
.map-band .fur-text { fill: rgba(244, 239, 234, 0.5); stroke: #16150f; }
.map-band .wire { stroke: rgba(244, 239, 234, 0.45); }
.map-band .shadow { fill: #000; opacity: 0.35; }
.map-band .plate { fill: var(--paper); stroke: #16150f; }
.map-band .code { fill: var(--ink); }
.map-band .hub .plate { fill: var(--r-status); }
.map-band #n-ledn .plate { fill: var(--r-highlight); }
.map-band .tip rect { fill: var(--paper); stroke: #16150f; }
.map-band .tip text { fill: var(--ink); }
.map-band .pkt { fill: rgba(244, 239, 234, 0.8); stroke: #16150f; }
.map-band #pkt-r { fill: rgba(244, 239, 234, 0.45); }

.map-overlay {
  position: absolute; inset: 0;
  padding: clamp(20px, 5vw, 44px);
  display: flex; align-items: flex-end; justify-content: flex-end;
  gap: 20px; z-index: 2; pointer-events: none;
}
.map-feed {
  margin: 0; align-self: flex-end; white-space: nowrap;
  color: rgba(244, 239, 234, 0.55);
  transition: opacity 0.25s ease;
}
.map-feed.swap { opacity: 0; }
.map-feed-mark { color: var(--yellow); }
.map-feed .feed-cursor { animation: cursor-blink 1.1s steps(1, end) infinite; }
@keyframes cursor-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* ---------- section heads ---------- */
.sec-head { display: flex; align-items: baseline; gap: 18px; margin-bottom: 36px; flex-wrap: wrap; }
.sec-num { color: var(--faint); }
.sec-head h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.125rem);
  line-height: 1; letter-spacing: -0.02em;
  color: var(--ink); text-transform: uppercase;
}
.sec-note { margin-left: auto; color: var(--label); }

.rich { max-width: 62ch; color: var(--body-ink); }
.rich + .rich { margin-top: 1.1em; }

/* ---------- selected-work tags: quiet ghost pill (hairline border, no fill) ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.chip {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--label);
  background: transparent; border: 1.5px solid var(--rule-minor); border-radius: 6px;
  padding: 5px 10px;
}

/* ---------- side panels: bordered "page" card (about + now right column) ---------- */
.meta-stack {
  align-self: start;
  display: flex; flex-direction: column;
  margin: 56px 44px;
  background: var(--card);
  border: 2px solid var(--ink); border-radius: 12px; overflow: hidden;
  box-shadow: 5px 5px 0 var(--ink);
}
.meta-panel { padding: 26px 28px; border-bottom: 1px solid var(--rule-minor); }
.meta-panel:last-child { border-bottom: 0; }
.meta-label { color: var(--faint); margin-bottom: 18px; }
.lang-grid { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 9px 16px; margin: 0; }
.lang-grid dt { font-size: 0.95rem; color: var(--body-ink); }
.lang-grid dd { margin: 0; align-self: center; color: var(--label); }
.edu { display: flex; flex-direction: column; gap: 14px; }
.edu-deg { font-size: 0.95rem; font-weight: 600; color: var(--ink); }
.edu-inst { font-size: 0.9rem; color: var(--body-ink); }
.also {
  display: flex; flex-direction: column; gap: 9px;
  font-family: var(--mono); font-size: 0.72rem; line-height: 1.5;
  color: var(--body-ink); text-transform: none; letter-spacing: 0.02em;
}
.based-city { font-family: var(--display); font-weight: 400; font-size: 1.375rem; letter-spacing: -0.02em; color: var(--ink); }
.based-tz { font-size: 0.95rem; color: var(--body-ink); margin-top: 6px; }
.privacy-line { font-size: 0.95rem; line-height: 1.6; color: var(--body-ink); max-width: 30ch; margin: 0; }

/* ---------- experience — route-mark spine ---------- */
.xp-row {
  position: relative;
  display: grid; grid-template-columns: 110px 300px minmax(0, 1fr); gap: 0 36px;
  align-items: start; padding: 22px 0 22px 34px; border-top: 1px solid var(--rule-minor);
}
.xp-row::before { /* spine */
  content: ""; position: absolute; left: 5px; top: 0; bottom: 0;
  width: 2px; background: var(--rule-minor);
}
.xp-row:first-child::before { top: 28px; }
.xp-row:last-child::before  { bottom: calc(100% - 28px); }
.xp-row::after { /* node */
  content: ""; position: absolute; left: 0; top: 22px;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--card); border: 2px solid var(--ink);
}
.xp-row:first-child::after { background: var(--yellow); }
.xp-date { color: var(--label); padding-top: 5px; }
.xp-title { font-family: var(--display); font-weight: 400; font-size: 1.1875rem; line-height: 1.2; letter-spacing: -0.015em; color: var(--ink); }
.xp-org { font-size: 0.95rem; color: var(--body-ink); margin-top: 5px; }
.xp-desc { font-size: 1rem; line-height: 1.6; color: var(--body-ink); max-width: 56ch; margin: 0; }

/* ---------- selected work ---------- */
#work .sec-note { margin-left: 0; }
.work-row {
  position: relative;
  padding: 32px 0 32px 54px;
  border-top: 1px solid var(--rule-minor);
}
.work-row::before { /* route mark */
  content: ""; position: absolute; left: 0; top: 31px;
  width: 30px; height: 30px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpolyline points='9,29 9,12 20,24 31,12' fill='none' stroke='%2317150f' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round' stroke-dasharray='4 4'/%3E%3Ccircle cx='31' cy='12' r='3.8' fill='%232ba5ff' stroke='%2317150f' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.work-eyebrow {
  display: flex; justify-content: space-between; gap: 6px 20px; flex-wrap: wrap;
  color: var(--faint); margin-bottom: 12px; max-width: 640px;
}
/* result leads the row; the title drops to a supporting sub-line */
.result-line { display: flex; align-items: baseline; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 10px; max-width: 780px; }
.result-line .tag {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--faint); flex: none; align-self: flex-start; padding-top: 9px;
}
.result-line .val {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.75rem);
  line-height: 1.18; letter-spacing: -0.02em; color: var(--ink); min-width: 0;
}
.work-row h3 {
  font-family: var(--body); font-weight: 600;
  font-size: 1.0625rem; line-height: 1.4; letter-spacing: 0;
  color: var(--emph-ink); margin-bottom: 14px; max-width: 40ch;
}
.work-row .rich { font-size: 1rem; line-height: 1.6; max-width: 68ch; }

/* ---------- now ---------- */
.now-row {
  display: grid; grid-template-columns: 90px 1fr; gap: 24px;
  align-items: start; padding: 18px 0; border-top: 1px solid var(--rule-minor);
}
.now-kicker { color: var(--faint); padding-top: 4px; }
.now-row p { font-size: 1.0625rem; line-height: 1.6; color: var(--emph-ink); max-width: 54ch; margin: 0; }

/* ---------- contact ---------- */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 24px; max-width: 620px; margin-top: 36px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field-wide { grid-column: 1 / -1; }
.field label { color: var(--ink); }
.field input, .field textarea {
  background: var(--card); border: 2px solid var(--ink); border-radius: 8px;
  color: var(--ink); font-family: var(--body); font-size: 1rem;
  padding: 12px 14px; width: 100%;
  box-shadow: 3px 3px 0 var(--rule-minor);
  transition: box-shadow 0.15s;
}
.field input:focus, .field textarea:focus {
  outline: none;
  box-shadow: 3px 3px 0 var(--focus), 0 0 0 2px var(--focus);
}
.field textarea { min-height: 120px; resize: vertical; }
.form-send { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; }
.send-note { text-transform: none; letter-spacing: 0.01em; color: var(--label); max-width: 32ch; line-height: 1.6; }
.form-note { color: var(--label); }
.form-note:empty { display: none; }

/* ---------- footer ---------- */
.footer {
  background: var(--ink); color: var(--paper);
  padding: 56px var(--pad-x) 40px;
  display: flex; flex-direction: column; align-items: stretch; gap: 36px;
}
.footer-tagline {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
  line-height: 1.1; letter-spacing: -0.02em; color: var(--paper); margin: 0;
}
.footer-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px 34px; flex-wrap: wrap;
  border-top: 1px solid rgba(244, 239, 234, 0.18); padding-top: 24px;
}
.footer .mono { color: rgba(244, 239, 234, 0.6); }
.footer-links { display: flex; gap: 26px; }
.footer-links a { color: var(--paper); opacity: 0.85; transition: opacity 0.15s; }
.footer-links a:hover { opacity: 1; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split-main { border-right: 0; border-bottom: 1px solid var(--rule-minor); }
  .meta-stack { height: auto; }
  .hero { min-height: 0; }
  .hero .split-main { padding-top: 104px; }
  .hero-portrait { min-height: 340px; }
  .portrait-tab { top: 16px; } /* 1-col hero: photo is no longer under the nav */
  .xp-row { grid-template-columns: 110px 1fr; }
  .xp-desc { grid-column: 1 / -1; margin-top: 10px; max-width: none; }
  .evbar { grid-template-columns: 1fr 1fr; }
  .evbar-tag { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid var(--rule-minor); }
  .evbar-cell:nth-child(3) { border-right: 0; }
  .evbar-cell:nth-child(2), .evbar-cell:nth-child(3) { border-bottom: 1px solid var(--rule-minor); }
  .evbar-cell:nth-child(4) { grid-column: 1 / -1; border-right: 0; }
}

@media (max-width: 640px) {
  :root { --pad-x: 20px; }
  .block, .split-main { padding: 40px var(--pad-x); }
  .hero .split-main { padding-top: 96px; }
  .nav-links { display: none; }
  .brand-role { display: none; }
  .hero h1 { font-size: clamp(2rem, 8vw, 2.4rem); }
  .hero-cta { gap: 12px 24px; }
  .hero-cta .btn { width: 100%; min-height: 46px; justify-content: center; }
  .hero-cta .link-mono { padding: 13px 0; }
  .footer { gap: 24px; }
  .footer-links a { padding: 13px 0; }
  .evbar { grid-template-columns: 1fr; }
  .evbar-tag { border-right: 0; border-bottom: 1px solid var(--rule-minor); }
  .evbar-cell { border-right: 0; border-bottom: 1px solid var(--rule-minor); padding: 18px 20px; }
  .evbar-cell:last-child { border-bottom: 0; }
  .evbar-fig { font-size: 1.05rem; }
  .evbar-ctx { font-size: 0.58rem; letter-spacing: 0.06em; }
  .meta-stack { margin: 28px 20px; }
  .meta-panel { padding: 24px 20px; }
  .xp-row { grid-template-columns: 1fr; gap: 4px; }
  .xp-date { padding-top: 0; }
  .xp-desc { margin-top: 8px; }
  .map-band { padding: 24px 20px; }
  .map-overlay { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 12px; }
  .map-feed { align-self: flex-start; white-space: normal; }
  .work-row { padding: 26px 0 26px 42px; }
  .work-row::before { width: 24px; height: 24px; top: 26px; }
  .now-row { grid-template-columns: 1fr; gap: 4px; }
  .now-kicker { padding-top: 0; }
  .form { grid-template-columns: 1fr; }
  .form-send .btn { width: 100%; min-height: 46px; }
  .footer { padding: 28px 20px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-graph,
  .hero-graph .prov-line, .hero-graph .prov-fill, .hero-graph .waves, .hero-graph .wave,
  .hero-graph .furniture, .hero-graph .wire,
  .hero-graph .pop, .hero-graph .bump, .hero-graph .feed { animation: none; }
  .hero-graph .pkt, .hero-graph .ring, .hero-graph .feed-cursor, .map-feed .feed-cursor { display: none; }
  .portrait-dot { animation: none; }
  .hero-graph .lift, .hero-graph .tip, .hero-graph .ptip, .hero-graph .prov-fill, .map-feed { transition: none; }
  .btn, .nav-links a, .link-mono, .footer-links a { transition: none; }
}