/* heroicmachines.com — the entire design system.
   ---------------------------------------------------------------------------
   The palette is derived from how light behaves in water, and that derivation
   is load-bearing rather than decorative. Red is absorbed within the first few
   meters; blue penetrates deepest. So every color that lives below the
   surface here is blue, teal or violet, and the ONE warm color in the system
   is the rescue orange — the color of a life ring, which only exists above
   the water. Orange appears where a person is being saved, and nowhere else.

   Stations, not sections. The three products occupy three positions in the
   water column: HALO above it, CAST on it, HADAL at the bottom of it. Each
   owns a ground color set by the light available there, and the depth marks
   in the section rules are the real figures, not 01 / 02 / 03.

   Contrast: every value used for readable text was measured against the
   ground it is actually painted on. The ratios are noted beside the tokens.
   Do not introduce a color here without measuring it. */

/* ── Tokens ───────────────────────────────────────────────────────────────── */

:root {
  color-scheme: light;

  /* Grounds — the surface, in daylight. */
  --ground:        #EDF2F5;   /* cold foam white                              */
  --ground-2:      #E2EAEF;   /* recessed panels                              */
  --panel:         #FFFFFF;
  --ink:           #0A1620;   /* near-black blue, 17.2:1 on --ground          */
  --ink-muted:     #4C5F6B;   /* 5.9:1 on --ground                            */
  --rule:          #C6D3DB;   /* hairlines and contour rules                  */
  --rule-strong:   #9FB2BE;

  /* Station grounds. These are FIXED — they do not flip with the theme,
     because the light at 11,000 m does not care what time it is topside.
     Only the surface ground above changes between light and dark. */
  --epipelagic:    #0D2B3A;   /* sunlight zone — CAST                         */
  --mesopelagic:   #0A2130;
  --hadopelagic:   #03090F;   /* the trench — HADAL                           */

  /* Text painted on a station ground. */
  --on-deep:       #E6EEF3;   /* 12.6:1 on --epipelagic                       */
  --on-deep-muted: #8FA3B0;   /* 5.6:1 on --epipelagic, 7.7:1 on --hadopelagic */
  --rule-deep:     #24404F;
  --panel-deep:    #12313F;

  /* Accents. Each names a station. */
  --sonar:         #3FB6C9;   /* CAST  — 6.2:1 on --epipelagic                */
  --sonar-ink:     #0E6E80;   /* CAST on a light ground — 5.9:1 on white      */
  --rescue:        #F0602A;   /* HALO  — 5.6:1 on --ink; large type on light  */
  --rescue-ink:    #B23C0C;   /* HALO on a light ground — 5.9:1 on white      */
  --lume:          #7B8CFF;   /* HADAL — 6.7:1 on --hadopelagic               */
  --lume-ink:      #4A54C4;   /* HADAL on a light ground — 6.3:1 on white     */

  /* The brand accent is the rescue orange. It is the only warm value in the
     system and it is used sparingly on purpose. */
  --accent:        var(--rescue);
  --accent-ink:    var(--rescue-ink);

  /* Type. Two families, three roles: Archivo carries display and body across
     a wide width axis, Azeret Mono carries every label, depth and figure. */
  --font-display: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:    "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "Azeret Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --t-display: clamp(2.7rem, 1.1rem + 6.0vw, 5.75rem);
  --t-h1:      clamp(2.1rem, 1.2rem + 3.6vw, 3.75rem);
  --t-h2:      clamp(1.65rem, 1.15rem + 2.1vw, 2.6rem);
  --t-h3:      clamp(1.1rem, 1rem + 0.6vw, 1.35rem);
  --t-lead:    clamp(1.075rem, 1rem + 0.55vw, 1.3rem);
  --t-body:    1.0625rem;
  --t-small:   0.875rem;
  --t-label:   0.6875rem;

  /* Space — a 4px base on a roughly modular ramp. */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
  --s-9: 6rem;     --s-10: 8rem;

  --measure: 62ch;
  --shell: 78rem;
  --radius: 4px;
  --radius-lg: 8px;

  --band-y: clamp(4.5rem, 9vw, 8.5rem);
}

