/* ==========================================================================
   Fly Guy Fish Guides Library (knowledge base)
   Layered on top of style.css. Editorial, readability-first.
   ========================================================================== */

/* Library pages have no photo hero, so the site header is a single, solid, sticky
   bar (dark text on light) with the library's own category nav. */
.site-header.lib-static{position:sticky;top:0;z-index:60;background:var(--paper);box-shadow:0 1px 0 var(--line);padding:12px 0}
.site-header.lib-static .brand{color:var(--ink)!important}
.site-header.lib-static .brand .bt i{color:var(--accent-ink)!important}
.site-header.lib-static .nav a:not(.navcta){color:var(--ink)!important}
.site-header.lib-static .nav a.navcta{color:#fff!important}
.site-header.lib-static .nav a.lib-active:not(.navcta){color:var(--accent-ink)!important}
.site-header.lib-static .nav-toggle span{color:var(--ink)!important}
.lib-nav{gap:1rem}
.lib-nav a{font-size:.94rem}
@media(max-width:900px){.nav a.lib-active{color:var(--accent)!important}}

/* ---- Breadcrumbs (in article header) ---- */
.crumbs.lib{color:var(--accent-ink);margin-bottom:.8rem}
.crumbs.lib a{color:var(--ink-2)}
.crumbs.lib a:hover{color:var(--accent-ink)}

/* ---- Article header ---- */
.article-head{padding:clamp(30px,5vw,54px) 0 0}
.article-head .kicker{margin-bottom:.7rem}
.article-head h1{font-size:clamp(2.3rem,5vw,3.8rem);margin-bottom:.2rem}
.article-head .sci{font-family:"Barlow",serif;font-style:italic;color:var(--ink-2);font-size:1.05rem;font-weight:500;
  text-transform:none;letter-spacing:0;margin-bottom:1rem}
.article-head .standfirst{font-size:clamp(1.1rem,1.8vw,1.35rem);color:var(--ink-2);max-width:65ch;font-weight:500;line-height:1.5}

/* ---- Hero figures: area maps + knot/rig diagrams (self-hosted) ---- */
.area-map,.lib-figure{margin:1.6rem 0 0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--shadow-sm);background:#e9eef0}
.lib-figure{background:var(--sand)}
.area-map img,.lib-figure img{display:block;width:100%;height:auto}
.area-map figcaption,.lib-figure figcaption{font-size:.72rem;color:var(--ink-2);padding:.4rem .8rem;background:#fff;border-top:1px solid var(--line)}

/* ---- Seasonal run-timing chart ---- */
.runchart{overflow-x:auto;margin:1.7rem 0}
.runchart table{border-collapse:collapse;width:100%;min-width:660px;font-family:"Barlow Condensed",sans-serif}
.runchart th,.runchart td{border:1px solid var(--line);text-align:center}
.runchart thead th{background:var(--ink);color:#fff;font-weight:600;font-size:.9rem;padding:.4rem .3rem;
  text-transform:uppercase;letter-spacing:.03em}
.runchart tbody th{background:var(--sand);text-align:left;padding:.45rem .7rem;font-weight:700;
  font-size:1rem;white-space:nowrap;color:var(--ink)}
.runchart tbody td{height:26px;width:6.6%}
.runchart td.l0{background:#fff}
.runchart td.l1{background:#ffd9c2}
.runchart td.l2{background:var(--accent)}
.runchart .rc-key{margin:.7rem 0 0;font-size:.85rem;color:var(--ink-2);display:flex;align-items:center;gap:.3rem;flex-wrap:wrap}
.runchart .rc-key span{display:inline-block;width:20px;height:14px;border:1px solid var(--line);vertical-align:middle;margin:0 .1rem 0 .6rem}
.runchart .rc-key span.l0{background:#fff}
.runchart .rc-key span.l1{background:#ffd9c2}
.runchart .rc-key span.l2{background:var(--accent)}

/* ---- Knot tutorial link (out to Animated Knots) ---- */
.knot-video{margin:1.7rem 0}
.knot-video a{display:flex;align-items:center;gap:.8rem;background:var(--ink);color:#fff;border-radius:12px;
  padding:.95rem 1.2rem;text-decoration:none;transition:.2s;box-shadow:var(--shadow-sm)}
.knot-video a:hover{background:var(--deep)}
.knot-video svg{width:26px;height:26px;color:var(--accent);flex:0 0 auto}
.knot-video span{flex:1;font-size:1rem;line-height:1.35}
.knot-video em{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.05em;
  font-style:normal;font-size:.85rem;color:#ffd9b0;white-space:nowrap}
@media(max-width:560px){.knot-video a{flex-wrap:wrap}.knot-video em{width:100%}}

/* ---- Article layout: content + aside ---- */
.article-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(28px,4vw,56px);
  align-items:start;padding:2.4rem 0 0}
@media(max-width:900px){.article-grid{grid-template-columns:1fr}}

/* ---- Prose ---- */
.article{max-width:70ch;font-size:1.08rem;line-height:1.72}
.article h2{font-size:clamp(1.5rem,2.6vw,2.1rem);margin:2.2rem 0 .7rem;padding-top:.4rem}
.article h2:first-child{margin-top:0}
.article h3{font-size:1.28rem;margin:1.6rem 0 .5rem;text-transform:none;letter-spacing:.005em}
.article p{margin:0 0 1.1rem}
.article ul,.article ol{margin:0 0 1.2rem;padding-left:1.3rem}
.article li{margin:.4rem 0}
.article li::marker{color:var(--accent)}
.article strong{color:var(--ink)}
.article a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.article a:hover{color:var(--accent)}
.article hr{border:0;border-top:1px solid var(--line);margin:2rem 0}
.article .lead-p{font-size:1.18rem;color:var(--ink)}

/* Callout / key box */
.keybox{background:var(--sand);border-left:4px solid var(--accent);border-radius:0 12px 12px 0;
  padding:1.1rem 1.4rem;margin:1.6rem 0}
.keybox b{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.04em;display:block;margin-bottom:.2rem;color:var(--accent-ink)}
.keybox.reg{background:#eef4f4;border-left-color:var(--sea)}
.keybox.reg b{color:var(--sea)}

/* Pull tip */
.tip{display:flex;gap:.7rem;background:#fff;border:1px solid var(--line);border-radius:12px;padding:1rem 1.2rem;margin:1.4rem 0;box-shadow:var(--shadow-sm)}
.tip svg{width:22px;height:22px;color:var(--accent);flex:0 0 auto;margin-top:2px}
.tip p{margin:0;font-size:1rem}
.tip b{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.03em}

/* ---- Aside: At a glance ---- */
.aside{position:sticky;top:90px}
@media(max-width:900px){.aside{position:static;margin-top:1.5rem}}
.factcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm)}
.factcard h4{background:var(--ink);color:#fff;font-size:1.05rem;letter-spacing:.05em;padding:.85rem 1.1rem;margin:0}
.factcard dl{margin:0;padding:.4rem 1.1rem 1rem}
.factcard .frow{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px dashed var(--line)}
.factcard .frow:last-child{border-bottom:0}
.factcard dt{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.05em;font-size:.82rem;color:var(--ink-2);font-weight:600;flex:0 0 42%}
.factcard dd{margin:0;font-size:.95rem;text-align:right;font-weight:500}
.factcard .stars{color:var(--accent);letter-spacing:.05em}
.aside .mini-cta{margin-top:1.2rem;background:var(--deep);color:#fff;border-radius:var(--r);padding:1.3rem;text-align:center}
.aside .mini-cta p{margin:0 0 .8rem;font-size:.98rem;color:#dce9ea}
.aside .mini-cta .btn{font-size:1rem;padding:.65rem 1.2rem}

/* ---- Related links grid ---- */
.related{border-top:1px solid var(--line);margin-top:3rem;padding-top:2rem}
.related h2{font-size:1.5rem;margin-bottom:1.2rem}
.rel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.rel-grid a{display:block;background:#fff;border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem;transition:.2s}
.rel-grid a:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.rel-grid .rc{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.06em;font-size:.72rem;color:var(--accent-ink);font-weight:600}
.rel-grid .rt{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:1.15rem;text-transform:uppercase;line-height:1}

/* ==========================================================================
   Hub pages (landing + category)
   ========================================================================== */
.lib-hero{background:var(--ink);color:#fff;padding:clamp(48px,7vw,90px) 0 clamp(40px,6vw,70px)}
.lib-hero .kicker.light{color:#ffd9b0}
.lib-hero h1{font-size:clamp(2.6rem,6vw,4.6rem);max-width:20ch}
.lib-hero p{font-size:clamp(1.1rem,1.8vw,1.35rem);color:#cfe0e4;max-width:60ch;font-weight:500}

/* Category cards (landing) */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:2.4rem}
@media(max-width:900px){.cat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cat-grid{grid-template-columns:1fr}}
.cat{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.6rem;box-shadow:var(--shadow-sm);transition:.2s;position:relative;overflow:hidden}
.cat:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--accent)}
.cat .ic{width:48px;height:48px;border-radius:12px;background:var(--sand);display:grid;place-items:center;margin-bottom:1rem}
.cat .ic svg{width:26px;height:26px;color:var(--accent-ink)}
.cat h3{margin-bottom:.35rem}
.cat p{color:var(--ink-2);font-size:.98rem;margin-bottom:.7rem}
.cat .count{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.06em;font-size:.8rem;color:var(--accent-ink);font-weight:600}

/* Index list (category hub) */
.lib-section{padding:clamp(40px,6vw,72px) 0}
.lib-section .sec-head{margin-bottom:1.6rem}
.entry-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.entry{display:flex;align-items:center;gap:.9rem;background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:.9rem 1.1rem;transition:.2s}
a.entry:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.entry .en{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:1.18rem;text-transform:uppercase;line-height:1;color:var(--ink)}
.entry .sub{font-size:.82rem;color:var(--ink-2);font-style:italic}
.entry .arr{margin-left:auto;color:var(--accent);flex:0 0 auto}
.entry.soon{opacity:.6;cursor:default}
.entry.soon .en{color:var(--ink-2)}
.entry.soon .arr{display:none}
.entry.soon::after{content:"Coming soon";margin-left:auto;font-family:"Barlow Condensed";text-transform:uppercase;
  letter-spacing:.06em;font-size:.7rem;color:var(--ink-2);background:var(--sand);padding:.2rem .5rem;border-radius:20px}
.subhead{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.06em;
  font-size:1.05rem;color:var(--accent-ink);margin:2rem 0 .8rem;font-weight:700}
.subhead:first-of-type{margin-top:.5rem}

/* ---- Slim CTA band (bottom of every library page) ---- */
.lib-cta{background:var(--deep);color:#fff;text-align:center;padding:clamp(40px,6vw,64px) 22px}
.lib-cta h2{color:#fff;max-width:22ch;margin:0 auto .6rem}
.lib-cta p{color:#cfe0e4;max-width:52ch;margin:0 auto 1.4rem;font-size:1.1rem}
.lib-cta .disc{margin-top:1.2rem;font-size:.8rem;color:#8fb0b5;max-width:60ch;margin-left:auto;margin-right:auto}