/* Storm Station 247. The engineering drafting of the instrument pages, set
   for a data site: a finer line, a quieter icon, three grounds. Every colour
   is a variable, and the dark and black grounds redefine the instrument
   pages' own variables too, so every page follows the reader's choice. */

:root{
  --ss-bg:#f4f6f9; --ss-card:#ffffff; --ss-line:#d9e0e8; --ss-line2:#c3ccd7;
  --ss-ink:#121a24; --ss-dim:#526073; --ss-faint:#7a8696;
  --ss-accent:#0b68a6; --ss-accent2:#e3f0fa; --ss-grid:rgba(18,26,36,.045);
  --ss-extreme:#8e1b3f; --ss-severe:#b3261e; --ss-moderate:#a35c00; --ss-minor:#4d6b00;
  --ss-sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,Roboto,sans-serif;
  --ss-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --ss-wrap:1240px; --ss-gutter:clamp(16px,4vw,40px);
  color-scheme: light;
}
:root[data-theme="dark"]{
  --ss-bg:#0e131a; --ss-card:#141b24; --ss-line:#223041; --ss-line2:#2e3f54;
  --ss-ink:#e5ebf2; --ss-dim:#97a6b8; --ss-faint:#6f7f92;
  --ss-accent:#63b3ee; --ss-accent2:#132636; --ss-grid:rgba(229,235,242,.04);
  --ss-extreme:#ff7aa0; --ss-severe:#ff8a80; --ss-moderate:#ffb45c; --ss-minor:#b5d86b;
  color-scheme: dark;
}
:root[data-theme="black"]{
  --ss-bg:#000000; --ss-card:#070707; --ss-line:#1c1c1c; --ss-line2:#2a2a2a;
  --ss-ink:#ececec; --ss-dim:#9a9a9a; --ss-faint:#6a6a6a;
  --ss-accent:#6cc2ff; --ss-accent2:#0b1a24; --ss-grid:rgba(255,255,255,.035);
  --ss-extreme:#ff7aa0; --ss-severe:#ff8a80; --ss-moderate:#ffb45c; --ss-minor:#b5d86b;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    --ss-bg:#0e131a; --ss-card:#141b24; --ss-line:#223041; --ss-line2:#2e3f54;
    --ss-ink:#e5ebf2; --ss-dim:#97a6b8; --ss-faint:#6f7f92;
    --ss-accent:#63b3ee; --ss-accent2:#132636; --ss-grid:rgba(229,235,242,.04);
    --ss-extreme:#ff7aa0; --ss-severe:#ff8a80; --ss-moderate:#ffb45c; --ss-minor:#b5d86b;
    color-scheme: dark;
  }
}

/* THE INSTRUMENT PAGES FOLLOW THE GROUND. Their own variables, mapped. */
:root{
  --snow:var(--ss-bg); --card:var(--ss-card); --line:var(--ss-line); --ink:var(--ss-ink);
  --dim:var(--ss-dim); --faint:var(--ss-faint); --ice:var(--ss-accent); --ice2:var(--ss-accent2);
  --ice-ink:var(--ss-accent);
}
:root[data-theme="dark"], :root[data-theme="black"]{
  --map-land:#1b2a3d; --map-edge:#4d6682; --map-hot:#2d5a8c; --map-ink:#c6d6ea;
  --map-water:var(--ss-bg); --map-water-edge:#35506d; --map-water-ink:#7f93ab; --map-sea:#223246;
  --shadow:0 10px 30px -14px rgba(0,0,0,.6);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    --map-land:#1b2a3d; --map-edge:#4d6682; --map-hot:#2d5a8c; --map-ink:#c6d6ea;
    --map-water:var(--ss-bg); --map-water-edge:#35506d; --map-water-ink:#7f93ab; --map-sea:#223246;
    --shadow:0 10px 30px -14px rgba(0,0,0,.6);
  }
}
html, body{ background:var(--ss-bg); color:var(--ss-ink); }

