/* ============================================
   ABOUT PAGE STYLES — HighFlowAI
   /about.html — designed as a long-form editorial essay
   rather than a marketing page. Single narrow column
   throughout, layered atmospheric background with
   structural page-edge architecture, large chapter
   watermark numerals, and a sticky chapter index in
   the left margin on wide viewports.

   Note: the CTA card pattern (.cta-section / .cta-card)
   in commonStyles.css is unused on this page — the essay
   close handles the closing call-to-action instead.
   ============================================ */


/* ============================================
   1. PAGE BACKGROUND — atmospheric base + page architecture
   Several layers stacked. From bottom up:

     – var(--bg-base)            : darkest, fills everything
     – top vignette              : soft lift toward top-centre
     – column tint               : faint accent wash filling
                                   the vertical band where the
                                   essay sits, separating "page"
                                   from "margin"
     – column edge lines         : thin vertical rules at the
                                   outer edges of that band, like
                                   the inside edges of a printed
                                   book page

   On top of that:
     – body::before              : faint aurora orbs (animated)
     – body::after               : SVG fractal-noise grain

   Triggered only when body has the .page-about class so
   other pages keep their existing dotted-grid texture.
   ============================================ */
body.page-about {
  background:
    /* COLUMN EDGE LINES — 1px vertical rules at ±420px from
       horizontal centre, marking the outer boundary of the
       essay "page". Each rule is a 4-stop transition through
       a 1px window so it renders as a hairline regardless of
       device pixel density. */
    linear-gradient(to right,
      transparent calc(50% - 420px),
      rgba(var(--accent-rgb), 0.10) calc(50% - 420px),
      rgba(var(--accent-rgb), 0.10) calc(50% - 420px + 1px),
      transparent calc(50% - 420px + 1px),
      transparent calc(50% + 420px - 1px),
      rgba(var(--accent-rgb), 0.10) calc(50% + 420px - 1px),
      rgba(var(--accent-rgb), 0.10) calc(50% + 420px),
      transparent calc(50% + 420px)
    ),
    /* COLUMN TINT — soft accent wash in the vertical band
       between the edge lines. Very low alpha (3.5%) — felt,
       not seen — but enough to break the monotone of a
       single-colour background and frame the essay as a
       "page" on a darker surface. */
    linear-gradient(to right,
      transparent calc(50% - 420px),
      rgba(var(--accent-rgb), 0.035) calc(50% - 420px),
      rgba(var(--accent-rgb), 0.035) calc(50% + 420px),
      transparent calc(50% + 420px)
    ),
    /* TOP VIGNETTE — soft accent lift toward the top centre,
       drawing the eye in at the cover. */
    radial-gradient(ellipse 120% 70% at 50% 0%, rgba(var(--accent-rgb), 0.04), transparent 65%),
    /* BASE */
    var(--bg-base);
  background-attachment: fixed;
}

@media (max-width: 840px) {
  /* Below the threshold where the column edge lines fit on
     screen with reasonable margin, drop the structural
     layers — the line at calc(50% ± 420px) would otherwise
     render at the viewport edge or off-screen. The simpler
     base + vignette still gives the page atmospheric depth. */
  body.page-about {
    background:
      radial-gradient(ellipse 120% 70% at 50% 0%, rgba(var(--accent-rgb), 0.04), transparent 65%),
      var(--bg-base);
  }
}

body.page-about::before {
  background-image:
    radial-gradient(ellipse 50% 38% at 18% 22%, rgba(var(--accent-rgb), 0.06), transparent 70%),
    radial-gradient(ellipse 55% 48% at 82% 78%, rgba(var(--accent-rgb), 0.05), transparent 70%),
    radial-gradient(ellipse 35% 30% at 50% 95%, rgba(var(--accent-rgb), 0.03), transparent 75%);
  background-size: auto;
  inset: -8%;
  mask-image: none;
  -webkit-mask-image: none;
  animation: aurora-drift 60s ease-in-out infinite alternate;
  will-change: transform;
}

body.page-about::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  opacity: 0.06;
}

