/*
  Marzex Technologies, edition 4.1: the Anduril system, applied, with Marzex's own accents.
  Source: design-labs/anduril (DESIGN-SYSTEM.md, tokens.css), captured 4 October 2026.

  Ink page, paper type. Bone, stone, sage, olive and graphite are section surfaces.
  Two accents replace Anduril's volt:
    flare #E8326B  what Marzex finds: the lock-on tag. Never on forms, where it reads as error red (1.14:1 apart).
    iris  #6C5CFF  what you act on: focus ring, accordion fill, selection, skip link, required mark.
  The signal gradient (flare to iris, 135deg, mixed in oklab) is allowed on exactly three objects:
  the load bar, the lock-on box and the scroll-to square. Nothing else takes a gradient.
  Neither accent appears on sage, olive or graphite, where both fall under 3:1.

  Type: Inter Tight stands in for Helvetica Now Display, Share Tech Mono for Elios. Both are SIL OFL 1.1
  and self-hosted (licences in brand-assets/fonts). The captured Monotype and ATK Studio files in
  design-labs/anduril/raw/fonts are for local study only and never ship.
  Prometheus sets the "Marzex Technologies" wordmark and nothing else. It needs a commercial licence before launch.
*/

@font-face { font-family: "Inter Tight"; font-weight: 100 900; font-style: normal; font-display: swap; src: url("../fonts/inter-tight-var.woff2") format("woff2"); }
@font-face { font-family: "Share Tech Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/share-tech-mono-400.woff2") format("woff2"); }
@font-face { font-family: "Prometheus"; font-weight: 400; font-style: normal; font-display: block; src: url("../fonts/prometheus.woff2") format("woff2"); }

