/* ═══════════════════════════════════════════════════════════
   PROTECTING SPECIES — elegiac redesign
   Hero (kept) · mournful intro · "The Roll Call" scroll memorial
   Deep black-green, lime as the single living accent, no red.
   ═══════════════════════════════════════════════════════════ */
:root{ --ps-ink:#060907; --ps-veil:rgba(6,9,7,0.0); }

/* ── HERO: full-bleed cinematic, matches the dark page ── */
.ps-hero{position:relative;min-height:96vh;display:flex;align-items:flex-end;overflow:hidden;background:var(--ps-ink)}
.ps-hero-img{position:absolute;inset:0;background-size:cover;background-position:center 38%;transform:scale(1.04);
  animation:psHeroDrift 18s ease-in-out infinite alternate}
@keyframes psHeroDrift{to{transform:scale(1.1)}}
.ps-hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,var(--ps-ink) 4%,rgba(6,9,7,0.45) 42%,rgba(6,9,7,0.25) 70%,rgba(6,9,7,0.55) 100%)}
.ps-hero-scrim::after{content:'';position:absolute;inset:0;
  background:radial-gradient(120% 90% at 25% 80%,transparent 45%,rgba(6,9,7,0.55))}
.ps-hero-grid{position:relative;z-index:2;width:100%;max-width:1280px;margin:0 auto;
  padding:0 clamp(1.5rem,5vw,5.5rem) clamp(3rem,8vh,6.5rem)}
.ps-hero-text{max-width:54rem}
.ps-hero-text .ps-hero-kicker{font-family:var(--font-sub);font-size:0.76rem;font-weight:700;letter-spacing:0.34em;
  text-transform:uppercase;color:var(--lime);display:flex;align-items:center;gap:0.9rem;margin-bottom:1.6rem}
.ps-hero-text .ps-hero-kicker::before{content:'';width:46px;height:1px;background:var(--lime)}
.ps-hero-text h1{font-family:var(--font-head);font-weight:800;font-size:clamp(3.4rem,9vw,8.5rem);line-height:0.86;
  text-transform:uppercase;color:#fff;letter-spacing:-0.025em;margin-bottom:1.8rem;text-shadow:0 8px 50px rgba(0,0,0,0.5)}
.ps-hero-text h1 .red{color:var(--lime)}
.ps-hero-quote{font-family:var(--font-accent);font-style:italic;font-weight:500;font-size:clamp(1.25rem,2.1vw,1.9rem);
  line-height:1.5;color:rgba(238,244,232,0.92);max-width:34ch;border-left:2px solid var(--lime);padding-left:1.4rem;
  text-shadow:0 2px 22px rgba(0,0,0,0.55)}
/* legacy contained-photo node, hidden in full-bleed hero */
.ps-hero-photo{display:none}
@media(max-width:860px){
  .ps-hero{min-height:88vh}
  .ps-hero-grid{padding:0 1.5rem 3.5rem}
}

/* ── MOURNFUL INTRO STATEMENT ── */
.ps-intro{background:var(--ps-ink);padding:clamp(5rem,12vw,11rem) clamp(1.5rem,5vw,5rem) clamp(3rem,7vw,6rem)}
.ps-intro-inner{max-width:1080px;margin:0 auto}
.ps-intro-eyebrow{font-family:var(--font-sub);font-size:0.72rem;font-weight:700;letter-spacing:0.34em;text-transform:uppercase;
  color:var(--lime);display:flex;align-items:center;gap:0.9rem;margin-bottom:2.4rem}
.ps-intro-eyebrow::before{content:'';width:42px;height:1px;background:var(--lime)}
.ps-intro-statement{font-family:var(--font-head);font-weight:300;font-size:clamp(1.7rem,3.6vw,3.1rem);line-height:1.28;
  letter-spacing:-0.015em;color:rgba(238,244,232,0.66);text-wrap:balance;max-width:24ch}
.ps-intro-statement .em{color:#fff;font-weight:600}
.ps-intro-foot{margin-top:clamp(2.4rem,4.5vw,3.8rem);padding-top:clamp(1.6rem,3vw,2.4rem);border-top:1px solid var(--border);
  font-family:var(--font-accent);font-style:italic;font-size:clamp(1.15rem,2vw,1.7rem);line-height:1.5;
  color:rgba(238,244,232,0.62);max-width:54ch;display:none}
.ps-intro-foot .em{color:var(--lime);font-style:normal;font-family:var(--font-head);font-weight:700;
  text-transform:uppercase;letter-spacing:-0.01em}

/* ═══════════ CINEMATIC "MOVIE" BAND ═══════════ */
.ps-movie{position:relative;min-height:108vh;display:flex;align-items:center;overflow:hidden;background:var(--ps-ink)}
.ps-movie-media{position:absolute;inset:-6% 0;z-index:0;background-size:cover;background-position:center 42%;
  transform:scale(1.02);animation:psKenBurns 26s ease-in-out infinite alternate;
  filter:grayscale(0.35) brightness(0.5) contrast(1.05)}
@keyframes psKenBurns{from{transform:scale(1.02) translate3d(0,0,0)}to{transform:scale(1.16) translate3d(-2%,-2%,0)}}
.ps-movie-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(6,9,7,0.92) 0%,rgba(6,9,7,0.6) 42%,rgba(6,9,7,0.3) 72%,rgba(6,9,7,0.55) 100%)}
.ps-movie-scrim::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,var(--ps-ink) 1%,transparent 22%,transparent 80%,rgba(6,9,7,0.7) 100%)}
.ps-movie-inner{position:relative;z-index:2;max-width:1280px;width:100%;margin:0 auto;padding:0 clamp(1.5rem,5vw,5.5rem)}
.ps-movie-eyebrow{font-family:var(--font-sub);font-size:0.74rem;font-weight:700;letter-spacing:0.32em;text-transform:uppercase;
  color:var(--lime);display:flex;align-items:center;gap:0.9rem;margin-bottom:2rem;
  opacity:0;transform:translateY(20px);transition:opacity 1s ease,transform 1s cubic-bezier(0.16,1,0.3,1)}
