/* =============================================================================
   IRON HAYA — public site
   Tactical field-operations system: near-black ground, warm white type,
   muted olive, hairline rules, a precise column grid and restrained motion.
   Typography is the project's existing Saira Condensed family only.
   ========================================================================== */

/* ------------------------------------------------------------------ fonts -- */
@font-face {
  font-family: 'Saira Condensed';
  src: url('../fonts/SairaCondensed-Bold.woff2') format('woff2'),
       url('../fonts/SairaCondensed-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Saira Condensed';
  src: url('../fonts/SairaCondensed-SemiBold.woff2') format('woff2'),
       url('../fonts/SairaCondensed-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Saira Condensed';
  src: url('../fonts/SairaCondensed-Medium.woff2') format('woff2'),
       url('../fonts/SairaCondensed-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Saira Condensed';
  src: url('../fonts/SairaCondensed-Light.woff2') format('woff2'),
       url('../fonts/SairaCondensed-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------ tokens -- */
:root {
  --ink:        #08090a;
  --ink-1:      #0d0f0e;
  --ink-2:      #141614;
  --ink-3:      #1b1e1b;

  --paper:      #edeae3;
  --paper-2:    #b9b8b1;
  --paper-3:    #85877f;

  --olive:      #7f8d63;
  --olive-dim:  #5c6749;
  --amber:      #b0703c;   /* the rusted amber already present in the imagery */

  --line:       color-mix(in srgb, var(--paper) 14%, transparent);
  --line-soft:  color-mix(in srgb, var(--paper) 8%, transparent);
  --line-hard:  color-mix(in srgb, var(--paper) 26%, transparent);

  --display: 'Saira Condensed', 'Arial Narrow', system-ui, sans-serif;

  --gutter: clamp(1.25rem, 4.2vw, 4rem);
  --measure: 60ch;                /* ~58–62 characters of body copy */
  --header-h: 4.5rem;
  --rule: 1px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 200ms;

  --shell: 90rem;
  color-scheme: dark;
}

@media (min-width: 64rem) {
  :root { --header-h: 5.25rem; }
}

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

html {
  -webkit-text-size-adjust: 100%;
  /* Deliberately NOT `scroll-behavior: smooth`: it makes the browser animate the
     initial jump to a #fragment, which is easily interrupted while media is
     still loading and leaves a deep link stranded near the top. Smooth scrolling
     is applied per-click in site.js instead, where it can be skipped safely. */
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

/* Horizontal overflow is contained where it is created -- the hero, the panels,
   the spec band and every framed image clip their own media. Deliberately NOT
   `overflow-x: clip` on <html> or <body>: that turns the element into a clipped
   scroll container and fragment links (#contact, the section chevrons) then
   silently fail to scroll. build/verify + the responsive audit assert
   documentElement.scrollWidth === innerWidth at 360/390/768/1024/1440 instead. */

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--display);
  font-weight: 300;
  font-size: 1.0625rem;              /* 17px floor on small screens */
  line-height: 1.5;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4, p, figure, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

:where(a, button, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--olive);
  outline-offset: 3px;
  border-radius: 1px;
}

::selection { background: var(--olive-dim); color: var(--paper); }

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

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  top: 0.5rem; left: 0.5rem;
  z-index: 200;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 1.25rem;
  background: var(--paper);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transform: translateY(-150%);
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); }

/* Small uppercase technical label — Saira Condensed SemiBold. */
.label {
  font-weight: 600;
  font-size: 0.75rem;
  line-height: 1.2;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper-3);
}

.rule { height: var(--rule); background: var(--line); border: 0; }

/* Body copy: left aligned, never justified, held to a readable measure. */
.prose {
  max-width: var(--measure);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.5;
  text-align: left;
  text-wrap: pretty;
  color: var(--paper-2);
}
.prose > p + p { margin-top: 1.15em; }
@media (min-width: 48rem) {
  .prose { font-size: 1.125rem; }
}
@media (min-width: 64rem) {
  .prose { font-size: 1.1875rem; }   /* 19px on desktop */
}

/* ---------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 2.875rem;              /* ≥44px tap target */
  padding: 0 1.6rem;
  border: var(--rule) solid var(--line-hard);
  background: transparent;
  color: var(--paper);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.btn:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }

