@font-face { font-family:'Manrope'; src:url('fonts/Manrope.woff2') format('woff2'); font-weight:200 800; font-display:swap; }
@font-face { font-family:'Barlow Semi Condensed'; src:url('fonts/BarlowSemiCondensed-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Barlow Semi Condensed'; src:url('fonts/BarlowSemiCondensed-700.woff2') format('woff2'); font-weight:700; font-display:swap; }

/* Catchable site v2. The only stylesheet. Light is the default; dark follows the system setting. */
:root{
  color-scheme:light;
  --bg:#F6F4EE; --surface:#ECE9E0; --ink:#14181D; --ink2:#434C56; --muted:#59636D;
  --rule:rgba(20,24,29,.22); --rule-strong:rgba(20,24,29,.6); --edge:rgba(20,24,29,.35);
  --open:#00795C; --hold:#F5C242; --seasonal:#4DA3FF; --closed:#B42318;
  --on-open:#FFFFFF; --on-hold:#0A0E12; --on-seasonal:#0A0E12; --on-closed:#FFFFFF;
  --sans:'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:var(--sans);
  --verdict:'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --r:2px; --r-chip:4px;
  --measure:40rem; --cap-w:240px; --gutter:16px;
}
@media (prefers-color-scheme: dark){
  :root{
    color-scheme:dark;
    --bg:#0A0E12; --surface:#11161C; --ink:#EAEEF2; --ink2:#A7B0BA; --muted:#8F99A4;
    --rule:rgba(234,238,242,.2); --rule-strong:rgba(234,238,242,.55); --edge:transparent;
  }
}
@media (min-width:768px){ :root{ --gutter:32px; } }
@media (min-width:900px){ :root{ --cap-w:256px; } }

/* base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.65 var(--sans);overflow-wrap:break-word}
@media (min-width:768px){ body{font-size:18px} }
img,svg{display:block;max-width:100%;height:auto}
a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
h1,h2,h3{margin:0;color:var(--ink);text-wrap:balance}
h1{font-weight:800;font-size:clamp(34px,6.2vw,64px);line-height:1.04;letter-spacing:-.02em}
h2{font-weight:700;font-size:26px;line-height:1.2;letter-spacing:-.01em;margin-bottom:var(--s5)}
h3{font-weight:700;font-size:20px;line-height:1.3;margin-bottom:var(--s3)}
@media (min-width:768px){ h2{font-size:34px} h3{font-size:22px} }
p{margin:0 0 var(--s4)}
b,strong{font-weight:700}
data,time,.num{font-family:var(--mono);font-size:.92em;font-variant-numeric:tabular-nums}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:var(--s4);top:var(--s2);z-index:10;background:var(--bg);padding:var(--s3) var(--s4)}
.wrap{max-width:1120px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}

/* header and nav */
.bar{border-bottom:1px solid var(--rule)}
.bar .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s1) var(--s5);min-height:56px;padding-top:var(--s2);padding-bottom:var(--s2)}
.mark{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;font-weight:800;font-size:19px;letter-spacing:-.01em;text-decoration:none}
.mark img{width:24px;height:24px}
.nav ul{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s4);margin:0;padding:0;list-style:none}
.nav a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;font-size:16px}
.nav a[aria-current="page"]{text-decoration-thickness:3px}
.nav .btn{min-height:44px;padding:0 var(--s4);font-size:16px}
@media (max-width:599px){ .bar .nav{flex-basis:100%} }

/* buttons and big links */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 var(--s5);background:var(--ink);color:var(--bg);border:1px solid var(--ink);border-radius:var(--r-chip);font-weight:700;font-size:17px;text-decoration:none}
.btn:hover{background:transparent;color:var(--ink)}
.btn.full{width:100%}
@media (min-width:600px){ .btn.full{width:auto} }
.link-lg{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s5);margin:var(--s6) 0 var(--s4)}

/* home lead */
.lead{display:grid;grid-template-columns:minmax(0,1fr);row-gap:var(--s7);padding-top:var(--s7);padding-bottom:var(--s8)}
.lead-text > *{max-width:var(--measure)}
.sub{font-size:19px;line-height:1.5;color:var(--ink2);margin-top:var(--s5)}
.micro{font-size:16px;color:var(--ink2)}
@media (min-width:900px){
  .lead{grid-template-columns:minmax(0,1fr) var(--cap-w);grid-template-areas:"text cap" "legend legend";column-gap:var(--s8);padding-top:var(--s8)}
  .lead-text{grid-area:text}
  .legend-block{grid-area:legend}
  .lead > .cap{grid-area:cap;margin:0}
}

