<!--
  VEGAN SITHS — landing page
  Paste this entire block into a Podbean custom HTML area (or any page that accepts raw HTML).
  Everything is self-contained: fonts load from Google, the background + glitch title are pure CSS,
  so it works the moment you paste it. No image hosting required.

  >>> THE ONLY THING YOU MUST EDIT <
  Find the four lines marked  REPLACE_URL  below and paste in your real show links.
-->

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;900&family=EB+Garamond:ital@0;1&family=Oswald:wght@400;500;600;700&display=swap" rel="stylesheet">

<div class="vs-page">

  <!-- ===================== HERO ===================== -->
  <header class="vs-hero">
    <div class="vs-smoke" aria-hidden="true"></div>

    <!-- leaf accents, echoing the flier -->
    <svg class="vs-leaf vs-leaf--l" viewBox="0 0 120 200" aria-hidden="true"><path d="M60 195 C60 120 20 90 12 40 C50 55 75 95 60 195 Z M60 195 C60 130 100 100 108 50 C70 65 48 105 60 195 Z" fill="#46604a"/><path d="M60 195 L60 60" stroke="#2f4434" stroke-width="2"/></svg>
    <svg class="vs-leaf vs-leaf--r" viewBox="0 0 120 200" aria-hidden="true"><path d="M60 195 C60 120 20 90 12 40 C50 55 75 95 60 195 Z M60 195 C60 130 100 100 108 50 C70 65 48 105 60 195 Z" fill="#46604a"/><path d="M60 195 L60 60" stroke="#2f4434" stroke-width="2"/></svg>

    <p class="vs-eyebrow">A new true-crime podcast</p>

    <!-- OPTIONAL: to use your real cover art instead of the CSS wordmark,
         delete the <h1> block below and uncomment this, then paste your hosted image URL:
    <img class="vs-cover" src="REPLACE_WITH_HOSTED_ARTWORK_URL" alt="Vegan Siths">
    -->

    <h1 class="vs-wordmark" aria-label="Vegan Siths">
      <span class="vs-glitch" data-text="VEGAN">VEGAN</span>
      <span class="vs-glitch" data-text="SITHS">SITHS</span>
    </h1>

    <p class="vs-subtitle">The Rise and Fall of the Zizians</p>
  </header>

  <!-- ===================== SYNOPSIS ===================== -->
  <section class="vs-synopsis">
    <p class="vs-punch">Genius. Vegan. <span class="vs-red">Radicalized.</span></p>
    <p>
      They were some of the smartest people in the room, and they had done the math: the future
      was at stake, the stakes were infinite, and ordinary morality was for people who hadn't
      thought it through. So they thought it through.
    </p>
    <p>
      <em>Vegan Siths</em> follows the Zizians — a breakaway cell of Bay Area rationalists who
      trailed a brilliant, uncompromising figure called Ziz out past philosophy, past veganism,
      past sleep itself, and into a string of deaths scattered across three states. It's a series
      about big ideas, airtight logic pointed in exactly the wrong direction, and the unsettlingly
      short walk from "saving the world" to a body count.
    </p>
    <p class="vs-tag">New episodes are landing now.</p>
  </section>

  <!-- ===================== LISTEN ===================== -->
  <section class="vs-listen">
    <p class="vs-listen-label">Listen now</p>

    <!-- REPLACE_URL: paste your Apple Podcasts show link in href -->
    <a class="vs-btn" href="#" target="_blank" rel="noopener">
      <svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M12 2a10 10 0 0 0-1.6 19.87c.18.04.25-.08.25-.18v-1.6c-.83.18-1-.4-1-.4-.14-.35-.33-.44-.33-.44-.27-.18.02-.18.02-.18.3.02.46.31.46.31.27.46.7.33.87.25.03-.2.1-.33.2-.4-.66-.08-1.36-.33-1.36-1.47 0-.33.12-.6.31-.8-.03-.08-.13-.4.03-.83 0 0 .25-.08.82.31a2.8 2.8 0 0 1 1.5 0c.57-.39.82-.31.82-.31.16.43.06.75.03.83.2.2.31.47.31.8 0 1.14-.7 1.39-1.36 1.47.1.1.2.28.2.56v1.4c0 .1.07.22.25.18A10 10 0 0 0 12 2Z"/><circle cx="12" cy="12" r="3.2" fill="currentColor"/><path fill="currentColor" d="M12 6.4a5.6 5.6 0 0 0-3.1 10.26l.7-1.2a4.2 4.2 0 1 1 4.8 0l.7 1.2A5.6 5.6 0 0 0 12 6.4Z"/></svg>
      <span>Apple&nbsp;Podcasts</span>
    </a>

    <!-- REPLACE_URL: paste your Spotify show link in href -->
    <a class="vs-btn" href="#" target="_blank" rel="noopener">
      <svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm4.6 14.43a.62.62 0 0 1-.86.21c-2.35-1.44-5.3-1.76-8.8-.96a.62.62 0 1 1-.28-1.22c3.82-.87 7.1-.5 9.73 1.11.3.18.39.57.21.86Zm1.23-2.73a.78.78 0 0 1-1.07.26c-2.69-1.65-6.79-2.13-9.97-1.17a.78.78 0 1 1-.45-1.49c3.63-1.1 8.15-.56 11.24 1.33.37.23.49.71.25 1.07Zm.11-2.85C14.83 8.96 9.6 8.78 6.53 9.71a.94.94 0 1 1-.54-1.8c3.52-1.07 9.3-.86 12.97 1.32a.94.94 0 0 1-.96 1.6Z"/></svg>
      <span>Spotify</span>
    </a>

    <!-- REPLACE_URL: paste your YouTube channel/show link in href -->
    <a class="vs-btn" href="#" target="_blank" rel="noopener">
      <svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M23 12s0-3.2-.4-4.74a2.5 2.5 0 0 0-1.76-1.76C19.3 5.1 12 5.1 12 5.1s-7.3 0-8.84.4A2.5 2.5 0 0 0 1.4 7.26C1 8.8 1 12 1 12s0 3.2.4 4.74a2.5 2.5 0 0 0 1.76 1.76c1.54.4 8.84.4 8.84.4s7.3 0 8.84-.4a2.5 2.5 0 0 0 1.76-1.76C23 15.2 23 12 23 12ZM9.75 15.27V8.73L15.5 12l-5.75 3.27Z"/></svg>
      <span>YouTube</span>
    </a>

    <!-- REPLACE_URL: paste your Amazon Music / Audible show link in href -->
    <a class="vs-btn" href="#" target="_blank" rel="noopener">
      <svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M12 3a6 6 0 0 0-6 6v3.5a6 6 0 0 0 11.3 2.8.75.75 0 0 0-1.3-.74A4.5 4.5 0 0 1 7.5 12.5V9a4.5 4.5 0 0 1 9 0v3.5a.75.75 0 0 0 1.5 0V9a6 6 0 0 0-6-6Z"/><path fill="currentColor" d="M9.75 9.5a2.25 2.25 0 0 1 4.5 0v3a2.25 2.25 0 0 1-4.5 0v-3Z"/><path fill="currentColor" d="M3.3 18.1c5.2 3 12.2 3 17.4 0a.5.5 0 0 1 .6.78c-5.6 4-13 4-18.6 0a.5.5 0 0 1 .6-.78Z"/></svg>
      <span>Amazon&nbsp;Music&nbsp;/&nbsp;Audible</span>
    </a>
  </section>

  <!-- ===================== FOOTER ===================== -->
  <footer class="vs-footer">
    <span class="vs-domain">vegansiths.show</span>
  </footer>
