/* =====================================================================
   Styled after *The Diary of Lady Willoughby* (Chiswick Press; this scan
   is the Longmans 1873 reprint, ../diary.pdf).

   What the book actually does, and what is borrowed here:

     - a single thin rule framing the whole text block on every page
     - a second vertical rule inside that frame, cutting off a narrow
       marginal column; the book puts its dates there, this puts notes
     - a running head above a horizontal rule, folio in the outer corner
     - Caslon Old Face, old-style figures, italic for proper nouns
     - a foliate headpiece over the opening, tailpieces at section ends
     - a decorated initial dropped into the first paragraph
     - justified text, first-line indents, tight book leading
     - warm cream paper, brown-black ink

   Not borrowed: the long s. It is pastiche particular to that book —
   the author is impersonating a seventeenth-century lady — and it would
   make a modern essay unreadable.

   The palette and Caslon stack come from ../web/styles.css, which
   already had this right.
   ===================================================================== */

:root {
  --paper: #ece2c6;
  --paper-raise: #e6dbba;
  --edge: #ddd0ac;
  --ink: #282017;
  --ink-soft: #463a27;
  --muted: #736446;
  --rule: #2b2318;
  --accent: #7c3a29;
  --accent-wash: rgba(124, 58, 41, .13);

  --serif: 'Libre Caslon Text', 'Adobe Caslon Pro', 'Big Caslon', Caslon,
           'Hoefler Text', Georgia, 'Times New Roman', serif;
  --display: 'Libre Caslon Display', var(--serif);

  --measure: 33rem;      /* the text column */
  --margin-col: 13rem;   /* the diary's ruled marginal column */
  --gutter: 1.3rem;      /* white space between the text and the margin rule */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #211a11;
    --paper-raise: #2a2216;
    --edge: #171208;
    --ink: #e8dab6;
    --ink-soft: #cebf9b;
    --muted: #9c8b64;
    --rule: #5d4f34;
    --accent: #cd8450;
    --accent-wash: rgba(205, 132, 80, .16);
  }
}

:root[data-theme="dark"] {
  --paper: #211a11;
  --paper-raise: #2a2216;
  --edge: #171208;
  --ink: #e8dab6;
  --ink-soft: #cebf9b;
  --muted: #9c8b64;
  --rule: #5d4f34;
  --accent: #cd8450;
  --accent-wash: rgba(205, 132, 80, .16);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--edge);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.12rem;
  line-height: 1.62;
  font-variant-numeric: oldstyle-nums proportional-nums;
  font-feature-settings: "onum" 1, "liga" 1, "kern" 1, "dlig" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent-wash); }

/* ---------------------------------------------------------------------
   The leaf — the framed page
   ------------------------------------------------------------------ */

/* The frame hugs the text block, as the book's does — measure plus the
   marginal column plus an even inner margin, and no more. Sized wider than
   the content it would leave a slab of dead paper to the right of the notes. */
.leaf {
  background: var(--paper);
  border: 1px solid var(--rule);
  max-width: calc(var(--measure) + var(--margin-col) + var(--gutter) + 5rem);
  margin: 1.1rem auto 4rem;
  padding: 0 2.5rem clamp(3rem, 6vw, 5rem);
}

/* running head: folio in the outer corner, title centred, rule beneath */
.folio {
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--paper);
  display: grid;
  grid-template-columns: 5rem 1fr 5rem;
  align-items: baseline;
  padding: .9rem 0 .55rem;
  border-bottom: 1px solid var(--rule);
  font-size: .93rem;
  color: var(--ink-soft);
}

.folio-num { font-variant-numeric: oldstyle-nums; color: var(--muted); }
.folio-title { text-align: center; }
.folio-title i { font-style: italic; }
.folio-section {
  text-align: right;
  font-style: italic;
  font-size: .85rem;
  color: var(--muted);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* On the ordinary pages this slot carries the theme toggle, since those pages
   have no reading-options bar of their own. */
.folio-section button {
  font: italic .8rem var(--serif);
  background: none;
  border: none;
  padding: 0;
  color: var(--muted);
  cursor: pointer;
}

.folio-section button:hover { color: var(--accent); }
.folio-section button:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }

/* ---------------------------------------------------------------------
   The text column, and the marginal column beside it
   ------------------------------------------------------------------ */

.essay {
  max-width: var(--measure);
  margin: 0 auto;
  padding-top: clamp(2rem, 4vw, 3.2rem);
  position: relative;
}

