/* ==========================================================================
   DHARMA CROW MUSIC - the whole stylesheet.
   A dark letterpress broadside. One vertical spine, 36rem wide, on every page.
   Sections:
     01  FONTS (self-hosted, latin subsets)
     02  TOKENS
     03  RESET AND BASE
     04  GRAIN
     05  THE SHEET GRID
     06  TYPE SCALE
     07  FURNITURE - rules, ornament, section labels, links, focus
     08  STICKY NAV
     09  MASTHEAD
     10  THE PLATE AND THE PLAYER FACADE
     11  THE INDEX
     12  THE MARGIN TRACK
     13  THE SONG SHEET - title and lyrics
     14  INSTRUMENTAL PANEL
     15  PREV / NEXT
     16  ABOUT
     17  404
     18  FOOTER AND COLOPHON
     19  REDUCED MOTION
     20  PRINT - US LETTER broadside
   ========================================================================== */

/* 01  FONTS ================================================================
   Self-hosted woff2, latin subset only. Nothing is fetched from a third party
   at runtime; the YouTube iframe, after a click, is the site's only outbound
   request, ever. */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 900;          /* variable: wght 400..900, opsz 9..144 */
  font-display: swap;
  src: url("/fonts/fraunces-400-900.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url("/fonts/fraunces-400-900-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Spectral";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/spectral-400.woff2") format("woff2");
}
@font-face {
  font-family: "Spectral";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/spectral-500.woff2") format("woff2");
}
@font-face {
  font-family: "Spectral";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/spectral-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-500.woff2") format("woff2");
}

/* 02  TOKENS ===============================================================
   Single dark theme. No light mode, no toggle. Every ratio below was computed
   against --ink, not eyeballed. --meta-dim at 4.97:1 is the floor; nothing on
   this site is dimmer. --rule, --rule-gold and --plate-edge are structural and
   are never used as a text colour. */

:root {
  --ink:           #0E0C0A;   /* page ground. warm near-black, never #000     */
  --ink-raised:    #14110D;   /* nav, instrumental panel, prev/next, 404      */
  --ink-frame:     #241D16;   /* fill behind a cover plate before it paints   */
  --lyric:         #F0E6D2;   /* lyric lines and page titles. 15.76:1         */
  --prose:         #E8DCC0;   /* About paragraphs, pulled first lines. 14.34:1*/
  --meta:          #B3A489;   /* mono metadata. 7.98:1                        */
  --meta-dim:      #8C7F68;   /* colophon, captions. 4.97:1 - the floor       */
  --gold:          #D4AF37;   /* links, feature note, play ring. 9.28:1       */
  --gold-deep:     #C9A227;   /* ornaments, INSTRUMENTAL, diamonds. 8.07:1    */
  --gold-hot:      #E8C34A;   /* hover and :focus-visible only. 11.6:1        */
  --on-gold:       #0E0C0A;   /* the triangle on the filled play ring         */
  --rule:          rgba(240, 230, 210, 0.13);
  --rule-gold:     rgba(212, 175, 55, 0.45);
  --plate-edge:    rgba(240, 230, 210, 0.10);
  --scrim:         rgba(14, 12, 10, 0.55);

  /* families */
  --display: "Fraunces", "Hoefler Text", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --text:    "Spectral", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* type scale */
  --fs-lyric:  clamp(1.1rem, 0.98rem + 0.5vw, 1.35rem);
  --fs-meta:   0.72rem;
  --fs-micro:  0.70rem;

  /* rhythm */
  --gap-section: 3rem;
  --ease: cubic-bezier(.2, .6, .2, 1);
  --t: 120ms;
}

@media (min-width: 900px) {
  :root { --fs-meta: 0.78rem; --gap-section: 4.5rem; }
}

/* 03  RESET AND BASE ======================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--prose);
  font-family: var(--text);
  font-size: 100%;
  font-synthesis: none;              /* never let a browser fake a bold */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
  padding-bottom: 4.5rem;
}

h1, h2, h3, p, ol, ul, dl, dd, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }

