/* ==========================================================================
   SWISS STYLE — GOLD STANDARD PRODUCT PAGE
   Loaded after site.css, on one route.

   THREE TIERS OF VISUAL DECISION. See
   docs/VISUALLANGUAGE-PAGE-GOLD-STANDARD-V1.md §4.

   1  PRODUCT SHELL   Navigation, claim addresses, epistemic labels, counts,
                      ordinals, disclosures. Ours, identical in kind across all
                      95 records. Held in MONO so it never reads as the
                      record's own voice.

   2  ART DIRECTION   The twelve-column page grid, the display scale, the
                      offset fields, the hairlines, the numbered series, the
                      light canvas. Aesthetary's editorial reading
                      of Swiss Style, arrived at AFTER the evidence rather than
                      derived from it. Carries no claim_key and is counted in
                      nothing. Set in the grotesque.

   3  GUIDANCE        .sw-layer--build only. Every setting decision there
                      executes a rule the corpus holds and names it, and the
                      section keeps a three-size two-weight vocabulary with
                      hierarchy from position and interval alone.

   The first build of this page kept tiers 2 and 3 apart by making tier 2
   refuse to look like the language. That surrendered the record's identity to
   the product's default voice. They are kept apart here by the stated
   disclosure, by annotation density, by tier 1 holding mono, and by the page
   naming where its art direction breaks the guidance — see .sw-read__liberty.
   ========================================================================== */

.sw-page {
  /* This page commits to a light canvas and does not follow the viewer's
     colour scheme. OURS: the record's own tonal key sits at the light end and
     an editorial canvas is what the art direction is for, but neither of those
     is a rule anyone should build from. */
  --sw-paper:   #F2F2EF;
  --sw-field:   #FFFFFF;
  --sw-ink:     #0E0F10;   /* 17.1 : 1 */
  --sw-ink-2:   #43464A;   /*  8.5 : 1 */
  --sw-ink-3:   #66696C;   /*  4.9 : 1 */
  --sw-rule:    #CFCFC9;
  --sw-rule-2:  #9C9F99;
  --sw-accent:  #B02A10;   /*  5.9 : 1. The record fixes no hue — see hue-free. */

  /* A neutral grotesque, named as a class. No web font, no face prescribed:
     which one you read depends on the machine, which is typeface-class. */
  --sw-grot: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", "Nimbus Sans", system-ui, sans-serif;
  /* APPARATUS — AESTHETARY'S VOICE, NOT SWISS'S.
     The Swiss record licenses a neutral grotesque for `role: ["all"]` and says
     nothing about a monospace: zero occurrences of monospace, mono,
     fixed-width, typewriter, courier or tabular anywhere in the record. The
     widespread mono on this page was a presentation decision of mine, never
     adjudicated, and at 64% of the page's text it was working against the one
     typography constraint the record attests at canonical_constraint.

     What survives is the use the art-direction doc actually authorised — "the
     claim key, a small monospace address" — plus figures where tabular
     alignment does real work. That narrow use is Aesthetary's apparatus voice,
     so it points at the house face rather than declaring its own: the museum
     stays recognisably the museum on every aesthetic page.

     This alias is `editorial_operationalization` — our operational decision
     about apparatus rendering. It is not a Swiss finding and must never be
     rendered as one (P10). */
  --sw-mono: var(--mono);

  /* TIER 2 type scale. Six steps. The guidance in layer 02 permits very few
     sizes and forbids size-alone hierarchy; this page does both, on purpose,
     and says so where the title sits. */
  --d1: clamp(4.25rem, 13.5vw, 12rem);
  --d2: clamp(2.5rem, 6.4vw, 5.25rem);
  --d3: clamp(1.25rem, 2.1vw, 1.625rem);
  --t1: 1.0625rem;
  --t2: 0.875rem;
  --t3: 0.75rem;

  --gut: clamp(0.75rem, 1.5vw, 1.5rem);
  --pad: clamp(1.25rem, 3.5vw, 3rem);
  --band: clamp(3rem, 7vw, 7rem);

  background: var(--sw-paper);
  color: var(--sw-ink);
  font-family: var(--sw-grot);
  font-size: var(--t1);
  line-height: 1.5;
  text-align: left;                /* flush left, ragged right. Never justified. */
}

/* --- tier 1: the shell holds mono, so it never reads as the record --------- */

.sw-page .masthead { border-bottom: 1px solid var(--sw-rule); }
.sw-page .masthead__mark { font: 700 var(--t3)/1 var(--sw-grot); letter-spacing: 0.04em; }
.sw-page .masthead nav a { font: var(--t3)/1 var(--sw-grot); color: var(--sw-ink-2); }
.sw-page .masthead nav a[aria-current="page"] { color: var(--sw-accent); }
.sw-page .foot {
  border-top: 1px solid var(--sw-rule);
  font: var(--t3)/1.65 var(--sw-grot);
  color: var(--sw-ink-3);
}
.sw-page .wrap { max-width: 86rem; padding-inline: var(--pad); }
.sw-page a { color: inherit; }
.sw-page a:hover { text-decoration-color: var(--sw-accent); }
.sw-page :focus-visible { outline: 2px solid var(--sw-accent); outline-offset: 3px; }
.sw-page ::selection { background: var(--sw-accent); color: var(--sw-field); }
.sw-page .ours { color: var(--sw-accent); }

/* --- the page grid -------------------------------------------------------- */
/* Twelve columns, re-declared at every depth so a rule in layer 02 sits on the
   same column boundary as a heading in layer 01. */

.sw > *,
.sw-layer > * {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gut);
}
.sw-layer > * { grid-column: 1 / -1; }

/* --- provenance: default off, per-claim or page-wide (tier 1) ------------- */

.sw-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sw-prov-toggle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.sw-prov-bar {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem;
  margin: 0; padding: 0.6rem 0 0;
}
.sw-prov-bar label {
  font: var(--t3)/1.4 var(--sw-grot);
  color: var(--sw-ink-2);
  border: 1px solid var(--sw-rule-2);
  padding: 0.3rem 0.6rem;
  cursor: pointer;
}
.sw-prov-bar label::before { content: "○ "; }
.sw-prov-toggle:checked ~ * .sw-prov-bar label { color: var(--sw-accent); border-color: var(--sw-accent); }
.sw-prov-toggle:checked ~ * .sw-prov-bar label::before { content: "● "; }
.sw-prov-toggle:focus-visible ~ * .sw-prov-bar label { outline: 2px solid var(--sw-accent); outline-offset: 3px; }
.sw-prov-bar__note { font: var(--t3)/1.5 var(--sw-mono); color: var(--sw-ink-3); }

.sw-prov-wrap { display: block; }
.sw-provs { display: flex; flex-wrap: wrap; gap: 0.35rem 0.75rem; }
.sw-prov-in { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
/* The marker. Backed and unbacked must never read the same at a glance —
   that difference is what makes the coverage figure mean anything. */
.sw-prov-mark {
  display: inline-block;
  font: var(--t3)/1.5 var(--sw-grot);
  color: var(--sw-ink-2);
  border-bottom: 1px solid var(--sw-rule-2);
  cursor: pointer;
}
.sw-prov-mark::before { content: "◆ "; }
.sw-prov-mark[data-backed="no"] { color: var(--sw-ink-3); font-style: italic; border-bottom-style: dotted; }
.sw-prov-mark[data-backed="no"]::before { content: "◇ "; font-style: normal; }
.sw-prov-mark:hover { color: var(--sw-ink); border-bottom-color: var(--sw-accent); }
.sw-prov-in:focus-visible + .sw-prov-mark { outline: 2px solid var(--sw-accent); outline-offset: 3px; }

.sw-prov { display: none; }
.sw-prov-in:checked ~ .sw-prov,
.sw-prov-toggle:checked ~ * .sw-prov { display: block; }
.sw-prov {
  margin: 0.5rem 0 0; padding: 0.5rem 0 0.5rem var(--gut);
  border-left: 2px solid var(--sw-accent);
  font: var(--t3)/1.6 var(--sw-grot);
  color: var(--sw-ink-2);
  max-width: 42rem;
}
.sw-prov__addr { display: block; color: var(--sw-ink); margin-bottom: 0.2rem; }
.sw-prov__row { display: block; }
.sw-prov__row b { font-weight: 400; color: var(--sw-ink-3); display: inline-block; min-width: 7.5rem; }
.sw-prov__note { display: block; margin-top: 0.4rem; font-family: var(--sw-grot); font-size: var(--t2); line-height: 1.55; color: var(--sw-ink-2); }

/* --- masthead ------------------------------------------------------------- */

.sw-mast {
  padding: var(--band) 0 0;
  row-gap: var(--gut);
  align-items: start;
}
.sw-mast__kicker {
  grid-column: 1 / -1; grid-row: 1;
  margin: 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--sw-ink);
  font: var(--t3)/1 var(--sw-grot);
  letter-spacing: 0.08em;
  color: var(--sw-ink-2);
}
.sw-mast__title {
  grid-column: 1 / 9; grid-row: 2;
  margin: 0;
  font: 700 var(--d1)/0.82 var(--sw-grot);
  letter-spacing: -0.048em;
}
.sw-mast__meta { grid-column: 9 / 13; grid-row: 2; }
.sw-mast__summary {
  grid-column: 1 / 6; grid-row: 3;
  margin: var(--gut) 0 0;
  font: 400 var(--d3)/1.32 var(--sw-grot);
}
/* Recognition is the reference question a designer arrives with, so it sits in
   the hero rather than a third of the way down. */
.sw-mast__recognise { grid-column: 6 / 13; grid-row: 3; margin-top: var(--gut); }
.sw-mast__rh { margin: 0 0 0.4rem; font: var(--t3)/1.4 var(--sw-grot); letter-spacing: 0.06em; color: var(--sw-ink-3); }
.sw-mast__sig { margin: 0 0 0.6rem; font-size: var(--t2); line-height: 1.6; }

.sw-figs { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(5.25rem, 1fr)); gap: calc(var(--gut) * 0.75) var(--gut); }
.sw-figs div { border-top: 1px solid var(--sw-ink); padding-top: 0.35rem; }
.sw-figs dt { font: var(--t3)/1.2 var(--sw-mono); color: var(--sw-ink-2); }
.sw-figs dd { margin: 0.1rem 0 0; font: 400 1.75rem/1 var(--sw-grot); letter-spacing: -0.03em; }

.sw-facts { margin: 0; display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: 0.3rem var(--gut); align-items: baseline; }
.sw-facts dt { font: var(--t3)/1.6 var(--sw-mono); color: var(--sw-ink-3); }
.sw-facts dd { margin: 0; font-size: var(--t2); line-height: 1.5; }

/* --- tier disclosure ------------------------------------------------------ */

.sw-read {
  margin-top: var(--band);
  padding: calc(var(--gut) * 1.5) 0 calc(var(--gut) * 2);
  border-top: 3px solid var(--sw-ink);
  border-bottom: 1px solid var(--sw-ink);
  row-gap: calc(var(--gut) * 1.5);
}
.sw-read__h {
  grid-column: 1 / 3;
  margin: 0;
  font: 700 var(--t2)/1.3 var(--sw-grot);
}
.sw-read__tiers { grid-column: 3 / 13; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gut); }
.sw-read__tiers li { border-top: 1px solid var(--sw-rule-2); padding-top: 0.5rem; }
.sw-read__n { margin: 0; font: var(--t3)/1.4 var(--sw-mono); color: var(--sw-accent); }
.sw-read__name { margin: 0 0 0.35rem; font: 700 var(--t1)/1.25 var(--sw-grot); }
.sw-read__body { margin: 0; font-size: var(--t2); line-height: 1.55; color: var(--sw-ink-2); }
.sw-read__liberty {
  grid-column: 3 / 10;
  margin: 0;
  padding-left: var(--gut);
  border-left: 2px solid var(--sw-accent);
  font-size: var(--t2); line-height: 1.6; color: var(--sw-ink-2);
}
.sw-read__liberty code { font: var(--t3)/1 var(--sw-mono); color: var(--sw-ink); }
/* The tier block moved from the reading view, where it sat on wider columns,
   into the research view's narrower measure. Its claim addresses and its `ours`
   span are unbreakable strings and were overrunning by 2px below 1168px. */
/* THE TIER BLOCK IN ITS NEW HOME.
   It was written for `.sw-read`, which placed its own children on the page
   grid. Moved into the research view it landed inside a `.sw-block`, where
   nothing placed `.sw-read__keyfull` at all — so it auto-placed into column 1
   of twelve and set one character per line at narrow widths. Placement is
   declared here rather than inherited by accident. */
.sw-method > *, .sw-method .sw-block__body > * { min-width: 0; }
.sw-method .sw-read__tiers,
.sw-method .sw-read__keyfull { grid-column: 3 / 13; max-width: 68ch; }
.sw-read__key { grid-column: 10 / 13; margin: 0; font-size: var(--t3); line-height: 1.6; color: var(--sw-ink-3); }
.sw-read__key b { color: var(--sw-ink-2); }

/* --- layers --------------------------------------------------------------- */

.sw-layer { row-gap: 0; }
.sw-layer__head {
  padding: var(--band) 0 calc(var(--gut) * 2);
  align-items: start;
}
.sw-layer__n {
  grid-column: 1 / 3;
  margin: 0;
  font: 400 var(--d2)/0.8 var(--sw-grot);
  color: var(--sw-accent);
  letter-spacing: -0.04em;
}
.sw-layer__name {
  grid-column: 3 / 9;
  margin: 0;
  font: 700 var(--d2)/0.86 var(--sw-grot);
  letter-spacing: -0.04em;
}
.sw-layer__q {
  grid-column: 9 / 13;
  margin: 0.4rem 0 0;
  font-size: var(--t2);
  line-height: 1.5;
  color: var(--sw-ink-2);
}

