/* Layout: one blue masthead, four topic tabs, each panel opens with a single take-home line and a then/now bar chart, detail below. Left aligned. */
:root{
  --bg:#F4F5FA; --surface:#FFFFFF; --ink:#0A1433; --muted:#55607D; --line:#D8DCEA;
  --blue:#0021A5; --orange:#FA4616; --orange-ink:#B5300B; --then:#7E86A0;
  --tint:#E8ECFB; --warm:#FFEFE8; --band:#0021A5; --band-ink:#FFFFFF; --band-soft:#C9D2FF;
  --display:"Archivo","Arial Narrow",Arial,sans-serif; --body:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#070C26; --surface:#0F173F; --ink:#EEF1FB; --muted:#A5AECB; --line:#28326B;
  --blue:#93A6FF; --orange:#FF7A4D; --orange-ink:#FF9C7A; --then:#5C6690;
  --tint:#17215A; --warm:#3A1C13; --band:#0B1450; --band-ink:#FFFFFF; --band-soft:#B9C4FF; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#070C26; --surface:#0F173F; --ink:#EEF1FB; --muted:#A5AECB; --line:#28326B;
  --blue:#93A6FF; --orange:#FF7A4D; --orange-ink:#FF9C7A; --then:#5C6690;
  --tint:#17215A; --warm:#3A1C13; --band:#0B1450; --band-ink:#FFFFFF; --band-soft:#B9C4FF; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55}
.wrap{max-width:1040px;margin:0 auto;padding-inline:20px}
a{color:var(--blue)}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0;line-height:1.08}
.mast{background:var(--band);color:var(--band-ink);padding-block:40px 28px}
.mast h1{font-size:clamp(2.4rem,7vw,4.4rem);font-weight:800;font-stretch:78%;letter-spacing:-.01em}
.mast h1 span{display:block;color:var(--band-soft);font-weight:500}
.mast p{max-width:60ch;margin:16px 0 0;color:var(--band-soft)}
.mast .rule{width:88px;height:8px;background:var(--orange);margin-top:22px}
.tabs{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);border-bottom:1px solid var(--line)}
.tabs .wrap{display:flex;gap:6px;flex-wrap:wrap;padding-block:10px}
.tabs button{font:600 .95rem var(--display);font-stretch:88%;padding:9px 14px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:4px;cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--blue);border-color:var(--blue);color:var(--bg)}
.panel{padding-block:34px 56px;display:flex;flex-direction:column;gap:34px}
.panel[hidden]{display:none}
.panel>header h2{font-size:clamp(1.9rem,4.6vw,2.9rem);font-weight:800;font-stretch:80%}
.panel>header p{color:var(--muted);margin:8px 0 0;max-width:65ch}
.take{background:var(--tint);padding:22px 24px;font:600 clamp(1.15rem,2.6vw,1.5rem)/1.3 var(--display);font-stretch:90%}
.take small{display:block;font:500 .82rem var(--body);color:var(--muted);margin-bottom:8px}
.blk{display:flex;flex-direction:column;gap:14px;min-width:0}
.blk>h3{font-size:1.3rem;font-weight:700;font-stretch:88%}
.blk>p,.blk li{max-width:68ch;margin:0}
.blk ul,.blk ol{margin:0;padding-left:1.15rem;display:flex;flex-direction:column;gap:6px}
.g2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.g3{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.g4{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:18px;display:flex;flex-direction:column;gap:8px;min-width:0}
.card h4{font:700 1.05rem var(--display);font-stretch:90%;margin:0}
.card p,.card ul{margin:0;font-size:.95rem}
.card ul{padding-left:1.1rem}
.card.hot{background:var(--warm);border-color:transparent}
.big{font:800 2.2rem/1 var(--display);font-stretch:80%;font-variant-numeric:tabular-nums}
.big small{font:500 .85rem var(--body);color:var(--muted)}
.tag{display:inline-block;font:600 .75rem var(--body);padding:2px 8px;border-radius:99px;background:var(--tint);color:var(--ink)}
.tag.o{background:var(--warm);color:var(--orange-ink)}
/* then / now bars: grey = before, blue = now, one scale per chart, stated in the caption */
.tn{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:18px 18px 12px;display:flex;flex-direction:column;gap:14px}
.tn .pair{display:flex;flex-direction:column;gap:4px}
.tn .pair>b{font:600 .9rem var(--body)}
.tn .row{display:grid;grid-template-columns:minmax(96px,210px) 1fr 76px;gap:10px;align-items:center;font-size:.86rem}
.tn .row span:first-child{color:var(--muted)}
.tn .track{height:16px;border-left:1px solid var(--line)}
.tn .bar{height:100%;width:calc(var(--v)/var(--max)*100%);background:var(--then);border-radius:0 4px 4px 0}
.tn .now .bar{background:var(--blue)}
.tn .row em{font:700 .95rem var(--display);font-style:normal;font-variant-numeric:tabular-nums}
.tn .key{display:flex;gap:16px;font-size:.8rem;color:var(--muted);flex-wrap:wrap}
.tn .key i{display:inline-block;width:12px;height:12px;border-radius:2px;background:var(--then);margin-right:6px;vertical-align:-1px}
.tn .key i.n{background:var(--blue)}
.tn figcaption,.cap{font-size:.8rem;color:var(--muted);margin:0}
.scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:.9rem;min-width:560px}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{font:600 .8rem var(--body);color:var(--muted)}
td.n{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
details.q{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:14px 18px}
details.q summary{cursor:pointer;font-weight:600}
details.q p{margin:10px 0 0;max-width:68ch}
.src{font-size:.8rem;color:var(--muted);border-top:1px solid var(--line);padding-top:14px}
.src ol{margin:6px 0 0;padding-left:1.2rem;columns:2 320px;column-gap:28px}
.src li{break-inside:avoid;margin-bottom:4px}
.flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.flow .card b{font-family:var(--display)}
.strip{display:grid;grid-template-columns:110px repeat(6,minmax(64px,1fr));gap:4px;min-width:560px;font-size:.8rem}
.strip div{padding:8px 6px;border-radius:3px;background:var(--surface);border:1px solid var(--line)}
.strip .h{background:none;border:0;font-weight:600;color:var(--muted)}
.strip .on{background:var(--blue);border-color:var(--blue);color:var(--bg);font-weight:600}
.strip .m{background:var(--orange);border-color:var(--orange);color:#1A0A04;font-weight:600}
.calc{display:flex;flex-wrap:wrap;gap:16px;align-items:end}
.calc label{display:flex;flex-direction:column;gap:4px;font-size:.85rem;font-weight:600}
.calc input{font:600 1.1rem var(--body);padding:8px 10px;width:120px;border:1px solid var(--line);border-radius:4px;background:var(--bg);color:var(--ink)}
.calc output{font-size:.95rem;max-width:60ch}
footer{padding-block:24px 48px;color:var(--muted);font-size:.8rem;border-top:1px solid var(--line)}
@media (max-width:520px){.tn .row{grid-template-columns:1fr 64px}.tn .row span:first-child{grid-column:1/-1}}

.brand{display:inline-block;font:700 1rem var(--display);font-stretch:90%;color:var(--band-ink);text-decoration:none;border-bottom:3px solid var(--orange);margin-bottom:18px}
.home{padding-block:36px 56px;display:flex;flex-direction:column;gap:34px}
.blk ul.entries{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.entries>li{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:20px}
.entries h3 a{color:var(--ink);text-decoration:none}
.entries h3 a:hover{color:var(--blue)}
.entries ul{margin:10px 0 0;padding-left:1.1rem;display:flex;flex-direction:column;gap:4px}
.sig{font:700 1.2rem var(--display);font-stretch:90%}
.sig small{display:block;font:400 .9rem var(--body);color:var(--muted)}
.osler{margin:0;max-width:44rem}
.osler blockquote{margin:0;font:500 clamp(1.3rem,3vw,1.75rem)/1.3 var(--display);font-stretch:88%;text-wrap:balance}
.osler figcaption{margin-top:10px;font-size:.9rem;color:var(--muted)}
details.src summary{cursor:pointer;font-weight:600}
details.q table{margin-top:10px}
.card .tag{align-self:flex-start}