/* ============================================================
   The Translator's Soul — design system
   Type system from Proof (Newsreader serif + Inter labels,
   italic as literary register). Cream paper + SVG grain +
   earth accents (ochre/rust/slate/olive/rose) from LS Website.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=Inter:wght@400;500;600&display=swap");

:root{
  /* Paper — warm cream, lighter than LS's gallery sheet for long reading */
  --paper:#e7ddc8; --paper-2:#efe7d6; --paper-warm:#dccfb2; --paper-shadow:#b09a7e;
  /* Ink — warm near-black */
  --ink:#1e1a13; --ink-soft:#3c342a; --ink-light:#6a5f4e; --ink-faint:#8a7c66;
  --rule:#cdbf9f; --rule-soft:#d9cdb1;
  /* Earth accents (LS palette) */
  --ochre:#9c7b45; --rust:#9e5f4c; --slate:#5f6a74; --olive:#6f6f4f; --rose:#a87a72;
  --accent:#9e5f4c; --accent-2:#9c7b45;
  /* arm hues → the five columns (control neutral; the others more differentiated) */
  --de:#5f6a74; --h:#b0543a; --a:#b0822a; --b:#3f7468; --c:#8a8276;
  --serif:"Newsreader","Iowan Old Style",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --prose:40rem; --wide:80rem; --header-h:60px;
  /* shared horizontal gutter — header + main use the SAME value so their
     left edges align, and the nav can be indented to the centered column */
  --wrap-pad:clamp(1.2rem,5vw,3rem);
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:17px;scroll-behavior:smooth;scroll-padding-top:5rem;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background-color:var(--paper);color:var(--ink);
  font-family:var(--serif);font-optical-sizing:auto;font-size:17px;line-height:1.66;
  text-wrap:pretty;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  /* LS paper grain */
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch' seed='7'/><feColorMatrix values='0 0 0 0 0.11  0 0 0 0 0.10  0 0 0 0 0.09  0 0 0 0.05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-repeat:repeat;background-size:320px 320px;
}
::selection{background:var(--paper-shadow);color:var(--ink)}
a{color:inherit;text-decoration:none}
em,i{font-style:italic}
strong{font-weight:600}
h1,h2,h3,.standfirst,.subtitle,.arm .ttl,.finding .ft h3,blockquote p,.pull,.pager .ttl{text-wrap:balance}

/* ---------- site header (sparse wordmark + nav) ---------- */
.site-header{
  position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;
  align-items:baseline;gap:1.5rem;flex-wrap:wrap;
  padding:1.1rem var(--wrap-pad);
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:saturate(140%) blur(6px);border-bottom:1px solid var(--rule-soft);
  /* how far the centered prose column sits in from the gutter: half the
     leftover once --prose is removed from the header's content-box width.
     Using 100% (not 100vw) keeps this scrollbar-immune and identical to the
     .wrap column centering — both are full-width blocks of the same width. */
  --col-indent:max(0px, (100% - var(--prose)) / 2);
}
.wordmark{font-family:var(--serif);font-weight:500;font-size:1.16rem;letter-spacing:-.01em;color:var(--ink);flex:0 0 auto}
.wordmark .it{font-style:italic}
.site-nav{display:flex;flex-wrap:wrap;gap:.2rem 1.05rem;align-items:baseline}

/* Wide screens: drop the nav's left edge onto the centered content column's
   left edge (= gutter + --col-indent), flowing rightward from there, on the
   same line as the wordmark. The wordmark keeps its far-left gutter position
   but is given a fixed lane exactly --col-indent wide, so the nav begins
   precisely at the column's left edge. Applied only at >=1240px, where
   --col-indent (>=~232px) comfortably exceeds the wordmark's width (no
   overlap) and the full nav still fits on one line. Below the breakpoint we
   keep the default: wordmark left, nav wrapping full-width beneath it. */