.sw-block { padding: calc(var(--gut) * 2) 0; border-top: 1px solid var(--sw-rule); align-items: start; }
.sw-block__h { grid-column: 1 / 3; margin: 0; font: 700 var(--t2)/1.25 var(--sw-grot); }
.sw-block__body { grid-column: 3 / 9; }
.sw-block__aside { grid-column: 10 / 13; }
.sw-block--wide .sw-block__body { grid-column: 3 / 13; max-width: 46rem; }

.sw-lede { margin: 0 0 1rem; font: 400 var(--d3)/1.38 var(--sw-grot); }
.sw-p { margin: 0 0 0.85rem; max-width: 42rem; }
.sw-p--tight { font-size: var(--t2); line-height: 1.6; color: var(--sw-ink-2); }
.sw-sm { margin: 0 0 0.6rem; font-size: var(--t2); line-height: 1.6; color: var(--sw-ink-2); }
.sw-h4 { margin: 1.4rem 0 0.35rem; font: 700 var(--t2)/1.3 var(--sw-grot); }
.sw-aside__h { margin: 0 0 0.4rem; font: var(--t3)/1.4 var(--sw-grot); color: var(--sw-ink-3); letter-spacing: 0.04em; }
.sw-list { margin: 0 0 1rem; padding-left: 1.05em; font-size: var(--t2); line-height: 1.6; }
.sw-list li { margin-bottom: 0.3rem; }

/* --- the motif: a claim address (tier 1) ---------------------------------- */

.sw-addr {
  display: inline-flex; align-items: baseline; gap: 0.45rem; flex-wrap: wrap;
  text-decoration: none;
  font: var(--t3)/1.6 var(--sw-mono);
  color: var(--sw-ink-3);
}
.sw-addr code { color: var(--sw-ink-2); border-bottom: 1px solid var(--sw-rule-2); }
.sw-addr:hover code { border-bottom-color: var(--sw-accent); color: var(--sw-ink); }
.sw-addr[data-backed="no"] .sw-addr__ev { font-style: italic; }

/* --- numbered series (tier 1 indexing) ------------------------------------ */

.sw-rule__n, .sw-correction__n, .sw-work__n, .sw-claim__n, .sw-limits__n, .sw-boundaries__n {
  font: var(--t3)/1.7 var(--sw-mono);
  color: var(--sw-ink-3);
}

/* --- corrections ---------------------------------------------------------- */

.sw-corrections { grid-column: 1 / -1; margin: calc(var(--gut) * 2) 0 0; padding: 0; list-style: none; }
.sw-correction {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gut);
  padding: calc(var(--gut) * 1.5) 0;
  border-top: 1px solid var(--sw-rule);
  align-items: start;
}
.sw-correction__n { grid-column: 1 / 2; margin: 0; }
.sw-correction__main { grid-column: 2 / 9; }
.sw-correction__meta { grid-column: 9 / 13; display: grid; gap: 0.35rem; justify-items: start; }
.sw-correction__q { margin: 0 0 0.5rem; font: 700 var(--d3)/1.24 var(--sw-grot); max-width: 24ch; }
.sw-correction__a { margin: 0 0 0.8rem; max-width: 46ch; }
.sw-correction__detail {
  margin: 0; padding-left: var(--gut);
  border-left: 1px solid var(--sw-rule-2);
  font-size: var(--t2); line-height: 1.6; color: var(--sw-ink-2);
  max-width: 52ch;
}
.sw-kind { margin: 0; font: var(--t3)/1.4 var(--sw-grot); color: var(--sw-accent); letter-spacing: 0.06em; }

/* --- boundaries ----------------------------------------------------------- */

.sw-boundaries { margin: 0; padding: 0; list-style: none; }
.sw-boundaries li {
  display: grid; grid-template-columns: 2.5rem minmax(0, 12rem) minmax(0, 1fr);
  gap: var(--gut);
  padding: 0.7rem 0; border-top: 1px solid var(--sw-rule);
  font-size: var(--t2); line-height: 1.55;
}
.sw-boundaries li b { font-weight: 700; }
.sw-boundaries li span:last-child { color: var(--sw-ink-2); }

/* ============================ TIER 3 — GUIDANCE ==========================
   The only surface that executes corpus rules. Inside it:
   three sizes, two weights, hierarchy from position and interval alone.
   ========================================================================= */

.sw-layer--build {
  background: var(--sw-field);
  margin-inline: calc(-1 * var(--pad));
  padding-inline: var(--pad);         /* inner columns stay on the page grid */
  padding-bottom: var(--band);
  border-top: 3px solid var(--sw-ink);
  border-bottom: 3px solid var(--sw-ink);

  /* Three sizes. Two weights. That is the whole vocabulary here. */
  --g1: 1.0625rem;
  --g2: 0.875rem;
  --g3: 0.75rem;
  --mod: 1.5rem;
}
.sw-layer--build .sw-layer__head { padding-top: calc(var(--band) * 0.7); }
/* The layer title is the one thing in here still set at page scale, because it
   belongs to the page's navigation rather than to the guidance. */

.sw-bound {
  padding: 0 0 calc(var(--mod) * 1.5);
  border-bottom: 1px solid var(--sw-rule);
}
.sw-bound__flag {
  grid-column: 1 / 3; margin: 0;
  font: var(--t3)/1.4 var(--sw-grot); color: var(--sw-accent); letter-spacing: 0.06em;
}
.sw-bound__cols {
  grid-column: 3 / 13;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gut);
}
.sw-bound__cols p { margin: 0; font-size: var(--g2); line-height: 1.6; color: var(--sw-ink-2); }
.sw-bound__cols strong { color: var(--sw-ink); }

/* the matrix, built rather than drawn ------------------------------------- */


/* rule groups -------------------------------------------------------------- */

.sw-group {
  padding: calc(var(--mod) * 1.5) 0;
  border-top: 1px solid var(--sw-rule);
  align-items: start;
}
.sw-group__head { grid-column: 1 / 3; display: block; }
.sw-group__name { margin: 0; font: 700 var(--g1)/1.3 var(--sw-grot); }
.sw-group__n { margin: 0.25rem 0 0; font: var(--g3)/1 var(--sw-mono); color: var(--sw-ink-3); }
.sw-group__answer { margin: 0.5rem 0 0; font-size: var(--g3); line-height: 1.55; color: var(--sw-ink-2); }

.sw-rules { grid-column: 3 / 13; margin: 0; padding: 0; list-style: none; }
.sw-rule {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 6fr) minmax(0, 4fr);
  column-gap: var(--gut);
  padding: var(--mod) 0;
  border-top: 1px solid var(--sw-rule);
  align-items: start;
}
.sw-rule:first-child { border-top: 0; padding-top: 0; }
.sw-rule__n { margin: 0; }
.sw-rule__main { min-width: 0; }
.sw-rule__text { margin: 0; font-size: var(--g1); font-weight: 400; }
.sw-rule__note {
  margin: 0.5rem 0 0; padding-left: var(--gut);
  border-left: 1px solid var(--sw-rule);
  font-size: var(--g3); line-height: 1.6; color: var(--sw-ink-2);
}
.sw-rule__note--ref { border-left-color: var(--sw-accent); color: var(--sw-ink-3); }
.sw-rule__meta { margin: 0; display: grid; gap: 0.3rem; justify-items: start; }
.sw-rule__area { font: var(--g3)/1.6 var(--sw-mono); color: var(--sw-ink-3); }
.sw-rule[data-withheld="yes"] code { color: var(--sw-accent); font-family: var(--sw-mono); }
.sw-rule:target { background: #FBF0ED; box-shadow: -0.5rem 0 0 0 #FBF0ED, 0.5rem 0 0 0 #FBF0ED; }

.sw-transfer__cols {
  grid-column: 3 / 13;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gut);
}
.sw-transfer__cols .sw-list { font-size: var(--g3); }
.sw-handoff {
  grid-column: 3 / 13;
  margin: calc(var(--mod) * 1.5) 0 0; padding-top: var(--mod);
  border-top: 1px solid var(--sw-ink);
  font-size: var(--g3);
}

/* ============================== EVIDENCE ================================== */

.sw-works, .sw-limits, .sw-claims { grid-column: 1 / -1; margin: calc(var(--gut) * 2) 0 0; padding: 0; list-style: none; }

.sw-work {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut);
  padding: calc(var(--gut) * 1.5) 0; border-top: 1px solid var(--sw-rule);
  align-items: start;
}
.sw-work__n { grid-column: 1 / 2; margin: 0; }
.sw-work__id { grid-column: 2 / 6; }
.sw-work__supports { grid-column: 6 / 13; margin: 0; padding: 0; list-style: none; }
.sw-work__title { margin: 0 0 0.2rem; font: 700 var(--t1)/1.3 var(--sw-grot); }
.sw-work__title cite { font-style: normal; }
.sw-work__meta { margin: 0 0 0.35rem; font-size: var(--t2); color: var(--sw-ink-2); }
.sw-works__rights {
  grid-column: 3 / 13; margin: 0 0 var(--mod);
  font: var(--t2)/1.6 var(--sw-grot); color: var(--sw-ink-3);
}
.sw-work__title a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sw-work__rights { margin: 0 0 0.6rem; font: var(--t3)/1.5 var(--sw-mono); color: var(--sw-accent); }
.sw-work__attr, .sw-work__link { margin: 0 0 0.25rem; font-size: var(--t3); line-height: 1.55; color: var(--sw-ink-3); }
.sw-work__supports li { display: grid; gap: 0.15rem; padding: 0 0 0.7rem; }
.sw-work__supports a { text-decoration: none; }
.sw-work__supports a code { font: var(--t3)/1.6 var(--sw-mono); color: var(--sw-ink-2); border-bottom: 1px solid var(--sw-rule-2); }
.sw-work__supports a:hover code { color: var(--sw-ink); border-bottom-color: var(--sw-accent); }
.sw-mode { font: var(--t3)/1.5 var(--sw-grot); color: var(--sw-ink-3); }
.sw-work__note { font-size: var(--t2); line-height: 1.5; color: var(--sw-ink-2); max-width: 54ch; }

.sw-index { grid-column: 1 / -1; }
.sw-index__h { margin: calc(var(--gut) * 2) 0 0; padding-bottom: 0.4rem; border-bottom: 1px solid var(--sw-ink); font: 700 var(--t2)/1.3 var(--sw-grot); }
.sw-count { font: var(--t3)/1 var(--sw-mono); color: var(--sw-ink-3); }

.sw-claim {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut);
  padding: 0.9rem 0; border-bottom: 1px solid var(--sw-rule);
  align-items: start;
}
.sw-claim__n { grid-column: 1 / 2; margin: 0; }
.sw-claim__main { grid-column: 2 / 9; }
.sw-claim__ev { grid-column: 9 / 13; margin: 0; display: grid; gap: 0.2rem; font: var(--t3)/1.6 var(--sw-mono); color: var(--sw-ink-2); }
.sw-claim__addr { margin: 0 0 0.2rem; font: var(--t3)/1.6 var(--sw-mono); color: var(--sw-ink-2); }
.sw-claim__back { font: var(--t3)/1.6 var(--sw-mono); color: var(--sw-ink-3); margin-left: 0.5rem; }
.sw-claim__back:hover { color: var(--sw-accent); }
.sw-claim__label { margin: 0; font-size: var(--t2); }
.sw-claim__mode, .sw-claim__conf { color: var(--sw-ink-3); }
.sw-claim__conf { color: var(--sw-accent); }
.sw-claim__role, .sw-claim__note { margin: 0.4rem 0 0; font-size: var(--t2); line-height: 1.55; color: var(--sw-ink-2); max-width: 54ch; }
.sw-claim__role { color: var(--sw-accent); }
.sw-claim:target { background: #FBF0ED; }

.sw-bare { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); padding: 0.75rem 0; border-bottom: 1px solid var(--sw-rule); }
.sw-bare__carrier { grid-column: 1 / 3; margin: 0; font: var(--t3)/1.6 var(--sw-mono); color: var(--sw-ink-2); }
.sw-bare__list { grid-column: 3 / 13; margin: 0; display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; }
.sw-bare__list a { text-decoration: none; }
.sw-bare__list code, .sw-bare__list span code { font: var(--t3)/1.7 var(--sw-mono); color: var(--sw-ink-3); }
.sw-bare__list a code { border-bottom: 1px solid var(--sw-rule); }
.sw-bare__list a:hover code { color: var(--sw-ink); border-bottom-color: var(--sw-accent); }
.sw-bare__list a:target code, .sw-bare__list span:target code { color: var(--sw-accent); }

.sw-limits li {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut);
  padding: calc(var(--gut) * 1.2) 0; border-top: 1px solid var(--sw-rule);
}
.sw-limits__n { grid-column: 1 / 2; margin: 0; }
.sw-limits li > div { grid-column: 2 / 9; }
.sw-limits h4 { margin: 0 0 0.3rem; font: 700 var(--t2)/1.35 var(--sw-grot); }
.sw-limits p { margin: 0; font-size: var(--t2); line-height: 1.6; color: var(--sw-ink-2); max-width: 58ch; }

/* --- devices: recognition scores ------------------------------------------ */

