/* aeo.css -- the AEO layer's components, extending site.css in the same drawing-set language.
   Loaded AFTER site.css so it may override it.

   THE ONE RULE THIS SHEET INHERITS: write a component's @media block AFTER its base rule.
   Media queries add no specificity, so a media rule placed first silently loses to a
   top-level rule of the same specificity. Four live bugs on this site came from exactly
   that. See design-system/DESIGN-SYSTEM.md.

   And NEVER re-declare font-size or letter-spacing on a selector that already appears in
   one of site.css's six micro-type role lists. */

/* ============ FOOTER: five columns now (brand + PAGES + GUIDES + SYSTEMS + CONTACT) ==== */
.footer-top{grid-template-columns:minmax(0,1.3fr) repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.footer-top{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.footer-top{grid-template-columns:minmax(0,1fr)}}
.footer-in .eye a{color:inherit;border-bottom:1px solid var(--rule-strong)}
.footer-in .eye a:hover{color:var(--blue);border-bottom-color:var(--blue)}

/* ============ THE ANSWER BLOCK ============
   PAGE-CONTRACT s2 wants one element carrying a 40-90 word direct answer inside the first
   150 visible words. In this system that is a ruled panel directly under the title block --
   the design already opens a sheet this way, so the contract costs no design. */
.answerblock{
  border:1px solid var(--rule);border-left:3px solid var(--blue);
  background:var(--paper-lift);padding:clamp(20px,2.6vw,30px);
  margin:clamp(22px,3vh,34px) 0;max-width:74ch;
}
.answerblock .ak{display:block;font-family:var(--m);font-size:12.5px;letter-spacing:.14em;
  color:var(--blue);margin-bottom:12px}
.answerblock p{font-size:clamp(1.02rem,1.35vw,1.16rem);line-height:1.62;margin:0}

/* ============ THE SHEET HEAD on a guide/service page ============ */
.gh{padding-block:clamp(34px,6vh,64px) clamp(10px,2vh,18px)}
.gh .crumb{font-family:var(--m);font-size:12px;letter-spacing:.2em;color:var(--ink-mute);
  margin-bottom:16px;display:block}
.gh .crumb a{color:inherit;border-bottom:1px solid var(--rule-strong)}
.gh .crumb a:hover{color:var(--blue)}
.gh h1{max-width:18ch}
.gh-lede{max-width:70ch;color:var(--ink-60);margin-top:clamp(14px,2vh,20px);
  font-size:clamp(1.02rem,1.3vw,1.14rem);line-height:1.6}

/* ============ THE SECTION INDEX in the gutter (article + guide) ============
   Q4 of the seven questions: a 1440 screen must not show a 74ch column floating in dead
   space. This is a drawing-set contents list pinned in the margin, not a floating pill. */
.gbody{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,4vw,56px)}
/* No measure on .gmain itself. Every text element inside .gsec already caps its own line
   length (h2 24ch, p 74ch, ul/ol 74ch), so a cap here constrained nothing but the exhibit --
   and DESIGN-SYSTEM.md s6 says the exhibit is precisely the thing that BREAKS the column.
   With the cap on, three-column tables clipped and had to scroll on a 1140px desktop. */
.gbody > .gmain{min-width:0;max-width:none}
.gsec > .exhibit{max-width:96ch}
/* The <span> inside every .gsec list item is ONE flex item on purpose -- a bare
   "<b>Label.</b> rest" is two, and flex laid it out as two columns. aeo_render.ul()/ol()
   emit that span; do not remove it there without changing the display here. */
.gsec ul li > span,.gsec ol li > span{min-width:0}
.gindex{min-width:0}
.gindex ol{list-style:none;counter-reset:gi;display:grid;gap:9px;margin:0}
.gindex li{counter-increment:gi;display:flex;gap:9px;align-items:baseline;min-width:0}
.gindex li::before{content:"\00a7" counter(gi,decimal-leading-zero);font-family:var(--m);
  font-size:12px;letter-spacing:.14em;color:var(--blue);flex:none}
.gindex a{font-size:13px;line-height:1.45;color:var(--ink-60);min-width:0}
.gindex a:hover{color:var(--ink)}
.gindex .gk{display:block;font-family:var(--m);font-size:12.5px;letter-spacing:.14em;
  color:var(--ink-mute);margin-bottom:14px;padding-bottom:10px;
  border-bottom:1px solid var(--rule)}
