/* Under the Gun — site styles. Implements the brand system:
   clay-gold primary, ink alt, felt-green accents, Baskerville/mono/Jost type. */
:root{
  --clay-1:#CB5A3E; --clay-2:#92351F; --clay-rose:#F2D9C9;
  --gold:#E7B259; --gold-deep:#C9A14A;
  --bone:#ECE6D8; --bone-dim:#cfc6b4;
  --ink-1:#1C140F; --ink-2:#0C0907;
  --felt-1:#15543F; --felt-2:#0E4233; --felt-dk:#08291F;
  --serif:"Libre Baskerville",Georgia,serif;
  --sans:"Inter",system-ui,sans-serif;
  --label:"Jost","Century Gothic",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --maxw:980px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ink-2); color:var(--bone);
  font-family:var(--sans); line-height:1.65; -webkit-font-smoothing:antialiased;
}
a{color:var(--gold); text-decoration:none}
a:hover{color:var(--bone)}

/* background constellation — bleeds off the viewport */
.constellation{
  position:fixed; inset:-6% -6% -6% -6%; width:112%; height:112%;
  z-index:0; opacity:.5; pointer-events:none;
}
.net-line{stroke:var(--gold); stroke-width:3; opacity:.16}
.net-dot{fill:var(--gold); opacity:.3}

/* ---------- hero (clay) ---------- */
.hero{
  position:relative; z-index:1;
  background:radial-gradient(130% 100% at 78% 10%, var(--clay-1), var(--clay-2) 72%, #7d2c18);
  padding:96px 32px 92px; border-bottom:1px solid rgba(0,0,0,.25); overflow:hidden;
}
.hero-grid{
  max-width:1120px; margin:0 auto;
  display:grid; grid-template-columns:1.15fr .85fr; gap:64px; align-items:center;
}
.hero-copy{max-width:600px}
.eyebrow{
  font-family:var(--label); text-transform:uppercase; letter-spacing:.22em;
  font-size:12.5px; color:var(--gold); margin:0 0 22px;
}
.hero h1{
  font-family:var(--serif); font-weight:700; color:var(--bone);
  font-size:clamp(54px,8vw,118px); line-height:.9; letter-spacing:-.01em; margin:0;
}
.hero h1 .amp{font-weight:400; font-style:italic; opacity:.85}
.hero h1 i{font-style:italic; font-weight:400}
.tagline{
  font-family:var(--mono); color:var(--clay-rose); margin:22px 0 0;
  font-size:clamp(15px,2.2vw,21px); letter-spacing:.04em;
}
.lede{
  color:var(--bone); opacity:.92; margin:26px 0 0; max-width:540px; font-size:16.5px;
}
.cta{display:flex; gap:14px; margin:34px 0 0; flex-wrap:wrap}

/* the card mark — floating in the field, no boxy tile */
.hero-mark{display:flex; justify-content:center; align-items:center}
.card-mark{
  width:min(340px,72%); height:auto;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.4));
  animation:cardrise 1s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes cardrise{from{opacity:0; transform:translateY(22px) rotate(-3deg)} to{opacity:1; transform:none}}
.btn{
  font-family:var(--label); font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  font-size:14px; padding:14px 30px; border-radius:999px; transition:.16s; border:2px solid transparent;
}
.btn-primary{background:var(--felt-1); color:var(--bone); border-color:var(--felt-1)}
.btn-primary:hover{background:var(--felt-2); color:var(--bone); box-shadow:0 0 0 3px rgba(231,178,89,.4)}
.btn-ghost{background:transparent; color:var(--bone); border-color:rgba(236,230,216,.5)}
.btn-ghost:hover{border-color:var(--bone); color:var(--bone)}
.apps{font-size:13.5px; color:var(--clay-rose); opacity:.8; margin:22px 0 0}
.apps a{color:var(--bone); border-bottom:1px solid rgba(236,230,216,.4)}

