/* ==========================================================================
   aiforce.army — design system stylesheet
   Reference: design/DESIGN.md. Every class documented there exists here.
   Single dark theme. No build step, no external requests.
   Order: fonts, tokens, reset, foundations, layout, type, components,
   utilities, responsive, motion preferences, print.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts — self-hosted, latin subset, woff2 only
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "AIF Display";
  src: url("../fonts/oswald-latin-var.woff2") format("woff2-variations");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "AIF Impact";
  src: url("../fonts/anton-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "AIF Mono";
  src: url("../fonts/ibmplexmono-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "AIF Mono";
  src: url("../fonts/ibmplexmono-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "AIF Text";
  src: url("../fonts/librefranklin-latin-var.woff2") format("woff2-variations");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "AIF Text";
  src: url("../fonts/librefranklin-latin-var-italic.woff2") format("woff2-variations");
  font-weight: 300 800;
  font-style: italic;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* --- surfaces (darkest to lightest) ---
     Flag navy, sampled from the canton in design/generated/hero-*.png: one step
     deeper and one step warmer than a screen blue, so red and bone sit on it the
     way they sit on the plates. --- */
  --c-void: #05081a;
  --c-bg: #0a0f26;
  --c-inset: #070b1e;
  --c-panel: #111934;
  --c-panel-raised: #192243;

  /* --- lines --- */
  --c-line: #283258;
  --c-line-strong: #44538a;
  --c-line-brass: #7d6527;

  /* --- text on the dark grounds --- */
  --c-ink: #f2ece0;
  --c-ink-dim: #d2cec2;
  --c-muted: #9dabc2;

  /* --- accents --- */
  /* --c-brass-pin is the gold itself; --c-brass is the role, and a paper
     context rebinds the role. Chrome that stays dark inside a bone sheet — the
     table header band — reaches for the pin. */
  --c-brass-pin: #e0b64a;
  --c-brass: var(--c-brass-pin);
  --c-brass-bright: #f3d27f;
  --c-brass-deep: #96772c;
  --c-navy: #21305c;
  --c-navy-deep: #161f42;
  --c-navy-bright: #35477f;

  /* Service-field aliases. --c-olive* is the name the route stylesheets still
     use; it resolves to the navy field. */
  --c-olive: var(--c-navy);
  --c-olive-deep: var(--c-navy-deep);
  --c-olive-bright: var(--c-navy-bright);

  /* --- flag red — structural, never a status ---
     --c-red is a stripe: bands, rules, markers, borders. It never carries text
     and is never carried as text. --c-red-deep is a ground: it takes --c-ink or
     --c-bone on top. Neither ever means "something is wrong"; that is --c-alert,
     which is never a fill. */
  --c-red: #c2202c;
  --c-red-deep: #7a1420;

  /* --- signals --- */
  --c-alert: #f07a5e;
  --c-alert-deep: #96351b;
  --c-ok: #57cc82;
  --c-ok-deep: #24663f;
  --c-pending: #7fd4f5;

  /* --- bone: the light surface ---
     The paper the institution files on. A bone sheet rebinds the palette to the
     -ink set below (see "Paper context"); nothing on it is gold and nothing on
     it is red, because the gold rule and the red ribbon frame it from outside. */
  --c-bone: #ebe5d7;
  --c-bone-shade: #e6e0d3;
  --c-bone-line: #b9b09b;
  --c-ink-navy: #111a35;
  --c-ink-navy-dim: #26314f;
  --c-muted-navy: #3b404f;
  --c-brass-ink: #714f00;
  --c-alert-ink: #6a2a11;
  --c-ok-ink: #144b34;
  --c-pending-ink: #005c79;

  /* --- print stock (poster SVGs carry these as literal hex; do not retune) --- */
  --c-paper: #ece2cc;
  --c-paper-shade: #d6c9ac;
  --c-paper-ink: #131a2b;

  /* --- overlays --- */
  --c-scrim: rgba(4, 7, 20, 0.94);
  --c-shadow: rgba(0, 0, 0, 0.55);

  /* --- ornament --- */
  /* A five-pointed star, used as a mask so it always takes a colour token. */
  --orn-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 19'%3E%3Cpath d='M10 0l2.45 7.24h7.55l-6.11 4.47 2.34 7.29L10 14.53l-6.23 4.47 2.34-7.29L0 7.24h7.55z'/%3E%3C/svg%3E");
  /* A long right arrow, also a mask, so a button's arrow is its own colour. */
  --orn-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 12'%3E%3Cpath d='M0 4.7h21.6v2.6H0z'/%3E%3Cpath d='M20 0l8 6-8 6z'/%3E%3C/svg%3E");
  /* A staggered star field, white at low alpha so it tints whatever it sits on
     without needing a colour token. Background image, not a mask. */
  --orn-stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='42' viewBox='0 0 44 42'%3E%3Cg fill='%23ffffff' fill-opacity='0.13'%3E%3Cpath transform='translate(3 3) scale(0.62)' d='M10 0l2.45 7.24h7.55l-6.11 4.47 2.34 7.29L10 14.53l-6.23 4.47 2.34-7.29L0 7.24h7.55z'/%3E%3Cpath transform='translate(25 24) scale(0.62)' d='M10 0l2.45 7.24h7.55l-6.11 4.47 2.34 7.29L10 14.53l-6.23 4.47 2.34-7.29L0 7.24h7.55z'/%3E%3C/g%3E%3C/svg%3E");
  /* The campaign ribbon: flag red and bone, stripe for stripe. --ribbon runs
     across a horizontal band, --stripes runs down a vertical bar. */
  --orn-ribbon: repeating-linear-gradient(90deg, var(--c-red) 0 9px, var(--c-bone) 9px 18px);
  --orn-ribbon-sm: repeating-linear-gradient(90deg, var(--c-red) 0 6px, var(--c-bone) 6px 12px);
  --orn-stripes: repeating-linear-gradient(180deg, var(--c-red) 0 7px, var(--c-bone) 7px 14px);
  /* The same star field in navy, for the watermark on a bone sheet. */
  --orn-stars-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='42' viewBox='0 0 44 42'%3E%3Cg fill='%23111a35' fill-opacity='0.03'%3E%3Cpath transform='translate(3 3) scale(0.62)' d='M10 0l2.45 7.24h7.55l-6.11 4.47 2.34 7.29L10 14.53l-6.23 4.47 2.34-7.29L0 7.24h7.55z'/%3E%3Cpath transform='translate(25 24) scale(0.62)' d='M10 0l2.45 7.24h7.55l-6.11 4.47 2.34 7.29L10 14.53l-6.23 4.47 2.34-7.29L0 7.24h7.55z'/%3E%3C/g%3E%3C/svg%3E");

  /* --- type families --- */
  --font-display: "AIF Display", "Oswald", "Arial Narrow", sans-serif;
  --font-impact: "AIF Impact", "Anton", Impact, "Arial Narrow Bold", sans-serif;
  --font-mono: "AIF Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-text: "AIF Text", "Libre Franklin", -apple-system, "Segoe UI", Helvetica, sans-serif;

  /* --- type scale --- */
  --fs-display-1: clamp(3.25rem, 13vw, 7.5rem);
  --fs-display-2: clamp(2.1rem, 6vw, 3.5rem);
  --fs-display-3: clamp(1.5rem, 3.6vw, 2.125rem);
  --fs-display-4: 1.25rem;
  --fs-lede: clamp(1.0625rem, 2.2vw, 1.3125rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;
  --fs-nano: 0.6875rem;

  --lh-display: 0.92;
  --lh-title: 1.08;
  --lh-body: 1.6;
  --lh-tight: 1.35;

  --tr-display: 0.02em;
  --tr-caps: 0.1em;
  --tr-kicker: 0.22em;

  /* --- spacing scale (4px base) --- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* --- layout --- */
  --wrap: 1120px;
  --wrap-narrow: 720px;
  --wrap-wide: 1400px;
  --page: 1200px;
  --gutter: 16px;
  --section-y: var(--s-7);

  /* --- borders and edges --- */
  --bw: 2px;
  --bw-thick: 3px;
  --radius: 2px;
  --radius-lg: 4px;

  /* --- motion --- */
  --dur-1: 110ms;
  --dur-2: 200ms;
  --ease: cubic-bezier(0.2, 0.6, 0.3, 1);
}

@media (min-width: 720px) {
  :root {
    --gutter: 24px;
    --section-y: var(--s-8);
  }
}

@media (min-width: 1100px) {
  :root {
    --section-y: var(--s-9);
  }
}

/* --------------------------------------------------------------------------
   3. Reset and base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
  /* dark form controls and scrollbars; the page has no light theme */
  color-scheme: dark;
  background-color: var(--c-bg);
}

body {
  margin: 0;
  color: var(--c-ink);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  overflow-x: clip;
  /* The ground either side of the column: the blank banner's own field — the star
     field on the deep navy — under the canvas weave and the soft top light. */
  background-color: var(--c-navy-deep);
  background-image:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.16) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.014) 0 1px, transparent 1px 3px),
    radial-gradient(120% 60% at 50% -10%, rgba(33, 48, 92, 0.66), transparent 70%),
    var(--orn-stars);
  background-attachment: scroll, scroll, fixed, scroll;
}

/* The page is a column: --page wide, centred, laid on the star field.
   The masthead, the main and the footer are the column; everything either side of
   them is ground. Widths inside the column are measured against the column, not the
   viewport, which is what the container declaration on main is for. */
.aif-masthead,
main,
.aif-footer {
  max-width: var(--page);
  margin-inline: auto;
  border-inline: 1px solid var(--c-line);
}

main {
  background-color: var(--c-bg);
  container-type: inline-size;
}

/* The column closes on a hairline under the footer. */
.aif-footer {
  border-bottom: 1px solid var(--c-line);
}

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

p {
  margin: 0 0 var(--s-4);
  max-width: 68ch;
}

/* Prose wraps for the reader, not the box: no orphaned last words. */
p,
li,
blockquote,
figcaption,
dd,
td {
  text-wrap: pretty;
}

figure,
blockquote,
figcaption {
  margin: 0;
}

ul,
ol {
  margin: 0 0 var(--s-4);
  padding-left: 1.2em;
}

li {
  margin-bottom: var(--s-2);
}

strong {
  font-weight: 700;
}

hr {
  border: 0;
  border-top: var(--bw) solid var(--c-line);
  margin: var(--s-6) 0;
}

code,
kbd,
samp {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

:focus-visible {
  outline: var(--bw) solid var(--c-brass-bright);
  outline-offset: 2px;
}

::selection {
  background: var(--c-brass);
  color: var(--c-void);
}

a {
  color: var(--c-brass);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--dur-1) var(--ease);
}

a:hover {
  color: var(--c-brass-bright);
}

/* Inline link inside body copy, given a dossier underline */
.aif-link {
  color: var(--c-brass);
  text-decoration: underline;
  text-decoration-color: var(--c-line-brass);
}

.aif-link:hover {
  text-decoration-color: currentColor;
}

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */

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

.aif-wrap--narrow {
  max-width: var(--wrap-narrow);
}

.aif-wrap--wide {
  max-width: var(--wrap-wide);
}

.aif-section {
  padding-block: var(--section-y);
  border-top: var(--bw) solid var(--c-line);
  position: relative;
}

.aif-section:first-child,
.aif-section--flush {
  border-top: 0;
}

/* Every section rule is tabbed with a short length of campaign ribbon at the
   left, so the page is striped top to bottom rather than ruled in grey. */
.aif-section::before {
  content: "";
  position: absolute;
  top: calc(var(--bw) * -1);
  left: 0;
  width: 108px;
  height: var(--bw-thick);
  background-image: var(--orn-ribbon-sm);
  pointer-events: none;
}

.aif-section:first-child::before,
.aif-section--flush::before {
  content: none;
}

/* Section header: kicker + title + optional lede, marked with a service ribbon */
.aif-section__head {
  margin-bottom: var(--s-6);
  position: relative;
  padding-left: var(--s-4);
}

.aif-section__head::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  bottom: 0.15em;
  width: 5px;
  /* The flag's own stripes, run down the bar. */
  background-image: var(--orn-stripes);
}

.aif-section__head > * + * {
  margin-top: var(--s-2);
}

.aif-grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

.aif-grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

.aif-grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

.aif-grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
}

.aif-grid > * {
  min-width: 0;
}

.aif-stack > * + * {
  margin-top: var(--s-4);
}

.aif-stack--tight > * + * {
  margin-top: var(--s-2);
}

