/* ===========================================================================
   NOCTES BINANIANAE — site design layer
   ===========================================================================

   The pages around the chapters: the title page, the contents, the poets,
   and the contents button, reading bar and footer on every page. Load it
   AFTER noctes.css: it uses that file's tokens (--ink, --sheet, --rule,
   --muted, --serif, --sans, --bar-h) and names no font or colour of its own.

   TWO VOCABULARIES, KEPT APART
     - The chapter text -- everything inside <article class="noctes-chapter">
       -- is styled by noctes.css alone, in the edition's TEI-derived classes
       (.l, .lg, .ind-1, .head, .notes…). This file never restyles it. Its
       one touch is the lino animal drawn under a poem's title, a mask on the
       existing title's ::after, so the chapter markup stays exactly as
       proofed.
     - Everything here is page furniture, and every class is prefixed nb-
       and named for what the thing IS (nb-reading-bar, nb-poet-name). The
       prefix keeps them clear of WordPress's own classes -- it puts .page,
       .home, .single and others on <body> -- and of the theme's.

   Sizes are px and rem on purpose: this is furniture laid out to the
   design's 1440px frames. The em-only contract in noctes.css governs the
   text, not this file.
   =========================================================================== */

/* The design's reading bar is 4rem tall. noctes.css reads --bar-h to clear
   it (the sheet's top padding, the offset for jumps to a note). */
:root { --bar-h: 4rem; }

body.noctes-site { margin: 0; }
.noctes-site a { color: inherit; }
.noctes-site a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* A heavy rule: under a page title, above the footer. */
.nb-rule { height: 0; margin: 0; border: 0; border-top: 2px solid var(--ink); }

/* A small label in the typewriter face: footer column heads, "Poems in this
   edition". Real headings, so they are reset to look like labels. */
.nb-label {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;
}
.nb-label a { text-decoration: none; }

/* Lists used for navigation, not for reading: no markers, no indent. */
.nb-contents, .nb-poet-poem-list, .nb-site-footer-poets, .nb-site-footer-legal {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ------------------------------------------------------ contents button --
   Three bars, top left, on every page -- the title page too, which has no
   reading bar, so it lives in the page shell rather than in the bar. Where
   there is a bar it sits centred on the bar's height. */
.nb-contents-button {
  position: fixed;
  z-index: 50;
  left: 16px;
  top: calc(var(--bar-h) / 2 - 17px);
  width: 34px;
  height: 34px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 0 6px;
}
.nb-contents-button span { display: block; height: 2px; background: var(--ink); transition: width 0.3s; }
.nb-contents-button span:nth-child(2) { width: 70%; }
.nb-contents-button:hover span:nth-child(2) { width: 100%; }

/* ---------------------------------------------------------- reading bar --
   Previous, the book's name (home), next. Fixed, so noctes.css's --bar-h
   offsets still apply. At either end of the book the missing link is an
   empty placeholder that keeps the three columns. */
.nb-reading-bar {
  position: fixed;
  z-index: 40;
  inset: 0 0 auto;
  height: var(--bar-h);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  padding: 0 200px;
  background: var(--sheet);
  border-bottom: 1px solid var(--rule);
}
.nb-reading-bar a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 17px;
  line-height: 1.25;
  text-decoration: none;
}
.nb-reading-bar a:hover span { text-decoration: underline; }
.nb-reading-bar svg { width: 22px; height: 22px; flex: none; }
.nb-reading-bar-prev { justify-content: flex-start; }
.nb-reading-bar-next { justify-content: flex-end; text-align: right; }
.nb-reading-bar .nb-reading-bar-home {
  justify-content: center;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Narrower: the book's name goes, previous and next keep the width. */
@media (max-width: 1100px) {
  .nb-reading-bar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-inline: 58px 16px; gap: 12px; }
  .nb-reading-bar .nb-reading-bar-home { display: none; }
}

/* --------------------------------------------------------------- footer -- */
.nb-site-footer { margin-top: 96px; padding: 0 16px 24px; }
/* Four columns sized to the design's 1440 frame; they add up to 1,392px,
   so they fold to two before the window is narrower than that. */
.nb-site-footer-columns {
  display: grid;
  grid-template-columns: 348px 540px 220px minmax(0, 284px);
  gap: 16px 0;
  align-items: start;
  padding-top: 28px;
}
.nb-site-footer-text {
  max-width: 500px;
  margin: 19px 0 0;
  font-size: 17px;
  line-height: 1.4;
  letter-spacing: -0.3px;
}
.nb-site-footer-text + .nb-site-footer-text { margin-top: 1.4em; }   /* a blank line */
.nb-site-footer-text a { text-decoration: underline; }
/* The tseliot.com link has no label above it, so it drops to line up with
   the text beside it. */
