/* Four-species chapters retain the full-width horizon and reveal the active label. */
:is(#triassic,#jurassic,#early-cretaceous,#cretaceous)[data-species-count="4"] .species-choices{position:relative;max-width:calc(100vw - 120px);gap:clamp(20px,3vw,48px)}
@media(max-width:760px){
 :is(#triassic,#jurassic,#early-cretaceous,#cretaceous)[data-species-count="4"] .species-nav{grid-template-columns:38px minmax(0,1fr) 38px;padding-inline:6px}
 :is(#triassic,#jurassic,#early-cretaceous,#cretaceous)[data-species-count="4"] .species-choices{max-width:100%;min-width:0;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;gap:22px;padding-inline:12px;pointer-events:auto;overscroll-behavior-x:contain}
 :is(#triassic,#jurassic,#early-cretaceous,#cretaceous)[data-species-count="4"] .species-choices::-webkit-scrollbar{display:none}
 :is(#triassic,#jurassic,#early-cretaceous,#cretaceous)[data-species-count="4"] .species-choices button{flex:0 0 auto;font-size:14px;min-height:50px}
}
#jurassic [data-species="archaeopteryx"] .jurassic-backdrop{object-position:90% 30%}
#early-cretaceous [data-species="microraptor"] .jurassic-backdrop{object-position:35% center}
#cretaceous [data-species="therizinosaurus"] .jurassic-backdrop{object-position:70% center}
@media(max-width:760px){
 #jurassic [data-species="archaeopteryx"] .jurassic-backdrop{object-position:68% center}
 #early-cretaceous [data-species="microraptor"] .jurassic-backdrop{object-position:58% center}
 #cretaceous [data-species="therizinosaurus"] .jurassic-backdrop{object-position:67% center}
}

@media(min-width:1001px){.species-collection:has(.collection-card:nth-child(4)) .collection-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:761px) and (max-width:1000px){.species-collection:has(.collection-card:nth-child(4)) .collection-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
 :is(#triassic,#jurassic,#early-cretaceous,#cretaceous)[data-species-count="4"] .species-choices{mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent)}
 #early-cretaceous [data-species="microraptor"] .jurassic-backdrop{top:270px!important}
}
@media(max-width:760px) and (max-height:760px){#early-cretaceous [data-species="microraptor"] .jurassic-backdrop{top:210px!important}}

#triassic [data-species="ingentia"] .jurassic-backdrop{object-position:40% center}
@media(max-width:760px){#triassic [data-species="ingentia"] .jurassic-backdrop{top:245px!important}}
@media(max-width:760px) and (max-height:760px){#triassic [data-species="ingentia"] .jurassic-backdrop{top:200px!important}}