/* ═══════════════════════════════════════════════════════════
   3 Angels Minerals
   Warm white paper, bronze, ink. Editorial and typographic:
   big serif statements against small letterspaced sans labels,
   hairline rules, generous air. No gradients-as-decoration,
   no glows, no floating cards.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* paper */
  --paper:       #FDFBF7;
  --paper-warm:  #F6F0E5;
  --paper-deep:  #EFE6D6;

  /* ink */
  --ink:       #16130F;
  --ink-soft:  #4A423A;
  --ink-mute:  #6E6458;

  /* bronze */
  --bronze:       #B87333;
  --bronze-ink:   #8A5426;   /* bronze that passes contrast on paper */
  --bronze-deep:  #5E3614;
  --bronze-pale:  #E8C79A;

  --hairline:      rgba(22, 19, 15, 0.13);
  --hairline-soft: rgba(22, 19, 15, 0.07);
  --hairline-brz:  rgba(184, 115, 51, 0.38);

  --serif: "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --wrap: 1280px;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --section-y: clamp(5.5rem, 13vh, 10rem);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ── reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.95rem + 0.22vw, 1.09rem);
  line-height: 1.66;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, canvas, video { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }

::selection { background: var(--bronze); color: #fff; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: var(--paper);
  padding: 0.75rem 1.25rem; font-weight: 600;
}
.skip:focus { left: 0; }

:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; }

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

.section { padding-block: var(--section-y); }
.section-raised { background: var(--paper-warm); }

/* One dark field, carrying the globe. */
.section-dark {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: radial-gradient(ellipse 85% 65% at 28% 45%, #241708 0%, #14100B 55%, #0C0906 100%);
  color: rgba(253, 251, 247, 0.68);
}

/* The pit behind the geography band. Unlike the reckoning, this one
   stays well down: a globe, three region cards and a note all sit on
   top of it, and legibility beats the photograph every time. The
   radial gradient above remains the ground if the image fails. */
.geo-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.geo-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Pulled right and low, onto the benches — the left of this frame
     is empty dawn haze. */
  object-position: 66% 64%;
}
.section-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(10, 8, 5, 0.80) 0%, rgba(10, 8, 5, 0.68) 42%, rgba(10, 8, 5, 0.84) 100%),
    radial-gradient(ellipse 70% 55% at 30% 48%, rgba(36, 23, 8, 0.72), transparent 70%);
  pointer-events: none;
}
.section-dark .h2,
.section-dark .region h3 { color: #FFF8EF; }
.section-dark .section-label { color: var(--bronze-pale); }
.section-dark .section-label::before { background: var(--bronze); }
.section-dark .section-intro { color: rgba(253, 251, 247, 0.72); }
.section-dark .region { border-top-color: var(--bronze); }
.section-dark .region-num { color: var(--bronze-pale); }
.section-dark .note {
  border-top-color: rgba(253, 251, 247, 0.16);
  color: rgba(253, 251, 247, 0.5);
}
.section-dark .globe-caption { color: rgba(253, 251, 247, 0.6); }
.section-dark .globe-caption .dot {
  background: var(--bronze-pale);
  box-shadow: 0 0 0 4px rgba(232, 199, 154, 0.18);
}
.section-dark .globe-caption .arrow { color: var(--bronze-pale); }

/* ── type ─────────────────────────────────────────────────── */
.h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 1.5rem + 3.6vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.section-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bronze-ink);
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.6rem;
}
.section-label::before {
  content: "";
  width: 2.25rem; height: 2px;
  background: var(--bronze);
  flex: none;
}

.section-head { max-width: 48rem; margin-bottom: clamp(3rem, 6vw, 5rem); }
.section-intro { margin-top: 1.6rem; max-width: 42rem; color: var(--ink-soft); }

.lede {
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.55rem);
  line-height: 1.44;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -0.011em;
}

p + p { margin-top: 1.2rem; }

/* The company name, wherever it appears in running copy. <b> rather
   than <strong>: it is a typographic weight, not emphasis, and should
   not be announced as stressed by a screen reader. */