.sw-devices { grid-column: 1 / -1; margin: calc(var(--gut) * 1.5) 0 0; padding: 0; list-style: none; }
.sw-device {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut);
  padding: calc(var(--gut) * 1.25) 0; border-top: 1px solid var(--sw-rule); align-items: start;
}
.sw-device__n { grid-column: 1 / 2; margin: 0; }
.sw-device__main { grid-column: 2 / 9; }
.sw-device__scores { grid-column: 9 / 13; display: grid; gap: 0.4rem; }
.sw-device__name { margin: 0 0 0.25rem; font: 700 var(--d3)/1.25 var(--sw-grot); }
.sw-device__standing { margin: 0 0 0.5rem; font-size: var(--t2); color: var(--sw-ink-2); }
.sw-device__def { margin: 0 0 0.6rem; font-size: var(--t2); line-height: 1.6; color: var(--sw-ink-2); max-width: 54ch; }
.sw-device__script { margin: 0.6rem 0 0; padding-left: var(--gut); border-left: 1px solid var(--sw-rule-2); font-size: var(--t3); line-height: 1.6; color: var(--sw-ink-3); max-width: 54ch; }
.sw-device__scores p { margin: 0; display: flex; align-items: baseline; gap: 0.5rem; }
.sw-score { font: 400 2.25rem/0.9 var(--sw-grot); letter-spacing: -0.03em; }
.sw-score span { font-size: var(--t2); color: var(--sw-ink-3); }
.sw-score__l { font: var(--t3)/1.4 var(--sw-mono); color: var(--sw-ink-3); }
.sw-list--tight { margin: 0; font-size: var(--t3); }

/* --- DEMONSTRATION A — "three of these are not this"  (TIER 2, Learn) -----
   Four compositions, one grid, one content set. The only variable is what has
   been added, and the addition is rendered in the accent so the eye finds it
   without reading anything. The panels illustrate a claim; they instruct in
   nothing, which is what keeps them out of tier 3. */

.dA { grid-column: 1 / -1; margin: 0; }
.dA__set {
  grid-column: 1 / -1; margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gut);
}
.dA__item { min-width: 0; }
.dA__frame {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 1rem;
  gap: 0.375rem;
  padding: 0.875rem;
  background: var(--sw-field);
  border: 1px solid var(--sw-rule);
  aspect-ratio: 1 / 1.1;
  align-content: start;
}
.dA__title { grid-column: 1 / 5; grid-row: 1 / 3; background: var(--sw-ink); }
.dA__meta  { grid-column: 1 / 3; grid-row: 4;     background: var(--sw-ink-2); }
.dA__img   { grid-column: 4 / 7; grid-row: 6 / 14; background: #D3D4CD; }
.dA__l     { grid-column: 1 / 4; background: #E2E3DD; }
.dA__l--1 { grid-row: 6; } .dA__l--2 { grid-row: 7; } .dA__l--3 { grid-row: 8; }

/* 02 — a centred heading, and NOTHING else. The title keeps its colour so the
   only readable difference is where it sits. */
.dA--centred .dA__title { grid-column: 2 / 6; }
.dA--centred .dA__meta  { grid-column: 3 / 5; }

/* 03 — a tint panel. Ornament, and a field marked by decoration. */
.dA--tint .dA__tint {
  grid-column: 1 / 4; grid-row: 5 / 11;
  background: var(--sw-accent); opacity: 0.18;
}

/* 04 — a DECORATIVE rule. Short, inset inside one field, aligned to no module
   boundary and separating nothing. A hairline that divides grid fields is
   permitted by hairline-rules; this one is not that. */
/* Inset from the module on both sides, sitting inside the body field with
   clear space around it. It divides nothing — which is the whole point. */
.dA--rule .dA__flourish {
  grid-column: 1 / 4; grid-row: 10 / 12;
  height: 3px; align-self: center;
  width: 46%; margin-left: 14%;
  background: var(--sw-accent);
}

.dA__label { margin: 0.6rem 0 0.2rem; font: var(--t2)/1.3 var(--sw-grot); display: flex; gap: 0.5rem; align-items: baseline; }
.dA__n { font: var(--t3)/1.4 var(--sw-mono); color: var(--sw-ink-3); }
.dA__item[data-verdict="not"] .dA__label b { color: var(--sw-accent); }
.dA__why { margin: 0; font-size: var(--t3); line-height: 1.55; color: var(--sw-ink-2); }
.dA__cap { grid-column: 1 / -1; margin-top: calc(var(--gut) * 1.5); padding-top: var(--gut); border-top: 1px solid var(--sw-rule); }
.dA__cap p { margin: 0 0 0.5rem; font-size: var(--t2); line-height: 1.6; color: var(--sw-ink-2); max-width: 54rem; }
.dA__claims, .dB__claims { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; }

/* --- DEMONSTRATION B — rank by placement on the grid  (TIER 3, Build) ---
   Identical words in all three states. 02 and 03 share sizes and weights, so
   placement is the only difference between them; 01 differs in sizes. */

.dB { grid-column: 3 / 13; margin: calc(var(--mod) * 1.5) 0 0; padding-top: var(--mod); border-top: 1px solid var(--sw-rule); }
.dB__set { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gut); }
.dB__item { min-width: 0; display: flex; flex-direction: column; }
.dB__frame {
  display: flex; flex-direction: column;
  padding: var(--mod);
  background: var(--sw-field);
  border: 1px solid var(--sw-rule);
  flex: 1;
  min-height: 15rem;
  font-family: var(--sw-grot);
}
.dB__frame b { display: block; font-weight: 400; }
.dB__t { font-size: var(--g1); }
.dB__s, .dB__b, .dB__c { font-size: var(--g3); }

/* 01 — four unrelated sizes, stacked where they fall. Meant to look like more
   sizes than the practice uses; the smallest stays at 12px so it is still
   readable. */
.dB--size .dB__t { font-size: 2rem; line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 0.35rem; }
.dB--size .dB__s { font-size: 1.35rem; margin-bottom: 0.35rem; }
.dB--size .dB__b { font-size: 0.9375rem; line-height: 1.5; margin-bottom: 0.35rem; }
.dB--size .dB__c { font-size: 0.75rem; }

/* 02 — the same sizes and weights as 03, set down by eye: every offset is
   deliberately NOT a fraction of the module. */
.dB--eye .dB__t { font-weight: 700; font-size: var(--g1); margin-left: 0.4rem; }
.dB--eye .dB__s { font-weight: 700; font-size: var(--g2); margin-top: 0.55rem; margin-left: 1.3rem; }
.dB--eye .dB__b { font-size: var(--g2); line-height: 1.5; margin-top: 0.9rem; margin-left: 0.15rem; }
.dB--eye .dB__c { font-size: var(--g2); margin-top: 0.3rem; margin-left: 2.1rem; }

/* 03 — two weights, two near-identical sizes, rank from position and interval
   measured on the module. */
.dB--swiss .dB__t { font-weight: 700; font-size: var(--g1); margin-bottom: 0; }
.dB--swiss .dB__s { font-weight: 700; font-size: var(--g2); margin-top: calc(var(--mod) * 1.5); }
.dB--swiss .dB__b { font-size: var(--g2); line-height: 1.5; margin-top: calc(var(--mod) / 2); }
.dB--swiss .dB__c { font-size: var(--g2); margin-top: auto; padding-top: var(--mod); margin-left: 33%; }

.dB__label { margin: 0.6rem 0 0.2rem; font: var(--g2)/1.3 var(--sw-grot); display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline; }
.dB__n { font: var(--g3)/1.4 var(--sw-mono); color: var(--sw-ink-3); }
.dB__verdict { font: var(--g3)/1.4 var(--sw-grot); }
.dB__item[data-verdict="departs"] .dB__verdict { color: var(--sw-accent); }
.dB__item[data-verdict="practice"] .dB__verdict { color: var(--sw-ink-3); }
.dB__item[data-verdict="departs"] .dB__frame { border-style: dashed; }
.dB__why { margin: 0; font-size: var(--g3); line-height: 1.55; color: var(--sw-ink-2); }
.dB__why b { font-weight: 400; color: var(--sw-ink); }
.dB__cap { margin-top: var(--mod); padding-top: var(--mod); border-top: 1px solid var(--sw-rule); }
.dB__cap p { margin: 0 0 0.5rem; font-size: var(--g3); line-height: 1.6; color: var(--sw-ink-2); max-width: 54rem; }

/* --- the ten areas (tier 3 reference table) ------------------------------- */

.sw-areas { padding: calc(var(--mod) * 1.5) 0; border-top: 1px solid var(--sw-rule); align-items: start; }
.sw-areas__head { grid-column: 1 / 3; }
.sw-area-list { grid-column: 3 / 13; margin: 0; padding: 0; list-style: none; }
.sw-area {
  display: grid; grid-template-columns: 2.5rem minmax(0, 4fr) minmax(0, 6fr) minmax(0, 2fr);
  column-gap: var(--gut);
  padding: var(--mod) 0; border-top: 1px solid var(--sw-rule); align-items: start;
}
.sw-area:first-child { border-top: 0; padding-top: 0; }
.sw-area__n { margin: 0; }
.sw-area__name { margin: 0 0 0.2rem; font: 700 var(--g1)/1.25 var(--sw-grot); }
.sw-area__gloss { margin: 0; font-size: var(--g3); line-height: 1.5; color: var(--sw-ink-3); }
.sw-area__headline { margin: 0 0 0.3rem; font: 700 var(--g2)/1.3 var(--sw-grot); }
.sw-area__sentence { margin: 0; font-size: var(--g2); line-height: 1.55; color: var(--sw-ink-2); }
.sw-area__rel, .sw-area__why { margin: 0.5rem 0 0; font-size: var(--g3); line-height: 1.6; color: var(--sw-ink-3); }
/* A "Detail:" link is the whole paragraph, not a word inside a sentence, so
   the WCAG 2.5.8 inline-prose exception does not cover it — it was 14px tall.
   The five links that ARE inline in running prose keep the exception and are
   left alone; the rule is not being widened to make a finding disappear. */
.sw-area__why--ref a,
.sw-work__link a,
.sw-research-link a,
/* The Surface tiles' labels are standalone links, not words inside a
   sentence, so the 2.5.8 inline-prose exception does not reach them either. */
.sw-derived__label { display: inline-flex; align-items: center; min-height: 24px; }
.sw-area__why { padding-left: var(--gut); border-left: 1px solid var(--sw-rule); }
.sw-area__why--ref { border-left-color: var(--sw-accent); }
.sw-area__meta { margin: 0; }
/* The posture tone is carried by a word, not only by a colour. The marker
   exists so "nobody has looked" never reads like "you may do as you like". */
.sw-area[data-tone="excluded"] .sw-area__headline { color: var(--sw-accent); }
.sw-area[data-tone="open"] .sw-area__headline { color: var(--sw-accent); }
.sw-area[data-tone="outside"] .sw-area__headline,
.sw-area[data-tone="outside"] .sw-area__name { color: var(--sw-ink-3); }

/* --- the ten areas: three row weights -------------------------------------
   Four rows carry a demonstration, one carries a derived-values inset, five
   carry a line. The section's rhythm is the finding: levelling the rows would
   claim a confidence the record does not have. Nothing below adds a new
   component family — every figure is the white field on the paper ground that
   the matrix and the two lettered demonstrations already use.

   ONE COMPOSITION RULE FOR ALL FOUR. The demonstration takes columns 1-8 and
   its label takes 9-12, top-aligned beside it. That is the museum wall label —
   object large, label small, label to the side — and it is also why the
   section grew far less than four figures would suggest: nothing stacks.
   ------------------------------------------------------------------------ */

.sw-areas__shape {
  grid-column: 1 / -1;
  margin: var(--mod) 0 0; padding-top: 0.55rem;
  border-top: 1px solid var(--sw-rule);
  font-size: var(--g3); line-height: 1.6; color: var(--sw-ink-3);
}
.sw-area__show { grid-column: 2 / 5; margin-top: var(--mod); }
.sw-area[data-weight="specimen"] { padding-bottom: calc(var(--mod) * 1.5); }

.sw-area__show .sw-matrix,
.sw-area__show .sw-spec,
.sw-area__show .sw-hue,
.sw-area__show .sw-void {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gut); row-gap: var(--show-gap, var(--mod));
  margin: 0;
}
.sw-area__show figcaption { grid-column: 9 / 13; grid-row: 1; align-self: start; }
/* The apparatus — what we supplied, and what stands behind it — runs the full
   width under the plate rather than stacking in the label column. It fills the
   space beneath the object instead of leaving an unfinished grid there, and it
   keeps the side label to the one sentence the object cannot say itself. */
.sw-show__foot {
  grid-column: 1 / -1; grid-row: 3;
  padding-top: 0.5rem; border-top: 1px solid var(--sw-rule);
}
.sw-show__foot p { margin: 0 0 0.45rem; font-size: var(--g3); line-height: 1.55; color: var(--sw-ink-3); max-width: 76ch; }
.sw-show__foot .sw-show__ours, .sw-show__ours .ours { color: var(--sw-accent); }
.sw-area__show figcaption p { margin: 0 0 0.5rem; font-size: var(--g3); line-height: 1.55; color: var(--sw-ink-3); }
.sw-area__show figcaption p strong { color: var(--sw-ink); font-weight: 700; }
.sw-area__show .sw-provs { display: flex; flex-wrap: wrap; gap: 0 var(--gut); }

/* --- the rules a row carries -------------------------------------------
   Build used to state every rule twice: once as an area showing what the
   record says, and again in a basis group listing its text. The rules now sit
   in the area a designer would look under, and the basis rides on each rule as
   a marker rather than as a second set of section headings.
   ------------------------------------------------------------------------ */

.sw-area__rules { grid-column: 2 / 5; margin-top: var(--mod); }
.sw-area__rules .sw-rules { grid-column: auto; }
/* Inside a row the rule list is subordinate to the state above it, so it opens
   on a rule of its own and sets one step down. */
.sw-area__rules > .sw-rules { padding-top: var(--mod); border-top: 1px solid var(--sw-rule); }
.sw-area__rules .sw-rule { grid-template-columns: 2.5rem minmax(0, 6fr) minmax(0, 4fr); }
.sw-area__rules .sw-rule__text { font-size: var(--g2); line-height: 1.55; }
.sw-area__rules--modern { margin-top: var(--gut); }
.sw-area__rules--modern .sw-rules { padding-top: var(--mod); border-top: 0; }
.sw-area__rules--unfiled { grid-column: 3 / 13; margin-top: var(--band); }

/* The four markers, as a key. This is the ONLY place the tier taxonomy appears
   as a set; everywhere else it is one word on one rule. */