/* ---------------------------------------------------------------------
   Title page
   ------------------------------------------------------------------ */

/* The headpiece, in its own ruled compartment spanning the text column — the
   arrangement in Figure 16, where the engraved band is boxed by rules rather
   than merely sitting above one. A row of fleurons is the honest typographic
   equivalent of the woodcut, and is what Chiswick used when it had no block. */
.essay > .title::before {
  content: '❦ ❧ ❦';
  display: block;
  text-align: center;
  font-size: 1.3rem;
  color: var(--accent);
  letter-spacing: .5em;
  text-indent: .5em;
  padding: .75rem 0 .85rem;
  margin: 0 0 1.7rem;
  border: 1px solid var(--rule);
}

.title {
  font-family: var(--display);
  font-weight: 400;
  text-align: center;
  font-size: clamp(2.2rem, 5.5vw, 3.1rem);
  line-height: 1.08;
  text-wrap: balance;
  margin: 0;
}

.byline {
  text-align: center;
  font-variant: small-caps;
  letter-spacing: .09em;
  font-size: .92rem;
  color: var(--ink-soft);
  margin: 1rem 0 0;
}

/* The note on the title: a dagger, not a numeral, and set small and centred
   under the byline rather than in the numbered sequence. */
.titlenote {
  text-indent: 0;
  text-align: center;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--muted);
  max-width: 29rem;
  margin: 1.1rem auto 0;
}

.titlenote .dag { color: var(--accent); margin-right: .25em; }

/* The .tex's \attrib: the line under an epigraph or a stanza naming its source. */
.attrib-line {
  text-indent: 0;
  text-align: right;
  font-style: italic;
  font-size: .9rem;
  color: var(--muted);
  margin: .4rem 1.3rem 1.9rem;
}

.keywords {
  margin: 1.8rem auto 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--rule);
  font-size: .88rem;
  line-height: 1.6;
  color: var(--ink-soft);
  text-align: center;
}

.keywords .k-label {
  display: block;
  font-variant: small-caps;
  letter-spacing: .12em;
  font-size: .79rem;
  color: var(--accent);
  margin-bottom: .45rem;
}

/* ---------------------------------------------------------------------
   Epigraphs, quotations, verse
   ------------------------------------------------------------------ */

.epigraph { margin: 2.6rem auto 0; max-width: 29rem; }
.epigraph blockquote {
  margin: 0;
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.55;
  text-align: justify;
}
.attrib {
  display: block;
  font-style: italic;
  font-size: .89rem;
  color: var(--muted);
  text-align: right;
  margin: .5rem 0 0;
}

blockquote.pull {
  margin: 1.7rem 1.3rem;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.55;
  text-align: justify;
  font-style: italic;
}

.verse {
  margin: 1.8rem 0 1.8rem 1.9rem;
  font-style: italic;
  color: var(--ink-soft);
  line-height: 1.68;
}

/* Lines are explicit elements, not source newlines, so that the page and the
   PDF break the stanza in the same places. */
.verse .v { display: block; text-indent: 0; }

.sc { font-variant: small-caps; letter-spacing: .02em; }
em, cite, i { font-style: italic; }

/* the tailpiece */
.ornament {
  text-align: center;
  margin: 2.4rem 0;
  color: var(--accent);
  user-select: none;
}
.ornament::before { content: '❧'; font-size: 1.7rem; }

/* ---------------------------------------------------------------------
   Section heads — the numeral sits out in the marginal column, where
   the diary prints its year
   ------------------------------------------------------------------ */

.section-head { margin: 3.2rem 0 1.5rem; position: relative; }

.section-head .num {
  font-variant: small-caps;
  letter-spacing: .18em;
  font-size: .82rem;
  color: var(--muted);
  display: block;
  text-align: center;
  margin-bottom: .4rem;
}

.section-head h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.55rem;
  margin: 0;
  line-height: 1.15;
  text-align: center;
  text-wrap: balance;
}

/* ---------------------------------------------------------------------
   Body text — justified, indented, with a decorated initial
   ------------------------------------------------------------------ */

/* Body prose only. The renderer marks these; the byline, lede, keywords and
   bibliography are <p> too, and must not pick up the indent or the justification. */
.essay p.body {
  margin: 0;
  text-indent: 1.5em;
  text-align: justify;
  hyphens: auto;
}

