.fable-content {
--content-ink: var(--fable-ink, #102a33);
--content-muted: var(--fable-muted, #486069);
--content-surface: var(--fable-surface, #fffdf8);
--content-surface-soft: var(--fable-surface-soft, #e5f1f2);
--content-line: var(--fable-line, rgba(16, 42, 51, .2));
--content-water: var(--fable-water, #167f78);
--content-amber: var(--fable-amber, #f2b85b);
--content-radius: var(--fable-radius, 1.125rem);
--content-page: #edf6f7;
--content-caution: #fff3d5;
--content-caution-ink: #5c3b00;
margin: 0;
background: transparent;
color: var(--content-ink);
font-variant-numeric: tabular-nums;
}
.fable-content .guidebook-return { margin:10px 0 18px; }
.fable-content .guidebook-return a { display:inline-flex; min-height:48px; align-items:center; font-size:1rem; font-weight:700; }

.fable-content *,
.fable-content *::before,
.fable-content *::after {
box-sizing: border-box;
}

.fable-content .skip-link {
position: fixed;
z-index: 20;
top: .5rem;
left: .5rem;
min-height: 44px;
padding: .65rem .9rem;
border: 2px solid var(--content-ink);
border-radius: .5rem;
background: var(--content-surface);
color: var(--content-ink);
font-weight: 800;
transform: translateY(-160%);
}

.fable-content .skip-link:focus {
transform: translateY(0);
}

.fable-content .fable-shell {
width: min(64rem, 100%);
margin-inline: auto;
padding: 12px clamp(1rem, 4vw, 2rem) 5rem;
}

.fable-content .top {
position: relative;
display: flex;
flex-wrap: wrap;
gap: .75rem;
align-items: center;
justify-content: space-between;
min-height: 56px;
margin: 0 0 clamp(1.5rem, 4vw, 2.5rem);
padding: .35rem .45rem .35rem .6rem;
border: 1px solid var(--content-line);
border-radius: var(--content-radius);
background: var(--content-surface);
box-shadow: 0 .7rem 2rem rgba(16, 42, 51, .06);
}

.fable-content .top a {
display: inline-flex;
min-height: 44px;
align-items: center;
padding: .45rem .62rem;
border-radius: .65rem;
color: var(--content-ink);
font-size: .88rem;
font-weight: 720;
line-height: 1.25;
text-decoration: none;
}

.fable-content .top > a:first-child {
font-size: 1rem;
font-weight: 850;
letter-spacing: -.025em;
}

.fable-content .top > a:first-child::before {
width: .72rem;
height: .72rem;
margin-right: .5rem;
border: 3px solid var(--content-water);
border-radius: 50% 50% 42% 42%;
content: "";
}

.fable-content .guide-menu {
position: relative;
margin-left: auto;
border: 0;
}

.fable-content .guide-menu:last-child {
border: 0;
}

.fable-content .fable-display-settings,
.fable-content .fable-display-settings:last-child {
border: 0;
}

.fable-content .guide-menu > summary {
display: flex;
min-height: 44px;
align-items: center;
padding: .55rem .7rem;
border: 1px solid transparent;
border-radius: .65rem;
cursor: pointer;
font-size: .88rem;
font-weight: 780;
line-height: 1.25;
}

.fable-content .guide-menu > summary:hover,
.fable-content .guide-menu[open] > summary {
border-color: var(--content-line);
background: var(--content-surface-soft);
}

.fable-content .guide-links {
position: absolute;
z-index: 10;
top: calc(100% + .45rem);
right: 0;
display: grid;
width: min(18rem, calc(100vw - 2rem));
gap: .2rem;
padding: .5rem;
border: 1px solid var(--content-line);
border-radius: .85rem;
background: var(--content-surface);
box-shadow: 0 1rem 2.5rem rgba(16, 42, 51, .16);
}

.fable-content .guide-links a {
width: 100%;
padding-inline: .75rem;
}

.fable-content .top a:hover,
.fable-content .top a[aria-current="page"] {
background: var(--content-surface-soft);
color: var(--content-ink);
}

.fable-content .top a[aria-current="page"] {
box-shadow: inset 0 -3px 0 var(--content-water);
}

.fable-content a {
color: var(--content-water);
text-decoration-thickness: .08em;
text-underline-offset: .22em;
}

.fable-content a:focus-visible,
.fable-content summary:focus-visible {
outline: 3px solid var(--content-water);
outline-offset: 3px;
}

.fable-content .page-head {
position: relative;
max-width: 52rem;
margin: 0 0 16px;
}

:root[data-fable-scheme="light"]:not([data-fable-phase="day"]):not([data-fable-page="reading"])
.fable-content section:not(.answer),
:root[data-fable-scheme="dark"][data-fable-phase="day"]:not([data-fable-page="reading"])
.fable-content section:not(.answer) {
margin-bottom: 1rem;
padding: clamp(1rem, 3vw, 1.5rem);
border: 1px solid var(--content-line);
border-radius: var(--content-radius);
background: var(--content-surface);
}

.fable-content .intent {
margin: 0 0 .65rem;
color: var(--content-water);
font-size: .78rem;
font-weight: 850;
letter-spacing: .08em;
}

.fable-content h1 {
max-width: none;
margin: 0;
font-size: var(--fable-title-size);
font-weight: 800;
line-height: 1.16;
letter-spacing: -.02em;
text-wrap: balance;
word-break: keep-all;
}

.fable-content .sub {
max-width: 39rem;
margin: 8px 0 0;
color: var(--content-muted);
font-size: 16px;
line-height: 1.55;
text-wrap: pretty;
word-break: keep-all;
}

.fable-content section {
margin: 0;
padding: clamp(20px, 3vw, 32px) 0;
border: 0;
border-top: 1px solid var(--content-line);
border-radius: 0;
background: transparent;
}

.fable-content section.answer {
margin-bottom: 16px;
padding: 16px;
border: 1px solid var(--content-line);
border-left: .2rem solid var(--content-water);
border-radius: var(--content-radius);
background: var(--content-surface);
box-shadow: none;
}

.fable-content h2 {
margin: 0 0 .8rem;
font-size: clamp(1.2rem, 3vw, 1.55rem);
font-weight: 820;
line-height: 1.35;
letter-spacing: -.025em;
text-wrap: balance;
word-break: keep-all;
}

.fable-content h3 {
margin: 1.35rem 0 .45rem;
font-size: 1.05rem;
}

.fable-content p,
.fable-content li,
.fable-content th,
.fable-content td,
.fable-content summary {
font-size: clamp(.96rem, 1.6vw, 1.03rem);
}

.fable-content p {
max-width: 48rem;
margin: .55rem 0;
}

.fable-content ul,
.fable-content ol {
margin: .75rem 0;
padding-left: 1.35rem;
}

.fable-content li + li {
margin-top: .62rem;
}

.fable-content .cta {
display: inline-flex;
min-height: 52px;
align-items: center;
justify-content: center;
margin-top: 1rem;
padding: .75rem 1.1rem;
border: 1px solid var(--content-water);
border-radius: .75rem;
background: var(--content-water);
box-shadow: none;
color: var(--fable-on-water);
font-weight: 700;
line-height: 1.3;
text-align: center;
text-decoration: none;
}

.fable-content .cta:hover {
filter: brightness(.96);
}

.fable-content .note {
color: var(--content-muted);
font-size: 1rem;
}

.fable-content .caution {
margin-top: 1rem;
padding: .85rem 1rem;
border: 0;
border-left: .25rem solid var(--content-amber);
border-radius: .3rem .75rem .75rem .3rem;
background: var(--content-caution);
color: var(--content-caution-ink);
}

.fable-content .ports {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
gap: .75rem;
padding: 0;
list-style: none;
}

.fable-content .ports li {
margin: 0;
}

.fable-content .ports a {
display: flex;
min-height: 76px;
flex-direction: column;
justify-content: center;
padding: .85rem 1rem;
border: 1px solid var(--content-line);
border-radius: .8rem;
background: var(--content-surface);
color: var(--content-ink);
font-weight: 820;
text-decoration: none;
}

.fable-content .ports a:hover {
border-color: var(--content-water);
box-shadow: 0 .45rem 1.2rem rgba(16, 42, 51, .07);
}

.fable-content .ports span {
display: block;
margin-top: .12rem;
color: var(--content-muted);
font-size: .82rem;
font-weight: 550;
}

.fable-content table {
width: 100%;
border-collapse: collapse;
}

.fable-content th,
.fable-content td {
padding: .85rem .6rem;
border-bottom: 1px solid var(--content-line);
text-align: left;
vertical-align: top;
}

.fable-content th {
width: min(10rem, 34%);
color: var(--content-muted);
font-weight: 780;
}

.fable-content details {
border-top: 1px solid var(--content-line);
}

.fable-content details:last-child {
border-bottom: 1px solid var(--content-line);
}

.fable-content summary {
display: flex;
min-height: 52px;
align-items: center;
padding: .72rem 2rem .72rem 0;
cursor: pointer;
font-weight: 780;
}

.fable-content details p {
padding: 0 0 1rem;
color: var(--content-muted);
}

.fable-content .related {
display: flex;
flex-wrap: wrap;
gap: .5rem 1rem;
}

.fable-content .related a {
display: inline-flex;
min-height: 48px;
align-items: center;
font-size: 1rem;
font-weight: 720;
}

.fable-content footer {
margin-top: 1.5rem;
padding: 1rem;
border: 1px solid var(--content-line);
border-radius: var(--content-radius);
background: var(--content-surface);
color: var(--content-muted);
font-size: .86rem;
}

.fable-content .tide-guide {
margin: 0 0 20px;
padding: 16px;
overflow: hidden;
border: 1px solid var(--content-line);
border-radius: var(--content-radius);
background: var(--content-surface-soft);
}

.fable-content .diagram-label {
margin: 0 0 .35rem;
color: var(--content-water);
font-size: .78rem;
font-weight: 850;
letter-spacing: .07em;
}

.fable-content .tide-guide svg {
display: block;
width: 100%;
height: auto;
margin: 1rem 0 .65rem;
color: var(--content-water);
font-family: inherit;
}

.fable-content .tide-guide .axis {
stroke: var(--content-line);
stroke-width: 1.5;
}

.fable-content .tide-guide .curve {
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-width: 5;
}

.fable-content .tide-guide .point {
fill: var(--content-surface);
stroke: currentColor;
stroke-width: 4;
}

.fable-content .tide-labels {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: .5rem;
color: var(--content-ink);
font-size: 1rem;
font-weight: 760;
line-height: 1.65;
}

.fable-content .tide-labels span:nth-child(2) {
text-align: center;
}

.fable-content .tide-labels span:last-child,
.fable-content .time-direction {
text-align: right;
}

.fable-content .time-direction {
margin: .35rem 0 .85rem;
color: var(--content-muted);
font-size: 1rem;
}

.fable-content .tide-guide figcaption {
max-width: 47rem;
color: var(--content-muted);
font-size: 1rem;
line-height: 1.65;
}

.fable-content .reading-steps {
counter-reset: reading-step;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
padding: 0;
list-style: none;
}

.fable-content .reading-steps li {
position: relative;
margin: 0;
padding: 3rem 1.2rem 0 0;
border-top: 1px solid var(--content-line);
counter-increment: reading-step;
}

.fable-content .reading-steps li + li {
padding-left: 1.2rem;
border-left: 1px solid var(--content-line);
}

.fable-content .reading-steps li::before {
position: absolute;
top: .6rem;
left: 0;
color: var(--content-amber);
content: counter(reading-step, decimal-leading-zero);
font-size: 1.15rem;
font-weight: 900;
}

.fable-content .reading-steps li + li::before {
left: 1.2rem;
}

@media (max-width: 700px) {
.fable-content .reading-steps {
grid-template-columns: 1fr;
}

.fable-content .reading-steps li,
.fable-content .reading-steps li + li {
min-height: 0;
padding: 1rem 0 1rem 3rem;
border-top: 1px solid var(--content-line);
border-left: 0;
}

.fable-content .reading-steps li::before,
.fable-content .reading-steps li + li::before {
top: .95rem;
left: 0;
}
}

@media (max-width: 420px) {
.fable-content .fable-shell {
padding-inline: 1rem;
}

.fable-content .top {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: .25rem;
padding: .25rem;
}

.fable-content .top > a:first-child {
grid-column: 1 / -1;
}

.fable-content .guide-menu {
position: static;
margin-left: 0;
}

.fable-content .fable-display-settings {
justify-self: end;
}

.fable-content .top > a:first-child {
padding-inline: .55rem;
}

.fable-content .guide-links {
right: 0;
left: 0;
width: auto;
}

.fable-content section.answer,
.fable-content .tide-guide {
padding: 1.1rem;
}

.fable-content th,
.fable-content td {
padding-inline: .35rem;
}
}

:root[data-fable-scheme="dark"] .fable-content {
--content-page: #07161b;
--content-caution: #302817;
--content-caution-ink: #f0d28c;
}

:root[data-fable-scheme="dark"] .fable-content .top {
box-shadow: 0 .7rem 2rem rgba(0, 0, 0, .2);
}

:root[data-fable-scheme="dark"] .fable-content section.answer,
:root[data-fable-scheme="dark"] .fable-content .ports a {
box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .16);
}

@media (prefers-color-scheme: dark) {
:root:not([data-fable-scheme]) .fable-content {
--content-page: #07161b;
--content-caution: #302817;
--content-caution-ink: #f0d28c;
}
}

@media (prefers-reduced-motion: reduce) {
.fable-content *,
.fable-content *::before,
.fable-content *::after {
scroll-behavior: auto !important;
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
}


.fable-content .visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.fable-content .concept-guide { margin:0 0 20px; padding:16px; border:1px solid var(--content-line); border-radius:var(--content-radius); background:var(--content-surface-soft); }
.fable-content :is(.concept-guide,.season-guide,.catch-state-guide) svg { display:block; width:100%; height:auto; color:var(--content-water); }
.fable-content :is(.concept-guide,.season-guide,.catch-state-guide) { min-width:0; }
.fable-content :is(.season-guide,.catch-state-guide) { margin:20px 0 0; }
.fable-content :is(.concept-guide,.season-guide,.catch-state-guide) figcaption { margin-top:16px; color:var(--content-muted); font-size:13px; line-height:1.65; word-break:keep-all; }
.fable-content :is(.guide-axis,.guide-waterline) { fill:none; stroke:var(--content-line); stroke-width:2; }
.fable-content .guide-wave { fill:none; stroke:var(--content-water); stroke-width:4; stroke-linecap:round; }
.fable-content .guide-dash { fill:none; stroke:var(--content-line); stroke-width:1.5; stroke-dasharray:4 5; }
.fable-content .guide-measure { fill:none; stroke:var(--content-ink); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.fable-content .guide-night { fill:var(--content-line); opacity:.22; }
.fable-content .guide-day { fill:var(--content-amber); opacity:.55; }
.fable-content .guide-sun { fill:var(--content-surface); stroke:var(--content-ink); stroke-width:2; }
.fable-content .diagram-key { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; margin:12px 0; font-size:13px; color:var(--content-muted); }
.fable-content .key-day::before { display:inline-block; width:16px; height:10px; margin-right:6px; border:1px solid var(--content-line); background:var(--content-amber); content:''; }
.fable-content .concept-pair { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.fable-content .concept-pair > div { min-width:0; }
.fable-content .concept-pair strong { display:block; font-size:16px; line-height:1.5; word-break:keep-all; }
.fable-content .concept-pair span { display:block; margin-top:6px; color:var(--content-muted); font-size:16px; line-height:1.65; word-break:keep-all; }
.fable-content .season-closed { fill:var(--content-caution); }
.fable-content .season-hatch { fill:none; stroke:var(--content-caution-ink); stroke-width:1.5; opacity:.55; }
.fable-content .season-labels { display:grid; grid-template-columns:1fr 2fr 1fr; gap:8px; align-items:start; font-size:13px; color:var(--content-muted); }
.fable-content .season-labels strong { color:var(--content-caution-ink); text-align:center; }
.fable-content .season-labels > :last-child { text-align:right; }
.fable-content .guide-state { fill:var(--content-surface-soft); stroke:var(--content-water); stroke-width:3; }
.fable-content .guide-state.is-dashed { stroke:var(--content-muted); stroke-dasharray:5 6; }
.fable-content .guide-check { fill:none; stroke:var(--content-water); stroke-width:5; stroke-linecap:round; stroke-linejoin:round; }
.fable-content .guide-zero { fill:var(--content-ink); font:700 38px sans-serif; }
.fable-content .state-labels { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; text-align:center; }
.fable-content .state-labels span { color:var(--content-muted); font-size:12px; line-height:1.5; word-break:keep-all; }
.fable-content .state-labels strong { display:block; margin-bottom:4px; color:var(--content-ink); font-size:14px; }
.fable-content .rig-sequence { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; padding:0; list-style:none; }
.fable-content .rig-sequence li { min-width:0; margin:0; }
.fable-content .rig-sequence strong { display:block; color:var(--content-ink); font-size:16px; line-height:1.5; word-break:keep-all; }
.fable-content .rig-sequence strong span { color:var(--content-water); }
.fable-content .rig-sequence p { font-size:14px; line-height:1.6; color:var(--content-muted); word-break:keep-all; }
.fable-content .guide-rod { fill:none; stroke:var(--content-ink); stroke-width:6; stroke-linecap:round; }
.fable-content .guide-line { fill:none; stroke:var(--content-water); stroke-width:2.5; }
.fable-content .guide-bottom { fill:none; stroke:var(--content-muted); stroke-width:3; stroke-dasharray:5 4; }
.fable-content .guide-sinker { fill:var(--content-ink); }
.fable-content .week-range-overview { padding:16px 0 24px; border:0; }
.fable-content .week-range-scale { margin:0 0 20px; font-size:13px; color:var(--content-muted); }
.fable-content .week-range-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 32px; }
.fable-content .week-range-port { min-width:0; margin:0; padding-bottom:12px; border-bottom:1px solid var(--content-line); }
.fable-content .week-range-port figcaption { display:grid; gap:3px; margin-bottom:12px; }
.fable-content .week-range-port figcaption strong { font-size:17px; color:var(--content-ink); }
.fable-content .week-range-port figcaption span { font-size:12px; color:var(--content-muted); }
.fable-content .week-range-days { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; margin:0; padding:0; list-style:none; font-variant-numeric:tabular-nums; }
.fable-content .week-range-days li { display:grid; gap:4px; margin:0; min-width:0; text-align:center; }
.fable-content .week-range-value { font-size:13px; font-weight:700; }
.fable-content .week-range-track { position:relative; display:flex; align-items:flex-end; justify-content:center; height:80px; border-bottom:1px solid var(--content-line); background:linear-gradient(to bottom, transparent calc(50% - .5px),var(--content-line) 50%,transparent calc(50% + .5px)); }
.fable-content .week-range-track > span { display:block; width:62%; border-radius:4px 4px 0 0; background:var(--content-water); }
.fable-content .week-range-track > i { position:absolute; inset:24px 0 auto; font-size:18px; font-style:normal; color:var(--content-muted); }
.fable-content .week-range-date { font-size:12px; }
.fable-content .week-range-days small { font-size:11px; line-height:1.4; color:var(--content-muted); word-break:keep-all; }
.fable-content .week-range-days .is-missing .week-range-track { border:1px dashed var(--content-line); background:none; }
.fable-content .week-port-details > summary { display:flex; justify-content:space-between; gap:16px; padding:16px 0; font-size:17px; color:var(--content-ink); }
.fable-content .week-port-details > summary span { font-size:13px; color:var(--content-muted); font-weight:400; }
.fable-content :is(.week-port-details,.week-extra-details) > summary::after { content:'+'; flex:0 0 auto; color:var(--content-water); font-size:22px; }
.fable-content :is(.week-port-details,.week-extra-details)[open] > summary::after { content:'−'; }
.fable-content .week-port-details .port-week { padding:0 0 20px; border:0; }
.fable-content .week-port-details .table-scroll { border:1px solid var(--content-line); border-radius:12px; }
.fable-content .week-table { min-width:720px; }
.fable-content .weekend-table { min-width:440px; }
.fable-content .week-extra-details { margin-bottom:24px; }
.fable-content .week-range-basis { margin-top:8px; }
.fable-content .week-range-basis > summary { min-height:44px; padding:8px 0; color:var(--content-water); font-size:12px; font-weight:600; }
.fable-content .week-range-basis li { font-size:12px; line-height:1.6; color:var(--content-muted); }
.fable-content .answer { border-left-color:var(--content-water); }
.fable-content :is(h2,h3) { font-weight:800; letter-spacing:0; }
.fable-content :is(.intent,.diagram-label) { font-weight:700; letter-spacing:0; }
.fable-content .cta { max-width:100%; word-break:keep-all; }
.fable-content .page-head .intent { color:var(--content-muted); font-size:12px; }
@media(max-width:640px) {
.fable-content .concept-guide { padding:16px; }
.fable-content .concept-pair { gap:16px; }
.fable-content .rig-sequence { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.fable-content .week-range-grid { grid-template-columns:minmax(0,1fr); }
.fable-content .week-range-track { height:72px; }
.fable-content .week-port-details > summary { flex-wrap:wrap; gap:4px 12px; }
.fable-content .week-port-details > summary span { margin-left:auto; }
.fable-content .state-labels { gap:6px; }
.fable-content .state-labels strong { font-size:13px; }
}

.fable-content .top > .site-brand:first-child::before { display:none; content:none; }
.fable-content .top > .site-brand:first-child { padding:0; }
:root .fable-content section.answer.visual-answer { margin-bottom:16px; padding:16px 0; border:0; border-radius:0; background:transparent; box-shadow:none; }
.fable-content .visual-answer p { margin:0; font-size:15px; line-height:1.6; }
.fable-content .visual-answer .cta { margin-top:12px; }
.fable-content .diagram-details { margin-top:12px; }
.fable-content .diagram-details > summary { min-height:44px; font-size:13px; color:var(--content-water); }
.fable-content .diagram-details p { font-size:13px; }
.fable-content .observed-legend { margin:0 0 12px; color:var(--content-muted); font-size:13px; }
.fable-content .observed-state-help { margin-block:8px 16px; }
.fable-content .catch-state-guide { max-width:640px; }


.fable-content .tackle-breadcrumb { display:flex; align-items:center; gap:10px; margin:12px 0 0; color:var(--content-muted); font-size:13px; }
.fable-content .tackle-breadcrumb a { display:inline-flex; align-items:center; min-width:44px; min-height:44px; color:var(--content-water); }
.fable-content .tackle-reading { --tackle-metal: var(--content-ink); }
.fable-content .tackle-lead { max-width:42rem; margin:0 0 24px; color:var(--content-muted); font-size:15px; line-height:1.65; text-wrap:pretty; word-break:keep-all; }
.fable-content section.tackle-comparison { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; padding:24px; border:1px solid var(--content-line); border-radius:20px; background:var(--content-surface); }
.fable-content .tackle-comparison figure { display:flex; min-width:0; flex-direction:column; margin:0; text-align:center; }
.fable-content .tackle-comparison figure + figure { border-left:1px solid var(--content-line); padding-left:24px; }
.fable-content .tackle-comparison h2 { margin:0 0 4px; font-size:24px; }
.fable-content .tackle-comparison figcaption > span { color:var(--content-muted); font-size:13px; }
.fable-content .tackle-comparison .tackle-glyph { flex:none; max-width:380px; height:164px; margin:12px auto; }
.fable-content .tackle-comparison figure + figure .tackle-glyph { width:auto; max-width:100%; }
.fable-content .tackle-comparison p { margin:0; font-size:15px; line-height:1.5; word-break:keep-all; }
.fable-content .tackle-figure-note { margin:12px 0 0; color:var(--content-muted); font-size:12px; line-height:1.55; word-break:keep-all; }
.fable-content .tackle-next { display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px; margin:20px 0 32px; }
.fable-content .tackle-next .cta { margin:0; }
.fable-content .tackle-next > a:not(.cta) { display:inline-flex; align-items:center; gap:8px; min-height:48px; font-size:15px; font-weight:700; }
.fable-content .tackle-reading :is(a,summary) { overflow-wrap:anywhere; }
.fable-content .tackle-read-section > h2 { margin-bottom:16px; }
.fable-content .tackle-reading details > summary { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:56px; padding:14px 0; font-size:16px; font-weight:700; line-height:1.55; word-break:keep-all; list-style:none; }
.fable-content .tackle-reading details > summary::-webkit-details-marker { display:none; }
.fable-content .tackle-reading details > summary::after { flex:0 0 auto; color:var(--content-water); font-size:22px; font-weight:400; content:'+'; }
.fable-content .tackle-reading details[open] > summary::after { content:'−'; }
.fable-content .tackle-reading details > :last-child:not(summary) { margin-bottom:20px; }
.fable-content .tackle-reading details > a { display:inline-flex; align-items:center; min-height:44px; font-size:15px; font-weight:600; }
.fable-content .tackle-reading details p { font-size:14px; line-height:1.75; word-break:keep-all; }
.fable-content .tackle-glyph { display:block; width:100%; height:auto; color:var(--content-ink); }
.fable-content .tackle-glyph text { fill:var(--content-ink); font-family:inherit; font-size:14px; font-weight:600; }
.fable-content .tackle-metal { fill:none; stroke:var(--tackle-metal); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.fable-content .tackle-pearl { fill:var(--fable-surface-strong); stroke:var(--content-muted); stroke-width:1.5; }
.fable-content :is(.tackle-palette,.tackle-shape-pair,.tackle-term-grid) { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:4px 0 20px; }
.fable-content :is(.tackle-palette,.tackle-shape-pair) figure { min-width:0; margin:0; padding:12px; border-radius:12px; background:var(--content-surface-soft); }
.fable-content :is(.tackle-palette,.tackle-shape-pair) figcaption { display:grid; gap:4px; text-align:center; }
.fable-content :is(.tackle-palette,.tackle-shape-pair) figcaption strong { font-size:16px; }
.fable-content :is(.tackle-palette,.tackle-shape-pair) figcaption span { color:var(--content-muted); font-size:12px; }
.fable-content .tackle-shape-pair { grid-template-columns:repeat(2,minmax(0,1fr)); }
.fable-content .tackle-term-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.fable-content .tackle-term-grid article { min-width:0; padding:12px 16px; border-radius:12px; background:var(--content-surface-soft); }
.fable-content .tackle-term-grid h3 { margin:0 0 4px; font-size:17px; }
.fable-content .tackle-term-grid p { margin:0; padding:0; font-size:13px; }
.fable-content .tackle-tinsel { fill:none; stroke:var(--content-amber); stroke-width:2; }
.fable-content :is(.term-shrimp,.term-sutte) { fill:var(--fable-current-marker); stroke:var(--content-ink); stroke-width:2; }
.fable-content .term-segments { fill:none; stroke:var(--content-ink); stroke-width:2; }
.fable-content .term-eye { fill:var(--fable-surface-strong); stroke:var(--content-ink); stroke-width:3; }
.fable-content .tackle-effect-list { display:grid; gap:16px; margin:8px 0 20px; }
.fable-content .tackle-effect-list > div { display:grid; grid-template-columns:minmax(130px,.7fr) minmax(0,1fr); gap:12px; }
.fable-content .tackle-effect-list dt { font-size:15px; font-weight:700; }
.fable-content .tackle-effect-list dd { margin:0; color:var(--content-muted); font-size:14px; }
.fable-content .tackle-reading .tackle-reference { margin:0 0 16px; color:var(--content-muted); font-size:13px; }
.fable-content .tackle-matrix { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:8px 0 20px; }
.fable-content .tackle-condition { min-width:0; padding:16px; border-radius:12px; background:var(--content-surface-soft); }
.fable-content .tackle-condition header { display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; font-size:14px; font-weight:700; }
.fable-content .tackle-condition header > :last-child { color:var(--content-muted); font-weight:400; }
.fable-content .tackle-condition > div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.fable-content .tackle-condition figure { min-width:0; margin:8px 0; }
.fable-content .tackle-condition figcaption { font-size:12px; text-align:center; word-break:keep-all; }
.fable-content .tackle-condition > p { margin:8px 0 0; padding:0; color:var(--content-water); font-size:13px; }
@media(max-width:640px) {
.fable-content section.tackle-comparison { gap:16px; padding:20px 16px; }
.fable-content .tackle-comparison figure + figure { padding-left:16px; }
.fable-content .tackle-comparison p { font-size:14px; }
.fable-content .tackle-comparison .tackle-glyph { height:124px; }
.fable-content .tackle-palette { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.fable-content .tackle-term-grid { gap:12px; }
.fable-content .tackle-term-grid article { padding:12px; }
.fable-content .tackle-matrix { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:420px) {
.fable-content .tackle-comparison h2 { font-size:22px; }
.fable-content .tackle-comparison figcaption > span { font-size:12px; }
.fable-content .tackle-next { display:grid; gap:4px; }
.fable-content .tackle-next > a:not(.cta) { justify-content:center; }
.fable-content .tackle-reading details > summary { font-size:15px; }
.fable-content .tackle-effect-list > div { grid-template-columns:minmax(0,1fr); gap:4px; }
}


@media(min-width: 901px) and (max-height: 760px) {
.fable-content .visual-answer { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.fable-content .visual-answer p { flex:1; }
.fable-content .visual-answer .cta { flex:none; margin-top:0; }
.fable-content .tide-guide > :is(svg,.tide-labels,.diagram-key) { max-width:480px; margin-inline:auto; }
.fable-content .tide-guide svg { margin-block:8px; }
.fable-content .concept-pair svg { max-width:300px; margin-inline:auto; }
}


:root .fable-page.fable-content { --content-page:var(--fable-surface-soft); }
:root .fable-page.fable-content .fable-shell > section:not(.rig-learning) { padding:20px 0; margin:0; border:0; border-top:1px solid var(--content-line); border-radius:0; background:transparent; box-shadow:none; }
:root .fable-page.fable-content section.answer:not(.visual-answer) { padding:16px; margin-bottom:16px; border:1px solid var(--content-line); border-radius:12px; background:var(--content-surface); }
:root .fable-page.fable-content :is(p,li,th,td) { font-size:1rem; line-height:1.7; }
:root .fable-page.fable-content p { max-width:68ch; }
:root .fable-page.fable-content h2 { font-size:1.25rem; line-height:1.4; }
:root .fable-page.fable-content h3 { font-size:1.0625rem; line-height:1.5; }
:root .fable-page.fable-content :is(.note,.diagram-label,.diagram-key,.diagram-details p,.tackle-reference) { font-size:1rem; line-height:1.65; }
:root .fable-page.fable-content figcaption { font-size:.875rem; line-height:1.6; }
:root .fable-page.fable-content :is(summary,.diagram-details>summary) { min-height:48px; font-size:.9375rem; line-height:1.5; }
:root .fable-page.fable-content :is(.tide-guide,.concept-guide) { padding:16px; border:1px solid var(--content-line); border-radius:12px; box-shadow:none; background:var(--content-surface); }
:root .fable-page.fable-content .ports a { border-radius:8px; background:var(--content-surface); box-shadow:none; }
:root .fable-page.fable-content .ports span { font-size:1rem; }
:root .fable-page.fable-content .reading-next>a { background:var(--content-surface); }
:root .fable-page.fable-content .reading-next h2 { font-size:1rem; }
:root .fable-page.fable-content .reading-next span { font-size:1rem; line-height:1.5; }
:root .fable-page.fable-content[data-ocean-site] :is(.reading-toc,.port-reading-jumps) a { font-size:1rem; }
:root .fable-page.fable-content :is(.tackle-condition,.tackle-term-grid article) { padding:14px; border:1px solid var(--content-line); border-radius:10px; background:var(--content-surface); }
:root .fable-page.fable-content .tackle-comparison { gap:16px; }
:root .fable-page.fable-content .tackle-comparison figure+figure { padding-left:16px; }
:root .fable-page.fable-content [data-observed-result] p { font-size:.9375rem; }
@media(min-width:960px) { :root body.fable-page.fable-content[data-site-identity]:not(:has([data-west-squid-week],[data-west-squid-week-ssr])) .fable-shell { max-width:1040px; } }

:root .fable-page.fable-content .week-range-days small { font-size:.8125rem; line-height:1.4; }
:root .fable-page.fable-content .week-range-date { font-size:.875rem; }


:root body.fable-page.fable-content[data-site-identity][data-ocean-site] #mainContent > .si-editorial-head {
margin:12px 0; padding:8px 0; border:0; border-radius:0; background:transparent; box-shadow:none;
}
:root body.fable-page.fable-content[data-site-identity][data-ocean-site] #mainContent > .visual-answer {
margin:0 0 8px; padding:8px 0; border:0; border-radius:0; background:transparent; box-shadow:none;
}
:root body.fable-page.fable-content[data-site-identity][data-ocean-site] .reading-toc {
margin:8px 0 12px; padding:4px 0; gap:0 12px; border:0; border-radius:0; background:transparent;
}
:root body.fable-page.fable-content[data-site-identity][data-ocean-site] .reading-toc a {
min-height:48px; padding:8px 0; border-radius:0; background:transparent;
text-decoration:underline; text-underline-offset:4px;
}


:root body.fable-page.fable-content[data-site-identity][data-ocean-site] #mainContent > .tackle-reading { margin:0; padding:0; border:0; border-radius:0; background:transparent; }
:root body.fable-page.fable-content[data-site-identity][data-ocean-site] #mainContent:has(> .tackle-reading) > .si-editorial-head { margin:8px 0 12px; padding:0; }
:root body.fable-page.fable-content[data-site-identity][data-ocean-site] #mainContent:has(> .tackle-reading) h1.si-kicker { margin:0; font-size:clamp(1.7rem,4vw,2.5rem); line-height:1.3; color:var(--content-ink); letter-spacing:-.025em; }
:root body.fable-page.fable-content[data-site-identity][data-ocean-site] #mainContent .tackle-comparison { gap:16px; margin:0; padding:16px 0; border:0; border-radius:0; background:transparent; }
:root body.fable-page.fable-content[data-site-identity][data-ocean-site] #mainContent .tackle-comparison figure { justify-content:flex-end; }
:root body.fable-page.fable-content[data-site-identity][data-ocean-site] #mainContent .tackle-comparison figcaption { min-height:0; padding:8px 0 0; }
:root body.fable-page.fable-content[data-site-identity][data-ocean-site] #mainContent .tackle-comparison h2 { margin:0; font-size:1.25rem; }
:root body.fable-page.fable-content[data-site-identity][data-ocean-site] #mainContent .tackle-lead { margin:0 0 12px; font-size:1rem; color:var(--content-ink); }
:root body.fable-page.fable-content[data-site-identity][data-ocean-site] #mainContent .tackle-figure-note { margin:8px 0; font-size:1rem; line-height:1.65; }
:root body.fable-page.fable-content[data-site-identity][data-ocean-site] #mainContent .tackle-reading > .tackle-read-section { margin:20px 0 0; padding:16px 0; border:0; border-top:1px solid var(--content-line); border-radius:0; background:transparent; }
:root body.fable-page.fable-content[data-site-identity][data-ocean-site] #mainContent .tackle-reading :is(summary,figcaption) { font-size:.9375rem; line-height:1.6; }
:root body.fable-page.fable-content[data-site-identity][data-ocean-site] #mainContent .tackle-reading :is(details p,dt,dd,.tackle-reference) { font-size:1rem; line-height:1.65; }
:root body.fable-page.fable-content[data-site-identity][data-ocean-site] #mainContent .tackle-reference { padding-left:12px; border-left:3px solid var(--content-water); }
:root body.fable-page.fable-content[data-site-identity][data-ocean-site] #mainContent .tackle-next { display:flex; flex-wrap:wrap; gap:4px 20px; margin:16px 0; padding:0; border:0; border-radius:0; background:transparent; }
:root body.fable-page.fable-content[data-site-identity][data-ocean-site] #mainContent .tackle-next a { min-height:44px; align-items:center; font-size:1rem; }

:root body.fable-page.fable-content[data-site-identity][data-ocean-site] #mainContent > [data-compact-reading] { margin:8px 0 12px; padding:0; }
:root body.fable-page.fable-content[data-site-identity][data-ocean-site] #mainContent > [data-compact-reading] h1 { margin:0; font-size:clamp(1.7rem,4vw,2.5rem); line-height:1.3; color:var(--content-ink); letter-spacing:-.025em; }


.fable-content .week-time-picker { display:flex; flex-wrap:wrap; align-items:end; gap:12px; margin:0 0 16px; }
.fable-content .week-time-picker label { display:grid; gap:6px; flex:1; min-width:160px; }
.fable-content .week-time-picker select, .fable-content .week-time-picker button { min-height:44px; padding:8px 12px; font:inherit; color:var(--content-ink); background:var(--content-surface); border:1px solid var(--content-line); border-radius:8px; }
.fable-content .week-time-summary ol { list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.fable-content .week-time-summary li { padding:12px 0; margin:0; border-bottom:1px solid var(--content-line); }
.fable-content .week-time-summary h3 { display:flex; flex-wrap:wrap; gap:8px 16px; margin:0 0 8px; align-items:center; }
.fable-content .week-time-summary h3 a { display:inline-flex; align-items:center; min-height:44px; }
.fable-content .week-time-summary dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:0; }
.fable-content .week-time-summary dd { margin:4px 0; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.fable-content .week-time-summary dd time { font-size:1.125rem; font-weight:750; }
.fable-content .week-time-summary dd small { display:inline-block; margin-left:4px; font-size:.8rem; }
.fable-content .week-time-summary li p { font-size:.85rem; line-height:1.5; margin:8px 0 0; }
.fable-content .week-overview-details > summary { min-height:44px; padding:12px 0; }