Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/quarterback/dev-site. dev-site-five-kappa.vercel.app
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628/* ────────────────────────────────────────────────────────── 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; } }
/* Point of view in three (3 November 2026): tabletop exercises, agent experience, forward deployed design. The tech stack follows the tools. */.sig--three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 48px; }.sig--three h2 { font-size: clamp(34px, 3.2vw, 46px); }.sig--three .sig__i > p { font-size: 19px; }.sig__cite { font-family: var(--mono); font-size: 15px !important; color: var(--muted); }.sig__cite a { color: var(--ink); }.stack h2 { margin-bottom: 32px; }.stack__l { margin: 0; display: grid; gap: 0; }.stack__l div { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; padding: 14px 0; }.stack__l dt { font-family: var(--mono); font-size: 16px; color: var(--blue); padding-top: 3px; }.stack__l dd { margin: 0; font-family: var(--display); font-weight: 600; font-size: 24px; line-height: 1.3; letter-spacing: -.02em; }@media (max-width: 1100px) { .sig--three { grid-template-columns: 1fr; } }@media (max-width: 760px) { .stack__l div { grid-template-columns: 1fr; gap: 4px; } .stack__l dd { font-size: 20px; } }
/* Applied R&D content in the Slabs layout (3 November 2026): writing by theme, the teaching pointer. No dividers. */.wr2 h2 { margin-bottom: 32px; }
.wr2__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 56px; }.wr2__grid h3 { margin: 0 0 12px; font-family: var(--mono); font-weight: 600; font-size: 16px; color: var(--blue); text-transform: uppercase; letter-spacing: .06em; }.wr2__grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }.wr2__grid a { font-family: var(--display); font-weight: 600; font-size: 21px; line-height: 1.25; letter-spacing: -.015em; }
.foot__teach { font-family: var(--mono); font-size: 16px; }
@media (max-width: 1000px) { @media (max-width: 860px) { .wr2__grid { grid-template-columns: 1fr; } }
/* Short summary on featured project pages. Space, no rules. */.glance { max-width: 900px; margin: 48px 0 0; display: grid; gap: 16px; }.glance div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 20px; }.glance dt { font-family: var(--mono); font-size: 15px; color: var(--blue); padding-top: 4px; }.glance dd { margin: 0; font-size: 19px; line-height: 1.5; }@media (max-width: 600px) { .glance div { grid-template-columns: 1fr; gap: 2px; } }
/* How I build: the agent-team method first, the stack as one small line. */.build h2 { margin-bottom: 28px; }.build__lede { margin: 0 0 16px; max-width: 40em; font-size: 22px; line-height: 1.5; }.build__on { margin: 28px 0 0; max-width: 60em; font-family: var(--mono); font-size: 15px; line-height: 1.6; color: var(--muted); }.build__on span { color: var(--blue); margin-right: 12px; }
/* Colophon: facts first, labels bold, the digression set apart below */.foot p b { display: inline-block; min-width: 6.5em; font-weight: 600; }.foot p.digression { margin-top: 1.2em; }