/* Fonts are self-hosted rather than pulled from Google Fonts: a font request
   would send every visitor's IP address to a third party, which for a site
   read in the EU is a data-protection question nobody needs.
   Inter and JetBrains Mono, both SIL Open Font License 1.1 — see fonts/. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ÅreWeather — design system
   Dark alpine glass. One accent gradient (glacier cyan → alpenglow violet),
   semantic colour only where it carries meaning (temperature, hazard, verdict). */

:root {
  --bg: #06080b;
  --bg-2: #0a0d13;
  --panel: rgba(255,255,255,.035);
  --panel-2: rgba(255,255,255,.055);
  --line: rgba(255,255,255,.09);
  --line-soft: rgba(255,255,255,.055);
  --text: #eef2f7;
  --text-2: #9aa6b6;
  --text-3: #66717f;

  --ice: #4fd1ff;
  --violet: #a78bfa;
  --lime: #a3e635;
  --amber: #fbbf24;
  --rose: #fb7185;
  --deep: #2563eb;

  --grad: linear-gradient(100deg, var(--ice), var(--violet));
  --radius: 20px;
  --radius-sm: 12px;
  --shadow: 0 24px 60px -24px rgba(0,0,0,.85);
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -0.035em; line-height: 1.1; }
h2 { font-size: 1.02rem; }
a { color: var(--ice); text-decoration-color: rgba(79,209,255,.35); text-underline-offset: 3px; }
button { font: inherit; color: inherit; cursor: pointer; }
.hl { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.num { font-family: var(--mono); letter-spacing: -0.02em; }

/* Equal-width digits where numbers stack into columns — table rows, matrix
   cells, axis ticks, aligned key/value lists — so the eye reads values instead
   of ragging. Deliberately NOT on the display-size figures: at 3 rem a tabular
   `1` sits in a wide empty box and the number looks broken. */
.num, .mtn-chip .e, .window-legend, .model-weight, .model-val,
.tooltip .row, .formula .eq, .formula dt, .doc td .num, .doc td code, .doc code,
.attribution, .gate input, .pick .rank, .pick .when, .peak-link .pe,
.cell .s, .cell .w, .cell.empty, .row-error, .obs-who .d, .aspect-line .v,
.link-host, .trip-field input, .verdict .then b, .day-card .d-temp .range,
.day-card .d-line .v {
  font-variant-numeric: tabular-nums;
}

/* ---------- ambience ---------- */
.aurora { position: fixed; inset: 0; z-index: -2; overflow: hidden; }
.aurora span { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .3; }
.aurora .a1 { width: 62vw; height: 62vw; left: -18vw; top: -26vw; background: radial-gradient(circle, #1d5fd0, transparent 68%); animation: drift1 34s ease-in-out infinite; }
.aurora .a2 { width: 54vw; height: 54vw; right: -16vw; top: -12vw; background: radial-gradient(circle, #7c3aed, transparent 68%); opacity: .22; animation: drift2 41s ease-in-out infinite; }
.aurora .a3 { width: 70vw; height: 40vw; left: 20vw; top: 42vh; background: radial-gradient(circle, #0e7490, transparent 70%); opacity: .18; animation: drift1 52s ease-in-out infinite reverse; }
@keyframes drift1 { 50% { transform: translate3d(6vw, 5vh, 0) scale(1.12); } }
@keyframes drift2 { 50% { transform: translate3d(-7vw, 7vh, 0) scale(1.08); } }
.grain {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
/* Reduced motion means all of it, not just the background: the status pulse and
   every hover transition go too. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .aurora { display: none; }
}

/* ---------- layout ---------- */
.wrap { width: min(1320px, 100% - 32px); margin-inline: auto; }
main.wrap { display: flex; flex-direction: column; gap: 18px; padding: 22px 0 64px; }
.split { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; align-items: start; }
@media (max-width: 960px) { .split { grid-template-columns: 1fr; } }

.card {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.022));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.card::before { content: ''; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent); }
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.sub { margin: 5px 0 0; color: var(--text-2); font-size: .8rem; max-width: 62ch; }
.controls { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- top bar ---------- */
.topbar { position: sticky; top: 0; z-index: 40; background: rgba(6,8,11,.72); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--line-soft); }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0 10px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; }
.brand-mark { width: 30px; height: 30px; }
.brand-mark path { fill: var(--ice); }
.brand-mark .snow { fill: #fff; }
.brand-text { display: flex; flex-direction: column; font-weight: 300; font-size: 1.02rem; letter-spacing: .16em; line-height: 1.05; }
.brand-text b { font-weight: 750; letter-spacing: .06em; }
.brand-text i { font-style: normal; font-size: .56rem; letter-spacing: .3em; color: var(--text-3); text-transform: uppercase; margin-top: 3px; }
@media (max-width: 560px) { .brand-text { font-size: .9rem; } .brand-text i { display: none; } }
.topbar-actions { display: flex; align-items: center; gap: 10px; }

/* The header grew a link every time the site grew a page, and past about six
   items it stopped fitting a phone and took the whole document's width with it.
   Below this width the controls drop to their own row and scroll, which keeps
   every page reachable without a menu to open. */
@media (max-width: 900px) {
  .topbar-inner { flex-wrap: wrap; gap: 8px 12px; }
  .topbar-actions {
    order: 3; width: 100%; flex-wrap: nowrap;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    padding-bottom: 3px; margin-bottom: -3px;
    /* fade the ends so it reads as a strip that continues */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
  }
  .topbar-actions > * { flex: 0 0 auto; scroll-snap-align: start; }
  /* The brand is already the way home. */
  .topbar-actions .back-link { display: none; }
}

.seg { display: inline-flex; padding: 3px; gap: 2px; background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 999px; }
.seg button { background: none; border: 0; padding: 5px 12px; border-radius: 999px; font-size: .74rem; font-weight: 550; color: var(--text-2); transition: .18s; white-space: nowrap; }
.seg button:hover { color: var(--text); }
.seg button.on { background: rgba(255,255,255,.12); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.16) inset; }
.seg.small button { padding: 4px 9px; font-size: .69rem; }

.status-pill { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px 6px 11px; font-size: .72rem; color: var(--text-2); transition: .2s; }
.status-pill:hover { border-color: rgba(255,255,255,.22); color: var(--text); }
.status-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); box-shadow: 0 0 0 0 currentColor; }
.status-pill.live .dot { background: var(--lime); animation: pulse 2.6s infinite; }
.status-pill.working .dot { background: var(--ice); animation: pulse 1.1s infinite; }
.status-pill.stale .dot { background: var(--amber); }
.status-pill.error .dot { background: var(--rose); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(163,230,53,.5); } 70% { box-shadow: 0 0 0 7px rgba(163,230,53,0); } 100% { box-shadow: 0 0 0 0 rgba(163,230,53,0); } }


/* ---------- hero ---------- */
.hero { padding: 0; }
.hero-grid { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); }
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } }
.hero-main { padding: 24px 24px 22px; }
.hero-eyebrow { display: flex; align-items: center; gap: 9px; font-size: .66rem; letter-spacing: .24em; text-transform: uppercase; color: var(--text-3); }
.hero-eyebrow .tag { color: var(--ice); }
.hero h1 { font-size: clamp(2rem, 5.4vw, 3.1rem); font-weight: 750; margin: 8px 0 4px; }
.hero-meta { color: var(--text-2); font-size: .82rem; }
.hero-meta .num { color: var(--text); }
.hero-now { display: flex; align-items: flex-end; gap: 22px; margin-top: 20px; flex-wrap: wrap; }
.big-temp { font-family: var(--mono); font-size: clamp(3.4rem, 11vw, 5.2rem); font-weight: 500; line-height: .86; letter-spacing: -.05em; }
.big-temp sup { font-size: .32em; vertical-align: super; color: var(--text-2); letter-spacing: 0; }
.now-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 12px 18px; flex: 1 1 260px; }
.fact .k { font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
.fact .v { font-family: var(--mono); font-size: 1.02rem; font-weight: 500; }
.fact .v small { font-family: var(--sans); font-size: .68rem; color: var(--text-2); font-weight: 400; }
.hero-summary { margin: 18px 0 0; font-size: .92rem; color: #cfd8e3; border-left: 2px solid rgba(79,209,255,.5); padding-left: 13px; }

.hero-side { border-left: 1px solid var(--line-soft); padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; background: rgba(0,0,0,.16); }
@media (max-width: 860px) { .hero-side { border-left: 0; border-top: 1px solid var(--line-soft); } }
.verdict { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 13px 15px; background: rgba(255,255,255,.03); }
.verdict-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.verdict-name { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); display: flex; align-items: center; gap: 7px; }
.verdict-score { font-family: var(--mono); font-size: 1.5rem; font-weight: 600; line-height: 1; }
.verdict-bar { height: 4px; border-radius: 3px; background: rgba(255,255,255,.09); margin: 10px 0 9px; overflow: hidden; }
.verdict-bar i { display: block; height: 100%; min-width: 4px; border-radius: 3px; transition: width .7s cubic-bezier(.22,1,.36,1); }
.verdict-text { font-size: .78rem; color: var(--text-2); }
.verdict-text b { color: var(--text); font-weight: 550; }
.window-strip { display: flex; gap: 3px; margin-top: 10px; }
.window-strip i { flex: 1; height: 20px; border-radius: 3px; background: rgba(255,255,255,.07); position: relative; }
.window-strip i span { position: absolute; inset: 0; border-radius: 3px; }
.window-legend { display: flex; justify-content: space-between; font-family: var(--mono); font-size: .58rem; color: var(--text-3); margin-top: 4px; }

/* ---------- matrix ---------- */
.matrix-scroll { overflow-x: auto; margin: 0 -4px; padding: 0 4px 6px; scrollbar-width: thin; }
.matrix-scroll::-webkit-scrollbar { height: 7px; }
.matrix-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 4px; }
#matrix svg, #profile svg, #hourly svg { display: block; }
.chart-key { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; font-size: .68rem; color: var(--text-2); }
.chart-key span { display: inline-flex; align-items: center; gap: 6px; }
.chart-key i { width: 14px; height: 0; border-top-width: 2px; border-top-style: solid; display: inline-block; }
.chart-key i.block { height: 9px; width: 9px; border: 0; border-radius: 2px; }
.legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; font-size: .68rem; color: var(--text-2); }
.legend .scale { display: flex; align-items: center; gap: 7px; }
.legend .bar { width: 150px; height: 7px; border-radius: 4px; }
.legend .key { display: inline-flex; align-items: center; gap: 6px; }
.legend .key i { width: 11px; height: 3px; border-radius: 2px; display: inline-block; }