/* ---------- episodes (ink) ---------- */
main{position:relative; z-index:1}
.episodes{max-width:var(--maxw); margin:0 auto; padding:72px 24px 40px}
.section-head{text-align:center; margin-bottom:44px}
.section-head h2{
  font-family:var(--serif); font-size:clamp(28px,5vw,42px); margin:0; color:var(--bone);
}
.season-note{font-family:var(--mono); color:var(--gold); font-size:14px; letter-spacing:.05em; margin:8px 0 0}

.ep-list{display:flex; flex-direction:column; gap:18px}
.ep{
  display:grid; grid-template-columns:88px 1fr; gap:22px;
  background:linear-gradient(180deg,#181009,#120c07);
  border:1px solid #2c2017; border-radius:16px; padding:24px 26px;
  transition:.16s;
}
.ep:hover{border-color:var(--gold-deep); box-shadow:0 8px 30px rgba(0,0,0,.4)}
.ep-num{display:flex; align-items:flex-start; justify-content:center}
.ep-num span{
  font-family:var(--serif); font-weight:700; color:var(--bone);
  background:var(--felt-1); border:1px solid var(--felt-dk);
  width:74px; height:74px; border-radius:14px;
  display:flex; align-items:center; justify-content:center; font-size:30px;
}
.ep-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap}
.ep-head h3{font-family:var(--serif); font-size:23px; color:var(--bone); margin:0}
.ep-meta{font-family:var(--mono); font-size:12.5px; color:var(--gold); white-space:nowrap}
.ep-body p{color:var(--bone-dim); font-size:15.5px; margin:10px 0 16px}
audio{width:100%; height:40px; filter:saturate(.85)}

/* upcoming episodes: dimmed teaser, no player, a "coming" date chip */
.ep-coming{opacity:.62}
.ep-coming .ep-num span{background:transparent; color:var(--gold-deep); border-color:#2c2017}
.ep-coming .ep-body p{margin-bottom:0}
.ep-soon{
  color:var(--gold); border:1px solid #3a2a14; border-radius:999px;
  padding:4px 11px; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
}
.ep-soon::before{content:"⟶ "; opacity:.7}

/* ---------- about (felt) ---------- */
.about{
  position:relative; z-index:1;
  background:radial-gradient(120% 120% at 50% 0%, var(--felt-1), var(--felt-dk));
  border-top:1px solid rgba(0,0,0,.3); padding:72px 24px;
}
.about-inner{max-width:680px; margin:0 auto; text-align:center}
.about h2{font-family:var(--serif); font-size:clamp(26px,4.5vw,38px); margin:0 0 20px; color:var(--bone)}
.about p{color:#dfe6df; font-size:16.5px; margin:0 0 16px}
.about p i{color:var(--bone); font-style:italic}
.about .studio{font-family:var(--label); letter-spacing:.08em; text-transform:uppercase;
  font-size:13px; color:var(--gold); margin-top:26px}

/* ---------- footer ---------- */
footer{position:relative; z-index:1; background:var(--ink-2); padding:40px 24px 56px; text-align:center}
.footer-inner .us{font-family:var(--serif); font-size:34px; color:var(--bone); display:block; margin-bottom:10px}
.footer-inner p{font-family:var(--mono); font-size:12.5px; color:var(--bone-dim); letter-spacing:.04em; margin:0}
.footer-inner a{color:var(--gold)}

@media(max-width:860px){
  .hero{padding:72px 24px 76px}
  .hero-grid{grid-template-columns:1fr; gap:40px; text-align:center}
  .hero-copy{max-width:none; margin:0 auto}
  .lede{margin-left:auto; margin-right:auto}
  .cta{justify-content:center}
  .hero-mark{order:-1}
  .card-mark{width:min(220px,52%)}
}
@media(max-width:560px){
  .ep{grid-template-columns:1fr; gap:14px}
  .ep-num{justify-content:flex-start}
  .ep-num span{width:56px; height:56px; font-size:24px}
}