/* ──────────────────────────────────────────────────────────
   slabs.css — ronbronson.dev, Slabs front page and project pages,
   in the Gallery wall colours: white ground, near-black ink, electric
   blue for headings, rules, status marks and links. Stands alone:
   pages that load it do not load faces.css, core.css or home.css and
   do not run the palette engine.
   Type: PP Neue Montreal (display), Hanken Grotesk (text), IBM Plex
   Mono (labels), all self-hosted in assets/fonts/gallery/.
   ────────────────────────────────────────────────────────── */
@font-face { font-family: "PP Neue Montreal"; src: url("fonts/gallery/PPNeueMontreal-Extrabold.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "PP Neue Montreal"; src: url("fonts/gallery/PPNeueMontreal-Semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/gallery/hanken-grotesk-variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/gallery/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/gallery/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
:root {
  --paper: #ffffff;
  --ink: #0b0b14;
  --blue: #1e4fff;
  --muted: #55556a;
  --hair: #d6d6de;
  --gut: clamp(16px, 3.9vw, 56px);
  --display: "PP Neue Montreal", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --text: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--text); font-size: 20px; line-height: 1.5; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--blue); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.s-wrap { max-width: 1440px; margin: 0 auto; }

/* Top */
.top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; padding: 32px var(--gut); }
.top__name { margin: 0; font-family: var(--display); font-weight: 800; font-size: 28px; letter-spacing: -.04em; line-height: 1.2; }
.top__name a { text-decoration: none; }
.top nav { display: flex; flex-wrap: wrap; gap: 8px 36px; font-family: var(--mono); font-size: 17px; }
.top nav a { text-decoration: none; }
.top nav a:hover { text-decoration: underline; }

/* Hero */
.hero { padding: 40px var(--gut) 96px; display: grid; gap: 40px; }
.hero h1 { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(88px, 16vw, 230px); line-height: .86; letter-spacing: -.06em; color: var(--blue); }
.hero p { margin: 0; max-width: 820px; font-size: clamp(22px, 2.2vw, 32px); font-weight: 300; line-height: 1.38; }
.hero .cta { display: flex; flex-wrap: wrap; gap: 12px 40px; font-family: var(--mono); font-size: 20px; color: var(--blue); }
.hero .cta a { text-decoration: none; }
.hero .cta a:hover { text-decoration: underline; }

/* Status mark */
.st { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 17px; line-height: 1.3; color: var(--blue); }
.st::before { content: ""; flex: 0 0 auto; width: 10px; height: 10px; background: var(--blue); }

