/* ==========================================================================
   Layout — containers, section rhythm, the editorial grid, media frames
   and the waterline.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Containers
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.shell--narrow {
  max-width: var(--container-narrow);
}

.shell--prose {
  max-width: var(--container-prose);
}

/* --------------------------------------------------------------------------
   Sections

   Padding lives on .section only. Modifiers adjust the same custom property
   rather than re-declaring padding, so nothing cancels out when a section
   carries several classes at once.
   -------------------------------------------------------------------------- */
.section {
  --section-pad: var(--section-y);

  position: relative;
  padding-block: var(--section-pad);
}

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

.section--flush-top {
  padding-block-start: 0;
}

.section--flush-bottom {
  padding-block-end: 0;
}

/* Sections that own the full viewport width. Grounds set by .on-deep /
   .on-warm in tokens.css. */
.section--bleed {
  padding-inline: 0;
}

/* --------------------------------------------------------------------------
   The waterline

   The signature device. Water finds its level: a single Neon Ice hairline
   marking every point where the ground changes from air (ghost) to water
   (navy). Neon Ice is a loud colour — held to one pixel it reads as
   precise rather than neon.
   -------------------------------------------------------------------------- */
.waterline {
  position: relative;
  display: block;
  width: 100%;
  height: 1px;
  border: 0;
  background-color: var(--line-accent);
  opacity: 0.85;
}

/* A waterline that meets the edges of the viewport but is inset from the
   gutter in the middle reads as a horizon rather than a border. */
.waterline--horizon {
  background: linear-gradient(
    to right,
    transparent,
    var(--line-accent) 12%,
    var(--line-accent) 88%,
    transparent
  );
}

/* Sections on the deep ground carry the waterline at their leading edge. */
.on-deep > .waterline:first-child,
.on-warm > .waterline:first-child {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
}

/* --------------------------------------------------------------------------
   Editorial grid

   Twelve columns. Used for the asymmetric text/media pairings that give the
   page its architectural-monograph feel — text never sits centred under its
   own image.
   -------------------------------------------------------------------------- */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
  align-items: start;
}

/* Column spans, mobile-first: everything is full width until there is room. */
.col-full {
  grid-column: 1 / -1;
}

@media (min-width: 48rem) {
  .col-media-left {
    grid-column: 1 / span 7;
  }

  .col-text-right {
    grid-column: 9 / span 4;
  }

  .col-media-right {
    grid-column: 6 / span 7;
  }

  .col-text-left {
    grid-column: 1 / span 4;
  }

  .col-half {
    grid-column: span 6;
  }

  .col-third {
    grid-column: span 4;
  }

  /* An offset prose column — set to one side, never centred. */
  .col-offset-prose {
    grid-column: 7 / span 5;
  }

  .col-display {
    grid-column: 1 / span 8;
  }
}

/* --------------------------------------------------------------------------
   Media frames

   Every frame declares an aspect ratio and clips its contents, so parallax
   has something to move inside and the box is reserved before the image
   arrives. This is what keeps CLS at zero.
   -------------------------------------------------------------------------- */
.frame {
  position: relative;
  overflow: hidden;
  background-color: var(--ground-sink);
  aspect-ratio: 3 / 2;
}

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

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

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

.frame--viewport {
  aspect-ratio: auto;
  height: 100svh;
  min-height: 34rem;
}

/* The moving layer. Oversized on the cross axis so a parallax shift never
   exposes the frame edge — the amount here must exceed --parallax-shift. */
.frame > img,
.frame > video,
.frame > picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focal, 50% 50%);
}

/* Full-bleed media that escapes the shell's gutter. */
.bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* --------------------------------------------------------------------------
   Stacks — vertical rhythm inside a column
   -------------------------------------------------------------------------- */
.stack > * + * {
  margin-block-start: var(--stack-gap, var(--space-3));
}

.stack--tight {
  --stack-gap: var(--space-2);
}

.stack--loose {
  --stack-gap: var(--space-5);
}

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

/* --------------------------------------------------------------------------
   Scrim — legible type over photography, without dimming the whole image
   -------------------------------------------------------------------------- */
.scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--brand-navy) 78%, transparent) 0%,
    color-mix(in srgb, var(--brand-navy) 42%, transparent) 34%,
    color-mix(in srgb, var(--brand-navy) 8%, transparent) 68%,
    transparent 100%
  );
}

.scrim--even {
  background: color-mix(in srgb, var(--brand-navy) 42%, transparent);
}