/* ============================================================================
   Forgewright Labs — "Blued Steel"
   Shared design system. Every page loads this; no page defines its own colors.

   Blueing is the oxide finish put on forged iron so it won't rust — it comes
   out near-black with a blue cast. Forged and structural at once, which is
   why the near-black is #080B13 and not #000000.

   Amber budget: --signal appears in six places and nowhere else —
   primary buttons, the hero load-bar, the first service card's foot, the
   active nav underline, eyebrow text, and link underlines. If a seventh use
   appears, one of the six has to go. It is a signal light, not a brand color.

   The High-severity chip on the audit page used to be an amber fill, and it was
   the one use that broke the rule rather than stretching it. The invariant worth
   policing is semantic, not numeric: amber means ACT HERE (a button, a focus
   ring) or YOU ARE HERE (the active nav, an eyebrow, a rule down the side of
   something). It must never carry RANK — a reader cannot tell whether amber
   outranks oxide red, so a severity scale built on it has no order at all.
   Severity is now a ladder of how much ink a chip spends, in one hue: solid
   fill, coloured outline, neutral outline, faint outline. See FINDINGS.

   (The list above is a list of CATEGORIES, not a literal count — a grep for
   var(--signal) finds around twenty occurrences across them, plus plate rules,
   callout borders, check bullets and hover states. Worth rewording one day.)
   ========================================================================= */

/* ---------------------------------------------------------------- TOKENS  */
/* Light is the base; dark is redefined once, for the OS preference. There is
   deliberately no in-page theme toggle — the system setting is the whole
   mechanism, so there is exactly one place a token is overridden and no
   possibility of the two disagreeing. Components only ever read tokens, never
   a literal hex. */

:root {
  --ground:      #E7E9EE;
  --surface:     #F7F8FA;
  --sunken:      #DDE0E7;
  --ink:         #0E1320;
  --ink-2:       #2A3348;
  --muted:       #545E75;
  --line:        #C7CDD9;
  --line-hard:   #A6AEBF;

  --signal:      #E8A50E;   /* fills only */
  --signal-ink:  #0E1320;   /* text on a signal fill */
  --signal-text: #7A5200;   /* accent text — bright amber fails on light */

  --severity:    #B03A0E;   /* audit findings only, never decorative */
  --severity-ink:#FFFFFF;   /* label on the critical fill */
  --severity-text:#9C3309;  /* severity as OUTLINE and label. The fill colour used
                               as text clears 4.5:1 everywhere but --sunken, where
                               it lands on 4.60 — same split, same reason, as
                               --signal / --signal-text. */
  --severity-wash:#F6DDD6;  /* pale oxide behind the High chip */
  --advisory:     #1B4870;  /* Low findings. Steel blue — 190 degrees off amber,
                               which is the point: the eye can never mistake it
                               for a call to action. */
  --advisory-wash:#D9E3F3;

  --band-bg:     #0E1320;   /* the closing band is a solid block of ink */
  --band-fg:     #E7E9EE;
  --band-muted:  #98A2B8;

  --font-slab: "Zilla Slab", Georgia, "Times New Roman", serif;
  --font-sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --wrap: 1140px;
  --pad: 28px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground:      #080B13;
    --surface:     #101623;
    --sunken:      #0B0F1A;
    --ink:         #E6E9F0;
    --ink-2:       #C2C8D6;
    --muted:       #8B95AB;
    --line:        #1E263A;
    --line-hard:   #303A52;

    --signal:      #F5BE2B;
    --signal-ink:  #120E00;
    --signal-text: #F5BE2B;

    --severity:    #E0764A;
    --severity-ink:#160800;
    --severity-text:#E0764A;  /* bright on ink already; no second value needed */
    --severity-wash:#2E1207;
    --advisory:     #93C2EC;
    --advisory-wash:#122740;

    --band-bg:     #101623;
    --band-fg:     #E6E9F0;
    --band-muted:  #8B95AB;
  }
}


/* ------------------------------------------------------------------ BASE  */

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

