/* FreeFish content pages (guides, about, contact). Plain HTML that reads well without
   JavaScript. Colours, type and spacing come from tokens.css. */
*{box-sizing:border-box}
body{margin:0;background:var(--c-bg);color:var(--c-text);font:var(--fs-3)/1.7 var(--font-body);-webkit-font-smoothing:antialiased}
a{color:var(--c-link);text-underline-offset:2px}
a:focus-visible{outline:2px solid var(--c-focus);outline-offset:2px;border-radius:4px}
img{max-width:100%;height:auto}
.site-top{background:var(--c-brand);color:var(--c-on-brand)}
.site-top-in{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);max-width:1040px;margin:0 auto;padding:var(--sp-4)}
.site-brand{display:flex;align-items:center;gap:var(--sp-2);color:var(--c-on-brand);font:800 var(--fs-5)/1 var(--font-display);text-decoration:none}
.site-brand img{border-radius:8px}
.site-nav{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-5);font-size:var(--fs-2);font-weight:600}
.site-nav a{color:var(--c-on-brand);text-decoration:none}
.site-nav a:hover{text-decoration:underline}
.site-nav .site-cta{background:var(--c-accent);color:var(--c-on-accent);padding:var(--sp-2) var(--sp-4);border-radius:var(--r-pill)}
.site-main{max-width:760px;margin:0 auto;padding:var(--sp-7) var(--sp-4) var(--sp-6)}
.site-main.wide{max-width:1040px}
.crumbs{margin:0 0 var(--sp-3);font-size:var(--fs-2);color:var(--c-text-3)}
.crumbs a{color:var(--c-text-2)}
h1,h2,h3{font-family:var(--font-display);line-height:1.2;color:var(--c-text);letter-spacing:-.01em}
h1{font-size:var(--fs-8);margin:0 0 var(--sp-3)}
h2{font-size:var(--fs-6);margin:var(--sp-7) 0 var(--sp-3)}
h3{font-size:var(--fs-5);margin:var(--sp-5) 0 var(--sp-2)}
.lead{font-size:var(--fs-4);color:var(--c-text-2);margin:0 0 var(--sp-4)}
.meta{font-size:var(--fs-2);color:var(--c-text-3);margin:0 0 var(--sp-6);padding-bottom:var(--sp-5);border-bottom:1px solid var(--c-line)}
article ul,article ol{padding-left:1.4em}
article li{margin:var(--sp-2) 0}
.tip{background:var(--c-accent-soft);border-left:4px solid var(--c-primary);border-radius:var(--r-md);padding:var(--sp-4) var(--sp-5);margin:var(--sp-5) 0}
.tip p{margin:0}
.warn{background:var(--c-warning-soft);border-left:4px solid var(--c-warning);border-radius:var(--r-md);padding:var(--sp-4) var(--sp-5);margin:var(--sp-5) 0}
.warn p{margin:0}
table{width:100%;border-collapse:collapse;margin:var(--sp-4) 0;font-size:var(--fs-2)}
th,td{text-align:left;padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--c-line);vertical-align:top}
th{font-weight:700;background:var(--c-surface-2)}
.table-wrap{overflow-x:auto}
.try{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-4);background:var(--c-brand);color:var(--c-on-brand);border-radius:var(--r-lg);padding:var(--sp-5);margin:var(--sp-7) 0 var(--sp-5)}
.try h2{color:var(--c-on-brand);margin:0 0 var(--sp-1);font-size:var(--fs-5)}
.try p{margin:0;color:var(--c-on-brand-2)}
.try a{background:var(--c-accent);color:var(--c-on-accent);font-weight:700;text-decoration:none;padding:var(--sp-3) var(--sp-5);border-radius:var(--r-pill);white-space:nowrap}
.related h2{font-size:var(--fs-5);margin-top:var(--sp-6)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--sp-4);padding:0;margin:var(--sp-4) 0;list-style:none}
.cards li{margin:0}
.cards a{display:block;height:100%;background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-lg);padding:var(--sp-5);text-decoration:none;color:var(--c-text);box-shadow:var(--shadow-sm);transition:border-color .15s,box-shadow .15s}
.cards a:hover{border-color:var(--c-line-strong);box-shadow:var(--shadow-md)}
.cards .kicker{display:block;font-size:var(--fs-1);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--c-link);margin-bottom:var(--sp-2)}
.cards b{display:block;font:700 var(--fs-4)/1.3 var(--font-display);margin-bottom:var(--sp-2)}
.cards span:last-child{font-size:var(--fs-2);color:var(--c-text-2)}
.section-title{font-size:var(--fs-5);margin:var(--sp-6) 0 0}
.site-foot{border-top:1px solid var(--c-line);margin-top:var(--sp-7)}
.site-foot-in{max-width:1040px;margin:0 auto;padding:var(--sp-5) var(--sp-4) var(--sp-7);display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-3);font-size:var(--fs-2);color:var(--c-text-3)}
.site-foot nav{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4)}
.site-foot a{color:var(--c-text-2)}
@media (max-width:640px){
 h1{font-size:var(--fs-7)}h2{font-size:var(--fs-5)}
 .site-main{padding-top:var(--sp-5)}
 .site-top-in{flex-direction:column;align-items:flex-start;gap:var(--sp-3)}
}
/* Diagrams: inline SVG drawn with these classes so they follow light and dark themes */
.diagram{margin:var(--sp-5) 0;padding:var(--sp-4);background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-lg)}
.diagram svg{display:block;width:100%;height:auto}
.diagram figcaption{margin-top:var(--sp-3);font-size:var(--fs-2);color:var(--c-text-2)}
.d-land{fill:var(--c-surface-3)}
.d-w1{fill:#d6ebf7}.d-w2{fill:#b5d9ef}.d-w3{fill:#8cc2e4}.d-w4{fill:#5fa6d4}.d-w5{fill:#3a86bd}
.d-contour{fill:none;stroke:#2c6f9e;stroke-width:1.2;opacity:.7}
.d-shore{fill:none;stroke:var(--c-text-2);stroke-width:2}
.d-line{fill:none;stroke:var(--c-text);stroke-width:1.6}
.d-thin{fill:none;stroke:var(--c-text-2);stroke-width:1.2}
.d-dash{fill:none;stroke:var(--c-text-2);stroke-width:1.2;stroke-dasharray:4 4}
.d-ink{fill:var(--c-text)}
.d-metal{fill:#7b8794}
.d-bait{fill:#6b8f3a}
.d-accent{fill:var(--c-primary)}
.d-flow{fill:none;stroke:#2c6f9e;stroke-width:2;marker-end:url(#arrow)}
.d-eddy{fill:none;stroke:#2c6f9e;stroke-width:1.6;stroke-dasharray:5 4}
.d-seam{fill:none;stroke:#e0b100;stroke-width:3;stroke-dasharray:2 6;stroke-linecap:round}
.d-warm{fill:#f6d58c}.d-thermo{fill:#a9d7c4}.d-cold{fill:#5f8fb5}
.d-label{fill:var(--c-text);font:600 14px var(--font-body)}
.d-small{fill:var(--c-text-2);font:500 12px var(--font-body)}
.d-onwater{fill:#0d2f45;font:600 13px var(--font-body)}
.d-onwater-light{fill:#fff;font:600 13px var(--font-body)}
.d-dot{fill:var(--c-text)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .d-w1{fill:#1d3a4f}:root:not([data-theme="light"]) .d-w2{fill:#21486a}:root:not([data-theme="light"]) .d-w3{fill:#255783}:root:not([data-theme="light"]) .d-w4{fill:#2a669c}:root:not([data-theme="light"]) .d-w5{fill:#3176b4}:root:not([data-theme="light"]) .d-contour,:root:not([data-theme="light"]) .d-flow,:root:not([data-theme="light"]) .d-eddy{stroke:#9fd0f0}:root:not([data-theme="light"]) .d-onwater{fill:#eaf5fc}:root:not([data-theme="light"]) .d-warm{fill:#8a6a2a}:root:not([data-theme="light"]) .d-thermo{fill:#2f6e5a}:root:not([data-theme="light"]) .d-cold{fill:#2a4a6a}}