/* ==========================================================================
   krisztian.wtf — v4 "drawing board"
   Technical drawing meets terminal. 1px rules, mono labels, crop marks,
   one loud element: the title block. Everything else is a ledger.
   Type scale is fixed: 12 / 14 / 16 / 20 / 28 / 40 / 56. Nothing between.
   ========================================================================== */

/* ---------- font: Geist Mono, variable, self-hosted ---------- */

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/geist-mono-vf.woff2) format("woff2-variations");
}

/* ---------- tokens ---------- */

:root {
  --paper: #f4f1ea;
  --board: #1c1c1e;
  --graphite: #1a1a1a;
  --chalk: #e8e4da;
  --accent: #7a3fff;
  --accent-ink: var(--accent);
  --accent-on: #ffffff;

  /* light is the default sheet */
  --bg: var(--paper);
  --fg: var(--graphite);
  --link: var(--fg);
  --link-line: color-mix(in srgb, var(--accent) 85%, transparent);
  --rule: color-mix(in srgb, var(--fg) 40%, transparent);
  --hair: color-mix(in srgb, var(--fg) 16%, transparent);
  --muted: color-mix(in srgb, var(--fg) 72%, transparent);
  --grid-line: color-mix(in srgb, var(--fg) 5%, transparent);
  --grid-col: color-mix(in srgb, var(--fg) 8%, transparent);
  --trail: color-mix(in srgb, var(--fg) 13%, transparent);
  --tint: color-mix(in srgb, var(--fg) 4%, transparent);
  --mark: color-mix(in srgb, var(--fg) 55%, transparent);

  /* the ruler */
  --pad: clamp(20px, 5vw, 48px);
  --measure: 720px;
  --sheet: 1360px;
  --gutter: 32px;
  --header-h: 56px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--board);
    --fg: var(--chalk);
    --accent: #ff4d00;
    --accent-ink: var(--accent);
    --accent-on: #131313;
    --link: var(--accent-ink);
    --link-line: color-mix(in srgb, var(--accent) 65%, transparent);
    --rule: color-mix(in srgb, var(--fg) 40%, transparent);
    --hair: color-mix(in srgb, var(--fg) 18%, transparent);
    --muted: color-mix(in srgb, var(--fg) 72%, transparent);
    --grid-line: color-mix(in srgb, var(--fg) 4%, transparent);
    --grid-col: color-mix(in srgb, var(--fg) 7%, transparent);
  --trail: color-mix(in srgb, var(--fg) 11%, transparent);
    --trail: color-mix(in srgb, var(--fg) 11%, transparent);
    --tint: color-mix(in srgb, var(--fg) 5%, transparent);
    --mark: color-mix(in srgb, var(--fg) 50%, transparent);
  }
}

:root[data-theme="dark"] {
  --bg: var(--board);
  --fg: var(--chalk);
  --accent: #ff4d00;
  --accent-ink: var(--accent);
  --accent-on: #131313;
  --link: var(--accent-ink);
  --link-line: color-mix(in srgb, var(--accent) 65%, transparent);
  --hair: color-mix(in srgb, var(--fg) 18%, transparent);
  --muted: color-mix(in srgb, var(--fg) 72%, transparent);
  --grid-line: color-mix(in srgb, var(--fg) 6%, transparent);
  --grid-col: color-mix(in srgb, var(--fg) 9%, transparent);
  --tint: color-mix(in srgb, var(--fg) 5%, transparent);
  --mark: color-mix(in srgb, var(--fg) 50%, transparent);
}

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

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

html {
  -webkit-text-size-adjust: 100%;
  /* anchor jumps travel instead of teleporting, and stop clear of the masthead */
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 16px/28px "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-ligatures: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: color-mix(in srgb, var(--accent) 42%, transparent);
  color: var(--fg);
}

/* body copy links wear the accent, with the underline at full strength */
a {
  color: var(--accent-ink);
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 140ms ease-out, text-underline-offset 140ms ease-out;
}

