/* Pain and Disability Evidence. Hand-maintained since 19 September 2026: build.py and src/ are not on this machine, so edit this file directly, rename it to its new hash, and repoint every page. The design system (design-system/) documents every token below. */

/* ============================================================
   Pain Evidence — SERVICES page

   Third page on the three-channel shell. Notes specific to it:

   PROFILE COLUMN — COMPACT, with the fees as its page-specific
   block. On a page a reader reaches while deciding whether to
   engage, "what does it cost" should be answerable at every
   scroll position, not only at section 9.

   THE RAIL IS SPARSE HERE, AND THAT IS THE RULE WORKING.
   Thirteen sections, four rails. Most of this page is
   procedural — what happens, in what order, for how much — and
   procedure has no external authority behind it. A rail block
   appears only where a decided case actually supports the
   claim: sections 5, 7, 8 and 11. The rest run full width.

   SECTION 3 RUNS FULL WIDTH BECAUSE THE LAW IS ITS SUBJECT.
   The six causes with their "needs:" lines are what the page is
   about there, not support for something else. Putting them in
   the margin would put the subject in the margin, and drop it
   entirely on a phone.

   THREE MOVEMENTS. Sections 1-3 are the argument, 4-8 are what
   happens, 9-13 are the particulars. Handovers are mandatory
   through the first two, where the page is making a case. In
   the third the reader is looking things up rather than being
   led, so sections stand alone.
   Three channels: profile (the practice) | content | rail (sources).

   THE RAIL RULE. Every rail block opens with a source outside
   this practice — a provision, a rule, a Tribunal sentence —
   and may add one short reading of it. Nothing whose source is
   the practice itself appears there: price, terms, funding,
   credentials, counts and commitments are Simon's own voice and
   belong in the profile column or the main column.

   A section with no external source gets NO rail, and the row
   runs full width. That is the hero and the closing call.

   This is what makes the rail safe to drop below 900px: it is
   only ever source material plus commentary, so nothing a
   reader needs in order to act is lost with it. The split is by
   reader, not by screen: the phone reader is overwhelmed and
   does not need more law; the desktop reader is usually a
   professional and wants it.

   THE MIDDLE-COLUMN GRAMMAR. Every section is the same slots,
   always in this order. Slots may be skipped. Never reordered.

     1 HEADING    the claim, readable alone
     2 CLAIM      one paragraph restating it plainly
     3 MECHANISM  how and why — at most ONE object (a list or
                  a table). Never two.
     4 PROOF      optional. One decided case, 45 words maximum,
                  in .proof, with its citation. Only where it
                  strictly makes the section's argument.
     5 ACTION     optional. One link.
     6 HANDOVER   one line, carrying the question the next
                  section answers. Mandatory.

   The hero is exempt; it is a hero.

   .proof takes a rust rule and never a fill, because a decided
   case is external authority — the same reason .mg-quote does.

   COLOUR SYSTEM: colour says whose voice is speaking, and
   nothing else. Neutral ink carries all prose, rules and
   structure; a hue appears only to mark who is talking.

   ACCENT (teal): THE PRACTICE. Links, CTAs, sequence marks,
     the profile column, counters, the own-voice rail block.
   FLAG (rust): DECIDED MATTERS. Cases, Tribunal passages,
     dispositions, citations. A rule or text, never a fill,
     never an action.
   LAW (violet): THE ACT, THE RULES, THE SIX CAUSES. Rail
     blocks classed law. Same rule-not-fill treatment as rust.
   WARN (red): ANYTHING UNREVIEWED. Draft version lines,
     placeholders, the draft notice. Must be gone before a page
     publishes. --draft is an alias of --warn.

   Every token is declared once, in the three blocks below:
   light on :root, dark under prefers-color-scheme (unless the
   page is stamped data-theme="light"), and dark again under
   data-theme="dark" so an explicit choice wins both ways.
   ============================================================ */

:root{
  /* Type scale, added 20 September 2026. Seven steps, nothing below 12px.
     Every font-size in this stylesheet points at one of these, so the whole
     scale is tuned by editing the numbers here and nowhere else. */
  --fs-micro:12px;   /* mono labels, citations, credential lines */
  --fs-xs:13.5px;    /* table cells, fine print, logo, nav button */
  --fs-sm:15px;      /* secondary body, margin notes, fees table */
  --fs-base:16.5px;  /* main reading size */
  --fs-lg:19px;      /* lede, standfirst, profile name */
  --fs-xl:21px;      /* in-content h3 */
  --fs-stat:23px;    /* counters */
  --fs-fig:38px;     /* margin figure */
  --fs-h1:clamp(30px,5.2vw,44px);
  --fs-h2:clamp(24px,3.4vw,32px);

  --ground:#FDFCFA; --surface:#FDFCFA; --surface-2:#F3EFE9;
  --ink:#171A18; --ink-2:#414945; --ink-3:#6B756F;
  --rule:#D5DCD6; --rule-soft:#E4E9E4;
  --accent:#2E5D57; --accent-ink:#22453F; --accent-wash:#E3ECE9;
  --flag:#9E4224; --flag-wash:#F3E3DC;
  --law:#6B4B8A;
  --warn:#D4291C; --draft:var(--warn);
  --on-accent:#FFFFFF;
  --tile-edge:transparent;
  --shadow-tile:none;
  --nav-h:72px;   /* the bar's real height plus its buffer; 74px with the menu button */
  --serif:"IBM Plex Serif", Georgia, "Times New Roman", serif;
  --sans:"Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --measure:58ch;
  --rail-w:288px;
  --prof-w:230px;
  --gutter:24px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#1C1A18; --surface:#1C1A18; --surface-2:#262320;
    --ink:#EDF1EE; --ink-2:#BAC3BE; --ink-3:#8B958F;
    --rule:#313935; --rule-soft:#262C29;
    --accent:#77B5AB; --accent-ink:#9ACFC5; --accent-wash:#1C2B28;
    --flag:#D98862; --flag-wash:#2C1E17; --on-accent:#0E1614;
    --law:#B197D1; --warn:#FF8F85;
    --tile-edge:transparent;
    --shadow-tile:none;
  }
}
:root[data-theme="dark"]{
  --ground:#1C1A18; --surface:#1C1A18; --surface-2:#262320;
  --ink:#EDF1EE; --ink-2:#BAC3BE; --ink-3:#8B958F;
  --rule:#313935; --rule-soft:#262C29;
  --accent:#77B5AB; --accent-ink:#9ACFC5; --accent-wash:#1C2B28;
  --flag:#D98862; --flag-wash:#2C1E17; --on-accent:#0E1614;
  --law:#B197D1; --warn:#FF8F85;
  --tile-edge:transparent;
  --shadow-tile:none;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--sans);font-size:var(--fs-base);line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.wrap{max-width:1420px;margin:0 auto;padding-inline:30px}

/* ---------- site header ---------- */
.sitenav{
  background:var(--surface);margin-inline:-30px;padding-inline:30px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-block:18px;border-bottom:1px solid var(--rule-soft);
}
.logo{font-family:var(--mono);font-size:var(--fs-xs);font-weight:500;letter-spacing:.18em;text-transform:uppercase}
.navlinks{display:flex;gap:20px;flex-wrap:wrap;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.navlinks a[aria-current="page"]{color:var(--ink);border-bottom:1px solid var(--ink)}
.navbtn{font-size:var(--fs-xs);font-weight:500;background:var(--accent);color:var(--on-accent);padding:8px 15px;border-radius:3px;white-space:nowrap}


/* ============================================================
   THREE-CHANNEL SHELL
   profile (persistent, sticky) | content | rail (per-section)
   The profile column is THE PRACTICE speaking about itself, so
   it is accent territory throughout — no rust ever appears in
   it. It is also enhancement: below 1120px it collapses to a
   single compact identity strip above the content.
   ============================================================ */
.shell{display:grid;grid-template-columns:var(--prof-w) minmax(0,1fr);gap:var(--gutter);padding-block:var(--gutter)}
.content{align-self:start;display:grid;gap:var(--gutter)}
.profile{min-width:0}
.pf-full{height:100%}
/* the pinned head carries its own surface, so the static blocks below
   pass behind it instead of showing through */
.pf-pin{position:sticky;top:var(--gutter);z-index:2;background:var(--surface);border:1px solid var(--rule-soft);padding:20px 20px 22px}
.content{min-width:0;align-self:start}

.pf-port{display:block;width:118px;height:126px;object-fit:cover;object-position:50% 14%;background:var(--surface-2);border-bottom:2px solid var(--accent)}
.pf-name{font-family:var(--serif);font-weight:600;font-size:var(--fs-lg);line-height:1.2;letter-spacing:-.015em;margin:12px 0 5px;color:var(--ink)}
.pf-role{font-size:var(--fs-sm);line-height:1.45;color:var(--ink-2);margin:0 0 6px}
.pf-loc{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);margin:0}

.pf-sec{background:var(--surface);border:1px solid var(--rule-soft);padding:18px 20px 20px;margin-top:var(--gutter)}
.pf-pin .pf-sec-in{background:transparent;border:0;padding:0;margin-top:20px}
.pf-sec > h3{font-family:var(--mono);font-size:var(--fs-micro);font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 12px;padding-bottom:9px;border-bottom:1px solid var(--ink)}
.pf-cred{margin:0;padding:0;list-style:none}
.pf-cred li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 8px;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--rule-soft);font-size:var(--fs-xs);line-height:1.4;color:var(--ink-2)}
@media (max-width:1240px){
  .pf-cred li{grid-template-columns:minmax(0,1fr)}
  .pf-cred b{grid-column:1}
}
.pf-cred li:last-child{border-bottom:0}
.pf-cred b{font-family:var(--mono);font-size:var(--fs-micro);font-weight:400;letter-spacing:.08em;color:var(--accent-ink)}
.pf-cred li.draft b{color:var(--draft)}
.pf-ver li{padding:7px 0}
.pf-ver a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 8px;align-items:baseline}
.pf-ver a::after{content:"↗";font-family:var(--mono);font-size:var(--fs-micro);color:var(--ink-3);grid-column:2;grid-row:1}
.pf-ver b{grid-column:1;grid-row:2}
@media (max-width:1240px){.pf-ver a{grid-template-columns:minmax(0,1fr) auto}}

