/* Hallmark · component: animal carousel · genre: editorial · theme: existing Carlman tokens
 * pre-emit critique: P4 H4 E4 S5 R4 V4 · contrast: pass (40–41)
 * 状態: 通常/hover/focus/active/disabled、画像 loading/error/success。
 * 参照はCarousel.dc.htmlの横カード。ページ全体の構造・書体・配色は変更しない。 */
.e-species {
  --animal-space-xs: .5rem;
  --animal-space-sm: .75rem;
  --animal-space-md: 1rem;
  --animal-space-lg: 1.5rem;
  --animal-space-xl: 2.5rem;
  --animal-space-section: clamp(3rem, 7vw, 6rem);
  --animal-side: max(1rem, calc((100% - var(--content-width)) / 2));
  --animal-radius: .375rem;
  --animal-duration: 120ms;
  min-width: 0;
  padding-block: var(--animal-space-section);
  color: var(--color-ink);
  background: var(--color-paper);
  font-family: var(--font-body);
}
.e-species *, .e-species *::before, .e-species *::after { box-sizing: border-box; }
.e-species [hidden] { display: none !important; }
.e-species .e-species-head { display: block; margin-bottom: var(--animal-space-lg); }
.e-species-head h2 { min-width: 0; max-width: 22em; margin: 0 0 var(--animal-space-md); color: var(--color-green-dark); font-family: var(--font-display); font-size: clamp(1.625rem, 3.4vw, 2.625rem); font-style: normal; font-weight: 800; line-height: 1.5; letter-spacing: -.025em; overflow-wrap: anywhere; }
.e-species-head > p { margin: 0; font-size: 1rem; line-height: 1.8; }
.e-species-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--animal-space-xs) var(--animal-space-md); margin-top: var(--animal-space-lg); }
.e-species-count { display: flex; gap: var(--animal-space-xs); align-items: baseline; margin: 0; color: var(--color-muted); font-size: .875rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.e-species-count [data-animal-current] { color: var(--color-green); font-size: 1.5rem; font-weight: 800; }
.e-species-swipe { margin: 0; color: var(--color-muted); font-size: .8125rem; white-space: nowrap; }
.e-species-controls { display: flex; align-items: center; gap: .25rem; margin-inline-start: auto; }
.e-species-play, .e-species-arrow { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border: 1px solid var(--color-rule); border-radius: var(--animal-radius); padding: var(--animal-space-xs) var(--animal-space-sm); background: var(--color-paper-2); color: var(--color-green-dark); font: 700 .8125rem/1.2 var(--font-body); text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform var(--animal-duration) var(--ease-out); }
.e-species-arrow { width: 44px; padding: var(--animal-space-xs); font-size: 1.25rem; }
.e-species-play[aria-pressed="true"] { border-color: var(--color-green); }
.e-species-play:active:not(:disabled), .e-species-arrow:active:not(:disabled) { transform: translateY(1px); }
.e-species-play:disabled, .e-species-arrow:disabled { opacity: .48; cursor: not-allowed; }
.e-species-play:focus-visible, .e-species-arrow:focus-visible, .e-species-footer a:focus-visible, .e-species-track:focus-visible { outline: 3px solid var(--color-green-dark); outline-offset: 4px; }
.e-species-track { display: flex; align-items: stretch; gap: var(--animal-space-md); width: 100%; min-width: 0; max-width: 100%; padding: .25rem var(--animal-side) var(--animal-space-md); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: var(--animal-side); scrollbar-width: thin; scrollbar-color: var(--color-green) var(--color-rule); }
.e-species-card { display: flex; flex-direction: column; flex: 0 0 calc(100% - 1.5rem); min-width: 0; max-width: 360px; margin: 0; border: 1px solid var(--color-rule); border-radius: var(--animal-radius); background: var(--color-paper-2); color: var(--color-ink); overflow: hidden; scroll-snap-align: start; }
.e-species-tail { flex: 0 0 var(--animal-space-xs); }
.e-species-image { position: relative; flex: 0 0 auto; margin: 0; aspect-ratio: 3 / 2; background: var(--color-rule); color: var(--color-ink); overflow: hidden; }
.e-species-image img { display: block; width: 100%; height: 100%; max-width: 100%; margin: 0; object-fit: cover; }
.e-species-image[data-state="loading"] img { opacity: 0; }
.e-species-image[data-state="success"] img { opacity: 1; }
.e-species-image[data-state="error"] img { visibility: hidden; }
.e-species-image-note { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--animal-space-md); font-size: .875rem; text-align: center; }
.e-species-body { display: flex; flex: 1; flex-direction: column; gap: var(--animal-space-md); min-width: 0; padding: var(--animal-space-lg) var(--animal-space-md); }
.e-species-body h3 { margin: 0; color: var(--color-green-dark); font: 800 1.5rem/1.35 var(--font-display); font-style: normal; letter-spacing: -.025em; }
.e-species-sign { margin: 0; min-height: 3.5em; color: var(--color-green); font-size: 1rem; line-height: 1.75; font-weight: 700; }
.e-species-body dl { display: grid; gap: var(--animal-space-md); margin: 0; }
.e-species-body dl > div { padding-top: var(--animal-space-sm); border-top: 1px solid var(--color-rule); }
.e-species-body dt { margin-bottom: var(--animal-space-xs); color: var(--color-green-dark); font-size: .875rem; line-height: 1.5; font-weight: 800; }
.e-species-body dd { margin: 0; font-size: 1rem; line-height: 1.8; overflow-wrap: anywhere; }
.e-species-services { margin: auto 0 0; padding-top: var(--animal-space-sm); color: var(--color-green); font-size: .8125rem; line-height: 1.8; font-weight: 700; }
.e-species-services span { padding-inline: .2em; color: var(--color-muted); }
.e-species-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--animal-space-lg); padding-top: var(--animal-space-lg); }
.e-species-footer p { margin: 0; color: var(--color-muted); font-size: .9375rem; line-height: 1.8; }
.e-species-footer a { display: inline-flex; align-items: center; gap: var(--animal-space-md); min-height: 44px; padding-block: var(--animal-space-xs); border-bottom: 1px solid var(--color-green); color: var(--color-green-dark); font-size: .9375rem; font-weight: 800; text-decoration: none; white-space: nowrap; }
.e-species-footer a:active { transform: translateY(1px); }
.e-species-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
  .e-species-play:hover:not(:disabled), .e-species-arrow:hover:not(:disabled) { background: var(--color-green-dark); color: var(--color-paper-2); }
  .e-species-footer a:hover { text-decoration: underline; text-underline-offset: .3em; }
}
@media (min-width: 40rem) {
  .e-species-card { flex-basis: 360px; }
  .e-species-tail { flex-basis: max(0px, calc(100% - 360px - var(--animal-space-md))); }
  .e-species-body { padding-inline: var(--animal-space-lg); }
}
@media (min-width: 60rem) {
  .e-species-toolbar { max-width: var(--content-width); }
}
@media (prefers-reduced-motion: reduce) {
  .e-species-track { scroll-behavior: auto !important; }
  .e-species-play, .e-species-arrow { transition: none; }
}
html[data-motion="off"] .e-species-track { scroll-behavior: auto !important; }
html[data-motion="off"] .e-species-play, html[data-motion="off"] .e-species-arrow { transition: none; }