.ps-movie-eyebrow::before{content:'';width:46px;height:1px;background:var(--lime)}
.ps-movie.in .ps-movie-eyebrow{opacity:1;transform:none}
.ps-movie-lines{font-family:var(--font-head);font-weight:800;text-transform:uppercase;letter-spacing:-0.025em;
  line-height:0.96;color:#fff;margin:0}
.ps-movie-lines .ml{display:block;overflow:hidden;font-size:clamp(2.6rem,7vw,6.4rem)}
.ps-movie-lines .ml > i{display:block;font-style:normal;transform:translateY(112%);
  transition:transform 1.05s cubic-bezier(0.16,1,0.3,1)}
.ps-movie.in .ps-movie-lines .ml > i{transform:none}
.ps-movie.in .ps-movie-lines .ml:nth-child(2) > i{transition-delay:0.16s}
.ps-movie.in .ps-movie-lines .ml:nth-child(3) > i{transition-delay:0.32s}
.ps-movie-coda{margin-top:clamp(2rem,4vw,3.4rem);max-width:30ch;font-family:var(--font-accent);font-style:italic;
  font-weight:500;font-size:clamp(1.4rem,2.6vw,2.4rem);line-height:1.4;color:rgba(238,244,232,0.88);
  opacity:0;transform:translateY(24px);transition:opacity 1.2s ease 0.7s,transform 1.2s cubic-bezier(0.16,1,0.3,1) 0.7s}
.ps-movie-coda .alive{color:var(--lime);font-style:normal;font-family:var(--font-head);font-weight:800;
  text-transform:uppercase;letter-spacing:-0.01em}
.ps-movie.in .ps-movie-coda{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .ps-movie-media{animation:none}
  .ps-movie-lines .ml > i,.ps-movie-eyebrow,.ps-movie-coda{transform:none!important;opacity:1!important}
}
@media(max-width:760px){.ps-movie{min-height:92vh}.ps-movie-lines .ml{font-size:clamp(2.2rem,9vw,3.4rem)}}
/* reveal */
.ps-intro-statement .ln{display:block;overflow:hidden}
.ps-intro-statement .ln > i{display:block;font-style:inherit;transform:translateY(110%);opacity:0;
  transition:transform 1s cubic-bezier(0.16,1,0.3,1),opacity 1s ease}
.ps-intro.in .ps-intro-statement .ln > i{transform:none;opacity:1}
.ps-intro.in .ps-intro-statement .ln:nth-child(2) > i{transition-delay:0.09s}
.ps-intro.in .ps-intro-statement .ln:nth-child(3) > i{transition-delay:0.18s}
.ps-intro.in .ps-intro-statement .ln:nth-child(4) > i{transition-delay:0.27s}
.ps-intro.in .ps-intro-statement .ln:nth-child(5) > i{transition-delay:0.36s}
.ps-intro-foot{opacity:0;transition:opacity 1.1s ease 0.5s}
.ps-intro.in .ps-intro-foot{opacity:1}

/* ═══════════ THE ROLL CALL ═══════════ */
.roll{position:relative;background:var(--ps-ink);border-top:1px solid var(--border);
  padding:0 clamp(1.5rem,5vw,5rem)}
.roll-head{max-width:1280px;margin:0 auto;padding:clamp(2.5rem,5vw,4rem) 0 0}
.roll-eyebrow{font-family:var(--font-sub);font-size:0.72rem;font-weight:700;letter-spacing:0.3em;text-transform:uppercase;
  color:var(--lime);display:flex;align-items:center;gap:0.8rem;margin-bottom:1.4rem}
.roll-eyebrow::before{content:'';width:36px;height:1px;background:var(--lime)}
.roll-title{font-family:var(--font-head);font-weight:800;font-size:clamp(2.4rem,5.6vw,4.8rem);line-height:0.96;
  text-transform:uppercase;color:#fff;letter-spacing:-0.025em}
.roll-title .green{color:var(--lime)}
.roll-sub{font-family:var(--font-accent);font-style:italic;font-size:clamp(1.05rem,1.6vw,1.4rem);
  color:rgba(238,244,232,0.55);margin-top:1rem;max-width:46ch}

.roll-inner{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:200px 1fr;gap:clamp(2rem,5vw,5rem);
  align-items:start}

/* sticky index */
.roll-index{position:sticky;top:92px;height:calc(100vh - 92px);display:flex;flex-direction:column;justify-content:center;gap:0.2rem;z-index:1;background:transparent}
.roll-ix{display:flex;align-items:baseline;gap:0.8rem;padding:0.7rem 0;background:none;border:none;cursor:pointer;
  text-align:left;width:100%;border-top:1px solid var(--border);transition:padding-left 0.4s cubic-bezier(0.16,1,0.3,1)}
.roll-ix:last-child{border-bottom:1px solid var(--border)}
.roll-ix .rix-n{font-family:var(--font-sub);font-size:0.66rem;font-weight:700;letter-spacing:0.1em;
  color:rgba(200,220,192,0.35);font-variant-numeric:tabular-nums;transition:color 0.4s}
.roll-ix .rix-name{font-family:var(--font-head);font-weight:800;font-size:1.05rem;text-transform:uppercase;
  letter-spacing:-0.01em;color:rgba(238,244,232,0.4);transition:color 0.4s}
.roll-ix:hover .rix-name{color:rgba(238,244,232,0.75)}
.roll-ix.active{padding-left:0.7rem}
.roll-ix.active .rix-n{color:var(--lime)}
.roll-ix.active .rix-name{color:#fff}

/* bands */
.roll-bands{min-width:0}
.band{position:relative;min-height:92vh;display:grid;grid-template-columns:1fr 1fr;align-items:center;
  gap:clamp(1.5rem,3vw,3.5rem);padding:8vh 0}
.band + .band{border-top:1px solid rgba(255,255,255,0.05)}
.band.flip .band-animal{order:2}
.band.flip .band-text{order:1}

.band-animal{position:relative;display:flex;align-items:center;justify-content:center;min-height:46vh}
/* SVG ghost number — clean rounded outline, no -webkit-text-stroke creases */
.band-ghost{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(94%,40rem);height:auto;
  z-index:0;pointer-events:none;overflow:visible}
.band-ghost text{font-family:var(--font-head);font-weight:800;font-size:170px;letter-spacing:-6px;
  text-anchor:middle;dominant-baseline:central;fill:none;stroke:rgba(237,242,232,0.07);stroke-width:1.3;
  stroke-linejoin:round;paint-order:stroke;transition:stroke 1.8s ease}
.band.in-view .band-ghost text{stroke:rgba(186,222,158,0.36)}
.band-halo{position:absolute;left:50%;top:50%;width:92%;aspect-ratio:1;transform:translate(-50%,-50%) scale(0.7);
  border-radius:50%;background:radial-gradient(circle,rgba(186,222,158,0.13) 0%,rgba(186,222,158,0) 60%);
  opacity:0;transition:opacity 1.1s ease,transform 1.2s cubic-bezier(0.16,1,0.3,1);z-index:0}
.band-animal img{position:relative;z-index:1;max-width:100%;width:100%;height:auto;display:block;
  /* vanishing: dim + desaturated until the band is in view */
  filter:grayscale(0.92) brightness(0.5) contrast(1.02);opacity:0.34;transform:scale(0.96) translateY(20px);
  transition:filter 2.2s ease,opacity 2.2s ease,transform 2.4s cubic-bezier(0.16,1,0.3,1);
  -webkit-filter:grayscale(0.92) brightness(0.5) contrast(1.02)}
.band.in-view .band-animal img{filter:none;-webkit-filter:drop-shadow(0 30px 60px rgba(0,0,0,0.55));opacity:1;transform:none}
.band.in-view .band-ghost{-webkit-text-stroke-color:rgba(186,222,158,0.38)}
.band-halo{transition:opacity 2s ease,transform 2.2s cubic-bezier(0.16,1,0.3,1)}

/* rhino: cutout on one side, gradient photo behind the text on the other */
.band--rhino .band-text{position:relative;max-width:none;justify-self:stretch;align-self:stretch;
  padding:clamp(2.4rem,4vw,4rem) clamp(1.8rem,3.5vw,3.6rem);display:flex;flex-direction:column;justify-content:center}
.band--rhino .band-photo{position:absolute;inset:0;z-index:0;overflow:hidden}
.band-text > .band-photo{opacity:1;transform:none;transition:none}
.band--rhino .band-photo img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(0.55) brightness(0.5) contrast(1.05);opacity:0.4;transform:scale(1.06);
  transition:filter 2.2s ease,opacity 2.2s ease,transform 2.4s cubic-bezier(0.16,1,0.3,1);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,0.45) 26%,#000 60%);
          mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,0.45) 26%,#000 60%)}
.band--rhino.in-view .band-photo img{filter:grayscale(0.12) brightness(0.92) contrast(1.04);opacity:1;transform:none}
.band--rhino .band-photo::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--ps-ink),transparent 36%),linear-gradient(0deg,rgba(6,9,7,0.5),transparent 58%)}
.band--rhino .band-text > *:not(.band-photo){position:relative;z-index:2}
.band--rhino .band-name,.band--rhino .band-line{text-shadow:0 2px 22px rgba(0,0,0,0.6)}
.band.in-view .band-halo{opacity:1;transform:translate(-50%,-50%) scale(1)}

