@font-face { font-family: Instrument; src: url('/assets/fonts/InstrumentSans.woff2') format('woff2'); font-display: swap; }
:root { color-scheme: dark; --surface-radius:0px; --bg:#080b0a; --panel:#101614; --line:#27332f; --text:#f4f7f5; --muted:#aebbb6; --accent:#dbff64; --blue:#9cc8ff; }
* { box-sizing: border-box; }
:where(*, *::before, *::after) { border-radius:var(--surface-radius) !important; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--bg); color:var(--text); font-family:Instrument,system-ui,sans-serif; line-height:1.55; }
/* Typography is deliberately weight-neutral; hierarchy comes from other cues. */
h1, h2, h3, h4, h5, h6, th, strong, b { font-weight: 400; }
a { color:inherit; text-underline-offset:.2em; }
a:hover { color:var(--accent); }
.skip-link { position:absolute; left:1rem; top:-5rem; background:var(--accent); color:#080b0a; padding:.75rem 1rem; z-index:3; }
.skip-link:focus { top:1rem; }
.site-header, footer { width:min(1120px,calc(100% - 2rem)); margin:auto; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1.25rem 0; }
.site-header { border-bottom:1px solid var(--line); }
.brand { font-size:1.55rem; font-weight: 400; text-decoration:none; letter-spacing:-.04em; }
.brand i { color:var(--accent); font-style:normal; padding:0 .05em; }
nav { display:flex; flex-wrap:wrap; align-items:center; gap:.45rem 1.25rem; }
nav a { min-height:44px; display:inline-flex; align-items:center; }
main { width:min(1040px,calc(100% - 2rem)); margin:auto; padding:4rem 0; }
section { margin:0 0 4.5rem; }
.hero { max-width:900px; }
.eyebrow { color:var(--accent); text-transform:uppercase; letter-spacing:.13em; font-size:.78rem; font-weight: 400; }
h1 { font-size:clamp(2.4rem,7vw,5.6rem); line-height:.98; letter-spacing:-.055em; margin:.4rem 0 1.5rem; max-width:980px; }
h2 { font-size:clamp(1.55rem,3vw,2.3rem); letter-spacing:-.035em; }
h3 { margin-top:0; }
.lede { color:#dbe4e0; font-size:clamp(1.08rem,2vw,1.35rem); max-width:780px; }
.facts { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem; }
.facts > span, .status { border:1px solid var(--line); border-radius:999px; padding:.5rem .8rem; color:var(--muted); }
.status.good { border-color:#577829; color:#dfff8d; }
.status.caution { border-color:#786f29; color:#fff59a; }
.metric-grid, .explain-grid, .input-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.metric-card, .explain-grid article, .input-grid div, .note, .source-panel { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:1.2rem; }
.metric-card span, .metric-card small, .caption, .input-grid dt, footer { color:var(--muted); }
.metric-card strong { display:block; font-size:1.8rem; margin:.25rem 0; }
.input-grid { margin:0; }
.input-grid dd { margin:.25rem 0 0; font-size:1.2rem; }
.link-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem 2rem; padding-left:1.25rem; }
.link-list a { min-height:44px; display:inline-flex; align-items:center; }
.breadcrumb { color:var(--muted); margin-bottom:2rem; }
.breadcrumb span::before { content:'›'; margin:0 .45rem; }
.table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:14px; }
table { border-collapse:collapse; width:100%; min-width:650px; }
th,td { padding:.45rem .7rem; text-align:left; border:0; }
th { color:var(--muted); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.72rem; text-transform:uppercase; letter-spacing:.07em; }
tbody tr:nth-child(even) td { background:rgb(255 255 255 / 3%); }
tbody tr:hover td { background:rgb(219 255 100 / 5.5%); }
td small { display:block; color:var(--muted); }
.exposure-list { list-style:none; padding:0; display:grid; gap:.65rem; }
.exposure-list li { display:flex; justify-content:space-between; gap:1rem; padding:.8rem 0; border-bottom:1px solid var(--line); }
.exposure-list span { color:var(--muted); }
.source-link { display:inline-flex; min-height:44px; align-items:center; color:var(--blue); }
footer { border-top:1px solid var(--line); font-size:.9rem; }
@media (max-width:760px) {
  .site-header,footer { align-items:flex-start; flex-direction:column; }
  main { padding-top:2.5rem; }
  .metric-grid,.explain-grid,.input-grid,.link-list { grid-template-columns:1fr; }
  h1 { font-size:2.75rem; }
  .exposure-list li { flex-direction:column; }
}