@media (min-width:1240px){
  .site-header{justify-content:flex-start;gap:0}
  .wordmark{flex:0 0 var(--col-indent)}
}
.site-nav a{
  font-family:var(--sans);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-light);padding:.15rem 0;transition:color 180ms;white-space:nowrap;
}
.site-nav a:hover{color:var(--ink)}
.site-nav a.active{color:var(--accent);border-bottom:1px solid var(--accent)}

/* ---------- layout ---------- */
.wrap{padding:clamp(2.6rem,6vw,5rem) clamp(1.2rem,5vw,3rem) 4rem;display:flex;justify-content:center}
.col{width:100%;max-width:var(--prose)}
.col.wide{max-width:var(--wide)}

/* ---------- type ---------- */
.eyebrow{font-family:var(--sans);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);margin-bottom:1.3rem}
h1{font-weight:400;font-size:clamp(2.3rem,5.2vw,3.5rem);line-height:1.06;letter-spacing:-.022em;margin-bottom:1.1rem}
h1 .it{font-style:italic}
.subtitle{font-family:var(--sans);font-size:.76rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-light);margin:.35rem 0 2rem}
.epigraph{margin:0 0 2.4rem;padding-left:1.2rem;border-left:2px solid var(--rule);color:var(--ink-soft);
  font-style:italic;font-size:1.04rem;line-height:1.5;max-width:33rem}
.epigraph cite{display:block;font-family:var(--sans);font-style:normal;font-size:.64rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-faint);margin-top:.55rem}
.standfirst{font-size:1.24rem;line-height:1.55;color:var(--ink-soft);font-style:italic;margin-bottom:2.4rem;max-width:36rem}
h2{font-weight:400;font-size:1.72rem;line-height:1.16;letter-spacing:-.012em;margin:3rem 0 1rem;
  padding-top:1.8rem;border-top:1px solid var(--rule)}
h2:first-of-type{border-top:none;padding-top:0;margin-top:1.5rem}
h2 .it{font-style:italic}
h3{font-family:var(--serif);font-weight:500;font-style:italic;font-size:1.18rem;letter-spacing:-.005em;
  color:var(--ink);margin:2rem 0 .55rem;line-height:1.25}
p{margin-bottom:1.15rem}
.prose>p:first-of-type{margin-top:0}
.prose a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:var(--rule)}
.prose a:hover{text-decoration-color:var(--accent)}
ul,ol{margin:0 0 1.15rem 1.2rem}
li{margin-bottom:.5rem}
hr{border:none;border-top:1px solid var(--rule);margin:2.8rem 0}
.small{font-size:.92rem;color:var(--ink-soft)}
.muted{color:var(--ink-faint)}
.lede-mark{color:var(--accent)}

/* ---------- micro-label (Proof) ---------- */
.label{font-family:var(--sans);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}

/* ---------- callouts ---------- */
.note{font-size:.96rem;line-height:1.6;color:var(--ink-soft);font-style:italic;
  border-left:2px solid var(--accent-2);padding:.3rem 0 .3rem 1.2rem;margin:1.8rem 0}
.panel{background:var(--paper-2);border:1px solid var(--rule);border-radius:3px;padding:1.3rem 1.5rem;margin:1.8rem 0}
.panel h3:first-child{margin-top:0}
blockquote{margin:1.6rem 0;padding-left:1.3rem;border-left:2px solid var(--rule);color:var(--ink-soft);font-style:italic}
blockquote p:last-child{margin-bottom:0}
.pull{font-family:var(--serif);font-style:italic;font-size:1.5rem;line-height:1.4;color:var(--ink);
  margin:2.6rem 0;text-wrap:pretty}
@media(min-width:768px){.pull{margin-right:-2.5rem}}