@keyframes aurora-drift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(2%, -1.5%, 0) scale(1.05);
  }
  100% {
    transform: translate3d(-1.5%, 2%, 0) scale(0.97);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.page-about::before {
    animation: none;
  }
}


/* ============================================
   1.5 FOOTER OVERRIDE
   The atmospheric layers above (column tint + edge lines,
   aurora orbs on body::before, grain on body::after, and
   the margin particles in section 2.5) are all fixed-
   positioned, which means they stay pinned to the viewport
   even when the user has scrolled to the bottom of the
   page. The footer has no explicit background or stacking
   context by default, so those layers visibly bleed
   through the footer area when it comes into view.

   Three properties together fix that:
     – position: relative establishes a stacking context
       that z-index can act on
     – z-index: 5 puts the footer above the margin
       particles (z-index 4); matches .chapter-index
       (also z-index 5), but they don't overlap in
       practice since the chapter-index lives at viewport
       middle and the footer sits at viewport bottom
     – background: var(--bg-base) gives the footer a solid
       fill so the layered effects behind it are no longer
       visible through it

   Scoped to body.page-about so other pages keep the
   footer's default transparent treatment.
   ============================================ */
body.page-about .footer {
  position: relative;
  z-index: 5;
  background: var(--bg-base);
}


/* ============================================
   2. CHAPTER INDEX
   Sticky table-of-contents in the left margin. Visible
   on viewports >=1240px; hidden below.

   ⚠️ LOCKSTEP: The 1240px breakpoint here, in §2.5
   (margin particles), and §2.6 (margin numerals) MUST
   match the MIN_WIDTH constant in about.js. Change
   one, change all four — otherwise the page breaks
   silently at certain viewport widths.

   A 1px vertical rule down the left side of the list
   anchors the chapter-index visually — the dot indicators
   that mark the active chapter sit *on* this rule, so the
   index reads as a small typographic ruler in the margin
   rather than a free-floating menu.
   ============================================ */
.chapter-index {
  position: fixed;
  left: clamp(28px, 3vw, 56px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
}

.chapter-index ol {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin: 0;
  padding: 4px 0 4px 18px;
  border-left: 1px solid rgba(var(--accent-rgb), 0.18);
}

.chapter-index a {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  align-items: baseline;
  text-decoration: none;
  color: var(--text-dim);
  position: relative;
  transition: color 0.4s var(--ease-out);
}

.chapter-index a:hover,
.chapter-index a.active {
  color: var(--accent);
}

/* Dot indicator — sits on the index's left rule. Invisible
   until active, then scales in with a soft glow. */
.chapter-index a::before {
  content: '';
  position: absolute;
  left: -18px;
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 14px var(--accent);
  transition: transform 0.4s var(--ease-out);
}

.chapter-index a.active::before {
  transform: translate(-50%, -50%) scale(1);
}

.ci-mark {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  text-align: right;
  color: inherit;
}

.ci-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: inherit;
  white-space: nowrap;
}

/* Lockstep with about.js MIN_WIDTH — see §2 header. */
@media (max-width: 1240px) {
  .chapter-index {
    display: none;
  }
}


/* ============================================
   2.5 MARGIN PARTICLES
   Floating decorative dots scattered across the outer
   margins — replacing the previous vertical gradient
   streaks. ~24 particles per side, each at a random
   position with a unique drift vector and timing, produces
   an ambient starfield effect that covers far more of the
   empty margin space than 3 thin streaks did.

   The containers (.margin-streaks-*) are unchanged from
   the streaks era — same fixed positioning, same 1240px
   breakpoint, same z-index. Class names kept for
   continuity even though the visual treatment inside
   changed (streaks → dots).

   Particles themselves are injected by about.js into the
   containers; this CSS only specifies the visual treatment
   + the keyframe path. Per-particle parameters (position,
   size, opacity, drift bounds, animation duration/delay)
   are set as inline styles by the JS via the CSS variables
   --size, --opacity, --dx1/dy1/dx2/dy2, --dur, --delay.

   z-index: 4 — same reasoning as the previous streaks:
     – above the footer (z-index auto / 0) so particles
       drift over it on scroll
     – below .chapter-index (z-index 5) and the new
       margin numerals' container — both always read on
       top of the particle layer
     – below the sticky page header so particles pass
       behind it at the top of the page

   Hidden below 1240px viewport — there's no real outer
   margin space for particles to live in below that. JS
   skips the build entirely on small viewports too.

   Respects prefers-reduced-motion by stilling the drift
   animation; particles remain visible (opacity intact)
   so the visual layer is still there, just static.
   ============================================ */
