:root{
 /* Palette sampled from royal.uk's rendered pages: deep crest navy #19236E, interactive navy
    #233580, the burgundy used on its feature cards #803444, and its off-white section grey
    #F0EFEF. Neutrals carry a slight blue bias so they sit under the navy rather than fighting it. */
 --paper:#FCFCFC;--surface:#FFF;--s2:#F0EFEF;--s3:#E4E3E6;--ink:#14161D;--ink2:#3B4050;--ink3:#68708A;
 --rule:#DEDDE2;--rule2:#C3C2CA;--grid:#E9E8EC;
 --royal:#19236E;--royal2:#233580;--link:#19236E;--link-hover:#233580;
 /* Board hues. Validated for colourblind separation with the dataviz checker: worst adjacent
    pair #00968C↔#7A3FB0 is ΔE 17.1 (deutan). Board names always appear beside the colour, so
    colour is never the sole encoding. */
 --pj:#A56A00;--sd:#2E5FC4;--kp:#0B7D4E;--bl:#7A3FB0;--fb:#00968C;
 --flag:#803444;
 --max:1460px}
@media (prefers-color-scheme:dark){:root{
 --paper:#0D1017;--surface:#11151D;--s2:#181D27;--s3:#222836;--ink:#E7E8EC;
 --ink2:#B0B6C4;--ink3:#828A9C;--rule:#262C39;--rule2:#38404F;--grid:#1D222D;
 /* The royal navy is unreadable on a dark ground, so the deep hue becomes a light one and the
    roles swap: links lighten rather than darken on hover. */
 --royal:#8FA0E8;--royal2:#B3BEF0;--link:#8FA0E8;--link-hover:#B3BEF0;
 --pj:#BC8628;--sd:#5A90E0;--kp:#22A473;--bl:#A277E0;--fb:#1FA396;
 --flag:#C98494}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,sans-serif;
 font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:9px 14px;z-index:99}
.skip:focus{left:8px;top:8px}
a{color:var(--link)}
a:hover,a:focus{color:var(--link-hover)}
header.site{border-bottom:1px solid var(--rule);background:var(--paper);position:sticky;top:0;z-index:40}
.site-in{max-width:var(--max);margin:0 auto;padding:0 22px}
header.site .site-in{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:12px;padding-bottom:12px}
header.site nav{display:flex;gap:3px;flex-wrap:wrap}
header.site nav a{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.05em;text-decoration:none;
 color:var(--ink3);padding:6px 10px;border-radius:3px}
header.site nav a:hover{color:var(--ink);background:var(--s2)}
header.site nav a[aria-current=page]{color:var(--ink);background:var(--s2)}
main{max-width:var(--max);margin:0 auto;padding:0 22px 90px}
.narrow{max-width:760px}
h1{font-family:Newsreader,Georgia,serif;font-weight:600;font-size:clamp(2.1rem,5vw,3.15rem);line-height:1.05;
 letter-spacing:-.018em;margin:36px 0 16px;text-wrap:balance}
h2{font-family:Newsreader,Georgia,serif;font-weight:600;font-size:clamp(1.45rem,3vw,1.95rem);line-height:1.16;
 margin:44px 0 12px;text-wrap:balance;letter-spacing:-.01em}
h3{font-family:Newsreader,Georgia,serif;font-weight:600;font-size:1.2rem;margin:30px 0 8px;text-wrap:balance}
h4{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);
 margin:26px 0 9px;padding-bottom:5px;border-bottom:1px solid var(--rule)}
p{margin:0 0 15px}
.lede{font-family:Newsreader,Georgia,serif;font-size:1.16rem;line-height:1.5;color:var(--ink2)}
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin:34px 0 12px}
ul,ol{padding-inline-start:20px}
li{margin-bottom:8px}li::marker{color:var(--ink3)}
blockquote{margin:0 0 15px;padding-inline-start:16px;border-inline-start:3px solid var(--rule2);
 font-family:Newsreader,Georgia,serif;font-size:1.04rem;color:var(--ink)}
