/* ==========================================================================
   Kaushal Edara — portfolio
   Design system: near-black engineering document.
   Hairlines are the only structural device. One accent. No shadows, no
   gradients, no radii, no glass. Type does the hierarchy; the grid does
   the density.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* canvas */
  --bg:        #08090a;   /* near-black, never pure #000 */
  --bg-lift:   #0c0d0f;   /* one step up, for hovered / emphasised cells */
  --bg-sunk:   #0a0b0c;
  --bg-raise:  #0e0f12;   /* the Experience band — the one raised surface */

  /* hairlines */
  --line:      #1a1c1f;
  --line-hi:   #2a2d32;

  /* ink */
  --fg:        #ededeb;   /* off-white */
  --fg-mid:    #a9adb3;
  --fg-mute:   #7c8087;   /* muted grey */

  /* the one accent — acid lime. live dots, section numbers, link rules.
     nothing else, ever. */
  --acc:       #c9f24d;
  --acc-dim:   rgba(201, 242, 77, 0.22);

  /* type */
  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --serif: "IBM Plex Serif", Georgia, serif;

  /* rhythm */
  --pad:       clamp(16px, 2.4vw, 30px);
  --gut:       clamp(18px, 4vw, 64px);
  --maxw:      1680px;

  /* motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 520ms;

  color-scheme: dark;

  /* lets the disclosure tree animate height to `auto` where supported */
  interpolate-size: allow-keywords;
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(14px, 0.92vw, 16px);
  line-height: 1.55;
  letter-spacing: -0.005em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-ligatures: none;
}

h1, h2, h3, h4, p, figure, blockquote, ul, ol {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button { font: inherit; color: inherit; background: none; border: 0; }

:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 3px;
  border-radius: 1px;
}

::selection { background: var(--acc); color: #08090a; }

/* --------------------------------------------------------------------------
   3. Primitives
   -------------------------------------------------------------------------- */

/* tiny uppercase letter-spaced monospace label — the workhorse */
.label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
  line-height: 1;
}

.mono {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--fg-mid);
}

.dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  background: var(--acc);
  flex: 0 0 5px;
  margin-right: 8px;
  vertical-align: 1px;
}

.dot--live { animation: pulse 2.6s var(--ease) infinite; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

/* inline text link: hairline underline that goes accent on hover */
.link {
  position: relative;
  color: var(--fg);
  padding-bottom: 1px;
  border-bottom: 1px solid var(--line-hi);
  transition: border-color 180ms var(--ease), color 180ms var(--ease);
}
.link:hover, .link:focus-visible { border-bottom-color: var(--acc); }

.link--mute { color: var(--fg-mid); }
.link--mute:hover { color: var(--fg); }

.shell {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gut);
}

/* --------------------------------------------------------------------------
   4. Tetromino grid
   Cells butt directly against one another and share a single 1px seam:
   the container draws top + left, every cell draws right + bottom.
   Explicit spans + dense flow make blocks interlock like tetrominoes.
   -------------------------------------------------------------------------- */
.tiles {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-flow: row dense;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.tile {
  position: relative;
  grid-column: span 12;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--pad);
  min-height: 128px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg);
  transition: background-color 300ms var(--ease);
}

.tile:hover { background: var(--bg-lift); }
.tile--static:hover { background: var(--bg); }

/* column spans */
.s3 { grid-column: span 3; }
.s4 { grid-column: span 4; }
.s5 { grid-column: span 5; }
.s6 { grid-column: span 6; }
.s7 { grid-column: span 7; }
.s8 { grid-column: span 8; }
.s12 { grid-column: span 12; }

/* row spans */
.r2 { grid-row: span 2; }

/* tile internals */
.tile__idx {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--acc);
  line-height: 1;
}

.tile__name {
  font-size: clamp(15px, 1.25vw, 20px);
  font-weight: 400;
  letter-spacing: -0.018em;
  line-height: 1.2;
  color: var(--fg);
}

/* scale strip — the headline figures and one sentence, above the tree */
.scale {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: clamp(14px, 2vw, 44px);
  align-items: end;
  padding-bottom: clamp(16px, 2vw, 26px);
  border-bottom: 1px solid var(--line);
}

.scale__figs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px clamp(20px, 2.6vw, 46px);
}
.scale__figs li {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.scale__note {
  color: var(--fg-mute);
  font-size: clamp(13px, 0.88vw, 14.5px);
  line-height: 1.5;
  max-width: 62ch;
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   5. Nav
   -------------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color 300ms var(--ease), background-color 300ms var(--ease);
}

.nav.is-stuck {
  border-bottom-color: var(--line);
  background: rgba(8, 9, 10, 0.92);
  backdrop-filter: saturate(140%) blur(6px);
}

.nav__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gut);
  height: 54px;
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 40px);
}

.nav__mark {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg);
  white-space: nowrap;
}

.nav__tabs {
  display: flex;
  align-items: stretch;
  height: 100%;
  margin-left: auto;
}

.nav__tab {
  display: flex;
  align-items: center;
  padding: 0 clamp(10px, 1.4vw, 18px);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-mute);
  border-bottom: 1px solid transparent;
  transition: color 180ms var(--ease), border-color 180ms var(--ease);
}

.nav__tab:hover { color: var(--fg); }

.nav__tab[aria-current="page"] {
  color: var(--fg);
  border-bottom-color: var(--acc);
}

.nav__out {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-left: clamp(10px, 1.4vw, 18px);
  border-left: 1px solid var(--line);
  height: 22px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-mute);
  transition: color 180ms var(--ease);
  white-space: nowrap;
}
.nav__out:hover { color: var(--fg); }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--acc);
  color: #08090a;
  padding: 10px 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.skip:focus { left: 0; }

/* --------------------------------------------------------------------------
   6. Section scaffolding
   -------------------------------------------------------------------------- */
.section { padding-top: clamp(56px, 7vw, 110px); }

.section__head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 16px;
  position: relative;
}

/* the hairline that draws itself in on reveal */
.section__head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--line-hi);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 900ms var(--ease);
}
.section__head.is-in::after { transform: scaleX(1); }

.section__num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--acc);
}

.section__title {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg);
  font-weight: 500;
}

.section__meta {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--fg-mute);
  text-align: right;
}

.section__tiles { margin-top: 22px; }

/* --------------------------------------------------------------------------
   7. Masthead
   -------------------------------------------------------------------------- */
.masthead { padding-top: clamp(40px, 6vw, 92px); }

.masthead__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 14px;
}

.ident__name {
  font-size: clamp(40px, 8.2vw, 132px);
  font-weight: 300;
  line-height: 0.92;
  letter-spacing: -0.045em;
  color: var(--fg);
  margin-bottom: 4px;
}

