/* ==========================================================================
   fechter — Master External Website & Landing Page Stylesheet (fechter-web.css)
   Canonical Web Engine · doubling fields · Slot Law spacing

   THEMING
   This file declares NO theme of its own. ../tokens/colors_and_type.css owns
   both [data-theme="light"] and [data-theme="dark"]; everything here reads
   --theme-*, so flipping the attribute on <html> is the whole mechanism.

   OWNERSHIP
   Every colour, radius, duration, control size and type step is var(--token).
   The only literals are the two substrate inks marked DS-GAP, needed where a
   surface paints its own ground and so must not flip with the theme.
   ========================================================================== */
@import "../tokens/colors_and_type.css";
@import "../core.css";

/* ── THE ALIAS LAYER AND THE GROUNDS — in ../core.css ─────────────────────
   The nine roles and the substrate grounds (.g-timber and friends) are the
   same in every engine and are declared once in core.css. The shared SVG
   symbol library paints with var(--ink) and var(--accent) so one library
   serves documents, decks and web pages alike — which only works because
   there is now one declaration of each.
   ──────────────────────────────────────────────────────────────────────── */
:root {
  /* Layout measures — not part of any token family, so they are stated here
     rather than borrowed from one. */
  --web-max-w:     1280px;
  /* [Decided — Rafael, 2026-09-29] Text runs the full width of its
     container; no reading cap. Kept as a name so .measure still resolves. */
  --web-reading-w: none;
}

/* ── BASE PAGE ────────────────────────────────────────────────────────────── */
html {
  background-color: var(--theme-bg);
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out);
}

body {
  background-color: var(--theme-bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
  overflow-x: hidden;
}

/* ── CONTAINER & SECTION RHYTHM ───────────────────────────────────────────── */
.web-container {
  width: 100%;
  max-width: var(--web-max-w);
  margin: 0 auto;
  padding: 0 var(--space-l);
}

/* 128 from one section to the next: --space-2xl above and below each
   [Decided — Rafael, 2026-09-30: "128 between sections"]. It was --space-4xl
   each side, 256 between two sections. */
.web-section {
  padding: var(--space-2xl) 0;
  position: relative;
}

.web-section.compact { padding: var(--space-2xl) 0; }
.web-section.flush   { padding: 0; }

/* ── THE SLOT LAW — in ../core.css ─────────────────────────────────────────
   .slots, its gaps, its doubling fields and the .span rungs are shared by all
   three engines. Only this engine's reflow is stated below.
   ──────────────────────────────────────────────────────────────────────── */

@media (max-width: 992px) {
  .slots.f-4 { grid-template-columns: repeat(2, 1fr); }
  .slots.f-8 { grid-template-columns: repeat(4, 1fr); }
  .span-4, .span-2, .span-1 { grid-column: span 4; }
  .span-8 { grid-column: span 4; }
}

@media (max-width: 640px) {
  .slots.f-2, .slots.f-4, .slots.f-8 { grid-template-columns: 1fr; }
  .span-8, .span-4, .span-2, .span-1 { grid-column: span 1; }
}

/* ── TYPE ─────────────────────────────────────────────────────────────────
   Every size is a step of the design-system ramp, or a clamp between two of
   them. No half-pixel sizes, and nothing sized by eye.
   ──────────────────────────────────────────────────────────────────────── */
.section-header { margin-bottom: var(--space-2xl); }
/* A header is 64 above what follows, once [Decided — Rafael, 2026-09-30: "i
   donno why the space between the header and the cards need to be that big"].
   Inside a .stack the stack's gap is that 64, so the header's own margin goes;
   and a title closing the header keeps no margin of its own below it. Before,
   the three added up to 144. */
.stack > .section-header { margin-bottom: 0; }
.section-header > :last-child { margin-bottom: 0; }

/* A CENTRED SECTION TAKES THE FULL WIDTH.
   [Decided — Rafael, 2026-09-18] "when you have a section just with a
   headline and text center it and make it full width … as you always do it
   with this kind of text is wrong." This block was capped at the reading
   measure, 68ch, so a centred section sat as a narrow column in the middle of
   a wide page — half the frame, or 70% of it, never the whole. A centred
   header now spans the container, and its ledes balance their lines so a
   wide paragraph does not end on a stub. The measure still governs text that
   sits beside something else. */
.section-header.center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.section-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  color: var(--ink-3);
  margin-bottom: var(--space-xs);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

/* Accent only when the eyebrow IS the section's one element. */
.section-eyebrow.accent { color: var(--accent); }

/* In the page's ink when the eyebrow names who or when — a name, a year, its
   icon — rather than labelling a section [Decided — Rafael, 2026-09-29: "the
   names, year and icon in white"]. */
.section-eyebrow.ink { color: var(--ink); }

.section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(var(--text-h3), 3.8vw, var(--text-h2));
  line-height: 1.15;
  color: var(--ink);
  /* pretty, not balance: the line runs to the right edge of the box and only
     keeps a last word from standing alone. Balance evened the lines out and
     left the right side of the box empty [Decided — Rafael, 2026-09-30: "you
     just did not use the full box width on the right side"]. */
  text-wrap: pretty;
  margin-bottom: var(--space-s);
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(var(--text-h2), 5.5vw, var(--text-h1));
  line-height: 1.05;
  color: var(--ink);
  text-wrap: pretty;   /* as .section-title: the full width of the box */
  margin-bottom: var(--space-s);
}

