/* ============================================================
   The Tyler Woodward Project — self-hosted podcast page
   Palette pulled from the show's own cover art:
   near-black surfaces, acid-lime (#C7FF00) signal accent, white text.
   ============================================================ */

:root{
  --bg:        #171717;
  --bg-2:      #1f1f1f;   /* cards */
  --bg-3:      #272727;   /* hover / elevated */
  --line:      #2c2c2c;
  --line-2:    #3a3a3a;

  --text:      #fafafa;
  --muted:     #9a9a9a;
  --muted-2:   #6e6e6e;

  --accent:    #c7ff00;   /* the logo's lime */
  --accent-dk: #a9da00;
  --accent-dim:rgba(199,255,0,.12);
  --on-accent: #0e0e0e;

  --radius:    14px;
  --radius-sm: 10px;
  --wrap:      980px;

  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  padding-bottom:120px;            /* room for sticky player */
}

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 22px; }

a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:6px;
}

/* ============================================================
   Header
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:40;
  background:rgba(23,23,23,.84);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--line);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; height:62px; }
.brand{ display:flex; align-items:center; gap:10px; min-width:0; }
.brand-logo{ height:28px; width:auto; display:block; }
.brand-name{ font-weight:700; font-size:15px; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.header-nav{ display:flex; align-items:center; gap:6px; }
.mobile-nav-links{ display:flex; align-items:center; gap:6px; }
.mobile-nav-links > a{
  padding:8px 12px; font-size:14px; font-weight:500; color:var(--muted);
  border-radius:8px; transition:color .15s, background .15s;
}
.mobile-nav-links > a:hover{ color:var(--text); background:var(--bg-2); }

.mobile-nav-toggle{
  display:none;
  width:38px;
  height:38px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--bg-2);
  color:var(--text);
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:0;
  cursor:pointer;
  position:relative;
  z-index:57;
  flex:none;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.mobile-nav-toggle span{
  display:block;
  width:16px;
  height:1.8px;
  background:currentColor;
  border-radius:2px;
}

.subscribe-wrap{ position:relative; margin-left:6px; }
.btn-subscribe{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--accent); color:var(--on-accent);
  border:none; cursor:pointer;
  font-family:var(--sans); font-weight:700; font-size:14px;
  padding:9px 15px; border-radius:999px;
  transition:transform .12s ease, background .15s;
}
.btn-subscribe:hover{ background:#d6ff3a; }
.btn-subscribe:active{ transform:scale(.97); }
.btn-subscribe svg{ transition:transform .2s; }
.btn-subscribe[aria-expanded="true"] svg{ transform:rotate(180deg); }

.subscribe-menu{
  position:absolute; right:0; top:calc(100% + 8px);
  background:var(--bg-2); border:1px solid var(--line);
  border-radius:12px; padding:6px; min-width:200px;
  box-shadow:0 18px 50px rgba(0,0,0,.55);
  display:flex; flex-direction:column; gap:2px; z-index:50;
}
.subscribe-menu[hidden]{ display:none; }
.subscribe-menu a{
  display:flex; align-items:center; gap:10px;
  padding:9px 11px; border-radius:8px; font-size:14px; font-weight:500; color:var(--text);
  transition:background .12s;
}
.subscribe-menu a:hover{ background:var(--bg-3); }
.subscribe-menu a .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none; }

/* ============================================================
   Hero
   ============================================================ */
.hero{ position:relative; overflow:hidden; padding:60px 0 38px; }
.hero-glow{
  position:absolute; inset:-40% 0 auto 0; height:520px;
  background:radial-gradient(60% 70% at 28% 0%, rgba(199,255,0,.16), rgba(199,255,0,0) 70%);
  pointer-events:none; z-index:0;
}
.hero-inner{
  position:relative; z-index:1;
  display:grid; grid-template-columns:260px 1fr; gap:38px; align-items:center;
}
.hero-art img{
  width:260px; height:260px; border-radius:18px;
  border:1px solid var(--line-2);
  box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.eyebrow{
  font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--accent);
  margin:0 0 12px;
}
.hero-text h1{
  margin:0 0 16px; font-size:clamp(30px, 5vw, 46px);
  line-height:1.05; font-weight:800; letter-spacing:-.025em;
}
.hero-desc{ margin:0 0 22px; color:var(--muted); max-width:60ch; font-size:15.5px; }

