/* mohamed.ai — Iteration I B's skeleton (hero compresses into the reading bar, page becomes the article) on H's white ground, F's name with the accent full stop, a frame that uses the screen, black + white + ONE accent per topic. Hairline joints, no rounding, no lattice. Every figure is scoped to its data-component. */ /* ---------- tokens ---------- */ :root { --paper: #ffffff; --stone: #f5f5f4; --ink: #121212; --ink-2: #3f3f3d; --ink-3: #6a6a67; --line: #d9d9d6; /* one accent per topic; the page picks its own via data-topic on , rows via data-topic on themselves */ --c-eldercare: #1e3fa8; --c-eldercare-dark: #8fa3f0; --c-ai: #0f766e; --c-ai-dark: #5fd3c8; --c-company: #b3261e; --c-company-dark: #f08a80; --c-reading: #b45309; --c-reading-dark: #f5b455; --accent: var(--c-eldercare); --accent-dark: var(--c-eldercare-dark); /* the same accent, lifted for use on the black Answer panel */ --serif-name: 'Instrument Serif', 'Iowan Old Style', Georgia, serif; --serif: 'Newsreader', 'Iowan Old Style', Georgia, serif; --mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace; --ease: cubic-bezier(.16, 1, .3, 1); /* the frame uses the screen: min(100vw − 2·48px, 1400px). --vw is set by JS to the real client width (no scrollbar) and falls back to 100vw. */ --gutter: 48px; --vw: 100vw; --frame: min(calc(var(--vw) - 2 * var(--gutter)), 1400px); --prose-w: 720px; --measure: 660px; --pad: 30px; --side: calc((var(--frame) - var(--prose-w)) / 2); --bar: 56px; --bar-name: 280px; --colL: 60%; --h1: 336px; --h2: 240px; --hero-d: calc(var(--h1) + var(--h2) - var(--bar)); --name-fs: clamp(84px, 7.2vw, 110px); --p: 0; --read: 0; /* the lattice: B's 60px module, drawn only in the margins. --lat-k is its strength: 1 on first paint, settling to --lat-rest over ~1s (a registered property, so it transitions). */ --mod: 60px; --lat-rest: .5; --lat-k: 1; --lat-edge: 32px; /* the fold is sequenced: the featured row folds first over its own height (phase 2, p2), then the name/figure row folds into the bar (phase 1, p1). --k = h2 / hero-d, kept as a number because CSS cannot divide two lengths. Both phases stay 1:1 with the scroll. */ --k: .4615; --p2: clamp(0, calc(var(--p) / var(--k)), 1); --p1: clamp(0, calc((var(--p) - var(--k)) / (1 - var(--k))), 1); } @property --p { syntax: ''; inherits: true; initial-value: 0; } @property --lat-k { syntax: ''; inherits: true; initial-value: 1; } [data-topic="eldercare"] { --accent: var(--c-eldercare); --accent-dark: var(--c-eldercare-dark); } [data-topic="ai-agents"], [data-topic="agentic-ai"] { --accent: var(--c-ai); --accent-dark: var(--c-ai-dark); } [data-topic="company-building"] { --accent: var(--c-company); --accent-dark: var(--c-company-dark); } [data-topic="reading-list"] { --accent: var(--c-reading); --accent-dark: var(--c-reading-dark); } @media (max-width: 899px) { :root { --gutter: 24px; } } @media (max-width: 599px) { :root { --gutter: 12px; --pad: 20px; --lat-rest: .35; } } /* ---------- base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { background: var(--paper); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--bar) + 16px); } body { margin: 0; color: var(--ink); position: relative; font-family: var(--serif); font-size: 19px; line-height: 1.6; font-weight: 440; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; hanging-punctuation: first last; overflow-x: hidden; } a { color: inherit; } ::selection { background: var(--accent); color: #fff; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } h1, h2, h3 { margin: 0; font-weight: 400; } em { font-style: italic; } .skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff; padding: 8px 12px; z-index: 100; font-family: var(--mono); font-size: 12px; } .skip:focus { left: 8px; top: 8px; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---------- primitives: frame, cells, hairlines, labels ---------- */ .wrap { width: var(--frame); margin: 0 auto; } .pn { background: var(--paper); box-shadow: inset -1px 0 0 var(--line), inset 0 -1px 0 var(--line); } .rail { box-shadow: -1px 0 0 var(--line); } .rail-top { box-shadow: -1px 0 0 var(--line), 0 -1px 0 var(--line); } .gap { height: 48px; } .lab { font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); line-height: 1.2; font-variant-numeric: tabular-nums; } .lab b { font-weight: 500; color: var(--ink); } .lab .dot::before { content: "·"; margin: 0 .6em; color: var(--line); } .sw { display: inline-block; width: 8px; height: 8px; background: var(--accent); margin-right: 8px; vertical-align: 0; } .sw + .sw { margin-left: -4px; width: 6px; height: 6px; vertical-align: 1px; } /* a secondary topic: a smaller swatch beside the primary */ .tl { text-decoration: none; color: inherit; } .tl:hover { color: var(--accent); } @media (max-width: 599px) { .lg { display: none; } .lab { letter-spacing: .07em; } } /* ---------- the lattice: B's module, felt in the margins, never under a word ---------- A page-tall layer behind everything, its origin on the frame's left edge. A horizontal mask keeps it at full strength in the gutters and fades it to nothing 28px inside the frame, before the TOC text and the sidenote text begin. The TOC and margin cells are transparent so it shows in the article's side columns. In time: --lat-k goes 1 → --lat-rest over 1s (expo-out) once the page has painted. */ html { transition: --lat-k 1s var(--ease); } html.settled, html:not(.js) { --lat-k: var(--lat-rest); } body::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(to right, var(--line) 1px, transparent 1px), linear-gradient(to bottom, var(--line) 1px, transparent 1px); background-size: var(--mod) var(--mod); background-position: calc((var(--vw) - var(--frame)) / 2) 0; opacity: var(--lat-k); /* a clean boundary on the frame's outer rule: full strength there, fading to nothing toward the viewport edge; no lattice inside the frame at all */ -webkit-mask-image: linear-gradient(to right, transparent 0, #000 calc((var(--vw) - var(--frame)) / 2), transparent calc((var(--vw) - var(--frame)) / 2), transparent calc((var(--vw) + var(--frame)) / 2), #000 calc((var(--vw) + var(--frame)) / 2), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 calc((var(--vw) - var(--frame)) / 2), transparent calc((var(--vw) - var(--frame)) / 2), transparent calc((var(--vw) + var(--frame)) / 2), #000 calc((var(--vw) + var(--frame)) / 2), transparent 100%); } @media (max-width: 599px) { body::before { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--gutter), transparent var(--gutter), transparent calc(100% - var(--gutter)), #000 calc(100% - var(--gutter)), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 var(--gutter), transparent var(--gutter), transparent calc(100% - var(--gutter)), #000 calc(100% - var(--gutter)), transparent 100%); } } /* margin treatments (?margin=grid | vignette | both, default grid; add -strong for the darker vignette). The vignette is a second page-tall layer under the lattice: white at the frame edge, shading toward the viewport edge, never inside the frame. */ :root { --vig: #f2f2f0; } html[data-margin="vignette-strong"], html[data-margin="both-strong"] { --vig: #ebebe9; } body::after { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; display: none; background-image: linear-gradient(to right, var(--vig) 0, var(--paper) calc((var(--vw) - var(--frame)) / 2), var(--paper) calc((var(--vw) + var(--frame)) / 2), var(--vig) 100%); } html[data-margin^="vignette"] body::after, html[data-margin^="both"] body::after { display: block; } html[data-margin^="vignette"] body::before { display: none; } /* .lat-m used to draw the lattice inside a panel's padding; Addendum 3 wants a clean frame interior, so it is now only a stacking seam (content above any future layer). */ .lat-m { position: relative; } .lat-m > * { position: relative; z-index: 1; } /* ---------- the reading bar (essay page static, home compressed hero, phone float) ---------- */ .bar { position: sticky; top: 0; z-index: 40; height: var(--bar); background: var(--paper); } .bar-float { position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: var(--bar); background: var(--paper); opacity: clamp(0, (var(--p) - .55) * 2.86, 1); visibility: hidden; } html.compact .bar-float { visibility: visible; } .bar-in { position: relative; width: var(--frame); margin: 0 auto; height: var(--bar); display: grid; grid-template-columns: var(--bar-name) 1fr; box-shadow: -1px 0 0 var(--line); } .bar-in .pn { display: flex; align-items: center; height: var(--bar); padding: 0 24px; white-space: nowrap; overflow: hidden; min-width: 0; } .bar-name { font-family: var(--serif-name); font-size: 19px; line-height: 1; text-decoration: none; color: var(--ink); } .bar-name .dot, .name .dot { color: var(--accent); font-style: normal; } .bar-read { gap: 12px; } .bar-read .now { color: var(--ink-3); } .bar-read .t { font-weight: 500; color: var(--ink); font-size: 15px; overflow: hidden; text-overflow: ellipsis; } .bar-read .sep { color: var(--line); } .bar-read .sec { color: var(--ink-2); font-size: 15px; overflow: hidden; text-overflow: ellipsis; } .bar-read .mins { margin-left: auto; font-family: var(--mono); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); } .bar-links { display: flex; gap: 14px; margin-left: 18px; padding-left: 18px; box-shadow: -1px 0 0 var(--line); font-family: var(--mono); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; } .bar-links a { text-decoration: none; color: var(--ink-3); } .bar-links a:hover { color: var(--accent); } .prog { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; z-index: 3; background: var(--accent); transform-origin: left center; transform: scaleX(var(--read)); pointer-events: none; } .ticks { position: absolute; left: 0; right: 0; bottom: -1px; height: 6px; z-index: 3; pointer-events: none; } .ticks i { position: absolute; bottom: 0; width: 1px; height: 6px; background: var(--accent); opacity: .55; } .bar-float .prog, .bar-float .ticks { opacity: clamp(0, (var(--p) - .55) * 2.86, 1); } .pin .prog, .pin .ticks { opacity: clamp(0, 4 * var(--p1) - 3, 1); } html.essay .prog, html.essay .ticks { opacity: 1; } @media (max-width: 899px) { .bar-in { grid-template-columns: 160px 1fr; } .bar-in .pn { padding: 0 16px; } .bar-name { font-size: 17px; } .bar-read { gap: 8px; } .bar-read .now, .bar-read .mins, .bar-links { display: none; } .bar-read .t, .bar-read .sec { font-size: 14px; } /* one label on a phone: the current section (it reads "Introduction" until the reader enters one) */ .bar-read .t, .bar-read .sep { display: none; } } @media (min-width: 900px) and (max-width: 1159px) { .bar-in { grid-template-columns: 220px 1fr; } .bar-read .now { display: none; } } /* ---------- hero: flow mode (phones, tablets under 900, reduced motion) ---------- */ .pin { position: relative; z-index: 30; } .pin-in { position: relative; width: var(--frame); margin: 0 auto; box-shadow: -1px 0 0 var(--line); } .hp { position: relative; overflow: hidden; } .hp .in { height: 100%; position: relative; z-index: 1; } .hp-name { display: flex; flex-direction: column; justify-content: center; padding: 30px 20px 30px; } .name { font-family: var(--serif-name); font-size: 64px; line-height: .92; letter-spacing: -.01em; margin: 0 0 0 -.03em; } .name a { text-decoration: none; } .name .nb { display: block; } .tag .brevy { color: var(--accent); text-decoration: none; } .tag .brevy:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .tag { margin: 24px 0 0; font-size: 23px; line-height: 1.35; max-width: 30em; text-wrap: pretty; } .hp-fig .meta-a { position: relative; background: var(--accent); color: #fff; } .hp-panel .meta-a { background: var(--paper); color: var(--ink); } /* the topic panel (K's variant C): a 2×2 of topic cells in their own colours, filling the cell */ .pv { display: flex; flex-direction: column; height: 100%; min-height: 0; } .pv a { text-decoration: none; } .pv-c .grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1px; background: var(--line); min-height: 0; } .pv-c .topic.inert { cursor: default; } .pv-c .topic.inert:hover h3 { text-decoration: none; } .pv-c .topic { display: flex; flex-direction: column; padding: 16px 18px 18px; color: #fff; min-width: 0; min-height: 0; } .pv-c .topic .lab { color: rgba(255, 255, 255, .75); } .pv-c .topic h3 { font-family: var(--serif-name); font-size: 32px; line-height: 1; margin: auto 0 0; letter-spacing: -.006em; } /* Addendum 11: no one-liner; the name sits on the cell's bottom padding */ .pv-c .topic p { margin: 8px 0 0; font-style: italic; font-size: 15px; line-height: 1.35; color: rgba(255, 255, 255, .9); text-wrap: pretty; } .pv-c .topic:hover h3 { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; } .pv-c .topic[data-topic="eldercare"] { background: var(--c-eldercare); } .pv-c .topic[data-topic="ai-agents"], .pv-c .topic[data-topic="agentic-ai"] { background: var(--c-ai); } .pv-c .topic[data-topic="company-building"] { background: var(--c-company); } .pv-c .topic[data-topic="reading-list"] { background: var(--c-reading); } @media (max-width: 899px) { .pv-c .grid { grid-template-rows: repeat(2, minmax(150px, auto)); } .pv-c .topic h3 { font-size: 26px; } } @media (max-width: 599px) { .pv-c .topic { padding: 14px 14px; } .pv-c .topic h3 { font-size: 24px; } .pv-c .topic p { font-size: 14px; } } .hp-fig .meta-b { display: none; } .hp-feat .in { padding: 22px 20px 24px; } .hp-feat .lab { margin-bottom: 14px; white-space: nowrap; } /* unused since Addendum 9 (no eyebrow on the landing cell) */ .hp-feat h2 { font-family: var(--serif-name); font-size: 40px; line-height: .98; letter-spacing: -.008em; text-wrap: balance; margin: 0 0 12px -.02em; } .hp-feat h2 a { text-decoration: none; } .hp-feat h2 a:hover { color: var(--accent); } .hp-feat p { margin: 0; font-style: italic; font-size: 19px; line-height: 1.4; color: var(--ink-2); max-width: 32em; text-wrap: pretty; } .hp-go { display: block; text-decoration: none; } .hp-go .in { display: flex; align-items: center; gap: 16px; padding: 0 20px; height: 64px; } .hp-go .big { font-family: var(--serif-name); font-size: 40px; line-height: 1; color: var(--accent); transition: transform .5s var(--ease); } .hp-go .lab b { color: var(--accent); } .hp-go:hover .big { transform: translateY(5px); } /* ---------- hero: pinned mode (≥900px, motion allowed) — the signature moment ---------- Every cell's box is a calc() of --p. The sticky pin is only one bar tall; the cells overflow it, shrink 1:1 with the scroll (--hero-d = hero height − bar), and the compressed hero IS the bar. */ @media (min-width: 900px) and (prefers-reduced-motion: no-preference) { .pin { position: sticky; top: 0; height: var(--bar); pointer-events: none; } .pin-in { height: var(--bar); box-shadow: none; } .pin-in::before { content: ""; position: absolute; left: -1px; top: 0; width: 1px; z-index: 2; background: var(--line); height: calc(var(--h1) - (var(--h1) - var(--bar)) * var(--p1) + var(--h2) * (1 - var(--p2))); } .hp { position: absolute; pointer-events: auto; min-height: 0; } .hp-name { left: 0; top: 0; width: calc(var(--colL) - (var(--colL) - var(--bar-name)) * var(--p1)); height: calc(var(--h1) - (var(--h1) - var(--bar)) * var(--p1)); padding: calc(30px - 12px * var(--p1)) calc(32px - 8px * var(--p1)) calc(28px - 10px * var(--p1)); } .name { font-size: calc(var(--name-fs) - (var(--name-fs) - 19px) * var(--p1)); white-space: nowrap; } /* the sentence fades and collapses in the first ~40% of the fold, so only the name reaches the bar */ .tag { font-size: clamp(22px, 1.8vw, 27px); max-width: 28em; margin-top: clamp(0px, 28px * (1 - 2.5 * var(--p1)), 28px); max-height: clamp(0px, 150px * (1 - 2.5 * var(--p1)), 150px); opacity: clamp(0, 1 - 3 * var(--p1), 1); overflow: hidden; } .hp-fig { left: calc(var(--colL) - (var(--colL) - var(--bar-name)) * var(--p1)); top: 0; width: calc(100% - var(--colL) + (var(--colL) - var(--bar-name)) * var(--p1)); height: calc(var(--h1) - (var(--h1) - var(--bar)) * var(--p1)); } .hp-fig .meta-a { position: absolute; inset: 0; opacity: clamp(0, 1 - 2.2 * var(--p1), 1); } .hp-fig .meta-b { position: absolute; inset: 0; display: flex; align-items: center; gap: 12px; padding: 0 24px; white-space: nowrap; overflow: hidden; opacity: clamp(0, (var(--p1) - .75) * 4, 1); } html.compact .meta-a { pointer-events: none; } html:not(.compact) .meta-b { visibility: hidden; } .hp-feat, .hp-go { top: calc(var(--h1) - (var(--h1) - var(--bar)) * var(--p1)); height: calc(var(--h2) * (1 - var(--p2))); } .hp-feat { left: 0; width: var(--colL); } .hp-go { left: var(--colL); width: calc(100% - var(--colL)); } .hp-feat .in, .hp-go .in { opacity: clamp(0, 1 - 1.8 * var(--p2), 1); } .hp-feat .in { padding: 26px 32px 28px; display: flex; flex-direction: column; } .hp-feat h2 { font-size: clamp(38px, 3.4vw, 50px); } .hp-feat p { font-size: clamp(18px, 1.5vw, 21px); } .hp-go .in { flex-direction: column; align-items: flex-start; justify-content: space-between; height: 100%; padding: 14px 32px 26px; } .hp-go .big { font-size: 128px; line-height: .9; } /* the progress line and ticks ride the hero's current bottom edge, so they only ever sit on the bar */ .pin .prog, .pin .ticks { bottom: auto; top: calc(var(--h1) - (var(--h1) - var(--bar)) * var(--p1) + var(--h2) * (1 - var(--p2)) - 1px); } .pin .ticks { top: calc(var(--h1) - (var(--h1) - var(--bar)) * var(--p1) + var(--h2) * (1 - var(--p2)) - 5px); } .after { padding-top: var(--hero-d); } .bar-float { display: none; } } @media (min-width: 900px) and (max-width: 1159px) and (prefers-reduced-motion: no-preference) { :root { --h1: 330px; --h2: 210px; --name-fs: 70px; --bar-name: 220px; --k: .434; } .hp-name { padding: calc(24px - 8px * var(--p1)) calc(24px - 4px * var(--p1)) calc(22px - 6px * var(--p1)); } .hp-feat .in { padding: 20px 24px 22px; } .hp-feat h2 { font-size: 36px; } .hp-go .in { padding: 10px 24px 20px; } .hp-go .big { font-size: 96px; } .pv-c .topic h3 { font-size: 24px; } .pv-c .topic p { display: none; } .pv-c .topic { padding: 14px 16px; } .hp-fig .meta-b .now { display: none; } } @media (min-width: 1160px) { .hp-feat .in { padding-right: 48px; } } /* the scroll timeline that drives --p; JS writes --p inline where this is unsupported or in flow mode */ @supports (animation-timeline: scroll()) { @keyframes compress { from { --p: 0; } to { --p: 1; } } html.home:not(.flow) { animation: compress linear both; animation-timeline: scroll(root); animation-range: 0 var(--hero-d); } } html.essay { --p: 1; } /* ---------- article header (essay page only) ---------- */ .ah-eye { height: var(--bar); line-height: var(--bar); padding: 0 32px; white-space: nowrap; } .ah { display: grid; grid-template-columns: var(--colL) 1fr; } .ah-title { padding: 34px 32px 34px; } .ah-title h1 { font-family: var(--serif-name); font-size: clamp(44px, 5.4vw, 80px); line-height: .96; letter-spacing: -.01em; margin-left: -.02em; text-wrap: balance; } .ah-stand { padding: 30px 32px 28px; display: flex; flex-direction: column; } .ah-stand p { margin: 0; font-style: italic; font-size: 21px; line-height: 1.4; color: var(--ink-2); text-wrap: pretty; } .ah-stand .lab { margin-top: auto; padding-top: 22px; } @media (max-width: 899px) { .ah { grid-template-columns: 1fr; } .ah-eye { padding: 0 20px; } /* phones: the eyebrow keeps one line by dropping the secondary topic; if it still can't fit it wraps instead of overflowing */ .ah-eye .tl + .dot:has(+ .tl), .ah-eye .tl + .dot + .tl { display: none; } .ah-eye { white-space: normal; height: auto; min-height: var(--bar); line-height: 1.9; padding-top: 10px; padding-bottom: 8px; } .ah-title { padding: 24px 20px 20px; } .ah-title h1 { font-size: 44px; } .ah-stand { padding: 20px; } .ah-stand p { font-size: 19px; } .ah-stand .lab { padding-top: 16px; } } /* ---------- article body: TOC · prose (66ch) · sidenotes ---------- */ .art { display: grid; grid-template-columns: minmax(0, 1fr) min(var(--prose-w), 100%) minmax(0, 1fr); } .toc-cell { grid-column: 1; display: none; } .prose { grid-column: 2; position: relative; z-index: 1; padding: 44px var(--pad) 64px; min-width: 0; } .margin { grid-column: 3; } .toc { position: sticky; top: calc(var(--bar) + 28px); padding: 44px 16px 24px 24px; font-family: var(--mono); font-size: 12px; line-height: 1.4; } .toc .lab { margin-bottom: 14px; } .toc ol { list-style: none; margin: 0; padding: 0; } .toc li { margin: 0 0 9px; padding-left: 12px; position: relative; } .toc a { text-decoration: none; color: var(--ink-3); display: flex; gap: 10px; } .toc a .n { color: var(--line); } .toc a:hover { color: var(--ink); } .toc li.cur a { color: var(--ink); } .toc li.cur a .n { color: var(--accent); } .toc li.cur::before { content: ""; position: absolute; left: 0; top: 4px; width: 3px; height: 9px; background: var(--accent); } @media (min-width: 1160px) { .toc-cell { display: block; } } .prose > * { max-width: var(--measure); } .prose p { margin: 0 0 22px; text-wrap: pretty; } .prose p a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .lede { font-size: 22px; line-height: 1.5; } .prose h2 { margin: 56px 0 18px; font-size: 30px; font-weight: 500; letter-spacing: -.012em; line-height: 1.15; text-wrap: balance; scroll-margin-top: 12px; } /* html scroll-padding already clears the bar; keep the landing inside the section-detection line */ .prose h2 .sub { display: block; margin-top: 8px; font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); line-height: 1.2; } .punch { font-size: 27px; font-weight: 500; font-style: italic; letter-spacing: -.008em; line-height: 1.3; margin: 34px 0; padding-left: 22px; border-left: 2px solid var(--ink); text-wrap: pretty; } .closing { font-size: 24px; font-weight: 500; font-style: italic; line-height: 1.35; margin: 40px 0 0; } @media (max-width: 599px) { body { font-size: 17.5px; } .prose { padding-top: 30px; padding-bottom: 44px; } .prose h2 { font-size: 25px; margin-top: 44px; } .punch { font-size: 22px; padding-left: 16px; } .closing { font-size: 21px; } .lede { font-size: 19px; } } /* sidenotes: Tufte margin notes at ≥1160, tap-to-open footnotes below (CSS checkbox, no JS needed) */ .mn-tog { cursor: pointer; } .mn-tog sup, .sn sup { font-family: var(--mono); font-size: 10.5px; font-weight: 500; color: var(--accent); line-height: 0; vertical-align: super; margin-left: 1px; } .mn-cb { display: none; } .sn { display: none; margin: 10px 0 14px; padding: 10px 14px; background: var(--stone); font-size: 14px; line-height: 1.45; color: var(--ink-2); } .mn-cb:checked + .sn { display: block; } .mn-tog sup { padding: 0 3px; border-bottom: 1px dotted var(--accent); } .sn sup { margin-right: 5px; } @media (min-width: 1160px) { .sn { display: block; float: right; clear: right; width: calc(var(--side) - 44px); margin: 4px calc(-1 * var(--side) - 6px) 12px 0; padding: 4px 0 0; background: none; border-top: 1px solid var(--line); font-size: 13.5px; } .mn-tog { cursor: default; } .mn-tog sup { border-bottom: 0; padding: 0 1px; } } /* six problems list — a 3×2 walled block bleeding to the cell edges */ ol.problems { list-style: none; margin: 30px 0 30px calc(-1 * var(--pad)); padding: 0; max-width: none; width: calc(100% + 2 * var(--pad)); display: grid; grid-template-columns: repeat(3, 1fr); counter-reset: q; box-shadow: 0 -1px 0 var(--line); } ol.problems li { counter-increment: q; padding: 18px 20px 22px; position: relative; font-size: 15.5px; line-height: 1.45; color: var(--ink-2); } ol.problems li::before { content: counter(q, decimal-leading-zero); position: absolute; right: 16px; top: 18px; font-family: var(--mono); font-size: 11px; color: var(--ink-3); } ol.problems b { display: block; font-size: 21px; font-weight: 500; color: var(--ink); margin-bottom: 8px; letter-spacing: -.005em; } @media (max-width: 699px) { ol.problems { grid-template-columns: repeat(2, 1fr); } ol.problems li { padding: 14px 14px 16px; font-size: 14.5px; } ol.problems b { font-size: 18px; } } /* flavors / questions / recap / sources */ ul.flavors { list-style: none; margin: 26px 0 26px calc(-1 * var(--pad)); padding: 0; max-width: none; width: calc(100% + 2 * var(--pad)); display: grid; grid-template-columns: repeat(3, 1fr); box-shadow: 0 -1px 0 var(--line); } ul.flavors li { padding: 20px 20px 22px; font-size: 15.5px; line-height: 1.45; color: var(--ink-2); } ul.flavors b { display: block; font-size: 21px; font-weight: 500; color: var(--ink); margin: 12px 0 8px; } ul.flavors .sw { width: 14px; height: 14px; margin: 0; background: var(--paper); box-shadow: inset 0 0 0 1px var(--ink); position: relative; } ul.flavors .sw.dotted::after { content: ""; position: absolute; left: 5px; top: 5px; width: 4px; height: 4px; background: var(--ink); } ul.flavors .sw.dash { box-shadow: none; border: 1px dashed var(--ink); } @media (max-width: 699px) { ul.flavors { grid-template-columns: 1fr; } } ol.questions { list-style: none; margin: 24px 0 26px; padding: 0; counter-reset: oq; } ol.questions li { counter-increment: oq; display: grid; grid-template-columns: 40px 1fr; gap: 0 14px; padding: 14px 0; box-shadow: 0 -1px 0 var(--line); font-size: 17px; line-height: 1.5; color: var(--ink-2); } ol.questions li:last-child { box-shadow: 0 -1px 0 var(--line), 0 1px 0 var(--line); } ol.questions li::before { content: counter(oq, decimal-leading-zero); font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: .09em; padding-top: 8px; } ol.questions b { display: block; color: var(--ink); font-weight: 500; margin-bottom: 2px; } ul.recap { list-style: none; margin: 22px 0 0; padding: 0; } ul.recap li { position: relative; padding: 0 0 12px 24px; font-size: 18px; line-height: 1.5; } ul.recap li::before { content: ""; position: absolute; left: 0; top: 10px; width: 8px; height: 8px; background: var(--ink); } .sources { margin-top: 56px; padding-top: 18px; box-shadow: 0 -1px 0 var(--line); } .sources ol { margin: 12px 0 0; padding: 0 0 0 22px; font-size: 14px; line-height: 1.5; color: var(--ink-2); } .sources li { margin-bottom: 6px; padding-left: 4px; } .sources li::marker { font-family: var(--mono); color: var(--ink-3); font-size: 11px; } /* ---------- figures: shared chrome ---------- */ .fig { margin: 30px 0 30px calc(-1 * var(--pad)); width: calc(100% + 2 * var(--pad)); max-width: none; } .fig figcaption { padding: 12px var(--pad) 0; font-size: 14px; color: var(--ink-3); line-height: 1.45; } .fig-key { display: inline-flex; flex-wrap: wrap; gap: 6px 16px; } .fig-key span { display: inline-flex; align-items: center; gap: 7px; } .fig-key i { display: inline-block; width: 9px; height: 9px; box-shadow: inset 0 0 0 1px var(--ink); flex: none; } .fig-key i.fill { background: var(--accent); box-shadow: none; } .fig-key i.grey { background: var(--ink-3); box-shadow: none; } .fig-key i.dash { box-shadow: none; border: 1px dashed var(--ink); } svg line, svg rect, svg circle, svg path { vector-effect: non-scaling-stroke; } /* ---------- scrubbable figure chrome: a stage on stone beside a side column with Play · slider · stage buttons ---------- */ .fig-pod { display: grid; grid-template-columns: 1fr; box-shadow: 0 -1px 0 var(--line), 0 1px 0 var(--line); } .pod-stage { background: var(--stone); padding: 20px 24px; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 -1px 0 var(--line); } .pod-stage svg { width: 100%; height: auto; max-height: 520px; display: block; } .pod-side { padding: 22px var(--pad) 24px; display: flex; flex-direction: column; gap: 14px; } .pod-side .cap { margin: 0; font-size: 17px; line-height: 1.5; color: var(--ink); min-height: 7.6em; } /* stage captions differ in length; a floor keeps the page from shifting under the reader */ .pod-side .cap b { font-weight: 500; } .pod-side .cap .n { margin-left: 8px; } .pod-side .hint { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-3); border-top: 1px solid var(--line); padding-top: 12px; } .pod-side .fig-key { padding-top: 12px; border-top: 1px solid var(--line); } .fig-ctl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 16px; align-items: center; border-top: 1px solid var(--line); padding-top: 14px; } .fig-ctl .play { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); padding: 9px 0; min-width: 6em; text-align: center; transition: background-color .3s var(--ease), color .3s var(--ease); } .fig-ctl .play:hover, .fig-ctl .play[aria-pressed="true"] { background: var(--ink); color: #fff; } .fig-ctl .range { display: contents; } .fig-ctl input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; background: transparent; margin: 0; cursor: ew-resize; } .fig-ctl input[type=range]::-webkit-slider-runnable-track { height: 1px; background: var(--line); } .fig-ctl input[type=range]::-moz-range-track { height: 1px; background: var(--line); } .fig-ctl input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; margin-top: -6.5px; background: var(--accent); border: 0; border-radius: 0; } .fig-ctl input[type=range]::-moz-range-thumb { width: 14px; height: 14px; background: var(--accent); border: 0; border-radius: 0; } .fig-ctl input[type=range]:focus-visible { outline: none; } .fig-ctl input[type=range]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--accent); outline-offset: 3px; } .fig-stages { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); box-shadow: 0 0 0 1px var(--line); } .fig-stages button { background: var(--paper); padding: 9px 4px; text-align: center; font-family: var(--mono); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); transition: background-color .3s var(--ease), color .3s var(--ease); white-space: nowrap; overflow: hidden; } .fig-stages button:hover { color: var(--ink); } .fig-stages button[aria-pressed="true"] { background: var(--ink); color: #fff; } .fig-stages button .i { opacity: .55; margin-right: 6px; } html:not(.js) .fig-ctl, html:not(.js) .pod-side .hint { display: none; } @media (min-width: 1160px) { .fig-pod { width: calc(100% + 2 * var(--pad) + var(--side)); grid-template-columns: var(--prose-w) var(--side); } .pod-stage { box-shadow: inset -1px 0 0 var(--line); } .pod-side { box-shadow: inset -1px 0 0 var(--line); padding: 22px 24px 24px; } } @media (min-width: 1160px) and (max-width: 1499px) { .fig-stages button .i { display: none; } .pod-side { gap: 12px; } } @media (min-width: 700px) and (max-width: 1159px) { .pod-side { display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "lab lab" "cap ctl" "hint ctl" "key ctl"; gap: 12px 28px; align-items: start; } .pod-side > .lab { grid-area: lab; } .pod-side .cap { grid-area: cap; } .pod-side .fig-ctl { grid-area: ctl; border-top: 0; padding-top: 0; } .pod-side .hint { grid-area: hint; } .pod-side .fig-key { grid-area: key; } } @media (max-width: 599px) { .pod-stage { padding: 12px; } .fig-stages button .i { display: none; } } /* the index rows on the pieces: the current page is marked */ /* ---------- figure: software generations (data-component="software-generations") ---------- */ .prose h3 { margin: 36px 0 12px; font-size: 22px; font-weight: 500; letter-spacing: -.008em; line-height: 1.2; } .fig-gen { box-shadow: 0 -1px 0 var(--line), 0 1px 0 var(--line); } .gen-cells { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--stone); } .gen-cell { padding: 20px 22px 22px; box-shadow: inset -1px 0 0 var(--line); display: flex; flex-direction: column; gap: 14px; min-width: 0; opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i) * 70ms); } .fig-gen.in .gen-cell, html:not(.js) .gen-cell { opacity: 1; transform: none; } .gen-cell:last-child { box-shadow: none; } .gen-cell svg { width: 100%; max-width: 180px; height: auto; display: block; } .gen-cell p { margin: 0; font-size: 16px; line-height: 1.4; color: var(--ink-2); } .gen-cell .k1 rect { fill: none; stroke: var(--accent); stroke-opacity: .45; } .gen-cell .k2 rect { fill: none; stroke: var(--accent); stroke-width: 1.5; } .gen-cell .k0 rect { fill: none; stroke: var(--accent); stroke-opacity: .25; } .gen-cell .k3 { fill: var(--accent); fill-opacity: .92; } @media (max-width: 699px) { .gen-cells { grid-template-columns: 1fr; } .gen-cell { box-shadow: inset 0 -1px 0 var(--line); flex-direction: row; align-items: center; flex-wrap: wrap; } .gen-cell svg { max-width: 120px; } .gen-cell .lab { width: 100%; } } /* ---------- figure: alignment vectors (data-component="alignment-vectors"); shares the pod figure's stage/side chrome ---------- */ .fig-vec svg { max-height: 460px; } .fig-vec .shaft { stroke: var(--ink); stroke-width: 1.5; } .fig-vec .head { fill: var(--ink); } .fig-vec .agent { stroke: var(--accent); stroke-width: 1; stroke-opacity: .38; } .fig-vec .resultant .shaft { stroke: var(--accent); stroke-width: 3; } .fig-vec .resultant .head { fill: var(--accent); } .fig-vec .origin { fill: var(--ink); } .fig-vec text { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; fill: var(--ink-3); } .fig-vec .rlab { fill: var(--accent); } .fig-vec .meter .track { fill: none; stroke: var(--line); } .fig-vec .meter .fill { fill: var(--accent); } .fig-vec .meter .foot { fill: var(--ink); } .fig-key i.line { width: 14px; height: 0; border-top: 1.5px solid var(--ink); box-shadow: none; } .fig-key i.line.faint { border-top: 1px solid var(--accent); opacity: .5; } .fig-key i.line.heavy { border-top: 3px solid var(--accent); } @media (max-width: 599px) { .fig-vec text { font-size: 15px; } } /* quoted definitions (the SAE levels): an aside on stone, attributed once */ .prose blockquote.sae { margin: 22px 0 22px calc(-1 * var(--pad)); width: calc(100% + 2 * var(--pad)); max-width: none; padding: 16px var(--pad) 16px calc(var(--pad) + 12px); background: var(--stone); box-shadow: inset 3px 0 0 var(--accent); } .prose blockquote.sae p { margin: 0; font-size: 17px; line-height: 1.5; color: var(--ink-2); } .prose blockquote.sae p b { color: var(--ink); font-weight: 500; } .prose blockquote.sae .src { margin-top: 10px; } /* ---------- figure: the levels ladder (data-component="levels-ladder"); shares the pod figure's chrome ---------- */ .fig-ladder svg { max-height: 460px; } .fig-ladder .node { fill: var(--paper); stroke: var(--ink); stroke-width: 1.25; } .fig-ladder .node.on { fill: var(--accent); stroke: var(--accent); } .fig-ladder .edge { stroke: var(--ink); stroke-width: 1.25; } .fig-ladder .edge.dashed { stroke-dasharray: 4 4; stroke: var(--ink-3); } .fig-ladder .frame line { stroke: var(--ink-3); stroke-width: 1; stroke-opacity: .6; } .fig-ladder .tool-in rect, .fig-ladder .tool-out rect, .fig-ladder .tool-far rect { fill: var(--paper); stroke: var(--ink); stroke-width: 1; } .fig-ladder .stub, .fig-ladder .reach { stroke: var(--ink-3); stroke-width: 1; } .fig-ladder .reach { stroke: var(--accent); } .fig-ladder .chosen { fill: none; stroke: var(--accent); stroke-width: 2; } .fig-ladder .path { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linejoin: round; } .fig-ladder text { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; fill: var(--ink-3); } .fig-ladder .sae { fill: var(--ink); } .fig-ladder .meter .track { fill: none; stroke: var(--line); } .fig-ladder .meter .fill { fill: var(--accent); } .fig-ladder .brevy { stroke: var(--ink); stroke-width: 1.5; } .fig-ladder .blab { fill: var(--ink); } .fig-stages.six { grid-template-columns: repeat(6, minmax(0, 1fr)); } .fig-stages.six button { padding: 9px 0; } .fig-key i.small { width: 6px; height: 6px; } @media (max-width: 599px) { .fig-ladder text { font-size: 15px; } } /* ---------- data charts (data-component="chart-line" | "chart-area" | "chart-dumbbell") ---------- one hue (the page accent), a validated sequential ramp for the ordered bands, thin marks, recessive grid, hover layer, table view */ .chart { box-shadow: 0 -1px 0 var(--line), 0 1px 0 var(--line); background: var(--stone); } .chart-head { padding: 18px var(--pad) 6px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; } .chart-head h4 { margin: 0; font-size: 19px; font-weight: 500; letter-spacing: -.005em; } .chart-head .sub { margin: 0; width: 100%; font-size: 15px; color: var(--ink-2); } .chart-stage { position: relative; padding: 6px var(--pad) 4px; } .chart-stage svg { width: 100%; height: auto; display: block; overflow: visible; } .chart .grid { stroke: var(--line); stroke-width: 1; } .chart .ax { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; fill: var(--ink-3); } .chart .ax.row { font-family: var(--serif); font-size: 15px; letter-spacing: 0; fill: var(--ink); text-transform: none; } .chart .dl { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; fill: var(--ink); paint-order: stroke; stroke: var(--stone); stroke-width: 4px; stroke-linejoin: round; } .chart .dl.on { fill: #fff; stroke: none; } .chart .line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; } .chart .ann { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 2 3; } .chart .pt { fill: var(--stone); stroke: var(--accent); stroke-width: 2; opacity: 0; } .chart .pt.on { opacity: 1; } .chart .cross { stroke: var(--ink); stroke-width: 1; opacity: 0; } .chart .cross.on { opacity: .6; } .chart .band { stroke: var(--stone); stroke-width: 2; } /* the 2px surface gap between stacked segments */ .chart .band.dim { opacity: .45; } .chart .conn { stroke: var(--ink-3); stroke-width: 1.5; } .chart .d87 { fill: var(--stone); stroke: var(--accent); stroke-width: 2; } .chart .d12 { fill: var(--accent); stroke: var(--stone); stroke-width: 2; } .chart .legend { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 8px var(--pad) 4px; } .chart .legend span { display: inline-flex; align-items: center; gap: 7px; } .chart .legend i { display: inline-block; width: 10px; height: 10px; } .chart .legend i.o { width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--accent); background: var(--stone); } .chart .legend i.f { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); } .chart .legend .axl { margin-left: auto; color: var(--ink-3); } .chart .tip { position: absolute; z-index: 2; pointer-events: none; background: var(--paper); box-shadow: 0 0 0 1px var(--line); padding: 8px 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--ink-2); line-height: 1.5; white-space: nowrap; } .chart .tip b { color: var(--ink); font-weight: 500; } .chart .tip i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; } .chart-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; padding: 8px var(--pad) 14px; box-shadow: inset 0 1px 0 var(--line); margin-top: 8px; } .chart .tbl { margin-left: auto; } .chart .tbl summary { cursor: pointer; color: var(--accent); list-style: none; } .chart .tbl summary::-webkit-details-marker { display: none; } .chart .tbl table { margin: 10px 0 0; border-collapse: collapse; font-size: 14px; } .chart .tbl th, .chart .tbl td { text-align: right; padding: 4px 10px; border-top: 1px solid var(--line); } .chart .tbl th:first-child, .chart .tbl td:first-child { text-align: left; } .chart .tbl th { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 400; } @media (max-width: 599px) { .chart .ax, .chart .dl { font-size: 15px; } .chart .ax.row { font-size: 17px; } .chart .tbl table { font-size: 13px; } } /* the alignment figure: agents are short polylines that leave the person's tip and run parallel */ .fig-vec .agent { fill: none; stroke: var(--accent); stroke-width: 1.2; stroke-opacity: .42; stroke-linejoin: round; } /* ---------- next essay (a different topic, wearing its own accent) ---------- */ .next-a { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "lab lab" "h go" "p go"; gap: 4px 40px; align-items: end; padding: 26px 32px 30px; text-decoration: none; } .next-a .lab:first-child { grid-area: lab; margin-bottom: 12px; } .next-a h2 { grid-area: h; font-size: clamp(28px, 2.6vw, 36px); font-weight: 500; letter-spacing: -.012em; line-height: 1.1; text-wrap: balance; max-width: 22em; } .next-a p { grid-area: p; margin: 6px 0 0; font-size: 18px; line-height: 1.45; color: var(--ink-2); max-width: 36em; text-wrap: pretty; } .next-a .go { grid-area: go; color: var(--accent); padding-bottom: 6px; } .next-a:hover h2 { color: var(--accent); } @media (max-width: 599px) { .next-a { padding: 20px; grid-template-columns: 1fr; grid-template-areas: "lab" "h" "p" "go"; } .next-a .go { padding-top: 14px; } } /* ---------- index + footer ---------- */ .foot-head { height: var(--bar); display: flex; align-items: center; padding: 0 32px; text-decoration: none; } .foot-head .go { margin-left: auto; color: var(--accent); } .foot-head:hover b { color: var(--accent); } .foot-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) 170px 110px; column-gap: 16px; align-items: center; padding: 16px 32px; text-decoration: none; } .foot-row .t { display: block; font-size: 20px; font-weight: 500; line-height: 1.25; letter-spacing: -.005em; } .foot-row .s { display: block; font-size: 15px; line-height: 1.4; color: var(--ink-2); margin-top: 3px; } .foot-row .topic { color: var(--accent); } .foot-row .d { text-align: right; } .foot-row:hover .t { color: var(--accent); } .foot-row .latest { margin-left: 12px; color: var(--accent); vertical-align: 3px; } .foot-copy { height: var(--bar); display: flex; align-items: center; gap: 18px; padding: 0 32px; text-transform: none; letter-spacing: .03em; font-size: 12px; } .foot-copy a { text-decoration: none; } .foot-copy a:hover { color: var(--accent); } .foot-copy .right { margin-left: auto; } @media (max-width: 899px) { .foot-row { grid-template-columns: 32px minmax(0, 1fr); row-gap: 8px; padding: 14px 20px; } .foot-row .topic { grid-column: 2; } .foot-row .d { grid-column: 2; text-align: left; } .foot-row .latest { display: none; } .foot-head, .foot-copy { padding: 0 20px; } .foot-row .t { font-size: 18px; } } /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; } html.home { animation: none; } html { transition: none; } }