.margin-streaks {
  /* Each container spans the entire outer margin on its
     side — from viewport edge to column edge — so the
     particle field fills the full empty space rather than
     hugging the column wall. Width is set per-side below
     via left+width (left container) or left+right (right
     container). */
  position: fixed;
  top: 0;
  height: 100vh;
  pointer-events: none;
  overflow: hidden;
  z-index: 4;
}

.margin-streaks-left {
  /* Spans from the viewport left edge to the left column
     edge line. Note: at this width, particles will drift
     behind the chapter-index (which sits at left: clamp(28px,
     3vw, 56px) with z-index 5). The index reads on top
     because of its higher z-index. */
  left: 0;
  width: calc(50% - 420px);
}

.margin-streaks-right {
  /* Spans from the right column edge line to the viewport
     right edge. */
  left: calc(50% + 420px);
  right: 0;
}

.margin-streaks span {
  /* Each particle is a small accent-coloured dot with a
     soft glow halo. All per-particle parameters are set
     inline by about.js — this rule only defines the
     visual treatment and how the inline variables compose
     into the final transform/animation. */
  position: absolute;
  width: var(--size, 3px);
  height: var(--size, 3px);
  border-radius: 50%;
  background: var(--accent);
  /* Static opacity here is the fallback for when animations
     are disabled (prefers-reduced-motion). During play, the
     particle-twinkle animation overrides this on a 50%-cycle
     pulse, with --opacity acting as the bright peak. */
  opacity: var(--opacity, 0.5);
  /* Glow halo scales with particle size — larger dots get
     proportionally larger halos so they don't all look
     uniform. */
  box-shadow: 0 0 calc(var(--size, 3px) * 3) var(--accent);
  filter: blur(0.5px);
  /* Two layered animations driving the field:
       1. particle-drift: 2D drift between two random points
          + a scale breath (slightly smaller at endpoints,
          larger at the midpoint), so each particle visibly
          pulses as it travels.
       2. particle-twinkle: opacity pulse on its own clock —
          shorter cycle and independent delay so the twinkle
          isn't tied to the drift cycle, and the field reads
          as having two distinct rhythms layered on top of
          each other. */
  animation:
    particle-drift   var(--dur,         18s) ease-in-out var(--delay,         0s) infinite alternate,
    particle-twinkle var(--twinkle-dur,  5s) ease-in-out var(--twinkle-delay, 0s) infinite;
  will-change: transform, opacity;
}

@keyframes particle-drift {
  0% {
    transform: translate(var(--dx1, 0), var(--dy1, 0)) scale(0.85);
  }
  50% {
    transform: translate(0, 0) scale(1.1);
  }
  100% {
    transform: translate(var(--dx2, 0), var(--dy2, 0)) scale(0.85);
  }
}

@keyframes particle-twinkle {
  0%, 100% { opacity: var(--opacity, 0.5); }
  50%      { opacity: calc(var(--opacity, 0.5) * 0.25); }
}

