/* Layout: a 40rem reading column with a 14rem working margin on the right for
   notes and metadata, inside a 75rem page. Below 66rem the margin folds into
   the flow. One deliberate dark look: charcoal panels, emerald for what passes,
   copper and brass for defects and the numbers that matter. */

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo.woff2") format("woff2");
  font-weight: 400 800;
  font-stretch: 70% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-italic.woff2") format("woff2");
  font-weight: 400 600;
  font-stretch: 100%;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Color */
  --bg: #0f1311;
  --panel: #151b18;
  --texture: #1c2420;
  --line: #26302c;
  --ink: #e6ebe8;
  --ink-2: #a3aea8;
  --emerald: #5cc29d;
  --copper: #e3a06a;
  --brass: #f0c674;
  --band: #0d3a2c;
  --band-ink: #b7d6c9;
  --draft-wash: #2a2416;

  /* Type */
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --step--2: clamp(0.76rem, 0.74rem + 0.1vw, 0.82rem);
  --step--1: clamp(0.86rem, 0.83rem + 0.15vw, 0.94rem);
  --step-0: clamp(1.02rem, 0.97rem + 0.25vw, 1.16rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.45vw, 1.5rem);
  --step-2: clamp(1.5rem, 1.3rem + 0.9vw, 2.15rem);
  --step-3: clamp(1.85rem, 1.5rem + 1.6vw, 3rem);
  --step-4: clamp(2.4rem, 1.8rem + 2.9vw, 4.4rem);
  --step-5: clamp(3rem, 2rem + 4.6vw, 6rem);
  --step-num: clamp(3.6rem, 2.8rem + 3.6vw, 5.4rem);

  --s-3xs: clamp(0.25rem, 0.23rem + 0.1vw, 0.33rem);
  --s-2xs: clamp(0.4rem, 0.37rem + 0.15vw, 0.5rem);
  --s-xs: clamp(0.55rem, 0.5rem + 0.2vw, 0.7rem);
  --s-s: clamp(0.8rem, 0.74rem + 0.28vw, 1.05rem);
  --s-m: clamp(1.1rem, 1rem + 0.45vw, 1.5rem);
  --s-l: clamp(1.6rem, 1.4rem + 0.9vw, 2.4rem);
  --s-xl: clamp(2.4rem, 2rem + 1.8vw, 4rem);
  --s-2xl: clamp(3.4rem, 2.7rem + 3.2vw, 6rem);

  --measure: 40rem;
  --margin-col: 14rem;
  --col-gap: 4rem;
  --page: 75rem;
  color-scheme: dark;
}

/* Base */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.6;
  font-kerning: normal;
}

.gutter {
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.wrap {
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: clamp(0px, 3vw - 0.5rem, 2rem);
}

h1, h2, h3, h4 { margin: 0; line-height: 1.1; text-wrap: balance; font-weight: 700; }
p, ul, ol, dl, figure, blockquote { margin: 0; }
p { text-wrap: pretty; }
img, svg, canvas { max-width: 100%; }
strong { font-weight: 650; }

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--emerald);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}
a:hover { color: var(--copper); text-decoration-color: var(--copper); }

:focus-visible { outline: 2px solid var(--emerald); outline-offset: 3px; }
::selection { background: var(--band); color: var(--ink); }

code {
  font-family: var(--mono);
  font-size: 0.86em;
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 0.05em 0.35em;
}

.label {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-2);
  line-height: 1.4;
}
.condensed { font-stretch: 72%; }

.skip {
  position: absolute;
  left: max(16px, env(safe-area-inset-left, 0px));
  top: -4rem;
  z-index: 20;
  background: var(--emerald);
  color: var(--bg);
  font-weight: 650;
  padding: 0.5em 0.9em;
  text-decoration: none;
}
.skip:focus { top: calc(env(safe-area-inset-top, 0px) + 0.75rem); }

