.container {
  width: 100%;
  max-width: calc(var(--container) + var(--pad-x) * 2);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.container--wide   { max-width: calc(var(--container-wide) + var(--pad-x) * 2); }
.container--narrow { max-width: calc(var(--container-narrow) + var(--pad-x) * 2); }
.container--full   { max-width: none; }
.container--flush  { max-width: none; padding-inline: 0; }
.bleed {
  width: var(--vw, 100vw);
  margin-inline: calc(50% - var(--vw, 100vw) / 2);
}
.section {
  position: relative;
  padding-block: var(--section-y);
  background: var(--bg);
  color: var(--fg);
}
.section--sm        { padding-block: var(--section-y-sm); }
.section--flush     { padding-block: 0; }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--gutter-y);
}
.grid > * { grid-column: span 12; min-width: 0; }
.grid--tight  { column-gap: var(--space-3); row-gap: var(--space-3); }
.grid--loose  { column-gap: var(--gutter); row-gap: calc(var(--gutter-y) * 1.5); }
@media (min-width: 640px) { .grid--loose { column-gap: calc(var(--gutter) * 2); } }
.grid--flush  { gap: 0; }
.grid--middle { align-items: center; }
.grid--bottom { align-items: end; }
.grid--top    { align-items: start; }
.col-full,
.col-half,
.col-third,
.col-two-thirds,
.col-three-quarters,
.col-five-sixths   { grid-column: span 12; }
.col-quarter,
.col-sixth         { grid-column: span 6; }
.xs-full           { grid-column: span 12; }
.xs-half           { grid-column: span 6; }
.xs-third          { grid-column: span 4; }
.xs-two-thirds     { grid-column: span 8; }
.xs-quarter        { grid-column: span 3; }
.xs-three-quarters { grid-column: span 9; }
.xs-sixth          { grid-column: span 2; }
.xs-five-sixths    { grid-column: span 10; }
.span-1  { grid-column: span 1; }   .span-2  { grid-column: span 2; }
.span-3  { grid-column: span 3; }   .span-4  { grid-column: span 4; }
.span-5  { grid-column: span 5; }   .span-6  { grid-column: span 6; }
.span-7  { grid-column: span 7; }   .span-8  { grid-column: span 8; }
.span-9  { grid-column: span 9; }   .span-10 { grid-column: span 10; }
.span-11 { grid-column: span 11; }  .span-12 { grid-column: span 12; }
@media (min-width: 640px) {
  .col-half          { grid-column: span 6; }
  .col-sixth         { grid-column: span 4; }
  .sm-full           { grid-column: span 12; }
  .sm-half           { grid-column: span 6; }
  .sm-third          { grid-column: span 4; }
  .sm-two-thirds     { grid-column: span 8; }
  .sm-quarter        { grid-column: span 3; }
  .sm-three-quarters { grid-column: span 9; }
  .sm-sixth          { grid-column: span 2; }
  .sm-five-sixths    { grid-column: span 10; }
}
@media (min-width: 960px) {
  .col-third          { grid-column: span 4; }
  .col-two-thirds     { grid-column: span 8; }
  .col-quarter        { grid-column: span 3; }
  .col-three-quarters { grid-column: span 9; }
  .col-sixth          { grid-column: span 2; }
  .col-five-sixths    { grid-column: span 10; }
  .md-full           { grid-column: span 12; }
  .md-half           { grid-column: span 6; }
  .md-third          { grid-column: span 4; }
  .md-two-thirds     { grid-column: span 8; }
  .md-quarter        { grid-column: span 3; }
  .md-three-quarters { grid-column: span 9; }
  .md-sixth          { grid-column: span 2; }
  .md-five-sixths    { grid-column: span 10; }
  .md-span-1  { grid-column: span 1; }   .md-span-2  { grid-column: span 2; }
  .md-span-3  { grid-column: span 3; }   .md-span-4  { grid-column: span 4; }
  .md-span-5  { grid-column: span 5; }   .md-span-6  { grid-column: span 6; }
  .md-span-7  { grid-column: span 7; }   .md-span-8  { grid-column: span 8; }
  .md-span-9  { grid-column: span 9; }   .md-span-10 { grid-column: span 10; }
  .md-span-11 { grid-column: span 11; }  .md-span-12 { grid-column: span 12; }
  .md-order-first { order: -1; }
  .md-order-last  { order: 99; }
}
@media (min-width: 1240px) {
  .lg-full           { grid-column: span 12; }
  .lg-half           { grid-column: span 6; }
  .lg-third          { grid-column: span 4; }
  .lg-two-thirds     { grid-column: span 8; }
  .lg-quarter        { grid-column: span 3; }
  .lg-three-quarters { grid-column: span 9; }
  .lg-sixth          { grid-column: span 2; }
  .lg-five-sixths    { grid-column: span 10; }
}
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 260px), 100%), 1fr));
  gap: var(--gutter-y) var(--gutter);
}
.split {
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.split > * {
  padding: var(--section-y) var(--pad-x);
  background: var(--bg);
  color: var(--fg);
}
@media (min-width: 960px) {
  .split         { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split--11-9   { grid-template-columns: 11fr 9fr; }
  .split--9-11   { grid-template-columns: 9fr 11fr; }
  .split--2-1    { grid-template-columns: 2fr 1fr; }
  .split--1-2    { grid-template-columns: 1fr 2fr; }
  .split > :first-child {
    padding-left: max(var(--pad-x), calc((100cqw - var(--container)) / 2));
    padding-right: clamp(32px, 4vw, 80px);
  }
  .split > :last-child {
    padding-right: max(var(--pad-x), calc((100cqw - var(--container)) / 2));
    padding-left: clamp(32px, 4vw, 80px);
  }
}
.stack > * + * { margin-top: var(--stack-gap, var(--space-5)); }
.stack--sm { --stack-gap: var(--space-3); }
.stack--lg { --stack-gap: var(--space-7); }
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster-gap, var(--space-4));
}
.cluster--between { justify-content: space-between; }
.cluster--top { align-items: flex-start; }
.cluster--reverse { flex-direction: row-reverse; }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }
.mt-8 { margin-top: var(--space-8); }
.mt-9 { margin-top: var(--space-9); }
@media (min-width: 960px) {
  .sticky-md { position: sticky; top: 120px; }
}
@media (max-width: 639px) { .hide-below-sm { display: none !important; } }
@media (max-width: 959px) { .hide-below-md { display: none !important; } }
@media (min-width: 960px) { .hide-md-up    { display: none !important; } }
.grid-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  pointer-events: none;
  display: none;
}
.grid-overlay.is-on { display: block; }
.grid-overlay .container,
.grid-overlay .grid { height: 100%; }
.grid-overlay .grid > * {
  grid-column: span 1;
  background: rgba(225, 252, 48, 0.08);
  box-shadow: inset 1px 0 rgba(225, 252, 48, 0.35), inset -1px 0 rgba(225, 252, 48, 0.35);
}
.grid > * { min-width: 0; }