:root {
  --paper:      #faf9f5;   /* Anthropic ivory — page */
  --paper-2:    #f0eee6;   /* warm cream — edges */
  --slate:      #181613;   /* near-black warm ink — title/text */
  --ghost:      #c3b9a9;   /* not yet sung, faint warm gray */
  --ember:      #8c7660;   /* already-sung, warm clay */
  --hot:        #c5613a;   /* deepened Claude coral — UI accents */
  --hot-2:      #d97757;
  --marker:     #e2a374;   /* highlighter marker behind the sung word */
  --violet:     #b07a55;   /* warm tan accent (UI) */
  --serif: "Newsreader", Georgia, serif;
  --grotesk: "Hanken Grotesk", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--paper);
  color: var(--slate);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
}

/* ---- the essay, rendered as the page (background under the modal) ---- */
.article-top {
  position: sticky; top: 0; z-index: 1;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.1rem clamp(1.2rem, 5vw, 3rem);
  font-family: var(--grotesk); font-size: .95rem; color: var(--slate);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(6px);
}
.article {
  position: relative; z-index: 0;
  max-width: 44rem;
  margin: 0 auto;
  padding: 3rem clamp(1.2rem, 5vw, 2rem) 7rem;
  font-size: 1.05rem; line-height: 1.72;
  color: #2b2824;
}
.article h1 {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(2.2rem, 5vw, 3.2rem); line-height: 1.08;
  letter-spacing: -.01em; margin: 0 0 1rem;
}
.article .a-author {
  font-family: var(--grotesk); font-weight: 600; font-size: 1rem;
  color: var(--slate); margin: 0 0 .25rem;
}
.article .a-date {
  font-family: var(--grotesk); font-size: .85rem; color: var(--ember);
  margin: 0 0 2.4rem;
}
.article h2 {
  font-family: var(--serif); font-weight: 600;
  font-size: 1.5rem; margin: 2.6rem 0 1rem;
}
.article p { margin: 0 0 1.15rem; }

/* each essay word is its own span so the highlight can hop across the body
   text in read-along mode. inert until reading, then clickable to seek. */
.aw {
  border-radius: 4px;
  transition: background-color .12s ease, box-shadow .12s ease, color .12s ease;
}
body.reading .aw { cursor: pointer; }
.aw.current {
  color: var(--slate);
  background-color: var(--marker);
  box-shadow: 0 0 0 3px var(--marker);   /* bleed the marker past the word */
}

/* ---- karaoke modal floating over the essay ---- */
.stage {
  position: fixed; inset: 0; z-index: 10;
  display: flex; flex-direction: column;
  background: color-mix(in srgb, var(--paper) 52%, transparent);
  -webkit-backdrop-filter: blur(5px) saturate(1.04);
  backdrop-filter: blur(5px) saturate(1.04);
  cursor: default;
}

/* ---- atmosphere ---- */
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: .04; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.spotlight {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(60% 50% at 50% 18%, rgba(217,119,87,.10), transparent 70%);
  animation: breathe 9s ease-in-out infinite;
}
@keyframes breathe { 0%,100%{opacity:.7} 50%{opacity:1} }

/* ---- header ---- */
/* On the landing screen the title sits in the vertical middle; once the song
   starts it slides up to a compact bar so the lyric stage takes the center. */
