* {
  box-sizing: border-box;
}

:root {
  --ink: #0f2f2d;
  --muted: #5e7471;
  --line: #d9e7e3;
  --paper: #ffffff;
  --soft: #f4faf8;
  --soft-2: #edf6f3;
  --ocean: #0f766e;
  --ocean-dark: #0b4f4b;
  --deep: #0f3a45;
  --sand: #f4ead3;
  --sun: #f59e0b;
  --warning: #fff4e1;
  --danger-soft: #fff0eb;
  --shadow: 0 20px 60px rgba(15, 47, 45, 0.12);
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: #fbfdfc;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

body.dialog-open {
  overflow: hidden;
}

a {
  color: inherit;
}

button,
input,
select {
  font: inherit;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 3000;
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 12px clamp(18px, 4vw, 64px);
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.brand-logo {
  width: 46px;
  height: 46px;
}

.brand-copy strong,
.brand-copy small {
  display: block;
}

.brand-copy strong {
  font-size: 18px;
  letter-spacing: -0.02em;
}

.brand-copy small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

nav {
  display: flex;
  align-items: center;
  gap: 25px;
}

nav a {
  color: #3e5955;
  font-size: 14px;
  font-weight: 750;
  text-decoration: none;
}

nav a:hover {
  color: var(--ocean);
}

.nav-toggle {
  display: none;
  min-height: 40px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: white;
  color: var(--ink);
  font-weight: 800;
}

.hero {
  min-height: 640px;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(290px, 0.55fr);
  align-items: center;
  gap: clamp(40px, 7vw, 100px);
  padding: 96px clamp(22px, 6vw, 104px);
  background:
    radial-gradient(circle at 82% 24%, rgba(15, 118, 110, 0.14), transparent 31%),
    radial-gradient(circle at 14% 84%, rgba(14, 116, 144, 0.09), transparent 30%),
    linear-gradient(135deg, #f7fcfa, #edf7f4);
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--ocean);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.hero h1 {
  max-width: 930px;
  margin: 0;
  font-size: clamp(46px, 6.6vw, 82px);
  line-height: 0.97;
  letter-spacing: -0.058em;
}

.hero-text {
  max-width: 780px;
  margin: 27px 0 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.72;
}

.hero-actions,
.panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  font-size: 13px;
  font-weight: 850;
  text-decoration: none;
  cursor: pointer;
}

.primary {
  color: white;
  background: var(--ocean);
}

.primary:hover {
  background: var(--ocean-dark);
}

.secondary {
  color: var(--ink);
  background: white;
  border-color: var(--line);
}

.secondary:hover {
  background: var(--soft);
}

.quiet {
  min-height: 40px;
  padding: 0 6px;
  color: var(--ocean);
}

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  margin-top: 35px;
  color: #49635f;
  font-size: 12px;
  font-weight: 750;
}

.trust-row span::before {
  content: "✓";
  margin-right: 7px;
  color: var(--ocean);
  font-weight: 900;
}

.hero-card {
  padding: 32px;
  border: 1px solid rgba(15,118,110,.16);
  border-radius: 24px;
  background: rgba(255,255,255,.78);
  box-shadow: var(--shadow);
}

.hero-logo {
  width: 82px;
  height: 82px;
  margin-bottom: 28px;
}

.hero-card h2 {
  margin: 0;
  font-size: 27px;
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.hero-card p:last-child {
  margin: 18px 0 0;
  color: var(--muted);
  line-height: 1.65;
}

.section {
  padding: 86px clamp(18px, 4vw, 64px);
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 55px;
  margin-bottom: 30px;
}

.section-heading h2,
.about-copy h2,
.protect-copy h2 {
  margin: 0;
  font-size: clamp(34px, 4.6vw, 54px);
  line-height: 1;
  letter-spacing: -0.045em;
}

.section-heading > p {
  max-width: 650px;
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.explore-section {
  background: white;
}

.explorer-shell {
  min-height: 760px;
  display: grid;
  grid-template-columns: 255px minmax(0, 1fr);
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.filters {
  padding: 22px;
  border-right: 1px solid var(--line);
  background: #fbfdfc;
}

.filter-top {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
  margin-bottom: 24px;
}

.filter-top strong {
  display: block;
  margin-top: 4px;
  font-size: 20px;
}

.filter-kicker {
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .13em;
}

.text-button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ocean);
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.filters label {
  display: block;
  margin: 18px 0 7px;
  color: #3b5551;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.filters input,
.filters select,
.species-controls input {
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: none;
  background: white;
  color: var(--ink);
}

.filters input:focus,
.filters select:focus,
.species-controls input:focus {
  border-color: #87bdb7;
  box-shadow: 0 0 0 3px rgba(15,118,110,.08);
}

.legend {
  display: grid;
  gap: 9px;
  margin-top: 26px;
  padding-top: 21px;
  border-top: 1px solid var(--line);
}

.legend span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
}

.dot {
  width: 9px;
  height: 9px;
  display: inline-block;
  border-radius: 50%;
}

.sb { background: #2f7d67; }
.la { background: #176c82; }
.oc { background: #b46f3b; }
.sd { background: #64519a; }

.filter-note {
  margin-top: 24px;
  padding: 16px;
  border-radius: 14px;
  background: var(--warning);
}

.filter-note strong {
  font-size: 12px;
}

.filter-note p {
  margin: 7px 0 0;
  color: #755f3e;
  font-size: 11px;
  line-height: 1.55;
}

.map-wrap {
  position: relative;
  min-width: 0;
  background: #dbecea;
}

#map {
  width: 100%;
  height: 100%;
  min-height: 760px;
}

.location-panel {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1000;
  width: min(430px, calc(100% - 28px));
  max-height: calc(100% - 28px);
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255,255,255,.985);
  box-shadow: 0 24px 70px rgba(15,47,45,.25);
}

.close-panel {
  position: absolute;
  top: 25px;
  right: 25px;
  z-index: 1100;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 50%;
  background: rgba(15,47,45,.72);
  color: white;
  font-size: 22px;
  cursor: pointer;
  backdrop-filter: blur(8px);
}

.location-photo {
  min-height: 240px;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(15,118,110,.22), rgba(7,89,133,.35)),
    #dcecea;
}

.location-photo img {
  width: 100%;
  height: 260px;
  display: block;
  object-fit: cover;
}

.photo-loading,
.photo-empty {
  min-height: 240px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 28px;
  color: #476561;
  text-align: center;
}

.spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(15,118,110,.18);
  border-top-color: var(--ocean);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.photo-credit {
  position: absolute;
  right: 10px;
  bottom: 10px;
  max-width: calc(100% - 20px);
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(8,32,30,.72);
  color: white;
  font-size: 9px;
  line-height: 1.35;
}

.panel-body {
  padding: 24px;
}

.location-panel h3 {
  margin: 0;
  padding-right: 32px;
  font-size: 31px;
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.panel-city {
  margin: 7px 0 0;
  color: var(--muted);
}

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 15px;
}

.pill,
.tag {
  display: inline-flex;
  align-items: center;
  min-height: 29px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--soft-2);
  color: #215c56;
  font-size: 11px;
  font-weight: 800;
}

.source-pill {
  background: var(--sand);
  color: #6f5b2d;
}

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.detail-block {
  margin-top: 22px;
}

.detail-block h4 {
  margin: 0 0 7px;
  color: #274743;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.detail-block p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.58;
}

.detail-block small {
  display: block;
  margin-top: 8px;
  color: #758985;
  font-size: 10px;
  line-height: 1.5;
}

.detail-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.detail-title-row span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.species-tags .tag {
  border: 0;
  cursor: pointer;
}

.species-tags .tag:hover {
  background: #dcefeb;
}

.threat-tags .tag {
  background: var(--danger-soft);
  color: #845047;
}

.conservation-block {
  padding: 14px;
  border-radius: 12px;
  background: #eef8f0;
}

.accuracy-note {
  margin: 15px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.hidden {
  display: none !important;
}

.tide-marker {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 3px solid white;
  border-radius: 50%;
  box-shadow: 0 5px 15px rgba(0,0,0,.22);
  color: white;
  font-size: 9px;
  font-weight: 900;
}

.marker-sb { background: #2f7d67; }
.marker-la { background: #176c82; }
.marker-oc { background: #b46f3b; }
.marker-sd { background: #64519a; }

.species-section {
  background: var(--soft);
}

.species-controls {
  display: grid;
  grid-template-columns: minmax(250px, 380px) 1fr;
  gap: 18px;
  align-items: center;
  margin-bottom: 24px;
}

.rarity-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: white;
  color: #465f5b;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

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

.species-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.species-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: white;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}

.species-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(15,47,45,.1);
}

.species-card img {
  width: 100%;
  height: 190px;
  display: block;
  object-fit: cover;
  background: #dcebea;
}

.species-card-body {
  padding: 18px;
}

.species-card-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: start;
}

.species-card h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.05;
}

.species-card .scientific {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 11px;
  font-style: italic;
}

.rarity-badge {
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--soft-2);
  color: var(--ocean-dark);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.species-card p {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.safety-section {
  background: white;
}

.principle-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.principle-grid article {
  min-height: 225px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fcfefd;
}

.principle-grid span {
  color: var(--ocean);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
}

.principle-grid h3 {
  margin: 42px 0 9px;
  font-size: 21px;
}

.principle-grid p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.protect-section {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 70px;
  background: var(--deep);
  color: white;
}

.protect-section .eyebrow {
  color: #71c9c1;
}

.protect-copy p:last-child {
  color: #bdd0cd;
  line-height: 1.7;
}

.protect-list {
  display: grid;
  gap: 0;
}

.protect-list div {
  display: grid;
  grid-template-columns: minmax(180px, .7fr) 1.3fr;
  gap: 26px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(255,255,255,.13);
}

.protect-list strong {
  font-size: 15px;
}

.protect-list span {
  color: #bdd0cd;
  line-height: 1.55;
}

.about-section {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 70px;
  background: #fbfdfc;
}

.about-copy p {
  max-width: 800px;
  color: var(--muted);
  line-height: 1.75;
}

.about-card {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: white;
  box-shadow: 0 12px 36px rgba(15,47,45,.07);
}

.about-card h3 {
  margin: 0;
  font-size: 25px;
  line-height: 1.1;
}

.about-card ol {
  margin: 22px 0 0;
  padding-left: 20px;
  color: var(--muted);
  line-height: 2;
}

footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 28px clamp(18px, 4vw, 64px);
  border-top: 1px solid var(--line);
  background: white;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-brand img {
  width: 38px;
  height: 38px;
}

.footer-brand strong,
.footer-brand span {
  display: block;
}

.footer-brand span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.footer-links a {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
}

.species-dialog {
  width: min(920px, calc(100vw - 28px));
  max-height: min(760px, calc(100vh - 28px));
  padding: 0;
  border: 0;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 30px 100px rgba(0,0,0,.28);
}

.species-dialog::backdrop {
  background: rgba(7,31,30,.65);
  backdrop-filter: blur(3px);
}

.dialog-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: rgba(15,47,45,.78);
  color: white;
  font-size: 22px;
  cursor: pointer;
}

.species-dialog {
  grid-template-columns: .9fr 1.1fr;
}

.species-dialog[open] {
  display: grid;
}

.species-dialog-media {
  position: relative;
  min-height: 100%;
  background: #d9e8e5;
}

.species-dialog-media img {
  width: 100%;
  height: 100%;
  min-height: 560px;
  display: block;
  object-fit: cover;
}

.species-dialog-media span {
  position: absolute;
  left: 14px;
  bottom: 14px;
  max-width: calc(100% - 28px);
  padding: 7px 9px;
  border-radius: 8px;
  background: rgba(7,31,30,.75);
  color: white;
  font-size: 9px;
  line-height: 1.4;
}

.species-dialog-body {
  padding: 38px;
  overflow-y: auto;
}

.species-dialog-body h2 {
  margin: 0;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.045em;
}

.scientific {
  color: var(--muted);
  font-style: italic;
}

.species-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 24px 0;
}

.species-facts div {
  padding: 14px;
  border-radius: 12px;
  background: var(--soft);
}

.species-facts span,
.species-facts strong {
  display: block;
}

.species-facts span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.species-facts strong {
  margin-top: 5px;
  font-size: 13px;
}

.species-dialog-body h3 {
  margin: 24px 0 7px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.species-dialog-body p {
  color: var(--muted);
  line-height: 1.65;
}

.simple-page {
  max-width: 850px;
  margin: 0 auto;
  padding: 80px 24px 110px;
}

.simple-page h1 {
  font-size: 48px;
  letter-spacing: -.04em;
}

.simple-page p,
.simple-page li {
  color: var(--muted);
  line-height: 1.75;
}

@media (max-width: 1100px) {
  .species-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .hero {
    grid-template-columns: 1fr;
  }

  .hero-card {
    max-width: 620px;
  }
}

@media (max-width: 900px) {
  .nav-toggle {
    display: inline-flex;
    align-items: center;
  }

  nav {
    position: absolute;
    top: calc(100% + 1px);
    right: 18px;
    display: none;
    min-width: 210px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: white;
    box-shadow: var(--shadow);
  }

  nav.open {
    display: grid;
  }

  nav a {
    padding: 10px 8px;
  }

  .section-heading {
    display: block;
  }

  .section-heading > p {
    margin-top: 17px;
  }

  .explorer-shell {
    grid-template-columns: 1fr;
  }

  .filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .filter-top,
  .legend,
  .filter-note {
    grid-column: 1 / -1;
  }

  .filters label {
    margin: 6px 0 0;
  }

  #map {
    min-height: 680px;
  }

  .species-controls {
    grid-template-columns: 1fr;
  }

  .species-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .principle-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .protect-section,
  .about-section {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .brand-copy small {
    display: none;
  }

  .hero {
    min-height: 0;
    padding-top: 62px;
    padding-bottom: 62px;
  }

  .hero h1 {
    font-size: 46px;
  }

  .trust-row {
    display: grid;
  }

  .section {
    padding-top: 62px;
    padding-bottom: 62px;
  }

  .filters {
    display: block;
  }

  .filter-top {
    display: flex;
  }

  .filters label {
    margin-top: 16px;
  }

  #map {
    min-height: 650px;
  }

  .location-panel {
    top: auto;
    right: 10px;
    bottom: 10px;
    left: 10px;
    width: auto;
    max-height: 74%;
  }

  .close-panel {
    top: auto;
    right: 20px;
    bottom: calc(74% - 2px);
  }

  .detail-grid,
  .species-facts {
    grid-template-columns: 1fr;
  }

  .species-grid,
  .principle-grid {
    grid-template-columns: 1fr;
  }

  .species-card img {
    height: 220px;
  }

  .protect-list div {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  footer {
    display: block;
  }

  .footer-links {
    margin-top: 20px;
  }

  .species-dialog[open] {
    display: block;
  }

  .species-dialog-media img {
    min-height: 0;
    height: 310px;
  }

  .species-dialog-body {
    padding: 28px 22px 34px;
  }

  .species-dialog-body h2 {
    font-size: 34px;
  }
}


/* v4 location photo gallery */
.photo-stage {
  position: relative;
  min-height: 240px;
  background: #dcecea;
}

.photo-stage img {
  width: 100%;
  height: 270px;
  display: block;
  object-fit: cover;
}

.photo-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  z-index: 4;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}

.photo-arrow,
.photo-dot {
  pointer-events: auto;
}

.photo-arrow {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 50%;
  background: rgba(8,32,30,.72);
  color: white;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.photo-dots {
  display: flex;
  gap: 5px;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(8,32,30,.56);
}

.photo-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.46);
  cursor: pointer;
}

.photo-dot.active {
  background: white;
}

.founder-card .founder-role {
  margin: 8px 0 0;
  color: var(--ocean);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.55;
}

.founder-card > p:not(.eyebrow):not(.founder-role) {
  color: var(--muted);
  line-height: 1.65;
}

.founder-divider {
  height: 1px;
  margin: 22px 0;
  background: var(--line);
}

.project-standard-label {
  margin-top: 28px;
}


/* SoCal Tidepools v5 */
.marker-cat { background: #0a7d8c; }

.health-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 22px;
}

.health-card {
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fbfdfc;
}

.health-card-top {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
}

.health-card-top span {
  color: #365551;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.health-card-top strong {
  max-width: 180px;
  color: var(--ocean);
  font-size: 11px;
  text-align: right;
}

.health-card-top strong[data-tone="recovering"] {
  color: #8a641f;
}

.health-card-top strong[data-tone="watch"] {
  color: #8b5a2b;
}

.health-card p {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.health-card a {
  display: inline-block;
  margin-top: 10px;
  color: var(--ocean);
  font-size: 11px;
  font-weight: 850;
  text-decoration: none;
}

.health-card a:hover {
  text-decoration: underline;
}

.fish-tags .tag {
  background: #edf3fb;
  color: #315c86;
  border: 0;
  cursor: pointer;
}

.fish-tags .tag:hover {
  background: #dce9f8;
}

.threat-tags .tag {
  border: 0;
  cursor: pointer;
}

.threat-tags .tag:hover {
  background: #ffe2d9;
}

.ecosystem-section {
  background:
    radial-gradient(circle at 85% 20%, rgba(15,118,110,.08), transparent 27%),
    #f6faf9;
}

.ecosystem-cards,
.method-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.ecosystem-cards article,
.method-grid article {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: white;
}

.ecosystem-icon {
  width: 48px;
  height: 48px;
  display: inline-grid;
  place-items: center;
  border-radius: 14px;
  background: var(--soft-2);
  color: var(--ocean);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .05em;
}

.ecosystem-cards h3 {
  margin: 28px 0 8px;
  font-size: 20px;
}

.ecosystem-cards p,
.method-grid p {
  margin: 0;
  color: var(--muted);
  line-height: 1.62;
}

.ecosystem-cards a {
  display: inline-block;
  margin-top: 16px;
  color: var(--ocean);
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
}

.methodology-section {
  background: #f7fbfa;
  border-top: 1px solid var(--line);
}

.method-grid strong {
  display: block;
  margin-bottom: 9px;
  font-size: 15px;
}

.pressure-dialog {
  width: min(860px, calc(100vw - 28px));
  max-height: min(720px, calc(100vh - 28px));
  padding: 0;
  border: 0;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 30px 100px rgba(0,0,0,.28);
}

.pressure-dialog::backdrop {
  background: rgba(7,31,30,.65);
  backdrop-filter: blur(3px);
}

.pressure-dialog[open] {
  display: grid;
  grid-template-columns: .72fr 1.28fr;
}

.pressure-visual {
  min-height: 100%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 18px;
  padding: 34px;
  background:
    radial-gradient(circle at 50% 40%, rgba(245,158,11,.18), transparent 35%),
    linear-gradient(150deg, #113e46, #0d625e);
  color: white;
  text-align: center;
}

.pressure-ring {
  width: 142px;
  height: 142px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 50%;
  box-shadow: inset 0 0 0 14px rgba(255,255,255,.06);
}

.pressure-ring span {
  max-width: 100px;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.1;
}

.pressure-visual p {
  margin: 0;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .18em;
}

.pressure-body {
  padding: 38px;
  overflow-y: auto;
  background: white;
}

.pressure-body h2 {
  margin: 0;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -.045em;
}

.pressure-body h3 {
  margin: 24px 0 7px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.pressure-body p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

@media (max-width: 1000px) {
  .ecosystem-cards,
  .method-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 650px) {
  .ecosystem-cards,
  .method-grid {
    grid-template-columns: 1fr;
  }

  .pressure-dialog[open] {
    display: block;
  }

  .pressure-visual {
    min-height: 220px;
  }

  .pressure-ring {
    width: 110px;
    height: 110px;
  }

  .pressure-body {
    padding: 28px 22px 34px;
  }

  .pressure-body h2 {
    font-size: 34px;
  }
}

/* ============================
   SOCAL TIDEPOOLS V6
   ============================ */
:root { --ci:#0a8793; }
.ci { background:var(--ci); }
.marker-ci { background:var(--ci); }

.hero {
  background:
    radial-gradient(circle at 78% 23%, rgba(10,135,147,.16), transparent 29%),
    radial-gradient(circle at 12% 86%, rgba(245,158,11,.08), transparent 28%),
    linear-gradient(135deg,#f8fcfb 0%,#edf7f4 55%,#e9f3f6 100%);
}
.hero-card { border-color:rgba(10,135,147,.18); }
.legend .dot { flex:0 0 auto; }

.life-tabs { display:flex; gap:6px; margin:10px 0 12px; overflow-x:auto; padding-bottom:4px; scrollbar-width:thin; }
.life-tabs button { flex:0 0 auto; min-height:34px; padding:0 10px; border:1px solid var(--line); border-radius:999px; background:white; color:#506864; font-size:9px; font-weight:900; letter-spacing:.04em; cursor:pointer; }
.life-tabs button.active,.life-tabs button:hover { border-color:var(--ocean); background:var(--ocean); color:white; }
.location-panel .species-tags .tag,.location-panel .threat-tags .tag { border:0; cursor:pointer; }
.location-panel .species-tags .tag:hover { background:#dcefeb; }
.location-panel .threat-tags .tag:hover { background:#ffe2d9; }
.location-panel { width:min(455px,calc(100% - 28px)); }

.group-filter { display:flex; flex-wrap:wrap; gap:8px; }
.species-meta { display:flex; justify-content:space-between; gap:20px; margin:-8px 0 24px; color:var(--muted); font-size:11px; }
.species-meta strong { color:var(--ink); }
.species-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.species-card > img { display:none; }
.species-card-media { position:relative; height:200px; background:radial-gradient(circle at 50% 40%,rgba(15,118,110,.08),transparent 36%),#e8f2ef; overflow:hidden; }
.species-card-media img { width:100%; height:100%; display:block; object-fit:cover; }
.group-badge { position:absolute; left:12px; top:12px; padding:6px 8px; border:1px solid rgba(255,255,255,.5); border-radius:999px; background:rgba(9,47,45,.70); color:white; font-size:8px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; backdrop-filter:blur(8px); }

/* Full animal stays visible in the modal. */
.species-dialog { width:min(1040px,calc(100vw - 32px)) !important; height:min(760px,calc(100vh - 32px)); max-height:none !important; grid-template-columns:minmax(360px,.92fr) minmax(0,1.08fr) !important; background:white; }
.species-dialog[open] { display:grid !important; }
.species-dialog-media { min-width:0; min-height:0 !important; display:flex; flex-direction:column; position:relative; background:radial-gradient(circle at 50% 45%,rgba(15,118,110,.10),transparent 35%),#eaf3f1; overflow:hidden; }
.dialog-image-shell { flex:1 1 auto; min-height:0; display:grid; place-items:center; padding:24px; }
.dialog-image-shell img { width:100%; height:100%; max-width:100%; max-height:660px; display:block; object-fit:contain !important; object-position:center !important; }
.species-dialog-media > span { position:static !important; display:block; padding:10px 14px; background:rgba(7,31,30,.88); color:white; font-size:9px; line-height:1.4; }
.species-dialog-body { min-height:0; overflow-y:auto; padding:38px 42px 44px !important; }
.image-skeleton { min-height:260px; display:grid; place-items:center; align-content:center; gap:12px; color:var(--muted); font-size:12px; }

.islands-section { background:radial-gradient(circle at 18% 20%,rgba(10,135,147,.12),transparent 30%),#f5fafb; }
.island-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.island-grid article { min-height:210px; padding:24px; border:1px solid #d6e5e8; border-radius:18px; background:rgba(255,255,255,.9); }
.island-grid strong,.island-grid span { display:block; }
.island-grid strong { font-size:22px; letter-spacing:-.025em; }
.island-grid span { margin-top:8px; color:var(--ci); font-size:11px; font-weight:850; line-height:1.45; }
.island-grid p { margin:28px 0 0; color:var(--muted); line-height:1.6; }
.island-access-note { margin-top:16px; padding:20px 22px; border:1px solid #d6e5e8; border-radius:16px; background:white; }
.island-access-note strong { font-size:13px; }
.island-access-note p { margin:7px 0 0; color:var(--muted); line-height:1.6; }

@media (max-width:1200px){ .species-grid{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (max-width:900px){
  .species-dialog{grid-template-columns:1fr !important;height:min(920px,calc(100vh - 20px));}
  .species-dialog[open]{display:block !important;overflow-y:auto;}
  .species-dialog-media{height:42vh;min-height:300px !important;}
  .dialog-image-shell{min-height:0;}
  .dialog-image-shell img{max-height:38vh;}
  .island-grid{grid-template-columns:repeat(2,1fr);}
  .species-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:650px){
  .species-meta{display:block;}.species-meta span{display:block;margin-top:6px;}
  .species-grid,.island-grid{grid-template-columns:1fr;}
  .species-card-media{height:235px;}
  .species-dialog{width:calc(100vw - 14px) !important;height:calc(100vh - 14px);}
  .species-dialog-media{height:38vh;min-height:260px !important;}
  .dialog-image-shell{padding:14px;}
  .species-dialog-body{padding:26px 21px 32px !important;}
}

/* California Tide Pools V7 */
:root{--north:#176b59;--northcentral:#3f8069;--bay:#176d82;--monterey:#0a8793;--central:#c07a3c;--south:#7253a7;--islands:#0b7087}
.nc{background:var(--north)}.ncc{background:var(--northcentral)}.bay{background:var(--bay)}.mb{background:var(--monterey)}.cc{background:var(--central)}.sc{background:var(--south)}.ci{background:var(--islands)}
.marker-nc{background:var(--north)}.marker-ncc{background:var(--northcentral)}.marker-bay{background:var(--bay)}.marker-mb{background:var(--monterey)}.marker-cc{background:var(--central)}.marker-sc{background:var(--south)}.marker-ci{background:var(--islands)}
.tide-marker{width:38px;height:38px;font-size:8px;letter-spacing:-.02em}
.hero{background:radial-gradient(circle at 82% 22%,rgba(10,135,147,.14),transparent 30%),radial-gradient(circle at 12% 86%,rgba(23,107,89,.10),transparent 28%),linear-gradient(135deg,#f8fcfb,#edf7f4 58%,#e9f3f6)}
.hero h1{max-width:1080px}.hero-card{border-color:rgba(10,135,147,.18)}
.explorer-shell{grid-template-columns:285px minmax(0,1fr)}.filters{min-width:270px}.location-panel{width:min(470px,calc(100% - 28px))}
#map,.map-wrap{min-height:820px}
.coast-section{background:#fff}.coast-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.coast-grid article{min-height:220px;padding:25px;border:1px solid var(--line);border-radius:18px;background:#fbfdfc}.coast-grid article>span{width:46px;height:46px;display:grid;place-items:center;border-radius:14px;background:var(--soft-2);color:var(--ocean);font-size:10px;font-weight:950}.coast-grid h3{margin:32px 0 8px;font-size:23px;letter-spacing:-.025em}.coast-grid p{margin:0;color:var(--muted);line-height:1.65}
.range-line{display:block;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);color:#748984;font-size:10px;font-weight:750;line-height:1.45}
.species-facts{grid-template-columns:1fr 1fr}.species-facts .range-fact{grid-column:1/-1}.species-card-media{height:220px}.species-card-media img{object-fit:cover;object-position:center}
.dialog-image-shell img{object-fit:contain!important;object-position:center!important;background:#eaf3f1}.species-dialog-media{background:#eaf3f1}
.life-tabs button{white-space:nowrap}
@media(max-width:1000px){.coast-grid{grid-template-columns:repeat(2,1fr)}.explorer-shell{grid-template-columns:1fr}.filters{min-width:0}}
@media(max-width:650px){.coast-grid{grid-template-columns:1fr}.species-facts{grid-template-columns:1fr}.species-facts .range-fact{grid-column:auto}}


/* California Tide Pools community and map refinements */
.community-section{background:linear-gradient(180deg,#f7fbfa,#eef6f4)}
.community-feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.community-feature-grid article{padding:28px;border:1px solid var(--line);border-radius:20px;background:white;min-height:220px}
.community-feature-grid article>span{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--soft-2);font-size:11px;font-weight:900;color:var(--ocean)}
.community-feature-grid h3{margin:28px 0 10px;font-size:23px}
.community-feature-grid p{margin:0;color:var(--muted);line-height:1.7}
.community-block{border-top:1px solid var(--line);padding-top:22px}
.community-heading{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.community-heading h4{margin:0 0 5px}.community-heading p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}
.community-mode{font-size:9px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;padding:7px 9px;border-radius:999px;background:#f1f5f4;color:#6c7e79;white-space:nowrap}
.community-mode.remote{background:#e0f5ec;color:#1d6d54}
.community-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:14px 0}
.community-action{border:1px solid var(--line);background:white;border-radius:11px;padding:10px 7px;font-size:10px;font-weight:850;color:var(--ink);cursor:pointer}
.community-action:hover{border-color:#80aaa1;background:#f7fbfa}
.community-action:disabled{opacity:.45;cursor:not-allowed}
.community-tabs{display:flex;gap:6px;margin:7px 0 12px;overflow:auto}
.community-tabs button{border:0;background:transparent;border-radius:999px;padding:7px 10px;font-size:9px;font-weight:850;color:var(--muted);cursor:pointer;white-space:nowrap}
.community-tabs button.active{background:var(--ink);color:white}
.community-posts{display:grid;gap:10px;max-height:460px;overflow:auto;padding-right:2px}
.community-empty{padding:16px;border:1px dashed var(--line);border-radius:12px;color:var(--muted);font-size:11px;line-height:1.5;background:#fbfdfc}
.community-post{border:1px solid var(--line);border-radius:13px;padding:13px;background:#fff}
.community-post-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.community-post-badge{font-size:8px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;color:var(--ocean)}
.community-post-meta{font-size:9px;color:#879690;text-align:right}
.community-post h5{margin:5px 0 6px;font-size:13px}
.community-post p{margin:6px 0 0;font-size:11px;line-height:1.55;color:var(--muted);white-space:pre-wrap}
.community-stars{color:#9d671b;letter-spacing:.04em;font-size:14px}
.community-report-type{display:inline-block;margin:1px 0 4px;padding:5px 7px;border-radius:8px;background:#f5efe7;color:#83592d;font-size:9px;font-weight:800}
.community-photo{display:block;width:100%;max-height:260px;object-fit:cover;border-radius:10px;margin-top:10px;background:#eef4f2}
.community-note{font-size:9px!important;color:#86958f!important;line-height:1.5!important;margin-top:12px!important}
.contribute-dialog{width:min(680px,calc(100% - 24px));max-height:92vh;border:0;border-radius:22px;padding:0;overflow:auto;background:white;box-shadow:0 28px 90px rgba(12,47,43,.3)}
.contribute-dialog::backdrop{background:rgba(8,31,29,.58);backdrop-filter:blur(4px)}
.contribute-dialog form{padding:36px}
.contribute-dialog h2{font-size:34px;letter-spacing:-.04em;margin:5px 0 4px}
.contribute-location{margin:0 0 24px;color:var(--muted);font-weight:700}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{display:grid;gap:7px;margin:12px 0}
.field>span{font-size:10px;font-weight:850;letter-spacing:.04em;text-transform:uppercase;color:#54706a}
.field input,.field select,.field textarea{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:12px;padding:12px 13px;font:inherit;background:#fbfdfc;color:var(--ink)}
.field textarea{resize:vertical;min-height:120px}
.field small{color:#82918c;font-size:9px}
.community-consent{display:flex;gap:10px;align-items:flex-start;margin:16px 0;color:var(--muted);font-size:10px;line-height:1.5}
.community-consent input{margin-top:2px}
.contribute-status{min-height:20px;color:#42645d;font-size:11px;font-weight:700;margin:8px 0}
.form-footnote{font-size:9px;color:#889690;margin:12px 0 0}
.photo-empty{min-height:220px}
@media(max-width:800px){.community-feature-grid{grid-template-columns:1fr}.community-feature-grid article{min-height:0}.community-actions{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.contribute-dialog form{padding:28px 20px}}

/* V9 refinements */
.rarity-filter-wrap{display:flex;align-items:center;gap:8px}
.rarity-filter-wrap label{font-size:10px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#5f746f}
.rarity-filter-wrap select{border:1px solid var(--line);border-radius:999px;padding:10px 14px;background:white;color:var(--ink);font-weight:750}
.inline-review-form{margin:16px 0;padding:15px;border:1px solid var(--line);border-radius:14px;background:#fbfdfc}
.inline-review-title{font-size:12px;font-weight:900;color:var(--ink);margin-bottom:8px}
.review-stars{display:flex;gap:3px;margin:0 0 10px}
.review-stars button{border:0;background:transparent;color:#c8d0cd;font-size:24px;line-height:1;padding:0 2px;cursor:pointer}
.review-stars button.selected{color:#d18a1f}
.inline-review-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.inline-review-form input[type="text"],.inline-review-form input:not([type]),.inline-review-form textarea,
#inline-review-name,#inline-review-title-input{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:10px;padding:10px 11px;background:white;font:inherit;color:var(--ink)}
.inline-review-form textarea{margin-top:8px;resize:vertical;min-height:90px}
.inline-review-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}
.inline-review-bottom label{display:flex;gap:7px;align-items:flex-start;color:var(--muted);font-size:9px;line-height:1.45}
.description-credit{font-size:10px!important;color:#82928d!important;border-top:1px solid var(--line);padding-top:14px}
.pressure-ring{width:248px;height:248px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#2f9c72 0deg 90deg,#dce3e1 90deg 360deg);box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.pressure-ring-inner{width:172px;height:172px;border-radius:50%;display:grid;place-content:center;text-align:center;background:rgba(13,77,72,.92);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.pressure-ring-inner span{font-size:28px;font-weight:950;color:white}
.pressure-ring-inner small{font-size:9px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-top:5px}
.pressure-visual{background:linear-gradient(180deg,#0d4f4a,#0a655f)}
@media(max-width:700px){
  .inline-review-grid{grid-template-columns:1fr}
  .inline-review-bottom{align-items:stretch;flex-direction:column}
  .rarity-filter-wrap{width:100%}
  .rarity-filter-wrap select{flex:1}
}


/* Professional data, research, community, and favorites refinements */
.section{padding-top:72px;padding-bottom:72px}
.section-heading{align-items:flex-start;margin-bottom:26px}
.section-heading h2,.about-copy h2,.protect-copy h2{font-size:clamp(32px,4vw,50px);line-height:1.02}
.hero h1{font-size:clamp(48px,6vw,82px);line-height:.96}
.explorer-shell{grid-template-columns:300px minmax(0,1fr)}
.filters{padding:18px;overflow-y:auto;max-height:820px}
.filters label{margin-top:13px}
.quick-filters{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.quick-filters button{border:1px solid var(--line);border-radius:999px;background:white;padding:7px 9px;color:#4e6863;font-size:9px;font-weight:850;cursor:pointer}
.quick-filters button:hover,.quick-filters button.active{border-color:var(--ocean);background:var(--ocean);color:white}
.advanced-filters{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.advanced-filters summary{cursor:pointer;color:#3b5551;font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.advanced-filter-grid{padding-bottom:2px}
.filter-note a{display:inline-block;margin-top:8px;color:var(--ocean);font-size:10px;font-weight:850;text-decoration:none}

.marker-cluster-small,.marker-cluster-medium,.marker-cluster-large{background:rgba(15,118,110,.18)}
.marker-cluster-small div,.marker-cluster-medium div,.marker-cluster-large div{background:#0f766e;color:white;font-weight:900;box-shadow:0 5px 14px rgba(15,47,45,.22)}

.panel-title-row{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.panel-title-row>div{min-width:0}
.favorite-toggle{flex:0 0 auto;border:1px solid var(--line);border-radius:999px;background:white;color:#3f5b56;padding:8px 11px;font-size:10px;font-weight:900;cursor:pointer}
.favorite-toggle.saved{border-color:#bb6159;background:#fff2f0;color:#9d3c35}
.trust-card{margin-top:16px;padding:14px;border:1px solid var(--line);border-radius:14px;background:#f8fbfa}
.trust-card-top{display:flex;justify-content:space-between;gap:10px;align-items:center}
.trust-card-top strong{color:#536a65;font-size:9px;font-weight:800;text-align:right}
.trust-badge{display:inline-flex;align-items:center;border-radius:999px;padding:6px 8px;background:#e4f3ed;color:#21684f;font-size:8px;font-weight:950;letter-spacing:.06em;text-transform:uppercase}
.trust-badge.community-verified{background:#e5f1f8;color:#1d6383}
.trust-badge.needs-review{background:#fff1df;color:#8d5c1d}
.trust-card p{margin:9px 0;color:var(--muted);font-size:10px;line-height:1.5}
.trust-links{display:flex;flex-wrap:wrap;gap:8px}
.trust-links a{font-size:9px;font-weight:850;color:var(--ocean);text-decoration:none}
.latest-condition-card{margin-top:10px;padding:13px 14px;border:1px solid #cde4dc;border-radius:14px;background:#f0faf6}
.latest-condition-card .condition-kicker{display:block;color:#4c7369;font-size:8px;font-weight:900;letter-spacing:.07em;text-transform:uppercase}
.latest-condition-card strong{display:block;margin-top:4px;font-size:13px}
.latest-condition-card p{margin:5px 0 0;color:#54706a;font-size:10px;line-height:1.5}

.study-card{margin-top:22px;border:1px solid var(--line);border-radius:16px;padding:16px;background:#fbfdfc}
.study-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.study-kicker{display:block;color:#67807a;font-size:8px;font-weight:900;letter-spacing:.09em}
.study-card-head strong{display:block;margin-top:3px;font-size:17px}
.study-score{display:flex;align-items:baseline;gap:2px;color:var(--ocean)}
.study-score span{font-size:27px;font-weight:950;letter-spacing:-.04em}
.study-score small{font-size:9px;font-weight:900}
.study-explainer{margin:9px 0 13px;color:var(--muted);font-size:10px;line-height:1.5}
.study-metrics{display:grid;gap:10px}
.study-metric>div:first-child{display:flex;justify-content:space-between;gap:10px;margin-bottom:5px;font-size:9px;color:#536a65}
.study-metric>div:first-child strong{color:#284d47}
.study-bar{height:6px;border-radius:999px;background:#e5eeeb;overflow:hidden}
.study-bar i{display:block;height:100%;border-radius:inherit;background:#0f766e}
.study-bar.reverse i{background:#c88948}
.study-method-link{display:inline-block;margin-top:12px;color:var(--ocean);font-size:9px;font-weight:850;text-decoration:none}

.species-evidence-block{padding-top:4px}
.evidence-tier{margin-top:12px;padding:11px;border:1px solid var(--line);border-radius:12px;background:#fbfdfc}
.evidence-tier-head{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:8px}
.evidence-tier-head strong{font-size:10px;text-transform:none;letter-spacing:0;color:#234641}
.evidence-tier-head small{margin-left:auto;color:#82928d;font-size:8px}
.evidence-dot{width:9px;height:9px;border-radius:50%;display:inline-block;vertical-align:middle}
.evidence-dot.documented{background:#147d62}
.evidence-dot.common{background:#267c98}
.evidence-dot.possible{background:#a17c49}
.evidence-tag.documented{background:#e5f5ef;color:#17634e}
.evidence-tag.common{background:#e8f4f8;color:#1f6178}
.evidence-tag.possible{background:#f7efe4;color:#7c5a2d}
.evidence-empty{margin:0;color:#84948f;font-size:9px;line-height:1.45}
.evidence-note{margin:10px 0 0;color:#82918d;font-size:9px;line-height:1.5}

.condition-preset-wrap{margin-top:14px}
.condition-preset-wrap>span{display:block;margin-bottom:7px;color:#526b66;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.06em}
.condition-presets{display:flex;flex-wrap:wrap;gap:6px}
.condition-presets button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 8px;color:#48645f;font-size:8px;font-weight:850;cursor:pointer}
.condition-presets button:hover{border-color:var(--ocean);color:var(--ocean)}

.favorites-open{position:absolute;left:14px;top:14px;z-index:950;border:1px solid rgba(255,255,255,.8);border-radius:999px;background:rgba(255,255,255,.94);box-shadow:0 8px 24px rgba(15,47,45,.14);padding:9px 12px;color:#294a45;font-size:10px;font-weight:900;cursor:pointer;backdrop-filter:blur(10px)}
.favorites-open span{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-left:4px;border-radius:999px;background:#0f766e;color:white;font-size:8px}
.favorites-drawer{position:absolute;left:14px;top:58px;z-index:960;width:min(330px,calc(100% - 28px));max-height:520px;overflow:auto;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.98);box-shadow:0 20px 50px rgba(15,47,45,.22);backdrop-filter:blur(12px)}
.favorites-drawer-head{position:sticky;top:0;display:flex;justify-content:space-between;align-items:flex-start;padding:14px;border-bottom:1px solid var(--line);background:white}
.favorites-drawer-head strong{display:block;margin-top:3px;font-size:15px}
.favorites-drawer-head button{border:0;background:transparent;font-size:20px;color:#4b6460;cursor:pointer}
.favorites-list{padding:8px}
.favorite-row{width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px;border:0;border-bottom:1px solid #edf2f0;background:white;padding:11px 8px;text-align:left;color:var(--ink);cursor:pointer}
.favorite-row:hover{background:#f5faf8}
.favorite-row strong,.favorite-row small{display:block}
.favorite-row strong{font-size:11px}
.favorite-row small{margin-top:3px;color:var(--muted);font-size:8px}
.favorite-row i{font-style:normal;color:#75918b}
.favorites-empty{padding:18px;color:var(--muted);font-size:10px;line-height:1.5}

.photo-attribution-panel{padding:10px 13px 12px;background:#0b2523;color:white}
.photo-attribution-panel span{position:static!important;display:block!important;padding:0!important;background:transparent!important;color:#e8f4f1!important;font-size:9px!important;line-height:1.45!important}
.photo-attribution-panel a,.photo-attribution-panel button{display:inline-block;margin:7px 8px 0 0;border:0;background:transparent;padding:0;color:#9dd9cd;font-size:8px;font-weight:850;text-decoration:none;cursor:pointer}
.photo-attribution-panel button{color:#f3c8c2}
.science-data-note strong{color:#234641}
.science-profile-grid>div{padding:11px;border:1px solid var(--line);border-radius:11px;background:#fbfdfc}
.science-profile-grid span,.science-profile-grid .photo-report-dialog{width:min(560px,calc(100% - 24px));border:0;border-radius:20px;padding:0;box-shadow:0 28px 90px rgba(12,47,43,.3)}
.photo-report-dialog::backdrop{background:rgba(8,31,29,.58);backdrop-filter:blur(4px)}
.photo-report-dialog form{padding:32px}
.photo-report-dialog h2{margin:5px 0 8px;font-size:30px;letter-spacing:-.04em}

.method-nav{display:flex;gap:18px}
.methodology-main{max-width:1180px;margin:0 auto;padding:0 28px 80px}
.methodology-hero{padding:92px 0 52px;border-bottom:1px solid var(--line)}
.methodology-hero h1{max-width:920px;margin:5px 0 18px;font-size:clamp(48px,7vw,82px);line-height:.95;letter-spacing:-.055em}
.methodology-hero>p:not(.eyebrow){max-width:760px;color:var(--muted);font-size:18px;line-height:1.65}
.methodology-stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.methodology-stats span{padding:9px 11px;border:1px solid var(--line);border-radius:999px;background:white;color:#59716c;font-size:10px}
.methodology-stats strong{color:var(--ink)}
.method-section{padding:58px 0;border-bottom:1px solid var(--line)}
.method-section h2{max-width:860px;margin:5px 0 16px;font-size:clamp(30px,4vw,48px);letter-spacing:-.045em}
.method-section>p{max-width:850px;color:var(--muted);font-size:15px;line-height:1.75}
.method-card-grid{display:grid;gap:14px;margin-top:24px}
.method-card-grid.three{grid-template-columns:repeat(3,1fr)}
.method-card-grid article{padding:20px;border:1px solid var(--line);border-radius:15px;background:white}
.method-card-grid h3{margin:15px 0 7px;font-size:18px}
.method-card-grid p{margin:0;color:var(--muted);font-size:12px;line-height:1.65}
.method-source-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px}
.method-source-grid a{padding:17px;border:1px solid var(--line);border-radius:14px;background:white;text-decoration:none}
.method-source-grid strong,.method-source-grid span{display:block}
.method-source-grid strong{font-size:13px}
.method-source-grid span{margin-top:5px;color:var(--muted);font-size:10px;line-height:1.5}
.method-source-grid a:hover{border-color:#88b9b1}
.method-callout{margin-top:20px;padding:15px;border-left:3px solid var(--ocean);background:#f4faf8}
.method-score-table{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin:24px 0}
.method-score-table>div{padding:14px;border:1px solid var(--line);border-radius:13px;background:white}
.method-score-table strong,.method-score-table span{display:block}
.method-score-table strong{font-size:20px;color:var(--ocean)}
.method-score-table span{margin-top:5px;font-size:10px;font-weight:900}
.method-score-table p{margin:7px 0 0;color:var(--muted);font-size:9px;line-height:1.55}

@media(max-width:1000px){
  .explorer-shell{grid-template-columns:1fr}
  .filters{max-height:none}
  .method-card-grid.three,.method-source-grid{grid-template-columns:1fr}
  .method-score-table{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
  .section{padding-top:54px;padding-bottom:54px}
  .section-heading{display:block}
  .section-heading>p{margin-top:14px}
  .location-panel{position:fixed!important;left:0!important;right:0!important;top:auto!important;bottom:0!important;width:100%!important;max-height:84vh!important;border-radius:20px 20px 0 0!important;border-bottom:0!important;z-index:4000!important}
  .close-panel{position:fixed!important;top:auto!important;right:14px!important;bottom:calc(84vh - 47px)!important;z-index:4100!important}
  .location-photo img{height:220px}
  .panel-body{padding:20px}
  .science-profile-grid .species-dialog[open]{border-radius:18px 18px 0 0!important}
  .favorites-open{left:10px;top:10px}
  .favorites-drawer{left:10px;top:52px;width:calc(100% - 20px)}
  .methodology-main{padding:0 18px 60px}
  .methodology-hero{padding:65px 0 40px}
  .method-score-table{grid-template-columns:1fr}
  .method-nav{gap:10px}
}

/* V11 location photo safety and upload refinements */
.location-photo .photo-empty.safe-empty{min-height:210px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:28px;background:linear-gradient(145deg,#eff6f4,#f8fbfa);color:var(--muted)}
.photo-empty.safe-empty .photo-empty-icon{width:44px;height:44px;border:1px solid var(--line);border-radius:13px;display:grid;place-items:center;color:#6f8e88;background:white;font-size:20px}
.photo-empty.safe-empty strong{font-size:16px;color:var(--ink)}
.photo-empty.safe-empty span{max-width:330px;font-size:11px;line-height:1.55}
.photo-upload-control{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.photo-file-input{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;clip-path:inset(50%)!important}
.photo-choose-button,.photo-clear-button{display:inline-flex;align-items:center;justify-content:center;border-radius:11px;padding:11px 14px;font-size:11px;font-weight:850;cursor:pointer}
.photo-choose-button{background:var(--ink);color:white;border:1px solid var(--ink)}
.photo-choose-button:hover{opacity:.9}
.photo-clear-button{background:white;color:#8a4c43;border:1px solid #e2c5bf}
.contribute-photo-preview{display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px;align-items:center;margin-top:10px;padding:10px;border:1px solid var(--line);border-radius:13px;background:#f8fbfa}
.contribute-photo-preview img{width:88px;height:72px;object-fit:cover;border-radius:9px;background:#e9f1ef}
.contribute-photo-preview div{min-width:0;display:grid;gap:4px}
.contribute-photo-preview strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:var(--ink)}
.contribute-photo-preview span{font-size:10px;color:var(--muted)}
@media(max-width:700px){.location-photo .photo-empty.safe-empty{min-height:155px}.contribute-photo-preview{grid-template-columns:72px minmax(0,1fr)}.contribute-photo-preview img{width:72px;height:62px}}

/* V12 footer contact */
.footer-contact{display:flex;flex-direction:column;gap:3px;min-width:190px}
.footer-contact span{font-size:9px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.footer-contact a{color:var(--ink);font-weight:800;text-decoration:none}
.footer-contact a:hover{text-decoration:underline}
@media(max-width:760px){.footer-contact{min-width:0}}


.science-profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:18px 0 22px}
.science-profile-grid>div{padding:11px;border:1px solid var(--line);border-radius:11px;background:#fbfdfc}
.science-profile-grid span,.science-profile-grid strong{display:block}
.science-profile-grid span{color:#67807a;font-size:8px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.science-profile-grid strong{margin-top:4px;color:#183f3a;font-size:10px;line-height:1.45}
.science-profile-grid .similar-species-fact{grid-column:1/-1}
@media(max-width:650px){.science-profile-grid{grid-template-columns:1fr}.science-profile-grid .similar-species-fact{grid-column:auto}}