.section-head + p.body,
.lede + p.body,
.epigraph + p.body,
.verse + p.body,
blockquote + p.body,
.ornament + p.body { text-indent: 0; }

/* The decorated initial, set in a bordered block rather than dropped bare.
   The formula calls for "generous use of initials and headpieces", and both
   Figure 11 and Figure 16 show a woodcut letter in a square block, not a plain
   drop cap. [data-notes] is set only by the essay template, so the ordinary
   pages open plainly — which is the Press's other, sober formula, the one used
   for tracts, where "type stands on its own, with no decorative initials or
   other ornaments to distract the reader from the sober matter of the text". */
[data-notes] .section-head + p.body::first-letter {
  float: left;
  font-family: var(--display);
  font-size: 2.5rem;
  line-height: 1;
  margin: .15rem .6rem .1rem 0;
  padding: .3rem .4rem .35rem;
  border: 1px solid var(--rule);
  background: var(--accent-wash);
  color: var(--accent);
}

/* ---------------------------------------------------------------------
   Links
   ------------------------------------------------------------------ */

/* A dotted rule rather than a solid one: in-text links here are mostly titles,
   already italic, and a solid underline under italic Caslon reads as clutter. */
a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted var(--muted);
}

a:hover { color: var(--accent); border-bottom-color: var(--accent); }
a:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }

.folio-title a { border-bottom: none; }
.folio-title a:hover { color: var(--accent); }

/* ---------------------------------------------------------------------
   Wayfinder — the nav, set as a line of contents beneath the running head
   ------------------------------------------------------------------ */

.wayfinder {
  text-align: center;
  padding: .75rem 0 .8rem;
  border-bottom: 1px solid var(--rule);
  font-variant: small-caps;
  letter-spacing: .1em;
  font-size: .84rem;
}

.wayfinder a { border-bottom: none; color: var(--muted); }
.wayfinder a:hover { color: var(--accent); }
.wayfinder .here { color: var(--ink); }
.wayfinder-sep { color: var(--accent); margin: 0 .55rem; font-size: .78rem; }

/* ---------------------------------------------------------------------
   Ordinary pages
   ------------------------------------------------------------------ */

.page-title {
  font-family: var(--display);
  font-weight: 400;
  text-align: center;
  font-size: clamp(1.9rem, 4.5vw, 2.6rem);
  line-height: 1.1;
  margin: 0 0 1.2rem;
  text-wrap: balance;
}

.lede {
  text-indent: 0;
  text-align: center;
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1.04rem;
  line-height: 1.5;
  max-width: 27rem;
  margin: 0 auto 2.2rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--rule);
}

.entry { margin: 0 0 2.6rem; }

.entry-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.4rem;
  margin: 0 0 .2rem;
  line-height: 1.2;
}

.entry-meta {
  text-indent: 0;
  text-align: left;
  font-style: italic;
  font-size: .86rem;
  color: var(--muted);
  margin: 0 0 .9rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--rule);
}

/* Figures, lists and preformatted text — so far only in the posts ported from
   Medium. Images are framed with the page's own rule, like a plate. */
.essay figure { margin: 2rem 0; text-align: center; }
.essay figure img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border: 1px solid var(--rule);
}
.essay figcaption {
  margin: .6rem auto 0;
  max-width: 29rem;
  font-style: italic;
  font-size: .86rem;
  line-height: 1.45;
  color: var(--muted);
  text-align: center;
}
.essay figure.video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--rule);
}
.essay ul { margin: 1.2rem 0; padding-left: 1.5em; }
.essay li { margin: .3rem 0; }
.essay pre {
  margin: 1.6rem 0;
  padding: .8rem 1rem;
  background: var(--paper-raise);
  border: 1px solid var(--edge);
  font: .95rem/1.5 var(--serif);
  white-space: pre-wrap;
}
figure + p.body, ul + p.body, pre + p.body { text-indent: 0; }

/* The contact form. Fields sit on the raised paper, ruled like the frame. */
.contact-form { margin: 0 0 2.4rem; }
.contact-form .field { margin: 0 0 1.1rem; }
.contact-form label {
  display: block;
  font-variant: small-caps;
  letter-spacing: .08em;
  font-size: .86rem;
  color: var(--muted);
  margin-bottom: .3rem;
}
.contact-form input,
.contact-form textarea {
  display: block;
  width: 100%;
  font: 1rem/1.5 var(--serif);
  color: var(--ink);
  background: var(--paper-raise);
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: .5rem .65rem;
}
.contact-form textarea { resize: vertical; min-height: 9rem; }
.contact-form input:focus,
.contact-form textarea:focus {
  outline: 1px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.contact-form button {
  font: italic 1rem var(--serif);
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--accent);
  padding: .45rem 1.6rem;
  cursor: pointer;
}
.contact-form button:hover { background: var(--accent-wash); }
.contact-form button:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.contact-form .hp { display: none; }