.aif-stack--loose > * + * {
  margin-top: var(--s-6);
}

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

/* Label / value line, dotted leader between the two */
.aif-split {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
}

.aif-split__label {
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: var(--tr-caps);
  white-space: nowrap;
}

.aif-split__fill {
  flex: 1 1 auto;
  border-bottom: 1px dotted var(--c-line-strong);
  transform: translateY(-0.25em);
}

.aif-split__value {
  color: var(--c-ink);
  white-space: nowrap;
}

.aif-rule {
  height: 0;
  border: 0;
  border-top: var(--bw) solid var(--c-line);
  margin-block: var(--s-6);
}

.aif-rule--dashed {
  border-top-style: dashed;
}

/* The issued-document rule: a gold hairline broken by a single star. */
.aif-rule--brass {
  border-top: 0;
  height: 11px;
  background: var(--c-brass);
  -webkit-mask:
    linear-gradient(90deg, #000 0 calc(50% - 12px), transparent calc(50% - 12px) calc(50% + 12px), #000 calc(50% + 12px))
      0 50% / 100% 1px no-repeat,
    var(--orn-star) 50% 50% / 11px 11px no-repeat;
  mask:
    linear-gradient(90deg, #000 0 calc(50% - 12px), transparent calc(50% - 12px) calc(50% + 12px), #000 calc(50% + 12px))
      0 50% / 100% 1px no-repeat,
    var(--orn-star) 50% 50% / 11px 11px no-repeat;
}

/* --------------------------------------------------------------------------
   5. Type
   -------------------------------------------------------------------------- */

.aif-kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tr-kicker);
  color: var(--c-brass);
  margin: 0;
  display: block;
}

.aif-kicker--alert {
  color: var(--c-alert);
}

.aif-kicker--muted {
  color: var(--c-muted);
}

.aif-display-1,
.aif-display-2,
.aif-display-3,
.aif-display-4 {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tr-display);
  line-height: var(--lh-title);
  margin: 0;
  color: var(--c-ink);
  text-wrap: balance;
}

.aif-display-1 {
  font-size: var(--fs-display-1);
  font-weight: 700;
  line-height: var(--lh-display);
  letter-spacing: 0.005em;
  color: var(--c-brass);
}

.aif-display-2 {
  font-size: var(--fs-display-2);
  color: var(--c-brass);
}

.aif-display-3 {
  font-size: var(--fs-display-3);
}

.aif-display-4 {
  font-size: var(--fs-display-4);
  letter-spacing: 0.04em;
}

/* h1..h4 inherit the display scale when they carry no class */
h1:not([class]) {
  font: inherit;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display-1);
  line-height: var(--lh-display);
  text-transform: uppercase;
  color: var(--c-brass);
  margin: 0 0 var(--s-4);
}

h2:not([class]) {
  font: inherit;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-display-2);
  line-height: var(--lh-title);
  text-transform: uppercase;
  color: var(--c-brass);
  margin: 0 0 var(--s-3);
}

h3:not([class]) {
  font: inherit;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-display-3);
  line-height: var(--lh-title);
  text-transform: uppercase;
  margin: 0 0 var(--s-3);
}

h4:not([class]) {
  font: inherit;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-display-4);
  line-height: var(--lh-title);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 var(--s-2);
}

.aif-lede {
  font-size: var(--fs-lede);
  line-height: 1.45;
  color: var(--c-ink-dim);
  max-width: 54ch;
}

.aif-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
}

/* Dossier text: typewritten, tracked, for machine-issued statements */
.aif-dossier {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  line-height: 1.7;
  letter-spacing: 0.01em;
  color: var(--c-ink-dim);
}

.aif-muted {
  color: var(--c-muted);
}

.aif-caps {
  text-transform: uppercase;
  letter-spacing: var(--tr-caps);
}

/* A quotation is ribboned, not ruled: the flag's stripes run down its edge. */
.aif-quote {
  font-size: var(--fs-lede);
  font-style: italic;
  line-height: 1.45;
  border-left: var(--bw) solid transparent;
  padding-left: var(--s-4);
  margin: 0 0 var(--s-4);
  background-image: var(--orn-stripes);
  background-repeat: no-repeat;
  background-size: 5px 100%;
  background-position: 0 0;
  background-origin: border-box;
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */

.aif-btn {
  --btn-bg: var(--c-brass);
  --btn-fg: var(--c-void);
  --btn-edge: var(--c-brass);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  padding: 14px 22px;
  min-height: 48px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: var(--bw) solid var(--btn-edge);
  border-radius: var(--radius);
  cursor: pointer;
  position: relative;
  transition:
    background-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease),
    transform var(--dur-1) var(--ease);
}

.aif-btn:hover {
  --btn-bg: var(--c-brass-bright);
  --btn-edge: var(--c-brass-bright);
  color: var(--c-void);
}

.aif-btn:active {
  transform: translateY(1px);
}

.aif-btn[disabled],
.aif-btn.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.aif-btn--primary {
  --btn-bg: var(--c-brass);
  --btn-fg: var(--c-void);
  --btn-edge: var(--c-brass);
}

.aif-btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--c-brass);
  --btn-edge: var(--c-brass);
}

.aif-btn--ghost:hover {
  --btn-bg: rgba(224, 182, 74, 0.15);
  --btn-edge: var(--c-brass-bright);
  color: var(--c-brass-bright);
}

.aif-btn--quiet {
  --btn-bg: transparent;
  --btn-fg: var(--c-ink-dim);
  --btn-edge: var(--c-line-strong);
}

.aif-btn--quiet:hover {
  --btn-bg: var(--c-panel-raised);
  --btn-edge: var(--c-brass);
  color: var(--c-ink);
}

.aif-btn--danger {
  --btn-bg: transparent;
  --btn-fg: var(--c-alert);
  --btn-edge: var(--c-alert-deep);
}

.aif-btn--danger:hover {
  --btn-bg: rgba(240, 122, 94, 0.18);
  --btn-edge: var(--c-alert);
  color: var(--c-alert);
}

.aif-btn--sm {
  font-size: var(--fs-small);
  padding: 8px 14px;
  min-height: 36px;
  letter-spacing: 0.1em;
}

.aif-btn--lg {
  font-size: clamp(1.125rem, 2.6vw, 1.5rem);
  padding: 18px 32px;
  min-height: 60px;
}

.aif-btn--block {
  display: flex;
  width: 100%;
}

/* A ranked primary action carries the direction of travel. The arrow is drawn,
   not typed, so it takes the button's own colour and never becomes a character
   a screen reader has to read out. */
.aif-btn--arrow::after {
  content: "";
  flex: none;
  width: 1.75em;
  height: 0.75em;
  margin-left: var(--s-2);
  background: currentColor;
  -webkit-mask: var(--orn-arrow) center / contain no-repeat;
  mask: var(--orn-arrow) center / contain no-repeat;
}

.aif-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}

/* --------------------------------------------------------------------------
   7. Panels
   -------------------------------------------------------------------------- */

.aif-panel {
  background: var(--c-panel);
  border: var(--bw) solid var(--c-line);
  border-radius: var(--radius);
  padding: var(--s-5);
  position: relative;
}

.aif-panel--raised {
  background: var(--c-panel-raised);
  border-color: var(--c-line-strong);
}

.aif-panel--inset {
  background: var(--c-inset);
  border-color: var(--c-line);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.4);
}

.aif-panel--flush {
  padding: 0;
  overflow: hidden;
}

.aif-panel--alert {
  border-color: var(--c-alert-deep);
  background: linear-gradient(0deg, rgba(150, 53, 27, 0.16), rgba(150, 53, 27, 0.16)), var(--c-panel);
}

.aif-panel--brass {
  border-color: var(--c-line-brass);
  background: linear-gradient(0deg, rgba(224, 182, 74, 0.07), rgba(224, 182, 74, 0.07)), var(--c-panel);
}

/* Double brass rule, for issued documents */
.aif-panel--framed {
  border: 1px solid var(--c-brass);
  outline: 1px solid var(--c-brass);
  outline-offset: 4px;
  background: var(--c-panel);
  padding: var(--s-6);
  margin: var(--s-2);
}

/* Corner brackets, for classified-looking blocks */
.aif-panel--corners::before,
.aif-panel--corners::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: var(--bw) solid var(--c-red);
  pointer-events: none;
}

.aif-panel--corners::before {
  top: -2px;
  left: -2px;
  border-right: 0;
  border-bottom: 0;
}

.aif-panel--corners::after {
  bottom: -2px;
  right: -2px;
  border-left: 0;
  border-top: 0;
}

/* The head strip is a filing band: navy ground, campaign ribbon along its top
   edge. Every headed block on the site carries the same three inches of flag. */
.aif-panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin: calc(var(--s-5) * -1) calc(var(--s-5) * -1) var(--s-4);
  padding: var(--s-3) var(--s-5);
  background-color: var(--c-navy-deep);
  background-image: var(--orn-ribbon-sm);
  background-repeat: repeat-x;
  background-size: auto var(--bw-thick);
  background-position: 0 0;
  border-bottom: var(--bw) solid var(--c-line);
}

.aif-panel__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-ink);
  margin: 0;
}

.aif-panel__body > :last-child {
  margin-bottom: 0;
}

.aif-panel__foot {
  margin: var(--s-4) calc(var(--s-5) * -1) calc(var(--s-5) * -1);
  padding: var(--s-3) var(--s-5);
  border-top: var(--bw) solid var(--c-line);
  background: rgba(0, 0, 0, 0.22);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: var(--tr-caps);
}

/* --------------------------------------------------------------------------
   8. Stamps and tags
   -------------------------------------------------------------------------- */

.aif-stamp {
  --stamp-color: var(--c-alert);
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--stamp-color);
  border: var(--bw-thick) solid var(--stamp-color);
  border-radius: var(--radius);
  padding: 8px 16px 6px;
  transform: rotate(-5deg);
  opacity: 0.94;
  background: transparent;
  /* ink bleed: a faint outer halo of the same colour */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3) inset;
}

.aif-stamp--ok {
  --stamp-color: var(--c-ok);
}

.aif-stamp--alert {
  --stamp-color: var(--c-alert);
}

.aif-stamp--pending {
  --stamp-color: var(--c-pending);
}

.aif-stamp--brass {
  --stamp-color: var(--c-brass);
}

.aif-stamp--neutral {
  --stamp-color: var(--c-muted);
}

.aif-stamp--sm {
  font-size: 0.9375rem;
  border-width: var(--bw);
  padding: 5px 10px 4px;
}

.aif-stamp--lg {
  font-size: clamp(1.75rem, 5vw, 2.75rem);
  border-width: 5px;
  padding: 10px 22px 8px;
}

.aif-stamp--static {
  transform: none;
}

.aif-stamp--flat {
  border: 0;
  padding: 0;
  transform: none;
  letter-spacing: 0.08em;
}

.aif-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-nano);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  padding: 2px 7px;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  color: var(--c-muted);
  white-space: nowrap;
  vertical-align: 0.15em;
}

.aif-tag--force {
  color: var(--c-brass);
}

.aif-tag--hoax {
  color: var(--c-alert);
}

.aif-tag--pending {
  color: var(--c-pending);
}

.aif-tag--ok {
  color: var(--c-ok);
}

/* --------------------------------------------------------------------------
   9. Tables
   -------------------------------------------------------------------------- */

.aif-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: var(--bw) solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-panel);
}

.aif-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  line-height: 1.5;
}

.aif-table th,
.aif-table td {
  text-align: left;
  padding: 10px var(--s-3);
  border-bottom: 1px solid var(--c-line);
  vertical-align: top;
}

/* Table headers are ribboned along the bottom edge: the ribbon is the rule. */
.aif-table thead th {
  font-weight: 600;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--tr-caps);
  color: var(--c-brass-pin);
  background-color: var(--c-navy-deep);
  background-image: var(--orn-ribbon-sm);
  background-repeat: repeat-x;
  background-size: auto var(--bw-thick);
  background-position: 0 100%;
  border-bottom: 0;
  position: sticky;
  top: 0;
}

.aif-table tbody tr:nth-child(even) {
  background: rgba(200, 216, 255, 0.03);
}

.aif-table tbody tr:hover {
  background: rgba(224, 182, 74, 0.07);
}

.aif-table tbody tr:last-child td {
  border-bottom: 0;
}

.aif-table td:first-child {
  white-space: nowrap;
  color: var(--c-muted);
}

/* Dossier variant: numbered rows, tighter, no hover tint */
.aif-table--dossier td,
.aif-table--dossier th {
  padding: 8px var(--s-3);
  font-size: var(--fs-micro);
}