body {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-slab);
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.06;
  text-wrap: balance;
}

p { max-width: 62ch; }
strong, b { font-weight: 600; color: var(--ink); }

a { color: var(--ink); text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 2px;
}

.wrap   { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
/* Same measure as .wrap, but edge to edge — for blocks whose own borders and
   rules are the margin: the hero load-bar, the spec strips, the card grid. */
.wrap-flush { width: 100%; max-width: var(--wrap); margin: 0 auto; }
.narrow { max-width: 820px; }

/* Numbers are measurements. Everything numeric sets in mono and lines up. */
.mono, .price, time, .fig {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Uppercase mono label, used for every eyebrow, tag, and spec caption. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--signal-text);
}
.eyebrow-quiet { color: var(--muted); }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--signal); color: var(--signal-ink);
  padding: 12px 20px; font-weight: 700; z-index: 200;
}
.skip:focus { left: 0; }

/* ---------------------------------------------------------------- HEADER  */
/* Opaque, never translucent. A see-through header is the opposite of
   load-bearing. The 4px foot is the first structural rule on the page. */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--surface);
  border-bottom: 4px solid var(--ink);
}
.nav { display: flex; align-items: center; gap: 18px; min-height: 74px; }

.brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-slab); font-weight: 700; font-size: 1.22rem;
  letter-spacing: -0.01em; color: var(--ink); margin-right: auto;
}
.brand .mark { width: 24px; height: 24px; flex: none; display: block; }
.brand span {
  font-family: var(--font-sans); font-weight: 500;
  font-size: 0.92rem; color: var(--muted);
}

.nav-links { display: flex; gap: 24px; font-size: 0.9rem; font-weight: 500; color: var(--muted); }
.nav-links a { color: var(--muted); padding-bottom: 3px; white-space: nowrap; }
.nav-links a:hover { color: var(--ink); }
.nav-links a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -3px 0 var(--signal); }

/* --------------------------------------------------------------- BUTTONS  */
/* Zero radius. Hover changes fill, never position — things this heavy
   don't bounce. */

.btn {
  display: inline-block; border: none; border-radius: 0; cursor: pointer;
  font-family: var(--font-sans); font-weight: 700; font-size: 0.94rem;
  padding: 14px 26px; transition: background 0.14s ease, color 0.14s ease;
  text-align: center;
}
.btn-signal { background: var(--signal); color: var(--signal-ink); }
.btn-signal:hover { background: var(--ink); color: var(--ground); }
.btn-solid { background: var(--ink); color: var(--ground); }
.btn-solid:hover { background: var(--signal); color: var(--signal-ink); }
.btn-ghost {
  /* --muted, not --line-hard: this control has no fill, so its border IS the
     control, and WCAG 1.4.11 wants 3:1 for that (--line-hard gives 1.83:1).
     tools/lint/contrast.py enforces the pair. */
  background: none; color: var(--ink);
  border: 2px solid var(--muted); padding: 12px 24px;
}
.btn-ghost:hover { border-color: var(--ink); background: var(--sunken); }

/* An underlined text link — the sixth and last approved use of amber.
   A REAL text-decoration rather than the inset box-shadow this used to be.
   Visually near-identical, but a box-shadow is invisible to axe's
   link-in-text-block check and, more to the point, to anyone relying on the
   underline to tell that a run of text is a link: WCAG 1.4.1 wants a link in a
   block of text distinguished by something other than color, and the color
   difference here is under the 3:1 that would otherwise excuse it. */
.link-signal {
  font-weight: 700; font-size: 0.94rem; color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--signal);
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
  padding-bottom: 2px;
}
.link-signal:hover, .link-signal:focus-visible {
  /* A full block, not the 0.9em inset fill this used to be. That version rose
     to roughly the x-height and stopped, which read as a rendering glitch —
     descenders hung below the fill and the cap-height stuck out above it.
     Painting the background and flipping the text to --signal-ink gives a
     solid highlight instead, and the 4px spread pads it out past the glyphs
     without a border-box that would shift the line. */
  background: var(--signal);
  color: var(--signal-ink);
  box-shadow: 0 0 0 4px var(--signal);
  text-decoration-color: transparent;
}

