/* ============================================================================
   munhq.com — the yard
   ----------------------------------------------------------------------------
   The world is a yard of tools laid out on a bench. One ground, seven fields,
   and a colour that belongs to each tool rather than to the page.

   DAY    the default. A warm cream ground, near-black ink, and each tool
          sitting in its own tinted field. The buyer opens this on a laptop in
          an office, so the page is paper before it is a terminal.
   NIGHT  the same bench under a lamp. Near-black ground, warm ink, and every
          field darkened until its hue still reads as that tool and its text
          still clears AA.

   THE SEVEN HUES ARE THE STRUCTURE, NOT DECORATION. A tool keeps its hue in
   the field it sits in, in the arrow that leaves it, and in the logo block
   that stands for it. Nothing else on the page is coloured.

   EVERY VALUE WAS MEASURED, as WCAG 2.2 against the surface named. A hue that
   survives one ground and not the other is not a system, so each field carries
   a separate ink for day and for night.

   The attribute values stay `cold` and `hot` because `src/assets/app.js` and
   the stored preference use those two words. Cold is day, hot is night.
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- The bench ---------------------------------------------------------- */
  --ground:     #F6F2EA;   /* cream paper */
  --ground-2:   #FFFFFF;   /* a card lifted off it */

  /* --- Ink ---------------------------------------------------------------- */
  --ink:        #1B1A17;   /* 16.1:1 on ground */
  --ink-2:      #565248;   /*  6.8:1 on ground */
  --ink-3:      #605C52;   /*  5.9:1 on ground */

  /* --- Edges -------------------------------------------------------------- */
  --steel:      #D6CCB6;   /* a drawn edge: input borders, section rules */
  --scale:      #E4DCCC;   /* hairlines between rows */

  /* --- The one action ----------------------------------------------------- */
  --heat:       #1B4A33;   /* 9.8:1 on ground — the button and every link */
  --on-heat:    #F9F7F2;   /* 9.4:1 on heat */

  --focus:      var(--heat);

  /* --- A hue for each tool ------------------------------------------------
     `--yN` is the field, `--yNi` the ink and the mark inside it. The pairs are
     measured against each other, not against the page, because nothing in a
     field ever sits on the page ground. */
  --y1:  #DDE9DC;  --y1i: #1B4A33;   /* agentyard   · the team     · sage   */
  --y2:  #F6E3CC;  --y2i: #7A4808;   /* proxium     · the gateway  · amber  */
  --y3:  #DBE3F2;  --y3i: #22386E;   /* gpuyard     · the compute  · slate  */
  --y4:  #ECDEEC;  --y4i: #5E2A61;   /* chat-recall · the memory   · plum   */
  --y5:  #D6E7E8;  --y5i: #0E4A50;   /* codeindex   · code         · teal   */
  --y6:  #F4DEDA;  --y6i: #7B3026;   /* cloud-tools · cost         · rose   */
  --y7:  #E8E5D0;  --y7i: #4D4A16;   /* distil      · context      · olive  */

  /* --- Type ---------------------------------------------------------------
     One face, four weights. The previous world ran three faces on the theory
     that a mono marks measurement; the yard has no measurements on its face,
     and a second face only made the page look like a tool rather than a
     company. `--display` and `--mono` still resolve, because the legal plates
     set their headings and their clause numbers through them. */
  --display: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font:    "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono:    "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --t-strike: clamp(2.0625rem, 5.3vw, 3.9375rem); /* the hero */
  --t-head:   clamp(1.5625rem, 3.2vw, 2.375rem);  /* section heads */
  --t-blow:   clamp(1.375rem, 2.2vw, 1.625rem);   /* one field, one promise */
  --t-lede:   clamp(1.0625rem, 1.75vw, 1.25rem);
  --t-body:   1.0625rem;
  --t-data:   0.875rem;
  --t-micro:  0.8125rem;

  --lh-strike: 1.04;
  --lh-body:   1.62;

  --gutter:  clamp(1.25rem, 4vw, 3rem);
  --page:    74rem;
  --measure: 68ch;

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

  --radius:   22px;
  --radius-s: 12px;
  --radius-p: 99px;
  --lift: 0 1px 2px rgba(27, 26, 23, 0.05), 0 14px 34px -22px rgba(27, 26, 23, 0.34);

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

