/* ============================================================================
   munhq.com — the forge
   ----------------------------------------------------------------------------
   The world is a power hammer drawing out a bar of iron. Two heats of the same
   metal, not a theme and its inverse:

   HOT   the forge floor. Warm near-black ground, white-heat text, and the
         workpiece colour carrying every accent. This is the default, because
         the page is read on a laptop in a room, not on paper.
   COLD  the same bar, cooled and set down on the bench. Light ground, dark
         ink, and the heat colour darkened until it still reads as text.

   The heat is the only hue on either ground. It never becomes a background for
   body text, and it never becomes decoration: it marks the workpiece, the
   force numerals and the one action on the page.

   EVERY VALUE HERE WAS MEASURED. The ratios in the comments are WCAG 2.2
   against the surface named. The cold heat is #A03809 rather than the forge's
   #FF6A1A because the bright orange measured 2.4:1 on the cold ground; a hue
   that survives one ground and not the other is not a system.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* --- The forge floor ---------------------------------------------------- */
  --ground:     #141210;   /* the shop, unlit */
  --ground-2:   #1D1A17;   /* raised: the bench, an input well */

  /* --- Heat in the metal, which is also the text ramp -------------------- */
  --ink:        #FFF3D6;   /* 16.95:1 — white heat */
  --ink-2:      #CFC4B2;   /* 10.85:1 — supporting prose */
  --ink-3:      #A79C8D;   /*  6.93:1 on ground, 6.42:1 on ground-2 */

  /* --- Anvil and scale ---------------------------------------------------- */
  --steel:      #3A3D40;   /* structural rules: the anvil face */
  --scale:      #2A2724;   /* hairlines: the black scale thrown off */

  /* --- The workpiece ------------------------------------------------------ */
  --heat:       #FF6A1A;   /* 6.52:1 on ground, 6.04:1 on ground-2 */
  --on-heat:    #141210;   /* 6.52:1 on heat */

  --focus:      var(--heat);

  /* --- Type ---------------------------------------------------------------
     Three faces, three jobs, no overlap. Big Shoulders Display is a condensed
     industrial gothic and it sets every heading in caps. Public Sans sets
     every sentence. Spline Sans Mono sets force numerals and measurements and
     nothing else: mono as a costume for "technical" is the failure this
     separation exists to prevent. */
  --display: "Big Shoulders Display", "Arial Narrow", ui-sans-serif, sans-serif;
  --font:    "Public Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono:    "Spline Sans Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --t-strike: clamp(3rem, 10.5vw, 6rem);      /* the hero, at bar scale */
  --t-head:   clamp(1.75rem, 3.6vw, 2.75rem); /* section heads */
  --t-blow:   clamp(1.35rem, 2.5vw, 1.75rem); /* one blow, one name */
  --t-lede:   clamp(1.0625rem, 1.5vw, 1.25rem);
  --t-body:   1.0625rem;
  --t-data:   0.8125rem;   /* mono: force numerals */
  --t-micro:  0.6875rem;   /* mono: units and marks */

  --lh-strike: 0.9;
  --lh-body:   1.62;

  /* --- The bench ----------------------------------------------------------- */
  --gutter:  clamp(1.25rem, 4vw, 3rem);
  --page:    78rem;
  --measure: 68ch;

  --step-1: 0.5rem;
  --step-2: 1rem;
  --step-3: 1.75rem;
  --step-4: 3rem;
  --step-5: clamp(3rem, 5.5vw, 4.75rem);

  /* --- One clock ---------------------------------------------------------- */
  --clock: 620ms;
  --ease:  cubic-bezier(0.16, 1, 0.3, 1);
}

