/* Open water: shared blue visual language for every site template. */
:root {
 --paper:#F4F8FC;
 --surface:#FFFFFF;
 --surface-2:#EDF4FB;
 --ink:#102D4F;
 --ink-2:#4C6380;
 --ink-3:#596F88;
 --line:#DCE7F2;
 --line-strong:#B7CCE0;
 --navy:#103A66;
 --navy-2:#092B50;
 --brand:#1264D9;
 --brand-strong:#0D4FAC;
 --brand-tint:#E9F2FF;
 --brand-tint-2:#D6E8FF;
 --accent:#E87B47;
 --s1:#1264D9;
 --radius:14px;
 --max-w:1184px;
 --font-editorial:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;
}
.tb-header { background:var(--surface); color:var(--ink); border-bottom:1px solid var(--line); }
.tb-header .tb-wordmark { color:var(--ink); font-size:21px; letter-spacing:.04em; }
.tb-header .tb-wordmark img { filter:none; }
.tb-header .tb-wordmark .tb-beta { color:var(--ink-2); background:var(--surface-2); }
.tb-nav a, .tb-nav a.is-primary { color:var(--ink-2); }
.tb-nav a:hover { color:var(--ink); background:var(--surface-2); }
/* Current page = tab underline flush with the header's bottom edge (no filled box,
   so the nav never reads like the filter chips underneath). */
