/* yashb.me — hand-built, no framework.
   Editorial minimal: type does the talking, one accent, generous air. */

@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}

/* the third voice: the human aside, set against structure and telemetry */
@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/instrument-serif-italic-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* dark-first: the cinematic default. Light is the guest theme. */
:root {
  --mode: dark;
  --paper: #0b0c10;
  --plane: #08090c;
  --ink: #f2f3ee;
  --ink-2: #b9bab2;
  --ink-3: #7d7e78;
  --hairline: #22242a;
  --baseline: #3a3d45;
  --accent: #3ea6ff;
  --accent-deep: #7cc0ff;
  --accent-wash: rgba(62, 166, 255, 0.10);
  --good: #35c46f;
  --ring: rgba(255, 255, 255, 0.10);
  --glow: rgba(62, 166, 255, 0.35);

  --font-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "Segoe UI Mono", Consolas, monospace;
  --font-voice: "Instrument Serif", Georgia, "Times New Roman", serif;

  --measure: 42rem;
  --site-max: 72rem;
  --pad: clamp(1.25rem, 5vw, 4rem);

  /* house motion: one exit curve, one spring, three tempos */
  --ease-out: cubic-bezier(0.22, 0.9, 0.26, 1);
  --ease-spring: cubic-bezier(0.34, 1.3, 0.36, 1);
  --dur-1: 160ms;
  --dur-2: 380ms;
  --dur-3: 850ms;

  /* material: the standing light hits every raised surface from above */
  --edge-light: rgba(255, 255, 255, 0.055);
  --elev-1: inset 0 1px 0 var(--edge-light), 0 1px 2px rgba(0, 0, 0, 0.25);
  --elev-2: inset 0 1px 0 var(--edge-light), 0 14px 44px rgba(0, 0, 0, 0.4);
}

/* paper mode: not an inversion but a different material. Warm stock,
   near-black ink, and the accent becomes red drafting ink. */
:root[data-theme="light"] {
  --mode: light;
  --paper: #f7f4ed;
  --plane: #f0ece2;
  --ink: #1c1913;
  --ink-2: #4f4a3f;
  --ink-3: #837c6d;
  --hairline: #ded6c4;
  --baseline: #bfb6a0;
  --accent: #b23a2b;
  --accent-deep: #8f2c1f;
  --accent-wash: rgba(178, 58, 43, 0.08);
  --good: #2d6a12;
  --ring: rgba(28, 25, 19, 0.12);
  --glow: rgba(178, 58, 43, 0.2);
  --edge-light: rgba(255, 255, 255, 0.85);
  --elev-1: inset 0 1px 0 var(--edge-light), 0 1px 3px rgba(48, 42, 30, 0.09);
  --elev-2: inset 0 1px 0 var(--edge-light), 0 12px 34px rgba(48, 42, 30, 0.12);
}

/* deliberately no prefers-color-scheme override: dark is the design.
   Light lives behind the toggle and persists per visitor. */

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }

/* the hidden attribute always wins, even over display: flex components */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* with JS running, Lenis owns smoothness and ScrollTrigger owns measurement;
   CSS smooth scrolling animates native jumps underneath both and corrupts
   pin positions. Keep it only as the no-JS fallback. */
html.js { scroll-behavior: auto; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

html, body { overflow-x: clip; }

/* cinematic layer: static grain + a soft vignette (dark theme only) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(120% 95% at 50% 15%, transparent 55%, rgba(0, 0, 0, 0.30) 100%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 89;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

:root[data-theme="light"] body::before { background: none; }
:root[data-theme="light"] body::after { opacity: 0.055; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent); color: #fff; }

/* designed scrollbar: part of the instrument, not the browser */
html { scrollbar-color: var(--baseline) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--hairline);
  border: 4px solid var(--paper);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover { background: var(--baseline); }

/* raised surfaces catch the standing light from above */
.card,
.learn-stage,
.fit-card,
.loss-widget,
.shared-banner,
.jd-form textarea,
.brief-form input[type="text"] {
  box-shadow: var(--elev-1);
}

.card:hover { box-shadow: var(--elev-2); }
.term.open { box-shadow: var(--elev-2); }

/* the trailing halo: a quiet second presence following the pointer */
.halo {
  position: fixed;
  top: 0;
  left: 0;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  border-radius: 50%;
  pointer-events: none;
  z-index: 260;
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out),
    width var(--dur-2) var(--ease-spring), height var(--dur-2) var(--ease-spring),
    margin var(--dur-2) var(--ease-spring), border-color var(--dur-1) var(--ease-out);
  will-change: transform;
}

body.halo-on .halo { opacity: 1; }

.halo.hot {
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}

a {
  color: inherit;
  text-decoration-color: var(--baseline);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}

a:hover { text-decoration-color: var(--accent); color: var(--accent-deep); }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 0.5rem 1rem;
  z-index: 100;
}

.skip-link:focus { left: 0; }

/* ---------- layout ---------- */

.wrap {
  max-width: var(--site-max);
  margin-inline: auto;
  padding-inline: var(--pad);
}

main { display: block; }

section { padding-block: clamp(3.5rem, 9vw, 7rem); }

.rule { border: 0; border-top: 1px solid var(--hairline); margin: 0; }

/* ---------- nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 80%, transparent);
  backdrop-filter: blur(16px) saturate(1.5);
  border-bottom: 1px solid var(--hairline);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.03);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.5rem;
}

.brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
}

/* the temp pill is a desktop toy: below 520px the nav cannot seat five
   items, so it yields its chair before anything clips. The selector
   carries extra specificity because the base .temp-ctl rule is declared
   later in this file and would win on order alone. */
@media (max-width: 32.5rem) {
  .nav-links .temp-ctl { display: none; }
  .brand {
    font-size: 0.92rem;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .nav-links { font-size: 0.8rem; gap: 0.7rem; flex-shrink: 0; }
}

@media (max-width: 28rem) {
  .brand { font-size: 0.9rem; }
  .nav-links { font-size: 0.8rem; gap: 0.6rem; }
  .theme-toggle { width: 1.75rem; height: 1.75rem; }
}

@media (max-width: 22rem) {
  .nav-links a[href$="#experience"] { display: none; }
}

.brand:hover { color: var(--ink); }

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2.5vw, 1.75rem);
  font-size: 0.92rem;
}

.nav-links a { text-decoration: none; color: var(--ink-2); }
.nav-links a:hover { color: var(--ink); }
.nav-links a[aria-current="page"] { color: var(--ink); font-weight: 600; }

.theme-toggle {
  appearance: none;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--ink-2);
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}

.theme-toggle:hover { border-color: var(--baseline); color: var(--ink); }
.theme-toggle svg { width: 15px; height: 15px; fill: currentColor; }
/* dark default shows the moon; light shows the sun */
.theme-toggle .sun { display: none; }
:root[data-theme="light"] .theme-toggle .sun { display: block; }
:root[data-theme="light"] .theme-toggle .moon { display: none; }

/* ---------- typography ---------- */

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

/* instruments read in columns: every digit the same width */
.loss-widget, .learn-meta, .site-evals, .fit-card, .preloader-log {
  font-variant-numeric: tabular-nums;
}

.kicker {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 1.25rem;
}

.lead {
  font-size: clamp(1.1rem, 1.6vw, 1.25rem);
  color: var(--ink-2);
  max-width: var(--measure);
}

.prose { max-width: var(--measure); }
.prose p { margin: 0 0 1.25em; }
.prose h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
  margin: 2.75em 0 0.8em;
}
.prose h3 { font-size: 1.15rem; margin: 2em 0 0.6em; }
.prose ul { padding-left: 1.2em; margin: 0 0 1.25em; }
.prose li { margin-bottom: 0.4em; }
.prose code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--plane);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 0.08em 0.35em;
}
.prose strong { font-weight: 650; }
.prose blockquote {
  margin: 1.75em 0;
  padding: 0.2em 0 0.2em 1.25em;
  border-left: 2px solid var(--accent);
  font-family: var(--font-voice);
  font-style: italic;
  font-size: 1.35rem;
  line-height: 1.45;
  color: var(--ink-2);
}

