*{box-sizing:border-box}body{margin:0;background:#071c22;color:#fff;font:16px/1.55 system-ui,sans-serif}button,a{font:inherit}button{cursor:pointer;color:inherit;background:#0a252cce;border:1px solid #c9d6d577;padding:10px 16px;border-radius:3px}button:hover,button:focus-visible{background:#386264}a{color:inherit;text-decoration:none}header{position:fixed;z-index:5;top:0;left:0;right:0;padding:20px 32px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(#061a22ed,transparent)}header>a{font-size:18px;letter-spacing:3px;font-weight:650}header span{font-weight:300}header>div{display:flex;align-items:center;gap:18px}main{height:100dvh;min-height:650px;position:relative;overflow:hidden}#visual,.shade{position:absolute;inset:0}#visual>img{height:100%;width:100%;object-fit:cover;animation:drift 24s ease-out forwards}#visual iframe{width:100%;height:100%;border:0;background:#132e33}.shade{pointer-events:none;background:linear-gradient(90deg,#061a23e8,transparent 85%),linear-gradient(0deg,#061a23f7,transparent 60%)}#caption{position:absolute;z-index:2;left:6vw;bottom:125px;max-width:680px;width:55vw}#step{letter-spacing:3px;font-size:14px;color:#d5c597}h1{font:clamp(38px,5.5vw,78px)/1.04 Georgia,serif;margin:16px 0}h2{font:400 22px/1.4 system-ui;margin:20px 0 12px}#text{max-width:610px;line-height:1.7;color:#e0e9e9}#credit{font-size:13px;color:#cfdbdc;margin-top:18px}#controls{position:absolute;bottom:30px;left:6vw;right:6vw;z-index:3;display:flex;align-items:center;gap:10px}#counter{margin-left:auto;color:#d5c597}#progress{position:absolute;bottom:0;width:100%;display:flex;z-index:4;gap:3px;height:5px}#progress button{border:0;border-radius:0;padding:0;background:#446268;flex:1}#progress button.active{background:#dcc891}.interactive #visual{left:36%;top:95px;bottom:100px;right:2%}.interactive .shade{background:none}.interactive #caption{width:28%;left:4vw;bottom:auto;top:110px}.interactive h1{font-size:40px}.interactive h2{font-size:19px}.interactive #text{font-size:16px}.interactive #credit{font-size:13px}.nature-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;height:100%;padding:0;margin:0}.nature-grid figure{margin:0;position:relative;min-height:0;overflow:hidden}.nature-grid img{width:100%;height:100%;object-fit:cover}.nature-grid figcaption{position:absolute;bottom:0;left:0;right:0;padding:15px;background:linear-gradient(transparent,#061a23e9);font-size:16px}.info-cards{height:100%;overflow:auto;padding:15px;display:grid;gap:14px;align-content:start}.info-cards article{border:1px solid #b9cdd433;background:#153b43;padding:24px}.info-cards h3{font:28px Georgia;margin:0 0 12px}.info-cards p{margin:8px 0}.info-cards strong{color:#e1cc99}dialog{background:#071c22;border:1px solid #456b73;color:#fff;width:96vw;height:94dvh;padding:0;max-width:none;max-height:none}dialog::backdrop{background:#000b}.dialogbar{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;height:70px}dialog iframe{width:100%;height:calc(100% - 70px);border:0}#audioPanel{position:fixed;z-index:7;right:20px;top:90px;background:#163b43;padding:18px;border:1px solid #789a9d}audio{display:block;max-width:80vw;margin-top:12px}@keyframes drift{from{transform:scale(1)}to{transform:scale(1.10)}}@media(prefers-reduced-motion:reduce){#visual>img{animation:none}}@media(max-width:850px){header{padding:14px;gap:10px;flex-wrap:wrap}header>a{font-size:15px}header>div{gap:8px;font-size:14px}header button{padding:7px 10px}main{min-height:900px}#caption{width:88%;left:6%;bottom:145px}h1{font-size:45px}h2{font-size:19px}.interactive #caption{top:110px;left:6%;width:88%;bottom:auto}.interactive h1{font-size:30px;margin:6px 0}.interactive h2{margin:8px 0}.interactive #text{font-size:14px;line-height:1.5}.interactive #credit{margin:6px 0}.interactive #visual{left:4%;right:4%;top:420px;bottom:110px}#controls{left:4%;right:4%;gap:5px;flex-wrap:wrap;font-size:14px}#controls button{padding:9px 10px}#counter{width:100%;margin:0}.info-cards article{padding:16px}}

@media(max-width:850px){header{position:relative;background:#071c22;min-height:108px}main{height:auto;min-height:calc(100dvh - 108px);overflow:visible;display:flex;flex-direction:column}#caption,.interactive #caption{position:relative;left:auto;top:auto;bottom:auto;width:auto;max-width:none;margin:0;padding:35px 24px 20px}#caption{padding-top:160px}.interactive #caption{padding-top:24px}#visual{bottom:0}.interactive #visual{position:relative;inset:auto;order:2;margin:0 16px;height:450px;min-height:450px}.interactive .shade{display:none}#controls{position:relative;left:auto;right:auto;bottom:auto;margin:20px 16px 24px;order:3}#progress{position:relative;order:4;min-height:5px}#caption{order:1}#counter{width:auto;margin-left:auto}#credit{font-size:13px}#details{height:95dvh}#audioPanel{top:120px}.info-cards{padding:8px}.nature-grid{height:450px}}

header{position:relative;background:#071c22;min-height:86px;gap:16px;flex-wrap:wrap}main,main.interactive{height:auto;min-height:calc(100dvh - 86px);display:grid;grid-template-columns:minmax(280px,36%) minmax(0,1fr);grid-template-rows:minmax(540px,1fr) auto 8px;overflow:visible;gap:20px}#caption,.interactive #caption{position:relative;inset:auto;width:auto;max-width:none;padding:24px;margin:0;grid-column:1;grid-row:1;align-self:start;background:#071c22e8;z-index:2}#visual,.interactive #visual{position:relative;inset:auto;width:auto;height:clamp(540px,75vh,850px);min-height:540px;grid-column:2;grid-row:1;overflow:hidden;margin:0 20px 0 0}#controls{position:relative;inset:auto;grid-column:1/-1;grid-row:2;display:flex;flex-wrap:wrap;margin:0 24px 20px}#progress{position:relative;grid-column:1/-1;grid-row:3}h1,.interactive h1{font-size:clamp(30px,3.2vw,54px);overflow-wrap:anywhere}.shade{display:none}#caption h2{font-size:20px}.revision-note{display:none}@media(max-width:850px){main,main.interactive{display:flex;flex-direction:column;gap:12px}#caption,.interactive #caption{order:1;padding:20px}#visual,.interactive #visual{order:2;height:560px;min-height:560px;margin:0 12px}#controls{order:3;margin:12px}#progress{order:4}#counter{margin-left:auto}header>div{flex-wrap:wrap}h1,.interactive h1{font-size:34px}}