:root{color-scheme:dark;font-family:"Space Mono",monospace;background:#07151e;color:#e5eadf}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}
.scene{position:relative;width:100%;height:100vh;height:100dvh;min-height:420px;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 55% 42%,#244451 0%,#10232d 47%,#07151e 100%)}
.backdrop{position:absolute;inset:0;background-image:url('./assets/city-site-clean.png');background-position:center center;background-repeat:no-repeat;background-size:cover;image-rendering:pixelated;transform:scale(1.012);animation:breath 12s ease-in-out infinite alternate}
.atmosphere{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,13,20,.72) 0%,rgba(4,16,22,.3) 29%,transparent 54%,rgba(4,15,24,.18) 100%),linear-gradient(0deg,rgba(2,9,14,.79) 0%,transparent 26%,transparent 72%,rgba(2,11,19,.56) 100%);pointer-events:none}
#weather{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;pointer-events:none;opacity:.73}
.vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 12vw 3vw rgba(0,6,12,.45);background:repeating-linear-gradient(to bottom,transparent 0,transparent 3px,rgba(3,11,15,.055) 4px);mix-blend-mode:multiply}
.masthead{position:absolute;z-index:2;top:0;left:0;right:0;display:flex;align-items:flex-start;justify-content:space-between;padding:clamp(22px,3.7vw,58px) clamp(22px,4.3vw,70px);gap:24px}
.brand{display:inline-flex;align-items:center;gap:15px;text-decoration:none;color:#e5f0e8;font-family:"Press Start 2P",monospace;font-size:clamp(9px,.8vw,12px);line-height:1.55;letter-spacing:-.04em;text-shadow:2px 2px #06141a}.brand:hover{color:#baf8da}.brand:focus-visible,.footer-links a:focus-visible,.footer-links button:focus-visible{outline:2px solid #baf8da;outline-offset:6px}
.brand-mark{display:block;width:24px;height:36px;transform:rotate(-32deg);border:3px solid #06272b;border-radius:12px;overflow:hidden;background:#ecf2df;box-shadow:2px 2px #9fd9bf;flex:none}.brand-mark i{display:block;height:50%}.brand-mark i+ i{background:#83e6b1;border-top:2px solid #164a46}
.site-status{display:flex;align-items:center;gap:10px;padding-top:9px;color:#b6c5c6;font-size:10px;letter-spacing:.17em;font-weight:700;white-space:nowrap;text-shadow:1px 2px #09141a}.status-lamp{width:7px;height:7px;background:#debb76;box-shadow:0 0 12px #ddb976;animation:lamp 3s steps(2,end) infinite}
.scene-label{position:absolute;top:49%;right:clamp(22px,4.3vw,70px);z-index:2;writing-mode:vertical-rl;color:rgba(213,230,225,.64);font-size:10px;letter-spacing:.2em;text-shadow:1px 2px #09141a}.scene-label span{margin-top:30px;color:#b9dabf}
.title-area{position:absolute;z-index:2;left:clamp(22px,6.2vw,104px);bottom:clamp(95px,16vh,170px);max-width:min(760px,68vw);text-shadow:3px 4px 0 #0b1b23,0 0 35px rgba(2,12,16,.7)}
.eyebrow{margin:0 0 20px;font-size:11px;letter-spacing:.22em;font-weight:700;color:#a2dbc3}.eyebrow:before{content:"";display:inline-block;width:17px;height:2px;margin:0 11px 3px 0;background:#a2dbc3}
h1{margin:0;font-family:"Press Start 2P",monospace;font-size:clamp(30px,4.45vw,76px);line-height:1.32;letter-spacing:-.055em;color:#f0f2e5}h1 span{color:#c6f2d7}.tagline{font-size:clamp(12px,1.05vw,16px);line-height:1.5;letter-spacing:.025em;color:#d2e0da;margin:22px 0 0}
.footer{position:absolute;z-index:2;left:clamp(22px,4.3vw,70px);right:clamp(22px,4.3vw,70px);bottom:clamp(20px,3.2vw,45px);border-top:1px solid rgba(211,236,222,.28);padding-top:20px}.footer-links{display:flex;justify-content:center;align-items:center;gap:clamp(18px,4vw,68px)}.footer-links a,.footer-links button{appearance:none;border:0;background:none;color:#d1e1db;font:700 11px "Space Mono",monospace;letter-spacing:.14em;text-decoration:none;white-space:nowrap;cursor:pointer;padding:5px 0;text-shadow:1px 2px #09141a}.footer-links a:hover,.footer-links button:hover{color:#baf8da}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes lamp{50%{opacity:.35}}@keyframes breath{to{transform:scale(1.027) translateY(-.2%)}}
@media(max-width:760px){.backdrop{background-position:54% center}.atmosphere{background:linear-gradient(0deg,rgba(2,10,15,.86),rgba(3,13,19,.2) 57%,rgba(2,10,15,.48))}.masthead{padding:22px}.brand{font-size:9px}.site-status{font-size:8px;letter-spacing:.09em}.scene-label{display:none}.title-area{left:24px;bottom:115px;max-width:calc(100% - 48px)}.eyebrow{font-size:9px;letter-spacing:.08em;margin-bottom:16px}h1{font-size:clamp(25px,6vw,45px)}.tagline{font-size:12px;margin-top:18px}.footer{left:24px;right:24px;bottom:24px}.footer-links{justify-content:space-between;gap:10px}.footer-links a,.footer-links button{font-size:9px;letter-spacing:0}}
@media(max-height:600px){.masthead{padding-top:20px}.title-area{bottom:85px}.eyebrow{margin-bottom:8px}h1{font-size:clamp(25px,5vh,48px)}.tagline{margin-top:8px}.footer{bottom:13px;padding-top:10px}}
@media(prefers-reduced-motion:reduce){.backdrop,.status-lamp{animation:none}}