/* ---------- hero ---------- */

.hero {
  min-height: calc(100svh - 3.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(3rem, 8vw, 5rem);
  position: relative;
}

.hero h1 {
  font-size: clamp(2.7rem, 10.4vw, 9.7rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.92;
  text-transform: uppercase;
  white-space: nowrap;
  margin-left: -0.045em; /* optical: the Y overhangs the margin like print */
}

.hero h1 .line { display: block; overflow: hidden; }

.hero h1 .line-inner {
  display: inline-block;
  transform: translateY(115%);
}

.js .hero h1 .line-inner { animation: rise 750ms cubic-bezier(0.2, 0.65, 0.1, 1) forwards; }
.js .hero h1 .line:nth-child(2) .line-inner { animation-delay: 90ms; }

@keyframes rise { to { transform: translateY(0); } }

.caret {
  display: inline-block;
  width: 0.1em;
  height: 0.78em;
  margin-left: 0.08em;
  background: var(--accent);
  animation: blink 1.1s steps(1) infinite;
}

@keyframes blink { 50% { opacity: 0; } }

.hero .role {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.75rem;
}

.hero .greet {
  font-family: var(--font-voice);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ink-2);
  margin: -1.1rem 0 1.75rem;
  max-width: 34rem;
}

.hero .lead {
  margin-top: 2.25rem;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  line-height: 1.55;
}

/* crosshair motif: two hairlines + a coordinates readout tracking the cursor */
.xhair { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity var(--dur-2) var(--ease-out); overflow: clip; }
.hero:hover .xhair { opacity: 1; }
.xhair .h { position: absolute; left: 0; right: 0; height: 1px; background: var(--hairline); }
.xhair .v { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--hairline); }
.xhair .coords {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  transform: translate(10px, 12px);
  white-space: nowrap;
}

@media (hover: none), (prefers-reduced-motion: reduce) {
  .xhair { display: none; }
  .js .hero h1 .line-inner { animation: none; transform: none; }
  .caret { animation: none; }
}

/* ---------- ticker ---------- */

.ticker {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  overflow: hidden;
  padding: 0.8rem 0;
  user-select: none;
}

.ticker-track {
  display: flex;
  gap: 2.75rem;
  width: max-content;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  animation: ticker 36s linear infinite;
}

.ticker-track span { flex: none; }
.ticker-track .dot { color: var(--accent); }

@keyframes ticker { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
}

.hero-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  margin-top: 2.25rem;
  font-size: 0.95rem;
}

.hero-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 2px;
  transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}

.hero-links a:hover { color: var(--ink); border-color: var(--accent); }
.hero-links svg { width: 15px; height: 15px; fill: currentColor; }

/* ---------- section headers ---------- */

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.section-head h2 { font-size: clamp(2.1rem, 5.5vw, 3.6rem); letter-spacing: -0.03em; }
.section-head .count {
  font-family: var(--font-voice);
  font-style: italic;
  color: var(--ink-3);
  font-size: 1.1rem;
}

/* ---------- work list ---------- */

.work-list { display: flex; flex-direction: column; }

.work-row {
  display: grid;
  grid-template-columns: 3.5rem 1fr auto;
  align-items: baseline;
  gap: 1.25rem;
  padding: clamp(2rem, 4.5vw, 3.25rem) 0;
  border-top: 1px solid var(--hairline);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.work-row:last-child { border-bottom: 1px solid var(--hairline); }

.work-row .num {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--ink-3);
}

.work-row .ghost {
  position: absolute;
  right: clamp(0rem, 4vw, 3rem);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(6rem, 18vw, 13rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--hairline);
  z-index: 0;
  pointer-events: none;
  transition: -webkit-text-stroke-color var(--dur-2) var(--ease-out);
}

.work-row:hover .ghost { -webkit-text-stroke-color: var(--baseline); }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .work-row .ghost {
      animation: drift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    @keyframes drift {
      from { transform: translateY(calc(-50% + 2.5rem)); }
      to   { transform: translateY(calc(-50% - 2.5rem)); }
    }
  }
}

.work-row > span:not(.ghost) { position: relative; z-index: 1; }

.work-row h3 {
  font-size: clamp(1.6rem, 4.2vw, 2.8rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  transition: color var(--dur-1) var(--ease-out), transform 300ms cubic-bezier(0.2, 0.65, 0.1, 1);
}

.work-row:hover h3 { transform: translateX(6px); }

.work-row p {
  margin: 0.5rem 0 0;
  color: var(--ink-2);
  font-size: 0.98rem;
  max-width: 38rem;
}

.work-row .meta {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-3);
  white-space: nowrap;
  transition: color var(--dur-1) var(--ease-out), transform 200ms ease;
}

.work-row:hover h3 { color: var(--accent-deep); }
.work-row:hover .meta { color: var(--accent); transform: translateX(4px); }

.metric-chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-2);
  background: var(--accent-wash);
  border-radius: 999px;
  padding: 0.15rem 0.65rem;
  margin-top: 0.7rem;
}

@media (max-width: 40rem) {
  .work-row { grid-template-columns: 2.25rem 1fr; }
  .work-row .meta { display: none; }
}

/* ---------- small project cards ---------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: 1rem;
  margin-top: 3rem;
}

.card {
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 1.4rem 1.4rem 1.25rem;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--paper);
  transition: border-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}

a.card:hover { border-color: var(--accent); transform: translateY(-2px); }

.card h4 {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  margin: 0;
}

.card p { margin: 0; font-size: 0.9rem; color: var(--ink-2); flex: 1; }

.card .tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-3);
}

/* ---------- experience ---------- */

.xp { border-top: 1px solid var(--hairline); }

.xp-row {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 1.5rem;
  padding: 1.9rem 0;
  border-bottom: 1px solid var(--hairline);
}

.xp-row .when {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--ink-3);
  padding-top: 0.3rem;
}

.xp-row h3 { font-size: 1.12rem; font-weight: 600; }
.xp-row .org { color: var(--ink-2); font-weight: 400; }
.xp-row p { margin: 0.55rem 0 0; color: var(--ink-2); font-size: 0.96rem; max-width: 44rem; }

@media (max-width: 40rem) {
  .xp-row { grid-template-columns: 1fr; gap: 0.35rem; }
}

/* ---------- skills ---------- */

.skills dl {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 1.1rem 1.5rem;
  margin: 0;
}

.skills dt {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 0.15rem;
}

.skills dd { margin: 0; color: var(--ink-2); font-size: 0.98rem; }

@media (max-width: 40rem) {
  .skills dl { grid-template-columns: 1fr; gap: 0.2rem 0; }
  .skills dd { margin-bottom: 0.9rem; }
}

/* ---------- contact ---------- */

.contact h2 {
  font-size: clamp(2.4rem, 7.5vw, 5.5rem);
  letter-spacing: -0.035em;
  max-width: 18ch;
}

.contact .email {
  display: inline-block;
  margin-top: 2.5rem;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3.5vw, 2.2rem);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 3px;
  will-change: transform;
}

.contact .email:hover { color: var(--accent-deep); }

.clock { font-variant-numeric: tabular-nums; }

/* view transitions between pages (progressive, Chrome-first) */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation-duration: 180ms; }
  ::view-transition-new(root) { animation-duration: 260ms; }
}

/* ---------- footer ---------- */

footer {
  border-top: 1px solid var(--hairline);
  padding: 2rem 0 3rem;
  font-size: 0.85rem;
  color: var(--ink-3);
}

