/* Every page on the site is set from this file. README.md, "How a poem is set
   here, and why", carries the three rules it implements, with the arithmetic
   behind them: the line is the unit and is never re-wrapped, a runover row hangs
   clear of every indent depth, and indentation is data rather than decoration.

   What a reader can change is the costume; what they cannot change is the
   lineation. Every display option below is a token swap and touches no markup.

   Change the screenshot baselines whenever this file moves. */

/* ---------- faces (self-hosted, SIL OFL) ---------- */

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/source-serif-4-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/source-serif-4-latin-400-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/source-serif-4-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/source-serif-4-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/source-serif-4-latin-ext-400-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/source-serif-4-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- tokens ---------- */

:root {
  /* The indent system, and the arithmetic the whole design rests on: an indent
     level is a multiple of --unit (0, 1.5em, 3em …) while a runover row hangs at
     its line's own level + --hang (2em, 3.5em, 5em …). The two sequences never
     share a value, so a wrapped row can never be read as the start of a deeper
     line. Both are em-based so they scale with the reader's text size, and the
     narrow-viewport pair below (1em and 1.5em) is chosen to keep the same
     property. Change one and check the other. */
  --unit: 1.5em;
  --hang: 2em;
  --measure: 34em;
  --family: "Source Serif 4", Georgia, "Times New Roman", serif;

  --paper: #faf9f6;
  --ink: #1c1a18;
  --muted: #6f6862;
  --rule: #ddd7cd;
  --target-bg: #f2ead3;
  --target-mark: #b09a62;
}
/* Dark tokens live in two places on purpose: the media query is the
   default for readers who have never touched the controls, and the attribute is
   an explicit choice that must beat the system preference in BOTH directions.
   `:not([data-theme="light"])` is what lets a reader keep a light page on a dark
   system. Keep the two blocks identical; there is no way to share them in plain
   CSS, and a preprocessor is not worth adding for six declarations. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --paper: #181614;
    --ink: #e8e4dc;
    --muted: #989187;
    --rule: #35312c;
    --target-bg: #262118;
    --target-mark: #8a774a;
  }
}
html[data-theme="dark"] {
  --paper: #181614;
  --ink: #e8e4dc;
  --muted: #989187;
  --rule: #35312c;
  --target-bg: #262118;
  --target-mark: #8a774a;
}

/* ---------- reader controls ----------
   Four axes -- theme, typeface, measure, text size -- and every one of them is a
   token swap: an option changes custom properties on :root and nothing else. No
   option may add a rule, move an element, or touch the verse markup. That is
   what keeps the combinations honest, since four axes make more of them than any
   screenshot suite can enumerate. It holds because --unit and --hang are in em,
   so the indent depths and the runover hang scale with every setting below and
   stay distinguishable at all of them. */
html[data-type="sans"] {
  --family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}
html[data-measure="narrow"] {
  --measure: 28em;
}
html[data-measure="wide"] {
  --measure: 40em;
}
/* Size is set on the root so every em-based length -- including the indent unit
   and the hang -- scales with it, which is what keeps runovers distinguishable
   from the poet's own line breaks at any size. */
html[data-size="s"] {
  font-size: clamp(15px, 14px + 0.25vw, 17px);
}
html[data-size="l"] {
  font-size: clamp(19px, 18px + 0.3vw, 22px);
}
html[data-size="xl"] {
  font-size: clamp(22px, 20px + 0.4vw, 26px);
}
@media (max-width: 40em) {
  :root {
    --unit: 1em;
    --hang: 1.5em;
  }
}

/* ---------- base ---------- */

