/* Shared site chrome for every page (home, music, about, 404): tokens, fonts, background texture,
   skip link, header + menu (hamburger <=860px), EN/PT toggle, footer. Page CSS must not restyle these. */
@font-face{font-family:"Orbitron Fallback";src:local("Arial"),local("Helvetica"),local("Arimo"),local("Liberation Sans");size-adjust:116%}
@font-face{font-family:"Rajdhani Fallback";src:local("Arial"),local("Helvetica"),local("Arimo"),local("Liberation Sans");size-adjust:82%}
@font-face{font-family:"Inter Fallback";src:local("Arial"),local("Helvetica"),local("Arimo"),local("Liberation Sans");size-adjust:103%}
:root{--bg:#07090d;--panel:#0d131b;--line:#1c3442;--cyan:#22e3ff;--amber:#ffb020;--text:#d3dde6;--muted:#93a4b4;
--f-body:Inter,"Inter Fallback",sans-serif;--f-head:Orbitron,"Orbitron Fallback",sans-serif;--f-ui:Rajdhani,"Rajdhani Fallback",sans-serif;--f-mono:'JetBrains Mono',ui-monospace,monospace}
html{background:var(--bg)}
body{background:var(--bg);color:var(--text);font-family:var(--f-body)}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(34,227,255,.035) 0 1px,transparent 1px 3px);z-index:9}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--cyan);color:#001018;padding:8px 14px;font:700 16px var(--f-ui);text-decoration:none}
.skip:focus{left:8px}
.site-hd{position:relative;z-index:100}
.site-hd nav{display:flex;justify-content:space-between;align-items:center;padding:18px 32px;border-bottom:1px solid var(--line);flex-wrap:wrap;gap:10px;margin:0;max-width:none;height:auto;background:none}
.site-hd .logo{font:800 16px/1.6 var(--f-head);letter-spacing:.1em;color:#fff;text-decoration:none;order:0}
.site-hd .logo b{color:var(--cyan)}
.site-menu{display:flex;gap:22px;list-style:none;flex-wrap:wrap;margin:0 0 0 auto;padding:0;order:1}
.site-menu a,.site-ft a{color:var(--muted);text-decoration:none;font:700 16px/1.6 var(--f-ui);letter-spacing:.1em;text-transform:uppercase}
.site-menu a:hover,.site-ft a:hover{color:var(--cyan)}
.site-menu a[aria-current=page]{color:#fff;box-shadow:inset 0 -2px 0 var(--cyan)}
.hd-tools{display:flex;align-items:center;gap:10px;order:2}
.lang{display:inline-flex;border:1px solid var(--line);padding:2px;gap:2px;border-radius:0;background:none}
.lang button{font:700 13px/1 var(--f-ui);letter-spacing:.1em;color:var(--muted);background:none;border:0;border-radius:0;padding:7px 10px;min-width:40px;min-height:32px;cursor:pointer;
clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.lang button[aria-pressed=true]{background:var(--cyan);color:#001018}
.lang button:hover{color:#fff}.lang button[aria-pressed=true]:hover{color:#001018}
.menu-btn{display:none;align-items:center;gap:8px;min-height:36px;padding:6px 12px;border:1px solid var(--line);background:none;color:#fff;font:700 14px/1 var(--f-ui);letter-spacing:.12em;cursor:pointer}
.menu-ico{display:inline-grid;gap:4px}.menu-ico i{display:block;width:18px;height:2px;background:var(--cyan);transition:transform .2s,opacity .2s}
.menu-btn[aria-expanded=true] .menu-ico i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded=true] .menu-ico i:nth-child(2){opacity:0}
.menu-btn[aria-expanded=true] .menu-ico i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
@media(max-width:860px){
 .site-hd nav{padding:14px 18px;flex-wrap:nowrap}
 html.js .menu-btn{display:inline-flex}
 html.js .site-menu{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;background:var(--panel);border-bottom:1px solid var(--line);padding:6px 18px 14px;box-shadow:0 18px 40px rgba(0,0,0,.6)}
 html.js .site-menu.open{display:flex}
 .site-menu a{display:block;padding:12px 0;border-bottom:1px solid var(--line)}
 .site-menu li:last-child a{border-bottom:0}
 html:not(.js) .site-hd nav{flex-wrap:wrap}html:not(.js) .site-menu{order:3;width:100%;gap:12px}
}
.site-ft{border-top:1px solid var(--line);padding:26px 32px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 24px;font:16px/1.6 var(--f-body);color:var(--text);text-align:left;margin:0}
.site-ft p{color:var(--muted);font-size:14px;margin:0}
.site-ft .mono{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.ft-links{display:flex;gap:18px;list-style:none;margin:0;padding:0}.ft-links a{font-size:14px}
@media(max-width:700px){.site-ft{padding:22px 18px}}
@media(prefers-reduced-motion:reduce){.menu-ico i{transition:none}}
/* 404 notice injected by site.js when the home page is served for an unknown path */
.nf{margin:28px 0 0;padding:18px 22px;border:1px solid var(--amber);background:var(--panel)}
.nf h1{font:800 28px/1.2 var(--f-head);color:#fff;margin:0 0 6px;letter-spacing:.04em}.nf p{margin:0}.nf a{color:var(--amber)}
/* 404: html.is-404 is set before paint in head.html, so the notice is static (no layout shift) and the home content is not shown */
.nf{display:none}
html.is-404 .nf{display:block;margin:56px 0 44vh}
html.is-404 #main>:not(.nf){display:none!important}
/* narrow phones (<=400px): keep logo + EN/PT + menu on one row inside the viewport */
@media(max-width:400px){
 .site-hd nav{padding:14px 12px;gap:8px}
 .site-hd .logo{font-size:14px;letter-spacing:.06em;white-space:nowrap}
 .hd-tools{gap:6px}
 .lang button{min-width:34px;padding:7px 7px}
 .menu-btn{padding:6px 9px}
}
@media(max-width:360px){.menu-btn .menu-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}