@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;
  --col:72rem;--gutter:clamp(1rem,4vw,3rem);
  --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;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 */
/* The bar spans the screen, but its contents line up with the page:
   same column and gutter as main and the footer. */
.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:1.5rem;
  padding-block:.75rem;
  padding-inline:calc((100% - min(var(--col),100%)) / 2 + var(--gutter));
  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}
.menu{display:none;margin-left:auto;width:2.75rem;height:2.75rem;border-radius:var(--radius);
  background:var(--muted);border:1px solid var(--panel-border);color:var(--fg);cursor:pointer;
  place-items:center}
.menu:hover{border-color:var(--fg)}
.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:var(--col);margin:0 auto;padding:0 var(--gutter)}

/* Hero */
.hero{padding:clamp(3rem,8vw,6rem) 0 2rem;position:relative;min-height:min(34rem,84vh);min-height:min(34rem,84dvh);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%;overflow:hidden;background:#fff;
  box-shadow:0 12px 30px rgba(0,0,0,.5);will-change:transform,opacity;
  /* Hidden until app.js has placed them: otherwise all four sit stacked in the
     top-left corner for the first frames and flash as one bright white circle. */
  opacity:0}
.disc img{width:72%;height:72%;object-fit:contain}
/* Keyed by the file, not the position: the discs get reordered and a
   position-based rule then enlarges the wrong logo out of its circle. */
.disc img[src$="logo-distrohoppers.png"]{transform:scale(1.22)}

/* Inner pages: hosts, contact */
.page{max-width:var(--col);margin:0 auto;padding:3rem var(--gutter) 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)}
.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)}
@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:var(--ink,#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%;overflow:hidden;background:#fff;margin-bottom:1rem;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.show-art img{width:70%;height:70%;object-fit:contain}
.show-art img[src$="logo-distrohoppers.png"]{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:var(--ink,#fff);border-color:var(--show)}
.eps li.now .pb{background:var(--show);color:var(--ink,#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 var(--gutter) 1rem;max-width:var(--col);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:1rem}
.foot p{margin:0 0 1rem}
.foot .by{grid-column:2;grid-row:1 / span 2;align-self:center;display:inline-flex;
  border-radius:50%;line-height:0}
.foot .by img{width:32px;height:32px;display:block}
.foot .by:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.foot .legal{grid-column:1}
.legal{border-top:1px solid var(--panel-border);padding-top:1.25rem;font-size:.8125rem}

/* Sticky player */
.player[hidden]{display:none}
/* The player is docked flush to the bottom, edge to edge. Portal puts the
   chat bubble in one bottom corner and the newsletter in the other, so the
   bar reaches the edges but its controls are inset clear of both. */
.player{position:fixed;left:0;right:0;bottom:0;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 5.5rem;
  background:var(--panel);border-top:1px solid var(--panel-border);
  box-shadow:0 -8px 30px rgba(0,0,0,.35)}
.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;padding-left:1.25rem;padding-right:1.25rem}
  .pScrub{grid-column:1/-1}
  #miniViz{display:none}
  .speed{display:none}
}
@media (max-width:720px){
  .menu{display:grid}
  .has-menu .top nav{position:absolute;top:100%;left:0;right:0;display:none;
    flex-direction:column;gap:0;
    padding:.5rem calc((100% - min(var(--col),100%)) / 2 + var(--gutter)) 1rem;
    background:var(--panel);border-bottom:1px solid var(--panel-border);
    box-shadow:0 12px 30px rgba(0,0,0,.45)}
  .has-menu .top nav.open{display:flex}
  .top nav a{min-height:3rem;display:flex;align-items:center;border-bottom:1px solid var(--border)}
  .top nav a:last-child{border-bottom:0}
  .show{grid-template-columns:1fr}
  .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. */
  /* Narrow: still flush, with the controls lifted clear of the two corner widgets. */
  .player{padding:.75rem 1rem 4.5rem}
  body{padding-bottom:17rem}
}

/* Touch sizes. Below 1024px every link and button is at least 44px tall,
   which is the smallest a finger reliably hits. */
@media (max-width:1023px){
  .top nav a{min-height:44px;display:inline-flex;align-items:center}
  .brand{min-height:44px}
  .eps .pb{width:2.75rem;height:2.75rem}
  .eps .t a{display:inline-flex;align-items:center;min-height:44px}
  .plain a,.feeds a,.foot a{display:inline-flex;align-items:center;min-height:44px}
}

/* A short screen (a phone on its side) must not lose its top to the header. */
@media (max-height:500px){
  .top{padding-top:.4rem;padding-bottom:.4rem}
  .brand svg,.brand img{width:28px;height:28px}
}