/* By the numbers · data guide styles (extends /psychoed/psy.css) */
:root{--a:#3fb0c0;--a2:#e3b955;--al:#dff7fa;--c1:#5cc8d6;--c2:#e9b45a;--c3:#c98ad6;--c4:#7fd39b;--c5:#e88a7a;--cm:#6fb6e8;--cw:#e9b45a;--grid:rgba(244,239,228,.09);--axis:rgba(244,239,228,.38);--card:linear-gradient(165deg,rgba(255,255,255,.045),rgba(255,255,255,.012))}
.bn-nav{position:sticky;top:0;z-index:30;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:10px 52px 10px max(14px,env(safe-area-inset-left));background:linear-gradient(180deg,rgba(5,4,10,.94),rgba(5,4,10,.82));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.06)}
.bn-nav{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 70px),transparent calc(100% - 40px));mask-image:linear-gradient(90deg,#000 calc(100% - 70px),transparent calc(100% - 40px))}
.bn-nav::-webkit-scrollbar{display:none}
.bn-nav a{flex:none;font:500 12.5px/1 var(--sans);letter-spacing:.04em;color:var(--mute);text-decoration:none;padding:9px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.1);white-space:nowrap;min-height:34px;display:inline-flex;align-items:center}
.bn-nav a:hover,.bn-nav a:focus-visible,.bn-nav a.on{color:#fff;border-color:color-mix(in srgb,var(--a) 70%,transparent);background:color-mix(in srgb,var(--a) 16%,transparent);outline:none}
.bn-nav a.cr{color:#ffe08a;border-color:rgba(212,165,55,.5)}
.bn{max-width:1180px;margin:0 auto;padding:8vh 18px 2vh;scroll-margin-top:56px}
.bn-h{max-width:760px;margin:0 0 22px}
.bn-h .no{margin:0 0 10px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:12px}
.bn-h .no::after{content:"";height:1px;width:46px;background:linear-gradient(90deg,var(--gold),transparent)}
.bn-h h2{margin:0 0 8px;font:italic 400 clamp(36px,6vw,58px)/1.04 var(--serif);color:var(--al);text-wrap:balance}
.bn-h p{margin:0;font-size:clamp(16px,1.6vw,18px);line-height:1.5;color:#d9d1c2;max-width:38em}
.grid2{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media (min-width:900px){.grid2{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.ch.wide{grid-column:1/-1}}
.ch{margin:0;padding:18px 16px 14px;border-radius:20px;border:1px solid rgba(255,255,255,.08);background:var(--card);box-shadow:0 20px 60px rgba(0,0,0,.35);min-width:0;display:flex;flex-direction:column}
@media (min-width:600px){.ch{padding:22px 22px 16px}}
.ch h3{margin:0 0 4px;font:italic 500 clamp(22px,2.4vw,27px)/1.12 var(--serif);color:#fff6ea;text-wrap:balance}
.ch .sub{margin:0 0 10px;font-size:12.5px;letter-spacing:.04em;color:var(--dim)}
.plot{position:relative;width:100%;min-height:60px;touch-action:pan-y}
.plot svg{display:block;width:100%;height:auto;overflow:visible}
.plot svg text{font-family:var(--sans);fill:#e9e2d3;font-size:12px}
.plot svg .ax{fill:var(--dim);font-size:11px}
.plot svg .vl{font-size:12px;font-weight:600;fill:#fff}
.plot svg .vl.dim{fill:#cfc6b4;font-weight:500}
.plot svg .gl{stroke:var(--grid);stroke-width:1}
.plot svg .bl{stroke:var(--axis);stroke-width:1}
.plot svg .rf{stroke:rgba(255,224,138,.65);stroke-width:1.2;stroke-dasharray:3 4}
.plot svg .rft{fill:#ffe08a;font-size:11px}
.plot [data-tip]{cursor:pointer;outline:none}
.plot [data-tip]:focus-visible .hl,.plot [data-tip].hot .hl{stroke:#fff;stroke-width:2}
.plot .hit{fill:transparent}
.plot .hit.hot,.plot .hit:focus-visible{fill:rgba(255,255,255,.05)}
.plot .bar{transition:opacity .25s}
.plot.dim-others [data-tip]:not(.hot) .bar{opacity:.55}
.mean{margin:12px 0 0;font:italic 400 clamp(18px,1.9vw,21px)/1.35 var(--serif);color:#f3ead6}
.mean b{font-style:normal;font-family:var(--sans);font-weight:600;font-size:.86em;color:#fff}
.src{margin:10px 0 0;font-size:12px;line-height:1.5;color:#8f877a}
.src a{color:#cbb98c;text-decoration:none;border-bottom:1px solid rgba(203,185,140,.35)}
.src a:hover,.src a:focus-visible{color:#ffe08a;border-color:#ffe08a;outline:none}
.legend{display:flex;flex-wrap:wrap;gap:6px 8px;margin:2px 0 10px}
.legend button{appearance:none;display:inline-flex;align-items:center;gap:7px;padding:6px 11px;min-height:34px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.03);color:var(--ink);font:500 12.5px/1.2 var(--sans);cursor:pointer;touch-action:manipulation}
.legend button i{width:10px;height:10px;border-radius:50%;flex:none}
.legend button[aria-pressed="false"]{opacity:.45}
.legend button[aria-pressed="false"] i{background:transparent!important;box-shadow:inset 0 0 0 1.5px currentColor}
.legend button:focus-visible{outline:2px solid var(--a);outline-offset:2px}
.legend.static span{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--mute);padding:2px 4px}
.legend.static span i{width:10px;height:10px;border-radius:3px}
details.nums{margin-top:10px;border-top:1px solid rgba(255,255,255,.07);padding-top:8px}
details.nums summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);padding:6px 0;min-height:32px}
details.nums summary::-webkit-details-marker{display:none}
details.nums summary::before{content:"+";font:300 16px/1 var(--sans);transition:transform .3s}
details.nums[open] summary::before{transform:rotate(45deg)}
details.nums summary:focus-visible{outline:2px solid var(--a);outline-offset:3px;border-radius:4px}
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:6px}
.tw table{border-collapse:collapse;width:100%;font-size:13px;font-variant-numeric:tabular-nums}
.tw th,.tw td{padding:6px 8px;border-bottom:1px solid rgba(255,255,255,.07);text-align:right;white-space:nowrap}
.tw th:first-child,.tw td:first-child{text-align:left;white-space:normal}
.tw thead th{color:var(--mute);font-weight:600;font-size:12px}
.tw caption{caption-side:top;text-align:left;font-size:12px;color:var(--dim);padding-bottom:4px}
.tt{position:fixed;z-index:60;pointer-events:none;max-width:min(280px,calc(100vw - 20px));padding:9px 12px;border-radius:12px;background:rgba(14,12,20,.96);border:1px solid rgba(233,220,184,.25);box-shadow:0 12px 30px rgba(0,0,0,.5);color:#f4efe4;font:13px/1.4 var(--sans);opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s}
.tt.on{opacity:1;transform:none}
.tt b{color:#fff}.tt small{display:block;color:var(--mute);font-size:11.5px;margin-top:2px}
.tt .row{display:flex;align-items:center;gap:7px}.tt .row i{width:9px;height:9px;border-radius:50%;flex:none}
/* stat cards */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:4px 0 2px}
.st{padding:14px 14px 12px;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025)}
.st b{display:block;font:500 clamp(28px,4vw,40px)/1 var(--serif);color:var(--al);font-variant-numeric:lining-nums;letter-spacing:-.01em;word-break:break-word}
.st b.sm{font-size:clamp(22px,3vw,30px)}
.st span{display:block;margin-top:6px;font-size:13.5px;line-height:1.4;color:#d6cebf}
/* 988 */
.cri{display:grid;gap:14px;align-items:center;margin:0 0 20px;padding:20px 20px;border-radius:22px;border:1px solid rgba(255,224,138,.45);background:radial-gradient(ellipse 80% 120% at 0% 0%,rgba(212,165,55,.2),transparent 60%),rgba(20,16,8,.6);box-shadow:0 0 50px rgba(212,165,55,.12)}
@media (min-width:760px){.cri{grid-template-columns:auto 1fr;gap:26px;padding:24px 30px}}
.cri .big{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.cri .big a{font:500 clamp(54px,9vw,78px)/.95 var(--serif);color:#ffe08a;text-decoration:none;text-shadow:0 0 30px rgba(255,224,138,.35)}
.cri .big small{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:#e9d9b0}
.cri p{margin:0 0 6px;font-size:16px;line-height:1.45;color:#f1e8d4}
.cri p.s{font-size:14px;color:#cdbf9e}
.cri a.lk{color:#ffe08a;text-decoration:none;border-bottom:1px solid rgba(255,224,138,.45)}
.cri .acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.cri .acts a{display:inline-flex;align-items:center;min-height:44px;padding:10px 18px;border-radius:999px;border:1px solid rgba(255,224,138,.55);color:#ffe08a;text-decoration:none;font:600 14px/1 var(--sans);letter-spacing:.04em}
.cri .acts a:hover,.cri .acts a:focus-visible{background:rgba(255,224,138,.12);outline:none}
.hope{border-color:rgba(127,211,155,.3);background:linear-gradient(165deg,rgba(127,211,155,.09),rgba(255,255,255,.01))}
.note{margin:14px 0 0;font-size:13px;line-height:1.5;color:var(--dim);max-width:46em}
.note a{color:#cbb98c}
.explain{font-size:15px;line-height:1.5;color:#ddd4c4;margin:0 0 10px}
.chips.l{justify-content:flex-start;margin:4px 0 10px}
.chips.l .chip{min-height:38px;padding:7px 13px;font-size:13px}
.bn-out{max-width:880px;margin:0 auto;padding:9vh 22px 2vh;text-align:center}
.bn-out h2{font:italic 400 clamp(34px,5.6vw,54px)/1.05 var(--serif);color:var(--al);margin:0 0 14px}
.bn-out .lead{font-size:17px;color:#e7e0d1;max-width:34em;margin:0 auto 24px}
.method{max-width:760px;margin:0 auto;padding:4vh 22px 0;font-size:13.5px;line-height:1.6;color:var(--dim)}
.method h2{font:italic 400 28px/1.1 var(--serif);color:#efe7d6;margin:0 0 8px}
.method a{color:#cbb98c}
@media (prefers-reduced-motion:reduce){.tt{transition:none}}
@media print{.bn-nav,.tt{display:none!important}details.nums{display:block}details.nums>*{display:block}}
/* keep the section nav sticky: hidden overflow on body would make it a scroll container */
body{overflow-x:clip}
.plot .guide{stroke:rgba(255,255,255,.4);stroke-width:1;stroke-dasharray:2 3;opacity:0;pointer-events:none}.plot .hot .guide,.plot [data-tip]:focus-visible .guide{opacity:1}