/*
  DINO NEWS — Shared Editorial Theme
  ----------------------------------
  Applied across:
  Home, Discoveries, Breakthroughs, Museums, Media, Dinopedia,
  article/detail pages, and embedded app surfaces.

  Visual direction:
  Natural-history newsroom with a light editorial canvas,
  dark institutional anchors, and the original Dino News green.
*/

/* ── Tokens ─────────────────────────────────────────────────────────────── */

:root {
  /* Light editorial canvas */
  --bg-main: #f3f2e9;
  --bg-main-soft: #faf9f4;
  --bg-card: rgba(255, 255, 255, 0.94);
  --bg-card-solid: #ffffff;
  --bg-card-hover: #ffffff;
  --bg-subtle: #eef2e9;

  /* Original Dino News green */
  --accentMain: #5d9c59;
  --accentMainDark: #3f743d;
  --accentMainStrong: #315f30;
  --accentMainSoft: rgba(93, 156, 89, 0.12);
  --accentMainFaint: rgba(93, 156, 89, 0.07);

  /* Supporting colors */
  --accentGold: #b37b35;
  --accentGoldSoft: rgba(179, 123, 53, 0.12);
  --accentOrange: #d56732;
  --accentBlue: #317f93;
  --accentPurple: #76548d;
  --accentRed: #a95757;

  /* Editorial ink */
  --textWhite: #18231c;
  --textStrong: #18231c;
  --textMuted: #657168;
  --textFaint: #88918a;
  --textInverse: rgba(255, 255, 255, 0.94);
  --textInverseMuted: rgba(255, 255, 255, 0.68);

  /* Structural anchors */
  --navDark: #1b2a22;
  --navDarkSoft: #24372c;
  --footerDark: #1a2921;

  /* Lines and borders */
  --borderDim: rgba(24, 35, 28, 0.13);
  --borderSoft: rgba(24, 35, 28, 0.08);
  --borderStrong: rgba(24, 35, 28, 0.21);
  --borderHighlight: rgba(93, 156, 89, 0.65);

  /* Elevation */
  --shadowSoft: 0 8px 24px rgba(28, 43, 32, 0.07);
  --shadowCard: 0 14px 34px rgba(28, 43, 32, 0.1);
  --shadowHover: 0 18px 42px rgba(28, 43, 32, 0.14);
  --shadowNav: 0 8px 28px rgba(18, 31, 23, 0.15);

  --radius: 8px;
  --container: 1200px;
}


/* ── Reset and document foundation ─────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  color-scheme: light;
  background: var(--bg-main);
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--textStrong);
  background:
    radial-gradient(
      circle at 8% 0%,
      rgba(93, 156, 89, 0.11),
      transparent 30rem
    ),
    radial-gradient(
      circle at 96% 12%,
      rgba(179, 123, 53, 0.07),
      transparent 27rem
    ),
    linear-gradient(
      180deg,
      var(--bg-main-soft),
      var(--bg-main)
    );
  font-family:
    "Inter",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  transition:
    background-color 250ms ease,
    color 250ms ease;
}

/*
  Very subtle document-grid texture.
  This keeps the page from feeling sterile without returning to the cave.
*/
body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  content: "";
  pointer-events: none;
  opacity: 0.24;
  background-image:
    linear-gradient(
      rgba(24, 35, 28, 0.032) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(24, 35, 28, 0.032) 1px,
      transparent 1px
    );
  background-size: 34px 34px;
}

img,
svg,
video {
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
}

button {
  cursor: pointer;
}

/* Contextual chrome is resolved synchronously by context.js or the homepage head. */
.ctx-app,
.ctx-browser {
  display: none;
}

html.is-browser .ctx-browser,
html.is-app .ctx-app {
  display: revert;
}


/* ── Shared layout ──────────────────────────────────────────────────────── */

.container-max {
  width: min(var(--container), calc(100% - 40px));
  max-width: var(--container);
  margin-inline: auto;
}

/*
  Page shells may own vertical rhythm, but the shared container owns the
  publication rail. This prevents a Tailwind p-* shell from adding a second
  horizontal gutter around every container-max surface.
*/
.dino-page-shell {
  padding-inline: 0 !important;
}

.accent-bar {
  width: 42px;
  height: 4px;
  margin-bottom: 10px;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      var(--accentMain),
      #96bd76
    );
}


/* ── Shared navigation ──────────────────────────────────────────────────── */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  color: var(--textInverse);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(
      110deg,
      rgba(93, 156, 89, 0.2),
      transparent 40%
    ),
    rgba(27, 42, 34, 0.97);
  box-shadow: var(--shadowNav);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.site-nav__inner {
  position: relative;
  display: flex;
  width: min(var(--container), calc(100% - 40px));
  max-width: var(--container);
  min-height: 66px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-inline: auto;
  padding: 0;
}

.site-nav__logo,
.site-nav__logo-app {
  position: relative;
  z-index: 101;
  flex-shrink: 0;
  color: var(--textInverse);
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1;
  text-decoration: none;
}

.site-nav__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.site-nav__logo::before {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 2px solid #a7d28b;
  border-radius: 50%;
  content: "";
  box-shadow:
    0 0 0 5px rgba(167, 210, 139, 0.1);
}

.site-nav__logo:hover {
  opacity: 0.88;
}

.site-nav__logo-app {
  display: none;
}

.site-nav__links {
  display: flex;
  align-items: center;
  gap: 23px;
}

.navlink {
  position: relative;
  padding: 7px 0;
  color: var(--textInverseMuted);
  font-family: "Roboto Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    color 150ms ease,
    transform 150ms ease;
}

.navlink::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  border-radius: 999px;
  content: "";
  background: #a7d28b;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 160ms ease;
}

.navlink:hover,
.navlink--active {
  color: #ffffff;
}

.navlink:hover::after,
.navlink--active::after {
  transform: scaleX(1);
}


/* Remove older divider implementations */

.navlinks .navlink,
.site-nav__links .navlink {
  margin-left: 0;
  padding-left: 0;
}

.navlinks .navlink::before,
.site-nav__links .navlink::before {
  display: none;
}


/* ── Hamburger button ───────────────────────────────────────────────────── */

.site-nav__burger {
  position: relative;
  z-index: 101;
  display: none;
  width: 38px;
  height: 38px;
  flex-direction: column;
  flex-shrink: 0;
  justify-content: center;
  gap: 5px;
  padding: 7px;
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
}

.site-nav__burger:hover {
  border-color: rgba(255, 255, 255, 0.36);
  background: rgba(255, 255, 255, 0.13);
}

.site-nav__burger span {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: white;
  transition:
    transform 200ms ease,
    opacity 200ms ease;
}

.site-nav__burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.site-nav__burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.site-nav__burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* ── Editorial typography ──────────────────────────────────────────────── */

h1,
h2,
h3,
h4,
.channel-title,
.preview-title {
  color: var(--textStrong);
}

h1,
h2,
h3,
h4 {
  font-family: "Montserrat", sans-serif;
}

h1 {
  letter-spacing: -0.045em;
  line-height: 0.96;
}

h2 {
  letter-spacing: -0.025em;
}

p {
  color: var(--textMuted);
}


/* ── Hero labels and badges ─────────────────────────────────────────────── */