/* Unclassed links inside running text — same reasoning, lighter weight. Scoped
   with :not([class]) so it never fights a component that styles its own links. */
p a:not([class]), li a:not([class]) {
  text-decoration: underline;
  text-decoration-color: var(--signal);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
p a:not([class]):hover, li a:not([class]):hover { color: var(--signal-text); }

/* ------------------------------------------------------------------ HERO  */

.hero { border-bottom: 4px solid var(--ink); }
.hero-grid { display: grid; grid-template-columns: 1fr 280px; gap: 0; align-items: stretch; }

.hero-main {
  border-left: 6px solid var(--signal);   /* the load-bar */
  padding: 62px 40px 58px 34px;
  display: flex; flex-direction: column; gap: 20px;
}
.hero-main h1 {
  font-size: clamp(2.4rem, 6vw, 3.9rem);
  line-height: 1.0; max-width: 19ch;
}
.hero-main .dek { font-size: 1.12rem; color: var(--muted); max-width: 54ch; }
.hero-main .dek strong { color: var(--ink); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; margin-top: 6px; }

/* The load plate — borrowed from equipment rating tags. This replaced the
   photo block: a spec table says more than a stock workspace shot. */
.plate {
  background: var(--sunken);
  border-left: 1px solid var(--line);
  padding: 54px 26px 26px;
  display: flex; flex-direction: column;
}
/* The plate column is 280px, so this label has about 227px to work with at the
   set tracking — roughly 27 uppercase mono characters. Longer than that and it
   wraps to two lines, which reads as a mistake rather than a title. */
.plate-title {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.17em;
  text-transform: uppercase; color: var(--muted);
  padding-bottom: 12px; border-bottom: 2px solid var(--ink);
}
.plate dl {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline;
  gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line);
}
.plate dt {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--muted);
}
.plate dd {
  font-family: var(--font-mono); font-size: 0.86rem; font-weight: 600;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.plate-rule {
  margin-top: 20px; font-size: 0.86rem; font-weight: 600; line-height: 1.36;
  color: var(--ink); border-left: 4px solid var(--signal); padding-left: 12px;
  max-width: none;
}

/* ------------------------------------------------------- ASSURANCE STRIP  */

.strip { display: flex; flex-wrap: wrap; background: var(--surface); border-bottom: 1px solid var(--line); }
.strip > * {
  flex: 1 1 220px; min-width: 0; padding: 14px 16px;
  border-right: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--muted);
}
/* One line per cell at the design's own width and above. Cells size to their
   own content and then grow to fill, so the long clause gets the room and the
   short one stops hogging it — four equal quarters cannot fit "60-day warranty
   on delivered code" at any tracking worth reading.
   1141px because the wrap tops out at 1140: below that the strip is genuinely
   short of room, and wrapping to two lines is the honest answer rather than an
   overflow. Text budget up here is about 1010px across the four; the four
   phrases currently want ~990. */
@media (min-width: 1141px) {
  .strip > * { flex: 1 1 auto; min-width: max-content; }
}
.strip > *:last-child { border-right: none; }
.strip b { color: var(--ink); font-weight: 600; }
.strip-capped { border-top: 2px solid var(--ink); border-bottom: none; }
/* The fix list's totals row. Inside a numbered section it has 820px to work
   with, where the default 220px basis wraps four cells to 3 + 1. */
.totals { margin-top: 34px; }
.totals > * { flex: 1 1 150px; padding: 14px 16px; }

/* -------------------------------------------------------------- SECTIONS  */

.block { padding: 76px 0; border-bottom: 1px solid var(--line); }
.block-tinted { background: var(--surface); }
.block h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); margin-bottom: 18px; max-width: 20ch; }
.block .sub { font-size: 1.1rem; color: var(--muted); max-width: 64ch; margin-bottom: 44px; }