.pf-count{margin:0;padding:0;list-style:none}
.pf-count li{display:flex;align-items:baseline;gap:10px;padding:7px 0;border-bottom:1px solid var(--rule-soft)}
.pf-count li:last-child{border-bottom:0}
.pf-count .v{font-family:var(--serif);font-size:var(--fs-stat);font-weight:600;line-height:1;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;min-width:46px}
.pf-count .k{font-size:var(--fs-xs);line-height:1.35;color:var(--ink-3)}
.pf-count li.draft .v{color:var(--draft)}
.pf-cta{display:block;margin-top:18px;font-family:var(--serif);font-size:var(--fs-sm);font-weight:600;color:var(--ink);border-bottom:2px solid var(--accent);padding-bottom:3px}
/* Short viewports: shrink the pinned head so it still fits and pins,
   rather than switching sticky off and leaving a dead gutter. */
@media (max-height:620px){
  .pf-name{font-size:var(--fs-base);margin-top:10px}
  .pf-cta{margin-top:13px;font-size:var(--fs-sm)}
  .pf-pin{padding:16px 18px 18px}
}

/* collapsed identity strip — shown only when the column is not */
.pf-strip{display:none}

/* ---------- two-channel rows ---------- */
.row{display:grid;grid-template-columns:minmax(0,1fr) var(--rail-w);gap:var(--gutter);align-items:start}
.row.full{grid-template-columns:minmax(0,1fr)}
.main{background:var(--surface);border:1px solid var(--rule-soft);padding:34px 36px 36px;min-width:0}
.row.full .main{padding:40px 36px 38px}
.rail{min-width:0;display:grid;gap:var(--gutter);align-content:start}
.mg{background:var(--surface);border:1px solid var(--rule-soft);padding:18px 20px 20px;margin:0}

/* ---------- main column type ----------
   Container defaults are wrapped in :where(), which gives them no
   specificity. They set how plain paragraphs and headings look, and
   any component class (.lede, .note-h, .mg-quote, .disclaimer...)
   now wins over them without needing .main in front or !important.
   Before 23 September these defaults outranked fourteen components,
   which rendered as body text instead of as written. */
:where(.main h1){font-family:var(--serif);font-weight:700;font-size:var(--fs-h1);line-height:1.1;margin:0 0 20px;letter-spacing:-.022em;text-wrap:balance;max-width:20ch}
:where(.main h2){font-family:var(--serif);font-weight:600;font-size:var(--fs-h2);line-height:1.26;margin:0 0 16px;letter-spacing:-.012em;text-wrap:balance;max-width:38ch}
:where(.main p){margin:0 0 16px;color:var(--ink-2);font-size:var(--fs-base);line-height:1.66;max-width:var(--measure)}
:where(.main p:last-child){margin-bottom:0}
:where(.main strong){color:var(--ink);font-weight:600}
.lede{font-size:var(--fs-lg);color:var(--ink);max-width:62ch}
.main p.handover{margin-top:22px}

.ctas{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;margin-top:30px}
.btn{
  display:inline-block;font-family:var(--sans);font-weight:600;font-size:var(--fs-base);line-height:1.2;
  background:var(--accent);color:var(--on-accent);padding:14px 22px;border-radius:3px;
  box-shadow:inset 0 -2px 0 rgb(0 0 0 / .22);
}
.btn:hover{background:var(--accent-ink)}
.btn-2{font-family:var(--serif);font-size:var(--fs-base);color:var(--ink-3);border-bottom:1px solid var(--rule)}
.undercta{font-size:var(--fs-sm);color:var(--ink-3);margin-top:14px}

.seq{margin:16px 0 0;padding:0;list-style:none;max-width:var(--measure)}
.seq li{position:relative;color:var(--ink-2);font-size:var(--fs-base);line-height:1.55;padding:0 0 9px 20px}
.seq li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1px;background:var(--accent)}
.seq li:last-child{padding-bottom:0}
.seq + p{margin-top:18px}

/* PROOF — a decided case. External authority: rust rule, never a fill. */
.proof{border-left:2px solid var(--flag);padding-left:20px;margin:24px 0 0;max-width:var(--measure)}
:where(.proof p){margin:0 0 10px;font-size:var(--fs-sm);line-height:1.6;color:var(--ink-2)}
.proof .cite{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.09em;text-transform:uppercase;color:var(--flag);margin:0}
.proof .cite a{color:var(--flag);border-bottom:1px solid currentColor}

.jump{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-sm);font-weight:500;color:var(--accent-ink);margin-top:18px}
.jump::before{content:"→";font-size:var(--fs-sm);color:var(--accent)}

.inv{margin-top:24px;border-top:1px solid var(--rule-soft);max-width:62ch}
.inv a{display:grid;grid-template-columns:150px minmax(0,1fr);gap:3px 20px;padding:13px 0;border-bottom:1px solid var(--rule-soft);align-items:baseline}
.inv .n{font-weight:600;color:var(--accent-ink);font-size:var(--fs-sm)}
.inv .g{color:var(--ink-3);font-size:var(--fs-sm);line-height:1.5}

.tblwrap{overflow-x:auto}
.fees{width:100%;border-collapse:collapse;margin-top:8px;font-size:var(--fs-sm);max-width:var(--measure)}
.fees th{text-align:left;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);font-weight:400;padding:0 14px 8px 0;border-bottom:1px solid var(--rule)}
.fees td{padding:11px 14px 11px 0;border-bottom:1px solid var(--rule-soft);color:var(--ink-2)}
.fees td:first-child{color:var(--ink);font-weight:500}
.fees td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.fees tr:last-child td{border-bottom:0}
.terms{margin:22px 0 0;padding:0;list-style:none;max-width:var(--measure);border-top:1px solid var(--rule)}
.terms li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--rule-soft);font-size:var(--fs-sm);color:var(--ink-2)}
.terms li:last-child{border-bottom:0}
.terms b{font-family:var(--mono);font-size:var(--fs-xs);font-weight:400;color:var(--accent-ink);white-space:nowrap}
.fineprint{font-size:var(--fs-sm);color:var(--ink-3);margin-top:14px}
.referrer{margin-top:28px;padding-top:18px;border-top:1px solid var(--rule);font-size:var(--fs-sm);color:var(--ink-3);max-width:var(--measure)}
.referrer a{color:var(--accent-ink);font-weight:500}

/* ---------- rail blocks ---------- */
.mg{margin-bottom:32px}
.mg-lab{
  display:flex;justify-content:space-between;gap:10px;
  font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-ink);border-bottom:2px solid var(--ink);padding-bottom:6px;margin-bottom:13px;
}
.mg-lab span:last-child{color:var(--ink-3)}
.mg p.mg-src{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.07em;text-transform:uppercase;color:var(--flag);line-height:1.5;margin-top:10px;margin-bottom:0}
/* .auth — the block quotes external authority. Rust, and only here. */
.mg.auth .mg-lab{color:var(--flag)}
.mg-quote{background:var(--surface-2);border-top:2px solid var(--flag);padding:12px 14px 13px;font-family:var(--mono);font-size:var(--fs-xs);line-height:1.55;color:var(--ink);margin-bottom:11px}
.mg-quote em{font-style:normal;color:var(--flag)}
.mg-quote b{font-weight:500;color:var(--flag)}
:where(.mg p){margin:0 0 10px;font-family:var(--serif);font-size:var(--fs-sm);line-height:1.5;color:var(--ink-2)}
:where(.mg p:last-child){margin-bottom:0}
.mg p.mg-fig{font-family:var(--serif);font-size:var(--fs-fig);font-weight:600;line-height:1;letter-spacing:-.02em;color:var(--ink);margin:2px 0 4px;font-variant-numeric:tabular-nums}
.mg p.mg-cap{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);line-height:1.4;margin-bottom:9px}
.mg-link{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.11em;text-transform:uppercase;color:var(--accent-ink);display:inline-block;margin-top:4px}
.mg-note{font-family:var(--sans);font-size:var(--fs-xs);color:var(--ink-3);line-height:1.5}
.mg-list{margin:0;padding:0;list-style:none}
.mg-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:7px 0;border-bottom:1px solid var(--rule-soft);font-family:var(--serif);font-size:var(--fs-sm);color:var(--ink-2);line-height:1.4}
.mg-list li:last-child{border-bottom:0}
.mg-list b{font-family:var(--mono);font-size:var(--fs-micro);font-weight:400;color:var(--ink-2);white-space:nowrap;padding-top:2px}
.mg.auth .mg-list b{color:var(--flag)}
.mg-list li.grp{
  display:block;border-bottom:1px solid var(--ink);padding:14px 0 5px;
  font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);
}
.mg-list li.grp:first-child{padding-top:0}

/* DRAFT MARKERS: red (--draft is --warn). Unreviewed, so neither
   the practice's voice nor anyone else's. Remove before publishing. */
