.page-lower--ecology {
  --ecology-shell: url("data:image/svg+xml,%3Csvg width='128' height='128' viewBox='0 0 128 128' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 102c6-39 24-66 45-82 21 16 39 43 45 82H19Z' fill='black'/%3E%3Cpath d='M64 20v81M43 37l21 64M85 37l-21 64M29 64l35 37M99 64l-35 37' stroke='white' stroke-width='7' stroke-linecap='round' opacity='.55'/%3E%3Cpath d='M17 100h94v13H17z' fill='black'/%3E%3C/svg%3E");
  --ecology-kelp: url("data:image/svg+xml,%3Csvg width='96' height='160' viewBox='0 0 96 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M48 153C42 123 44 96 54 72c9-22 5-42-7-65' fill='none' stroke='black' stroke-width='10' stroke-linecap='round'/%3E%3Cpath d='M50 72c24-7 31-25 27-48-21 7-32 22-27 48ZM47 96C23 89 14 72 17 49c22 7 34 22 30 47ZM48 126c22-9 30-25 27-47-20 6-31 20-27 47Z' fill='black'/%3E%3C/svg%3E");
  --ecology-starfish: url("data:image/svg+xml,%3Csvg width='140' height='140' viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M70 8l15 42 45-6-35 29 22 40-39-22-32 32 8-45-40-21 45-7L70 8Z' fill='black'/%3E%3C/svg%3E");
  --ecology-crab: url("data:image/svg+xml,%3Csvg width='160' height='100' viewBox='0 0 160 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M49 52c0-20 14-34 31-34s31 14 31 34-14 34-31 34-31-14-31-34Z' fill='black'/%3E%3Ccircle cx='66' cy='38' r='5' fill='white'/%3E%3Ccircle cx='94' cy='38' r='5' fill='white'/%3E%3Cpath d='M48 52 19 35M112 52l29-17M49 69 19 84M111 69l30 15M41 44 16 17M119 44l25-27' stroke='black' stroke-width='9' stroke-linecap='round'/%3E%3Cpath d='M17 17C5 9 9 1 26 5c-2 8-5 12-9 12ZM143 17c12-8 8-16-9-12 2 8 5 12 9 12Z' fill='black'/%3E%3C/svg%3E");
  --ecology-squid: url("data:image/svg+xml,%3Csvg width='112' height='150' viewBox='0 0 112 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M56 8c27 25 38 56 27 84H29C18 64 29 33 56 8Z' fill='black'/%3E%3Ccircle cx='44' cy='57' r='6' fill='white'/%3E%3Ccircle cx='68' cy='57' r='6' fill='white'/%3E%3Cpath d='M34 91 16 142M46 91l-5 51M58 91v52M70 91l6 51M82 91l14 49' stroke='black' stroke-width='8' stroke-linecap='round'/%3E%3C/svg%3E");
}

@media (min-width: 1200px) {
  .page-lower--ecology .lower-breadcrumb,
  .page-lower--ecology .lower-hero__inner,
  .page-lower--ecology .lower-page-nav,
  .page-lower--ecology .lower-content,
  .page-lower--ecology .lower-related,
  .page-lower--ecology .lower-pager,
  .page-lower--ecology .lower-back {
    width: min(1680px, 100%);
  }

  .page-lower--ecology .lower-hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(360px, .52fr);
  }

  .page-lower--ecology .lower-hero__title {
    white-space: nowrap;
    font-size: clamp(3rem, 3.2vw, 4rem);
  }

  .page-lower--ecology .lower-hero__lead {
    max-width: 48rem;
  }

  .page-lower--ecology .lower-media,
  .page-lower--ecology .ecology-feature {
    grid-template-columns: minmax(300px, .48fr) minmax(0, 1fr);
    align-items: center;
  }

  .page-lower--ecology .lower-media__image,
  .page-lower--ecology .ecology-feature__image {
    width: min(100%, 540px);
  }

  .page-lower--ecology .ecology-feature:nth-of-type(3n) .ecology-feature__image,
  .page-lower--ecology .lower-media#human .lower-media__image {
    justify-self: end;
  }

  .page-lower--ecology .ecology-feature:not(:nth-of-type(3n)) .ecology-feature__image {
    justify-self: start;
  }

  .page-lower--ecology .lower-section p,
  .page-lower--ecology .lower-card p,
  .page-lower--ecology .ecology-feature__body li {
    font-size: clamp(1rem, .78vw, 1.08rem);
    line-height: 1.9;
  }
}