:root {
  color-scheme: dark;

  /* colour: core */
  --ink: #010101;
  --paper: #fff;
  --flare: #e8326b;
  --iris: #6c5cff;
  /* The signal gradient: load bar, lock-on box and scroll-to square only (rules: brand-guidelines.html#gradient).
     Browsers that cannot mix in oklab get solid iris, because an sRGB mix dips to 4.25:1 against ink. */
  --signal: linear-gradient(var(--iris), var(--iris));
  /* colour: surfaces */
  --bone: #f1f0ea;
  --stone: #d8d8d4;
  --sage: #8e9291;
  --graphite: #6c6e6b;
  --olive: #505544;
  --gunmetal: #2f3234;
  /* colour: lines and states */
  --ash: #b0b0a9;
  --smoke: #565654;
  --error: #ff3535;
  --selection: color-mix(in srgb, var(--iris) 45%, transparent);

  /* type */
  --sans: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --label: "Share Tech Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --logo: "Prometheus", var(--sans);

  /* layout: 12 columns, full bleed, no max width */
  --margin: 2rem;
  --col-gap: 1.125rem;
  --row-gap: 1.25rem;
  --header-h: 4.5rem;

  /* space: .25 / .5 / 1 / 1.25 / 1.5 / 2 / 3 / 4 / 5 / 7 rem */
  --s-05: .25rem; --s-1: .5rem; --s-2: 1rem; --s-25: 1.25rem; --s-3: 1.5rem;
  --s-4: 2rem; --s-6: 3rem; --s-8: 4rem; --s-10: 5rem; --s-14: 7rem;

  /* shape */
  --r-media: 2px;
  --r-pill: 100px;

  /* motion */
  --ease-cubic: cubic-bezier(.215, .61, .355, 1);
  --ease-expo: cubic-bezier(.19, 1, .22, 1);
  --ease-sine: cubic-bezier(.39, .575, .565, 1);
  --ease-fill: cubic-bezier(.215, .62, .34, 1);
  --ease-inout: cubic-bezier(.645, .045, .355, 1);
  --t-fast: 150ms;
  --t-hover: 300ms;
  --t-base: 500ms;
  --t-reveal: 1000ms;

  /* effects */
  --scrim: linear-gradient(rgba(1,1,1,0) 0%, rgba(1,1,1,.004) 1.8%, rgba(1,1,1,.008) 4.8%, rgba(1,1,1,.02) 9%, rgba(1,1,1,.043) 13.9%, rgba(1,1,1,.075) 19.8%, rgba(1,1,1,.125) 27%, rgba(1,1,1,.192) 35%, rgba(1,1,1,.28) 43.5%, rgba(1,1,1,.38) 53%, rgba(1,1,1,.54) 66%, rgba(1,1,1,.737) 81%, #010101 100%);
  --frost: blur(4rem);
  --grade: saturate(.9) contrast(1.04);

  /* icons: 1px strokes, drawn through currentColor with a mask */
  --icon-ne: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 8.5 8.5 1.5M3 1.5h5.5V7' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E");
  --icon-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 .5v8.6M1.4 5.6 5 9.2l3.6-3.6' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E");
  --icon-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 9.5V.9M1.4 4.4 5 .8l3.6 3.6' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E");
  --icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0v10M0 5h10' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E");
}

@supports (background: linear-gradient(in oklab 135deg, red, blue)) {
  :root { --signal: linear-gradient(in oklab 135deg, var(--flare), var(--iris)); }
}

/* ---------- Surfaces ----------
   Each surface sets --bg, --fg, the dim opacity for secondary text, the focus ring and the required mark.
   Dim is .6 as on anduril.com where that passes 4.5:1, and higher on the mid-tone surfaces where .6 would not.
   Iris takes the focus ring where it clears 3:1 (ink 4.58, paper 4.55, bone 3.99) and the required mark, which is
   text, where it clears 4.5:1 (ink, paper). Everywhere else both fall back to the type colour. */
:root, .theme-dark { --bg: var(--ink); --fg: var(--paper); --dim: .6; --focus: var(--iris); --mark: var(--iris); }
.theme-light    { --bg: var(--paper);    --fg: var(--ink);   --dim: .6;  --focus: var(--iris); --mark: var(--iris); color-scheme: light; }
.theme-bone     { --bg: var(--bone);     --fg: var(--ink);   --dim: .6;  --focus: var(--iris); --mark: var(--ink); color-scheme: light; }
.theme-stone    { --bg: var(--stone);    --fg: var(--ink);   --dim: .6;  --focus: var(--ink); --mark: var(--ink); color-scheme: light; }
.theme-sage     { --bg: var(--sage);     --fg: var(--ink);   --dim: .8;  --focus: var(--ink); --mark: var(--ink); color-scheme: light; }
.theme-olive    { --bg: var(--olive);    --fg: var(--paper); --dim: .8;  --focus: var(--paper); --mark: var(--paper); }
.theme-graphite { --bg: var(--graphite); --fg: var(--paper); --dim: .92; --focus: var(--paper); --mark: var(--paper); }
:root, .theme-dark, .theme-light, .theme-bone, .theme-stone, .theme-sage, .theme-olive, .theme-graphite {
  --rule: color-mix(in srgb, var(--fg) 30%, transparent);
  --rule-strong: color-mix(in srgb, var(--fg) 60%, transparent);
}
.theme-dark, .theme-light, .theme-bone, .theme-stone, .theme-sage, .theme-olive, .theme-graphite { background-color: var(--bg); color: var(--fg); }

/* ---------- Fluid root: 1rem = 14px below 1280, 16px at 1440, 18px at 1920, 24px from 2400 ---------- */
html { font-size: 14px; }
@media (min-width: 1280px) { html { font-size: calc(1.25vw - 2px); } }
@media (min-width: 1440px) { html { font-size: calc(.416667vw + 10px); } }
@media (min-width: 1920px) { html { font-size: calc(1.25vw - 6px); } }
@media (min-width: 2400px) { html { font-size: 24px; } }
@media (max-width: 768px) { :root { --margin: 1.428rem; --col-gap: .357rem; --row-gap: .357rem; --header-h: 4.25rem; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--ink);
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; min-width: 320px;
  background: var(--bg); color: var(--fg);
  font: 400 1.05rem/1.2 var(--sans); letter-spacing: -.009rem;
  font-kerning: normal; font-feature-settings: "ss01" 0;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
h1, h2, h3, h4, h5, h6 { font-weight: 400; }
ul, ol { margin: 0; padding: 0; }
img, video, svg, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
button, input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
address { font-style: normal; }
::selection { background: var(--selection); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
[hidden] { display: none !important; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip {
  position: absolute; left: var(--margin); top: -4rem; z-index: 10002;
  padding: .75rem 1rem; background: var(--iris); color: var(--paper);
  font: 500 .875rem/1 var(--sans); text-decoration: none;
}
.skip:focus { top: 1rem; }

/* ---------- Grid ---------- */
.grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap); row-gap: var(--row-gap);
  padding-inline: var(--margin);
}
.bleed { padding-inline: var(--margin); }
.rule { height: 1px; border: 0; margin: 0; background: var(--rule); }

/* ---------- Type ramp (desktop, then the 768 override, as on anduril.com) ----------
   Headings stay at weight 400; bold is for proper nouns. Tracking is negative except on caps labels. */
.t-display-1 { font: 400 16rem/.9 var(--sans); letter-spacing: -.18125rem; }
.t-display-2 { font: 700 9rem/1.1 var(--sans); letter-spacing: -.25rem; }
.t-display-3 { font: 400 8.75rem/.95 var(--sans); letter-spacing: -.0875rem; }
.t-display-4 { font: 500 7.5rem/.9 var(--sans); letter-spacing: -.15rem; text-transform: uppercase; }
.t-h1 { font: 700 5rem/1.05 var(--sans); letter-spacing: -.1rem; }
.t-h2 { font: 400 4rem/1.05 var(--sans); letter-spacing: -.08rem; }
.t-h3 { font: 400 3.5rem/1.1 var(--sans); letter-spacing: -.07rem; }
.t-h4 { font: 400 2.5rem/1.15 var(--sans); letter-spacing: -.05rem; }
.t-h5 { font: 400 2rem/1.15 var(--sans); letter-spacing: -.02rem; }
.t-h6, .t-lead { font: 400 1.5rem/1.15 var(--sans); letter-spacing: -.015rem; }
.t-h7 { font: 400 1.25rem/1.15 var(--sans); letter-spacing: -.013rem; }
.t-h8 { font: 400 1.125rem/1.15 var(--sans); letter-spacing: -.011rem; }
.t-body-1 { font: 400 1.05rem/1.2 var(--sans); letter-spacing: -.009rem; }
.t-body-2 { font: 400 .938rem/1.2 var(--sans); letter-spacing: -.009rem; }
.t-body-3 { font: 500 .875rem/1.2 var(--sans); letter-spacing: -.009rem; }
.t-cta { font: 400 .875rem/1.05 var(--sans); letter-spacing: -.009rem; }
.t-detail { font: 500 .75rem/1.05 var(--sans); letter-spacing: .03rem; text-transform: uppercase; }
.t-label { font: 400 .75rem/1.05 var(--label); letter-spacing: .03rem; text-transform: uppercase; }
/* Running text: the ramp's 120% leading, opened up for paragraphs longer than a few lines. */
.prose p { line-height: 1.35; max-width: 62ch; }
.prose p + p { margin-top: 1em; }
.dim { opacity: var(--dim); }

@media (max-width: 768px) {
  .t-display-1 { font-size: 14rem; line-height: .83; letter-spacing: -.42rem; }
  .t-display-2 { font-size: 3.5rem; letter-spacing: -.04rem; }
  .t-display-3 { font-size: 7.143rem; letter-spacing: -.214rem; }
  .t-display-4 { font-size: 4rem; letter-spacing: -.04rem; }
  .t-h1 { font-size: 2.714rem; line-height: 1; letter-spacing: -.054rem; }
  .t-h2 { font-size: 2.571rem; line-height: 1; letter-spacing: -.051rem; }
  .t-h3 { font-size: 2.429rem; line-height: 1.15; letter-spacing: -.049rem; }
  .t-h4 { font-size: 2.286rem; line-height: 1.05; letter-spacing: -.023rem; }
  .t-h5 { font-size: 1.929rem; letter-spacing: -.019rem; }
  .t-h6, .t-lead { font-size: 1.714rem; letter-spacing: -.017rem; }
  .t-h7 { font-size: 1.429rem; letter-spacing: -.014rem; }
  .t-h8 { font-size: 1.643rem; letter-spacing: -.016rem; }
  .t-body-1 { font-size: 1.286rem; letter-spacing: -.013rem; }
  .t-body-2 { font-size: 1.143rem; letter-spacing: -.011rem; }
  .t-body-3, .t-cta { font-size: 1.071rem; letter-spacing: -.011rem; }
  .t-detail, .t-label { font-size: .929rem; letter-spacing: .037rem; }
}
@media (max-width: 400px) {
  .t-display-3 { font-size: 4.286rem; letter-spacing: -.128rem; }
  .t-display-4 { font-size: 3rem; }
}

/* ---------- Wordmark: Prometheus, nowhere else ---------- */
.wordmark {
  font-family: var(--logo); font-weight: 400; letter-spacing: .02em; line-height: 1;
  white-space: nowrap; color: inherit; text-decoration: none;
}

/* ---------- Icons ---------- */
.icon { display: inline-block; flex: none; width: .55rem; height: .55rem; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.icon--ne { --i: var(--icon-ne); }
.icon--down { --i: var(--icon-down); }
.icon--up { --i: var(--icon-up); }
.icon--plus { --i: var(--icon-plus); }

/* ---------- LinkButton: dimmed text link, underline draws in from the left ---------- */
.link {
  display: inline-flex; align-items: center; gap: .5rem; width: fit-content;
  color: inherit; opacity: var(--dim); text-decoration: none;
  font: 400 .875rem/1.05 var(--sans); letter-spacing: -.009rem;
  transition: opacity var(--t-hover) ease-out;
}
.link > span { position: relative; }
.link > span::after {
  content: ""; position: absolute; left: 0; bottom: -.3rem; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--t-hover) ease-out;
}
.link:hover, .link:focus-visible { opacity: 1; }
.link:hover > span::after, .link:focus-visible > span::after { transform: scaleX(1); }

/* ---------- Secondary button: 1px outline, fills with the outline colour on hover ---------- */
.btn {
  --c: var(--fg); --c-on: var(--bg);
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 2.5rem; padding: .5rem .7rem;
  border: 0; border-radius: 0; outline: 1px solid var(--c); outline-offset: -1px;
  background: transparent; color: var(--c);
  font: 400 1.05rem/1.05 var(--sans); letter-spacing: -.01rem; text-decoration: none; white-space: nowrap;
  transition: background-color var(--t-hover) ease-out, color var(--t-hover) ease-out;
}
.btn:hover { background: var(--c); color: var(--c-on); }
.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; box-shadow: inset 0 0 0 1px var(--c); }
.btn--sm { min-height: 2.25rem; padding: .4rem .6rem; font-size: .938rem; }
@media (pointer: coarse) { .btn { min-height: 44px; } }

/* ---------- CircleButton: pill outline, inverts on hover ---------- */
.circle {
  display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0;
  border: 1px solid currentColor; border-radius: var(--r-pill);
  background: transparent; color: inherit;
  transition: background-color var(--t-base), color var(--t-base);
}
@media (hover: hover) { .circle:hover { background: var(--fg); color: var(--bg); } }

/* ---------- Media: full colour, a light film grade, 2px corners ---------- */
.frame { position: relative; overflow: hidden; border-radius: var(--r-media); background: var(--gunmetal); }
.media { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-media); filter: var(--grade); }
.scrim::after { content: ""; position: absolute; inset: 35% 0 0; background: var(--scrim); pointer-events: none; }

