@font-face {
  font-family: "Atlas Serif";
  src: url("assets/fonts/Baskervville-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Atlas Sans";
  src: url("assets/fonts/BarlowCondensed-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Atlas Sans";
  src: url("assets/fonts/BarlowCondensed-SemiBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
}
:root {
  color-scheme: light;
  --paper: #f3f7f6;
  --paper-deep: #e8efee;
  --paper-bright: #fbfcfa;
  --ink: #14242b;
  --ink-soft: #50636b;
  --water: #08789d;
  --water-pale: #c7e0e6;
  --rust: #a33f28;
  --rule: #93a8ad;
  --rule-pale: #cbd7d8;
  --display: "Atlas Serif", Baskerville, Georgia, serif;
  --sans: "Atlas Sans", "Arial Narrow", Arial, sans-serif;
  --mono: "Atlas Serif", Baskerville, Georgia, serif;
}

* { box-sizing: border-box; }
html { background: #dbe5e5; scrollbar-color: var(--rule) var(--paper-deep); }
body {
  margin: 0;
  color: var(--ink);
  background: #dbe5e5;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: .28;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
}
::selection { color: var(--paper-bright); background: var(--water); }
a { color: inherit; text-decoration: none; text-underline-offset: .18em; }
a:hover { color: var(--water); }
button, input { font: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 2px solid var(--water);
  outline-offset: 4px;
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.page {
  position: relative;
  width: min(1460px, calc(100% - 56px));
  margin: 28px auto;
  overflow: hidden;
  border: 1px solid var(--ink);
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 23.5H24M23.5 0V24' fill='none' stroke='%2393a8ad' stroke-width='.45' opacity='.18'/%3E%3C/svg%3E");
  background-size: 24px 24px;
  box-shadow: 0 22px 55px rgba(20,36,43,.15);
}
.home-page { background-image: none; background-color: var(--paper); }
.home-page .atlas-hero {
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 23.5H24M23.5 0V24' fill='none' stroke='%2393a8ad' stroke-width='.45' opacity='.18'/%3E%3C/svg%3E");
  background-size: 24px 24px;
}
.hero-puget-sound .atlas-hero {
  background-image: url("../atlas/home-hero-options/b-puget-sound.png");
  background-position: center;
  background-size: cover;
}
.hero-puget-sound .hero-cartography { display: none; }
.page * { min-width: 0; }
.masthead {
  min-height: 84px;
  padding: 0 28px;
  display: grid;
  grid-template-columns: minmax(300px,1fr) auto;
  align-items: center;
  gap: 36px;
  border-bottom: 1px solid var(--ink);
  background: rgba(251,252,250,.58);
}
.brand-lockup { display: flex; align-items: center; gap: 20px; }
.brand { font-family: var(--display); font-size: 33px; font-weight: 400; line-height: 1; letter-spacing: -.035em; }
.brand-note {
  padding: 3px 0 2px 20px;
  border-left: 1px solid var(--rule);
  color: var(--ink-soft);
  font: 400 11px/1.25 var(--sans);
  letter-spacing: .17em;
  text-transform: uppercase;
}
.masthead-right { display: flex; align-items: center; gap: 34px; }
.main-nav { display: flex; align-items: center; gap: 34px; }
.main-nav a { font-size: 12px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; }
.icon-button { width: 34px; height: 34px; padding: 6px; display: grid; place-items: center; border: 0; background: transparent; color: var(--ink); cursor: pointer; }
.icon-button svg { width: 21px; height: 21px; }
.meta, .coordinates, .section-code, .axis-note, .measure-label {
  color: var(--ink-soft);
  font: 400 11px/1.35 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.cross { position: relative; display: inline-block; width: 22px; height: 22px; flex: 0 0 22px; }
.cross::before, .cross::after { content: ""; position: absolute; background: var(--rule); }
.cross::before { left: 10px; top: 0; width: 1px; height: 22px; }
.cross::after { left: 0; top: 10px; width: 22px; height: 1px; }

.atlas-hero { position: relative; min-height: 420px; padding: 34px 42px 20px; overflow: hidden; border-bottom: 1px solid var(--ink); }
.hero-cartography { position: absolute; inset: 0 0 0 38%; width: 62%; height: 100%; opacity: .8; }
.hero-copy { position: relative; z-index: 1; width: min(790px,69%); padding-left: 30px; border-left: 1px solid var(--rule-pale); }
.hero-coordinates { margin: 1px 0 18px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--display); }
h1 { max-width: 800px; margin: 0; font-size: clamp(56px,6vw,86px); font-weight: 400; line-height: .89; letter-spacing: -.04em; }
.home-page .atlas-hero h1 { white-space: nowrap; }
.hero-index { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px 28px; font: 400 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.hero-index::after { content: "Know your water"; padding-left: 18px; color: var(--ink-soft); }
.search-wrap { position: relative; z-index: 2; margin-top: 34px; display: grid; grid-template-columns: minmax(0,1fr) auto; width: min(960px,calc(100% - 168px)); border: 1px solid var(--ink); background: rgba(251,252,250,.94); }
.search-icon { position: absolute; left: 20px; top: 50%; width: 27px; height: 27px; transform: translateY(-50%); }
.search-wrap input { width: 100%; min-width: 0; height: 68px; padding: 0 22px 0 64px; border: 0; background: transparent; color: var(--ink); font-family: var(--display); font-size: 21px; }
.search-wrap input::placeholder { color: #667980; opacity: 1; }
.search-placeholder { min-height: 68px; padding: 0 22px 0 64px; display: flex; align-items: center; color: #667980; font-family: var(--display); font-size: 21px; }
.search-wrap button { width: 70px; border: 0; border-left: 1px solid var(--rule); background: transparent; color: var(--water); cursor: pointer; }
.search-wrap button svg { width: 30px; height: 18px; }
.search-wrap button:hover { background: var(--water-pale); }
.search-submit { width: 70px; display: grid; place-items: center; border-left: 1px solid var(--rule); color: var(--water); }
.search-submit svg { width: 30px; height: 18px; }

.lanes { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); border-bottom: 1px solid var(--ink); background: rgba(251,252,250,.4); }
.lane { position: relative; min-height: 168px; padding: 18px 24px 17px; display: grid; grid-template-columns: 34px 1fr; grid-template-rows: 46px auto auto; column-gap: 16px; border-right: 1px dotted var(--rule); }
.lane:last-child { border-right: 0; }
.lane:hover { color: var(--ink); background: rgba(199,224,230,.28); }
.lane-number { grid-row: 1; font-family: var(--display); font-size: 24px; color: var(--water); }
.lane-icon { grid-column: 2; grid-row: 1; width: 66px; height: 39px; justify-self: center; color: var(--water); }
/* Supplied artwork is cleaned into transparent, single-ink review assets so
   all five marks share the original mockup's clear blue-on-paper treatment. */
.lane-icon.sourced-raster {
  object-fit: contain;
  object-position: 30% center;
}
.lane-icon.compass-icon { transform: scale(1.28); }
@media (min-width: 761px) {
  /* Every element shares one unmistakable central axis. */
  .lane {
    min-height: 190px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .lane-number {
    position: absolute;
    top: 18px;
    left: 24px;
  }
  .lane-icon { display: block; margin: 2px auto 0; }
  .lane h2 { margin: 30px 0 2px; text-align: center; }
  .lane p { margin: 0; text-align: center; }
}
.lane h2 { grid-column: 1/-1; margin: 30px 0 2px; font-size: 18px; font-weight: 400; line-height: 1.1; text-align: center; text-transform: uppercase; }
.lane p { grid-column: 1/-1; margin: 0; color: var(--ink-soft); font-size: 11px; font-weight: 400; letter-spacing: .12em; line-height: 1.35; text-align: center; text-transform: uppercase; }
.lane-arrow { position: absolute; right: 16px; bottom: 14px; width: 24px; height: 14px; }

.content { padding: 28px 32px 46px; }
.section-heading { min-height: 40px; padding: 8px 12px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule-pale); }
.section-title { display: flex; align-items: center; gap: 12px; }
.section-heading h2 { margin: 0; font-size: 16px; font-family: var(--sans); font-weight: 400; letter-spacing: .14em; text-transform: uppercase; }
.section-heading .cross { width: 18px; height: 18px; flex-basis: 18px; }
.section-heading .cross::before { left: 8px; height: 18px; }
.section-heading .cross::after { top: 8px; width: 18px; }
.observation-grid { margin-top: 16px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.condition-card-grid { margin-top: 16px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.condition-image-card { display: block; min-width: 0; color: var(--ink); background: var(--paper-bright); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.condition-image-card:hover { color: var(--ink); }
.condition-card-art { position: relative; display: block; min-height: 158px; overflow: hidden; border-bottom: 1px solid var(--rule-pale); background-position: center; background-size: cover; }
.condition-card-copy { min-height: 74px; padding: 4px 12px 6px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.condition-card-copy strong, .condition-card-copy b, .condition-card-copy small { display: block; font-family: var(--display); font-weight: 400; }
.condition-card-copy strong { font-size: 22px; line-height: 1.08; }
.condition-card-copy small { margin-top: 4px; color: var(--ink-soft); font-size: 13px; line-height: 1.2; }
.condition-card-copy .condition-card-state { display: inline; margin: 0 0 0 2px; font-size: 13px; white-space: nowrap; }
.condition-card-reading { flex: none; text-align: right; }
.condition-card-reading b { font-size: 22px; line-height: 1; white-space: nowrap; }
.observation-plate { border: 1px solid var(--rule); background: var(--paper-bright); }
.plate-head { min-height: 40px; padding: 10px 14px; display: flex; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--rule-pale); }
.plate-main { min-height: 196px; padding: 18px 14px 14px; display: grid; grid-template-columns: minmax(230px,.9fr) minmax(260px,1.1fr); gap: 20px; }
.plate-reading { padding-right: 16px; border-right: 1px solid var(--rule-pale); }
.plate-reading h3 { margin: 0 0 14px; font-size: 30px; font-weight: 400; line-height: 1; }
.big-reading { display: block; font-family: var(--display); font-size: 52px; line-height: .95; font-variant-numeric: tabular-nums; }
.change { display: block; margin-top: 8px; color: var(--water); font-family: var(--display); font-size: 21px; font-variant-numeric: tabular-nums; }
.change.negative { color: var(--rust); }
.status { display: block; margin-top: 4px; font-family: var(--display); font-size: 22px; }
.plate-chart { display: flex; align-items: stretch; }
.plate-chart svg { width: 100%; height: 174px; shape-rendering: geometricPrecision; }
.plate-foot { min-height: 34px; padding: 8px 14px; display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--rule-pale); color: var(--ink-soft); font-size: 11px; }
.atlas-columns { margin-top: 38px; display: grid; grid-template-columns: minmax(0,1.45fr) minmax(300px,.55fr); gap: 38px; }
.ruled-list { border-top: 1px solid var(--rule); }
.ruled-row { min-height: 48px; padding: 8px 10px; display: grid; grid-template-columns: minmax(150px,1.5fr) minmax(80px,.7fr) minmax(110px,1fr); align-items: center; gap: 18px; border-bottom: 1px solid var(--rule-pale); font-size: 13px; }
.ruled-row strong { font-family: var(--display); font-size: 17px; font-weight: 400; }
.ruled-row span:nth-child(2) { color: var(--water); font-variant-numeric: tabular-nums; }
.ruled-row span:last-child { color: var(--ink-soft); }
.popular-strip { margin-top: 32px; }
.popular-places { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-bottom: 1px solid var(--ink); }
.place-card { min-height: 98px; padding: 12px 16px; display: grid; grid-template-columns: 68px 1fr; align-items: center; gap: 12px; border-right: 1px dotted var(--rule); }
.place-card:last-child { border-right: 0; }
.place-card:hover { color: var(--ink); background: rgba(199,224,230,.25); }
.state-symbol { position: relative; width: 66px; height: 70px; display: grid; place-items: center; }
.state-icon { width: 64px; height: 64px; display: block; }
.place-card strong, .place-card b, .place-card small { display: block; }
.place-card strong { font-family: var(--display); font-size: 18px; font-weight: 400; line-height: 1.08; letter-spacing: -.01em; }
.place-card b { margin-top: 5px; color: var(--ink); font: 400 11px/1.25 var(--mono); }
.place-card small { margin-top: 2px; color: var(--water); font: 400 10px/1.25 var(--mono); }
.popular-strip .section-heading { padding-block: 10px; }
.popular-strip .section-heading h2 { font-family: var(--display); font-size: 22px; font-weight: 400; line-height: 1; letter-spacing: 0; text-transform: none; }
.popular-controls { display: flex; }
.popular-controls button { width: 42px; height: 34px; border: 1px solid var(--rule); border-radius: 0; background: transparent; color: var(--ink); font: 400 18px/1 var(--display); cursor: pointer; }
.popular-controls button + button { border-left: 0; }
.network-map { position: relative; min-height: 250px; overflow: hidden; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.network-map svg { width: 100%; height: 250px; }
.network-caption { padding: 12px 10px; color: var(--ink-soft); font-size: 12px; }
.dispatch { margin-top: 38px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.dispatch-item { min-height: 124px; padding: 18px 20px; border-right: 1px solid var(--rule); }
.dispatch-item:last-child { border-right: 0; }
.dispatch-item h3 { margin: 10px 0 5px; font-size: 20px; font-weight: 400; }
.dispatch-item p { margin: 0; color: var(--ink-soft); font-size: 13px; }
.site-footer { min-height: 82px; padding: 20px 32px; display: flex; justify-content: space-between; align-items: center; gap: 24px; border-top: 1px solid var(--ink); background: rgba(251,252,250,.42); color: var(--ink-soft); font-size: 12px; }
.footer-mark { display: flex; align-items: center; gap: 12px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 22px; }

.crumb-bar { min-height: 50px; padding: 8px 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--rule); color: var(--ink-soft); font-size: 12px; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.breadcrumbs span { color: var(--rule); }
.detail-hero { position: relative; min-height: 320px; display: grid; grid-template-columns: minmax(0,1fr) 360px; border-bottom: 1px solid var(--ink); }
.detail-hero::before { content: ""; position: absolute; inset: 0 360px 0 0; opacity: .2; pointer-events: none; background: url("data:image/svg+xml,%3Csvg width='420' height='260' viewBox='0 0 420 260' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%2393a8ad' stroke-width='.8'%3E%3Cpath d='M-20 40c70-53 116 28 185-4s112-8 153 26 92 6 123-16'/%3E%3Cpath d='M-20 63c70-53 116 28 185-4s112-8 153 26 92 6 123-16'/%3E%3Cpath d='M-20 86c70-53 116 28 185-4s112-8 153 26 92 6 123-16'/%3E%3Cpath d='M-20 109c70-53 116 28 185-4s112-8 153 26 92 6 123-16'/%3E%3C/g%3E%3C/svg%3E") right center/420px 260px no-repeat; }
.detail-reading { position: relative; z-index: 1; padding: 38px 42px 32px; }
.detail-reading h1 { margin: 8px 0 10px; font-size: clamp(56px,6vw,82px); }
.detail-value { display: block; font-family: var(--display); font-size: 72px; line-height: .95; font-variant-numeric: tabular-nums; }
.detail-change { display: block; margin-top: 8px; color: var(--rust); font-family: var(--display); font-size: 31px; line-height: 1; }
.detail-status { display: block; margin-top: 10px; font-family: var(--display); font-size: 29px; }
.locator-map { position: relative; padding: 26px; overflow: hidden; border-left: 1px solid var(--rule); background: rgba(251,252,250,.34); }
.locator-map svg { width: 100%; height: 250px; }
.locator-map .coordinates { position: absolute; right: 22px; bottom: 20px; }
.hydro-section { padding: 28px 32px 8px; }
.period-controls { display: flex; align-items: center; gap: 28px; }
.period-controls span { padding: 4px 2px 8px; border-bottom: 2px solid transparent; color: var(--ink); font: 400 12px/1 var(--sans); }
.period-controls span[aria-current="true"] { color: var(--water); border-bottom-color: var(--water); }
.hydro-layout { margin-top: 16px; display: grid; grid-template-columns: minmax(0,1fr) 270px; border: 1px solid var(--rule); background: rgba(251,252,250,.45); }
.hydrograph { position: relative; min-height: 470px; padding: 22px 20px 14px; border-right: 1px solid var(--rule); }
.hydrograph svg { width: 100%; height: 410px; }
.mobile-chart-note { display: none; }
.source-rail { padding: 18px 20px; }
.source-rail h3 { margin: 0 0 18px; padding-bottom: 11px; border-bottom: 1px solid var(--ink); font-family: var(--sans); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.source-item { padding: 0 0 16px; margin-bottom: 16px; border-bottom: 1px solid var(--rule-pale); }
.source-item strong { display: block; font-size: 12px; }
.source-item span { display: block; color: var(--ink-soft); font-size: 13px; }
.source-note { color: var(--ink-soft); font-family: var(--display); font-size: 16px; line-height: 1.35; }
.detail-content { padding: 34px 32px 48px; }
.detail-grid { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(320px,.8fr); gap: 38px; }
.record-panel, .reading-log { margin-top: 16px; }
.record-range { padding: 20px 16px 17px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.record-track { position: relative; height: 12px; margin: 34px 0 12px; background: var(--water-pale); }
.record-fill { width: 81.2%; height: 100%; background: var(--water); }
.record-marker { position: absolute; left: 81.2%; top: -8px; width: 2px; height: 28px; background: var(--ink); }
.record-marker::before { content: "679.86 ft"; position: absolute; left: 50%; bottom: 32px; transform: translateX(-50%); white-space: nowrap; font: 400 11px var(--mono); }
.record-ends { display: flex; justify-content: space-between; color: var(--ink-soft); font: 400 11px var(--mono); }
.facts { width: 100%; border-collapse: collapse; }
.facts th, .facts td { padding: 12px 10px; border-bottom: 1px solid var(--rule-pale); }
.facts th { text-align: left; color: var(--ink-soft); font-size: 12px; font-weight: 400; }
.facts td { text-align: right; font: 400 12px var(--mono); }
.notes-band { margin-top: 42px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.note { min-height: 172px; padding: 20px; border-right: 1px solid var(--rule); }
.note:last-child { border-right: 0; }
.note h3 { margin: 11px 0 8px; font-size: 21px; font-weight: 400; }
.note p { margin: 0; color: var(--ink-soft); font-size: 13px; }
.nearby-grid { margin-top: 16px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-top: 1px solid var(--rule); }
.nearby-grid a { min-height: 90px; padding: 17px 16px; border-right: 1px solid var(--rule-pale); border-bottom: 1px solid var(--rule); }
.nearby-grid a:last-child { border-right: 0; }
.nearby-grid strong { display: block; font-family: var(--display); font-size: 20px; font-weight: 400; }
.nearby-grid span { color: var(--ink-soft); font-size: 12px; }

@media (max-width: 1040px) {
  .page { width: calc(100% - 24px); margin: 12px auto; }
  .main-nav { gap: 20px; }
  .atlas-hero { min-height: 440px; }
  .hero-copy { width: 76%; }
  .search-wrap { width: calc(100% - 138px); }
  .lane { padding-inline: 14px; }
  .lane-number { left: 14px; }
  .lane h2, .lane p { margin-left: 0; }
  .plate-main { grid-template-columns: 1fr; }
  .plate-reading { padding-right: 0; border-right: 0; border-bottom: 1px solid var(--rule-pale); }
  .detail-hero { grid-template-columns: 1fr 300px; }
  .detail-hero::before { right: 300px; }
}
@media (max-width: 760px) {
  .page { width: 100%; margin: 0; border-left: 0; border-right: 0; box-shadow: none; }
  .masthead { min-height: 66px; padding: 0 16px; grid-template-columns: 1fr auto; }
  .brand { font-size: 27px; }
  .brand-note, .main-nav { display: none; }
  .masthead-right { gap: 8px; }
  .atlas-hero { min-height: 360px; padding: 24px 18px 18px; }
  .hero-cartography { inset: 34% -35% 0 5%; width: 130%; height: 66%; opacity: .65; }
  .hero-puget-sound .atlas-hero {
    background-image: url("../atlas/home-hero-options/b-puget-sound.png");
    /* Keep the artwork continuous behind the full mobile hero.  The previous
       height-constrained treatment exposed the paper grid across its upper
       third on tall handsets. */
    background-position: 61% center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  .hero-copy { width: 100%; padding: 0; border-left: 0; }
  h1 { max-width: 520px; font-size: clamp(52px,15vw,68px); }
  .home-page .atlas-hero h1 { font-size: clamp(36px,11vw,48px); }
  .hero-index { gap: 9px 18px; }
  .hero-index::after { width: 100%; }
  /* The hero already supplies an 18px inset. Anchor to that padding box once;
     adding a second inset pushed the button 16px beyond the field. */
  .search-wrap { position: absolute; left: 0; right: 0; bottom: 24px; width: auto; }
  .search-wrap input { height: 64px; font-size: 18px; }
  .lanes { grid-template-columns: 1fr; }
  .lane { min-height: 76px; grid-template-columns: 38px 48px 1fr 24px; grid-template-rows: 1fr; align-items: center; border-right: 0; border-bottom: 1px dotted var(--rule); }
  .lane:last-child { border-bottom: 0; }
  .lane-number { grid-column: 1; grid-row: 1; }
  .lane-icon { grid-column: 2; grid-row: 1; width: 42px; height: 30px; }
  .lane-icon.compass-icon { transform: scale(1.2); }
  .lane h2 { grid-column: 3; grid-row: 1; margin: 0; font-size: 16px; text-align: left; }
  .lane p { display: none; }
  .lane-arrow { right: 16px; bottom: 30px; }
  .content, .detail-content { padding: 24px 16px 40px; }
  .section-heading { align-items: flex-start; flex-wrap: wrap; }
  .observation-grid, .atlas-columns, .detail-grid { grid-template-columns: 1fr; }
  .popular-places { grid-template-columns: repeat(2,1fr); }
  .place-card:nth-child(2) { border-right: 0; }
  .place-card:nth-child(-n+2) { border-bottom: 1px dotted var(--rule); }
  .plate-main { grid-template-columns: minmax(150px,.8fr) minmax(200px,1.2fr); }
  .plate-reading { padding-right: 12px; border-right: 1px solid var(--rule-pale); border-bottom: 0; }
  .dispatch { grid-template-columns: 1fr; }
  .dispatch-item { border-right: 0; border-bottom: 1px solid var(--rule); }
  .dispatch-item:last-child { border-bottom: 0; }
  .crumb-bar { padding: 0 16px; }
  .crumb-bar > .coordinates { display: none; }
  .detail-hero { grid-template-columns: 1fr; }
  .detail-hero::before { inset: 0; }
  .detail-reading { padding: 30px 18px; }
  .detail-reading h1 { font-size: clamp(54px,14vw,72px); }
  .detail-value { font-size: 62px; }
  .locator-map { min-height: 240px; border-left: 0; border-top: 1px solid var(--rule); }
  .hydro-section { padding: 24px 16px 6px; }
  .hydro-layout { grid-template-columns: 1fr; }
  .hydrograph { min-height: 0; padding-inline: 8px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--rule); scrollbar-color: var(--water) var(--paper-deep); }
  .hydrograph svg { width: 760px; max-width: none; height: 340px; }
  .mobile-chart-note { display: block; position: sticky; left: 12px; width: max-content; margin: 0 0 4px 12px; color: var(--ink-soft); font: 400 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
  .source-rail { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
  .source-rail h3, .source-note { grid-column: 1/-1; }
  .source-item { margin: 0; }
  .notes-band { grid-template-columns: 1fr; }
  .note { border-right: 0; border-bottom: 1px solid var(--rule); }
  .note:last-child { border-bottom: 0; }
  .nearby-grid { grid-template-columns: repeat(2,1fr); }
  .nearby-grid a:nth-child(2) { border-right: 0; }
  .site-footer { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 480px) {
  .atlas-hero { min-height: 360px; }
  h1 { font-size: 54px; }
  .home-page .atlas-hero h1 { font-size: 40px; }
  .hero-index { max-width: 290px; line-height: 1.5; }
  .search-wrap { grid-template-columns: 1fr 54px; }
  .search-wrap button { width: 54px; }
  .search-wrap input { padding-left: 52px; font-size: 16px; }
  .search-placeholder { min-height: 64px; padding-left: 52px; font-size: 16px; }
  .search-icon { left: 15px; width: 24px; }
  .content { padding-inline: 12px; }
  .section-heading { padding-inline: 4px; }
  .section-heading h2 { font-size: 14px; }
  .plate-main { grid-template-columns: 1fr; }
  .plate-reading { padding-right: 0; border-right: 0; border-bottom: 1px solid var(--rule-pale); }
  .big-reading { font-size: 48px; }
  .ruled-row { grid-template-columns: minmax(120px,1.3fr) .7fr; gap: 8px; }
  .ruled-row span:last-child { display: none; }
  .popular-places { grid-template-columns: 1fr; }
  .place-card, .place-card:nth-child(2) { min-height: 78px; border-right: 0; border-bottom: 1px dotted var(--rule); }
  .place-card:last-child { border-bottom: 0; }
  .place-card { grid-template-columns: 62px 1fr; }
  .state-symbol { width: 60px; height: 64px; }
  .state-icon { width: 58px; height: 58px; }
  .detail-reading h1 { font-size: 54px; }
  .detail-value { font-size: 58px; }
  .detail-change { font-size: 26px; }
  .source-rail { grid-template-columns: 1fr; }
  .nearby-grid { grid-template-columns: 1fr; }
  .nearby-grid a { border-right: 0; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Mobile homepage opening shares the hub's image, wash and form geometry. */
@media(max-width:760px) {
 .national-field-atlas-home .home-page .atlas-hero { box-sizing: border-box; height: 360px; min-height: 360px; padding: 26px 18px 95px; overflow: visible; isolation: isolate; }
 .national-field-atlas-home .atlas-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg,#f3f7f6e8 0%,#f3f7f699 24%,transparent 46%,transparent 76%,#f3f7f6b3 100%); }
 .national-field-atlas-home .hero-coordinates { display: none; }
 .national-field-atlas-home .hero-index::after { content: none; display: none; }
 .national-field-atlas-home .atlas-hero .search-wrap { position: absolute; top: auto; bottom: 20px; left: 18px; right: 18px; margin: 0; width: auto; height: 52px; box-sizing: border-box; border-color: var(--rule); }
 .national-field-atlas-home .atlas-hero .search-wrap input { height: 50px; font-size: 17px; }
 .national-field-atlas-home .atlas-hero .search-wrap #results { top: 51px; }
}

@media(max-width:760px) {
 .national-field-atlas-home .masthead { height: 66px; min-height: 66px; box-sizing: border-box; }
 .national-field-atlas-home .site-footer { display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
}

@media(min-width:761px) {
 .national-field-atlas-home .masthead { height: 78px; min-height: 78px; box-sizing: border-box; }
 .national-field-atlas-home .home-page .atlas-hero { min-height: 360px; height: 360px; box-sizing: border-box; padding-top: 32px; padding-bottom: 24px; overflow: visible; }
}

@media(max-width:760px) {
 .national-field-atlas-home .hero-copy { text-align: center; }
 .national-field-atlas-home .hero-index { justify-content: center; margin-inline: auto; }
 .national-field-atlas-home .search-wrap { grid-template-columns: minmax(0,1fr) 54px; }
 .national-field-atlas-home .search-wrap button { width: 54px; display: grid; place-items: center; padding: 0; }
 .national-field-atlas-home .search-wrap button svg { width: 24px; height: 16px; }
}

/* Readings first, with a full-width chart and one coherent places list. */
.national-field-atlas-home .observation-grid { gap: 24px; }
.national-field-atlas-home .observation-plate { border: 0; border-top: 1px solid var(--rule); background: transparent; }
.national-field-atlas-home .plate-head { padding: 16px 0 0; border: 0; }
.national-field-atlas-home .plate-main { display: flex; flex-direction: column; gap: 16px; padding: 16px 0; }
.national-field-atlas-home .plate-reading { width: 100%; min-width: 0; display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 8px 14px; }
.national-field-atlas-home .plate-reading h3 { grid-column: 1 / -1; margin: 0; }
.national-field-atlas-home .plate-reading .big-reading { font-size: 36px; white-space: nowrap; }
.national-field-atlas-home .plate-reading .status { grid-column: 1 / -1; }
.national-field-atlas-home .plate-chart { width: 100%; height: 140px; }
.national-field-atlas-home .plate-chart svg { width: 100%; height: 100%; }
.national-field-atlas-home .plate-foot { padding-inline: 0; gap: 12px; flex-wrap: wrap; }
.national-field-atlas-home .popular-places { display: grid; grid-auto-flow: column; grid-auto-columns: 25%; grid-template-columns: none; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-block: 1px solid var(--rule); }
.national-field-atlas-home .popular-places::-webkit-scrollbar { display: none; }
.national-field-atlas-home .place-card { display: grid; grid-template-columns: 76px minmax(0,1fr); align-items: center; min-height: 142px; padding: 12px 16px; border: 0; border-right: 1px solid var(--rule); scroll-snap-align: start; }
.national-field-atlas-home .place-card .state-symbol { display: grid; opacity: .62; filter: grayscale(1); }
.national-field-atlas-home .place-card > span:last-child { display: block; }
.national-field-atlas-home .place-card strong { font-size: 20px; }
.national-field-atlas-home .place-card b { margin-top: 11px; white-space: nowrap; font-size: 18px; }
@media(max-width:760px) {
 .national-field-atlas-home .observation-grid { grid-template-columns: 1fr; }
 .national-field-atlas-home .condition-card-grid { grid-template-columns: 1fr; }
 .national-field-atlas-home .condition-image-card { display: grid; grid-template-columns: 42% minmax(0,1fr); }
 .national-field-atlas-home .condition-card-art { min-height: 124px; border-right: 1px solid var(--rule-pale); border-bottom: 0; }
 .national-field-atlas-home .condition-card-copy { min-height: 124px; display: block; padding: 13px; }
 .national-field-atlas-home .condition-card-reading { margin-top: 14px; text-align: left; }
 .national-field-atlas-home .condition-card-copy strong { font-size: 19px; white-space: nowrap; }
 .national-field-atlas-home .condition-card-copy .condition-card-state { font-size: 12px; }
 .national-field-atlas-home .popular-places { grid-auto-columns: 86%; }
 .national-field-atlas-home .place-card { grid-template-columns: 88px minmax(0,1fr); min-height: 136px; border-bottom: 0; }
 .national-field-atlas-home .place-card .state-symbol { width: 84px; height: 84px; }
 .national-field-atlas-home .place-card .state-icon { width: 80px; height: 80px; }
 .national-field-atlas-home .plate-reading .big-reading { font-size: 30px; }
 .national-field-atlas-home .plate-reading .change { font-size: 11px; }
}