.hero-stack,
.hero,
.hero-header,
.page-hero,
.hero-block {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.badge-hero {
  display: inline-flex;
  width: max-content;
  align-items: center;
  gap: 7px;
  margin-bottom: 4px;
  padding: 7px 11px;
  color: var(--accentMainDark);
  border: 1px solid rgba(93, 156, 89, 0.28);
  border-radius: 999px;
  background: var(--accentMainSoft);
  font-family: "Roboto Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.badge-hero::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  content: "";
  background: var(--accentMain);
  box-shadow: 0 0 0 4px rgba(93, 156, 89, 0.11);
}


/* ── Search surfaces ────────────────────────────────────────────────────── */

.search-bar-input,
.control-input,
.control-select {
  color: var(--textStrong);
  border: 1px solid var(--borderDim);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadowSoft);
  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.search-bar-input {
  min-height: 58px;
  padding: 14px 52px 14px 18px;
}

.control-input,
.control-select {
  min-height: 44px;
  padding: 0 14px;
}

.search-bar-input::placeholder,
.control-input::placeholder {
  color: var(--textFaint);
}

.search-bar-input:hover,
.control-input:hover,
.control-select:hover {
  border-color: var(--borderStrong);
  background: white;
}

.search-bar-input:focus,
.control-input:focus,
.control-select:focus {
  outline: none;
  border-color: var(--accentMain);
  background: white;
  box-shadow:
    0 0 0 4px rgba(93, 156, 89, 0.12),
    var(--shadowCard);
}


/* ── Shared buttons ─────────────────────────────────────────────────────── */

.btn-primary,
.load-more {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 17px;
  color: white;
  border: 1px solid var(--accentMainDark);
  border-radius: var(--radius);
  background:
    linear-gradient(
      135deg,
      var(--accentMain),
      var(--accentMainDark)
    );
  box-shadow: 0 10px 20px rgba(63, 116, 61, 0.2);
  font-family: "Montserrat", sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
  transition:
    transform 160ms ease,
    filter 160ms ease,
    box-shadow 160ms ease;
}

.btn-primary:hover,
.load-more:hover {
  filter: brightness(1.04);
  box-shadow: 0 14px 28px rgba(63, 116, 61, 0.26);
  transform: translateY(-1px);
}

.btn-outline {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  color: var(--textStrong);
  border: 1px solid var(--borderDim);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.7);
  font-family: "Roboto Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
}

.btn-outline:hover {
  color: var(--accentMainDark);
  border-color: var(--accentMain);
  background: white;
}


/* ── Filter chips ───────────────────────────────────────────────────────── */

.chip {
  min-height: 34px;
  padding: 0 12px;
  color: var(--textMuted);
  border: 1px solid var(--borderDim);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  font-family: "Roboto Mono", monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  transition:
    color 150ms ease,
    border-color 150ms ease,
    background 150ms ease;
}

.chip:hover {
  color: var(--accentMainDark);
  border-color: rgba(93, 156, 89, 0.4);
  background: white;
}

.chip--active,
.chip.active {
  color: white;
  border-color: var(--accentMainDark);
  background: var(--accentMainDark);
}


/* ── Channel cards ──────────────────────────────────────────────────────── */

.channel-card {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 20px;
  color: var(--textStrong);
  border: 1px solid var(--borderDim);
  border-radius: var(--radius);
  background: var(--bg-card);
  box-shadow: var(--shadowSoft);
  text-decoration: none;
  transition:
    border-color 180ms ease,
    transform 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.channel-card::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  content: "";
  background:
    linear-gradient(
      90deg,
      var(--accentMain),
      rgba(93, 156, 89, 0.05)
    );
  opacity: 0;
  transition: opacity 180ms ease;
}

.channel-card:hover {
  color: var(--textStrong);
  border-color: rgba(93, 156, 89, 0.4);
  background: var(--bg-card-hover);
  box-shadow: var(--shadowHover);
  transform: translateY(-3px);
}

.channel-card:hover::before {
  opacity: 1;
}

.channel-card--static:hover {
  border-color: var(--borderDim);
  box-shadow: var(--shadowSoft);
  transform: none;
}

.channel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.channel-meta {
  color: var(--textFaint);
  font-family: "Roboto Mono", monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.channel-title {
  margin-bottom: 8px;
  color: var(--textStrong);
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.16;
}

.channel-desc {
  margin-bottom: 18px;
  color: var(--textMuted);
  font-size: 13px;
  line-height: 1.65;
}

.channel-cta {
  color: var(--accentMainDark);
  font-family: "Roboto Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}


/* ── Category badges ────────────────────────────────────────────────────── */

.channel-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--borderDim);
  border-radius: 999px;
  font-family: "Roboto Mono", monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.badge-green {
  color: var(--accentMainStrong);
  border-color: rgba(93, 156, 89, 0.28);
  background: rgba(93, 156, 89, 0.13);
}

.badge-blue {
  color: #286d7e;
  border-color: rgba(49, 127, 147, 0.23);
  background: rgba(49, 127, 147, 0.1);
}

.badge-orange {
  color: #8a5723;
  border-color: rgba(179, 123, 53, 0.23);
  background: rgba(179, 123, 53, 0.11);
}

.badge-red {
  color: #8b4545;
  border-color: rgba(169, 87, 87, 0.22);
  background: rgba(169, 87, 87, 0.1);
}

.badge-purple {
  color: #6a4b7e;
  border-color: rgba(118, 84, 141, 0.22);
  background: rgba(118, 84, 141, 0.1);
}

.badge-white,
.badge-dim {
  color: #5f6961;
  border-color: rgba(95, 105, 97, 0.18);
  background: #eff1ee;
}


/* ── Preview and article cards ──────────────────────────────────────────── */

.preview-shell {
  overflow: hidden;
  border: 1px solid var(--borderDim);
  border-radius: var(--radius);
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.68),
      rgba(237, 242, 233, 0.76)
    );
  box-shadow: var(--shadowSoft);
}

.preview-card,
.feed-card,
.article-card,
.result-card {
  overflow: hidden;
  color: var(--textStrong);
  border: 1px solid var(--borderDim);
  border-radius: var(--radius);
  background: var(--bg-card-solid);
  box-shadow: 0 8px 22px rgba(28, 43, 32, 0.07);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.preview-card:hover,
.feed-card:hover,
.article-card:hover,
.result-card:hover {
  border-color: rgba(93, 156, 89, 0.35);
  box-shadow: var(--shadowCard);
  transform: translateY(-2px);
}

.preview-img,
.card-image,
.article-image {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--borderDim);
  background:
    radial-gradient(
      circle at 78% 20%,
      rgba(179, 123, 53, 0.16),
      transparent 14rem
    ),
    linear-gradient(
      135deg,
      #e5ece1,
      #d5e0d1
    );
}

.preview-img {
  display: flex;
  aspect-ratio: 16 / 9;
  align-items: center;
  justify-content: center;
}

.preview-img .dash {
  border-color: var(--accentMain);
  opacity: 0.2;
}

.preview-body,
.card-body,
.article-body {
  padding: 19px;
}

.preview-title {
  margin: 10px 0;
  color: var(--textStrong);
  font-family: "Montserrat", sans-serif;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
}

.preview-desc {
  color: var(--textMuted);
  font-size: 13px;
  line-height: 1.62;
}

.preview-cta {
  color: var(--accentMainDark);
  font-family: "Roboto Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}


/* ── Controls and feed metadata ─────────────────────────────────────────── */

.controls {
  border-color: var(--borderDim);
}

.meta-row,
.meta-text {
  color: var(--textMuted);
}

select option {
  color: var(--textStrong);
  background: white;
}


/* ── Search result container ────────────────────────────────────────────── */

#search-results-container {
  padding: 22px;
  border: 1px solid var(--borderDim);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.7);
  box-shadow: var(--shadowSoft);
}

#search-results-container h2 {
  color: var(--textStrong);
}

#clear-search {
  color: var(--textMuted) !important;
}

#clear-search:hover {
  color: var(--accentMainDark) !important;
}


/* ── Construction banner ────────────────────────────────────────────────── */

@keyframes pulse-border {
  0%,
  100% {
    border-color: rgba(93, 156, 89, 0.48);
  }

  50% {
    border-color: rgba(93, 156, 89, 0.16);
  }
}

.construction-banner {
  color: var(--accentMainStrong);
  border: 1px solid rgba(93, 156, 89, 0.28);
  border-radius: var(--radius);
  background: rgba(238, 247, 234, 0.92);
  box-shadow: var(--shadowSoft);
  animation: pulse-border 2.4s infinite;
}


/* ── Footer ─────────────────────────────────────────────────────────────── */

footer {
  color: var(--textInverseMuted);
}

body > div > footer,
.product-footer,
.site-footer {
  padding: 25px;
  color: var(--textInverse);
  border-radius: var(--radius);
  background:
    linear-gradient(
      135deg,
      rgba(93, 156, 89, 0.17),
      transparent 42%
    ),
    var(--footerDark);
  box-shadow: var(--shadowSoft);
}

body > div > footer p,
.product-footer p,
.site-footer p {
  color: var(--textInverseMuted) !important;
}


/* ── Shared focus styles ────────────────────────────────────────────────── */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(93, 156, 89, 0.22);
  outline-offset: 3px;
}


/* ── Utilities ──────────────────────────────────────────────────────────── */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  padding: 0;
  margin: -1px;
  border: 0;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.hidden {
  display: none !important;
}


