/* All Coast Sportfishing Reference — "Chart Table"
   Sharp-edged nautical reference. Evolved from the original site's deep royal blue
   (#003399) + sky blue (#99CCFF) + red on white, and its square table-cell layout:
   zero border-radius anywhere, hairline rules, a left index rail in place of the
   original's link rail, and a dense footer sitemap echoing its bracketed link block. */

:root{
  --ink:#0A1F33;
  --navy:#123A5E;
  --chart:#1D6FA5;
  --sky:#D6E6F2;
  --pale:#EEF4F8;
  --paper:#FBF8F1;
  --sand:#E8DFC8;
  --signal:#C0432A;
  --text:#16212B;
  --muted:#54677A;
  --rule:#C3D0DA;
  --rule-soft:#DFE7ED;
  --maxw:1240px;
  --h:'IBM Plex Sans Condensed',"Helvetica Neue",Arial,sans-serif;
  --b:'Source Serif 4',Georgia,'Times New Roman',serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--text);
  font-family:var(--b);font-size:1.0625rem;line-height:1.7;
  font-synthesis-weight:none;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--chart);text-underline-offset:.18em;text-decoration-thickness:.06em}
a:hover{color:var(--signal)}

/* every box in this design is square — deliberate, matches the original */
.sitenav,.hero,.hero-panel,.railbox,.prose,.sitefoot,.inline-fig,.page-note,figure,img{border-radius:0}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:1.25rem}