.deflist {
  margin: 0 0 2rem;
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: .45rem 1rem;
}

.deflist dt {
  font-variant: small-caps;
  letter-spacing: .08em;
  font-size: .86rem;
  color: var(--muted);
}

.deflist dd { margin: 0; }

/* ---------------------------------------------------------------------
   Notes
   ------------------------------------------------------------------ */

.noteref { position: relative; }

/* A note anchored inside italic text — an attribution line, an epigraph, a
   stanza — must not inherit that italic. The note is an aside from the run it
   hangs on, not part of it. */
.note-body { font-style: normal; }

/* The toggle is the keyboard handle for the mark, so it stays in the tab order
   in the modes where activating a mark does something (in the text, tooltip),
   and leaves it in the modes where it does not. display:none would make the
   marks unreachable by keyboard, which is how they behaved before. */
.note-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

[data-notes="footnote"] .note-toggle,
[data-notes="hidden"] .note-toggle { display: none; }

.note-number {
  cursor: pointer;
  color: var(--accent);
  font-weight: 700;
  font-size: .66em;
  vertical-align: super;
  line-height: 0;
  padding: 0 .12em;
  font-variant-numeric: lining-nums;
}

.note-toggle:focus-visible + .note-number {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

.note-body-number { display: none; }
.note-backlink { display: none; text-decoration: none; color: var(--accent); }

/* inline mode — collapsed until the number is clicked */
[data-notes="inline"] .note-body {
  display: none;
  margin: .9rem 0;
  padding: .7rem 1rem;
  border-left: 2px solid var(--accent);
  background: var(--accent-wash);
  font-size: .92rem;
  line-height: 1.5;
  text-indent: 0;
  text-align: left;
}

[data-notes="inline"] .note-toggle:checked ~ .note-body { display: block; }
[data-notes="inline"] .note-body-number { display: inline; color: var(--accent); font-weight: 700; }

/* --- tooltip mode -------------------------------------------------------
   The note stays where it was authored and is shown as a card beside its
   mark. Base position is CSS, so the card appears with scripting off; the
   script only nudges it back inside the frame and flips it above the line
   when there is no room below. */

[data-notes="tooltip"] .note-body {
  display: none;
  position: absolute;
  z-index: 20;
  top: 1.5em;
  left: 0;
  width: 21rem;
  max-width: min(21rem, 78vw);
  padding: .75rem .95rem;
  background: var(--paper-raise);
  border: 1px solid var(--rule);
  box-shadow: 0 3px 14px rgba(20, 14, 6, .22);
  font-size: .86rem;
  line-height: 1.5;
  color: var(--ink-soft);
  text-indent: 0;
  text-align: left;
  hyphens: auto;
  white-space: normal;
}

[data-notes="tooltip"] .note-toggle:checked ~ .note-body { display: block; }

[data-notes="tooltip"] .note-body-number {
  display: inline;
  color: var(--accent);
  font-variant-numeric: oldstyle-nums;
}

/* Marking the open note: an underline, not a filled swatch. The mark is a
   superscript numeral a few pixels tall, and a solid background turns it into
   an unreadable blob. */
[data-notes="tooltip"] .note-toggle:checked + .note-number {
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-notes="tooltip"] .note-body {
    box-shadow: 0 3px 14px rgba(0, 0, 0, .5);
  }
}

:root[data-theme="dark"] [data-notes="tooltip"] .note-body {
  box-shadow: 0 3px 14px rgba(0, 0, 0, .5);
}

/* endnote mode */
.endnotes {
  list-style: none;
  padding: 1rem 0 0;
  margin: 3rem 0 0;
  border-top: 1px solid var(--rule);
}
.endnotes li {
  font-size: .88rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin-bottom: .55rem;
  text-align: justify;
  hyphens: auto;
}
[data-notes="footnote"] .note-body-number {
  display: inline;
  color: var(--accent);
  font-variant-numeric: oldstyle-nums;
}
[data-notes="footnote"] .note-backlink { display: inline; }

