/* ===== Startline Podcast — video hero → animated logo bg, live RSS episodes, custom player ===== */
.wrap{position:relative;z-index:1}
.pcontent{max-width:1000px;margin:0 auto;padding:0 22px 220px}

/* subscribe */
.subs{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;justify-content:center}
.sub{display:inline-flex;align-items:center;gap:8px;font-family:var(--data);font-weight:700;letter-spacing:.5px;text-transform:uppercase;font-size:12.5px;color:var(--cream);text-decoration:none;padding:10px 15px;border-radius:24px;border:1px solid var(--line);background:rgba(22,22,22,.6);transition:border-color .2s ease,background .2s ease,transform .2s ease}
.sub:hover{border-color:var(--leaf);transform:translateY(-2px)}
.sub svg{width:16px;height:16px;fill:currentColor}
.sub.rss{color:var(--orange);border-color:rgba(243,146,0,.45)}

.dash{height:0;border-top:2px dashed var(--leaf);opacity:.4;margin:38px 0 26px}

/* featured latest */
.feat{border:1px solid var(--line);border-left:5px solid var(--orange);border-radius:14px;background:linear-gradient(150deg,rgba(17,40,27,.55),rgba(22,22,22,.82));padding:22px;display:flex;gap:22px;flex-wrap:wrap}
.feat .fart{flex:0 0 auto;width:150px;height:150px;border-radius:12px;object-fit:cover;box-shadow:0 10px 26px rgba(0,0,0,.5)}
.feat .fmain{flex:1 1 300px;min-width:260px}
.feat .flabel{font-family:var(--data);font-weight:700;letter-spacing:2px;text-transform:uppercase;font-size:11px;color:var(--orange)}
.feat .ftitle{font-family:var(--disp);font-weight:700;text-transform:uppercase;color:var(--leaf);font-size:clamp(20px,3vw,27px);line-height:1.1;margin:6px 0 4px}
.feat .fmeta{font-family:var(--data);letter-spacing:.5px;text-transform:uppercase;font-size:14.5px;color:var(--leaf);margin-bottom:12px}
.feat .fdesc{font-family:var(--body);font-size:14.5px;line-height:1.6;opacity:.9;margin-bottom:14px}
.feat .fdesc a{color:var(--leaf)}
.fdesc .full{display:none}
.fdesc.open .full{display:block}
.fdesc.open .short{display:none}
.fmore{background:none;border:0;cursor:pointer;color:var(--leaf);font-family:var(--data);text-transform:uppercase;letter-spacing:1px;font-size:11px;padding:2px 0;margin-top:2px}
.fmore:hover{color:var(--orange)}

/* tools */
.eptools{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:34px 0 10px}
.eptools h2{font-family:var(--disp);font-weight:700;text-transform:uppercase;color:var(--cream);font-size:clamp(20px,3vw,26px);margin:0}
.eptools .cnt{font-family:var(--data);color:var(--leaf);font-size:13px;letter-spacing:1px;text-transform:uppercase}
.search{flex:1 1 240px;max-width:340px;font-family:var(--body);font-size:14px;color:var(--cream);background:rgba(22,22,22,.7);border:1px solid var(--line);border-radius:24px;padding:10px 16px;outline:none}
.search:focus{border-color:var(--leaf)}

/* episode accordions */
.eplist{margin-top:12px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:rgba(14,16,15,.8)}
.ep{border-top:1px solid rgba(228,228,216,.08);background:linear-gradient(135deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.66) 55%,rgba(0,0,0,.8) 100%);background-size:220% 220%;animation:epDrift 13s ease-in-out infinite}
.ep:first-child{border-top:0}
@keyframes epDrift{0%,100%{background-position:0% 0%}50%{background-position:100% 100%}}
@media(prefers-reduced-motion:reduce){.ep{animation:none}}
.ephead{width:100%;display:flex;align-items:center;gap:14px;padding:15px 16px;background:none;border:0;cursor:pointer;text-align:left;color:inherit;transition:background .2s ease}
.ephead:hover{background:rgba(0,28,16,.4)}
.epnum{flex:0 0 auto;width:38px;height:38px;border-radius:9px;background:var(--forest-2,#11281B);color:var(--orange);font-family:var(--data);font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center}
.epmain{flex:1;min-width:0}
.epguest{display:block;font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:16px;color:var(--leaf);line-height:1.15}
.epsub{display:block;font-family:var(--body);font-size:13px;opacity:.8;line-height:1.3;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.epmeta{flex:0 0 auto;font-family:var(--data);letter-spacing:.5px;text-transform:uppercase;font-size:14px;color:var(--leaf);text-align:right;white-space:nowrap}
.epchev{flex:0 0 auto;color:var(--leaf);font-size:15px;transition:transform .3s ease}
.ep.open .epchev{transform:rotate(180deg)}
.epbody{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.4,0,.2,1)}
.ep.open .epbody{grid-template-rows:1fr}
.epbody-in{overflow:hidden;min-height:0}
.epgrid{display:flex;gap:18px;padding:4px 16px 20px 16px;flex-wrap:wrap}
.epart{flex:0 0 auto;width:120px;height:120px;border-radius:10px;object-fit:cover;box-shadow:0 8px 20px rgba(0,0,0,.45)}
.epinfo{flex:1 1 300px;min-width:240px}
.epdesc{font-family:var(--body);font-size:14px;line-height:1.6;opacity:.9;margin-bottom:14px}
.epdesc a{color:var(--leaf)}
@media(max-width:560px){.epmeta{display:none}}

/* custom audio player */
.player{display:flex;align-items:center;gap:12px;background:rgba(0,0,0,.4);border:1px solid var(--line);border-radius:30px;padding:8px 14px 8px 8px}
.pp{flex:0 0 auto;width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;background:var(--orange);color:var(--forest);font-size:15px;display:flex;align-items:center;justify-content:center;transition:transform .15s ease}
.pp:hover{transform:scale(1.06)}
.pbar{flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,.14);cursor:pointer;position:relative;min-width:80px}
.pfill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:3px;background:linear-gradient(90deg,var(--leaf),var(--orange))}
.ptime{flex:0 0 auto;font-family:var(--data);font-size:12px;color:var(--leaf);letter-spacing:.5px;min-width:88px;text-align:right}
.pdl{flex:0 0 auto;color:var(--cream);opacity:.6;text-decoration:none;font-size:16px}
.pdl:hover{opacity:1;color:var(--leaf)}