.btn--solid {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
}
.btn--solid:hover { background: transparent; color: var(--paper); }

.btn--ghost { border-color: var(--line); color: var(--paper-2); }
.btn--ghost:hover { color: var(--ink); }

/* --------------------------------------------------------------- chevrons -- */
.chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  min-height: 2.75rem;
  color: var(--paper-3);
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.chevron svg { width: 2rem; height: auto; }
.chevron:hover { color: var(--paper); transform: translateY(2px); }

/* ----------------------------------------------------------------- header -- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--ink) 72%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: var(--rule) solid var(--line-soft);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.site-header[data-scrolled='true'] {
  background: color-mix(in srgb, var(--ink) 94%, transparent);
  border-bottom-color: var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--header-h);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-height: 2.75rem;
  margin-right: auto;
  padding-right: 0.5rem;
}
.brand__mark { width: clamp(6.5rem, 13vw, 9.5rem); color: var(--paper); }
.brand__mark svg { width: 100%; height: auto; }
.brand__tagline {
  display: none;
  padding-left: 0.875rem;
  border-left: var(--rule) solid var(--line);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-3);
  white-space: nowrap;
}
@media (min-width: 48rem) { .brand__tagline { display: block; } }

.nav { display: none; }
.nav__list { display: flex; align-items: center; gap: clamp(0.5rem, 2vw, 1.75rem); }
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: 0.5rem;
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper-2);
  transition: color var(--dur) var(--ease);
}
.nav__link:hover { color: var(--paper); }
.nav__link::after {
  content: '';
  position: absolute;
  inset-inline: 0.5rem;
  bottom: 0.65rem;
  height: var(--rule);
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current='page'] { color: var(--paper); }
.nav__link[aria-current='page']::after { background: var(--amber); transform: scaleX(1); }

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  min-height: 2.75rem;
  opacity: 0.66;
  transition: opacity var(--dur) var(--ease);
}
.social-link:hover { opacity: 1; }
.social-link img { width: 1.375rem; height: 1.375rem; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  border: var(--rule) solid var(--line);
  background: transparent;
  cursor: pointer;
}
.nav-toggle__bars { display: block; width: 1.125rem; height: 0.75rem; position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after,
.nav-toggle__bars span {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: var(--rule);
  background: var(--paper);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars span { top: 50%; }
.nav-toggle__bars::after { bottom: 0; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars::before { transform: translateY(0.375rem) rotate(45deg); }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars span { opacity: 0; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars::after { transform: translateY(-0.375rem) rotate(-45deg); }

@media (min-width: 48rem) {
  .nav { display: block; }
  .nav-toggle { display: none; }
}

/* Mobile drawer */
.nav-drawer {
  display: block;
  border-top: var(--rule) solid var(--line);
  background: color-mix(in srgb, var(--ink) 97%, transparent);
  overflow: hidden;
}
.nav-drawer[hidden] { display: none; }
.nav-drawer__list { padding-block: 0.5rem 1.25rem; }
.nav-drawer__link {
  display: flex;
  align-items: center;
  min-height: 3.25rem;
  border-bottom: var(--rule) solid var(--line-soft);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper-2);
}
.nav-drawer__link[aria-current='page'] { color: var(--paper); box-shadow: inset 3px 0 0 var(--amber); padding-left: 0.75rem; }
@media (min-width: 48rem) { .nav-drawer { display: none !important; } }

/* Without scripting the toggle cannot work, so the links stand open instead. */
html:not(.js) .nav-drawer[hidden] { display: block; }
html:not(.js) .nav-toggle { display: none; }

/* ------------------------------------------------------------------- hero -- */
.hero {
  position: relative;
  min-height: 100svh;
  margin-top: calc(var(--header-h) * -1);
  display: grid;
  align-items: end;
  isolation: isolate;
  overflow: clip;
}

.media-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: clip;
  background: var(--ink-1);
  container-type: size;
}
.media-bg__img { width: 100%; height: 100%; object-fit: cover; }

