@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/geist-v1.7.2.woff2) format('woff2');
}
@font-face {
  font-family: 'Geist';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/geist-italic-v1.7.2.woff2) format('woff2');
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/geist-mono-v1.7.2.woff2) format('woff2');
}

/* Geist — one shared, cacheable stylesheet. */

/* ---------- tokens ---------- */
:root {
  --paper:        #FCFBF8;
  --ink:          #1E1D1B;   /* headings, strongest text */
  --body:         #282624;   /* running text */
  --secondary:    #46433F;   /* lede, block quotes */
  --muted:        #6A6662;   /* bios, authors, captions in prose */
  --subdued:      #716C65;   /* subheads, captions, dates and section labels */
  --nav:          #76726E;
  --rule:         #E9E7E3;   /* page hairlines */
  --border:       #E5E2DC;   /* surface borders */
  --hair:         #C1BBB3;   /* rules drawn on a surface */
  --surface:      #F1EFEB;   /* covers, code panel */
  --surface-alt:  #E5E2DC;   /* fiction covers */
  --card:         #FEFDFA;   /* charts, tables */
  --card-head:    #F1EFEB;
  --card-hover:   #F4F3EF;
  --accent:       #9C5F3C;
  --accent-hover: #7A4529;
  --accent-tint:  #F3DECB;

  --measure:  620px;
  --breakout: 880px;
  --gutter:   20px;

  --sans: "Geist", system-ui, sans-serif;
  --mono:  "Geist Mono", ui-monospace, monospace;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.76;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.skip-link {
  position: absolute; top: 12px; left: 20px; z-index: 1;
  background: var(--paper); padding: 8px 12px; transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ---------- page grid: main / breakout / full ---------- */
.page {
  display: grid;
  container-type: inline-size;
  /* gutters live in the padding so the percentage below resolves against a definite box */
  grid-template-columns:
    [full-start] minmax(0, 1fr)
    [wide-start]  minmax(0, calc((var(--breakout) - var(--measure)) / 2))
    [main-start]  min(var(--measure), 100%) [main-end]
    minmax(0, calc((var(--breakout) - var(--measure)) / 2)) [wide-end]
    minmax(0, 1fr) [full-end];
  row-gap: 0;
  padding: 96px var(--gutter);
}
/* A subgrid preserves breakout columns and gives the skip-link target a focusable box. */
.page > main { display: grid; grid-template-columns: subgrid; grid-column: full; }
.page > *,         .page > main > *         { grid-column: main; }
.page > .breakout, .page > main > .breakout { grid-column: wide; }
.page > .full,     .page > main > .full     { grid-column: full; }
/* Writing stays in normal flow; figures can use the page's available inner width. */
:is(.prose, .book-sections) .breakout {
  width: min(var(--breakout), 100cqw);
  margin-inline: calc((100% - min(var(--breakout), 100cqw)) / 2);
}

/* ---------- header / footer ---------- */
.masthead {
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: 12px 32px;
  font-size: 17px;
}
.masthead .name { font-weight: 500; color: var(--ink); }
.masthead nav { display: flex; gap: 20px; font-size: 15px; }
.masthead nav a { color: var(--nav); }
.masthead nav a:hover { color: var(--accent); }
.masthead nav a[aria-current="page"] { color: var(--ink); }

.site-footer {
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: 10px 24px;
  font-size: 15px; color: var(--subdued);
  border-top: 1px solid var(--rule);
  padding-top: 22px; margin-top: 56px;
}
.site-footer a.quiet { color: var(--subdued); }

/* ---------- typography ---------- */
h1, h2, h3 { color: var(--ink); font-weight: 500; margin: 0; text-wrap: pretty; }
h1.page-title { font-size: 28px; letter-spacing: -0.015em; }
h1.entry-title { font-size: 42px; line-height: 1.16; letter-spacing: -0.018em; }
.note-header h1.entry-title { font-size: 36px; }
p { margin: 0; }
.prose > * + * { margin-top: 26px; }
.lede { font-size: 22px; font-style: italic; line-height: 1.55; color: var(--secondary); }
.lede-note { font-size: 21px; line-height: 1.6; }
.meta { font-size: 12px; line-height: normal; letter-spacing: 0.11em; text-transform: uppercase; color: var(--subdued); }
.byline { font-size: 18px; line-height: normal; color: var(--muted); }
.subhead { font-size: 13px; line-height: normal; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--subdued); }
.prose > h2 { font-size: 13px; line-height: normal; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--subdued); margin-top: 40px; }
.prose > h2 + p { margin-top: 20px; }