/* hovering a link in body copy inverts it into a solid block, square corners.
   The fill is padded wider than it is tall; the negative margins pay that back
   exactly, so the text never moves and nothing around it reflows. */
.prose a:hover,
.contact a:hover,
.cv-links a:hover,
.state-body a:hover,
.lede a:hover,
.case-what a:hover,
.case-link:hover,
.copy:hover {
  background-color: var(--accent-ink);
  color: var(--bg);
  text-decoration-color: transparent;
  margin: -0.2em -0.35em;
  padding: 0.2em 0.35em;
}

/* the case-study link already sits 24px off the spec table; keep that gap */
.case-link:hover { margin-top: calc(24px - 0.2em); }

/* and the chrome keeps its own hover, no fill */
.brand:hover,
.nav a:hover,
.toc a:hover,
.next a:hover,
.btn:hover {
  background: none;
}

a.rec:hover { background-color: var(--tint); }

:where(a, button, summary):focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 4px;
}

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

h1, h2, h3, p, ol, ul, figure, blockquote, dl, dd { margin: 0; }

strong { font-weight: 700; }

em { font-style: italic; }

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

/* ---------- shared bits ---------- */

.sheet {
  position: relative;
  width: 100%;
  max-width: var(--sheet);
  margin: 0 auto;
  padding-inline: var(--pad);
}

.col { max-width: var(--measure); }

.label {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.skip {
  position: absolute;
  left: 8px;
  top: -48px;
  z-index: 20;
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--rule);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fg);
}

.skip:focus { top: 8px; }

/* a hairline with its label sitting on the line */
.line {
  position: relative;
  border-top: 1px solid var(--rule);
  margin-bottom: 32px;
}

.line > span {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-50%);
  padding-right: 12px;
  background: var(--bg);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* corner crop marks on a container */
.crop {
  --c: var(--mark);
  --s: 10px;
  background-image:
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)),
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)),
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)),
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c));
  background-repeat: no-repeat;
  background-size:
    var(--s) 1px, 1px var(--s), var(--s) 1px, 1px var(--s),
    var(--s) 1px, 1px var(--s), var(--s) 1px, 1px var(--s);
  background-position:
    0 0, 0 0, 100% 0, 100% 0,
    0 100%, 0 100%, 100% 100%, 100% 100%;
}

/* dither strip — small accents only, never a background */
.dither {
  height: 24px;
  background-image:
    repeating-conic-gradient(var(--fg) 0% 25%, transparent 0% 50%);
  background-size: 4px 4px;
  opacity: 0.22;
}

.dither--accent {
  background-image: repeating-conic-gradient(var(--accent) 0% 25%, transparent 0% 50%);
  opacity: 0.65;
}

.ascii {
  font-size: 14px;
  line-height: 24px;
  color: var(--muted);
  overflow: hidden;
  white-space: nowrap;
  user-select: none;
}

/* ---------- header ---------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
}

.masthead .sheet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--header-h);
  flex-wrap: wrap;
  padding-block: 8px;
}

.brand {
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0.02em;
  color: var(--fg);
  text-decoration: none;
}

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

.brand-mark { color: var(--accent); }

.nav {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.nav a {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  padding-block: 4px;
}

.nav a:hover,
.nav a[aria-current="page"] { color: var(--fg); text-decoration: underline; text-decoration-color: var(--accent); }

.theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  color: var(--muted);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 140ms ease-out;
}

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

.theme svg { display: block; }

.theme .icon-moon { display: none; }

:root[data-theme="dark"] .theme .icon-sun { display: none; }

:root[data-theme="dark"] .theme .icon-moon { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme .icon-sun { display: none; }
  :root:not([data-theme="light"]) .theme .icon-moon { display: block; }
}

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

.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
}

/* the column guides: 12 columns, hero only */
/* the page grid, held still while the sheet scrolls: one trails per column */
.guides {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(min(100vw, var(--sheet)) - 2 * var(--pad));
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  pointer-events: none;
  z-index: -1;
}

