/* A compact illustrated entry point into each animal's specimen profile. */
:is(#triassic,#jurassic,#early-cretaceous,#cretaceous,#present) .jurassic-species{grid-template-columns:78px minmax(0,1fr) 44px;column-gap:14px;width:380px;max-width:calc(100% - 12%);padding:15px 17px;border:1px solid #d6c39c42;border-radius:8px;background:linear-gradient(125deg,#202522e8,#101715db);box-shadow:0 12px 36px #0003,inset 0 1px #fff8e608;backdrop-filter:blur(16px);transition:border-color .25s,box-shadow .25s,background-color .25s}
.species-mark{position:relative;overflow:hidden;display:grid;place-items:center;width:78px;height:54px;align-self:center;color:#dbc7a2;border:1px solid #d6c39c24;border-radius:6px;background:radial-gradient(ellipse at 50% 80%,#bca47816,transparent 85%);transition:color .25s,border-color .25s}
.species-mark svg{position:absolute;inset:4px 5px;display:block;width:calc(100% - 10px);height:calc(100% - 8px);overflow:visible;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.species-mark :is(path,circle){vector-effect:non-scaling-stroke}
.species-mark .contour{stroke-width:.9;fill:#d6c39c07}.species-mark .far-contour{stroke-width:.65;opacity:.45}
.species-mark .anatomy{stroke-width:.55;opacity:.55}.species-mark .armor{stroke-width:.5;opacity:.45}.species-mark .feather{stroke-width:.45;opacity:.45}
.species-mark :is(.fine,.hatch,.eye-ring){display:none}.species-mark .eye{fill:currentColor;stroke:none}
:is(#triassic,#jurassic,#early-cretaceous,#cretaceous,#present) .jurassic-species>div{min-width:0}
:is(#triassic,#jurassic,#early-cretaceous,#cretaceous,#present) .jurassic-species i{font-size:21px;line-height:1.15}
:is(#triassic,#jurassic,#early-cretaceous,#cretaceous,#present) .jurassic-species>button:is([data-jurassic-detail],[data-period-detail]){width:44px;height:44px;min-width:44px;min-height:44px;margin:0;padding:0;border:1px solid #d6c39c3d;border-radius:50%;font-size:21px;color:#d8c5a0;background:#d6c39c06;transition:border-color .25s,background .25s,translate .25s}
:is(#triassic,#jurassic,#early-cretaceous,#cretaceous,#present) .jurassic-species:hover,:is(#triassic,#jurassic,#early-cretaceous,#cretaceous,#present) .jurassic-species:focus-within{border-color:#dbc59a8c;box-shadow:0 14px 40px #0004,inset 0 1px #fff8e612}
.jurassic-species:hover .species-mark,.jurassic-species:focus-within .species-mark{color:#f2dfb9;border-color:#d6c39c55}
:is(#triassic,#jurassic,#early-cretaceous,#cretaceous,#present) .jurassic-species>button:is([data-jurassic-detail],[data-period-detail]):hover{background:#d6c39c14;border-color:#d6c39c85;translate:1px -1px}
@media(min-width:761px) and (max-width:1100px){
 :is(#triassic,#jurassic,#early-cretaceous,#cretaceous,#present) .jurassic-species{width:300px;grid-template-columns:56px minmax(0,1fr) 38px;column-gap:10px;padding:12px 14px}
 .species-mark{width:56px;height:48px}
 :is(#triassic,#jurassic,#early-cretaceous,#cretaceous,#present) .jurassic-species i{font-size:18px}
 :is(#triassic,#jurassic,#early-cretaceous,#cretaceous,#present) .jurassic-species>button:is([data-jurassic-detail],[data-period-detail]){width:38px;height:38px;min-width:38px;min-height:38px}
}
@media(max-width:760px){
 :is(#triassic,#jurassic,#early-cretaceous,#cretaceous,#present) .jurassic-species{width:fit-content;max-width:100%;grid-template-columns:56px minmax(0,1fr) 40px;column-gap:10px;padding:9px 12px;border-radius:7px}
 .species-mark{width:56px;height:46px}
 :is(#triassic,#jurassic,#early-cretaceous,#cretaceous,#present) .jurassic-species i{font-size:16px}
 :is(#triassic,#jurassic,#early-cretaceous,#cretaceous,#present) .jurassic-species>button:is([data-jurassic-detail],[data-period-detail]){width:40px;height:40px;min-width:40px;min-height:40px;font-size:19px}
}
@media(max-width:360px){
 :is(#triassic,#jurassic,#early-cretaceous,#cretaceous,#present) .jurassic-species{grid-template-columns:44px minmax(0,1fr) 36px;column-gap:8px;padding:7px 10px}
 .species-mark{width:44px;height:42px}
 :is(#triassic,#jurassic,#early-cretaceous,#cretaceous,#present) .jurassic-species>button:is([data-jurassic-detail],[data-period-detail]){width:36px;height:40px;min-width:36px;min-height:40px}
}
@media(prefers-reduced-motion:reduce){.species-mark,:is(#triassic,#jurassic,#early-cretaceous,#cretaceous,#present) .jurassic-species,:is(#triassic,#jurassic,#early-cretaceous,#cretaceous,#present) .jurassic-species>button:is([data-jurassic-detail],[data-period-detail]){transition:none}}