/* BirdScope: eBird Science forest green, white surfaces, text-only branding. */
:root {
  --ink: #25302a; --muted: #68736c; --green: #296239; --green-dark: #1c3022;
  --border: #dfe5df; --bg: #f7f9f6;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: var(--ink); background: var(--bg); font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; font-size: 16px; line-height: 1.6; }
button, input, select { font: inherit; }
button { cursor: pointer; color: inherit; }
button:disabled, select:disabled { cursor: not-allowed; opacity: .55; }
a { color: inherit; text-decoration: none; }
svg { vertical-align: middle; flex-shrink: 0; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: clamp(1.8rem, 2.8vw, 2.6rem); line-height: 1.2; letter-spacing: -.045em; font-weight: 600; }
h2 { font-size: 1.2rem; line-height: 1.4; letter-spacing: -.025em; font-weight: 600; }
h3 { font-size: 1.08rem; line-height: 1.45; letter-spacing: -.015em; font-weight: 600; }
small, .small { font-size: .8rem; line-height: 1.75; color: var(--muted); }
.muted { color: var(--muted); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
[tabindex]:focus-visible, summary:focus-visible { outline: 3px solid #40718f; outline-offset: 4px; }
.skip { position: fixed; top: -80px; left: 20px; padding: 12px 18px; background: white; z-index: 100; }
.skip:focus { top: 15px; }

/* Sidebar and workspace navigation */
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 10; display: flex; width: 246px; flex-direction: column; padding: 30px 20px 24px; background: var(--green-dark); color: #f3f7f0; }
.brand { display: flex; flex-direction: column; padding: 0 11px; margin-bottom: 48px; color: white; line-height: 1.2; white-space: nowrap; }
.brand:hover { color: #cfebbf; }
.brand-word { font-size: 1.8rem; font-weight: 600; letter-spacing: -.065em; }
.copyright { color: #a8d58f; }
.brand-sub { margin-top: 6px; color: #99b09e; font-size: .7rem; font-weight: 550; letter-spacing: .11em; }
.workspace-label, .mini-label { color: #8ea395; font-size: .7rem; font-weight: 600; letter-spacing: .12em; }
.workspace-label { margin: 0 12px 14px; }
.sidebar nav { display: flex; flex-direction: column; gap: 6px; }
.nav-link { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 11px 12px; border-radius: 5px; color: #b9c9bd; font-size: .875rem; font-weight: 500; white-space: nowrap; transition: color .15s, background .15s; }
.nav-link:hover { color: white; background: #284530; }
.nav-link.active { color: var(--green-dark); background: #cfebbf; font-weight: 650; }
.sidebar-study { margin: auto 8px 32px; padding: 18px 15px; border: 1px solid #3c5542; border-radius: 6px; }
.sidebar-study strong { display: block; margin: 10px 0 4px; font-size: .9rem; font-weight: 600; }
.sidebar-study p { color: #aebfb2; font-size: .8rem; line-height: 1.7; }
.side-rule { height: 1px; margin: 16px 0 12px; background: #3c5542; }
.sidebar-study > span { display: block; color: #c3d2c5; font-size: .75rem; }
.sidebar-study small { display: block; margin-top: 3px; color: #8fa293; font-size: .75rem; }
.sidebar-bottom { padding: 0 10px; color: #bdcbbf; font-size: .75rem; }
.sidebar-bottom small { display: block; margin-top: 4px; color: #849a89; font-size: .75rem; }
.workspace { min-width: 0; min-height: 100vh; margin-left: 246px; }
.topbar { display: flex; align-items: center; justify-content: space-between; height: 72px; padding: 0 36px; gap: 20px; border-bottom: 1px solid var(--border); background: white; color: #738074; font-size: .8rem; }
.breadcrumbs span { padding: 0 12px; color: #a5afa5; }
.header-right { display: flex; align-items: center; gap: 24px; }
.sample-badge { padding: 5px 9px; border: 1px solid #dce8d6; border-radius: 4px; background: #f1f6ed; color: #607454; font-size: .7rem; font-weight: 650; letter-spacing: .06em; }
main, .footer { width: min(1480px, 100%); margin-inline: auto; }
main { padding: 30px 36px 42px; outline: none; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-bottom: 27px; }
.eyebrow { color: var(--green); font-size: .75rem; letter-spacing: .11em; font-weight: 600; margin-bottom: 8px; }
.lead { color: var(--muted); font-size: 1rem; margin-top: 9px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid #cdd8ca; border-radius: 5px; background: white; padding: 11px 17px; color: var(--green); font-size: .875rem; font-weight: 550; line-height: 1.5; transition: background .15s, border-color .15s; }
.button:hover { background: #f0f6ed; border-color: #99b28e; }
.button.primary { background: var(--green); color: white; border-color: var(--green); }
.button.primary:hover { background: var(--green-dark); border-color: var(--green-dark); }
.text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--green); font-size: .875rem; font-weight: 500; }
.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Controls and summary figures */
.filterbar { display: grid; grid-template-columns: 1.3fr 1fr 1.15fr .7fr; background: white; border: 1px solid var(--border); border-radius: 6px; padding: 17px 0; margin-bottom: 22px; }
.filterbar > div, .filterbar > label { padding: 0 23px; min-width: 0; border-left: 1px solid #e8ede6; }
.filterbar > :first-child { border-left: 0; }
.filter-label { display: block; color: #72816e; font-size: .75rem; letter-spacing: .065em; font-weight: 550; margin-bottom: 5px; }
.filterbar strong { display: block; font-size: .9rem; font-weight: 600; }
.latin { display: block; font-size: .8rem; color: #7b8876; font-style: italic; margin-top: 1px; }
.filterbar select { width: 100%; border: 0; background: transparent; color: var(--ink); font-size: .9rem; font-weight: 500; min-height: 30px; padding: 0 18px 0 0; }
.version { display: flex; justify-content: center; flex-direction: column; }
.version .muted { font-weight: 400; }
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 25px; background: white; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.metric { display: flex; flex-direction: column; padding: 22px 24px; min-width: 0; border-left: 1px solid var(--border); }
.metric:first-child { border-left: 0; }
.metric.accent { background: #eff6eb; }
.metric-label { font-size: .875rem; color: #657260; }
.metric > strong { margin: 8px 0; font-size: clamp(1.65rem, 2.25vw, 2.15rem); font-weight: 550; letter-spacing: -.04em; line-height: 1.25; color: #233e26; }
.metric strong small { font-size: .9rem; font-weight: 400; letter-spacing: 0; margin-left: 4px; }
.metric-detail { font-size: .8rem; color: #73806c; }
.explore-grid { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(300px, 1fr); gap: 24px; align-items: start; }
.panel { background: white; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; min-width: 0; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px 19px; gap: 16px; flex-wrap: wrap; }
.panel-heading .eyebrow { margin-bottom: 5px; }
.panel-heading h2 { font-size: 1.12rem; }
.panel-heading > .muted { font-size: .8rem; }
.segmented { display: flex; align-items: stretch; background: #f3f6ef; padding: 3px; border: 1px solid #e5ebdf; border-radius: 5px; }
.segmented button { border: 0; background: transparent; border-radius: 3px; padding: 7px 10px; font-size: .8rem; color: #6b7962; }
.segmented button.selected { background: white; color: var(--green); box-shadow: 0 1px 3px #20372215; font-weight: 600; }
.pill { display: inline-block; background: #f3f7ef; border: 1px solid #e2e9da; border-radius: 4px; padding: 4px 9px; color: #61764f; font-size: .75rem; white-space: nowrap; }

/* Map and timeline */
.map-wrap { position: relative; overflow: hidden; background: #edf3f8; border-top: 1px solid #e1e8e9; border-bottom: 1px solid #e1e8e9; }
.geographic-map { display: block; width: 100%; aspect-ratio: 960 / 650; min-height: 390px; max-height: 630px; }
.map-meta { position: absolute; top: 17px; left: 18px; right: 18px; display: flex; justify-content: space-between; gap: 12px; z-index: 1; pointer-events: none; }
.map-meta span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid #dce5e5; border-radius: 4px; background: #ffffffeb; color: #536b65; font-size: .75rem; }
.map-land path { fill: #fafbf6; stroke: #ced8cf; stroke-width: 1.1; fill-rule: evenodd; }
.map-graticule line { stroke: #b4cfe1; stroke-width: .7; stroke-dasharray: 3 6; opacity: .55; }
.map-graticule text { fill: #718c9a; font-size: 14px; }
.lake-label { fill: #7d9aaa; font-size: 15px; font-style: italic; letter-spacing: 1.8px; text-anchor: middle; pointer-events: none; }
.state-label { fill: #9aa58f; font-size: 14px; letter-spacing: 1.8px; pointer-events: none; }
.data-cell { stroke: #fbfefb; stroke-width: .65; cursor: pointer; fill-rule: evenodd; transition: fill .18s; }
.data-cell:hover, .data-cell:focus, .data-cell.cell-selected { stroke: var(--green-dark); stroke-width: 2.8; outline: 0; }
.map-legend { position: absolute; bottom: 22px; left: 20px; width: 218px; padding: 13px 15px; background: #fffffff2; border: 1px solid #dce4dd; border-radius: 4px; pointer-events: none; }
.map-legend strong { display: block; font-size: .75rem; font-weight: 600; margin-bottom: 8px; }
.gradient { height: 8px; border-radius: 2px; background: linear-gradient(to right, #edf5dc, #a1d485, #44a25b, #1c5530); }
.gradient.diverging { background: linear-gradient(to right, #b84831, #edf1ed, #007777); }
.legend-ticks { display: flex; justify-content: space-between; font-size: .75rem; color: #617357; margin-top: 5px; }
.legend-note { display: block; font-size: .75rem; color: #7b8871; margin-top: 5px; line-height: 1.4; }
.map-credit { position: absolute; bottom: 7px; right: 10px; font-size: .75rem; color: #748b8f; }
.timeline { display: flex; align-items: center; gap: 19px; padding: 22px 25px; }
.play-button { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border: 1px solid #c9d8bf; border-radius: 50%; background: #f1f7e9; color: var(--green); }
.play-button:hover { background: #dceccf; }
.timeline-control { flex: 1; min-width: 0; }
.timeline-control label { display: flex; align-items: center; gap: 15px; font-size: .875rem; }
.timeline-control label > span:first-child { font-size: .75rem; letter-spacing: .08em; color: #738468; }
.timeline-control label strong { font-weight: 600; }
.season-name { margin-left: auto; font-size: .75rem; color: #829075; }
.timeline-control input { display: block; width: 100%; margin: 13px 0 0; height: 19px; accent-color: var(--green); cursor: pointer; }
.range-labels { display: flex; justify-content: space-between; font-size: .75rem; color: #819072; margin-top: 5px; }

/* Charts, cell inspection and tables */
.insight-stack { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.cycle-chart { display: block; width: 100%; padding: 0 18px; cursor: pointer; }
.chart-grid { stroke: #e6ece0; stroke-width: 1; }
.chart-label { fill: #78856e; font-size: 12px; font-family: inherit; }
.chart-note { margin: 5px 24px 20px; font-size: .8rem; color: #76876a; line-height: 1.7; }
.small-divider { height: 1px; background: #e5ebdf; margin: 0 24px; }
.takeaway { display: flex; gap: 14px; padding: 21px 24px; }
.number-label { font-size: .75rem; letter-spacing: .04em; font-weight: 600; color: #718d59; flex-shrink: 0; padding-top: 3px; }
.takeaway strong { font-size: .9rem; font-weight: 600; }
.takeaway p { margin-top: 7px; color: #76866b; font-size: .875rem; line-height: 1.7; }
.detail-panel { padding: 24px; }
.detail-panel > p:not(.eyebrow) { margin-top: 10px; color: #718266; font-size: .875rem; line-height: 1.7; }
.inspector-hint { display: flex; align-items: center; gap: 9px; margin-top: 19px; color: #839476; font-size: .8rem; }
.inspector-value { font-size: 2rem; font-weight: 500; letter-spacing: -.04em; margin: 10px 0; color: var(--green); }
.inspector-value small { font-size: .875rem; margin-left: 5px; }
.detail-list { font-size: .875rem; margin: 10px 0; }
.detail-list > div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid #eef2e9; padding: 9px 0; }
.detail-list dt { color: #788b6c; }
.detail-list dd { margin: 0; font-variant-numeric: tabular-nums; }
.source-note { display: flex; align-items: start; gap: 10px; color: #809172; padding: 0 3px; }
.source-note p { font-size: .8rem; line-height: 1.7; }
.source-note a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.region-panel { margin-top: 25px; }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; text-align: left; font-size: .875rem; font-variant-numeric: tabular-nums; }
th { background: #f6f8f2; color: #728265; font-size: .8rem; font-weight: 500; padding: 12px 24px; border-bottom: 1px solid #e2e9da; white-space: nowrap; }
td { padding: 19px 24px; border-bottom: 1px solid #e9eee2; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fafcf7; }
.table-region { display: inline-flex; align-items: center; gap: 14px; padding: 0; border: 0; background: none; color: var(--green); font-size: .875rem; font-weight: 550; }
.table-region:hover { text-decoration: underline; text-underline-offset: 3px; }
.bar-value { display: flex; align-items: center; gap: 20px; }
.inline-bar { width: 100px; height: 5px; border-radius: 2px; background: #edf3e4; overflow: hidden; }
.inline-bar i { display: block; height: 100%; background: #89b765; border-radius: 2px; }
.direction { display: inline-block; padding: 2px 6px; border-radius: 3px; background: #f3f0e5; color: #8a744a; font-size: .75rem; margin-left: 8px; }
.direction.declining { background: #f8ece6; color: #a35c41; }
.direction.increasing { background: #edf5e1; color: #537b36; }
.panel-note { padding: 17px 24px; border-top: 1px solid #e6ebdf; color: #77896a; font-size: .8rem; line-height: 1.75; }
.forest-chart { display: block; width: 100%; padding: 0 24px; }
.science-callout { display: flex; align-items: start; gap: 24px; padding: 26px; margin-top: 25px; border: 1px solid #dce7d4; border-left: 3px solid var(--green); background: #f0f6e9; border-radius: 4px; }
.science-callout > div { flex: 1; min-width: 0; }
.science-callout h3 { margin-bottom: 9px; }
.science-callout p { color: #6a805b; font-size: .9rem; line-height: 1.8; }
.science-callout > a { align-self: center; flex-shrink: 0; }
.footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 18px; border-top: 1px solid var(--border); padding: 24px 44px 30px; color: #7a876e; font-size: .8rem; }
.footer > span:first-child { color: var(--green); font-weight: 500; }
.footer a { display: inline-flex; align-items: center; gap: 6px; }

/* Experiments */
.notice { display: flex; align-items: center; gap: 16px; padding: 16px 20px; margin-bottom: 23px; border: 1px solid #e3e8dc; background: #f0f4e8; border-radius: 5px; }
.notice p { color: #6d7c5d; font-size: .875rem; }
.notice .pill { background: white; }
.model-table td { padding-block: 21px; }
.model-table td:not(:first-child) { font-size: 1.1rem; }
.model-index { color: #8a9a7c; font-size: .75rem; margin-right: 14px; }
.table-sub { display: block; color: #7b8d6c; font-size: .8rem; margin: 5px 0 0 31px; }
.experiment-result { display: flex; gap: 18px; padding: 23px 26px; background: #f2f6eb; border-top: 1px solid #dfe8d4; }
.result-icon { display: grid; place-content: center; width: 38px; height: 38px; background: #e4eecf; color: #6c823f; border-radius: 50%; font-size: 25px; flex-shrink: 0; }
.experiment-result strong { font-size: .95rem; font-weight: 600; }
.experiment-result p { margin-top: 5px; color: #728363; font-size: .875rem; line-height: 1.8; max-width: 900px; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; margin-top: 25px; align-items: start; }
.funnel { padding: 2px 24px 20px; }
.funnel-row { margin-bottom: 17px; }
.funnel-row > div:first-child { display: flex; justify-content: space-between; gap: 15px; font-size: .875rem; margin-bottom: 6px; }
.funnel-row strong { font-weight: 550; }
.funnel-track { height: 6px; background: #edf2e5; border-radius: 2px; overflow: hidden; }
.funnel-track i { display: block; height: 100%; background: #7cab66; border-radius: 2px; }
.funnel-row:first-child .funnel-track i { background: #ccdcbc; }
.funnel-row small { display: block; font-size: .75rem; color: #869477; margin-top: 5px; }
.calibration { padding: 4px 24px; }
.calibration svg { width: 100%; max-height: 330px; }
.chart-key { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; margin: 8px 0 20px; font-size: .8rem; color: #718461; }
.chart-key span { display: inline-flex; align-items: center; gap: 6px; }
.chart-key i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.panel-inner { padding: 22px 24px; }
.panel-inner h3 { font-size: 1rem; }
.method-list { padding-left: 19px; color: #718563; font-size: .875rem; line-height: 1.9; }

/* Products and provenance */
.product-grid { display: grid; grid-template-columns: 315px minmax(0, 1fr); gap: 25px; align-items: start; }
.product-builder { padding: 25px; }
.product-builder h2 { margin-bottom: 24px; }
.product-builder > label { display: block; font-size: .875rem; font-weight: 500; color: #647953; margin: 18px 0; }
.product-builder select { display: block; width: 100%; margin-top: 8px; border: 1px solid #d6e0cc; border-radius: 4px; background: white; color: var(--ink); padding: 12px 10px; font-size: .875rem; }
.extract-summary { padding: 16px; background: #f2f7e9; border-radius: 4px; margin: 24px 0; }
.extract-summary strong { display: block; font-size: 1.4rem; font-weight: 550; color: var(--green); }
.extract-summary span { display: block; color: #768b61; font-size: .8rem; }
.product-builder .button { width: 100%; margin-bottom: 12px; }
.product-builder .small { margin-top: 4px; }
.preview-table th { text-transform: capitalize; }
.preview-table td { font-size: .8rem; }
.download-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 23px; }
.download-card { display: flex; align-items: start; flex-direction: column; background: white; border: 1px solid var(--border); border-radius: 5px; padding: 25px; transition: border-color .15s; }
.download-card:hover { border-color: #88a76c; }
.download-card > svg { color: #629345; margin-bottom: 16px; }
.download-card strong { font-size: 1rem; font-weight: 600; }
.download-card span { color: #798e66; font-size: .875rem; line-height: 1.75; margin: 9px 0 21px; }
.download-card b { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 550; color: var(--green); margin-top: auto; }
.pipeline-flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; padding: 12px 25px 30px; }
.pipeline-flow > div { padding-top: 17px; border-top: 2px solid #bad1a6; }
.pipeline-flow span { display: block; font-size: .75rem; color: #7c9465; margin-bottom: 10px; }
.pipeline-flow strong { display: block; font-size: 1.1rem; font-weight: 550; }
.pipeline-flow small { display: block; font-size: .8rem; color: #7b9166; margin-top: 6px; }
.prose { padding: 27px; }
.prose h2 { margin-bottom: 22px; }
.prose details { border-top: 1px solid #e4ecda; padding: 17px 0; }
.prose summary { font-size: .95rem; cursor: pointer; font-weight: 550; line-height: 1.65; }
.prose p { font-size: .9rem; line-height: 1.85; color: #708661; margin: 13px 0; }
.prose .small { font-size: .8rem; }
.methods-cols > div { display: flex; flex-direction: column; gap: 25px; }
.benchmark-values { display: flex; gap: 38px; margin-top: 26px; }
.benchmark-values strong { display: block; font-size: 1.9rem; font-weight: 500; letter-spacing: -.04em; color: var(--green); }
.benchmark-values small { font-size: .875rem; }
.benchmark-values span { font-size: .8rem; color: #7c9266; }
.source-list > a { display: flex; justify-content: space-between; align-items: center; gap: 13px; padding: 15px 0; border-top: 1px solid #e5edda; }
.source-list strong { display: block; font-size: .9rem; font-weight: 550; }
.source-list small { display: block; font-size: .8rem; margin-top: 3px; }
.source-list svg { color: #7b955f; }
.toast { position: fixed; bottom: 25px; right: 25px; padding: 15px 23px; border-radius: 5px; background: var(--green-dark); color: white; box-shadow: 0 5px 24px #1c302225; z-index: 30; font-size: .875rem; max-width: calc(100vw - 40px); }
.toast[hidden] { display: none; }
.load-error { max-width: 650px; margin: 10vh auto; }
.load-error p { margin: 18px 0; }

@media (max-width: 1150px) {
  .sidebar { width: 80px; padding: 27px 11px 22px; }
  .brand { align-items: center; padding: 0; margin-bottom: 41px; }
  .brand-name, .brand-sub, .workspace-label, .nav-link span, .sidebar-study, .sidebar-bottom { display: none; }
  .brand-word { font-size: 2rem; }
  .sidebar nav { gap: 9px; }
  .nav-link { justify-content: center; padding: 12px; }
  .workspace { margin-left: 80px; }
  .topbar, main, .footer { padding-inline: 30px; }
  .explore-grid { grid-template-columns: minmax(0, 1.65fr) minmax(290px, 1fr); gap: 20px; }
  .panel-heading, .metric { padding: 20px; }
  .filterbar > div, .filterbar > label { padding-inline: 18px; }
  .metric > strong { font-size: 1.8rem; }
  .metric-label { font-size: .8rem; }
  .season-name { display: none; }
  .map-legend { width: 194px; left: 14px; bottom: 19px; padding: 11px 12px; }
  .science-callout { flex-wrap: wrap; }
  .product-grid { grid-template-columns: 285px minmax(0, 1fr); }
}
@media (max-width: 920px) {
  .explore-grid, .two-col { grid-template-columns: minmax(0, 1fr); }
  .insight-stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .source-note { grid-column: 1 / -1; }
  .geographic-map { min-height: 0; max-height: 570px; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric:nth-child(3) { border-left: 0; border-top: 1px solid var(--border); }
  .metric:nth-child(4) { border-top: 1px solid var(--border); }
  .metric-label { font-size: .875rem; }
  .filterbar { grid-template-columns: 1.2fr 1fr 1fr; }
  .filterbar .version { display: none; }
  .filterbar.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
  .filterbar.compact > :nth-child(3) { border-left: 0; }
  .pipeline-flow { gap: 18px; }
  .pipeline-flow strong { font-size: 1rem; }
  .download-grid { grid-template-columns: minmax(0, 1fr); }
  .science-callout > div { flex-basis: 80%; }
}
@media (max-width: 700px) {
  .sidebar { position: sticky; top: 0; width: 100%; height: 66px; flex-direction: row; align-items: center; justify-content: space-between; padding: 8px 18px; box-shadow: 0 1px 0 #314938; }
  .brand { flex-direction: row; align-items: center; margin: 0; }
  .brand-name { display: inline; }
  .brand-word { font-size: 1.35rem; }
  .sidebar nav { flex-direction: row; gap: 3px; }
  .nav-link { min-height: 42px; padding: 10px; }
  .nav-link svg { width: 18px; height: 18px; }
  .workspace { margin-left: 0; }
  .topbar { height: 50px; padding: 0 22px; font-size: .75rem; }
  .header-right { display: none; }
  main { padding: 22px 22px 34px; }
  .page-heading { align-items: start; flex-direction: column; gap: 17px; margin-bottom: 23px; }
  .page-heading .button { padding: 9px 13px; }
  .lead { font-size: .95rem; }
  .filterbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .species-filter { grid-column: 1 / -1; margin-bottom: 18px; }
  .filterbar > :nth-child(2) { border-left: 0; }
  .filterbar.compact > :nth-child(2) { border-left: 1px solid var(--border); }
  .filterbar > div, .filterbar > label { padding-inline: 17px; }
  .product-grid { grid-template-columns: minmax(0, 1fr); }
  .product-builder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
  .product-builder > .eyebrow, .product-builder > h2, .product-builder > .small { grid-column: 1 / -1; }
  .product-builder > h2 { margin-bottom: 10px; }
  .product-builder .button { align-self: center; min-height: 46px; }
  .download-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pipeline-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 25px; }
  .pipeline-flow strong { font-size: 1.1rem; }
  .science-callout .number-label { display: none; }
  .science-callout > div { flex-basis: 100%; }
  .footer { padding: 23px 22px 28px; gap: 14px; }
  .footer > span:nth-child(2) { order: 3; flex-basis: 100%; }
}
@media (max-width: 480px) {
  .sidebar { padding-inline: 13px; }
  .brand-name { display: none; }
  .sidebar nav { gap: 1px; }
  .nav-link { padding: 9px; }
  .topbar { padding-inline: 18px; }
  main { padding-inline: 16px; }
  .page-heading { gap: 15px; }
  h1 { font-size: 1.85rem; }
  .lead { font-size: .9rem; line-height: 1.7; }
  .metric { padding: 17px; }
  .metric-label, .metric strong small { font-size: .8rem; }
  .metric > strong { font-size: 1.7rem; }
  .metric-detail { font-size: .75rem; }
  .filterbar select, .filterbar strong { font-size: .8rem; }
  .filterbar > div, .filterbar > label { padding-inline: 14px; }
  .insight-stack { grid-template-columns: minmax(0, 1fr); }
  .panel-heading { padding: 19px; }
  .panel-heading h2 { font-size: 1.1rem; }
  .geographic-map { min-height: 355px; }
  .map-meta { top: 10px; left: 10px; right: 10px; gap: 6px; }
  .map-meta span { font-size: .75rem; padding: 5px 7px; }
  .map-meta span:first-child svg { display: none; }
  .map-legend { width: 178px; left: 10px; bottom: 21px; padding: 10px; }
  .map-credit { bottom: 4px; }
  .timeline { padding: 18px 16px; gap: 12px; }
  .play-button { width: 35px; height: 35px; }
  .timeline-control label { gap: 10px; }
  .timeline-control label strong { font-size: .8rem; }
  .notice { align-items: start; flex-direction: column; gap: 10px; }
  .product-builder { display: block; padding: 22px; }
  .download-grid { grid-template-columns: minmax(0, 1fr); }
  .experiment-result { padding: 22px; }
  .result-icon { display: none; }
  .prose, .science-callout { padding: 23px; }
  .benchmark-values { gap: 25px; }
  .benchmark-values strong { font-size: 1.7rem; }
  .footer { padding-inline: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}
@media print {
  .sidebar, .topbar, .footer, .button, .filterbar, .play-button, .segmented { display: none; }
  .workspace { margin-left: 0; }
  main { padding: 0; width: 100%; }
  .panel, .metric, .science-callout { break-inside: avoid; }
  .explore-grid, .two-col, .insight-stack { display: block; }
  .panel { margin-bottom: 20px; }
  .geographic-map { max-height: 500px; }
  .map-wrap { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body { background: white; }
}