/* ═══════════════════════════════════════════════════════════════════════
   Simplified news section.
   REPLACES the earlier news-section rules. Append after brand-pass.css.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── photo masthead band ────────────────────────────────────────────── */
.page-band{position:relative;background:var(--navy);color:#fff;
  padding:clamp(3rem,8vw,5.5rem) 0 clamp(2.4rem,6vw,4rem)}
.page-band::before{content:"";position:absolute;inset:0;
  background-image:var(--band-image,none);background-size:cover;
  background-position:center 40%;opacity:.5}
.page-band::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(16,41,59,.4),rgba(16,41,59,.88))}
.page-band .shell{position:relative;z-index:1}
.page-band__h{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(2.2rem,7vw,4rem);line-height:1;letter-spacing:.01em;margin:0 0 .8rem}
.page-band__sub{max-width:44ch;font-size:clamp(1rem,2.2vw,1.18rem);line-height:1.5;
  color:rgba(255,255,255,.88);margin:0}

/* ── lead story ─────────────────────────────────────────────────────── */
.lead{background:var(--sand);padding:clamp(2.2rem,5vw,3.4rem) 0;border-bottom:0}
.lead__main{max-width:60ch}
.lead__kicker{font:600 .7rem/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 .85rem;display:block}
.lead__h{font-family:var(--display);font-weight:700;
  font-size:clamp(1.7rem,4.4vw,2.7rem);line-height:1.08;letter-spacing:-.015em;
  margin:0 0 1rem}
.lead__h a{text-decoration:none}
.lead__h a:hover{color:var(--coastal)}
.lead__sum{font-size:1.08rem;line-height:1.62;color:var(--ink-soft);margin:0 0 1.2rem}
.lead__more{font:700 .72rem/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;color:var(--navy);
  border-bottom:2px solid var(--gold);padding-bottom:.3rem}
.lead__more:hover{color:var(--coastal);border-bottom-color:var(--coastal)}

/* ── story list ─────────────────────────────────────────────────────── */
.news-body{display:grid;grid-template-columns:1fr 260px;
  gap:clamp(2rem,5vw,4rem);align-items:start;padding:clamp(2rem,5vw,3.2rem) 0 4rem}
.section-h{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:.8rem;letter-spacing:.2em;color:var(--ink-soft);
  margin:0 0 .3rem;padding-bottom:.6rem;border-bottom:2px solid var(--navy)}

/* The link through to /aspn-news/ under the three-post pointer on /news/.
   Reads as a continuation of the list rather than a button. */
.section-more{margin:0 0 2.5rem;font:700 .8rem/1 var(--ui);letter-spacing:.06em;
  text-transform:uppercase}
.section-more a{color:var(--coastal);text-decoration:none}
.section-more a:hover{color:var(--navy);text-decoration:underline}

.stories{list-style:none;padding:0;margin:0}
.story{padding:1.4rem 0;border-bottom:1px solid var(--line)}
.story time{display:block;font:600 .66rem/1 var(--ui);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:.4rem}
.story h3{margin:0 0 .4rem;font-family:var(--display);font-weight:600;
  font-size:1.22rem;line-height:1.3;letter-spacing:-.008em}
.story h3 a{text-decoration:none}
.story h3 a:hover{color:var(--coastal)}
.story p{margin:0 0 .35rem;font-size:.96rem;line-height:1.55;color:var(--ink-soft);
  max-width:64ch}
.via{font:400 .72rem/1 var(--ui);color:var(--ink-soft);opacity:.72;font-style:italic}

.more-link{margin:2rem 0 0;padding-top:1.4rem;border-top:2px solid var(--navy)}
.more-link a{font:700 .74rem/1 var(--ui);letter-spacing:.13em;text-transform:uppercase;
  text-decoration:none;color:var(--navy)}
.more-link a:hover{color:var(--coastal)}

/* ── sidebar ────────────────────────────────────────────────────────── */
.news-aside{position:sticky;top:1.5rem}
.news-aside .aside h2{font-family:var(--display);font-weight:700;font-size:.72rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--navy);
  margin:0 0 .8rem;padding-bottom:.5rem;border-bottom:2px solid var(--navy)}
