/* ═══════════════════════════════════════════════════════════════════════
   2gue RC Crawlers
   Digital experience by Simplicity — https://www.splicity.com/

   Palette is read off the photographs: basalt and grit for ground, limestone
   dust for type, and the orange recovery boards that ride on nearly every roof
   rack in the archive for accent. Archivo is used on both ends of its width
   axis — expanded for the wordmark and headlines, condensed for labels — which
   is what gives the type its machined feel without a second display family.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Grounds */
  --basalt: #0b0a09;
  --stone: #141210;
  --grit: #221e1a;
  --grit-2: #2e2823;

  /* Type */
  --dust: #e8dfd1;
  --ash: #968b7e;
  --ash-dim: #6b6259;

  /* Accent */
  --ember: #e4622a;
  --ember-hot: #ff7b3d;
  --river: #4e86a6;

  /* Tint eased toward the centred gallery photo — see gallery.js */
  --tint: #221e1a;

  --hair: color-mix(in srgb, var(--dust) 14%, transparent);
  --hair-soft: color-mix(in srgb, var(--dust) 8%, transparent);

  --sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --disp: 'Archivo', var(--sans);
  --mono: 'Martian Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  --nav-h: 68px;
  --gut: clamp(1.25rem, 5vw, 4.5rem);
  --maxw: 1440px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ── Reset ─────────────────────────────────────────────────────────────── */

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
}

body {
  background: var(--basalt);
  color: var(--dust);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* The crew wall translates a strip wider than the viewport. */
  overflow-x: clip;
}

img,
picture,
canvas,
svg { display: block; max-width: 100%; }

img { height: auto; }

button,
input { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; }

a { color: inherit; }

ul, ol { list-style: none; padding: 0; }

dl, dd { margin: 0; }

:focus-visible {
  outline: 2px solid var(--ember-hot);
  outline-offset: 3px;
  border-radius: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% -140%;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--ember);
  color: #fff;
  font: 600 0.875rem/1 var(--sans);
  text-decoration: none;
  transition: translate 0.2s var(--ease);
}
.skip:focus { translate: -50% 0; }

/* ── Type primitives ───────────────────────────────────────────────────── */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ember);
  display: flex;
  align-items: center;
  gap: 0.7em;
}
.eyebrow::before {
  content: '';
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  flex: none;
  opacity: 0.7;
}

.h2 {
  font-family: var(--disp);
  font-variation-settings: 'wdth' 112, 'wght' 780;
  font-size: clamp(2.1rem, 1.1rem + 4.4vw, 5rem);
  line-height: 0.94;
  letter-spacing: -0.025em;
  margin-top: 0.5rem;
  text-wrap: balance;
}

.lede {
  color: var(--ash);
  font-size: clamp(1rem, 0.95rem + 0.32vw, 1.1875rem);
  line-height: 1.6;
  max-width: 54ch;
  margin-top: 1.25rem;
  text-wrap: pretty;
}

.sect { position: relative; padding-block: clamp(4rem, 7vw, 7rem); }

.head { max-width: 68ch; }
.head--center { max-width: 60ch; margin-inline: auto; text-align: center; }
.head--center .eyebrow { justify-content: center; }
.head--center .lede { margin-inline: auto; }

.head--row {
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2rem;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */

.btn {
  --btn-bg: var(--ember);
  --btn-fg: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 1.6rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--disp);
  font-variation-settings: 'wdth' 88, 'wght' 700;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid var(--btn-bg);
  transition: background 0.25s var(--ease), color 0.25s var(--ease),
    border-color 0.25s var(--ease), translate 0.25s var(--ease);
}
.btn:hover { --btn-bg: var(--ember-hot); translate: 0 -2px; }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--dust);
  border-color: var(--hair);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover {
  --btn-bg: color-mix(in srgb, var(--dust) 10%, transparent);
  --btn-fg: var(--dust);
  border-color: color-mix(in srgb, var(--dust) 34%, transparent);
}

.btn--sm { padding: 0.65rem 1.15rem; font-size: 0.75rem; }
.btn--lg { padding: 1.1rem 2.1rem; font-size: 0.875rem; }

/* ── Nav ───────────────────────────────────────────────────────────────── */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-inline: var(--gut);
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: color-mix(in srgb, var(--basalt) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--hair-soft);
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  margin-right: auto;
}
.nav__brand img { width: 34px; height: 34px; }
.nav__word {
  font-family: var(--disp);
  font-variation-settings: 'wdth' 118, 'wght' 800;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
}