/* The cold heat. The bar is off the fire and on the bench. */
:root[data-theme="cold"] {
  color-scheme: light;

  /* Cooled steel is grey, not beige. The first cut of this ground was #E9E6E0,
     whose blue channel was the LOWEST of the three: a warm cream, which is both
     wrong for cold metal and the exact off-white every generated interface
     lands on. Every value below has blue at or above red. */
  --ground:     #E4E6E7;   /* spread 3, cool */
  --ground-2:   #D5D8DA;

  --ink:        #131517;   /* 14.62:1 */
  --ink-2:      #3F4448;   /*  7.87:1 */
  --ink-3:      #555B5F;   /*  5.50:1 on ground, 4.81:1 on ground-2 */

  --steel:      #B0B5B8;
  --scale:      #C8CCCE;

  --heat:       #A03809;   /* 5.47:1 on ground, 4.79:1 on ground-2 */
  --on-heat:    #FFF3D6;   /* 6.21:1 on the cold heat */
}

/* A visitor whose system asks for light gets the cold bar, unless they have
   chosen otherwise. The forge is still the default everywhere else. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="hot"]) {
    color-scheme: light;
    --ground:   #E4E6E7;
    --ground-2: #D5D8DA;
    --ink:      #131517;
    --ink-2:    #3F4448;
    --ink-3:    #555B5F;
    --steel:    #B0B5B8;
    --scale:    #C8CCCE;
    --heat:     #A03809;
    --on-heat:  #FFF3D6;
  }
}

/* A block struck in the heat colour re-declares the whole token set, so any
   prose, rule, control or focus ring placed inside it is correct by
   inheritance rather than by a per-component exception. */
.struck {
  --ground:   var(--heat);
  --ground-2: color-mix(in srgb, var(--heat) 84%, #000);
  --ink:      var(--on-heat);
  /* Mixed toward the ground, never toward transparent. Diluting the ink with
     alpha let the hot ground through and dropped secondary text to 3.05:1 on
     the cold heat. Measured: 86% gives 5.45:1 hot and 5.03:1 cold; 80% gives
     4.89:1 and 4.57:1. There is only room for two steps on a saturated
     ground, so there are two. */
  --ink-2:    color-mix(in srgb, var(--on-heat) 86%, var(--heat));
  --ink-3:    color-mix(in srgb, var(--on-heat) 80%, var(--heat));
  --steel:    color-mix(in srgb, var(--on-heat) 34%, transparent);
  --scale:    color-mix(in srgb, var(--on-heat) 18%, transparent);
  --focus:    var(--on-heat);
  background: var(--heat);
  color: var(--ink);
}

/* ============================================================================
   Faces, elements, and the surfaces the browser draws for us.
   ========================================================================== */

/* Three self-hosted variable faces. The CSP is `font-src 'self'`, so a remote
   face is not a choice this site could make. Each ships latin eagerly and
   latin-ext only when a page uses a character in that range, which is what
   keeps Romanian diacritics available on the legal plates without charging
   every other page for them. */
@font-face {
  font-family: "Big Shoulders Display";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/fonts/big-shoulders-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Big Shoulders Display";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/fonts/big-shoulders-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/public-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/public-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Spline Sans Mono";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/spline-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Spline Sans Mono";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/spline-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

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

/* --- Browser surfaces ------------------------------------------------------
   A default blue selection on a forge floor is the detail that says the page
   was assembled rather than made. */
::selection { background: var(--heat); color: var(--on-heat); }

:root { scrollbar-color: var(--steel) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--ground-2); }
::-webkit-scrollbar-thumb { background: var(--steel); border: 3px solid var(--ground-2); }
::-webkit-scrollbar-thumb:hover { background: var(--heat); }

:where(input, textarea) { caret-color: var(--heat); }

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

/* --- Elements -------------------------------------------------------------- */
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.004em;
  line-height: 1.02;
  text-wrap: balance;
}

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

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }

ul, ol { margin: 0 0 var(--step-2); padding-left: 1.35em; max-width: var(--measure); }
li { margin-bottom: 0.4em; }
li::marker { color: var(--heat); }

hr { height: 0; margin: 0; border: 0; border-top: 1px solid var(--steel); }

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

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

/* Every figure on this site is a measurement, so the numerals line up. */
.mono, code, kbd, samp, table, time { font-variant-numeric: tabular-nums; }

button { font: inherit; color: inherit; }

