/*! ===========================================================================
 *  ARXEON DESIGN SYSTEM — "PRISM"
 *  About.aspx — the page's own layer                               round 104
 *  ---------------------------------------------------------------------------
 *  Loaded by About.aspx only, after the system (fonts, tokens, base,
 *  components, graphics, webforms). Every colour, size, space and easing here
 *  is a system token; nothing below redefines one.
 *
 *  SECTION 1 · THE LITHIC SIGNAL
 *  The ridge the mark was taken from, cut into its eleven blades at thirty
 *  degrees, drawn by Scripts/arxeon.lithic.js. This file lays out the words
 *  and holds the frame the canvas fills. The canvas owns all the motion; the
 *  words hold still, so the eye has somewhere to rest.
 *
 *  THE FLOW (round 64)
 *  Sections 1 and 2 sit in one wrapper with a layer laid over both: a canvas
 *  in a sticky frame, where Scripts/arxeon.eleven.js draws the mark on wide
 *  screens, so the mark can leave the valley and stand beside section 2.
 *
 *  SECTION 2 · THE ELEVEN
 *  The eleven promises, one per blade of the mark. Two columns on a wide
 *  screen: the mark held in the left one, the list read in the right one. On
 *  a phone the mark rides in a slim band above the list. The list is plain,
 *  complete text; lighting a promise changes colours only, never a size or a
 *  position, so no word ever moves.
 *
 *  SECTION 3 · WHAT IT STANDS ON (round 66)
 *  The ground under the ridge, cut open: the two peaks on top, one layer of
 *  rock under them for each body of earlier work, drawn by
 *  Scripts/arxeon.ground.js. On a wide screen the words and the block share
 *  one sticky screen while a beam drills down through the layers; on a phone
 *  the block becomes a core sample beside the list. Without the canvas the
 *  list stands alone, with a thin core drawn in CSS down its edge.
 *
 *  SECTION 4 · THE PEOPLE (round 104; until then, the founder's section)
 *  Five of the team, in colour, in front of a field of thought, drawn by
 *  Scripts/arxeon.people.js: in turn, their thoughts run through a lattice
 *  on the mark's lines, by way of the four countries the engineers work
 *  from, and build the mark beside the words. The words and the mark side
 *  by side on a wide screen, the five in a row under them; three or two
 *  to a row below that. Without the canvas the portraits, the logo and the
 *  countries are plain, in the same places.
 *
 *  SECTION 5 · BASE CAMP (round 69)
 *  Calgary at the foot of the ridge, under its own sky as it is right now,
 *  drawn by Scripts/arxeon.camp.js: the city on the right, section 1's
 *  mountains on the horizon, water below. On a wide screen one picture, the
 *  words in the sky and at its foot; on a phone a tall sky over the core of
 *  downtown. Without the canvas the skyline is a plain picture over a sky
 *  in CSS, coloured for the hour (data-sky).
 *  ======================================================================== */

.ax-lithic {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: grid;
  align-content: start;
  /* one screen under the header — svh, not dvh: a phone's collapsing URL bar
     must not resize the canvas mid-scroll (that resize IS the "dancing") */
  min-block-size: calc(100vh - 84px);
  min-block-size: calc(100svh - 84px);
  background: var(--ax-bg);
}
@media (max-width: 767px) {
  .ax-lithic {
    min-block-size: calc(100vh - 68px);
    min-block-size: calc(100svh - 68px);
  }
}

/* ── the scene ───────────────────────────────────────────────────────────── */

.ax-lithic__scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.ax-lithic__gl,
.ax-lithic__still {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
}
/* the canvas is revealed when its first frame exists, never before — an
   empty canvas over the ground is a black flash, not a transition */
.ax-lithic__gl {
  opacity: 0;
  transition: opacity .6s var(--ax-ease-out);
}
.ax-lithic.is-live-gl .ax-lithic__gl { opacity: 1; }
/* the still: without WebGL, or without JavaScript. The artwork is anchored
   to its floor, so a tall screen crops sky, never the ridge. */
.ax-lithic__still {
  object-fit: cover;
  object-position: 50% 100%;
}
.ax-lithic.is-live-gl .ax-lithic__still { display: none; }

/* ── the words ───────────────────────────────────────────────────────────── */

.ax-lithic__stage {
  position: relative;
  z-index: 1;
  padding-block: clamp(36px, 7.5svh, 104px) var(--ax-sp-10);
}

.ax-lithic__copy {
  display: grid;
  justify-items: center;
  row-gap: var(--ax-sp-7);
  max-inline-size: 68rem;
  margin-inline: auto;
  text-align: center;
}

/* the eyebrow, centred: the system's mono read-out with its hairline on
   both sides, each at the thirty degrees every diagonal on this site uses */
.ax-lithic__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--ax-sp-5);
  margin: 0;
  font-family: var(--ax-font-mono);
  font-size: var(--ax-fs-3xs);
  font-weight: var(--ax-fw-medium);
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ax-text-body);
}
.ax-lithic__eyebrow::before,
.ax-lithic__eyebrow::after {
  content: "";
  flex: none;
  inline-size: 14px;
  block-size: 1px;
  background: rgb(var(--ax-white-rgb) / .42);
  transform: rotate(-60deg);
}

.ax-lithic__title {
  margin: 0;
  font-size: clamp(2rem, .85rem + 2.7vw, 4.75rem);
  line-height: 1.04;
  font-weight: var(--ax-fw-bold);
  letter-spacing: -.038em;
  text-wrap: balance;
}
.ax-lithic__claim { display: block; color: var(--ax-text-strong); }
.ax-lithic__reach { display: block; color: var(--ax-text-muted); }

.ax-lithic__lead {
  margin: 0;
  max-inline-size: 52ch;
  font-size: clamp(1rem, .9rem + .3vw, 1.3rem);
  line-height: 1.6;
  color: var(--ax-text-muted);
  text-wrap: pretty;
}

.ax-lithic__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ax-sp-5);
  margin-block-start: var(--ax-sp-3);
}

/* THE PHONE. The ridges stand in a band of their own under the words — a
   panorama behind a paragraph is a paragraph nobody can read — so the stage
   reserves that band, and the section grows past one screen rather than let
   the two overlap. The pair of buttons stays one row down to 375px. */
@media (max-width: 767px) and (orientation: portrait) {
  .ax-lithic__stage { padding-block-end: 78vw; }
  .ax-lithic__copy { row-gap: var(--ax-sp-6); }
  .ax-lithic__row { gap: var(--ax-sp-4); }
  .ax-lithic__row .ax-btn { --btn-px: var(--ax-sp-6); }
}
/* the listen control, lit while the mountain is listening — the accent as
   text, the way the header's own sound button marks itself on */
.ax-lithic__listen.is-on {
  color: var(--ax-accent-text);
  border-color: rgb(var(--ax-accent-text-rgb) / .45);
}

/* ── the two plates on the floor ─────────────────────────────────────────── */