.platforms{ display:flex; flex-wrap:wrap; gap:9px; }
.platforms a{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--bg-2); border:1px solid var(--line);
  padding:8px 14px; border-radius:999px;
  font-size:13.5px; font-weight:600; color:var(--text);
  transition:border-color .15s, background .15s, transform .12s;
}
.platforms a:hover{ border-color:var(--accent); background:var(--bg-3); transform:translateY(-1px); }
.platforms a .pi{ width:15px; height:15px; flex:none; opacity:.95; }
.platforms a.rss .pi{ color:var(--accent); }

/* fade-up entrance */
.hero-text > *{ animation:rise .6s cubic-bezier(.2,.7,.2,1) both; }
.hero-text > *:nth-child(2){ animation-delay:.05s; }
.hero-text > *:nth-child(3){ animation-delay:.1s; }
.hero-text > *:nth-child(4){ animation-delay:.15s; }
@keyframes rise{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} }
@media (prefers-reduced-motion: reduce){ .hero-text > *{ animation:none; } }

/* ============================================================
   Controls (tabs + search)
   ============================================================ */
.controls{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin:14px auto 6px; flex-wrap:wrap;
  scroll-margin-top:78px;
}
.section-title{
  margin:0; font-size:20px; font-weight:800; letter-spacing:-.02em;
}

.search{
  display:flex; align-items:center; gap:9px;
  background:var(--bg-2); border:1px solid var(--line);
  border-radius:999px; padding:0 14px; height:42px;
  color:var(--muted-2); min-width:210px; flex:0 1 280px;
  transition:border-color .15s;
}
.search:focus-within{ border-color:var(--line-2); }
.search input{
  border:none; background:transparent; outline:none; color:var(--text);
  font-family:var(--sans); font-size:14px; width:100%; padding:9px 0;
}
.search input::placeholder{ color:var(--muted-2); }

/* ============================================================
   Episode list
   ============================================================ */
.episodes{ list-style:none; margin:8px 0 0; padding:0; }
.episode{
  display:grid; grid-template-columns:76px 1fr; gap:18px;
  padding:20px 0; border-top:1px solid var(--line);
}
.episode:first-child{ border-top:none; }

.ep-art{ position:relative; width:76px; height:76px; }
.ep-art img{ width:76px; height:76px; border-radius:12px; border:1px solid var(--line); object-fit:cover; }
.ep-play{
  position:absolute; inset:0; display:grid; place-items:center;
  border:none; cursor:pointer; border-radius:12px;
  background:rgba(0,0,0,.45); opacity:0; transition:opacity .15s;
}
.ep-art:hover .ep-play,
.ep-play:focus-visible,
.episode.is-current .ep-play{ opacity:1; }
.ep-play .disc{
  width:38px; height:38px; border-radius:50%; background:var(--accent); color:var(--on-accent);
  display:grid; place-items:center; box-shadow:0 6px 18px rgba(0,0,0,.4);
  transition:transform .12s;
}
.ep-play:hover .disc{ transform:scale(1.07); }

.ep-body{ min-width:0; }
.ep-title{
  margin:0 0 7px; font-size:17px; font-weight:700; letter-spacing:-.01em; line-height:1.3;
  cursor:pointer;
}
.ep-title:hover{ color:var(--accent); }
.episode.is-current .ep-title{ color:var(--accent); }

.ep-meta{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-family:var(--mono); font-size:12px; color:var(--muted); margin-bottom:10px;
}
.ep-meta .sep{ color:var(--muted-2); }
.ep-meta .epno{ color:var(--accent); }