.ph{border:1px dashed var(--draft);color:var(--draft);font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.06em;line-height:1.5;padding:11px 12px;margin-bottom:11px}
.mg p.unver{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.09em;text-transform:uppercase;color:var(--draft);line-height:1.4;margin-top:10px;margin-bottom:0;display:flex;align-items:center;gap:7px}
.mg p.unver::before{content:"";width:14px;height:1px;background:var(--draft);flex:none}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--rule);background:var(--surface);padding-block:30px 40px}
:where(.foot p){margin:0 0 10px;font-size:var(--fs-sm);color:var(--ink-3);max-width:70ch}
:where(.foot p:last-child){margin-bottom:0}


/* ---------- profile column collapse ---------- */
@media (max-width:1240px){
  :root{--prof-w:200px;--rail-w:242px;--gutter:20px}
  .main{padding:30px 28px 32px}
  .row.full .main{padding:34px 28px 32px}
}
@media (max-width:1060px){
  :root{--prof-w:176px;--rail-w:206px;--gutter:14px}
  .main{padding:26px 22px 28px}
  .row.full .main{padding:30px 22px 28px}
  .mg{padding:16px 16px 18px}
  .pf-sec{padding:16px 16px 18px}
  .pf-pin .pf-sec-in{margin-top:16px}
  .pf-pin{padding:18px 16px 20px}
  .pf-port{width:100px;height:107px}
  .pf-name{font-size:var(--fs-lg)}
}
@media (max-width:860px){
  .shell{grid-template-columns:minmax(0,1fr);gap:0}
  .profile{position:static;margin:0;background:var(--surface);border:1px solid var(--rule-soft);padding:16px 18px}
  .profile .pf-full{display:none}
  .pf-strip{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
  .pf-strip img{width:52px;height:52px;object-fit:cover;object-position:50% 18%;border-bottom:2px solid var(--accent);flex:none}
  .pf-strip .pf-name{margin:0;font-size:var(--fs-lg)}
  .pf-strip .pf-role{font-size:var(--fs-xs);margin:0}
  .pf-strip .pf-marks{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);margin-left:auto;white-space:nowrap}
}
@media (max-width:560px){
  .pf-strip .pf-marks{margin-left:0;flex-basis:100%}
}

/* ============================================================
   MOBILE — the rail is wholly enhancement.
   With the case panels removed, every rail block is reference
   material: the Act, the Rules, the figures, the terms. None of
   it is load-bearing, so below 900px the rail is dropped whole
   and the main column carries the page on its own.
   ============================================================ */
@media (max-width:900px){
  .row{grid-template-columns:1fr;gap:0}
  .rail{display:none}
}
@media (max-width:560px){
  .wrap{padding-inline:14px}
  .main{padding:24px 20px 26px}
  .sitenav{margin-inline:-14px;padding-inline:14px}
  .ctas{flex-direction:column;align-items:flex-start;gap:16px}
  .btn-2{align-self:flex-start}
  .undercta{margin-top:28px}
  .navlinks{display:none}
  .inv a{grid-template-columns:1fr;gap:2px}
}
/* ---------- METHOD PAGE ---------- */
.movement{
  display:flex;align-items:baseline;gap:14px;margin:0 0 4px;padding-block:6px;
  font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
}
.movement span:last-child{color:var(--flag)}
.movement::after{content:"";flex:1;height:1px;background:var(--rule);align-self:center}
.stepnum{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--flag);margin:0 0 10px}
:where(.main h3){font-family:var(--serif);font-weight:600;font-size:var(--fs-xl);line-height:1.3;margin:0 0 6px;letter-spacing:-.01em;max-width:34ch}
.substd{font-family:var(--mono);font-size:var(--fs-micro);line-height:1.5;color:var(--ink-3);margin:0 0 16px;max-width:52ch}
.why{color:var(--ink)}
.ord{margin:16px 0 0;padding:0 0 0 22px;max-width:var(--measure)}
.ord li{color:var(--ink-2);font-size:var(--fs-base);line-height:1.6;padding-bottom:10px}
.ord li::marker{font-family:var(--mono);font-size:var(--fs-xs);color:var(--flag)}
.heap{width:100%;border-collapse:collapse;margin-top:18px;font-size:var(--fs-sm);max-width:var(--measure)}
.heap th{text-align:left;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);font-weight:400;padding:0 14px 8px 0;border-bottom:1px solid var(--rule)}
.heap td{padding:10px 14px 10px 0;border-bottom:1px solid var(--rule-soft);color:var(--ink-2);vertical-align:top;line-height:1.5}
.heap td:first-child{font-family:var(--mono);color:var(--flag);width:26px;padding-right:10px}
.heap td:nth-child(2){color:var(--ink);font-weight:600;white-space:nowrap}
.heap tr:last-child td{border-bottom:0}
.reqs{width:100%;border-collapse:collapse;margin-top:20px;font-size:var(--fs-sm)}
.reqs th{text-align:left;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);font-weight:400;padding:0 16px 8px 0;border-bottom:1px solid var(--ink)}
.reqs td{padding:11px 16px 11px 0;border-bottom:1px solid var(--rule-soft);color:var(--ink-2);vertical-align:top;line-height:1.5}
.reqs td:first-child{color:var(--ink);font-weight:600;white-space:nowrap}
.reqs td:last-child{font-family:var(--mono);font-size:var(--fs-xs);color:var(--flag);white-space:nowrap}
.reqs tr:last-child td{border-bottom:0}
.reqs tr:last-child td:first-child{color:var(--ink-3)}
.standfirst{border-left:2px solid var(--accent);padding-left:22px;margin:0 0 4px;max-width:58ch}
:where(.standfirst p){font-family:var(--serif);font-size:var(--fs-lg);line-height:1.5;color:var(--ink);margin:0 0 14px}
:where(.standfirst p:last-child){margin-bottom:0;font-size:var(--fs-base);color:var(--ink-2)}
.mg .verdict{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase}
.pf-doc li{display:block;padding:7px 0;border-bottom:1px solid var(--rule-soft);font-size:var(--fs-xs);color:var(--ink-2)}
.pf-doc li:last-child{border-bottom:0}
.pf-doc b{display:block;font-family:var(--mono);font-size:var(--fs-micro);font-weight:400;letter-spacing:.08em;color:var(--accent-ink);margin-bottom:2px}
.causes{margin-top:24px;border-top:1px solid var(--rule);max-width:var(--measure)}
.cause{padding:16px 0;border-bottom:1px solid var(--rule-soft)}
.cause:last-child{border-bottom:0}
.main .cause-h{margin:0 0 6px;color:var(--ink);font-weight:600;font-size:var(--fs-base);max-width:none}
.cause-h span{font-family:var(--mono);font-size:var(--fs-micro);font-weight:400;color:var(--flag);white-space:nowrap;margin-left:6px}
.main .cause-n{margin:0;font-size:var(--fs-sm);line-height:1.55;max-width:none}
.cause-n b{font-family:var(--mono);font-size:var(--fs-micro);font-weight:400;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.pf-fine{font-size:var(--fs-micro);color:var(--ink-3);line-height:1.45;margin:12px 0 0}
.main p.why-q{margin-bottom:18px}

/* ============================================================
   Site additions — everything the three built pages did not need.
   Written against the same tokens; no new colours, no new faces.
   ============================================================ */

/* ---------- skip link ---------- */
.skiplink{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--accent);color:var(--on-accent);
  font-family:var(--sans);font-size:var(--fs-sm);font-weight:600;
  padding:10px 16px;border-radius:3px;
}
.skiplink:focus{left:8px;top:8px}

/* ---------- footer, to v5/footer-spec.md ----------
   Three columns at desktop, one below 700px, in the order
   identity · documents · scope. The spec puts it on --surface-2;
   its body text is --ink-2 rather than the spec's --ink-3, because
   ink-3 on surface-2 is 4.1:1 in the light theme and 13.5px text
   needs 4.5:1. Same surface, legible text. No fills, nothing rust:
   the footer quotes nobody. */
.foot{border-top:1px solid var(--rule);background:var(--surface-2);padding-block:34px 44px;margin-top:var(--gutter)}
.foot-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 40px;align-items:start}
.foot-col{min-width:0}
.foot-h{
  font-family:var(--mono);font-size:var(--fs-micro);font-weight:400;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);margin:0 0 12px;padding-bottom:9px;border-bottom:1px solid var(--ink);
}
:where(.foot p){margin:0 0 10px;font-size:var(--fs-sm);line-height:1.5;color:var(--ink-2);max-width:46ch}
:where(.foot p:last-child){margin-bottom:0}
.foot-id strong{color:var(--ink);font-weight:600}
.foot-ver,.foot-docs{margin:0;padding:0;list-style:none}
.foot-ver li,.foot-docs li{padding:6px 0;border-bottom:1px solid var(--rule-soft);font-size:var(--fs-xs);line-height:1.4;color:var(--ink-2)}
.foot-ver li:last-child,.foot-docs li:last-child{border-bottom:0}
.foot-ver a,.foot-docs a{color:var(--ink-2)}
.foot-ver a:hover,.foot-docs a:hover{color:var(--ink)}
.foot-ver b,.foot-docs b{font-family:var(--mono);font-size:var(--fs-micro);font-weight:400;letter-spacing:.08em;color:var(--accent-ink)}
.foot-ver a::after{content:" ↗";font-family:var(--mono);font-size:var(--fs-micro);color:var(--ink-3)}
.foot-ver li.draft b{color:var(--draft)}
.foot .foot-copy{margin-top:16px;font-size:var(--fs-xs);color:var(--ink-2)}
.foot .ph{max-width:46ch;margin-bottom:10px}
@media (max-width:700px){
  .foot-grid{grid-template-columns:minmax(0,1fr);gap:26px}
}