code{font-family:"IBM Plex Mono",monospace;font-size:.86em;background:var(--s2);padding:1px 5px;border-radius:3px}
pre{background:var(--s2);padding:13px 15px;border-radius:4px;overflow-x:auto;font-size:12.5px}
pre code{background:none;padding:0}
hr{border:none;border-top:1px solid var(--rule);margin:34px 0}
table{border-collapse:collapse;width:100%;font-size:13.5px;background:var(--surface)}
.tw{overflow-x:auto;border:1px solid var(--rule);border-radius:4px;margin:18px 0}
th,td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--rule);vertical-align:top}
thead th{font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
 color:var(--ink3);background:var(--s2);white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
.num{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;white-space:nowrap}
article table{font-size:13px}
article .tw,article table{display:block;overflow-x:auto}
.grid{display:grid;gap:2px;background:var(--rule);border:1px solid var(--rule);border-radius:4px;overflow:hidden}
.g3{grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.cell{background:var(--surface);padding:17px 19px}
.cell h3{margin:0 0 8px;font-size:1.08rem}
.cell p{font-size:13.5px;color:var(--ink2);margin:0}
.card{display:block;background:var(--surface);padding:17px 19px;text-decoration:none;color:inherit}
.card:hover{background:var(--s2)}
.card h3{margin:0 0 6px;font-size:1.06rem;color:var(--ink)}
.card p{font-size:13px;color:var(--ink3);margin:0}
.big{font-family:Newsreader,Georgia,serif;font-size:2.1rem;line-height:1;font-weight:600;font-variant-numeric:tabular-nums}
.bd{display:inline-flex;align-items:center;gap:6px;font-family:"IBM Plex Mono",monospace;font-size:11px}
.dot{width:8px;height:8px;border-radius:50%;flex:none}
.FBISE{color:var(--fb)}.FBISE .dot{background:var(--fb)}
.PCTB{color:var(--pj)}.PCTB .dot{background:var(--pj)}
.STBB{color:var(--sd)}.STBB .dot{background:var(--sd)}
.KPTBB{color:var(--kp)}.KPTBB .dot{background:var(--kp)}
.BTBB{color:var(--bl)}.BTBB .dot{background:var(--bl)}
.pill{font-family:"IBM Plex Mono",monospace;font-size:10px;padding:2px 7px;border-radius:9px;border:1px solid var(--rule2);color:var(--ink3);white-space:nowrap;display:inline-block}
.pill.native{color:var(--kp);border-color:var(--kp)}
.pill.partial{color:var(--pj);border-color:var(--pj)}
.rowline{display:flex;justify-content:space-between;gap:10px;padding:4px 0;border-bottom:1px solid var(--rule);font-size:13px}
.rowline:last-child{border:none}
.rowline .v{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;color:var(--ink2)}
.note{font-size:12.5px;color:var(--ink3);line-height:1.55}
.ax{display:grid;grid-template-columns:170px 1fr 28px;align-items:center;gap:10px;font-size:12.5px;margin-bottom:5px}
.axb{height:13px;background:var(--grid);border-radius:2px;position:relative}
.axf{position:absolute;inset:0 auto 0 0;border-radius:2px}
.axv{font-family:"IBM Plex Mono",monospace;font-size:12px;text-align:right;color:var(--ink2)}
.crumb{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink3);margin:26px 0 0}
.crumb a{color:var(--ink3)}
footer.site-foot{border-top:1px solid var(--rule);padding:26px 0 50px;margin-top:40px}
footer.site-foot p{font-size:13px;color:var(--ink3)}
footer.site-foot .fine{font-size:12px;margin-top:8px}
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 14px}
select,input[type=search],input[type=text]{font-family:"IBM Plex Sans",sans-serif;font-size:13px;padding:6px 9px;
 border:1px solid var(--rule2);background:var(--surface);color:var(--ink);border-radius:3px}
button.clr{font-family:"IBM Plex Mono",monospace;font-size:11px;padding:6px 10px;border:1px solid var(--rule2);
 background:var(--surface);color:var(--ink2);border-radius:3px;cursor:pointer}