@media (min-width:1000px){
  .gbody{grid-template-columns:minmax(0,1fr) 232px}
  .gindex{position:sticky;top:96px;align-self:start;order:2}
  .gbody > .gmain{order:1}
}

/* ============ NUMBERED SECTIONS against a datum ============ */
.gsec{padding-top:clamp(28px,4.5vh,46px);margin-top:clamp(24px,4vh,42px);
  border-top:1px solid var(--rule)}
.gsec:first-of-type{border-top:none;margin-top:0;padding-top:clamp(16px,2vh,22px)}
.gsec > h2{font-size:clamp(1.32rem,2.2vw,1.72rem);line-height:1.16;font-stretch:112%;
  font-weight:700;max-width:24ch;margin-bottom:clamp(12px,1.8vh,18px)}
.gsec .gnum{display:block;font-family:var(--m);font-size:12px;letter-spacing:.2em;
  color:var(--blue);margin-bottom:9px}
.gsec p{max-width:74ch;margin-bottom:clamp(12px,1.6vh,16px);line-height:1.68}
.gsec p:last-child{margin-bottom:0}
.gsec ul,.gsec ol{max-width:74ch;margin:0 0 clamp(12px,1.6vh,16px) 0;padding-left:0;
  list-style:none;display:grid;gap:9px}
.gsec ul li{display:flex;gap:11px;line-height:1.6}
.gsec ul li::before{content:"";flex:none;width:7px;height:1px;background:var(--ink-decor);
  margin-top:.82em}
.gsec ol{counter-reset:go}
.gsec ol li{counter-increment:go;display:flex;gap:11px;line-height:1.6}
.gsec ol li::before{content:counter(go,decimal-leading-zero);font-family:var(--m);
  font-size:12.5px;letter-spacing:.1em;color:var(--blue);flex:none;margin-top:.34em}

/* ============ THE DRAWN PLATE ============
   figures.py emits .plate > .plate-img.fig-draw > svg.drawplate, mounted in the same frame
   photography uses (signature move 3: a figure with no caption bar is not in this system).
   .plate-img has no intrinsic height, so the ratio is set here. */
.fig{margin:clamp(22px,3.4vh,36px) 0;max-width:96ch}
.fig .fig-draw{aspect-ratio:3/2;background:var(--paper-lift)}

/* ============ THE EXHIBIT: what breaks the column ============ */
.exhibit{border:1px solid var(--rule);background:var(--paper-lift);
  margin:clamp(22px,3.4vh,36px) 0;max-width:none}
.exhibit-k{display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  padding:12px 16px;border-bottom:1px solid var(--rule);font-family:var(--m);font-size:12.5px;
  letter-spacing:.14em;color:var(--ink-mute)}
.exhibit-k b{color:var(--blue);font-weight:700}
.exhibit-in{padding:clamp(16px,2.2vw,24px);overflow-x:auto}
.exhibit table{width:100%;border-collapse:collapse;min-width:520px}
.exhibit th,.exhibit td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--rule);
  vertical-align:top;font-size:15px;line-height:1.5}
.exhibit th{font-family:var(--m);font-size:12.5px;letter-spacing:.14em;color:var(--ink-mute);
  font-weight:400;white-space:nowrap}
.exhibit tr:last-child td{border-bottom:none}
.exhibit td b{font-weight:700}
.exhibit .yes{color:var(--blue);font-family:var(--m);font-size:12px}
/* The exhibit already scrolls on a narrow screen (.exhibit-in is overflow-x:auto above),
   but it scrolled SILENTLY: a three-column table simply looked truncated mid-word with
   nothing to say it continued. Classic scroll-shadow -- the two local-attachment gradients
   mask the edges, the two scroll-attachment shadows only show while there is more to see.
   Written AFTER the base rules on purpose; a media block placed first loses to them. */
@media (max-width:620px){
  .exhibit-in{
    background:
      linear-gradient(to right, var(--paper-lift) 30%, rgba(244,243,239,0)) 0 0,
      linear-gradient(to left,  var(--paper-lift) 30%, rgba(244,243,239,0)) 100% 0,
      radial-gradient(farthest-side at 0 50%, rgba(20,20,20,.13), rgba(20,20,20,0)) 0 0,
      radial-gradient(farthest-side at 100% 50%, rgba(20,20,20,.13), rgba(20,20,20,0)) 100% 0;
    background-repeat:no-repeat;
    background-size:34px 100%, 34px 100%, 13px 100%, 13px 100%;
    background-attachment:local, local, scroll, scroll;
  }
  .exhibit-k::after{content:"SWIPE →";font-family:var(--m);font-size:12px;
    letter-spacing:.14em;color:var(--blue);flex:none}
}