.ax-lithic__foot {
  position: absolute;
  inset-inline: 0;
  inset-block-end: clamp(16px, 3svh, 30px);
  z-index: 1;
  pointer-events: none;
}
.ax-lithic__foot > .ax-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ax-lithic__plate {
  display: inline-flex;
  align-items: center;
  gap: var(--ax-sp-5);
  margin: 0;
  font-family: var(--ax-font-mono);
  font-size: var(--ax-fs-3xs);
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ax-text-subtle);
}
.ax-lithic__plate b {
  font-weight: var(--ax-fw-medium);
  color: var(--ax-text-muted);
  font-variant-numeric: tabular-nums;
}
.ax-lithic__plate::before {
  content: "";
  flex: none;
  inline-size: 14px;
  block-size: 1px;
  background: rgb(var(--ax-white-rgb) / .34);
  transform: rotate(-60deg);
}

@media (max-width: 767px) {
  .ax-lithic__foot { display: none; }
}

/* ── arrival ─────────────────────────────────────────────────────────────── */

/* The words come up while the ridge rises behind them — quickly, because the
   headline is the thing the page is judged by, and a headline that waits for
   an animation is a slow page. */
@media (prefers-reduced-motion: no-preference) {
  .ax-lithic__copy > * { animation: ax-lithic-in .9s var(--ax-ease-out) both; }
  .ax-lithic__copy > :nth-child(1) { animation-delay: .06s; }
  .ax-lithic__copy > :nth-child(2) { animation-delay: .14s; }
  .ax-lithic__copy > :nth-child(3) { animation-delay: .26s; }
  .ax-lithic__copy > :nth-child(4) { animation-delay: .38s; }
  /* the read-outs come up once the ridge is home and the mark is lit */
  .ax-lithic__foot { animation: ax-lithic-fade 1.2s var(--ax-ease-out) 3s both; }
}
@keyframes ax-lithic-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes ax-lithic-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media print, (forced-colors: active) {
  .ax-lithic__scene, .ax-lithic__foot { display: none; }
  .ax-lithic { min-block-size: 0; }
}

/* ══ THE FLOW ════════════════════════════════════════════════════════════
   The wrapper around sections 1 and 2, and the mark's own layer over both.
   The rail covers the two sections exactly; the pin inside it is one screen
   tall and sticks under the header, so everything drawn in it holds still
   on the screen while the page scrolls — that is the only way a drawing can
   travel between two sections without trembling, because the browser moves
   a sticky layer itself, between frames, where a script cannot. The layer
   never takes a click. --ax-hdr is the header's height, measured by the
   script; these are the header's own sizes until it has. */

.ax-about-flow {
  position: relative;
  isolation: isolate;
  --ax-hdr: 86px;
}
@media (max-width: 767px) {
  .ax-about-flow { --ax-hdr: 70px; }
}

.ax-flow__rail {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  /* LIGHT ADDS. The layer is light laid over the page, so it is added to
     what is under it, exactly as section 1 adds the mark to its own ground
     — which is why the valley looks the same drawn here as it did drawn
     there. Where a browser cannot add, it lays the light over instead:
     the same picture, a shade dimmer where the mark crosses lit rock. */
  mix-blend-mode: plus-lighter;
}
.ax-about-flow.is-pin .ax-flow__rail { display: block; }

.ax-flow__pin {
  position: sticky;
  inset-block-start: var(--ax-hdr);
  block-size: calc(100vh - var(--ax-hdr));
  block-size: calc(100svh - var(--ax-hdr));
}
.ax-flow__gl {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  opacity: 0;
  transition: opacity .6s var(--ax-ease-out);
}
.ax-about-flow.is-live-pin .ax-flow__gl { opacity: 1; }

/* ══ SECTION 2 · THE ELEVEN ══════════════════════════════════════════════ */

.ax-eleven {
  position: relative;
  padding-block-start: var(--ax-section);
  background: var(--ax-bg);
}

/* Two columns: the mark, and the words. The stage spans every row and
   sticks, so the mark stays in view for the whole list. The grid has no
   padding at its foot, on purpose: it ends where the flow ends, so the
   stage and the mark's layer let go of the screen at the same moment. */
.ax-eleven__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "stage head"
    "stage list"
    "stage close";
  grid-template-rows: auto auto 1fr;
  column-gap: clamp(2rem, 1rem + 4vw, 6rem);
  align-items: start;
}

/* ── the head ── the home page's section head, word for word in style */

.ax-eleven__head {
  grid-area: head;
  display: grid;
  row-gap: var(--ax-sp-4);
  justify-items: start;
}
.ax-eleven__label {
  display: inline-flex;
  align-items: center;
  gap: var(--ax-sp-5);
  margin: 0;
  font-family: var(--ax-font-mono);
  font-size: var(--ax-fs-3xs);
  line-height: var(--ax-lh-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ax-text-muted);
}
/* the thirty-degree hairline every read-out on this page carries */
.ax-eleven__label::before {
  content: "";
  flex: none;
  inline-size: 14px;
  block-size: 1px;
  background: rgb(var(--ax-white-rgb) / .42);
  transform: rotate(-60deg);
}
.ax-eleven__line {
  margin: 0;
  max-inline-size: 16ch;
  font-size: var(--ax-fs-d3, var(--ax-fs-2xl));
  font-weight: var(--ax-fw-bold);
  line-height: var(--ax-lh-display);
  letter-spacing: var(--ax-tr-hero);
  color: var(--ax-text-strong);
  text-wrap: balance;
}
.ax-eleven__sub {
  margin: 0;
  max-inline-size: 46ch;
  font-size: var(--ax-fs-md);
  line-height: var(--ax-lh-lead);
  color: var(--ax-text-body);
}

/* ── the stage: where the mark stands ─────────────────────────────────── */

.ax-eleven__stage {
  grid-area: stage;
  position: sticky;
  inset-block-start: var(--ax-hdr);
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: var(--ax-sp-9);
  block-size: calc(100vh - var(--ax-hdr));
  block-size: calc(100svh - var(--ax-hdr));
}
/* the mark's box. On a wide screen with WebGL the mark is drawn by the
   layer above and this box only keeps its place; otherwise the mark is
   drawn inside it, or is the image in it. */
.ax-eleven__dock {
  position: relative;
  inline-size: 100%;
  block-size: clamp(240px, 54svh, 620px);
}
.ax-eleven__still,
.ax-eleven__gl {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
}
.ax-eleven__still {
  object-fit: contain;
  padding: 7%;
}
.ax-eleven.is-pin .ax-eleven__still,
.ax-eleven.is-dock-gl .ax-eleven__still { display: none; }
.ax-eleven:not(.is-dock-gl) .ax-eleven__gl { display: none; }