.ident__name em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  letter-spacing: -0.03em;
}

.ident__role {
  font-size: clamp(15px, 1.5vw, 22px);
  font-weight: 300;
  color: var(--fg-mid);
  letter-spacing: -0.02em;
  line-height: 1.3;
  max-width: 34ch;
}

.ident__full {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: clamp(18px, 3vw, 40px);
}

/* target roles — sits under the identity line and carries real weight.
   Hairline-ruled row, one accent tick per role. */
.roles {
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(16px, 2vw, 34px);
  margin-top: clamp(18px, 2.4vw, 32px);
  border-top: 1px solid var(--line-hi);
  padding-top: clamp(12px, 1.4vw, 18px);
}

.roles li {
  position: relative;
  padding-left: 13px;
  font-family: var(--mono);
  font-size: clamp(11.5px, 0.92vw, 14px);
  letter-spacing: 0.02em;
  line-height: 1.9;
  color: var(--fg);
  white-space: nowrap;
}

.roles li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.82em;
  width: 5px;
  height: 5px;
  background: var(--acc);
}

/* In the masthead bar the roles ARE the bar, so they carry no rule of their
   own and sit tight to the top of the page. */
.roles--bar {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
  gap: 0 clamp(14px, 1.8vw, 30px);
}
.roles--bar li {
  font-size: clamp(10.5px, 0.82vw, 12.5px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--fg-mid);
}
.roles--bar li::before { top: 0.62em; width: 4px; height: 4px; }

/* Availability chip — the roles' counterweight on the right of the bar, and
   the one genuinely highlighted element above the fold. */
.avail {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 13px;
  border: 1px solid var(--acc);
  background: rgba(201, 242, 77, 0.07);
  color: var(--acc);
  font-family: var(--mono);
  font-size: clamp(10.5px, 0.82vw, 12.5px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.roles--foot {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
  padding-bottom: clamp(14px, 2vw, 24px);
}

.portrait {
  padding: 0;
  overflow: hidden;
  min-height: 220px;
}

.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  filter: grayscale(1) contrast(1.06) brightness(0.72);
  transition: filter 500ms var(--ease);
}
.portrait:hover img { filter: grayscale(1) contrast(1.06) brightness(0.95); }

.linkstack {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: auto;
}

.linkstack a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--fg-mid);
  border-bottom: 1px solid var(--line);
  padding-bottom: 7px;
  transition: color 180ms var(--ease), border-color 180ms var(--ease);
}
.linkstack a:hover { color: var(--fg); border-bottom-color: var(--acc); }
.linkstack a span:last-child { color: var(--fg-mute); font-size: 10px; }
.linkstack a:hover span:last-child { color: var(--acc); }

/* Full addresses rather than labels. The email is the longest string in the
   tile, so the size steps down and the value is allowed to wrap instead of
   forcing the column wider. */
.linkstack--full a {
  align-items: flex-start;
  gap: 10px;
  font-size: clamp(10px, 0.74vw, 11.5px);
  letter-spacing: 0.01em;
  line-height: 1.45;
}
.linkstack--full a span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}
.linkstack--full a span:last-child { flex: none; }

/* --------------------------------------------------------------------------
   8. Section 03 — publication, and the research findings
   Paper-led: the published artefact is a single wide plate of its own. The two
   findings (.notes) now sit inside the IIT Patna role in section 02, hanging
   off margin labels. No boxes, no seams — the opposite scan pattern to the
   signature cards.
   -------------------------------------------------------------------------- */

/* shared large mono figure (research / projects / record) */
.fig {
  font-family: var(--mono);
  font-size: clamp(20px, 2.2vw, 32px);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--fg);
  white-space: nowrap;
}
.fig sub {
  font-size: 0.3em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
  vertical-align: baseline;
  bottom: 0;
  margin-left: 6px;
}

.paper {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  border: 1px solid var(--line);
}

.paper__frame {
  border-right: 1px solid var(--line);
  background: var(--bg-sunk);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.paper__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
  filter: grayscale(1) contrast(1.08) brightness(0.32);
  transition: filter 600ms var(--ease);
}
.paper:hover .paper__frame img { filter: grayscale(0.25) brightness(0.72); }

.paper__body {
  padding: clamp(20px, 3vw, 48px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(12px, 1.4vw, 20px);
}

.paper__title {
  font-size: clamp(19px, 2.3vw, 36px);
  font-weight: 300;
  letter-spacing: -0.032em;
  line-height: 1.14;
  max-width: 26ch;
}

.paper__cite {
  font-size: clamp(13px, 0.95vw, 15px);
  color: var(--fg-mid);
}
.paper__cite-em {
  font-family: var(--serif);
  font-style: italic;
}

/* the two findings as margin notes */
.notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(28px, 4vw, 60px);
  border-top: 1px solid var(--line-hi);
}

.note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 clamp(14px, 1.8vw, 30px);
  padding: clamp(20px, 2.6vw, 38px) 0;
}
.note + .note {
  border-left: 1px solid var(--line);
  padding-left: clamp(20px, 2.6vw, 44px);
  margin-left: clamp(20px, 2.6vw, 44px);
}

.note__tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--acc);
  line-height: 1.7;
}

.note__title {
  font-size: clamp(16px, 1.5vw, 23px);
  font-weight: 300;
  letter-spacing: -0.028em;
  line-height: 1.2;
  margin-bottom: 10px;
}

.note__lede {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(13.5px, 1vw, 16px);
  line-height: 1.5;
  color: var(--fg-mid);
  max-width: 46ch;
  margin-bottom: clamp(14px, 1.8vw, 24px);
}

.note__foot {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 14px;
}

/* --------------------------------------------------------------------------
   8a. Section 01 — signatures tail
   The six patterns are cards now (§ 8d). What survives here is the tail: the
   loose index of everything else in the record.
   -------------------------------------------------------------------------- */
.sigs__tail {
  display: grid;
  grid-template-columns: clamp(88px, 11vw, 190px) minmax(0, 1fr);
  gap: 0 clamp(16px, 2vw, 40px);
  align-items: baseline;
  padding: clamp(14px, 1.8vw, 24px) 0;
  border-bottom: 1px solid var(--line);
}

/* --------------------------------------------------------------------------
   8b. Inline code + the spec sheet
   The spec sheet is the shared detail primitive: label/value definition rows
   used inside every expanded tree node.
   -------------------------------------------------------------------------- */
.code {
  font-family: var(--mono);
  font-size: 0.9em;
  color: var(--fg-mid);
}