.nb-site-footer-parent .nb-site-footer-text { margin-top: 40px; }
.nb-site-footer-contents {
  display: flex;
  width: fit-content;
  gap: 10px;
  align-items: flex-start;
  margin-top: 20px;
  font-size: 22px;
  line-height: 1.3;
  text-decoration: none;
}
.nb-site-footer-contents svg { flex: none; margin-top: 0.22em; }
.nb-site-footer-contents:hover span { text-decoration: underline; }
.nb-site-footer-legal {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 0;
  margin-top: 120px;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.3;
}
.nb-site-footer-legal a { text-decoration: none; }
@media (max-width: 1240px) {
  .nb-site-footer-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .nb-site-footer-legal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) { .nb-site-footer-legal { font-size: 13px; } }

/* ----------------------------------------------------------- title page -- */
.nb-title-page { display: block; padding: min(9vw, 130px) 16px 19px; text-align: center; }
.nb-title-page-title {
  margin: 0;
  font-weight: 400;
  text-transform: uppercase;
  font-size: min(13.17vw, 189.68px);
  line-height: 0.92;
  letter-spacing: -1px;
}
.nb-title-page-subtitle {
  max-width: 900px;
  margin: min(5vw, 72px) auto 0;
  font-size: clamp(20px, 2.5vw, 36px);
  line-height: 1.32;
}
.nb-title-page-read {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: 105px;
  font-size: clamp(20px, 2.5vw, 36px);
  line-height: 1.32;
  text-decoration: none;
}
.nb-title-page-read svg { width: 1.5em; height: 0.75em; flex: none; transition: transform 0.35s cubic-bezier(0.3, 0, 0.2, 1); }
.nb-title-page-read:hover svg { transform: translateX(10px); }
.nb-title-page-read:hover span { text-decoration: underline; text-underline-offset: 0.12em; text-decoration-thickness: 2px; }
@media (max-width: 560px) { .nb-title-page-subtitle { font-size: 17px; } }

/* ------------------------------------------- contents and poets pages -- */
.nb-page { display: block; padding: var(--bar-h) 16px 0; }
.nb-page-header { padding-block: 96px 56px; text-align: center; }
.nb-page-title {
  margin: 0;
  font-weight: 400;
  font-size: clamp(2.4rem, 8vw, 64px);
  line-height: 0.92;
  letter-spacing: -1px;
  text-transform: uppercase;
}

/* The contents: number, title, poet, arrow. Each chapter's whole row is
   its link. The first row is the column heads, hidden from screen readers
   because each link already reads as number, title, poet. */
.nb-contents { margin-top: 32px; }
.nb-contents-row, .nb-contents-head {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) 250px 36px;
  align-items: center;
  min-height: 60px;
  border-bottom: 1.5px solid var(--rule);
  text-decoration: none;
}
.nb-contents-number, .nb-contents-voice { font-family: var(--sans); font-size: 20px; line-height: 1.3; }
.nb-contents-title { padding-block: 8px; font-size: 24px; line-height: 1.3; }
.nb-contents-arrow { display: flex; justify-content: flex-end; }
.nb-contents-arrow svg { width: 22px; height: 16px; transition: transform 0.2s; }
.nb-contents-row:hover { background: color-mix(in srgb, var(--ink) 4.5%, transparent); }
.nb-contents-row:hover .nb-contents-arrow svg { transform: translateX(5px); }
.nb-contents-head { min-height: 44px; border-bottom: 2px solid var(--ink); font-family: var(--sans); }
.nb-contents-head > * { font-family: var(--sans); font-size: 14px; }
@media (max-width: 1000px) {
  .nb-contents-row, .nb-contents-head { grid-template-columns: 44px minmax(0, 1fr) 120px 30px; }
  .nb-contents-row .nb-contents-number, .nb-contents-row .nb-contents-voice { font-size: 15px; }
  .nb-contents-row .nb-contents-title { font-size: 20px; }
}
/* On a phone the poet column goes; the poets page has them. */
@media (max-width: 560px) {
  .nb-contents-row, .nb-contents-head { grid-template-columns: 34px minmax(0, 1fr) 28px; }
  .nb-contents-voice { display: none; }
}

/* The poets: name, dates and animal on the left; biography and their poems
   on the right. */
.nb-poet {
  display: grid;
  grid-template-columns: minmax(0, calc(100% / 3)) minmax(0, 700px);
  padding-block: 48px 56px;
  border-top: 2px solid var(--ink);
}
.nb-poet-name {
  margin: 0 0 10px;
  font-weight: 400;
  font-size: clamp(1.8rem, 3.4vw, 36px);
  line-height: 1;
  letter-spacing: -0.5px;
  text-transform: uppercase;
}
.nb-poet-dates { margin: 0; font-family: var(--sans); font-size: 15px; line-height: 1.3; }
.nb-poet-bio p, .nb-poet-bio blockquote { margin: 0 0 1em; font-size: 19px; line-height: 1.5; }
.nb-poet-bio blockquote { margin-left: 28px; }
.nb-poet-poems { margin-top: 32px; }
.nb-poet-poems .nb-label { margin-bottom: 8px; }
.nb-poet-poem {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  padding: 6px 0;
  border-bottom: 1.5px solid var(--rule);
  font-size: 17px;
  line-height: 1.25;
  text-decoration: none;
}
.nb-poet-poem-number { font-family: var(--sans); font-size: 15px; color: var(--muted); }
.nb-poet-poem:hover .nb-poet-poem-title { text-decoration: underline; }
@media (max-width: 1000px) { .nb-poet { grid-template-columns: minmax(0, 1fr); gap: 18px; } }