/* THE CHAPTER OPENER — a heading over a group of sections, the page's biggest
   type. [Decided — Rafael, 2026-09-29: "the robot in our biggest font token and
   make the gap slightly closer"] The section carrying it gives up its bottom
   padding, so the chapter's first section follows by its own top padding. */
.web-section.chapter { padding: var(--space-4xl) 0 0; }

.chapter-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(var(--text-h1), 9vw, var(--text-h-display));
  line-height: 1;
  letter-spacing: var(--tracking-display);
  color: var(--ink);
  margin: 0;
}

.section-lede {
  font-family: var(--font-body);
  font-size: clamp(var(--text-body), 1.4vw, var(--text-lede));
  line-height: 1.6;
  color: var(--ink-2);
  max-width: var(--web-reading-w);
}

.section-header.center .section-lede {
  margin: 0 auto;
  max-width: none;
  text-wrap: balance;
}

/* HEADLINE TO BODY IS ONE WIDE RUNG; BODY TO BODY IS ONE EMPTY LINE.
   [Decided — Rafael, 2026-09-30: "between a headline and the body something
   like 64 … between body just no spacing at all, just a double next line"]
   A section title followed by its lede stands --space-2xl above it; a second
   lede follows the first by one line of its own height, as a blank line in
   running text would. Not inside a .stack, whose own gap already separates. */
.web-section :is(.section-title, .hero-title):has(+ .section-lede) { margin-bottom: var(--space-2xl); }
:not(.stack) > .section-lede + .section-lede { margin-top: 1lh; }

/* A LINK IN BODY TEXT IS THE TEXT, UNDERLINED — never blue.
   [Decided — Rafael, 2026-09-30: "'see the floor plans' underlined and with a hyperlink"] */
.section-lede a:not([class]) { color: inherit; text-decoration: underline; }
.section-lede a:not([class]):hover { color: var(--ink); }

.statement {
  font-family: var(--font-display);
  font-weight: 400;  /* as .section-title: on a heading element it drew bold */
  font-size: clamp(var(--text-h3), 2.4vw, var(--text-h2));
  line-height: 1.3;
  color: var(--ink);
  letter-spacing: var(--tracking-display);
  text-wrap: pretty;   /* as .section-title: the full width of the box [Rafael, 2026-09-30] */
}

/* ── STICKY GLASS HEADER ──────────────────────────────────────────────────── */
.web-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-bottom: var(--theme-rim-subtle);
  transition: background-color var(--dur) var(--ease-out);
}