/* ---------- the four arms key ---------- */
.arms{display:grid;grid-template-columns:repeat(auto-fit,minmax(11.5rem,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);margin:2rem 0}
.arm{background:var(--paper-2);padding:1.1rem 1.2rem;border-top:3px solid var(--armc,var(--rule))}
.arm .tag{font-family:var(--sans);font-weight:500;font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--armc,var(--ink));margin-bottom:.45rem}
.arm .ttl{font-size:1.18rem;font-style:italic;margin-bottom:.4rem}
.arm p{font-size:.9rem;line-height:1.5;color:var(--ink-soft);margin:0}
.arm.de{--armc:var(--de)} .arm.h{--armc:var(--h)} .arm.aa{--armc:var(--a)}
.arm.bb{--armc:var(--b)} .arm.cc{--armc:var(--c)}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;margin:1.8rem 0;font-family:var(--sans);font-size:.82rem}
caption{caption-side:top;text-align:left;font-family:var(--sans);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:.6rem}
th,td{text-align:left;padding:.5rem .7rem;border-bottom:1px solid var(--rule-soft);vertical-align:top}
thead th{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);border-bottom:1px solid var(--rule)}
tbody tr:hover{background:var(--paper-2)}
td:first-child,th:first-child{font-family:var(--serif);font-size:.95rem}
/* arm-colored table columns + composite/total row */
table.arm-cols tbody tr:hover{background:transparent}
table.arm-cols th:nth-child(2),table.arm-cols td:nth-child(2){background:color-mix(in srgb,var(--a) 14%,transparent)}
table.arm-cols th:nth-child(3),table.arm-cols td:nth-child(3){background:color-mix(in srgb,var(--b) 14%,transparent)}
table.arm-cols th:nth-child(4),table.arm-cols td:nth-child(4){background:color-mix(in srgb,var(--c) 14%,transparent)}
table.arm-cols th:nth-child(5),table.arm-cols td:nth-child(5){background:color-mix(in srgb,var(--h) 14%,transparent)}
table tr.total td{border-top:1.5px solid var(--ink-faint);font-weight:600}

/* ---------- download list ---------- */
.files{list-style:none;margin:1rem 0 1.8rem;padding:0}
.files li{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  padding:.55rem 0;border-bottom:1px solid var(--rule-soft)}
.files a{font-size:1.02rem;color:var(--accent);text-decoration:none}
.files a:hover{text-decoration:underline;text-underline-offset:3px}
.files .meta{font-family:var(--sans);font-size:.64rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-faint);white-space:nowrap}

/* ---------- findings ---------- */
.finding{display:flex;gap:1.2rem;margin:1.8rem 0;align-items:flex-start}
.finding .fn{font-family:var(--serif);font-size:2.4rem;line-height:.9;color:var(--accent);font-style:italic;
  flex:0 0 auto;width:1.8rem;text-align:right}
.finding .ft{flex:1 1 auto}
.finding .ft h3{font-family:var(--serif);font-style:normal;text-transform:none;letter-spacing:-.01em;font-size:1.16rem;
  font-weight:500;color:var(--ink);margin:.2rem 0 .4rem;line-height:1.25}
.finding .ft p{margin:0;color:var(--ink-soft)}

/* ---------- charts ---------- */
.fig{margin:2.2rem 0 1.2rem}
.fig figcaption{font-family:var(--sans);font-size:.72rem;line-height:1.5;letter-spacing:.01em;color:var(--ink-faint);margin-top:1rem}
.fig figcaption b{color:var(--ink-soft);font-weight:600}
.armc-de{color:var(--de)} .armc-h{color:var(--h)} .armc-a{color:var(--a)} .armc-b{color:var(--b)} .armc-c{color:var(--c)}