.sw-areas__key {
  grid-column: 1 / -1; margin: var(--mod) 0 0.5rem;
  display: flex; flex-wrap: wrap; gap: 0 var(--gut);
  font: var(--g3)/1.7 var(--sw-mono); color: var(--sw-ink-3);
}
.sw-areas__key span[data-basis="canonical_constraint"] { font-weight: 700; color: var(--sw-ink); }
.sw-areas__key span[data-basis="editorial_operationalization"] { color: var(--sw-accent); }
.sw-areas__legend { margin: 0; font-size: var(--g3); line-height: 1.6; }
.sw-areas__legend dt { font-weight: 700; margin-top: 0.6rem; }
.sw-areas__legend dd { margin: 0.1rem 0 0; color: var(--sw-ink-2); }

/* --- 01 layout: the module matrix, with one module and one gutter named --- */

/* The matrix sets its own row gap: its legend is a measure of the field
   directly above it, not a separate block. */
.sw-matrix { grid-column: 1 / -1; --show-gap: calc(var(--mod) / 2); }
.sw-matrix__field {
  grid-column: 1 / 9; grid-row: 1;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-template-rows: repeat(6, calc(var(--mod) * 0.8));
  gap: calc(var(--mod) / 2);
}
.sw-matrix__field b { display: block; background: #E8E8E2; }
.sw-matrix__field b[data-b="title"] { background: var(--sw-ink); }
.sw-matrix__field b[data-b="sub"]   { background: var(--sw-ink-2); }
.sw-matrix__field b[data-b="image"] { background: #D3D4CD; }
/* One flat functional area. The record fixes no hue; the count is fixed. */
.sw-matrix__field b[data-b="mark"]  { background: var(--sw-accent); }

/* The measure that used to be a sentence. One module wide, one gutter wide,
   drawn at the real values so the ratio is read rather than stated. */
.sw-matrix__legend {
  grid-column: 1 / 9; grid-row: 2; margin: 0; align-self: start;
  display: flex; flex-direction: column; gap: 0.3rem;
  font: var(--g3)/1.2 var(--sw-mono); color: var(--sw-ink-3);
}
/* Each label is preceded by a rule drawn at the measure it names, so the
   module-to-gutter ratio is read off the drawing rather than stated. */
.sw-matrix__legend span { display: flex; align-items: center; gap: 0.5rem; white-space: nowrap; }
.sw-matrix__legend span::before {
  content: ""; display: block; height: 0; border-top: 2px solid currentColor;
  width: calc((100% - 11 * var(--mod) / 2) / 12);
}
.sw-matrix__legend span[data-k="gut"] { color: var(--sw-accent); }
.sw-matrix__legend span[data-k="gut"]::before { width: calc(var(--mod) / 2); }
.sw-matrix__ours { color: var(--sw-accent); }

/* --- 02 typography: the specimen -----------------------------------------
   Set inside layer 02's own vocabulary rather than simulating it: three sizes
   (--g1/--g2/--g3), two weights (400/700), flush left with a real ragged edge,
   and a rule drawn at the module interval the rhythm is derived from.
   ------------------------------------------------------------------------ */

.sw-spec { grid-column: 1 / -1; }
.sw-spec__set {
  grid-column: 1 / 7; grid-row: 1; align-self: start;
  padding: var(--mod) var(--gut);
  background: var(--sw-paper);
  background-image: repeating-linear-gradient(
    to bottom, transparent 0, transparent calc(var(--mod) - 1px),
    var(--sw-rule) calc(var(--mod) - 1px), var(--sw-rule) var(--mod));
}
/* Flush left, ragged right. Never justified, and the measure is short enough
   that the rag is visible rather than theoretical. */
.sw-spec__set b {
  display: block; margin: 0; color: var(--sw-ink);
  text-align: left; text-wrap: initial; hyphens: none; max-width: 32ch;
}
.sw-spec__t { font: 700 var(--g1)/var(--mod) var(--sw-grot); }
.sw-spec__s { font: 400 var(--g1)/var(--mod) var(--sw-grot); }
.sw-spec__b { font: 400 var(--g2)/var(--mod) var(--sw-grot); }
.sw-spec__c { font: 700 var(--g3)/var(--mod) var(--sw-grot); }
/* One empty module between blocks, so the interval is part of the rhythm
   rather than an arbitrary gap. */
.sw-spec__set .sw-spec__b,
.sw-spec__set .sw-spec__c { margin-top: var(--mod); }

.sw-spec__count {
  grid-column: 7 / 9; grid-row: 1; margin: 0; align-self: start;
  display: flex; flex-direction: column; gap: 0.25rem;
  font: var(--g3)/1.3 var(--sw-mono); color: var(--sw-ink-3);
}
.sw-spec__count span { padding-top: 0.3rem; border-top: 1px solid var(--sw-rule-2); }

.sw-spec__h { margin: 0 0 0.6rem; }
.sw-spec__axes { margin: 0 0 0.6rem; display: grid; gap: 0.55rem; }
.sw-spec__axes div { border-top: 1px solid var(--sw-ink); padding-top: 0.3rem; }
.sw-spec__axes dt { font: var(--g3)/1.3 var(--sw-mono); color: var(--sw-ink-3); }
.sw-spec__axes dd { margin: 0.1rem 0 0; font-size: var(--g3); line-height: 1.5; color: var(--sw-ink); }
.sw-spec__note {
  margin: 0 0 0.5rem; padding-left: var(--gut);
  border-left: 1px solid var(--sw-rule);
  font-size: var(--g3); line-height: 1.6; color: var(--sw-ink-2);
}
.sw-spec__meta { margin: 0 0 0.4rem; }
.sw-spec__ours .ours { color: var(--sw-accent); }

/* --- 03 colour: one field, three hues ------------------------------------- */

.sw-hue { grid-column: 1 / -1; }
.sw-hue__set {
  grid-column: 1 / 9; grid-row: 1; align-self: start; margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gut);
}
.sw-hue__frame {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: calc(var(--mod) / 2);
  gap: calc(var(--mod) / 3);
  padding: calc(var(--mod) / 2);
  background: var(--sw-paper);
}
.sw-hue__rule { grid-column: 1 / 5; background: var(--sw-ink); }
.sw-hue__rule--short { grid-column: 1 / 3; background: var(--sw-ink-2); }
/* The one flat functional field. Identical in every frame but its hue, which
   is the only thing the record leaves open. A colour WORD, never a value. */
.sw-hue__flat { grid-column: 1 / 7; grid-row: 5 / 8; background: var(--flat); }
.sw-hue__word { margin: 0.45rem 0 0; font: 700 var(--g3)/1.3 var(--sw-grot); }
.sw-hue__ours { color: var(--sw-accent); }

/* --- 08 motif: the refusal ------------------------------------------------
   The layout field at module resolution with nothing placed on it. It reads as
   a refusal only because the rows above it are full, which is why the four
   demonstrations are not evenly spaced down the list. Drawn with the module
   lines visible so it is legibly a prepared surface, not a broken figure.
   ------------------------------------------------------------------------ */

.sw-void { grid-column: 1 / -1; }
/* The matrix's flowlines at the matrix's own interval, and nothing set on
   them. Not a blank box and not a skeleton of missing tiles: the structure is
   present and complete, and the surface is refused. */
.sw-void__field {
  grid-column: 1 / 9; grid-row: 1;
  display: grid; grid-template-rows: repeat(4, calc(var(--mod) * 1.3));
  border-top: 1px solid var(--sw-ink);
}
.sw-void__field b { display: block; border-bottom: 1px solid var(--sw-rule); }

/* --- 05 surface: two derived values, and not a system --------------------
   Deliberately not a specimen: smaller, open on the right rather than closed
   into a card, and marked ours on the rule. "Not established" stays the state
   of the area; these are two answers we supplied because a build needs them.
   ------------------------------------------------------------------------ */

.sw-derived {
  grid-column: 2 / 5; margin-top: var(--mod);
  padding: 0 0 0 var(--gut); border-left: 2px solid var(--sw-accent);
  max-width: 34rem;
}
.sw-derived__h { margin: 0 0 0.7rem; font-size: var(--g3); line-height: 1.6; color: var(--sw-ink-2); }
.sw-derived__set { margin: 0 0 0.5rem; padding: 0; list-style: none; display: flex; gap: var(--mod); }
.sw-derived__set li { display: flex; align-items: center; gap: 0.6rem; }
.sw-derived__tile { display: block; width: var(--mod); height: var(--mod); background: var(--sw-ink-2); }
/* Zero radius and no elevation, shown as the shapes they are. A rounded, lifted
   tile beside them would be a Swiss counter-example we have no evidence for, so
   the tiles simply are what the two rules ask for. */
.sw-derived__tile[data-k="elevation"] { background: var(--sw-field); outline: 1px solid var(--sw-rule-2); }
.sw-derived__label { font: 700 var(--g3)/1.3 var(--sw-grot); }
.sw-derived .sw-provs { display: flex; gap: var(--gut); }

/* --- catalogued palettes, in words ---------------------------------------- */
/* The fields are the NAMED colours the museums' words refer to. Nothing was
   sampled from an artefact and no exact value is claimed, so the words carry
   the information and the fields are hidden from assistive technology. */

.sw-palettes { grid-column: 3 / 13; margin: calc(var(--gut) * 1.5) 0 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--gut); }
.sw-palette__fields { display: flex; height: 7.5rem; }
.sw-palette__fields span { flex: 1; display: block; }
.sw-palette__words { margin: 0.6rem 0 0.15rem; font: 700 var(--t1)/1.3 var(--sw-grot); }
.sw-palette__meta { margin: 0; font: var(--t3)/1.5 var(--sw-grot); color: var(--sw-ink-3); }
.sw-palette[data-role="counter_example"] .sw-palette__meta { color: var(--sw-accent); }
.sw-palette__caveat {
  grid-column: 3 / 13; margin: calc(var(--gut) * 1.5) 0 0;
  padding-top: var(--gut); border-top: 1px solid var(--sw-rule);
  font-size: var(--t2); line-height: 1.6; color: var(--sw-ink-2); max-width: 54rem;
}

/* --- evidence extras ------------------------------------------------------ */

.sw-figs--evidence { grid-column: 9 / 13; grid-template-columns: repeat(auto-fit, minmax(4.75rem, 1fr)); }
.sw-correction__caveat {
  margin: 0.7rem 0 0; padding-left: var(--gut);
  border-left: 2px solid var(--sw-accent);
  font-size: var(--t2); line-height: 1.6; color: var(--sw-ink-2); max-width: 52ch;
}
.sw-correction__caveat b { color: var(--sw-ink); }
.sw-work__for { font-size: var(--t2); line-height: 1.5; }
.sw-research-link { margin: var(--gut) 0 0; font: var(--t2)/1.4 var(--sw-grot); }
.sw-research-link a { border-bottom: 2px solid var(--sw-accent); text-decoration: none; padding-bottom: 0.15rem; }
.sw--research .sw-mast__title { grid-column: 1 / 7; }
.sw--research .sw-mast__summary { grid-column: 1 / 8; }
.sw--research .sw-mast__meta { grid-column: 9 / 13; grid-row: 3; }

/* ------------------------------------------------------------- narrow ----- */

