/* RACK & ROLL '26 — the atds MySpace bones with arcade paint. */
:root { --bg:#14121a; --panel:#1e1b26; --ink:#e8e4f0; --muted:#8f8a9d;
        --box:#7c5cff; --hdr-ink:#ffffff; --hdr2:#ff5c8a; --link:#6ee7ff;
        --rule:#332e42; }
* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--bg); color:var(--ink);
       font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px;
       line-height:1.5; padding:1rem;
       background-image:radial-gradient(circle at 20% 0%, #221d33 0%, var(--bg) 55%); }
a { color:var(--link); }
main { max-width:56rem; margin:0 auto; background:var(--panel);
       border:2px solid var(--box); padding:1rem; box-shadow:0 0 24px #7c5cff33; }
.masthead { font-size:0.72rem; letter-spacing:0.2em; text-transform:uppercase;
            color:var(--muted); border-bottom:1px solid var(--rule);
            padding-bottom:0.5rem; margin-bottom:1rem; }
h1 { font-size:1.6rem; margin-bottom:0.75rem; letter-spacing:0.02em; }
.cols { display:flex; gap:1rem; align-items:flex-start; flex-wrap:wrap; }
.col-l { flex:1 1 14rem; max-width:18rem; }
.col-r { flex:2 1 22rem; min-width:16rem; }
.box { border:2px solid var(--box); margin-bottom:1rem; background:#191624; }
.box > h2 { background:var(--box); color:var(--hdr-ink); font-size:0.85rem;
            font-weight:bold; padding:0.3rem 0.55rem; letter-spacing:0.08em;
            text-transform:uppercase; }
.box.warm { border-color:var(--hdr2); }
.box.warm > h2 { background:var(--hdr2); }
.box .pad { padding:0.7rem; }
.box .pad p { margin:0.45rem 0; }
.box .pad ol, .box .pad ul { margin:0.45rem 0 0.45rem 1.4rem; }
.photo img { display:block; width:100%; height:auto; image-rendering:auto; }
.extnet { border:1px solid var(--box); padding:0.6rem; margin-bottom:1rem;
          font-size:1.05rem; text-align:center; background:#191624; }
.btn, button.btn { display:inline-block; background:var(--hdr2); color:#fff;
       padding:0.5rem 1rem; text-decoration:none; font-weight:bold;
       border:0; font:inherit; cursor:pointer; }
.btn:hover { filter:brightness(1.15); }
.muted { color:var(--muted); font-size:0.85rem; }
.tease { margin-top:0.75rem; font-style:italic; }
.busted { color:var(--hdr2); font-weight:bold; }
footer { margin-top:1.25rem; border-top:1px solid var(--rule);
         padding-top:0.6rem; text-align:center; color:var(--muted);
         font-size:0.75rem; letter-spacing:0.05em; }
footer a { color:var(--muted); }
form label { display:block; margin:0.7rem 0; }
form input, form textarea { width:100%; padding:0.5rem; font:inherit;
  background:#241f33; border:1px solid var(--rule); color:var(--ink); }
form textarea { min-height:6rem; }
.lb { width:100%; border-collapse:collapse; margin-top:0.5rem; }
.lb td, .lb th { border:1px solid var(--rule); padding:0.45rem 0.7rem; text-align:left; }
.lb th { background:var(--box); color:#fff; text-transform:uppercase;
         font-size:0.8rem; letter-spacing:0.08em; }
.lb .n { text-align:right; font-variant-numeric:tabular-nums; }
#preroll { display:none; position:fixed; inset:0; z-index:99;
           background:rgba(8,6,14,0.95); align-items:center; justify-content:center;
           flex-direction:column; padding:1rem; text-align:center; }
#preroll.show { display:flex; }
#preroll h2 { color:#fff; font-size:1.2rem; margin-bottom:0.75rem; }
#preroll-video { width:min(92vw, 40rem); aspect-ratio:16/9; background:#000; }
#preroll-video iframe { width:100%; height:100%; border:0; }
#preroll button { font:inherit; font-weight:bold; margin:0.9rem 0.4rem 0;
                  padding:0.5rem 1.1rem; cursor:pointer; border:2px solid #fff;
                  background:transparent; color:#fff; }
#preroll button:hover { background:#fff; color:#000; }
@media (max-width:40rem) { .cols { display:block; } .col-l { max-width:none; } }