button.clr:hover{background:var(--s2)}
.count{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--ink3);margin-inline-start:auto}
tbody tr.rowlink:hover{background:var(--s2)}
tbody tr.rowlink td a{text-decoration:none;color:inherit;display:block}
.sc .n{display:inline-block;min-width:17px;text-align:center;padding:1px 0;border-radius:2px;font-family:"IBM Plex Mono",monospace;font-size:12px}
.n1{background:rgba(11,125,78,.16)}.n2{background:rgba(11,125,78,.09)}.n3{background:var(--grid)}
.n4{background:rgba(140,47,47,.13)}.n5{background:rgba(140,47,47,.24)}
.na{color:var(--ink3);opacity:.45}
:focus-visible{outline:2px solid var(--sd);outline-offset:2px}
#search .pagefind-ui__drawer{max-height:60vh;overflow-y:auto}
@media (max-width:640px){.ax{grid-template-columns:120px 1fr 28px}main{padding-bottom:60px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* ---- findings ---- */
.fcard{border-bottom:1px solid var(--rule);padding:16px 0}
.fcard:last-child{border-bottom:none}
.fcard h3{margin:0 0 6px;font-size:1.14rem;line-height:1.28}
.fcard h3 a{color:var(--ink);text-decoration:none}
.fcard h3 a:hover{text-decoration:underline;text-underline-offset:3px}
.fcard p{margin:0 0 8px;color:var(--ink2);font-size:14.5px}
.fmeta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;font-family:"IBM Plex Mono",monospace;font-size:10.5px}
.conf{color:var(--ink3);letter-spacing:.05em;text-transform:uppercase}
.cite-block{font-family:"IBM Plex Mono",monospace;font-size:13px;line-height:1.6;color:var(--ink2);
 background:var(--s2);padding:12px 15px;border-radius:4px;max-width:none}
.counter{border-inline-start:3px solid var(--kp);padding-inline-start:15px;color:var(--ink2);font-size:14.5px}
.citebox{font-family:"IBM Plex Mono",monospace;font-size:12.5px;line-height:1.65;color:var(--ink2);
 background:var(--s2);border:1px solid var(--rule);padding:13px 15px;border-radius:4px;max-width:none;
 -webkit-user-select:all;user-select:all}
blockquote{font-size:1.1rem}
/* ---- reading paths ---- */
.path{border:1px solid var(--rule);border-radius:4px;padding:18px 20px;background:var(--surface);margin-bottom:2px}
.path h3{margin:0 0 6px;font-size:1.1rem}
.path p{font-size:14px;color:var(--ink2);margin:0 0 10px}
.path ol{margin:0;padding-inline-start:18px;font-size:14px}
.path li{margin-bottom:5px}


/* ---- Era separation -------------------------------------------------------
   The catalogue holds current textbooks and withdrawn editions back to 1949.
   A historical record misread as current is the likeliest misquotation this
   site enables, so historical ones are marked before their content is read. */
.era-tag{display:inline-flex;align-items:center;gap:5px;margin-inline-start:10px;
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.07em;text-transform:uppercase;
  padding:2px 8px;border-radius:9px;border:1px solid var(--flag);color:var(--flag);white-space:nowrap}
.era-note{border:1px solid var(--flag);border-inline-start-width:3px;border-radius:4px;
  padding:13px 16px;margin:18px 0 24px;background:var(--s2)}
.era-note strong{display:block;color:var(--flag);font-size:14px;margin-bottom:5px}
.era-note p{margin:0;font-size:13px;color:var(--ink2);line-height:1.6}

/* Count badge beside a section heading, so a truncated list can never masquerade
   as a complete one. */
.count{font-family:"IBM Plex Mono",monospace;font-size:10px;padding:1px 6px;margin-inline-start:7px;
  border-radius:8px;background:var(--s3);color:var(--ink3);letter-spacing:0}

/* Urdu and Sindhi run right-to-left in Nastaliq. Rendered in the Latin body face
   the script breaks apart, which would undercut the very section explaining why
   this project treats Urdu material as theme-grade. */
.ur{font-family:"Noto Nastaliq Urdu","Jameel Noori Nastaleeq",serif;
  direction:rtl;text-align:right;line-height:2.1;font-size:1.05em}

/* Inline Arabic-script run inside English prose: isolate so it cannot reorder the
   surrounding text, and give it a Nastaliq face with a real fallback. */
.ur-inline{font-family:"Noto Nastaliq Urdu","Jameel Noori Nastaleeq","Noto Naskh Arabic",serif;
  direction:rtl;unicode-bidi:isolate;font-size:1.02em;line-height:2}
/* Whole row is clickable, but only the title cell is a real link — so a screen reader
   announces one destination per row instead of nine identical ones. */
tbody tr.rowlink{cursor:pointer}
tbody tr.rowlink td a{text-decoration:none;color:inherit}
tbody tr.rowlink:focus-within{background:var(--s2);outline:2px solid var(--rule2);outline-offset:-2px}
/* A mean over fewer than four books is not a board figure. Mark it so it cannot be
   quoted as one by mistake. */
.thin-n{color:var(--flag);font-size:12px;font-weight:500}

/* Header search is a real GET form so it works with JS disabled. */
.hsearch{display:flex;gap:6px;align-items:center;margin-inline-start:auto}
.hsearch input{font:inherit;font-size:13px;padding:5px 9px;border:1px solid var(--rule2);
  border-radius:3px;background:var(--surface);color:var(--ink);min-width:12rem}
.hsearch button{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;padding:6px 10px;border:1px solid var(--rule2);border-radius:3px;
  background:var(--s2);color:var(--ink2);cursor:pointer}
.hsearch button:hover{background:var(--s3)}
@media(max-width:820px){.hsearch{width:100%;margin:8px 0 0}.hsearch input{flex:1;min-width:0}}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Colophon row in the footer. */
.colophon{display:flex;flex-wrap:wrap;gap:4px 18px;margin:14px 0 10px;
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.05em;text-transform:uppercase}

/* Deep links should show the reader what was linked. */
:target{scroll-margin-top:5rem}
:target > h2, :target > h3, h2:target, h3:target, article:target, tr:target > td{
  background:var(--s2);box-shadow:-10px 0 0 var(--s2),10px 0 0 var(--s2)}

/* Heading anchor affordance: the IDs already existed and no reader could grab them. */
.anchor{opacity:0;margin-inline-start:.4em;text-decoration:none;color:var(--ink3);font-weight:400}
h2:hover .anchor, h3:hover .anchor, .anchor:focus{opacity:1}

/* ---- Evidence items ------------------------------------------------------
   A quotation, a structural observation and a negative result are three
   different kinds of claim. Rendering them in one typography lets the weakest
   borrow the authority of the strongest. */
.ev{border-inline-start:3px solid var(--rule2);padding:10px 0 10px 14px;margin:0 0 14px}
.ev:target{background:var(--s2);box-shadow:-14px 0 0 var(--s2),14px 0 0 var(--s2)}
.ev-head{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;margin:0 0 6px;
  font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink3)}
