:root{
    /* Type scale: mono .62/.72, small .86, text .96, body 1.05, large 1.12, lead 1.25; display sizes above. */
    --paper: #f6f2e8;
    --paper-deep: #efe9da;
    --ink: #1a1612;
    --ink-soft: #4a4239;
    --ink-softer: #7a6f60;
    --rule: #c9beac;
    --rule-soft: #ddd2bf;
    --rubric: #8a2a1a;
    --rubric-deep: #6f2114;
    --selection-bg: #d9cdb6;
    --selection-acrostic-bg: #8a2a1a;
    --selection-acrostic-fg: #f6f2e8;

    /* Cormorant Carons is Cormorant Garamond's č, ř, ě, and the rest, with
       the short caron it sets over capitals in place of the tall wedge
       (scripts/carons.py). It holds those letters and nothing else. */
    --serif: "Cormorant Carons", "Cormorant Garamond", "EB Garamond", "Iowan Old Style", "Hoefler Text", Georgia, serif;
    --mono: "JetBrains Mono", "iA Writer Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Characters per line — the one number that sets how wide text runs,
       everywhere: essays, intros, the homepage, lists, the CV. It counts real
       characters of body text, not CSS `ch` (the width of a "0", which in
       Cormorant is a quarter wider than the average letter). Every text column
       is this wide, so their edges line up; larger type in the same column
       gets proportionally fewer characters. 88 is the homepage's original
       column. Raise it for wider text, lower it for narrower. */
    --cpl: 88;
    /* Average width of a character of Cormorant body text, measured from the
       site's own prose. Re-measure if the body face changes. */
    --char: 0.386rem;
    /* The reader's own adjustment — Normal 1 · Wide 1.2, from the
       foot (src/client/measure.js). Always relative to --cpl above. */
    --cpl-scale: 1;
    --measure: calc(var(--cpl) * var(--cpl-scale) * var(--char));
    --margin-w: 24ch;
    --gap: 4rem;
  }

  *{ box-sizing: border-box; }

  /* Lists in prose (Markdown lists carry no class; endnotes have their own).
     A step smaller than the text around them, tight within an item, room
     between items; numbers in the rubric, and bullets a wedge — Cormorant's
     own triangular bullet. */
  :is(.section-intro, article.body, .about, .diss, .statement, .interest, .video-card) :is(ol, ul):not([class]):not(.endnotes > ol){
    font-size: 0.94em;
    line-height: 1.48;
    margin: 0.9em 0 1em;
    padding-left: 1.5em;
  }
  :is(.section-intro, article.body, .about, .diss, .statement, .interest, .video-card) :is(ol, ul):not([class]):not(.endnotes > ol) > li + li{ margin-top: 0.6em; }
  :is(.section-intro, article.body, .about, .diss, .statement, .interest, .video-card) ol:not([class]):not(.endnotes > ol) > li::marker{ color: var(--rubric); font-variant-numeric: oldstyle-nums; }
  :is(.section-intro, article.body, .about, .diss, .statement, .interest, .video-card) ul:not([class]){ list-style: none; }
  :is(.section-intro, article.body, .about, .diss, .statement, .interest, .video-card) ul:not([class]) > li{ position: relative; }
  :is(.section-intro, article.body, .about, .diss, .statement, .interest, .video-card) ul:not([class]) > li::before{ content: "\2023"; position: absolute; left: -1em; color: var(--rubric); }

  /* Chinese (marked by the build, scripts/lib/cjk.ts): Cactus Classical Serif,
     a Ming face from old printed books, to answer Cormorant's Garamond. A touch
     smaller, so its height sits with the Latin; never italic, since Chinese
     has no italics to fake. */
  span[lang="zh-Hant"]{
    font-family: "Cactus Classical Serif", "Noto Serif TC", "Songti TC", serif;
    font-weight: 400;
    font-size: 0.9em;
    font-style: normal;
    font-variant: normal;
    letter-spacing: 0.02em;
    text-transform: none;
  }

  /* Greek (marked by the build, scripts/lib/greek.ts): Literata, since
     Cormorant has none. Light, so it sets as dark as Cormorant's Latin, and
     smaller, so the x-heights meet; its optical size follows the text size.
     Its own features only: Cormorant's stylistic set is not Literata's. */
  span[lang="grc"]{
    font-family: "Literata", var(--serif);
    font-weight: 300;
    font-size: 0.76em;
    font-feature-settings: normal;
  }
  :is(strong, b) span[lang="grc"]{ font-weight: 500; }

  html, body{
    margin: 0; padding: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--serif);
    font-size: 19px;
    line-height: 1.55;
    font-feature-settings: "kern", "liga", "onum" 1, "ss01" 1;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* No text inflation: zoomed out, iOS Safari enlarges small type more than
       large, until a date in mono outgrows the title beside it. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  /* Subtle paper grain — almost invisible. Laid over the page (z-index above
     .page's), so the paper of the sticky brow is grained like the rest and
     does not show as a lighter box. */
  body::before{
    content: "";
    position: fixed; inset: 0;
    pointer-events: none;
    background-image:
      radial-gradient(rgba(26,22,18,0.018) 1px, transparent 1px),
      radial-gradient(rgba(26,22,18,0.014) 1px, transparent 1px);
    background-size: 3px 3px, 7px 7px;
    background-position: 0 0, 1px 2px;
    mix-blend-mode: multiply;
    z-index: 3;
  }

  ::selection{
    background: var(--selection-bg);
    color: var(--ink);
  }
  .acrostic-letter::selection{
    background: var(--selection-acrostic-bg);
    color: var(--selection-acrostic-fg);
  }
  /* Acrostic letters — illuminated initials revealed on hover.
     A hidden-by-default Easter egg: the head link's hover state lights
     the rubric block. Anyone who hovers a section discovers the conceit. */
  .acrostic-letter{
    font-variant-caps: normal;
    text-transform: uppercase;
    color: var(--ink);
    background-color: transparent;
    padding: 0;
    margin: 0;
    border-radius: 1px;
    box-shadow: 0 0 0 0 transparent;
    transition: background-color 220ms ease, box-shadow 220ms ease;
  }
  .head a:hover .acrostic-letter,
  .acrostic-letter:hover{
    background-color: rgba(138, 42, 26, 0.18);
    box-shadow:
      0 0 0 0.08em rgba(138, 42, 26, 0.18),
      inset 0 -0.05em 0 rgba(138, 42, 26, 0.45);
  }
  /* On a true selection, the ::selection rule above takes over. */

  a{
    color: var(--ink);
    text-decoration: underline;
    text-decoration-thickness: 0.5px;
    text-underline-offset: 0.18em;
    text-decoration-color: var(--rule);
    transition: text-decoration-thickness 100ms ease, text-decoration-color 100ms ease;
  }
  a:hover{
    text-decoration-thickness: 1px;
    text-decoration-color: var(--ink-softer);
  }

  /* Layout shell */
  .page{
    position: relative;
    z-index: 2;
    min-height: 100vh;
    padding: 4rem clamp(1.25rem, 7vw, 6rem) 6rem;
    max-width: 1480px;
    margin: 0 auto;
  }

  /* Top brow */
  .brow{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem 2rem;
    flex-wrap: wrap;
    border-bottom: 0.5px solid var(--rule);
    padding-bottom: 1.25rem;
    margin-bottom: 3rem;
  }
  .brow .name{
    font-family: var(--serif);
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: 0.01em;
  }
  .brow .name a{ text-decoration: none; }
  .brow .name a:hover{ text-decoration: none; color: var(--ink); }
  .brow .meta{
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--ink-soft);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  /* Brow nav — the seven sections, small, on inner pages */
  .brow-nav{ display: flex; gap: 0.3rem 1.3rem; flex-wrap: wrap; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; margin-left: auto; }
  .brow-nav a{ text-decoration: none; color: var(--ink-soft); border-bottom: 0.5px solid transparent; padding-bottom: 1px; }
  /* The current section is underlined in the rubric; a hover, more lightly. */
  .brow-nav a:hover{ color: var(--ink); border-bottom-color: var(--rule); }
  .brow-nav a[aria-current]{ color: var(--ink); border-bottom-color: var(--rubric); }
  .brow-nav .acrostic-letter{ color: var(--rubric); }
  .page:has(> #band) .brow-nav{ display: none; }
  /* On home the name is the headline */
  .page:has(> #band) > .brow{ padding-bottom: 1.1rem; margin-bottom: 2.4rem; }
  .page:has(> #band) > .brow .name{ font-size: 1.9rem; font-weight: 500; letter-spacing: -0.005em; line-height: 1; }
  /* Home: the brow sticks, shrinks once scrolled, and its section links come in
     one by one as their rail entries pass under it (src/client/brow.js). */
  .page:has(> #band) > .brow{ position: sticky; top: 0; z-index: 5; background: var(--paper); padding-top: 1rem; margin-top: -1rem; transition: padding 0.3s; }
  .page:has(> #band) > .brow .name{ transition: font-size 0.3s; }
  .page:has(> #band).compact > .brow{ padding-top: 0.7rem; padding-bottom: 0.7rem; }
  .page:has(> #band).compact > .brow .name{ font-size: 1.12rem; }
  .page:has(> #band) .brow-nav.live{ display: flex; }
  .page:has(> #band) .brow-nav.live a{ opacity: 0; transform: translateY(0.35rem); transition: opacity 0.25s, transform 0.25s; pointer-events: none; }
  .page:has(> #band) .brow-nav.live a.in{ opacity: 1; transform: none; pointer-events: auto; }
  /* Every other page: the brow sticks too, slips away while the reader
     scrolls down, and comes back on any scroll up (src/client/brow.js), so
     the sections are never a long way off. */
  .page:not(:has(> #band)) > .brow{ position: sticky; top: 0; z-index: 5; background: var(--paper); padding-top: 1rem; margin-top: -1rem; transition: transform 0.25s ease; }
  .page:not(:has(> #band)) > .brow.tucked:not(:focus-within){ transform: translateY(-100%); }
  /* What a link lands on sits a little below the top of the window. */
  #content [id]{ scroll-margin-top: 1.5rem; }

  /* Home layout — the rail on the left, the main column beside it, brow and foot spanning both */
  .page:has(> #band){ display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 0 clamp(3rem, 7vw, 7rem); align-items: start; }
  .page:has(> #band) > .brow, .page:has(> #band) > .foot{ grid-column: 1 / -1; }
  .page:has(> #band) > #band{ grid-column: 1; grid-row: 2; }
  .page:has(> #band) > #content{ grid-column: 2; grid-row: 2; }

  /* The rail — the acrostic, stacked so it reads down the left edge */
  .rail{ align-self: start; }
  .rail img{ display: block; width: 100%; max-width: 11rem; aspect-ratio: 2 / 3; object-fit: cover; filter: saturate(0.92); border: 0.5px solid var(--rule); margin-bottom: 1.8rem; background: var(--paper-deep); }
  .rail ul{ list-style: none; margin: 0; padding: 0; border-top: 0.5px solid var(--rule); }
  .rail li{ padding: 0.7rem 0; border-bottom: 0.5px dashed var(--rule-soft); }
  .rail li:last-child{ border-bottom: 0.5px solid var(--rule); }
  .rail .head{ display: block; font-size: 1.25rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; line-height: 1.1; text-decoration: none; font-feature-settings: "kern" 1, "lnum" 1; }
  .rail .head:hover{ color: var(--rubric); }
  .rail .head:hover .acrostic-letter{ background-color: rgba(138,42,26,0.18); box-shadow: 0 0 0 0.08em rgba(138,42,26,0.18), inset 0 -0.05em 0 rgba(138,42,26,0.45); }
  .rail .elab{ display: block; font-style: italic; font-size: 0.86rem; color: var(--ink-softer); margin-top: 0.15rem; line-height: 1.3; }
  .rail .fleuron{ color: var(--rubric); margin: 1rem 0 0; font-size: 0.86rem; }
  .rail .abbr{ display: none; }
  .rail .acrostic-letter{ color: var(--rubric); }

  /* Home main column */
  .home-main{ display: grid; gap: 3.2rem; max-width: var(--measure); }
  .home-main .statement, .home-main .biblio, .home-main .biblio .dek{ max-width: none; }
  .statement{ max-width: var(--measure); font-size: 1.25rem; line-height: 1.6; text-wrap: pretty; margin: 0; }
  .statement .m-portrait{ display: none; }
  .statement p{ margin: 0 0 0.9em; }
  .statement p:last-child{ margin: 0; }
  /* The one label style: homepage and rail labels, group heads, CV heads. */
  .home-main .label, .phil-rail .label, .group h2, .cv-section h3{ font-family: var(--serif); font-variant: small-caps; letter-spacing: 0.06em; font-size: 1.05rem; font-weight: 600; line-height: 1.3; color: var(--rubric); margin: 0 0 0.8rem; }
  .home-main .sectionhead .label{ margin: 0; }
  .sectionhead{ display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0 0 0.8rem; }
  .sectionhead .more{ font-size: 0.86rem; font-style: italic; color: var(--ink-softer); text-decoration: none; }
  .sectionhead .more:hover{ color: var(--rubric); }
  .biblio.tagged li{ grid-template-columns: 4.6rem minmax(0, 1fr); column-gap: 1.1rem; }
  .biblio .tags{ grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 0.35rem 0.4rem; margin-top: 0.35rem; }
  .biblio .tag{ font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-softer); border: 0.5px solid var(--rule); padding: 0.12rem 0.45rem; border-radius: 1px; white-space: nowrap; }
  .biblio .tag.sub{ border-style: dashed; }

  /* Bibliography */
  .biblio{
    list-style: none;
    margin: 0; padding: 0;
    max-width: var(--measure);
  }
  .biblio li{
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr) 9rem;
    gap: 0.1rem 1.5rem;
    align-items: baseline;
    padding: 0.7rem 0;
    border-bottom: 0.5px dashed var(--rule-soft);
  }
  .biblio li:first-child{ border-top: 0.5px solid var(--rule); }
  .biblio li:last-child{ border-bottom: 0.5px solid var(--rule); }
  .biblio .date{
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--ink-soft);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .biblio .title{
    font-size: 1.05rem;
    font-style: italic;
    line-height: 1.4;
  }
  .biblio .title a{ text-decoration-color: transparent; }
  .biblio .title a:hover{ text-decoration-color: var(--ink-softer); }
  .biblio .section{
    font-family: var(--serif);
    font-variant: small-caps;
    letter-spacing: 0.08em;
    font-size: 0.86rem;
    color: var(--ink-soft);
    text-align: right;
  }
  .biblio .dek{
    grid-column: 2 / -1;
    font-style: italic;
    color: var(--ink-soft);
    font-size: 0.96rem;
    line-height: 1.5;
    margin-top: 0.1rem;
  }

  /* Concert diary — interleaved past & upcoming */
  .biblio li.upcoming{ color: var(--ink-softer); }
  .biblio li.upcoming .title{ font-style: italic; }
  .biblio li.upcoming .title a,
  .biblio li.upcoming .date,
  .biblio li.upcoming .section{ color: var(--ink-softer); }
  .biblio li.upcoming .section{ font-variant: small-caps; letter-spacing: 0.1em; color: var(--rubric); opacity: 0.75; }
  .biblio li.now-rule{ border-bottom: 0.5px solid var(--rule); }
  .diary-marker{
    display: grid;
    grid-template-columns: 8.5rem 1fr;
    gap: 1.5rem;
    align-items: baseline;
    padding: 0.45rem 0;
    font-family: var(--mono);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rubric);
    max-width: var(--measure);
  }

  /* The diary by year: a line of years to jump by, and each year's head over its concerts. */
  .diary-years{ display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; margin: 0 0 1.4rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; }
  .diary-years a{ color: var(--ink-soft); text-decoration: none; border-bottom: 0.5px solid transparent; padding-bottom: 1px; }
  .diary-years a:hover{ color: var(--ink); border-bottom-color: var(--rubric); }
  .diary-year{ font-family: var(--mono); font-size: 0.72rem; font-weight: 400; letter-spacing: 0.14em; color: var(--rubric); margin: 2.2rem 0 0.6rem; }
  .diary-years + .diary-year, .diary-years + .biblio + .diary-year{ margin-top: 1.4rem; }

  /* Every page but home: on a short page the foot keeps to the bottom of the
     window, #content growing to fill. A flex item's margins no longer meet
     the brow's and the foot's, so the space above and below is set inside
     #content, where it collapses with its first and last children as before. */
  .page:not(:has(> #band)){ display: flex; flex-direction: column; }
  .page:not(:has(> #band)) > #content{ flex: 1 0 auto; }
  .page:not(:has(> #band)) > #content > :first-child{ margin-top: 0; }
  .page:not(:has(> #band)) > #content::after{ content: ""; display: block; margin-top: 5rem; }
  .page:not(:has(> #band)) > .foot{ margin-top: 0; }

  /* Foot rule + persistent links */
  .foot{
    margin-top: 5rem;
    padding-top: 1.25rem;
    border-top: 0.5px solid var(--rule);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 2rem;
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--ink-soft);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    flex-wrap: wrap;
  }
  .foot .foot-mark{
    color: var(--rubric);
    letter-spacing: 0.18em;
  }
  .foot .foot-links{
    display: flex;
    gap: 1.6rem;
    align-items: baseline;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .foot .foot-links a{
    color: var(--ink-soft);
    text-decoration: none;
    border-bottom: 0.5px solid transparent;
    padding-bottom: 1px;
    transition: color 120ms ease, border-color 120ms ease;
  }
  .foot .foot-links a:hover{
    color: var(--ink);
    border-bottom-color: var(--rubric);
  }
  /* Text width — the reader's choice, in the same hand as the links */
  .measure-ctl{ display: flex; gap: 0.9rem; align-items: baseline; }
  .measure-ctl .measure-label{ color: var(--ink-softer); }
  .measure-ctl button{
    font: inherit; letter-spacing: inherit; text-transform: inherit;
    color: var(--ink-softer); background: none; border: 0; padding: 0 0 1px; cursor: pointer;
    border-bottom: 0.5px solid transparent;
    transition: color 120ms ease, border-color 120ms ease;
  }
  .measure-ctl button:hover{ color: var(--ink); }
  .measure-ctl button[aria-pressed="true"]{ color: var(--ink); border-bottom-color: var(--rule); }
  .measure-ctl button:focus-visible{ outline: 1px solid var(--rubric); outline-offset: 3px; }
  /* On a phone the column is the screen; there is nothing to choose. */
  @media (max-width: 860px){ .measure-ctl{ display: none; } }

  /* ---------- Reading page ---------- */
  .reading{
    display: grid;
    grid-template-columns: minmax(0, var(--measure)) minmax(0, var(--margin-w));
    gap: var(--gap);
    align-items: start;
    margin-top: 1rem;
  }
  .reading .body{ position: relative; }
  /* Philosophy reading pages, as designed */
  .essay-back{ font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; margin: 1.5rem 0 1.6rem; }
  .essay-back a{ text-decoration: none; color: var(--ink-soft); }
  .essay-back a:hover{ color: var(--rubric); }
  .essay-meta.tagged-meta{ font-variant: normal; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.5rem; margin: 0.7rem 0 1.6rem; padding-bottom: 1rem; border-bottom: 0.5px solid var(--rule); max-width: var(--measure); }
  .tagged-meta .date{ font-family: var(--mono); font-size: 0.72rem; color: var(--ink-soft); letter-spacing: 0.05em; text-transform: uppercase; margin-right: 0.6rem; }
  .tagged-meta .tag{ font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-softer); border: 0.5px solid var(--rule); padding: 0.12rem 0.45rem; border-radius: 1px; white-space: nowrap; }
  .tagged-meta .tag.sub{ border-style: dashed; }
  .reading .request{ text-indent: 0; font-style: italic; color: var(--ink-soft); border-top: 0.5px dashed var(--rule-soft); padding-top: 0.9rem; margin-top: 1.6rem; font-size: 0.96rem; }
  .essay-title.designed{ font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 500; line-height: 1.15; margin: 0 0 0.7rem; max-width: var(--measure); text-wrap: balance; }
  .essay-dek.designed{ font-size: 1.12rem; line-height: 1.5; margin: 0 0 1.6rem; text-wrap: pretty; }
  .reading.designed{ grid-template-columns: minmax(0, var(--measure)) 15rem; gap: 0 clamp(2rem, 4vw, 3.5rem); }
  .reading.designed.no-margin{ grid-template-columns: minmax(0, var(--measure)); }
  .reading.designed article.body p{ line-height: 1.65; }
  .reading.designed .margin{ font-size: 0.86rem; line-height: 1.45; }
  .reading .margin .mlabel{ font-variant: small-caps; letter-spacing: 0.1em; font-size: 0.86rem; font-weight: 500; color: var(--rubric); margin: 0 0 0.35rem; }

  .reading .margin{
    position: relative;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--ink-soft);
    /* Marginalia notes are absolutely positioned within. */
  }

  .essay-meta{
    font-family: var(--serif);
    font-variant: small-caps;
    letter-spacing: 0.08em;
    font-size: 0.86rem;
    color: var(--ink-soft);
    margin-bottom: 1.5rem;
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
  }
  .essay-meta .sep{ color: var(--rule); }

  .essay-title{
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(2.1rem, 4vw, 3.1rem);
    line-height: 1.05;
    letter-spacing: -0.005em;
    margin: 0 0 0.9rem 0;
    text-wrap: balance;
  }
  .essay-title .rubric-comma{ color: var(--rubric); }
  .essay-dek{
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.25rem;
    color: var(--ink-soft);
    margin: 0 0 1.1rem 0;
    line-height: 1.4;
    text-wrap: balance;
    max-width: var(--measure);
  }
  /* A review's programme: the works, one to a line, then the encores; a block of facts under the meta line, not a list in the prose. */
  .essay-program{ max-width: var(--measure); margin: -0.4rem 0 2rem; font-size: 0.96rem; line-height: 1.5; color: var(--ink-soft); }
  .essay-program ul{ list-style: none; margin: 0; padding: 0; }
  .essay-program .encores{ margin: 0.35rem 0 0; }
  .essay-program .encores-label, .row-program .encores-label{ font-family: "Cormorant SC", var(--serif); letter-spacing: 0.08em; margin-right: 0.6em; }
  /* The concert diary: a wider venue column, hall over city, and each row's programme folded beneath it. */
  .biblio.diary{ max-width: none; }
  .biblio.diary li{ grid-template-columns: 8rem minmax(0, 1fr) 11.5rem; }
  /* The programme's own items are lines, not diary rows. */
  .biblio .row-program li{ display: block; padding: 0; border: 0; }
  /* Spanning the dek's row too, so a two-line venue does not push the dek or the programme away from the title. */
  .biblio.diary .section{ line-height: 1.35; grid-row: span 2; }
  .biblio.diary .section .city{ display: block; }
  .biblio.diary .dek{ grid-column: 2; }
  .row-program{ grid-column: 2; margin-top: 0.2rem; font-size: 0.92rem; color: var(--ink-soft); }
  .row-program summary{ cursor: pointer; list-style: none; width: max-content; font-family: "Cormorant SC", var(--serif); letter-spacing: 0.08em; font-size: 0.86rem; color: var(--ink-softer); }
  .row-program summary::-webkit-details-marker{ display: none; }
  .row-program summary::before{ content: "▸"; display: inline-block; width: 1em; color: var(--rubric); transition: transform 120ms ease; }
  .row-program[open] summary::before{ transform: rotate(90deg); }
  .row-program summary:hover{ color: var(--ink-soft); }
  .row-program ul{ list-style: none; margin: 0.3rem 0 0; padding: 0 0 0 1em; line-height: 1.45; }
  .row-program .encores{ margin: 0.2rem 0 0.1rem; padding-left: 1em; line-height: 1.45; }

  /* Drop cap — true reflow with shape-outside */
  .lede{
    margin-top: 0;
    font-size: 1.05rem;
    line-height: 1.6;
    text-wrap: pretty;
  }
  .lede::first-letter{
    font-family: var(--serif);
    font-weight: 500;
    color: var(--rubric);
    float: left;
    /* Sized to span exactly three lines at the reading pages' 1.65 leading. */
    font-size: 5.4em;
    line-height: 0.74;
    padding: 0.06em 0.06em 0 0;
    margin: 0.02em 0.04em 0 0;
    shape-outside: margin-box;
  }

  .body p{
    margin: 0 0 1.05em 0;
    font-size: 1.05rem;
    line-height: 1.6;
    text-wrap: pretty;
    hanging-punctuation: first last;
  }
  /* Paragraphs are separated by space, not indents. */
  .body p + p{ text-indent: 0; }
  .body p.lede{ text-indent: 0; }

  .body blockquote{
    margin: 1.5em 0 1.5em 1.5em;
    padding: 0;
    font-style: italic;
    color: var(--ink-soft);
    border: none;
    font-size: 0.96rem;
    line-height: 1.55;
    text-wrap: pretty;
  }
  .body blockquote::before{
    content: "“";
    color: var(--rubric);
    font-size: 1.6em;
    line-height: 0;
    position: relative;
    top: 0.18em;
    margin-right: 0.05em;
    margin-left: -0.32em;
    font-style: normal;
  }
  .body blockquote cite{
    display: block;
    margin-top: 0.4em;
    font-style: normal;
    font-variant: small-caps;
    letter-spacing: 0.06em;
    font-size: 0.86rem;
    color: var(--ink-soft);
  }
  .body blockquote cite::before{ content: "— "; color: var(--rule); }

  .body em{ font-style: italic; }
  .body strong{ font-weight: 600; }

  /* Anchored marginal note */
  .anchor{
    position: relative;
    cursor: help;
    background-image: linear-gradient(transparent 86%, rgba(138,42,26,0.18) 86%, rgba(138,42,26,0.18) 96%, transparent 96%);
  }
  .anchor.active{
    background-image: linear-gradient(transparent 84%, rgba(138,42,26,0.45) 84%, rgba(138,42,26,0.45) 96%, transparent 96%);
  }

  .gloss{
    position: absolute;
    left: 0;
    width: 100%;
    padding: 0.1rem 0;
    transition: opacity 150ms ease, transform 150ms ease, color 150ms ease;
    color: var(--ink-soft);
  }
  .gloss .manicule{
    color: var(--rubric);
    margin-right: 0.35em;
    font-size: 0.95em;
    display: inline-block;
    transform: translateY(0.05em);
  }
  .gloss .num{
    font-family: var(--mono);
    font-size: 0.62rem;
    color: var(--rubric);
    margin-right: 0.45em;
    letter-spacing: 0.04em;
    vertical-align: 0.25em;
  }
  .gloss .num::before{ content: attr(data-n); }
  .gloss .src{
    display: block;
    margin-top: 0.2rem;
    font-variant: small-caps;
    letter-spacing: 0.06em;
    font-size: 0.72rem;
    color: var(--ink-softer);
  }
  .gloss.active{
    color: var(--ink);
  }
  .gloss em{ font-style: italic; }

  /* Connector lines svg overlay */
  .connectors{
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  /* Section ornament */
  .ornament{
    text-align: center;
    color: var(--rubric);
    margin: 2.5rem 0;
    font-size: 1.12rem;
    letter-spacing: 0;
  }

  /* Endnotes */
  .endnotes{
    margin-top: 3rem;
    padding-top: 1.25rem;
    border-top: 0.5px solid var(--rule);
    font-size: 0.86rem;
    color: var(--ink-soft);
    line-height: 1.55;
  }
  .endnotes h3{
    font-variant: small-caps;
    letter-spacing: 0.1em;
    font-weight: 500;
    font-size: 0.86rem;
    margin: 0 0 0.8rem 0;
    color: var(--rubric);
  }
  .endnotes ol{
    list-style: none;
    counter-reset: en;
    padding: 0; margin: 0;
  }
  .endnotes li{
    counter-increment: en;
    padding-left: 2.2rem;
    position: relative;
    margin-bottom: 0.5rem;
    text-indent: -2.2rem;
  }
  .endnotes li::before{
    content: counter(en);
    font-family: var(--mono);
    color: var(--rubric);
    font-size: 0.72rem;
    width: 2.2rem;
    text-indent: 0;
    display: inline-block;
    text-align: left;
  }
  .endnotes li a{ overflow-wrap: anywhere; }

  /* ---------- Section landing pages ---------- */
  /* Section header: head on one line, its gloss in italic beneath. */
  /* The dot between head and gloss sits in the gap (0.55em, the dot, and 0.55em
     of the gloss's size: about 1em). When the gloss wraps to its own line, the
     dot falls left of the band and is clipped, so the line starts flush. */
  .section-band{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 1em; margin: 0 0 2.2rem; font-weight: 400; line-height: 1.15; font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-feature-settings: "kern" 1, "lnum" 1; clip-path: inset(-1em -1em -1em -0.15em); }
  .section-band .head{ font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
  .section-band .elab{ position: relative; font-style: italic; font-size: 0.62em; color: var(--ink-soft); }
  .section-band .elab::before{ content: "·"; position: absolute; right: 100%; color: var(--rubric); font-style: normal; margin-right: 0.55em; opacity: 0.85; }
  .section-band .term{ color: var(--rubric); }
  /* Grouped lists (Philosophy) */
  .group{ margin-bottom: 2.4rem; }
  .group-gloss{ font-style: italic; color: var(--ink-soft); margin: -0.6rem 0 0.7rem; font-size: 0.96rem; }
  .group.written{ margin-top: 3rem; }
  .diss{ max-width: var(--measure); font-size: 1.05rem; line-height: 1.6; text-wrap: pretty; margin: 0 0 0.4rem; padding: 1rem 0; border-top: 0.5px solid var(--rule); border-bottom: 0.5px solid var(--rule); }
  .diss p{ margin: 0 0 0.8em; } .diss p:last-child{ margin: 0; }
  .diss .q{ font-style: italic; }
  .diss .ask{ display: block; margin-top: 1.2rem; padding-top: 0.9rem; border-top: 0.5px dashed var(--rule-soft); font-style: italic; color: var(--ink-soft); font-size: 0.96rem; line-height: 1.5; }
  .cv-note{ font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--ink-soft); margin: 0 0 2.5rem; }
  .cv-note a{ text-decoration: none; color: var(--rubric); }

  /* Philosophy — the rail (areas, committee, education) on the left, the work beside it */
  .phil-layout{ display: grid; grid-template-columns: 15rem minmax(0, var(--measure)); gap: 2rem clamp(3rem, 7vw, 7rem); align-items: start; }
  .phil-layout.no-rail{ grid-template-columns: minmax(0, var(--measure)); }
  .phil-main .section-intro, .phil-main .diss, .phil-main .biblio, .phil-main .biblio .dek, .phil-main .group-gloss{ max-width: none; }
  .phil-main .biblio li{ padding: 0.55rem 0; }
  .phil-main .biblio .tags{ margin-top: 0.25rem; }
  .phil-rail{ order: -1; align-self: start; position: sticky; top: 2rem; }
  .phil-rail .block{ border-top: 0.5px solid var(--rule); padding: 1rem 0 1.4rem; }
  .phil-rail .block:last-child{ border-bottom: 0.5px solid var(--rule); }
  .phil-rail .label{ margin-bottom: 0.7rem; }
  .phil-rail dl{ margin: 0; font-size: 0.96rem; line-height: 1.45; }
  .phil-rail dt{ font-style: italic; font-size: 0.86rem; color: var(--ink-soft); margin-top: 0.6rem; }
  .phil-rail dt:first-child{ margin-top: 0; }
  .phil-rail dd{ margin: 0; }
  @media (max-width: 860px){
    .phil-layout{ grid-template-columns: 1fr; gap: 0; }
    .phil-main{ display: contents; }
    .phil-main .section-intro{ order: -2; }
    .phil-rail{ order: 1; margin-top: 2.2rem; margin-bottom: 2.2rem; position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0 2rem; border-bottom: 0.5px solid var(--rule); }
    .phil-rail .block:last-child{ border-bottom: 0; }
  }
  .biblio .pdf{ font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-softer); text-decoration: none; margin-left: 0.6em; font-style: normal; }
  .biblio .pdf:hover{ color: var(--rubric); }
  /* `in-progress: true`: listed, not yet linked. Said beneath the date, in the date's face, as the metadata it is. */
  .biblio .date .in-progress{ display: block; margin-top: 0.3rem; font-size: 0.6rem; line-height: 1.35; letter-spacing: 0.06em; color: var(--ink-softer); white-space: normal; }
  /* It runs down beside the dek, so the dek stays as close under the title as in any other row. */
  .biblio .date:has(.in-progress){ grid-row: span 2; }
  /* Legacy hooks — kept so old markup still styles cleanly if revisited. */
  .section-title{
    margin: 0 0 0.4rem 0;
    font-size: clamp(2.4rem, 5vw, 3.4rem);
    font-weight: 500;
    letter-spacing: -0.005em;
    line-height: 1;
  }
  .section-title .rubric-comma{ color: var(--rubric); }
  .section-elab{
    margin: 0 0 3rem 0;
    font-style: italic;
    font-size: 1.4rem;
    color: var(--ink-soft);
  }
  .section-intro{
    max-width: var(--measure);
    margin: 0 0 2.2rem 0;
    color: var(--ink-soft);
    font-size: 1.05rem;
    line-height: 1.6;
    text-wrap: pretty;
  }
  /* An intro.md note: paragraphs inside a div.section-intro */
  .section-intro p{ margin: 0 0 0.9em; }
  .section-intro p:last-child{ margin-bottom: 0; }

  /* About */
  .about{
    display: grid;
    grid-template-columns: 15rem minmax(0, var(--measure));
    gap: 2rem clamp(3rem, 7vw, 7rem);
    align-items: start;
  }
  .about > div:last-child{ order: -1; }
  .about p{
    font-size: 1.05rem;
    line-height: 1.65;
    margin: 0 0 1.1em 0;
    text-wrap: pretty;
  }
  .about-portrait{
    width: 140px;
    height: 175px;
    background: var(--paper-deep);
    border: 0.5px solid var(--rule);
    display: grid;
    place-items: center;
    color: var(--ink-softer);
    font-family: var(--mono);
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    padding: 0.5rem;
    background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(26,22,18,0.04) 6px 7px);
  }
  .contact-block{
    margin-top: 2.5rem;
    font-family: var(--serif);
    font-size: 0.96rem;
    line-height: 1.7;
    color: var(--ink);
    padding-top: 1.25rem;
    border-top: 0.5px solid var(--rule);
    max-width: 50ch;
  }
  .contact-block .lbl{
    font-variant: small-caps;
    letter-spacing: 0.08em;
    font-size: 0.86rem;
    color: var(--ink-softer);
    display: block;
    margin-bottom: 0.3rem;
  }

  /* Keys */
  /* A staff: five even lines in the hairline colour, whole pixels so none renders darker than the rest. */
  .keys-rule{
    height: 37px;
    background: repeating-linear-gradient(to bottom, var(--rule) 0 1px, transparent 1px 9px);
    margin: 1rem 0 3rem 0;
    max-width: var(--measure);
  }
  .video-card{
    max-width: var(--measure);
    margin: 0 0 3rem 0;
  }
  :is(.video-card, .embed) .frame{
    width: 100%;
    aspect-ratio: 16/9;
    background: #110e0a;
    position: relative;
    overflow: hidden;
    border: 0.5px solid var(--rule);
  }
  :is(.video-card, .embed) .frame iframe{
    width: 100%; height: 100%;
    border: 0;
    display: block;
  }
  .video-card .label{
    margin-top: 0.7rem;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    font-family: var(--serif);
    font-size: 0.96rem;
  }
  .video-card .piece{
    font-style: italic;
    font-size: 1.12rem;
  }
  .video-card .when{
    font-family: var(--mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-soft);
    white-space: nowrap;
  }
  .video-card .note{
    margin-top: 0.6rem;
    color: var(--ink-soft);
    font-size: 0.96rem;
    line-height: 1.55;
  }
  .now-tag{
    font-variant: small-caps;
    letter-spacing: 0.1em;
    font-size: 0.86rem;
    color: var(--rubric);
    margin-bottom: 0.5rem;
    display: block;
  }

  /* CV */
  .cv-section{
    margin-bottom: 2.5rem;
    max-width: var(--measure);
  }
  .cv-section h3{
    margin: 0 0 1rem 0;
    border-bottom: 0.5px solid var(--rule);
    padding-bottom: 0.4rem;
  }
  /* One use of italic: the line beneath an entry, and a summary's figures,
     in softer ink. Everything on an entry's first line is roman, titles of
     works included, and so is a title inside an italic line (the
     dissertation's), as on the Philosophy pages. */
  .cv-row{
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    gap: 1.5rem;
    margin-bottom: 0.75rem;
    line-height: 1.5;
  }
  .cv-row .yr{
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--ink-soft);
    letter-spacing: 0.04em;
    padding-top: 0.18rem;
  }
  /* A step heavier than the body text: the CV is read in small pieces, where
     Cormorant's regular is thin. */
  .cv-row .what, .cv-summary{ font-size: 0.96rem; font-weight: 500; }
  .cv-row .what .sub{
    display: block;
    color: var(--ink-soft);
    font-size: 0.96rem;
    font-style: italic;
    margin-top: 0.1rem;
  }
  /* A section's summary (teaching.summary): a note about the entries below
     it, not one of them, so it has no date, flush with their text. Its
     figures sit one to a line, a little apart, so one that wraps on a phone
     does not run into the next. */
  .cv-summary{
    margin: 0 0 1.4rem 8rem;
    color: var(--ink-soft);
    line-height: 1.5;
  }
  .cv-summary .lead{ display: block; color: var(--ink); margin-bottom: 0.2rem; }
  .cv-summary .fig{ display: block; font-style: italic; }
  .cv-summary .fig + .fig{ margin-top: 0.25rem; }
  /* Phones: a narrower date column, so the entries have more of the width,
     and the summary across the whole of it. */
  @media (max-width: 600px){
    .cv-row{ grid-template-columns: 4.5rem minmax(0, 1fr); gap: 0.9rem; }
    .cv-row .yr{ font-size: 0.66rem; letter-spacing: 0.02em; }
    .cv-summary{ margin-left: 0; font-size: 0.9rem; }
  }

  /* Tags — a writing filed under a pursuit or a Key, and the line back. The
     titles are titles: the text face, in italic. */
  .filed{
    font-size: 0.96rem;
    line-height: 1.5;
    color: var(--ink-soft);
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.2rem 0.5rem;
    margin: -0.75rem 0 1.5rem;
  }
  .filed a, .filed .title{ font-style: italic; }
  .filed :is(a, .title) + .filed-label{ margin-left: 0.8rem; }
  .filed-back{ margin: 0.9rem 0 0; }
  .filed-label{
    font-variant: small-caps;
    text-transform: lowercase;
    letter-spacing: 0.1em;
    color: var(--rubric);
  }
  .filed a{
    color: var(--ink-soft);
    text-decoration-color: var(--rule);
  }
  .filed a:hover{ color: var(--ink); }
  .filed .sep{ color: var(--rule); }

  /* A pursuit or card arrived at from a tag (.is-target: via nav.js) */
  .interest:target h2, .interest.is-target h2,
  .video-card:target .piece, .video-card.is-target .piece{ color: var(--rubric); }

  /* Tiny back link */
  .back{
    font-family: var(--serif);
    font-size: 0.96rem;
    text-transform: none;
    letter-spacing: 0.01em;
    color: var(--ink-soft);
    text-decoration: none;
  }
  .back:hover{ color: var(--ink); text-decoration: none; }
  .back::before{
    content: "←";
    margin-right: 0.4em;
    color: var(--rubric);
  }

  /* Responsive: collapse marginalia */
  @media (max-width: 980px){
    .reading, .reading.designed{ grid-template-columns: minmax(0, 1fr); gap: 1rem; }
    .reading .margin{ display: none; }
    /* Notes are hidden at this width, so anchors should not promise one. */
    .anchor{ background-image: none; cursor: auto; }
    .biblio li, .biblio.diary li{ grid-template-columns: 6rem 1fr; }
    .biblio .section{ display: none; }
    /* The diary keeps its venue, as a line beneath the title. */
    .biblio.diary .section{ display: block; grid-column: 2; grid-row: auto; text-align: left; }
    .biblio.diary .section .city{ display: inline; }
    .biblio.diary .section .city::before{ content: ", "; }
    .about{ grid-template-columns: 1fr; gap: 2rem; }
    .about-portrait{ order: -1; }
  }

  /* Reviews & Interests share section page styles. */
  .interests-list{
    list-style: none;
    padding: 0; margin: 2rem 0 0 0;
    max-width: var(--measure);
  }
  .interests-list li{
    padding: 0.9rem 0;
    border-bottom: 0.5px dashed var(--rule-soft);
    font-size: 0.96rem;
    line-height: 1.55;
  }
  .interests-list li:first-child{ border-top: 0.5px solid var(--rule); }
  .interests-list li:last-child{ border-bottom: 0.5px solid var(--rule); }
  .interests-list .pursuit{
    font-style: italic;
    font-size: 1.05rem;
  }
  .interests-list .gloss-inline{
    color: var(--ink-soft);
    font-size: 0.96rem;
  }
  .interests-list .pursuit::after{ content: " — "; color: var(--rule); font-style: normal; }

  /* Interests — editorial entries, optional photo */
  .interests-entries{
    max-width: calc(var(--measure) + 30rem);
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 0.5px solid var(--rule);
  }
  /* The numeral hangs beside the title, on its baseline. */
  .interest{
    display: grid;
    grid-template-columns: 2.6rem minmax(0, var(--measure)) minmax(0, 1fr);
    gap: 1.2rem 1rem;
    align-items: baseline;
    padding: 1.6rem 0 1.8rem 0;
    border-bottom: 0.5px dashed var(--rule-soft);
  }
  .interest:last-child{ border-bottom: 0.5px solid var(--rule); }
  .interest .num{
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--rubric);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .interest h2{
    margin: 0 0 0.35rem 0;
    font-family: var(--serif);
    font-weight: 500;
    font-size: 1.6rem;
    line-height: 1.1;
    letter-spacing: -0.005em;
  }
  .interest h2 a{ color: inherit; text-decoration-color: transparent; }
  .interest h2 a:hover{ text-decoration-color: var(--ink-softer); }
  .interest .interest-more a{
    font-family: var(--mono);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-softer);
    text-decoration: none;
  }
  .interest .interest-more a::after{ content: " →"; }
  .interest .interest-more a:hover{ color: var(--rubric); }
  .interest h2 .cn{
    font-size: 0.78em;
    color: var(--ink-soft);
    margin-left: 0.5em;
    font-style: italic;
    letter-spacing: 0;
  }
  .interest .lede-line{
    font-style: italic;
    color: var(--ink-soft);
    font-size: 0.96rem;
    margin: 0 0 0.7rem 0;
    line-height: 1.45;
  }
  .interest p{
    margin: 0 0 0.7em 0;
    font-size: 0.96rem;
    line-height: 1.6;
    text-wrap: pretty;
  }
  .interest p:last-child{ margin-bottom: 0; }
  .interest .photo-slot{
    align-self: start;
  }
  .interest .photo-slot image-slot{
    display: block;
    border: 0.5px solid var(--rule);
    background: var(--paper-deep);
    width: 100%;
    aspect-ratio: 4/5;
  }
  .interest .photo-slot .credit{
    margin-top: 0.5rem;
    font-family: var(--mono);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-softer);
    line-height: 1.4;
  }
  /* When no photo, prose can fill */
  .interest.no-photo{
    grid-template-columns: 2.6rem minmax(0, var(--measure));
  }
  @media (max-width: 820px){
    .interest,
    .interest.no-photo{
      grid-template-columns: 2.6rem 1fr;
      gap: 1rem;
    }
    .interest .photo-slot{
      grid-column: 2;
      max-width: 22rem;
      margin-top: 0.5rem;
    }
  }
  @media (max-width: 520px){
    .interest,
    .interest.no-photo{
      grid-template-columns: 1fr;
    }
    .interest .photo-slot{ grid-column: 1; }
  }

  /* Hide-show pages for routing */
  .view{ display: none; }
  .view.active{ display: block; }

  /* Glyph picker — testing strip */
  .glyph-picker{
    position: fixed;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.5rem 0.6rem;
    background: rgba(246, 242, 232, 0.94);
    backdrop-filter: blur(6px);
    border: 0.5px solid var(--rule);
    border-radius: 2px;
    max-width: min(92vw, 760px);
    justify-content: center;
    box-shadow: 0 1px 0 rgba(26,22,18,0.04), 0 6px 24px rgba(26,22,18,0.05);
  }
  .glyph-picker .gp-label{
    font-family: var(--mono);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-softer);
    align-self: center;
    margin-right: 0.4rem;
    padding: 0 0.3rem;
  }
  .glyph-picker button{
    font-family: var(--serif);
    font-size: 1.12rem;
    line-height: 1;
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    background: transparent;
    color: var(--ink);
    border: 0.5px solid transparent;
    border-radius: 2px;
    cursor: pointer;
    padding: 0;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
  }
  .glyph-picker button:hover{
    background: var(--paper-deep);
    border-color: var(--rule);
    color: var(--rubric);
  }
  .glyph-picker button.active{
    background: var(--paper-deep);
    border-color: var(--rubric);
    color: var(--rubric);
  }

/* ---------- Added by the static build ---------- */
.reading.no-margin{ grid-template-columns: minmax(0, var(--measure)); }
.frame-empty{ background: var(--paper-deep); display: grid; place-items: center; color: var(--ink-softer); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; background-image: repeating-linear-gradient(135deg, transparent 0 8px, rgba(26,22,18,0.04) 8px 9px); }
.embed{ margin: 2rem 0; }
.embed img{ display: block; width: 100%; height: auto; background: var(--paper-deep); }
/* A photograph's caption: smaller and softer than the text, close under the picture. */
.embed figcaption{ margin-top: 0.5rem; font-size: 0.92rem; line-height: 1.45; font-style: italic; color: var(--ink-soft); }
.photo-slot img{ display: block; width: 100%; height: auto; background: var(--paper-deep); }
.about-portrait-img{ display: block; width: 100%; max-width: 11rem; height: auto; background: var(--paper-deep); filter: saturate(0.86); border: 0.5px solid var(--rule); }
/* Elsewhere, recently: the dates column only as wide as a date, as it is below 1150px. */
#recent li{ grid-template-columns: 5.5rem minmax(0, 1fr) 9rem; }
@media (max-width: 1150px){
  .page:has(> #band) .biblio li{ grid-template-columns: 5.5rem minmax(0, 1fr); }
  .page:has(> #band) .biblio .section{ display: none; }
}
@media (max-width: 860px){
  .brow{ gap: 0.6rem 1.5rem; margin-bottom: 2rem; }
  .brow .meta{ font-size: 0.62rem; }
  .page:has(> #band) > .brow .name{ font-size: 1.5rem; }
  /* Home: the section links, then picture and blurb, then the lists — one column, reordered */
  .page:has(> #band){ display: flex; flex-direction: column; gap: 1.6rem; }
  /* Full width: the desktop grid's align-items: start would otherwise shrink it to the name until its links appear. */
  .page:has(> #band) > .brow{ margin-bottom: -1rem; order: -3; align-self: stretch; }
  /* Stuck to the top, the brow's paper runs across the gutters to the screen's
     edges and up under the phone's status bar (iOS Safari draws the page
     there), so nothing scrolling beneath it shows round its edges. Exactly the
     viewport's width, so it adds no sideways scroll. */
  .page > .brow::before{ content: ""; position: absolute; z-index: -1; top: -12rem; bottom: 0; left: calc((100% - 100vw) / 2); right: calc((100% - 100vw) / 2); background: var(--paper); }
  /* Section links big enough to tap: the hit area reaches past the letters, and the rows stand apart so the areas never meet. */
  .brow-nav{ row-gap: 0.9rem; }
  .brow-nav a, .rail .head{ position: relative; }
  .brow-nav a::after, .rail .head::after{ content: ""; position: absolute; inset: -0.45rem -0.45rem; }
  .page:has(> #band) > #band, .page:has(> #band) > #content, .page:has(> #band) .home-main{ display: contents; }
  .rail img{ display: none; }
  .statement{ order: -1; font-size: 0.96rem; line-height: 1.55; }
  .statement .m-portrait{ display: block; float: right; width: 7.5rem; aspect-ratio: 2 / 3; object-fit: cover; margin: 0.25rem 0 0.4rem 0.9rem; filter: saturate(0.92); border: 0.5px solid var(--rule); }
  /* Straight under the brow, whose rule serves as its top one. */
  .rail ul{ order: -2; display: flex; flex-wrap: wrap; gap: 0.9rem 1.1rem; padding: 0.4rem 0 0.9rem; border-top: 0; border-bottom: 0.5px solid var(--rule); }
  .rail li, .rail li:last-child{ padding: 0; border: 0; }
  .rail .head{ font-size: 0.86rem; letter-spacing: 0.09em; }
  .rail .elab, .rail .fleuron, .rail .long{ display: none; }
  .rail .abbr{ display: inline; }
  .page:has(> #band) > .foot{ order: 1; }
}
.callout{ border-left: 2px solid var(--rubric); padding: 0.1rem 0 0.1rem 1.1rem; margin: 1.8rem 0; color: var(--ink-soft); }
.callout .callout-title{ font-variant: small-caps; letter-spacing: 0.08em; color: var(--rubric); margin: 0 0 0.3rem 0; font-size: 0.86rem; }
.callout p{ margin: 0; }
.fn-ref{ font-size: 0.72em; }
.fn-ref a{ text-decoration: none; color: var(--rubric); font-size: inherit; }
.body sup, .gloss sup{ line-height: 0; font-variant-numeric: lining-nums; }
/* Exponents, as in 10<sup>−100</sup>; footnote markers keep their own size. */
.body sup:not(.fn-ref), .gloss sup:not(.fn-ref){ font-size: 0.7em; }
.broken-link{ color: var(--rubric); text-decoration: underline wavy 0.5px; }

/* Locked drafts */
.lock{ max-width: 34ch; margin: 6rem auto; text-align: center; }
.lock-mark{ font-size: 2rem; color: var(--rubric); margin: 0 0 1rem; }
.lock-note{ color: var(--ink-soft); font-size: 0.96rem; margin: 0 0 1.5rem; }
#lock-form{ display: flex; gap: 0.5rem; justify-content: center; }
#lock-form input{ font-family: var(--mono); font-size: 0.86rem; padding: 0.5rem 0.6rem; background: var(--paper); border: 0.5px solid var(--rule); color: var(--ink); flex: 1 1 auto; min-width: 0; }
#lock-form input:focus{ outline: none; border-color: var(--rubric); }
#lock-form button{ font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.5rem 0.9rem; background: var(--paper-deep); border: 0.5px solid var(--rule); color: var(--ink-soft); cursor: pointer; }
#lock-form button:hover{ color: var(--ink); border-color: var(--rubric); }
#lock-form.is-working{ opacity: 0.5; pointer-events: none; }
.lock-keep{ display: flex; gap: 0.45rem; align-items: center; justify-content: center; margin-top: 0.9rem; color: var(--ink-soft); font-size: 0.86rem; cursor: pointer; }
.lock-keep input{ margin: 0; accent-color: var(--rubric); }
.lock-error{ font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rubric); margin-top: 1rem; }

/* Client-side navigation */
#app.is-leaving{ opacity: 0.72; transition: opacity 90ms ease; }
/* While a page is swapped in, nothing animates: the view transition is the only motion. */
#app.is-swapping, #app.is-swapping > .brow, #app.is-swapping > .brow .name{ transition: none; }
/* After a change of page, focus rests on the new page's heading (nav.js), so a screen reader announces it; it is not a control, so it shows no ring. */
#content:focus, #content h1:focus{ outline: none; }
@media (prefers-reduced-motion: reduce){ #app.is-leaving{ opacity: 1; } .page > .brow{ transition: none; } ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*){ animation: none !important; } }

/* Italic inside an italic setting reverts to roman, so titles and terms still stand out. */
.biblio:not(.tagged) .title em, .biblio .dek em, .essay-dek em, .group-gloss em, .reading .request em, .body blockquote em, .cv-row .what .sub em{ font-style: normal; }
/* Chinese runs break between phrases, not inside words. */
span[lang="zh-Hant"]{ word-break: keep-all; }
/* True small caps: the hosted Cormorant Garamond has no smcp, so small-caps settings use Cormorant SC. */
.home-main .label, .phil-rail .label, .group h2, .cv-section h3, .biblio .section, .reading .margin .mlabel, .essay-meta, .body blockquote cite, .gloss .src, .endnotes h3, .contact-block .lbl, .now-tag, .filed-label, .callout .callout-title, .biblio li.upcoming .section, .cv-row .sc{ font-family: "Cormorant SC", var(--serif); font-variant: normal; }

/* ---------- Philosophy reading pages: conventions ---------- */
/* Index rows: roman titles over italic deks, as on the reading page. */
.biblio.tagged .title{ font-style: normal; }
.biblio.tagged .title em{ font-style: italic; }
@media (max-width: 600px){
  .biblio.tagged li{ grid-template-columns: minmax(0, 1fr); row-gap: 0.15rem; }
  .biblio.tagged .date .in-progress{ display: inline; margin: 0; font-size: inherit; }
  .biblio.tagged .date .in-progress::before{ content: "·"; margin: 0 0.5em; }
  .biblio.tagged .dek{ grid-column: 1 / -1; }
}
/* Subtitle after "Title:", smaller and on its own line. */
.essay-title .sub{ display: block; font-size: 0.62em; line-height: 1.2; margin-top: 0.3em; color: var(--ink-soft); }
/* Closing provenance line: small, flush, soft, set apart. */
.body p.provenance{ font-size: 0.86rem; color: var(--ink-soft); text-indent: 0; margin-top: 2.2em; line-height: 1.5; }
/* Set-off cases: indented, the run-in name in small caps. */
.body p.case{ margin-left: 1.5em; text-indent: 0; }
/* "Also available as a PDF here." under a locked page's date. */
.pdf-note{ margin: 0.2rem 0 1rem; font-size: 0.96rem; font-style: italic; color: var(--ink-soft); }
/* Run-in section heads (run-in-heads: true): the same small caps, flush with the text. */
.body p.run-in{ text-indent: 0; }
.body :is(p.case, p.run-in) > strong:first-child{ font-family: "Cormorant SC", var(--serif); font-weight: 600; letter-spacing: 0.03em; }
/* Concept names, written ((PET FISH)): bold small caps. */
.concept{ font-family: "Cormorant SC", var(--serif); font-weight: 600; letter-spacing: 0.02em; }
/* Abbreviated principles and operators, written ((ife)): small caps at text weight. */
.sc{ font-family: "Cormorant SC", var(--serif); letter-spacing: 0.02em; }
/* Lining figures for labels, fractions, and parenthesized numerals (old-style "1" reads as "I"). */
.lnum, .plabel{ font-variant-numeric: lining-nums; }
/* ⅓, ⅔ and the like, spelled 1⁄3 by the build (scripts/lib/fractions.ts): Cormorant's own fraction figures,
   numerator and denominator marked apart, since Safari does not apply the font's frac feature. */
.frac .numr{ font-feature-settings: "kern", "liga", "ss01" 1, "numr" 1; }
.frac .dnom{ font-feature-settings: "kern", "liga", "ss01" 1, "dnom" 1; }
/* Argument lists: [P1]…[C2] hang in the gutter, no bullets. */
.body ul.premises{ list-style: none; padding-left: 3.2em; }
.body ul.premises li{ position: relative; }
.body ul.premises li::before{ content: none; display: none; }
.body ul.premises .plabel{ position: absolute; left: -3.2em; width: 2.8em; color: var(--ink-soft); }
/* An opening acronym takes the drop cap whole; one of three or four letters opens in small caps instead. */
.lede.acro::first-letter{ float: none; font: inherit; color: inherit; padding: 0; margin: 0; }
.lede .dropcap{ font-family: var(--serif); font-weight: 500; color: var(--rubric); float: left; font-size: 5.4em; line-height: 0.74; padding: 0.06em 0.06em 0 0; margin: 0.02em 0.04em 0 0; letter-spacing: -0.02em; }
.lede .leadcaps{ font-variant-caps: all-small-caps; letter-spacing: 0.08em; font-weight: 500; color: var(--rubric); }
/* Margin notes, inline on narrow screens: a numeral and a few words, opening to the note. */
.note-inline{ display: none; }
@media (max-width: 980px){
  .note-inline{ display: block; margin: -0.4em 0 1.1em; font-size: 0.86rem; line-height: 1.5; color: var(--ink-soft); border-left: 1px solid var(--rule); padding-left: 0.8em; }
  .note-inline summary{ cursor: pointer; list-style: none; }
  .note-inline summary::-webkit-details-marker{ display: none; }
  .note-inline summary::after{ content: " +"; color: var(--rubric); font-family: var(--mono); font-size: 0.72rem; }
  .note-inline[open] summary::after{ content: " −"; }
  .note-inline[open] .pv{ display: none; }
  .note-inline .num{ font-family: var(--mono); font-size: 0.62rem; color: var(--rubric); margin-right: 0.45em; }
  .note-inline .num::before{ content: attr(data-n); }
  .note-inline .full{ margin-top: 0.2em; }
  .note-inline .full em{ font-style: italic; }
  .anchor[data-r]::after{ content: attr(data-r); font-family: var(--mono); font-size: 0.55em; vertical-align: super; color: var(--rubric); margin-left: 0.1em; }
}

/* The homepage's Philosophy, in home.md's own order rather than by date, is
   set without dates; a status ("summary in progress") runs under the dek. */
.biblio.undated li, .page:has(> #band) .biblio.undated li{ grid-template-columns: minmax(0, 1fr); }
.biblio.undated .dek, .biblio.undated .date{ grid-column: 1 / -1; grid-row: auto; }

/* On a phone, the whole scale smaller, and running text at 17px. A higher
   root would bring the text step (.96) of deks and glosses up to the paragraphs. */
@media (max-width: 600px){
  html, body{ font-size: 16px; }
  .body p, .lede, .section-intro, .about p, .diss{ font-size: 17px; }
  /* Safari's pretty wrapping evens out the rag of every line, not just the
     last few; at this width that breaks lines early and leaves a wide gutter
     on the right. Plain wrapping fills each line. */
  .statement, .essay-dek.designed, .lede, .body p, .body blockquote, .diss, .section-intro, .about p, .interest p{ text-wrap: wrap; }
}