.stage-head {
  position: relative; z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: clamp(1.6rem, 5vh, 3.5rem) 6vw;
  transition: padding .5s ease;
}
body.started .stage-head { display: none; }   /* once playing, the essay behind shows the title/author */
.lyrics { flex: 0; }                 /* collapsed on the landing screen */
body.started .lyrics { flex: 1; }    /* takes the center once playing */
.kicker {
  font-family: var(--grotesk);
  text-transform: lowercase;
  letter-spacing: .35em;
  font-size: .72rem;
  color: var(--violet);
  margin: 0 0 1.4rem;
  opacity: .8;
}
.stage-head h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.1rem, 6.5vw, 4.4rem);
  line-height: 1.02;
  margin: 0;
  letter-spacing: -.025em;
  text-wrap: balance;
  color: var(--slate);
}
.title-credit {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.35rem, 3.6vw, 2rem);
  letter-spacing: .01em;
  color: var(--ember); margin: clamp(1.4rem, 3.5vh, 2.6rem) auto 0;
}
.byline {                                   /* emo subheader — larger to draw the eye */
  font-family: var(--grotesk); font-style: italic; font-weight: 700;
  font-size: clamp(1.3rem, 3.4vw, 1.85rem);
  letter-spacing: .005em;
  color: #1d1812; opacity: 1; margin: 1.1rem auto 0;
  line-height: 1.5;
  text-shadow: 0 1px 2px rgba(250,249,245,.95), 0 0 8px rgba(250,249,245,.8);
}
.title-credit { text-shadow: 0 1px 2px rgba(250,249,245,.9), 0 0 6px rgba(250,249,245,.7); }

/* info-circle, top-right, links to withkate.ai */
.info-link {
  position: fixed; top: 1rem; right: 1rem; z-index: 6;
  line-height: 0; color: var(--slate); text-decoration: none;
  transition: transform .15s ease, color .2s ease;
}
.info-link:hover { transform: scale(1.08); color: var(--hot); }
.byline .sep {
  display: inline-block;
  color: var(--hot);
  font-size: .5em;
  vertical-align: middle;
  margin: 0 .85em;
  transform: translateY(-.06em);
}
.byline a {
  color: var(--hot); text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.byline a:hover { color: var(--hot-2); }
/* on small screens let the byline wrap instead of overflowing the viewport */
@media (max-width: 560px) {
  .byline { white-space: normal; max-width: 32ch; font-size: .74rem; line-height: 1.7; }
}

/* ---- landing vs playing balance + responsive sizing ---- */
/* (title quotes are set as real text in app.js so they always render) */

/* landing: the title is the hero, larger */
body:not(.started) .stage-head h1 { font-size: clamp(3.4rem, 10.5vw, 7.5rem); }
/* landing: collapse the lyric stage so the title block centers in the screen */
body:not(.started) .lyrics { display: none; }

/* big landing play button (hidden once the song starts) */
.big-play {
  margin: clamp(2rem, 5vh, 3.5rem) auto 0;
  font-family: var(--serif);
  font-size: 1rem; font-weight: 600;
  letter-spacing: .25em; text-transform: lowercase;
  color: #fff; background: var(--hot);
  border: none; border-radius: 999px;
  padding: .85rem 2.8rem; cursor: pointer;
  box-shadow: 0 6px 22px rgba(197,97,58,.3);
  transition: transform .12s ease, background-color .2s ease, box-shadow .2s ease;
}
.big-play:hover { transform: scale(1.05); background: var(--hot-2); box-shadow: 0 8px 28px rgba(197,97,58,.42); }
.big-play:active { transform: scale(.97); }
body.started .big-play { display: none; }

/* large decorative quote marks framing the lyrics — classic Times curly
   quotes (Anthropic's Tiempos serif is a Times revival) */
.quote-mark {
  position: fixed; z-index: 1; pointer-events: none;
  font-family: "Times New Roman", Times, serif;
  font-weight: 700;
  font-size: clamp(6rem, 17vw, 13rem);
  line-height: .6;
  color: var(--slate);
  opacity: 0;
  transition: opacity .6s ease;
}
body.started .quote-mark { opacity: 1; }
/* quotes live INSIDE .lyrics and are positioned to its box, so the centered
   lines wrapper always sits exactly between them on any screen */
.quote-mark { position: absolute; }
.q-open  { top: 9%;  left: 3%; }
.q-close { bottom: 9%; right: 3%; }

/* ---- lyrics stage: two lines at a time, centered between the quotes ---- */
.lyrics {
  position: relative; z-index: 2;
  flex: 1; min-height: 0;          /* fill the space between header and player */
  display: flex;
  align-items: center;             /* center the lines wrapper vertically */
  justify-content: center;
  padding: 2vh 6vw;
  font-size: clamp(2.9rem, 7.8vw, 5.2rem);
  font-weight: 400;
  line-height: 1.2;
}
#lyric-lines {
  display: flex; flex-direction: column; gap: 0;
  align-items: center; text-align: center;
  max-width: 100%;
  transition: opacity .16s ease;
}
.lyrics .line {
  max-width: 100%;
  text-align: center;
}
#lyric-lines.leaving { opacity: 0; }   /* fade old pair out before swapping */
@keyframes lineEnter { from { opacity: 0; } to { opacity: 1; } }
#lyric-lines.line-enter { animation: lineEnter .22s ease both; }
.loading { color: var(--ghost); font-style: italic; }

