.site-shell {
  overflow: hidden;
}

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

.container-wide {
  width: min(100% - (var(--gutter) * 2), var(--container-wide));
}

.section {
  padding: clamp(4rem, 8vw, 8.5rem) 0;
}

.section.tight {
  padding: clamp(3rem, 6vw, 5rem) 0;
}

.section.dark {
  background:
    radial-gradient(circle at top right, rgba(var(--color-main-rgb), 0.34), transparent 34rem),
    var(--color-main-dark);
  color: var(--color-white);
}

.section.graphite {
  background:
    linear-gradient(135deg, rgba(var(--color-main-rgb), 0.48), transparent 52%),
    var(--color-graphite);
  color: var(--color-white);
}

.section.paper {
  background: var(--color-paper);
  color: var(--color-ink);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2.5rem, 6vw, 7rem);
  align-items: start;
}

.split.center {
  align-items: center;
}

.stack {
  display: grid;
  gap: var(--space-4);
}

.stack.large {
  gap: var(--space-6);
}

.grid-2,
.grid-3 {
  display: grid;
  gap: var(--space-4);
}

.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.page-hero {
  position: relative;
  display: grid;
  min-height: 58vh;
  padding: 9rem 0 5rem;
  overflow: hidden;
  background:
    linear-gradient(120deg, rgba(0, 18, 46, 0.94), rgba(var(--color-main-rgb), 0.76)),
    var(--image-page-hero) center / cover;
  color: var(--color-white);
}

.page-hero::after {
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  content: "";
  background: var(--color-line);
}

.page-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-4);
  max-width: 850px;
}

.page-hero h1 {
  max-width: 15ch;
  font-size: clamp(3rem, 5.6vw, 6.2rem);
  line-height: 0.98;
}

.media-frame {
  position: relative;
  overflow: hidden;
  min-height: 460px;
  border: 1px solid var(--color-line-dark);
  border-radius: var(--radius-md);
  background: var(--color-main-dark);
  box-shadow: var(--shadow-sharp);
}

.media-frame img {
  width: 100%;
  height: 112%;
  min-height: inherit;
  object-fit: cover;
  transform: translate3d(0, calc(var(--parallax-y, 0) * -0.25), 0) scale(1.03);
  transition: transform var(--transition-slow), filter var(--transition-slow);
}

.media-frame:hover img {
  filter: contrast(1.04);
  transform: translate3d(0, calc(var(--parallax-y, 0) * -0.25), 0) scale(1.06);
}

.subtle-band {
  background:
    linear-gradient(90deg, rgba(var(--color-main-rgb), 0.09), transparent 34%),
    var(--color-paper);
}