.ax-eleven__read {
  display: grid;
  justify-items: center;
  row-gap: var(--ax-sp-2);
  min-inline-size: 0;
}
/* which promise is lit: "03 / 11", the accent on the number */
.ax-eleven__count {
  display: inline-flex;
  align-items: center;
  gap: var(--ax-sp-5);
  margin: 0;
  font-family: var(--ax-font-mono);
  font-size: var(--ax-fs-3xs);
  line-height: 1;
  letter-spacing: .16em;
  color: var(--ax-text-subtle);
  font-variant-numeric: tabular-nums;
}
.ax-eleven__count b {
  font-weight: var(--ax-fw-medium);
  color: var(--ax-accent-text);
}
/* the lit promise's name: only in the phone's band, where the list may be
   scrolled away from it */
.ax-eleven__now { display: none; }

/* ── the list ──────────────────────────────────────────────────────────── */

.ax-eleven__list {
  grid-area: list;
  margin-block-start: var(--ax-sp-12);
  border-block-end: 1px solid var(--ax-line);
}
.ax-eleven__item {
  position: relative;
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  align-items: baseline;
  padding-block: var(--ax-sp-8);
  border-block-start: 1px solid var(--ax-line);
}
.ax-eleven__no {
  font-family: var(--ax-font-mono);
  font-size: var(--ax-fs-2xs);
  line-height: 1;
  letter-spacing: .12em;
  color: var(--ax-text-subtle);
  font-variant-numeric: tabular-nums;
  transition: color var(--ax-d-base) var(--ax-ease);
}
.ax-eleven__card {
  display: grid;
  row-gap: var(--ax-sp-3);
  min-inline-size: 0;
}
.ax-eleven__what {
  margin: 0;
  font-size: var(--ax-fs-lg);
  font-weight: var(--ax-fw-semibold);
  line-height: var(--ax-lh-head);
  letter-spacing: var(--ax-tr-lead);
  color: var(--ax-text-body);
  transition: color var(--ax-d-base) var(--ax-ease);
}
.ax-eleven__say {
  margin: 0;
  max-inline-size: 50ch;
  font-size: var(--ax-fs-md);
  line-height: var(--ax-lh-lead);
  color: var(--ax-text-muted);
  transition: color var(--ax-d-base) var(--ax-ease);
}

/* THE LIT PROMISE. Colour only: the name goes to the headline white, the
   number to the accent, and a small blade appears beside it at the mark's
   thirty degrees. Nothing changes size, so nothing below it moves. */
.ax-eleven__item::before {
  content: "";
  position: absolute;
  inset-inline-start: -1.1rem;
  inset-block-start: calc(var(--ax-sp-8) - .1rem);
  inline-size: 2px;
  block-size: 1.3rem;
  border-radius: 2px;
  background: var(--ax-accent-text);
  opacity: 0;
  transform: skewX(-30deg) scaleY(.3);
  transform-origin: 50% 100%;
  transition: opacity var(--ax-d-base) var(--ax-ease),
              transform var(--ax-d-slow) var(--ax-ease-out);
}
.ax-eleven__item.is-on::before { opacity: 1; transform: skewX(-30deg); }
.ax-eleven__item.is-on .ax-eleven__no   { color: var(--ax-accent-text); }
.ax-eleven__item.is-on .ax-eleven__what { color: var(--ax-text-strong); }
.ax-eleven__item.is-on .ax-eleven__say  { color: var(--ax-text-body); }

/* pointing: at a promise, or at its blade in the mark */
@media (hover: hover) and (pointer: fine) {
  .ax-eleven.is-js .ax-eleven__item { cursor: pointer; }
  .ax-eleven.is-js .ax-eleven__item:hover .ax-eleven__what,
  .ax-eleven__item.is-hover .ax-eleven__what { color: var(--ax-text-strong); }
  .ax-eleven.is-js .ax-eleven__item:hover .ax-eleven__no,
  .ax-eleven__item.is-hover .ax-eleven__no { color: var(--ax-text-body); }
  .ax-eleven__item.is-on:hover .ax-eleven__no,
  .ax-eleven__item.is-on.is-hover .ax-eleven__no { color: var(--ax-accent-text); }
}

/* ── the close ──────────────────────────────────────────────────────────
   The room under it is the room the last promise and this line need to
   reach the reading line while the mark is still held on the screen. */
.ax-eleven__close {
  grid-area: close;
  display: grid;
  justify-items: start;
  row-gap: var(--ax-sp-8);
  padding-block: var(--ax-sp-13) var(--ax-sp-12);
  padding-block-end: max(var(--ax-sp-12), calc((100vh - var(--ax-hdr)) * .58 - 9rem));
  padding-block-end: max(var(--ax-sp-12), calc((100svh - var(--ax-hdr)) * .58 - 9rem));
}
.ax-eleven__end {
  margin: 0;
  max-inline-size: 26ch;
  font-size: var(--ax-fs-xl);
  line-height: var(--ax-lh-head);
  letter-spacing: var(--ax-tr-lead);
  color: var(--ax-text-muted);
  text-wrap: balance;
  transition: color var(--ax-d-slow) var(--ax-ease);
}
.ax-eleven.is-whole .ax-eleven__end { color: var(--ax-text-strong); }

/* THE PHONE. One column, and the stage becomes a band that sticks under
   the header while the list scrolls: the small mark, the number, and the
   name of the promise being read. The band is solid ground, and a short
   fade hangs below it, so the list slides away under it rather than being
   cut by a line — and never shows through the band's own words. */
@media (max-width: 959px) {
  .ax-eleven__grid { display: block; }
  .ax-eleven__stage {
    z-index: 2;
    flex-direction: row;
    justify-content: flex-start;
    column-gap: var(--ax-sp-6);
    row-gap: 0;
    block-size: 84px;
    margin-block-start: var(--ax-sp-10);
    margin-inline: calc(var(--ax-gutter) * -1);
    padding-inline: var(--ax-gutter);
    background: var(--ax-bg);
  }
  .ax-eleven__stage::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    block-size: 22px;
    background: linear-gradient(to bottom, var(--ax-bg), transparent);
    pointer-events: none;
  }
  .ax-eleven__dock {
    flex: none;
    inline-size: 80px;
    block-size: 64px;
  }
  .ax-eleven__still { padding: 4px; }
  .ax-eleven__read { justify-items: start; }
  /* two lines at most: the longest name wraps on a small phone */
  .ax-eleven__now {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    max-inline-size: 100%;
    margin: 0;
    overflow: hidden;
    font-size: var(--ax-fs-md);
    font-weight: var(--ax-fw-semibold);
    line-height: 1.25;
    color: var(--ax-text-strong);
  }
  .ax-eleven__list { margin-block-start: var(--ax-sp-4); }
  .ax-eleven__item {
    grid-template-columns: 2.5rem minmax(0, 1fr);
    padding-block: var(--ax-sp-7);
  }
  .ax-eleven__item::before {
    inset-inline-start: -.8rem;
    inset-block-start: calc(var(--ax-sp-7) - .1rem);
  }
  .ax-eleven__close {
    padding-block-start: var(--ax-sp-11);
    padding-block-end: max(var(--ax-sp-12), calc((100vh - var(--ax-hdr) - 84px) * .6 - 8rem));
    padding-block-end: max(var(--ax-sp-12), calc((100svh - var(--ax-hdr) - 84px) * .6 - 8rem));
  }
}

