/* Layout: a reading room. One generous text column (about 38rem) beside a quiet margin that carries the
     catalogue's call-slip data. The eight people are a contents list whose rows double as one shared timeline; a
     work opens as a two-page spread (colophon on the verso, title page on the recto) bound on its left edge by the
     same bottle-green spine as the holding card. Core tokens are the holding page's, verbatim. */
  @font-face { font-family: "Gloock"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/gloock-normal-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
  @font-face { font-family: "Gloock"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/gloock-normal-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
  @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibmplexmono-normal-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
  @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibmplexmono-normal-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
  @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/ibmplexmono-normal-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
  @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/ibmplexmono-normal-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
  @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("/assets/fonts/ibmplexsans-normal-400-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
  @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("/assets/fonts/ibmplexsans-normal-400-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
  @font-face { font-family: "Literata"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/literata-italic-400-greek.woff2") format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
  @font-face { font-family: "Literata"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/literata-italic-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
  @font-face { font-family: "Literata"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/literata-italic-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
  @font-face { font-family: "Literata"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("/assets/fonts/literata-normal-400-500-greek.woff2") format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
  @font-face { font-family: "Literata"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("/assets/fonts/literata-normal-400-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
  @font-face { font-family: "Literata"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("/assets/fonts/literata-normal-400-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
  :root {
    --paper: #e8ecea;       /* holding: cool stone, not cream */
    --card: #f4f6f5;        /* holding: the page itself */
    --ink: #15302a;         /* holding: bottle-green binding cloth */
    --ink-soft: #46605a;
    --rule: #b9c4c0;
    --brass: #8a6d22;       /* holding: brass label-holder (rules, ticks, accents) */
    --pass: #2f6b4f;        /* holding: pass green, also "Public domain" */
    --brass-text: #76601e;  /* brass for small text: 5.1:1 on paper */
    --check: #9a5b12;       /* "To check": its own colour, not the brass accent */
    --held: #7b3441;        /* oxblood: likely in copyright */
    --on-ink: #f4f6f5;
    --spine: #15302a;
    --redline: #b4535c;     /* the red heading rule of an index card */
    --field-line: #46605a;  /* form-field borders, 6.3:1 on card */
    --display: "Gloock", "Bodoni 72", "Didot", Georgia, serif;
    --text: "Literata", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --ui: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
    --measure: 38rem;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --paper: #0e1a17; --card: #13231f; --ink: #e2e9e6; --ink-soft: #9fb3ad; --rule: #2b403a;
      --brass: #cfa94f; --pass: #7cc39c; --brass-text: #cfa94f; --check: #e3ad62; --held: #e3939f;
      --on-ink: #0e1a17; --spine: #3b6656; --redline: #a2545d; --field-line: #9fb3ad; color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
    --paper: #0e1a17; --card: #13231f; --ink: #e2e9e6; --ink-soft: #9fb3ad; --rule: #2b403a;
    --brass: #cfa94f; --pass: #7cc39c; --brass-text: #cfa94f; --check: #e3ad62; --held: #e3939f;
    --on-ink: #0e1a17; --spine: #3b6656; --redline: #a2545d; --field-line: #9fb3ad; color-scheme: dark;
  }

  * { box-sizing: border-box; }
  body {
    margin: 0; background: var(--paper); color: var(--ink);
    font-family: var(--text); font-size: 1.0625rem; line-height: 1.65;
    padding-inline: 16px; padding-block: 0 64px;
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  }
  .room { max-width: 70rem; margin-inline: auto; }
  h1, h2, h3 { font-weight: 400; text-wrap: balance; margin: 0; }
  p { margin: 0; }
  a, button { font: inherit; color: inherit; }
  :focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 1px; }
  [tabindex="-1"]:focus:not(:focus-visible) { outline: none; }
  /* a view's h1 takes focus on every route change so screen readers announce it; it is not a control, so no ring */
  h1[tabindex="-1"]:focus { outline: none; }
  .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .skip { position: absolute; left: 16px; top: -48px; z-index: 10; background: var(--card); color: var(--ink); border: 1px solid var(--ink); padding: 6px 12px; font-family: var(--ui); }
  .skip:focus { top: 8px; }

  /* ---------- masthead ---------- */
  .desk {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 24px;
    padding-block: 18px 14px; border-bottom: 1px solid var(--rule);
  }
  .mark { display: flex; align-items: baseline; gap: 6px 16px; flex-wrap: wrap; min-width: 0; }
  .mark a, .mark a:visited {
    background: none; border: 0; padding: 0; cursor: pointer; color: inherit; text-decoration: none;
    font-family: var(--display); font-size: 1.6rem; line-height: 1; letter-spacing: -0.01em;
  }
  .mark span { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
  .mark b { color: var(--brass-text); font-weight: 500; }
  .lk-seal { display: inline-block; vertical-align: middle; height: 1.15em; width: auto; margin-right: 0.18em; }
  .lk-ring { fill: none; stroke: var(--ink); }
  .lk-brass { fill: none; stroke: var(--brass); }
  .lk-lk { fill: var(--ink); font-family: var(--display); }
  nav.rooms { display: flex; gap: 4px 22px; flex-wrap: wrap; font-family: var(--ui); font-size: 0.95rem; }
  nav.rooms a, nav.rooms a:visited { background: none; border: 0; padding: 4px 0; cursor: pointer; color: var(--ink-soft); border-bottom: 2px solid transparent; text-decoration: none; }
  nav.rooms a:hover { color: var(--ink); }
  nav.rooms a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--brass); }

  main { padding-top: clamp(28px, 6vw, 64px); }
  main:focus { outline: none; }

  /* ---------- shared bits ---------- */
  .eyebrow { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
  .eyebrow b { color: var(--brass-text); font-weight: 500; }
  .trail { display: flex; flex-wrap: wrap; gap: 4px 10px; font-family: var(--ui); font-size: 0.88rem; color: var(--ink-soft); margin-bottom: 22px; }
  .trail a, .trail a:visited { background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink-soft); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
  .trail a:hover { color: var(--ink); text-decoration-color: var(--brass); }
  .trail span[aria-hidden] { color: var(--rule); }
  .link, .link:visited {
    background: none; border: 0; padding: 0; cursor: pointer; text-align: left; color: inherit;
    text-decoration: underline; text-decoration-color: var(--rule); text-decoration-thickness: 1px; text-underline-offset: 0.2em;
  }
  .link:hover { text-decoration-color: var(--brass); }
  .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
  .soft { color: var(--ink-soft); }
  .minor { font-family: var(--text); font-weight: 500; font-size: 1.15rem; }
  .btn { font-family: var(--ui); font-size: 0.95rem; font-weight: 500; padding: 10px 18px; border: 1px solid var(--ink); background: var(--ink); color: var(--on-ink); cursor: pointer; text-align: left; }
  .btn:visited { color: var(--on-ink); }
  a.btn { display: inline-block; text-decoration: none; }
  .btn:hover { background: transparent; color: var(--ink); }
  .btn.ghost { background: transparent; color: var(--ink); }
  .btn.ghost:visited { color: var(--ink); }
  .btn.ghost:hover { background: var(--card); }
  .btn small { font-weight: 400; opacity: 0.85; margin-left: 6px; }
  .copy { margin-left: 8px; background: none; border: 1px solid var(--field-line); font-family: var(--ui); font-size: 0.76rem; padding: 1px 8px; cursor: pointer; color: var(--ink); vertical-align: 1px; }
  .copy:hover { background: var(--paper); }

  /* rights marks: shape + word, never colour alone */
  .rights { display: inline-flex; align-items: center; gap: 6px; font-family: var(--ui); font-size: 0.82rem; white-space: nowrap; }
  .rights::before { content: ""; width: 9px; height: 9px; border-radius: 50%; flex: none; }
  .r-public-domain { color: var(--pass); }
  .r-public-domain::before { background: var(--pass); }
  .r-check { color: var(--check); }
  .r-check::before { border: 1.5px solid var(--check); background: linear-gradient(90deg, var(--check) 50%, transparent 50%); }
  .r-in-copyright-likely { color: var(--held); }
  .r-in-copyright-likely::before { border: 1.5px solid var(--held); border-radius: 1px; }
  .flag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--ui); font-size: 0.76rem; color: var(--ink-soft); }
  .flag::before { content: ""; width: 6px; height: 6px; border: 1.5px solid currentColor; transform: rotate(45deg); flex: none; margin-inline: 1px; }
  .flag.mixed::before { border-radius: 50%; border-style: dashed; transform: none; width: 8px; height: 8px; margin: 0; }

  /* ---------- lifelines: one ink, brass for works dated after death ---------- */
  .ll { display: block; position: relative; height: 26px; min-width: 0; }
  .ll .base { position: absolute; left: 0; right: 0; bottom: 0; border-bottom: 1px solid var(--rule); }
  .ll .span { position: absolute; bottom: 0; height: 5px; background: var(--rule); }
  .ll .death { position: absolute; bottom: 0; height: 100%; border-left: 1px dashed var(--ink-soft); }
  .ll .tk { position: absolute; bottom: 0; width: 2px; background: var(--ink); transform-origin: bottom; }
  .ll .tk.post { background: var(--brass); }
  .ll.big { height: 120px; }
  .ll.big .tk { width: max(2px, calc(var(--yw) - 1px)); cursor: pointer; }
  .ll.big .tk:hover { background: var(--brass); }
  .ll.big .tk.post:hover { background: var(--ink); }
  .ll.big .span { height: 8px; }
  .ll-axis { position: relative; height: 2.4rem; font-family: var(--mono); font-size: 0.72rem; color: var(--ink-soft); }
  .ll-axis span { position: absolute; top: 4px; transform: translateX(-50%); white-space: nowrap; text-align: center; line-height: 1.25; }
  .lifework .ll-axis span:first-child { transform: none; }
  .ll-axis small { display: block; font-size: 0.66rem; }
  .legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-family: var(--ui); font-size: 0.8rem; color: var(--ink-soft); }
  .legend i { display: inline-block; vertical-align: -1px; margin-right: 6px; }
  .legend .lg-span { width: 18px; height: 5px; background: var(--rule); vertical-align: 1px; }
  .legend .lg-tk { width: 2px; height: 12px; background: var(--ink); }
  .legend .lg-post { width: 2px; height: 12px; background: var(--brass); }
  .legend .lg-death { width: 0; height: 12px; border-left: 1px dashed var(--ink-soft); }

  /* ---------- home ---------- */
  .opening { display: grid; gap: 18px; max-width: 46rem; }
  .opening h1 { font-family: var(--display); font-size: clamp(3rem, 10vw, 5.6rem); line-height: 0.95; letter-spacing: -0.01em; }
  .opening .tagline { font-family: var(--display); font-size: clamp(1.25rem, 3.2vw, 1.7rem); line-height: 1.25; color: var(--ink-soft); }
  .opening .lede { max-width: var(--measure); }
  .opening .actions { display: flex; flex-wrap: wrap; gap: 10px 14px; }
  .holdings { font-family: var(--mono); font-size: 0.82rem; color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 4px 18px; border-top: 1px solid var(--rule); padding-top: 12px; }
  .holdings b { color: var(--ink); font-weight: 500; }
  .log { font-family: var(--mono); font-size: 0.8rem; color: var(--ink-soft); background: var(--card); border: 1px dashed var(--rule); padding: 10px 12px; }
  .log .ok { color: var(--pass); font-weight: 500; }

  .contents { margin-top: clamp(40px, 7vw, 72px); }
  .contents > header { display: grid; gap: 8px; border-bottom: 1px solid var(--ink); padding-bottom: 12px; }
  .contents > header .top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 20px; }
  .contents h2 { font-family: var(--display); font-size: 1.7rem; }
  .people { list-style: none; margin: 0; padding: 0; }
  .lane-grid { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) 11rem; column-gap: 28px; }
  .axis-row { padding-top: 10px; }
  .axis-row .ll-axis { grid-column: 2 / 4; height: 1.4rem; }
  .person-row {
    grid-template-areas: "life who tally" ". line line"; row-gap: 10px;
    padding-block: 20px 16px; border-bottom: 1px solid var(--rule); align-items: baseline;
  }
  .person-row .life { grid-area: life; font-family: var(--mono); font-size: 0.85rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
  .person-row .who { grid-area: who; min-width: 0; display: grid; gap: 4px; }
  .person-row .who .link { font-family: var(--display); font-size: clamp(1.6rem, 3.6vw, 2.25rem); line-height: 1.1; text-decoration: none; }
  .person-row .who .link:hover { text-decoration: underline; text-decoration-color: var(--brass); text-decoration-thickness: 2px; }
  .person-row .field { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brass-text); }
  .person-row .why { color: var(--ink); max-width: 36rem; }
  .person-row .tally { grid-area: tally; font-family: var(--mono); font-size: 0.8rem; color: var(--ink-soft); display: grid; gap: 2px; font-variant-numeric: tabular-nums; }
  .person-row .tally b { color: var(--ink); font-weight: 500; }
  .person-row .ll { grid-area: line; }

  /* ---------- person ---------- */
  .person-head { position: relative; display: grid; gap: 12px; max-width: 48rem; padding-right: clamp(0px, 8vw, 120px); }
  .person-head .ghost {
    position: absolute; right: 0; top: -0.12em; z-index: 0; pointer-events: none; user-select: none;
    font-family: var(--display); font-size: clamp(7rem, 22vw, 15rem); line-height: 0.8; color: var(--ink); opacity: 0.07;
  }
  .person-head > :not(.ghost) { position: relative; z-index: 1; }
  .person-head h1 { font-family: var(--display); font-size: clamp(2.6rem, 8vw, 4.6rem); line-height: 1; letter-spacing: -0.01em; }
  .person-head .why { font-size: 1.2rem; line-height: 1.5; max-width: var(--measure); }
  .figures { display: flex; flex-wrap: wrap; gap: 6px 22px; font-family: var(--mono); font-size: 0.82rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; align-items: baseline; }
  .figures b { color: var(--ink); font-weight: 500; }
  .figures .link { font-family: var(--mono); color: var(--ink-soft); }
  .lifework { margin-top: clamp(28px, 5vw, 44px); display: grid; gap: 10px; max-width: 60rem; }
  .lifework .head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 20px; }
  .lifework .head span { font-family: var(--ui); font-size: 0.88rem; color: var(--ink-soft); }
  .lifework .cap { font-family: var(--ui); font-size: 0.84rem; color: var(--ink-soft); max-width: var(--measure); }
  .shelf { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 40px; margin-top: clamp(32px, 6vw, 56px); align-items: start; }
  .toc { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 16px); display: grid; gap: 14px; }
  .seg { display: inline-flex; border: 1px solid var(--field-line); width: fit-content; }
  .seg button { background: none; border: 0; padding: 5px 12px; cursor: pointer; font-family: var(--ui); font-size: 0.86rem; color: var(--ink-soft); }
  .seg button + button { border-left: 1px solid var(--field-line); }
  .seg button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
  .toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-family: var(--ui); font-size: 0.92rem; }
  .toc li a, .toc li a:visited { width: 100%; display: flex; justify-content: space-between; gap: 12px; background: none; border: 0; padding: 5px 0; cursor: pointer; text-align: left; color: var(--ink-soft); border-bottom: 1px dotted var(--rule); text-decoration: none; }
  .toc li a:hover { color: var(--ink); }
  .toc .num { font-size: 0.82rem; }
  .group { scroll-margin-top: 20px; }
  .group + .group { margin-top: 44px; }
  .group h2 { font-family: var(--display); font-size: 1.65rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; border-bottom: 1px solid var(--ink); padding-bottom: 8px; }
  .group h2 .num { font-size: 0.8rem; color: var(--ink-soft); }
  .group h2 .age { font-family: var(--ui); font-size: 0.86rem; color: var(--ink-soft); }
  .works { list-style: none; margin: 0; padding: 0; }
  .work-row {
    display: grid; grid-template-columns: 5rem minmax(0, 1fr) 10.5rem; grid-template-areas: "yr body rc";
    gap: 4px 18px; padding-block: 14px; border-bottom: 1px solid var(--rule);
  }
  .work-row .yr { grid-area: yr; font-family: var(--mono); font-size: 0.85rem; color: var(--ink-soft); padding-top: 3px; font-variant-numeric: tabular-nums; line-height: 1.3; }
  .work-row .yr small { display: block; font-family: var(--ui); font-size: 0.72rem; margin-top: 3px; }
  .work-row .body { grid-area: body; min-width: 0; display: grid; gap: 4px; }
  .work-row .link { font-size: 1.08rem; line-height: 1.4; overflow-wrap: anywhere; }
  .work-row .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; font-family: var(--ui); font-size: 0.84rem; color: var(--ink-soft); }
  .work-row .meta .who { color: var(--ink); }
  .work-row .meta .cn { font-family: var(--mono); font-size: 0.78rem; color: var(--brass-text); }
  .work-row .rc { grid-area: rc; display: grid; gap: 4px; align-content: start; justify-items: start; padding-top: 4px; }
  .work-row .held { font-family: var(--ui); font-size: 0.8rem; color: var(--ink-soft); }
  .more { margin-top: 14px; background: none; border: 1px solid var(--field-line); padding: 8px 14px; cursor: pointer; font-family: var(--ui); font-size: 0.9rem; color: var(--ink); }
  a.more { display: inline-block; text-decoration: none; }
  .more:hover { background: var(--card); }
  .sought { margin-top: 56px; max-width: var(--measure); border-top: 2px solid var(--brass); padding-top: 14px; display: grid; gap: 10px; scroll-margin-top: 20px; }
  .sought h2 { font-family: var(--text); font-weight: 500; font-size: 1.25rem; }
  .sought ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 6px; color: var(--ink-soft); font-size: 0.98rem; }

  /* ---------- work: the opened book ---------- */
  .spread {
    display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    background: var(--card); border: 1px solid var(--rule); border-left: 10px solid var(--spine);
  }
  .leaf { padding: clamp(24px, 4.5vw, 52px); min-width: 0; }
  .verso { order: 1; position: relative; border-right: 1px solid var(--rule); font-size: 0.92rem; display: grid; gap: 20px; align-content: start; padding-bottom: 56px; }
  .recto { order: 2; display: grid; gap: 34px; align-content: center; justify-items: center; text-align: center; min-height: 22rem; }
  .recto .top { display: grid; gap: 20px; justify-items: center; }
  .recto h1 { font-family: var(--display); font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.08; overflow-wrap: anywhere; }
  .recto .by { font-style: italic; font-size: 1.15rem; }
  .recto .by .link { font-style: normal; }
  .recto .fleuron { width: 3rem; border: 0; border-top: 1px solid var(--ink); margin: 0; }
  .recto .imprint { display: grid; gap: 6px; font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
  .recto .imprint .cn { color: var(--brass-text); letter-spacing: 0.04em; }
  .verso h2.prov { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); font-weight: 500; padding-bottom: 8px; border-bottom: 1px solid var(--redline); }
  .verso h3, .files h2, .reader h2 { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); font-weight: 500; }
  dl.slip { margin: 0; display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 9px 14px; }
  dl.slip dt { font-family: var(--ui); font-size: 0.8rem; color: var(--ink-soft); padding-top: 2px; }
  dl.slip dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
  dl.slip .num, dl.slip code { font-family: var(--mono); font-size: 0.86rem; }
  dl.slip .sub { display: block; color: var(--ink-soft); font-size: 0.86rem; margin-top: 2px; }
  dl.slip .sub.reason { color: var(--ink); font-size: 0.92rem; margin-top: 4px; }
  blockquote.terms { margin: 0; padding-left: 12px; border-left: 2px solid var(--brass); font-style: italic; }
  .fixity { font-family: var(--ui); font-size: 0.86rem; border: 1px dashed var(--rule); background: var(--paper); padding: 10px 12px; display: grid; gap: 4px; }
  .fixity .ok { font-family: var(--mono); color: var(--pass); font-weight: 500; font-size: 0.8rem; }
  .fixity .ok::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--pass); margin-right: 8px; vertical-align: 1px; }
  ul.notes { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; color: var(--ink-soft); }
  ul.notes li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 6px; }
  ul.notes b { font-family: var(--mono); font-weight: 500; font-size: 0.8rem; color: var(--ink); padding-top: 1px; }
  .hole { position: absolute; left: 50%; bottom: 18px; width: 13px; height: 13px; margin-left: -6px; border-radius: 50%; background: var(--paper); border: 1px solid var(--rule); }

  .pager { margin-top: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .pager a, .pager a:visited { background: none; border: 1px solid var(--rule); padding: 10px 14px; cursor: pointer; text-align: left; display: grid; gap: 2px; min-width: 0; color: inherit; text-decoration: none; }
  .pager a:hover { border-color: var(--ink); background: var(--card); }
  .pager .dir { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
  .pager .t { font-size: 0.95rem; overflow-wrap: anywhere; }
  .pager .later { grid-column: 2; text-align: right; }

  .reader { margin-top: 32px; max-width: 46rem; display: grid; gap: 16px; }
  .reader .well { background: var(--card); border: 1px solid var(--rule); padding: clamp(20px, 4vw, 36px); display: grid; gap: 16px; }
  .reader .well p { max-width: var(--measure); }
  .reader .file { font-family: var(--mono); font-size: 0.85rem; overflow-wrap: anywhere; color: var(--ink-soft); }
  .actions { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
  .notice { font-family: var(--ui); font-size: 0.9rem; border-left: 3px solid var(--brass); padding: 6px 0 6px 12px; color: var(--ink); }
  .reader .held { color: var(--ink-soft); }
  .files { margin-top: 36px; display: grid; gap: 10px; }
  .table-scroll { position: relative; overflow-x: auto; border: 1px solid var(--rule); background: var(--card); }
  .table-scroll table { border-collapse: collapse; width: 100%; min-width: 46rem; font-family: var(--ui); font-size: 0.86rem; }
  .table-scroll th { text-align: left; font-weight: 500; font-size: 0.78rem; color: var(--ink-soft); padding: 8px 12px; border-bottom: 1px solid var(--ink); white-space: nowrap; }
  .table-scroll td { padding: 9px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
  .table-scroll tr:last-child td { border-bottom: 0; }
  .table-scroll .fname { font-family: var(--mono); font-size: 0.8rem; overflow-wrap: anywhere; min-width: 14rem; }
  .table-scroll .main-tag { display: inline-block; margin-left: 6px; font-family: var(--ui); font-size: 0.72rem; color: var(--ink); border: 1px solid var(--field-line); padding: 0 5px; }
  .table-scroll .why-file { display: block; color: var(--ink-soft); font-size: 0.8rem; margin-top: 2px; white-space: normal; }
  .table-scroll .sha { width: calc(17ch + 24px); min-width: calc(17ch + 24px); overflow-wrap: anywhere; }

  /* ---------- browse ---------- */
  .browse-head { display: grid; gap: 10px; max-width: 48rem; }
  .browse-head h1 { font-family: var(--display); font-size: clamp(2.2rem, 6vw, 3.4rem); line-height: 1.05; }
  .finder {
    margin-top: 28px; display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 12px 14px; align-items: end;
    border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); padding-block: 16px;
  }
  .field-ctl { display: grid; gap: 4px; min-width: 0; }
  .field-ctl label, .rchips legend { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
  .field-ctl input, .field-ctl select {
    width: 100%; min-width: 0; font-family: var(--ui); font-size: 0.95rem; color: var(--ink);
    background: var(--card); border: 1px solid var(--field-line); border-radius: 0; padding: 8px 10px;
  }
  .field-ctl input:focus-visible, .field-ctl select:focus-visible { border-color: var(--brass); }
  .rchips { grid-column: 1 / -1; border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
  .rchips legend { padding: 0; margin-bottom: 6px; float: left; width: 100%; }
  .rchip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--field-line); background: var(--card); padding: 5px 10px; cursor: pointer; }
  .rchip input { margin: 0; accent-color: var(--ink); width: 15px; height: 15px; }
  .rchip:has(input:checked) { box-shadow: inset 0 0 0 1px var(--ink); border-color: var(--ink); }
  .rchip:has(input:focus-visible) { outline: 2px solid var(--brass); outline-offset: 2px; }
  .rchip .c { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-soft); }
  .result-line { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; align-items: baseline; padding-block: 14px 4px; font-family: var(--ui); font-size: 0.9rem; color: var(--ink-soft); }
  .result-line .link { font-family: var(--ui); color: var(--ink); }
  .results { max-width: 60rem; }
  .empty { padding-block: 28px; max-width: var(--measure); display: grid; gap: 10px; }
  .finder[hidden], .work-row[hidden], .empty[hidden] { display: none; }
  .empty .link { font-family: var(--mono); font-size: 0.95rem; }
  .notice-card { max-width: 46rem; background: var(--card); border: 1px solid var(--rule); border-left: 10px solid var(--spine); padding: clamp(24px, 5vw, 56px); display: grid; gap: 28px; }
  .notice-card .strip { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); border-bottom: 1px solid var(--rule); padding-bottom: 12px; }
  .notice-card h1 { font-family: var(--display); font-size: clamp(2.2rem, 7vw, 3.6rem); line-height: 1.05; }

  /* ---------- about ---------- */
  .about { display: grid; gap: 44px; max-width: var(--measure); }
  .about h1 { font-family: var(--display); font-size: clamp(2.4rem, 7vw, 3.8rem); line-height: 1; }
  .about > header { display: grid; gap: 14px; }
  .about section { display: grid; gap: 12px; }
  .about h2 { font-family: var(--display); font-size: 1.65rem; }
  .about dl { margin: 0; display: grid; gap: 14px; }
  .about dt { display: flex; }
  .about dd { margin: 0; color: var(--ink-soft); }
  .about .small { font-size: 0.92rem; color: var(--ink-soft); }
  .about code { font-family: var(--mono); font-size: 0.85em; }
  .about ol.known { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
  .about ol.known li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); }
  .about ol.known b { font-family: var(--mono); font-weight: 500; font-size: 0.85rem; padding-top: 2px; }
  .anatomy { display: flex; flex-wrap: wrap; border: 1px solid var(--rule); background: var(--card); width: fit-content; max-width: 100%; }
  .anatomy div { display: grid; gap: 2px; padding: 10px 14px; border-right: 1px dashed var(--rule); }
  .anatomy div:last-child { border-right: 0; }
  .anatomy .part { font-family: var(--mono); font-size: 1.25rem; color: var(--brass-text); }
  .anatomy .what { font-family: var(--ui); font-size: 0.78rem; color: var(--ink-soft); }
  .about dl.codes { grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 6px 18px; font-family: var(--ui); font-size: 0.9rem; }
  .about dl.codes div { display: flex; gap: 10px; align-items: baseline; }
  .about dl.codes dt { font-family: var(--mono); color: var(--brass-text); min-width: 2.6rem; }
  .about dl.codes dd { color: var(--ink); }

  footer.foot { margin-top: 72px; border-top: 1px solid var(--rule); padding-top: 14px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-family: var(--ui); font-size: 0.84rem; color: var(--ink-soft); }
  footer.foot p { min-width: 0; max-width: 44rem; }

  @media (max-width: 60rem) {
    .shelf { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .toc { position: static; }
    .toc ol { display: flex; flex-wrap: wrap; gap: 6px 18px; }
    .toc li a, .toc li a:visited { border-bottom: 0; padding: 2px 0; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
    .toc li a .num { margin-left: 6px; }
    .finder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .finder .field-ctl:first-child { grid-column: 1 / -1; }
  }
  @media (max-width: 52rem) {
    .spread { grid-template-columns: minmax(0, 1fr); border-left-width: 8px; }
    .recto { order: 1; min-height: 0; border-bottom: 1px solid var(--rule); }
    .verso { order: 2; border-right: 0; }
    .lane-grid { grid-template-columns: minmax(0, 1fr); }
    .person-row { grid-template-areas: "life" "who" "tally" "line"; row-gap: 6px; }
    .axis-row .ll-axis { grid-column: 1; }
    .person-row .tally { display: flex; flex-wrap: wrap; gap: 2px 16px; }
    .person-row .ll { margin-top: 8px; }
    .work-row { grid-template-columns: 4.4rem minmax(0, 1fr); grid-template-areas: "yr body" "yr rc"; }
    .work-row .rc { display: flex; flex-wrap: wrap; gap: 4px 14px; padding-top: 0; }
  }
  @media (max-width: 30rem) {
    dl.slip { grid-template-columns: minmax(0, 1fr); gap: 0; }
    dl.slip dd { margin-bottom: 10px; }
    .work-row { grid-template-columns: 3.6rem minmax(0, 1fr); gap: 2px 12px; }
    .axis-row .ll-axis .odd { display: none; }
    .finder { grid-template-columns: minmax(0, 1fr); }
    .pager { grid-template-columns: minmax(0, 1fr); }
    .pager .later { grid-column: 1; text-align: left; }
    .ll.big { height: 96px; }
    .ll-axis small { display: none; }
    .ll-axis { height: 1.5rem; }
  }
  @media (prefers-reduced-motion: no-preference) {
    .spread { animation: open 520ms cubic-bezier(.2,.7,.2,1) both; transform-origin: left center; }
    @keyframes open { from { transform: perspective(1600px) rotateY(-4deg) translateY(4px); } to { transform: none; } }
    .ll.big .tk { animation: rise 480ms cubic-bezier(.2,.7,.2,1) both; }
    @keyframes rise { from { transform: scaleY(0); } to { transform: none; } }
    html { scroll-behavior: smooth; }
  }