.co { font-weight: 700; letter-spacing: -0.005em; }

.note {
  margin-top: 3.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.9rem;
  color: var(--ink-mute);
  max-width: 46rem;
}

/* ── buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease),
              border-color 0.3s var(--ease);
}

.btn-primary { background: var(--bronze); color: #fff; border-color: var(--bronze); }
.btn-primary:hover { background: var(--bronze-deep); border-color: var(--bronze-deep); }

.btn-ghost { border-color: rgba(255,255,255,0.55); color: #fff; }
.btn-ghost:hover { background: #fff; border-color: #fff; color: var(--ink); }

/* on paper */
.section .btn-ghost, .contact-grid .btn-ghost {
  border-color: var(--hairline); color: var(--ink);
}
.section .btn-ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ── header ───────────────────────────────────────────────── */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease);
}
.site-header.is-stuck {
  background: rgba(253, 251, 247, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--hairline);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  height: 5.25rem;
}

.brand { display: flex; align-items: center; gap: 0.8rem; text-decoration: none; flex: none; }
.brand-mark { width: 2.5rem; height: 2.5rem; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
/* The wordmark is bold sans, matching the hero name — the client
   wants the company name to read heavy wherever it appears. */
.brand-name {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.32rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #fff;
  transition: color 0.4s var(--ease);
}
.brand-sub {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--bronze-pale);
  margin-top: 0.34rem;
  transition: color 0.4s var(--ease);
}
.is-stuck .brand-name { color: var(--ink); }
.is-stuck .brand-sub { color: var(--bronze-ink); }

.nav { display: flex; align-items: center; gap: 1.9rem; }
.nav a {
  font-size: 0.84rem;
  font-weight: 500;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  transition: color 0.3s var(--ease);
}
.nav a:hover { color: #fff; }
.is-stuck .nav a { color: var(--ink-soft); }
.is-stuck .nav a:hover { color: var(--bronze-ink); }

.nav .nav-cta {
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.5);
  padding: 0.6rem 1.3rem;
  font-weight: 600;
}
.nav .nav-cta:hover { background: #fff; border-color: #fff; color: var(--ink); }
.is-stuck .nav .nav-cta { color: #fff; background: var(--bronze); border-color: var(--bronze); }
.is-stuck .nav .nav-cta:hover { background: var(--bronze-deep); border-color: var(--bronze-deep); color: #fff; }

.menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem; height: 2.75rem;
  background: none; border: 1.5px solid rgba(255,255,255,0.45);
  cursor: pointer;
}
.menu-btn span {
  display: block; width: 1.15rem; height: 1.5px;
  background: #fff; margin-inline: auto;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease), background 0.3s;
}
.is-stuck .menu-btn { border-color: var(--hairline); }
.is-stuck .menu-btn span { background: var(--ink); }
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── hero ─────────────────────────────────────────────────────
   The first screen is the three angels. The painting is the largest
   thing on the page and nothing is laid over it — the company name
   sits beside it, not on top of it. Ink ground, warm bronze light
   behind the picture so the painting's own storm sky carries into
   the page. */
.hero {
  position: relative;
  min-height: max(700px, 100svh);
  display: flex;
  align-items: center;
  isolation: isolate;
  overflow: clip;
  background: var(--ink);
}

.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* The angels sit centre-right in the painting; hold them in frame
     when a tall viewport crops the sides. */
  object-position: 62% 42%;
}

/* Weighted hard to the left. The headline needs a dark ground under it,
   but anything laid across the angels themselves defeats the picture —
   the right side is left almost clear. */
.hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(96deg, rgba(11,8,5,0.90) 0%, rgba(11,8,5,0.74) 24%, rgba(11,8,5,0.34) 46%, rgba(11,8,5,0.04) 66%, rgba(11,8,5,0.16) 100%),
    /* A little extra weight along the top edge: the nav is white and
       the painting is bright cloud up there. */
    linear-gradient(to bottom, rgba(11,8,5,0.66) 0%, rgba(11,8,5,0.28) 12%, transparent 26%, transparent 74%, rgba(11,8,5,0.42) 100%);
}