/* ---------- Header: fixed, frosted once the page moves under it ----------
   Its tone follows whatever sits under the top 10px of the screen (marzex.js sets data-tone). Dark under ink,
   olive, graphite and pictures; light under paper, bone, stone and sage. A picture bright enough to need the
   light header carries data-nav="light" on itself or its frame. */
.hdr {
  --fg: var(--paper); --bg: var(--ink); --focus: var(--iris); --frost-bg: rgba(1, 1, 1, .82);
  --pill: var(--paper); --on: var(--ink);
  position: fixed; inset: 0 0 auto; z-index: 100; height: var(--header-h); color: var(--fg);
  transition: color var(--t-hover) var(--ease-cubic);
}
.hdr[data-tone="light"] {
  --fg: var(--ink); --bg: var(--paper); --frost-bg: rgba(241, 240, 234, .82);
  --pill: var(--ink); --on: var(--paper); color-scheme: light;
}
.hdr::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--frost-bg); -webkit-backdrop-filter: var(--frost); backdrop-filter: var(--frost);
  opacity: 0; transition: opacity var(--t-base) var(--ease-cubic), background-color var(--t-hover) var(--ease-cubic);
}
.hdr.is-frosted::before { opacity: 1; }
.hdr__in { position: relative; height: 100%; align-items: center; }
.hdr__brand { grid-column: 1 / 5; justify-self: start; display: flex; align-items: center; min-height: 44px; text-decoration: none; }
.hdr__brand .wordmark { font-size: 1.05rem; }
.hdr__end a:not(.btn) {
  display: block; padding: .5rem 0; text-decoration: none;
  font: 400 .938rem/1.2 var(--sans); letter-spacing: -.009rem;
  transition: opacity var(--t-fast) var(--ease-cubic);
}
.hdr__end a:not(.btn):hover { opacity: .5; }

