*, *::before, *::after { box-sizing: border-box; }
:where(.stack, .cluster, .switcher, .grid, .sidebar, .reel) > * { min-inline-size: 0; }
:where(p, li, dd, dt, h1, h2, h3, h4, figcaption, blockquote, td, th, a, span) {
  overflow-wrap: break-word;
  hyphens: auto;
}
:where(img, svg, video, canvas, iframe) {
  max-inline-size: 100%;
  block-size: auto;
}
.stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.stack > * { margin-block: 0; }
.stack.stack > * + * { margin-block-start: var(--stack-space, var(--space-m)); }
.stack[data-space="2xs"] { --stack-space: var(--space-2xs); }
.stack[data-space="xs"]  { --stack-space: var(--space-xs); }
.stack[data-space="s"]   { --stack-space: var(--space-s); }
.stack[data-space="l"]   { --stack-space: var(--space-l); }
.stack[data-space="xl"]  { --stack-space: var(--space-xl); }
.stack[data-space="2xl"] { --stack-space: var(--space-2xl); }
.center {
  box-sizing: content-box;
  margin-inline: auto;
  max-inline-size: var(--center-max, var(--content-max));
  padding-inline: var(--gutter);
}
.center[data-measure] { --center-max: var(--measure); }
.center[data-wide]    { --center-max: 76rem; }
.box {
  padding: var(--box-pad, var(--space-m));
  background: var(--box-bg, transparent);
  color: var(--box-fg, var(--label));
  border-radius: var(--box-radius, 0);
}
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cluster-gap, var(--space-s));
  align-items: var(--cluster-align, center);
  justify-content: var(--cluster-justify, flex-start);
}
.cluster[data-justify="between"] { --cluster-justify: space-between; }
.cluster[data-justify="center"]  { --cluster-justify: center; }
.cluster[data-align="start"]     { --cluster-align: flex-start; }
.switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--switcher-gap, var(--space-l));
}
.switcher > * {
  flex-grow: 1;
  flex-basis: calc((var(--switcher-threshold, 30rem) - 100%) * 999);
}
.switcher > :nth-last-child(n+5),
.switcher > :nth-last-child(n+5) ~ * { flex-basis: 100%; }
.switcher[data-threshold="s"] { --switcher-threshold: 20rem; }
.switcher[data-threshold="l"] { --switcher-threshold: 40rem; }
.switcher[data-split="2-1"] > :first-child { flex-grow: 2; }
.grid {
  display: grid;
  gap: var(--grid-gap, var(--space-l));
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(var(--grid-min, 16rem), 100%), 1fr)
  );
}
.grid[data-min="s"] { --grid-min: 11rem; }
.grid[data-min="l"] { --grid-min: 21rem; }
.reel {
  display: flex;
  gap: var(--reel-gap, var(--space-m));
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding-inline: var(--gutter);
  padding-block-end: var(--space-xs);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.reel::-webkit-scrollbar { display: none; }
.reel > * {
  flex: 0 0 var(--reel-item, calc(100% - var(--reel-peek, 12%)));
  scroll-snap-align: start;
  max-inline-size: 32rem;
}
.reel[data-item="s"] { --reel-item: min(72%, 18rem); }
.reel[data-item="m"] { --reel-item: min(86%, 26rem); }
.frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--frame-ratio, 4 / 3);
  background: var(--gray-6);
  border-radius: var(--frame-radius, 0);
}
.frame > :where(img, video, picture, svg) {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.frame[data-ratio="square"]   { --frame-ratio: 1 / 1; }
.frame[data-ratio="portrait"] { --frame-ratio: 3 / 4; }
.frame[data-ratio="tall"]     { --frame-ratio: 9 / 16; }
.frame[data-ratio="wide"]     { --frame-ratio: 3 / 2; }
.sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sidebar-gap, var(--space-xl));
}
.sidebar > :first-child { flex-basis: var(--sidebar-width, 18rem); flex-grow: 1; }
.sidebar > :last-child {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: var(--sidebar-content-min, 55%);
}
.visually-hidden:not(:focus):not(:active) {
  clip-path: inset(50%);
  block-size: 1px; inline-size: 1px;
  overflow: hidden; position: absolute; white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
.sidebar[data-side="end"] > :first-child {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: var(--sidebar-content-min, 55%);
}
.sidebar[data-side="end"] > :last-child {
  flex-basis: var(--sidebar-width, 18rem);
  flex-grow: 1;
  min-inline-size: 0;
}