@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/atkinson-hyperlegible-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/atkinson-hyperlegible-latin-700-normal.woff2) format('woff2')}

/* philosophy.global: the family's house, in orange (file 01). Ink on white paper.
   --sun and --ember are fills and rules only; every word in colour is --accent (the deep orange, 5.5:1). */
:root{
  --paper:#ffffff; --panel:#FFF6E8; --ink:#1a1a1a; --grey:#4a4a4a; --line:#d5d5d0; --line2:#ecebe6;
  --accent:#B34700; --accent-hover:#9A3D00; --wm:#B34700; --accent-soft:#FFF6E8;
  --sun:#F2A100; --ember:#E86A10; --grad:linear-gradient(90deg,#F2A100,#E86A10);
  --step:#E86A10;
  --bronze:#8B6914; --fire:#8B1A1A;
  --f:'Atkinson Hyperlegible',system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --w:760px; --wide:1080px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#15120f; --panel:#221c15; --ink:#efebe5; --grey:#bdb5aa; --line:#3a332b; --line2:#2a241e;
    --accent:#F5A04B; --accent-hover:#FFB86B; --wm:#F5A04B; --accent-soft:#2a2016; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#15120f; --panel:#221c15; --ink:#efebe5; --grey:#bdb5aa; --line:#3a332b; --line2:#2a241e;
  --accent:#F5A04B; --accent-hover:#FFB86B; --wm:#F5A04B; --accent-soft:#2a2016; color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px;-webkit-text-size-adjust:100%}
body{font-family:var(--f);font-size:18px;line-height:1.65;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:-80px;z-index:80;background:var(--paper);color:var(--ink);border:1px solid var(--line);padding:10px 16px;font-weight:700;text-decoration:none}
.skip:focus{top:12px}

/* word mark */
.wm{font-weight:700;letter-spacing:-.005em;color:var(--ink);white-space:nowrap;text-decoration:none}
.wm .c{color:var(--wm)}
.bar > .wm{border-bottom:3px solid;border-image:var(--grad) 1;padding-bottom:1px}
.wm.t420 .c{color:var(--bronze)} .wm.wbk .c{color:#C00000} .wm.ai .c{color:#1F3F99}
.wm.aie .c{color:#1F3F99}
.wm.bio .c{color:#0094D3} .wm.ape .c{color:var(--bronze)}
.wm.one .c{color:#1B1840} .wm.phi .c{color:#B34700}

/* bar */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:.7rem clamp(16px,4vw,40px);
  background:color-mix(in srgb,var(--paper) 94%,transparent);border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}
.bar .wm{font-size:1.1rem}
.bar nav{margin-left:auto;display:flex;gap:1.1rem;flex-wrap:wrap;font-size:.92rem}
.bar nav a{color:var(--grey);text-decoration:none} .bar nav a:hover,.bar nav a[aria-current]{color:var(--ink)}
@media (max-width:760px){.bar nav{width:100%;margin-left:0;gap:.8rem;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px}.bar nav a{white-space:nowrap}}

main{display:block}
.page{max-width:var(--w);margin:0 auto;padding:clamp(2rem,6vw,4rem) 16px 3rem}
.wide{max-width:var(--wide);margin:0 auto;padding:0 16px}
h1{font-size:clamp(2rem,5vw,2.9rem);line-height:1.12;letter-spacing:-.015em;margin:.2rem 0 .6rem}
h2{font-size:1.45rem;line-height:1.25;margin:2.6rem 0 .8rem}
h3{font-size:1.1rem;margin:1.6rem 0 .5rem}
p{margin:0 0 1rem}
.eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.lead{font-size:1.25rem;line-height:1.5;color:var(--ink)}
.grey{color:var(--grey)} .small{font-size:.88rem}
hr{border:0;border-top:1px solid var(--line);margin:2.4rem 0}

/* the front door: warm paper, one column, left-aligned (file 01) */
.door{background:var(--panel);border-bottom:1px solid var(--line);position:relative}
.door::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--grad)}
.door .in{max-width:var(--w);margin:0 auto;padding:clamp(3rem,10vw,6rem) 16px clamp(2.6rem,7vw,4.2rem)}
.door h1{font-size:clamp(2.2rem,6.5vw,3.6rem);margin:.3rem 0 .5rem}
.door .answer{font-size:clamp(1.3rem,3.5vw,1.75rem);font-style:italic;margin:0 0 2rem;border-left:4px solid var(--ember);padding-left:1rem}
.door .lines p{margin:0 0 .35rem;font-size:1.12rem;line-height:1.6}
.door .start{display:inline-block;margin-top:1.8rem;background:var(--accent);color:#fff;font-weight:700;padding:.8rem 1.3rem;border-radius:999px;text-decoration:none;box-shadow:inset 6px 0 0 var(--sun)}
.door .start:hover{background:var(--accent-hover);color:#fff}
/* the walk on the front door */
.walk{list-style:none;counter-reset:s;margin:1.4rem 0 0;border-left:2px solid var(--line);padding-left:0}
.walk li{position:relative;padding:.55rem 0 .55rem 2.6rem}
.walk li::before{counter-increment:s;content:counter(s);position:absolute;left:-15px;top:.55rem;width:28px;height:28px;border-radius:50%;
  background:var(--paper);border:2px solid var(--accent);color:var(--accent);font-weight:700;font-size:.85rem;display:grid;place-items:center}
.walk a{font-weight:700;text-decoration:none;color:var(--ink)} .walk a:hover{color:var(--accent)}
.walk .c{display:block;color:var(--grey);font-size:.95rem;line-height:1.45}

/* glance */
.glance{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:1.2rem 0}
.glance div{border:1px solid var(--line);border-radius:10px;padding:1rem}
.glance b{display:block;font-size:2rem;line-height:1.1}
.glance span{color:var(--grey);font-size:.9rem}
.glance .dead b{color:var(--fire)}

/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:1rem 0}
.card{display:block;border:1px solid var(--line);border-radius:10px;padding:1rem 1.1rem;text-decoration:none;color:var(--ink);background:var(--paper)}
.card:hover{border-color:var(--accent)} .card b{display:block;margin-bottom:.2rem} .card span{color:var(--grey);font-size:.93rem;line-height:1.45;display:block}

/* step page */
.strap{font-size:.85rem;color:var(--grey);margin-bottom:.4rem}
.strap a{color:var(--grey)}
.claim{font-size:1.28rem;line-height:1.5;border-left:3px solid var(--accent);padding:.1rem 0 .1rem 1rem;margin:1rem 0 1.8rem}
figure.pic{margin:1.6rem 0 2rem;color:var(--ink)}
figure.pic svg{width:100%;height:auto;max-height:320px;background:var(--panel);border-radius:12px;padding:12px}
figure.pic figcaption{color:var(--grey);font-size:.92rem;margin-top:.5rem;text-align:center}
p.line{font-family:var(--f);font-weight:700;font-size:clamp(1.3rem,4.4vw,1.9rem);text-align:center;letter-spacing:.01em;margin:1.4rem 0 1.6rem;color:var(--accent);
  padding:1rem;border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow-x:auto;white-space:nowrap}
.part{margin-top:2.4rem}
.part > h2{font-size:.82rem;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);margin:0 0 .7rem}
.stands{list-style:none} .stands li{padding:.25rem 0}
.kill blockquote{border-left:3px solid var(--fire);background:var(--panel);padding:.8rem 1rem;border-radius:0 8px 8px 0;margin:.8rem 0;font-size:.98rem}
.kill blockquote cite{display:block;font-style:normal;font-size:.85rem;color:var(--grey);margin-top:.4rem}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:.6rem 0}
.chip{font-size:.82rem;font-weight:700;border:1px solid var(--line);border-radius:999px;padding:.15rem .6rem;text-decoration:none;color:var(--ink)}
.chip:hover{border-color:var(--fire);color:var(--fire)}
details.rec{border:1px solid var(--line);border-radius:10px;padding:.2rem 1rem;margin:1.6rem 0;background:var(--panel)}
details.rec summary{cursor:pointer;font-weight:700;padding:.6rem 0}
details.rec[open]{padding-bottom:.6rem}
.wallnote{border:1px solid var(--line);border-radius:10px;padding:1rem 1.1rem;margin:1.6rem 0;font-size:.97rem}
.wallnote .from{font-size:.82rem;color:var(--grey);margin-bottom:.4rem}
.help{border:2px solid var(--ink);border-radius:10px;padding:.8rem 1rem;margin:0 0 1.4rem;font-size:.97rem}
.pn{display:flex;justify-content:space-between;gap:1rem;border-top:1px solid var(--line);margin-top:3rem;padding-top:1.2rem;font-size:.95rem}
.pn a{text-decoration:none;color:var(--ink);max-width:45%} .pn small{display:block;color:var(--grey)} .pn .r{text-align:right;margin-left:auto}

/* number card */
.num{border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem;margin:.9rem 0;background:var(--paper)}
.num .k{font-size:.9rem;color:var(--grey);margin-bottom:.4rem}
.num .vals{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.4rem 1rem}
.num .vals div small{display:block;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--grey)}
.num .vals div b{font-size:1.05rem;font-variant-numeric:tabular-nums}
.num.fired{border-color:var(--fire)}
.tag{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:.1rem .5rem;border-radius:4px}
.tag.live{background:var(--accent-soft);color:var(--accent)} .tag.dead{background:var(--fire);color:#fff}
.gauge{position:relative;height:16px;margin:.8rem 0 .2rem;background:linear-gradient(90deg,transparent 0,transparent calc(40% - 1px),var(--line) calc(40% - 1px),var(--line) 40%,transparent 40%,transparent 60%,var(--line) 60%,var(--line) calc(60% + 1px),transparent calc(60% + 1px));border-bottom:1px solid var(--line)}
.gauge::before{content:"";position:absolute;left:40%;width:20%;top:0;bottom:0;background:var(--accent-soft)}
.gauge i{position:absolute;top:2px;width:12px;height:12px;border-radius:50%;background:var(--bronze);transform:translateX(-50%)}
.gauge.dead i{background:var(--fire)}
.gauge-l{display:flex;justify-content:space-between;font-size:.72rem;color:var(--grey)}

/* tables */
.tbl{overflow-x:auto;margin:1rem 0}
table{border-collapse:collapse;width:100%;font-size:.93rem}
th,td{text-align:left;padding:.55rem .6rem;border-bottom:1px solid var(--line2);vertical-align:top}
thead th{font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--grey);border-bottom:1px solid var(--line)}
td.n{font-variant-numeric:tabular-nums;white-space:nowrap}
tr.fired td{color:var(--grey)} tr.fired td.s{color:var(--fire);font-weight:700}

