/* ============================================================
   Minimal XY grid — a lean reimplementation of the Foundation
   grid classes the original theme is built on, so section
   markup ports across one-for-one.
   Breakpoints: small 0 / medium 48em / large 64em / xlarge 75em
   ============================================================ */

.grid-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  width: 100%;
}
.grid-container.full { max-width: none; padding-inline: 0; }
.grid-container.fluid { max-width: none; }

.grid-x {
  display: flex;
  flex-flow: row wrap;
}

/* Single class on purpose: `.grid-x > .cell` would be specificity
   (0,2,0) and outrank every `.medium-*` column modifier (0,1,0),
   so column widths would silently never apply. */
.cell { flex: 0 0 auto; min-width: 0; width: 100%; }

.grid-margin-x { margin-inline: calc(var(--gutter) / -2); }
.grid-margin-x > .cell {
  width: calc(100% - var(--gutter));
  margin-inline: calc(var(--gutter) / 2);
}

.cell.auto   { flex: 1 1 0; width: auto; }
.cell.shrink { flex: 0 0 auto; width: auto; }

/* alignment ------------------------------------------------- */
.align-middle  { align-items: center; }
.align-bottom  { align-items: flex-end; }
.align-top     { align-items: flex-start; }
.align-center  { justify-content: center; }
.align-justify { justify-content: space-between; }
.align-right   { justify-content: flex-end; }
.align-self-bottom { align-self: flex-end; }
.align-self-middle { align-self: center; }

/* small columns --------------------------------------------- */
.small-1  { width: calc(100% / 12 * 1); }
.small-6  { width: 50%; }
.small-12 { width: 100%; }
.grid-margin-x > .small-1  { width: calc(100% / 12 * 1 - var(--gutter)); }
.grid-margin-x > .small-6  { width: calc(50% - var(--gutter)); }

.small-up-2 > .cell { width: 50%; }
.grid-margin-x.small-up-2 > .cell { width: calc(50% - var(--gutter)); }

@media print, screen and (min-width: 48em) {
  .medium-1  { width: calc(100% / 12 * 1); }
  .medium-2  { width: calc(100% / 6); }
  .medium-3  { width: 25%; }
  .medium-4  { width: calc(100% / 3); }
  .medium-5  { width: calc(100% / 12 * 5); }
  .medium-6  { width: 50%; }
  .medium-7  { width: calc(100% / 12 * 7); }
  .medium-8  { width: calc(100% / 12 * 8); }
  .medium-10 { width: calc(100% / 12 * 10); }
  .medium-12 { width: 100%; }

  .grid-margin-x > .medium-2  { width: calc(100% / 6 - var(--gutter)); }
  .grid-margin-x > .medium-3  { width: calc(25% - var(--gutter)); }
  .grid-margin-x > .medium-4  { width: calc(100% / 3 - var(--gutter)); }
  .grid-margin-x > .medium-5  { width: calc(100% / 12 * 5 - var(--gutter)); }
  .grid-margin-x > .medium-6  { width: calc(50% - var(--gutter)); }
  .grid-margin-x > .medium-7  { width: calc(100% / 12 * 7 - var(--gutter)); }
  .grid-margin-x > .medium-8  { width: calc(100% / 12 * 8 - var(--gutter)); }
  .grid-margin-x > .medium-10 { width: calc(100% / 12 * 10 - var(--gutter)); }

  .medium-offset-1 { margin-left: calc(100% / 12 * 1); }
  .medium-offset-2 { margin-left: calc(100% / 12 * 2); }
  .medium-offset-3 { margin-left: calc(100% / 12 * 3); }
  .medium-offset-4 { margin-left: calc(100% / 12 * 4); }
  .medium-offset-5 { margin-left: calc(100% / 12 * 5); }
  .medium-offset-6 { margin-left: calc(100% / 12 * 6); }
  .grid-margin-x > .medium-offset-1 { margin-left: calc(100% / 12 * 1 + var(--gutter) / 2); }
  .grid-margin-x > .medium-offset-2 { margin-left: calc(100% / 12 * 2 + var(--gutter) / 2); }
  .grid-margin-x > .medium-offset-3 { margin-left: calc(100% / 12 * 3 + var(--gutter) / 2); }
  .grid-margin-x > .medium-offset-4 { margin-left: calc(100% / 12 * 4 + var(--gutter) / 2); }
  .grid-margin-x > .medium-offset-5 { margin-left: calc(100% / 12 * 5 + var(--gutter) / 2); }
  .grid-margin-x > .medium-offset-6 { margin-left: calc(100% / 12 * 6 + var(--gutter) / 2); }

  .medium-up-2 > .cell { width: 50%; }
  .medium-up-3 > .cell { width: calc(100% / 3); }
  .grid-margin-x.medium-up-2 > .cell { width: calc(50% - var(--gutter)); }
  .grid-margin-x.medium-up-3 > .cell { width: calc(100% / 3 - var(--gutter)); }
}

@media print, screen and (min-width: 64em) {
  .large-2 { width: calc(100% / 6); }
  .large-3 { width: 25%; }
  .large-4 { width: calc(100% / 3); }
  .large-5 { width: calc(100% / 12 * 5); }
  .large-6 { width: 50%; }
  .grid-margin-x > .large-2 { width: calc(100% / 6 - var(--gutter)); }
  .grid-margin-x > .large-3 { width: calc(25% - var(--gutter)); }
  .grid-margin-x > .large-4 { width: calc(100% / 3 - var(--gutter)); }
  .grid-margin-x > .large-5 { width: calc(100% / 12 * 5 - var(--gutter)); }
  .grid-margin-x > .large-6 { width: calc(50% - var(--gutter)); }
}

@media print, screen and (min-width: 75em) {
  .xlarge-3 { width: 25%; }
  .xlarge-6 { width: 50%; }
  .grid-margin-x > .xlarge-3 { width: calc(25% - var(--gutter)); }
  .grid-margin-x > .xlarge-6 { width: calc(50% - var(--gutter)); }
}

/* visibility ------------------------------------------------ */
.hide { display: none !important; }

@media screen and (max-width: 47.99em) {
  .hide-for-small { display: none !important; }
}
@media print, screen and (min-width: 48em) {
  .show-for-small-only { display: none !important; }
}

/* ============================================================
   Scroll scenes
   Each pinned beat is a tall <section> containing a
   position:sticky viewport-height stage. The JS scrubber maps
   scroll progress across the section onto the stage's children.
   ============================================================ */

.scene { position: relative; }

/* svh is the viewport with the browser bars SHOWING — the smallest it
   ever gets. That is the right size for a panel whose content must fit
   without being hidden behind them. It is the wrong size for a panel
   that has to cover: see the lvh override in sections.css for the three
   sections that hand off to the next one through a full-bleed layer. */
.stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* full-bleed background layer inside a stage */
.stage > .backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.section-white { background-color: var(--white); color: var(--black); }
.section-black { background-color: var(--black); color: var(--white); }
.section-black h6 { color: rgba(255, 255, 255, 0.55); }
.section-black .caption { color: rgba(255, 255, 255, 0.6); }
.section-black .caption strong { color: var(--white); }