.ev-kind{font-weight:500;color:var(--ink2)}
.ev-body{font-size:15px;line-height:1.65;color:var(--ink)}
.ev-anchor{margin-inline-start:auto;text-decoration:none;opacity:0;color:var(--ink3)}
.ev:hover .ev-anchor,.ev-anchor:focus{opacity:1}

.ev-quotation{border-inline-start-color:var(--ink2)}
.ev-quotation .ev-body{font-style:italic}
.ev-observation{border-inline-start-color:var(--rule2)}
.ev-absence{border-inline-start-style:dashed;border-inline-start-color:var(--flag)}
.ev-absence .ev-kind{color:var(--flag)}
.ev-warn{margin:7px 0 0;font-size:12px;line-height:1.55;color:var(--ink3)}

/* Long-form articles get a reading measure and a little more air than the reference pages. */
.longform{max-width:none}
.longform p{font-size:16.5px;line-height:1.72;margin-bottom:18px}
.longform h2{font-size:23px;margin:36px 0 12px}
.longform blockquote{font-size:17px;line-height:1.6;padding-inline-start:20px;
  border-inline-start-width:4px;margin:20px 0}
.longform table{font-size:14px}

/* ---- Justified body text --------------------------------------------------
   Justification without hyphenation produces rivers of white space, so the two
   are set together. Applied only to running prose: tables, captions, notes,
   monospace blocks and headings stay ragged-right, where justification would
   stretch short lines badly. */
main p,
.longform p,
article p,
main li,
.era-note p,
.ev-body {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
  -webkit-hyphenate-limit-chars: 6 3 3;
  hyphenate-limit-lines: 3;
  -webkit-hyphenate-limit-lines: 3;
  overflow-wrap: break-word;
}

/* Elements that must stay ragged: short lines justify badly, and a stretched
   two-word line reads as a rendering fault rather than a choice. */
main p.crumb,
main p.eyebrow,
main p.fine,
main .citebox,
main .ev-head,
main .ev-warn,
main .mt-meta,
main figcaption,
main td, main th,
main .card p,
main .cell p,
main .rowline,
.colophon,
.site-foot p.fine {
  text-align: start;
  hyphens: manual;
}

