/* Shared long-form reading surface for guides and type pages. */
.fish-reading{display:grid;grid-template-columns:minmax(180px,240px) minmax(0,740px);gap:clamp(24px,5vw,72px);max-width:1100px;margin:60px auto;padding:0 24px;color:#d9e8e9;line-height:1.85}
.fish-reading-toc{align-self:start;border-top:1px solid #547171;padding-top:18px;font-size:14px}
.fish-reading-toc p{letter-spacing:.12em;color:#9bbdb8;font-size:12px}
.fish-reading-toc ol{padding-left:20px}.fish-reading-toc li{margin:9px 0}
.fish-reading a,.home-reading a{color:#b6e4d0;text-underline-offset:4px;overflow-wrap:anywhere}
.fish-reading-body{min-width:0}.fish-reading-body section{scroll-margin-top:100px;margin-bottom:36px}
.fish-reading-body h2{font-size:clamp(22px,2.3vw,30px);line-height:1.35;color:#eff7f5;margin:0 0 18px;font-weight:500}
.fish-reading-body p{margin:0 0 18px;font-size:17px;overflow-wrap:break-word}
.fish-reading-references{border-top:1px solid #365351;padding-top:28px}.fish-reading-references li{margin:12px 0}
.home-reading{position:relative;max-width:1120px;margin:0 auto;padding:60px 28px 80px;color:#d9e8e9;line-height:1.8}
.home-reading h2{font-size:clamp(25px,3vw,36px);font-weight:500;color:#eff7f5}.home-reading p{max-width:78ch}.home-reading ul{padding-left:20px}.home-reading li{margin:12px 0}
@media(max-width:700px){.fish-reading{grid-template-columns:1fr;padding:0 18px;margin:36px auto;gap:28px}.fish-reading-toc ol{columns:1}.fish-reading-body p{font-size:16px}.home-reading{padding:36px 22px 48px}}

/* Type articles share the field guide's light paper surface. */
.fish-type-page .fish-reading { color:var(--type-muted); }
.fish-type-page .fish-reading-body h2 { color:var(--type-ink); }
.fish-type-page .fish-reading a,.fish-type-page .fish-reading-toc p { color:#246773; }

/* Standalone articles: paper reading surface framed by the ocean. */
.reading-page { --reading-ink: #07394b; --reading-muted: #58727d; --reading-line: #cfdbd9; color: var(--reading-ink); background: #faf9f4; font-family: 'Atlas Inter', 'Segoe UI', sans-serif; }
.reading-page .site-header { position: absolute; left: 50%; transform: translateX(-50%); width: min(88%, 1180px); height: 76px; border: 0; color: #ecfaf7; }
.reading-page .site-header nav { gap: 22px; }
.reading-page .site-header nav a { font-size: 13px; }
.reading-page .site-header .brand { font-size: 14px; }
.reading-page .site-search { width: clamp(150px, 18vw, 240px); }
.reading-ocean { height: clamp(130px, 16.25vw, 208px); background: linear-gradient(90deg, #82d6d51a, #003c5266), url('/assets/ocean-reef.webp') center 24% / cover; }
.reading-shell { padding: clamp(50px, 6.25vw, 80px) 0 140px; }
.reading-page .fish-reading { width: min(89%, 1128px); max-width: none; margin: 0 auto; padding: 0; grid-template-columns: minmax(190px, 24%) minmax(0, 1fr); gap: 46px; color: var(--reading-muted); line-height: 1.65; }
.reading-page .fish-reading-toc { position: sticky; top: 32px; border: 0; padding: 0 28px 0 0; max-height: calc(100vh - 64px); overflow-y: auto; }
.reading-page .fish-reading-toc > p { margin: 0 0 34px; color: #347184; font: 12px/1.5 'Atlas Mono', monospace; letter-spacing: .22em; }
.reading-page .fish-reading-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.reading-page .fish-reading-toc li { position: relative; margin: 0; border-bottom: 1px solid var(--reading-line); counter-increment: toc; }
.reading-page .fish-reading-toc a { display: grid; grid-template-columns: 26px 1fr; gap: 14px; padding: 26px 0 26px 16px; color: var(--reading-muted); font-size: 15px; text-decoration: none; }
.reading-page .fish-reading-toc a::before { content: counter(toc, decimal-leading-zero); font-size: 14px; }
.reading-page .fish-reading-toc a[aria-current] { color: #006680; }
.reading-page .fish-reading-toc a[aria-current]::after { content: ''; position: absolute; left: 0; top: 26px; bottom: 26px; width: 2px; background: #00a3a8; }
.reading-page .fish-reading-body { position: relative; counter-reset: chapter; }
.reading-page .fish-reading-body::before { content: ''; position: absolute; top: 0; bottom: 0; left: -46px; width: 1px; background: #e0e7e3; }
.reading-page .reading-intro { padding-bottom: 58px; }
.reading-page .reading-intro .reading-kicker { display: flex; align-items: center; gap: 20px; margin: 0 0 34px; color: #6d8a90; font: 12px/1.5 'Atlas Mono', monospace; letter-spacing: .28em; }
.reading-kicker::after { content: ''; width: 70px; height: 1px; background: #a9c1c3; }
.reading-page h1 { margin: 0 0 42px; color: var(--reading-ink); font: 400 clamp(40px, 6.5vw, 78px)/1.08 Georgia, 'Atlas Serif', serif; letter-spacing: -.025em; }
.reading-page .fish-reading-body p { font-size: 21px; margin: 0 0 22px; }
.reading-page .fish-reading-body section { padding: 54px 0 44px; margin: 0; border-top: 1px solid var(--reading-line); scroll-margin-top: 32px; counter-increment: chapter; }
.reading-page .fish-reading-body section::before { content: counter(chapter, decimal-leading-zero); display: flex; align-items: center; gap: 20px; margin-bottom: 20px; color: #009ba5; font-size: 22px; background: linear-gradient(#66b9bc, #66b9bc) 50px center / 70px 1px no-repeat; }
.reading-page .fish-reading-body h2 { color: var(--reading-ink); font: 400 clamp(30px, 4.5vw, 54px)/1.15 Georgia, 'Atlas Serif', serif; letter-spacing: -.025em; margin-bottom: 32px; }
.reading-page .fish-reading a { color: #006d89; }
.reading-page .fish-reading a:hover { color: #009ba5; }
.reading-page .fish-reading-references ul { padding: 0; list-style: none; }
.reading-page .fish-reading-references li { margin: 0; border-bottom: 1px solid var(--reading-line); }
.reading-page .fish-reading-references a { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 24px 0; text-decoration: none; font-size: 19px; }
.reading-page .fish-reading-references a::after { content: '→'; flex-shrink: 0; font-size: 26px; }
.reading-page .fish-reading-body > p:last-child { font-size: 14px; }
.reading-page .site-footer { width: 100%; padding: 80px max(5.5%, calc((100% - 1128px)/2)); min-height: 220px; background: #003444; color: #a0c4cc; border: 0; }
.reading-page .reading-footer-brand { font: 16px/1.5 'Atlas Mono', monospace; letter-spacing: .2em; white-space: nowrap; }
.reading-page .reading-footer-note { font: italic 17px/1.5 Georgia, 'Atlas Serif', serif; }
@media (max-width: 1000px) {
  .reading-page .site-header { width: 90%; }
  .reading-page .site-header-tools, .reading-page .site-header nav { gap: 16px; }
  .reading-page .site-header nav a { font-size: 11px; }
  .reading-page .fish-reading { grid-template-columns: 24% minmax(0, 1fr); gap: 40px; }
  .reading-page .fish-reading-body::before { left: -40px; }
  .reading-page .fish-reading-toc { padding-right: 24px; }
  .reading-page .fish-reading-toc a { font-size: 13px; grid-template-columns: 20px 1fr; gap: 10px; padding-left: 12px; }
  .reading-page .fish-reading-body p { font-size: 18px; }
  .reading-page .site-footer { gap: 25px; }
}
@media (max-width: 700px) {
  .reading-ocean { height: 160px; }
  .reading-page .site-header { height: auto; min-height: 100px; padding: 12px 0; }
  .reading-page .site-search { width: 100%; }
  .reading-shell { padding: 36px 0 64px; }
  .reading-page .fish-reading { width: calc(100% - 40px); grid-template-columns: 1fr; gap: 36px; }
  .reading-page .fish-reading-toc { position: static; max-height: none; border-bottom: 1px solid var(--reading-line); padding: 0 0 16px; }
  .reading-page .fish-reading-toc > p { margin-bottom: 12px; }
  .reading-page .fish-reading-toc ol { display: flex; gap: 12px; overflow-x: auto; padding: 3px; }
  .reading-page .fish-reading-toc li { flex: 0 0 210px; border: 0; }
  .reading-page .fish-reading-toc a { padding: 8px 10px; font-size: 12px; }
  .reading-page .fish-reading-toc a[aria-current]::after { top: 8px; bottom: 8px; }
  .reading-page .fish-reading-body::before { display: none; }
  .reading-page .reading-intro { padding-bottom: 22px; }
  .reading-page .reading-intro .reading-kicker { font-size: 10px; margin-bottom: 22px; }
  .reading-page h1 { font-size: clamp(36px, 8vw, 52px); margin-bottom: 28px; }
  .reading-page .fish-reading-body p { font-size: 17px; line-height: 1.75; }
  .reading-page .fish-reading-body h2 { font-size: 32px; margin-bottom: 24px; }
  .reading-page .fish-reading-body section { padding: 32px 0 24px; }
  .reading-page .fish-reading-references a { font-size: 16px; }
  .reading-page .site-footer { padding: 42px 20px; align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { html:has(.reading-page) { scroll-behavior: auto; } }