/* A background YouTube frame is sized to cover its own box, then overscaled a
   little so the player's own branding falls outside the crop. It is inert:
   no pointer events, no tab stop, out of the accessibility tree. */
.media-bg__frame {
  position: absolute;
  top: 50%; left: 50%;
  width: 177.78vmax;                 /* fallback for no container-query units */
  height: 100vmax;
  transform: translate(-50%, -50%) scale(1.36);
  transform-origin: center;
  border: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 500ms var(--ease);
}
@supports (width: 1cqw) {
  .media-bg__frame {
    width: max(100cqw, calc(100cqh * 16 / 9));
    height: max(100cqh, calc(100cqw * 9 / 16));
  }
}
.media-bg__frame[data-ready='true'] { opacity: 1; }

.media-bg__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top,
      var(--ink) 0%,
      color-mix(in srgb, var(--ink) 62%, transparent) 38%,
      color-mix(in srgb, var(--ink) 12%, transparent) 100%),
    color-mix(in srgb, var(--ink) 24%, transparent);
}

.hero__body {
  position: relative;
  z-index: 2;
  padding-block: calc(var(--header-h) + 3rem) clamp(3.5rem, 9vh, 7rem);
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
}

.hero__mark { width: min(100%, clamp(15rem, 42vw, 30rem)); color: var(--paper); }
.hero__mark svg, .hero__mark img { width: 100%; height: auto; }

.hero__tagline {
  font-weight: 600;
  font-size: clamp(0.875rem, 1.6vw, 1.125rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--paper-2);
}

.hero__foot {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding-top: clamp(1.25rem, 3vw, 2rem);
  border-top: var(--rule) solid var(--line);
}

/* --------------------------------------------------------------- sections -- */
.section { position: relative; padding-block: clamp(3.5rem, 9vw, 7.5rem); }
.section--flush { padding-block: 0; }
.section--tight { padding-block: clamp(2.5rem, 6vw, 5rem); }
.section + .section { border-top: var(--rule) solid var(--line-soft); }

.section__head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  position: relative;
  padding-bottom: clamp(1.25rem, 3vw, 2rem);
  margin-bottom: clamp(1.75rem, 4vw, 3rem);
  border-bottom: var(--rule) solid var(--line);
}

.heading {
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-wrap: balance;
}
.heading--xl { font-size: clamp(2.25rem, 7.2vw, 5.5rem); }
.heading--lg { font-size: clamp(1.875rem, 5vw, 3.5rem); }
.heading--md { font-size: clamp(1.5rem, 3.4vw, 2.5rem); }

/* ------------------------------------------------------------ product panel */
.panel { position: relative; isolation: isolate; overflow: clip; }
.panel + .panel { border-top: var(--rule) solid var(--line); }

.panel__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
  align-items: center;
}
@media (min-width: 62rem) {
  .panel__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2.5rem, 5vw, 5rem); }
  .panel--flip .panel__media { order: -1; }
}

.panel__body { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); justify-items: start; }

.panel__mark { width: min(100%, clamp(13rem, 30vw, 22rem)); color: var(--paper); }
.panel__mark svg, .panel__mark img { width: 100%; height: auto; }

.panel__lede {
  font-weight: 500;
  font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--paper);
  max-width: var(--measure);
}

.panel__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.panel__media { position: relative; }