@media (min-width: 901px) {
  .page-lower--ecology .lower-media#human .lower-media__image {
    aspect-ratio: 803 / 1024;
  }
}

.page-lower--ecology .lower-hero__visual img {
  object-position: center 42%;
}

.page-lower--ecology .lower-section,
.page-lower--ecology .lower-note {
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at var(--ecology-glow-x, 96%) var(--ecology-glow-y, 8%), rgba(159, 233, 246, .22), transparent 9rem),
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 253, 255, .94));
}

.page-lower--ecology .lower-section::before,
.page-lower--ecology .lower-section::after {
  position: absolute;
  z-index: -1;
  content: "";
  pointer-events: none;
  background: rgba(42, 148, 214, .12);
  mask: var(--ecology-icon, var(--ecology-shell)) center / contain no-repeat;
}

.page-lower--ecology .lower-section::before {
  top: 1.2rem;
  right: 1.4rem;
  width: clamp(56px, 7vw, 108px);
  aspect-ratio: 1;
  transform: rotate(var(--ecology-rotate, -12deg));
}

.page-lower--ecology .lower-section::after {
  bottom: -1.5rem;
  left: 1.1rem;
  width: clamp(70px, 8vw, 128px);
  aspect-ratio: 1;
  background: rgba(79, 180, 197, .11);
  mask-image: var(--ecology-secondary-icon, var(--ecology-kelp));
  transform: rotate(var(--ecology-secondary-rotate, 8deg));
}

.page-lower--ecology .lower-section h2 {
  position: relative;
  width: fit-content;
  max-width: 100%;
}

.page-lower--ecology .lower-section h2::after {
  display: block;
  width: min(100%, 280px);
  height: 11px;
  margin-top: .4rem;
  content: "";
  background: url("data:image/svg+xml,%3Csvg width='320' height='16' viewBox='0 0 320 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 9c25-14 46 10 74 0s49-10 77 0 50 10 78 0 49-11 83 0' fill='none' stroke='%239fe9f6' stroke-width='3' stroke-linecap='round' opacity='.85'/%3E%3C/svg%3E") left center / contain no-repeat;
}

.page-lower--ecology #answer-title,
.page-lower--ecology #summary-title {
  width: auto;
}

.page-lower--ecology .ecology-answer {
  --ecology-icon: var(--ecology-shell);
  --ecology-secondary-icon: var(--ecology-kelp);
}

.page-lower--ecology [id="relatives"] {
  --ecology-icon: var(--ecology-shell);
  --ecology-secondary-icon: var(--ecology-kelp);
}

.page-lower--ecology [id="habitat"] {
  --ecology-icon: var(--ecology-starfish);
  --ecology-secondary-icon: var(--ecology-kelp);
  --ecology-glow-x: 8%;
}

.page-lower--ecology [id="human"] {
  --ecology-icon: var(--ecology-shell);
  --ecology-secondary-icon: var(--ecology-crab);
  --ecology-glow-x: 12%;
}

.page-lower--ecology [id="body"] {
  --ecology-icon: var(--ecology-crab);
  --ecology-secondary-icon: var(--ecology-squid);
}

.page-lower--ecology [id="life"] {
  --ecology-icon: var(--ecology-squid);
  --ecology-secondary-icon: var(--ecology-starfish);
  --ecology-glow-x: 10%;
}

.page-lower--ecology [id="wild"] {
  --ecology-icon: var(--ecology-kelp);
  --ecology-secondary-icon: var(--ecology-shell);
}

.page-lower--ecology [id="faq"] {
  --ecology-icon: var(--ecology-starfish);
  --ecology-secondary-icon: var(--ecology-crab);
}

.ecology-answer {
  display: grid;
  gap: .8rem;
  background:
    radial-gradient(circle at 94% 10%, rgba(159, 233, 246, .28), transparent 7rem),
    #fff;
}

.ecology-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.85rem, 1.8vw, 1.2rem);
}