/* ---------- intel ---------- */
.intel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(138px, 1fr)); gap: 10px; }
.intel {
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 12px 13px;
  background: rgba(255,255,255,.028); transition: .2s; position: relative; overflow: hidden;
}
.intel:hover { background: rgba(255,255,255,.06); border-color: var(--line); }
.intel .k { font-size: .59rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.intel .v { font-family: var(--mono); font-size: 1.22rem; font-weight: 550; margin-top: 3px; letter-spacing: -.03em; }
.intel .v small { font-size: .55em; color: var(--text-2); font-family: var(--sans); }
.intel .d { font-size: .71rem; color: var(--text-2); margin-top: 2px; line-height: 1.35; }
.intel.warn { border-color: rgba(251,191,36,.34); background: rgba(251,191,36,.07); }
.intel.warn .v { color: var(--amber); }
.intel.danger { border-color: rgba(251,113,133,.36); background: rgba(251,113,133,.08); }
.intel.danger .v { color: var(--rose); }
.intel.good { border-color: rgba(163,230,53,.28); background: rgba(163,230,53,.06); }
.intel.good .v { color: var(--lime); }

/* ---------- models / ml ---------- */
.model-row { display: grid; grid-template-columns: minmax(96px, 1.1fr) 46px 1fr auto; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.model-row:last-child { border-bottom: 0; }
.model-name { font-size: .78rem; font-weight: 550; }
.model-name small { display: block; color: var(--text-3); font-size: .62rem; font-weight: 400; letter-spacing: .04em; }
.model-weight { font-family: var(--mono); font-size: .72rem; color: var(--ice); text-align: right; }
.model-track { height: 5px; border-radius: 3px; background: rgba(255,255,255,.07); overflow: hidden; }
.model-track i { display: block; height: 100%; background: var(--grad); border-radius: 3px; transition: width .6s; }
.model-val { font-family: var(--mono); font-size: .8rem; text-align: right; min-width: 72px; }
.model-val small { color: var(--text-3); }

.ml-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ml-badge { font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--text-2); }
.ml-badge.ok { border-color: rgba(163,230,53,.4); color: var(--lime); background: rgba(163,230,53,.08); }
.ml-badge.no { border-color: rgba(251,191,36,.4); color: var(--amber); background: rgba(251,191,36,.07); }
.ml-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); gap: 10px; margin-bottom: 12px; }
.ml-metric { border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 10px 12px; background: rgba(255,255,255,.028); }
.ml-metric .k { font-size: .58rem; letter-spacing: .15em; text-transform: uppercase; color: var(--text-3); }
.ml-metric .v { font-family: var(--mono); font-size: 1.05rem; margin-top: 2px; }
.ml-note { font-size: .76rem; color: var(--text-2); line-height: 1.5; }
.ml-note code { font-family: var(--mono); font-size: .9em; background: rgba(255,255,255,.07); padding: 1px 5px; border-radius: 4px; color: var(--ice); }
.ml-board-title { font-size: .62rem; letter-spacing: .15em; text-transform: uppercase; color: var(--text-3); margin: 4px 0 8px; }
.ml-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-bottom: 10px; }
.ml-board-col { border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 10px 12px; background: rgba(255,255,255,.028); }
.ml-board-col > .k { font-size: .58rem; letter-spacing: .15em; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; }
.ml-board-row { display: grid; grid-template-columns: minmax(0, 9.5em) 1fr auto; align-items: center; gap: 8px; font-size: .76rem; color: var(--text-2); padding: 3px 0; }
.ml-board-row .bar { height: 5px; border-radius: 3px; background: rgba(255,255,255,.05); overflow: hidden; }
.ml-board-row .bar i { display: block; height: 100%; background: var(--text-3); }
.ml-board-row .num { font-family: var(--mono); color: var(--text); }
.ml-board-row .num small { color: var(--text-3); }
.ml-board-row .tag { grid-column: 1 / -1; font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--lime); }
.ml-board-row.on .name { color: var(--text); font-weight: 600; }
.ml-board-row.on .bar i { background: var(--lime); }
.ml-board-row .bar.ghost { position: relative; }
.ml-board-row .bar.ghost b { position: absolute; inset: 0 auto 0 0; background: rgba(255,255,255,.14); }
.ml-board-row .bar.ghost i { position: relative; }

