/* Metric-matched local fallbacks to minimise layout shift while web fonts swap in */
:root{--bg:#07090d;--panel:#0d131b;--line:#1c3442;--cyan:#22e3ff;--amber:#ffb020;--text:#d3dde6;--muted:#93a4b4}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font:16px/1.6 Inter,"Inter Fallback",sans-serif;overflow-x:hidden}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
.mono{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
h1,h2,h3{font-family:Orbitron,"Orbitron Fallback",sans-serif;letter-spacing:.04em}
h2{font-size:28px;color:#fff;margin:6px 0 18px}
h3{font-family:Rajdhani,"Rajdhani Fallback",sans-serif;font-size:24px;color:#fff}
.c{color:var(--cyan)}.a{color:var(--amber)}
.br{position:relative;border:1px solid var(--line);background:linear-gradient(180deg,#0d131bcc,#0a0f15cc);padding:24px}
.br:before,.br:after{content:"";position:absolute;width:16px;height:16px;border:2px solid var(--cyan)}
.br:before{top:-2px;left:-2px;border-right:0;border-bottom:0}.br:after{bottom:-2px;right:-2px;border-left:0;border-top:0}
.br.am:before,.br.am:after{border-color:var(--amber)}
.hero{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;padding:70px 0 50px;align-items:center}
.hero h1{font-size:64px;line-height:1.05;color:#fff;margin:12px 0}
.hero h1 span{color:var(--cyan);text-shadow:0 0 18px #22e3ff88}
.hero p.lead{font-size:19px;max-width:560px}
.tags{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0}
.tag{font-family:Rajdhani,"Rajdhani Fallback",sans-serif;font-weight:700;border:1px solid var(--line);padding:4px 12px;letter-spacing:.08em}
.btn{display:inline-block;padding:12px 22px;font-family:Rajdhani,"Rajdhani Fallback",sans-serif;font-weight:700;letter-spacing:.12em;text-decoration:none;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.btn.p{background:var(--cyan);color:#001018}.btn.s{background:var(--amber);color:#1a0f00;margin-left:10px}
.portrait{aspect-ratio:4/5;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px}
.tele{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:60px}
.tele .v{font-family:Orbitron,"Orbitron Fallback",sans-serif;font-size:22px;color:#fff;margin-top:4px}
section{padding:50px 0}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card p{margin:10px 0 14px;color:var(--text)}
.music{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}
.wave{display:flex;gap:4px;align-items:center;height:120px}.wave i{flex:1;background:var(--amber);opacity:.85}
@media(max-width:700px){.wrap{padding:0 18px}.hero{grid-template-columns:1fr;padding:36px 0}.hero h1{font-size:38px}.tele{grid-template-columns:1fr 1fr}.grid,.music{grid-template-columns:1fr}h2{font-size:22px}.btn.s{margin:10px 0 0}}
/* ---- production additions ---- */
a{color:inherit}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.btn:focus-visible{outline:none;box-shadow:inset 0 0 0 3px #fff}
.btn:hover{filter:brightness(1.12)}
p a.c,p a.a,address a{text-underline-offset:3px}
.portrait-img{width:100%;height:100%;object-fit:cover;display:block}
.portrait{padding:0}
.tele dt{margin:0}.tele dd{margin:0}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:30px}
.svc{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.svc li{font-family:Rajdhani,"Rajdhani Fallback",sans-serif;font-weight:700;border:1px solid var(--line);padding:2px 10px;letter-spacing:.06em;color:var(--cyan)}
ul.tags{list-style:none}
.btn-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.btn-row .btn{margin:0}
.card .btn{margin:0}
address{font-style:normal}address p{margin:4px 0}
.music-hero h1{font-size:clamp(24px,8vw,56px);white-space:nowrap;color:#fff;margin:10px 0}
.glow-a{text-shadow:0 0 18px #ffb02088}
.music-hero p{max-width:620px;font-size:18px}
.track-row{display:flex;justify-content:space-between;margin-top:10px;gap:10px;flex-wrap:wrap}
/* HUD animation: subtle waveform pulse */
.wave.anim i{transform-origin:center;animation:pulse 1.6s ease-in-out infinite alternate}
.wave.anim i:nth-child(3n){animation-delay:-.4s}.wave.anim i:nth-child(3n+1){animation-delay:-.9s}
@keyframes pulse{from{transform:scaleY(.55)}to{transform:scaleY(1)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
html{scroll-behavior:smooth}
.video{padding:0;aspect-ratio:16/9}.video iframe{width:100%;height:100%;border:0;display:block}
.ig-card{display:flex;flex-direction:column;gap:6px;text-decoration:none;max-width:520px}
.ig-t{font-family:Rajdhani,"Rajdhani Fallback",sans-serif;font-weight:700;font-size:24px;color:#fff}
.ig-card:hover{border-color:var(--amber)}
.grid.two{grid-template-columns:1.4fr 1fr}
.grid.two .card{display:flex;flex-direction:column;justify-content:center}
.grid.two .card .btn{align-self:flex-start}
@media(max-width:700px){.grid.two{grid-template-columns:1fr}}
.portrait picture{display:block;width:100%;height:100%}
.portrait{width:100%;max-width:300px;justify-self:center}
@media(max-width:700px){.portrait{max-width:62vw}}
.card.feat{margin-bottom:24px;border-color:var(--cyan)}.card.feat h3{font-size:1.35em}
.grid.two .card.am:last-child:nth-child(odd){grid-column:1/-1}
@media(max-width:360px){.tele{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}.tele .br{min-width:0;padding:16px 12px}.tele .v{font-size:17px;overflow-wrap:anywhere}.tele dt{font-size:10px;letter-spacing:.06em}}
/* ---- About section (bottom) ---- */
.hero.solo{grid-template-columns:1fr}
.about-intro{display:block}
.about-bio p{margin:0 0 14px;max-width:72ch}.about-bio p:last-child{margin:0}
.about-sub{margin:44px 0 16px}
.strip{list-style:none;display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 14px;scrollbar-color:var(--cyan) var(--panel)}
.strip .tile{flex:0 0 240px;scroll-snap-align:start}
.strip figure{border:1px solid var(--line);background:var(--panel)}
.strip img,.strip .ph{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
.strip .ph{display:flex;align-items:center;justify-content:center;border-bottom:2px dashed #ff7ad9;color:#ff7ad9;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.08em;background:repeating-linear-gradient(45deg,#0d131b 0 10px,#111a24 10px 20px)}
.strip figcaption{padding:8px 12px;font-family:Rajdhani,"Rajdhani Fallback",sans-serif;font-weight:700;color:var(--text);letter-spacing:.04em}
.strip-hint{margin-top:4px}
.map-wrap{display:grid;grid-template-columns:auto 1fr;gap:10px 24px;align-items:center}
.map-count{display:flex;align-items:baseline;gap:8px}.map-count .v{font-family:Orbitron,"Orbitron Fallback",sans-serif;font-size:36px;color:var(--cyan)}
.legend{list-style:none;display:flex;gap:18px;justify-self:end;font-family:Rajdhani,"Rajdhani Fallback",sans-serif;font-weight:700}
.legend li{display:flex;align-items:center;gap:8px}
.sw{width:16px;height:16px;border:1px solid #93a4b4;background:#16222e}.sw.on{background:var(--cyan);border-color:var(--cyan)}
.map-box{grid-column:1/-1;position:relative}
#us-map{width:100%;height:auto;display:block}
#us-map path{fill:#16222e;stroke:#93a4b4;stroke-width:.8;stroke-linejoin:round;cursor:pointer;transition:fill .15s}
#us-map path.on{fill:var(--cyan);stroke:#07090d}
#us-map path:hover,#us-map path:focus{fill:var(--amber);outline:none}
#us-map path:focus-visible{stroke:#fff;stroke-width:3}
.map-tip{position:absolute;transform:translate(-50%,-130%);background:#07090d;border:1px solid var(--cyan);color:#fff;padding:4px 10px;font-family:Rajdhani,"Rajdhani Fallback",sans-serif;font-weight:700;pointer-events:none;white-space:nowrap}
.grid.built h4{font-family:Rajdhani,"Rajdhani Fallback",sans-serif;font-size:24px;color:#fff;margin-top:4px}
.grid.built h4 .sub{display:block;font-size:15px;color:var(--muted);letter-spacing:.04em}
.grid.built .card{display:flex;flex-direction:column}.grid.built .card .btn{align-self:flex-start;margin-top:auto}
.about-close{margin-top:44px;text-align:center}
.about-close .close-t{font-family:Rajdhani,"Rajdhani Fallback",sans-serif;font-weight:700;font-size:26px;color:#fff}
.about-close .btn-row{justify-content:center}
.strip:focus-visible{outline:2px solid var(--cyan)}
@media(max-width:700px){.map-wrap{grid-template-columns:1fr}.legend{justify-self:start}.strip .tile{flex-basis:70vw}}
.about-teaser{margin-top:22px}
/* v16 consistency: heading scale on phones (h2 > h3), music hero uses the home h1 metrics, lead paragraph */
@media(max-width:700px){h2{font-size:24px}h3{font-size:20px}}
.music-hero h1{font-size:64px;line-height:1.05;margin:12px 0}
@media(max-width:700px){.music-hero h1{font-size:38px;white-space:normal}}
p.lead,.music-hero p.lead{font-size:19px;line-height:1.6;max-width:560px}
/* narrow phones: PT hero h1 ("GUITARRISTA.") and the telemetry line must fit a 284px column */
.hero .mono{overflow-wrap:anywhere}
@media(max-width:360px){.hero h1{font-size:30px}}