/* ============ THE SPECIFICATION SCHEDULE (service pages) ============ */
.spec-sched{border:1px solid var(--rule);margin:clamp(20px,3vh,32px) 0;max-width:96ch}
.spec-sched .ssk{padding:12px 16px;border-bottom:1px solid var(--rule);font-family:var(--m);
  font-size:12.5px;letter-spacing:.14em;color:var(--blue)}
/* Scoped under .gsec, like .notelist. Unscoped, `.gsec ul` capped this register at 74ch
   inside a 1040px panel, `.gsec ul li` overrode its gap, and `.gsec ul li::before` put a
   decor dash in front of every row -- so the SERVICE type's most valuable object rendered
   as a fault. Specificity, not source order: two classes beat one whatever the order. */
.gsec .spec-sched ul{list-style:none;margin:0;padding:0;display:grid;gap:0;max-width:none}
.gsec .spec-sched li{display:flex;align-items:baseline;gap:0;padding:11px 16px;
  border-bottom:1px solid var(--rule);line-height:1.5}
.gsec .spec-sched li:last-child{border-bottom:none}
.gsec .spec-sched li::before{content:none;display:none}
.spec-sched .sk{min-width:0;flex:none;max-width:64ch}
/* The leader RUNS BETWEEN the key and the value -- that is what a leader is, and what
   signature move 2 describes. It was `flex:none;width:34px`, a fixed stub floating in the
   middle of the row with the value stranded to its right. */
.spec-sched .sd{flex:1;min-width:24px;border-bottom:1px dotted var(--rule-strong);
  margin:0 12px;transform:translateY(-4px)}
.spec-sched .sv{flex:none;font-family:var(--m);font-size:14px;letter-spacing:.03em;
  color:var(--ink-mute);text-align:right;white-space:nowrap}
@media (max-width:560px){
  .gsec .spec-sched li{display:grid;gap:4px}
  .spec-sched .sd{display:none}
  .spec-sched .sv{text-align:left;white-space:normal}
}

/* ============ THE HUB REGISTER (insights) ============ */
.hubreg{border:1px solid var(--rule);margin-top:clamp(18px,2.6vh,26px)}
.hubreg-grp{border-bottom:1px solid var(--rule)}
.hubreg-grp:last-child{border-bottom:none}
.hubreg-grp > .hubreg-h{display:block;padding:13px 16px;background:var(--paper-lift);
  border-bottom:1px solid var(--rule);font-family:var(--m);font-size:12.5px;
  letter-spacing:.14em;color:var(--blue);font-weight:700}
.hubrow{display:grid;grid-template-columns:56px minmax(0,1fr);gap:0;
  border-bottom:1px solid var(--rule);align-items:baseline}
.hubrow:last-child{border-bottom:none}
.hubrow .hr-n{padding:15px 0 15px 16px;font-family:var(--m);font-size:12px;
  letter-spacing:.2em;color:var(--ink-mute)}
.hubrow .hr-t{padding:15px 16px 15px 0;min-width:0}
.hubrow .hr-t a{font-weight:600;line-height:1.4;font-size:clamp(1rem,1.2vw,1.08rem)}
.hubrow .hr-d{display:block;color:var(--ink-mute);font-size:14px;line-height:1.5;
  margin-top:5px;max-width:70ch}
.hubrow:hover{background:var(--blue-08)}
/* A piece that is planned but not yet published. Listed, never linked -- the register is
   the plan, and a link to a page that does not exist is a 404 with a promise on it.
   pages_utility.py promotes these to real links the moment the file exists. */
.hubrow.is-soon:hover{background:none}
.hubrow .hr-soon{display:block;font-weight:600;line-height:1.4;
  font-size:clamp(1rem,1.2vw,1.08rem);color:var(--ink-mute)}
.hubrow .hr-soon b{display:inline-block;margin-left:9px;vertical-align:1.5px;
  font-family:var(--m);font-size:12px;font-weight:400;letter-spacing:.2em;
  color:var(--ink-mute);border:1px solid var(--rule);border-radius:2px;padding:2px 6px}