.hero-inner {
  position: relative;
  padding-block: clamp(8rem, 15vh, 10rem) clamp(4.5rem, 9vh, 6.5rem);
}

.eyebrow {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--bronze-pale);
  margin-bottom: 1.7rem;
}

/* The name carries real weight here — the client asked for it bold and
   unmissable, so this is the one place the sans runs at display size.
   Instrument Serif ships in a single weight; faking bold on it looks
   broken, so boldness comes from the sans instead. */
.hero-name {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(2.7rem, 1rem + 5.1vw, 5.2rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: #fff;
}
.hero-name span { display: block; color: var(--bronze-pale); }

.hero-tagline {
  margin-top: 1.6rem;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.45rem, 1rem + 1.5vw, 2.35rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.94);
  max-width: 17ch;
}
.hero-tagline em { font-style: italic; color: var(--bronze-pale); }

.hero-lede {
  margin-top: 1.7rem;
  max-width: 34rem;
  font-size: clamp(1rem, 0.95rem + 0.28vw, 1.13rem);
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.82);
}

.hero-actions { margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: 1rem; }

@media (max-height: 800px) {
  .hero-inner { padding-block: 7rem 4.5rem; }
  .hero-name { font-size: clamp(2.3rem, 1rem + 3.4vw, 4rem); }
  .hero-tagline { margin-top: 1.1rem; font-size: clamp(1.3rem, 1rem + 1vw, 1.8rem); }
  .hero-lede { margin-top: 1.2rem; font-size: 1rem; }
  .hero-actions { margin-top: 1.8rem; }
  .eyebrow { margin-bottom: 1.2rem; }
}

.scroll-cue {
  position: absolute; bottom: 2.5rem; left: 50%;
  translate: -50% 0; width: 1px; height: 3.5rem; overflow: hidden;
}
.scroll-line {
  display: block; width: 1px; height: 100%;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.9));
  animation: cue 2.4s var(--ease) infinite;
}
@keyframes cue {
  0% { transform: translateY(-100%); }
  60%, 100% { transform: translateY(100%); }
}

/* ── the reckoning — the one bronze field ─────────────────── */
.reckoning {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: clamp(6rem, 15vh, 11rem);
  background: linear-gradient(155deg, #8A5426 0%, #6E4019 55%, #55300F 100%);
  /* Body copy sits over photography here, not flat bronze, so it runs
     brighter than it would on the plain field. */
  color: rgba(255, 248, 239, 0.94);
}

/* The pit, greyscaled and multiplied into the bronze rather than laid
   over it. Straight colour photography here would fight the gradient
   and cost the type its contrast; this way the section still reads as
   the one bronze field, with the ground showing through it. */
/* The photograph runs at full strength in its own colour — it is dawn
   over the pit, already bronze and ochre, so it sits inside the palette
   without any duotone treatment. No blend mode: the point is to see the
   mine. */
.reckon-media {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.reckon-media img,
.reckon-media video {
  width: 100%; height: 100%;
  object-fit: cover;
  /* The section is taller than the frame is deep, so the crop is
     horizontal. Pulled right, onto the benches and haul roads — the
     left of the photograph is empty haze and would read as a
     gradient rather than a mine. */
  object-position: 72% center;
}
.reckon-media video[hidden] { display: none; }

/* The veil that buys the type its contrast. Weighted to the left,
   where the quote is, and along the bottom — the pit itself, centre
   and right, is left close to clear. */
.reckoning::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(102deg, rgba(34, 19, 6, 0.84) 0%, rgba(34, 19, 6, 0.64) 34%, rgba(34, 19, 6, 0.46) 58%, rgba(34, 19, 6, 0.56) 100%),
    linear-gradient(to bottom, rgba(34, 19, 6, 0.30) 0%, transparent 22%, transparent 62%, rgba(34, 19, 6, 0.52) 100%);
  pointer-events: none;
}
.reckoning .section-label { color: var(--bronze-pale); }
.reckoning .section-label::before { background: var(--bronze-pale); }

.reckon-quote {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.1rem, 1.2rem + 3.6vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -0.022em;
  color: #FFF8EF;
  max-width: 21ch;
  text-wrap: balance;
}

.reckon-body {
  margin-top: clamp(2.75rem, 5vw, 4rem);
  max-width: 34rem;
  margin-left: auto;
}

.reckon-turn {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: 2.25rem;
  border-top: 1px solid rgba(255, 246, 235, 0.28);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.7rem, 1rem + 2.6vw, 3.1rem);
  letter-spacing: -0.015em;
  color: #FFF8EF;
}

