/* Sleepy Banana page geometry.
 * These component rules preserve the approved responsive layout. The foundation
 * and component primitives stay in site-base.css; page geometry lives here.
 * Keep the base and components layers so page-specific refinements retain their
 * existing precedence. No global template sizing variables are required.
 */
@layer base {
  body {
    font-size: 1.6rem;
    line-height: 1.45;
    letter-spacing: -.02em;
    word-break: break-word;
    overscroll-behavior-y: none;
  }

  @media (min-width: 62.5em) {
    body { font-size: 2rem; }
  }
}

@layer components {
  /* Content has a 1216px reading area plus the responsive page gutters. */
  .sb-page-content,
  .sb-section-intro,
  .sb-feature-summary {
    inline-size: 100%;
    max-inline-size: 125.6rem;
    margin-inline: auto;
    padding-inline: 2rem;
  }

  .sb-section-intro {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.6rem;
    margin-block: 6.5rem;
  }

  .sb-feature-summary {
    margin-block: 8rem;
    text-align: center;
  }

  /* Story presentation is owned by refinements.css. The outer wrapper only
   * supplies its gap; the former nested utility grid no longer owns the row. */
  .sb-feature-story,
  .sb-story-grid { gap: 1.6rem; }

  .sb-nav-shell { min-block-size: 7.2rem; }
  .sb-hero-frame { block-size: calc(100svh - 11.2rem); }
  .sb-site-footer { margin: 1.2rem; }
  .sb-footer-inset { padding-block-start: 2rem; }

  .sb-feature-heading,
  .sb-feature-eyebrow {
    line-height: 1;
    letter-spacing: -.04em;
  }
  .sb-feature-heading {
    font-size: 2.8rem;
    font-weight: 600;
  }
  .sb-feature-eyebrow {
    font-size: 1.4rem;
    font-weight: 500;
  }

  @media (min-width: 48em) {
    .sb-page-content,
    .sb-section-intro,
    .sb-feature-summary {
      max-inline-size: 127.6rem;
      padding-inline: 3rem;
    }
    .sb-section-intro { margin-block: 9.5rem; }
    .sb-feature-summary { margin-block: 14rem; }
    .sb-section-intro,
    .sb-feature-story,
    .sb-story-grid { gap: 2.4rem; }
    .sb-footer-inset { padding-block-start: 3rem; }
    .sb-feature-heading { font-size: 3.2rem; }
    .sb-feature-eyebrow { font-size: 1.8rem; }
  }

  @media (min-width: 62.5em) {
    .sb-page-content,
    .sb-section-intro,
    .sb-feature-summary {
      max-inline-size: 129.6rem;
      padding-inline: 4rem;
    }
    .sb-section-intro,
    .sb-feature-story,
    .sb-story-grid { gap: 3.2rem; }
    .sb-footer-inset { padding-block-start: 4rem; }
    .sb-feature-heading { font-size: 3.6rem; }
    .sb-feature-eyebrow { font-size: 2.5rem; }
  }

  @media (min-width: 75em) {
    .sb-page-content,
    .sb-section-intro,
    .sb-feature-summary {
      max-inline-size: 135.2rem;
      padding-inline: 6.8rem;
    }
    .sb-hero-frame { block-size: calc(100svh - 12rem); }
    .sb-site-footer { margin: 1.8rem; }
    .sb-footer-inset { padding-block-start: 6.8rem; }
    .sb-feature-heading { font-size: 4.7rem; }
  }
}