/* ---------- case note header ---------- */
.main .note-cite{
  font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 6px;
}
.note-cite b{font-weight:500;color:var(--ink)}
.note-outcome{
  display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;
  margin:0 0 22px;padding-bottom:16px;border-bottom:1px solid var(--rule);max-width:var(--measure);
}
.note-outcome .o{font-family:var(--serif);font-size:var(--fs-lg);font-weight:600;color:var(--ink);line-height:1.3}
.note-outcome .g{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.09em;text-transform:uppercase;color:var(--flag)}
.note-h{
  font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin:26px 0 10px;padding-bottom:7px;border-bottom:1px solid var(--rule-soft);
  max-width:var(--measure);
}
.disclaimer{
  margin-top:32px;padding-top:18px;border-top:1px solid var(--rule);
  font-size:var(--fs-sm);line-height:1.55;color:var(--ink-3);max-width:var(--measure);
}
.pairing{margin-top:22px;font-size:var(--fs-sm);color:var(--ink-2)}
.pairing a{color:var(--accent-ink);font-weight:500;border-bottom:1px solid var(--rule)}

/* ---------- case notes index ---------- */
.cn-counts{
  display:flex;flex-wrap:wrap;gap:10px 28px;margin:20px 0 0;padding:0;list-style:none;
  border-top:1px solid var(--rule);padding-top:16px;max-width:var(--measure-wide,62ch);
}
.cn-counts li{display:flex;align-items:baseline;gap:9px}
.cn-counts .v{font-family:var(--serif);font-size:var(--fs-stat);font-weight:600;line-height:1;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.cn-counts .k{font-size:var(--fs-xs);color:var(--ink-3);line-height:1.35}
.main .cn-asat{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);margin:12px 0 0}

.cn-index{width:100%;border-collapse:collapse;margin-top:18px;font-size:var(--fs-sm)}
.cn-index th{
  text-align:left;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);font-weight:400;padding:0 14px 8px 0;border-bottom:1px solid var(--ink);
}
.cn-index td{padding:11px 14px 11px 0;border-bottom:1px solid var(--rule-soft);color:var(--ink-2);vertical-align:top;line-height:1.45}
.cn-index tr:last-child td{border-bottom:0}
.cn-index td:first-child{color:var(--ink);font-weight:600}
.cn-index td.cite{font-family:var(--mono);font-size:var(--fs-xs);color:var(--flag);white-space:nowrap}
.cn-index td.disp{font-family:var(--mono);font-size:var(--fs-micro);color:var(--ink-3)}
.cn-index tr:target td{background:var(--accent-wash)}
.cn-dagger{font-family:var(--mono);color:var(--flag)}

/* ---------- utility ---------- */
.anchor-note{font-size:var(--fs-sm);color:var(--ink-3);margin-top:12px}
.main h2 .sec-n{font-family:var(--mono);font-size:var(--fs-xs);font-weight:400;letter-spacing:.1em;color:var(--ink-3);margin-right:8px;vertical-align:.18em}
.stub{max-width:var(--measure)}

/* ---------- print ---------- */
@media print{
  .sitenav,.skiplink,.navbtn,.pf-strip{display:none!important}
  .shell,.row{display:block!important}
  .main,.mg,.pf-sec,.pf-pin{border:0;padding:0;background:transparent}
  .rail{display:block!important;margin-top:18px}
  .foot{background:transparent}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:var(--fs-micro);color:#555}
}

/* ---------- published-document pages (the protocol) ---------- */
.pf-doc.toc li{padding:5px 0}
.pf-doc.toc a{color:var(--ink-2);font-size:var(--fs-xs);line-height:1.35;display:block}
.pf-doc.toc a:hover{color:var(--accent-ink)}
.main code{font-family:var(--mono);font-size:var(--fs-sm);color:var(--ink);background:var(--surface-2);padding:1px 5px}
:where(.main h4){font-family:var(--serif);font-weight:600;font-size:var(--fs-lg);line-height:1.35;margin:22px 0 6px;color:var(--ink);max-width:40ch}
.main .standfirst + h3,.main .standfirst + h4{margin-top:26px}
.row.full[id]{scroll-margin-top:18px}

/* ============================================================
   STICKY NAVIGATION
   The header sticks with the small ground-coloured buffer it
   already had above it, so the bar never sits flush against the
   viewport edge. The profile column's pinned head pins below it
   rather than under it.
   ============================================================ */
header.wrap{
  position:sticky;top:0;z-index:30;
  background:var(--ground);padding-top:10px;
}
.pf-pin{top:calc(var(--nav-h) + 12px)}
.row[id],.row.full[id],[id]{scroll-margin-top:calc(var(--nav-h) + 12px)}

/* ============================================================
   ONE COLUMN WIDTH DOWN THE PAGE
   The hero spans the full content width. Every section after it
   keeps the main column at exactly the width it has when a rail
   is present, so the measure never changes as the reader scrolls
   — a section without a rail leaves that space empty rather than
   growing into it.
   ============================================================ */
.row.hero{grid-template-columns:minmax(0,1fr)}
.row.full{grid-template-columns:minmax(0,1fr) var(--rail-w)}
.row.full .main{padding:34px 36px 36px}
.row.hero .main{padding:40px 36px 38px}
@media (max-width:1240px){
  .row.full .main{padding:30px 28px 32px}
  .row.hero .main{padding:34px 28px 32px}
}
@media (max-width:1060px){
  .row.full .main{padding:26px 22px 28px}
  .row.hero .main{padding:30px 22px 28px}
}
@media (max-width:900px){
  .row.full{grid-template-columns:minmax(0,1fr)}
}

/* Verify rows that are a stated fact rather than a linked number:
   no ↗, no mono value, same rhythm as the linked rows above them. */
.pf-cred.pf-plain{margin-top:2px}
.pf-cred.pf-plain li{grid-template-columns:minmax(0,1fr)}
.foot-docs.foot-plain li{color:var(--ink-2)}
.foot-cta{color:var(--accent-ink);font-weight:600;border-bottom:2px solid var(--accent);padding-bottom:2px}

/* ---------- the screen form ---------- */
.cform{margin-top:20px;max-width:var(--measure)}
.cform-hp{position:absolute;left:-9999px}
.cform-row{display:grid;gap:6px;margin-bottom:18px}
.cform-row label{
  font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);
}
.cform-row label .opt{text-transform:none;letter-spacing:.04em;color:var(--ink-3);opacity:.8}
.cform input,.cform select,.cform textarea{
  font-family:var(--sans);font-size:var(--fs-base);line-height:1.5;color:var(--ink);
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius-control,3px);
  padding:11px 13px;width:100%;
}
.cform textarea{resize:vertical;min-height:120px}
.cform input:focus-visible,.cform select:focus-visible,.cform textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-color:var(--accent);
}
.cform input::placeholder,.cform textarea::placeholder{color:var(--ink-3)}
.main .cform-note{font-size:var(--fs-sm);color:var(--ink-3);margin:6px 0 0}
.cform button.btn{border:0;cursor:pointer;font-family:var(--sans)}

/* ---------- the case-notes index, 120 rows ---------- */
.main .cn-sec{
  font-family:var(--mono);font-size:var(--fs-micro);font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  margin:30px 0 0;padding-bottom:8px;border-bottom:1px solid var(--ink);
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;max-width:none;
}
.cn-sec-n{font-family:var(--serif);font-size:var(--fs-sm);color:var(--ink);font-variant-numeric:tabular-nums}
.cn-index{margin-top:0}
.cn-index th{border-bottom:1px solid var(--rule-soft);padding-top:10px}
.cn-index td{padding:10px 14px 10px 0}
.cn-case{color:var(--ink);font-weight:600;min-width:150px}
.cn-case a{border-bottom:1px solid var(--accent)}
.cn-case a:hover{color:var(--accent-ink)}
.cn-cite{display:block;font-family:var(--mono);font-size:var(--fs-micro);font-weight:400;letter-spacing:.06em;color:var(--flag);margin-top:3px;white-space:nowrap}
.cn-date{white-space:nowrap;font-size:var(--fs-xs);color:var(--ink-3)}
.cn-out{min-width:140px}
.cn-out .disp{display:block;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-top:3px}
.cn-req{font-family:var(--mono);font-size:var(--fs-micro);line-height:1.5;letter-spacing:.04em;color:var(--ink-3)}
.cn-index tr:target{outline:2px solid var(--accent);outline-offset:2px}

.cn-tools{margin:22px 0 4px;padding:14px 16px;border:1px solid var(--rule-soft);background:var(--surface-2)}
.cn-search{display:grid;gap:5px;margin-bottom:12px}
.cn-search span{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2)}
.cn-search input{
  font-family:var(--sans);font-size:var(--fs-sm);color:var(--ink);background:var(--surface);
  border:1px solid var(--rule);border-radius:var(--radius-control,3px);padding:9px 11px;width:100%;
}
.cn-search input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cn-chips{display:flex;flex-wrap:wrap;gap:7px}
.cn-chip{
  font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius-control,3px);padding:6px 10px;cursor:pointer;
}
.cn-chip:hover{border-color:var(--accent)}
.cn-chip.is-on{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.cn-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.main .cn-count{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-2);margin:11px 0 0}
.cn-foot{margin:14px 0 0;padding:0;list-style:none;max-width:none}
.cn-foot li{padding:10px 0;border-bottom:1px solid var(--rule-soft);font-size:var(--fs-sm);line-height:1.55;color:var(--ink-2)}
.cn-foot li:last-child{border-bottom:0}
.cn-foot strong{color:var(--ink)}
@media (max-width:700px){
  .cn-index{font-size:var(--fs-sm)}
  .cn-date,.cn-req{display:none}
}
.art-list a{grid-template-columns:minmax(0,22ch) minmax(0,1fr)}
.art-list .n{font-weight:600;color:var(--accent-ink);font-size:var(--fs-sm)}
.main .source-line{font-size:var(--fs-sm);color:var(--ink-2)}
.source-line strong{color:var(--ink)}
.source-line .c{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.06em;color:var(--flag);margin-left:6px}
.source-line a{color:var(--accent-ink);border-bottom:1px solid var(--rule)}