.band-text{max-width:30rem}
.band.flip .band-text{justify-self:end}
.band-idx{font-family:var(--font-sub);font-size:0.68rem;font-weight:700;letter-spacing:0.18em;color:rgba(200,220,192,0.4);
  font-variant-numeric:tabular-nums;margin-bottom:1.4rem;display:block}
.band-eyebrow{font-family:var(--font-sub);font-size:0.72rem;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--lime);display:flex;align-items:center;gap:0.7rem;margin-bottom:1rem}
.band-eyebrow::before{content:'';width:26px;height:1px;background:var(--lime)}
.band-name{font-family:var(--font-head);font-weight:800;font-size:clamp(3.8rem,8.5vw,8rem);line-height:0.84;
  text-transform:uppercase;color:#fff;letter-spacing:-0.03em;margin-bottom:1.6rem}
.band-line{font-family:var(--font-accent);font-style:italic;font-weight:500;font-size:clamp(1.55rem,2.8vw,2.6rem);
  line-height:1.36;color:rgba(238,244,232,0.92);margin-bottom:2.4rem;text-wrap:pretty}
.band-stat{display:flex;align-items:baseline;gap:1.1rem;border-top:1px solid var(--border);padding-top:1.5rem;margin-bottom:1.9rem}
.band-stat .n{font-family:var(--font-head);font-weight:800;font-size:clamp(3.8rem,7vw,6rem);line-height:0.8;
  color:var(--lime);letter-spacing:-0.04em;font-variant-numeric:tabular-nums;white-space:nowrap}
.band-stat .n small{font-size:0.42em;font-weight:700}
.band-stat.word .n{font-size:clamp(1.7rem,3.2vw,2.7rem);line-height:1}
.band-stat .l{font-family:var(--font-body);font-weight:300;font-size:0.98rem;line-height:1.45;color:rgba(200,220,192,0.62);max-width:22ch}
.band-more{align-self:start;font-family:var(--font-sub);font-size:0.72rem;font-weight:700;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--lime);background:none;border:none;cursor:pointer;padding:0 0 0.3rem;
  display:inline-flex;align-items:center;gap:0.55rem;border-bottom:1px solid rgba(186,222,158,0.32);transition:gap 0.3s,border-color 0.3s}