.btn {
  font: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 0.55em 0.95em;
  min-height: 44px;
  cursor: pointer;
}
.btn:hover { border-color: var(--emerald); }
.btn[aria-pressed="true"] { background: var(--band); border-color: var(--emerald); }
.btn-small { min-height: 0; padding: 0.15em 0.6em; font-size: var(--step--2); }

/* Frame */

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-xs) var(--s-m);
  padding-block: var(--s-m);
  border-bottom: 1px solid var(--line);
}
.wordmark { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.1em 0.75em; text-decoration: none; }
.wm-name { font-weight: 700; }
.wm-role { font-size: var(--step--1); font-weight: 600; color: var(--emerald); }
.wordmark:hover { color: var(--ink); }
.wordmark:hover .wm-role { color: var(--emerald); }
.site-nav ul { list-style: none; padding: 0; margin: 0; display: flex; gap: var(--s-m); }
.site-nav a {
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  padding-block: 0.6em;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current] {
  color: var(--ink);
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.5em;
}

main { display: block; padding-bottom: var(--s-xl); }

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: var(--s-l) var(--s-xl);
  display: grid;
  gap: var(--s-s);
  font-size: var(--step--2);
  line-height: 1.65;
  color: var(--ink-2);
}
.site-footer p { max-width: var(--measure); }
.site-footer a { color: var(--ink-2); }

/* Home: hero */

.hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 27rem), 1fr));
  gap: var(--s-xl);
  align-items: start;
  padding-block: var(--s-l) var(--s-2xl);
}
.hero-text { display: grid; gap: var(--s-m); align-content: start; }
@media (min-width: 58rem) and (max-height: 820px) { .hero-text { gap: var(--s-s); } .deck { font-size: var(--step-0); } }
/* Two columns: the statement stays beside the wafer while the panel scrolls past. */
@media (min-width: 58rem) {
  .hero-text { position: sticky; top: var(--s-l); padding-top: var(--s-m); }
}
.statement {
  /* also limited by window height, so availability and email stay on the first screen of a short laptop window */
  font-size: min(var(--step-5), max(2.6rem, 8.6vh));
  font-weight: 800;
  font-stretch: 72%;
  line-height: 0.93;
  letter-spacing: -0.01em;
}
.deck { font-size: var(--step-1); line-height: 1.5; color: var(--ink-2); max-width: 33rem; }

/* Availability, then the two things a recruiter acts on. One rule above holds them together as a unit. */
.status {
  display: grid;
  gap: var(--s-xs);
  max-width: 33rem;
  padding-top: var(--s-s);
  border-top: 1px solid var(--line);
}
.status-dot { display: inline-flex; align-items: center; gap: 0.6em; font-size: var(--step--1); font-weight: 650; }
.status-dot::before {
  content: "";
  inline-size: 0.75em;
  block-size: 0.75em;
  background: var(--emerald);
}
.status-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2xs) var(--s-l);
  font-size: var(--step-0);
}
/* The address and its Copy button wrap together, never apart. */
.email-line { display: inline-flex; align-items: baseline; gap: 0.75em; white-space: nowrap; }
.copy {
  font: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-2);
  background: none;
  border: 0;
  padding: 0;
  min-width: 7ch; /* "Copied" fits without nudging Résumé sideways */
  text-align: start;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 0.25em;
}
.copy:hover { color: var(--copper); text-decoration-color: var(--copper); }
/* A finger-sized target on touch screens, without changing how the line looks. */
@media (pointer: coarse) { .copy { padding-block: 0.8em; margin-block: -0.8em; } }

/* The live wafer */