/* ── split (about) ────────────────────────────────────────── */
.split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.split-main > p:first-child { margin-bottom: 1.7rem; }

/* ── triptych (three pillars) ─────────────────────────────── */
.triptych {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3.5vw, 3rem);
}

.angel-media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--paper-deep);
  margin-bottom: 1.9rem;
}
.angel-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}
.angel:hover .angel-media img { transform: scale(1.04); }

.angel-index {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bronze-ink);
  margin-bottom: 0.7rem;
}
.angel-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 1.3rem + 1.4vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin-bottom: 0.95rem;
}
.angel-copy { font-size: 0.98rem; }

/* ── capability cards ─────────────────────────────────────── */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}

.card {
  background: var(--paper);
  padding: clamp(2rem, 3vw, 2.9rem);
  transition: background 0.35s var(--ease);
}
.card:hover { background: var(--paper-warm); }

.card-icon {
  width: 2.1rem; height: 2.1rem;
  fill: none; stroke: var(--bronze);
  stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
  margin-bottom: 1.7rem;
}

.card h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin-bottom: 0.8rem;
}
.card p { font-size: 0.95rem; line-height: 1.62; }

/* ── operations ───────────────────────────────────────────── */
.ops {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
}
.op { margin: 0; }
.op-wide { grid-column: 1 / -1; }

/* Duotone: photograph reduced to black and white, bronze merged back
   over its luminance. Hover releases it to full colour. */
.op-frame {
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
  background: var(--paper-deep);
}
.op-frame::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(150deg, #E8C79A, #B87333 55%, #6E4019);
  mix-blend-mode: color;
  opacity: 0.72;
  pointer-events: none;
  transition: opacity 0.7s var(--ease);
}
.op:hover .op-frame::after { opacity: 0; }

.op img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: grayscale(1) contrast(1.04);
  transition: transform 0.9s var(--ease), filter 0.7s var(--ease);
}
.op:not(.op-wide) img { aspect-ratio: 4 / 3; }
.op:hover img { transform: scale(1.015); filter: grayscale(0) contrast(1); }

.op figcaption {
  margin-top: 1rem;
  font-size: 0.86rem;
  color: var(--ink-mute);
}

/* ── minerals ─────────────────────────────────────────────── */
.minerals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(1.75rem, 3vw, 3rem);
}

.mineral { padding-top: 1.75rem; border-top: 2px solid var(--bronze); }
.mineral-sym {
  display: block;
  font-family: var(--serif);
  font-size: 3.2rem;
  line-height: 1;
  letter-spacing: -0.028em;
  color: var(--bronze-ink);
  margin-bottom: 1.1rem;
}
.mineral h3 {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.85rem;
}
.mineral p { font-size: 0.94rem; line-height: 1.62; }

/* ── globe ────────────────────────────────────────────────── */
.globe-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.globe-wrap { margin: 0; }
#globe {
  display: block;
  width: 100%;
  max-width: 34rem;
  aspect-ratio: 1;
  margin-inline: auto;
}

.globe-caption {
  margin-top: 1.5rem;
  text-align: center;
  font-size: 0.71rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.globe-caption .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--bronze);
  box-shadow: 0 0 0 4px rgba(184, 115, 51, 0.16);
}
.globe-caption .arrow { color: var(--bronze); }

/* ── regions ──────────────────────────────────────────────── */
.regions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
}
.globe-layout .regions { grid-template-columns: 1fr; gap: 2.5rem; }