/* spec sheet */
.spec { display: flex; flex-direction: column; }

.spec__row {
  display: grid;
  grid-template-columns: clamp(74px, 7vw, 106px) minmax(0, 1fr);
  gap: 0 clamp(12px, 1.4vw, 22px);
  align-items: baseline;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}
.spec__row:last-child { border-bottom: 1px solid var(--line); }
.spec__row:first-child { border-top: 0; padding-top: 0; }

.spec dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--fg-mid);
}

/* --------------------------------------------------------------------------
   8c. The disclosure tree
   The site's progressive-disclosure primitive. Now used by one section only:
   the Kookar tree of twelve systems inside 02 — Experience.
   Collapsed it is a filesystem listing: one hairline-connected row per node,
   a mono path on the left and the single fact worth seeing on the right.
   Expanded it releases the prose and the spec sheet.

   Native <details>/<summary> does the work — it opens, it is focusable, it is
   announced, and it degrades to plain open sections with scripting off. JS
   only adds expand-all and deep-linking, both non-essential.

   Connectors are hairlines, not glyphs: the tree branch is drawn with the same
   1px rule that draws every other structure on this site, so a filesystem
   listing and a tetromino seam are visibly the same material.
   -------------------------------------------------------------------------- */
.tree {
  --tree-ind: 26px;   /* indent per level */
  --tree-mid: 22px;   /* where a row's connector meets it — half the 44px row */
}

/* the header rail: root path, hint, and the expand/collapse pair */
.tree__bar {
  display: flex;
  align-items: center;
  gap: 10px clamp(14px, 2vw, 28px);
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-hi);
}

.tree__root {
  font-family: var(--mono);
  font-size: clamp(13px, 1.05vw, 16px);
  letter-spacing: 0.02em;
  color: var(--fg);
}

.tree__hint { color: var(--fg-mute); }

.tree__ctl {
  margin-left: auto;
  display: flex;
}

/* the control only exists when scripting can honour it */
html:not(.js) .tree__ctl { display: none; }

.tree__ctl button {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-mute);
  padding: 0 clamp(10px, 1.2vw, 15px);
  min-height: 34px;
  border: 1px solid var(--line);
  cursor: pointer;
  white-space: nowrap;
  transition: color 180ms var(--ease), border-color 180ms var(--ease);
}
.tree__ctl button + button { border-left: 0; }
.tree__ctl button:hover { color: var(--fg); border-color: var(--line-hi); }
.tree__ctl button[aria-pressed="true"] { color: var(--acc); }

/* ---- branches ---- */
.tree__list { list-style: none; margin: 0; padding: 0; }

.tree__item {
  position: relative;
  padding-left: var(--tree-ind);
}

/* │ — the spine, running the full height of the node incl. its open body */
.tree__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
}
/* └ — the last child stops its spine at the elbow */
.tree__item:last-child::before {
  bottom: auto;
  height: var(--tree-mid);
}

/* ─ — the branch into the row */
.tree__item::after {
  content: "";
  position: absolute;
  left: 0;
  top: var(--tree-mid);
  width: calc(var(--tree-ind) - 9px);
  height: 1px;
  background: var(--line);
  transition: background-color 220ms var(--ease);
}

/* an open node lights its own branch — the accent, used as state, not colour */
.tree__item:has(> .node[open])::after { background: var(--acc); }

/* ---- the node ---- */
.node { position: relative; }

.node__sum {
  display: flex;
  align-items: center;
  gap: 6px clamp(10px, 1.2vw, 18px);
  min-height: 44px;
  padding: 8px 0;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
  list-style: none;
  transition: border-color 220ms var(--ease);
}
.node__sum::-webkit-details-marker { display: none; }
.node__sum::marker { content: ""; }
.node__sum:hover { border-bottom-color: var(--line-hi); }
.node[open] > .node__sum { border-bottom-color: var(--line-hi); }

/* the ring sits just outside the row, so it never covers the state tick */
.node__sum:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}

/* state indicator */
.node__tick {
  flex: 0 0 11px;
  width: 11px;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1;
  color: var(--fg-mute);
  transition: transform 240ms var(--ease), color 240ms var(--ease);
}
.node__tick::before { content: "\25B8"; }   /* ▸ */
.node__sum:hover .node__tick { color: var(--fg); }
.node[open] > .node__sum .node__tick {
  color: var(--acc);
  transform: rotate(90deg);
}

.node__idx {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--acc);
  line-height: 1;
}

.node__name {
  min-width: 0;                 /* the row now lives in a narrower column: let
                                   the path and the fact shrink and wrap rather
                                   than push the row past its container */
  font-family: var(--mono);
  font-size: clamp(12px, 0.95vw, 14px);
  letter-spacing: 0.01em;
  color: var(--fg);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* patterns are sentences, not paths — they get the sans face */
.node__name--prose {
  font-family: var(--sans);
  font-size: clamp(13.5px, 1.08vw, 17px);
  font-weight: 300;
  letter-spacing: -0.022em;
}

/* the ledger's project names keep their typographic weight */
.node__name--big {
  font-family: var(--sans);
  font-size: clamp(17px, 1.7vw, 26px);
  font-weight: 300;
  letter-spacing: -0.034em;
}

.node__fact {
  margin-left: auto;
  min-width: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--fg-mute);
  text-align: right;
  line-height: 1.4;
}
.node__fact b { color: var(--fg); font-weight: 400; }

/* group rows read one step louder than their children */
.node--group > .node__sum { border-bottom-color: var(--line-hi); }
.node--group > .node__sum .node__name {
  font-size: clamp(13px, 1.05vw, 16px);
  color: var(--fg);
}

/* ---- the disclosed body ---- */
.node__in {
  position: relative;
  overflow: hidden;                       /* contains the ghost numeral */
  padding: clamp(14px, 1.6vw, 22px) 0 clamp(18px, 2.2vw, 30px) clamp(12px, 1.4vw, 20px);
}
/* a nested list needs no padding of its own — its items carry the indent */
.node__in > .tree__list { padding-left: 0; }
.node--group > .node__in { padding-bottom: 0; }

.node__body {
  color: var(--fg-mute);
  font-size: clamp(13px, 0.88vw, 15px);
  line-height: 1.62;
  max-width: 68ch;
  text-wrap: pretty;
}

.node__meta { margin-top: clamp(14px, 1.8vw, 22px); }
.node__meta.spec { max-width: 76ch; }

/* the ghost numeral survives the restructure — it now sits behind the
   disclosed argument rather than behind a grid cell */