/* ============================================================
   MOBILE NAVIGATION
   The v5 build hid .navlinks entirely below 560px, which left a
   phone reader with a wordmark, one button and no way to reach
   any other page. On a site whose readers are people with
   disabilities that is the wrong trade. The links stay; they move
   to their own full-width row under the wordmark.
   ============================================================ */
@media (max-width:560px){
  .sitenav{padding-block:14px}
  .navlinks{
    display:flex;
    order:3;flex-basis:100%;
    gap:9px 16px;
    margin-top:11px;padding-top:11px;
    border-top:1px solid var(--rule-soft);
  }
  .navbtn{font-size:var(--fs-xs);padding:7px 12px}
}

/* ============================================================
   SITE NAVIGATION — WIDE BAR, AND A MENU BUTTON ON SMALL SCREENS
   Added 20 September 2026.

   WIDE (821px and up). The bar keeps its single row. The links
   gain vertical padding so the target is the height of the bar
   rather than the height of the lettering, and the bar's own
   padding comes down by the same amount so --nav-h does not move.
   Hover states the link the way the current page is already
   stated, one rule, so the affordance is learnable.

   NARROW (820px and down). The links leave the bar for a panel
   under it, reached by a button. The wordmark and the booking
   button stay visible at every width, because the booking button
   is the thing the page is for. The old two-row and three-row
   fallbacks are retired, so --nav-h becomes one number again.
   Without JavaScript none of this applies and the links stay in
   the bar, wrapping as they did before.
   ============================================================ */

.navtoggle{display:none}

@media (min-width:821px){
  .sitenav{padding-block:8px}
  /* The target is the full height of the bar; the underline stays tight
     to the lettering, so a padded hit area doesn't read as a dropped rule. */
  .navlinks a{display:inline-block;padding-block:12px;border-bottom:0}
  .navlinks a[aria-current="page"]{
    border-bottom:0;color:var(--ink);
    text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;
  }
  .navlinks a:hover{
    color:var(--ink);
    text-decoration:underline;text-decoration-thickness:1px;
    text-underline-offset:5px;text-decoration-color:var(--rule);
  }
  .navlinks a[aria-current="page"]:hover{text-decoration-color:currentColor}
}

@media (max-width:820px){
  html.js-nav{--nav-h:74px}

  .js-nav .sitenav{padding-block:10px;flex-wrap:nowrap}
  .js-nav .logo{order:1;margin-right:auto}
  .js-nav .navbtn{order:2}

  .js-nav .navtoggle{
    order:3;display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;margin-right:-10px;
    background:none;border:0;border-radius:3px;cursor:pointer;color:var(--ink);
  }
  .js-nav .navtoggle span{position:relative}
  .js-nav .navtoggle span,
  .js-nav .navtoggle span::before,
  .js-nav .navtoggle span::after{
    display:block;width:20px;height:1.5px;background:currentColor;
    transition:transform .16s ease,opacity .16s ease;
  }
  .js-nav .navtoggle span::before,
  .js-nav .navtoggle span::after{content:"";position:absolute}
  .js-nav .navtoggle span::before{transform:translateY(-6px)}
  .js-nav .navtoggle span::after{transform:translateY(6px)}
  .js-nav[data-nav="open"] .navtoggle span{background:transparent}
  .js-nav[data-nav="open"] .navtoggle span::before{transform:rotate(45deg)}
  .js-nav[data-nav="open"] .navtoggle span::after{transform:rotate(-45deg)}

  /* PANEL A — full height sheet */
  .js-nav .navlinks{
    position:fixed;left:0;right:0;top:var(--nav-h);
    height:calc(100dvh - var(--nav-h));
    display:block;margin:0;padding:6px 0 28px;
    background:var(--surface);border-top:1px solid var(--rule-soft);
    font-size:var(--fs-base);letter-spacing:.08em;color:var(--ink);
    overflow-y:auto;z-index:40;
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s;
  }
  .js-nav[data-nav="open"] .navlinks{
    opacity:1;visibility:visible;transform:none;
    transition:opacity .16s ease,transform .16s ease;
  }
  .js-nav .navlinks a{
    display:block;padding:17px 30px;color:var(--ink);
    border-bottom:1px solid var(--rule-soft);
  }
  .js-nav .navlinks a[aria-current="page"]{
    border-bottom:1px solid var(--rule-soft);color:var(--accent-ink);
    box-shadow:inset 3px 0 0 var(--accent);
  }
  html.js-nav[data-nav="open"] body{overflow:hidden}
}

@media (max-width:560px){
  .js-nav .navlinks{padding-inline:0}
  .js-nav .navlinks a{padding-inline:14px}
}

/* ============================================================
   LIFTED TILES, RULED RAIL
   Added 21 September 2026, from two style studies.

   The ground drops a step so the three channels lift off it on a
   soft, wide shadow rather than sitting flat against a near-white
   field. The rail stays flat and takes a rust keyline down its
   edge: rust is the voice of everyone outside the practice, which
   is the rule this build already sets, so the rail states its
   source before it is read. No gradients anywhere.

   Dark mode swaps the shadows for keylines, because a shadow on a
   dark ground states nothing.
   ============================================================ */
/* --ground, --tile-edge and --shadow-tile are declared with the other tokens at the top. */

.main,.pf-pin,.pf-sec,.mg{
  border:1px solid var(--tile-edge);border-radius:5px;
  box-shadow:var(--shadow-tile);
}
.main{border-radius:6px}

.mg{
  border-left:3px solid var(--flag);
  border-top-left-radius:2px;border-bottom-left-radius:2px;
}
.mg-lab{color:var(--flag)}

.pf-sec > h3{border-bottom:1px solid var(--accent)}
.pf-count .v,.cn-counts .v{color:var(--accent-ink)}
.fees th{border-bottom:2px solid var(--accent)}
.navbtn{box-shadow:0 1px 2px rgba(23,26,24,.12), 0 6px 14px -6px rgba(46,93,87,.5)}


/* ============================================================
   THE PROFILE COLUMN PINS AS ONE PIECE
   Previously its head was sticky and the blocks below scrolled
   under it, so a block behind the card was cut through the middle.
   Now the column itself is the sticky element; profile-pin.js
   measures it and sets the offset, bottom-aligning it when it is
   taller than the space available.
   ============================================================ */
@media (min-width:861px){
  /* .profile keeps stretching to the full height of the shell, because
     that box is what the sticky column is allowed to travel inside.
     Shrinking it to its content makes the column scroll away halfway
     down the page. Only the column itself takes its content height. */
  .pf-full{height:auto;position:sticky;top:var(--pf-top,calc(var(--nav-h) + 12px))}
  .pf-pin{position:static;z-index:auto}
}

/* ============================================================
   THE RAIL SPEAKS IN TWO VOICES
   Added 21 September 2026.

   Legislation is not a case, and the two were being stated in the
   same colour. From here: the Act, the Rules and the six causes
   are violet; decided matters — cases, Tribunal passages, a
   disposition — stay rust. One glance tells the reader whether
   the margin is quoting the law or quoting a decision.

   Violet was already defined as the unverified-draft mark, which
   the build requires to be gone before anything publishes. No
   page in this build carries one, so the colour was free. It is
   its own token here, so changing either meaning is a one-line
   edit rather than a search.
   ============================================================ */
/* --law is declared with the other tokens at the top. */

.mg.law{border-left-color:var(--law)}
.mg.law .mg-lab{color:var(--law)}
.mg.law .mg-quote{border-top-color:var(--law)}
.mg.law .mg-quote em,.mg.law .mg-quote b{color:var(--law)}
.mg.law p.mg-src{color:var(--law)}
.mg.law .mg-list b{color:var(--law)}

/* ============================================================
   CORRECTIONS, 21 September 2026
   ============================================================ */

/* The rail's left edge takes the same corner as every other edge;
   the keyline was being squared off against rounded neighbours. */
.mg{border-top-left-radius:5px;border-bottom-left-radius:5px}

/* The Verify block sits inside the pinned card and is not a tile
   of its own, so it carries neither shadow nor corner. */
.pf-pin .pf-sec-in{box-shadow:none;border-radius:0}

/* Verify is two lists, one linked and one stated, and each was
   dropping the rule under its own last row — so the join between
   them had no hairline at all. This restores it. */
.pf-sec .pf-cred + .pf-cred{border-top:1px solid var(--rule-soft)}
.pf-cred.pf-plain{margin-top:0;padding-top:0}
.pf-sec .pf-cred + .pf-cred > li:first-child{padding-top:7px}

/* The hero row now reserves the rail's column like every row
   below it, so its right edge lines up with the rest of the page
   instead of running 312px past them. This overrides the "hero
   spans the full content width" rule in the wireframe. */
.row.hero{grid-template-columns:minmax(0,1fr) var(--rail-w)}
@media (max-width:900px){.row.hero{grid-template-columns:minmax(0,1fr)}}