.region { padding-top: 1.75rem; border-top: 2px solid var(--bronze); }
.region-num {
  font-family: var(--serif);
  font-size: 1rem;
  letter-spacing: 0.08em;
  color: var(--bronze-ink);
  margin-bottom: 1rem;
}
.region h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 1.25rem + 1vw, 2.15rem);
  letter-spacing: -0.017em;
  color: var(--ink);
  margin-bottom: 0.9rem;
}
.region p { font-size: 0.96rem; }

/* ── global moment ────────────────────────────────────────── */
.moment {
  padding-block: var(--section-y);
  background: var(--paper-warm);
}
.moment-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: clamp(2rem, 4vw, 4rem);
}
.moment-body p { font-size: clamp(1rem, 0.96rem + 0.25vw, 1.13rem); }

.moment-turn {
  margin-top: clamp(2.75rem, 5vw, 4rem);
  padding-top: 2.25rem;
  border-top: 2px solid var(--bronze);
  font-family: var(--serif);
  font-size: clamp(1.6rem, 1rem + 2.1vw, 2.7rem);
  line-height: 1.16;
  letter-spacing: -0.018em;
  color: var(--ink);
  max-width: 28ch;
  text-wrap: balance;
}

.attribution {
  margin-top: clamp(3rem, 5vw, 4rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.86rem;
  color: var(--ink-mute);
  max-width: 46rem;
}
.attribution a {
  color: var(--bronze-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline-brz);
}
.attribution a:hover { border-bottom-color: var(--bronze); }

/* ── contact ──────────────────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.contact-grid .lede { margin-top: 1.75rem; }
.contact-grid > div > p:not(.lede):not(.section-label) { margin-top: 1.2rem; }

.contact-list {
  margin-top: 2.75rem;
  padding-top: 2rem;
  border-top: 1px solid var(--hairline);
  display: grid;
  gap: 1.5rem;
}
.contact-list dt {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 0.4rem;
}
.contact-list dd { margin: 0; }
.contact-list a {
  color: var(--bronze-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline-brz);
}
.contact-list a:hover { border-bottom-color: var(--bronze); }

.form { display: grid; gap: 1.5rem; }
.field { display: grid; gap: 0.55rem; }
.field label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.field input, .field textarea {
  background: var(--paper);
  border: 1.5px solid var(--hairline);
  padding: 0.95rem 1.1rem;
  font-size: 1rem;
  color: var(--ink);
  transition: border-color 0.3s var(--ease);
  resize: vertical;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--bronze); }
.field input:user-invalid, .field textarea:user-invalid { border-color: #A33B25; }

.form .btn { justify-self: start; margin-top: 0.5rem; }
.form-note { font-size: 0.88rem; color: var(--bronze-ink); min-height: 1.4em; }

/* ── footer ───────────────────────────────────────────────── */
.site-footer {
  background: var(--ink);
  color: rgba(253, 251, 247, 0.62);
  padding-block: clamp(3.5rem, 7vw, 5.5rem) 2.5rem;
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid rgba(253, 251, 247, 0.14);
}

.footer-brand { display: grid; grid-template-columns: auto 1fr; gap: 0 0.85rem; align-content: start; }
.footer-brand .brand-mark { width: 2.75rem; height: 2.75rem; }
.footer-brand .brand-name { color: var(--paper); }
.footer-brand .brand-sub { color: var(--bronze-pale); }
.footer-tag {
  grid-column: 1 / -1;
  margin-top: 1.6rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--bronze-pale);
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 2rem;
}
.footer-nav h4 {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: rgba(253, 251, 247, 0.45);
  margin-bottom: 1.2rem;
}
.footer-nav a {
  display: block;
  font-size: 0.93rem;
  text-decoration: none;
  color: rgba(253, 251, 247, 0.72);
  padding-block: 0.34rem;
  transition: color 0.3s var(--ease);
}
.footer-nav a:hover { color: var(--bronze-pale); }

