/*
 * Homepage rhythm layer
 *
 * Load after the homepage, motion, photography, gallery, and typography layers.
 * It only reconciles homepage spacing and reading scale; existing image crops,
 * paper treatment, ticket construction, native scrolling, and motion remain owned
 * by their source layers.
 */

.editorial-home {
  --home-section-pad: 64px;
  --home-space-8: 8px;
  --home-space-12: 12px;
  --home-space-16: 16px;
  --home-space-24: 24px;
  --home-space-32: 32px;
  --home-space-48: 48px;
  --home-layout-gap: clamp(32px, 4vw, 64px);
  --home-utility-row-space: 48px;
}

/* The hero remains over the photograph on larger screens and above it on mobile. */
.editorial-home .hero-home .hero-copy {
  padding-block: var(--home-section-pad);
  padding-inline: var(--gutter) 0;
}

/* The three principal reading sections share one vertical rhythm and gutter. */
.editorial-home .home-proof,
.editorial-home .home-offer.section-dark,
.editorial-home .home-nextstep {
  padding-block: var(--home-section-pad);
  padding-inline: var(--gutter);
}

/* Reports end cleanly after the collection rather than carrying a scroll runway. */
.editorial-home .home-proof {
  padding-bottom: var(--home-space-32);
}

/* Ticket divider and cut-outs must span exactly the true section padding. */
.editorial-home .home-offer.home-review-ticket {
  --ticket-pad-top: var(--home-section-pad);
  --ticket-pad-bottom: var(--home-section-pad);
}

/* Offer and questions use the same column proportion, gutter, and reading width. */
.editorial-home .home-offer.section-dark,
.editorial-home .home-questions-layout {
  grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr);
  gap: var(--home-layout-gap);
}

.editorial-home .home-questions-layout,
.editorial-home .home-founder {
  max-width: none;
}

.editorial-home .home-questions-intro h2,
.editorial-home #faq-title {
  max-width: 620px;
}

/* This intentionally repeats the important typography selector: the preceding
   typography layer sets font shorthand with !important. */
