/* Shared Wariables Podcast visual DNA */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --black: #0a0a0a;
  --ink: #0a0a0a;
  --paper: #fafaf7;
  --lime: #d4ff3a;          /* chartreuse accent */
  --lime-dim: #a8cc2e;
  --dim: rgba(255,255,255,0.55);
  --dimmer: rgba(255,255,255,0.32);
  --rule: rgba(255,255,255,0.14);
  --rule-strong: rgba(255,255,255,0.28);
  --font-sans: 'Space Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-serif: 'Instrument Serif', 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--black); color: #fff; font-family: var(--font-sans); }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { background: var(--lime); color: var(--black); }

/* emphasis word = Instrument Serif italic, tucked into bold sans headlines */
.em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.em-lime { color: var(--lime); }

/* Wariables-style button: pill, black with lime dot */
.wv-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  background: #fff; color: var(--black);
  font-family: var(--font-sans); font-weight: 500; font-size: 15px;
  border: none; cursor: pointer;
  transition: transform .2s ease, background .2s ease;
}
.wv-btn:hover { transform: translateY(-1px); }
.wv-btn .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); }
.wv-btn--dark { background: var(--black); color: #fff; border: 1px solid var(--rule-strong); }
.wv-btn--lime { background: var(--lime); color: var(--black); }

/* Diamond separator used in marquee */
.diamond { display: inline-block; width: 8px; height: 8px; background: var(--lime); transform: rotate(45deg); margin: 0 18px; vertical-align: middle; }

/* Duotone treatment (applied via CSS filters + mix-blend). Expects a dark
   image behind; use the svg duotone on <img class="duotone"> */
.duotone-wrap { position: relative; overflow: hidden; background: var(--black); }
.duotone-wrap img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1) brightness(0.9); }
.duotone-wrap::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(212,255,58,0.22), rgba(20,30,10,0.55));
  mix-blend-mode: screen;
  pointer-events: none;
}
.duotone-wrap--lime::after { background: linear-gradient(180deg, rgba(212,255,58,0.35), rgba(10,40,0,0.65)); mix-blend-mode: screen; }
.duotone-wrap--ink::after { background: linear-gradient(180deg, rgba(10,10,10,0.55), rgba(10,10,10,0.2)); mix-blend-mode: multiply; }

/* base scrollbar hide for mocks */
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; }
html, body { scrollbar-width: none; }