@media (max-width: 419px) {
  .ax-eleven__now { font-size: var(--ax-fs-sm); }
}

@media print, (forced-colors: active) {
  .ax-flow__rail, .ax-eleven__gl { display: none !important; }
  .ax-eleven.is-pin .ax-eleven__still,
  .ax-eleven.is-dock-gl .ax-eleven__still { display: block; }
  .ax-eleven__stage { position: static; block-size: auto; background: none; }
  .ax-eleven__close { padding-block-end: var(--ax-sp-12); }
}

/* ══ SECTION 3 · WHAT IT STANDS ON ═══════════════════════════════════════
   Plain first: the head, the two peaks as links, and the six layers as a
   list, each with a short segment of its own colour down the left edge, so
   the list is itself a core of the rock. With the canvas (.is-stage) the
   same words take their places beside the picture; nothing is added and
   nothing is hidden. --ax-hdr is the header's height, measured by the
   script; --ax-gr-lift is how much of the top of the pinned screen scrolls
   away before it holds (the head, on a phone). */

.ax-ground {
  position: relative;
  isolation: isolate;
  --ax-hdr: 86px;
  --ax-gr-lift: 0px;
  padding-block: var(--ax-section) var(--ax-sp-12);
  background: var(--ax-bg);
}
@media (max-width: 767px) {
  .ax-ground { --ax-hdr: 70px; }
}

.ax-ground__run,
.ax-ground__pin { position: relative; }
.ax-ground__gl,
.ax-ground__view { display: none; }

.ax-ground__grid {
  position: relative;
  z-index: 1;
  display: grid;
  row-gap: var(--ax-sp-10);
}

/* ── the head ── section 2's, word for word in style */

.ax-ground__head {
  display: grid;
  row-gap: var(--ax-sp-4);
  justify-items: start;
}
.ax-ground__label {
  display: inline-flex;
  align-items: center;
  gap: var(--ax-sp-5);
  margin: 0;
  font-family: var(--ax-font-mono);
  font-size: var(--ax-fs-3xs);
  line-height: var(--ax-lh-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ax-text-muted);
}
.ax-ground__label::before {
  content: "";
  flex: none;
  inline-size: 14px;
  block-size: 1px;
  background: rgb(var(--ax-white-rgb) / .42);
  transform: rotate(-60deg);
}
.ax-ground__line {
  margin: 0;
  max-inline-size: 20ch;
  font-size: var(--ax-fs-d3, var(--ax-fs-2xl));
  font-weight: var(--ax-fw-bold);
  line-height: var(--ax-lh-display);
  letter-spacing: var(--ax-tr-hero);
  color: var(--ax-text-strong);
  text-wrap: balance;
}
.ax-ground__sub {
  margin: 0;
  max-inline-size: 40ch;
  font-size: var(--ax-fs-md);
  line-height: var(--ax-lh-lead);
  color: var(--ax-text-body);
}

/* ── the peaks: the two names, each a link to the live site ─────────── */

.ax-ground__peaks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ax-sp-4) var(--ax-sp-10);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ax-ground__peak { position: relative; }
.ax-ground__visit {
  display: inline-grid;
  justify-items: start;
  row-gap: var(--ax-sp-1);
  padding: var(--ax-sp-2) 0;
  color: var(--ax-text-strong);
  text-decoration: none;
}
.ax-ground__name {
  font-size: var(--ax-fs-md);
  font-weight: var(--ax-fw-semibold);
  line-height: var(--ax-lh-head);
  letter-spacing: var(--ax-tr-lead);
}
.ax-ground__url {
  display: inline-flex;
  align-items: center;
  gap: var(--ax-sp-3);
  font-family: var(--ax-font-mono);
  font-size: var(--ax-fs-3xs);
  line-height: 1.2;
  letter-spacing: .08em;
  color: var(--ax-text-muted);
  transition: color var(--ax-d-base) var(--ax-ease);
}
.ax-ground__url svg {
  flex: none;
  inline-size: 12px;
  block-size: 12px;
  transition: transform var(--ax-d-base) var(--ax-ease);
}
.ax-ground__visit:hover .ax-ground__url,
.ax-ground__visit:focus-visible .ax-ground__url { color: var(--ax-accent-text); }
.ax-ground__visit:hover .ax-ground__url svg { transform: translateX(2px); }

/* ── the layers ──────────────────────────────────────────────────────── */