@media (max-width: 1240px) {
  .margin-streaks {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .margin-streaks span {
    animation: none;
    /* Pin to drift midpoint so the static state still looks
       intentional rather than bunched at one keyframe extreme. */
    transform: translate(0, 0);
  }
}


/* ============================================
   2.6 AMBIENT MARGIN NUMERALS
   Three large italic Roman numerals — I, II, III, one per
   chapter — mirrored in BOTH outer margins so the page's
   side space is filled symmetrically. Six numeral elements
   total, injected into the DOM by about.js (so they don't
   bloat the HTML markup), wrapped in a single
   .margin-numerals container.

   Behaviour:
     – about.js sets each numeral's `top` once at build /
       resize, anchoring it to its chapter's vertical centre
     – continuous ambient drift via CSS animation (see
       @keyframes numeral-float below), independent of
       scroll, with staggered nth-child timings so the six
       elements never visibly synchronise
     – .active class added/removed by the same Intersection-
       Observer that drives the chapter index, so the active
       chapter's numerals brighten in sync with the index
       light-up

   Visually echoes the chapter watermark numerals already
   used behind each chapter heading (section 7), but
   extends that theme outward into the otherwise-empty
   side space.

   Hidden below 1240px viewport — same threshold as the
   chapter index and margin streaks, so all margin
   furniture appears and disappears together. JS skips
   setup entirely below that breakpoint as well.

   z-index: 0
     – sits behind the essay column (z-index 1 on
       .essay-container) so column content always reads
       on top of any numeral that drifts past it
     – behind the chapter-index (z-index 5), which means
       the index briefly occludes the left-side numeral
       at certain scroll positions; acceptable because
       both are very low opacity at rest
   ============================================ */
.margin-numerals {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.margin-numeral {
  position: absolute;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(140px, 16vw, 240px);
  font-weight: 400;
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: rgba(var(--accent-rgb), 0.05);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  /* Continuous ambient drift via CSS animation — see
     @keyframes numeral-float below. Independent of scroll;
     each numeral runs the same animation but with a unique
     duration and negative delay (set on the nth-child rules
     below) so the six elements never visibly synchronise.
     The base rule below sets a default duration as a safety
     net; the nth-child overrides do the actual staggering. */
  animation: numeral-float 14s ease-in-out infinite alternate;
  transition: color 0.6s var(--ease-out);
  will-change: transform;
}

.margin-numeral-left {
  /* RIGHT edge of numeral sits ~20px outside the left
     column edge line (at calc(50% - 420px)). Numeral body
     extends leftward into the outer margin. */
  right: calc(50% + 440px);
}

.margin-numeral-right {
  /* LEFT edge of numeral sits ~20px outside the right
     column edge line (at calc(50% + 420px)). Numeral body
     extends rightward into the outer margin. */
  left: calc(50% + 440px);
}

.margin-numeral.active {
  color: rgba(var(--accent-rgb), 0.14);
}

/* Stagger the six numerals' float timing so they never
   synchronise visually — different durations + negative
   delays put each one at a different point in the cycle.
   Order matches the JS DOM insertion order: chapter 1
   left/right, chapter 2 left/right, chapter 3 left/right. */
.margin-numeral:nth-child(1) { animation-duration: 14s; animation-delay:  0s; }
.margin-numeral:nth-child(2) { animation-duration: 11s; animation-delay: -3s; }
.margin-numeral:nth-child(3) { animation-duration: 13s; animation-delay: -6s; }
.margin-numeral:nth-child(4) { animation-duration: 16s; animation-delay: -2s; }
.margin-numeral:nth-child(5) { animation-duration: 12s; animation-delay: -8s; }
.margin-numeral:nth-child(6) { animation-duration: 15s; animation-delay: -4s; }

/* Gentle vertical drift (±10px) with a faint horizontal
   sway (±3px) so the motion reads as organic float rather
   than a mechanical up-down. `alternate` direction on the
   animation makes the keyframes play forward then backward
   for one continuous loop in each direction. */
@keyframes numeral-float {
  0%   { transform: translate(-3px, -10px); }
  100% { transform: translate( 3px,  10px); }
}

@media (max-width: 1240px) {
  .margin-numerals {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .margin-numeral {
    animation: none;
  }
}


/* ============================================
   3. ESSAY CONTAINER
   Single narrow centered column for the entire page.
   The hero, the body chapters, and the close all share
   this width so the page reads as one unified document.
   ============================================ */
.essay-container {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 32px);
  position: relative;
  z-index: 1;
}


/* ============================================
   4. ESSAY COVER (hero)
   Title-page treatment — eyebrow, large title with
   italic-serif accents, byline, and an author meta line
   separated by a hairline rule. Centered alignment is
   the primary differentiator from the homepage's left-
   aligned grid hero.
   ============================================ */
.essay-cover {
  /* Bottom padding controls the entire space from the
     meta text down to the chapter-divider line that
     opens the body. Set to match the meta's own
     padding-top (max 36px) so the meta block reads as
     three equal 36px gaps stacked around the rule and
     text: 36px above the rule from the byline, 36px
     below the rule to the text, 36px below the text
     to the chapter-divider.

     .essay-body's padding-top is zeroed (see section 5)
     so the gap below isn't double-stacked. If you
     reintroduce top padding on .essay-body, reduce
     this value by the same amount to keep symmetry. */
  padding: clamp(140px, 18vh, 200px) 0 clamp(20px, 4vh, 36px);
  text-align: center;
  position: relative;
}

.essay-cover-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--text-dim);
  display: inline-block;
  margin-bottom: 36px;
}