.band-more:hover{gap:0.9rem;border-bottom-color:var(--lime)}
.band-more .chev{transition:transform 0.35s}
.band-more[aria-expanded="true"] .chev{transform:rotate(90deg)}
.band-account{max-height:0;overflow:hidden;transition:max-height 0.6s ease,margin 0.5s ease;margin-top:0}
.band-account.open{max-height:600px;margin-top:1.4rem}
.band-account p{font-family:var(--font-body);font-weight:300;font-size:0.97rem;line-height:1.78;color:var(--text-body);
  border-left:1px solid var(--lime);padding-left:1.1rem;max-width:40ch}
/* read-more teaser */
.band-teaser{font-family:var(--font-body);font-weight:300;font-size:0.98rem;line-height:1.7;
  color:rgba(208,224,200,0.72);max-width:42ch;margin-bottom:1.1rem}
.band-teaser .tz-ell{color:rgba(186,222,158,0.85)}
.band-text.reading .band-teaser{display:none}

/* entrance for text */
.band-text > *{opacity:0;transform:translateY(28px);transition:opacity 0.9s ease,transform 1s cubic-bezier(0.16,1,0.3,1)}
.band.in-view .band-text > *{opacity:1;transform:none}
.band.in-view .band-text > *:nth-child(2){transition-delay:0.06s}
.band.in-view .band-text > *:nth-child(3){transition-delay:0.12s}
.band.in-view .band-text > *:nth-child(4){transition-delay:0.18s}
.band.in-view .band-text > *:nth-child(5){transition-delay:0.24s}
.band.in-view .band-text > *:nth-child(6){transition-delay:0.3s}