.ax-ground__layers {
  max-inline-size: 60rem;
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-end: 1px solid var(--ax-line);
}
.ax-ground__layer {
  position: relative;
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  align-items: baseline;
  padding-block: var(--ax-sp-7);
  padding-inline-start: var(--ax-sp-7);
  border-block-start: 1px solid var(--ax-line);
}
/* the layer's own colour: the mark's spectrum, newest cyan, oldest violet */
.ax-ground__layer:nth-child(1) { --ax-tint: var(--ax-spec-0); }
.ax-ground__layer:nth-child(2) { --ax-tint: var(--ax-spec-2); }
.ax-ground__layer:nth-child(3) { --ax-tint: var(--ax-spec-3); }
.ax-ground__layer:nth-child(4) { --ax-tint: var(--ax-spec-4); }
.ax-ground__layer:nth-child(5) { --ax-tint: var(--ax-spec-6); }
.ax-ground__layer:nth-child(6) { --ax-tint: var(--ax-spec-8); }
/* the core, in CSS: one segment per layer, touching the next */
.ax-ground__layer::before {
  content: "";
  position: absolute;
  inset-block: -1px 0;
  inset-inline-start: 0;
  inline-size: 3px;
  background: var(--ax-tint);
  opacity: .72;
}
.ax-ground__years {
  font-family: var(--ax-font-mono);
  font-size: var(--ax-fs-2xs);
  line-height: 1.2;
  letter-spacing: .08em;
  color: var(--ax-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: color var(--ax-d-base) var(--ax-ease);
}
.ax-ground__card {
  display: grid;
  row-gap: var(--ax-sp-2);
  min-inline-size: 0;
}
.ax-ground__what {
  margin: 0;
  font-size: var(--ax-fs-lg);
  font-weight: var(--ax-fw-semibold);
  line-height: var(--ax-lh-head);
  letter-spacing: var(--ax-tr-lead);
  color: var(--ax-text-strong);
  transition: color var(--ax-d-base) var(--ax-ease);
}
.ax-ground__where {
  margin: 0;
  font-size: var(--ax-fs-sm);
  line-height: 1.45;
  color: var(--ax-text-muted);
  transition: color var(--ax-d-base) var(--ax-ease);
}

/* ── with the picture ─────────────────────────────────────────────────── */

/* the canvas covers the pin below the part that scrolls away, and is shown
   when its first frame exists, never before */
.ax-ground.is-stage .ax-ground__gl {
  display: block;
  position: absolute;
  inset: var(--ax-gr-lift) 0 0 0;
  z-index: 0;
  inline-size: 100%;
  block-size: calc(100% - var(--ax-gr-lift));
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s var(--ax-ease-out);
}
.ax-ground.is-live .ax-ground__gl { opacity: 1; }
.ax-ground.is-stage .ax-ground__view { display: block; grid-area: view; min-block-size: 1px; }
.ax-ground.is-stage .ax-ground__head { grid-area: head; }
.ax-ground.is-stage .ax-ground__peaks { grid-area: peaks; }
.ax-ground.is-stage .ax-ground__layers { grid-area: layers; max-inline-size: none; border: 0; }
.ax-ground.is-stage .ax-ground__layer { border-block-start: 1px solid var(--ax-line-soft); }
.ax-ground.is-stage .ax-ground__layer::before { display: none; }

/* READING. A layer the drill has not reached yet is quieter; the one it is
   in is the brightest; the ones it has passed stay lit. Colour only, so no
   word ever moves. */
.ax-ground.is-stage .ax-ground__years { color: var(--ax-text-subtle); }
.ax-ground.is-stage .ax-ground__what  { color: var(--ax-text-muted); }
.ax-ground.is-stage .ax-ground__where { color: var(--ax-text-subtle); }
.ax-ground.is-stage .ax-ground__layer.is-read .ax-ground__what  { color: var(--ax-text-body); }
.ax-ground.is-stage .ax-ground__layer.is-read .ax-ground__where { color: var(--ax-text-muted); }
.ax-ground.is-stage .ax-ground__layer.is-now .ax-ground__years { color: var(--ax-accent-text); }
.ax-ground.is-stage .ax-ground__layer.is-now .ax-ground__what  { color: var(--ax-text-strong); }
.ax-ground.is-stage .ax-ground__layer.is-now .ax-ground__where { color: var(--ax-text-body); }
/* the layer being read gets a small blade of its own colour, at the mark's
   thirty degrees */
.ax-ground.is-stage .ax-ground__layer::after {
  content: "";
  position: absolute;
  inset-inline-start: -1.1rem;
  inset-block-start: 50%;
  inline-size: 2px;
  block-size: 1.3rem;
  margin-block-start: -.65rem;
  border-radius: 2px;
  background: var(--ax-tint);
  opacity: 0;
  transform: skewX(-30deg) scaleY(.3);
  transition: opacity var(--ax-d-base) var(--ax-ease),
              transform var(--ax-d-slow) var(--ax-ease-out);
}
.ax-ground.is-stage .ax-ground__layer.is-now::after { opacity: 1; transform: skewX(-30deg); }

/* a layer can be chosen: the page scrolls until the drill is in it */
.ax-ground.is-pin .ax-ground__layer { cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  .ax-ground.is-pin .ax-ground__layer:hover .ax-ground__what { color: var(--ax-text-strong); }
  .ax-ground.is-pin .ax-ground__layer:hover .ax-ground__years { color: var(--ax-text-body); }
  .ax-ground.is-pin .ax-ground__layer.is-now:hover .ax-ground__years { color: var(--ax-accent-text); }
}

/* PINNED: one screen holds while the drill goes down. The run is that
   screen plus 3.2 more screens of scrolling for the drill. The layers
   share the screen's height equally, one band per layer of rock. */
.ax-ground.is-pin .ax-ground__run {
  block-size: calc((100vh - var(--ax-hdr)) * 4.2 + var(--ax-gr-lift));
  block-size: calc((100svh - var(--ax-hdr)) * 4.2 + var(--ax-gr-lift));
}
.ax-ground.is-pin .ax-ground__pin {
  position: sticky;
  inset-block-start: calc(var(--ax-hdr) - var(--ax-gr-lift));
  block-size: calc(100vh - var(--ax-hdr) + var(--ax-gr-lift));
  block-size: calc(100svh - var(--ax-hdr) + var(--ax-gr-lift));
  overflow: clip;
}
.ax-ground.is-pin .ax-ground__grid {
  block-size: 100%;
  padding-block: var(--ax-sp-8);
}
.ax-ground.is-pin .ax-ground__layers {
  display: flex;
  flex-direction: column;
  min-block-size: 0;
}
.ax-ground.is-pin .ax-ground__layer {
  flex: 1 1 0;
  min-block-size: 0;
  align-content: center;
  padding-block: 0;
}

/* THE WIDE SCREEN: the words on the left, the block on the right; the two
   names ride over their summits (the script places them). */
@media (min-width: 960px) {
  .ax-ground.is-stage .ax-ground__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas:
      "head   view"
      "layers view";
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: clamp(2rem, 1rem + 4vw, 6rem);
    row-gap: var(--ax-sp-9);
  }
  .ax-ground.is-flow .ax-ground__view { min-block-size: 30rem; }
  .ax-ground.is-stage .ax-ground__peaks {
    position: absolute;
    inset: 0;
    display: block;
    pointer-events: none;
  }
  .ax-ground.is-stage .ax-ground__peak {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
    transform: translate(calc(var(--ax-gx, -999px) - 50%), calc(var(--ax-gy, -999px) - 100%));
    pointer-events: auto;
    visibility: hidden;
  }
  /* the names appear with their mountains, as the block is cut open */
  .ax-ground.is-stage.is-placed .ax-ground__peak {
    visibility: visible;
    opacity: 0;
    transition: opacity .6s var(--ax-ease-out) .45s;
  }
  .ax-ground.is-stage.is-open .ax-ground__peak,
  .ax-ground.is-stage .ax-ground__peak:focus-within { opacity: 1; }
  .ax-ground.is-stage .ax-ground__visit { justify-items: center; text-align: center; padding: var(--ax-sp-2) var(--ax-sp-4); }
  .ax-ground.is-stage .ax-ground__name { font-size: var(--ax-fs-sm); }
  /* a hairline from the name down to its summit */
  .ax-ground.is-stage .ax-ground__peak::after {
    content: "";
    position: absolute;
    inset-inline-start: 50%;
    inset-block-start: 100%;
    inline-size: 1px;
    block-size: 12px;
    background: linear-gradient(to bottom, rgb(var(--ax-white-rgb) / .45), rgb(var(--ax-white-rgb) / 0));
  }
}
@media (min-width: 960px) and (max-height: 760px) {
  .ax-ground.is-pin .ax-ground__what { font-size: var(--ax-fs-md); }
  .ax-ground.is-pin .ax-ground__where { font-size: var(--ax-fs-xs); }
}
/* a narrow wide screen: the years go above the name, so the name fits on
   one line */
@media (min-width: 960px) and (max-width: 1199px) {
  .ax-ground.is-stage .ax-ground__layer { grid-template-columns: minmax(0, 1fr); row-gap: var(--ax-sp-2); }
  .ax-ground.is-stage .ax-ground__what { font-size: var(--ax-fs-md); }
  .ax-ground.is-stage .ax-ground__where { font-size: var(--ax-fs-xs); }
}

/* THE PHONE: the head and the two names scroll away, then the core stands
   in a column on the left, as tall as the list. */
