:root {
      color-scheme: light;
      --ink: #14252b;
      --muted: #5d6d72;
      --line: #dbe4e6;
      --line-strong: #bdcbce;
      --paper: #ffffff;
      --panel: #f5f8f8;
      --teal: #0b6b70;
      --teal-mid: #2d8a8e;
      --teal-soft: #e7f2f2;
      --navy: #183f52;
      --amber: #8a6823;
      --amber-soft: #f7f2e6;
      --amber-line: #dfd0a8;
      --radius: 14px;
      --shadow: 0 14px 38px rgba(18, 48, 58, 0.07);
    }

    * { box-sizing: border-box; }

    html {
      scroll-behavior: smooth;
      background: var(--paper);
    }

    body {
      margin: 0;
      color: var(--ink);
      background: var(--paper);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-size: 16px;
      line-height: 1.55;
      -webkit-font-smoothing: antialiased;
    }

    button, input { font: inherit; }

    button, a, input { -webkit-tap-highlight-color: transparent; }

    a { color: inherit; }

    .skip-link {
      position: fixed;
      top: 12px;
      left: 12px;
      z-index: 100;
      padding: 10px 14px;
      border-radius: 8px;
      color: #fff;
      background: var(--navy);
      transform: translateY(-160%);
    }

    .skip-link:focus { transform: translateY(0); }

    .shell {
      width: min(1160px, calc(100% - 48px));
      margin-inline: auto;
    }

    .site-header {
      border-bottom: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.96);
    }

    .header-row {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 36px;
      padding: 24px 0 22px;
    }

    .brand-lockup {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: max-content;
    }

    .brand-mark {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border: 1px solid #a9c9cb;
      border-radius: 50%;
      color: var(--teal);
      background: var(--teal-soft);
      font-weight: 750;
      letter-spacing: -0.04em;
    }

    .brand-title {
      font-size: 1.08rem;
      font-weight: 730;
      letter-spacing: -0.02em;
    }

    .brand-place {
      color: var(--muted);
      font-size: 0.9rem;
    }

    .source-line {
      max-width: 650px;
      color: var(--muted);
      font-size: 0.9rem;
      text-align: right;
    }

    .source-line strong {
      color: var(--ink);
      font-weight: 650;
    }

    main { padding-bottom: 72px; }

    .overview {
      display: grid;
      grid-template-columns: minmax(0, 1.55fr) minmax(290px, 0.75fr);
      gap: 48px;
      align-items: end;
      padding: 58px 0 42px;
    }

    .eyebrow {
      margin: 0 0 9px;
      color: var(--teal);
      font-size: 0.79rem;
      font-weight: 760;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    h1, h2, h3, p { margin-top: 0; }

    h1 {
      max-width: 720px;
      margin-bottom: 20px;
      font-size: clamp(2.35rem, 5vw, 4.45rem);
      line-height: 0.98;
      letter-spacing: -0.058em;
    }

    h2 {
      margin-bottom: 9px;
      font-size: clamp(1.55rem, 2.4vw, 2.15rem);
      line-height: 1.16;
      letter-spacing: -0.035em;
    }

    h3 {
      margin-bottom: 8px;
      font-size: 1.03rem;
      line-height: 1.3;
      letter-spacing: -0.015em;
    }

    .lede {
      max-width: 660px;
      margin-bottom: 0;
      color: var(--muted);
      font-size: 1.06rem;
    }

    .plain-summary {
      grid-column: 1 / -1;
      max-width: 940px;
      margin-top: 4px;
      padding: 22px 24px;
      border-left: 4px solid var(--teal);
      border-radius: 0 12px 12px 0;
      color: #294047;
      background: var(--teal-soft);
      font-size: 1.03rem;
      line-height: 1.7;
    }

    .plain-summary strong { color: var(--ink); font-weight: 720; }

    .overview-facts {
      margin: 0;
      border-top: 1px solid var(--line-strong);
    }

    .overview-facts > div {
      display: grid;
      grid-template-columns: 132px 1fr;
      gap: 14px;
      padding: 13px 0;
      border-bottom: 1px solid var(--line);
    }

    dt {
      color: var(--muted);
      font-size: 0.88rem;
    }

    dd {
      margin: 0;
      font-weight: 650;
      text-align: right;
    }

    .section {
      padding: 48px 0;
      border-top: 1px solid var(--line);
    }

    .section-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 28px;
      margin-bottom: 26px;
    }

    .section-head p {
      max-width: 650px;
      margin-bottom: 0;
      color: var(--muted);
    }

    .summary-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
    }

    .metric-card {
      min-height: 150px;
      padding: 24px 22px;
      border: 1px solid var(--line);
      border-top: 3px solid var(--teal-mid);
      border-radius: var(--radius);
      background: #fff;
      box-shadow: var(--shadow);
    }

    .metric-card.exceedance { border-top-color: var(--amber); }

    .metric-value {
      display: block;
      margin-bottom: 24px;
      font-size: clamp(2rem, 3vw, 2.85rem);
      font-weight: 730;
      line-height: 1;
      letter-spacing: -0.055em;
      font-variant-numeric: tabular-nums;
    }

    .metric-label {
      color: var(--muted);
      font-size: 0.92rem;
      font-weight: 620;
    }

    .summary-note {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 22px;
      margin: 18px 2px 0;
      color: var(--muted);
      font-size: 0.92rem;
    }

    .summary-note strong { color: var(--ink); }

    .know-panel {
      padding: 34px;
      border-radius: calc(var(--radius) + 2px);
      background: var(--navy);
      color: #fff;
    }

    .know-panel .eyebrow { color: #94d6d7; }

    .know-panel > div:first-child {
      display: grid;
      grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
      gap: 40px;
      align-items: end;
      padding-bottom: 27px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }

    .know-panel h2 { margin-bottom: 0; color: #fff; }

    .know-panel p {
      margin-bottom: 0;
      color: #c7d9dd;
    }

    .know-points {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 26px;
      padding-top: 27px;
    }

    .know-point {
      position: relative;
      padding-left: 18px;
      color: #d9e7e9;
      font-size: 0.95rem;
    }

    .know-point::before {
      content: "";
      position: absolute;
      top: 0.52em;
      left: 0;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #77c2c4;
    }

    .comparison-section { padding-top: 44px; }

    .comparison-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--line);
      gap: 1px;
    }

    .comparison-card {
      padding: 22px;
      background: #fff;
    }

    .comparison-label {
      margin-bottom: 20px;
      color: var(--muted);
      font-size: 0.82rem;
      font-weight: 690;
    }

    .comparison-values {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .comparison-values span {
      display: block;
      color: var(--muted);
      font-size: 0.76rem;
    }

    .comparison-values strong {
      display: block;
      margin-top: 2px;
      color: var(--ink);
      font-size: 1.35rem;
      line-height: 1.15;
      letter-spacing: -0.035em;
      font-variant-numeric: tabular-nums;
    }

    .comparison-delta {
      display: inline-block;
      margin-top: 16px;
      padding: 4px 7px;
      border-radius: 6px;
      color: var(--teal);
      background: var(--teal-soft);
      font-size: 0.76rem;
      font-weight: 690;
    }

    .comparison-copy {
      max-width: 850px;
      margin: 18px 2px 0;
      color: var(--muted);
    }

    .year-comparison {
      margin-top: 34px;
      padding-top: 32px;
      border-top: 1px solid var(--line);
    }

    .year-comparison .section-head { margin-bottom: 18px; }

    .year-comparison h3 {
      margin-bottom: 0;
      font-size: 1.35rem;
    }

    .fact-panel {
      display: grid;
      grid-template-columns: 0.7fr 1.3fr;
      gap: 42px;
      padding: 32px;
      border-radius: var(--radius);
      background: var(--panel);
    }

    .fact-panel p {
      margin-bottom: 0;
      color: var(--muted);
    }

    .fact-list {
      margin: 0;
      padding: 0;
      list-style: none;
      counter-reset: facts;
    }

    .fact-list li {
      position: relative;
      min-height: 36px;
      padding: 7px 0 14px 50px;
      border-bottom: 1px solid var(--line);
      counter-increment: facts;
    }

    .fact-list li + li { padding-top: 14px; }

    .fact-list li::before {
      content: counter(facts, decimal-leading-zero);
      position: absolute;
      left: 0;
      top: 7px;
      color: var(--teal);
      font-size: 0.76rem;
      font-weight: 760;
      letter-spacing: 0.06em;
    }

    .exceedance-feature {
      padding: 34px;
      border: 1px solid var(--amber-line);
      border-radius: calc(var(--radius) + 2px);
      background: var(--amber-soft);
    }

    .exceedance-feature .section-head { margin-bottom: 22px; }

    .parameter-alert-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    .parameter-alert {
      padding: 22px;
      border: 1px solid rgba(138, 104, 35, 0.28);
      border-radius: 11px;
      background: rgba(255, 255, 255, 0.72);
    }

    .parameter-alert h3 { min-height: 2.6em; }

    .parameter-test-count {
      margin: -2px 0 18px;
      color: var(--muted);
      font-size: 0.88rem;
    }

    .alert-count {
      display: flex;
      align-items: baseline;
      gap: 8px;
      margin: 20px 0;
      color: var(--amber);
    }

    .alert-count strong {
      font-size: 2.1rem;
      line-height: 1;
      letter-spacing: -0.04em;
    }

    .alert-count span { color: var(--muted); font-size: 0.86rem; }

    .proportion-label {
      display: flex;
      justify-content: space-between;
      gap: 18px;
      margin: 0 0 7px;
      color: var(--muted);
      font-size: 0.78rem;
    }

    .proportion-track {
      height: 7px;
      overflow: hidden;
      margin-bottom: 20px;
      border-radius: 999px;
      background: #e8dfca;
    }

    .proportion-fill {
      width: 100%;
      height: 100%;
      border-radius: inherit;
      background: var(--amber);
      transform-origin: left center;
    }

    .data-pairs {
      display: grid;
      gap: 8px;
      margin: 0;
    }

    .data-pairs > div {
      display: flex;
      justify-content: space-between;
      gap: 18px;
      padding-top: 8px;
      border-top: 1px solid rgba(138, 104, 35, 0.18);
    }

    .data-pairs dt { font-size: 0.78rem; }
    .data-pairs dd { font-size: 0.87rem; }

    .explainer-placeholder {
      margin-top: 18px;
      padding-top: 14px;
      border-top: 1px dashed rgba(138, 104, 35, 0.35);
    }

    .explainer-placeholder strong {
      display: block;
      color: #655427;
      font-size: 0.88rem;
    }

    .explainer-placeholder span {
      color: var(--muted);
      font-size: 0.78rem;
    }

    .timeline-shell {
      padding: 24px;
      border: 1px solid var(--amber-line);
      border-radius: var(--radius);
      background: #fffdf8;
    }

    .timeline-readout {
      min-height: 76px;
      display: grid;
      grid-template-columns: minmax(180px, 1fr) repeat(3, minmax(110px, auto));
      gap: 20px;
      align-items: center;
      margin-bottom: 20px;
      padding: 14px 16px;
      border-radius: 10px;
      background: var(--amber-soft);
    }

    .timeline-readout strong {
      display: block;
      color: var(--ink);
      font-size: 0.92rem;
    }

    .timeline-readout span {
      display: block;
      color: var(--muted);
      font-size: 0.78rem;
    }

    .timeline-scroll { overflow-x: auto; }

    .timeline-scroll svg {
      display: block;
      min-width: 790px;
      width: 100%;
      height: auto;
    }

    .timeline-grid { stroke: #e8dfca; stroke-width: 1; }
    .timeline-row { stroke: #d9cba8; stroke-width: 1; }
    .timeline-label { fill: #5d6d72; font-size: 12px; }
    .timeline-parameter { fill: var(--ink); font-size: 12px; font-weight: 650; }
    .timeline-point { cursor: pointer; outline: none; }
    .timeline-point circle { fill: #aa8433; stroke: #fffdf8; stroke-width: 2; }
    .timeline-point:hover circle, .timeline-point:focus circle, .timeline-point.selected circle {
      fill: #674d17;
      stroke: #d7bb78;
      stroke-width: 3;
    }

    .timeline-summary {
      margin: 14px 2px 0;
      color: var(--muted);
    }

    .explore-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    .explore-card {
      display: flex;
      min-height: 220px;
      flex-direction: column;
      padding: 21px;
      border: 1px solid var(--line);
      border-radius: 11px;
      background: #fff;
    }

    .explore-card h3 { margin-bottom: 18px; }

    .latest-reading {
      margin: 0 0 16px;
      padding: 14px;
      border-radius: 9px;
      background: var(--teal-soft);
    }

    .latest-reading span {
      display: block;
      margin-bottom: 3px;
      color: var(--muted);
      font-size: 0.76rem;
      font-weight: 680;
      letter-spacing: 0.03em;
      text-transform: uppercase;
    }

    .latest-reading strong {
      display: block;
      color: var(--ink);
      font-size: 1.18rem;
      line-height: 1.3;
      font-variant-numeric: tabular-nums;
    }

    .explore-stat {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      padding: 7px 0;
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-size: 0.83rem;
    }

    .explore-stat strong { color: var(--ink); text-align: right; }

    .explore-status {
      margin: 15px 0 0;
      color: var(--muted);
      font-size: 0.84rem;
    }

    .parameter-history {
      margin-top: 18px;
      padding-top: 14px;
      border-top: 1px solid var(--line);
    }

    .parameter-history > summary {
      position: relative;
      padding-right: 22px;
      color: var(--teal);
      font-size: 0.84rem;
      font-weight: 700;
      cursor: pointer;
      list-style: none;
    }

    .parameter-history > summary::-webkit-details-marker { display: none; }

    .parameter-history > summary::after {
      content: "+";
      position: absolute;
      right: 0;
      top: -3px;
      font-size: 1.05rem;
      font-weight: 500;
    }

    .parameter-history[open] > summary::after { content: "−"; }

    .parameter-history-content { padding-top: 16px; }

    .parameter-history-note,
    .parameter-history-meta {
      color: var(--muted);
      font-size: 0.76rem;
    }

    .parameter-history-note { margin-bottom: 12px; }
    .parameter-history-meta { margin: 10px 0 0; }

    .parameter-chart {
      position: relative;
      min-height: 250px;
      border: 1px solid var(--line);
      border-radius: 9px;
      background: #fbfdfd;
    }

    .parameter-chart canvas {
      display: block;
      width: 100%;
      height: 250px;
      border-radius: inherit;
      cursor: crosshair;
      outline: none;
    }

    .parameter-chart canvas:focus-visible {
      box-shadow: 0 0 0 3px rgba(11, 107, 112, 0.16);
    }

    .parameter-tooltip {
      position: absolute;
      z-index: 3;
      display: none;
      max-width: 220px;
      padding: 9px 10px;
      border: 1px solid var(--line-strong);
      border-radius: 7px;
      color: var(--ink);
      background: rgba(255, 255, 255, 0.97);
      box-shadow: var(--shadow);
      font-size: 0.74rem;
      line-height: 1.45;
      pointer-events: none;
    }

    .parameter-tooltip strong { display: block; margin-bottom: 2px; }

    .parameter-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 15px;
      margin-top: 10px;
      color: var(--muted);
      font-size: 0.73rem;
    }

    .parameter-legend span::before {
      content: "";
      display: inline-block;
      width: 7px;
      height: 7px;
      margin-right: 6px;
      border-radius: 50%;
      background: var(--teal-mid);
    }

    .parameter-legend .listed::before { background: var(--amber); }

    .parameter-legend .limit::before {
      width: 12px;
      height: 0;
      border-top: 2px dashed var(--amber);
      border-radius: 0;
      background: transparent;
    }

    .faq-list {
      overflow: hidden;
      border-top: 1px solid var(--line-strong);
    }

    .faq-item { border-bottom: 1px solid var(--line); }

    .faq-item summary {
      position: relative;
      padding: 20px 48px 20px 0;
      font-size: 1rem;
      font-weight: 680;
      cursor: pointer;
      list-style: none;
    }

    .faq-item summary::-webkit-details-marker { display: none; }

    .faq-item summary::after {
      content: "+";
      position: absolute;
      top: 15px;
      right: 2px;
      color: var(--teal);
      font-size: 1.45rem;
      font-weight: 400;
    }

    .faq-item[open] summary::after { content: "−"; }

    .faq-answer {
      max-width: 800px;
      padding: 0 48px 22px 0;
      color: var(--muted);
    }

    .detailed-section {
      margin-top: 16px;
      padding: 42px;
      border: 1px solid var(--line);
      border-radius: calc(var(--radius) + 2px);
      background: var(--panel);
    }

    .detail-summary {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 22px;
    }

    .detail-chip {
      padding: 7px 10px;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: var(--muted);
      background: #fff;
      font-size: 0.82rem;
    }

    .detail-chip strong { color: var(--ink); }

    .detailed-disclosure > summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 16px 18px;
      border: 1px solid var(--line-strong);
      border-radius: 10px;
      color: var(--ink);
      background: #fff;
      font-weight: 700;
      cursor: pointer;
      list-style: none;
    }

    .detailed-disclosure > summary::-webkit-details-marker { display: none; }

    .detailed-disclosure > summary::after {
      content: "+";
      margin-left: auto;
      color: var(--teal);
      font-size: 1.3rem;
      font-weight: 450;
    }

    .detailed-disclosure[open] > summary::after { content: "−"; }

    .detailed-disclosure > summary small {
      color: var(--muted);
      font-weight: 500;
    }

    .detail-content { padding-top: 34px; }

    .detail-block + .detail-block {
      margin-top: 52px;
      padding-top: 44px;
      border-top: 1px solid var(--line);
    }

    .chart-shell {
      padding: 28px 28px 22px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fff;
      box-shadow: var(--shadow);
    }

    .chart-readout {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 22px;
      min-height: 66px;
      margin-bottom: 18px;
      padding: 14px 18px;
      border-radius: 10px;
      background: var(--panel);
    }

    .chart-year {
      font-size: 1.25rem;
      font-weight: 720;
    }

    .chart-values {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 24px;
      color: var(--muted);
      font-size: 0.9rem;
    }

    .chart-values span { white-space: nowrap; }

    .chart-values strong {
      color: var(--ink);
      font-size: 1.08rem;
      font-variant-numeric: tabular-nums;
    }

    .plot + .plot { margin-top: 26px; }

    .plot-note {
      margin: 8px 0 0;
      color: var(--muted);
      font-size: 0.82rem;
    }

    .plot-title {
      display: flex;
      align-items: center;
      gap: 9px;
      margin-bottom: 8px;
      color: var(--muted);
      font-size: 0.82rem;
      font-weight: 680;
      letter-spacing: 0.025em;
      text-transform: uppercase;
    }

    .legend-dot {
      width: 9px;
      height: 9px;
      border-radius: 2px;
      background: var(--teal-mid);
    }

    .legend-dot.amber { background: var(--amber); }

    .plot svg {
      display: block;
      width: 100%;
      height: auto;
      overflow: visible;
    }

    .grid-line { stroke: #e7edef; stroke-width: 1; }
    .axis-label { fill: #68797e; font-size: 12px; }
    .value-label { fill: var(--ink); font-size: 12px; font-weight: 680; }
    .result-bar { fill: var(--teal-mid); }
    .exceedance-bar { fill: #a9863c; }
    .year-hit { cursor: pointer; outline: none; }
    .year-hit:hover .result-bar, .year-hit:focus .result-bar { fill: var(--teal); }
    .year-hit:hover .exceedance-bar, .year-hit:focus .exceedance-bar { fill: #755819; }
    .year-hit.selected .result-bar { fill: var(--navy); }
    .year-hit.selected .exceedance-bar { fill: var(--amber); }

    .table-wrap {
      overflow-x: auto;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #fff;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.9rem;
      font-variant-numeric: tabular-nums;
    }

    caption {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    th, td {
      padding: 14px 16px;
      border-bottom: 1px solid var(--line);
      text-align: left;
      vertical-align: top;
    }

    th {
      color: var(--muted);
      background: #f8fafb;
      font-size: 0.76rem;
      font-weight: 720;
      letter-spacing: 0.035em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    tbody tr:last-child td { border-bottom: 0; }
    tbody tr:hover td { background: #f8fbfb; }

    .number { text-align: right; }
    .nowrap { white-space: nowrap; }
    .parameter-name { min-width: 220px; font-weight: 640; }

    .history-table { margin-top: 24px; }

    .tools {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 18px;
    }

    .search-box {
      position: relative;
      flex: 1;
      max-width: 430px;
    }

    .search-box label {
      display: block;
      margin-bottom: 6px;
      color: var(--muted);
      font-size: 0.78rem;
      font-weight: 680;
    }

    .search-box input {
      width: 100%;
      min-height: 44px;
      padding: 10px 13px;
      border: 1px solid var(--line-strong);
      border-radius: 9px;
      color: var(--ink);
      background: #fff;
      outline: none;
    }

    .search-box input:focus {
      border-color: var(--teal);
      box-shadow: 0 0 0 3px rgba(11, 107, 112, 0.12);
    }

    .toggle {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      min-height: 44px;
      padding-top: 20px;
      color: var(--ink);
      font-size: 0.88rem;
      font-weight: 620;
      cursor: pointer;
    }

    .toggle input {
      width: 18px;
      height: 18px;
      accent-color: var(--teal);
    }

    .table-status {
      margin: 12px 2px 0;
      color: var(--muted);
      font-size: 0.84rem;
    }

    .sort-button {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      margin: -8px -7px;
      padding: 8px 7px;
      border: 0;
      color: inherit;
      background: transparent;
      font: inherit;
      font-weight: inherit;
      letter-spacing: inherit;
      text-transform: inherit;
      cursor: pointer;
    }

    .sort-button:hover, .sort-button:focus-visible {
      color: var(--teal);
      outline: none;
    }

    .sort-indicator { min-width: 10px; font-size: 0.72rem; }

    .exceedance-table-wrap {
      border-color: var(--amber-line);
      background: #fffdf8;
    }

    .exceedance-table-wrap th { background: var(--amber-soft); color: #655427; }
    .exceedance-table-wrap tbody tr:hover td { background: #fdf9ef; }

    .zone-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr);
      gap: 32px;
      align-items: stretch;
    }

    .zone-card {
      padding: 28px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fff;
    }

    .zone-name {
      margin-bottom: 6px;
      font-size: 1.55rem;
      font-weight: 720;
      letter-spacing: -0.035em;
    }

    .zone-coverage-copy {
      margin-bottom: 20px;
      color: var(--muted);
    }

    .coverage-track {
      height: 12px;
      overflow: hidden;
      margin-bottom: 8px;
      border-radius: 999px;
      background: #dfebec;
    }

    .coverage-fill {
      width: 100%;
      height: 100%;
      border-radius: inherit;
      background: var(--teal);
      transform-origin: left center;
    }

    .coverage-caption {
      display: flex;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 26px;
      color: var(--muted);
      font-size: 0.78rem;
    }

    .technical-label {
      margin: 26px 0 9px;
      color: var(--muted);
      font-size: 0.75rem;
      font-weight: 720;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .zone-meta {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1px;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 9px;
      background: var(--line);
    }

    .zone-meta > div { padding: 14px; background: #fff; }
    .zone-meta dt { margin-bottom: 4px; font-size: 0.76rem; }
    .zone-meta dd { text-align: left; font-size: 0.94rem; }

    .map-placeholder {
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 330px;
      padding: 30px;
      border: 1px dashed #9eb8bc;
      border-radius: var(--radius);
      background: var(--panel);
    }

    .map-placeholder-label {
      margin-bottom: 15px;
      color: var(--teal);
      font-size: 0.78rem;
      font-weight: 750;
      letter-spacing: 0.07em;
      text-transform: uppercase;
    }

    .map-placeholder h3 { font-size: 1.35rem; }
    .map-placeholder p { max-width: 440px; margin-bottom: 0; color: var(--muted); }

    .methodology {
      display: grid;
      grid-template-columns: 0.7fr 1.3fr;
      gap: 42px;
      padding: 34px;
      border-radius: var(--radius);
      color: #dce9ec;
      background: var(--navy);
    }

    .methodology h2, .methodology h3 { color: #fff; }
    .methodology p { color: #c2d2d6; }

    .source-list {
      display: grid;
      gap: 15px;
      margin: 0 0 24px;
    }

    .source-list div {
      display: grid;
      grid-template-columns: 126px 1fr;
      gap: 14px;
    }

    .source-list dt { color: #9fc0c7; }
    .source-list dd { text-align: left; font-weight: 560; }

    .method-note {
      padding-top: 20px;
      border-top: 1px solid rgba(255, 255, 255, 0.16);
      font-size: 0.91rem;
    }

    .page-footer {
      padding: 22px 0 34px;
      color: var(--muted);
      font-size: 0.8rem;
      text-align: center;
    }

    .error-state {
      margin: 80px auto;
      padding: 28px;
      border: 1px solid var(--amber-line);
      border-radius: var(--radius);
      background: var(--amber-soft);
    }

    @media (max-width: 900px) {
      .overview { grid-template-columns: 1fr; gap: 28px; }
      .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .parameter-alert-grid { grid-template-columns: 1fr; }
      .parameter-alert h3 { min-height: 0; }
      .fact-panel, .methodology, .zone-grid, .know-panel > div:first-child { grid-template-columns: 1fr; }
      .know-points { grid-template-columns: 1fr; gap: 16px; }
      .comparison-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .explore-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .timeline-readout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (max-width: 680px) {
      .shell { width: min(100% - 30px, 1160px); }
      .header-row { display: block; padding: 18px 0; }
      .source-line { margin-top: 14px; text-align: left; }
      .overview { padding: 42px 0 34px; }
      h1 { font-size: clamp(2.3rem, 12vw, 3.4rem); }
      .section { padding: 38px 0; }
      .section-head { display: block; }
      .summary-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
      .metric-card { min-height: 132px; padding: 20px 17px; }
      .metric-value { margin-bottom: 17px; font-size: 2.15rem; }
      .fact-panel, .know-panel, .exceedance-feature, .chart-shell, .methodology, .zone-card { padding: 22px 18px; }
      .plain-summary { padding: 18px; }
      .comparison-grid { grid-template-columns: 1fr; }
      .explore-grid { grid-template-columns: 1fr; }
      .timeline-readout { grid-template-columns: 1fr 1fr; }
      .detailed-section { margin-inline: -6px; padding: 28px 12px; }
      .detailed-disclosure > summary { align-items: flex-start; flex-wrap: wrap; }
      .detailed-disclosure > summary small { width: 80%; }
      .tools { display: block; }
      .search-box { max-width: none; }
      .toggle { padding-top: 14px; }
      .chart-readout { align-items: flex-start; }
      .chart-values { display: grid; gap: 3px; text-align: right; }
      .timeline-shell { padding: 16px 12px; }
      .zone-meta { grid-template-columns: 1fr; }
      .source-list div { grid-template-columns: 1fr; gap: 2px; }
      th, td { padding: 12px 13px; }
    }

    @media (max-width: 410px) {
      .summary-grid { grid-template-columns: 1fr; }
      .overview-facts > div { grid-template-columns: 1fr; gap: 2px; }
      .overview-facts dd { text-align: left; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { scroll-behavior: auto !important; }
    }

    @media print {
      .tools { display: none; }
      .shell { width: 100%; }
      .section { break-inside: avoid; }
      .table-wrap { overflow: visible; }
      .methodology { color: var(--ink); background: #fff; border: 1px solid var(--line); }
      .methodology h2, .methodology h3, .methodology p, .methodology dt { color: var(--ink); }
    }

/* Progressive enhancement and multi-zone reports retain the prototype theme. */
[hidden] { display: none !important; }
.plain-summary p { margin: 0 0 .65rem; }
.plain-summary p:last-child { margin-bottom: 0; }
.coverage-notice { padding: 1rem; border: 1px solid var(--line); border-radius: 12px; }
.history-load-status { font-size: .875rem; line-height: 1.6; }
.history-retry { padding: .65rem 1rem; font: inherit; cursor: pointer; }
.parameter-tooltip { white-space: pre-line; }
.mapping-details { margin-top: 1.5rem; }
.mapping-details summary { cursor: pointer; font-weight: 600; }
.sort-button:disabled { cursor: default; }
.zone-name, .parameter-alert h3 { overflow-wrap: anywhere; }
.faq-answer p { margin: 0; }

/* Homepage: consumer-first discovery and crawlable editorial content. */
.home-page main { padding-bottom: 0; }
.home-brand { text-decoration: none; }
.home-brand:focus-visible,
.popular-card a:focus-visible,
.browse-place-list a:focus-visible,
.search-examples a:focus-visible,
.place-search-result:focus-visible,
.place-search-control input:focus-visible,
.place-search-control button:focus-visible,
.home-faq summary:focus-visible {
  outline: 3px solid rgba(11, 107, 112, .3);
  outline-offset: 3px;
}

.home-hero {
  border-bottom: 1px solid var(--line);
  background: #f7fafa;
}

.home-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(380px, .85fr);
  gap: clamp(48px, 8vw, 100px);
  align-items: center;
  min-height: 510px;
  padding-block: 74px 82px;
}

.home-hero-copy h1 {
  max-width: 760px;
  margin-bottom: 24px;
  font-size: clamp(3rem, 5.5vw, 5.25rem);
  line-height: .96;
}

.home-lede {
  max-width: 690px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.65;
}

.place-search {
  position: relative;
  z-index: 5;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper);
  box-shadow: 0 20px 55px rgba(18, 48, 58, .1);
}

.place-search-form { position: relative; }
.place-search-form > label {
  display: block;
  margin-bottom: 10px;
  color: var(--ink);
  font-size: .86rem;
  font-weight: 720;
}

.place-search-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.place-search-control input,
.place-search-control button {
  min-height: 54px;
  border-radius: 10px;
}

.place-search-control input {
  width: 100%;
  min-width: 0;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  background: #fff;
}

.place-search-control input::placeholder { color: #718085; }
.place-search-control input:focus { border-color: var(--teal); }

.place-search-control button {
  padding: 0 22px;
  border: 1px solid var(--teal);
  color: #fff;
  background: var(--teal);
  font-weight: 720;
  cursor: pointer;
}

.place-search-control button:hover { background: #075b60; }

.place-search-results {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow);
}

.place-search-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-height: 58px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}

.place-search-result:last-child { border-bottom: 0; }
.place-search-result:hover,
.place-search-result[aria-selected="true"] { background: var(--teal-soft); }
.place-search-result strong { display: block; line-height: 1.3; }
.place-search-result span,
.place-search-result small { color: var(--muted); font-size: .82rem; }
.place-search-empty { margin: 0; padding: 17px 14px; color: var(--muted); font-size: .9rem; }

.search-examples {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: .84rem;
}

.search-examples a {
  min-height: 44px;
  padding: 10px 2px;
  color: var(--teal);
  font-weight: 680;
  text-underline-offset: 3px;
}

.home-content { padding-block: 18px 88px; }
.home-section {
  padding: 76px 0;
  border-bottom: 1px solid var(--line);
}
.home-section:last-child { border-bottom: 0; }

.home-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .65fr);
  gap: 38px;
  align-items: end;
  margin-bottom: 30px;
}

.home-section-head > p {
  max-width: 430px;
  margin: 0 0 3px auto;
  color: var(--muted);
}

.compact-head { grid-template-columns: 1fr; }
.section-kicker,
.place-county {
  margin-bottom: 8px;
  color: var(--teal);
  font-size: .73rem;
  font-weight: 760;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.popular-grid,
.use-case-grid,
.source-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.popular-card {
  display: flex;
  flex-direction: column;
  min-height: 230px;
  padding: 25px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 9px 28px rgba(18, 48, 58, .045);
}

.popular-card h3 { font-size: 1.35rem; }
.popular-card h3 a { text-decoration: none; }
.popular-card > p:not(.place-county) { color: var(--muted); }
.popular-card .text-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  margin-top: auto;
  color: var(--teal);
  font-weight: 720;
  text-decoration: none;
}

.parameter-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.parameter-info-card {
  min-height: 125px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}

.parameter-info-card h3 { margin-bottom: 17px; }
.parameter-info-card p { margin: 0; color: var(--muted); font-size: .86rem; }

.home-section-tint {
  margin-inline: -36px;
  padding-inline: 36px;
  border: 0;
  border-radius: 22px;
  background: var(--teal-soft);
}

.use-case-grid article { padding: 8px 24px 8px 0; }
.use-case-grid article + article { padding-left: 24px; border-left: 1px solid #bfd7d8; }
.use-case-grid p { margin: 0; color: #476166; }
.step-number { display: block; margin-bottom: 25px; color: var(--teal); font-size: .78rem; font-weight: 760; }

.editorial-section {
  display: grid;
  grid-template-columns: minmax(250px, .72fr) minmax(0, 1.28fr);
  gap: clamp(45px, 9vw, 110px);
}
.editorial-copy { max-width: 720px; }
.editorial-copy p { color: #3f5359; font-size: 1.02rem; }
.editorial-copy p:last-child { margin-bottom: 0; }

.browse-place-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}

.browse-place-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}
.browse-place-list a:not(:nth-child(3n+1)) { padding-left: 16px; border-left: 1px solid var(--line); }
.browse-place-list a:hover span { color: var(--teal); }
.browse-place-list span { font-weight: 700; }
.browse-place-list small { color: var(--muted); text-align: right; }

.future-browse {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 24px;
  margin-top: 28px;
  padding: 22px 24px;
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  background: var(--panel);
}
.future-browse h3,
.future-browse p { margin: 0; }
.future-browse p { color: var(--muted); }

.understand-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
.understand-grid article { padding: 26px 36px 26px 0; border-bottom: 1px solid var(--line); }
.understand-grid article:nth-child(even) { padding-left: 36px; border-left: 1px solid var(--line); }
.understand-grid p { margin-bottom: 0; color: var(--muted); }

.home-faq { max-width: 880px; }
.home-faq details { border-top: 1px solid var(--line); }
.home-faq details:last-child { border-bottom: 1px solid var(--line); }
.home-faq summary {
  min-height: 62px;
  padding: 19px 42px 19px 0;
  font-weight: 710;
  cursor: pointer;
}
.home-faq details[open] summary { color: var(--teal); }
.home-faq details p { max-width: 760px; padding: 0 20px 23px 0; color: var(--muted); }

.sources-section { padding-bottom: 54px; }
.source-grid article {
  padding: 23px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}
.source-grid p { margin: 0; color: var(--muted); font-size: .9rem; }
.independence-note {
  margin: 24px 0 0;
  padding-left: 18px;
  border-left: 3px solid var(--teal);
  color: #3f5359;
  font-weight: 620;
}

.footer-row { display: flex; justify-content: space-between; gap: 20px; }

@media (max-width: 900px) {
  .home-hero-inner { grid-template-columns: 1fr; gap: 38px; min-height: 0; padding-block: 60px; }
  .place-search { max-width: 680px; }
  .parameter-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .editorial-section { grid-template-columns: 1fr; gap: 24px; }
  .browse-place-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .browse-place-list a:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; }
  .browse-place-list a:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line); }
}

@media (max-width: 680px) {
  .home-hero-inner { padding-block: 46px 52px; }
  .home-hero-copy h1 { font-size: clamp(2.65rem, 12vw, 3.8rem); }
  .place-search { padding: 18px; border-radius: 14px; }
  .place-search-control { grid-template-columns: 1fr; }
  .place-search-control button { width: 100%; }
  .place-search-results { top: calc(100% + 8px); }
  .home-content { padding-block: 5px 50px; }
  .home-section { padding: 52px 0; }
  .home-section-head { display: block; margin-bottom: 24px; }
  .home-section-head > p { margin: 10px 0 0; }
  .popular-grid,
  .use-case-grid,
  .source-grid,
  .parameter-card-grid,
  .understand-grid,
  .browse-place-list { grid-template-columns: 1fr; }
  .popular-card { min-height: 205px; }
  .home-section-tint { margin-inline: -15px; padding: 52px 15px; border-radius: 0; }
  .use-case-grid { gap: 0; }
  .use-case-grid article,
  .use-case-grid article + article { padding: 22px 0; border: 0; border-bottom: 1px solid #bfd7d8; }
  .use-case-grid article:last-child { border-bottom: 0; }
  .step-number { margin-bottom: 12px; }
  .browse-place-list a,
  .browse-place-list a:not(:nth-child(3n+1)),
  .browse-place-list a:nth-child(even) { padding: 12px 0; border-left: 0; }
  .future-browse { grid-template-columns: 1fr; gap: 8px; }
  .understand-grid article,
  .understand-grid article:nth-child(even) { padding: 23px 0; border-left: 0; }
  .footer-row { display: grid; }
}

@media (max-width: 410px) {
  .place-search-result { grid-template-columns: 1fr; gap: 2px; }
  .parameter-card-grid { grid-template-columns: 1fr; }
}