(16.8px) — the same object styled two ways. Both now take the
sub-heading step, so an FAQ reads identically wherever it appears. */
.faq-item h2 { font-size: var(--t-h3); font-weight: 600; line-height: 1.35; }
.faq-item h3 { font-size: var(--t-h3); font-weight: 600; line-height: 1.35; }
/* Nav links were 14.4px (0.9rem) and the brand mark 19.2px (1.2rem) — both half
a pixel off the ladder, on every one of the 76 pages. */
.nav-link { font-size: var(--t-sm); }
.nav-links .nav-link { font-size: var(--t-sm); }
.nav-title h1, .nav-title .nav-brand-name, .nav-brand-name { font-size: 1.25rem; }
/* hero buttons: P3B set the primary to 1.02rem (16.32px) and the page set the
secondary to 0.95rem (15.2px) — two different sizes for one button row. */
body:has(#decision-entry) .hero .btn-primary,
body:has(#decision-entry) .hero .btn-secondary,
.hero .btn-primary, .hero .btn-secondary { font-size: var(--t-body); }
/* calculator's lead line was 1.02rem, its disclosure strip 0.85rem */
.calc-lede, .calc-lede strong { font-size: var(--t-body); }
.affiliate-disclosure, .affiliate-disclosure strong, .affiliate-disclosure a { font-size: var(--t-sm); }
/* the P2 label token was .8rem (12.8px) and is consumed by the species group
labels, hero badge/trust line and the calculator status line; moving the token
puts all of them on the ladder at once. */
:root { --text-xs: var(--t-xs); }
/* ============================================================================
P6.2 — CONVERGENCE OF THE REMAINING OFF-LADDER VALUES
----------------------------------------------------------------------------
Source scan of all 76 pages: 348 declarations at 0.9rem (14.4px), 113 at
0.85rem (13.6px), 40 at 0.95rem (15.2px), 14 at 0.8rem (12.8px), plus 282 at
1.1rem (17.6px) which are mostly icon glyph sizes and are deliberately NOT
touched — an icon's font-size is its drawn size, not a type setting.
Each target below was confirmed off-ladder in a real render before being
listed here; nothing is swept in by a wildcard.
========================================================================== */
/* 0.9rem / 0.85rem / 0.8rem -> the 14px and 13px steps */
.nav-link, .footer-desc, .footer-links a, .footer-bottom, .footer-bottom a, .footer-bottom p,
.article-meta, .update-date, .form-label, .contact-method p, .card li, .reg-item p,
.line-type-name, .blog-card p, .quick-tips p, .author-note, .amazon-cta p,
.btn-shop, .btn-save, .btn-copy,
.table-wrap table, .article-content table, .article-body table,
.line-table th, .line-table td,
.author-info p, .author-box p, .results-intro, .disclaimer p, .species-line,
.affiliate-disclosure, .affiliate-disclosure strong, .affiliate-disclosure a,
.article-content figure figcaption, .article-body figure figcaption,
.hero-badge, .hero-badge span, .result-label {
font-size: var(--t-sm);
}
.hero-badge, .hero-badge span, .result-label { font-size: var(--t-xs); }
/* 0.95rem -> body size: these are running text (FAQ answers, callout copy,
card descriptions) that sat just under the body size without a reason */
.toc li, .toc ol, .toc ul, .btn, .btn-cta, .cta-box p, .feature-text,
.faq-item p, .mission-card p, .value-content p, .card p { font-size: var(--t-body); }
/* the page standfirst / hero lead sat at 17.6px and 15.2px — one step below and
one step above the body size, both off-ladder */
.hero p, .btn-calculate { font-size: 1.125rem; } /* 18px lead */
.hero .subtitle, .advanced-summary { font-size: var(--t-body); }
/* ============================================================================
P6.3 — LAST FOUR OFF-LADDER SOURCES
----------------------------------------------------------------------------
Confirmed by render after P6.2, one page type each: the blog index dates
(0.82rem = 13.12px, 71 nodes on that page), its filter buttons (0.85rem), the
blog standfirst (1.1rem), and the species group label.
========================================================================== */
.date, .blog-card .date, .article-meta .date, span.date { font-size: var(--t-xs); }
.filter-btn { font-size: var(--t-sm); }
.subtitle, .hero .subtitle, .page-header .subtitle,
.blog-header .subtitle, .article-hero .subtitle, .page-header .subtitle p {
font-size: var(--t-body);
}
/* the species group label is a label like the TOC/sources ones — it must keep the
UI face, not inherit the heading face from the h3 tag it sits on */
.species-group { font-family: var(--font-ui); }
/* ============================================================================
P6.4 — FINAL FOUR SOURCES (one component each, found by inspecting the winning
rule for every remaining off-ladder node rather than widening selectors blindly)
========================================================================== */
.section-title { font-size: var(--t-h2); } /* species index section head, 1.8rem = 28.8px */
.species-name { font-size: 1.125rem; } /* species index cards, 1.1rem (a
, not the home
) */
.results-status { font-size: var(--t-xs); } /* calculator status line, 0.8rem */
.section-header p, .cta-section p { font-size: 1.125rem; } /* section standfirst, was 1.1rem */
/* ============================================================================
P6.5 — P0 FIX: horizontal overflow on species/index at 390px
----------------------------------------------------------------------------
Measured: document scrollWidth 450 vs viewport 390 — 60px of sideways scroll.
Cause: that page's own `.species-grid` is `repeat(4, 1fr)` with no breakpoint
at all, so four cards (each with a 64px icon plus 64px of padding) are forced
onto a 342px content box. Pre-existing, not introduced by the type layer — but
it is a P0 defect (sideways scroll on a phone) and it sits in the component
this pass touches, so it is fixed here rather than reported.
`minmax(0, 1fr)` is the part that matters: a bare `1fr` keeps each track at its
min-content width, which is exactly what pushed the page wide.
Scoped away from the homepage: its grid is already handled by P3B at a higher
specificity (`body:has(#decision-entry) .species-grid`).
========================================================================== */
.species-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .species-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .species-grid { grid-template-columns: minmax(0, 1fr); } }
/* Other multi-column grids were measured at all three breakpoints and do not
overflow (cards-grid, technique-grid, reference-grid, blog-grid all measured
scrollWidth == clientWidth), so they are deliberately left exactly as they are
rather than re-flowed "for consistency". */
/* Not changed: the consent dialog (11px / 12px / 15px in consent-popup.css) and the
mobile menu glyph (21.6px). Both are self-contained UI components rather than page
typography; the dialog's sizes are its own layout budget and shrinking/growing them
moves its box, so it is reported rather than swept in here. */
/* ============================================================================
HTML `style` ATTRIBUTES — corrected at the source
----------------------------------------------------------------------------
121 `font-size` values live in HTML style attributes, which no stylesheet can
override without `!important` (attribute styles outrank every selector). 98 of
them already carried 14px/16px, i.e. they were on the ladder and needed
nothing. The remaining 21 were off-ladder (0.85 / 0.9 / 0.95 / 1.05 / 1.1 /
1.5 / 2rem) and were rewritten in place by
D:/fishinglineguide-local/fix_inline_font_sizes.py — 7 files, value only, with
a normalised diff proving no other byte moved. Icon glyph sizes ('' elements)
were deliberately excluded: an icon's font-size is its drawn size, not type.
========================================================================== */
/* ============================================================================
P7 — MEASURE, PAGE GUTTERS, ACCENT
----------------------------------------------------------------------------
Three changes, each measured before and after rather than eyeballed.
========================================================================== */
/* --- 1 · running-text measure: 72ch -> 66ch ------------------------------
A single column of running prose reads best around 66 characters; past that the
eye's return sweep gets long enough to lose the line. Measured before: the article
column rendered 704px at 1440, i.e. ~70ch. Both tokens move so the P0 and P1
definitions stay in step. */
:root {
--reading-width: 66ch;
--ui-reading: 66ch;
}
/* --- 2 · page gutters -----------------------------------------------------
The container is 1200px with a 24px internal padding, so on the 1280–1440 laptop
range the margin outside it was only 3–8% of the viewport — measured 112px per
side at 1440 (7.9%), and 0px at any width below 1200 where the container simply
fills the window. 1140px is the common editorial container step and lifts the
measured gutter to 10.0% at 1440 and 20.5% at 1920, without pushing the 3-up
card grids below a comfortable ~360px per column.
Deliberately a single value at every width: no large-screen exception, so the
layout does not change character when a window is resized. */
.container,
nav .container,
header .container,
section .container,
main .container,
footer .container { max-width: 1140px; }
/* The bare `.container` rule was not enough: the pages carry their own
`nav .container` and `footer .container` rules at (0,1,1), which outrank a plain
(0,1,0) `.container` regardless of load order. Measured: nav and footer stayed at
1200px while the header and content went to 1140 — a 60px misalignment between the
page edges and its own body. Each structural variant is now named.
`.hero .container` is deliberately absent: the homepage's P3B sets it to 880px at
(0,2,0) and that is an intentional narrow hero, not a container to widen. */
/* --- 3 · accent convergence ----------------------------------------------
Companion to the source-side colour pass (D:/fishinglineguide-local/deai_colors.py):
that script rewrote the values, this pins the tokens so the same drift cannot come
back through a token. Every chromatic accent on the site now sits in one hue family
(216°) with only lightness varying — the decorative blue/green/purple icon hues and
the blue→indigo gradient are gone. */
:root {
--ui-accent: var(--color-primary);
--ui-accent-ink: var(--color-link);
}
/* --------------------------------------------------------------- responsive */
@media (max-width: 700px) {
.hero h1 { font-size: 1.875rem; } /* 30px */
h1, .page-header h1, .article-header h1, .article-hero h1,
.blog-header h1, .error-content h1, .legal-content h1 { font-size: 1.75rem; } /* 28px */
h2, .page-header h2, .section-header h2, .calculator-section-title h2,
.article-content h2, .article-body h2, .species-content h2, .about-section h2,
.cta-section h2, .legal-content h2, .blog-card h2 { font-size: 1.375rem; } /* 22px */
h3, .article-content h3, .article-body h3, .species-content h3, .card h3,
.blog-card h3, .product-card h3, .reference-card h3, .cta-box h3, .toc-box h3,
.technique-card h3, .contact-info h3, .regulations h3, .values-section h3,
.mission-card h3, .results-header h3, .fix-box h3, .mistake-box h3,
.suggestions h3, .faq-item h3 { font-size: 1.125rem; } /* 18px */
.article-content h2, .article-body h2, .species-content h2,
.legal-content h2 { margin-top: var(--rhythm-6); }
}
/* ------------------------------------------------------------- what P6 is NOT
Not done here, on purpose:
· no colour token is redefined and no contrast value is changed — the
accessibility pass in P3-UI Phase 1 is untouched;
· section-level padding and the page blocks' own vertical spacing are left
as they are (they come from each page's inline block, and changing them
would move layout rather than type);
· the teal `--color-accent` used for labels and rules is kept: it is a
semantic accent on labels/borders, not a second call-to-action colour,
and collapsing it is a brand decision, not a typography fix;
· heading LEVELS are not restructured — the uppercase micro-labels keep
their / tags and only their face/size is pinned as a label.
========================================================================== */
/* ============================================================================
P8 — VISUAL AUDIT FIXES (draft) · fishinglineguide.com · 2026-10-15
----------------------------------------------------------------------------
草案，尚未应用。全部为 presentation-only：无文本 / 无标记 / 无 URL / 无广告
几何变更。建议追加到 css/ui-polish.css 末尾（该表加载最后，同权重后置即胜）。
每条标注对应 REPORT.md 的发现编号与根因。应用后跑 scripts/census2.py 复验。
========================================================================== */
/* --- A1 · P0-2 calculator@375 横向溢出 --------------------------------
根因：.form-grid 单列 1fr 的 auto 下限 = select 的 min-content(362px) > 父容器(312px) */
@media (max-width: 768px) {
.form-grid { grid-template-columns: minmax(0, 1fr); }
}
.form-grid > *, .calculator-grid > * { min-width: 0; }
.form-select, .form-input { max-width: 100%; }
/* --- A2 · P0-3 species 模板@375 横向溢出 ------------------------------
根因：页内 .technique-grid 写死 repeat(3,1fr)，无小屏断点（8 个物种页共享） */
@media (max-width: 700px) {
.technique-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
.technique-grid { grid-template-columns: minmax(0, 1fr); }
}
/* --- A3 · P1-1 hero 决策芯片：空方块占位符 → 真实图标 ----------------
字形均在 fa-icons.css 子集内（fa-fish / fa-tools / fa-water / fa-ruler），零新请求 */
.decision-factors li::before {
content: "\f578";
width: auto; height: auto; border: 0; border-radius: 0; background: none;
font-family: "Font Awesome 6 Free"; font-weight: 900;
font-size: .95rem; line-height: 1;
color: var(--color-accent);
}
.decision-factors li:nth-child(1)::before { content: "\f578"; } /* Species */
.decision-factors li:nth-child(2)::before { content: "\f7d9"; } /* Technique */
.decision-factors li:nth-child(3)::before { content: "\f773"; } /* Water */
.decision-factors li:nth-child(4)::before { content: "\f545"; } /* Size */
/* --- A4 · P1-2 section 纵向节奏统一 -----------------------------------
两档刻度：内容段 80/56、页头带 64/48（≤700px 缩水）。
注：会整体平移页面纵向位置（广告随动、槽位不变）。 */
:root {
--p8-section: 80px;
--p8-band: 64px;
}
@media (max-width: 700px) {
:root { --p8-section: 56px; --p8-band: 48px; }
}
/* 内容段（全模板共用类，实测存在于 about/contact/faq/privacy/species/文章页） */
.content { padding: var(--p8-section) 0; }
/* 页头带（含 species 组件层 32/24 的覆盖） */
.page-header { padding: var(--p8-band) 0; }
body:has(.species-content) .page-header { padding: var(--p8-band) 0; }
/* 首页六段 */
.hero { padding: 48px 0 56px; }
.species { padding: var(--p8-section) 0; }
.reference { padding: 0 0 var(--p8-section); }
.features { padding: var(--p8-section) 0 calc(var(--p8-section) / 2); }
.evidence { padding: calc(var(--p8-section) / 2) 0 var(--p8-section); }
.blog-preview { padding: var(--p8-section) 0; }
/* 博客索引 */
.blog-grid { padding-bottom: var(--p8-section); }
/* calculator */
.calculator { padding: var(--p8-section) 0; }
.calc-content { padding: var(--p8-section) 0; }
/* 页脚 */
footer { padding: var(--p8-section) 0 40px; }
@media (max-width: 700px) {
footer { padding: var(--p8-section) 0 32px; }
}
/* --- A5 · P1-3 博客卡片 meta→标题 67px 死区 ---------------------------
根因：P3 全局 h2{margin-top:2.1em} 落到卡片内 h2（54.6px @26px） */
.blog-card h2 { margin-top: 0; }
/* --- A6 · P1-4 徽章统一为中性 chip -----------------------------------
覆盖页内 .badge.badge-*（0,2,0）：本选择器同为 (0,2,0) 且后置。
如需保留 1 档强调色，删除/改写最后一行即可（决策项）。 */
.badge { background: var(--color-surface-sunk); color: var(--color-text-body); border: 1px solid var(--color-border); }
.badge[class*="badge-"],
.badge.badge-setup, .badge.badge-basics, .badge.badge-knots,
.badge.badge-ice, .badge.badge-fluoro, .badge.badge-braid, .badge.badge-trout,
.badge.badge-catfish, .badge.badge-carp, .badge.badge-saltwater, .badge.badge-kayak,
.badge.badge-bass, .badge.badge-general {
background: var(--color-surface-sunk);
color: var(--color-text-body);
border: 1px solid var(--color-border);
}
/* --- A7 · P1-5 hero 按钮 ≤768 居中 ------------------------------------ */
@media (max-width: 768px) {
.hero-buttons { align-items: stretch; width: 100%; max-width: 340px; margin-left: auto; margin-right: auto; }
}
/* --- A8 · P1-6 species 模板品牌下划线 --------------------------------- */
.nav-brand, .nav-brand:link, .nav-brand:visited, .nav-brand:hover, .nav-brand * { text-decoration: none; }
/* --- A9 · P1-7 species 索引页尾脱出容器（x=0 vs 62px；v1 后复验修订）--
v1 只对齐 h2 与 overflow 表 → FAQ/Related/From Species 块仍 x=0，
制造「标题缩进、正文贴边」新错位。实证：该页尾部 h2+div+ul+p 共 8 个
直接子元素全在 .container 外（evidence/title-scope.json 全站扫描：
其余 66 页均无非容器直接子元素）。 */
section.content > :not(.container) {
max-width: 1140px;
margin-left: auto; margin-right: auto;
padding-left: 24px; padding-right: 24px;
}
/* --- A10 · P2-1 类型残留 ---------------------------------------------- */
.article-body { font-size: var(--t-body); } /* 16.8px → 16px */
.product-card p { font-size: var(--t-body); } /* 15.2px → 16px */
.toc h2, .toc h3 { font-size: var(--t-xs) !important; font-family: var(--font-ui); } /* 17.6px → 13px 标签（对撞页内 !important，后置胜） */
.page-header p { font-size: var(--t-body); } /* 19.2px → 16px */
.calculator-page h1, main.calculator-page h1, main.calculator-page > h1 { font-weight: 700; } /* 消除 serif 伪粗 800 */
/* --- A11 · P2-2 页脚链接圆角孤值 -------------------------------------- */
.footer-links a { border-radius: var(--ui-radius-sm); } /* 6px → 8px */
/* --- A12 · P2-3 默认蓝链接兜底（:where 保持零特异性，不压既有着色）-- */
.content a:where(:not(.btn):not(.badge):not([class*="badge-"]):not(.cta-button):not(.btn-shop)),
.legal-content a:where(:not(.btn)),
.affiliate-disclosure a:where(:not(.btn)),
.calc-content a:where(:not(.btn)) {
color: var(--color-link);
}
/* ============================================================================
应用后验证清单（全部可由 scripts/ 复跑）：
1. python census2.py → 预期：48 帧 overflow 全 0
2. python analyze.py → 预期：OFF-LADDER 仅剩 hamburger 字形（已接受）
3. check_imgs.py → 图片缺陷不变（属内容层）
4. 特写复核：home hero 芯片图标 / blog 卡片标题间距 / species-index 对齐 /
calculator@375 无滚动条 / species-bass@375 无滚动条
========================================================================== */
/* --- P8 复验补充 2026-10-15（v1 复扫后剩余的 2 处残留）---------------- */
/* A10b: about-author 页 .about-section p 仍为 1.05rem(16.8px)，P6/A10 未覆盖 */
.about-section p { font-size: var(--t-body); }
/* A12b: blog 索引头部区 .blog-header 内裸链接不在 .content 内，仍是 UA 默认蓝 */
.blog-header a:where(:not(.btn):not(.badge):not([class*="badge-"]):not(.cta-button):not(.btn-shop)) { color: var(--color-link); }
/* A10c: calculator H1 的 font-weight:800 是元素内联样式（calculator.html:2399），
普通选择器无法覆盖（A10 的 .calculator-page h1 因此未生效）；Source Serif 4
无 800 字重 → 浏览器合成加粗。此处以 !important 压内联。 */
main.calculator-page > h1 { font-weight: 700 !important; }