/* words are hidden (but hold their space, so nothing reflows) until sung,
   then simply appear. the word being sung wears the orange highlighter. */
.w {
  display: inline-block;
  color: var(--slate);
  opacity: 0;
  border-radius: 4px;
  transition: opacity .14s ease, background-color .1s ease, box-shadow .1s ease;
  cursor: pointer;
}
.w.shown { opacity: 1; }
.w.current {
  color: var(--slate);
  background-color: var(--marker);
  box-shadow: 0 0 0 3px var(--marker);  /* bleed the marker past the word */
}

/* edit mode selection */
body.editing .w.selected {
  outline: 2px dashed var(--violet);
  outline-offset: 3px;
  border-radius: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .w { transition: opacity .25s ease, color .25s ease; transform: none; filter: none; }
  .lyrics.line-enter { animation: none; }
}

/* ---- player bar ---- */
.player {
  flex: none; z-index: 5;
  display: flex; align-items: center; gap: 1rem;
  padding: .9rem clamp(1rem, 4vw, 2.5rem);
  padding-bottom: max(.9rem, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(250,249,245,0) 0%, rgba(250,249,245,.85) 30%, rgba(245,243,236,.98) 100%);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(176,122,85,.22);
}
.play {
  flex: none;
  width: 52px; height: 52px; border-radius: 50%;
  border: none; cursor: pointer;
  background: radial-gradient(circle at 35% 30%, var(--hot-2), var(--hot));
  color: #fff; font-size: 1.05rem;
  display: grid; place-items: center;
  box-shadow: 0 0 24px rgba(217,119,87,.5);
  transition: transform .12s ease, box-shadow .2s ease;
}
.play:hover { transform: scale(1.06); box-shadow: 0 0 34px rgba(217,119,87,.7); }
.play:active { transform: scale(.96); }
.play-icon { transform: translateX(1px); }
.play.playing .play-icon { transform: none; }

.scrub { flex: 1; display: flex; flex-direction: column; gap: .4rem; }
.scrub-track {
  position: relative;
  height: 6px; border-radius: 6px; cursor: pointer;
  background: rgba(204,155,122,.18);
  touch-action: none;             /* let us own drag gestures on touch */
}
/* invisible padded hit area so the thin bar is easy to grab */
.scrub-track::before {
  content: ""; position: absolute; left: 0; right: 0;
  top: -11px; bottom: -11px;
}
.scrub-fill {
  height: 100%; width: 0;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--marker), var(--hot));
}
.scrub-thumb {
  position: absolute; top: 50%; left: 0;
  width: 14px; height: 14px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--hot);
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
  pointer-events: none;
  transition: transform .08s ease;
}
.scrub-track:hover .scrub-thumb,
.scrub-track.dragging .scrub-thumb { transform: translate(-50%, -50%) scale(1.25); }
.scrub-track.dragging { cursor: grabbing; }
.scrub-track:focus-visible { outline: 2px solid var(--hot); outline-offset: 4px; }
.times {
  display: flex; justify-content: space-between;
  font-family: var(--grotesk); font-size: .7rem;
  color: var(--ember); letter-spacing: .05em;
}

