:root {
  color-scheme: dark;
  --ink: oklch(93% .014 220);
  --muted: oklch(73% .025 220);
  --paper: oklch(14% .035 235);
  --paper-deep: oklch(18% .042 232);
  --surface: oklch(22% .042 228);
  --line: oklch(39% .045 222);
  --river: oklch(72% .09 211);
  --river-deep: oklch(11% .035 238);
  --reed: oklch(72% .14 125);
  --amber: oklch(82% .18 116);
  --coral: oklch(72% .13 145);
  --strike: oklch(82% .18 116);
  --salt: oklch(70% .10 220);
  --fresh: oklch(68% .09 176);
  --shadow: 0 18px 55px oklch(4% .02 240 / .48);
  --radius: .8rem;
  --font-display: Georgia, "Times New Roman", serif;
  --font-body: "Aptos", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 20rem; background: var(--paper); color: var(--ink); font: 1rem/1.55 var(--font-body); }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .22; background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2780%27 height=%2780%27 viewBox=%270 0 80 80%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.9%27 numOctaves=%272%27 stitchTiles=%27stitch%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27 opacity=%27.08%27/%3E%3C/svg%3E"); z-index: 10; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
svg { display: block; }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: fixed; top: .5rem; left: .5rem; z-index: 100; transform: translateY(-160%); background: var(--river-deep); color: var(--ink); padding: .7rem 1rem; }
.skip-link:focus { transform: none; }

.site-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; min-height: 4.5rem; padding: .75rem clamp(1rem, 4vw, 4rem); background: oklch(13% .04 235 / .94); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
[data-module][hidden] { display: none !important; }
.app-shell { min-height: calc(100vh - 4.5rem); }
.menu-button { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.85rem; padding: .5rem .8rem; border: 1px solid var(--line); background: transparent; font-weight: 850; }
.menu-button > span:first-child { color: var(--strike); font-size: 1.15rem; }
.module-sidebar { position: fixed; z-index: 40; inset: 0 auto 0 0; width: min(20rem, 88vw); padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom)); overflow-y: auto; background: var(--river-deep); border-right: 1px solid var(--line); box-shadow: var(--shadow); transform: translateX(-105%); transition: transform .22s ease-out; }
.module-menu-open { overflow: hidden; }
.module-menu-open .module-sidebar { transform: translateX(0); }
.module-sidebar-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .35rem .35rem 1rem; border-bottom: 1px solid var(--line); }
.module-sidebar-heading div { display: grid; }
.module-sidebar-heading span, .module-nav p { color: var(--coral); font-size: .69rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.module-sidebar-heading strong { font: 700 1.35rem var(--font-display); }
.module-sidebar-heading button { width: 2.8rem; height: 2.8rem; border: 1px solid var(--line); border-radius: 50%; background: transparent; font-size: 1.4rem; }
.module-nav { display: grid; padding: .8rem 0; }
.module-nav p { margin: 1rem .65rem .4rem; }
.module-nav a { display: grid; grid-template-columns: 2rem 1fr; align-items: center; min-height: 3.1rem; padding: .55rem .65rem; border-left: 3px solid transparent; color: var(--muted); text-decoration: none; font-weight: 800; }
.module-nav a span { color: var(--line); font: 700 .75rem var(--font-display); }
.module-nav a[aria-current] { border-left-color: var(--strike); background: var(--surface); color: var(--ink); }
.module-nav a[aria-current] span { color: var(--strike); }
.module-scrim { position: fixed; z-index: 35; inset: 0; width: 100%; height: 100%; border: 0; background: oklch(4% .02 240 / .72); }
.module-scrim[hidden] { display: none; }
.library-module { min-height: calc(100vh - 4.5rem); }
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; line-height: 1; }
.brand svg { width: 4.2rem; fill: none; stroke: var(--river); stroke-width: 1.7; }
.brand .brand-fish { fill: oklch(82% .025 220); stroke: var(--river); }
.brand .brand-stripe { stroke: var(--river-deep); stroke-width: 1.15; }
.brand svg circle { fill: var(--river-deep); stroke: none; }
.brand strong { display: block; font: 700 1.2rem/1 var(--font-display); }
.brand small { color: var(--muted); font-size: .69rem; text-transform: uppercase; letter-spacing: .16em; }
.header-actions { display: flex; gap: .5rem; }
@media (max-width: 27rem) { .brand svg { width: 3.2rem; } .brand small { display: none; } .menu-button span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
.icon-button { width: 2.85rem; height: 2.85rem; border: 1px solid var(--line); border-radius: 50%; background: transparent; font-size: 1.2rem; }
.icon-button[aria-pressed="true"] { background: var(--strike); color: oklch(16% .04 235); border-color: var(--strike); }

.hero { position: relative; min-height: min(43rem, calc(100vh - 4.5rem)); padding: clamp(4rem, 10vw, 8rem) clamp(1rem, 7vw, 7rem) 7rem; overflow: hidden; background: linear-gradient(155deg, oklch(16% .045 240), var(--river-deep) 62%, oklch(31% .065 215)); color: var(--ink); display: grid; align-content: center; }
.hero::after { content: ""; position: absolute; width: 38rem; height: 38rem; right: -15rem; top: -10rem; border: 1px solid oklch(90% .04 183 / .2); border-radius: 50%; box-shadow: 0 0 0 4rem oklch(90% .04 183 / .035), 0 0 0 9rem oklch(90% .04 183 / .025); }
.hero-copy { position: relative; z-index: 2; max-width: 51rem; }
.eyebrow, .section-kicker { margin: 0 0 .85rem; color: var(--coral); font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: .98; }
h1 { margin: 0; max-width: 12ch; font-size: clamp(3.3rem, 9vw, 7.8rem); letter-spacing: -.045em; }
h1 em { color: var(--amber); font-weight: 400; }
.hero-lede { max-width: 43rem; margin: 2rem 0 0; color: oklch(90% .025 177); font-size: clamp(1.05rem, 2vw, 1.3rem); }
.hero-mark { position: absolute; right: clamp(-4rem, 2vw, 3rem); bottom: 5rem; width: min(33rem, 52vw); opacity: .38; }
.hero-mark path, .hero-mark circle { fill: none; stroke: var(--amber); stroke-width: 2; }
.hero-mark .striper-body { fill: oklch(79% .035 220 / .16); stroke: oklch(86% .025 220); stroke-width: 2.5; }
.hero-mark .striper-line { stroke: oklch(84% .04 220); stroke-width: 2.2; }
.hero-mark .striper-gill { stroke: oklch(78% .04 220); }
.hero-mark circle { fill: var(--amber); stroke: none; }
.hero-mark .water-line { stroke: oklch(82% .08 198); }

.hero .eyebrow { color: var(--strike); }
.hero h1 em { color: var(--strike); }

.hero-cta { display: inline-flex; align-items: center; gap: .9rem; min-height: 3.4rem; margin-top: 2rem; padding: .7rem 1.15rem; border: 1px solid var(--strike); background: var(--strike); color: oklch(18% .05 235); font-weight: 900; letter-spacing: .02em; }
.hero-cta span { font-size: 1.35rem; }
.hero::before { content: ""; position: absolute; inset: auto 0 4.5rem; height: 8rem; opacity: .11; background: repeating-linear-gradient(to bottom, transparent 0 1rem, oklch(92% .02 220) 1rem calc(1rem + 1px)); }
.technique-card { border-top: 3px solid transparent; }
.technique-card:has(.water-badge.salt) { border-top-color: oklch(62% .10 220); }
.section-kicker, .eyebrow { text-shadow: 0 0 18px oklch(82% .18 116 / .18); }

.water-switch { position: absolute; z-index: 3; bottom: 0; left: clamp(1rem, 7vw, 7rem); right: clamp(1rem, 7vw, 7rem); display: flex; width: fit-content; border-bottom: 1px solid oklch(90% .03 180 / .28); }
.water-switch button { min-height: 4.5rem; padding: 0 clamp(1rem, 3vw, 2rem); border: 0; border-bottom: 4px solid transparent; background: transparent; color: oklch(87% .025 180); }
.water-switch button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--amber); }