.ecology-summary__card {
  display: grid;
  gap: .5rem;
  min-height: 100%;
  padding: clamp(1rem, 2vw, 1.25rem);
  color: #17365d;
  background: #f7fdff;
  border: 1px solid rgba(42, 148, 214, .2);
  border-radius: 8px;
}

.ecology-summary__card span {
  display: grid;
  place-items: center;
  width: 2.15rem;
  aspect-ratio: 1;
  color: #fff;
  font-weight: 700;
  background: #2a94d6;
  border-radius: 50%;
}

.ecology-summary__card strong {
  color: #00488f;
  font-size: clamp(1rem, 1.2vw, 1.12rem);
  line-height: 1.55;
}

.ecology-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.4rem);
  margin-top: clamp(1.1rem, 2vw, 1.6rem);
}

.ecology-photo-card {
  overflow: hidden;
  background: #f8fdff;
  border: 1px solid rgba(42, 148, 214, .18);
  border-radius: 8px;
}

.ecology-photo-card img,
.ecology-feature__image img,
.ecology-gallery img,
.ecology-map img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ecology-photo-card figure,
.ecology-feature__image,
.ecology-map,
.ecology-gallery figure {
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  margin: 0;
}

.ecology-photo-card figure::after,
.ecology-feature__image::after,
.ecology-map::after,
.ecology-gallery figure::after {
  position: absolute;
  right: clamp(.55rem, 2.4cqw, 1rem);
  bottom: clamp(.55rem, 2.4cqw, 1rem);
  z-index: 4;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(8px, 2.6cqw, 15px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .03em;
  white-space: nowrap;
  content: "(C)TOBA AQUARIUM";
  text-shadow: 0 1px 3px rgba(0, 31, 56, .72);
  pointer-events: none;
}

.ecology-photo-card figure {
  aspect-ratio: 1160 / 717;
}

.ecology-photo-card:nth-child(2) figure {
  border-radius: 34% 66% 54% 46% / 46% 38% 62% 54%;
}

.ecology-photo-card__body {
  padding: 1rem;
}

.ecology-photo-card__body h3 {
  margin: 0 0 .45rem;
}

.ecology-map {
  overflow: hidden;
  margin-top: clamp(1rem, 2vw, 1.5rem);
  background: #effbff;
  border: 1px solid rgba(42, 148, 214, .18);
  border-radius: 8px;
}

.ecology-map img {
  height: auto;
}

.ecology-subspecies {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.9rem, 1.8vw, 1.25rem);
  margin-top: clamp(1rem, 2vw, 1.5rem);
}

.ecology-fact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  margin: 1rem 0;
}

.ecology-fact {
  padding: .85rem 1rem;
  color: #00488f;
  font-weight: 700;
  line-height: 1.55;
  background: #f0fbff;
  border: 1px solid rgba(42, 148, 214, .2);
  border-radius: 8px;
}

.ecology-feature {
  display: grid;
  grid-template-columns: minmax(240px, .72fr) minmax(0, 1fr);
  gap: clamp(1rem, 2.6vw, 2rem);
  align-items: start;
  margin-top: clamp(1.2rem, 2.5vw, 2rem);
  padding-top: clamp(1.2rem, 2.5vw, 2rem);
  border-top: 1px solid rgba(42, 148, 214, .18);
}

.page-lower--ecology .ecology-feature:nth-of-type(3n) > :first-child,
.page-lower--ecology .lower-media#human .lower-media__image {
  order: 2;
}

.page-lower--ecology .ecology-feature:nth-of-type(3n) > .ecology-feature__body,
.page-lower--ecology .lower-media#human .lower-media__body {
  order: 1;
}

.ecology-feature:first-of-type {
  border-top: 0;
}

.ecology-feature__image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #effbff;
  border-radius: 8px;
}

.page-lower--ecology .ecology-feature__image--tools,
.page-lower--ecology .ecology-feature__image--swim,
.page-lower--ecology .ecology-feature__image--walk {
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .7), transparent 42%),
    linear-gradient(180deg, #e9fbff 0%, #d5f5fb 100%);
  border-radius: 8px;
  clip-path: none;
}

.page-lower--ecology .ecology-feature__image--tools img,
.page-lower--ecology .ecology-feature__image--swim img,
.page-lower--ecology .ecology-feature__image--walk img {
  object-fit: contain;
  transform: none;
}