/* The lede is set large, so it needs a long measure before justification helps it. */
main p.lede { text-align: start; hyphens: manual; }
@media (min-width: 700px) {
  main p.lede { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
}

/* Never hyphenate inside a citation, a code span, or Nastaliq. */
code, .citebox, .ur, .ur-inline { hyphens: manual; }

/* On a phone the measure is short, which is exactly the case where justification
   fails WITHOUT hyphenation and works WITH it — a newspaper column is narrower than
   this. So keep it justified and let hyphenation do more work: allow shorter words to
   break (5 2 2 rather than 6 3 3), and cap the ladder of consecutive hyphens so the
   right edge does not turn into a row of dashes. A long unbroken token — a URL, a
   filename — is allowed to break rather than force a river across the line. */
@media (max-width: 560px) {
  main p, .longform p, article p, main li, .era-note p, .ev-body {
    hyphenate-limit-chars: 5 2 2;
    -webkit-hyphenate-limit-chars: 5 2 2;
    hyphenate-limit-lines: 2;
    -webkit-hyphenate-limit-lines: 2;
    overflow-wrap: break-word;
  }
}

/* Below this the measure really is too short for even hyphenated justification. */
@media (max-width: 330px) {
  main p, .longform p, article p, main li, .era-note p, .ev-body {
    text-align: start;
  }
}

/* ---- Typography note ------------------------------------------------------
   royal.uk serves Raleway from Google Fonts, so it is free to use and it is
   adopted here for the chrome — masthead, navigation, eyebrows, section labels
   — where its display character reads as deliberate.

   It is NOT used for running text. Raleway is a display face: its light weights
   thin out at body size and its numerals are uneven, which matters on a site
   whose longest study runs past 12,000 words. Newsreader stays for reading,
   because it was drawn for long-form text on screen and has optical sizing, and
   IBM Plex Mono stays for anything tabular where digits must align. The brief
   was to take royal.uk's fonts unless ours read better; for body text ours do. */
header.site nav a,
.hsearch button,
.eyebrow,
.colophon,
h4 {
  font-family: "Raleway", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;
}
header.site nav a { letter-spacing: .01em; font-weight: 500; }
header.site nav a[aria-current="page"] { color: var(--royal); background: var(--s2); }

/* Masthead mark sits beside the wordmark rather than replacing it — the name is the brand and
   the domain, and a bare glyph would not carry it. */

/* ---- Tables on small screens ----------------------------------------------
   Wide comparison tables are the core of this site and cannot be made narrow
   without losing the comparison. The strategy is therefore to make horizontal
   scrolling *work well* rather than to pretend it away:

     - the scroll container is keyboard-focusable, so it can be reached and
       scrolled without a mouse or touch;
     - the first column sticks, so a row never loses the thing it names as you
       scroll sideways through board columns;
     - a shadow on the right edge signals that more exists off-screen, which is
       the failure a plain overflow container has — readers do not discover it;
     - padding and font size tighten so more columns fit before scrolling starts.

   Card-per-row stacking was considered and rejected: a seven-axis board
   comparison read as seven stacked cards is not the same information. */

.tw{
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  /* Right-edge shadow appears only while content is scrollable off-screen. */
  background:
    linear-gradient(to right, var(--surface) 30%, rgba(0,0,0,0)) left / 24px 100% no-repeat,
    linear-gradient(to left,  var(--surface) 30%, rgba(0,0,0,0)) right / 24px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.16), rgba(0,0,0,0)) left / 12px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.16), rgba(0,0,0,0)) right / 12px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.tw:focus-visible{ outline: 2px solid var(--royal); outline-offset: 2px }
.tw table{ min-width: 100% }

@media (max-width: 720px){
  th, td{ padding: 7px 9px; font-size: 13px }
  .tw table{ min-width: max-content }

  /* First column sticks so the row label survives sideways scrolling. */
  .tw table th:first-child,
  .tw table td:first-child{
    position: sticky; left: 0; z-index: 2;
    background: var(--surface);
    box-shadow: 1px 0 0 var(--rule);
  }
  .tw table thead th:first-child{ background: var(--s2); z-index: 3 }
  .tw table thead th{ position: sticky; top: 0; z-index: 1; background: var(--s2) }

  /* Long prose cells — evidence columns — get a sensible width instead of one
     enormous cell that forces a metre of scrolling. */
  .tw table td{ max-width: 30ch }

  /* The comparison matrix keeps its sparklines but loses the padding. */
  .matrix td{ padding: 4px 5px }
  .matrix th[scope="row"]{ font-size: 12px }
}