/* ---------- method ---------- */
.method-list { margin: 0; padding-left: 20px; display: grid; gap: 9px; color: var(--text-2); font-size: .84rem; max-width: 92ch; }
.method-list b { color: var(--text); font-weight: 600; }
.method-list::marker { color: var(--ice); }
.disclaimer { margin: 18px 0 0; padding: 13px 15px; border-radius: var(--radius-sm); border: 1px solid rgba(251,113,133,.28); background: rgba(251,113,133,.07); font-size: .8rem; color: #f3d3d8; }
.disclaimer b { color: #ffe1e6; }

.footer { color: var(--text-3); font-size: .76rem; padding: 8px 4px 0; max-width: 86ch; }
.footer p { margin: 0 0 6px; }
.footer .tiny { font-size: .68rem; }

/* ---------- misc ---------- */
.hero-skeleton { padding: 28px 24px; display: grid; gap: 14px; }
.hero-skeleton span { display: block; height: 22px; border-radius: 8px; background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.11), rgba(255,255,255,.05)); background-size: 220% 100%; animation: shimmer 1.5s infinite; }
.hero-skeleton span:first-child { width: 42%; height: 46px; }
.hero-skeleton span:nth-child(2) { width: 68%; }
.hero-skeleton span:last-child { width: 30%; }
@keyframes shimmer { to { background-position: -220% 0; } }

.tooltip {
  position: fixed; z-index: 90; pointer-events: none; opacity: 0; transform: translateY(4px);
  transition: opacity .13s, transform .13s;
  background: rgba(10,13,19,.96); border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 11px; font-size: .74rem; line-height: 1.5; box-shadow: 0 18px 40px -18px #000;
  max-width: 250px; backdrop-filter: blur(10px);
}
.tooltip.on { opacity: 1; transform: translateY(0); }
.tooltip b { display: block; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 4px; }
.tooltip .row { display: flex; justify-content: space-between; gap: 16px; font-family: var(--mono); font-size: .72rem; }
.tooltip .row span:first-child { font-family: var(--sans); color: var(--text-2); }

.error-box { border: 1px solid rgba(251,113,133,.35); background: rgba(251,113,133,.08); border-radius: var(--radius-sm); padding: 14px 16px; font-size: .84rem; }
.error-box b { display: block; margin-bottom: 4px; }
.reveal { animation: reveal .55s cubic-bezier(.22,1,.36,1) both; }
@keyframes reveal { from { opacity: 0; transform: translateY(10px); } }
.muted { color: var(--text-3); }

/* ---------- documentation page ---------- */
.doc-layout { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 34px; align-items: start; }
@media (max-width: 900px) { .doc-layout { grid-template-columns: 1fr; } .doc-nav { position: static !important; } }
.doc-nav { position: sticky; top: 88px; font-size: .78rem; }
.doc-nav ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; counter-reset: s; }
.doc-nav a { display: block; padding: 6px 10px; border-radius: 8px; color: var(--text-2); text-decoration: none; border-left: 2px solid transparent; transition: .15s; }
.doc-nav a:hover { color: var(--text); background: rgba(255,255,255,.05); }
.doc-nav a.on { color: #fff; border-left-color: var(--ice); background: rgba(79,209,255,.08); }
.doc-nav .lbl { display: block; font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); padding: 0 10px 8px; }

.doc { display: grid; gap: 16px; }
.doc section { scroll-margin-top: 96px; }
.doc h2 { font-size: 1.3rem; margin-bottom: 6px; }
.doc h3 { font-size: .96rem; margin: 22px 0 8px; color: #fff; }
.doc h3:first-of-type { margin-top: 6px; }
.doc p, .doc li { color: #c2ccd8; font-size: .87rem; line-height: 1.62; }
.doc p { margin: 0 0 12px; max-width: 76ch; }
.doc ul, .doc ol { max-width: 76ch; padding-left: 20px; }
.doc li { margin-bottom: 6px; }
.doc strong, .doc b { color: #fff; font-weight: 600; }
.doc .lede { font-size: .98rem; color: var(--text-2); max-width: 72ch; }

.formula {
  background: rgba(0,0,0,.34); border: 1px solid var(--line-soft); border-left: 2px solid var(--ice);
  border-radius: 10px; padding: 14px 16px; margin: 0 0 14px; overflow-x: auto;
}
.formula .eq { font-family: var(--mono); font-size: .84rem; color: #eaf4ff; white-space: pre; line-height: 1.7; letter-spacing: -.01em; }
.formula .eq em { color: var(--ice); font-style: normal; }
.formula dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; margin: 11px 0 0; font-size: .76rem; }
.formula dt { font-family: var(--mono); color: var(--violet); }
.formula dd { margin: 0; color: var(--text-2); }
.formula .cite { margin-top: 10px; font-size: .72rem; color: var(--text-3); }
.formula .cite a { color: var(--text-2); }

.doc table { width: 100%; border-collapse: collapse; font-size: .79rem; margin: 0 0 14px; }
.doc th { text-align: left; font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); font-weight: 500; padding: 0 12px 8px 0; border-bottom: 1px solid var(--line); }
.doc td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--line-soft); color: var(--text-2); vertical-align: top; }
.doc td:first-child { color: var(--text); font-weight: 500; }
.doc td .num, .doc td code { font-family: var(--mono); font-size: .95em; }
.doc code { background: rgba(255,255,255,.07); padding: 1px 5px; border-radius: 4px; color: var(--ice); font-family: var(--mono); font-size: .88em; }
.table-scroll { overflow-x: auto; }