/* Nav: a glass capsule of links, and one pill on the link marked aria-current. Besides the CircleButton it is the
   only rounded UI. Dark glass is gunmetal at 70% (paper on it stays at 5.1:1 or better over a white picture);
   light glass is Anduril's (white .5, blur 10px, brightness 1.5). marzex.js slides the pill between links and
   clips a second copy of the labels to it, so the type inverts exactly where the pill is. Without the script
   the current link carries the pill itself. Never the signal gradient. */
.hdr__nav {
  --pad: .25rem;
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); isolation: isolate;
  padding: var(--pad); border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--gunmetal) 70%, transparent);
  outline: 1px solid rgba(255, 255, 255, .14); outline-offset: -1px;
  -webkit-backdrop-filter: var(--frost); backdrop-filter: var(--frost);
  transition: background-color var(--t-hover) var(--ease-cubic), outline-color var(--t-hover) var(--ease-cubic);
}
.hdr[data-tone="light"] .hdr__nav {
  background: rgba(255, 255, 255, .5); outline-color: rgba(1, 1, 1, .08);
  -webkit-backdrop-filter: blur(10px) brightness(1.5); backdrop-filter: blur(10px) brightness(1.5);
}
.hdr__nav ul { list-style: none; display: flex; }
.hdr__nav a, .hdr__lit span {
  display: flex; align-items: center; height: 2rem; padding-inline: .875rem; border-radius: var(--r-pill);
  white-space: nowrap; text-decoration: none; font: 400 .938rem/1 var(--sans); letter-spacing: -.009rem;
}
.hdr__nav a { transition: opacity var(--t-fast) var(--ease-cubic); }
.hdr__nav a:not([aria-current]):hover { opacity: .5; }
.hdr__nav a:focus-visible { outline-color: currentColor; outline-offset: 1px; } /* iris drops under 3:1 on glass over a picture */
.hdr__nav a[aria-current] { background: var(--pill); color: var(--on); }
.hdr__nav.is-live a[aria-current] { background: none; color: inherit; }
.hdr__pill, .hdr__lit {
  position: absolute; inset: 0; pointer-events: none;
  clip-path: var(--clip, inset(50% round var(--r-pill))); opacity: 0;
  transition: opacity var(--t-hover) var(--ease-cubic), background-color var(--t-hover) var(--ease-cubic), color var(--t-hover) var(--ease-cubic);
}
.hdr__pill { z-index: -1; background: var(--pill); }
.hdr__nav .hdr__lit { z-index: 1; padding: var(--pad); color: var(--on); }
.hdr__nav.has-current .hdr__pill, .hdr__nav.has-current .hdr__lit { opacity: 1; }
.hdr__nav.is-ready .hdr__pill, .hdr__nav.is-ready .hdr__lit {
  transition: clip-path var(--t-base) var(--ease-expo), opacity var(--t-hover) var(--ease-cubic), background-color var(--t-hover) var(--ease-cubic), color var(--t-hover) var(--ease-cubic);
}