img { max-width: 100%; }

a { color: var(--gold); text-decoration: none; }

button { font: inherit; color: inherit; }

/* shown only on paper: the song title inside the printed colophon line */
.only-print { display: none; }

/* the visually-hidden utility, used for screen-reader-only text */
.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; white-space: nowrap;
  clip: rect(0 0 0 0); clip-path: inset(50%);
}

/* 04  GRAIN ================================================================
   A fixed, static, self-contained SVG noise wash. No request, no animation.
   It perturbs luminance by under 2%, so every contrast ratio above holds. */

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: .045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* 05  THE SHEET GRID =======================================================
   Column 2 is THE SPINE: a 36rem measure whose left edge never moves. Column 4,
   from 1100px up, is THE MARGIN TRACK. The margin track can never push or
   narrow the spine. The 36 + 2.5 + 20 = 58.5rem block centres in the viewport,
   which puts the spine slightly left of optical centre. That is the posture. */

.sheet {
  display: grid;
  grid-template-columns: minmax(1.5rem, 1fr) minmax(0, 36rem) minmax(1.5rem, 1fr);
}
.sheet > * { grid-column: 2; min-width: 0; }

@media (min-width: 640px) {
  .sheet { grid-template-columns: minmax(2rem, 1fr) minmax(0, 36rem) minmax(2rem, 1fr); }
}
@media (min-width: 1100px) {
  .sheet {
    grid-template-columns:
      minmax(2rem, 1fr) minmax(0, 36rem) 2.5rem minmax(0, 20rem) minmax(2rem, 1fr);
  }
}
@media (min-width: 1400px) {
  .sheet {
    grid-template-columns:
      minmax(4rem, 1fr) minmax(0, 36rem) 2.5rem minmax(0, 20rem) minmax(4rem, 1fr);
  }
}

.sheet--main { padding-top: 2rem; }

/* vertical rhythm between the big blocks on a sheet */
.sheet > * + *:not(.margin) { margin-top: var(--gap-section); }

/* 06  TYPE SCALE =========================================================== */

.mono, .stats, .section-label, .cap, .colophon, .watch, .topbar,
.pn__kicker, .spec dt, .tags, .foot-nav, .foot-copy {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 500;
  font-size: var(--fs-meta);
  color: var(--meta);
  line-height: 1.5;
}

.cap, .colophon, .section-label, .spec dt, .pn__kicker, .foot-copy {
  font-weight: 400;
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  color: var(--meta-dim);
}

/* 07  FURNITURE ============================================================ */

/* the Oxford rule pair: 2px, 4px of air, 1px. Mirrored in the footer. */
.rule-pair {
  height: 7px;
  border-top: 2px solid var(--rule-gold);
  position: relative;
}
.rule-pair::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 4px;
  border-top: 1px solid var(--rule-gold);
}
.rule-pair--foot { border-top-width: 1px; }
.rule-pair--foot::after { border-top-width: 2px; }

/* the one ornament, in three sizes. Nothing else decorates this site.
   It is left-aligned on the spine, never centred, with 3rem of air either
   side; the block that follows it does not add its own section gap. */
.orn { display: block; color: var(--gold-deep); }
.orn-wrap { margin: 3rem 0; }
.sheet > .orn-wrap { margin-top: 3rem; margin-bottom: 3rem; }
.sheet > .orn-wrap + * { margin-top: 0; }

/* the single hairline used to head or foot a block */
.hair { border: 0; border-top: 1px solid var(--rule); margin: 0; }
.hair--gold { border-top-color: var(--rule-gold); }

/* text links */
a:hover, a:focus-visible { color: var(--gold-hot); }
a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.sheet a, .topbar a { transition: color var(--t) var(--ease); }

/* focus is instant, never transitioned, never removed */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gold-hot);
  outline-offset: 3px;
  border-radius: 2px;
}