.foot-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
}

footer a { color: var(--ink-2); }

/* ---------- the title block: every sheet signs itself off ---------- */

.colophon {
  display: grid;
  grid-template-columns: 5fr 4fr 3fr;
  border: 1px solid var(--hairline);
}

.colophon > div {
  min-width: 0;
  padding: 0.62rem 0.85rem 0.68rem;
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.colophon > div:nth-child(3n) { border-right: 0; }
.colophon > div:nth-last-child(-n + 3) { border-bottom: 0; }

.col-k {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.3rem;
}

.col-v {
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--ink-2);
  overflow-wrap: break-word;
}

.col-v a { color: var(--ink-2); text-decoration-color: var(--hairline); }
.col-v a:hover { color: var(--ink); }

@media (max-width: 46rem) {
  .colophon { grid-template-columns: 1fr; }
  .colophon > div { border-right: 0; }
  .colophon > div:nth-last-child(-n + 3) { border-bottom: 1px solid var(--hairline); }
  .colophon > div:last-child { border-bottom: 0; }
}

/* ---------- the exploded view: the page torn into its strata ---------- */

.anatomy {
  position: fixed;
  inset: 0;
  z-index: 240;
  background: var(--paper);
  perspective: 1700px;
  display: none;
  overflow: hidden;
  touch-action: none;
}
.anatomy.on { display: block; }

.anatomy .mono { font-family: var(--font-mono); }

.an-stack {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
.anatomy.flat .an-stack, .anatomy.flat .an-sheet { transform-style: flat; }

.an-sheet {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: opacity var(--dur-2) var(--ease-out), filter var(--dur-2) var(--ease-out);
}
.an-sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  opacity: var(--sheet, 0);
  pointer-events: none;
}
.an-sheet.dim { opacity: 0.3; filter: saturate(0.6); }
.an-sheet.hot::before { border-color: var(--accent); }

.an-chip {
  position: absolute;
  right: 14px;
  top: 50%;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
  font-size: 0.68rem;
  opacity: var(--chipop, 0);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
}

/* x-ray strata exist only while the page is apart; at rest the stage must
   be indistinguishable from the real page beneath it */
.an-frame, .an-tick, .an-wash, .an-grid, .an-data, .an-noscene { opacity: var(--xray, 0); }
.anatomy.arriving .an-bom, .anatomy.arriving .an-hint { opacity: 0 !important; pointer-events: none !important; }

.an-frame { position: absolute; inset: 26px; border: 1px solid var(--hairline); }
.an-tick { position: absolute; width: 18px; height: 18px; }
.an-tick::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--ink-3); }
.an-tick::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px solid var(--ink-3); }
.an-wash { position: absolute; inset: 0; }
.an-grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(color-mix(in srgb, var(--accent) 8%, transparent) 1px, transparent 1px) 0 0 / 100% 48px,
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 8%, transparent) 1px, transparent 1px) 0 0 / 48px 100%;
}
.an-data {
  position: absolute;
  inset: 14% 9%;
  font-size: 0.68rem;
  line-height: 2;
  color: var(--ink-3);
  overflow: hidden;
  letter-spacing: 0.03em;
}
.an-data .an-cid { color: var(--accent); }
.an-noscene {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  color: var(--ink-3);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.an-title {
  position: absolute;
  left: 1.4rem;
  bottom: 1.2rem;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  border: 1px solid var(--hairline);
  padding: 0.55rem 0.8rem;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out);
  pointer-events: none;
}
.anatomy.apart .an-title { opacity: 1; }

.an-bom {
  position: absolute;
  right: 1.4rem;
  top: 50%;
  transform: translateY(-50%);
  width: min(21rem, 40vw);
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(6px);
  font-size: 0.68rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-2) var(--ease-out);
}
.anatomy.apart .an-bom { opacity: 1; pointer-events: auto; }
.an-bom-h {
  padding: 0.55rem 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid var(--hairline);
}
.an-row {
  display: grid;
  grid-template-columns: 1.4rem 6.2rem 1fr auto;
  gap: 0.6rem;
  padding: 0.45rem 0.85rem;
  border-bottom: 1px solid color-mix(in srgb, var(--hairline) 55%, transparent);
  cursor: pointer;
  color: var(--ink-2);
}
.an-row:last-child { border-bottom: 0; }
.an-row:hover, .an-row.on { background: color-mix(in srgb, var(--accent) 9%, transparent); color: var(--ink); }
.an-row .an-n { color: var(--accent); }
.an-row .an-kb { color: var(--ink-3); text-align: right; }
.an-row.an-reader, .an-row.an-reader .an-n, .an-row.an-reader .an-kb { color: var(--accent-deep); cursor: default; }

.an-hint {
  position: absolute;
  left: 50%;
  bottom: 1.35rem;
  transform: translateX(-50%);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out);
  pointer-events: none;
}
.anatomy.apart .an-hint { opacity: 0.85; }

.an-pill {
  position: fixed;
  right: 1.3rem;
  bottom: 1.2rem;
  z-index: 90;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  cursor: pointer;
  transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.an-pill:hover { color: var(--ink); border-color: var(--accent); }
body.demo-on .an-pill, body.anatomy-on .an-pill { opacity: 0; pointer-events: none; }

@media (max-width: 56.25rem) {
  .an-bom { display: none; }
  .an-title { font-size: 0.6rem; }
}

/* ---------- sheet 404: the missing detail ---------- */

.nf {
  min-height: calc(100vh - 3.5rem);
  display: grid;
  align-content: center;
  justify-items: start;
  position: relative;
  padding-block: 6rem 4rem;
}

.nf-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(6.5rem, 24vw, 15rem);
  line-height: 0.88;
  letter-spacing: 0.02em;
  color: transparent;
  -webkit-text-stroke: 1px var(--ink-3);
  user-select: none;
  margin-bottom: 1.2rem;
}

.nf h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); margin-bottom: 0.8rem; }
.nf .lead { max-width: 34rem; }

.nf-note {
  margin-top: 2.2rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-3);
}

/* ---------- case study pages ---------- */

.cs-header { padding-block: clamp(3rem, 8vw, 5.5rem) clamp(2rem, 5vw, 3rem); }

.back {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-decoration: none;
  color: var(--ink-3);
  display: inline-block;
  margin-bottom: 2.5rem;
}

.back:hover { color: var(--accent); }

.cs-header h1 {
  font-size: clamp(2.3rem, 7vw, 4.8rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.0;
  max-width: 20ch;
}

.cs-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2.25rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.88rem;
}

.cs-meta div { min-width: 8rem; }

.cs-meta dt {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.15rem;
}

.cs-meta dd { margin: 0; color: var(--ink-2); }

.cs-body { padding-block: 0 clamp(3.5rem, 9vw, 6rem); position: relative; }

/* the machine annotates the margin while the human writes the column */
.mnote {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.75;
  letter-spacing: 0.02em;
  color: var(--ink-3);
}

.mnote::before {
  content: "";
  display: block;
  width: 1.4rem;
  border-top: 1px solid var(--baseline);
  margin-bottom: 0.5rem;
}

@media (min-width: 75rem) {
  .mnote {
    position: absolute;
    left: calc(var(--pad) + var(--measure) + 3rem);
    width: 13rem;
  }
}

@media (max-width: 74.99rem) {
  .mnote {
    border-left: 1px solid var(--hairline);
    padding-left: 0.9rem;
    margin: 1.5rem 0;
    max-width: 26rem;
  }
  .mnote::before { display: none; }
}

/* the case number haunts the header like the work list ghosts */
.cs-header { position: relative; }

.cs-num {
  position: absolute;
  right: var(--pad);
  top: clamp(2rem, 6vw, 4rem);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(7rem, 17vw, 13rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--hairline);
  pointer-events: none;
  user-select: none;
  z-index: -1;
}