.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; left: var(--step-2); top: -4rem; z-index: 100;
  padding: 0.7rem 1.1rem; background: var(--heat); color: var(--on-heat);
  font-family: var(--mono); font-size: var(--t-data); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  border: 2px solid var(--on-heat);
  transition: top 160ms var(--ease);
}
.skip:focus { top: var(--step-2); }

/* ============================================================================
   The shop floor. Every piece here does a job the world needs done: the bar
   across the top, the strike, one blow per full-width row, and the bench where
   the legal text is set.

   NO SHADOWS AND NO ROUNDED CORNERS. Hot metal has neither. Depth comes from
   the ground stepping up, from rule weight, and from the heat itself.
   ========================================================================== */

/* --- The bar across the top ------------------------------------------------ */
.bar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--ground);
  border-bottom: 1px solid var(--steel);
}
.bar__in {
  max-width: var(--page);
  margin-inline: auto;
  padding: 0 var(--gutter);
  min-height: 3.5rem;
  display: flex;
  align-items: center;
  gap: var(--step-3);
  flex-wrap: wrap;
}
.mark {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex: none;
  line-height: 1;
  min-height: 2.75rem;
}
/* The billet: a square of hot metal, the one mark this company has. */
.mark__billet {
  width: 1.05rem; height: 1.05rem;
  background: var(--heat);
  flex: none;
}
.bar__nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--step-2);
  flex: none;
}
.bar__nav a {
  font-family: var(--mono);
  font-size: var(--t-data);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.4rem 0;
  border-bottom: 2px solid transparent;
}
.bar__nav a:hover { border-bottom-color: var(--ink); }
.bar__nav a[aria-current="page"] { border-bottom-color: var(--heat); }

.heat-toggle {
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  background: none;
  border: 1px solid var(--steel);
  cursor: pointer;
  flex: none;
}
.heat-toggle:hover { border-color: var(--heat); color: var(--heat); }
.heat-toggle svg { width: 1rem; height: 1rem; stroke: currentColor; fill: none; stroke-width: 1.8; }
.heat-toggle .cold { display: none; }
:root[data-theme="cold"] .heat-toggle .hot { display: none; }
:root[data-theme="cold"] .heat-toggle .cold { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="hot"]) .heat-toggle .hot { display: none; }
  :root:not([data-theme="hot"]) .heat-toggle .cold { display: block; }
}

@media (max-width: 30rem) {
  .bar__nav {
    margin-left: 0; width: 100%;
    justify-content: space-between; gap: var(--step-1);
    border-top: 1px solid var(--scale);
    padding: 0.35rem 0 0.5rem;
  }
}

/* --- Sections -------------------------------------------------------------- */
.shop { max-width: var(--page); margin-inline: auto; }
.sec { border-bottom: 1px solid var(--scale); }
.sec:last-child { border-bottom: 0; }
.sec__in { padding: var(--step-5) var(--gutter); }
.sec__head {
  font-size: var(--t-head);
  margin-bottom: var(--step-2);
}
.sec__sub { color: var(--ink-2); margin-bottom: var(--step-4); }

/* --- The strike ------------------------------------------------------------
   The hammer falls once. The bloom is the heat thrown out of the work, and it
   is drawn with a gradient rather than an image because it has to survive both
   heats and cost nothing. */
.strike { position: relative; overflow: hidden; }
.strike__glow {
  position: absolute;
  left: -14%; top: -58%;
  width: 78%; aspect-ratio: 1;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--heat) 42%, transparent) 0%,
    color-mix(in srgb, var(--heat) 12%, transparent) 44%,
    transparent 72%);
  pointer-events: none;
  transform-origin: 30% 70%;
  /* The strength is a variable, not a bare opacity, because the entrance
     animation below carries animation-fill-mode: both. A `to { opacity: 1 }`
     keyframe outranks any static opacity on this element, so setting one here
     did nothing at all until the keyframe stopped touching opacity. */
  opacity: var(--bloom, 1);
}
/* Cold metal does not glow. On the bench the bloom drops to a trace of where
   the heat was, because at forge strength it reads as a stain on a light
   ground rather than as light coming off the work. */
