:root {
  --bg: #fbfbfa;
  --fg: #1a1a1a;
  --muted: #6b6b6b;
  --accent: #c9822f;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16161a;
    --fg: #e8e6e3;
    --muted: #9a9a9a;
    --accent: #e0a866;
  }
}

* { box-sizing: border-box; }

html {
  font-size: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: clamp(1.05rem, 1rem + 0.25vw, 1.2rem);
  font-weight: 300;
  line-height: 1.65;
}

.wordmark {
  position: fixed;
  top: 1.25rem;
  left: 1.25rem;
  z-index: 1;
  color: var(--muted);
  font-size: 0.9rem;
  text-decoration: none;
}

.wordmark:hover { color: var(--accent); }

main { padding: 0 1.25rem; }

.poem {
  max-width: 34rem;
  /* A poem owns the whole screen and the next one stays off it: sections
     tile at 100vh, so centred text is always at least (100vh - its own
     height) away from its neighbour's. The arrow is the only cue that
     there is more. */
  min-height: 100vh;
  min-height: 100dvh;
  padding: 5vh 0;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.poem h2 {
  margin: 0 0 1.75rem;
  font-size: clamp(1.6rem, 1.3rem + 1.5vw, 2rem);
  font-weight: 600;
  line-height: 1.25;
}


.poem p {
  margin: 0 0 1.6rem;
  line-height: 1.8;
}

.poem p:last-of-type { margin-bottom: 0; }

.poem footer {
  margin-top: 2rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.hint {
  position: fixed;
  left: 50%;
  translate: -50%;
  z-index: 1;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  pointer-events: none;
}

.hint-down { bottom: 1.5rem; }

/* Hidden by default so browsers without scroll timelines never offer to
   scroll up from the top; the animation below is what reveals it. */
.hint-up { top: 1.5rem; opacity: 0; }

/* The whole scroll effect. Both @supports guards are load-bearing: without
   scroll-driven timelines these run as 0s animations and `both` would leave
   every poem stuck on the blurred keyframe and the hint stuck invisible. */
@supports (animation-timeline: view()) {
  .poem {
    animation: focus linear both;
    animation-timeline: view();
  }

  /* view() runs from entering the bottom of the viewport to leaving the
     top, so 50% is dead centre — the sharp point, whatever the poem's
     height. The plateau is wide because nothing snaps: the reader stops
     anywhere and should still land on a readable poem. */
  @keyframes focus {
    0%, 100% { filter: blur(5px); opacity: 0.35; }  /* ponytail: flat 5px, no per-breakpoint tuning */
    35%, 65% { filter: blur(0); opacity: 1; }
  }
}

@supports (animation-timeline: scroll()) {
  /* Each arrow bobs on its own clock and fades on the document's scroll.
     The ranges are fixed lengths, not percentages, so they behave the same
     with three poems as with thirty. */
  .hint-down {
    animation: bob-down 1.8s ease-in-out infinite, fade-out linear both;
    animation-timeline: auto, scroll(root block);
    animation-range: normal, calc(100% - 15vh) 100%;
  }

  .hint-up {
    animation: bob-up 1.8s ease-in-out infinite, fade-in linear both;
    animation-timeline: auto, scroll(root block);
    animation-range: normal, 0 15vh;
  }

  @keyframes bob-down {
    0%, 100% { translate: -50% 0; }
    50%      { translate: -50% 0.35rem; }
  }

  @keyframes bob-up {
    0%, 100% { translate: -50% 0; }
    50%      { translate: -50% -0.35rem; }
  }

  @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
  @keyframes fade-in  { from { opacity: 0; } to { opacity: 1; } }

  /* Keep the scroll-linked fades — they are opacity, not motion — and drop
     only the bobbing. */
  @media (prefers-reduced-motion: reduce) {
    .hint-down {
      animation: fade-out linear both;
      animation-timeline: scroll(root block);
      animation-range: calc(100% - 15vh) 100%;
    }

    .hint-up {
      animation: fade-in linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 15vh;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .poem { animation: none; }
}