/*
Theme Name: IamLordApollo
Theme URI: https://www.youtube.com/@iamlordapollo
Author: Built for IamLordApollo
Description: A video theme that pulls a YouTube channel's uploads straight from its public feed. Newest video plays on the front page, everything before it stacks into an archive, and each one gets its own URL. No API key, no plugin, no manual posting.
Version: 1.0.0
Requires at least: 5.9
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: iamlordapollo
Tags: video, one-column, custom-logo, full-width-template
*/

/* Official IamLordApollo logo, embedded once and shared */
.logo{
  background-image:url('assets/logo.png');
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  aspect-ratio:620/457;
}
:root{
  --void:      #12041C;
  --velvet:    #240A3A;
  --plum:      #3D1163;
  --gold:      #F2C14E;
  --gold-deep: #B7841F;
  --parchment: #F6EDD8;
  --muted:     #B49BCE;

  --display: 'Chakra Petch', 'Trebuchet MS', sans-serif;
  --body:    'Barlow', system-ui, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, monospace;

  --rail: 1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--void);
  background-image:
    radial-gradient(120% 80% at 50% -10%, rgba(93,26,148,.55) 0%, transparent 60%),
    radial-gradient(90% 60% at 100% 0%, rgba(242,193,78,.10) 0%, transparent 55%);
  background-attachment:fixed;
  color:var(--parchment);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{display:block;max-width:100%}
.wrap{max-width:var(--rail);margin:0 auto;padding:0 24px}

/* ---------- header ---------- */
.masthead{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(14px);
  background:linear-gradient(to bottom, rgba(18,4,28,.94), rgba(18,4,28,.72));
  border-bottom:1px solid rgba(242,193,78,.22);
}
.masthead-in{
  max-width:var(--rail);margin:0 auto;padding:12px 24px;
  display:flex;align-items:center;gap:14px;
}
.brand{display:flex;align-items:center;text-decoration:none;min-width:0}
.brand-logo{
  height:52px;width:auto;flex:none;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.55));
  transition:transform .2s ease;
}
.brand:hover .brand-logo{transform:translateY(-1px) scale(1.02)}
.masthead-spacer{flex:1}
.subscribe{
  font-family:var(--display);font-weight:700;font-size:13px;
  letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  color:#2A0B45;
  background:linear-gradient(160deg,#FFE49A,var(--gold) 45%,var(--gold-deep));
  padding:10px 18px;border-radius:2px;
  border:1px solid rgba(255,235,180,.6);
  transition:transform .18s ease, filter .18s ease;
  white-space:nowrap;
}
.subscribe:hover{transform:translateY(-1px);filter:brightness(1.08)}

/* ---------- shared bits ---------- */
.eyebrow{
  font-family:var(--mono);font-size:12px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold);margin:0 0 14px;
  display:flex;align-items:center;gap:12px;
}
.eyebrow::after{content:"";height:1px;flex:1;background:linear-gradient(to right,rgba(242,193,78,.5),transparent)}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 0 rgba(242,193,78,.7);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(242,193,78,0)}100%{box-shadow:0 0 0 0 rgba(242,193,78,0)}}

/* ---------- the throne: framed player ---------- */
.stage{padding:56px 0 18px}
.throne{position:relative;margin-top:40px}
.throne-crest{
  display:block;
  width:min(300px,58%);
  margin:0 auto -18px;
  position:relative;z-index:3;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.75));
}
.throne-frame{
  position:relative;
  padding:12px;
  background:linear-gradient(150deg,#FFE9AE,var(--gold) 22%,#8C6413 52%,var(--gold) 78%,#FFF0C0);
  border-radius:4px;
  box-shadow:0 34px 80px -28px rgba(0,0,0,.95), 0 0 0 1px rgba(0,0,0,.5);
}
.throne-inner{
  background:#000;border-radius:2px;overflow:hidden;
  aspect-ratio:16/9;
}
.throne-inner iframe{width:100%;height:100%;border:0;display:block}

/* Shorts sit tall and centred, never stretched */
.throne--tall{max-width:420px;margin-left:auto;margin-right:auto}
.throne--tall .throne-inner{aspect-ratio:9/16}

.now-title{
  font-family:var(--display);font-weight:700;
  font-size:clamp(30px,5.2vw,58px);line-height:1.04;
  letter-spacing:-.005em;margin:0 0 16px;text-wrap:balance;
}
.meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;
  font-family:var(--mono);font-size:13px;color:var(--muted);
  letter-spacing:.04em;
}
.meta .dot{color:rgba(242,193,78,.5)}
.meta a{color:var(--gold);text-underline-offset:4px}

