/* ==========================================================================
   WEB BRUTALISM — one page. Loaded on a/web-brutalism.html only.

   Founder, 2026-09-26: the page is Annie's Claude artifact, shell excepted.
   The raw document: one column between two 4px rules, every block closed by
   a 4px rule and labelled with its element. System stack only, black on
   white, the browser's own link colours, no radius, no shadow, no easing.
   The shell (rail, top bar, community drawer) is never restyled: every rule
   here is scoped to .wb-page main, .wb-doc, .wb-rec, or the board
   (.wb-page .gm--web-brutalism).

   THE BOARD (grammar/boards.ts, styled by grammar.css) keeps its content,
   its values and its behaviour. Only its frame is restyled here: it becomes
   the column's next block (same width, same 4px side and bottom rules, the
   same element label, the same uppercase heading jump), its element labels
   take the page's label face, and its disclosures get 44px targets.

   Four colours, declared first so the page's own palette reads them first:
   ground #FFFFFF, ink #000000, link #0000EE (9.4:1 on white), visited
   #551A8B (9.9:1). White on ink 21:1. Nothing between. The radius demo's
   counter-example uses #ddd and rgba, off the palette on purpose.

   Type jumps, never steps: 16 body, 22 lead, 48 section heads, 128 the name.
   Kept apart from Neo-Brutalism: no fills but black, no offset shadow, no
   designed buttons; controls are the browser's own.
   ========================================================================== */
.wb-page {
  --wb-ground: #FFFFFF;
  --wb-ink: #000000;
  --wb-link: #0000EE;
  --wb-visited: #551A8B;
  --wb-rule: 4px;
  --wb-pad: 24px;
  --wb-face: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --wb-mono: ui-monospace, Menlo, Consolas, monospace;
}
.wb-page main { background: var(--wb-ground); color: var(--wb-ink); }

/* No radius, no shadow, no easing, anywhere on the page's own furniture. */
.wb-doc *, .wb-doc *::before, .wb-doc *::after { border-radius: 0; box-shadow: none; transition: none; }

/* The shell's scroll reveal would ease the record and the board in. This
   register refuses easing: both are present, never arriving. (Outranks
   site.css's .js-reveal rule.) */
.wb-page main > section.wb-rec, .wb-page main > section.gm--web-brutalism { opacity: 1; transform: none; transition: none; will-change: auto; }

/* ---- the column ---------------------------------------------------------- */
.wb-doc {
  max-width: 1100px; margin: 0 auto;
  border-left: var(--wb-rule) solid var(--wb-ink); border-right: var(--wb-rule) solid var(--wb-ink);
  font: 400 16px/1.5 var(--wb-face); color: var(--wb-ink); background: var(--wb-ground);
  font-synthesis: style weight;
}
.wb-doc--hero { border-top: var(--wb-rule) solid var(--wb-ink); }
.wb-blk { position: relative; padding: calc(var(--wb-pad) + 8px) var(--wb-pad) var(--wb-pad); border-bottom: var(--wb-rule) solid var(--wb-ink); }
/* The element label: what this block is, in the markup. */
.wb-blk::before, .wb-page .gm--web-brutalism::before {
  content: "<" attr(data-tag) ">";
  content: "<" attr(data-tag) ">" / "";
  position: absolute; top: 0; right: 0; padding: 2px 6px;
  background: var(--wb-ink); color: var(--wb-ground); font: 700 12px/1.4 var(--wb-mono);
}
.wb-doc p { margin: 0 0 12px; max-width: 70ch; }
.wb-doc ul, .wb-doc ol { margin: 0 0 12px; padding-left: 1.6em; max-width: 70ch; }
.wb-doc li + li { margin-top: 6px; }
.wb-doc b { font-weight: 900; }
.wb-doc a { color: var(--wb-link); text-decoration: underline; }
.wb-doc a:visited { color: var(--wb-visited); }
.wb-doc a:hover { background: var(--wb-ink); color: var(--wb-ground); }
.wb-doc :focus-visible, .wb-page .gm--web-brutalism :focus-visible { outline: 4px solid var(--wb-ink); outline-offset: 0; }
.wb-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wb-small { font-size: 14px; }