/* calendar */
.cal{border:1px solid var(--line);border-radius:12px;margin:1.1rem 0;overflow:hidden}
.cal header{display:flex;flex-wrap:wrap;gap:.4rem 1rem;align-items:baseline;justify-content:space-between;padding:1rem 1.1rem;background:var(--panel)}
.cal header b{font-size:1.05rem}
.cal .body{padding:.8rem 1.1rem 1rem}
.cal .next{list-style:none;margin:.4rem 0 .8rem}
.cal .next li{display:grid;grid-template-columns:10.5rem 1fr;gap:.2rem 1rem;padding:.5rem 0;border-top:1px solid var(--line2)}
.cal .next li:first-child{border-top:0}
.cal .when{font-weight:700;font-size:.9rem}
.cal .who b{display:block} .cal .who span{color:var(--grey);font-size:.92rem}
@media (max-width:620px){.cal .next li{grid-template-columns:1fr}}
.cal .verdict{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.cal .verdict div{border:1px solid var(--line2);border-radius:8px;padding:.6rem .8rem;font-size:.93rem}
.cal .verdict small{display:block;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--grey);margin-bottom:.2rem}
@media (max-width:620px){.cal .verdict{grid-template-columns:1fr}}

/* words */
.word{display:grid;grid-template-columns:140px 1fr;gap:1.2rem;border-top:1px solid var(--line);padding:1.3rem 0}
.word svg{width:140px;height:auto;background:var(--panel);border-radius:10px;padding:6px}
.word h3{margin:0 0 .3rem;font-size:1.2rem}
.word blockquote{font-size:.9rem;color:var(--grey);margin:.4rem 0 0}
@media (max-width:560px){.word{grid-template-columns:1fr}.word svg{width:100%;max-width:260px}}
pre{font-family:var(--mono);font-size:.86rem;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:1rem;overflow-x:auto;margin:.8rem 0 1rem}