.hdr__end { grid-column: 9 / 13; justify-self: end; display: flex; align-items: center; gap: 1.5rem; }
.hdr__menu {
  display: none; position: relative; width: 44px; height: 44px; margin-right: -10px; padding: 0;
  border: 0; background: transparent; color: inherit;
}
.hdr__menu::before, .hdr__menu::after {
  content: ""; position: absolute; left: 10px; right: 10px; height: 1.5px; background: currentColor;
  transition: transform var(--t-hover) var(--ease-cubic);
}
.hdr__menu::before { top: 17px; }
.hdr__menu::after { top: 25px; }
.hdr__menu[aria-expanded="true"]::before { transform: translateY(4px) rotate(45deg); }
.hdr__menu[aria-expanded="true"]::after { transform: translateY(-4px) rotate(-45deg); }
/* Wide screens, once the page moves: the wordmark and end links fade out and the bar stays clear, so only the
   capsule is left, centred and still clickable. Back at the top they return. Below 1081 the bar, wordmark and
   menu button stay put. */
@media (min-width: 1081px) {
  .hdr__brand, .hdr__end { transition: opacity var(--t-hover) var(--ease-cubic), visibility 0s; }
  .hdr.is-scrolled { pointer-events: none; }
  .hdr.is-scrolled .hdr__nav { pointer-events: auto; }
  .hdr.is-scrolled::before { opacity: 0; }
  .hdr.is-scrolled .hdr__brand, .hdr.is-scrolled .hdr__end {
    opacity: 0; visibility: hidden;
    transition: opacity var(--t-hover) var(--ease-cubic), visibility 0s linear var(--t-hover);
  }
}
@media (max-width: 1080px) {
  .hdr__nav, .hdr .hdr__end > :not(.hdr__menu) { display: none; }
  .hdr__menu { display: block; }
}