/* ============================================================
   THREE CORRECTIONS, 21 September 2026

   --nav-h still said 88px, the height of the old two-row bar.
   The rebuilt bar is 70px, so every offset derived from it — the
   pinned column, every in-page anchor — was 18px out, and on a
   page whose profile column fits the viewport it pushed the
   column 6px below the content beside it. One number.

   Violet now means the Act and the Rules, so the draft mark
   takes a bright red and becomes a warning mark. It is its own
   token: no page in this build carries one.

   The working index is the practice's own count of its own
   corpus, so it speaks in accent, not in rust.
   ============================================================ */
/* --nav-h, --warn and --draft are declared with the other tokens at the top. */
.pf-cred li.warn b,.pf-cred li.draft b{color:var(--warn)}
.pf-count li.warn .v,.pf-count li.draft .v{color:var(--warn)}

.mg.own{border-left-color:var(--accent)}
.mg.own .mg-lab{color:var(--accent-ink)}
.mg.own .mg-quote{border-top-color:var(--accent)}
.mg.own .mg-quote em,.mg.own .mg-quote b{color:var(--accent-ink)}
.mg.own p.mg-src{color:var(--accent-ink)}
.mg.own .mg-list b{color:var(--accent-ink)}

/* ============================================================
   CASE NOTES INDEX — SHAPE, DENSITY, STICKY TOOLS
   Added 21 September 2026.

   The index is the page's reason to exist and it began 2.7 screens
   down, behind two explanatory sections, with the filter that makes
   120 rows usable below them. It now comes first, and the sections
   that explain it follow it.

   THE BAR IS DELIBERATELY NOT IN THE OUTCOME COLOURS. Rust, violet
   and accent already mean whose voice is speaking; reusing them for
   who won would overload them, and colouring refusals red and grants
   green would editorialise outcomes on a page that promises not to.
   So it is one ink at three lightnesses, and the numbers are stated
   in words inside the bar rather than left to a legend.
   ============================================================ */

.cn-shape{margin:20px 0 4px;padding:0}
/* The bar runs the full width of the box rather than stopping at the prose
   measure, which is what lets the second segment carry its own words instead
   of a bare number with a caption underneath explaining it. */
.cn-bar{
  display:flex;gap:2px;height:36px;margin:0;
  border-radius:3px;overflow:hidden;
}
.cn-seg{
  flex:0 0 var(--w);display:flex;align-items:center;gap:7px;
  padding:0 12px;min-width:0;white-space:nowrap;overflow:hidden;
  font-size:var(--fs-micro);letter-spacing:.02em;color:var(--surface);
}
.cn-seg b{font-family:var(--serif);font-size:var(--fs-sm);font-weight:600;font-variant-numeric:tabular-nums}
.cn-seg-against{background:var(--ink)}
.cn-seg-for{background:var(--ink-3)}
.cn-seg-other{background:var(--rule)}
@media (max-width:560px){
  .cn-bar{height:32px}
  .cn-seg{padding:0 9px}
}

/* Density: outcome and disposition share a line, the citation follows the
   case name, and the requirement tags hold one line with the full string
   on the title attribute. About 85px a row down to about 48px. */
.cn-index td{padding:7px 14px 7px 0;line-height:1.35;vertical-align:baseline}
.cn-case{min-width:0}
.cn-cite{display:inline;margin:0 0 0 7px}
.cn-out .disp{display:inline;margin:0 0 0 8px}
/* Fixed geometry: the outcome needs the room, and the requirements column
   was taking a quarter of the width to show "Function…". */
.cn-index{table-layout:fixed}
.cn-case{width:40%;overflow:hidden}
/* The citation keeps its own line. Inline, a long name pushes it over the
   date column, because a fixed table does not grow a cell to fit. */
.cn-index .cn-cite{display:block;margin:2px 0 0}
.cn-date{width:13%}
.cn-out{width:47%;min-width:0}
@media (max-width:700px){
  .cn-index{table-layout:auto}
}
.cn-index tr[data-side="for"] .cn-out{color:var(--ink)}

/* The tools follow the reader down; the column headers sit under them.
   --cn-tools-h is measured by index-filter.js, because the chip row
   wraps differently at every width. */
@media (min-width:861px){
  .cn-tools{
    position:sticky;top:calc(var(--nav-h) + 12px);z-index:6;
    background:var(--surface-2);
  }
  .cn-index thead th{
    position:sticky;top:calc(var(--nav-h) + 12px + var(--cn-tools-h,132px));
    z-index:5;background:var(--surface);
  }
}

/* ============================================================
   CONDITION PAGES — THE HUB INDEX
   Added 23 September 2026.

   The pages themselves were built in another session and need no
   styles of their own: they use the shell, the rails and the
   profile column as they stand. Only the hub's index of them is
   new. The draft line uses --warn, the same red the profile
   column's version marker uses, so an unreviewed page says so in
   one colour wherever it appears.
   ============================================================ */

.cond-index{list-style:none;margin:22px 0 0;padding:0;max-width:var(--measure)}
.cond-index li{padding:18px 0;border-top:1px solid var(--rule-soft)}
.cond-index li:first-child{border-top:1px solid var(--rule)}
.cond-link{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  font-family:var(--serif);font-size:var(--fs-lg);font-weight:600;
  line-height:1.25;letter-spacing:-.015em;color:var(--ink);
}
.cond-link:hover .cond-name{border-bottom:1px solid var(--accent)}
.cond-code{
  font-family:var(--mono);font-size:var(--fs-micro);font-weight:400;
  letter-spacing:.06em;color:var(--ink-3);white-space:nowrap;
}
.main .cond-std{
  font-family:var(--mono);font-size:var(--fs-micro);
  letter-spacing:.05em;color:var(--accent-ink);margin:7px 0 0;
}
.main .cond-note{margin:8px 0 0;font-size:var(--fs-sm);line-height:1.55;color:var(--ink-2)}
.main .cond-ver{
  font-family:var(--mono);font-size:var(--fs-micro);
  letter-spacing:.06em;color:var(--warn);margin:9px 0 0;
}
.main .cond-draft-note{
  margin-top:18px;padding:11px 14px;
  border-left:3px solid var(--warn);background:var(--surface-2);
  font-size:var(--fs-sm);line-height:1.5;color:var(--ink-2);
  max-width:var(--measure);
}

/* ============================================================
   FLAT, 24 September 2026
   The tiles are gone: no grey ground, no card fills, no shadows,
   no rounded corners. The page is one surface; sections are
   separated by space and a single hairline. Structure, type and
   the colour rules are unchanged. Rail blocks keep a 2px keyline
   in their voice colour, because that line is the voice system,
   not decoration. --ground now equals --surface in both themes,
   and --shadow-tile is none, so the lifted-tile rules above
   resolve to flat without being removed.
   ============================================================ */
.main,.pf-pin,.pf-sec,.mg{background:transparent;box-shadow:none;border-radius:0}
.main,.row.full .main,.row.hero .main{padding:44px 0 48px}
.content{gap:0}
.row{gap:48px}
.row + .row{border-top:1px solid var(--rule)}
.row .rail{padding-top:44px}
.mg{border:0;border-left:2px solid var(--flag);padding:2px 0 2px 18px;border-radius:0}
.mg.law{border-left-color:var(--law)}
.mg.own{border-left-color:var(--accent)}
.shell{gap:56px;padding-top:12px}
.profile{border-right:1px solid var(--rule);padding-right:28px}
.pf-pin{padding:32px 0 0}
.pf-sec{padding:0;margin-top:34px}
.pf-pin .pf-sec-in{margin-top:28px}
.sitenav{box-shadow:none}
header.wrap{border-bottom:1px solid var(--rule)}
.sitenav{border-bottom:0}
.foot{background:transparent;border-top:1px solid var(--ink)}
.main h1{font-size:clamp(34px,5.6vw,54px);letter-spacing:-.028em}
@media (max-width:1240px){.shell{gap:36px}.row{gap:32px}}
@media (max-width:860px){
  .profile{border-right:0;border-bottom:1px solid var(--rule);padding:14px 0;background:transparent;border-top:0;border-left:0}
  .shell{gap:0}
  .main,.row.full .main,.row.hero .main{padding:32px 0 36px}
}

/* ============================================================
   REFERENCE PAGES, 24 September 2026
   Pages people look things up in, cite and send on. They drop
   the profile column (removed from the markup, not hidden) and
   carry a one-line byline instead, so the practitioner and the
   checkable credential stay on the page. Header, footer, type
   and the colour rules are the practice pages' own. Everything
   here is scoped to main.ref, so practice pages cannot change.
   ============================================================ */
.ref .shell{grid-template-columns:minmax(0,1fr)}
.ref .content{max-width:1180px;width:100%;margin-inline:auto}
.byline{
  display:flex;flex-wrap:wrap;gap:4px 18px;align-items:baseline;margin:0;padding:18px 0 0;
  font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
}
.byline b{font-family:var(--serif);font-size:var(--fs-sm);font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink)}
.byline a{color:var(--accent-ink)}
.byline a::after{content:" ↗";color:var(--ink-3)}
.byline + .row{border-top:0}

/* ---------- REGISTER: the case-notes index ----------
   Title and standfirst on the left; what the index holds, and
   how far it can be trusted, on the right. The index itself runs
   the full width of the content. The tools stay sticky above
   860px, because filtering 120 rows is how the page is used; the
   search and the chips share one row so the bar stays short. */
