/* shared site chrome for the section pages: the hero's post-scroll state
   as a standalone header (stacked wordmark + nav) over the living canvas */
:root{ --ink:#0c0c0c; --mid:#9a9a9a; --quiet:#6e6e6e; --red:#e0201b; --paper:#ffffff; --ground:#ececec; --red-on-ground:#d01c17; --line:#ccc; --faint:#444; color-scheme:light; }
  /* Libre Caslon Text (SIL OFL — see caslon.OFL.txt), self-hosted: the same two latin woff2 files
   Google Fonts serves, without the stylesheet request and the second origin in front of them.
   unicode-range keeps the italic from being fetched unless something is actually set in it. */
@font-face{font-family:'Libre Caslon Text';font-style:normal;font-weight:400;font-display:swap;
  src:url(../caslon-regular.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Libre Caslon Text';font-style:italic;font-weight:400;font-display:swap;
  src:url(../caslon-italic.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Computer Modern (CMU Serif Italic, SIL OFL — see cmu-italic.OFL.txt), self-hosted and subset to
   the maths this site sets: 17KB instead of a 156KB face behind a CDN stylesheet that @imported
   twelve more. The equation panel and the update rules are the only things that use it, and they
   read fine in the fallback serif while it loads, so: swap. */
@font-face{font-family:'Computer Modern Serif';src:url(../cmu-italic.woff) format('woff');
  font-weight:400;font-style:italic;font-display:swap}
*{margin:0;box-sizing:border-box}
html{background:var(--paper)}
body{background:var(--paper);color:var(--ink);font-family:ui-sans-serif,-apple-system,"Helvetica Neue",Arial,sans-serif;min-height:100vh}
/* the parts of the page the browser draws for us still belong to the palette */
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--red);outline-offset:4px}
html{scrollbar-color:var(--ink) #ececec}

#chrome{position:fixed;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
/* the header band's cap, above the content (chrome.js creates it): scrolling pages pass under it */
#chromeTop{position:fixed;left:0;top:0;width:100%;height:90px;z-index:6;pointer-events:none}

header{position:fixed;left:64px;top:10px;z-index:7;display:flex;align-items:center;gap:30px}
.wordmark{font-family:'Libre Caslon Text',serif;font-weight:400;font-size:17px;line-height:.95;
  display:flex;flex-direction:column;gap:.1em;color:var(--ink);text-decoration:none;white-space:nowrap}
nav{display:flex;gap:26px;font:600 clamp(12px,.62vw,16px)/1 ui-monospace,Menlo,monospace;letter-spacing:.14em}
nav a{color:var(--faint);text-decoration:none}
nav a:hover,nav a.here{color:var(--red-on-ground)}   /* the band is ground (#ececec): --red is 4.05:1 on it, this is 4.6:1 */
.cta{position:fixed;right:64px;top:20px;z-index:7;color:var(--ink);text-decoration:none;
  font:600 clamp(12px,.62vw,16px)/1 ui-monospace,Menlo,monospace;letter-spacing:.14em}
.cta:hover{color:var(--red-on-ground)}

/* ---- section index pages: a statement on the left, a live figure on the
   right. An empty section says so plainly and says what will fill it ---- */
main{position:relative;z-index:5;min-height:100vh;padding:150px 72px 96px}
.mono{font:600 clamp(12px,.58vw,15px)/1.7 ui-monospace,Menlo,monospace;letter-spacing:.12em}
h1{font-family:'Libre Caslon Text',serif;font-weight:400;font-size:clamp(2.75rem,7vw,6rem);line-height:1;text-wrap:balance}
.section{display:grid;grid-template-columns:7fr 4fr;gap:48px 6vw;align-items:start}
/* a short page (404) would otherwise leave the figure stranded far below its statement */
.section.short{align-content:start}
.section.short .fig{margin-top:6px}
.section h1{grid-column:1/-1;margin-bottom:12px}
.section .say p{font-family:'Libre Caslon Text',serif;font-size:clamp(1.2rem,1.7vw,2.05rem);line-height:1.38;max-width:30em}
.section .say p+p{margin-top:.9em}
.section .say a{color:var(--ink);text-decoration-color:var(--red);text-decoration-thickness:1px;text-underline-offset:5px}
.section .say a:hover{color:var(--red)}
/* 404.html: the status, and the address that failed, as the page's one line of data */
.section .say p.missing{display:flex;flex-wrap:wrap;gap:4px 16px;font:600 clamp(12px,.58vw,15px)/1.7 ui-monospace,Menlo,monospace;letter-spacing:.12em;color:var(--faint);overflow-wrap:anywhere}
.section .say p.missing b{font-weight:600;color:var(--red)}
.section .say p.missing span{min-width:0}
.fig canvas{display:block;width:100%;aspect-ratio:3/2;border:1px solid var(--line);background:var(--paper)}
/* captions are sentences, not labels: mono for the figure voice, without the furniture's wide tracking */
.fig figcaption{margin-top:12px;font:500 clamp(12px,.56vw,14px)/1.65 ui-monospace,Menlo,monospace;letter-spacing:.02em;color:var(--faint)}
.fig figcaption b{font-weight:600;color:var(--red);letter-spacing:.1em;margin-right:.9em}

/* a ruled list: dates in the margin, title in Caslon — the home page's job rows */
.list{grid-column:1/-1;list-style:none;padding:0;border-bottom:1px solid var(--line)}
.list li{display:grid;grid-template-columns:minmax(150px,16ch) 1fr;gap:6px 4vw;padding:30px 0;border-top:1px solid var(--line)}
.list .when{color:var(--ink);white-space:nowrap}
.list a{font-family:'Libre Caslon Text',serif;font-size:clamp(1.3rem,1.9vw,2.3rem);line-height:1.15;color:var(--ink);text-decoration:none}
.list a:hover{color:var(--red)}
.list p{grid-column:2;font-family:'Libre Caslon Text',serif;font-size:clamp(1.05rem,1.2vw,1.4rem);line-height:1.45;color:var(--faint);max-width:56ch}

/* the experiment protocol: the order IS the content, so it is numbered */
.protocol{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:0 6vw;border-top:1px solid var(--ink);padding-top:28px;counter-reset:step}
.protocol h2{font:600 clamp(12px,.58vw,15px)/1 ui-monospace,Menlo,monospace;letter-spacing:.14em;color:var(--red);margin-bottom:6px}
.protocol ol{list-style:none;padding:0}
.protocol li{counter-increment:step;display:grid;grid-template-columns:3ch 1fr;gap:0 14px;padding:16px 0;border-bottom:1px solid var(--line);
  font-family:'Libre Caslon Text',serif;font-size:clamp(1.05rem,1.3vw,1.55rem);line-height:1.4}
.protocol li::before{content:counter(step);font:600 clamp(12px,.58vw,15px)/2.1 ui-monospace,Menlo,monospace;letter-spacing:.1em;color:var(--quiet)}

.follow{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px 20px;align-items:baseline;padding-top:8px}
.follow .at{color:var(--red)}
.follow a{color:var(--quiet);text-decoration:none}
.follow a:hover{color:var(--ink)}

/* ---- the reading layout: one column at a reader's measure; figures and
   code step out to a wider one ---- */
.post{max-width:1100px;margin:0 auto;--measure:42rem}
/* the measure is in rem, NOT ch: ch resolves against each element's own font
   size, which would give the h1, the lede and the body three different left edges */
.post>*{max-width:var(--measure);margin-left:auto;margin-right:auto}
.post .meta{color:var(--faint);margin-bottom:22px}
.post .meta a{color:var(--faint);text-underline-offset:4px}
.post .meta a:hover{color:var(--red)}
.post h1{font-size:clamp(2.5rem,5.4vw,4.75rem);line-height:1.04;margin-bottom:.55em}
.post h2{font-family:'Libre Caslon Text',serif;font-weight:400;font-size:clamp(1.5rem,2.2vw,2.1rem);line-height:1.2;margin:2.4em auto .7em}
.post p,.post li{font-family:'Libre Caslon Text',serif;font-size:clamp(1.15rem,1.3vw,1.35rem);line-height:1.62}
.post p+p{margin-top:1em}
.post p a{color:var(--ink);text-decoration-color:var(--red);text-underline-offset:4px}
.post p a:hover{color:var(--red)}
.post .lede{font-size:clamp(1.3rem,1.7vw,1.7rem);line-height:1.42}
/* `.post p` outranks `.mono`; the dateline and the sign-off are furniture, so restate it */
.post p.mono{font:600 clamp(12px,.58vw,15px)/1.7 ui-monospace,Menlo,monospace;letter-spacing:.12em}
.post code{font-family:ui-monospace,Menlo,monospace;font-size:.86em;font-weight:500;background:#f3f3f3;padding:.12em .34em}   /* longhands: the shorthand would reset line-height */
.post pre{max-width:none;margin-top:1.6em;margin-bottom:1.6em;padding:22px 24px;background:#f6f6f6;border:1px solid var(--line);overflow-x:auto;
  font:500 clamp(12px,.9vw,14.5px)/1.75 ui-monospace,Menlo,monospace;color:var(--ink);tab-size:2}
.post pre code{background:none;padding:0;font:inherit}
.post pre .c{color:var(--quiet)}
.post .math{font-family:'Computer Modern Serif',serif;font-style:italic;font-size:clamp(1.2rem,1.5vw,1.55rem);line-height:1.6;text-align:center;margin-top:1.5em;margin-bottom:1.5em;color:var(--ink)}
.post .fig{max-width:none;margin-top:2.2em;margin-bottom:2.2em}
.post .fig.tall canvas{aspect-ratio:16/9}
.post .fig.strip canvas{aspect-ratio:16/5}
.post .end{margin-top:4em;padding-top:26px;border-top:1px solid var(--ink);color:var(--faint)}
.post .end a{color:var(--ink);text-underline-offset:4px}
.post .end a:hover{color:var(--red)}

/* phones: the band holds wordmark + call to action; the nav gets its own row under the border */
@media (max-width:700px){
  header{left:36px}
  nav{position:fixed;left:36px;top:74px;gap:14px;letter-spacing:.08em;font-size:12px;transition:opacity .25s}
  /* that second row has no cap behind it, so it bows out once the page moves (chrome.js sets .scrolled) */
  .scrolled nav{opacity:0;pointer-events:none}
  .cta{right:36px;letter-spacing:.08em;font-size:12px}
  main{padding:130px 36px 64px}
  .section,.protocol{grid-template-columns:1fr}
  .protocol ol+h2,.protocol div+div{margin-top:28px}
  .list li{grid-template-columns:1fr}
  .list p{grid-column:1}
  .post .fig.tall canvas{aspect-ratio:1/1}
  .post .fig.strip canvas{aspect-ratio:16/9}
  .post pre{padding:16px 14px}
}