/* One page grid, shared by the overlay and the actual section layouts.
   1920px: 48px margins, twelve 130px columns and eleven 24px gutters.
   Use containing-block widths, not 100vw: scrollbars must not offset columns. */
:root {
  --gutter: 48px;
  --site-grid-columns: 12;
  --site-grid-gap: 24px;
  --space-24: 24px;
  --space-48: 48px;
  --card-padding: var(--space-48);
  --rail-padding: var(--space-24);
}
.grid-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 164px;
  min-height: 44px;
  padding: 10px 15px;
  border: 1px solid #ffffff17;
  border-radius: 999px;
  background: transparent;
  color: #c7c7ce;
  font: 550 14px/1.25 'Raleway', Arial, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  transition: background 180ms, color 180ms, border-color 180ms;
}
.grid-toggle[hidden] { display: none !important; }
.grid-toggle:hover { color: #fff; background: #ffffff08; }
.grid-toggle[aria-pressed='true'] { color: #f6c5e8; background: #f460c410; border-color: #f460c44d; }
.grid-toggle:focus-visible { outline: 2px solid #e9b9e7; outline-offset: 4px; }
.grid-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; flex: none; }
.layout-grid {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  grid-template-columns: repeat(var(--site-grid-columns), minmax(0, 1fr));
  column-gap: var(--site-grid-gap);
  padding-inline: var(--gutter);
  pointer-events: none;
  user-select: none;
}
.layout-grid[hidden] { display: none !important; }
.layout-grid > span {
  min-width: 0;
  background: #f460c414;
  border-inline: 1px solid #f460c424;
}
.layout-grid-readout {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 8px 13px;
  border: 1px solid #ffffff26;
  border-radius: 999px;
  background: #27232eef;
  color: #f6eaf6;
  font: 500 11px/1.4 'Raleway', Arial, sans-serif;
  font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1;
  white-space: nowrap;
}
@media (max-width: 1099px) {
  :root { --site-grid-columns: 8; }
  .layout-grid > span:nth-of-type(n + 9) { display: none; }
  .grid-toggle { min-width: 44px; width: 44px; height: 44px; padding: 0; }
  .grid-toggle-label { display: none; }
}
@media (max-width: 900px) {
  :root { --gutter: 28px; }
}
@media (max-width: 760px) {
  .hero-tools .replay-button { width: 44px; height: 44px; padding: 0; }
  .hero-tools .replay-button span { display: none; }
}
@media (max-width: 600px) {
  :root { --gutter: 20px; --site-grid-columns: 4; --site-grid-gap: 16px; --card-padding: var(--space-24); }
  .layout-grid > span:nth-of-type(n + 5) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .grid-toggle { transition: none; }
}