/* ==========================================================================
   base.css
   Reset, document furniture, masthead, weight gauge, tab bar, view scaffolding.
   ========================================================================== */

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0; background:var(--field); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background-image:linear-gradient(var(--field2) 1px,transparent 1px),linear-gradient(90deg,var(--field2) 1px,transparent 1px);
  background-size:32px 32px;
}

.wrap{position:relative; z-index:1; max-width:1240px; margin:0 auto; padding:0 var(--sp) 96px;}

a{color:var(--link)}

code,kbd{font-family:var(--mono); font-size:.88em; background:#EDF1F5; border:1px solid var(--rule); border-radius:3px; padding:.08em .34em; white-space:nowrap;}

pre{font-family:var(--mono); font-size:13px; line-height:1.55; background:var(--ink); color:#DCE6EE; padding:14px 16px; border-radius:4px; overflow-x:auto; margin:12px 0;}

pre code{background:none;border:none;padding:0;color:inherit;white-space:pre}

pre .c{color:#7E93A5}

pre .k{color:#7FD1C1}

pre .s{color:#E8B87A}

h1,h2,h3,h4{font-family:var(--mono); font-weight:700; letter-spacing:-.02em; line-height:1.2; margin:0}

.eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink3); margin:0 0 8px}

.mast h1{font-size:clamp(30px,6.2vw,54px)}

.mast .sub{font-family:var(--mono); font-size:13px; color:var(--ink2); margin-top:10px; letter-spacing:.02em}

.facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(126px,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); margin-top:24px}

.fact{background:var(--paper); padding:12px 14px}

.fact b{display:block; font-family:var(--mono); font-size:21px; letter-spacing:-.03em}

.fact span{font-size:11px; font-family:var(--mono); text-transform:uppercase; letter-spacing:.1em; color:var(--ink3)}

.gauge .ghead{display:flex; justify-content:space-between; align-items:baseline; gap:12px 24px; flex-wrap:wrap; margin-bottom:44px; padding-bottom:18px; border-bottom:1px dashed var(--rule)}

.gauge .ghead>div:first-child{flex:1 1 320px}

.gauge .ghead .pace{flex:0 0 auto}

.bars{display:flex; align-items:flex-end; gap:8px; height:112px; margin-top:10px}

.bar{flex:1; display:flex; flex-direction:column; justify-content:flex-end; text-decoration:none; color:inherit; min-width:0}

.bar .fillwrap{position:relative; border:1px solid var(--ink); border-bottom:none; background:repeating-linear-gradient(135deg,#fff,#fff 5px,#EEF2F6 5px,#EEF2F6 10px);}

.bar .fill{background:var(--ink); height:0; transition:height .9s cubic-bezier(.2,.8,.2,1)}

.bar.w .fill{background:var(--focus)}

.bar .pct{font-family:var(--mono); font-size:15px; font-weight:700; padding-bottom:4px}

.bar .lbl{font-family:var(--mono); font-size:10.5px; line-height:1.25; text-transform:uppercase; letter-spacing:.05em; color:var(--ink2); border-top:2px solid var(--ink); padding-top:6px; min-height:44px}

.bar.w .lbl{color:var(--focus); border-top-color:var(--focus)}

.bar:hover .lbl{color:var(--link)}

.gnote{font-size:12.5px; color:var(--ink2); margin-top:10px; border-top:1px dashed var(--rule); padding-top:9px}

nav.tabs::-webkit-scrollbar{display:none}

nav.tabs button{font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; background:transparent; border:1px solid var(--rule2); color:var(--ink2); padding:7px 12px; border-radius:2px; cursor:pointer; white-space:nowrap}

nav.tabs button:hover{border-color:var(--ink); color:var(--ink)}

nav.tabs button[aria-selected="true"]{background:var(--ink); border-color:var(--ink); color:#fff}

.view{display:none; padding-top:34px}

.view.on{display:block}

section.blk{background:var(--paper); border:1px solid var(--rule); padding:clamp(18px,3vw,32px); margin-bottom:22px}

section.blk>h2{font-size:clamp(20px,3.4vw,27px); padding-bottom:12px; border-bottom:2px solid var(--ink); margin-bottom:18px; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}

section.blk>h2 .wt{font-size:12px; font-family:var(--mono); letter-spacing:.08em; color:var(--ink3); font-weight:400}

h3.ts{font-size:16px; margin:26px 0 8px; padding-left:12px; border-left:4px solid var(--ink)}

h3.ts.f{border-left-color:var(--focus)}

h4{font-size:13px; font-family:var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink3); margin:16px 0 6px}

p{margin:9px 0}

ul{margin:8px 0; padding-left:20px}

li{margin:5px 0}

.lede{font-size:17px; color:var(--ink2); max-width:66ch}

.scroll{overflow-x:auto}

footer{border-top:2px solid var(--ink); margin-top:40px; padding-top:18px; font-family:var(--mono); font-size:11.5px; color:var(--ink3); line-height:1.7}

@media (prefers-reduced-motion:reduce){*{transition:none!important; scroll-behavior:auto}}

:focus-visible{outline:3px solid var(--link); outline-offset:2px}

.hidden{display:none!important}

h3.ts{scroll-margin-top:70px}

section.blk{scroll-margin-top:70px}