@media (max-width: 72rem) {
  .sw-mast__title { grid-column: 1 / 9; }
  .sw-mast__summary { grid-column: 1 / 9; }
  .sw-mast__meta { grid-column: 9 / 13; }
  .sw-block__body, .sw-block--wide .sw-block__body { grid-column: 3 / 13; }
  .sw-block__aside { grid-column: 3 / 13; margin-top: var(--gut); }
  .sw-correction__main { grid-column: 2 / 13; }
  .sw-correction__meta { grid-column: 2 / 13; margin-top: 0.6rem; grid-auto-flow: column; justify-content: start; gap: var(--gut); }
  .sw-work__id { grid-column: 2 / 13; }
  .sw-device__main, .sw-device__scores { grid-column: 2 / 13; }
  .sw-device__scores { margin-top: var(--gut); grid-auto-flow: column; justify-content: start; gap: var(--gut); }
  .sw-area { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .sw-area__state, .sw-area__meta { grid-column: 2; margin-top: 0.6rem; }
  /* The row drops to two columns here, so a demonstration placed at 2/5 would
     invent three implicit ones and run past the page. It takes the one
     content column instead. */
  .sw-area__show, .sw-derived, .sw-area__rules { grid-column: 2; }
  .sw-figs--evidence { grid-column: 3 / 13; margin-top: var(--gut); }
  .sw-work__supports { grid-column: 2 / 13; margin-top: var(--gut); }
  .sw-claim__main { grid-column: 2 / 13; }
  .sw-claim__ev { grid-column: 2 / 13; margin-top: 0.4rem; grid-auto-flow: column; justify-content: start; gap: var(--gut); }
  .sw-limits li > div { grid-column: 2 / 13; }
}

@media (max-width: 54rem) {
  .sw-read__tiers, .sw-bound__cols, .sw-transfer__cols { grid-template-columns: 1fr; }
  .sw-read__h, .sw-read__tiers, .sw-read__liberty, .sw-read__key { grid-column: 1 / 13; }
  .sw-read__liberty, .sw-read__key { margin-top: var(--gut); }
  .sw-layer__n { grid-column: 1 / 13; font-size: var(--t2); line-height: 1.4; }
  .sw-layer__name { grid-column: 1 / 13; }
  .sw-layer__q { grid-column: 1 / 13; margin-top: 0.6rem; }
  .sw-block__h { grid-column: 1 / 13; margin-bottom: 0.6rem; }
  .sw-block__body, .sw-block--wide .sw-block__body, .sw-block__aside { grid-column: 1 / 13; }
  .sw-bound__flag, .sw-bound__cols { grid-column: 1 / 13; }
  .sw-bound__flag { margin-bottom: 0.6rem; }
  .sw-group__head, .sw-rules, .sw-transfer__cols, .sw-handoff, .sw-matrix figcaption,
  .sw-areas__head, .sw-area-list, .sw-palettes, .sw-palette__caveat,
  .dB { grid-column: 1 / 13; }
  .dA__set { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dB__set { grid-template-columns: minmax(0, 1fr); }
  .sw-mast__recognise, .sw-mast__summary, .sw-mast__meta, .sw-mast__title { grid-column: 1 / 13; }
  .sw-mast__meta { grid-row: 3; } .sw-mast__summary { grid-row: 4; } .sw-mast__recognise { grid-row: 5; }
  .sw-device__n, .sw-area__n { grid-column: 1 / 13; margin-bottom: 0.3rem; }
  .sw-device__main, .sw-device__scores, .sw-area__id, .sw-area__state, .sw-area__meta { grid-column: 1 / 13; }
  .sw-figs--evidence { grid-column: 1 / 13; }
  .sw-group__head { margin-bottom: var(--gut); }
  .sw-rule { grid-template-columns: 2.25rem minmax(0, 1fr); }
  .sw-rule__meta { grid-column: 2; margin-top: 0.5rem; grid-auto-flow: column; justify-content: start; gap: var(--gut); }
  .sw-correction__n, .sw-work__n, .sw-claim__n, .sw-limits__n { grid-column: 1 / 13; margin-bottom: 0.3rem; }
  .sw-correction__main, .sw-correction__meta, .sw-work__id, .sw-work__supports,
  .sw-claim__main, .sw-claim__ev, .sw-limits li > div { grid-column: 1 / 13; }
  .sw-bare__carrier, .sw-bare__list { grid-column: 1 / 13; }
  .sw-bare__carrier { margin-bottom: 0.35rem; }
  .sw-boundaries li { grid-template-columns: 2.25rem minmax(0, 1fr); }
  .sw-boundaries li span:last-child { grid-column: 2; }
  .sw-area__show, .sw-derived, .sw-area__rules { grid-column: 1 / 13; }
  .sw-area__rules .sw-rule { grid-template-columns: 2.25rem minmax(0, 1fr); }
  .sw-area__rules .sw-rule__meta { grid-column: 2; margin-top: 0.5rem; grid-auto-flow: column; justify-content: start; gap: var(--gut); }
  /* Object-beside-label stops working once the label column is a few words
     wide. Below this the label goes under the object, which is the same
     museum convention read on a narrower wall. */
  .sw-matrix__field, .sw-matrix__legend, .sw-spec__set, .sw-hue__set, .sw-void__field,
  .sw-area__show figcaption { grid-column: 1 / -1; }
  .sw-spec__count { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 0 var(--gut); }
  /* Both kept grid-row 1 once stacked, so the wrapped counts ("one baseline")
     sat on top of the specimen at 375. Released, the counts follow it. */
  .sw-spec__set, .sw-spec__count { grid-row: auto; }
  .sw-spec__count { margin-top: 0.6rem; }
  /* Explicit rows are what put the label beside the object. Once everything
     stacks they have to be released, or the apparatus jumps ahead of the
     caption it belongs under. */
  .sw-area__show figcaption, .sw-show__foot { grid-row: auto; }
  .sw-spec__axes { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--gut); }
}

@media (max-width: 34rem) {
  .dA__set { grid-template-columns: minmax(0, 1fr); }
  .sw-mast__title, .sw-mast__figures { grid-column: 1 / 13; }
  .sw-mast__figures { grid-row: 3; }
  .sw-mast__summary { grid-column: 1 / 13; grid-row: 4; }
  .sw-mast__meta { grid-column: 1 / 13; grid-row: 5; margin-top: var(--gut); }
  .sw-matrix__field { grid-template-rows: repeat(6, calc(var(--mod) * 0.7)); }
  .sw-hue__set { grid-template-columns: minmax(0, 1fr); }
  .sw-derived__set { flex-wrap: wrap; gap: var(--gut); }
}

/* Motion is not a position this language holds, so there is none to reduce.
   Nothing on this page animates. */

/* ==========================================================================
   BASIS TIERS, RANKED THE WAY THE RECORD SAYS SWISS RANKS THINGS.

   The four tiers were rendered identically — same column, same weight, same
   interval — so `canonical_constraint` and `editorial_operationalization`
   carried equal visual rank. The taxonomy was labelled correctly and ranked
   not at all, which lets our interpretation read as load-bearing as the
   movement's own rule. P2 and P10 both push against that.

   The ranking device comes from the record, not from taste.
   token_rule:hierarchy-device (period practice since Research Batch 01): rank
   comes from systematic placement in the grid. Nothing here changes a
   font-size or a hue — rank is carried by indent, weight and the space above,
   which also keeps to hierarchy-limits, our own rule against size-alone and
   colour-alone ranking.

   `data-basis` is the hook. A different aesthetic ranks the same four tiers
   with whatever device ITS record attests, and only this block changes.
   ========================================================================== */
/* The four tiers were four SECTIONS, each re-listing every rule beneath it.
   Build is now one list ordered by area and the tier rides on the rule, so the
   ranking device moves with it — same device, smaller scale. Rank is carried by
   weight and by the space before the marker, never by size alone and never by
   colour alone: `ours` is accent AND says "Ours", which is the page's existing
   convention for our own voice.

   `data-basis` is still the hook. A different aesthetic ranks the same four
   tiers with whatever device ITS record attests, and only this block changes. */
.sw-rule__area[data-basis="canonical_constraint"] { font-weight: 700; color: var(--sw-ink); }
.sw-rule__area[data-basis="historical_practice"] { padding-left: 0.5rem; }
.sw-rule__area[data-basis="contemporary_recommendation"] { padding-left: 1rem; }
.sw-rule__area[data-basis="editorial_operationalization"] { padding-left: 1.5rem; color: var(--sw-accent); }

/* ---- SECTION DISCLOSURE — the sw-prov idiom, at section scale -----------
   A checkbox and a label, no JavaScript, because the apparatus must open on a
   page whose own argument is that structure should not depend on decoration.
   Marker vocabulary matches the provenance marks already validated here. */
.sw-more-in { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.sw-more-mark {
  /* max-width and wrapping: as an inline-flex the label would not shrink below
     its content and spilled 2px past its grid cell below 904px. */
  display: inline-flex; align-items: baseline; flex-wrap: wrap;
  max-width: 100%; cursor: pointer;
  font: var(--t3)/1.4 var(--sw-grot);
  color: var(--sw-ink-2); border-bottom: 1px solid var(--sw-rule-2);
  padding-block: 0.4rem; min-height: 24px;
}
.sw-more-mark span::before { content: "\25B8\00a0"; }
.sw-more-in:checked + .sw-more-mark span::before { content: "\25BE\00a0"; }
.sw-more-mark:hover { color: var(--sw-ink); border-bottom-color: var(--sw-accent); }
.sw-more-in:focus-visible + .sw-more-mark { outline: 2px solid var(--sw-accent); outline-offset: 3px; }
.sw-more__body { display: none; }
.sw-more-in:checked ~ .sw-more__body { display: block; }
/* A disclosure set directly in a twelve-column grid takes the content columns.
   Left to auto-placement it fell into one 56px cell (14px at 375) and set its
   label one word to a line (Fidelity/QA, 2026-09-29). */
.sw-areas > .sw-more, .sw-group > .sw-more, .sw-block > .sw-more { grid-column: 3 / 13; }
.sw-work > .sw-more { grid-column: 6 / 13; }
@media (max-width: 72rem) { .sw-work > .sw-more { grid-column: 2 / 13; margin-top: 0.6rem; } }
@media (max-width: 54rem) { .sw-areas > .sw-more, .sw-group > .sw-more, .sw-block > .sw-more, .sw-work > .sw-more { grid-column: 1 / 13; } }

/* ==========================================================================
   THE REFUSAL WALL — the five corrections, made scannable.

   These were five Q&A items running 2,310px with no visual event, which is the
   page's longest unbroken text run and also its strongest content. The myth is
   now the large type and the correction sits under it; the evidence moved
   behind disclosure rather than being added to.

   P10 — OUR DEVICE, NOT SWISS BEHAVIOUR. The refusal mark and the struck
   question are Aesthetary's editorial apparatus for showing that a belief was
   tested and failed. Nothing here is a Swiss historical practice and nothing
   on this wall may be read as one. Swiss Style has no opinion about how to
   typeset a refuted claim; we do.

   The composition IS lawful Swiss: rank by position, weight and interval, one
   size step, hairline rule, flush left. No size-alone or colour-alone device.
   ========================================================================== */
.sw-correction { position: relative; }
.sw-correction__q {
  /* WAS --d2, which rendered at 82px. Five stacked myths at that size made the
     wall TALLER than the prose it replaced (2,545px against 2,310px) and you
     could not take in more than one at a time. The point of a wall is that the
     set is legible as a set, so the myth takes one step above its answer and
     no more. Rank comes from weight and interval, not from size alone. */
  font: 700 var(--d3)/1.15 var(--sw-grot);
  letter-spacing: -0.015em;
  max-width: 26ch;
  margin: 0 0 0.4rem;
}
.sw-correction__q::before {
  /* The refusal mark. A rule struck through the claim, drawn rather than a
     text-decoration so it sits on the grid and does not follow the descenders. */
  content: "";
  display: block;
  width: 2.5rem;
  border-top: 3px solid var(--sw-accent);
  margin-bottom: 0.6rem;
}
.sw-correction__a {
  font: 400 var(--g1)/1.45 var(--sw-grot);
  max-width: 38ch;
  margin: 0 0 0.75rem;
}
@media (min-width: 60rem) {
  .sw-correction { padding-block: var(--mod); }
  .sw-correction__main { grid-column: 2 / 10; }
}

/* ---- "How to read this page", reduced to visitor orientation -----------
   The lede carries the whole orientation in one line, so it takes a size step
   and the supporting sentence does not. The key is a single flush-left row of
   the four statement types — a legend, not a lesson. Rank by weight and
   interval; no size-alone device, per token_rule:hierarchy-device. */
.sw-read__intro { grid-column: 1 / 9; }
.sw-read__lede {
  margin: 0 0 0.6rem;
  font: 700 var(--d3)/1.2 var(--sw-grot);
  letter-spacing: -0.015em;
  max-width: 24ch;
}
.sw-read__orient { margin: 0; max-width: 52ch; color: var(--sw-ink-2); }
.sw-read__key {
  grid-column: 1 / -1;
  margin: var(--mod) 0 0;
  padding-top: 0.6rem;
  border-top: 1px solid var(--sw-rule);
  font: 400 var(--t3)/1.5 var(--sw-grot);
  color: var(--sw-ink-2);
}
.sw-read__key span { white-space: nowrap; }
.sw-read__keyfull { margin: var(--mod) 0 0; max-width: 60ch; }
@media (max-width: 60rem) { .sw-read__intro { grid-column: 1 / -1; } }

/* ==========================================================================
   THE READING ROOM — verdicts, the specimen tray, the discussion.
   Apparatus, not furniture: the page's own grotesk and mono, its hairlines,
   its one accent. No cards, no rounding, no shadow — same as everything
   above it. Prototype on this record only.
   ========================================================================== */

/* The wrapper is a JS root and a config carrier, never a box: display:
   contents hands its three blocks straight to the layer grid. Selector
   matching does not follow (`.sw-layer > *` still skips grandchildren), so
   the layer-child rules are restated for them, verbatim. */
.cm-comm { display: contents; }
.cm-comm > .sw-block {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gut);
  grid-column: 1 / -1;
}

/* Verdict buttons: the Show-the-sources control, three times, with the
   count in the apparatus mono. Selected = the page's accent doing its one
   job. */
.sw-verdict { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sw-verdict__btn {
  font: var(--t3)/1.4 var(--sw-grot); color: var(--sw-ink-2);
  background: transparent; border: 1px solid var(--sw-rule-2); border-radius: 0;
  padding: 0.35rem 0.6rem; cursor: pointer; min-height: 32px;
}
.sw-verdict__btn:hover { border-color: var(--sw-ink); color: var(--sw-ink); }
.sw-verdict__btn[aria-pressed="true"] {
  border-color: var(--sw-accent); color: var(--sw-accent);
}
.sw-verdict__btn i {
  font: var(--t3)/1 var(--sw-mono); font-style: normal;
  margin-inline-start: 0.5rem; color: var(--sw-ink-3);
  font-variant-numeric: tabular-nums;
}
.sw-verdict__btn[aria-pressed="true"] i { color: var(--sw-accent); }
.cm-comm__off { color: var(--sw-ink-3); }

/* The tray: specimens on the field, ruled apart, captioned in the page's
   two registers — grotesk for what it is, mono for who and when. */
.cm-tray { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.cm-tray__item { border-top: 1px solid var(--sw-rule); padding-top: 0.75rem; }
.cm-tray__item img { display: block; width: 100%; height: auto; background: var(--sw-field); border: 1px solid var(--sw-rule); }
.cm-tray__cap { margin: 0.5rem 0 0; font: var(--t2)/1.45 var(--sw-grot); color: var(--sw-ink); }
.cm-tray__meta { margin: 0.25rem 0 0; font: var(--t3)/1.5 var(--sw-mono); color: var(--sw-ink-3); }
.cm-tray__verdicts { margin: 0.5rem 0 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.cm-tray__verdicts button {
  font: var(--t3)/1.3 var(--sw-grot); color: var(--sw-ink-3);
  background: transparent; border: 1px solid var(--sw-rule); border-radius: 0;
  padding: 0.2rem 0.45rem; cursor: pointer;
}
.cm-tray__verdicts button:hover { border-color: var(--sw-ink); color: var(--sw-ink); }
.cm-tray__verdicts button[aria-pressed="true"] { border-color: var(--sw-accent); color: var(--sw-accent); }
.cm-tray__verdicts i { font-style: normal; font-family: var(--sw-mono); margin-inline-start: 0.3rem; }
.cm-tray__empty { font: var(--t2)/1.5 var(--sw-mono); color: var(--sw-ink-3); }

/* The discussion: a typographic list. The meta line is apparatus; the body
   is reading text. Nothing is a bubble. */
.cm-talk { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.cm-talk__item { border-top: 1px solid var(--sw-rule); padding: 0.75rem 0; }
.cm-talk__meta { margin: 0; font: var(--t3)/1.5 var(--sw-mono); color: var(--sw-ink-3); }
.cm-talk__body { margin: 0.25rem 0 0; font: var(--t1)/1.55 var(--sw-grot); color: var(--sw-ink); white-space: pre-line; max-width: 62ch; }
.cm-talk__empty { font: var(--t2)/1.5 var(--sw-mono); color: var(--sw-ink-3); }

/* One form vocabulary for the tray slip and the composer. */
.cm-commform { display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start; max-width: 34rem; margin-top: 1rem; }
.cm-commform textarea, .cm-commform input[type="text"] {
  width: 100%; font: var(--t1)/1.5 var(--sw-grot); color: var(--sw-ink);
  background: var(--sw-field); border: 1px solid var(--sw-rule-2); border-radius: 0;
  padding: 0.5rem 0.6rem;
}
.cm-commform textarea::placeholder, .cm-commform input::placeholder { color: var(--sw-ink-3); }
.cm-commform__file span {
  display: inline-block; font: var(--t3)/1.4 var(--sw-grot); color: var(--sw-ink-2); margin-bottom: 0.3rem;
}
.cm-commform__file input { display: block; font: var(--t3)/1.4 var(--sw-mono); color: var(--sw-ink-2); }
.cm-commform__go {
  font: var(--t3)/1.4 var(--sw-grot); color: var(--sw-ink);
  background: transparent; border: 1px solid var(--sw-ink); border-radius: 0;
  padding: 0.45rem 0.9rem; cursor: pointer; min-height: 32px;
}
.cm-commform__go:hover { color: var(--sw-accent); border-color: var(--sw-accent); }
.cm-commform__note { margin: 0; font: var(--t3)/1.5 var(--sw-mono); color: var(--sw-ink-2); }
.cm-commform__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* --- contribute & comment: a side panel once JavaScript is present -------
   Without JavaScript .cm-comm stays display: contents at the foot of the
   page, and "Contribute & comment" is a plain link down to it. */
.cm-comm.is-drawer {
  display: block; position: fixed; z-index: 60; inset: 0 0 0 auto;
  width: min(30rem, 100vw); overflow-y: auto; overscroll-behavior: contain;
  padding: 3.5rem var(--pad) var(--pad);
  background: var(--sw-paper); border-inline-start: 1px solid var(--sw-ink);
  visibility: hidden; transform: translateX(100%);
  transition: transform 0.2s ease-out, visibility 0s linear 0.2s;
}
.cm-comm.is-drawer.is-open { visibility: visible; transform: none; transition: transform 0.2s ease-out; }
.cm-comm.is-drawer > .sw-block { display: block; border-top: 1px solid var(--sw-rule); padding-block: 1.25rem; }
.cm-comm.is-drawer > .sw-block > * { grid-column: auto; }
.cm-drawer__close {
  position: absolute; top: 0.9rem; right: var(--pad);
  font: var(--t2)/1 var(--sw-grot); color: var(--sw-ink);
  background: none; border: 1px solid var(--sw-ink); padding: 0.45rem 0.75rem; cursor: pointer;
}
@media (prefers-reduced-motion: reduce) { .cm-comm.is-drawer, .cm-comm.is-drawer.is-open { transition: none; } }

/* Evidence exits: one list, one type treatment. */
.sw-exits { list-style: none; margin: 1.5rem 0 0; padding: 0; border-top: 1px solid var(--sw-rule); }
.sw-exits li { padding: 0.65rem 0; border-bottom: 1px solid var(--sw-rule); font: var(--t2)/1.45 var(--sw-grot); color: var(--sw-ink-2); }
.sw-exits a { color: var(--sw-ink); font-weight: 700; text-decoration: none; }
.sw-exits a:hover { color: var(--sw-accent); }
/* One drawer, two doors: Contribute shows the tray, Comment the discussion. */
.cm-comm.is-drawer[data-mode="tray"] > [aria-labelledby="e-discussion"],
.cm-comm.is-drawer[data-mode="talk"] > [aria-labelledby="e-tray"] { display: none; }
.cm-comm.is-drawer > .sw-block:not([hidden]) { border-top: 0; }

/* ==========================================================================
   THE PLATES (founder, 2026-09-26). More colour, more shape: a poster set.
   One flat red, used for a job (wayfinding and numbering), black, paper and
   the grid. TIER 2, ours. White on --sw-red is 4.7:1; red never carries text
   smaller than the numerals and panel labels, which are large.
   ========================================================================== */
.sw-page { --sw-red: #D52B1E; }

/* Wayfinding strip: the three layers as station panels. */
.swway { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); margin: calc(var(--band) * 0.8) 0 0; }
.swway__panel { position: relative; display: grid; align-content: space-between; min-height: clamp(9rem, 17vw, 14rem); padding: clamp(0.9rem, 1.8vw, 1.4rem); text-decoration: none; }
.sw-page .swway__panel--black { grid-column: 1 / 5; background: var(--sw-ink); color: var(--sw-paper); }
.sw-page .swway__panel--red { grid-column: 5 / 9; background: var(--sw-red); color: #fff; }
.sw-page .swway__panel--paper { grid-column: 9 / 13; background: var(--sw-field); color: var(--sw-ink); border: 1px solid var(--sw-rule-2); }
.swway__arrow { font: 700 clamp(2.5rem, 6vw, 5rem)/0.8 var(--sw-grot); }
.swway__n { position: absolute; right: clamp(0.9rem, 1.8vw, 1.4rem); bottom: clamp(0.4rem, 1vw, 0.8rem); font: 700 clamp(3.5rem, 8vw, 7rem)/0.85 var(--sw-grot); letter-spacing: -0.04em; }
.swway__t { font: 700 var(--d3)/1.1 var(--sw-grot); }
.swway__t i { font: 400 var(--t2)/1.3 var(--sw-grot); font-style: normal; opacity: 0.8; }
.swway__panel:hover .swway__arrow { transform: translateX(0.25em); }
.swway__panel:focus-visible { outline: 3px solid var(--sw-accent); outline-offset: 3px; }

/* Type specimen. */
.swspec { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); margin: var(--band) 0 0; padding-top: var(--gut); border-top: 1px solid var(--sw-ink); align-items: end; }
.swspec__aa { grid-column: 1 / 6; margin: 0; font: 700 clamp(8rem, 24vw, 20rem)/0.78 var(--sw-grot); letter-spacing: -0.06em; }
.swspec__body { grid-column: 7 / 13; }
.swspec__name { margin: 0 0 0.4rem; font: 700 var(--d3)/1.1 var(--sw-grot); }
.swspec__w { margin: 0 0 1rem; font: 400 var(--t1)/1.4 var(--sw-grot); }
.swspec__w > * { margin-inline-end: 0.6em; }
.swspec__abc { margin: 0 0 1rem; font: 400 var(--t1)/1.35 var(--sw-grot); letter-spacing: 0.02em; }
.swspec__cap { font-size: var(--t3); line-height: 1.5; color: var(--sw-ink-3); max-width: 42ch; }

/* Layer plates. Each a poster on the 12-column grid. */
.swp { grid-column: 1 / -1; position: relative; overflow: hidden; margin-top: var(--band); aspect-ratio: 12 / 5; background: var(--sw-field); border: 1px solid var(--sw-rule-2); }
.swp__n { position: absolute; font: 700 clamp(4rem, 12vw, 10rem)/0.8 var(--sw-grot); letter-spacing: -0.05em; color: var(--sw-ink); }
.swp__cap { position: absolute; font: 700 var(--t2)/1.25 var(--sw-grot); color: var(--sw-ink); }
.swp--disc .swp__n { left: 4%; top: 7%; }
.swp--disc .swp__disc { position: absolute; right: 9%; top: 12%; width: 34%; aspect-ratio: 1; border-radius: 50%; background: var(--sw-red); }
.swp--disc .swp__rule { position: absolute; right: calc(9% + 17%); top: 6%; bottom: 6%; width: 2px; background: var(--sw-ink); }
.swp--disc .swp__cap { left: 4%; bottom: 8%; }
.swp--raster .swp__grid { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(213, 43, 30, 0.35) 1px, transparent 1px), linear-gradient(to bottom, rgba(213, 43, 30, 0.35) 1px, transparent 1px); background-size: calc(100% / 12) calc(100% / 5); }
.swp--raster .swp__a { position: absolute; left: 30%; bottom: -24%; font: 700 clamp(14rem, 44vw, 38rem)/0.8 var(--sw-grot); letter-spacing: -0.06em; color: var(--sw-red); }
.swp--raster .swp__cap { left: 3%; top: 6%; font-weight: 400; }
.swp--raster .swp__n { right: 4%; top: 7%; }
.swp--squares .swp__sq { position: absolute; aspect-ratio: 1; }
.swp--squares .swp__sq--red { left: 30%; top: 12%; width: 30%; background: var(--sw-red); }
.swp--squares .swp__sq--black { left: 47%; top: 42%; width: 22%; background: var(--sw-ink); mix-blend-mode: multiply; }
.swp--squares .swp__cap { left: 4%; bottom: 8%; }
.swp--squares .swp__n { right: 4%; top: 7%; }

@media (max-width: 48rem) {
  .sw-page .swway__panel--black, .sw-page .swway__panel--red, .sw-page .swway__panel--paper { grid-column: 1 / -1; min-height: 7rem; margin-bottom: 2px; }
  .swspec__aa, .swspec__body { grid-column: 1 / -1; }
  .swp { aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) { .swway__panel:hover .swway__arrow { transform: none; } }

/* ---- THE POSTER HERO (2026-09-26) ------------------------------------------
   A flat red field the full width of the page column, the name in white, a
   black-ringed target. White on --sw-red is 4.7:1. */
.sw-mast--poster {
  position: relative; overflow: hidden; container-type: inline-size;
  margin-inline: calc(-1 * var(--s5)); padding: calc(var(--band) * 1.1) var(--s5) var(--band);
  background: var(--sw-red); color: #fff;
}
.sw-mast--poster .sw-mast__kicker { grid-column: 2 / -1; color: #fff; border-bottom-color: rgba(255,255,255,0.6); }
.sw-mast--poster .sw-mast__title { grid-column: 2 / 11; grid-row: 2; color: #fff; font-size: clamp(5rem, 16vw, 15rem); line-height: 0.8; position: relative; z-index: 1; }
.sw-mast--poster .sw-mast__summary { grid-column: 2 / 8; grid-row: 3; color: #fff; margin-top: calc(var(--gut) * 2); }
.sw-mast__vert {
  grid-column: 1; grid-row: 1 / span 4; margin: 0; align-self: end;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font: 500 var(--t3)/1 var(--sw-grot); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.85);
}
.sw-mast__key { grid-column: 8 / 13; grid-row: 3; align-self: end; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gut); }
.sw-mast__key dt { font: 700 var(--t3)/1.3 var(--sw-grot); color: #fff; }
.sw-mast__key dd { margin: 0.2rem 0 0; font: 400 var(--t3)/1.35 var(--sw-grot); color: rgba(255,255,255,0.88); }

/* The record at a glance, on paper, after the poster. */
.sw-intro { padding-top: var(--band); row-gap: var(--gut); align-items: start; }
.sw-intro__mark { grid-column: 1 / 2; grid-row: 1; aspect-ratio: 1; background: var(--sw-red); }
.sw-intro .sw-mast__recognise { grid-column: 3 / 9; grid-row: 1; margin: 0; }
.sw-intro .sw-mast__sig { font-size: var(--t2); line-height: 1.6; color: var(--sw-ink-2); }
.sw-mast__lede { display: block; margin-bottom: 0.8rem; font-size: var(--d3); line-height: 1.3; color: var(--sw-ink); }
.sw-intro .sw-mast__recognise { grid-column: 3 / 11; }
.sw-intro .sw-mast__meta { grid-column: 1 / -1; grid-row: 2; margin-top: var(--gut); border-top: 1px solid var(--sw-ink); padding-top: var(--gut); }

/* ---- THE 1958 BAND ----------------------------------------------------------- */
.sw-1958 {
  grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); row-gap: var(--gut);
  margin: var(--band) calc(-1 * var(--s5)) 0; padding: var(--band) var(--s5);
  background: var(--sw-ink); color: var(--sw-paper);
}
.sw-1958__k { grid-column: 1 / -1; margin: 0; font: 700 var(--t3)/1 var(--sw-grot); letter-spacing: 0.06em; }
.sw-1958__year { grid-column: 1 / 8; margin: 0; font: 700 clamp(5rem, 13vw, 14rem)/0.8 var(--sw-grot); letter-spacing: -0.06em; color: var(--sw-red); }
.sw-1958__text { grid-column: 8 / 13; align-self: end; margin: 0; font: 400 var(--t1)/1.5 var(--sw-grot); }
.sw-1958__figs { grid-column: 1 / -1; margin: calc(var(--gut) * 2) 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gut); border-top: 1px solid rgba(242,242,239,0.4); padding-top: var(--gut); }
.sw-1958__figs dt { font: 700 clamp(2rem, 4.2vw, 4rem)/0.9 var(--sw-grot); letter-spacing: -0.03em; }
.sw-1958__figs dd { margin: 0.3rem 0 0; font: 400 var(--t2)/1.3 var(--sw-grot); color: rgba(242,242,239,0.8); }

@media (max-width: 48rem) {
  .sw-mast--poster .sw-mast__title, .sw-mast--poster .sw-mast__summary, .sw-mast__key, .sw-mast--poster .sw-mast__kicker { grid-column: 2 / -1; }
  .sw-mast__key { grid-row: 4; grid-template-columns: 1fr 1fr; }
  .sw-intro .sw-mast__recognise { grid-column: 3 / -1; }
  .sw-1958__year, .sw-1958__text { grid-column: 1 / -1; }
  .sw-1958__figs { grid-template-columns: 1fr 1fr; }
}


/* FULL BLEED (founder, 2026-09-26): the poster hero and the 1958 band run to
   the edges of the main column, not the centred reading width. The field is
   extended sideways by a shadow the width of the viewport and clipped to the
   main column, so it never paints under the rail. The hero also rises behind
   the empty top bar (its only content is the fixed action cluster). */
#main:has(.sw-mast--poster) { overflow-x: clip; }
.sw-mast--poster { box-shadow: 0 0 0 100vmax var(--sw-red); clip-path: inset(0 -100vmax); margin-top: calc(-3rem - var(--s2)); padding-top: calc(var(--band) * 1.1 + 3rem); }
.sw-1958 { box-shadow: 0 0 0 100vmax var(--sw-ink); clip-path: inset(0 -100vmax); }

/* The target, as the reference draws it (founder, 2026-09-26): a black disc
   far larger than the title's column, bleeding off the top right of the red
   field; a thin red ring inside it; a small white dot set off-centre towards
   the upper right. The title crosses in front of it. */
.sw-mast--poster .sw-mast__title, .sw-mast--poster .sw-mast__summary, .sw-mast--poster .sw-mast__key, .sw-mast--poster .sw-mast__kicker, .sw-mast__vert { position: relative; z-index: 1; }

/* ==========================================================================
   BUILD WITH IT — the design-grammar board (pilot, 2026-09-26)
   A specimen sheet on the module grid. Same vocabulary as layer 02: three
   sizes (--g1 --g2 --g3), two weights, hierarchy from position. The
   specimens inside are allowed their own sizes because they ARE the grammar.
   --swg-a / --swg-b are the accent pair; the palette buttons swap them.
   ========================================================================== */
.swg { grid-column: 1 / -1; display: block !important; margin-top: var(--band); border-top: 3px solid var(--swg-color-text); padding-top: calc(var(--mod) * 1.5); }
.swg__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); row-gap: 0.5rem; }
.swg__title { grid-column: 1 / 5; margin: 0; font: 700 var(--d3)/1.1 var(--swg-font); letter-spacing: -0.01em; }
.swg__lede { grid-column: 5 / 11; margin: 0; font-size: var(--g1); line-height: 1.5; }
.swg__key { grid-column: 5 / 13; margin: var(--mod) 0 0; font-size: var(--g3); line-height: 1.6; color: var(--swg-color-text-secondary); }
.swg__get { grid-column: 5 / 13; margin: 0.5rem 0 0; font-size: var(--g3); color: var(--swg-color-text-muted); }
.swg__get code { font: var(--g3)/1 var(--sw-mono); }

/* the basis tags, reused everywhere on the board */
.swg-t { display: inline-block; margin-right: 0.35rem; padding: 0 0.3rem; font: 700 var(--g3)/1.6 var(--swg-font); border: 1px solid currentColor; white-space: nowrap; }
.swg-t[data-g="record"] { color: var(--swg-color-text); }
.swg-t[data-g="record"][data-basis="editorial_operationalization"] { color: var(--sw-accent); }
.swg-t[data-g="translation"] { color: var(--swg-color-surface); background: var(--swg-color-text); border-color: var(--swg-color-text); }
.swg-t[data-g="not_recorded"] { color: var(--swg-color-text-muted); border-style: dashed; font-weight: 400; }

/* the board: fields on a 12-column grid, each opened by a rule */
.swg__board { margin-top: calc(var(--mod) * 1.5); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); row-gap: calc(var(--mod) * 2); }
.swg-f { grid-column: 1 / -1; min-width: 0; border-top: 1px solid var(--swg-color-text); padding-top: var(--mod); }
.swg-f--colour { grid-column: 1 / 6; }
.swg-f--type { grid-column: 6 / 13; }
.swg-f--shape { grid-column: 1 / 5; }
.swg-f--img { grid-column: 5 / 13; }
.swg-f__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 var(--gut); margin-bottom: var(--mod); }
.swg-f__n { font: 700 var(--g1)/1 var(--swg-font); color: var(--swg-a, var(--sw-accent)); }
.swg-f__name { margin: 0; font: 700 var(--g1)/1.3 var(--swg-font); }
.swg-f__tally { margin: 0 0 0 auto; font: var(--g3)/1.3 var(--sw-mono); color: var(--swg-color-text-muted); }
.swg-f__note { margin: calc(-0.5 * var(--mod)) 0 var(--mod); font-size: var(--g2); color: var(--swg-color-text-secondary); max-width: 60ch; }
.swg-f__spec { min-width: 0; }
.swg-more { margin-top: var(--mod); font-size: var(--g2); }
.swg-more summary { cursor: pointer; font: 700 var(--g3)/1.5 var(--swg-font); color: var(--swg-color-text-secondary); }
.swg-more summary:hover { color: var(--swg-color-text); }
.swg-ls { margin: 0.75rem 0 0; padding: 0; list-style: none; }
.swg-ls li { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--gut); padding: 0.5rem 0; border-top: 1px solid var(--swg-color-rule); align-items: start; }
.swg-ls .swg-t { justify-self: start; }
.swg-ls__r { min-width: 0; line-height: 1.5; overflow-wrap: anywhere; }
.swg-ls__why { color: var(--swg-color-text-secondary); }
.swg-ls__from { display: block; margin-top: 0.15rem; font: var(--g3)/1.5 var(--sw-mono); color: var(--swg-color-text-muted); }