/* Mobile menu: full-screen ink, large stacked links */
.menu {
  position: fixed; inset: 0; z-index: 99; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
  padding: calc(var(--header-h) + 2rem) var(--margin) 2rem; overflow-y: auto;
  background: var(--ink); color: var(--paper);
  opacity: 0; visibility: hidden; transition: opacity var(--t-hover) var(--ease-cubic), visibility 0s linear var(--t-hover);
}
.menu.is-open { opacity: 1; visibility: visible; transition: opacity var(--t-hover) var(--ease-cubic), visibility 0s; }
.menu ul { list-style: none; display: grid; gap: .25rem; }
.menu li a { display: block; padding: .25rem 0; text-decoration: none; font: 400 1.929rem/1.15 var(--sans); letter-spacing: -.019rem; }
.menu li a:hover { opacity: .5; }
.menu li a[aria-current] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.menu__foot { display: grid; gap: 1rem; }

/* ---------- Accordion: + in column 1, an iris fill rises from the bottom on hover. Solid, never the gradient: text sits on it ---------- */
.acc { border-top: 1px solid var(--rule-strong); }
.acc__item { border-bottom: 1px solid var(--rule-strong); interpolate-size: allow-keywords; }
.acc__item > summary {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: center;
  padding: 2rem 0; list-style: none; cursor: pointer;
  transition: color var(--t-hover) ease-out;
}
.acc__item > summary::-webkit-details-marker { display: none; }
.acc__item > summary::before {
  content: ""; position: absolute; inset: 0 calc(-1 * var(--margin)); z-index: -1;
  background: var(--iris); transform: scaleY(0); transform-origin: 50% 100%;
  transition: transform var(--t-base) var(--ease-fill);
}
.acc__item > summary:focus-visible { outline-offset: -2px; }
.acc__plus { grid-column: 1; justify-self: start; position: relative; width: .875rem; height: .875rem; }
.acc__plus::before, .acc__plus::after { content: ""; position: absolute; background: currentColor; transition: transform var(--t-hover) var(--ease-sine); }
.acc__plus::before { left: 0; right: 0; top: calc(50% - .5px); height: 1px; }
.acc__plus::after { top: 0; bottom: 0; left: calc(50% - .5px); width: 1px; }
.acc__item[open] .acc__plus::after { transform: scaleY(0); }
.acc__item::details-content { block-size: 0; overflow: hidden; transition: block-size var(--t-base) var(--ease-sine), content-visibility var(--t-base) allow-discrete; }
.acc__item[open]::details-content { block-size: auto; }
@media (hover: hover) {
  .acc__item > summary:hover { color: var(--paper); }
  .acc__item > summary:hover .dim { opacity: 1; } /* paper on iris is 4.55:1; dimmed it would fail */
  .acc__item > summary:hover::before { transform: scaleY(1); }
}