.nav__links { display: none; gap: clamp(1rem, 2vw, 2rem); }
.nav__links a {
  position: relative;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ash);
  padding-block: 0.4rem;
  transition: color 0.25s var(--ease);
}
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--ember);
  scale: 0 1;
  transform-origin: left;
  transition: scale 0.3s var(--ease);
}
.nav__links a:hover,
.nav__links a.is-active { color: var(--dust); }
.nav__links a:hover::after,
.nav__links a.is-active::after { scale: 1 1; }

.nav__cta { display: none; }

.nav__toggle {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin-right: -0.5rem;
}
.nav__bars { display: grid; gap: 6px; width: 22px; }
.nav__bars i {
  display: block;
  height: 1.5px;
  background: var(--dust);
  transition: translate 0.3s var(--ease), rotate 0.3s var(--ease);
}
.nav__toggle[aria-expanded='true'] .nav__bars i:first-child { translate: 0 3.75px; rotate: 45deg; }
.nav__toggle[aria-expanded='true'] .nav__bars i:last-child { translate: 0 -3.75px; rotate: -45deg; }

@media (min-width: 900px) {
  .nav__links { display: flex; }
  .nav__cta { display: inline-flex; }
  .nav__toggle { display: none; }
}

/* Mobile menu — a deliberate panel, not a dropdown. */
.menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--basalt);
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s;
}
.menu.is-open { opacity: 1; visibility: visible; }

.menu__inner {
  width: min(100%, 30rem);
  padding: var(--nav-h) var(--gut) var(--gut);
  display: grid;
  gap: 0.25rem;
}
.menu__inner > a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--hair-soft);
  font-family: var(--disp);
  font-variation-settings: 'wdth' 108, 'wght' 700;
  font-size: clamp(1.9rem, 9vw, 2.75rem);
  line-height: 1;
  text-decoration: none;
  translate: 0 14px;
  opacity: 0;
  transition: translate 0.5s var(--ease), opacity 0.5s var(--ease), color 0.25s;
}
.menu.is-open .menu__inner > a { translate: 0 0; opacity: 1; }
.menu__inner > a:nth-child(1) { transition-delay: 0.06s; }
.menu__inner > a:nth-child(2) { transition-delay: 0.12s; }
.menu__inner > a:nth-child(3) { transition-delay: 0.18s; }
.menu__inner > a:nth-child(4) { transition-delay: 0.24s; }
.menu__inner > a:hover { color: var(--ember); }
.menu__inner em {
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  color: var(--ember);
}

.menu__foot {
  margin-top: 1.75rem;
  display: grid;
  gap: 1rem;
  justify-items: start;
  opacity: 0;
  translate: 0 14px;
  transition: translate 0.5s var(--ease) 0.3s, opacity 0.5s var(--ease) 0.3s;
}
.menu.is-open .menu__foot { opacity: 1; translate: 0 0; }
.menu__fb {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ash);
  text-decoration: none;
  border-bottom: 1px solid var(--hair);
  padding-bottom: 2px;
}
.menu__fb:hover { color: var(--dust); border-bottom-color: var(--ember); }

body.is-locked { overflow: hidden; }

/* ── Hero ──────────────────────────────────────────────────────────────── */

/* Without WebGL the section is the pin: one viewport, contents laid out inside
   it. With WebGL, crawl.js gives .hero a multi-viewport height and .hero__pin
   sticks — so the same markup serves both paths. */
.hero { position: relative; }

.hero__pin {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  padding: calc(var(--nav-h) + 2rem) var(--gut) clamp(2.5rem, 6vw, 4.5rem);
  overflow: hidden;
  isolation: isolate;
}

.hero.has-gl .hero__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 0;
}

.hero__stage { position: absolute; inset: 0; z-index: -2; }

.hero__photo,
.hero__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero__photo img {
  object-fit: cover;
  object-position: 50% 42%; /* keeps the convoy and the gorge in a wide frame */
  /* Ken Burns on the fallback path. Killed when WebGL takes over, and by
     reduced-motion. */
  animation: kb 26s var(--ease-io) infinite alternate;
}
@keyframes kb {
  from { scale: 1.06; translate: 0 0; }
  to { scale: 1.16; translate: -1.5% -1.5%; }
}

.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.9s var(--ease);
}
.hero.has-gl .hero__canvas { opacity: 1; }
.hero.has-gl .hero__photo img { animation: none; }

