@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=DM+Serif+Display:ital@0;1&family=Space+Mono:wght@400;700&display=swap');
:root{--bg:#071426;--fg:#f3ebdd;--dim:#a4b1c1;--line:#ffffff25;--blue:#7ee5ef}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--fg);font-family:'DM Sans',Arial,sans-serif}button,a{font:inherit}a{color:inherit;text-decoration:none}button{color:inherit;cursor:pointer}img{max-width:100%;display:block}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--blue);outline-offset:5px}.header{height:78px;padding:0 4.3%;display:flex;align-items:center;gap:3%;position:absolute;z-index:10;width:100%;border-bottom:1px solid #ffffff25}.brand,.footer-brand{font-size:23px;letter-spacing:.22em;white-space:nowrap;font-weight:400}.brand small,.footer-brand small{display:block;font:8px 'Space Mono',monospace;letter-spacing:.4em;color:#b8c8d7;margin-top:3px}.header nav{display:flex;align-items:center;justify-content:center;gap:23px;flex:1}.header nav a,.headright,.access{font:9px 'Space Mono',monospace;letter-spacing:.08em}.header nav a:hover,.line-link:hover{color:var(--blue)}.headright{display:flex;align-items:center;gap:20px}.access{border:1px solid #ffffff95;padding:13px 17px}.access span{margin-left:15px}.textbutton,.menu{border:0;background:none;padding:8px}.menu{display:none;font-size:20px}.hero{height:100svh;min-height:680px;position:relative;background:#071426 url('assets/callista.webp') center center/cover no-repeat}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,13,29,.84) 0%,rgba(4,13,29,.42) 55%,rgba(4,13,29,.08)),linear-gradient(0deg,#071426 0%,transparent 25%,#07142640 100%)}.hero-content{position:absolute;left:8%;top:34%;max-width:800px}.eyebrow,.kicker,.section-index,.hero-bottom,.image-label,.coordinates,.district-number,.district-visual>span,.terminal-top,.connect-status,.coming span,.empty{font:10px 'Space Mono',monospace;letter-spacing:.15em;color:#aac7d1}.eyebrow .dot{display:inline-block;background:#8ddce7;width:6px;height:6px;border-radius:50%;margin-right:8px;box-shadow:0 0 12px #7ee5ef}h1,h2,h3,p{margin-top:0}h1{font-weight:400;font-size:clamp(46px,6.1vw,91px);line-height:1.02;letter-spacing:-.035em;margin:27px 0}h1 em,h2 i{font-family:'DM Serif Display',Georgia,serif;font-weight:400}h1 em{font-style:italic;color:#e8d5e4}.hero-content>p{font-size:17px;color:#d1d9df}.buttons{display:flex;gap:12px;margin-top:40px}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:42px;padding:17px 21px;min-height:54px;border:1px solid #e9edf1;font:10px 'Space Mono',monospace;letter-spacing:.06em;cursor:pointer}.button b{font-size:16px;font-weight:400}.primary{background:#f3ebdd;color:#081426}.primary:hover{background:#bfeef3}.ghost{background:#08142644}.ghost:hover{background:#ffffff1b}.hero-bottom{position:absolute;bottom:27px;left:4.3%;right:4.3%;display:flex;justify-content:space-between;font-size:9px}.section{padding:120px 8%}.section-index{margin-bottom:68px;color:#7b99a8}.kicker{color:#96bdc8;margin-bottom:24px}h2{font-size:clamp(42px,5vw,70px);font-weight:400;line-height:1.05;letter-spacing:-.035em;margin-bottom:25px}h2 i{color:#d7c5df}p{line-height:1.75;color:#aab8c8;font-size:15px}.lead{font-size:19px;line-height:1.6;color:#eeeae5}.intro{background:#0a192b}.intro-layout{display:grid;grid-template-columns:1fr .72fr;gap:12%;align-items:start}.intro-copy{padding-top:40px}.line-link{display:inline-flex;gap:35px;align-items:center;border:0;border-bottom:1px solid #96aabb;background:none;padding:12px 0;font:10px 'Space Mono',monospace;letter-spacing:.08em;margin-top:20px}.line-link span{font-size:17px}.features{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:100px}.features>div{border-top:1px solid var(--line);padding-top:24px}.features span{font:10px 'Space Mono',monospace;color:#6f9da8}.features h3{font:11px 'Space Mono',monospace;letter-spacing:.06em;margin:30px 0 12px}.features p{font-size:13px}.implant{background:#e8e3dc;color:#202b30}.implant .section-index,.implant .kicker{color:#6e8288}.implant-grid{display:grid;grid-template-columns:1fr .8fr;gap:10%;align-items:center}.implant-image{position:relative}.implant-image img{width:100%}.image-label{color:#e9eeee;position:absolute;bottom:20px;left:20px;background:#1725369e;padding:8px}.implant h2 i{color:#8b718b}.implant p{color:#667177}.implant .lead{color:#303b42}.implant .accordion{margin-top:30px}.accordion details{border-top:1px solid #263b4438;padding:17px 0}.accordion summary{cursor:pointer;font:10px 'Space Mono',monospace;letter-spacing:.08em}.accordion details p{font-size:13px;margin:14px 0 0}.implant .line-link{color:#263b44;border-color:#263b4480;margin-right:20px}.callista{min-height:680px;position:relative;background:#182637 url('assets/callista.webp') center/cover}.callista-overlay{position:absolute;inset:0;background:linear-gradient(90deg,#061222e8 0%,#0c1423a3 60%,#10162855),linear-gradient(0deg,#071426aa,transparent)}.callista-content{position:relative;padding:95px 8% 70px}.callista-content .section-index{margin-bottom:130px}.callista-content p{font-family:'DM Serif Display',serif;font-style:italic;font-size:24px;color:#e5d9db}.callista .button{margin-top:20px}.coordinates{margin-top:85px}.districts{background:#0a192b}.section-heading{display:flex;justify-content:space-between;gap:40px;align-items:end;margin-bottom:55px}.section-heading p{max-width:320px}.district-layout{display:grid;grid-template-columns:.65fr 1fr;gap:10%}.district-list{border-top:1px solid var(--line)}.district-list button{display:flex;justify-content:space-between;width:100%;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;padding:22px 0;color:#9aa8b5;font:11px 'Space Mono',monospace;letter-spacing:.05em}.district-list button.active{color:#fff}.district-list button.active:after{content:'↗';color:#8bdfeb}.district-visual{height:250px;background:radial-gradient(ellipse at 50% 100%,#e897aa 0%,#8654c7 25%,#1d3151 60%,#0a1528 100%);position:relative;overflow:hidden}.district-visual:after{content:'';position:absolute;bottom:0;left:0;right:0;height:35%;background:repeating-linear-gradient(0deg,#7ee5ef1c 0 1px,transparent 1px 14px);transform:perspective(130px) rotateX(25deg)}.district-number{position:absolute;top:20px;left:20px;color:white}.district-visual>span{position:absolute;bottom:20px;right:20px;color:#fff;z-index:1}.orb{position:absolute;width:115px;height:115px;border-radius:50%;background:#f4c3c9;top:75px;left:calc(50% - 57px);box-shadow:0 0 90px #eaa7c1}.district-body{padding:30px 0}.district-body h3{font-size:25px;letter-spacing:.04em;font-weight:400}.story{display:grid;grid-template-columns:1fr 1fr;gap:10%;align-items:center;background:#0c1729}.story-image{min-height:600px;background:url('assets/cover.webp') center 75%/cover}.story-copy .section-index{margin-bottom:100px}.archive-list{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.archive-card{padding:25px;min-height:210px;text-align:left;background:linear-gradient(145deg,#15263c,#091727);border:1px solid #ffffff26;display:flex;flex-direction:column;justify-content:space-between}.archive-card:hover{border-color:#8ddce7}.archive-card span{font:10px 'Space Mono',monospace;color:#9ab3c0}.archive-card h3{font-size:17px;font-weight:400;letter-spacing:.1em}.terminal{background:radial-gradient(ellipse at center,#25334d,#091426 68%)}.terminal-box{border:1px solid #8aa7b558;padding:25px}.terminal-top{display:flex;justify-content:space-between;font-size:9px}.terminal-center{text-align:center;padding:75px 20px}.terminal-center p{font:10px 'Space Mono',monospace;letter-spacing:.1em;margin:25px 0 35px}.terminal-mark{font-size:45px;color:#a2dce4;margin-bottom:25px}.connect-status{margin-top:30px}.hidden{display:none}.sound{background:#ebe5de;color:#202b30}.sound .section-index,.sound .kicker{color:#6e8288}.sound-grid{display:grid;grid-template-columns:1fr 1fr;gap:10%;align-items:center}.cover img{width:100%}.sound h2 i{color:#8b718b}.sound p{color:#68747b}.sound .lead{color:#303b42}.coming{border-top:1px solid #263b4440;margin-top:45px;padding-top:24px}.coming span{color:#71818a}.coming h3{font:13px 'Space Mono',monospace;margin-top:20px}.coming p{font-size:13px}.empty{border:1px solid var(--line);padding:40px}footer{padding:70px 8% 30px;border-top:1px solid var(--line);background:#050e1c}footer p{font-family:'DM Serif Display',serif;font-style:italic;font-size:18px}.footer-bottom{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding-top:25px;margin-top:65px;font:9px 'Space Mono',monospace;color:#91a5b4}dialog{background:#0c1c2d;color:#f3ebdd;border:1px solid #879da7;max-width:min(90vw,700px);padding:40px}dialog::backdrop{background:#010916db}dialog #close-modal{position:absolute;right:12px;top:8px;border:0;background:none;font-size:28px}dialog img{max-height:75vh;margin:auto}.modal-code{font:10px 'Space Mono',monospace;color:#7ee5ef}dialog h3{font-weight:400;font-size:28px;margin:25px 0}iframe{border:0;max-width:100%}@media(max-width:1050px){.header nav{gap:12px}.header nav a{font-size:8px}}@media(max-width:800px){.header{height:70px;position:absolute}.header nav{display:none;position:absolute;top:70px;left:0;right:0;background:#0b1829;padding:22px 6%;flex-direction:column;align-items:stretch;gap:0;border-bottom:1px solid var(--line)}.header nav.open{display:flex}.header nav a{font-size:11px;padding:13px 0;border-bottom:1px solid #ffffff15}.headright{margin-left:auto}.menu{display:block}.access{padding:10px}.hero{min-height:650px;background-position:54% center}.hero-content{left:7%;right:7%;top:31%}.hero-bottom span:last-child{display:none}.hero-bottom{font-size:8px}.section{padding:80px 7%}.section-index{margin-bottom:45px}.intro-layout,.implant-grid,.district-layout,.story,.sound-grid{grid-template-columns:1fr;gap:35px}.intro-copy{padding:0}.features{grid-template-columns:1fr 1fr;gap:20px;margin-top:60px}.features h3{margin-top:20px}.implant-copy{padding-top:10px}.callista{min-height:650px}.callista-content{padding:75px 7%}.callista-content .section-index{margin-bottom:140px}.section-heading{display:block}.section-heading p{margin:20px 0 0}.story-image{min-height:440px}.story-copy .section-index{margin-bottom:55px}.archive-list{grid-template-columns:1fr}.archive-card{min-height:170px}.sound-grid{gap:40px}.footer-bottom{flex-direction:column}.terminal-center{padding:60px 0}.button{gap:18px}.buttons{flex-wrap:wrap}.scroll{display:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* AURÉLIA: celestial identity */
:root{--bg:#030c20;--fg:#f3f5ff;--dim:#aebddd;--line:#91b9ff2c;--blue:#9ce9ff}body{background:#030c20}.header{position:sticky;top:0;background:#030b1de8;backdrop-filter:blur(16px);height:78px;margin-bottom:-78px;border-color:#80b7ff27}.brand,.footer-brand{font-weight:300;color:#eaf8ff;text-shadow:0 0 18px #4895ff80}.brand small,.footer-brand small{color:#8fb7e5}.hero{background-image:linear-gradient(90deg,#020a1fe0,#020a1f65 55%,#020a1f14),url('assets/cover.webp');background-position:center 58%}.hero-shade{background:linear-gradient(90deg,#02091c9c,#02091c30 70%),linear-gradient(0deg,#030c20 0%,transparent 30%)}.hero-content h1,.callista h2,.terminal h2{color:#f3f6ff;text-shadow:0 0 35px #4e8cfa45}.eyebrow,.kicker,.section-index{color:#88bbef}.intro,.districts,.story,.archives,.transmissions{background:linear-gradient(145deg,#051329,#030b1e)}.implant,.sound{background:linear-gradient(140deg,#0c1b32,#060f24);color:#edf5ff}.implant h2 i,.sound h2 i,h2 i{color:#b4cfff}.implant p,.sound p{color:#aabbd4}.implant .lead,.sound .lead{color:#e4ecf7}.implant .section-index,.implant .kicker,.sound .section-index,.sound .kicker{color:#8cb8de}.implant .line-link{color:#dcecff;border-color:#7094bd}.accordion details{border-color:#7491ad44}.features>div,.archive-card,.terminal-box{border-color:#7da8e145}.button.primary{background:#e5f3ff;border-color:#dcecff;color:#07152d;box-shadow:0 0 24px #4394ff30}.button.primary:hover{background:white;box-shadow:0 0 30px #64baff80}.callista-overlay{background:linear-gradient(90deg,#031026ee,#06142aaf 60%,#06142a58),linear-gradient(0deg,#030c20d9,transparent)}.district-visual{background:radial-gradient(ellipse at 50% 100%,#506db6,#293d78 25%,#122243 60%,#061028)}.orb{background:#c3d8ff;box-shadow:0 0 90px #80b1ff}.coming{border-color:#829ab353}.coming span{color:#9ab3c9}.language-label select{appearance:none;color:#e7f4ff;background:#0b1d34;border:1px solid #9cbce270;border-radius:0;padding:10px 23px 10px 10px;font:10px 'Space Mono',monospace;background-image:linear-gradient(45deg,transparent 50%,#cfeaff 50%),linear-gradient(135deg,#cfeaff 50%,transparent 50%);background-position:calc(100% - 12px) 14px,calc(100% - 8px) 14px;background-size:4px 4px;background-repeat:no-repeat}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.intro-screen{position:fixed;inset:0;z-index:100;background:#020817;color:white;display:flex;align-items:center;justify-content:center;overflow:hidden}.intro-screen.is-hidden{display:none}.intro-screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.intro-mask{position:absolute;inset:0;background:linear-gradient(0deg,#030a1bdd,transparent 35%,#02091a66)}.intro-inner{position:absolute;top:8%;left:5%;right:5%;text-align:center;text-shadow:0 0 30px #52adff}.intro-inner h2{font-family:'DM Sans',sans-serif;font-size:clamp(32px,6vw,76px);letter-spacing:.28em;font-weight:300;margin:18px 0 8px}.intro-inner p,.intro-system{font:10px 'Space Mono',monospace;letter-spacing:.2em;color:#e5f4ff}.intro-controls{position:absolute;bottom:8%;left:6%;right:6%;display:flex;align-items:center;justify-content:space-between;gap:12px}.intro-controls button{background:#071329bb;border:1px solid #a6d3ff9c;padding:15px 19px;font:10px 'Space Mono',monospace;letter-spacing:.08em}.intro-controls button:last-child{background:#e5f3ff;color:#07152d}.intro-controls button span{padding-left:30px}body.intro-active{overflow:hidden}.menu{border:1px solid #a1c9f066}.header nav a{white-space:nowrap}@media(max-width:800px){.header{height:70px;margin-bottom:-70px}.hero{background-position:54% center}.intro-screen video{object-fit:contain;background:#030b1e}.intro-controls{bottom:7%}.intro-inner{top:13%}.headright{gap:10px}.brand{font-size:20px}.header nav{top:70px;background:#061328f2}.header nav a{padding:15px 0;font-size:11px}}
/* Fit the AURELIA wordmark on narrow screens without clipping. */
.intro-inner{width:min(100% - 32px, 1000px);left:50%;right:auto;transform:translateX(-50%);text-align:center}.intro-inner h2{width:100%;font-size:clamp(28px,8vw,76px);letter-spacing:clamp(.08em,1.5vw,.2em);padding-left:clamp(.08em,1.5vw,.2em);white-space:nowrap}.intro-controls{justify-content:center}.intro-controls .hidden,.intro-error.hidden{display:none}.intro-controls p{color:#fff;text-align:center}.header .brand{letter-spacing:clamp(.09em, .3vw, .22em)}@media(max-width:380px){.header{gap:8px}.brand{font-size:16px}.headright{gap:6px}.access{padding:9px 7px}.intro-inner h2{font-size:clamp(26px,8vw,36px)}}
.city-intro{position:fixed;inset:0;background:#020817;z-index:110;display:flex;justify-content:center;align-items:center}.city-intro.hidden{display:none}.city-intro video{width:100%;height:100%;object-fit:contain}.city-intro button{position:absolute;bottom:9%;padding:16px 22px;background:#edf5ff;color:#071426;border:0;font:11px 'Space Mono',monospace;letter-spacing:.1em}.city-intro button.hidden{display:none}.district-visual img{position:absolute;width:100%;height:100%;object-fit:cover}.district-visual:after{background:linear-gradient(0deg,#050f29a0,transparent);transform:none;height:65%}.district-number{z-index:1}.city-places{background:#061226}.places-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.place-card{border:1px solid #91b9ff2c;background:#0c1a2d}.place-card img{width:100%;aspect-ratio:16/9;object-fit:cover}.place-card>div{padding:28px}.place-card h3{font-size:21px;font-weight:400;letter-spacing:.1em}.place-card p{margin-bottom:0}.story-image{position:relative;background:none;height:600px;overflow:hidden}.story-image img{width:100%;height:100%;object-fit:cover;object-position:center 24%}.story-image span{position:absolute;bottom:20px;left:20px;font:10px 'Space Mono',monospace;letter-spacing:.12em;padding:9px;background:#071426b5;color:white}@media(max-width:800px){.places-grid{grid-template-columns:1fr}.story-image{height:500px;min-height:0}.district-visual{height:250px}}
@media(max-width:800px){.hero{background-size:cover,100% auto;background-position:center,center bottom;background-repeat:no-repeat;background-color:#030c20}}
/* Keep the navigation in its own space and give the new artwork room. */
.header{margin-bottom:0;position:sticky;top:0;z-index:10}.hero{height:calc(100svh - 78px);min-height:620px;background:#030c20 url('assets/stars.webp') center 66%/cover no-repeat}.hero-shade{background:linear-gradient(90deg,#02091cdd 0%,#02091c85 55%,#02091c10 100%),linear-gradient(0deg,#030c20 0%,transparent 30%)}.hero-content{top:25%;max-width:min(700px,84%)}.hero h1{font-size:clamp(38px,5.5vw,82px)}.story{grid-template-columns:minmax(240px,.62fr) 1fr;gap:9%}.story-image{height:500px;min-height:0;max-width:420px;width:100%}.city-bandcamp{position:absolute;inset:0;background:#030b1eed;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;text-align:center;padding:30px}.city-bandcamp.hidden{display:none}.city-bandcamp p{font:11px 'Space Mono',monospace;color:#e7f3ff;letter-spacing:.1em}.city-bandcamp a{border:1px solid #b4d5fb;background:#eef5ff;color:#081a32;padding:18px;font:11px 'Space Mono',monospace}.implant .accordion p{font-size:14px;line-height:1.75;color:#c5d3e0}
@media(max-width:800px){.header{height:70px;margin-bottom:0}.hero{height:calc(100svh - 70px);min-height:590px;background-size:auto 100%;background-position:center bottom}.hero-content{top:21%;left:7%;right:7%;max-width:none}.hero h1{font-size:clamp(37px,9vw,58px)}.story{grid-template-columns:1fr}.story-image{height:430px;max-width:330px;margin:0 auto}.header nav{top:70px}}
.tech-details{border-top:1px solid #9abce252;margin-top:95px;padding-top:55px}.tech-details-heading{display:flex;justify-content:space-between;gap:25px;align-items:end}.tech-details-heading h3{font-weight:400;font-size:clamp(34px,4vw,54px);margin:0}.tech-details-heading h3 i{font-family:'DM Serif Display',serif;color:#b4cfff;font-weight:400}.tech-details-heading p{max-width:330px;margin:0}.tech-detail-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:45px}.tech-detail-grid article{border-top:1px solid #9abce252;padding-top:20px}.tech-detail-grid span,.tech-detail-grid h4{font:10px 'Space Mono',monospace;letter-spacing:.08em}.tech-detail-grid span{color:#8cb8de}.tech-detail-grid h4{margin:20px 0 12px}.tech-detail-grid p{font-size:13px;color:#b7c7da}.intro-controls #enable-intro-sound{background:#071329db;color:#f3f7ff;border:1px solid #aecffa}.intro-controls #enable-intro-sound.hidden{display:none}@media(max-width:800px){.tech-details{margin-top:60px}.tech-details-heading{display:block}.tech-details-heading p{margin-top:20px}.tech-detail-grid{grid-template-columns:1fr 1fr;gap:20px}}
.tech-header-right{margin-left:auto;display:flex;align-items:center;gap:20px}.tech-page .header{position:relative;margin:0}.tech-page .implant{padding-top:90px}.tech-page .implant .section-index{margin-bottom:55px}.tech-page dialog button{position:absolute;top:8px;right:12px;background:none;border:0;font-size:28px}.tech-page dialog img{max-height:75vh}.tech-page dialog{position:fixed}.implant-copy>.button{margin-top:25px}.sound{background:radial-gradient(ellipse at 75% 25%,#233966 0%,#09162e 40%,#040c20 80%);padding-top:140px;padding-bottom:140px}.sound-grid{gap:9%}.sound .cover img{box-shadow:0 18px 80px #0009,0 0 55px #5791ff25}.sound-copy h2{font-size:clamp(55px,6vw,90px)}.album-artist{font:10px 'Space Mono',monospace;color:#a6d5ef!important;letter-spacing:.12em;margin-bottom:30px}.sound .coming{margin-top:35px}.sound .coming h3{font-size:14px;letter-spacing:.1em}.bandcamp-button{margin-top:15px}.bandcamp-note{display:block;font-size:12px;color:#aabbd4;margin-top:12px}@media(max-width:800px){.tech-header-right{gap:12px}.tech-page .header{height:70px}.tech-page .implant{padding-top:70px}.sound{padding-top:90px;padding-bottom:90px}}
.story-image img{object-position:center 56%}.sound .coming h3{font-family:'DM Serif Display',Georgia,serif;font-size:clamp(30px,3.2vw,46px);letter-spacing:.01em;color:#eaf4ff}.bandcamp-alternative{border-top:1px solid #91b9ff2c;margin-top:24px;padding-top:18px}.bandcamp-alternative p{font-size:12px;margin-bottom:10px}.copy-row{display:flex;gap:8px}.copy-row input{min-width:0;flex:1;background:#071426;border:1px solid #8299b866;color:#d9ecff;padding:11px;font:10px 'Space Mono',monospace}.copy-row button{background:transparent;border:1px solid #b8cde2;color:#e9f5ff;padding:10px;font:10px 'Space Mono',monospace}.bandcamp-alternative span{display:block;margin-top:8px;color:#b6d5e7;font-size:12px}.city-url{color:#fff;font:12px 'Space Mono',monospace;word-break:break-all}
/* A few retro marks, used like travel and record-sleeve stickers. */
.story-image{height:auto;aspect-ratio:1311/643;max-width:100%;overflow:hidden;align-self:center;border:1px solid #a7bff94a;box-shadow:0 20px 60px #02081899}.story-image img{object-position:center;width:100%;height:100%}.story-image>span:not(.june-stamp){font-size:9px;bottom:10px;left:10px}.june-stamp{position:absolute!important;z-index:2;top:10px;right:10px;bottom:auto!important;left:auto!important;color:#fff;background:#0b1739bd!important;border:1px solid #d9b6f8;border-radius:100px;padding:7px 11px!important;font:9px 'Space Mono',monospace!important;letter-spacing:.1em}.cover{position:relative}.retro-stamp{position:absolute;z-index:1;right:-13px;top:-18px;width:95px;height:95px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-align:center;border-radius:50%;transform:rotate(12deg);color:#0d1830;background:#efdce9;border:2px solid #fff;box-shadow:0 3px 22px #ef9ae044;font:8px 'Space Mono',monospace;letter-spacing:.06em}.retro-stamp strong{font-size:18px;line-height:1}.retro-ticket{position:absolute;right:8%;top:100px;display:flex;flex-direction:column;gap:4px;align-items:center;padding:15px 20px;border:1px solid #bfd8f29c;color:#e8f5ff;transform:rotate(5deg);font:9px 'Space Mono',monospace;letter-spacing:.1em;background:#07132966}.retro-ticket b{font:28px 'DM Serif Display',serif;letter-spacing:.12em}.retro-ticket small{font:7px 'Space Mono',monospace;letter-spacing:.1em}.place-card{transition:transform .25s,border-color .25s}.place-card:hover{transform:translateY(-4px);border-color:#d4a5df}.button.primary{transition:transform .2s,box-shadow .2s}.button.primary:hover{transform:translateY(-2px)}@media(max-width:800px){.story-image{height:auto;aspect-ratio:1311/643;max-width:100%}.retro-ticket{top:75px;right:7%;padding:10px 13px}.retro-ticket b{font-size:21px}.retro-ticket small{font-size:6px}.retro-stamp{width:73px;height:73px;right:-5px;top:-12px;font-size:6px}.retro-stamp strong{font-size:14px}}
/* Local-time ambience keeps the same imagery and adjusts its light. */
body[data-period=morning] .hero-shade{background:linear-gradient(90deg,#202b48c9,#49354d55 70%),linear-gradient(0deg,#071426,transparent 35%)}body[data-period=afternoon] .hero-shade{background:linear-gradient(90deg,#122d4dce,#247b9a35 75%),linear-gradient(0deg,#071426,transparent 35%)}body[data-period=sunset] .hero-shade{background:linear-gradient(90deg,#251631d9,#bc54883a 75%),linear-gradient(0deg,#071426,transparent 35%)}body[data-period=night] .hero-shade{background:linear-gradient(90deg,#02091cdd,#02091c85 55%,#02091c10),linear-gradient(0deg,#030c20,transparent 30%)}.june-link{margin-top:14px}.story-copy .line-link{margin-left:15px}@media(max-width:800px){.story-copy .line-link{margin-left:0}}
.june-entry{margin-top:30px;border-top:1px solid #a7c6e23d;padding-top:22px}.june-entry-label{font:10px 'Space Mono',monospace;letter-spacing:.13em;color:#93bfdc;margin-bottom:3px}.june-entry .june-link{margin-top:12px}

/* Citizen invitation and restrained signal interference */
.resident-callout{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:30px;margin-top:48px;padding:32px 38px;background:linear-gradient(110deg,#182344 0%,#342045 63%,#121d3c 100%);border:1px solid #e88abd88;box-shadow:0 12px 50px #0006, inset 0 0 45px #d567ab12}
.resident-callout::before,.resident-callout::after{content:"";position:absolute;z-index:-1;pointer-events:none;height:1px;width:22%;background:#7ee5ef88;right:0;top:22%;animation:signal-drift 13s ease-in-out infinite}
.resident-callout::after{top:78%;left:0;right:auto;width:13%;background:#e88abd99;animation-delay:-5s}
.resident-callout-copy{max-width:620px}.resident-tag{font:10px 'Space Mono',monospace;letter-spacing:.16em;color:#9ce9ff}.resident-callout h3{font-size:clamp(24px,3vw,38px);font-weight:400;margin:12px 0;color:#fff}.resident-callout p{margin:7px 0;color:#e5e3ee}.resident-callout .resident-bonus{font-size:13px;line-height:1.6;color:#c3c6dc}.resident-button{position:relative;z-index:1;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;gap:18px;padding:18px 22px;background:#f3ebdd;color:#111932;text-decoration:none;font:700 10px 'Space Mono',monospace;letter-spacing:.09em;transition:background .25s,transform .25s}.resident-button:hover,.resident-button:focus-visible{background:#f5b6d8;transform:translateY(-2px)}.resident-spark{position:absolute;right:23%;top:8px;color:#e88abd80;font-size:22px;animation:signal-drift 11s ease-in-out infinite}
@keyframes signal-drift{0%,90%,100%{transform:translateX(0)}92%{transform:translateX(-4px)}94%{transform:translateX(5px)}96%{transform:translateX(-2px)}}
@media(max-width:700px){.resident-callout{align-items:stretch;flex-direction:column;padding:26px 22px;gap:20px}.resident-button{width:100%;text-align:center}.resident-spark{right:15px}}
@media(prefers-reduced-motion:reduce){.resident-callout::before,.resident-callout::after,.resident-spark{animation:none}}

/* Port Callista locations link to their original soundtracks. */
.place-card-link{display:block;height:100%;color:inherit;text-decoration:none}.place-card-link>div{padding:28px}.place-card-link:focus-visible{outline:2px solid #7ee5ef;outline-offset:4px}.place-enter{display:inline-flex;align-items:center;gap:24px;margin-top:24px;padding:12px 17px;border:1px solid #e88abd;color:#fff;font:10px 'Space Mono',monospace;letter-spacing:.14em;transition:background .2s,color .2s}.place-card-link:hover .place-enter,.place-card-link:focus-visible .place-enter{background:#e88abd;color:#071426}

/* A soft signal disturbance across the interface. */
.hero-content h1,.city-places .section-heading h2{animation:signal-type 13s ease-in-out infinite}
.city-places .section-heading h2{animation-delay:-5s}.place-card{position:relative;overflow:hidden}.place-card::after{content:"";position:absolute;top:18px;right:0;width:25%;height:2px;pointer-events:none;background:linear-gradient(90deg,transparent,#7ee5ef,#e88abd);opacity:.65;animation:signal-line 9s ease-in-out infinite}.place-card:nth-child(even)::after{top:35px;animation-delay:-4s}
@keyframes signal-type{0%,90%,100%{text-shadow:0 0 0 transparent}92%{text-shadow:-2px 0 #e88abd99,2px 0 #7ee5ef99}94%{text-shadow:1px 0 #e88abd88,-1px 0 #7ee5ef88}96%{text-shadow:0 0 0 transparent}}
@keyframes signal-line{0%,85%,100%{transform:translateX(0)}90%{transform:translateX(-20px)}94%{transform:translateX(8px)}}
@media(prefers-reduced-motion:reduce){.hero-content h1,.city-places .section-heading h2,.place-card::after{animation:none}}

/* VHS transmission: scan lines, tracking band and chromatic signal drift. */
.hero{overflow:hidden;isolation:isolate}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:repeating-linear-gradient(to bottom,rgba(3,8,25,.18) 0,rgba(3,8,25,.18) 1px,transparent 1px,transparent 4px);box-shadow:inset 0 0 110px #01051599}
.hero-shade::after{content:"";position:absolute;left:0;right:0;top:-15%;height:9%;pointer-events:none;background:linear-gradient(transparent,rgba(145,209,255,.12),rgba(255,255,255,.06),transparent);animation:vhs-tracking 8s linear infinite}
.hero-content,.hero-bottom{z-index:2}
.hero-content h1{animation:vhs-title-glitch 5s steps(1,end) infinite}
.hero-bottom::before{content:'▶ PLAY   /   SP 1986';position:absolute;right:0;bottom:35px;color:#bcefff;font:10px 'Space Mono',monospace;letter-spacing:.12em;text-shadow:-1px 0 #e88abd,1px 0 #7ee5ef;opacity:.85}
.place-card-link{position:relative}.place-card-link::after{content:"";position:absolute;inset:0 0 auto;height:auto;aspect-ratio:16/9;pointer-events:none;background:repeating-linear-gradient(to bottom,rgba(3,8,25,.16) 0,rgba(3,8,25,.16) 1px,transparent 1px,transparent 4px);mix-blend-mode:multiply}
.place-card img{animation:vhs-picture-glitch 7s steps(1,end) infinite}.place-card:nth-child(2) img{animation-delay:-2s}.place-card:nth-child(3) img{animation-delay:-4s}.place-card:nth-child(4) img{animation-delay:-5s}
@keyframes vhs-title-glitch{0%,20%,25%,50%,55%,80%,85%,100%{text-shadow:0 0 20px #5b9aff44;transform:translateX(0)}21%,23%,51%,53%,81%,83%{text-shadow:-4px 0 #ed72b8,4px 0 #5ee8f1;transform:translateX(2px)}22%,24%,52%,54%,82%,84%{text-shadow:3px 0 #ed72b8,-3px 0 #5ee8f1;transform:translateX(-2px)}}
@keyframes vhs-picture-glitch{0%,38%,43%,72%,77%,100%{filter:none;transform:translateX(0)}39%,41%,73%,75%{filter:contrast(1.1) saturate(1.15);transform:translateX(3px)}40%,42%,74%,76%{filter:contrast(1.05);transform:translateX(-2px)}}
@keyframes vhs-tracking{from{transform:translateY(0)}to{transform:translateY(1250%)}}
@media(prefers-reduced-motion:reduce){.hero-content h1,.hero-shade::after,.place-card img{animation:none}}

/* Chromatic VHS glitch on all main headings across the site. */
:is(h1,h2),.hero-content h1,.city-places .section-heading h2{animation:heading-vhs-glitch 5s steps(1,end) infinite}
section:nth-of-type(3n) h2{animation-delay:-1.5s}
section:nth-of-type(3n + 1) h2{animation-delay:-3s}
@keyframes heading-vhs-glitch{
  0%,20%,25%,50%,55%,80%,85%,100%{text-shadow:0 0 20px #5b9aff44}
  21%,23%,51%,53%,81%,83%{text-shadow:-4px 0 #ed72b8,4px 0 #5ee8f1}
  22%,24%,52%,54%,82%,84%{text-shadow:3px 0 #ed72b8,-3px 0 #5ee8f1}
}
@media(prefers-reduced-motion:reduce){:is(h1,h2),.hero-content h1,.city-places .section-heading h2{animation:none}}

/* Resident card video is launched by the visitor's click. */
.citizen-intro-overlay{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;background:#030817;overflow:hidden}
.citizen-intro-overlay video{width:100%;height:100%;object-fit:contain}
.citizen-intro-action{position:absolute;left:50%;bottom:max(12%,32px);transform:translateX(-50%);padding:16px 22px;border:1px solid #b8dfff;background:#08152de8;color:#fff;font:11px 'Space Mono',monospace;letter-spacing:.08em;cursor:pointer;max-width:90%;white-space:normal}
.citizen-intro-action[hidden]{display:none}

/* Sun-faded paper and ink, inspired by well-travelled 1980s stickers. */
.retro-ticket,.retro-stamp,.vintage-sticker{isolation:isolate;overflow:hidden;box-shadow:0 3px 0 #3c263dbb,0 9px 18px #0205158c,inset 0 0 0 2px #fff3;filter:saturate(.87)}
.retro-ticket::after,.retro-stamp::after,.vintage-sticker::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.32;background:repeating-linear-gradient(113deg,transparent 0 13px,#352737 14px,transparent 15px 37px),repeating-linear-gradient(5deg,transparent 0 21px,#fff7 22px,transparent 23px 47px),radial-gradient(circle at 13% 27%,#fff 0 1px,transparent 1.6px),radial-gradient(circle at 77% 62%,#412c40 0 1px,transparent 2px);background-size:auto,auto,31px 29px,37px 39px;mix-blend-mode:soft-light}
.retro-ticket{position:absolute;transform:rotate(5deg);border:3px solid #f4ddbb;background:linear-gradient(160deg,#efbd93,#e5808a 52%,#715783);color:#392344;box-shadow:0 0 0 2px #995979,0 6px 0 #33244099,0 13px 24px #0008;text-shadow:none}
.retro-ticket b{font-family:Georgia,serif;font-style:italic;letter-spacing:.08em}.retro-ticket small{color:#392344}
.retro-stamp{background:linear-gradient(140deg,#f2c19d,#dc779e 60%,#a45e98);color:#312443;border:4px solid #f6dfc0;outline:1px solid #a05c7a;outline-offset:-8px;text-shadow:none}
.retro-stamp strong{color:#563058}
.vintage-sticker{position:relative;display:inline-flex;vertical-align:middle;flex-direction:column;align-items:center;justify-content:center;text-align:center;line-height:1.1;transform:rotate(-5deg);font:8px 'Space Mono',monospace;font-weight:700;letter-spacing:.08em;pointer-events:none}
.vintage-sticker strong{font-family:Georgia,serif;font-weight:900;letter-spacing:.03em}.vintage-sticker small{font:7px 'Space Mono',monospace;font-weight:700;letter-spacing:.06em}
.city-sticker{margin:17px 0 10px 4px;padding:8px 16px 9px;border:3px solid #f5dfb9;border-radius:50%;color:#fff4da;background:linear-gradient(#d77687 0 42%,#b46691 42% 58%,#5a648e 58% 72%,#34476d 72%);box-shadow:0 0 0 1px #cb9b8b,0 5px 0 #272039aa,0 8px 17px #0007;min-width:136px}
.city-sticker strong{font-style:italic;font-size:15px;margin:2px 0}.city-sticker small{font-size:6px}
.resident-sticker{float:right;margin:0 0 8px 18px;width:102px;height:70px;padding:4px;border:3px solid #efe0bf;border-radius:5px;color:#302945;background:linear-gradient(125deg,#efd5ad,#ebc38f 50%,#d49999);transform:rotate(6deg)}
.resident-sticker strong{font-size:15px;margin:3px 0;color:#9a526f}.resident-sticker small{font-size:6px}
@media(max-width:700px){.city-sticker{min-width:118px;padding:6px 12px}.city-sticker strong{font-size:13px}.resident-sticker{width:80px;height:62px;margin-left:10px}.resident-sticker strong{font-size:12px}.retro-ticket{right:5%;top:75px}}

/* A four-destination navigation dock, always within reach. */
.header #nav,.header #menu,.headright>.access{display:none!important}
.header .headright{margin-left:auto}
.bottom-nav{position:fixed;z-index:90;bottom:0;left:0;right:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));min-height:72px;padding:6px max(12px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));border-top:1px solid #85c9ed70;background:linear-gradient(100deg,#061328f5,#14213af5 50%,#17142df5);box-shadow:0 -8px 32px #020817b8;backdrop-filter:blur(18px)}
.bottom-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:54px;padding:3px 2px;color:#dbeaf7;text-decoration:none;text-align:center;font:9px 'Space Mono',monospace;font-weight:700;letter-spacing:.04em;line-height:1.2}
.bottom-nav svg{width:24px;height:24px;color:#8fe5f0;filter:drop-shadow(0 0 5px #54d7f455)}
.bottom-nav a:nth-child(2) svg{color:#f1b6d5}.bottom-nav a:nth-child(3) svg{color:#f0c493}.bottom-nav a:nth-child(4) svg{color:#c3aaf7}
.bottom-nav a:hover,.bottom-nav a:focus-visible{color:#fff;background:#d7eaff12;outline:1px solid #a6e4f899;outline-offset:-1px}
body{padding-bottom:calc(75px + env(safe-area-inset-bottom))}
@media(min-width:800px){.bottom-nav{left:50%;right:auto;transform:translateX(-50%);width:min(680px,90vw);border:1px solid #85c9ed70;border-bottom:0;border-radius:16px 16px 0 0}.bottom-nav a{font-size:10px}}
@media(max-width:380px){.bottom-nav a{font-size:8px;letter-spacing:0}}


/* Port Callista appears softly behind the deep-blue editorial sections. */
.intro.section,.districts.section,.city-places.section,.sound.section,.terminal.section,#transmissions.section{
  background-color:#071426;
  background-image:linear-gradient(180deg,rgba(7,20,38,.97) 0%,rgba(7,20,38,.89) 48%,rgba(7,20,38,.97) 100%),url('assets/callista.webp');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* A neural-interface technical image softly integrated into the blueprint page. */
.tech-page .implant.section{
  background-color:#071426;
  background-image:linear-gradient(180deg,rgba(7,20,38,.84),rgba(7,20,38,.82) 48%,rgba(7,20,38,.92)),url('assets/neural-background.jpg');
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}