/* ── Embedded app behavior ──────────────────────────────────────────────── */

@media (max-width: 768px) {
  html.is-app .site-nav__logo-app {
    display: inline-flex;
    align-items: center;
    color: var(--textInverse);
  }

  html.is-app .site-nav__logo {
    display: none;
  }

  html.is-app .site-nav__logo-app--inert {
    pointer-events: none;
    cursor: default;
  }
}


/* ── Mobile navigation ──────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .container-max,
  .site-nav__inner {
    width: min(100% - 28px, var(--container));
  }

  .site-nav__inner {
    min-height: 60px;
  }

  .site-nav__burger {
    display: flex !important;
  }

  .site-nav__links {
    position: absolute;
    top: 60px;
    right: -14px;
    left: -14px;
    display: none !important;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    overflow: hidden;
    padding: 7px 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 0;
    border-radius: 0 0 var(--radius) var(--radius);
    background:
      linear-gradient(
        135deg,
        rgba(93, 156, 89, 0.12),
        transparent 42%
      ),
      var(--navDark);
    box-shadow: 0 16px 32px rgba(18, 31, 23, 0.24);
  }

  .site-nav__links.is-open {
    display: flex !important;
  }

  .navlink {
    display: block;
    width: 100%;
    padding: 14px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 11px;
    white-space: normal;
  }

  .site-nav__links .navlink {
    padding-left: 33px;
  }

  .navlink:last-child {
    border-bottom: 0;
  }

  .navlink::after {
    top: 50%;
    right: auto;
    bottom: auto;
    left: 9px;
    width: 4px;
    height: 18px;
    transform: translateY(-50%) scaleY(0);
  }

  .navlink:hover::after,
  .navlink--active::after {
    transform: translateY(-50%) scaleY(1);
  }

  .hero-stack,
  .hero,
  .hero-header,
  .page-hero,
  .hero-block {
    gap: 11px;
  }

  .search-bar-input {
    min-height: 54px;
  }

  .channel-card {
    padding: 18px;
  }

  #search-results-container {
    padding: 17px;
  }
}


/* ── Reduced motion ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ═══ MERGED EDITORIAL LIGHT SYSTEM ═══ */

/*
  DINO NEWS — Editorial Light Compatibility Layer
  ------------------------------------------------
  Load this file after every section-specific stylesheet.

  This preserves the section layouts while translating the old dark
  terminal surfaces into a lighter natural-history editorial system.
*/

:root {
  --bg-main: #eae9df;
  --bg-main-soft: #f3f1e8;
  --bg-card: #f7f5ed;
  --bg-card-hover: #fbfaf4;
  --bg-subtle: #e7ebe1;

  --accentMain: #5d9c59;
  --accentMainDark: #3f743d;
  --accentMainStrong: #315f30;
  --accentMainSoft: rgba(93, 156, 89, 0.12);

  --accentGold: #a97735;
  --accentOrange: #d56732;

  --textWhite: #18231c;
  --textStrong: #18231c;
  --textMuted: #657168;
  --textFaint: #88918a;

  --borderDim: rgba(24, 35, 28, 0.13);
  --borderHighlight: #5d9c59;

  --shadowSoft: 0 8px 24px rgba(28, 43, 32, 0.07);
  --shadowCard: 0 14px 34px rgba(28, 43, 32, 0.10);
  --shadowHover: 0 18px 42px rgba(28, 43, 32, 0.14);

  --radius: 8px;
}


/* ── Page canvas ───────────────────────────────────────────── */

html {
  color-scheme: light;
  background: var(--bg-main);
}

body {
  color: var(--textStrong) !important;
  background:
    radial-gradient(
      circle at 8% 0%,
      rgba(93, 156, 89, 0.11),
      transparent 30rem
    ),
    radial-gradient(
      circle at 96% 12%,
      rgba(169, 119, 53, 0.07),
      transparent 27rem
    ),
    linear-gradient(
      180deg,
      var(--bg-main-soft),
      var(--bg-main)
    ) !important;
}


/* ── Preserve the dark navigation anchor ───────────────────── */

.site-nav {
  color: rgba(255, 255, 255, 0.94) !important;
  border-bottom-color: rgba(255, 255, 255, 0.10) !important;
  background:
    linear-gradient(
      110deg,
      rgba(93, 156, 89, 0.20),
      transparent 40%
    ),
    rgba(27, 42, 34, 0.98) !important;
  box-shadow: 0 8px 28px rgba(18, 31, 23, 0.15);
}

.site-nav__logo,
.site-nav__logo-app {
  color: rgba(255, 255, 255, 0.94) !important;
}

.site-nav__links .navlink {
  color: rgba(255, 255, 255, 0.66) !important;
}

.site-nav__links .navlink:hover,
.site-nav__links .navlink--active {
  color: #ffffff !important;
}

.site-nav__links .navlink::after {
  background: #a7d28b !important;
}

.site-nav__burger {
  border-color: rgba(255, 255, 255, 0.20) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.site-nav__burger span {
  background: #f7f5ed !important;
}


/* ── Page typography ───────────────────────────────────────── */

header h1,
header h2,
header h3,
main h1,
main h2,
main h3,
main h4 {
  color: var(--textStrong) !important;
}

header p,
main > header p,
.page-subtitle,
.hero-subtitle {
  color: var(--textMuted) !important;
}

.accent-bar {
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      var(--accentMain),
      #96bd76
    ) !important;
}


/* ── Search and filter panels ──────────────────────────────── */

.controls,
.search-panel,
.filter-panel,
.dinopedia-controls,
.dinopedia-toolbar,
.toolbar,
.filters,
.filter-shell {
  color: var(--textStrong) !important;
  border-color: var(--borderDim) !important;
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.97),
      rgba(239, 245, 235, 0.94)
    ) !important;
  box-shadow: var(--shadowSoft);
}

.control-input,
.control-select,
.search-bar-input,
.search-input,
.sort-select,
.filters input,
.filters select,
.toolbar input,
.toolbar select {
  color: var(--textStrong) !important;
  border-color: var(--borderDim) !important;
  background: #f7f5ed !important;
  box-shadow: none !important;
}

.control-input::placeholder,
.search-bar-input::placeholder,
.search-input::placeholder {
  color: #7c877f !important;
}

.control-input:focus,
.control-select:focus,
.search-bar-input:focus,
.search-input:focus,
.sort-select:focus {
  outline: none !important;
  border-color: var(--accentMain) !important;
  background: #f7f5ed !important;
  box-shadow: 0 0 0 4px var(--accentMainSoft) !important;
}

.control-select option,
.sort-select option,
select option {
  color: var(--textStrong);
  background: #f7f5ed;
}


/* ── Chips and filter buttons ──────────────────────────────── */

.chip,
.filter-chip,
.category-chip,
.taxonomy-chip {
  color: #59655d !important;
  border-color: var(--borderDim) !important;
  background: rgba(255, 255, 255, 0.84) !important;
}

.chip:hover,
.filter-chip:hover,
.category-chip:hover,
.taxonomy-chip:hover {
  color: var(--accentMainDark) !important;
  border-color: rgba(93, 156, 89, 0.44) !important;
  background: #f7f5ed !important;
}

.chip--active,
.chip.active,
.chip[aria-selected="true"],
.filter-chip.active,
.category-chip.active,
.taxonomy-chip.active {
  color: #ffffff !important;
  border-color: var(--accentMainDark) !important;
  background: var(--accentMainDark) !important;
}

/* Prevent old white-on-white inactive states. */
.chip[aria-selected="false"] {
  color: #59655d !important;
}


/* ── Metadata ──────────────────────────────────────────────── */

.meta-row,
.meta-row *,
.meta-text,
.source-label,
.result-count,
.feed-count {
  color: #707b73 !important;
}

.date,
.link,
.card__links a,
.channel-cta,
.preview-cta,
.view-report,
.view-dossier {
  color: var(--accentMainDark) !important;
}


/* ── Shared cards ──────────────────────────────────────────── */

.card,
.channel-card,
.preview-card,
.feed-card,
.article-card,
.result-card,
.story-card,
.news-card,
.dino-card,
.species-card,
.dossier-card,
.hero-card,
.side-card {
  color: var(--textStrong) !important;
  border-color: var(--borderDim) !important;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.99),
      rgba(248, 250, 246, 0.99)
    ) !important;
  box-shadow: var(--shadowSoft);
}

