/* ============================================================================
   reader.css — the Chapter One long-read (author layer).
   Owns ONLY site/chapter-one/index.html. Links theme.css read-only and does
   not redefine its tokens or shared component classes.

   Goal: a reading surface nicer than a Kindle — a title-page opening, a bookish
   serif at a comfortable measure, a gold reading-progress hairline, a header
   that gets out of the way, and the site's SNOW->ASH turn felt mid-chapter.

   Sections:
     1. stacking (content above the ambient snow, header above content)
     2. reading progress hairline
     3. author-layer header (hides on scroll-down, returns on scroll-up)
     4. reader tools (read-time + A- / A+)
     5. the title page (full-viewport opening)
     6. the chapter body (serif measure, drop cap, dialogue, scene ornaments)
     7. the ash turn (page deepens past ~75%)
     8. the closing section (cover + "one of seventeen" + signup + CTAs)
     9. responsive + reduced-motion
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. STACKING
   The shared snow canvas sits at --z-snow (40). Reading content must ride ABOVE
   it so 4,000 words stay crisp; the header rides above the content.
   --------------------------------------------------------------------------- */
.reader-main { position: relative; z-index: 45; }

/* ---------------------------------------------------------------------------
   2. READING PROGRESS  (a thin gold hairline pinned to the very top edge)
   --------------------------------------------------------------------------- */