.footer-bottom { padding-top: 2.25rem; display: grid; gap: 1.5rem; }
.disclaimer {
  font-size: 0.8rem; line-height: 1.6;
  color: rgba(253, 251, 247, 0.45);
  max-width: 60rem;
}
.copyright { font-size: 0.8rem; color: rgba(253, 251, 247, 0.45); }

/* ── scroll reveal ────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ── responsive ───────────────────────────────────────────── */
@media (max-width: 1120px) {
  .nav { gap: 1.3rem; }
  .nav a { font-size: 0.79rem; }
}

@media (max-width: 960px) {
  .menu-btn { display: flex; }

  .nav {
    position: fixed;
    inset: 5.25rem 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--hairline);
    padding: 1rem var(--gutter) 2rem;
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.45s var(--ease);
  }
  .nav.is-open { clip-path: inset(0 0 0 0); }
  .nav a, .is-stuck .nav a { color: var(--ink); font-size: 1.02rem; padding-block: 0.95rem; border-bottom: 1px solid var(--hairline-soft); }
  .nav .nav-cta, .is-stuck .nav .nav-cta {
    margin-top: 1.5rem;
    background: var(--bronze);
    border-color: var(--bronze);
    color: #fff;
    text-align: center;
    padding-block: 1rem;
  }

  /* On a phone a full-bleed 16:9 painting would be cropped down to the
     middle of one wing. The picture comes out from behind the type
     instead and runs whole across the top, copy underneath it on ink —
     all three angels visible, which is the whole point of it. */
  .hero {
    display: block;
    min-height: 0;
    padding-top: 5.25rem;
  }
  .hero-media { position: static; }
  .hero-media img { height: auto; aspect-ratio: 16 / 9; object-position: center; }
  .hero-scrim { display: none; }
  .hero-inner { padding-block: clamp(2rem, 5vh, 3rem) clamp(3.5rem, 8vh, 5rem); }
  .scroll-cue { display: none; }

  .split, .contact-grid, .footer-top, .globe-layout { grid-template-columns: 1fr; }
  .ops { grid-template-columns: 1fr; }
  .op:not(.op-wide) img { aspect-ratio: 16 / 9; }
  .reckon-body { margin-left: 0; }
  .triptych { grid-template-columns: 1fr; max-width: 30rem; }
  .angel-media { aspect-ratio: 4 / 3; }
}

@media (max-width: 560px) {
  .header-inner { height: 4.5rem; }
  .nav { inset-block-start: 4.5rem; }
  .brand-mark { width: 2.1rem; height: 2.1rem; }
  .brand-name { font-size: 1.25rem; }
  .hero { padding-top: 4.5rem; }
  .hero-actions .btn { flex: 1 1 100%; }
}

/* ── print ────────────────────────────────────────────────────
   Without this the page prints mostly blank: scroll-reveal leaves
   every section at opacity 0, and browsers drop background colour
   and imagery by default. */
@media print {
  .reveal { opacity: 1 !important; transform: none !important; }

  *, *::before, *::after {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* The header is styled white for the dark hero overlay; on paper it
     needs the stuck treatment or it prints white on white. */
  .site-header { position: static; background: var(--paper); }
  .site-header .brand-name { color: var(--ink); }
  .site-header .brand-sub { color: var(--bronze-ink); }
  .nav a { color: var(--ink-soft); }
  .nav .nav-cta { background: var(--bronze); border-color: var(--bronze); color: #fff; }

  .scroll-cue, .menu-btn { display: none; }

  .hero { min-height: 210mm; page-break-after: always; }
  /* Blend modes are unreliable in print engines; the photograph is
     dropped so the reckoning prints as the flat bronze field. */
  .reckon-media { display: none; }
  .reckoning, .section, .moment, .site-footer { page-break-inside: auto; }

  .op, .angel, .card, .mineral, .region,
  .globe-wrap, .reckon-quote, .moment-turn {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .op img, .angel-media { max-height: 150mm; }
}

/* ── 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;
  }
  .reveal { opacity: 1; transform: none; }
  .scroll-cue { display: none; }
}