/* Landing on a note after clicking its mark, and landing back on the mark
   after clicking the arrow, should both say plainly where you arrived. */
.note-body.landed,
.noteref.landed .note-number {
  animation: landing 2.2s ease both;
}

@keyframes landing {
  0%, 15% { background: var(--accent-wash); box-shadow: 0 0 0 .4rem var(--accent-wash); }
  100% { background: transparent; box-shadow: 0 0 0 .4rem transparent; }
}

/* --- the two-pane reader -------------------------------------------------
   The essay and the notes each get their own scrollbar; the script keeps them
   in step. The panes exist in the markup for every mode — outside this one
   .spread and .main-pane are plain blocks and .notes-pane is not displayed, so
   nothing about the other five changes. */

.spread { display: block; }
.main-pane { display: block; }
.notes-pane { display: none; }

html[data-notes="pane"],
html[data-notes="pane"] body { height: 100%; }

/* The vh line is a fallback, not a duplicate: without a definite height here
   the leaf has none either, the panes size to their content instead of
   overflowing, and there is nothing for a scrollbar to be about. */
html[data-notes="pane"] body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

html[data-notes="pane"] .leaf {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  max-width: 76rem;
  margin: .5rem auto .9rem;
  padding-bottom: 0;
}

html[data-notes="pane"] .spread {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;       /* without this the panes refuse to scroll */
}

html[data-notes="pane"] .main-pane {
  flex: 1 1 auto;
  min-width: 0;
  overflow-y: auto;
  padding: 0 clamp(1rem, 2.5vw, 2rem);
}

/* Two scrollbars are the point of this mode, so they are drawn rather than
   left to the platform. Chrome on Windows 11 defaults to overlay scrollbars,
   which occupy no width and stay invisible until you are already scrolling —
   measured at 0px of gutter on both panes. Declaring ::-webkit-scrollbar opts
   back into classic scrollbars that take space and are always visible. */
/* Deliberately NOT setting scrollbar-width/scrollbar-color: where those
   standard properties are supported they override ::-webkit-scrollbar
   completely, and they offer no control over the thumb's minimum size. This
   essay is about 30,000px long in a 670px pane, so a strictly proportional
   thumb comes out around fifteen pixels — present, measurable, and far too
   small to notice or to grab. min-height is the whole reason for using the
   -webkit- rules, so they must be the ones in effect.
   Firefox ignores these and draws its own scrollbar, which is visible anyway. */
html[data-notes="pane"] .main-pane,
html[data-notes="pane"] .notes-pane { scrollbar-gutter: stable; }

html[data-notes="pane"] .main-pane::-webkit-scrollbar,
html[data-notes="pane"] .notes-pane::-webkit-scrollbar { width: 14px; }

html[data-notes="pane"] .main-pane::-webkit-scrollbar-track,
html[data-notes="pane"] .notes-pane::-webkit-scrollbar-track {
  background: var(--edge);
  border-left: 1px solid var(--rule);
}

html[data-notes="pane"] .main-pane::-webkit-scrollbar-thumb,
html[data-notes="pane"] .notes-pane::-webkit-scrollbar-thumb {
  background: var(--muted);
  background-clip: content-box;       /* with the transparent border, an inset thumb */
  border: 3px solid transparent;
  border-radius: 8px;
  min-height: 3.5rem;
}

html[data-notes="pane"] .main-pane::-webkit-scrollbar-thumb:hover,
html[data-notes="pane"] .notes-pane::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
  background-clip: content-box;
}

html[data-notes="pane"] .main-pane .essay {
  max-width: var(--measure);
  margin: 0 auto;
  padding-bottom: 55vh;   /* the last notes need somewhere to scroll to */
}

/* The pane itself is the scroller, with the search bar sticky inside it. With
   overflow:hidden the sync could still drive it programmatically — which is
   exactly why it looked fine — but there was no scrollbar to take hold of. */
html[data-notes="pane"] .notes-pane {
  display: block;
  flex: 0 0 34%;
  max-width: 27rem;
  min-width: 17rem;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--paper-raise);
  border-left: 1px solid var(--rule);
}

.notes-header {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: .8rem 1.4rem .75rem;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-raise);
}

.notes-bar {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .55rem;
  margin-bottom: .55rem;
}

.notes-title {
  font-variant: small-caps;
  letter-spacing: .14em;
  font-size: .88rem;
  color: var(--ink-soft);
}

