/* ------------------------------------------------------------------
   The Decade of Flowers: shared reading system.
   Every poem uses the same grammar (a cover, then one stanza per
   frame, the same type, the same quiet HUD). Each poem brings its own
   world on top: one accent colour, one background, its own effects.
   ------------------------------------------------------------------ */

:root {
  --bg: #0b0b0a;
  --ink: #ebe8e1;
  --ink-dim: rgba(235, 232, 225, 0.56);
  --ink-faint: rgba(235, 232, 225, 0.22);
  --accent: #f2c230;
  --serif: "EB Garamond", Garamond, "Iowan Old Style", Georgia, serif;
  --display: Didot, "Bodoni Moda", "Bodoni 72", "Playfair Display", serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --gutter: clamp(22px, 6vw, 56px);
  --verse: clamp(18px, 4.75vw, 23px);
}

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

html {
  background: var(--bg);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  font-family: var(--serif);
  font-size: var(--verse);
  line-height: 1.55;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; }

::selection { background: var(--accent); color: #111; }

/* ---------- frames: one stanza per screen ---------- */

html.reading { scroll-snap-type: y mandatory; }

.frame {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 88px var(--gutter) 96px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.stanza {
  width: 100%;
  max-width: 31em;
  margin: 0;
}

/* each line hangs: when a long line wraps on a phone, the wrap is
   indented so the poem's own line breaks stay readable */
.l {
  display: block;
  padding-left: 1.3em;
  text-indent: -1.3em;
}

.gap { display: block; height: 1.1em; }

.it { font-weight: 600; color: var(--accent); }

/* ---------- reveal (only when JS runs; text is visible otherwise) ---------- */

.js .l,
.js .reveal {
  opacity: 0;
  transform: translateY(0.28em);
  transition:
    opacity 0.9s ease,
    transform 1.1s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--d, 0s);
}

.js .on .l,
.js .on .reveal {
  opacity: 1;
  transform: none;
}

/* ---------- HUD ---------- */

.hud {
  position: fixed;
  z-index: 40;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: max(14px, env(safe-area-inset-top)) var(--gutter) 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  pointer-events: none;
}

.hud a {
  pointer-events: auto;
  text-decoration: none;
  padding: 10px 0 10px 14px;
  margin: -10px 0;
}

.hud a:hover,
.hud a:focus-visible { color: var(--ink); }

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 12px;
  top: 12px;
  z-index: 100;
  background: var(--ink);
  color: var(--bg);
  padding: 8px 12px;
}

:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 4px;
}

/* ---------- reduced motion: keep every word, drop the movement ---------- */

@media (prefers-reduced-motion: reduce) {
  html.reading { scroll-snap-type: none; }
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
    transition-delay: 0s !important;
  }
}