/* ------------------------------------------------------ the lino animals --
   Each animal is a one-colour SVG used as a MASK: the file gives the shape,
   --ink fills it. So the artwork can be redrawn and dropped into animals/
   under the same name without touching this file. Purely decorative.

   Under a poem's title it is drawn on the title's own ::after -- the
   chapter markup gets nothing new. Which poem has which animal is the list
   below, by chapter id.

   --nb-animal        the file, as url()
   --nb-animal-ratio  its width / height, from the SVG's viewBox
   --nb-animal-width  how wide it is drawn

   The url() is set here, never inline in a page: a url() inside a custom
   property resolves against the stylesheet that uses it. */
.noctes-chapter .head::after {
  content: "";
  display: none;
  width: min(var(--nb-animal-width, 0px), 80vw);
  aspect-ratio: var(--nb-animal-ratio, 1);
  margin: 2.25rem auto 0;
  background: var(--ink);
  -webkit-mask: var(--nb-animal) center / contain no-repeat;
  mask: var(--nb-animal) center / contain no-repeat;
}
.noctes-chapter:is(#how-to-pick-a-possum, #the-opossum-strikes-back, #vers-pour-la-foulque,
  #translation-into-english, #abschied-zur-bina) .head::after {
  display: block; --nb-animal: url("animals/possum.svg"); --nb-animal-ratio: 900 / 538; --nb-animal-width: 270px;
}
.noctes-chapter:is(#an-answer-to-the-foregoing-poem, #expostulatory-epistle-of-a-coot,
  #thoughts-of-a-briton, #fragment-of-a-soliloquy, #nobody-knows-how-i-feel-about-you,
  #poema-latina, #album-leaflet-no-2) .head::after {
  display: block; --nb-animal: url("animals/coot.svg"); --nb-animal-ratio: 900 / 962; --nb-animal-width: 165px;
}
.noctes-chapter:is(#the-whale-and-the-elephant, #ode-to-a-roman-coot, #three-sonnets) .head::after {
  display: block; --nb-animal: url("animals/elephant.svg"); --nb-animal-ratio: 900 / 655; --nb-animal-width: 285px;
}
.noctes-chapter:is(#for-doctor-thomas-eliot, #fable-xiv, #a-refutation) .head::after {
  display: block; --nb-animal: url("animals/whale.svg"); --nb-animal-ratio: 900 / 489; --nb-animal-width: 365px;
}
.noctes-chapter:is(#a-fig-for-a-foolish-one, #frognal) .head::after {
  display: block; --nb-animal: url("animals/spider.svg"); --nb-animal-ratio: 900 / 854; --nb-animal-width: 180px;
}
@media (max-width: 1000px) {
  .noctes-chapter .head::after { width: calc(var(--nb-animal-width, 0px) * 0.6); }
}

/* On the poets page, beside the poet. Hidden unless an animal is named:
   with no mask the ink fill would be a solid black box. */
.nb-poet-animal,
#poet-eliot .nb-poet-header::after {
  display: none;
  margin-top: 34px;
  width: var(--nb-animal-width);
  aspect-ratio: var(--nb-animal-ratio);
  background: var(--ink);
  -webkit-mask: var(--nb-animal) left center / contain no-repeat;
  mask: var(--nb-animal) left center / contain no-repeat;
}
#poet-eliot .nb-poet-animal  { display: block; --nb-animal: url("animals/possum.svg"); --nb-animal-ratio: 900 / 538; --nb-animal-width: 170px; }
#poet-faber .nb-poet-animal  { display: block; --nb-animal: url("animals/coot.svg");   --nb-animal-ratio: 900 / 962; --nb-animal-width: 110px; }
#poet-morley .nb-poet-animal { display: block; --nb-animal: url("animals/whale.svg");  --nb-animal-ratio: 900 / 489; --nb-animal-width: 230px; }
#poet-hayward .nb-poet-animal { display: block; --nb-animal: url("animals/spider.svg"); --nb-animal-ratio: 900 / 854; --nb-animal-width: 120px; }
/* Eliot has two totems, Possum and Elephant. The second is drawn on the
   header's ::after, so the template and the PHP keep one animal element. */
#poet-eliot .nb-poet-header::after { content: ""; display: block; --nb-animal: url("animals/elephant.svg"); --nb-animal-ratio: 900 / 655; --nb-animal-width: 180px; }
@media (max-width: 1000px) {
  .nb-poet-animal,
  #poet-eliot .nb-poet-header::after { margin-top: 18px; width: calc(var(--nb-animal-width) * 0.7); }
}

@media print {
  .nb-contents-button, .nb-reading-bar, .nb-site-footer { display: none; }
}