.pstatus{text-align:center;font-family:var(--data);letter-spacing:1px;text-transform:uppercase;font-size:13px;color:var(--leaf);opacity:.8;padding:40px 0}
.skeleton{height:70px;border-top:1px solid rgba(228,228,216,.06);background:linear-gradient(90deg,rgba(255,255,255,.02),rgba(255,255,255,.06),rgba(255,255,255,.02));background-size:200% 100%;animation:sk 1.3s linear infinite}
@keyframes sk{to{background-position:-200% 0}}

/* video hero stage → crossfades to the animated logo background on scroll */
.stage{position:fixed;inset:0;z-index:0;overflow:hidden;background:#0b0b0b}
#bgVideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .35s linear}
.stage-ov{position:fixed;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(6,10,8,.3),rgba(6,10,8,.55) 55%,rgba(6,10,8,.82))}
.vhero{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;padding:0 22px 70px}   /* top-anchored: stripes touch the frame */
.vhero .opener{display:flex;gap:3px;justify-content:center;margin-bottom:20px;height:auto}
.vhero .opener i{width:11px;height:82px;background:var(--leaf);display:block;border-radius:1px}
/* title uses the shared .pagetitle (uniform size site-wide) — no per-page title sizing */
.vlogo{display:block;width:clamp(74px,11vw,112px);height:auto;border-radius:16px;box-shadow:0 8px 26px rgba(0,0,0,.55);margin:0 auto 16px}
.vsub{font-family:var(--disp);font-weight:500;text-transform:uppercase;letter-spacing:1px;color:var(--leaf);font-size:clamp(18px,3vw,30px);margin-top:18px;text-shadow:0 2px 14px rgba(0,0,0,.6)}
.scrollhint{margin-top:46px;font-family:var(--data);letter-spacing:3px;text-transform:uppercase;font-size:12px;color:var(--cream);opacity:.75;animation:bob 1.9s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
/* Short laptop viewports: reserve the floating-pill zone so the hero clears the pills */
@media (max-height:960px){
  .vhero{padding-bottom:230px}
  .scrollhint{margin-top:30px}
}

/* animated Startline logo background */
#slbg{position:fixed;inset:0;z-index:0;display:flex;align-items:center;justify-content:center;pointer-events:none;overflow:hidden;opacity:0;transition:opacity .4s linear}
#slbg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(3px);opacity:.5}
#slbg .slmask{position:absolute;right:-2%;bottom:-2%;width:40%;height:28%;background:radial-gradient(135% 135% at 100% 100%,rgba(11,13,12,.96) 20%,rgba(11,13,12,0) 66%);pointer-events:none}

/* Host intro — the SAME glass panel as LATEST EPISODE. It carries .feat, so the border, the orange
   spine, the gradient, the radius, the padding and the 150px portrait all come from that one
   component (podcast.css line ~15). Only the type inside is defined here — do not fork a second
   panel style. Photo left, text left, full width so it reads as a sibling of the episode panel. */
.phero{display:block;max-width:640px;margin:10px auto 0;text-align:center}
.intro{align-items:center;margin:6px 0 0;text-align:left}
.intro .byline{margin:0}
/* the opening line leads — bigger than the body beneath it, cream on the glass */
.intro .ilead{font-family:var(--body);font-weight:600;font-size:clamp(17px,2.1vw,20px);line-height:1.42;
  color:var(--cream);margin:0 0 11px}
.intro .ip{font-family:var(--body);font-size:15.5px;line-height:1.65;color:var(--cream);opacity:.9;margin:0 0 11px}
.intro .ip:last-child,.intro .ilead:last-child{margin-bottom:0}
.intro .byline a{color:var(--leaf);text-decoration:none;border-bottom:1px solid rgba(40,152,81,.5)}
.intro .byline a:hover{color:var(--orange);border-bottom-color:rgba(243,146,0,.6)}

@media(max-width:780px){
  #bgVideo,#slbg video{object-fit:cover}
  .vhero{padding:0 16px 80px}
  .vhero .opener i{height:60px}
  .scrollhint{margin-top:36px}
  /* .feat wraps on its own; keep it LEFT aligned rather than centring (user, 20 Jul) */
  .intro{gap:16px}
  .intro .fart{width:120px;height:120px}
}

/* ===== Episode photo gallery — thumbnails → lightbox, same component as The Tommy Club ===== */
.epgal{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.epgal-h{font-family:var(--disp);font-weight:700;text-transform:uppercase;color:var(--leaf);font-size:14px;letter-spacing:1px;margin-bottom:12px}
.epgal .gthumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}
.epgal .gthumb{aspect-ratio:1/1;border:1px solid var(--line);border-radius:10px;overflow:hidden;cursor:pointer;background:rgba(9,12,10,.6);padding:0}
.epgal .gthumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease,filter .3s ease;filter:saturate(.92)}
.epgal .gthumb:hover img{transform:scale(1.08);filter:saturate(1.12)}
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(4,7,5,.93);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:30px;cursor:zoom-out}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw;max-height:88vh;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.6)}