:root[data-theme="cold"] { --bloom: 0.3; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="hot"]) { --bloom: 0.3; }
}
.strike__in {
  position: relative;
  padding: var(--step-5) var(--gutter) var(--step-5);
}
.strike h1 {
  font-size: var(--t-strike);
  font-weight: 800;
  line-height: var(--lh-strike);
  letter-spacing: 0.002em;
  margin: 0 0 var(--step-3);
  max-width: 16ch;
}
.strike__lede {
  font-size: var(--t-lede);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 48ch;
  margin: 0 0 var(--step-4);
}
.strike__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--step-3); }

/* --- One blow per row ------------------------------------------------------
   The world's own composition: not a grid of cards, but a bar being drawn out
   one strike at a time, each one leaving a measured figure behind. */
.blows { list-style: none; margin: 0; padding: 0; max-width: none; border-top: 2px solid var(--ink); }
.blow {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) auto;
  gap: var(--step-2) var(--step-3);
  align-items: center;
  padding: var(--step-3) 0;
  border-bottom: 1px solid var(--scale);
  transition: background var(--clock) var(--ease);
  margin: 0;
}
a.blow, .blow a.blow__hit { text-decoration: none; color: inherit; }
/* The product name is the row's only link, so it carries the row's target.
   It measured 23px: one pixel under the 24px floor of WCAG 2.2 AA 2.5.8. */
.blow__hit { display: inline-block; min-height: 1.5rem; padding: 0.15rem 0; }
.blow:hover { background: var(--ground-2); }
.blow__n {
  font-family: var(--mono);
  font-size: var(--t-data);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--heat);
}
.blow__name {
  font-family: var(--display);
  font-size: var(--t-blow);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.05;
  display: block;
}
.blow__what { margin: 0.3rem 0 0; color: var(--ink-2); font-size: 0.9375rem; max-width: 56ch; }
/* Where the row actually goes. This is what the deleted second page was for. */
.blow__to {
  font-family: var(--mono);
  font-size: var(--t-data);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 1.5rem;
  padding: 0.3rem 0;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}
.blow__to svg { width: 0.85em; height: 0.85em; stroke: currentColor; fill: none; stroke-width: 2.4; flex: none; }
.blow:hover .blow__to { color: var(--heat); }
/* The two with no public destination still go somewhere: the form. */
.blow__to--none { color: var(--ink-3); }
.blow:hover .blow__to--none { color: var(--ink-2); }
@media (max-width: 52rem) {
  .blow { grid-template-columns: 3.25rem minmax(0, 1fr); }
  .blow__to { grid-column: 2; }
}
@media (max-width: 40rem) {
  .blow { grid-template-columns: 2.25rem minmax(0, 1fr); }
}