.callout { border-radius: var(--radius-sm); padding: 14px 16px; margin: 0 0 14px; font-size: .84rem; border: 1px solid; }
.callout > b:first-child { display: block; margin-bottom: 4px; }
.callout.warn { border-color: rgba(251,191,36,.3); background: rgba(251,191,36,.06); color: #f4e3bd; }
.callout.danger { border-color: rgba(251,113,133,.3); background: rgba(251,113,133,.07); color: #f3d3d8; }
.callout.info { border-color: rgba(79,209,255,.25); background: rgba(79,209,255,.06); color: #cfe9f8; }
.callout a { color: inherit; }

.attribution { font-family: var(--mono); font-size: .76rem; line-height: 1.75; color: #d6e2ee; background: rgba(0,0,0,.34); border: 1px solid var(--line-soft); border-radius: 10px; padding: 14px 16px; }
.attribution a { color: var(--ice); }
.back-link { display: inline-flex; align-items: center; gap: 7px; font-size: .74rem; color: var(--text-2); text-decoration: none; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; transition: .18s; }
.back-link:hover { color: #fff; border-color: rgba(255,255,255,.24); }
.nav-link { font-size: .74rem; color: var(--text-2); text-decoration: none; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; transition: .18s; white-space: nowrap; }
.nav-link:hover { color: #fff; border-color: rgba(255,255,255,.24); }
.doc-hero { padding: 26px 24px; }
.doc-hero h1 { font-size: clamp(1.7rem, 4vw, 2.5rem); margin-bottom: 8px; }
.pill-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.pill { font-size: .68rem; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line); color: var(--text-2); }
.pill.ok { border-color: rgba(163,230,53,.35); color: var(--lime); background: rgba(163,230,53,.07); }

/* ---------- contact gate ---------- */
.gate { max-width: 460px; margin: 0 0 14px; }
.gate-q { display: block; font-size: .84rem; color: #fff; margin-bottom: 9px; font-weight: 500; }
.gate-q small { display: block; font-weight: 400; color: var(--text-3); font-size: .78em; margin-top: 3px; }
.gate-row { display: flex; gap: 8px; }
.gate input {
  flex: 1; min-width: 0; background: rgba(0,0,0,.35); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 13px; color: var(--text); font-family: var(--mono);
  font-size: .84rem; transition: .18s;
}
.gate input:focus { outline: none; border-color: rgba(79,209,255,.6); box-shadow: 0 0 0 3px rgba(79,209,255,.14); }
.gate button {
  background: var(--grad); border: 0; border-radius: 10px; padding: 10px 18px;
  font-size: .8rem; font-weight: 600; color: #05070a; transition: .18s; white-space: nowrap;
}
.gate button:hover { filter: brightness(1.12); }
.gate button:disabled { opacity: .55; cursor: progress; }
.gate-msg { font-size: .78rem; margin: 9px 0 0; min-height: 1.2em; }
.gate-msg.bad { color: var(--amber); }
.gate-msg.good { color: var(--lime); }

.revealed { border: 1px solid rgba(163,230,53,.3); background: rgba(163,230,53,.06); border-radius: var(--radius-sm); padding: 14px 16px; max-width: 560px; }
.revealed-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.revealed-mail { font-size: 1.02rem; color: var(--lime) !important; text-decoration: none; letter-spacing: -.01em; word-break: break-all; }
.revealed-mail:hover { text-decoration: underline; }
.copy-btn { background: rgba(255,255,255,.08); border: 1px solid var(--line); border-radius: 8px; padding: 5px 12px; font-size: .72rem; color: var(--text-2); transition: .18s; }
.copy-btn:hover { color: #fff; border-color: rgba(255,255,255,.26); }

/* ---------- accessibility ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ice); color: #05070a; font-weight: 600; font-size: .8rem;
  padding: 9px 16px; border-radius: 0 0 10px 10px; transition: top .18s;
}
.skip-link:focus { top: 0; }
:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; border-radius: 6px; }
.seg button:focus-visible, 
/* ---------- comparison view ---------- */
.picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.pick {
  position: relative; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 15px 16px; background: rgba(255,255,255,.03); text-decoration: none; color: inherit;
  display: block; transition: .2s; overflow: hidden;
}
.pick:hover { background: rgba(255,255,255,.07); transform: translateY(-2px); border-color: rgba(255,255,255,.2); }
.pick::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--tone, var(--ice)); }
.pick .rank { font-family: var(--mono); font-size: .6rem; letter-spacing: .2em; color: var(--text-3); text-transform: uppercase; }
.pick .name { font-size: 1.08rem; font-weight: 650; letter-spacing: -.025em; margin: 3px 0 1px; }
.pick .when { font-family: var(--mono); font-size: .76rem; color: var(--ice); }
.pick .score { position: absolute; top: 13px; right: 15px; font-family: var(--mono); font-size: 1.5rem; font-weight: 600; line-height: 1; }
.pick .why { font-size: .75rem; color: var(--text-2); margin-top: 8px; }
.pick .why b { color: var(--text); font-weight: 550; }

.grid-scroll { overflow-x: auto; margin: 0 -4px; padding: 0 4px 4px; }
table.compare { border-collapse: separate; border-spacing: 0; width: 100%; }
table.compare th, table.compare td { padding: 0; }
table.compare thead th {
  position: sticky; top: 0; z-index: 3; background: #0a0d13;
  font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3);
  font-weight: 500; text-align: center; padding: 0 0 9px; white-space: nowrap;
}
table.compare thead th.today { color: var(--ice); }
table.compare thead th small { display: block; font-size: .92em; letter-spacing: .08em; color: var(--text-3); opacity: .7; }
table.compare th.peak-head { text-align: left; z-index: 4; left: 0; padding-right: 14px; }
table.compare td.peak, table.compare th.peak-head { position: sticky; left: 0; background: linear-gradient(90deg, #080b10 78%, rgba(8,11,16,0)); z-index: 2; }
table.compare td.peak { padding: 5px 16px 5px 0; min-width: 152px; }
.peak-link { text-decoration: none; color: inherit; display: block; }
.peak-link .pn { display: block; font-size: .84rem; font-weight: 600; letter-spacing: -.02em; }
.peak-link:hover .pn { color: var(--ice); }
.peak-link .pe { display: block; font-family: var(--mono); font-size: .62rem; color: var(--text-3); }

.cell { display: block; width: 100%; padding: 7px 4px; border-radius: 9px; border: 1px solid transparent; background: none; transition: .16s; text-align: center; }
.cell:hover { transform: scale(1.05); }
.cell .s { display: block; font-family: var(--mono); font-size: 1.06rem; font-weight: 600; line-height: 1.15; }
.cell .w { display: block; font-family: var(--mono); font-size: .58rem; color: var(--text-3); letter-spacing: .02em; margin-top: 1px; }
.cell .w.dark { color: var(--amber); opacity: .85; }
.cell.empty { color: var(--text-3); font-family: var(--mono); font-size: .8rem; }
td.cell-wrap { padding: 3px; min-width: 78px; }
.row-loading { display: flex; align-items: center; gap: 8px; font-size: .74rem; color: var(--text-3); padding: 8px 0; }
.row-loading i { width: 100%; height: 34px; border-radius: 9px; display: block; background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.1), rgba(255,255,255,.04)); background-size: 220% 100%; animation: shimmer 1.5s infinite; }
.row-error { font-size: .72rem; color: var(--amber); font-family: var(--mono); }

.compare-legend { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin-top: 14px; font-size: .68rem; color: var(--text-2); }
.compare-legend .key { display: inline-flex; align-items: center; gap: 6px; }
.compare-legend .swatches { display: flex; gap: 3px; }
.compare-legend .swatches i { width: 26px; height: 8px; border-radius: 2px; display: block; }
.progress { height: 2px; background: rgba(255,255,255,.08); border-radius: 2px; overflow: hidden; margin-top: 4px; }
.progress i { display: block; height: 100%; background: var(--grad); transition: width .3s; }

/* ---------- observations ---------- */
.obs-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; }
.obs-delta { font-family: var(--mono); font-size: 2.6rem; font-weight: 500; line-height: 1; letter-spacing: -.04em; }
.obs-headline { font-size: .88rem; color: #cfd8e3; flex: 1 1 300px; line-height: 1.55; }
.obs-headline b { color: #fff; font-weight: 600; }
.obs-empty { font-size: .84rem; color: var(--text-2); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 14px 16px; background: rgba(255,255,255,.025); }
.obs-list { display: grid; gap: 1px; }
.obs-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.obs-row:last-child { border-bottom: 0; }
.obs-who .n { display: block; font-size: .84rem; font-weight: 550; }
.obs-who .d { display: block; font-family: var(--mono); font-size: .63rem; color: var(--text-3); }
.obs-vals { display: flex; gap: 18px; flex-wrap: wrap; }
.obs-val { text-align: right; min-width: 46px; }
.obs-val .num { font-size: .96rem; font-weight: 500; }
.obs-val small { font-size: .62rem; color: var(--text-2); margin-left: 2px; }
.obs-val i { display: block; font-style: normal; font-size: .55rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-top: 1px; }

/* ---------- activity board ---------- */
.act-head { display: flex; justify-content: space-between; align-items: baseline; font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); margin-bottom: 4px; }
.seg.seg-wrap { flex-wrap: wrap; max-width: 100%; }
.row-na { font-size: .72rem; color: var(--text-3); font-style: italic; padding: 8px 0; }

/* language switch sits in the header alongside the unit toggle */
#lang-toggle button { min-width: 34px; letter-spacing: .06em; font-weight: 600; }

/* ---------- aspect rose ---------- */
.aspect-wrap { display: grid; grid-template-columns: auto minmax(0, 440px); gap: 26px; align-items: center; justify-content: start; }
@media (max-width: 620px) { .aspect-wrap { grid-template-columns: 1fr; } .aspect-rose { justify-self: center; } }
.aspect-side { display: grid; gap: 2px; align-content: start; }
.aspect-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line-soft); }
.aspect-line:last-of-type { border-bottom: 0; }
.aspect-line .k { font-size: .74rem; color: var(--text-2); }
.aspect-line .v { font-family: var(--mono); font-size: .88rem; font-weight: 600; color: var(--text); letter-spacing: .02em; }
.aspect-line.good .v { color: var(--lime); }
.aspect-line.warn .v { color: var(--amber); }
.aspect-line.danger .v { color: var(--rose); }
#climate-year svg { display: block; }

/* ---------- resources ---------- */
.link-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
.link-item {
  display: block; text-decoration: none; color: inherit; padding: 13px 15px;
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  background: rgba(255,255,255,.025); transition: .18s; position: relative; overflow: hidden;
}
.link-item:hover { background: rgba(255,255,255,.07); border-color: var(--line); transform: translateY(-1px); }
.link-item.primary { border-color: rgba(79,209,255,.3); background: rgba(79,209,255,.05); }
.link-item.primary::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 2px; background: var(--ice); }
.link-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.link-name { font-size: .86rem; font-weight: 600; letter-spacing: -.015em; }
.link-item:hover .link-name { color: var(--ice); }
.link-host { font-family: var(--mono); font-size: .6rem; color: var(--text-3); white-space: nowrap; }
.link-note { margin: 6px 0 0; font-size: .76rem; color: var(--text-2); line-height: 1.5; }

/* ---------- trip planner ---------- */
.trip-form { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 14px; }
.trip-field { display: grid; gap: 5px; }
.trip-field span { font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); }
.trip-field input {
  background: rgba(0,0,0,.35); border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 12px; color: var(--text); font-family: var(--mono); font-size: .84rem;
  color-scheme: dark; transition: .18s;
}
.trip-field input:focus { outline: none; border-color: rgba(79,209,255,.6); box-shadow: 0 0 0 3px rgba(79,209,255,.14); }
.trip-presets { display: flex; gap: 6px; flex-wrap: wrap; }
.preset {
  background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 14px; font-size: .74rem; color: var(--text-2); transition: .18s;
}
.preset:hover { color: #fff; border-color: rgba(255,255,255,.26); background: rgba(255,255,255,.09); }
.trip-count { font-size: .86rem; color: var(--text-2); margin: 0; }
.trip-count b { color: var(--text); }
.trip-day .picks { margin-top: 2px; }
.pack-list { margin: 16px 0 0; padding-left: 20px; display: grid; gap: 8px; }
.pack-list li { font-size: .84rem; color: var(--text-2); line-height: 1.55; }
.pack-list li b { color: var(--text); font-weight: 600; }
.pack-list::marker, .pack-list li::marker { color: var(--ice); }

/* ---------- the warming page ---------- */
.pill.amber { border-color: rgba(251,191,36,.38); color: var(--amber); background: rgba(251,191,36,.07); }
.chart-wrap { overflow-x: auto; margin-top: 4px; }
.note { margin: 14px 0 0; font-size: .78rem; color: var(--text-3); line-height: 1.55; max-width: 78ch; }
.doc-body p, .doc-body li { color: #c2ccd8; font-size: .87rem; line-height: 1.62; }
.doc-body b { color: #fff; font-weight: 600; }

.verdict-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-top: 16px; }
.verdict {
  border: 1px solid var(--line-soft); border-radius: 12px; padding: 13px 14px;
  background: rgba(255,255,255,.03); display: grid; gap: 3px; align-content: start;
}
.verdict .z { font-size: .59rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.verdict .now { font-family: var(--mono); font-size: 1.35rem; font-weight: 550; letter-spacing: -.03em; }
.verdict .now small { font-size: .5em; color: var(--text-2); font-family: var(--sans); margin-left: 3px; }
.verdict .when { font-size: .68rem; color: var(--text-3); letter-spacing: .01em; }
.verdict .then { font-size: .78rem; color: var(--text-2); margin-top: 3px; }
.verdict .then b { font-family: var(--mono); font-weight: 550; }
.verdict .tag { font-size: .68rem; margin-top: 5px; padding: 2px 8px; border-radius: 999px; justify-self: start; border: 1px solid var(--line); color: var(--text-2); }
.verdict.holds { border-color: rgba(79,209,255,.34); background: rgba(79,209,255,.06); }
.verdict.holds .tag { border-color: rgba(79,209,255,.4); color: var(--ice); }
.verdict.fading { border-color: rgba(251,191,36,.34); background: rgba(251,191,36,.06); }
.verdict.fading .tag { border-color: rgba(251,191,36,.42); color: var(--amber); }
.verdict.gone { border-color: rgba(251,113,133,.36); background: rgba(251,113,133,.07); }
.verdict.gone .tag { border-color: rgba(251,113,133,.44); color: var(--rose); }

.note .why { display: block; margin-top: 6px; color: var(--amber); }
.caveat-list { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 11px; max-width: 78ch; }
.caveat-list li { font-size: .87rem; line-height: 1.62; color: #c2ccd8; }

/* ---------- the outlook page ---------- */
.headline { margin: 14px 0 0; font-size: .95rem; color: var(--text-1); line-height: 1.55; max-width: 70ch; }
.headline b { font-family: var(--mono); font-weight: 600; color: #fff; }
.headline.warn { color: var(--amber); }

.day-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 10px; margin-top: 16px; }
/* A week should read as a week: seven columns once there is room, rather than
   six and an orphan. */
@media (min-width: 1180px) { .day-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .day-card .d-temp b { font-size: 1.2rem; } }
.day-card {
  text-align: left; font: inherit; color: inherit; cursor: pointer;
  border: 1px solid var(--line-soft); border-radius: 13px; padding: 13px 14px;
  background: rgba(255,255,255,.03); display: grid; gap: 7px; align-content: start;
  transition: background .15s, border-color .15s;
}
.day-card:hover { background: rgba(255,255,255,.06); border-color: var(--line); }
.day-card.on { border-color: rgba(79,209,255,.5); background: rgba(79,209,255,.07); }
.day-card .d-day { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.day-card .d-temp { display: flex; align-items: baseline; gap: 7px; }
.day-card .d-temp b { font-family: var(--mono); font-size: 1.32rem; font-weight: 550; letter-spacing: -.03em; }
.day-card .d-temp .range { font-family: var(--mono); font-size: .68rem; color: var(--text-3); }
.day-card .d-rows { display: grid; gap: 3px; margin-top: 2px; }
.day-card .d-line { display: flex; justify-content: space-between; gap: 10px; font-size: .74rem; }
.day-card .d-line .k { color: var(--text-2); }
.day-card .d-line .v { font-family: var(--mono); color: var(--text-1); }
.day-card .tag {
  font-size: .63rem; padding: 2px 8px; border-radius: 999px; justify-self: start;
  border: 1px solid var(--line); color: var(--text-3); margin-top: 2px;
}
.day-card .tag.agree-tight { border-color: rgba(163,230,53,.34); color: var(--lime); }
.day-card .tag.agree-loose { border-color: rgba(251,191,36,.36); color: var(--amber); }

/* ---------- craft ----------
   None of this changes what the site says. It changes how much work the reader
   has to do to read it. */

/* Headings ragged by a typesetter rather than by chance; body text that never
   leaves one word alone on the last line. */
h1, h2, h3, .lede, .headline { text-wrap: balance; }
p, li, .sub, .note { text-wrap: pretty; }

::selection { background: rgba(79,209,255,.28); color: #fff; }

/* The horizontal scrollers — the peak rail, the wide charts — get a real
   scrollbar rather than the platform default sitting on a dark surface. */
.chart-wrap, .mountain-rail, .table-scroll, .matrix-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) transparent;
}
.chart-wrap::-webkit-scrollbar, .mountain-rail::-webkit-scrollbar,
.table-scroll::-webkit-scrollbar, .matrix-scroll::-webkit-scrollbar { height: 8px; }
.chart-wrap::-webkit-scrollbar-track, .mountain-rail::-webkit-scrollbar-track,
.table-scroll::-webkit-scrollbar-track, .matrix-scroll::-webkit-scrollbar-track { background: transparent; }
.chart-wrap::-webkit-scrollbar-thumb, .mountain-rail::-webkit-scrollbar-thumb,
.table-scroll::-webkit-scrollbar-thumb, .matrix-scroll::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.16); border-radius: 999px;
}
.chart-wrap:hover::-webkit-scrollbar-thumb, .mountain-rail:hover::-webkit-scrollbar-thumb,
.table-scroll:hover::-webkit-scrollbar-thumb, .matrix-scroll:hover::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.28);
}