/* ============ THE FAQ REGISTER ============ */
.faqgrp{margin-top:clamp(26px,4vh,44px)}
.faqgrp > h2{font-size:clamp(1.2rem,1.9vw,1.5rem);margin-bottom:14px;font-stretch:112%}
.faqgrp .fk{display:block;font-family:var(--m);font-size:12px;letter-spacing:.2em;
  color:var(--blue);margin-bottom:8px}

/* ============ THE GLOSSARY LEGEND ============ */
.legend{border:1px solid var(--rule);margin-top:clamp(16px,2.4vh,24px)}
.legend-letter{display:block;padding:11px 16px;background:var(--paper-lift);
  border-bottom:1px solid var(--rule);font-family:var(--m);font-size:13.5px;
  letter-spacing:.22em;color:var(--blue)}
.legend dl{margin:0}
.legend .lrow{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);
  border-bottom:1px solid var(--rule)}
.legend .lrow:last-child{border-bottom:none}
.legend dt{padding:14px 16px;font-family:var(--m);font-size:12px;letter-spacing:.06em;
  font-weight:700;min-width:0;border-right:1px solid var(--rule)}
.legend dd{padding:14px 16px;margin:0;line-height:1.6;min-width:0;font-size:15px}
.legend dd a{border-bottom:1px solid var(--rule-strong)}
@media (max-width:640px){
  .legend .lrow{grid-template-columns:minmax(0,1fr)}
  .legend dt{border-right:none;border-bottom:1px dotted var(--rule);padding-bottom:6px}
  .legend dd{padding-top:8px}
}
.azrail{display:flex;flex-wrap:wrap;gap:6px;margin-top:clamp(14px,2vh,20px)}
.azrail a,.azrail span{display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;min-height:34px;border:1px solid var(--rule);font-family:var(--m);
  font-size:13.5px;letter-spacing:.06em}
.azrail a:hover{border-color:var(--blue);color:var(--blue)}
.azrail span{color:var(--ink-decor)}

/* ============ RELATED / NEXT ============ */
.nextrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap:0;border:1px solid var(--rule);margin-top:clamp(28px,4.5vh,52px)}
.nextrow a{padding:clamp(16px,2vw,22px);border-right:1px solid var(--rule);min-width:0;
  display:block}
.nextrow a:last-child{border-right:none}
.nextrow a:hover{background:var(--blue-08)}
.nextrow .nk{display:block;font-family:var(--m);font-size:12px;letter-spacing:.2em;
  color:var(--ink-mute);margin-bottom:8px}
.nextrow .nt{font-weight:600;line-height:1.4}
@media (max-width:720px){
  .nextrow a{border-right:none;border-bottom:1px solid var(--rule)}
  .nextrow a:last-child{border-bottom:none}
}

/* ============ the register note added to work.html ============ */
.register-note{margin-top:14px;color:var(--ink-mute);font-size:14.5px;line-height:1.6;
  max-width:74ch}
.register-note a{color:var(--ink);border-bottom:1px solid var(--rule-strong)}
.register-note a:hover{color:var(--blue);border-bottom-color:var(--blue)}

/* ============ a plain data table for the legal page ============ */
.legal-table{width:100%;border-collapse:collapse;margin:clamp(16px,2.4vh,24px) 0;
  border:1px solid var(--rule)}
.legal-table th,.legal-table td{text-align:left;padding:11px 14px;
  border-bottom:1px solid var(--rule);vertical-align:top;font-size:15px;line-height:1.55}
.legal-table th{font-family:var(--m);font-size:12.5px;letter-spacing:.14em;
  color:var(--ink-mute);font-weight:400}
.legal-table tr:last-child td{border-bottom:none}

/* ============ THE ARTICLE TITLE BLOCK ============
   .titleblock itself lives in site.css (the six-cell drawing block, already responsive at
   900/480). What is new here is the leader-dot QUESTION ANSWERED row that sits under it --
   DESIGN-SYSTEM s6 `article` Q1 asks for the question the piece answers, set as a leader
   row, and that is the one part of the article hero the phase-2 template never had. */
.tb-q{display:flex;align-items:baseline;gap:0;margin:0;padding:11px 0 0;
  border-top:none;max-width:none}
.tbq-k{flex:none;font-family:var(--m);font-size:12px;letter-spacing:.2em;
  color:var(--ink-mute)}
.tbq-d{flex:1;min-width:18px;margin:0 10px;border-bottom:1px dotted var(--rule-strong);
  transform:translateY(-.28em)}
.tbq-v{flex:none;max-width:62ch;text-align:right;font-size:15px;line-height:1.5;
  color:var(--ink)}