.cs-next {
  border-top: 1px solid var(--hairline);
  padding-block: 2.5rem 4rem;
}

.cs-next a {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 3vw, 1.7rem);
  font-weight: 600;
  text-decoration: none;
}

.cs-next .label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: block;
  margin-bottom: 0.5rem;
}

/* ---------- stat tiles ---------- */

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}

.stat {
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 1.1rem 1.25rem 1rem;
}

.stat .label { font-size: 0.82rem; color: var(--ink-3); margin: 0 0 0.3rem; }

.stat .value {
  font-family: var(--font-body);
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1.1;
  margin: 0;
}

.stat .note { font-size: 0.78rem; color: var(--ink-3); margin: 0.3rem 0 0; }

/* ---------- charts (dataviz spec) ---------- */

.viz {
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--paper);
  padding: 1.5rem 1.5rem 1rem;
  margin: 2rem 0;
  position: relative;
}

.viz .viz-title { font-weight: 600; font-size: 0.98rem; margin: 0 0 0.15rem; font-family: var(--font-body); }
.viz .viz-sub { font-size: 0.82rem; color: var(--ink-3); margin: 0 0 1.25rem; }

.viz svg { display: block; width: 100%; height: auto; }

.viz .grid-line { stroke: var(--hairline); stroke-width: 1; }
.viz .axis-line { stroke: var(--baseline); stroke-width: 1; }
.viz .tick-label, .viz .cat-label {
  font-family: var(--font-body);
  font-size: 11px;
  fill: var(--ink-3);
}
.viz .tick-label { font-variant-numeric: tabular-nums; }
.viz .direct-label {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  fill: var(--ink);
}
.viz .series-ft { fill: var(--accent); }
.viz .series-base { fill: var(--baseline); }
.viz .line-path { stroke: var(--accent); stroke-width: 2; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.viz .dot { fill: var(--accent); stroke: var(--paper); stroke-width: 2; }

.viz-legend {
  display: flex;
  gap: 1.4rem;
  font-size: 0.8rem;
  color: var(--ink-2);
  margin: 0.75rem 0 0.25rem;
}

.viz-legend .key { display: inline-flex; align-items: center; gap: 0.45rem; }
.viz-legend .swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

.viz details { margin-top: 0.75rem; }
.viz summary {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-3);
  cursor: pointer;
}
.viz table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  margin-top: 0.6rem;
}
.viz th, .viz td {
  text-align: left;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--hairline);
}
.viz td:not(:first-child), .viz th:not(:first-child) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.viz th { font-weight: 600; color: var(--ink-2); }

.viz-tip {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.78rem;
  line-height: 1.45;
  padding: 0.45rem 0.65rem;
  border-radius: 6px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 120ms ease, transform 120ms ease;
  max-width: 16rem;
}

.viz-tip.show { opacity: 1; transform: translateY(0); }

/* ---------- diagram ---------- */

.diagram { margin: 2rem 0; }
.diagram svg { width: 100%; height: auto; display: block; }
.diagram .box { fill: var(--plane); stroke: var(--baseline); stroke-width: 1; rx: 8; }
.diagram .box-accent { fill: var(--accent-wash); stroke: var(--accent); }
.diagram .flow { stroke: var(--ink-3); stroke-width: 1.25; fill: none; marker-end: url(#arrow); }
.diagram text { font-family: var(--font-body); font-size: 12px; fill: var(--ink); }
.diagram .small { font-size: 10.5px; fill: var(--ink-2); }
.diagram .dlabel { font-family: var(--font-mono); font-size: 10px; fill: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase; }

/* ---------- reveal animation ---------- */

.js .reveal { opacity: 0; transform: translateY(14px); }

.js .reveal.in {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
  .js .reveal.in { transition: none; }
  .work-row:hover .meta { transform: none; }
  a.card:hover { transform: none; }
}

/* ---------- v4: particle field ---------- */

.field {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-out);
}

.field.live { opacity: 1; }

main, footer { position: relative; z-index: 2; }

/* the h1 stays crisp DOM type; the 3D layer is scenery behind it */
.hero h1 { position: relative; z-index: 2; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45); }
:root[data-theme="light"] .hero h1 { text-shadow: none; }

/* interlude: pinned chapter break, the camera flies through the network */
.interlude {
  height: 100vh;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}

.i-labels {
  position: relative;
  padding-bottom: 14vh;
  width: 100%;
  text-align: center;
}

.i-labels > span {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  font-family: var(--font-mono);
  font-size: clamp(0.8rem, 1.6vw, 1rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
  white-space: nowrap;
}

.i-labels > span.on { opacity: 1; transform: translateX(-50%) translateY(0); }
.i-labels > span span { position: static; transform: none; opacity: inherit; color: var(--accent); }

/* depth kit: content lives in a perspective space */
.work-list, .card-grid, .xp { perspective: 1100px; }
.card { transform-style: preserve-3d; will-change: transform; }

/* ---------- v3: preloader (training run) ---------- */

.preloader {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--paper);
  display: none;
  align-items: center;
  justify-content: center;
}

.js .preloader { display: flex; }
.preloader.done { display: none; }

.preloader-log {
  font-family: var(--font-mono);
  font-size: clamp(0.78rem, 1.6vw, 0.95rem);
  line-height: 2;
  color: var(--ink-2);
  min-width: min(30rem, 84vw);
}

.preloader-log .row { opacity: 0; white-space: pre; }
.preloader-log .row.on { opacity: 1; }
.preloader-log .prompt { color: var(--accent); }
.preloader-log .ok { color: var(--good); }
.preloader-log .bar { letter-spacing: 0.05em; }
.preloader-log .val { color: var(--ink); font-weight: 600; }

.preloader-log .sample-row .sample { letter-spacing: 0.04em; }
.tok-miss { color: var(--ink-3); opacity: 0.55; }
.tok-lock { color: var(--ink); }

.preloader .skip {
  position: absolute;
  bottom: 1.5rem;
  right: 1.75rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  cursor: pointer;
  background: none;
  border: 0;
}

/* ---------- v3: temperature control ---------- */

.temp-ctl {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-3);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 0.25rem 0.6rem;
  cursor: pointer;
  background: none;
  transition: border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}

.temp-ctl:hover { border-color: var(--accent); color: var(--ink); }
.temp-ctl .t-val { color: var(--accent); font-weight: 600; min-width: 2ch; }

/* the sound pill keeps a fixed seat width so on/off does not reflow the
   nav; below 900px it stands down and the terminal owns the switch */
.sound-ctl .t-val { min-width: 3ch; }
@media (max-width: 56.25rem) {
  .nav-links .sound-ctl { display: none; }
}

:root { --spring: cubic-bezier(0.2, 0.65, 0.1, 1); --motion-scale: 1; }
body[data-temp="0.0"] { --motion-scale: 0; }
body[data-temp="1.0"] { --spring: cubic-bezier(0.34, 1.56, 0.4, 1); --motion-scale: 1.35; }

/* ---------- v3: loss-curve scroll progress ---------- */

.loss-widget {
  position: fixed;
  left: 1.1rem;
  bottom: 1.1rem;
  z-index: 40;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 0.5rem 0.65rem 0.4rem;
  pointer-events: none;
}

.loss-widget svg { display: block; width: 96px; height: 28px; margin-bottom: 0.25rem; }
.loss-widget .curve { stroke: var(--accent); stroke-width: 1.5; fill: none; }
.loss-widget .loss-val { color: var(--ink); font-weight: 600; }

@media (max-width: 48rem) { .loss-widget { display: none; } }

/* ---------- v3: token-stream hero + logprob tooltips ---------- */

.tok { visibility: hidden; }
.tok.on { visibility: visible; }
html:not(.js) .tok { visibility: visible; }