.node__ghost {
  position: absolute;
  right: 0;
  top: 0;
  font-family: var(--mono);
  font-size: clamp(52px, 6vw, 96px);
  line-height: 1;
  letter-spacing: -0.06em;
  color: var(--line);
  pointer-events: none;
}

/* height animation, where the browser can interpolate to auto. Purely
   decorative: without support the node simply snaps open. */
@supports selector(details::details-content) {
  .node::details-content {
    block-size: 0;
    overflow: hidden;
    transition:
      block-size 300ms var(--ease),
      content-visibility 300ms allow-discrete;
  }
  .node[open]::details-content { block-size: auto; }
}

/* --------------------------------------------------------------------------
   8d. Section 01 — engineering signatures, as cards
   This section now leads the page, so nothing is hidden: six discrete cells on
   the shared-seam grid, each one an assertion plus the evidence in a line. The
   ghost numeral moves from behind the disclosed argument to behind the card.
   -------------------------------------------------------------------------- */
.sigs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.sig {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.2vw, 16px);
  min-height: clamp(158px, 15vw, 216px);
  padding: clamp(18px, 2.1vw, 32px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  transition: background-color 300ms var(--ease);
}
.sig:hover { background: var(--bg-lift); }

/* an accent tick on the top edge that runs out on hover */
.sig::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 2px;
  width: 20px;
  background: var(--acc);
  opacity: 0.45;
  transition: width 340ms var(--ease), opacity 340ms var(--ease);
}
.sig:hover::before { width: 66px; opacity: 1; }

.sig__idx {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--acc);
  line-height: 1;
}

.sig__name {
  position: relative;
  font-size: clamp(16.5px, 1.5vw, 24px);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.14;
  max-width: 19ch;
  text-wrap: balance;
}

.sig__fact {
  position: relative;
  margin-top: auto;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: var(--fg-mute);
  max-width: 33ch;
}
.sig__fact b { color: var(--fg); font-weight: 400; }

.sig__ghost {
  position: absolute;
  right: -4px;
  bottom: -22px;
  font-family: var(--mono);
  font-size: clamp(58px, 6vw, 104px);
  line-height: 1;
  letter-spacing: -0.06em;
  color: var(--line);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   8e. Section 02 — experience
   Both employments live in one band, and the band is the only surface on the
   page raised off the canvas: a step up in near-black, closed top and bottom
   by a double hairline set in from the edge. No hue, no shadow — just a
   different surface value, so it reads as a deliberate container.
   -------------------------------------------------------------------------- */
.section--xp {
  position: relative;
  background: var(--bg-raise);
  border-top: 1px solid var(--line-hi);
  border-bottom: 1px solid var(--line-hi);
  margin-top: clamp(38px, 4.6vw, 84px);
  padding-top: clamp(44px, 5.4vw, 86px);
  padding-bottom: clamp(44px, 5.4vw, 86px);
}

/* the inset rules — the band states its own edges twice */
.section--xp::before,
.section--xp::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line);
}
.section--xp::before { top: 5px; }
.section--xp::after { bottom: 5px; }

.xp { display: flex; flex-direction: column; }

/* two employers, delimited by a rule one step brighter than anything inside */
.xp__role {
  display: grid;
  grid-template-columns: clamp(112px, 12vw, 200px) minmax(0, 1fr);
  gap: 0 clamp(18px, 2.4vw, 48px);
  padding: clamp(26px, 3.2vw, 52px) 0;
  border-top: 1px solid var(--line-hi);
}
.xp__role:first-child { border-top: 0; padding-top: clamp(6px, 1vw, 14px); }

.xp__rail {
  position: sticky;
  top: 74px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.xp__when {
  font-family: var(--mono);
  font-size: clamp(11px, 0.95vw, 13px);
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: var(--fg-mid);
}

.xp__title {
  font-family: var(--mono);
  font-size: clamp(10.5px, 0.9vw, 12px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: 10px;
}

.xp__org {
  font-size: clamp(26px, 3.4vw, 58px);
  font-weight: 300;
  letter-spacing: -0.045em;
  line-height: 0.98;
}

.xp__lede {
  color: var(--fg-mute);
  font-size: clamp(13px, 0.95vw, 15.5px);
  line-height: 1.55;
  max-width: 62ch;
  margin-top: clamp(12px, 1.4vw, 18px);
  text-wrap: pretty;
}

.xp__figs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px clamp(20px, 2.6vw, 46px);
  margin-top: clamp(16px, 2vw, 26px);
  padding-bottom: clamp(16px, 2vw, 26px);
  border-bottom: 1px solid var(--line-hi);
}
.xp__figs li { display: flex; flex-direction: column; gap: 7px; }

.xp__tree { margin-top: clamp(20px, 2.4vw, 34px); }

.notes--xp { margin-top: clamp(18px, 2.2vw, 32px); }

.xp__xref { display: block; margin-top: clamp(16px, 2vw, 26px); }

/* --------------------------------------------------------------------------
   8e. Section 00 — building now
   Two side projects, simple vertical stack. No grid, no tiles — just cards.
   -------------------------------------------------------------------------- */
.now {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vw, 56px);
}

.now .proj {
  border: 1px solid var(--line);
  padding: clamp(20px, 2.6vw, 40px);
  background: var(--bg);
  transition: background-color 300ms var(--ease), border-color 300ms var(--ease);
}
.now .proj:hover {
  background: var(--bg-lift);
  border-color: var(--line-hi);
}

.now .proj__head { margin-bottom: clamp(10px, 1.2vw, 16px); }
.now .proj__title {
  font-size: clamp(24px, 3.2vw, 42px);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.now .proj__body { margin-top: clamp(10px, 1.2vw, 16px); }
.now .proj__foot {
  margin-top: clamp(16px, 2vw, 24px);
  padding-top: clamp(12px, 1.5vw, 20px);
  border-top: 1px solid var(--line);
  justify-content: flex-end;
}

/* --------------------------------------------------------------------------
   8f. Section 04 — built
   Three projects, three layouts. A research report, a deployed product and a
   benchmark sheet are not the same object, so they are not the same template.
   What holds them together is the family: accent index, mono kind-label, and
   the identical stack/source footer rule under every one.
   -------------------------------------------------------------------------- */
.built {
  display: flex;
  flex-direction: column;
  gap: clamp(38px, 5vw, 84px);
}

.proj__idx {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--acc);
  line-height: 1;
}

.proj__body {
  color: var(--fg-mute);
  font-size: clamp(13px, 0.88vw, 15px);
  line-height: 1.62;
  max-width: 68ch;
  text-wrap: pretty;
}

