/* Shared styles for the whole site.
   Layout: a sticky tab bar switches between nine views (see js/core.js). Prose sits in a reading column (~62ch);
   figures, grids and the timeline use the full width of .wrap, which grows on large monitors.
   The timeline's detail panel docks right on desktop and becomes a bottom sheet on phones.
   Sections of this file: tokens · base · hero · explorer · detail · story · grids & cards · text criticism ·
   argument map · paintings · navigation (tabs, sub-tabs, phone bar, pager) · scholar expanders · print. */
:root{
  /* contrast (phase 2): --faint is used for real text, so it is ≥4.5:1 on paper and panel; --ochre likewise;
     --control-border outlines inputs, selects and toggles at ≥3:1; --t-wes darkened so its dots are ≥3:1 on paper;
     --t-gf-text is the Greek-Fathers colour when used for text */
  --paper:#f3f5f4; --panel:#ffffff; --ink:#1b2130; --muted:#5a6373; --faint:#646d7b; --rule:#d6dce1; --control-border:#7a8391;
  --lapis:#2d5a89; --lapis-soft:#e2eaf3; --oxblood:#8c2d3a; --ox-soft:#f6e3e5; --ochre:#85590a; --green:#2e6a4e;
  /* tradition palette (works in both themes) */
  --t-jew:#6b4fa3; --t-gf:#b0742a; --t-gf-text:#8a5a1c; --t-lf:#8a5a24; --t-cath:#b23a48; --t-luth:#3f7f5a; --t-ref:#2d5a89;
  --t-ang:#4f8a8b; --t-wes:#a8741c; --t-ev:#5d6f8f; --t-acad:#7c8590;
  --f-display:"Libre Caslon Display","Hoefler Text",Georgia,serif;
  --f-body:"Libre Franklin","Helvetica Neue",Arial,sans-serif;
  --f-heb:"Frank Ruhl Libre","Times New Roman",serif;
  --f-data:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --paper:#10141b; --panel:#161b24; --ink:#e4e8ee; --muted:#9ba5b4; --faint:#8a94a3; --rule:#283040; --control-border:#6f7a8b;
  --lapis:#86aedb; --lapis-soft:#1b2939; --oxblood:#e58e9a; --ox-soft:#3b1f26; --ochre:#dcab4a; --green:#7cc3a0;
  --t-jew:#a68ad8; --t-gf:#dba15a; --t-gf-text:#dba15a; --t-lf:#c69257; --t-cath:#e07482; --t-luth:#78bf93; --t-ref:#86aedb;
  --t-ang:#7cc2c3; --t-wes:#e2b456; --t-ev:#9db0cf; --t-acad:#a2abb6; color-scheme:dark; } }
:root[data-theme="dark"]{
  --paper:#10141b; --panel:#161b24; --ink:#e4e8ee; --muted:#9ba5b4; --faint:#8a94a3; --rule:#283040; --control-border:#6f7a8b;
  --lapis:#86aedb; --lapis-soft:#1b2939; --oxblood:#e58e9a; --ox-soft:#3b1f26; --ochre:#dcab4a; --green:#7cc3a0;
  --t-jew:#a68ad8; --t-gf:#dba15a; --t-gf-text:#dba15a; --t-lf:#c69257; --t-cath:#e07482; --t-luth:#78bf93; --t-ref:#86aedb;
  --t-ang:#7cc2c3; --t-wes:#e2b456; --t-ev:#9db0cf; --t-acad:#a2abb6; color-scheme:dark; }
*{box-sizing:border-box}
html,body{margin:0}
html{font-size:106.25%} @media (min-width:700px){ html{font-size:112.5%} }
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:1rem;line-height:1.65;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
a{color:var(--lapis)}
:focus-visible{outline:2px solid var(--lapis);outline-offset:2px}
.wrap{max-width:var(--wrap,1180px);margin:0 auto}
@media (min-width:1500px){ :root{--wrap:1360px} }
@media (min-width:1900px){ :root{--wrap:1640px} }
.col{max-width:62ch}
h1,h2{font-family:var(--f-display);font-weight:400;line-height:1.12;text-wrap:balance;margin:0}
h2{font-size:clamp(1.9rem,4vw,2.8rem)}
h3{font:600 1.15rem/1.3 var(--f-body);margin:0}
p{margin:0}
.eyebrow{font-family:var(--f-data);font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.stack{display:flex;flex-direction:column;gap:1.1rem}.stack-lg{display:flex;flex-direction:column;gap:2.4rem}
.row{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.muted{color:var(--muted)} .small{font-size:.86rem} .heb{font-family:var(--f-heb)}
/* hero (on "The question" view) */
.hero{display:grid;gap:1.6rem}
.seg button{font:500 .78rem var(--f-data);background:transparent;color:var(--muted);border:0;padding:.42rem .8rem;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.verse{font-family:var(--f-heb);font-size:clamp(1.9rem,5.6vw,3.3rem);direction:rtl;text-align:right;line-height:1.35}
.verse button{font:inherit;color:inherit;background:none;border:0;padding:0 .08em;cursor:pointer;border-bottom:2px dotted var(--faint)}
.verse button:hover,.verse button[aria-expanded="true"]{color:var(--lapis);border-bottom-color:var(--lapis)}
.gloss{font-family:var(--f-display);font-size:clamp(1.35rem,3.2vw,2rem);line-height:1.3}
.gloss em{font-style:normal;color:var(--lapis)}
.wordnote{background:var(--panel);border:1px solid var(--rule);padding:.9rem 1rem;max-width:72ch}
.lede{color:var(--muted);max-width:62ch;font-size:1.08rem}
.figs{display:flex;flex-wrap:wrap;gap:.4rem 2rem;font-family:var(--f-data);font-size:.8rem;color:var(--muted)}
.figs b{font-weight:500;color:var(--ink);font-size:1.15rem;margin-right:.35rem}
.draft{border:1px solid var(--rule);border-left:3px solid var(--ochre);background:var(--panel);padding:.7rem .9rem;font-size:.84rem;color:var(--muted);max-width:72ch}
/* explorer */
.explorer{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem}
.explorer > *{min-width:0}
.panelbox{background:var(--panel);border:1px solid var(--rule)}
.toolbar{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:end;padding:.8rem .9rem;border-bottom:1px solid var(--rule)}
.field{display:grid;gap:.2rem;font:.78rem var(--f-data);text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.field select,.field input{font:400 .9rem var(--f-body);color:var(--ink);background:var(--paper);border:1px solid var(--rule);border-radius:2px;padding:.32rem .45rem;max-width:100%}
.field input{width:13rem}
.seg{display:inline-flex;border:1px solid var(--rule);border-radius:2px;overflow:hidden}
.chiprow{display:flex;flex-wrap:wrap;gap:.3rem;padding:.6rem .9rem;border-bottom:1px solid var(--rule)}
.tchip{font:.78rem var(--f-data);border:1px solid var(--rule);background:var(--paper);color:var(--ink);border-radius:20px;padding:.18rem .55rem .18rem .4rem;cursor:pointer;display:inline-flex;align-items:center;gap:.35rem}
.tchip i{width:.8rem;height:.8rem;display:inline-block;line-height:0}
.tchip i svg{width:100%;height:100%;overflow:visible}
.tchip i path{fill:var(--c);stroke:var(--c);stroke-width:.6}
.tchip[aria-pressed="false"]{opacity:.38}
.eras{display:flex;flex-wrap:wrap;gap:.3rem;padding:.55rem .9rem;border-bottom:1px solid var(--rule)}
.eras button{font:.78rem var(--f-data);background:transparent;border:1px solid var(--rule);color:var(--muted);border-radius:2px;padding:.2rem .5rem;cursor:pointer}
.eras button:hover{color:var(--ink);border-color:var(--ink)}
.tl-scroll{overflow-x:auto;overscroll-behavior-x:contain}
#tl{display:block;min-width:860px;width:100%;touch-action:pan-y}
@media (max-width:699px){ #tl{min-width:0} .hint{font-size:.78rem} }
#tl .lane-lab{font:500 13px var(--f-data);fill:var(--muted)}
#tl .lane-bg{fill:var(--paper)} #tl .lane-bg.alt{fill:var(--panel)}
#tl .axis text{font:13px var(--f-data);fill:var(--muted)} #tl .axis line,#tl .axis path{stroke:var(--rule)}
#tl .era-lab{font:13px var(--f-data);fill:var(--faint);letter-spacing:.06em;text-transform:uppercase}
#tl .era-line{stroke:var(--rule);stroke-dasharray:2 3}
#tl path.dot{cursor:pointer;stroke:var(--panel);stroke-width:1}
#tl path.dot.rep{fill:var(--panel)!important;stroke-width:1.6}
#tl path.dot.dim{opacity:.1}
#tl path.dot.sel{stroke:var(--ink);stroke-width:2.4}
#tl .stream path{opacity:.9}
.hint{font:.78rem var(--f-data);color:var(--faint);padding:.4rem .9rem .7rem}
.legend{display:flex;flex-wrap:wrap;gap:.3rem 1rem;font-size:.78rem;color:var(--muted);padding:.2rem .9rem .8rem}
.legend span{display:inline-flex;align-items:center;gap:.35rem}
.legend .ring{width:.7rem;height:.7rem;border-radius:50%;border:1.6px solid var(--muted)}
.legend .solid{width:.7rem;height:.7rem;border-radius:50%;background:var(--muted)}
/* detail */
.detail{position:fixed;right:max(16px,env(safe-area-inset-right,0px));top:calc(var(--hdr,3rem) + .6rem);width:min(24rem,calc(100vw - 32px));z-index:40;padding:1rem;display:grid;gap:.7rem;
  max-height:calc(100vh - var(--hdr,3rem) - 1.4rem);overflow:auto;box-shadow:0 10px 32px rgba(0,0,0,.22);border-radius:6px}
.detail[hidden]{display:none!important}
.detail .who{font-family:var(--f-display);font-size:1.35rem;line-height:1.2}
.detail blockquote{margin:0;padding-left:.8rem;border-left:2px solid var(--lapis);font-style:italic;color:var(--ink)}
.kv{display:grid;grid-template-columns:7.5rem 1fr;gap:.25rem .6rem;font-size:.86rem}
.kv dt{font:.78rem var(--f-data);color:var(--muted);text-transform:uppercase;letter-spacing:.05em;padding-top:.15rem}
.kv dd{margin:0}
.tag{display:inline-block;font:.78rem var(--f-data);padding:.08rem .42rem;margin:.1rem .25rem .1rem 0;border-radius:2px;background:var(--lapis-soft);color:var(--lapis)}
.tag.ctl{background:var(--ox-soft);color:var(--oxblood)} .tag.rep{background:transparent;border:1px dashed var(--faint);color:var(--muted)}
@media (max-width:900px){ .detail{position:fixed;left:0;right:0;bottom:0;top:auto;max-height:62vh;z-index:40;border-radius:10px 10px 0 0;
  padding:1rem max(16px,env(safe-area-inset-left,0px)) calc(1rem + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-right,0px));box-shadow:0 -6px 24px rgba(0,0,0,.18)}
  width:auto }
.closebtn{justify-self:end;font:.78rem var(--f-data);background:transparent;border:1px solid var(--rule);color:var(--muted);border-radius:2px;padding:.2rem .5rem;cursor:pointer}
/* story */
/* (the tour panel's own rules are in the "tour and paintings" block at the end of this file) */
.btn{font:500 .8rem var(--f-data);border:1px solid var(--ink);background:var(--ink);color:var(--paper);border-radius:2px;padding:.45rem .8rem;cursor:pointer;white-space:nowrap}
.btn.ghost{background:transparent;color:var(--ink)}
/* grids & cards */
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:1.4rem}
.three{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:1rem}
.two > *,.three > *{min-width:0}
.card{background:var(--panel);border:1px solid var(--rule);padding:1rem;display:grid;gap:.5rem;align-content:start}
.card .heb{font-size:1.5rem;direction:rtl;text-align:right;line-height:1.4}
.card .heb mark{background:none;color:var(--lapis);border-bottom:2px solid var(--lapis)}
.ref{font:.78rem var(--f-data);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.tbl{overflow-x:auto} table{border-collapse:collapse;width:100%;font-size:.9rem}
th,td{text-align:left;vertical-align:top;padding:.5rem .6rem;border-bottom:1px solid var(--rule)}
th{font:500 .78rem var(--f-data);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
td.yr{font-family:var(--f-data);font-variant-numeric:tabular-nums;white-space:nowrap}
.answer{background:var(--panel);border:1px solid var(--rule);border-top:3px solid var(--lapis);padding:1.3rem;display:grid;gap:.9rem;max-width:76ch}
.answer .reading{font-family:var(--f-display);font-size:clamp(1.3rem,2.8vw,1.8rem);line-height:1.25}
.conf{display:flex;flex-wrap:wrap;gap:.35rem}
.conf span{font:.78rem var(--f-data);padding:.15rem .5rem;border:1px solid currentColor;border-radius:2px}
.c-high{color:var(--green)} .c-mod{color:var(--ochre)} .c-low{color:var(--oxblood)} .c-none{color:var(--muted)}
.ladder{display:grid;gap:.55rem}
.rung{display:grid;grid-template-columns:minmax(9rem,15rem) minmax(0,1fr);gap:.8rem;align-items:center;font-size:.9rem}
.rung .w{height:.7rem;background:var(--lapis);border-radius:1px}
.rung .lbl b{font-weight:600}
@media (max-width:560px){ .rung{grid-template-columns:1fr} }
.grade{font:.78rem var(--f-data);white-space:nowrap}
.trans{display:grid;gap:0;border-left:2px solid var(--rule);margin-left:.3rem}
.tr{position:relative;padding:.25rem 0 .85rem 1.2rem;display:grid;grid-template-columns:4.2rem minmax(0,1fr);gap:.6rem}
.tr::before{content:"";position:absolute;left:-.4rem;top:.6rem;width:.65rem;height:.65rem;border-radius:50%;background:var(--c,var(--faint))}
.tr .y{font:.8rem var(--f-data);color:var(--muted)}
.tr .n{font-weight:600;font-size:.88rem} .tr .c{font-family:var(--f-display);font-size:1.05rem;line-height:1.35}
.tr .s{font:.78rem var(--f-data);color:var(--faint)}
.gridwrap{overflow-x:auto}
.pgrid{display:grid;grid-template-columns:11rem repeat(7,minmax(6.5rem,1fr));min-width:880px;font-size:.78rem}
.pgrid > div{border-bottom:1px solid var(--rule);padding:.35rem .4rem;min-height:2.4rem}
.pgrid .h{font:.78rem var(--f-data);color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.pgrid .rl{font-weight:600;display:flex;align-items:center;gap:.4rem}
.pgrid .rl i{width:.7rem;height:.7rem;border-radius:50%;background:var(--c)}
.cellbtn{all:unset;display:flex;gap:1px;height:1rem;width:100%;cursor:pointer;align-items:stretch}
.cellbtn i{display:block;height:100%}
.cellbtn:focus-visible{outline:2px solid var(--lapis)}
.cellbtn small{font:.78rem var(--f-data);color:var(--faint);margin-left:.3rem;align-self:center}
.strip{display:grid;gap:.35rem}
.strip .ln{display:grid;grid-template-columns:minmax(9rem,16rem) minmax(0,1fr);gap:.6rem;align-items:center;font-size:.82rem}
.strip svg{display:block;width:100%;height:22px}
@media (max-width:560px){ .strip .ln{grid-template-columns:1fr;gap:.1rem} }
.timeline{display:grid;border-left:2px solid var(--rule);margin-left:.4rem}
.ev{position:relative;padding:.15rem 0 1.25rem 1.3rem}
.ev::before{content:"";position:absolute;left:-.45rem;top:.45rem;width:.75rem;height:.75rem;border-radius:50%;background:var(--paper);border:2px solid var(--lapis)}
.ev.key::before{background:var(--oxblood);border-color:var(--oxblood)}
.ev .yr{font:.78rem var(--f-data);color:var(--muted)} .ev h3{margin:.1rem 0 .25rem}
.ev blockquote{margin:.35rem 0 0;padding-left:.8rem;border-left:2px solid var(--rule);font-style:italic;color:var(--muted)}
details{border-top:1px solid var(--rule);padding-top:.6rem} summary{cursor:pointer;font-weight:600}
.morebtn{font:.8rem var(--f-data);background:var(--panel);border:1px solid var(--rule);color:var(--ink);padding:.45rem .9rem;cursor:pointer;border-radius:2px}
/* text criticism */
.tc-explorer{display:grid;gap:0}
.tc-head{padding:1rem 1rem .4rem;display:grid;gap:.3rem}
.tc-verse{direction:rtl;text-align:right;font-family:var(--f-heb);font-size:clamp(1.5rem,4.2vw,2.3rem);line-height:1.9;padding:.2rem 1rem .1rem}
.tc-verse span{color:var(--faint)}
.tc-verse button{font:inherit;color:var(--ink);background:none;border:0;border-bottom:2px dotted var(--faint);padding:0 .06em;cursor:pointer;border-radius:2px}
.tc-verse button:hover{color:var(--lapis);border-bottom-color:var(--lapis)}
.tc-verse button[aria-pressed="true"]{background:var(--lapis-soft);color:var(--lapis);border-bottom:2px solid var(--lapis)}
.tc-gloss{padding:0 1rem .6rem;font-family:var(--f-display);font-size:1.05rem;color:var(--muted)}
.tc-other{display:flex;flex-wrap:wrap;gap:.35rem;padding:0 1rem .8rem;border-bottom:1px solid var(--rule)}
.tc-other button{font:.78rem var(--f-data);background:transparent;border:1px solid var(--rule);color:var(--muted);border-radius:2px;padding:.25rem .55rem;cursor:pointer}
.tc-other button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.tc-panel{padding:1rem;display:grid;gap:.8rem}
.tc-verdict{display:grid;gap:.35rem;max-width:80ch}
.tc-verdict .t{font-family:var(--f-display);font-size:1.3rem;line-height:1.25}
.tc-panel table{font-size:.86rem}
.tc-panel td.rd{font-size:1rem;line-height:1.45}
.tc-panel td.rd[lang="he"],.tc-panel td.rd[lang="syr"]{font-family:var(--f-heb);font-size:1.2rem;direction:rtl;text-align:left}
.kind{display:inline-block;max-width:100%;font:.78rem var(--f-data);padding:.1rem .45rem;border-radius:2px;border:1px solid currentColor}
.tc-key{display:flex;flex-wrap:wrap;gap:.35rem .5rem;padding:.2rem 1rem 1rem}
.k-base{color:var(--lapis)} .k-agrees,.k-faithful{color:var(--green)} .k-spelling,.k-none{color:var(--muted)}
.k-variant,.k-choice{color:var(--ochre)} .k-interp{color:var(--t-jew)} .k-greek{color:var(--t-gf)} .k-conjecture{color:var(--oxblood)}
.tree{display:grid;gap:1rem}
.tree .root{justify-self:center;text-align:center;background:var(--panel);border:1px solid var(--ink);padding:.6rem 1rem;font-family:var(--f-display);font-size:1.15rem;position:relative}
.tree .branches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;border-top:2px solid var(--rule);padding-top:1rem;position:relative}
.tree .branches::before{content:"";position:absolute;left:50%;top:-1rem;height:1rem;border-left:2px solid var(--rule)}
@media (max-width:820px){ .tree .branches{grid-template-columns:minmax(0,1fr);border-top:0;padding-top:0} .tree .branches::before{display:none} }
.br{background:var(--panel);border:1px solid var(--rule);padding:.8rem;display:grid;gap:.5rem;align-content:start}
.br h4{margin:0;font:600 .95rem var(--f-body)} .br .when{font:.78rem var(--f-data);color:var(--muted)}
.br .sub{font:.78rem var(--f-data);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-top:.3rem;padding-top:.4rem;border-top:1px dashed var(--rule)}
.node{display:grid;grid-template-columns:.8rem minmax(0,1fr);gap:.5rem;align-items:start;font-size:.86rem;transition:opacity .2s}
.node i{width:.7rem;height:.7rem;border-radius:50%;margin-top:.38rem;background:var(--c)}
.node .nm{font-weight:600} .node .rn{color:var(--muted)} .node.ind{margin-left:1rem}
.tree.hl .node:not(.turn){opacity:.28}
.fam-word{--c:var(--lapis)} .fam-turn{--c:var(--t-gf)} .fam-move{--c:var(--green)} .fam-long{--c:var(--t-jew)} .fam-sub{--c:var(--t-cath)} .fam-na{--c:var(--rule)}
table.sbs td{font-size:.86rem} table.sbs td.c{border-left:3px solid var(--c);}
table.sbs td .g{color:var(--muted);font-size:.8rem}
table.sbs.hl tr:not(.turn) td{opacity:.35}
/* argument map */
table.wm{border-collapse:separate;border-spacing:3px;min-width:720px;width:100%;font-size:.82rem}
table.wm th{font:500 .78rem var(--f-data);text-transform:uppercase;letter-spacing:.04em;color:var(--muted);text-align:center;vertical-align:bottom;padding:.3rem .2rem;border:0}
table.wm th.rh{text-align:left}
table.wm td{border:0;padding:0} table.wm td:not(:first-child):not(:last-child){width:8.5%}
table.wm .rbtn{all:unset;cursor:pointer;display:grid;gap:.1rem;padding:.45rem .6rem;background:var(--panel);border:1px solid var(--rule);border-radius:3px;width:100%;box-sizing:border-box}
table.wm .rbtn[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 3px 0 0 var(--ink)}
table.wm .rbtn b{font-weight:600} table.wm .rbtn span{font:.78rem var(--f-data);color:var(--muted)}
table.wm .gc{all:unset;cursor:pointer;display:block;height:2.3rem;width:100%;border-radius:3px;text-align:center;font:500 .78rem/2.3rem var(--f-data);color:#fff}
table.wm .gc:focus-visible,table.wm .rbtn:focus-visible{outline:2px solid var(--lapis);outline-offset:1px}
table.wm .gc.g-strong{background:var(--green)} table.wm .gc.g-adequate{background:var(--lapis)} table.wm .gc.g-strained{background:var(--ochre)} table.wm .gc.g-fails{background:var(--oxblood)} table.wm .gc.g-na{background:var(--rule);color:var(--muted)}
table.wm .gc{color:var(--paper)}
.ov{display:inline-block;font:500 .78rem var(--f-data);padding:.12rem .5rem;border-radius:2px;border:1px solid currentColor;white-space:nowrap}
.ov-strongest,.ov-strong{color:var(--green)} .ov-moderate{color:var(--ochre)} .ov-weaker,.ov-weak{color:var(--oxblood)}
.wnote{padding:.8rem 1rem;font-size:.9rem}
.wcase{padding:1.4rem;display:block} .wcase::after{content:"";display:block;clear:both} .wcase > * + *{margin-top:1.1rem} .wcase > .case-art + *{margin-top:0}
.wcase .th{font-family:var(--f-display);font-size:1.35rem;line-height:1.25}
.defs{font-size:.86rem;color:var(--muted)}
.argl{display:grid;gap:.8rem}
.arg{border:1px solid var(--rule);border-radius:4px;padding:.8rem .9rem;display:grid;gap:.45rem;background:var(--paper)}
.arg .cl{font-weight:600}
.arg blockquote{margin:0;padding-left:.7rem;border-left:2px solid var(--lapis);font-style:italic;font-size:.9rem}
.arg .ct{font:.78rem var(--f-data);color:var(--muted)}
.arg .obj,.arg .rep{font-size:.88rem;padding:.45rem .6rem;border-radius:3px}
.arg .obj{background:var(--ox-soft)} .arg .rep{background:var(--lapis-soft)}
.arg .obj b,.arg .rep b{font:500 .78rem var(--f-data);text-transform:uppercase;letter-spacing:.05em;margin-right:.4rem}
.crit-chip{font:.78rem var(--f-data);border:1px solid var(--rule);border-radius:2px;padding:.05rem .35rem;color:var(--muted);margin-right:.2rem}
/* paintings (placeholders until the images arrive; see art/PROMPTS.md) */
figure.art{margin:0;display:grid;gap:.5rem}
.art-box{position:relative;overflow:hidden;border-radius:4px;background:var(--panel);aspect-ratio:var(--ar,4/5)}
.art-box img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
figure.art figcaption{font-size:.85rem;color:var(--muted);line-height:1.45}
figure.art figcaption i{font-style:italic}
.art-band{margin-block:1rem}
.art-band .art-box{aspect-ratio:auto;height:clamp(220px,34vw,460px)}
.hero-art{position:relative;border-radius:6px;overflow:hidden;aspect-ratio:16/9;max-height:78vh;min-height:420px}
.hero-art .art-fill{position:absolute;inset:0}
.hero-art .art-fill .art-box{position:absolute;inset:0;aspect-ratio:auto;border-radius:0}
.hero-over{position:absolute;left:0;right:0;bottom:0;padding:4rem clamp(1rem,4vw,2.5rem) clamp(1rem,3vw,2rem);display:grid;gap:.8rem;
  background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--paper) 88%,transparent) 45%,var(--paper))}
@media (max-width:699px){ .hero-art{aspect-ratio:4/5;min-height:0} }
.clause{display:grid;grid-template-columns:minmax(0,24rem) minmax(0,1fr);gap:1.8rem;align-items:center}
.clause.rev{grid-template-columns:minmax(0,1fr) minmax(0,24rem)} .clause.rev figure{order:2}
@media (max-width:640px){ .clause,.clause.rev{grid-template-columns:minmax(0,1fr)} .clause.rev figure{order:0} .clause figure{max-width:none} }
.answer{max-width:none}
.answer .clause-text{max-width:60ch}
.split{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:2.4rem;align-items:start}
.split-art{position:sticky;top:calc(var(--hdr,3rem) + 1rem)}
@media (max-width:820px){ .split{grid-template-columns:minmax(0,1fr)} .split-art{position:static;max-width:26rem} }
.art-card .art-box{aspect-ratio:4/3}
.case-art{float:right;width:min(44%,24rem);margin:0 0 1rem 1.6rem}
@media (max-width:640px){ .case-art{float:none;width:100%;max-width:20rem;margin:0 0 1rem} }
footer{padding-block:2.5rem 3rem;border-top:1px solid var(--rule);font-size:.84rem;color:var(--muted)}

/* ================= navigation: tabs that switch views (js/core.js) ================= */
.site-top{padding-block:1rem .8rem;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:.3rem 1.5rem}
.site-name{font-family:var(--f-display);font-size:clamp(1.45rem,2.2vw,2.05rem);line-height:1.1;color:var(--ink);text-decoration:none}
.site-name:hover{color:var(--lapis)}
.tabs{position:sticky;top:0;z-index:50;background:var(--panel);border-bottom:1px solid var(--rule);
  margin-inline:calc(-1*max(16px,env(safe-area-inset-left,0px)));padding-inline:max(16px,env(safe-area-inset-left,0px))}
.tabs-in{max-width:var(--wrap,1180px);margin:0 auto;display:flex;align-items:stretch;gap:.4rem}
.tablist{list-style:none;margin:0;padding:.45rem 0 0;display:flex;flex:1;gap:3px;min-width:0}
.tablist li{flex:1 1 0;min-width:0;display:flex}
.tablist a{flex:1;min-width:0;display:grid;align-content:center;gap:.15rem;text-align:center;text-decoration:none;color:var(--muted);
  padding:.5rem .35rem .55rem;border:1px solid transparent;border-bottom:0;border-radius:6px 6px 0 0;margin-bottom:-1px;min-height:50px;overflow-wrap:break-word}
.tablist a b{font:500 .9rem/1.2 var(--f-body)}
.tablist a span{display:none;font-size:.74rem;line-height:1.3;color:var(--faint)}
.tablist a:hover{color:var(--ink);background:color-mix(in srgb,var(--paper) 70%,transparent)}
.tablist a[aria-current="page"]{background:var(--paper);color:var(--ink);border-color:var(--rule);box-shadow:inset 0 3px 0 var(--lapis)}
.tablist a[aria-current="page"] b{font-weight:600}
.tablist a[aria-current="page"] span{color:var(--muted)}
.tablist a:focus-visible{outline-offset:-3px}
@media (max-width:1099px){ .tablist a b{font-size:.8rem} .tablist a{padding-inline:.2rem} }
@media (min-width:1500px){ .tablist a span{display:block} .tablist a{min-height:66px;padding-inline:.6rem} }
.mark,.mobilebar{display:none}
@media (max-width:759px){
  .site-top,.tablist{display:none}
  .tabs-in{justify-content:space-between;align-items:center;padding-block:.4rem;gap:.6rem}
  .mark{display:block;font-family:var(--f-display);font-size:1.1rem;color:var(--ink);text-decoration:none;white-space:nowrap}
  .mobilebar{display:flex;align-items:center;gap:.6rem;min-width:0}
  .mobilebar .cur{font-weight:600;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
}
.iconbtn{font:500 .9rem var(--f-body);background:var(--panel);color:var(--ink);border:1px solid var(--rule);border-radius:3px;padding:.45rem .8rem;cursor:pointer;min-height:44px;display:inline-flex;gap:.5rem;align-items:center;white-space:nowrap}
.iconbtn svg{width:18px;height:18px}
/* phone "Sections" list */
.sheet{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;background:var(--paper);overflow:auto;
  padding:env(safe-area-inset-top,0px) max(16px,env(safe-area-inset-right,0px)) calc(2rem + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.sheet[hidden]{display:none}
.sheet-top{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;border-bottom:1px solid var(--rule);position:sticky;top:0;background:var(--paper)}
.sheet-top b{font-family:var(--f-display);font-weight:400;font-size:1.3rem}
.sheet ol{list-style:none;margin:0;padding:0}
.sheet li a{display:grid;gap:.1rem;padding:.75rem .2rem;border-bottom:1px solid var(--rule);text-decoration:none;color:var(--ink);min-height:44px}
.sheet li a b{font-weight:600;font-size:1.05rem}
.sheet li a span{font-size:.86rem;color:var(--muted)}
.sheet li a[aria-current]{box-shadow:inset 4px 0 0 var(--lapis);padding-left:.8rem}
/* views */
main{padding-block:clamp(1.6rem,3vw,2.8rem) 0}
.js .view:not(.on){display:none}
.view{display:flex;flex-direction:column;gap:2.4rem;min-width:0}
.view > *{min-width:0}
.view h2:focus,.st-panel:focus{outline:none}
.view-head{display:flex;flex-direction:column;gap:1.1rem;max-width:62ch}
.h3d{font-family:var(--f-display);font-weight:400;font-size:clamp(1.6rem,3.2vw,2.3rem);line-height:1.15;text-wrap:balance}
/* sub-tabs inside a view */
.subtabs{display:flex;flex-direction:column;gap:1.8rem;min-width:0}
.st-bar{display:flex;flex-wrap:wrap;gap:.4rem;border-bottom:1px solid var(--rule);padding-bottom:.7rem}
.st-bar a{font:500 .9rem/1.25 var(--f-body);text-decoration:none;background:var(--panel);color:var(--ink);border:1px solid var(--rule);border-radius:22px;padding:.55rem 1.05rem;min-height:44px;display:inline-flex;align-items:center}
.st-bar a:hover{border-color:var(--ink)}
.st-bar a[aria-selected="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink);font-weight:600}
.js .st-panel:not(.on){display:none}
.st-panel{display:flex;flex-direction:column;gap:2.4rem;min-width:0}
.st-panel > *{min-width:0}
/* previous / next at the end of each view */
.pager{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-top:1px solid var(--rule);padding-top:1.4rem;margin-top:1rem}
.pager a{display:grid;gap:.1rem;text-decoration:none;color:var(--ink);padding:.6rem .9rem;border:1px solid var(--rule);border-radius:4px;background:var(--panel);flex:0 1 13rem;min-width:9rem;min-height:44px}
.pager a:hover{border-color:var(--ink)}
.pager a span{font:.78rem var(--f-data);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.pager a.next{margin-left:auto;text-align:right}
footer{margin-top:3rem}
/* "The question": where to go next */
.stakes{display:grid;gap:.7rem;margin:0;padding-left:1.2rem;max-width:68ch}
/* "For scholars" expanders (replace the old Reader/Scholar switch) */
details.sch-x{border:1px solid var(--rule);border-left:3px solid var(--lapis);border-radius:3px;background:var(--panel);max-width:72ch;padding:0}
details.sch-x > summary{cursor:pointer;list-style:none;padding:.6rem .9rem;min-height:44px;display:flex;gap:.6rem;align-items:center;font-size:.9rem;font-weight:500}
details.sch-x > summary::-webkit-details-marker{display:none}
details.sch-x > summary::before{content:"+";font:500 1.1rem/1 var(--f-data);color:var(--lapis);width:1rem;flex:none}
details.sch-x[open] > summary::before{content:"–"}
details.sch-x > summary .stag{font:500 .78rem var(--f-data);letter-spacing:.06em;text-transform:uppercase;color:var(--lapis);border:1px solid var(--lapis);border-radius:2px;padding:.05rem .4rem;white-space:nowrap;flex:none}
details.sch-x > .sch-body{padding:0 .9rem .9rem 2.5rem;font-size:.9rem;color:var(--muted);display:grid;gap:.6rem}
@media (max-width:560px){ details.sch-x > .sch-body{padding-left:.9rem} }
.detail details.sch-x{max-width:none}
.tc-panel .sch-col{display:none} .tc-panel.cols .sch-col{display:table-cell}
@media (prefers-reduced-motion: reduce){ *{transition:none!important;animation:none!important;scroll-behavior:auto!important} }
/* print: every view and sub-tab, without the navigation */
@media print{
  .tabs,.pager,.st-bar,.sheet,.site-top .eyebrow{display:none!important}
  .js .view:not(.on),.js .st-panel:not(.on){display:flex!important}
  .view{break-before:page}
}

/* ================= tour and paintings (F4, F5, F16, F19) =================
   Paintings: one list in js/art.js. Finished paintings open full size (.lb); missing ones get a soft framed
   "Painting to come" card in the same shape, never larger than a finished painting would be.
   Guided tour: a fixed-size panel. Its text scrolls inside it, Back and Next sit in a fixed row at its foot, and the
   chart above keeps one height for both clauses, so the buttons never move between stops.
   Large screens (1280px and up): the tour panel stands to the left of the chart, with a large painting. */

/* --- frames for missing paintings --- */
.art-box.is-missing{background:none;overflow:visible}
.art-ph{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:clamp(.5rem,5%,2rem);border-radius:4px;color:var(--muted);
  container-type:size;overflow:hidden;
  background:radial-gradient(ellipse at 50% 42%,color-mix(in srgb,var(--ochre) 7%,var(--panel)) 0%,color-mix(in srgb,var(--ochre) 13%,var(--paper)) 100%);
  border:1px solid color-mix(in srgb,var(--ochre) 28%,var(--rule))}
.art-ph::before{content:"";position:absolute;inset:clamp(5px,2.6%,14px);border:1px solid color-mix(in srgb,var(--ochre) 34%,transparent);border-radius:2px;pointer-events:none}
.ph-in{position:relative;display:grid;gap:.35rem;justify-items:center;max-width:34ch}
.ph-eb{font:500 .78rem var(--f-data);letter-spacing:.11em;text-transform:uppercase;color:var(--ochre)}
.art-ph b{font-family:var(--f-display);font-weight:400;font-size:clamp(1.05rem,7cqi,2.4rem);color:var(--ink);line-height:1.15;text-wrap:balance}
.ph-r{font-size:.88rem;line-height:1.4;text-wrap:balance}
.ph-m{font-size:.82rem;color:var(--faint)}
.ph-no{font:.78rem var(--f-data);color:var(--faint);letter-spacing:.06em;margin-top:.15rem}
@container (max-height:230px){ .ph-m,.ph-no{display:none} }
@container (max-height:150px){ .ph-r{display:none} }
@container (max-width:200px){ .ph-in > :not(.ph-no){display:none} .ph-no{display:block} }

/* --- finished paintings open full size --- */
.art-open{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;margin:0;border:0;background:none;color:inherit;cursor:zoom-in}
.art-open:focus-visible{outline:3px solid var(--lapis);outline-offset:-3px}
.art-zoom{position:absolute;right:.55rem;bottom:.55rem;display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .5rem;border-radius:999px;
  background:rgba(14,17,23,.66);color:#fff;font:500 .78rem/1 var(--f-data);pointer-events:none}
.art-zoom span{display:none}
.art-open:hover .art-zoom span,.art-open:focus-visible .art-zoom span{display:inline}
.hero-art .art-zoom{top:.7rem;bottom:auto;right:.7rem}
.art-box[data-fit="contain"] img{object-fit:contain;background:color-mix(in srgb,var(--ink) 8%,var(--paper))}

/* --- full-size viewer (lightbox) --- */
.lb{border:0;padding:0;margin:0;inset:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;background:rgba(9,11,15,.96);color:#eef1f5;overflow:hidden}
.lb[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.lb::backdrop{background:rgba(9,11,15,.7)}
html.lb-on{overflow:hidden}
.lb-top{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.7rem max(16px,2vw) .5rem}
.lb-count{font:.82rem var(--f-data);color:#c3cad5}
.lb-btn{font:500 .85rem var(--f-data);background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55);border-radius:3px;padding:.5rem .95rem;min-height:44px;cursor:pointer}
.lb-btn:hover{background:rgba(255,255,255,.12)}
.lb-stage{position:relative;min-height:0;padding:0 max(16px,5rem);touch-action:pan-y}
.lb-stage img{display:block;width:100%;height:100%;object-fit:contain}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:3.4rem;height:3.4rem;border-radius:50%;border:1px solid rgba(255,255,255,.45);background:rgba(20,24,31,.72);color:#fff;font:400 2rem/1 var(--f-body);cursor:pointer;display:grid;place-items:center;padding:0 0 .2rem}
.lb-nav:hover{background:rgba(60,68,82,.9)}
.lb-nav.prev{left:max(8px,.8rem)} .lb-nav.next{right:max(8px,.8rem)}
.lb-cap{padding:.7rem max(16px,4vw) 1.1rem;text-align:center;max-width:72ch;margin:0 auto;display:grid;gap:.2rem}
.lb-t{font-family:var(--f-display);font-weight:400;font-size:1.35rem;color:#fff}
.lb-c{font-size:.9rem;color:#c3cad5;line-height:1.5}
.lb :focus-visible{outline:2px solid #9cc2ee;outline-offset:2px}
@media (max-width:699px){ .lb-stage{padding:0} .lb-nav{top:auto;bottom:.5rem;transform:none;width:3rem;height:3rem} .lb-cap{padding-bottom:calc(1rem + env(safe-area-inset-bottom,0px))} }
/* portrait tablets: the painting takes the full width (side arrows would shrink it below the gallery's own view) */
@media (min-width:700px) and (max-width:1100px) and (orientation:portrait){ .lb-stage{padding:0} .lb-nav{top:auto;bottom:.5rem;transform:none} }

/* --- the guided tour panel --- */
.story{display:flex;flex-direction:column;background:var(--lapis-soft);border-bottom:1px solid var(--rule);min-width:0}
.st-art .art-box{border-radius:0}
.st-body{display:flex;flex-direction:column;gap:.55rem;padding:.9rem 1rem 1rem;min-height:0;min-width:0}
/* the counter and "Explore freely" on one line, the clause note on a second: always two lines, so the panel's
   inner layout never changes between stops */
.st-top{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:2.25rem 1.6rem;align-items:center;column-gap:.8rem}
.st-top .st-clause{grid-column:1 / -1;grid-row:2;justify-self:start}
.st-top .st-exit{grid-column:2;grid-row:1}
.story .num{font:500 .82rem var(--f-data);color:var(--lapis);white-space:nowrap}
.st-clause{font:.78rem var(--f-data);color:var(--muted);border:1px solid var(--rule);background:var(--panel);border-radius:20px;padding:.1rem .55rem;white-space:nowrap}
.st-clause.flip{color:var(--oxblood);border-color:currentColor}
.st-exit{margin-left:auto;font:500 .8rem var(--f-data);background:transparent;border:0;color:var(--lapis);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:.5rem 0;min-height:36px}
.st-exit[hidden]{display:none}
.st-text{min-height:0;overflow:auto;overscroll-behavior:contain;padding-right:.3rem}
.st-text:focus-visible{outline-offset:0}
.story h3{font-family:var(--f-display);font-weight:400;font-size:1.4rem;line-height:1.2}
.story p{font-size:.95rem;margin-top:.35rem;max-width:70ch;line-height:1.55}
.story .ctrls{display:flex;justify-content:flex-end;gap:.5rem;flex:none}
.story .ctrls .btn{min-height:44px;min-width:8.5rem;text-align:center;font-size:.85rem}
.story .ctrls .btn[hidden]{display:none}
.story .btn:disabled{opacity:.4;cursor:default}
/* phones: the tour sits just below the chart it talks about: a small strip of the painting, then the text at full
   width in a fixed-height box, then the buttons (the chart, the text and the buttons fit on one screen) */
@media (max-width:699px){
  .tl-box{display:flex;flex-direction:column}
  .tl-box > .st-slot{order:1}
  .tl-box > .tl-key,.tl-box > .hint{order:2}
  .st-art .art-box{aspect-ratio:auto;height:5rem}
  .st-body{padding-top:.6rem}
  .st-text{height:10rem;flex:none}
  .story .ctrls .btn{flex:1 1 0;min-width:0}
}
/* tablets and small laptops: painting at left, text at right, in a panel of fixed height (the painting fills its
   column and is cropped a little at the sides on narrower screens) */
@media (min-width:700px) and (max-width:1279px){
  .story{display:grid;grid-template-columns:minmax(15rem,46%) minmax(0,1fr);height:19rem}
  .st-art,.st-art .art-box{height:100%;min-height:0}
  .st-art .art-box{aspect-ratio:auto}
  .st-body{min-height:0;padding:1rem 1.1rem}
  .st-text{flex:1}
}
/* large screens: the tour stands to the left of the chart, the full height of the chart's box */
@media (min-width:1280px){
  .tl-box{display:grid;grid-template-columns:clamp(20rem,31%,34rem) minmax(0,1fr)}
  .tl-box > *{grid-column:2;min-width:0}
  /* the tour's slot (the tour panel, or a selected work's details over it) spans every row of the box */
  .tl-box > .st-slot{grid-column:1;grid-row:1 / span 12;contain:size;border-right:1px solid var(--rule)}
  .tl-box > .st-slot > .story{height:100%;border-bottom:0}
  .tl-box .story .st-body{flex:1;padding:1.1rem 1.25rem 1.2rem}
  .tl-box .story .st-text{flex:1}
}
.story .st-text.more{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 2.2rem),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 2.2rem),transparent)}

/* --- larger paintings elsewhere --- */
/* conclusion: the painting takes three fifths of the row on wide screens, the full width on narrow ones */
@media (min-width:900px){
  .clause{grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:2.6rem}
  .clause.rev{grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
}
@media (max-width:899px){ .clause,.clause.rev{grid-template-columns:minmax(0,1fr)} .clause.rev figure{order:0} }
/* "control" story and Bibles: the painting column widens on large screens and stays in view while the text scrolls */
@media (min-width:1280px){ .split{grid-template-columns:minmax(0,34rem) minmax(0,1fr);gap:3rem} }
/* full-width bands: wider and taller on large screens; a missing painting gets a modest card, not an empty band */
.art-band .art-box{height:clamp(200px,38vw,640px)}
.art-band.art-missing{max-width:34rem}
.art-band.art-missing .art-box{height:auto;aspect-ratio:16/9}
.split-art.art-missing{max-width:34rem}
@media (max-width:820px){ .split-art.art-missing{max-width:26rem} }
/* a reading's case (Readings tested): a larger painting beside the case on large screens */
@media (min-width:1280px){ .case-art{width:min(46%,42rem)} .case-art.art-missing{width:min(40%,30rem)} }

/* --- gallery viewer --- */
.gv{display:grid;gap:1.1rem;min-width:0}
.gv-stage{position:relative;width:100%;aspect-ratio:16/9;max-height:calc(100vh - var(--hdr,3rem) - 12rem);min-height:11rem;display:grid;place-items:center;
  background:color-mix(in srgb,var(--ink) 6%,var(--paper));border:1px solid var(--rule);border-radius:6px;overflow:hidden;touch-action:pan-y}
.gv-frame{height:100%;aspect-ratio:var(--ar,16/9);max-width:100%;min-width:0}
.gv-frame .art-box{height:100%;aspect-ratio:auto;border-radius:2px}
.gv-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:3.4rem;height:3.4rem;border-radius:50%;border:1px solid var(--rule);
  background:color-mix(in srgb,var(--panel) 90%,transparent);color:var(--ink);font:400 2.1rem/1 var(--f-body);cursor:pointer;display:grid;place-items:center;padding:0 0 .25rem;box-shadow:0 2px 12px rgba(0,0,0,.2)}
.gv-nav:hover{border-color:var(--ink)}
.gv-nav.prev{left:.9rem} .gv-nav.next{right:.9rem}
.gv-meta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.6rem 1.4rem;align-items:start;min-height:5.6rem}
.gv-count{position:absolute;left:.8rem;top:.8rem;z-index:2;font:500 .82rem var(--f-data);white-space:nowrap;padding:.3rem .65rem;border-radius:999px;background:rgba(14,17,23,.66);color:#fff;pointer-events:none}
.gv-text h3{font-family:var(--f-display);font-weight:400;font-size:1.65rem;line-height:1.2}
.gv-text p{font-size:.92rem;color:var(--muted);margin-top:.25rem;line-height:1.5}
.gv-meta .btn{min-height:44px}
.gv-thumbs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(7rem,1fr));gap:.6rem}
.gv-thumbs button{display:grid;gap:.3rem;width:100%;padding:3px;border:2px solid transparent;border-radius:5px;background:none;color:var(--muted);cursor:pointer;text-align:left;font:inherit}
.gv-thumbs button:hover{border-color:var(--rule)}
.gv-thumbs button[aria-current="true"]{border-color:var(--lapis);color:var(--ink)}
.gv-thumbs .art-box{aspect-ratio:16/9}
.gv-thumbs .art-box img{object-fit:cover}
.gv-tl{font-size:.8rem;line-height:1.25;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;min-height:2.5em}
@media (max-width:699px){
  .gv-nav{width:2.9rem;height:2.9rem;font-size:1.8rem} .gv-nav.prev{left:.4rem} .gv-nav.next{right:.4rem}
  .gv-meta{grid-template-columns:minmax(0,1fr)} .gv-meta .btn{justify-self:start}
  .gv-thumbs{grid-template-columns:repeat(auto-fill,minmax(5.4rem,1fr))}
}
/* large screens: the caption and the small paintings stand beside the painting, so all of it fits on one screen */
@media (min-width:1500px){
  .gv{grid-template-columns:minmax(0,1fr) 21rem;grid-template-rows:auto 1fr;gap:1.1rem 1.6rem;align-items:start}
  .gv-stage{grid-row:1 / span 2;max-height:calc(100vh - var(--hdr,3rem) - 14rem)}
  .gv-meta{grid-template-columns:minmax(0,1fr);min-height:0} .gv-meta .btn{justify-self:start}
  .gv-thumbs{grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem}
}
@media print{ .gv-nav,.gv-thumbs,.art-zoom{display:none!important} }

/* ================= Weigh the evidence (view 7; js/weigh.js) · F6 "How sure are we?", F8 lines of evidence, F9 "Your weighing" ================= */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wt-leadline{font-size:1.08rem;line-height:1.55;max-width:62ch}
/* F6: confidence levels in words and colour, with a three-pip meter (High 3 filled, Moderate 2, Undecided/Not settled 0) */
.sure{display:grid;gap:.9rem;border-top:1px solid var(--rule);padding-top:1.1rem}
.sure h3{font-family:var(--f-display);font-weight:400;font-size:1.5rem}
.lvl{display:inline-flex;align-items:center;gap:.45rem;font:600 .82rem/1.2 var(--f-body);white-space:nowrap}
.pips{display:inline-flex;gap:2px;font-style:normal}
.pips b{width:.62rem;height:.62rem;border-radius:1px;border:1.5px solid currentColor;background:transparent}
.lv-high{color:var(--green)} .lv-high .pips b{background:currentColor}
.lv-mod{color:var(--ochre)} .lv-mod .pips b:nth-child(-n+2){background:currentColor}
.lv-und,.lv-ns{color:var(--muted)} .lv-ns .pips b{border-style:dashed}
.sure-key{display:flex;flex-wrap:wrap;gap:.35rem 1.4rem;font-size:.86rem;color:var(--muted);margin:0}
.sure-key .sk-lab{font:500 .8rem var(--f-data);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.sure-key .sk{display:inline-flex;gap:.45rem;align-items:baseline;flex-wrap:wrap}
.sure-list{list-style:none;margin:0;padding:0;display:grid;gap:0;grid-template-columns:minmax(0,1fr)}
.sure-list li{display:grid;grid-template-columns:minmax(9.5rem,auto) minmax(0,1fr);gap:.4rem 1rem;align-items:baseline;padding:.6rem 0;border-bottom:1px solid var(--rule)}
.sure-list li .lvl{white-space:normal}
.sure-list .st{font-size:1rem;line-height:1.45}
@media (min-width:1100px){ .sure-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2.4rem} }
@media (max-width:480px){ .sure-list li{grid-template-columns:minmax(0,1fr);gap:.2rem} }
/* F8: the eight lines of evidence */
.ev-lines{list-style:none;margin:0;padding:0;display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,30rem),1fr))}
.evl{display:grid;grid-template-columns:4.2rem minmax(0,1fr);gap:1rem;background:var(--panel);border:1px solid var(--rule);border-radius:4px;padding:1rem}
.evl-w{display:grid;align-content:start;justify-items:center;gap:.1rem;border-right:1px solid var(--rule);padding-right:.8rem}
.evl-n{font:500 2.2rem/1 var(--f-data);color:var(--ink)}
.evl-word{font:500 .8rem var(--f-data);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.evl-body{display:grid;grid-template-columns:minmax(0,1fr);gap:.45rem;align-content:start}
.evl-body h4{margin:0;font:600 1.05rem/1.3 var(--f-body)}
.evl-body p{font-size:.92rem;line-height:1.5}
.evl-k{display:inline-block;min-width:3.6rem;font:500 .8rem var(--f-data);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.evl-bar{display:flex;gap:3px;max-width:16rem}
.evl-bar i{flex:1;height:.55rem;border-radius:1px;background:var(--rule)} .evl-bar i.on{background:var(--lapis)}
.ev-steps{margin:0;padding-left:1.4rem;display:grid;gap:.45rem;max-width:72ch}
.follow-tbl caption,.alt-tbl caption{text-align:left;font:600 1rem var(--f-body);padding:0 0 .5rem}
.follow-tbl th[scope="row"]{font:500 .92rem var(--f-body);text-transform:none;letter-spacing:0;color:var(--ink)}
.follow-tbl .hw{display:block;font-size:.8rem;color:var(--lapis);text-transform:none;letter-spacing:0}
.gw{display:inline-block;font:500 .8rem var(--f-data);padding:.1rem .45rem;border-radius:2px;border:1px solid currentColor;white-space:nowrap}
.gw.g-strong{color:var(--green)} .gw.g-adequate{color:var(--lapis)} .gw.g-strained{color:var(--ochre)} .gw.g-fails{color:var(--oxblood)}
.follow-tbl .grade,.alt-tbl .grade{font:600 .88rem/1.35 var(--f-body);white-space:normal;min-width:8rem}
.follow-tbl thead th{font:600 .84rem/1.3 var(--f-body);text-transform:none;letter-spacing:0;color:var(--ink);vertical-align:bottom}
.follow-tbl td,.follow-tbl th{vertical-align:middle}
#ev-follows{grid-template-columns:repeat(auto-fit,minmax(min(100%,38rem),1fr));gap:2rem}
.evl-body p{display:grid;grid-template-columns:4rem minmax(0,1fr);gap:.6rem;align-items:baseline}
.evl-k{min-width:0}
/* F9: "Your weighing" */
.wt-tool{display:grid;gap:1.4rem 2rem;grid-template-columns:minmax(0,1fr);grid-template-areas:"in" "rk" "sl"}
.wt-intro{grid-area:in;display:grid;grid-template-columns:minmax(0,1fr);gap:.8rem;align-content:start}
.wt-rank{grid-area:rk} .wt-sl{grid-area:sl;min-width:0}
.wt-rule{font-size:.92rem}
.wt-caveat{border-left:3px solid var(--rule);padding:.2rem 0 .2rem 1rem;display:grid;gap:.4rem;font-size:.92rem;color:var(--muted);max-width:70ch}
@media (min-width:760px){
  .wt-tool{grid-template-columns:minmax(0,1fr) minmax(18rem,23rem);grid-template-areas:"in rk" "sl rk";grid-template-rows:auto 1fr}
  .wt-rank{position:sticky;top:calc(var(--hdr,3rem) + .8rem);align-self:start;max-height:calc(100vh - var(--hdr,3rem) - 1.6rem);overflow:auto}
  .wt-pin{display:none!important}
}
@media (min-width:1100px){ .wt-tool{grid-template-columns:minmax(0,1fr) minmax(24rem,28rem)} }
@media (min-width:1500px){ .wt-tool{grid-template-columns:minmax(0,1fr) 31rem} }
@media (min-width:1900px){ .wt-tool{grid-template-columns:minmax(0,1fr) 36rem} .wt-tool .wt-sliders{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1500px){ .wt-tool .wt-intro{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:2rem} .wt-intro h3,.wt-intro .wt-leadline{grid-column:1/-1} .wt-intro .wt-caveat{align-self:start} }
.wt-rank{background:var(--panel);border:1px solid var(--rule);border-radius:6px;padding:1rem;display:grid;grid-template-columns:minmax(0,1fr);gap:.8rem;align-content:start}
.wt-rank > *,.wr-list > li{min-width:0}
#your-weighing [hidden]{display:none!important}
.wt-rank h4{margin:0;font:600 1rem/1.3 var(--f-body)}
.wt-seg{display:flex;border:1px solid var(--ink);border-radius:4px;overflow:hidden}
.wt-seg button{flex:1;font:500 .92rem var(--f-body);background:transparent;color:var(--ink);border:0;padding:.5rem .6rem;min-height:44px;cursor:pointer}
.wt-seg button + button{border-left:1px solid var(--ink)}
.wt-seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper);font-weight:600}
.wt-state{display:flex;flex-wrap:wrap;gap:.5rem .8rem;align-items:center;justify-content:space-between}
.wt-status{font-size:.88rem;display:inline-flex;align-items:center;gap:.45rem}
.wt-status .dot{width:.6rem;height:.6rem;border-radius:50%;border:2px solid var(--muted)} .wt-status .dot.yours{background:var(--ink);border-color:var(--ink)}
.wt-reset{min-height:44px}
.wt-zero{font-weight:600}
.wr-list{list-style:none;margin:0;padding:0;display:grid;gap:.25rem}
.wr{display:grid;grid-template-columns:3rem minmax(0,1fr);gap:.6rem;padding:.5rem 0;border-bottom:1px solid var(--rule);position:relative;background:var(--panel)}
.wr:last-child{border-bottom:0}
.wr-rank{display:grid;align-content:start;justify-items:center;font:500 1.15rem/1.2 var(--f-data);color:var(--ink);padding-top:.1rem}
.wr-lv{display:none;font:500 .8rem var(--f-data);color:var(--muted)}
.wr.lvg.lv-first .wr-lv{display:block}
.wr.lvg .wr-rank{border-left:3px solid var(--muted);margin-left:.2rem;padding-left:.3rem}
.wr.lvg:not(.lv-last){border-bottom-style:dashed}
.wr-main{display:grid;grid-template-columns:minmax(0,1fr);gap:.3rem;min-width:0}
.wr-name{font-weight:600;line-height:1.3}
.wr-tag{display:inline-block;max-width:100%;white-space:normal;font:500 .8rem var(--f-data);color:var(--muted);border:1px solid var(--rule);border-radius:2px;padding:0 .35rem;margin-left:.35rem;font-weight:400;vertical-align:.1em}
.wr-tag[hidden]{display:none}
.wr-bar{display:grid;grid-template-columns:minmax(0,1fr) 3.2rem;gap:.6rem;align-items:center}
.wr-track{height:.8rem;background:color-mix(in srgb,var(--rule) 70%,transparent);border-radius:2px;overflow:hidden;display:block}
.wr-track i{display:block;height:100%;background:var(--lapis);transition:width .25s ease}
.wr-pct{font:500 .95rem var(--f-data);text-align:right;font-variant-numeric:tabular-nums}
.wr-meta{font-size:.84rem;color:var(--muted);display:flex;flex-wrap:wrap;align-items:center;gap:0 .8rem} .wr-meta b{font-weight:600;color:var(--ink)}
.wr-move{font:500 .82rem var(--f-data);margin-left:.4rem;color:var(--ink);white-space:nowrap}
.wr-b{font-size:.84rem;color:var(--muted);border-left:2px solid var(--rule);padding-left:.6rem}
details.wr-why{border:0;padding:0;margin-left:auto}
details.wr-why[open]{flex-basis:100%;margin-left:0}
details.wr-why > summary{font:500 .84rem var(--f-body);color:var(--lapis);min-height:32px;display:flex;align-items:center}
details.wr-why ul{list-style:none;margin:.3rem 0;padding:0;display:grid;gap:.15rem;font-size:.84rem}
details.wr-why li{display:grid;grid-template-columns:minmax(0,1fr) auto 3.4rem;gap:.5rem;align-items:center}
.wr-x{font:500 .8rem var(--f-data);color:var(--muted);text-align:right;white-space:nowrap}
.wt-notes{display:grid;gap:.6rem}
.wt-differs{font-size:.9rem;background:var(--lapis-soft);color:var(--ink);padding:.6rem .8rem;border-radius:3px}
.wt-clusternote{font-size:.88rem}
.wt-slh{margin:0 0 .6rem;font:600 1rem/1.3 var(--f-body)}
.wt-sliders{display:grid;gap:.8rem 1.6rem;grid-template-columns:minmax(0,1fr)}
.wsl{display:grid;grid-template-columns:minmax(0,1fr);gap:.25rem;padding:.7rem .9rem .8rem;background:var(--panel);border:1px solid var(--rule);border-radius:4px}
.wsl.changed{border-color:var(--ink);box-shadow:inset 3px 0 0 var(--ink)}
.wsl-top{display:flex;justify-content:space-between;align-items:baseline;gap:.4rem 1rem;flex-wrap:wrap}
.wsl-top label{font-weight:600;line-height:1.3}
.wsl-top output{font-size:.9rem;color:var(--ink);white-space:nowrap} .wsl-top output b{font:500 1.05rem var(--f-data);margin-right:.3rem}
.wsl-ctl{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:.6rem;align-items:start}
.wsl-btn{width:44px;height:44px;font:500 1.3rem/1 var(--f-data);background:var(--paper);color:var(--ink);border:1px solid var(--muted);border-radius:4px;cursor:pointer}
.wsl-btn:hover:not(:disabled){border-color:var(--ink)}
.wsl-btn:disabled{opacity:.35;cursor:default}
.wsl-track{position:relative;--th:28px}
.wsl input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:44px;margin:0;background:transparent;cursor:pointer;display:block}
.wsl input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(to right,var(--lapis) calc(var(--p,0)*100%),var(--faint) calc(var(--p,0)*100%))}
.wsl input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:var(--faint)}
.wsl input[type=range]::-moz-range-progress{height:6px;border-radius:3px;background:var(--lapis)}
.wsl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:var(--th);height:var(--th);margin-top:calc((6px - var(--th))/2);border-radius:50%;background:var(--ink);border:3px solid var(--panel);box-shadow:0 0 0 1px var(--ink)}
.wsl input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--ink);border:3px solid var(--panel);box-shadow:0 0 0 1px var(--ink)}
.wsl input[type=range]:focus-visible{outline:2px solid var(--lapis);outline-offset:2px}
.wsl-ticks{position:relative;height:1.2rem;margin-top:-.5rem}
.wsl-ticks span{position:absolute;left:calc(var(--th)/2 + (100% - var(--th)) * var(--i) / 5);transform:translateX(-50%);font:.8rem/1 var(--f-data);color:var(--muted)}
.wsl-ticks span.ours{color:var(--ink);font-weight:500}
.wsl-ticks span.ours::after{content:"";position:absolute;left:50%;top:-.42rem;width:0;height:0;transform:translateX(-50%);border:4px solid transparent;border-bottom:5px solid var(--ink);border-top:0}
.wsl-our{font-size:.84rem;color:var(--muted)} .wsl-our b{color:var(--ink);font-weight:600}
.wsl-chg{display:none;color:var(--ink);font-weight:600} .wsl.changed .wsl-chg{display:inline}
.wsl-d{font-size:.84rem;color:var(--muted);line-height:1.45}
.wt-pin{position:sticky;top:var(--hdr,3rem);z-index:5;display:flex;justify-content:space-between;align-items:center;gap:.6rem;
  background:var(--panel);border:1px solid var(--ink);border-radius:4px;padding:.35rem .35rem .35rem .7rem;margin-bottom:.8rem;font-size:.86rem;font-weight:600;box-shadow:0 4px 14px rgba(0,0,0,.12)}
.wt-pin .muted{font-weight:400}
.wt-pin .btn{min-height:40px}
.wt-sch{max-width:none}
.wt-sub{margin:0;padding-left:1.2rem;display:grid;gap:.3rem}
@media print{ .wt-pin{display:none!important} .wt-rank{position:static;max-height:none} }
/* ---- Weigh the evidence · fix round 1 (branch p2/r1-evidence). Added as one block; overrides the rules above. ----
   R1-LAY-8, R1-SCH-10, R1-VIS-5: one header per sub-tab (no shared view header), the weights and sliders straight under it.
   R1-LAY-19: sliders in a row line up at 2560. R1-ACC-3: the focused view shows no ring (it is a reading start point). */
.view:focus{outline:none}
.ev-head,.wt-head{gap:.8rem}
.ev-amend{max-width:72ch}
/* "Your weighing": sliders first, the ranking beside them (wide) or after them (phone, where the pinned bar shows the leader) */
.wt-tool{grid-template-areas:"sl" "rk"}
@media (min-width:760px){ .wt-tool{grid-template-areas:"sl rk";grid-template-rows:auto} }
.wsl-note{display:block;margin-top:.35rem;color:var(--ink);border-left:2px solid var(--ochre);padding-left:.6rem}
details.wt-about{border-top:1px solid var(--rule);padding-top:.5rem;font-size:.86rem;color:var(--muted)}
details.wt-about > summary{font:500 .86rem var(--f-body);color:var(--lapis);min-height:44px;display:flex;align-items:center}
details.wt-about p{margin:.4rem 0 0;line-height:1.5}
.wt-cannot p{margin:0}
.wt-cannot ul{margin:.3rem 0 0;padding-left:1.1rem;display:grid;gap:.2rem}
.wt-cannot[hidden]{display:none}
/* two-column slider grid: each card's label, slider and note rows line up with its neighbour's;
   the label sits at the top and its value just above the slider in every card */
@media (min-width:1900px){
  .wt-tool .wt-sliders .wsl{grid-row:span 3;grid-template-rows:subgrid;row-gap:.25rem}
  .wt-tool .wsl-top{flex-direction:column;align-items:flex-start;justify-content:space-between;flex-wrap:nowrap;gap:.2rem}
}
/* ---- end of fix round 1 block ---- */

/* ================= Readings tested (view 6, js/readings.js): list beside the case, cases opening in place on
   narrow screens, the eight-test strip, the argument key, combined positions. Added on branch p1/readings. ========= */
.rx-instr{font-family:var(--f-display);font-size:clamp(1.45rem,2.4vw,1.95rem);line-height:1.2;color:var(--ink);text-wrap:balance}
.rx-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem}
.rx-bar-l{font-weight:600}
.seg-lg button{font:500 .95rem var(--f-body);padding:.55rem 1.1rem;min-height:44px}
.rx{display:grid;grid-template-columns:minmax(15rem,20rem) minmax(0,1fr);gap:1.6rem;align-items:start}
@media (min-width:1500px){ .rx{grid-template-columns:minmax(18rem,24rem) minmax(0,1fr);gap:2.2rem} }
.rx-list{display:grid;gap:.55rem;position:sticky;top:calc(var(--hdr,3rem) + 1rem);min-width:0}
.rx-btn{font:inherit;color:inherit;text-align:left;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.35rem .6rem;
  padding:.8rem .95rem;background:var(--panel);border:1px solid var(--rule);border-radius:4px;min-height:44px;width:100%}
.rx-btn > b{font-weight:600;line-height:1.3;grid-column:1}
.rx-meta{grid-column:1;display:flex;flex-wrap:wrap;gap:.3rem .6rem;align-items:center;font:.78rem var(--f-data);color:var(--muted)}
.rx-btn:hover{border-color:var(--muted)}
.rx-btn[aria-selected="true"],.rx-btn[aria-expanded="true"]{border-color:var(--ink);box-shadow:inset 5px 0 0 var(--lapis);background:var(--paper)}
.rx-btn[aria-selected="true"]{padding-left:1.3rem}
.rx-tog{grid-column:2;grid-row:1 / 3;align-self:center;font:500 1.4rem/1 var(--f-data);color:var(--lapis)}
.rx-tog::before{content:"+"} .rx-btn[aria-expanded="true"] .rx-tog::before{content:"–"}
.rx-panel{padding:clamp(1.1rem,2vw,1.9rem);display:block;min-width:0;border-top:3px solid var(--lapis);border-radius:0 0 4px 4px}
.rx-panel[hidden]{display:none}
.rx-panel:focus{outline:none} .rx-panel:focus-visible{outline:2px solid var(--lapis);outline-offset:2px}
.rx-panel > * + *{margin-top:1.1rem}
.rx-panel.flash{animation:rxflash .7s ease-out}
@keyframes rxflash{from{box-shadow:0 0 0 4px color-mix(in srgb,var(--lapis) 45%,transparent)}to{box-shadow:0 0 0 4px transparent}}
.rx-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem;align-items:center}
.rx-panel .th{font-family:var(--f-display);font-weight:400;font-size:clamp(1.45rem,2.2vw,1.95rem);line-height:1.2;margin-top:.5rem}
.rx-count{font:500 .86rem var(--f-data);color:var(--muted)}
.rx-thesis{font-size:1.05rem;max-width:68ch}
.rx-panel .rx-clear{clear:both;margin:0}
.rx-panel .case-art{margin-top:0}
/* integration fix: figure.art{margin:0} outranks .case-art, so the floated case painting touched the text beside it */
.rx-panel figure.case-art{margin:0 0 1rem 1.6rem}
@media (max-width:640px){ .rx-panel figure.case-art{margin:0 0 1rem} }
.rx-sub{font:600 1.05rem/1.3 var(--f-body);margin:0 0 .75rem}
.rx-tests,.rx-args,.rx-more{padding-top:1.1rem;border-top:1px solid var(--rule)}
.rx-strip{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px}
@media (max-width:1299px){ .rx-strip{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:420px){ .rx-strip{grid-template-columns:repeat(2,minmax(0,1fr))} }
.g-strong{--c:var(--green)} .g-adequate{--c:var(--lapis)} .g-strained{--c:var(--ochre)} .g-fails{--c:var(--oxblood)} .g-na{--c:var(--rule)}
.tcell{font:inherit;color:var(--ink);cursor:pointer;display:grid;gap:.1rem;align-content:start;text-align:left;padding:.5rem .6rem;min-height:44px;
  background:color-mix(in srgb,var(--c) 22%,var(--panel));border:0;border-top:5px solid var(--c);border-radius:3px}
.tcell:hover{background:color-mix(in srgb,var(--c) 34%,var(--panel))}
.tcell .tc-id{font:500 .78rem var(--f-data);color:var(--muted)}
.tcell .tc-n{font-size:.8rem;line-height:1.25}
.tcell b{font:600 .86rem var(--f-data);margin-top:.15rem}
.tcell[aria-expanded="true"]{outline:2px solid var(--ink);outline-offset:1px}
.rx-why{margin-top:.7rem;padding:.8rem 1rem;background:var(--paper);border:1px solid var(--rule);border-radius:4px;display:grid;gap:.4rem}
.rx-why[hidden]{display:none}
.rx-hint{margin-top:.5rem}
.gtag{display:inline-block;font:500 .78rem var(--f-data);padding:.1rem .45rem;border-radius:2px;border-left:4px solid var(--c);
  background:color-mix(in srgb,var(--c) 22%,var(--panel));color:var(--ink);margin-right:.3rem}
/* argument → objection → reply: key and cards (F14) */
.argkey{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));gap:.6rem 1rem;font-size:.86rem;line-height:1.4;margin-bottom:1rem;padding:.7rem .85rem;border:1px dashed var(--rule);border-radius:4px;color:var(--muted)}
.argkey .k{display:flex;gap:.5rem;align-items:flex-start}
.argkey .k i{flex:none;width:1.15rem;height:1.15rem;border-radius:2px;margin-top:.1rem}
.argkey b{display:block;color:var(--ink);font-weight:600}
.k-arg i{background:var(--paper);border:1px solid var(--rule);border-left:4px solid var(--ink)}
.k-obj i{background:var(--ox-soft);border-left:4px solid var(--oxblood)}
.k-rep i{background:var(--lapis-soft);border-left:4px solid var(--lapis)}
.rx-panel .argl{display:grid;gap:1rem}
@media (min-width:1900px){ .rx-panel .argl{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start} }
.rx-panel .arg{padding:0;gap:0;background:var(--paper);overflow:hidden}
.rx-panel .arg-a{padding:.85rem 1rem;border-left:4px solid var(--ink);display:grid;gap:.45rem}
.rx-panel .arg .obj,.rx-panel .arg .rep{font-size:.92rem;padding:.7rem 1rem;border-radius:0;border-left:4px solid var(--oxblood)}
.rx-panel .arg .rep{border-left-color:var(--lapis)}
.k-lab{font:500 .78rem var(--f-data);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:.1rem}
.rx-panel .obj .k-lab{color:var(--oxblood)} .rx-panel .rep .k-lab{color:var(--lapis)}
.arg-meta{font-size:.86rem;display:flex;flex-wrap:wrap;gap:.3rem;align-items:center}
.arg-kind{padding-right:.3rem}
.rx-forms summary{cursor:pointer;min-height:44px;display:flex;align-items:center}
/* every reading on the eight tests */
.rx-sec{gap:1.1rem}
.rx-legend{padding:0}
/* sideways-scroll hints: only where the table is wider than the screen (".legend span" would otherwise show them) */
.legend .rx-swipe{display:none} @media (max-width:1099px){ .legend .rx-swipe{display:inline} }
.legend .pg-swipe{display:none} @media (max-width:919px){ .legend .pg-swipe{display:inline} }
.cellnote{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .8rem;padding:.35rem .9rem;background:var(--lapis-soft);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);font-size:.9rem}
.cellnote .linkbtn{min-height:44px;font-weight:600}
#view-readings table.wm tbody th{font:inherit;text-transform:none;letter-spacing:normal;color:var(--ink);text-align:left;vertical-align:middle;padding:0;min-width:12rem}
#view-readings table.wm td{width:8.5%} #view-readings table.wm td.ovc{width:auto;min-width:6rem;text-align:center}
#view-readings table.wm .gc{background:color-mix(in srgb,var(--c) 24%,var(--panel));color:var(--ink);border-top:5px solid var(--c);height:2.6rem;line-height:2.3rem;box-sizing:border-box}
#view-readings table.wm .gc:hover{background:color-mix(in srgb,var(--c) 36%,var(--panel))}
#view-readings table.wm .gc[aria-pressed="true"]{outline:2px solid var(--ink);outline-offset:1px}
.linkbtn{font:inherit;color:var(--lapis);background:none;border:0;padding:.3rem 0;cursor:pointer;text-decoration:underline;min-height:44px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* combined positions (F13) */
.combos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr));gap:.7rem}
.combos li{padding:.8rem .95rem;display:grid;gap:.45rem;align-content:start;border-radius:4px}
.combos li > b{font-weight:600;line-height:1.35}
.combos .ov{justify-self:start}
.combos summary{cursor:pointer;font-size:.86rem;color:var(--lapis);min-height:44px;display:flex;align-items:center}
/* narrow screens: each case opens in place under its reading */
@media (max-width:899px){
  .rx{grid-template-columns:minmax(0,1fr)}
  .rx-list{position:static}
  .rx-list .rx-panel{margin:-.25rem 0 .6rem}
}