/* --------------------------------------------------------- SERVICE CARDS  */
/* Blocks of mass with a 6px foot. Card one carries the signal because the
   audit is the entry product; the other two sit on hard line. */

/* Subgrid, so the three cards share ROW tracks rather than each solving its own
   layout. Without it the prices only shared a bottom edge: card one's price
   wraps to two lines in a narrow column, so its top sat 21px above the others'
   at 1000px. Sharing the tracks makes every row line up by construction, and
   the alignment survives whatever the copy does later.
   column-gap draws the hairlines between cards; row-gap is the internal card
   spacing, which the subgrid children inherit. A card's background spans all
   four of its rows, so the parent colour only shows through vertically. */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto 1fr auto;
  column-gap: 1px; row-gap: 12px;
  background: var(--line); border-top: 1px solid var(--line);
}
/* A four-row grid, not a flex column with auto margins. The price has to land
   on the same baseline in all three cards, and `margin-top: auto` only achieves
   that while a card has slack — card one carries an extra link, so at some
   widths it filled completely and its price rose while the other two stayed
   pinned to the bottom. Fixing the rows makes alignment structural: step,
   heading, body (which absorbs the optional link), price. Every card has
   exactly these four children whatever is inside them. */
.card {
  background: var(--ground); padding: 28px 24px 0;
  display: grid; grid-template-rows: subgrid; grid-row: span 4;
  border-bottom: 6px solid var(--line-hard);
}
.card-body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.block-tinted .card { background: var(--surface); }
.card:first-child { border-bottom-color: var(--signal); }
.card h3 { font-size: 1.4rem; }
.card p { font-size: 0.98rem; color: var(--muted); }
.card .step {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--signal-text); font-weight: 500;
}
/* Row four of the card grid — the same row in every card, so the three prices
   share a baseline by construction rather than by having enough slack. */
.card .price {
  font-size: 0.8rem; font-weight: 600; color: var(--ink);
  padding: 16px 0; border-top: 1px solid var(--line);
}

/* ------------------------------------------------------------ TWO COLUMN  */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.split h3 { font-size: 1.3rem; margin-bottom: 18px; }
.split p { margin-bottom: 18px; color: var(--muted); }
.split p strong { color: var(--ink); }

.rules-plate { background: var(--sunken); border-bottom: 6px solid var(--ink); padding: 30px 28px; }
.rules-plate .plate-title { margin-bottom: 4px; }
.rules-plate ol { list-style: none; counter-reset: r; }
.rules-plate li {
  counter-increment: r; padding: 16px 0 16px 44px; border-bottom: 1px solid var(--line);
  position: relative; font-size: 0.98rem; color: var(--muted);
}
.rules-plate li:last-child { border-bottom: none; padding-bottom: 0; }
.rules-plate li::before {
  content: counter(r, decimal-leading-zero);
  position: absolute; left: 0; top: 16px;
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600;
  color: var(--signal-text); letter-spacing: 0.08em;
}
.rules-plate li strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }

/* ----------------------------------------------------------------- LISTS  */

ul.check, ul.plain { list-style: none; display: flex; flex-direction: column; gap: 14px; }
ul.check li, ul.plain li { color: var(--muted); padding-left: 30px; position: relative; max-width: 60ch; }
ul.check li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 14px; height: 3px; background: var(--signal);
}
ul.plain li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 14px; height: 1px; background: var(--line-hard);
}
ul.check li strong, ul.plain li strong { color: var(--ink); }

/* ----------------------------------------------------------------- STEPS  */
/* The audit really is a four-phase sequence, so the phase markers carry
   information. They say which day, not just which number. */

.steps { display: flex; flex-direction: column; }
.step {
  display: grid; grid-template-columns: 190px 1fr; gap: 40px;
  padding: 30px 0; border-top: 1px solid var(--line);
}
.step:first-child { border-top: 2px solid var(--ink); }
/* The day rail jumps to these, and the header would otherwise cover the phase
   heading you just asked to see. */