/* the shared footer — the one row all three share, so they stay one family */
.proj__foot {
  display: grid;
  grid-template-columns: clamp(68px, 6vw, 90px) minmax(0, 1fr) auto;
  gap: 6px clamp(14px, 1.8vw, 30px);
  align-items: baseline;
  margin-top: clamp(16px, 2vw, 28px);
  padding-top: clamp(11px, 1.3vw, 16px);
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-mid);
}
.proj__foot .label { color: var(--fg-mute); }

/* ---- 01 · research: a lab report. Prose left, results table hard right ---- */
.proj--research {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(180px, 21vw, 300px);
  gap: 0 clamp(24px, 3.2vw, 64px);
  border-top: 1px solid var(--line-hi);
  padding-top: clamp(16px, 1.9vw, 26px);
}

.proj__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px clamp(12px, 1.4vw, 20px);
  margin-bottom: clamp(8px, 1vw, 14px);
}

.proj__title--research {
  font-size: clamp(30px, 4.2vw, 68px);
  font-weight: 300;
  letter-spacing: -0.05em;
  line-height: 0.96;
}

.proj__abstract {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(15px, 1.35vw, 22px);
  line-height: 1.4;
  color: var(--fg-mid);
  max-width: 40ch;
  margin: clamp(10px, 1.2vw, 16px) 0 clamp(14px, 1.7vw, 24px);
}

/* the results table — figures stacked, right column, reads as a findings sheet */
.metrics { border-top: 1px solid var(--line-hi); }

.metric {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(10px, 1.3vw, 17px) 0;
  border-bottom: 1px solid var(--line);
}
.metric dd { margin: 0; }

.proj--research > .proj__foot { grid-column: 1 / -1; }

/* ---- 02 · product: the only boxed entry. Banner, impact cells, pipeline ---- */
.proj--product { border: 1px solid var(--line); }

.proj__banner {
  display: flex;
  flex-direction: column;
  gap: clamp(9px, 1.1vw, 14px);
  padding: clamp(20px, 2.6vw, 44px);
  border-bottom: 1px solid var(--line);
}

.proj__title--product {
  font-size: clamp(34px, 5.6vw, 96px);
  font-weight: 300;
  letter-spacing: -0.052em;
  line-height: 0.9;
}

.proj__banner-sub {
  font-family: var(--mono);
  font-size: clamp(11px, 0.95vw, 13px);
  letter-spacing: 0.04em;
  color: var(--fg-mute);
}

.impact {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
}
.impact li {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(16px, 2vw, 30px);
  border-right: 1px solid var(--line);
}
.impact li:last-child { border-right: 0; }

.proj__prose { padding: clamp(20px, 2.6vw, 44px); }
.proj__prose .proj__foot { margin-top: clamp(16px, 2vw, 26px); }

/* the deploy path, drawn as a chain rather than listed as a stack */
.pipe {
  display: grid;
  grid-template-columns: clamp(64px, 7vw, 110px) minmax(0, 1fr);
  gap: 8px clamp(14px, 1.8vw, 28px);
  align-items: center;
  padding: clamp(14px, 1.8vw, 26px) clamp(20px, 2.6vw, 44px);
  border-top: 1px solid var(--line);
}

.pipe__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px 0;
}
.pipe__row li {
  position: relative;
  margin-right: 24px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--fg-mid);
  white-space: nowrap;
  transition: color 200ms var(--ease), border-color 200ms var(--ease);
}
.pipe__row li:hover { color: var(--fg); border-color: var(--line-hi); }
.pipe__row li::after {
  content: "→";
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  text-align: center;
  color: var(--line-hi);
}
.pipe__row li:last-child { margin-right: 0; }
.pipe__row li:last-child::after { content: none; }

/* ---- 03 · benchmark: a sunk results sheet. Mono-dominant, no large type ---- */
.proj--bench {
  background: var(--bg-sunk);
  border-top: 1px solid var(--line-hi);
  border-bottom: 1px solid var(--line);
  padding: clamp(18px, 2.2vw, 34px) clamp(16px, 2vw, 32px);
}

.proj__title--bench {
  font-family: var(--mono);
  font-size: clamp(13.5px, 1.3vw, 20px);
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.3;
  color: var(--fg);
}

.bench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(18px, 2.2vw, 34px) clamp(24px, 3vw, 58px);
  align-items: start;
  margin-top: clamp(14px, 1.7vw, 24px);
}

.bench__figs {
  display: flex;
  flex-wrap: wrap;
  gap: 14px clamp(20px, 2.6vw, 44px);
  margin-top: clamp(16px, 2vw, 26px);
}
.bench__figs li { display: flex; flex-direction: column; gap: 7px; }

.sheet { border-top: 1px solid var(--line-hi); }

.sheet__row {
  display: grid;
  grid-template-columns: clamp(74px, 7.5vw, 112px) minmax(0, 1fr);
  gap: 0 clamp(12px, 1.4vw, 22px);
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.sheet dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--fg-mid);
}

/* --------------------------------------------------------------------------
   9. Stack lists
   -------------------------------------------------------------------------- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.01em;
  color: var(--fg-mid);
  line-height: 1.6;
}

.chips li { white-space: nowrap; }

.chips li:not(:last-child)::after {
  content: "·";
  color: var(--line-hi);
  padding: 0 9px;
}

/* section 05 — manifest: tight label/value rows, no large type at all */
.manifest { border-top: 1px solid var(--line-hi); }

.manifest__row {
  display: grid;
  grid-template-columns: clamp(88px, 11vw, 190px) minmax(0, 1fr);
  gap: 0 clamp(16px, 2vw, 40px);
  align-items: baseline;
  padding: clamp(12px, 1.5vw, 20px) 0;
  border-bottom: 1px solid var(--line);
  transition: color 220ms var(--ease);
}
.manifest__row dd { margin: 0; }
.manifest__row:hover .chips { color: var(--fg); }
.manifest__row:hover dt { color: var(--fg-mid); }

/* --------------------------------------------------------------------------
   10. Record — chronology
   Date rail left, statement centre, one headline figure flush right.
   Reads as an accounts sheet rather than a grid of cards.
   -------------------------------------------------------------------------- */
.record { border-top: 1px solid var(--line-hi); }

.rec {
  display: grid;
  grid-template-columns: clamp(84px, 9vw, 150px) minmax(0, 1fr) auto;
  gap: 0 clamp(18px, 2.4vw, 44px);
  align-items: start;
  padding: clamp(22px, 2.8vw, 44px) 0;
  border-bottom: 1px solid var(--line);
}

.rec__when {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
  line-height: 1.6;
}

.rec__title {
  font-size: clamp(16px, 1.5vw, 24px);
  font-weight: 300;
  letter-spacing: -0.028em;
  line-height: 1.2;
}