.skip{position:absolute;left:-9999px;top:0;background:var(--signal);color:#fff;padding:.6rem 1rem;z-index:99}
.skip:focus{left:0}

/* ---------- nav: always visible, wraps, needs no JavaScript ---------- */
.sitenav{background:var(--ink);border-top:4px solid var(--signal);color:#E8F0F6}
.sitenav .wrap{display:flex;flex-wrap:wrap;align-items:flex-start;gap:1rem 2rem;padding-block:.95rem}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:#fff;flex:0 0 auto;min-width:0}
.brand-mark{width:12px;height:34px;background:var(--signal);box-shadow:6px 0 0 var(--chart),12px 0 0 var(--sky);flex:0 0 auto}
.brand-text{display:flex;flex-direction:column;line-height:1.08;font-family:var(--h)}
.brand-text strong{font-size:1.32rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700}
.brand-text em{font-style:normal;font-size:.74rem;letter-spacing:.19em;text-transform:uppercase;color:var(--sky);font-weight:500}
.navlists{flex:1 1 320px;min-width:0}
.sitenav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;min-width:0}
.nav-primary{gap:.15rem 1.15rem}
.nav-primary a{
  font-family:var(--h);font-weight:600;font-size:.9rem;letter-spacing:.055em;text-transform:uppercase;
  color:#EAF2F8;text-decoration:none;display:inline-block;padding:.2rem 0;border-bottom:2px solid transparent;
}
.nav-primary a:hover,.nav-primary a.on{color:#fff;border-bottom-color:var(--signal)}
.nav-secondary{gap:.1rem .95rem;margin-top:.35rem}
.nav-secondary a{
  font-family:var(--h);font-weight:500;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;
  color:#9DB6C9;text-decoration:none;
}
.nav-secondary a:hover,.nav-secondary a.on{color:var(--sky)}

/* chart scale-bar strip */
.tickstrip{
  height:9px;
  background:
    repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px 14px),
    linear-gradient(var(--sky),var(--sky));
  border-bottom:1px solid var(--rule);
}

/* ---------- hero: full-bleed image, offset solid panel ---------- */
.hero{position:relative;background:var(--ink)}
.hero-img{width:100%;max-height:min(64vh,560px);object-fit:cover;opacity:.96}
.hero-home .hero-img{max-height:min(76vh,660px)}
.hero-panel{
  width:min(660px,calc(100% - 2.5rem));
  margin:-5.5rem auto 0 max(1.25rem,calc((100vw - var(--maxw))/2 + 1.25rem));
  position:relative;background:var(--ink);color:#F1F6FA;
  padding:1.6rem 1.8rem 1.75rem;border-left:6px solid var(--signal);
  animation:riseIn .5s ease-out both;
}
.plainhead{background:var(--ink);color:#F1F6FA;padding-block:2.6rem 2.2rem;border-bottom:6px solid var(--signal)}
.eyebrow{
  font-family:var(--h);text-transform:uppercase;letter-spacing:.2em;font-size:.72rem;
  color:var(--sky);margin:0 0 .55rem;font-weight:600;
}
.hero-panel h1,.plainhead h1{
  font-family:var(--h);font-weight:700;line-height:1.08;margin:0 0 .6rem;
  font-size:clamp(1.75rem,4.2vw,2.7rem);letter-spacing:-.005em;color:#fff;
}
.lede{margin:0;color:#C7D8E5;font-size:1.02rem;line-height:1.6;max-width:62ch}

/* ---------- layout: index rail + prose ---------- */
.layout{display:grid;grid-template-columns:minmax(0,15.5rem) minmax(0,1fr);gap:3rem;padding-block:3rem 3.5rem;align-items:start}
.layout.norail{grid-template-columns:minmax(0,1fr);max-width:74ch}
.rail{position:sticky;top:1.25rem;min-width:0}
.railbox{border-top:3px solid var(--ink);background:var(--pale);padding:1rem 1.1rem 1.15rem}
.rail-h{font-family:var(--h);text-transform:uppercase;letter-spacing:.14em;font-size:.7rem;color:var(--muted);margin:0 0 .6rem;font-weight:600}
.rail-list{list-style:none;margin:0;padding:0}
.rail-list li{border-top:1px solid var(--rule-soft)}
.rail-list li:first-child{border-top:0}
.rail-list a{
  display:block;padding:.42rem 0;font-family:var(--h);font-size:.86rem;font-weight:500;
  color:var(--navy);text-decoration:none;line-height:1.3;
}
.rail-list a:hover{color:var(--signal)}
.rail-note{margin:.9rem 0 0;font-size:.76rem;line-height:1.5;color:var(--muted);border-left:3px solid var(--sand);padding-left:.7rem}

/* ---------- prose ---------- */
.prose{min-width:0;max-width:74ch;animation:riseIn .55s ease-out both}
.prose>p:first-of-type{font-size:1.16rem;line-height:1.62;color:#22303C}
.prose h2{
  font-family:var(--h);font-weight:700;font-size:clamp(1.32rem,2.4vw,1.72rem);line-height:1.18;
  margin:2.6rem 0 .85rem;padding-top:.9rem;border-top:2px solid var(--ink);color:var(--ink);
  letter-spacing:-.005em;scroll-margin-top:1rem;
}
.prose h3{font-family:var(--h);font-weight:600;font-size:1.09rem;margin:1.7rem 0 .5rem;color:var(--navy);letter-spacing:.01em}
.prose p{margin:0 0 1.05rem}
.prose ul,.prose ol{margin:0 0 1.15rem;padding-left:0;list-style:none}
.prose ol{counter-reset:n}
.prose li{position:relative;padding-left:1.6rem;margin-bottom:.6rem}
.prose ul>li::before{content:"";position:absolute;left:.15rem;top:.72em;width:.55rem;height:2px;background:var(--signal)}
.prose ol>li{counter-increment:n}
.prose ol>li::before{content:counter(n);position:absolute;left:0;top:.06em;font-family:var(--h);font-weight:600;font-size:.82rem;color:var(--signal)}
.prose strong{font-weight:600;color:#0E1A24}
.prose em{font-style:italic}

.inline-fig{margin:2rem 0 2.2rem;border-top:3px solid var(--ink)}
.inline-fig img{width:100%}
.inline-fig figcaption{
  font-family:var(--h);font-size:.78rem;line-height:1.45;color:var(--muted);
  padding:.55rem .1rem 0;border-bottom:1px solid var(--rule-soft);padding-bottom:.6rem;
}

.page-note{
  margin-top:2.6rem;background:var(--sky);border-left:6px solid var(--navy);
  padding:.95rem 1.1rem;font-size:.86rem;line-height:1.6;color:#1B2C3A;
}

/* ---------- footer ---------- */
.sitefoot{background:var(--ink);color:#B9CBD9;margin-top:1rem;border-top:4px solid var(--signal);padding-block:2.6rem 2rem}
.foot-h{font-family:var(--h);text-transform:uppercase;letter-spacing:.15em;font-size:.72rem;color:var(--sky);margin:0 0 .7rem;font-weight:600}
.foot-list{list-style:none;margin:0;padding:0}
.foot-list li{margin-bottom:.34rem}
.foot-list a{color:#C9D9E5;text-decoration:none;font-size:.9rem;font-family:var(--h);font-weight:500}
.foot-list a:hover{color:#fff;text-decoration:underline}
.disclaimer{
  margin:2.2rem 0 .9rem;padding:.95rem 1.1rem;border:1px solid #24455F;border-left:6px solid var(--sand);
  font-size:.83rem;line-height:1.6;color:#A9BFD0;
}
.disclaimer strong{color:var(--sand)}
.copyline{margin:0;font-family:var(--h);font-size:.76rem;letter-spacing:.05em;color:#7E97AA}

/* ---------- 404 ---------- */
.nf{padding-block:5rem 5.5rem;max-width:60ch}
.nf h1{font-family:var(--h);font-weight:700;font-size:clamp(2rem,6vw,3.2rem);margin:0 0 1rem;color:var(--ink)}
.nf .code{font-family:var(--h);font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;color:var(--signal);font-weight:600;margin:0 0 .6rem}
.btnrow{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem}
.btn-chart{
  display:inline-block;background:var(--ink);color:#fff;text-decoration:none;
  font-family:var(--h);font-size:.85rem;letter-spacing:.09em;text-transform:uppercase;font-weight:600;
  padding:.7rem 1.2rem;border-left:5px solid var(--signal);
}
.btn-chart:hover{background:var(--navy);color:#fff}

/* ---------- motion: ends visible; content never waits on JS ---------- */
@keyframes riseIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* Safeguard: nothing on this site is hidden waiting on JavaScript. */
[data-aos]{opacity:1!important;transform:none!important}

/* ---------- responsive ---------- */
@media (max-width:991.98px){
  .layout{grid-template-columns:minmax(0,1fr);gap:1.75rem}
  .rail{position:static}
  .hero-panel{margin-left:auto;margin-right:auto;margin-top:-3rem}
}
@media (max-width:575.98px){
  body{font-size:1rem}
  .hero-panel{margin-top:0;width:100%;padding:1.25rem 1.15rem 1.4rem;border-left-width:5px}
  .hero-img{max-height:44vh}
  .sitenav .wrap{gap:.85rem}
  .nav-primary{gap:.1rem .85rem}
  .prose>p:first-of-type{font-size:1.06rem}
}