.card:hover,
.channel-card:hover,
.preview-card:hover,
.feed-card:hover,
.article-card:hover,
.result-card:hover,
.story-card:hover,
.news-card:hover,
.dino-card:hover,
.species-card:hover,
.dossier-card:hover {
  border-color: rgba(93, 156, 89, 0.40) !important;
  background: var(--bg-card-hover) !important;
  box-shadow: var(--shadowHover);
}


/* ── Card typography ───────────────────────────────────────── */

.title--hero,
.title--side,
.title--grid,
.card__title,
.card-title,
.channel-title,
.preview-title,
.story-title,
.article-title,
.species-name,
.dino-name,
.dossier-title {
  color: var(--textStrong) !important;
}

.desc--hero,
.desc--side,
.desc--grid,
.card__desc,
.card-description,
.channel-desc,
.preview-desc,
.story-description,
.article-description,
.species-description,
.dino-description,
.dossier-description {
  color: var(--textMuted) !important;
}


/* ── Discoveries hero layout ───────────────────────────────── */

.hero-block__layout {
  height: auto !important;
  min-height: 360px;
}

.card--hero {
  min-height: 360px;
}

.card__body--hero {
  min-height: 0;
}

.hero-block__no-more {
  color: var(--textMuted) !important;
  border-color: var(--borderDim) !important;
  background: rgba(255, 255, 255, 0.48) !important;
}


/* ── Dinopedia index and featured strip ────────────────────── */

.core-index,
.core-seven,
.index-panel,
.featured-index,
.dinopedia-index,
.canon-strip {
  color: var(--textStrong) !important;
  border-color: var(--borderDim) !important;
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.97),
      rgba(239, 245, 235, 0.95)
    ) !important;
  box-shadow: var(--shadowSoft);
}

.core-index *,
.core-seven *,
.index-panel *,
.featured-index *,
.dinopedia-index *,
.canon-strip * {
  border-color: var(--borderDim);
}


/* ── Dinopedia illustration surfaces ───────────────────────── */

.species-card__image,
.dino-card__image,
.species-illustration,
.dino-illustration,
.card-illustration,
.card__visual {
  border-bottom-color: var(--borderDim) !important;
  background:
    radial-gradient(
      circle at 72% 24%,
      rgba(93, 156, 89, 0.14),
      transparent 15rem
    ),
    linear-gradient(
      135deg,
      #edf2e9,
      #dfe9dc
    ) !important;
}

.species-card__body,
.dino-card__body,
.dossier-card__body {
  background: transparent !important;
}


/* Preserve some taxonomic color identity. */

.theropod .species-card__image,
.theropod .dino-card__image,
.species-card[data-group="theropod"] .species-card__image {
  background:
    linear-gradient(
      135deg,
      #e6f2ef,
      #d9e9e4
    ) !important;
}

.ceratopsian .species-card__image,
.ceratopsian .dino-card__image,
.species-card[data-group="ceratopsian"] .species-card__image {
  background:
    linear-gradient(
      135deg,
      #f5ead8,
      #ecddc4
    ) !important;
}

.sauropod .species-card__image,
.sauropod .dino-card__image,
.species-card[data-group="sauropod"] .species-card__image {
  background:
    linear-gradient(
      135deg,
      #eaf2df,
      #dce8cd
    ) !important;
}


/* ── Badge translation ─────────────────────────────────────── */

.badge--new-taxon,
.badge-blue {
  color: #286d67 !important;
  border-color: rgba(55, 147, 146, 0.28) !important;
  background: rgba(55, 147, 146, 0.10) !important;
}

.badge--new-specimen,
.badge-green {
  color: var(--accentMainDark) !important;
  border-color: rgba(93, 156, 89, 0.30) !important;
  background: rgba(93, 156, 89, 0.12) !important;
}

.badge--trackway,
.badge--recency-recent,
.badge-orange {
  color: #805a26 !important;
  border-color: rgba(169, 119, 53, 0.30) !important;
  background: rgba(169, 119, 53, 0.11) !important;
}

.badge--egg-nest {
  color: #935327 !important;
  border-color: rgba(213, 103, 50, 0.28) !important;
  background: rgba(213, 103, 50, 0.10) !important;
}

.badge--range {
  color: #286a85 !important;
  border-color: rgba(49, 127, 147, 0.26) !important;
  background: rgba(49, 127, 147, 0.10) !important;
}

.badge--reexam,
.badge-purple {
  color: #694978 !important;
  border-color: rgba(118, 84, 141, 0.25) !important;
  background: rgba(118, 84, 141, 0.10) !important;
}

.badge--unclassified,
.badge-dim,
.badge-white {
  color: #606b63 !important;
  border-color: var(--borderDim) !important;
  background: #f0f2ef !important;
}


/* ── Primary and secondary actions ─────────────────────────── */

.btn-primary,
.load-more,
.primary-button {
  color: #ffffff !important;
  border-color: var(--accentMainDark) !important;
  background:
    linear-gradient(
      135deg,
      var(--accentMain),
      var(--accentMainDark)
    ) !important;
  box-shadow: 0 10px 20px rgba(63, 116, 61, 0.20);
}

.btn-outline,
.secondary-button,
.ghost-button {
  color: var(--textStrong) !important;
  border-color: var(--borderDim) !important;
  background: rgba(255, 255, 255, 0.76) !important;
}

.btn-outline:hover,
.secondary-button:hover,
.ghost-button:hover {
  color: var(--accentMainDark) !important;
  border-color: var(--accentMain) !important;
  background: #f7f5ed !important;
}


/* ── Search results ────────────────────────────────────────── */

#search-results-container {
  color: var(--textStrong);
  border-color: var(--borderDim) !important;
  background: rgba(255, 255, 255, 0.72) !important;
  box-shadow: var(--shadowSoft);
}

#search-results-container h2 {
  color: var(--textStrong) !important;
}

#clear-search {
  color: var(--textMuted) !important;
}

#clear-search:hover {
  color: var(--accentMainDark) !important;
}


/* ── Dividers ─────────────────────────────────────────────── */

.card__links,
.card-footer,
.species-card__footer,
.dino-card__footer,
.article-footer {
  border-color: var(--borderDim) !important;
}


/* ── Construction and status notices ───────────────────────── */

.construction-banner,
.notice,
.status-banner {
  color: var(--accentMainStrong) !important;
  border-color: rgba(93, 156, 89, 0.28) !important;
  background: rgba(238, 247, 234, 0.94) !important;
  box-shadow: var(--shadowSoft);
}


/* ── Footer ────────────────────────────────────────────────── */

.site-footer,
.product-footer,
body > div > footer {
  color: rgba(255, 255, 255, 0.94) !important;
  background:
    linear-gradient(
      135deg,
      rgba(93, 156, 89, 0.17),
      transparent 42%
    ),
    #1a2921 !important;
}

.site-footer p,
.product-footer p,
body > div > footer p {
  color: rgba(255, 255, 255, 0.70) !important;
}


/* ── Accessibility ─────────────────────────────────────────── */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(93, 156, 89, 0.24) !important;
  outline-offset: 3px;
}


/* ── Mobile menu ───────────────────────────────────────────── */

@media (max-width: 768px) {
  .site-nav__links {
    background:
      linear-gradient(
        135deg,
        rgba(93, 156, 89, 0.13),
        transparent 42%
      ),
      #1b2a22 !important;
  }

  .site-nav__links .navlink {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
  }

  .hero-block__layout,
  .card--hero {
    min-height: auto;
  }
}


/* ── Reduced motion ────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* DINO NEWS DETAIL PAGE CONTRAST PATCH
   Warm paper surfaces and explicit text contrast for generated article pages.
*/

:root {
  --paper-main: #eae9df;
  --paper-soft: #f1efe6;
  --paper-card: #f7f5ed;
  --paper-raised: #fbfaf4;
  --paper-muted: #e1e2da;

  --ink-main: #17231b;
  --ink-body: #334239;
  --ink-muted: #647067;
  --ink-faint: #7b857d;
  --ink-line: rgba(23, 35, 27, 0.15);
}


/* Remove remaining pure-white surfaces */

main,
article,
.article-page,
.detail-page,
.report-page,
.paper-page,
.dossier-page {
  color: var(--ink-main);
}

.article-shell,
.article-container,
.detail-shell,
.detail-card,
.paper-shell,
.report-shell,
.content-shell,
.article-layout {
  color: var(--ink-main) !important;
  border-color: var(--ink-line) !important;
  background: var(--paper-card) !important;
}


