/* site.css: the whole site's styles, shared by every page.
   Colours are in the :root block below; change them there and every page follows.

   In order: fonts · colours · base · header · top section · diagram beside the name · sections (introduction,
   preliminaries, current work, references, correspondence, footer) · hover · smaller screens · flash · pause
   control and reduced motion · single notes and articles (with their figures and diagrams) · 404 · print ·
   arrival · the scale control · margin notes · the pages in notes/ (contents, entries, figures). */

/* ---------- web fonts, served from this site (all SIL Open Font License; see fonts/) ---------- */
@font-face{font-family:'Courier Prime';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/courier-prime-latin-400-normal.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:'Courier Prime';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/courier-prime-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Courier Prime';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/courier-prime-latin-700-normal.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:'Courier Prime';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/courier-prime-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/dm-mono-latin-400-normal.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:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/dm-mono-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/dm-mono-latin-500-normal.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:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/dm-mono-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'DM Mono';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/dm-mono-latin-400-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}
@font-face{font-family:'DM Mono';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/dm-mono-latin-ext-400-italic.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'STIX Two Text';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/stix-two-text-latin-400-normal.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:'STIX Two Text';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/stix-two-text-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'STIX Two Text';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/stix-two-text-greek-400-normal.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:'STIX Two Text';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/stix-two-text-latin-400-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}
@font-face{font-family:'STIX Two Text';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/stix-two-text-latin-ext-400-italic.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'STIX Two Text';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/stix-two-text-greek-400-italic.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
/* Maths symbols: an 11-glyph subset of STIX Two Math, (c) The STIX Fonts Project Authors, SIL Open Font License 1.1 */
@font-face{font-family:'AM Math';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/am-math.woff) format('woff');unicode-range:U+2124,U+2131,U+2190,U+2192,U+2203,U+220E,U+2217,U+2229,U+2245,U+2295,U+1D4A2}
/* curly quotation marks, borrowed from STIX Two Text: DM Mono draws the opening and closing marks as the same
   slanted wedge. Only these four characters come from it (unicode-range), enlarged to sit with DM Mono. */
@font-face{font-family:'Quote Marks';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/stix-two-text-latin-400-normal.woff2) format('woff2');unicode-range:U+2018-2019,U+201C-201D;size-adjust:125%}
@font-face{font-family:'Quote Marks';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/stix-two-text-latin-400-italic.woff2) format('woff2');unicode-range:U+2018-2019,U+201C-201D;size-adjust:125%}
/* the initial at the head of an article: Goudy Initialen, Frederic Goudy's floriated initials, digitised by
   Typographer Mediengestaltung (1001 Fonts, free for commercial use; to be served complete and unmodified,
   so it is converted to WOFF2 but not subset). It is only fetched on a page that shows an initial. */
@font-face{font-family:'Goudy Initialen';font-style:normal;font-weight:400;font-display:block;src:url(fonts/goudy-initialen.woff2) format('woff2')}

