/* Homepage chapters, 2026-09-12.
   Opaque warm graphite 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: #1e1c17;
  --iv-chapter-surface: #151512;
  --iv-chapter-ink: #f2efe7;
  --iv-chapter-muted: #bab7ae;
  --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;
}

/* The film already fades to canvas at the bottom of the hero. Continue that
   edge into the first opaque surface, without changing its carefully graded scrim. */
.iv-home-chapters #taster {
  background: linear-gradient(var(--iv-canvas), var(--iv-chapter-ground) 96px) !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; }
}