/* THE ICONS, FINER. The same drawings, at a drafting pen's weight. */
svg.ss-g, svg.now-i, svg.day-g{ color:var(--ss-dim); }
svg.ss-g *, svg.now-i *, svg.day-g *{ stroke-width:1.05; }

/* ── THE HEAD ─────────────────────────────────────────────────────────── */
.ss-top{ position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--ss-bg) 92%, transparent);
  backdrop-filter:saturate(1.2) blur(8px); border-bottom:1px solid var(--ss-line); font-family:var(--ss-sans); }
.ss-bar{ max-width:var(--ss-wrap); margin:0 auto; padding:0 var(--ss-gutter); height:58px;
  display:flex; align-items:center; gap:18px; }
.ss-mark{ display:flex; align-items:center; gap:10px; color:var(--ss-ink); text-decoration:none; flex:none; }
.ss-mark svg{ width:30px; height:30px; }
.ss-mark span{ font-weight:650; letter-spacing:-.01em; font-size:15px; white-space:nowrap; }
.ss-mark b{ font-family:var(--ss-mono); font-weight:500; color:var(--ss-accent); margin-left:4px; }
.ss-nav{ display:flex; gap:2px; align-items:center; }
.ss-nav > button, .ss-nav > a{ font:inherit; font-size:14px; color:var(--ss-dim); background:none; border:0;
  padding:8px 10px; border-radius:6px; cursor:pointer; text-decoration:none; display:flex; align-items:center; gap:4px; }
.ss-nav > button:hover, .ss-nav > a:hover, .ss-nav > button[aria-expanded="true"]{ color:var(--ss-ink); background:var(--ss-accent2); }
.ss-nav > button::after{ content:""; width:6px; height:6px; border-right:1.2px solid currentColor; border-bottom:1.2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px); margin-left:4px; }
.ss-end{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.ss-find{ display:flex; align-items:center; border:1px solid var(--ss-line2); border-radius:7px; background:var(--ss-card); }
.ss-find input{ font:inherit; font-size:13.5px; border:0; background:none; color:var(--ss-ink); padding:7px 10px; width:230px; outline:none; }
.ss-find input::placeholder{ color:var(--ss-faint); }
.ss-find button{ border:0; background:none; color:var(--ss-dim); padding:0 10px; cursor:pointer; font:inherit; font-size:13px; }
.ss-theme{ display:flex; border:1px solid var(--ss-line2); border-radius:7px; overflow:hidden; }
.ss-theme button{ font:inherit; font-size:12px; letter-spacing:.02em; color:var(--ss-dim); background:var(--ss-card); border:0;
  padding:6px 9px; cursor:pointer; }
.ss-theme button + button{ border-left:1px solid var(--ss-line2); }
.ss-theme button[aria-pressed="true"]{ color:var(--ss-ink); background:var(--ss-accent2); }
.ss-burger{ display:none; font:inherit; font-size:14px; background:none; border:1px solid var(--ss-line2); color:var(--ss-ink);
  border-radius:7px; padding:6px 10px; cursor:pointer; }

/* THE MENU: panels of named destinations, each with a line saying what is there. */
.ss-panel{ position:absolute; left:0; right:0; top:58px; background:var(--ss-card); border-bottom:1px solid var(--ss-line);
  box-shadow:0 24px 40px -24px rgba(0,0,0,.35); }
.ss-panel[hidden]{ display:none; }
.ss-panel-in{ max-width:var(--ss-wrap); margin:0 auto; padding:22px var(--ss-gutter) 26px; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px 28px; }
.ss-panel h3{ grid-column:1/-1; margin:0 0 4px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ss-faint); font-weight:600; }
.ss-panel a{ display:block; text-decoration:none; color:var(--ss-ink); padding:9px 10px; border-radius:7px; border:1px solid transparent; }
.ss-panel a:hover{ background:var(--ss-accent2); border-color:var(--ss-line); }
.ss-panel a b{ display:block; font-size:14px; font-weight:600; }
.ss-panel a span{ display:block; font-size:12.5px; color:var(--ss-dim); margin-top:2px; line-height:1.4; }
.ss-states{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:2px 10px; }
.ss-states a{ padding:5px 8px; font-size:13.5px; }
.ss-states a i{ font-style:normal; font-family:var(--ss-mono); color:var(--ss-faint); font-size:11px; margin-right:6px; }