.plain{list-style:none;padding:0;margin:0}
.plain li{border-bottom:1px solid var(--line)}
.plain a{display:block;padding:.62rem 0;text-decoration:none;font-size:.96rem;
  font-family:var(--display);font-weight:500}
.plain a:hover{color:var(--coastal)}

.signup{background:var(--navy);color:#fff;padding:1.4rem;margin-top:2rem}
.signup h2{color:#fff!important;border-bottom-color:rgba(255,255,255,.25)!important}
.signup p{font-size:.9rem;line-height:1.5;color:rgba(255,255,255,.78);margin:0 0 .9rem}
.signup__form{display:flex;flex-direction:column;gap:.5rem}
.signup input{padding:.6rem .7rem;border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.08);color:#fff;font:400 .9rem/1.3 var(--ui);border-radius:2px}
.signup input::placeholder{color:rgba(255,255,255,.5)}
.signup input:focus{outline:2px solid var(--gold);outline-offset:-1px}
.signup .btn{width:100%;text-align:center;border:0;cursor:pointer;font-family:var(--ui)}

.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}

@media(max-width:860px){
  .news-body{grid-template-columns:1fr}
  .news-aside{position:static;padding-top:1rem}
}

/* ── short page band for interior pages ─────────────────────────────── */
.page-band--short{padding:clamp(2rem,5vw,3.2rem) 0 clamp(1.5rem,3.5vw,2.2rem)}
.page-band--short::before{opacity:0}
.page-band__eyebrow{font:600 .66rem/1 var(--ui);letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.6);margin:0 0 .9rem}
.page-band__eyebrow a{color:var(--gold);text-decoration:none}

/* archive list: quieter source line, no badges */
.e .via{display:block;margin-top:.25rem}

/* ── fisheries index (Design port) ──────────────────────────────────── */
.fish-index{background:var(--paper);padding:clamp(2.8rem,7vw,5rem) 0}
.fish-index__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:2rem}
.fish-card{display:block;background:var(--paper);border:1px solid var(--line);
  text-decoration:none;overflow:hidden;transition:box-shadow 200ms ease-out,
  transform 200ms ease-out}
.fish-card:hover{box-shadow:0 8px 24px rgba(16,41,59,.12);transform:translateY(-2px)}
.fish-card__media{position:relative;display:flex;align-items:center;
  justify-content:center;height:200px;background:var(--navy-mid);overflow:hidden}
/* One width for every card, so the fish sit at a consistent scale rather than each
   filling its own box. Each species stays identifiable and the cards still read
   as a set. */
.fish-card__fish{display:block;width:180px;height:auto}
.fish-card__badge{position:absolute;top:1rem;right:1rem;background:var(--gold);color:#fff;
  padding:.4rem .75rem;font:700 .69rem/1 var(--ui);letter-spacing:.05em;
  text-transform:uppercase}
.fish-card__body{display:block;padding:1.75rem}
.fish-card__h{display:block;font-family:var(--display);font-weight:700;color:var(--navy);
  font-size:1.375rem;line-height:1.25;letter-spacing:-.01em;margin-bottom:.35rem}
.fish-card__sci{display:block;font-style:italic;font-size:.85rem;color:var(--ink-soft);
  margin-bottom:.75rem}
.fish-card__desc{display:block;font-size:.875rem;line-height:1.65;color:var(--ink-soft);
  margin-bottom:1rem}
.fish-card__more{display:flex;align-items:center;gap:.5rem;font:600 .82rem/1 var(--ui);
  color:var(--sea)}
.fish-card:hover .fish-card__more{color:var(--coastal)}

.msb-note{margin-top:2.5rem;padding:1.8rem;background:var(--sand)}
.msb-note h2{margin:0 0 .9rem;font-size:1.1rem;letter-spacing:-.01em}
.msb-note p{margin:0 0 .8rem;font-size:.96rem;line-height:1.6;max-width:70ch;
  color:var(--ink-soft)}
.msb-note p:last-child{margin:0}
.msb-note a{color:var(--navy);font-weight:600}