.step { scroll-margin-top: 96px; }
.step-when { display: flex; flex-direction: column; gap: 4px; }
.step-when .n {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--signal-text); font-weight: 500;
}
.step-when .days { font-family: var(--font-mono); font-size: 1.2rem; font-weight: 600; color: var(--ink); }
.step-when .what { font-size: 0.92rem; color: var(--muted); }
.step-body p { color: var(--muted); margin-bottom: 14px; }
.step-body p:last-child { margin-bottom: 0; }
.step-body em { font-style: italic; color: var(--ink-2); }

/* ---------------------------------------------------------- DELIVERABLES  */

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.grid-3 > div { background: var(--ground); padding: 26px 24px; display: flex; flex-direction: column; gap: 10px; }
.block-tinted .grid-3 > div { background: var(--surface); }
.grid-3 h3 { font-size: 1.15rem; }
.grid-3 p { font-size: 0.94rem; color: var(--muted); }
.grid-3 .tag {
  align-self: flex-start; font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--line-hard); padding: 3px 8px;
}

/* ================================= DOSSIER =================================
   The audit page only. It used to open with the same hero-grid-and-plate as the
   home page, then the same four-cell strip, which meant the first screen and a
   half of the two pages differed in words alone.

   So this page opens as a cover sheet instead. The metadata band sits ABOVE the
   title the way it does on a report, the title runs at document measure with no
   spec plate beside it, and the sections below are numbered in a hanging rail so
   a reader can refer to one by number. The page looks like the artifact it
   sells, which is the same argument the page already makes about publishing the
   methodology.
   ======================================================================== */

.cover { background: var(--surface); border-bottom: 4px solid var(--ink); }

/* Label over value, two lines — deliberately not .strip, which is one line and
   belongs to the home page. */
.cover-meta { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.cover-meta > div {
  flex: 1 1 160px; padding: 13px 20px; border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 3px;
}
.cover-meta > div:last-child { border-right: none; }
.cover-meta dt {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--muted);
}
.cover-meta dd {
  font-family: var(--font-mono); font-size: 0.88rem; font-weight: 600;
  color: var(--ink); font-variant-numeric: tabular-nums;
}

.cover-body { padding: 58px 0 52px; display: flex; flex-direction: column; gap: 20px; }
.cover-body h1 { font-size: clamp(2.4rem, 6vw, 3.9rem); line-height: 1.0; max-width: 17ch; }
.cover-body .dek { font-size: 1.12rem; color: var(--muted); max-width: 54ch; }
.cover-body .dek strong { color: var(--ink); }

/* The numbered rail. A hanging column at desktop; above the heading when there
   is no margin left to hang in, which is also what keeps 320px from scrolling. */
.dossier { counter-reset: docsec; }
.doc-sec { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 0; }
.doc-n {
  counter-increment: docsec;
  font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600;
  color: var(--signal-text); padding-top: 4px;
}
.doc-n::before { content: counter(docsec, decimal-leading-zero); }
.doc-body { min-width: 0; }
/* .narrow on the body rather than on the wrap: the wrap has to stay full width
   or the numbers stop lining up with each other, which is the whole device. */
.doc-body.narrow { margin-inline: 0; }

@media (max-width: 780px) {
  .doc-sec { grid-template-columns: 1fr; gap: 10px; }
}

/* The walk. Grafted from a second direction: the methodology is the one section
   with a real chronology, so the day rail tracks it while the phases scroll.
   Sticky only where there is height to be sticky in. */
.walk { display: grid; grid-template-columns: 178px minmax(0, 1fr); gap: 40px; align-items: start; }
.walk-body { min-width: 0; }
/* 78px is the sticky header (74px of nav + its 4px foot), plus room to breathe.
   Sticking any higher parks the rail underneath it. */
.day-rail { position: sticky; top: 100px; display: flex; flex-direction: column; }
.day-rail .plate-title { margin-bottom: 10px; }
.day {
  display: flex; flex-direction: column; gap: 2px;
  padding: 11px 0 11px 14px; border-left: 2px solid var(--line);
  color: var(--muted);
}
.day:hover, .day:focus-visible { border-left-color: var(--signal); color: var(--ink); }
.day .d { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; }
.day .t { font-size: 0.92rem; font-weight: 600; }