/* ---------- colours: one place to change the whole scheme ---------- */
:root{
  --bg:#0d0307;        /* page ground: almost black, with a faint Tyrian cast */
  --surface:#17050d;   /* alternate section ground */
  --raised:#240a16;    /* hover and highlight ground */
  --line:#381726;      /* hairlines */
  --line-2:#59273e;    /* stronger lines, outlines */
  --tyrian:#82074e;    /* Tyrian purple, lifted for screens: fills */
  --tyrian-2:#9f1662;  /* brighter fill, hover */
  --accent:#f280b2;    /* accent for text and thin strokes */
  --pale:#f7bfd4;
  --gold:#e5bf6d;      /* link hover */
  --text:#f6ebef;
  --body:#dcccd2;
  --muted:#ab909a;
  --display:'Courier Prime','Courier New',Courier,monospace;                 /* headings */
  --mono:'Quote Marks','DM Mono',ui-monospace,'Cascadia Code',Menlo,Consolas,monospace;   /* everything else (its quotation marks from STIX) */
  --math:'STIX Two Text','AM Math',Cambria,'Times New Roman',serif;         /* notation: the diagram and the readout */
  color-scheme:dark;   /* native controls and scrollbars match */
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;scrollbar-color:var(--line-2) var(--bg);scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:10px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--tyrian)}
body{margin:0;background:var(--bg);color:var(--body);font-family:var(--mono);font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}   /* a word or address too long for its line breaks rather than running off the page */
p{line-height:1.85}
::selection{background:var(--tyrian);color:#fff}
h1,h2,h3,p,ol,figure{margin:0}
a{color:var(--accent);text-underline-offset:3px;text-decoration-thickness:1px;transition:color .2s}
a:hover{color:var(--gold)}
a:focus-visible,button:focus-visible{outline:1px solid var(--accent);outline-offset:4px}
sub,sup{font-size:.7em;line-height:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* line breaking: headings and captions balanced, paragraphs without a stranded last word */
h1,h2,h3,figcaption{text-wrap:balance}
p,li{text-wrap:pretty}
/* keyboard users can jump past the header; the link shows only when focused */
.skip-link{position:fixed;top:12px;left:12px;z-index:200;padding:12px 18px;background:var(--tyrian);color:#fff;font-size:12px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;transform:translateY(-200%)}
.skip-link:focus{transform:none;color:#fff}
main:focus{outline:none}
.label{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);line-height:1.6}
.wrap{max-width:1300px;margin:0 auto;padding-left:60px;padding-right:60px;width:100%}
.pad{padding-top:120px;padding-bottom:120px}

/* ---------- header ---------- */
.site-nav{position:fixed;top:0;left:0;right:0;z-index:100;border-bottom:1px solid transparent;transition:background .4s ease}
.site-nav.scrolled,.site-nav.open{background:rgba(13,3,7,.92);border-bottom-color:var(--line-2);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);animation:navflash .4s ease}
@keyframes navflash{from{border-bottom-color:var(--pale)}to{border-bottom-color:var(--line-2)}}
/* every page but the home page: the header sits in place above the page rather than floating over it */
.site-nav.sub-nav{position:sticky;background:rgba(13,3,7,.92);border-bottom-color:var(--line-2);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.nav-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 32px;min-height:84px}
.brand{font-family:var(--display);font-size:20px;font-weight:700;letter-spacing:.06em;color:var(--text);text-decoration:none;padding:10px 0}
.brand:hover{color:var(--accent)}
.nav-links{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:0 34px}
.nav-sep{width:1px;height:14px;background:var(--line-2)}
.nav-indicator{position:absolute;left:0;top:0;width:0;height:1px;background:var(--accent);opacity:0;pointer-events:none;transition:left .45s cubic-bezier(.65,0,.35,1),width .45s cubic-bezier(.65,0,.35,1),opacity .25s}
.nav-indicator.no-anim{transition:opacity .25s}
.nav-link{position:relative;font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-decoration:none;padding:14px 0}
.nav-link::after{content:"";position:absolute;left:0;bottom:8px;width:0;height:1px;background:var(--accent);transition:width .3s}
.nav-link:hover,.nav-link:focus-visible{color:var(--text)}
.nav-link:hover::after,.nav-link:focus-visible::after{width:100%}
.nav-link.active{color:var(--text)}                 /* home page: the section being read (the sliding bar marks it; a hover
                                                       underline stays put beneath it, so the bar lands on it rather than replacing it) */
.nav-link.current{color:var(--text)}                /* other pages: the page you are on */
.nav-link.current::after{width:100%}
.menu-btn{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:44px;height:44px;margin-right:-10px;padding:0;background:transparent;border:0;cursor:pointer}
.menu-btn span{display:block;width:24px;height:1px;background:var(--text);transition:transform .3s ease,opacity .3s ease}
.site-nav.open .menu-btn span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.site-nav.open .menu-btn span:nth-child(2){opacity:0}
.site-nav.open .menu-btn span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- top section ---------- */
.hero{position:relative;overflow:hidden;min-height:100vh;min-height:100svh;display:flex;align-items:center}
#complex{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-inner{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;gap:56px 72px;padding-top:112px;padding-bottom:112px}
.hero-text{flex:999 1 440px;min-width:0;display:flex;flex-direction:column}
.hero-label span{display:inline-block;max-width:100%}   /* each part stays whole while it fits on a line */
.hero h1{font-family:var(--display);font-weight:400;font-size:clamp(46px,7.5vw,96px);line-height:.98;letter-spacing:-.01em;color:var(--text);margin-top:28px}
.hero h1 .surname{display:block;color:var(--accent)}
/* the typing line: a phrase too long for one line wraps, with later lines starting under its first word;
   the script reserves the height of the tallest phrase, so nothing below moves as it types */
.role{position:relative;min-height:1.7em;margin-top:32px;padding-left:calc(1ch + 12px);font-family:var(--display);font-size:clamp(15px,4.4vw,20px);color:var(--text)}
.role .dash{position:absolute;left:0;top:0;color:var(--accent)}
.caret{display:inline-block;width:2px;height:1em;margin-left:4px;vertical-align:-.2em;background:var(--accent);animation:caret 1s step-end infinite}
@keyframes caret{50%{opacity:0}}
.cta{display:flex;flex-wrap:wrap;gap:16px;margin-top:44px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 34px;font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;text-decoration:none;border:1px solid var(--line-2);transition:background .25s,color .25s,border-color .25s,transform .25s}
.btn-primary{background:var(--tyrian);border-color:var(--tyrian);color:#fff}
.btn-secondary{background:rgba(13,3,7,.7);border-color:#8a4f68;color:var(--text)}
.btn-primary:hover{background:var(--tyrian-2);border-color:var(--tyrian-2);color:#fff}
.btn-secondary:hover{border-color:var(--accent);color:var(--text)}
.scroll-hint{position:absolute;z-index:1;bottom:40px;left:max(60px,calc((100% - 1300px)/2 + 60px));display:flex;align-items:center;gap:12px;min-height:44px;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);text-decoration:none}
.scroll-hint span{display:block;width:40px;height:1px;background:var(--line-2);transition:width .3s,background .3s}
.scroll-hint:hover{color:var(--text)}
.scroll-hint:hover span{width:64px;background:var(--accent)}
.betti{position:absolute;z-index:1;bottom:40px;right:max(60px,calc((100% - 1300px)/2 + 60px));min-height:44px;display:flex;align-items:center;gap:0 18px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-variant-numeric:tabular-nums}
.betti b{font-family:var(--math);font-weight:400;font-size:16px;letter-spacing:0;text-transform:none;color:var(--pale)}
.betti sub{font-family:var(--math);font-size:11px;letter-spacing:0;margin-left:1px}
/* numbers in the maths face: DM Mono's slashed zero would read as an empty set */
.betti .num{display:inline-block;min-width:1.6em;font-family:var(--math);font-size:15px;letter-spacing:0;color:var(--text)}
.eps-ctl{display:inline-flex;align-items:center;gap:10px}
.eps-ctl .num{min-width:1.6em}
#eps{-webkit-appearance:none;appearance:none;width:112px;height:44px;margin:0;background:transparent;cursor:pointer}
#eps::-webkit-slider-runnable-track{height:1px;background:var(--muted)}
#eps::-moz-range-track{height:1px;background:var(--muted)}
#eps::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;margin-top:-6px;border:0;border-radius:50%;background:var(--accent);transition:transform .2s}
#eps::-moz-range-thumb{width:13px;height:13px;border:0;border-radius:50%;background:var(--accent)}
#eps:hover::-webkit-slider-thumb{transform:scale(1.25)}
#eps:focus-visible{outline:1px solid var(--accent);outline-offset:2px}
/* the crosshair shows exactly where a click adds a point: the background and the empty parts of the
   top section; over text and the figure the normal cursor returns, and links and buttons keep the hand */
.hero.can-add #complex,.hero.can-add .hero-inner,.hero.can-add .hero-text{cursor:crosshair}
.hero.can-add .hero-text>:not(.cta),.hero.can-add .diagram{cursor:auto}

/* ---------- diagram beside the name ---------- */
.diagram{flex:1 1 340px;max-width:440px;display:flex;flex-direction:column;gap:10px}
#diagram{display:block;width:100%;height:auto;overflow:visible}
#diagram text{font-family:var(--math);fill:var(--text)}
.diagram figcaption{border-top:1px solid var(--line-2);padding-top:14px}

/* ---------- sections ---------- */
.sec{border-top:1px solid var(--line)}
.sec.alt{background:var(--surface)}
.sec-body{display:flex;flex-direction:column;gap:64px}
.sec-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 28px}
.sec-num{font-family:var(--display);font-size:clamp(34px,5vw,64px);line-height:1.05;letter-spacing:-.01em;color:var(--accent)}
.sec-head h2{font-family:var(--display);font-weight:400;font-size:clamp(34px,5vw,64px);line-height:1.05;letter-spacing:-.01em;color:var(--text)}
.prose{max-width:60ch;display:flex;flex-direction:column;gap:22px}
.prose .runin{font-weight:500;color:var(--text)}
/* short inline maths, with the punctuation against it, stays on one line (site.js) */
.math-glue{white-space:nowrap}
.cite{white-space:nowrap;color:var(--accent);text-decoration:underline dotted;text-decoration-thickness:1px}
.cite:hover{color:var(--gold)}

/* introduction: text beside the dependency figure */
.intro{display:flex;flex-wrap:wrap;gap:64px 96px;align-items:flex-start}
.intro .prose{flex:999 1 420px;min-width:0}
.deps{flex:1 1 380px;max-width:520px;display:flex;flex-direction:column;gap:20px;container-type:inline-size}
.deps svg{display:block;width:100%;height:auto}
.deps text{font-family:var(--mono);font-size:12.5px;text-anchor:middle}
.deps a text{dominant-baseline:central}
.deps .col{font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;fill:var(--muted)}   /* column headings: the subsections of section 3 */
.deps .col .n{fill:var(--accent)}
.deps .n-done rect{fill:var(--tyrian);stroke:var(--tyrian)}
.deps .n-done text{fill:#fff}
.deps .n-now rect{fill:var(--bg);stroke:var(--accent);stroke-width:1.25}
.deps .n-now text{fill:var(--text)}
.deps .n-next rect{fill:var(--bg);stroke:var(--muted);stroke-dasharray:4 4}
.deps .n-next text{fill:var(--body)}
.deps .edge{stroke:var(--muted);stroke-width:1;fill:none}
.deps a{cursor:pointer}
.deps a rect{transition:stroke .2s}
.deps a:hover rect,.deps a:focus-visible rect{stroke:var(--gold);stroke-dasharray:none}
.deps a:focus-visible{outline:none}
/* pointing at a box lights up the chain of topics that lead to it */
.deps .edge,.deps a[data-node]{transition:opacity .25s,stroke .25s}
.deps svg.tracing .edge{opacity:.2}
.deps svg.tracing .edge.lit{opacity:1;stroke:var(--accent);marker-end:url(#dep-arr-lit)}
.deps svg.tracing a[data-node]:not(.lit){opacity:.35}
/* when the figure is drawn small (phones), its lettering is set larger so it stays readable */
@container (max-width:420px){.deps text{font-size:14px}.deps .col{font-size:12px}}
.deps figcaption{display:flex;flex-direction:column;gap:12px}
.legend{display:flex;flex-wrap:wrap;gap:8px 24px}
.legend span{display:inline-flex;align-items:center;gap:10px}
.legend i{display:block;width:22px;height:12px;border:1px solid var(--muted)}
.legend .k-done{background:var(--tyrian);border-color:var(--tyrian)}
.legend .k-now{border-color:var(--accent)}
.legend .k-next{border-style:dashed}

/* preliminaries: timeline */
.timeline{display:flex;flex-direction:column;gap:72px;border-left:1px solid var(--line-2);padding-left:48px}
.tl-item{position:relative;display:flex;flex-wrap:wrap;gap:12px 48px}
.tl-dot{position:absolute;left:-53px;top:8px;width:9px;height:9px;border:1px solid var(--accent);background:var(--bg);transform:rotate(45deg);transition:background .25s,transform .25s}
.tl-date{flex:0 0 190px;padding-top:6px}
.tl-main{flex:999 1 420px;min-width:0;display:flex;flex-direction:column;gap:10px}
.tl-main h3,.sub h3{font-family:var(--display);font-weight:400;font-size:22px;line-height:1.3;color:var(--text);transition:color .25s}
.tl-main .label{color:var(--pale)}
.tl-main p,.sub p{max-width:64ch}

/* current work: numbered subsections */
.subs{display:flex;flex-direction:column;border-top:1px solid var(--line-2)}
.sub{position:relative;display:flex;flex-wrap:wrap;gap:12px 48px;margin:0 -24px;padding:40px 24px;transition:background .3s}
.sub::after{content:"";position:absolute;left:24px;right:24px;bottom:0;height:1px;background:var(--line)}
.sub-meta{flex:0 0 190px;display:flex;flex-direction:column;gap:4px;padding-top:6px}
.sub-meta .n{color:var(--accent)}
.sub-main{flex:999 1 420px;min-width:0;display:flex;flex-direction:column;gap:12px}
.now{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;margin-bottom:-24px}
.fact{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px}
.fact>*,.now>*{min-width:0;max-width:100%}
.piece{display:inline-block;max-width:100%}   /* one item of a list separated by · : kept whole when the line wraps */

/* references */
/* one key column for the whole list, as wide as the longest key, so every entry starts at the same place */
.refs{list-style:none;padding:0;display:grid;grid-template-columns:minmax(84px,max-content) minmax(0,1fr);column-gap:28px;max-width:900px}
.refs li{grid-column:1/-1;display:grid;grid-template-columns:subgrid;row-gap:4px;padding:16px 16px;margin:0 -16px;transition:background .3s}
.refs li::after{content:"";position:absolute;left:16px;right:16px;bottom:0;height:1px;background:var(--line)}
.refs .key{color:var(--accent)}
.refs .entry{min-width:0}
.note-page .refs + p{margin-top:32px}
@supports not (grid-template-columns:subgrid){   /* older browsers: each entry lines up on its own */
  .refs li{display:flex;flex-wrap:wrap;column-gap:28px}
  .refs .key{flex:0 0 84px}
  .refs .entry{flex:999 1 320px}
}

/* correspondence, footer */
.sec-body.contact-body{gap:40px}
.lede{max-width:72ch}
.more a{font-size:14px;padding:12px 0}
.contact-links{display:flex;flex-wrap:wrap;gap:0 40px;font-family:var(--mono);font-size:14px}
.contact-links a{min-width:0;max-width:100%;padding:12px 0}
footer{border-top:1px solid var(--line)}
.foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 32px;padding-top:36px;padding-bottom:36px}
.foot-links{display:flex;flex-wrap:wrap;gap:0 30px}
.foot-link{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);text-decoration:none;padding:12px 0}
.foot-link:hover{color:var(--text)}
.colophon{position:relative;padding-top:20px;padding-bottom:28px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 32px}
.colophon::before{content:"";position:absolute;top:0;left:60px;right:60px;height:1px;background:var(--line)}
.colophon .qed{color:var(--accent);font-family:var(--math);font-size:16px;letter-spacing:0;line-height:1}

/* ---------- hover only where a pointer can hover ---------- */
@media (hover:hover){
  .btn:hover{transform:translateY(-2px)}
  .sub:hover{background:var(--raised)}
  .sub:hover h3,.tl-item:hover h3{color:var(--pale)}
  .tl-item:hover .tl-dot{background:var(--accent);transform:rotate(45deg) scale(1.3)}
  .refs li:hover{background:var(--raised)}
}

/* ---------- smaller screens ---------- */
@media (max-width:1000px){
  .scroll-hint{display:none}
}
@media (max-width:900px){
  /* the top row keeps the bar's full height, so the name and the button don't jump when the menu opens */
  .nav-inner{align-content:flex-start}
  .menu-btn{display:inline-flex;height:84px}
  .nav-links{display:none;flex-basis:100%;flex-direction:column;align-items:flex-start;padding-bottom:8px}
  .site-nav.open .nav-links{display:flex}
  .nav-indicator{display:none}
  .nav-sep{width:100%;height:1px;margin:6px 0}
}
@media (max-width:768px){
  html{scroll-padding-top:68px}
  .wrap{padding-left:28px;padding-right:28px}
  .pad{padding-top:80px;padding-bottom:80px}
  .nav-inner{min-height:68px}
  .menu-btn{height:68px}
  .hero-inner{padding-top:112px;padding-bottom:140px}
  .betti{left:28px;right:28px;bottom:18px;justify-content:flex-start;flex-wrap:wrap;gap:0 18px}
  .now{margin-bottom:-12px}
  .sec-body{gap:48px}
  .timeline{padding-left:28px;gap:56px}
  .tl-dot{left:-33px}
  .tl-date,.sub-meta{padding-top:0}
  .sub{padding-top:32px;padding-bottom:32px}
  .sub-meta{flex-direction:row;gap:14px}
  .colophon::before{left:28px;right:28px}
  .sec-head{column-gap:16px}
  .sec-num,.sec-head h2{font-size:clamp(30px,8.4vw,40px)}
  .foot{flex-direction:column;text-align:center;gap:12px}
  .foot-links{justify-content:center;gap:0 22px}
  .colophon{justify-content:center;text-align:center}
}
@media (max-width:560px){
  .refs{display:block}
  .refs li{display:flex;flex-direction:column}
  .cta{flex-direction:column}
  .cta .btn{min-height:48px;font-size:11.5px}
}

/* a subsection or reference reached from a link glows briefly */
/* drawn as a layer behind the text that fades away, so a hover highlight underneath is never interrupted */
.sub,.refs li{position:relative;isolation:isolate}
.flash::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--raised);pointer-events:none;animation:flash 2.4s ease-out forwards}
@keyframes flash{0%,35%{opacity:1}100%{opacity:0}}

/* ---------- pause control for the moving parts ---------- */
.motion-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:28px;min-height:44px;padding:0;background:transparent;border:0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--muted);cursor:pointer;transition:color .2s}
.motion-btn:hover{color:var(--text)}
.motion-btn svg{width:9px;height:9px;fill:currentColor}
.motion-btn .i-play{display:none}
html.motion-paused .motion-btn .i-play{display:block}
html.motion-paused .motion-btn .i-pause{display:none}
html.motion-paused .caret{animation:none}
/* reduced motion: nothing slides or fades, the page jumps rather than glides, and nothing can be paused */
@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
  html{scroll-behavior:auto}
  .site-nav{animation:none !important}
  .caret,.motion-btn{display:none}
}