/* ── species page (Design port) ─────────────────────────────────────── */
/* The silhouette is a picture of the fish, not a background: cropping it to a
   shallow band cuts the animal in half. It sits beside the heading instead, on
   the same navy the artwork is drawn on. The file's #1E4355 and --navy-mid's
   #1D4356 are one value per channel apart, so the join is invisible. */
.sp-hero{background:var(--navy-mid);color:#fff;padding:clamp(2.4rem,6vw,4rem) 0}
.sp-hero__in{display:grid;grid-template-columns:1fr auto;
  gap:clamp(1.5rem,4vw,3rem);align-items:center}
.sp-hero__text{min-width:0}
.sp-hero__fish{display:block;width:clamp(200px,26vw,320px);height:auto}
.sp-hero__eyebrow{margin:0 0 1rem;font:700 .72rem/1 var(--ui);letter-spacing:.09em;
  text-transform:uppercase}
.sp-hero__eyebrow a{color:var(--gold);text-decoration:none}
.sp-hero__h{font-family:var(--display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(2.1rem,5.6vw,4.5rem);line-height:1.15;margin:0 0 1.5rem;max-width:16ch}
.sp-hero__sub{margin:0;max-width:44ch;font-size:clamp(1rem,1.8vw,1.25rem);line-height:1.7;
  color:var(--sand)}

.sp-news{background:var(--paper);padding:clamp(2.8rem,7vw,5rem) 0}
.sp-news__h{font-family:var(--display);font-weight:700;color:var(--navy);
  letter-spacing:-.02em;font-size:clamp(1.9rem,4.6vw,3.2rem);line-height:1.2;
  margin:0 0 clamp(1.8rem,4vw,3.75rem)}
/* Sits directly under the heading, so it takes the heading's bottom margin
   and the heading loses it. Same muted treatment as the "via" credit. */
.sp-news__h:has(+ .sp-news__updated){margin-bottom:.5rem}
.sp-news__updated{margin:0 0 clamp(1.8rem,4vw,3.75rem);font:700 .75rem/1.4 var(--ui);
  letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);opacity:.75}
.sp-news__list{display:flex;flex-direction:column;gap:2rem;max-width:64rem}
.sp-news__item{padding-bottom:2rem;border-bottom:1px solid var(--line)}
.sp-news__date{margin:0 0 .75rem;font:700 .8rem/1 var(--ui);letter-spacing:.06em;
  text-transform:uppercase;color:var(--coastal)}
.sp-news__title{margin:0 0 1rem;font-size:clamp(1.25rem,2.6vw,1.75rem);line-height:1.3}
.sp-news__title a{color:var(--navy);text-decoration:none}
.sp-news__title a:hover{color:var(--coastal)}
.sp-news__sum{margin:0 0 1rem;font-size:1rem;line-height:1.7;color:var(--ink-soft)}
.sp-news__via{margin:0;font:700 .75rem/1.4 var(--ui);letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-soft);opacity:.75}
.sp-news__more{margin:2.5rem 0 0}
.sp-news__more a{color:var(--sea);font-weight:600}

.sp-about{background:var(--paper);padding:clamp(2.8rem,7vw,5rem) 0}
.sp-about__in{display:grid;grid-template-columns:2fr 1fr;gap:clamp(2rem,5vw,5rem);
  align-items:start}
.sp-about__h{font-family:var(--display);font-weight:700;color:var(--navy);
  letter-spacing:-.02em;font-size:clamp(1.7rem,3.8vw,3rem);line-height:1.2;margin:0 0 2rem}
.sp-facts{background:var(--sand);padding:2.5rem}
.sp-facts h3{margin:0 0 1rem;font:700 .8rem/1 var(--ui);letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-soft)}
.sp-facts h3+p{margin:0 0 2rem;font-size:1rem;line-height:1.7;color:var(--navy)}
.sp-facts__note{font-style:italic;font-size:.9rem!important;color:var(--ink-soft)!important}
.sp-facts__num{font-family:var(--display);font-weight:700;font-size:1.5rem;
  color:var(--coastal);margin:0 0 .5rem!important}
.sp-facts__range{font-size:.875rem!important;color:var(--ink-soft)!important}
.sp-facts a{color:var(--sea);font-weight:600}

