@font-face{font-family:Manrope;src:url(assets/manrope.woff2) format("woff2");font-weight:200 800;font-display:swap}

:root{
  color-scheme:dark;
  --bg:#1A202C;--fg:#F7FAFC;
  --panel:#2D3748;--panel-border:rgba(255,255,255,.09);
  --border:#4A5568;--muted:#3a4657;--muted-fg:#b8c2d0;
  --shadow-panel:0 1px 2px rgba(0,0,0,.35),0 8px 24px -16px rgba(0,0,0,.6);
  --accent:#0487cd;--accent-hover:#0374b1;--on-accent:#ffffff;
  --accent-container:#0b3a55;--on-accent-container:#9fd7f5;
  --brand-navy:#1A202C;--link:#5cb8ee;
  --radius:.875rem;--panel-radius:1.375rem;
  --aurora-opacity:.5;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Manrope,system-ui,sans-serif;background:var(--bg);color:var(--fg);line-height:1.6;overflow-x:hidden;padding-bottom:9rem}
img{max-width:100%;height:auto;display:block}
a{color:var(--link)}
h1,h2,h3{margin:0 0 .5em;line-height:1.1}
h2{font-size:clamp(1.75rem,3vw,2.25rem);font-weight:700;letter-spacing:-.02em}
h3{font-size:1.0625rem;font-weight:600}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.skip{position:absolute;left:-999px;top:0;background:var(--accent);color:#fff;padding:.5rem 1rem;z-index:99}
.skip:focus{left:1rem;top:1rem}

/* Aurora backdrop */
.aurora{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;opacity:var(--aurora-opacity)}
.aurora span{position:absolute;width:60vmax;height:60vmax;border-radius:50%;filter:blur(90px);will-change:transform}
.aurora .a1{background:#0487cd;top:-20vmax;left:-15vmax;animation:drift1 28s ease-in-out infinite alternate}
.aurora .a2{background:#2B6CB0;bottom:-25vmax;right:-10vmax;animation:drift2 34s ease-in-out infinite alternate}
.aurora .a3{background:#31cdcf;top:30vh;left:40vw;width:45vmax;height:45vmax;animation:drift3 40s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(20vw,15vh) scale(1.15)}}
@keyframes drift2{to{transform:translate(-20vw,-20vh) scale(.9)}}
@keyframes drift3{to{transform:translate(-25vw,20vh) scale(1.2)}}
@media (prefers-reduced-motion:reduce){.aurora span{animation:none}html{scroll-behavior:auto}}

/* Header */
.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:1.5rem;padding:.75rem clamp(1rem,4vw,3rem);background:var(--bg);border-bottom:1px solid var(--panel-border)}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--fg);text-decoration:none;font-weight:800;font-size:1.125rem;letter-spacing:-.01em}
.brand img{width:34px;height:34px;border-radius:8px}
.top nav{display:flex;gap:1.25rem;margin-left:auto}
.top nav a{color:var(--fg);text-decoration:none;font-weight:600;font-size:.9375rem;padding:.35rem 0;border-bottom:2px solid transparent}
.top nav a:hover{border-color:var(--accent)}

main{max-width:72rem;margin:0 auto;padding:0 clamp(1rem,4vw,3rem)}

/* Hero */
.hero{padding:clamp(3rem,8vw,6rem) 0 2rem;position:relative;min-height:min(34rem,84vh);overflow:hidden}
.eyebrow{margin:0 0 1rem;font-weight:700;font-size:.8125rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-fg)}
.hero h1{font-size:clamp(2.75rem,6.5vw,5.5rem);font-weight:800;letter-spacing:-.04em;line-height:.98;max-width:14ch}
.hero h1 em{font-style:normal;background:linear-gradient(90deg,#0487cd,#31cdcf 55%,#2B6CB0);-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{font-size:clamp(1.0625rem,1.8vw,1.3125rem);max-width:56ch;color:var(--muted-fg);margin:1.5rem 0 2rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}

.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.35rem;border-radius:var(--radius);font:inherit;font-weight:700;font-size:.9875rem;text-decoration:none;cursor:pointer;border:1px solid transparent;line-height:1.2;min-height:2.75rem}
.btn.primary{background:var(--accent);color:var(--on-accent)}
.btn.primary:hover{background:var(--accent-hover)}
.btn.ghost{background:var(--muted);color:var(--fg);border-color:var(--panel-border)}
.btn.ghost:hover{border-color:var(--fg)}

/* Panels */
.panel{background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--panel-radius);box-shadow:var(--shadow-panel);padding:clamp(1.25rem,3vw,2rem)}
.hero-viz{margin-top:3rem;height:140px}
.hero-viz canvas{width:100%;height:100%;display:block}