.ref-register .row.hero{grid-template-columns:minmax(0,1fr)}
.ref-register .row.hero .main{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:0 64px;align-items:start}
.ref-register .row.hero h1{grid-column:1;font-size:clamp(40px,6.4vw,72px);line-height:.98;max-width:none;margin-bottom:22px}
.ref-register .row.hero .standfirst{grid-column:1;border-left:0;padding-left:0;margin:0}
.reg-facts{grid-column:2;grid-row:1 / span 2;padding-top:8px}
.ref-register .cn-counts{display:block;margin:0;padding:0;border-top:2px solid var(--ink);max-width:none}
.ref-register .cn-counts li{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:baseline;gap:0;padding:8px 0;border-bottom:1px solid var(--rule-soft)}
.ref-register .cn-counts .v{text-align:right;padding-right:14px;font-size:var(--fs-stat)}
.ref-register .cn-counts li:first-child .v{font-size:var(--fs-fig)}
.ref-register .cn-counts .k{font-size:var(--fs-sm);color:var(--ink-2)}
.ref-register .main .cn-asat{margin:10px 0 0}
.reg-scope{list-style:none;margin:18px 0 0;padding:0;border-top:1px solid var(--rule)}
.reg-scope li{padding:8px 0;border-bottom:1px solid var(--rule-soft);font-size:var(--fs-xs);line-height:1.45;color:var(--ink-2)}
.reg-scope b{display:block;font-family:var(--mono);font-size:var(--fs-micro);font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:2px}
.main .reg-fine{font-size:var(--fs-xs);line-height:1.5;color:var(--ink-3);margin:10px 0 0}
.ref-register #index{grid-template-columns:minmax(0,1fr)}
.ref-register #index .main>p{max-width:var(--measure)}
.ref-register .cn-tools{background:var(--surface);border:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:14px 0 12px;margin-top:26px}
.ref-register .cn-case{width:36%}
.ref-register .cn-date{width:14%}
.ref-register .cn-out{width:50%}
/* The column heads are sticky, but .tblwrap scrolls sideways, which
   makes it the heads' scroll container: they were being held 200px
   down inside each table rather than under the toolbar, and on a
   short list they covered its rows. At desktop width the table fits,
   so the wrapper does not need to scroll. */
@media (min-width:861px){.ref-register #index .tblwrap{overflow:visible}}
@media (min-width:1061px){
  .ref-register .cn-tools{display:grid;grid-template-columns:280px minmax(0,1fr);gap:8px 24px;align-items:end}
  .ref-register .cn-search{margin:0}
  .ref-register .main .cn-count{grid-column:1 / -1;margin-top:4px}
}
@media (max-width:900px){
  .ref-register .row.hero .main{grid-template-columns:minmax(0,1fr)}
  .reg-facts{grid-column:1;grid-row:auto;padding-top:28px}
}

/* The hidden attribute always wins. The index filter hides empty
   group heads with it, but .cn-sec sets display:flex, which had
   been overriding it on every page since the index was built. */
[hidden]{display:none!important}

/* ---------- STANDARD: clinical governance ----------
   A published standard, laid out as one. A title page with the
   document's own record beside it; then a contents list pinned on
   the left above 900px, with the protocol's numbered subsections
   (6.1, 7.3, 9.0 ...) under their sections, following the reader.
   No paragraph numbers are added: the protocol already numbers its
   subsections and cross-refers to them, and those references are
   now links. */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ref-standard .row,.ref-standard .row.full,.ref-standard .row.hero{grid-template-columns:minmax(0,1fr)}
.ref-standard .row.hero .main{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:0 64px;align-items:start}
.ref-standard .row.hero .main>*{grid-column:1}
.ref-standard .row.hero h1{font-size:clamp(38px,5.6vw,64px);line-height:1;margin-bottom:18px}
.ref-standard .row.hero h1 .sub{display:block;font-weight:400;font-style:italic;font-size:.5em;letter-spacing:-.01em;line-height:1.2;color:var(--ink-2);margin-top:12px}
.ref-standard .movement span:last-child{background:var(--ink);color:var(--surface);padding:1px 7px;border-radius:2px}
.ref-standard .row.hero .main>.doc-record{grid-column:2;grid-row:1 / span 3}
.doc-record{border-top:2px solid var(--ink);padding-top:0;margin-top:6px}
.main .doc-record-h{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:10px 0 2px}
.doc-record ul{list-style:none;margin:0;padding:0}
.doc-record li{padding:8px 0;border-bottom:1px solid var(--rule-soft);font-size:var(--fs-xs);line-height:1.45;color:var(--ink-2)}
.doc-record b{display:block;font-family:var(--mono);font-size:var(--fs-micro);font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:2px}
.ref-standard .doc{display:grid;grid-template-columns:270px minmax(0,1fr);gap:0 56px;align-items:start;border-top:1px solid var(--rule)}
.doc-body{min-width:0}
.doc-body>.row:first-child{border-top:0}
.ref-standard .toc{position:sticky;top:calc(var(--nav-h) + 16px);max-height:calc(100vh - var(--nav-h) - 32px);overflow-y:auto;padding:44px 4px 24px 0;overscroll-behavior:contain}
.ref-standard .toc-h{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:0;padding-bottom:9px;border-bottom:2px solid var(--ink)}
.ref-standard .toc ol{list-style:none;margin:0;padding:0}
.ref-standard .toc a{display:grid;grid-template-columns:30px minmax(0,1fr);gap:4px;padding:7px 0 7px 8px;border-bottom:1px solid var(--rule-soft);font-size:var(--fs-xs);line-height:1.35;color:var(--ink-2);border-left:2px solid transparent;margin-left:-10px}
.ref-standard .toc a span{font-family:var(--mono);font-size:var(--fs-micro);color:var(--ink-3);padding-top:1px}
.ref-standard .toc ol ol a{grid-template-columns:30px minmax(0,1fr);padding-left:38px;font-size:var(--fs-micro);line-height:1.4;border-bottom-color:transparent;padding-block:4px}
.ref-standard .toc ol ol a span{font-size:var(--fs-micro)}
.ref-standard .toc ol ol{padding-bottom:6px;border-bottom:1px solid var(--rule-soft)}
.ref-standard .toc a:hover{color:var(--ink)}
.ref-standard .toc a[aria-current]{color:var(--ink);border-left-color:var(--accent)}
.ref-standard .toc a[aria-current] span{color:var(--accent-ink)}
.ref-standard .main h2 .sec-n{color:var(--accent-ink)}
.ref-standard h3[id],.ref-standard section[id]{scroll-margin-top:calc(var(--nav-h) + 16px)}
.ref-standard .xref{color:var(--accent-ink);border-bottom:1px solid var(--rule)}
.ref-standard .xref:hover{border-bottom-color:var(--accent)}
.ref-standard .reqs td:last-child{white-space:normal}
@media (max-width:900px){
  .ref-standard .row.hero .main{grid-template-columns:minmax(0,1fr)}
  .ref-standard .row.hero .main>.doc-record{grid-column:1;grid-row:auto;margin-top:26px}
  .ref-standard .doc{grid-template-columns:minmax(0,1fr)}
  .ref-standard .toc{position:static;max-height:none;overflow:visible;padding:28px 0 8px}
  .ref-standard .toc ol ol{display:none}
}
.ref-standard .anchor-note a{color:var(--accent-ink);border-bottom:1px solid var(--rule)}

/* ---------- EXHIBIT: a case note ----------
   The decision leads: its title and outcome, then the sentence that
   decided it, set large and pinned to its paragraph. Below, the record
   splits in two, what it established beside where it stopped (or,
   in a grant, what carried it), with the gap between them marked only
   where there was one. Both columns take ink, not a voice colour:
   they are the practice's reading of the record, and colouring a
   refusal and a grant differently would grade outcomes, which the
   site does not do. The Tribunal passages and figures that sat in
   the rail follow as a row of their own, so on a phone they are
   read rather than dropped. The profile column's "This decision"
   block repeated the head, so it has gone. */
.ref-exhibit .row{grid-template-columns:minmax(0,1fr)}
.ref-exhibit .ex-head .main{padding-bottom:40px}
.ref-exhibit .ex-head h1{font-size:clamp(34px,4.8vw,54px)}
.ref-exhibit .note-outcome{max-width:none}
.ex-quote{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:24px 40px;align-items:end;margin:34px 0 0}
.ex-quote blockquote{margin:0;border-left:3px solid var(--flag);padding-left:24px}
.main .ex-quote blockquote p{font-family:var(--serif);font-size:clamp(21px,2.5vw,29px);line-height:1.34;letter-spacing:-.01em;color:var(--ink);max-width:none;margin:0}
.ex-quote figcaption{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.08em;text-transform:uppercase;line-height:1.6;color:var(--flag)}
.ex-quote figcaption span{display:block;color:var(--ink-3)}
.ex-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 56px;padding:0}
.ex-col{padding:40px 0 44px;min-width:0}
.ex-col .note-h{margin-top:0;border-bottom:2px solid var(--ink);color:var(--ink);max-width:none}
.ex-col p{font-size:var(--fs-base);line-height:1.66;color:var(--ink-2);margin:0 0 16px}
.ex-col p:last-child{margin-bottom:0}
.ex-col strong{color:var(--ink)}
.ex-rail{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:32px 40px;padding:40px 0 44px}
.ex-rail .mg{margin:0}
.ex-tail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 56px;padding:40px 0 48px}
.ex-tail .note-h{margin-top:0}
.ex-tail p{max-width:none}
.ex-tail .pairing{margin-top:0}
@media (max-width:900px){
  .ex-quote{grid-template-columns:minmax(0,1fr)}
  .ex-split{grid-template-columns:minmax(0,1fr)}
  .ex-split .ex-col+.ex-col{padding-top:0}
  .ex-tail{grid-template-columns:minmax(0,1fr)}
}