.aif-table--dossier tbody tr:hover {
  background: transparent;
}

/* Key/value variant: left column is the label */
.aif-table--keyvalue th {
  width: 30%;
  color: var(--c-brass);
  font-weight: 600;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--tr-caps);
  background: transparent;
  border-bottom: 1px solid var(--c-line);
  position: static;
}

.aif-table--keyvalue td {
  color: var(--c-ink);
  white-space: normal;
}

.aif-status {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.aif-status--busted {
  color: var(--c-ok);
}

.aif-status--active {
  color: var(--c-alert);
}

.aif-status--pending {
  color: var(--c-pending);
}

.aif-status--expired {
  color: var(--c-brass);
}

/* --------------------------------------------------------------------------
   10. Meters, bars, gauges
   -------------------------------------------------------------------------- */

.aif-meter {
  margin-block: var(--s-3) var(--s-2);
}

.aif-meter__track {
  position: relative;
  height: 24px;
  border: var(--bw) solid var(--c-line-strong);
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.28) 0 1px, transparent 1px 12px),
    linear-gradient(90deg, var(--c-ok-deep), var(--c-brass) 58%, var(--c-alert-deep));
}

.aif-meter__needle {
  position: absolute;
  top: -8px;
  bottom: -8px;
  left: 0;
  width: 3px;
  margin-left: -1.5px;
  background: var(--c-ink);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
  transition: left var(--dur-2) var(--ease);
}

.aif-meter__needle::after {
  content: "";
  position: absolute;
  top: -5px;
  left: -3.5px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--c-ink);
}

.aif-meter__scale {
  display: flex;
  justify-content: space-between;
  gap: var(--s-2);
  margin-top: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-nano);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.aif-meter__scale span:last-child {
  text-align: right;
}

.aif-bar {
  position: relative;
  height: 20px;
  background: var(--c-inset);
  border: var(--bw) solid var(--c-line);
  border-radius: var(--radius);
  overflow: hidden;
}

.aif-bar__fill {
  display: block;
  height: 100%;
  width: 0;
  background:
    repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.16) 0 6px, transparent 6px 12px),
    var(--c-brass);
  transition: width var(--dur-2) var(--ease);
}

.aif-bar__fill--olive {
  background:
    repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.16) 0 6px, transparent 6px 12px),
    var(--c-navy-bright);
}

.aif-bar__fill--alert {
  background:
    repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.16) 0 6px, transparent 6px 12px),
    var(--c-alert-deep);
}

.aif-bar__label {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--tr-caps);
  color: var(--c-muted);
  margin-bottom: var(--s-1);
}

/* Half-dial gauge. Set --gauge-value: 0..1 */
.aif-gauge {
  --gauge-value: 0.5;
  width: 100%;
  max-width: 240px;
  text-align: center;
}

.aif-gauge__dial {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  border-bottom: var(--bw) solid var(--c-line-strong);
}

.aif-gauge__dial::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px 999px 0 0;
  background: conic-gradient(
    from 270deg at 50% 100%,
    var(--c-ok-deep) 0deg,
    var(--c-brass) 90deg,
    var(--c-alert-deep) 180deg,
    transparent 180deg
  );
  -webkit-mask: radial-gradient(circle at 50% 100%, transparent 0 56%, #000 56.5%);
  mask: radial-gradient(circle at 50% 100%, transparent 0 56%, #000 56.5%);
}

.aif-gauge__needle {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 3px;
  height: 84%;
  margin-left: -1.5px;
  background: var(--c-ink);
  transform-origin: 50% 100%;
  transform: rotate(calc(-90deg + var(--gauge-value) * 180deg));
  transition: transform var(--dur-2) var(--ease);
}

.aif-gauge__needle::before {
  content: "";
  position: absolute;
  bottom: -6px;
  left: -5px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--c-brass);
  border: 2px solid var(--c-void);
}

.aif-gauge__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-brass);
  margin-top: var(--s-2);
}

.aif-gauge__label {
  font-family: var(--font-mono);
  font-size: var(--fs-nano);
  text-transform: uppercase;
  letter-spacing: var(--tr-caps);
  color: var(--c-muted);
}

/* --------------------------------------------------------------------------
   11. Counters
   -------------------------------------------------------------------------- */

.aif-counter {
  text-align: center;
  padding: var(--s-5) var(--s-3);
  background: var(--c-panel);
  border: var(--bw) solid var(--c-line);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
}

.aif-counter::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: transparent;
  background-image:
    var(--orn-stars),
    radial-gradient(90% 70% at 50% 0%, rgba(224, 182, 74, 0.13), transparent 70%);
  background-repeat: repeat, no-repeat;
  pointer-events: none;
}

/* An issued number sits on a ribbon, the way a figure on a form sits on its
   franking strip. */
.aif-counter::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--bw-thick);
  background-image: var(--orn-ribbon-sm);
  pointer-events: none;
}

.aif-counter__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 7vw, 4.25rem);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--c-brass);
  font-variant-numeric: tabular-nums;
  position: relative;
}

.aif-counter__num--alert {
  color: var(--c-alert);
}

.aif-counter__num--ok {
  color: var(--c-ok);
}

.aif-counter__label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--c-ink-dim);
  margin-top: var(--s-3);
  line-height: 1.5;
  position: relative;
}

.aif-counter__note {
  font-family: var(--font-mono);
  font-size: var(--fs-nano);
  color: var(--c-muted);
  margin-top: var(--s-1);
  letter-spacing: 0.06em;
  position: relative;
}

.aif-counter-row {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}

/* --------------------------------------------------------------------------
   12. Meme cards
   -------------------------------------------------------------------------- */

.aif-meme {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 220px;
  padding: var(--s-5);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(53, 71, 127, 0.36), transparent 65%),
    var(--c-void);
  border: var(--bw-thick) solid var(--c-line);
  border-radius: var(--radius);
  transition: border-color var(--dur-2) var(--ease);
}

.aif-meme:hover {
  border-color: var(--c-line-strong);
}

/* Impact-style caption: heavy, white, black-outlined */
.aif-meme__cap {
  font-family: var(--font-impact);
  font-weight: 400;
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  line-height: 1.04;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: #fff;
  margin: 0;
  -webkit-text-stroke: 1px #000;
  paint-order: stroke fill;
  text-shadow:
    2px 2px 0 #000,
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000;
}

.aif-meme__cap--sm {
  font-size: clamp(1.0625rem, 2.4vw, 1.25rem);
  line-height: 1.15;
}

.aif-meme__cap--brass {
  color: var(--c-brass-bright);
}

.aif-meme__body {
  flex: 1 1 auto;
}

.aif-meme__sub {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  line-height: 1.6;
  color: var(--c-muted);
  margin: 0;
  max-width: none;
}

/* Escalation ladder inside a meme card */
.aif-ladder {
  list-style: none;
  margin: 0;
  padding: 0;
}

.aif-ladder__step {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-1) 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-ink-dim);
  margin: 0;
}

.aif-ladder__step:last-child {
  color: var(--c-brass);
}

.aif-ladder__dot {
  flex: none;
  border-radius: 50%;
  background: var(--c-muted);
  width: 10px;
  height: 10px;
}

.aif-ladder__step:nth-child(2) .aif-ladder__dot {
  width: 16px;
  height: 16px;
}

.aif-ladder__step:nth-child(3) .aif-ladder__dot {
  width: 22px;
  height: 22px;
  background: var(--c-brass-deep);
}

.aif-ladder__step:nth-child(4) .aif-ladder__dot {
  width: 30px;
  height: 30px;
  background: var(--c-brass);
  box-shadow: inset 0 0 0 5px var(--c-void);
}

/* --------------------------------------------------------------------------
   13. Certificate (HTML rendition; the SVG template is public/img/cards/)
   -------------------------------------------------------------------------- */

.aif-cert {
  background:
    radial-gradient(130% 100% at 50% 0%, rgba(224, 182, 74, 0.11), transparent 60%),
    var(--c-panel);
  border: 1px solid var(--c-brass);
  outline: 4px solid var(--c-panel);
  box-shadow: 0 0 0 5px var(--c-brass);
  padding: clamp(var(--s-5), 5vw, var(--s-7));
  margin: 6px;
  text-align: center;
  position: relative;
}

.aif-cert__seal {
  width: 76px;
  height: 76px;
  margin: 0 auto var(--s-3);
}

.aif-cert__kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tr-kicker);
  color: var(--c-brass);
}

.aif-cert__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 4.2vw, 2.25rem);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-ink);
  margin: var(--s-2) 0 var(--s-4);
}

.aif-cert__line {
  font-family: var(--font-text);
  font-size: var(--fs-small);
  color: var(--c-muted);
  margin: 0 auto var(--s-2);
  max-width: 46ch;
}

.aif-cert__name {
  font-family: var(--font-impact);
  font-size: clamp(1.75rem, 6vw, 3rem);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--c-brass);
  margin: var(--s-2) 0;
  overflow-wrap: anywhere;
}

.aif-cert__rule {
  border: 0;
  height: 11px;
  background: var(--c-brass);
  -webkit-mask:
    linear-gradient(90deg, #000 0 calc(50% - 12px), transparent calc(50% - 12px) calc(50% + 12px), #000 calc(50% + 12px))
      0 50% / 100% 1px no-repeat,
    var(--orn-star) 50% 50% / 11px 11px no-repeat;
  mask:
    linear-gradient(90deg, #000 0 calc(50% - 12px), transparent calc(50% - 12px) calc(50% + 12px), #000 calc(50% + 12px))
      0 50% / 100% 1px no-repeat,
    var(--orn-star) 50% 50% / 11px 11px no-repeat;
  margin: var(--s-4) auto;
  width: min(420px, 80%);
}

.aif-cert__fields {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  margin-top: var(--s-5);
  text-align: left;
}

.aif-cert__field {
  border-top: 1px solid var(--c-line);
  padding-top: var(--s-2);
}

.aif-cert__field-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-nano);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--c-muted);
}

.aif-cert__field-value {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-ink);
  margin-top: 2px;
  overflow-wrap: anywhere;
}

.aif-cert__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-6);
}

.aif-cert__stamp {
  flex: none;
}

/* --------------------------------------------------------------------------
   14. Bingo
   -------------------------------------------------------------------------- */

.aif-bingo {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  max-width: 640px;
  border: var(--bw) solid var(--c-line-strong);
  padding: 4px;
  background: var(--c-inset);
}

.aif-bingo__cell {
  overflow-wrap: anywhere;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4px;
  font-family: var(--font-mono);
  font-size: clamp(0.5rem, 1.9vw, 0.8125rem);
  line-height: 1.2;
  color: var(--c-ink-dim);
  background: var(--c-panel-raised);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  cursor: pointer;
  overflow: hidden;
  transition:
    background-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease);
}

.aif-bingo__cell:hover {
  border-color: var(--c-brass);
  color: var(--c-ink);
}

.aif-bingo__cell.is-on {
  background: var(--c-red-deep);
  border-color: var(--c-red);
  color: var(--c-ink);
  font-weight: 600;
  text-decoration: line-through;
}

/* The free square is the one piece of bone on the board. */
.aif-bingo__cell--free {
  background: var(--c-bone);
  color: var(--c-ink-navy);
  border-color: var(--c-bone-line);
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: clamp(0.5625rem, 2vw, 0.9375rem);
  cursor: default;
  text-decoration: none;
}

.aif-bingo__msg {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-ok);
}

/* --------------------------------------------------------------------------
   15. Timeline
   -------------------------------------------------------------------------- */

.aif-timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--s-5);
  border-left: var(--bw) solid var(--c-line);
}

.aif-timeline__item {
  position: relative;
  padding: 0 0 var(--s-6) 0;
  margin: 0;
}

.aif-timeline__item::before {
  content: "";
  position: absolute;
  left: calc(var(--s-5) * -1 - 7px);
  top: 7px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--c-brass);
  border: var(--bw) solid var(--c-bg);
  box-shadow: 0 0 0 1px var(--c-line-strong);
}

.aif-timeline__item--hoax::before {
  background: var(--c-alert);
}

.aif-timeline__item--force::before {
  background: var(--c-brass);
}

.aif-timeline__date {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  color: var(--c-muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}

.aif-timeline__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: var(--lh-tight);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--c-ink);
  margin: var(--s-1) 0;
}

.aif-timeline__caption {
  font-style: italic;
  color: var(--c-ink-dim);
  margin: 0 0 var(--s-2);
}

