/* ===========================================================
   Great Basin Flyfisher — waters directory styles
   Layers on top of /styles.css. Only defines what the directory
   pages add; everything else (nav, forecast strip, gauge, buttons,
   footer, palette) is inherited so pages match the rest of the site.
   =========================================================== */

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

main.water{padding:26px 0 60px}
main.water .wrap{max-width:820px}
main.water .forecast .wrap,
main.water .live-embed .wrap{max-width:1080px}

/* breadcrumbs */
.crumbs{font-family:var(--mono);font-size:.78rem;letter-spacing:.02em;color:var(--playa);margin:0 0 14px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.crumbs a{color:var(--alpine);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs .sep{opacity:.5}
.crumbs [aria-current="page"]{color:var(--ridge);font-weight:600}

/* page header */
.whead{margin:6px 0 18px}
.whead h1{font-family:var(--disp);font-weight:700;line-height:1.02;text-transform:uppercase;letter-spacing:.01em;font-size:clamp(2.1rem,6vw,3.4rem);margin:.1em 0 .2em}
.whead .lede{font-size:clamp(1.05rem,2.4vw,1.28rem);line-height:1.5;color:var(--ridge);max-width:64ch}

/* hero */
.whero{display:block;width:100%;height:auto;border-radius:14px;margin:8px 0 6px;object-fit:cover}
.whero-ph{aspect-ratio:2/1;background:repeating-linear-gradient(135deg,#e7e0cf,#e7e0cf 14px,#ded6c2 14px,#ded6c2 28px);display:flex;align-items:center;justify-content:center;text-align:center;color:#8a7f68;font-family:var(--mono);font-size:.82rem;padding:20px}
.whero-ph span{max-width:52ch}

/* content sections */
.water .sec{margin:30px 0}
.water .sec p{font-size:1.05rem;line-height:1.62;margin:0 0 1em}
.water .sec h3{font-family:var(--disp);text-transform:uppercase;letter-spacing:.03em;font-size:1.15rem;margin:1.3em 0 .5em}
.ryan-flag{display:block;background:#fdf3e3;border-left:3px solid var(--coral);padding:10px 14px;margin:12px 0;font-family:var(--mono);font-size:.86rem;color:#7a4a2f;border-radius:0 8px 8px 0}

/* species + flies lists */
ul.species,ul.flies{list-style:none;padding:0;margin:.4em 0 1em;display:grid;gap:8px}
ul.species li{padding-left:18px;position:relative;line-height:1.5}
ul.species li::before{content:"›";position:absolute;left:0;color:var(--alpine);font-weight:700}
ul.flies{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
ul.flies li{font-family:var(--mono);font-size:.85rem;background:var(--bone);border:1px solid #0000000f;border-radius:8px;padding:7px 10px}

/* regs source note */
.src{font-size:.95rem}
.src a{color:var(--alpine)}
.srcnote{display:block;color:var(--playa);font-size:.82rem;margin-top:4px}
.srcnote a{color:var(--playa);text-decoration:underline}

/* nearby + hub cards */
.ngrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.ngrid.big{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.ncard,.wcard-link{display:flex;flex-direction:column;gap:6px;background:var(--paper);border:1px solid #0000001a;border-radius:14px;padding:16px 16px 18px;text-decoration:none;color:var(--ridge);transition:transform .12s ease,box-shadow .12s ease}
.ncard:hover,.wcard-link:hover{transform:translateY(-2px);box-shadow:0 8px 22px #0000001f}
.ncard .nk,.wcard-link .nk{font-family:var(--mono);font-size:.72rem;letter-spacing:.02em;text-transform:uppercase;color:var(--playa)}
.ncard b,.wcard-link b{font-family:var(--disp);font-size:1.2rem;text-transform:uppercase;letter-spacing:.01em;line-height:1.05}
.ncard .nd,.wcard-link .nd{font-size:.95rem;line-height:1.45;color:#4a4a44}

/* FAQ */
details.faq{border:1px solid #0000001a;border-radius:10px;padding:2px 14px;margin:8px 0;background:#fff}
details.faq summary{cursor:pointer;font-family:var(--disp);text-transform:uppercase;letter-spacing:.02em;font-size:1rem;padding:12px 0;list-style:none}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";float:right;color:var(--coral);font-weight:700}
details.faq[open] summary::after{content:"–"}
details.faq>div{padding:0 0 14px;line-height:1.55;font-size:1rem}

/* signup blocks */
.signup{background:linear-gradient(135deg,var(--ridge),#243029);color:var(--bone);border-radius:16px;padding:26px 22px;margin:26px 0}
.signup-in{max-width:60ch}
.signup h2{font-family:var(--disp);text-transform:uppercase;letter-spacing:.02em;color:#fff;font-size:clamp(1.3rem,3.2vw,1.7rem);margin:0 0 .3em}
.signup p{color:#e8e1d1;line-height:1.5;margin:0 0 14px}
.subform{display:flex;gap:8px;flex-wrap:wrap}
.subform input{flex:1 1 220px;min-width:0;padding:12px 14px;border-radius:10px;border:1px solid #ffffff33;background:#ffffff10;color:#fff;font-size:1rem;font-family:var(--body)}
.subform input::placeholder{color:#ffffff8c}
.subform .btn{white-space:nowrap}
.subtoast{min-height:1.2em;margin:10px 0 0;font-family:var(--mono);font-size:.85rem}

.pageupdated{font-family:var(--mono);font-size:.78rem;color:var(--playa);margin:26px 0 0}
.pageupdated a{color:var(--alpine)}

/* live embed spacing when reused inside an article */
.live-embed{margin:26px 0}

@media(max-width:640px){
  main.water .wrap{padding-left:18px;padding-right:18px}
}

/* ===================== HATCH & FORAGE CALENDAR ===================== */
.hatchsec{background:linear-gradient(180deg,var(--paper),var(--bone));border-top:1px solid var(--quartz);border-bottom:1px solid var(--quartz);margin:34px 0;padding:34px 0}
.hatch-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:6px}
.hatch-head h2{font-size:clamp(1.5rem,3.4vw,2.05rem);margin:.15em 0 0}
.hatch-tag{font-family:var(--body);color:var(--ridge);opacity:.86;max-width:60ch;margin:.5em 0 0;line-height:1.5}
.hatch-dl{white-space:nowrap;align-self:center}
.hatch-peak{font-family:var(--body);color:var(--alpine);border-left:3px solid var(--sage);padding-left:14px;margin:18px 0 20px;max-width:70ch;line-height:1.55}
.hatch-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--quartz);border-radius:12px;background:#fff;box-shadow:0 1px 2px #1c232011}
.hatch-scroll:focus-visible{outline:2px solid var(--alpine);outline-offset:2px}
.hatch-grid{border-collapse:collapse;width:100%;min-width:620px;font-family:var(--mono)}
.hatch-grid th,.hatch-grid td{border-bottom:1px solid #e6ddca}
.hatch-grid thead th{position:sticky;top:0;background:var(--ridge);color:var(--bone);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;font-weight:500;padding:9px 4px;text-align:center;z-index:1}
.hatch-grid thead th.hg-name{text-align:left;padding-left:14px}
.hg-m abbr{text-decoration:none;border:0;color:inherit}
.hatch-grid thead th.s-spr{background:#2c5f4f}.hatch-grid thead th.s-sum{background:#7d6a2b}.hatch-grid thead th.s-fal{background:#8a3f22}.hatch-grid thead th.s-win{background:#31424a}
.hg-name{text-align:left;padding:9px 10px 9px 14px;vertical-align:middle;background:#fff}
.hg-name .hg-h{display:block;font-family:var(--disp);text-transform:uppercase;letter-spacing:.02em;font-size:.98rem;color:var(--ridge);line-height:1.05}
.hg-name .hg-sz{display:block;font-size:.66rem;color:var(--playa);letter-spacing:.06em;margin-top:2px}
.hg-c{width:6.2%;min-width:26px;height:34px;text-align:center;position:relative}
.hatch-grid tbody tr:nth-child(odd) .hg-name{background:#fbf8f0}
.hatch-grid tbody tr:hover td,.hatch-grid tbody tr:hover .hg-name{background:#f2ecdc}
.hg-c.i0{background:#f4f0e6}
.hg-c.i1{background:#cdd7cf}
.hg-c.i2{background:#6ea08f}
.hg-c.i3{background:var(--coral)}
.hg-c.i2{box-shadow:inset 0 0 0 1px #ffffff22}
.hg-c.i3{box-shadow:inset 0 0 0 1px #ffffff33}
.hatch-grid td.now,.hatch-grid th.hg-m.now{box-shadow:inset 3px 0 0 var(--aspen),inset -3px 0 0 var(--aspen)}
.hatch-grid th.hg-m.now{background:var(--aspen);color:var(--ridge)}
.hg-flies{font-family:var(--body);font-size:.82rem;color:var(--ridge);padding:8px 14px 8px 12px;line-height:1.35;min-width:150px;background:#fff}
.hatch-grid tbody tr:nth-child(odd) .hg-flies{background:#fbf8f0}
.hatch-legend{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:16px 0 0;font-family:var(--mono);font-size:.72rem;color:var(--playa);letter-spacing:.04em}
.hg-legend-lab{text-transform:uppercase;letter-spacing:.14em;color:var(--ridge)}
.hg-key{display:inline-flex;align-items:center;gap:6px}
.hg-key i{width:16px;height:16px;border-radius:4px;display:inline-block}
.hg-key i.i0{background:#f4f0e6;border:1px solid #ddd3c0}.hg-key i.i1{background:#cdd7cf}.hg-key i.i2{background:#6ea08f}.hg-key i.i3{background:var(--coral)}
.hg-now-lab{color:var(--aspen);font-weight:600;letter-spacing:.04em}
.hatch-bite{font-family:var(--body);color:var(--ridge);opacity:.85;margin:14px 0 0;max-width:72ch;line-height:1.55;font-style:italic}
.hatch-verify{margin:18px 0 0}
.hatch-verify-h{font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;font-size:.7rem;color:var(--coral);margin:0 0 6px}
.hatch-verify ul{list-style:none;margin:0;padding:0}
.hatch-src{font-family:var(--mono);font-size:.72rem;color:var(--playa);line-height:1.5;margin:16px 0 0;max-width:74ch}
@media(max-width:640px){.hatch-dl{align-self:flex-start}}
a(max-width:640px){
  .hatch-dl{align-self:flex-start}
}