.lp {
  border-bottom: 1px dashed var(--baseline);
  cursor: help;
  position: relative;
}

.lp:hover { border-bottom-color: var(--accent); }

.lp-tip {
  position: fixed;
  z-index: 80;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.9;
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 140ms ease, transform 140ms ease;
  white-space: pre;
}

.lp-tip.show { opacity: 1; transform: none; }
.lp-tip .p-bar { color: var(--accent); }

/* ---------- v4: paste-the-JD panel + fit report ---------- */

.live-note {
  margin: 1.6rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.8;
  color: var(--ink-3);
  max-width: 34rem;
}

.live-note kbd {
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 0 0.35em;
  font-family: inherit;
  color: var(--ink-2);
}

.preloader .pre-note {
  position: absolute;
  bottom: 1.5rem;
  left: 1.75rem;
  font-family: var(--font-voice);
  font-style: italic;
  font-size: 1rem;
  color: var(--ink-2);
  margin: 0;
}

.tailored-line {
  margin: 1.5rem 0 0;
  font-family: var(--font-voice);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--accent);
  max-width: 34rem;
}

.jd-panel { margin-top: 2.25rem; max-width: 38rem; }

.jd-toggle {
  background: none;
  border: 1px dashed var(--baseline);
  border-radius: 8px;
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  padding: 0.6rem 0.9rem;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}

.jd-toggle:hover { border-color: var(--accent); color: var(--ink); }
.jd-panel.open .jd-toggle { border-style: solid; border-color: var(--accent); color: var(--ink); }

.jd-form { display: none; margin-top: 0.75rem; }
.jd-panel.open .jd-form { display: block; }

.jd-form textarea {
  width: 100%;
  background: var(--plane);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.6;
  padding: 0.75rem;
  resize: vertical;
}

.jd-form textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.jd-submit {
  margin-top: 0.6rem;
  background: var(--accent);
  color: #06111c;
  border: 0;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.55rem 1.2rem;
  cursor: pointer;
}

.jd-submit:hover { background: var(--accent-deep); }

.fit-card {
  margin-top: 1rem;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--plane);
  padding: 1.1rem 1.25rem;
  font-size: 0.9rem;
}

.fit-head { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.9rem; }
.fit-overall { font-family: var(--font-display); font-size: 2.2rem; font-weight: 700; color: var(--ink); }
.fit-overall-label { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-3); }

.fit-dim { padding: 0.55rem 0; border-top: 1px solid var(--hairline); }
.fit-dim-top { display: flex; align-items: baseline; gap: 0.75rem; }
.fit-dim-name { font-weight: 600; flex: 1; }
.fit-bar { font-family: var(--font-mono); font-size: 0.8rem; color: var(--accent); letter-spacing: 0.1em; }
.fit-bar-off { color: var(--hairline); }
.fit-score { font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-3); }
.fit-evidence { margin: 0.3rem 0 0; color: var(--ink-2); font-size: 0.85rem; }
.fit-gap { margin: 0.2rem 0 0; font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-3); }
.fit-disclaimer { margin: 0.9rem 0 0; font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-3); }
.fit-disclaimer a { color: var(--ink-2); }
.fit-reset { background: none; border: 0; color: var(--accent); font: inherit; cursor: pointer; padding: 0; }
.fit-loading { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-2); margin: 0; }
.fit-error { font-family: var(--font-mono); font-size: 0.8rem; color: #e66767; margin: 0; }

/* ---------- v3: attention refs ---------- */

.attn {
  font-family: var(--font-mono);
  font-size: 0.62em;
  vertical-align: super;
  text-decoration: none;
  color: var(--accent);
  margin-left: 0.15rem;
  border-bottom: none;
}

.attn:hover { color: var(--accent-deep); }

/* ---------- v3: terminal ---------- */

.term {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 150;
  background: color-mix(in srgb, var(--ink) 96%, transparent);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.7;
  max-height: 55vh;
  transform: translateY(100%);
  transition: transform var(--dur-2) var(--ease-spring);
  border-top: 2px solid var(--accent);
  display: flex;
  flex-direction: column;
}

.term.open { transform: translateY(0); }

.term-out { padding: 1rem 1.25rem 0.25rem; overflow-y: auto; flex: 1; }
.term-out .t-accent { color: #8db8ec; }
.term-out .t-good { color: #7ad97a; }
.term-out .t-dim { opacity: 0.65; }
.term-out a { color: #8db8ec; }

.term-in {
  display: flex;
  gap: 0.5rem;
  padding: 0.4rem 1.25rem 0.9rem;
  align-items: center;
}

.term-in .ps1 { color: #7ad97a; }

.term-in input {
  flex: 1;
  background: none;
  border: 0;
  outline: none;
  color: inherit;
  font: inherit;
  caret-color: var(--accent);
}

.term-hint {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--ink-3);
  letter-spacing: 0.06em;
}

.term-hint kbd {
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 0 0.35em;
  font-family: inherit;
}

/* ---------- v3: site evals footer ---------- */

.site-evals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.75rem;
  margin: 0 0 2rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-3);
}

.site-evals div { border: 1px solid var(--hairline); border-radius: 8px; padding: 0.6rem 0.75rem; }
.site-evals .ev { display: block; color: var(--ink); font-size: 1rem; font-weight: 600; margin-top: 0.15rem; font-variant-numeric: tabular-nums; }

/* ---------- watch it learn: the training run replayed by scroll ---------- */

.learn { position: relative; padding-block: 0; }

.learn-pin {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: clamp(1.75rem, 3.5vh, 3rem) 0;
  box-sizing: border-box;
  background: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in srgb, var(--paper) 90%, transparent) 12%,
    color-mix(in srgb, var(--paper) 90%, transparent) 88%,
    transparent 100%
  );
}

.learn-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(0.7rem, 1.9vh, 1.3rem);
}

.learn-head {
  font-size: clamp(1.5rem, 2.7vw, 2.2rem);
  letter-spacing: -0.03em;
  margin: 0 0 0.5rem;
}

.learn-top .kicker { margin-bottom: 0.7rem; }

.learn-sub {
  max-width: var(--measure);
  font-family: var(--font-voice);
  font-style: italic;
  font-size: clamp(1.05rem, 1.1rem + 0.55vh, 1.3rem);
  line-height: 1.45;
  color: var(--ink-2);
  margin: 0;
}

.learn-stage {
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: clamp(0.9rem, 2vw, 1.4rem);
  background: color-mix(in srgb, var(--plane) 92%, transparent);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.learn-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.4rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.learn-badge {
  color: var(--accent);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 0.05rem 0.7em;
}

.learn-badge.pulse::before {
  content: "";
  display: inline-block;
  width: 0.45em;
  height: 0.45em;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 0.5em;
  animation: learnPulse 1.2s ease-in-out infinite;
}

@keyframes learnPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

.learn-sample {
  font-family: var(--font-mono);
  font-size: clamp(0.95rem, 0.75rem + 1.1vh, 1.35rem);
  line-height: 1.55;
  color: var(--ink-2);
  min-height: 4.65em;
  max-width: 64ch;
  overflow-wrap: break-word;
}

.learn-sample .learn-seed { color: var(--ink-3); opacity: 0.65; }

.learn-stagelabel {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}

.learn-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 2rem + 3.4vh, 4rem);
  letter-spacing: -0.02em;
  line-height: 1.05;
  display: flex;
  flex-wrap: wrap;
}

.learn-name span {
  display: inline-block;
  min-width: 0.55em;
  text-align: center;
  white-space: pre;
  color: var(--ink-3);
  opacity: 0.45;
  filter: blur(2.5px);
  transform: translateY(0.06em) scale(0.97);
  transition: color var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out), filter var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-spring), text-shadow var(--dur-2) var(--ease-out);
}