/* Slabs */
.slabs { display: grid; gap: 56px; padding: 0 var(--gut); }
.slab { display: flex; gap: 48px; padding-top: 40px; border-top: 2px solid var(--blue); }
.slab:nth-of-type(even) { flex-direction: row-reverse; }
.slab__shot { flex: 0 0 auto; display: block; overflow: hidden; background: #ececf2; }
.slab__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.slab:nth-of-type(1) .slab__shot { width: 53%; aspect-ratio: 760 / 500; }
.slab:nth-of-type(2) .slab__shot { width: 36%; aspect-ratio: 520 / 640; }
.slab:nth-of-type(3) .slab__shot { width: 42%; aspect-ratio: 600 / 460; }
.slab:nth-of-type(3) .slab__shot img { object-position: 50% 30%; }
.slab:nth-of-type(4) .slab__shot { width: 28%; aspect-ratio: 400 / 560; }
.slab:nth-of-type(5) .slab__shot { width: 45%; aspect-ratio: 640 / 480; }
.slab:nth-of-type(5) .slab__shot img { object-position: 50% 30%; }
.slab__tx { flex: 1 1 0; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; }
.slab__tx > div { display: grid; gap: 20px; align-content: start; }
.slab h3 { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(40px, 4.2vw, 60px); line-height: .98; letter-spacing: -.045em; }
.slab h3 a { text-decoration: none; }
.slab p { margin: 0; font-size: 21px; line-height: 1.5; }
.slab__by { padding-top: 16px; border-top: 1px solid var(--hair); font-family: var(--mono); font-size: 16px; line-height: 1.45; color: var(--muted); }

/* Talk */
.talk { display: flex; align-items: center; gap: 48px; margin: 96px var(--gut) 0; padding-top: 40px; border-top: 2px solid var(--blue); }
.vid { position: relative; flex: 0 0 auto; width: 54%; aspect-ratio: 16 / 9; display: block; background: var(--ink); overflow: hidden; }
.vid img { width: 100%; height: 100%; object-fit: cover; }
.vid .play { position: absolute; left: 0; top: 0; width: 96px; height: 96px; background: var(--blue); display: grid; place-items: center; }
.vid .play::after { content: ""; border-left: 30px solid #fff; border-top: 18px solid transparent; border-bottom: 18px solid transparent; margin-left: 8px; }
.talk__tx { display: grid; gap: 18px; }
.talk__k { font-family: var(--mono); font-size: 16px; color: var(--blue); }
.talk__t { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(30px, 3.1vw, 44px); line-height: 1.02; letter-spacing: -.035em; }
.talk__t a { text-decoration: none; }
.talk__go { font-size: 20px; font-weight: 600; color: var(--blue); }

/* Sections */
.sec { padding: 120px var(--gut) 0; }
.sec__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 36px; }
.sec h2 { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(52px, 5.6vw, 80px); line-height: .95; letter-spacing: -.04em; }
.sec__note { margin: 0; max-width: 460px; font-size: 21px; line-height: 1.43; color: var(--muted); }

/* Also shipped */
.also { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 48px; }
.also__i { display: grid; gap: 10px; align-content: start; padding-top: 22px; border-top: 1px solid var(--hair); }
.also__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.also__i h3 { margin: 0; font-family: var(--display); font-weight: 600; font-size: 32px; line-height: 1.05; letter-spacing: -.03em; }
.also__i h3 a { text-decoration: none; }
.also__i .st { font-size: 15px; flex-shrink: 0; }
.also__i .st::before { width: 9px; height: 9px; }
.also__i p { margin: 0; font-size: 19px; line-height: 1.47; color: var(--muted); }
.also__more { grid-column: 1 / -1; font-family: var(--mono); font-size: 17px; color: var(--blue); }

/* npm */
.npm { border: 1px solid var(--blue); }
.pkg { display: grid; gap: 10px; padding: 28px 32px; }
.pkg + .pkg { border-top: 1px solid var(--blue); }
.pkg__head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pkg__cmd { font-family: var(--mono); font-weight: 600; font-size: 24px; color: var(--blue); }
.pkg__v { font-family: var(--mono); font-weight: 600; font-size: 17px; color: var(--muted); }
.pkg p { margin: 0; font-size: 19px; line-height: 1.47; }
.pkg__links { display: flex; gap: 20px; font-family: var(--mono); font-size: 15px; }

/* Writing */
.wlist { margin-top: 12px; }
.wrow { display: flex; align-items: baseline; gap: 32px; padding: 24px 0; border-top: 1px solid var(--hair); text-decoration: none; }
.wrow span { flex: 0 0 220px; font-family: var(--mono); font-size: 16px; color: var(--blue); }
.wrow b { font-family: var(--display); font-weight: 600; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.05; letter-spacing: -.03em; }
.wrow:hover b { color: var(--blue); }
.exp { list-style: none; margin: 0; padding: 0; font-family: var(--mono); font-size: 16px; }
.exp li { display: flex; flex-wrap: wrap; gap: 6px 20px; padding: 14px 0; border-top: 1px solid var(--hair); }
.exp b { font-family: var(--text); font-weight: 700; font-size: 20px; }
.exp .yr { color: var(--muted); }

/* Footer */
.foot { margin-top: 120px; padding: 40px var(--gut) 56px; border-top: 2px solid var(--blue); display: grid; gap: 8px; }
.foot h2 { margin: 0; font-family: var(--display); font-weight: 600; font-size: 26px; letter-spacing: -.04em; line-height: 1.2; }
.foot p { margin: 0; max-width: 820px; font-family: var(--mono); font-size: 16px; line-height: 1.45; color: var(--muted); }
.foot .digression { color: var(--blue); font-size: 17px; }
.foot .contact { margin-bottom: 18px; font-family: var(--mono); font-size: 17px; color: var(--ink); }

/* Project pages */
.project { padding: 40px var(--gut) 0; }
.project__title { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(88px, 16vw, 230px); line-height: .86; letter-spacing: -.06em; color: var(--blue); }
.project__lede { margin: 36px 0 0; max-width: 900px; font-size: clamp(22px, 2.2vw, 32px); font-weight: 300; line-height: 1.38; }
.project__lede--fi { margin: 16px 0 0; max-width: 900px; font-size: 19px; line-height: 1.5; color: var(--muted); }
.project__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 32px; padding: 14px 0; border-top: 2px solid var(--blue); border-bottom: 1px solid var(--hair); font-family: var(--mono); font-size: 16px; }
.project__meta .sep { color: var(--hair); }
.project__meta .live-link { color: var(--blue); }
.project > .figure { position: relative; margin: 40px 0 0; aspect-ratio: 1400 / 800; overflow: hidden; background: #ececf2; }
.project > .figure .ph { display: none; }
.project__body { max-width: 880px; padding-top: 56px; }
.project__body p, .project__body li { font-size: 21px; line-height: 1.6; }
.project__body p { margin: 0 0 22px; }
.project__body h2 { margin: 64px 0 18px; padding-top: 18px; border-top: 2px solid var(--blue); font-family: var(--display); font-weight: 800; font-size: clamp(36px, 3.6vw, 52px); line-height: 1; letter-spacing: -.04em; }
.project__body ul { margin: 0 0 22px; padding: 0; list-style: none; }
.project__body li { padding: 14px 0; border-top: 1px solid var(--hair); }
.project__body .live-link { font-family: var(--display); font-weight: 800; font-size: 40px; letter-spacing: -.03em; color: var(--blue); }
.figpair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 40px 0 48px; width: min(1328px, calc(100vw - 2 * var(--gut))); }
.figpair .figure { margin: 0; }
.figpair img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.figpair figcaption { margin-top: 10px; font-family: var(--mono); font-size: 14px; line-height: 1.45; color: var(--muted); }

