/* Avanza Methods, layout layer.
   This layer owns section rhythm. No component file sets section padding. */

/* Surface context. Components read these instead of naming a colour, so the
   same component works on paper and on an inverted section. */
body {
  --surface: var(--paper);
  --text-soft: var(--text-secondary);
  --rule: var(--rule-light);
}

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

.shell--wide { max-width: var(--outer); }

/* Section rhythm. Every Movement occupies one of these. */
.section {
  position: relative;
  padding-block: var(--section-gap);
  background: var(--surface);
  color: var(--ink);
}

/* Alabaster White. One step up from paper, used where the argument turns. */
.section--bright {
  --surface: var(--paper-bright);
}

/* Black Iris, full bleed. Two per page at most. */
.section--ink {
  --surface: var(--ink-deep);
  --text-soft: var(--text-muted-on-ink);
  --rule: var(--rule-dark);
  --focus-ring: var(--accent);
  color: var(--text-on-ink);
}

/* Dark Sea, full bleed. The second inverted surface, named in section 5 as one
   of the three background steps. Alabaster White text reads 10.91:1 on it and
   the muted tone reads 5.13:1, both verified. */
.section--sea {
  --surface: var(--ink);
  --text-soft: var(--text-muted-on-ink);
  --rule: var(--rule-dark);
  --focus-ring: var(--accent);
  color: var(--paper-bright);
}

/* The hero carries more air above than a standard Movement. No viewport height
   minimum: the content and this padding already fill the first screen, and a
   vh floor only makes the section unpredictable on short and tall screens. */
.section--hero {
  padding-block: clamp(120px, 16vh, 200px) var(--section-gap);
}

/* Measure */
.measure         { max-width: var(--measure); }
.measure-display { max-width: var(--measure-display); }

/* Vertical stacks. The number is the gap in pixels. */
.stack > * + *      { margin-block-start: var(--space-24); }
.stack-16 > * + *   { margin-block-start: var(--space-16); }
.stack-32 > * + *   { margin-block-start: var(--space-32); }
.stack-48 > * + *   { margin-block-start: var(--space-48); }
.stack-64 > * + *   { margin-block-start: var(--space-64); }

/* Two column split for the About headshot and similar pairings.
   Collapses to one column below 860px. */
.split {
  display: grid;
  gap: var(--space-48);
  align-items: start;
}

@media (min-width: 860px) {
  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: var(--space-64);
  }
  .split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Centred treatment. Permitted for the hero and the closing invitation only. */
.centred {
  text-align: center;
  margin-inline: auto;
}

/* Layer that holds the ambient motif behind a section's content */
.section > .shell { position: relative; z-index: 1; }

/* Header and footer */
.site-header {
  position: relative;
  z-index: 10;
  padding-block: var(--space-24);
}

/* Wraps rather than compressing. Without this the nav wins the space fight at
   320px and squeezes the logo out of the header altogether. */
.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16) var(--space-32);
}

.site-header__inner > .logo-link { flex: none; display: block; }

.site-footer {
  padding-block: var(--space-48);
  border-block-start: var(--border) solid var(--rule);
}

/* One row of links and the legal name. Not a three column list of link lists. */
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16) var(--space-32);
}