.aif-timeline__caption::before {
  content: "\2192\00a0";
  font-style: normal;
  color: var(--c-brass);
}

.aif-timeline__source {
  font-family: var(--font-mono);
  font-size: var(--fs-nano);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* --------------------------------------------------------------------------
   16. Forms
   -------------------------------------------------------------------------- */

.aif-form {
  display: block;
}

.aif-fieldset {
  border: var(--bw) solid var(--c-line);
  border-radius: var(--radius);
  padding: var(--s-4) var(--s-4) var(--s-5);
  margin: 0 0 var(--s-5);
}

.aif-legend {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tr-kicker);
  color: var(--c-brass);
  padding-inline: var(--s-2);
}

.aif-field {
  margin-bottom: var(--s-4);
}

.aif-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--c-ink-dim);
  margin-bottom: var(--s-2);
}

.aif-label__hint {
  color: var(--c-muted);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: none;
}

.aif-input,
.aif-select,
.aif-textarea {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--c-ink);
  background: var(--c-inset);
  border: var(--bw) solid var(--c-line-strong);
  border-radius: var(--radius);
  padding: 12px var(--s-3);
  min-height: 48px;
  transition:
    border-color var(--dur-1) var(--ease),
    background-color var(--dur-1) var(--ease);
}

.aif-textarea {
  min-height: 120px;
  resize: vertical;
}

.aif-select {
  appearance: none;
  padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--c-brass) 50%),
    linear-gradient(135deg, var(--c-brass) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) calc(50% + 2px),
    calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.aif-input::placeholder,
.aif-textarea::placeholder {
  color: var(--c-muted);
  opacity: 0.8;
}

.aif-input:hover,
.aif-select:hover,
.aif-textarea:hover {
  border-color: var(--c-line-brass);
}

.aif-input:focus,
.aif-select:focus,
.aif-textarea:focus {
  border-color: var(--c-brass);
  background: var(--c-void);
  outline: none;
}

.aif-input:focus-visible,
.aif-select:focus-visible,
.aif-textarea:focus-visible {
  outline: var(--bw) solid var(--c-brass-bright);
  outline-offset: 1px;
}

.aif-input[aria-invalid="true"],
.aif-select[aria-invalid="true"],
.aif-textarea[aria-invalid="true"] {
  border-color: var(--c-alert);
}

.aif-help {
  font-family: var(--font-mono);
  font-size: var(--fs-nano);
  color: var(--c-muted);
  margin-top: var(--s-1);
  letter-spacing: 0.04em;
}

.aif-error {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--c-alert);
  margin-top: var(--s-1);
}

.aif-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-5);
}

/* --------------------------------------------------------------------------
   16b. Forms — enlistment, nomination, conversion
   The application forms as issued paperwork: a headed sheet, visible choices,
   inline correction, a pending state, and an issued document at the end.
   Demonstrated in design/forms.html; behaviour in public/js/forms.js.
   -------------------------------------------------------------------------- */

/* --- The sheet -------------------------------------------------------------
   A form is a filed document: a head strip carrying the form number, a body on
   panel ground, and an action bar at the foot. */

.aif-form--dossier {
  max-width: var(--wrap-narrow);
  background: var(--c-panel);
  border: var(--bw) solid var(--c-line);
  border-radius: var(--radius);
  position: relative;
}

.aif-form__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2) var(--s-4);
  padding: var(--s-3) var(--s-5);
  background-color: var(--c-navy-deep);
  background-image: var(--orn-ribbon-sm);
  background-repeat: repeat-x;
  background-size: auto var(--bw-thick);
  background-position: 0 0;
  border-bottom: var(--bw) solid var(--c-line);
}

.aif-form__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-ink);
  margin: 0;
}

.aif-form__serial {
  font-family: var(--font-mono);
  font-size: var(--fs-nano);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--c-muted);
  margin: 0;
  white-space: nowrap;
}

.aif-form__body {
  padding: var(--s-5);
}

.aif-form__body > :last-child {
  margin-bottom: 0;
}

.aif-form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-5);
  padding: var(--s-4) var(--s-5);
  border-top: var(--bw) solid var(--c-line);
  background: rgba(0, 0, 0, 0.22);
}

.aif-form__note {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  line-height: 1.5;
  color: var(--c-muted);
  margin: 0;
  max-width: 44ch;
}

/* A grouping fieldset that draws nothing: the legend is the field label. */
.aif-fieldset--plain {
  border: 0;
  padding: 0;
  margin: 0 0 var(--s-5);
  min-inline-size: 0;
}

.aif-fieldset--plain > .aif-legend {
  padding-inline: 0;
  margin-bottom: var(--s-3);
  color: var(--c-ink-dim);
  letter-spacing: 0.14em;
  font-size: var(--fs-micro);
}

.aif-legend__hint {
  color: var(--c-muted);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: none;
}

/* --- Field furniture ------------------------------------------------------- */

.aif-field--wide {
  max-width: none;
}

/* Label on the left, live counter on the right, baselines aligned. */
.aif-field__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-2);
}

.aif-field__row > .aif-label {
  margin-bottom: 0;
}

/* The revealed half-field: the free-text box under the Other chip. */
.aif-field__sub {
  margin-top: var(--s-3);
  padding-left: var(--s-3);
  border-left: var(--bw) solid var(--c-line-brass);
}

.aif-field__aside {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-2);
}

.aif-field__aside > .aif-help {
  margin-top: 0;
  flex: 1 1 22ch;
}

.aif-charcount {
  font-family: var(--font-mono);
  font-size: var(--fs-nano);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-muted);
  white-space: nowrap;
}

.aif-charcount.is-low {
  color: var(--c-brass);
}

.aif-charcount.is-spent {
  color: var(--c-alert);
}

/* Inline field error. The marker is drawn, never typed, so a screen reader
   reads the message and not an arrow. */
.aif-error {
  display: block;
  padding-left: 14px;
  position: relative;
  line-height: 1.5;
}

.aif-error::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 6px;
  height: 6px;
  background: var(--c-alert);
  transform: rotate(45deg);
}

/* --- Error summary ---------------------------------------------------------
   Sits above the form, appears on submit only, links to the first bad field. */

/* Anything filed with a form keeps the form sheet's column: the summary above it, the
   service notices beside it, the receipt under it. */
.aif-form-col {
  max-width: var(--wrap-narrow);
}

.aif-formsummary {
  max-width: var(--wrap-narrow);
  border: var(--bw) solid var(--c-alert-deep);
  border-left-width: var(--bw-thick);
  border-left-color: var(--c-alert);
  border-radius: var(--radius);
  background: linear-gradient(0deg, rgba(150, 53, 27, 0.18), rgba(150, 53, 27, 0.18)), var(--c-panel);
  padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5);
  margin-bottom: var(--s-4);
}

.aif-formsummary:focus-visible {
  outline: var(--bw) solid var(--c-brass-bright);
  outline-offset: 2px;
}

.aif-formsummary__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-alert);
  margin: 0 0 var(--s-2);
}

.aif-formsummary__list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  line-height: 1.6;
}

.aif-formsummary__item + .aif-formsummary__item {
  margin-top: var(--s-1);
}

.aif-formsummary__link {
  color: var(--c-ink);
  text-decoration: underline;
  text-decoration-color: var(--c-alert);
  text-underline-offset: 3px;
  display: inline-block;
  padding: 3px 0;
}

.aif-formsummary__link:hover {
  color: var(--c-alert);
}

.aif-formsummary__link:focus-visible {
  outline: var(--bw) solid var(--c-brass-bright);
  outline-offset: 2px;
  text-decoration: none;
}

/* --- Chips — a single-choice row of visible options ------------------------
   Native radios, visually hidden inside each label, so the group keeps its
   arrow-key behaviour and its required/invalid semantics. */

.aif-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.aif-chip {
  position: relative;
  display: inline-flex;
}

.aif-chip__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.aif-chip__text {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px var(--s-4);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-ink-dim);
  background: var(--c-panel-raised);
  border: var(--bw) solid var(--c-line-strong);
  border-radius: var(--radius);
  transition:
    color var(--dur-1) var(--ease),
    background-color var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease);
}

.aif-chip__input:hover + .aif-chip__text {
  border-color: var(--c-brass);
  color: var(--c-brass);
}

/* The answer you gave is stamped in flag red; the button that files it stays
   gold. Selection and action never wear the same colour. */
.aif-chip__input:checked + .aif-chip__text {
  background: var(--c-red-deep);
  border-color: var(--c-red);
  color: var(--c-ink);
}

.aif-chip__input:focus-visible + .aif-chip__text {
  outline: var(--bw) solid var(--c-brass-bright);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--c-void);
}

.aif-chips[aria-invalid="true"] .aif-chip__text,
.aif-fieldset[data-invalid="true"] .aif-chip__text {
  border-color: var(--c-alert);
}

/* --- Combobox — type to filter, arrow to move, Enter to choose ------------- */

.aif-combo {
  position: relative;
}

.aif-combo__input {
  padding-right: 44px;
}

/* The disclosure caret. Not a tab stop: the input is the control. */
.aif-combo__toggle {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 100%;
  min-height: 48px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--c-brass);
}

.aif-combo__toggle::before {
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  margin: 0 auto;
  border-right: var(--bw) solid currentColor;
  border-bottom: var(--bw) solid currentColor;
  transform: translateY(-3px) rotate(45deg);
}

.aif-combo__toggle:hover {
  color: var(--c-brass-bright);
}

.aif-combo[data-open="true"] .aif-combo__toggle::before {
  transform: translateY(2px) rotate(-135deg);
}

.aif-combo__list {
  position: absolute;
  z-index: 30;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  max-height: min(320px, 52vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--c-inset);
  border: var(--bw) solid var(--c-brass);
  border-radius: var(--radius);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
}

.aif-combo__grouplabel {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 8px var(--s-3) 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-nano);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--c-brass);
  background: var(--c-void);
  border-bottom: 1px solid var(--c-line);
}

.aif-combo__group + .aif-combo__group .aif-combo__grouplabel {
  border-top: 1px solid var(--c-line);
}

.aif-combo__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 44px;
  padding: 10px var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  line-height: 1.3;
  color: var(--c-ink-dim);
  cursor: pointer;
  border-left: var(--bw-thick) solid transparent;
}

.aif-combo__option:hover {
  color: var(--c-ink);
  background: var(--c-panel-raised);
}

.aif-combo__option.is-active {
  color: var(--c-void);
  background: var(--c-brass);
  border-left-color: var(--c-brass-bright);
}

.aif-combo__option[aria-selected="true"]::after {
  content: "✓";
  font-weight: 600;
  color: var(--c-brass);
}

.aif-combo__option.is-active[aria-selected="true"]::after {
  color: var(--c-void);
}

.aif-combo__code {
  font-size: var(--fs-nano);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--c-muted);
}

.aif-combo__option.is-active .aif-combo__code {
  color: var(--c-olive-deep);
}

/* The matched run of the typed text. */
.aif-combo__hit {
  color: var(--c-brass);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.aif-combo__option.is-active .aif-combo__hit {
  color: var(--c-void);
}

.aif-combo__empty {
  padding: var(--s-4) var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  line-height: 1.6;
  color: var(--c-muted);
}

/* --- Radio cards — four answers, all visible ------------------------------ */

.aif-radiocards {
  display: grid;
  gap: var(--s-2);
  grid-template-columns: 1fr;
}

@media (min-width: 560px) {
  .aif-radiocards--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.aif-radiocard {
  position: relative;
  display: flex;
}

.aif-radiocard__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.aif-radiocard__body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--s-1) var(--s-3);
  width: 100%;
  min-height: 72px;
  padding: var(--s-3) var(--s-4);
  background: var(--c-panel-raised);
  border: var(--bw) solid var(--c-line-strong);
  border-radius: var(--radius);
  transition:
    border-color var(--dur-1) var(--ease),
    background-color var(--dur-1) var(--ease);
}

/* The marker: a hard square that fills brass when chosen. */
.aif-radiocard__mark {
  grid-row: 1 / span 2;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  border: var(--bw) solid var(--c-line-strong);
  background: var(--c-inset);
  transition:
    border-color var(--dur-1) var(--ease),
    background-color var(--dur-1) var(--ease);
}

.aif-radiocard__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-ink);
}

.aif-radiocard__gloss {
  font-family: var(--font-text);
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--c-muted);
}

.aif-radiocard__input:hover + .aif-radiocard__body {
  border-color: var(--c-brass);
}