/* ---------- description ---------- */
.notes{
  margin:44px 0 0;
  display:grid;grid-template-columns:190px 1fr;gap:40px;
  padding-top:28px;border-top:1px solid rgba(242,193,78,.2);
}
.notes-label{
  font-family:var(--mono);font-size:12px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold);padding-top:4px;
}
.notes-body{
  white-space:pre-wrap;color:#E6DCC6;max-width:68ch;font-size:16.5px;
}
.notes-body a{color:var(--gold)}

/* ---------- archive ledger ---------- */
.archive{padding:78px 0 40px}
.archive-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.archive-title{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;font-size:clamp(19px,2.4vw,25px);margin:0;
}
.archive-count{font-family:var(--mono);font-size:13px;color:var(--muted)}

.row{
  display:grid;grid-template-columns:200px 1fr auto;gap:26px;align-items:center;
  padding:22px 6px;text-decoration:none;
  border-bottom:1px solid rgba(242,193,78,.16);
  transition:background .2s ease, padding-left .2s ease;
}
.row:first-of-type{border-top:1px solid rgba(242,193,78,.16)}
.row:hover,.row:focus-visible{background:rgba(93,26,148,.28);padding-left:16px}
.row:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.row-thumb{
  position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:2px;
  background:#1b0730;border:1px solid rgba(242,193,78,.35);
}
.row-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.row:hover .row-thumb img{transform:scale(1.06)}
.row-title{
  font-family:var(--display);font-weight:600;font-size:20px;line-height:1.25;
  margin:0 0 7px;
}
.row:hover .row-title{color:#FFE9AE}
.row-date{font-family:var(--mono);font-size:12.5px;color:var(--muted);letter-spacing:.06em}
.row-go{
  font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);opacity:.35;transition:opacity .2s ease,transform .2s ease;
}
.row:hover .row-go{opacity:1;transform:translateX(4px)}

/* ---------- watch page ---------- */
.back{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;margin-bottom:6px;
}
.back:hover{color:var(--gold)}

/* ---------- notice ---------- */
.notice{
  max-width:var(--rail);margin:18px auto 0;padding:14px 18px;
  border:1px solid rgba(242,193,78,.4);border-left:4px solid var(--gold);
  background:rgba(93,26,148,.3);font-size:15px;
}
.notice code{font-family:var(--mono);font-size:13px;color:var(--gold)}

/* ---------- footer ---------- */
.foot{
  margin-top:70px;padding:32px 0 60px;
  border-top:1px solid rgba(242,193,78,.18);
  display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;
  font-family:var(--mono);font-size:12.5px;color:var(--muted);letter-spacing:.05em;
}
.foot a{color:var(--gold);text-decoration:none}
.foot a:hover{text-decoration:underline}
.foot-spacer{flex:1}

/* ---------- motion ---------- */
.rise{opacity:0;transform:translateY(18px);animation:rise .7s cubic-bezier(.2,.7,.3,1) forwards}
.rise.d1{animation-delay:.08s}
.rise.d2{animation-delay:.16s}
@keyframes rise{to{opacity:1;transform:none}}