.notes-count {
  font-size: .8rem;
  font-style: italic;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.notes-search {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--serif);
  font-style: italic;
  font-size: .88rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 1px;
  padding: .35rem .6rem;
  -webkit-appearance: none;
}

.notes-search::placeholder { color: var(--muted); font-style: italic; }

.notes-search:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-wash);
}

.notes-inner { padding: 1.2rem 1.4rem 55vh; }

html[data-notes="pane"] .note-body {
  display: block;
  font-size: .87rem;
  line-height: 1.5;
  color: var(--ink-soft);
  text-indent: 0;
  text-align: left;
  hyphens: auto;
  margin: 0 0 1.1rem;
  opacity: .62;
  transition: opacity .25s ease;
}

html[data-notes="pane"] .note-body.active { opacity: 1; }
html[data-notes="pane"] .note-body.filtered-out { display: none; }

html[data-notes="pane"] .note-body-number,
html[data-notes="pane"] .note-backlink { display: inline; }

html[data-notes="pane"] .note-body-number {
  color: var(--accent);
  font-variant-numeric: oldstyle-nums;
}

html[data-notes="pane"] .note-number.active { text-decoration: underline; text-underline-offset: 2px; }

/* --accent-wash is a 13% tint, which is right for a target flash and far too
   faint for a search hit you are scanning eighty notes for. */
.note-text mark {
  background: color-mix(in srgb, var(--accent) 32%, transparent);
  color: var(--ink);
  border-radius: 1px;
  padding: 0 .12em;
}

/* Nothing is "active" while a filter is on — sync is off — so the results
   would otherwise all sit at the dimmed inactive opacity. */
html[data-notes="pane"] .notes-inner.filtering .note-body { opacity: 1; }

.notes-empty {
  display: none;
  font-style: italic;
  font-size: .88rem;
  color: var(--muted);
  text-indent: 0;
  text-align: center;
}

.notes-inner.no-results .notes-empty { display: block; }

/* The nav band and the frame have to stay put while the panes move. */
html[data-notes="pane"] body > .wayfinder { flex: 0 0 auto; }

/* The head spans both panes here, so it carries the section being read rather
   than the site name — which the default three-column head truncated to
   "The Com…" in the outer cell. */
html[data-notes="pane"] .folio {
  position: static;
  grid-template-columns: 10rem 1fr 5rem 5rem;
}

html[data-notes="pane"] .folio-title { display: none; }

html[data-notes="pane"] .folio-section {
  grid-column: 2;
  text-align: center;
  overflow: visible;
  font-style: italic;
  color: var(--ink-soft);
  font-size: .93rem;
}

/* hidden mode */
[data-notes="hidden"] .note-body { display: none; }
[data-notes="hidden"] .note-number { color: var(--muted); }

/* ---------------------------------------------------------------------
   Bibliography
   ------------------------------------------------------------------ */

.bibliography {
  margin-top: 3.5rem;
  padding-top: 1.4rem;
  border-top: 3px double var(--rule);
}

.bibliography h2 {
  font-variant: small-caps;
  letter-spacing: .13em;
  font-size: .92rem;
  font-weight: 400;
  color: var(--accent);
  text-align: center;
  margin: 0 0 1.2rem;
}

/* The note on sources: prefatory matter to the bibliography, so it is set
   smaller than the body and separated from the entries by a rule. */
.bibnote {
  font-size: .92rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 1.5rem;
  padding-bottom: 1.3rem;
  border-bottom: 1px solid var(--rule);
}

.bibnote p {
  text-indent: 1.4em;
  text-align: justify;
  hyphens: auto;
  margin: 0;
}

.bibnote p:first-child { text-indent: 0; }

.bib-entry {
  font-size: .9rem;
  line-height: 1.5;
  margin: 0 0 .65rem;
  padding-left: 1.5rem;
  text-indent: -1.5rem;
  color: var(--ink-soft);
  text-align: left;
  hyphens: auto;
}

/* ---------------------------------------------------------------------
   The view menu — the reading options, gathered into the running head
   ------------------------------------------------------------------ */

/* The essay's head carries a fourth cell for the menu. The first track is
   widened to match the two on the right, so the centre track stays centred on
   the page: 10rem one side, 5rem + 5rem the other. */
.folio-reading { grid-template-columns: 10rem 1fr 5rem 5rem; }