.learn-name span.on {
  color: var(--ink);
  opacity: 1;
  filter: blur(0);
  transform: none;
  text-shadow: 0 0 22px var(--glow);
}

.learn-done .learn-name span.on {
  text-shadow: 0 0 26px var(--glow), 0 0 64px var(--glow);
}

.learn-endnote {
  font-family: var(--font-voice);
  font-style: italic;
  font-size: clamp(1rem, 0.9rem + 0.5vh, 1.15rem);
  color: var(--ink-2);
  max-width: var(--measure);
  margin: 0;
  min-height: 1.6em;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
}

.learn-done .learn-endnote { opacity: 1; transform: none; }

.learn-rail {
  position: relative;
  height: 1px;
  background: var(--hairline);
}

.learn-rail-dot {
  position: absolute;
  top: 50%;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--glow);
  transform: translate(-50%, -50%);
}

@media (max-height: 640px) {
  .learn-sub { display: none; }
  .learn-sample { min-height: 3.2em; font-size: 0.95rem; }
  .learn-name { font-size: clamp(1.5rem, 5vw, 2.6rem); }
  .learn-top .kicker { margin-bottom: 0.4rem; }
}

/* ---------- the unbroken thread ---------- */

.thread {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  pointer-events: none;
  overflow: visible;
}

.thread-path {
  fill: none;
  stroke: url(#threadGrad);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.thread-tip {
  fill: var(--accent);
  filter: drop-shadow(0 0 7px var(--glow));
}

@media (max-width: 900px), (pointer: coarse) {
  .thread { display: none; }
}

/* ---------- the instrument bezel: the site is one device ---------- */

.bezel {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  border: 1px solid color-mix(in srgb, var(--ink-3) 22%, transparent);
}

.bz-c {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 0 solid color-mix(in srgb, var(--ink-3) 55%, transparent);
}

.bz-tl { top: 9px; left: 9px; border-top-width: 1px; border-left-width: 1px; }
.bz-tr { top: 9px; right: 9px; border-top-width: 1px; border-right-width: 1px; }
.bz-bl { bottom: 9px; left: 9px; border-bottom-width: 1px; border-left-width: 1px; }
.bz-br { bottom: 9px; right: 9px; border-bottom-width: 1px; border-right-width: 1px; }

.bz-alt {
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bz-doc {
  position: absolute;
  left: 7px;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}

@media (max-width: 900px), (pointer: coarse) {
  .bezel { display: none; }
}

/* ---------- hero spec plate ---------- */

.hero-meta {
  position: absolute;
  top: clamp(4rem, 10vh, 6.5rem);
  right: var(--pad);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.9;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1100px) {
  .hero-meta { display: none; }
}

/* ---------- interview tab + shared report link ---------- */

.jd-tabs {
  display: none;
  gap: 1.1rem;
  margin: 0.9rem 0 0.2rem;
}

.jd-panel.open .jd-tabs { display: flex; }

.jd-tab {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  padding: 0.2rem 0;
  cursor: pointer;
}

.jd-tab.on { color: var(--accent); border-bottom-color: var(--accent); }

.brief-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-top: 0.7rem;
}

.jd-panel:not(.open) .brief-form { display: none; }

.brief-label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.brief-form input[type="text"] {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--plane);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
}

.brief-form input[type="text"]:focus { outline: none; border-color: var(--accent); }

.brief-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.chip {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-2);
  background: none;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 0.32rem 0.85rem;
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}

.chip:hover { border-color: var(--ink-3); transform: translateY(-1px); }
.chip.on { border-color: var(--accent); color: var(--accent); background: var(--accent-wash); }

.jd-submit:hover, .fit-share-btn:hover { transform: translateY(-1px); }
.jd-submit, .fit-share-btn { transition: border-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); }

.fit-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
  margin: 0.9rem 0 0;
}

.fit-share-btn {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--accent);
  background: none;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 0.45rem 1rem;
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out);
}

.fit-share-btn:hover { border-color: var(--accent); }

.fit-share-note {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--ink-3);
}

.shared-banner {
  position: fixed;
  bottom: 0.9rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 180;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  max-width: min(92vw, 46rem);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-2);
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
  overflow: hidden;
}

.shared-banner a { color: var(--accent); text-decoration: none; }
.shared-banner a:hover { text-decoration: underline; }

.shared-status { color: var(--ink-3); }
.shared-status.ok { color: var(--good); }
.shared-status.bad { color: #e05a4e; }

@media (max-width: 640px) {
  .shared-banner { white-space: normal; border-radius: 14px; }
}

/* ---------- v3: debug panel ---------- */

.dbg {
  position: fixed;
  top: 4.25rem;
  right: 0.9rem;
  z-index: 160;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  border-radius: 8px;
  padding: 0.75rem 0.9rem;
  width: 15rem;
  line-height: 2.1;
}

.dbg label { display: flex; justify-content: space-between; gap: 0.5rem; align-items: center; }
.dbg input[type="range"] { width: 7rem; accent-color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .term { transition: none; }
}

/* ============================================================
   THE WORKING DRAWING (pure-UI layer)
   One layout idea per section, two moments of scale violence,
   registration details, and the construction toggle.
   ============================================================ */

/* registration mark: every kicker carries its plus */
.kicker::before { content: "+ "; color: var(--baseline); }

/* ---------- work: alternating asymmetric spreads ---------- */

.work-row {
  grid-template-columns: minmax(7rem, 11rem) 1fr auto;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: start;
  padding-block: clamp(2.2rem, 5.5vw, 4rem);
  position: relative;
}

.work-row .ghost { display: none; }

.work-row .num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(4rem, 8vw, 7.5rem);
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--baseline);
  letter-spacing: -0.02em;
  transition: -webkit-text-stroke-color var(--dur-2) var(--ease-out);
}

.work-row:hover .num { -webkit-text-stroke-color: var(--accent); }

.work-row h3 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); }

/* even rows mirror: the column TRACKS must swap along with the assignments,
   otherwise the text lands in the narrow number track and wraps word-by-word */
.work-row:nth-child(even) { grid-template-columns: 1fr minmax(7rem, 11rem) auto; }
.work-row:nth-child(even) { grid-template-columns: 1fr minmax(7rem, 11rem) auto; }
.work-row:nth-child(even) .num { grid-column: 2; grid-row: 1; text-align: right; }
.work-row:nth-child(even) > span:not(.num):not(.meta):not(.ghost) { grid-column: 1; grid-row: 1; }

.work-row .meta {
  writing-mode: vertical-rl;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.68rem;
  align-self: start;
  padding-top: 0.35rem;
}

/* the inspect frame: hovering exposes the drawing around the row */
.work-row::after {
  content: "";
  position: absolute;
  inset: 0.9rem -1.25rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out);
  background:
    linear-gradient(var(--accent), var(--accent)) 0 0 / 12px 1px,
    linear-gradient(var(--accent), var(--accent)) 0 0 / 1px 12px,
    linear-gradient(var(--accent), var(--accent)) 100% 0 / 12px 1px,
    linear-gradient(var(--accent), var(--accent)) 100% 0 / 1px 12px,
    linear-gradient(var(--accent), var(--accent)) 0 100% / 12px 1px,
    linear-gradient(var(--accent), var(--accent)) 0 100% / 1px 12px,
    linear-gradient(var(--accent), var(--accent)) 100% 100% / 12px 1px,
    linear-gradient(var(--accent), var(--accent)) 100% 100% / 1px 12px;
  background-repeat: no-repeat;
}

.work-row:hover::after { opacity: 0.75; }

/* rules draw before content settles. The originals used border-top per
   row with overflow hidden for the retired ghost drift; both yield here
   so the animated rules and the inspect frame can exist. */
.work-list { border-top: 1px solid var(--hairline); }
.work-row { border-top-color: transparent; overflow: visible; }
.work-row:last-child { border-bottom-color: transparent; }
.work-row::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--hairline);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--dur-3) var(--ease-out);
}
.work-row.in::before { transform: scaleX(1); }