@media (max-width: 1080px){
  .ss-find input{ width:150px; }
}
@media (max-width: 880px){
  .ss-nav{ display:none; }
  .ss-top.open .ss-nav{ display:flex; flex-direction:column; align-items:stretch; position:absolute; top:58px; left:0; right:0;
    background:var(--ss-card); border-bottom:1px solid var(--ss-line); padding:8px var(--ss-gutter); }
  .ss-burger{ display:block; }
  .ss-find{ display:none; }
  .ss-panel{ position:static; box-shadow:none; }
}

/* ── THE FOOT ─────────────────────────────────────────────────────────── */
.ss-foot{ border-top:1px solid var(--ss-line); margin-top:56px; font-family:var(--ss-sans); background:var(--ss-card); }
.ss-foot-in{ max-width:var(--ss-wrap); margin:0 auto; padding:34px var(--ss-gutter) 40px; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:22px; }
.ss-foot h4{ margin:0 0 8px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ss-faint); font-weight:600; }
.ss-foot a{ display:block; color:var(--ss-dim); text-decoration:none; font-size:13.5px; padding:3px 0; }
.ss-foot a:hover{ color:var(--ss-ink); }
.ss-foot p{ color:var(--ss-faint); font-size:12.5px; margin:0; line-height:1.5; }

/* ── THE FRONT DOOR ───────────────────────────────────────────────────── */
.ss-page{ font-family:var(--ss-sans); }
.ss-wrap{ max-width:var(--ss-wrap); margin:0 auto; padding:0 var(--ss-gutter); }
.ss-hero{ border-bottom:1px solid var(--ss-line);
  background-image:linear-gradient(var(--ss-grid) 1px, transparent 1px), linear-gradient(90deg, var(--ss-grid) 1px, transparent 1px);
  background-size:24px 24px; }
.ss-hero .ss-wrap{ padding-top:38px; padding-bottom:26px; }
.ss-eyebrow{ font-family:var(--ss-mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ss-accent); margin:0 0 10px; }
.ss-hero h1{ font-size:clamp(28px,3.6vw,44px); letter-spacing:-.025em; line-height:1.08; margin:0 0 10px; font-weight:680; }
.ss-hero p.ss-sub{ color:var(--ss-dim); font-size:16px; max-width:720px; margin:0; line-height:1.5; }
.ss-meta{ display:flex; flex-wrap:wrap; gap:18px; margin-top:16px; font-family:var(--ss-mono); font-size:12px; color:var(--ss-faint); }
.ss-meta b{ color:var(--ss-ink); font-weight:600; }

.ss-live{ display:grid; grid-template-columns:repeat(auto-fill,minmax(178px,1fr)); gap:1px; background:var(--ss-line);
  border:1px solid var(--ss-line); border-radius:10px; overflow:hidden; margin:22px 0 8px; }
.ss-city{ background:var(--ss-card); padding:12px 14px 12px; text-decoration:none; color:var(--ss-ink); display:grid;
  grid-template-columns:1fr auto; grid-template-rows:auto auto auto; gap:2px 8px; min-height:96px; }