@media (max-width: 959px) {
  .ax-ground.is-stage .ax-ground__grid {
    grid-template-columns: clamp(64px, 22vw, 168px) minmax(0, 1fr);
    grid-template-areas:
      "head  head"
      "peaks peaks"
      "view  layers";
    grid-template-rows: auto auto minmax(0, 1fr);
    column-gap: var(--ax-sp-7);
    row-gap: var(--ax-sp-8);
  }
  .ax-ground__layer { grid-template-columns: minmax(0, 1fr); row-gap: var(--ax-sp-2); }
  .ax-ground.is-stage .ax-ground__layer { padding-inline-start: 0; }
  .ax-ground.is-stage .ax-ground__layer::after { inset-inline-start: -.75rem; }
  .ax-ground.is-stage .ax-ground__peaks { gap: var(--ax-sp-2) var(--ax-sp-7); margin-block-end: var(--ax-sp-5); }
  /* the name and the arrow only; the address stays for screen readers */
  .ax-ground.is-stage .ax-ground__visit {
    display: inline-flex;
    align-items: center;
    column-gap: var(--ax-sp-3);
    padding-block: var(--ax-sp-3);
  }
  .ax-ground.is-stage .ax-ground__url { font-size: 0; letter-spacing: 0; }
  .ax-ground.is-stage .ax-ground__name { font-size: var(--ax-fs-sm); }
  .ax-ground__what { font-size: var(--ax-fs-md); }
  .ax-ground__where { font-size: var(--ax-fs-xs); line-height: 1.4; }
  .ax-ground.is-stage .ax-ground__years { font-size: var(--ax-fs-3xs); }
  /* a narrow list: a layer with more to say gets a little more of the height */
  .ax-ground.is-pin .ax-ground__layer { flex-basis: auto; }
  .ax-ground.is-flow .ax-ground__layer { padding-block: var(--ax-sp-6); }
}

/* a tablet held upright: the same core, the words at their full size */
@media (min-width: 600px) and (max-width: 959px) {
  .ax-ground .ax-ground__what { font-size: var(--ax-fs-lg); }
  .ax-ground .ax-ground__where { font-size: var(--ax-fs-sm); }
  .ax-ground.is-stage .ax-ground__years { font-size: var(--ax-fs-2xs); }
  .ax-ground.is-stage .ax-ground__grid { column-gap: var(--ax-sp-10); }
}

@media print, (forced-colors: active) {
  .ax-ground__gl { display: none !important; }
  .ax-ground.is-pin .ax-ground__run { block-size: auto; }
  .ax-ground.is-pin .ax-ground__pin { position: static; block-size: auto; overflow: visible; }
  .ax-ground.is-stage .ax-ground__layer::before { display: block; }
}

/* ══ SECTION 4 · THE PEOPLE (round 104) ══════════════════════════════════
   Plain first: the words; beside them the mark (the logo's own picture)
   with the four countries the engineers work from; and the five, each an
   ordinary image over a name, a role and a line, in one row on a wide
   screen, three or two to a row below it. Every portrait ends in the same
   bust, whatever the photograph had below the shoulders: the image's mask
   here, the canvas's own dissolve over it. With the canvas (.is-stage) the
   images keep their boxes, which is where the canvas draws, and step aside
   once its first frame exists (.is-live). --ax-people-stage is the height
   of the mark's stage; the countries are placed from it. */

.ax-people {
  position: relative;
  isolation: isolate;
  overflow: clip;
  --ax-people-stage: clamp(10rem, 50vw, 15rem);
  padding-block: var(--ax-section);
  background: var(--ax-bg);
}

.ax-people__gl { display: none; }

.ax-people__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--ax-sp-8);
}

/* ── the words ── sections 2, 3 and 5's head, in style */

.ax-people__head {
  display: grid;
  justify-items: start;
  align-content: center;
}
.ax-people__label {
  display: inline-flex;
  align-items: center;
  gap: var(--ax-sp-5);
  margin: 0;
  font-family: var(--ax-font-mono);
  font-size: var(--ax-fs-3xs);
  line-height: var(--ax-lh-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ax-text-muted);
}
.ax-people__label::before {
  content: "";
  flex: none;
  inline-size: 14px;
  block-size: 1px;
  background: rgb(var(--ax-white-rgb) / .42);
  transform: rotate(-60deg);
}
.ax-people__line {
  margin: var(--ax-sp-4) 0 0;
  max-inline-size: 15ch;
  font-size: var(--ax-fs-d3, var(--ax-fs-2xl));
  font-weight: var(--ax-fw-bold);
  line-height: var(--ax-lh-display);
  letter-spacing: var(--ax-tr-hero);
  color: var(--ax-text-strong);
  text-wrap: balance;
}
.ax-people__say {
  margin: var(--ax-sp-6) 0 0;
  max-inline-size: 40ch;
  font-size: var(--ax-fs-lg);
  line-height: var(--ax-lh-lead);
  color: var(--ax-text-body);
  text-wrap: pretty;
}

/* ── the stage: the mark, and the four countries round it ──────────── */

.ax-people__stage {
  position: relative;
  block-size: var(--ax-people-stage);
}
/* the mark stands in the middle, 78% of the stage tall (the logo's own
   box: 1377 by 1221 of the mark's units) */
.ax-people__mark {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  block-size: 78%;
  inline-size: auto;
  aspect-ratio: 1377 / 1221;
  transform: translate(-50%, -50%);
}
/* the countries: at the corners of a box round the mark — two on its
   left, two on its right — each with its light on the side facing it */
.ax-people__crew {
  position: absolute;
  inset-block: 0;
  inset-inline: max(0px, calc(50% - var(--ax-people-stage) * .44 - 11rem));
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}
.ax-people__where {
  position: absolute;
  display: flex;
  align-items: center;
  gap: var(--ax-sp-4);
  font-family: var(--ax-font-mono);
  font-size: var(--ax-fs-3xs);
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ax-text-muted);
  text-shadow: 0 0 8px var(--ax-bg), 0 0 3px var(--ax-bg);
  transition: color var(--ax-d-base) var(--ax-ease);
}
.ax-people__where::before {
  content: "";
  flex: none;
  inline-size: 5px;
  block-size: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px rgb(var(--ax-white-rgb) / .07);
}
.ax-people__where[data-ax-where="0"] { inset-block-start: 14%; inset-inline-start: 0; flex-direction: row-reverse; }
.ax-people__where[data-ax-where="1"] { inset-block-start: 26%; inset-inline-end: 0; }
.ax-people__where[data-ax-where="2"] { inset-block-start: 80%; inset-inline-end: 6%; }
.ax-people__where[data-ax-where="3"] { inset-block-start: 70%; inset-inline-start: 5%; flex-direction: row-reverse; }
/* a thought passing through a country lights its name */
.ax-people__where.is-lit { color: var(--ax-text-strong); }

/* ── the five ──────────────────────────────────────────────────────── */