/* The reveal: at the top of the scroll the photo is hidden behind the scene;
   by the end the scene has faded out and left the real photograph. */
.hero.has-gl .hero__photo {
  opacity: 0;
  transition: opacity 1.1s var(--ease);
}
.hero.has-gl.is-revealed .hero__photo { opacity: 1; }
.hero.has-gl.is-revealed .hero__canvas { opacity: 0; }

/* Default is the heavy scrim, because the default hero is the photograph — a
   daylight frame under this headline is the harder legibility problem, and it
   is also what every non-WebGL visitor sees. */
.hero__scrim {
  position: absolute;
  inset: 0;
  transition: background 0.9s var(--ease);
  background:
    linear-gradient(to top, var(--basalt) 1%, color-mix(in srgb, var(--basalt) 74%, transparent) 32%, transparent 66%),
    linear-gradient(to right, color-mix(in srgb, var(--basalt) 86%, transparent), color-mix(in srgb, var(--basalt) 34%, transparent) 48%, transparent 72%);
}
/* While the 3D scene is up it is already dark, so the scrim backs off and lets
   the ridge show. The right side — where the camera pan puts the truck — stays
   clear in both cases. */
.hero.has-gl:not(.is-revealed) .hero__scrim {
  background:
    linear-gradient(to top, var(--basalt) 0%, color-mix(in srgb, var(--basalt) 52%, transparent) 24%, transparent 56%),
    linear-gradient(to right, color-mix(in srgb, var(--basalt) 76%, transparent), color-mix(in srgb, var(--basalt) 18%, transparent) 44%, transparent 64%);
}

.hero__copy { position: relative; max-width: 58rem; }

.hero__eyebrow {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ash);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.hero__eyebrow::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--ember) 60%, transparent);
  animation: ping 2.8s var(--ease-io) infinite;
  flex: none;
}
@keyframes ping {
  0%, 70%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ember) 55%, transparent); }
  35% { box-shadow: 0 0 0 9px transparent; }
}

.hero__title {
  font-family: var(--disp);
  font-size: clamp(2.75rem, 1rem + 8.6vw, 8.5rem);
  line-height: 0.86;
  letter-spacing: -0.035em;
  display: grid;
}
.hero__l1 { font-variation-settings: 'wdth' 76, 'wght' 500; color: var(--ash); }
.hero__l2 { font-variation-settings: 'wdth' 120, 'wght' 830; }

.hero__sub {
  color: var(--ash);
  font-size: clamp(1rem, 0.94rem + 0.35vw, 1.1875rem);
  max-width: 44ch;
  margin-top: 1.5rem;
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

/* Stage readout — desktop WebGL only. */
.hero__hud {
  position: absolute;
  right: var(--gut);
  bottom: clamp(2.5rem, 6vw, 4.5rem);
  display: none;
  width: 15rem;
  padding-left: 1rem;
  border-left: 1px solid var(--hair);
}
@media (min-width: 1024px) {
  .hero.has-gl .hero__hud { display: block; }
}
.hero__hudN {
  display: block;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  color: var(--ember);
}
.hero__hudL {
  display: block;
  font-family: var(--disp);
  font-variation-settings: 'wdth' 88, 'wght' 700;
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 0.2rem;
}
.hero__hudC {
  display: block;
  color: var(--ash);
  font-size: 0.8125rem;
  line-height: 1.45;
  margin-top: 0.35rem;
}

.hero__hint {
  position: absolute;
  left: 50%;
  bottom: 1.1rem;
  translate: -50% 0;
  display: none;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ash-dim);
}
.hero__hint i {
  width: 1px;
  height: 26px;
  background: linear-gradient(var(--ember), transparent);
  animation: drop 2s var(--ease-io) infinite;
}
@keyframes drop {
  0% { scale: 1 0; transform-origin: top; }
  50% { scale: 1 1; transform-origin: top; }
  51% { scale: 1 1; transform-origin: bottom; }
  100% { scale: 1 0; transform-origin: bottom; }
}
@media (min-width: 1024px) { .hero__hint { display: flex; } }

/* ── The Machines ──────────────────────────────────────────────────────── */

.mach { margin-top: clamp(2.5rem, 5vw, 4rem); }

.mach__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 78vh;
  overflow: hidden;
  background: var(--stone);
}
@media (min-width: 760px) { .mach__stage { aspect-ratio: 16 / 9; } }