/* Main article heading and introductory metadata */

.article-header,
.detail-header,
.paper-header,
.report-header {
  color: var(--ink-main) !important;
}

.article-header h1,
.detail-header h1,
.paper-header h1,
.report-header h1,
.article-title,
.detail-title,
.paper-title,
.report-title {
  color: var(--ink-main) !important;
}

.article-meta,
.detail-meta,
.paper-meta,
.report-meta,
.publish-date,
.article-date,
.detail-date {
  color: var(--ink-muted) !important;
}


/* Source callout */

.source-card,
.source-panel,
.source-banner,
.article-source,
.paper-source,
.report-source {
  color: var(--ink-main) !important;
  border-color: rgba(23, 35, 27, 0.16) !important;
  background:
    linear-gradient(
      135deg,
      #dedfd8,
      #d4d7d0
    ) !important;
}

.source-card *,
.source-panel *,
.source-banner *,
.article-source *,
.paper-source *,
.report-source * {
  color: var(--ink-main);
}

.source-card .label,
.source-panel .label,
.source-banner .label,
.article-source .label,
.paper-source .label,
.report-source .label,
.source-label {
  color: var(--ink-muted) !important;
}

.source-card a,
.source-panel a,
.source-banner a,
.article-source a,
.paper-source a,
.report-source a {
  color: var(--ink-main) !important;
}


/* Abstract and body copy */

.abstract,
.abstract-copy,
.abstract-text,
.article-abstract,
.paper-abstract,
.report-abstract,
.article-content,
.article-body,
.paper-content,
.report-content,
.prose {
  color: var(--ink-body) !important;
}

.abstract p,
.abstract-copy p,
.abstract-text p,
.article-abstract p,
.paper-abstract p,
.report-abstract p,
.article-content p,
.article-body p,
.paper-content p,
.report-content p,
.prose p {
  color: var(--ink-body) !important;
}

.abstract a,
.article-content a,
.article-body a,
.paper-content a,
.report-content a,
.prose a {
  color: var(--accentMainDark) !important;
  text-decoration-color: rgba(63, 116, 61, 0.42);
}


/* Generated fallback messages */

.abstract-placeholder,
.abstract-unavailable,
.no-abstract,
.source-abstract,
.fallback-copy,
.empty-copy,
.placeholder-copy {
  display: inline;
  color: #56645a !important;
  background: transparent !important;
}


/* Paper-information sidebar */

.paper-info,
.article-info,
.detail-info,
.metadata-panel,
.metadata-sidebar,
.info-sidebar,
.article-sidebar,
.detail-sidebar {
  color: var(--ink-main) !important;
  border-color: var(--ink-line) !important;
  background: transparent !important;
}

.paper-info h2,
.paper-info h3,
.article-info h2,
.article-info h3,
.detail-info h2,
.detail-info h3,
.metadata-panel h2,
.metadata-panel h3,
.metadata-sidebar h2,
.metadata-sidebar h3,
.info-sidebar h2,
.info-sidebar h3 {
  color: var(--ink-main) !important;
}

.paper-info dt,
.article-info dt,
.detail-info dt,
.metadata-panel dt,
.metadata-sidebar dt,
.info-sidebar dt,
.meta-label,
.info-label,
.metadata-label {
  color: var(--ink-muted) !important;
}

.paper-info dd,
.article-info dd,
.detail-info dd,
.metadata-panel dd,
.metadata-sidebar dd,
.info-sidebar dd,
.meta-value,
.info-value,
.metadata-value {
  color: var(--ink-body) !important;
}

.paper-info a,
.article-info a,
.detail-info a,
.metadata-panel a,
.metadata-sidebar a,
.info-sidebar a,
.doi-link {
  color: var(--accentMainDark) !important;
}


/* Prevent invisible empty metadata generated with pale text */

.paper-info span,
.article-info span,
.detail-info span,
.metadata-panel span,
.metadata-sidebar span,
.info-sidebar span {
  color: inherit;
}

.paper-info dd:empty::after,
.article-info dd:empty::after,
.detail-info dd:empty::after,
.metadata-panel dd:empty::after,
.metadata-sidebar dd:empty::after,
.info-sidebar dd:empty::after,
.meta-value:empty::after,
.info-value:empty::after {
  content: "Not listed";
  color: var(--ink-faint);
  font-style: italic;
}


/* Indexed tags */

.indexed-tags,
.tag-list,
.article-tags,
.paper-tags {
  color: var(--ink-body) !important;
}

.indexed-tags a,
.indexed-tags li,
.tag-list a,
.tag-list li,
.article-tags a,
.article-tags li,
.paper-tags a,
.paper-tags li {
  color: var(--ink-muted) !important;
}


/* Horizontal rules and structural lines */

article hr,
.article-page hr,
.detail-page hr,
.paper-page hr,
.report-page hr {
  border-color: var(--ink-line) !important;
}


/* Warm cards everywhere rather than pure white */

.card,
.channel-card,
.preview-card,
.feed-card,
.article-card,
.result-card,
.story-card,
.news-card,
.dino-card,
.species-card,
.dossier-card,
.hero-card,
.side-card,
.source-card,
.detail-card {
  background:
    linear-gradient(
      180deg,
      var(--paper-raised),
      var(--paper-card)
    ) !important;
}


/* Text selection — intentional but less electric */

::selection {
  color: #17231b;
  background: rgba(147, 188, 128, 0.48);
}


/* Mobile sidebar separation */

@media (max-width: 768px) {
  .paper-info,
  .article-info,
  .detail-info,
  .metadata-panel,
  .metadata-sidebar,
  .info-sidebar,
  .article-sidebar,
  .detail-sidebar {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--ink-line);
    border-left: 0 !important;
  }
}
/* ═══════════════════════════════════════════════════════════════
   FINAL LIGHT-SURFACE CONTRAST NORMALIZATION
   Detail pages still contain section-specific pale-text rules
   inherited from the former dark theme. These rules establish
   dark editorial ink throughout light content surfaces.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --paper-canvas: #e9e8de;
  --paper-surface: #f3f1e8;
  --paper-card: #f7f4eb;
  --paper-raised: #fbf8f0;
  --paper-muted: #ddded5;

  --ink-main: #17231b;
  --ink-body: #39473d;
  --ink-muted: #627066;
  --ink-faint: #78847b;
  --ink-line: rgba(23, 35, 27, 0.16);
}


/* Avoid clinical white across the publication. */

html {
  background: var(--paper-canvas) !important;
}

body {
  color: var(--ink-main) !important;
  background:
    radial-gradient(
      circle at 8% 0%,
      rgba(93, 156, 89, 0.10),
      transparent 30rem
    ),
    radial-gradient(
      circle at 96% 12%,
      rgba(169, 119, 53, 0.07),
      transparent 27rem
    ),
    linear-gradient(
      180deg,
      var(--paper-surface),
      var(--paper-canvas)
    ) !important;
}


/* Light structural surfaces */

main,
article,
.article-page,
.detail-page,
.report-page,
.paper-page,
.discovery-detail,
.breakthrough-detail,
.media-detail,
.museum-detail,
.dossier-page,
.article-shell,
.article-container,
.detail-shell,
.detail-card,
.paper-shell,
.report-shell,
.content-shell,
.article-layout {
  color: var(--ink-main) !important;
}

.article-shell,
.article-container,
.detail-shell,
.detail-card,
.paper-shell,
.report-shell,
.content-shell,
.article-layout {
  border-color: var(--ink-line) !important;
  background: var(--paper-card) !important;
}


/*
  Strong defaults for generated article content.

  Section styles previously used white text because these pages lived on
  charcoal surfaces. These selectors deliberately catch generic generated
  classes and unclassified paragraphs.
*/

main article p,
main article li,
main article blockquote,
main article figcaption,
main article dd,
main article span,

.article-page p,
.article-page li,
.article-page blockquote,
.article-page figcaption,
.article-page dd,

.detail-page p,
.detail-page li,
.detail-page blockquote,
.detail-page figcaption,
.detail-page dd,

.report-page p,
.report-page li,
.report-page blockquote,
.report-page figcaption,
.report-page dd,

.paper-page p,
.paper-page li,
.paper-page blockquote,
.paper-page figcaption,
.paper-page dd,