.ax-people__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ax-sp-10) var(--ax-sp-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ax-people__one {
  position: relative;
  display: grid;
  align-content: start;
  justify-items: start;
  min-inline-size: 0;
}
/* a phone: the fifth stands alone in the middle of the last row */
.ax-people__one:nth-child(5) {
  grid-column: 1 / -1;
  justify-self: center;
  inline-size: calc((100% - var(--ax-sp-6)) / 2);
}
.ax-people__fig {
  position: relative;
  inline-size: 100%;
  aspect-ratio: 4 / 5;
}
/* the bust: whole to the shoulders, dissolving into the page below them */
.ax-people__photo {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 30%, #000 64%, transparent 100%);
  mask-image: radial-gradient(ellipse 62% 58% at 50% 30%, #000 64%, transparent 100%);
}
/* the name rises into the foot of the portrait, where it has dissolved */
.ax-people__name {
  margin: calc(var(--ax-sp-6) * -1) 0 0;
  font-size: clamp(var(--ax-fs-md), .75rem + .6vw, var(--ax-fs-lg));
  font-weight: var(--ax-fw-semibold);
  line-height: var(--ax-lh-head);
  letter-spacing: var(--ax-tr-lead);
  color: var(--ax-text-strong);
  text-wrap: balance;
}
.ax-people__role {
  margin: var(--ax-sp-3) 0 0;
  font-family: var(--ax-font-mono);
  font-size: var(--ax-fs-3xs);
  line-height: var(--ax-lh-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ax-text-muted);
  transition: color var(--ax-d-base) var(--ax-ease);
}
.ax-people__from {
  margin: var(--ax-sp-4) 0 0;
  font-size: var(--ax-fs-xs);
  line-height: 1.5;
  color: var(--ax-text-muted);
  text-wrap: pretty;
}
/* a name like Ex-Samsung never breaks at its hyphen */
.ax-people__from span { white-space: nowrap; }
.ax-people__link {
  display: inline-flex;
  align-items: center;
  gap: var(--ax-sp-3);
  margin-block-start: var(--ax-sp-3);
  padding-block: var(--ax-sp-2);
  font-family: var(--ax-font-mono);
  font-size: var(--ax-fs-2xs);
  line-height: 1.2;
  letter-spacing: .08em;
  color: var(--ax-text-muted);
  text-decoration: none;
  transition: color var(--ax-d-base) var(--ax-ease);
}
.ax-people__link svg {
  flex: none;
  inline-size: 12px;
  block-size: 12px;
  transition: transform var(--ax-d-base) var(--ax-ease);
}
.ax-people__link:hover,
.ax-people__link:focus-visible { color: var(--ax-accent-text); }
.ax-people__link:hover svg { transform: translateX(2px); }
/* pointing at someone (the script marks them): their role lights, and
   the canvas lights the blades they drew */
.ax-people__one.is-lit .ax-people__role { color: var(--ax-accent-text); }

/* ── with the canvas ─────────────────────────────────────────────────── */

.ax-people.is-stage .ax-people__gl {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s var(--ax-ease-out);
}
/* the canvas is shown when its first frame exists. The images step aside
   as soon as the canvas can draw, so each arrival is the first time that
   person appears. They keep their boxes, which is where it draws, and
   (transparent, not hidden) they keep their names for a screen reader. */
.ax-people.is-live .ax-people__gl { opacity: 1; }
.ax-people.is-stage .ax-people__photo,
.ax-people.is-stage .ax-people__mark,
.ax-people.is-stage .ax-people__where::before { opacity: 0; }
/* the countries hang in the field, so they move with it */
.ax-people.is-stage .ax-people__crew { will-change: transform; }

/* A TABLET: three to a row, the last two in the middle */
@media (min-width: 600px) {
  .ax-people__list {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: var(--ax-sp-8);
  }
  .ax-people__one { grid-column: span 2; }
  .ax-people__one:nth-child(4) { grid-column: 2 / span 2; }
  .ax-people__one:nth-child(5) {
    grid-column: 4 / span 2;
    justify-self: stretch;
    inline-size: auto;
  }
}

/* A WIDE SCREEN: the words and the mark side by side, the five in one row
   under them */
@media (min-width: 960px) {
  .ax-people { --ax-people-stage: clamp(15rem, 34svh, 21rem); }
  .ax-people__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--ax-sp-12);
    row-gap: clamp(1.5rem, 5svh, 3.5rem);
  }
  .ax-people__head { grid-column: 1; grid-row: 1; }
  .ax-people__stage { grid-column: 2; grid-row: 1; align-self: center; }
  .ax-people__list {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: clamp(1rem, 2.2vw, 2rem);
  }
  .ax-people__one,
  .ax-people__one:nth-child(4),
  .ax-people__one:nth-child(5) { grid-column: auto; }
}
@media (min-width: 960px) and (max-height: 760px) {
  .ax-people__say { font-size: var(--ax-fs-md); }
}

@media print, (forced-colors: active) {
  .ax-people__gl { display: none !important; }
  .ax-people.is-stage .ax-people__photo,
  .ax-people.is-stage .ax-people__mark,
  .ax-people.is-stage .ax-people__where::before { opacity: 1; }
}

/* ══ SECTION 5 · BASE CAMP ═══════════════════════════════════════════════
   Plain first: a night sky drawn in CSS, the skyline as a picture standing
   at the water's edge, the words in the sky above it and at its foot. With
   the canvas (.is-stage) the picture keeps its box — the canvas draws the
   city there, under Calgary's real sky — and is hidden only once the first
   frame exists (.is-live). The script sets data-sky (day, dusk, night) for
   the hour, which is all the plain version needs of the clock. --ax-hdr is
   the header's height, measured by the script. */

