/* Shared by the materials pages, lifted out of their inline <style> blocks so the same
   CSS is fetched once and cached instead of being inlined on every page.
   Same @layer, same rule order as site/materials/index.html, so the cascade is unchanged. */

@layer components {
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-6);
max-width:var(--max-content);margin-inline:auto;padding:var(--sp-4) var(--margin)}
.wordmark{font-family:var(--font-display);font-weight:var(--w-display);
font-size:var(--t-h4);line-height:var(--lh-h4);letter-spacing:0.05em;text-transform:uppercase;
color:var(--ink);text-decoration:none}
.wordmark span{color:var(--ink-3)}
.nav-links{display:none;gap:var(--sp-6);color:var(--ink-2)}
@media(min-width:768px){.nav-links{display:flex}}
.nav-links a{text-decoration:none;padding-block:var(--sp-1);border-bottom:1px solid transparent;
transition:border-color var(--dur-1) var(--ease-standard)}
.nav-links a:hover,.nav-links a[aria-current]{border-bottom-color:var(--accent)}
h1,h2,h3,h4{font-weight:var(--w-display)}
.mono{font-family:var(--font-mono);font-size:var(--t-micro);line-height:var(--lh-micro);
letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-3)}
.sec-h{font-size:var(--t-h2);line-height:var(--lh-h2);letter-spacing:0.022em;
text-transform:uppercase;max-width:22ch}
.sub-h{font-size:var(--t-h4);line-height:var(--lh-h4);letter-spacing:var(--tr-h4)}
.lede{color:var(--ink-2);font-size:var(--t-body-lg);line-height:var(--lh-body-lg);
letter-spacing:var(--tr-body-lg);max-width:52ch}
.nav-links,.small,.foot-in{font-size:var(--t-sm);line-height:var(--lh-sm);
letter-spacing:var(--tr-sm)}
.m2{margin-top:var(--sp-2)}
.m3{margin-top:var(--sp-3)}
.m4{margin-top:var(--sp-4)}
.m5{margin-top:var(--sp-5)}
.m6{margin-top:var(--sp-6)}
.m7{margin-top:var(--sp-7)}
.tx{color:var(--ink-2)}
.t3{color:var(--ink-3)}
.tw{max-width:var(--max-text)}
.full{grid-column:1/-1}
.btn{display:inline-flex;align-items:center;gap:var(--sp-2);border:1px solid var(--rule);
background:transparent;color:var(--ink);font:inherit;font-size:var(--t-sm);line-height:var(--lh-sm);
font-weight:var(--w-medium);letter-spacing:var(--tr-sm);border-radius:var(--r-0);
padding:calc(var(--sp-3) + 1px) var(--sp-5) var(--sp-3);cursor:pointer;text-decoration:none;
transition:background var(--dur-1) var(--ease-standard),border-color var(--dur-1) var(--ease-standard)}
.btn:hover{border-color:var(--ink-3);background:var(--surface-2)}
.btn-primary{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}
.btn-primary:hover{background:var(--fill-h);border-color:var(--fill-h);color:var(--on-fill)}
.hero{border-bottom:1px solid var(--rule);padding-block:var(--sp-8) var(--sp-7)}
.hero-in{max-width:var(--max-content);margin-inline:auto;padding-inline:var(--margin)}
.hero h1{font-family:var(--font-display);text-transform:uppercase;
font-size:var(--t-h1);line-height:var(--lh-h1);letter-spacing:0.018em;font-weight:var(--w-display);
max-width:20ch}
.band{background:var(--surface-band);border-block:1px solid var(--rule)}
.mat th,.mat td{border-top:1px solid var(--rule);padding:var(--sp-4) var(--sp-4) var(--sp-4) 0;
vertical-align:top;font-size:var(--t-sm);line-height:var(--lh-sm);letter-spacing:var(--tr-sm)}
.mat th+th,.mat td+td{border-left:1px solid var(--rule);padding-left:var(--sp-4)}
.mat thead th{border-top:0;font-family:var(--font-mono);font-size:var(--t-micro);
line-height:var(--lh-micro);letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-3);
font-weight:var(--w-regular);padding-block:0 var(--sp-3)}
.mat tbody th{font-weight:var(--w-medium);color:var(--ink)}
.mat td{color:var(--ink-2)}
.mat .num{font-variant-numeric:tabular-nums;color:var(--ink)}
.wrap{overflow-x:auto}
.party-int{color:var(--ink);border-color:var(--ink);border-left-width:4px}
.disps{counter-reset:d}
.disp::before{content:"D" counter(d,decimal-leading-zero);display:block;
font-family:var(--font-mono);font-size:var(--t-micro);line-height:var(--lh-micro);
letter-spacing:0.08em;color:var(--ink-3);margin-bottom:var(--sp-3)}
.disp h3{font-family:var(--font-body);font-size:var(--t-body);line-height:var(--lh-body);
letter-spacing:var(--tr-body);font-weight:var(--w-medium)}
.two{display:grid;gap:var(--sp-5) var(--gutter);margin-top:var(--sp-4)}
@media(min-width:768px){.two{grid-template-columns:1fr 1fr}}
.two>div{border-top:1px solid var(--rule);padding-top:var(--sp-3)}
.two p,.disp>p{font-size:var(--t-sm);line-height:var(--lh-sm);letter-spacing:var(--tr-sm);
color:var(--ink-2)}
.verdict{margin-top:var(--sp-4);padding-left:var(--sp-4);border-left:2px solid var(--ink-4)}
.panel{border:1px solid var(--rule);padding:var(--sp-6);background:var(--surface-2);
max-width:var(--max-text)}
blockquote{margin:var(--sp-4) 0 0;padding-left:var(--sp-5);border-left:2px solid var(--accent-ink);
color:var(--ink-2);hanging-punctuation:first}
.cite:hover,.cite:focus-visible,.cite[aria-expanded="true"]{background:var(--accent-ink);box-shadow:0 0 0 0.14em color-mix(in oklab,var(--accent-ink) 22%,transparent)}
.srcs{grid-column:1/-1;columns:2 340px;column-gap:var(--gutter);margin-top:var(--sp-6)}
.sources li{break-inside:avoid;color:var(--ink-2)}
/* cite.css numbers the list in --accent too. Same rebinding, same reason. */
.sources li::before{color:var(--accent-ink)}
.sources a{color:var(--accent-ink);word-break:break-word}
.sources b{font-weight:var(--w-medium);color:var(--ink)}
.foot{border-top:1px solid var(--rule)}
.foot-in{max-width:var(--max-content);margin-inline:auto;padding:var(--sp-8) var(--margin);
display:flex;flex-wrap:wrap;gap:var(--sp-6);justify-content:space-between;color:var(--ink-3)}
}