/* Using your website — Everlastings by Emaline walkthrough.
   Palette and display face are lifted from the Everlastings brand so the page feels
   like her store. The one dark surface on the page is the theater band; everything
   else lives in the cream. */

:root {
  --plum:        #4A1942;
  --plum-deep:   #2A0F26;   /* the theater. plum taken to near-black, never neutral black */
  --plum-soft:   #6E3A66;
  --lavender:    #B8A5C8;
  --cream:       #FFF8E7;
  --cream-warm:  #F6EDD8;
  --gold:        #D4AF7A;
  --ink:         #1A1A1A;
  --ink-soft:    #5A5A5A;
  --ink-mute:    #8A8A8A;

  --display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --measure: 68ch;
  --shell: 1280px;
  --ease: cubic-bezier(.2, .6, .2, 1);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

a { color: var(--plum); text-decoration-thickness: 1px; text-underline-offset: 3px; }

:focus-visible {
  outline: 2px solid var(--plum);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--plum); color: var(--cream);
  padding: 10px 16px; z-index: 20;
}
.skip:focus { left: 16px; top: 16px; }

/* ── Masthead ───────────────────────────────────────────────────────── */

.masthead {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(48px, 8vw, 96px) 24px clamp(28px, 4vw, 44px);
}

.eyebrow {
  margin: 0 0 18px;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--plum-soft);
  font-weight: 600;
}

.masthead__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(3rem, 8vw, 5.5rem);
  line-height: .98;
  letter-spacing: -.015em;
  color: var(--plum);
}

.masthead__sub {
  margin: 20px 0 0;
  max-width: 46ch;
  font-size: 1.0625rem;
  color: var(--ink-soft);
}

/* ── Theater ────────────────────────────────────────────────────────── */

.theater {
  background: var(--plum-deep);
  padding: clamp(24px, 3vw, 40px) 24px clamp(18px, 2vw, 26px);
}

.theater__inner {
  max-width: var(--shell);
  margin: 0 auto;
}

.stage {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #1B0916;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 24px 70px -30px rgba(0,0,0,.9);
}

.stage__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #1B0916;
}

.stage__caption-meta {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 16px 2px 0;
  font-size: 13px;
  color: var(--lavender);
}
.stage__caption-meta .mono { color: var(--gold); letter-spacing: .1em; }

/* ── The spoken line — the signature ────────────────────────────────── */

.spoken {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(36px, 5vw, 60px) 24px clamp(28px, 4vw, 40px);
}

.spoken__line {
  margin: 0;
  min-height: 3.4em;                 /* holds its height so the page never jolts on a cue change */
  max-width: var(--measure);
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.9vw, 2.25rem);
  line-height: 1.34;
  color: var(--plum);
  transition: opacity 140ms var(--ease);
}
.spoken__line[data-fading="1"] { opacity: 0; }

/* the placeholder before playback, and the italic hush of a silent stretch */
.spoken__rest {
  font-style: italic;
  color: var(--ink-mute);
  font-size: .82em;
}

/* ── Transcript ─────────────────────────────────────────────────────── */

.transcript__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  padding: 9px 16px 9px 14px;
  background: transparent;
  border: 1px solid rgba(74, 25, 66, .28);
  border-radius: 999px;
  color: var(--plum);
  font: inherit;
  font-size: 13px;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background 160ms var(--ease), border-color 160ms var(--ease);
}
.transcript__toggle:hover { background: rgba(74, 25, 66, .06); border-color: rgba(74, 25, 66, .5); }
.chev { width: 14px; height: 14px; transition: transform 200ms var(--ease); }
.transcript__toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }

.transcript {
  margin-top: 22px;
  max-height: 340px;
  overflow-y: auto;
  border-top: 1px solid rgba(74, 25, 66, .14);
  border-bottom: 1px solid rgba(74, 25, 66, .14);
  scrollbar-width: thin;
}
.transcript[hidden] { display: none; }

.transcript__list {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  max-width: var(--measure);
}