.tb-nav a[aria-current="page"], .tb-nav a.is-active { color:var(--ink); background:transparent; font-weight:700; }
.tb-nav a[aria-current="page"] svg, .tb-nav a.is-active svg { color:var(--brand); }
.tb-header .tb-btn-on-navy, .tb-header .tb-icon-btn { color:var(--ink); border-color:var(--line-strong); }
.tb-header .tb-nav-sep { background:var(--line); }
.tb-page-title { font-size:clamp(26px,4vw,36px); letter-spacing:.025em; line-height:1.4; }
.tb-lead { line-height:1.9; }
.tb-section { margin-bottom:36px; }
.tb-section-title { padding-left:0; font-size:22px; letter-spacing:.02em; }
.tb-section-title::before { display:none; }
.tb-section-header { padding-bottom:12px; border-bottom:1px solid var(--line-strong); margin-bottom:18px; }
.tb-section-link { gap:5px; }
.tb-card { border-color:var(--line); }
.tb-card-p { padding:22px; }
.tb-btn { min-height:44px; border-radius:6px; }
.tb-btn-primary { background:var(--brand); border-color:var(--brand); }
.tb-btn-primary:hover { background:var(--brand-strong); }
.tb-chip { border-radius:6px; }
.tb-list { background:var(--surface); }
.tb-footer { background:#EAF2FA; margin-top:48px; }
.tb-footer-group { color:var(--ink); font-size:12px; }
.tb-footer-nav a { padding:6px 0; }
.fieldnote-signoff { padding:12px 0 26px; }
.fieldnote-signoff p { font-family:var(--font-editorial); font-size:26px; font-weight:600; color:var(--ink); line-height:1.6; margin-top:8px; }
.fieldnote-eyebrow { font-size:10px; font-weight:700; letter-spacing:.17em; color:var(--brand-strong); }
/* The image is contextual; the copy remains readable even before it loads. */
.fieldnote-hero { display:grid; grid-template-columns:1.05fr 1fr; margin:28px auto 24px; width:calc(100% - 40px); max-width:calc(var(--max-w) - 40px); padding:0; gap:0; align-items:stretch; background:var(--navy-2); color:#FFF; border-radius:20px; overflow:hidden; }
.fieldnote-hero-copy { padding:42px 44px 36px; position:relative; }
.fieldnote-hero .fieldnote-eyebrow { color:#B9DAFF; font-size:11px; letter-spacing:.12em; display:flex; align-items:center; gap:9px; }
.fieldnote-hero .fieldnote-eyebrow::before { content:""; width:22px; height:2px; background:#71B6FF; }
.fieldnote-hero h1 { font-family:var(--font); font-size:clamp(34px,4.5vw,54px); line-height:1.35; font-weight:700; letter-spacing:.015em; margin:20px 0 18px; overflow-wrap:normal; }
.fieldnote-hero h1 span { color:#8FC7FF; }
.fieldnote-intro { font-size:14px; color:#D3E3F5; line-height:1.9; max-width:30em; }
.fieldnote-hero-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.fieldnote-hero-actions .tb-btn { padding:0 20px; min-height:48px; }
.fieldnote-hero-actions .tb-btn-primary { background:#FFF; color:var(--brand-strong); border-color:#FFF; }
.fieldnote-hero-actions .tb-btn-primary:hover { background:#E3F0FF; border-color:#E3F0FF; }
.fieldnote-hero-actions .tb-btn-secondary { background:transparent; color:#FFF; border-color:#6E91B5; }
.fieldnote-hero-actions .tb-btn-secondary:hover { background:#164473; }
.fieldnote-hero-note { margin:22px 0 0; font-size:11px; color:#B9D1EB; letter-spacing:.05em; }
.fieldnote-hero figure { margin:0; position:relative; min-width:0; background:#225477; }
.fieldnote-hero-image { width:100%; height:100%; min-height:370px; object-fit:cover; object-position:55% center; display:block; }
.fieldnote-hero figcaption { position:absolute; bottom:20px; right:20px; left:20px; display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:11px; color:#FFF; padding:12px 16px; background:#092B50; border-radius:8px; }
.fieldnote-hero figcaption span:last-child { font-size:9px; letter-spacing:.14em; color:#B9DAFF; }
.fieldnote-weather .tb-bridge-inner { padding-top:18px; padding-bottom:20px; }
.fieldnote-weather .tb-area-label, .fieldnote-weather .tb-kicker { color:#4C6380; }
.fieldnote-routes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:4px 0 34px; }
.fieldnote-route { display:flex; align-items:center; gap:14px; padding:16px 0; border-bottom:1px solid var(--line-strong); text-decoration:none; }
.fieldnote-route img { width:80px; height:74px; object-fit:cover; border-radius:3px; }
.fieldnote-route:first-child img { object-fit:contain; mix-blend-mode:normal; }
.fieldnote-route small { display:block; color:var(--ink-2); font-size:11px; margin-bottom:4px; }
.fieldnote-route strong { display:block; font-size:16px; line-height:1.6; }
.fieldnote-route svg { margin-left:auto; flex-shrink:0; }
.fieldnote-route:hover strong { color:var(--brand); text-decoration:underline; text-underline-offset:4px; }
.catch-species-head { margin-top:26px; padding-bottom:10px; }
.catch-species-title { font-size:21px; }
.catch-species-illustration { width:88px; height:58px; object-fit:contain; mix-blend-mode:normal; flex-shrink:0; }
.catch-species-title a { gap:12px; }
.catch-day { background:var(--surface-2); }
.catch-row { padding-top:15px; padding-bottom:15px; }
.catch-row:hover { background:#F1F7FF; }
.catch-row-count { color:var(--ink); }
.fieldnote-page-intro { margin:8px 0 24px; color:var(--ink-2); font-size:15px; line-height:1.8; }
.fieldnote-page-heading { border-bottom:1px solid var(--line-strong); padding:8px 0 20px; margin-bottom:24px; }
.fieldnote-page-heading .fieldnote-eyebrow { display:block; margin-bottom:8px; }
.boat-section-nav { padding-bottom:6px; }
.boat-species-stat { border-top:2px solid var(--brand); }
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
 .fieldnote-route img { transition:transform .2s ease; }
 .fieldnote-route:hover img { transform:translateY(-3px); }
 .tb-btn { transition:background-color .15s ease,border-color .15s ease; }
}
@media (max-width:767px) {
 .fieldnote-hero { grid-template-columns:1fr; width:auto; margin:16px; border-radius:16px; }
 .fieldnote-hero-copy { padding:26px 24px 24px; }
 .fieldnote-hero h1 { font-size:36px; line-height:1.35; margin:16px 0 14px; }
 .fieldnote-intro { font-size:13px; }
 .fieldnote-hero figure { height:154px; }
 .fieldnote-hero-image { min-height:0; height:154px; object-position:center 55%; }
 .fieldnote-hero-actions { margin-top:20px; gap:8px; }
 .fieldnote-hero-actions .tb-btn { padding:0 14px; font-size:13px; }
 .fieldnote-hero-note { margin-top:14px; font-size:10px; }
 .fieldnote-hero figcaption { bottom:10px; left:auto; right:12px; padding:7px 10px; font-size:10px; }
 .fieldnote-hero figcaption span:last-child { display:none; }
 .fieldnote-routes { grid-template-columns:1fr; gap:0; margin-bottom:28px; }
 .fieldnote-route { padding:12px 0; }
 .fieldnote-route img { width:58px; height:48px; }
 .fieldnote-route strong { font-size:15px; }
 .fieldnote-route small { margin-bottom:0; }
 .tb-section-title { font-size:20px; }
 .tb-section-header { flex-wrap:wrap; gap:8px; }
 .tb-card-p { padding:18px; }
 .fieldnote-signoff p { font-size:23px; }
 .catch-species-illustration { width:68px; height:46px; }
}

.tb-thumb.fish-fieldnote-art { width:150px; height:110px; background:transparent; border:0; border-radius:0; mix-blend-mode:multiply; }
@media (max-width:480px) { .tb-thumb.fish-fieldnote-art { width:105px; height:82px; } }

.fieldnote-skip { position:fixed; left:16px; top:-80px; z-index:100; padding:12px 18px; background:var(--surface); color:var(--ink); border:2px solid var(--brand); }
.fieldnote-skip:focus { top:8px; }
.tb-nav a { min-height:40px; }

@media (hover:none) { .catch-row:hover { background:var(--surface); } }

/* Consistent controls, content hierarchy, and reading surfaces across pages. */
.tb-header { --tb-header-h:64px; min-height:var(--tb-header-h); }
.tb-header-inner { height:var(--tb-header-h); max-width:1184px; }
.tb-header .tb-wordmark { font-size:20px; letter-spacing:.025em; gap:9px; flex-shrink:0; }
.tb-header .tb-wordmark .tb-beta { display:none; }
.tb-header .tb-avatar { flex-shrink:0; border:1px solid var(--line); color:var(--ink-2); background:var(--surface-2); }
.tb-header-actions { flex-shrink:0; }
.tb-header-actions .tb-icon-btn { width:44px; height:44px; flex-shrink:0; }
.tb-nav { gap:2px; flex-shrink:0; }
.tb-nav a { position:relative; border-radius:8px; padding:7px 9px; }
.tb-nav a[aria-current="page"]::after, .tb-nav a.is-active::after { content:""; position:absolute; left:9px; right:9px; bottom:calc((44px - var(--tb-header-h, 64px)) / 2); height:2px; border-radius:2px 2px 0 0; background:var(--brand); }
.tb-page-title { font-weight:700; letter-spacing:-.02em; }
.tb-section-header { border-color:var(--line); }
.tb-section-title { font-size:21px; }
.tb-card-link:hover { border-color:#8BB4E6; }
.tb-btn { border-radius:9px; font-weight:700; }
.tb-chip { border-radius:8px; min-height:36px; }
.tb-chip.is-active, .tb-chip[aria-pressed="true"] { border-color:var(--brand); }
.tb-table th { padding-top:12px; padding-bottom:12px; color:var(--ink-2); }
.tb-table td { padding-top:13px; padding-bottom:13px; }
.tb-input, .tb-select, .tb-textarea { border-color:var(--line-strong); }
.tb-footer { border-top:1px solid var(--line-strong); }
.fieldnote-signoff p { font-family:var(--font); font-size:25px; letter-spacing:.02em; }
.fieldnote-page-heading { border-left:3px solid var(--brand); border-bottom:0; padding:8px 0 8px 18px; }
.fieldnote-route { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:16px; gap:10px; }
.fieldnote-route img { width:64px; height:60px; border-radius:8px; }
.fieldnote-route strong { font-size:14px; }
.fieldnote-route:hover { border-color:#8BB4E6; }
.catch-day { background:#EAF2FC; }
.catch-species-head { border-bottom:0; }
.catch-row-count { color:var(--navy-2); }
/* Keep region selection light; reserve deep blue for the main story. */
.fieldnote-weather { background:var(--surface); color:var(--ink); border-top:1px solid var(--line); border-bottom:1px solid var(--line); --on-navy-2:var(--ink-2); --on-navy-3:var(--ink-3); --on-navy-line:var(--line); --good-on-navy:var(--good); --fair-on-navy:var(--fair); --poor-on-navy:var(--poor); }
.fieldnote-weather .tb-area-bar a, .fieldnote-weather .tb-area-bar summary { color:var(--ink-2); border-color:var(--line-strong); background:var(--surface); }
.fieldnote-weather .tb-area-bar a:hover, .fieldnote-weather .tb-area-bar a[aria-current], .fieldnote-weather .tb-area-bar a.is-active { color:var(--brand-strong); background:var(--brand-tint); border-color:var(--brand); }
.fieldnote-weather .tb-bridge-link { color:var(--ink); background:var(--surface-2); border-color:var(--line); }
.fieldnote-weather .tb-bridge-link:hover { background:var(--brand-tint); border-color:var(--brand); }
.fieldnote-weather .tb-bridge-link svg { color:var(--brand); }
.fieldnote-weather .tb-bridge-stats b, .fieldnote-weather .tb-week a b { color:var(--ink); }
.fieldnote-weather .tb-week a.is-target { background:var(--brand-tint); color:var(--brand-strong); border-color:var(--brand); }
.fieldnote-weather .tb-week a:hover { background:var(--surface-2); }
.fieldnote-weather .tb-bridge-trend a { color:var(--ink); border-color:var(--line); }
.fieldnote-weather .tb-bridge-grid { gap:24px; }
.fieldnote-weather .tb-bridge-links { margin-top:0; }
.fieldnote-discover { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding-top:16px; }
.fieldnote-discover > p { font-size:14px; font-weight:700; margin:0; }
.fieldnote-discover nav { display:flex; gap:20px; flex-wrap:wrap; }
.fieldnote-discover a { display:inline-flex; align-items:center; gap:7px; color:var(--brand-strong); font-size:13px; font-weight:700; text-decoration:none; min-height:36px; }
.fieldnote-discover a:hover { text-decoration:underline; text-underline-offset:4px; }
@media (max-width:767px) {
 .tb-header { --tb-header-h:60px; }
 .tb-header .tb-wordmark { font-size:18px; }
 .fieldnote-routes { gap:10px; }
 .fieldnote-route { padding:12px 14px; }
 .fieldnote-route strong { font-size:14px; }
 .fieldnote-weather .tb-bridge-inner { padding-top:14px; padding-bottom:16px; }
 .fieldnote-discover { gap:4px; padding-top:12px; }
 .fieldnote-discover nav { gap:16px; }
 .fieldnote-signoff p { font-size:21px; }
}
@media (max-width:359px) {
 .fieldnote-hero-copy { padding:24px 18px; }
 .fieldnote-hero h1 { font-size:31px; }
 .fieldnote-hero-actions { flex-direction:column; align-items:stretch; }
}

.fieldnote-weather .tb-area-bar .tb-area-chips > .tb-chip.is-active,
.fieldnote-weather .tb-area-bar .tb-area-chips > .tb-chip:hover,
.fieldnote-weather .tb-area-bar .tb-area-bar-menus > .tb-menu[open] > summary.tb-chip,
.fieldnote-weather .tb-area-bar .tb-area-bar-menus > .tb-menu > summary.tb-chip:hover { background:var(--brand-tint); border-color:var(--brand); color:var(--brand-strong); }
.fieldnote-weather .tb-area-bar .tb-area-chips > .tb-chip,
.fieldnote-weather .tb-area-bar .tb-area-bar-menus > .tb-menu > summary.tb-chip { min-height:36px; }
.tb-page-head { padding-bottom:20px; margin-bottom:24px; border-bottom:1px solid var(--line); }
.boat-directory-summary { display:flex; align-items:baseline; justify-content:space-between; gap:8px 20px; flex-wrap:wrap; margin:0 0 18px; }
.boat-directory-summary > p { margin:0; font-size:14px; }
.boat-directory-summary strong { font-size:24px; color:var(--brand-strong); font-variant-numeric:tabular-nums; }
.boat-directory-summary > p > span { font-size:12px; color:var(--ink-2); }
.boat-directory-summary details { font-size:12px; color:var(--ink-2); }
.boat-directory-summary summary { cursor:pointer; padding:6px 0; }
.boat-directory-summary details[open] { flex-basis:100%; }
.boat-directory-search { padding:18px; border-radius:12px; border:1px solid var(--line); background:var(--surface); }
.boat-directory .tb-row { padding-top:16px; padding-bottom:16px; }
.boat-directory .tb-row-title { font-size:16px; }
.boat-directory .tb-row-sub { margin-top:5px; white-space:normal; line-height:1.7; }
.boat-section-nav .tb-chip { min-height:40px; }
.boat-catch-day h3 { color:var(--brand-strong); font-weight:700; }
.article-body p, .article-body li { font-size:15px; line-height:1.95; }
.article-body h2 { font-size:21px; margin-top:32px; padding-bottom:12px; border-color:var(--line); }
.article-body h3 { font-size:18px; margin-top:24px; }
.article-body { overflow-wrap:anywhere; }
@media (max-width:767px) {
 .boat-directory-search { padding:14px; }
 .boat-directory .tb-row { display:grid; grid-template-columns:minmax(0,1fr) 16px; column-gap:10px; row-gap:6px; }
 .boat-directory .tb-row-main { grid-column:1; }
 .boat-directory .tb-badge { grid-column:1; justify-self:start; }
 .boat-directory .tb-row > span[title] { display:none; }
 .boat-directory .tb-row-chevron { grid-column:2; grid-row:1 / 3; align-self:center; }
 .boat-directory-summary { gap:0; }
 .article-body p, .article-body li { font-size:14px; }
}

.fieldnote-weather .tb-area-bar-menus { position:relative; }
.fieldnote-weather .tb-area-bar .tb-area-bar-menus > .tb-menu { position:static; }
.fieldnote-weather .tb-area-bar .tb-area-panel { width:min(560px,100%); left:0; right:auto; }
/* Match sticky controls and the drawer to the shared header height. */
.sp-jump { top:64px; }
.tb-drawer-panel { top:64px; max-height:calc(100dvh - 64px); }
@media (max-width:767px) {
 .sp-jump { top:56px; }
 .tb-drawer-panel { top:56px; max-height:calc(100dvh - 56px); }
}

/* Transparent fish art retains its natural colors and complete silhouette. */
img[src^="/static/images/fish/v2/"] { object-fit:contain!important; mix-blend-mode:normal; }

/* Reserve authentication space before /api/auth/me resolves. */
.tb-header-account { width:96px; flex:0 0 96px; display:flex; align-items:center; justify-content:flex-end; }
.tb-header-account #user-menu { display:flex; align-items:center; gap:8px; position:relative; }
.tb-header-account .tb-btn { min-height:44px; }
.tb-header-actions .tb-header-account { width:80px; flex-basis:80px; }
.tb-header-actions .tb-avatar { width:44px; height:44px; }
.tb-header .tb-nav > a { height:44px; font-weight:600; flex-shrink:0; }
.tb-header a:active, .tb-header button:active { transform:none; }
.tb-drawer a[aria-current="page"] { color:var(--brand-strong); background:var(--brand-tint); box-shadow:inset 3px 0 var(--brand); }