/**
 * Page skeleton: the container, the section rhythm, the split panels and the
 * repeating auto-fit grids.
 *
 * Every grid in the design is `repeat(auto-fit, minmax(<floor>, 1fr))` — the
 * columns are never declared per breakpoint, they simply stop fitting. The
 * floor is what differs between grids, so it is the one value each modifier
 * sets.
 */

/* ============================================================== container */

.dk-container {
  max-width: var(--dk-container);
  margin: 0 auto;
  padding: 0 var(--dk-gutter);
}

/* ================================================================ section */

.dk-section {
  background: var(--dk-white);
}

.dk-section__inner {
  max-width: var(--dk-container);
  margin: 0 auto;
  padding: var(--dk-section-pad-top) var(--dk-gutter) var(--dk-section-pad-bottom);
}

/** The alternating warm band. */
.dk-section--beige {
  background: var(--dk-beige);
}

.dk-section--seam-top {
  border-top: 1px solid var(--dk-border-soft);
}

.dk-section--seam-bottom {
  border-bottom: 1px solid var(--dk-border-soft);
}

/** Centred heading block: title, rule, standfirst. */
.dk-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.dk-head__title {
  margin: 0;
  font-family: var(--dk-font-display);
  font-size: clamp(28px, 3.3vw, 40px);
  font-weight: 300;
  line-height: 1.18;
  letter-spacing: var(--dk-track-section);
  text-transform: uppercase;
  color: var(--dk-ink);
}

.dk-head__lede {
  margin: 0;
  max-width: 760px;
  font: 400 18px/1.8 var(--dk-font-body);
  color: var(--dk-muted);
  text-wrap: pretty;
}

/** Left-aligned variant used by the Mission, FAQ and call-back columns. */
.dk-head--start {
  align-items: flex-start;
  text-align: left;
}

/* ================================================================== grids */

.dk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--dk-grid-floor, 280px), 1fr));
  gap: var(--dk-grid-gap, 30px);
}

.dk-grid--pillars {
  --dk-grid-floor: 280px;
  --dk-grid-gap: 52px 40px;
  margin-top: 64px;
}

.dk-grid--cards {
  --dk-grid-floor: 300px;
  --dk-grid-gap: 30px;
  margin-top: 58px;
}

.dk-grid--steps {
  --dk-grid-floor: 250px;
  --dk-grid-gap: 44px 34px;
  margin-top: 60px;
}

.dk-grid--gallery {
  --dk-grid-floor: 180px;
  --dk-grid-gap: 16px;
  margin-top: 48px;
}

.dk-grid--twoup {
  --dk-grid-floor: 320px;
  --dk-grid-gap: 56px 64px;
}

.dk-grid--footer {
  --dk-grid-floor: 260px;
  --dk-grid-gap: 48px 56px;
  padding-bottom: 56px;
}

/** Centres a section's closing call to action. */
.dk-section__cta {
  display: flex;
  justify-content: center;
  margin-top: var(--dk-cta-gap, 56px);
}

/* ================================================================= splits */

/**
 * A full-bleed two-panel band: an image placeholder beside a text column.
 * Below 340px of available width per column the two stack, which is exactly
 * what the auto-fit floor achieves without a media query.
 */
.dk-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}

.dk-split__media {
  position: relative;
  display: block;
  min-height: var(--dk-split-media-height, 520px);
  background-color: var(--dk-slate);
  background-image: var(--dk-glow-split);
}

a.dk-split__media:hover {
  background-color: var(--dk-slate-hover);
}

.dk-split__panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
}

.dk-split__body {
  width: 100%;
  max-width: 620px;
}

/* ============================================================ dark bands */

/**
 * `isolation` gives the band its own stacking context, so the photograph's
 * blend mode below mixes with the band's navy and with nothing behind it.
 */
.dk-dark {
  position: relative;
  isolation: isolate;
  background-color: var(--dk-navy);
  background-image: var(--dk-glow-hero);
  color: var(--dk-on-dark);
}

.dk-dark--quote {
  background-color: var(--dk-navy-quote);
}

/** Photo ground used by cards and gallery tiles; the slate shows until the image paints. */
.dk-photo {
  position: relative;
  overflow: hidden;
  background-color: var(--dk-slate-light);
  background-image: var(--dk-glow-card);
}

/** A photograph filling its positioned parent, cropped rather than squashed. */
.dk-photo__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/**
 * A photograph behind a dark band's copy, in monochrome on the band's navy.
 *
 * Simply dimming a colour photograph over navy turned the band grey: thirty
 * percent of warm concrete and white wall is a wash, whatever is under it.
 * So the picture is reduced to grey and screened onto the band rather than
 * laid over it. Screen keeps the navy as the floor: the photograph's shadows
 * dissolve into it and only its highlights come up, as grey, so the band
 * reads as dark graphite with no more of a cool cast than the navy itself
 * lends. `contrast` opens the shadows a little so the picture keeps its
 * depth once it is grey; `brightness` caps how far the highlights climb,
 * which is what keeps the white copy readable. There is deliberately no
 * tint stage: tinted to the brand hue, the same pictures made the page read
 * blue from top to bottom, and the workshop asked for blue to stay the
 * accent.
 *
 * The mask is the vignette. A tall ellipse over the centre column, where the
 * copy sits, lets a third of the picture through and fades out to the full
 * picture at the edges of the band. `--dk-vignette` is its horizontal radius;
 * responsive.css widens it as the band narrows around the fixed-width copy,
 * and on phones, where the copy spans the whole width, dims the whole width.
 * (A `max()` would say that here, but Chromium refuses math functions inside
 * a gradient's size.) Both spellings of the mask: the unprefixed one only
 * reached Chromium at the end of 2023, and the phone browsers built on it
 * run behind.
 */
.dk-dark__photo {
  filter: grayscale(1) contrast(1.3) brightness(0.42);
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(var(--dk-vignette, 40%) 80% at 50% 50%, rgba(0, 0, 0, 0.3) 45%, #000 100%);
  mask-image: radial-gradient(var(--dk-vignette, 40%) 80% at 50% 50%, rgba(0, 0, 0, 0.3) 45%, #000 100%);
}