:root {
  --ink: #18312d;
  --ink-2: #2d4843;
  --paper: #f3f0e8;
  --white: #fffdf7;
  --line: #c8cec4;
  --muted: #6d7b75;
  --lime: #d4f251;
  --teal: #176b63;
  --orange: #ff7043;
  --blue: #75a9d1;
  --shadow: 0 18px 50px rgba(24, 49, 45, .08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Manrope, system-ui, sans-serif;
  line-height: 1.5;
}
button, input, select { font: inherit; }
a { color: inherit; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 99; background: var(--lime); padding: .7rem 1rem; }
.skip-link:focus { top: 1rem; }

.site-header {
  min-height: 72px;
  padding: 0 clamp(24px, 5vw, 80px);
  display: flex;
  align-items: center;
  gap: 3rem;
  border-bottom: 1px solid rgba(24,49,45,.18);
}
.brand { display: inline-flex; align-items: center; gap: .75rem; font-weight: 700; text-decoration: none; }
.brand-mark { position: relative; width: 26px; height: 26px; display: inline-block; transform: rotate(45deg); }
.brand-mark i { position: absolute; inset: 7px; border-radius: 50%; background: var(--lime); border: 1px solid var(--ink); }
.brand-mark i:first-child { transform: translate(-7px, 7px); }
.brand-mark i:last-child { transform: translate(7px, -7px); }
nav { display: flex; gap: 2rem; margin-right: auto; }
nav a { font-size: .85rem; font-weight: 600; text-decoration: none; }
nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.dataset-badge { display: flex; align-items: center; gap: .5rem; font: 500 .68rem DM Mono, monospace; letter-spacing: .07em; text-transform: uppercase; }
.dataset-badge span { width: 7px; height: 7px; background: var(--teal); border-radius: 50%; box-shadow: 0 0 0 4px rgba(23,107,99,.12); }

.hero { padding: clamp(58px, 9vw, 130px) clamp(24px, 7vw, 112px) 0; background: var(--ink); color: var(--white); }
.eyebrow, .section-number, .aside-label, .detail-kicker, .stat-label {
  font: 500 .68rem DM Mono, monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.eyebrow { color: var(--lime); margin-bottom: 2rem; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(240px, .55fr); gap: 6vw; align-items: end; }
h1 { margin: 0; font-size: clamp(3rem, 6.3vw, 7rem); line-height: .96; letter-spacing: -.065em; font-weight: 500; }
h1 em { display: inline-block; margin-top: .24em; color: var(--lime); font-style: normal; }
.hero-copy { max-width: 660px; margin: 2.2rem 0 0; color: #c6d0cb; font-size: clamp(1rem, 1.3vw, 1.25rem); }
.hero-aside { padding-bottom: .5rem; }
.aside-label { color: #82958e; }
.aside-value { font-size: 1.5rem; font-weight: 600; margin: .5rem 0 1.6rem; }
.hero-rule { height: 1px; background: #435c56; margin-top: 5rem; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); }
.stats article { padding: 2.2rem 2rem 2.6rem 0; border-right: 1px solid #435c56; }
.stats article:not(:first-child) { padding-left: 2rem; }
.stats article:last-child { border-right: 0; }
.stat-label { display: block; color: #82958e; }
.stats strong { display: block; margin-top: .4rem; font-size: clamp(2rem, 3vw, 3.5rem); letter-spacing: -.05em; font-weight: 500; }
.stats small { color: #9baca6; }

.section-shell { padding: clamp(72px, 9vw, 130px) clamp(24px, 7vw, 112px); }
.section-heading { display: grid; grid-template-columns: 1fr minmax(280px, 460px); gap: 3rem; align-items: end; margin-bottom: 3.5rem; }
.section-number { color: var(--teal); }
h2 { font-size: clamp(2.3rem, 4vw, 4.6rem); letter-spacing: -.06em; line-height: 1; margin: .7rem 0 0; font-weight: 500; }
.section-heading > p { color: var(--muted); margin: 0; }
.study-area { background: #dfe6d8; }
.study-static-figure { margin: 0; overflow: hidden; background: var(--white); border: 1px solid #b7c2b3; border-radius: 18px; box-shadow: var(--shadow); }
.study-static-figure img { display: block; width: 100%; height: auto; }
.study-static-figure figcaption { padding: 1rem 1.4rem; color: var(--muted); font-size: .78rem; border-top: 1px solid var(--line); }
.egg-map-header { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin: -1.8rem 0 1.1rem; }
.egg-map-subtitle { margin: 0; color: var(--muted); }
.egg-date-readout { text-align: right; white-space: nowrap; }
.egg-date-readout strong { display: block; font-size: clamp(1.1rem,2vw,1.55rem); font-weight: 600; }
.egg-date-readout span { color: var(--muted); font-size: .82rem; }
.egg-map-stage { display: grid; grid-template-columns: minmax(0,1.58fr) minmax(320px,.72fr); gap: 1rem; }
.egg-map-card, .egg-chart-card { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--white); box-shadow: 0 12px 35px rgba(34,70,60,.08); }
#egg-map { height: min(63vh,650px); min-height: 460px; }
.egg-side-panel { display: flex; min-height: 460px; flex-direction: column; padding: 1.25rem; }
.egg-metric-label { margin: 0; color: var(--muted); font-size: .78rem; }
.egg-metric-value { margin: .2rem 0 0; color: var(--orange); font-size: clamp(2.25rem,4.5vw,4.6rem); font-weight: 600; line-height: 1; letter-spacing: -.06em; }
.egg-metric-unit { margin: .25rem 0 1rem; color: var(--muted); font-size: .82rem; }
.egg-mini-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: .9rem; }
.egg-mini-stats > div { padding: .7rem .75rem; border-radius: 12px; background: #f3f6f2; }
.egg-mini-stats span { display: block; color: var(--muted); font-size: .7rem; }
.egg-mini-stats strong { display: block; margin-top: .1rem; font-size: 1rem; }
.egg-chart-heading { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; margin-top: auto; }
.egg-chart-heading h3 { margin: 0; font-size: .92rem; }
.egg-chart-heading span { color: var(--muted); font-size: .7rem; }
#egg-trend-chart { width: 100%; height: 205px; margin-top: .3rem; }
.egg-selection-note { min-height: 19px; margin: .3rem 0 0; color: var(--muted); font-size: .73rem; }
.egg-controls { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .9rem; margin-top: 1rem; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
#egg-play-button { width: 46px; height: 38px; border: 0; border-radius: 11px; background: var(--ink); color: white; cursor: pointer; font-size: .8rem; font-weight: 600; }
#egg-week-slider { width: 100%; accent-color: var(--orange); cursor: pointer; }
.egg-range-labels { display: flex; justify-content: space-between; color: var(--muted); font-size: .68rem; }
.egg-legend { display: flex; align-items: center; gap: .45rem; color: var(--muted); font-size: .72rem; white-space: nowrap; }
.egg-legend-gradient { width: 78px; height: 9px; border-radius: 999px; background: linear-gradient(90deg,#f6e8a7,#f4a259,#e5533d,#842b42); }
.leaflet-container { font-family: Manrope,system-ui,sans-serif; background: #edf2ed; }
.leaflet-control-attribution { font-size: 9px !important; }
.leaflet-tooltip { border: 0; border-radius: 10px; box-shadow: 0 8px 20px rgba(0,0,0,.16); }
.trap-tooltip strong { color: var(--ink); font-size: .86rem; }
.trap-tooltip span { color: var(--muted); font-size: .75rem; }
#egg-trend-chart .axis text { fill: var(--muted); font-size: 10px; }
#egg-trend-chart .axis path, #egg-trend-chart .axis line { stroke: var(--line); }

.control-bar {
  display: grid; grid-template-columns: 1fr auto 1.35fr; gap: 2rem; align-items: end;
  padding: 1.4rem; border: 1px solid var(--line); background: rgba(255,255,255,.25);
}
.two-controls { grid-template-columns: minmax(220px,.7fr) minmax(300px,1.3fr); }
.anomaly-controls { grid-template-columns: minmax(200px,.7fr) auto minmax(280px,1.1fr); }
.control-bar label > span, fieldset legend, .context-controls label { display: block; margin-bottom: .55rem; font-size: .73rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
select { width: 100%; min-height: 45px; padding: 0 .8rem; border: 1px solid #aab5ae; border-radius: 0; background: var(--white); color: var(--ink); }
fieldset { border: 0; padding: 0; margin: 0; }
.segmented { display: flex; }
.segmented input { position: absolute; opacity: 0; }
.segmented label { min-height: 45px; padding: .7rem 1rem; border: 1px solid #aab5ae; background: var(--white); cursor: pointer; }
.segmented label + input + label { border-left: 0; }
.segmented input:checked + label { color: var(--white); background: var(--ink); }
.lag-control > span { display: flex !important; justify-content: space-between; }
.lag-control output { color: var(--teal); }
input[type="range"] { width: 100%; accent-color: var(--teal); }
.range-labels { display: flex !important; justify-content: space-between; color: var(--muted); font-size: .68rem !important; text-transform: none !important; font-weight: 500 !important; }
.range-labels i { font-style: normal; }

.chart-card { min-width: 0; margin-top: 1rem; overflow: hidden; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow); }
.chart-meta { min-height: 100px; display: flex; align-items: center; gap: 2rem; padding: 1.2rem 1.6rem; border-bottom: 1px solid var(--line); }
.chart-meta > div:not(.association-card) { display: grid; grid-template-columns: auto auto; column-gap: .6rem; align-items: center; }
.chart-meta small { grid-column: 2; color: var(--muted); }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; grid-row: 1 / 3; }
.dot.egg { background: var(--orange); } .dot.env { background: var(--teal); }
.dot.prediction { background: var(--blue); }
.association-card { margin-left: auto; padding-left: 2rem; border-left: 1px solid var(--line); display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: .8rem; }
.association-card span { font: 500 .65rem DM Mono, monospace; color: var(--muted); }
.association-card strong { font-size: 2rem; line-height: 1; }
.association-card small { grid-column: 1 / 3; color: var(--muted); }
.main-plot { height: 550px; }
.chart-footnote { margin: 0; padding: .8rem 1.6rem 1.2rem; color: var(--muted); font-size: .75rem; }

.layer-tabs { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--line); margin-bottom: 2rem; }
.layer-tabs button { min-height: 118px; padding: 1.3rem 1.5rem; text-align: left; color: var(--ink); background: rgba(255,255,255,.25); border: 0; border-right: 1px solid var(--line); cursor: pointer; }
.layer-tabs button:last-child { border-right: 0; }
.layer-tabs button[aria-selected="true"] { background: var(--ink); color: var(--white); box-shadow: inset 0 -4px var(--lime); }
.layer-tabs span, .layer-label, .takeaway-card > span, .model-card span, .forest-heading span { display: block; color: var(--teal); font: 500 .65rem DM Mono, monospace; letter-spacing: .09em; text-transform: uppercase; }
.layer-tabs button[aria-selected="true"] span { color: var(--lime); }
.layer-tabs b { display: block; margin: .45rem 0 .15rem; font-size: 1rem; }
.layer-tabs small { color: var(--muted); }
.layer-tabs button[aria-selected="true"] small { color: #9fb0aa; }
.layer-panel[hidden] { display: none; }
.layer-intro { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(280px,.8fr); gap: 3rem; align-items: end; padding: 2.5rem 0; }
.layer-intro h3 { max-width: 820px; margin: .6rem 0 0; font-size: clamp(1.8rem,3vw,3.25rem); line-height: 1.08; letter-spacing: -.045em; font-weight: 500; }
.layer-intro > p { color: var(--muted); margin: 0; }
.results-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
.prediction-block { margin-top: 6rem; padding-top: 5rem; border-top: 1px solid var(--line); }
.subsection-heading { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(280px,.8fr); gap: 3rem; align-items: end; margin-bottom: 2rem; }
.subsection-heading h3 { margin: .6rem 0 0; font-size: clamp(1.8rem,3vw,3.25rem); line-height: 1.08; letter-spacing: -.045em; font-weight: 500; }
.subsection-heading > p { color: var(--muted); margin: 0; }
.prediction-plot { height: 500px; }
.takeaway-card, .model-card { min-height: 190px; padding: 2rem; border: 1px solid var(--line); }
.takeaway-card { background: var(--lime); }
.takeaway-card strong { display: block; max-width: 580px; margin: .8rem 0; font-size: 1.5rem; line-height: 1.25; }
.takeaway-card p, .model-card p { color: var(--ink-2); margin-bottom: 0; }
.model-card { display: grid; grid-template-columns: auto 1fr; gap: 2rem; align-items: center; background: var(--ink); color: var(--white); }
.model-card span { color: var(--lime); }
.model-card strong { display: block; font-size: 3.6rem; letter-spacing: -.06em; line-height: 1; }
.model-card small { color: #9fb0aa; }
.model-card p { color: #c6d0cb; }
.model-card.light { background: #dfe6d8; color: var(--ink); }
.model-card.light span { color: var(--teal); }
.model-card.light small, .model-card.light p { color: var(--muted); }
.short-layout { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(260px,.55fr); gap: 1rem; }
.short-layout > * { min-width: 0; }
.js-plotly-plot, .plot-container, .svg-container { max-width: 100% !important; }
.short-comparison-control { display: flex; justify-content: flex-end; margin-bottom: 1rem; }
.short-comparison-control fieldset { min-width: 420px; }
.short-chart-card { margin-top: 0; }
.forest-heading { display: flex; justify-content: space-between; align-items: end; padding: 1.5rem; border-bottom: 1px solid var(--line); }
.forest-heading h4 { margin: .35rem 0 0; font-size: 1.25rem; }
.forest-legend { display: flex; gap: 1rem; font-size: .72rem; }
.forest-legend span { display: flex; align-items: center; gap: .4rem; color: var(--muted); font-family: Manrope,sans-serif; letter-spacing: 0; text-transform: none; }
.forest-legend i { width: 10px; height: 10px; border-radius: 50%; }
.forest-legend .main { background: var(--teal); } .forest-legend .sensitivity { background: var(--orange); }
.short-plot { height: 420px; }
.short-findings { padding: 2rem; background: var(--ink); color: var(--white); }
.short-findings > strong { display: block; color: var(--lime); font-size: 2rem; line-height: 1.1; margin: 1.2rem 0; }
.short-findings > p { color: #aebdb7; }
.short-findings > div { display: grid; grid-template-columns: 100px 1fr; align-items: center; padding: 1rem 0; border-top: 1px solid #435c56; }
.short-findings b { font-size: 2rem; }
.short-findings small { color: #aebdb7; }
.short-findings .caution { margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid #435c56; font-size: .76rem; }
.short-findings .sd-note { padding: 1rem; margin-top: 1rem; background: rgba(212,242,81,.08); border: 1px solid rgba(212,242,81,.28); color: #cdd9d4; font-size: .78rem; }
.short-findings .sd-note b { color: var(--lime); font-size: 1rem; }

.signals { background: var(--ink); color: var(--white); }
.signals .section-number { color: var(--lime); }
.signals .section-heading > p { color: #9fb0aa; }
.signal-layout { display: grid; grid-template-columns: minmax(280px,.75fr) minmax(0,1.6fr); border-top: 1px solid #435c56; }
.signal-list { border-right: 1px solid #435c56; padding-top: 1rem; }
.signal-row { width: 100%; color: inherit; text-align: left; background: transparent; border: 0; border-bottom: 1px solid #435c56; display: grid; grid-template-columns: 28px minmax(120px,1fr) 90px 48px; gap: .7rem; align-items: center; padding: 1rem .8rem; cursor: pointer; }
.signal-row:hover, .signal-row.active { background: #25443e; }
.signal-row.active { box-shadow: inset 3px 0 var(--lime); }
.signal-rank { color: #79908a; font: .68rem DM Mono, monospace; }
.signal-name { font-size: .82rem; font-weight: 600; }
.signal-bar { height: 4px; background: #3c5852; }
.signal-bar i { display: block; height: 100%; background: var(--lime); }
.signal-value { font: .76rem DM Mono, monospace; text-align: right; }
.signal-detail { padding: clamp(2rem,5vw,5rem); }
.detail-kicker { color: var(--lime); }
.signal-detail h3 { font-size: clamp(1.8rem,3vw,3.2rem); margin: .6rem 0 .5rem; letter-spacing: -.04em; }
.signal-detail > p { color: #9fb0aa; max-width: 600px; }
.detail-plot { height: 410px; margin-top: 2rem; }

.context { background: #dfe6d8; }
.context-controls { width: min(330px,100%); margin-left: auto; margin-bottom: 1rem; }
.context-plot { height: 480px; background: rgba(255,255,255,.35); border: 1px solid #b7c2b3; }
.methods { background: var(--white); }
.method-grid { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.method-grid article { padding: 2rem 3rem 2rem 0; }
.method-grid article + article { border-left: 1px solid var(--line); padding-left: 3rem; }
.method-grid span { font: .7rem DM Mono, monospace; color: var(--teal); }
.method-grid h3 { margin: 1.5rem 0 .7rem; font-size: 1.25rem; }
.method-grid p, .data-note p { color: var(--muted); font-size: .9rem; }
.data-note { display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; padding-top: 2rem; }
.data-note p { margin: 0; }
footer { min-height: 150px; padding: 2rem clamp(24px, 7vw, 112px); background: var(--ink); color: var(--white); display: flex; align-items: center; gap: 2rem; }
footer p { color: #82958e; margin-right: auto; }
footer > a { color: var(--lime); font-size: .8rem; }
.error-message { position: fixed; bottom: 1rem; right: 1rem; max-width: 430px; padding: 1rem; background: #8e2f1e; color: white; z-index: 10; }

@media (max-width: 900px) {
  nav, .dataset-badge { display: none; }
  .hero-grid, .section-heading, .signal-layout { grid-template-columns: 1fr; }
  .hero-aside { margin-top: 3rem; }
  .stats { grid-template-columns: repeat(2,1fr); }
  .stats article:nth-child(2) { border-right: 0; }
  .control-bar { grid-template-columns: 1fr 1fr; }
  .anomaly-controls { grid-template-columns: 1fr 1fr; }
  .anomaly-controls .lag-control { grid-column: 1 / -1; }
  .lag-control { grid-column: 1 / -1; }
  .signal-list { border-right: 0; }
  .method-grid { grid-template-columns: 1fr; }
  .layer-tabs, .layer-intro, .short-layout { grid-template-columns: 1fr; }
  .egg-map-header { align-items: start; flex-direction: column; }
  .egg-date-readout { text-align: left; }
  .egg-map-stage, .subsection-heading { grid-template-columns: 1fr; }
  #egg-map { height: 58vh; min-height: 420px; }
  .egg-side-panel { min-height: 390px; }
  .layer-tabs button { border-right: 0; border-bottom: 1px solid var(--line); }
  .layer-tabs button:last-child { border-bottom: 0; }
  .results-grid { grid-template-columns: 1fr; }
  .method-grid article + article { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
}
@media (max-width: 600px) {
  .site-header { min-height: 60px; }
  .hero { padding-top: 60px; }
  .stats { grid-template-columns: 1fr; }
  .stats article, .stats article:not(:first-child) { padding: 1.5rem 0; border-right: 0; border-bottom: 1px solid #435c56; }
  .control-bar { grid-template-columns: 1fr; }
  .two-controls { grid-template-columns: 1fr; }
  .anomaly-controls { grid-template-columns: 1fr; }
  .anomaly-controls .lag-control { grid-column: auto; }
  .short-comparison-control { justify-content: stretch; }
  .short-comparison-control fieldset { min-width: 0; width: 100%; }
  .lag-control { grid-column: auto; }
  .chart-meta { align-items: flex-start; flex-direction: column; gap: 1rem; }
  .association-card { margin-left: 0; padding-left: 0; border-left: 0; }
  .main-plot { height: 460px; }
  .signal-row { grid-template-columns: 24px 1fr 45px; }
  .signal-bar { display: none; }
  .data-note { grid-template-columns: 1fr; }
  footer { align-items: flex-start; flex-direction: column; }
  .egg-controls { grid-template-columns: auto 1fr; }
  .egg-legend { grid-column: 1 / -1; justify-content: center; }
}