@media (max-width:860px){
  .notes{grid-template-columns:1fr;gap:16px}
  .row{grid-template-columns:132px 1fr;gap:16px}
  .row-go{display:none}
  .stage{padding-top:34px}
  .throne-crest{width:min(220px,66%);margin-bottom:-12px}
}
@media (max-width:480px){
  body{font-size:16px}
  .brand-logo{height:40px}
  .subscribe{padding:9px 13px;font-size:11px}
  .row-title{font-size:17px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- category tabs ---------- */
.groupnav{
  display:flex;flex-wrap:wrap;gap:8px;
  padding:24px 0 0;
}
.groupnav a{
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;text-decoration:none;
  color:var(--muted);
  padding:9px 15px;border-radius:2px;
  border:1px solid rgba(242,193,78,.24);
  transition:color .18s ease, border-color .18s ease, background .18s ease;
}
.groupnav a:hover{color:var(--gold);border-color:rgba(242,193,78,.65)}
.groupnav a[aria-current="page"]{
  color:#2A0B45;font-weight:600;border-color:transparent;
  background:linear-gradient(160deg,#FFE49A,var(--gold) 45%,var(--gold-deep));
}
@media (max-width:480px){
  .groupnav{gap:6px;padding-top:18px}
  .groupnav a{padding:8px 11px;font-size:11px;letter-spacing:.12em}
}

/* ---------- support / Patreon ---------- */
.support-link{
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;text-decoration:none;
  color:var(--gold);padding:10px 16px;margin-right:10px;
  border:1px solid rgba(242,193,78,.45);border-radius:2px;
  transition:background .18s ease,color .18s ease;
  white-space:nowrap;
}
.support-link:hover{background:rgba(242,193,78,.12)}

.support{
  margin:82px 0 20px;padding:44px 0 48px;
  border-top:1px solid rgba(242,193,78,.2);
  border-bottom:1px solid rgba(242,193,78,.2);
  text-align:center;
}
.support-title{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;font-size:clamp(20px,2.6vw,27px);margin:0;
}
.support-blurb{
  color:var(--muted);max-width:52ch;margin:14px auto 0;font-size:16.5px;
}

.tiers{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;margin:36px 0 34px;text-align:left;
}
.tier{
  display:flex;flex-direction:column;gap:8px;
  padding:24px 22px;text-decoration:none;
  background:rgba(93,26,148,.24);
  border:1px solid rgba(242,193,78,.28);border-radius:3px;
  transition:transform .2s ease,border-color .2s ease,background .2s ease;
}
.tier:hover{
  transform:translateY(-3px);
  border-color:rgba(242,193,78,.7);
  background:rgba(93,26,148,.4);
}
.tier-price{
  font-family:var(--mono);font-size:13px;letter-spacing:.1em;color:var(--gold);
}
.tier-name{
  font-family:var(--display);font-weight:600;font-size:21px;margin:0;color:var(--parchment);
}
.tier-blurb{margin:0;color:#D9CDB8;font-size:15.5px;line-height:1.5;flex:1}
.tier-go{
  font-family:var(--mono);font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);opacity:.55;
}
.tier:hover .tier-go{opacity:1}

.support-cta{
  display:inline-block;
  font-family:var(--display);font-weight:700;font-size:14px;
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  color:#2A0B45;
  background:linear-gradient(160deg,#FFE49A,var(--gold) 45%,var(--gold-deep));
  padding:15px 34px;border-radius:2px;
  border:1px solid rgba(255,235,180,.6);
  transition:transform .18s ease,filter .18s ease;
}
.support-cta:hover{transform:translateY(-2px);filter:brightness(1.08)}

/* ---------- podcast episodes ---------- */
.episode{
  display:grid;grid-template-columns:1fr minmax(220px,320px);
  gap:20px;align-items:center;padding:20px 6px;
  border-bottom:1px solid rgba(242,193,78,.16);
}
.episode:first-of-type{border-top:1px solid rgba(242,193,78,.16)}
.episode-audio{width:100%;height:38px}

@media (max-width:860px){
  .episode{grid-template-columns:1fr;gap:12px}
  .support{margin-top:58px;padding:34px 0 38px}
  .support-link{display:none}
}