/* Mobile-first, content-fitting primitives. No overflow masking.
 * Containers subtract gutters from their available parent width.
 */
.site-v2 .site-container {
  inline-size: calc(100% - var(--site-gutter) - var(--site-gutter));
  max-inline-size: var(--site-container);
  margin-inline: auto;
  min-inline-size: 0;
}
.site-v2 .site-container--wide { max-inline-size: var(--site-container-wide); }
.site-v2 .site-reading { inline-size: 100%; max-inline-size: var(--site-reading); min-inline-size: 0; }
.site-v2 .site-section { padding-block: var(--site-section-space); }
.site-v2 .site-section--large { padding-block: var(--site-section-space-large); }
.site-v2 .site-stack { display: flex; flex-direction: column; gap: var(--site-stack-gap, var(--site-space-4)); }
.site-v2 .site-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--site-cluster-gap, var(--site-space-3)); }
.site-v2 .site-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--site-grid-min, 16rem)), 1fr));
  gap: var(--site-grid-gap, var(--site-space-6));
}
.site-v2 .site-stack > *,
.site-v2 .site-cluster > *,
.site-v2 .site-grid > * { min-inline-size: 0; max-inline-size: 100%; }
/* Width/height attributes and source selection belong in future markup.
 * Keep original src fallback; opt into cropping only with the cover modifier.
 */
.site-v2 .site-media { display: block; max-inline-size: 100%; block-size: auto; }
.site-v2 .site-media-frame { aspect-ratio: var(--site-media-ratio, auto); min-inline-size: 0; }
.site-v2 .site-media-frame > picture { display: block; inline-size: 100%; block-size: 100%; }
.site-v2 .site-media-frame .site-media { inline-size: 100%; block-size: 100%; object-fit: contain; }
.site-v2 .site-media-frame--cover .site-media { object-fit: cover; }