.web-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--space-2xl);
}

.web-brand {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.lockup {
  --lk-cap: var(--text-lede);
  display: inline-flex;
  align-items: flex-start;
  gap: calc(var(--lk-cap) * 0.4286);
}

.lockup svg.mk {
  width: var(--lk-cap);
  height: var(--lk-cap);
  flex: none;
}

.lockup svg.wm {
  height: calc(var(--lk-cap) * 1.0192813);
  width: auto;
  display: block;
}

.nav-links-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-l);
}

/* A nav item is muted until it is wanted. --nav-item-fg and its -hover pair
   were referenced here and defined nowhere, so the colour fell through to
   inherit and only looked correct by accident. Two tokens for one rule does
   not earn its place — the engine's inks already say this. */
.nav-link {
  font-family: var(--font-ui);
  font-size: var(--text-body);
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.nav-link:hover { color: var(--ink); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-s);
}

/* ── BUTTONS AND THE THEME TOGGLE — in ../core.css ────────────────────────
   [Derived — from preview.html, .btn and its modifiers]

   THIS FILE SHIPPED A SECOND, DIFFERENT .btn. It was a pill — --radius-full,
   --text-body, letter-spacing 0.04em — with .btn-primary and .btn-secondary
   restating fill, border and shadow. preview.html's .btn is --radius-s at
   --text-caption and composes its surface from the same three the tiers use.
   Both were called .btn, and this file's copy won simply by being imported
   second. CLAUDE.md settles that: what preview.html renders is correct.

   WHAT THIS CHANGES ON SCREEN: web buttons lose the pill corner and take the
   system's 8px one, and drop from 16px to 12px type. That is the point — a
   button on a landing page and a button in a document are now the same
   control.

   .btn-primary  is now  .btn .btn-highlight
   .btn-secondary is now .btn .btn-hairline
   .tab-btn      is now  .btn .btn-plain     (state via .active)
   ──────────────────────────────────────────────────────────────────────── */

/* ── HERO ─────────────────────────────────────────────────────────────────
   Grounds are authored at 16:9. On a frame wider than 16:9 the flat ground
   is extended rather than cover-cropped, so the ring keeps its geometry.
   ──────────────────────────────────────────────────────────────────────── */
.web-hero-vector {
  position: relative;
  overflow: hidden;
  padding: calc(var(--space-4xl) + var(--space-2xl)) 0 var(--space-4xl);
}

.web-hero-vector svg.hero-gnd {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.hero-body {
  position: relative;
  z-index: 2;
}

/* ── IMAGE TILES ──────────────────────────────────────────────────────────
   A tile never negotiates its size with its image: the footprint is fixed by
   the field, the image crops to fill it. Two shapes — 1:1 and 1:2, in either
   orientation. .wide is 16:9 and echoes a slide frame; it sits outside the
   two-shape rule, so use it sparingly.
   ──────────────────────────────────────────────────────────────────────── */
.imgcard {
  /* THE REST OF THE FAMILY IS IN ../core.css, the surface included. Only the
     shadow is this engine's own: a web tile floats above the ground. The
     deck's tile sits on it; see fechter-deck.css. */
  box-shadow: var(--shadow-card);
}

/* ── THE BAND — A RENDER THE WIDTH OF THE PAGE ────────────────────────────
   [Decided — Rafael, 2026-09-28] "way bigger images". Inside the container
   the biggest picture is already a tile: a .card.u-4x2 is the whole field at
   2:1. The band is that same 2:1 carried past the container to the window's
   edges, for the one picture on a page that should fill it.

   [Proposed — Claude, 2026-09-28] It is a SECTION, placed between sections
   and never inside .web-container, so it spans the page by being outside the
   column rather than by pulling itself out of it — no 100vw, and so nothing
   under the scrollbar. 2:1 because that is the shape the common measure
   allows and the u-4x2 tile already has; the band is the tile at page width.
   Its captions go back into the container below it, as bare tiles on the
   field (.card.card-bare.u-1x1 in ../components/card.css). */
.web-band {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  background: var(--well-bg);
}

.web-band > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── NUMBERED STEPS ───────────────────────────────────────────────────────── */
.steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  list-style: none;
  counter-reset: step-counter;
}