@media (max-width:760px){
  .tb-q{display:grid;gap:5px}
  .tbq-d{display:none}
  .tbq-v{text-align:left;max-width:none}
}

/* ============ DRAWING NOTES (article pages) ============
   The article type's checklist. Deliberately NOT .spec-sched: s6 gives the leader-dot
   specification schedule to the service type alone, and three article pages were rendering
   one, so the two types shared their single most valuable object. Numbered notes, no dot
   leaders, the status word set right -- annotations on a sheet, not a priced register. */
.notelist{border:1px solid var(--rule);border-left:3px solid var(--blue);
  margin:clamp(20px,3vh,32px) 0;max-width:96ch;background:var(--paper-lift)}
.nl-k{display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  padding:12px 16px;border-bottom:1px solid var(--rule);font-family:var(--m);
  font-size:12.5px;letter-spacing:.14em;color:var(--ink-mute)}
.nl-k b{color:var(--blue);font-weight:700;white-space:nowrap}
/* Every selector below is scoped under .gsec on purpose. The first draft was not, and
   `.gsec ul li` (0-1-2) beat `.notelist li` (0-1-1) while `.gsec ul li::before` (0-1-3)
   beat `.notelist li::before` (0-1-2) -- so the grid never applied, the row gap leaked
   through, a stray 7px decor dash sat in front of every note number, and the whole
   max-width:620px block below was inert because the rows were still flex. The component
   was broken on its first outing. This is the cascade trap again, through specificity
   rather than source order: two classes beat one, whatever the order. */
.gsec .notelist ul{list-style:none;margin:0;padding:0;display:grid;gap:0;max-width:none}
.gsec .notelist li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:0 14px;
  align-items:baseline;padding:11px 16px;border-bottom:1px solid var(--rule);line-height:1.5}
.gsec .notelist li:last-child{border-bottom:none}
.gsec .notelist li::before{content:none;display:none}
.nl-n{font-family:var(--m);font-size:12.5px;letter-spacing:.14em;color:var(--blue)}
.nl-t{min-width:0;font-size:15px;line-height:1.5}
.nl-v{font-family:var(--m);font-size:12.5px;letter-spacing:.14em;color:var(--ink-mute);
  white-space:nowrap}
@media (max-width:620px){
  .gsec .notelist li{grid-template-columns:auto minmax(0,1fr)}
  .nl-v{grid-column:2;white-space:normal;padding-top:3px}
}

/* ============ THE STICKY SYSTEMS RAIL (service pages) ============
   s6 `service` Q4. The service type's gutter, where the article type puts its section
   index -- so a reader moves sideways through the set by code instead of down one sheet.
   No page carries both; that is what makes the gutter a type differentiator and not
   decoration. Shares .gk with .gindex on purpose: same gutter label, different object. */
.srail{min-width:0}
.srail ol{list-style:none;margin:0;padding:0;display:grid;gap:0}
.srail li{display:block;border-bottom:1px solid var(--rule)}
.srail li:last-child{border-bottom:none}
.srail li::before{content:none}
.srail a,.srail li[aria-current]{display:flex;gap:10px;align-items:baseline;
  padding:8px 0;min-width:0}
.srail .sr-c{flex:none;font-family:var(--m);font-size:12px;letter-spacing:.1em;
  color:var(--ink-mute)}
.srail .sr-t{min-width:0;font-size:13px;line-height:1.4;color:var(--ink-60)}
.srail a:hover .sr-t,.srail a:focus-visible .sr-t{color:var(--ink)}
.srail a:hover .sr-c{color:var(--blue)}
.srail li[aria-current]{background:var(--paper-lift);
  box-shadow:-10px 0 0 0 var(--paper-lift),10px 0 0 0 var(--paper-lift)}
.srail li[aria-current] .sr-c{color:var(--blue);font-weight:700}
.srail li[aria-current] .sr-t{color:var(--ink);font-weight:600}
@media (min-width:1000px){
  .srail{position:sticky;top:96px;align-self:start;order:2;max-height:calc(100vh - 130px);
    overflow-y:auto}
}

/* The gutter index marks the section you are in (js/site.js, enhancement only). Written
   after .gindex's base rules, per the cascade note at the top of site.css. */
.gindex li[aria-current] a{color:var(--ink);font-weight:600}
.gindex li[aria-current]::before{color:var(--blue);font-weight:700}