@media (max-width: 480px){
  th, td{ padding: 6px 7px; font-size: 12.5px }
  .tw table td{ max-width: 24ch }
}

/* A caption is announced by screen readers before the table and tells a reader
   on a narrow screen that the thing scrolls. */
.tw table caption{
  caption-side: top; text-align: left; padding: 8px 12px 0;
  font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink3);
}

/* ---- Masthead on narrow screens -------------------------------------------
   The nav is a flex item inside a flex header. A flex item's default
   min-width:auto stops it shrinking below its content, so with fifteen
   sections the row pushed the whole page wider than the viewport and every
   line of body text was clipped — measured at 727px of layout in a 500px
   viewport. Giving it its own full-width row, and min-width:0 so it may
   actually shrink, is what lets flex-wrap do its job. */
@media (max-width: 900px){
  header.site .site-in{ gap: 10px }
  header.site nav{ flex: 1 1 100%; min-width: 0; gap: 2px 4px }
  header.site nav a{ font-size: 11px; padding: 5px 7px }
}

/* Nothing on this site may scroll the page sideways. Wide content scrolls
   inside its own container; the document itself never does. */
html, body{ overflow-x: hidden; max-width: 100% }
main, header.site, footer.site-foot{ max-width: 100%; min-width: 0 }

/* ---- Masthead wordmark ----------------------------------------------------
   Kept in one place. It was previously spread across five rules in three parts
   of this file, which is how the icon and the wordmark drifted out of alignment.

   Alignment here must not depend on which font actually loaded. An earlier
   version nudged the text with a padding tuned to Raleway's metrics, which
   looked correct once Raleway arrived and visibly wrong in the fallback — the
   reason it read fine in one iPhone browser and badly in another, since both
   use the same engine but can differ on whether the web font is ready.

   So: both children are laid out as equal-height flex items and centred
   geometrically. No baseline, no font-specific offset, nothing that changes
   when the typeface swaps in. */
.logo{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--royal);
  min-width: 0;
  line-height: 1;
}
.logo img{
  display: block;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 5px;
}
.logo span{
  /* line-height equal to the icon height centres the text against it without
     making its contents flex items. inline-flex would centre it too — and did —
     but a flex container discards whitespace-only text nodes, which silently ate
     the space in "Textbook Evidence". */
  display: block;
  line-height: 26px;
  font-family: "Raleway", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1;
  white-space: nowrap;
}
.logo b{ font-weight: 700 }

@media (max-width: 480px){
  .logo{ gap: 7px }
  .logo img{ width: 22px; height: 22px }
  .logo span{ line-height: 22px; font-size: .98rem }
}

/* ---- Board profile small multiples ---------------------------------------- */
.profiles{ margin: 36px 0 8px }
.pgrid{
  display: grid; gap: 2px; background: var(--rule);
  border: 1px solid var(--rule); border-radius: 5px; overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin: 18px 0 12px;
}
.panel{
  background: var(--surface); padding: 14px 14px 12px;
  text-decoration: none; color: inherit; display: block;
  transition: background .12s ease;
}
.panel:hover, .panel:focus-visible{ background: var(--s2); outline: none }
.phead{ display: flex; align-items: center; gap: 7px; margin-bottom: 9px }
.pdot{ width: 9px; height: 9px; border-radius: 50%; background: var(--hue); flex: none }
.phead b{ font-size: 14px; font-weight: 600 }
.pmeta{
  margin-inline-start: auto; font-family: "IBM Plex Mono", monospace;
  font-size: 10px; color: var(--ink3);
}
.panel svg{ display: block; width: 100%; height: auto }
.paxis{
  display: flex; justify-content: space-between; margin-top: 3px;
  font-family: "IBM Plex Mono", monospace; font-size: 9px; color: var(--ink3);
}
.pscores{
  display: flex; gap: 14px; margin-top: 10px; padding-top: 9px;
  border-top: 1px solid var(--rule);
}
.pscores span{ display: flex; flex-direction: column; gap: 1px }
.pscores i{ font-style: normal; font-size: 10.5px; color: var(--ink3) }
.pscores b{ font-family: "Newsreader", serif; font-size: 19px; line-height: 1 }

