/* Homepage chapters, 2026-09-20.
   Neutral charcoal bands, engraved chapter rules and open editorial steps.
   This layer is homepage-only; the shared theme and hero film keep their own tokens.
   The background !important declarations replace the solid-canvas rule in
   iv-threshold.css without allowing the fixed film through between sections. */
.iv-home-chapters {
  --iv-chapter-ground: #111113;
  --iv-chapter-surface: var(--iv-surface-1);
  --iv-chapter-ink: var(--iv-ink);
  --iv-chapter-muted: var(--iv-ink-2);
  --iv-chapter-rule: rgba(201, 168, 76, 0.25);
}

.iv-home-chapters .section:not(.hero) {
  padding-block: clamp(72px, 7vw, 108px);
  /* html already reserves the fixed navigation height; do not add it twice. */
  scroll-margin-top: 0;
}

.iv-home-chapters :is(#taster, #social-proof, #authors, #how-it-works, #pricing) {
  background: var(--iv-chapter-ground) !important;
}

/* Fade with the moving section edge, not the fixed background's viewport.
   The final stop exactly matches the next opaque section. Keep the caption
   and motion control above this purely decorative layer. */
.iv-home-chapters .hero::after {
  content: "" !important;
  position: absolute;
  inset: auto 0 0;
  height: clamp(112px, 14vw, 192px);
  background: linear-gradient(180deg,
    rgba(17, 17, 19, 0) 0%,
    rgba(17, 17, 19, 0.15) 24%,
    rgba(17, 17, 19, 0.48) 52%,
    rgba(17, 17, 19, 0.82) 78%,
    var(--iv-chapter-ground) 100%);
  z-index: 0;
  pointer-events: none;
}
.iv-home-chapters .hero :is(.iv-placard, .iv-motion-toggle) { z-index: 1; }
.iv-home-chapters #taster {
  background: var(--iv-chapter-ground) !important;
  padding-bottom: 48px;
}
.iv-home-chapters #social-proof { padding: 0 0 12px; }
.iv-home-chapters #social-proof .founder-quote {
  max-width: 800px;
  color: var(--iv-chapter-muted);
  border-color: var(--iv-chapter-rule);
}

.iv-home-chapters .iv-chapter-label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 36px;
  color: var(--iv-gold);
  font: 500 11px/1.6 var(--font-body);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.iv-home-chapters .iv-chapter-label::after {
  content: "";
  flex: 1 0 32px;
  border-top: 1px solid var(--iv-chapter-rule);
}
.iv-home-chapters .iv-chapter-label__number {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  padding-right: 14px;
  border-right: 1px solid var(--iv-chapter-rule);
}
.iv-home-chapters .section:not(.hero) .heading-section {
  color: var(--iv-chapter-ink);
  text-shadow: none;
}
.iv-home-chapters :is(#taster, #authors, #how-it-works, #pricing) .text-body {
  color: var(--iv-chapter-muted);
}

/* The gallery is one horizontal exhibition; the catalogue introduces a denser,
   left-aligned layout. Chapter labels sit outside the headers so rules align. */
.iv-home-chapters #authors .section-header { text-align: left; }
.iv-home-chapters #authors .section-header .text-body { margin-left: 0; }
.iv-home-chapters #browse .section-header {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: end;
  gap: 32px 64px;
  max-width: none;
  text-align: left;
}
.iv-home-chapters #browse .section-header .text-body {
  max-width: 44ch;
  margin: 0 0 4px;
}
.iv-home-chapters :is(.iv-v2-browse-card, .iv-player, .iv-v2-tier, .iv-tile__frame) {
  background-color: var(--iv-chapter-surface);
}

/* Craft: open columns with typographic numerals, without repeated card shells. */
.iv-home-chapters #how-it-works .section-header {
  max-width: none;
  text-align: left;
}
.iv-home-chapters #how-it-works .section-header .text-body { margin-left: 0; }
.iv-home-chapters #how-it-works .steps-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 32px;
  align-items: stretch;
}
.iv-home-chapters #how-it-works .step-item {
  padding: 0 32px 0 0;
  text-align: left;
  background: none;
  border: 0;
  border-right: 1px solid var(--iv-chapter-rule);
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
.iv-home-chapters #how-it-works .step-item:last-child { padding-right: 0; border-right: 0; }
.iv-home-chapters #how-it-works .step-item:hover { transform: none; box-shadow: none; }
.iv-home-chapters #how-it-works .step-number {
  display: block;
  margin-bottom: 24px;
  color: var(--iv-gold);
  font: 400 clamp(3rem, 4.5vw, 4rem)/1 var(--font-display);
  letter-spacing: -0.04em;
}
.iv-home-chapters #how-it-works .step-title {
  min-height: 2.7em;
  margin: 0 0 18px;
  color: var(--iv-chapter-ink);
  font-size: 1.4rem;
  line-height: 1.35;
  text-wrap: balance;
}
.iv-home-chapters #how-it-works .step-text {
  max-width: none;
  margin: 0;
  color: var(--iv-chapter-muted);
}
.iv-home-chapters #how-it-works .how-disclosure {
  max-width: none;
  margin-top: 44px;
  padding: 24px 0 0;
  border: 0;
  border-top: 1px solid var(--iv-chapter-rule);
  border-radius: 0;
  background: none;
  text-align: left;
}
.iv-home-chapters #how-it-works .how-disclosure p { max-width: 86ch; }

/* The closing invitation has its own quiet space after the membership band. */
.iv-home-chapters #pricing .iv-v2-tier { border-color: var(--iv-chapter-rule); }
.iv-home-chapters #pricing .iv-v2-tier--featured { border-color: var(--iv-gold); }
.iv-home-chapters #waitlist .waitlist-block {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}
.iv-home-chapters #waitlist .waitlist-input { background: var(--iv-chapter-surface); }
.iv-home-chapters .footer { border-top: 1px solid var(--iv-chapter-rule); }

@media (max-width: 900px) {
  .iv-home-chapters #browse .section-header { grid-template-columns: 1fr; gap: 20px; }
  .iv-home-chapters #browse .section-header .text-body { max-width: 60ch; }
  .iv-home-chapters #how-it-works .steps-grid { grid-template-columns: 1fr; gap: 30px; }
  .iv-home-chapters #how-it-works .step-item {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 0 28px;
    padding: 0 0 30px;
    border-right: 0;
    border-bottom: 1px solid var(--iv-chapter-rule);
  }
  .iv-home-chapters #how-it-works .step-item:last-child { padding-bottom: 0; border-bottom: 0; }
  .iv-home-chapters #how-it-works .step-number { grid-row: span 2; margin: 0; }
  .iv-home-chapters #how-it-works .step-title { min-height: 0; margin-bottom: 14px; }
}

@media (max-width: 640px) {
  .iv-home-chapters .section:not(.hero) { padding-block: 64px; }
  .iv-home-chapters #taster { padding-bottom: 36px; }
  .iv-home-chapters #social-proof { padding-bottom: 0; }
  .iv-home-chapters .iv-chapter-label { gap: 10px; margin-bottom: 28px; letter-spacing: 0.13em; }
  .iv-home-chapters .iv-chapter-label__number { padding-right: 10px; }
  .iv-home-chapters #authors .section-header--row { align-items: flex-start; }
  .iv-home-chapters #how-it-works .step-item { grid-template-columns: 46px minmax(0, 1fr); column-gap: 18px; }
  .iv-home-chapters #how-it-works .step-number { font-size: 2.65rem; }
  .iv-home-chapters #how-it-works .step-title { font-size: 1.3rem; }
}