/* ============ SOURCES ============
   Every spec declares `citations` and until 2026-09-01 nothing rendered them: 31 declared,
   1 on a page. A page that asserts Malaysian strata practice without a primary source is
   asserting law from a contractor's website. Set as a numbered register, like everything
   else on this site that is meant to be checked. */
.sources{border-top:1px solid var(--rule-strong);margin:clamp(28px,4vh,44px) 0 0;
  padding-top:clamp(16px,2.4vh,22px);max-width:96ch}
.src-k{font-family:var(--m);font-size:12.5px;letter-spacing:.2em;color:var(--ink-mute);
  font-weight:400;margin:0 0 12px}
.sources ol{list-style:none;margin:0;padding:0;display:grid;gap:0}
.sources li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;
  padding:11px 0;border-bottom:1px solid var(--rule)}
.sources li:last-child{border-bottom:none}
.sources li::before{content:none}
.src-n{font-family:var(--m);font-size:12px;letter-spacing:.1em;color:var(--blue);
  grid-row:span 2}
.src-c{font-size:14.5px;line-height:1.5;color:var(--ink-60);min-width:0}
.src-u{font-family:var(--m);font-size:12.5px;letter-spacing:.06em;color:var(--ink-mute);
  border-bottom:1px solid var(--rule-strong);justify-self:start;overflow-wrap:anywhere}
.src-u:hover,.src-u:focus-visible{color:var(--blue);border-bottom-color:var(--blue)}
@media (max-width:520px){
  .sources li{grid-template-columns:minmax(0,1fr)}
  .src-n{grid-row:auto}
}


/* ============ PROSE LINKS ============
   `a{color:inherit;text-decoration:none}` (site.css) is the site-wide reset, and until
   2026-09-01 no rule anywhere gave an anchor inside body prose an affordance of its own.
   Every in-body link on all 17 generated pages -- pillar to spoke, spoke to service, the
   glossary cross-references, "see the full register" -- rendered as ordinary black text.
   WCAG 1.4.1 (colour is not the only distinction) and the reason the cluster wiring did
   nothing for a human. Matches the pattern .cred-v a already uses. */
.gsec p a,.gsec li a,.gsec dd a,.gh-lede a,.answerblock a,.register-note a,
.legend dd a,.faq .a a,.sources .src-c a{
  border-bottom:1px solid var(--rule-strong);
  transition:color .18s,border-color .18s}
.gsec p a:hover,.gsec li a:hover,.gsec dd a:hover,.gh-lede a:hover,.answerblock a:hover,
.register-note a:hover,.legend dd a:hover,.faq .a a:hover,.sources .src-c a:hover,
.gsec p a:focus-visible,.gsec li a:focus-visible,.gsec dd a:focus-visible,
.gh-lede a:focus-visible,.answerblock a:focus-visible,.register-note a:focus-visible,
.legend dd a:focus-visible,.faq .a a:focus-visible,.sources .src-c a:focus-visible{
  color:var(--blue);border-bottom-color:var(--blue)}

/* ============ BOTTOM SPACING ============
   Every generated page ended flush on the footer: .nextrow's 1px --rule bottom border sat
   directly on .footer's 1px --rule-strong top border, reading as one 2px double rule of
   mismatched weight, and the pages without a nextrow landed their last sentence ~8px off
   it. Nothing on main, .gbody, .gmain or .nextrow carried any bottom space. */
main > .wrap:last-child,main > .gbody:last-child{padding-bottom:clamp(48px,7vh,88px)}
.gh + .wrap{padding-bottom:clamp(48px,7vh,88px)}

/* ============ THE EMPTY GUTTER ============
   .gbody reserves a 232px second track at >=1000px. privacy.html uses .gbody with no
   gutter child, so it reserved the track and rendered nothing in it -- every .gsec top
   rule stopped 288px short of the kicker rule directly above it, on the same sheet. Two
   different right edges is not "empty paper is correct here", it reads as rules that
   stopped early. :has() is supported everywhere this site is measured; the fallback is
   the current behaviour, which is what the page already had. */
@media (min-width:1000px){
  .gbody:not(:has(> .gindex)):not(:has(> .srail)){grid-template-columns:minmax(0,1fr)}
}

/* The hub register's reference column. 56px of track less 16px of padding left 40px for
   "IN-01" at 12px/.2em Space Mono, which needs ~48px -- so every row in the register
   wrapped its own reference code as "IN-" / "01". */