.rec__body {
  color: var(--fg-mute);
  font-size: clamp(13px, 0.88vw, 14.5px);
  margin: 8px 0 12px;
  max-width: 58ch;
}

.rec__fig { text-align: right; }

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-mute);
}
.facts b {
  color: var(--fg);
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */
.foot {
  margin-top: clamp(60px, 8vw, 120px);
  border-top: 1px solid var(--line);
}

.foot__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: clamp(34px, 5vw, 72px) 0 clamp(16px, 2vw, 26px);
}
.foot__status-k { color: var(--fg-mid); }

/* the dispatch directory — every channel is a full-width addressable row.
   No cells, no seams: a left key, a large value, a right destination that
   goes accent and steps away from the edge on hover. */
.dispatch { border-top: 1px solid var(--line-hi); }

.dispatch__row {
  display: grid;
  grid-template-columns: clamp(72px, 8vw, 140px) minmax(0, 1fr) auto;
  gap: 0 clamp(14px, 2vw, 36px);
  align-items: baseline;
  padding: clamp(15px, 1.9vw, 28px) 0;
  border-bottom: 1px solid var(--line);
  transition: border-color 220ms var(--ease);
}
.dispatch__row:hover { border-bottom-color: var(--line-hi); }

.dispatch__k {
  color: var(--fg-mute);
  transition: color 220ms var(--ease);
}
.dispatch__row:hover .dispatch__k { color: var(--acc); }

.dispatch__v {
  font-size: clamp(17px, 2.3vw, 38px);
  font-weight: 300;
  letter-spacing: -0.038em;
  line-height: 1.05;
  color: var(--fg-mid);
  overflow-wrap: anywhere;
  transition: color 220ms var(--ease), transform 320ms var(--ease);
}
.dispatch__row:hover .dispatch__v {
  color: var(--fg);
  transform: translateX(clamp(4px, 0.6vw, 10px));
}

.dispatch__row--strong .dispatch__v {
  font-family: var(--serif);
  font-style: italic;
}

.dispatch__go {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-mute);
  white-space: nowrap;
  transition: color 220ms var(--ease);
}
.dispatch__row:hover .dispatch__go { color: var(--acc); }

/* sign-off — the full name, the largest thing on the page's last screen */
.signoff { padding: clamp(46px, 7vw, 112px) 0 clamp(22px, 2.6vw, 40px); }

.signoff__name {
  font-size: clamp(34px, 9.6vw, 158px);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: var(--fg);
}
.signoff__name em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  letter-spacing: -0.035em;
}

.signoff__meta { margin-top: clamp(16px, 2vw, 28px); }

/* The vlog's only entry point — a small hairline button sitting under the
   name, deliberately quiet so it doesn't compete with the work above it. */
.signoff__vlog {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  margin-top: clamp(18px, 2.2vw, 30px);
  padding: 12px 18px;
  min-height: 44px;
  border: 1px solid var(--line-hi);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg);
  text-decoration: none;
  transition: border-color 0.22s ease, color 0.22s ease, background-color 0.22s ease;
}
.signoff__vlog .dot { align-self: center; }
.signoff__vlog-sub {
  color: var(--fg-mute);
  letter-spacing: 0.08em;
  text-transform: none;
}
.signoff__vlog:hover,
.signoff__vlog:focus-visible {
  border-color: var(--acc);
  color: var(--acc);
  background: rgba(201, 242, 77, 0.05);
}
.signoff__vlog:hover .signoff__vlog-sub,
.signoff__vlog:focus-visible .signoff__vlog-sub { color: var(--fg-mid); }

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

.foot__bar {
  border-top: 1px solid var(--line);
  padding: 16px 0 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  align-items: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.foot__bar-end { margin-left: auto; }

/* --------------------------------------------------------------------------
   12. Vlog — timeline
   Distinct treatment: a single vertical hairline spine with day markers
   sitting on it, entries hanging to the right. Not the work grid.
   -------------------------------------------------------------------------- */
.vlog-head { padding-top: clamp(40px, 6vw, 92px); }

.vlog-head__title {
  font-size: clamp(34px, 6.4vw, 92px);
  font-weight: 300;
  letter-spacing: -0.045em;
  line-height: 0.95;
  margin-bottom: 14px;
}
.vlog-head__title em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
}

.vlog-head__sub {
  color: var(--fg-mute);
  font-size: clamp(13px, 1vw, 15px);
  max-width: 48ch;
  margin-bottom: clamp(24px, 4vw, 48px);
}

.counter {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.counter div {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--pad);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 96px;
}
.counter__n {
  font-family: var(--mono);
  font-size: clamp(22px, 2.4vw, 34px);
  letter-spacing: -0.04em;
  line-height: 1;
}
.counter__k {
  margin-top: auto;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

.timeline {
  --tl-pad: clamp(56px, 8vw, 132px);
  position: relative;
  margin-top: clamp(30px, 5vw, 64px);
  padding-left: var(--tl-pad);
  border-top: 1px solid var(--line);
}

/* the spine */
.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--tl-pad) - 1px);
  width: 1px;
  background: var(--line);
}

.entry {
  position: relative;
  padding: clamp(26px, 3.4vw, 46px) 0 clamp(26px, 3.4vw, 46px) clamp(20px, 3vw, 44px);
  border-bottom: 1px solid var(--line);
}

/* day marker sitting on the spine */
.entry__day {
  position: absolute;
  left: calc(-1 * var(--tl-pad));
  top: clamp(26px, 3.4vw, 46px);
  width: calc(var(--tl-pad) - 18px);
  text-align: right;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-mute);
  line-height: 1.6;
}
.entry__day b {
  display: block;
  font-size: clamp(18px, 1.8vw, 26px);
  letter-spacing: -0.04em;
  color: var(--fg);
  font-weight: 400;
  line-height: 1;
  margin-bottom: 6px;
}

/* the node on the spine */
.entry::before {
  content: "";
  position: absolute;
  left: -3px;
  top: calc(clamp(26px, 3.4vw, 46px) + 5px);
  width: 7px;
  height: 7px;
  background: var(--bg);
  border: 1px solid var(--line-hi);
  transition: background-color 220ms var(--ease), border-color 220ms var(--ease);
}
.entry:hover::before { background: var(--acc); border-color: var(--acc); }

/* The entry is now a date and its text, so the text carries the entry —
   set at reading size rather than as a muted caption under a headline. */
.entry__body {
  color: var(--fg-mid);
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.62;
  letter-spacing: -0.006em;
  max-width: 68ch;
}
.entry__body p + p { margin-top: 0.85em; }