.mach__frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.7s var(--ease);
}
.mach__frame.is-on { opacity: 1; }
.mach__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  /* Parallax handle — main.js writes --mx/--my from the pointer. */
  scale: 1.08;
  translate: calc(var(--mx, 0) * -14px) calc(var(--my, 0) * -14px);
  transition: translate 0.5s var(--ease);
}
.mach__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, color-mix(in srgb, var(--basalt) 92%, transparent) 4%, transparent 55%),
    linear-gradient(to right, color-mix(in srgb, var(--basalt) 62%, transparent), transparent 55%);
}

.mach__label {
  position: absolute;
  left: var(--gut);
  bottom: clamp(1.25rem, 3vw, 2.5rem);
  z-index: 2;
  max-width: 30rem;
  pointer-events: none;
}
.mach__tag {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ember);
}
.mach__name {
  font-family: var(--disp);
  font-variation-settings: 'wdth' 114, 'wght' 800;
  font-size: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-top: 0.35rem;
}
.mach__note {
  color: var(--ash);
  font-size: 0.9375rem;
  line-height: 1.5;
  margin-top: 0.6rem;
  max-width: 34ch;
}

.mach__list {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.25rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 0.25rem;
  scroll-snap-type: x proximity;
}
.mach__list::-webkit-scrollbar { display: none; }

