/* Tokens and primitives. Palette is taken from the book cover. */
:root {
  --cream: #efebe4;
  --paper: #f7f4ef;
  --ink: #121110;
  --ink-soft: #55504a;
  --rule: #d3ccc1;
  --gold: #c8a25a;
  --gold-deep: #9a7a3a;
  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --caps: "Cinzel", "Cormorant Garamond", Georgia, serif;
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--serif); font-size: 20px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.flip { display: inline-block; transform: scaleX(-1); font-style: normal; }
.title { font-family: var(--caps); font-weight: 500; letter-spacing: 0.06em; line-height: 1; }
.wordmark { font-family: var(--serif); font-style: italic; font-weight: 500; text-decoration: none; }
.wordmark b { font-family: var(--caps); font-style: normal; font-weight: 500; font-size: 0.82em; letter-spacing: 0.08em; }
.label { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; }

.stanza { margin: 0 0 1.05em; }
.stanza:last-child { margin-bottom: 0; }
.epigraph { font-style: italic; font-size: 0.85em; margin: 0 0 1.2em; text-align: right; opacity: 0.75; }

.yt { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; overflow: hidden; background: #000; }
.yt img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter 0.4s, transform 0.6s; }
.yt:hover img { filter: grayscale(0); transform: scale(1.03); }
.yt-play { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%; background: rgba(18, 17, 16, 0.78); border: 1px solid var(--gold); }
.yt-play::after { content: ""; position: absolute; left: 26px; top: 21px; border-left: 16px solid var(--gold); border-top: 11px solid transparent; border-bottom: 11px solid transparent; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}