.conditions-advisor { padding: clamp(3rem, 7vw, 6rem) clamp(1rem, 7vw, 7rem); background: var(--paper-deep); }
.advisor-heading { display: grid; gap: 1rem; max-width: 72rem; margin-bottom: 2rem; }
.advisor-heading > p { max-width: 54rem; margin: 0; color: var(--muted); font-size: 1.05rem; }
.advisor-layout { display: grid; gap: 1rem; max-width: 76rem; }
.advisor-form { display: grid; gap: .75rem; padding: 1rem; border: 1px solid var(--line); background: var(--surface); }
.advisor-form label { display: grid; gap: .35rem; color: var(--muted); font-size: .72rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.advisor-form select { width: 100%; min-height: 3rem; padding: .65rem .75rem; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-size: 1rem; letter-spacing: 0; text-transform: none; }
.advisor-result { display: grid; align-content: start; gap: 1rem; padding: clamp(1.2rem, 4vw, 2rem); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
.advisor-fit { margin: 0; color: var(--coral); font-size: .72rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.advisor-result h3 { margin: 0; font-size: clamp(2rem, 5vw, 3.3rem); }
.advisor-result h4 { margin: 0 0 .5rem; font-size: 1rem; }
.advisor-result section { padding-top: .9rem; border-top: 1px solid var(--line); }
.advisor-result section p, .advisor-result section ul { margin: 0; color: var(--muted); }
.advisor-result ul { display: grid; gap: .5rem; padding-left: 1.2rem; }
.advisor-primary { display: grid; gap: .3rem; padding: 1rem; background: var(--paper); }
.advisor-primary span { color: var(--coral); font-size: .7rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.advisor-primary strong { font: 700 1.45rem var(--font-display); }
.advisor-primary p { margin: 0; color: var(--muted); }
.advisor-adjust { display: grid; gap: .4rem; padding: 1rem; border-left: 4px solid var(--strike); background: var(--paper-deep); }
.advisor-adjust p, .advisor-adjust small { margin: 0; color: var(--muted); }
.advisor-actions { display: flex; flex-wrap: wrap; gap: .55rem; }
.advisor-actions button { min-height: 3rem; padding: .65rem .9rem; border: 1px solid var(--river); background: var(--river-deep); color: var(--ink); font-weight: 850; }
.advisor-caveat { max-width: 76rem; margin: 1rem 0 0; color: var(--muted); font-size: .86rem; }
@media (min-width: 42rem) { .advisor-form { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (min-width: 62rem) { .advisor-layout { grid-template-columns: minmax(18rem,.7fr) minmax(0,1.3fr); align-items: start; } }

.session-planner { padding: clamp(3rem, 7vw, 6rem) clamp(1rem, 7vw, 7rem); background: var(--paper-deep); }
.session-heading { display: grid; gap: 1rem; max-width: 72rem; margin-bottom: 2rem; }
.session-heading > p { max-width: 56rem; margin: 0; color: var(--muted); font-size: 1.05rem; }
.session-layout { display: grid; gap: 1rem; max-width: 82rem; }
.session-form { display: grid; gap: .75rem; padding: 1rem; border: 1px solid var(--line); background: var(--surface); }
.session-form label { display: grid; gap: .35rem; color: var(--muted); font-size: .72rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.session-form select { width: 100%; min-height: 3rem; padding: .65rem .75rem; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-size: 1rem; letter-spacing: 0; text-transform: none; }
.session-result { display: grid; align-content: start; gap: 1rem; padding: clamp(1.2rem, 4vw, 2rem); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
.session-result h3 { margin: 0; font-size: clamp(2.1rem, 5vw, 3.8rem); }
.session-technique { margin: -.35rem 0 .25rem; color: var(--river); font: 700 1.2rem var(--font-display); }
.session-technique span { color: var(--muted); font: 500 1rem var(--font-body); }
.session-brief { display: grid; gap: 1px; border: 1px solid var(--line); background: var(--line); }
.session-brief section { display: grid; gap: .35rem; padding: 1rem; background: var(--paper); }
.session-brief span { color: var(--coral); font-size: .67rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.session-brief strong { font-weight: 750; line-height: 1.45; }
.session-brief small { color: var(--muted); font-size: .86rem; }
.session-safety { padding: 1rem; border-left: 4px solid oklch(68% .17 35); background: oklch(25% .055 35); }
.session-safety p { margin: .25rem 0 0; color: oklch(88% .025 50); }
.saved-sessions { max-width: 82rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.saved-sessions-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.saved-sessions-heading h3 { margin: 0; font-size: 1.65rem; }
.saved-sessions-heading > span { color: var(--muted); font-size: .8rem; font-weight: 800; }
.saved-session-list { display: grid; gap: .6rem; }
.saved-session-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; border: 1px solid var(--line); background: var(--surface); }
.saved-session-card h4, .saved-session-card p { margin: 0; }
.saved-session-card h4 { font: 700 1.25rem var(--font-display); }
.saved-session-card > div:last-child { display: flex; flex-wrap: wrap; gap: .4rem; }
.saved-session-card button { min-height: 2.75rem; padding: .5rem .75rem; border: 1px solid var(--line); background: var(--paper); font-weight: 800; }
.session-empty { margin: 0; padding: 1rem; border: 1px dashed var(--line); color: var(--muted); }
@media (min-width: 42rem) { .session-form { grid-template-columns: repeat(2,minmax(0,1fr)); } .session-brief { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (min-width: 68rem) { .session-layout { grid-template-columns: minmax(19rem,.72fr) minmax(0,1.28fr); align-items: start; } }
@media (max-width: 34rem) { .saved-session-card { align-items: stretch; flex-direction: column; } }

.conditions-advisor, .session-planner, .field-manual, .rig-bench, .hotspots, .structure-reading, .regulation-band { padding: clamp(4rem, 9vw, 8rem) clamp(1rem, 7vw, 7rem); }
.field-manual { background: var(--paper); }
.recommended-setups { padding: clamp(4rem, 9vw, 8rem) clamp(1rem, 7vw, 7rem); background: var(--paper-deep); border-block: 1px solid var(--line); }
.setup-module-grid { display: grid; gap: .75rem; max-width: 76rem; }
.setup-system-card { border: 1px solid var(--line); background: var(--surface); }
.setup-system-summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 5.25rem; padding: 1rem clamp(1rem, 3vw, 1.5rem); cursor: pointer; list-style: none; }
.setup-system-summary::-webkit-details-marker { display: none; }
.setup-system-summary > span { display: grid; gap: .22rem; min-width: 0; }
.setup-system-summary small { color: var(--coral); font-size: .7rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.setup-system-summary strong { font: 700 clamp(1.45rem, 4vw, 2rem)/1.05 var(--font-display); }
.setup-system-preview { overflow: hidden; color: var(--muted); font-size: .85rem; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.setup-system-summary > b { flex: 0 0 auto; color: var(--strike); font-size: 1.45rem; transition: transform .18s ease-out; }
.setup-system-card[open] .setup-system-summary { border-bottom: 1px solid var(--line); }
.setup-system-card[open] .setup-system-summary > b { transform: rotate(45deg); }
.setup-system-body { display: grid; gap: 1rem; padding: clamp(1rem, 3vw, 1.5rem); }
.setup-system-tiers { display: grid; gap: 1px; border: 1px solid var(--line); background: var(--line); }
.setup-system-tier { display: grid; gap: .85rem; padding: 1rem; background: var(--paper); }
.setup-system-tier header { display: grid; gap: .45rem; }
.setup-system-tier header strong { line-height: 1.35; }
.setup-system-tier dl { display: grid; gap: .55rem; margin: 0; }
.setup-system-tier dl div { display: grid; grid-template-columns: 4.6rem 1fr; gap: .6rem; }
.setup-system-tier dt { color: var(--coral); font-size: .68rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.setup-system-tier dd { margin: 0; color: var(--muted); }
.setup-fit { margin: 0; color: var(--muted); }
.setup-system-tier a { display: inline-flex; align-items: center; min-height: 2.75rem; width: fit-content; color: var(--river); font-weight: 800; }
.setup-techniques { border-top: 1px solid var(--line); padding-top: 1rem; }
.setup-techniques > p { margin: 0 0 .65rem; color: var(--coral); font-size: .72rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.setup-techniques > div { display: flex; flex-wrap: wrap; gap: .45rem; }
.setup-techniques button { min-height: 2.8rem; padding: .55rem .8rem; border: 1px solid var(--line); border-radius: 99px; background: var(--paper); color: var(--ink); }
.setup-module-disclosure { max-width: 76rem; margin: 1.25rem 0 0; padding: 1rem; border-left: 3px solid var(--strike); background: var(--surface); color: var(--muted); font-size: .9rem; }
.rod-options { border-top: 1px solid var(--line); padding-top: .75rem; }
.rod-options summary { min-height: 2.8rem; cursor: pointer; color: var(--river); font-weight: 850; }
.rod-options ul { display: grid; gap: .45rem; margin: .25rem 0 0; padding-left: 1.2rem; }
.rod-options a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--ink); text-underline-offset: .2rem; }
@media (min-width: 62rem) { .setup-system-tiers { grid-template-columns: repeat(3, minmax(0,1fr)); } }

.rig-bench { background: var(--river-deep); color: var(--ink); }
.hotspots, .structure-reading { background: var(--paper-deep); }
.regulation-band { background: var(--paper); border-block: 1px solid var(--line); }
.manual-heading { display: grid; gap: 1rem; margin-bottom: 2rem; max-width: 72rem; }
.manual-heading > p { max-width: 56rem; margin: 0; color: var(--muted); font-size: 1.08rem; }
.rig-bench .manual-heading > p { color: oklch(88% .025 220); }
.manual-filters { display: flex; gap: .55rem; overflow-x: auto; padding-bottom: 1.2rem; }
.manual-filters button { flex: 0 0 auto; min-height: 2.9rem; padding: .55rem .95rem; border: 1px solid var(--line); border-radius: 99px; background: transparent; font-weight: 800; }
.manual-filters button[aria-pressed="true"] { background: var(--river-deep); border-color: var(--river-deep); color: var(--ink); }
.manual-grid { display: grid; gap: 1px; border: 1px solid var(--line); background: var(--line); }
.manual-card { position: relative; display: grid; align-content: start; gap: .8rem; min-height: 20rem; padding: 1.4rem; background: var(--surface); }
.manual-card.primary { border-top: 4px solid var(--strike); }
.manual-card h3 { margin: 0; max-width: 15ch; font-size: 1.65rem; }
.manual-card p { margin: 0; color: var(--muted); }
.manual-card button, .hotspot-card button { align-self: end; min-height: 3rem; margin-top: auto; border: 0; background: var(--river-deep); color: var(--ink); font-weight: 850; }
.manual-number { position: absolute; top: 1rem; right: 1rem; color: var(--line); font: 700 2.5rem var(--font-display); }
.manual-when { padding-right: 3rem; color: var(--coral) !important; font-size: .72rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.bench-columns { display: grid; gap: 2.5rem; }
.bench-columns h3 { color: var(--strike); font-size: 1.5rem; }
.bench-grid { display: grid; gap: .65rem; }
.bench-card { display: grid; gap: .25rem; min-height: 4.5rem; padding: .9rem 1rem; border: 1px solid oklch(80% .03 220 / .35); background: oklch(26% .05 230); color: var(--ink); text-align: left; }
.bench-card span { color: oklch(84% .025 220); font-size: .86rem; }
.hotspot-grid { display: grid; gap: 1rem; }
.hotspot-card { display: grid; gap: .75rem; padding: 1.35rem; background: var(--surface); border: 1px solid var(--line); }
.hotspot-card h3, .regulation-grid h3 { margin: 0; font-size: 1.55rem; }
.hotspot-card p { margin: 0; color: var(--muted); }
.hotspot-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.hotspot-tags span { padding: .2rem .5rem; border-radius: 99px; background: oklch(29% .06 220); color: var(--ink); font-size: .72rem; font-weight: 800; }
.regulation-grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.regulation-grid article { padding: 1.25rem; background: var(--surface); }
.regulation-grid p { color: var(--muted); }
.regulation-grid a { color: var(--river); font-weight: 800; }
.instruction-steps { display: grid; gap: .8rem; padding-left: 1.6rem; }
.instruction-steps li::marker { color: var(--coral); font-weight: 900; }
.cast-diagram { margin: 1.7rem 0 2rem; border: 1px solid var(--line); background: var(--river-deep); overflow: hidden; }
.cast-diagram-heading { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .8rem 1.5rem; padding: 1rem; border-bottom: 1px solid var(--line); }
.cast-diagram-heading > div:first-child { display: grid; gap: .1rem; }
.cast-diagram-heading span { color: var(--coral); font-size: .68rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.cast-diagram-heading strong { font: 700 1.1rem var(--font-display); }
.cast-diagram-legend { display: flex; flex-wrap: wrap; gap: .8rem; }
.cast-diagram-legend span { display: inline-flex; align-items: center; gap: .38rem; color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: 0; text-transform: none; }
.cast-diagram-legend span::before { content: ""; width: 1.4rem; height: .3rem; background: currentColor; }
.cast-diagram-legend .legend-cast::before { color: var(--strike); }
.cast-diagram-legend .legend-hold::before { height: .7rem; color: var(--reed); opacity: .75; }
.cast-diagram-legend .legend-hazard::before { height: .7rem; color: oklch(68% .17 35); opacity: .7; }
.cast-diagram svg { width: 100%; height: auto; aspect-ratio: 16 / 8.5; background: oklch(20% .055 224); }
.cast-diagram svg text { fill: oklch(92% .02 220); font: 800 15px var(--font-body); letter-spacing: .08em; paint-order: stroke; stroke: oklch(12% .04 235 / .8); stroke-width: 4px; }
.cast-diagram .terrain { fill: oklch(37% .07 102); stroke: oklch(60% .09 105); stroke-width: 3; }
.cast-diagram .bar { fill: oklch(48% .08 82 / .75); stroke: oklch(72% .10 84); stroke-width: 3; }
.cast-diagram .vegetation { fill: oklch(39% .09 132 / .8); }
.cast-diagram .weed-edge { fill: none; stroke: oklch(70% .14 125); stroke-width: 8; }
.cast-diagram .cover, .cast-diagram .rocks { fill: none; stroke: oklch(62% .08 72); stroke-width: 16; stroke-linecap: round; stroke-linejoin: round; }
.cast-diagram .jetty, .cast-diagram .bridge, .cast-diagram .dam { fill: oklch(31% .025 235); stroke: oklch(67% .025 225); stroke-width: 3; }
.cast-diagram .piling { fill: oklch(27% .025 235); stroke: oklch(72% .03 220); stroke-width: 3; }
.cast-diagram .shadow { fill: oklch(8% .03 238 / .72); }
.cast-diagram .current-band { fill: oklch(29% .08 218 / .52); }
.cast-diagram marker[id^="cast-arrow-"] path { fill: var(--strike); }
.cast-diagram marker[id^="flow-arrow-"] path { fill: var(--river); }
.cast-diagram .current, .cast-diagram .wave { fill: none; stroke: var(--river); stroke-width: 4; stroke-linecap: round; marker-end: var(--flow-arrow); opacity: .8; }
.cast-diagram .wave { marker-end: none; opacity: .65; }
.cast-diagram .seam, .cast-diagram .depth-line { fill: none; stroke: oklch(79% .04 218); stroke-width: 3; stroke-dasharray: 9 9; }
.cast-diagram .faint { opacity: .45; }
.cast-diagram .holding-zone { fill: oklch(70% .14 125 / .42); stroke: var(--reed); stroke-width: 3; stroke-dasharray: 7 6; }
.cast-diagram .hazard { fill: oklch(57% .18 35 / .28); stroke: oklch(68% .17 35); stroke-width: 3; stroke-dasharray: 7 6; }
.cast-diagram .cast-path, .cast-diagram .follow-path { fill: none; stroke: var(--strike); stroke-width: 7; stroke-linecap: round; marker-end: var(--cast-arrow); }
.cast-diagram .follow-path { stroke-width: 4; stroke-dasharray: 10 9; opacity: .82; }
.cast-diagram figcaption { padding: .75rem 1rem; color: var(--muted); font-size: .8rem; }
@media (max-width: 31rem) { .cast-diagram svg { aspect-ratio: 4 / 3; } .cast-diagram svg text { font-size: 17px; } }
.instruction-svg { width: 100%; min-height: 7rem; margin: 1rem 0; border: 1px solid var(--line); background: var(--paper-deep); }
.instruction-svg path, .instruction-svg circle { fill: none; stroke: var(--river); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.instruction-svg .working { stroke: var(--strike); stroke-width: 5; }
.rig-chain { display: flex; align-items: stretch; gap: .4rem; overflow-x: auto; padding-bottom: .5rem; }
.rig-chain span { flex: 0 0 8rem; display: grid; gap: .4rem; place-items: center; padding: .75rem; border: 1px solid var(--line); background: var(--surface); text-align: center; font-size: .83rem; }
.rig-chain b { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--river-deep); color: var(--ink); }
.rig-chain span:not(:last-child)::after { content: "→"; position: absolute; }
.howto-detail .detail-section p { max-width: 65ch; }
@media (min-width: 42rem) { .manual-grid, .hotspot-grid, .regulation-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .bench-columns { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (min-width: 62rem) { .manual-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } .hotspot-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } .regulation-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } }

.quick-pick { padding: clamp(3rem, 7vw, 6rem) clamp(1rem, 7vw, 7rem); display: grid; gap: 2rem; border-bottom: 1px solid var(--line); }
h2 { margin: 0; font-size: clamp(2.2rem, 5vw, 4.5rem); letter-spacing: -.035em; }
.quick-form { display: grid; gap: 1rem; }
.quick-form label { display: grid; gap: .45rem; color: var(--muted); font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.quick-form select, .quick-form input { width: 100%; min-height: 3.5rem; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: .35rem; background: var(--surface); color: var(--ink); font-size: 1rem; letter-spacing: 0; text-transform: none; }
.result-status { margin: 0; color: var(--muted); }

.content-shell { display: grid; padding: clamp(3rem, 7vw, 7rem) clamp(1rem, 7vw, 7rem); gap: clamp(2rem, 5vw, 5rem); }
.technique-rail > p { margin: 0 0 1rem; color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.filter-list { display: flex; gap: .55rem; overflow-x: auto; padding-bottom: .5rem; scrollbar-width: thin; }
.filter-list button { flex: 0 0 auto; min-height: 2.8rem; padding: .55rem .9rem; border: 1px solid var(--line); border-radius: 99px; background: transparent; }
.filter-list button[aria-pressed="true"] { background: var(--river); border-color: var(--river); color: var(--river-deep); }
.text-button { margin-top: 1rem; border: 0; padding: .5rem 0; color: var(--river); background: transparent; font-weight: 700; text-decoration: underline; text-underline-offset: .25rem; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 2.5rem; }
.compare-button { min-height: 3rem; padding: .6rem 1rem; border: 1px solid var(--ink); background: transparent; font-weight: 800; }
.compare-button:disabled { opacity: .4; cursor: not-allowed; }
.compare-button span { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; margin-left: .4rem; border-radius: 50%; background: var(--river-deep); color: var(--ink); }
.technique-grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.technique-card { position: relative; display: grid; gap: 1.2rem; min-height: 24rem; padding: clamp(1.25rem, 3vw, 2rem); background: var(--surface); transition: transform .22s ease-out, background .22s ease-out; }
.technique-card::before { content: attr(data-index); color: var(--line); font: 400 3.5rem/1 var(--font-display); position: absolute; top: 1rem; right: 1rem; }
.card-top { display: flex; align-items: center; gap: .5rem; align-self: start; }
.water-badge, .technique-tag { display: inline-flex; align-items: center; min-height: 1.8rem; padding: .2rem .55rem; border-radius: 99px; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.water-badge.fresh { background: oklch(90% .07 137); color: oklch(34% .08 137); }
.water-badge.salt { background: oklch(90% .06 229); color: oklch(34% .08 229); }
.technique-tag { color: var(--muted); border: 1px solid var(--line); }
.technique-card h3 { margin: 1.5rem 0 .6rem; max-width: 13ch; font-size: 2rem; }
.card-summary { margin: 0; color: var(--muted); }
.card-season { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .9rem; }
.card-season strong { color: var(--coral); text-transform: uppercase; font-size: .7rem; letter-spacing: .08em; }
.card-actions { display: flex; align-items: center; gap: .5rem; align-self: end; }
.card-actions button { min-height: 2.8rem; border: 1px solid var(--line); background: transparent; padding: .5rem .75rem; }
.card-actions .open-detail { flex: 1; background: var(--river-deep); color: var(--ink); border-color: var(--river); font-weight: 800; }
.card-actions button[aria-pressed="true"] { background: var(--amber); border-color: var(--amber); color: oklch(16% .04 235); }
.empty-state { padding: 4rem 1rem; text-align: center; }
.empty-state svg { width: 8rem; margin: auto; fill: none; stroke: var(--river); stroke-width: 2; }
.empty-state h3 { font-size: 2rem; margin-bottom: .5rem; }
.empty-state p { max-width: 35rem; margin: auto auto 1rem; color: var(--muted); }
.empty-state button { padding: .7rem 1rem; background: var(--river-deep); color: var(--ink); border: 0; }

.quiver { padding: clamp(4rem, 9vw, 8rem) clamp(1rem, 7vw, 7rem); background: var(--paper-deep); border-block: 1px solid var(--line); }
.quiver-intro { max-width: 55rem; margin-bottom: 3rem; }
.quiver-intro > p:last-child { max-width: 47rem; color: var(--muted); font-size: 1.1rem; }
.quiver-list { display: grid; border-top: 1px solid var(--ink); }
.quiver-item { display: grid; gap: 1rem; padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.quiver-number { color: var(--coral); font: 700 1rem var(--font-display); }
.quiver-item h3 { margin: 0; font-size: 1.5rem; }
.quiver-item p { margin: 0; color: var(--muted); }
.spec-line { font-size: .9rem; font-weight: 800; color: var(--ink) !important; }

.nj-playbook { padding: clamp(4rem, 9vw, 8rem) clamp(1rem, 7vw, 7rem); background: var(--paper); border-block: 1px solid var(--line); }
.nj-heading { display: grid; gap: 1.2rem; max-width: 68rem; margin-bottom: 2rem; }
.nj-heading > p { max-width: 52rem; margin: 0; color: var(--muted); font-size: 1.05rem; }
.nj-tabs { position: sticky; top: 4.5rem; z-index: 8; display: flex; overflow-x: auto; background: var(--paper); border-bottom: 1px solid var(--line); }
.nj-tabs button { flex: 1 0 auto; min-height: 3.5rem; padding: .7rem 1rem; border: 0; border-bottom: 4px solid transparent; background: transparent; font-weight: 850; }
.nj-tabs button[aria-selected="true"] { color: var(--strike); border-bottom-color: var(--strike); }
.nj-intro { display: grid; gap: .35rem; max-width: 56rem; margin: 2rem 0; }
.nj-intro strong { font: 700 1.4rem var(--font-display); }
.nj-intro span { color: var(--muted); }
.nj-selector { display: grid; gap: 1rem; }
.nj-selector label { display: grid; gap: .4rem; color: var(--muted); font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.nj-selector select { min-height: 3.4rem; padding: .75rem 1rem; border: 1px solid var(--line); background: var(--surface); font-size: 1rem; letter-spacing: 0; text-transform: none; }
.nj-result { margin: 1.3rem 0 2rem; padding: clamp(1.2rem, 3vw, 2rem); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
.nj-result h3 { margin: .25rem 0 1.4rem; font-size: clamp(1.8rem, 4vw, 2.6rem); }
.nj-match, .nj-strip-label { margin: 0; color: var(--coral); font-size: .72rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.nj-caution { display: grid; gap: .3rem; margin-top: 1rem; padding: 1rem; border-left: 4px solid var(--strike); background: var(--paper-deep); }
.nj-plays { display: flex; gap: .55rem; overflow-x: auto; padding: .8rem 0 1.5rem; }
.nj-plays button { flex: 0 0 auto; min-height: 2.8rem; padding: .55rem .85rem; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); }
#nj-footer { display: grid; gap: .5rem; }
.nj-rules summary { cursor: pointer; font-weight: 900; }
.nj-rules ul { padding-left: 1.2rem; }
.nj-source-links { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-top: .7rem; }
.nj-source-links a { color: var(--river); font-weight: 750; }
.nj-playbook.nj-muted { opacity: .62; }
@media (min-width: 42rem) { .nj-selector { grid-template-columns: repeat(3, 1fr); } }

.season-board { padding: clamp(4rem, 9vw, 8rem) clamp(1rem, 7vw, 7rem); }
.season-grid { display: grid; border: 1px solid var(--line); }
.season-card { padding: 2rem; border-bottom: 1px solid var(--line); background: var(--surface); }
.season-card:last-child { border-bottom: 0; }
.season-card > span { color: var(--coral); font: italic 1rem var(--font-display); }
.season-card h3 { margin: .4rem 0 1.5rem; font-size: 2.1rem; }
.season-card ul { margin: 0; padding-left: 1.1rem; color: var(--muted); }
.season-card li + li { margin-top: .7rem; }
.season-note { max-width: 65rem; margin: 2rem 0 0; padding-left: 1rem; border-left: 3px solid var(--amber); color: var(--muted); }

.field-notes { display: grid; gap: 3rem; padding: clamp(4rem, 9vw, 8rem) clamp(1rem, 7vw, 7rem); background: var(--river-deep); color: var(--ink); }
.note-list { display: grid; gap: 1px; background: oklch(84% .04 183 / .25); }
.note-item { padding: 1.4rem; background: var(--river-deep); }
.note-item strong { display: block; color: var(--strike); margin-bottom: .4rem; }
.note-item p { margin: 0; color: oklch(88% .025 180); }

.sources { padding: clamp(3rem, 6vw, 5rem) clamp(1rem, 7vw, 7rem); }
.sources details { border-block: 1px solid var(--line); }
.sources summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 6rem; cursor: pointer; list-style: none; }
.sources summary strong { display: block; font: 700 1.3rem var(--font-display); }
.sources summary .section-kicker { margin-bottom: .2rem; }
.source-content { padding: 0 0 2.5rem; max-width: 75rem; color: var(--muted); }
.source-list { display: grid; gap: .7rem; margin-top: 1.5rem; }
.source-list a { color: var(--river); font-weight: 700; text-underline-offset: .2rem; }
footer { display: flex; justify-content: space-between; gap: 2rem; padding: 2rem clamp(1rem, 7vw, 7rem); background: var(--river-deep); color: var(--ink); }
footer p { margin: 0; color: oklch(80% .025 175); }

.detail-dialog, .compare-dialog { width: min(52rem, calc(100% - 1rem)); max-height: calc(100% - 1rem); padding: 0; border: 0; border-radius: var(--radius); background: var(--paper); color: var(--ink); box-shadow: var(--shadow); }
.compare-dialog { width: min(72rem, calc(100% - 1rem)); }
dialog::backdrop { background: oklch(18% .025 175 / .76); backdrop-filter: blur(3px); }
.dialog-close { position: sticky; z-index: 2; top: .75rem; float: right; margin: .75rem .75rem -3.5rem 0; width: 2.8rem; height: 2.8rem; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); font-size: 1.5rem; }
.detail-inner { padding: clamp(1.4rem, 5vw, 4rem); }
.detail-inner h2 { max-width: 13ch; margin-bottom: 1rem; }
.detail-deck { color: var(--muted); font-size: 1.1rem; max-width: 50rem; }
.detail-section { padding: 1.6rem 0; border-top: 1px solid var(--line); }
.detail-section h3 { margin: 0 0 1rem; font-size: 1.25rem; }
.rig-grid { display: grid; gap: .8rem; }
.rig-grid div { padding: 1rem; background: var(--paper-deep); }
.rig-grid span { display: block; color: var(--muted); font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.lure-list { display: grid; gap: 1rem; }
.lure-row { display: grid; gap: .4rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.lure-row:last-child { border-bottom: 0; }
.lure-row strong { color: var(--river); }
.salt-line-pick { display: grid; gap: 1rem; padding: 1.25rem; border: 1px solid var(--line); border-left: 4px solid var(--strike); background: var(--paper-deep); }
.salt-line-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.salt-line-heading h3, .salt-line-heading p, .salt-line-pick > p { margin: 0; }
.salt-line-heading > span { padding: .3rem .55rem; border-radius: 99px; background: var(--river-deep); color: var(--ink); font-size: .7rem; font-weight: 900; text-align: center; }
.salt-line-specs { display: grid; gap: 1px; border: 1px solid var(--line); background: var(--line); }
.salt-line-specs > div { display: grid; gap: .3rem; padding: .8rem; background: var(--surface); }
.salt-line-specs span { color: var(--coral); font-size: .68rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.salt-line-pick > p, .salt-line-pick > small { color: var(--muted); }
.salt-line-links { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; }
.salt-line-links a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--river); font-weight: 850; }
@media (min-width: 42rem) { .salt-line-specs { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width: 34rem) { .salt-line-heading { align-items: stretch; flex-direction: column; } .salt-line-heading > span { width: fit-content; } }

.product-examples { margin-top: 1.25rem; border-block: 1px solid var(--line); }
.product-examples > summary { display: flex; align-items: center; min-height: 3.25rem; cursor: pointer; color: var(--river); font-weight: 850; }
.product-examples > div { display: grid; gap: 1px; border: 1px solid var(--line); background: var(--line); }
.product-examples article { display: grid; gap: .35rem; padding: 1rem; background: var(--paper-deep); }
.product-examples article span { color: var(--coral); font-size: .68rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.product-examples article strong { font: 700 1.2rem var(--font-display); }
.product-examples article small, .product-examples article p, .product-examples > p { margin: 0; color: var(--muted); }
.product-examples article a { display: inline-flex; align-items: center; min-height: 2.75rem; width: fit-content; color: var(--river); font-weight: 800; }
.product-examples > p { padding: .8rem 0; font-size: .82rem; }
@media (min-width: 42rem) { .product-examples > div { grid-template-columns: repeat(2,minmax(0,1fr)); } }

.tip-callout { padding: 1.2rem; background: oklch(27% .065 105); border-left: 4px solid var(--amber); }
.knot-video { display: grid; gap: .75rem; }
.knot-video p { margin: 0; }
.knot-video span, .video-privacy { color: var(--muted); font-size: .88rem; }
.knot-video a { color: var(--river); font-weight: 800; width: fit-content; }
.video-facade { position: relative; display: grid; place-items: center; min-height: 12rem; overflow: hidden; border: 1px solid var(--line); background: linear-gradient(145deg, var(--river-deep), oklch(30% .06 220)); aspect-ratio: 16 / 9; }
.video-facade button { min-height: 3.4rem; padding: .75rem 1.1rem; border: 1px solid var(--strike); background: var(--strike); color: oklch(18% .05 235); font-weight: 900; }
.video-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-offline { max-width: 28rem; padding: 0 1rem; color: var(--ink) !important; text-align: center; }

.setup-examples { margin-top: 1.5rem; border-block: 1px solid var(--line); }
.setup-examples > summary { min-height: 3.4rem; padding: .9rem 0; cursor: pointer; font: 800 1.1rem var(--font-body); }
.setup-profile-name { color: var(--muted); }
.setup-tier-list { display: grid; gap: .7rem; }
.setup-tier { display: grid; gap: .45rem; padding: 1rem; border: 1px solid var(--line); background: var(--paper-deep); }
.setup-tier > div { display: grid; gap: .35rem; }
.setup-tier p { margin: 0; color: var(--muted); }
.setup-tier a, .setup-brand-links a { color: var(--river); font-weight: 800; min-height: 2.75rem; display: inline-flex; align-items: center; }
.setup-tier-label { width: fit-content; padding: .2rem .5rem; border-radius: 99px; background: var(--river-deep); color: var(--ink); font-size: .72rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.setup-disclosure { padding: 1rem; border-left: 4px solid var(--strike); background: var(--surface); color: var(--muted); }
.setup-brand-links { display: flex; flex-wrap: wrap; gap: .4rem 1rem; padding-bottom: 1rem; }
@media (min-width: 42rem) { .setup-tier-list { grid-template-columns: repeat(3, minmax(0,1fr)); } }

.compare-table-wrap { padding: 4rem 1rem 2rem; overflow-x: auto; }
.compare-table { width: 100%; min-width: 44rem; border-collapse: collapse; }
.compare-table caption { text-align: left; font: 700 2rem var(--font-display); margin-bottom: 1rem; }
.compare-table th, .compare-table td { padding: 1rem; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.compare-table th { background: var(--paper-deep); }
.toast { position: fixed; z-index: 50; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); transform: translateX(-50%); padding: .8rem 1rem; background: var(--river-deep); color: var(--ink); box-shadow: var(--shadow); }

@media (min-width: 42rem) {
  .quick-form { grid-template-columns: 1fr 1fr 1.4fr; }
  .technique-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quiver-item { grid-template-columns: 3rem minmax(11rem, .8fr) 1.4fr; align-items: start; }
  .season-grid { grid-template-columns: repeat(2, 1fr); }
  .season-card:nth-child(odd) { border-right: 1px solid var(--line); }
  .season-card:nth-last-child(-n+2) { border-bottom: 0; }
  .rig-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 62rem) {
  .module-sidebar { z-index: 15; top: 4.5rem; width: 16.5rem; padding: 1rem; box-shadow: none; transform: none; }
  .module-sidebar-heading { display: none; }
  .menu-button, .module-scrim { display: none !important; }
  .app-shell, footer { margin-left: 16.5rem; }
  .quick-pick { grid-template-columns: .8fr 1.5fr; align-items: end; }
  .quick-pick .result-status { grid-column: 2; }
  .content-shell { grid-template-columns: 12rem 1fr; align-items: start; }
  .technique-rail { position: sticky; top: 6rem; }
  .filter-list { display: grid; overflow: visible; }
  .filter-list button { width: 100%; text-align: left; }
  .technique-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .season-grid { grid-template-columns: repeat(4, 1fr); }
  .season-card { border-right: 1px solid var(--line); border-bottom: 0; }
  .season-card:last-child { border-right: 0; }
  .field-notes { grid-template-columns: .7fr 1.3fr; }
  .note-list { grid-template-columns: repeat(2, 1fr); }
}
@media (hover: hover) {
  .technique-card:hover { z-index: 1; transform: translateY(-4px); background: oklch(25% .045 225); box-shadow: var(--shadow); }
  button:hover:not(:disabled) { filter: brightness(.94); }
}
@media (pointer: coarse) { button, select, input { min-height: 2.75rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }
@media print { .setup-system-card > .setup-system-body { display: grid !important; } .setup-system-card > .setup-system-summary > b { display: none; } .module-sidebar, .module-scrim, .menu-button { display: none !important; } .app-shell, footer { margin-left: 0; } [data-module][hidden] { display: block !important; } :root { --ink: oklch(18% .02 230); --muted: oklch(38% .02 230); --paper: oklch(98% .005 220); --paper-deep: oklch(94% .01 220); --surface: oklch(100% 0 0); --line: oklch(70% .02 220); --river: oklch(35% .08 220); } .site-header, .water-switch, .quick-pick, .technique-rail, .card-actions, .compare-button { display: none !important; } body { background: white; color: var(--ink); } body::before { display: none; } .hero { min-height: auto; color: var(--ink); background: none; padding: 2rem 0; } .hero-mark { display: none; } .conditions-advisor, .session-planner, .field-manual, .recommended-setups, .rig-bench, .hotspots, .structure-reading, .regulation-band, .content-shell, .quiver, .nj-playbook, .season-board, .field-notes, .sources { padding: 2rem 0; background: white; color: var(--ink); } .technique-card, .manual-card, .setup-system-card, .setup-system-tier, .hotspot-card, .regulation-grid article, .note-item, .bench-card, .setup-tier { break-inside: avoid; background: white; color: var(--ink); } .hero-lede, .note-item p, .bench-card span, .rig-bench .manual-heading > p, footer p { color: var(--muted) !important; } .note-item strong { color: var(--coral); } }

.line-comparison { padding: clamp(3rem, 7vw, 6rem) clamp(1rem, 7vw, 7rem); background: var(--paper-deep); }
.line-comparison-heading { display: grid; gap: 1rem; max-width: 72rem; margin-bottom: 2rem; }
.line-comparison-heading > p { max-width: 58rem; margin: 0; color: var(--muted); font-size: 1.05rem; }
.line-product-grid, .line-category-grid { display: grid; gap: 1rem; max-width: 82rem; }
.line-product-card { display: grid; align-content: start; gap: .7rem; padding: clamp(1.2rem, 3vw, 1.8rem); border: 1px solid var(--line); background: var(--surface); }
.line-product-card h3, .line-product-card p { margin: 0; }
.line-product-card h3 { font-size: clamp(1.7rem, 4vw, 2.4rem); }
.line-product-card > p { color: var(--muted); }
.line-product-card aside { display: grid; gap: .25rem; padding: .85rem; border-left: 4px solid var(--strike); background: var(--paper); }
.line-product-card aside span { color: var(--muted); }
.line-product-card > div:last-child, .line-product-card a { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.2rem; }
.line-product-card a { min-height: 2.75rem; color: var(--river); font-weight: 850; }
.line-table-wrap { max-width: 82rem; margin: 2rem 0; overflow-x: auto; border: 1px solid var(--line); }
.line-table { width: 100%; min-width: 92rem; border-collapse: collapse; background: var(--surface); }
.line-table caption { padding: 1rem; background: var(--river-deep); font: 700 1.45rem var(--font-display); text-align: left; }
.line-table th, .line-table td { padding: .85rem 1rem; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.line-table thead th, .line-table tbody th { background: var(--paper); }
.line-category-card { display: grid; gap: 1rem; padding: 1.2rem; border: 1px solid var(--line); background: var(--surface); }
.line-category-card h3, .line-category-card p { margin: 0; }
.line-category-card > div:first-child > span { color: var(--coral); font-size: .7rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.line-category-card h3 { margin-top: .2rem; font-size: 1.65rem; }
.line-winner { color: var(--river); font-weight: 850; }
.line-category-card section { display: grid; gap: .3rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.line-category-card section p { color: var(--muted); }
.line-category-card details { border-top: 1px solid var(--line); }
.line-category-card summary { min-height: 3rem; padding: .75rem 0; cursor: pointer; font-weight: 850; }
.line-category-card ul { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.line-category-card button { width: 100%; min-height: 2.8rem; padding: .55rem .75rem; border: 1px solid var(--line); background: var(--paper); text-align: left; }
.line-comparison-basis { max-width: 82rem; margin-top: 1.5rem; padding: 1rem; border-left: 4px solid var(--coral); background: var(--surface); }
.line-comparison-basis p { margin: .35rem 0 0; color: var(--muted); }
@media (min-width: 50rem) { .line-product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .line-category-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (min-width: 75rem) { .line-category-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }

/* Daily NJ coastal report */
.coastal-report { min-height: calc(100vh - 4.5rem); padding: clamp(3rem,7vw,6rem) clamp(1rem,7vw,7rem); background: var(--paper-deep); }
.coastal-report-heading { display: grid; gap: 1rem; max-width: 78rem; }
.coastal-report-heading h2 { margin: 0; font-size: clamp(2.7rem,7vw,5.8rem); }
.coastal-report-heading > p { max-width: 58rem; margin: 0; color: var(--muted); font-size: 1.05rem; }
.coastal-report-status { display: flex; flex-wrap: wrap; gap: .35rem 1rem; max-width: 82rem; margin: 1.5rem 0 1rem; padding: .85rem 1rem; border-left: 4px solid var(--strike); background: var(--surface); }
.coastal-report-status span { color: var(--muted); }
.coastal-zone-tabs { display: flex; gap: .5rem; max-width: 82rem; overflow-x: auto; padding: .35rem 0 1rem; scrollbar-width: thin; }
.coastal-zone-tabs button { flex: 0 0 auto; min-height: 3rem; padding: .6rem .9rem; border: 1px solid var(--line); background: var(--paper); color: var(--muted); font-weight: 850; }
.coastal-zone-tabs button[aria-selected="true"] { border-color: var(--strike); background: var(--strike); color: var(--river-deep); }
.coastal-zone-panel { display: grid; gap: 1px; max-width: 82rem; border: 1px solid var(--line); background: var(--line); box-shadow: var(--shadow); }
.coastal-zone-panel > header { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem; padding: clamp(1.2rem,4vw,2rem); background: var(--surface); }
.coastal-zone-panel h3 { margin: 0; font-size: clamp(2rem,6vw,4rem); }
.coastal-zone-panel > header > span { padding: .55rem .75rem; background: var(--river-deep); color: var(--river); font-weight: 900; }
.coastal-condition-grid { display: grid; gap: 1px; background: var(--line); }
.coastal-condition-grid > section, .coastal-forecast, .coastal-catch-report, .coastal-no-report, .coastal-techniques { padding: 1.2rem; background: var(--surface); }
.coastal-condition-grid section > span, .coastal-forecast > span, .coastal-techniques > span, .coastal-catch-report span { display: block; margin-bottom: .4rem; color: var(--coral); font-size: .7rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.coastal-condition-grid p { margin: .25rem 0; color: var(--muted); }
.coastal-condition-grid ol { display: grid; gap: .5rem; margin: .5rem 0 0; padding: 0; list-style: none; }
.coastal-condition-grid li { display: grid; grid-template-columns: 3rem 1fr auto; gap: .6rem; padding: .45rem 0; border-top: 1px solid var(--line); }
.coastal-condition-grid time, .coastal-condition-grid small { color: var(--muted); }
.coastal-forecast { display: grid; gap: .8rem; }
.coastal-forecast > div { display: grid; gap: .25rem; padding: .85rem; background: var(--paper); }
.coastal-forecast p, .coastal-catch-report p, .coastal-no-report p { margin: 0; color: var(--muted); }
.coastal-catch-report { border-left: 4px solid var(--reed); }
.coastal-catch-report h4 { margin: .8rem 0; font: 700 1.55rem var(--font-display); }
.coastal-catch-report .coastal-freshness { margin-top: .8rem; font-size: .86rem; }
.coastal-no-report { border-left: 4px solid var(--amber); }
.coastal-techniques > div { display: flex; flex-wrap: wrap; gap: .55rem; }
.coastal-techniques button { min-height: 3rem; padding: .65rem .9rem; border: 1px solid var(--river); background: var(--river-deep); font-weight: 850; }
.coastal-zone-panel a, .coastal-sources a { color: var(--river); font-weight: 800; }
.coastal-sources { max-width: 82rem; margin-top: 1rem; padding: 1rem; border: 1px solid var(--line); background: var(--surface); }
.coastal-sources summary { cursor: pointer; font-weight: 900; }
.coastal-sources > div { display: grid; gap: .5rem; margin-top: 1rem; }
.coastal-sources a { display: grid; text-decoration: none; }
.coastal-sources a span, .coastal-sources p { color: var(--muted); font-size: .86rem; }
@media (min-width: 48rem) { .coastal-condition-grid { grid-template-columns: .8fr 1.2fr; } .coastal-report-heading { grid-template-columns: 1fr .8fr; align-items: end; } }


/* Menhaden evidence brief */
.menhaden-brief { max-width: 82rem; margin-top: 1.5rem; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
.menhaden-brief > header { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem; padding: clamp(1.2rem,4vw,2rem); border-bottom: 1px solid var(--line); }
.menhaden-brief h3 { max-width: 58rem; margin: 0; font-size: clamp(1.8rem,5vw,3.4rem); }
.menhaden-brief > header > span { color: var(--muted); font-size: .82rem; font-weight: 800; }
.menhaden-brief-lede { max-width: 72rem; margin: 0; padding: 1.2rem; color: var(--muted); font-size: 1.05rem; }
.menhaden-findings { display: grid; gap: 1px; border-block: 1px solid var(--line); background: var(--line); }
.menhaden-findings article { padding: 1.2rem; background: var(--paper); }
.menhaden-findings span { color: var(--coral); font-size: .7rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.menhaden-findings h4 { margin: .45rem 0; font: 700 1.35rem var(--font-display); }
.menhaden-findings p, .menhaden-bottom-line p, .menhaden-evidence p { margin: 0; color: var(--muted); }
.menhaden-bottom-line { display: grid; gap: .4rem; padding: 1.2rem; border-left: 4px solid var(--amber); background: var(--river-deep); }
.menhaden-evidence { padding: 1rem 1.2rem; border-top: 1px solid var(--line); }
.menhaden-evidence summary { min-height: 2.5rem; cursor: pointer; font-weight: 900; }
.menhaden-evidence > div { display: grid; gap: .5rem; margin: .5rem 0 1rem; }
.menhaden-evidence a { display: grid; padding: .7rem; border: 1px solid var(--line); color: var(--river); text-decoration: none; }
.menhaden-evidence a span { color: var(--muted); font-size: .86rem; }
@media (min-width: 48rem) { .menhaden-findings { grid-template-columns: repeat(2,minmax(0,1fr)); } .menhaden-evidence > div { grid-template-columns: repeat(2,minmax(0,1fr)); } }