.steps li {
  counter-increment: step-counter;
  position: relative;
  padding-left: var(--space-2xl);
  font-size: var(--text-body);
  color: var(--ink-2);
}

.steps li::before {
  content: counter(step-counter);
  position: absolute;
  left: 0;
  top: 0;
  width: var(--space-l);
  height: var(--space-l);
  border-radius: var(--radius-full);
  background: var(--well-bg);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  font-weight: 700;
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.steps li b {
  color: var(--ink);
  font-weight: 600;
}

/* ── TELEMETRY METERS ─────────────────────────────────────────────────────── */
.meters {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.meter {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2xs) var(--space-s);
  align-items: center;
}

.meter .m-l {
  font-size: var(--text-body);
  color: var(--ink);
  font-weight: 500;
}

.meter .m-s {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-label);
  color: var(--ink-3);
  text-align: right;
}

.meter .track {
  grid-column: 1 / 3;
  height: var(--space-xs);
  border-radius: var(--radius-full);
  background: var(--well-bg);
  border: 1px solid var(--line-subtle);
  overflow: hidden;
}

.meter .fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--accent);
}

/* ── ASIDE NOTE ───────────────────────────────────────────────────────────── */
.note {
  font-size: var(--text-body);
  line-height: 1.6;
  border-left: 2px solid var(--accent);
  padding: var(--space-xs) 0 var(--space-xs) var(--space-s);
  color: var(--ink-2);
  background: var(--well-bg);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
}

.note b { color: var(--ink); }

/* ── CARDS ────────────────────────────────────────────────────────────────── */
.bento-card {
  border-radius: var(--radius-s);
  border: var(--border-w) solid var(--line);
  background: var(--panel-bg);
  padding: var(--space-l);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.bento-card.flush { padding: 0; }

/* ── THE THREE-TIER SUBSTANCE SYSTEM ──────────────────────────────────────
   law/fechter-material-design-system.html (deleted 2026-09-04) §06. The rules below are that
   section's own stylesheet, with one deliberate difference: the three
   backgrounds go through the engine's substrate aliases rather than
   --theme-card / --theme-glass / --theme-well directly, because .g-timber
   repoints those aliases and a tier inside a timber substrate must follow it.
   The rim and the gradient are taken from the law unchanged — nothing
   overrides them.

   THE BLUR IS --glass-blur, AND IT IS 8px, NOT 28px.
   [Derived — from colors_and_type.css, "GLASS — ONE FACT, NOT TWO",
   [Decided — Rafael, 2026-09-01], and from preview.html, which draws every
   glass surface with blur(var(--glass-blur)).]

   This comment used to read "The blur is 28px because the law says 28px",
   and the four declarations under it were hardcoded to match. The law does
   say 28px. The token file overrode it three days later and names that exact
   number as the value it was replacing: "28px, the old value, erased the
   ground entirely." 16px "read as frosted rather than transmissive"; 8px was
   chosen against the §14 vector grounds, whose arcs are wide enough that 8px
   softens them instead of averaging them away.

   So the citation was true and stale at once — which is the failure mode a
   law document creates when the system moves and the citation does not.
   Repointed at the token 2026-09-04. THIS MOVED PIXELS: every glass surface
   in this engine and .tier-2-glass in fechter-doc.css went from a 28px blur
   to an 8px one. That is the correction, not a side effect of one.

   The blur is still not on the U ladder and is not meant to be: it is an
   optical property, not a measure. It just is not this file's number.

   A GLASS SURFACE CARRIES AN OBLIGATION, and the same block states it: a
   blur only means something over a ground that varies. Blurring a flat fill
   returns that fill. Seven of glass's nine uses sat on flat grounds, which is
   why it never read as glass. Put it over a ground with something in it, or
   use a plate.
   ──────────────────────────────────────────────────────────────────────── */
.tier-1-plate {
  background: var(--panel-bg);
  border: var(--theme-rim);
}

.tier-2-glass {
  background: var(--glass-bg);
  background-image: var(--theme-glass-gradient);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: var(--theme-rim);
}

.tier-3-well {
  background: var(--well-bg);
  border: var(--theme-rim-subtle);
}

/* .bento-head was .card-head until 2026-09-04, which src/components/card.css
   owns. [Decided — Rafael] "the design system preview.html wins" — the card
   component names the slots of a card, and a bento tile's header is not one
   of them. .card-head .meta below was unscoped, so it reached the component's
   .card-head as well as this one. Same fault as .field, one file over. */
.bento-card .bento-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-s);
}