.guides i {
  background-image: linear-gradient(
    to bottom,
    transparent,
    var(--trail) 12%,
    var(--trail) 88%,
    transparent
  );
  background-repeat: no-repeat;
  background-size: 1px var(--len, 40vh);
  background-position: 0 var(--top, 20vh);
}

.guides i:nth-child(1) { --len: 34vh; --top: 8vh; }
.guides i:nth-child(2) { --len: 72vh; --top: 0vh; }
.guides i:nth-child(3) { --len: 22vh; --top: 46vh; }
.guides i:nth-child(4) { --len: 58vh; --top: 22vh; }
.guides i:nth-child(5) { --len: 40vh; --top: 62vh; }
.guides i:nth-child(6) { --len: 86vh; --top: 4vh; }
.guides i:nth-child(7) { --len: 28vh; --top: 34vh; }
.guides i:nth-child(8) { --len: 64vh; --top: 12vh; }
.guides i:nth-child(9) { --len: 18vh; --top: 70vh; }
.guides i:nth-child(10) { --len: 50vh; --top: 40vh; }
.guides i:nth-child(11) { --len: 78vh; --top: 0vh; }
.guides i:nth-child(12) { --len: 30vh; --top: 54vh; }

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding-block: 64px 40px;
}

.hero-main { display: flex; flex-direction: column; min-width: 0; }

.annot {
  display: block;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 24px;
}

.annot::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  margin-right: 8px;
  vertical-align: middle;
  background: var(--mark);
}

