:root {
  color-scheme: dark;
  --tent: #142622;
  --ice: #8bbdb5;
  --lake: #124952;
  --deep: #092932;
  --blackwater: #081f26;
  --foam: #f0f7eb;
  --muted: #b9d3cb;
  --lamp: #f4cb84;
  --paper: #efe9d5;
  --ink: #213b32;
  --rule: #46666a;
  --space: clamp(20px, 5vw, 64px);
  --measure: 1100px;
  --mast-height: 64px;
  font: 16px/1.55 system-ui, -apple-system, sans-serif;
  background: var(--blackwater);
  color: var(--foam);
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
body:has(dialog[open]) { overflow: hidden; }
html { scroll-padding-top: calc(var(--mast-height) + 12px); }
main, section { min-width: 0; }
h1, h2, p, figure { margin: 0; }
h1, h2 { font-family: Georgia, serif; font-weight: 500; }
h2 { font-size: clamp(36px, 6vw, 70px); letter-spacing: -.045em; line-height: 1; }
a { color: inherit; text-underline-offset: .22em; }
button { font: inherit; color: inherit; cursor: pointer; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--lamp); outline-offset: 4px; }
[hidden] { display: none !important; }
::selection { background: var(--lamp); color: #142622; }
.wrap { width: min(var(--measure), 100% - var(--space) * 2); margin-inline: auto; }
.artwork { display: block; width: 100%; height: auto; }
.skip { position: fixed; z-index: 4; top: 6px; left: 6px; transform: translateY(-150%); padding: .75rem; background: var(--lamp); color: var(--tent); }
.skip:focus { transform: none; }
.mast {
  position: sticky; top: 0; z-index: 2;
  background: #132925; border-bottom: 1px solid #567066; min-height: var(--mast-height);
}
.mast-inner {
  width: min(1320px, 100% - var(--space) * 2); margin-inline: auto;
  min-height: var(--mast-height); display: flex; justify-content: space-between; gap: 10px; align-items: center;
}
.brand { display: flex; gap: 9px; align-items: center; font-size: .92rem; font-weight: 760; text-decoration: none; white-space: nowrap; }
.brand img { flex: none; }
.mast nav { display: flex; gap: clamp(10px, 3vw, 30px); align-items: center; }
.mast nav a { min-height: 44px; display: inline-flex; align-items: center; font-size: .86rem; text-decoration: none; white-space: nowrap; }
.mast nav a:hover { text-decoration: underline; }
.scroll-progress { position: absolute; inset: auto 0 -1px; height: 2px; background: var(--lamp); transform: scaleX(var(--scroll, 0)); transform-origin: left; }
.surface { position: relative; isolation: isolate; background: var(--tent); padding: clamp(42px, 7vw, 102px) 0 clamp(34px, 5vw, 64px); }
.surface-art, .below-art { position: absolute; inset: 0; height: 100%; z-index: -1; pointer-events: none; }
.surface::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #10252035, #14262200 62%); pointer-events: none; }
.surface-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); align-items: center; gap: clamp(22px, 5vw, 64px); }
.preview-label, .section-mark { display: flex; align-items: center; gap: 9px; font-size: .83rem; letter-spacing: .045em; font-weight: 680; }
.preview-label { color: #f8deab; }
.preview-label span, .section-mark span, .ice-caption span { width: 7px; height: 7px; border-radius: 50%; background: var(--lamp); flex: none; }
.intro h1 { font-size: clamp(52px, 10vw, 132px); line-height: .87; color: #fff1d2; letter-spacing: -.064em; margin: 17px 0 16px; }
.intro-line { font-size: clamp(17px, 2.1vw, 23px); color: #e6eee0; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 17px; margin-top: 23px; }
.button, .text-link { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; font-size: .9rem; font-weight: 760; }
.button { padding: 0 15px; border-radius: 5px; text-decoration: none; }
.button svg, .play-mark svg { width: 17px; height: 17px; fill: currentColor; }
.primary { background: var(--lamp); color: #1a2c23; }
.primary:hover { background: #ffe0a8; }
.text-link { background: #142622; padding-inline: 8px; border-radius: 4px; }
.hero-cover {
  display: block; position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 1.45;
  border: 1px solid #9eb7a8; border-radius: 8px; background: #7fa8a4; text-decoration: none;
  box-shadow: 0 19px 55px #10292357;
}
.hero-cover > svg { height: 100%; position: absolute; inset: 0; z-index: -1; }
.hero-cover::after { content: ""; position: absolute; inset: 30% 0 0; z-index: -1; background: linear-gradient(transparent,#102522ea); }
.hero-cover-caption { position: absolute; inset: auto 60px 16px 17px; }
.hero-cover-caption span { display: block; color: #f8dfad; font-size: .74rem; font-weight: 720; }
.hero-cover-caption strong { display: block; font-size: clamp(16px, 2.1vw, 25px); line-height: 1.18; margin-top: 4px; }
.play-mark {
  display: grid; place-items: center; border-radius: 50%; background: #f5e3b9; color: #203a32;
  position: absolute; right: 15px; bottom: 15px; width: 44px; height: 44px;
}
.hero-cover:hover .play-mark, .episode-trigger:hover .play-mark { background: white; }
.descent-link { margin-top: clamp(23px, 4vw, 54px); }
.descent-link a { display: inline-flex; gap: 7px; align-items: center; min-height: 44px; color: #fff0cd; font-weight: 720; font-size: .9rem; }
.descent-link svg, .chevron, .close svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.65; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ice { position: relative; isolation: isolate; overflow: hidden; height: clamp(180px, 34vw, 425px); background: var(--ice); }
.ice-art { height: 100%; }
.ice-light { position: absolute; inset: -15% -10%; pointer-events: none; background: radial-gradient(ellipse at 75% 32%, #fbe5a240, transparent 27%); }
.ice-caption {
  position: absolute; bottom: 19px; left: max(var(--space), (100% - var(--measure)) / 2);
  display: flex; align-items: center; gap: 8px; padding: .38rem .7rem;
  color: #fff7de; background: #173c3e; border-radius: 4px; font-size: .8rem;
}
.about { position: relative; isolation: isolate; padding: clamp(92px, 15vw, 215px) 0 clamp(60px, 9vw, 115px); background: var(--lake); }
.about-inner { position: relative; }
.about-inner h2 { margin: 12px 0 15px; }
.about-inner > p:not(.section-mark) { max-width: 36ch; }
.about-inner .content-note { margin-top: 11px; color: #d0e7da; font-size: .8rem; }
.section-mark { color: #ebeed6; }
.featured { position: relative; isolation: isolate; overflow: clip; background: linear-gradient(var(--lake),var(--deep)); padding: 28px 0 clamp(47px, 8vw, 100px); }
.featured h2 { max-width: 80%; margin-bottom: 24px; }
.walleye { position: absolute; right: max(22px, 4vw, (100% - var(--measure)) / 2); top: 0; width: clamp(95px, 20vw, 245px); z-index: -1; }
.featured-grid, .video-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(12px, 3vw, 30px); }
.episode { min-width: 0; }
.episode-trigger { display: block; position: relative; color: inherit; text-decoration: none; height: 100%; }
.episode-art { display: block; position: relative; background: #356469; overflow: hidden; border-radius: 5px; aspect-ratio: 2; }
.episode-art .artwork, .episode-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.episode-art img { color: transparent; }
.episode-art .play-mark { width: 36px; height: 36px; inset: auto 9px 9px auto; }
.episode-meta { display: block; color: var(--muted); font-size: .77rem; margin: 8px 0 2px; font-weight: 650; }
.episode-name { display: block; font-size: clamp(.92rem, 1.8vw, 1.22rem); line-height: 1.25; }
.episode-trigger:hover .episode-name { text-decoration: underline; }
.library { background: var(--deep); border-top: 1px solid var(--rule); padding: clamp(35px, 7vw, 76px) 0 clamp(45px, 9vw, 100px); }
.section-heading { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: 14px 25px; }
.section-heading p { margin-top: 10px; color: var(--muted); }
.filters { display: flex; gap: 6px; flex-wrap: wrap; }
.filters button { min-height: 44px; border: 1px solid #648983; padding: 0 13px; border-radius: 4px; font-size: .86rem; background: transparent; }
.filters button:hover { background: #234c50; }
.filters button[aria-pressed="true"] { color: var(--tent); background: #cbe4d5; border-color: #cbe4d5; font-weight: 750; }
.library-status { margin: 15px 0 8px; font-size: .8rem; color: var(--muted); min-height: 1.24em; }
.video-grid { grid-template-columns: repeat(3,minmax(0,1fr)); row-gap: 22px; }
.field-notes { color-scheme: light; color: var(--ink); background: var(--paper); padding: clamp(37px, 7vw, 85px) 0 clamp(48px, 9vw, 110px); }
.field-notes :focus-visible { outline-color: #745022; }
.field-notes .section-heading p { color: #43574b; }
.guide-list { margin-top: 27px; display: grid; gap: 0; }
.guide { border-block-start: 1px solid #99a396; }
.guide:last-child { border-block-end: 1px solid #99a396; }
.guide summary {
  cursor: pointer; list-style: none; display: grid; align-items: center;
  grid-template-columns: minmax(68px, 132px) minmax(0,1fr) 22px; gap: clamp(10px, 3vw, 22px);
  padding: 13px 0; min-height: 44px;
}
.guide summary::-webkit-details-marker { display: none; }
.guide summary strong { display: block; font: 500 clamp(18px,3.7vw,32px)/1.13 Georgia,serif; }
.guide summary small { font-size: .81rem; color: #43574b; }
.guide-cover { border-radius: 4px; }
.guide[open] .chevron { transform: rotate(180deg); }
.guide-body { max-width: 690px; padding: 2px 0 24px; }
.guide-frames { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; list-style: none; margin: 11px 0 0; padding: 0; }
.fish-frames { grid-template-columns: repeat(2,minmax(0,1fr)); }
.guide-frames .artwork { border-radius: 4px; background: #d7deca; }
.guide-frames figcaption { margin-top: 6px; font-size: .85rem; line-height: 1.35; }
.guide-frames strong { display: block; }
.field-reference { margin-top: 14px; color: #43574b; font-size: .79rem; }
.footer { background: #132925; padding: 27px 0; }
.footer-inner, .footer-links { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; align-items: center; }
.footer p { color: var(--muted); font-size: .82rem; }
.footer-links button, .footer-links a { min-height: 44px; display: inline-flex; align-items: center; border: 0; padding: 0; background: transparent; font-size: .85rem; text-decoration: underline; text-underline-offset: .22em; }
dialog {
  color: var(--foam); background: #102e32; border: 1px solid #668782; border-radius: 8px;
  padding: clamp(14px,4vw,22px); width: min(92%, 690px); max-height: 90dvh; overflow: auto;
}
dialog::backdrop { background: #051719d9; }
.dialog-head { display: flex; justify-content: space-between; align-items: start; gap: 9px; margin-bottom: 13px; }
.dialog-head h2 { font-size: clamp(23px, 6vw, 36px); line-height: 1.1; }
.player-label { font-size: .8rem; color: var(--lamp); }
.close { min-width: 44px; min-height: 44px; display: grid; place-items: center; border: 1px solid #64837e; border-radius: 4px; background: transparent; }
dialog video { display: block; width: 100%; max-height: 56dvh; background: #061c20; aspect-ratio: 16/9; }
#player-description, .player-error { margin: 10px 0; font-size: .87rem; }
.player-error { color: #f8d7a0; }
#player-source { display: inline-flex; min-height: 44px; align-items: center; font-size: .83rem; }
@media (max-width: 680px) {
  .surface-inner { grid-template-columns: 1fr; }
  .hero-cover { aspect-ratio: 2; }
  .surface { padding-top: 34px; padding-bottom: 17px; }
  .descent-link { margin-top: 14px; }
  .about { padding-top: 79px; }
  .video-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 360px) {
  :root { --space: 14px; }
  .mast nav { gap: 9px; }
  .brand { gap: 5px; font-size: .81rem; }
  .brand img { width: 24px; height: 24px; }
  .mast nav a { font-size: .77rem; }
  .hero-cover-caption { left: 12px; bottom: 12px; }
  .guide-frames figcaption { font-size: .77rem; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    body:not([data-reduced]) .ice-light { animation: ice-light linear both; animation-timeline: view(); animation-range: entry 15% exit 90%; }
    body:not([data-reduced]) .walleye { animation: swim linear both; animation-timeline: view(); animation-range: entry 0% cover 65%; }
  }
}
@keyframes ice-light { from { transform: translateY(-11%); } to { transform: translateY(12%); } }
@keyframes swim { from { transform: translateX(18%); } to { transform: translateX(-10%); } }
@media (prefers-reduced-motion: reduce) { .scroll-progress { display: none; } }
body[data-reduced] .scroll-progress { display: none; }