.chip {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-full);
  /* --card-chip-bg came from the hand-rolled :root blocks the rebuild exists
     to delete, and was never defined here. A chip reads as an inset on its
     plate, which is what the well already is. */
  background: var(--well-bg);
  border: 1px solid var(--line);
  color: var(--ink-2);
}

.chip.accent {
  color: var(--accent);
  border-color: var(--accent);
}

.bento-card h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-h3);
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: var(--space-xs);
}

.bento-card p {
  font-size: var(--text-body);
  color: var(--ink-2);
  line-height: 1.55;
}

.bento-head .meta {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-label);
  color: var(--ink-3);
}

/* ── FIGURE PAIRS ─────────────────────────────────────────────────────────
   A figure is content, not a brand element, so an accented one does not
   spend the section's budget. (brand-in-use.html lists that reading as an
   open question — until it is settled, accent at most one per surface.)
   ──────────────────────────────────────────────────────────────────────── */
.figures {
  display: flex;
  gap: var(--space-l);
  margin-top: var(--space-l);
}

.figures .fig-v {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.figures .fig-v.acc { color: var(--accent); }

.figures .fig-l {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-label);
  color: var(--ink-3);
  margin-top: var(--space-2xs);
}

/* The large figures: when the numbers are the section's subject — a price, a
   count — not a footnote under a card. The value takes the hero title's size;
   the row wraps, so on a phone a value moves to its own line instead of
   breaking. [Proposed — Claude, 2026-10-10: the owner page's price, after
   Rafael asked for it "visible and bigger"] */
.figures.big {
  flex-wrap: wrap;
  gap: var(--space-l) var(--space-2xl);
  margin-top: 0;
}

.figures.big .fig-v { font-size: clamp(var(--text-h2), 5.5vw, var(--text-h1)); }
.figures.big .fig-l { margin-top: var(--space-xs); }

/* ── THE CREST ON A PAGE ──────────────────────────────────────────────────
   The crest is ceremonial: rare, one colour [Decided — Rafael, 2026-10-09].
   On a web page it fills one slot of a .slots.f-2, square, its text in the
   other; on a phone the slots stack and it stands above its text. At most one
   per page. It sits in a <div> that is the slot: a slot child carries half
   the gutter as its margin, and an svg at 100% on top of that margin ran into
   the gutter and touched the text. [Proposed — Claude, 2026-10-10: the
   placement and the size]
   ──────────────────────────────────────────────────────────────────────── */
.crest-mark {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  color: var(--ink);
}

.panel-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-h3);
  line-height: 1.25;
  color: var(--ink);
  margin: var(--space-s) 0 var(--space-xs);
}

/* ── TAB ENGINE ───────────────────────────────────────────────────────────── */
.tab-engine { margin-top: var(--space-l); }

.tab-nav-pills {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  overflow-x: auto;
  padding-bottom: var(--space-s);
  scrollbar-width: none;
}

.tab-nav-pills::-webkit-scrollbar { display: none; }

