/* Earth Wallet brand layer: tokens, type and component skins from the Brand Identity Guidelines.
   Reference material lives in brand/ (README.md, guideline slides, logo masters). Loaded last. */

/* Gilroy is the brand display face. It is commercial, so it is used here only when installed;
   add licensed webfont files to assets/fonts and a url() below to serve it to every visitor.
   Urbanist is the closest open-licence geometric match and stands in until then. */
@font-face{font-family:Gilroy;src:local('Gilroy-Medium'),local('Gilroy Medium');font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:Gilroy;src:local('Gilroy-SemiBold'),local('Gilroy SemiBold');font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:Gilroy;src:local('Gilroy-UltraLightItalic'),local('Gilroy UltraLight Italic');font-style:italic;font-weight:200;font-display:swap}
@font-face{font-family:Urbanist;src:url('./assets/fonts/Urbanist.ttf') format('truetype');font-style:normal;font-weight:100 900;font-display:swap}
@font-face{font-family:Poppins;src:url('./assets/fonts/poppins-latin-300-normal.woff2') format('woff2');font-style:normal;font-weight:300;font-display:swap}
@font-face{font-family:Poppins;src:url('./assets/fonts/poppins-latin-400-normal.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Poppins;src:url('./assets/fonts/poppins-latin-500-normal.woff2') format('woff2');font-style:normal;font-weight:500;font-display:swap}

:root{
 /* Primary 60%: Social Blue. Secondary 30%: green, yellow, gold, violet. Accent 10%: crimson and greys. */
 --ew-social-blue:#2496FF;--ew-social-blue-60:#7CC0FF;--ew-social-blue-20:#D3EAFF;
 --ew-forest-green:#55D171;--ew-electric-yellow:#FFD600;--ew-gold:#FFA800;--ew-electric-violet:#691FDD;--ew-electric-violet-60:#A579EB;
 --ew-crimson:#E22D3F;--ew-crimson-20:#F9D5D9;--ew-moonlight-grey:#E6E9ED;--ew-shuttle-gray:#A5ACBB;
 --ew-outer-space:#0F1726;--ew-outer-space-80:#3F4551;--ew-outer-space-60:#6F747D;--ew-outer-space-20:#CFD1D4;
 --font-display:Gilroy,Urbanist,sans-serif;--font-body:Poppins,sans-serif;
 --ink:var(--ew-moonlight-grey);--muted:var(--ew-shuttle-gray)
}

/* Type system: Gilroy SemiBold headings at -1% tracking, Poppins Light copy, Poppins Medium labels and buttons. */
body{font-family:var(--font-body);font-weight:300}
.cloud-copy p,.survey-heading h2,.after-journey h2,.demand-intro,.ending-chart h3{font-family:var(--font-display);font-weight:600;letter-spacing:-.01em}
.cloud-copy p{line-height:1.25}.after-journey h2{line-height:1.08}.survey-heading h2{line-height:1.08}
.survey-subtitle,.section-intro>p:last-child,.mineral-detail,.chart-note,.ending-chart p{font-family:var(--font-body);font-weight:300}
.section-intro>p:last-child{line-height:1.6}
.section-index,.small-label,.strata-top,.strata-caption,.mineral-estimate,.ending-chart-foot,.outlook-quote figcaption,.stockpile-chart figcaption>span:last-child{font-family:var(--font-body);font-weight:500;text-transform:uppercase;letter-spacing:.2em}
.section-index{color:var(--ew-social-blue)}
.mineral-name{font-family:var(--font-body);font-weight:500;letter-spacing:0}
.mineral-tag strong,.altitude b{font-family:var(--font-display);font-weight:600;letter-spacing:-.01em}
/* Quote style: Gilroy UltraLight Italic. */
.outlook-quote blockquote p{font-family:var(--font-display);font-weight:200;font-style:italic;letter-spacing:0;line-height:1.5;color:var(--ew-outer-space)}

/* Logo: official horizontal lockup, colour mark with white or dark wordmark. */
.brand{gap:0;letter-spacing:0}
.brand-logo{display:block;height:36px;width:auto}
.brand-logo-on-light,body.on-snow:not(.in-strata) .brand-logo-on-dark{display:none}
body.on-snow:not(.in-strata) .brand-logo-on-light{display:block}
@media(max-width:700px){.brand-logo{height:30px}}

/* Buttons: pill CTAs. Primary is Social Blue with white text; secondary is a Social Blue outline. */
.logo-intro-skip,.strata-return{font:500 13px/1 var(--font-body);letter-spacing:0;border-radius:60px;padding:12px 22px;text-decoration:none;transition:background-color .2s,color .2s}
.strata-return{transition:opacity .6s,background-color .2s}
.logo-intro-skip{border:1px solid var(--ew-social-blue);color:var(--ew-social-blue)}
.logo-intro-skip:hover{background:var(--ew-social-blue);color:#fff}
.strata-return{background:var(--ew-social-blue);color:#fff;text-shadow:none;bottom:20px}
.strata-return:hover{background:#3AA1FF}
button:hover{color:var(--ew-social-blue-60)}
a:focus-visible,button:focus-visible{outline:2px solid var(--ew-social-blue);outline-offset:4px}
@media(max-width:700px){.strata-return{bottom:48px;padding:10px 16px;font-size:12px}}

/* Dark surfaces use Outer Space. */
#error,.no-script{background:var(--ew-outer-space);border:1px solid var(--ew-outer-space-80);border-radius:16px;color:var(--ew-moonlight-grey)}
.credits,.terrain-credit{color:var(--ew-shuttle-gray)}.credits:hover{color:#fff}

/* Survey cards: Outer Space glass. */
.mineral-tag{background:linear-gradient(130deg,rgba(63,69,81,.92),rgba(15,23,38,.95));border-color:#E6E9ED40;border-left-color:#E6E9EDa0;border-bottom-color:#E6E9ED60;color:#fff}
.mineral-detail,.mineral-tag small{color:var(--ew-shuttle-gray)}
.mineral-estimate{color:var(--ew-moonlight-grey);border-top-color:#E6E9ED33}
.survey-subtitle,.survey-disclosure span{color:var(--ew-moonlight-grey)}

/* Snow surface: dark copy is Outer Space. */
body.on-snow:not(.in-strata) header,body.on-snow:not(.in-strata) .chapter,body.on-snow:not(.in-strata) #sound{color:var(--ew-outer-space)}
.after-journey{color:var(--ew-outer-space)}.section-intro>p:last-child{color:var(--ew-outer-space-80)}
/* Header scrim keeps the lockup legible over cloud, terrain and photography: Outer Space behind the white
   wordmark, Moonlight Grey behind the dark one on snow. */
body.reading-stockpile header{background:none}
header:before{content:"";position:absolute;inset:0 0 -48px;z-index:-1;pointer-events:none;background:linear-gradient(180deg,#0F172699,#0F172600)}
body.on-snow:not(.in-strata) header:before{background:linear-gradient(180deg,#E6E9EDcc,#E6E9ED00)}

/* Demand chart: Social Blue demand, Outer Space capacity, Crimson supply gap. */
.stockpile-chart.demand-chart{color:var(--ew-outer-space)}
.demand-intro{border-left:2px solid var(--ew-social-blue)}
.demand-line,.demand-chart .demand-point{stroke:var(--ew-social-blue)}.demand-chart .demand-point{fill:var(--ew-social-blue)}
.capacity-line{stroke:var(--ew-outer-space-60)}.demand-chart .capacity-point{fill:var(--ew-outer-space-60)}
.demand-chart .chart-grid{stroke:#0F172620}.demand-chart .axis-label,.demand-chart .chart-note,.demand-chart figcaption>span:last-child{fill:var(--ew-outer-space-60);color:var(--ew-outer-space-60)}
.demand-chart svg text[fill="#ff8b9f"]{fill:var(--ew-social-blue)}.demand-chart svg text[fill="#dce9ef"]{fill:var(--ew-outer-space-80)}.demand-chart svg text[fill="#ddab98"]{fill:var(--ew-crimson)}
.demand-chart .chart-cursor path{stroke:#0F172660}
.demand-chart-footer,.chart-year,.demand-tooltip{color:var(--ew-outer-space-80)}
.chart-legend span:before{background:var(--ew-social-blue)}.chart-legend span+span:before{background:var(--ew-outer-space-60)}
.chart-year input{accent-color:var(--ew-social-blue)}

/* Ending charts: white copy on glass. */
.ending-charts{color:#fff}.ending-chart p,.ending-chart-number,.ending-chart-foot{color:var(--ew-moonlight-grey)}

/* Newsletter: closing section on Outer Space, sliding over the manufacturing HUD. */
body.reading-stockpile header{z-index:10}
.newsletter-section{position:relative;z-index:9;background:var(--ew-outer-space);color:#fff;padding:clamp(110px,16vh,180px) 24px clamp(90px,14vh,150px);text-align:center}
.newsletter-inner{max-width:760px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.newsletter-mark{width:56px;height:56px;margin-bottom:32px}
.newsletter-section .section-index{margin:0 0 22px;font-size:12px}
.newsletter-section h2{font:600 clamp(40px,5.6vw,72px)/1.06 var(--font-display);letter-spacing:-.01em;margin:0;text-wrap:balance}
.newsletter-lede{font:300 clamp(17px,1.6vw,21px)/1.6 var(--font-body);color:var(--ew-moonlight-grey);max-width:560px;margin:26px 0 44px}
.newsletter-form{display:flex;gap:12px;width:100%;max-width:560px}
.newsletter-form input[type=email]{flex:1;min-width:0;height:58px;padding:0 26px;border-radius:60px;border:1px solid #E6E9ED40;background:#ffffff0d;color:#fff;font:400 16px var(--font-body);transition:border-color .2s,background-color .2s}
.newsletter-form input[type=email]::placeholder{color:var(--ew-shuttle-gray)}
.newsletter-form input[type=email]:focus{outline:none;border-color:var(--ew-social-blue);background:#ffffff14}
.newsletter-form button{height:58px;padding:0 34px;border-radius:60px;background:var(--ew-social-blue);color:#fff;font:500 16px var(--font-body);transition:background-color .2s}
.newsletter-form button:hover{background:#3AA1FF;color:#fff}.newsletter-form button:disabled{opacity:.6;cursor:progress}
.newsletter-trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.newsletter-status{min-height:24px;margin:18px 0 0;font:400 15px var(--font-body)}
.newsletter-status.is-success{color:var(--ew-forest-green)}.newsletter-status.is-error{color:#EE818C}
.newsletter-note{margin:6px 0 0;font:300 13px var(--font-body);color:var(--ew-shuttle-gray)}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media(max-width:600px){.newsletter-form{flex-direction:column}.newsletter-form input[type=email]{flex:none}.newsletter-form button{width:100%}}

/* Guidelines: no drop shadow on the logo. */
.planet-intro .logo-intro-lockup,.planet-intro .supplied-logo{filter:none}

/* Social proof: former employers' marks over the dark sky band, revealed one by one as the camera crosses the
   peak after the satellite scan. Single-colour white versions; originals are in brand/third-party/. */
.credentials{position:fixed;z-index:4;left:0;right:0;top:11vh;padding:0 24px;text-align:center;pointer-events:none;color:#fff}
.credentials-kicker,.credentials-list li,.credentials-note{opacity:0}
.credentials-kicker{margin:0 0 22px;font:500 12px var(--font-body);letter-spacing:.2em;text-transform:uppercase;color:var(--ew-social-blue-60)}
.credentials-list{display:flex;justify-content:center;align-items:center;margin:0;padding:0;list-style:none}
.credentials-list li{display:flex;align-items:center;min-height:48px;padding:0 clamp(24px,3vw,44px)}
.credentials-list li+li{border-left:1px solid #E6E9ED55}
.credentials-list img{display:block;width:auto}
.credentials-logo-nasa{height:clamp(30px,3.1vw,44px)}.credentials-logo-nrcan{height:clamp(22px,2.2vw,32px)}
.credentials-note{margin:14px auto 0;max-width:520px;font:400 12px/1.6 var(--font-body);color:#fff}
@media(max-width:700px){.credentials{top:12vh}.credentials-list{flex-direction:column;gap:18px}.credentials-list li{padding:0;min-height:0}.credentials-list li+li{border-left:0}.credentials-logo-nasa{height:34px}.credentials-list .credentials-logo-nrcan{height:auto;width:min(300px,80vw)}.credentials-note{font-size:11px;max-width:300px}}