[data-theme="dark"] {
  color-scheme: dark;
  --ground:      #071018;
  --ground-2:    #0C1A25;
  --panel:       #0F212D;
  --ink:         #E6EEF3;   /* 15.9:1 on --ground */
  --ink-muted:   #8FA3B0;   /* 7.3:1 on --ground  */
  --rule:        #1D3341;
  --rule-strong: #33505F;
  /* On a dark surface the light-ground accent variants would disappear, so
     the bright cuts take over as the text colors. */
  --sonar-ink:   var(--sonar);
  --rescue-ink:  var(--rescue);
  --lume-ink:    var(--lume);
  --accent-ink:  var(--rescue);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground:      #071018;
    --ground-2:    #0C1A25;
    --panel:       #0F212D;
    --ink:         #E6EEF3;
    --ink-muted:   #8FA3B0;
    --rule:        #1D3341;
    --rule-strong: #33505F;
    --sonar-ink:   var(--sonar);
    --rescue-ink:  var(--rescue);
    --lume-ink:    var(--lume);
    --accent-ink:  var(--rescue);
  }
}

/* A product page re-points the brand accent at its own station, so buttons,
   links and rules on that page belong to it without a single override. */
.station-cast  { --accent: var(--sonar);  --accent-ink: var(--sonar-ink); }
.station-halo  { --accent: var(--rescue); --accent-ink: var(--rescue-ink); }
.station-hadal { --accent: var(--lume);   --accent-ink: var(--lume-ink); }

/* ── Reset and base ───────────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The gauge is fixed to the viewport; anchored jumps need to clear the
     masthead rather than land under it. */
  scroll-padding-top: 5rem;
}

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.68;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 94%;
  line-height: 1.06;
  letter-spacing: -0.028em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 var(--s-4); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

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

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

.skip-link {
  position: absolute; left: var(--s-4); top: -4rem; z-index: 100;
  background: var(--ink); color: var(--ground);
  padding: var(--s-3) var(--s-5); border-radius: var(--radius);
  font-family: var(--font-mono); font-size: var(--t-small);
  text-decoration: none; transition: top 140ms ease;
}
.skip-link:focus { top: var(--s-4); }

/* ── Layout primitives ────────────────────────────────────────────────────── */

.shell {
  width: min(100% - 2.5rem, var(--shell));
  margin-inline: auto;
}

@media (min-width: 60rem) {
  .shell { width: min(100% - 5rem, var(--shell)); }
}

.band {
  padding-block: var(--band-y);
  position: relative;
}

/* A station band paints a fixed deep ground in BOTH themes and switches its
   own text colors with it. */
.band--deep {
  background: var(--epipelagic);
  color: var(--on-deep);
  --ink: var(--on-deep);
  --ink-muted: var(--on-deep-muted);
  --rule: var(--rule-deep);
  --rule-strong: #35576A;
  --panel: var(--panel-deep);
  --ground-2: #0B2836;
  --accent-ink: var(--accent);
}
.band--trench {
  background: var(--hadopelagic);
  color: var(--on-deep);
  --ink: var(--on-deep);
  --ink-muted: var(--on-deep-muted);
  --rule: #15222C;
  --rule-strong: #263646;
  --panel: #080F16;
  --ground-2: #060C12;
  --accent-ink: var(--accent);
}
.band--recessed { background: var(--ground-2); }

/* ── The sounding rule ─────────────────────────────────────────────────────
   A nautical chart labels a depth contour by breaking the line and setting the
   figure in the gap. Every section on this site is headed the same way: a
   hairline, interrupted by the station name on the left and its depth on the
   right. It replaces the numbered eyebrow, and unlike 01 / 02 / 03 it carries
   information — where in the water column you are standing. */

.sounding {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-bottom: var(--s-6);
}

.sounding__label,
.sounding__depth {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
  flex: none;
}

.sounding__depth {
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}

.sounding__line {
  flex: 1 1 auto;
  height: 1px;
  min-width: var(--s-5);
  background: var(--rule);
}