.hero h1 {
  font-size: 40px;
  line-height: 44px;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.hero h1 em { color: var(--accent); }

.lede {
  margin-top: 24px;
  font-size: 20px;
  line-height: 32px;
  max-width: 44ch;
}

.lede + .lede { margin-top: 16px; font-size: 16px; line-height: 28px; max-width: 62ch; }

/* the measured column */
.dim {
  position: relative;
  margin-top: 40px;
  height: 24px;
  max-width: var(--measure);
  border-top: 1px solid var(--rule);
}

.dim::before,
.dim::after {
  content: "";
  position: absolute;
  top: -4px;
  width: 1px;
  height: 9px;
  background: var(--mark);
}

.dim::before { left: 0; }
.dim::after { right: 0; }

.dim span {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding-inline: 8px;
  background: var(--bg);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.status {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 24px;
  max-width: var(--measure);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

/* a case head that carries a plate beside its text, with room under it for the rail */

.hero-split { display: grid; gap: 24px; }

.case-head:has(.hero-split) { padding-bottom: 64px; }

@media (min-width: 900px) {
  .hero-split {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: start;
    margin-top: 8px;
  }
  .hero-split-text { grid-column: 1 / span 8; }
  .hero-split .deck { max-width: 58ch; }
  .hero-split .plate { grid-column: 9 / -1; }
}

/* ---------- the portrait plate ---------- */

.plate { max-width: none; }

.frame {
  position: relative;
  border: 1px solid var(--rule);
  background: var(--bg);
  padding: 8px;
}

/* registration mark: a 1px plus on the plate's corner, breaking the border */
.frame::before {
  content: "";
  position: absolute;
  top: -9px;
  left: -9px;
  width: 17px;
  height: 17px;
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--mark), var(--mark)),
    linear-gradient(var(--mark), var(--mark));
  background-repeat: no-repeat;
  background-size: 11px 1px, 1px 11px;
  /* integer offsets only: arms cross on the border's own pixel row and column, equal gaps */
  background-position: 3px 8px, 8px 3px;
}

.plate img { display: block; width: 100%; }

.plate-cap {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- actions ---------- */

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

.btn {
  display: inline-block;
  padding: 8px 12px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-on);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 140ms ease-out, border-color 140ms ease-out, color 140ms ease-out;
}

.btn:hover {
  background: none;
  border-color: var(--accent);
  color: var(--accent-ink);
  text-decoration: none;
}

.btn--ghost { background: none; border-color: var(--rule); color: var(--fg); }

.btn--ghost:hover { border-color: var(--accent); color: var(--accent-ink); }

/* ---------- the statement ---------- */

.statement { display: grid; gap: 32px; }

.stat-num { font-size: 56px; line-height: 56px; letter-spacing: -0.04em; }

.stat .label { display: block; margin-top: 12px; font-size: 16px; line-height: 24px; }

.stat-note { margin-top: 8px; max-width: 22ch; font-size: 16px; line-height: 24px; color: var(--muted); }

.state-body p { margin-top: 16px; max-width: 62ch; }

.state-body ul { list-style: none; margin: 24px 0 0; padding: 0; }

.state-body li { position: relative; margin-top: 8px; padding-left: 24px; max-width: 60ch; }

.state-body li::before { content: "—"; position: absolute; left: 0; color: var(--muted); }

/* ---------- sections ---------- */

.section { padding-block: 64px; }
.section + .section { padding-top: 0; }

.h2 {
  font-size: 28px;
  line-height: 40px;
  font-weight: 400;
  letter-spacing: -0.02em;
  max-width: 32ch;
  text-wrap: balance;
}

.h2 + p { margin-top: 16px; }

/* ---------- selected work: plates and spec tables ---------- */

.cases { list-style: none; margin: 0; padding: 0; }

.case { display: grid; gap: 24px; padding-block: 40px; border-top: 1px solid var(--hair); }

.cases > li:first-child .case { border-top: 0; padding-top: 0; }

.case-art img { width: 100%; }

.case-cap {
  display: flex;
  justify-content: space-between;
  gap: 8px 16px;
  flex-wrap: wrap;
  margin-top: 8px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.case-title {
  margin-top: 8px;
  font-size: 20px;
  line-height: 28px;
  font-weight: 400;
  letter-spacing: -0.01em;
  max-width: 24ch;
  text-wrap: balance;
}

.case-what { margin-top: 8px; max-width: 48ch; }

.spec {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--rule);
  background: var(--rule);
  margin-top: 24px;
  font-size: 14px;
  line-height: 20px;
}

.spec > div { background: var(--bg); padding: 8px 12px 10px; min-width: 0; }

.spec dt {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.spec dd { margin: 0; }

.spec--row { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.case-head .spec { max-width: none; }

.case-link {
  display: inline-block;
  margin-top: 24px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
}

.case-link:hover { text-decoration: underline; text-decoration-color: var(--accent); }

.case-link--pending { color: var(--muted); }

.case-cta { margin-top: 24px; }

/* ---------- page furniture for about + cv ---------- */

.line-meta {
  position: absolute;
  top: 0;
  right: 0;
  transform: translateY(-50%);
  padding-left: 12px;
  background: var(--bg);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--muted);
  white-space: nowrap;
}

.section-note { margin-top: 8px; max-width: 60ch; color: var(--muted); }

.cv-entry { display: grid; gap: 0 32px; }

.cv-years {
  font-size: 14px;
  line-height: 24px;
  color: var(--fg);
}

.cv-kind {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.cv-body { min-width: 0; }

.cv-role { font-size: 20px; line-height: 28px; font-weight: 400; letter-spacing: -0.01em; }

.cv-org { margin-top: 2px; font-size: 14px; line-height: 24px; color: var(--muted); }

.cv-link { margin-top: 12px; font-size: 14px; line-height: 24px; }

@media (min-width: 900px) {
  .cv-entry { grid-template-columns: 132px minmax(0, 1fr); align-items: start; }
  .cv-when { grid-column: 1; grid-row: 1; }
  .cv-body { grid-column: 2; grid-row: 1; }
}

.cv-links { margin-top: 24px; font-size: 16px; line-height: 28px; }

.stat--inline { margin-bottom: 40px; }

/* the about-page track record: plain rows, no links */
.record--about li {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 4px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--hair);
}

/* the year shares the name's baseline, and the other three cells stack under it */
.record--about .rec-year { grid-column: 1; grid-row: 1 / span 3; align-self: baseline; }
.record--about .rec-where { grid-column: 2; grid-row: 1; }
.record--about .rec-role { grid-column: 2; grid-row: 2; }
.record--about .rec-out { grid-column: 2; grid-row: 3; }

/* ---------- quoted matter ---------- */

blockquote {
  margin: 24px 0 0;
  padding-left: 16px;
  border-left: 1px solid var(--rule);
  max-width: 60ch;
  color: var(--muted);
}

blockquote p { margin-top: 8px; }
blockquote p:first-child { margin-top: 0; }

.prose blockquote { margin-top: 24px; }

/* code, when the code is the argument */
.codeblock {
  margin: 24px 0 0;
  padding: 16px;
  border: 1px solid var(--rule);
  overflow-x: auto;
  max-width: 62ch;
  font-size: 14px;
  line-height: 24px;
}

.codeblock code { font-family: inherit; white-space: nowrap; }

.nsfw-note {
  margin-top: 40px;
  padding: 12px 16px;
  border: 1px solid var(--rule);
  max-width: var(--measure);
  font-size: 14px;
  line-height: 24px;
}

/* ---------- the CV ---------- */

.cv-entry {
  border-top: 1px solid var(--hair);
  margin-top: 24px;
  padding-top: 16px;
  max-width: var(--measure);
}

.cv-entry:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }

.cv-org { font-size: 20px; line-height: 28px; font-weight: 400; letter-spacing: -0.01em; }

.cv-meta { margin-top: 4px; font-size: 14px; line-height: 24px; color: var(--muted); }

.cv-list { list-style: none; margin: 12px 0 0; padding: 0; }

.cv-list li { position: relative; margin-top: 8px; padding-left: 24px; max-width: 62ch; }

.cv-list li::before { content: "—"; position: absolute; left: 0; color: var(--muted); }

/* a spec table stacked instead of spread */
.spec--stack { grid-template-columns: minmax(0, 1fr); max-width: var(--measure); }

.spec--stack > div { padding: 12px 12px 14px; }

.spec--stack dd { margin-top: 4px; }

/* ---------- track record ---------- */

.record { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }

.record li { border-bottom: 1px solid var(--hair); }

/* the whole row is the link, so the outcome line never has to be one */
.rec {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 4px 16px;
  padding: 16px 8px;
  color: var(--fg);
  text-decoration: none;
  transition: background-color 140ms ease-out;
}

.rec:hover { background-color: var(--tint); }

.rec-year {
  grid-row: 1 / span 3;
  white-space: nowrap;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.rec-where {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  line-height: 28px;
}

.rec:hover .rec-where {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.rec-thumb img {
  display: block;
  width: 72px;
  height: 44px;
  object-fit: cover;
  border: 1px solid var(--rule);
}

.rec-role,
.rec-out { font-size: 14px; line-height: 24px; }

.rec-role { color: var(--muted); }

.rec-go { display: none; }

/* a margin line under a list, not a link */
.note-line { margin-top: 24px; max-width: 62ch; }

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

.contact .h2 { max-width: 26ch; }

.contact p { margin-top: 16px; max-width: 62ch; }

.copy {
  font: inherit;
  color: var(--accent-ink);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 140ms ease-out, text-underline-offset 140ms ease-out;
}



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

.foot {
  margin-top: 64px;
  border-top: 1px solid var(--rule);
  padding-block: 40px 64px;
}

/* the last block on a page hands its bottom padding to the footer's margin, so the
   rule above the colophon sits the same distance down on every sheet */
main > .section:last-child,
main > .case-head:last-child { padding-bottom: 0; }

.foot > .sheet > * + * { margin-top: 16px; }

.foot p {
  font-size: 12px;
  line-height: 20px;
  color: var(--muted);
  max-width: 62ch;
}

/* ---------- toast ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 16px);
  padding: 8px 16px;
  background: var(--fg);
  color: var(--bg);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease-out, transform 140ms ease-out;
}

.toast[data-on] { opacity: 1; transform: translate(-50%, 0); }

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

.case-head { padding-block: 48px 40px; }

.case-head .top {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.case-head h1 {
  font-size: 40px;
  line-height: 48px;
  font-weight: 400;
  letter-spacing: -0.02em;
  max-width: 22ch;
}

.case-head .deck {
  margin-top: 24px;
  font-size: 20px;
  line-height: 32px;
  max-width: 46ch;
}

.case-head .spec { margin-top: 40px; }

.figure { margin-block: 40px; max-width: 960px; min-width: 0; }

.figure--wide { max-width: none; }

.figure--tall { max-width: 420px; }

.figure--small { max-width: 440px; }

.figure img { width: 100%; }

.figure figcaption {
  margin-top: 12px;
  font-size: 14px;
  line-height: 24px;
  color: var(--muted);
  max-width: 64ch;
}

.figure .fignum {
  color: var(--muted);
  letter-spacing: 0.04em;
  margin-right: 8px;
}

/* the article: a contents rail, then the sheet */

.article { display: grid; gap: 40px; }

/* a grid item cannot shrink below its content unless it is told it may */
.article-body { min-width: 0; }

.toc-title { margin-bottom: 8px; }

.toc ol { list-style: none; margin: 0; padding: 0; }

.toc li { border-top: 1px solid var(--hair); }

.toc li:last-child { border-bottom: 1px solid var(--hair); }

.toc a {
  display: flex;
  gap: 12px;
  padding: 8px 0;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg);
  text-decoration: none;
}

.toc a span:first-child { color: var(--muted); }

.toc a[aria-current="true"] { color: var(--accent-ink); }

.toc a[aria-current="true"] span:first-child { color: var(--accent-ink); }

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

.toc-links { margin-top: 16px; font-size: 12px; line-height: 20px; color: var(--muted); }

.figure .strip {
  display: flex;
  justify-content: space-between;
  gap: 8px 16px;
  flex-wrap: wrap;
  margin-top: 8px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

/* prose */

.prose { max-width: var(--measure); }

.prose p { margin-top: 16px; }
.prose p:first-child { margin-top: 0; }

.part { padding-block: 40px 0; }

.part > .line { margin-bottom: 24px; }

.part h2 {
  font-size: 28px;
  line-height: 40px;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  max-width: 28ch;
}

.part > .prose > p:first-child { margin-top: 24px; }

.prose ul { list-style: none; padding: 0; margin: 24px 0 0; }

.prose ul li {
  position: relative;
  padding-left: 24px;
  margin-top: 16px;
}

.prose ul li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--muted);
}

.prose strong { font-weight: 700; }

.prose code {
  font-family: inherit;
  font-size: 14px;
  padding: 1px 4px;
  background: var(--tint);
  color: var(--fg);
  white-space: nowrap;
}

/* footnote-ish asides */
.aside {
  margin-top: 32px;
  padding: 16px;
  border: 1px solid var(--hair);
  font-size: 14px;
  line-height: 24px;
  color: var(--muted);
  max-width: var(--measure);
}

.aside .label { display: block; margin-bottom: 8px; }

/* next / back */

.next {
  margin-top: 64px;
  border-top: 1px solid var(--rule);
  padding-block: 32px 0;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.next .sheet {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

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

/* ---------- motion: 120–180ms, ease-out, scroll-in only ---------- */

.reveal { opacity: 1; transform: none; }

.js .reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 160ms ease-out, transform 160ms ease-out;
}

.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  * { transition-duration: 1ms !important; }
}

/* ---------- wide ---------- */

@media (min-width: 900px) {
  .hero h1 { font-size: 56px; line-height: 60px; }
  .hero-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    row-gap: 0;
    align-items: stretch;
    padding-block: 96px 56px;
  }
  .hero-main { grid-column: 1 / span 7; }
  .hero-grid > aside { grid-column: 8 / -1; }
  .hero-grid > aside {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-width: 0;
  }
  .case {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    row-gap: 0;
    align-items: start;
    padding-block: 56px;
  }
  .case-art { grid-column: 1 / span 6; grid-row: 1; }
  .case-body { grid-column: 7 / -1; grid-row: 1; }
  .cases > li:nth-child(even) .case-art { grid-column: 7 / -1; }
  .cases > li:nth-child(even) .case-body { grid-column: 1 / span 6; }
  .case-title { font-size: 28px; line-height: 40px; }
  .rec {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: center;
    padding: 14px 8px;
  }
  .rec-year { grid-column: 1; grid-row: 1; }
  .rec-where { grid-column: 2 / span 4; grid-row: 1; }
  .rec-role { grid-column: 6 / span 3; grid-row: 1; }
  .rec-out { grid-column: 9 / span 3; grid-row: 1; }
  .record--about li { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: baseline; }
  .record--about .rec-year { grid-column: 1 / span 2; grid-row: 1; }
  .record--about .rec-where { grid-column: 3 / span 4; }
  .record--about .rec-role { grid-column: 7 / span 3; }
  .record--about .rec-out { grid-column: 10 / span 3; text-align: right; }
  .rec-go {
    display: block;
    grid-column: 12;
    grid-row: 1;
    text-align: right;
    color: var(--muted);
  }
  .rec:hover .rec-go { color: var(--accent-ink); }
  .statement { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
  .stat-num { font-size: 80px; line-height: 80px; }
  .stat { grid-column: 1 / span 3; }
  .state-body { grid-column: 4 / span 8; }
  .spec--row[data-cells="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .spec--row[data-cells="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .spec--row[data-cells="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .case-head h1 { font-size: 56px; line-height: 56px; }
  .case-head { padding-block: 64px 48px; }
}

@media (min-width: 1200px) {
  .hero h1 { font-size: 80px; line-height: 84px; letter-spacing: -0.03em; }
}

@media (min-width: 1100px) {
  .article { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
  .toc { grid-column: 1 / span 2; }
  .article-body { grid-column: 3 / -1; }

  .toc { position: sticky; top: 88px; }

  /* margin notes live in the gutter, only where there is room */
  .gutter {
    position: relative;
  }
  .gutter .note {
    position: absolute;
    left: calc(100% + 40px);
    top: 4px;
    width: 200px;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.04em;
    color: var(--muted);
  }
  .gutter .note::before {
    content: "";
    display: block;
    width: 24px;
    height: 1px;
    margin-bottom: 8px;
    background: var(--mark);
  }
}

@media (max-width: 1099px) {
  .note { display: none; }
  .toc { display: none; }
}

@media (max-width: 379px) {
  /* only a very narrow phone needs the label under the rule */
  .line { padding-top: 8px; }
  .line > span,
  .line-meta {
    position: static;
    transform: none;
    display: block;
    white-space: normal;
    padding: 0;
    background: none;
  }
}

@media (min-width: 420px) and (max-width: 899px) {
  .hero h1 { font-size: 56px; line-height: 60px; }
}

@media (max-width: 899px) {
  .dim { display: none; }
  .hero-grid > aside { margin-top: 40px; }

  /* four columns is what a phone can carry, so four trails */
  .guides { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 16px; }

  .guides i:nth-child(n + 5) { display: none; }

  .guides i:nth-child(1) { --len: 22vh; --top: 4vh; }
  .guides i:nth-child(2) { --len: 46vh; --top: 0vh; }
  .guides i:nth-child(3) { --len: 30vh; --top: 34vh; }
  .guides i:nth-child(4) { --len: 58vh; --top: 12vh; }
  .spec--row[data-cells="5"] > div:last-child { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .lede { font-size: 16px; line-height: 28px; }
}

/* ---------------------------------------------------------------- print
   The CV page is the only one meant to leave the browser as paper. Strip the
   chrome, flatten the grid to one column, and let A4 decide the breaks. */
@media print {
  :root {
    --bg: #ffffff;
    --ink: #111111;
    --muted: #333333;
    --hair: #cfcfcf;
    --rule: #999999;
    --accent: #111111;
    --accent-ink: #111111;
  }

  @page { size: A4; margin: 12mm 12mm; }

  html, body { background: #ffffff; color: #111111; font-size: 9pt; }
  .masthead, .foot, .skip, .guides, .toc, .actions, .next,
  .case-head .top, .stat, .note, .section-note { display: none !important; }
  .sheet { width: auto; max-width: none; padding: 0; }

  .case-head { padding: 0 0 5mm; border: 0; }
  .case-head h1 { font-size: 20pt; line-height: 1.15; margin-bottom: 2mm; }
  .deck { font-size: 9.5pt; line-height: 1.4; max-width: none; margin-bottom: 3mm; }
  .label, .annot, .line-meta { font-size: 7pt; letter-spacing: 0.08em; }

  .article { display: block; gap: 0; }
  .article-body { min-width: 0; }
  .part { padding-top: 4mm; }
  .part .line { margin-bottom: 2mm; }
  .part h2, .part h3 { font-size: 11pt; line-height: 1.25; margin-bottom: 1.5mm; }
  .prose, .prose p, .cv-list li { max-width: none; font-size: 9pt; line-height: 1.4; }
  .prose p + p { margin-top: 2mm; }

  .spec, .spec--row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 0; }
  .spec > div { border: 0; border-top: 1px solid var(--hair); padding: 2mm 2mm 2mm 0; }
  .spec > div:last-child { grid-column: auto; }
  .spec dt { font-size: 7pt; }
  .spec dd { font-size: 9pt; }

  .cv-entry { display: grid; grid-template-columns: 24mm 1fr; gap: 4mm; break-inside: avoid; padding: 3mm 0; }
  .cv-role { font-size: 10.5pt; }
  .cv-org { font-size: 9.5pt; }
  .cv-years { font-size: 8pt; }

  a { color: #111111; text-decoration: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 7pt; color: #555; }
  blockquote { font-size: 9pt; }
  figure, .frame { break-inside: avoid; }
  img { max-width: 100%; }
}

/* -------------------------------------------------- minimal single page
   No contents rail, so the document sits as one centred column: wide enough
   for the CV, narrow enough to read. */
.article--plain { display: block; max-width: 880px; margin-inline: auto; }
.article--plain .article-body { grid-column: 1 / -1; }
.article--plain .cv-entry { max-width: none; }

/* minimal single page: the hero is followed by the document, not by a band,
   so the rule under it has nothing to separate, and the grid sits close. */
.hero { border-bottom: 0; }
.case-head { padding-block: 24px 40px; }

/* -------------------------------------------------- scroll to top
   Appears after two screens of scrolling. Square, paper, 1px rule — the same
   object language as the buttons, floating at the sheet edge. */
.to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  font: inherit;
  font-size: 15px;
  line-height: 1;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 0;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 160ms ease-out, transform 160ms ease-out, background-color 120ms ease-out, color 120ms ease-out, visibility 0s linear 160ms;
}

.to-top.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 160ms ease-out, transform 160ms ease-out, background-color 120ms ease-out, color 120ms ease-out, visibility 0s;
}

.to-top:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-on);
}

@media (prefers-reduced-motion: reduce) {
  .to-top, .to-top.is-on { transition: none; }
}

/* -------------------------------------------------- 404
   Same sheet, same rules; the number carries it. */
.notfound { padding-block: 96px 0; }

.notfound .code {
  font-size: clamp(56px, 12vw, 128px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  margin: 0 0 24px;
}

.notfound h1 {
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
}

.notfound .prose { max-width: 58ch; }
.notfound .actions { margin-top: 32px; }