* {
  box-sizing: border-box;
  margin: 0;
}
html {
  font-size: clamp(17px, 16px + 0.25vw, 19px);
}
body {
  font-family: var(--family);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.5;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main {
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  flex: 1;
}
a {
  color: inherit;
  text-decoration-color: var(--muted);
  text-underline-offset: 0.15em;
}
code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.85em;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- site chrome ---------- */

.site-head {
  max-width: var(--measure);
  margin: 0 auto 3rem;
  width: 100%;
}
.site-head nav {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.9rem;
}
.site-head a {
  text-decoration: none;
  color: var(--muted);
}
.site-head .wordmark {
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
}

/* ---------- verse ----------
   What this hangs on is the markup contract in verse.njk: stanza = <p>, line =
   <span class="line"> + <br/>, part = <h2 class="part"> or a bare
   <hr class="part-break">. The span is inline-block with padding-left for the
   hang plus the indent and a negative text-indent pulling the first row back,
   which is what makes the hanging indent expressible at all. */

.poem-body {
  font-size: 1rem;
}
.stanza {
  margin: 0 0 1.5em 0;
}
.line {
  display: inline-block;
  position: relative;
  white-space: pre-wrap;
  padding-left: calc(var(--hang) + var(--i, 0) * var(--unit));
  text-indent: calc(-1 * var(--hang));
  hyphens: none;
}
/* A shared blank-verse line -- the half-line a second speaker completes -- set
   across the measure rather than stepped in from the left. It must not be
   reproduced as a deep indent: an indent holds its position at one column width
   only (corpus/SCHEMA.md, `align`).
   These lines fill their own line box, so the <br/> that separates the others would
   add an empty one after them. */
.line.align-right,
.line.align-center {
  display: block;
  padding-left: 0;
  text-indent: 0;
}
.line.align-right {
  text-align: right;
}
.line.align-center {
  text-align: center;
}
.line.align-right + br,
.line.align-center + br {
  display: none;
}

.line:target,
.line.cited {
  background: var(--target-bg);
  box-shadow: -3px 0 0 var(--target-mark);
  scroll-margin-block: 33vh;
}

/* Line numbers: every fifth line, in the left gutter, and only from 48em up,
   where the viewport affords a gutter beyond the measure. The empty alt text on
   the generated content (`attr(data-n) / ""`) keeps them out of the accessibility
   tree, and `user-select: none` keeps them out of a copy, which is what holds the
   copy contract: what a reader selects is corpus text and nothing else. */
.line[data-n]::before {
  content: none;
}
@media (min-width: 48em) {
  .line[data-n]::before {
    content: attr(data-n);
    content: attr(data-n) / "";
    position: absolute;
    left: calc(-1 * var(--hang) - 3.25em);
    top: 0;
    width: 3em;
    text-align: right;
    text-indent: 0;
    font-size: 0.72em;
    line-height: 2.08; /* optically centers on the first row (1.5 / 0.72) */
    color: var(--muted);
    user-select: none;
  }
}

.part {
  font-size: 1rem;
  font-weight: 400;
  text-align: center;
  letter-spacing: 0.15em;
  color: var(--ink);
  margin: 2.5em 0 1.25em;
}
.part .ordinal,
.part .part-title {
  display: block;
}
/* A named section is set in italic, one step down from the numeral above it, and
   never letterspaced -- it is a title, not a numeral. */
.part .part-title {
  font-style: italic;
  font-size: 0.95em;
  letter-spacing: 0;
}
.part .ordinal + .part-title {
  margin-top: 0.25em;
}
/* A division the source does not name: the space a heading would occupy, and a real
   separator for assistive technology, but nothing invented to put in it. */
.part-break {
  border: 0;
  height: 0;
  margin: 2.5em 0 1.25em;
}
.poem-body > .part:first-child {
  margin-top: 0;
}
/* A poem's parts partition it from stanza 0, so the first part begins where the poem
   does. A numbered heading there is meaningful ("Part 1"); an unnamed separator is
   not -- it would divide the title from the first line. */
.poem-body > .part-break:first-child {
  display: none;
}

.epigraph {
  font-style: italic;
  font-size: 0.9rem;
  margin: 0 0 2em var(--unit);
  color: var(--muted);
}
.epigraph .line {
  white-space: pre-wrap;
  display: inline-block;
  padding-left: var(--hang);
  text-indent: calc(-1 * var(--hang));
}

/* ---------- poem page ---------- */

.poem-head {
  margin-bottom: 2.5rem;
}
.poem-head h1 {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.25;
}
.poem-head h1.untitled .first-line {
  font-weight: 400;
  font-style: italic;
}
.untitled-marker {
  font-weight: 400;
  font-size: 0.85em;
  color: var(--muted);
}
.byline {
  margin-top: 0.35rem;
  font-size: 0.9rem;
  color: var(--muted);
}
.byline a {
  color: inherit;
}
/* A poem printed in one poet's volume but written by another hand. The byline leads
   with the name the page printed, so that name is the one set in the reading colour;
   whose book it appeared in is context and stays muted. */
.byline .attributed {
  color: var(--ink);
}
.attribution {
  margin-top: 0.6rem;
}
.dates,
.poem-list .year,
.poet-list .dates {
  color: var(--muted);
  font-size: 0.85em;
}
.poet-page .dates-note {
  font-size: 0.8rem;
  color: var(--muted);
  max-width: 30em;
  margin-top: 0.5rem;
}
.cite summary {
  cursor: pointer;
  margin-bottom: 0.5rem;
}
.cite p {
  padding-left: 1rem;
}
.fp-source {
  font-size: 0.85em;
}

.source-note {
  margin-top: 3.5rem;
  border-top: 1px solid var(--rule);
  padding-top: 1.25rem;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.55;
}
.source-note h2 {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}
.source-note p {
  margin-bottom: 0.5rem;
}
.source-note a {
  overflow-wrap: anywhere;
}
.upstream summary {
  cursor: pointer;
  margin-bottom: 0.5rem;
}
.upstream ul {
  list-style: none;
  padding-left: 1rem;
  margin-bottom: 0.5rem;
}
.upstream li {
  margin-bottom: 0.2rem;
}

/* ---------- index & poet pages ---------- */

.intro .lede {
  font-size: 1.15rem;
  font-style: italic;
  margin-bottom: 1rem;
}
.intro p {
  margin-bottom: 1rem;
}
.poet-list,
.poem-list {
  list-style: none;
  padding: 0;
}
.poet-list li,
.poem-list li {
  margin-bottom: 0.4rem;
}
.poet-list .count,
.poem-list .container {
  font-size: 0.85em;
  color: var(--muted);
  margin-left: 0.5em;
}
.poet-page h1 {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}
.poet-page .book {
  margin-bottom: 2rem;
}
.poet-page .book h2 {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}
.list-note {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.5rem;
}

/* ---------- prose pages (about, dev) ---------- */

.prose h1 {
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
}
.prose h2 {
  font-size: 1.1rem;
  margin: 1.75rem 0 0.75rem;
}
.prose p,
.prose ul {
  margin-bottom: 1rem;
}
.prose ul {
  padding-left: 1.25rem;
}
.prose li {
  margin-bottom: 0.6rem;
}

/* ---------- print (poem pages print cleanly) ---------- */

@media print {
  html {
    font-size: 11.5pt;
  }
  body {
    background: #fff;
    color: #000;
    padding: 0;
  }
  .site-head,
  .cite,
  .upstream,
  .exports,
  .more {
    display: none;
  }
  .line:target,
  .line.cited {
    background: none;
    box-shadow: none;
  }
  .source-note {
    color: #000;
  }
  a {
    text-decoration: none;
  }
  .stanza {
    break-inside: avoid;
  }
}

/* ---------- browse and index pages ---------- */

.browse h1 {
  font-size: 1.6rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}
.browse h1 .subhead {
  display: block;
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--muted);
  margin-top: 0.2rem;
}
/* Two axes, one row each: it should read as a control, not as a list of pages. */
.browse-picker {
  font-size: 0.85rem;
  color: var(--muted);
  border-block: 1px solid var(--rule);
  padding: 0.5rem 0;
  margin-bottom: 2rem;
}
.browse-picker ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.browse-picker li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin-top: 0.15rem;
}
.browse-picker .axis {
  min-width: 5em;
}
.browse-picker a {
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
/* The current choice is marked by weight and a solid rule, not by colour alone. */
.browse-picker a[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--ink);
}
.browse .facet-head {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 2rem 0 0.4rem;
  scroll-margin-top: 1rem;
}
.browse .facet-head .count {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--muted);
}
/* The birth year is a column only where it is what the reader is scanning. */
.poet-list.timeline .born {
  display: inline-block;
  min-width: 3.5em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* first-line index: the line itself carries the weight, the attribution recedes */
.first-line-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
}
.first-line-list li {
  margin-bottom: 0.5rem;
  line-height: 1.4;
}
.first-line-list a {
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
.first-line-list .by,
.first-line-list .of,
.language-list .by {
  color: var(--muted);
  font-size: 0.85em;
}
.first-line-list .of::before {
  content: "· ";
}

/* ---------- book pages ---------- */

.book-page h1 {
  font-size: 1.7rem;
  font-weight: 600;
}
.book-page .byline {
  color: var(--muted);
  margin-bottom: 1rem;
}
.book-page .edition-note,
.poet-page .poet-facts {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 1rem;
}
.poem-list.numbered {
  list-style: none;
  padding: 0;
}
.poem-list.numbered .seq {
  display: inline-block;
  min-width: 2.6em;
  color: var(--muted);
  font-size: 0.8em;
  font-variant-numeric: tabular-nums;
}
.poem-list.numbered .seq.none {
  opacity: 0.5;
}
.book-page .order-source,
.book-page .collection-note {
  display: block;
  color: var(--muted);
}
.poet-page .poet-nav {
  font-size: 0.85rem;
  margin-top: 0.5rem;
}
.poet-page .book h2 .year,
.poet-page .book h2 a {
  font-weight: inherit;
}
.poet-page .book h2 .year {
  color: var(--muted);
  font-size: 0.85em;
}
.poet-page .book h2.no-volume {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 400;
  text-transform: none;
}

/* ---------- chrome additions ---------- */

.site-head .head-links {
  display: flex;
  gap: 1rem;
}
.book-page .seq-caption {
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 0.75rem;
}
.book-page .order-note .label {
  color: var(--muted);
}

/* Three links where there was one: at 320px the wordmark and "First lines" both
   broke mid-phrase and pushed the poem down the page. Nothing here may wrap inside
   a phrase; the group wraps as a whole instead. */
.site-head nav {
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
}
.site-head .wordmark,
.site-head .head-links a {
  white-space: nowrap;
}
.site-head .head-links {
  gap: 0.9rem;
  flex-wrap: wrap;
}
@media (max-width: 24em) {
  /* Narrowest phones: the second row is the links, and they need to fit it. */
  .site-head nav {
    font-size: 0.82rem;
  }
  .site-head .head-links {
    gap: 0.75rem;
  }
}