.hero-art{height:530px;position:relative;overflow:hidden;border-radius:48% 48% 3px 3px;background:#7da79a}
.hero-art img{width:100%;height:100%;object-fit:cover;object-position:center 48%;display:block;filter:saturate(.85) contrast(1.05)}
.photo-wash{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,43,46,.02) 42%,rgba(14,43,46,.7) 100%)}
.photo-credit{position:absolute;z-index:3;right:20px;bottom:23px;color:#f5f0e6;font:10px var(--mono);letter-spacing:.08em;opacity:.75}
.map-filters{display:flex;align-items:center;gap:8px;margin:15px 0 5px;font:11px var(--mono);color:#a6c9b7}
.map-filter{border:1px solid rgba(227,236,220,.35);background:transparent;color:#e3ecdc;padding:7px 12px;border-radius:20px;font:11px var(--mono)}
.map-filter:hover,.map-filter.active{background:var(--coral);border-color:var(--coral);color:#fff}
.map-card canvas{height:360px}
.chart-interactive-wrap{width:100%}
.chart-filters{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:20px;font:11px var(--mono);color:var(--ink)}
.story-filter{border:1px solid var(--line);background:transparent;color:var(--ink);padding:5px 12px;border-radius:18px;font:11px var(--mono);transition:all .18s ease}
.story-filter:hover,.story-filter.active{background:var(--coral);border-color:var(--coral);color:#fff}
.chart-detail-pill{margin-top:45px;font:11px var(--mono);color:var(--ink);background:rgba(23,59,61,.07);padding:8px 14px;border-radius:4px;display:inline-block;border-left:3px solid var(--coral)}
.bar-chart{height:320px;padding-bottom:35px;position:relative}
.bar-group{position:relative;margin:0 4px}
.bar{cursor:pointer;transition:transform .15s ease, filter .15s ease}
.bar:hover{filter:brightness(1.15);transform:scaleY(1.03);transform-origin:bottom}
.bar-year{position:absolute;bottom:-38px;left:0;right:0;text-align:center;font:500 11px var(--mono);color:var(--ink);white-space:nowrap}

/* Navigation flex wrap */
.main-nav{flex-wrap:wrap;gap:18px}

/* Trends Section Styles */
.trends-layout{display:flex;flex-direction:column;gap:35px}
.trends-controls{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.trends-filter-buttons{display:flex;gap:8px;margin-top:8px}
.trend-btn{border:1px solid var(--line);background:transparent;color:var(--ink);padding:6px 14px;border-radius:20px;font:11px var(--mono);cursor:pointer;transition:all .18s ease}
.trend-btn:hover,.trend-btn.active{background:var(--teal);border-color:var(--teal);color:#fff}
.trend-stat-row{display:flex;gap:15px;flex-wrap:wrap}
.trend-stat-card{background:#fff;border:1px solid var(--line);padding:14px 18px;border-radius:4px;min-width:140px;display:flex;flex-direction:column}
.trend-stat-card .stat-highlight{font-size:26px;color:var(--teal);font-weight:600;margin:4px 0}
.trend-stat-card span{font:10px var(--mono);color:var(--muted)}
.trends-chart-card{background:var(--deep);color:#e3ecdc;padding:24px;border-radius:4px;position:relative}
.trends-chart-topline{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;font:11px var(--mono);color:#a6c9b7}
#trends-canvas{width:100%;height:380px;display:block}
.trends-callout{margin-top:16px;background:rgba(227,236,220,.08);border-left:3px solid var(--coral);padding:10px 16px;font:11px var(--mono);color:#f5f0e6;border-radius:2px}
.trends-narrative-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.trend-narrative-card{background:#fff;border:1px solid var(--line);padding:20px;border-radius:4px}
.trend-narrative-card h4{font-size:14px;margin:0 0 10px;color:var(--ink);font-weight:600}
.trend-narrative-card p{font-size:13px;line-height:1.6;color:var(--ink);margin:0}

/* Estuary Section Styles */
.estuary-layout{display:flex;flex-direction:column;gap:35px}
.estuary-interactive-card{background:#fff;border:1px solid var(--line);padding:28px;border-radius:4px}
.estuary-nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:20px;font:11px var(--mono);color:var(--ink)}
.tide-btn{border:1px solid var(--line);background:transparent;color:var(--ink);padding:7px 16px;border-radius:20px;font:11px var(--mono);cursor:pointer;transition:all .18s ease}
.tide-btn:hover,.tide-btn.active{background:var(--coral);border-color:var(--coral);color:#fff}
.estuary-stage-content h3{font-size:22px;margin:0 0 10px;color:var(--ink)}
.estuary-desc{font-size:14px;line-height:1.6;color:var(--ink);max-width:760px;margin-bottom:24px}
.estuary-metrics-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:24px}
.behavior-box,.habitat-info-box{background:var(--paper);border:1px solid var(--line);padding:20px;border-radius:4px}
.behavior-bars{margin-top:14px;display:flex;flex-direction:column;gap:12px}
.b-row{display:grid;grid-template-columns:75px 1fr 40px;align-items:center;gap:10px;font:11px var(--mono);color:var(--ink)}
.b-track{background:rgba(23,59,61,.12);height:10px;border-radius:5px;overflow:hidden}
.b-fill{background:var(--teal);height:100%;border-radius:5px;transition:width .3s ease}
.habitat-info-box strong{display:block;font-size:16px;color:var(--ink);margin:10px 0 8px;line-height:1.4}
.habitat-info-box p{font-size:13px;line-height:1.6;color:var(--muted);margin:0}
.zones-section{background:var(--paper);border:1px solid var(--line);padding:26px;border-radius:4px}
.zones-section h3{font-size:20px;margin:0 0 6px;color:var(--ink)}
.zone-buttons{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}
.zone-btn{border:1px solid var(--line);background:#fff;color:var(--ink);padding:6px 14px;border-radius:18px;font:11px var(--mono);cursor:pointer;transition:all .18s ease}
.zone-btn:hover,.zone-btn.active{background:var(--teal);border-color:var(--teal);color:#fff}
.zone-detail-card{background:#fff;border:1px solid var(--line);padding:20px;border-radius:4px;border-left:4px solid var(--sun)}
.zone-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.zone-header h4{font-size:17px;margin:0;color:var(--ink)}
.zone-tag{font:10px var(--mono);color:var(--teal);background:rgba(45,104,112,.1);padding:4px 8px;border-radius:3px}
.zone-detail-card p{font-size:13px;line-height:1.6;margin:6px 0;color:var(--ink)}
.zone-count-highlight{margin-top:12px;font:12px var(--mono);color:var(--coral)}
.cascade-card{background:#2d6870;color:#f5f0e6;padding:26px;border-radius:4px}
.cascade-card .kicker{color:#e5b449}
.cascade-card h3{font-size:20px;color:#fff;margin:6px 0 12px}
.cascade-card p{font-size:14px;line-height:1.7;margin:0;color:#f5f0e6;max-width:850px}

/* About Section Styles */
.about-grid{display:flex;flex-direction:column;gap:30px}
.about-section{background:#fff;border:1px solid var(--line);padding:30px;border-radius:4px}
.about-badge{font:11px var(--mono);color:var(--coral);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.about-section h3{font-size:24px;margin:0 0 16px;color:var(--ink)}
.about-bio{font-size:15px;line-height:1.7;color:var(--ink);max-width:820px;margin-bottom:20px}
.contact-details{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;background:var(--paper);padding:20px;border-radius:4px;border:1px solid var(--line)}
.contact-item{font:12px var(--mono);color:var(--ink)}
.contact-item a{color:var(--teal);text-decoration:none;border-bottom:1px solid var(--teal)}
.contact-item a:hover{color:var(--coral);border-color:var(--coral)}
.data-summary-paragraph{font-size:15px;line-height:1.8;color:var(--ink);max-width:860px;margin:0}
.data-summary-paragraph a{color:var(--teal);text-decoration:none;border-bottom:1px solid var(--teal)}
.data-summary-paragraph a:hover{color:var(--coral);border-color:var(--coral)}

@media(max-width:850px){
  .trends-narrative-grid,.estuary-metrics-grid,.contact-details{grid-template-columns:1fr}
  #trends-canvas{height:280px}
}
@media(max-width:750px){.hero-art{height:380px}.map-card canvas{height:280px}.map-filters{flex-wrap:wrap}.map-filters span{width:100%}.photo-credit{right:16px;bottom:22px;font-size:9px}.chart-filters{gap:4px}.story-filter{padding:4px 8px;font-size:10px}.bar-chart{height:260px}}