.essay-title {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.12;
  color: var(--text-headline);
  max-width: 22ch;
  margin: 0 auto;
}

.essay-title .serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.essay-byline {
  margin-top: 32px;
  /* Zero the natural UA bottom margin on <p>. The hero's
     vertical rhythm below the byline is owned entirely by
     the meta block's own margin-top — without this zero,
     byline margin-bottom (~17–19px, depending on
     font-size) stacks on top of .essay-meta margin-top
     and breaks the symmetric spacing around the rule. */
  margin-bottom: 0;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  color: var(--text-mid);
  line-height: 1.55;
  max-width: 44ch;
  margin-inline: auto;
}

.essay-meta {
  /* Symmetric spacing around the hairline rule: same
     value on margin-top (gap above the rule, from the
     byline) and padding-top (gap below the rule, to
     the meta text). If you change one, change the other
     in lockstep or the rule visually drifts off-centre
     between its neighbours.

     The byline's margin-bottom is zeroed above so it
     doesn't contribute to the gap above the rule —
     margin-top here is the only source of that space. */
  margin-top: 36px;
  padding-top: 36px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  justify-content: center;
  gap: 8px 24px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-dim);
}

/* Cinematic open — each block of the cover fades up in
   sequence on first paint. `animation-fill-mode: both`
   applies the `from` state during the delay (so elements
   are invisible until their cue) and holds the `to` state
   after, leaving everything settled and visible.

   Stagger timings (0.10s → 0.90s) read top-to-bottom with
   a slight acceleration — eyebrow + title close together,
   then a longer pause before byline + meta — so the
   sequence feels paced rather than mechanical. */
@keyframes essay-cover-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.essay-cover-eyebrow { animation: essay-cover-rise 1s var(--ease-out) 0.10s both; }
.essay-title         { animation: essay-cover-rise 1s var(--ease-out) 0.30s both; }
.essay-byline        { animation: essay-cover-rise 1s var(--ease-out) 0.60s both; }
.essay-meta          { animation: essay-cover-rise 1s var(--ease-out) 0.90s both; }

@media (prefers-reduced-motion: reduce) {
  .essay-cover-eyebrow,
  .essay-title,
  .essay-byline,
  .essay-meta {
    animation: none;
  }
}


/* ============================================
   5. ESSAY BODY
   ============================================ */
.essay-body {
  /* Top padding zeroed so the entire gap between the
     meta text (in .essay-cover) and the chapter-divider
     is owned by .essay-cover's bottom padding. Keeping
     a non-zero value here would stack on top of that
     padding and break the symmetric spacing the meta
     block depends on. */
  padding: 0 0 80px;
}


/* ============================================
   6. CHAPTER
   ============================================ */
.chapter {
  padding: 64px 0;
  /* Offset scroll target so the chapter title doesn't
     sit immediately under the sticky page header when
     the chapter-index links scroll to it. */
  scroll-margin-top: 100px;
}