.lab {
  display: grid;
  gap: var(--s-s);
  padding: clamp(16px, 2.4vw, 32px);
  background-color: var(--panel);
  background-image: linear-gradient(var(--texture) 1px, transparent 1px), linear-gradient(90deg, var(--texture) 1px, transparent 1px);
  background-size: 24px 24px;
  border: 1px solid var(--line);
  min-width: 0;
}
.lab-stage { position: relative; width: 100%; max-width: 30rem; justify-self: center; aspect-ratio: 1 / 1; }
.lab-stage canvas, .lab-stage img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lab canvas { touch-action: pan-y pinch-zoom; cursor: crosshair; visibility: hidden; }
@media (pointer: fine) { .lab.has-tool canvas { cursor: none; } }
.lab canvas.is-drawing { touch-action: none; }
.lab.is-live canvas { visibility: visible; }
.lab.is-live .lab-fallback { display: none; }
.lab-live-only { display: none; }
.lab.is-live .lab-live-only { display: revert; }
.lab.is-live .verdict.lab-live-only { display: grid; }

.lab-lede { font-size: var(--step--1); line-height: 1.5; color: var(--ink); max-width: 34rem; }
.lab-lede span { color: var(--ink-2); }

.lab-tools { display: none; flex-wrap: wrap; align-items: center; gap: var(--s-2xs); }
.lab.is-live .lab-tools { display: flex; }
.lab-tools .btn { min-height: 40px; padding: 0.4em 0.8em; }
.lab-tools .btn:disabled { opacity: 0.45; cursor: default; border-color: var(--line); }
.tools-label { font-size: var(--step--1); font-weight: 650; color: var(--ink-2); min-width: 2.2em; }
.tools-break { flex-basis: 100%; height: 0; }
.seg { display: inline-flex; }
.seg .btn + .btn { margin-left: -1px; }
.seg .btn[aria-pressed="true"] { position: relative; z-index: 1; }
.btn-glyph { display: inline-flex; align-items: center; gap: 0.45em; }
.glyph-sm { width: 1.15em; height: 1.15em; color: var(--copper); }
.g-wafer { stroke: currentColor; stroke-width: 1; opacity: 0.35; }

.lab-hint {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 6%;
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
  white-space: nowrap;
  font-size: var(--step--2);
  font-weight: 650;
  color: var(--ink);
  background: rgba(13, 58, 44, 0.92);
  border: 1px solid var(--emerald);
  border-radius: 999px;
  padding: 0.35em 0.9em;
}
.lab.is-live .lab-hint { display: block; }
.lab.is-live.has-drawn .lab-hint { display: none; }
.hint-touch { display: none; }
@media (pointer: coarse) { .hint-mouse { display: none; } .hint-touch { display: inline; } }
.lab.has-tool .hint-touch { display: none; }
@media (pointer: coarse) { .lab.has-tool .lab-hint { display: none; } }

.scan {
  display: grid;
  gap: 0.35em;
  visibility: hidden;
  min-height: 2.6em;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink);
}
.lab.is-live .scan.lab-live-only { display: grid; }
.lab.is-scanning .scan { visibility: visible; }
.scan-bar { height: 3px; background: var(--line); position: relative; overflow: hidden; }
.scan-bar span { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--emerald); transition: width 160ms linear; }
.scan-text b { font-weight: 650; color: var(--emerald); font-variant-numeric: tabular-nums; }

.verdict { display: grid; gap: var(--s-3xs); min-width: 0; }
.lab.is-live .verdict.lab-live-only { display: grid; }
.v-label { font-size: var(--step--2); font-weight: 600; color: var(--ink-2); max-width: 34rem; }
.v-next { margin-top: var(--s-2xs); }
.v-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.6em; }
.v-name { font-size: var(--step-2); font-weight: 800; font-stretch: 75%; line-height: 1.05; }
.v-prob { font-size: var(--step-0); font-weight: 650; color: var(--emerald); font-variant-numeric: tabular-nums; }
.v-status { font-size: var(--step--2); color: var(--ink-2); min-height: 1.5em; margin-bottom: var(--s-2xs); }

.patterns {
  list-style: none;
  padding: 0;
  margin-top: var(--s-3xs);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}