.discovery-detail p,
.discovery-detail li,
.discovery-detail blockquote,
.discovery-detail dd,

.breakthrough-detail p,
.breakthrough-detail li,
.breakthrough-detail blockquote,
.breakthrough-detail dd,

.article-content,
.article-content p,
.article-content li,
.article-body,
.article-body p,
.article-body li,

.detail-content,
.detail-content p,
.detail-content li,

.summary,
.summary p,
.summary-copy,
.summary-text,
.discovery-summary,
.discovery-summary p,

.abstract,
.abstract p,
.abstract-copy,
.abstract-copy p,
.abstract-text,
.abstract-text p,
.article-abstract,
.article-abstract p,
.paper-abstract,
.paper-abstract p,
.report-abstract,
.report-abstract p,

.prose,
.prose p,
.prose li {
  color: var(--ink-body) !important;
}


/* Explicit heading contrast */

main h1,
main h2,
main h3,
main h4,
main h5,
main h6,

article h1,
article h2,
article h3,
article h4,
article h5,
article h6,

.article-title,
.detail-title,
.paper-title,
.report-title,
.discovery-title,
.summary-title {
  color: var(--ink-main) !important;
}


/* Dates, source labels, metadata labels and secondary information */

.article-meta,
.detail-meta,
.paper-meta,
.report-meta,
.publish-date,
.article-date,
.detail-date,
.meta-label,
.info-label,
.metadata-label,
.source-label,
.eyebrow,
.kicker {
  color: var(--ink-muted) !important;
}


/* Source/report callout */

.source-card,
.source-panel,
.source-banner,
.article-source,
.paper-source,
.report-source,
.reported-by,
.source-strip {
  color: var(--ink-main) !important;
  border-color: var(--ink-line) !important;
  background:
    linear-gradient(
      135deg,
      #d9dad2,
      #ced2c9
    ) !important;
}

.source-card p,
.source-panel p,
.source-banner p,
.article-source p,
.paper-source p,
.report-source p,
.reported-by p,
.source-strip p {
  color: var(--ink-body) !important;
}

.source-card a,
.source-panel a,
.source-banner a,
.article-source a,
.paper-source a,
.report-source a,
.reported-by a,
.source-strip a {
  color: var(--ink-main) !important;
}


/* Information sidebars */

.paper-info,
.article-info,
.detail-info,
.metadata-panel,
.metadata-sidebar,
.info-sidebar,
.article-sidebar,
.detail-sidebar,
.subject-reference,
.indexed-tags {
  color: var(--ink-main) !important;
  border-color: var(--ink-line) !important;
  background: transparent !important;
}

.paper-info h2,
.paper-info h3,
.article-info h2,
.article-info h3,
.detail-info h2,
.detail-info h3,
.metadata-panel h2,
.metadata-panel h3,
.metadata-sidebar h2,
.metadata-sidebar h3,
.info-sidebar h2,
.info-sidebar h3,
.subject-reference h2,
.subject-reference h3,
.indexed-tags h2,
.indexed-tags h3 {
  color: var(--ink-main) !important;
}

.paper-info dt,
.article-info dt,
.detail-info dt,
.metadata-panel dt,
.metadata-sidebar dt,
.info-sidebar dt {
  color: var(--ink-muted) !important;
}

.paper-info dd,
.article-info dd,
.detail-info dd,
.metadata-panel dd,
.metadata-sidebar dd,
.info-sidebar dd,
.meta-value,
.info-value,
.metadata-value {
  color: var(--ink-body) !important;
}


/* Links within editorial content */

main article a,
.article-page a,
.detail-page a,
.report-page a,
.paper-page a,
.discovery-detail a,
.breakthrough-detail a,
.article-content a,
.detail-content a,
.discovery-summary a,
.abstract a,
.prose a,
.doi-link {
  color: var(--accentMainDark) !important;
  text-decoration-color: rgba(63, 116, 61, 0.42);
}


/* Placeholder and fallback copy */

.abstract-placeholder,
.abstract-unavailable,
.no-abstract,
.source-abstract,
.fallback-copy,
.empty-copy,
.placeholder-copy {
  color: #536158 !important;
  background: transparent !important;
}


/* Empty metadata should look intentionally unavailable, not invisible. */

.paper-info dd:empty::after,
.article-info dd:empty::after,
.detail-info dd:empty::after,
.metadata-panel dd:empty::after,
.metadata-sidebar dd:empty::after,
.info-sidebar dd:empty::after,
.meta-value:empty::after,
.info-value:empty::after {
  content: "Not listed";
  color: var(--ink-faint);
  font-style: italic;
}


/* Warm cards rather than pure white */

.card,
.channel-card,
.preview-card,
.feed-card,
.article-card,
.result-card,
.story-card,
.news-card,
.dino-card,
.species-card,
.dossier-card,
.hero-card,
.side-card,
.source-card,
.detail-card {
  background:
    linear-gradient(
      180deg,
      var(--paper-raised),
      var(--paper-card)
    ) !important;
}


/* Warm form controls */

.control-input,
.control-select,
.search-bar-input,
.search-input,
.sort-select,
.filters input,
.filters select,
.toolbar input,
.toolbar select {
  background: var(--paper-raised) !important;
}

.control-input:focus,
.control-select:focus,
.search-bar-input:focus,
.search-input:focus,
.sort-select:focus {
  background: var(--paper-raised) !important;
}


/* Intentional inverse-color zones */

.site-nav,
.site-nav *,
.site-footer,
.site-footer *,
.product-footer,
.product-footer *,
body > div > footer,
body > div > footer * {
  --textWhite: rgba(255, 255, 255, 0.94);
  --textMuted: rgba(255, 255, 255, 0.68);
}

/*
  Reassert nav colors after broad content rules. This prevents the universal
  detail-page corrections from darkening navigation text.
*/

.site-nav__logo,
.site-nav__logo-app {
  color: rgba(255, 255, 255, 0.94) !important;
}

.site-nav__links .navlink {
  color: rgba(255, 255, 255, 0.66) !important;
}

.site-nav__links .navlink:hover,
.site-nav__links .navlink--active {
  color: #ffffff !important;
}


/* Buttons and badges that intentionally use inverse text */

.btn-primary,
.load-more,
.primary-button,
.chip--active,
.chip.active,
.chip[aria-selected="true"],
.filter-chip.active,
.category-chip.active,
.taxonomy-chip.active {
  color: #ffffff !important;
}


/* Structural lines */

article hr,
.article-page hr,
.detail-page hr,
.paper-page hr,
.report-page hr {
  border-color: var(--ink-line) !important;
}


/* Text selection */

::selection {
  color: var(--ink-main);
  background: rgba(147, 188, 128, 0.48);
}


/* Mobile information panels */

@media (max-width: 768px) {
  .paper-info,
  .article-info,
  .detail-info,
  .metadata-panel,
  .metadata-sidebar,
  .info-sidebar,
  .article-sidebar,
  .detail-sidebar {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--ink-line);
    border-left: 0 !important;
  }
}

/* ═══ DINO NEWS GLOBAL LIGHT TEXT NORMALIZATION START ═══ */

/*
  The section stylesheets were designed for dark surfaces and still assign
  white or translucent-white text to many generated elements.

  This final shared layer normalizes all readable content on light surfaces.
  Deliberately dark interface zones are restored afterward.
*/

:root {
  --paper-canvas: #e9e8de;
  --paper-surface: #f2f0e7;
  --paper-card: #f7f4eb;
  --paper-raised: #fbf8f0;
  --paper-control: #f8f6ee;

  --ink-heading: #17231b;
  --ink-body: #35443a;
  --ink-secondary: #5e6d63;
  --ink-tertiary: #768179;
  --ink-line: rgba(23, 35, 27, 0.15);
}


/* ── Page and content surfaces ─────────────────────────────── */

html {
  background: var(--paper-canvas) !important;
}

body {
  color: var(--ink-body) !important;
}

main,
article,
section,
header,
aside,
.article-page,
.detail-page,
.report-page,
.paper-page,
.discovery-detail,
.breakthrough-detail,
.museum-detail,
.media-detail,
.dossier-page,
.article-shell,
.detail-shell,
.content-shell,
.article-layout {
  color: var(--ink-body);
}


/* ── Headings ──────────────────────────────────────────────── */