.aif-radiocard__input:checked + .aif-radiocard__body {
  border-color: var(--c-red);
  background: var(--c-navy-deep);
}

.aif-radiocard__input:checked + .aif-radiocard__body .aif-radiocard__mark {
  background: var(--c-red);
  border-color: var(--c-ink);
}

.aif-radiocard__input:checked + .aif-radiocard__body .aif-radiocard__gloss {
  color: var(--c-ink-dim);
}

.aif-radiocard__input:focus-visible + .aif-radiocard__body {
  outline: var(--bw) solid var(--c-brass-bright);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--c-void);
}

.aif-fieldset[data-invalid="true"] .aif-radiocard__body {
  border-color: var(--c-alert);
}

/* --- Affixed input — the instrument --------------------------------------- */

.aif-affix {
  max-width: 20rem;
  display: flex;
  align-items: stretch;
  background: var(--c-inset);
  border: var(--bw) solid var(--c-line-strong);
  border-radius: var(--radius);
  transition: border-color var(--dur-1) var(--ease);
}

.aif-affix:hover {
  border-color: var(--c-line-brass);
}

.aif-affix:focus-within {
  border-color: var(--c-brass);
  outline: var(--bw) solid var(--c-brass-bright);
  outline-offset: 1px;
}

.aif-affix[data-invalid="true"] {
  border-color: var(--c-alert);
}

.aif-affix__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 1.375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--c-ink);
  padding: 12px var(--s-4);
  min-height: 56px;
}

.aif-affix__input::placeholder {
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--c-muted);
  opacity: 0.8;
}

.aif-affix__unit {
  display: flex;
  align-items: center;
  flex: none;
  padding: 0 var(--s-4);
  font-family: var(--font-mono);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--c-brass);
  background: var(--c-panel-raised);
  border-left: var(--bw) solid var(--c-line-strong);
}

/* The calibration ticks under the instrument. Decorative. */
.aif-affix-scale {
  max-width: 20rem;
  display: flex;
  justify-content: space-between;
  margin-top: var(--s-1);
  padding: 0 2px;
  font-family: var(--font-mono);
  font-size: var(--fs-nano);
  letter-spacing: 0.12em;
  color: var(--c-muted);
}

.aif-affix-scale span::before {
  content: "";
  display: block;
  width: 1px;
  height: 6px;
  margin: 0 auto 3px;
  background: var(--c-line-strong);
}

/* --- Submit and pending --------------------------------------------------- */

/* A quiet control that still clears the 44px floor. */
.aif-btn--inline {
  font-size: var(--fs-small);
  padding: 10px 16px;
  min-height: 44px;
  letter-spacing: 0.1em;
}

.aif-btn__label {
  display: inline-block;
}

.aif-btn[aria-busy="true"] {
  overflow: hidden;
}

/* The sweep runs only while the request does. */
.aif-btn[aria-busy="true"]::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 42%;
  background: var(--c-void);
  opacity: 0.55;
  animation: aif-sweep 900ms linear infinite;
}

@keyframes aif-sweep {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(240%);
  }
}

.aif-formstatus {
  flex-basis: 100%;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  line-height: 1.6;
  color: var(--c-brass);
  margin: 0;
}

.aif-formstatus:focus-visible {
  outline: var(--bw) solid var(--c-brass-bright);
  outline-offset: 3px;
}

/* --- The issued document -------------------------------------------------- */

.aif-issued {
  margin-top: var(--s-6);
  padding: clamp(var(--s-4), 4vw, var(--s-6));
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(224, 182, 74, 0.1), transparent 62%),
    var(--c-panel);
  border: 1px solid var(--c-brass);
  outline: 1px solid var(--c-brass);
  outline-offset: 5px;
  position: relative;
}

.aif-issued:focus-visible {
  outline: var(--bw) solid var(--c-brass-bright);
  outline-offset: 5px;
}

.aif-issued__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}

.aif-issued__heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display-3);
  line-height: var(--lh-title);
  text-transform: uppercase;
  letter-spacing: var(--tr-display);
  color: var(--c-ink);
  margin: 0;
}

.aif-issued__kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tr-kicker);
  color: var(--c-brass);
  margin: 0 0 var(--s-1);
}

/* The plate is the centrepiece: full bleed inside the frame, nothing beside it. */
.aif-issued__sheet {
  margin: 0;
  background: var(--c-void);
  border: 1px solid var(--c-line-brass);
  line-height: 0;
}

.aif-issued__plate {
  display: block;
  width: 100%;
  height: auto;
}

/* Held while the plate is drawn, so the reveal does not jump. */
.aif-issued__sheet[data-drawing="true"] {
  aspect-ratio: 1200 / 630;
  display: flex;
  align-items: center;
  justify-content: center;
}

.aif-issued__sheet:not([data-drawing="true"]) .aif-issued__drawing {
  display: none;
}

.aif-issued__drawing {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-kicker);
  text-transform: uppercase;
  color: var(--c-muted);
  line-height: 1.6;
}

.aif-issued__actions {
  margin-top: var(--s-5);
  padding: var(--s-4);
  background: var(--c-inset);
  border: var(--bw) solid var(--c-line-brass);
  border-radius: var(--radius);
}

.aif-issued__foot {
  margin: var(--s-4) 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-nano);
  line-height: 1.6;
  color: var(--c-muted);
}

/* --- The service record --------------------------------------------------- */

.aif-record {
  display: grid;
  gap: 0;
  margin: var(--s-5) 0 0;
  border-top: 1px solid var(--c-line);
}

.aif-record__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: baseline;
  gap: var(--s-1) var(--s-4);
  padding: 10px 0;
  border-bottom: 1px solid var(--c-line);
}

@media (min-width: 520px) {
  .aif-record__row {
    grid-template-columns: 20ch minmax(0, 1fr);
  }
}

.aif-record__label {
  font-family: var(--font-mono);
  font-size: var(--fs-nano);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--c-muted);
  margin: 0;
}

.aif-record__value {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-ink);
  margin: 0;
  overflow-wrap: anywhere;
}

.aif-record__value--brass {
  color: var(--c-brass);
  letter-spacing: 0.08em;
}

.aif-record__value--quote {
  font-family: var(--font-text);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-body);
  color: var(--c-ink-dim);
}

/* --- The receipt — a small stamped document ------------------------------- */

.aif-receipt {
  position: relative;
  max-width: 34rem;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 26px,
      rgba(157, 171, 194, 0.055) 26px 27px
    ),
    var(--c-inset);
  border: 1px solid var(--c-line-brass);
  border-radius: var(--radius);
  padding: var(--s-4) var(--s-5) var(--s-5);
}

.aif-receipt:focus-visible {
  outline: var(--bw) solid var(--c-brass-bright);
  outline-offset: 3px;
}

.aif-receipt__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2) var(--s-4);
  padding-bottom: var(--s-2);
  border-bottom: 1px dashed var(--c-line-strong);
}

.aif-receipt__title {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tr-kicker);
  color: var(--c-brass);
  margin: 0;
}

.aif-receipt__serial {
  font-family: var(--font-mono);
  font-size: var(--fs-nano);
  letter-spacing: 0.12em;
  color: var(--c-muted);
  margin: 0;
}

.aif-receipt__rows {
  margin: var(--s-4) 0 0;
  display: grid;
  gap: var(--s-2);
}

.aif-receipt__row {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
}

.aif-receipt__key {
  color: var(--c-muted);
  text-transform: uppercase;
  font-size: var(--fs-nano);
  letter-spacing: 0.16em;
  flex: none;
}

.aif-receipt__dots {
  flex: 1 1 auto;
  border-bottom: 1px dotted var(--c-line-strong);
  transform: translateY(-3px);
}

.aif-receipt__value {
  flex: none;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--c-ink);
}

.aif-receipt__value--brass {
  color: var(--c-brass);
}

.aif-receipt__line {
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-ink-dim);
  margin: var(--s-4) 0 0;
}

.aif-receipt__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  border-top: 1px dashed var(--c-line-strong);
}

.aif-receipt__imprint {
  flex: 1 1 20ch;
  font-family: var(--font-mono);
  font-size: var(--fs-nano);
  line-height: 1.6;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin: 0;
}

/* --- Narrow screens -------------------------------------------------------- */

@media (max-width: 519px) {
  .aif-form__head,
  .aif-form__body,
  .aif-form__foot {
    padding-inline: var(--s-4);
  }

  .aif-chip__text {
    padding-inline: var(--s-3);
    font-size: var(--fs-small);
  }

  /* The helper sits under the control it explains, not beside it. */
  .aif-field__aside > .aif-help {
    flex-basis: 100%;
  }

  .aif-issued__actions .aif-btn {
    width: 100%;
  }
}

/* --- Motion preference ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .aif-btn[aria-busy="true"]::after {
    animation: none;
    width: 100%;
    opacity: 0.35;
  }
}

/* --------------------------------------------------------------------------
   17. Plaques (Presidential Orders wall)
   -------------------------------------------------------------------------- */

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

.aif-plaque {
  position: relative;
  padding: var(--s-6) var(--s-5);
  background: linear-gradient(160deg, #1f2b55 0%, #101733 60%, #182042 100%);
  border: 3px solid transparent;
  border-radius: var(--radius);
  background-clip: padding-box;
  box-shadow:
    0 0 0 1px var(--c-brass-deep),
    0 0 0 4px #3e3211,
    0 0 0 5px var(--c-brass),
    0 6px 18px var(--c-shadow);
  margin: 5px;
}

.aif-plaque::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(224, 182, 74, 0.36);
  pointer-events: none;
}

.aif-plaque::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  height: var(--bw-thick);
  background-image: var(--orn-ribbon-sm);
  pointer-events: none;
}

.aif-plaque__quote {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.125rem, 2.6vw, 1.5rem);
  line-height: 1.3;
  color: var(--c-brass-bright);
  margin: 0 0 var(--s-4);
  text-wrap: pretty;
  max-width: none;
}

.aif-plaque__attr {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--c-ink-dim);
}

.aif-plaque__date {
  font-family: var(--font-mono);
  font-size: var(--fs-nano);
  letter-spacing: 0.14em;
  color: var(--c-muted);
  margin-top: var(--s-1);
}

/* --------------------------------------------------------------------------
   18. Posters
   -------------------------------------------------------------------------- */

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

.aif-poster {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.aif-poster__frame {
  display: block;
  padding: 10px;
  background: linear-gradient(150deg, #232949, #12172e);
  border: 1px solid var(--c-line-brass);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.5),
    0 8px 20px var(--c-shadow);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}

a.aif-poster__frame:hover,
.aif-poster__frame:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.5),
    0 12px 26px var(--c-shadow);
}

.aif-poster__sheet {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  background: var(--c-paper);
  object-fit: cover;
}

.aif-poster__caption {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-muted);
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
}

.aif-poster__actions {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   19. Units
   -------------------------------------------------------------------------- */

.aif-unit-grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

.aif-unit {
  display: grid;
  gap: var(--s-3);
  align-items: start;
  padding: var(--s-4);
  background: var(--c-panel);
  border: var(--bw) solid var(--c-line);
  border-radius: var(--radius);
  transition: border-color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);
}

.aif-unit:hover {
  border-color: var(--c-line-brass);
  background: var(--c-panel-raised);
}

.aif-unit__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--c-ink);
  margin: 0;
}

.aif-unit__motto {
  font-family: var(--font-mono);
  font-size: var(--fs-nano);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-brass);
  margin-top: 2px;
}

.aif-unit__body {
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--c-ink-dim);
  margin: 0;
  max-width: none;
}

/* A card's three findings, filed as a list: the section mark, then the line. */
.aif-unit__list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--c-ink-dim);
}

.aif-unit__list li {
  position: relative;
  margin: 0 0 var(--s-2);
  padding-left: var(--s-4);
}

.aif-unit__list li::before {
  content: "\00a7";
  position: absolute;
  left: 0;
  color: var(--c-brass);
}

/* --------------------------------------------------------------------------
   20. Enlistment roll and ticker
   -------------------------------------------------------------------------- */

.aif-roll {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--c-line);
}

.aif-roll__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-3);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--c-line);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  margin: 0;
}

.aif-roll__serial {
  color: var(--c-brass);
  font-weight: 600;
  white-space: nowrap;
}

.aif-roll__rank {
  color: var(--c-ink);
}

.aif-roll__unit {
  color: var(--c-muted);
}

.aif-roll__time {
  margin-left: auto;
  color: var(--c-muted);
  white-space: nowrap;
}