/* A label on its own, where a full sounding rule would be too much furniture. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 var(--s-4);
}

.lead {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--ink);
  max-width: 46ch;
}

.muted { color: var(--ink-muted); }

.figure-note {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  color: var(--ink-muted);
  margin-top: var(--s-3);
  max-width: var(--measure);
}

/* ── Masthead ─────────────────────────────────────────────────────────────── */

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 180ms ease;
}
.masthead[data-scrolled="true"] { border-bottom-color: var(--rule); }

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: 4.25rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 112%;
  font-size: 0.9375rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.wordmark svg { width: 1.35rem; height: 1.35rem; flex: none; }

.nav { display: none; }

@media (min-width: 56rem) {
  .nav {
    display: flex;
    align-items: center;
    gap: var(--s-5);
  }
}

.nav a {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-muted);
  padding-block: var(--s-2);
  border-bottom: 1px solid transparent;
  transition: color 140ms ease, border-color 140ms ease;
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

.masthead__actions { display: flex; align-items: center; gap: var(--s-3); }

.icon-button {
  display: inline-grid;
  place-items: center;
  width: 2.25rem; height: 2.25rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  padding: 0;
  transition: border-color 140ms ease, background 140ms ease;
}
.icon-button:hover { border-color: var(--rule-strong); background: var(--ground-2); }
.icon-button svg { width: 1rem; height: 1rem; }

/* The theme control shows the icon for what a click would DO, so the first
   click always visibly changes something. */
.icon-button .icon-moon { display: none; }
[data-theme="dark"] .icon-button .icon-moon { display: block; }
[data-theme="dark"] .icon-button .icon-sun  { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-button .icon-moon { display: block; }
  :root:not([data-theme="light"]) .icon-button .icon-sun  { display: none; }
}