/* ---------- Form fields: transparent, a bone underline that turns paper on focus ---------- */
.field { display: grid; gap: .5rem; }
.field label { font: 500 .75rem/1.05 var(--sans); letter-spacing: .03rem; text-transform: uppercase; }
.field .req { color: var(--mark); }
.field input, .field textarea, .field select {
  width: 100%; padding: .6rem 0; border: 0; border-bottom: 1px solid var(--bone); border-radius: 0;
  background: transparent; color: inherit; font: 400 1.05rem/1.3 var(--sans);
  transition: border-color var(--t-hover) ease-out;
}
.theme-light .field input, .theme-light .field textarea, .theme-bone .field input, .theme-bone .field textarea,
.theme-stone .field input, .theme-stone .field textarea, .theme-sage .field input, .theme-sage .field textarea { border-bottom-color: var(--ink); }
.field textarea { resize: vertical; min-height: 7rem; }
.field ::placeholder { color: currentColor; opacity: .6; }
.field input:focus, .field textarea:focus { border-bottom-color: var(--paper); }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.field [aria-invalid="true"] { border-bottom-color: var(--error); }
/* Error red is text only on ink (5.78:1). Elsewhere the message takes the type colour, and on mid-tone surfaces,
   where red is under 3:1, the underline turns 2px in the type colour instead. */
.field__err { margin: 0; font: 500 .875rem/1.3 var(--sans); color: var(--error); }
.theme-light .field__err, .theme-bone .field__err, .theme-stone .field__err, .theme-sage .field__err, .theme-olive .field__err, .theme-graphite .field__err { color: var(--fg); }
.theme-stone .field [aria-invalid="true"], .theme-sage .field [aria-invalid="true"], .theme-olive .field [aria-invalid="true"], .theme-graphite .field [aria-invalid="true"] { border-bottom: 2px solid var(--fg); }

/* ---------- Load bar: 3px of the signal gradient sweeps the top once; the only glow in the system ---------- */
.loadbar {
  position: fixed; inset: 0 0 auto; z-index: 10001; height: 3px; pointer-events: none;
  background: var(--signal);
  transform-origin: 0 50%; transform: scaleX(1); opacity: 0;
  animation: loadbar 1.4s var(--ease-inout) backwards;
}
.loadbar::after { content: ""; position: absolute; inset: 0; background: inherit; filter: blur(5px); } /* the glow takes the gradient's own colours */
@keyframes loadbar {
  0% { transform: scaleX(0); opacity: 1; }
  75% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

/* ---------- Scroll-to: a 64px signal-gradient square, bottom right. Ink on it stays at 4.58:1 or better ---------- */
.scrollto {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 1000;
  display: grid; place-content: center; justify-items: center; gap: .4rem;
  width: 64px; height: 64px; background: var(--signal); color: var(--ink);
  font: 500 .6875rem/1 var(--sans); letter-spacing: .03rem; text-transform: uppercase; text-decoration: none;
  transform: translateY(calc(100% + 60px)); visibility: hidden;
  transition: transform var(--t-base) var(--ease-cubic), visibility 0s linear var(--t-base);
}
.scrollto .icon { width: .75rem; height: .75rem; }
.scrollto.is-shown { transform: none; visibility: visible; transition: transform var(--t-base) var(--ease-cubic), visibility 0s; }
.scrollto:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 2px var(--paper); } /* paper then ink, so the ring shows over any surface */
.menu.is-open ~ .scrollto { visibility: hidden; }

/* ---------- Scroll reveal: 1s easeOutExpo, siblings stagger by --i (0, 1, 2, 3 = 0 to .3s) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal-ready [data-reveal] {
    transition: opacity var(--t-reveal) var(--ease-expo), transform var(--t-reveal) var(--ease-expo);
    transition-delay: calc(var(--i, 0) * 100ms);
  }
  .reveal-ready [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(2rem); }
}

/* ---------- Reduced motion: final states at once ---------- */
@media (prefers-reduced-motion: reduce) {
  .loadbar { display: none; }
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation-duration: 0s !important; animation-delay: 0s !important; }
}