/* episode-type badges (full / bonus / trailer) */
.ep-tag{
  font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; padding:2px 7px; border-radius:6px; line-height:1.5;
}
.ep-tag.full{ color:var(--muted); border:1px solid var(--line-2); }
.ep-tag.bonus{ color:var(--accent); background:var(--accent-dim); }
.ep-tag.trailer{ color:#7cc4ff; background:rgba(124,196,255,.13); }

.ep-desc{ color:var(--muted); font-size:14.5px; line-height:1.6; }
.ep-desc.clamp{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ep-desc p{ margin:0 0 10px; }
.ep-desc p:last-child{ margin-bottom:0; }
.ep-desc ul,.ep-desc ol{ margin:8px 0 12px; padding-left:20px; }
.ep-desc li{ margin:3px 0; }
.ep-desc h3,.ep-desc h4{ color:var(--text); font-size:13px; text-transform:uppercase; letter-spacing:.08em; margin:14px 0 6px; }
.ep-desc a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }

/* clickable chapter timecodes */
.ts{
  font-family:var(--mono); font-size:12.5px; font-weight:500;
  color:var(--accent); background:var(--accent-dim);
  border:none; cursor:pointer; padding:1px 6px; border-radius:6px; margin-right:7px;
  transition:background .12s;
}
.ts:hover{ background:rgba(199,255,0,.22); }

.ep-actions{ display:flex; align-items:center; gap:20px; margin-top:12px; }

.ep-more{
  background:none; border:none; cursor:pointer;
  font-family:var(--sans); font-weight:600; font-size:13px; color:var(--text);
  display:inline-flex; align-items:center; gap:6px; padding:0;
}
.ep-more:hover{ color:var(--accent); }
.ep-more svg{ transition:transform .2s; }
.ep-more[aria-expanded="true"] svg{ transform:rotate(180deg); }

.ep-share{
  background:none; border:none; cursor:pointer; padding:0;
  font-family:var(--sans); font-weight:600; font-size:13px; color:var(--muted);
  display:inline-flex; align-items:center; gap:6px; transition:color .15s;
}
.ep-share:hover{ color:var(--accent); }
.ep-share.copied{ color:var(--accent); }
.ep-share svg{ width:15px; height:15px; }

.empty{ text-align:center; color:var(--muted); padding:50px 0; }

/* ============================================================
   Sticky player
   ============================================================ */
.player{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:rgba(29,29,29,.95);
  backdrop-filter:saturate(150%) blur(16px);
  border-top:1px solid var(--line-2);
  animation:slideUp .28s cubic-bezier(.2,.7,.2,1);
}
@keyframes slideUp{ from{transform:translateY(100%);} to{transform:none;} }
@media (prefers-reduced-motion: reduce){ .player{ animation:none; } }

.player-inner{
  display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1.4fr) auto;
  align-items:center; gap:18px; height:84px;
}
.player-now{ display:flex; align-items:center; gap:12px; min-width:0; }
.player-now img{ width:48px; height:48px; border-radius:9px; border:1px solid var(--line); flex:none; }
.player-meta{ display:flex; flex-direction:column; min-width:0; }
.player-title{ font-weight:700; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.player-sub{ font-family:var(--mono); font-size:11.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.player-controls{ display:flex; align-items:center; gap:6px; }
.pbtn{
  position:relative; display:grid; place-items:center;
  background:none; border:none; cursor:pointer; color:var(--text);
  width:40px; height:40px; border-radius:50%; transition:background .12s, color .12s;
}
.pbtn:hover{ background:var(--bg-3); color:var(--accent); }
.pbtn-num{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-family:var(--mono); font-size:8px; font-weight:700; line-height:1;
  letter-spacing:-.03em; pointer-events:none;
}
.play-main{
  width:50px; height:50px; background:var(--accent); color:var(--on-accent);
}
.play-main:hover{ background:#d6ff3a; color:var(--on-accent); }

/* Play / pause icon swap — driven by the .is-playing class, not the
   hidden attribute (the hidden attribute is unreliable on <svg>). */
.play-main .ic-play{ display:block; }
.play-main .ic-pause{ display:none; }
.play-main.is-playing .ic-play{ display:none; }
.play-main.is-playing .ic-pause{ display:block; }

.player-scrub{ display:flex; align-items:center; gap:12px; }
.time{ font-family:var(--mono); font-size:12px; color:var(--muted); min-width:42px; }
.time:last-child{ text-align:right; }

/* range inputs */
input[type="range"]{
  -webkit-appearance:none; appearance:none; height:4px; border-radius:4px;
  background:var(--line-2); cursor:pointer; width:100%;
}
#seek{ background:linear-gradient(var(--accent),var(--accent)) no-repeat var(--line-2); background-size:0% 100%; }
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:13px; height:13px; border-radius:50%;
  background:var(--accent); border:none; box-shadow:0 0 0 3px rgba(199,255,0,.18);
}
input[type="range"]::-moz-range-thumb{
  width:13px; height:13px; border-radius:50%; background:var(--accent); border:none;
}
input[type="range"]::-moz-range-progress{ background:var(--accent); height:4px; border-radius:4px; }

.player-extra{ display:flex; align-items:center; gap:6px; }
.rate{
  background:var(--bg-3); border:1px solid var(--line); color:var(--text);
  cursor:pointer; font-family:var(--mono); font-size:12px; font-weight:700;
  padding:6px 10px; border-radius:8px; min-width:42px; transition:border-color .12s, color .12s;
}
.rate:hover{ border-color:var(--accent); color:var(--accent); }
.vol{ display:flex; align-items:center; gap:7px; }
.vol input{ width:78px; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer{ border-top:1px solid var(--line); margin-top:50px; padding:36px 0; }
.footer-inner{ display:flex; flex-direction:column; gap:16px; align-items:center; text-align:center; }
.footer-brand{ display:flex; align-items:center; gap:11px; font-weight:700; }
.footer-brand img{ border-radius:7px; border:1px solid var(--line-2); }
.footer-links{ display:flex; flex-wrap:wrap; gap:18px; justify-content:center; }
.footer-links a{ color:var(--muted); font-size:13.5px; font-weight:500; transition:color .15s; }
.footer-links a:hover{ color:var(--accent); }
.footer-fine{ color:var(--muted-2); font-size:12.5px; margin:0; font-family:var(--mono); }

/* ============================================================
   Brand icons + reworked footer + About page
   ============================================================ */
.subscribe-menu a .mi{ width:17px; height:17px; flex:none; }
.platforms a .pi{ width:16px; height:16px; }

/* TuneIn favicon is dark; tint it to brand blue for contrast on dark UI. */
.brand-tunein{
  filter: brightness(0) saturate(100%) invert(66%) sepia(98%) saturate(2977%) hue-rotate(158deg) brightness(102%) contrast(101%);
}

.footer-social{ display:flex; gap:13px; justify-content:center; align-items:center; flex-wrap:wrap; }
.footer-social a{
  width:42px; height:42px; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:50%; color:var(--text);
  transition:border-color .15s, transform .12s, background .15s;
}
.footer-social a:hover{ border-color:var(--line-2); background:var(--bg-2); transform:translateY(-2px); }
.footer-social .si{ width:19px; height:19px; }

.footer-listen{ display:flex; flex-wrap:wrap; gap:8px 16px; justify-content:center; align-items:center; }
.footer-listen-label{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted-2);
}
.footer-listen a{ color:var(--muted); font-size:13.5px; font-weight:500; transition:color .15s; }
.footer-listen a:hover{ color:var(--accent); }

.footer-disclaimer{
  color:var(--muted); font-size:12.5px; max-width:62ch;
  margin:8px auto 0; line-height:1.6;
}

/* About page */
.about-head{ padding:54px 0 30px; }
.about-body{ max-width:760px; padding-top:4px; padding-bottom:8px; }
.about-body h2{
  font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent); margin:30px 0 14px;
}
.about-body p{ color:#cfcfcf; font-size:16px; line-height:1.72; margin:0 0 18px; }
.about-cta{ margin-top:26px; }
.btn-listen{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--accent); color:var(--on-accent);
  font-weight:700; font-size:14px; padding:11px 20px; border-radius:999px;
  transition:background .15s, transform .12s;
}
.btn-listen:hover{ background:#d6ff3a; transform:translateY(-1px); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 760px){
  .brand-name{ display:none; }
  .header-inner{ height:auto; min-height:62px; padding:8px 22px; gap:8px; }
  .brand-logo{ height:24px; }
  .header-nav{
    margin-left:auto;
    position:relative;
    display:grid;
    grid-template-columns:auto auto;
    align-items:center;
    column-gap:6px;
  }
  .mobile-nav-toggle{ display:inline-flex; flex-direction:column; }
  .mobile-nav-links{
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    min-width:168px;
    background:var(--bg-2);
    border:1px solid var(--line);
    border-radius:12px;
    box-shadow:0 18px 50px rgba(0,0,0,.55);
    padding:6px;
    display:none;
    flex-direction:column;
    gap:2px;
    z-index:55;
  }
  .header-nav.is-open .mobile-nav-links{ display:flex; }
  .mobile-nav-links > a{
    display:flex;
    align-items:center;
    padding:9px 11px;
    font-size:14px;
  }
  .subscribe-wrap{ display:block; margin-left:0; position:relative; z-index:56; }
  .btn-subscribe{ padding:8px 10px; font-size:12.5px; white-space:nowrap; }
  .hero{ padding:34px 0 24px; }
  .hero-inner{ grid-template-columns:1fr; gap:22px; text-align:left; }
  .hero-art img{ width:150px; height:150px; }
  .player-inner{
    grid-template-columns:1fr auto; grid-template-areas:"now controls" "scrub scrub";
    height:auto; padding:12px 0; gap:10px 14px;
  }
  .player-now{ grid-area:now; }
  .player-controls{ grid-area:controls; }
  .player-scrub{ grid-area:scrub; }
  .player-extra{ display:none; }
  body{ padding-bottom:140px; }
}
@media (max-width: 460px){
  .ep-art,.ep-art img{ width:60px; height:60px; }
  .episode{ grid-template-columns:60px 1fr; gap:14px; }
  .player-now img{ width:42px; height:42px; }
}