/* Fish-type field guide. Shared site chrome comes from styles.css. */
.fish-type-page { --type-ink:#173f48; --type-muted:#526d74; --type-paper:#edf2f1; margin:0; color:var(--type-ink); background:#061d29; }
.fish-type-page .site-header { position:absolute; left:0; right:0; background:transparent; }
.fish-type-page main { max-width:none; margin:0; padding:0; background:var(--type-paper); }
.fish-type-container { width:calc(100% - 224px); max-width:1200px; margin-inline:auto; }
.fish-type h1,.fish-type h2,.fish-type h3 { margin:0; font-family:"Atlas Serif",Georgia,serif; font-weight:400; color:inherit; }
.fish-type h2 { font-size:clamp(32px,3.7vw,54px); line-height:1.25; }
.fish-type p { margin:0; font-size:15px; line-height:1.85; }
.fish-type .fish-type-eyebrow { margin:0 0 16px; font:500 10px/1.6 "Atlas Mono",monospace; letter-spacing:.15em; color:var(--type-muted); }
.fish-type-backdrop { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.fish-type-hero { position:relative; height:clamp(530px,46vw,710px); color:#f1f6f4; background:#092a39; }
.fish-type-hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,#03202d8c,transparent 70%),linear-gradient(#03202d55,transparent 35%,#03202d35); }
.fish-type-hero-content { position:relative; display:flex; align-items:center; height:100%; padding-top:78px; }
.fish-type-hero-copy { width:68%; }
.fish-type-hero h1 { font-size:clamp(64px,7.7vw,112px); letter-spacing:-.045em; line-height:1.1; margin:0 0 26px; }
.fish-type .fish-type-lead { max-width:460px; font-size:17px; color:#e3edee; }
.fish-type-hero .fish-type-eyebrow,.fish-type-habitat .fish-type-eyebrow,.fish-type-next .fish-type-eyebrow { color:#c2d8d8; }
.fish-type-hero-caption { position:absolute; top:35%; right:0; width:180px; display:grid; gap:9px; border-left:1px solid #c2d8d86b; padding-left:22px; }
.fish-type-hero-caption small { font:10px/1.6 "Atlas Mono",monospace; letter-spacing:.1em; color:#c2d8d8; }
.fish-type-hero-caption small:nth-of-type(2) { margin-top:18px; }
.fish-type-hero-caption>span { font:20px/1.3 Georgia,serif; }
.fish-type-hero-caption a { color:inherit; text-decoration:none; font-size:12px; }
.fish-type-hero-caption a:hover { text-decoration:underline; }
.fish-type-scroll { position:absolute; bottom:26px; right:0; display:flex; gap:16px; align-items:center; color:inherit; text-decoration:none; font:10px "Atlas Mono",monospace; letter-spacing:.15em; }
.fish-type-scroll img { transform:rotate(90deg); filter:brightness(0) invert(1); }
.fish-type-about { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:24px; align-items:center; padding-block:38px; }
.fish-type-about-copy { grid-column:1 / 7; }
.fish-type-about-copy>p:not(.fish-type-eyebrow) { color:var(--type-muted); max-width:470px; margin:18px 0 20px; }
.fish-type-traits { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.fish-type-traits li { display:flex; align-items:baseline; gap:20px; font-size:14px; }
.fish-type-trait-number { font:12px "Atlas Mono",monospace; color:var(--type-muted); }
.fish-type-portrait { grid-column:8 / 13; position:relative; width:83%; margin:20px auto; }
.fish-type-portrait>a { display:block; transform:rotate(7deg); border-radius:31% 26% 32% 29%; overflow:hidden; }
.fish-type-portrait-image { width:100%; height:auto; aspect-ratio:1.32; object-fit:cover; display:block; }
.fish-type-portrait figcaption { position:absolute; right:-3%; bottom:-20px; color:#24465d; font:italic clamp(22px,2.7vw,38px)/1.2 Georgia,serif; transform:rotate(-10deg); }
.fish-type-seal { position:absolute; top:-22px; right:-16px; width:90px; height:90px; border:1px dashed #7d99ad; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; background:#edf2f1eb; }
.fish-type-seal span { font:6px "Atlas Inter",sans-serif; letter-spacing:.7px; }
.fish-type-seal img { width:28px; height:28px; }
.fish-type-habitat { position:relative; background:#072a3c; color:#eff7fc; }
.fish-type-habitat-shade { position:absolute; inset:0; background:linear-gradient(90deg,#001c2acc,#001c2a30 70%,#001c2a70); }
.fish-type-habitat-inner { position:relative; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:24px; align-items:center; padding-block:38px; }
.fish-type-habitat-copy { grid-column:1 / 7; }
.fish-type-habitat-copy>p:not(.fish-type-eyebrow) { color:#e3edf2; margin:18px 0; }
.fish-type-habitat-notes { grid-column:9 / 13; border-left:1px solid #bdd7d76b; padding-left:24px; }
.fish-type-habitat-notes ol { list-style:none; padding:0; margin:0; }
.fish-type-habitat-notes li { font:clamp(17px,1.7vw,24px)/1.65 "Atlas Serif",Georgia,serif; }
.fish-type-button { display:inline-flex; align-items:center; gap:22px; min-height:40px; padding:8px 0; border:0; border-bottom:1px solid currentColor; color:inherit; background:transparent; text-decoration:none; font-size:12px; }
.fish-type-button img { flex-shrink:0; }
.fish-type-habitat .fish-type-button img { filter:brightness(0) invert(1); }
.fish-type-lower { padding-top:38px; }
.fish-type-section-heading { display:flex; justify-content:space-between; gap:24px; align-items:end; }
.fish-type .fish-type-section-intro { max-width:650px; color:var(--type-muted); margin:14px 0 28px; }
.fish-type-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:28px 24px; align-items:start; }
.fish-type-card { position:relative; min-width:0; grid-column:span 4; display:grid; grid-template-columns:30px minmax(0,1fr); gap:8px 12px; }
.fish-type .fish-type-specimen-number { grid-column:1; grid-row:1 / 3; color:#70868b; font:28px/1 Georgia,serif; }
.fish-type .fish-type-family { grid-column:2; font:10px/1.5 "Atlas Mono",monospace; letter-spacing:.1em; color:var(--type-muted); overflow-wrap:anywhere; }
.fish-type-card-photo { grid-column:2; display:block; aspect-ratio:1.35; overflow:hidden; background:#153f46; }
.fish-type-card-photo img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.fish-type-card-photo img,.fish-type-portrait-image { filter:saturate(.82) contrast(1.04); }
.fish-type-card-photo:hover img { transform:scale(1.035); }
.fish-type-card-copy { grid-column:2; }
.fish-type-card h3 { font-size:clamp(20px,1.8vw,27px); line-height:1.4; }
.fish-type-card h3 a { display:flex; align-items:baseline; gap:12px; color:inherit; text-decoration:none; }
.fish-type-card h3 span { margin-left:auto; }
.fish-type .fish-type-scientific { font:italic 15px/1.5 Georgia,serif; color:var(--type-muted); overflow-wrap:anywhere; margin-top:4px; }
.fish-type-card:nth-child(6n+1) { grid-column:span 5; }
.fish-type-card:nth-child(6n+1) .fish-type-card-photo { aspect-ratio:1.9; }
.fish-type-card:nth-child(6n+2) { grid-column:span 3; margin-top:42px; }
.fish-type-card:nth-child(6n+4) { grid-column:span 3; }
.fish-type-card:nth-child(6n+5) { grid-column:span 5; }
.fish-type-card:nth-child(6n+5) .fish-type-card-photo { aspect-ratio:2; }
.fish-type-card:nth-child(6n+2) .fish-type-card-photo { grid-column:1 / -1; aspect-ratio:1.8; }
.fish-type-card:nth-child(6n+2) .fish-type-specimen-number { grid-row:1; }
.fish-type-card:nth-child(6n+3) .fish-type-family { grid-row:3; }
.fish-type-card:nth-child(6n+3) .fish-type-card-photo { grid-row:1 / 3; }
.fish-type-card:nth-child(6n+3) .fish-type-card-copy { grid-row:4; }
.fish-type-card:nth-child(6n+4) .fish-type-card-photo { grid-column:1 / -1; aspect-ratio:1.8; }
.fish-type-card:nth-child(6n+4) .fish-type-specimen-number { grid-row:1; }
.fish-type-card:nth-child(6n+5) { margin-top:22px; }
.fish-type-card:nth-child(6n+6) .fish-type-card-copy { grid-row:1; }
.fish-type-card:nth-child(6n+6) .fish-type-family { grid-row:3; }
.fish-type-faq { display:grid; grid-template-columns:4fr 8fr; gap:48px; padding:24px 0; margin-top:22px; border-top:1px solid #bbcdce; }
.fish-type-faq .fish-type-section-heading { display:block; }
.fish-type-faq h2 { font-size:clamp(30px,3vw,44px); margin-bottom:18px; }
.fish-type-faq details+details { border-top:1px solid #c5d3d3; }
.fish-type-faq summary { display:grid; grid-template-columns:48px 1fr 16px; align-items:center; gap:16px; list-style:none; padding:15px 0; cursor:pointer; font:18px/1.55 "Atlas Serif",Georgia,serif; }
.fish-type-faq summary::-webkit-details-marker { display:none; }
.fish-type-question-number { font:38px/1 Georgia,serif; color:#718c90; }
.fish-type-faq summary img { transition:transform .2s; }
.fish-type-faq details[open] summary img { transform:rotate(45deg); }
.fish-type-answer { padding:0 32px 20px 64px; color:var(--type-muted); }
.fish-type-next { position:relative; color:#eff7f6; background:#072d40; }
.fish-type-next::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#002333b8,#00233325); }
.fish-type-next-copy { position:relative; z-index:1; padding-block:32px; }
.fish-type-next-link { display:flex; justify-content:space-between; align-items:center; gap:24px; color:inherit; text-decoration:none; }
.fish-type-next h2 { font-size:clamp(32px,4vw,56px); }
.fish-type-next-arrow { font:80px/1 Georgia,serif; transition:transform .2s; }
.fish-type-next-link:hover .fish-type-next-arrow { transform:translate(5px,-5px); }
.fish-type-next-copy>p:last-child { margin-top:16px; font-size:13px; color:#d2e3e3; }
.fish-type-page :target { scroll-margin-top:24px; }
.fish-type-page a:focus-visible,.fish-type-page summary:focus-visible { outline:2px solid #65a9af; outline-offset:5px; }
@media(max-width:1100px) {
 .fish-type-container { width:calc(100% - 96px); }
 .fish-type-about,.fish-type-habitat-inner,.fish-type-grid { column-gap:20px; }
 .fish-type-hero-copy { width:65%; }
 .fish-type-hero h1 { font-size:72px; }
 .fish-type-hero-caption { width:160px; }
 .fish-type-habitat-notes { grid-column:8 / 13; }
 .fish-type-card { column-gap:8px; grid-template-columns:24px minmax(0,1fr); }
 .fish-type-faq { gap:28px; }
}
@media(min-width:701px) and (max-width:1100px) {
 .fish-type-hero { height:470px; }
 .fish-type-about { padding-block:28px; }
 .fish-type-habitat-inner { padding-block:28px; }
}
@media(max-width:700px) {
 .fish-type-container { width:calc(100% - 40px); }
 .fish-type-hero { height:650px; }
 .fish-type-hero-content { display:block; padding-top:175px; }
 .fish-type-hero-copy { width:100%; }
 .fish-type-hero h1 { font-size:clamp(48px,10vw,68px); margin-bottom:20px; }
 .fish-type .fish-type-lead { max-width:430px; font-size:15px; }
 .fish-type-hero-caption { top:auto; bottom:44px; width:100%; grid-template-columns:1fr 1fr; gap:8px 20px; padding-left:14px; }
 .fish-type-hero-caption>span { font-size:16px; }
 .fish-type-hero-caption small:nth-of-type(2) { display:none; }
 .fish-type-hero-caption small { font-size:8px; align-self:center; }
 .fish-type-scroll { bottom:16px; }
 .fish-type-about { grid-template-columns:1fr; gap:20px; padding-block:30px 40px; }
 .fish-type-about-copy,.fish-type-portrait { grid-column:1; }
 .fish-type-portrait { width:66%; margin:6px auto 16px; }
 .fish-type-seal { width:76px; height:76px; right:-20px; }
 .fish-type-seal span { font-size:5px; }
 .fish-type-habitat-inner { grid-template-columns:1fr; gap:24px; padding-block:30px; }
 .fish-type-habitat-copy,.fish-type-habitat-notes { grid-column:1; }
 .fish-type-habitat-notes { padding-left:16px; }
 .fish-type-habitat-notes ol { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
 .fish-type-habitat-notes li { font-size:16px; }
 .fish-type-lower { padding-top:30px; }
 .fish-type-section-heading { flex-wrap:wrap; gap:10px; }
 .fish-type h2 { font-size:32px; }
 .fish-type-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 16px; }
 .fish-type-card { grid-column:span 1; grid-template-columns:20px minmax(0,1fr); gap:6px; }
 .fish-type-card:nth-child(n) { grid-column:span 1; }
 .fish-type-card:nth-child(6n+1) .fish-type-card-photo,.fish-type-card:nth-child(6n+5) .fish-type-card-photo { aspect-ratio:1.2; }
 .fish-type .fish-type-specimen-number { font-size:24px; }
 .fish-type .fish-type-family { font-size:9px; letter-spacing:0; }
 .fish-type-card-photo { aspect-ratio:1; }
 .fish-type-card:nth-child(6n+2) .fish-type-card-photo,.fish-type-card:nth-child(6n+4) .fish-type-card-photo { aspect-ratio:1.2; }
 .fish-type-card h3 { font-size:18px; }
 .fish-type .fish-type-scientific { font-size:13px; }
 .fish-type-faq { grid-template-columns:1fr; gap:12px; padding:26px 0; margin-top:26px; }
 .fish-type-faq .fish-type-section-heading { display:flex; align-items:center; }
 .fish-type-faq h2 { margin-bottom:0; }
 .fish-type-faq summary { grid-template-columns:38px 1fr 16px; gap:10px; font-size:16px; padding-block:14px; }
 .fish-type-question-number { font-size:30px; }
 .fish-type-answer { padding:0 0 16px 48px; }
 .fish-type-next-copy { padding-block:28px; }
 .fish-type-next-arrow { font-size:60px; }
}
@media(prefers-reduced-motion:reduce) { .fish-type * { transition:none!important; } }