@media (max-width: 900px) {
  .slab, .slab:nth-of-type(even) { flex-direction: column; gap: 24px; }
  .slab .slab__shot { width: 100% !important; aspect-ratio: 4 / 3 !important; }
  .talk { flex-direction: column; align-items: stretch; gap: 24px; }
  .vid { width: 100%; }
  .sec__head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .also { grid-template-columns: 1fr; }
  .wrow { flex-direction: column; gap: 6px; }
  .wrow span { flex: none; }
  .figpair { grid-template-columns: 1fr; }
  .sec { padding-top: 88px; }
  .pkg { padding: 22px 20px; }
  .pkg__cmd { font-size: 19px; }
}

/* Project page extras: tables, definition lists, reference cards, tiers */
.project__body table { display: block; overflow-x: auto; width: 100%; margin: 8px 0 32px; border-collapse: collapse; font-size: 18px; line-height: 1.45; }
.project__body th { text-align: left; padding: 10px 24px 10px 0; border-bottom: 2px solid var(--blue); font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.project__body td { padding: 12px 24px 12px 0; border-bottom: 1px solid var(--hair); vertical-align: top; }
.project__body dl { display: grid; grid-template-columns: minmax(140px, 220px) minmax(0, 1fr); margin: 8px 0 32px; font-size: 19px; line-height: 1.5; }
.project__body dt, .project__body dd { margin: 0; padding: 12px 0; border-top: 1px solid var(--hair); }
.project__body dt { padding-right: 24px; font-family: var(--mono); font-size: 16px; font-weight: 600; color: var(--blue); }
.rep-scale { margin: 8px 0 32px; font-size: 19px; line-height: 1.45; }
.rep-scale__head, .rep-scale__row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 24px; padding: 12px 0; border-top: 1px solid var(--hair); }
.rep-scale__head { border-top: 0; border-bottom: 2px solid var(--blue); font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--muted); }
.rep-scale .range { font-family: var(--mono); font-weight: 600; color: var(--blue); }
.rep-scale .label { font-weight: 700; }
.refs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 8px 0 32px; }
.ref { display: grid; gap: 8px; align-content: start; padding-top: 16px; border-top: 2px solid var(--blue); font-size: 18px; line-height: 1.45; }
.ref__type { font-family: var(--mono); font-size: 15px; color: var(--muted); }
.ref__name { font-family: var(--display); font-weight: 800; font-size: 30px; line-height: 1; letter-spacing: -.03em; }
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 8px 0 32px; }
.tier { display: grid; gap: 8px; align-content: start; padding-top: 16px; border-top: 2px solid var(--blue); font-size: 18px; line-height: 1.45; }
.tier__label { font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--blue); }
.tier__name { font-weight: 700; }
.ticker { display: inline-block; margin-right: 14px; font-family: var(--mono); font-size: .55em; font-weight: 600; letter-spacing: 0; color: var(--blue); vertical-align: middle; }
.signal { display: block; margin-top: 8px; font-family: var(--mono); font-size: 16px; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.project__body h3 { margin: 40px 0 14px; font-family: var(--display); font-weight: 800; font-size: 30px; line-height: 1.05; letter-spacing: -.03em; }
.project__body code { font-family: var(--mono); font-size: .88em; }
.project__body figcaption { margin-top: 10px; font-family: var(--mono); font-size: 14px; line-height: 1.45; color: var(--muted); }
.project__body a { overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .refs, .tiers { grid-template-columns: 1fr; }
  .project__body dl { grid-template-columns: 1fr; }
  .project__body dd { border-top: 0; padding-top: 0; }
  .rep-scale__head, .rep-scale__row { grid-template-columns: 88px minmax(0, 1fr); gap: 14px; }
  .project__body .live-link { font-size: 28px; }
}

/* Envelope contact button in the nav */
.nav-mail { display: inline-flex; align-items: center; color: inherit; }
.nav-mail svg { display: block; width: 22px; height: 22px; }
.nav-mail:hover { color: var(--blue); }

/* Project pages use the blue colorway from the Paper secondary-page mockup */
body.pg-blue { --paper: #1f2bff; --ink: #ffffff; --blue: #ffffff; --muted: #c9ccff; --hair: rgba(255, 255, 255, .32); }
body.pg-blue a:hover { color: #c9ccff; }
body.pg-blue .project__meta .sep { color: #7f86ff; }
body.pg-blue .project > .figure, body.pg-blue .figpair img { background: #fff; }
@media (max-width: 600px) { .project__title { font-size: 13vw; overflow-wrap: anywhere; } }

/* No hard dividers. Sections separate through space and type scale. */
.slab, .talk, .also__i, .wrow, .exp li, .foot, .slab__by, .ref, .tier, .project__body h2, .project__body li, .project__body dt, .project__body dd, .rep-scale__row { border-top: 0; }
.project__meta { border-top: 0; border-bottom: 0; padding: 0; }
.npm { border: 0; }
.pkg + .pkg { border-top: 0; }
.slabs { gap: 112px; }
.slab { padding-top: 0; }
.talk { padding-top: 0; margin-top: 128px; }
.foot { margin-top: 140px; }
.project__body h2 { padding-top: 0; margin-top: 72px; }
.project__body li { padding: 8px 0; }
.wrow { padding: 14px 0; }

/* ──────────────────────────────────────────────────────────
   Editorial type scale (Oct 28, 2026)
   One deliberate ladder for the front page and the project pages.
   Colours come from the variables, so the white front page and the
   blue project pages (body.pg-blue) both work.

   Display, PP Neue Montreal
     h1  page title         .hero h1, .project__title (unchanged above)
     h2  section head       .sec h2 (front), .project__body h2
     h3  item / subhead     .slab h3, .talk__t, .also__i h3, .wrow__t,
                            .exp__t, .project__body h3, .writing-title
     h4  inner item name    .ref__name, .tier__name, .surface h3
   Text, Hanken Grotesk
     lede        .hero p, .project__lede             300, largest
     standfirst  .project__lede--fi, .pitch, .sec__note, .key, .kicker
     body        .slab p, .project__body p / li
     note        .also__i p, .reading, .measures, .ref__spec, .tier__copy
   Mono, IBM Plex Mono
     meta        .st, .slab__by, .talk__k, .wrow__d, .writing-meta,
                 .project__meta, .tech-line, .stack-line, figcaption
     label       th, dt, .tier__label, .ref__type, .pitch .label,
                 .rep-scale__head
   ────────────────────────────────────────────────────────── */
:root {
  --t-lede: clamp(24px, 2.3vw, 34px);
  --t-stand: clamp(21px, 1.65vw, 25px);
  --t-body: 20px;
  --t-note: 17px;
  --t-meta: 15px;
  --t-label: 13.5px;
  --t-h2-front: clamp(48px, 5.4vw, 80px);
  --t-h2: clamp(38px, 3.9vw, 56px);
  --t-h3: clamp(26px, 2.3vw, 32px);
  --t-h4: 23px;
}
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Lede: the first read, light and large */
.hero p, .project__lede { font-family: var(--text); font-weight: 300; font-size: var(--t-lede); line-height: 1.32; letter-spacing: -.012em; }
.project__lede { margin-top: 40px; max-width: 30em; }

/* Standfirst: a step under the lede, regular weight, full ink */
.project__lede--fi, .sec__note, .pitch, .project__body .key, .project__body .kicker { font-family: var(--text); font-weight: 400; font-size: var(--t-stand); line-height: 1.45; letter-spacing: -.005em; }
.project__lede--fi { margin-top: 18px; max-width: 36em; color: var(--muted); }
.sec__note { color: var(--ink); max-width: 30em; }
.pitch { display: grid; gap: 10px; margin: 0 0 8px; max-width: 34em; font-weight: 500; }
.project__body .key, .project__body .kicker { margin: 28px 0 22px; max-width: 34em; font-weight: 500; }

/* Body */
.slab p:not(.slab__by) { font-size: var(--t-body); line-height: 1.55; }
.project__body p, .project__body li { font-size: var(--t-body); line-height: 1.62; }
.project__body { max-width: 860px; }
.project__body p, .project__body ul, .project__body ol, .project__body dl, .project__body table, .project__body .rep-scale { max-width: 38em; }
.project__body table { max-width: 100%; }
.project__body li b, .project__body p > b:first-child { font-weight: 700; }
.project__body ol { margin: 0 0 22px; padding-left: 1.4em; }
.project__body ol li::marker { font-family: var(--mono); font-size: var(--t-meta); font-weight: 600; color: var(--blue); }

/* Notes: supporting text, smaller and muted */
.also__i p, .project__body .reading, .project__body .measures, .ref__spec, .tier__copy, .pkg p, .exp li > a { font-family: var(--text); font-size: var(--t-note); line-height: 1.52; }
.also__i p { color: var(--muted); }
.project__body .measures { margin-bottom: 14px; }
.project__body .reading { margin: 4px 0 28px; color: var(--muted); }
.ref__spec, .tier__copy { color: var(--muted); }

/* Display h2: section heads */
.sec h2 { font-size: var(--t-h2-front); line-height: .95; letter-spacing: -.042em; }
.project__body h2 { margin: 88px 0 20px; font-size: var(--t-h2); font-weight: 800; line-height: .98; letter-spacing: -.04em; }
.project__body > h2:first-child, .project__body > .pitch + h2 { margin-top: 56px; }

/* Display h3: item titles and subheads. Semibold, so they sit clearly under h2 */
.project__body h3, .writing-title { margin: 48px 0 12px; font-family: var(--display); font-weight: 600; font-size: var(--t-h3); line-height: 1.08; letter-spacing: -.025em; }
.project__body h2 + h3 { margin-top: 28px; }
.also__i h3 { font-size: clamp(26px, 2.2vw, 32px); }
.talk__t { font-weight: 800; }
.wrow__t { margin: 0; font-family: var(--display); font-weight: 600; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.08; letter-spacing: -.028em; }
.wrow:hover .wrow__t { color: var(--blue); }
.exp li { align-items: baseline; }
.exp__t { margin: 0; font-family: var(--display); font-weight: 600; font-size: 24px; line-height: 1.1; letter-spacing: -.02em; }
.pkg__cmd { margin: 0; line-height: 1.25; }
.writing-list { list-style: none; padding: 0; }
.project__body .writing-list li { display: grid; gap: 6px; padding: 14px 0; }
.writing-title { margin: 0; }
.writing-title a { text-decoration: none; }
.writing-title a:hover { text-decoration: underline; }

/* Display h4 tier: names inside cards and tiers */
.ref__name, .tier__name, .surface h3 { font-family: var(--display); font-weight: 600; font-size: var(--t-h4); line-height: 1.15; letter-spacing: -.015em; }
.ref__name { font-weight: 800; font-size: 28px; line-height: 1; letter-spacing: -.03em; }
.surface { margin: 0 0 8px; }
.surface h3 { margin: 36px 0 10px; font-size: var(--t-h4); }

/* Meta: mono, small, muted */
.slab .slab__by, .talk__k, .wrow__d, .writing-meta, .project__meta, .tech-line, .stack-line, .project__body figcaption, .figpair figcaption { font-family: var(--mono); font-weight: 400; font-size: var(--t-meta); line-height: 1.5; letter-spacing: 0; color: var(--muted); }
.talk__k { margin: 0; }
.wrow__d { flex: 0 0 220px; color: var(--blue); }
.project__meta { margin-top: 36px; color: var(--ink); }
.project__body .tech-line, .project__body .stack-line { margin: -6px 0 28px; }
.st { font-size: var(--t-meta); }

/* Labels: the lowest tier, mono semibold, slightly tracked */
.project__body th, .project__body dt, .tier__label, .ref__type, .pitch .label, .rep-scale__head { font-family: var(--mono); font-weight: 600; font-size: var(--t-label); line-height: 1.4; letter-spacing: .03em; }
.project__body th, .rep-scale__head, .ref__type, .pitch .label { color: var(--muted); }
.project__body dt, .tier__label { color: var(--blue); }
.project__body dd { font-size: var(--t-note); line-height: 1.52; }
.project__body td { font-size: var(--t-note); }
.project__body dt { padding-top: 15px; }

@media (max-width: 900px) {
  :root { --t-body: 18px; --t-note: 16px; --t-meta: 14px; --t-label: 13px; --t-h4: 21px; }
  .project__body h2 { margin-top: 64px; }
  .project__body h3 { margin-top: 40px; }
  .wrow__d { flex: none; }
  .exp__t { font-size: 22px; }
  .ref__name { font-size: 24px; }
  .project__body .reading { margin-bottom: 22px; }
}

/* 404 */
.e404__links { margin: 28px 0 120px; font-family: var(--mono); font-size: 18px; }

/* Closing call to action: heading, subhead, the ask, one email button */
.reach { padding-top: 160px; max-width: 1100px; }
.reach__h { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(56px, 8vw, 128px); line-height: .9; letter-spacing: -.05em; color: var(--blue); }
.reach__sub { margin: 32px 0 0; max-width: 900px; font-family: var(--text); font-weight: 400; font-size: clamp(24px, 2.3vw, 32px); line-height: 1.38; color: var(--ink); }
.reach__ask { margin: 24px 0 0; max-width: 780px; font-family: var(--text); font-size: 21px; line-height: 1.55; color: var(--muted); }
.reach__btn { display: inline-flex; align-items: center; gap: 12px; margin-top: 36px; padding: 18px 30px; background: var(--blue); color: #fff; font-family: var(--display); font-weight: 800; font-size: 24px; letter-spacing: -.02em; text-decoration: none; }
.reach__btn::after { content: ""; width: 22px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Crect x='2.5' y='5' width='19' height='14'/%3E%3Cpath d='M3 6l9 7 9-7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Crect x='2.5' y='5' width='19' height='14'/%3E%3Cpath d='M3 6l9 7 9-7'/%3E%3C/svg%3E") center / contain no-repeat; }
.reach__btn:hover { background: var(--ink); color: var(--paper); }
@media (max-width: 760px) { .reach { padding-top: 104px; } .reach__ask { font-size: 18px; } .reach__btn { font-size: 21px; padding: 16px 24px; } }

/* ──────────────────────────────────────────────────────────
   Faculty and serious play front page (Oct 28, 2026)
   The call to action leads the front page; research fields,
   teaching, faculty page, talks page and the unlinked more page.
   ────────────────────────────────────────────────────────── */
.nav-gh { display: inline-flex; align-items: center; color: inherit; }
.nav-gh svg { display: block; width: 22px; height: 22px; }
.nav-gh:hover { color: var(--blue); }
.top nav { align-items: center; }
.top nav a[aria-current="page"] { color: var(--blue); }

.hero--reach { gap: 0; padding-bottom: 72px; }
.hero--reach h1 { font-size: clamp(64px, 11.5vw, 176px); line-height: .88; letter-spacing: -.055em; max-width: 11ch; }
.hero--reach p { margin-top: 40px; max-width: 30em; }
.hero--reach .hero__ask { margin-top: 22px; max-width: 38em; font-weight: 400; font-size: var(--t-stand); line-height: 1.5; color: var(--muted); }
.hero--reach .reach__btn { justify-self: start; margin-top: 36px; }

.sec--tight { padding-top: 32px; padding-bottom: 104px; }
.sec__link { font-family: var(--mono); font-size: 17px; color: var(--blue); }
.fields { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 0; }
.fields li { display: flex; align-items: baseline; }
.fields li + li::before { content: "/"; margin: 0 .35em; font-family: var(--display); font-weight: 600; font-size: clamp(32px, 3.6vw, 52px); color: var(--blue); }
.fields h3 { margin: 0; font-family: var(--display); font-weight: 600; font-size: clamp(32px, 3.6vw, 52px); line-height: 1.05; letter-spacing: -.035em; }
.fields--page h3, .fields--page li + li::before { font-size: clamp(28px, 2.8vw, 40px); }

.courses { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.courses li { display: flex; align-items: baseline; gap: 28px; }
.courses__c { flex: 0 0 120px; font-family: var(--mono); font-size: var(--t-meta); color: var(--blue); }
.courses h3 { margin: 0; font-family: var(--display); font-weight: 600; font-size: var(--t-h3); line-height: 1.1; letter-spacing: -.025em; }
.courses h3 a { text-decoration: none; }
.courses h3 a:hover { text-decoration: underline; }

/* Faculty page */
.fac { padding: 40px var(--gut) 0; }
.fac__h { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(80px, 14vw, 210px); line-height: .86; letter-spacing: -.06em; color: var(--blue); }
.fac__lede { margin: 40px 0 0; max-width: 30em; font-weight: 300; font-size: var(--t-lede); line-height: 1.32; letter-spacing: -.012em; }
.fac__dek { margin: 18px 0 0; max-width: 34em; font-weight: 500; font-size: var(--t-stand); line-height: 1.45; }
.fac__photo { margin: 56px 0 0; width: min(980px, 100%); height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.fac__sec { margin-top: 104px; max-width: 980px; }
.fac__sec h2 { margin: 0 0 28px; font-family: var(--display); font-weight: 800; font-size: var(--t-h2); line-height: .98; letter-spacing: -.04em; }
.fac__sub { margin: 48px 0 18px; font-family: var(--mono); font-weight: 600; font-size: var(--t-label); letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }
.fac__sec h2 + .fac__sub { margin-top: 8px; }
.fac__more { margin: 0; font-family: var(--mono); font-size: 18px; color: var(--blue); }
.items { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
.item { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 24px; align-items: baseline; }
.item__code { font-family: var(--mono); font-size: var(--t-meta); color: var(--blue); }
.item__t { margin: 0; font-family: var(--display); font-weight: 600; font-size: var(--t-h3); line-height: 1.1; letter-spacing: -.025em; }
.item__t a { text-decoration: none; }
.item__t a:hover { text-decoration: underline; }
.item__meta { margin: 6px 0 0; font-family: var(--mono); font-size: var(--t-meta); color: var(--muted); }
.item__d { margin: 8px 0 0; max-width: 36em; font-size: var(--t-note); line-height: 1.52; }

/* Talks page */
.talk--first { margin-top: 64px; }
.tyr { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; padding: 96px var(--gut) 0; }
.tyr__h { margin: 0; font-family: var(--display); font-weight: 800; font-size: var(--t-h2-front); line-height: .9; letter-spacing: -.045em; color: var(--blue); }
.tlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 34px; max-width: 920px; }
.tlist li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 24px; align-items: baseline; }
.tlist__date { font-family: var(--mono); font-size: var(--t-meta); color: var(--blue); }
.tlist__t { margin: 0 0 6px; font-family: var(--display); font-weight: 600; font-size: var(--t-h3); line-height: 1.1; letter-spacing: -.025em; }
.tlist__m { margin: 0; font-size: var(--t-note); font-weight: 600; line-height: 1.45; }
.tlist__d { margin: 10px 0 0; max-width: 38em; font-size: var(--t-note); line-height: 1.55; color: var(--muted); }
.tlist__links { display: flex; gap: 18px; margin: 10px 0 0; font-family: var(--mono); font-size: var(--t-meta); color: var(--blue); }
.tnote { margin: 96px var(--gut) 0; font-family: var(--mono); font-size: 17px; }
.slabs--more { padding-top: 72px; }

@media (max-width: 900px) {
  .tyr { grid-template-columns: 1fr; gap: 20px; padding-top: 72px; }
  .tlist li, .item { grid-template-columns: 1fr; gap: 6px; }
  .courses li { flex-direction: column; gap: 4px; }
  .courses__c { flex: none; }
  .fac__sec { margin-top: 80px; }
  .fields li + li::before { margin: 0 .25em; }
}
@media (max-width: 600px) { .fac__h { font-size: 19vw; } .hero--reach h1 { font-size: 15.5vw; } .top nav { gap: 8px 22px; font-size: 16px; } }

/* Other projects: two columns, same size type for every description */
.op { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 40px 64px; }
.op__i { display: grid; gap: 10px; align-content: start; }
.op__t { margin: 0; font-family: var(--display); font-weight: 600; font-size: var(--t-h3); line-height: 1.08; letter-spacing: -.025em; }
.op__t a { text-decoration: none; }
.op__t a[data-shot] { background-image: linear-gradient(var(--blue), var(--blue)); background-size: 100% 3px; background-position: 0 100%; background-repeat: no-repeat; padding-bottom: 2px; }
.op__t a:hover { color: var(--blue); }
.op__d { margin: 0; max-width: 30em; font-family: var(--text); font-size: var(--t-note); line-height: 1.52; color: var(--muted); }
.shot-pop { position: fixed; left: 0; top: 0; z-index: 50; width: 420px; pointer-events: none; opacity: 0; transition: opacity .12s; background: var(--ink); box-shadow: 0 18px 40px rgba(11, 11, 20, .28); }
.shot-pop.is-on { opacity: 1; }
.shot-pop img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }
@media (max-width: 900px) { .op { grid-template-columns: 1fr; gap: 28px; } }

/* Mention: quote type in the .dev house style */
.mention { padding-top: 128px; }
.mq { margin: 0; display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px 32px; max-width: 1180px; }
.mq blockquote { grid-column: 2; margin: 0; position: relative; }
.mq blockquote::before { content: "\201C"; position: absolute; left: -132px; top: -.08em; width: 120px; text-align: right; font-family: var(--display); font-weight: 800; font-size: clamp(120px, 12vw, 180px); line-height: .8; color: var(--blue); }
.mq blockquote p { margin: 0; font-family: var(--display); font-weight: 600; font-size: clamp(32px, 3.6vw, 54px); line-height: 1.04; letter-spacing: -.03em; }
.mq figcaption { grid-column: 2; margin-top: 22px; font-family: var(--mono); font-size: var(--t-meta); line-height: 1.5; color: var(--muted); }
.mq figcaption b { font-family: var(--text); font-weight: 700; font-size: var(--t-note); color: var(--ink); }
@media (max-width: 760px) {
  .mq { grid-template-columns: 1fr; }
  .mq blockquote, .mq figcaption { grid-column: 1; }
  .mq blockquote { padding-top: 64px; }
  .mq blockquote::before { left: -4px; top: 0; width: auto; text-align: left; font-size: 120px; }
}

/* About: speaking block. Offerings page. */
.fac__p, .off__p { margin: 0 0 24px; max-width: 34em; font-family: var(--text); font-size: var(--t-stand); line-height: 1.5; }
.fac__talk { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 28px; align-items: end; margin-top: 8px; }
.fac__talk .vid { width: 100%; }
.fac__links { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 28px 0 0; font-family: var(--mono); font-size: 18px; color: var(--blue); }
.off__i { margin-top: 104px; max-width: 980px; }
.off__i h2 { margin: 0 0 20px; font-family: var(--display); font-weight: 800; font-size: var(--t-h2); line-height: .98; letter-spacing: -.04em; }
.off__i .reach__btn { margin-top: 8px; }
.off .fac__lede { max-width: 32em; }
@media (max-width: 900px) { .fac__talk { grid-template-columns: 1fr; } .off__i { margin-top: 80px; } }
.off__btn { margin-top: 36px; }
.courses__t { margin: 6px 0 0; font-family: var(--mono); font-size: var(--t-meta); color: var(--muted); }
.courses__t a { color: var(--blue); }

/* Sticky header: the name and nav stay at the top while you scroll */
.top { position: sticky; top: 0; z-index: 40; background: var(--paper); transition: padding .2s ease, box-shadow .2s ease; }
.top.is-stuck { padding-top: 14px; padding-bottom: 14px; box-shadow: 0 1px 0 var(--hair); }
.top.is-stuck .top__name { font-size: 24px; }
@media (prefers-reduced-motion: reduce) { .top { transition: none; } }
@media (max-width: 600px) {
  .top.is-stuck { padding-top: 10px; padding-bottom: 10px; gap: 6px 16px; }
  .top.is-stuck .top__name { font-size: 20px; }
  .top.is-stuck nav { gap: 6px 12px; font-size: 13.5px; }
  .top.is-stuck .nav-gh svg, .top.is-stuck .nav-mail svg { width: 18px; height: 18px; }
}

/* Work with me and Digital Statecraft: Ron's copy */
.off__h { margin: 0; max-width: 13ch; font-family: var(--display); font-weight: 800; font-size: clamp(56px, 8.4vw, 132px); line-height: .9; letter-spacing: -.05em; color: var(--blue); }
.off__sub { margin: -6px 0 22px; font-family: var(--display); font-weight: 600; font-size: var(--t-h3); line-height: 1.12; letter-spacing: -.025em; color: var(--blue); }
.off__stand { margin: 40px 0 32px; max-width: 22ch; font-family: var(--display); font-weight: 800; font-size: clamp(32px, 3.6vw, 52px); line-height: 1.02; letter-spacing: -.035em; }
.off__go { margin: 8px 0 0; font-family: var(--display); font-weight: 800; font-size: clamp(24px, 2.2vw, 32px); letter-spacing: -.025em; }
.off__go a { color: var(--blue); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.off__go a:hover { color: var(--ink); }
.topics { list-style: none; margin: 8px 0 36px; padding: 0; display: grid; gap: 26px; max-width: 900px; }
.topics li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 8px 40px; align-items: baseline; }
.topics h3, .topics h4 { margin: 0; font-family: var(--display); font-weight: 600; font-size: var(--t-h3); line-height: 1.1; letter-spacing: -.025em; }
.topics p { margin: 0; font-size: var(--t-body); line-height: 1.5; }
@media (max-width: 760px) { .topics li { grid-template-columns: 1fr; } }
.off__h3 { margin: 72px 0 24px; font-family: var(--display); font-weight: 800; font-size: clamp(30px, 3vw, 44px); line-height: 1; letter-spacing: -.035em; }
.wlinks { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 24px; }
/* Viperball: one pixel sprite as the picture */
.slab--sprite .slab__shot { background: #0b3d2e; display: grid; place-items: center; }
.slab .slab--sprite .slab__shot img, .slab--sprite .slab__shot img { width: 62%; height: auto; object-fit: contain; image-rendering: pixelated; image-rendering: crisp-edges; }
.slabs { padding-top: 120px; }
.slab:nth-of-type(6) .slab__shot { width: 44%; aspect-ratio: 640 / 460; }
.slab:nth-of-type(7) .slab__shot { width: 46%; aspect-ratio: 640 / 460; }
.slab:nth-of-type(8) .slab__shot { width: 32%; aspect-ratio: 520 / 640; }
.slab:nth-of-type(2) .slab__shot { width: 48%; aspect-ratio: 16 / 10; }

/* Colophon: always small and monospaced, on every page and every site. */
.foot h2 { font-family: var(--mono); font-weight: 600; font-size: 12px; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; }
.foot p, .foot .digression { font-family: var(--mono); font-size: 13px; line-height: 1.55; }

/* Social row: the same icons as .design and the masthead, above the colophon. */
.hx-icons { display: flex; flex-wrap: wrap; gap: 12px 20px; margin: 0 0 28px; }
.hx-i { display: inline-flex; width: 22px; height: 22px; color: var(--ink); }
.hx-i svg { width: 100%; height: 100%; }
.hx-i:hover { color: var(--blue); }

/* ──────────────────────────────────────────────────────────
   Serious games studio front page (1 November 2026), from the canvas
   board ".dev as a serious games studio". On 2 November the offer band
   and closing ask moved back to work-with-me.html, so their styles are
   gone; the split hero, things made, participatory work and teaching
   and talks remain.
   ────────────────────────────────────────────────────────── */
.reach__btn--go::after { display: none; }
.hero--split { grid-template-columns: 7fr 5fr; gap: 40px 72px; align-items: end; padding-top: 56px; }
.hero--split h1 { font-size: clamp(72px, 9.2vw, 132px); line-height: .86; letter-spacing: -.045em; color: var(--ink); }
.hero--split h1 span { color: var(--blue); }
.hero--split p { font-size: clamp(21px, 1.8vw, 25px); font-weight: 400; line-height: 1.45; }
.hero--split .hero__ask { margin-top: 20px; font-size: 20px; color: var(--muted); }
.hero--split .reach__btn { margin-top: 28px; }

.made h2 { margin-bottom: 8px; }
.grp { margin: 48px 0 8px; font-family: var(--display); font-weight: 600; font-size: 28px; letter-spacing: -.02em; }
.rows { list-style: none; margin: 0; padding: 0; }
.row { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 40px; padding: 26px 0; align-items: start; }
.row__shot { display: block; background: #ececf2; }
.row__shot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }
.row h3 { margin: 0 0 10px; font-family: var(--display); font-weight: 800; font-size: clamp(30px, 2.8vw, 38px); line-height: 1; letter-spacing: -.035em; }
.row h3 a { text-decoration: none; }
.row p { margin: 0 0 10px; max-width: 40em; font-size: 19px; line-height: 1.5; }
.row .row__by { font-family: var(--mono); font-size: 15px; color: var(--blue); }
.made__more { margin: 24px 0 0; font-weight: 700; }

.tw { background: var(--ink); color: #fff; margin-top: 104px; padding: 88px var(--gut) 96px; }
.tw a { color: #fff; }
.cap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 64px; margin-bottom: 64px; }
.cap h3 { margin: 0 0 8px; font-family: var(--display); font-weight: 600; font-size: 30px; line-height: 1.1; letter-spacing: -.02em; color: #8fa6ff; }
.cap p { margin: 0; font-size: 19px; line-height: 1.5; }
.tl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 48px; }
.tl__y { display: block; margin-bottom: 8px; font-family: var(--display); font-weight: 800; font-size: 44px; line-height: 1; color: #8fa6ff; }
.tl h3 { margin: 0 0 8px; font-family: var(--display); font-weight: 600; font-size: 25px; line-height: 1.1; letter-spacing: -.02em; }
.tl p { margin: 0; font-size: 17px; line-height: 1.5; color: #dcdce6; }

.tr { display: grid; grid-template-columns: 5fr 7fr; gap: 40px 72px; padding: 96px var(--gut) 0; }
.tr h2 { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(40px, 4vw, 56px); line-height: .92; letter-spacing: -.035em; }
.tr__vid { width: 100%; margin-top: 40px; }
.tr .talk__go { display: inline-block; margin-top: 16px; }


@media (max-width: 860px) {
  .hero--split, .row, .cap, .tr { grid-template-columns: 1fr; }
  .tl { grid-template-columns: 1fr; }
  .tw { margin-top: 72px; }
}


/* Wargaming and agent experience, spelled out before the projects
   (2 November 2026). Two halves of prose, each with its own posts. */
.sig { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 72px; padding: 24px var(--gut) 0; }
.sig h2 { margin: 0 0 22px; font-family: var(--display); font-weight: 800; font-size: clamp(40px, 4.2vw, 60px); line-height: .95; letter-spacing: -.04em; color: var(--blue); }
.sig__i > p { margin: 0 0 16px; font-size: 21px; line-height: 1.5; max-width: 34em; }
.sig__w { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; }
.sig__w a { font-family: var(--display); font-weight: 600; font-size: 21px; line-height: 1.25; letter-spacing: -.015em; }
.sig .sig__go { margin-top: 26px; font-family: var(--display); font-weight: 800; font-size: 26px; letter-spacing: -.03em; }
.sig .sig__go a { color: var(--blue); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.sig + .sec { padding-top: 104px; }
@media (max-width: 860px) { .sig { grid-template-columns: 1fr; } }