: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: #73685a; /* 4.87:1 on the paper, so AA at the small sizes it is set in */
    --ink-head: #3b342c; /* a page's title and home's acrostic, in capitals, a little short of black: their size carries them */
    --rule: #c9beac;
    --rule-soft: #ddd2bf;
    --rubric: #8a2a1a;
    --grain: radial-gradient(rgba(26,22,18,0.018) 1px, transparent 1px) 0 0 / 3px 3px, radial-gradient(rgba(26,22,18,0.014) 1px, transparent 1px) 1px 2px / 7px 7px;
    --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. */
    --cormorant: "Cormorant Carons", "Cormorant Garamond", "EB Garamond", "Iowan Old Style", "Hoefler Text", Georgia, serif;
    --serif: var(--cormorant);
    --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
       text panel (src/client/text.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. A layer of its own under the page
     (z-index below .page's), so a photograph lies on it rather than under it;
     whatever else is paper over the page (the sticky brow, the line of years)
     carries it too, so as not to show as a lighter box. The page's own
     background stays a plain color: iOS Safari colors the strip under the
     clock from it, and given anything else shows the page through it. */
  body::before{ content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; background: var(--grain); }

  ::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 link in running text: a whole-pixel underline in the rule's color, so
     it can be found in a paragraph without darkening it, and in the third
     ink under the pointer. */
  a{
    color: var(--ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    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;
  }
  /* Named for the view transition (src/client/nav.js), so between home and
     another page the name eases from one size to the other. */
  .brow .name a{ text-decoration: none; display: inline-block; view-transition-name: brow-name; }
  .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(--grain), 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(--grain), 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 brow, which a new page
     starts with in view (src/client/brow.js keeps --brow-h). */
  #content [id]{ scroll-margin-top: calc(var(--brow-h, 0px) + 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; }
  /* On the desktop the rail and the main column give their parts to the page's
     grid: portrait and statement side by side, the inscription across both,
     and beneath it the two lists side by side, philosophy first. */
  @media (width > 860px){
    .page:has(> #band) > #band, .page:has(> #band) > #content, .page:has(> #band) .home-main{ display: contents; }
    .page:has(> #band) > #band > img{ grid-column: 1; grid-row: 2; }
    .page:has(> #band) .statement{ grid-column: 2; grid-row: 2; max-width: var(--measure); }
    .page:has(> #band) > #band > .runs{ grid-column: 1 / -1; grid-row: 3; }
    .page:has(> #band) .home-lists{ grid-column: 1 / -1; grid-row: 4; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.2rem clamp(3rem, 6vw, 6rem); align-items: start; margin-top: 3.2rem; }
  }

  /* The rail — the portrait, and the seven cut as one inscription across the
     page beneath it and the statement, as on Greek stone: a block of
     capitals of one size, the heads bold and their glosses light, set flush
     left, a long word broken between syllables, with a hyphen, where the
     line runs out (shell.ts, syllableBreaks), an ivy leaf between entries
     and at the end.
     Never smaller than a step above the statement's 1.25rem. */
  .rail{ align-self: start; }
  .rail img{ display: block; width: 100%; max-width: 13.5rem; height: auto; filter: saturate(0.92); border: 0.5px solid var(--rule); background: var(--paper-deep); }
  .rail .runs{ border-top: 3px double var(--rule); border-bottom: 3px double var(--rule); margin: 3.6rem 0 0.4rem; padding: 1.4rem 0 1.5rem; font-size: clamp(1.4rem, 2vw, 1.75rem); line-height: 1.45; text-transform: uppercase; letter-spacing: 0.1em; word-spacing: -0.05em; hyphens: manual; overflow-wrap: break-word; }
  .rail ul, .rail li{ display: inline; list-style: none; margin: 0; padding: 0; }
  .rail .head{ font-weight: 700; letter-spacing: 0.14em; color: var(--ink-head); 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{ font-weight: 300; color: var(--ink-soft); }
  /* The dot and the leaf stand a little apart from the words either side. */
  .rail .dot{ color: var(--rubric); padding: 0 0.12em; }
  .rail .sep{ color: var(--rubric); font-size: 0.86em; padding: 0 0.3em; }
  .rail .abbr{ display: none; }
  /* The initials in the head's own ink: a hover lights them (above). The
     head's tracking follows an initial as a margin, outside its light, so the
     light sits evenly on the letter. */
  .rail .acrostic-letter{ color: inherit; letter-spacing: 0; margin-right: 0.14em; }

  /* Home main column */
  .home-main{ display: grid; gap: 3.2rem; max-width: var(--measure); }
  .home-lists{ display: grid; gap: 3.2rem; }
  .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{ 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; }
  /* The link set solid, so the row is no taller than its label and the rule
     beneath lines up with a label's alone (home's two lists, side by side). */
  .sectionhead .more{ font-size: 0.86rem; line-height: 1; 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; }
  /* Tangents' writings: a date column no wider than its dates. */
  .biblio.writings li{ grid-template-columns: 5.6rem minmax(0, 1fr) 9rem; 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; }
  /* X5: where a paper was given or published, said in words under its dek (the Philosophy page only). */
  .biblio .occasion{ grid-column: 2 / -1; font-size: 0.86rem; line-height: 1.45; color: var(--ink-soft); margin-top: 0.15rem; }
  .biblio.undated .occasion{ grid-column: 1 / -1; }

  /* 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;
  }
  /* A title with a page of its own is underlined at rest, lightly, so it can
     be told from one without where nothing hovers (a phone). */
  .biblio .title a{ text-decoration-color: var(--rule); }
  .biblio .title a:hover{ text-decoration-color: var(--ink-softer); }
  .biblio .section{
    color: var(--ink-soft);
    text-align: right;
  }
  /* A label that says where an entry is filed leads there, as the jump links do. */
  .biblio .section a{ color: inherit; text-decoration: none; border-bottom: 0.5px solid transparent; }
  .biblio .section a:hover{ color: var(--ink); border-bottom-color: var(--rubric); }
  .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{ 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. */
  /* N3: the line of years stays in reach down the diary: stuck under the
     brow while the brow shows, at the top once it has tucked away
     (src/client/brow.js keeps --brow-h), on one line that scrolls sideways
     where it would wrap, its paper reaching into the gutters over the rows'
     hanging wedges. A year's head lands clear of both. */
  .diary-years{ display: flex; gap: 0.4rem 1.1rem; margin: -0.4rem 0 0.9rem; padding: 0.75rem 0 0.6rem; border-bottom: 0.5px solid var(--rule-soft); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; position: sticky; top: var(--brow-h, 0px); z-index: 4; background: var(--grain), var(--paper); box-shadow: -3rem 0 0 var(--paper), 3rem 0 0 var(--paper); overflow-x: auto; scrollbar-width: none; transition: top 0.25s ease; }
  .diary-years::-webkit-scrollbar{ display: none; }
  .page:has(> .brow.tucked:not(:focus-within)) .diary-years{ top: 0; }
  .diary-years a{ flex: none; 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; }
  #content .diary-year{ scroll-margin-top: calc(var(--brow-h, 0px) + 3.4rem); }
  @media (prefers-reduced-motion: reduce){ .diary-years{ transition: none; } }

  /* 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);
  }
  /* The reader's text settings (src/client/text.js), as set on the root. Width
     is a multiple of --cpl; the homepage, whose lists keep their own widths,
     stays Normal. Weight and face are for running prose only: a page's body
     and margin notes, a section's introduction, a pursuit's or a card's words,
     About's. Titles, deks, headings, and lists stay as they are. Literata
     Text is Literata scaled to sit with Cormorant (scripts/lib/fonts.ts),
     with its own features only. */
  :root[data-cpl-scale="1.2"]{ --cpl-scale: 1.2; }
  .page:has(> #band){ --measure: calc(var(--cpl) * var(--char)); }
  :root[data-text-weight="heavier"] :is(.reading .body, .reading .margin, .section-intro, .diss, .about > div:first-child, .interest > div, .video-card){ font-weight: 500; }
  :root[data-text-face="literata"] :is(.reading .body, .reading .margin, .section-intro, .diss, .about > div:first-child, .interest > div, .video-card){ --serif: "Literata Text", "Literata", Georgia, serif; font-family: var(--serif); font-feature-settings: "kern", "liga", "onum" 1; }
  :root:is([data-text-face], [data-text-weight]) :is(.reading .body, .reading .margin, .section-intro, .diss, .about > div:first-child, .interest > div, .video-card) :is(h1, h2, h3, h4, h5, h6, .dropcap, .lede-line, .piece, .mlabel, .filed){ --serif: var(--cormorant); font-family: var(--serif); font-feature-settings: "kern", "liga", "onum" 1, "ss01" 1; }
  :root[data-text-weight="heavier"] :is(.interest > div, .video-card) :is(.lede-line, .filed){ font-weight: 400; }
  /* Their panel: in the left gutter of every page but home, the CV, and
     Keys, which have no prose to set; against the text's edge, shown only
     where the gutter has room for it, and not over the foot
     (src/client/text.js measures, and sets .has-room); where there is no
     room, the text needs it more. Quiet until the pointer comes to it. On a
     new page it stays put if its place is the same within a few pixels, and
     otherwise fades out, moves, and fades back in (.settling), so it is never
     seen to jump. */
  .text-ctl{ display: none; }
  @media (min-width: 1100px) and (hover: hover){
    .page:not(:has(> #band)) > .text-ctl{ display: block; position: fixed; z-index: 4; top: 10rem; right: calc(100vw - max(0px, (100vw - 1480px) / 2) - clamp(1.25rem, 7vw, 6rem) + 2rem); width: max-content; text-align: right; visibility: hidden; opacity: 0; transition: opacity 400ms ease, visibility 0s linear 400ms; }
    .page:not(:has(> #band)) > .text-ctl.has-room{ visibility: visible; opacity: 0.65; transition: opacity 700ms ease; }
    .page:not(:has(> #band)) > .text-ctl.has-room:is(:hover, :focus-within){ opacity: 1; transition-duration: 200ms; }
    #app > .text-ctl.has-room.settling{ opacity: 0; transition: opacity 250ms ease; }
    .page:has(> #content:is([data-page="/cv/"], [data-page="/keys/"])) > .text-ctl{ display: none; }
  }
  /* The square at its head: a minus folds the panel to it, and the W it then
     shows opens it again (remembered). A block, not inline, so it is not set
     on a line by its content's baseline and stays put whichever it shows. The
     minus is a rule, not a glyph, so it sits at the square's very middle. */
  .text-ctl .text-ctl-toggle{ display: flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; padding: 0; margin: 0 0 0.9rem auto; border: 0.5px solid var(--rule); font-family: var(--cormorant); font-style: normal; font-size: 1rem; line-height: 1; color: var(--ink-soft); }
  .text-ctl .text-ctl-toggle:hover{ color: var(--ink); border-color: var(--rubric); }
  .text-ctl .when-open{ display: block; width: 0.55rem; border-top: 1px solid currentColor; }
  .text-ctl .when-closed{ display: none; }
  :root[data-text-panel="closed"] .text-ctl .text-ctl-toggle{ margin-bottom: 0; }
  :root[data-text-panel="closed"] .text-ctl .when-open, :root[data-text-panel="closed"] .text-ctl-rows{ display: none; }
  /* The W's box trimmed to its capitals, so they, not its line, sit at the square's middle. */
  :root[data-text-panel="closed"] .text-ctl .when-closed{ display: block; text-box: trim-both cap alphabetic; }
  .text-ctl-row{ margin: 0 0 0.8rem; line-height: 1.45; }
  .text-ctl-label{ display: block; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-softer); margin-bottom: 0.1rem; }
  .text-ctl .sep{ color: var(--rule); margin: 0 0.45em; }
  .text-ctl button{
    font-family: var(--serif); font-style: italic; font-size: 0.92rem; letter-spacing: 0;
    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;
  }
  .text-ctl button:hover{ color: var(--ink); }
  .text-ctl button[aria-pressed="true"]{ color: var(--ink); border-bottom-color: var(--rubric); }
  .text-ctl button:focus-visible{ outline: 1px solid var(--rubric); outline-offset: 3px; }
  /* Each face's name is set in that face, and Heavier in its weight. */
  .text-ctl button[data-value="cormorant"]{ font-family: "Cormorant Garamond", serif; }
  .text-ctl button[data-value="literata"]{ font-family: "Literata Text", "Literata", Georgia, serif; }
  .text-ctl button[data-value="heavier"]{ font-weight: 500; }

  /* ---------- 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); }
  /* An in-progress page, built only by the dev server, says so above its title. */
  .draft-banner{ max-width: var(--measure); margin: -0.4rem 0 1.6rem; padding: 0.6rem 0.9rem; border: 0.5px dashed var(--rubric); font-size: 0.92rem; font-style: italic; line-height: 1.45; color: var(--ink-soft); }
  .draft-label{ font-family: var(--mono); font-style: normal; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rubric); margin-right: 0.8em; }
  /* N9: one header on every reading page. The title and the dek, then the
     date (a paper's to the month), any venue, and a long read's length, in
     mono over a rule; the tag chips, when shown, ride on the same line. */
  .essay-meta{ font-family: var(--mono); font-size: 0.72rem; color: var(--ink-soft); letter-spacing: 0.05em; text-transform: uppercase; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; margin: 0 0 1.6rem; padding-bottom: 1rem; border-bottom: 0.5px solid var(--rule); max-width: var(--measure); }
  .essay-meta .sep{ color: var(--rule); }
  .essay-meta .tag{ font-size: 0.62rem; letter-spacing: 0.1em; color: var(--ink-softer); border: 0.5px solid var(--rule); padding: 0.12rem 0.45rem; border-radius: 1px; white-space: nowrap; }
  .essay-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; }
  .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-title{
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    line-height: 1.15;
    letter-spacing: -0.005em;
    margin: 0 0 0.7rem;
    max-width: var(--measure);
    text-wrap: balance;
  }
  .essay-title .rubric-comma{ color: var(--rubric); }
  .essay-dek{
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.12rem;
    color: var(--ink-soft);
    margin: 0 0 0.9rem;
    line-height: 1.5;
    text-wrap: pretty;
    max-width: var(--measure);
  }
  /* N1: the foot of a reading page, over a rule each: on Philosophy, papers
     to read next (src/client/reading.js leaves out those already read);
     then, quietly, the section's next older and next newer page. Titles as
     the section's lists set them: roman on Philosophy, italic elsewhere. */
  .recommend, .pager{ max-width: var(--measure); border-top: 0.5px solid var(--rule); padding-top: 1rem; }
  .recommend{ margin: 3rem 0 0; }
  .recommend-head, .pager-label{ font-family: var(--mono); font-size: 0.62rem; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
  .recommend-head{ margin: 0 0 0.7rem; }
  .recommend ul{ list-style: none; margin: 0; padding: 0; }
  .recommend li{ font-size: 1.05rem; line-height: 1.4; margin: 0 0 0.4rem; }
  .recommend a{ text-decoration-color: transparent; }
  .recommend a:hover{ text-decoration-color: var(--ink-softer); }
  .pager{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem 2rem; margin: 2.4rem 0 0; }
  .recommend:not([hidden]) + .pager{ margin-top: 1.8rem; border-top: 0.5px dashed var(--rule-soft); }
  .pager a{ text-decoration: none; }
  .pager-next{ grid-column: 2; text-align: right; }
  .pager-label{ display: block; margin-bottom: 0.3rem; transition: color 120ms ease; }
  .pager a:hover .pager-label{ color: var(--rubric); }
  .pager-title{ display: block; font-style: italic; font-size: 1.05rem; line-height: 1.4; text-wrap: balance; }
  .pager-title em, .reading.designed ~ .pager .pager-title{ font-style: normal; }
  .reading.designed ~ .pager .pager-title em{ font-style: italic; }
  @media (max-width: 600px){
    .pager{ grid-template-columns: minmax(0, 1fr); }
    .pager-next{ grid-column: 1; }
  }
  /* 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{ 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; font-size: 0.92rem; color: var(--ink-soft); }
  /* N3: the whole row opens its programme. The summary keeps its name for a
     screen reader but takes no line: its hit area is stretched over the row,
     beneath the row's links, and a wedge hung before the title, turning as
     the row opens, is the cue. The programme, once open, sits above the hit
     area, so it can be read and selected without closing it. */
  .biblio.diary li:has(> .row-program){ position: relative; }
  .row-program summary{ list-style: none; font-size: 0; line-height: 0; }
  .row-program summary::-webkit-details-marker{ display: none; }
  /* The whole row is the toggle, the marker in the margin before its title included. */
  .row-program summary::after{ content: ""; position: absolute; inset: 0 0 0 -1.4rem; cursor: pointer; }
  .row-program summary:focus-visible{ outline: none; }
  .row-program summary:focus-visible::after{ outline: 1px solid var(--rubric); outline-offset: -1px; }
  .biblio.diary li:has(> .row-program) a, .row-program[open] > :not(summary){ position: relative; z-index: 1; }
  .biblio.diary li:has(> .row-program) .title::before{ content: "▸"; position: absolute; margin-left: -1.05em; font-style: normal; color: var(--ink-softer); transition: transform 120ms ease, color 120ms ease; }
  /* Only under a pointer: on a phone a tap leaves :hover behind, and the
     marker would stay red on a row it had just closed. */
  @media (hover: hover){ .biblio.diary li:has(> .row-program):hover .title::before{ color: var(--rubric); } }
  .biblio.diary li:has(> .row-program[open]) .title::before{ color: var(--rubric); transform: rotate(90deg); }
  .row-program ul{ list-style: none; margin: 0.3rem 0 0; padding: 0; line-height: 1.45; }
  .row-program .encores{ margin: 0.2rem 0 0.1rem; 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; }
  .body code{ font-family: var(--mono); font-size: 0.78em; }

  /* 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{
    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; color: var(--ink-head); }
  .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; }
  /* N4: under the heading, the groups to jump to, in quiet small caps, spaced
     like the brow's links; each group lands clear of the brow. */
  .jump{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 1.3rem; margin: -1.4rem 0 2.2rem; }
  .jump a{ color: var(--rubric); text-decoration: none; border-bottom: 0.5px solid transparent; }
  .jump-label{ color: var(--ink-softer); }
  .jump a:hover{ color: var(--ink); border-bottom-color: var(--rubric); }
  @media (max-width: 600px){ .jump{ column-gap: 0.85rem; } }
  #content .group[id]{ scroll-margin-top: calc(var(--brow-h, 0px) + 1rem); }
  @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: 18rem minmax(0, var(--measure));
    gap: 2rem clamp(3rem, 7vw, 7rem);
    align-items: start;
  }
  .about > div:last-child{ order: -1; }
  /* The photo keeps beside the text as it is read, clear of the brow while
     the brow shows (src/client/brow.js keeps --brow-h); not on a phone, where
     it sits above the text. */
  .about > div:last-child{ position: sticky; top: calc(var(--brow-h, 0px) + 1.5rem); transition: top 0.25s ease; }
  .page:has(> .brow.tucked:not(:focus-within)) .about > div:last-child{ top: 1.5rem; }
  @media (prefers-reduced-motion: reduce){ .about > div:last-child{ transition: none; } }
  .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{
    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;
  }
  /* C2: a card with no video is its words alone, ruled off from the card above. */
  .video-card + .video-card:not(:has(> .frame)){ border-top: 0.5px solid var(--rule); padding-top: 1.1rem; }
  .video-card:not(:has(> .frame)) .label{ margin-top: 0; }
  .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{
    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{
    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.writings li{ grid-template-columns: 5.6rem minmax(0, 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; }
    .about > div:last-child{ position: static; }
  }

  /* 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: var(--rule); }
  .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)); }
.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: 18rem; 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: 1rem 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; }
  /* On every page only the name's line sticks: the brow gives its parts to
     the page, the name and the section links, which scroll away beneath it.
     Once it has stuck, the name is ruled off beneath; once the links have
     gone, a way back up to them takes the place of the "Updated" stamp at
     the end of its line, which here every page has (src/client/brow.js). */
  .page > .brow{ display: contents; }
  .page > .brow > .name{ position: sticky; top: 0; z-index: 5; margin: -1rem 0 0; padding: 1rem 0 0.7rem; background: var(--grain), var(--paper); border-bottom: 0.5px solid transparent; transition: font-size 0.3s, border-color 0.25s; }
  .page.pinned > .brow > .name{ border-bottom-color: var(--rule); }
  .page > .brow > .brow-nav{ margin: 0.3rem 0 2rem; padding-bottom: 1.25rem; border-bottom: 0.5px solid var(--rule); }
  .page > .brow .meta{ position: absolute; right: 0; font-size: 0.62rem; letter-spacing: 0.12em; }
  .page:not(:has(> #band)) > .brow #brow-meta{ transition: opacity 0.25s; }
  /* Stuck to the top, the name'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 > .name::before{ content: ""; position: absolute; z-index: -1; top: -12rem; bottom: 0; left: calc((100% - 100vw) / 2); right: calc((100% - 100vw) / 2); background: var(--grain), var(--paper); }
  /* And paper stays up there, over the page. */
  body::after{ content: ""; position: fixed; z-index: 6; top: -12rem; left: 0; right: 0; height: 12rem; background: var(--paper); pointer-events: none; }
  /* 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{ position: relative; }
  .brow-nav a::after{ content: ""; position: absolute; inset: -0.45rem -0.45rem; }
  /* Home: the brow's links from the first, and the inscription beneath the
     statement (its portrait is the statement's own here). The name and links
     head the column, full width (the desktop grid's align-items: start would
     shrink them). */
  .page:has(> #band) > .brow > .name, .page:has(> #band) > .brow > .brow-nav{ order: -3; align-self: stretch; }
  .page:has(> #band) > .brow > .brow-nav{ margin: -1.3rem 0 0.4rem; padding-bottom: 1.1rem; }
  .page:has(> #band) > #band > img{ display: none; }
  /* Never fewer than eighteen characters to the line, however large the
     text: the column is 86vw (7vw gutters), and a letter of the inscription,
     capital and tracked, is 0.65em. Nor, on a short screen, fewer than
     nineteen of its lines to the screen's height (at 1.45 each). */
  .page:has(> #band) > #band > .runs{ margin: 0; padding: 1rem 0 1.1rem; font-size: min(1.2rem, 86vw / (18 * 0.65), 100vh / (19 * 1.45)); }
  .page:has(> #band) .brow-nav{ display: flex; }
  .page:has(> #band) .brow-nav.live a{ opacity: 1; transform: none; pointer-events: auto; }
  .page:has(> #band) > #content, .page:has(> #band) .home-main, .page:has(> #band) .home-lists{ display: contents; }
  .statement{ order: -1; font-size: 0.96rem; line-height: 1.55; }
  .statement .m-portrait{ display: block; float: right; width: 9.25rem; height: auto; margin: 0.25rem 0 0.4rem 0.9rem; filter: saturate(0.92); border: 0.5px solid var(--rule); }
  .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{ color: var(--rubric); margin: 0 0 0.3rem 0; }
.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 !important; } ::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. */
.reading .margin .mlabel, .body blockquote cite, .gloss .src, .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; }
/* N2: on a phone every list sets the date above the title, so the title has
   the width: Philosophy's, and Elsewhere, recently, the diary, and Tangents. */
@media (max-width: 600px){
  .biblio li, .biblio.tagged li, .biblio.writings li, .biblio.diary li, #recent li, .page:has(> #band) .biblio li{ grid-template-columns: minmax(0, 1fr); row-gap: 0.15rem; }
  .biblio .date:has(.in-progress){ grid-row: auto; }
  .biblio .date .in-progress{ display: inline; margin: 0; font-size: inherit; }
  .biblio .date .in-progress::before{ content: "·"; margin: 0 0.5em; }
  .biblio .dek, .biblio .occasion, .biblio .tags, .biblio.diary .dek, .biblio.diary .section, .row-program{ 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, .lede, .body p, .body blockquote, .diss, .section-intro, .about p, .interest p{ text-wrap: wrap; }
}

/* ---------- A1: title links ---------- */
/* A work's title on the CV, linked to the work, is underlined as a listed
   title is (.biblio .title a): lightly at rest, darker under the pointer. */
.cv-row .what > a{ text-decoration-color: var(--rule); }
.cv-row .what > a:hover{ text-decoration-color: var(--ink-softer); }

/* ---------- A6: focus ---------- */
/* One focus ring, for the keyboard only (a click shows none): the rubric
   hairline of the width control's buttons. What is focused only so that a
   screen reader announces it (tabindex="-1": #content, or the heading nav.js
   moves to) takes none. */
:focus-visible{ outline: 1px solid var(--rubric); outline-offset: 3px; }
[tabindex="-1"]:focus{ outline: none; }
/* Home: the brow's section links wait unseen until their rail entries pass
   under it; one reached by the keyboard shows itself. */
.page:has(> #band) .brow-nav.live a:focus-visible{ opacity: 1; transform: none; }

/* ---------- A7: tap targets ---------- */
/* On phones and touch screens, each small link's hit area reaches past its
   letters to at least 24px each way, as the brow's sections and the rail's
   already do under 860px: an overlay, so nothing moves or shows. The name's
   reaches less far below it, where the section links begin. "Read on" keeps
   its ::after for the arrow, so its overlay is the ::before. */
@media (max-width: 860px), (pointer: coarse){
  .brow .name a, .brow-nav a, .foot .foot-links a, .essay-back a, .sectionhead .more, .interest .interest-more a, .cv-note a{ position: relative; }
  .brow-nav a::after, .foot .foot-links a::after, .essay-back a::after, .sectionhead .more::after, .cv-note a::after,
  .interest .interest-more a::before{ content: ""; position: absolute; inset: -0.45rem; }
  .brow .name a::after{ content: ""; position: absolute; inset: -0.45rem -0.45rem -0.15rem; }
}

/* ---------- A10: print ---------- */
/* On paper: black on white, without the screen's navigation (the brow's and
   the rail's section links, the foot and its width control, the skip link,
   the way back, the years, next and previous, recommendations, and jump
   links). The name stays at the head, so a printed paper or CV says whose it
   is. Margin notes are set inline and open, as on a phone, and a link to
   another site prints its address after it. */
@media print{
  @page{ margin: 2cm; }
  :root{ --paper: #fff; --paper-deep: #fff; --grain: none; --ink: #000; --ink-soft: #333; --ink-softer: #555; --rule: #999; --rule-soft: #bbb; --cpl-scale: 1 !important; }
  body::before, body::after{ display: none; }
  .brow-nav, #band ul, #band .fleuron, .foot, .text-ctl, .skip-link, .essay-back, .diary-years, .pager, .recommend, .jump, .connectors, #content::after{ display: none !important; }
  #app{ padding: 0; max-width: none; min-height: 0; }
  #app:not(:has(> #band)){ display: block; }
  #app > #brow{ position: static; transform: none; margin: 0 0 1.5rem; padding: 0 0 0.6rem; }
  #brow::before{ content: none; }

  /* One column, the margin's notes in the text. */
  .reading, .reading.designed{ grid-template-columns: minmax(0, var(--measure)); gap: 1.5rem; }
  .reading:has(.note-inline) > .margin{ display: none; }
  .anchor{ background-image: none; }
  .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; }
  .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::details-content{ content-visibility: visible; }
  .note-inline summary{ float: left; margin-right: 0.45em; list-style: none; }
  .note-inline summary::-webkit-details-marker{ display: none; }
  .note-inline summary::after{ content: none; }
  .note-inline .pv{ display: none; }
  .note-inline .num{ font-family: var(--mono); font-size: 0.62rem; color: var(--rubric); }
  .note-inline .num::before{ content: attr(data-n); }
  /* A page whose notes have no copies in the text (Investigations), or a
     browser that cannot open them for print: the notes after the text,
     numbered as their anchors are. */
  .reading > .margin{ border-top: 0.5px solid var(--rule); padding-top: 1rem; }
  .reading:not(:has(.note-inline)) > .margin{ display: block; }
  .reading .margin .gloss{ position: static; margin: 0 0 0.8rem; }
  .reading:not(:has(.note-inline)) .body{ counter-reset: note; }
  .reading:not(:has(.note-inline)) .anchor{ counter-increment: note; }
  .reading:not(:has(.note-inline)) .anchor::after{ content: counter(note, lower-roman); font-family: var(--mono); font-size: 0.55em; vertical-align: super; color: var(--rubric); margin-left: 0.1em; }
  @supports not selector(::details-content){
    .reading:has(.note-inline) > .margin{ display: block; }
    .note-inline{ display: none; }
  }

  /* A link to another site: its address, after it. */
  #content a[href^="http"]::after{ content: " (" attr(href) ")"; font-size: 0.86em; overflow-wrap: anywhere; }

  /* Nothing split across pages that should be read whole. */
  figure, .embed, .note-inline, .gloss, .callout, blockquote, .video-card, .cv-row, .biblio li{ break-inside: avoid; }
  h1, h2, h3, .diary-year{ break-after: avoid; }
}

/* ---------- A13: the homepage on phones ---------- */
/* The statement is running text, so it is set as the reading pages are, at
   17px; the lists' deks come up a step with it, still below their titles. */
@media (max-width: 600px){
  .statement{ font-size: 17px; }
  .home-main .biblio .dek{ font-size: 1rem; }
}

/* ---------- A4 · home's h1, there for screen readers and search engines only ---------- */
.visually-hidden{ position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- A5 · "Skip to content": the first stop for a keyboard, seen only while it has focus ---------- */
.skip-link{ position: absolute; top: 0.75rem; left: 0.75rem; z-index: 10; padding: 0.45rem 0.75rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); background: var(--paper); border: 0.5px solid var(--rule); text-decoration: none; }
.skip-link:not(:focus){ width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Where it lands, clear of the sticky brow. */
#content{ scroll-margin-top: 4.5rem; }

/* ---------- M1 · the brow's "Updated" stamp, top right ---------- */
/* On home it rides on the name's line, but out of the row, against the
   sticky brow's right edge, so the section links lay out as if it were not
   there. It stays while they fade in, until one would cover it; then it fades
   out as they fade in (brow.js marks it .covered). Other pages, whose section
   links are always there, don't show it. */
.page:has(> #band) > .brow .meta{ position: absolute; right: 0; font-size: 0.62rem; letter-spacing: 0.12em; transition: opacity 0.25s, transform 0.25s; }
.page:has(> #band) > .brow .meta.covered{ opacity: 0; transform: translateY(-0.35rem); pointer-events: none; }
@media (width > 860px){ .page:not(:has(> #band)) > .brow #brow-meta{ display: none; } }
/* "Back to top", at the end of the name's line once the links have scrolled
   away on a phone, in home's stamp's place (src/client/brow.js). */
.brow .to-top{ position: absolute; right: 0; background: none; border: 0; padding: 0; margin: 0; color: var(--ink-soft); cursor: pointer; visibility: hidden; opacity: 0; transition: opacity 0.25s, visibility 0.25s; }
.brow .to-top:hover{ color: var(--rubric); }
.page.away > .brow .to-top{ visibility: visible; opacity: 1; }
.page.away > .brow #brow-meta{ opacity: 0; }
/* Where the name leaves no room for them (brow.js). */
.page > .brow .meta.crowded{ visibility: hidden; }
/* brow.js sets the stamp on the name's baseline by these. */
.baseline-probe{ display: inline-block; width: 0; height: 0; vertical-align: baseline; }

/* ---------- A8 · the acrostic wraps as PAT / RICK ---------- */
/* The seven sit in two runs (shell.ts: browNav, railHTML). Where a line is
   too short for all seven, it breaks between the runs, after Tangents; a run
   breaks inside itself only where it is wider than the line. */
.brow-nav .run{ display: flex; flex-wrap: wrap; gap: inherit; }

/* ---------- N11 · the 404's way on: the seven, the acrostic down the left edge ---------- */
.lost{ list-style: none; margin: 0; padding: 0; max-width: var(--measure); border-top: 0.5px solid var(--rule); }
.lost li{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 1rem; padding: 0.6rem 0; border-bottom: 0.5px dashed var(--rule-soft); }
.lost li:last-child{ border-bottom: 0.5px solid var(--rule); }
.lost a{ text-decoration: none; font-feature-settings: "kern" 1, "lnum" 1; }
.lost a:hover{ color: var(--rubric); }
.lost .acrostic-letter{ color: var(--rubric); }
.lost .elab{ font-style: italic; font-size: 0.96rem; color: var(--ink-softer); }

/* ---------- Type: which face each kind of text is set in ----------
   Serif (Cormorant Garamond) for the writing: what Patrick wrote or named,
   the prose, the titles of works and of pages, deks and glosses (italic),
   his name. Mono (JetBrains Mono, small capitals, tracked) for the apparatus:
   what the site says about the writing, the navigation, the headings that
   sort a page or a list, dates, sections, places, tags, marks of state, the
   controls. A section's name over its page is its title, set in capitals as
   the name heads home (.section-band); and the acrostic down home's rail is
   set so too. Small caps (Cormorant SC) only as
   devices inside the writing: a
   concept, a case's run-in head, a lede's first words, a citation's source.
   The rules here give each role its face; the rules above, its place and
   its color. See README, "Type". */
/* The navigation. The acrostic down home's rail is the one exception: there
   it spells the name, in serif capitals, and only in the brow is it mono. */
.brow-nav, .jump, .lost a{ font-family: var(--mono); font-weight: 400; font-variant: normal; text-transform: uppercase; letter-spacing: 0.12em; }
/* Mono sets darker than Cormorant at the same ink, so the section names take the second. */
.lost a{ font-size: 0.78rem; line-height: 1.3; color: var(--ink-soft); }
/* The rail's heads in full capitals, bold, in the serif (above). */
.rail .head{ color: var(--ink-head); }
.jump{ font-size: 0.62rem; }
/* The headings that sort a page or a list. */
.home-main .label, .phil-rail .label, .group h2, .cv-section h3, .endnotes h3, .callout .callout-title, .now-tag{ font-family: var(--mono); font-weight: 400; font-variant: normal; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.4; }
/* What is said beside an entry: its section, a label. */
.biblio .section, .biblio li.upcoming .section, .filed-label, .contact-block .lbl, .essay-program .encores-label, .row-program .encores-label{ font-family: var(--mono); font-weight: 400; font-variant: normal; font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; }