.sp-join{background:var(--navy-mid);color:#fff;text-align:center;
  padding:clamp(3rem,7vw,6.25rem) 0}
.sp-join h2{font-family:var(--display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.8rem,4.2vw,3rem);line-height:1.2;margin:0 0 1.5rem}
.sp-join p{margin:0 0 2rem;font-size:1.125rem;color:var(--sand)}
.sp-join .btn{background:var(--gold);color:var(--navy);font-family:var(--ui);
  font-weight:700;text-transform:uppercase;font-size:.78rem;letter-spacing:.07em;
  padding:1rem 2.5rem}
.sp-join .btn:hover{background:#fff}

@media(max-width:860px){
  .sp-about__in{grid-template-columns:1fr}
  /* Fish above the heading, not beside it. */
  .sp-hero__in{grid-template-columns:1fr;justify-items:start}
  .sp-hero__fish{order:-1;width:clamp(180px,44vw,240px)}
}

/* ── ASPN post article ──────────────────────────────────────────────── */
.post__in{max-width:44rem}
.post__head{margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:1px solid var(--line)}
.post__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:0 0 1rem;
  font:500 .72rem/1 var(--ui);letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-soft)}
.post__h{margin:0 0 .9rem;font-family:var(--display);font-weight:700;color:var(--navy);
  letter-spacing:-.02em;font-size:clamp(1.7rem,4vw,2.6rem);line-height:1.2}
.post__byline{margin:0;font-size:.86rem;font-style:italic;color:var(--ink-soft)}
.post__image{display:block;width:100%;height:auto;margin:0 0 2rem}
.post__body{font-size:1.02rem;line-height:1.8}
.post__body h2{margin:2rem 0 .8rem;font-family:var(--display);font-weight:700;
  font-size:1.3rem;color:var(--navy)}
.post__body h3{margin:1.6rem 0 .6rem;font-family:var(--display);font-weight:700;
  font-size:1.1rem;color:var(--navy)}
.post__body p{margin:0 0 1.1rem}
.post__body ul,.post__body ol{margin:0 0 1.1rem;padding-left:1.3rem}
.post__body blockquote{margin:1.4rem 0;padding-left:1.2rem;
  border-left:3px solid var(--gold);font-style:italic;color:var(--ink-soft)}
.post__back{margin:2.5rem 0 0;padding-top:1.5rem;border-top:1px solid var(--line)}
.post__back a{color:var(--sea);font-weight:600}

/* ── source chip line ───────────────────────────────────────────────── */
.story__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;
  margin:0 0 .5rem}
.story__meta time{display:inline;margin:0}
.news-block__date,.sp-news__date{display:flex;flex-wrap:wrap;align-items:center;
  gap:.55rem}
.e__d{display:flex;flex-direction:column;align-items:flex-start;gap:.4rem}
.e__d .mark{font-size:.55rem;padding:.3em .45em}
@media(max-width:860px){
  .e__d{flex-direction:row;align-items:center;gap:.55rem}
}
.art__meta{align-items:center}

/* ASPN posts in the news list: small thumbnail, text flows beside it. Absent on
   syndicated items, which never have images, so the list stays uniform. */
.story--own .story__thumb{float:right;width:clamp(88px,22vw,132px);aspect-ratio:4/3;
  object-fit:cover;margin:0 0 .6rem 1.1rem}
.story--own::after{content:"";display:block;clear:both}

/* ── image credits ──────────────────────────────────────────────────── */
/* Quiet by design: attribution is an obligation to meet accurately, not
   something to draw the eye. Sits at the foot of the About page. */
.credits{background:var(--paper);padding:clamp(1.8rem,4vw,2.6rem) 0;
  border-top:1px solid var(--line)}
.credits__h{margin:0 0 .9rem;font:600 .7rem/1 var(--ui);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft)}
.credits__list{margin:0;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:.4rem;max-width:70ch}
.credits__list li{font:400 .82rem/1.5 var(--ui);color:var(--ink-soft)}
.credits__subject::after{content:" by "}
.credits__by a{color:var(--ink-soft);text-decoration:underline;
  text-underline-offset:.16em}
.credits__by a:hover{color:var(--coastal)}