/* ---------- plain-language pass (29 Oct 2026): each view's one-sentence lead, short point lists ---------- */
/* .vlead: the first sentence of a view or sub-tab, saying what it shows and how to use it (checklist 7, 18) */
.vlead{font-size:1.12rem;line-height:1.5;color:var(--ink);max-width:62ch;text-wrap:pretty}
@media (max-width:699px){ .vlead{font-size:1.06rem} }
/* .pts: a few short points in place of one long paragraph */
ul.pts{margin:0;padding-left:1.2rem;display:grid;gap:.5rem;max-width:68ch}
ul.pts li::marker{color:var(--faint)}
/* label in front of the confidence chips on "Is the text secure?" */
.conf .conf-l{font:600 .82rem var(--f-body);border:0;padding:.15rem .2rem .15rem 0;color:var(--muted);align-self:center}
/* two-paragraph clause texts on "Our conclusion" */
.answer .clause-text{display:grid;gap:.8rem;align-content:center}
/* "Tested by opposing advocates" cards (Sources & method) */
.rv-card{padding:1.1rem 1.2rem;gap:.8rem}
.rv-card h4{font:600 1.05rem/1.3 var(--f-body);margin:0}
#trans-key{font-size:.86rem}
/* "Every witness, word by word" must not widen the page on a phone (its wide table scrolls inside its own box) */
.tc-explorer{grid-template-columns:minmax(0,1fr)}
.tc-panel{grid-template-columns:minmax(0,1fr)}
.tc-panel .btn{white-space:normal;text-align:left}