/* skip link - the first focusable element on every page */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  font-family: var(--mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--ink-raised);
  color: var(--gold);
  padding: 0.75rem 1rem;
  border: 1px solid var(--rule-gold);
}
.skip:focus { left: 1.5rem; top: 0.5rem; }

/* 08  STICKY NAV - song sheets and About only ============================== */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--ink-raised);
  border-bottom: 1px solid var(--rule);
}
.topbar__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 48px;
}
.topbar a { color: var(--meta); }
.topbar a:hover, .topbar a:focus-visible { color: var(--gold-hot); }
.topbar__nav { display: flex; gap: 0; align-items: baseline; }
.topbar__sep { color: var(--meta-dim); }
/* the arrows are 8px wide; the padding is what makes them a 24px tap target.
   It replaces the flex gap exactly, so the setting is unchanged. */
.topbar__nav a { padding: 0.5rem; }

/* Below 640px only the arrow is drawn - but the word is hidden from the eye,
   never from the accessibility tree. display:none would delete it from the
   link's accessible name and leave a screen reader with "link, left arrow". */
.topbar__word {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; white-space: nowrap;
  clip: rect(0 0 0 0); clip-path: inset(50%);
}
@media (min-width: 640px) {
  .topbar__word {
    position: static;
    width: auto; height: auto;
    margin: 0; overflow: visible;
    clip: auto; clip-path: none;
  }
}

/* 09  MASTHEAD ============================================================= */

.masthead__h1 { margin: 0; line-height: 0; }
.masthead .hair { margin-top: 1.5rem; }

/* the artist's real wordmark, never retyped in a substitute face. Its brown
   ground is melted into the page rather than boxed. */
.wordmark {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 1.5rem;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%),
    linear-gradient(to bottom, #000 62%, transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%),
    linear-gradient(to bottom, #000 62%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.wordmark--small { width: 60%; }

/* avatar.jpg is a square on a charcoal ground; it is always circle-cropped */
.roundel {
  display: block;
  border-radius: 50%;
  overflow: hidden;
  height: auto;
}
.roundel--72  { width: 72px;  margin: 1rem auto 0; }   /* centred on the index */
.roundel--96  { width: 96px; }
.roundel--120 { width: 120px; opacity: .22; }

.tagline {
  font-family: var(--text);
  font-style: italic;
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  line-height: 1.5;
  color: var(--prose);
}
.stats { margin-top: 1rem; }

/* 10  THE PLATE AND THE PLAYER FACADE ======================================
   The covers already carry their own gold double-rule frames, their own
   ornaments and their own letterspaced caps. So: no gold border, no shadow,
   no filter, no radius, no gradient mask, ever, on any cover. A neutral
   hairline exists only so a near-black corner does not dissolve into the page.
   No cover is special-cased - not the bright ones, not the Linux one. */

.plate,
.facade {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--ink-frame);
  border: 1px solid var(--plate-edge);
  overflow: hidden;
}
.plate > img,
.facade > img,
.facade > iframe {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}
.facade {
  padding: 0;
  cursor: pointer;
  color: inherit;
  text-align: left;
  -webkit-appearance: none;
  appearance: none;
  transition: transform var(--t) var(--ease);
}
.facade:active { transform: translateY(1px); transition-duration: 0ms; }

.facade__ring {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 64px;
  height: 64px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background-color: transparent;
  color: var(--lyric);
  display: grid;
  place-items: center;
  transition: background-color var(--t) var(--ease),
              border-color var(--t) var(--ease),
              color var(--t) var(--ease);
}
/* the scrim is its own layer so the ring can fill solid gold on hover */
.facade__ring::before {
  content: "";
  position: absolute;
  inset: -48px;                     /* 64 + 96 = the specified 160px field */
  border-radius: 50%;
  background: radial-gradient(circle, var(--scrim) 0%, rgba(14,12,10,.28) 70%, transparent 72%);
  transition: opacity var(--t) var(--ease);
}
.facade__ring svg { position: relative; margin-left: 3px; }
.facade:hover .facade__ring,
.facade:focus-visible .facade__ring {
  background-color: var(--gold);
  border-color: var(--gold-hot);
  color: var(--on-gold);
}
.facade:hover .facade__ring::before,
.facade:focus-visible .facade__ring::before { opacity: 0; }

/* the iframe fades in inside the identical aspect-locked box, so the swap
   costs exactly zero layout shift */
.facade.is-live { cursor: default; }
.facade.is-live > iframe { animation: plate-in 140ms var(--ease) both; }
@keyframes plate-in { from { opacity: 0; } to { opacity: 1; } }

/* The artist's own note on the featured plate. Sits above the cover, on the
   spine, in the display face - the one deliberate highlight on the page. */
.feature-note {
  margin-bottom: 0.9rem;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.5rem);
  line-height: 1.35;
  color: var(--gold);
}