#nav-toggle { display: inline-grid; }
@media (min-width: 56rem) { #nav-toggle { display: none; } }

.drawer {
  border-top: 1px solid var(--rule);
  background: var(--ground);
}
/* The drawer stays in normal flow and is closed by the `hidden` attribute,
   which nav JS sets on load. An absolutely-positioned panel that defaults to
   open would sit on top of the hero for every visitor with JavaScript off. */
.drawer[hidden] { display: none; }
.drawer ul { list-style: none; margin: 0; padding: var(--s-4) 0 var(--s-5); }
.drawer a {
  display: block;
  padding: var(--s-3) 0;
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: var(--t-small);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  border-bottom: 1px solid var(--rule);
}
.drawer a[aria-current="page"] { color: var(--accent-ink); }
@media (min-width: 56rem) { .drawer { display: none; } }

/* ── The station gauge ─────────────────────────────────────────────────────
   The signature. A fixed depth readout in the right margin that tracks which
   station you are looking at, because this company's whole product line is
   ordered by position in the water column. It is decoration only in the sense
   that a depth sounder is decoration: it tells you where you are.

   Progressive enhancement in both directions — it is rendered hidden and only
   revealed by JS, and it is suppressed entirely under reduced motion and on
   viewports too narrow to spare the margin. */

.gauge {
  position: fixed;
  right: clamp(1rem, 1.6vw, 2rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: none;
  align-items: center;
  gap: var(--s-3);
  pointer-events: none;
  font-family: var(--font-mono);
}

.js .gauge[data-ready="true"] { display: flex; }

/* The gauge is fixed to the viewport, so it will sit ON the content unless the
   page is narrowed to leave it a gutter. Showing it and hoping the columns
   happen to be short enough is how it lands on top of a paragraph at exactly
   one window width. Below the breakpoint it is simply not shown. */
@media (min-width: 90rem) {
  :root { --shell: 72rem; }
}
@media (max-width: 89.99rem) { .gauge { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .gauge { display: none !important; } }

.gauge[data-station-active="cast"]  { --accent: var(--sonar);  --accent-ink: var(--sonar); }
.gauge[data-station-active="halo"]  { --accent: var(--rescue); --accent-ink: var(--rescue-ink); }
.gauge[data-station-active="hadal"] { --accent: var(--lume);   --accent-ink: var(--lume-ink); }

.gauge__readout {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
  text-align: right;
  line-height: 1.35;
  min-width: 6.5rem;
}
.gauge__depth {
  display: block;
  color: var(--accent-ink);
  font-size: 0.8125rem;
  font-weight: 600;
}

.gauge__scale {
  position: relative;
  width: 1px;
  height: 9rem;
  background: var(--rule);
  flex: none;
}

.gauge__tick {
  position: absolute;
  right: -3px;
  width: 7px;
  height: 1px;
  background: var(--rule-strong);
  transition: background 200ms ease, width 200ms ease;
}
.gauge__tick[data-active="true"] {
  background: var(--accent);
  width: 13px;
  right: -6px;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0.8125rem 1.375rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--ground);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 140ms ease, opacity 140ms ease;
}
.btn:hover { opacity: 0.88; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.5; cursor: progress; }

.btn--accent { background: var(--accent); color: #08131A; }
/* On the trench ground the violet accent under near-black text is the only
   pairing here that needs its own foreground. */
.station-hadal .btn--accent { color: #0A0E1E; }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong);
}
.btn--ghost:hover { border-color: var(--ink); opacity: 1; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

.link-arrow {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent-ink);
  border-bottom: 1px solid transparent;
  transition: border-color 140ms ease;
}
.link-arrow::after { content: "→"; transition: transform 160ms ease; }
.link-arrow:hover { border-bottom-color: currentColor; }
.link-arrow:hover::after { transform: translateX(3px); }

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

.hero {
  position: relative;
  background: var(--epipelagic);
  color: var(--on-deep);
  --ink: var(--on-deep);
  --ink-muted: var(--on-deep-muted);
  --rule: var(--rule-deep);
  --accent-ink: var(--accent);
  overflow: hidden;
  isolation: isolate;
}

.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* The scrim is a vertical light-attenuation curve: readable at the top where
   the type sits, opening up over the water below it. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(3, 14, 20, 0.90) 0%,
      rgba(3, 14, 20, 0.72) 34%,
      rgba(3, 14, 20, 0.52) 62%,
      rgba(3, 14, 20, 0.78) 100%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(6rem, 15vh, 11rem) clamp(4.5rem, 10vh, 8rem);
  min-height: min(86vh, 46rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.hero h1 {
  font-size: var(--t-display);
  font-stretch: 88%;
  max-width: 16ch;
  margin-bottom: var(--s-5);
}

.hero .lead { color: var(--on-deep); max-width: 44ch; }

.hero__foot {
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule-deep);
  display: grid;
  gap: var(--s-5);
}
@media (min-width: 48rem) {
  .hero__foot { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
}

.hero__fact dt {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-deep-muted);
  margin-bottom: var(--s-2);
}
.hero__fact dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-stretch: 96%;
  font-size: 1.0625rem;
  line-height: 1.4;
  color: var(--on-deep);
}

/* A shorter hero for interior pages. */
.hero--page .hero__inner { min-height: min(64vh, 34rem); }
.hero--page h1 { font-size: var(--t-h1); max-width: 18ch; }

/* ── Station cards (home) ─────────────────────────────────────────────────── */

.station {
  display: grid;
  gap: var(--s-6);
  align-items: center;
}
@media (min-width: 62rem) {
  .station { grid-template-columns: 1fr 1.15fr; gap: var(--s-8); }
  .station--flip .station__media { order: -1; }
}

.station__media img {
  width: 100%;
  border-radius: var(--radius-lg);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.station__mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 108%;
  font-size: clamp(2.4rem, 1.4rem + 3.4vw, 3.6rem);
  letter-spacing: 0.02em;
  color: var(--accent-ink);
  margin-bottom: var(--s-2);
  line-height: 1;
}

.station__full {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  margin-bottom: var(--s-5);
}

/* ── Prose and content blocks ─────────────────────────────────────────────── */

.stack > * + * { margin-top: var(--s-5); }
.stack-lg > * + * { margin-top: var(--s-7); }

.split {
  display: grid;
  gap: var(--s-6);
}
@media (min-width: 62rem) {
  .split { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: var(--s-8); }
  .split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.card {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--s-6);
}
.card h3 { font-size: var(--t-h3); margin-bottom: var(--s-3); }
.card p { font-size: var(--t-small); line-height: 1.65; color: var(--ink-muted); }

/* A sequence block. Used only where the content genuinely IS ordered — the
   HALO response chain, where each step is triggered by the one before it. */
.sequence { list-style: none; margin: 0; padding: 0; }
.sequence > li {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: var(--s-5);
  padding-block: var(--s-5);
  border-top: 1px solid var(--rule);
}
.sequence > li:last-child { border-bottom: 1px solid var(--rule); }
.sequence__t {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-ink);
  padding-top: 0.35rem;
  font-variant-numeric: tabular-nums;
}
.sequence h3 { font-size: var(--t-h3); margin-bottom: var(--s-2); }
.sequence p { font-size: var(--t-small); color: var(--ink-muted); margin: 0; }
@media (max-width: 40rem) {
  .sequence > li { grid-template-columns: 1fr; gap: var(--s-2); }
}

/* Specification list. Deliberately plain: a buyer reading this is checking
   facts, not being sold to. */
.specs { margin: 0; }
.specs > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-1);
  padding-block: var(--s-4);
  border-top: 1px solid var(--rule);
}
.specs > div:last-child { border-bottom: 1px solid var(--rule); }
@media (min-width: 44rem) {
  .specs > div { grid-template-columns: 16rem 1fr; gap: var(--s-5); align-items: baseline; }
}
.specs dt {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.specs dd { margin: 0; font-size: var(--t-small); line-height: 1.6; }

.callout {
  border-left: 2px solid var(--accent);
  padding: var(--s-2) 0 var(--s-2) var(--s-5);
  margin-block: var(--s-6);
}
.callout p { font-size: var(--t-lead); line-height: 1.5; }

.figure { margin: 0; }
.figure img { width: 100%; border-radius: var(--radius-lg); }
.figure figcaption {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  color: var(--ink-muted);
  margin-top: var(--s-3);
  max-width: var(--measure);
}

.wide-figure img { aspect-ratio: 16 / 9; object-fit: cover; }

/* ── Forms ────────────────────────────────────────────────────────────────── */

.form { max-width: 34rem; }
.form__row { margin-bottom: var(--s-4); }

.form label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--s-2);
}

