/* Cohese pages: white, one narrow serif column, small sans for everything that is not reading.
   The two essays under /research/ keep their own post.css; they share only the header and footer. */
:root {
  --bg: #ffffff; --ink: #1c1c1c; --soft: #5f6368; --faint: #8b8f94; --line: #ebebea;
  --navy: #233c66; --mist: #a9c4d2; --blue: #265487;
  --serif: "Source Serif 4", Georgia, serif; --sans: "Onest", Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body.c { margin: 0; padding-top: 76px; background: var(--bg); color: var(--ink); font: 400 18px/1.7 var(--serif);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-optical-sizing: auto; }
.c main a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: #c9cbcf; }
.c main a:hover { text-decoration-color: var(--ink); }
.c main a:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.col { max-width: 640px; margin: 0 auto; padding: 0 24px; }
.c p { margin: 0 0 22px; }
.c em { font-style: italic; }

/* index-page heads, Connectionism style */
.head { padding-top: 48px; margin-bottom: 36px; }
.head h1 { margin: 0; font: 500 27px/1.25 var(--sans); letter-spacing: -.02em; }
.head .sub { margin: 6px 0 0; font: 400 15px/1.5 var(--sans); color: var(--soft); }

/* prose sections */
.c h2 { margin: 56px 0 16px; font: 500 21px/1.3 var(--sans); letter-spacing: -.015em; }
.c h2:first-child { margin-top: 0; }
.links { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: -6px 0 22px; font: 400 14.5px/1.5 var(--sans); }
.c .links a { color: var(--soft); text-decoration: none; }
.c .links a:hover { color: var(--ink); }
.links a::after { content: " \2197"; font-size: .9em; }

/* the dated list */
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.list li:last-child { border-bottom: 0; }
.list time { font: 400 14.5px/1.75 var(--sans); color: var(--soft); }
.c .list a { font: 400 19px/1.4 var(--serif); text-decoration: none; }
.c .list a:hover { text-decoration: underline; text-decoration-color: var(--ink); }
.list .by { display: block; margin-top: 4px; font: 400 14.5px/1.5 var(--sans); color: var(--soft); }

/* figures */
.c figure { margin: 40px 0; }
.c figure img { display: block; width: 100%; height: auto; }
.c figcaption { margin-top: 12px; font: 400 14px/1.55 var(--sans); color: var(--soft); }
.wide { width: min(920px, calc(100vw - 48px)); margin-left: 50% !important; transform: translateX(-50%); }

/* single-subject pages (projects): centered title like a post */
.title { text-align: center; padding-top: 56px; margin-bottom: 44px; }
.title h1 { margin: 0; font: 600 clamp(32px, 4vw, 40px)/1.15 var(--serif); letter-spacing: -.01em; }
.title p { margin: 12px 0 0; font: 400 15.5px/1.5 var(--sans); color: var(--soft); }

/* ---- home ---- */
.c-home { padding-top: 76px; }

.mark { margin: 40px 0 0; text-align: center; color: var(--navy); }
.mark h1 { display: inline-flex; align-items: baseline; margin: 0; font: 500 clamp(60px, 8.5vw, 112px)/1 var(--sans); letter-spacing: -.065em; }
.mark h1 .h { color: var(--mist); }
.mark svg { width: .28em; height: .28em; margin-left: .12em; align-self: flex-start; margin-top: .06em; fill: currentColor; }
.pill { display: flex; justify-content: center; margin: 30px 0 52px; }
.c .pill a { display: inline-flex; align-items: center; gap: 10px; font: 400 14.5px/1.4 var(--sans); text-decoration: none; }
.c .pill a:hover span:last-child { text-decoration: underline; text-underline-offset: 3px; }
.pill b { font: 600 10px/1 var(--sans); letter-spacing: .08em; color: var(--soft); background: #f1f1ef; border-radius: 999px; padding: 6px 9px; }
.water { position: relative; height: clamp(280px, 46vh, 460px); overflow: hidden; background: #ece8dc; }
.water canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.water #grain { pointer-events: none; opacity: .5; mix-blend-mode: multiply; }
.water .vig { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 50%, rgba(30,25,15,0) 55%, rgba(30,25,15,.25) 100%); }

@media (max-width: 620px) {
  body.c { padding-top: 104px; font-size: 17px; }
  .head { padding-top: 28px; }
  .list li { grid-template-columns: 1fr; gap: 2px; }
  .mark { margin-top: 24px; }
  .wide { width: calc(100vw - 32px); }
  .col { padding: 0 20px; }
}

/* page header figures (water on Research, Shoal's field on Work) */
.c .header-fig { margin-top: 0; margin-bottom: 44px; }
.header-fig .shoal-field { aspect-ratio: 2.4; background: #f3f3f0; }
.c .list .t { font: 400 19px/1.4 var(--serif); }
.c .note { font: 400 14px/1.55 var(--sans); color: var(--faint); margin-top: 40px; }

/* spec tables (Inference) */
.spec { width: 100%; margin: 8px 0 30px; border-collapse: collapse; font: 400 14.5px/1.45 var(--sans); font-variant-numeric: tabular-nums; }
.spec th { padding: 0 0 8px; font-weight: 500; font-size: 13px; color: var(--soft); text-align: left; border-bottom: 1px solid var(--ink); }
.spec td { padding: 9px 0; border-bottom: 1px solid var(--line); vertical-align: baseline; }
.spec .n { text-align: right; padding-left: 16px; }
.spec .k { padding-left: 20px; font-size: 12.5px; color: var(--faint); }
.board-flat .stage { position: relative; }
.board-flat img { filter: drop-shadow(0 10px 18px rgba(20, 30, 45, .16)) drop-shadow(0 2px 3px rgba(20, 30, 45, .12)); }
.board-flat canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* Inference: text on the left, the board beside it and staying in view */
.inf { max-width: 1400px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 72px; align-items: start; }
.inf .head { padding-top: 48px; }
.inf-board { position: sticky; top: 104px; margin: 104px 0 0 !important; }
@media (max-width: 960px) {
  .inf { grid-template-columns: 1fr; gap: 0; max-width: 640px; padding: 0 24px; }
  .inf-board { position: static; margin: 8px 0 0 !important; order: 0; }
}
.c .tag { display: inline-block; margin-left: 10px; padding: 3px 9px; vertical-align: 3px; font: 500 11.5px/1.3 var(--sans); letter-spacing: .01em; color: var(--soft); border: 1px solid var(--line); border-radius: 999px; }