.hubrow{grid-template-columns:78px minmax(0,1fr)}
.hubrow .hr-n{white-space:nowrap}
/* The only rounded corner in either stylesheet, against DESIGN-SYSTEM s4: "No rounded
   corners. Nothing in a drawing set is rounded." */
.hubrow .hr-soon b{border-radius:0}

/* --ink-decor is documented in tokens.css as NON-TEXT only -- rules, crosses, drawing
   linework -- with the note that the retired --ink-40 at the same alpha "measured 2.54:1
   and failed 39 times". The nine letters with no glossary entry were rendering as text in
   it at 2.52:1. The "no entries" meaning moves onto a dotted underline so it is not
   carried by colour alone. */
.azrail span{color:var(--ink-mute);border-bottom:1px dotted var(--rule-strong)}

/* The glossary definition ran the full 1074px track at 1440 while every other measure on
   the site is capped at 74ch. */
.legend dd{max-width:74ch}

/* ============ ROUND-3 REMEDIATION, cont. ============ */

/* The title block sat 6px off the lede's descenders while every other vertical relation on
   the page is clamp(20px..56px). It read as a collision, not as a block. */
.titleblock{margin-top:clamp(20px,3vh,34px)}

/* One right edge, not two. .gsec's datum rules span the full 1040px .gmain while every
   ruled object inside them was capped at 96ch (~935px), so every section rule overhung
   every object by ~160px -- visible misalignment in a design whose premise is drawn edges.
   The objects now share the column edge; prose keeps its 74ch measure, which is the
   distinction that was actually intended.
   (.exhibit{max-width:none} at the top of this file never applied inside a .gsec: the
   `.gsec > .exhibit` rule is 0-2-0 and wins. That comment described an intent the cascade
   did not deliver.) */
.gsec > .exhibit,.gsec .fig,.gsec .notelist,.gsec .spec-sched{max-width:none}

/* "QUESTION ANSWERED ....... Repair or replace - how should a committee decide, and what
   evidence settles / it?"  A 62ch cap plus right-alignment orphaned the last word or two
   on a second line on three of five article pages. */
.tbq-v{max-width:74ch}

/* The plate letterboxed ~12% top and bottom at <=560px: a 3:2 viewBox in a 4:3 frame with
   the default xMidYMid meet. Keeping the frame at the drawing's own ratio wastes no height
   on the width that matters most. */
@media (max-width:560px){.fig .fig-draw{aspect-ratio:3/2}}

/* The hub's territory labels and the glossary's letter bands are headings now -- they were
   <b> and <span>, so two reference pages carried one heading each for 437 and 1,237 words
   of grouped content and chunked as one block apiece. Same pixels, real structure. */
/* `font:inherit` was the first attempt and it was wrong twice over: `font` is a
   shorthand, so it reset family, size AND line-height, wiping the mono band type on
   both; and the hub's band rule still selected `.hubreg-grp > b`, an element that no
   longer exists, so that band lost its ground, its padding and its rule as well.
   Reset only what promoting a <b>/<span> to an <h2> actually changes. */
.hubreg-h,h2.legend-letter{margin:0;font-size:inherit;font-family:inherit;
  letter-spacing:inherit;line-height:inherit}

/* The first version of this rule was scoped to `.gsec ...` -- and `.gsec` appears ZERO
   times on index, about, services, work and contact. It fixed the seventeen generated
   pages and missed the five a customer actually lands on, plus the hub's ten links, which
   are the only thing on that page. These are the remaining prose contexts, by class. */
.works-intro a,.phead-lede a,.sectors-foot a,.hubreg-h a,.hubrow .hr-t a,
.notes-block a,.miles a,.svccard p a,.chan-n a{
  border-bottom:1px solid var(--ink-mute);transition:color .18s,border-color .18s}
.works-intro a:hover,.phead-lede a:hover,.sectors-foot a:hover,.hubreg-h a:hover,
.hubrow .hr-t a:hover,.notes-block a:hover,.miles a:hover,.svccard p a:hover,.chan-n a:hover,
.works-intro a:focus-visible,.phead-lede a:focus-visible,.sectors-foot a:focus-visible,
.hubreg-h a:focus-visible,.hubrow .hr-t a:focus-visible,.notes-block a:focus-visible,.chan-n a:focus-visible,
.miles a:focus-visible,.svccard p a:focus-visible{
  color:var(--blue);border-bottom-color:var(--blue)}