.ss-city:hover{ background:var(--ss-accent2); }
.ss-city-n{ grid-column:1/2; font-size:13.5px; font-weight:600; }
.ss-city-n i{ font-style:normal; font-family:var(--ss-mono); font-size:10.5px; color:var(--ss-faint); margin-left:6px; }
.ss-city-t{ grid-column:1/2; font-size:28px; font-weight:560; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.ss-city-t small{ font-size:12px; color:var(--ss-faint); margin-left:2px; font-weight:500; }
.ss-city .ss-g{ grid-column:2/3; grid-row:1/3; width:38px; height:38px; align-self:center; }
.ss-city-s{ grid-column:1/-1; font-size:12.5px; color:var(--ss-dim); }
.ss-city-w{ grid-column:1/-1; font-size:11.5px; color:var(--ss-faint); font-family:var(--ss-mono); }

.ss-sec{ padding:30px 0 6px; }
.ss-sec h2{ font-size:22px; letter-spacing:-.015em; margin:0 0 4px; }
.ss-sec .ss-lede{ color:var(--ss-dim); margin:0 0 14px; font-size:14.5px; }
.ss-sevs{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px; }
.ss-sev{ font-size:12.5px; border:1px solid var(--ss-line2); border-radius:999px; padding:4px 10px; color:var(--ss-dim); background:var(--ss-card); }
.ss-sev b{ font-variant-numeric:tabular-nums; color:var(--ss-ink); }
.ss-sev.sev-extreme{ border-color:var(--ss-extreme); } .ss-sev.sev-severe{ border-color:var(--ss-severe); }
.ss-sev.sev-moderate{ border-color:var(--ss-moderate); } .ss-sev.sev-minor{ border-color:var(--ss-minor); }

.ss-alerts{ border:1px solid var(--ss-line); border-radius:10px; overflow:hidden; background:var(--ss-card); }
.ss-alert{ border-bottom:1px solid var(--ss-line); border-left:3px solid var(--ss-line2); }
.ss-alert:last-child{ border-bottom:0; }
.ss-alert.sev-extreme{ border-left-color:var(--ss-extreme); } .ss-alert.sev-severe{ border-left-color:var(--ss-severe); }
.ss-alert.sev-moderate{ border-left-color:var(--ss-moderate); } .ss-alert.sev-minor{ border-left-color:var(--ss-minor); }
.ss-alert summary{ list-style:none; cursor:pointer; display:grid; grid-template-columns:220px 1fr 170px 110px; gap:12px;
  padding:11px 14px; align-items:baseline; font-size:13.5px; }
.ss-alert summary::-webkit-details-marker{ display:none; }
.ss-alert summary:hover{ background:var(--ss-accent2); }
.ss-alert-e{ font-weight:620; }
.ss-alert-a{ color:var(--ss-dim); }
.ss-alert-t{ font-family:var(--ss-mono); font-size:12px; color:var(--ss-faint); }
.ss-alert-s{ text-align:right; font-family:var(--ss-mono); font-size:12px; }
.ss-alert-s a{ color:var(--ss-accent); text-decoration:none; margin-left:6px; }
.ss-alert-body{ padding:4px 16px 16px 17px; color:var(--ss-ink); font-size:14px; line-height:1.55; max-width:900px; }
.ss-alert-body h4{ margin:14px 0 4px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ss-faint); }
.ss-alert-full b{ font-family:var(--ss-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ss-faint); margin-right:6px; }
@media (max-width: 860px){
  .ss-alert summary{ grid-template-columns:1fr; gap:3px; }
  .ss-alert-s{ text-align:left; }
}
.ss-quiet{ padding:18px; color:var(--ss-dim); margin:0; }
.ss-btn{ display:inline-block; margin-top:12px; border:1px solid var(--ss-line2); background:var(--ss-card); color:var(--ss-ink);
  border-radius:7px; padding:8px 14px; font-size:13.5px; text-decoration:none; }
.ss-btn:hover{ background:var(--ss-accent2); }

.ss-doors{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; }
.ss-door{ display:block; border:1px solid var(--ss-line); border-radius:10px; background:var(--ss-card); padding:18px 18px 16px;
  text-decoration:none; color:var(--ss-ink); }
.ss-door:hover{ border-color:var(--ss-line2); background:var(--ss-accent2); }
.ss-door .k{ font-family:var(--ss-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ss-accent); }
.ss-door h3{ margin:6px 0 6px; font-size:17px; }
.ss-door p{ margin:0; color:var(--ss-dim); font-size:13.5px; line-height:1.5; }
.ss-door img{ width:100%; height:auto; border-radius:6px; margin-bottom:12px; display:block; border:1px solid var(--ss-line); }
.ss-stamp{ font-family:var(--ss-mono); font-size:11.5px; color:var(--ss-faint); margin:10px 0 0; }