@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;0,9..144,600;1,9..144,400&family=IBM+Plex+Mono:ital,wght@0,400;0,500;1,400&family=Inter:wght@400;500;600&display=swap');

:root{
  --ink:#0d0d0c;
  --paper:#f6f3ee;
  --paper-dim:#eae5db;
  --graphite:#54514a;
  --fog:#b9b4a8;
  --crayon:#d4381f;
  --crayon-dim:#a92d18;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Mono', monospace;
  -webkit-font-smoothing:antialiased;
}

::selection{ background:var(--crayon); color:var(--paper); }
a{ color:inherit; }

/* ---------- HERO (home) ---------- */
.hero{
  min-height:100svh;
  background:var(--ink);
  color:var(--paper);
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:8vh 6vw;
  position:relative;
  overflow:hidden;
}
.hero-eyebrow{
  font-size:.7rem;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--fog);
  margin-bottom:2.2rem;
}
.type-line{
  font-family:'IBM Plex Mono', monospace;
  font-size:clamp(.95rem,1.6vw,1.25rem);
  color:#d9d5c9;
  max-width:46ch;
  line-height:1.65;
  min-height:6.5em;
  white-space:pre-wrap;
}
.type-line .cursor{
  display:inline-block;
  width:.55em;
  height:1.05em;
  background:var(--crayon);
  vertical-align:text-bottom;
  margin-left:2px;
  animation:blink 1s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity:0; } }

.hero-title{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-style:italic;
  font-size:clamp(3.2rem,11vw,8rem);
  line-height:.92;
  margin:1.4rem 0 0 0;
  opacity:0;
  transform:translateY(14px);
  transition:opacity 1.1s ease, transform 1.1s ease;
}
.hero-title.show{ opacity:1; transform:translateY(0); }
.hero-title .scribble{ position:relative; color:var(--crayon); font-style:italic; }

.hero-sub{
  font-family:'Inter', sans-serif;
  font-size:.85rem;
  color:var(--fog);
  margin-top:1.6rem;
  max-width:38ch;
  line-height:1.6;
  opacity:0;
  transition:opacity 1s ease 1.2s;
}
.hero-sub.show{ opacity:1; }

.scroll-cue{
  position:absolute;
  bottom:6vh;
  left:6vw;
  font-family:'Inter', sans-serif;
  font-size:.7rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--graphite);
}
.scroll-cue::after{
  content:"";
  display:block;
  width:1px;
  height:34px;
  background:var(--fog);
  margin-top:.6rem;
  animation:drop 1.8s ease-in-out infinite;
}
@keyframes drop{
  0%{ transform:scaleY(0); transform-origin:top; }
  50%{ transform:scaleY(1); transform-origin:top; }
  50.01%{ transform-origin:bottom; }
  100%{ transform:scaleY(0); transform-origin:bottom; }
}

/* ---------- CHAPTER PAGE HERO ---------- */
.chapter-hero{
  padding:14vh 6vw 6vh;
  max-width:920px;
  margin:0 auto;
}
.chapter-title{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-style:italic;
  font-size:clamp(2.6rem,7vw,4.5rem);
  line-height:1;
  margin:.4rem 0 1rem;
  color:var(--ink);
}
.chapter-summary{
  font-family:'Fraunces', serif;
  font-weight:300;
  font-size:clamp(1.1rem,2vw,1.4rem);
  line-height:1.6;
  max-width:38ch;
  color:var(--graphite);
}

/* ---------- STORY (full chapter prose) ---------- */
.story{
  padding:2vh 6vw 8vh;
  max-width:920px;
  margin:0 auto;
}
.story-body{
  max-width:62ch;
  font-family:'Fraunces', serif;
  font-weight:300;
  font-size:clamp(1.1rem,1.9vw,1.3rem);
  line-height:1.75;
  color:var(--ink);
}
.story-body p{ margin:0 0 1.5rem 0; }
.story-body p:first-of-type::first-letter{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-style:italic;
  font-size:3.4em;
  float:left;
  line-height:.8;
  padding-right:.1em;
  color:var(--crayon);
}
.story-body em{ color:var(--graphite); font-style:italic; }

.story-pending{
  padding:2vh 6vw 6vh;
  max-width:920px;
  margin:0 auto;
}
.story-pending p{
  font-family:'Inter', sans-serif;
  font-size:.95rem;
  color:var(--graphite);
  border-left:2px solid var(--fog);
  padding-left:1rem;
}