/* foreignising ↔ domesticating axis */
.axis{position:relative;height:4.8rem;margin:2.4rem 0 .6rem}
.axis-track{position:absolute;left:2%;right:2%;top:3.1rem;height:2px;background:var(--rule)}
.axis-end{position:absolute;top:0;font-family:var(--sans);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.axis-end.l{left:0} .axis-end.r{right:0}
.axis-mark{position:absolute;top:1.8rem;transform:translateX(-50%);text-align:center}
.axis-mark .val{font-family:var(--sans);font-size:.62rem;color:var(--ink-faint);margin-bottom:.2rem}
.axis-mark .dot{width:13px;height:13px;border-radius:50%;background:currentColor;margin:0 auto;box-shadow:0 0 0 3px var(--paper)}
.axis-mark .lab{font-family:var(--sans);font-size:.62rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-top:.35rem}

/* pairwise-agreement heatmap */
.heat{display:grid;grid-template-columns:1.6rem repeat(4,1fr);gap:3px;max-width:26rem;margin:1.8rem 0;font-family:var(--sans)}
.heat>div{display:flex;align-items:center;justify-content:center;aspect-ratio:1.9/1;font-size:.82rem;border-radius:2px}
.heat .hh{aspect-ratio:auto;font-size:.64rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
.heat .hd{background:rgba(158,95,76,var(--v,0));color:var(--ink);font-variant-numeric:tabular-nums}
.heat .hx{color:var(--ink-faint);opacity:.5}

/* legend */
.legend{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;font-family:var(--sans);font-size:.68rem;color:var(--ink-soft);margin:.4rem 0 0}
.legend span{display:inline-flex;align-items:center;gap:.4rem}
.legend i{width:.7rem;height:.7rem;border-radius:50%;background:currentColor;display:inline-block}

/* per-test mini tracks (five-test breakdown) */
.tests{margin:1.8rem 0 .6rem}
.trow{display:grid;grid-template-columns:7rem 1fr;gap:.9rem;align-items:center;margin:.5rem 0}
.trow .tn{font-family:var(--sans);font-size:.6rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);text-align:right;line-height:1.25}
.mt{position:relative;height:1.8rem}
.mt::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--rule)}
.md{position:absolute;top:50%;width:11px;height:11px;border-radius:50%;transform:translate(-50%,-50%);background:var(--armc,var(--ink));box-shadow:0 0 0 2px var(--paper)}
/* fan the four arms into lanes so coincident values stay visible */
.md.a{--armc:var(--a);top:24%} .md.b{--armc:var(--b);top:41%} .md.c{--armc:var(--c);top:59%} .md.h{--armc:var(--h);top:76%} .md.de{--armc:var(--de)}
.test-ends{display:grid;grid-template-columns:7rem 1fr;gap:.9rem;margin-top:.2rem}
.test-ends .te{display:flex;justify-content:space-between;grid-column:2;font-family:var(--sans);font-size:.56rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint)}

/* unit chart (partition pattern) */
.units{display:flex;flex-wrap:wrap;gap:3px;max-width:21rem;margin:1.4rem 0 .8rem}
.units b{width:.8rem;height:.8rem;border-radius:2px;background:var(--rule-soft)}
.units b.cl{background:var(--accent)}

/* big-number stat */
.stat{display:flex;align-items:baseline;gap:.9rem;margin:1.4rem 0}
.stat .big{font-family:var(--serif);font-size:2.7rem;font-weight:500;color:var(--accent);line-height:.9}
.stat .lab{font-family:var(--sans);font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft)}

/* bonmots */
.bon{list-style:none;padding:0;margin:1.4rem 0}
.bon li{padding:.6rem 0;border-bottom:1px solid var(--rule-soft);font-size:1rem;color:var(--ink-soft)}
.bon li b{color:var(--ink);font-weight:600}