main h1,
main h2,
main h3,
main h4,
main h5,
main h6,
article h1,
article h2,
article h3,
article h4,
article h5,
article h6,
section h1,
section h2,
section h3,
section h4,
section h5,
section h6,
.page-title,
.article-title,
.detail-title,
.report-title,
.paper-title,
.discovery-title,
.card-title,
.card__title,
.title--hero,
.title--side,
.title--grid,
.preview-title,
.channel-title,
.species-name,
.dino-name {
  color: var(--ink-heading) !important;
}


/* ── Ordinary readable copy ────────────────────────────────── */

main p,
main li,
main dd,
main blockquote,
main figcaption,
article p,
article li,
article dd,
article blockquote,
article figcaption,
section p,
section li,
section dd,
aside p,
aside li,
aside dd,

.article-content,
.article-content p,
.article-content li,
.article-body,
.article-body p,
.article-body li,

.detail-content,
.detail-content p,
.detail-content li,

.discovery-summary,
.discovery-summary p,
.summary,
.summary p,
.summary-copy,
.summary-text,

.abstract,
.abstract p,
.abstract-copy,
.abstract-copy p,
.abstract-text,
.abstract-text p,
.article-abstract,
.article-abstract p,
.paper-abstract,
.paper-abstract p,

.prose,
.prose p,
.prose li,

.desc--hero,
.desc--side,
.desc--grid,
.card__desc,
.card-description,
.preview-desc,
.channel-desc,
.story-description,
.article-description,
.species-description,
.dino-description {
  color: var(--ink-body) !important;
}


/* ── Secondary text and metadata ───────────────────────────── */

.page-subtitle,
.hero-subtitle,
.article-meta,
.detail-meta,
.report-meta,
.paper-meta,
.publish-date,
.article-date,
.detail-date,
.meta-row,
.meta-row *,
.meta-text,
.source-label,
.source-label *,
.source-name,
.source-name *,
.result-count,
.feed-count,
.channel-meta,
.date,
.kicker,
.eyebrow,
.metadata-label,
.meta-label,
.info-label,
.paper-info dt,
.article-info dt,
.detail-info dt,
.metadata-panel dt,
.metadata-sidebar dt,
.info-sidebar dt {
  color: var(--ink-secondary) !important;
}


/* ── Metadata values ───────────────────────────────────────── */

.paper-info dd,
.article-info dd,
.detail-info dd,
.metadata-panel dd,
.metadata-sidebar dd,
.info-sidebar dd,
.meta-value,
.info-value,
.metadata-value {
  color: var(--ink-body) !important;
}


/* ── Links within light content ────────────────────────────── */

main a,
article a,
section a,
aside a,
.article-content a,
.detail-content a,
.discovery-summary a,
.abstract a,
.prose a,
.doi-link,
.link,
.view-report,
.view-dossier,
.preview-cta,
.channel-cta,
.card__links a {
  color: var(--accentMainDark) !important;
}


/* ── Light cards ───────────────────────────────────────────── */

.card,
.channel-card,
.preview-card,
.feed-card,
.article-card,
.result-card,
.story-card,
.news-card,
.dino-card,
.species-card,
.dossier-card,
.hero-card,
.side-card,
.detail-card,
.article-shell,
.detail-shell,
.content-shell {
  color: var(--ink-body) !important;
  border-color: var(--ink-line) !important;
  background:
    linear-gradient(
      180deg,
      var(--paper-raised),
      var(--paper-card)
    ) !important;
}


/* ── Light controls ────────────────────────────────────────── */

.controls,
.search-panel,
.filter-panel,
.dinopedia-controls,
.dinopedia-toolbar,
.toolbar,
.filters,
.filter-shell,
.core-index,
.core-seven,
.index-panel,
.featured-index,
.dinopedia-index,
.canon-strip {
  color: var(--ink-body) !important;
}

.control-input,
.control-select,
.search-bar-input,
.search-input,
.sort-select,
.filters input,
.filters select,
.toolbar input,
.toolbar select {
  color: var(--ink-heading) !important;
  background: var(--paper-control) !important;
}

.control-input::placeholder,
.search-bar-input::placeholder,
.search-input::placeholder {
  color: var(--ink-tertiary) !important;
}


/* ── Inactive chips ────────────────────────────────────────── */

.chip,
.filter-chip,
.category-chip,
.taxonomy-chip {
  color: var(--ink-secondary) !important;
}

.chip[aria-selected="false"],
.filter-chip:not(.active),
.category-chip:not(.active),
.taxonomy-chip:not(.active) {
  color: var(--ink-secondary) !important;
}


/* ── Source callouts ───────────────────────────────────────── */

.source-card,
.source-panel,
.source-banner,
.article-source,
.paper-source,
.report-source,
.reported-by,
.source-strip {
  color: var(--ink-heading) !important;
}

.source-card p,
.source-panel p,
.source-banner p,
.article-source p,
.paper-source p,
.report-source p,
.reported-by p,
.source-strip p,
.source-card span,
.source-panel span,
.source-banner span {
  color: var(--ink-body) !important;
}


/* ── Empty values ──────────────────────────────────────────── */

.paper-info dd:empty::after,
.article-info dd:empty::after,
.detail-info dd:empty::after,
.metadata-panel dd:empty::after,
.metadata-sidebar dd:empty::after,
.info-sidebar dd:empty::after,
.meta-value:empty::after,
.info-value:empty::after {
  content: "Not listed";
  color: var(--ink-tertiary);
  font-style: italic;
}


/* ── Deliberately dark surfaces ────────────────────────────── */

/*
  These zones are intentionally inverse. They must be restored after the
  broad light-content rules above.
*/

.site-nav,
.site-nav *,
.site-footer,
.site-footer *,
.product-footer,
.product-footer *,
body > div > footer,
body > div > footer * {
  color: rgba(255, 255, 255, 0.92);
}

.site-nav__logo,
.site-nav__logo-app {
  color: rgba(255, 255, 255, 0.94) !important;
}

.site-nav__links .navlink {
  color: rgba(255, 255, 255, 0.68) !important;
}

.site-nav__links .navlink:hover,
.site-nav__links .navlink--active {
  color: #ffffff !important;
}

.site-footer p,
.product-footer p,
body > div > footer p {
  color: rgba(255, 255, 255, 0.72) !important;
}


/* ── Inverse controls ──────────────────────────────────────── */

.btn-primary,
.load-more,
.primary-button,
.chip--active,
.chip.active,
.chip[aria-selected="true"],
.filter-chip.active,
.category-chip.active,
.taxonomy-chip.active {
  color: #ffffff !important;
}


/* ── Badges retain their semantic colors ───────────────────── */

.badge--new-taxon,
.badge-blue {
  color: #286d67 !important;
}

.badge--new-specimen,
.badge-green {
  color: var(--accentMainDark) !important;
}

.badge--trackway,
.badge--recency-recent,
.badge-orange {
  color: #805a26 !important;
}

.badge--egg-nest {
  color: #935327 !important;
}

.badge--range {
  color: #286a85 !important;
}

.badge--reexam,
.badge-purple {
  color: #694978 !important;
}

.badge--unclassified,
.badge-dim,
.badge-white {
  color: #606b63 !important;
}


/* ── Selection appearance ──────────────────────────────────── */

::selection {
  color: var(--ink-heading);
  background: rgba(147, 188, 128, 0.38);
}

/* ═══ DINO NEWS GLOBAL LIGHT TEXT NORMALIZATION END ═══ */

/* ═══ DINO NEWS FINAL CASCADE CORRECTIONS START ═══ */

/*
  IMPORTANT:
  theme.css must be the final stylesheet loaded by every Dino News page.
  These rules normalize old section-specific dark-theme declarations.
*/


/* ── Page subtitles and introductory copy ─────────────────── */

header p,
header > p,
.container-max > header p,
.page-subtitle,
.hero-subtitle,
.section-subtitle,
.feed-subtitle,
.intro-copy,
.lede,
.deck {
  color: #536158 !important;
  opacity: 1 !important;
}


/*
  Several section pages use Tailwind-style utility classes or inline color
  declarations inherited from the former dark presentation.
*/

header .font-mono,
header [style*="color"],
.page-header .font-mono,
.page-header [style*="color"] {
  color: #536158 !important;
  opacity: 1 !important;
}


/* ── Stable light-card behavior ────────────────────────────── */

