/* Shared 8-bit page shell for the Eurovision and Contact pages: palette, scanlines, top bar, panels, buttons, pixel images */
:root{
  --void:#0b0820;--deck:#17123a;--truss:#3a3270;
  --beam-a:#ff4fd8;--beam-b:#3ff0ff;--amber:#ffc23d;--ink:#ece8ff;--dim:#9c94d6;--brand:#7f37e3;
  --display:"Press Start 2P", ui-monospace, "Courier New", monospace;
  --body:"VT323", ui-monospace, "Courier New", monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
[hidden]{display:none!important}
body{background:var(--void);color:var(--ink);font-family:var(--body);font-size:22px;line-height:1.25;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:max(20px,env(safe-area-inset-top,0px)) 90px;
  -webkit-font-smoothing:none}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,.18) 0 1px,transparent 1px 3px)}
.wrap{max-width:1040px;margin:0 auto;display:flex;flex-direction:column;gap:36px}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
img{max-width:100%}

/* top bar */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px 18px;flex-wrap:wrap}
.top .trlogo{--sz:clamp(30px,6vw,46px)}
.nav{display:flex;gap:8px;flex-wrap:wrap}
.nav a{font-family:var(--display);font-size:10px;text-decoration:none;color:var(--dim);padding:8px 10px;border:2px solid var(--truss);background:var(--deck)}
.nav a:hover{color:var(--amber);border-color:var(--amber)}
.nav a[aria-current="page"]{color:var(--void);background:var(--amber);border-color:var(--amber)}

/* type */
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;letter-spacing:.04em}
h1{font-size:clamp(18px,5vw,42px);line-height:1.3;text-shadow:3px 3px 0 var(--beam-a),6px 6px 0 var(--void);text-wrap:balance}
h2{font-size:clamp(12px,2.2vw,16px);color:var(--beam-b);margin-bottom:18px;line-height:1.5}
h2 span{color:var(--dim)}
h3{font-size:clamp(10px,1.6vw,12px);line-height:1.5}
p{margin:0}
.kicker{font-family:var(--display);font-size:clamp(8px,1.3vw,11px);color:var(--beam-b);letter-spacing:.12em}
.dim{color:var(--dim)}
.blink{animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

.panel{background:var(--deck);border:4px solid var(--truss);padding:20px max(16px,3vw)}
.frame{border:4px solid var(--truss);box-shadow:0 0 0 4px var(--void),0 0 0 8px var(--truss);background:var(--void);position:relative}

.btn{display:inline-block;font-family:var(--display);font-size:clamp(11px,2vw,15px);line-height:1.3;text-decoration:none;color:var(--void);background:var(--amber);
  padding:14px 18px;border:0;box-shadow:inset -4px -4px 0 #b9821a,inset 4px 4px 0 #fff0b8,0 6px 0 var(--truss);cursor:pointer}
.btn:hover{transform:translateY(2px);box-shadow:inset -4px -4px 0 #b9821a,inset 4px 4px 0 #fff0b8,0 4px 0 var(--truss)}
.btn:active{transform:translateY(6px);box-shadow:inset -4px -4px 0 #b9821a,inset 4px 4px 0 #fff0b8,0 0 0 var(--truss)}
.btn.alt{background:var(--beam-b);box-shadow:inset -4px -4px 0 #1a9aa8,inset 4px 4px 0 #c8fbff,0 6px 0 var(--truss)}
.btn.pink{background:var(--beam-a);box-shadow:inset -4px -4px 0 #a8308e,inset 4px 4px 0 #ffc8f3,0 6px 0 var(--truss)}
.btns{display:flex;flex-wrap:wrap;gap:14px 18px}

/* 8-bit photos */
canvas[data-px]{display:block;width:100%;height:auto;image-rendering:pixelated;image-rendering:crisp-edges;background:var(--deck)}
canvas.px-loading{animation:px-load .6s steps(2) infinite}
@keyframes px-load{50%{opacity:.6}}

footer{text-align:center;color:var(--dim);font-size:18px}
@media (prefers-reduced-motion:reduce){.blink,canvas.px-loading{animation:none}}