.cap { margin-top: 0.75rem; }
.cap a { color: var(--meta-dim); }
.cap a:hover, .cap a:focus-visible { color: var(--gold-hot); }
.watch { margin-top: 0.75rem; }
.watch a { color: var(--meta); }
.watch a:hover, .watch a:focus-visible { color: var(--gold-hot); }

/* 11  THE INDEX ============================================================
   Twelve rows. Every row's second line is that song's actual opening lyric.
   The home page is a book of words, not a poster wall. */

.section-label { margin-bottom: 1rem; }

.rows { border-top: 1px solid var(--rule); }
.rows > li { border-bottom: 1px solid var(--rule); }

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.5rem;
  padding: 1rem 0.5rem;
  margin: 0 -0.5rem;
  min-height: 44px;
  color: inherit;
  transition: background-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.row:hover, .row:focus-visible { background-color: var(--ink-raised); text-decoration: none; }
/* one tactile touch: 0ms in, 120ms out */
.row:active { transform: translateY(1px); transition-duration: 0ms; }

.row__num {
  order: 1;
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--fs-meta);
  letter-spacing: 0.16em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.row__right {
  order: 2;
  display: flex;
  column-gap: 0.5rem;
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--fs-meta);
  letter-spacing: 0.16em;
  color: var(--meta);
  font-variant-numeric: tabular-nums;
}
.row__right::before { content: "\00b7"; color: var(--meta-dim); }
.row__ded { color: var(--gold-deep); }
.row__ded::before { content: "\00b7\00a0"; color: var(--meta-dim); }

.row__mid { order: 3; flex: 0 0 100%; margin-top: 0.5rem; }
.row__title {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-variation-settings: "opsz" 72;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
  line-height: 1.12;
  color: var(--lyric);
  transition: color var(--t) var(--ease);
}
.row:hover .row__title, .row:focus-visible .row__title { color: var(--gold-hot); }
.row__pull {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--text);
  font-style: italic;
  font-size: clamp(1rem, 0.96rem + 0.35vw, 1.15rem);
  line-height: 1.5;
  color: var(--prose);
}
/* Instrumentals have no opening line to pull. The marker must be QUIETER
   than a lyric, never louder: uppercase gold mono made the two wordless
   tracks the loudest rows on the page, which read as a highlight nobody
   asked for. Same italic serif voice as a pull quote, just dimmer. */
.row__pull--none {
  font-family: var(--text);
  font-style: italic;
  color: var(--meta-dim);
}

@media (min-width: 640px) {
  .row {
    display: grid;
    grid-template-columns: 4.5rem 1fr 7rem;
    column-gap: 1.5rem;
    align-items: baseline;
    min-height: 5.5rem;
    padding: 1.5rem 0.5rem;
  }
  .row__num  { grid-column: 1; }
  .row__mid  { grid-column: 2; margin-top: 0; }
  .row__right { grid-column: 3; display: block; text-align: right; }
  .row__right::before { content: none; }
  .row__ded { display: block; margin-top: 0.5rem; }
  .row__ded::before { content: none; }
}

/* 12  THE MARGIN TRACK - 1100px and up only ================================
   Below 1100px it is removed entirely, not shrunk into something half-working. */

.margin { display: none; }