/* 01 colour */
.swg-roles { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gut); }
.swg-role { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.1rem; font-size: var(--g3); line-height: 1.4; overflow-wrap: anywhere; }
.swg-role__f { display: block; box-sizing: border-box; width: 100%; aspect-ratio: 1; border: 1px solid var(--swg-color-rule); margin-bottom: 0.35rem; }
.swg-role[data-live="a"] .swg-role__f { background: var(--swg-a) !important; border-color: var(--swg-a); }
.swg-role b { font-weight: 700; }
.swg-role code { font: var(--g3)/1.4 var(--sw-mono); color: var(--swg-color-text-secondary); }
.swg-role__c { color: var(--swg-color-text-muted); }
.swg-acc { margin-top: var(--mod); padding-top: 0.75rem; border-top: 1px solid var(--swg-color-rule); }
.swg-acc__h { margin: 0 0 0.5rem; font-size: var(--g2); color: var(--swg-color-text-secondary); }
.swg-acc__opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.swg-acc__b { display: grid; justify-items: start; gap: 0.2rem; padding: 0.5rem; background: var(--swg-color-surface); border: 1px solid var(--sw-rule-2); border-radius: var(--swg-radius); font: var(--g3)/1.3 var(--swg-font); color: var(--swg-color-text); text-align: left; cursor: pointer; }
.swg-acc__b:hover { border-color: var(--swg-color-text); }
.swg-acc__b[aria-pressed="true"] { border: 2px solid var(--swg-color-text); padding: calc(0.5rem - 1px); }
.swg-acc__chips { display: flex; width: 100%; height: 1.5rem; }
.swg-acc__chips i { flex: 1; }
.swg-acc__b span:last-child { color: var(--swg-color-text-muted); }

