/* Tablet and phone layouts, independent of the desktop Figma canvas scale. */
.nav-toggle,.mobile-nav{display:none}
@media(max-width:1100px){
 header{padding:22px 28px}.brand{font-size:10px;letter-spacing:.28em}nav{gap:22px}
 .story-title .title-left,.story-title .title-right{font-size:clamp(48px,6.8vw,74px);width:46%;line-height:1.12}
 .story-title .title-right{left:auto;right:4%;top:0}.story-title .title-right em{margin-left:0}
 .note-tile{border-radius:22px}
 .climate-note .editorial-tile{left:auto;right:3%;top:37%;bottom:auto;width:29%;height:250px}
 .climate-note .metric-tile{left:4%;right:auto;top:auto;bottom:7%;width:23%;height:156px}
 .metric-label,.card-kicker{top:20px;left:20px;font-size:11px}
 .tile-stat{left:20px;top:49px;font-size:44px;letter-spacing:-1.5px}.tile-stat span{font-size:21px}
 .climate-note .metric-period{left:20px;bottom:20px;font-size:9px;white-space:normal;max-width:calc(100% - 32px);line-height:1.4}
 .editorial-copy{left:20px;top:59px;width:calc(100% - 40px)}.editorial-tile h2{font-size:28px;letter-spacing:-1px;margin-bottom:15px}.climate-note p{font-size:12px;line-height:1.45}
 .planet-tag{left:20px;bottom:20px;font-size:8px;padding:7px 10px}.card-symbol{top:18px;right:18px;width:28px;height:28px}.card-symbol img{width:28px;height:28px;transform:none}
 .caption{font-size:11px;bottom:3%;left:4%}.caption small{font-size:9px;margin-bottom:7px}.chapter{font-size:9px;bottom:3%;right:3%}
 .join-panel{width:min(940px,92vw);gap:32px;padding:36px}.join-panel h2{font-size:clamp(42px,5vw,56px)}
}
@media(min-width:601px) and (max-width:1100px) and (orientation:portrait){
 .sculpture{height:65svh;width:115.556svh;bottom:20svh}
 .story-title{top:12%}.story-title .title-left,.story-title .title-right{left:5%;right:auto;width:90%;text-align:center;font-size:clamp(52px,7.5vw,78px)}
 .story-title .title-left em{margin-top:0}.story-title .title-right em{margin-left:0}
 .climate-note .editorial-tile{left:auto;right:5%;top:auto;bottom:28px;width:48%;height:210px}
 .climate-note .metric-tile{left:5%;right:auto;top:auto;bottom:28px;width:36%;height:156px}
 .caption,.chapter{display:none}
 .science-stage{padding:110px 5vw 135px}.science-card{height:270px}.science-card-front,.science-card-back{inset:65px 18px 22px}.science-card-back p{font-size:13px;line-height:1.55}.science-stage .info .science-card h3{font-size:18px}.science-card p{font-size:13px}.science-card-mark{inset:22px 18px auto}
 .join-panel{grid-template-columns:1fr;max-width:600px;gap:30px;padding:36px}.join-panel h2{font-size:52px}.join-copy .join-intro{max-width:430px}.join-copy .join-intro br{display:none}
}
@media(max-width:600px){
 header{padding:14px 16px;gap:8px}.brand{font-size:8px;letter-spacing:.22em;white-space:nowrap}nav{gap:8px}
 header nav>a{display:none!important}header nav #motion{font-size:10px;min-height:38px;padding:10px;gap:10px;white-space:nowrap}header nav #motion svg{width:14px;height:14px;flex-basis:14px}
 .nav-toggle{display:flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:9px;background:transparent;border:1px solid #26362c26;border-radius:8px}.nav-toggle svg{width:20px;height:20px}.on-metal .nav-toggle{border-color:#e2e6d33d}
 .mobile-nav:not([hidden]){display:flex;position:absolute;top:calc(100% + 2px);right:16px;z-index:30;flex-direction:column;gap:4px;min-width:195px;padding:8px;border:1px solid #ffffffb3;border-radius:13px;background:#f1f0e8f5;backdrop-filter:blur(20px);box-shadow:0 10px 35px #20362920;color:#26362c}
 .mobile-nav a{padding:13px 14px;font-size:14px;border-radius:8px;min-height:44px}.mobile-nav a:hover,.mobile-nav a:focus-visible{background:#26362c0c}.on-metal .mobile-nav{background:#263e33f5;border-color:#e2e6d329;color:#eff0df}
 .story{height:540svh}.sculpture{height:62svh;width:110.222svh;bottom:20svh}
 .sun{top:20%}
 .story-title{top:90px}.story-title .title-left,.story-title .title-right,.story-title .title-center{left:5%;right:auto;top:0;width:90%;padding:0;text-align:center;font-size:clamp(34px,10.6vw,58px);line-height:1.08;letter-spacing:-.025em;white-space:normal}
 .story-title .title-left em,.story-title .title-right em{margin:0}.story-title .title-center{font-size:clamp(32px,9.8vw,52px)}
 .climate-note .editorial-tile{left:auto;right:16px;top:auto;bottom:22px;width:calc(60% - 20px);height:160px}
 .climate-note .metric-tile{left:16px;right:auto;top:auto;bottom:22px;width:calc(40% - 24px);height:128px}
 .metric-label,.card-kicker{left:14px;top:14px;font-size:10px}.tile-stat{left:14px;top:40px;font-size:34px;letter-spacing:-1.2px}.tile-stat span{font-size:16px}
 .climate-note .metric-period{left:14px;bottom:12px;font-size:8px;line-height:1.35;max-width:calc(100% - 24px)}
 .editorial-copy{left:14px;top:42px;width:calc(100% - 28px)}.editorial-tile h2{font-size:22px;letter-spacing:-.7px;margin-bottom:8px}.climate-note p{font-size:10px;line-height:1.4}.planet-tag{display:none}.card-symbol{top:12px;right:12px;width:20px;height:20px}.card-symbol img{width:20px;height:20px}.caption,.chapter{display:none}.note-tile{border-radius:17px}
 .science{height:340svh}.science-stage{padding:88px 16px 104px;display:flex;align-items:center;justify-content:center}
 .science-stage .info{width:100%;max-height:calc(100svh - 192px);overflow-y:auto;overscroll-behavior:auto;scrollbar-width:thin;align-content:start;padding:0 2px 4px}
 .science-stage .info .eyebrow{font-size:9px;margin-bottom:14px}.science-stage .info h2{font-size:clamp(28px,8.3vw,38px);line-height:1.1}.science-stage .info .intro{font-size:12px;line-height:1.6;margin:13px 0 22px;max-width:290px}
 .science-stage .info .cards{grid-template-columns:1fr;width:100%;gap:10px}
 .science-card{height:142px;border-radius:15px}.science-card-mark{inset:13px 16px auto}.science-card-mark .number{font-size:9px}.science-card-mark svg{width:20px;height:20px}
 .science-card-front,.science-card-back{inset:39px 16px 12px}.science-stage .info .science-card h3{font-size:18px;margin:0 0 7px}.science-card-front p{font-size:12px;line-height:1.5}.science-card-back p{font-size:12px;line-height:1.45}
 .science-footer{bottom:16px}.science-footer .source{font-size:9px;margin-bottom:5px}.science-footer .replay{font-size:11px;min-height:40px;padding:10px 0}
 .metal-drips .drip-a{left:calc(19% - 32px);width:64px;height:94px}.metal-drips .drip-b{left:calc(68% - 25px);width:50px;height:77px}.metal-drips .drip-center-a{left:calc(43% - 17px);width:34px;height:46px}.metal-drips .drip-center-b{left:calc(60% - 18px);width:36px;height:55px}.metal-drips .drip-edge-left,.metal-drips .drip-edge-right{display:none}
 .falling-drop-a{left:calc(19% - 19px);top:75px}.falling-drop-b{left:calc(68% - 19px);top:60px}
 .join-reveal{padding:86px 16px 30px;align-items:safe center}.join-panel{width:100%;min-height:0;padding:25px 22px;border-radius:22px;grid-template-columns:1fr;gap:26px}
 .join-panel h2{font-size:clamp(36px,10.5vw,46px);line-height:1.04;margin-bottom:17px}.join-copy .join-kicker{font-size:9px;margin-bottom:18px;max-width:none}.join-copy .join-intro{font-size:13px;line-height:1.6;max-width:none}.join-copy .join-intro br{display:none}
 .join-panel label{font-size:12px}.join-panel input,.join-select-trigger,.join-select-options [role='option']{font-size:16px;min-height:46px}.join-submit{font-size:14px;min-height:48px;margin-top:22px}.join-note{font-size:10px}.join-select-options{max-height:190px;overflow:auto}
}
@media(max-width:360px){.brand{font-size:7.5px;letter-spacing:.17em}header nav #motion{font-size:9px;gap:6px;padding:10px 8px}.story-title{top:82px}.climate-note .editorial-tile{height:154px}.editorial-tile h2{font-size:20px}.metric-label{font-size:9px}.tile-stat{font-size:30px}.tile-stat span{font-size:14px}.science-card{height:150px}.science-card-back p{font-size:11px}}
@media(max-height:550px) and (orientation:landscape){header{padding:12px 20px}.story-title{top:19%}.story-title .title-left,.story-title .title-right{font-size:clamp(32px,5.5vw,52px)}.climate-note .editorial-tile{top:auto;bottom:25px;width:27%;height:190px}.climate-note .metric-tile{bottom:25px;height:130px;width:22%}.editorial-tile h2{font-size:22px}.caption,.chapter{display:none}.science-stage{padding:76px 24px 65px}.science-stage .info{max-height:calc(100svh - 145px);overflow:auto;align-content:start}.science-stage .info .intro{margin:10px 0 18px}.science-stage .info h2{font-size:32px}.science-card{height:210px}.science-footer{bottom:8px}.science-footer .source{display:none}.science-footer .replay{font-size:10px}.join-reveal{padding:80px 20px 24px;align-items:safe center}.join-panel{padding:26px;gap:26px}.join-panel h2{font-size:38px}}
@media(max-width:600px){.sun{top:23%}.metal-drips .drip-a{left:calc(33% - 32px)}.metal-drips .drip-b{left:calc(51% - 25px)}.metal-drips .drip-center-a{left:calc(44% - 17px)}.metal-drips .drip-center-b{display:none}.falling-drop-a{left:calc(33% - 19px)}.falling-drop-b{left:calc(51% - 19px)}}
@media(max-width:600px){header nav #motion,.on-metal header nav #motion{font-size:10px;min-height:38px;padding:10px;gap:10px}.join-panel .join-intro{max-width:none}}
@media(max-width:360px){header nav #motion,.on-metal header nav #motion{font-size:9px;gap:6px;padding:10px 8px}}
@media(max-width:600px) and (max-height:720px) and (orientation:portrait){.sculpture{height:50svh;width:88.889svh;bottom:24svh}.sun{top:28%}.story-title{top:78px}}
@media(min-width:601px) and (max-width:1100px){.story-title .title-center{left:4%;width:92%;padding:0;font-size:7.5vw;line-height:1.1;white-space:normal}}
@media(min-width:601px) and (max-width:1100px) and (orientation:portrait){.sculpture{height:60svh;width:106.667svh;bottom:20svh}}
@media(max-width:600px){header{background:#eeece4a3;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}.on-metal header{background:#1a3026d9}}
@media(max-width:360px){.metal-drips .drip-center-a{display:none}.metal-drips .drip-b{left:calc(45% - 25px)}.falling-drop-b{left:calc(45% - 19px)}}
@media(hover:none){.science-card:hover:not(:focus-within) .science-card-front{visibility:visible;opacity:1;transform:none}.science-card:hover:not(:focus-within) .science-card-back{visibility:hidden;opacity:0}}
@media(min-width:601px) and (max-width:1100px) and (orientation:landscape){.sculpture{height:84svh;width:149.334svh;bottom:5svh}.story-title .title-left{width:43%;font-size:clamp(42px,5.8vw,64px)}.story-title .title-right{left:62%;right:auto;width:35%;font-size:clamp(42px,6vw,64px);top:-2svh}.climate-note .editorial-tile{top:46%;height:230px}.caption,.chapter{display:none}}
@media(min-width:601px) and (max-width:1100px) and (max-height:550px) and (orientation:landscape){.climate-note .editorial-tile{top:auto;bottom:16px;height:180px}.climate-note .metric-tile{bottom:16px;height:126px}.story-title .title-left,.story-title .title-right{font-size:clamp(32px,5vw,46px)}.story-title .title-right{top:-2svh}.editorial-copy{top:48px}.editorial-tile h2{font-size:22px;margin-bottom:10px}.card-kicker,.metric-label{top:14px}.planet-tag{display:none}}
/* Transparent mobile header overlays the scene without a separate background. */
@media(max-width:600px){
 header{display:flex;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
 .on-metal header{background:transparent}
 .story-title{top:max(90px,calc(env(safe-area-inset-top) + 72px))}
 .science-stage{padding-top:36px}
 .science-stage .info{max-height:calc(100svh - 140px)}
 .join-reveal{padding-top:32px}
}
@media(max-width:600px) and (max-height:720px) and (orientation:portrait){.story-title{top:78px}}
/* Keep every editorial-card element in flow on phones; nothing is cropped. */
@media(max-width:600px){
 .climate-note .editorial-tile{display:flex;flex-direction:column;height:auto;min-height:0;padding:14px}
 .editorial-tile .card-kicker{position:static;padding-right:24px;line-height:1.3}
 .editorial-tile .editorial-copy{position:static;width:100%;margin-top:15px}
 .editorial-tile .planet-tag{display:inline-block;position:static;align-self:flex-start;margin-top:14px;font-size:8px;line-height:1.1;padding:6px 8px;white-space:nowrap}
}
@media(max-width:600px) and (max-height:720px) and (orientation:portrait){.sculpture{height:45svh;width:80svh;bottom:32svh}}
/* Single-line editorial headlines within the mobile card. */
@media(max-width:600px){
 .editorial-tile h2{font-size:clamp(15px,4.7vw,24px);letter-spacing:-.04em;line-height:1.2;white-space:nowrap}
 .editorial-tile h2 br{display:none}
}

/* Follow mobile browser chrome without exposing the page below the scene.
   Artwork stays sized in svh so toolbar movement does not rescale it. */
@media(max-width:1100px){
 .stage,.science-stage{height:100dvh}
}

/* Keep the wordmark readable beside the compact mobile controls. */
@media(max-width:600px){header .brand{font-size:10px;letter-spacing:.24em}}
@media(max-width:360px){header .brand{font-size:9px;letter-spacing:.2em}}

/* Lower the mobile sculpture slightly within the title-to-cards space. */
@media(max-width:600px){.sculpture{bottom:18svh}}
@media(max-width:600px) and (max-height:720px) and (orientation:portrait){.sculpture{bottom:28svh}}

@media(max-width:600px){.sculpture{transform-origin:50% 100%}}

@media(max-width:600px){.stage.mobile-closeup .story-title{z-index:4;color:#fff;mix-blend-mode:difference}}

/* Final mobile caption frames the melted sculpture instead of leaving a void. */
@media(max-width:600px){
 .stage.final-scene .story-title{inset:0;height:100%;z-index:4;color:#26362c;mix-blend-mode:normal}
 .stage.final-scene .story-title .title-final{inset:0;width:100%;height:100%;padding:0;font-size:clamp(40px,12vw,68px);line-height:1.1;letter-spacing:-.035em}
 .stage.final-scene .title-final .final-lead{position:absolute;left:0;top:22%;width:100%;padding:0;opacity:1;white-space:nowrap}
 .stage.final-scene .title-final em{position:absolute;left:0;top:calc((var(--puddle-bottom,75dvh) + 100%) / 2);bottom:auto;transform:translateY(-50%);width:100%;font-size:clamp(44px,13vw,72px);white-space:nowrap}
}
/* Preserve the desktop heading's inline typography. */
@media(min-width:601px){.story-title .title-final .final-lead{position:static;display:inline;width:auto;padding:0;opacity:1}}

.story-title .final-lead{font-weight:400}

/* Keep Safari's fixed layers within the actual visible viewport. */
@media(max-width:1100px){.stage,.science-stage{height:var(--app-height,100dvh)}}
@media(max-width:600px){
 .science-stage{padding-top:88px}
 .science-stage .info{max-height:calc(var(--app-height,100dvh) - 192px)}
 .nav-toggle{min-width:44px;height:44px}
 .join-reveal{padding-bottom:max(30px,env(safe-area-inset-bottom))}
}
/* WebKit supports the blur path, but SVG backdrop filters are inconsistent. */
@supports(-webkit-touch-callout:none){
 .note-tile{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
}

@media(max-width:600px){
 html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
 .join-reveal{padding-top:80px}
 header{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
}

/* Shorter scroll runway from the information screen to the join form. */
.science{height:220svh}

/* Desktop needs a shorter runway than touch scrolling. */
@media(min-width:1101px){.science{height:170svh}}