@media (min-width: 1100px) {
  .margin { display: block; grid-column: 4; }
  .margin--spec  { grid-row: 2 / span 40; }
  .margin--about { grid-row: 4 / span 40; }
  .margin__sticky { position: sticky; top: 3rem; }
  .margin--spec .margin__sticky { top: 4rem; }
}


/* the printer's spec sheet */
.spec {
  background: var(--ink-raised);
  border: 1px solid var(--rule);
  padding: 1.25rem;
}
.spec div { padding: 0.5rem 0; border-bottom: 1px dotted var(--rule); }
.spec div:first-child { padding-top: 0; }
.spec div:last-child { border-bottom: 0; padding-bottom: 0; }
.spec dt { margin-bottom: 0.5rem; }
.spec dd {
  font-family: var(--text);
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--prose);
}
.margin .orn-wrap { margin: 1.5rem 0; }
.margin__pn { display: block; margin-top: 0.5rem; }

/* 13  THE SONG SHEET ======================================================= */

/* the title block and the verse take 2.5rem of air, not the section gap;
   these selectors match the sheet-grid rhythm rule's specificity on purpose */
.sheet > .title-block { margin-top: 2.5rem; }
.sheet > .lyrics {
  font-family: var(--text);
  font-weight: 400;
  font-size: var(--fs-lyric);
  line-height: 1.62;
  color: var(--lyric);
}
/* Plain running text: no hanging indent, no raised initial, no italic on
   repeated stanzas. Darin asked for the words and nothing around them. */
.ln { margin: 0; }
.stanza + .stanza { margin-top: 1.9em; }

/* 14  INSTRUMENTAL PANEL ===================================================
   Two songs have no words. The absence is composed, not left as a hole. */

.instr {
  background: var(--ink-raised);
  border-top: 1px solid var(--rule-gold);
  padding: 1.5rem;
}
@media (min-width: 640px) { .instr { padding: 3rem; } }
/* "Instrumental" is one long unbreakable word, so it is set to the measure and
   not to a fixed size: at 3rem it inks 304px, and a 320px phone leaves 176px of
   panel to put it in. The clamp lands it inside the panel at every width. */
.instr__word {
  font-family: var(--display);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(1.6rem, 0.9rem + 4.6vw, 3rem);
  line-height: 1.1;
  color: var(--gold-deep);
}
.instr__meta { margin-top: 1rem; }
.instr .hair { margin: 2rem 0; }

/* 15  PREV / NEXT ==========================================================
   A catalogue is not a loop: track 01 has no previous, track 12 has no next. */

.pn { display: grid; gap: 1rem; }
@media (min-width: 640px) { .pn { grid-template-columns: 1fr 1fr; } }
.pn--one { grid-template-columns: 1fr; }

.pn__cell {
  display: block;
  background: var(--ink-raised);
  border: 1px solid var(--rule);
  padding: 1.25rem;
  color: inherit;
  transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.pn__cell:hover, .pn__cell:focus-visible { border-color: var(--rule-gold); text-decoration: none; }
.pn__cell--next { text-align: right; }
.pn__cell--next .pn__thumb { margin-left: auto; }
.pn__thumb {
  display: block;
  width: 96px;
  height: 54px;
  object-fit: cover;
  border: 1px solid var(--plate-edge);
  margin-bottom: 0.75rem;
}
.pn__kicker { display: block; }
.pn__title {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--gold);
  transition: color var(--t) var(--ease);
}
.pn__cell:hover .pn__title, .pn__cell:focus-visible .pn__title { color: var(--gold-hot); }

/* 16  ABOUT ================================================================ */

.hero {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 1.4rem + 3vw, 3.4rem);
  line-height: 1.14;
  color: var(--lyric);
}
.hero em { font-style: italic; color: var(--gold); }
.hero + .cap { margin-top: 1rem; }

