/* site.css — Teclam Áirme's one stylesheet (V46). Generated once, 22 September 2026, by
 * workflow/work/patches/v46_onepage_0922.py from the six pages' <style> blocks; edited in
 * place from now on. Bump the ?v= stamp in index.html when you change it. */

/* ===== the book's stylesheet, which every page shared */
:root{--ink:#1e2229;--muted:#5d6570;--bg:#faf8f3;--card:#ffffff;--line:#d9d4c7;--accent:#6b4c3b;--rose:#b23a5b;
 --int:#e6ecf5;--alg:#e1f2e4;--tr:#fff0cf;--open:#fde1dc;--unc:#ebe2f8;--undef:#fbd9e6;--obj:#d9f2ef;--inf:#e4e4ea;--fn:#f1f0e4;
 --pdef:#dcecff;--pmeas:#ffe6d2;--pder:#e7f6d8;
 --b0:#f7e9ee;--b1:#f4ece0;--b2:#e9f0f8;--b3:#f3efe4;--b4:#e9f3ea;--b5:#efe9f6;--b6:#e6f3f3;--b7:#ecebf2;--b8:#f2e9e2;
 --b0a:#a8405f;--b1a:#7a5a1e;--b2a:#3b5f8f;--b3a:#8a6a2c;--b4a:#3f7a4a;--b5a:#6a4a8f;--b6a:#2f7c7c;--b7a:#55557a;--b8a:#8a4a2c;--acc:var(--accent);}
.bd-0{--acc:var(--b0a)}.bd-1{--acc:var(--b1a)}.bd-2{--acc:var(--b2a)}.bd-3{--acc:var(--b3a)}.bd-4{--acc:var(--b4a)}.bd-5{--acc:var(--b5a)}.bd-6{--acc:var(--b6a)}.bd-7{--acc:var(--b7a)}.bd-8{--acc:var(--b8a)}
html{color-scheme:light}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 Georgia,"Times New Roman",serif}
a{color:var(--accent)}
.wrap{max-width:1100px;margin:0 auto;padding:24px 20px 80px}
header.top{border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:24px}
header.top h1{font-size:2rem;margin:0 0 4px;font-weight:normal}
header.top .sub{color:var(--muted)}
nav.site{margin:0 0 10px;font-size:1.05rem}
nav.site a{margin-right:18px;text-decoration:none;border-bottom:2px solid transparent}
nav.site a.here{border-bottom-color:var(--accent)}
nav.main a{margin-right:14px}
.og{font-family:"Noto Sans Ogham","Segoe UI Historic","Segoe UI Symbol",sans-serif}
 .math{font-family:"Cambria Math","STIX Two Math","Latin Modern Math","Times New Roman","Noto Sans Mayan Numerals","Noto Sans Cuneiform","Segoe UI Historic",serif}
 .slashed-zero{position:relative;display:inline-block;font-variant-numeric:slashed-zero;font-feature-settings:"zero"}
 .slashed-zero::after{content:"";position:absolute;left:12%;top:48%;width:76%;height:.08em;background:currentColor;transform:rotate(-24deg);pointer-events:none}
.sym{color:inherit;text-decoration:none;border-radius:4px;padding:0 .18em;cursor:help}
/* V47 (22 Sept 2026) — how a link looks. Light grey = this has a popup (hover it, or tap on a
   phone). A coloured border = the card behind it has a type of number; the colour is the type.
   The old pastel fills are gone. A symbol carrying a sub- or superscript becomes an inline-block
   so the border goes round the script instead of through it (10^10^100 must fit). site.js gives
   every plain link to a typed card data-ty="<type>", so words in running text get the border too. */