/* --- Register entries (the detail sheet) ---------------------------------- */
.register { list-style: none; margin: 0; padding: 0; max-width: none; border-top: 2px solid var(--ink); }
.entry {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--step-3);
  padding: var(--step-4) 0;
  border-bottom: 1px solid var(--scale);
  scroll-margin-top: 5rem;
}
.entry__n { font-family: var(--mono); font-size: var(--t-data); font-weight: 600; color: var(--heat); padding-top: 0.4rem; }
.entry__name { font-size: 1.6rem; margin-bottom: 0.25rem; }
.entry__kind {
  font-family: var(--mono); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
  display: block; margin-bottom: var(--step-2);
}
.entry__line { font-size: var(--t-lede); line-height: 1.4; margin-bottom: var(--step-2); }
.entry__body { color: var(--ink-2); }
.entry__meta { border-top: 1px solid var(--steel); padding-top: var(--step-2); margin-top: var(--step-2); }
.entry__facts { list-style: none; margin: 0 0 var(--step-2); padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.entry__facts li {
  font-family: var(--mono); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: 0.06em; border: 1px solid var(--steel);
  padding: 0.3rem 0.55rem; margin: 0; color: var(--ink-2);
}
.entry__links { display: flex; flex-wrap: wrap; gap: var(--step-2); }
.entry__links a {
  font-family: var(--mono); font-size: var(--t-data); font-weight: 600;
  display: inline-flex; align-items: center; gap: 0.4rem;
  min-height: 1.5rem; padding: 0.3rem 0;
}
.entry__links svg { width: 0.9em; height: 0.9em; }
@media (max-width: 62rem) {
  .entry { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .entry__meta { grid-column: 2; }
}
@media (max-width: 34rem) {
  .entry { grid-template-columns: minmax(0, 1fr); gap: var(--step-2); }
  .entry__n { padding: 0; }
  .entry__meta { grid-column: auto; }
}

/* --- Buttons ---------------------------------------------------------------
   The primary action is the workpiece: hot metal, dark text. */
.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.9rem 1.5rem;
  font-family: var(--mono);
  font-size: var(--t-data);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid var(--heat);
  background: var(--heat);
  color: var(--on-heat);
  cursor: pointer;
  transition: background var(--clock) var(--ease), color var(--clock) var(--ease);
}
.btn:hover { background: transparent; color: var(--heat); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn svg { width: 0.95em; height: 0.95em; stroke: currentColor; fill: none; stroke-width: 2.4; }
.btn--quiet { background: transparent; color: var(--ink); border-color: var(--steel); }
.btn--quiet:hover { border-color: var(--ink); background: transparent; color: var(--ink); }
/* On hot metal the button cannot also be hot metal: it becomes the dark work. */
.struck .btn { background: var(--ink); color: var(--heat); border-color: var(--ink); }
.struck .btn:hover { background: transparent; color: var(--ink); }
.struck input, .struck textarea, .struck select { border-color: var(--ink); }

.alt {
  font-family: var(--mono); font-size: var(--t-data); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  text-underline-offset: 0.3em;
  display: inline-block; min-height: 1.5rem; padding: 0.45rem 0;
}

/* --- Contact ---------------------------------------------------------------- */
.contact__in {
  padding: var(--step-5) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: var(--step-5) var(--step-4);
  align-items: start;
}
.form { display: grid; gap: var(--step-2); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--step-2); }
.field-group { display: grid; gap: 0.35rem; }
.field-group label {
  font-family: var(--mono); font-size: var(--t-micro); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2);
}
.field-group .req { color: var(--heat); }
/* On hot metal the marker cannot be the metal. */
.struck .field-group .req { color: var(--ink); }
input, textarea, select {
  font: inherit; font-size: var(--t-body); width: 100%;
  padding: 0.75rem 0.85rem;
  background: var(--ground-2);
  color: var(--ink);
  border: 1px solid var(--steel);
  border-radius: 0;
}
input:hover, textarea:hover, select:hover { border-color: var(--ink-3); }
textarea { min-height: 8.5rem; resize: vertical; }
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.1rem) 55%, calc(100% - 0.75rem) 55%;
  background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
  background-repeat: no-repeat;
  padding-right: 2.25rem;
}
::placeholder { color: var(--ink-3); opacity: 1; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--step-2); justify-content: space-between; }
.form__note { font-size: var(--t-data); color: var(--ink-2); margin: 0; max-width: 36ch; }
.form__note a { display: inline-block; min-height: 1.5rem; padding: 0.3rem 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.status { display: none; padding: 0.8rem 1rem; font-size: var(--t-data); border: 2px solid var(--steel); }
.status.is-shown { display: block; }
.status.is-ok { background: var(--heat); color: var(--on-heat); border-color: var(--heat); }
.status.is-err { border-style: dashed; border-color: var(--heat); }

.lines { margin: 0; border-top: 2px solid var(--ink); }
.lines__row {
  display: grid; grid-template-columns: minmax(6rem, auto) minmax(0, 1fr);
  gap: var(--step-2); padding: 0.55rem 0; border-bottom: 1px solid var(--scale);
}
.lines__k {
  font-family: var(--mono); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); padding-top: 0.2em;
}
.lines__v { margin: 0; font-family: var(--mono); font-size: var(--t-data); font-weight: 500; max-width: none; }
.lines__v a { display: inline-block; min-height: 1.5rem; padding: 0.28rem 0; }