/* cluster map */
.cmap{position:relative;height:10rem;border:1px solid var(--rule-soft);border-radius:4px;background:var(--paper-2);margin:1.6rem 0 .8rem}
.cmap .grp{position:absolute;border:1px dashed var(--ink-faint);border-radius:12px}
.cmap .gl{position:absolute;top:-.62rem;left:.7rem;background:var(--paper-2);padding:0 .4rem;font-family:var(--sans);font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.cdot{position:absolute;transform:translate(-50%,-50%);text-align:center}
.cdot i{width:13px;height:13px;border-radius:50%;background:var(--armc,var(--ink));display:block;margin:0 auto;box-shadow:0 0 0 2px var(--paper-2)}
.cdot span{font-family:var(--sans);font-size:.57rem;font-weight:600;letter-spacing:.04em;color:var(--armc,var(--ink));display:block;margin-top:.28rem;white-space:nowrap}
.cdot.h{--armc:var(--h)} .cdot.a{--armc:var(--a)} .cdot.b{--armc:var(--b)} .cdot.c{--armc:var(--c)}

/* appendix reading pages */
.read-doc{max-width:54rem}
/* generated reading pages sometimes contain long unbreakable runs (box-drawing
   "═══" dividers, IDs, URLs). Let those wrap so they never force horizontal
   overflow; normal prose still breaks at word boundaries first. */
.prose,.read-doc{overflow-wrap:anywhere}
.read-doc table{font-size:.74rem}
.read-doc hr{margin:2rem 0}
.prose pre{background:var(--paper-2);border:1px solid var(--rule-soft);border-radius:4px;padding:1rem 1.1rem;overflow-x:auto;line-height:1.5;margin:1.4rem 0}
.prose code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.86em}
.prose pre code{font-size:.8rem}

/* ---------- pager + footer ---------- */
.pager{display:flex;justify-content:space-between;gap:1.5rem;margin-top:3.6rem;padding-top:1.5rem;border-top:1px solid var(--rule)}
.pager a{display:inline-flex;flex-direction:column;gap:.2rem;max-width:48%}
.pager .dir{font-family:var(--sans);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.pager .ttl{font-size:1.05rem;font-style:italic;color:var(--ink)}
.pager .nx{text-align:right;margin-left:auto}
.pager a:hover .ttl{color:var(--accent)}
.foot{font-family:var(--sans);font-size:.68rem;line-height:1.7;letter-spacing:.02em;color:var(--ink-faint);
  margin-top:2.6rem;padding-top:1.2rem;border-top:1px solid var(--rule-soft)}
.site-footer{background:var(--paper-2);border-top:1px solid var(--rule);padding:3rem clamp(1.2rem,5vw,3rem);
  margin-top:5rem;display:flex;flex-direction:column;align-items:center;gap:1.1rem;text-align:center}
.site-footer .fm{font-size:1.05rem;font-style:italic}
.site-footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.1rem}
.site-footer nav a{font-family:var(--sans);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-light);transition:color 180ms}
.site-footer nav a:hover{color:var(--ink)}
.site-footer .cr{font-family:var(--sans);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.site-footer .cr a{color:var(--ink-light);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.site-footer .cr a:hover{color:var(--ink)}
.arrow{display:inline-block;transition:transform 280ms}
a:hover .arrow{transform:translateX(4px)}

/* ============================================================
   side-by-side reader
   ============================================================ */
.reader-controls{position:sticky;top:var(--header-h);z-index:20;
  background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--rule);padding:.85rem 0;margin-bottom:1.6rem}
.reader-controls .row{display:flex;flex-wrap:wrap;gap:.5rem .55rem;align-items:center}
.toggle{display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;user-select:none;
  border:1px solid var(--rule);border-radius:2px;background:var(--paper-2);padding:.32rem .75rem;
  font-family:var(--sans);font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint)}
.toggle input{position:absolute;opacity:0;pointer-events:none}
.toggle .dot{width:.6rem;height:.6rem;border-radius:50%;background:var(--armc,var(--ink-faint));opacity:.3}
.toggle.on{color:var(--ink);border-color:var(--armc,var(--ink))}
.toggle.on .dot{opacity:1}
.toggle.de{--armc:var(--de)} .toggle.h{--armc:var(--h)} .toggle.a{--armc:var(--a)}
.toggle.b{--armc:var(--b)} .toggle.c{--armc:var(--c)}
.ctrl-hint{font-family:var(--sans);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin-left:auto}