/* ---- type: it jumps ------------------------------------------------------ */
.wb-h1 { margin: 0; font: 900 clamp(48px, 12vw, 128px)/.9 var(--wb-face); letter-spacing: -.04em; text-transform: uppercase; overflow-wrap: anywhere; }
.wb-h2 { margin: 0 0 12px; font: 900 clamp(32px, 5vw, 48px)/1 var(--wb-face); text-transform: uppercase; overflow-wrap: anywhere; }
.wb-h3 { margin: 24px 0 8px; font: 900 22px/1.2 var(--wb-face); text-transform: uppercase; }
.wb-def { margin: 14px 0 0 !important; font-size: 22px; font-weight: 700; line-height: 1.3; }
.wb-lead { font-size: 22px; font-weight: 700; line-height: 1.3; }
.wb-shout { display: inline-block; margin: 14px 0 0 !important; padding: 10px 14px; background: var(--wb-ink); color: var(--wb-ground); font: 900 clamp(18px, 2.4vw, 28px)/1.2 var(--wb-face); text-transform: uppercase; }
.wb-shout--p { display: block; margin: 0 0 12px !important; font-size: 18px; text-transform: none; }
.wb-n { display: inline-block; padding: 0 10px; background: var(--wb-ink); color: var(--wb-ground); }

/* ---- one corner: the only radius and the only shadow on the page -------- */
.wb-radctl { display: flex; flex-wrap: wrap; width: fit-content; max-width: 100%; margin: 12px 0; padding: 0; border: 2px solid var(--wb-ink); }
.wb-r-lab { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-right: 2px solid var(--wb-ink); font-weight: 700; cursor: pointer; }
.wb-r-lab:last-of-type { border-right: 0; }
.wb-r-in { margin: 0; }
.wb-r-lab:focus-within { outline: 4px solid var(--wb-ink); outline-offset: 0; }
.wb-r-in:focus-visible { outline: 0; }
.wb-spec { width: min(420px, 100%); margin: 0 0 12px; padding: 24px; border: 4px solid var(--wb-ink); background: var(--wb-ground); font-size: 20px; }
.wb-blk:has(.wb-r-in--8:checked) .wb-spec { border-radius: 8px; }
.wb-blk:has(.wb-r-in--24:checked) .wb-spec { border-radius: 24px; border: 1px solid #ddd; box-shadow: 0 8px 24px rgba(0, 0, 0, .12); font-family: Georgia, serif; }
.wb-rv { display: none; }
.wb-blk:has(.wb-r-in--0:checked) .wb-rv--0,
.wb-blk:has(.wb-r-in--8:checked) .wb-rv--8,
.wb-blk:has(.wb-r-in--24:checked) .wb-rv--24 { display: block; }

/* ---- type jumps --------------------------------------------------------- */
.wb-jumps { display: grid; grid-template-columns: 1fr 1fr; border: 2px solid var(--wb-ink); }
.wb-jumps > div { min-width: 0; padding: 14px; overflow: hidden; }
.wb-jumps > div + div { border-left: 2px solid var(--wb-ink); }
.wb-jumps p { margin: 10px 0 0; }
.wb-jn { margin: 0 !important; }
.wb-jn span { display: inline-block; margin-right: 8px; font-weight: 900; line-height: 1; vertical-align: baseline; }
.wb-jn .wb-jn__max { font-size: clamp(64px, 10vw, 128px); }

/* ---- the pair: the same specimen Utilitarian shows ---------------------- */
.wb-page .pairspec { max-width: 520px; margin: 0 0 12px; padding: 16px; border: 4px solid var(--wb-ink); }
.wb-page .pairspec h3 { margin: 0 0 6px; font-size: 28px; font-weight: 900; }
.wb-page .pairspec p, .wb-page .pairspec ul { margin: 0; }
.wb-page .pairspec ul { margin-top: 6px; }

/* ---- the record --------------------------------------------------------- */
.wb-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 12px; border-top: 2px solid var(--wb-ink); border-left: 2px solid var(--wb-ink); }
.wb-meta > div { min-width: 0; padding: 10px; border-right: 2px solid var(--wb-ink); border-bottom: 2px solid var(--wb-ink); }
.wb-meta .wb-meta__wide { grid-column: 1 / -1; }
.wb-meta dt { font-size: 13px; font-weight: 900; text-transform: uppercase; }
.wb-meta dd { margin: 0; overflow-wrap: anywhere; }
.wb-k { display: inline-block; padding: 0 6px; border: 2px solid var(--wb-ink); font: 700 13px/1.5 var(--wb-mono); }
.wb-area { text-transform: uppercase; }
.wb-rules li { padding-bottom: 8px; border-bottom: 2px solid var(--wb-ink); }
.wb-rules li + li { margin-top: 8px; }
.wb-conf li + li { margin-top: 12px; }