/* 02 typography: the sheet runs on a 0.75rem baseline, drawn */
.swg-type__sheet { padding: 0.75rem 0; background: repeating-linear-gradient(to bottom, transparent 0 calc(0.75rem - 1px), rgba(176,42,16,.14) calc(0.75rem - 1px) 0.75rem); max-width: 40rem; }
.swg-type__sheet p { margin: 0; }
.swg-type__label { font: 700 var(--swg-size-label)/var(--swg-leading-label) var(--swg-font); }
.swg-type__hl { margin-top: 0.75rem !important; font: 700 var(--swg-size-headline)/var(--swg-leading-headline) var(--swg-font); max-width: 22ch; }
.swg-type__body { margin-top: 0.75rem !important; font: 400 var(--swg-size-body)/var(--swg-leading-body) var(--swg-font); max-width: 62ch; }
.swg-type__spec { margin: var(--mod) 0 0; display: grid; gap: 0; font-size: var(--g3); }
.swg-type__spec > div { display: grid; grid-template-columns: 5rem 10.5rem 3rem minmax(0, 1fr); gap: var(--gut); padding: 0.35rem 0; border-top: 1px solid var(--swg-color-rule); }
.swg-type__spec dt { font-weight: 700; }
.swg-type__spec dd { margin: 0; font-family: var(--sw-mono); color: var(--swg-color-text-secondary); }
.swg-type__fam { margin: 0.75rem 0 0; font-size: var(--g3); color: var(--swg-color-text-secondary); max-width: 60ch; }

/* 03 grid: 12 × 8 modules, lines visible, one composition on whole modules */
.swg-grid { margin: 0; }
.swg-grid__w { position: relative; background: var(--swg-color-surface); border: 1px solid var(--swg-color-rule); }
.swg-grid__m, .swg-grid__cells { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(8, 2.25rem); gap: 0.375rem; padding: 0.375rem; }
.swg-grid__cells { position: absolute; inset: 0; }
.swg-grid__cells i { background: rgba(14,15,16,.06); }
.swg-grid__m { position: relative; }
.swg-gb { display: flex; align-items: flex-start; padding: 0.35rem 0.5rem; font: 700 var(--g3)/1.2 var(--swg-font); }
.swg-gb--head { grid-area: 1 / 1 / 3 / 8; background: var(--swg-color-text); color: var(--swg-color-surface); font-size: var(--g1); }
.swg-gb--img { grid-area: 1 / 8 / 5 / 13; background: #9C9F99; color: var(--swg-color-surface); }
.swg-gb--t1 { grid-area: 3 / 1 / 7 / 5; background: repeating-linear-gradient(to bottom, var(--sw-rule-2) 0 2px, transparent 2px 0.75rem); color: var(--swg-color-text-secondary); padding-top: 0; }
.swg-gb--t2 { grid-area: 3 / 5 / 6 / 8; background: repeating-linear-gradient(to bottom, var(--sw-rule-2) 0 2px, transparent 2px 0.75rem); color: var(--swg-color-text-secondary); padding-top: 0; }
.swg-gb--cap { grid-area: 5 / 8 / 6 / 11; border-top: 1px solid var(--swg-color-text); color: var(--swg-color-text-secondary); }
.swg-gb--act { grid-area: 8 / 1 / 9 / 3; background: var(--swg-a); color: #fff; }
.swg-grid__cap { display: flex; flex-wrap: wrap; gap: 0.25rem var(--mod); margin-top: 0.75rem; font-size: var(--g3); color: var(--swg-color-text-secondary); }
.swg-grid__cap b { color: var(--swg-color-text); }
.swg-steps { margin: 0.75rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.35rem; font-size: var(--g3); }
.swg-steps li { display: grid; grid-template-columns: minmax(0, 1fr) 1.5rem 7rem; gap: var(--gut); align-items: center; }
.swg-steps__bar { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 3px; height: 0.75rem; width: calc(var(--n) / 12 * 100%); }
.swg-steps__bar i { background: var(--sw-rule-2); }
.swg-steps span:last-child { color: var(--swg-color-text-muted); }

/* 04 shape */
.swg-shape { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gut); }
.swg-sh { display: grid; gap: 0.35rem; font-size: var(--g3); }
.swg-sh > span { display: block; height: 4.5rem; }
.swg-sh__corner { border-top: 6px solid var(--swg-color-text); border-left: 6px solid var(--swg-color-text); width: 4.5rem; }
.swg-sh__rule { display: grid !important; grid-template-columns: 1fr 1fr; }
.swg-sh__rule i { background: var(--swg-color-surface); }
.swg-sh__rule i + i { border-left: 1px solid var(--swg-color-text); }
.swg-sh__flat { background: var(--swg-color-text); }
.swg-sh__mod { width: calc(3 * 1.5rem + 2 * 0.375rem); height: 3rem !important; margin-top: 1.5rem; background: var(--swg-a); outline: 1px dashed var(--sw-rule-2); outline-offset: 0.375rem; }
.swg-no { margin: var(--mod) 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem var(--gut); font-size: var(--g3); color: var(--swg-color-text-secondary); }
.swg-no li { display: flex; align-items: center; gap: 0.5rem; text-decoration: line-through; text-decoration-color: var(--swg-color-text-muted); }
.swg-no__x { position: relative; display: inline-block; width: 1.5rem; height: 1.5rem; opacity: 0.5; }
.swg-no__x::after { content: ""; position: absolute; left: -2px; right: -2px; top: 50%; border-top: 2px solid var(--swg-color-text); transform: rotate(-45deg); }
.swg-no__x--round { border: 2px solid var(--swg-color-text); border-radius: 0.5rem; }
.swg-no__x--shadow { background: var(--swg-color-surface); box-shadow: 3px 3px 6px rgba(0,0,0,.4); }
.swg-no__x--orn { font-size: 1.25rem; line-height: 1.5rem; text-align: center; text-decoration: none; }
.swg-no__x--filter { background: linear-gradient(135deg, #b98ac9, #e7b36a); }
.swg-no__x--tilt { border: 2px solid var(--swg-color-text); transform: rotate(-12deg); }
.swg-no__x--ill { border: 2px solid var(--swg-color-text); border-radius: 50% 40% 55% 45%; }

/* 05 imagery */
.swg-img { margin: 0; }
.swg-img__m { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: 0.375rem; row-gap: 0.5rem; }
.swg-img__photo { position: relative; grid-column: 1 / 6; aspect-ratio: 4 / 3; background: #7E817C; }
.swg-img__crop { position: absolute; inset: -0.375rem; pointer-events: none;
  background: linear-gradient(var(--swg-color-text), var(--swg-color-text)) top left / 0.75rem 1px no-repeat, linear-gradient(var(--swg-color-text), var(--swg-color-text)) top left / 1px 0.75rem no-repeat,
              linear-gradient(var(--swg-color-text), var(--swg-color-text)) bottom right / 0.75rem 1px no-repeat, linear-gradient(var(--swg-color-text), var(--swg-color-text)) bottom right / 1px 0.75rem no-repeat; }
.swg-img__lbl { position: absolute; left: 0.5rem; bottom: 0.5rem; font: 700 var(--g3)/1.2 var(--swg-font); color: #fff; }
.swg-img__cap { grid-column: 1 / 5; margin: 0; font: 700 var(--swg-size-label)/var(--swg-leading-label) var(--swg-font); }
.swg-img__text { grid-column: 6 / 9; grid-row: 1; margin: 0; font-size: var(--g2); line-height: 1.5; color: var(--swg-color-text-secondary); }

/* 06 components — the accent is whichever palette is chosen */
.swg-ui { display: grid; row-gap: calc(var(--mod) * 2); }
/* the interface: the four together on the module grid */
.swg-site { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); row-gap: calc(var(--swg-module) * 2); padding: 0 var(--swg-module) calc(var(--swg-module) * 2); background: var(--swg-color-background); border: 1px solid var(--swg-color-rule); }
.swg-site .swg-nav { grid-column: 1 / -1; }
.swg-site__hero { grid-column: 1 / 9; display: grid; align-content: start; gap: 0.75rem; }
.swg-site__lbl { margin: 0; font: 700 var(--swg-size-label)/var(--swg-leading-label) var(--swg-font); color: var(--swg-color-text-muted); }
.swg-site__h { margin: 0; font: 700 var(--swg-size-headline)/var(--swg-leading-headline) var(--swg-font); max-width: 22ch; }
.swg-site__p { margin: 0; font: 400 var(--swg-size-body)/var(--swg-leading-body) var(--swg-font); color: var(--swg-color-text-secondary); max-width: var(--swg-measure); }
.swg-site__hero .swg-btns { margin-top: 0.75rem; }
.swg-site__form { grid-column: 9 / 13; display: grid; align-content: start; gap: 0.75rem; padding-top: calc(var(--swg-leading-label) + 0.75rem); }
.swg-site__form .swg-btn { justify-self: start; }
.swg-site__cards { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gut); }
.swg-site .swg-card__t { font-size: var(--swg-size-body); line-height: var(--swg-leading-body); }
/* then the parts, each in its states */
.swg-parts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--mod) * 1.5) var(--gut); }
.swg-part { min-width: 0; padding-top: 0.75rem; border-top: 1px solid var(--swg-color-rule); }
.swg-states--in li, .swg-states--card li { min-width: 6rem; }
.swg-inx { display: block; width: 6rem; height: 2.25rem; border: 1px solid var(--swg-color-text-secondary); background: var(--swg-color-surface); }
.swg-inx--focus { border: 2px solid var(--swg-color-text); outline: 2px solid var(--swg-color-text); outline-offset: 2px; }
.swg-inx--disabled { border-color: var(--sw-rule-2); background: var(--swg-color-background); }
.swg-part .swg-in--err { margin-top: var(--mod); }
.swg-navx { display: inline-block; padding-bottom: 0.35rem; border-bottom: 3px solid transparent; font: 400 var(--swg-size-body)/1.2 var(--swg-font); color: var(--swg-color-text); }
.swg-navx--hover { text-decoration: underline; text-decoration-color: var(--swg-a); text-underline-offset: 0.3em; }
.swg-navx--current { font-weight: 700; border-bottom-color: var(--swg-b); }
.swg-card--x { min-width: 8rem; padding-top: 0.5rem; }
.swg-card--x.swg-card--hover { padding-top: calc(0.5rem - 2px); }
.swg-card__tx { font: 700 var(--swg-size-body)/var(--swg-leading-body) var(--swg-font); }
.swg-c__name { margin: 0 0 0.75rem; font: 700 var(--g3)/1.3 var(--swg-font); color: var(--swg-color-text-muted); }
.swg-c__becomes { margin: 0.75rem 0 0; font-size: var(--g2); line-height: 1.5; color: var(--swg-color-text-secondary); max-width: 48ch; }

