.environmental-microscope-page,
.environmental-story-page {
  --em-ink: #f3f0e7;
  --em-muted: #b8c8be;
  --em-gold: #d8b457;
  --em-mint: #45d5a2;
  --em-deep: #061b13;
  --em-panel: #0d2b20;
  --em-line: rgba(216, 180, 87, .28);
  color: var(--em-ink);
  background:
    radial-gradient(circle at 82% 0, rgba(69, 213, 162, .12), transparent 28rem),
    linear-gradient(145deg, #06170f, #071d14 58%, #0b2419);
  min-height: 100vh;
}

.em-shell { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 42px 0 84px; }
.em-landing-hero,
.em-story-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr); gap: 32px; align-items: center; padding: clamp(26px, 4vw, 56px); border: 1px solid var(--em-line); border-radius: 30px; background: rgba(8, 37, 25, .82); overflow: hidden; }
.em-kicker { display: inline-flex; align-items: center; gap: 9px; color: var(--em-mint); font-weight: 800; font-size: .86rem; letter-spacing: .02em; }
.em-kicker::before { content: ""; width: 25px; height: 2px; background: currentColor; }
.em-landing-hero h1,
.em-story-hero h1 { margin: 14px 0; color: #fff; font-size: clamp(2rem, 5vw, 3.8rem); line-height: 1.18; }
.em-story-hero h1 { font-size: clamp(2rem, 4vw, 3.25rem); }
.em-landing-hero h2,
.em-story-hero h2 { margin: 0 0 16px; color: var(--em-gold); font-size: clamp(1rem, 2vw, 1.35rem); line-height: 1.7; }
.em-landing-hero p,
.em-story-hero p { margin: 0; color: var(--em-muted); font-size: clamp(1rem, 1.5vw, 1.14rem); line-height: 2; text-align: justify; }
.em-hero-visual { min-height: 360px; border-radius: 24px; overflow: hidden; position: relative; background: #102d21; }
.em-hero-visual img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; display: block; }
.em-hero-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(3, 16, 11, .64), transparent 55%); pointer-events: none; }
.em-hero-mark { position: absolute; z-index: 1; inset-inline-start: 20px; bottom: 18px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: 8px 13px; background: rgba(5,24,16,.72); color: #fff; font-size: .76rem; }
.em-snake-hero { min-height: 360px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 8px; position: relative; }
.em-snake-species { min-width: 0; margin: 0; position: relative; overflow: hidden; border: 1px solid rgba(216,180,87,.25); border-radius: 22px; background: #020b08; }
.em-snake-species img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; display: block; }
.em-snake-species figcaption { position: absolute; inset-inline: 0; bottom: 0; padding: 60px 14px 16px; background: linear-gradient(transparent,rgba(2,14,9,.94)); color: #fff; }
.em-snake-species figcaption b,
.em-snake-species figcaption span { display: block; line-height: 1.65; }
.em-snake-species figcaption span { max-height: 0; opacity: 0; overflow: hidden; color: #d9e4dc; font-size: .76rem; transition: max-height .25s ease,opacity .25s ease; }
.em-snake-species:hover figcaption span,
.em-snake-species:focus-visible figcaption span { max-height: 6rem; opacity: 1; }
.em-snake-species:focus-visible { outline: 2px solid var(--em-gold); outline-offset: 2px; }
.em-versus { align-self: center; z-index: 2; margin-inline: -28px; max-width: 96px; padding: 10px; border: 1px solid rgba(216,180,87,.55); border-radius: 999px; text-align: center; color: #fff; background: rgba(5,25,17,.94); font-size: .72rem; }
.em-philosophy { display: flex; justify-content: space-between; gap: 24px; margin: 24px 0 34px; padding: 21px 24px; border-inline-start: 3px solid var(--em-gold); background: rgba(255,255,255,.035); border-radius: 16px; }
.em-philosophy strong { color: var(--em-gold); }
.em-philosophy p { margin: 0; color: var(--em-muted); line-height: 1.9; }
.em-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.em-story-card { display: grid; grid-template-columns: 175px minmax(0, 1fr); min-height: 250px; border: 1px solid rgba(216,180,87,.2); border-radius: 24px; overflow: hidden; background: linear-gradient(150deg, rgba(17,55,40,.94), rgba(7,29,20,.98)); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.em-story-card:hover,
.em-story-card:focus-within { transform: translateY(-4px); border-color: rgba(216,180,87,.66); box-shadow: 0 18px 45px rgba(0,0,0,.22); }
.em-story-card figure { margin: 0; min-height: 100%; background: #071a12; }
.em-story-card img { width: 100%; height: 100%; min-height: 250px; object-fit: cover; display: block; }
.em-story-card-copy { padding: 24px; display: flex; flex-direction: column; align-items: flex-start; }
.em-tag { display: inline-flex; align-items: center; min-height: 29px; padding: 4px 11px; border: 1px solid rgba(69,213,162,.33); border-radius: 999px; color: var(--em-mint); background: rgba(69,213,162,.08); font-size: .73rem; font-weight: 800; }
.em-story-card h3 { margin: 15px 0 5px; color: #fff; font-size: clamp(1.2rem, 2.2vw, 1.65rem); line-height: 1.5; }
.em-species { color: var(--em-gold); font-size: .9rem; }
.em-story-card p { color: var(--em-muted); line-height: 1.8; margin: 12px 0 19px; }
.em-card-link,
.em-back-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: auto; min-height: 42px; padding: 8px 15px; border: 1px solid var(--em-line); border-radius: 999px; color: #fff; text-decoration: none; font-weight: 800; background: rgba(216,180,87,.08); }
.em-card-link:hover,
.em-card-link:focus-visible,
.em-back-link:hover,
.em-back-link:focus-visible { outline: none; border-color: var(--em-gold); background: rgba(216,180,87,.18); }
.em-status { min-height: 64px; display: grid; place-items: center; color: var(--em-muted); }

.environmental-subnav { position: sticky; top: var(--rushd-topbar-height, 74px); z-index: 48; border-bottom: 1px solid rgba(216,180,87,.22); background: rgba(4, 22, 14, .97); box-shadow: 0 12px 25px rgba(0,0,0,.16); }
.environmental-subnav[hidden] { display: none !important; }
.environmental-subnav-inner { width: min(1180px, calc(100% - 26px)); margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; padding: 10px 0; }
.environmental-subnav a { display: grid; grid-template-columns: 48px minmax(0,1fr); align-items: center; gap: 10px; min-height: 62px; padding: 7px; border: 1px solid transparent; border-radius: 15px; color: #d8e3dc; text-decoration: none; }
.environmental-subnav a:hover,
.environmental-subnav a:focus-visible { outline: none; color: #fff; border-color: var(--em-line, rgba(216,180,87,.35)); background: rgba(216,180,87,.09); }
.environmental-subnav img { width: 48px; height: 48px; object-fit: cover; border-radius: 11px; }
.environmental-subnav b { display: block; font-size: .82rem; line-height: 1.55; }
.environmental-subnav small { display: block; margin-top: 2px; color: #9db0a4; font-size: .68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.em-story-main { margin-top: 26px; display: grid; gap: 20px; }
.em-content-card { border: 1px solid rgba(216,180,87,.17); border-radius: 24px; padding: clamp(23px, 4vw, 42px); background: rgba(12,43,31,.78); }
.em-content-card[data-kind="quote"] { text-align: center; border-color: rgba(216,180,87,.5); background: linear-gradient(145deg, rgba(216,180,87,.13), rgba(12,43,31,.85)); }
.em-content-card[data-kind="guidance"] { border-inline-start: 4px solid var(--em-gold); }
.em-content-card h2 { margin: 0 0 12px; color: #fff; font-size: clamp(1.35rem, 2.5vw, 2rem); line-height: 1.55; }
.em-content-card .em-summary { color: var(--em-mint); font-weight: 700; }
.em-content-card p { max-width: 76ch; color: #ced8d1; font-size: 1rem; line-height: 2; text-align: justify; margin: 10px 0 0; }
.em-content-card[data-kind="quote"] p { margin-inline: auto; text-align: center; font-size: 1.12rem; }
.em-content-card ul { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.em-content-card li { padding: 11px 14px; border-radius: 13px; color: #dce6df; background: rgba(255,255,255,.045); }
.em-source-link { display: inline-flex; margin-top: 18px; color: var(--em-gold); font-weight: 800; text-underline-offset: 4px; }
.em-comparison { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-top: 20px; }
.em-comparison article { border: 1px solid rgba(69,213,162,.2); border-radius: 18px; padding: 18px; background: rgba(3,25,17,.45); }
.em-comparison h3 { margin: 0 0 12px; color: var(--em-mint); }
.em-comparison ul { grid-template-columns: 1fr; margin-top: 0; }
.em-network { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; margin-top: 24px; position: relative; }
.em-network span { display: grid; place-items: center; min-height: 88px; padding: 10px; text-align: center; border: 1px solid rgba(69,213,162,.25); border-radius: 50%; background: radial-gradient(circle, rgba(69,213,162,.17), rgba(8,35,24,.85)); color: #fff; font-weight: 800; }
.em-network::before { content: ""; position: absolute; left: 8%; right: 8%; top: 50%; border-top: 1px dashed rgba(216,180,87,.35); z-index: -1; }

.em-gallery-block { border: 1px solid rgba(216,180,87,.2); border-radius: 25px; padding: clamp(16px, 3vw, 28px); background: rgba(5,29,20,.84); }
.em-gallery-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.em-gallery-head h2 { margin: 0; font-size: clamp(1.2rem,2.3vw,1.75rem); color: #fff; }
.em-gallery-head small { color: var(--em-muted); }
.em-gallery { position: relative; overflow: hidden; border-radius: 19px; background: #020b08; outline: none; }
.em-gallery-stage { aspect-ratio: 16/9; position: relative; }
.em-gallery-slide { position: absolute; inset: 0; margin: 0; overflow: hidden; opacity: 0; visibility: hidden; transition: opacity .65s ease; }
.em-gallery-slide.active { opacity: 1; visibility: visible; }
.em-gallery--slide .em-gallery-slide { opacity: 1; transform: translateX(105%); transition: transform .55s ease; }
.em-gallery--slide .em-gallery-slide.active { transform: translateX(0); }
[dir="rtl"] .em-gallery--slide .em-gallery-slide { transform: translateX(-105%); }
[dir="rtl"] .em-gallery--slide .em-gallery-slide.active { transform: translateX(0); }
.em-gallery-slide img { width: 100%; height: 100%; object-fit: contain; display: block; background: #020b08; }
.em-gallery--sheet .em-gallery-stage { aspect-ratio: 1; }
.em-gallery--sheet .em-gallery-sheet-image { position: absolute; inset: 0 auto auto 0; width: 200%; max-width: none; height: auto; object-fit: initial; }
.em-gallery--sheet .em-gallery-sheet-image[data-sheet-panel="1"] { transform: translateX(-50%); }
.em-gallery--sheet .em-gallery-sheet-image[data-sheet-panel="2"] { transform: translateY(-50%); }
.em-gallery--sheet .em-gallery-sheet-image[data-sheet-panel="3"] { transform: translate(-50%,-50%); }
.em-gallery-slide figcaption { position: absolute; inset-inline: 0; bottom: 0; padding: 54px 18px 14px; color: #fff; background: linear-gradient(transparent, rgba(1,10,7,.9)); }
.em-gallery-slide figcaption b,
.em-gallery-slide figcaption small { display: block; line-height: 1.65; }
.em-gallery-slide figcaption small { color: #c8d4cc; font-size: .72rem; }
.em-gallery-source { display: inline-flex; margin-top: 4px; color: #f0cf7c; font-size: .72rem; text-underline-offset: 3px; }
.em-gallery-controls { position: absolute; z-index: 3; inset-inline: 12px; top: 50%; transform: translateY(-50%); display: flex; justify-content: space-between; pointer-events: none; }
.em-gallery-controls button { pointer-events: auto; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.32); border-radius: 50%; color: #fff; background: rgba(3,19,13,.74); cursor: pointer; font-size: 1.2rem; }
.em-gallery-controls button:focus-visible { outline: 2px solid var(--em-gold); outline-offset: 2px; }
.em-gallery-dots { display: flex; justify-content: center; gap: 8px; padding: 12px; }
.em-gallery-dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: #64776c; cursor: pointer; }
.em-gallery-dots button.active { width: 26px; border-radius: 999px; background: var(--em-gold); }
.em-gallery-toggle { display: block; min-height: 38px; margin: 0 auto 12px; padding: 6px 15px; border: 1px solid rgba(216,180,87,.4); border-radius: 999px; color: #fff; background: rgba(216,180,87,.09); cursor: pointer; font-weight: 800; }
.em-gallery-toggle:hover,
.em-gallery-toggle:focus-visible { outline: 2px solid var(--em-gold); outline-offset: 2px; background: rgba(216,180,87,.18); }
.em-gallery-note { margin: 11px 3px 0; color: #aebeb4; font-size: .78rem; line-height: 1.8; }
.em-gallery-note strong { color: var(--em-gold); }

.em-sources { display: grid; gap: 10px; }
.em-sources a { display: flex; justify-content: space-between; gap: 14px; padding: 14px 16px; border: 1px solid rgba(216,180,87,.16); border-radius: 14px; color: #dfe8e2; text-decoration: none; background: rgba(255,255,255,.03); }
.em-sources a:hover,
.em-sources a:focus-visible { outline: none; border-color: var(--em-gold); color: #fff; }
@media (max-width: 900px) {
  .em-landing-hero,
  .em-story-hero { grid-template-columns: 1fr; }
  .em-hero-visual,
  .em-hero-visual img { min-height: 280px; }
  .em-snake-hero,
  .em-snake-species img { min-height: 300px; }
  .em-card-grid { grid-template-columns: 1fr; }
  .environmental-subnav-inner { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .em-network { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 620px) {
  .em-shell { width: min(100% - 20px, 1180px); padding-top: 20px; }
  .em-landing-hero,
  .em-story-hero { padding: 22px; border-radius: 22px; }
  .em-philosophy { display: block; }
  .em-story-card { grid-template-columns: 1fr; }
  .em-story-card figure,
  .em-story-card img { min-height: 210px; max-height: 260px; }
  .em-snake-hero { grid-template-columns: 1fr 1fr; }
  .em-versus { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%,-50%); margin: 0; }
  .em-snake-species figcaption span { max-height: 6rem; opacity: 1; }
  .environmental-subnav { max-height: min(70vh, 390px); overflow: auto; }
  .environmental-subnav-inner { grid-template-columns: 1fr; }
  .environmental-subnav a { min-height: 58px; }
  .em-content-card ul,
  .em-comparison { grid-template-columns: 1fr; }
  .em-network { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .em-gallery-stage { aspect-ratio: 4/3; }
  .em-gallery--sheet .em-gallery-stage { aspect-ratio: 1; }
  .em-gallery-slide figcaption { padding-inline: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .em-story-card,
  .em-gallery-slide { transition: none !important; }
}