/* ==========================================================================
   Option B: Wide Layout — content matches gallery width on 1200px+ screens
   Activated via ?b in URL. Does not affect Option A.
   ========================================================================== */

@media (min-width: 1200px) {

  /* Expand the narrow container to full gallery width */
  .container.container--narrow {
    max-width: var(--container-max);
  }

  /* Two-column case sections: label as left rail, body fills right */
  .case-section {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 0 var(--space-9);
    align-items: start;
  }

  /* Label sticks in the left rail as you scroll */
  .case-section__label {
    margin-bottom: 0;
    padding-top: 3px; /* optical alignment with first text line */
    position: sticky;
    top: calc(80px + var(--space-6));
  }

  /* Body no longer needs a max-width cap — column handles it */
  .case-section__body {
    max-width: none;
  }

  /* If a case-section has no label (body-only), span full width */
  .case-section:not(:has(.case-section__label)) {
    grid-template-columns: 1fr;
  }

  /* Section headings (overline + h2) align flush left in wide container */
  .case-hero__tags,
  .overline,
  .heading-2 {
    /* already full-width, nothing extra needed */
  }

  /* Annotation lists and case-blocks span naturally */
  .annotation-list,
  .case-block {
    /* full 1200px by default */
  }

  /* Case gallery spans full 1200px */
  .case-gallery {
    /* already 1fr grid, expands with container */
  }

}