/* The opening: scroll story, wordmark, beats, colony building buttons and card. */
/* story */
.story{padding:0;height:auto;position:relative;border-bottom:1px solid var(--line)}
.js .story{height:600vh}
.stage{position:relative;min-height:calc(100vh - 80px);display:flex;align-items:center;overflow:hidden;background:var(--ink)}
.js .stage{position:sticky;top:0;height:100vh;height:100svh}
#scene{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
.shade{position:absolute;inset:0;background:rgba(18,17,16,.8);clip-path:polygon(0 0,56% 0,44% 100%,0 100%);pointer-events:none}
.hero-text{position:relative;width:100%;padding-top:40px;padding-bottom:40px;pointer-events:none}
.hero-text a,.hero-text button{pointer-events:auto}.hero-text.gone a,.hero-text.gone button{pointer-events:none}
.kicker{color:var(--sig);font-size:12px;margin:0 0 18px}
.wordmark{margin:0;font-weight:600;line-height:.92;font-size:clamp(52px,10vw,132px);letter-spacing:.2em;color:var(--bone);display:flex;flex-direction:column}
.wordmark span{display:block}.wordmark span+span{border-top:1px solid var(--sig);padding-top:.08em;margin-top:.08em;width:max-content}
.hook{font-size:21px;margin:26px 0 6px;max-width:30ch}.sub{color:var(--dim);max-width:46ch;margin:0}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.beats{display:none}
.js .beats{display:block;position:absolute;right:6vw;bottom:12vh;margin:0;padding:0;list-style:none;font-size:clamp(18px,2.4vw,30px);font-weight:600;text-align:right;pointer-events:none}
.js .beats li{position:absolute;right:0;bottom:0;white-space:nowrap;opacity:0;transition:opacity .5s,transform .5s;transform:translateY(10px)}
.js .beats li.on{opacity:1;transform:none}.beats em::before{content:"";display:inline-block;width:28px;height:1px;background:var(--sig);vertical-align:middle;margin-right:12px}
.js .beats li{background:rgba(18,17,16,.78);padding:12px 16px 14px;margin-right:-16px}.beats em{display:block;font-style:normal;font-size:11px;letter-spacing:.2em;color:var(--sig);margin-bottom:4px}
.cue{margin:20px 0 0;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);font-family:"Bahnschrift","DIN Alternate","Arial Narrow",Arial,sans-serif}
.beats small{display:block;font-family:"Segoe UI",system-ui,sans-serif;text-transform:none;letter-spacing:0;font-weight:400;font-size:15px;color:#bdb5a6;margin-top:6px;white-space:normal;max-width:40ch;margin-left:auto}
/* colony buildings over the globe */
.bl{position:absolute;inset:0;z-index:2;pointer-events:none;visibility:hidden}
.bt{position:absolute;left:0;top:0;width:52px;height:60px;margin:-46px 0 0 -26px;padding:0;background:none;border:0;cursor:pointer;pointer-events:auto;color:var(--ink)}
.bt span{position:absolute;left:50%;bottom:0;transform:translateX(-50%);background:var(--bone);color:var(--ink);font-size:10px;font-weight:600;line-height:1;padding:3px 5px 2px;white-space:nowrap}
.bt:hover span,.bt.on span{background:var(--sig)}
.bcard{position:absolute;z-index:3;right:4vw;top:84px;width:min(300px,calc(100% - 32px));background:var(--bone2);color:var(--ink);border:1px solid var(--pline);border-left:3px solid var(--sig);padding:16px 18px 18px}
.bcard[hidden]{display:none}
.bcard h3{margin:0 0 6px;font-size:15px}.bcard .btxt{margin:0 0 10px;font-size:14px;line-height:1.5;color:var(--sub)}
.bcard .facts{font-size:13px}.bcard .facts th{width:44%}
.bcard .stamp{margin-bottom:10px}.bcard .bclose{margin-top:12px;padding:7px 14px;font-size:11px;border-color:var(--ink);color:var(--ink)}.bcard .bclose:hover{background:var(--ink);color:var(--bone)}
.subtitle{font-family:"Bahnschrift","DIN Alternate","Arial Narrow",Arial,sans-serif;text-transform:uppercase;letter-spacing:.42em;color:var(--sig);font-size:clamp(14px,1.8vw,22px);margin:14px 0 0;font-weight:600}
@media(prefers-reduced-motion:reduce){.js .beats li{transition:none}}
@media(max-width:820px){.shade{clip-path:none;background:linear-gradient(rgba(18,17,16,.82) 55%,rgba(18,17,16,.2))}}
@media(max-width:520px){.hook{font-size:18px}.wordmark{letter-spacing:.14em}
 .js .story{height:480vh}.js .stage{align-items:flex-start}.hero-text{padding-top:76px}
 .js .beats{left:24px;right:24px;bottom:9vh;text-align:left;font-size:20px}.js .beats li{left:0;right:auto;white-space:normal;padding-left:0;margin-right:0}.beats small{margin-left:0;font-size:14px}
 .bcard{left:16px;right:16px;top:64px;width:auto}}