/* Shared approved Jurassic layout, applied to the two expanded periods. */
@media(max-width:760px){:is(#triassic,#early-cretaceous,#cretaceous,#present) .landscape{object-position:35% center}#triassic .landscape{object-position:42% center}.time-rail{background:linear-gradient(transparent,#091510b3);border-radius:4px}}
:is(#triassic,#early-cretaceous,#cretaceous,#present){height:100svh;min-height:720px}:is(#triassic,#early-cretaceous,#cretaceous,#present) .jurassic-scene{height:100%;min-height:720px;position:relative;touch-action:pan-y}:is(#triassic,#early-cretaceous,#cretaceous,#present) .jurassic-scene:focus-visible{outline:1px solid #dfb775;outline-offset:-4px}
.species-nav{position:absolute;z-index:6;right:6%;top:112px;display:flex;align-items:center;gap:10px;padding:7px 10px;border:1px solid #c8ba8d55;background:#0d2119a6;backdrop-filter:blur(12px);border-radius:4px}.species-nav button{min-width:38px;min-height:38px;font-size:20px}.species-nav button:disabled{opacity:.25;cursor:default}.species-choices{display:flex;gap:12px}.species-choices button{font-size:13px;border-bottom:1px solid transparent;padding:5px 0;min-width:0}.species-choices button[aria-pressed=true]{color:var(--gold);border-color:var(--gold)}.species-count{font-size:11px;letter-spacing:1px;color:#c5c9b8}.previous-species-art{z-index:1;pointer-events:none;transition:opacity .7s ease}.previous-species-art.fading{opacity:0}:is(#triassic,#early-cretaceous,#cretaceous,#present) .jurassic-heading{z-index:4}:is(#triassic,#early-cretaceous,#cretaceous,#present) .shade,:is(#triassic,#early-cretaceous,#cretaceous,#present) .jurassic-light,:is(#triassic,#early-cretaceous,#cretaceous,#present) .dust{z-index:2;pointer-events:none}:is(#triassic,#early-cretaceous,#cretaceous,#present) .moment-nav{gap:22px}:is(#triassic,#early-cretaceous,#cretaceous,#present) .moment-nav button{font-size:15px}:is(#triassic,#early-cretaceous,#cretaceous,#present) .jurassic-heading :is(h1,h2){font-size:clamp(40px,4.2vw,66px)}
@media(min-width:761px) and (max-height:850px){.species-nav{top:100px}.species-choices{gap:10px}.species-choices button{font-size:12px}:is(#triassic,#early-cretaceous,#cretaceous,#present) .jurassic-heading{width:60%}:is(#triassic,#early-cretaceous,#cretaceous,#present) .jurassic-heading :is(h1,h2){font-size:40px}:is(#triassic,#early-cretaceous,#cretaceous,#present) .moment-nav{gap:18px}}
@media(max-width:760px){:is(#triassic,#early-cretaceous,#cretaceous,#present){height:100svh;min-height:844px}:is(#triassic,#early-cretaceous,#cretaceous,#present) .jurassic-scene{min-height:844px}.species-nav{left:6%;right:6%;top:78px;justify-content:space-between;gap:4px;padding:3px 5px}.species-nav button{min-width:26px;min-height:36px}.species-choices{gap:10px}.species-choices button{font-size:11px}.species-count{font-size:9px;white-space:nowrap}:is(#triassic,#early-cretaceous,#cretaceous,#present) .jurassic-heading{top:137px}:is(#triassic,#early-cretaceous,#cretaceous,#present) .jurassic-heading>.eyebrow{font-size:10px;margin-bottom:8px}:is(#triassic,#early-cretaceous,#cretaceous,#present) .jurassic-heading>.eyebrow span{display:none}:is(#triassic,#early-cretaceous,#cretaceous,#present) .jurassic-heading :is(h1,h2){font-size:32px}:is(#triassic,#early-cretaceous,#cretaceous,#present) .jurassic-heading :is(h1,h2) br{display:none}:is(#triassic,#early-cretaceous,#cretaceous,#present) .jurassic-backdrop{top:203px}:is(#triassic,#early-cretaceous,#cretaceous,#present) .jurassic-species{top:224px;padding:6px 9px}:is(#triassic,#early-cretaceous,#cretaceous,#present) .jurassic-species small{font-size:8px}:is(#triassic,#early-cretaceous,#cretaceous,#present) .jurassic-story{padding:14px 16px;bottom:calc(23% + 90px)}:is(#triassic,#early-cretaceous,#cretaceous,#present) .jurassic-story h3{font-size:21px}:is(#triassic,#early-cretaceous,#cretaceous,#present) .jurassic-story>p:last-child{font-size:13px;line-height:1.6}:is(#triassic,#early-cretaceous,#cretaceous,#present) .jurassic-story .eyebrow{font-size:9px}:is(#triassic,#early-cretaceous,#cretaceous,#present) .moment-nav{gap:6px}:is(#triassic,#early-cretaceous,#cretaceous,#present) .moment-nav button{font-size:12px}:is(#triassic,#early-cretaceous,#cretaceous,#present) .moment-nav button span{margin-right:4px;font-size:9px}:is(#triassic,#early-cretaceous,#cretaceous,#present) .moment-nav a{font-size:11px}}
@media(max-width:760px){:is(#triassic,#early-cretaceous,#cretaceous,#present) .jurassic-heading{top:129px}:is(#triassic,#early-cretaceous,#cretaceous,#present) .jurassic-heading>.eyebrow span{display:block;font-size:9px;line-height:1.4;margin-top:3px}:is(#triassic,#early-cretaceous,#cretaceous,#present) .jurassic-species{top:211px}}
:is(#triassic,#early-cretaceous,#cretaceous,#present) .species-nav{top:auto;bottom:195px;left:16%;right:auto;width:440px;max-width:calc(78% - 40px);padding:0;gap:10px;border:0;border-bottom:1px solid #dcc59a44;background:linear-gradient(90deg,#0b1d16b8,#0b1d1630);border-radius:0;backdrop-filter:blur(6px)}
:is(#triassic,#early-cretaceous,#cretaceous,#present) .species-nav>button{width:36px;min-width:36px;min-height:48px;color:#d9c49b;font-size:21px;transition:color .2s,background .2s}:is(#triassic,#early-cretaceous,#cretaceous,#present) .species-nav>button:hover:enabled{color:#fff2ce;background:#d4b67512}:is(#triassic,#early-cretaceous,#cretaceous,#present) .species-nav>button:disabled{opacity:.2}
:is(#triassic,#early-cretaceous,#cretaceous,#present) .species-choices{flex:1;justify-content:space-between;gap:12px}:is(#triassic,#early-cretaceous,#cretaceous,#present) .species-choices button{font-size:14px;min-height:48px;padding:0;border:0;position:relative;color:#c4cbbe;transition:color .2s}:is(#triassic,#early-cretaceous,#cretaceous,#present) .species-choices button[aria-pressed=true]{color:#efce95}:is(#triassic,#early-cretaceous,#cretaceous,#present) .species-choices button[aria-pressed=true]:after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:2px;background:#e4bd79;box-shadow:0 0 12px #e4bd7933}:is(#triassic,#early-cretaceous,#cretaceous,#present) .species-count{font-size:10px;white-space:nowrap;color:#aebaa8;margin-left:2px}
:is(#triassic,#early-cretaceous,#cretaceous,#present) .jurassic-species{display:grid;grid-template-columns:6px 1fr auto;column-gap:12px;row-gap:0}:is(#triassic,#early-cretaceous,#cretaceous,#present) .animal-compare{grid-column:2/4;margin:11px 0 0;padding:11px 0 0;border-top:1px solid #d4c5a335;min-height:34px;font-size:12px;color:#dedfcf;text-align:left;letter-spacing:.1px}:is(#triassic,#early-cretaceous,#cretaceous,#present) .animal-compare span{color:var(--gold);margin-right:10px}.detail-compare{display:block;padding:13px 18px;margin:0 0 24px;border:1px solid #d4ba7955;border-radius:3px;background:#d4ba7910;font-size:14px;color:var(--cream)}.detail-compare span{color:var(--gold);margin-right:10px}
@media(min-width:761px) and (max-height:850px){:is(#triassic,#early-cretaceous,#cretaceous,#present) .species-nav{top:auto;bottom:190px}}
@media(max-width:1100px) and (min-width:761px){:is(#triassic,#early-cretaceous,#cretaceous,#present) .species-nav{left:14%;width:40%;gap:6px}:is(#triassic,#early-cretaceous,#cretaceous,#present) .species-choices{gap:8px}:is(#triassic,#early-cretaceous,#cretaceous,#present) .species-choices button{font-size:12px}:is(#triassic,#early-cretaceous,#cretaceous,#present) .species-nav>button{width:27px;min-width:27px}}
@media(max-width:760px){:is(#triassic,#early-cretaceous,#cretaceous,#present) .species-nav{left:6%;right:6%;top:auto;bottom:23%;width:auto;max-width:none;gap:6px}:is(#triassic,#early-cretaceous,#cretaceous,#present) .species-nav>button{min-height:40px;width:27px;min-width:27px;font-size:19px}:is(#triassic,#early-cretaceous,#cretaceous,#present) .species-choices{gap:10px}:is(#triassic,#early-cretaceous,#cretaceous,#present) .species-choices button{font-size:11px;min-height:40px}:is(#triassic,#early-cretaceous,#cretaceous,#present) .species-count{font-size:9px}:is(#triassic,#early-cretaceous,#cretaceous,#present) .jurassic-heading{top:90px}:is(#triassic,#early-cretaceous,#cretaceous,#present) .jurassic-backdrop{top:230px}:is(#triassic,#early-cretaceous,#cretaceous,#present) .jurassic-species{top:177px;padding:8px 12px;column-gap:9px}:is(#triassic,#early-cretaceous,#cretaceous,#present) .animal-compare{font-size:11px;margin-top:7px;padding-top:7px;min-height:27px}:is(#triassic,#early-cretaceous,#cretaceous,#present) .jurassic-species>button[data-jurassic-detail]{min-height:28px}:is(#triassic,#early-cretaceous,#cretaceous,#present) .jurassic-species small{font-size:8px}}
:is(#triassic,#early-cretaceous,#cretaceous,#present) .jurassic-story{padding:0;overflow:hidden}:is(#triassic,#early-cretaceous,#cretaceous,#present) .story-tabs{display:flex;gap:0;padding:0 20px;border-bottom:1px solid #d1bf9133;background:#081b1540}:is(#triassic,#early-cretaceous,#cretaceous,#present) .story-tabs button{position:relative;flex:1;min-height:44px;padding:0 8px;border:0;font-size:12px;font-weight:400;letter-spacing:.2px;white-space:nowrap;color:#bcc8b9;transition:color .2s,background .2s}:is(#triassic,#early-cretaceous,#cretaceous,#present) .story-tabs button:hover{color:#f4e9d4;background:#d8bc7a08}:is(#triassic,#early-cretaceous,#cretaceous,#present) .story-tabs button[aria-selected=true]{color:#ecd2a0}:is(#triassic,#early-cretaceous,#cretaceous,#present) .story-tabs button[aria-selected=true]:after{content:'';position:absolute;height:2px;bottom:-1px;left:8px;right:8px;background:#d9b574;box-shadow:0 0 10px #d9b57422}:is(#triassic,#early-cretaceous,#cretaceous,#present) .story-tabs button:focus-visible{outline:1px solid #e5c185;outline-offset:-5px;border-radius:2px}:is(#triassic,#early-cretaceous,#cretaceous,#present) .story-body{padding:22px 24px;display:flow-root}:is(#triassic,#early-cretaceous,#cretaceous,#present) [data-story-label]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}:is(#triassic,#early-cretaceous,#cretaceous,#present) .story-body>p:last-child{clear:both;font-size:16px;line-height:1.65;color:#e4e7db;margin:0}:is(#triassic,#early-cretaceous,#cretaceous,#present) .chapter-continue{position:absolute;right:6%;bottom:146px;z-index:5;font-size:13px;padding:10px 0}:is(#triassic,#early-cretaceous,#cretaceous,#present) .chapter-continue span{margin-left:10px;color:var(--gold)}
@media(min-width:761px) and (max-height:850px){:is(#triassic,#early-cretaceous,#cretaceous,#present) .story-body{padding:16px 20px}:is(#triassic,#early-cretaceous,#cretaceous,#present) .story-body>p:last-child{font-size:15px}:is(#triassic,#early-cretaceous,#cretaceous,#present) .story-tabs{padding:0 16px}:is(#triassic,#early-cretaceous,#cretaceous,#present) .story-tabs button{font-size:11px;min-height:40px}:is(#triassic,#early-cretaceous,#cretaceous,#present) .chapter-continue{bottom:140px}}
@media(max-width:760px){:is(#triassic,#early-cretaceous,#cretaceous,#present) .story-tabs{padding:0 8px}:is(#triassic,#early-cretaceous,#cretaceous,#present) .story-tabs button{font-size:11px;min-height:40px;letter-spacing:0;padding:0 5px}:is(#triassic,#early-cretaceous,#cretaceous,#present) .story-body{padding:14px 16px}:is(#triassic,#early-cretaceous,#cretaceous,#present) .story-body>p:last-child{font-size:13px;line-height:1.6}:is(#triassic,#early-cretaceous,#cretaceous,#present) .chapter-continue{bottom:135px;right:6%;font-size:11px;padding:5px 0}}
:is(#triassic,#early-cretaceous,#cretaceous,#present){overflow-anchor:none}

.species-chapter .jurassic-heading h1{font-family:var(--serif);font-weight:400;letter-spacing:-1.8px;line-height:1.05;margin:0}.species-chapter .jurassic-heading h1 em{font-family:Georgia,serif;font-size:.85em;font-weight:400;color:#e6d2ab}.species-chapter .jurassic-backdrop{transform:none!important;will-change:auto}.species-chapter .jurassic-heading>.eyebrow{font-size:12px;letter-spacing:2px;line-height:1.7;margin-bottom:22px}.species-chapter .jurassic-heading>.eyebrow span{font-size:11px;letter-spacing:1.2px;margin-top:6px;color:#d6d8c9}.species-chapter .jurassic-species small{font-size:10px;letter-spacing:1px;line-height:1.5}
@media(max-width:760px){.species-chapter .jurassic-heading>.eyebrow{font-size:10px;letter-spacing:1.5px;line-height:1.6;margin-bottom:8px}.species-chapter .jurassic-heading>.eyebrow span{font-size:9px;line-height:1.4;margin-top:3px}.species-chapter .jurassic-species small{font-size:8px;letter-spacing:.5px}.species-chapter .jurassic-heading h1 br{display:none}.species-chapter .species-choices{gap:6px}.species-chapter .species-choices button{font-size:11px}}
.tree-clades{border-left:1px solid #83bdb344;margin:18px 0 26px 14px;padding-left:22px}.tree-clade{margin-bottom:24px}.tree-clade h3{font:22px Georgia,serif;color:var(--gold);margin:0 0 6px}.tree-clade>p{font-size:12px;margin:0 0 12px}.tree-clade>div{display:flex;flex-wrap:wrap;gap:9px}.tree-clade button{flex:1 1 150px;border:1px solid #9bbbaa3d;background:#a9bda309;padding:13px 15px;text-align:left;min-height:60px}.tree-clade button span{display:block;font:17px Georgia,serif}.tree-clade button small{display:block;color:#adbba9;font-size:10px;margin-top:7px}.tree-clade button:hover{border-color:var(--gold)}
@media(max-width:760px){.tree-clades{margin-left:5px;padding-left:14px}.tree-clade button{flex-basis:120px}.tree-clade button span{font-size:16px}}
.period-comparison{height:330px!important;max-height:330px;width:100%;min-height:0!important}
@media(max-width:760px){.period-comparison{height:250px!important;max-height:250px}}
@media(max-width:380px){:is(#triassic,#early-cretaceous,#cretaceous,#present) .species-choices{gap:6px}:is(#triassic,#early-cretaceous,#cretaceous,#present) .species-choices button{font-size:10px}:is(#triassic,#early-cretaceous,#cretaceous,#present) .species-nav{gap:4px}}
@media(max-width:760px){#cretaceous .jurassic-scene[data-species="ankylosaurus"] .jurassic-backdrop{top:145px}}
@media(max-width:760px){#triassic .jurassic-scene[data-species="plateosaurus"] .jurassic-backdrop{top:260px}}