.form input,
.form select,
.form textarea {
  width: 100%;
  padding: 0.75rem 0.875rem;
  background: var(--panel);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.5;
}
.form textarea { min-height: 8rem; resize: vertical; }
.form input::placeholder, .form textarea::placeholder { color: var(--ink-muted); opacity: 0.75; }
.form input:focus-visible,
.form select:focus-visible,
.form textarea:focus-visible { border-color: var(--accent); }

/* Honeypot. A real visitor never sees it; a bot fills everything it finds. */
.hp {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}

.form__status {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  margin-top: var(--s-4);
  min-height: 1.4em;
}
.form__status[data-state="err"] { color: var(--rescue-ink); }
.form__status[data-state="ok"]  { color: var(--accent-ink); }

.form__fine {
  font-size: var(--t-small);
  color: var(--ink-muted);
  margin-top: var(--s-4);
  max-width: 48ch;
}

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

.footer {
  background: var(--hadopelagic);
  color: var(--on-deep);
  --ink: var(--on-deep);
  --ink-muted: var(--on-deep-muted);
  --rule: #15222C;
  padding-block: var(--s-8) var(--s-6);
}

.footer__grid {
  display: grid;
  gap: var(--s-6);
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 48rem) {
  .footer__grid { grid-template-columns: 1.4fr repeat(2, 1fr); gap: var(--s-7); }
}

.footer h2 {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-deep-muted);
  margin-bottom: var(--s-4);
}

.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li + li { margin-top: var(--s-3); }
.footer a { color: var(--on-deep); text-decoration: none; font-size: var(--t-small); }
.footer a:hover { text-decoration: underline; text-underline-offset: 3px; }

.footer__legal {
  padding-top: var(--s-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--on-deep-muted);
}
.footer__legal p { max-width: 68ch; margin: 0; }

.footer__note {
  margin-top: var(--s-5);
  font-size: 0.75rem;
  line-height: 1.65;
  color: var(--on-deep-muted);
  max-width: 76ch;
}

/* ── Reveal ────────────────────────────────────────────────────────────────
   MUST fail toward visible. Content is hidden only when JS has run (`.js`),
   only when motion is allowed, and site.js additionally reveals everything
   unconditionally on a timer in case the observer never fires. A blank page
   below the fold is a far worse defect than an un-animated one. */

@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 620ms cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
  }
  .js .reveal.is-in { opacity: 1; transform: none; }
}