.reader-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 3px; z-index: 70;
  background: color-mix(in srgb, var(--navy-black) 60%, transparent);
  pointer-events: none;
}
.reader-progress__fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--gold), #f2c882);
  box-shadow: 0 0 8px var(--gold-glow), 0 0 2px var(--gold);
  transition: width 0.12s linear;
}
body.is-ashen .reader-progress__fill {
  background: linear-gradient(90deg, #b8b7b2, #8f8e88);
  box-shadow: 0 0 8px rgba(120,120,116,0.5);
}

/* ---------------------------------------------------------------------------
   3. HEADER — author-layer chrome, minimal, self-effacing on scroll
   --------------------------------------------------------------------------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-header);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  padding: clamp(0.7rem, 1.8vw, 1.15rem) var(--space-5);
  border-bottom: 1px solid transparent;
  transition: transform var(--dur-2) var(--ease-cold),
              background-color var(--dur-2) var(--ease-drift),
              border-color var(--dur-2), backdrop-filter var(--dur-2);
}
.site-header.is-scrolled {
  background: color-mix(in srgb, var(--navy-deep) 84%, transparent);
  border-bottom-color: var(--line-soft);
  backdrop-filter: blur(8px);
}
.site-header.is-hidden { transform: translateY(-100%); }

.brand {
  font-family: var(--font-display); font-weight: 300;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  font-size: var(--fs-500); color: var(--ink); text-decoration: none;
  white-space: nowrap;
}
.brand b { font-weight: 600; color: var(--gold); }

/* ---------------------------------------------------------------------------
   4. READER TOOLS  (read-time label + text-size stepper)
   --------------------------------------------------------------------------- */
.reader-tools { display: flex; align-items: center; gap: clamp(0.7rem, 2vw, 1.3rem); }
.reader-tools__time {
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: var(--tracking-mid); font-size: var(--fs-100);
  color: var(--ink-faint); white-space: nowrap;
}
.text-size { display: inline-flex; align-items: center; gap: 4px; }
.text-size button {
  width: 2rem; height: 2rem; display: grid; place-items: center;
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  color: var(--ink-soft); font-family: var(--font-display); line-height: 1;
  transition: border-color var(--dur-1), color var(--dur-1), background-color var(--dur-1);
}
.text-size button:hover:not(:disabled),
.text-size button:focus-visible:not(:disabled) {
  border-color: var(--gold); color: var(--snow);
  background: color-mix(in srgb, var(--gold) 12%, transparent);
}
.text-size button:disabled { opacity: 0.32; cursor: default; }
.text-size .a-sm { font-size: 0.72rem; }
.text-size .a-lg { font-size: 1.02rem; }

/* ---------------------------------------------------------------------------
   5. THE TITLE PAGE  (a full-viewport opening; the text begins on scroll)
   --------------------------------------------------------------------------- */
.chapter-hero {
  position: relative;
  min-height: 100svh;
  display: grid; place-items: center; text-align: center;
  padding: clamp(6rem, 14vh, 9rem) var(--space-5) var(--space-7);
}
.chapter-hero__inner { max-width: 40rem; }
.chapter-hero__kicker {
  font-family: var(--font-display); font-weight: 400;
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
  font-size: var(--fs-300); color: var(--gold);
  margin-bottom: var(--space-5);
}
.chapter-hero__title {
  font-family: var(--font-display); font-weight: 300;
  text-transform: uppercase;
  letter-spacing: clamp(0.1em, 0.2em, 0.26em);
  font-size: clamp(2.1rem, 1.3rem + 3.9vw, 4.4rem);
  line-height: 1.06; color: var(--cream);
  text-wrap: balance;
}
.chapter-hero__rule {
  display: flex; align-items: center; justify-content: center; gap: 0.9rem;
  margin: var(--space-6) auto var(--space-5); color: var(--cream-45);
}
.chapter-hero__rule::before,
.chapter-hero__rule::after {
  content: ""; height: 1px; width: min(72px, 16vw);
}
.chapter-hero__rule::before { background: linear-gradient(90deg, transparent, var(--cream-20)); }
.chapter-hero__rule::after  { background: linear-gradient(90deg, var(--cream-20), transparent); }
.chapter-hero__meta {
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: var(--tracking-mid); font-size: var(--fs-200);
  color: var(--ink-faint); line-height: 1.9;
}
.chapter-hero__meta b { color: var(--ink-soft); font-weight: 600; }

.chapter-hero__cue {
  position: absolute; left: 50%; bottom: clamp(1rem, 4vh, 2.5rem);
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  color: var(--ink-faint);
}
.chapter-hero__cue span {
  font-family: var(--font-display); font-size: var(--fs-100);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
}
.chapter-hero__cue i {
  width: 1px; height: 42px; background: linear-gradient(var(--gold), transparent);
  transform-origin: top; animation: reader-cue 2.2s var(--ease-drift) infinite;
}
@keyframes reader-cue {
  0%   { transform: scaleY(0); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* the little paper-cut snow-crystal ornament (scene breaks + the title rule) */
.ornament { width: 26px; height: 26px; flex: 0 0 auto; }
.ornament path { stroke: currentColor; }

/* ---------------------------------------------------------------------------
   6. THE CHAPTER BODY
   --------------------------------------------------------------------------- */
.chapter-body {
  /* fluid reading size, then scaled live by the A- / A+ stepper */
  --reader-fs: clamp(1.12rem, 1.02rem + 0.42vw, 1.3rem);
  width: min(65ch, 92vw);
  margin: 0 auto;
  padding: var(--space-7) 0 var(--space-8);
}
.chapter-body p {
  font-family: var(--font-body);
  font-size: calc(var(--reader-fs) * var(--reader-scale, 1));
  line-height: 1.78;
  color: var(--ink);
  max-width: none;
  margin: 0;
  text-indent: 1.4em;          /* printed-novel indent */
  hanging-punctuation: first last;
  text-wrap: pretty;
}
.chapter-body p + p { margin-top: 0.4em; }
/* first paragraph of the chapter and of each scene: flush left, no indent */
.chapter-body p.no-indent { text-indent: 0; }
/* the drop cap on the opening word */
.chapter-body p.drop::first-letter {
  font-family: var(--font-display); font-weight: 300;
  float: left; font-size: 3.4em; line-height: 0.68;
  padding: 0.05em 0.12em 0 0; color: var(--gold);
}

/* scene-break ornament: a hairline pair flanking the paper-cut crystal */
.scene-break {
  display: flex; align-items: center; justify-content: center; gap: 0.95rem;
  margin: var(--space-7) 0; color: var(--cream-45);
}
.scene-break[role] { list-style: none; }
.scene-break::before, .scene-break::after {
  content: ""; height: 1px; width: min(80px, 18vw);
}
.scene-break::before { background: linear-gradient(90deg, transparent, var(--cream-20)); }
.scene-break::after  { background: linear-gradient(90deg, var(--cream-20), transparent); }

/* the chapter-end mark, a touch heavier than a scene break */
.chapter-end {
  display: grid; place-items: center;
  margin: var(--space-7) 0 0; color: var(--gold);
}
.chapter-end .ornament { width: 30px; height: 30px; opacity: 0.85; }

/* ---------------------------------------------------------------------------
   7. THE ASH TURN — the whole page cools when the story does (~75% in)
   --------------------------------------------------------------------------- */
body.is-ashen {
  background-color: var(--navy-black);
  background-image:
    radial-gradient(120% 80% at 50% -10%, #14141a 0%, transparent 55%),
    linear-gradient(180deg, #0a0a0e 0%, #070709 60%, #050506 100%);
}
body.is-ashen .chapter-body p { color: #d7d5cd; }              /* cream cools toward ash */
body.is-ashen .chapter-body p.drop::first-letter { color: #cfae7c; }
body.is-ashen .scene-break,
body.is-ashen .chapter-hero__rule { color: rgba(200,199,193,0.4); }
body.is-ashen .brand b { color: #cfae7c; }

/* ---------------------------------------------------------------------------
   8. THE CLOSING — full-bleed: the cover, the promise, the capture
   --------------------------------------------------------------------------- */
.chapter-close {
  position: relative;
  min-height: 100svh;
  display: grid; place-items: center;
  padding: var(--space-8) var(--space-5);
  border-top: 1px solid var(--line-soft);
  background: radial-gradient(130% 100% at 50% 24%, #0d0d10 0%, #050506 76%);
  overflow: hidden;
}
.chapter-close__grid {
  position: relative; z-index: var(--z-content);
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr; align-items: center;
  width: min(1000px, 92vw);
}
@media (min-width: 880px) {
  .chapter-close__grid { grid-template-columns: 0.82fr 1fr; }
}
.chapter-close__cover { display: flex; justify-content: center; }
.chapter-close__cover img {
  width: min(300px, 68vw); height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-3), 0 0 0 1px rgba(0,0,0,0.5);
}
.chapter-close__eyebrow { margin-bottom: var(--space-4); }
.chapter-close__title {
  font-family: var(--font-display); font-weight: 300; text-transform: none;
  letter-spacing: 0.01em; line-height: 1.08;
  font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.1rem);
  color: var(--cream);
  text-wrap: balance;
}
.chapter-close__lede {
  margin-top: var(--space-5); color: var(--ink-soft);
  font-size: var(--fs-500); max-width: 46ch;
}
.chapter-close__form { margin-top: var(--space-6); max-width: 32rem; }
.chapter-close__status {
  margin-top: var(--space-3); font-style: italic; font-size: var(--fs-300);
}
.chapter-close__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4);
  margin-top: var(--space-5);
}
.chapter-close__or {
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: var(--tracking-mid); font-size: var(--fs-100);
  color: var(--ink-faint);
}
.chapter-close__byline {
  margin-top: var(--space-6); font-size: var(--fs-200); color: var(--ink-faint);
  max-width: 46ch;
}

/* ---------------------------------------------------------------------------
   9. FOOTER (author layer) — reuses index.html's footer classes
   --------------------------------------------------------------------------- */
.site-footer {
  position: relative; z-index: 45;
  border-top: 1px solid var(--line-soft);
  background: var(--navy-black);
  padding: var(--space-8) var(--space-5) var(--space-6);
  min-height: 200px; overflow: hidden;
}
.footer__row {
  display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center;
  justify-content: space-between; position: relative; z-index: var(--z-content);
}
.footer__meta {
  font-size: var(--fs-200); color: var(--ink-faint);
  display: flex; align-items: center; gap: 0.6em;
}
.footer__links { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.footer__links a {
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: var(--tracking-mid); font-size: var(--fs-100);
  color: var(--ink-soft); text-decoration: none;
}
.footer__links a:hover, .footer__links a:focus-visible { color: var(--gold); }
.footer__ground {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--line-soft), transparent);
}

/* ---------------------------------------------------------------------------
   RESPONSIVE + REDUCED MOTION
   --------------------------------------------------------------------------- */
@media (max-width: 540px) {
  .reader-tools__time { display: none; }   /* keep A- / A+ reachable on phones */
}
@media (max-width: 420px) {
  /* tighten the title tracking so "ON THE HILL" keeps clear air on a 320-360px
     screen (the wide caps are the only element that can crowd the edge) */
  .chapter-hero__title { letter-spacing: 0.1em; }
}

@media (prefers-reduced-motion: reduce) {
  .chapter-hero__cue i { animation: none; opacity: 0.6; transform: scaleY(1); }
  .site-header { transition: none; }
  .reader-progress__fill { transition: none; }
}