/* --- The bench: legal text ------------------------------------------------- */
.bench { padding: var(--step-4) var(--gutter) var(--step-5); }
.bench > .sec__head { margin-bottom: var(--step-2); }
.rev {
  font-family: var(--mono); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--heat);
  margin: 0 0 var(--step-4);
}
.toc {
  list-style: none; margin: 0 0 var(--step-4); padding: var(--step-2) 0 0; max-width: none;
  columns: 2; column-gap: var(--step-4); border-top: 2px solid var(--ink);
}
.toc li { margin: 0; break-inside: avoid; }
.toc a {
  font-family: var(--mono); font-size: var(--t-data); text-decoration: none; color: var(--ink-2);
  display: inline-block; min-height: 1.5rem; padding: 0.3rem 0;
}
.toc a:hover { color: var(--heat); text-decoration: underline; }
@media (max-width: 40rem) { .toc { columns: 1; } }

.clause { padding: var(--step-3) 0; border-top: 1px solid var(--scale); scroll-margin-top: 5rem; }
.clause h2 {
  font-size: 1.3rem; margin-bottom: var(--step-2);
  display: grid; grid-template-columns: 2.75rem minmax(0, 1fr);
  align-items: baseline; gap: var(--step-1);
}
.clause h2 > span:not(.n) { line-height: 1.2; }
.clause h2 .n {
  font-family: var(--mono); font-size: var(--t-data); font-weight: 600;
  color: var(--heat); letter-spacing: 0.04em; text-transform: none;
}
.clause h3 { font-size: 1.0625rem; margin: var(--step-3) 0 var(--step-1); }
.clause p, .clause ul, .clause ol { color: var(--ink-2); }
@media (min-width: 48rem) { .clause > :not(h2) { margin-left: 3.35rem; } }
.lede .intro { font-size: var(--t-lede); line-height: 1.5; color: var(--ink-2); }
.lede { margin-bottom: var(--step-4); }

/* --- Colophon --------------------------------------------------------------- */
.foot { border-top: 2px solid var(--ink); background: var(--ground); }
.foot__in {
  max-width: var(--page); margin-inline: auto;
  padding: var(--step-4) var(--gutter);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--step-3);
}
.foot h2 {
  font-family: var(--mono); font-size: var(--t-micro); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: var(--step-2);
}
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 0; }
.foot a {
  font-size: var(--t-data); text-decoration: none;
  display: inline-block; min-height: 1.5rem; padding: 0.3rem 0;
}
.foot a:hover { color: var(--heat); text-decoration: underline; }
.foot__spec {
  grid-column: 1 / -1;
  border-top: 1px solid var(--steel);
  padding-top: var(--step-2); margin-top: var(--step-2);
  display: flex; flex-wrap: wrap; gap: var(--step-1) var(--step-3);
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3);
}
.foot__spec b { color: var(--ink); font-weight: 600; }
.chip { display: inline-block; width: 0.75em; height: 0.75em; background: var(--heat); margin-right: 0.35em; vertical-align: -0.05em; }
@media (max-width: 48rem) { .foot__in { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 62rem) { .contact__in { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 34rem) { .form__row { grid-template-columns: minmax(0, 1fr); } }

/* --- Motion: one clock, one strike -----------------------------------------
   The hammer falls once, on load. The bloom expands, and the blows land in
   sequence: one blow per step, which is how the source works. Nothing else on
   the site moves, and the default state is the finished state, so a reader
   with motion off sees the bar already drawn. */
@media (prefers-reduced-motion: no-preference) {
  .strike__glow { animation: bloom var(--clock) var(--ease) both; }
  .strike h1 { animation: settle 520ms var(--ease) both; }
  .strike__lede { animation: settle 520ms var(--ease) both; animation-delay: 70ms; }
  .strike__actions { animation: settle 520ms var(--ease) both; animation-delay: 130ms; }
  .blow { animation: settle 380ms var(--ease) both; animation-delay: calc(90ms + var(--i, 0) * 55ms); }
}
@keyframes bloom { from { transform: scale(0.55); } to { transform: scale(1); } }
@keyframes settle { from { transform: translateY(8px); } to { transform: none; } }