/* Shared WON.net-inspired theme for every cosmicweb page (static pages and
   halloffame.cgi). Page-specific rules stay in each page's own <style>. */
*{box-sizing:border-box}
:root{--navy:#012a6d;--navy-deep:#001636;--panel:#001b4d;--panel-hi:#12408f;--orange:#f6a01a;--orange-lo:#e07d05;--yellow:#ffd23f;--ink:#eef2ff}
body{margin:0;padding:0;font-family:Arial,Helvetica,"Liberation Sans",sans-serif;color:var(--ink);background:var(--navy-deep)}
.page{max-width:820px;margin:0 auto;padding:0 0 30px;min-height:100vh;background:radial-gradient(120% 90% at 15% 0%,#033a8f 0%,var(--navy) 45%,#001a4a 100%)}
header.top{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;padding:20px 26px 4px}
header.top img.cc-logo{max-width:260px;width:42vw;height:auto;filter:drop-shadow(2px 3px 0 #000)}
.tagline{font-style:italic;font-weight:bold;color:var(--yellow);font-size:clamp(1rem,2.4vw,1.5rem);line-height:1.15;text-shadow:2px 2px 0 #000;margin:0}
.body-grid{display:flex;flex-wrap:wrap;gap:22px;padding:6px 26px 30px;align-items:flex-start}
main.content{flex:1 1 460px;min-width:0}
h1.title{color:var(--orange);font-size:clamp(1.8rem,5vw,2.6rem);margin:6px 0;text-shadow:2px 2px 0 #000}
h2.section{color:var(--orange);font-size:clamp(1.4rem,3.6vw,1.9rem);margin:30px 0 10px;text-shadow:1px 1px 0 #000;scroll-margin-top:12px}
.content p{line-height:1.55;margin:10px 0;max-width:68ch}
.content li{line-height:1.55}
.content code{color:var(--yellow);background:#00102e;padding:1px 5px;border-radius:3px}
aside.nav{flex:0 0 210px;background:linear-gradient(180deg,var(--panel-hi) 0%,var(--panel) 22%,#00123a 100%);border:2px solid #2a5fb0;border-radius:20px;padding:16px 16px 22px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 6px 22px rgba(0,0,0,.5)}
aside.nav .bez{display:block;max-width:150px;width:80%;height:auto;margin:4px auto 16px;filter:drop-shadow(2px 2px 0 #000)}
aside.nav a.btn{display:block;text-align:center;text-decoration:none;font-weight:bold;font-size:1.05rem;color:#3a1c00;padding:8px 6px;margin:9px 0;border:1px solid #7a4a00;border-radius:5px;background:linear-gradient(180deg,#ffce5a 0%,var(--orange) 45%,var(--orange-lo) 100%);box-shadow:0 2px 0 #7a4a00,inset 0 1px 0 rgba(255,255,255,.6);text-shadow:0 1px 0 rgba(255,255,255,.35);transition:filter .1s,transform .1s}
aside.nav a.btn:hover{filter:brightness(1.12)}
aside.nav a.btn:active{transform:translateY(2px);box-shadow:0 0 0 #7a4a00,inset 0 1px 0 rgba(255,255,255,.4)}
aside.nav a.btn.hof{background:linear-gradient(180deg,#fffbe0 0%,#fff0a0 50%,#ffd23f 100%);color:#4a3400}
aside.nav a.btn .ico{width:1.05em;height:1.05em;vertical-align:-.16em;margin-right:6px;fill:currentColor}
aside.nav a.btn.live{background:linear-gradient(180deg,#a970ff 0%,#9146ff 50%,#7a2fe0 100%);color:#fff;border-color:#4a1a9e;box-shadow:0 2px 0 #4a1a9e,inset 0 1px 0 rgba(255,255,255,.5);text-shadow:0 1px 1px rgba(0,0,0,.4)}
aside.nav a.btn.live::before{content:"\25CF";color:#ff3b3b;margin-right:6px}
footer{margin-top:26px;padding-top:16px;border-top:1px solid #123a80;font-size:.85rem;line-height:1.5;color:#a9c4ff}
a{color:var(--yellow)}
a:visited{color:var(--orange)}
@media (max-width:640px){aside.nav{flex-basis:100%;border-radius:14px}}