/* The enlistment ticker runs between two lengths of ribbon, like bunting. */
.aif-ticker {
  overflow: hidden;
  border-block: var(--bw) solid transparent;
  background-color: var(--c-inset);
  background-image: var(--orn-ribbon-sm), var(--orn-ribbon-sm);
  background-repeat: repeat-x, repeat-x;
  background-size: auto var(--bw), auto var(--bw);
  background-position: 0 0, 0 100%;
  background-origin: border-box;
  padding: var(--s-2) 0;
}

.aif-ticker__track {
  display: flex;
  gap: var(--s-6);
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-dim);
  animation: aif-ticker-scroll 60s linear infinite;
  will-change: transform;
}

@keyframes aif-ticker-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.aif-ticker:hover .aif-ticker__track {
  animation-play-state: paused;
}

/* --------------------------------------------------------------------------
   21. Share-card previews
   Container-sized: type is set in cqw so the preview matches the export.
   -------------------------------------------------------------------------- */

.aif-sharecard {
  container-type: inline-size;
  position: relative;
  width: 100%;
  aspect-ratio: 1200 / 630;
  background:
    radial-gradient(90% 120% at 12% 0%, rgba(53, 71, 127, 0.55), transparent 60%),
    var(--c-void);
  border: 1px solid var(--c-line-brass);
  overflow: hidden;
  color: var(--c-ink);
}

.aif-sharecard--square {
  aspect-ratio: 1 / 1;
}

.aif-sharecard__inner {
  position: absolute;
  inset: 3.5cqw;
  border: 0.35cqw solid var(--c-brass);
  padding: 3cqw 3.5cqw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.aif-sharecard__kicker {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1.5cqw;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-brass);
}

.aif-sharecard__headline {
  font-family: var(--font-impact);
  font-size: 7cqw;
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--c-ink);
  margin: 1cqw 0;
}

.aif-sharecard__number {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14cqw;
  line-height: 0.88;
  color: var(--c-brass);
  font-variant-numeric: tabular-nums;
}

.aif-sharecard__sub {
  font-family: var(--font-mono);
  font-size: 1.8cqw;
  line-height: 1.5;
  color: var(--c-ink-dim);
  letter-spacing: 0.06em;
}

.aif-sharecard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2cqw;
  font-family: var(--font-mono);
  font-size: 1.5cqw;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.aif-sharecard__mark {
  width: 6cqw;
  height: 6cqw;
  flex: none;
}

/* --------------------------------------------------------------------------
   22. Masthead, hero, gate, footer
   -------------------------------------------------------------------------- */

/* The masthead is a department letterhead: a thin dark bar closed by a gold
   hairline, with the star canton left behind the brand at a whisper. It carries
   four blocks and spreads them across the full plate width — the seal and the
   word, the department line, the navigation, and the standing motto. The flag
   is not loud here; it is loud in the footer, the panels and the registers.

   The two mono blocks either side of the navigation are drawn in CSS rather
   than written into the markup, because the masthead is byte-identical on all
   twelve route pages and the router never swaps it. */
.aif-masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(5, 8, 26, 0.96);
  backdrop-filter: blur(6px);
  border-top: 0;
  border-bottom: 1px solid var(--c-line-brass);
}

/* The canton: a staggered star field that dies away to the right so the
   navigation never sits on it. */
.aif-masthead::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: min(34%, 380px);
  background-image: var(--orn-stars), linear-gradient(90deg, var(--c-navy) 0 40%, transparent 100%);
  background-blend-mode: normal;
  -webkit-mask-image: linear-gradient(90deg, #000 0 34%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0 34%, transparent 100%);
  opacity: 0.34;
  pointer-events: none;
}

.aif-masthead__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  max-width: var(--wrap-wide);
  /* 63 + the hairline is 64px, the height the bar has always been, so the
     drawer's max-height in css/routes.css still clears it exactly. */
  min-height: 63px;
  padding-block: var(--s-2);
}

/* The department block is a flex item in its own right; the department line sits
   beside the brand and the navigation is pushed to the far edge. */
.aif-masthead__inner::before {
  white-space: pre;
  font-family: var(--font-mono);
  font-size: var(--fs-nano);
  font-weight: 600;
  line-height: 1.55;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--c-muted);
}

/* The department line, ruled off from the wordmark. */
.aif-masthead__inner::before {
  content: "Department of Abundance\A United States of America";
  order: 1;
  /* Takes the slack, so the navigation is held against the right edge. */
  margin-right: auto;
  padding-left: var(--s-5);
  border-left: 1px solid var(--c-line-brass);
}

/* The bar sheds the motto first, then the department line, well before the
   navigation itself collapses behind the toggle at 720px. */
@media (max-width: 1339px) {
  .aif-masthead__inner::after {
    display: none;
  }
}

@media (max-width: 1179px) {
  .aif-masthead__inner::before {
    display: none;
  }
}

.aif-brand {
  order: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
  color: var(--c-ink);
}

.aif-brand__mark {
  /* The emblem is wider than it is tall; height drives it and width follows. */
  height: 34px;
  width: auto;
  flex: none;
}

.aif-brand__word {
  font-family: var(--font-display);
  white-space: nowrap;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-brass-bright);
}

/* The full letterhead — larger seal and wordmark, wider tracking on the links,
   the department line — only from the width that holds it all on one row. Below
   that the bar stays exactly as tight as it has to be. */
@media (min-width: 1180px) {
  .aif-brand__mark {
    height: 38px;
  }

  .aif-brand__word {
    font-size: 1.375rem;
    letter-spacing: 0.13em;
  }
}

.aif-nav {
  order: 2;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) clamp(14px, 2.2vw, 32px);
  align-items: center;
}

.aif-nav__link {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--c-ink-dim);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: var(--bw) solid transparent;
}

.aif-nav__link:hover {
  color: var(--c-brass);
  border-bottom-color: var(--c-line-brass);
}

@media (min-width: 1180px) {
  .aif-nav__link {
    letter-spacing: 0.16em;
  }
}

/* Where you are is red; where you could go is gold. The two never collide,
   because hover is a gold rule and current is a red one. */
.aif-nav__link.is-current {
  color: var(--c-ink);
  border-bottom-color: var(--c-red);
}

/* --- Primary navigation ----------------------------------------------------------
   A full link row from 720px up. Below that the row collapses behind a toggle in the
   masthead. The collapse applies only once nav.js marks the masthead ready, so the
   links stay reachable if the script never runs. */

.aif-navtoggle {
  order: 3;
  display: none;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: var(--bw) solid var(--c-line-brass);
  border-radius: 2px;
  color: var(--c-brass);
  cursor: pointer;
}

.aif-navtoggle:hover {
  border-color: var(--c-brass);
}

.aif-navtoggle__bar {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  transition: transform 140ms ease, opacity 140ms ease;
}

.aif-navtoggle[aria-expanded="true"] .aif-navtoggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.aif-navtoggle[aria-expanded="true"] .aif-navtoggle__bar:nth-child(2) {
  opacity: 0;
}

.aif-navtoggle[aria-expanded="true"] .aif-navtoggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
  .aif-navtoggle__bar {
    transition: none;
  }
}

@media (max-width: 719px) {
  .aif-masthead[data-nav="ready"] .aif-navtoggle {
    display: inline-flex;
  }

  .aif-masthead[data-nav="ready"] .aif-nav {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    flex-direction: column;
    /* The base rule wraps; a column flex box that wraps becomes two overlapping
       columns once the drawer is capped in height. */
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    padding: 0 var(--s-4) var(--s-3);
    background: var(--c-bg);
    border-bottom: var(--bw) solid var(--c-line);
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.5);
  }

  .aif-masthead[data-nav="ready"] .aif-nav:not(.is-open) {
    display: none;
  }

  .aif-masthead[data-nav="ready"] .aif-nav__link {
    padding: 13px 0;
    border-bottom: var(--bw) solid var(--c-line);
  }

  .aif-masthead[data-nav="ready"] .aif-nav__link:last-child {
    border-bottom: 0;
  }

  .aif-masthead[data-nav="ready"] .aif-nav__link.is-current {
    border-bottom-color: var(--c-red);
  }
}

.aif-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  align-items: end;
  padding-block: var(--s-6) var(--s-7);
}

.aif-hero__copy > * + * {
  margin-top: var(--s-4);
}

.aif-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display-1);
  line-height: var(--lh-display);
  text-transform: uppercase;
  letter-spacing: 0.005em;
  color: var(--c-brass);
  margin: 0;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
}

.aif-hero__art {
  justify-self: center;
  width: min(320px, 72vw);
  height: auto;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.5));
}

@media (min-width: 860px) {
  .aif-hero {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .aif-hero__art {
    width: min(360px, 34vw);
    justify-self: end;
  }
}

/* Full-bleed hero built on a hero plate (public/img/hero-*.webp).
   The scrim carries the headline contrast; the image never carries text. */
.aif-hero-banner {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: clamp(520px, 92vw, 680px);
  overflow: hidden;
  border-bottom: 0;
}

/* The plate ends on a ribbon rather than a gold hairline: the same band the
   masthead and the footer carry, closing the picture. */
.aif-hero-banner::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  background-image: var(--orn-ribbon);
  pointer-events: none;
}

.aif-hero-banner__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Narrow screens crop hard: hold the officer and the pointing hand in frame. */
  object-position: 28% 45%;
}

.aif-hero-banner__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* The plates are bright and they are the point; they are not dimmed. The only
     wash is the last 90px, which exists so the picture meets the page instead of
     stopping against it. The type carries its own contrast — see __inner. */
  background: linear-gradient(0deg, var(--c-bg) 0, transparent 90px);
}

.aif-hero-banner__inner {
  position: relative;
  padding-block: var(--s-8) var(--s-7);
}

.aif-hero-banner__inner > * + * {
  margin-top: var(--s-4);
}

/* With the plate left bright, every line over it carries its own ground: a tight
   halo that reads as ink on a photograph rather than as a panel. */
.aif-hero-banner__inner,
.aif-hero-banner__inner * {
  text-shadow:
    0 1px 2px rgba(4, 7, 20, 0.95),
    0 2px 12px rgba(4, 7, 20, 0.85),
    0 0 28px rgba(4, 7, 20, 0.6);
}

.aif-hero-banner .aif-hero__title,
.aif-hero-banner .aif-display-2 {
  text-shadow:
    0 2px 3px rgba(4, 7, 20, 0.95),
    0 3px 16px rgba(4, 7, 20, 0.9),
    0 0 44px rgba(4, 7, 20, 0.7);
}

/* A button is a shape, not a letterform on a picture. */
.aif-hero-banner__inner .aif-btn {
  text-shadow: none;
}

@media (min-width: 860px) {
  .aif-hero-banner__img {
    object-position: 50% 44%;
  }

  .aif-hero-banner__inner {
    max-width: 42rem;
  }

}

/* --- A banner with no plate -------------------------------------------------
   --blank is the same band drawn in the system's own ornament instead of a
   photograph: the navy ground, the star field and the flag's stripes down the
   leading edge, closing on the same campaign ribbon. It is for a route whose
   page already carries the strongest image on it, or whose subject is the
   plates themselves, where a picture above the fold would only compete.

   The markup is a photographic banner's markup minus the <img>: __scrim stays
   and carries the star field and the foot's fade into the page. To drop a plate
   in later, put the <img class="aif-hero-banner__img"> back, swap --blank for
   the plate's own object-position class, and change nothing else — the heading
   is already treated exactly as it is over a photograph. */

.aif-hero-banner--blank {
  background-color: var(--c-navy-deep);
}

/* The stripes are a bar, never a fill: they run down the leading edge and stop
   above the ribbon rather than crossing it. */
.aif-hero-banner--blank::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 5px;
  width: 10px;
  background-image: var(--orn-stripes);
  pointer-events: none;
}

.aif-hero-banner--blank .aif-hero-banner__scrim {
  background:
    var(--orn-stars),
    linear-gradient(
      180deg,
      rgba(4, 7, 20, 0.3) 0%,
      rgba(4, 7, 20, 0) 34%,
      rgba(4, 7, 20, 0.34) 78%,
      var(--c-bg) 100%
    );
}

/* --- The recruitment plate -------------------------------------------------
   The front page's own banner. Where .rt-band is a section header drawn over a
   picture, --plate is the poster itself: the painting runs edge to edge and
   almost full height, the copy stands on the dark quarter the painting already
   has rather than on a band laid across it, and two small typographic stacks
   sit in the far corners the way an issued poster carries its imprint.

   Only the front page uses it; every other banner keeps the section profile. */