.editorial-home :is(#proof-title, #offer-title, #founder-title),
.editorial-home .home-example-intro h2 {
  font-size: clamp(28px, 2.8vw, 36px) !important;
  line-height: 1.12 !important;
  font-weight: 400;
  text-align: left;
  text-transform: none;
}

.editorial-home .home-example-intro h2 {
  margin-top: var(--home-space-12);
}

/* Semantic subheads retain Archivo Black from typography.css, at one useful scale. */
.editorial-home .home-report-caption h3,
.editorial-home .home-magazine-scene .home-report-caption h3,
.editorial-home .home-offer-scope h3,
.editorial-home .home-question h3 {
  font-size: clamp(18px, 1.6vw, 22px) !important;
  line-height: 1.25 !important;
  font-weight: 400;
}

/* Primary explanatory copy is deliberately stable rather than viewport-scaled. */
.editorial-home .hero-home .hero-summary,
.editorial-home .home-offer-intro,
.editorial-home .home-handover,
.editorial-home .home-delivery,
.editorial-home .home-question p {
  font-size: 16px;
  line-height: 1.6;
}

/* Supporting information follows a single, comfortably legible text scale. */
.editorial-home .hero-home .home-audience,
.editorial-home .home-scope-labels li,
.editorial-home .home-coverage,
.editorial-home .home-production,
.editorial-home .home-oneoff,
.editorial-home .home-purchase-terms,
.editorial-home .home-contact,
.editorial-home .home-founder > p {
  font-size: 14px;
  line-height: 1.6;
}

/* All homepage actions share the same usable target, action type, and interior gap. */
.editorial-home .hero-home .hero-actions .button,
.editorial-home .home-offer .button {
  gap: var(--home-space-12);
  min-height: 52px;
  padding: 14px 24px;
  font-size: 14px;
  line-height: 1.4;
}

.editorial-home .home-review-ticket .ticket-button-label {
  gap: var(--home-space-12);
}

.editorial-home .hero-home .hero-actions .text-link,
.editorial-home .home-offer .text-link,
.editorial-home .home-contact .text-link,
.editorial-home .home-collection-link,
.editorial-home .home-founder-links .text-link,
.editorial-home .home-read-example,
.editorial-home .home-magazine-scene .home-read-example {
  font-size: 14px;
  line-height: 1.4;
}

/* Copy blocks use the shared 8/12/16/24/32 progression rather than near-matches. */
.editorial-home .hero-home .hero-summary {
  margin-top: var(--home-space-16);
}

.editorial-home .hero-home .hero-actions {
  gap: var(--home-space-16) var(--home-space-24);
  margin-top: var(--home-space-24);
}

.editorial-home .hero-home .hero-meta {
  margin-top: var(--home-space-12);
}

.editorial-home .hero-home .home-audience {
  margin-top: var(--home-space-24);
  padding-top: var(--home-space-12);
}

.editorial-home .home-offer-intro {
  margin-top: var(--home-space-24);
}

.editorial-home .home-offer-scope {
  margin-top: var(--home-space-32);
  padding-top: var(--home-space-16);
}

.editorial-home .home-scope-labels {
  margin-top: var(--home-space-16);
}

.editorial-home .home-coverage {
  margin-top: var(--home-space-12);
}

.editorial-home .home-production,
.editorial-home .home-process-link {
  margin-top: var(--home-space-16);
}

.editorial-home .home-offer-purchase,
.editorial-home .home-questions {
  padding-left: clamp(32px, 4vw, 48px);
}

.editorial-home .home-oneoff {
  margin-top: var(--home-space-8);
}

.editorial-home .home-delivery {
  margin-top: var(--home-space-16);
}

.editorial-home .home-offer-purchase .button {
  margin-top: var(--home-space-24);
}

.editorial-home .home-purchase-terms {
  margin-top: var(--home-space-16);
}

.editorial-home .home-purchase-terms p + p {
  margin-top: var(--home-space-8);
}

.editorial-home .home-purchase-terms .text-link {
  margin-top: var(--home-space-12);
}

.editorial-home .home-contact {
  margin-top: var(--home-space-24);
}

/* Question rows remain static semantic content with a clear text-to-answer gap. */
.editorial-home .home-question {
  padding-block: var(--home-space-16) var(--home-space-24);
}

.editorial-home .home-question p {
  margin-top: var(--home-space-16);
}

/* The founder keeps its established separation; the collection closes more tightly. */
.editorial-home .home-founder {
  margin-top: var(--home-utility-row-space);
  padding-top: var(--home-space-16);
}

.editorial-home .home-collection-footer {
  margin-top: var(--home-space-24);
  padding-top: var(--home-space-16);
}

.editorial-home .home-founder {
  gap: var(--home-space-16) var(--home-space-24);
}

.editorial-home .home-founder-links {
  gap: var(--home-space-12) var(--home-space-24);
}

/* Magazine paper/stage geometry is untouched; only normal-flow caption rhythm changes. */
.editorial-home .home-report-gallery,
.editorial-home .home-magazine-scene .home-report-gallery {
  margin-top: var(--home-space-32);
}

.editorial-home .home-report-caption,
.editorial-home .home-magazine-scene .home-report-caption {
  padding-top: var(--home-space-16);
}

.editorial-home .home-report-place,
.editorial-home .home-magazine-scene .home-report-place {
  margin-top: var(--home-space-8);
  font-size: 14px;
  line-height: 1.6;
}

.editorial-home .home-read-example,
.editorial-home .home-magazine-scene .home-read-example {
  margin-top: var(--home-space-12);
}

/* Credits remain metadata, distinct from the original destination label artwork. */
.editorial-home .hero-home .hero-photo figcaption,
.editorial-home .home-photo-break .home-photo-caption {
  font-size: 12px;
  line-height: 1.5;
}

@media (min-width: 1280px) {
  .editorial-home {
    --home-section-pad: 80px;
  }
}

@media (max-width: 899px), (max-height: 599px) {
  /* Preserve the existing single-column fallback; do not reintroduce a desktop grid. */
  .editorial-home .home-magazine-scene .home-report-gallery {
    margin-top: var(--home-space-24);
  }

  .editorial-home .home-magazine-scene .home-report-link {
    padding-block: var(--home-space-16);
  }

  .editorial-home .home-magazine-scene .home-report-caption {
    padding-top: var(--home-space-8);
  }
}

@media (max-width: 760px) {
  .editorial-home {
    --home-section-pad: 48px;
    --home-utility-row-space: 32px;
  }

  .editorial-home .hero-home .hero-copy {
    padding-inline: var(--gutter);
  }

  .editorial-home .home-offer.section-dark,
  .editorial-home .home-questions-layout {
    grid-template-columns: 1fr;
    gap: var(--home-layout-gap);
  }

  /* This leaves the ticket's horizontal perforation and its cut-out clearance intact. */
  .editorial-home .home-offer-purchase {
    padding-top: var(--home-space-32);
    padding-left: 0;
  }

  .editorial-home .home-questions {
    padding-left: 0;
  }
}