.mach__btn {
  flex: none;
  scroll-snap-align: start;
  padding: 0.6rem 1rem;
  border: 1px solid var(--hair-soft);
  color: var(--ash);
  font-family: var(--disp);
  font-variation-settings: 'wdth' 82, 'wght' 620;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.mach__btn:hover { color: var(--dust); border-color: var(--hair); }
.mach__btn[aria-selected='true'] {
  color: var(--basalt);
  background: var(--dust);
  border-color: var(--dust);
}

/* ── Band CTA ──────────────────────────────────────────────────────────── */

.band {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border: 1px solid var(--hair-soft);
  background: linear-gradient(120deg, var(--stone), transparent 70%);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
}
.band__t {
  font-family: var(--disp);
  font-variation-settings: 'wdth' 108, 'wght' 760;
  font-size: clamp(1.25rem, 1rem + 1.2vw, 2rem);
  line-height: 1.05;
  flex: none;
}
.band__c { color: var(--ash); font-size: 0.9375rem; flex: 1 1 16rem; }
.band .btn { margin-left: auto; }
.band--alt { background: linear-gradient(120deg, transparent, var(--stone) 80%); }

/* ── The Terrain ───────────────────────────────────────────────────────
   Alternating picture / caption rows. The figure carries the photograph's own
   aspect ratio, so the box is exactly the shape of the image inside it and
   nothing is cropped, letterboxed or stretched. */

.terr {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.terr__item {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
}

@media (min-width: 820px) {
  /* The picture column is sized to the picture. A fractional column would be
     wider than a 3:4 frame and leave a band of dead space beside it, which is
     what makes an editorial spread look unfinished. */
  .terr__item {
    grid-template-columns: auto minmax(15rem, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
  }
  .terr__item[data-flip] { grid-template-columns: minmax(15rem, 1fr) auto; }
  /* Odd rows put the picture on the right. The DOM order stays
     picture-then-caption, so a screen reader and the tab order are unaffected. */
  .terr__item[data-flip] .terr__fig { order: 2; }
  /* Height is fixed and width follows from the ratio, so the four rows share a
     horizon even though the photographs do not share a shape. Letting a 3:4
     frame fill the column instead would make it a thousand pixels tall. */
  .terr__fig {
    height: clamp(18rem, 38vw, 29rem);
    width: auto;
  }
}

.terr__fig {
  position: relative;
  margin: 0;
  aspect-ratio: var(--ar, 4 / 3);
  background: var(--stone);
  overflow: hidden;
}
.terr__fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-size: cover;
  background-position: center;
  transition: scale 0.9s var(--ease);
}
.terr__item:hover .terr__fig img { scale: 1.03; }

/* A hairline rule that grows from the number out to the edge of the caption —
   the only piece of decoration in the section. */
.terr__body { position: relative; }
.terr__n {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.24em;
  color: var(--ember);
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.terr__n::after {
  content: '';
  height: 1px;
  flex: 1;
  background: linear-gradient(to right, var(--ember), transparent);
  opacity: 0.55;
}
.terr__name {
  font-family: var(--disp);
  font-variation-settings: 'wdth' 116, 'wght' 800;
  font-size: clamp(1.8rem, 1rem + 3.4vw, 3.5rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin-top: 0.6rem;
}
.terr__note {
  color: var(--ash);
  font-size: clamp(0.9375rem, 0.9rem + 0.3vw, 1.125rem);
  max-width: 36ch;
  margin-top: 0.75rem;
  text-wrap: pretty;
}

/* The scale line — the point of the whole section. */
.terr__scale {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--hair-soft);
  font-family: var(--disp);
  font-variation-settings: 'wdth' 92, 'wght' 600;
  font-size: clamp(1rem, 0.9rem + 0.9vw, 1.6rem);
  line-height: 1.3;
  color: var(--ash);
  text-align: center;
  text-wrap: balance;
}
.terr__scale b {
  color: var(--dust);
  font-weight: inherit;
  font-variation-settings: 'wdth' 92, 'wght' 800;
}

/* ── The Gallery mosaic ────────────────────────────────────────────────
   Justified rows: gallery.js writes an explicit width and height onto every
   tile such that each row fills the measure exactly, with every width derived
   from that photograph's own ratio. Nothing here is cropped. */

.gal__filters { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.gal__f {
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--hair-soft);
  border-radius: 100px;
  color: var(--ash);
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.gal__f:hover { color: var(--dust); border-color: var(--hair); }
.gal__f[aria-pressed='true'] {
  color: var(--basalt);
  background: var(--dust);
  border-color: var(--dust);
}

.mosaic {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(2rem, 4vw, 3rem);
  /* Before the first layout pass the tiles have no width; without this they
     would flash at full width and reflow. */
  min-height: 12rem;
}

.tile {
  position: relative;
  flex: none;
  border: 0;
  padding: 0;
  background: var(--stone);
  overflow: hidden;
  cursor: pointer;
  transition: opacity 0.3s var(--ease);
}
.tile[hidden] { display: none; }

.tile__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-size: cover;
  background-position: center;
  transition: scale 0.7s var(--ease), filter 0.45s var(--ease);
}
.tile:hover .tile__img,
.tile:focus-visible .tile__img { scale: 1.045; }

/* Featured frames carry a hairline ember edge so the strongest photographs are
   marked without changing their shape. */
.tile[data-feat]::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid color-mix(in srgb, var(--ember) 55%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease);
}
.tile[data-feat]:hover::after,
.tile[data-feat]:focus-visible::after { opacity: 1; }

.tile__meta {
  position: absolute;
  inset: auto 0 0;
  padding: 2.75rem 0.9rem 0.85rem;
  background: linear-gradient(to top, color-mix(in srgb, var(--basalt) 94%, transparent), transparent);
  text-align: left;
  translate: 0 10px;
  opacity: 0;
  transition: translate 0.4s var(--ease), opacity 0.4s var(--ease);
}
.tile:hover .tile__meta,
.tile:focus-visible .tile__meta { translate: 0 0; opacity: 1; }
.tile__cat {
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ember);
}
.tile__alt {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--dust);
  margin-top: 0.2rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Narrow tiles cannot carry a two-line caption legibly. */
@media (max-width: 559px) {
  .tile__alt { -webkit-line-clamp: 1; font-size: 0.75rem; }
  .tile__meta { padding: 2rem 0.6rem 0.6rem; }
}

.mosaic__count {
  margin-top: 1.25rem;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ash-dim);
}

/* ── The Crew ──────────────────────────────────────────────────────────── */

.crew { overflow: hidden; }
.crew__band {
  position: absolute;
  inset: 0 0 auto;
  height: 60%;
  z-index: -1;
  opacity: 0.16;
  mask-image: linear-gradient(to bottom, transparent, #000 30%, transparent);
}
/* main.js adds .is-near a few hundred pixels out, so this fetch is not on the
   critical path for a section most of a page below the fold. */
.crew.is-near .crew__band { background: url('../img/hero/crew-lg.webp') center / cover no-repeat; }

.wall {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  gap: clamp(0.6rem, 1.4vw, 1rem);
  cursor: grab;
  user-select: none;
}
.wall.is-dragging { cursor: grabbing; }

.wall__row { overflow: hidden; }
.wall__strip {
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 1.4vw, 1rem);
  width: max-content;
  will-change: transform;
}
.wall__row { padding-block: 0.5rem; } /* room for the hover lift */