/* Night. The bench under a lamp. */
:root[data-theme="hot"] {
  color-scheme: dark;

  --ground:     #14150F;
  --ground-2:   #1C1E17;

  --ink:        #F2F0E8;   /* 15.9:1 */
  --ink-2:      #ACA99D;   /*  7.9:1 */
  --ink-3:      #9E9B90;   /*  6.7:1 */

  --steel:      #343629;
  --scale:      #282A21;

  --heat:       #8FDCB4;   /* 10.6:1 on ground */
  --on-heat:    #14150F;   /* 10.6:1 on heat */

  --y1:  #1B3227;  --y1i: #9FE3C1;
  --y2:  #35291A;  --y2i: #F2CB8C;
  --y3:  #1D2438;  --y3i: #B0C4F2;
  --y4:  #2C1F2D;  --y4i: #E0B6E3;
  --y5:  #16292B;  --y5i: #93D6DC;
  --y6:  #2F1E1B;  --y6i: #F0AFA5;
  --y7:  #272718;  --y7i: #D6D28A;

  --lift: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 38px -24px rgba(0, 0, 0, 0.9);
}

/* A visitor whose system asks for dark gets night, unless they chose day. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="cold"]) {
    color-scheme: dark;
    --ground:   #14150F;
    --ground-2: #1C1E17;
    --ink:      #F2F0E8;
    --ink-2:    #ACA99D;
    --ink-3:    #9E9B90;
    --steel:    #343629;
    --scale:    #282A21;
    --heat:     #8FDCB4;
    --on-heat:  #14150F;
    --y1: #1B3227; --y1i: #9FE3C1;
    --y2: #35291A; --y2i: #F2CB8C;
    --y3: #1D2438; --y3i: #B0C4F2;
    --y4: #2C1F2D; --y4i: #E0B6E3;
    --y5: #16292B; --y5i: #93D6DC;
    --y6: #2F1E1B; --y6i: #F0AFA5;
    --y7: #272718; --y7i: #D6D28A;
    --lift: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 38px -24px rgba(0, 0, 0, 0.9);
  }
}

/* A block struck in the action colour re-declares the token set, so any prose,
   rule, control or focus ring inside it is correct by inheritance. */
.struck {
  --ground:   var(--heat);
  --ground-2: color-mix(in srgb, var(--heat) 84%, #000);
  --ink:      var(--on-heat);
  --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: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/hanken-grotesk-400-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: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/hanken-grotesk-400-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: "Hanken Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/hanken-grotesk-500-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: "Hanken Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/hanken-grotesk-500-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: "Hanken Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/hanken-grotesk-600-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: "Hanken Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/hanken-grotesk-600-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: "Hanken Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/hanken-grotesk-700-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: "Hanken Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/hanken-grotesk-700-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: 700;
  letter-spacing: -0.028em;
  line-height: 1.08;
  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. */
/* Four blocks, in the first four yard hues. The mark is the yard: a visitor
   who has scrolled the fields recognises the same four colours in the corner. */
.mark__billet {
  width: 1.25rem; height: 1.25rem;
  flex: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: none;
}
.mark__billet::before, .mark__billet::after { content: ""; border-radius: 3px; }
.mark__billet {
  background:
    linear-gradient(var(--y1i), var(--y1i)) 0 0 / calc(50% - 1px) calc(50% - 1px) no-repeat,
    linear-gradient(var(--y2i), var(--y2i)) 100% 0 / calc(50% - 1px) calc(50% - 1px) no-repeat,
    linear-gradient(var(--y3i), var(--y3i)) 0 100% / calc(50% - 1px) calc(50% - 1px) no-repeat,
    linear-gradient(var(--y4i), var(--y4i)) 100% 100% / calc(50% - 1px) calc(50% - 1px) no-repeat;
}
.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);
}
.band .sec__head { margin-bottom: 0; }

/* --- 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. */
/* 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; }
}

/* --- 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. */
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. */
/* What the product actually does, in its own words. These used to sit in the
   data and render nowhere, which is the same dead-data failure as the force
   numerals: a field nothing reads is a field the next person trusts. */
/* No separator glyph between them. A dot drawn before each item leaves an
   orphan at the start of any line the list wraps onto, and proxium's five
   capabilities wrap at every width worth designing for. The gap separates
   them, which is what a gap is for. */
/* Where the row actually goes. This is what the deleted second page was for. */
/* The two with no public destination still go somewhere: the form. */
@media (max-width: 52rem) {
}
@media (max-width: 40rem) {
}

/* --- Register entries (the detail sheet) ---------------------------------- */
@media (max-width: 62rem) {
}
@media (max-width: 34rem) {
}