/* readout: source, cadence, dated count */
.readout{margin:var(--s6) 0 0;border-top:1px solid var(--rule)}
.readout div{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:var(--s3);padding:var(--s3) 0;border-bottom:1px solid var(--rule)}
.readout dt{font-family:var(--sans);font-weight:600;font-size:14px;color:var(--muted);padding-top:3px}
.readout dd{margin:0;font-size:16px}

/* legend: swatch, word, meaning, common mistake */
.legend-block > p{max-width:var(--measure)}
.legend{list-style:none;margin:var(--s5) 0 var(--s5);padding:0;border-top:1px solid var(--rule)}
.legend li{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:var(--s4);row-gap:var(--s1);padding:var(--s5) 0;border-bottom:1px solid var(--rule)}
.sw{width:28px;height:28px;border-radius:var(--r);border:1px solid var(--edge);margin-top:4px}
.lw{font-family:var(--verdict);font-weight:700;font-size:26px;line-height:1.15}
.lm{grid-column:2;max-width:var(--measure)}
.lm p{margin:0 0 var(--s2)}
.mistake{font-size:16px;color:var(--ink2)}
@media (min-width:768px){
  .legend li{grid-template-columns:28px 13rem minmax(0,1fr)}
  .lm{grid-column:3}
}
.sw--open{background:var(--open)}
.sw--hold{background:var(--hold)}
.sw--seasonal{background:var(--seasonal)}
.sw--closed{background:var(--closed)}

/* verdict chip: never interactive, never without its word */
.chip{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:var(--r-chip);border:1px solid var(--edge);font-family:var(--verdict);font-weight:700;font-size:20px;line-height:1;white-space:nowrap}
.chip--open{background:var(--open);color:var(--on-open)}
.chip--hold{background:var(--hold);color:var(--on-hold)}
.chip--seasonal{background:var(--seasonal);color:var(--on-seasonal)}
.chip--closed{background:var(--closed);color:var(--on-closed)}
.chips{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s4) 0;padding:0;list-style:none}

/* sections and the lesson margin column */
.sec{padding:var(--s7) 0;border-top:1px solid var(--rule)}
@media (min-width:768px){ .sec{padding:var(--s8) 0} }
.margin{display:none}
.no{font-family:var(--sans);font-weight:600;font-size:14px;color:var(--muted);margin:10px 0 0}
@media (min-width:900px){
  .page{display:grid;grid-template-columns:200px minmax(0,1fr);column-gap:var(--s7)}
  .margin{display:block}
}
.body > *,.body section > *{max-width:var(--measure)}
.body > section{max-width:none}
.body .caps{max-width:none}
.body ul:not([class]){padding-left:1.25em;margin:0 0 var(--s4)}
.body ul:not([class]) li{margin-bottom:var(--s2)}
.more{display:inline-flex;align-items:center;min-height:44px;font-weight:600}

/* home shellfish band and language slot */
.band{background:var(--surface)}
.warn{font-weight:700;font-size:21px;line-height:1.4}
.langs{font-size:16px;color:var(--ink2);margin-top:var(--s5)}

/* captures */
.cap{margin:var(--s6) 0;max-width:22rem}
.cap img{width:var(--cap-w);height:auto;border:1px solid var(--rule-strong);border-radius:var(--r);background:var(--surface)}
.cap figcaption{margin-top:var(--s3);font-size:16px;line-height:1.5}
.cap figcaption p{margin:0 0 var(--s2)}
.cap-place{font-family:var(--sans);font-weight:600;font-size:14px;color:var(--ink2)}
.cap-fish{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);font-weight:700}
.cap-src{color:var(--muted)}
.cap-stale{font-weight:700}
.caps{display:grid;grid-template-columns:var(--cap-w);gap:var(--s6) var(--s4);justify-content:start;margin:var(--s6) 0}
.caps .cap{margin:0}
@media (min-width:600px){ .caps{grid-template-columns:repeat(2,var(--cap-w))} }
@media (min-width:1200px){ .caps{grid-template-columns:repeat(3,var(--cap-w))} }