/* ============================================
   7. CHAPTER WATERMARK NUMERAL
   Each chapter-head's data-numeral attribute (I/II/III)
   is rendered enormous in italic serif as a faded
   watermark behind the heading. Bleeds slightly off the
   right edge of the column.
   ============================================ */
.chapter-head {
  position: relative;
  margin-bottom: 36px;
}

.chapter-head::before {
  content: attr(data-numeral);
  position: absolute;
  top: 50%;
  right: -4%;
  transform: translateY(-50%);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(180px, 26vw, 340px);
  font-weight: 400;
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: rgba(var(--accent-rgb), 0.08);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  z-index: 0;
}

.chapter-num,
.chapter-title {
  position: relative;
  z-index: 1;
}

.chapter-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--accent);
  margin-bottom: 14px;
}

.chapter-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--text-headline);
}

.chapter-intro {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.15rem, 1.6vw, 1.3rem);
  color: var(--text-mid);
  margin-bottom: 36px;
  line-height: 1.5;
  max-width: 40ch;
}

/* Editorial body prose. Targets only direct paragraph
   children of .chapter so the rule doesn't apply to
   text inside .beliefs-inline or .anti-inline. */
.chapter > p {
  font-size: 1.1rem;
  line-height: 1.75;
  color: var(--text-primary);
  margin-bottom: 24px;
}

.chapter > p:last-child {
  margin-bottom: 0;
}

.chapter em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--text-headline);
  font-weight: 400;
}

/* Drop cap — first letter of each chapter's first paragraph.
   Italic-serif accent letter floated into the body text.

   Sizing notes:
     – line-height: 0.78 collapses the cap's line-box so the
       glyph's cap-height sits at the body's cap-height line.
       This replaces the previous line-height + padding-top
       combo (which were fighting each other).
     – Margins in em so the spacing scales with the cap; if
       the font-size ever changes, alignment doesn't break.
     – Right margin is slightly wider than the optical gap
       would suggest, to compensate for the rightward lean
       of italic glyphs — visible bottom-right of the letter
       sits left of the box edge, so body text wrapping
       tight to the box looks uneven without it. */
.chapter > p:first-of-type::first-letter {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 4rem;
  line-height: 0.8;
  color: var(--accent);
  letter-spacing: -0.04em;
  float: left;
  /* Small positive top margin pushes the cap down so its
     cap-height aligns with the body's. */
  margin: 0.06em 0.14em -0.06em 0;
}

/* ============================================
   8. CHAPTER DIVIDER
   ============================================ */
.chapter-divider {
  /* Hairline rule with a centered four-pointed star
     ornament punched through it. The star sits in a
     small bg-base patch that masks the rule beneath, so
     visually the line "breaks" around the glyph rather
     than running through it. */
  border: none;
  height: 1px;
  background: var(--border-subtle);
  margin: 0;
  position: relative;
  overflow: visible;
}

.chapter-divider::after {
  content: '✦';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Bg-base patch covers the rule beneath the glyph; the
     horizontal padding controls how wide the visual break
     in the line ends up being. */
  background: var(--bg-base);
  padding: 0 16px;
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1;
  color: var(--accent);
  text-shadow: 0 0 14px var(--accent-glow);
}


/* ============================================
   9. PULL QUOTE
   ============================================ */
.pull-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.35;
  color: var(--text-headline);
  letter-spacing: -0.015em;
  /* Top and bottom margins give the quote breathing
     room between the surrounding paragraphs. Both
     quote-mark pseudo-elements flow inline (no longer
     absolute-positioned), so neither margin needs to
     compensate for hanging glyphs. */
  margin: 64px 0 56px;
  padding: 0;
  position: relative;
  z-index: 1;
}

/* Shared treatment for both quote-mark pseudo-elements.
   Both flow INLINE — opening immediately before the
   first word ("Most"), closing immediately after the
   last word ("works.") — so they read as matched
   typographic bookends sitting on the same lines as
   the surrounding text rather than as floating corner
   decorations. Sized identically (1.5em the body text)
   so the pair looks like one consistent treatment.

   `line-height: 0` collapses each pseudo's own line-
   box so the larger font-size doesn't push the
   text line height around the glyph; `vertical-align`
   nudges them back down to sit naturally on the
   baseline.

   Unicode escapes used below:
     – \201C  curly opening double quote (")
     – \201D  curly closing double quote (") */
