/* Storey Range website. Teal = lower, burnt orange = higher. Light and dark themes; single column on phones. */
:root {
  --bg:#EEF2F0; --paper:#FFFFFF; --ink:#13201C; --muted:#5A6964; --line:#D5DDDA; --accent:#0D6B66; --up:#B4531A; --down:#0D6B66;
  --chip:#E3EBE8; --s2:#6F7FA8; --s3:#B4531A; --sg:#9AA6A2; --warnbg:#FBF1E6;
  --display:"Archivo", "Arial Narrow", system-ui, sans-serif; --body:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, Consolas, monospace;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg:#0D1311; --paper:#151D1A; --ink:#E4ECE9; --muted:#93A29D; --line:#2A3531; --accent:#4DB2AA; --up:#E8965A; --down:#4DB2AA;
  --chip:#1E2926; --s2:#9AA9D6; --s3:#E8965A; --sg:#6C7975; --warnbg:#2A2118; color-scheme:dark; } }
:root[data-theme="dark"] { --bg:#0D1311; --paper:#151D1A; --ink:#E4ECE9; --muted:#93A29D; --line:#2A3531; --accent:#4DB2AA; --up:#E8965A;
  --down:#4DB2AA; --chip:#1E2926; --s2:#9AA9D6; --s3:#E8965A; --sg:#6C7975; --warnbg:#2A2118; color-scheme:dark; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.6 var(--body); }
a { color:var(--accent); }
a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.wrap { max-width:1040px; margin:0 auto; padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px)); }
header.site { background:var(--paper); border-bottom:2px solid var(--ink); }
header.site .wrap { display:flex; flex-wrap:wrap; gap:6px 24px; align-items:baseline; justify-content:space-between; padding-block:14px 10px; }
.wordmark { font:800 26px/1 var(--display); font-stretch:75%; letter-spacing:.04em; text-transform:uppercase; color:var(--ink); text-decoration:none; }
nav.main { display:flex; flex-wrap:wrap; gap:4px 18px; font-size:15px; }
nav.main a { color:var(--muted); text-decoration:none; padding:2px 0; }
nav.main a.on { color:var(--ink); font-weight:600; border-bottom:2px solid var(--accent); }
.descriptor { background:var(--paper); border-bottom:1px solid var(--line); }
.descriptor p { margin:0; padding-block:8px 12px; color:var(--muted); font-size:14.5px; max-width:72ch; }
main { padding-block:24px 48px; display:flex; flex-direction:column; gap:22px; }
.kicker { font:500 12.5px var(--mono); color:var(--muted); letter-spacing:.04em; margin:0; }
h1 { font:800 clamp(32px, 6vw, 52px)/1.05 var(--display); font-stretch:75%; margin:4px 0 0; letter-spacing:-.01em; text-wrap:balance; }
h2 { font:700 21px/1.25 var(--display); font-stretch:90%; margin:0 0 8px; display:flex; flex-wrap:wrap; gap:8px; align-items:baseline; text-wrap:balance; }
.seg { font:700 11px var(--mono); letter-spacing:.08em; text-transform:uppercase; background:var(--ink); color:var(--paper); padding:3px 7px; border-radius:4px; }
.main-take { background:var(--ink); color:var(--paper); border-radius:10px; padding:16px 18px; max-width:820px; }
.main-take .tl { color:var(--paper); opacity:.75; }
.main-take p { margin:4px 0 0; font-size:18px; line-height:1.5; font-weight:500; }
.tl { display:block; font:600 11px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:2px; }
.take { font-weight:600; margin:0 0 12px; max-width:68ch; }
.note { color:var(--muted); font-size:13.5px; margin:8px 0 0; }
.note.warn { background:var(--warnbg); color:var(--ink); padding:8px 10px; border-radius:6px; }
.panel { background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:18px; min-width:0; }
.grid2 { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap:18px; }
.stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:14px; }
.stats div { border-top:3px solid var(--accent); padding-top:8px; display:flex; flex-direction:column; gap:2px; }
.sv { font:700 26px var(--mono); font-variant-numeric:tabular-nums; } .sl { color:var(--muted); font-size:13.5px; }
.scroll { overflow-x:auto; min-width:0; }
table { border-collapse:collapse; width:100%; font-size:14.5px; }
th { text-align:left; font:600 11.5px var(--mono); letter-spacing:.04em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--line); padding:6px 8px; white-space:nowrap; }
td { border-bottom:1px solid var(--line); padding:8px; vertical-align:top; }
.num { text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap; }
.up { color:var(--up); font-weight:600; } .down { color:var(--down); font-weight:600; } .flat { color:var(--muted); }
ul.items { margin:0 0 12px; padding-left:20px; display:flex; flex-direction:column; gap:6px; }
.more { margin:10px 0 0; font-weight:600; } .more a { text-decoration:none; }
.big { font:800 46px/1 var(--display); font-stretch:75%; color:var(--accent); margin:0 0 6px; }
.chart svg { width:100%; min-width:520px; height:auto; display:block; }
.chart { overflow-x:auto; }
.grid { stroke:var(--line); stroke-width:1; } .ax { fill:var(--muted); font:11px var(--mono); }
.ln { stroke-width:2.5; fill:none; stroke-linejoin:round; stroke-linecap:round; }
.c0 { stroke:var(--accent); fill:var(--accent); background:var(--accent); } .c1 { stroke:var(--s2); fill:var(--s2); background:var(--s2); }
.c2 { stroke:var(--s3); fill:var(--s3); background:var(--s3); } .c3 { stroke:var(--sg); fill:var(--sg); background:var(--sg); }
.legend { display:flex; flex-wrap:wrap; gap:6px 18px; font-size:13.5px; margin-top:6px; }
.sw { display:inline-block; width:18px; height:3px; margin-right:6px; vertical-align:middle; }
.bars { display:flex; flex-direction:column; gap:8px; }
.bar { display:grid; grid-template-columns:minmax(110px, 170px) 1fr auto; gap:10px; align-items:center; font-size:14px; }
.track { background:var(--chip); height:12px; border-radius:3px; overflow:hidden; } .fill { display:block; height:100%; background:var(--accent); }
.bv { font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap; }
.list a { display:block; padding:10px 0; border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink); }
.list a span { color:var(--muted); font-size:14px; display:block; }
footer.site { border-top:1px solid var(--line); background:var(--paper); color:var(--muted); font-size:13.5px; }
footer.site .wrap { padding-block:18px 28px; display:flex; flex-direction:column; gap:6px; }
@media (max-width:520px) { .panel { padding:14px; } .bar { grid-template-columns:1fr auto; } .bar .track { grid-column:1 / -1; grid-row:2; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior:auto; } }