.track-picker { display: flex; gap: .5rem; flex: none; }
.track-picker button {
  font-family: var(--grotesk); font-size: .72rem;
  background: transparent; color: var(--ember);
  border: 1px solid rgba(204,155,122,.2); border-radius: 999px;
  padding: .3rem .8rem; cursor: pointer; transition: all .15s ease;
}
.track-picker button[aria-current="true"] { color: var(--hot); border-color: var(--hot); }

.edit-hint {
  position: fixed; z-index: 6; left: 50%; bottom: 92px;
  transform: translateX(-50%);
  font-family: var(--grotesk); font-size: .74rem; letter-spacing: .03em;
  color: var(--violet);
  background: rgba(20,20,19,.92); border: 1px solid rgba(204,155,122,.25);
  padding: .5rem .9rem; border-radius: 999px; white-space: nowrap;
}
.edit-hint kbd {
  font-family: var(--grotesk); background: rgba(204,155,122,.18);
  border-radius: 4px; padding: .05em .4em; margin: 0 .1em;
}

/* ---- read-along mode ---- */
/* The essay is only ever blurred by the stage's backdrop-filter. Reading mode
   drops that filter and lets pointer events fall through to the article, so it
   becomes fully legible and the highlight runs in the body text instead of the
   karaoke modal. The player bar stays live for play/pause/seek. */
body.reading .stage {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  pointer-events: none;
}
body.reading .lyrics,
body.reading .quote-mark { display: none; }
/* hiding .lyrics removes the flex:1 spacer that pushed the player down, so pin
   the player to the bottom explicitly — otherwise it collapses to the top-left
   and lands under the "back to the song" pill. */
body.reading .player { pointer-events: auto; margin-top: auto; }
/* the stage goes pointer-events:none in reading mode (so essay clicks pass
   through); re-enable the info link explicitly or it dies while reading. */
body.reading .info-link { pointer-events: auto; }

/* mode-toggle pills */
.read-toggle, .read-exit {
  position: fixed; z-index: 20;
  font-family: var(--grotesk); font-weight: 600;
  font-size: .8rem; letter-spacing: .03em;
  border: none; border-radius: 999px;
  cursor: pointer;
  transition: transform .12s ease, background-color .2s ease, box-shadow .2s ease;
}
.read-toggle {                          /* enter: a quiet invite above the player */
  left: 50%; bottom: calc(86px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  color: #fff; background: var(--hot);
  padding: .55rem 1.3rem;
  box-shadow: 0 6px 22px rgba(197,97,58,.32);
}
.read-toggle:hover { transform: translateX(-50%) scale(1.05); background: var(--hot-2); }
.read-exit {                            /* exit: a quiet back button, top-left */
  top: 1rem; left: 1rem;
  color: rgba(255,255,255,.85); background: rgba(40,38,36,.5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: .5rem 1.1rem;
  box-shadow: 0 2px 10px rgba(0,0,0,.14);
}
.read-exit:hover { transform: scale(1.05); background: rgba(40,38,36,.7); }
/* show the right pill for the current mode (JS also flips the `hidden` attr) */
body.started:not(.reading) .read-toggle { display: inline-block; }
body.reading .read-exit { display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .spotlight { animation: none; }
  .aw { transition: background-color .2s ease; }
}

/* ---- mobile: bigger everything, quotes clear of the title ---- */
@media (max-width: 560px) {
  body:not(.started) .stage-head h1 { font-size: 14.5vw; line-height: 1.05; }
  body:not(.started) .stage-head { padding-left: 4vw; padding-right: 4vw; }
  .lyrics { font-size: 13.5vw; padding-left: 4vw; padding-right: 4vw; }
  .quote-mark { font-size: 22vw; }
}