/* Labels drawn over a mark must not swallow the pointer, or the mark beneath
   them stops being hoverable exactly where a reader aims. */
svg text { pointer-events: none; }

/* Marks inside a chart are interactive now, so they need a focus ring that is
   visible against a coloured cell rather than only against the card. */
svg [aria-label]:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 1px;
}

/* Windows high-contrast mode strips the palette; keep the structure legible
   rather than letting cards and charts collapse into one another. */
@media (forced-colors: active) {
  .card, .intel, .verdict, .day-card, .link-item { border: 1px solid CanvasText; }
  .aurora, .grain { display: none; }
  .status-pill .dot { forced-color-adjust: none; }
}

/* Someone printing the forecast before losing signal wants the numbers, not the
   furniture. */
@media print {
  .aurora, .grain, .topbar, .skip-link, .tooltip, .seg, .mountain-rail { display: none !important; }
  body { background: #fff; color: #000; }
  .card {
    background: none; border: 1px solid #bbb; box-shadow: none;
    break-inside: avoid; page-break-inside: avoid;
  }
  h1, h2 { color: #000; }
  a { color: #000; text-decoration: underline; }
  .sub, .note, .tiny { color: #333; }
}

/* ---------- the answer ----------
   Deliberately not a card: it is the page speaking, not another panel of
   analysis competing with the ten below it. */
.answer { margin-bottom: 2px; }
.answer-in {
  display: block;
  padding: 18px 22px 18px 20px;
  border: 1px solid var(--line); border-left: 3px solid var(--ice);
  border-radius: var(--radius-sm);
  background: linear-gradient(100deg, rgba(79,209,255,.09), rgba(167,139,250,.05) 60%, transparent);
}
.answer-eyebrow { font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); }
.answer-line { margin: 6px 0 0; font-size: 1.16rem; line-height: 1.4; color: var(--text); font-weight: 450; }
.answer-line b { font-weight: 650; color: #fff; }
.answer-why { margin: 5px 0 0; font-size: .82rem; color: var(--text-2); }

/* ---------- folds ----------
   The deep panels stay on the page but stop competing with it. Each summary
   carries the panel's own headline, so the answer is readable closed and the
   detail is one click away. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.fold { padding: 0; }
.fold > summary {
  list-style: none; cursor: pointer; padding: 16px 22px;
  display: flex; align-items: center; gap: 14px;
  border-radius: var(--radius);
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after {
  content: ''; flex: 0 0 auto; width: 8px; height: 8px; margin-left: auto;
  border-right: 1.6px solid var(--text-3); border-bottom: 1.6px solid var(--text-3);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .18s;
}
.fold[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.fold > summary:hover { background: rgba(255,255,255,.03); }
.fold > summary:focus-visible { outline: 2px solid var(--ice); outline-offset: -2px; }
.fold-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; min-width: 0; }
.fold-title { font-size: 1.02rem; font-weight: 600; letter-spacing: -.01em; color: #fff; }
.fold-peek {
  font-size: .82rem; color: var(--text-2); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 64ch;
}
.fold[open] .fold-peek { display: none; }
.fold-body { padding: 0 22px 20px; }
.fold[open] > summary { padding-bottom: 10px; }
@media (max-width: 620px) { .fold > summary { padding: 14px 16px; } .fold-body { padding: 0 16px 16px; } }

/* ---------- the week ----------
   The front page's centrepiece: the day strip, the mountain, the zones. */
.answer-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.answer-chip {
  display: inline-flex; align-items: center; gap: 9px; padding: 7px 12px 7px 9px;
  background: rgba(255,255,255,.04); border: 1px solid var(--line-soft); border-radius: 999px;
  color: inherit; font: inherit; cursor: pointer; transition: background .15s, border-color .15s;
}
.answer-chip:hover { background: rgba(255,255,255,.08); border-color: var(--line); }
.answer-chip span { display: grid; line-height: 1.15; text-align: left; }
.answer-chip small { font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.answer-chip b { font-size: .92rem; font-weight: 600; }
.answer-chip.good { border-left: 3px solid var(--lime); }
.answer-chip.snow { border-left: 3px solid #f4f8fc; }
.answer-chip.wind { border-left: 3px solid var(--violet); }
.answer-chip.cold { border-left: 3px solid var(--ice); }

.day-strip { display: grid; grid-template-columns: repeat(7, minmax(104px, 1fr)); gap: 8px; margin-bottom: 16px; overflow-x: auto; padding-bottom: 2px; }
.day-tab {
  display: grid; justify-items: center; gap: 3px; padding: 10px 6px 11px;
  background: rgba(255,255,255,.03); border: 1px solid var(--line-soft); border-radius: 14px;
  color: inherit; font: inherit; cursor: pointer; transition: background .15s, border-color .15s, transform .15s;
}
.day-tab:hover { background: rgba(255,255,255,.07); border-color: var(--line); }
.day-tab.on { border-color: rgba(79,209,255,.6); background: linear-gradient(180deg, rgba(79,209,255,.14), rgba(167,139,250,.06)); }
.day-tab:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; }
.dt-wd { font-size: .7rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.dt-date { font-size: .66rem; color: var(--text-3); margin-top: -2px; }
.dt-temps { display: flex; gap: 8px; font-size: .86rem; }
.dt-temps small { font-size: .55rem; color: var(--text-3); }
.dt-top { color: #fff; font-weight: 600; }
.dt-bottom { color: var(--text-2); }
.dt-extra { font-size: .7rem; color: var(--text-2); display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.dt-temps { white-space: nowrap; }
.dt-snow { color: #f4f8fc; }
.dt-rain { color: #7cc8f5; }
.wind-arrow { display: inline-block; vertical-align: -2px; color: inherit; flex: 0 0 auto; }
.sky-icon { display: block; flex: 0 0 auto; }

.pano-layout { display: grid; gap: 14px; }
.pano { border-radius: 18px; overflow-x: auto; overflow-y: hidden; background: #0a1220; }
.pano svg { display: block; }
/* Below this the pills stop being readable, so the drawing keeps its size and
   the frame scrolls sideways instead — the page itself never does. */
@media (max-width: 760px) {
  .pano svg { min-width: 720px; }
  #zone-lines svg, #levels svg { min-width: 700px; }
  .zw-corner { width: 112px; }
  .zw-name { white-space: normal; }
}
.pano-pill { cursor: default; outline: none; }
.pano-pill:focus-visible rect { stroke-width: 3; }

.zone-cards { display: grid; gap: 8px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1180px) { .zone-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .zone-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .zone-cards { grid-template-columns: 1fr; } }
.zone-card {
  border: 1px solid var(--line-soft); border-left: 3px solid var(--zone); border-radius: 12px;
  padding: 10px 12px; background: rgba(255,255,255,.025);
}
.zone-card header { display: flex; align-items: center; gap: 8px; }
.zone-card h3 { font-size: .86rem; font-weight: 650; letter-spacing: -.01em; }
.zone-z { margin-left: auto; font-size: .7rem; color: var(--text-3); }
.zone-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--zone); flex: 0 0 auto; display: inline-block; }
.zone-row { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: 'icon temps precip' 'icon wind wind'; align-items: center; gap: 2px 10px; margin-top: 6px; }
.zone-row .sky-icon { grid-area: icon; }
.zone-temps { grid-area: temps; display: flex; align-items: baseline; gap: 2px; flex-wrap: wrap; }
.zone-temps b { font-size: 1.2rem; font-weight: 650; color: #fff; }
.zone-temps span { color: var(--text-2); font-size: .86rem; }
.zone-temps small { margin-left: 8px; font-size: .7rem; color: var(--text-3); }
.zone-wind { grid-area: wind; display: flex; align-items: center; gap: 5px; font-size: .78rem; color: var(--text-2); }
.zone-wind b { color: var(--text); font-weight: 600; }
.zone-precip { grid-area: precip; font-size: .78rem; color: var(--text-3); text-align: right; }
.zone-precip.snow b { color: #f4f8fc; }
.zone-precip.rain b { color: #7cc8f5; }
.zone-precip b { font-weight: 600; }
.zone-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.zone-tags span { font-size: .64rem; letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--line); color: var(--text-2); }
.zone-hint { margin: 6px 0 0; font-size: .72rem; color: var(--text-3); line-height: 1.4; }

.zw-scroll { overflow-x: auto; }
.zw { border-collapse: separate; border-spacing: 4px; width: 100%; min-width: 820px; table-layout: fixed; }
.zw-corner { width: 150px; }
.zw th, .zw td { padding: 0; }
.zw thead th { font-weight: 400; }
.zw thead button {
  width: 100%; display: grid; gap: 1px; padding: 6px 4px; border-radius: 10px;
  background: transparent; border: 1px solid transparent; color: inherit; font: inherit; cursor: pointer;
}
.zw thead button:hover { background: rgba(255,255,255,.05); }
.zw thead th.on button { border-color: rgba(79,209,255,.5); background: rgba(79,209,255,.08); }
.zw-wd { font-size: .7rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.zw-date { font-size: .64rem; color: var(--text-3); }
.zw-corner { font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); text-align: left; vertical-align: bottom; padding: 0 6px 6px !important; }
.zw tbody th { text-align: left; padding: 6px 10px 6px 8px; border-left: 3px solid var(--zone); border-radius: 4px; background: rgba(255,255,255,.02); white-space: nowrap; }
.zw tbody th .zone-dot { display: none; }
.zw-name { display: block; font-size: .8rem; font-weight: 600; }
.zw-z { display: block; font-size: .66rem; color: var(--text-3); }
.zw td { border-radius: 10px; border: 1px solid var(--line-soft); }
.zw td.on { border-color: rgba(79,209,255,.55); box-shadow: inset 0 0 0 1px rgba(79,209,255,.25); }
.zw td.partial { opacity: .72; }
.zw-cell {
  width: 100%; display: grid; justify-items: center; gap: 2px; padding: 7px 4px 8px;
  background: transparent; border: 0; color: inherit; font: inherit; cursor: pointer; border-radius: 10px;
}
.zw-cell:hover { background: rgba(255,255,255,.05); }
.zw-t { display: flex; gap: 6px; align-items: baseline; font-size: .82rem; }
.zw-t b { color: #fff; font-weight: 650; font-size: .92rem; }
.zw-t span { color: var(--text-2); }
.zw-w { display: inline-flex; align-items: center; gap: 3px; font-size: .72rem; color: var(--text-2); }
.zw-p { font-size: .7rem; color: var(--text-3); min-height: 1em; }
.zw-p.snow { color: #f4f8fc; font-weight: 600; }
.zw-p.rain { color: #7cc8f5; font-weight: 600; }

.tooltip .tip-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }

.ladder { display: grid; gap: 6px; }
.ladder-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'name temp' 'wind phase';
  gap: 2px 10px; padding: 8px 10px; border-radius: 10px; border-left: 3px solid var(--zone);
  background: rgba(255,255,255,.03);
}
.ladder-name { grid-area: name; display: flex; align-items: center; gap: 7px; font-size: .82rem; font-weight: 600; min-width: 0; }
.ladder-name .zone-dot { display: none; }
.ladder-name small { color: var(--text-3); font-weight: 400; font-size: .68rem; }
.ladder-temp { grid-area: temp; font-size: 1.1rem; font-weight: 650; color: #fff; border-bottom: 2px solid; line-height: 1.2; text-align: right; }
.ladder-wind { grid-area: wind; font-size: .74rem; color: var(--text-2); display: flex; align-items: center; gap: 3px; }
.ladder-phase { grid-area: phase; font-size: .72rem; color: var(--text-3); text-align: right; }
.ladder-phase.snow { color: #f4f8fc; }
.ladder-phase.rain { color: #7cc8f5; }
.ladder-phase.mix { color: var(--violet); }

@media (max-width: 640px) {
  .day-strip { grid-template-columns: repeat(7, 104px); }
  .answer-line { font-size: 1.02rem; }
}

/* ---------- worth looking up ---------- */
.sights-line { font-size: .95rem; line-height: 1.5; margin: 0 0 14px; }
.sights-k { font-size: .58rem; letter-spacing: .15em; text-transform: uppercase; color: var(--text-3); margin: 12px 0 6px; }
.sights-row { display: grid; grid-template-columns: repeat(8, minmax(92px, 1fr)); gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.sight { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; text-align: left; font: inherit; color: var(--text);
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 9px 10px; background: rgba(255,255,255,.028); cursor: pointer; min-height: 78px; }
.sight:hover { border-color: var(--line); }
.sight small { font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.sight b { font-family: var(--mono); font-size: 1.05rem; font-weight: 600; }
.sight b.muted { color: var(--text-3); }
.sight .why { font-size: .66rem; color: var(--text-2); line-height: 1.35; }
.sight.on { border-color: rgba(163,230,53,.45); background: rgba(163,230,53,.07); }
@media (max-width: 720px) { .sights-row { grid-template-columns: repeat(8, 92px); } }

/* ---------- the embeddable widget (embed.html) ---------- */
body.embed { padding: 0; }
.embed-widget { padding: 14px; max-width: 1100px; margin: 0 auto; }
.embed-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.embed-bar .brand-mark { width: 26px; height: 26px; }
.embed-age { font-size: .72rem; }
.embed-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 16px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft); font-size: .76rem; color: var(--text-2); }
.embed-foot a { color: var(--ice); }
body.embed.compact .zone-cards { display: none; }
.embed-help { max-width: 1100px; margin: 16px auto; }
.embed-help h1 { font-size: 1.3rem; margin: 0 0 6px; }
.embed-options { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 10px; }
#embed-code { width: 100%; font-family: var(--mono); font-size: .74rem; line-height: 1.5; color: var(--text); background: rgba(0,0,0,.35);
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; resize: vertical; box-sizing: border-box; }
.embed-actions { display: flex; align-items: center; gap: 12px; margin: 10px 0; }
.embed-preview-title { font-size: .62rem; letter-spacing: .15em; text-transform: uppercase; color: var(--text-3); margin: 18px 0 0; }

/* ======================================================================
   Phones
   ----------------------------------------------------------------------
   The site was laid out for a desk and squeezed onto a phone. Below 640 px
   it now behaves like a phone app: pages under the thumb in a tab bar, the
   header down to language, units and status, charts drawn at the phone's
   own width (or scrolling sideways when they cannot be), the mountain with
   one big number per zone, and the secondary cards folded until asked for.
   ====================================================================== */
.chart-scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; padding-bottom: 4px; }
.pano-mini { display: none; }
.tabbar { display: none; }
.mfold-toggle { display: none; }

@media (max-width: 640px) {
  /* header: pages move to the tab bar, the controls stay */
  .topbar-actions .nav-link { display: none; }
  /* row one: the logo and the status; row two: language and units, never cut off */
  .topbar-inner { position: relative; flex-wrap: wrap; }
  .topbar-actions { -webkit-mask-image: none; mask-image: none; order: 3; width: 100%; flex-wrap: wrap; overflow: visible; justify-content: flex-start; gap: 8px; }
  .topbar-actions #status-pill { position: absolute; top: 10px; right: 0; }
  .brand-text { font-size: .82rem; }

  .tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: rgba(9, 11, 15, .94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
  }
  .tabbar a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 48px; padding: 4px 2px; border-radius: 10px;
    color: var(--text-3); text-decoration: none; font-size: .6rem; letter-spacing: .02em; text-align: center; line-height: 1.15;
  }
  .tabbar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .tabbar a[aria-current="page"] { color: var(--ice); background: rgba(79, 209, 255, .08); }
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  body.embed { padding-bottom: 0; }

  /* every control a thumb can hit */
  .seg { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .seg::-webkit-scrollbar { display: none; }
  .seg button { min-height: 36px; flex: 0 0 auto; }
  .status-pill { min-height: 36px; }
  .controls { max-width: 100%; }

  /* cards: less padding, more forecast */
  .card { padding: 16px 14px; }
  .card-head { margin-bottom: 12px; }

  /* the mountain fits the screen; the big numbers replace the pills */
  .pano svg { min-width: 0 !important; width: 100%; height: auto; }
  .pano-pill, .pano-small { display: none; }
  .pano-mini { display: inline; }
  .zone-hint { display: none; }
  .zone-cards { grid-template-columns: 1fr; }

  /* folding */
  .mfold-toggle {
    display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; margin-left: auto;
    border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.04);
    color: var(--text-2); font: inherit; font-size: .76rem; cursor: pointer;
  }
  /* title and the fold button share the first row; controls get a row of their own */
  .card-head { flex-wrap: wrap; align-items: center; }
  .card-head > div:first-child { flex: 1 1 0; min-width: 0; }
  .card-head > .controls, .card-head > .seg { flex: 1 1 100%; order: 3; }
  .m-collapsed > :not(.card-head) { display: none !important; }
  .m-collapsed > .card-head { margin-bottom: 0; }
  .m-collapsed .card-head .sub, .m-collapsed .card-head .controls { display: none; }
}