:root{--ink:#292d2b;--paper:#e9e7e1;--serif:Didot,'Bodoni 72','Times New Roman',serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}header{position:fixed;z-index:20;inset:0 0 auto;display:flex;justify-content:space-between;align-items:center;padding:32px 4.5vw;font-size:12px}a{color:inherit;text-decoration:none}.brand{letter-spacing:.38em;font-size:11px}nav{display:flex;align-items:center;gap:28px}button{font:inherit;color:inherit;cursor:pointer}nav button{border:1px solid #5553;background:#ffffff30;border-radius:30px;padding:9px 14px;font-size:11px}a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid #986340;outline-offset:6px}.story{height:580vh}.stage{position:sticky;top:0;height:100svh;overflow:hidden;background:radial-gradient(ellipse at 50% 90%,#f3eee2 0,transparent 55%),linear-gradient(#c7c5bf,#dedbd3 70%,#d2d0c9)}.sun{position:absolute;left:50%;top:11%;width:38px;aspect-ratio:1;border-radius:50%;background:#fffdeb;box-shadow:0 0 35px 15px #ffe1a45c;transform:translate(-50%,-50%);z-index:1;will-change:width}.haze{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 25%,#ffd98b66,transparent 68%);opacity:0}.story-title{position:absolute;inset:34% 0 auto;text-align:center;font:400 clamp(38px,5.7vw,88px)/1.1 var(--serif);letter-spacing:-.045em;margin:0;z-index:2}.story-title span{position:absolute;left:0;width:100%;opacity:0;padding:0 20px}.story-title span:first-child{opacity:1}.story-title em{font-weight:400}.ground{position:absolute;inset:77% 0 0;background:linear-gradient(#a5a79e0d,#b6b8ae55);border-top:1px solid #fdfcf547}.sculpture{position:absolute;z-index:3;left:50%;bottom:10%;height:76%;width:min(39vw,520px);transform:translateX(-50%);filter:drop-shadow(0 12px 8px #353c3424);will-change:transform}.state{position:absolute;inset:0;background-image:url('assets/statues.png');background-repeat:no-repeat;background-size:400% 100%;opacity:0;will-change:opacity}.s0{background-position:0% 50%;opacity:1}.s1{background-position:33.333% 50%}.s2{background-position:66.666% 50%}.s3{background-position:100% 50%}.caption{position:absolute;left:4.5vw;bottom:7%;font-size:12px;line-height:1.6;z-index:4}.chapter{position:absolute;right:4.5vw;bottom:8%;font-size:9px;letter-spacing:.24em}.flash{position:absolute;inset:0;background:white;opacity:0;z-index:10;pointer-events:none}.science{min-height:100svh;position:relative;isolation:isolate;overflow:hidden;display:grid;place-items:center;padding:120px 5vw 100px;background:radial-gradient(ellipse at 18% 80%,#c9d2c55e,transparent 50%),radial-gradient(ellipse at 90% 85%,#efd2b55c,transparent 50%),#f4f2ed}.info{width:min(1050px,100%);text-align:center;z-index:2}.eyebrow{font-size:10px;letter-spacing:.25em;color:#626c60;margin:0 0 22px}h2{font:400 clamp(36px,3.4vw,48px)/1.13 var(--serif);letter-spacing:-.025em;margin:0}.intro{font-size:15px;line-height:1.6;color:#69706b;margin:17px 0 49px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}details{background:linear-gradient(135deg,#ffffff8c,#ffffff2e);border:1px solid #ffffffdc;border-radius:17px;box-shadow:inset 0 1px 0 #fff,0 12px 32px #504b3810;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);overflow:hidden}summary{list-style:none;padding:29px 20px 20px;cursor:pointer;min-height:218px}summary::-webkit-details-marker{display:none}.number{font-size:9px;letter-spacing:.19em;color:#687461}h3{font-size:19px;font-weight:500;letter-spacing:-.025em;margin:23px 0 13px}summary p{font-size:13px;line-height:1.7;color:#646962;margin:0}.plus{display:block;margin:17px 0 0;font-size:22px;font-weight:300;color:#737d70}details[open] .plus{transform:rotate(45deg)}.more{padding:0 24px 27px;font-size:13px;line-height:1.7;color:#525a52}.source{font-size:11px;line-height:1.8;color:#7b8078;margin:35px auto 0;max-width:470px}.source a{border-bottom:1px solid #9da595;white-space:nowrap}.replay{background:none;border:0;border-bottom:1px solid #a7aa9f;margin-top:24px;padding:8px 0;font-size:11px}.copper{position:absolute;z-index:0;bottom:-120px;left:-5%;width:110%;height:210px;border-radius:48% 50% 0 0;background:linear-gradient(175deg,#e6c3a8 0,#a56c4c 17%,#f6dbc3 22%,#906047 25%,#bc8c6b 40%,#e6c2a6 50%,#7c5138 80%);transform:rotate(-2deg);opacity:.65;filter:blur(1px)}@media(max-width:650px){header{padding:22px 22px}.brand{font-size:9px;letter-spacing:.22em}nav{gap:14px}nav a:first-child{display:none}nav a{font-size:11px}nav button{font-size:9px;padding:7px 9px}.sculpture{width:72vw;height:65%;bottom:15%}.story-title{top:32%;font-size:43px}.caption{left:24px;font-size:11px}.chapter{right:24px;font-size:8px}.cards{grid-template-columns:1fr;gap:14px;width:min(380px,100%);margin:auto}summary{min-height:190px;padding:23px}.science{padding:110px 24px 90px}.intro{margin-bottom:32px}.source{margin-top:25px}.copper{bottom:-155px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.state{will-change:auto}}
/* Full-height cinematic scene; fixed scale throughout the story. */
.sculpture{width:177.778svh;max-width:none;height:100svh;bottom:0;aspect-ratio:16/9;filter:none}
#statue-canvas{display:block;width:100%;height:100%}
#statue-video{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
@media(max-width:650px){.sculpture{width:177.778svh;max-width:none;height:100svh;bottom:0}}
/* A quiet sculptural stage, with light building across the story. */
.stage{--heat:0;background:radial-gradient(ellipse at 50% 10%,#f3ead7 0%,transparent 38%),radial-gradient(ellipse at 17% 53%,#a3aca248,transparent 55%),linear-gradient(115deg,#babdb4,#ddd9ce 52%,#b4b7ad)}
.stage:before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse at 50% 40%,transparent 35%,#26382b25 100%)}
.stage:after{content:'';position:absolute;inset:0;z-index:5;pointer-events:none;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.6' filter='url(%23n)'/%3E%3C/svg%3E")}
.ground{inset:76% 0 0;border:0;background:radial-gradient(ellipse at 50% 45%,#5f6d601c,transparent 58%)}
.sun{background:radial-gradient(circle at 40% 35%,#fffef2,#fff9d8 70%,#ffedbe);box-shadow:0 0 55px 26px #fff0b880,0 0 140px 60px #e6ba7955}
.story-title{inset:34% 0 auto;font-size:clamp(42px,8.5vw,160px);line-height:1.08;letter-spacing:-.045em;color:#24342b;text-align:center}
.story-title span{display:block;padding:0 3vw;white-space:nowrap}
.story-title em{font-family:var(--serif);font-weight:400}
.caption{font-size:12px;line-height:1.65;bottom:7%;color:#344538}.caption small{display:inline-block;font-size:8px;letter-spacing:.17em;margin-bottom:15px;color:#566355}
.chapter{color:#3f5142;display:flex;align-items:center;gap:9px;font-size:8px;letter-spacing:.18em}.chapter i{width:5px;height:5px;background:#8d6244;border-radius:50%;box-shadow:0 0 9px #be8b5f80}
@media(max-width:900px){.story-title{font-size:8.5vw;top:34%}.caption small{font-size:7px;max-width:155px;line-height:1.7}.chapter{max-width:135px;line-height:1.7}}
@media(max-width:550px){.story-title{font-size:8.3vw;top:34%}.caption{bottom:5%;font-size:10px}.chapter{bottom:5%;max-width:115px;font-size:7px}.caption small{max-width:130px}}

.clean-preview header,.clean-preview .story-title,.clean-preview .caption,.clean-preview .chapter{visibility:hidden}



/* User-authored Figma composition, node 1809:1151 (1920 × 1080). */
.stage{--layout-scale:1;container-type:size}
.story-title{top:22.4074%;color:#26362C}
.story-title .title-left,.story-title .title-right{width:40.6%;padding:0;white-space:normal;font-size:calc(134px * var(--layout-scale));line-height:1.2;text-align:left;letter-spacing:0;font-weight:400}
.story-title .title-left{left:2.083333%}.story-title .title-right{left:auto;right:2.083333%}
.story-title .title-left em{display:inline-block;margin-top:calc(10px * var(--layout-scale))}
.climate-note{position:absolute;z-index:6;inset:0;opacity:0;will-change:opacity,transform;color:#26362c;pointer-events:none}
.note-tile{position:absolute;isolation:isolate;overflow:hidden;padding:0;border-radius:calc(33px * var(--layout-scale));background:rgba(217,217,217,.2);backdrop-filter:url(#glass-refraction);-webkit-backdrop-filter:url(#glass-refraction);box-shadow:inset 1px 1px 1px #ffffff65,inset -1px -1px 1px #ffffff70}
.note-tile:before{content:'';position:absolute;z-index:-1;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(135deg,#ffffff09,transparent 30%,transparent 75%,#ffffff04)}
.note-right .metric-tile{left:60.052083%;top:66.666667%;width:14.947917%;height:25%}
.note-right .editorial-tile{left:75%;top:33.333333%;width:22.916667%;height:33.333333%}
.note-left .metric-tile{right:60.052083%;top:66.666667%;width:14.947917%;height:25%}
.note-left .editorial-tile{right:75%;top:33.333333%;width:22.916667%;height:33.333333%}
.metric-label,.card-kicker{position:absolute;top:calc(30px * var(--layout-scale));left:calc(30px * var(--layout-scale));font:400 calc(14px * var(--layout-scale))/1.243 Arial,Helvetica,sans-serif;letter-spacing:0}
.tile-stat{position:absolute;left:calc(30px * var(--layout-scale));top:calc(64px * var(--layout-scale));font:400 calc(72px * var(--layout-scale))/1.2 Arial,Helvetica,sans-serif;letter-spacing:calc(-2.86px * var(--layout-scale));white-space:nowrap}
.tile-stat span{font-size:calc(28.6px * var(--layout-scale));letter-spacing:calc(-1.144px * var(--layout-scale))}
.climate-note p{font:400 calc(14px * var(--layout-scale))/1.5 Arial,Helvetica,sans-serif;margin:0}
.climate-note .metric-period{position:absolute;left:calc(30px * var(--layout-scale));bottom:calc(30px * var(--layout-scale));font-size:calc(12px * var(--layout-scale));line-height:1.05;color:#26362cb3;white-space:nowrap}
.editorial-copy{position:absolute;left:calc(30px * var(--layout-scale));top:calc(80px * var(--layout-scale));width:calc(331px * var(--layout-scale))}
.editorial-tile h2{font:400 calc(56px * var(--layout-scale))/1.1 Arial,Helvetica,sans-serif;letter-spacing:calc(-2.86px * var(--layout-scale));margin:0 0 calc(16px * var(--layout-scale))}
.planet-tag{position:absolute;left:calc(30px * var(--layout-scale));bottom:calc(30px * var(--layout-scale));border:1px solid #26362c33;border-radius:80px;padding:calc(10px * var(--layout-scale)) calc(16px * var(--layout-scale));font:400 calc(12px * var(--layout-scale))/1.05 Arial,Helvetica,sans-serif;color:#26362cb3}
.card-symbol{position:absolute;right:calc(30px * var(--layout-scale));top:calc(30px * var(--layout-scale));width:calc(48px * var(--layout-scale));height:calc(48px * var(--layout-scale))}
.card-symbol img{display:block;transform-origin:top left;transform:scale(var(--layout-scale))}
.water-caustic{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:.2;pointer-events:none;border-radius:inherit}
.caption{left:2.083333%;bottom:8.148148%;font-size:calc(14px * var(--layout-scale));line-height:1.5;margin:0;color:#26362c}
.caption small{font-size:calc(12px * var(--layout-scale));letter-spacing:0;line-height:1.05;margin-bottom:calc(16px * var(--layout-scale));color:#26362cb3}
.chapter{right:2.083333%;bottom:8.333333%;font-size:calc(12px * var(--layout-scale));line-height:1.05;letter-spacing:0;gap:calc(9px * var(--layout-scale));color:#26362cb3}
.chapter i{background:#f46400}
.glass-filter-defs{position:absolute;pointer-events:none;overflow:hidden}
.clean-preview .climate-note{visibility:hidden}
@supports not (backdrop-filter:url(#glass-refraction)){.note-tile{backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}}
@media(max-width:700px){.stage{--mobile:1}.story-title{top:22%}.story-title .title-left,.story-title .title-right{font-size:10vw;width:80%;left:5%;right:auto;line-height:1.08}.story-title .title-left em{margin-top:0}.climate-note .editorial-tile{left:auto;right:5%;top:auto;bottom:22%;width:49%;height:190px}.climate-note .metric-tile{left:5%;right:auto;top:auto;bottom:9%;width:37%;height:140px}.metric-label,.card-kicker{font-size:10px;left:16px;top:16px}.tile-stat{left:16px;top:45px;font-size:40px;letter-spacing:-1.6px}.tile-stat span{font-size:20px}.climate-note .metric-period{left:16px;bottom:16px;font-size:8px}.editorial-copy{left:16px;top:45px;width:calc(100% - 32px)}.editorial-tile h2{font-size:26px;letter-spacing:-1.2px;margin-bottom:10px}.climate-note p{font-size:10px;line-height:1.4}.planet-tag{left:16px;bottom:16px;font-size:7px;padding:5px 8px}.card-symbol{top:16px;right:16px}.caption,.chapter{display:none}.note-tile{border-radius:18px}}
@media(min-width:701px){.note-left .metric-tile{right:75%}}

/* Pointer parallax is applied only to the video-frame layer. */
.stage{--pointer-x:0;--pointer-y:0;--parallax-weight:1}
@media(hover:hover) and (pointer:fine){
.sculpture{translate:calc(var(--pointer-x) * 19px * var(--parallax-weight)) calc(var(--pointer-y) * 11px * var(--parallax-weight))}
}
@media(prefers-reduced-motion:reduce){.stage{--parallax-weight:0!important}}
/* Figma revision: compact temperature card, 287 × 201 at the 1920 × 1080 reference. */
.note-right .metric-tile,.note-left .metric-tile{height:18.611111%}
.tile-stat{top:calc(56px * var(--layout-scale))}
@media(max-width:700px){.climate-note .metric-tile{height:120px}.tile-stat{top:39px;font-size:36px}.climate-note .metric-period{bottom:15px}.metric-label{top:15px}}

/* Second scene: Figma 1851:268. The opening scene keeps its authored layout. */
@media(min-width:701px){
.note-left .editorial-tile{left:2.083333%;right:auto;top:16.666667%}
.note-left .metric-tile{left:25%;right:auto;top:50%;width:11.5625%}
.story-title .title-right{left:60.052083%;right:auto;top:12.685193cqh;width:37.864583%;color:#26362C}
.story-title .title-right em{display:inline-block;margin-left:13.802083cqw}
}
/* First-scene metric: updated Figma width 222, x 1218 on the 1920 canvas. */
@media(min-width:701px){.note-right .metric-tile{left:63.4375%;width:11.5625%}}
/* The statue's material carries the reader from the story into participation. */
.science{height:300svh;min-height:0;padding:0;display:block;overflow:visible;background:#f4f2ed}
.science-stage{--flood:0;--join:0;position:sticky;top:0;height:100svh;min-height:720px;overflow:hidden;isolation:isolate;display:grid;place-items:center;padding:100px 5vw 80px;background:radial-gradient(ellipse at 18% 80%,#c9d2c55e,transparent 50%),radial-gradient(ellipse at 90% 85%,#efd2b55c,transparent 50%),#f4f2ed}
.science-stage .info{position:relative;z-index:2}
.metal-drips{position:absolute;z-index:1;inset:0 0 auto;height:34svh;min-height:260px;pointer-events:none;opacity:calc(1 - var(--flood));}
.metal-drips svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(2px 5px 7px #2a362115)}
.drip{transform-box:fill-box;transform-origin:top;animation:metal-stretch 8s ease-in-out infinite alternate}.drip-b{animation-duration:10s;animation-delay:-3s}.drip-c{animation-duration:12s;animation-delay:-6s}
@keyframes metal-stretch{from{transform:scaleY(.83)}to{transform:scaleY(1.09)}}
.metal-flood{position:absolute;z-index:3;inset:0 0 auto;height:130%;pointer-events:none;translate:0 calc(-105% + var(--flood) * 105%);filter:drop-shadow(0 12px 13px #45332322);will-change:translate}
.metal-flood svg{display:block;width:100%;height:100%}
.join-reveal{position:absolute;z-index:4;inset:0;display:grid;place-items:center;padding:90px 24px 35px;opacity:var(--join);translate:0 calc((1 - var(--join)) * 25px);pointer-events:none}
.join-panel{width:min(435px,100%);color:#fff4de;pointer-events:auto;padding:30px 34px 24px;border:1px solid #fff1ce38;border-radius:24px;background:linear-gradient(140deg,#20382b8c,#273326a6);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:inset 0 1px 0 #fff3d32b,0 18px 60px #25302420}
.join-kicker{font-size:8px;letter-spacing:.17em;line-height:1.5;margin:0 0 20px;opacity:.7}
.join-panel h2{font:400 43px/1.04 var(--serif);letter-spacing:-.035em;margin:0 0 16px}.join-panel h2 em{font-weight:400}
.join-intro{font-size:12px;line-height:1.6;opacity:.75;margin:0 0 24px}
.join-panel label{display:block;font-size:10px;margin:15px 0 7px;opacity:.85}
.join-panel input,.join-panel select{width:100%;border:1px solid #fff2cd3b;border-radius:8px;background:#ffffff08;padding:11px 12px;font:12px Arial,Helvetica,sans-serif;color:#fff4de;outline-offset:3px;min-height:39px}.join-panel input::placeholder{color:#fff4de6e}.join-panel select option{color:#26362c;background:#f4f2ed}
.join-submit{width:100%;display:flex;justify-content:space-between;align-items:center;margin:23px 0 0;border:0;border-radius:8px;background:#f2e8ca;color:#26362c;padding:13px 15px;font-size:12px}.join-submit span{font-size:18px}
.join-note{font-size:9px;line-height:1.5;color:#fff4de8c;margin:14px 0 0}
.motion-reduced .drip{animation:none}
@media(prefers-reduced-motion:reduce){.drip{animation:none}.metal-flood{will-change:auto}}
@media(max-width:650px){.science{height:330svh}.science-stage{min-height:780px;padding:90px 24px 65px}.science-stage .cards{gap:8px}.science-stage summary{min-height:115px;padding:15px}.science-stage h3{margin:13px 0 7px}.science-stage summary p{font-size:12px}.science-stage .plus{margin-top:6px}.science-stage .intro{margin:13px 0 24px}.science-stage .source{margin-top:20px}.science-stage .eyebrow{margin-bottom:15px}.join-panel{padding:25px}.join-panel h2{font-size:38px}.metal-drips{height:220px;min-height:0}}
.join-reveal[inert] .join-panel{pointer-events:none}
.on-metal header{color:#fff4de}.on-metal nav button{border-color:#fff4de40;background:#ffffff0d;color:#fff4de}
.science-stage{width:100%}

/* Cross-fade out of the white flash; the information never scrolls up from below. */
.science-stage{position:fixed;inset:0;top:0;height:100svh;min-height:0;z-index:12;opacity:var(--science-entrance,0);visibility:hidden;pointer-events:none}
.science-stage.science-active{visibility:visible;pointer-events:auto}
.metal-drips{opacity:calc(var(--drip-reveal,0) * (1 - var(--flood)));transform-origin:top;scale:1 calc(.65 + var(--drip-reveal,0) * .35)}
/* A fast pour: the surface itself changes shape, rather than sliding a scalloped sheet. */
.metal-flood{inset:0;height:100%;translate:none;filter:none;will-change:auto}
.metal-flood svg{overflow:hidden}
.liquid-reflections{transform-origin:center;transform:translateY(calc(var(--flood) * 45px)) scaleX(calc(1 + var(--flood) * .04))}
/* Photorealistic alpha assets replace the vector stand-ins. */
.metal-drips .drip{position:absolute;top:0;object-fit:fill;filter:saturate(.76) brightness(.94);transform-origin:top;animation:real-metal-stretch 9s ease-in-out infinite alternate}
.metal-drips .drip-a{left:calc(20% - 60px);width:120px;height:225px}
.metal-drips .drip-b{left:calc(67% - 40px);width:80px;height:165px;animation-duration:12s;animation-delay:-4s}
.metal-drips .drip-center-a{left:calc(44% - 28px);width:56px;height:82px;animation-duration:11s;animation-delay:-7s}
.metal-drips .drip-center-b{left:calc(63.3% - 34px);width:68px;height:115px;animation-duration:10s;animation-delay:-2s}
@keyframes real-metal-stretch{from{transform:scaleY(.95)}to{transform:scaleY(1.04)}}
.metal-flood{filter:saturate(.76) brightness(calc(1 - var(--join) * .18))}
#metal-pour-canvas{display:block;width:100%;height:100%}
@media(prefers-reduced-motion:reduce){.metal-drips .drip{animation:none}}
.motion-reduced .metal-drips .drip,.motion-reduced .drip{animation:none}
@media(max-width:650px){.metal-drips .drip-a{left:calc(16% - 45px);width:90px;height:160px}.metal-drips .drip-b{left:calc(82% - 32px);width:65px;height:120px}.metal-drips .drip-center-a{left:calc(43% - 20px);width:40px;height:62px}.metal-drips .drip-center-b{left:calc(64% - 23px);width:46px;height:80px}}

/* Detached droplets reuse the isolated bead in the material image. */
.falling-drop{position:absolute;width:32px;height:28px;background:url("assets/molten-copper-drip.png") center -356px / 300px 450px no-repeat;filter:saturate(.76) brightness(.94);opacity:0;animation:metal-drop-fall 7.8s linear infinite;will-change:transform,opacity}
.falling-drop-a{left:calc(20% - 19px);top:180px;animation-delay:-2.1s}
.falling-drop-b{left:calc(67% - 19px);top:132px;animation-duration:9.3s;animation-delay:-6.4s}
@keyframes metal-drop-fall{0%,55%{opacity:0;transform:translateY(0) scale(.65,.85)}58%{opacity:1;transform:translateY(0) scale(.8,1)}65%{opacity:1;transform:translateY(5svh) scale(.85,1.15)}77%{opacity:1;transform:translateY(28svh) scale(.9,1.25)}91%{opacity:1;transform:translateY(68svh) scale(.95,1.35)}98%,100%{opacity:0;transform:translateY(110svh) scale(1,1.4)}}
@media(max-width:650px){.falling-drop-a{left:calc(16% - 19px);top:128px}.falling-drop-b{left:calc(82% - 19px);top:96px}}
@media(prefers-reduced-motion:reduce){.falling-drop{display:none}}
.motion-reduced .falling-drop{display:none}

/* Positions follow the approved six-drip composition. */
.metal-drips .drip-edge-left{left:calc(1.7% - 25px);width:50px;height:105px;animation-duration:10.5s;animation-delay:-5s}
.metal-drips .drip-edge-right{left:calc(98.4% - 22px);width:44px;height:72px;animation-duration:12.5s;animation-delay:-8s}
@media(max-width:650px){.metal-drips .drip-edge-left{left:calc(3% - 16px);width:32px;height:65px}.metal-drips .drip-edge-right{left:calc(97% - 14px);width:28px;height:48px}}
@media(min-width:651px) and (max-width:1100px){.metal-drips .drip-a{left:calc(26% - 60px)}.metal-drips .drip-b{left:calc(60% - 40px)}.falling-drop-a{left:calc(26% - 19px)}.falling-drop-b{left:calc(60% - 19px)}}

/* Information type scale: display, card title, body and small labels. */
.science-stage .info{--info-green:#26362c;--info-body:14px;--info-label:10px}
.science-stage .info h2{color:var(--info-green)}
.science-stage .info h3{font:400 20px/1.25 Arial,Helvetica,sans-serif;letter-spacing:-.025em}
.science-stage .info .intro,.science-stage .info summary p,.science-stage .info .more{font:400 var(--info-body)/1.7 Arial,Helvetica,sans-serif;color:#626c64}
.science-stage .info .eyebrow,.science-stage .info .number,.science-stage .info .source,.science-stage .info .replay{font-size:var(--info-label);font-weight:400}
.science-stage .info .eyebrow,.science-stage .info .number{letter-spacing:.19em}
@media(min-width:651px){.science-stage .cards{min-height:var(--cards-reserved-height,365px)}}

/* Lower the closing note without changing the reserved card layout. */
.science-stage .info .source,.science-stage .info .replay{position:relative;top:clamp(32px,7svh,80px)}
@media(max-height:750px){.science-stage .info .source,.science-stage .info .replay{top:20px}}

/* Heat dissolves the information into a quiet forest-green participation scene. */
.climate-dusk{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;opacity:var(--flood);background:radial-gradient(ellipse at 80% 2%,#87927445,transparent 48%),radial-gradient(ellipse at 6% 90%,#43675055,transparent 58%),linear-gradient(135deg,#172b24,#243d30 48%,#101f1b)}
.dusk-light{position:absolute;width:110%;height:115%;right:-45%;top:-55%;border-radius:50%;background:radial-gradient(ellipse,#d9c39a80 0%,#b4aa7650 15%,#798c5c25 34%,transparent 65%);filter:blur(45px);transform:translateY(calc((1 - var(--join)) * 35px))}
.dusk-grain{position:absolute;inset:0;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)' opacity='.7'/%3E%3C/svg%3E")}
.heat-veil{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:var(--heat-veil,0);background:radial-gradient(ellipse at 50% 30%,#fff6dd,transparent 75%);mix-blend-mode:screen}
.science-stage .info{filter:blur(var(--heat-blur,0px))}
.join-reveal{translate:none;transform:scale(calc(1.015 - var(--join) * .015))}
.join-panel{background:linear-gradient(135deg,#ffffff0c,#ffffff03);border-color:#e5e9ce29;box-shadow:inset 0 1px 0 #fff8d615,0 24px 90px #07150c30;color:#f0eddb}
.join-submit{background:#dce4c8}
.motion-reduced .join-reveal{transform:none}
@media(prefers-reduced-motion:reduce){.join-reveal{transform:none}}

.climate-dusk .water-backdrop{position:absolute;inset:0;width:100%;height:100%;opacity:.48;mix-blend-mode:soft-light;pointer-events:none}

/* Static information cards: the heading and row form one centered composition. */
.science-stage .info{position:static;display:grid;justify-items:center;align-content:center;transform:translateY(-2svh)}
.science-stage .info .cards{min-height:0;width:100%;align-items:stretch}
.science-card{background:linear-gradient(135deg,#ffffff8c,#ffffff2e);border:1px solid #ffffffdc;border-radius:17px;box-shadow:inset 0 1px 0 #fff,0 12px 32px #504b3810;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);overflow:hidden}
.science-card-content{min-height:218px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:28px 20px}
.science-stage .info .science-card h3{margin:23px 0 13px}
.science-card p{font:400 var(--info-body)/1.7 Arial,Helvetica,sans-serif;color:#626c64;margin:0}
.science-stage .info .source{position:absolute;top:auto;bottom:116px;left:50%;transform:translateX(-50%);width:90%;margin:0}
.science-stage .info .replay{position:absolute;top:auto;bottom:64px;left:50%;transform:translateX(-50%);margin:0}
.science-stage .info{transform:none}
@media(max-height:750px){.science-stage .info .source{bottom:70px}.science-stage .info .replay{bottom:26px}}
@media(max-width:650px){.science-stage .info .cards{width:min(380px,100%);gap:10px}.science-card-content{min-height:130px;padding:16px}.science-stage .info .science-card h3{margin:10px 0 8px}.science-stage .info .intro{margin-bottom:24px}.science-stage .info .source{bottom:60px}.science-stage .info .replay{bottom:20px}}

.science-card{position:relative;height:250px;outline-offset:5px}
.science-card:focus-visible{outline:2px solid #6d7f62}
.science-card-mark{position:absolute;inset:25px 24px auto;display:flex;justify-content:space-between;align-items:center;color:#687461}
.science-card-mark svg{width:24px;height:24px}
.science-card-front,.science-card-back{position:absolute;inset:68px 24px 24px;min-height:0;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .25s ease,transform .25s ease,visibility .25s}
.science-stage .info .science-card h3{margin:0 0 13px}
.science-card-back{visibility:hidden;opacity:0;transform:translateY(5px)}
.science-card-back p{font-size:14px;line-height:1.6}
.science-card:is(:hover,:focus-within) .science-card-front{visibility:hidden;opacity:0;transform:translateY(-5px)}
.science-card:is(:hover,:focus-within) .science-card-back{visibility:visible;opacity:1;transform:none}
.science-footer{position:absolute;z-index:2;inset:auto 0 64px;text-align:center;color:#7b8078;opacity:calc(1 - var(--flood));pointer-events:auto}
.science-footer .source{font:400 10px/1.8 Arial,Helvetica,sans-serif;margin:0 auto 24px;max-width:90%}
.science-footer .replay{font-size:10px;margin:0}
@media(max-height:750px){.science-footer{bottom:26px}}
@media(max-width:650px){.science-card{height:176px}.science-card-mark{inset:14px 18px auto}.science-card-mark svg{width:20px;height:20px}.science-card-front,.science-card-back{inset:44px 18px 14px}.science-card-back p{font-size:12px;line-height:1.5}.science-footer{bottom:20px}}
@media(prefers-reduced-motion:reduce){.science-card-front,.science-card-back{transition:none;transform:none}}
.motion-reduced .science-card-front,.motion-reduced .science-card-back{transition:none;transform:none}
/* A soft sage bloom accompanies the card's detail text. */
.science-card::before{content:'';position:absolute;inset:-15%;pointer-events:none;background:radial-gradient(ellipse at 50% 65%,#c1d4b454 0%,#d5dfc92b 40%,transparent 72%);opacity:0;transform:scale(.85);transition:opacity .55s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.science-card{transition:border-color .4s ease,box-shadow .4s ease}
.science-card:is(:hover,:focus-within){border-color:#f9fff2;box-shadow:inset 0 1px 0 #fff,0 14px 36px #47634213}
.science-card:is(:hover,:focus-within)::before{opacity:1;transform:scale(1)}
.science-card-back p{color:#626c64;transition:color .45s ease .08s}
.science-card:is(:hover,:focus-within) .science-card-back p{color:#354d3b}
.science-card-mark{transition:color .4s ease}
.science-card:is(:hover,:focus-within) .science-card-mark{color:#48653f}
@media(prefers-reduced-motion:reduce){.science-card,.science-card::before,.science-card-back p,.science-card-mark{transition:none}.science-card::before{transform:none}}
.motion-reduced .science-card,.motion-reduced .science-card::before,.motion-reduced .science-card-back p,.motion-reduced .science-card-mark{transition:none}
/* Hover study: tinted glass and one soft passing reflection. */
.science-card::before{inset:0;background:radial-gradient(ellipse at 18% 85%,#b9cfae88,transparent 70%),linear-gradient(135deg,#e7efdd8c,#c3d3b73d);transform:none;transition:opacity .45s ease}
.science-card:is(:hover,:focus-within)::before{opacity:1;transform:none}
.science-card::after{content:'';position:absolute;z-index:0;inset:-35% -80%;pointer-events:none;background:linear-gradient(110deg,transparent 35%,#fffef730 45%,#fffef77a 50%,#fffef730 55%,transparent 65%);opacity:0;transform:translateX(-45%)}
.science-card:is(:hover,:focus-within)::after{animation:card-glass-reflection 1.15s cubic-bezier(.2,.6,.2,1) both}
.science-card-mark,.science-card-front,.science-card-back{z-index:1}
.science-card-back{transform:none;transition:opacity .3s ease,visibility .3s}
.science-card:is(:hover,:focus-within) .science-card-back p{color:#263e2c;animation:card-copy-appear .5s cubic-bezier(.2,.6,.2,1) both}
@keyframes card-glass-reflection{0%{opacity:0;transform:translateX(-45%)}20%{opacity:.8}75%{opacity:.55}100%{opacity:0;transform:translateX(45%)}}
@keyframes card-copy-appear{from{opacity:0;filter:blur(3px);transform:translateY(4px)}to{opacity:1;filter:blur(0);transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.science-card:is(:hover,:focus-within)::after,.science-card:is(:hover,:focus-within) .science-card-back p{animation:none}}
.motion-reduced .science-card:is(:hover,:focus-within)::after,.motion-reduced .science-card:is(:hover,:focus-within) .science-card-back p{animation:none}
/* Neutral hover keeps the paper-and-glass palette. */
.science-card::before{background:radial-gradient(ellipse at 25% 80%,#eee8d94d,transparent 75%),linear-gradient(135deg,#ffffff52,#f4efe51a)}
.science-card:is(:hover,:focus-within){border-color:#fffdf7;box-shadow:inset 0 1px 0 #fff,0 14px 36px #504b3810}
.science-card:is(:hover,:focus-within) .science-card-back p{color:#3e4840}
.science-card:is(:hover,:focus-within) .science-card-mark{color:#687461}
/* A restrained bronze reflection passes once across the neutral glass. */
.science-card::after{background:linear-gradient(110deg,transparent 35%,#c69a6a00 41%,#c69a6a1b 46%,#e1be914a 50%,#c69a6a1b 54%,#c69a6a00 59%,transparent 65%)}
.science-card:is(:hover,:focus-within)::after{animation:card-glass-reflection 1.3s cubic-bezier(.2,.6,.2,1) both}
@media(prefers-reduced-motion:reduce){.science-card:is(:hover,:focus-within)::after{animation:none}}
.motion-reduced .science-card:is(:hover,:focus-within)::after{animation:none}


/* Shared action styling and a consistent form type scale. */
.join-link,.join-submit{font:400 14px/1.25 Arial,Helvetica,sans-serif;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:46px;background:#dce4c8;color:#26362c;border:0;border-radius:8px;padding:13px 16px}
.join-link svg,.join-submit svg{display:block;flex:0 0 20px;width:20px;height:20px}
header .join-link{min-height:36px;padding:9px 13px;font-size:12px;gap:18px}
header .join-link svg{width:17px;height:17px;flex-basis:17px}
.join-link:hover,.join-submit:hover{background:#e8eddc}
.join-panel{--form-body:14px;--form-label:12px;--form-small:10px}
.join-panel h2{font-size:43px;line-height:1.08}
.join-kicker,.join-note{font-size:var(--form-small);line-height:1.5}
.join-intro{font-size:var(--form-body);line-height:1.6}
.join-panel label{font-size:var(--form-label);line-height:1.4}
.join-panel input,.join-panel select{font-size:var(--form-body);line-height:1.3;min-height:44px}
.join-panel select{appearance:none;-webkit-appearance:none;padding-right:42px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f0eddb' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px}
@media(max-width:800px){nav{gap:16px}header .join-link{font-size:11px;gap:10px;padding:9px 11px}}
@media(max-width:650px){header .join-link{font-size:11px}nav a[href='#science']{display:none}nav #motion{max-width:74px}.join-panel input,.join-panel select{font-size:16px}.join-panel h2{font-size:38px}}

.join-reveal{padding:80px 24px 24px;overflow:auto;align-items:safe center}

header nav #motion,.on-metal header nav #motion{background:#dce4c8;color:#26362c;border:0;border-radius:8px;padding:10px 15px;min-height:36px;font:400 12px/1.25 Arial,Helvetica,sans-serif;max-width:none}
header nav #motion:hover{background:#e8eddc}
@media(max-width:650px){header nav #motion{font-size:11px;padding:9px 12px}nav a[href='#science']{display:block}}

.join-select{position:relative}
.join-select-trigger{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:44px;padding:11px 14px 11px 12px;border:1px solid #fff2cd3b;border-radius:8px;background:#ffffff08;color:#f0eddb;font:400 14px/1.3 Arial,Helvetica,sans-serif;text-align:left}
.join-select-trigger>svg{width:16px;height:16px;flex:0 0 16px;transition:transform .2s ease}
.join-select-trigger[aria-expanded='true']{border-color:#dce4c880;background:#ffffff0d}
.join-select-trigger[aria-expanded='true']>svg{transform:rotate(180deg)}
.join-select-options{position:absolute;z-index:6;inset:auto 0 calc(100% + 8px);padding:6px;border:1px solid #dce4c838;border-radius:12px;background:linear-gradient(135deg,#344d3ff5,#243d31f5);backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);box-shadow:0 12px 36px #061a1455,inset 0 1px 0 #ffffed0d}
.join-select-options[hidden]{display:none}
.join-select-options [role='option']{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;min-height:42px;border:0;border-radius:7px;padding:11px 12px;text-align:left;background:transparent;color:#eeeddd;font:400 14px/1.3 Arial,Helvetica,sans-serif;cursor:pointer}
.join-select-options [role='option'] svg{width:18px;height:18px;flex:0 0 18px;opacity:0}
.join-select-options [aria-selected='true']{background:#dce4c816;color:#f7f8e6}
.join-select-options [aria-selected='true'] svg{opacity:1;color:#dce4c8}
.join-select-options [role='option']:hover,.join-select-options [role='option']:focus-visible{background:#dce4c824;outline:none}
.join-select-trigger:focus-visible{outline:2px solid #dce4c8;outline-offset:3px}
@media(max-width:650px){.join-select-trigger,.join-select-options [role='option']{font-size:16px}}
@media(prefers-reduced-motion:reduce){.join-select-trigger>svg{transition:none}}
.motion-reduced .join-select-trigger>svg{transition:none}

header nav #motion{display:flex;align-items:center;justify-content:space-between;gap:18px}header nav #motion svg{display:block;width:17px;height:17px;flex:0 0 17px}

/* Wider participation composition: editorial copy beside the fields. */
.join-panel{width:min(1080px,88vw);min-height:min(560px,74svh);display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(36px,6vw,88px);align-items:center;padding:clamp(32px,4vw,64px);border-radius:28px}
.join-copy{align-self:stretch;display:flex;flex-direction:column;justify-content:center}
.join-panel h2{font-size:clamp(46px,4.4vw,68px);line-height:1.04;margin-bottom:24px}
.join-copy .join-kicker{margin-bottom:32px;max-width:300px}
.join-copy .join-intro{margin:0;max-width:360px}
.join-fields label:first-child{margin-top:0}
.join-panel .join-fields{min-width:0}
.join-panel input,.join-select-trigger{min-height:48px;padding-top:13px;padding-bottom:13px}
.join-submit{min-height:50px;margin-top:26px}
.join-note{margin-top:16px}
@media(max-width:760px){.join-panel{width:min(560px,90vw);min-height:0;grid-template-columns:1fr;gap:28px;padding:32px}.join-panel h2{font-size:46px;margin-bottom:18px}.join-copy .join-kicker{margin-bottom:20px}.join-copy .join-intro{max-width:none}.join-panel .join-copy{align-self:auto}}
@media(max-width:450px){.join-panel{padding:26px 22px;gap:24px}.join-panel h2{font-size:40px}.join-copy .join-intro br{display:none}}
/* Compact, balanced spacing for the wide form. */
.join-reveal{padding:72px 24px}
.join-panel{min-height:0;padding:40px clamp(32px,3.5vw,52px);gap:clamp(28px,3.5vw,48px)}
.join-copy .join-kicker{margin-bottom:24px}
.join-panel h2{margin-bottom:20px}
@media(max-width:760px){.join-panel{padding:32px;gap:26px}.join-copy .join-kicker{margin-bottom:20px}.join-panel h2{margin-bottom:18px}}
@media(max-width:450px){.join-reveal{padding:84px 18px 40px}.join-panel{padding:26px 22px;gap:24px}}
.join-copy{justify-content:flex-start}
/* The menu action reverses with the light and dark scenes. */
header nav #motion{background:#26362c;color:#eff0df;transition:background-color .3s ease,color .3s ease}
header nav #motion:hover{background:#354b3d}
.on-metal header nav #motion{background:#dce4c8;color:#26362c}
.on-metal header nav #motion:hover{background:#e8eddc}
@media(prefers-reduced-motion:reduce){header nav #motion{transition:none}}