.tab-btn {
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  min-height: var(--control-height-sm);
  padding: var(--control-pad-md);
  font-family: var(--font-ui);
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

.tab-btn:hover {
  color: var(--ink);
  border-color: var(--ink-3);
}

.tab-btn.active {
  background: var(--accent);
  color: var(--creme-bright);  /* the law's pure white — a material token, so it does not flip with the theme */
  border-color: var(--accent);
}

.tab-content-panel {
  display: none;
  background: var(--panel-bg);
  border: var(--border-w) solid var(--titanium-base);
  border-radius: var(--radius-s);
  padding: var(--space-l);
  margin-top: var(--space-s);
  box-shadow: var(--shadow-card);
}

.tab-content-panel.active {
  display: block;
  animation: fadeIn var(--dur) var(--ease-out);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(var(--space-2xs)); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── TEXT INPUTS ──────────────────────────────────────────────────────────
   IT WAS CALLED .field UNTIL 2026-09-04, AND THAT WAS A COLLISION.
   [Decided — Rafael, 2026-09-04] "The design system preview.html wins."

   src/components/field.css declares `.field` as THE LAYOUT PRIMITIVE — a
   grid with container-type: inline-size, the thing every tile stands on.
   preview.html uses it 26 times and styles no form input at all. This file
   declared the same class name as a text box: a min-height, a padding and a
   well background.

   NOTHING LINKED BOTH, WHICH IS THE ONLY REASON IT NEVER FIRED. The moment a
   web page stood on the field — the stated direction for every surface — its
   inputs would have become grids, or the field would have grown a well
   background and a min-height. A latent collision between the layout
   primitive and a form control is not a name clash to live with.

   The primitive keeps the name. It is called "the field" in law/the-field.html,
   in the component, in the test and on the foundation page; the input is the
   interloper, and `.input` says what it is. .btn is next to it and is named
   the same way.

   MIGRATION: three <input class="field"> in website-starter.html, all in this
   folder. management/brand/fechter-brand-book.html also writes
   class="field" on two inputs, but it links no stylesheet at all and declares
   its own .field, so it is untouched by this.
   ──────────────────────────────────────────────────────────────────────── */
.input {
  width: 100%;
  min-height: var(--control-height-md);
  padding: var(--control-pad-input);
  border-radius: var(--radius-s);          /* the container corner is a fixed 8 */
  border: var(--border-w) solid var(--line);
  background: var(--well-bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--text-body);
  transition: border-color var(--dur-fast) var(--ease-out);
}

.input::placeholder { color: var(--ink-3); }

.input:focus {
  outline: none;
  border-color: var(--accent);
}

/* THE FORM FILLS WHAT HOLDS IT.
   [Decided — Rafael, 2026-09-22] It used to cap itself at 55ch and centre,
   so inside any panel wider than that the fields floated as a narrow column
   with empty margins either side — the contact page's form panel showed it.
   How wide a form reads is the container's decision (.measure, a slot, a
   card), exactly as it is for text; the form only stacks its controls. */
.form-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  width: 100%;
}

/* ── TABLE ────────────────────────────────────────────────────────────────── */
.web-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-s);
  background: var(--panel-bg);
}

table.web-matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-body);
  text-align: left;
}

table.web-matrix th {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  color: var(--ink-3);
  background: var(--well-bg);
  padding: var(--space-s) var(--space-l);
  border-bottom: 1px solid var(--line);
}

table.web-matrix td {
  padding: var(--space-s) var(--space-l);
  border-bottom: 1px solid var(--line-subtle);
  color: var(--ink-2);
}

table.web-matrix tr:last-child td { border-bottom: none; }
table.web-matrix tr:hover td { background: var(--well-bg); }

table.web-matrix td.lead-col {
  font-weight: 600;
  color: var(--ink);
}

/* ── MANIFESTO BANNER ─────────────────────────────────────────────────────── */
.manifesto-banner {
  background: var(--timber-base);
  border: var(--border-w) solid var(--titanium-base);
  border-radius: var(--radius-s);
  padding: var(--space-3xl) var(--space-2xl);
  color: #f7f3ec;                             /* DS-GAP Ivory Plate ink */
  position: relative;
  overflow: hidden;
}