.pull-quote::before,
.pull-quote::after {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.5em;
  line-height: 0;
  color: var(--accent);
  letter-spacing: -0.04em;
  vertical-align: -0.18em;
}

.pull-quote::before {
  content: '\201C';
  margin-right: 0.04em;
}

.pull-quote::after {
  content: '\201D';
  margin-left: 0.04em;
}

.pull-quote .serif {
  color: var(--accent);
}

/* No @media override needed — both glyphs are em-based
   on the body text, so they scale automatically with
   the parent's responsive font-size. */


/* ============================================
   10. BELIEFS — inline numbered list
   ============================================ */
.beliefs-inline {
  list-style: none;
  counter-reset: belief;
  position: relative;
  z-index: 1;
}

.beliefs-inline > li {
  counter-increment: belief;
  padding: 28px 0;
  border-top: 1px solid var(--border-subtle);
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  align-items: start;
}

.beliefs-inline > li:first-child {
  border-top: none;
  padding-top: 8px;
}

.beliefs-inline > li:last-child {
  padding-bottom: 8px;
}

.beliefs-inline > li::before {
  content: counter(belief, decimal-leading-zero);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--accent);
  font-weight: 400;
  line-height: 1;
  margin-top: 4px;
}

/* Force the heading and paragraph into the second grid column.
   Without this, grid auto-flow puts the <p> in column 1 (56px
   wide, intended for the numeral pseudo-element), which makes
   the paragraph wrap one character per line. */
.beliefs-inline > li > * {
  grid-column: 2;
}

.beliefs-inline h3 {
  font-size: clamp(1.2rem, 1.8vw, 1.4rem);
  font-weight: 500;
  margin-bottom: 10px;
  color: var(--text-headline);
  letter-spacing: -0.01em;
}

.beliefs-inline p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-mid);
}


/* ============================================
   11. ANTI-ITEMS — inline em-dash list
   ============================================ */
.anti-inline {
  list-style: none;
  position: relative;
  z-index: 1;
}

.anti-inline > li {
  padding: 24px 0;
  border-top: 1px solid var(--border-subtle);
}

.anti-inline > li:first-child {
  border-top: none;
  padding-top: 8px;
}

.anti-inline > li:last-child {
  padding-bottom: 8px;
}

.anti-inline h3 {
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  font-weight: 500;
  margin-bottom: 8px;
  color: var(--text-headline);
  letter-spacing: -0.01em;
}

.anti-inline h3::before {
  content: '— ';
  color: var(--accent);
  margin-right: 4px;
}

.anti-inline p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-mid);
  max-width: 60ch;
}


/* ============================================
   12. ESSAY CLOSE
   ============================================ */
.essay-close {
  text-align: center;
  padding: 72px 0 40px;
}

.essay-close-line {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  color: var(--text-headline);
  line-height: 1.4;
  margin-bottom: 40px;
  max-width: 28ch;
  margin-inline: auto;
  font-weight: 400;
}

.essay-close-line em {
  color: var(--accent);
  font-style: italic;
}

.essay-close-actions {
  margin-bottom: 56px;
  display: flex;
  justify-content: center;
}

.essay-signoff {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--border-subtle);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--text-headline);
  line-height: 1.4;
  font-weight: 400;
}

.essay-signoff span {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-dim);
}


/* ============================================
   13. RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  .chapter {
    padding: 48px 0;
  }

  .chapter-head::before {
    font-size: clamp(120px, 32vw, 200px);
    right: -10%;
  }

  .chapter > p {
    font-size: 1.05rem;
  }

  .beliefs-inline > li {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 24px 0;
  }

  .beliefs-inline > li::before {
    font-size: 1.3rem;
    margin-top: 0;
  }

  .essay-meta {
    flex-direction: column;
    gap: 6px;
  }

  .essay-close {
    padding: 56px 0 32px;
  }
}