.also-video{
  padding:2vh 6vw 9vh;
  max-width:920px;
  margin:0 auto;
}
.also-video-line{
  font-family:'Inter', sans-serif;
  font-size:.85rem;
  color:var(--graphite);
}
.also-video-line a{
  color:var(--crayon-dim);
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ---------- SECTION SHARED ---------- */
section{
  padding:9vh 6vw;
  max-width:920px;
  margin:0 auto;
}
.kicker{
  font-family:'Inter', sans-serif;
  font-size:.7rem;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--crayon-dim);
  margin-bottom:1rem;
}
h2{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size:clamp(1.8rem,3.6vw,2.6rem);
  margin:0 0 1.6rem 0;
  line-height:1.15;
}

/* ---------- PREMISE ---------- */
.premise p{
  font-family:'Fraunces', serif;
  font-weight:300;
  font-size:clamp(1.15rem,2.1vw,1.5rem);
  line-height:1.6;
  color:var(--ink);
  max-width:40ch;
}

/* ---------- TRANSCRIPT / VERSE ---------- */
.verse{
  background:var(--ink);
  color:var(--paper);
}
.verse-inner{
  padding:9vh 6vw;
  max-width:920px;
  margin:0 auto;
}
.verse .kicker{ color:var(--crayon); }
.verse-lines{
  display:flex;
  flex-direction:column;
  gap:1.3rem;
}
.verse-line{
  display:grid;
  grid-template-columns:64px 1fr;
  gap:1.4rem;
  align-items:baseline;
  border-top:1px solid rgba(246,243,238,.12);
  padding-top:1.3rem;
}
.verse-line:first-child{ border-top:none; padding-top:0; }
.verse-time{
  font-family:'IBM Plex Mono', monospace;
  font-size:.75rem;
  color:var(--fog);
}
.verse-text{
  font-family:'IBM Plex Mono', monospace;
  font-size:clamp(.95rem,1.6vw,1.1rem);
  line-height:1.75;
  color:#e7e3d8;
}
.verse-text .mark{
  background:linear-gradient(180deg, transparent 62%, rgba(212,56,31,.55) 62%);
  color:var(--paper);
  padding:0 .05em;
}

/* ---------- WATCH ---------- */
.watch-frame{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:var(--paper-dim);
  border:1px solid var(--fog);
}
.watch-frame iframe{ width:100%; height:100%; border:0; display:block; }
.watch-caption{
  font-family:'Inter', sans-serif;
  font-size:.78rem;
  color:var(--graphite);
  margin-top:1rem;
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}
.watch-caption a{
  color:var(--crayon-dim);
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ---------- CONTENTS / TOC ---------- */
.toc-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--fog); }
.toc-item{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  padding:1.1rem 0;
  border-bottom:1px solid var(--fog);
  font-family:'Inter', sans-serif;
}
.toc-item .num{
  font-family:'Fraunces', serif;
  font-style:italic;
  font-size:1.1rem;
  color:var(--crayon-dim);
  min-width:2.4rem;
}
.toc-item .label{
  flex:1;
  font-size:.95rem;
  text-decoration:none;
}
.toc-item .label:hover{ text-decoration:underline; text-underline-offset:3px; }
.toc-item .status{
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--fog);
}
.toc-item.active .status{ color:var(--crayon-dim); }
.toc-item.locked{ color:var(--graphite); }

/* ---------- BACK LINK (chapter pages) ---------- */
.back-link a{
  font-family:'Inter', sans-serif;
  font-size:.85rem;
  color:var(--crayon-dim);
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ---------- FOOTER ---------- */
.site-footer{
  padding:7vh 6vw 5vh;
  max-width:920px;
  margin:0 auto;
  border-top:1px solid var(--fog);
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:1.5rem;
}
.site-footer .sign{
  font-family:'Fraunces', serif;
  font-style:italic;
  font-size:1.1rem;
  color:var(--ink);
}
.site-footer .sign a{ color:var(--crayon-dim); text-decoration:underline; text-underline-offset:3px; }
.site-footer .meta{
  font-family:'Inter', sans-serif;
  font-size:.72rem;
  color:var(--graphite);
  text-align:right;
  line-height:1.6;
}
.site-footer .meta a{ color:var(--graphite); text-decoration:underline; text-underline-offset:2px; }

@media (max-width:600px){
  .verse-line{ grid-template-columns:44px 1fr; gap:.9rem; }
  .site-footer{ flex-direction:column; align-items:flex-start; }
  .site-footer .meta{ text-align:left; }
}

@media (prefers-reduced-motion: reduce){
  .hero-title, .hero-sub{ transition:none; opacity:1; transform:none; }
  .scroll-cue::after{ animation:none; }
  .type-line .cursor{ animation:none; }
}