blockquote {
  margin: 0; border-left: 1px solid var(--hair); padding: 2px 0 2px 28px;
  display: flex; flex-direction: column; gap: 12px;
}
blockquote p { font-size: 21px; font-style: italic; line-height: 1.6; color: var(--secondary); }
blockquote cite { font-style: normal; font-size: 12px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--subdued); }

/* ---------- essay index ---------- */
.entry-list { display: flex; flex-direction: column; gap: 34px; list-style: none; padding: 0; margin: 0; }
.entry-list h2 { font-size: 22px; line-height: 1.3; letter-spacing: -0.005em; }
.entry-list h2 a { color: var(--ink); }
.entry-list h2 a:hover { color: var(--accent); }
.entry-list .summary { font-size: 16.5px; line-height: 1.6; color: var(--muted); margin-top: 7px; }
.entry-list .meta { display: block; margin-bottom: 7px; }

/* ---------- home: the object ---------- */
.stage {
  container-type: inline-size;
  width: min(580px, 100%); aspect-ratio: 1;
  position: relative; margin: 0 auto;
  touch-action: pan-y; user-select: none; cursor: grab;
}
.stage:active { cursor: grabbing; }
.scene {
  --u: calc(100cqw / 6.042);
  position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  transform-style: preserve-3d;
  transform: rotate(var(--spin, 0deg)) translate(calc(var(--u) * -0.469), 0)
             rotateX(54.7356deg) rotateZ(45deg);
}
.cube {
  position: absolute; display: block;
  width: var(--u); height: var(--u);
  left: calc(var(--u) / -2); top: calc(var(--u) / -2);
  transform-style: preserve-3d;
  transform: translate3d(calc(var(--x) * var(--u)), calc(var(--y) * var(--u)), calc(var(--z) * var(--u)));
}
.face {
  position: absolute;
  width: calc(var(--u) * 0.854); height: calc(var(--u) * 0.854);
  left: calc(var(--u) * 0.073); top: calc(var(--u) * 0.073);
  border: 1px solid var(--ink); backface-visibility: hidden;
  transition: background-color 140ms ease;
}
.f-top { background: #FFFEFB; transform: translateZ(calc(var(--u) *  0.427)); }
.f-bot { background: #131211; transform: translateZ(calc(var(--u) * -0.427)) rotateX(180deg); }
.f-px  { background: #1E1D1B; transform: rotateY(90deg)   translateZ(calc(var(--u) * 0.427)); }
.f-nx  { background: #EAE8E3; transform: rotateY(-90deg)  translateZ(calc(var(--u) * 0.427)); }
.f-py  { background: #E2DED9; transform: rotateX(-90deg)  translateZ(calc(var(--u) * 0.427)); }
.f-ny  { background: #242220; transform: rotateX(90deg)   translateZ(calc(var(--u) * 0.427)); }
.cube:hover .f-px, .cube:hover .f-ny, .cube:hover .f-bot,
.cube:focus-visible .f-px, .cube:focus-visible .f-ny { background: var(--accent); }
.cube:hover .f-nx, .cube:hover .f-py,
.cube:focus-visible .f-nx, .cube:focus-visible .f-py { background: var(--accent-tint); }

.now-showing { text-align: center; min-height: 104px; margin-top: 36px; }
.now-showing h2 { font-size: 26px; line-height: 1.28; letter-spacing: -0.012em; margin: 10px 0; }
.now-showing h2 a { color: var(--ink); }
.now-showing .summary { font-size: 16.5px; line-height: 1.6; color: var(--muted); max-width: 520px; margin: 0 auto; }

/* Reserve room for readable text, then fit the object into the remainder. */
.page-home {
  height: 100svh;
  grid-template-rows: auto 1fr auto;
  row-gap: clamp(12px, 2svh, 24px);
  padding-block: clamp(16px, 3svh, 40px);
}
.page-home > main {
  grid-template-rows: auto minmax(100px, 1fr) auto;
  row-gap: clamp(8px, 1.5svh, 16px);
}
.home-intro { max-width: 420px; font-size: 16px; line-height: 1.55; }
.page-home .stage { container-type: size; width: 100%; height: 100%; aspect-ratio: auto; }
.page-home .scene { --u: calc(min(100cqw, 100cqh, 580px) / 6.042); }
.page-home .now-showing { min-height: 0; margin: 0; }
.page-home .now-showing > .meta { display: block; }
.page-home .now-showing h2 { font-size: clamp(20px, 3svh, 26px); margin-block: 6px; }
.page-home .now-showing .summary { font-size: 15px; line-height: 1.5; }
.page-home .site-footer { margin-top: 0; padding-top: 12px; }
@media (max-height: 480px) and (min-width: 600px) {
  .page-home > main {
    grid-column: main;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto minmax(100px, 1fr);
    column-gap: 24px;
  }
  .page-home .home-intro { grid-column: 1 / -1; }
  .page-home .stage { grid-column: 1; grid-row: 2; }
  .page-home .now-showing { grid-column: 2; grid-row: 2; align-self: center; }
}

/* ---------- bookshelf ---------- */
.shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 36px 28px; }
.book { display: flex; flex-direction: column; gap: 12px; }
.book-cover {
  aspect-ratio: 2 / 3; border: 1px solid #DDDAD2; border-radius: 2px;
  background: var(--surface); padding: 16px 15px;
  display: flex; flex-direction: column; gap: 14px;
  transition: border-color 130ms ease;
  overflow: hidden;
}
.book-cover.has-image, .note-cover.has-image { padding: 0; }
.book-cover img, .note-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.book-caption { display: block; margin-top: 12px; font-size: 16px; color: var(--body); }
.book:hover .book-cover { border-color: var(--accent); }
.book-cover.fiction { background: var(--surface-alt); }
.book-cover .title { line-height: 1.24; letter-spacing: -0.01em; color: var(--body); text-wrap: pretty; }
.book-cover .rule { height: 1px; width: 38px; background: var(--hair); }
.book .author { font-size: 13.5px; line-height: 1.35; color: var(--muted); }
.year-label { font-size: 11px; line-height: normal; letter-spacing: 0.15em; text-transform: uppercase; color: var(--subdued); }

/* cover title sizes to fit, the way a typographic cover would */
.t-xl { font-size: 21px; } .t-l { font-size: 18px; } .t-m { font-size: 16px; } .t-s { font-size: 14px; }

/* ---------- book note: collapsible sections ---------- */
.section { border-top: 1px solid var(--rule); }
.section + .section { margin-top: 32px; }
.section > summary {
  list-style: none; cursor: pointer; padding: 17px 0 0;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-size: 14px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink);
}
.section > summary::-webkit-details-marker { display: none; }
.section > summary:hover { color: var(--accent); }
.section > summary svg { flex-shrink: 0; color: var(--subdued); transition: transform 170ms ease; }
.section > summary:hover svg { color: var(--accent); }
.section[open] > summary svg { transform: rotate(180deg); }
.section .section-body { padding-top: 20px; }
.section .section-body > * + * { margin-top: 26px; }
.book-sections .section > summary::after {
  content: ""; width: 7px; height: 7px; flex-shrink: 0;
  border-right: 1px solid; border-bottom: 1px solid;
  transform: rotate(45deg); transition: transform 170ms ease;
}
.book-sections .section[open] > summary::after { transform: rotate(225deg); }

.rating { display: inline-flex; gap: 4px; vertical-align: middle; }
.pip { width: 6px; height: 6px; border: 1px solid var(--hair); }
.pip.on { background: var(--accent); border-color: var(--accent); }

/* ---------- about: CV ---------- */
.cv { display: flex; flex-direction: column; gap: 14px; }
.cv-row { display: grid; grid-template-columns: 104px 1fr; gap: 0 24px; align-items: baseline; }
.cv-row .years { font-size: 13.5px; color: var(--subdued); font-variant-numeric: tabular-nums; }
.cv-row .org { font-size: 17.5px; color: var(--ink); }
.cv-row .role { font-size: 17.5px; color: var(--muted); }
.elsewhere { display: flex; flex-wrap: wrap; gap: 26px; font-size: 17.5px; }

/* ---------- code ---------- */
code {
  font-family: var(--mono); font-size: 0.93em;
  background: #EDEBE6; padding: 1px 5px; border-radius: 4px; color: var(--secondary);
}
pre {
  font-family: var(--mono); font-size: 15.5px; line-height: 1.78; color: #312F2D;
  margin: 0; overflow-x: auto;
}
pre code { background: none; padding: 0; border-radius: 0; font-size: inherit; color: inherit; }
.prose, .book-sections { min-width: 0; }
.prose > pre { padding: 20px; border: 1px solid var(--border); border-radius: 10px; }
.prose > pre, .prose > figure, .prose > table { margin-block: 24px; }
:is(.prose, .book-sections) table { display: block; overflow-x: auto; }
.code-bare  { border-left: 1px solid var(--border); padding: 2px 0 2px 24px; }
.code-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 24px 26px; position: relative; }
.code-ruled { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 22px 0 24px; }
.code-lang  { position: absolute; top: 10px; right: 14px; font-family: var(--sans);
              font-size: 10.5px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--subdued); }
.tok-key { color: var(--ink); font-weight: 500; }
.tok-com { color: #A9A49C; }
.tok-const { color: var(--accent); }

/* ---------- figures ---------- */
figure { margin: 0; display: flex; flex-direction: column; gap: 14px; }
figcaption { font-size: 14.5px; line-height: 1.55; color: var(--subdued); max-width: 560px; text-wrap: pretty; }
figcaption .num { font-size: 11.5px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--subdued); }
.placeholder {
  background: #F0EEEA; border: 1px solid var(--border); border-radius: 10px;
  display: flex; align-items: center; justify-content: center; aspect-ratio: 22 / 9;
  font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: #BAB6AE;
}
.chart-card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 18px 0 10px; }
.chart-card svg { display: block; width: 100%; height: auto; }

/* a small figure in the right margin — needs room, so it only hangs out on wide screens */
.margin-figure { margin-top: 26px; }
.margin-figure .placeholder { aspect-ratio: 25 / 18; }
.margin-figure figcaption { font-size: 12.5px; line-height: 1.5; color: var(--subdued); }
@media (min-width: 1100px) {
  .has-margin-figure { position: relative; }
  .has-margin-figure .margin-figure {
    position: absolute; top: 2px; right: -190px; width: 150px; margin-top: 0;
  }
}

/* ---------- tables ---------- */
.table-wrap { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: var(--card); }
th {
  background: var(--card-head); padding: 13px 20px; text-align: left; font-weight: 400;
  font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--subdued);
  white-space: nowrap;
}
td { padding: 15px 20px; border-top: 1px solid #EAE7E2; font-size: 16.5px; line-height: 1.45; color: var(--body); }
tbody tr:hover td { background: var(--card-hover); }
.num-col { text-align: right; font-variant-numeric: tabular-nums; }
td.subdued { color: var(--subdued); }

/* ---------- responsive ---------- */
@media (max-width: 700px) {
  body { font-size: 16px; line-height: 1.7; }
  .page { padding: 56px var(--gutter) 64px; }
  .page-home { padding-block: clamp(16px, 3svh, 40px); }
  h1.entry-title { font-size: 28px; }
  h1.page-title { font-size: 24px; }
  .lede, blockquote p { font-size: 19px; }
  .shelf { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 28px 20px; }
  .cv-row { grid-template-columns: 1fr; gap: 2px; }
  pre { font-size: 14px; }
  .code-panel { padding: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* screen-reader-only label (the cubes are links; their faces are decoration) */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* book note header — the cover hangs in the left margin where there is room for it */
.note-header { position: relative; }
.note-cover {
  width: 124px; aspect-ratio: 2 / 3; border: 1px solid #DDDAD2; border-radius: 2px;
  background: var(--surface); padding: 14px 13px; overflow: hidden;
  display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px;
}
.note-cover .title { font-size: 16px; line-height: 1.24; letter-spacing: -0.01em; color: var(--body); }
.note-cover .rule { height: 1px; width: 32px; background: var(--hair); }
@media (min-width: 1100px) {
  .note-cover { position: absolute; left: -152px; top: 6px; margin-bottom: 0; }
}

/* chart axis labels (SVG text) */
.ax { font-family: var(--sans); font-size: 11.5px; fill: var(--subdued); }