.page-lower--ecology .ecology-feature__image--tools {
  aspect-ratio: 16 / 10;
}

.page-lower--ecology .ecology-feature__image--tools img {
  object-position: center center;
}

.page-lower--ecology .ecology-feature__image--walk {
  aspect-ratio: 1 / 1;
}

.page-lower--ecology .ecology-feature__image--walk img {
  object-position: center top;
}

.page-lower--ecology .ecology-feature:nth-of-type(4n+2) .ecology-feature__image,
.page-lower--ecology .ecology-gallery figure:nth-child(2) {
  border-radius: 38% 62% 56% 44% / 48% 40% 60% 52%;
}

.page-lower--ecology .ecology-feature:nth-of-type(5n) .ecology-feature__image {
  border-radius: 34px 34px 34px 10px;
  clip-path: polygon(0 0, 100% 0, 100% 84%, 62% 84%, 54% 100%, 48% 84%, 0 84%);
}

.page-lower--ecology .ecology-feature:nth-of-type(5n) .ecology-feature__image img {
  transform: scale(1.03);
}

.page-lower--ecology .ecology-feature:nth-of-type(5n) .ecology-feature__image--legs {
  border-radius: 8px;
  clip-path: none;
}

.page-lower--ecology .ecology-feature:nth-of-type(5n) .ecology-feature__image--legs img {
  transform: none;
}

.page-lower--ecology .ecology-feature__image--tools,
.page-lower--ecology .ecology-feature__image--swim,
.page-lower--ecology .ecology-feature__image--walk {
  border-radius: 8px !important;
  clip-path: none !important;
}

.page-lower--ecology .ecology-feature__image--tools img,
.page-lower--ecology .ecology-feature__image--swim img,
.page-lower--ecology .ecology-feature__image--walk img {
  object-fit: contain !important;
  transform: none !important;
}

.ecology-feature__image--portrait {
  aspect-ratio: 3 / 4;
}

.ecology-feature__body h3 {
  margin-top: 0;
}

.ecology-feature__body ul,
.ecology-list {
  display: grid;
  gap: .55rem;
  margin: .75rem 0 0;
  padding: 0;
  list-style: none;
}

.ecology-feature__body li,
.ecology-list li {
  position: relative;
  padding-left: 1.25rem;
  color: #17365d;
  line-height: 1.9;
}

.ecology-feature__body li::before,
.ecology-list li::before {
  position: absolute;
  top: .78em;
  left: 0;
  width: .48rem;
  aspect-ratio: 1;
  content: "";
  background: #9fe9f6;
  border-radius: 50%;
}

.ecology-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
  margin-top: .9rem;
}

.ecology-gallery figure {
  overflow: hidden;
  aspect-ratio: 1160 / 717;
  background: #effbff;
  border-radius: 8px;
}

.ecology-callout {
  margin-top: 1rem;
  padding: 1rem 1.15rem;
  color: #17365d;
  background: #fffdf7;
  border: 1px solid rgba(214, 170, 74, .24);
  border-radius: 8px;
}

.ecology-callout strong {
  color: #7b5b16;
}

.ecology-report {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(246, 253, 255, .96)),
    #fff;
}

@media (max-width: 900px) {
  .ecology-summary,
  .ecology-subspecies,
  .ecology-fact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ecology-feature {
    grid-template-columns: 1fr;
  }

  .page-lower--ecology .ecology-feature:nth-of-type(3n) > :first-child,
  .page-lower--ecology .lower-media#human .lower-media__image {
    order: initial;
  }

  .page-lower--ecology .ecology-feature:nth-of-type(3n) > .ecology-feature__body,
  .page-lower--ecology .lower-media#human .lower-media__body {
    order: initial;
  }

  .ecology-feature__image--portrait {
    aspect-ratio: 1413 / 1803;
  }

  .page-lower--ecology .lower-hero__title {
    white-space: normal;
  }
}

@media (max-width: 640px) {
  .ecology-summary,
  .ecology-compare,
  .ecology-subspecies,
  .ecology-fact-grid,
  .ecology-gallery {
    grid-template-columns: 1fr;
  }

  .ecology-photo-card__body,
  .ecology-summary__card {
    padding: .95rem;
  }
}