.scene{margin-bottom:2.8rem}
.scene-head{font-family:var(--sans);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);
  margin-bottom:.8rem;padding-bottom:.45rem;border-bottom:1px solid var(--rule-soft)}
.scene-grid{display:grid;gap:1.5rem 1.7rem;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.tcol{min-width:0}
.tcol-head{font-family:var(--sans);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500;
  color:var(--armc,var(--ink));margin-bottom:.6rem;padding-bottom:.3rem;border-bottom:2px solid var(--armc,var(--rule));
  position:sticky;top:calc(var(--header-h) + 3.2rem);background:var(--paper)}
.tcol.de{--armc:var(--de)} .tcol.h{--armc:var(--h)} .tcol.a{--armc:var(--a)}
.tcol.b{--armc:var(--b)} .tcol.c{--armc:var(--c)}
.tcol p{font-size:.98rem;line-height:1.6;margin-bottom:.8rem}
.tcol.de p{font-style:italic;color:var(--ink-soft)}

/* ---------- mobile reader: scene + version tabs ----------
   Built by the inline script ONLY at <=760px (portrait phones). One aligned
   scene at a time; tap a version tab to read that hand of the same passage;
   Prev/Next move between the eight scenes. Rotating to landscape (>760px)
   returns to the side-by-side columns. */
.only-mobile{display:none}
.reader-m{margin-top:.2rem}
.vtabs{position:sticky;top:0;z-index:20;display:flex;gap:.3rem;
  background:color-mix(in srgb,var(--paper) 94%,transparent);backdrop-filter:blur(6px);
  padding:.5rem 0;margin-bottom:1.2rem;border-bottom:1px solid var(--rule)}
.vtab{flex:1 1 0;min-width:0;cursor:pointer;
  font-family:var(--sans);font-size:.74rem;font-weight:600;letter-spacing:.05em;
  padding:.62rem .3rem;border:1px solid var(--rule);border-radius:2px;
  background:var(--paper-2);color:var(--ink-faint);
  border-bottom:2px solid transparent;transition:color 160ms,border-color 160ms}
.vtab.is-on{color:var(--ink);border-color:var(--armc,var(--rule));
  border-bottom-color:var(--armc,var(--ink));
  background:color-mix(in srgb,var(--armc,var(--ink)) 12%,var(--paper-2))}
.vtab.de{--armc:var(--de)} .vtab.h{--armc:var(--h)} .vtab.a{--armc:var(--a)}
.vtab.b{--armc:var(--b)} .vtab.c{--armc:var(--c)}
.m-scene-head{font-family:var(--sans);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--armc,var(--ink-faint));margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid var(--rule-soft)}
.m-scene-head.de{--armc:var(--de)} .m-scene-head.h{--armc:var(--h)} .m-scene-head.a{--armc:var(--a)}
.m-scene-head.b{--armc:var(--b)} .m-scene-head.c{--armc:var(--c)}
.m-body{min-height:38vh}
.m-body p{font-size:1.05rem;line-height:1.66;margin-bottom:.95rem}
.m-body.de p{font-style:italic;color:var(--ink-soft)}
.m-pager{display:flex;align-items:center;justify-content:space-between;gap:.7rem;
  margin-top:2rem;padding-top:1.1rem;border-top:1px solid var(--rule)}
.m-nav{font-family:var(--sans);font-size:.72rem;letter-spacing:.03em;cursor:pointer;
  padding:.6rem 1.05rem;border:1px solid var(--rule);border-radius:2px;
  background:var(--paper-2);color:var(--ink)}
.m-nav:disabled{opacity:.32;cursor:default}
.m-count{font-family:var(--sans);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}

/* ---------- wide multi-column tables: scroll on small screens ----------
   The findings "choices" table and the long reading-page tables (up to 8
   columns of text) are wider than a phone. Rather than crushing them, let
   the table itself become a horizontal-scroll container. Pure CSS — no
   wrapper element needed. A hairline + thin scrollbar hint the overflow. */