/* ---------- experience: the timeline is the figure ---------- */

.xp { --xp-pad: clamp(1.75rem, 4vw, 3rem); position: relative; padding-left: var(--xp-pad); }

.xp::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 1px;
  /* a figure axis, not a hairline: it must survive the paper texture */
  background: color-mix(in srgb, var(--accent) 55%, var(--baseline));
  transform-origin: 50% 0;
}

.xp::before { transform: scaleY(var(--axis, 1)); }

.xp-row { position: relative; padding-block: 1.9rem; border-bottom: 0; }

.xp-row::after {
  content: "";
  position: absolute;
  left: calc(-1 * var(--xp-pad));
  top: 2.55rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--accent);
  transform: translateX(-3.5px);
}

.xp-row .when { color: var(--ink-3); }

/* ---------- skills: a type specimen table ---------- */

.skills dl {
  display: grid;
  grid-template-columns: minmax(11rem, 16rem) 1fr;
  border-top: 1px solid var(--hairline);
  gap: 0;
}

.skills dt {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 1.15rem 1rem 1.15rem 0;
  border-bottom: 1px solid var(--hairline);
  margin: 0;
}

.skills dd {
  margin: 0;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 0.98rem;
  color: var(--ink-2);
}

/* ---------- contact: the poster ---------- */

#contact {
  min-height: 82vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.contact h2 {
  font-family: var(--font-voice);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.15rem, 2.2vw, 1.65rem);
  letter-spacing: 0;
  line-height: 1.4;
  max-width: var(--measure);
  margin-bottom: clamp(1.5rem, 4vh, 3rem);
}

.contact .email {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 6vw, 6.5rem);
  letter-spacing: -0.035em;
  line-height: 1.05;
  white-space: nowrap;
  text-decoration: none;
  border-bottom: 0;
  width: fit-content;
  max-width: 100%;
}

.contact .email:hover { color: var(--accent); }

.contact-meta {
  position: absolute;
  top: clamp(2rem, 6vh, 4rem);
  left: var(--pad);
  right: var(--pad);
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---------- the registration crosshair cursor ----------
   The site's survey mark in your hand: fine dual-outlined ticks with an
   open center, pointing from its middle. Over anything interactive the
   ring closes around the dot. Ink on dark, drafting ink on paper; data
   URIs because cursors cannot read custom properties. Text fields keep
   the native I-beam and touch devices are untouched. */

html.js {
  cursor: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2726%27 height=%2726%27 viewBox=%270 0 26 26%27%3E%3Cg stroke=%27%230b0c10%27 stroke-width=%273.4%27%3E%3Cpath d=%27M13 3v6M13 17v6M3 13h6M17 13h6%27/%3E%3C/g%3E%3Cg stroke=%27%23f2f3ee%27 stroke-width=%271.4%27%3E%3Cpath d=%27M13 3v6M13 17v6M3 13h6M17 13h6%27/%3E%3C/g%3E%3Ccircle cx=%2713%27 cy=%2713%27 r=%271.7%27 fill=%27%23f2f3ee%27 stroke=%27%230b0c10%27 stroke-width=%271%27/%3E%3C/svg%3E") 13 13, default;
}

html.js a, html.js button, html.js [role="button"], html.js summary,
html.js select, html.js .lp, html.js .chip, html.js .jd-tab,
html.js .jd-toggle, html.js .work-row, html.js .card {
  cursor: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2726%27 height=%2726%27 viewBox=%270 0 26 26%27%3E%3Cg stroke=%27%230b0c10%27 stroke-width=%273.4%27%3E%3Cpath d=%27M13 2v4M13 20v4M2 13h4M20 13h4%27/%3E%3Ccircle cx=%2713%27 cy=%2713%27 r=%275.2%27 fill=%27none%27/%3E%3C/g%3E%3Cg stroke=%27%23f2f3ee%27 stroke-width=%271.4%27%3E%3Cpath d=%27M13 2v4M13 20v4M2 13h4M20 13h4%27/%3E%3Ccircle cx=%2713%27 cy=%2713%27 r=%275.2%27 fill=%27none%27/%3E%3C/g%3E%3Ccircle cx=%2713%27 cy=%2713%27 r=%272%27 fill=%27%23f2f3ee%27/%3E%3C/svg%3E") 13 13, pointer;
}

html.js[data-theme="light"] {
  cursor: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2726%27 height=%2726%27 viewBox=%270 0 26 26%27%3E%3Cg stroke=%27%23f7f4ed%27 stroke-width=%273.4%27%3E%3Cpath d=%27M13 3v6M13 17v6M3 13h6M17 13h6%27/%3E%3C/g%3E%3Cg stroke=%27%231c1913%27 stroke-width=%271.4%27%3E%3Cpath d=%27M13 3v6M13 17v6M3 13h6M17 13h6%27/%3E%3C/g%3E%3Ccircle cx=%2713%27 cy=%2713%27 r=%271.7%27 fill=%27%231c1913%27 stroke=%27%23f7f4ed%27 stroke-width=%271%27/%3E%3C/svg%3E") 13 13, default;
}

html.js[data-theme="light"] a, html.js[data-theme="light"] button,
html.js[data-theme="light"] [role="button"], html.js[data-theme="light"] summary,
html.js[data-theme="light"] select, html.js[data-theme="light"] .lp,
html.js[data-theme="light"] .chip, html.js[data-theme="light"] .jd-tab,
html.js[data-theme="light"] .jd-toggle, html.js[data-theme="light"] .work-row,
html.js[data-theme="light"] .card {
  cursor: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2726%27 height=%2726%27 viewBox=%270 0 26 26%27%3E%3Cg stroke=%27%23f7f4ed%27 stroke-width=%273.4%27%3E%3Cpath d=%27M13 2v4M13 20v4M2 13h4M20 13h4%27/%3E%3Ccircle cx=%2713%27 cy=%2713%27 r=%275.2%27 fill=%27none%27/%3E%3C/g%3E%3Cg stroke=%27%231c1913%27 stroke-width=%271.4%27%3E%3Cpath d=%27M13 2v4M13 20v4M2 13h4M20 13h4%27/%3E%3Ccircle cx=%2713%27 cy=%2713%27 r=%275.2%27 fill=%27none%27/%3E%3C/g%3E%3Ccircle cx=%2713%27 cy=%2713%27 r=%272%27 fill=%27%231c1913%27/%3E%3C/svg%3E") 13 13, pointer;
}

@media (pointer: coarse) {
  html.js, html.js a, html.js button { cursor: auto; }
}

/* ---------- the demo curtain: the page steps aside for the stage ---------- */

main, footer, .nav, .loss-widget, .shared-banner {
  transition: opacity 650ms var(--ease-out);
}

body.demo-on main,
body.demo-on footer {
  opacity: 0.05;
  pointer-events: none;
}

body.demo-on .nav { opacity: 0.15; pointer-events: none; }
body.demo-on .loss-widget,
body.demo-on .model-dock,
body.demo-on .shared-banner,
body.demo-on .halo,
body.demo-on .thread { opacity: 0; }

/* the return door and touch behavior while on stage */
body.demo-on { touch-action: none; }

.demo-exit {
  position: fixed;
  top: 1.3rem;
  right: 1.4rem;
  z-index: 175;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 0.5rem 1.2rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-2) var(--ease-out), border-color var(--dur-1) var(--ease-out);
  box-shadow: var(--elev-1);
}

body.demo-on .demo-exit { opacity: 1; pointer-events: auto; }
.demo-exit:hover { border-color: var(--accent); }

/* ---------- guided demo captions ---------- */