/* What each phase hands over, attached to the phase that produces it rather
   than pooled in a grid of six equal boxes further down. */
.produces {
  display: inline-flex; align-items: baseline; gap: 9px; margin-top: 14px;
  border: 1px solid var(--line-hard); padding: 6px 11px;
}
.produces span {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--muted);
}
.produces b { font-size: 0.92rem; font-weight: 600; color: var(--ink); }

@media (max-width: 940px) {
  .walk { grid-template-columns: 1fr; gap: 22px; }
  /* Static, and laid out as a row of days you can read at a glance. Sticky in a
     single column would park the rail on top of the phase it describes. */
  .day-rail { position: static; flex-direction: row; flex-wrap: wrap; gap: 0 4px; align-items: stretch; }
  .day-rail .plate-title { flex-basis: 100%; margin-bottom: 6px; }
  .day { flex: 1 1 128px; padding: 9px 0 9px 11px; }
}

/* -------------------------------------------------------------- FINDINGS  */
/* Severity spends BOTH ink and hue, and the two agree with each other:

     Critical   solid oxide fill, white label       loudest, warmest
     High       pale oxide fill, deep oxide label   same alarm hue, less of it
     Medium     no fill, neutral outline            deliberately colourless
     Low        pale steel-blue fill, blue label    coolest, quietest

   Warm reads as urgent and cool as advisory, which is why Low is blue rather
   than grey: grey said "unstyled", blue says "noted, not urgent". It is 190
   degrees off amber on the wheel — the furthest a severity colour can get from
   the one colour on this site that means ACT HERE, which is exactly what a
   lowest-severity chip must never be mistaken for.

   Medium is the one step with no hue, and that is not an oversight. The
   conventional colour for Medium is amber, and amber is spoken for. A colourless
   middle is better than a middle that lies about being a button.

   Nothing here rests on colour alone: every chip is also a word. */

.findings { border-top: 2px solid var(--ink); }
.finding {
  display: grid; grid-template-columns: 92px 1fr auto; gap: 20px;
  align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line);
}
.sev {
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.11em; text-transform: uppercase; padding: 4px 9px;
  text-align: center;
  /* The base chip is Medium: a neutral outline, full-strength label. */
  background: none; color: var(--ink); border: 1px solid var(--line-hard);
}
.sev-critical { background: var(--severity); color: var(--severity-ink); border-color: var(--severity); }
.sev-high { background: var(--severity-wash); color: var(--severity-text); border-color: var(--severity-text); }
.sev-low { background: var(--advisory-wash); color: var(--advisory); border-color: var(--advisory); }
.finding p { font-weight: 600; font-size: 0.98rem; max-width: none; }
.finding .est { font-family: var(--font-mono); font-size: 0.82rem; color: var(--muted); white-space: nowrap; }

/* -------------------------------------------------------------- CALLOUTS  */

.callout { background: var(--sunken); border-left: 6px solid var(--signal); padding: 34px 34px; }
.callout h3 { font-size: 1.6rem; margin-bottom: 16px; }
.callout p { color: var(--muted); margin-bottom: 14px; }
.callout p:last-child { margin-bottom: 0; }
.callout .math {
  font-family: var(--font-mono); font-size: 0.92rem; line-height: 1.55;
  color: var(--ink); border-top: 1px solid var(--line); padding-top: 16px; margin-top: 18px;
}

/* ----------------------------------------------------------- FIELD NOTES  */
/* A dated list, not a card grid. It should look like a log that has been
   kept — the format is the argument. */