/* ---------- single notes and articles, 404: one narrow column ---------- */
.page-narrow{max-width:68ch;margin:0 auto;padding:56px 28px 80px;display:flex;flex-direction:column;gap:28px}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:0 14px;font-size:14px;color:var(--muted)}
.crumbs a{padding:12px 0}
.page-title{font-family:var(--display);font-weight:400;font-size:40px;line-height:1.1;letter-spacing:-.01em;color:var(--text)}
.status{display:inline-block;max-width:100%;color:var(--muted)}   /* kept in one piece unless it is longer than a whole line */
/* notes.html: the subjects inside each folder, on one wrapping line */
.dirs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 24px;font-size:14px}
.dirs a{display:inline-block;padding:6px 0}

/* one note (note-template.html) */
.note-page .page-narrow{max-width:72ch;padding-bottom:96px;display:block}
.note-page .crumbs{margin-bottom:40px}
.note-page h1{margin:10px 0 0;font-family:var(--display);font-weight:400;font-size:clamp(32px,6vw,48px);line-height:1.1;letter-spacing:-.01em;color:var(--text)}
.note-page h2{margin:56px 0 16px;font-family:var(--display);font-weight:400;font-size:24px;line-height:1.3;color:var(--text)}
.note-page h2 .n{color:var(--accent);margin-right:14px}
.note-page p{margin:0 0 20px}
.note-page .abstract{margin:32px 0 0;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.note-page .abstract p{margin:0}
.note-page .stmt{margin:28px 0;padding:18px 22px;background:var(--raised);border:1px solid var(--line)}
.note-page .stmt p:last-child{margin-bottom:0}
.note-page .stmt .head{font-weight:500;color:var(--text)}
.note-page .proof .head{font-style:italic;color:var(--text)}
.note-page .proof .qed{float:right;color:var(--accent);font-family:var(--math)}
.note-page .katex-display{margin:24px 0;overflow-x:auto;overflow-y:hidden;padding:4px 0}
.note-page .katex{font-size:1.12em;color:var(--text)}
.note-page hr{border:0;border-top:1px solid var(--line);margin:56px 0 24px}
.note-page blockquote{margin:28px 0;padding:2px 0 2px 22px;border-left:1px solid var(--accent);color:var(--text)}
.note-page blockquote p:last-child{margin-bottom:0}
/* diagrams set in KaTeX on a grid (see CLAUDE.md): rows line up on their baselines, and site.js draws the
   arrows that curve from the end of one line to the start of the next, like tikz-cd's out=0, in=180 */
.cd-wrap{margin:24px 0;padding:4px 0;overflow-x:auto;overflow-y:hidden}
.cd-wrap:focus-visible{outline:1px solid var(--accent);outline-offset:4px}   /* it can be focused, so it can be scrolled with the keyboard */
.cd{position:relative;display:grid;align-items:baseline;justify-items:center;column-gap:.3em;row-gap:3em;width:max-content;margin:0 auto;padding:0 2em}   /* the padding holds the curves' outer loops */
.cd .snakes{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.cd .snakes path{fill:none;stroke:var(--text);stroke-width:.75;stroke-linecap:round;stroke-linejoin:round}
.cd .snake-label,.cd .cd-label{position:absolute;left:0;top:0;line-height:1;visibility:hidden}   /* placed by site.js */
.cd .snake-label.placed,.cd .cd-label.placed{visibility:visible}
/* a break between parts of an article, in place of headings */
.note-page hr.break{border:0;height:auto;margin:52px 0 48px;text-align:center;overflow:visible}
.note-page hr.break::after{--swash:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 171.55 45.13'%3E%3Cpath d='M2.75 30.96C2.96 30.7 3.56 29.9 4 29.41C4.45 28.91 4.65 28.63 5.41 28.01C6.18 27.38 7.36 26.39 8.58 25.63C9.8 24.88 11.26 24.1 12.74 23.45C14.22 22.81 15.8 22.24 17.47 21.75C19.13 21.26 20.92 20.84 22.71 20.52C24.49 20.19 26.36 19.96 28.16 19.82C29.97 19.68 31.64 19.63 33.53 19.69C35.43 19.75 37.79 19.95 39.53 20.16C41.28 20.38 42.49 20.63 44 20.96C45.5 21.29 47.05 21.7 48.58 22.14C50.1 22.59 51.54 23.07 53.13 23.66C54.72 24.24 55.87 24.65 58.13 25.65C60.39 26.65 60.71 26.67 66.69 29.65C72.68 32.63 89.48 41.22 94.04 43.53L99.14 33.35C94.61 31.05 77.38 22.28 71.97 19.57C66.56 16.85 68.33 17.81 66.67 17.06C65.01 16.32 63.73 15.75 62 15.08C60.27 14.41 58.13 13.61 56.28 13.02C54.43 12.43 52.63 11.95 50.88 11.55C49.14 11.15 47.54 10.85 45.83 10.62C44.13 10.39 42.49 10.23 40.64 10.17C38.79 10.11 36.63 10.11 34.72 10.25C32.8 10.38 30.56 10.75 29.16 10.98C27.75 11.22 27.23 11.4 26.29 11.64C25.36 11.89 24.85 11.98 23.55 12.48C22.24 12.98 19.68 14.06 18.44 14.64C17.2 15.21 16.91 15.44 16.08 15.93C15.26 16.43 14.65 16.74 13.5 17.6C12.34 18.47 10.56 19.82 9.16 21.11C7.76 22.4 6.36 23.87 5.1 25.36C3.84 26.84 2.18 29.22 1.6 30A0.75 0.75 0 0 0 2.75 30.96ZM168.8 14.17C168.59 14.43 167.99 15.23 167.55 15.72C167.1 16.22 166.9 16.5 166.14 17.12C165.38 17.75 164.2 18.74 162.98 19.5C161.76 20.25 160.3 21.03 158.81 21.68C157.33 22.32 155.75 22.89 154.09 23.38C152.43 23.87 150.63 24.29 148.84 24.62C147.06 24.94 145.19 25.18 143.39 25.31C141.58 25.45 139.91 25.5 138.02 25.44C136.12 25.38 133.76 25.18 132.02 24.97C130.28 24.75 129.06 24.5 127.56 24.17C126.05 23.84 124.5 23.44 122.98 22.99C121.45 22.54 120.02 22.06 118.42 21.48C116.83 20.89 115.68 20.48 113.42 19.48C111.16 18.48 110.85 18.46 104.86 15.48C98.88 12.5 82.07 3.91 77.51 1.6L72.41 11.78C76.94 14.08 94.17 22.85 99.58 25.56C105 28.28 103.22 27.32 104.88 28.07C106.54 28.82 107.82 29.38 109.55 30.05C111.28 30.73 113.42 31.52 115.27 32.11C117.12 32.7 118.93 33.18 120.67 33.58C122.41 33.98 124.01 34.28 125.72 34.51C127.43 34.74 129.06 34.9 130.91 34.96C132.76 35.02 134.92 35.02 136.84 34.88C138.75 34.75 140.99 34.38 142.39 34.15C143.8 33.92 144.33 33.74 145.26 33.49C146.2 33.24 146.7 33.15 148.01 32.65C149.31 32.15 151.87 31.07 153.11 30.49C154.36 29.92 154.64 29.69 155.47 29.2C156.29 28.7 156.9 28.39 158.05 27.53C159.21 26.66 161 25.31 162.4 24.02C163.8 22.73 165.2 21.26 166.46 19.77C167.72 18.29 169.37 15.91 169.95 15.13A0.75 0.75 0 0 0 168.8 14.17Z'/%3E%3C/svg%3E");content:"";display:block;width:10ch;aspect-ratio:171.6/45.1;margin:0 auto;background:var(--accent);-webkit-mask:var(--swash) center/contain no-repeat;mask:var(--swash) center/contain no-repeat}   /* a broken swash as wide as ten characters of the text (10ch), drawn as a broad-nib stroke; a mask, so it takes the accent colour */
/* Articles take their cues from traditional British book typography, kept light enough for a screen and for
   monospaced type: a dateline under the title, a woodcut initial with the rest of its line in small capitals, a
   swash between sections, a quotation in italic beside the site's pink rule with its source set off by a dash, and
   a floral heart at the end. Paragraphs keep the site's spacing. The pink is the rubric: the initial, the
   ornaments, the figure numbers and the citation keys. */
.article-page .dateline{margin-top:14px}
.article-page .abstract{margin-bottom:40px}
.article-page .abstract p{color:var(--text)}
.article-page main > p:not(.label){hanging-punctuation:first allow-end}
.article-page blockquote p:not(.label){font-style:italic}
.article-page blockquote .label{margin-top:12px}
.article-page blockquote .label::before{content:"\2014\2002"}
.article-page main a[href^="http"]:not(.cite)::after{--arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3 1.5h5.5V7M8.5 1.5 1.5 8.5' fill='none' stroke='black' stroke-width='1.3'/%3E%3C/svg%3E");content:"";display:inline-block;width:.62em;height:.62em;margin-left:.18em;vertical-align:.05em;background:currentColor;-webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat}   /* to another site */
.article-page main > p:has(+ hr:not(.break))::after{--heart:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21.44 22'%3E%3Cpath d='M12.36 5.46Q12.5 4.77 12.5 4.14Q12.5 3.23 12.09 2.65Q11.74 2.17 10.97 2.17Q10.54 2.17 10.23 2.43Q9.95 2.65 9.95 3.03Q9.95 3.87 10.57 4.35Q11.63 5.17 12.36 5.46ZM13.22 7.17Q12.92 8.23 12.26 9.37Q13.61 8.41 14.84 8.41Q16.62 8.41 17.46 9.57Q18.11 10.46 18.11 11.8Q18.11 14.93 13.68 16.62Q11.49 17.45 11.49 18.55Q11.49 19.97 12.99 19.97Q14.65 19.97 14.88 19.37Q15.61 17.48 16.39 17.48Q17.29 17.48 17.29 18.77Q17.29 21 12.78 21Q9.85 21 7.19 18.81Q4.35 16.47 4.35 12.83Q4.35 7.72 8.09 7.72Q9.55 7.72 10.71 9.74Q11.82 7.58 12.05 6.62Q10.6 5.93 7.3 3.49Q6.32 2.76 5.26 2.76Q4.07 2.76 3.16 3.88Q2.59 4.61 2.59 5.37Q2.59 5.9 2.89 6.17Q3.19 6.44 3.19 6.86Q3.19 7.19 2.82 7.48Q2.3 7.88 2.02 7.88Q1.56 7.88 1.2 7.23Q1 6.87 1 5.8Q1 4.14 2.65 2.82Q3.98 1.74 5.67 1.74Q7.16 1.74 7.88 2.28Q7.88 2.28 8.95 3.09Q8.95 1.9 9.54 1.46Q10.14 1 11.26 1Q12.35 1 13.05 1.89Q13.78 2.83 13.78 4.08Q13.78 5.2 13.55 6.07Q14.41 6.32 15.64 6.32Q16.73 6.32 17.33 5.84Q17.98 5.33 17.98 4.88Q17.98 3.98 17.68 3.72Q17.07 3.21 17.07 2.91Q17.07 2.1 17.38 1.7Q17.82 1.13 18.62 1.13Q19.55 1.13 20.15 2.13Q20.44 2.6 20.44 3.36Q20.44 5.13 18.39 6.47Q17.03 7.38 15.31 7.38Q14.38 7.38 13.22 7.17Z'/%3E%3C/svg%3E");content:"";display:inline-block;width:0.975em;height:1.0em;margin-left:.55em;vertical-align:-.15em;background:var(--accent);-webkit-mask:var(--heart) center/contain no-repeat;mask:var(--heart) center/contain no-repeat}   /* the end: a floral heart, \2766 (not the tombstone that ends a proof) */
/* the initial: a Goudy Initialen woodcut, three lines deep. Its glyphs are squares .8em high on the baseline, with
   no descent, and the font's line box is .8em too; so at 5.5em (4.4em of the body) and line-height .8, the box is
   the woodcut, and it is set .565em of the body below the paragraph's top, where DM Mono's capitals begin (body
   at line-height 1.85). Each woodcut is .84em wide with .04em to spare on the right. */
.article-page .abstract + p::first-letter{float:left;font-family:"Goudy Initialen",var(--display);font-weight:400;font-size:5.5em;line-height:.8;margin:0.1027em 0.1055em 0 0;color:var(--accent)}
.article-page .abstract + p::first-line{font-variant-caps:small-caps;letter-spacing:.04em}
/* figures in notes and articles: a drawing with KaTeX labels laid over it, or a .cd diagram, and a caption */
.note-page .art-fig{margin:36px 0 40px}
.note-page .art-fig .scroll{overflow-x:auto;overflow-y:hidden}
.note-page .art-fig .art{position:relative;width:100%;max-width:440px;min-width:260px;margin:0 auto}
.note-page .art-fig .art svg{display:block;width:100%;height:auto;overflow:visible}
.note-page .art-fig .lab{position:absolute;transform:translate(-50%,-50%);line-height:1;white-space:nowrap}
.note-page .art-fig .lab.end{transform:translate(-100%,-50%)}   /* set by its right edge */
.note-page .art-fig figcaption{margin-top:18px;font-size:13.5px;line-height:1.8;color:var(--muted)}
.note-page .art-fig figcaption .n{color:var(--accent);margin-right:.4em}
.art .disc{fill:none;stroke:var(--pale);stroke-width:1.1}
.art .lens{fill:var(--accent);fill-opacity:.32}
.art .turn{fill:none;stroke:var(--muted);stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
.art .lead{fill:none;stroke:var(--accent);stroke-width:.9}
.art .origin{fill:var(--bg);stroke:var(--pale);stroke-width:1.1}

/* 404 */
.big-num{font-family:var(--display);font-size:clamp(72px,18vw,140px);line-height:1;color:var(--accent);letter-spacing:-.02em}

/* ---------- printing: black on white, no moving parts ---------- */
@media print{
  :root{color-scheme:light;--bg:#fff;--surface:#fff;--raised:#fff;--line:#ccc;--line-2:#999;--text:#000;--body:#111;--muted:#555;--accent:#6b0a40;--pale:#6b0a40;--tyrian:#6b0a40}
  html,body{background:#fff !important}
  .site-nav,#complex,.betti,.scroll-hint,.cta,.role,.menu-btn{display:none !important}
  .hero{min-height:0;display:block}
  .hero-inner{padding-top:0;padding-bottom:24px}
  .pad{padding-top:28px;padding-bottom:28px}
  .sec,.sec.alt{background:#fff;border-color:#ccc}
  #diagram path,#diagram g{stroke:#000}
  #diagram text{fill:#000}
  a{color:inherit;text-decoration:none}
  .contact-links a::after{content:" — " attr(href);color:#555}
  .sub,.tl-item,.refs li{break-inside:avoid}
  .note-page hr.break::after,.article-page .abstract + p::first-letter,.article-page blockquote,.legend i{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .flash::before,.sidenotes,.skip-link{display:none !important}
  .reveal{opacity:1 !important;transform:none !important;animation:none !important}
}

/* ---------- arrival: the top section comes in as a short sequence ---------- */
@keyframes rise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  html:not(.no-intro) .reveal{opacity:0;transform:translateY(14px);animation:rise .9s cubic-bezier(.2,.7,.2,1) var(--d,0s) forwards}
}

/* ---------- a quieter readout: the scale control opens on hover or keyboard focus ---------- */
/* (closed, it also gives back the gap beside it, so the readout's edge stays put) */
@media (hover:hover){
  .eps-ctl{max-width:0;margin-right:-18px;opacity:0;overflow:hidden;white-space:nowrap;transition:max-width .45s cubic-bezier(.65,0,.35,1),margin-right .45s cubic-bezier(.65,0,.35,1),opacity .3s}
  .betti:hover .eps-ctl,.betti:focus-within .eps-ctl{max-width:420px;margin-right:0;opacity:1}
}

/* ---------- section 3: references in the margin ---------- */
.sidenotes{display:none}
@media (min-width:1180px){
  .sidenotes{display:flex;flex-direction:column;gap:12px;flex:0 1 270px;min-width:0;padding-top:44px;font-size:12px;line-height:1.65;color:var(--muted)}
  .sidenote{margin:0;transition:color .25s}
  .sidenote .key{color:var(--accent);margin-right:2px}
  .sidenote i{font-style:italic}
  .sidenote.lit{color:var(--text)}
}

/* ---------- articles: references in the right margin, level with their citations (site.js) ---------- */
.article-page main{position:relative}
.article-page .sidenotes{display:none}
@media (min-width:1240px){
  .article-page .sidenotes{display:block;position:absolute;top:0;left:calc(100% + 20px);width:240px;height:100%;padding:0;font-size:12px;line-height:1.65;color:var(--muted)}
  .article-page .sidenote{position:absolute;left:0;right:0;visibility:hidden}
  .article-page .sidenote.placed{visibility:visible}   /* site.js places each one beside its citation first */
  .article-page .sidenote a{color:inherit}
}
/* an article's reading time (site.js) follows the date in its label */
.label > .read-time{white-space:nowrap}
.label > .read-time:not(:empty)::before{content:" \b7\20"}
[data-read-time]:empty{display:none}


/* ---------- the pages in notes/: a title block, then one numbered section per subject, each with its own figure ---------- */
.topic-head{display:flex;flex-direction:column;gap:56px;padding-top:56px;padding-bottom:104px}
.topic-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:48px 64px;align-items:end}
.topic-intro.single{grid-template-columns:minmax(0,1fr)}
.topic-title{display:flex;flex-direction:column;gap:28px;min-width:0}
/* sized from the room it has: "Mathematics/" is about 7.1em wide, so it always fits its column */
.topic-title h1{font-family:var(--display);font-weight:400;font-size:clamp(30px,calc((100vw - 80px) / 7.8),96px);line-height:.98;letter-spacing:-.01em;color:var(--text);overflow-wrap:normal}
@media (min-width:1200px){.topic-intro:not(.single) .topic-title h1{font-size:clamp(30px,calc((100vw - 580px) / 7.4),96px)}}
.topic-title h1 .slash{color:var(--accent)}
.topic-title p{max-width:60ch}
/* contents: one line per subject, with a dotted leader to the number of entries */
.toc{min-width:0}
.toc .label{margin-bottom:12px}
.toc ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2)}
.toc li{border-bottom:1px solid var(--line)}
.toc a{display:flex;align-items:baseline;align-items:last baseline;gap:14px;padding:11px 0;color:var(--body);text-decoration:none;transition:color .2s}
.toc .n{flex:0 0 2.4em;align-self:flex-start;color:var(--accent)}
.toc .t{min-width:0}
.toc .dots{flex:1 1 24px;min-width:24px;border-bottom:1px dotted var(--line-2);transform:translateY(-5px);transition:border-color .2s}
.toc .c{color:var(--muted);font-family:var(--math);font-size:16px;font-variant-numeric:tabular-nums}
.toc a:hover,.toc a:focus-visible{color:var(--text)}
.toc a:hover .dots,.toc a:focus-visible .dots{border-color:var(--accent)}

/* a subject: what it covers and its entries on the left, its figure on the right */
.topic .sec-body{gap:56px}
.topic .sec-head{flex-wrap:nowrap}
.topic .sec-head h2{min-width:0}
.topic .pad{padding-top:104px;padding-bottom:104px}
.plate-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);grid-template-rows:auto 1fr;grid-template-areas:"about fig" "docs fig";gap:40px 96px;align-items:start}
.plate-about{grid-area:about;display:flex;flex-direction:column;gap:18px;max-width:64ch}
.plate-row>.docs,.plate-row>.empty{grid-area:docs}
.empty{margin:0}
.doc-main .dirs{margin-top:2px}

/* entries: a catalogue, set like the subsections of section 3 on the home page */
.docs{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2)}
.doc{position:relative;display:flex;flex-wrap:wrap;gap:8px 32px;margin:0 -16px;padding:24px 16px;transition:background .3s}
.doc::after{content:"";position:absolute;left:16px;right:16px;bottom:0;height:1px;background:var(--line)}
.doc-meta{flex:0 0 150px;display:flex;flex-direction:column;gap:2px;padding-top:4px}
.doc-meta .n{color:var(--accent)}
.doc-main{flex:999 1 300px;min-width:0;display:flex;flex-direction:column;gap:8px}
.doc-main h3{font-family:var(--display);font-weight:400;font-size:19px;line-height:1.4;color:var(--text);transition:color .25s}
.doc-main p{font-size:14px;line-height:1.8;max-width:64ch}
@media (hover:hover){
  .doc:hover{background:var(--raised)}
  .doc:hover h3{color:var(--pale)}
}
.topic-end{padding-top:40px;padding-bottom:56px;font-size:14px}

/* ---------- figures on the topic pages ---------- */
.plate{grid-area:fig;display:flex;flex-direction:column;gap:16px;min-width:0;container-type:inline-size}
.plate svg{display:block;width:100%;height:auto;overflow:visible}
.plate figcaption{border-top:1px solid var(--line-2);padding-top:14px}
.plate text{font-family:var(--math);font-size:17px;fill:var(--text);text-anchor:middle;transition:fill .3s}
.plate text.word{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;fill:var(--muted)}
.plate .muted-t{fill:var(--muted)}
.plate .acc-t{fill:var(--accent)}
.plate .ink,.plate .soft,.plate .faint,.plate .acc,.plate .acc-soft{fill:none;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s}
.plate .ink{stroke:var(--pale);stroke-width:1.2}
.plate .soft{stroke:var(--muted);stroke-width:1}
.plate .faint{stroke:var(--line-2);stroke-width:1}
.plate .acc{stroke:var(--accent);stroke-width:1.3}
.plate .acc-soft{stroke:var(--pale);stroke-width:1.3}
.plate .thick{stroke-width:1.6}
.plate .dash{stroke-dasharray:4 4}
.plate .pt{fill:var(--pale)}
.plate .pt-open{fill:var(--bg);stroke:var(--pale);stroke-width:1.2}
.plate .acc-fill{fill:var(--accent)}
.plate .tip{fill:var(--pale)}
.plate .bar{fill:var(--tyrian);transition:fill .3s}
.sec.alt .plate .pt-open{fill:var(--surface)}
/* pointing at a figure brings out what it is about */
.plate:hover .em{stroke:var(--accent)}
.plate:hover .em2{stroke:var(--gold)}
.plate:hover .em-t{fill:var(--accent)}
.plate:hover .em2-t{fill:var(--gold)}
.plate:hover .em-bar{fill:var(--tyrian-2)}
/* figures too small to read at phone width get larger lettering */
@container (max-width:380px){.plate text{font-size:19px}.plate text.word{font-size:12px}}

/* arrival: site.js arms the figures, and each draws itself as it comes into view (not when motion is
   paused or reduced). Strokes marked d have pathLength="1"; --i staggers them. */
.plates-armed .plate .d{stroke-dasharray:1 1;stroke-dashoffset:1}
.plates-armed .plate .f{opacity:0}
.plates-armed .plate svg.drawn .d{stroke-dashoffset:0;transition:stroke-dashoffset 1.1s cubic-bezier(.65,0,.35,1) calc(var(--i,0)*.16s),stroke .3s}
.plates-armed .plate svg.drawn .f{opacity:1;transition:opacity .6s ease calc(.35s + var(--i,0)*.16s),fill .3s,stroke .3s}
/* a point that runs along a path while the figure is pointed at (the contour, the worldline); site.js
   starts and stops it, and it stays hidden wherever that cannot happen */
.plate .traveller{fill:var(--gold);opacity:0;transition:opacity .25s}
.can-travel .plate:hover .traveller{opacity:1}

@media (max-width:1199px){
  .topic-intro{grid-template-columns:minmax(0,1fr)}
  .toc{max-width:560px}
}
@media (max-width:1000px){
  .plate-row{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"about" "fig" "docs"}
  .plate{max-width:460px}
}
@media (max-width:768px){
  .topic-head{gap:40px;padding-top:40px;padding-bottom:72px}
  .topic .pad{padding-top:72px;padding-bottom:72px}
  .doc{padding-top:20px;padding-bottom:20px}
  /* an entry's number and details become one line above its title, across the whole column; each item stays
     whole, and the line breaks only after a dot, never between a number and its dot */
  .doc-meta{display:block;flex-basis:100%;padding-top:0}
  .doc-meta span{display:inline;white-space:nowrap}
  .doc-meta span+span::before{content:"\a0\b7\20";white-space:normal;color:var(--line-2)}   /* no-break space, dot, space */
}
@media (max-width:360px){
  .topic .sec-num,.topic .sec-head h2{font-size:28px}
}
@media print{
  .plates-armed .plate .d{stroke-dashoffset:0}
  .plates-armed .plate .f{opacity:1}
  .doc,.plate{break-inside:avoid}
  .plate .bar{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}