/* Publication theme: restrained atlas layout with an optional dark reading mode. */

@font-face {
  font-family: "Merriweather";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("./fonts/merriweather/merriweather-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Merriweather";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("./fonts/merriweather/merriweather-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: "Merriweather";
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url("./fonts/merriweather/merriweather-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Merriweather";
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url("./fonts/merriweather/merriweather-italic-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: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("./fonts/source-sans-3/source-sans-3-variable.woff2") format("woff2-variations");
}

:root {
  color-scheme: dark;
  --font-display: "Merriweather";
  --font-body: "Source Sans 3";
  --layout-wide: 80rem;
  --measure-reading: 72ch;
  --gutter: clamp(1rem, 3vw, 2.5rem);
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-section: clamp(4rem, 7vw, 6.5rem);
  --paper: #120e10;
  --surface: #1b1417;
  --ink: #f7eff2;
  --muted: #bcaab0;
  --line: #4a3940;
  --control-line: #806872;
  --vine: #e06a83;
  --storm: #0d090b;
  --storm-mid: #2a1b20;
  --sky: #e06a83;
  --rain: #78b0c8;
  --heat: #e17b59;
  --cool: #78b0c8;
  --wine: #e06a83;
  --gold: #f0a04b;
  --warning: #efb264;
  --compare-a: #e06a83;
  --compare-b: #78b0c8;
  --info: #78b0c8;
  --info-surface: #18242b;
  --success: #a5b56d;
  --success-surface: #202618;
  --warning-surface: #2d2116;
  --unavailable-surface: #21191d;
  --feature-surface: #291a20;
  --theme-panel-soft: #1f151a;
  --theme-panel-muted: #24181e;
  --theme-panel-highlight: #321923;
  --theme-inverse: #32111c;
  --theme-inverse-mid: #481825;
  --theme-inverse-copy: #f7eff2;
  --theme-map: #1a1215;
  --theme-shadow: rgb(0 0 0 / 32%);
  --theme-button-text: #1c080d;
  --theme-sticky: rgb(16 13 18 / 95%);
}

html[data-aesthetic-theme="dark"] { color-scheme: dark; }

html,
body {
  background-color: var(--paper);
  color: var(--ink);
}

body {
  background-image: repeating-linear-gradient(90deg, transparent 0 95px, rgb(176 50 77 / 3.5%) 95px 96px);
}

a { color: var(--vine); }

.environment-banner {
  background: #8f1f38;
  color: #fff7f9;
}

.site-header {
  background: rgb(10 7 9 / 96%);
  box-shadow: 0 1px 0 #4b343d;
}

.brand span {
  border-color: var(--wine);
  color: var(--vine);
}

.brand strong,
.primary-nav a[aria-current="page"] { color: #fff5f7; }

.primary-nav a { color: #b6a1a8; }
.primary-nav a[aria-current="page"] { border-color: var(--wine); }

.unit-toggle { border-color: var(--control-line); }
.unit-toggle label:has(input:checked) { background: var(--wine); color: var(--theme-button-text); }

.aesthetic-theme-toggle {
  display: flex;
  min-width: auto;
  align-items: center;
  gap: .2rem;
  margin: 0;
  padding: .18rem;
  border: 1px solid var(--control-line);
  border-radius: 0;
  background: #171014;
}

.aesthetic-theme-toggle legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.aesthetic-theme-toggle label {
  display: flex;
  min-height: 38px;
  align-items: center;
  padding: .22rem .5rem;
  border-radius: 0;
  color: #b6a1a8;
  cursor: pointer;
  font: 750 .75rem/1.3 var(--font-body), ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.aesthetic-theme-toggle input {
  width: 0;
  min-height: 0;
  margin: 0;
  opacity: 0;
}

.aesthetic-theme-toggle label:has(input:checked) {
  background: var(--wine);
  color: var(--theme-button-text);
}

.aesthetic-theme-toggle label:has(input:focus-visible) {
  outline: 3px solid #f3a3b4;
  outline-offset: 3px;
}

.weather-hero-vineyard { border-bottom-color: var(--line); }

.weather-hero-vineyard img {
  filter: grayscale(.88) contrast(1.2) brightness(.59) sepia(.08) hue-rotate(315deg);
}

.weather-hero-vineyard::after {
  background:
    radial-gradient(circle at 72% 63%, rgb(183 37 70 / 18%), transparent 25rem),
    linear-gradient(90deg, rgb(10 7 9 / 94%) 0%, rgb(10 7 9 / 76%) 42%, rgb(10 7 9 / 44%) 70%, rgb(10 7 9 / 72%) 100%);
}

.weather-hero-vineyard figcaption {
  color: #b8a3aa;
  background: rgb(10 7 9 / 84%);
}

.weather-hero-copy .eyebrow,
.map-count,
.region-card-country,
.method-strip .eyebrow { color: #e26078; }

.weather-hero-copy h1 { color: #fff5f7; }
.weather-hero-copy .lede { color: #c9b8bd; }

.vintage-lookup {
  border-color: #604751;
  background: rgb(19 12 16 / 91%);
}

.vintage-lookup label,
.region-filters label,
.weather-map-heading,
.atlas-ways > a small,
.section-heading > p,
.region-card p { color: var(--muted); }

input,
select,
button,
.clear-filters {
  border-color: var(--control-line);
  background: var(--surface);
  color: var(--ink);
}

.vintage-lookup button,
.region-filters button {
  border-color: var(--wine);
  background: var(--wine);
  color: var(--theme-button-text);
}

.vintage-lookup button:hover,
.region-filters button:hover { background: var(--vine); }

.weather-map-heading .map-kicker,
.atlas-ways > a,
.atlas-ways > a strong,
.section-heading h2,
.region-country > summary,
.region-card h3 a { color: var(--ink); }

.weather-map-room .map-panel {
  border-color: #6b4e59;
  background: #180e14;
  box-shadow: 14px 14px 0 rgb(217 75 101 / 13%), 0 28px 75px rgb(0 0 0 / 52%);
}

.weather-map-room .static-map-activation,
.weather-map-room .static-ocean {
  background: #180e14;
  fill: #180e14;
}

.weather-map-room .static-world-map image {
  opacity: .56;
  filter: grayscale(.72) brightness(.55) contrast(1.08) sepia(.12) hue-rotate(315deg) saturate(1.25);
}

.weather-map-room .static-region path {
  fill: #d9667d;
  fill-opacity: .5;
  stroke: #f5c5d0;
}

.weather-map-room .static-region circle,
.weather-map-room .static-region.approximate circle { fill: #b61f3e; }

.weather-map-room .map-note {
  border-top-color: #49343c;
  background: #120c0f;
  color: #ad969e;
}

.weather-map-room .map-activation-label { background: rgb(24 12 17 / 90%); }

.atlas-ways {
  border-color: var(--line);
  background: #120c0f;
  box-shadow: 0 25px 70px rgb(0 0 0 / 36%);
}

.atlas-ways > a + a { border-left-color: var(--line); }
.atlas-ways > a::before { border-top-color: var(--wine); }
.atlas-ways > a:hover { background: #24151b; }

.section-heading { border-color: #6b4e59; }

.region-filters,
.region-country {
  border-color: var(--line);
  background: #140d11;
}

.clear-filters { color: #e8d9de; }
.region-country[open] > summary { background: #2a171e; }
.region-country[open] > summary .region-country-count { color: #e68ba0; }

.region-card {
  border-color: var(--line);
  border-top-color: var(--wine);
  background: #1a1116;
}

.tag-list li {
  background: #321923;
  color: #ef9daf;
}

.method-strip {
  border-color: var(--line);
  border-left-color: var(--wine);
  background:
    linear-gradient(115deg, rgb(10 7 9 / 97%), rgb(34 18 25 / 94%)),
    url("./images/vineyard-hero.jpg") center / cover;
  color: var(--muted);
}

.method-strip > a { color: var(--vine); }

.site-footer {
  border-color: var(--line);
  color: var(--muted);
}

.site-footer p { color: var(--muted); }

.footer-mark {
  border-color: var(--wine);
  color: var(--vine);
}

/* Light mode keeps the field-monitor geometry in a restrained parchment-and-burgundy palette. */
html[data-aesthetic-theme="light"] {
  color-scheme: light;
  --paper: #f6f2f1;
  --surface: #fffdfc;
  --ink: #2b1920;
  --muted: #6f5d64;
  --line: #d7c9ce;
  --control-line: #9b7f89;
  --vine: #9f1f3d;
  --storm: #eee5e8;
  --storm-mid: #e1d4d8;
  --sky: #9f1f3d;
  --rain: #397590;
  --heat: #b65233;
  --cool: #397590;
  --wine: #9f1f3d;
  --gold: #c97932;
  --warning: #85500c;
  --compare-a: #9f1f3d;
  --compare-b: #397590;
  --info: #397590;
  --info-surface: #e4eef2;
  --success: #4d642f;
  --success-surface: #e8eedf;
  --warning-surface: #fff1da;
  --unavailable-surface: #eee6e8;
  --feature-surface: #f4e5e9;
  --theme-panel-soft: #f0e5e8;
  --theme-panel-muted: #eadde1;
  --theme-panel-highlight: #f6eaed;
  --theme-inverse: #3a1622;
  --theme-inverse-mid: #572030;
  --theme-inverse-copy: #fff7f9;
  --theme-map: #eee5e8;
  --theme-shadow: rgb(89 53 65 / 17%);
  --theme-button-text: white;
  --theme-sticky: rgb(255 250 251 / 95%);
}

html[data-aesthetic-theme="light"],
html[data-aesthetic-theme="light"] body {
  background-color: var(--paper);
  color: var(--ink);
}

html[data-aesthetic-theme="light"] body {
  background-image: repeating-linear-gradient(90deg, transparent 0 95px, rgb(110 35 51 / 4.5%) 95px 96px);
}

html[data-aesthetic-theme="light"] a { color: var(--vine); }

html[data-aesthetic-theme="light"] .environment-banner {
  background: #8f1f38;
  color: white;
}

html[data-aesthetic-theme="light"] .site-header {
  background: var(--surface);
  box-shadow: 0 1px 0 var(--line);
}

html[data-aesthetic-theme="light"] .brand span {
  border-color: var(--wine);
  color: var(--wine);
}

html[data-aesthetic-theme="light"] .brand strong { color: var(--ink); }
html[data-aesthetic-theme="light"] .primary-nav a { color: var(--muted); }
html[data-aesthetic-theme="light"] .primary-nav a:hover { color: var(--vine); }

html[data-aesthetic-theme="light"] .primary-nav a[aria-current="page"] {
  border-color: var(--wine);
  color: var(--ink);
}

html[data-aesthetic-theme="light"] .unit-toggle,
html[data-aesthetic-theme="light"] .aesthetic-theme-toggle {
  border-color: var(--control-line);
  background: var(--surface);
}

html[data-aesthetic-theme="light"] .unit-toggle label,
html[data-aesthetic-theme="light"] .aesthetic-theme-toggle label { color: var(--muted); }

html[data-aesthetic-theme="light"] .unit-toggle label:has(input:checked),
html[data-aesthetic-theme="light"] .aesthetic-theme-toggle label:has(input:checked) {
  background: var(--wine);
  color: white;
}

html[data-aesthetic-theme="light"] .weather-hero-vineyard { border-bottom-color: var(--line); }

html[data-aesthetic-theme="light"] .weather-hero-vineyard img {
  filter: grayscale(.72) contrast(.91) brightness(1.13) saturate(.6);
}

html[data-aesthetic-theme="light"] .weather-hero-vineyard::after {
  background:
    radial-gradient(circle at 72% 63%, rgb(165 31 61 / 13%), transparent 25rem),
    linear-gradient(90deg, rgb(250 244 246 / 95%) 0%, rgb(250 244 246 / 82%) 42%, rgb(250 244 246 / 43%) 70%, rgb(250 244 246 / 72%) 100%);
}

html[data-aesthetic-theme="light"] .weather-hero-vineyard figcaption {
  color: #624a54;
  background: rgb(250 245 247 / 88%);
}

html[data-aesthetic-theme="light"] .weather-hero-copy .eyebrow,
html[data-aesthetic-theme="light"] .map-count,
html[data-aesthetic-theme="light"] .region-card-country,
html[data-aesthetic-theme="light"] .method-strip .eyebrow { color: #9a1d38; }

html[data-aesthetic-theme="light"] .weather-hero-copy h1 {
  color: #28161d;
  text-shadow: 0 2px 24px rgb(255 255 255 / 70%);
}

html[data-aesthetic-theme="light"] .weather-hero-copy .lede { color: #654c56; }

html[data-aesthetic-theme="light"] .vintage-lookup {
  border-color: #c0a6af;
  background: rgb(255 251 252 / 92%);
}

html[data-aesthetic-theme="light"] .vintage-lookup label,
html[data-aesthetic-theme="light"] .region-filters label,
html[data-aesthetic-theme="light"] .weather-map-heading,
html[data-aesthetic-theme="light"] .atlas-ways > a small,
html[data-aesthetic-theme="light"] .section-heading > p,
html[data-aesthetic-theme="light"] .region-card p { color: var(--muted); }

html[data-aesthetic-theme="light"] input,
html[data-aesthetic-theme="light"] select,
html[data-aesthetic-theme="light"] button,
html[data-aesthetic-theme="light"] .clear-filters {
  border-color: var(--control-line);
  background: var(--surface);
  color: var(--ink);
}

html[data-aesthetic-theme="light"] .vintage-lookup button,
html[data-aesthetic-theme="light"] .region-filters button {
  border-color: var(--wine);
  background: var(--wine);
  color: white;
}

html[data-aesthetic-theme="light"] .vintage-lookup button:hover,
html[data-aesthetic-theme="light"] .region-filters button:hover { background: #83172f; }

html[data-aesthetic-theme="light"] .weather-map-heading .map-kicker,
html[data-aesthetic-theme="light"] .atlas-ways > a,
html[data-aesthetic-theme="light"] .atlas-ways > a strong,
html[data-aesthetic-theme="light"] .section-heading h2,
html[data-aesthetic-theme="light"] .region-country > summary,
html[data-aesthetic-theme="light"] .region-card h3 a { color: var(--ink); }

html[data-aesthetic-theme="light"] .weather-map-room .map-panel {
  border-color: #b6939f;
  background: #eadde1;
  box-shadow: 14px 14px 0 rgb(165 31 61 / 14%), 0 28px 70px rgb(89 53 65 / 20%);
}

html[data-aesthetic-theme="light"] .weather-map-room .static-map-activation,
html[data-aesthetic-theme="light"] .weather-map-room .static-ocean {
  background: #eadde1;
  fill: #eadde1;
}

html[data-aesthetic-theme="light"] .weather-map-room .static-world-map image {
  opacity: .72;
  filter: grayscale(.68) brightness(1.1) contrast(.88) sepia(.08) hue-rotate(315deg) saturate(.85);
}

html[data-aesthetic-theme="light"] .weather-map-room .static-region path {
  fill: #b52d4b;
  fill-opacity: .45;
  stroke: #82162f;
}

html[data-aesthetic-theme="light"] .weather-map-room .static-region circle,
html[data-aesthetic-theme="light"] .weather-map-room .static-region.approximate circle { fill: #9e1735; }

html[data-aesthetic-theme="light"] .weather-map-room .map-note {
  border-top-color: #ccb5bd;
  background: #fffafb;
  color: #6c535d;
}

html[data-aesthetic-theme="light"] .weather-map-room .map-activation-label {
  background: rgb(42 24 32 / 90%);
  color: white;
}

html[data-aesthetic-theme="light"] .weather-map-room .geometry-key { color: #49313a; }

html[data-aesthetic-theme="light"] .atlas-ways {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: 0 25px 70px rgb(89 53 65 / 15%);
}

html[data-aesthetic-theme="light"] .atlas-ways > a + a { border-left-color: var(--line); }
html[data-aesthetic-theme="light"] .atlas-ways > a::before { border-top-color: var(--wine); }
html[data-aesthetic-theme="light"] .atlas-ways > a:hover { background: #f2e3e7; }

html[data-aesthetic-theme="light"] .section-heading { border-color: var(--line); }

html[data-aesthetic-theme="light"] .region-filters,
html[data-aesthetic-theme="light"] .region-country {
  border-color: var(--line);
  background: var(--surface);
}

html[data-aesthetic-theme="light"] .clear-filters { color: #573a45; }

html[data-aesthetic-theme="light"] .region-country[open] > summary {
  background: #eadde1;
  color: var(--ink);
}

html[data-aesthetic-theme="light"] .region-country[open] > summary .region-country-count { color: #95213a; }

html[data-aesthetic-theme="light"] .region-card {
  border-color: #d4c0c6;
  border-top-color: var(--wine);
  background: #fff;
}

/* In the accordion row layout, .region-list .region-card is meant to stay
   transparent so each row blends into the accordion's own surface color
   instead of showing a separate white panel. The rule above wins over that
   on specificity (it carries an html[...] type selector), so restate it here
   with enough specificity to keep the row content transparent in light mode
   too, matching dark mode's already-correct behavior. */
html[data-aesthetic-theme="light"] .region-list .region-card { background: transparent; }

html[data-aesthetic-theme="light"] .tag-list li {
  background: #eedee3;
  color: #7b3345;
}

html[data-aesthetic-theme="light"] .method-strip {
  border-color: var(--line);
  border-left-color: var(--wine);
  background:
    linear-gradient(115deg, rgb(249 243 245 / 82%), rgb(234 218 223 / 76%)),
    url("./images/vineyard-hero.jpg") center / cover;
  color: var(--muted);
}

html[data-aesthetic-theme="light"] .method-strip h2 { color: var(--ink); }
html[data-aesthetic-theme="light"] .method-strip > a { color: var(--vine); }

html[data-aesthetic-theme="light"] .site-footer {
  border-color: var(--line);
  color: var(--muted);
}

html[data-aesthetic-theme="light"] .site-footer p { color: var(--muted); }

html[data-aesthetic-theme="light"] .footer-title { color: var(--ink); }

html[data-aesthetic-theme="light"] .footer-mark {
  border-color: var(--wine);
  color: var(--wine);
}

@media (max-width: 900px) {
  .weather-hero-vineyard::after {
    background: linear-gradient(180deg, rgb(10 7 9 / 87%), rgb(10 7 9 / 55%) 48%, rgb(10 7 9 / 84%));
  }

  html[data-aesthetic-theme="light"] .weather-hero-vineyard::after {
    background: linear-gradient(180deg, rgb(250 244 246 / 90%), rgb(250 244 246 / 52%) 48%, rgb(250 244 246 / 84%));
  }
}

@media (max-width: 700px) {
  .aesthetic-theme-toggle {
    grid-column: 1 / -1;
    grid-row: 3;
    margin: .25rem 0 .35rem auto;
  }

  .atlas-ways > a + a { border-top-color: #513a43; }

  html[data-aesthetic-theme="light"] .primary-nav {
    border-top-color: rgb(42 24 32 / 14%);
  }

  html[data-aesthetic-theme="light"] .atlas-ways > a + a { border-top-color: #cfbbc2; }
}

@media (prefers-reduced-motion: no-preference) {
  body,
  .site-header,
  .vintage-lookup,
  .map-panel,
  .atlas-ways,
  .region-card,
  .method-strip {
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
  }
}

/* Editorial reduction pass: less panel styling, tighter navigation, and denser indexes. */
.site-header {
  background: var(--surface);
  box-shadow: 0 1px 0 var(--line);
  backdrop-filter: none;
}

html[data-aesthetic-theme="dark"] .site-header { background: var(--paper); }

.header-inner { min-height: 62px; }
.primary-nav a { color: var(--muted); }
html[data-aesthetic-theme="dark"] .primary-nav a { color: var(--muted); }

.display-settings { position: relative; }
.display-settings > summary {
  min-width: 44px;
  min-height: 44px;
  padding: .55rem .7rem;
  border: 1px solid var(--control-line);
  color: var(--muted);
  cursor: pointer;
  font-size: .75rem;
  font-weight: 700;
  list-style: none;
}
.display-settings > summary::-webkit-details-marker { display: none; }
.display-settings > summary::after { content: " +"; }
.display-settings[open] > summary::after { content: " −"; }
.display-settings-panel {
  position: absolute;
  z-index: 60;
  top: calc(100% + .5rem);
  right: 0;
  display: grid;
  width: min(34rem, calc(100vw - 1rem));
  gap: .65rem;
  padding: .8rem;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 10px 28px var(--theme-shadow);
}
.display-settings .unit-toggle,
.display-settings .aesthetic-theme-toggle {
  width: 100%;
  justify-content: stretch;
}
.display-settings label {
  flex: 1;
  justify-content: center;
  white-space: nowrap;
}

.display-settings .production-preview-toggle {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  justify-content: start;
  gap: .1rem .55rem;
  min-height: 44px;
  padding: .55rem .2rem;
  border-top: 1px solid var(--line);
  white-space: normal;
  cursor: pointer;
}

.production-preview-toggle input {
  grid-row: 1 / span 2;
  align-self: center;
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--wine);
}

.production-preview-toggle span {
  color: var(--ink);
  font-size: .82rem;
  font-weight: 750;
}

.production-preview-toggle small {
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.35;
}

.mode-toggle button {
  min-height: 44px;
}

.weather-hero { min-height: 0; }
.weather-hero-copy { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.weather-hero-copy h1 { max-width: 18ch; }
.weather-map-room .map-panel,
.region-record-page .region-hero,
.grape-index-hero,
.conditions-tabs {
  box-shadow: none;
}

.weather-watch-grid { grid-template-columns: 1fr; }
.weather-watch-group:nth-child(even) { border-left: 0; }
.weather-watch-group:nth-child(n + 2) { border-top: 1px solid var(--line); }

.region-country .region-list { padding: 0 1.5rem; }
.region-list .region-card {
  display: grid;
  grid-template-columns: minmax(180px, .32fr) minmax(0, 1fr) minmax(130px, .35fr);
  gap: 1.25rem;
  margin: 0;
  padding: var(--space-5) 0;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  /* .region-card (styles.css) carries a box-shadow written for the older
     grid-card layout. It was never reset for this row-list layout, so each
     transparent row was casting a soft shadow into the accordion's side
     padding. Low-contrast against dark mode's dark surface (invisible
     there), but a visible gray band against light mode's bright surface. */
  box-shadow: none;
}
.region-list .region-card:first-child { border-top: 0; }
.region-list .region-card h3,
.region-list .region-card p { margin: 0; }
.region-list .region-card h3 { font-size: 1.1rem; }
.region-list .region-card > p { font-size: .9rem; }
.region-list .region-list-meta { color: var(--muted); font-size: .78rem; }
.page-heading {
  max-width: 1120px;
  padding-top: clamp(2rem, 4vw, 3.5rem);
}
.page-heading h1 {
  max-width: none;
  font-size: clamp(2.75rem, 4.5vw, 4.75rem);
  line-height: 1;
  text-wrap: pretty;
}
.compare-page .page-heading,
.grape-detail-hero,
.vintage-answer,
.outlook,
.sources-section {
  background: var(--theme-inverse);
}
.comparison-builder { margin-top: 1.5rem; }

.grape-index-hero {
  max-width: none;
  margin: clamp(2rem, 4vw, 3.5rem) 0;
  padding: clamp(2rem, 5vw, 4rem);
  border: 1px solid var(--line);
}
.grape-index-list { border-top: 1px solid var(--line); }
.grape-index-row {
  display: grid;
  grid-template-columns: minmax(200px, .3fr) minmax(0, 1fr) minmax(220px, .35fr);
  gap: 1.5rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--line);
}
.grape-index-row h3,
.grape-index-row p { margin: 0; }
.grape-index-row h3 { font-size: 1.1rem; }
.grape-index-row .grape-aliases,
.grape-index-row .grape-card-meta { font-size: .78rem; }

.grape-detail-hero { margin-top: 2rem; }
.grape-climate-table th small {
  display: block;
  color: var(--muted);
  font-weight: 500;
}
.grape-climate-table td[colspan] { color: var(--muted); }
.interpretation-section { margin-top: 2rem; }
.signal-list { display: grid; gap: .5rem; }

@media (max-width: 900px) {
  .header-inner { flex-wrap: nowrap; }
  .header-actions { min-width: 0; }
  .primary-nav {
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .primary-nav::-webkit-scrollbar { display: none; }
  .primary-nav a { white-space: nowrap; }
  .region-list .region-card,
  .grape-index-row { grid-template-columns: minmax(150px, .34fr) minmax(0, 1fr); }
  .region-list .region-list-meta,
  .grape-index-row .grape-card-meta { grid-column: 2; }

  .region-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .region-filters > div:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  .header-inner {
    width: calc(100% - 1rem);
    min-height: 54px;
    gap: .5rem;
  }
  .brand .brand-logo { width: 42px; height: 42px; }
  .header-actions { flex: 1; gap: .35rem; }
  .primary-nav a { min-height: 42px; padding-inline: .5rem; font-size: .72rem; }
  .display-settings > summary { width: 44px; overflow: hidden; padding-inline: .45rem; color: transparent; }
  .display-settings > summary::before { content: "Aa"; color: var(--muted); }
  .display-settings > summary::after { display: none; }
  .display-settings-panel {
    right: 0;
    grid-template-columns: minmax(0, 1fr);
  }
  .display-settings .unit-toggle,
  .display-settings .aesthetic-theme-toggle {
    grid-column: auto;
    grid-row: auto;
    min-width: 0;
    margin-left: 0;
  }
  .weather-hero-copy { padding-top: 2.25rem; }
  .region-country .region-list { padding-inline: 1rem; }
  .region-list .region-card,
  .grape-index-row { grid-template-columns: 1fr; gap: .45rem; }
  .region-list .region-list-meta,
  .grape-index-row .grape-card-meta { grid-column: 1; }
  .weather-watch { width: calc(100% - 1.5rem); }

  .region-filters > div:first-child {
    grid-column: auto;
  }

  .region-filters {
    grid-template-columns: 1fr;
  }
}

/* Reader-facing weather watch, historical standing, and season replay. */
.weather-watch {
  width: calc(100% - clamp(2rem, 6vw, 5rem));
  max-width: 1120px;
  margin-block: clamp(4rem, 8vw, 7rem);
  margin-inline: auto;
}

.weather-watch .section-heading h2 {
  max-width: none;
  margin: 0;
  font-size: clamp(2.25rem, 3.7vw, 3.3rem);
}

@media (min-width: 900px) {
  .weather-watch .section-heading h2 { white-space: nowrap; }
}

.weather-watch-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--line);
  background: var(--surface);
}

.weather-watch-group {
  min-width: 0;
  padding: clamp(1.25rem, 3vw, 2rem);
}

.weather-watch-group:nth-child(even) { border-left: 1px solid var(--line); }
.weather-watch-group:nth-child(n + 3) { border-top: 1px solid var(--line); }

.weather-watch-group header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.weather-watch-group h3 {
  margin: 0;
  font-size: clamp(1.25rem, 2vw, 1.65rem);
}

.weather-watch-group header p {
  margin: 0;
  color: var(--muted);
  font-size: .78rem;
  text-align: right;
}

.weather-watch-group ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.weather-watch-group li + li { border-top: 1px solid var(--line); }

.weather-watch-group li a {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: center;
  min-height: 76px;
  color: var(--ink);
  text-decoration: none;
}

.weather-watch-group li a:hover .weather-watch-place strong { color: var(--wine); }

.weather-watch-rank {
  color: var(--wine);
  font: 700 .75rem/1.3 var(--font-body), ui-sans-serif, system-ui, sans-serif;
}

.weather-watch-place,
.weather-watch-value {
  display: grid;
  min-width: 0;
}

.weather-watch-place strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.weather-watch-place small,
.weather-watch-value small {
  color: var(--muted);
  font-size: .72rem;
}

.weather-watch-value {
  justify-items: end;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.weather-watch-reading {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: .45rem;
  white-space: nowrap;
}

.weather-watch-reading > [data-unit-value] {
  color: var(--ink);
  font-size: 1.15rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.weather-watch-reading .weather-watch-anomaly {
  color: var(--rain);
  font-weight: 750;
}

.weather-watch-value .weather-watch-alert {
  color: var(--warning);
  font-weight: 750;
  text-transform: uppercase;
}

.weather-watch-note {
  margin: .75rem 0 0;
  color: var(--muted);
  font-size: .78rem;
}

.vintage-standing {
  display: grid;
  grid-template-columns: minmax(190px, .62fr) minmax(0, 1.38fr);
  gap: clamp(1.25rem, 4vw, 3rem);
  margin: 1.5rem 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-left: 4px solid var(--wine);
  background: var(--theme-panel-soft);
  scroll-margin-top: 9rem;
}

.vintage-standing h3 { margin-bottom: .65rem; }
.vintage-standing > div:first-child > p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: .85rem;
}

.vintage-standing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vintage-standing-grid article {
  display: flex;
  min-height: 138px;
  flex-direction: column;
  justify-content: center;
  padding: 1rem 1.25rem;
  border-left: 1px solid var(--line);
}

.vintage-standing-grid article:nth-child(n + 3) { border-top: 1px solid var(--line); }
.vintage-standing-grid p,
.vintage-standing-grid span,
.vintage-standing-grid small { margin: 0; }
.vintage-standing-grid p {
  color: var(--muted);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.vintage-standing-grid strong {
  margin: .35rem 0 .15rem;
  color: var(--ink);
  font-size: 1.05rem;
}
.vintage-standing-grid span { color: var(--muted); font-size: .8rem; }
.vintage-standing-grid small {
  margin-top: .45rem;
  color: var(--wine);
  font-weight: 700;
}

.season-milestones {
  margin: 1.5rem 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  overflow: hidden;
  scroll-margin-top: 9rem;
}

.season-milestones-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

.season-milestones-heading h3 { margin: 0; }
.season-milestones-heading > p {
  margin: 0;
  color: var(--muted);
  font-size: .8rem;
  white-space: nowrap;
}

.milestone-phase-legend,
.milestone-phases {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.milestone-phase-legend { margin: 1rem 0; }

.milestone-phase-legend span,
.milestone-phases span {
  padding: .2rem .45rem;
  border: 1px solid var(--line);
  color: var(--muted);
  background: var(--theme-panel-muted);
  font: 700 .75rem/1.3 var(--font-body), ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.milestone-phase-legend .phase--spring_frost,
.milestone-phases .phase--spring_frost {
  border-color: var(--cool);
  color: var(--cool);
}

.milestone-phase-legend .phase--growing,
.milestone-phases .phase--growing {
  border-color: var(--wine);
  color: var(--wine);
}

.milestone-phase-legend .phase--harvest,
.milestone-phases .phase--harvest {
  border-color: var(--warning);
  color: var(--warning);
}

.milestone-scroll-controls {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  margin: 0 0 .75rem;
}

.milestone-scroll-controls button {
  min-height: 38px;
  padding: .4rem .7rem;
  border-color: var(--line);
  color: var(--ink);
  background: var(--theme-panel-muted);
  font-size: .75rem;
}

.milestone-calendar-scroll {
  margin-inline: calc(clamp(1.25rem, 3vw, 2rem) * -1);
  padding-inline: clamp(1.25rem, 3vw, 2rem);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-color: var(--wine) var(--theme-panel-muted);
}

.milestone-calendar {
  display: grid;
  grid-auto-columns: minmax(230px, 1fr);
  grid-auto-flow: column;
  gap: .75rem;
  width: max-content;
  min-width: 100%;
  margin: 0;
  padding: 0 0 1rem;
  list-style: none;
}

.milestone-month {
  display: flex;
  min-height: 500px;
  flex-direction: column;
  padding: 1rem;
  border: 1px solid var(--line);
  border-top: 3px solid var(--wine);
  background: var(--surface);
  scroll-snap-align: start;
}

.milestone-month > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--line);
}

.milestone-month time {
  color: var(--ink);
  font-size: 1.25rem;
  font-weight: 750;
}

.milestone-month > header small {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.milestone-phases {
  min-height: 58px;
  align-content: start;
  padding: .75rem 0;
}

.milestone-measure {
  padding: .9rem 0;
  border-top: 1px solid var(--line);
}

.milestone-measure h4 {
  margin: 0 0 .55rem;
  color: var(--muted);
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.milestone-measure-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .2rem .75rem;
  align-items: baseline;
  color: var(--ink);
  font-size: .75rem;
}

.milestone-measure-row + .milestone-measure-row { margin-top: .55rem; }
.milestone-measure-row strong { font-variant-numeric: tabular-nums; }
.milestone-measure-row i {
  position: relative;
  grid-column: 1 / -1;
  display: block;
  height: 4px;
  overflow: hidden;
  background: var(--theme-panel-muted);
}
.milestone-measure-row i::after {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--milestone-width);
  background: var(--wine);
  content: "";
}
.milestone-measure-row.is-typical { color: var(--muted); }
.milestone-measure-row.is-typical i::after {
  background: var(--muted);
  opacity: .7;
}
.milestone-measure--rain .milestone-measure-row:not(.is-typical) i::after {
  background: var(--rain);
}

.milestone-frost {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: .9rem 0;
  border-top: 1px solid var(--line);
}

.milestone-frost div { display: grid; }
.milestone-frost div + div {
  padding-left: .75rem;
  border-left: 1px solid var(--line);
}
.milestone-frost dt { color: var(--muted); font-size: .65rem; }
.milestone-frost dd {
  margin: 0;
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 750;
}

.milestone-note {
  margin: auto 0 0;
  padding-top: 1rem;
  color: var(--muted);
  font-size: .78rem;
}

.milestone-table { margin-top: 1rem; }

.season-replay {
  margin: 1.5rem 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  overflow: hidden;
  scroll-margin-top: 9rem;
}

.season-replay-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

.season-replay-heading h3 { margin: 0; }
.season-replay-heading > p {
  margin: 0;
  color: var(--muted);
  font-size: .8rem;
  white-space: nowrap;
}

.season-replay-controls {
  display: grid;
  grid-template-columns: auto minmax(150px, .35fr) minmax(220px, 1fr);
  gap: 1rem;
  align-items: center;
  margin: 1.25rem 0;
}

.season-replay-play {
  border-color: var(--wine);
  background: var(--wine);
  color: var(--theme-button-text);
}

.season-replay-controls label {
  display: grid;
  color: var(--muted);
  font-size: .72rem;
  text-transform: uppercase;
}

.season-replay-controls label strong {
  color: var(--ink);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  text-transform: none;
}

.season-replay-controls input[type="range"] {
  width: 100%;
  min-height: 44px;
  padding-inline: 0;
  accent-color: var(--wine);
}

.season-replay-readout {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
  background: var(--theme-panel-muted);
}

.season-replay-readout div {
  display: grid;
  min-height: 92px;
  align-content: center;
  padding: .9rem 1rem;
}

.season-replay-readout div + div { border-left: 1px solid var(--line); }
.season-replay-readout span { color: var(--muted); font-size: .72rem; }
.season-replay-readout strong {
  color: var(--ink);
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
}

.season-replay-charts {
  display: grid;
  margin-top: 1rem;
  border: 1px solid var(--line);
  background: var(--surface);
}

.season-replay-charts figure {
  display: grid;
  grid-template-columns: minmax(140px, .28fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  margin: 0;
  padding: .75rem 1rem;
}

.season-replay-charts figure + figure { border-top: 1px solid var(--line); }
.season-replay-charts figcaption {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
}
.season-replay-charts svg {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: visible;
}
.season-replay-charts figure:last-child {
  grid-template-columns: minmax(140px, .28fr) minmax(0, 1fr);
}
.season-replay-event {
  grid-column: 2;
  margin: -.4rem 0 .25rem;
  color: var(--muted);
  font-size: .75rem;
}
.season-replay-axis { stroke: var(--line); stroke-width: 1; }
.season-replay-line {
  fill: none;
  stroke: var(--wine);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4;
}
.season-replay-line--rain { stroke: var(--rain); }
.season-replay-line--gdd { stroke: var(--heat); }
.season-replay-line--future { opacity: .16; stroke-width: 1.5; }
.season-replay-cursor { stroke: var(--ink); stroke-dasharray: 3 3; opacity: .7; }
.season-replay-marker {
  fill: var(--wine);
  stroke: var(--surface);
  stroke-width: 2;
}
.season-replay-marker--rain { fill: var(--rain); }
.season-replay-marker--gdd { fill: var(--heat); }
.season-replay-event-band { fill: var(--compare-b); opacity: .42; }
.season-replay-event-band.event--heat_episode { fill: var(--heat); }
.season-replay-event-band.event--dry_spell { fill: var(--warning); }
.season-replay-event-band.event--spring_frost { fill: var(--cool); }
.season-replay-event-band.event--harvest_rain { fill: var(--rain); }
.season-replay-event-band.is-active { opacity: 1; stroke: var(--ink); stroke-width: 1.5; }

@media (max-width: 850px) {
  .weather-watch-group header { display: block; }
  .weather-watch-group header p { margin-top: .25rem; text-align: left; }
  .vintage-standing { grid-template-columns: 1fr; }
  .vintage-standing-grid article:nth-child(odd) { border-left: 0; }
  .season-replay-readout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .season-replay-readout div:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .season-replay-readout div:nth-child(4) { border-top: 1px solid var(--line); }
}

@media (max-width: 650px) {
  .weather-watch-grid { grid-template-columns: 1fr; }
  .weather-watch-group:nth-child(even) { border-left: 0; }
  .weather-watch-group + .weather-watch-group { border-top: 1px solid var(--line); }
  .weather-watch-group li a { grid-template-columns: 1.5rem minmax(0, 1fr); }
  .weather-watch-value {
    grid-column: 2;
    justify-items: start;
    text-align: left;
  }
  .weather-watch-reading { justify-content: flex-start; }
  .vintage-standing-grid { grid-template-columns: 1fr; }
  .vintage-standing,
  .season-milestones,
  .season-replay { scroll-margin-top: 15rem; }
  .vintage-standing-grid article,
  .vintage-standing-grid article:nth-child(odd) { border-left: 0; }
  .vintage-standing-grid article + article { border-top: 1px solid var(--line); }
  .season-replay-heading { display: block; }
  .season-replay-heading > p { margin-top: .5rem; white-space: normal; }
  .season-replay-controls { grid-template-columns: 1fr; }
  .season-milestones-heading { display: block; }
  .season-milestones-heading > p { margin-top: .5rem; white-space: normal; }
  .milestone-scroll-controls { justify-content: space-between; }
  .milestone-scroll-controls button { flex: 1; }
  .milestone-calendar { grid-auto-columns: minmax(250px, calc(100vw - 4rem)); }
  .season-replay-charts figure,
  .season-replay-charts figure:last-child { grid-template-columns: 1fr; gap: .35rem; }
  .season-replay-event { grid-column: 1; }
}

/* Site-wide Crimson Monitor promotion. */
.brand {
  flex: 0 0 auto;
  gap: 0;
}

.brand .brand-logo {
  display: block;
  width: clamp(180px, 15vw, 225px);
  height: 42px;
  border: 0;
  border-radius: 0;
  background: url("./images/brand/wav-wordmark-dark.png") center / contain no-repeat;
  color: transparent;
  mix-blend-mode: normal;
}

html[data-aesthetic-theme="light"] .brand .brand-logo {
  background-image: url("./images/brand/wav-wordmark-light.png");
  mix-blend-mode: multiply;
}

.footer-mark.footer-brand-seal {
  width: 96px;
  height: 96px;
  border: 0;
  background: url("./images/brand/wav-seal-dark.png") center / contain no-repeat;
  color: transparent;
  mix-blend-mode: normal;
}

html[data-aesthetic-theme="light"] .footer-mark.footer-brand-seal {
  border: 0;
  background-image: url("./images/brand/wav-seal-light.png");
  color: transparent;
  mix-blend-mode: multiply;
}

body:not(.atlas-home) main {
  width: min(var(--layout-wide), calc(100% - (2 * var(--gutter))));
  margin-inline: auto;
}

h1,
h2,
h3,
h4,
.footer-title,
.comparison-selection-panel legend,
.year-nav strong {
  color: var(--ink);
  font-family: var(--font-display), ui-serif, serif;
}

h1 { font-weight: 600; }
h2 { font-weight: 700; }

body,
button,
input,
select,
.sampling-summary strong,
.metric-grid strong {
  font-family: var(--font-body), ui-sans-serif, system-ui, sans-serif;
}

.eyebrow,
.label,
.country,
.signal-strength,
.season-name,
.feature-kicker,
.region-card-country,
.vintage-lookup label,
.region-filters label,
.comparison-selection-panel > label {
  color: var(--wine);
  font-family: var(--font-body), ui-sans-serif, system-ui, sans-serif;
}

/* Form field labels use the same small-caps treatment but stay muted so they
   read as functional labels rather than section eyebrows. */
.vintage-lookup label,
.region-filters label,
.comparison-selection-panel > label { color: var(--muted); }

.lede,
.grape-index-hero .lede { color: var(--muted); }

.region-record-page .region-hero-copy .lede,
.region-record-page .region-hero-copy > p:not(.eyebrow) { color: var(--ink); }

input,
select,
button,
.clear-filters {
  border-color: var(--control-line);
  border-radius: 0;
  background: var(--surface);
  color: var(--ink);
}

button[type="submit"],
.comparison-form > button,
.vintage-lookup button,
.region-filters button {
  border-color: var(--wine);
  background: var(--wine);
  color: var(--theme-button-text);
}

button[type="submit"]:hover,
.comparison-form > button:hover,
.vintage-lookup button:hover,
.region-filters button:hover { filter: brightness(1.12); }

.breadcrumbs,
.section-heading > p,
.feature-meta,
.grape-card-meta,
.grape-aliases,
.window-note,
.grape-local-label { color: var(--muted); }

.section-heading { border-color: var(--line); }

.region-record-page .region-hero,
.grape-index-hero {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: 0 18px 55px var(--theme-shadow);
}

.region-record-page .region-hero-copy h1,
.grape-index-hero h1 { color: var(--ink); }

.region-record-page .region-hero > .fact-card {
  color: var(--ink);
  border-color: var(--line);
  border-left-color: var(--wine);
  background: var(--theme-panel-soft);
}

.region-record-page .region-hero-art { background: var(--theme-inverse); }

.region-record-page .region-hero-art::after {
  background: linear-gradient(180deg, rgb(28 8 13 / 8%), rgb(28 8 13 / 46%));
}

.region-record-page .region-hero-art img,
.grape-index-hero .home-hero-art img {
  filter: grayscale(.22) saturate(.72) contrast(1.05);
}

.region-mini-map svg,
.sampling-map svg,
.grape-map {
  border-color: var(--line);
  background: var(--theme-map);
}

.mini-map-ocean,
.grape-map .static-ocean { fill: var(--theme-map); }

.mini-map-region,
.grape-map .static-region path {
  fill: var(--wine);
  stroke: #f5c5d0;
}

.grape-map .static-world-map image {
  opacity: .58;
  filter: grayscale(.72) brightness(.62) contrast(1.04) sepia(.12) hue-rotate(315deg);
}

.grape-map .map-note {
  background: var(--theme-panel-soft);
  color: var(--muted);
}

.conditions-tabs,
.feature-card,
.chart-card,
.season-grid article,
.signal-grid article,
.comparison-selection-panel,
.comparison-context article,
.comparison-season-card,
.data-table,
.sampling-summary,
.editorial-references,
.grape-card,
.analog-card,
.event-timeline-list article {
  border-color: var(--line);
  border-radius: 0;
  background: var(--surface);
  box-shadow: none;
}

.conditions-tabs { box-shadow: 0 12px 40px var(--theme-shadow); }

.mode-toggle {
  border-color: var(--line);
  border-radius: 0;
  background: var(--theme-panel-muted);
}

.mode-toggle button { border-radius: 0; color: var(--muted); }

.mode-toggle button[aria-selected="true"] {
  background: var(--wine);
  color: var(--theme-button-text);
}

.metric-grid { border-color: var(--line); background: var(--surface); }
.metric-grid strong { color: var(--ink); }

.warning,
.status-panel--error,
.status-panel--stale {
  color: var(--warning);
  border-color: var(--warning);
  background: var(--warning-surface);
}

.tasting-card,
.technical-panel,
.caveat,
.sources,
.caveat-details,
.interpretation-section {
  border-color: var(--line);
  border-left-color: var(--wine);
  background: var(--theme-panel-soft);
}

.tasting-card .eyebrow,
.technical-panel summary,
.compact-details summary,
.sources summary,
.editorial-references summary,
.region-section-nav a,
.grape-card-action { color: var(--vine); }

.vintage-answer,
.outlook,
.sources-section,
.grape-detail-hero,
.compare-page .page-heading {
  background:
    radial-gradient(circle at 78% 28%, rgb(176 50 77 / 18%), transparent 22rem),
    linear-gradient(125deg, var(--theme-inverse), var(--theme-inverse-mid));
  color: var(--theme-inverse-copy);
}

.vintage-answer h3,
.outlook h2,
.sources-section h2,
.grape-detail-copy h1,
.grape-detail-hero .weather-questions-card h2,
.compare-page .page-heading h1 { color: #fff5f7; }

.vintage-answer .eyebrow,
.sources-section .eyebrow,
.grape-detail-hero .eyebrow,
.compare-page .page-heading .eyebrow { color: #ef8399; }

.outlook .eyebrow,
.outlook .fine-print,
.forecast-model,
.forecast-summary,
.forecast-period-label,
.forecast-period-comparison dt,
.forecast-period-comparison dd span,
.forecast-temperature small,
.inverse-details,
.forecast-label small,
.sources-section,
.grape-detail-hero,
.grape-detail-hero .lede,
.compare-page .page-heading .lede { color: var(--theme-inverse-copy); }

.sources-section .sources,
.grape-detail-hero .weather-questions-card {
  border-color: rgb(239 131 153 / 55%);
  background: rgb(255 255 255 / 7%);
}

.sources-section .sources summary,
.sources-section a,
.grape-detail-hero a { color: #f5c5d0; }

html[data-aesthetic-theme="light"] .region-hero-art figcaption a,
html[data-aesthetic-theme="dark"] .region-hero-art figcaption a { color: white; }

html[data-aesthetic-theme="light"] .sources-section a,
html[data-aesthetic-theme="dark"] .sources-section a { color: #f5c5d0; }

html[data-aesthetic-theme="light"] .grape-detail-hero .grape-aliases,
html[data-aesthetic-theme="dark"] .grape-detail-hero .grape-aliases { color: #f5c5d0; }

.region-section-nav {
  background: var(--theme-sticky);
  backdrop-filter: blur(10px);
}

.history-chart text { fill: var(--muted); }
.chart-axis { stroke: var(--line); }
.chart-zero { stroke: var(--muted); }
.chart-legend--rain { --chart-legend-color: var(--rain); }
.season-rain-line,
.climatology-rain-line { stroke: var(--rain); }
.season-chart-point.rain-point,
.rain-bar.wet { fill: var(--rain); }
.season-chart-point,
.chart-point { stroke: var(--surface); }
.rain-bar.dry { fill: #c88752; }

.chart-tooltip {
  border-color: var(--line);
  border-radius: 0;
  background: rgb(24 12 17 / 96%);
  color: #fff5f7;
  box-shadow: 0 .35rem 1.5rem var(--theme-shadow);
}

thead th { background: var(--surface); color: var(--ink); }
th,
td { border-color: var(--line); }
tr[aria-current="true"] { background: var(--theme-panel-highlight); }

.analogs-card,
.event-timeline {
  border-color: var(--line);
  background: var(--theme-panel-soft);
}

.analog-principal,
.event-evidence div {
  border-color: var(--wine);
  background: var(--theme-panel-muted);
}

.event-timeline-list::before { background: var(--line); }
.event-timeline-list article { border-left-color: var(--compare-b); }
.event-marker { background: var(--compare-b); }
.event--harvest_rain .event-marker { background: var(--surface); }

.anomaly-track { background: var(--theme-panel-muted); }

.grape-index-hero .home-hero-art::after {
  background: linear-gradient(180deg, transparent 38%, rgb(36 11 20 / 55%));
}

.grape-card:hover { border-top-color: var(--wine); }

.grape-map {
  color: var(--ink);
}

.grape-map figcaption,
.grape-map .geometry-key { color: var(--ink); }

.comparison-table-scroll { border-color: var(--line); background: var(--surface); box-shadow: none; }

.comparison-table thead,
.comparison-table thead th {
  background: var(--theme-inverse);
  color: #fff5f7;
}

.disclaimer-page .page-heading {
  max-width: 1120px;
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
  border-bottom: 1px solid var(--line);
}

.disclaimer-page .page-heading h1 {
  max-width: none;
  margin-bottom: 1.25rem;
  font-size: clamp(2.75rem, 4.5vw, 4.75rem);
  line-height: 1;
  text-wrap: pretty;
}

.disclaimer-page .page-heading .lede {
  max-width: 720px;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
}

.disclaimer-content {
  max-width: 980px;
  margin: 0 0 clamp(4rem, 8vw, 7rem);
}

.disclaimer-content > section {
  display: grid;
  grid-template-columns: minmax(180px, .34fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  padding: clamp(2rem, 5vw, 3.5rem) 0;
  border-bottom: 1px solid var(--line);
}

.disclaimer-content h2 {
  margin: 0;
  font-size: clamp(1.35rem, 2.5vw, 2rem);
  line-height: 1.05;
}

.disclaimer-content p {
  max-width: 68ch;
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.75;
}

.disclaimer-content p:last-child { margin-bottom: 0; }

.site-footer {
  align-items: center;
  border-color: var(--line);
}

@media (max-width: 700px) {
  .brand .brand-logo {
    width: 44px;
    height: 44px;
    background-image: url("./images/brand/wav-icon-dark.png");
    background-size: cover;
  }

  html[data-aesthetic-theme="light"] .brand .brand-logo {
    background-image: url("./images/brand/wav-icon-light.png");
  }

  body:not(.atlas-home) main {
    width: min(1280px, calc(100% - 1.5rem));
  }

  .footer-mark.footer-brand-seal {
    width: 88px;
    height: 88px;
  }

  .disclaimer-page .page-heading h1 {
    max-width: none;
    font-size: clamp(2rem, 9vw, 3rem);
  }

  .disclaimer-content > section {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* Final specificity layer for the reduced editorial layouts. */
.compare-page .page-heading,
.grape-detail-hero,
.vintage-answer,
.outlook,
.sources-section { background: var(--theme-inverse); }

.grape-index-hero {
  display: block;
  min-height: 0;
  max-width: none;
  margin: clamp(2rem, 4vw, 3.5rem) 0;
  padding: clamp(2rem, 5vw, 4rem);
}
.grape-index-hero h1 {
  max-width: none;
  margin-block: .5rem 1rem;
  font-size: clamp(2.75rem, 4.5vw, 4.75rem);
  line-height: 1;
  text-wrap: pretty;
}
.grape-index-hero .lede { max-width: 60ch; margin: 0; }

.region-record-page .region-hero--text {
  grid-template-areas: "copy facts";
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
  min-height: 0;
}
.region-record-page .region-hero--text > .fact-card {
  grid-area: facts;
  margin: clamp(2rem, 5vw, 4rem);
  margin-left: 0;
}

@media (max-width: 700px) {
  .header-inner {
    display: flex;
    min-height: 54px;
    padding-block: 0;
  }
  .header-actions {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    min-width: 0;
  }
  .primary-nav {
    display: flex;
    grid-column: auto;
    grid-row: auto;
    min-width: 0;
    border-top: 0;
  }
  .display-settings { flex: 0 0 auto; }
  .region-record-page .region-hero--text {
    display: block;
  }
  .region-record-page .region-hero--text > .fact-card {
    margin: 0 1.25rem 1.25rem;
  }
}

/* Compact region finder with a linked locator map. */
.region-catalog {
  margin-block: var(--space-section);
}
.region-catalog .section-heading {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-5);
}
.region-catalog .region-filters {
  margin-bottom: var(--space-6);
}
.region-catalog .region-list .region-card {
  min-height: 0;
}
.region-results-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 330px);
  gap: var(--space-5);
  align-items: start;
  background: transparent;
}
.region-locator {
  position: sticky;
  top: 78px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
}
.region-locator-heading {
  min-height: 104px;
  padding: 1rem 1.1rem .85rem;
  border-bottom: 1px solid var(--line);
}
.region-locator-heading .eyebrow,
.region-locator-heading h3,
.region-locator-heading p {
  margin: 0;
}
.region-locator-heading h3 {
  margin-top: .25rem;
  font-size: 1.15rem;
}
.region-locator-heading p:last-child {
  margin-top: .3rem;
  color: var(--muted);
  font-size: .82rem;
}
.region-locator-map {
  aspect-ratio: 2 / 1;
  background: var(--theme-map);
}
.region-locator-map .static-ocean { fill: var(--theme-map); }
.region-locator-map image {
  opacity: .5;
  filter: grayscale(.7) contrast(.9);
}
.region-locator-map .static-region {
  transition: opacity 120ms ease;
}
.region-locator-map .static-region path {
  fill: var(--wine);
  fill-opacity: .2;
  stroke: var(--wine);
  stroke-width: 1.2;
}
.region-locator-map .static-region circle {
  fill: var(--wine);
  stroke: var(--surface);
  stroke-width: 3;
}
.region-locator-map .static-region a:focus-visible {
  outline: none;
}
.region-locator-map .static-region:has(a:focus-visible) circle {
  stroke: var(--gold);
  stroke-width: 7;
}
.region-locator.has-active-region .static-region:not(.is-active) {
  opacity: .12;
}
.region-locator-map .static-region.is-active path {
  fill-opacity: .62;
  stroke-width: 2.5;
}
.region-locator-map .static-region.is-active circle {
  fill: var(--gold);
  stroke-width: 5;
}
.region-locator-note {
  margin: 0;
  padding: .65rem 1rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .75rem;
}
.region-locator-note span { color: var(--wine); }

@media (max-width: 900px) {
  .region-results-layout { grid-template-columns: 1fr; }
  .region-locator {
    position: static;
    order: -1;
    display: grid;
    grid-template-columns: minmax(180px, .55fr) minmax(0, 1fr);
  }
  .region-locator-heading {
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }
  .region-locator-note {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .region-catalog .section-heading {
    display: block;
  }
  .region-catalog .section-heading > p {
    margin-top: .65rem;
  }
  .region-locator { display: block; }
  .region-locator-heading {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}

/* Quieter reading hierarchy: fewer panels, smaller headlines, and plainer controls. */
body { background-image: none; }
html[data-aesthetic-theme="light"] body { background-image: none; }

.weather-hero-copy h1 {
  max-width: 18ch;
  font-size: clamp(3.4rem, 5.5vw, 5.75rem);
  line-height: .96;
  text-wrap: balance;
}

.region-catalog .section-heading h2 {
  max-width: none;
  font-size: clamp(2rem, 3vw, 3.25rem);
  line-height: 1.05;
}

.region-record-page .region-hero-copy h1 {
  max-width: none;
  font-size: clamp(2.75rem, 4.5vw, 4.75rem);
  line-height: 1;
  text-wrap: balance;
}

.grape-index-hero h1 {
  max-width: none;
  font-size: clamp(2.75rem, 4.5vw, 4.75rem);
  line-height: 1;
  text-wrap: pretty;
}

.compare-page .page-heading h1 {
  max-width: none;
  font-size: clamp(2.75rem, 4.5vw, 4.75rem);
  line-height: 1;
  text-wrap: pretty;
}

.compare-page .page-heading {
  padding: clamp(2.25rem, 4.5vw, 4rem);
}

.region-record-page .eyebrow {
  letter-spacing: .07em;
}

.region-record-page .region-hero > .fact-card {
  padding: 0 0 0 1.5rem;
  border: 0;
  border-left: 1px solid var(--line);
  background: transparent;
}

.region-facts {
  display: grid;
  gap: .75rem;
  margin: 0;
}

.region-facts > div {
  display: grid;
  grid-template-columns: minmax(84px, .62fr) minmax(0, 1.38fr);
  gap: 1rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--line);
}

.region-facts > div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.region-facts dt {
  color: var(--muted);
  font: 700 .75rem/1.3 var(--font-body), ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.region-facts dd {
  margin: 0;
  font-size: .9rem;
  line-height: 1.5;
}

.region-record-page .region-mini-map {
  margin-top: 1.1rem;
  padding-top: .9rem;
}

.region-record-page .region-mini-map svg {
  max-height: 150px;
}

.conditions-tabs {
  padding-inline: 0;
  border: 0;
  border-block: 1px solid var(--line);
  background: transparent;
  box-shadow: none;
}

.region-record-page .interpretation-section,
.region-record-page .season-milestones,
.region-record-page .season-replay,
.region-record-page .analogs-card,
.region-record-page .event-timeline {
  margin-block: clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
}

.region-record-page .season-milestones-heading,
.region-record-page .season-replay-heading {
  padding-bottom: .85rem;
}

.region-catalog .region-filters {
  padding: var(--space-5);
  border: 1px solid var(--line);
  background: var(--surface);
}

.clear-filters {
  padding-inline: .25rem;
  border-color: transparent;
  background: transparent;
  text-decoration: none;
}

.comparison-selection-panel {
  padding: 1rem 0 0;
  border: 0;
  border-top: 2px solid var(--compare-a);
  background: transparent;
}

.comparison-selection-panel:nth-child(2) {
  border-top: 2px solid var(--compare-b);
}

.weather-watch-group--single li a {
  grid-template-columns: minmax(0, 1fr) auto;
}

@media (max-width: 700px) {
  .weather-hero-copy h1 {
    max-width: none;
    font-size: clamp(2.65rem, 11.5vw, 3.75rem);
  }

  .region-record-page .region-hero-copy h1 {
    max-width: none;
    font-size: clamp(2.8rem, 13vw, 4rem);
  }

  .compare-page .page-heading h1 {
    max-width: none;
    font-size: clamp(2.65rem, 12vw, 3.65rem);
  }

  .grape-index-hero h1,
  .disclaimer-page .page-heading h1 {
    max-width: none;
  }

  .region-catalog .region-filters {
    padding: var(--space-4);
  }

  .region-record-page .region-hero > .fact-card,
  .region-record-page .region-hero--text > .fact-card {
    margin: 0 1.4rem 1.5rem;
    padding: 1.1rem 0 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .region-facts > div {
    grid-template-columns: 90px minmax(0, 1fr);
  }

  .weather-watch-group--single li a {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .weather-watch-group--single .weather-watch-value {
    grid-column: auto;
    justify-items: end;
    text-align: right;
  }
}

/* Follow control: sits below the h1 as a quiet secondary action rather than
   inline with display type. "Follow" is muted until hovered; "Following"
   uses the link color to confirm active status and shifts to wine on hover
   to hint that clicking will unfollow. */
.region-title-line { display: block; }

.region-title-line .follow-control {
  display: inline-block;
  margin: .3rem 0 .65rem;
}

.region-title-line .follow-control button,
.region-title-line a.follow-control {
  min-height: 0;
  padding: .2rem 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-body), ui-sans-serif, system-ui, sans-serif;
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.region-title-line .follow-control button.is-following {
  color: var(--vine);
}

.region-title-line .follow-control button:hover,
.region-title-line a.follow-control:hover {
  color: var(--vine);
  background: transparent;
}

.region-title-line .follow-control button.is-following:hover { color: var(--wine); }

/* Climate atlas: a single map/table reading surface, with color reserved for
   signed weather change rather than decorative framing. */
.climate-heading {
  max-width: 1120px;
  padding: clamp(3rem, 7vw, 5.5rem) 0 1rem;
}

.climate-heading h1 {
  max-width: none;
  font-size: clamp(3rem, 7vw, 5.8rem);
  text-wrap: pretty;
}

.last-updated {
  color: var(--muted);
  font-size: .85rem;
}

.climate-atlas {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.climate-controls {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: end;
  margin-bottom: 1.5rem;
}

.climate-controls label {
  display: grid;
  gap: .25rem;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
}

.climate-atlas-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(340px, .8fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.climate-atlas-layout > *,
.climate-ranking,
.climate-ranking .table-scroll { min-width: 0; }
.climate-ranking .table-scroll { max-width: 100%; overflow-x: auto; }

.climate-map {
  position: sticky;
  top: 1rem;
  margin: 0;
  border: 1px solid var(--line);
  background: #dce5df;
}

.climate-map svg {
  display: block;
  width: 100%;
}

.climate-map-region path,
.climate-map-region circle {
  fill: var(--climate-color, var(--muted));
  stroke: white;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.climate-map-region circle { stroke-width: 2.5; }
.climate-map-region.is-active path,
.climate-map-region.is-active circle {
  stroke: var(--gold);
  stroke-width: 4;
}

.climate-map figcaption {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .75rem;
  align-items: center;
  padding: .65rem .85rem;
  border-top: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-size: .75rem;
}

.climate-scale {
  height: .7rem;
  background: linear-gradient(90deg, #3e7190, #eee8dd 50%, #a33a34);
}

.climate-ranking h2 { margin-bottom: .3rem; font-size: 1.8rem; }
.climate-ranking > p { color: var(--muted); }
.climate-ranking table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: .84rem; }
.climate-ranking th,
.climate-ranking td { padding: .7rem .45rem; border-bottom: 1px solid var(--line); text-align: right; }
.climate-ranking th:nth-child(1) { width: 42%; }
.climate-ranking th:nth-child(2) { width: 17%; }
.climate-ranking th:nth-child(3) { width: 30%; }
.climate-ranking th:nth-child(4) { width: 11%; }
.climate-ranking th:first-child { text-align: left; }
.climate-ranking tbody th small { display: block; color: var(--muted); font-weight: 400; }
.climate-ranking tr.trend-uncertain { color: var(--muted); }
.climate-ranking tr.is-active { background: color-mix(in srgb, var(--gold) 18%, transparent); }

.projection-intro {
  display: grid;
  grid-template-columns: minmax(220px, .6fr) minmax(0, 1.4fr);
  gap: 2rem;
  padding-block: 2rem;
  border-block: 1px solid var(--line);
}

.projection-intro h2 { margin-bottom: 0; }
.projection-controls-group {
  display: grid;
  gap: 1rem;
  min-width: 0;
}
.projection-controls-group > p {
  max-width: 72ch;
  margin: 0;
  color: var(--muted);
}
.technical-detail { margin-bottom: 5rem; border-top: 1px solid var(--line); }
.technical-detail > summary { padding: 1.25rem 0; cursor: pointer; font-weight: 750; }
.technical-detail > div { max-width: 78ch; padding-bottom: 2rem; }
.technical-detail h2 { margin-top: 2rem; font-size: 1.45rem; }

.region-climate,
.region-projections {
  margin-block: clamp(2rem, 4vw, 3.5rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--line);
}

.region-climate-panel > .section-heading {
  margin-bottom: 0;
}

.region-climate-panel > .section-heading > div {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
}

.region-climate-panel > .section-heading h2 {
  font-size: clamp(2rem, 4vw, 3.2rem);
}

.projection-period-table {
  min-width: 600px;
}
.projection-period-table th:first-child { width: 22%; }

.region-climate .section-heading h3,
.region-projections h3 { font-size: clamp(1.7rem, 3vw, 2.35rem); }
.climate-trend-lede { max-width: 72ch; font-size: 1.12rem; }
.climate-trajectory {
  margin: 1.5rem 0;
  padding-block: 1rem;
  border-block: 1px solid var(--line);
}
.climate-trajectory figcaption {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.1rem 0 .35rem;
}
.climate-trajectory figcaption span { color: var(--muted); }
.climate-chart-shell { width: 100%; overflow: hidden; }
.climate-chart-scroll-hint { display: none; }
.climate-trajectory svg { display: block; width: 100%; height: auto; }
.climate-variable-selector {
  margin: 0;
  padding: 0;
  border: 0;
}
.climate-variable-selector legend {
  margin-bottom: .45rem;
  color: var(--muted);
  font-size: .75rem;
  font-weight: 750;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.climate-variable-selector > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block: 1px solid var(--line);
}
.climate-variable-selector label {
  display: flex;
  gap: .5rem;
  align-items: center;
  min-height: 46px;
  padding: .55rem .7rem;
  border-right: 1px solid var(--line);
  cursor: pointer;
}
.climate-variable-selector label:nth-child(3n) { border-right: 0; }
.climate-variable-selector label:nth-child(n + 4) { border-top: 1px solid var(--line); }
.climate-variable-selector label:has(input:checked) {
  background: color-mix(in srgb, var(--wine) 8%, transparent);
  color: var(--wine);
  font-weight: 750;
}
.climate-variable-selector input {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--wine);
}
.climate-projection-controls {
  display: grid;
  gap: .9rem;
  margin-top: 1rem;
}
.climate-series-selector {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.climate-series-selector legend {
  margin-bottom: .4rem;
  color: var(--muted);
  font-size: .75rem;
  font-weight: 750;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.climate-series-selector > div {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1rem;
}
.climate-series-selector label {
  display: flex;
  gap: .4rem;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
  font-size: .88rem;
  line-height: 1.35;
}
.climate-series-selector input {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  min-height: 0;
  margin: 0;
  padding: 0;
  accent-color: var(--wine);
}
.climate-projection-key {
  margin: 0;
  color: var(--muted);
  font-size: .85rem;
}
.climate-projection-key p { margin: 0; }
.climate-projection-key ul {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1rem;
  margin: .45rem 0 0;
  padding: 0;
  list-style: none;
}
.climate-projection-key li { display: flex; gap: .4rem; align-items: center; }
.climate-key-range {
  display: inline-block;
  width: 1.8rem;
  height: .65rem;
  margin-right: .35rem;
  border-top: 2px solid #3e7190;
  background: color-mix(in srgb, #3e7190 20%, transparent);
  vertical-align: middle;
}
.climate-key-line {
  display: inline-block;
  width: 1.8rem;
  border-top: 2px solid;
}
.climate-key-line--ssp126 { border-color: #3e7190; }
.climate-key-line--ssp245 { border-color: #8a6a32; }
.climate-key-line--ssp370 { border-color: #7d3c66; }
.climate-key-line--weighted { border-color: #8a6a32; }
.climate-measure-definition {
  width: 100%;
  margin: .8rem 0 0;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.55;
}
.climate-measure-definition strong { color: var(--ink); }
.climate-axis-caption,
.climate-fit-equation,
.climate-x-label,
.climate-y-label {
  fill: var(--muted);
  font-family: var(--font-body), ui-sans-serif, system-ui, sans-serif;
}
.climate-axis-caption { font-size: 11px; font-weight: 700; }
.climate-fit-equation { fill: var(--ink); font-size: 10.5px; font-weight: 650; }
.climate-x-label,
.climate-y-label { font-size: 10px; }
.climate-grid-line {
  stroke: var(--line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.climate-zero-line {
  stroke: color-mix(in srgb, var(--ink) 48%, transparent);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}
.climate-observed-line {
  fill: none;
  stroke: #b84b30;
  stroke-linejoin: round;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.climate-projection-range {
  fill: color-mix(in srgb, #3e7190 20%, transparent);
  stroke: none;
}
.climate-projection-median {
  fill: none;
  stroke: #3e7190;
  stroke-linejoin: round;
  stroke-width: 2.2;
  vector-effect: non-scaling-stroke;
}
.climate-projection-median--ssp126 { stroke: #3e7190; }
.climate-projection-median--ssp245 { stroke: #8a6a32; }
.climate-projection-median--ssp370 { stroke: #7d3c66; }
.climate-projection-median--weighted { stroke: #8a6a32; }
.climate-projection-median--historical { stroke: #5b7180; }
.climate-projection-divider {
  stroke: color-mix(in srgb, #3e7190 65%, transparent);
  stroke-dasharray: 3 4;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.climate-projection-label {
  fill: #3e7190;
  font-family: var(--font-body), ui-sans-serif, system-ui, sans-serif;
  font-size: 9.5px;
  font-weight: 700;
}
.climate-observed-point {
  fill: var(--surface);
  stroke: var(--wine);
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
}
.climate-observed-year {
  cursor: crosshair;
  outline: none;
}
.climate-projection-year { cursor: crosshair; outline: none; }
.climate-year-hover-band {
  fill: transparent;
  pointer-events: all;
}
.climate-year-guide {
  stroke: color-mix(in srgb, var(--wine) 42%, transparent);
  stroke-width: 1;
  opacity: 0;
  pointer-events: none;
  vector-effect: non-scaling-stroke;
}
.climate-observed-year:hover .climate-year-guide,
.climate-observed-year:focus .climate-year-guide,
.climate-observed-year.is-selected .climate-year-guide { opacity: 1; }
.climate-observed-year:hover .climate-observed-point,
.climate-observed-year:focus .climate-observed-point,
.climate-observed-year.is-selected .climate-observed-point {
  r: 5px;
  fill: var(--gold);
  stroke: var(--ink);
  stroke-width: 2.2;
}
.climate-projection-year:hover .climate-year-guide,
.climate-projection-year:focus .climate-year-guide,
.climate-projection-year.is-selected .climate-year-guide { opacity: 1; }
.climate-fit-line {
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-dasharray: 7 6;
  opacity: .82;
  vector-effect: non-scaling-stroke;
}
.climate-metric-list { margin: 1.5rem 0 0; border-top: 1px solid var(--line); }
.climate-metric-list > div {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(240px, 1.25fr);
  gap: 1rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--line);
}
.climate-metric-list dd { margin: 0; text-align: right; font-weight: 700; }
.climate-metric-list dd small { display: block; color: var(--muted); font-weight: 400; }

@media (max-width: 850px) {
  .climate-atlas-layout { grid-template-columns: minmax(0, 1fr); }
  .climate-map { position: static; }
  .projection-intro { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .conditions-tabs .mode-toggle {
    display: flex;
    width: 100%;
  }
  .conditions-tabs .mode-toggle button {
    flex: 1;
    padding-inline: .35rem;
    line-height: 1.2;
    white-space: normal;
  }
  .climate-controls { display: grid; grid-template-columns: 1fr; }
  .climate-controls select,
  .climate-controls button { width: 100%; }
  .climate-variable-selector > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .climate-variable-selector label,
  .climate-variable-selector label:nth-child(3n) { border-right: 1px solid var(--line); }
  .climate-variable-selector label:nth-child(2n) { border-right: 0; }
  .climate-variable-selector label:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .climate-projection-key ul { display: grid; }
  .climate-trajectory figcaption { display: grid; }
  .climate-chart-scroll-hint { display: block; }
  .climate-chart-shell { overflow-x: auto; }
  .climate-trajectory svg { width: 700px; max-width: none; }
  .climate-metric-list > div { grid-template-columns: 1fr; }
  .climate-metric-list dd { text-align: left; }
}

/* Primary titles should use the width their page layout provides. Reading-copy
   measures remain capped separately; these headings should not wrap early just
   because an older hero treatment assigned them a character-based width. */
.page-heading h1,
.weather-hero-copy h1,
.region-record-page .region-hero-copy h1,
.grape-index-hero h1,
.grape-detail-copy h1,
.compare-page .page-heading h1,
.climate-heading h1 {
  max-width: none;
  text-wrap: pretty;
}

@media (max-width: 700px) {
  .page-heading h1,
  .weather-hero-copy h1,
  .region-record-page .region-hero-copy h1,
  .grape-index-hero h1,
  .grape-detail-copy h1,
  .compare-page .page-heading h1,
  .climate-heading h1 {
    font-size: clamp(2rem, 9vw, 3rem);
    line-height: 1.04;
  }

  .grape-index-hero {
    padding-inline: 1.25rem;
  }
}

/* Comparison and long-name readability fixes. The primary comparison table
   remains horizontally scrollable when needed, but grows to its full height. */
.comparison-results > .section-heading h2 {
  font-size: clamp(1.6rem, 2.4vw, 2.35rem);
  line-height: 1.16;
  text-wrap: pretty;
}

.comparison-result-title {
  display: grid;
  gap: .28em;
}

.comparison-result-title > span {
  display: block;
}

.comparison-result-title__versus {
  color: var(--muted);
  font-family: var(--font-body), ui-sans-serif, system-ui, sans-serif;
  font-size: .52em;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .04em;
  text-align: center;
}

.comparison-table-scroll {
  max-height: none;
  overflow-x: auto;
}

.comparison-season-card { min-width: 0; }
.season-table-scroll {
  max-width: 100%;
  overflow-x: auto;
}

.region-list .region-card h3 { line-height: 1.35; }
.region-record-page .region-hero-copy h1 { line-height: 1.1; }

.climate-trend-lede { max-width: none; }

.sampling-disclosure {
  padding-block: 0;
  border-top: 1px solid var(--line);
}

.sampling-disclosure > summary {
  padding: 1.25rem 0;
  cursor: pointer;
}

.sampling-disclosure > summary .eyebrow {
  display: block;
  margin: .35rem 0 0;
}

.sampling-disclosure-title {
  display: inline;
  color: var(--ink);
  font: 700 clamp(1.55rem, 3vw, 2.2rem)/1.2 var(--font-display), ui-serif, serif;
}

.sampling-disclosure[open] > summary {
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

.sampling-disclosure-body { padding-bottom: 2rem; }

.vintage-answer h3 {
  max-width: none;
  text-wrap: pretty;
}

.comparison-variable-charts {
  margin-block: clamp(2.5rem, 5vw, 4rem);
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-block: 1px solid var(--line);
}

.comparison-season-progress-heading {
  display: grid;
  grid-template-columns: minmax(220px, .65fr) minmax(0, 1.35fr);
  gap: 1.5rem;
  align-items: baseline;
  margin-bottom: 1.5rem;
}

.comparison-season-progress-heading h3,
.comparison-season-progress-heading p { margin: 0; }

.comparison-season-progress-heading h3 {
  font-size: clamp(1.7rem, 3vw, 2.35rem);
}

.comparison-season-progress-heading p {
  max-width: 68ch;
  color: var(--muted);
}

.comparison-badge--b { background: var(--compare-b); }

.comparison-relative,
.comparison-value,
.comparison-difference { display: block; }

.comparison-relative {
  font-size: .9rem;
  font-weight: 800;
}

.comparison-relative--warm,
.comparison-relative--dry { color: var(--heat); }

.comparison-relative--cool,
.comparison-relative--wet { color: var(--cool); }

.comparison-relative--neutral,
.comparison-difference { color: var(--muted); }

.comparison-table .comparison-value { margin-top: .08rem; }

.comparison-difference {
  margin-top: .12rem;
  font-size: .78rem;
}

.comparison-chart-legend { gap: .75rem 1.5rem; margin-bottom: .75rem; }
.comparison-chart-legend span::before { display: none; }

.comparison-chart-key b {
  display: inline-grid;
  width: 1.35rem;
  height: 1.35rem;
  place-items: center;
  border-radius: 50%;
  background: var(--compare-a);
  color: white;
  font-size: .72rem;
}

.comparison-chart-key--b b { background: var(--compare-b); }

.comparison-chart-key::after {
  width: 1.8rem;
  border-top: 3px solid var(--compare-a);
  content: "";
}

.comparison-chart-key--b::after {
  border-top-color: var(--compare-b);
  border-top-style: dashed;
}

.comparison-line-charts { margin-top: 0; }

.comparison-series {
  fill: none;
  stroke: var(--compare-a);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.comparison-series--b {
  stroke: var(--compare-b);
  stroke-dasharray: 8 6;
}

.comparison-chart-point { cursor: crosshair; outline: none; }
.comparison-chart-point--a circle { fill: var(--compare-a); stroke: var(--surface); stroke-width: 1.25; }
.comparison-chart-point--b rect { fill: var(--compare-b); stroke: var(--surface); stroke-width: 1.25; }
.comparison-chart-point:focus-visible circle,
.comparison-chart-point:focus-visible rect { stroke: var(--gold); stroke-width: 4; }

.comparison-line-data h4 { margin: 1rem 0 .4rem; }
.comparison-line-data .table-scroll { margin-top: 0; }

@media (max-width: 700px) {
  .region-record-page .region-hero-copy h1 { line-height: 1.12; }

  .comparison-season-progress-heading { grid-template-columns: minmax(0, 1fr); }
}

/* Visit calendar: a separate forecast source followed by historical evidence. */
.visit-planner-panel {
  width: 100%;
  min-width: 0;
  padding-block: clamp(1.5rem, 4vw, 3rem);
}

.visit-heading .section-heading,
.visit-heading > div,
.visit-heading p { max-width: var(--measure-reading); }

.visit-forecast {
  margin-block: 2rem 3rem;
  padding-block: 1.5rem;
  border-block: 1px solid var(--line);
}

.visit-subheading {
  display: flex;
  gap: 1rem 2rem;
  align-items: end;
  justify-content: space-between;
}

.visit-subheading h3 { margin-bottom: 0; }
.visit-subheading a { font-weight: 700; }

.visit-forecast-meta,
.visit-method-note,
.visit-unavailable {
  max-width: var(--measure-reading);
  color: var(--muted);
}

.visit-forecast-meta { margin: .75rem 0 1rem; font-size: .88rem; }
.visit-forecast-scroll { width: 100%; min-width: 0; max-width: 100%; overflow-x: auto; }
.visit-forecast-scroll:focus-visible,
.visit-chart-scroll:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.visit-forecast-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.visit-forecast-table th,
.visit-forecast-table td {
  padding: .55rem .65rem;
  border-bottom: 1px solid var(--line);
  text-align: center;
  white-space: nowrap;
}

.visit-forecast-table th:first-child { text-align: left; }
.visit-forecast-table thead th { color: var(--muted); font-size: .78rem; }
.visit-forecast-table thead span,
.visit-forecast-table thead time { display: block; }
.visit-forecast-table thead span { color: var(--ink); font-weight: 800; }
.visit-forecast-table tbody th { color: var(--muted); font-size: .82rem; }

.visit-extrema {
  max-width: var(--measure-reading);
  margin-bottom: 3rem;
  padding-block: 1rem;
  border-block: 1px solid var(--line);
  line-height: 1.7;
}

.visit-charts { display: grid; width: 100%; min-width: 0; gap: 3rem; }
.visit-chart { width: 100%; min-width: 0; max-width: 100%; margin: 0; }

.visit-chart figcaption {
  display: flex;
  gap: .5rem 1.5rem;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: .75rem;
}

.visit-chart figcaption strong {
  font-family: var(--font-display), serif;
  font-size: 1.2rem;
}

.visit-chart figcaption span,
.visit-chart-key { color: var(--muted); font-size: .85rem; }

.visit-chart-key {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  margin: 0 0 .5rem;
}

.visit-chart-key span { display: inline-flex; gap: .45rem; align-items: center; }
.visit-chart-key span::before { width: 1.6rem; border-top: 3px solid; content: ""; }
.visit-chart-key .visit-key-high::before { border-color: var(--heat); }
.visit-chart-key .visit-key-low::before { border-color: var(--cool); }
.visit-chart-key .visit-key-range::before { border: 0; height: .55rem; background: var(--muted); opacity: .3; }

.visit-chart-scroll { width: 100%; min-width: 0; max-width: 100%; overflow: hidden; }
.visit-chart svg { display: block; width: 100%; min-width: 860px; }
.visit-grid-line { stroke: var(--line); stroke-width: 1; }
.visit-axis { stroke: var(--muted); stroke-width: 1.25; }
.visit-y-label,
.visit-x-label { fill: var(--muted); font: 13px var(--font-body), sans-serif; }
.visit-y-label [data-unit-value] { pointer-events: none; }

.visit-range-band { fill: var(--muted); opacity: .16; }
.visit-range-band--low { opacity: .1; }

.visit-temperature-line {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.visit-temperature-line--high { stroke: var(--heat); }
.visit-temperature-line--low { stroke: var(--cool); }
.visit-temperature-dot--high { fill: var(--heat); }
.visit-temperature-dot--low { fill: var(--cool); }

.visit-chart-target { cursor: crosshair; outline: none; }
.visit-target-hit { fill: transparent; }
.visit-chart-target:focus-visible .visit-target-hit { stroke: var(--gold); stroke-width: 3; }
.visit-chart-target:focus-visible .visit-temperature-dot { stroke: var(--gold); stroke-width: 3; }
.visit-rain-bar { fill: var(--rain); opacity: .82; }

.visit-data-table { margin-top: 3rem; }
.visit-data-table table { min-width: 940px; font-variant-numeric: tabular-nums; }
.visit-data-table tbody th { white-space: nowrap; }
.visit-method-note { margin-top: 1rem; }
.visit-scroll-hint { display: none; }

@media (max-width: 700px) {
  .conditions-tabs .mode-toggle {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .conditions-tabs .mode-toggle button { min-height: 44px; }
  .visit-subheading,
  .visit-chart figcaption { display: grid; align-items: start; }
  .visit-chart-scroll { overflow-x: auto; }
  .visit-chart svg { width: 860px; max-width: none; }
  .visit-scroll-hint { display: block; }
}