:root{
  --gut:clamp(22px,9vw,150px); --wide:840px; --measure:100%;
  --paper:#f9f6f1; --ink:#141310; --ink2:#2e2b26; --soft:#7a7368; --line:rgba(20,19,16,.14);
  --head:"Schibsted Grotesk",Arial,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace; --serif:"Newsreader",Georgia,serif;
  --c-less:#bfe3c6; --c-same:#e7e0d3; --c-tight:#f6c7a3;
  --ease:cubic-bezier(.7,0,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--paper)}
body{color:var(--ink);font-family:var(--head);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
::selection{background:var(--tone)}

/* ---------- top bar ---------- */
.bar{position:fixed;inset:0 0 auto;z-index:30;display:flex;align-items:center;gap:24px;padding:18px clamp(20px,4vw,56px);background:linear-gradient(var(--paper) 60%,rgba(249,246,241,0));}
.back{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.back i{font-style:normal;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--ink);transition:background .3s,color .3s,transform .4s var(--ease)}
.back:hover i{background:var(--ink);color:var(--paper);transform:translateX(-4px)}
.cur{display:flex;align-items:center;gap:10px;margin-left:clamp(10px,2vw,28px);font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;overflow:hidden;height:16px}
.cur em{font-style:normal;color:var(--soft)}
.cur span{display:inline-block}
.prog{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--tone);transform-origin:left;transform:scaleX(0)}
.who{margin-left:auto;font:500 12px/1 var(--mono);letter-spacing:.08em;color:var(--soft)}
.pager{display:flex;gap:6px}
.pager a{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;text-decoration:none;font:500 11.5px/1 var(--mono);border:1px solid var(--line);transition:background .3s,border-color .3s}
.pager a:hover{background:var(--t);border-color:var(--t)}
.pager a[aria-current]{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ---------- hero ---------- */
.hero{padding-top:clamp(120px,18vh,180px);width:min(var(--wide),100% - 2*var(--gut));margin:0 auto}
.eyebrow{font:500 12px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.eyebrow::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--tone);margin-right:12px;vertical-align:-1px}
h1{margin-top:22px;font:800 clamp(36px,5vw,72px)/1 var(--head);letter-spacing:-.045em}
h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
h1 .w>span{display:inline-block}
.hgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,340px);gap:clamp(28px,5vw,80px);align-items:start;margin-top:clamp(36px,6vh,64px)}
.sum{font:400 clamp(20px,1.7vw,26px)/1.5 var(--serif);color:var(--ink2)}
.sum em{font-style:italic}
.feat{position:relative;background:var(--tone);border-radius:22px;padding:24px 26px 22px;overflow:hidden}
.fk{font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.big{margin-top:14px;font:800 clamp(56px,6vw,88px)/.9 var(--head);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.fl{margin-top:14px;font:600 16px/1.4 var(--head);letter-spacing:-.01em}
.ftop{display:flex;align-items:center;justify-content:space-between}
.info{position:relative;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1.3px solid var(--ink);cursor:help;outline:none}
.info>i{font:600 13px/1 var(--serif);font-style:italic}
.info .tip{position:absolute;right:-8px;top:34px;z-index:5;width:280px;padding:14px 16px;border-radius:14px;background:var(--ink);color:var(--paper);font:400 12.5px/1.55 var(--mono);opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .25s,transform .35s var(--ease);box-shadow:0 20px 40px -20px rgba(0,0,0,.45)}
.info .tip::before{content:"";position:absolute;right:14px;top:-5px;width:10px;height:10px;background:var(--ink);transform:rotate(45deg)}
.info:hover .tip,.info:focus .tip{opacity:1;transform:none}
.big{display:flex;align-items:flex-start;gap:.06em}
.big .up{display:inline-block;width:.62em;height:.78em;margin:.06em .04em 0 0;flex:none}
.big .up svg{display:block;width:100%;height:100%}
.rss{display:grid;grid-template-columns:1fr 1.6fr 1.2fr;margin-top:clamp(40px,7vh,72px);border-top:1.5px solid var(--ink)}
.rss div{padding:18px 24px 0 0}
.rss div+div{padding-left:24px;border-left:1px solid var(--line)}
.rss dt{font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.rss dd{margin-top:10px;font:500 17px/1.4 var(--head);letter-spacing:-.01em}

/* ---------- layout ---------- */
.layout{width:min(var(--wide),100% - 2*var(--gut));margin:clamp(70px,12vh,130px) auto 0}
/* right-edge outline (Notion-style lines, labels on hover) */
.mini{position:fixed;right:clamp(10px,1.6vw,26px);top:50%;transform:translateY(-50%);z-index:25}
.ticks{list-style:none;display:flex;flex-direction:column;align-items:flex-end;gap:9px;padding:10px 0}
.ticks li{height:2px;width:14px;border-radius:2px;background:rgba(20,19,16,.22);transition:width .35s var(--ease),background .3s}
.ticks li.sub{width:8px}
.ticks li.on{width:24px;background:var(--ink)}
.pop{position:absolute;right:-8px;top:50%;transform:translate(8px,-50%);min-width:240px;max-height:80vh;overflow:auto;padding:16px 8px 10px;border-radius:16px;background:#fffdf9;border:1px solid var(--line);box-shadow:0 24px 50px -28px rgba(20,19,16,.4);opacity:0;pointer-events:none;transition:opacity .25s,transform .35s var(--ease)}
.mini:hover .pop,.mini:focus-within .pop,.mini.open .pop{opacity:1;transform:translate(0,-50%);pointer-events:auto}
.pop p{font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--soft);padding:0 10px 10px}
.pop ol{list-style:none}
.pop a{display:block;padding:7px 10px;border-radius:9px;text-decoration:none;font:500 14px/1.3 var(--head);color:var(--soft)}
.pop a.sub{padding-left:22px;font-size:13px}
.pop a:hover{background:#f2ece2;color:var(--ink)}
.pop a.on{color:var(--ink)}
.pop a.on::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--tone);margin:0 8px 1px -14px;outline:1px solid var(--ink)}
.art{min-width:0}
.sec>h3,.sec>p,.sec>.pull,.sec>.eq,.sec>.tw,.sec>.sl{max-width:var(--measure);margin-left:auto!important;margin-right:auto!important}
.closing{max-width:var(--measure);margin-left:auto!important;margin-right:auto!important}

.sec{padding-bottom:clamp(60px,10vh,110px)}
.sl{display:flex;align-items:center;gap:14px;font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;padding-bottom:16px;margin-bottom:34px;border-bottom:1.5px solid var(--ink)}
.sl em{font-style:normal;margin-left:auto;padding:6px 10px;border-radius:999px;background:var(--tone);letter-spacing:.08em}
.tsec .sl em{background:transparent;border:1px solid var(--ink)}
.art h3{font:700 clamp(26px,2.4vw,36px)/1.12 var(--head);letter-spacing:-.03em;margin:56px 0 20px}
.art .sec>h3:first-of-type{margin-top:0}
.art h3.step{display:flex;gap:18px;align-items:baseline}
.art h3.step span{flex:none;font:500 13px/1 var(--mono);letter-spacing:.06em;color:var(--soft);transform:translateY(-4px)}
.art p{font:400 clamp(18px,1.3vw,20px)/1.62 var(--serif);color:var(--ink2);margin-bottom:18px}
.art p b,.art td b{font-weight:600;color:var(--ink)}
.hl{font-weight:500;background:linear-gradient(color-mix(in srgb,var(--tone) 60%,transparent),color-mix(in srgb,var(--tone) 60%,transparent)) no-repeat 0 96%/100% 32%;transition:background-size 1.1s var(--ease) .25s;color:var(--ink)}
.in .hl,.hl.in{background-size:100% 32%}
.pull{margin:44px 0;padding:6px 0 6px 28px;border-left:4px solid var(--tone)}
.pull p{font:italic 400 clamp(24px,2.2vw,32px)/1.35 var(--serif)!important;color:var(--ink)!important}

/* ---------- figures ---------- */
.fig{margin:44px 0 52px;padding:26px clamp(18px,2.4vw,30px) 22px;background:#fffdf9;border:1px solid var(--line);border-radius:22px}
.fh{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-bottom:22px}
.fn{font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.ft{font:700 19px/1.25 var(--head);letter-spacing:-.015em}
.tag{display:none;margin-left:auto;font:500 10.5px/1.2 var(--mono);letter-spacing:.06em;padding:6px 10px;border-radius:999px;border:1px dashed var(--ink);white-space:nowrap}
.t-reported{border-style:solid;background:var(--ink);color:var(--paper)}
.t-concept{border-color:var(--soft);color:var(--soft)}
.cap{margin:18px 0 0!important;font:400 13px/1.6 var(--mono)!important;color:var(--soft)!important}
.fb>*+*{margin-top:22px}

/* tables */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font:400 15px/1.45 var(--head)}
th{text-align:left;font:500 11px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--soft);padding:0 14px 12px 0;border-bottom:1.5px solid var(--ink);vertical-align:bottom}
td{padding:14px 14px 14px 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink2)}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
tr.tot td{font-weight:600;color:var(--ink);border-bottom:none;border-top:1.5px solid var(--ink)}
table.lim td:last-child{color:var(--soft);font-style:italic;font-family:var(--serif);font-size:16px}
table.sym td:first-child{width:120px;color:var(--ink)}
.tw+p,.tw+.eq{margin-top:26px}
table.compact{max-width:560px}
.art .tw p{margin:0}
.im svg{vertical-align:middle}

/* transition matrix */
table.matrix{table-layout:fixed;border-collapse:separate;border-spacing:6px;margin:-6px}
table.matrix th{border:none;padding:6px 8px;text-align:center}
table.matrix th.corner{text-align:left;text-transform:none;letter-spacing:.02em;font-size:11px}
table.matrix tbody th{text-align:left;color:var(--ink);font-size:12px}
table.matrix td{border:none;border-radius:12px;padding:20px 10px;text-align:center;font:600 14px/1.2 var(--head);color:var(--ink)}
.m-less{background:var(--c-less)} .m-same{background:var(--c-same)} .m-tight{background:var(--c-tight)}

/* rollout stages */
.stages{list-style:none;counter-reset:s}
.stages li{counter-increment:s;position:relative;display:grid;grid-template-columns:44px 190px minmax(0,1fr);gap:4px 16px;align-items:start;padding:16px 0;border-bottom:1px solid var(--line)}
.stages li::before{content:counter(s,decimal-leading-zero);font:500 12px/1.6 var(--mono);color:var(--soft)}
.stages b{font:700 16px/1.4 var(--head)}
.stages span{font:400 15px/1.5 var(--head);color:var(--ink2)}
.roll{grid-column:3;display:flex;gap:6px;font-style:normal;margin-top:8px}
.roll i{font:500 12px/1 var(--mono);font-style:normal;padding:7px 0;border-radius:999px;background:var(--tone);text-align:center;transform-origin:left}
.roll i:nth-child(1){width:14%} .roll i:nth-child(2){width:30%} .roll i:nth-child(3){width:56%;background:var(--ink);color:var(--paper)}

/* quadrant */
.quad{display:grid;grid-template-columns:24px minmax(0,1fr);grid-template-rows:auto 26px;gap:8px}
.qy{grid-row:1;writing-mode:vertical-rl;transform:rotate(180deg);font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--soft);text-align:center}
.qx{grid-column:2;font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--soft);text-align:center;align-self:end}
.qy i,.qx i{font-style:normal;color:var(--ink)}
.qg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.q{position:relative;border-radius:16px;padding:22px 22px 18px;min-height:150px;display:flex;flex-direction:column;gap:8px}
.q b{font:700 21px/1.15 var(--head);letter-spacing:-.02em}
.q span{font:400 17px/1.45 var(--serif);color:var(--ink2)}
.q em{margin-top:auto;font:500 10.5px/1 var(--mono);font-style:normal;letter-spacing:.06em;color:var(--soft);text-transform:uppercase}
.q1{background:#ece6da} .q2{background:var(--tone)} .q3{background:#f2ece2;border:1px dashed rgba(20,19,16,.3)} .q4{background:#f2ece2}

/* interactive matrix (case 01) */
.mx-steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:20px;counter-reset:x}
.mx-steps li{min-height:64px}
.mx-steps li{display:flex;gap:10px;align-items:center;justify-content:center;text-align:left;font:500 13.5px/1.35 var(--head);padding:12px;border-radius:12px;background:#f2ece2;color:var(--soft);transition:background .4s,color .4s}
.mx-steps li i{flex:none;font:500 11px/1 var(--mono);font-style:normal;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1px solid currentColor}
.mx-steps li.lit{background:var(--tone);color:var(--ink)}
.mx-ctl{display:flex;align-items:center;gap:6px;margin-bottom:18px;flex-wrap:wrap}
.mx-ctl span{font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--soft);margin-right:8px}
.mx-ctl button{font:600 14px/1 var(--head);padding:10px 16px;border-radius:999px;border:1px solid var(--ink);background:transparent;cursor:pointer;transition:background .3s,color .3s}
.mx-ctl button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.mx-body{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:28px;align-items:start}
.mx-wrap{display:grid;grid-template-columns:22px minmax(0,1fr);grid-template-rows:auto 24px;gap:6px}
.mx-y{grid-row:1;writing-mode:vertical-rl;transform:rotate(180deg);text-align:center;font:500 10.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
.mx-x{grid-column:2;text-align:center;font:500 10.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--soft);align-self:end}
.mx-y i,.mx-x i{font-style:normal;text-transform:none;color:var(--ink2)}
.mx-grid{display:grid;grid-template-columns:22px repeat(5,minmax(0,1fr));gap:5px}
.mx-h,.mx-r{display:grid;place-items:center;font:500 12px/1 var(--mono);color:var(--ink2)}
.mx-h{padding-bottom:4px}
.mc{position:relative;aspect-ratio:1.25;border:none;border-radius:10px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--ink);transition:background .5s ease,transform .3s var(--ease),box-shadow .3s}
.mc b{font:700 clamp(13px,1.2vw,16px)/1 var(--head);font-variant-numeric:tabular-nums}
.mc span{font:500 9.5px/1 var(--mono);letter-spacing:.06em;opacity:.7}
.mc.t1{background:var(--c-less)} .mc.t2{background:var(--c-same)} .mc.t3{background:var(--c-tight)}
.mc.thin::after{content:"";position:absolute;inset:0;border-radius:10px;background:repeating-linear-gradient(-45deg,transparent 0 5px,rgba(20,19,16,.13) 5px 6px)}
.mc:hover,.mc:focus-visible{transform:scale(1.08);box-shadow:0 0 0 2px var(--ink);z-index:2;outline:none}
.mc.flip b{animation:flip .5s var(--ease)}
@keyframes flip{0%{transform:translateY(0);opacity:1}45%{transform:translateY(-8px);opacity:0}55%{transform:translateY(8px);opacity:0}100%{transform:none;opacity:1}}
.mx-k{font:500 11px/1 var(--mono)!important;letter-spacing:.1em;text-transform:uppercase;color:var(--soft)!important;margin:0 0 12px!important}
.mx-leg{list-style:none}
.mx-leg li{display:grid;grid-template-columns:14px 1fr;gap:2px 10px;padding:9px 0;border-top:1px solid var(--line)}
.mx-leg li::before{content:"";grid-row:1/3;width:14px;height:14px;border-radius:4px;margin-top:2px}
.mx-leg .t1::before{background:var(--c-less)}.mx-leg .t2::before{background:var(--c-same)}.mx-leg .t3::before{background:var(--c-tight)}
.mx-leg .thin::before{background:repeating-linear-gradient(-45deg,#e7e0d3 0 4px,#bdb5a7 4px 5px)}
.mx-leg b{font:600 14px/1.2 var(--head)}
.mx-leg span{font:400 13px/1.4 var(--head);color:var(--ink2)}
.mx-read{margin:14px 0 0!important;padding:12px 14px;border-radius:12px;background:#f2ece2;font:400 12.5px/1.5 var(--mono)!important;color:var(--ink)!important;min-height:64px}
.js .mc{opacity:0;transform:scale(.6)}
.js .in .mc{opacity:1;transform:none;transition:opacity .5s ease calc(var(--d)*.07s + .5s),transform .6s cubic-bezier(.3,1.4,.5,1) calc(var(--d)*.07s + .5s),background .5s}
.js .in .mc:hover{transform:scale(1.08);transition-delay:0s}

/* timing (case 04) */
.timing{display:grid;grid-template-columns:1fr 40px 1fr;align-items:stretch}
.tc{border-radius:16px;padding:20px 22px;background:#f2ece2}
.tc.on{background:var(--tone)}
.tk{font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.tc ul{list-style:none;margin-top:14px}
.tc li{font:400 16px/1.45 var(--serif);padding:9px 0;border-top:1px solid rgba(20,19,16,.15)}
.tarrow{display:grid;place-items:center;font:500 24px/1 var(--head)}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.cards3 div{border-radius:16px;padding:16px 18px;background:#f2ece2;display:flex;flex-direction:column;justify-content:center}
.cards3 .on{background:var(--tone)}
.cards3 span{display:block;font:500 11px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.cards3 b{display:inline-block;margin-top:12px;font:800 44px/1 var(--head);letter-spacing:-.04em}
.cards3 em{font:500 12px/1 var(--mono);font-style:normal;margin-left:6px;color:var(--soft)}

/* equations */
.eq{display:flex;align-items:center;gap:12px;margin:22px 0}
.eq-m{display:inline-block;max-width:100%;overflow-x:auto;padding:16px 26px;border-radius:14px;background:#f3ede3;font-size:clamp(17px,1.4vw,20px);color:var(--ink)}
.fig .eq-m{background:#f6f1e8}
.eq-m svg{max-width:100%;height:auto;display:block}
.cp{flex:none;border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:6px 10px;font:500 10.5px/1 var(--mono);letter-spacing:.04em;cursor:pointer;opacity:0;transition:opacity .25s,background .25s}
.eq:hover .cp,.cp:focus-visible{opacity:1}
.cp.ok{background:var(--tone);opacity:1}
.eq-n{display:none}

/* technical notes */
details.tech{margin:34px 0 40px;border-radius:18px;border:1px dashed rgba(20,19,16,.35);background:rgba(255,253,249,.6);transition:background .3s,border-color .3s}
details.tech[open]{background:#fffdf9;border-style:solid;border-color:var(--line)}
.tech summary{list-style:none;display:flex;align-items:center;gap:14px;padding:18px 20px;cursor:pointer}
.tech summary::-webkit-details-marker{display:none}
.tech .tl{flex:none;font:500 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:6px 9px;border-radius:999px;background:var(--tone)}
.tech .tt2{font:700 clamp(17px,1.4vw,20px)/1.3 var(--head);letter-spacing:-.015em}
.tech summary i{margin-left:auto;flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1px solid var(--ink);font:400 20px/1 var(--head);font-style:normal;transition:transform .4s var(--ease),background .3s}
.tech summary:hover i{background:var(--tone)}
.tech[open] summary i{transform:rotate(45deg)}
.tin{padding:4px clamp(20px,4vw,48px) 26px}
.tin>p,.tin>.eq,.tin>.tw{max-width:calc(var(--measure) - 40px)}
.tin .fig{margin:20px 0}
/* closing */
.closing{margin-top:10px;margin-bottom:40px;padding:34px 0 0;border-top:1.5px solid var(--ink);display:grid;grid-template-columns:140px minmax(0,1fr);gap:20px}
.closing span{font:500 11px/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.closing span::before{content:"";display:block;width:28px;height:4px;border-radius:2px;background:var(--tone);margin-bottom:12px}
.closing p{margin:0!important;font:400 clamp(24px,2.3vw,34px)/1.38 var(--serif)!important;color:var(--ink)!important;letter-spacing:-.005em}

/* ---------- footer ---------- */
.foot{width:min(var(--wide),100% - 2*var(--gut));margin:clamp(40px,8vh,90px) auto 0;padding-bottom:70px}
.disc{max-width:62em;font:400 12.5px/1.65 var(--mono);color:var(--soft);padding:22px 0;border-top:1px solid var(--line)}
.next{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:6px 20px;margin-top:30px;padding:clamp(24px,3.4vw,40px) clamp(22px,3vw,40px);border-radius:24px;background:var(--t);text-decoration:none;overflow:hidden}
.nk{grid-column:1;font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.nt{grid-column:1;font:800 clamp(26px,3vw,42px)/1.05 var(--head);letter-spacing:-.045em;transition:transform .55s var(--ease)}
.next i{grid-column:2;grid-row:1/3;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--ink);color:var(--paper);font:500 22px/1 var(--head);font-style:normal;transition:transform .55s var(--ease)}
.next:hover .nt{transform:translateX(12px)}
.next:hover i{transform:rotate(-45deg)}
.home{display:inline-block;margin-top:26px;font:500 12px/1 var(--mono);letter-spacing:.08em;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:4px}

/* ---------- flow diagrams ---------- */
.flow{overflow-x:auto}
.flow svg{display:block;width:100%;min-width:640px;height:auto;color:var(--ink)}
.fnode rect,.fnode path{fill:#fffdf9;stroke:var(--ink);stroke-width:1.3}
.fnode text{font:500 14px var(--head);fill:var(--ink);text-anchor:middle;letter-spacing:-.005em}
.fnode.tone rect{fill:var(--tone);stroke:none}
.fnode.dark rect{fill:var(--ink)} .fnode.dark text{fill:var(--paper)}
.fnode.in rect{fill:#f2ece2;stroke:none}
.fnode.qq rect{stroke-dasharray:4 4;fill:#f9f6f1}
.fnode.qq text{font-family:var(--serif);font-style:italic;font-size:15px}
.fnode.q path{fill:#f2ece2;stroke:none}
.fnode.stop rect{fill:#f6c7a3;stroke:none}
.fe{fill:none;stroke:currentColor;stroke-width:1.3;stroke-linejoin:round}
.fe.dash{stroke-dasharray:.012 .012;stroke:var(--soft)}
.el{font:500 11px var(--mono);fill:var(--soft);text-anchor:middle;letter-spacing:.04em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- charts ---------- */
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart.narrow{max-width:720px}
.gl{stroke:rgba(20,19,16,.1)}
.ax{font:400 11.5px var(--mono);fill:var(--soft)}
.ax.lg{fill:var(--ink2)}
.cl{font:600 14px var(--head);fill:var(--ink)}
.sv{font:600 14px var(--head);fill:var(--ink)}
.dl{font:500 12.5px var(--mono);fill:var(--ink)}
.dl.ben{fill:var(--soft)}
.ln{fill:none;stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round}
.ln.seg{stroke:var(--ink)} .ln.ben{stroke:var(--soft);stroke-dasharray:.02 .015;stroke-width:2}
.dot.seg{fill:var(--ink)} .dot.ben{fill:var(--paper);stroke:var(--soft);stroke-width:2}
.cbar rect{fill:var(--tone)}
.avg{stroke:var(--ink);stroke-width:1.4;stroke-dasharray:6 5}
.track{fill:#ece6da} .fill{fill:var(--tone)}
.tk{stroke:var(--soft)}
.mk{stroke:var(--ink);stroke-width:2;stroke-dasharray:3 3} .mk.on{stroke-dasharray:none}
.brk{fill:none;stroke:var(--ink);stroke-width:1.5}
.gap{font:700 15px var(--head);fill:var(--ink)}
.cbar.h rect.old{fill:#d8d1c4} .cbar.h rect.new{fill:var(--tone)}

/* ---------- motion (enabled by JS) ---------- */
/* body text, headings, notes and formulas appear as they are; only figures animate */
.js .fig[data-r]{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .9s cubic-bezier(.16,.84,.24,1)}
.js .fig[data-r].in{opacity:1;transform:none}
.js .fnode{opacity:0;transform:translateY(10px);transform-box:fill-box;transition:opacity .6s ease calc(var(--i)*.09s + .1s),transform .6s cubic-bezier(.2,.7,.2,1) calc(var(--i)*.09s + .1s)}
.js .in .fnode{opacity:1;transform:none}
.js .fe{stroke-dashoffset:1;stroke-dasharray:1 1;transition:stroke-dashoffset 1s var(--ease) calc(var(--i)*.1s + .35s)}
.js .fe.dash{stroke-dasharray:.012 .012;stroke-dashoffset:0;opacity:0;transition:opacity .8s ease 1.2s}
.js .in .fe{stroke-dashoffset:0}
.js .in .fe.dash{opacity:1}
.js .el{opacity:0;transition:opacity .6s ease 1.2s}.js .in .el{opacity:1}
.js .seg,.js .cbar{transform-box:fill-box;transition:transform 1s var(--ease) calc(var(--i)*.12s + .2s)}
.js .seg{transform:scaleX(0);transform-origin:left}
.js .cbar{transform:scaleY(0);transform-origin:bottom}
.js .cbar.h{transform:scaleX(0);transform-origin:left}
.js .in .seg,.js .in .cbar{transform:none}
.js .ln{stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s var(--ease) .2s}
.js .in .ln{stroke-dashoffset:0}
.js .ln.ben{stroke-dasharray:.02 .015;stroke-dashoffset:0;opacity:0;transition:opacity .8s ease .2s}
.js .in .ln.ben{opacity:1}
.js .dot{opacity:0;transition:opacity .4s ease calc(var(--i)*.35s + .3s)}
.js .in .dot{opacity:1}
.js .brk{stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset .8s var(--ease) 1.1s}
.js .in .brk{stroke-dashoffset:0}
.js .gap{opacity:0;transition:opacity .5s ease 1.6s}
.js .in .gap{opacity:1}
.js .fill{transform-box:fill-box;transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease) .3s}
.js .in .fill{transform:none}
.js .m-less,.js .m-same,.js .m-tight{opacity:0;transform:scale(.92);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.js .in .m-less,.js .in .m-same,.js .in .m-tight{opacity:1;transform:none}
.js .in tr:nth-child(2) td{transition-delay:.15s}.js .in tr:nth-child(3) td{transition-delay:.3s}
.js .roll i{transform:scaleX(0);transition:transform .8s var(--ease)}
.js .in .roll i{transform:none}.js .in .roll i:nth-child(2){transition-delay:.3s}.js .in .roll i:nth-child(3){transition-delay:.6s}
.js .q{opacity:0;transform:scale(.94);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.js .in .q{opacity:1;transform:none}
.js .in .q2{transition-delay:.12s}.js .in .q3{transition-delay:.24s}.js .in .q4{transition-delay:.36s}


/* ---------- responsive ---------- */

/* case 02: factors, zones, recency */
.factors{list-style:none;max-width:var(--measure);margin:26px auto 10px;display:grid;gap:10px}
.factors li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:center;padding:16px 20px;border-radius:16px;background:#fffdf9;border:1px solid var(--line)}
.factors li>span{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--tone);font:500 12px/1 var(--mono)}
.factors b{font:700 17px/1.3 var(--head);letter-spacing:-.01em}
.art .factors p{margin:4px 0 0;font-size:16.5px;line-height:1.5}
.factors li:last-child>span{background:var(--ink);color:var(--paper)}
.zq rect{fill:#efe9de}
.zq.q-b rect{fill:var(--tone)}
.zq.q-c rect{fill:#e9e2d5}
.zn{font:700 17px var(--head);fill:var(--ink);letter-spacing:-.01em}
.za{font:400 12.5px var(--mono);fill:var(--ink2)}
.zb{fill:#fffdf9;stroke:var(--ink);stroke-width:1.3}
.zq.q-b~.zb{fill:#fffdf9}
.zax{fill:none;stroke:var(--ink);stroke-width:1.3;color:var(--ink)}
.zal{font:500 11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;fill:var(--ink)}
.zleg circle{fill:none;stroke:var(--ink);stroke-width:1.2}
.zleg text{font:400 11.5px var(--mono);fill:var(--soft)}
.zv circle{fill:#f6c7a3;stroke:var(--ink);stroke-width:1.3;stroke-dasharray:3 3}
.zv text{font:700 15px var(--head);fill:var(--ink)}
.zv-path{fill:none;stroke:var(--ink);stroke-width:1.2;stroke-dasharray:.015 .012}
.zvl{font:500 11.5px var(--mono);fill:var(--ink);letter-spacing:.04em}
.rb rect{fill:#e7e0d3}
.rb.r1 rect{fill:var(--tone)}
.rw{font:600 13.5px var(--head);fill:var(--ink)}
.rt{font:400 13px var(--head);fill:var(--ink2)}
.rarr{fill:none;stroke:var(--ink);stroke-width:2.2}
.rhead{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linejoin:round}
.rtick{stroke:var(--ink);stroke-width:2.2}
.rend{font:500 11.5px var(--mono);fill:var(--ink);letter-spacing:.04em}
.rend.soft{fill:var(--soft)}
.js .zq{opacity:0;transform:scale(.94);transform-box:fill-box;transform-origin:center;transition:opacity .6s ease calc(var(--i)*.12s),transform .7s cubic-bezier(.2,.7,.2,1) calc(var(--i)*.12s)}
.js .in .zq{opacity:1;transform:none}
.js .zb{transform:scale(0);transform-box:fill-box;transform-origin:center;transition:transform .7s cubic-bezier(.3,1.5,.5,1) calc(var(--i)*.06s + .6s)}
.js .in .zb{transform:none}
.js .zv{opacity:0;transition:opacity .4s ease 1.6s,transform 1.4s var(--ease) 2.4s}
.js .in .zv{opacity:1;transform:translate(var(--dx),var(--dy))}
.js .zv-path{opacity:0;transition:opacity .6s ease 2.2s}.js .zvl{opacity:0;transition:opacity .6s ease 3.6s}
.js .in .zv-path,.js .in .zvl{opacity:1}
.js .zax,.js .zal,.js .zleg{opacity:0;transition:opacity .6s ease .3s}
.js .in .zax,.js .in .zal,.js .in .zleg{opacity:1}
.js .rb rect{transform:scaleY(0);transform-box:fill-box;transform-origin:bottom;transition:transform .9s var(--ease) calc(var(--i)*.25s + .8s)}
.js .in .rb rect{transform:none}
.js .rw{opacity:0;transition:opacity .5s ease calc(var(--i)*.25s + 1.4s)}
.js .in .rw{opacity:1}
.js .rarr{stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset 1s var(--ease) .1s}
.js .in .rarr{stroke-dashoffset:0}
.js .rhead{opacity:0;transition:opacity .3s ease 1s}.js .in .rhead{opacity:1}

/* extra motion */
.js .fig tbody tr{opacity:0;transform:translateX(-14px);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.js .in tbody tr{opacity:1;transform:none}
.js .in tbody tr:nth-child(2){transition-delay:.08s}.js .in tbody tr:nth-child(3){transition-delay:.16s}.js .in tbody tr:nth-child(4){transition-delay:.24s}.js .in tbody tr:nth-child(5){transition-delay:.32s}
.js .stages li{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .6s ease}
.js .in .stages li{opacity:1;transform:none}
.js .in .stages li:nth-child(2){transition-delay:.12s}.js .in .stages li:nth-child(3){transition-delay:.24s}.js .in .stages li:nth-child(4){transition-delay:.36s}.js .in .stages li:nth-child(5){transition-delay:.48s}
.js .tc{opacity:0;transform:translateX(-20px);transition:opacity .6s ease,transform .8s var(--ease)}
.js .tc.on{transform:translateX(20px);transition-delay:.45s}
.js .in .tc{opacity:1;transform:none}
.js .tarrow{opacity:0;transition:opacity .4s ease .35s}.js .in .tarrow{opacity:1}
.js .cards3 div{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .6s ease}
.js .in .cards3 div{opacity:1;transform:none}.js .in .cards3 div:nth-child(2){transition-delay:.15s}.js .in .cards3 div:nth-child(3){transition-delay:.3s}
.js .mk.on{transition:transform 1.2s var(--ease) .4s}
.js .mx-steps li{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease,background .4s,color .4s}
.js .in .mx-steps li{opacity:1;transform:none}
.js .in .mx-steps li:nth-child(2){transition-delay:.1s}.js .in .mx-steps li:nth-child(3){transition-delay:.2s}.js .in .mx-steps li:nth-child(4){transition-delay:.3s}

@media (max-width:1000px){
  .mini{display:none}
  .mx-body{grid-template-columns:1fr}
  .mx-steps{grid-template-columns:1fr 1fr}
  .hgrid{grid-template-columns:1fr}
}
@media (max-width:700px){
  .who{display:none}
  .closing{grid-template-columns:1fr}
  .rss{grid-template-columns:1fr}
  .rss div+div{padding-left:0;border-left:none;border-top:1px solid var(--line);margin-top:16px}
  .qg{grid-template-columns:1fr}
  .timing{grid-template-columns:1fr}.tarrow{transform:rotate(90deg);padding:8px}
  .cards3{grid-template-columns:1fr 1fr 1fr}.cards3 b{font-size:30px}
  .stages li{grid-template-columns:34px minmax(0,1fr)}.stages span,.roll{grid-column:2}
  .tag{display:none;margin-left:0;white-space:normal}
  .cp{display:none}
}