.model-cap {
  position: fixed;
  bottom: 3.6rem;
  left: 50%;
  transform: translate(-50%, 8px);
  z-index: 150;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: var(--ink);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 0.55rem 1.2rem;
  max-width: min(88vw, 34rem);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
  box-shadow: var(--elev-1);
}

.model-cap.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- the model dock ---------- */

.model-dock {
  position: fixed;
  left: 1rem;
  bottom: 6.8rem;
  z-index: 165;
  width: min(21rem, calc(100vw - 2rem));
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  box-shadow: var(--elev-2);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-spring);
}

.model-dock.open { opacity: 1; transform: none; pointer-events: auto; }

.model-dock .dock-title {
  margin: 0 0 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.model-dock button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 0.42rem 0;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--ink-2);
  border-bottom: 1px solid color-mix(in srgb, var(--hairline) 55%, transparent);
  transition: color var(--dur-1) var(--ease-out), padding-left var(--dur-1) var(--ease-out);
}

.model-dock button:last-of-type { border-bottom: 0; }
.model-dock button:hover { color: var(--accent); padding-left: 0.4rem; }

.model-dock .dock-spec {
  border-top: 1px solid var(--hairline);
  margin-top: 0.5rem;
  padding-top: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.9;
  color: var(--ink-2);
  max-height: 14rem;
  overflow-y: auto;
  overflow-wrap: break-word;
}

.model-dock .dock-spec .p-bar { color: var(--accent); }
.model-dock .dock-spec .t-dim { color: var(--ink-3); }
.model-dock .dock-spec .t-accent { color: var(--accent); }

.loss-widget { transition: border-color var(--dur-1) var(--ease-out); }
.loss-widget:hover { border-color: var(--baseline); }

/* the finale invitation: the payoff, not a footnote */
.learn-meet { margin: 0; }

.learn-meet-k {
  margin: 0 0 0.55rem;
  font-family: var(--font-voice);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--ink-2);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-3) var(--ease-out) 0.1s, transform var(--dur-3) var(--ease-out) 0.1s;
}

.learn-meet-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.learn-meet-row button {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--ink);
  background: color-mix(in srgb, var(--plane) 88%, transparent);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  box-shadow: var(--elev-1);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-spring),
    border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}

.learn-meet-row button kbd {
  font-family: inherit;
  font-size: 0.62rem;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 4px;
  padding: 0 0.4em;
  margin-right: 0.5em;
}

.learn-meet-row button:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}

.learn-done .learn-meet-k { opacity: 1; transform: none; }

.learn-done .learn-meet-row button { opacity: 1; transform: none; }
.learn-done .learn-meet-row button:nth-child(1) { transition-delay: 0.15s, 0.15s, 0s, 0s; animation: meetFlash 1.6s var(--ease-out) 1s 1; }
.learn-done .learn-meet-row button:nth-child(2) { transition-delay: 0.25s, 0.25s, 0s, 0s; animation: meetFlash 1.6s var(--ease-out) 1.15s 1; }
.learn-done .learn-meet-row button:nth-child(3) { transition-delay: 0.35s, 0.35s, 0s, 0s; animation: meetFlash 1.6s var(--ease-out) 1.3s 1; }
.learn-done .learn-meet-row button:nth-child(4) { transition-delay: 0.45s, 0.45s, 0s, 0s; animation: meetFlash 1.6s var(--ease-out) 1.45s 1; }

@keyframes meetFlash {
  0%, 100% { border-color: var(--hairline); box-shadow: var(--elev-1); }
  35% { border-color: var(--accent); box-shadow: var(--elev-1), 0 0 18px var(--glow); }
}

@media (max-height: 640px) {
  .learn-meet-k { display: none; }
  .learn-meet-row button { padding: 0.4rem 0.8rem; font-size: 0.72rem; }
}

/* ---------- the construction toggle (press g) ---------- */

.drawing {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 91;
}

.drawing::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0 23px,
    color-mix(in srgb, var(--accent) 9%, transparent) 23px 24px
  );
}

.dg-v {
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}

.dg-label {
  position: absolute;
  writing-mode: vertical-rl;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: color-mix(in srgb, var(--accent) 75%, transparent);
  transform: translate(-50%, -50%);
  background: var(--paper);
  padding: 0.4rem 0.1rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

body.blueprint section,
body.blueprint .ticker {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent);
}

/* ---------- case figures number themselves ---------- */

body[data-page="case"] .cs-body { counter-reset: fig; }
body[data-page="case"] .viz { counter-increment: fig; }
body[data-page="case"] .viz-title::before {
  content: "fig. 0" counter(fig) " \00b7  ";
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  vertical-align: 0.1em;
}

/* ---------- small screens: the spreads stack, the poster shrinks ---------- */

@media (max-width: 760px) {
  .work-row { grid-template-columns: 1fr; padding-block: 2rem; }
  .work-row:nth-child(even) { grid-template-columns: 1fr; }
  .work-row .num { font-size: 2.6rem; -webkit-text-stroke-width: 1px; }
  .work-row:nth-child(even) .num { grid-column: auto; grid-row: auto; text-align: left; }
  .work-row:nth-child(even) > span:not(.num):not(.meta):not(.ghost) { grid-column: auto; grid-row: auto; }
  .work-row .meta { writing-mode: horizontal-tb; padding-top: 0; }
  .work-row::after { display: none; }
  .skills dl { grid-template-columns: 1fr; }
  .skills dt { border-bottom: 0; padding-bottom: 0.2rem; }
  .contact .email { white-space: normal; word-break: break-all; line-height: 1.15; }
  .contact-meta { display: none; }
}

/* ---------- print ---------- */

@media print {
  .nav, .theme-toggle, .cs-next, footer, .loss-widget, .term, .preloader, .ticker,
  .bezel, .hero-meta, .shared-banner, .halo { display: none; }
  body { background: #fff; color: #000; }
}

/* ---------- the click grammar: reticle cursor + verb + sonar ----------
   Chrome lives in cursor.js. The ring trails the pointer; over anything
   clickable it recedes and four brackets lock around the target; a small
   verb names the action; clicks ping a sonar ring from the point of
   contact. Keyboard focus gets the same brackets, snapped. */

.c-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border: 1px solid color-mix(in srgb, var(--ink) 45%, transparent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 300;
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out),
    width var(--dur-1) var(--ease-out), height var(--dur-1) var(--ease-out);
  will-change: left, top;
}
body.cur-on .c-ring { opacity: 1; }

.c-bk {
  position: fixed;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  pointer-events: none;
  z-index: 301;
  will-change: left, top;
}
.c-bk.b-tl { border-top: 1.5px solid var(--accent); border-left: 1.5px solid var(--accent); }
.c-bk.b-tr { border-top: 1.5px solid var(--accent); border-right: 1.5px solid var(--accent); }
.c-bk.b-bl { border-bottom: 1.5px solid var(--accent); border-left: 1.5px solid var(--accent); }
.c-bk.b-br { border-bottom: 1.5px solid var(--accent); border-right: 1.5px solid var(--accent); }
.c-bk.fb { transition: opacity var(--dur-1) var(--ease-out); }

.c-verb {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 302;
  font-family: "Cascadia Mono", ui-monospace, Consolas, monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--accent);
  border-radius: 3px;
  padding: 3px 8px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.c-verb.on { opacity: 1; transform: translateY(0); }

.c-ping {
  position: fixed;
  pointer-events: none;
  z-index: 258;
  border: 1px solid var(--accent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: c-ping 0.5s ease-out forwards;
}
@keyframes c-ping {
  from { width: 10px; height: 10px; opacity: 0.85; }
  to { width: 110px; height: 110px; opacity: 0; }
}

body.demo-on .c-ring, body.demo-on .c-bk, body.demo-on .c-verb { display: none; }
@media print {
  .c-ring, .c-bk, .c-verb, .c-ping { display: none; }
}