/* ================= shell fixes, phase 2 round 1 (branch p2/r1-shell) =================
   Navigation, The question, global contrast, Sources & method, The word, Bibles. Each rule names the finding it fixes. */

/* --- the sticky tab bar never hides the focused control or an in-page jump (R1-ACC-5) --- */
html{scroll-padding-top:calc(var(--hdr,4rem) + 8px)}

/* --- contrast of controls and small text (R1-ACC-7, R1-ACC-8, R1-ACC-9) --- */
.field select,.field input{border-color:var(--control-border)}
.field input{background:var(--panel)}
.seg{border-color:var(--control-border)}
.k-greek{color:var(--t-gf-text)}
.tcell .tc-id{color:var(--ink)}
/* a tradition switched off: hollow swatch, struck-through name, full-contrast text (no fading) */
.tchip[aria-pressed="false"]{opacity:1;background:transparent;color:var(--muted);border-style:dashed;border-color:var(--control-border);text-decoration:line-through;text-decoration-thickness:1px}
.tchip[aria-pressed="false"] i path{fill:none;stroke-width:1.5}

/* --- tab descriptions and the site name in the tab bar on large screens (R1-LAY-13, R1-DEV-5, R1-LAY-21) --- */
@media (min-width:1280px){
  .tabs-in{max-width:min(100%,1640px)}
  .tablist a span{display:block}
  .tablist a{min-height:66px;padding-inline:.3rem}
  .tablist{gap:2px}
  .mark{display:block;align-self:center;font-family:var(--f-display);font-size:1.1rem;line-height:1.15;color:var(--ink);text-decoration:none;white-space:nowrap;padding:.3rem .6rem 0 0}
  .mark:hover{color:var(--lapis)}
}
/* 1280–1499px: the descriptions take the room, so the site name stays in the page header above the bar */
@media (min-width:1280px) and (max-width:1499px){ .tablist a b{font-size:.84rem} .tabs-in > .mark{display:none} }
/* iPad widths: the chosen tab's description on one line under the tab bar */
.cur-desc{display:none}
@media (min-width:760px) and (max-width:1279px){
  .cur-desc{display:block;font-size:.92rem;line-height:1.4;color:var(--muted);margin:-.4rem 0 1.4rem}
  .cur-desc b{color:var(--ink);font-weight:600}
}
/* when the tab names do not fit (a large text setting): the phone's "Sections" button instead (R1-ACC-14) */
.nav-compact .tablist{display:none}
.nav-compact .tabs-in{justify-content:space-between;align-items:center;padding-block:.4rem;gap:.6rem}
.nav-compact .mark{display:block;font-family:var(--f-display);font-size:1.1rem;color:var(--ink);text-decoration:none;white-space:nowrap;padding:0}
.nav-compact .mobilebar{display:flex;align-items:center;gap:.6rem;min-width:0}
.nav-compact .mobilebar .cur{font-weight:600;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* --- the "Sections" menu is a modal <dialog> (R1-ACC-4) --- */
dialog.sheet{width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;color:var(--ink)}
.sheet:not([open]){display:none}
dialog.sheet::backdrop{background:var(--paper)}
.sheet li{border-bottom:1px solid var(--rule)}
.sheet li > a{border-bottom:0}
/* sub-tabs listed under their section, in the Sections menu and on The question (R1-DEV-5) */
.nav-subs{list-style:none;margin:0;padding:0 0 .7rem .2rem;display:flex;flex-wrap:wrap;gap:.4rem}
.nav-subs a,.sheet .nav-subs a{display:inline-flex;align-items:center;min-height:44px;padding:.3rem .8rem;border:1px solid var(--control-border);border-radius:22px;
  background:var(--panel);color:var(--ink);text-decoration:none;font-size:.88rem;line-height:1.25;border-bottom-width:1px}
.nav-subs a:hover{border-color:var(--ink)}
.sheet .nav-subs{padding-left:.2rem}
.sheet .nav-subs li{border:0}

/* --- Previous / Next walk the sub-tabs too; a sub-tab's card names its section above it (R1-DEV-3) --- */
.pager a em{display:block;font-style:normal;font-size:.8rem;color:var(--muted)}

/* --- The question: the "what this site is" line inside the painting on wide screens (R1-VIS-8, R1-LAY-7) --- */
.hero-lead{max-width:62ch}
@media (min-width:700px){ .q-lead{display:none} .hero-over{padding-top:5rem} }
/* the painting keeps its 16:9 frame (up to 78vh), but grows taller rather than clip the words when the text is
   enlarged (R1-ACC-14) */
@media (min-width:700px){
  .hero{container-type:inline-size}
  .hero-art{aspect-ratio:auto;max-height:none;min-height:max(420px,min(78vh,56.25cqw));display:grid;align-content:end}
  .hero-over{position:relative}
}
@media (max-width:699px){ .hero-lead{display:none} }

/* --- footer: open every "For scholars" note (R1-DEV-6) --- */
footer p + p{margin-top:.6rem}
.sch-all-btn{font-size:.9rem;padding:.3rem 0}
.sch-all-btn[aria-pressed="true"]::before{content:"✓ "}

/* --- The word › Is the text secure?: the same "How sure" style as Our conclusion (R1-LAY-12, R1-SCH-13, R1-VIS-16) --- */
.sure-tc{max-width:80ch}
.sure-tc .sure-list{grid-template-columns:minmax(0,1fr)}
.sure-tc .sure-list li{grid-template-columns:minmax(14rem,auto) minmax(0,1fr)}
@media (max-width:560px){ .sure-tc .sure-list li{grid-template-columns:minmax(0,1fr);gap:.2rem} }
.sure-tc .sure-key{align-items:center}
.lv-vhigh{color:var(--green)} .lv-vhigh .pips b{background:currentColor}
.lv-vhigh .pips{outline:1.5px solid currentColor;outline-offset:1.5px;border-radius:1px}
.lv-mhigh{color:var(--ochre)} .lv-mhigh .pips b:nth-child(-n+2){background:currentColor}
.lv-mhigh .pips b:nth-child(3){background:linear-gradient(90deg,currentColor 50%,transparent 50%)}
.lv-low{color:var(--oxblood)} .lv-low .pips b:first-child{background:currentColor}
.tc-sure{display:grid;gap:.35rem}
.tc-sure-l{font:600 .82rem var(--f-body);color:var(--muted)}
.tc-conf{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.tc-conf li{display:flex;flex-wrap:wrap;gap:.2rem .8rem;align-items:baseline}
.tc-conf .st{font-size:.92rem}

/* --- The word › Three uses: cards keep their own height (R1-VIS-12) --- */
#view-word .three{align-items:start}

/* --- The word › Linked verses: marks on a year axis, real buttons with 24px hit areas (R1-ACC-13, R1-VIS-15) --- */
.strip .sx{position:relative;height:30px;margin-inline:12px}
.strip .sx::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px solid var(--control-border)}
.strip .mk{position:absolute;top:50%;width:24px;height:30px;margin:0 0 0 -12px;transform:translateY(-50%);padding:0;border:0;background:none;cursor:pointer;border-radius:3px}
.strip .mk::before{content:"";position:absolute;left:50%;top:5px;bottom:5px;width:6px;margin-left:-3px;border-radius:1px;background:var(--lapis);opacity:.7}
.strip .mk:hover::before,.strip .mk:focus-visible::before{background:var(--ink);opacity:1}
.strip .mk:focus-visible{outline:2px solid var(--lapis);outline-offset:0}
.strip .ln-axis .sx{height:1.3rem}
.strip .ln-axis .sx::before{display:none}
.strip .ln-axis .sx span{position:absolute;top:0;transform:translateX(-50%);font:.78rem/1.3rem var(--f-data);color:var(--muted);white-space:nowrap}
.strip .ln-axis .sx span:first-child{transform:none}
@media (max-width:560px){ .strip .ln-axis > div:first-child{display:none} }
.strip-cap{font-size:.86rem;color:var(--muted);min-height:1.5em;margin:0}

/* --- Bibles: on large screens the empty painting frame takes its whole column (R1-VIS-18) --- */
@media (min-width:1500px){ #view-bibles .split-art.art-missing{max-width:none} }

/* --- Sources & method › All sources: search, filter note, key, page numbers (R1-LAY-4, R1-SCH-7, R1-VIS-11, R1-DAT-2, R1-DAT-10, R1-DEV-8) --- */
.src-tools{display:grid;gap:.7rem;max-width:72ch}
.src-find{font-size:.82rem}
.src-find input{width:100%;max-width:28rem;font-size:1rem;padding:.55rem .7rem;min-height:44px}
#view-sources .st-panel[data-sub="list"]{gap:1.4rem}
.src-list{display:grid;gap:.8rem;min-width:0}
.src-count{font-size:.95rem;display:flex;flex-wrap:wrap;align-items:center;gap:0 .9rem;min-height:44px}
.src-count .linkbtn[hidden]{display:none}
.src-filter{border:1px solid var(--rule);border-radius:4px}
.src-filter[hidden]{display:none}
.src-key{padding:0;font-size:.86rem}
.src-key > span{flex-wrap:wrap;gap:.3rem .45rem}
.tag.rd{background:color-mix(in srgb,var(--c) 14%,var(--panel));color:var(--ink)}
.tag.rd i{display:inline-block;width:.6rem;height:.6rem;border-radius:50%;background:var(--c);margin-right:.35rem;vertical-align:-.02em}
.tag.rd.rep{background:transparent;color:var(--muted)}
.tag.rd.rep i{background:transparent;box-shadow:inset 0 0 0 1.5px var(--c)}
.rd-m{margin-top:.3rem}
.rd-l{display:block;font:500 .78rem var(--f-data);text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.legend .rd-l{display:inline}
.src-w b{font-weight:600}
@media (min-width:700px){ #srctbl td.src-d{width:15rem} #srctbl td.src-r{width:11rem} }
.src-q{color:var(--muted);font-size:.86rem;margin-top:.25rem}
.src-q .pg{font:500 .8rem var(--f-data);color:var(--ink);white-space:nowrap}
/* the Timeline's search box says how many works match (R1-LAY-4) */
.q-hit{font-size:.86rem;line-height:1.35;color:var(--ink);margin:0;align-self:end;padding-bottom:.3rem;max-width:26rem}
.q-hit[hidden]{display:none}
/* phones: each source is a stacked card, so nothing is cut off at the side (R1-LAY-17, R1-ACC-15, R1-VIS-10) */
@media (max-width:699px){
  .src-tbl{overflow:visible}
  #srctbl,#srctbl tbody{display:block}
  #srctbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  #srctbl tr{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.45rem .8rem;padding:.85rem .9rem;margin-bottom:.7rem;background:var(--panel);border:1px solid var(--rule);border-radius:4px}
  #srctbl td{display:block;border:0;padding:0}
  #srctbl td.yr{grid-column:1;grid-row:1}
  #srctbl td.src-w{grid-column:2;grid-row:1}
  #srctbl td.src-d,#srctbl td.src-r{grid-column:1 / -1}
  #srctbl td.src-d::before,#srctbl td.src-r::before{content:attr(data-label);display:block;font:500 .78rem var(--f-data);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:.15rem}
  #srctbl td[colspan]{grid-column:1 / -1}
}
@media print{ .cur-desc,.sch-all-btn{display:none!important} }

/* ================= shell fixes, phase 2 round 2 (branch p2/r2-shell) =================
   Navigation, The question, global styles, Sources & method, The word, Bibles. Each rule names the finding it fixes.
   One block, added at the end of the file; it overrides the rules above where the two meet. */

/* --- use the width of a large monitor, and keep the tab bar and the content on one column (R2-VIS-1, R2-VIS-11) ---
   From 1280px the column is as wide as the window allows, up to a cap that grows with the screen; the tab bar takes
   the same width. Running text keeps its own ~62-character measure (.col), so only figures and grids spread. The
   base type steps up on very large screens, so chart labels and tab names grow with it. */
@media (min-width:1280px){ :root{--wrap:100%} .tabs-in{max-width:var(--wrap)} }
@media (min-width:1500px){ :root{--wrap:1520px} }
@media (min-width:1900px){ :root{--wrap:1700px} html{font-size:118.75%} }
@media (min-width:2300px){ :root{--wrap:1900px} html{font-size:125%} }
/* tab names sit at the top of every tab, so a one-line description (Gallery) does not drop its name lower */
.tablist a{align-content:start}

/* --- the phone bar names the section and the sub-tab, and never cuts either (R2-LAY-13, R2-ACC-14) --- */
.mobilebar .cur small{display:block;font-weight:400;font-size:.8rem;line-height:1.2;color:var(--muted)}
@media (max-width:759px){
  .tabs-in{gap:.5rem}
  .mark{display:inline-flex;align-items:center;min-height:44px;font-size:1.02rem}
  .mobilebar{flex:1 1 0;min-width:0;justify-content:flex-end}
  .mobilebar .cur{flex:1 1 auto;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.2;text-align:right;overflow-wrap:anywhere}
  .mobilebar .iconbtn{padding-inline:.65rem}
}
.nav-compact .mobilebar .cur{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.2}
.iconbtn[aria-busy="true"]{opacity:.6;cursor:progress}

/* --- Weigh the evidence › Our conclusion: how sure we are, on the first screen (R2-LAY-4) --- */
.sure-brief{margin-top:.8rem;max-width:62ch;font-size:1rem;line-height:1.9}
.sure-brief .lvl{margin-inline:.1rem}

/* --- Bibles: each row names its reading; the colours are the Timeline's; "control" is ringed and hatched (R2-LAY-5, R2-VIS-3) --- */
:root{--b-please:#7a6a58}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --b-please:#c9b8a0; } }
:root[data-theme="dark"]{ --b-please:#c9b8a0; }
.tr::before{width:.85rem;height:.85rem;top:.5rem;left:-.5rem}
.tr.b-ctl::before,.legend .solid.b-ctl{background-image:repeating-linear-gradient(135deg,transparent 0 2px,rgba(255,255,255,.6) 2px 3.6px)}
.tr.b-ctl::before{box-shadow:0 0 0 2px var(--paper),0 0 0 3.4px var(--c)}
.legend .solid.b-ctl{box-shadow:0 0 0 1.5px var(--panel),0 0 0 3px var(--r-ctl)}
.legend #trans-key .solid,#trans-key .solid{width:.85rem;height:.85rem}
.tr .rk{font:500 .84rem/1.35 var(--f-body);color:var(--muted);margin-top:.15rem}
#trans-key{gap:.5rem 1.4rem}

/* --- text in a foreign script inside English is marked with its language (R2-ACC-5); the page's own font for it --- */
.lg[lang="he"],.lg[lang="syr"],.lg[lang="arc"]{font-family:var(--f-heb)}

/* --- tables that would scroll sideways on a phone become one card per row (R2-LAY-8) --- */
@media (max-width:700px){
  .tbl.stk{overflow-x:visible}
  .stk table,.stk tbody,.stk tr,.stk td{display:block;width:100%}
  .stk thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .stk tr{border:1px solid var(--rule);border-radius:4px;background:var(--panel);margin-bottom:.7rem;padding:.2rem .8rem .5rem}
  .stk td{border:0;padding:.3rem 0;display:grid;grid-template-columns:minmax(5.5rem,34%) minmax(0,1fr);gap:.2rem .8rem;align-items:baseline;text-align:left!important;font-size:.9rem}
  .stk td[data-label]::before{content:attr(data-label);font:500 .78rem var(--f-data);text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
  .stk td.first{display:block;font-size:1rem;padding-top:.5rem;border-bottom:1px solid var(--rule);margin-bottom:.2rem}
  .stk td.first b{font-weight:600}
  .stk td.c{border-left:0;border-top:3px solid var(--c)}
  .tc-panel .stk td.rd{direction:ltr;text-align:left}
  .tc-panel .stk .sch-col{display:none}
  .tc-panel.cols .stk td.sch-col{display:grid}
  .stk tr.turn td{opacity:1}
  .stk .sbs td:empty{display:none}
}
.tc-panel td.rd{unicode-bidi:plaintext}

/* --- placeholder text in the search boxes is as dark as other hint text (R2-ACC-10) --- */
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}

/* --- touch: controls are at least 44px tall on a phone or tablet (R2-ACC-11) --- */
@media (pointer:coarse),(max-width:820px){
  .btn,.morebtn,.seg button,.tc-other button,.sch-all-btn,.print-row .linkbtn,.wt-reset{min-height:44px}
  details:not(.sch-x) > summary,details.wr-why > summary{min-height:44px;display:flex;align-items:center}
  .tc-other button{padding-block:.5rem}
  .tc-other{gap:.5rem}
}

/* --- The word › Three uses: three cards of one height; the painting beside the shared point (R2-VIS-6) --- */
#view-word .three{align-items:stretch}
.uses-share{display:grid;gap:1.4rem;align-items:center}
.uses-share .art-card{margin:0}
@media (min-width:760px){ .uses-share{grid-template-columns:minmax(0,24rem) minmax(0,1fr);gap:2.2rem} }

/* --- The word › Linked verses: one date scale, full-width strips, numbered marks for crowded dates (R2-ACC-8, R2-VIS-8) --- */
.strip{gap:.1rem}
.strip .ln{grid-template-columns:minmax(0,1fr);gap:0;font-size:.9rem;align-items:end}
.strip .ln-l{padding-top:.55rem;line-height:1.3}
.strip .ln-axis{margin-bottom:.1rem}
.strip .mk.cl{width:26px;margin-left:-13px}
.strip .mk.cl::before{display:none}
.strip .mk.cl span{position:absolute;left:1px;right:1px;top:3px;bottom:3px;display:flex;align-items:center;justify-content:center;border-radius:12px;
  background:var(--lapis);color:var(--panel);font:500 .8rem/1 var(--f-data);opacity:.92}
.strip .mk.cl:hover span,.strip .mk.cl:focus-visible span,.strip .mk.cl[aria-expanded="true"] span{background:var(--ink);opacity:1}
.strip .ln-axis .sx span.end{transform:translateX(-100%)}
@media (max-width:560px){ .strip .ln-axis > div:first-child{display:block} }
.strip-msg{font-size:.88rem;margin:0}
.strip-msg:empty{display:none}
.mk-list{background:var(--panel);border:1px solid var(--rule);border-radius:4px;padding:.5rem .9rem .6rem;margin:.1rem 0 .3rem}
.mk-list-h{font:500 .8rem var(--f-data);color:var(--muted);margin:0 0 .2rem}
.mk-list ul{list-style:none;margin:0;padding:0;max-height:15rem;overflow:auto}
.mk-list li{border-top:1px solid var(--rule)}
.mk-list button{font:inherit;font-size:.9rem;line-height:1.35;text-align:left;width:100%;background:none;border:0;color:var(--lapis);text-decoration:underline;padding:.35rem 0;min-height:32px;cursor:pointer}
@media (pointer:coarse),(max-width:820px){ .mk-list button{min-height:44px} }
.seg-slot{margin:0}
/* the two charts share their rows: heading, note, toggle, chart */
@media (min-width:900px){
  #view-word .st-panel[data-sub="threads"] .two{grid-template-rows:auto auto auto 1fr;row-gap:.6rem;column-gap:2.2rem}
  #view-word .st-panel[data-sub="threads"] .two > .stack{display:grid;grid-row:span 4;grid-template-rows:subgrid;gap:0;align-content:start}
  #view-word .st-panel[data-sub="threads"] .two > .stack > .seg{align-self:start;justify-self:start}
  #view-word .st-panel[data-sub="threads"] .two > .stack > p{align-self:start}
}

/* --- The question: the "how to use this site" map is one even set of cards, sub-tabs inside them (R2-VIS-16) --- */

/* --- Previous / Next: space between the cards and the line under them (R2-VIS-18) --- */
.pager{padding-bottom:2.2rem;margin-bottom:.4rem}
footer{margin-top:1.2rem;padding-top:1.4rem;border-top:1px solid var(--rule)}

/* --- gallery captions may grow under wider text spacing instead of being cut (R2-ACC-14) --- */
.gv-tl{-webkit-line-clamp:unset;line-clamp:unset;overflow:visible;display:block}

/* --- a tab that is not showing stays findable (Cmd-F) in browsers with hidden="until-found"; js/core.js opens the
       tab that holds the match (R2-DEV-1). The tab is out of the layout and out of sight until it is chosen. --- */
.ubm.js .view:not(.on),.ubm.js .st-panel:not(.on){display:flex;position:absolute;width:0;height:0}

/* --- printing: the section that is showing, or the whole site from the footer button (R2-DEV-4) --- */
.print-row{margin-top:.6rem}
@media print{
  html.js:not(.print-all) .view:not(.on),html.js:not(.print-all) .st-panel:not(.on){display:none!important}
  html.print-all .view:not(.on),html.print-all .st-panel:not(.on){display:flex!important;position:static!important;width:auto!important;height:auto!important;content-visibility:visible!important}
  .print-row,.sch-all-btn,.toolbar,.seg,.btn,.morebtn,.field,input,select,.wt-state,.wt-pin,.st-exit,.story .st-nav,.tl-key a,.mk-list,.iconbtn{display:none!important}
  html{font-size:100%}
  .hero-art,.tl-box,figure,.card,.tr,.sure-list li{break-inside:avoid}
  .tl-box{min-height:0!important}
}
/* --- two widths inside a tab: the prose measure and the full column (R2-VIS-15) --- */
details.sch-x{max-width:calc(62ch + 1.9rem)}
.detail details.sch-x{max-width:none}
.sure-tc{max-width:none}
/* ===== end of shell fixes, phase 2 round 2 ===== */

/* ================= Timeline, Traditions and Gallery: phase 2, fix round 1 (branch p2/r1-timeline) =================
   js/timeline.js, js/traditions.js, js/gallery.js, js/art.js. One block, so it merges cleanly with other fixers.
   - reading colours (--r-*): a palette of their own, never a tradition's colour; "Desire to control" also hatched
   - tradition colours: the near-identical pairs pulled apart (values only; each keeps its meaning)
   - chart: drawn at its frame's width; rings drawn as rings; dimmed dots never take a tap; one Tab stop
   - toolbar: "More filters", the search's list of matching works, the key under the chart
   - the selected work's card opens in the tour panel's place, not over the chart
   - Traditions grid: full-height tap targets, the leading reading in words, a visible "no reading" bar
   - Gallery: the painting and its caption fit the first screen; larger on big monitors */
:root{
  --r-turn:#e0a000; --r-power:#23408a; --r-will:#127a72; --r-sex:#e07cb8; --r-long:#5c9a1c; --r-devot:#8f6ad6; --r-ctl:#a3202c;
  --r-pen:#8a6a1c; --r-crea:#2f7d4b; --r-cmd:#4b5563; --r-pred:#2b8fc9;
  --t-lf:#6e4520; --t-luth:#2f7a3e; --t-ang:#3fa3a8; --t-wes:#a8901a; --t-ev:#7b8fbf; --t-acad:#6a717c;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --r-turn:#ffd75e; --r-power:#4f74e0; --r-will:#1f9c8c; --r-sex:#fbbde2; --r-long:#86c840; --r-devot:#a68af2; --r-ctl:#dc3b33;
  --r-pen:#d9b35a; --r-crea:#6fcf8f; --r-cmd:#b3bccb; --r-pred:#6cc3f5;
  --t-lf:#a8703f; --t-luth:#5fb06e; --t-ref:#6f9fe0; --t-ang:#7fdada; --t-wes:#e8d36a; --t-ev:#b7c3e6; --t-acad:#8a929e; } }
:root[data-theme="dark"]{
  --r-turn:#ffd75e; --r-power:#4f74e0; --r-will:#1f9c8c; --r-sex:#fbbde2; --r-long:#86c840; --r-devot:#a68af2; --r-ctl:#dc3b33;
  --r-pen:#d9b35a; --r-crea:#6fcf8f; --r-cmd:#b3bccb; --r-pred:#6cc3f5;
  --t-lf:#a8703f; --t-luth:#5fb06e; --t-ref:#6f9fe0; --t-ang:#7fdada; --t-wes:#e8d36a; --t-ev:#b7c3e6; --t-acad:#8a929e; }
/* hatching for "Desire to control" (key swatches, Traditions bars); the band uses an SVG pattern (js/timeline.js) */
.hatch{background-image:repeating-linear-gradient(135deg,transparent 0 4px,color-mix(in srgb,var(--panel) 50%,transparent) 4px 6.5px)!important}

/* --- the explorer's first screen: a short head, so the tour's start and the chart's top are on the first screen --- */
#view-timeline .st-panel[data-sub="explore"]{gap:1.3rem}
#view-timeline .tl-head{gap:.6rem}
@media (min-width:1100px){ #view-timeline .tl-head{max-width:none} #view-timeline .tl-head .vlead{max-width:none} }
/* before the tour starts (and after it ends) the button follows the text; during the tour Back and Next sit at the
   foot of the panel, in the same place at every stop (F4) */
.story:not(.touring) .st-text{flex:none!important;height:auto!important;max-height:12rem}
.story:not(.touring) .st-body{justify-content:flex-start}
.story:not(.touring) .ctrls{justify-content:flex-start}
.story:not(.touring) .st-top{grid-template-rows:auto}
@media (min-width:700px) and (max-width:1279px){
  .story:not(.touring){height:auto;min-height:12rem}
  .story:not(.touring) .st-top{display:none}
  .story:not(.touring) .st-body{padding-top:.8rem}
}
#view-timeline .subtabs{gap:1.2rem}
#view-timeline .chiprow,#view-timeline .eras{padding-block:.4rem}
#view-timeline .toolbar{padding-block:.6rem}
.story:not(.touring) .st-top .num{line-height:1.3}
/* --- the chart --- */
#tl,.tl-box #tl{min-width:0}
#tl path.dot.rep{fill:none!important;stroke-width:1.8}
#tl path.dot.dim{pointer-events:none}
#tl path.dot.sel{stroke:var(--ink)!important;stroke-width:2.6}
#tl path.dot:focus{outline:none}
#tl path.dot:focus-visible{stroke:var(--ink)!important;stroke-width:3;outline:2px solid var(--lapis);outline-offset:2px}
/* hidden must win over the display these boxes set */
.cellnote[hidden],.qmatch[hidden],.filters-more[hidden]{display:none}
/* --- toolbar: "More filters" and the list of works that match the search --- */
.toolbar .morefilt{align-self:end}
.filters-more{background:color-mix(in srgb,var(--paper) 55%,var(--panel))}
.qmatch{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .45rem;padding:.5rem .9rem;border-bottom:1px solid var(--rule);background:var(--lapis-soft);font-size:.9rem}
.qm-n{font-weight:600;margin-right:.25rem}
.qm-b{font:500 .86rem/1.2 var(--f-body);background:var(--panel);color:var(--ink);border:1px solid var(--rule);border-radius:20px;padding:.3rem .75rem;min-height:36px;cursor:pointer}
.qm-b span{font:.8rem var(--f-data);color:var(--muted)}
.qm-b:hover{border-color:var(--ink)}
.qm-more{font-size:.86rem}
/* --- the key under the chart --- */
.tl-key{display:grid;gap:.4rem;padding:.55rem .9rem .7rem;font-size:.8rem}
.tl-key .k-row{display:flex;flex-wrap:wrap;gap:.25rem .9rem;align-items:center;margin:0}
.tl-key .k-row > b{font:600 .78rem var(--f-data);text-transform:uppercase;letter-spacing:.06em;color:var(--ink);min-width:3.2rem}
.tl-key .sw{width:1rem;height:.75rem;border-radius:1px;background:var(--c);display:inline-block}
.tl-key .k-note{color:var(--faint)}
/* --- the selected work: in the tour panel's place from 700px; a sheet from the bottom on phones --- */
.st-slot{position:relative;min-width:0}
.detail .d-trad{display:inline-block;width:.8rem;height:.8rem;margin-right:.45rem;vertical-align:-.08rem;line-height:0}
.detail .d-trad svg{width:100%;height:100%;overflow:visible} .detail .d-trad path{fill:var(--c);stroke:var(--c);stroke-width:.6}
@media (min-width:700px){
  .tl-box .detail{position:absolute;inset:0;width:auto;max-height:none;z-index:4;border:0;border-radius:0;box-shadow:none;overflow:auto;align-content:start;padding:1rem 1.2rem;background:var(--panel)}
}
@media (max-width:699px){ .tl-box > .st-slot{border-top:1px solid var(--rule)} .tl-box .detail{width:auto} }
/* tablets: the card gets the full tour-panel height (js/timeline.js then scrolls the card and the chart into view) */
@media (min-width:700px) and (max-width:1279px){ .st-slot.open{min-height:19rem} }
/* --- touch screens: every Timeline control at least 44px tall --- */
@media (pointer:coarse){
  #view-timeline .tchip,#view-timeline .eras button,#view-timeline .seg button,#view-timeline .field input,#view-timeline .field select,
  #view-timeline .st-exit,#view-timeline .closebtn,#view-timeline .morefilt,#view-timeline .qm-b,#view-timeline .detail summary,
  #view-timeline .tl-key a,#view-timeline .qm-more{min-height:44px}
  #view-timeline .qm-more{display:inline-flex;align-items:center}
  .st-top{grid-template-rows:2.75rem 1.6rem}
}
/* --- Traditions grid --- */
.pgrid .rl{font-weight:600}
.pgrid > div{padding:.3rem .4rem}
.pgrid .cellbtn{display:flex;flex-direction:column;justify-content:center;gap:.25rem;height:auto;min-height:44px;box-sizing:border-box;
  width:calc(100% + .5rem);margin:-.15rem -.25rem;padding:.25rem;border-radius:3px}
.pgrid .cellbtn:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.pgrid .cellbtn:focus-visible{outline:2px solid var(--lapis);outline-offset:0}
.cb-row{display:flex;align-items:center;gap:.3rem}
.cb-bar{display:flex;gap:1px;height:1rem;flex:1;min-width:0}
.cb-bar i{display:block;height:100%}
.cb-bar i.none,.legend .solid.none{background:transparent;border:1.5px dashed var(--muted);box-sizing:border-box}
.cellbtn .cb-row small{margin-left:0}
.cb-lead{display:flex;flex-direction:column;font:.78rem/1.25 var(--f-body);color:var(--ink)}
.cb-lead .cb-more,.cb-lead .cb-none{color:var(--muted)}
.cb-none{font-style:italic}
/* --- Gallery: the painting and its caption on the first screen (js/gallery.js sets the painting's height) --- */
#view-gallery{gap:1.4rem}
@media (min-width:1100px){
  #view-gallery > .stack.col{max-width:none;display:grid;grid-template-columns:auto minmax(0,46ch);column-gap:3rem;row-gap:.4rem;align-items:end;justify-content:space-between}
  #view-gallery > .stack.col > .vlead{grid-column:2;grid-row:1 / span 2}
}
/* very large monitors: the viewer may use more than the reading column, so the painting can fill most of the height */
@media (min-width:1900px){ #view-gallery .gv{margin-inline:calc((100% - min(100vw - 64px, 2300px)) / 2)} }

/* ===== Phase 2, fix round 1, Readings tested (branch p2/r1-readings) =====
   R1-SCH-3: the count's qualifier sits on the count line, and "How the works were counted" sits right under it.
   R1-DEV-4: a jump link under the main instruction to the all-readings grid. */
.rx-count .rx-cav{font-weight:400}
.rx-panel > .rx-countx{margin-top:.6rem}
.rx-head .rx-jump{margin-top:.4rem}
.rx-head .rx-jump .linkbtn{font-size:1rem;font-weight:500;text-align:left}
#rx-grid-h:focus{outline:none} #rx-grid-h:focus-visible{outline:2px solid var(--lapis);outline-offset:3px}
/* the "known second-hand" dagger after a defender's name rendered at 12.9px */
.rx-panel .defs sup{font-size:max(13px,.75em)}
/* ===== end p2/r1-readings ===== */

/* ===== Phase 2, fix round 2, Timeline / Traditions / Gallery / paintings (branch p2/r2-timeline) ===== */
/* R2-ACC-7, R2-ACC-6: tradition dot colours. Light mode: Anglican, Wesleyan and Evangelical darkened to at least 3:1 on the paper lanes
   (they were 2.7 to 2.9:1); Catholic darker and Lutheran lighter, Jewish and Reformed pulled apart, so red/green and purple/blue pairs
   differ in lightness for readers with red-green colour blindness. Dark mode: the same pairs separated the other way. */
:root{ --t-ang:#2f8f94; --t-wes:#947a00; --t-ev:#62779f; --t-cath:#9c2b3e; --t-luth:#3a8f4a; --t-jew:#8048a8; --t-ref:#245585; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --t-cath:#f08a96; --t-luth:#4fa468; --t-jew:#d4a4ec; --t-ref:#5d8fe0; --t-ev:#a9bce0; --t-ang:#7fdada; --t-wes:#e8d36a; } }
:root[data-theme="dark"]{ --t-cath:#f08a96; --t-luth:#4fa468; --t-jew:#d4a4ec; --t-ref:#5d8fe0; --t-ev:#a9bce0; --t-ang:#7fdada; --t-wes:#e8d36a; }
/* a chip doubles as the legend: pointing at it or focusing it lights that tradition's dots and dims the rest */
#tl path.dot.tdim{opacity:.14}
#tl path.dot.thl{stroke:var(--ink)!important;stroke-width:2.2}
.tchip:hover,.tchip:focus-visible{border-color:var(--ink)}
/* rings (works that only mention or reject a reading) a little heavier so pale hues stay visible on the grey lanes */
#tl path.dot.rep{stroke-width:2.2}

/* R2-ACC-1: the selected work's card is a dialog: a plain one in the tour panel's place from 700px, a modal sheet on phones */
dialog.detail{margin:0;max-width:none;height:auto;color:var(--ink);border:1px solid var(--rule)}
dialog.detail:not([open]){display:none!important}
.detail .who:focus{outline:none} .detail .who:focus-visible{outline:2px solid var(--lapis);outline-offset:3px}
.detail .pg{font:500 .8rem var(--f-data);font-style:normal;color:var(--muted);white-space:nowrap}
dialog.detail::backdrop{background:rgba(9,11,15,.5)}
@media (max-width:699px){
  dialog.detail{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;max-height:70vh;max-height:70dvh;border-radius:10px 10px 0 0;border-bottom:0}
}
@media (min-width:700px){ dialog.detail.panelbox{border:0} }

/* R2-VIS-10: on phones the tradition and era chips fold behind "More filters", so the chart is near the top; lane names wrap, not shorten */
@media (max-width:699px){
  .tl-box:not(.more-open) > #trad,.tl-box:not(.more-open) > #eras{display:none}
}
/* R2-ACC-9: a filter field never grows wider than the box it sits in, even with text at 200% */
.toolbar .field{max-width:100%;min-width:0} .toolbar .field input{width:min(13rem,100%)}

/* R2-VIS-4: before the tour starts the panel's painting takes the room the panel has to spare, instead of leaving it blank under the button */
@media (min-width:1280px){
  .tl-box .story:not(.touring) .st-art{flex:1 1 auto;min-height:0}
  .tl-box .story:not(.touring) .st-art .art-box{height:100%;aspect-ratio:auto;min-height:12rem}
  .tl-box .story:not(.touring) .st-body{flex:none}
}

/* R2-LAY-1: a "no reading held" slice in every bar, so the bar adds up to the number beside it */
.cb-bar i{min-width:2px}
.legend .pg-count{flex-basis:100%;color:var(--muted)}
/* R2-LAY-3: the row names stay put while the grid scrolls sideways; the note sits right above the grid; the right edge fades while more is hidden */
.pg-scrollnote{margin:.2rem 0 .1rem;font:500 .86rem var(--f-data);color:var(--ink)}
.pg-scrollnote[hidden]{display:none}
.pgrid > .rl,.pgrid > .h:first-child{position:sticky;left:0;z-index:2;background:var(--paper)}
.pgrid{min-width:56.5rem} /* as wide as its columns, so the sticky row names have a box to stick in */
.pgrid > .rl{padding-right:.5rem}
.gridwrap.can-scroll:not(.at-start) .pgrid > .rl,.gridwrap.can-scroll:not(.at-start) .pgrid > .h:first-child{box-shadow:7px 0 7px -7px rgba(0,0,0,.45)}
.gridwrap.can-scroll:not(.at-end){-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 2.6rem),rgba(0,0,0,.25));mask-image:linear-gradient(to right,#000 calc(100% - 2.6rem),rgba(0,0,0,.25))}
@media (max-width:699px){
  .pgrid{grid-template-columns:6.4rem repeat(7,minmax(7.6rem,1fr));min-width:59.6rem}
  .pgrid .rl{overflow-wrap:anywhere}
}
/* R2-VIS-14: a shorter head, so more rows are on the first screen */
#view-traditions{gap:1rem}
#view-traditions > .stack.col:first-child{gap:.5rem}
#view-traditions > .stack.col:first-child + .legend{padding-bottom:.1rem}
#view-traditions > .stack.col:last-child{gap:.9rem;margin-top:.8rem}
/* R2-VIS-17: the two quotes as a pair of cards, each credit directly under its own quote */
.camps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:1rem 1.6rem;max-width:62rem}
.camp{margin:0;padding:.1rem 0 .1rem 1rem;border-left:3px solid var(--lapis);display:grid;gap:.35rem;align-content:start}
.camp-n{font:500 .78rem var(--f-data);letter-spacing:.06em;text-transform:uppercase;color:var(--lapis)}
.camp blockquote{margin:0}
.camp p{margin:0}

/* R2-ACC-2: the keyboard focus ring on a painting button is drawn above the image (a double ring: white, then dark) */
.art-open:focus-visible{outline:none}
.art-open:focus-visible::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 7px #1b2130}
.art-zoom{z-index:4}
.art-open:focus-visible .art-zoom span{display:inline}

/* R2-LAY-7: the full-size viewer. Solid backdrop. On a phone held upright the painting fills the height and pans sideways. */
.lb{background:#090b0f}
.lb::backdrop{background:#090b0f}
.lb[open]{grid-template-columns:minmax(0,1fr)}
.lb-stage{min-width:0;overflow:hidden}
.lb-pan{width:100%;height:100%;display:flex}
.lb-pan img{margin:0 auto;flex:none}
.lb-hint{display:none;margin:0;font-size:.84rem;color:#c3cad5}
@media (max-width:699px) and (orientation:portrait){
  .lb-pan{overflow-x:auto;overflow-y:hidden;touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch}
  .lb-pan img{width:auto;height:100%;max-width:none;object-fit:contain}
  .lb-hint{display:block}
}

/* R2-VIS-9: the gallery's rail layout (caption and small pictures beside the painting) from 1100px, and the stage fills the width */
@media (min-width:1100px) and (max-width:1499px){
  .gv{grid-template-columns:minmax(0,1fr) 20rem;grid-template-rows:auto 1fr;gap:1.1rem 1.4rem;align-items:start}
  .gv-stage{grid-row:1 / span 2;max-height:calc(100vh - var(--hdr,3rem) - 11rem)}
  .gv-meta{grid-template-columns:minmax(0,1fr);min-height:0} .gv-meta .btn{justify-self:start}
  .gv-thumbs{grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem}
}
@media (min-width:1300px){ #view-gallery .gv{margin-inline:calc((100% - min(100vw - 64px, 2300px)) / 2)} }
.gv-stage{background:transparent;border-color:transparent}
.gv-stage:has(.is-missing){background:color-mix(in srgb,var(--ink) 6%,var(--paper));border-color:var(--rule)}

/* R2-ACC-9: with text enlarged to 200% the two-column split must not push the painting off the right edge */
@media (min-width:1280px){ .split{grid-template-columns:minmax(0,min(34rem,56%)) minmax(0,1fr)} }
/* ===== end p2/r2-timeline ===== */
/* R2-VIS-4 (cont.): during the tour the painting takes whatever the text box does not need; the text box has one fixed height */
@media (min-width:1280px){
  .tl-box .story.touring .st-art{flex:1 1 auto;min-height:0}
  .tl-box .story.touring .st-art .art-box{height:100%;aspect-ratio:auto;min-height:11rem}
  .tl-box .story.touring .st-text{flex:none;height:19rem}
  .tl-box .story.touring .st-body{flex:none}
}
/* R2-VIS-4 (cont.): the Readings case painting: a clear gap under "How the works were counted", a little larger on large screens */
.rx-panel figure.case-art{margin-top:1.1rem}
@media (min-width:1280px){ .rx-panel figure.case-art{width:min(50%,40rem)} .rx-panel figure.case-art.art-missing{width:min(42%,30rem)} }
/* ===== end p2/r2-timeline (readings case) ===== */
/* R2-ACC-9: a "For scholars" summary may wrap onto a second line when text is enlarged on a phone */
@media (max-width:699px){ details.sch-x > summary{flex-wrap:wrap} details.sch-x > summary > span:last-child{flex:1 1 8rem;min-width:0} }

/* ================= Weigh the evidence, phase 2 round 2 (branch p2/r2-evidence) =================
   Our conclusion, How we weighed it, Your weighing. Each rule names the finding it fixes. */

/* --- the study's codes (C1–C8, D1–D5, R1–R4) beside the plain names, as on Readings tested (R2-SCH-8) --- */
.ctag{display:inline-block;font:500 max(13px,.78rem)/1.35 var(--f-data);letter-spacing:.02em;text-transform:none;color:var(--muted);border:1px solid var(--rule);border-radius:2px;padding:0 .3rem;margin-right:.4rem;vertical-align:.08em;white-space:nowrap}
h3 .ctag{margin:0 0 0 .4rem}
.evl-code{font:500 max(13px,.78rem) var(--f-data);letter-spacing:.04em;color:var(--muted)}
.follow-tbl thead th .ctag{display:inline-block;margin-bottom:.15rem}

/* --- "Our conclusion": the main alternative is body text with its own heading (R2-SCH-3) --- */
.ans-alt{display:grid;gap:.4rem;max-width:68ch;padding-top:.9rem;border-top:1px solid var(--rule)}
.ans-alt p{font-size:1rem;line-height:1.55;color:var(--ink)}

/* --- "Our conclusion": each clause's text starts level with the top of its painting (R2-VIS-7) --- */
.answer .clause{align-items:start}
.answer .clause-text{align-content:start}

/* --- "How we weighed it": the weight column fits "MODERATE" (R2-VIS-12) --- */
.evl{grid-template-columns:5.8rem minmax(0,1fr)}
.evl-word{letter-spacing:.03em}

/* --- the D3 grade's second half (R2-SCH-12) --- */
.follow-tbl .gnote{display:block;font:400 .84rem/1.4 var(--f-body);color:var(--muted);margin-top:.2rem}
.wr-gnote{color:var(--muted)}

/* --- "Your weighing": the caveat that percentages are not grades is always visible (R2-SCH-1) --- */
.wt-caveat{font-size:.92rem;line-height:1.5;color:var(--ink);border-left:3px solid var(--ochre);padding:.15rem 0 .15rem .7rem;margin:-.2rem 0 .2rem;max-width:62ch}
.wt-caveat b{font-weight:600}
#your-weighing > .wt-caveat{margin:0 0 1.1rem;max-width:72ch}

/* --- "Your weighing": the tick numbers sit below the slider thumb, not behind it (R2-VIS-13) --- */
.wsl-ticks{margin-top:.15rem;margin-bottom:.3rem}

/* --- wide tables (R2-ACC-3): a visible hint while a table scrolls sideways (js/weigh.js adds role, name and tabindex);
       on phones the two "heavy lines" tables stack into one card per reading, so "Our grade" is never cut off --- */
.tbl-hint{font-size:.86rem;color:var(--muted);margin:0 0 .3rem}
.tbl-hint[hidden]{display:none}
.tbl[data-scroll]:focus-visible{outline:2px solid var(--lapis);outline-offset:2px}
@media (max-width:599px){
  .tbl-stack table,.tbl-stack tbody,.tbl-stack tr,.tbl-stack th,.tbl-stack td,.tbl-stack caption{display:block;width:auto}
  .tbl-stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tbl-stack tr{background:var(--panel);border:1px solid var(--rule);border-radius:4px;padding:.55rem .8rem;margin-bottom:.6rem}
  .tbl-stack th[scope="row"]{border:0;padding:0 0 .35rem}
  .tbl-stack td{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.2rem .8rem;align-items:center;border:0;border-top:1px solid var(--rule);padding:.4rem 0}
  .tbl-stack td::before{content:attr(data-label);font:400 .86rem/1.35 var(--f-body);color:var(--muted)}
  .tbl-stack td.grade{min-width:0;text-align:right}
  .tbl-stack td.grade::before{text-align:left}
  .tbl-stack td.grade .gnote{grid-column:1/-1;text-align:left}
}
/* ===== end p2/r2-evidence ===== */

/* ===== Phase 2, fix round 2, Readings tested and its weighing (branch p2/r2-readings). Added as one block. =====
   R2-LAY-9 / R2-VIS-5: one sans lead (class .vlead, as on the other tabs); the jump link sits on the clause-switch line.
   R2-LAY-15: the case painting no longer touches the "For scholars" bar above it.
   R2-VIS-20: the eight-test strip uses eight columns only when each cell has room for "Adequate" with its padding.
   R2-LAY-14: one line under the argument key says where the study's own reviews are told.
   R2-DEV-3: who holds each combined position, and why, is named on its toggle. */
.rx-bar .rx-jump{margin:0}
.rx-bar .rx-jump .linkbtn{font-size:1rem;font-weight:500;text-align:left}
@media (min-width:900px){ .rx-bar .rx-jump{margin-left:auto} }
.rx-panel figure.case-art{margin-top:1rem}
@media (max-width:640px){ .rx-panel figure.case-art{margin-top:.8rem} }
.rx-tests{container-type:inline-size}
.rx-strip{grid-template-columns:repeat(4,minmax(0,1fr))}
@container (min-width:47rem){ .rx-strip{grid-template-columns:repeat(8,minmax(0,1fr))} }
@container (max-width:22rem){ .rx-strip{grid-template-columns:repeat(2,minmax(0,1fr))} }
.tcell{padding:.5rem .7rem}
.argkey .k-note{grid-column:1/-1;font-size:.86rem;color:var(--muted)}
details.rx-cnote > summary{font-size:.92rem}
/* R2-LAY-11 ("How we weighed it"): the weight word fits its column; title case, no letter-spacing */
.evl{grid-template-columns:5.3rem minmax(0,1fr)}
.evl-word{text-transform:none;letter-spacing:0;font-size:.84rem}
/* R2-LAY-2 / R2-LAY-10 ("Your weighing"): a compact ranking that fits beside the sliders at laptop height, with the
   score's unit stated once above the rows, "1st / tied" in place of "1= level", and a "More below" cue if it still overflows */
.wt-rank{gap:.6rem;padding:.85rem 1rem}
.wr-hd{display:grid;gap:.15rem}
.wr-unit{margin:0;font-size:.84rem;line-height:1.4;color:var(--muted)}
.wr{padding:.4rem 0;gap:.6rem}
.wr-main{gap:.2rem}
.wr-head{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem}
.wr-head .wr-pct{flex:none;min-width:3rem}
.wr-track{height:.55rem}
.wr-rank{font-size:1.05rem}
.wr.lvg .wr-lv{display:block}
.wr-tie{margin:.15rem 0 0;font-size:.84rem;line-height:1.4;color:var(--ink)}
details.wr-why > summary{min-height:28px}
.wt-notes{gap:.5rem}
details.wt-about > summary{min-height:36px}
.wt-more{position:sticky;bottom:-.85rem;margin:-1.4rem -1rem -.85rem;padding:1.4rem 1rem .5rem;border:0;cursor:pointer;
  background:linear-gradient(to bottom,color-mix(in srgb,var(--panel) 0%,transparent),var(--panel) 55%);font:600 .9rem var(--f-body);color:var(--lapis);text-align:center}
.wt-more:hover{text-decoration:underline}
/* R2-ACC-4: a weight button at its limit stays focusable (aria-disabled), and looks disabled */
.wsl-btn[aria-disabled="true"]{opacity:.35;cursor:default}
.wsl-btn[aria-disabled="true"]:hover{border-color:var(--muted)}
/* ===== end p2/r2-readings ===== */
/* ===== p2/r2-readings, continued: the ranking's heading carries the state; "Can't pass" on each row ===== */
.wt-state h4.wt-status{flex:1 1 13rem;margin:0;display:flex;align-items:baseline;gap:.45rem}
.wt-state h4.wt-status #wt-status{display:inline-flex;align-items:center;gap:.45rem}
.wt-state h4.wt-status .dot{flex:none}
.wt-chg{font-weight:400;font-size:.88rem;color:var(--muted);white-space:nowrap}
.wr-cant{margin:0;font-size:.84rem;line-height:1.4;color:var(--muted)}
.wt-rank > .wr-unit{margin-top:-.25rem}
.wr{padding:.3rem 0}
.wr-main{gap:.15rem}
.wr-track{height:.4rem}
details.wr-why > summary{min-height:24px}
.wr-meta{line-height:1.35}
#your-weighing > details.wt-about{margin-top:1.4rem;max-width:72ch}
/* ===== end p2/r2-readings (continued) ===== */

/* ================= shell fixes, phase 2 round 3 (branch p2/r3-shell) =================
   Navigation, The question, global styles, Sources & method, The word, Bibles. One block, at the end of the file. */

/* --- a Hebrew word's note, scrolled into view, keeps a little room under it (R3-LAY-1) --- */
.wordnote{scroll-margin-bottom:1.2rem}

/* --- the "Open every For scholars note" switch: in the page header and at the foot of the phone Sections menu (R3-DEV-2) --- */
.site-aside{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:flex-end;gap:.2rem 1.6rem}
.site-aside .sch-all-btn{min-height:0;padding:.1rem 0;font-size:.9rem}
@media (pointer:coarse),(max-width:820px){ .site-aside .sch-all-btn{min-height:44px} }
.sheet-foot{margin:1.2rem 0 0;padding-top:.6rem;border-top:1px solid var(--rule)}
@media print{ .sch-note,.site-aside{display:none!important} }

/* --- once scrolled, a row under the tab bar names the site, the section and its sub-tab (R3-LAY-4); it hangs below
       the bar, so showing it never moves the page. Phones have the same information in their own bar. --- */
.ctx{display:none}
@media (min-width:760px){
  .is-scrolled:not(.nav-compact) .ctx{display:block;position:absolute;left:0;right:0;top:100%;background:var(--panel);border-bottom:1px solid var(--rule);
    padding-inline:max(16px,env(safe-area-inset-left,0px))}
  .ctx-in{max-width:var(--wrap,1180px);margin:0 auto;padding:.3rem 0 .35rem;font-size:.88rem;line-height:1.35;color:var(--muted);display:flex;flex-wrap:wrap;align-items:baseline;gap:.1rem .9rem}
  .ctx-in .cx-site{font-family:var(--f-display);font-size:.98rem;color:var(--ink)}
  .ctx-in .cx-path b{color:var(--ink);font-weight:600}
  .ctx-in .cx-path i{font-style:normal;margin:0 .1rem}
}
/* from 1500px the tab bar carries the site name itself */
@media (min-width:1500px){ .ctx-in .cx-site{display:none} }
/* iPad widths: the tab's description alone under the tab bar (its name is in the bar and the heading) */
@media (min-width:760px) and (max-width:1279px){ .cur-desc{margin:-.5rem 0 1rem;font-size:.9rem} }

/* --- a large text setting on a phone: the section name takes its own row instead of squeezing to a column, and a bar
       that would still fill the screen is not stuck to the top (R3-ACC-1). js/core.js sets bar-big (text 130% or more
       while the phone bar shows) and bar-static (bar over a quarter of the screen). --- */
.bar-big .tabs-in{flex-wrap:wrap;row-gap:0}
.bar-big .mobilebar{display:contents}
.bar-big .mark{order:1;flex:0 1 auto}
.bar-big #open-sheet{order:2;margin-left:auto}
.bar-big .mobilebar .cur{order:3;flex:1 1 100%;text-align:left;padding:0 0 .35rem;overflow-wrap:anywhere}
.bar-static .tabs{position:static}
.bar-static{scroll-padding-top:0}
/* tables that become cards on a phone: their hidden header row is a block, so its wide cells are clipped and cannot
   widen the page, and a long word in a cell wraps instead of pushing the card wider (R3-ACC-1) */
@media (max-width:700px){
  .stk thead{display:block}
  .stk td,.stk td.yr{white-space:normal;overflow-wrap:anywhere;grid-template-columns:minmax(min(5.5rem,38%),34%) minmax(0,1fr)}
}

/* --- global: one measure for a tab's title, so titles stay on one line on wide screens (R3-VIS-8). The running text
       under a title keeps its own reading measure. --- */
@media (min-width:1100px){
  .view .stack.col:has(> h2),.view .view-head:has(> h2){max-width:min(100%,1100px)}
  .view .stack.col:has(> h2) > :not(h2),.view .view-head:has(> h2) > :not(h2){max-width:62ch}
}

/* --- The question: the how-to-use map is four cards across on wide screens (two rows of four), two on a tablet, and
       each card is as tall as its own content (R3-VIS-9) --- */

/* --- The word › Three uses: the painting is a feature on wide screens, with its sentence beside it (R3-VIS-5) --- */
@media (min-width:1280px){
  .uses-share{grid-template-columns:minmax(0,min(54%,60rem)) minmax(0,1fr);gap:3rem}
  .uses-share > p{font-size:1.2rem;line-height:1.55;max-width:34ch}
}

/* --- The word › Linked verses: air above and below the toggle, so it no longer sits tight against the paragraph and the
       axis (R3-VIS-12) --- */
#view-word .st-panel[data-sub="threads"] .seg,#view-word .st-panel[data-sub="threads"] .seg-slot{margin-block:.9rem 1rem}

/* --- The word › Is the text secure?: "Highlight turning" keeps every witness readable and marks the "turning" ones
       with a tint, a bar and bold type; a pressed toggle button looks pressed (R3-ACC-5) --- */
.tree.hl .node:not(.turn){opacity:1}
.tree.hl .node.turn{background:color-mix(in srgb,var(--lapis) 14%,var(--panel));box-shadow:inset 3px 0 0 var(--lapis);padding:.25rem .4rem .25rem .5rem;margin-block:-.1rem;border-radius:2px}
.tree.hl .node.turn .nm{font-weight:700}
.btn[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* --- Bibles: the frame for the painting to come fills its column from 1280px, and stays beside the list (R3-VIS-13) --- */
@media (min-width:1280px){ #view-bibles .split-art.art-missing{max-width:none} }

/* --- print: "Print this section" on Weigh the evidence carries all three parts, each starting a page (R3-DEV-1);
       the Timeline's heading is not left alone on a page by its chart, which may now break across pages --- */
@media print{
  html.print-subs .view.on .st-panel:not(.on){display:flex!important;position:static!important;width:auto!important;height:auto!important;content-visibility:visible!important}
  html.print-subs .view.on .st-panel + .st-panel{break-before:page}
  .tl-box{break-inside:auto}
}
/* ===== end of shell fixes, phase 2 round 3 ===== */

/* ===== Phase 2, fix round 3, Timeline / Traditions / Gallery (branch p2/r3-timeline) ===== */
/* R3-VIS-2: on iPad widths the chart comes before the tour card, which is a slim banner until the tour starts; the tradition and
   era chips sit under the chart (they are its legend and its zoom buttons); the duplicate "Timeline" labels are dropped */
@media (min-width:700px) and (max-width:1279px){
  .tl-box{display:flex;flex-direction:column}
  .tl-box > .st-slot{order:1}
  .tl-box > .tl-scroll{order:2}
  .tl-box > #trad{order:3;border-top:1px solid var(--rule);border-bottom:0}
  .tl-box > #eras{order:4}
  .tl-box > .tl-key{order:5}
  .tl-box > .hint{order:6}
  #view-timeline .tl-head .eyebrow{display:none}
  main:has(#view-timeline.on) .cur-desc{display:none}
  /* the idle tour card: painting at the left, one title, one line of text and the button, in one row */
  .story:not(.touring){grid-template-columns:8.5rem minmax(0,1fr);min-height:0;height:auto}
  .story:not(.touring) .st-art,.story:not(.touring) .st-art .art-box{height:100%;min-height:5.5rem}
  .story:not(.touring) .st-body{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:1rem;padding:.6rem 1rem}
  .story:not(.touring) .st-text{max-height:none}
  .story:not(.touring) h3{font-size:1.2rem}
  .story:not(.touring) p{font-size:.9rem;margin-top:.15rem;line-height:1.45}
  .story:not(.touring) .ctrls{align-self:center}
}
/* R3-VIS-4: the tour's painting is the larger share of the panel: a wider left column, and the text box only as tall as the longest stop */
@media (min-width:1280px){
  .tl-box{grid-template-columns:clamp(20rem,37%,42rem) minmax(0,1fr)}
  .tl-box .story.touring .st-text{flex:none;height:var(--st-text-h,19rem)}
}
/* R3-VIS-3 / R3-VIS-11: the band is drawn as a lighter tint with hairline gaps, so a reading's colour there is not mistaken for a
   tradition's colour on a dot; the band has its own name; era names have a halo so a dotted era line never cuts through one */
#tl path.band-p{fill-opacity:.62;stroke:var(--panel);stroke-width:.9px}
.tl-key .sw{opacity:.62}
#tl .era-lab{paint-order:stroke;stroke:var(--panel);stroke-width:4px;stroke-linejoin:round}
#tl .band-lab{font-weight:400}
/* R3-ACC-4: a cell reached by Tab is never left under the sticky row names */
#view-traditions .gridwrap{scroll-padding-left:12.5rem;scroll-padding-right:3rem}
@media (max-width:699px){ #view-traditions .gridwrap{scroll-padding-left:7.2rem;scroll-padding-right:3rem} }
/* R3-VIS-7: the Gallery's heading sits on the stage's left edge, the lead under the title as on every other tab, even rows of small
   pictures, and a larger label on an empty frame */
@media (min-width:1100px){
  #view-gallery > .stack.col{display:flex;flex-direction:column;gap:.6rem;align-items:flex-start;justify-content:flex-start;column-gap:0}
  #view-gallery > .stack.col > .vlead{max-width:46rem}
}
@media (min-width:1300px) and (max-width:1499px){ #view-gallery .gv{margin-inline:0} }
@media (min-width:1500px){ #view-gallery > .stack.col{margin-inline:calc((100% - min(100vw - 64px, 2300px)) / 2)} }
.gv-thumbs{grid-auto-rows:1fr}
.gv-thumbs button{align-content:start;height:100%}
.gv-frame .art-ph b{font-size:clamp(1.8rem,4.2cqi,3.6rem)}
.gv-frame .ph-eb{font-size:clamp(.85rem,1.4cqi,1.1rem)}
/* R3-ACC-7: on a phone held upright the painting pans sideways; the pan area can be focused and moved with Shift plus the arrow keys */
.lb-pan:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.lb-hint-k{display:none}
@media (hover:hover){ .lb-hint-k{display:inline} }
/* ===== end p2/r3-timeline ===== */

/* ===== Phase 2, fix round 3, Weigh the evidence (branch p2/r3-evidence). Added as one block; overrides the rules above. =====
   R3-LAY-6: on wide screens each clause's text sits level with the middle of its painting, in a larger size, so no
   empty column is left beside the painting on a large monitor.
   R3-SCH-9: "5 on the sliders" under each line's weight word.
   R3-SCH-3: the C1 note under the desire table.
   R3-LAY-3: slider names as on Readings tested, the plain description under them, and a row of jump links.
   R3-ACC-11: on touch and phone widths the ranking's "Its grades", "How the scores work" and the pinned Reset are 44px tall.
   R3-ACC-12: focus inside the scrolling ranking panel stops clear of the "More below" cue. */
@media (min-width:900px){
  .answer .clause{align-items:center}
  .answer .clause-text{align-content:center}
}
@media (min-width:1280px){ .answer .clause-text p{font-size:1.12rem;line-height:1.6} }
@media (min-width:1900px){ .answer .clause-text p{font-size:1.2rem} }
.evl-w{gap:.15rem}
.evl-sl{font:400 max(13px,.72rem)/1.2 var(--f-body);color:var(--muted);text-align:center}
.c1-note{border-left:2px solid var(--ochre);padding-left:.6rem;color:var(--ink)}
.c1-note .ctag{margin-right:.4rem}
.wsl-top label{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:0;align-items:baseline}
.wsl-top label .ctag{grid-row:1;grid-column:1}
.wsl-name{grid-row:1;grid-column:2;font-weight:600}
.wsl-sub{grid-row:2;grid-column:1/-1;font-weight:400;font-size:.88rem;line-height:1.4;color:var(--muted);margin-top:.1rem}
.wt-jump{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:0 0 .9rem}
.wt-jump-l{font-size:.88rem;color:var(--muted);margin-right:.2rem}
.wt-jump a{display:inline-flex;align-items:center;gap:.3rem;min-height:36px;padding:.2rem .6rem;border:1px solid var(--rule);border-radius:4px;
  background:var(--panel);color:var(--ink);font-size:.88rem;text-decoration:none;white-space:nowrap}
.wt-jump a:hover{border-color:var(--ink)}
.wt-jump a:focus-visible{outline:2px solid var(--lapis);outline-offset:2px}
.wj-id{font:500 max(13px,.78rem) var(--f-data);color:var(--muted)}
.wsl,.wt-rank{scroll-margin-top:.8rem}
@media (min-width:760px){ .wt-jump .wj-rank{display:none} }
@media (max-width:759px){ .wsl,.wt-rank{scroll-margin-top:5rem} }
@media (pointer:coarse),(max-width:820px){
  .wt-jump a{min-height:44px}
  details.wr-why > summary,details.wt-about > summary{min-height:44px}
  .wt-pin .btn{min-height:44px}
}
.wt-rank{scroll-padding-bottom:3rem}
/* ===== end p2/r3-evidence ===== */

/* ===== Phase 2, fix round 3, Readings tested and its weighing (branch p2/r3-readings). Added as one block. =====
   R3-LAY-2: under the thesis, one line names what the case holds and jumps to it; the case follows at once, and the
   defenders close it. R3-ACC-3: a reading tab keeps clear of the sticky header when scrolled into view.
   R3-DAT-2: the grade chips carry "upper end" / "best form" and do not break inside.
   R3-SCH-1: the amendments of 18 Oct 2026 under "The eight tests, and how grades are given". */
.rx-go{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 1.1rem;margin-top:.6rem}
.rx-go-l{font:500 .84rem var(--f-data);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.rx-go .linkbtn{font-size:.95rem;font-weight:500;text-align:left;min-height:44px}
.rx-panel .rx-sub[tabindex="-1"]:focus{outline:none}
.rx-panel .rx-sub[tabindex="-1"]:focus-visible{outline:2px solid var(--lapis);outline-offset:3px}
.rx-args .rx-defs{margin-top:1rem;padding-top:.8rem;border-top:1px dashed var(--rule)}
.rx-btn{scroll-margin-top:calc(var(--hdr,3rem) + 12px);scroll-margin-bottom:12px}
.rx-btn .ov{white-space:nowrap}
ul.rx-amend{margin:.3rem 0 0;padding-left:1.2rem;display:grid;gap:.3rem}
/* R3-VIS-1 ("Your weighing"): js/weigh.js moves the sub-tab's title, lead and caveat into .wt-intro-r3, the tool's first
   cell, so the sticky ranking starts beside the title instead of under it */
.wt-tool{grid-template-areas:"in" "sl" "rk"}
@media (min-width:760px){ .wt-tool{grid-template-areas:"in in" "sl rk";grid-template-rows:auto 1fr} }
@media (min-width:1100px){ .wt-tool{grid-template-areas:"in rk" "sl rk"} }
.wt-intro-r3{gap:1rem}
.wt-intro-r3 > .wt-head{margin:0}
.wt-intro-r3 > .wt-caveat{margin:0;display:block;max-width:80ch}
.wt-intro-r3 .vlead{max-width:76ch}
/* R3-VIS-15 ("Our conclusion"): the two expanders under the conclusion card share one look (the boxed "+" bar of the
   "For scholars" notes) and the card's full width; their text keeps a readable line length */
.st-panel[data-sub="conclusion"] > details{max-width:none}
.st-panel[data-sub="conclusion"] > details:not(.sch-x){border:1px solid var(--rule);border-left:3px solid var(--lapis);border-radius:3px;background:var(--panel);padding:0}
.st-panel[data-sub="conclusion"] > details:not(.sch-x) > summary{list-style:none;padding:.6rem .9rem;min-height:44px;display:flex;gap:.6rem;align-items:center;font-size:1rem;font-weight:600}
.st-panel[data-sub="conclusion"] > details:not(.sch-x) > summary::-webkit-details-marker{display:none}
.st-panel[data-sub="conclusion"] > details:not(.sch-x) > summary::before{content:"+";font:500 1.1rem/1 var(--f-data);color:var(--lapis);width:1rem;flex:none}
.st-panel[data-sub="conclusion"] > details:not(.sch-x)[open] > summary::before{content:"–"}
.st-panel[data-sub="conclusion"] > details:not(.sch-x) > div{margin:0!important;padding:0 .9rem .9rem 2.5rem;max-width:calc(72ch + 3.4rem)}
.st-panel[data-sub="conclusion"] > details.sch-x > .sch-body{max-width:calc(72ch + 3.4rem)}
/* R3-VIS-15: every "How sure are we?" row has the same label column, so the statements line up down both columns */
@media (min-width:481px){ .st-panel[data-sub="conclusion"] .sure-list li{grid-template-columns:12rem minmax(0,1fr)} }
/* ===== end p2/r3-readings ===== */
/* Closing check C-1 (text at 175-200% on a phone, or 320px wide): boxes shrink and labels wrap, so nothing pushes the
   page sideways. Grid tracks drop their min-content floor; badges, the reset button and percentage rows may wrap. */
.answer,.sure,.combos li{grid-template-columns:minmax(0,1fr)}
.answer > *,.sure > *,.combos li > *{min-width:0}
.wr-head{flex-wrap:wrap}
.wr-head .wr-name{min-width:0;flex:1 1 9rem}
@media (min-width:760px) and (max-width:1279px){ .uses-share{grid-template-columns:minmax(0,min(24rem,45%)) minmax(0,1fr)} }
@media (max-width:480px){
  .ov,.rx-btn .ov,.wt-state .wt-reset,.lvl{white-space:normal}
  .follow-tbl .grade,.alt-tbl .grade{min-width:min(8rem,30vw)}
}

/* Decision 4 (30 Oct): the main objection box near the top of a case, and its twin in the list of arguments */
.rx-main{margin:1rem 0 1.2rem;display:grid;gap:.5rem}
.rx-main .arg{display:grid;gap:.5rem}
.rx-main .rx-sub{margin:0}
.rx-panel .arg.is-main .obj .k-lab{font-weight:600}
/* Decision 8: the name table on Sources & method, and the study's full name under a case title */
.names-tbl table{width:100%;border-collapse:collapse} .names-tbl th,.names-tbl td{text-align:left;padding:.3rem .5rem;border-bottom:1px solid var(--rule);vertical-align:top}
.names-tbl td:first-child{font-family:var(--f-data);white-space:nowrap}
@media (max-width:600px){ .names-tbl table,.names-tbl tbody,.names-tbl tr,.names-tbl td{display:block} .names-tbl thead{display:none} .names-tbl tr{padding:.4rem 0;border-bottom:1px solid var(--rule)} .names-tbl td{border:0;padding:.05rem 0} .names-tbl td:nth-child(3)::before{content:"Timeline rows: "} .names-tbl td:nth-child(4)::before{content:"Full name: "} }
.rx-full{margin:-.2rem 0 .6rem;font-size:.88rem}
/* large text on a phone: How we weighed it's line cards stack, so "Asks" and "Shows" never push past the screen */
@media (max-width:480px){ .evl{grid-template-columns:minmax(0,1fr)} .evl-w{display:flex;flex-wrap:wrap;border-right:0;padding-right:0;gap:.5rem;align-items:baseline} .evl-body p{grid-template-columns:minmax(0,1fr);gap:.1rem} }

/* 30 Oct: "How to use this site" is one numbered path, top to bottom, with a line joining the steps */
.steps{list-style:none;margin:.4rem 0 0;padding:0;max-width:52rem;display:grid}
.steps > li{display:grid;grid-template-columns:2.2rem minmax(0,1fr);gap:0 1rem;position:relative;padding-bottom:1.1rem}
.steps > li:not(:last-child)::before{content:"";position:absolute;left:1.1rem;top:2.2rem;bottom:.2rem;width:2px;background:color-mix(in srgb,var(--lapis) 45%,transparent);transform:translateX(-1px)}
.step-n{width:2.2rem;height:2.2rem;border-radius:50%;display:grid;place-items:center;font:600 .95rem var(--f-data);color:var(--lapis);border:2px solid var(--lapis);background:var(--paper)}
.step-b{padding-top:.3rem;display:grid;gap:.25rem;min-width:0}
.step-t{font-weight:600;font-size:1.08rem;color:var(--ink);text-decoration:none;justify-self:start}
.step-t:hover{text-decoration:underline}
.step-b p{margin:0;max-width:62ch}
.step-parts{font-size:.88rem;color:var(--muted)}
.step-parts a{color:var(--lapis)}
.step-go .btn{justify-self:start}
.step-go .btn{text-decoration:none;font-size:.9rem;min-height:44px;display:inline-flex;align-items:center;padding:.5rem 1rem;white-space:normal}
/* 30 Oct: "Whose grades?" on Your weighing: our grades, or the grades one of the two reviewers asked for */
.wt-lens{margin:0 0 1.4rem;padding:0 0 1.2rem;border-bottom:1px solid var(--rule)}
.wt-lens-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--ink);border-radius:4px;overflow:hidden}
.wt-lens-seg button{font:500 .88rem/1.25 var(--f-body);background:transparent;color:var(--ink);border:0;padding:.45rem .5rem;min-height:44px;cursor:pointer}
.wt-lens-seg button + button{border-left:1px solid var(--ink)}
.wt-lens-seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper);font-weight:600}
@media (max-width:480px){ .wt-lens-seg{grid-template-columns:minmax(0,1fr)} .wt-lens-seg button + button{border-left:0;border-top:1px solid var(--ink)} }
.wt-lens-note{margin:.6rem 0 0;max-width:62ch}
.wt-try-p{margin:.5rem 0 0} .wt-try{text-align:left}
.gw.lens{outline:2px dashed currentColor;outline-offset:1px}
.wt-choice{margin:0 0 1.4rem;padding:0 0 1.2rem;border-bottom:1px solid var(--rule)}
.wsl-pick{margin:.4rem 0 0;font-size:.86rem;font-weight:600;color:var(--lapis)}
/* Genesis 4:7 sub-tab (30 Oct) */
@media (min-width:701px){ .c47-tbl td:first-child{white-space:nowrap} } .c47-tbl td{vertical-align:top}
.st-panel[data-sub="cain"] .btn{white-space:normal;display:inline-block;text-decoration:none;font-size:.9rem;padding:.55rem 1rem;min-height:44px}
.c47-uses{list-style:none;padding:0;display:grid;gap:.3rem;margin:.4rem 0}
.c47-uses b{display:inline-block;min-width:2.2rem;font-family:var(--f-data);color:var(--lapis)}
/* Paintings keep their shape (4 Nov 2026). Every painting is 16:9; a frame of another shape cropped it (the tour's
   painting showed 35-43% of itself in a tall window or on a phone, the Word card 75%, the Sources band about 69%).
   Frames are now 16:9 and the layout around them gives way instead: the text box takes the spare height. */
.st-art .art-box,.tl-box .story .st-art .art-box{height:auto;min-height:0;aspect-ratio:16/9}
/* large screens: the painting at the top of the panel, then the text box (as tall as the longest stop's text, so Back
   and Next stay put between stops) and the buttons; in a tall window the spare height falls below them */
@media (min-width:1280px){
  .tl-box .story .st-art,.tl-box .story.touring .st-art,.tl-box .story:not(.touring) .st-art{flex:none;min-height:0}
  .tl-box .story.touring .st-art .art-box,.tl-box .story:not(.touring) .st-art .art-box{height:auto;min-height:0;aspect-ratio:16/9}
  .tl-box .story.touring .st-body,.tl-box .story:not(.touring) .st-body{flex:0 1 auto;min-height:0}
  .tl-box .story.touring .st-text{flex:0 1 auto;height:var(--st-text-h,19rem);min-height:6rem}
}
/* tablets and small laptops: the painting column is as wide as a 16:9 painting of the panel's height (19rem), or half
   the panel; a narrower painting sits centred in its column on the panel's colour */
@media (min-width:700px) and (max-width:1279px){
  .story.touring{grid-template-columns:min(33.75rem,50%) minmax(0,1fr)}
  .story.touring .st-art{height:auto;align-self:center}
  .story:not(.touring) .st-art{height:auto;align-self:center}
  .story:not(.touring) .st-art .art-box{height:auto;min-height:0}
}
/* phones: a small whole painting beside the stop number (tap it for the full painting), instead of a thin strip
   across the panel; the chart, the text and the buttons still fit on one screen */
@media (max-width:699px){
  .story{display:grid;grid-template-columns:8.5rem minmax(0,1fr);column-gap:.8rem;padding:.75rem 1rem 1rem}
  .story > .st-body{display:contents}
  .story .st-art{grid-column:1;grid-row:1;align-self:center}
  .story .st-top{grid-column:2;grid-row:1;align-self:center}
  .story .st-text{grid-column:1 / -1;grid-row:2;margin-top:.6rem}
  .story .ctrls{grid-column:1 / -1;grid-row:3;margin-top:.6rem}
  .story .st-art .art-box{border-radius:3px}
  .story .st-top{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;row-gap:.15rem}
  .story .st-top .st-exit{grid-column:1;grid-row:3;justify-self:start;margin-left:0;min-height:32px;padding:.2rem 0}
  .story .st-top .st-clause{grid-row:2;white-space:normal;max-width:100%;line-height:1.3}
  .story .art-zoom{right:.25rem;bottom:.25rem;padding:.2rem .3rem}
}
/* the Word page card and the Sources closing band: 16:9 like the paintings (they were 4:3 and a fixed-height band) */
.art-card .art-box{aspect-ratio:16/9}
.art-band{max-width:min(100%,64rem);margin-inline:auto}
.art-band .art-box{height:auto;aspect-ratio:16/9}
/* English for quotations in other languages (4 Nov 2026): under the original, in the reader's own type, with its credit */
.q-en{margin:.45rem 0 0;font-size:.92rem;line-height:1.5;color:var(--ink)}
.q-en-l{display:block;font:500 .72rem var(--f-data);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:.1rem}
.q-en-by{color:var(--muted);font-size:.85em;white-space:nowrap}
.src-q.q-en{font-size:.86rem;color:var(--ink);margin-top:.35rem}
/* phones: era names in a smaller type (with short forms in timeline.js), so all seven fit above the chart (4 Nov 2026) */
@media (max-width:699px){ #tl .era-lab{font-size:11px;letter-spacing:.03em} }