.aif-hero-banner--plate {
  min-height: clamp(620px, 60cqw, 940px);
}

/* The plate does not fade out at the foot — the statistics band under it is the
   close. A gold hairline is the join. */
.aif-hero-banner--plate::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 5px;
  background-image: var(--orn-ribbon);
  pointer-events: none;
  z-index: 1;
}

/* Narrow screens crop the plate hard and the copy fills it, so there the plate
   is a ground and the scrim is close to even — the same regime the section
   banners use. The corner treatment below is for the screens wide enough to
   show the whole painting. */
.aif-hero-banner--plate .aif-hero-banner__scrim {
  background: linear-gradient(
    180deg,
    rgba(4, 7, 20, 0.42) 0%,
    rgba(4, 7, 20, 0.5) 12%,
    rgba(4, 7, 20, 0.72) 26%,
    rgba(4, 7, 20, 0.85) 36%,
    rgba(4, 7, 20, 0.9) 62%,
    rgba(4, 7, 20, 0.94) 100%
  );
}

@media (min-width: 860px) {
  /* No band. The scrim is one flat wash masked down to the corner the copy
     stands in: the mask is the *product* of a left ramp and a low ramp, so the
     wash bites only where both are true. Stacking the two ramps as gradients
     would take their union instead and would flatten the flag at the top left
     and the plant at the bottom right, which are the two places the plate is
     worth looking at. */
  .aif-hero-banner--plate .aif-hero-banner__scrim {
    background: rgba(4, 7, 20, 0.97);
    -webkit-mask-image:
      linear-gradient(
        90deg,
        #000 0%,
        #000 36%,
        rgba(0, 0, 0, 0.78) 47%,
        rgba(0, 0, 0, 0.46) 56%,
        rgba(0, 0, 0, 0.2) 64%,
        rgba(0, 0, 0, 0.05) 75%,
        transparent 86%
      ),
      linear-gradient(
        180deg,
        transparent 0%,
        transparent 21%,
        rgba(0, 0, 0, 0.22) 30%,
        rgba(0, 0, 0, 0.68) 39%,
        rgba(0, 0, 0, 0.93) 46%,
        #000 53%,
        #000 100%
      );
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(
        90deg,
        #000 0%,
        #000 36%,
        rgba(0, 0, 0, 0.78) 47%,
        rgba(0, 0, 0, 0.46) 56%,
        rgba(0, 0, 0, 0.2) 64%,
        rgba(0, 0, 0, 0.05) 75%,
        transparent 86%
      ),
      linear-gradient(
        180deg,
        transparent 0%,
        transparent 21%,
        rgba(0, 0, 0, 0.22) 30%,
        rgba(0, 0, 0, 0.68) 39%,
        rgba(0, 0, 0, 0.93) 46%,
        #000 53%,
        #000 100%
      );
    mask-composite: intersect;
  }
}

.aif-hero-banner--plate .aif-hero-banner__inner {
  max-width: var(--wrap-wide);
  padding-block: var(--s-8) var(--s-7);
}

/* On a phone the copy fills the plate, so the plate is given a head of clear painting
   above it: the officer's face sits above the wordmark instead of behind it. */
@media (max-width: 859px) {
  .aif-hero-banner--plate .aif-hero-banner__inner {
    padding-block-start: clamp(220px, 70vw, 320px);
  }
}

.aif-hero-banner--plate .aif-hero-banner__inner > * + * {
  margin-top: 0;
}

/* The overline: the filing line above the poster, tabbed with a short rule. */
.aif-hero__overline {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  max-width: none;
  margin: 0 0 var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tr-kicker);
  color: var(--c-ink-dim);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}

.aif-hero__overline::before {
  content: "";
  flex: none;
  width: 34px;
  height: 2px;
  background: var(--c-brass);
}

/* The headline is the poster's whole point: bone, not gold, and as large as the
   plate will carry. Gold is demoted to the line under it. The speckle mask is
   the ink not quite taking on rough stock; it is a whisper, and it is the only
   texture on the type anywhere on the site. */
.aif-hero__title--plate {
  font-family: var(--font-impact);
  font-weight: 400;
  font-size: clamp(4.25rem, 20vw, 12.5rem);
  line-height: 0.84;
  letter-spacing: 0.005em;
  color: var(--c-ink);
  text-shadow: 0 4px 0 rgba(0, 0, 0, 0.45);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3.6 0 0 0 3.4'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23g)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3.6 0 0 0 3.4'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23g)'/%3E%3C/svg%3E");
  -webkit-mask-size: 260px 260px;
  mask-size: 260px 260px;
}

/* The gold line, immediately under the headline: the institution speaking. */
.aif-hero__motto {
  margin: var(--s-3) 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.375rem, 3.4vw, 2.25rem);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  color: var(--c-brass);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
}

/* The two lines of standing text under the gold line. Mono, because on this
   site anything the Office states about itself is typed, not set. */
.aif-hero__brief {
  margin: var(--s-4) 0 0;
  max-width: 46rem;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.75;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-ink-dim);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}

.aif-hero-banner--plate .aif-btn-row {
  margin-top: var(--s-6);
  gap: var(--s-4);
}

/* Poster buttons: wider than the site's default, because on a plate they are
   the only two things a recruit is asked to do. */
.aif-hero-banner--plate .aif-btn {
  padding-inline: var(--s-6);
}

.aif-hero-banner--plate .aif-btn--arrow {
  gap: var(--s-5);
}

/* Narrow screens: the rule goes above the overline rather than beside it, so the
   filing line wraps as a block instead of stepping around a tab, and the two
   actions become one stacked pair of equal width. */
@media (max-width: 719px) {
  .aif-hero__overline {
    display: block;
    font-size: var(--fs-nano);
    letter-spacing: 0.16em;
  }

  .aif-hero__overline::before {
    display: block;
    margin-bottom: var(--s-2);
  }
}

@media (max-width: 559px) {
  .aif-hero-banner--plate .aif-btn-row {
    display: grid;
    gap: var(--s-3);
  }
}

/* --- Plate marks -----------------------------------------------------------
   The corner imprints. Tiny, mono, wide-tracked, and set on their own haze so
   the type has a ground that can be measured instead of whatever the painting
   happens to be doing underneath. The haze is drawn on ::before, generously
   larger than the type, so it has room to fade to nothing outside the words
   rather than cutting off at a box edge; --mark-veil is its depth and is tuned
   per position against the part of the plate it lands on.

   These read quiet through size and tracking, not through a dimmed colour: this
   site's contrast floor holds over a painting as it holds on flat chrome. Below
   1024px there is no corner to spare and they are dropped. */

.aif-plate-mark {
  --mark-veil: 0.7;
  position: absolute;
  z-index: 1;
  display: none;
  max-width: none;
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  line-height: 1.95;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--c-ink);
  text-align: right;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95);
  pointer-events: none;
}

.aif-plate-mark::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -46px -74px;
  background: radial-gradient(
    farthest-side ellipse at 50% 50%,
    rgba(4, 7, 20, var(--mark-veil)) 0%,
    rgba(4, 7, 20, var(--mark-veil)) 48%,
    rgba(4, 7, 20, calc(var(--mark-veil) * 0.72)) 66%,
    rgba(4, 7, 20, calc(var(--mark-veil) * 0.3)) 84%,
    transparent 100%
  );
}

.aif-plate-mark b {
  display: block;
  font-weight: 500;
}

/* The slogan stack, on the right over the skyline. */
.aif-plate-mark--slogan {
  --mark-veil: 0.82;
  top: 46%;
  right: 4.5%;
  font-size: var(--fs-small);
  letter-spacing: 0.2em;
  text-align: center;
}

/* One star, centred under the slogan, the way a plate is signed. */
.aif-plate-mark__star {
  display: block;
  width: 15px;
  height: 14px;
  margin: var(--s-3) auto 0;
  background: var(--c-brass);
  opacity: 0.75;
  -webkit-mask: var(--orn-star) center / contain no-repeat;
  mask: var(--orn-star) center / contain no-repeat;
}

/* The imprint stack, in the bottom corner. */
.aif-plate-mark--imprint {
  --mark-veil: 0.86;
  right: 2.5%;
  bottom: 5%;
}

.aif-plate-mark__est {
  display: block;
  margin-top: var(--s-2);
  font-size: var(--fs-nano);
  letter-spacing: 0.2em;
  color: var(--c-ink-dim);
}

@media (min-width: 1024px) {
  .aif-plate-mark {
    display: block;
  }
}

/* --------------------------------------------------------------------------
   22b. The statistics band
   The strip directly under the recruitment plate: what the Force can actually
   count, and one sourced line from the Honour Roll. Every figure here is either
   read from the service at request time or is a number this site knows for
   certain; the one figure that is a joke is written so that nobody could read
   it as a measurement. When the Roll cannot be reached the band says so in the
   place where the figure would have been.
   -------------------------------------------------------------------------- */

.aif-statband {
  position: relative;
  background: var(--c-void);
  border-bottom: 1px solid var(--c-brass-deep);
  padding-block: var(--s-6);
}

.aif-statband__inner {
  max-width: var(--wrap-wide);
  display: grid;
  gap: var(--s-6);
  align-items: center;
}

.aif-statband__figures {
  display: grid;
  /* 132px is what lets four figures sit two across at 320px, the narrowest
     screen the system is checked at. */
  grid-template-columns: repeat(auto-fit, minmax(min(132px, 100%), 1fr));
  gap: var(--s-5) var(--s-4);
}

.aif-stat {
  text-align: center;
}

.aif-stat__num {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 4.6vw, 3.25rem);
  line-height: 1;
  /* Fixed to one em so a figure and a symbol standing in for one leave the
     labels on the same line. */
  height: 1em;
  letter-spacing: 0.01em;
  color: var(--c-ink);
}

.aif-stat--brass .aif-stat__num {
  color: var(--c-brass);
}

/* A symbol in place of a figure: scaled to the figures' optical size, with its
   line box held at 1em so the row keeps one baseline. */
.aif-stat__sym {
  display: inline-block;
  font-size: 1.55em;
  line-height: 0.5;
  vertical-align: -0.02em;
}

.aif-stat__label {
  margin: var(--s-3) 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-nano);
  font-weight: 600;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--c-muted);
}

/* Only ever filled when a figure could not be read, and set under the whole row
   rather than under one figure, because the outage is the row's news. */
.aif-statband__note {
  max-width: none;
  margin: var(--s-4) 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  line-height: 1.5;
  color: var(--c-alert);
}

.aif-statband__quote {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  margin: 0;
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-line);
}

.aif-statband__quote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.125rem, 2.3vw, 1.375rem);
  line-height: 1.32;
  color: var(--c-ink);
  text-wrap: pretty;
}

.aif-statband__attr {
  display: block;
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-nano);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--c-muted);
}

.aif-statband__attr a {
  color: var(--c-muted);
  text-decoration-color: var(--c-line-brass);
}

.aif-statband__attr a:hover {
  color: var(--c-brass);
}

/* The mark beside the quote is the Force's own roundel, never a portrait: this
   site draws no likeness of a living person. */
.aif-statband__seal {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  opacity: 0.9;
}

@media (min-width: 960px) {
  .aif-statband__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
    gap: var(--s-7);
  }

  .aif-statband__quote {
    padding-top: 0;
    padding-left: var(--s-7);
    border-top: 0;
    border-left: 1px solid var(--c-line);
  }
}

/* The footer closes the page the way the masthead opens it: a full-width
   campaign ribbon, a gold hairline under it, and the star field over the void. */
.aif-footer {
  border-top: 0;
  padding-block: 8px 0;
  font-size: var(--fs-small);
  color: var(--c-muted);
  background-color: var(--c-void);
  background-image: var(--orn-ribbon);
  background-repeat: repeat-x;
  background-size: auto 8px;
  background-position: 0 0;
}

/* The ruled index strip: the five sections on one line under the ribbon, closed by the
   gold hairline that does all the separating below. */
.aif-footer__index {
  border-bottom: 1px solid var(--c-line-brass);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
}

.aif-footer__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-3) var(--s-6);
  padding-block: var(--s-4);
}

.aif-footer__row a {
  color: var(--c-ink-dim);
  text-decoration: none;
}

.aif-footer__row a:hover {
  color: var(--c-brass);
}

/* Flag red is a stripe, never a letterform: the current section takes full ink. */
.aif-footer__row a.is-current {
  color: var(--c-ink);
}

/* The seal in the margin and the fine print beside it, one sentence per line. */
.aif-footer__body {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  column-gap: var(--s-6);
  align-items: center;
  padding-block: var(--s-6) var(--s-7);
}