/* ============================================================
   LINE BREAKS, 24 September 2026
   One rule: a line of text is only as narrow as reading needs.
   - Running prose (paragraphs and list items) keeps the 58ch
     measure, because long lines are hard to track; its breaks are
     set with text-wrap:pretty so a paragraph never ends on one word.
   - Headings, labels, citation lines and captions are not prose.
     They take the full width of their column and break only when
     they genuinely do not fit; when they do, balance evens the
     lines. The old ch caps on h1 to h4 forced three and four-line
     headings in columns that could hold them on one or two.
   - Units that must not split are joined with no-break spaces in
     the markup: a citation ([2026] ARTA 1273), a pinpoint (at [163]),
     a provision (s 24(1)(c), r 5.8), a date (10 July 2026).
   ============================================================ */
.main h1,.main h2,.main h3,.main h4,.main .note-h{max-width:none;text-wrap:balance}
.main p,.main li,.mg p,.mg li,.foot p,.standfirst p{text-wrap:pretty}
.main :is(.note-cite,.movement,.stepnum,.substd,.cn-asat,.cn-count,.cond-std,.cond-ver,.source-line,.pairing,.anchor-note),
.proof .cite,.mg .mg-src,.note-outcome{max-width:none}
.main :is(.note-cite,.movement,.stepnum,.substd,.cond-std,.cond-ver),.proof .cite,.mg .mg-src,.ex-quote figcaption{text-wrap:balance}
.nw{white-space:nowrap}
@media (max-width:359px){.js-nav .logo{letter-spacing:.1em}.js-nav .navbtn{padding:7px 10px}.js-nav .sitenav{gap:10px}}

/* ============================================================
   v6 · 29 September 2026
   Warmer and more approachable, same structure. Tokens above were
   changed in place (warm neutral ground, IBM Plex Serif / Public Sans,
   larger --fs-h2). This block holds the component changes.
   ============================================================ */
.hero-home h1{font-size:clamp(40px,6vw,74px)}
.btn,.navbtn{border-radius:6px}
.pf-port{width:100%;height:auto;aspect-ratio:4/5;border-radius:6px;border-bottom:0}
.main,.row.full .main,.row.hero .main{padding:72px 0 76px}
.row.hero .main{padding-top:48px}
.row .rail{padding-top:72px}
@media (max-width:860px){.main,.row.full .main,.row.hero .main{padding:48px 0 52px}.row.hero .main{padding-top:32px}}
.btn-access{display:inline-block;font-family:var(--sans);font-weight:600;font-size:var(--fs-base);line-height:1.2;padding:12px 20px;border:2px solid var(--accent);border-radius:6px;color:var(--accent-ink);background:transparent;text-decoration:none}
.btn-access:hover{background:var(--accent-wash)}
.btn-access:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
#access{scroll-margin-top:calc(var(--nav-h) + 16px)}

/* ============================================================
   v6 · Method page (30 September 2026): the chain of reasoning,
   the support/access criteria toggle, collapsible steps.
   Without JavaScript both sets of criteria show and every step
   can still be opened.
   ============================================================ */
.main.wide{max-width:none}
.req-toggle{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:26px;font-family:var(--sans);font-size:var(--fs-sm)}
.req-toggle span{color:var(--ink-3);margin-right:4px}
.req-toggle button{font:inherit;font-weight:600;border:2px solid var(--accent);background:transparent;color:var(--accent-ink);padding:9px 16px;border-radius:6px;cursor:pointer;min-height:44px}
.req-toggle button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.req-toggle button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.chip{display:inline-block;font-family:var(--mono);font-size:var(--fs-micro);padding:3px 7px;border-radius:4px;margin:0 6px 4px 0;white-space:nowrap}
.chip.sup{background:var(--accent-wash);color:var(--accent-ink)}
.chip.acc{background:color-mix(in srgb,var(--law) 12%,transparent);color:var(--law)}
html[data-req="sup"] .chip.acc,html[data-req="acc"] .chip.sup,html[data-req="acc"] [data-show="sup"],html[data-req="sup"] [data-show="acc"]{display:none}
.chain{list-style:none;margin:28px 0 0;padding:0}
.node{display:grid;grid-template-columns:44px 1fr;gap:18px;position:relative;padding-bottom:26px}
.node:not(:last-child)::before{content:"";position:absolute;left:21px;top:44px;bottom:0;width:2px;background:var(--accent)}
.node-n{width:44px;height:44px;border-radius:50%;border:2px solid var(--accent);display:grid;place-items:center;font-family:var(--serif);font-weight:600;font-size:var(--fs-lg);color:var(--accent-ink);background:var(--surface)}
.main .node-k{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);margin:2px 0 4px}
.main .node-q{font-family:var(--serif);font-size:var(--fs-lg);font-weight:600;line-height:1.3;margin:0 0 8px;max-width:40ch}
.main .node-meta{margin:0;display:flex;flex-wrap:wrap;align-items:center}
.node-steps{font-size:var(--fs-sm);color:var(--ink-3);margin-right:12px}
.evid{margin-top:12px;border-top:1px solid var(--rule);padding-top:22px}
.main .evid-h{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:0 0 14px}
.evid-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.evid-g div{border-left:2px solid var(--accent);padding:2px 0 2px 14px;display:grid;gap:4px;align-content:start}
.evid-g b{font-family:var(--serif);font-size:var(--fs-base)}
.evid-g span{font-size:var(--fs-sm);color:var(--ink-2)}
.evid-g em{font-style:normal;font-family:var(--mono);font-size:var(--fs-micro);color:var(--accent-ink)}
.main .evid-note{margin-top:22px}
.grp{margin-top:30px}
.main .grp-h{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;align-items:baseline;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);border-bottom:2px solid var(--ink);padding-bottom:8px;margin:0;max-width:none}
.grp-chips{letter-spacing:0;text-transform:none}
.step{border-bottom:1px solid var(--rule)}
.step summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:96px 1fr 20px;gap:4px 14px;padding:16px 0;align-items:baseline}
.step summary::-webkit-details-marker{display:none}
.step summary::after{content:"+";grid-column:3;grid-row:1;font-family:var(--mono);color:var(--accent-ink);font-size:18px}
.step[open] summary::after{content:"\2013"}
.step summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sn{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--flag);grid-row:1/3}
.sq{font-family:var(--serif);font-weight:600;font-size:var(--fs-lg);line-height:1.3}
.ss{grid-column:2;font-size:var(--fs-sm);color:var(--ink-3)}
.sb{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--rail-w));gap:32px;padding:4px 0 24px 110px}
@media (max-width:900px){.sb{grid-template-columns:1fr;padding-left:0}.step summary{grid-template-columns:64px 1fr 20px}}
/* v6 case notes: the tally above the index */
.cn-tally{list-style:none;margin:8px 0 28px;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:2px solid var(--ink);max-width:none}
.cn-tally li{display:flex;flex-direction:column;gap:6px;padding:14px 14px 14px 0;border-bottom:1px solid var(--rule-soft);margin:0}
.cn-tally li+li{padding-left:14px;border-left:1px solid var(--rule-soft)}
.cn-tally .v{font-family:var(--serif);font-size:var(--fs-stat);font-weight:600;line-height:1;letter-spacing:-.02em;color:var(--accent-ink);font-variant-numeric:tabular-nums}
.cn-tally li:first-child .v{color:var(--ink)}
.cn-tally .k{font-size:var(--fs-sm);color:var(--ink-2);line-height:1.35}
@media (max-width:700px){.cn-tally{grid-template-columns:repeat(2,minmax(0,1fr))}.cn-tally li:first-child{grid-column:1 / -1}.cn-tally li+li{padding-left:0;border-left:0}.cn-tally li:nth-child(odd):not(:first-child){padding-left:14px;border-left:1px solid var(--rule-soft)}}
/* v6 case notes: outcome markers, key and the read-closely line */
.cn-seg-for{background:var(--accent)}
.cn-key{list-style:none;margin:6px 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:var(--fs-sm);color:var(--ink-2);max-width:none}
.cn-key li{display:flex;align-items:center;gap:8px;margin:0}
.cn-mk{display:inline-block;flex:none;width:10px;height:10px;border-radius:50%}
.cn-mk-for{background:var(--accent)}
.cn-mk-against{box-shadow:inset 0 0 0 1.5px var(--ink-3)}
.cn-mk-flag{width:9px;height:9px;border-radius:2px;transform:rotate(45deg);background:var(--flag)}
.cn-index td.cn-case{position:relative;padding-left:22px}
.cn-index td.cn-case::before{content:"";position:absolute;left:2px;top:1.05em;width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink-3)}
.cn-index tr[data-side="for"] td.cn-case::before{background:var(--accent);box-shadow:none}
.cn-index tr[data-side="other"] td.cn-case::before{box-shadow:inset 0 0 0 1.5px var(--rule)}
.cn-index tr[data-flag] td.cn-case::before{width:9px;height:9px;border-radius:2px;transform:rotate(45deg);background:var(--flag);box-shadow:none}
.cn-why{display:block;font-size:var(--fs-sm);line-height:1.4;color:var(--flag);margin-top:6px;max-width:44ch}
@media (max-width:700px){.cn-index thead th:nth-child(2){display:none}.cn-seg{font-size:0}.cn-seg b{font-size:var(--fs-sm)}}
.cn-tools .cn-key{grid-column:1 / -1;margin:10px 0 0;padding-top:10px;border-top:1px solid var(--rule-soft)}