</div>

<style>
  /* All styles scoped under .vs-page so they can't fight Podbean's theme */
  .vs-page{
    --ink:#0b0507;
    --oxblood:#3a1019;
    --blood:#c8202f;
    --blood-bright:#e6313f;
    --bone:#e9e1d2;
    --bone-dim:#b9ad99;
    --green:#6f8a63;
    --green-deep:#46604a;

    box-sizing:border-box;
    max-width:680px;
    margin:0 auto;
    padding:0 22px 64px;
    background:var(--ink);
    color:var(--bone);
    font-family:"EB Garamond",Georgia,serif;
    -webkit-font-smoothing:antialiased;
    overflow:hidden;
  }
  .vs-page *,.vs-page *::before,.vs-page *::after{box-sizing:border-box;}

  /* ---------- HERO ---------- */
  .vs-hero{
    position:relative;
    text-align:center;
    padding:60px 0 40px;
  }
  .vs-smoke{
    position:absolute; inset:-40px -200px 0;
    z-index:0; pointer-events:none;
    background:
      radial-gradient(120% 90% at 50% 8%, rgba(150,28,44,.42), transparent 55%),
      radial-gradient(80% 60% at 18% 40%, rgba(90,16,28,.55), transparent 60%),
      radial-gradient(80% 60% at 82% 38%, rgba(90,16,28,.55), transparent 60%),
      var(--ink);
    /* turbulent oxblood haze, echoing the flier's swirls */
    -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.012 0.02' numOctaves='3' seed='7'/><feColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1.4 -0.3'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
            mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.012 0.02' numOctaves='3' seed='7'/><feColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1.4 -0.3'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    opacity:.9;
  }
  .vs-hero > *{position:relative; z-index:1;}

  .vs-leaf{
    position:absolute; top:46%; width:70px; height:116px; z-index:1;
    opacity:.85; filter:drop-shadow(0 0 6px rgba(0,0,0,.6));
  }
  .vs-leaf--l{left:-6px; transform:translateY(-50%) rotate(-14deg);}
  .vs-leaf--r{right:-6px; transform:translateY(-50%) scaleX(-1) rotate(-14deg);}

  .vs-eyebrow{
    font-family:"Oswald",sans-serif; font-weight:500;
    text-transform:uppercase; letter-spacing:.42em;
    font-size:.72rem; color:var(--bone-dim);
    margin:0 0 30px; padding-left:.42em;
  }

  .vs-cover{display:block; width:100%; max-width:460px; margin:0 auto 8px; border-radius:2px;}

  /* ---------- GLITCH WORDMARK ---------- */
  .vs-wordmark{margin:0; line-height:.92;}
  .vs-glitch{
    display:block;
    font-family:"Cinzel",serif; font-weight:700;
    font-size:clamp(3.4rem,16vw,6.6rem);
    letter-spacing:.02em; color:var(--bone);
    position:relative;
    text-shadow:0 2px 0 rgba(0,0,0,.5);
  }
  /* chromatic aberration: red + cyan ghosts, like the flier lettering */
  .vs-glitch::before,.vs-glitch::after{
    content:attr(data-text);
    position:absolute; inset:0;
    pointer-events:none;
  }
  .vs-glitch::before{color:#e63a4a; transform:translate(-3px,0); mix-blend-mode:screen; opacity:.85;}
  .vs-glitch::after{color:#3fd4d8; transform:translate(3px,0);  mix-blend-mode:screen; opacity:.8;}
  /* scanline shimmer drifting through the type */
  .vs-glitch{
    background-image:repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.22) 3px 4px);
    -webkit-background-clip:text; background-clip:text;
    animation:vs-drift 5.5s steps(60) infinite;
  }
  @keyframes vs-drift{
    0%,92%,100%{transform:translate(0,0);}
    93%{transform:translate(-1.5px,0);}
    95%{transform:translate(1.5px,0);}
    97%{transform:translate(-1px,0);}
  }

  .vs-subtitle{
    font-family:"Cinzel",serif; font-weight:500;
    text-transform:uppercase; letter-spacing:.34em;
    font-size:clamp(.82rem,2.6vw,1.05rem);
    color:var(--green); margin:26px 0 0; padding-left:.34em;
  }

  /* ---------- SYNOPSIS ---------- */
  .vs-synopsis{
    max-width:560px; margin:8px auto 0;
    border-top:2px solid var(--blood);
    padding-top:38px;
  }
  .vs-punch{
    font-family:"Oswald",sans-serif; font-weight:700;
    text-transform:uppercase; letter-spacing:.02em;
    font-size:clamp(1.5rem,5.5vw,2.1rem);
    color:var(--bone); margin:0 0 26px; line-height:1.05;
  }
  .vs-red{color:var(--blood-bright);}
  .vs-synopsis p{font-size:1.16rem; line-height:1.62; margin:0 0 18px; color:#d8cfbe;}
  .vs-synopsis em{font-style:italic; color:var(--bone);}
  .vs-tag{
    font-family:"Oswald",sans-serif; font-weight:400;
    text-transform:uppercase; letter-spacing:.22em;
    font-size:.82rem; color:var(--bone-dim); margin-top:24px;
  }

  /* ---------- LISTEN BUTTONS ---------- */
  .vs-listen{max-width:440px; margin:46px auto 0;}
  .vs-listen-label{
    text-align:center;
    font-family:"Oswald",sans-serif; font-weight:500;
    text-transform:uppercase; letter-spacing:.4em;
    font-size:.74rem; color:var(--bone-dim);
    margin:0 0 22px; padding-left:.4em;
  }
  .vs-btn{
    display:flex; align-items:center; gap:16px;
    padding:15px 22px; margin:0 0 12px;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(233,225,210,.16);
    border-radius:3px;
    color:var(--bone); text-decoration:none;
    font-family:"Oswald",sans-serif; font-weight:500;
    text-transform:uppercase; letter-spacing:.13em; font-size:.95rem;
    transition:border-color .2s ease, background .2s ease, transform .12s ease;
  }
  .vs-btn svg{width:24px; height:24px; flex:0 0 24px; color:var(--bone-dim); transition:color .2s ease;}
  .vs-btn:hover{
    background:rgba(200,32,47,.08);
    border-color:var(--blood);
    transform:translateY(-1px);
  }
  .vs-btn:hover svg{color:var(--blood-bright);}
  .vs-btn:focus-visible{outline:2px solid var(--blood-bright); outline-offset:2px;}

  /* ---------- FOOTER ---------- */
  .vs-footer{text-align:center; margin-top:52px;}
  .vs-domain{
    font-family:"Oswald",sans-serif; font-weight:400;
    text-transform:lowercase; letter-spacing:.28em;
    font-size:.9rem; color:var(--bone-dim);
  }

  @media (max-width:480px){
    .vs-leaf{width:48px; height:80px;}
    .vs-synopsis p{font-size:1.08rem;}
  }
  @media (prefers-reduced-motion:reduce){
    .vs-glitch{animation:none;}
  }
</style>