/* leadville.co: printed field-report design language on USGS quad paper.
   Type: Barlow Condensed (signage) + IBM Plex Mono (readouts) + system body.
   Structure: rules and whitespace, NOT boxes. Square corners. No gradients, no emoji. */
:root {
  --bg: #f0e9d6;          /* quad paper */
  --surface: #f7f2e3;     /* header/nav paper */
  --line: #cfc3a4;        /* hairline rule */
  --ink: #2b2620;
  --text: #2b2620;
  --text-dim: #695d49;    /* WCAG AA on paper */
  --accent: #c25200;      /* USGS road orange */
  --sky: #2a648229;
  --link: #275f7d;        /* map water blue, AA */
  --good: #1e6e3d;
  --warn: #96600a;
  --bad: #a52f24;
  --max: 640px;
  --display: "Barlow Condensed", "Arial Narrow", -apple-system, sans-serif;
  --mono: "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  padding-bottom: 68px;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Header */
.site-header {
  border-bottom: 1px solid var(--line);
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='120' viewBox='0 0 420 120'%3E%3Cg fill='none' stroke='%238a6d3b' stroke-opacity='0.16' stroke-width='1'%3E%3Cpath d='M-10 92 Q60 60 120 78 T260 66 T430 84'/%3E%3Cpath d='M-10 74 Q70 40 140 60 T280 46 T430 64'/%3E%3Cpath d='M-10 56 Q80 22 160 42 T300 28 T430 46'/%3E%3Cpath d='M-10 110 Q50 84 110 98 T250 88 T430 104'/%3E%3Cpath d='M-10 38 Q90 6 180 24 T320 12 T430 30'/%3E%3C/g%3E%3C/svg%3E");
}
.header-inner {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 15px 18px 13px;
  max-width: var(--max); margin: 0 auto;
}
.brand { display: flex; align-items: baseline; gap: 9px; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand-mark { width: 17px; height: 15px; align-self: center; }
.brand-text {
  font-family: var(--display); font-weight: 700; font-size: 1.5rem;
  letter-spacing: .03em; text-transform: uppercase; line-height: 1;
}
.brand-text .brand-dot { color: var(--accent); }
.elev { font-family: var(--mono); color: var(--text-dim); font-size: .72rem; letter-spacing: .06em; }
.ridge { display: block; width: 100%; height: 26px; margin: 0; color: var(--surface); }

main { max-width: var(--max); margin: 0 auto; padding: 0 18px; }

/* Masthead: kicker + unboxed station readout */
.hero { padding: 20px 0 0; }
.hero h1 {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; font-size: 1.15rem; margin: 0; line-height: 1.1;
  color: var(--text-dim);
}
.hero p { display: none; }

.readout {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 14px;
  padding: 4px 0 14px;
  border-bottom: 2px solid var(--ink);
  margin-bottom: 14px;
}
.readout-main { display: flex; align-items: flex-start; gap: 5px; }
.readout-temp {
  font-family: var(--mono); font-weight: 600; font-size: 5.4rem; line-height: .88;
  font-variant-numeric: tabular-nums; letter-spacing: -.05em;
}
.readout-unit { font-family: var(--mono); font-size: 1.15rem; color: var(--text-dim); padding-top: 8px; }
.readout-side { text-align: right; font-size: .85rem; color: var(--text-dim); line-height: 1.55; padding-bottom: 4px; }
.readout-side .cond { color: var(--text); font-weight: 600; display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.readout-side .cond svg { width: 18px; height: 18px; }

/* Daily brief: field-log entry, unboxed */
.brief {
  border-left: 3px solid var(--accent);
  padding: 2px 0 2px 14px;
  margin: 0 0 14px;
}
.brief h2 {
  margin: 0 0 4px; font-family: var(--mono); font-weight: 600;
  font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; color: var(--accent);
}
.brief p { margin: 0; font-size: .96rem; line-height: 1.6; }

/* Section index: printed tab line, not chips */
.chips {
  display: flex; gap: 18px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 8px 0; margin-bottom: 4px;
}
.chips a {
  flex: 0 0 auto; color: var(--text-dim);
  font-family: var(--display); font-weight: 600; font-size: .98rem;
  letter-spacing: .06em; text-transform: uppercase;
}
.chips a:hover { color: var(--accent); text-decoration: none; }

/* Stat ledger: rows on paper, no boxes */
.cards { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
.card { border-bottom: 1px solid var(--line); padding: 10px 0 9px; }
.card h2 {
  margin: 0; font-family: var(--mono); font-weight: 500; font-size: .68rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim);
}
.card .big {
  font-family: var(--mono); font-size: 1.65rem; font-weight: 600; line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.card .big .unit { font-size: .85rem; font-weight: 500; color: var(--text-dim); }
.card .sub { color: var(--text-dim); font-size: .78rem; }
.loading { color: var(--text-dim); }
.aqi-good { color: var(--good); } .aqi-warn { color: var(--warn); } .aqi-bad { color: var(--bad); }

/* Sections: printed report rules */
.section { margin: 34px 0 0; }
.section-title {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; font-size: 1.25rem; margin: 0 0 12px;
  border-top: 2px solid var(--ink); padding-top: 7px;
}
.section-title .dim { font-family: var(--mono); font-weight: 400; font-size: .68rem; letter-spacing: .06em; color: var(--text-dim); }
.section-note { color: var(--text-dim); font-size: .8rem; margin: 10px 0 0; }
.dim { color: var(--text-dim); }

/* Forecast: ruled columns, no boxes */
.forecast {
  display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.fc-day { flex: 1 0 86px; text-align: center; padding: 10px 4px 9px; }
.fc-day + .fc-day { border-left: 1px solid var(--line); }
.fc-name { font-family: var(--mono); font-size: .64rem; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: .08em; }
.fc-icon { margin: 5px 0 3px; }
.fc-icon svg { width: 25px; height: 25px; }
.fc-temp { font-family: var(--mono); font-weight: 600; font-size: .95rem; font-variant-numeric: tabular-nums; }
.fc-temp span { color: var(--text-dim); font-weight: 400; }
.fc-pop, .fc-wind { font-family: var(--mono); font-size: .66rem; color: var(--text-dim); margin-top: 2px; }
.fc-snow { display: block; font-family: var(--mono); font-size: .66rem; color: var(--link); margin-top: 2px; }

/* Up high: ruled columns */
.peaks { border-top: 1px solid var(--line); }
.peak { border-bottom: 1px solid var(--line); padding: 10px 0; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; }
.peak-head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; }
.peak-head strong { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 1.05rem; }
.peak-head span { font-family: var(--mono); color: var(--text-dim); font-size: .68rem; }
.peak-now { font-family: var(--mono); font-size: 1.1rem; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.peak-now svg { width: 17px; height: 17px; }
.peak-now .dim { font-size: .78rem; font-weight: 400; font-family: var(--body); }
.peak-wind { font-family: var(--mono); color: var(--text-dim); font-size: .72rem; text-align: right; }

/* Highway status + notices: left-bar entries, unboxed */
.sub-title { font-family: var(--mono); font-size: .7rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--text-dim); margin: 14px 0 8px; }
.road { border-left: 3px solid var(--link); padding: 3px 0 5px 13px; margin-bottom: 10px; }
.road-event { border-left-color: var(--warn); }
.road-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.road-status { font-family: var(--mono); color: var(--good); font-weight: 600; font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; }
.road-detail { margin: 2px 0 0; font-size: .84rem; color: var(--text-dim); }

.notice { border-left: 3px solid var(--warn); padding: 3px 0 5px 13px; margin-bottom: 12px; }
.notice-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.notice-head span { font-family: var(--mono); font-size: .7rem; }
.notice p { margin: 4px 0 0; font-size: .88rem; color: #3d362c; }
.notice-src { font-size: .78rem !important; color: var(--text-dim) !important; }

/* Water */
.water-table { width: 100%; border-collapse: collapse; font-size: .9rem; font-variant-numeric: tabular-nums; border-top: 1px solid var(--line); }
.water-table th { font-family: var(--mono); text-align: left; color: var(--text-dim); font-weight: 500; font-size: .66rem; text-transform: uppercase; letter-spacing: .09em; padding: 7px 8px 7px 0; }
.water-table td { padding: 8px 8px 8px 0; border-top: 1px solid var(--line); font-family: var(--mono); font-size: .85rem; }
.water-table td:first-child { font-family: var(--body); font-size: .9rem; }
.temp-warm { color: var(--warn); font-weight: 600; }

/* Alerts (boxes earn their keep here only) */
.alerts { max-width: var(--max); margin: 10px auto 0; padding: 0 18px; }
.alerts a {
  display: block; background: rgba(165,47,36,.06); border: 1px solid rgba(165,47,36,.45);
  color: var(--text); padding: 10px 14px; margin-bottom: 8px; font-size: .9rem;
}
.alerts a span { color: var(--text-dim); font-size: .8rem; }
.alerts a:hover { text-decoration: none; border-color: var(--bad); }

/* Prose pages */
.prose { padding: 8px 0 24px; }
.prose h1 {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .02em; font-size: 1.85rem; line-height: 1.1;
}
.prose h2 {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; font-size: 1.25rem; margin-top: 1.8em;
  border-top: 2px solid var(--ink); padding-top: 7px;
}
.prose p, .prose li { color: #3d362c; }
.prose .answer { font-size: 1.02rem; color: var(--text); border-left: 3px solid var(--link); padding: 2px 0 2px 14px; }
.prose .disclaimer { font-size: .85rem; color: var(--text-dim); border-left: 3px solid var(--warn); padding: 2px 0 2px 14px; }
.prose table { width: 100%; border-collapse: collapse; font-size: .88rem; font-variant-numeric: tabular-nums; border-top: 1px solid var(--line); }
.prose th, .prose td { text-align: left; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line); }
.prose th { font-family: var(--mono); color: var(--text-dim); font-weight: 500; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }

/* Subscribe */
.sub-form { display: flex; gap: 8px; }
.sub-form input {
  flex: 1; min-width: 0; background: var(--surface); color: var(--text);
  border: 1px solid var(--line); padding: 11px 13px;
  font-size: 1rem; font-family: var(--body); outline: none;
}
.sub-form input:focus { border-color: var(--link); }
.sub-form button {
  background: var(--accent); color: #f7f2e3; border: 0;
  padding: 11px 20px; cursor: pointer;
  font-family: var(--display); font-weight: 700; font-size: 1.02rem;
  letter-spacing: .05em; text-transform: uppercase;
}
.sub-form button:hover { filter: brightness(1.08); }

/* Footer + bottom nav */
.updated { color: var(--text-dim); font-size: .78rem; margin: 14px 0; }
.site-footer { max-width: var(--max); margin: 30px auto 0; padding: 16px 18px 24px; color: var(--text-dim); font-size: .78rem; border-top: 2px solid var(--ink); }
.footer-nav { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px; }
.footer-nav a { font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: .95rem; color: var(--text-dim); }
.footer-nav a:hover { color: var(--accent); text-decoration: none; }
.footer-credit { margin-top: 16px; text-align: center; font-family: var(--mono); font-size: .72rem; letter-spacing: .05em; }
.footer-credit a { color: var(--text-dim); }
.footer-credit a:hover { color: var(--accent); text-decoration: none; }
@media (min-width: 700px) { .footer-credit { text-align: right; } }
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  display: flex; justify-content: space-around;
  background: rgba(247, 242, 227, .95);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  padding: 9px 0 calc(9px + env(safe-area-inset-bottom));
}
.bottom-nav a {
  color: var(--text-dim); padding: 4px 14px;
  font-family: var(--display); font-weight: 600; font-size: 1.02rem;
  letter-spacing: .05em; text-transform: uppercase;
}
.bottom-nav a.active { color: var(--accent); }
.bottom-nav a:hover { text-decoration: none; color: var(--text); }

/* Alive layer: motion + depth */
@keyframes lv-spin { to { transform: rotate(360deg); } }
@keyframes lv-sway { 0%,100% { transform: translateX(0); } 50% { transform: translateX(2.6px); } }
@keyframes lv-fall { 0% { transform: translateY(-1px); opacity: .35; } 70% { opacity: 1; } 100% { transform: translateY(2.5px); opacity: .2; } }
@keyframes lv-flicker { 0%,92%,100% { opacity: 1; } 95% { opacity: .35; } }
@keyframes lv-drift { 0%,100% { transform: translateX(0); } 50% { transform: translateX(3.5px); } }
@keyframes lv-pulse { 0% { color: var(--accent); } 100% { color: inherit; } }
svg .ic-rays { animation: lv-spin 16s linear infinite; transform-origin: 12px 12px; transform-box: view-box; }
svg .ic-cloud { animation: lv-sway 3.6s ease-in-out infinite; }
svg .ic-rain { animation: lv-fall 1.1s linear infinite; }
svg .ic-snowfall { animation: lv-fall 2.2s linear infinite; }
svg .ic-bolt { animation: lv-flicker 4s linear infinite; }
svg .ic-fog { animation: lv-drift 6s ease-in-out infinite; }
.pulse { animation: lv-pulse 1.2s ease-out 1; }

.can-reveal { cursor: pointer; }
.depth {
  overflow: hidden; max-height: 0;
  transition: max-height .4s ease;
  border-bottom: 1px solid var(--line);
  padding: 0;
}
.depth:not([hidden]) { padding: 10px 0 12px; }
.depth[hidden] { display: block; border-bottom: 0; }
.depth-row { display: flex; align-items: center; gap: 12px; padding: 4px 0; }
.depth-label { font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); flex: 0 0 auto; min-width: 74px; }
.depth-minmax { font-family: var(--mono); font-size: .72rem; color: var(--text-dim); flex: 0 0 auto; }
.spark { flex: 1 1 auto; height: 32px; min-width: 0; }
.depth-facts { display: flex; flex-wrap: wrap; gap: 4px 18px; padding-top: 6px; }
.depth-facts span { font-family: var(--mono); font-size: .74rem; color: var(--text-dim); }
.adapt-active { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  svg .ic-rays, svg .ic-cloud, svg .ic-rain, svg .ic-snowfall, svg .ic-bolt, svg .ic-fog { animation: none; }
  .depth { transition: none; }
}

/* Live indicator + reveal affordances */
@keyframes lv-breathe { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.live-dot { display: inline-block; width: 7px; height: 7px; background: var(--good); border-radius: 50%; margin-right: 5px; animation: lv-breathe 2.4s ease-in-out infinite; vertical-align: 1px; }
.live-tag { font-family: var(--mono); font-size: .64rem; letter-spacing: .09em; color: var(--text-dim); text-transform: uppercase; }
.more-tag {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--accent); padding: 2px 7px; margin-left: 10px;
  display: inline-block; vertical-align: 2px; user-select: none;
}
.can-reveal:hover .more-tag { background: var(--accent); color: var(--surface); }
.open .more-tag { background: var(--accent); color: var(--surface); }

/* Race week homepage banner */
.race-week {
  display: block; margin: 10px 0 4px; padding: 11px 14px;
  border: 1px solid var(--accent); border-left: 4px solid var(--accent);
  color: var(--text); background: rgba(194,82,0,.06);
}
.race-week:hover { text-decoration: none; background: rgba(194,82,0,.11); }
.rw-kicker { display: block; font-family: var(--mono); font-size: .64rem; font-weight: 600; letter-spacing: .12em; color: var(--accent); }
.rw-name { display: block; font-family: var(--display); font-weight: 700; font-size: 1.25rem; text-transform: uppercase; letter-spacing: .03em; line-height: 1.2; margin: 2px 0; }
.rw-cta { display: block; font-size: .85rem; color: var(--link); }

/* Race weather matrix */
.race-tabs { display: flex; gap: 8px; margin: 4px 0 8px; }
.race-tab {
  background: none; border: 1px solid var(--line); color: var(--text-dim);
  font-family: var(--display); font-weight: 600; font-size: 1rem;
  letter-spacing: .05em; text-transform: uppercase; padding: 6px 14px; cursor: pointer;
}
.race-tab.on { border-color: var(--accent); color: var(--accent); }
.ric { width: 22px; height: 15px; vertical-align: -2px; margin-right: 7px; display: inline-block; }
.rw-name .ric { width: 26px; height: 17px; color: var(--accent); }
.race-meta { font-family: var(--mono); font-size: .74rem; color: var(--text); margin-bottom: 10px; }
.race-when { letter-spacing: .03em; }
.race-live { color: var(--accent); font-weight: 600; }
.matrix-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); }
.matrix { border-collapse: collapse; font-family: var(--mono); }
.matrix th, .matrix td { padding: 0; }
.matrix .m-days th { font-size: .6rem; color: var(--accent); text-align: left; padding: 6px 2px 0; letter-spacing: .08em; }
.matrix .m-hours th { font-size: .58rem; color: var(--text-dim); font-weight: 500; padding: 2px 2px 6px; min-width: 34px; text-align: center; border-bottom: 1px solid var(--line); }
.matrix .m-wp {
  position: sticky; left: 0; background: var(--bg); text-align: left;
  padding: 6px 10px 6px 0; min-width: 130px; border-bottom: 1px solid var(--line);
  z-index: 2;
}
.matrix .m-name { display: block; font-family: var(--display); font-weight: 700; font-size: .92rem; text-transform: uppercase; letter-spacing: .03em; line-height: 1.15; }
.matrix .m-ft { display: block; font-size: .6rem; color: var(--text-dim); letter-spacing: .06em; }
.matrix .m-surf { display: block; font-size: .58rem; font-weight: 600; letter-spacing: .08em; margin-top: 3px; }
.m-surf.s-dry { color: var(--text-dim); }
.m-surf.s-tacky { color: var(--good); }
.m-surf.s-soft { color: var(--warn); }
.m-surf.s-mud { color: var(--bad); }
.matrix tbody td {
  text-align: center; vertical-align: middle; min-width: 34px; height: 44px;
  border-left: 1px solid rgba(207,195,164,.4); border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums; position: relative;
}
.matrix .m-t { font-size: .74rem; font-weight: 600; display: block; line-height: 1; padding-top: 3px; }
.matrix .m-p { color: var(--link); font-size: .5rem; display: block; line-height: 1.2; }
.matrix .m-g { color: var(--warn); font-size: .56rem; display: block; line-height: 1.1; }
.matrix .m-cond { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; }
.m-cond.c-dry { background: rgba(105,93,73,.25); }
.m-cond.c-tacky { background: rgba(30,110,61,.55); }
.m-cond.c-soft { background: rgba(150,96,10,.6); }
.m-cond.c-mud { background: rgba(165,47,36,.65); }
.m-cond.c-ice { background: rgba(39,95,125,.7); }
.matrix td.on-path { outline: 2px solid var(--accent); outline-offset: -2px; }
.plan-eta {
  width: 96px; background: var(--surface); color: var(--text); border: 1px solid var(--line);
  padding: 4px 6px; font-family: var(--mono); font-size: .82rem; font-weight: 600; outline: none;
}
.plan-eta:focus { border-color: var(--link); }
.plan-eta.edited { border-color: var(--accent); color: var(--accent); }
.plan-eta.p-night { color: var(--link); }
.plan-eta.bad { border-color: rgba(165,47,36,.9); color: rgba(165,47,36,.9); }
.plan-shift { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 14px 0 0; }
.plan-shift button {
  background: var(--surface); color: var(--text-dim); border: 1px solid var(--line);
  font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
  padding: 5px 10px; cursor: pointer;
}
.plan-shift button.on { border-color: var(--accent); color: var(--accent); font-weight: 700; }
.plan-shift input {
  width: 88px; background: var(--surface); color: var(--text); border: 1px solid var(--line);
  padding: 4px 8px; font-family: var(--mono); font-size: .78rem; outline: none;
}
.plan-shift input:focus { border-color: var(--link); }
.plan-shift input.bad { border-color: rgba(165,47,36,.9); color: rgba(165,47,36,.9); }
.plan-shift-note { font-family: var(--mono); font-size: .72rem; color: var(--accent); }
.plan-warn { font-family: var(--mono); font-size: .78rem; color: rgba(165,47,36,.95); border-left: 3px solid rgba(165,47,36,.9); padding: 2px 0 2px 12px; margin: 12px 0 0; }
.plan-table tr.row-warn td { color: rgba(165,47,36,.95); }
.sub-topics { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 10px; }
.sub-topics label { font-family: var(--mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-dim); display: flex; align-items: center; gap: 5px; cursor: pointer; }
.sub-topics input { accent-color: var(--accent); }

/* Personal race plan */
.plan-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.plan-label { font-family: var(--mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); }
.plan-form input[type=number] {
  width: 84px; background: var(--surface); color: var(--text); border: 1px solid var(--line);
  padding: 10px 12px; font-family: var(--mono); font-size: 1.15rem; font-weight: 600; outline: none;
}
.plan-form input[type=number]:focus { border-color: var(--link); }
.plan-form button, .plan-sub button {
  background: var(--accent); color: #f7f2e3; border: 0; padding: 10px 18px; cursor: pointer;
  font-family: var(--display); font-weight: 700; font-size: 1rem; letter-spacing: .05em; text-transform: uppercase;
}
.plan-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; border-top: 2px solid var(--ink); margin-top: 14px; }
.plan-table th { font-family: var(--mono); text-align: left; color: var(--text-dim); font-weight: 500; font-size: .64rem; text-transform: uppercase; letter-spacing: .09em; padding: 7px 10px 7px 0; }
.plan-table td { padding: 7px 10px 7px 0; border-top: 1px solid var(--line); font-family: var(--mono); font-size: .84rem; }
.plan-table td:first-child { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: .95rem; }
.plan-table .p-night { color: var(--link); }
.plan-hl { border-left: 3px solid var(--accent); padding: 2px 0 2px 14px; margin: 14px 0 10px; }
.plan-hl p { margin: 3px 0; font-size: .92rem; }
.plan-sub { margin-top: 12px; max-width: 460px; }

/* Desktop */
@media (min-width: 700px) {
  :root { --max: 860px; }
  .cards { grid-template-columns: repeat(3, 1fr); }
  .bottom-nav { display: none; }
  body { padding-bottom: 0; }
  .readout-temp { font-size: 6.4rem; }
  .peaks { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
  .peak { border-bottom: 0; grid-template-columns: 1fr; padding: 12px 16px 12px 0; }
  .peak + .peak { border-left: 1px solid var(--line); padding-left: 16px; }
  .peak-wind { text-align: left; }
  .fc-day { flex-basis: 0; }
}