/* Show logos: white discs drifting behind the words, bouncing off each other
   and the edges, and fading back where they pass under the text.
   The movement is in app.js - this only says how they look. */
.hero-copy{position:relative;z-index:1;max-width:40rem}
.orbit{position:absolute;inset:0 0 4.5rem 0;z-index:0;pointer-events:none;overflow:hidden}
.disc{position:absolute;top:0;left:0;width:clamp(78px,10.5vw,150px);aspect-ratio:1;
  display:grid;place-items:center;border-radius:50%;background:#fff;
  box-shadow:0 12px 30px rgba(0,0,0,.5);will-change:transform,opacity}
.disc img{width:74%;height:74%;object-fit:contain}
.d2 img{transform:scale(1.22)}

/* Inner pages: hosts, contact */
.page{max-width:64rem;margin:0 auto;padding:3rem 0 1rem}
.page h1{font-size:clamp(2.25rem,5vw,3.5rem);font-weight:800;letter-spacing:-.03em;margin-bottom:.4em}
.page-lede{font-size:1.125rem;color:var(--muted-fg);max-width:56ch;margin:0 0 2.5rem}
.hosts{display:flex;flex-direction:column;gap:1.25rem}
.host{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.75rem;align-items:start;
  background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--panel-radius);
  box-shadow:var(--shadow-panel);padding:clamp(1.25rem,3vw,2rem)}