/* ============ ROUND-4 REMEDIATION ============

   1. THE TRAP, REINTRODUCED BY ME. The round-3 fix appended `.tbq-v{max-width:74ch}` to the
      end of this file -- AFTER the `@media (max-width:760px){.tbq-v{max-width:none}}` block
      at the top. Same specificity, later wins, so the mobile rule went dead. That is the
      exact pattern the header comment of site.css warns about across four previous
      instances, recreated while fixing the component it governs. Two reviewers found it
      independently. The base rule is restored to its declaration site and this override
      carries the media block with it. */
.tbq-v{max-width:74ch}
@media (max-width:760px){.tbq-v{max-width:none;text-align:left}}

/* 2. One right edge. Round 3 set `max-width:none` on the in-section objects and missed the
      two that sit OUTSIDE `.gsec`: the hero plate and the sources register. Measured on the
      1440 captures, the page showed five right edges -- 734, 936, 1096, 1384, 1440. */
.wrap > .fig,.gsec ~ .sources,.sources{max-width:none}

/* 3. `.exhibit-k b` wrapped its reference as "M-" / "02" at 390 on the page with the
      longest key. The same fix was applied to `.hubrow .hr-n` and `.nl-k b` and missed here. */
.exhibit-k b{white-space:nowrap}

/* 4. The gutter object -- section index or systems rail -- fell to the BOTTOM of the page
      at mobile, after the last section, because `order` is only declared inside
      `@media (min-width:1000px)`. A contents list printed after the contents is dead weight.
      Below that breakpoint it goes first, where a reader can use it. */
@media (max-width:999px){
  .gbody{display:flex;flex-direction:column}
  .gindex,.srail{order:0;margin-bottom:clamp(20px,3vh,32px)}
  .gbody > .gmain{order:1}
}

/* 5. Dead code, both from earlier passes of mine: `.fig .fig-draw{aspect-ratio:4/3}` at the
      top of this file is superseded by the identical media rule appended later, and
      `.hubreg-grp > b` selects an element the heading promotion removed. Removing rather
      than leaving them is the point of the anti-accretion rule. */

/* ============ KEY TAKEAWAYS — the front-loaded summary (2026-09-01) ============
   Sibling of .notelist, deliberately NOT a reuse of it. .notelist's row grid is scoped
   under .gsec because it has to out-specify `.gsec ul li`; this object is a direct child
   of .wrap, outside every .gsec, so those rules can never reach it and it carries its own.
   Placed at the END of the sheet so no later rule can be shadowed by it — the ordering
   trap this stylesheet has already paid for four times. */
.keypoints{border:1px solid var(--rule);border-top:3px solid var(--blue);
  margin:clamp(22px,3.4vh,36px) 0;max-width:96ch;background:var(--paper-lift)}
.kp-k{display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  padding:12px 16px;border-bottom:1px solid var(--rule);font-family:var(--m);
  font-size:12.5px;letter-spacing:.14em;color:var(--ink-mute)}
.kp-k b{color:var(--blue);font-weight:700;white-space:nowrap}
.keypoints ul{list-style:none;margin:0;padding:0;display:grid;gap:0;max-width:none}
.keypoints li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:0 14px;
  align-items:baseline;padding:12px 16px;border-bottom:1px solid var(--rule);line-height:1.55}
.keypoints li:last-child{border-bottom:none}
.keypoints li::before{content:none;display:none}
.kp-n{font-family:var(--m);font-size:12.5px;letter-spacing:.14em;color:var(--blue)}
.kp-t{min-width:0;font-size:15.5px;line-height:1.55;color:var(--ink)}
.kp-v{font-family:var(--m);font-size:12.5px;letter-spacing:.14em;color:var(--ink-mute);
  white-space:nowrap}
@media (max-width:620px){
  .keypoints li{grid-template-columns:auto minmax(0,1fr)}
  .kp-v{grid-column:2;white-space:normal;padding-top:4px}
}

/* ============ the next row: three or one, never two (2026-09-01) ============
   `auto-fit` with a 240px minimum fits only two of the three links between about 721px and
   790px, so the third dropped to a row of its own and left a dead cell beside it. It read as
   an afterthought rather than as the third of three, and render_gate counted a grid orphan on
   EVERY article page at those widths. The row always carries exactly three links -- the nxt
   contract is three rows -- so say so, instead of asking auto-fit to guess.
   After the base rule, as everything in this sheet must be. */
@media (min-width:721px){ .nextrow{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:720px){ .nextrow{grid-template-columns:minmax(0,1fr)} }