.cue {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 14px;
  width: 100%;
  padding: 9px 12px 9px 10px;
  background: none;
  border: 0;
  border-left: 2px solid transparent;
  text-align: left;
  font: inherit;
  font-size: .9375rem;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 140ms var(--ease), border-color 140ms var(--ease), background 140ms var(--ease);
}
.cue:hover { background: rgba(74, 25, 66, .045); color: var(--ink); }
.cue__t { font-family: var(--mono); font-size: 12px; color: var(--ink-mute); padding-top: 3px; }

.cue[aria-current="true"] {
  border-left-color: var(--gold);
  background: rgba(212, 175, 122, .12);
  color: var(--plum);
  font-weight: 500;
}
.cue[aria-current="true"] .cue__t { color: var(--plum-soft); }

/* ── Episodes ───────────────────────────────────────────────────────── */

.episodes {
  border-top: 1px solid rgba(74, 25, 66, .14);
  background: var(--cream-warm);
}

.episodes__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(32px, 5vw, 56px) 24px clamp(48px, 7vw, 80px);
}

.arc { margin-top: 44px; }
.arc:first-child { margin-top: 0; }

.arc__head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(74, 25, 66, .18);
}
.arc__label {
  margin: 0;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--plum);
}
.arc__note { margin: 0; font-size: 13px; color: var(--ink-mute); font-style: italic; }

.row {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 16px 12px 16px 6px;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(74, 25, 66, .08);
  text-align: left;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  transition: background 160ms var(--ease), padding-left 160ms var(--ease);
}
.row:hover { background: rgba(255, 248, 231, .8); padding-left: 12px; }

/* left rule marks the one that's loaded */
.row::before {
  content: "";
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 2px;
  background: var(--plum);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 220ms var(--ease);
}
.row[aria-current="true"]::before { transform: scaleY(1); }
.row[aria-current="true"] { background: rgba(255, 248, 231, .95); padding-left: 12px; }

.row__n {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--ink-mute);
  transition: color 160ms var(--ease);
}
.row[aria-current="true"] .row__n { color: var(--gold); }
.row__n[data-watched="1"]::after { content: " ●"; color: var(--gold); font-size: 8px; vertical-align: middle; }

.row__body { min-width: 0; }
.row__title {
  display: block;
  font-family: var(--display);
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--plum);
}
.row__blurb {
  display: block;
  margin-top: 3px;
  font-size: .875rem;
  color: var(--ink-soft);
}

.row__meta { display: flex; align-items: center; gap: 12px; }
.row__dur { font-family: var(--mono); font-size: 12px; color: var(--ink-mute); }

/* three bars that only move while this film is actually playing */
.eq { display: flex; align-items: flex-end; gap: 2px; width: 12px; height: 12px; opacity: 0; transition: opacity 160ms var(--ease); }
.row[data-playing="1"] .eq { opacity: 1; }
.eq span { flex: 1; background: var(--gold); height: 30%; }
.row[data-playing="1"] .eq span { animation: eq 900ms var(--ease) infinite; }
.eq span:nth-child(2) { animation-delay: 150ms; }
.eq span:nth-child(3) { animation-delay: 300ms; }
@keyframes eq { 0%, 100% { height: 25%; } 50% { height: 100%; } }

/* how far into this one you got, kept between visits */
.row__progress {
  position: absolute;
  left: 0; bottom: 0;
  height: 1px;
  background: var(--gold);
  width: 0;
  transition: width 300ms var(--ease);
}

/* ── Colophon ───────────────────────────────────────────────────────── */

.colophon {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 40px 24px 64px;
  font-size: 13px;
  color: var(--ink-mute);
}
.colophon p { margin: 0 0 4px; }
.colophon__note { font-style: italic; }

/* ── Small screens ──────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .theater { padding-left: 0; padding-right: 0; }
  .stage { border-radius: 0; }
  .stage__caption-meta { padding: 0 20px; }
  .row { grid-template-columns: 34px 1fr; gap: 12px; }
  .row__meta {
    grid-column: 2;
    margin-top: 6px;
  }
  .cue { grid-template-columns: 48px 1fr; gap: 10px; }
}

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