.patterns li {
  display: grid;
  justify-items: center;
  gap: 0.25em;
  padding: 0.5em 0.2em 0.4em;
  border: 1px solid var(--line);
  background: var(--bg);
  font-size: var(--step--2);
  color: var(--ink-2);
  text-align: center;
  line-height: 1.2;
  transition: border-color 160ms ease, color 160ms ease;
}
.patterns .glyph { width: 1.9rem; height: 1.9rem; color: #3b4741; transition: color 160ms ease; }
.patterns li.is-on { border-color: var(--c); color: var(--ink); font-weight: 650; }
.patterns li.is-on .glyph { color: var(--c); }

.runners { list-style: none; padding: 0; display: grid; gap: 0.2em; font-size: var(--step--2); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.runners li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(3rem, 30%) 2.6em; gap: 0.6em; align-items: center; }
.runners .r-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.runners .r-bar { height: 5px; background: var(--line); position: relative; }
.runners .r-bar span { position: absolute; inset: 0 auto 0 0; background: var(--ink-2); }
.runners .r-val { text-align: right; }

.lab-card { font-size: var(--step--2); color: var(--ink-2); }
.lab-card summary { cursor: pointer; font-weight: 600; color: var(--ink); padding-block: 0.4em; }
.lab-card dl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.25em 1em;
  margin-top: 0.5em;
  line-height: 1.5;
}
.lab-card dt { font-weight: 600; color: var(--ink); }
.lab-card dd { margin: 0; }
.lab-card .private { margin-top: 0.6em; color: var(--ink); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Home: work tiles */

.section { padding-block: var(--s-m) var(--s-xl); }
.section > .label { margin-bottom: var(--s-m); }

.tiles {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3xs);
  padding: var(--s-l) var(--s-m) var(--s-m);
  background: var(--panel);
}
.tile .num {
  font-size: var(--step-num);
  font-weight: 800;
  font-stretch: 70%;
  line-height: 1;
  color: var(--copper);
  font-variant-numeric: lining-nums;
}
.tile .num-label { font-size: var(--step--1); color: var(--ink-2); }
.tile h3 { font-size: var(--step-1); font-weight: 650; line-height: 1.2; margin-top: var(--s-m); }
.tile h3 a { text-decoration: none; }
.tile h3 a::after { content: ""; position: absolute; inset: 0; }
.tile p { font-size: var(--step--1); color: var(--ink-2); }
.tile .more { margin-top: auto; padding-top: var(--s-s); font-size: var(--step--1); font-weight: 650; color: var(--emerald); }
.tile:hover { background: #18201c; }
.tile:hover h3 a { color: var(--ink); }
.tile:has(a:focus-visible) { outline: 2px solid var(--emerald); outline-offset: -2px; }
.tile h3 a:focus-visible { outline: none; }

.now { list-style: none; padding: 0; display: grid; gap: var(--s-s); max-width: var(--measure); }
.now li { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: var(--s-s); align-items: baseline; }
.now .label { color: var(--emerald); }

.band { background: var(--band); color: #fff; margin-top: var(--s-l); }
.band .wrap { padding-block: var(--s-xl); display: grid; gap: var(--s-m); }
.band p { color: var(--band-ink); }
.band .big-email {
  color: #fff;
  font-size: clamp(1.9rem, 1rem + 4.2vw, 4rem);
  line-height: 1.05;
  font-weight: 800;
  font-stretch: 72%;
  text-decoration-color: var(--copper);
  text-underline-offset: 0.15em;
  overflow-wrap: anywhere;
}
.band .big-email:hover { color: var(--copper); }
.band .links { display: flex; flex-wrap: wrap; gap: var(--s-2xs) var(--s-m); align-items: center; }
.band .links a { color: #fff; }
.band .btn-small { background: transparent; color: #fff; border-color: #2f6b55; }

/* Articles: case studies, about, résumé */

.article { padding-top: var(--s-l); max-width: calc(var(--measure) + var(--col-gap) + var(--margin-col)); }
.article::after { content: ""; display: table; clear: both; }
.article > :where(p, h2, h3, ul, ol, dl, .draft, .lede, .back, .eyebrow, .glance, .next),
.adr > :not(.note) { max-width: var(--measure); }

.back {
  display: inline-block;
  font-size: var(--step--1);
  color: var(--ink-2);
  text-decoration: none;
  margin-bottom: var(--s-l);
}
.eyebrow { margin-bottom: var(--s-s); color: var(--emerald); }

.article h1 {
  font-size: var(--step-4);
  font-weight: 800;
  font-stretch: 72%;
  line-height: 0.98;
  letter-spacing: -0.01em;
  margin-bottom: var(--s-m);
  max-width: 18ch;
}
.lede { font-size: var(--step-1); line-height: 1.5; color: var(--ink-2); margin-bottom: var(--s-l); }

.glance {
  display: grid;
  grid-template-columns: minmax(6.5rem, max-content) minmax(0, 1fr);
  gap: var(--s-2xs) var(--s-m);
  background: var(--panel);
  border: 1px solid var(--line);
  padding: var(--s-s) var(--s-m);
  margin-bottom: var(--s-l);
  font-size: var(--step--1);
  line-height: 1.5;
}
.glance dt { font-weight: 650; color: var(--ink-2); }
.glance dd { margin: 0; }

.article h2 { font-size: var(--step-2); font-weight: 750; font-stretch: 85%; margin-top: var(--s-xl); margin-bottom: var(--s-s); }
.article h3 { font-size: var(--step-1); font-weight: 650; line-height: 1.25; margin-bottom: var(--s-xs); }
.article h2.label { font-size: var(--step--1); font-weight: 600; font-stretch: 100%; margin: 0 0 var(--s-s); }

.article > .note + p,
.article > p + p,
.article > ul + p,
.article > p + ul,
.article > p + ol { margin-top: var(--s-s); }
.article > ul, .article > ol { padding-left: 1.2em; }
.article li + li { margin-top: var(--s-3xs); }
.article li::marker { color: var(--copper); }

.adr {
  border-top: 1px solid var(--line);
  padding-top: var(--s-m);
  margin-top: var(--s-l);
}
.adr-id { display: block; color: var(--emerald); margin-bottom: var(--s-2xs); }
.adr dl { display: grid; gap: var(--s-xs); margin-top: var(--s-s); }
.adr dt { font-size: var(--step--1); font-weight: 650; color: var(--ink-2); }
.adr dd { margin: 0; }
.adr dd + dt { margin-top: var(--s-2xs); }

.note {
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--ink-2);
  border-left: 2px solid var(--line);
  padding-left: var(--s-s);
  margin-block: var(--s-m);
  max-width: var(--measure);
}
.note b { display: block; font-weight: 650; color: var(--copper); margin-bottom: 0.25em; }

@media (min-width: 66rem) {
  .note {
    float: right;
    clear: right;
    width: var(--margin-col);
    margin: 0.3em 0 var(--s-m);
    padding-left: 0;
    border-left: 0;
  }
  .article > h2 + .note { margin-top: calc(var(--s-xl) + 0.4em); }
}

/* Wafer illustrations on the case study */
.wafers {
  clear: both;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-s) var(--s-m);
  margin-block: var(--s-l);
  max-width: 44rem;
  background: var(--panel);
  border: 1px solid var(--line);
  padding: var(--s-m);
}
.wafer { display: grid; gap: var(--s-2xs); justify-items: start; }
.wafer svg { width: 100%; height: auto; display: block; }
.wafer .label { font-size: var(--step--2); }
.wafer-edge { fill: none; stroke: #33403a; stroke-width: 0.25; }
.die-pass { fill: #26302c; }
.die-fail { fill: var(--copper); }
@media (max-width: 34rem) {
  .wafers { grid-template-columns: minmax(0, 1fr); }
  .wafer { grid-template-columns: 7rem minmax(0, 1fr); column-gap: var(--s-s); align-items: center; align-content: center; }
  .wafer svg { grid-row: 1 / span 3; }
}
.wafer-pred { font-size: var(--step--2); color: var(--ink); }
.wafer-legend { display: flex; flex-wrap: wrap; gap: 0.2em 0.8em; font-size: var(--step--2); color: var(--ink-2); }
.wl { display: inline-flex; align-items: center; gap: 0.35em; }
.wl::before { content: ""; inline-size: 0.6em; block-size: 0.6em; background: var(--c); }
.wafers-note { grid-column: 1 / -1; font-size: var(--step--1); line-height: 1.5; color: var(--ink-2); }

/* Architecture figure */
.arch { clear: both; margin-top: var(--s-xl); }
.arch h2 { margin-top: 0; }
.arch > p { max-width: var(--measure); margin-bottom: var(--s-m); color: var(--ink-2); }
.arch-body { display: grid; gap: var(--s-m); }
.arch-figure { display: none; }
.arch-steps { list-style: none; padding: 0; counter-reset: step; max-width: var(--measure); border-top: 1px solid var(--line); }
.arch-steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 1.9rem minmax(0, 1fr);
  gap: var(--s-xs);
  padding-block: var(--s-s);
  border-bottom: 1px solid var(--line);
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--ink-2);
}
.arch-steps li + li { margin-top: 0; }
.arch-steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  background: var(--ink);
  color: var(--bg);
  font-size: var(--step--2);
  font-weight: 700;
}
.arch-steps strong { display: block; font-size: var(--step-0); font-weight: 650; color: var(--ink); margin-bottom: 0.15em; }
.arch-steps li.is-active { background: var(--panel); }
.arch-steps li.is-active::before { background: var(--emerald); }
.arch-steps li:focus { outline: none; }

@media (min-width: 52rem) {
  .arch-figure {
    display: block;
    max-width: 50rem;
    background: var(--panel);
    border: 1px solid var(--line);
    padding: var(--s-m);
  }
  .arch-steps { max-width: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); column-gap: var(--s-m); }
  .arch-steps li { padding-inline: var(--s-2xs); }
}

