/* The "Music" section on the front page: Disco Disko Lo-Fi and the main YouTube channel.
   Styled like the channels' own graphics: dark pixel city, warm window light,
   Pixelify Sans for headings and IBM Plex Mono for text. Both fonts are SIL Open Font License,
   from Google Fonts, served from this site (latin subset, covers Danish letters). */
@font-face{font-family:'Pixelify Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/pixelify-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-mono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/ibm-plex-mono-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

.lofi{
  --lf-bg:#0f1226; --lf-panel:#171a33; --lf-line:#2c3058; --lf-text:#e9e6f5; --lf-dim:#a4a3c4;
  --lf-warm:#f2c46d; --lf-warm-deep:#9a6e1f; --lf-mint:#9fe6cf; --lf-rose:#e88bb0; --lf-sky:#8fc3e8;
  --lf-pixel:'Pixelify Sans','Courier New',monospace;
  --lf-mono:'IBM Plex Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;
  font-family:var(--lf-mono);font-size:15px;line-height:1.6;color:var(--lf-text)
}
.lofi .lf-box{position:relative;background:radial-gradient(120% 80% at 50% 0%,#232848 0%,var(--lf-bg) 70%);border:2px solid var(--lf-line);border-radius:6px;padding:var(--pad);box-shadow:0 0 0 4px #0b0d1c,0 24px 60px -30px #000;overflow:hidden}
.lofi .lf-kicker{display:inline-block;font-family:var(--lf-pixel);font-weight:600;font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:var(--lf-mint);margin-bottom:6px}
.lofi h2,.lofi h3{font-family:var(--lf-pixel);font-weight:700;letter-spacing:.01em;color:var(--lf-warm);text-shadow:0 0 18px #f2c46d40}
.lofi h2{font-size:clamp(30px,5vw,46px);line-height:1.05;margin:0 0 10px}
.lofi h3{font-size:22px;line-height:1.15;margin:0}
.lofi p{margin:0 0 12px}
.lofi .lf-lead{color:var(--lf-text);max-width:62ch}
.lofi .lf-dim{color:var(--lf-dim)}
.lofi a{color:var(--lf-warm)}
.lofi a:hover{color:#ffe3a8}

/* the three series */
.lofi .lf-series{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0 22px;padding:0;list-style:none}
.lofi .lf-series li{display:flex}
.lofi .lf-series a{flex:1;display:block;background:#ffffff08;border:1px solid var(--lf-line);border-radius:4px;padding:12px 14px;font-size:13px;line-height:1.45;color:var(--lf-dim);text-decoration:none;transition:transform .12s,border-color .12s,background .12s}
.lofi .lf-series a:hover{transform:translateY(-2px);border-color:currentColor;background:#ffffff10;color:var(--lf-text)}
.lofi .lf-series a:focus-visible{outline:3px solid var(--lf-mint);outline-offset:3px}
.lofi .lf-go{display:block;margin-top:8px;font-size:12px;color:var(--lf-mint)}
.lofi .lf-all{margin:-12px 0 18px;font-size:13px}
.lofi .lf-series b{display:block;font-family:var(--lf-pixel);font-weight:600;font-size:17px;margin-bottom:2px}
.lofi .lf-series li:nth-child(1) b{color:var(--lf-sky)}
.lofi .lf-series li:nth-child(2) b{color:var(--lf-rose)}
.lofi .lf-series li:nth-child(3) b{color:var(--lf-warm)}
@media (max-width:760px){.lofi .lf-series{grid-template-columns:1fr}}

/* the player: the city banner until someone presses play; YouTube loads only then */
.lofi .lf-player{position:relative;aspect-ratio:16/9;border-radius:4px;overflow:hidden;background:#0b0d1c url(lofi-city.jpg) center/cover no-repeat;border:2px solid var(--lf-line);image-rendering:auto}
.lofi .lf-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lofi .lf-rain{position:absolute;inset:-140px 0 0;pointer-events:none;opacity:.7;background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><g stroke='%23c9d6ff' stroke-width='2'><path d='M12 4v14' opacity='.5'/><path d='M47 60v18' opacity='.35'/><path d='M83 18v12' opacity='.45'/><path d='M118 92v16' opacity='.4'/><path d='M30 104v12' opacity='.3'/><path d='M66 120v14' opacity='.45'/><path d='M101 40v10' opacity='.3'/><path d='M135 2v12' opacity='.35'/><path d='M22 58v10' opacity='.25'/></g></svg>") 0 0/140px 140px repeat;animation:lf-rain .9s linear infinite;-webkit-mask-image:linear-gradient(#000 40%,transparent 85%);mask-image:linear-gradient(#000 40%,transparent 85%)}
@keyframes lf-rain{to{transform:translateY(140px)}}
.lofi [hidden]{display:none!important}
.lofi .lf-overlay{position:absolute;inset:auto 0 0 0;padding:18px clamp(14px,3vw,24px);background:linear-gradient(to top,#0b0d1cf2 10%,#0b0d1c99 65%,transparent);display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between}
.lofi .lf-status{font-size:13px;color:var(--lf-text);margin:0}
.lofi .lf-status strong{font-family:var(--lf-pixel);font-weight:600;font-size:19px;color:var(--lf-warm);display:block;line-height:1.2}
/* phones: the text goes under the picture instead of over it */
@media (max-width:600px){.lofi .lf-player{aspect-ratio:auto;padding-top:56.25%;background-size:100% auto;background-position:top center}.lofi .lf-rain{display:none}.lofi .lf-overlay{position:relative;inset:auto;background:#0b0d1c;border-top:2px solid var(--lf-line)}}
.lofi .lf-note{font-size:12px;color:var(--lf-dim);margin:8px 0 0}

/* buttons: square-ish, pixel shadow */
.lofi .lf-btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--lf-pixel);font-weight:600;font-size:18px;line-height:1;text-decoration:none;padding:11px 16px;border-radius:3px;border:0;cursor:pointer;background:var(--lf-warm);color:#251803;box-shadow:0 4px 0 var(--lf-warm-deep);transition:transform .12s,box-shadow .12s}
.lofi .lf-btn:hover{color:#251803;transform:translateY(-2px);box-shadow:0 6px 0 var(--lf-warm-deep)}
.lofi .lf-btn:active{transform:translateY(2px);box-shadow:0 2px 0 var(--lf-warm-deep)}
.lofi .lf-btn.ghost{background:#ffffff12;color:var(--lf-text);box-shadow:0 4px 0 #ffffff22;border:1px solid #ffffff30}
.lofi .lf-btn.ghost:hover{color:#fff;box-shadow:0 6px 0 #ffffff22}
.lofi .lf-btn svg{width:18px;height:18px;flex:none}
.lofi .lf-btn:focus-visible{outline:3px solid var(--lf-mint);outline-offset:3px}

/* channel cards */
.lofi .lf-channels{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:22px}
@media (max-width:760px){.lofi .lf-channels{grid-template-columns:1fr}}
.lofi .lf-channel{display:grid;grid-template-columns:72px 1fr;gap:14px;align-items:start;background:var(--lf-panel);border:1px solid var(--lf-line);border-radius:4px;padding:16px}
.lofi .lf-channel img{width:72px;height:72px;border-radius:50%;image-rendering:pixelated;border:2px solid var(--lf-line)}
.lofi .lf-channel .lf-handle{font-size:13px;color:var(--lf-mint);margin:2px 0 8px}
.lofi .lf-channel p{font-size:14px;color:var(--lf-dim)}
.lofi .lf-channel .lf-actions{display:flex;flex-wrap:wrap;gap:8px}
.lofi .lf-channel .lf-btn{font-size:16px;padding:9px 13px}

/* licence */
.lofi .lf-license{margin-top:18px;padding:14px 16px;border-left:3px solid var(--lf-warm);background:#f2c46d0d;font-size:13px;color:var(--lf-dim)}
.lofi .lf-license p{margin:0}
.lofi .lf-license b{color:var(--lf-text);font-weight:600}

@media (prefers-reduced-motion:reduce){.lofi .lf-rain{animation:none;opacity:.35}.lofi .lf-btn,.lofi .lf-series a{transition:none}}