/* The log is written as bullets more often than prose. Marker is a hairline
   dash rather than a disc, to match the rest of the page. */
.entry__list { list-style: none; }
.entry__list li {
  position: relative;
  padding-left: 22px;
}
.entry__list li + li { margin-top: 0.5em; }
.entry__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 10px;
  height: 1px;
  background: var(--line-hi);
}
.entry__body > * + .entry__list,
.entry__list + * { margin-top: 0.85em; }

.empty {
  padding: clamp(40px, 6vw, 80px) 0;
  border-bottom: 1px solid var(--line);
}
.empty p {
  color: var(--fg-mute);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
}
/* -- Sort toggle ---------------------------------------------------------- */
.sortby {
  display: inline-flex;
  border: 1px solid var(--line-hi);
}
.sortby button {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
  background: none;
  border: 0;
  padding: 9px 14px;
  min-height: 34px;
  cursor: pointer;
  transition: color 180ms var(--ease), background-color 180ms var(--ease);
}
.sortby button + button { border-left: 1px solid var(--line-hi); }
.sortby button:hover { color: var(--fg); }
.sortby button[aria-pressed="true"] {
  color: var(--acc);
  background: rgba(201, 242, 77, 0.07);
}

/* -- Pager ---------------------------------------------------------------- */
.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: clamp(22px, 3vw, 40px) 0 0;
}
.pager button {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--fg-mute);
  background: none;
  border: 1px solid var(--line);
  min-width: 38px;
  min-height: 38px;
  padding: 0 10px;
  cursor: pointer;
  transition: color 180ms var(--ease), border-color 180ms var(--ease);
}
.pager button:hover:not(:disabled) { color: var(--fg); border-color: var(--line-hi); }
.pager button:disabled { opacity: 0.32; cursor: default; }
.pager button.is-current {
  color: var(--acc);
  border-color: var(--acc);
  background: rgba(201, 242, 77, 0.07);
}
.pager__count {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
@media (max-width: 560px) {
  .pager__count { margin-left: 0; width: 100%; }
}

/* Failure detail — visible, so a broken build says so instead of looking
   like a log with nothing in it. */
.empty__detail {
  margin-top: 10px;
  font-size: 10.5px;
  color: var(--fg-mute);
  opacity: 0.75;
  max-width: 70ch;
}

/* --------------------------------------------------------------------------
   12b. The wheel — radial jog-navigator
   Fixed to the bottom-right corner. Collapsed it is a single hairline dial;
   pressed, the items fan out along a quarter-arc around the pivot and track
   the pointer without it ever being lifted. This is the one component allowed
   a neon treatment, and it is contained entirely inside .wheel.
   Built by assets/main.js, so it only exists when scripting does.
   -------------------------------------------------------------------------- */
.wheel {
  --wheel-r: 210px;          /* arc radius, set by JS per viewport */
  --wheel-size: 50px;        /* handle diameter */
  --wheel-neon: #e4ff86;     /* the accent, pushed brighter — active item only */
  position: fixed;
  right: clamp(14px, 2vw, 30px);
  bottom: clamp(14px, 2vw, 30px);
  z-index: 70;
  width: var(--wheel-size);
  height: var(--wheel-size);
  font-family: var(--mono);
}

/* the pivot: everything radial is positioned from the handle's centre */
.wheel__pivot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
}

/* the arc track, drawn only while open */
.wheel__arc {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--wheel-r) * 2);
  height: calc(var(--wheel-r) * 2);
  transform: translate(-50%, -50%);
  overflow: visible;
  pointer-events: none;
  opacity: 0;
  transition: opacity 260ms var(--ease);
}
.wheel__arc path {
  fill: none;
  stroke: var(--line-hi);
  stroke-width: 1;
}
.wheel.is-open .wheel__arc { opacity: 1; }

/* handle */
.wheel__handle {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: var(--wheel-size);
  height: var(--wheel-size);
  border: 1px solid var(--line-hi);
  border-radius: 50%;          /* a dial is round: the one radius on the site */
  background: rgba(8, 9, 10, 0.86);
  backdrop-filter: saturate(140%) blur(6px);
  color: var(--fg-mute);
  cursor: grab;
  touch-action: none;          /* pointer drag owns the gesture, not the scroller */
  transition:
    border-color 220ms var(--ease),
    color 220ms var(--ease),
    box-shadow 220ms var(--ease);
}
.wheel__handle:hover { color: var(--fg); border-color: var(--fg-mute); }
.wheel__handle:active { cursor: grabbing; }

.wheel.is-open .wheel__handle {
  color: var(--acc);
  border-color: var(--acc);
  box-shadow: 0 0 0 1px var(--acc-dim), 0 0 22px rgba(201, 242, 77, 0.28);
}

/* the notched dial face: a ring of ticks that rotates as the pointer sweeps */
.wheel__dial {
  display: block;
  width: 26px;
  height: 26px;
  transform: rotate(var(--wheel-rot, 0deg));
  transition: transform 320ms var(--ease);
}
.wheel__dial line { stroke: currentColor; stroke-width: 1.25; }
.wheel__dial circle { fill: none; stroke: currentColor; stroke-width: 1; opacity: 0.5; }

/* items */
.wheel__menu {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
}
.wheel:not(.is-open) .wheel__menu { visibility: hidden; }

.wheel__item {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  white-space: nowrap;
  padding: 7px 10px;
  border: 1px solid var(--line);
  background: rgba(8, 9, 10, 0.92);
  backdrop-filter: saturate(140%) blur(6px);
  color: var(--fg-mid);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  /* right edge of the chip sits on its arc point, so labels grow inward */
  transform: translate(calc(-100% + var(--x)), calc(-50% + var(--y))) scale(1);
  transform-origin: 100% 50%;
  opacity: 0;
  pointer-events: none;
  transition:
    transform 420ms var(--ease),
    opacity 200ms var(--ease),
    color 160ms var(--ease),
    border-color 160ms var(--ease),
    background-color 160ms var(--ease),
    box-shadow 160ms var(--ease);
  transition-delay: calc(var(--i, 0) * 26ms);
}

/* collapsed: every chip is folded back onto the pivot */
.wheel:not(.is-open) .wheel__item {
  transform: translate(-100%, -50%) scale(0.7);
  transition-delay: 0ms;
}

.wheel.is-open .wheel__item {
  opacity: 1;
  pointer-events: auto;
}

.wheel__item:hover { color: var(--fg); border-color: var(--line-hi); }

/* the section currently in view — quiet, not neon */
.wheel__item[aria-current="true"] { color: var(--fg); border-color: var(--fg-mute); }
.wheel__item[aria-current="true"]::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -1px;
  bottom: -1px;
  width: 2px;
  background: var(--fg-mute);
}

