@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300..700;1,6..72,300..600&family=Archivo:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); :root{ --ink:#0F2229; --ink2:#16323B; --ink3:#1E4450; --field:#E7E3D8; --field2:#F3F0E8; --field3:#D8D3C4; --rule:#9FA79F; --rule-soft:rgba(231,227,216,.16); --txt:#EAE7DD; --txt-dim:#A3AFB2; --txt-ink:#12262D; --txt-lede:#CBD3D5; --txt-body:#C2CBCD; --txt-soft:#A9B4B6; --txt-faint:#7E8B8E; --halo:rgba(15,34,41,.85); --tint:rgba(255,255,255,.012); --amber-hi:#E8B133; --paper-ink:#0F2229; --amber:#D9A11B; --verd:#35A091; --plum:#9370B0; --rust:#C9683F; --steel:#5D8FA0; --olive:#98AB3E; --e1:#5D8FA0; --e2:#35A091; --e3:#98AB3E; --e4:#D9A11B; --e5:#C9683F; --e6:#9370B0; --disp:'Newsreader',Georgia,serif; --body:'Archivo','Helvetica Neue',Arial,sans-serif; --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace; --maxw:1360px; } /* ═══════════════ PAPER THEME ═══════════════ The interactive atlas is an instrument and stays dark. Everything else is a document — a brief, a report, a reference page — and documents are light. Legal and corporate buyers print these, forward them and put them in front of boards, and a dark page survives none of that well. Every colour below is redefined as the same variable name, so no rule in the stylesheet needs to change: setting data-theme="paper" on swaps the whole surface. All text colours pass WCAG AA against the paper background. */ html[data-theme="paper"]{ --ink:#FBF9F4; --ink2:#F4EFE5; --ink3:#E8E1D2; --field:#1F2E33; --field2:#16232A; --field3:#0F2229; --rule:#B9AE99; --rule-soft:rgba(31,46,51,.16); --txt:#1F2E33; --txt-dim:#5A6B70; --txt-ink:#FBF9F4; --txt-lede:#33474D; --txt-body:#31444A; --txt-soft:#4E6167; --txt-faint:#63757A; --amber:#8E6110; --verd:#1F7A6B; --plum:#6E4E8C; --rust:#A64E28; --steel:#3E6E80; --olive:#6B7A22; --e1:#3E6E80; --e2:#1F7A6B; --e3:#6B7A22; --e4:#8A6410; --e5:#A64E28; --e6:#6E4E8C; --halo:rgba(251,249,244,.92); --tint:rgba(31,46,51,.025); --amber-hi:#6F4B0C; --paper-ink:#FBF9F4; } html[data-theme="paper"] body{ background:var(--ink); background-image:linear-gradient(rgba(31,46,51,.028) 1px,transparent 1px), linear-gradient(90deg,rgba(31,46,51,.028) 1px,transparent 1px); } /* surfaces that were "lighter than the background" have to invert to "darker" */ html[data-theme="paper"] .card, html[data-theme="paper"] .scard, html[data-theme="paper"] .gcard, html[data-theme="paper"] .evb, html[data-theme="paper"] .accbox, html[data-theme="paper"] .boiler, html[data-theme="paper"] .hookbox, html[data-theme="paper"] .v3fig, html[data-theme="paper"] .bccard, html[data-theme="paper"] .trustcard, html[data-theme="paper"] .fstep, html[data-theme="paper"] .step, html[data-theme="paper"] .newsrow, html[data-theme="paper"] .printnote{background:rgba(31,46,51,.035)} html[data-theme="paper"] .fld input, html[data-theme="paper"] .fld select, html[data-theme="paper"] .fld textarea, html[data-theme="paper"] .code, html[data-theme="paper"] pre{background:rgba(31,46,51,.055);color:var(--txt)} html[data-theme="paper"] .mast{background:rgba(251,249,244,.94);border-bottom:1px solid var(--rule)} html[data-theme="paper"] .btn.btn-buy, html[data-theme="paper"] a.btn-buy, html[data-theme="paper"] button.btn-buy{color:var(--paper-ink)} html[data-theme="paper"] .cbx input{accent-color:var(--amber)} html[data-theme="paper"] .signupbox, html[data-theme="paper"] .buybox{background:linear-gradient(180deg,rgba(142,97,16,.06),transparent)} html[data-theme="paper"] .callout{background:rgba(142,97,16,.07);border-color:rgba(142,97,16,.35)} html[data-theme="paper"] .cta{background:rgba(31,46,51,.04)} html[data-theme="paper"] .demoframe{background:rgba(31,46,51,.05);border-color:var(--rule-soft)} html[data-theme="paper"] .demoframe .plist a:hover{background:rgba(31,46,51,.06)} /* colour-scheme so form controls and scrollbars follow the surface */ /* Panels and wells were tuned as "slightly darker than a dark page". On paper the same alpha becomes a heavy slab that drags small labels below contrast threshold. */ html[data-theme="paper"] #plotwrap, html[data-theme="paper"] #tlwrap, html[data-theme="paper"] .panel, html[data-theme="paper"] .well, html[data-theme="paper"] .v3fig, html[data-theme="paper"] .tip{background:rgba(31,46,51,.045)} html[data-theme="paper"] .panel, html[data-theme="paper"] #plotwrap, html[data-theme="paper"] #tlwrap{border:1px solid var(--rule-soft)} html[data-theme="paper"] .fld input, html[data-theme="paper"] .fld select, html[data-theme="paper"] .fld textarea{background:rgba(31,46,51,.05)} html[data-theme="paper"]{color-scheme:light} html:not([data-theme="paper"]){color-scheme:dark} .brandmark a{display:flex;align-items:baseline;gap:16px;border:0;text-decoration:none;color:inherit;cursor:pointer} .brandmark a b,.brandmark a span{transition:color .14s} .brandmark a:hover b,.brandmark a:focus-visible b{color:var(--amber)} .brandmark a:hover span,.brandmark a:focus-visible span{color:var(--amber)} /* ---- commercial pages ---- */ .buybox{border:1px solid var(--amber);padding:22px 24px;margin:26px 0;display:grid; grid-template-columns:auto 1fr;gap:26px;align-items:center} @media(max-width:700px){.buybox{grid-template-columns:1fr;gap:16px}} .buyprice b{display:block;font-family:var(--mono);font-size:36px;color:var(--amber);line-height:1} .buyprice span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--txt-dim);margin-top:6px} .buyprice .cadline{text-transform:none;letter-spacing:.04em;font-size:10px;color:var(--txt-faint);margin-top:3px} .cadalt{font-family:var(--mono);font-size:10.5px;color:var(--txt-faint);letter-spacing:.03em} .buyacts{display:flex;gap:10px;flex-wrap:wrap} .btn.btn-buy,a.btn-buy,button.btn-buy{background:var(--amber);color:var(--ink);border-color:var(--amber);font-weight:600} .btn.btn-buy:hover,a.btn-buy:hover,button.btn-buy:hover{background:var(--amber-hi);color:var(--ink)} .buynote{grid-column:1/-1;margin:0;font-size:12.8px;color:var(--txt-soft)} ul.tick{list-style:none;padding:0;margin:10px 0 0} ul.tick li{position:relative;padding-left:22px;margin-bottom:9px;font-size:14.2px;color:var(--txt-body);line-height:1.5} ul.tick li::before{content:'';position:absolute;left:2px;top:8px;width:7px;height:7px; border-left:1.5px solid var(--amber);border-bottom:1.5px solid var(--amber);transform:rotate(-45deg)} .trustrow{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0} @media(max-width:760px){.trustrow{grid-template-columns:1fr}} .trustcard{display:block;border:1px solid var(--rule-soft);padding:15px 17px;border-left:0;border-right:0; border-top:1px solid var(--rule-soft);text-decoration:none} .trustcard{border:1px solid var(--rule-soft)} .trustcard b{display:block;font-family:var(--disp);font-size:16px;font-weight:400;color:var(--txt)} .trustcard span{display:block;font-size:12.6px;color:var(--txt-soft);margin-top:4px;line-height:1.45} .trustcard:hover{border-color:var(--amber)} .trustcard:hover b{color:var(--amber)} .flowrow{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:20px 0} @media(max-width:860px){.flowrow{grid-template-columns:1fr 1fr}} .fstep{border:1px solid var(--rule-soft);padding:14px} .fstep b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--amber);margin-bottom:6px} .fstep span{font-size:12.8px;color:var(--txt-body);line-height:1.45} .offerrow{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:start; border-top:1px solid var(--rule-soft);padding:20px 0} @media(max-width:700px){.offerrow{grid-template-columns:1fr;gap:10px}} .offerrow h3{margin:0;font-size:20px} .offerprice b{display:block;font-family:var(--mono);font-size:22px;color:var(--amber);text-align:right} .offerprice span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em; text-transform:uppercase;color:var(--txt-dim);text-align:right;margin-top:4px} @media(max-width:700px){.offerprice b,.offerprice span{text-align:left}} /* brief form */ .brief{margin-top:26px} .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media(max-width:700px){.fgrid{grid-template-columns:1fr}} .fld{display:block} .fld span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--txt-dim);margin-bottom:6px} .fld input,.fld select,.fld textarea{width:100%;background:rgba(0,0,0,.25);border:1px solid var(--rule-soft); color:var(--txt);font-family:var(--body);font-size:14.2px;padding:11px 12px;border-radius:0} .fld textarea{resize:vertical;line-height:1.5} .fld input:focus,.fld select:focus,.fld textarea:focus{outline:0;border-color:var(--amber)} .subt{font-family:var(--mono);font-size:12px;color:var(--txt-dim);letter-spacing:.05em;margin-bottom:22px} /* ================= PRINT / PDF ================= Every commissioned deliverable is promised as "PDF and web format". Rather than build a PDF pipeline, the pages are made to print properly: the browser's Save as PDF then produces the deliverable. Navigation, buttons and interactive furniture are dropped; URLs are printed after links so a paper copy stays checkable. */ @media print{ @page{margin:18mm 16mm} html,body{background:#fff!important;color:#111!important;font-size:10.5pt; background-image:none!important} .mast,.sf,.cta,.trustrow,.buybox,.sharerow,.signupbox,.brief,.skip, #presetBar,.v3bar,#v3wrap,.quizbar,nav,button,.btn{display:none!important} a{color:#111!important;text-decoration:none;border:0!important} .doc a[href^="/"]::after,.doc a[href^="http"]::after{ content:" (" attr(href) ")";font-family:monospace;font-size:8pt;color:#555} h1{font-size:22pt;color:#111!important;page-break-after:avoid} h2{font-size:14pt;color:#111!important;page-break-after:avoid;margin-top:16pt; border-top:0.5pt solid #999;padding-top:8pt} h3,h4{color:#111!important;page-break-after:avoid} p,li,td{color:#222!important} .lede{font-size:12pt;color:#333!important} table{page-break-inside:auto;font-size:9pt} tr,.evb,.accbox,.gcard,.card,.warn,.callout{page-break-inside:avoid} th{color:#444!important;border-bottom:0.5pt solid #666} td{border-bottom:0.25pt solid #ccc} .tscroll{overflow:visible!important} .tscroll table{min-width:0!important} .evb,.accbox,.warn,.callout,.boiler{border:0.5pt solid #999!important;background:none!important} .cmeas b,.buyprice b,.big,.cg b{color:#111!important} .crumb,.eyebrow{color:#666!important} .doc,.wrap{max-width:none;padding:0} .grid2,.cols2{display:block} .grid2>div,.cols2>div{margin-bottom:12pt} /* a footer identifying the source on every printed page */ .doc::after{content:"The Political Atlas \2014 thepoliticalatlas.com \2014 every score carries its evidence"; display:block;margin-top:20pt;padding-top:8pt;border-top:0.5pt solid #999; font-family:monospace;font-size:8pt;color:#555} } .printnote{border:1px solid var(--rule-soft);padding:12px 16px;margin:20px 0;font-size:13px;color:var(--txt-soft); background:rgba(255,255,255,.02)} .printnote span{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase; color:var(--amber);margin-right:10px} @media print{.printnote{display:none!important}} *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{animation-duration:.001ms!important;transition-duration:.001ms!important}} body{ margin:0;background:var(--ink);color:var(--txt); font-family:var(--body);font-size:16px;line-height:1.62; -webkit-font-smoothing:antialiased; background-image: linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px); background-size:44px 44px; } .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px} @media(max-width:640px){.wrap{padding:0 18px}} h1,h2,h3,h4{font-family:var(--disp);font-weight:400;line-height:1.1;margin:0} p{margin:0 0 1.05em} a{color:var(--amber);text-decoration:none;border-bottom:1px solid rgba(217,161,27,.4)} a:hover{border-bottom-color:var(--amber)} :focus-visible{outline:2px solid var(--amber);outline-offset:3px} .eyebrow{ font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase; color:var(--txt-dim);display:block;margin-bottom:14px; } .coord{font-family:var(--mono);font-size:12px;letter-spacing:.04em;font-variant-numeric:tabular-nums} .ital{font-family:var(--disp);font-style:italic} /* ---------- masthead ---------- */ .mast{border-bottom:1px solid var(--rule-soft);position:sticky;top:0;z-index:60; background:rgba(15,34,41,.93);backdrop-filter:blur(10px)} .mast .wrap{display:flex;align-items:center;gap:26px;height:60px} .brandmark{display:flex;align-items:baseline;gap:10px;flex-shrink:0} .brandmark b{font-family:var(--disp);font-size:20px;font-weight:500;letter-spacing:-.01em} .brandmark span{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:var(--txt-dim);text-transform:uppercase} .mastnav{display:flex;gap:20px;margin-left:auto;overflow-x:auto;scrollbar-width:none} .mastnav::-webkit-scrollbar{display:none} .mastnav a{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase; color:var(--txt-dim);border:0;white-space:nowrap;padding:4px 0} .mastnav a:hover,.mastnav a.on{color:var(--amber)} /* ---------- hero ---------- */ .hero{padding:74px 0 70px;border-bottom:1px solid var(--rule-soft);position:relative;overflow:hidden} .herogrid{display:grid;grid-template-columns:1.02fr 1fr;gap:56px;align-items:center} @media(max-width:960px){.herogrid{grid-template-columns:1fr;gap:38px}} .hero h1{font-size:clamp(40px,5.6vw,74px);letter-spacing:-.025em;margin-bottom:22px} .hero h1 em{font-style:italic;color:var(--amber)} .lede{font-size:17.5px;color:var(--txt-body);max-width:52ch} .lede strong{color:var(--txt);font-weight:600} .herostats{display:flex;gap:30px;margin-top:30px;flex-wrap:wrap} .hstat b{display:block;font-family:var(--mono);font-size:26px;color:var(--amber);font-weight:500} .hstat span{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-dim)} .demoframe{border:1px solid var(--rule-soft);background:rgba(0,0,0,.16);padding:16px} .demoframe figcaption{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em; text-transform:uppercase;color:var(--txt-dim);margin-top:12px;display:flex;justify-content:space-between;gap:10px} .demobtn{background:none;border:1px solid var(--rule-soft);color:var(--txt-dim);font-family:var(--mono); font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:5px 11px;cursor:pointer} .demobtn:hover{border-color:var(--amber);color:var(--amber)} /* ---------- sections ---------- */ .sec{padding:76px 0;border-bottom:1px solid var(--rule-soft)} .sechead{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;margin-bottom:40px} .secnum{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--amber); border:1px solid rgba(217,161,27,.35);padding:5px 9px;align-self:start;white-space:nowrap} .sechead h2{font-size:clamp(27px,3.4vw,40px);letter-spacing:-.02em;margin-bottom:10px} .sechead p{color:var(--txt-body);max-width:74ch;margin:0} .cols2{display:grid;grid-template-columns:1fr 1fr;gap:40px} .cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} @media(max-width:880px){.cols2,.cols3{grid-template-columns:1fr;gap:26px}} .card{border:1px solid var(--rule-soft);padding:24px;background:rgba(255,255,255,.017)} .card h3{font-size:20px;margin-bottom:9px} .card p{font-size:14.6px;color:var(--txt-body);margin-bottom:0} .card p+p{margin-top:.8em} /* ---------- the ruler (signature) ---------- */ .axisblock{border:1px solid var(--rule-soft);padding:26px 26px 20px;margin-bottom:16px; background:linear-gradient(180deg,rgba(255,255,255,.022),transparent)} .axishead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:6px} .axistag{font-family:var(--mono);font-size:11px;letter-spacing:.16em;padding:3px 8px; border:1px solid currentColor;text-transform:uppercase} .axisblock h3{font-size:23px} .axisblock>p{font-size:14.8px;color:var(--txt-body);max-width:88ch;margin:10px 0 22px} .ruler{position:relative;height:66px;margin:0 4px} .ruler .bar{position:absolute;top:26px;left:0;right:0;height:1px;background:var(--rule)} .ruler .tick{position:absolute;top:20px;width:1px;height:7px;background:var(--rule);opacity:.55} .ruler .tick.maj{top:15px;height:18px;opacity:1} .ruler .tlab{position:absolute;top:36px;transform:translateX(-50%);font-family:var(--mono); font-size:10px;color:var(--txt-dim)} .ruler .pole{position:absolute;top:0;font-family:var(--disp);font-style:italic;font-size:15px;color:var(--txt)} .ruler .pole.l{left:0}.ruler .pole.r{right:0;text-align:right} .ruler .pin{position:absolute;top:14px;width:9px;height:9px;border:1.5px solid var(--ink); transform:translateX(-50%) rotate(45deg);cursor:pointer} .ruler .pin:hover{z-index:5;transform:translateX(-50%) rotate(45deg) scale(1.5)} .axisnote{font-size:13.4px;color:var(--txt-soft);border-top:1px solid var(--rule-soft);padding-top:12px;margin:14px 0 0} .axisnote b{color:var(--amber);font-weight:600} /* ---------- atlas ---------- */ .atlas{display:grid;grid-template-columns:214px minmax(0,1fr) 320px;gap:0;border:1px solid var(--rule-soft)} @media(max-width:1120px){.atlas{grid-template-columns:1fr}} .panel{padding:18px} .panel+.panel{border-left:1px solid var(--rule-soft)} @media(max-width:1120px){.panel+.panel{border-left:0;border-top:1px solid var(--rule-soft)}} .plabel{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase; color:var(--txt-dim);margin:0 0 9px;display:block} .fgroup{margin-bottom:20px} select,input[type=search],input[type=text]{ width:100%;background:var(--ink2);border:1px solid var(--rule-soft);color:var(--txt); font-family:var(--mono);font-size:12px;padding:8px 9px;border-radius:0} select:hover,input:hover{border-color:rgba(217,161,27,.45)} .chips{display:flex;flex-wrap:wrap;gap:5px} .chip{font-family:var(--mono);font-size:10px;letter-spacing:.06em;padding:4px 8px; border:1px solid var(--rule-soft);color:var(--txt-dim);cursor:pointer;background:none;text-transform:uppercase} .chip:hover{color:var(--txt)} .chip.on{color:var(--ink);font-weight:600} .chip .sw{display:inline-block;width:7px;height:7px;margin-right:5px;vertical-align:middle} #plotwrap{position:relative;background:rgba(0,0,0,.2)} #plot{display:block;width:100%;height:auto;touch-action:none} .plotmeta{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap; font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase; color:var(--txt-dim);padding:10px 2px 0} .tip{position:fixed;pointer-events:none;z-index:90;background:var(--field2);color:var(--txt-ink); border:1px solid var(--ink);padding:8px 11px;max-width:270px;font-size:12.6px;line-height:1.42; box-shadow:0 8px 26px rgba(0,0,0,.45);opacity:0;transition:opacity .12s} .tip b{font-family:var(--disp);font-size:15px;font-weight:600;display:block;line-height:1.2} .tip .coord{font-size:10.5px;color:var(--txt-faint);display:block;margin-top:4px} /* detail */ #detail h3{font-size:24px;letter-spacing:-.01em;margin-bottom:2px} .dmeta{font-family:var(--mono);font-size:10.5px;color:var(--txt-dim);letter-spacing:.06em;margin-bottom:14px} .dfield{margin-bottom:13px} .dfield b{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em; text-transform:uppercase;color:var(--amber);margin-bottom:3px} .dfield p{font-size:13.6px;color:var(--txt-body);margin:0;line-height:1.5} .readout{width:100%;border-collapse:collapse;margin:12px 0 16px} .readout td{font-family:var(--mono);font-size:11px;padding:3px 0;border-bottom:1px solid var(--rule-soft)} .readout td:first-child{color:var(--txt-dim);letter-spacing:.1em} .readout td:last-child{text-align:right;font-weight:500} .flag{display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em; text-transform:uppercase;padding:3px 7px;border:1px solid var(--rust);color:var(--rust);margin-bottom:12px} .empty{color:var(--txt-dim);font-size:13.4px;font-style:italic;font-family:var(--disp)} /* ---------- compare ---------- */ .cmpgrid{display:grid;grid-template-columns:330px minmax(0,1fr);gap:34px} @media(max-width:960px){.cmpgrid{grid-template-columns:1fr}} .slotlist{display:flex;flex-direction:column;gap:8px;margin-bottom:18px} .slot{display:flex;align-items:center;gap:9px;border:1px solid var(--rule-soft);padding:8px 10px} .slot .sw{width:10px;height:10px;flex-shrink:0} .slot span{font-size:13.4px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .slot button{background:none;border:0;color:var(--txt-dim);cursor:pointer;font-family:var(--mono);font-size:14px;padding:0 3px} .slot button:hover{color:var(--rust)} .dist{border:1px solid var(--amber);padding:18px;margin-top:18px} .dist .big{font-family:var(--mono);font-size:40px;color:var(--amber);line-height:1;font-weight:500} .dist .lab{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-dim)} .dist p{font-size:13.6px;color:var(--txt-body);margin:12px 0 0} .bars{margin-top:18px} .barrow{display:grid;grid-template-columns:112px 1fr 54px;gap:10px;align-items:center;margin-bottom:7px} .barrow .k{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--txt-dim);text-transform:uppercase} .bartrk{height:6px;background:rgba(255,255,255,.07);position:relative} .barfil{position:absolute;top:0;bottom:0;background:var(--amber)} .barrow .v{font-family:var(--mono);font-size:11px;text-align:right} /* ---------- claims ---------- */ .claim{border:1px solid var(--rule-soft);margin-bottom:12px} .claim summary{cursor:pointer;padding:16px 20px;list-style:none;display:flex;gap:16px;align-items:baseline} .claim summary::-webkit-details-marker{display:none} .claim summary::after{content:'+';font-family:var(--mono);color:var(--amber);margin-left:auto;font-size:17px} .claim[open] summary::after{content:'–'} .claim summary:hover{background:rgba(255,255,255,.028)} .claim .q{font-family:var(--disp);font-size:19.5px;line-height:1.3} .claim .body{padding:0 20px 22px;border-top:1px solid var(--rule-soft)} .cmeas{display:flex;gap:22px;flex-wrap:wrap;padding:16px 0;margin-bottom:6px; border-bottom:1px solid var(--rule-soft)} .cmeas div b{display:block;font-family:var(--mono);font-size:21px;color:var(--amber);font-weight:500} .cmeas div span{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-dim)} .forag{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:16px 0} @media(max-width:760px){.forag{grid-template-columns:1fr}} .forag h4{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:7px} .forag .f h4{color:var(--verd)}.forag .a h4{color:var(--rust)} .forag p{font-size:14px;color:var(--txt-body);margin:0} .verdict{border-left:2px solid var(--amber);padding:2px 0 2px 16px;font-size:14.4px;color:var(--txt-lede)} /* ---------- timeline ---------- */ #tlwrap{border:1px solid var(--rule-soft);background:rgba(0,0,0,.2);padding:0} #timeline{display:block;width:100%;height:auto} /* ---------- method ---------- */ .mtable{width:100%;border-collapse:collapse;font-size:13.6px;margin:10px 0 22px} .mtable th{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase; color:var(--txt-dim);text-align:left;padding:8px 12px 8px 0;border-bottom:1px solid var(--rule)} .mtable td{padding:9px 12px 9px 0;border-bottom:1px solid var(--rule-soft);color:var(--txt-body);vertical-align:top} .mtable td:first-child{color:var(--txt);font-family:var(--mono);font-size:11.5px;white-space:nowrap} .warn{border:1px solid var(--rust);padding:20px 22px;margin:26px 0} .warn h3{color:var(--rust);font-size:20px;margin-bottom:9px} .warn p{font-size:14.2px;color:var(--txt-body);margin-bottom:0} .warn p+p{margin-top:.8em} .btn{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase; border:1px solid var(--amber);color:var(--amber);padding:10px 18px;background:none;cursor:pointer} .btn:hover{background:var(--amber);color:var(--ink)} footer{padding:44px 0 60px;font-size:12.6px;color:var(--txt-dim)} footer p{max-width:80ch} /* ==================== v2 ==================== */ .anote{font-size:13.2px;color:var(--txt-soft);line-height:1.5;margin:12px 0 0} .anote b{color:var(--txt)} .warnline{border-left:2px solid var(--rust);padding:4px 0 4px 14px;font-size:14px;color:var(--txt-body)} .warnline code{font-family:var(--mono);font-size:12.5px;color:var(--amber)} .dact{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px} .dact .btn{flex:1;min-width:110px;text-align:center;padding:9px 10px} /* codebook */ .cbblock{border:1px solid var(--rule-soft);padding:22px 24px 8px;margin-bottom:14px; background:linear-gradient(180deg,rgba(255,255,255,.02),transparent)} .cbblock h3{font-size:21px} .cbtable td:first-child{font-size:13px;font-weight:600} .cbtable tr td{vertical-align:top} /* audit */ .audit3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} @media(max-width:1060px){.audit3{grid-template-columns:1fr}} .acard{border:1px solid var(--rule-soft);padding:22px;background:rgba(255,255,255,.017)} .acard h3{font-size:19px;margin-bottom:8px} .acard>p{font-size:13.8px;color:var(--txt-body);margin-bottom:14px} .cormat{font-family:var(--mono);font-size:11px;margin:6px 0 4px} .cormat th{padding:5px 4px;text-align:center} .cormat th:first-child{width:34px} .cormat td{padding:5px 4px;border-bottom:1px solid var(--rule-soft)} .cormat td.cell{text-align:center;color:var(--txt)} .bigstat{display:flex;align-items:baseline;gap:10px;margin-bottom:8px} .bigstat b{font-family:var(--mono);font-size:27px;color:var(--amber);font-weight:500} .bigstat span{font-size:12.6px;color:var(--txt-dim)} /* validator */ .valdrop{border:1px dashed rgba(217,161,27,.45);padding:34px 24px;text-align:center;cursor:pointer; background:rgba(217,161,27,.03);transition:background .15s,border-color .15s} .valdrop:hover,.valdrop.over{background:rgba(217,161,27,.09);border-color:var(--amber)} .valdrop b{display:block;font-family:var(--disp);font-size:21px;margin-bottom:6px} .valdrop span{font-size:13.4px;color:var(--txt-dim)} .valhead{border-bottom:1px solid var(--rule-soft);padding:16px 0 12px;margin-bottom:6px} .valhead b{font-family:var(--disp);font-size:19px;display:block} .valhead span{font-family:var(--mono);font-size:11px;color:var(--txt-dim)} .valblock{border-bottom:1px solid var(--rule-soft);padding:20px 0} .valgrid{display:grid;grid-template-columns:420px 1fr;gap:28px;align-items:start} @media(max-width:900px){.valgrid{grid-template-columns:1fr}} .valgrid h4{font-family:var(--disp);font-size:20px;margin-bottom:10px} /* evidence */ .evwrap{border-top:1px solid var(--rule-soft);padding-top:14px;margin-top:16px} .evrow{border:1px solid var(--rule-soft);margin-bottom:5px} .evrow.bare{display:grid;grid-template-columns:34px 40px 1fr auto;gap:8px;align-items:center; padding:7px 9px;opacity:.62} .evtoggle{width:100%;display:grid;grid-template-columns:34px 40px 1fr 18px;gap:8px;align-items:center; background:none;border:0;color:var(--txt);text-align:left;padding:8px 9px;cursor:pointer;font-family:var(--body)} .evtoggle:hover{background:rgba(255,255,255,.035)} .evtag{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--amber)} .evscore{font-family:var(--mono);font-size:11.5px;color:var(--txt)} .evr{font-size:12.4px;color:var(--txt-soft);line-height:1.4} .evcount{font-family:var(--mono);font-size:10px;color:var(--txt-dim);text-align:right} .evbody{display:none;padding:2px 12px 12px 12px;border-top:1px solid var(--rule-soft)} .evrow.open .evbody{display:block} .evbody ul{margin:10px 0 0;padding:0;list-style:none} .evbody li{font-size:12.8px;color:var(--txt-body);line-height:1.5;margin-bottom:9px;padding-left:0} .evkind{display:inline-block;font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase; padding:2px 5px;margin-right:7px;border:1px solid currentColor;vertical-align:1px} .k-prog{color:var(--verd)}.k-rec{color:var(--amber)}.k-data{color:var(--steel)}.k-schol{color:var(--plum)} .evchal{background:none;border:1px solid var(--rule-soft);color:var(--txt-dim);font-family:var(--mono); font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;padding:5px 9px;cursor:pointer;margin-top:6px} .evchal:hover{border-color:var(--rust);color:var(--rust)} .evchal.inline{margin:0} /* paste checker */ .pastewrap{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:start} @media(max-width:640px){.pastewrap{grid-template-columns:1fr}} #pasteIn{font-family:var(--body);font-size:15px;padding:14px} .pasteres{border:1px solid var(--amber);padding:20px;margin-top:16px} .pasteres p{font-size:14.6px;color:var(--txt-body)} /* quiz */ .quizgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px 28px} @media(max-width:880px){.quizgrid{grid-template-columns:1fr}} .qitem{border-bottom:1px solid var(--rule-soft);padding:14px 0} .qitem p{font-size:14.6px;color:var(--txt-lede);margin-bottom:10px} .qscale{display:flex;gap:6px} .qbtn{flex:1;background:none;border:1px solid var(--rule-soft);padding:7px 2px;cursor:pointer; display:flex;flex-direction:column;align-items:center;gap:4px} .qbtn span{width:9px;height:9px;border:1px solid var(--txt-dim);border-radius:50%;display:block} .qbtn em{font-family:var(--mono);font-size:7.6px;letter-spacing:.06em;text-transform:uppercase; color:var(--txt-dim);font-style:normal;text-align:center;line-height:1.25} .qbtn:hover{border-color:var(--amber)} .qbtn.on{border-color:var(--amber);background:rgba(217,161,27,.1)} .qbtn.on span{background:var(--amber);border-color:var(--amber)} .qbtn.on em{color:var(--amber)} .quizbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:22px 0 0} .quizres{display:grid;grid-template-columns:320px 1fr;gap:32px;margin-top:26px; border:1px solid var(--amber);padding:24px} @media(max-width:880px){.quizres{grid-template-columns:1fr}} .qrr h3{font-size:22px;margin-bottom:6px} .nearrow{width:100%;display:flex;align-items:center;gap:11px;background:none;border:0; border-bottom:1px solid var(--rule-soft);padding:9px 2px;cursor:pointer;text-align:left;color:var(--txt)} .nearrow:hover{background:rgba(255,255,255,.035)} .nearrow .sw{width:9px;height:9px;flex-shrink:0} .nearrow .nn{flex:1;font-size:14.6px;font-family:var(--disp)} .nearrow .nn em{display:block;font-family:var(--mono);font-size:10px;color:var(--txt-dim);font-style:normal;letter-spacing:.05em} .nearrow .nd{font-family:var(--mono);font-size:14px;color:var(--amber)} /* changelog */ .verblock{border-left:2px solid var(--amber);padding:2px 0 2px 18px;margin-bottom:24px} .vertag{font-family:var(--mono);font-size:13px;color:var(--amber);letter-spacing:.08em} .verdate{font-family:var(--mono);font-size:10.5px;color:var(--txt-dim);margin-left:10px;letter-spacing:.1em} .verblock ul{margin:10px 0 0;padding-left:16px} .verblock li{font-size:14px;color:var(--txt-body);margin-bottom:6px;line-height:1.5} /* challenge dialog */ dialog{background:var(--ink2);color:var(--txt);border:1px solid var(--amber);max-width:620px;width:92vw;padding:0} dialog::backdrop{background:rgba(6,14,17,.78)} .dlgin{padding:26px} .dlgin h3{font-size:24px;margin-bottom:6px} .dlghead{display:flex;justify-content:space-between;align-items:start;gap:14px} #chalClose{background:none;border:0;color:var(--txt-dim);font-size:24px;cursor:pointer;line-height:1;padding:0 4px} #chalClose:hover{color:var(--rust)} #chalWhat{border:1px solid var(--rule-soft);padding:11px 13px;margin:14px 0;font-size:14px} textarea{width:100%;background:var(--ink);border:1px solid var(--rule-soft);color:var(--txt); font-family:var(--body);font-size:14px;padding:11px;resize:vertical} .chaltext{font-family:var(--mono);font-size:11.5px;margin-top:8px} .dlgrow{display:grid;grid-template-columns:110px 1fr;gap:14px;align-items:start;margin-bottom:14px} input[type=number]{width:100%;background:var(--ink);border:1px solid var(--rule-soft);color:var(--txt); font-family:var(--mono);font-size:14px;padding:10px} /* embed mode */ body.embed .mast,body.embed .hero,body.embed footer, body.embed .sec:not(#compare){display:none} body.embed #compare{border:0;padding:20px 0} body.embed .sechead{display:none} .vbadge{display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em; text-transform:uppercase;padding:3px 7px;border:1px solid var(--verd);color:var(--verd);margin-bottom:10px} .revnote{border-left:2px solid var(--verd);padding:8px 0 8px 13px;margin:0 0 12px;font-size:12.6px;color:var(--txt-soft);line-height:1.45} .revnote b{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--verd);margin-bottom:4px} .revtable td{font-size:13px;vertical-align:top} /* ==================== v2.4 ==================== */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0} .skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--amber);color:var(--ink); padding:12px 18px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;border:0} .skip:focus{left:0} #tableView{display:none} body.tableMode #plot{display:none} body.tableMode #tableView{display:block;max-height:740px;overflow:auto} .dtable{font-size:13px;margin:0} .dtable th[scope=col]{position:sticky;top:0;background:var(--ink);z-index:2} .dtable td.num{font-family:var(--mono);font-size:11.5px;text-align:right;white-space:nowrap} .dtable th[scope=row]{font-weight:400;padding:7px 12px 7px 0;border-bottom:1px solid var(--rule-soft); text-align:left;vertical-align:top} .rowbtn{background:none;border:0;color:var(--txt);font-family:var(--body);font-size:13.4px; text-align:left;cursor:pointer;padding:0;text-decoration:underline;text-decoration-color:rgba(217,161,27,.4)} .rowbtn:hover{color:var(--amber)} .wbox{border:1px solid var(--rule-soft);margin-top:18px} .wbox summary{cursor:pointer;padding:13px 16px;font-family:var(--disp);font-size:16.5px;list-style:none} .wbox summary::-webkit-details-marker{display:none} .wbox summary::after{content:'+';float:right;font-family:var(--mono);color:var(--amber)} .wbox[open] summary::after{content:'–'} .wbox summary:hover{background:rgba(255,255,255,.03)} .wbox>*:not(summary){padding-left:16px;padding-right:16px} .wbox>button{margin-left:16px;margin-bottom:16px} .wrow{display:grid;grid-template-columns:1fr 120px 46px;gap:10px;align-items:center;margin-bottom:7px} .wrow label{font-size:12.6px;color:var(--txt-soft)} .wtag{font-family:var(--mono);font-size:10px;color:var(--amber);margin-right:7px;letter-spacing:.1em} .wrow output{font-family:var(--mono);font-size:11px;text-align:right;color:var(--txt)} input[type=range]{width:100%;accent-color:var(--amber);background:transparent} .trajbar{display:grid;grid-template-columns:1fr 1fr 2fr auto;gap:16px;align-items:end; border:1px solid var(--rule-soft);padding:16px} @media(max-width:820px){.trajbar{grid-template-columns:1fr;gap:12px}} .trajscrub output{font-family:var(--mono);color:var(--amber)} .trajg text{paint-order:stroke;stroke:var(--halo);stroke-width:3px} .pnum{font-family:var(--mono);font-size:11px;color:var(--amber);letter-spacing:.14em;margin-right:10px; border:1px solid rgba(217,161,27,.35);padding:3px 6px;vertical-align:3px} .mh{font-family:var(--disp);font-size:18px;font-weight:400;margin:0 0 4px} .cbox{border:1px solid var(--rule-soft);padding:18px;margin-top:16px;background:rgba(255,255,255,.017)} .spanrows{margin-top:14px} .spanrows .barrow{grid-template-columns:34px 1fr 78px} .spanrows .barfil{position:absolute} .looc td.num{font-family:var(--mono);font-size:11.5px;text-align:right} .looc td{vertical-align:top;font-size:13.2px} #presetBar{border:1px solid var(--rule-soft);padding:18px 20px;margin-bottom:18px; background:linear-gradient(180deg,rgba(217,161,27,.045),transparent)} .pstrip{display:grid;grid-template-columns:repeat(6,1fr);gap:8px} @media(max-width:1100px){.pstrip{grid-template-columns:repeat(3,1fr)}} @media(max-width:640px){.pstrip{grid-template-columns:repeat(2,1fr)}} .pbtn{background:none;border:1px solid var(--rule-soft);color:var(--txt-dim);cursor:pointer; padding:11px 10px;text-align:left;font-family:var(--body);transition:border-color .14s,color .14s} .pbtn b{font-family:var(--disp);font-size:15px;font-weight:400;line-height:1.2;display:block} .pbtn:hover{border-color:var(--amber);color:var(--txt)} .pbtn.on{border-color:var(--amber);background:rgba(217,161,27,.12);color:var(--txt)} #presetLine b{color:var(--amber)} .integ td{padding:6px 10px 6px 0;font-size:13.2px;vertical-align:top} .linbox{border-top:1px solid var(--rule-soft);padding-top:14px;margin-top:16px} .linlist{list-style:none;margin:8px 0 0;padding:0} .linlist li{margin-bottom:11px} .linkrow{background:none;border:0;padding:0;text-align:left;cursor:pointer;display:flex;gap:9px;align-items:baseline;width:100%} .lk{font-family:var(--mono);font-size:9px;letter-spacing:.11em;text-transform:uppercase;color:var(--verd);flex-shrink:0;width:92px} .ln{font-family:var(--disp);font-size:14.6px;color:var(--txt)} .ln em{font-family:var(--mono);font-size:9.5px;color:var(--txt-dim);font-style:normal;margin-left:7px} .linkrow:hover .ln{color:var(--amber)} .lw{display:block;font-size:12.2px;color:var(--txt-soft);line-height:1.42;margin:2px 0 0 101px} @media(max-width:1120px){.lw{margin-left:0}} /* ---- blind coding ---- */ .bccard{border:1px solid var(--rule-soft);padding:24px;background:rgba(255,255,255,.017)} .bcgrid{display:grid;grid-template-columns:1fr 1fr;gap:34px} @media(max-width:900px){.bcgrid{grid-template-columns:1fr;gap:24px}} .subtle{font-family:var(--mono);font-size:11px;color:var(--txt-dim);letter-spacing:.06em;margin:2px 0 0} .bcev{list-style:none;margin:8px 0 0;padding:0} .bcev li{font-size:13.4px;color:var(--txt-body);line-height:1.55;margin-bottom:11px} .bcask{border-top:1px solid var(--rule-soft);margin-top:22px;padding-top:18px} .bcscale{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px} .bcv{flex:1;min-width:44px;background:none;border:1px solid var(--rule-soft);color:var(--txt-dim); font-family:var(--mono);font-size:12.5px;padding:10px 4px;cursor:pointer} .bcv:hover{border-color:var(--amber);color:var(--amber);background:rgba(217,161,27,.08)} .bcmine{font-family:var(--mono);font-size:34px;color:var(--amber);margin-top:4px} .bcrev{border-top:1px solid var(--rule-soft);margin-top:18px;padding-top:18px} .bcstats{border:1px solid var(--amber);padding:20px;margin-top:16px} /* ---- content / form split ---- */ .splitcards{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:26px 0 22px} @media(max-width:760px){.splitcards{grid-template-columns:1fr}} .scard{border:1px solid var(--rule-soft);padding:20px 22px;background:rgba(255,255,255,.02)} .scard h3{font-size:21px;margin:6px 0 8px} .scard p{font-size:14.4px;color:var(--txt-body);margin:0} .stag{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase} /* ---- 3D cubes ---- */ .v3bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:18px 0 12px} #v3wrap{display:grid;grid-template-columns:1fr 1fr;gap:18px} @media(max-width:900px){#v3wrap{grid-template-columns:1fr}} .v3fig{margin:0;border:1px solid var(--rule-soft);background:rgba(0,0,0,.2);padding:16px} .v3fig figcaption{margin-bottom:6px} .v3fig figcaption b{font-family:var(--disp);font-size:21px;font-weight:400;display:block;margin:3px 0} .v3tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--txt-dim)} .v3ax{font-family:var(--mono);font-size:11px;color:var(--amber);letter-spacing:.12em} .v3fig figcaption p{font-size:13.4px;color:var(--txt-soft);margin:6px 0 4px} .v3key{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-dim)} .v3fig svg{width:100%;height:auto;display:block;touch-action:none;cursor:grab} .v3fig svg:active{cursor:grabbing} /* ---- axis glyph cards ---- */ #glyphOut{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media(max-width:860px){#glyphOut{grid-template-columns:1fr}} .gcard{border:1px solid var(--rule-soft);padding:20px 22px 22px;background:linear-gradient(180deg,rgba(255,255,255,.02),transparent)} .gcard h3{font-size:20px;margin:3px 0 0} .gtag{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase} .gband{display:flex;align-items:center;gap:14px;margin:20px 0 8px} .gly{flex-shrink:0;width:36px;height:36px;display:block} .gly svg{width:36px;height:36px;display:block} .grail{position:relative;flex:1;height:8px;border-radius:4px} .gpin{position:absolute;top:50%;transform:translate(-50%,-50%);cursor:pointer} .gpin i{display:block;width:9px;height:9px;background:var(--txt);border:1.5px solid var(--ink); border-radius:50%;transition:transform .12s,background .12s} .gpin em{position:absolute;left:50%;transform:translateX(-50%);top:14px;white-space:nowrap; font-family:var(--mono);font-size:8.5px;letter-spacing:.04em;color:var(--txt-dim); font-style:normal;opacity:0;transition:opacity .12s;pointer-events:none} .gpin:hover i{transform:scale(1.5);background:var(--amber)} .gpin:hover em{opacity:1;color:var(--amber)} .gpoles{display:flex;justify-content:space-between;gap:16px;margin:20px 0 10px} .gpoles span{font-family:var(--disp);font-style:italic;font-size:13.4px;color:var(--txt-soft);max-width:46%} .gpoles span:last-child{text-align:right} .gcard p{font-size:13.6px;color:var(--txt-soft);margin:0} /* ---- language picker ---- */ .langpick{display:inline-block;position:relative;margin-left:14px} .langpick summary{list-style:none;cursor:pointer;font-family:var(--mono);font-size:10px; letter-spacing:.14em;color:var(--txt-dim);padding:4px 8px;border:1px solid var(--rule-soft)} .langpick summary::-webkit-details-marker{display:none} .langpick summary:hover{color:var(--amber);border-color:var(--amber)} .langpick[open] summary{color:var(--amber);border-color:var(--amber)} .langpick ul{position:absolute;right:0;top:calc(100% + 6px);z-index:60;margin:0;padding:8px; list-style:none;min-width:190px;background:var(--ink);border:1px solid var(--rule-soft)} .langpick li{margin:0} .langpick a,.langpick span{display:block;padding:6px 10px;font-size:13.4px;text-decoration:none;border:0} .langpick a.lang-on{color:var(--txt)} .langpick a.lang-on:hover{background:rgba(217,161,27,.12);color:var(--amber)} .langpick a.lang-cur{color:var(--amber)} .langpick span.lang-off{color:var(--txt-faint);cursor:default} .langpick span.lang-off::after{content:" 4 soon";font-family:var(--mono);font-size:9px;letter-spacing:.1em} .langpick .langnote{position:static;display:none} .langpick[open] ul{display:block} @media(max-width:900px){.langpick ul{right:auto;left:0}} html[data-theme="paper"] .langpick ul{background:var(--ink);box-shadow:0 6px 24px rgba(31,46,51,.14)} .evb.compact{padding:14px 16px;margin:12px 0} .evb.compact h4{font-size:15px;margin-bottom:6px} .evb.compact p{font-size:13.4px;margin-bottom:8px} .evb.compact li{font-size:12.8px;margin-bottom:6px} .sgbox{border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft); padding:26px 0;margin:34px 0} .sgform{margin-top:16px;max-width:640px} .sgform .fgrid{gap:12px} /* ---- segment depth ---- */ .st-hot{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase; color:var(--rust);border:1px solid var(--rust);padding:2px 7px;white-space:nowrap} .st-mid{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase; color:var(--amber);border:1px solid var(--amber);padding:2px 7px;white-space:nowrap} .st-cool{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase; color:var(--verd);border:1px solid var(--verd);padding:2px 7px;white-space:nowrap} .glindex{font-size:13px;line-height:2;color:var(--txt-soft);border-top:1px solid var(--rule-soft); border-bottom:1px solid var(--rule-soft);padding:14px 0;margin:20px 0 8px} .glentry{border-top:1px solid var(--rule-soft);padding:18px 0} .glentry h3{font-size:19px;margin:0 0 6px} .glentry p{font-size:14.2px;margin:0;max-width:82ch} .hvgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0} @media(max-width:800px){.hvgrid{grid-template-columns:1fr}} .hvcard{border:1px solid var(--rule-soft);padding:18px 20px;background:rgba(31,46,51,.03)} .hvtag{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--amber)} .hvcard h3{font-size:19px;margin:4px 0 8px} .hvq{font-size:13.6px;color:var(--txt-soft);margin:0 0 10px} .hvpole{font-family:var(--mono);font-size:11.5px;line-height:1.7;color:var(--txt-body);margin:0 0 10px} .hvpole b{color:var(--amber)} .hvnote{font-size:12.8px;color:var(--txt-faint);margin:0;border-top:1px solid var(--rule-soft);padding-top:9px} .hvnote b{color:var(--rust)} /* ---- tier 1 & 2 ---- */ .citebox{border:1px solid var(--rule-soft);padding:14px 18px;margin:30px 0 0} .citebox summary{cursor:pointer;font-family:var(--mono);font-size:10px;letter-spacing:.16em; text-transform:uppercase;color:var(--amber)} .citebox summary::-webkit-details-marker{display:none} .citebox summary::before{content:"B ";font-weight:600} .citebox[open] summary::before{content:"‘2 "} .citeref{font-family:var(--mono);font-size:12.2px;line-height:1.6;color:var(--txt-body); background:rgba(31,46,51,.05);border:1px solid var(--rule-soft);padding:14px 16px;margin:10px 0; word-break:break-word} .searchwrap{margin:24px 0} .searchwrap .fld input,.searchwrap .fld select{font-size:16px;padding:13px 14px} .chips{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0} .chip{background:rgba(142,97,16,.1);border:1px solid var(--amber);color:var(--amber); font-family:var(--mono);font-size:11px;letter-spacing:.05em;padding:6px 11px;cursor:pointer} .chip:hover{background:var(--amber);color:var(--paper-ink)} #sres li a,.plist li a{display:flex;justify-content:space-between;gap:14px} /* ---- reports ---- */ .reprow{display:grid;grid-template-columns:1fr auto;gap:26px;align-items:start; border-top:1px solid var(--rule-soft);padding:24px 0} @media(max-width:760px){.reprow{grid-template-columns:1fr;gap:14px}} .repwho{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber)} .reprow h3{font-size:23px;margin:6px 0 8px;line-height:1.2} .reprow h3 a{border:0} .reprow p{font-size:14.4px;color:var(--txt-soft);margin:0 0 6px} .repmeta{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--txt-faint)} .repact{display:flex;flex-direction:column;gap:8px;min-width:170px} @media(max-width:760px){.repact{flex-direction:row}} .rtoc{border:1px solid var(--rule-soft);padding:18px 22px;margin:26px 0;background:rgba(31,46,51,.03)} .rtoc ol{margin:8px 0 0;padding-left:20px} .rtoc li{font-size:13.8px;color:var(--txt-soft);margin-bottom:5px} /* ---- learning ---- */ .mexercise{border:1px solid var(--amber);padding:22px 24px;margin:28px 0; background:linear-gradient(180deg,rgba(142,97,16,.05),transparent)} .mexercise h3{font-size:20px;margin:6px 0 10px} .mexercise ol,.mexercise ul{padding-left:20px;margin:10px 0} .mexercise li{font-size:14.2px;color:var(--txt-body);margin-bottom:8px} .mexercise p{font-size:14.4px} .learnbar{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:24px 0; border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft);padding:18px 0} @media(max-width:640px){.learnbar{grid-template-columns:1fr}} .learnbar b{display:block;font-family:var(--mono);font-size:26px;color:var(--amber);line-height:1} .learnbar span{display:block;font-size:12.6px;color:var(--txt-soft);margin-top:5px} .mgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0} @media(max-width:800px){.mgrid{grid-template-columns:1fr}} .mcard{display:block;border:1px solid var(--rule-soft);padding:20px 22px;text-decoration:none; position:relative;transition:border-color .14s} a.mcard:hover{border-color:var(--amber)} a.mcard:hover h3{color:var(--amber)} .mcard.off{opacity:.62} .mnum{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--amber)} .mcard h3{font-size:20px;margin:5px 0 6px;color:var(--txt);transition:color .14s} .msub{font-size:13.8px;color:var(--txt-soft);margin:0 0 10px} ul.tick.small li{font-size:13px;margin-bottom:6px} .mmins{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase; color:var(--txt-faint);margin-right:12px} .mstate{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;padding:2px 7px} .mstate.live{color:var(--verd);border:1px solid var(--verd)} .mstate.soon{color:var(--txt-faint);border:1px solid var(--rule-soft)} .modnav{display:flex;gap:10px;flex-wrap:wrap;margin:34px 0 0;padding-top:22px;border-top:1px solid var(--rule-soft)} blockquote.teachq{font-family:var(--disp);font-style:italic;font-size:22px;color:var(--amber); border-left:2px solid var(--amber);margin:22px 0;padding:4px 0 4px 20px;max-width:60ch} /* ---- newsroom ---- */ .dateline{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--txt-dim); border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft);padding:12px 0;margin:22px 0} .dateline b{color:var(--amber);letter-spacing:.14em} .sharerow{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:0 0 30px} .sharerow>div{display:flex;gap:7px;flex-wrap:wrap} .sharerow .btn{padding:7px 12px;font-size:10px} .newsrow{border-top:1px solid var(--rule-soft);padding:22px 0} .newsdate{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--amber)} .newsrow h3{font-size:23px;margin:7px 0 8px;line-height:1.2} .newsrow h3 a{border:0} .newsrow p{font-size:14.4px;margin:0;color:var(--txt-soft)} .boiler{border:1px solid var(--rule-soft);padding:20px 22px;margin:30px 0;background:rgba(255,255,255,.017)} .boiler h3{font-size:18px;margin-bottom:8px} .boiler p{font-size:13.6px} /* ---- segment landing pages ---- */ .hookbox{border:1px solid rgba(217,161,27,.4);padding:22px 24px;margin:26px 0; background:linear-gradient(180deg,rgba(217,161,27,.06),transparent)} .hookbox h3{font-size:22px;margin:4px 0 0} .hookbox p{font-size:14.4px;margin:14px 0 0} .signupbox{border:1px solid var(--amber);padding:26px 28px;margin:34px 0; background:linear-gradient(180deg,rgba(217,161,27,.05),transparent)} @media(max-width:700px){.signupbox{padding:20px 18px}} .consents{margin-top:18px;display:grid;gap:12px} .cbx{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;cursor:pointer; border:1px solid var(--rule-soft);padding:14px 16px;transition:border-color .14s} .cbx:hover{border-color:rgba(217,161,27,.5)} .cbx input{width:17px;height:17px;margin-top:2px;accent-color:var(--amber);cursor:pointer} .cbx span{font-size:13.4px;color:var(--txt-body);line-height:1.5} .cbx b{color:var(--txt);font-weight:500} .signup .fgrid{gap:14px} /* ---- sample deliverable ---- */ .samplemeta{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:24px 0; border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft);padding:16px 0} @media(max-width:760px){.samplemeta{grid-template-columns:1fr 1fr}} .samplemeta b{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.16em; text-transform:uppercase;color:var(--txt-dim);margin-bottom:4px;font-weight:400} .samplemeta span{font-family:var(--disp);font-size:15.5px;color:var(--txt)} .accbox{border:1px solid var(--rule-soft);padding:22px 24px;margin:22px 0;background:rgba(255,255,255,.017)} .claimline{font-family:var(--disp);font-style:italic;font-size:21px;color:var(--txt);margin:0 0 16px} .tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:18px 0} .tscroll .mtable{margin:0;min-width:560px} .hero .herogrid{align-items:start} .doc{max-width:920px;margin:0 auto;padding:0 28px} .doc h1{font-size:clamp(32px,4.6vw,52px);letter-spacing:-.02em;margin:0 0 10px} .doc h2{font-size:26px;margin:44px 0 14px;letter-spacing:-.01em} .doc h3{font-size:19px;margin:26px 0 8px} .doc p{font-size:16px;color:var(--txt-body);max-width:74ch} .crumb{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-dim);margin-bottom:20px} .crumb a{border:0} .subt{font-family:var(--mono);font-size:12px;color:var(--txt-dim);letter-spacing:.06em;margin-bottom:26px} .coordgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:26px 0} @media(max-width:760px){.coordgrid{grid-template-columns:repeat(3,1fr)}} .cg{border:1px solid var(--rule-soft);padding:12px 10px;text-align:center} .cg b{display:block;font-family:var(--mono);font-size:21px;color:var(--amber);font-weight:500} .cg span{font-family:var(--mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--txt-dim);display:block;margin-top:4px} .cg em{display:block;font-size:10.5px;color:var(--txt-soft);font-style:normal;margin-top:5px;line-height:1.25} .evb{border:1px solid var(--rule-soft);margin-bottom:10px;padding:15px 17px} .evb h4{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin:0 0 6px} .evb p{font-size:14px;margin:0 0 10px} .evb ul{margin:0;padding:0;list-style:none} .evb li{font-size:13.2px;color:var(--txt-body);margin-bottom:8px;line-height:1.5} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px} @media(max-width:760px){.grid2{grid-template-columns:1fr}} .plist{list-style:none;padding:0;margin:0} .plist li{border-bottom:1px solid var(--rule-soft);padding:9px 0} .plist a{display:flex;gap:12px;align-items:baseline;border:0} .plist .nm{flex:1;font-family:var(--disp);font-size:15.5px;color:var(--txt)} .plist .mt{font-family:var(--mono);font-size:10.5px;color:var(--txt-dim)} .plist a:hover .nm{color:var(--amber)} .cta{border:1px solid var(--amber);padding:22px;margin:34px 0;display:flex;gap:18px;align-items:center;flex-wrap:wrap} .cta p{margin:0;flex:1;min-width:240px;font-size:14.6px} .tj{border-left:2px solid var(--amber);padding:2px 0 2px 16px;margin-bottom:16px} .tj b{font-family:var(--mono);font-size:11px;color:var(--amber);letter-spacing:.08em} .tj span{display:block;font-family:var(--mono);font-size:10.5px;color:var(--txt-dim);margin:3px 0} .tj p{font-size:13.4px;margin:4px 0 0} .idxgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:2px 22px} .idxgrid a{display:block;padding:6px 0;border-bottom:1px solid var(--rule-soft);font-size:14px;border-left:0;border-right:0;border-top:0} footer.sf{border-top:1px solid var(--rule-soft);margin-top:60px;padding:34px 0 60px} /* ========================================================================== v4.3.1 — masthead navigation no longer clips. .mast .wrap held a fixed height of 60px and .mastnav was a flex row with overflow-x:auto and a hidden scrollbar, so any item past the container edge was cut mid-word with no affordance to reach it. At 1440px this already removed Data, Glossary and Search in 4.2; the fourteenth item added in 4.3 pushed Codebook and Method out as well, rendering METHOD as METH. The nav now wraps within the space beside the brandmark and the masthead grows to fit. No item is removed and no label is abbreviated. ========================================================================== */ .mast .wrap{height:auto;min-height:60px;padding-top:8px;padding-bottom:8px; flex-wrap:nowrap;align-items:center;gap:20px} .mastnav{flex:1 1 auto;min-width:0;flex-wrap:wrap;justify-content:flex-end; gap:4px 18px;overflow:visible;scrollbar-width:auto} .mastnav a{padding:2px 0;line-height:1.5} @media (max-width:820px){ .mast .wrap{flex-wrap:wrap;gap:10px} .mastnav{flex-basis:100%;justify-content:flex-start;margin-left:0;gap:4px 14px} }