.swg-nav { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); margin: 0 calc(-1 * var(--swg-module));  padding: 0 var(--swg-module); border-top: 1px solid var(--swg-color-rule); border-bottom: 1px solid var(--swg-color-rule); }
.swg-nav a { grid-column: span 2; display: flex; align-items: center; min-height: 3rem; font: 400 var(--swg-size-body)/1 var(--swg-font); color: var(--swg-color-text); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.swg-nav a:hover { text-decoration: underline; text-decoration-color: var(--swg-a); text-underline-offset: 0.3em; }
.swg-nav a[aria-current="page"] { font-weight: 700; border-bottom-color: var(--swg-b); }
.swg-nav a:focus-visible { outline: 2px solid var(--swg-color-text); outline-offset: 2px; }

.swg-btns { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.swg-btn { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 3rem; padding: 0 1.5rem; border: 0; border-radius: var(--swg-radius); background: var(--swg-a); color: #fff; font: 700 var(--swg-size-body)/1 var(--swg-font); text-align: left; cursor: pointer; box-shadow: none; transition: background-color 100ms linear, color 100ms linear; }
.swg-btn:hover, .swg-btn--hover { background: var(--swg-color-text); color: #fff; }
.swg-btn:focus-visible, .swg-btn--focus { outline: 2px solid var(--swg-color-text); outline-offset: 2px; }
.swg-btn:active, .swg-btn--active { background: var(--swg-color-surface); color: var(--swg-color-text); box-shadow: inset 0 0 0 1px var(--swg-color-text); }
.swg-btn--2 { background: var(--swg-color-background); color: var(--swg-color-text); box-shadow: inset 0 0 0 1px var(--swg-color-text); }
.swg-btn--2:hover { background: var(--swg-color-text); color: var(--swg-color-background); }
.swg-btn--disabled, .swg-btn:disabled { background: transparent; color: var(--swg-color-text-muted); box-shadow: inset 0 0 0 1px var(--sw-rule-2); cursor: not-allowed; }
.swg-states { margin: var(--mod) 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.75rem var(--gut); }
.swg-states li { display: grid; gap: 0.35rem; justify-items: start; font-size: var(--g3); color: var(--swg-color-text-muted); }
.swg-states .swg-btn { min-height: 2.25rem; padding: 0 0.75rem; font-size: var(--g2); cursor: default; }

.swg-in { display: grid; gap: 0.35rem; max-width: 24rem; min-width: 0; }
.swg-in input { box-sizing: border-box; width: 100%; min-width: 0; }
.swg-in + .swg-in { margin-top: var(--mod); }
.swg-in label { font: 700 var(--swg-size-label)/var(--swg-leading-label) var(--swg-font); }
.swg-in input { height: 3rem; padding: 0 0.75rem; border: 1px solid var(--swg-color-text-secondary); border-radius: var(--swg-radius); background: var(--swg-color-surface); color: var(--swg-color-text); font: 400 var(--swg-size-body)/1 var(--swg-font); box-shadow: none; }
.swg-in input:hover { border-color: var(--swg-color-text); }
.swg-in input:focus-visible { outline: 2px solid var(--swg-color-text); outline-offset: 2px; border-color: var(--swg-color-text); box-shadow: inset 0 0 0 1px var(--swg-color-text); }
.swg-in p { margin: 0; font-size: var(--g3); color: var(--swg-color-text-secondary); }
.swg-in--err input { border-color: var(--swg-a); box-shadow: inset 0 0 0 1px var(--swg-a); }
.swg-in--err p { color: var(--swg-a); font-weight: 700; }

.swg-card { display: grid; gap: 0.35rem; max-width: 24rem; padding-top: 0.75rem; border-top: 1px solid var(--swg-color-text); color: var(--swg-color-text); text-decoration: none; transition: border-color 100ms linear; }
.swg-card:hover, .swg-card--hover { border-top: 3px solid var(--swg-b); padding-top: calc(0.75rem - 2px); }
.swg-card:focus-visible { outline: 2px solid var(--swg-color-text); outline-offset: 4px; }
.swg-card__lbl { font: 700 var(--swg-size-label)/var(--swg-leading-label) var(--swg-font); color: var(--swg-color-text-muted); }
.swg-card__t { font: 700 var(--swg-size-headline)/var(--swg-leading-headline) var(--swg-font); }
.swg-card__b { font-size: var(--swg-size-body); line-height: var(--swg-leading-body); color: var(--swg-color-text-secondary); }

/* 07 motion — one block, twelve modules, moves by whole modules */
.swg-mo__track { --pos: 0; position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); height: 3rem; background: repeating-linear-gradient(to right, var(--swg-color-surface) 0 calc(100% / 12 - 1px), var(--swg-color-rule) calc(100% / 12 - 1px) calc(100% / 12)); border: 1px solid var(--swg-color-rule); }
.swg-mo__block { grid-column: 1; background: var(--swg-a); transform: translateX(calc(var(--pos) * 100%)); transition: transform 200ms cubic-bezier(0.25, 0, 0, 1); }
.swg-mo__ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 0.75rem; }
.swg-mo__pos { font: var(--g3)/1 var(--sw-mono); color: var(--swg-color-text-muted); }
.swg-mo__spec { margin: var(--mod) 0 0; display: grid; font-size: var(--g2); }
.swg-mo__spec > div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--gut); padding: 0.4rem 0; border-top: 1px solid var(--swg-color-rule); }
.swg-mo__spec dt { font-weight: 700; }
.swg-mo__spec dd { margin: 0; color: var(--swg-color-text-secondary); }
.swg-mo__spec code { font: var(--g3)/1 var(--sw-mono); }
.swg-mo__bar { display: inline-block; vertical-align: middle; width: calc(var(--ms) * 0.06rem); height: 0.5rem; margin-right: 0.5rem; background: var(--swg-a); }

@media (prefers-reduced-motion: reduce) {
  .swg-mo__block, .swg-btn, .swg-card { transition: none; }
}

/* laptop / tablet: the board re-composes rather than shrinks */
@media (max-width: 64rem) {
  .swg-f--colour, .swg-f--type, .swg-f--shape, .swg-f--img { grid-column: 1 / -1; }
  .swg-roles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .swg-shape { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .swg__title, .swg__lede, .swg__key, .swg__get { grid-column: 1 / -1; }
}
@media (max-width: 40rem) {
  .swg-roles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .swg-acc__opts { grid-template-columns: 1fr; }
  .swg-acc__b { grid-template-columns: 3rem 1fr auto; align-items: center; }
  .swg-shape { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .swg-type__spec > div { grid-template-columns: 4.5rem 1fr 2.5rem; } .swg-type__spec dd:last-child { grid-column: 2 / -1; }
  /* the grid specimen becomes 4 columns: the same composition, stacked */
  .swg-grid__m, .swg-grid__cells { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(10, 2.25rem); }
  .swg-grid__cells i:nth-child(n+41) { display: none; }
  .swg-gb--head { grid-area: 1 / 1 / 3 / 5; }
  .swg-gb--img { grid-area: 3 / 1 / 6 / 5; }
  .swg-gb--cap { grid-area: 6 / 1 / 7 / 4; }
  .swg-gb--t1 { grid-area: 7 / 1 / 10 / 5; }
  .swg-gb--t2 { display: none; }
  .swg-gb--act { grid-area: 10 / 1 / 11 / 3; }
  .swg-steps li { grid-template-columns: minmax(0, 1fr) 1.5rem 5.5rem; }
  .swg-img__m { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .swg-img__photo { grid-column: 1 / -1; }
  .swg-img__cap { grid-column: 1 / -1; }
  .swg-img__text { grid-column: 1 / -1; grid-row: auto; }
  .swg-site__hero, .swg-site__form { grid-column: 1 / -1; }
  .swg-site__form { padding-top: 0; }
  .swg-site__cards, .swg-parts { grid-template-columns: 1fr; }
  .swg-nav { grid-template-columns: 1fr; }
  .swg-nav a { grid-column: 1; border-bottom: 1px solid var(--swg-color-rule); border-left: 3px solid transparent; padding-left: 0.75rem; margin: 0; }
  .swg-nav a[aria-current="page"] { border-left-color: var(--swg-b); border-bottom-color: var(--swg-color-rule); }
  .swg-ls li, .swg-mo__spec > div { grid-template-columns: 1fr; gap: 0.25rem; }
  .swg-f__tally { margin-left: 0; flex-basis: 100%; }
}

/* EVIDENCE IS OPT-IN (founder, 2026-09-26). The per-claim provenance marks
   stay in the markup for screen readers and the "Show all sources" switch,
   but a designer reading the page is not made to look at them. */
.sw-prov-toggle:not(:checked) ~ * .sw-prov-wrap { display: none; }

.sw-layer > .sw-evd { display: block; }
.sw-evd { grid-column: 1 / -1; margin-top: var(--mod); border-top: 1px solid var(--sw-ink); border-bottom: 1px solid var(--sw-rule); }
.sw-evd__sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem var(--gut); padding: var(--mod) 0; cursor: pointer; font: 700 var(--t1)/1.3 var(--sw-grot); list-style: none; }
.sw-evd__sum::-webkit-details-marker { display: none; }
.sw-evd__sum::before { content: "+"; display: inline-block; width: 1rem; color: var(--sw-accent); }
.sw-evd[open] > .sw-evd__sum::before { content: "−"; }
.sw-evd__sum span { font: 400 var(--t3)/1.3 var(--sw-grot); color: var(--sw-ink-3); }
.sw-evd > :not(summary) { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); }
.sw-made { max-width: 44rem; }
.sw-made .sw-h4 { margin: var(--mod) 0 0.35rem; }