.card {
  flex: none;
  position: relative;
  height: clamp(8.5rem, 19vw, 14.5rem);
  width: auto;
  aspect-ratio: var(--ar, 4 / 3);
  overflow: hidden;
  background: var(--stone);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: scale 0.45s var(--ease), filter 0.45s var(--ease);
}
.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.04);
  transition: filter 0.45s var(--ease), scale 0.6s var(--ease);
}
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--basalt) 34%, transparent);
  transition: background 0.45s var(--ease);
}
.card:hover::after,
.card:focus-visible::after { background: transparent; }
.card:hover img,
.card:focus-visible img { filter: saturate(1.05) contrast(1); scale: 1.04; }

/* Pointer-fine only: the hovered frame lifts out of the row and its neighbours
   step back. On touch every card stays equal. */
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
  .wall__row:hover .card { opacity: 0.55; }
  .wall__row .card:hover {
    opacity: 1;
    scale: 1.07;
    z-index: 2;
  }
}

/* ── The event ─────────────────────────────────────────────────────────── */

.event {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding: clamp(1.75rem, 4vw, 3rem);
  border: 1px solid var(--hair-soft);
  background: linear-gradient(160deg, var(--stone), transparent 65%);
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (min-width: 900px) {
  .event { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; }
  .event__frames { grid-row: 1 / span 3; grid-column: 2; }
}

.event__name {
  font-family: var(--disp);
  font-variation-settings: 'wdth' 110, 'wght' 790;
  font-size: clamp(1.6rem, 1rem + 2.4vw, 3rem);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-top: 0.5rem;
}
.event__sub { color: var(--ash); font-size: 0.9375rem; margin-top: 0.4rem; }

.event__meta { display: grid; gap: 0.85rem; min-width: 0; }
.event__meta > div {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 0.75rem;
  align-items: baseline;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--hair-soft);
}
.event__meta dt {
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ash-dim);
}
.event__meta dd { font-size: 0.9375rem; }

.event__classes { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.event__classes li {
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--hair-soft);
  border-radius: 100px;
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ash);
}

.event__frames {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0.5rem;
  /* A grid item defaults to min-width:auto, so without this the flex row sizes
     to its content and runs past the column instead of wrapping — invisible
     here only because the body clips horizontal overflow. */
  min-width: 0;
}

.event__frames button {
  position: relative;
  flex: none;
  height: clamp(7rem, 15vw, 11rem);
  width: auto;
  aspect-ratio: var(--ar, 3 / 4);
  overflow: hidden;
  background: var(--stone);
  padding: 0;
  border: 0;
  cursor: pointer;
}
.event__frames img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 0.6s var(--ease), filter 0.4s var(--ease);
  filter: saturate(0.9);
}
.event__frames button:hover img,
.event__frames button:focus-visible img { scale: 1.06; filter: saturate(1.05); }

/* ── Final moment ──────────────────────────────────────────────────────── */

.final {
  position: relative;
  text-align: center;
  padding-block: clamp(6rem, 14vw, 12rem);
  overflow: hidden;
  isolation: isolate;
}
.final__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.42;
  scale: 1.06;
}
.final.is-near .final__bg { background: url('../img/hero/summit-lg.webp') center 34% / cover no-repeat; }
.final::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70% 60% at 50% 55%, transparent, var(--basalt) 88%),
    linear-gradient(to bottom, var(--basalt), transparent 22%, transparent 74%, var(--basalt));
}

.final__inner { display: grid; justify-items: center; }
.final .eyebrow { justify-content: center; }
.final__t {
  font-family: var(--disp);
  font-variation-settings: 'wdth' 118, 'wght' 840;
  font-size: clamp(2.5rem, 1rem + 7vw, 6.5rem);
  line-height: 0.9;
  letter-spacing: -0.035em;
  margin-top: 0.6rem;
}
.final__c {
  color: var(--ash);
  max-width: 46ch;
  margin-top: 1.25rem;
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.125rem);
  text-wrap: pretty;
}
.final__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 2.25rem;
}

/* ── Footer ────────────────────────────────────────────────────────────── */