/* NEON — selection only, and only inside the wheel */
.wheel__item.is-active {
  color: var(--wheel-neon);
  border-color: var(--acc);
  background: rgba(201, 242, 77, 0.09);
  box-shadow: 0 0 0 1px var(--acc-dim), 0 0 20px rgba(201, 242, 77, 0.3);
  transform: translate(calc(-100% + var(--x)), calc(-50% + var(--y))) scale(1.06);
  transition-delay: 0ms;
}
.wheel__item.is-active::before { background: var(--acc); }

.wheel__handle:focus-visible,
.wheel__item:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 3px;
}

/* a small hint the first time, and the live readout of what's under the thumb */
.wheel__hint {
  position: absolute;
  right: calc(var(--wheel-size) + 12px);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-mute);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms var(--ease);
}
.wheel:not(.is-open) .wheel__handle:hover ~ .wheel__hint { opacity: 1; }

/* screen-reader-only live region */
.wheel__live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 720px) {
  .wheel { --wheel-size: 44px; }
  .wheel__item { padding: 6px 8px; font-size: 9px; letter-spacing: 0.12em; }
  .wheel__hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  /* it still opens — it just does not sweep */
  .wheel__item, .wheel__arc, .wheel__dial { transition: none !important; }
  .wheel:not(.is-open) .wheel__item { transform: translate(-100%, -50%); }
}

/* --------------------------------------------------------------------------
   13. Reveal motion
   -------------------------------------------------------------------------- */
/* Scoped to .js so that if scripting is unavailable — or blocked, as ES-module
   fetches are on file:// — every block stays visible instead of stuck at 0. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease);
  transition-delay: calc(var(--i, 0) * 45ms);
}

.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   14. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .tiles { grid-template-columns: repeat(6, 1fr); }
  .tile { grid-column: span 3; grid-row: auto; }
  .tile.m-full { grid-column: span 6; }
  .portrait { min-height: 260px; }

  .paper { grid-template-columns: 1fr; }
  .paper__frame {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    aspect-ratio: 16 / 9;
  }

  .notes { grid-template-columns: 1fr; }
  .note + .note {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-left: 0;
    margin-left: 0;
  }

  /* signature cards: three across becomes two */
  .sigs { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* research report and benchmark sheet both stack */
  .proj--research { grid-template-columns: 1fr; }
  .metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 clamp(16px, 2.4vw, 40px);
    margin-top: clamp(16px, 2vw, 26px);
  }
  .bench { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .tiles { grid-template-columns: repeat(6, 1fr); }
  .tile, .tile.m-full { grid-column: span 6; }
  .counter { grid-template-columns: 1fr; }

  .sigs__tail { grid-template-columns: 1fr; gap: 10px; }

  /* signature cards go single-file; the ghost numeral stops crowding the fact */
  .sigs { grid-template-columns: 1fr; }
  .sig { min-height: 0; gap: 12px; }
  .sig__ghost { font-size: 62px; bottom: -14px; }

  /* experience: the date rail moves above the employer instead of beside it */
  .xp__role { grid-template-columns: 1fr; gap: 14px; }
  .xp__rail {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 18px;
  }
  .xp__when { line-height: 1.4; }
  .xp__when br { display: none; }

  /* projects: every layout collapses to one column, identities kept */
  .metrics { grid-template-columns: 1fr; }
  .impact { grid-template-columns: 1fr; }
  .impact li { border-right: 0; border-bottom: 1px solid var(--line); }
  .impact li:last-child { border-bottom: 0; }
  .pipe { grid-template-columns: 1fr; }
  .proj__foot { grid-template-columns: 1fr; gap: 8px; }
  .sheet__row { grid-template-columns: 1fr; gap: 6px; }

  /* tree: the fact drops under the label rather than fighting it for width,
     the indent tightens, and the connector follows the first line up */
  .tree { --tree-ind: 18px; --tree-mid: 21px; }
  .node__sum { flex-wrap: wrap; padding: 11px 0; }
  .node__fact {
    margin-left: 0;
    flex: 1 0 100%;
    text-align: left;
    padding-left: 17px;
  }
  .node__ghost { font-size: 46px; opacity: 0.9; }
  .spec__row { grid-template-columns: 1fr; gap: 6px; }

  /* the controls become thumb-sized alongside the rows */
  .tree__ctl { margin-left: 0; }
  .tree__ctl button { min-height: 44px; padding: 0 14px; }

  /* scale strip stacks */
  .scale { grid-template-columns: 1fr; align-items: start; }

  /* manifest + chronology: stack label over value */
  .manifest__row { grid-template-columns: 1fr; gap: 10px; }
  .rec { grid-template-columns: 1fr; gap: 12px; }
  .rec__fig { text-align: left; }

  /* dispatch: key over value, destination tucked under */
  .dispatch__row {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px 14px;
  }
  .dispatch__k { grid-column: 1 / -1; }
  .dispatch__row:hover .dispatch__v { transform: none; }
  .nav__mark { font-size: 10px; }
  .nav__out span.nav__out-label { display: none; }
  .portrait { min-height: 300px; }

  /* timeline collapses: day marker moves inline above the entry */
  .timeline { --tl-pad: 22px; }
  .timeline::before { left: 0; }
  .entry { padding-left: 20px; }
  .entry__day {
    position: static;
    width: auto;
    text-align: left;
    padding-right: 0;
    margin-bottom: 12px;
    display: flex;
    align-items: baseline;
    gap: 10px;
  }
  .entry__day b { display: inline; margin-bottom: 0; }
  .entry::before { top: calc(clamp(26px, 3.4vw, 46px) + 4px); }
}

@media (max-width: 480px) {
  :root { --gut: 16px; --pad: 16px; }
  .nav__inner { gap: 8px; }
  .nav__tab { padding: 0 9px; letter-spacing: 0.12em; }
  .nav__out { padding-left: 9px; }
}

/* wide screens: let the type breathe rather than the measure explode */
@media (min-width: 1920px) {
  :root { --pad: 34px; }
}

/* --------------------------------------------------------------------------
   15. Reduced motion — everything off
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  .js [data-reveal] { opacity: 1; transform: none; }
  .section__head::after { transform: scaleX(1); }
  .dot--live { animation: none; }
}

/* --------------------------------------------------------------------------
   16. Print
   -------------------------------------------------------------------------- */
@media print {
  .nav, .foot__bar, .wheel { display: none; }
  body { background: #fff; color: #000; }
  .js [data-reveal] { opacity: 1; transform: none; }
}