@media(prefers-reduced-motion:reduce){
  .band-animal img{filter:none!important;-webkit-filter:none!important;opacity:1!important;transform:none!important}
  .band-text > *,.ps-intro-statement .ln > i,.ps-intro-foot{opacity:1!important;transform:none!important}
}

/* ── mobile ── */
@media(max-width:900px){
  .roll-inner{grid-template-columns:1fr;gap:0}
  .roll-index{position:sticky;top:72px;height:auto;flex-direction:row;gap:0.4rem;overflow-x:auto;
    justify-content:flex-start;padding:0.8rem 0;background:rgba(6,9,7,0.92);backdrop-filter:blur(8px);z-index:40;
    border-bottom:1px solid var(--border)}
  .roll-ix{width:auto;border:1px solid var(--border);border-radius:999px;padding:0.45rem 0.9rem;flex:0 0 auto}
  .roll-ix:last-child{border-bottom:1px solid var(--border)}
  .roll-ix.active{padding-left:0.9rem;background:rgba(186,222,158,0.1)}
  .roll-ix .rix-name{font-size:0.85rem}
  .band{grid-template-columns:1fr;min-height:auto;padding:5vh 0;gap:1.5rem;text-align:left}
  .band.flip .band-animal{order:0}
  .band.flip .band-text{order:0;justify-self:start}
  .band-animal{min-height:36vh}
  .band-ghost{font-size:clamp(7rem,30vw,12rem)}
  .band-text{max-width:none}
}