.foot {
  border-top: 1px solid var(--hair-soft);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.foot__inner {
  display: grid;
  gap: 2rem;
}
@media (min-width: 860px) {
  .foot__inner {
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 3rem;
  }
}

.foot__brand { display: flex; align-items: center; gap: 0.9rem; }
.foot__brand img { width: 52px; height: 52px; }
.foot__name {
  font-family: var(--disp);
  font-variation-settings: 'wdth' 112, 'wght' 760;
  font-size: 1.0625rem;
  letter-spacing: 0.01em;
}
.foot__tag { color: var(--ash-dim); font-size: 0.8125rem; margin-top: 0.15rem; }

.foot__nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
@media (min-width: 860px) { .foot__nav { justify-content: center; } }
.foot__nav a {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ash);
  text-decoration: none;
  transition: color 0.25s var(--ease);
}
.foot__nav a:hover { color: var(--dust); }

.foot__end { display: grid; gap: 0.4rem; }
@media (min-width: 860px) { .foot__end { justify-items: end; text-align: right; } }
.foot__copy { color: var(--ash-dim); font-size: 0.75rem; }

/* Creator credit. Present, findable, and deliberately quieter than the club. */
.foot__by a {
  font-size: 0.75rem;
  color: var(--ash-dim);
  text-decoration: none;
  border-bottom: 1px solid var(--hair-soft);
  padding-bottom: 1px;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.foot__by a:hover { color: var(--dust); border-bottom-color: var(--ember); }

/* ── Lightbox ──────────────────────────────────────────────────────────── */

.lb {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.lb.is-open { opacity: 1; }
.lb[hidden] { display: none; }

/* The backdrop takes the dominant colour of whichever frame is open — the
   same value the build extracted with sharp, so there is no canvas read. */
.lb__scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 50%, color-mix(in srgb, var(--tint, #221e1a) 26%, transparent), transparent 72%),
    color-mix(in srgb, var(--basalt) 95%, transparent);
  backdrop-filter: blur(8px);
  transition: background 0.5s var(--ease);
}

.lb__fig {
  position: relative;
  display: grid;
  gap: 0.9rem;
  justify-items: center;
  max-width: min(100%, 76rem);
  scale: 0.97;
  transition: scale 0.35s var(--ease);
}
.lb.is-open .lb__fig { scale: 1; }
.lb__fig img {
  max-width: 100%;
  max-height: 76svh;
  width: auto;
  object-fit: contain;
  background: var(--stone);
}
.lb__fig figcaption {
  color: var(--ash);
  font-size: 0.8125rem;
  line-height: 1.5;
  max-width: 62ch;
  text-align: center;
  text-wrap: pretty;
}

.lb__x,
.lb__nav {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--hair-soft);
  background: color-mix(in srgb, var(--basalt) 70%, transparent);
  color: var(--dust);
  font-size: 1.6rem;
  line-height: 1;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.lb__x:hover,
.lb__nav:hover { background: var(--grit); border-color: var(--hair); }
.lb__x { top: clamp(0.75rem, 2vw, 1.5rem); right: clamp(0.75rem, 2vw, 1.5rem); }
.lb__nav { top: 50%; translate: 0 -50%; }
.lb__nav--prev { left: clamp(0.5rem, 2vw, 1.5rem); }
.lb__nav--next { right: clamp(0.5rem, 2vw, 1.5rem); }

.lb__count {
  position: absolute;
  bottom: clamp(0.75rem, 2vw, 1.5rem);
  left: 50%;
  translate: -50% 0;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  color: var(--ash-dim);
}

/* ── Reveals ───────────────────────────────────────────────────────────── */

.enter {
  opacity: 0;
  translate: 0 22px;
  transition: opacity 0.8s var(--ease), translate 0.8s var(--ease);
}
.enter.is-in { opacity: 1; translate: 0 0; }

/* ── Reduced motion ────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .enter { opacity: 1; translate: none; }
  /* crawl.js is never imported under reduced motion, but if the preference
     flips after load the hero must not stay three viewports tall. */
  .hero { height: auto !important; }
  .hero.has-gl .hero__pin { position: relative; min-height: 100svh; }
  .hero__photo img { animation: none; scale: 1.02; }
  .terr__img { translate: none; }
  .mach__frame img { translate: none; }
  .terr__fig img { scale: none; }
  /* gallery.js lays out one pass of frames and then stops, because the loop
     that would fill the row is the thing being suppressed. So the strip becomes
     an ordinary wrapped block instead of a rail with a gap at the end. */
  .wall { cursor: default; }
  .wall__row { overflow: visible; }
  .wall__strip {
    transform: none !important;
    flex-wrap: wrap;
    width: auto;
    justify-content: center;
  }
}