.ax-camp {
  --ax-hdr: 86px;
  --camp-water: clamp(172px, 24%, 360px);
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: grid;
  background: linear-gradient(180deg, var(--ax-bg) 0%, #03060d 12%, #060b18 48%, #121634 74%, #1b1a3c 78%);
}
.ax-camp[data-sky="dusk"] {
  background: linear-gradient(180deg, var(--ax-bg) 0%, #0a1330 16%, #2b2f62 52%, #7c4f78 70%, #d27b5f 78%);
}
.ax-camp[data-sky="day"] {
  background: linear-gradient(180deg, var(--ax-bg) 0%, #11284a 16%, #1d4677 48%, #5f86ad 70%, #88a9c8 78%);
}
@media (max-width: 767px) {
  .ax-camp { --ax-hdr: 70px; }
}

.ax-camp__gl { display: none; }

.ax-camp__head,
.ax-camp__foot {
  position: relative;
  z-index: 2;
}

/* ── the city, and the water under it ─────────────────────────────────── */

.ax-camp__stage {
  pointer-events: none;
}
.ax-camp__stage::after {
  content: "";
  position: absolute;
  inset-inline: -100vw;
  inset-block-end: 0;
  block-size: var(--camp-water);
  background: linear-gradient(180deg, #05080e 0%, #03050a 60%, var(--ax-bg) 100%);
}
/* the bank the city stands on, carried on past both ends of the city */
.ax-camp__stage::before {
  content: "";
  position: absolute;
  inset-inline: -100vw;
  inset-block-end: var(--camp-water);
  block-size: var(--camp-bank, 1.7vw);
  background: #05090e;
}
.ax-camp__city {
  position: absolute;
  z-index: 1;
  display: block;
  block-size: auto;
  max-inline-size: none;
}

/* the name of a landmark under the pointer (the script places it) */
.ax-camp__plate {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 3;
  margin: 0;
  padding: var(--ax-sp-2) var(--ax-sp-3);
  border-radius: var(--ax-r-sm);
  background: rgb(5 7 12 / .72);
  font-family: var(--ax-font-mono);
  font-size: var(--ax-fs-2xs);
  line-height: 1.2;
  letter-spacing: .04em;
  white-space: nowrap;
  color: var(--ax-text-body);
  pointer-events: none;
}
.ax-camp__plate b { font-weight: var(--ax-fw-semibold); color: var(--ax-text-strong); }
.ax-camp.is-pointing { cursor: pointer; }

/* ── the words ── section 4's head, in style */

.ax-camp__label {
  display: inline-flex;
  align-items: center;
  gap: var(--ax-sp-5);
  margin: 0;
  font-family: var(--ax-font-mono);
  font-size: var(--ax-fs-3xs);
  line-height: var(--ax-lh-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ax-text-muted);
}
.ax-camp__label::before {
  content: "";
  flex: none;
  inline-size: 14px;
  block-size: 1px;
  background: rgb(var(--ax-white-rgb) / .42);
  transform: rotate(-60deg);
}
.ax-camp__line {
  margin: var(--ax-sp-4) 0 0;
  max-inline-size: 15ch;
  font-size: var(--ax-fs-d3, var(--ax-fs-2xl));
  font-weight: var(--ax-fw-bold);
  line-height: var(--ax-lh-display);
  letter-spacing: var(--ax-tr-hero);
  color: var(--ax-text-strong);
  text-wrap: balance;
}
.ax-camp__say {
  margin: var(--ax-sp-5) 0 0;
  max-inline-size: 36ch;
  font-size: var(--ax-fs-md);
  line-height: var(--ax-lh-lead);
  color: var(--ax-text-body);
  text-wrap: pretty;
}
.ax-camp__now {
  margin: 0;
  font-family: var(--ax-font-mono);
  font-size: var(--ax-fs-2xs);
  line-height: 1.5;
  letter-spacing: .04em;
  color: var(--ax-text-body);
}
.ax-camp__now time { color: var(--ax-text-strong); font-weight: var(--ax-fw-semibold); }
.ax-camp__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ax-sp-3) var(--ax-sp-6);
  margin-block-start: var(--ax-sp-4);
}
.ax-camp__where {
  display: inline-flex;
  align-items: center;
  gap: var(--ax-sp-2);
  margin: 0;
  font-style: normal;
  font-size: var(--ax-fs-sm);
  line-height: 1.4;
  color: var(--ax-text-body);
}
.ax-camp__where svg,
.ax-camp__link svg {
  flex: none;
  inline-size: 14px;
  block-size: 14px;
}
.ax-camp__where svg { color: var(--ax-text-muted); }
.ax-camp__link {
  display: inline-flex;
  align-items: center;
  gap: var(--ax-sp-2);
  padding-block: var(--ax-sp-2);
  font-family: var(--ax-font-mono);
  font-size: var(--ax-fs-2xs);
  line-height: 1.2;
  letter-spacing: .08em;
  color: var(--ax-text-muted);
  text-decoration: none;
  transition: color var(--ax-d-base) var(--ax-ease);
}
.ax-camp__link svg { inline-size: 12px; block-size: 12px; transition: transform var(--ax-d-base) var(--ax-ease); }
.ax-camp__link:hover,
.ax-camp__link:focus-visible { color: var(--ax-accent-text); }
.ax-camp__link:hover svg { transform: translateX(2px); }

/* ── with the canvas ─────────────────────────────────────────────────── */

.ax-camp.is-stage .ax-camp__gl {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s var(--ax-ease-out);
}
.ax-camp.is-live .ax-camp__gl { opacity: 1; }
.ax-camp.is-stage .ax-camp__city,
.ax-camp.is-stage .ax-camp__stage::before,
.ax-camp.is-stage .ax-camp__stage::after { opacity: 0; }

/* A WIDE SCREEN: one screen, like a photograph. The city stands on the
   right, its low western end tapering toward the mountains on the left;
   the water is the lowest quarter. The words sit in the sky over the
   mountains, and at the foot of the picture, on the water. */
@media (min-width: 960px) {
  .ax-camp {
    min-block-size: calc(100vh - var(--ax-hdr));
    min-block-size: max(640px, calc(100svh - var(--ax-hdr)));
  }
  .ax-camp__grid {
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding-block: clamp(40px, 7svh, 96px) 0;
  }
  .ax-camp__stage {
    position: absolute;
    inset: 0;
  }
  .ax-camp__city {
    inset-inline-end: -1.5%;
    inset-block-end: var(--camp-water);
    inline-size: min(76%, calc((100svh - var(--ax-hdr)) * 1.62));
  }
  .ax-camp { --camp-bank: calc(min(76vw, (100svh - var(--ax-hdr)) * 1.62) * .02222); }
  .ax-camp__foot {
    grid-row: 3;
    padding-block: 0 clamp(20px, 4svh, 44px);
  }
}
@media (min-width: 960px) and (max-height: 760px) {
  .ax-camp__say { font-size: var(--ax-fs-sm); }
}

/* A PHONE: the words, a tall sky over the core of downtown (the tower to
   The Bow), the water, and the words at its foot. A tablet held upright
   sees more of the city, from Eighth Avenue Place. */
@media (max-width: 959px) {
  .ax-camp {
    padding-block: var(--ax-section) 0;
    --camp-water: 36.2%;
    --camp-bank: calc((100vw - var(--ax-gutter) * 2) * 2.3 * .02222);
  }
  .ax-camp__stage {
    position: relative;
    margin-block-start: clamp(120px, 38vw, 260px);
    aspect-ratio: 1 / .9;
  }
  .ax-camp__city {
    inset-block-start: 0;
    inset-inline-start: -88%;
    inline-size: 230%;
  }
  .ax-camp__foot {
    padding-block: var(--ax-sp-2) var(--ax-section);
  }
}
@media (min-width: 600px) and (max-width: 959px) {
  .ax-camp {
    --camp-water: 34.8%;
    --camp-bank: calc((100vw - var(--ax-gutter) * 2) * 1.5 * .02222);
  }
  .ax-camp__stage { aspect-ratio: 1 / .575; }
  .ax-camp__city {
    inset-inline-start: -37%;
    inline-size: 150%;
  }
}

@media print, (forced-colors: active) {
  .ax-camp__gl { display: none !important; }
  .ax-camp.is-stage .ax-camp__city,
  .ax-camp.is-stage .ax-camp__stage::before,
  .ax-camp.is-stage .ax-camp__stage::after { opacity: 1; }
}