@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Italiana&display=swap');
:root{--cream:#f3eee3;--muted:#c3c8bd;--gold:#e4b86d;--cyan:#7ca9a5;--ink:#101a17;--serif:'Italiana',Georgia,serif;--sans:'DM Sans',Arial,sans-serif;color-scheme:dark}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ink);color:var(--cream);font-family:var(--sans);font-size:14px}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}button,a{touch-action:manipulation}button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:6px}button:hover,a:hover{color:var(--gold)}.skip{position:fixed;top:-80px;left:20px;z-index:100;background:var(--ink);padding:15px}.skip:focus{top:10px}.masthead{height:108px;padding:0 4%;position:fixed;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;z-index:20;background:linear-gradient(#07100fd9,transparent)}.brand{display:grid;grid-template-columns:26px 1fr;column-gap:12px;align-items:center;font-size:20px;letter-spacing:6px}.brand svg{width:25px;height:35px;grid-row:span 2;fill:none;stroke:var(--gold);stroke-width:1.1}.brand span{font-size:7px;letter-spacing:3.4px;margin-top:6px;color:var(--muted)}.masthead nav{display:flex;gap:38px;align-items:center;font-size:12px}.masthead nav button{padding:10px 0}.masthead nav span{margin-left:8px;color:var(--gold)}.journey-link{position:relative}.journey-link:after{content:'';position:absolute;bottom:-12px;left:0;width:24px;height:1px;background:var(--gold)}.motion{display:flex;gap:10px;align-items:center;font-size:10px;letter-spacing:.5px}.motion>span:first-child{border:1px solid #ffffff35;border-radius:50%;width:32px;height:32px;display:grid;place-items:center}.time-rail{position:fixed;top:30%;left:3.3%;width:150px;z-index:15;display:flex;flex-direction:column;gap:48px}.rail-line{position:absolute;width:1px;top:8px;bottom:28px;left:27px;background:#ffffff25}.rail-line i{display:block;width:1px;background:var(--gold);height:0;transition:height .6s}.time-rail a{display:flex;gap:15px;align-items:flex-start;position:relative;font-size:8px;color:#bcc5ba9c;letter-spacing:1.6px}.time-rail a>span{font-size:7px;letter-spacing:0;line-height:16px;width:8px}.time-rail a i{flex-shrink:0;width:9px;height:9px;border-radius:50%;border:1px solid #c3c8bd;position:relative;top:3px;background:#23332a}.time-rail a div{line-height:16px}.time-rail small{display:block;max-width:90px;font-family:Georgia,serif;font-size:10px;letter-spacing:.2px;line-height:15px;margin-top:6px;opacity:0;height:15px;transition:opacity .4s}.time-rail a[aria-current]{color:var(--gold)}.time-rail a[aria-current] i{background:var(--gold);box-shadow:0 0 0 4px #e4b86d24,0 0 18px #e4b86d99}.time-rail a[aria-current] small{opacity:1;color:var(--muted)}.chapter{height:145svh;position:relative}.chapter:last-child{height:120svh}.scene{height:100svh;min-height:650px;position:sticky;top:0;overflow:hidden;background:#16231c}.landscape{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:65% center;transform:scale(1.035);will-change:transform;animation:drift 35s ease-in-out infinite alternate}.shade{position:absolute;inset:0;background:linear-gradient(90deg,#07110fd9 0%,#09140d82 24%,#07110f12 64%),linear-gradient(0deg,#08120fff 0%,#08120f9c 19%,transparent 47%,#08120f35 100%)}.chapter-copy{position:absolute;top:22%;left:16%;width:49%;max-width:620px}.eyebrow{font-size:9px;letter-spacing:2.6px;font-weight:500;color:var(--gold);margin:0 0 24px;line-height:1.8}.chapter-copy h1,.chapter-copy h2{font-family:var(--serif);font-size:clamp(58px,6.5vw,108px);font-weight:400;line-height:1.02;letter-spacing:-2.7px;margin:0 0 25px;text-shadow:0 3px 30px #0002}.chapter-copy em{font-family:Georgia,serif;font-weight:400;font-size:.93em;color:#ead9b7}.intro{font-size:13px;color:#dedfd4;line-height:1.9;max-width:320px;text-wrap:pretty}.text-link{display:inline-flex;align-items:center;gap:30px;padding:0 0 10px;margin-top:25px;border-bottom:1px solid #f3eee345;font-size:11px;letter-spacing:.3px}.text-link span{color:var(--gold);font-size:20px}.specimen{position:absolute;right:4%;bottom:24%;width:290px;background:linear-gradient(130deg,#17211bcf,#101a17aa);border:1px solid #c6bf9638;backdrop-filter:blur(15px);padding:25px 26px 0;border-radius:3px}.specimen .eyebrow{font-size:7px;letter-spacing:1.7px;margin-bottom:12px}.specimen h2{font-family:var(--serif);font-size:33px;font-weight:400;margin:0 0 8px}.specimen p:not(.eyebrow){font-family:Georgia,serif;font-size:12px;line-height:1.6;color:#d2d6c9;margin:0}.tags{display:flex;gap:7px;margin:20px 0}.tags span{font-size:9px;border:1px solid #a8b49a33;border-radius:20px;padding:6px 12px;color:#d0d7c7}.specimen button{width:100%;display:flex;align-items:center;justify-content:space-between;font-size:10px;border-top:1px solid #b9c0a626;padding:15px 0}.specimen button span{font-size:18px;color:var(--gold)}.scene-bottom{position:absolute;left:16%;right:4%;bottom:19%;display:flex;align-items:center;justify-content:space-between}.scroll-cue{display:flex;align-items:center;gap:13px;font-size:8px;letter-spacing:1.8px}.scroll-cue i{font-style:normal;border:1px solid #f3eee35c;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:17px}.coordinate{font-size:8px;color:#b8bfae;letter-spacing:1.5px}.coordinate b{padding:0 10px;color:var(--gold)}.branch-dock{height:128px;position:fixed;bottom:0;left:0;right:0;z-index:20;background:linear-gradient(0deg,#07120ff5 40%,#091410d9 80%,#09141000);display:flex;align-items:center;padding:0 4% 9px 16%;gap:30px}.branch-caption{flex:0 0 150px}.branch-caption .eyebrow{display:block;font-size:7px;letter-spacing:2px;color:#8faaa0;margin-bottom:8px}.branch-caption button{font-family:Georgia,serif;font-size:13px;padding:0;white-space:nowrap}.branch-caption button span{color:var(--gold);margin-left:10px}.branches{position:relative;height:110px;flex:1;max-width:900px}.branches>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke-width:1}.branch-line{stroke:#7ca9a571}.faint-line{stroke:#7ca9a529}.active-path{stroke:var(--gold);stroke-width:1.5;filter:drop-shadow(0 0 5px #ffb949aa);transition:d .5s}.branch{position:absolute;display:flex;align-items:center;gap:9px;transform:translateY(-50%);padding:10px 0}.branch i{width:7px;height:7px;border:1px solid var(--cyan);border-radius:50%;background:#0b1815;flex-shrink:0}.branch>span{font-family:Georgia,serif;font-size:13px;text-shadow:0 1px 8px #000;background:#0a1612a3}.branch small{display:block;font-family:var(--sans);font-size:7px;letter-spacing:.2px;color:#9aada4;margin-top:5px}.sauropods{left:25.5%;top:20px}.theropods{left:50%;top:55px}.ornithischians{left:79%;top:91px}.branch.active{color:var(--gold)}.branch.active i{border-color:var(--gold);background:var(--gold);box-shadow:0 0 0 4px #e4b86d25,0 0 12px var(--gold)}.map-button{margin-left:35px;flex:0 0 38px;height:38px;border:1px solid #c3c8bd33;border-radius:50%;display:grid;place-items:center}.map-button svg{width:18px;fill:none;stroke:var(--gold);stroke-width:1}.dust{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(2px 2px at 22% 33%,#f7dc9760 50%,transparent),radial-gradient(1px 1px at 65% 43%,#f7dc9760 50%,transparent),radial-gradient(2px 2px at 82% 66%,#f7dc9740 50%,transparent),radial-gradient(1px 1px at 43% 79%,#f7dc9750 50%,transparent);background-size:600px 500px;animation:dust 24s linear infinite;opacity:.7;mask-image:linear-gradient(transparent,#000)}.reading-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:30}.reading-progress i{display:block;height:100%;width:0;background:var(--gold)}dialog{background:#13211c;color:var(--cream);border:1px solid #a6b39d40;padding:0;max-width:850px;width:calc(100% - 40px);max-height:85svh;border-radius:5px;box-shadow:0 30px 100px #0008}dialog::backdrop{background:#020b09b8;backdrop-filter:blur(12px)}body:has(dialog[open]){overflow:hidden}.dialog-shell{padding:58px;position:relative}.close{position:absolute;top:17px;right:22px;font-size:28px;width:36px;height:36px;border:1px solid #b5c5ad33;border-radius:50%;line-height:1}.dialog-shell h2{font-family:var(--serif);font-size:50px;font-weight:400;margin:0 0 20px}.dialog-shell p{color:#c5cfbf;line-height:1.9;font-size:14px;max-width:630px}.dialog-shell .eyebrow{color:var(--gold);font-size:9px}.detail-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:30px 0;padding:25px 0;border-top:1px solid #b5c5ad33;border-bottom:1px solid #b5c5ad33}.detail-stats dt{font-size:8px;letter-spacing:2px;color:var(--gold);margin-bottom:10px}.detail-stats dd{margin:0;font-family:Georgia,serif;font-size:19px}.source-link{display:inline-block;color:var(--gold);font-size:11px;border-bottom:1px solid #e4b86d55;padding-bottom:5px}.tree-root{border:1px solid #e4b86d66;padding:18px 20px;color:var(--gold);font-family:Georgia,serif;margin-top:25px}.tree-grid{margin:0 0 25px 24px;border-left:1px solid #83bdb366;padding:20px 0 0 24px;display:grid;gap:12px}.tree-grid button{padding:18px 20px;background:#a9bda309;border:1px solid #9bbbaa30;text-align:left;position:relative}.tree-grid button:before{content:'';height:1px;width:24px;background:#83bdb366;position:absolute;left:-25px;top:35px}.tree-grid strong{font-family:Georgia,serif;font-weight:400;font-size:19px;display:block;margin-bottom:7px}.tree-grid small{display:block;color:#acbcae;font-size:11px;line-height:1.6}.tree-grid .living{margin-left:25px;border-left:2px solid var(--gold)}.note{font-size:11px!important;color:#a9b8a8!important}.source-list{padding-left:20px;color:#c5cfbf;line-height:2.4;font-size:13px}.source-list a{text-decoration:underline;text-decoration-color:#66785a;text-underline-offset:4px}.paused *, .paused *:before{animation-play-state:paused!important}.paused{scroll-behavior:auto}@keyframes drift{from{transform:scale(1.035) translateX(0)}to{transform:scale(1.085) translateX(-.7%)}}@keyframes dust{from{transform:translate(0,0)}to{transform:translate(-30px,-50px)}}@media(min-width:1700px){.chapter-copy{left:18%}.specimen{width:330px}.branch-dock{padding-left:18%}}@media(max-width:1100px){.time-rail{left:2%;width:100px}.time-rail a{gap:10px;font-size:7px}.rail-line{left:22px}.chapter-copy{left:14%;top:24%}.chapter-copy h1,.chapter-copy h2{font-size:70px}.specimen{width:245px;right:3%;bottom:24%;padding:22px 20px 0}.specimen h2{font-size:29px}.scene-bottom{left:14%}.branch-dock{padding-left:5%;gap:15px}.branch-caption{flex-basis:130px}.map-button{margin-left:35px}.masthead nav{gap:25px}.branch>span{font-size:11px}.branch small{font-size:6px}}@media(max-width:760px){.masthead{height:78px;padding:0 6%}.brand{font-size:16px;letter-spacing:4px;grid-template-columns:20px 1fr;column-gap:7px}.brand svg{width:20px}.brand span{font-size:6px;letter-spacing:2px}.masthead nav{gap:20px}.masthead nav button{font-size:10px}.journey-link,.motion-label{display:none}.motion{gap:0;margin-left:10px}.motion>span:first-child{width:29px;height:29px}.masthead nav button:last-child{display:none}.time-rail{top:auto;bottom:107px;left:6%;right:6%;width:auto;flex-direction:row;justify-content:space-between;gap:10px}.rail-line{left:0;right:0;top:6px;height:1px;width:auto;background:#d3d8bd25}.rail-line i{height:1px!important;width:0}.time-rail a{gap:0;flex-direction:column;font-size:6px;letter-spacing:1px;align-items:center}.time-rail a>span,.time-rail small{display:none}.time-rail a i{top:2px;width:8px;height:8px;margin-bottom:8px}.time-rail a div{background:#101a1799;padding:0 3px}.chapter{height:130svh}.scene{min-height:740px}.chapter-copy{top:15%;left:7%;right:7%;width:auto;max-width:440px}.chapter-copy h1,.chapter-copy h2{font-size:clamp(46px,11vw,75px);letter-spacing:-1.7px;margin-bottom:15px}.eyebrow{font-size:8px;letter-spacing:2px;margin-bottom:17px}.intro{font-size:11px;max-width:250px;line-height:1.7}.text-link{font-size:10px;margin-top:7px;padding-bottom:6px;gap:25px}.landscape{object-position:66% center}.shade{background:linear-gradient(90deg,#07110f88,transparent),linear-gradient(0deg,#08120f 4%,#08120f44 36%,#08120f22 56%,#08120f85 100%)}.specimen{bottom:22%;right:6%;width:230px;padding:15px 18px 0}.specimen .eyebrow{font-size:6px;margin-bottom:6px}.specimen h2{font-size:27px;margin-bottom:5px}.specimen p:not(.eyebrow){font-size:10px}.tags{margin:12px 0}.tags span{font-size:8px;padding:4px 9px}.specimen button{font-size:9px;padding:10px 0}.scene-bottom{bottom:17%;left:7%;right:6%}.scroll-cue{font-size:6px;letter-spacing:1px;gap:8px}.scroll-cue i{width:24px;height:24px;font-size:13px}.coordinate{font-size:6px;letter-spacing:.5px}.coordinate b{padding:0 3px}.branch-dock{height:100px;padding:0 6% 6px;gap:0;background:linear-gradient(0deg,#07120f 80%,#07120f00)}.branch-caption,.map-button{display:none}.branches{height:80px;max-width:none}.branches>svg{opacity:.8;height:70px;top:0}.sauropods{left:12%;top:17px}.theropods{left:42%;top:37px}.ornithischians{left:70%;top:63px}.branch small{display:none}.branch>span{font-size:10px}.branch{gap:7px}.dialog-shell{padding:45px 25px 30px}.dialog-shell h2{font-size:37px}.dialog-shell p{font-size:12px}.detail-stats{gap:10px}.detail-stats dd{font-size:15px}.detail-stats dt{font-size:7px;letter-spacing:1px}.tree-grid{margin-left:10px;padding-left:16px}.tree-grid button:before{width:16px;left:-17px}.tree-grid button{padding:15px}.tree-grid strong{font-size:17px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.landscape{transform:none!important}}@media(max-height:700px) and (min-width:761px){.scene{min-height:600px}.chapter-copy{top:21%}.chapter-copy h1,.chapter-copy h2{font-size:65px}.intro{font-size:11px}.text-link{margin-top:9px}.specimen{bottom:27%}.scene-bottom{bottom:22%}.time-rail{top:25%;gap:30px}.branch-dock{height:115px}}
@media(max-width:760px){#jurassic .landscape{object-position:35% center}#triassic .landscape{object-position:42% center}.time-rail{background:linear-gradient(transparent,#091510b3);border-radius:4px}}
/* The developed Jurassic chapter */
#jurassic{height:380svh}.jurassic-scene{--journey-progress:0;isolation:isolate}.jurassic-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(calc(1.08 - var(--journey-progress)*.04)) translateY(calc(var(--journey-progress)*-12px));will-change:transform}.jurassic-light{position:absolute;inset:0;background:radial-gradient(ellipse at 80% 15%,#f6cd6430,transparent 60%);mix-blend-mode:screen;animation:jurassic-light 12s ease-in-out infinite alternate}.jurassic-scene .shade{background:linear-gradient(90deg,#07110fe8 0%,#07110f9c 28%,#07110f12 60%),linear-gradient(0deg,#08120f 0%,#08120f44 34%,transparent 66%,#08120f55)}.jurassic-animal-position{position:absolute;width:67%;right:0;bottom:23%;transform:translateY(calc(var(--journey-progress)*-12px)) scale(1);transform-origin:70% 90%;transition:transform 1.2s ease,opacity 1s;filter:drop-shadow(0 18px 9px #07100b99);z-index:2;pointer-events:none}.jurassic-animal{display:block;width:100%;height:auto;transform-origin:58% 88%;animation:diplodocus-breathe 8s ease-in-out infinite}.jurassic-scene[data-moment="0"] .jurassic-animal-position{transform:translateX(7%) scale(1.06);opacity:.88}.jurassic-scene[data-moment="1"] .jurassic-animal-position{transform:translateX(-1%) scale(.92);opacity:1}.jurassic-scene[data-moment="2"] .jurassic-animal-position{transform:translateX(-4%) scale(1.02);opacity:1}.jurassic-foreground{position:absolute;inset:0;background:url('assets/jurassic-habitat.webp') center bottom/cover no-repeat;mask-image:linear-gradient(transparent 69%,#000 92%);transform:scale(1.08) translateY(calc(var(--journey-progress)*15px));pointer-events:none;z-index:3;opacity:.65}.jurassic-heading{position:absolute;top:18%;left:16%;z-index:4;width:33%}.jurassic-heading>.eyebrow{font-size:8px;line-height:2}.jurassic-heading>.eyebrow span{display:block;font-size:7px;color:#c5c6b0;letter-spacing:1.5px;margin-top:4px}.jurassic-heading h2{font-family:var(--serif);font-size:clamp(42px,4.5vw,76px);font-weight:400;letter-spacing:-1.8px;line-height:1.05;margin:0}.jurassic-heading em{font-family:Georgia,serif;font-size:.85em;font-weight:400;color:#e6d2ab}.jurassic-story{position:absolute;left:16%;top:50%;width:27%;max-width:360px;z-index:5;border-left:1px solid #dcb57566;padding-left:20px}.jurassic-story .eyebrow{font-size:7px;letter-spacing:1.8px;margin-bottom:10px}.jurassic-story h3{font-family:Georgia,serif;font-size:20px;line-height:1.3;font-weight:400;margin:0 0 12px}.jurassic-story>p:last-child{font-size:11px;line-height:1.9;color:#d2d6c8;margin:0}.jurassic-species{position:absolute;right:6%;bottom:30%;display:flex;align-items:center;gap:12px;z-index:5;background:#101a17bd;border:1px solid #bcc49c35;padding:13px 17px;backdrop-filter:blur(12px)}.jurassic-species i{font-family:Georgia,serif;font-size:20px}.jurassic-species small{display:block;letter-spacing:1.2px;font-size:6px;margin-top:6px;color:#bdc7b3}.jurassic-species button{font-size:21px;color:var(--gold);min-width:36px;min-height:36px;margin-left:15px}.species-dot{width:6px;height:6px;background:var(--gold);border-radius:50%;box-shadow:0 0 12px #e4b86d88}.jurassic-actions{position:absolute;z-index:5;left:16%;bottom:23%;display:flex;gap:12px}.jurassic-actions button{font-size:10px;border:1px solid #b7c3a645;background:#0d1c16b8;backdrop-filter:blur(10px);padding:13px 17px;border-radius:2px;min-height:44px}.jurassic-actions button>span{margin-right:10px;color:var(--gold);font-size:16px}.moment-nav{position:absolute;bottom:16%;left:16%;right:6%;z-index:5;display:flex;gap:18px;border-top:1px solid #b2bea82b;padding-top:15px;align-items:center}.moment-nav button{font-size:9px;color:#a3b6a6;padding:7px 0;min-height:32px;border-bottom:1px solid transparent}.moment-nav button span{font-size:8px;margin-right:8px;color:#829a8b}.moment-nav button[aria-current]{color:var(--cream);border-color:var(--gold)}.moment-nav button[aria-current] span{color:var(--gold)}.moment-nav a{font-size:10px;margin-left:auto;white-space:nowrap}.moment-nav a span{color:var(--gold);margin-left:8px}.jurassic-scroll-note{position:absolute;right:6%;top:19%;font-size:7px;color:#d9deca;letter-spacing:2px;z-index:4}.jurassic-scroll-note span{display:inline-block;margin-left:12px;font-size:15px}.scale-diagram{width:100%;height:auto;margin:15px 0 10px;background:linear-gradient(#19302400,#24403155);border-bottom:1px solid #a3b6a630}.height-control{max-width:400px;margin:10px auto 20px}.height-control label{display:flex;justify-content:space-between;font-size:12px;color:var(--cream)}.height-control output{color:var(--gold)}.height-control input{width:100%;margin:16px 0 8px;accent-color:var(--gold);cursor:ew-resize;height:24px}.range-labels{display:flex;justify-content:space-between;font-size:10px;color:#9caf9b}.scale-summary{text-align:center;color:var(--gold)!important;font-family:Georgia,serif}.sauropod-map{margin:25px 0}.sauropod-root{font-family:Georgia,serif;font-size:18px;text-align:center;color:var(--gold);border-bottom:1px solid #7da59a66;padding:13px}.relative-groups{display:grid;grid-template-columns:2fr 1fr;gap:15px}.relative-groups>div{padding-top:15px;border-left:1px solid #7da59a66;padding-left:12px}.relative-groups>div>span{display:block;font-size:8px;letter-spacing:1.7px;color:#a7bfb0;margin-bottom:12px}.relative-groups>div>div{display:flex;gap:8px}.relative-groups button{border:1px solid #7da59a44;padding:13px 10px;font-family:Georgia,serif;font-size:14px;flex:1;min-height:58px}.relative-groups button[aria-pressed="true"]{border-color:var(--gold);background:#c8a26112;color:var(--gold)}.relative-groups small{display:block;font-family:var(--sans);font-size:7px;margin-top:7px;color:#b3c6b8}.relative-detail{padding:24px;border:1px solid #a6b69c33;background:#263b2d33}.relative-detail .eyebrow{margin-bottom:8px}.relative-detail h3{font-family:Georgia,serif;font-size:25px;font-weight:400;margin:0}.relative-facts{display:flex;gap:30px;margin:24px 0}.relative-facts dt{font-size:7px;letter-spacing:1.6px;color:var(--gold);margin-bottom:8px}.relative-facts dd{margin:0;font-size:12px;color:#d1dccb}.return-journey{margin-top:12px}.paused .jurassic-animal-position,.paused .jurassic-backdrop,.paused .jurassic-foreground{transition:none!important}.paused .jurassic-backdrop,.paused .jurassic-foreground{transform:none!important}.paused .jurassic-animal-position{transform:none!important;opacity:1!important}@keyframes diplodocus-breathe{0%,100%{transform:scaleY(1) rotate(-.12deg)}50%{transform:scaleY(1.012) rotate(.12deg)}}@keyframes jurassic-light{from{opacity:.4}to{opacity:.85}}
@media(max-width:1100px) and (min-width:761px){.jurassic-heading,.jurassic-story,.jurassic-actions{left:14%}.jurassic-heading{width:36%}.jurassic-heading h2{font-size:52px}.jurassic-story{width:29%;top:48%}.jurassic-story h3{font-size:18px}.moment-nav{left:14%;gap:12px;bottom:17%}.jurassic-actions{bottom:25%;gap:8px}.jurassic-actions button{font-size:9px;padding:10px}.jurassic-animal-position{width:66%;bottom:30%}.jurassic-species{bottom:32%;right:4%}}
@media(max-width:760px){#jurassic{height:350svh}.jurassic-scene{min-height:740px}.jurassic-heading{top:12%;left:7%;width:85%}.jurassic-heading>.eyebrow{font-size:7px;margin-bottom:12px}.jurassic-heading>.eyebrow span{display:none}.jurassic-heading h2{font-size:38px;letter-spacing:-1.2px;line-height:1.08;max-width:320px}.jurassic-heading h2 br{display:none}.jurassic-heading h2 em{white-space:nowrap}.jurassic-animal-position{width:110%;right:-5%;bottom:40%;z-index:2}.jurassic-scene[data-moment="0"] .jurassic-animal-position{transform:translateX(2%) scale(1.02)}.jurassic-scene[data-moment="1"] .jurassic-animal-position{transform:scale(.88)}.jurassic-scene[data-moment="2"] .jurassic-animal-position{transform:translateX(-1%) scale(1.02)}.jurassic-backdrop{object-position:65% center}.jurassic-scene .shade{background:linear-gradient(0deg,#08120f 4%,#08120f75 37%,#08120f10 65%,#08120f99),linear-gradient(90deg,#07110f66,transparent)}.jurassic-story{left:7%;top:53%;width:86%;max-width:none;padding-left:12px}.jurassic-story .eyebrow{font-size:6px;margin-bottom:6px}.jurassic-story h3{font-size:18px;margin-bottom:7px}.jurassic-story>p:last-child{font-size:10px;line-height:1.7;max-width:350px}.jurassic-species{right:7%;bottom:49%;padding:6px 9px;gap:7px}.jurassic-species i{font-size:13px}.jurassic-species small{font-size:5px;letter-spacing:.7px;margin-top:3px}.jurassic-species button{font-size:16px;min-width:28px;min-height:28px;margin-left:5px}.species-dot{width:4px;height:4px}.jurassic-actions{left:7%;right:7%;bottom:24%;gap:8px}.jurassic-actions button{flex:1;font-size:8px;padding:9px 5px;min-height:40px;white-space:nowrap}.jurassic-actions button>span{font-size:13px;margin-right:5px}.moment-nav{bottom:18%;left:7%;right:7%;gap:12px;padding-top:9px}.moment-nav button{font-size:0;flex:1;padding:5px;min-height:32px}.moment-nav button span{font-size:10px;margin:0}.moment-nav button:nth-child(1):after{content:'World';font-size:8px;margin-left:5px}.moment-nav button:nth-child(2):after{content:'Scale';font-size:8px;margin-left:5px}.moment-nav button:nth-child(3):after{content:'Reach';font-size:8px;margin-left:5px}.moment-nav a{font-size:8px}.jurassic-scroll-note{display:none}.relative-groups{grid-template-columns:1fr;gap:10px}.relative-groups>div>div{flex-wrap:wrap}.relative-detail{padding:18px}.relative-detail h3{font-size:21px}.relative-facts{gap:18px}.relative-facts dd{font-size:10px}.scale-diagram{min-height:160px}.scale-summary{font-size:11px!important}}
@media(max-height:740px) and (min-width:761px){.jurassic-heading{top:17%}.jurassic-heading h2{font-size:48px}.jurassic-heading>.eyebrow{margin-bottom:12px}.jurassic-story{top:47%;width:32%}.jurassic-story h3{font-size:17px}.jurassic-story>p:last-child{font-size:10px;line-height:1.6}.jurassic-actions{bottom:25%}.jurassic-animal-position{width:58%;bottom:24%}.jurassic-species{bottom:31%}.moment-nav{bottom:18%;padding-top:7px}.jurassic-scroll-note{top:20%}}
@media(prefers-reduced-motion:reduce){.jurassic-backdrop,.jurassic-foreground,.jurassic-animal-position,.jurassic-animal{transform:none!important}.jurassic-animal-position{opacity:1!important}}
@media(min-width:1101px){.jurassic-animal-position{bottom:14%;right:3%;width:63%}.jurassic-species{bottom:25%}}
.jurassic-animal-position:after{content:'';position:absolute;left:28%;bottom:25%;width:29%;height:2%;background:#10160cb3;filter:blur(8px);border-radius:50%;z-index:-1}
@media(max-width:760px){.jurassic-animal-position{width:90%;right:5%}.jurassic-heading{top:14%}.jurassic-story>p:last-child{font-size:11px}.jurassic-scene[data-moment="0"] .jurassic-animal-position,.jurassic-scene[data-moment="2"] .jurassic-animal-position{transform:scale(1.02)}}
/* Original integrated artwork and clearer story typography. */
.jurassic-backdrop{transform:none!important;object-position:center;will-change:auto}
.jurassic-heading{top:15%;width:36%}.jurassic-heading h2{font-size:clamp(44px,4.2vw,66px)}
.jurassic-story{top:39%;width:34%;max-width:440px;padding:22px 24px;border:1px solid #c8ba8d35;border-radius:4px;background:linear-gradient(120deg,#0c1c17e8,#0c1c17a8);backdrop-filter:blur(12px)}
.moment-icon{width:68px;height:68px;color:#e8c382;margin-bottom:15px;filter:drop-shadow(0 0 12px #e4b86d24)}.moment-icon svg{width:100%;height:100%;animation:icon-arrive .65s ease both}.moment-icon path{stroke-dasharray:220;animation:icon-draw 1.1s ease both}.icon-orbit{stroke:#d8b97744;stroke-dasharray:2 6}
.jurassic-story .eyebrow{font-size:11px;letter-spacing:1.5px;margin-bottom:10px}.jurassic-story h3{font-size:28px;line-height:1.2;margin-bottom:12px}.jurassic-story>p:last-child{font-size:16px;line-height:1.65;color:#e4e7db}
.jurassic-actions{bottom:19%;left:16%}.jurassic-actions button{font-size:12px}.moment-nav{bottom:136px;padding-top:12px;gap:25px}.moment-nav button{font-size:16px;min-height:44px;padding:10px 0}.moment-nav button span{font-size:12px}.moment-nav a{font-size:13px}
@keyframes icon-arrive{from{opacity:0;transform:translateY(7px) scale(.94)}to{opacity:1;transform:none}}@keyframes icon-draw{from{stroke-dashoffset:220}to{stroke-dashoffset:0}}
@media(max-height:850px) and (min-width:761px){.jurassic-heading{top:14%}.jurassic-heading h2{font-size:46px}.jurassic-story{top:35%;padding:16px 20px}.moment-icon{float:left;width:52px;height:52px;margin:0 15px 8px 0}.jurassic-story h3{font-size:24px}.jurassic-story>p:last-child{clear:both;font-size:15px}.jurassic-story .eyebrow{font-size:10px}.jurassic-actions{bottom:190px}.moment-nav{bottom:130px}}
@media(max-width:1100px) and (min-width:761px){.jurassic-story{left:14%;width:40%}.jurassic-heading{left:14%}.moment-nav{left:14%;gap:18px}.moment-nav button{font-size:14px}.jurassic-actions{left:14%}}
@media(max-width:760px){.jurassic-backdrop{object-position:38% center}.jurassic-heading{top:12%;left:7%;width:86%}.jurassic-heading h2{font-size:38px}.jurassic-story{left:6%;top:33%;width:88%;max-width:none;padding:16px 18px}.moment-icon{float:left;width:50px;height:50px;margin:0 12px 8px 0}.jurassic-story .eyebrow{font-size:9px;margin-bottom:6px}.jurassic-story h3{font-size:22px;line-height:1.2}.jurassic-story>p:last-child{clear:both;font-size:14px;line-height:1.6;max-width:none}.jurassic-species{bottom:auto;top:23%;right:6%}.jurassic-actions{left:6%;right:6%;bottom:23%;gap:8px}.jurassic-actions button{font-size:10px;padding:9px 5px}.moment-nav{left:6%;right:6%;bottom:145px;gap:12px;flex-wrap:wrap;padding-top:7px}.moment-nav button{font-size:14px;flex:1;white-space:nowrap;min-height:40px;padding:6px 0}.moment-nav button span{font-size:10px;margin-right:5px}.moment-nav button:after{content:none!important}.moment-nav a{position:absolute;right:0;top:54px;font-size:11px}.jurassic-scroll-note{display:none}}

@media(min-width:761px) and (min-height:851px){.jurassic-actions{bottom:195px}}
@media(max-width:760px){.jurassic-scene{background:#101c17}.jurassic-backdrop{top:145px;width:100%;height:auto;object-fit:contain;object-position:center;mask-image:linear-gradient(transparent,#000 15%,#000 85%,transparent)}.jurassic-story{top:44%}.jurassic-species{top:21%;background:#102019b0}.moment-nav a{top:43px}.moment-nav{bottom:154px}}
@media(prefers-reduced-motion:reduce){.moment-icon svg,.moment-icon path{animation:none}}
.paused .moment-icon svg,.paused .moment-icon path{animation:none}

@media(min-width:761px) and (min-height:851px){.moment-icon{float:left;width:60px;height:60px;margin:0 16px 12px 0}.jurassic-story>p:last-child{clear:both}.jurassic-story h3{font-size:26px}}

/* Anchor the story card to its actions, keeping a 50px breathing space. */
.jurassic-story{top:auto;bottom:290px;background:linear-gradient(120deg,#10241b8c,#10241b55);backdrop-filter:blur(7px);border-color:#d2c8a13b}
@media(min-width:761px) and (min-height:851px){.jurassic-story{top:auto;bottom:295px}}
@media(max-width:760px){.jurassic-story{top:auto;bottom:calc(23% + 90px);background:#10241b85}}
.specimen-art{margin:22px 0 28px;border:1px solid #d5bc7d35;background:#14291e;overflow:hidden;border-radius:5px}.specimen-art img{width:100%;display:block;aspect-ratio:16/10;object-fit:cover}.specimen-art figcaption{font-size:10px;letter-spacing:.7px;color:#b7c5b4;padding:12px 15px;line-height:1.6}
.scale-diagram{border:1px solid #b7c8a830;border-radius:6px;background:radial-gradient(ellipse at 55% 55%,#344b3d88,transparent 75%),#101e18}.scale-diagram .anatomy-line{fill:none;stroke:#344c3a;stroke-width:1.6;opacity:.6}.scale-diagram text{letter-spacing:1px}.scale-diagram .scale-dinosaur{stroke:#b7c8a8;stroke-width:1;stroke-linejoin:round}

/* Readable supporting labels. */
.jurassic-heading>.eyebrow{font-size:12px;letter-spacing:2px;line-height:1.7;margin-bottom:22px}.jurassic-heading>.eyebrow span{font-size:11px;letter-spacing:1.2px;margin-top:6px;color:#d6d8c9}.jurassic-species small{font-size:10px;letter-spacing:1px;line-height:1.5}.jurassic-story .eyebrow{font-size:12px;letter-spacing:1px}.branch-caption>.eyebrow{font-size:10px}.branch small{font-size:10px;line-height:1.5}.time-rail a>div{font-size:10px;letter-spacing:1px}.time-rail a>span{font-size:10px}
@media(max-width:760px){.jurassic-heading>.eyebrow{font-size:10px;letter-spacing:1.5px;line-height:1.6;margin-bottom:12px}.jurassic-heading>.eyebrow span{display:block;font-size:10px;margin-top:4px}.jurassic-heading h2{font-size:35px}.jurassic-species{top:25%;padding:8px 10px}.jurassic-species small{font-size:9px;letter-spacing:.5px}.jurassic-species i{font-size:15px}.jurassic-story .eyebrow{font-size:10px}.jurassic-backdrop{top:175px}.time-rail a>div{font-size:9px;letter-spacing:.4px}}

@media(min-width:761px) and (max-height:850px){.jurassic-heading{width:65%}.jurassic-heading>.eyebrow{margin-bottom:12px}.jurassic-heading h2{font-size:42px;line-height:1.1}.jurassic-heading h2 br{display:none}}
/* Triceratops uses the established chapter composition. */
#cretaceous{height:380svh}#cretaceous .jurassic-heading h2{font-size:clamp(38px,3.7vw,60px)}#cretaceous .jurassic-scene .shade{background:linear-gradient(90deg,#111b16eb,#111b169c 30%,#111b160a 65%),linear-gradient(0deg,#08120f 0%,#08120f55 26%,transparent 65%)}#cretaceous .jurassic-light{background:radial-gradient(ellipse at 75% 10%,#eac38b22,transparent 60%)}
.herbivore-groups{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding-top:18px}.herbivore-groups>div{border-left:1px solid #b9ab7e66;padding-left:12px}.herbivore-groups>div>span{display:block;color:#bfbe9f;font-size:10px;letter-spacing:1px;margin-bottom:12px}.herbivore-groups button{width:100%;min-height:65px;border:1px solid #b3b59155;padding:12px 8px;font:17px Georgia,serif}.herbivore-groups button[aria-pressed=true]{border-color:var(--gold);background:#c8a26118;color:var(--gold)}.herbivore-groups small{display:block;font:10px var(--sans);margin-top:6px}
.skull-explorer{margin:24px 0 30px;border-bottom:1px solid #d3bd8b40;padding-bottom:20px}.skull-explorer>.eyebrow{font-size:11px}.skull-tabs{display:flex;gap:10px;margin:16px 0}.skull-tabs button{flex:1;min-height:44px;border:1px solid #d3bd8b40;font-size:14px}.skull-tabs button[aria-pressed=true]{color:var(--gold);border-color:var(--gold);background:#d3bd8b12}.skull-feature h3{font:25px Georgia,serif;margin:20px 0 10px}.skull-feature p{min-height:78px}.triceratops-scale{margin-top:24px}
@media(max-height:850px) and (min-width:761px){#cretaceous .jurassic-heading h2{font-size:38px}}
@media(max-width:760px){#cretaceous{height:350svh}#cretaceous .jurassic-heading h2{font-size:34px;max-width:360px}#cretaceous .jurassic-backdrop{top:180px}#cretaceous .jurassic-species{top:25%}#cretaceous .jurassic-species small{font-size:8px}#cretaceous .moment-nav{gap:8px}#cretaceous .moment-nav button{font-size:13px}#cretaceous .jurassic-scene .shade{background:linear-gradient(0deg,#08120f 4%,#08120f44 40%,transparent 70%)}.herbivore-groups{grid-template-columns:1fr;gap:10px}.herbivore-groups>div{display:flex;align-items:center;gap:10px}.herbivore-groups>div>span{width:95px;margin:0;font-size:9px}.herbivore-groups button{flex:1;min-height:48px}.skull-tabs{gap:6px}.skull-tabs button{font-size:12px}.skull-feature h3{font-size:22px}.triceratops-scale{min-height:0}}
@media(max-width:760px){#cretaceous .jurassic-backdrop{top:215px}#cretaceous .jurassic-species{top:22%}}
/* Horizontal exploration within the Jurassic; vertical scrolling travels through periods. */
#jurassic{height:100svh;min-height:720px}#jurassic .jurassic-scene{height:100%;min-height:720px;position:relative;touch-action:pan-y}#jurassic .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}#jurassic .jurassic-heading{z-index:4}#jurassic .shade,#jurassic .jurassic-light,#jurassic .dust{z-index:2;pointer-events:none}#jurassic .moment-nav{gap:22px}#jurassic .moment-nav button{font-size:15px}#jurassic .jurassic-heading 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}#jurassic .jurassic-heading{width:60%}#jurassic .jurassic-heading h2{font-size:40px}#jurassic .moment-nav{gap:18px}}
@media(max-width:1100px) and (min-width:761px){.species-nav{right:4%;gap:5px}.species-nav button{min-width:28px}.species-choices button{font-size:11px}.species-count{font-size:10px}}
@media(max-width:760px){#jurassic{height:100svh;min-height:844px}#jurassic .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}#jurassic .jurassic-heading{top:137px}#jurassic .jurassic-heading>.eyebrow{font-size:10px;margin-bottom:8px}#jurassic .jurassic-heading>.eyebrow span{display:none}#jurassic .jurassic-heading h2{font-size:32px}#jurassic .jurassic-heading h2 br{display:none}#jurassic .jurassic-backdrop{top:203px}#jurassic .jurassic-species{top:224px;padding:6px 9px}#jurassic .jurassic-species small{font-size:8px}#jurassic .jurassic-story{padding:14px 16px;bottom:calc(23% + 90px)}#jurassic .jurassic-story h3{font-size:21px}#jurassic .jurassic-story>p:last-child{font-size:13px;line-height:1.6}#jurassic .jurassic-story .eyebrow{font-size:9px}#jurassic .moment-nav{gap:6px}#jurassic .moment-nav button{font-size:12px}#jurassic .moment-nav button span{margin-right:4px;font-size:9px}#jurassic .moment-nav a{font-size:11px}}
@media(prefers-reduced-motion:reduce){.previous-species-art{transition:none}}
@media(max-width:760px){#jurassic .jurassic-heading{top:129px}#jurassic .jurassic-heading>.eyebrow span{display:block;font-size:9px;line-height:1.4;margin-top:3px}#jurassic .jurassic-species{top:211px}}
/* Species navigation replaces the stage action buttons. */
#jurassic .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)}
#jurassic .species-nav>button{width:36px;min-width:36px;min-height:48px;color:#d9c49b;font-size:21px;transition:color .2s,background .2s}#jurassic .species-nav>button:hover:enabled{color:#fff2ce;background:#d4b67512}#jurassic .species-nav>button:disabled{opacity:.2}
#jurassic .species-choices{flex:1;justify-content:space-between;gap:12px}#jurassic .species-choices button{font-size:14px;min-height:48px;padding:0;border:0;position:relative;color:#c4cbbe;transition:color .2s}#jurassic .species-choices button[aria-pressed=true]{color:#efce95}#jurassic .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}#jurassic .species-count{font-size:10px;white-space:nowrap;color:#aebaa8;margin-left:2px}
#jurassic .jurassic-species{display:grid;grid-template-columns:6px 1fr auto;column-gap:12px;row-gap:0}#jurassic .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}#jurassic .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){#jurassic .species-nav{top:auto;bottom:190px}}
@media(max-width:1100px) and (min-width:761px){#jurassic .species-nav{left:14%;width:40%;gap:6px}#jurassic .species-choices{gap:8px}#jurassic .species-choices button{font-size:12px}#jurassic .species-nav>button{width:27px;min-width:27px}}
@media(max-width:760px){#jurassic .species-nav{left:6%;right:6%;top:auto;bottom:23%;width:auto;max-width:none;gap:6px}#jurassic .species-nav>button{min-height:40px;width:27px;min-width:27px;font-size:19px}#jurassic .species-choices{gap:10px}#jurassic .species-choices button{font-size:11px;min-height:40px}#jurassic .species-count{font-size:9px}#jurassic .jurassic-heading{top:90px}#jurassic .jurassic-backdrop{top:230px}#jurassic .jurassic-species{top:177px;padding:8px 12px;column-gap:9px}#jurassic .animal-compare{font-size:11px;margin-top:7px;padding-top:7px;min-height:27px}#jurassic .jurassic-species>button[data-jurassic-detail]{min-height:28px}#jurassic .jurassic-species small{font-size:8px}}
/* Topic tabs are part of the story card. */
#jurassic .jurassic-story{padding:0;overflow:hidden}#jurassic .story-tabs{display:flex;gap:0;padding:0 20px;border-bottom:1px solid #d1bf9133;background:#081b1540}#jurassic .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}#jurassic .story-tabs button:hover{color:#f4e9d4;background:#d8bc7a08}#jurassic .story-tabs button[aria-selected=true]{color:#ecd2a0}#jurassic .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}#jurassic .story-tabs button:focus-visible{outline:1px solid #e5c185;outline-offset:-5px;border-radius:2px}#jurassic .story-body{padding:22px 24px;display:flow-root}#jurassic #moment-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}#jurassic .story-body>p:last-child{clear:both;font-size:16px;line-height:1.65;color:#e4e7db;margin:0}#jurassic .chapter-continue{position:absolute;right:6%;bottom:146px;z-index:5;font-size:13px;padding:10px 0}#jurassic .chapter-continue span{margin-left:10px;color:var(--gold)}
@media(min-width:761px) and (max-height:850px){#jurassic .story-body{padding:16px 20px}#jurassic .story-body>p:last-child{font-size:15px}#jurassic .story-tabs{padding:0 16px}#jurassic .story-tabs button{font-size:11px;min-height:40px}#jurassic .chapter-continue{bottom:140px}}
@media(max-width:760px){#jurassic .story-tabs{padding:0 8px}#jurassic .story-tabs button{font-size:11px;min-height:40px;letter-spacing:0;padding:0 5px}#jurassic .story-body{padding:14px 16px}#jurassic .story-body>p:last-child{font-size:13px;line-height:1.6}#jurassic .chapter-continue{bottom:135px;right:6%;font-size:11px;padding:5px 0}}
#jurassic{overflow-anchor:none}