/* --- Buttons ---------------------------------------------------------------
   The primary action is the workpiece: hot metal, dark text. */
.btn {
  display: inline-flex; align-items: center; gap: 0.4375rem;
  padding: 0.9375rem 1.625rem;
  font-family: var(--font);
  font-size: 0.9688rem;
  font-weight: 600;
  letter-spacing: normal;
  text-decoration: none;
  border: 1px solid var(--heat);
  border-radius: var(--radius-p);
  background: var(--heat);
  color: var(--on-heat);
  cursor: pointer;
  transition: transform 160ms var(--ease), opacity 140ms var(--ease);
}
.btn:hover { transform: translateY(-2px); opacity: 0.94; }
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:hover { transform: none; }
}
.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 { background: var(--ground-2); border-color: var(--ink-3); color: var(--ink); opacity: 1; }
/* 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); }

/* --- Contact ---------------------------------------------------------------- */
.contact__in {
  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-size: 0.9063rem; font-weight: 600; color: var(--ink);
}
.field-group .req { color: var(--y2i); }
/* 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.8125rem 0.9375rem;
  background: var(--ground);
  color: var(--ink);
  border: 1px solid var(--steel);
  border-radius: var(--radius-s);
}
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; }
@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) {
}
@keyframes bloom { from { transform: scale(0.55); } to { transform: scale(1); } }
@keyframes settle { from { transform: translateY(8px); } to { transform: none; } }

/* ============================================================================
   The yard
   ----------------------------------------------------------------------------
   The hero, the two field blocks, and the contact card. A field carries its own
   hue through two custom properties set inline from the estate (`--y` the
   ground, `--yi` the ink), so every rule below is written once and no component
   needs a per-product exception.
   ========================================================================== */

.hero { padding-block: var(--step-5) 0; }
.hero__in {
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.hero h1 {
  font-size: var(--t-strike);
  line-height: var(--lh-strike);
  letter-spacing: -0.028em;
  max-width: 19ch;
  margin: 0;
}
.hero__lede {
  margin: var(--step-3) 0 0;
  max-width: 62ch;
  font-size: var(--t-lede);
  line-height: 1.5;
  color: var(--ink-2);
}
.hero__lede b { color: var(--ink); font-weight: 600; }
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: var(--step-3);
}

/* A block heading and its one line of context, on the same baseline. */
.band {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-bottom: var(--step-2);
}
.band__note { margin: 0; color: var(--ink-3); font-size: var(--t-data); }

.fields { display: grid; gap: 1.125rem; }
.fields--four  { grid-template-columns: repeat(2, 1fr); }
.fields--three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 60rem) {
  .fields--four, .fields--three { grid-template-columns: 1fr; }
}

.field {
  background: var(--y);
  border-radius: var(--radius);
  padding: 1.875rem 1.875rem 2rem;
  display: flex;
  flex-direction: column;
  box-shadow: var(--lift);
}
.field__who {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5625rem;
}
.field__nm {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.028em;
  color: var(--ink);
}
.field__nm a { color: inherit; text-decoration: none; }
.field__nm a:hover { text-decoration: underline; text-decoration-color: var(--yi); }
.field__role {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--yi);
}
.field__promise {
  margin: var(--step-2) 0 0;
  font-family: var(--font);
  font-size: var(--t-blow);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.028em;
  color: var(--ink);
  max-width: 24ch;
}
.field__pitch {
  margin: 0.875rem 0 0;
  color: var(--ink-2);
  font-size: 1rem;
}
/* Pinned to the bottom so a short pitch and a long one still line their links
   up across a row. */
.field__go {
  margin-top: auto;
  padding-top: 1.5rem;
  color: var(--yi);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
}
.field__go svg {
  width: 0.95em; height: 0.95em; flex: none;
  stroke: currentColor; fill: none; stroke-width: 2.4;
  transition: transform 180ms var(--ease);
}
.field__go:hover svg { transform: translateX(4px); }
.field__go:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
  .field__go svg { transition: none; }
  .field__go:hover svg { transform: none; }
}

.contact {
  background: var(--ground-2);
  border-radius: 26px;
  padding: 2.75rem 2.5rem 2.875rem;
  box-shadow: var(--lift);
}
.contact__say {
  margin: 0.875rem 0 var(--step-3);
  color: var(--ink-2);
  max-width: 42ch;
}
@media (max-width: 40rem) {
  .contact { padding: 2rem 1.5rem 2.25rem; }
}