:root{--pop:#ecebe7;--pop-h:#dedcd6;
 --k-int:#3a5a8c;--k-alg:#276b2f;--k-tr:#8a5200;--k-open:#b0321f;--k-unc:#6b3fb0;--k-undef:#b02a66;
 --k-obj:#0b6e61;--k-inf:#55566e;--k-fn:#645f1e;--k-pdef:#1c5fc0;--k-pmeas:#a2470a;--k-pder:#4a7010}
a.sym,a.olabel{background:var(--pop);color:inherit;text-decoration:none;border-bottom:0;border-radius:3px;
 padding:0 .14em;cursor:help;-webkit-box-decoration-break:clone;box-decoration-break:clone}
a.olabel{color:var(--acc)}
a.sym:hover,a.olabel:hover,a.olabel.concept:hover{background:var(--pop-h);outline:0;text-decoration:none}
.t-int,[data-ty="int"]{--ring:var(--k-int)}.t-alg,[data-ty="alg"]{--ring:var(--k-alg)}
.t-tr,[data-ty="tr"]{--ring:var(--k-tr)}.t-open,[data-ty="open"]{--ring:var(--k-open)}
.t-unc,[data-ty="unc"]{--ring:var(--k-unc)}.t-undef,[data-ty="undef"]{--ring:var(--k-undef)}
.t-obj,[data-ty="obj"]{--ring:var(--k-obj)}.t-inf,[data-ty="inf"]{--ring:var(--k-inf)}
.t-fn,[data-ty="fn"]{--ring:var(--k-fn)}.t-pdef,[data-ty="pdef"]{--ring:var(--k-pdef)}
.t-pmeas,[data-ty="pmeas"]{--ring:var(--k-pmeas)}.t-pder,[data-ty="pder"]{--ring:var(--k-pder)}
a.sym[class*=" t-"],.item .symb[class*="t-"]:not(.t-og),.legend span[class*="t-"],.filters span[class*="t-"]{
 box-shadow:inset 0 0 0 1.5px var(--ring,transparent);border-radius:4px;padding:.12em .38em}
a.sym[data-ty]{box-shadow:inset 0 0 0 1.25px var(--ring,transparent);border-radius:4px;padding:.04em .3em}
a.sym[class*=" t-"]:has(sub,sup),a.sym[data-ty]:has(sub,sup),.item .symb[class*="t-"]:has(sub,sup){
 display:inline-block;line-height:1.15;padding:.3em .4em .28em;vertical-align:baseline}
.item .symb[class*="t-"]:not(.t-og),.legend span[class*="t-"],.filters span[class*="t-"]{background:transparent;border:0}
.pow{display:inline-flex;align-items:flex-start}
.pow>.exp{font-size:.72em;margin:-.35em 0 0 .08em}
.legend h4{margin:8px 0 2px;font:italic .85rem Georgia,serif;color:var(--muted);width:100%}
ul.research li{margin:2px 0}
.frac{display:inline-flex;flex-direction:column;vertical-align:middle;text-align:center;margin:0 .2em}
.frac>.num{padding:0 .35em .12em;border-bottom:1.5px solid currentColor;display:flex;align-items:center;justify-content:center;gap:.1em}
.frac>.den{padding:.12em .35em 0;display:flex;align-items:center;justify-content:center;gap:.1em}
.pw{display:inline-flex;align-items:stretch;vertical-align:middle}
.pw>.pc{display:inline-flex;align-items:center;gap:.2em .05em;flex-wrap:wrap;justify-content:center;width:max-content;max-width:30em;flex-shrink:0}
.lp,.rp{display:inline-block;width:.32em;border:1.5px solid currentColor;opacity:.75;flex:none}
.lp{border-right:0;border-radius:.7em 0 0 .7em;margin:0 .1em 0 .05em}
.rp{border-left:0;border-radius:0 .7em .7em 0;margin:0 .05em 0 .1em}
/* rows of bottom-aligned columns */
.row{display:inline-flex;align-items:stretch}
.grp{display:inline-flex;flex-direction:column;align-items:center;margin:0 .12em}
.ginner{flex:1;display:flex;align-items:center;justify-content:center}
.gc{display:inline-flex;align-items:center}
.lab{height:30px;display:flex;flex-direction:column;align-items:center;width:100%;justify-content:flex-start}
.ubrace{width:100%;height:7px;border:2px solid var(--acc);border-top:0;border-radius:0 0 7px 7px;margin-top:6px}
.olabel{font:italic .72rem/1.2 Georgia,serif;color:var(--acc);letter-spacing:.03em;margin-top:3px;white-space:nowrap}
.ubrace.concept{height:9px;border-width:2.5px;margin-top:8px}
a.olabel.concept{font-style:normal;font-weight:700;font-variant:small-caps;letter-spacing:.08em;text-decoration:none}

.prose h3.concept{font-variant:small-caps;letter-spacing:.06em;color:var(--acc);margin:22px 0 4px;font-weight:700;font-size:1.05rem}
.prose h3.concept a{color:inherit;text-decoration:none}.prose h3.concept a:hover{text-decoration:underline}
.prose h4.subhead{margin:18px 0 4px;font-weight:normal;font-style:italic;color:var(--muted);font-size:.98rem}
.prose p.aside{border-left:3px solid var(--line);padding-left:12px;color:var(--muted);font-size:.95rem}.workbench{margin:16px 0;padding:10px 16px;background:rgba(255,255,255,.58);border-left:3px solid var(--acc);border-radius:6px}
header.top h1.site{font-size:2rem;letter-spacing:.02em}
.dot{font-size:1.4rem;opacity:.6;padding:0 .1em}
/* the main formula */
.formula-box{overflow-x:auto;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:22px 22px 18px;margin:18px 0}
.formula{display:inline-flex;align-items:stretch;white-space:nowrap;font-size:1.15rem;gap:.3em}
.factor{display:inline-flex;flex-direction:column;align-items:center}
.factor .top{display:flex;flex-direction:column;align-items:center;width:100%;margin-bottom:10px}
.factor .chap{font:700 1rem/1.1 Georgia,serif;color:var(--acc);text-decoration:none;text-align:center}
.factor .chap .og{font-size:1.5rem;vertical-align:-.1em;margin-right:.1em}
.factor .chap:hover{text-decoration:underline}
.factor .ctitle{font:.74rem/1.2 Georgia,serif;color:var(--acc);max-width:11em;text-align:center;white-space:normal;margin-top:3px;min-height:2.4em}
.tbrace{width:100%;height:8px;border:2px solid var(--acc);border-bottom:0;border-radius:8px 8px 0 0;margin-top:8px;position:relative}
.tbrace::before{content:"";position:absolute;left:50%;top:-8px;width:2px;height:7px;background:var(--acc);transform:translateX(-50%)}
.factor .mid{flex:1;display:flex;align-items:stretch}
.bigpar{display:inline-block;width:.45em;border:3px solid var(--ink);border-right:0;border-radius:.8em 0 0 .8em;margin:0 .2em 0 .05em;height:2.5em}
.bigpar.r{border-left:0;border-right:3px solid var(--ink);border-radius:0 .8em .8em 0;margin:0 .05em 0 .2em}
.opx{display:inline-flex;flex-direction:column;align-items:center}
.opx .op{flex:1;display:flex;align-items:center;font-size:1.6rem;opacity:.7;padding:0 .15em}
.opx .lab{height:30px}
.legend{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 18px}
.legend span{font-size:.85rem;padding:.15em .6em;border-radius:4px;border:1px solid rgba(0,0,0,.08)}
.legend.mini{margin:6px 0 0}
.band{padding:8px 22px 20px;border-radius:16px;margin:28px -22px}
.band>h2.bandh{margin:6px 0 0;font-weight:normal;font-size:1.3rem;color:var(--acc);letter-spacing:.04em;text-transform:uppercase}
.band.b0{background:var(--b0)}.band.b1{background:var(--b1)}.band.b2{background:var(--b2)}.band.b3{background:var(--b3)}.band.b4{background:var(--b4)}.band.b5{background:var(--b5)}.band.b6{background:var(--b6)}.band.b7{background:var(--b7)}.band.b8{background:var(--b8)}
section.chapter{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:20px 24px;margin:18px 0}
section.chapter h2{margin:0;font-weight:normal;font-size:1.5rem}
section.chapter h2 .og{font-size:1.9rem;color:var(--acc);vertical-align:-.1em}
section.chapter .tree{color:var(--muted);margin:2px 0 10px}
section.chapter .termno{color:var(--muted);font-size:.85rem;margin:-4px 0 6px}
/* 24 Sept 2026: the term line sits first, beside a large rune (the slot the rune artwork will fill) */
section.chapter .termline{display:flex;align-items:center;gap:14px;margin:0 0 8px}
section.chapter .rune{flex:none;width:96px;height:96px;display:flex;align-items:center;justify-content:center}
section.chapter .rune .og{font-size:3.6rem;line-height:1;color:var(--acc)}
section.chapter .termline .termno{margin:0;font-size:1rem}
section.chapter .termline .termno .og{color:var(--acc)}
@media (max-width:520px){section.chapter .rune{width:72px;height:72px}section.chapter .rune .og{font-size:2.7rem}}
.subtitle{font-style:italic;color:var(--acc);font-size:1.05rem;margin-top:2px}
.group h2 a{text-decoration:none;color:inherit}.group h2 a:hover{text-decoration:underline}
.prose p{margin:10px 0;max-width:72em}
.linknote{color:var(--muted);font-size:.9rem}
blockquote.quote .src{color:var(--muted);font-size:.8rem}
dl.keyd dt a.sym{border-bottom:0}
dl.keyd dt,dl.keyd dd{min-width:0;overflow-wrap:anywhere}
.tablewrap{overflow-x:auto;max-width:100%}
.tablewrap>table.key{min-width:32em}
@media(max-width:720px){.band{margin-left:-12px;margin-right:-12px;padding-left:12px;padding-right:12px}header.top h1{font-size:1.5rem}}
section.pass{margin-top:40px;border-top:2px solid var(--line);padding-top:10px}
/* pages: appendices, change log */
.page{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:20px 26px;margin:18px 0}
.page h2{font-weight:normal;font-size:1.5rem;margin:0 0 8px}
.page h3{margin:22px 0 6px;font-size:1.1rem;color:var(--acc)}
.page p{max-width:70em}
.sig{color:var(--muted);font-style:italic;margin-top:18px}
.context{margin-top:18px;border-top:1px dashed var(--line);padding-top:10px}
.context>h3{margin:6px 0 2px;font:italic 1rem Georgia,serif;color:var(--muted)}
.context .item{opacity:.92}
details.passnote{border:1px solid var(--line);border-radius:8px;padding:8px 14px;margin:8px 0;background:var(--bg)}
details.passnote>summary{cursor:pointer;font-style:italic;color:var(--acc)}
details.passnote[open]>summary{margin-bottom:6px}
details.passnote h4{margin:10px 0 4px;font-weight:normal}
.review-v4{scroll-margin-top:16px}
.review-v4>h2{font-weight:normal;font-size:1.6rem}
.review-v4 ol{margin:4px 0 12px 24px}
.review-v4 table{width:100%;font-size:.91rem;border-collapse:collapse}
.review-v4 th,.review-v4 td{border:1px solid var(--line);vertical-align:top;padding:7px 9px;text-align:left}
.review-v4 th{background:var(--b2);font-weight:normal;font-style:italic}
.review-v4 th:first-child,.review-v4 td:first-child{white-space:nowrap}
@media(max-width:720px){.review-v4 table{display:block;overflow-x:auto}.review-v4 th:first-child,.review-v4 td:first-child{white-space:normal}}
table.vhist{border-collapse:collapse;margin:10px 0;font-size:.95rem;width:100%}
table.vhist th,table.vhist td{border:1px solid var(--line);padding:6px 11px;text-align:left;vertical-align:top}
table.vhist th{background:var(--b2);font-weight:normal;font-style:italic}
table.vhist td:first-child{white-space:nowrap}
section.pass h4{margin:22px 0 4px;font-weight:normal;font-size:1.15rem}
section.pass ul{margin:4px 0 10px 20px}section.pass li{margin:3px 0}
.expr-big{font-size:1.35rem;overflow-x:auto;white-space:nowrap;padding:16px 6px 10px;margin:8px 0 14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.caption{font-style:italic;color:var(--muted)}
blockquote.quote{margin:12px 0 4px;padding:8px 16px;border-left:3px solid var(--acc);font-style:italic;color:var(--muted)}
blockquote.quote footer{font-style:normal;font-size:.85rem;margin-top:4px}
dl.keyd{display:grid;grid-template-columns:fit-content(45%) minmax(0,1fr);gap:6px 16px;margin:10px 0}
dl.keyd dt{font-family:"Cambria Math","STIX Two Math",serif}
dl.keyd dd{margin:0;color:var(--muted)}
h3{font-size:1.05rem;margin:16px 0 6px;color:var(--accent);font-weight:normal;text-transform:uppercase;letter-spacing:.06em}
ul.points li{margin:4px 0}
.old{font-size:.85rem;color:var(--muted)}
.ruisdef{margin:6px 0 0;font-size:1.05rem}
table.key{border-collapse:collapse;margin:10px 0;font-size:.95rem}
table.key td,table.key th{border:1px solid var(--line);padding:3px 10px;text-align:left;vertical-align:middle}
table.key .og{font-size:1.5rem;color:var(--accent)}
#tip{position:absolute;z-index:50;max-width:26em;background:#1e2229;color:#fff;font:14px/1.45 Georgia,serif;padding:8px 11px;border-radius:6px;pointer-events:none;box-shadow:0 6px 20px rgba(0,0,0,.25)}
#tip[hidden]{display:none}
/* master key */
.filters{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 20px}
.filters button{font:14px Georgia,serif;border:1px solid var(--line);border-radius:999px;padding:.3em .8em;cursor:pointer;background:var(--card)}
.filters button.on{outline:2px solid var(--accent)}
.item{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:12px 16px;margin:10px 0;scroll-margin-top:16px}
.item:target{outline:3px solid var(--rose)}
.item .head{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px}
.item .symb{font-family:"Cambria Math","STIX Two Math",serif;font-size:1.25rem;padding:.05em .35em;border-radius:4px}
.item .name{font-weight:bold}
.item .badge{font-size:.78rem;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:.1em .6em}
.item .home{font-size:.85rem;margin-left:auto}
.item p{margin:6px 0 0}
.item .more{color:var(--muted)}
.group h2{font-weight:normal;font-size:1.35rem;margin:22px 0 4px}
.group h2 .og{font-size:1.7rem;color:var(--acc);vertical-align:-.1em}
.group .tree{color:var(--muted);margin-bottom:8px}
.hidden{display:none}
.tbd{color:var(--muted);font-style:italic}
.welcome{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:22px 26px;margin:18px 0 26px}
.welcome h2{font-size:1.75rem;font-weight:normal;margin:0 0 10px}
.callout{margin:14px 0;font-style:italic}
.footnote{margin:22px 0 4px;padding-top:10px;border-top:1px solid var(--line);color:var(--muted);font-size:.92rem}
.footnote .og{font-size:1.1rem;color:var(--ink)}
.compendium{text-align:center;margin:34px 0 12px}
.compendium h2{font-size:2.6rem;font-weight:normal;margin:0;letter-spacing:.02em}
.compendium h2{color:#f3e5ab}.compendium .og{display:block;font-size:1.6rem;color:#4ade80;margin-top:2px}
.compendium .shape{font-size:1.15rem;margin:14px 0;letter-spacing:.02em}
.compendium p{max-width:46em;margin:10px auto}
.change-list li{margin:7px 0}
.xchap{white-space:nowrap}   /* a chapter named in prose: not a link since V61 (revision9 item 25) */
.xchap .og{color:var(--acc);font-size:1.25em;vertical-align:-.08em;margin-right:.02em}
.grouped-key .key-group{border-top:1px solid var(--line);padding-top:10px;margin-top:18px}
.grouped-key .key-group h4{font-size:1rem;font-weight:600;color:var(--acc);margin:0 0 8px}
.grouped-key .key-laws{border-top:3px double var(--acc);padding-top:16px;margin-top:26px}
table.zero-ledger{width:100%;min-width:38em;table-layout:fixed}
table.zero-ledger caption{text-align:left;color:var(--muted);font-size:.9rem;margin-bottom:10px}
table.zero-ledger th,table.zero-ledger td{vertical-align:top;padding:9px 10px;overflow-wrap:anywhere}
table.zero-ledger thead th:nth-child(1){width:9%}
table.zero-ledger thead th:nth-child(2){width:17%}
table.zero-ledger thead th:nth-child(3){width:20%}
table.zero-ledger tbody th{font-family:"Cambria Math","STIX Two Math",serif;font-size:1.3rem;font-weight:normal}
table.zero-ledger tbody th a.sym{border-bottom:0}
#ch-T3 .key-group,#ch-T4 .key-group{border-top:0;padding-top:0}
#ch-T3 .key-divider,#ch-T4 .key-divider{border:0;border-top:1px solid var(--muted);opacity:.55;margin:20px 0 12px}
#ch-T3 .key-group:last-child .key-divider{border-top-width:2px;opacity:.8}
.chapter-panel{border-top:1px solid var(--line);margin-top:18px;padding-top:8px}.chapter-panel>summary{cursor:pointer;color:var(--acc);font-size:1.05rem}.chapter-panel[open]>summary{margin-bottom:8px}
/* Field notes: the bordered card holding each chapter's term-by-term workings */
.field-notes{margin:20px 0 14px;padding:14px 22px 18px;background:var(--bg);border:1px solid var(--line);border-left:4px solid var(--acc);border-radius:8px}
.field-notes .fn-title{margin:0;font-weight:700;font-variant:small-caps;letter-spacing:.14em;font-size:1.1rem;color:var(--acc)}
.field-notes .fn-sub{margin:0 0 4px;font-size:.88rem;font-style:italic;color:var(--muted)}
.fn-brace{border-top:2px solid var(--acc);margin-top:16px;padding-top:2px}
.prose .fn-brace>h3.concept{margin-top:10px}
.prose p.fn-lead{margin-top:4px}
.fn-part+.fn-part{border-top:1px dashed var(--line);margin-top:14px}
.prose .fn-part h4.subhead{margin-top:12px}
.field-notes h5{margin:16px 0 0;font-size:.95rem;font-style:italic;font-weight:600;color:var(--acc)}
/* entry: line 1 = term = value; why it is here. line 2 = why it has that value */
.entry{padding:7px 0 7px 12px;border-left:2px solid var(--line);margin:6px 0}
.prose .entry p{margin:0}
.prose .entry p.e-why{margin-top:2px;font-size:.95rem;color:#3d434c}
.e-head .ex{font-family:"Cambria Math","STIX Two Math",serif;font-size:1.05rem}
.e-head .ex a.sym{border-bottom:0}.e-head .ex .ex-cond{font-size:.93em;font-style:italic}
.e-head .ev{font-family:"Cambria Math","STIX Two Math",serif;font-weight:700;color:var(--acc);white-space:nowrap}
.prose p.fn-sum{font-weight:600;margin:10px 0 8px}.prose p.fn-sum .fs-rest{font-weight:normal}
aside.inset{margin:10px 0 14px;padding:10px 16px;border:1px solid var(--line);border-left:3px solid var(--acc);border-radius:8px;background:var(--bg);font-size:.95rem}
.prose aside.inset p{margin:6px 0}.prose aside.inset p.inset-h{margin:0 0 4px;font-variant:small-caps;letter-spacing:.05em;color:var(--acc)}
.prose p.fn-fine{margin:14px 0 0;font-size:.86rem;color:var(--muted)}
.fn-fine b{font-weight:600;color:var(--ink)}
.tally{margin:14px 0 8px;padding:8px 14px;text-align:center;font-family:"Cambria Math","STIX Two Math",serif;font-size:1.1rem;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tally .tl{display:block;font:italic .82rem Georgia,serif;color:var(--muted)}
@media(max-width:640px){.field-notes{padding:12px 12px 14px}.entry{padding-left:9px}}
.prose p.display-math{text-align:center;font-size:1.1rem;margin:10px 0;overflow-x:auto}

/* colour tokens only the glossary had */
:root{--og:#efe7db}

/* ===== rules only one page had, fenced to its card */
#page-glossary .t-og{background:var(--og)}


#page-glossary .item .symb.og{font-family:"Noto Sans Ogham","Segoe UI Historic","Segoe UI Symbol",sans-serif;font-size:1.45rem}
#page-references .own{font-style:italic;color:var(--muted)}
#page-references .src-internal .internal-tag{font-variant:small-caps;letter-spacing:.05em;color:var(--muted);font-size:.9em;margin-left:.35em}
#page-references ol.references{list-style:none;padding-left:0;margin:10px 0}
#page-references ol.references>li{margin:13px 0}
#page-references ol.references ul.sources{margin:4px 0 0 18px}
#page-references .refch{color:var(--muted);white-space:nowrap}
#page-references .refch .og{color:var(--accent);font-size:1.3em;vertical-align:-.08em;margin-left:.04em}
#page-references .refno{white-space:nowrap}
#page-appendices .page h4{margin:18px 0 4px;font-weight:normal;font-style:italic;color:var(--muted);font-size:1rem}
#page-appendices .page ul.research{margin:6px 0 14px 20px}
#page-appendices .page ul.research li{margin:6px 0}
#page-appendices table.sponsors{border-collapse:collapse;margin:10px 0 16px}
#page-appendices table.sponsors td{padding:4px 0;vertical-align:baseline}
#page-appendices table.sponsors td.rn{padding-right:1.1em;white-space:nowrap}
#page-appendices table.sponsors td.rv{overflow-wrap:anywhere}
#page-changelog .page h2+p{margin-top:4px}
#page-changelog .page h2~h2{margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}
#page-changelog .page p.note{color:var(--muted);font-style:italic;margin:0 0 22px}

/* ===== the splash, fenced to its card */
#page-splash{ margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background-color: #0a0806; font-family: 'Times New Roman', Times, serif; }
#page-splash #canvas-container{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
#page-splash .overlay-ui{ position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); text-align: center; z-index: 10; opacity: 0; pointer-events: none; transition: opacity 1.5s ease-in-out; display: flex; flex-direction: column; align-items: center; gap: 20px; }
#page-splash .overlay-ui.visible{ opacity: 1; pointer-events: auto; }
#page-splash .magic-btn{ display: inline-block; padding: 15px 40px; background: linear-gradient(135deg, #14532d, #064e3b); color: #f3e5ab; text-decoration: none; font-family: 'Uncial Antiqua', serif; font-size: 1.4rem; border: 2px solid #f3e5ab; border-radius: 8px; box-shadow: 0 0 20px rgba(74, 222, 128, 0.4), inset 0 0 10px rgba(74, 222, 128, 0.2); letter-spacing: 2px; transition: all 0.3s ease; cursor: pointer; position: relative; overflow: hidden; }
#page-splash .magic-btn:hover{ box-shadow: 0 0 30px rgba(74, 222, 128, 0.8), inset 0 0 20px rgba(74, 222, 128, 0.5); background: linear-gradient(135deg, #166534, #065f46); transform: scale(1.02); color: #ffffff; }
#page-splash .static-ancient-text{ color: #f3e5ab; text-shadow: 0 5px 15px rgba(0, 0, 0, 0.9), 0 0 10px rgba(0,0,0,0.8); }
#page-splash .ancient-line-1{ font-family: 'Uncial Antiqua', serif; font-size: 1.8rem; letter-spacing: 0.15em; margin-bottom: 8px; }
#page-splash .ancient-line-2{ font-family: 'Times New Roman', serif; font-size: 1.8rem; letter-spacing: 0.2em; color: #4ade80; }
#page-splash .controls-hint{ position: absolute; top: 20px; right: 20px; z-index: 20; background: rgba(39, 26, 17, 0.8); border: 1px solid #8c6b4a; color: #f3e5ab; padding: 8px 16px; border-radius: 20px; cursor: pointer; font-size: 0.85rem; letter-spacing: 0.1em; font-family: sans-serif; transition: all 0.3s ease; }
#page-splash .controls-hint:hover{ background: rgba(140, 107, 74, 0.4); color: #fff; }

/* ===== the deck: every page is a full-screen card that keeps its own scroll position (D-2, D-3) */
:root { --dock-row: 44px; --dock-h: 44px; }
html, body { height: 100%; overflow: hidden; }
#deck { position: fixed; top: 0; left: 0; right: 0; bottom: var(--dock-h); overflow: hidden;
  overflow: clip;   /* 25 Sept 2026: not a scroll container at all, so nothing can scroll it onto an off-screen card */
  transition: bottom .3s ease; }
/* top/right/bottom/left rather than `inset`, which iOS Safari only learned in 14.1 */
.sheet { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: var(--bg);
  visibility: hidden; transform: translateX(100%); }
.sheet:focus { outline: none; }
.sheet.current { visibility: visible; transform: none; }
.sheet.anim { visibility: visible; transition: transform .5s cubic-bezier(.45, .05, .2, 1);
  box-shadow: 0 0 40px rgba(0, 0, 0, .35); }
@media (prefers-reduced-motion: reduce) { .sheet.anim { transition: none; } }

#page-splash { background: #0a0806; overflow: hidden; }
#page-splash .enter-row { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
#page-splash .enter-row .magic-btn { font-size: 1.2rem; padding: 12px 28px; min-width: 11em; }
#page-splash .enter-row .magic-btn span { display: block; font-size: .72em; letter-spacing: 1px;
  opacity: .85; margin-top: 2px; }

/* popups follow the pointer in the viewport now, not the page */
#tip { position: fixed; }

/* a jump target — a reference, a glossary card, a concept — pulses slowly for about five
   seconds and then fades, so the eye finds it (Ian, 22 Sept: the first version was too brief) */
.flash { animation: flash 6s ease-in-out; }
@keyframes flash {
  0%   { box-shadow: 0 0 0 0 rgba(178, 58, 91, 0); }
  10%  { box-shadow: 0 0 0 4px rgba(178, 58, 91, .7); }
  27%  { box-shadow: 0 0 0 4px rgba(178, 58, 91, .2); }
  44%  { box-shadow: 0 0 0 4px rgba(178, 58, 91, .7); }
  61%  { box-shadow: 0 0 0 4px rgba(178, 58, 91, .2); }
  78%  { box-shadow: 0 0 0 4px rgba(178, 58, 91, .7); }
  100% { box-shadow: 0 0 0 4px rgba(178, 58, 91, 0); } }
@keyframes flash-still {                 /* reduced motion: the same outline, held, no pulse */
  0%, 80% { box-shadow: 0 0 0 4px rgba(178, 58, 91, .6); }
  100%    { box-shadow: 0 0 0 4px rgba(178, 58, 91, 0); } }
@media (prefers-reduced-motion: reduce) { .flash { animation-name: flash-still; } }

/* ===== the floating dock (D-6, D-7) */
#dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: #1a120b;
  color: #f3e5ab; border-top: 1px solid #5a4330; font: 14px/1.3 system-ui, "Segoe UI", sans-serif; }
.dock-row { height: var(--dock-row); display: flex; align-items: center; gap: 8px; padding: 0 10px; }
.dock-row button { background: rgba(243, 229, 171, .08); color: #f3e5ab; border: 1px solid #6b5238;
  border-radius: 16px; padding: 6px 12px; font: inherit; font-size: .85rem; cursor: pointer;
  white-space: nowrap; }
.dock-row button:hover { background: rgba(243, 229, 171, .18); }
.dock-row button:focus-visible { outline: 2px solid #4ade80; outline-offset: 2px; }
#backRead { border-color: #4ade80; }
/* "🔊 Mute" and "🔇 Unmute" differ in width; a fixed width stops the toggle nudging the row */
#muteBtn { min-width: 7.2em; text-align: center; }
@media (max-width: 520px) { #muteBtn { min-width: 2.6em; } }   /* icon only on a phone */
.dock-spacer { flex: 1; }
#dockHint { font-size: .8rem; color: #e9c46a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* "Give feedback", in the middle of the row: the conversation lives under the film (Appendix E) */
.dock-link { color: #f3e5ab; text-decoration: none; font-size: .85rem; white-space: nowrap;
  border: 1px solid #6b5238; border-radius: 16px; padding: 6px 12px; background: rgba(243, 229, 171, .08); }
.dock-link:hover { background: rgba(243, 229, 171, .18); }
.dock-link:focus-visible { outline: 2px solid #4ade80; outline-offset: 2px; }

/* the gentle nudge: while the music is off, "Expand to turn on sound" glows once every 15 s */
#dock[data-state="min"] #expandBtn { animation: nudge 15s ease-in-out infinite; }
@keyframes nudge {
  0%, 84%, 100% { box-shadow: none; background: rgba(243, 229, 171, .08); }
  89%           { box-shadow: 0 0 0 3px rgba(74, 222, 128, .45), 0 0 16px rgba(74, 222, 128, .45);
                  background: rgba(74, 222, 128, .18); }
  94%           { box-shadow: none; background: rgba(243, 229, 171, .08); } }
@media (prefers-reduced-motion: reduce) { #dock[data-state="min"] #expandBtn { animation: none; } }

/* narrow phones: the site nav wraps instead of running off the card ("Change log" was cut to
   "Ch" at 390 px — the cards clip sideways overflow, which the old pages let scroll) */
@media (max-width: 520px) {
  nav.site { display: flex; flex-wrap: wrap; gap: 4px 14px; }
  nav.site a { margin-right: 0; }
}

/* narrow phones: four controls share one row, so the labels shorten */
.dock-row .narrow { display: none; }
@media (max-width: 520px) {
  .dock-row { gap: 6px; padding: 0 8px; }
  .dock-row button, .dock-link { padding: 6px 10px; }
  .dock-row .wide { display: none; }
  .dock-row .narrow { display: inline; }
}
.dock-player { height: 200px; display: flex; justify-content: center; background: #000; }
.dock-player iframe { width: min(100%, 356px); height: 200px; border: 0; display: block; }
#dock[data-state="min"] .dock-player { height: 0; overflow: hidden; visibility: hidden; }
#dock[data-state="min"] .when-open, #dock[data-state="open"] .when-min { display: none; }
.pop-sample{background:var(--pop);border-radius:3px;padding:0 .14em}

/* ===== V55/V56 (24 Sept 2026): the branch — Ian's chosen design (V56: notforupload/mockup3, archived).
   The entrance, the banner that is the branch, the main formula's strip, sparks and branch slider, and the chapter
   runes; all built by site.js at run time, so index.html (and every validator) is unchanged. */
:root{--bandH:170px}
#page-splash #canvas-container{transition:opacity .9s}
#page-splash #canvas-container.fade{opacity:0}
#page-splash .overlay-ui.gone{opacity:0!important;pointer-events:none;transition:opacity .4s}
/* V56: the banner IS the branch — wood the full height, rough bark edges, the formula carved into it (mockup3) */
.brBand{position:fixed;left:0;top:0;width:100%;height:100vh;z-index:60;overflow:hidden;opacity:0;visibility:hidden;transition:opacity .9s ease}
.brBand::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at 45% 50%,#2b1d13 0%,#150f0a 55%,#0a0806 100%);transition:opacity 1.9s}
.brBand.show{opacity:1;visibility:visible}
.brBand.settle{height:var(--bandH);transition:height 1.9s cubic-bezier(.45,.05,.2,1),opacity .9s}
.brBand.settle::before{opacity:0}
.brBand.docked{position:absolute;transition:none}
.brBand,.brBand *{pointer-events:none}
.brBand .skip{position:absolute;right:16px;bottom:14px;color:#a89a74;font:italic .8rem Georgia,serif;transition:opacity .6s;pointer-events:auto;cursor:pointer;z-index:3}
.brBand.settle .skip{opacity:0;pointer-events:none}
.brInner{position:absolute;left:0;top:0;transform-origin:0 0;transform:translateY(var(--ty,0px)) scale(var(--s,2));transition:transform 1.9s cubic-bezier(.45,.05,.2,1)}
.brBand.docked .brInner{transition:none}
.brStrip{position:relative;width:max-content;padding:34px 260px 34px 130px;will-change:transform}
.brWood{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0}
.brWood>div{position:absolute;top:0;right:0;bottom:0;left:0}
.brWood .fine{mix-blend-mode:overlay;opacity:.8}
.brStrip>.formula{position:relative;z-index:1;font-size:1.2rem;color:#e3c79b;text-shadow:0 -1px 1px rgba(0,0,0,.9),0 1px 0 rgba(255,236,205,.3)}
.brStrip .g.lk{display:inline-block;white-space:pre;text-align:center;overflow:visible;transition:color 1.1s,text-shadow 1.1s}
.brStrip .g.ogm{font-family:"Noto Sans Ogham","Segoe UI Historic","Segoe UI Symbol",sans-serif;letter-spacing:-.05em}
.brStrip .g.fresh{color:#fffbea;text-shadow:0 0 10px rgba(255,238,196,.95),0 0 2px #fff;transition:none}
.brStrip .formula *{transition:border-color 1.4s,box-shadow 1.4s,opacity 1.4s}
.brStrip.ogphase .formula *{border-color:transparent!important;box-shadow:none!important;background:transparent!important}
.brStrip.ogphase .formula .tbrace::before{opacity:0}
.brBand a.sym,.brBand a.olabel{background:transparent!important;color:inherit}
.brBand{--ink:#e3c79b;--pop:transparent;
 --b0a:#e3c79b;--b1a:#e3c79b;--b2a:#e3c79b;--b3a:#e3c79b;--b4a:#e3c79b;--b5a:#e3c79b;--b6a:#e3c79b;--b7a:#e3c79b;--b8a:#e3c79b;
 --k-int:rgba(18,9,3,.6);--k-alg:rgba(18,9,3,.6);--k-tr:rgba(18,9,3,.6);--k-open:rgba(18,9,3,.6);--k-unc:rgba(18,9,3,.6);--k-undef:rgba(18,9,3,.6);
 --k-obj:rgba(18,9,3,.6);--k-inf:rgba(18,9,3,.6);--k-fn:rgba(18,9,3,.6);--k-pdef:rgba(18,9,3,.6);--k-pmeas:rgba(18,9,3,.6);--k-pder:rgba(18,9,3,.6)}
#brSparks{position:fixed;top:0;left:0;width:100%;height:100%;z-index:70;pointer-events:none}
.brSlot{position:relative;height:var(--bandH);background:#0a0806}
/* leaves live outside the banner: twigs hang from its lower edge and pass over the nav and the title */
.brLeaves{position:absolute;left:0;top:0;width:100%;height:calc(var(--bandH) + 200px);overflow:hidden;pointer-events:none;z-index:30;opacity:0;transition:opacity 1.4s}
.brLeaves.on{opacity:1}
.brLeaves .lstrip{position:absolute;left:0;top:0;will-change:transform}
.hangtwig{position:absolute;transform-origin:12px 0;animation:brsway 5.5s ease-in-out infinite alternate}
@keyframes brsway{from{transform:rotate(-3.5deg)}to{transform:rotate(3.5deg)}}
@media (prefers-reduced-motion:reduce){.hangtwig{animation:none}}
/* twigs on the main formula's branch slider */
.twig{position:absolute;pointer-events:none;overflow:visible}
.twig .leaf{opacity:1}
/* V56 (Ian): the two Enter doors stay side by side on phones */
@media (max-width:600px){
 #page-splash .overlay-ui{width:calc(100% - 24px)}
 #page-splash .enter-row{flex-wrap:nowrap;gap:10px}
 #page-splash .enter-row .magic-btn{min-width:0;flex:1 1 0;padding:10px 8px;font-size:1rem;letter-spacing:1px}
 #page-splash .enter-row .magic-btn span{font-size:.7em;letter-spacing:.5px}
}
/* main formula */
.fwrap{position:relative;margin:18px 0 8px}
.fwrap>.formula-box{margin:0;scrollbar-width:none;box-shadow:inset 0 0 0 4px #fbf8f2,inset 0 0 0 5px #efe7d8}
.fwrap>.formula-box::-webkit-scrollbar{display:none}
/* 25 Sept 2026 (Ian): each chapter heading on one line, "ᚏ(R) The gateway", to give the formula back its height on
   phones; sized in em so it shrinks with the formula when site.js fits the box to a short screen. Where a title is
   wider than its terms (the gateway), the factor widens and the brace spans the title with a little room each side. */
.fwrap .factor .top{display:grid;grid-template-columns:1fr auto auto 1fr;align-items:baseline;box-sizing:border-box;padding:0 .5em}
.fwrap .factor .chap{font-size:.87em;grid-column:2;grid-row:1}
.fwrap .factor .ctitle{font-size:.64em;max-width:none;white-space:nowrap;min-height:0;margin:0 0 0 .45em;grid-column:3;grid-row:1}
.fwrap .factor .tbrace{grid-column:1/-1;grid-row:2;width:auto;margin:.45em -.5em 0}
.fwrap canvas{position:absolute;left:-90px;top:-40px;pointer-events:none;z-index:2}
.limb{position:relative;height:78px;margin:6px 4px 0;touch-action:none;-webkit-user-select:none;user-select:none;overflow-x:clip}
.limb .wood2{position:absolute;left:0;right:0;top:42px;height:16px;
 background:repeating-linear-gradient(90deg,transparent 0 17px,rgba(20,10,5,.3) 17px 19px,transparent 19px 31px),linear-gradient(180deg,#8a6650,#6b4c3b 40%,#4a3326);
 clip-path:polygon(0 8%,97% 30%,100% 50%,97% 70%,0 92%);border-radius:6px 0 0 6px}
.limb .thumb{position:absolute;top:36px;height:28px;border-radius:14px;cursor:grab;z-index:3;display:flex;align-items:center;justify-content:center;
 background:repeating-linear-gradient(90deg,transparent 0 9px,rgba(150,110,70,.22) 9px 10px),linear-gradient(180deg,#f3e2c4,#e2c79d);
 border:1px solid #b89468;box-shadow:0 2px 6px rgba(80,50,20,.25),inset 0 1px 0 #fff6e4;
 font:italic .8rem Georgia,serif;color:#6b4c3b;white-space:nowrap;letter-spacing:.04em}
.limb .thumb.drag{cursor:grabbing}
.limb .bud{position:absolute;top:0;transform:translateX(-50%);-webkit-appearance:none;appearance:none;border:0;background:none;cursor:pointer;padding:0;
 font-size:1.15rem;line-height:32px;color:var(--acc);opacity:.4;transition:opacity .2s,transform .2s;z-index:2}
.limb .bud::after{content:"";position:absolute;left:50%;top:30px;width:1.5px;height:11px;background:#8a6650;opacity:.6}
.limb .bud.vis{opacity:1}
.limb .bud:hover{transform:translateX(-50%) translateY(-3px)}
/* chapter rune: flat, pops up out of the ground, then still (hidden only once site.js is running) */
section.chapter .rune{overflow:hidden}
html.js-rune section.chapter .rune .og{display:inline-block;transform:translateY(120%)}
html.js-rune section.chapter .rune.in .og{animation:popup .75s cubic-bezier(.25,1.6,.45,1) forwards}
@keyframes popup{from{transform:translateY(120%)}to{transform:none}}
@media (max-width:760px){:root{--bandH:110px}.fwrap canvas{display:none}}
@media (prefers-reduced-motion:reduce){html.js-rune section.chapter .rune .og{transform:none;animation:none!important}}