.notes-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.notes-head h2 { margin-bottom: 0; }
.note-list { border-top: 2px solid var(--ink); }
.note {
  display: grid; grid-template-columns: 116px 1fr auto; gap: 24px;
  align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line);
}
.note:hover .note-title { box-shadow: inset 0 -3px 0 var(--signal); }
.note time { font-size: 0.78rem; color: var(--muted); letter-spacing: 0.04em; white-space: nowrap; }
.note-title { font-size: 1.05rem; font-weight: 600; color: var(--ink); padding-bottom: 2px; }
.note .kind {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--line); padding: 3px 8px; white-space: nowrap;
}

/* ------------------------------------------------------------------ BAND  */

.band { background: var(--band-bg); color: var(--band-fg); padding: 82px 0; border-bottom: 4px solid var(--signal); }
.band h2 { font-size: clamp(1.9rem, 4.4vw, 2.9rem); margin-bottom: 14px; color: var(--band-fg); max-width: 22ch; }
.band .sub { color: var(--band-muted); margin-bottom: 34px; }
.band .eyebrow { color: var(--signal); margin-bottom: 18px; display: block; }

.lead-form { max-width: 560px; display: grid; gap: 12px; }
.lead-form input, .lead-form textarea {
  width: 100%; font-family: var(--font-sans); font-size: 1rem; color: var(--band-fg);
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0; padding: 14px 16px; transition: border-color 0.14s;
}
.lead-form textarea { resize: vertical; min-height: 104px; }
.lead-form ::placeholder { color: var(--band-muted); opacity: 1; }
.lead-form input:focus, .lead-form textarea:focus { outline: none; border-color: var(--signal); }
.lead-form button { justify-self: start; margin-top: 8px; }

/* ---------------------------------------------------------------- FOOTER  */

.site-footer { background: var(--surface); padding: 26px 0; }
.foot {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 14px;
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
}
.foot a { color: var(--muted); }
.foot a:hover { color: var(--ink); box-shadow: inset 0 -2px 0 var(--signal); }
/* wrap, and let the email address break: at 320px "hello@forgewrightlabs.dev"
   is wider than the viewport on its own and dragged the page sideways. */
.foot nav { display: flex; gap: 8px 20px; flex-wrap: wrap; }
.foot a { overflow-wrap: anywhere; }

/* ------------------------------------------------------------ RESPONSIVE  */

@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-main { padding: 46px 24px 40px 22px; }
  .plate { border-left: none; border-top: 1px solid var(--line); padding: 28px 26px; }
  /* Stacked, so there is nothing to align across and subgrid has no purpose —
     three cards need twelve rows, not the parent's four. Back to per-card rows,
     with the 1px gap now drawing horizontal dividers instead of vertical ones. */
  .cards {
    grid-template-columns: 1fr; grid-template-rows: none;
    column-gap: 0; row-gap: 1px;
  }
  .card { grid-template-rows: auto auto 1fr auto; grid-row: auto; gap: 12px; }
  .grid-3 { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .step { grid-template-columns: 1fr; gap: 14px; }
  .step-when { flex-direction: row; align-items: baseline; gap: 12px; flex-wrap: wrap; }
  .block { padding: 52px 0; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  /* The header runs brand + one nav link + CTA with no room to spare. Tighten
     the CTA and close the gaps rather than dropping either — the link is the
     only nav there is, and the CTA is the whole point of the page. */
  .nav { gap: 10px; }
  .nav-links { gap: 14px; font-size: 0.85rem; }
  .nav .btn { padding: 11px 13px; font-size: 0.85rem; }
  .brand { font-size: 1.05rem; }
  .note, .finding { grid-template-columns: 1fr; gap: 6px; }
  .note .kind, .finding .est { justify-self: start; }
  .sev { justify-self: start; }
  .strip > * { flex-basis: 100%; border-right: none; border-bottom: 1px solid var(--line); }
  .strip > *:last-child { border-bottom: none; }
  .callout { padding: 26px 22px; }
  .brand span { display: none; }
}

/* Below this the brand, the link, and the CTA start wrapping onto two lines.
   The CTA wins — the audit page is still reachable from the hero and the
   first service card. */
@media (max-width: 400px) {
  .nav-links { display: none; }
}