.host-pic{width:132px;height:132px;flex:none}
.host-pic img{width:100%;height:100%;border-radius:50%;object-fit:cover;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.monogram{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;
  background:var(--muted);border:1px solid var(--panel-border);color:var(--muted-fg);
  font-size:3.25rem;font-weight:800;letter-spacing:-.03em}
.host-body h2{font-size:1.75rem;font-weight:800;letter-spacing:-.02em;margin:0 0 .5rem}
.host-body p{color:var(--muted-fg);margin:0 0 .85rem;max-width:70ch}
.host-shows{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}
.host-shows .tag{display:inline-flex;align-items:center;gap:.4rem;font-size:.75rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;color:var(--muted-fg);
  background:var(--muted);border:1px solid var(--panel-border);border-radius:999px;padding:.3rem .7rem}
.host-shows .tag i{width:.55rem;height:.55rem;border-radius:50%;background:var(--show)}
.host-src{font-size:.875rem}
.host-src a{color:var(--link);text-decoration:none}
.host-src a:hover{text-decoration:underline}
@media (max-width:640px){
  .host{grid-template-columns:1fr;gap:1rem}
  .host-pic{width:104px;height:104px}
}

/* Contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:1.5rem;align-items:start}
.contact-form .field{margin-bottom:1.25rem}
.contact-form label{display:block;font-size:.9375rem;font-weight:600;margin-bottom:.4rem}
.contact-form input,.contact-form textarea{display:block;width:100%;box-sizing:border-box;
  font:inherit;color:var(--fg);background:var(--muted);border:1px solid var(--border);
  border-radius:var(--radius);padding:.7rem .85rem;min-height:2.75rem}
.contact-form textarea{resize:vertical;line-height:1.5}
.contact-form input:focus-visible,.contact-form textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.contact-form .hint{font-size:.8125rem;color:var(--muted-fg);margin:.4rem 0 0}
/* Portal draws the anti-spam ring around this button and writes its words
   to the right of it, so that space is kept clear at every width. */
.contact-form button[type=submit]{margin:20px 22rem 20px 20px}
@media (max-width:760px){.contact-form button[type=submit]{margin-right:0;min-width:0}}
.contact-aside h2{font-size:1.0625rem;font-weight:600;margin-top:1.5rem}
.contact-aside h2:first-child{margin-top:0}
.contact-aside p{color:var(--muted-fg)}
.plain{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem}
@media (max-width:760px){.contact-grid{grid-template-columns:1fr}}

/* Latest */
.latest{padding:3rem 0 1rem}
.latest-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.ep-card{background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--panel-radius);box-shadow:var(--shadow-panel);padding:1.25rem;display:flex;flex-direction:column;gap:.75rem;position:relative;overflow:hidden}
.ep-card .tag{display:inline-flex;align-items:center;gap:.4rem;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-fg)}
.ep-card .tag i{width:.6rem;height:.6rem;border-radius:50%;background:var(--show);display:inline-block}
.ep-card h3{font-size:1.25rem;font-weight:700;letter-spacing:-.01em;margin:0}
.ep-card p{margin:0;color:var(--muted-fg);font-size:.9375rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ep-card .row{display:flex;align-items:center;gap:.75rem;margin-top:auto;padding-top:.5rem}
.ep-card .meta{font-size:.8125rem;color:var(--muted-fg);margin-left:auto}
.play{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;background:var(--show,var(--accent));color:#fff;border:0;border-radius:var(--radius);font:inherit;font-weight:700;padding:.6rem 1rem;cursor:pointer;min-height:2.75rem}
.play:hover{filter:brightness(1.1)}
.play.on{background:var(--fg);color:var(--bg)}
.play svg{flex:none}

/* Shows */
.shows{padding:3rem 0}
.show{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:2rem;background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--panel-radius);box-shadow:var(--shadow-panel);padding:clamp(1.25rem,3vw,2.25rem);margin-bottom:1.5rem;position:relative;overflow:hidden}
.show::after{content:"";position:absolute;inset:auto -20% -40% auto;width:60%;aspect-ratio:1;border-radius:50%;background:var(--show);opacity:.08;filter:blur(60px);pointer-events:none}
.show-art{display:grid;place-items:center;width:min(190px,52%);aspect-ratio:1;border-radius:50%;background:#fff;margin-bottom:1rem;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.show-art img{width:71%;height:71%;object-fit:contain}
#show-distrohoppers .show-art img{transform:scale(1.2)}
.show-head h3{font-size:clamp(1.75rem,3vw,2.5rem);font-weight:800;letter-spacing:-.03em}
.show-head .hosts{font-size:.875rem;color:var(--muted-fg);margin:0 0 1rem}
.show-head .hosts b{color:var(--show)}
.show-head p{color:var(--muted-fg);max-width:44ch}
.show-head .row{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.25rem}
.show-head .site{color:var(--fg);font-weight:600;text-decoration:none;display:inline-flex;align-items:center;min-height:2.75rem;padding:0 .5rem}
.show-head .site:hover{text-decoration:underline}
.eps{list-style:none;margin:0;padding:0;position:relative;z-index:1}
.eps li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.9rem;padding:.7rem .5rem;border-top:1px solid var(--border);border-radius:.5rem}
.eps li:first-child{border-top:0}
.eps li[hidden]{display:none}
.eps li.now{background:var(--muted)}
.eps .pb{width:2.5rem;height:2.5rem;border-radius:50%;border:1px solid var(--panel-border);background:var(--muted);color:var(--fg);display:grid;place-items:center;cursor:pointer;flex:none}
.eps .pb:hover{background:var(--show);color:#fff;border-color:var(--show)}
.eps li.now .pb{background:var(--show);color:#fff;border-color:var(--show)}
.eps .t{font-weight:600;font-size:.9875rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eps .t a{color:inherit;text-decoration:none}
.eps .t a:hover{text-decoration:underline}
.eps .d{font-size:.8125rem;color:var(--muted-fg)}
.eps .dur{font-size:.8125rem;color:var(--muted-fg);font-variant-numeric:tabular-nums}
.more{margin-top:.75rem;background:none;border:0;color:var(--link);font:inherit;font-weight:600;cursor:pointer;padding:.5rem;min-height:2.75rem}

/* Community */
.community{margin:2rem 0 3rem}
.community p{max-width:60ch;color:var(--muted-fg)}
.links{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.25rem 0 2rem}
.feeds{margin:0;padding-left:1.2rem}
.foot{color:var(--muted-fg);font-size:.875rem;padding:2rem clamp(1rem,4vw,3rem) 1rem;max-width:72rem;margin:0 auto}
.foot p{margin:0 0 1rem}
.legal{border-top:1px solid var(--panel-border);padding-top:1.25rem;font-size:.8125rem}

/* Sticky player */
.player[hidden]{display:none}
/* The player floats clear of both bottom corners: Portal puts the chat
   bubble in one and the newsletter sign-up in the other, about 20px in. */
.player{position:fixed;left:7rem;right:7rem;bottom:1rem;z-index:20;display:grid;grid-template-columns:auto minmax(0,1fr) auto minmax(180px,2fr) auto auto auto;align-items:center;gap:1rem;padding:.75rem clamp(1rem,2.5vw,1.5rem);background:var(--panel);border:1px solid var(--panel-border);border-radius:1.25rem;box-shadow:0 12px 34px rgba(0,0,0,.45)}
.player img{width:56px;height:56px;border-radius:.6rem;background:#fff;object-fit:cover}
.pMeta{display:flex;flex-direction:column;min-width:0}
.pMeta strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.9875rem}
.pMeta span{font-size:.8125rem;color:var(--muted-fg)}
.pControls{display:flex;align-items:center;gap:.4rem}
.pControls button,#closePlayer,.speed{background:var(--muted);border:1px solid var(--panel-border);color:var(--fg);width:2.75rem;height:2.75rem;border-radius:50%;display:grid;place-items:center;cursor:pointer;font:inherit;font-weight:700}
.pControls .big{width:3.25rem;height:3.25rem;background:var(--accent);color:var(--on-accent);border-color:transparent}
.pControls .big:hover{background:var(--accent-hover)}
.player .ic-pause{display:none}
.player.playing .ic-pause{display:block}
.player.playing .ic-play{display:none}
.pScrub{display:flex;align-items:center;gap:.6rem;font-size:.8125rem;font-variant-numeric:tabular-nums;color:var(--muted-fg)}
.pScrub input{flex:1;accent-color:var(--accent);min-width:0;height:2.75rem;margin:0}
#miniViz{width:120px;height:40px}
.speed{border-radius:var(--radius);width:auto;padding:0 .75rem;font-size:.875rem}
@media (max-width:900px){
  .player{grid-template-columns:auto minmax(0,1fr) auto auto;row-gap:.5rem}
  .pScrub{grid-column:1/-1}
  #miniViz{display:none}
  .speed{display:none}
}
@media (max-width:720px){
  .show{grid-template-columns:1fr}
  .top nav{display:none}
  .top   .eps .dur{display:none}
  body{padding-bottom:11rem}
}
@media (max-width:720px){
  .player{grid-template-columns:auto minmax(0,1fr) auto;row-gap:.6rem}
  .player img{order:1}.pMeta{order:2}#closePlayer{order:3}
  .pScrub{order:4;grid-column:1/-1}
  .pControls{order:5;grid-column:1/-1;justify-content:center;gap:1rem}
  /* Narrow: the bar spans the width but sits above the corners instead. */
  .player{left:.75rem;right:.75rem;bottom:5.5rem}
  body{padding-bottom:17rem}
}