.aif-footer__seal img {
  display: block;
  width: 100%;
  height: auto;
}

.aif-footer__rule {
  display: none;
}

.aif-footer__para {
  max-width: none;
  margin: 0;
  color: var(--c-ink-dim);
}

.aif-footer__para strong {
  color: var(--c-ink);
  font-weight: 600;
}

/* One paragraph, verbatim; only the line breaks are authored. */
.aif-footer__sent {
  display: block;
}

.aif-footer__sent + .aif-footer__sent {
  margin-top: var(--s-1);
}

/* The phone stack: the strip, the fine print, a hairline, then the emblem centred. */
@media (max-width: 719px) {
  .aif-footer__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-3) var(--s-4);
  }

  .aif-footer__body {
    grid-template-columns: minmax(0, 1fr);
    padding-block: var(--s-5) var(--s-6);
  }

  .aif-footer__text {
    order: 1;
  }

  .aif-footer__rule {
    display: block;
    order: 2;
    height: 1px;
    background-color: var(--c-line);
    margin-block: var(--s-5);
  }

  .aif-footer__seal {
    order: 3;
    width: 180px;
    margin-inline: auto;
  }

  .aif-footer__sent {
    display: inline;
  }

  .aif-footer__sent + .aif-footer__sent {
    margin-top: 0;
  }
}

.aif-reading-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  line-height: 1.5;
}

.aif-reading-list li {
  padding-left: var(--s-4);
  position: relative;
  margin-bottom: var(--s-2);
}

.aif-reading-list li::before {
  content: "\00a7";
  position: absolute;
  left: 0;
  color: var(--c-brass);
}

/* --------------------------------------------------------------------------
   23. Notes and callouts
   -------------------------------------------------------------------------- */

.aif-note {
  border-left: var(--bw-thick) solid var(--c-brass);
  background: rgba(224, 182, 74, 0.08);
  padding: var(--s-3) var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  line-height: 1.6;
  color: var(--c-ink-dim);
}

.aif-note--alert {
  border-left-color: var(--c-alert);
  background: rgba(240, 122, 94, 0.11);
}

.aif-note--ok {
  border-left-color: var(--c-ok);
  background: rgba(87, 204, 130, 0.11);
}

.aif-callout {
  display: flex;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-5);
  border: var(--bw) dashed var(--c-line-strong);
  border-radius: var(--radius);
  background: var(--c-panel);
}

/* --------------------------------------------------------------------------
   23b. Paper — the bone surfaces
   A dark page reads as a terminal until something on it is printed. These are
   the six places the institution puts ink on paper: the issued document, the
   register, the receipt, the certificate mount, the posted notice and the
   filing card that carries an issued number.

   A bone surface rebinds the palette rather than restyling its contents, so
   every component inside one — a stamp, a note, a dossier row, a route
   stylesheet's own rule — arrives in ink without knowing it is on paper. Two
   rules hold inside a sheet: nothing on it is gold, and nothing on it is red.
   The gold rule and the campaign ribbon frame it from outside.
   -------------------------------------------------------------------------- */

.aif-counter,
.aif-table-scroll,
.aif-panel--framed,
.aif-receipt,
.aif-issued,
.aif-callout {
  --c-ink: var(--c-ink-navy);
  --c-ink-dim: var(--c-ink-navy-dim);
  --c-muted: var(--c-muted-navy);
  --c-brass: var(--c-brass-ink);
  --c-brass-bright: var(--c-ink-navy);
  --c-alert: var(--c-alert-ink);
  --c-ok: var(--c-ok-ink);
  --c-pending: var(--c-pending-ink);
  --c-line: var(--c-bone-line);
  --c-line-strong: var(--c-bone-line);
  --c-line-brass: var(--c-bone-line);
  --c-panel: var(--c-bone);
  --c-panel-raised: var(--c-bone-shade);
  --c-inset: var(--c-bone-shade);
  --c-scrim: rgba(17, 26, 53, 0.9);

  color: var(--c-ink-navy);
  background-color: var(--c-bone);
  /* Security-paper watermark: the star field again, in navy at a whisper. */
  background-image: var(--orn-stars-ink);
  border-color: var(--c-bone-line);
}

/* Links and marks inside a sheet are ink, underlined, never gold. */
.aif-counter a,
.aif-table-scroll a,
.aif-panel--framed a,
.aif-receipt a,
.aif-issued a,
.aif-callout a {
  color: var(--c-ink-navy);
  text-decoration-color: var(--c-muted-navy);
}

.aif-panel--framed a:hover,
.aif-table-scroll a:hover,
.aif-receipt a:hover,
.aif-issued a:hover,
.aif-callout a:hover {
  color: var(--c-alert-ink);
  text-decoration-color: currentColor;
}

/* Focus on paper is a navy ring; the gold one disappears on bone. */
.aif-table-scroll :focus-visible,
.aif-panel--framed :focus-visible,
.aif-receipt:focus-visible,
.aif-issued:focus-visible,
.aif-issued :focus-visible,
.aif-callout :focus-visible {
  outline-color: var(--c-ink-navy);
}

/* Buttons on paper: the filled one is navy, the outlined ones are ink. Gold
   would fail on bone and red is reserved for the sheet's frame. */
.aif-panel--framed .aif-btn,
.aif-issued .aif-btn,
.aif-callout .aif-btn,
.aif-table-scroll .aif-btn {
  --btn-bg: var(--c-ink-navy);
  --btn-fg: var(--c-bone);
  --btn-edge: var(--c-ink-navy);
  color: var(--c-bone);
}

.aif-panel--framed .aif-btn:hover,
.aif-issued .aif-btn:hover,
.aif-callout .aif-btn:hover,
.aif-table-scroll .aif-btn:hover {
  --btn-bg: var(--c-red-deep);
  --btn-edge: var(--c-red-deep);
  color: var(--c-bone);
}

.aif-panel--framed .aif-btn--ghost,
.aif-panel--framed .aif-btn--quiet,
.aif-issued .aif-btn--ghost,
.aif-issued .aif-btn--quiet,
.aif-callout .aif-btn--ghost,
.aif-callout .aif-btn--quiet,
.aif-table-scroll .aif-btn--ghost,
.aif-table-scroll .aif-btn--quiet {
  --btn-bg: transparent;
  --btn-fg: var(--c-ink-navy);
  --btn-edge: var(--c-ink-navy);
  color: var(--c-ink-navy);
}

.aif-panel--framed .aif-btn--ghost:hover,
.aif-panel--framed .aif-btn--quiet:hover,
.aif-issued .aif-btn--ghost:hover,
.aif-issued .aif-btn--quiet:hover,
.aif-callout .aif-btn--ghost:hover,
.aif-callout .aif-btn--quiet:hover,
.aif-table-scroll .aif-btn--ghost:hover,
.aif-table-scroll .aif-btn--quiet:hover {
  --btn-bg: var(--c-bone-shade);
  --btn-edge: var(--c-red-deep);
  color: var(--c-ink-navy);
}

/* Notes keep their left rule; on bone the rule is ink, not a tint of gold. */
.aif-panel--framed .aif-note,
.aif-issued .aif-note,
.aif-callout .aif-note {
  border-left-color: var(--c-muted-navy);
  background: rgba(17, 26, 53, 0.05);
  color: var(--c-ink-navy-dim);
}

.aif-panel--framed .aif-note--alert,
.aif-issued .aif-note--alert {
  border-left-color: var(--c-alert-ink);
  background: rgba(106, 42, 17, 0.08);
}

.aif-panel--framed .aif-note--ok,
.aif-issued .aif-note--ok {
  border-left-color: var(--c-ok-ink);
  background: rgba(20, 75, 52, 0.08);
}

/* --- The filing card ------------------------------------------------------
   An issued number is printed, not lit: bone stock, navy figures, the ribbon
   along the foot where a franking strip would be. */

.aif-counter {
  border-width: 1px;
  border-color: var(--c-brass-deep);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
}

.aif-counter::before {
  background-color: transparent;
  background-image: none;
}

.aif-counter__num {
  color: var(--c-ink-navy);
}

.aif-counter__num--alert {
  color: var(--c-alert-ink);
}

.aif-counter__num--ok {
  color: var(--c-ok-ink);
}

/* --- The register ---------------------------------------------------------
   Every table on the site is a printed register: bone stock inside a gold rule,
   navy ink, and the navy header band with its ribbon still on top. */

.aif-table-scroll {
  border-width: 1px;
  border-color: var(--c-brass-deep);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  /* No watermark under a register: the ruled rows are already its texture, and
     a star under a zebra row is the darkest bone ground on the site. */
  background-image: none;
}

.aif-table-scroll .aif-table th,
.aif-table-scroll .aif-table td {
  border-bottom-color: var(--c-bone-line);
}

.aif-table-scroll .aif-table tbody tr:nth-child(even) {
  background: rgba(17, 26, 53, 0.035);
}

.aif-table-scroll .aif-table tbody tr:hover {
  background: rgba(194, 32, 44, 0.07);
}

.aif-table-scroll .aif-table--keyvalue th {
  color: var(--c-brass-ink);
  border-bottom-color: var(--c-bone-line);
}

/* --- The issued document --------------------------------------------------
   The manual's cover and the weekly report: a sheet under a double gold rule,
   capped with the ribbon. */

.aif-panel--framed {
  border-color: var(--c-brass-deep);
  outline-color: var(--c-brass-deep);
  background-image: var(--orn-ribbon-sm), var(--orn-stars-ink);
  background-repeat: repeat-x, repeat;
  background-size: auto 6px, auto auto;
  background-position: 0 0, 0 6px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* --- The receipt ---------------------------------------------------------- */

.aif-receipt {
  border-color: var(--c-brass-deep);
  background-image:
    var(--orn-ribbon-sm),
    repeating-linear-gradient(0deg, transparent 0 26px, rgba(17, 26, 53, 0.07) 26px 27px);
  background-repeat: repeat-x, repeat;
  background-size: auto 5px, auto auto;
  background-position: 0 0, 0 0;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

.aif-receipt__head {
  border-bottom-color: var(--c-muted-navy);
}

.aif-receipt__foot {
  border-top-color: var(--c-muted-navy);
}

.aif-receipt__dots,
.aif-receipt__title {
  color: var(--c-ink-navy);
}

.aif-receipt__value--brass {
  color: var(--c-brass-ink);
}

/* --- The certificate mount ------------------------------------------------
   The plate stays dark, because the plate is the drawing; the mount around it
   is the paper it is issued on. */

.aif-issued {
  border-color: var(--c-brass-deep);
  outline-color: var(--c-brass-deep);
  background-image: var(--orn-ribbon-sm), var(--orn-stars-ink);
  background-repeat: repeat-x, repeat;
  background-size: auto 6px, auto auto;
  background-position: 0 0, 0 6px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.aif-issued__sheet {
  background: var(--c-void);
  border-color: var(--c-ink-navy);
}

.aif-issued__actions {
  background: var(--c-bone-shade);
  border-color: var(--c-bone-line);
}

.aif-record,
.aif-record__row {
  border-color: var(--c-bone-line);
}

.aif-record__value--brass {
  color: var(--c-brass-ink);
}

/* --- The posted notice ---------------------------------------------------- */

.aif-callout {
  border-color: var(--c-muted-navy);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

/* --------------------------------------------------------------------------
   24. Utilities
   -------------------------------------------------------------------------- */

.aif-hidden {
  display: none !important;
}

.aif-center {
  text-align: center;
}

.aif-center p,
.aif-center .aif-lede {
  margin-inline: auto;
}

.aif-nowrap {
  white-space: nowrap;
}

.aif-full {
  width: 100%;
}

.aif-tabular {
  font-variant-numeric: tabular-nums;
}

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

.aif-skip-link {
  position: absolute;
  left: var(--s-2);
  top: -60px;
  z-index: 100;
  background: var(--c-brass);
  color: var(--c-void);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--tr-caps);
  padding: var(--s-2) var(--s-3);
  transition: top var(--dur-1) var(--ease);
}

.aif-skip-link:focus {
  top: var(--s-2);
}

/* --------------------------------------------------------------------------
   25. Motion preferences and print
   -------------------------------------------------------------------------- */

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

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

@media print {
  html {
    background: #fff;
  }
  body {
    background: #fff;
    color: #000;
  }

  .aif-masthead,
  .aif-btn,
  .aif-ticker {
    display: none !important;
  }

  .aif-panel,
  .aif-cert {
    border-color: #000;
    box-shadow: none;
  }
}