/* ===========================================================================
   STORY — the long version.

   The front page is panels: short bursts, heavy art. This page is prose, so
   it needs the one thing the rest of the site deliberately avoids — a calm,
   measured reading column. Everything here exists to make ~1,300 words
   comfortable without dropping the comic frame around them.
   =========================================================================== */

/* --------------------------------------------------------------------------
   Title block
   -------------------------------------------------------------------------- */

.story-top {
  min-height: auto;
  padding-top: clamp(5rem, 14vh, 9rem);
  padding-bottom: clamp(2rem, 6vh, 4rem);
}

.story-title {
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 8vw, 5.4rem);
  line-height: .92;
  letter-spacing: .005em;
  color: #fff;
  margin: .6rem 0 0;
  text-shadow:
    calc(var(--split) * -2px) 0 0 var(--red),
    calc(var(--split) *  2px) 0 0 var(--cyan),
    5px 5px 0 #000;
}
.story-title u {
  text-decoration: none;
  color: var(--yellow);
  -webkit-text-stroke: 2px #000;
  paint-order: stroke fill;
}
.story-title small {
  display: block;
  margin-top: .5rem;
  font-family: var(--f-comic);
  font-size: clamp(.95rem, 2.4vw, 1.5rem);
  letter-spacing: .09em;
  color: var(--cyan);
  text-shadow: 2px 2px 0 #000;
}

.story-lede {
  position: relative;
  isolation: isolate;
  margin: clamp(1.2rem, 3vw, 1.8rem) 0 0;
  max-width: 56ch;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.65;
  color: #dfe4ff;
}
.story-lede::before {
  content: '';
  position: absolute;
  inset: -.35rem -1.2rem -.8rem;
  z-index: -1;
  background: rgba(8, 6, 22, .7);
  filter: blur(11px);
  border-radius: 10px;
}

.story-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  margin: clamp(1rem, 2.5vw, 1.5rem) 0 0;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.story-meta-sep { color: var(--grade-a); }
.story-meta a { color: var(--cyan); text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   The reading column
   -------------------------------------------------------------------------- */

.prose {
  position: relative;
  isolation: isolate;
  max-width: 62ch;
  margin-top: clamp(1rem, 2.5vw, 1.6rem);
}

/* The city drawn behind these chapters is bright enough in places to eat body
   copy. The front page never hits this because its text lives inside panels;
   here it sits on the art directly. A blurred scrim keeps the skyline visible
   while guaranteeing the column stays readable over the lit windows. */
.prose::before {
  content: '';
  position: absolute;
  inset: -.35rem -1.4rem -1rem;
  z-index: -1;
  background: rgba(8, 6, 22, .74);
  filter: blur(11px);
  border-radius: 10px;
}
.prose > p {
  margin: 0 0 1.05em;
  font-size: clamp(1rem, 1.35vw, 1.1rem);
  line-height: 1.72;
  color: #d7dcf7;
}
.prose > p:last-child { margin-bottom: 0; }
.prose strong { color: #fff; font-weight: 600; }
.prose em { color: var(--cyan); font-style: italic; }

.prose .panel { margin-bottom: 1.4em; }

/* Chips sitting inside the prose flow rather than under a card. */
.beats-inline {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: 0 0 1.4em;
}

/* --------------------------------------------------------------------------
   Pull quote — the one place the page raises its voice.
   -------------------------------------------------------------------------- */

.pull {
  margin: 1.6em 0;
  padding: .1rem 0 .1rem 1.15rem;
  border-left: var(--border-lg) solid var(--grade-a);
  font-family: var(--f-comic);
  font-size: clamp(1.15rem, 2.6vw, 1.75rem);
  line-height: 1.32;
  letter-spacing: .02em;
  color: #fff;
}

/* The payoff line at the end of the lesson. */
.story-punch {
  font-family: var(--f-comic);
  font-size: clamp(1.2rem, 3vw, 2rem) !important;
  line-height: 1.25 !important;
  letter-spacing: .03em;
  color: var(--yellow) !important;
  -webkit-text-stroke: 1.5px #000;
  paint-order: stroke fill;
}

/* --------------------------------------------------------------------------
   Sign-off
   -------------------------------------------------------------------------- */

.story-end {
  margin-top: clamp(2rem, 6vw, 3.4rem);
  padding-top: clamp(1.2rem, 3vw, 2rem);
  border-top: var(--border) solid rgba(255, 255, 255, .16);
}
.story-end-kicker {
  margin: 0 0 1rem;
  font-family: var(--f-comic);
  font-size: clamp(1.1rem, 3vw, 1.7rem);
  letter-spacing: .1em;
  color: var(--grade-b);
  text-shadow: 2px 2px 0 #000;
}

/* The splash on this page carries the slot line, so give it room to breathe. */
.story-top ~ .chapter .splash .slots { justify-content: center; margin-top: 1.1rem; }

@media (max-width: 760px) {
  .story-top { padding-top: clamp(4rem, 12vh, 6rem); }
  .prose > p { font-size: 1rem; line-height: 1.7; }
  .pull { margin: 1.3em 0; }
}

/* --------------------------------------------------------------------------
   Stacking: .prose is positioned, so it paints above the plain .ch-head that
   precedes it. Without this the scrim's soft edge eats the lower line of a
   two-line chapter title.
   -------------------------------------------------------------------------- */

.chapter .ch-head,
.chapter .lesson,
.chapter .splash { position: relative; z-index: 1; }