@media(max-width:600px){
  .epgal .gthumbs{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:9px}
  .lightbox{padding:14px}
}

/* ===== Share row — on each expanded episode and on the episode page ===== */
.ep-share{display:flex;align-items:center;gap:12px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.ep-share .ss-label{font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:1.2px;font-size:12px;color:var(--leaf)}
.story-share{display:flex;gap:9px;align-items:center}
.ss-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:999px;
  border:1px solid var(--line);background:rgba(0,0,0,.45);color:var(--cream);cursor:pointer;padding:0;text-decoration:none;
  transition:border-color .2s ease,background .2s ease,transform .2s ease}
.ss-btn svg{width:17px;height:17px;fill:currentColor}
.ss-btn:hover{border-color:var(--leaf);background:rgba(40,152,81,.16);transform:translateY(-2px)}
.ss-copied{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);white-space:nowrap;
  font-family:var(--data);font-weight:700;text-transform:uppercase;letter-spacing:.6px;font-size:11px;color:var(--forest);
  background:var(--orange);border-radius:999px;padding:3px 10px;opacity:0;pointer-events:none;transition:opacity .2s ease}
.ss-copy.done .ss-copied{opacity:1}

/* ===== Single-episode page (/podcast/ep<N>) — not linked from this site ===== */
.epage{max-width:1000px;margin:0 auto;padding:0 22px 220px}
.epback{display:inline-block;font-family:var(--data);font-weight:700;text-transform:uppercase;letter-spacing:1px;font-size:12.5px;
  color:var(--leaf);text-decoration:none;margin-bottom:24px;transition:color .2s ease}
.epback:hover{color:#3cc270}
.eptop{display:flex;gap:26px;align-items:center;margin-bottom:30px}
.epage-art{flex:0 0 auto;width:190px;height:190px;border-radius:16px;object-fit:cover;box-shadow:0 12px 34px rgba(0,0,0,.55)}
.eptop-main{min-width:0}
.epage-label{font-family:var(--data);font-weight:700;text-transform:uppercase;letter-spacing:1.4px;font-size:13px;color:var(--orange);margin-bottom:8px}
.epage .pagetitle{text-align:left;margin:0}
.epage-sub{font-family:var(--body);font-size:17px;color:var(--cream);opacity:.9;margin-top:10px}
.epage-meta{font-family:var(--data);font-weight:700;text-transform:uppercase;letter-spacing:1px;font-size:13px;color:var(--leaf);margin-top:12px}
.epage-card{background:rgba(0,0,0,.55);border:1px solid rgba(40,152,81,.28);border-radius:18px;padding:26px 28px}
.epage-desc{font-family:var(--body);font-size:16px;line-height:1.75;color:var(--cream)}
.epage-desc a{color:var(--leaf)}
.epage-desc p{margin:0 0 14px}
.epage-card .player{margin-top:22px}
.epage-gal{margin-top:34px}
.gthumbs.big{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.gthumbs.big .gthumb{aspect-ratio:4/3;border:1px solid var(--line);border-radius:12px;overflow:hidden;cursor:pointer;background:rgba(9,12,10,.6);padding:0}
.gthumbs.big .gthumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease,filter .3s ease;filter:saturate(.92)}
.gthumbs.big .gthumb:hover img{transform:scale(1.06);filter:saturate(1.12)}
.epage-foot{margin-top:38px}

@media(max-width:780px){
  .epage{padding:0 16px 220px}
  .eptop{flex-direction:column;align-items:flex-start;gap:18px}
  .epage-art{width:150px;height:150px}
  .epage-card{padding:20px 18px}
  .gthumbs.big{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:11px}
  .ep-share{flex-wrap:wrap;gap:9px}
}