/* footer */
footer.foot{border-top:1px solid var(--line);margin-top:3rem;padding:2.2rem 16px 2.6rem;text-align:center;color:var(--grey);font-size:.9rem}
footer.foot .q{color:var(--ink);font-weight:700;font-size:1.05rem;margin-bottom:.2rem}
footer.foot .k{color:var(--ink);font-size:1.05rem;margin-bottom:1rem}
footer.foot .fam{display:flex;justify-content:center;flex-wrap:wrap;gap:.6rem 1.4rem;margin:1rem 0 1.2rem;font-size:1rem}
footer.foot .commit{font-size:.8rem;margin-top:.8rem}
footer.foot .row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;max-width:var(--wide);margin:1.4rem auto 0;font-size:.82rem}
.when .sub{display:block;font-weight:400;font-size:.85rem;margin-top:.15rem}
.stronger{border-left:4px solid var(--accent,#3b2f8f);padding:.2rem 0 .2rem 1.1rem;margin:1.6rem 0 2rem}
.stronger h2{margin-top:0}
.stronger .from{font-size:.9rem;color:var(--grey,#555)}
.toc ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;padding:0;margin:1.2rem 0 1.6rem}
.toc a{font-weight:700}
/* ONE-3: the step bodies' own headings, the words without a picture, and the links to the words page */
.bh{font-size:1.3rem;margin:2rem 0 .5rem}
.word.nopic{grid-template-columns:1fr}
a.wl{color:inherit;text-decoration-style:dotted;text-underline-offset:3px}

/* ── philosophy.global: the step page (file 01, the template) ── */
a:hover{color:var(--accent-hover)}
.step-eyebrow a{color:var(--accent);text-decoration:none}
.step-eyebrow{border-left:4px solid var(--step);padding-left:.6rem}
.progress{height:4px;background:var(--line2);border-radius:2px;margin:.7rem 0 1.4rem;overflow:hidden}
.progress i{display:block;height:100%;background:var(--grad);border-radius:2px}
.oneline{font-size:1.28rem;line-height:1.5;font-style:italic;border-left:3px solid var(--step);padding:.1rem 0 .1rem 1rem;margin:1rem 0 1rem}
.branch{font-size:.92rem;color:var(--grey);margin:0 0 1.4rem}
.branch a{color:var(--accent)}
.have{background:var(--panel);border-radius:10px;padding:.8rem 1rem;margin:0 0 1.6rem}
.have p{margin:0}
.box{background:var(--panel);border-radius:10px;padding:.9rem 1.1rem;margin:1.4rem 0}
.box p{margin:0} .box .lbl{color:var(--accent)}
figure.bench{margin:2.4rem 0;border-left:8px solid var(--step);padding:.3rem 0 .3rem 1.2rem}
figure.bench blockquote{font-size:1.35rem;line-height:1.5;font-style:italic}
figure.bench figcaption{font-size:.85rem;color:var(--grey);margin-top:.5rem}
blockquote.quote{border-left:3px solid var(--line);padding:.2rem 0 .2rem 1rem;margin:1.2rem 0;color:var(--ink)}
blockquote.quote p{margin:0} blockquote.quote cite{display:block;font-style:normal;font-size:.85rem;color:var(--grey);margin-top:.3rem}
.notice{border:2px solid var(--ink);border-radius:10px;padding:.8rem 1rem;margin:0 0 1.6rem;font-size:.97rem}
.notice p{margin:0}
details.ksbox{border:1px solid var(--line);border-radius:10px;padding:.2rem 1rem;margin:.6rem 0 1.4rem}
details.ksbox summary{cursor:pointer;font-weight:700;padding:.6rem 0;color:var(--accent)}
details.ksbox[open]{padding-bottom:.6rem}
ul.ks{list-style:none;margin:.4rem 0 1rem;padding:0}
ul.ks li{padding:.45rem 0;border-top:1px solid var(--line2);font-size:.97rem}
ul.ks li:first-child{border-top:0}
ul.ks li > a:first-child{font-weight:700;font-family:var(--mono);font-size:.86rem;margin-right:.35rem}
.page ul:not(.ks):not(.path),.page ol:not(.path):not(.timeline){padding-left:1.3rem;margin:0 0 1rem}
.page li{margin:.25rem 0}
.stepline{display:block;font-size:.9rem;margin-top:.2rem}
a.doorcard{display:block;border:1px solid var(--line);border-left:4px solid var(--ember);border-radius:10px;padding:.9rem 1.1rem;margin:.8rem 0;text-decoration:none;color:var(--ink)}
a.doorcard:hover{border-color:var(--accent)}
a.doorcard .q{display:block;font-size:.85rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
a.doorcard b{display:block;font-size:1.1rem;margin:.1rem 0 .3rem}
a.doorcard span:last-child{display:block;color:var(--grey);font-size:.95rem;line-height:1.5}
.kind{font-weight:700;font-size:1.1rem;margin:2rem 0}
a.wl{color:inherit;text-decoration-style:dotted;text-decoration-color:var(--accent);text-underline-offset:3px}
a.go{font-weight:700;white-space:nowrap}
.closing{border-left:4px solid var(--ember);padding:.2rem 0 .2rem 1rem;margin:3rem 0 0}
.closing p{margin:0 0 .3rem;font-size:1.1rem}
/* the walk, as the garden's map: one path down the page, the markers warming as it goes */
.path{list-style:none;margin:1.2rem 0 1.4rem 16px;padding:0;border-left:3px solid var(--line)}
.path li{position:relative;padding:.6rem 0 .8rem 1.9rem}
.path .mk{position:absolute;left:-17px;top:.55rem;width:31px;height:31px;border-radius:50%;background:var(--step);color:#1a1a1a;font-weight:700;font-size:.85rem;display:grid;place-items:center}
.path a{font-weight:700;font-size:1.08rem;text-decoration:none;color:var(--ink)} .path a:hover{color:var(--accent)}
.path .c{display:block;color:var(--ink);font-size:.98rem;line-height:1.5;margin-top:.15rem}
.path .br{display:block;color:var(--grey);font-size:.85rem;margin-top:.1rem}
.path.compact li{padding:.4rem 0 .45rem 1.9rem} .path.compact .mk{top:.32rem}
.benchbox{background:var(--panel);border-left:4px solid var(--ember);border-radius:0 10px 10px 0;padding:.9rem 1.1rem;margin:1rem 0 2rem}
.stretch h2{margin-top:2.8rem}
p.stepline{font-size:.9rem;margin-top:-.3rem}
/* the words */
.entry{border-top:1px solid var(--line2);padding:.8rem 0}
.entry p{margin:0}
.entry .first{display:block;font-size:.85rem;color:var(--grey);margin-top:.25rem}
.entry:target{background:var(--panel);margin:0 -10px;padding:.8rem 10px;border-radius:8px}

/* the Eye of the Universe on the landing, in black, opening (G, 31 October 2026) */
.door .eye{display:block;width:min(34vw,150px);height:auto;aspect-ratio:2197/1727;color:#1a1a1a;margin:0 0 1.4rem;transform-origin:50% 50%;
  animation:open 1.3s cubic-bezier(.2,.8,.2,1) .15s both}
@keyframes open{0%{transform:scaleY(.04);opacity:0}35%{opacity:1}100%{transform:scaleY(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.door .eye{animation:none}}

/* the word mark under the eye: philosophy in orange, .global in ink (G, 31 October 2026) */
.door .doorwm{font-weight:700;font-size:clamp(1.3rem,3.6vw,1.6rem);letter-spacing:-.005em;color:#1a1a1a;margin:0 0 1rem}
.door .doorwm .c{color:#B34700}

/* ── the canon: the key box (PHI-2), then the map, the card, the bar and the line (PHI-2.1, the reference's canon.css) ── */
.keybox{background:var(--panel);border-radius:10px;padding:.4rem 1.2rem .8rem;margin:1.6rem 0}
.keybox h2{font-size:.82rem;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);margin:1rem 0 .4rem}
.keybox ul{margin:0 0 .6rem}
/* philosophy.global · the canon · PHI-2.1: the snaking map, the detail card, the sticky bar, the line.
   Uses the site's tokens: --paper --panel --ink --grey --line --line2 --accent --accent-hover --sun --ember --grad */
.canon h1{font-size:clamp(40px,7vw,56px);line-height:1.05;margin:48px 0 6px;text-wrap:balance}
.canon .lede{font-size:21px;color:var(--grey);margin:0 0 24px}
.canon .small-h{font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:40px 0 10px}
.canon ul.key{background:var(--panel);border-radius:10px;padding:16px 20px 16px 36px;margin:0 0 12px}
.canon ul.key li{margin:4px 0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* the map: the line, snaking down over four rows (seven on a phone), wider than the text column */
.snake{position:relative;width:min(1080px,calc(100vw - 32px));left:50%;margin:6px 0 18px calc(-1 * min(540px,calc(50vw - 16px)));padding:0}
.snake-svg{display:block;width:100%;height:auto;overflow:visible;-webkit-tap-highlight-color:transparent}
.s-phone{display:none}
.s-bed{fill:none;stroke:var(--panel);stroke-width:22;stroke-linecap:round;stroke-linejoin:round}
.s-road{fill:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.s-phone .s-bed{stroke-width:26}.s-phone .s-road{stroke-width:5}
.s-tick{stroke:var(--line);stroke-width:2}
.s-era{font-family:var(--f);font-weight:700;letter-spacing:.08em;text-transform:uppercase;fill:var(--accent)}
.s-n{font-weight:400;fill:var(--grey);letter-spacing:0}
.sd{cursor:pointer;outline:none}
.sd .hit{fill:transparent}
.sd .pt{fill:var(--paper);stroke:var(--accent);stroke-width:2.6;transform-box:fill-box;transform-origin:center;transition:transform .16s ease,fill .16s ease,opacity .2s}
.sd[data-inf] .pt{fill:var(--accent)}
.sd.last .pt{fill:var(--ember);stroke:var(--sun);stroke-width:4}
.s-end{font-family:var(--f);font-weight:700;fill:var(--accent)}
.sd .halo{fill:none;stroke:var(--ember);stroke-width:2;opacity:.45;transform-box:fill-box;transform-origin:center;animation:halo 2.6s ease-out infinite}
@keyframes halo{0%{transform:scale(.8);opacity:.6}100%{transform:scale(1.5);opacity:0}}
.sd:hover .pt,.sd:focus-visible .pt,.sd.on .pt{fill:var(--ember);stroke:var(--paper);transform:scale(1.55)}
.sd:focus-visible .hit{stroke:var(--ember);stroke-width:2;stroke-dasharray:3 3}
.sd.here .pt{fill:var(--ember);stroke:var(--paper);transform:scale(1.35)}
.sd.dim{opacity:.16}
.sd.dim:hover,.sd.dim.on{opacity:.6}
.snake-key{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;font-size:14px;color:var(--grey);margin:4px 0 0;padding:0 4px}
.snake-key>span{display:inline-flex;align-items:center;gap:6px}
.sw{width:16px;height:16px;flex:none}
.sw circle{stroke-width:2.6}
.sw-t circle{fill:var(--paper);stroke:var(--accent)}
.sw-i circle{fill:var(--accent);stroke:var(--accent)}
.sw-l circle{fill:var(--ember);stroke:var(--sun)}
.snake-key .snake-hint{flex-basis:100%;font-size:13px}

/* the detail card */
.cc{position:absolute;z-index:30;width:390px;max-width:calc(100% - 16px);background:var(--paper);color:var(--ink);border-radius:16px;
  border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
  box-shadow:0 24px 60px rgba(90,40,0,.24),0 3px 10px rgba(0,0,0,.08);display:flex;flex-direction:column;max-height:min(70vh,600px);
  animation:ccin .18s ease-out;text-align:left}
.cc[hidden]{display:none}
@keyframes ccin{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
.cc-bar{height:9px;flex:none;border-radius:16px 16px 0 0;background:var(--grad)}
.cc.is-last .cc-bar{height:14px}
.cc-head{padding:14px 52px 10px 20px;flex:none}
.cc-date{display:block;font-size:34px;font-weight:700;line-height:1;color:var(--accent);font-variant-numeric:tabular-nums;letter-spacing:-.015em;margin:2px 0 8px}
.cc-name{font-size:25px;line-height:1.15;margin:0;text-wrap:balance}
.cc-meta{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;margin:10px 0 0;font-size:14px;color:var(--grey)}
.cc-chip{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:4px;padding:3px 8px;background:var(--panel);color:var(--accent)}
.cc-chip.inf{background:var(--accent);color:#fff}
.cc-body{overflow-y:auto;padding:0 20px;flex:1 1 auto;overscroll-behavior:contain;border-top:1px solid var(--line2)}
.cc-q{padding:14px 0;border-bottom:1px solid var(--line2)}
.cc-q:last-child{border-bottom:0}
.cc-qh{display:flex;gap:8px;align-items:flex-start;margin:0}
.cc-qh .cc-qt{font-size:17px;font-weight:700;line-height:1.3}
.cc-q .mark{flex:none;margin-top:1px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--accent);border-radius:4px;padding:3px 7px}
.cc-q p{margin:8px 0 0;font-size:15.5px;line-height:1.5}
.cc-q p b{color:var(--grey);font-weight:700}
.cc-steps{font-size:14px;color:var(--grey);margin:10px 0 0}
.cc-act{display:flex;gap:8px;align-items:stretch;padding:12px 20px 16px;flex:none;border-top:1px solid var(--line2)}
.cc-go{flex:1 1 auto;display:flex;align-items:center;justify-content:center;text-align:center;background:var(--accent);color:#fff;font-weight:700;font-size:16px;border-radius:10px;padding:10px 14px;text-decoration:none}
.cc-go:hover{background:var(--accent-hover);color:#fff}
.cc-nav{flex:none;font:inherit;font-size:14px;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:8px 12px;cursor:pointer}
.cc-nav:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.cc-nav:disabled{opacity:.35;cursor:default}
.cc-x{position:absolute;top:18px;right:12px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:var(--paper);border:1px solid var(--line);border-radius:50%;cursor:pointer;color:var(--ink);padding:0}
.cc-x:hover{border-color:var(--accent);color:var(--accent)}
.cc-go:focus-visible,.cc-nav:focus-visible,.cc-x:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
.cc-arrow{position:absolute;width:18px;height:18px;background:var(--paper);transform:rotate(45deg);border:1px solid color-mix(in srgb,var(--accent) 22%,transparent)}
.cc.up .cc-arrow{bottom:-10px;border-top:0;border-left:0}
.cc.down .cc-arrow{top:-10px;border-bottom:0;border-right:0;background:var(--sun)}

/* the sticky bar under the map */
.canon-nav{position:sticky;top:var(--barh,0px);z-index:5;background:color-mix(in srgb,var(--paper) 96%,transparent);backdrop-filter:blur(6px);margin:0 -16px;padding:10px 16px 8px;border-bottom:1px solid var(--line)}
.filters{display:flex;flex-wrap:nowrap;gap:8px;align-items:center}
.f-search{flex:1 1 auto;min-width:0}
.f-search input{width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--paper);border:1px solid #9a9a95;border-radius:8px;padding:7px 10px}
.f-inf,.f-toggle{flex:none;font:inherit;font-size:15px;background:var(--paper);color:var(--accent);border:1px solid var(--accent);border-radius:999px;padding:6px 14px;cursor:pointer;white-space:nowrap}
.f-toggle{border-radius:8px}
.f-inf[aria-pressed="true"],.f-toggle[aria-expanded="true"]{background:var(--accent);color:#fff}
.f-inf .n,.era .n{font-weight:400;margin-left:6px;opacity:.75}
.eras{display:flex;gap:6px;margin-top:8px;overflow-x:auto;scrollbar-width:thin;padding-bottom:2px}
.era{flex:none;font:inherit;font-size:14px;font-weight:700;color:var(--grey);background:var(--panel);border:1px solid transparent;border-radius:999px;padding:4px 12px;cursor:pointer;white-space:nowrap}
.era:hover{color:var(--accent);border-color:var(--accent)}
.era[aria-pressed="true"]{background:var(--accent);color:#fff}
.f-panel{display:none;gap:8px 10px;margin-top:10px}
.canon-nav.open .f-panel{display:flex}
.f-panel label{flex:1 1 0;display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--grey);min-width:0}
.f-panel .f-l{letter-spacing:.06em;text-transform:uppercase;font-weight:700}
.f-panel select{width:100%;font:inherit;font-size:15px;color:var(--ink);background:var(--paper);border:1px solid #9a9a95;border-radius:8px;padding:6px 8px}
.f-foot{display:flex;gap:12px;align-items:center;margin-top:6px;min-height:22px;font-size:13px}
.f-count{color:var(--grey)}
.f-clear{font:inherit;font-size:13px;background:var(--accent);color:#fff;border:0;border-radius:6px;padding:4px 10px;cursor:pointer}
.f-clear:hover{background:var(--accent-hover)}
.to-map{margin-left:auto;font-size:13px;white-space:nowrap}
.era:focus-visible,.f-inf:focus-visible,.f-toggle:focus-visible,.f-clear:focus-visible,select:focus-visible,input:focus-visible,.copy:focus-visible,.to-map:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
details.az{margin:14px 0 0;font-size:15px}
details.az summary{cursor:pointer;color:var(--accent);font-weight:700}
details.az p{margin:8px 0 0;line-height:1.9}

/* the line */
.line{position:relative;margin:28px 0 0;padding-left:30px}
.line::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:linear-gradient(var(--sun),var(--ember))}
.node{position:relative;padding:0 0 26px;scroll-margin-top:calc(var(--barh,0px) + var(--navh,120px) + 14px)}
.node::before{content:"";position:absolute;left:-29px;top:9px;width:14px;height:14px;border-radius:50%;background:var(--paper);border:3px solid var(--accent)}
.node[data-influence]::before{background:var(--accent)}
.node-last::before{background:var(--grad);border-color:var(--ember)}
.node-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px}
.node-h .date{font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums;font-size:16px;letter-spacing:.02em}
.node-h h3{font-size:24px;line-height:1.2;margin:0;min-width:0}
.node-h .inf{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--accent);border-radius:4px;padding:2px 8px}
.node-h .copy{margin-left:auto}
.copy{font-size:13px;color:var(--grey);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:1px 10px;opacity:0;transition:opacity .15s}
.node:hover .copy,.copy:focus{opacity:1}
.copy.done{color:var(--accent);border-color:var(--accent);opacity:1}
.q{margin:12px 0 0;padding:12px 0 0;border-top:1px dashed var(--line);scroll-margin-top:calc(var(--barh,0px) + var(--navh,120px) + 14px)}
.node-h + .q{border-top:0;padding-top:4px}
.q h4{font-size:19px;margin:0 0 4px;line-height:1.35}
.q p{margin:6px 0 0}
.mark{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);background:var(--panel);border-radius:4px;padding:1px 7px;margin-right:2px}
.q .steps{font-size:15px}
.q .src{font-size:14px;color:var(--grey)}
.q .src a{color:var(--grey)}
.q .src a:hover{color:var(--accent)}
.q.hide,.node.hide{display:none}
.node.flash>.node-h,.q.flash{animation:flash 1.8s ease-out}
@keyframes flash{0%{background:color-mix(in srgb,var(--sun) 35%,transparent);box-shadow:0 0 0 8px color-mix(in srgb,var(--sun) 35%,transparent)}100%{background:transparent;box-shadow:0 0 0 8px transparent}}
.none{padding:24px 0;color:var(--grey)}

@media (max-width:640px){
  .s-desk{display:none}.s-phone{display:block}
  .snake{margin-top:2px}
  .snake-key{font-size:13px;gap:4px 12px}
  .cc{position:fixed;left:0!important;right:0;bottom:0;top:auto!important;width:auto;max-width:none;max-height:62vh;border-radius:20px 20px 0 0;
    padding-bottom:env(safe-area-inset-bottom,0px);animation:sheet .22s ease-out;z-index:60}
  @keyframes sheet{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
  .cc-bar{border-radius:20px 20px 0 0}
  .cc-arrow{display:none}
  .cc-date{font-size:30px}.cc-name{font-size:23px}
  .eras{display:none}
  .canon-nav.open .eras{display:flex}
  .canon-nav.open .f-panel{flex-wrap:wrap}.f-panel label{flex:1 1 45%}
  .f-inf .n{display:none}
  .line{padding-left:24px}.node::before{left:-23px}.line::before{left:5px}.copy{opacity:1}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
@media print{.snake,.canon-nav,details.az,.copy,.cc{display:none!important}.node{break-inside:avoid}.q.hide,.node.hide{display:block!important}a{color:inherit}}

/* every page (PHI-2, D2 and D3): the focus ring in ember; one print sheet */
:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
.foot .err{font-size:.85rem;margin-top:.8rem}
@media print{
  .bar nav,.skip,.canon-nav,details.az,.copy,.progress,#visits{display:none!important}
  .bar{position:static;border:0}
  .node,.q,.entry,figure.bench{break-inside:avoid}
  .q.hide,.node.hide{display:block!important}
  a{color:inherit!important;text-decoration:none!important}
  body{font-size:12pt}
}

/* Part C: the family row gains studiog.global and artist-g.global (the colour studiog.global gives it) */
.wm.sg .c{color:#2B2B2B} .wm.ag .c{color:#855E2E}