/* =============================================================================
   Layout primitives — Swiss/editorial grid + tension
   No card / glass / feature-grid abstractions.
   ============================================================================= */

.page {
  width: min(100% - (var(--gutter) * 2), var(--page-max));
  margin-inline: auto;
}

.page--narrow {
  width: min(100% - (var(--gutter) * 2), var(--page-max-narrow));
}

.section {
  padding-block: var(--section-y);
}

.section--tight {
  padding-block: var(--section-y-tight);
}

.section--loose {
  padding-block: var(--section-y-loose);
}

.section__inner {
  width: min(100% - (var(--gutter) * 2), var(--page-max));
  margin-inline: auto;
}

/* 12-column editorial grid */
.ed-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  row-gap: var(--space-xl);
}

.ed-grid > * {
  min-width: 0;
}

/* Span helpers — use sparingly; prefer explicit section layouts */
.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-12 { grid-column: 1 / -1; }

.start-2 { grid-column-start: 2; }
.start-3 { grid-column-start: 3; }
.start-5 { grid-column-start: 5; }
.start-7 { grid-column-start: 7; }
.start-8 { grid-column-start: 8; }

/* Full-bleed media plane */
.bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.media-frame {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-elevated);
  isolation: isolate;
}

.media-frame > img,
.media-frame > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.media-frame--tall {
  aspect-ratio: 3 / 4;
}

.media-frame--wide {
  aspect-ratio: 16 / 9;
}

.media-frame--square {
  aspect-ratio: 1 / 1;
}

.media-frame--cinema {
  aspect-ratio: 2.4 / 1;
}

/* Controlled offsets / tension */
.offset-end {
  justify-self: end;
}

.offset-nudge {
  transform: translateX(clamp(0rem, 2vw, 1.5rem));
}

.offset-pull {
  margin-top: calc(var(--space-3xl) * -0.35);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.stack--s { gap: var(--space-s); }
.stack--l { gap: var(--space-l); }
.stack--xl { gap: var(--space-xl); }
.stack--2xl { gap: var(--space-2xl); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s) var(--space-m);
}

.flow > * + * {
  margin-top: var(--space-m);
}

.flow--loose > * + * {
  margin-top: var(--space-xl);
}

.rule {
  border: 0;
  border-top: 1px solid var(--color-hairline);
  margin: 0;
}

.rule--strong {
  border-top-color: var(--color-hairline-strong);
}

/* Phase 1 shell — keep minimal until emergence */
.shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--gutter);
}

.shell__brand {
  margin: 0;
  font-size: var(--text-h2);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  font-weight: 500;
}

.shell__note {
  margin: var(--space-m) 0 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
}