/* Raw tables. A wide table scrolls inside its own region, never the page. */
.wb-tw { max-width: 100%; overflow-x: auto; margin: 0 0 12px; }
.wb-tbl { border-collapse: collapse; min-width: 100%; }
.wb-tbl th, .wb-tbl td { padding: 6px 10px; border: 2px solid var(--wb-ink); text-align: left; vertical-align: top; }
.wb-tbl thead th { background: var(--wb-ink); color: var(--wb-ground); font-size: 13px; font-weight: 900; text-transform: uppercase; }
.wb-tbl p { margin: 0; }
.wb-tbl p + * { margin-top: 6px; }
.wb-tbl--dims { min-width: 560px; }
.wb-pal { display: flex; flex-wrap: wrap; gap: 8px; }
.wb-pal span { display: grid; gap: 2px; font: 700 12px/1.4 var(--wb-mono); }
.wb-pal i { display: block; width: 64px; height: 40px; border: 2px solid var(--wb-ink); }

/* Tap targets: every navigational link holds a 44px line. */
.wb-doc a.wb-tap { display: inline-flex; align-items: center; min-height: 44px; line-height: 1.3; font-weight: 700; }
.wb-use { list-style: square; }
.wb-use li + li { margin-top: 0; }
.wb-use a.wb-tap { text-transform: uppercase; }

/* ==========================================================================
   THE BUILD WITH IT BOARD, as the column's next block. Frame only; every
   specimen value stays on the grammar's tokens.
   ========================================================================== */
.wb-page .gm.gm--web-brutalism {
  position: relative; max-width: 1100px; margin: 0 auto;
  padding: calc(var(--wb-pad) + 8px) var(--wb-pad) var(--wb-pad);
  border-width: 0 var(--wb-rule) var(--wb-rule); border-color: var(--wb-ink);
}
.wb-page .gm--web-brutalism::before { content: "<section>"; content: "<section>" / ""; }
.wb-page .gm--web-brutalism .gm__head { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 24px; }
.wb-page .gm--web-brutalism .gm__title { grid-row: auto; font: 900 clamp(32px, 5vw, 48px)/1 var(--wb-face); text-transform: uppercase; }
.wb-page .gm--web-brutalism .gm__lede { font-size: 22px; font-weight: 700; line-height: 1.3; max-width: 70ch; }
.wb-page .gm--web-brutalism .gm__key, .wb-page .gm--web-brutalism .gm__get { font-size: 14px; opacity: 1; }
.wb-page .gm--web-brutalism a:hover { background: var(--wb-ink); color: var(--wb-ground); }
.wb-page .gm--web-brutalism .gmb-doc::before,
.wb-page .gm--web-brutalism .gmb-f::before,
.wb-page .gm--web-brutalism .gmb-card::before { font: 700 12px/1.4 var(--wb-mono); padding: 2px 6px; }
.wb-page .gm--web-brutalism .gm-f__name { font-size: 22px; font-weight: 900; text-transform: uppercase; }
.wb-page .gm--web-brutalism .gmb-nav a { display: inline-block; padding: 12px 0; }
.wb-page .gm--web-brutalism .gm-more summary { display: list-item; min-height: 44px; padding: 10px 0; line-height: 24px; }
.wb-page .gm--web-brutalism .gm-more, .wb-page .gm--web-brutalism .gm-gap, .wb-page .gm--web-brutalism .gm-f__note { opacity: 1; }

/* ---- responsive --------------------------------------------------------- */
@media (max-width: 700px) {
  .wb-page { --wb-pad: 16px; }
  .wb-jumps, .wb-meta { grid-template-columns: minmax(0, 1fr); }
  .wb-jumps > div + div { border-left: 0; border-top: 2px solid var(--wb-ink); }
  .wb-radctl { flex-direction: column; width: 100%; }
  .wb-r-lab { border-right: 0; }
  .wb-r-lab + .wb-r-lab { border-top: 2px solid var(--wb-ink); }
  .wb-page .gm--web-brutalism .gmb-doc { padding: 2rem 8px 8px; }
  .wb-page .gm--web-brutalism .gmb-f { padding: 2.25rem 12px 12px; }
  .wb-def, .wb-lead, .wb-page .gm--web-brutalism .gm__lede { font-size: 19px; }
}