.manifesto-banner .glow-cove {
  position: absolute;
  top: calc(var(--space-4xl) * -1);
  right: calc(var(--space-4xl) * -1);
  width: calc(var(--space-4xl) * 4);          /* 512 — the cube slot */
  height: calc(var(--space-4xl) * 4);
  background: var(--theme-glass-gradient);
  pointer-events: none;
}

.manifesto-banner h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(var(--text-h3), 3.2vw, var(--text-h2));
  line-height: 1.25;
  margin-bottom: var(--space-s);
}

/* ── FOOTER ───────────────────────────────────────────────────────────────
   [Decided — Rafael, 2026-09-29] After Anthropic's: the mark alone and large,
   column heads in Inter at body size in the ink, the links a step softer with
   air between them, the line about us and the small print at the foot. It
   follows the last section directly, on its own plain ground — never a
   material, because what stands above it differs page to page.
   ──────────────────────────────────────────────────────────────────────── */
.web-footer {
  background: var(--well-bg);
  border-top: var(--border-w) solid var(--line);
  padding: var(--space-3xl) 0 var(--space-2xl);
}

.footer-mark {
  display: block;
  width: var(--text-h2);
  height: var(--text-h2);
}

.footer-brand .brand-p {
  font-size: var(--text-body);
  color: var(--ink-2);
  margin-top: var(--space-s);
  max-width: 36ch;
}

.footer-col h5 {
  font-family: var(--font-ui);
  font-size: var(--text-body);
  font-weight: 600;
  letter-spacing: var(--tracking-none);
  color: var(--ink);
  margin-bottom: var(--space-s);
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.footer-links a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: var(--text-body);
  transition: color var(--dur-fast) var(--ease-out);
}

.footer-links a:hover { color: var(--ink); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  flex-wrap: wrap;
  padding-top: var(--space-l);
  margin-top: var(--space-2xl);
  border-top: var(--border-w) solid var(--line-subtle);
  font-size: var(--text-body);
  color: var(--ink-2);
  font-family: var(--font-ui);
}
.footer-bottom a { color: inherit; text-decoration: none; }
.footer-bottom a:hover { color: var(--ink); }
.footer-bottom .small { display: flex; gap: var(--space-l); flex-wrap: wrap; }

/* ── LAYOUT UTILITIES ─────────────────────────────────────────────────────
   Enough structure that a page never needs an inline style. Every gap is a
   rung of the ladder, and the grouping rule holds: the gap inside a group is
   smaller than the gap around it.
   ──────────────────────────────────────────────────────────────────────── */
.stack        { display: flex; flex-direction: column; gap: var(--space-l); }
.stack.tight  { gap: var(--space-s); }
.stack.loose  { gap: var(--space-2xl); }
.stack.center { align-items: center; text-align: center; }
.mid          { align-self: center; }
.measure      { max-width: var(--web-reading-w); }
.on-well      { background: var(--well-bg); }

/* ── THE SCROLLBAR ─────────────────────────────────────────────────────────
   [Derived — from preview.html, ::-webkit-scrollbar] preview.html stated it
   first and said it "moves to src/engines/ once a second surface wants it";
   the website is that surface [Rafael, 2026-09-30: "the scroll bar to be the
   same as in preview.html"]. Half a unit wide, the one radius, titanium,
   lifting through the ink ramp on hover. @supports hands each browser exactly
   one spelling — where both are understood scrollbar-width wins and pins the
   bar to the browser's own "thin". */
@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--theme-ink-3) transparent;
  }
}
::-webkit-scrollbar {
  width: var(--space-xs);
  height: var(--space-xs);
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--theme-ink-3);
  border-radius: var(--radius-s);
  transition: background var(--dur-fast) var(--ease-out);
}
::-webkit-scrollbar-thumb:hover { background: var(--theme-ink-2); }