/* lessons */
.page{padding-top:var(--s7);padding-bottom:var(--s8)}
.jump{position:sticky;top:var(--s5)}
.jump ul{list-style:none;margin:var(--s4) 0 0;padding:0}
.jump a{display:flex;align-items:center;min-height:44px;font-size:16px}
.crumb{font-size:16px;color:var(--ink2);margin:0 0 var(--s4)}
.crumb a{display:inline-flex;align-items:center;min-height:44px}
.lesson h1{font-size:clamp(30px,5vw,48px);line-height:1.08}
.short{font-weight:600;font-size:21px;line-height:1.45;border-top:2px solid var(--ink);padding-top:var(--s4);margin:var(--s6) 0 var(--s5)}
@media (min-width:768px){ .short{font-size:24px} }
.strip{border-top:1px solid var(--rule-strong);border-bottom:1px solid var(--rule-strong);padding:var(--s3) 0;font-weight:600;margin:0 0 var(--s7)}
.strip b{font-weight:800}
.lesson section{margin:0 0 var(--s7)}
.steps{list-style:none;margin:0;padding:0;counter-reset:step}
.steps > li{counter-increment:step;display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:var(--s3);padding:var(--s5) 0;border-top:1px solid var(--rule)}
.steps > li::before{content:counter(step);grid-row:1 / span 3;font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500;font-size:32px;line-height:1}
.steps > li > *{grid-column:2}
@media (min-width:768px){ .steps > li{grid-template-columns:72px minmax(0,1fr)} .steps > li::before{font-size:40px} }
.step-do{font-weight:700;margin:0 0 var(--s2)}
.because{font-size:16px;color:var(--ink2);margin:0}
.because b{color:var(--ink)}
.step-link{font-size:16px;margin:var(--s2) 0 0}
.note{border-top:1px solid var(--rule-strong);border-bottom:1px solid var(--rule-strong);padding:var(--s3) 0;margin:var(--s6) 0}
.note p:last-child{margin:0}
.pic{margin:0 0 var(--s7);max-width:480px;color:var(--ink)}
.pic svg{width:100%;height:auto}
.pic figcaption{font-size:16px;color:var(--ink2);margin-top:var(--s3)}
.key{list-style:none;margin:var(--s3) 0 0;padding:0;font-size:16px}
.key li{padding:var(--s1) 0;border-bottom:1px solid var(--rule)}
.key b{font-family:var(--mono);font-variant-numeric:tabular-nums;margin-right:var(--s2)}
.official{border:1px solid var(--ink);border-radius:var(--r);padding:var(--s5)}
@media (min-width:768px){ .official{padding:var(--s6)} }
.official blockquote{margin:0 0 var(--s2);padding-left:var(--s4);border-left:4px solid var(--ink);font-weight:600;font-size:19px;line-height:1.45}
.official blockquote p{margin:0}
.attr{font-size:16px;color:var(--ink2)}
.inshort{margin:0 0 var(--s4)}
.inshort-k{font-family:var(--sans);font-weight:600;font-size:14px;color:var(--muted);margin:0 0 var(--s1)}
.links{list-style:none;margin:var(--s4) 0;padding:0;border-top:1px solid var(--rule)}
.links li{border-bottom:1px solid var(--rule)}
.links a{display:flex;align-items:center;min-height:44px;padding:var(--s2) 0;font-weight:600}
.src{font-size:16px;color:var(--ink2);margin:var(--s4) 0 0;padding-top:var(--s3);border-top:1px solid var(--rule)}
.src time{color:var(--ink)}
.try{border-top:2px solid var(--ink);padding-top:var(--s5)}
.watch ul{list-style:none;margin:var(--s3) 0 0;padding:0;border-top:1px solid var(--rule)}
.watch li{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);min-height:44px;padding:var(--s2) 0;border-bottom:1px solid var(--rule)}
.watch li:last-child{border-bottom:0}
.watch a{display:inline-flex;align-items:center;min-height:44px}
.dur{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:14px;color:var(--muted);white-space:nowrap}
.fine{font-size:16px;color:var(--ink2)}
.faq{border-top:1px solid var(--rule);padding-top:var(--s5);margin-top:var(--s7)}
.next{display:flex;align-items:center;min-height:48px;font-weight:700;font-size:19px;margin:var(--s6) 0 0}
.lessons{list-style:none;margin:var(--s5) 0 0;padding:0;border-top:1px solid var(--rule)}
.lessons li{display:grid;grid-template-columns:minmax(0,1fr);padding:var(--s4) 0;border-bottom:1px solid var(--rule)}
.lessons a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;font-size:19px}
.lessons p{margin:0;font-size:16px;color:var(--ink2)}
.price{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:28px;font-weight:500;margin:0 0 var(--s2)}

/* footer */
.foot{border-top:1px solid var(--rule-strong);padding:var(--s8) 0 var(--s7);font-size:16px;line-height:1.55;color:var(--ink2)}
.foot-grid{display:grid;gap:var(--s7)}
@media (min-width:900px){ .foot-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--s6)} }
.foot p{margin:0 0 var(--s3)}
.foot-h{font-size:16px;font-weight:700;color:var(--ink);margin:0 0 var(--s2);letter-spacing:0}
.foot ul{list-style:none;margin:0;padding:0}
.foot li a{display:flex;align-items:center;min-height:44px}
.foot .mark{margin-bottom:var(--s3);color:var(--ink)}

/* motion and contrast modes */
@media (prefers-reduced-motion: no-preference){
  a,.btn{transition:background-color .15s ease,color .15s ease,text-decoration-thickness .15s ease}
}
@media (forced-colors: active){
  .chip,.sw{forced-color-adjust:none;border:1px solid CanvasText}
}