.viewmenu {
  grid-column: 4;
  justify-self: end;
  position: relative;      /* the panel hangs off this, not off the head */
  z-index: 20;
  font-size: .8rem;
}

.viewmenu > summary {
  cursor: pointer;
  color: var(--muted);
  font-variant: small-caps;
  letter-spacing: .1em;
  white-space: nowrap;
  list-style: none;
}
.viewmenu > summary::-webkit-details-marker { display: none; }
.viewmenu > summary::after { content: '▾'; margin-left: .3rem; font-size: .75em; }
.viewmenu > summary:hover,
.viewmenu[open] > summary { color: var(--accent); }
.viewmenu > summary:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }

/* A panel, not a bar: the options stack downward, so the menu can live in the
   head's outer cell without widening it. */
.controls {
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .25rem;
  width: max-content;
  min-width: 9.5rem;
  padding: .65rem;
  background: var(--paper-raise);
  border: 1px solid var(--rule);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
  text-align: left;
}

.controls-label {
  color: var(--muted);
  font-variant: small-caps;
  letter-spacing: .12em;
  padding-bottom: .1rem;
}

.controls button {
  font-family: var(--serif);
  font-size: .84rem;
  font-style: italic;
  cursor: pointer;
  padding: .22rem .7rem;
  border: 1px solid var(--rule);
  border-radius: 1px;
  background: var(--paper);
  color: var(--muted);
  text-align: left;
}

.controls button:hover { color: var(--accent); border-color: var(--accent); }
.controls button.on { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.controls button:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }

/* The theme switch is not one of the note placements, so it is set off from
   them rather than reading as a sixth one. */
.controls .theme {
  margin-top: .45rem;
  padding-top: .5rem;
  border: none;
  border-top: 1px solid var(--rule);
  border-radius: 0;
  background: none;
  text-align: center;
}
.controls .theme:hover { color: var(--accent); }

/* ---------------------------------------------------------------------
   The site nav, now above the frame
   ------------------------------------------------------------------ */

/* Inside the frame a rule separated the nav from the running head. Above the
   frame it sits on the page ground, where that rule would cut across nothing,
   so it goes and the band takes the padding the options bar used to have. */
body > .wayfinder {
  border-bottom: none;
  max-width: 76rem;
  margin: 0 auto;
  padding: 1rem 1rem .35rem;
}

/* ---------------------------------------------------------------------
   Narrow screens: the running head drops back to a plain centred title.
   The frame stays — it is the book's most recognizable feature.
   ------------------------------------------------------------------ */

@media (max-width: 60rem) {
  .folio { grid-template-columns: 3rem 1fr 3rem; }
  .folio-reading { grid-template-columns: 3rem 1fr 3rem 4.5rem; }
  .folio-section { display: none; }
}

/* Two panes need two columns. Below this the reader falls back to one column
   with the notes gathered underneath.

   56rem is about the floor: a 33rem measure plus the notes column's 17rem
   minimum plus the frame. It was 62rem, which meant the panes simply did not
   appear on any window under 992px wide. The script no longer carries a copy of
   this number — it asks whether .main-pane is actually a scroller, so the
   layout decides and the behaviour follows. */
@media (max-width: 56rem) {
  html[data-notes="pane"],
  html[data-notes="pane"] body { height: auto; }

  html[data-notes="pane"] body { display: block; overflow: visible; }

  html[data-notes="pane"] .leaf {
    display: block;
    max-width: calc(var(--measure) + var(--margin-col) + var(--gutter) + 5rem);
    margin: 1.1rem auto 4rem;
    padding-bottom: clamp(3rem, 6vw, 5rem);
  }

  html[data-notes="pane"] .spread { display: block; }
  html[data-notes="pane"] .main-pane { overflow: visible; padding: 0; }
  html[data-notes="pane"] .main-pane .essay { padding-bottom: 0; }

  html[data-notes="pane"] .notes-pane {
    display: block;
    max-width: none;
    min-width: 0;
    overflow: visible;
    background: transparent;
    border-left: none;
    border-top: 3px double var(--rule);
    margin-top: 2.5rem;
  }

  html[data-notes="pane"] .notes-header { background: transparent; padding: .9rem 0 .8rem; }
  html[data-notes="pane"] .notes-inner { padding: 1.2rem 0 2rem; }
  html[data-notes="pane"] .note-body { opacity: 1; }
  html[data-notes="pane"] .folio { position: sticky; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}