.frame {
  position: relative;
  border: var(--rule) solid var(--line);
  background: var(--ink-1);
  overflow: clip;
}
.frame__img { width: 100%; height: auto; object-fit: cover; }
.frame--ratio { aspect-ratio: 3 / 2; }
.frame--ratio .frame__img { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Corner ticks — the only decorative flourish, drawn from 1px rules. */
.frame::before,
.frame::after {
  content: '';
  position: absolute;
  width: 0.75rem; height: 0.75rem;
  border: var(--rule) solid var(--line-hard);
  pointer-events: none;
  z-index: 2;
}
.frame::before { top: 0.5rem; left: 0.5rem; border-right: 0; border-bottom: 0; }
.frame::after { right: 0.5rem; bottom: 0.5rem; border-left: 0; border-top: 0; }

/* Full-bleed cinematic panel with its own video/photo ground. */
.panel--cinema { min-height: min(46rem, 92svh); display: grid; align-items: center; }

/* Stacked layout: the copy sits over the top of the frame, so weight the
   scrim downward from there. */
.panel--cinema .media-bg__scrim {
  background:
    linear-gradient(to bottom,
      color-mix(in srgb, var(--ink) 88%, transparent) 0%,
      color-mix(in srgb, var(--ink) 70%, transparent) 55%,
      var(--ink) 100%),
    color-mix(in srgb, var(--ink) 30%, transparent);
}

/* Two-column layout: protect the copy side and let the imagery breathe on the
   other. `.panel--flip` mirrors the same gradient rather than duplicating it. */
@media (min-width: 62rem) {
  .panel--cinema .media-bg__scrim {
    background:
      linear-gradient(to right,
        var(--ink) 0%,
        color-mix(in srgb, var(--ink) 92%, transparent) 40%,
        color-mix(in srgb, var(--ink) 45%, transparent) 72%,
        color-mix(in srgb, var(--ink) 62%, transparent) 100%),
      color-mix(in srgb, var(--ink) 26%, transparent);
  }
  .panel--flip.panel--cinema .media-bg__scrim { transform: scaleX(-1); }
}

/* ------------------------------------------------------------ video player -- */
.player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: var(--rule) solid var(--line);
  background: var(--ink-1);
  overflow: clip;
}
.player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --------------------------------------------------------------- spec grid -- */
.specs { position: relative; isolation: isolate; overflow: clip; }
.specs__inner { position: relative; z-index: 2; padding-block: clamp(3.5rem, 8vw, 6.5rem); }

/* The data has to win over the photograph behind it. */
.specs .media-bg__scrim {
  background:
    linear-gradient(to bottom,
      var(--ink) 0%,
      color-mix(in srgb, var(--ink) 88%, transparent) 30%,
      color-mix(in srgb, var(--ink) 88%, transparent) 70%,
      var(--ink) 100%),
    color-mix(in srgb, var(--ink) 70%, transparent);
}

.matrix {
  display: grid;
  border-top: var(--rule) solid var(--line-hard);
}
@media (min-width: 48rem) {
  .matrix {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2rem, 5vw, 4rem);
  }
  .matrix__row:nth-child(odd) {
    padding-right: clamp(1rem, 2.5vw, 2rem);
    border-right: var(--rule) solid var(--line);
    margin-right: calc(clamp(2rem, 5vw, 4rem) / -2);
  }
}

.matrix__row {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.875rem 1rem;
  padding-block: 0.9rem;
  border-bottom: var(--rule) solid var(--line);
  min-height: 3.5rem;
}
@media (min-width: 48rem) {
  .matrix__row { grid-template-columns: 2.5rem minmax(0, 1fr) auto; padding-block: 1.05rem; }
}

.matrix__icon { width: 100%; color: var(--olive); }
.matrix__icon svg { width: 100%; height: auto; }

.matrix__label {
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--paper-2);
  min-width: 0;
  overflow-wrap: anywhere;
}
@media (min-width: 48rem) { .matrix__label { font-size: 0.8125rem; } }

.matrix__value {
  justify-self: end;
  text-align: right;
  font-weight: 700;
  font-size: clamp(1rem, 2.2vw, 1.375rem);
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.matrix__more {
  margin-top: 1.25rem;
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--olive);
}

/* --------------------------------------------------------------- chapters -- */
.chapter__grid {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}
@media (min-width: 62rem) {
  .chapter__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.5rem, 5vw, 5rem); }
  .chapter--flip .chapter__media { order: -1; }
}
.chapter__body { display: grid; gap: clamp(1rem, 2vw, 1.5rem); justify-items: start; }
.chapter__body .section__head { margin-bottom: 0; padding-bottom: clamp(0.875rem, 2vw, 1.25rem); }

/* ------------------------------------------------------------------ about -- */
.about__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 62rem) {
  .about__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 5rem); }
}

