.l-page {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
}

.l-shell {
  width: 100%;
  max-width: var(--grid-max);
  margin: 0 auto;
  padding: 0 var(--grid-gutter);
}

.l-shell--wide { max-width: none; padding: 0 var(--grid-gutter); }

.l-shell--narrow { max-width: 720px; }

.l-stack { display: flex; flex-direction: column; gap: var(--s-4); }
.l-stack--xs { gap: var(--s-1); }
.l-stack--sm { gap: var(--s-2); }
.l-stack--md { gap: var(--s-4); }
.l-stack--lg { gap: var(--s-6); }
.l-stack--xl { gap: var(--s-8); }
.l-stack--2xl { gap: var(--s-12); }

.l-row { display: flex; align-items: center; gap: var(--s-3); }
.l-row--between { justify-content: space-between; }
.l-row--end { justify-content: flex-end; }
.l-row--center { justify-content: center; }
.l-row--top { align-items: flex-start; }
.l-row--baseline { align-items: baseline; }
.l-row--wrap { flex-wrap: wrap; }
.l-row--md { gap: var(--s-4); }
.l-row--lg { gap: var(--s-6); }
.l-row--tight { gap: var(--s-2); }

.l-spacer { flex: 1; }

.l-section { padding-block: var(--s-12); }
.l-section--sm { padding-block: var(--s-8); }
.l-section--lg { padding-block: var(--s-16); }

@media (max-width: 720px) {
  .l-section { padding-block: var(--s-6); }
  .l-section--sm { padding-block: var(--s-4); }
  .l-section--lg { padding-block: var(--s-8); }
}

.l-divider { height: 1px; background: var(--line); border: 0; margin: 0; }
.l-divider--soft { background: var(--line-soft); }

.l-rail-grid {
  display: grid;
  grid-template-columns: 1fr var(--rail-w);
  gap: var(--s-6);
  align-items: start;
}

@media (max-width: 1024px) {
  .l-rail-grid { grid-template-columns: 1fr; }
}

.l-side-grid {
  display: grid;
  grid-template-columns: var(--side-w) 1fr;
  gap: var(--s-6);
  align-items: start;
}

@media (max-width: 1024px) {
  .l-side-grid { grid-template-columns: 1fr; }
}

.l-grid { display: grid; gap: var(--s-4); }
.l-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.l-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.l-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.l-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.l-grid--auto { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.l-grid--auto-sm { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

@media (max-width: 720px) {
  .l-grid--2, .l-grid--3, .l-grid--4 { grid-template-columns: 1fr; }
  .l-grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.l-sticky { position: sticky; top: calc(var(--header-h) + var(--s-4)); }

.l-flow > * + * { margin-top: var(--s-4); }
.l-flow--lg > * + * { margin-top: var(--s-6); }