@media (max-width:900px){
  .prose table,.read-doc table{
    display:block;width:100%;max-width:100%;overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    border-right:1px solid var(--rule-soft);scrollbar-width:thin;
  }
  .prose table th,.prose table td,
  .read-doc table th,.read-doc table td{white-space:normal}
  /* Min-widths go on the CELLS (not the table) so the table's internal
     content stays wide and scrolls INSIDE the block, while the block box
     itself stays capped at 100% — otherwise a min-width on the table would
     push the whole page wider. */
  .read-doc table th,.read-doc table td{min-width:5.5rem}
  .read-doc table td:first-child,.read-doc table th:first-child{min-width:2.2rem}
  /* findings "choices" table: readable columns that scroll sideways under a
     FROZEN source column (German), instead of crushing five columns to fit */
  .prose table.compare th,.prose table.compare td{min-width:8rem}
  .prose table.compare th:first-child,.prose table.compare td:first-child{
    min-width:6.5rem;position:sticky;left:0;z-index:1;
    background:var(--paper);box-shadow:1px 0 0 var(--rule)}
  .prose table::-webkit-scrollbar,.read-doc table::-webkit-scrollbar{height:7px}
  .prose table::-webkit-scrollbar-thumb,.read-doc table::-webkit-scrollbar-thumb{
    background:var(--paper-shadow);border-radius:4px}
}

/* ---------- responsive ---------- */
@media (max-width:760px){
  html{font-size:16px}
  /* header: non-sticky on mobile (saves vertical space); wordmark on its own
     line, nav wrapping beneath as tap-friendly rows */
  .site-header{position:static;flex-direction:column;align-items:flex-start;gap:.55rem;padding:.9rem var(--wrap-pad)}
  .wordmark{font-size:1.08rem}
  .site-nav{gap:.1rem .9rem;width:100%}
  .site-nav a{padding:.5rem 0;font-size:.7rem}          /* ~40px tap targets */
  .site-nav a.active{border-bottom-width:2px}

  .wrap{padding:clamp(1.8rem,7vw,2.6rem) var(--wrap-pad) 3rem}
  h1{font-size:clamp(2rem,8.5vw,2.6rem)}
  .standfirst{font-size:1.12rem;line-height:1.5}
  .epigraph,.pull{margin-right:0}
  .pull{font-size:1.28rem;margin:1.8rem 0}

  /* reader: the desktop toggle bar + side-by-side grid give way to the
     scene + version-tab view (built by the inline script below 760px) */
  .reader-controls{display:none}
  .scene-grid{grid-template-columns:1fr;gap:1.2rem}    /* fallback if JS is off */
  .tcol-head{position:static}
  .only-desktop{display:none}
  .only-mobile{display:block}

  /* findings */
  .finding{gap:.9rem}
  .finding .fn{font-size:1.9rem;width:1.4rem}
  .heat{max-width:100%}
  .units{max-width:100%}
  .axis{height:5.4rem}                                   /* room for wrapped labels */
  .axis-mark .lab{font-size:.58rem}
  .trow{grid-template-columns:5rem 1fr;gap:.6rem}
  .test-ends{grid-template-columns:5rem 1fr}

  /* download list: stack title over meta so long titles don't crowd */
  .files li{flex-direction:column;gap:.15rem;align-items:flex-start}
  .files .meta{white-space:normal}

  /* pager: stack the two directions */
  .pager{flex-direction:column;gap:1.4rem}
  .pager a{max-width:100%}
  .pager .nx{text-align:left;margin-left:0}
}

/* very narrow phones */
@media (max-width:430px){
  .site-nav{gap:.1rem .75rem}
  .site-nav a{font-size:.68rem}
  .cmap{height:11rem}                                    /* keep dots from colliding */
  .cmap .gl{font-size:.5rem}
  .cdot span{font-size:.54rem}
  .stat .big{font-size:2.2rem}
}
@media print{.site-header,.reader-controls,.pager,.site-footer{display:none}}