.arch svg { display: block; width: 100%; height: auto; }
.arch .zone { fill: none; stroke: var(--line); stroke-width: 1.25; }
.arch .zone-dash { stroke-dasharray: 4 4; }
.arch .zone-label { font-family: var(--sans); font-size: 10px; font-weight: 650; letter-spacing: 0.06em; fill: var(--ink-2); }
.arch .box { fill: #1b221f; stroke: var(--line); stroke-width: 1.25; }
.arch .box-inner { fill: var(--panel); stroke: var(--line); stroke-width: 1; }
.arch .t { font-family: var(--sans); font-size: 11.5px; font-weight: 650; fill: var(--ink); }
.arch .t-sub { font-family: var(--sans); font-size: 9.5px; fill: var(--ink-2); }
.arch .edge { fill: none; stroke: var(--ink-2); stroke-width: 1.25; }
.arch .edge-dash { stroke-dasharray: 3 3; }
.arch .arrowhead { fill: var(--ink-2); }
.arch .badge circle { fill: var(--ink); }
.arch .badge text { font-family: var(--sans); font-size: 10px; font-weight: 700; fill: var(--bg); }
.arch [data-for] { cursor: pointer; }
.arch [data-for].is-active .box { fill: var(--band); stroke: var(--emerald); }
.arch [data-for].is-active .zone { stroke: var(--emerald); }
.arch [data-for].is-active .badge circle { fill: var(--emerald); }

/* Drafts: visible in preview builds, blocked from deploys by build.py */
.draft { background: var(--draft-wash); outline: 1px dashed var(--brass); outline-offset: 2px; }
div.draft, p.draft, dd.draft, li.draft { padding: var(--s-xs) var(--s-s); }
ul.draft { padding: var(--s-xs) var(--s-s) var(--s-xs) calc(var(--s-s) + 1.2em); }
ul.draft::before { margin-left: -1.2em; }
div.draft::before, p.draft::before, dd.draft::before, li.draft::before, ul.draft::before {
  content: "Draft · " attr(data-draft);
  display: block;
  font-size: var(--step--2);
  font-weight: 650;
  color: var(--brass);
  margin-bottom: 0.35em;
}
span.draft { padding-inline: 0.15em; }
.article > div.draft + p,
.article > p + div.draft,
.article > div.draft + div.draft { margin-top: var(--s-s); }

.next { border-top: 1px solid var(--line); margin-top: var(--s-xl); padding-top: var(--s-m); display: grid; gap: var(--s-2xs); }
.next a { font-size: var(--step-2); font-weight: 750; font-stretch: 80%; line-height: 1.15; text-decoration: none; }

/* About */
.chapter { margin-top: var(--s-xl); max-width: var(--measure); }
.chapter .label { color: var(--copper); margin-bottom: var(--s-2xs); }
.chapter h2 { margin-top: 0 !important; }
.chapter p + p { margin-top: var(--s-s); }

/* Résumé */
.resume-head { display: grid; gap: var(--s-xs); margin-bottom: var(--s-l); }
.contact-links { display: flex; flex-wrap: wrap; gap: var(--s-2xs) var(--s-m); font-size: var(--step--1); }
.r-section { border-top: 1px solid var(--line); padding-top: var(--s-s); margin-top: var(--s-l); }
.r-item { display: grid; gap: 0.15em var(--col-gap); padding-block: var(--s-s); }
.r-item + .r-item { border-top: 1px dashed var(--line); }
.r-item h3 { font-size: var(--step-1); font-weight: 650; line-height: 1.25; }
.r-item .org { color: var(--ink-2); }
.r-item .when { font-size: var(--step--1); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.r-item ul { padding-left: 1.15em; margin-top: var(--s-2xs); max-width: var(--measure); }
.r-item li + li { margin-top: 0.25em; }
.r-item li::marker { color: var(--copper); }
.skills { display: grid; gap: var(--s-xs) var(--s-m); grid-template-columns: minmax(0, 1fr); max-width: var(--measure); }
.skills dt { font-size: var(--step--1); font-weight: 650; color: var(--ink-2); }
.skills dd { margin: 0 0 var(--s-2xs); }
.certs { display: grid; gap: var(--s-s) var(--s-l); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.certs h3 { font-size: var(--step-0); font-weight: 650; margin-bottom: 0.25em; }
.certs ul { list-style: none; padding: 0; font-size: var(--step--1); line-height: 1.55; }
.certs .when { font-size: var(--step--2); color: var(--ink-2); margin-left: 0.4em; }

@media (min-width: 46rem) {
  .r-item { grid-template-columns: minmax(0, var(--measure)) minmax(0, var(--margin-col)); }
  .r-item .when { grid-column: 2; grid-row: 1; padding-top: 0.3em; }
  .r-item > :not(.when) { grid-column: 1; }
  .skills { grid-template-columns: 10rem minmax(0, 1fr); }
  .skills dd { margin: 0; }
}

.nowrap { white-space: nowrap; }

/* Page transitions, only for people who are fine with motion */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 200ms; }
  .vt-wafer { view-transition-name: case-wafer; }
  .vt-atlas { view-transition-name: case-atlas; }
  .vt-automation { view-transition-name: case-automation; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Print: mainly for the résumé */
@media print {
  :root { --bg: #fff; --panel: #fff; --line: #bbb; --ink: #000; --ink-2: #333; --emerald: #000; --copper: #000; color-scheme: light; }
  body { font-size: 10.5pt; }
  .site-header nav, .site-footer, .skip, .back, .next, .band { display: none !important; }
  a { text-decoration: none; }
  .r-section, .r-item { break-inside: avoid; }
}