.card,
.card--hero,
.card--side,
.card--grid,
.channel-card,
.preview-card,
.feed-card,
.article-card,
.result-card,
.story-card,
.news-card,
.dino-card,
.species-card,
.dossier-card,
.hero-card,
.side-card {
  color: var(--ink-body, #35443a) !important;
  border-color: rgba(23, 35, 27, 0.15) !important;
  background:
    linear-gradient(
      180deg,
      #fbf8f0,
      #f7f4eb
    ) !important;
  box-shadow: 0 8px 24px rgba(28, 43, 32, 0.07) !important;
}


/* Prevent the former charcoal hover state from returning. */

.card:hover,
.card--hero:hover,
.card--side:hover,
.card--grid:hover,
.channel-card:hover,
.preview-card:hover,
.feed-card:hover,
.article-card:hover,
.result-card:hover,
.story-card:hover,
.news-card:hover,
.dino-card:hover,
.species-card:hover,
.dossier-card:hover,
.hero-card:hover,
.side-card:hover {
  color: var(--ink-body, #35443a) !important;
  border-color: rgba(93, 156, 89, 0.42) !important;
  background:
    linear-gradient(
      180deg,
      #fcfaf3,
      #f8f6ed
    ) !important;
  box-shadow:
    0 18px 42px rgba(28, 43, 32, 0.14) !important;
  transform: translateY(-2px);
}


/* ── Card copy in normal and hover states ─────────────────── */

.card .title--hero,
.card .title--side,
.card .title--grid,
.card .card__title,
.card .card-title,
.card h1,
.card h2,
.card h3,
.card h4,
.card--hero .title--hero,
.card--side .title--side,
.card--grid .title--grid {
  color: #17231b !important;
  opacity: 1 !important;
}

.card .desc--hero,
.card .desc--side,
.card .desc--grid,
.card .card__desc,
.card .card-description,
.card p,
.card li,
.card--hero .desc--hero,
.card--side .desc--side,
.card--grid .desc--grid {
  color: #45554a !important;
  opacity: 1 !important;
}

.card:hover .title--hero,
.card:hover .title--side,
.card:hover .title--grid,
.card:hover .card__title,
.card:hover .card-title,
.card:hover h1,
.card:hover h2,
.card:hover h3,
.card:hover h4 {
  color: #17231b !important;
}

.card:hover .desc--hero,
.card:hover .desc--side,
.card:hover .desc--grid,
.card:hover .card__desc,
.card:hover .card-description,
.card:hover p,
.card:hover li {
  color: #45554a !important;
}


/* ── Metadata inside cards ─────────────────────────────────── */

.card .date,
.card .source-label,
.card .meta-text,
.card .card__meta-row,
.card .card__meta-row span:not(.badge) {
  color: #657168 !important;
  opacity: 1 !important;
}

.card .link,
.card .card__links a,
.card .view-report,
.card .view-dossier {
  color: var(--accentMainDark, #3f743d) !important;
}


/* ── Preserve semantic badge colors ────────────────────────── */

.card .badge--new-taxon,
.badge--new-taxon {
  color: #286d67 !important;
}

.card .badge--new-specimen,
.badge--new-specimen {
  color: #3f743d !important;
}

.card .badge--trackway,
.badge--trackway {
  color: #805a26 !important;
}

.card .badge--egg-nest,
.badge--egg-nest {
  color: #935327 !important;
}

.card .badge--range,
.badge--range {
  color: #286a85 !important;
}

.card .badge--reexam,
.badge--reexam {
  color: #694978 !important;
}


/* ── Controls retain light hover styling ───────────────────── */

.control-input:hover,
.control-select:hover,
.search-bar-input:hover,
.search-input:hover,
.sort-select:hover {
  color: #17231b !important;
  border-color: rgba(93, 156, 89, 0.4) !important;
  background: #fbf8f0 !important;
}

.chip:hover,
.filter-chip:hover,
.category-chip:hover,
.taxonomy-chip:hover {
  color: #3f743d !important;
  border-color: rgba(93, 156, 89, 0.44) !important;
  background: #f7f4eb !important;
  box-shadow: 0 5px 14px rgba(28, 43, 32, 0.08);
  transform: translateY(-1px);
}

.chip--active:hover,
.chip.active:hover,
.chip[aria-selected="true"]:hover,
.filter-chip.active:hover,
.category-chip.active:hover,
.taxonomy-chip.active:hover {
  color: #ffffff !important;
  border-color: #315f30 !important;
  background: #315f30 !important;
}


/* ── Dark navigation remains intentionally dark ───────────── */

.site-nav,
.site-nav:hover {
  background:
    linear-gradient(
      110deg,
      rgba(93, 156, 89, 0.2),
      transparent 40%
    ),
    rgba(27, 42, 34, 0.98) !important;
}

.site-nav__logo,
.site-nav__logo-app {
  color: rgba(255, 255, 255, 0.94) !important;
}

.site-nav__links .navlink {
  color: rgba(255, 255, 255, 0.68) !important;
}

.site-nav__links .navlink:hover,
.site-nav__links .navlink--active {
  color: #ffffff !important;
}


/* ── Text selection ────────────────────────────────────────── */

::selection {
  color: #17231b;
  background: rgba(147, 188, 128, 0.38);
}

/* ═══ DINO NEWS FINAL CASCADE CORRECTIONS END ═══ */

/* ═══ DINO NEWS ACCESSIBILITY RELEASE FIXES START ═══ */

/* Back links sit on the light editorial canvas, unlike inverse nav links. */
.back-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--accentMainStrong, #315f30) !important;
  font-family: "Roboto Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
}

.back-link:hover,
.back-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Feed metadata appears directly on the canvas rather than on a card. */
.meta-row,
.meta-row .meta-text,
#location-status.meta-text {
  color: #5d6a61 !important;
  opacity: 1 !important;
}

/* Keep placeholders subordinate to entered text while meeting normal-text contrast. */
.control-input::placeholder,
.search-bar-input::placeholder,
.search-input::placeholder {
  color: #68736b !important;
  opacity: 1;
}

/* White labels require the darker institutional green across the whole control. */
.load-more:not(:disabled) {
  color: #ffffff !important;
  border-color: #3f743d;
  background: #3f743d;
}

.load-more:hover:not(:disabled),
.load-more:focus-visible:not(:disabled) {
  border-color: #315f30;
  background: #315f30;
}

/* Museum venue details inherited a translucent-white dark-theme value. */
.card .venue-line {
  color: var(--ink-body, #35443a);
  opacity: 1;
}

.card .venue-line span {
  color: #5d6a61;
  opacity: 1;
}

/* Preserve the podcast's gold identity with accessible text on its pale tint. */
.badge--podcast {
  color: #805a26 !important;
}

/* Media detail metadata is an intentionally light component. */
.detail-meta-bar {
  color: var(--ink-body, #35443a);
  background: var(--paper-surface, #f2f0e7);
}

.detail-meta-value {
  color: var(--ink-body, #35443a);
  font-family: "Roboto Mono", monospace;
  font-size: 12px;
}

.detail-meta-bar .detail-section-label {
  color: #5d6a61;
  opacity: 1;
}

/* Discovery source attribution now uses one coherent light-surface treatment. */
.report-source-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 32px;
  padding: 16px;
  color: var(--ink-body, #35443a);
  border: 1px solid var(--ink-line, rgba(23, 35, 27, 0.15));
  border-radius: 8px;
  background: var(--paper-surface, #f2f0e7);
}

.report-source-panel__label {
  color: #5d6a61 !important;
}

.report-source-panel__value {
  color: var(--ink-heading, #17231b) !important;
}

.report-source-panel .btn--outline {
  color: var(--accentMainStrong, #315f30) !important;
  border-color: rgba(49, 95, 48, 0.48);
  background: var(--paper-raised, #fbf8f0);
}

/* Restore inverse copy inside Dinopedia's deliberately dark image surface. */
.img-placeholder .img-placeholder__label,
.card__img .card__img-placeholder {
  color: var(--textInverseMuted, rgba(255, 255, 255, 0.72)) !important;
  opacity: 1 !important;
}

/* ═══ DINO NEWS ACCESSIBILITY RELEASE FIXES END ═══ */

/* Footer is intentionally inverse, using the same institutional green as nav. */
footer,
.site-footer,
.product-footer {
  background:
    linear-gradient(135deg, rgba(93, 156, 89, 0.17), transparent 42%),
    var(--footerDark) !important;
}