/* ===== Tokens ===== */
:root{
  --ink:#111011;
  --bark:#1c1712;
  --blood:#b5182b;
  --blood-dark:#7e0f1f;
  --ember:#d9642c;
  --paper:#f2ece0;
  --ash:#9a8f80;
  --radius:2px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  background:var(--ink);
  color:var(--paper);
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  line-height:1.6;
  overflow-x:hidden;
}

h1, h2, h3, .wordmark, .btn, .eyebrow, .tag, .ring-num{
  font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
  font-weight:900;
  letter-spacing:0.02em;
}

a{ color:inherit; text-decoration:none; }

/* subtle paper grain overlay for warmth */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:999;
  opacity:0.05; mix-blend-mode:overlay;
  background-image:
    repeating-linear-gradient(0deg, #fff 0px, transparent 1px, transparent 2px),
    repeating-linear-gradient(90deg, #fff 0px, transparent 1px, transparent 2px);
}

/* ===== Header ===== */
.site-header{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.25rem clamp(1.25rem, 5vw, 3rem);
  background:rgba(17,16,17,0.92);
  backdrop-filter:blur(6px);
  border-bottom:3px solid var(--blood);
}

.wordmark{
  font-size:1.05rem;
  line-height:1;
  color:var(--paper);
}
.wordmark span{
  display:block;
  color:var(--blood);
  font-size:0.85em;
}

.site-header nav{ display:flex; gap:clamp(1rem,3vw,2rem); }
.site-header nav a{
  font-family:"Arial Black", Arial, sans-serif;
  font-size:0.78rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--ash);
  padding-bottom:2px;
  border-bottom:2px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.site-header nav a:hover{ color:var(--paper); border-color:var(--blood); }

/* ===== Hero ===== */
.hero{
  position:relative;
  min-height:92vh;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  padding: 6rem clamp(1.25rem, 8vw, 6rem);
  overflow:hidden;
}

.ring-bg{
  position:absolute; right:-10%; top:50%; transform:translateY(-50%);
  width:min(60vw, 680px); opacity:0.9; pointer-events:none;
}
.ring-bg svg circle{
  fill:none; stroke:var(--bark); stroke-width:1;
}
.ring-bg svg circle:nth-child(odd){ stroke:var(--blood-dark); opacity:0.55; }

.eyebrow{
  font-size:0.75rem;
  letter-spacing:0.18em;
  color:var(--blood);
  margin-bottom:1.25rem;
}
.eyebrow-light{ color:var(--paper); opacity:0.85; }

.hero h1{
  font-size:clamp(3rem, 9vw, 6.5rem);
  line-height:0.92;
  color:var(--paper);
  text-shadow: 3px 3px 0 var(--blood-dark);
}
.hero h1 span{ color:var(--blood); }

.tagline{
  max-width:34ch;
  margin-top:1.75rem;
  color:var(--ash);
  font-size:1.05rem;
}

.hero-actions{
  display:flex; gap:1rem; margin-top:2.5rem; flex-wrap:wrap;
}

.btn{
  display:inline-block;
  font-size:0.8rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  padding:0.95rem 1.75rem;
  border-radius:var(--radius);
  border:2px solid var(--blood);
  transition:transform .15s ease, background .2s ease, color .2s ease;
}
.btn-primary{ background:var(--blood); color:var(--paper); }
.btn-primary:hover{ background:var(--ember); border-color:var(--ember); transform:translateY(-2px); }
.btn-ghost{ color:var(--paper); }
.btn-ghost:hover{ background:var(--blood); transform:translateY(-2px); }

/* ===== About ===== */
.about{
  background:var(--paper);
  color:var(--ink);
  padding: clamp(4rem, 8vw, 7rem) clamp(1.25rem, 8vw, 6rem);
  display:grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items:start;
}

.about-label .tag{
  display:inline-block;
  font-size:0.7rem;
  letter-spacing:0.12em;
  color:var(--blood);
  border:2px solid var(--blood);
  padding:0.4rem 0.7rem;
  transform:rotate(-2deg);
}

.about-copy h2{
  font-size:clamp(2rem, 4vw, 2.75rem);
  margin-bottom:1.25rem;
}
.about-copy p{
  max-width:60ch;
  margin-bottom:1rem;
  color:#3a332c;
}

/* ===== Episodes ===== */
.episodes{
  background:var(--ink);
  padding: clamp(4rem, 8vw, 7rem) clamp(1.25rem, 8vw, 6rem);
}
.section-head{ margin-bottom:3rem; }
.section-head h2{
  font-size:clamp(2rem, 4vw, 2.75rem);
  color:var(--paper);
}
.section-head p{ color:var(--ash); margin-top:0.5rem; }

.episode-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:2.5rem;
}

.episode{
  background:var(--bark);
  border:1px solid #2c241c;
  padding:2rem 1.75rem;
  border-radius:var(--radius);
  transition:transform .2s ease, border-color .2s ease;
}
.episode:hover{ transform:translateY(-4px); border-color:var(--blood); }

.ring{ position:relative; width:64px; height:64px; margin-bottom:1.25rem; }
.ring svg{ width:100%; height:100%; }
.ring svg circle{ fill:none; stroke:var(--ash); stroke-width:1.5; opacity:0.5; }
.ring svg circle:first-child{ stroke:var(--blood); opacity:0.8; }
.ring-num{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:0.72rem; color:var(--paper);
}

.episode h3{
  font-size:1.15rem;
  color:var(--paper);
  margin-bottom:0.6rem;
  line-height:1.25;
}
.episode p{ color:var(--ash); font-size:0.95rem; }

/* ===== Contact ===== */
.contact{
  background:var(--blood);
  padding: clamp(4.5rem, 10vw, 8rem) clamp(1.25rem, 8vw, 6rem);
  text-align:center;
}
.contact-inner{ max-width:640px; margin:0 auto; }
.contact h2{
  font-size:clamp(2.25rem, 5vw, 3.25rem);
  color:var(--paper);
  margin-bottom:1rem;
}
.contact-copy{ color:rgba(242,236,224,0.85); margin-bottom:2rem; }

.email-link{
  display:inline-block;
  font-family:"Arial Black", Arial, sans-serif;
  font-size:clamp(1.1rem, 3vw, 1.6rem);
  color:var(--paper);
  border-bottom:3px solid var(--ink);
  padding-bottom:0.35rem;
  word-break:break-word;
  transition:border-color .2s ease, color .2s ease;
}
.email-link:hover{ border-color:var(--paper); color:var(--ink); background:var(--paper); padding:0.3rem 0.6rem; }

.contact-note{
  margin-top:1.75rem;
  font-size:0.85rem;
  color:rgba(242,236,224,0.7);
}

/* ===== Footer ===== */
.site-footer{
  background:var(--ink);
  color:var(--ash);
  text-align:center;
  font-size:0.8rem;
  padding:2rem 1rem;
  border-top:1px solid #2c241c;
}

/* ===== Motion & accessibility ===== */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .episode, .btn{ transition:none; }
}

a:focus-visible, .episode:focus-visible{
  outline:2px solid var(--ember);
  outline-offset:3px;
}

/* ===== Responsive ===== */
@media (max-width: 760px){
  .about{ grid-template-columns:1fr; }
  .site-header nav{ gap:1rem; }
  .ring-bg{ opacity:0.5; }
}