/* ==========================================================================
   LAYOUT — containers, section rhythm, and the reusable structural
   components every long-form page (case studies, and eventually articles)
   is built from: .story-section > .story-content + .story-media
   ========================================================================== */

.container{ max-width: 1180px; margin: 0 auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }

.section{ padding-block: var(--section-gap); }
.section--tight{ padding-block: var(--section-gap-tight); }
.section--alt{ background: var(--bg-alt); }
.section--ink{ background: var(--ink); color: #F3EFE7; }
.section--ink .ink-muted{ color: #B7C4DC; }

/* ---- Story section: the one repeatable unit a long-form page is built from ----
   <section class="story-section">
     <div class="story-content">…prose, one idea…</div>
     <div class="story-media">…figure or sticky media…</div>   (optional)
   </section>
   Default: single centered column (story-content only). Add
   `story-section--split` to lay content + media side by side. */
.story-section{ padding-block: var(--story-gap); container-type: inline-size; }
.story-section--split{ container-type: inline-size; }
.story-section--tight{ padding-block: calc(var(--story-gap) * 0.7); }
.story-content{ max-width: var(--measure); margin-inline: auto; }
.story-content > :is(h2, h3){ max-width: var(--measure-wide); }

.story-section--split .container{
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--story-gap);
  align-items: start;
}
.story-section--split .story-content{ margin-inline: 0; max-width: 52ch; }
.story-section--split .story-media{ position: sticky; top: calc(72px + var(--card-gap)); }

.story-media{ width: 100%; }

.hero-grid-v2{ display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--story-gap); align-items: center; position: relative; z-index: 1; }

@container (max-width: 760px){
  .story-section--split .container{ grid-template-columns: 1fr; }
  .story-section--split .story-media{ position: static; }
}