/* ---------------------------------------------------------------- contact -- */
/* The enquiry form was removed by owner approval, so the details are the whole
   section: a four-up band on desktop, stacking down to one column on phones. */
.contact { padding-block: clamp(3rem, 7vw, 5.5rem); }

.details {
  display: grid;
  gap: 0;
  border-top: var(--rule) solid var(--line-hard);
}
@media (min-width: 40rem) {
  .details { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 4vw, 3rem); }
}
@media (min-width: 62rem) {
  .details { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 3rem); }
}

.details__item {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.35rem 1rem;
  align-content: start;
  padding-block: clamp(1.15rem, 2.5vw, 1.75rem);
  border-bottom: var(--rule) solid var(--line);
}
/* Keep a hairline between columns without doubling up at the row ends. */
@media (min-width: 40rem) {
  .details__item:nth-child(odd) {
    padding-right: clamp(1.5rem, 4vw, 3rem);
    border-right: var(--rule) solid var(--line);
    margin-right: calc(clamp(1.5rem, 4vw, 3rem) / -2);
  }
}
@media (min-width: 62rem) {
  .details__item { border-bottom: 0; }
  .details__item:not(:last-child) {
    padding-right: clamp(1.5rem, 3vw, 3rem);
    border-right: var(--rule) solid var(--line);
    margin-right: calc(clamp(1.5rem, 3vw, 3rem) / -2);
  }
  .details__item:nth-child(odd) { margin-right: calc(clamp(1.5rem, 3vw, 3rem) / -2); }
}

.details__icon { grid-row: span 2; width: 100%; color: var(--olive); align-self: start; margin-top: 0.15rem; }
.details__icon svg { width: 100%; height: auto; }

.details__value {
  font-weight: 500;
  font-size: 1.0625rem;
  line-height: 1.45;
  color: var(--paper);
  overflow-wrap: anywhere;
}
.details__value a:not(.social-link) {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;              /* ≥44px touch target for tel:/mailto: */
  border-bottom: var(--rule) solid var(--line-hard);
  transition: border-color var(--dur) var(--ease);
}
.details__value a:not(.social-link):hover { border-bottom-color: var(--paper); }
.details__value--links {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: -0.6rem;
}

/* ----------------------------------------------------------------- footer -- */
.site-footer {
  background: var(--ink-1);
  border-top: var(--rule) solid var(--line);
}
.site-footer__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
  padding-block: clamp(2.5rem, 6vw, 4rem);
  align-items: center;
}
@media (min-width: 62rem) {
  .site-footer__grid { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 4rem); }
  .site-footer__divider { width: var(--rule); height: 100%; min-height: 5rem; background: var(--line); }
}
.site-footer__divider { display: none; }
@media (min-width: 62rem) { .site-footer__divider { display: block; } }

.site-footer__copy {
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--paper-2);
}

.funding { display: grid; gap: 1rem; justify-items: start; }
.funding__mark {
  width: min(100%, 22rem);
  padding: 0.75rem;
  background: var(--paper);            /* the supplied mark needs a light ground */
  border: var(--rule) solid var(--line);
}
.funding__mark img { width: 100%; height: auto; }
.funding__text {
  font-weight: 300;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--paper-3);
  max-width: 52ch;
  overflow-wrap: break-word;
}

/* ------------------------------------------------------------------ motion -- */
/* The hidden start state is scoped to `.js`, set synchronously in <head>.
   With scripting off nothing is ever hidden. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(0.75rem);
  transition: opacity 240ms var(--ease), transform 240ms var(--ease);
}
.js [data-reveal][data-shown='true'] { opacity: 1; transform: none; }
.js [data-reveal-delay='1'] { transition-delay: 60ms; }
.js [data-reveal-delay='2'] { transition-delay: 120ms; }
.js [data-reveal-delay='3'] { transition-delay: 180ms; }

.reveal-img { overflow: clip; }
.js .reveal-img img {
  transform: scale(1.035);
  transition: transform 260ms var(--ease);
}
.js .reveal-img[data-shown='true'] img { transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js .reveal-img img { transform: none; }
}