.note p {
  font-family: var(--text);
  font-size: var(--fs-lyric);
  line-height: 1.70;
  color: var(--prose);
}
.note p + p { margin-top: 1.5rem; }
/* the counted line stays mono inside the prose block */
.note .stats {
  margin-top: 2rem;
  font-family: var(--mono);
  font-size: var(--fs-meta);
  line-height: 1.5;
  color: var(--meta);
}
/* below 1100px the roundel drops into the spine above the note, left-aligned;
   at 1100px and up it lives in the margin track instead */
.about-roundel { margin-bottom: 2rem; }
.sheet > .about-roundel + * { margin-top: 0; }
@media (min-width: 1100px) { .about-roundel { display: none; } }

/* the channel tags, set as a type specimen card */
.tags {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 1.5rem 0;
  margin-top: 0.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  line-height: 2;
  color: var(--meta);
  overflow-wrap: break-word;   /* belt and braces behind the <wbr>s */
}
.tags i { font-style: normal; color: var(--gold-deep); padding: 0 0.5rem; }

.contact .eml-a { font-size: 1.05rem; color: var(--gold); letter-spacing: 0.1em; }
.contact p + p { margin-top: 1rem; }

/* 17  404 ================================================================== */

.gone {
  background: var(--ink-raised);
  border: 1px solid var(--rule);
  padding: 3rem;
}
.gone__num {
  font-family: var(--display);
  font-weight: 900;
  font-variation-settings: "opsz" 144;
  font-size: clamp(4rem, 3rem + 8vw, 8rem);
  line-height: 0.9;
  color: var(--gold-deep);
}
.gone__line {
  margin-top: 1.5rem;
  font-family: var(--text);
  font-style: italic;
  font-size: var(--fs-lyric);
  line-height: 1.62;
  color: var(--lyric);
}
.gone .cap { margin-top: 0.75rem; }
.gone .orn-wrap { margin: 2rem 0; }
.gone .roundel--120 { margin-top: 2rem; }

/* 18  FOOTER AND COLOPHON ================================================== */

.colophon { margin-top: 3rem; }

.foot { margin-top: var(--gap-section); }
.foot-nav { margin-top: 1.5rem; }
.foot-nav a { color: var(--meta); }
.foot-nav a:hover, .foot-nav a:focus-visible { color: var(--gold-hot); }
.foot-sep { color: var(--meta-dim); padding: 0 0.5rem; }
.foot-eml {
  margin-top: 0.5rem;
  font-family: var(--mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.16em;
  color: var(--meta);
}
.foot-eml .eml-a { color: var(--meta); }
.foot-eml .eml-a:hover, .foot-eml .eml-a:focus-visible { color: var(--gold-hot); }
.foot-copy { margin-top: 0.5rem; }

/* 19  REDUCED MOTION =======================================================
   The design never depended on motion, so it loses nothing here. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* 20  PRINT - US LETTER ====================================================
   A broadside that cannot be printed is a pose. Any song page prints as a
   clean single-sheet lyric broadside. Letter, never A4: an A4 sheet crops
   0.69in off the bottom of a Letter tray, silently. */

@media print {
  @page { size: letter; margin: 0.75in; }

  body::after,                 /* grain      */
  .topbar,                     /* sticky nav */
  .facade, .plate, .cap, .watch,
  .pn, .margin, .foot-nav, .foot-eml, .skip,
  .masthead, .rule-pair, .orn-wrap { display: none !important; }

  body {
    background: #FFFFFF;
    color: #14110D;
    padding: 0;
  }
  .sheet { display: block; }
  .sheet > * + *:not(.margin) { margin-top: 0.25in; }

  .song-h1, .lyrics, .hero, .note p { color: #14110D; }
  .ded, .instr__word, .hero em { color: #6B5410; }

  .lyrics { font-size: 11pt; line-height: 1.55; }
  .stanza { break-inside: avoid; }

  .instr { background: none; border-top-color: #6B5410; padding: 0; }
  /* the printed footer line carries the song title as well as the track */
  .only-print { display: inline; }
  .colophon, .foot-copy { color: #14110D; font-size: 8pt; }
  a { color: #14110D; text-decoration: none; }
}