/* ---- Pull quote ------------------------------------------------------------
   A sentence from a textbook, set large. The most striking material this project
   has is the books' own wording, and burying all of it inside tables was the
   reason the pages read flat. */
.pull{
  margin: 34px 0; padding: 4px 0 4px 22px;
  border-inline-start: 3px solid var(--flag);
}
.pull blockquote{
  margin: 0 0 10px; padding: 0; border: none;
  font-family: "Newsreader", Georgia, serif;
  font-size: clamp(1.25rem, 2.2vw, 1.72rem);
  line-height: 1.34; color: var(--ink); font-style: italic;
}
.pull cite{
  font-style: normal; font-family: "IBM Plex Mono", monospace;
  font-size: 11px; letter-spacing: .05em; color: var(--ink3);
}
.pull cite a{ color: inherit }

@media (max-width: 560px){
  .pull{ padding-inline-start: 14px }
}

/* Axis key — the codes A1..A7 are meaningless on their own, and a reader meeting the chart
   first should not have to visit another page to learn what is being measured. */
.akey{
  list-style: none; padding: 0; margin: 14px 0 10px;
  display: grid; gap: 2px 18px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  font-size: 12.5px;
}
.akey a{ text-decoration: none; color: var(--ink2); display: block; padding: 2px 0 }
.akey a:hover{ color: var(--link) }
.akey b{
  font-family: "IBM Plex Mono", monospace; font-size: 11px;
  color: var(--ink3); margin-inline-end: 5px; font-weight: 500;
}

/* Which end of the 1–5 scale means what. Without this a "3.2" is just a number. */
.scalekey{
  display: flex; align-items: center; gap: 10px; margin: 0 0 6px;
  font-family: "IBM Plex Mono", monospace; font-size: 10px;
  letter-spacing: .04em; color: var(--ink3); flex-wrap: wrap;
}
.sk-bar{
  flex: 1 1 60px; height: 4px; border-radius: 2px; min-width: 60px;
  background: linear-gradient(to right, var(--kp), var(--rule2) 50%, var(--flag));
}
.sk-low{ color: var(--kp) } .sk-high{ color: var(--flag) }
.pax-pad{ width: 9px; flex: none }

.bprofile{ margin: 20px 0 26px }
.axn{ font-style: normal; font-size: 10px; color: var(--ink3); margin-inline-start: 3px }

/* ---- Findings: narration and evidence -------------------------------------
   The narration is the reader's path through the evidence, so it is set larger than
   body text but below the lede — it leads, it is not a summary. */
.walk{ margin: 18px 0 22px; padding-inline-start: 16px; border-inline-start: 3px solid var(--royal) }
.walk p{ font-size: 1.06rem; line-height: 1.72; margin: 0 }

.evset{ margin: 26px 0 }
.evset > .note{ margin-top: -2px }
.evrec{ border: 1px solid var(--rule); border-radius: 4px; padding: 12px 14px;
  margin: 12px 0; background: var(--surface) }
.evrec.ev-absent{ background: transparent; border-style: dashed }
.evhead{ margin: 0 0 7px; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline }
.evhead > a{ font-weight: 600 }
.evtags{ display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline }
.evk, .evax, .evpg, .evtier{ font-family: "IBM Plex Mono", monospace; font-size: 10.5px;
  letter-spacing: .04em; text-transform: uppercase; padding: 2px 6px; border-radius: 3px;
  white-space: nowrap }
.evk{ background: var(--royal); color: #fff }
.evk.k-observation{ background: var(--ink3) }
.evk.k-absence{ background: transparent; color: var(--ink3); border: 1px dashed var(--rule2) }
.evax{ background: var(--wash); color: var(--ink2); text-decoration: none }
.evax:hover{ text-decoration: underline }
.evpg{ background: var(--wash); color: var(--ink2) }
.evtier{ color: var(--ink3); text-transform: none; letter-spacing: 0; font-size: 11px }
.evbody{ margin: 0; font-size: .96rem }

/* The apparatus is necessary and is not what anyone came for. */
.apparatus{ margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--rule) }