/**
 * Prisma site styles (extracted from the static mockup's inline <style>
 * block). Loaded SITEWIDE via prisma_enqueue_css() in functions.php — the
 * header/footer chrome here is the whole site's chrome (see header.php's
 * doc comment), not just the landing page's.
 *
 * Scoping: every selector below is prefixed so nothing leaks onto elements
 * styled by modkit's own global.css:
 *   - `.prisma-landing <selector>`      landing-page-only content, scoped to
 *     the content wrapper (<div class="prisma-landing"> — only rendered by
 *     page-templates/page-prisma.php, so these never apply elsewhere).
 *   - `body.prisma-landing <selector>`  sitewide header/nav/brand/socials/
 *     menu/footer chrome, which lives in header.php / footer.php OUTSIDE the
 *     .prisma-landing content wrapper (body_class('prisma-landing') is added
 *     in header.php, on every template).
 *   - `.prisma-page-content <selector>` the constrained-width wrapper used
 *     by every non-landing template (404.php, page.php, single.php,
 *     index.php) around `the_content()`/`the_excerpt()` — see that class
 *     below, right after the shared primitives block.
 *   - `:root` and `html{scroll-behavior:smooth}` are left unscoped on
 *     purpose: :root only ever matches <html> once, and a global smooth
 *     scroll is harmless sitewide (global.css does not set it).
 *
 * A few base primitives (.wrap width/gutter, the .btn family) are shared by
 * both the header/footer AND the page content in the original mockup, so
 * they are intentionally defined twice below (once per scope) — see the
 * "shared primitives" block right after the base reset.
 *
 * @package modkit
 */

:root {
  /* ---- Prisma OFFICIAL brand palette ---- */
  --amber: #ffc257;
  --coral: #ff8955;
  --mint: #2effd7;
  --pink: #ffb8bd;
  --sky: #70d5ff;
  --periwinkle: #92aeff; /* the wordmark blue */
  --black: #000000;

  /* derived neutrals */
  --bg: #ffffff; /* clean white */
  --bg-soft: #f4f7ff; /* faint sky-tinted panel */
  --ink: #000000; /* brand black for text */
  --ink-soft: #3a3a40;
  --ink-faint: #85868f;
  --line: #e7eaf2;
  --card: #ffffff;

  /* periwinkle shades for headings/accents */
  --periwinkle-deep: #6e8ff5;
  --periwinkle-ink: #5274e0;

  /* spectral set mapped to brand swatches (for tags, gradients) */
  --spectrum-1: #92aeff; /* periwinkle */
  --spectrum-2: #70d5ff; /* sky        */
  --spectrum-3: #2effd7; /* mint       */
  --spectrum-4: #ffc257; /* amber      */
  --spectrum-5: #ffb8bd; /* pink       */
  --spectrum-6: #ff8955; /* coral      */
  --rose: #ffb8bd;
  --peach: #ff8955;

  /* dark sections */
  --dark: #000000;
  --dark-2: #000000;

  --maxw: 1180px;
  --gut: clamp(20px, 5vw, 64px);

  --serif: "Fraunces", Georgia, serif;
  --sans: "Inter", system-ui, sans-serif;
}

.prisma-landing * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
body.prisma-landing {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.prisma-landing img {
  max-width: 100%;
  display: block;
}
.prisma-landing a {
  color: inherit;
  text-decoration: none;
}

.prisma-landing .wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--gut);
  padding-right: var(--gut);
}

/* ---- Shared primitives duplicated for the header/footer/mobile-menu scope ----
     (.wrap and the .btn family are used both inside the page content AND
     inside header.php / footer.php, which live outside the .prisma-landing
     wrapper — see file header comment above.) */
body.prisma-landing header,
body.prisma-landing header *,
body.prisma-landing .mobile-menu,
body.prisma-landing .mobile-menu *,
body.prisma-landing footer.site,
body.prisma-landing footer.site * {
  box-sizing: border-box;
}
/* margin/padding reset wrapped in :where() so it carries ZERO specificity —
     otherwise this compound selector (2 types + 2 classes) would outrank
     single-class layout rules like .foot-inner/.nav/.wrap below regardless
     of source order, silently zeroing their padding (this broke the footer's
     padding once already — keep this as :where(), don't "simplify" it back). */
:where(
  body.prisma-landing header *,
  body.prisma-landing .mobile-menu *,
  body.prisma-landing footer.site *
) {
  margin: 0;
  padding: 0;
}
/* WP menus assigned in Appearance → Menus render as ul/li — kill markers everywhere in site chrome. */
body.prisma-landing header nav :is(ul, ol, li),
body.prisma-landing .mobile-menu :is(ul, ol, li),
body.prisma-landing footer.site nav :is(ul, ol, li) {
  list-style: none;
  list-style-type: none;
}
body.prisma-landing header nav :is(ul, ol, li)::marker,
body.prisma-landing .mobile-menu :is(ul, ol, li)::marker,
body.prisma-landing footer.site nav :is(ul, ol, li)::marker {
  content: none;
}
body.prisma-landing header a,
body.prisma-landing .mobile-menu a,
body.prisma-landing footer.site a {
  color: inherit;
  text-decoration: none;
}
body.prisma-landing header .wrap,
body.prisma-landing footer.site .wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--gut);
  padding-right: var(--gut);
}
body.prisma-landing header .btn,
body.prisma-landing .mobile-menu .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.92rem;
  padding: 0.85em 1.5em;
  border-radius: 100px;
  border: 1px solid var(--ink);
  cursor: pointer;
  transition:
    transform 0.25s ease,
    background 0.25s ease,
    color 0.25s ease;
}
body.prisma-landing header .btn:hover,
body.prisma-landing .mobile-menu .btn:hover {
  transform: translateY(-2px);
}
body.prisma-landing header .btn-ghost,
body.prisma-landing .mobile-menu .btn-ghost {
  background: transparent;
  color: var(--ink);
}
body.prisma-landing header .btn-ghost:hover,
body.prisma-landing .mobile-menu .btn-ghost:hover {
  background: var(--ink);
  color: var(--bg);
}

/* ---- Generic content wrapper for every non-landing template (404.php,
   page.php, single.php, index.php) — the header is `position:fixed`
   everywhere, so this also supplies the top clearance the landing page
   otherwise gets from its hero's own padding. Prisma typography/colors
   already apply sitewide via body.prisma-landing above; this just adds the
   brand's max-width + gutter so plain content doesn't run edge-to-edge. ---- */
/* Top clearance for the fixed header — applied to <main> itself in
   header.php on every template except the landing page (which gets its own
   clearance from the hero section's padding), so any current or future
   template automatically clears the header without having to remember to
   add a class. */

.prisma-page-content {
  max-width: var(--maxw);
  margin: 0 auto;
  /* 72px fixed header + breathing room below the bar */
  padding: calc(72px + clamp(24px, 4vw, 48px)) var(--gut)
    clamp(64px, 8vw, 110px);
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
}
/* Readable measure for legal / text pages (Privacy Policy, etc.) */
.prisma-page-content article {
  margin-inline: auto;
}
/* Prose typography — :where() keeps specificity low so block/component classes can override. */
.prisma-page-content :where(h1) {
  font-family: var(--serif);
  font-size: clamp(2rem, 4.5vw, 2.75rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 0.85em;
}
.prisma-page-content :where(h2) {
  font-family: var(--serif);
  font-size: clamp(1.45rem, 3vw, 1.85rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 2.2em 0 0.65em;
}
.prisma-page-content :where(h2:first-child) {
  margin-top: 0;
}
.prisma-page-content :where(h3) {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2.5vw, 1.45rem);
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
  margin: 1.6em 0 0.5em;
}
.prisma-page-content :where(h4, h5, h6) {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  margin: 1.4em 0 0.45em;
}
.prisma-page-content :where(p, ul, ol) {
  margin: 0 0 1.15em;
}
.prisma-page-content :where(p:last-child, ul:last-child, ol:last-child) {
  margin-bottom: 0;
}
.prisma-page-content :where(ul) {
  list-style: disc;
  padding-left: 1.35em;
}
.prisma-page-content :where(ol) {
  list-style: decimal;
  padding-left: 1.35em;
}
.prisma-page-content :where(li) {
  margin-bottom: 0.35em;
}
.prisma-page-content :where(li > ul, li > ol) {
  margin-top: 0.35em;
  margin-bottom: 0.35em;
}
.prisma-page-content :where(strong, b) {
  font-weight: 600;
  color: var(--ink);
}
.prisma-page-content :where(em, i) {
  font-style: italic;
}
.prisma-page-content :where(a) {
  color: var(--periwinkle-ink);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: color 0.2s ease;
}
.prisma-page-content :where(a:hover) {
  color: var(--periwinkle-deep);
}
.prisma-page-content :where(blockquote) {
  margin: 1.5em 0;
  padding: 0.25em 0 0.25em 1.1em;
  border-left: 3px solid var(--periwinkle);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.12em;
  line-height: 1.55;
}
.prisma-page-content :where(hr) {
  margin: 2.5em 0;
  border: 0;
  border-top: 1px solid var(--line);
}
.prisma-page-content :where(table) {
  width: 100%;
  margin: 1.5em 0;
  border-collapse: collapse;
  font-size: 0.95em;
}
.prisma-page-content :where(th, td) {
  padding: 0.65em 0.85em;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.prisma-page-content :where(th) {
  font-weight: 600;
  color: var(--ink);
  background: var(--bg-soft);
}
/* WordPress privacy-policy boilerplate label */
.prisma-page-content :where(.privacy-policy-tutorial) {
  display: block;
  margin-bottom: 0.35em;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---- Spectral hairline: the signature motif ---- */
.prisma-landing .spectrum-rule {
  height: 2px;
  width: 100%;
  border: 0;
  background: linear-gradient(
    90deg,
    var(--spectrum-1),
    var(--spectrum-2),
    var(--spectrum-3),
    var(--spectrum-4),
    var(--spectrum-5)
  );
  opacity: 0.85;
}

.prisma-landing .eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Tags / pills */
.prisma-landing .tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.32em 0.7em;
  border-radius: 100px;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  background: transparent;
  line-height: 1;
}
.prisma-landing .tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 0.5em;
  background: var(--accent, var(--periwinkle));
}
/* Accent colors keyed to the prisma_tradition term slug (see
     prisma_render_card_tags() in inc/prisma-cpts.php: class = "t-{slug}").
     Both the mockup's original abbreviated classes (t-tao, t-bud, ...) and
     the full-word slugs WordPress generates for the seeded terms
     (Taoism -> taoism, Buddhism -> buddhism, ...) are covered, so editor-
     created terms with default WP slugs still get a color instead of
     silently falling back to --periwinkle. */
.prisma-landing .tag.t-tao,
.prisma-landing .tag.t-taoism {
  --accent: var(--spectrum-3);
}
.prisma-landing .tag.t-bud,
.prisma-landing .tag.t-buddhism {
  --accent: var(--spectrum-4);
}
.prisma-landing .tag.t-jud,
.prisma-landing .tag.t-judaism {
  --accent: var(--spectrum-2);
}
.prisma-landing .tag.t-marr,
.prisma-landing .tag.t-marriage {
  --accent: var(--spectrum-5);
}
.prisma-landing .tag.t-health {
  --accent: var(--spectrum-1);
}
.prisma-landing .tag.t-contemplation {
  --accent: var(--spectrum-1);
}
.prisma-landing .tag.t-tradition {
  --accent: var(--spectrum-2);
}

/* Buttons */
.prisma-landing .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.92rem;
  padding: 0.85em 1.5em;
  border-radius: 100px;
  border: 1px solid var(--ink);
  cursor: pointer;
  transition:
    transform 0.25s ease,
    background 0.25s ease,
    color 0.25s ease;
}
.prisma-landing .btn:hover {
  transform: translateY(-2px);
}
.prisma-landing .btn-solid {
  background: var(--ink);
  color: var(--bg);
}
.prisma-landing .btn-solid:hover {
  background: #000;
}
.prisma-landing .btn-ghost {
  background: transparent;
  color: var(--ink);
}
.prisma-landing .btn-ghost:hover {
  background: var(--ink);
  color: var(--bg);
}
/* green CTA (hero Tune In) */
.prisma-landing .btn-green {
  background: #2fbf71;
  color: #000000;
  border-color: #2fbf71;
  font-weight: 700;
}
.prisma-landing .btn-green:hover {
  background: #27a862;
  border-color: #27a862;
  color: #000000;
}
.prisma-landing .btn-purple {
  background: #7e6ce6;
  color: #ffffff;
  border-color: #7e6ce6;
  font-weight: 700;
}
.prisma-landing .btn-purple:hover {
  background: #6e5bd6;
  border-color: #6e5bd6;
  color: #ffffff;
}
/* per-section eyebrow color accents */
.prisma-landing .eyebrow.ey-purple {
  color: #7e6ce6;
}
.prisma-landing .eyebrow.ey-orange {
  color: #f08a3c;
}
.prisma-landing .eyebrow.ey-blue {
  color: #3f8ee0;
}
.prisma-landing .btn .arrow {
  transition: transform 0.25s ease;
}
.prisma-landing .btn:hover .arrow {
  transform: translateX(3px);
}

.prisma-landing .link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition:
    gap 0.25s ease,
    border-color 0.25s ease;
}
.prisma-landing .link-arrow:hover {
  gap: 0.8em;
  border-color: var(--ink);
}

/* ======================= HEADER ======================= */
body.prisma-landing header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background 0.35s ease,
    backdrop-filter 0.35s ease,
    border-color 0.35s ease;
}
body.prisma-landing header.scrolled {
  background: rgba(12, 12, 14, 0.94);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
body.prisma-landing header.menu-open {
  background: rgba(12, 12, 14, 0.98);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
body.prisma-landing.prisma-menu-open {
  overflow: hidden;
}
body.prisma-landing .nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
body.prisma-landing .brand {
  display: flex;
  align-items: center;
}
body.prisma-landing .brand-logo {
  height: 37.82px;
  width: auto;
  display: block;
  transition: filter 0.25s ease;
}
body.prisma-landing header.scrolled .brand-logo {
  filter: none;
}
body.prisma-landing .nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
}
/* transparent state: white nav text over video */
body.prisma-landing .nav-links a {
  font-size: 0.92rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  transition: color 0.2s;
  text-shadow: 0 1px 8px rgba(40, 40, 70, 0.35);
}
body.prisma-landing .nav-links a:hover {
  color: #fff;
}
body.prisma-landing header.scrolled .nav-links a {
  color: #ffffff;
  text-shadow: none;
}
body.prisma-landing header.scrolled .nav-links a:hover {
  color: #ffffff;
}
body.prisma-landing .nav-right {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}
body.prisma-landing .socials {
  display: flex;
  gap: 0.95rem;
  align-items: center;
}
body.prisma-landing .socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}
body.prisma-landing .socials a svg,
body.prisma-landing .socials a img {
  width: 20px;
  height: 20px;
  display: block;
}
body.prisma-landing .ico-apple {
  position: relative;
  display: inline-flex;
}
body.prisma-landing .ico-apple .ap-b {
  display: none;
}
body.prisma-landing header.scrolled .ico-apple .ap-w {
  display: block;
}
body.prisma-landing header.scrolled .ico-apple .ap-b {
  display: none;
}
body.prisma-landing .socials a {
  color: rgba(255, 255, 255, 0.85);
  transition:
    color 0.2s,
    transform 0.2s;
  text-shadow: 0 1px 8px rgba(40, 40, 70, 0.35);
}
body.prisma-landing .socials a:hover {
  color: #fff;
  transform: translateY(-2px);
}
body.prisma-landing header.scrolled .socials a {
  color: #ffffff;
  text-shadow: none;
}
body.prisma-landing header.scrolled .socials a:hover {
  color: #ffffff;
}
body.prisma-landing .menu-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  color: #fff;
}
body.prisma-landing header.scrolled .menu-toggle {
  color: #ffffff;
}
/* header CTA button adapts to transparent/solid states */
body.prisma-landing header .nav-right > .btn-ghost {
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
  background: transparent;
}
body.prisma-landing header .nav-right > .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}
body.prisma-landing header.scrolled .nav-right > .btn-ghost {
  border-color: rgba(255, 255, 255, 0.7);
  color: #ffffff;
}
body.prisma-landing header.scrolled .nav-right > .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}
body.prisma-landing .mobile-menu {
  display: none;
}

/* ======================= HERO ======================= */
.prisma-landing .hero {
  position: relative;
  padding: clamp(70px, 11vw, 140px) 0 clamp(60px, 8vw, 110px);
  overflow: hidden;
}

/* Background video — full screen (dark cinematic) */
.prisma-landing .hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
}
.prisma-landing .hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: linear-gradient(150deg, #161427 0%, #1d1a33 45%, #241d3a 100%);
}
.prisma-landing .hero-bg img,
.prisma-landing .hero-bg video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* .hero-video: no extra rule needed — `.hero-bg img,.hero-bg video` above already covers any <video> inside #heroBg, including the self-hosted hero video (see Task 5). */

/* Static banner poster + bottom-right play button */
.prisma-landing .hero-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.prisma-landing .hero-play {
  position: absolute;
  right: clamp(20px, 4vw, 48px);
  bottom: clamp(20px, 4vw, 48px);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
  border-radius: 100px;
  border: 0;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.92);
  color: #5a4fc0;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.5);
  transition:
    transform 0.25s ease,
    background 0.25s ease;
}
.prisma-landing .hero-play:hover {
  transform: scale(1.06);
  background: #fff;
}
/* The pill holds two independently-clickable icon buttons (play/pause,
   mute/unmute) rather than being one big button like the original mockup's
   single-action "click to load video" control — reset their button
   chrome so they read as plain icons inside the shared pill. */
.prisma-landing .hero-play .hp-btn {
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  margin: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
.prisma-landing .hero-play .hp-ico {
  display: grid;
  place-items: center;
}
.prisma-landing .hero-play .hp-ico svg {
  width: 16px;
  height: 16px;
  display: block;
}
.prisma-landing .hero-play .hp-play svg {
  margin-left: 1px;
}
.prisma-landing .hero-play .hp-divider {
  width: 1px;
  height: 18px;
  background: rgba(90, 79, 192, 0.35);
  flex: 0 0 auto;
}
/* YouTube background: scale a 16:9 iframe to cover the hero area */
.prisma-landing .hero-yt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
  width: 100vw;
  height: 56.25vw;
  min-height: 100%;
  min-width: 177.78vh;
}
/* darken + cool the footage so white text stays legible */
.prisma-landing .hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(14, 12, 28, 0.14) 0%,
    rgba(18, 15, 34, 0.1) 55%,
    rgba(22, 18, 40, 0.18) 100%
  );
}
/* scrim: just enough on the left to keep the copy legible */
.prisma-landing .hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(12, 10, 24, 0.55) 0%,
      rgba(12, 10, 24, 0.34) 34%,
      rgba(12, 10, 24, 0.12) 62%,
      rgba(12, 10, 24, 0) 100%
    ),
    linear-gradient(0deg, rgba(12, 10, 24, 0.28), rgba(12, 10, 24, 0) 58%);
}
.prisma-landing .hero-refract {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(
      900px 520px at 82% 4%,
      rgba(146, 174, 255, 0.18),
      transparent 60%
    ),
    radial-gradient(
      820px 560px at 96% 40%,
      rgba(126, 108, 230, 0.16),
      transparent 62%
    ),
    radial-gradient(
      700px 560px at 64% 82%,
      rgba(46, 255, 215, 0.1),
      transparent 60%
    );
}
.prisma-landing .hero-inner {
  position: relative;
  z-index: 3;
  max-width: 780px;
}
.prisma-landing .hero .eyebrow {
  color: #a9b8ff;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}
@media (max-width: 760px) {
  .prisma-landing .hero {
    min-height: 100vh;
    padding-top: clamp(48px, 12vw, 90px);
  }
  .prisma-landing .hero-scrim {
    background: linear-gradient(
      0deg,
      rgba(12, 10, 24, 0.62) 0%,
      rgba(12, 10, 24, 0.4) 52%,
      rgba(12, 10, 24, 0.18) 100%
    );
  }
}
.prisma-landing .hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.7rem, 7vw, 4.7rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 0.5em 0 0.55em;
  color: #ffffff;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}
.prisma-landing .hero h1 .skip {
  font-style: normal;
  color: #ffffff;
}
.prisma-landing .hero .lede {
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: rgba(255, 255, 255, 0.82);
  max-width: 48ch;
  margin-bottom: 2.2em;
  font-weight: 400;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.35);
}
.prisma-landing .hero-cta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
/* ghost button reads white over the dark hero video */
.prisma-landing .hero-cta .btn-ghost {
  border-color: rgba(255, 255, 255, 0.7);
  color: #ffffff;
  background: transparent;
}
.prisma-landing .hero-cta .btn-ghost:hover {
  background: #ffffff;
  color: var(--ink);
}

/* (brand illustration removed per brand direction) */

/* ======================= SECTION SHELL ======================= */
.prisma-landing section {
  position: relative;
}
.prisma-landing .band {
  padding: clamp(64px, 9vw, 120px) 0;
}
.prisma-landing .sec-head {
  max-width: 640px;
  margin-bottom: clamp(36px, 5vw, 60px);
}
.prisma-landing .sec-head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 4.6vw, 3.1rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
  margin: 0.35em 0 0.5em;
}
.prisma-landing .sec-head p {
  color: var(--ink-soft);
  font-size: 1.06rem;
  max-width: 54ch;
}
.prisma-landing .sec-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.prisma-landing .sec-head.center p {
  margin-left: auto;
  margin-right: auto;
}

/* ======================= INTRO + VIDEO ======================= */
.prisma-landing .intro {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(
      820px 520px at 6% 12%,
      rgba(112, 213, 255, 0.3),
      transparent 60%
    ),
    radial-gradient(
      720px 560px at 96% 22%,
      rgba(255, 184, 189, 0.3),
      transparent 62%
    ),
    radial-gradient(
      680px 520px at 78% 96%,
      rgba(255, 194, 87, 0.26),
      transparent 60%
    ),
    radial-gradient(
      700px 600px at 30% 100%,
      rgba(146, 174, 255, 0.26),
      transparent 64%
    ),
    linear-gradient(120deg, #f4f7ff 0%, #fbf4ff 100%);
}
.prisma-landing .intro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    /* PRISMA_ASSET_BASE */ url("../assets/prisma/img/intro-texture-bg.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.16;
  mix-blend-mode: multiply;
}
.prisma-landing .intro-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.prisma-landing .intro-copy h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  line-height: 1.08;
  margin: 0.3em 0 0.6em;
}
.prisma-landing .intro-copy p {
  color: var(--ink-soft);
  font-size: 1.1rem;
  max-width: 42ch;
}
.prisma-landing .video-frame {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 30px 70px -40px rgba(44, 46, 69, 0.5);
  background: #000;
  aspect-ratio: 16/9;
}
.prisma-landing .video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Poster placeholder shown until the video is played */
.prisma-landing .video-frame .vf-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  border: 0;
  padding: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: grid;
  place-items: center;
  transition: opacity 0.3s ease;
}
.prisma-landing .video-frame .vf-poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(20, 16, 40, 0.1);
  transition: background 0.25s ease;
}
.prisma-landing .video-frame .vf-poster:hover::after {
  background: rgba(20, 16, 40, 0.3);
}
.prisma-landing .video-frame .vf-play {
  position: relative;
  z-index: 1;
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  color: #ffffff;
  display: grid;
  place-items: center;
  box-shadow: none;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.45));
  transition:
    transform 0.25s ease,
    opacity 0.25s ease;
}
.prisma-landing .video-frame .vf-poster:hover .vf-play {
  transform: scale(1.12);
}
.prisma-landing .video-frame .vf-play svg {
  width: 58px;
  height: 58px;
  margin-left: 0;
}
@media (max-width: 760px) {
  .prisma-landing .intro-grid {
    grid-template-columns: 1fr;
  }
}

/* ======================= VOICES ======================= */
.prisma-landing .voices-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.6vw, 32px);
}
.prisma-landing .voice-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}
.prisma-landing .voice-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 26px 50px -34px rgba(44, 46, 69, 0.45);
}
.prisma-landing .voice-photo {
  aspect-ratio: 4/5;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.prisma-landing .voice-photo .vp-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.prisma-landing .voice-photo .ph-name {
  font-family: var(--serif);
  font-size: 3.6rem;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}
.prisma-landing .voice-photo .tags-row {
  position: absolute;
  left: 14px;
  top: 14px;
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  z-index: 2;
}
.prisma-landing .voice-photo .tag {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(4px);
}
.prisma-landing .voice-body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}
.prisma-landing .voice-body h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.42rem;
  line-height: 1.1;
}
.prisma-landing .voice-body .role {
  color: var(--ink-faint);
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
}
.prisma-landing .voice-actions {
  margin-top: auto;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding-top: 1rem;
}
.prisma-landing .chip {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.5em 0.85em;
  border-radius: 100px;
  border: 1px solid var(--line);
  transition:
    background 0.2s,
    color 0.2s;
}
.prisma-landing .chip:hover {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.prisma-landing .voice-explore {
  margin-top: 0.2rem;
}
@media (max-width: 860px) {
  .prisma-landing .voices-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  /* horizontal side-scroll: cards slide one after another */
  .prisma-landing .voices-grid {
    display: flex;
    grid-template-columns: none;
    gap: 16px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 6px;
    /* let cards bleed to the screen edge, aligned to the page gutter */
    margin-left: calc(var(--gut) * -1);
    margin-right: calc(var(--gut) * -1);
    padding-left: var(--gut);
    padding-right: var(--gut);
  }
  .prisma-landing .voices-grid::-webkit-scrollbar {
    display: none;
  }
  .prisma-landing .voices-grid .voice-card {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }
}

/* gradient fills for photo placeholders */
.prisma-landing .g1 {
  background: linear-gradient(150deg, #9fe0e8, #6c78cc);
}
.prisma-landing .g2 {
  background: linear-gradient(150deg, #fce4d8, #e49ccc);
}
.prisma-landing .g3 {
  background: linear-gradient(150deg, #c9c0f0, #6c78cc);
}
.prisma-landing .g4 {
  background: linear-gradient(150deg, #9cd4e8, #8193d4);
}
.prisma-landing .g5 {
  background: linear-gradient(150deg, #fcc0b4, #e49ccc);
}

/* ======================= PODCAST ======================= */
.prisma-landing .podcast {
  position: relative;
  color: var(--bg);
  background: #6e63c7;
  isolation: isolate;
}
.prisma-landing .podcast::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: auto;
  bottom: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(18, 14, 40, 0.42) 0%,
    rgba(18, 14, 40, 0.22) 30%,
    rgba(18, 14, 40, 0) 55%
  );
}
.prisma-landing .podcast::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: auto;
  bottom: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    /* PRISMA_ASSET_BASE */ url("../assets/prisma/img/podcast-bg-texture.jpg");
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
}
.prisma-landing .podcast .eyebrow {
  color: #ffc83d;
}
.prisma-landing .podcast .sec-head p {
  color: rgba(251, 250, 255, 0.7);
}
/* Podcast intro: text left, follow row bottom-right, on one band to save height */
.prisma-landing .podcast .sec-head {
  max-width: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 56px);
  flex-wrap: nowrap;
}
.prisma-landing .podcast .sec-head .sh-text {
  max-width: 640px;
  flex: 1 1 auto;
  min-width: 0;
}
.prisma-landing .podcast .sec-head .follow-row {
  margin-top: 0;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.8rem;
}
.prisma-landing .podcast .sec-head .follow-row .label {
  text-align: right;
  white-space: nowrap;
}
@media (max-width: 860px) {
  .prisma-landing .podcast .sec-head {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .prisma-landing .podcast .sec-head .follow-row {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
  }
  .prisma-landing .podcast .sec-head .follow-row .label {
    white-space: normal;
    text-align: center;
    width: 100%;
  }
  .prisma-landing .podcast .sec-head .follow-row .plat {
    width: fit-content;
    max-width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.45rem 0.7rem;
    padding: 0.45rem 0.65rem;
    margin-inline: auto;
  }
  .prisma-landing .plat-row-break {
    display: block;
    flex-basis: 100%;
    width: 0;
    height: 0;
    overflow: hidden;
  }
}
.prisma-landing .podcast .sec-head h2 {
  color: var(--bg);
}
.prisma-landing .follow-row {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
  margin-top: 1.8rem;
}
.prisma-landing .follow-row .label {
  font-size: 0.9rem;
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.prisma-landing .plat {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: center;
  background: rgba(255, 255, 255, 0.096);
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 0.5rem 0.7rem;
  border-radius: 100px;
  backdrop-filter: blur(4px);
}
.prisma-landing .plat-row-break {
  display: none;
}
.prisma-landing .plat a {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0.35em 0.2em;
  border-radius: 0;
  border: 0;
  color: #ffffff;
  background: transparent;
  transition:
    color 0.2s,
    font-weight 0.2s;
}
.prisma-landing .plat a svg,
.prisma-landing .plat a img {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  transition: color 0.2s;
}
.prisma-landing .plat a:hover {
  color: #000000;
  font-weight: 800;
}
/* reserve the bold width so the row doesn't shift on hover */
.prisma-landing .plat a {
  position: relative;
}
.prisma-landing .plat a span.lbl {
  display: inline-block;
}
.prisma-landing .plat a span.lbl::after {
  content: attr(data-t);
  font-weight: 800;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  display: block;
  pointer-events: none;
}

.prisma-landing .ep-featured {
  margin-top: clamp(36px, 5vw, 56px);
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.prisma-landing .ep-video {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 16/9;
  background: #000;
  border: 0;
}
.prisma-landing .ep-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.prisma-landing .ep-video .epv-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  border: 0;
  padding: 0;
  /* Branded gradient fallback for episodes without a Preview Image yet —
     a longhand background-image so the inline `background-image:url(...)`
     the template adds for real photos (see .epb-photo below) overrides just
     this one property instead of the whole background shorthand. */
  background-image: linear-gradient(
    135deg,
    rgba(44, 46, 69, 0.92),
    rgba(60, 42, 85, 0.82)
  );
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
  transition:
    opacity 0.3s,
    background-image 0.25s;
}
.prisma-landing .ep-video .epv-poster:not(.epb-photo):hover {
  background-image: linear-gradient(
    135deg,
    rgba(44, 46, 69, 0.75),
    rgba(155, 143, 214, 0.65)
  );
}
.prisma-landing .ep-video .epv-poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(20, 16, 40, 0.12);
  transition: background 0.25s;
}
.prisma-landing .ep-video .epv-poster:hover::after {
  background: rgba(20, 16, 40, 0.04);
}
.prisma-landing .ep-video .epv-play {
  position: relative;
  z-index: 1;
  color: #fff;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.45));
  transition: transform 0.25s;
}
.prisma-landing .ep-video .epv-poster:hover .epv-play {
  transform: scale(1.12);
}
.prisma-landing .ep-video .epv-play svg {
  width: 58px;
  height: 58px;
  margin-left: 2px;
}
/* Tradition name inside the featured-episode label — colored per tradition
   like the .tag dots elsewhere, per the original mockup
   (prisma-landing_mobile.html:985 hardcoded this as an inline style). */
.prisma-landing .ep-feat-meta .feat-label .cat.t-tao,
.prisma-landing .ep-feat-meta .feat-label .cat.t-taoism {
  color: var(--spectrum-3);
}
.prisma-landing .ep-feat-meta .feat-label .cat.t-bud,
.prisma-landing .ep-feat-meta .feat-label .cat.t-buddhism {
  color: var(--spectrum-4);
}
.prisma-landing .ep-feat-meta .feat-label .cat.t-jud,
.prisma-landing .ep-feat-meta .feat-label .cat.t-judaism {
  color: var(--spectrum-2);
}
.prisma-landing .ep-feat-meta .feat-label .cat.t-marr,
.prisma-landing .ep-feat-meta .feat-label .cat.t-marriage {
  color: var(--spectrum-5);
}
.prisma-landing .ep-feat-meta .feat-label .cat.t-health {
  color: var(--spectrum-1);
}
.prisma-landing .ep-feat-meta .feat-label .cat.t-contemplation {
  color: var(--spectrum-1);
}
.prisma-landing .ep-feat-meta .feat-label .cat.t-tradition {
  color: var(--spectrum-2);
}
.prisma-landing .ep-feat-meta .feat-label {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 1rem;
  display: block;
}
.prisma-landing .ep-feat-meta h3 {
  color: #fff;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.1;
  margin: 0.5rem 0 0.6rem;
}
.prisma-landing .ep-feat-meta .with {
  color: rgba(251, 250, 255, 0.7);
  font-size: 1.05rem;
}
@media (max-width: 820px) {
  .prisma-landing .ep-featured {
    grid-template-columns: 1fr;
  }
}

/* ---- Filter bar (by tag) ---- */
.prisma-landing .ep-toolbar {
  margin-top: clamp(44px, 5vw, 68px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-bottom: 1.3rem;
  border-bottom: 1px solid rgba(251, 250, 255, 0.14);
}
.prisma-landing .ep-toolbar .lt-label {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(251, 250, 255, 0.6);
  font-weight: 600;
}
.prisma-landing .ep-filters {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.prisma-landing .ep-filters button {
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 0.5em 0.95em;
  border-radius: 100px;
  cursor: pointer;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  background: transparent;
  color: #ffffff;
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s;
}
.prisma-landing .ep-filters button:hover {
  background: var(--sky);
  color: var(--black);
  border-color: var(--sky);
}
.prisma-landing .ep-filters button.active {
  background: #ffffff;
  color: #5a4fc0;
  border-color: #ffffff;
}

/* ---- Episode grid: compact cards side by side ---- */
.prisma-landing .ep-list {
  margin-top: 1.4rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 30px);
}
.prisma-landing .ep-row {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 0;
  border-bottom: 0;
  container-type: inline-size;
}
.prisma-landing .ep-row.hidden {
  display: none;
}
.prisma-landing .ep-row-thumb {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: auto;
  height: calc(100cqw * 9 / 16 + 5px);
  width: 100%;
  background-color: #000;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid rgba(251, 250, 255, 0.15);
}
.prisma-landing .ep-row-thumb iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.prisma-landing .ep-thumb-btn {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  background: linear-gradient(
    135deg,
    rgba(44, 46, 69, 0.85),
    rgba(60, 42, 85, 0.7)
  );
  color: rgba(251, 250, 255, 0.9);
  font-size: 1.3rem;
  border: 0;
  display: grid;
  place-items: center;
  transition: background 0.25s;
}
.prisma-landing .ep-thumb-btn:hover {
  background: linear-gradient(
    135deg,
    rgba(44, 46, 69, 0.7),
    rgba(155, 143, 214, 0.6)
  );
}
/* thumbnails that carry a real photo: dim overlay instead of opaque gradient */
.prisma-landing .ep-thumb-btn.epb-photo {
  background: rgba(20, 16, 40, 0.18);
}
.prisma-landing .ep-thumb-btn.epb-photo:hover {
  background: rgba(20, 16, 40, 0.32);
}
.prisma-landing .ep-row-main {
  min-width: 0;
}
.prisma-landing .ep-row-main .ep-tags {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 0.55rem;
}
.prisma-landing .ep-row-main .ep-tags .tag {
  color: rgba(251, 250, 255, 0.85);
  border-color: rgba(251, 250, 255, 0.28);
}
.prisma-landing .ep-row-main h4 {
  color: #fff;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.1rem, 1.7vw, 1.32rem);
  line-height: 1.18;
  margin-bottom: 0.35rem;
}
.prisma-landing .ep-row-main .with {
  color: rgba(251, 250, 255, 0.6);
  font-size: 0.88rem;
}
.prisma-landing .ep-row-date {
  color: rgba(251, 250, 255, 0.45);
  font-size: 0.78rem;
  font-weight: 500;
  white-space: nowrap;
}
.prisma-landing .ep-play {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  white-space: nowrap;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.7em 1.2em;
  border-radius: 100px;
  border: 1px solid rgba(251, 250, 255, 0.4);
  color: var(--bg);
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s;
}
.prisma-landing .ep-play:hover {
  background: var(--bg);
  color: var(--ink);
}
.prisma-landing .ep-play svg {
  width: 13px;
  height: 13px;
}
@media (max-width: 820px) {
  .prisma-landing .ep-list {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .prisma-landing .ep-list {
    grid-template-columns: 1fr;
  }
  .prisma-landing .ep-row-date {
    display: none;
  }
}

.prisma-landing .ep-empty {
  padding: 2.5rem 0;
  color: rgba(251, 250, 255, 0.55);
  font-size: 0.95rem;
  display: none;
}
.prisma-landing .load-more {
  margin-top: 2.6rem;
  text-align: center;
}
.prisma-landing .load-more .btn {
  background: transparent;
  border: 1px solid #ffffff;
  color: #ffffff;
}
.prisma-landing .load-more .btn:hover {
  background: #ffffff;
  color: var(--ink);
}
.prisma-landing .load-more .btn.done {
  opacity: 0.4;
  pointer-events: none;
}

/* ======================= JOURNAL ======================= */
.prisma-landing .journal-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  flex-wrap: wrap;
}
.prisma-landing .feature-article {
  margin-top: clamp(34px, 4vw, 52px);
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: stretch;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
.prisma-landing .feature-article .fa-photo {
  position: relative;
  min-height: 300px;
  display: grid;
  place-items: center;
}
.prisma-landing .feature-article .fa-photo .mark {
  font-family: var(--serif);
  color: rgba(255, 255, 255, 0.9);
  font-size: 1rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 500;
}
.prisma-landing .feature-article .fa-body {
  padding: clamp(28px, 4vw, 46px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}
.prisma-landing .feature-article .fa-body .feat-label {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--periwinkle);
  font-weight: 600;
}
.prisma-landing .feature-article .fa-body h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.12;
}
.prisma-landing .feature-article .fa-body .with {
  color: var(--ink-faint);
  font-size: 1rem;
}
@media (max-width: 780px) {
  .prisma-landing .feature-article {
    grid-template-columns: 1fr;
  }
}

.prisma-landing .entries {
  margin-top: clamp(40px, 5vw, 64px);
}
.prisma-landing .entries .lt-label {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 600;
  margin-bottom: 1.6rem;
}
.prisma-landing .entry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(22px, 2.6vw, 34px);
}
/* --- Big featured entry: gradient block sized to match ONE small card photo --- */
.prisma-landing .feature-entry {
  display: flex;
  align-items: stretch;
  gap: clamp(28px, 4vw, 56px);
  margin-bottom: clamp(34px, 4vw, 52px);
  transition: transform 0.3s ease;
}
.prisma-landing .feature-entry:hover {
  transform: translateY(-4px);
}
/* one small card photo width = (100% - 2*gap)/3 ; featured block is 30% bigger, same 3/2 landscape ratio */
.prisma-landing .feature-entry .fe-photo {
  flex: 0 0 auto;
  width: calc((100% - 2 * clamp(22px, 2.6vw, 34px)) / 3 * 1.3);
  aspect-ratio: 3/2;
  border-radius: 12px;
  overflow: hidden;
  display: grid;
  place-items: center;
  position: relative;
}
.prisma-landing .feature-entry .fe-photo .mark {
  font-family: var(--serif);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.95rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 500;
}
.prisma-landing .feature-entry .fe-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}
.prisma-landing .feature-entry .fe-body .feat-label {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--periwinkle);
  font-weight: 600;
}
.prisma-landing .feature-entry .fe-body h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  line-height: 1.12;
}
.prisma-landing .feature-entry .fe-body .with {
  color: var(--ink-faint);
  font-size: 1rem;
}
@media (max-width: 780px) {
  .prisma-landing .feature-entry {
    flex-direction: column;
  }
  .prisma-landing .feature-entry .fe-photo {
    width: 100%;
  }
}
.prisma-landing .entry {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  transition: transform 0.3s ease;
}
.prisma-landing .entry:hover {
  transform: translateY(-4px);
}
.prisma-landing .entry .e-photo {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 3/2;
  display: grid;
  place-items: center;
}
.prisma-landing .entry .e-photo .mark {
  font-family: var(--serif);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.8rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}
.prisma-landing .entry .e-tags {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.prisma-landing .entry h4 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.28rem;
  line-height: 1.18;
}
.prisma-landing .entry .with {
  color: var(--ink-faint);
  font-size: 0.9rem;
}
@media (max-width: 860px) {
  .prisma-landing .entry-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .prisma-landing .entry-grid {
    grid-template-columns: 1fr;
  }
}
.prisma-landing .entries-cta {
  margin-top: clamp(28px, 3.5vw, 44px);
  display: flex;
  justify-content: center;
}

/* ======================= ABOUT (full visible image banner, centered copy) ======================= */
.prisma-landing .about {
  position: relative;
  overflow: hidden;
  background: #edeaef;
  min-height: clamp(540px, 72vh, 760px);
  display: flex;
  align-items: center;
}
.prisma-landing .about-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.prisma-landing .about-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
}
/* full-color artwork, no veil */
.prisma-landing .about-wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(237, 234, 239, 0.92) 0%,
    rgba(237, 234, 239, 0.72) 32%,
    rgba(237, 234, 239, 0.18) 60%,
    rgba(237, 234, 239, 0) 82%
  );
}
.prisma-landing .about-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  text-align: left;
}
.prisma-landing .about-inner > * {
  max-width: 640px;
  margin-left: 0;
  margin-right: 0;
}
.prisma-landing .about-inner .eyebrow {
  display: block;
  margin-bottom: 1.4rem;
}
.prisma-landing .about-inner .about-cta {
  display: flex;
  justify-content: flex-start;
}
.prisma-landing .about-inner p {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(0.95rem, 1.85vw, 1.3rem);
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 1.2em;
  text-shadow: 0 1px 10px rgba(237, 234, 239, 0.9);
}
.prisma-landing .about-inner p .em {
  font-style: italic;
  color: var(--periwinkle-deep);
}
.prisma-landing .about-inner .coda {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(1.05rem, 2.1vw, 1.45rem);
  line-height: 1.46;
  color: var(--ink);
  margin: 1.5rem 0 2rem;
}
.prisma-landing .about-cta {
  margin-top: 0.5rem;
}
/* About eyebrow + ghost button */
.prisma-landing .about-inner .eyebrow.ey-purple {
  color: #7e6ce6;
}
.prisma-landing .about-cta .btn-ghost {
  border-color: var(--ink);
  color: var(--ink);
  background: transparent;
}
.prisma-landing .about-cta .btn-ghost:hover {
  background: #f08a3c;
  border-color: #f08a3c;
  color: #ffffff;
}

/* ======================= FAQ ======================= */
.prisma-landing .faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  max-width: 860px;
  margin: 0 auto;
  border-top: 1px solid var(--line);
}
.prisma-landing details.faq {
  border-bottom: 1px solid var(--line);
}
.prisma-landing details.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.4rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  font-family: var(--serif);
  font-size: clamp(1.025rem, 2.05vw, 1.275rem);
  font-weight: 500;
}
.prisma-landing details.faq summary::-webkit-details-marker {
  display: none;
}
.prisma-landing details.faq .ic {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  border-radius: 0;
  border: 0;
  position: relative;
  transition: transform 0.3s;
}
.prisma-landing details.faq .ic::before,
.prisma-landing details.faq .ic::after {
  content: "";
  position: absolute;
  background: var(--ink);
  transition:
    opacity 0.25s,
    background 0.25s;
}
.prisma-landing details.faq .ic::before {
  width: 11px;
  height: 2px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.prisma-landing details.faq .ic::after {
  width: 2px;
  height: 11px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.prisma-landing details.faq[open] .ic {
  background: transparent;
  transform: rotate(180deg);
}
.prisma-landing details.faq[open] .ic::before {
  background: var(--ink);
}
.prisma-landing details.faq[open] .ic::after {
  opacity: 0;
}
.prisma-landing details.faq[open] .ic::before {
  background: var(--ink);
}
.prisma-landing details.faq .answer {
  padding: 0 0 1.5rem;
  color: var(--ink-soft);
  font-size: 1.02rem;
  max-width: 68ch;
  line-height: 1.65;
}

/* ======================= FOOTER CTA ======================= */
.prisma-landing .footer-cta {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    135deg,
    #9b7be8 0%,
    #7e6ce6 38%,
    #6e78cc 70%,
    #5a6ad8 100%
  );
  color: #ffffff;
  text-align: center;
  padding-top: clamp(44px, 6.3vw, 84px);
  padding-bottom: clamp(126px, 18.2vw, 238px);
}
.prisma-landing .footer-cta .fc-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      60% 80% at 84% 12%,
      rgba(255, 178, 189, 0.3),
      transparent 64%
    ),
    radial-gradient(
      58% 74% at 12% 90%,
      rgba(112, 213, 255, 0.26),
      transparent 66%
    ),
    radial-gradient(
      50% 60% at 70% 96%,
      rgba(255, 194, 87, 0.22),
      transparent 68%
    );
}
.prisma-landing .footer-cta .fc-png {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
  mix-blend-mode: normal;
}
.prisma-landing .footer-cta .wrap {
  position: relative;
  z-index: 1;
}
.prisma-landing .footer-cta h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.05;
  margin-bottom: 0.5em;
  color: #ffffff;
  text-shadow: none;
}
.prisma-landing .footer-cta p {
  color: #ffffff;
  font-weight: 400;
  max-width: none;
  margin: 0 auto 2.4rem;
  text-shadow: none;
}
.prisma-landing .signup {
  display: flex;
  gap: 0.7rem;
  max-width: 540px;
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: center;
}
.prisma-landing .signup input {
  flex: 1 1 180px;
  min-width: 0;
  padding: 0.95em 1.2em;
  border-radius: 100px;
  border: 0;
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 400;
}
.prisma-landing .signup input::placeholder {
  color: #ffffff;
  opacity: 0.85;
  font-weight: 400;
}
.prisma-landing .signup input:focus {
  outline: none;
}
.prisma-landing .signup .btn {
  background: var(--bg);
  color: var(--ink);
  border-color: var(--bg);
  flex: 0 0 auto;
  font-weight: 700;
}
.prisma-landing .signup .btn:hover {
  background: #fff;
}
.prisma-landing .cta-socials {
  margin-top: clamp(6rem, 10vw, 9rem);
}
.prisma-landing .cta-socials .label {
  font-size: 0.95rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #ffffff;
  font-weight: 800;
  display: block;
  margin-bottom: 1.6rem;
}
.prisma-landing .cta-socials .row {
  display: inline-flex;
  gap: 1.4rem;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 0.85rem 1.5rem;
  border-radius: 100px;
  backdrop-filter: blur(4px);
}
.prisma-landing .cta-socials a {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 600;
  transition:
    color 0.2s,
    transform 0.2s;
}
.prisma-landing .cta-socials a svg,
.prisma-landing .cta-socials a img {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  transition: transform 0.25s ease;
}
.prisma-landing .cta-socials a:hover {
  color: #000000;
  transform: translateY(-2px);
}
.prisma-landing .cta-socials a:hover svg,
.prisma-landing .cta-socials a:hover img {
  transform: scale(1.45);
}

/* ======================= FOOTER ======================= */
body.prisma-landing footer.site {
  background: var(--dark-2);
  color: var(--periwinkle);
  border-top: 1px solid rgba(146, 174, 255, 0.18);
}
body.prisma-landing .foot-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 2.4rem var(--gut);
}
body.prisma-landing .foot-links {
  display: flex;
  gap: 1.4rem;
  flex-wrap: wrap;
}
body.prisma-landing .foot-links__list {
  display: flex;
  gap: 1.4rem;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
body.prisma-landing .foot-links__list li {
  list-style: none;
  margin: 0;
  padding: 0;
}
body.prisma-landing .foot-links a {
  font-size: 0.85rem;
  color: var(--periwinkle);
  transition: color 0.2s;
}
body.prisma-landing .foot-links a:hover {
  color: #ffffff;
}
body.prisma-landing .foot-copy {
  font-size: 0.82rem;
  color: var(--periwinkle);
}
body.prisma-landing .foot-brand {
  display: block;
  line-height: 0;
  flex-shrink: 0;
}
body.prisma-landing .foot-logo {
  height: 19.89px;
  width: auto;
  display: block;
  opacity: 0.95;
}

/* ---- Journal filter bar (light) ---- */
.prisma-landing .jr-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-bottom: 1.3rem;
  margin-bottom: clamp(28px, 3.5vw, 44px);
  border-bottom: 1px solid var(--line);
}
.prisma-landing .jr-toolbar .jr-lt-label {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 600;
}
.prisma-landing .jr-filters {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.prisma-landing .jr-filters button {
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 0.5em 0.95em;
  border-radius: 100px;
  cursor: pointer;
  border: 1.5px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s;
}
.prisma-landing .jr-filters button:hover {
  background: var(--sky);
  color: var(--black);
  border-color: var(--sky);
}
.prisma-landing .jr-filters button.active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.prisma-landing #jrGrid .jr-item.hidden,
.prisma-landing .jr-item.hidden {
  display: none !important;
}
/* ---- Per-tag filter button colors (podcast + journal) ---- */
.prisma-landing .ep-filters button[data-filter="taoism"].active,
.prisma-landing .jr-filters button[data-filter="taoism"].active {
  background: var(--mint);
  border-color: var(--mint);
  color: #0a3b32;
}
.prisma-landing .ep-filters button[data-filter="buddhism"].active,
.prisma-landing .jr-filters button[data-filter="buddhism"].active {
  background: var(--amber);
  border-color: var(--amber);
  color: #4a3200;
}
.prisma-landing .ep-filters button[data-filter="judaism"].active,
.prisma-landing .jr-filters button[data-filter="judaism"].active {
  background: var(--sky);
  border-color: var(--sky);
  color: #0a3550;
}
.prisma-landing .ep-filters button[data-filter="health"].active,
.prisma-landing .jr-filters button[data-filter="health"].active {
  background: var(--periwinkle);
  border-color: var(--periwinkle);
  color: #1b2a5e;
}
.prisma-landing .ep-filters button[data-filter="marriage"].active,
.prisma-landing .jr-filters button[data-filter="marriage"].active {
  background: var(--pink);
  border-color: var(--pink);
  color: #5e2230;
}
/* hover tints */
.prisma-landing .ep-filters button[data-filter="taoism"]:hover,
.prisma-landing .jr-filters button[data-filter="taoism"]:hover {
  border-color: var(--mint);
  color: inherit;
  background: rgba(46, 255, 215, 0.16);
}
.prisma-landing .ep-filters button[data-filter="buddhism"]:hover,
.prisma-landing .jr-filters button[data-filter="buddhism"]:hover {
  border-color: var(--amber);
  background: rgba(255, 194, 87, 0.16);
}
.prisma-landing .ep-filters button[data-filter="judaism"]:hover,
.prisma-landing .jr-filters button[data-filter="judaism"]:hover {
  border-color: var(--sky);
  background: rgba(112, 213, 255, 0.16);
}
.prisma-landing .ep-filters button[data-filter="health"]:hover,
.prisma-landing .jr-filters button[data-filter="health"]:hover {
  border-color: var(--periwinkle);
  background: rgba(146, 174, 255, 0.16);
}
.prisma-landing .ep-filters button[data-filter="marriage"]:hover,
.prisma-landing .jr-filters button[data-filter="marriage"]:hover {
  border-color: var(--pink);
  background: rgba(255, 184, 189, 0.16);
}

/* ---- Journal cards (reference design) ---- */
.prisma-landing .jr-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 30px);
}
.prisma-landing .jr-card {
  position: relative;
  display: flex;
  flex-direction: column;
}
.prisma-landing .jr-card-link {
  position: relative;
  display: flex;
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  aspect-ratio: 3/4;
  box-shadow: 0 18px 40px -22px rgba(20, 16, 40, 0.5);
}
.prisma-landing .jr-card-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s ease;
}
.prisma-landing .jr-card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(15, 12, 30, 0) 38%,
    rgba(15, 12, 30, 0.18) 56%,
    rgba(15, 12, 30, 0.82) 100%
  );
}
.prisma-landing .jr-card-link:hover .jr-card-photo {
  transform: scale(1.05);
}
/* tags pinned top-left over the image */
.prisma-landing .jr-card-tags {
  position: absolute;
  left: clamp(16px, 1.8vw, 22px);
  top: clamp(16px, 1.8vw, 22px);
  z-index: 2;
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.prisma-landing .jr-card-tags .tag {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(4px);
}
/* title anchored to bottom of image, consistent baseline across cards */
.prisma-landing .jr-card-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: clamp(18px, 2vw, 24px);
}
.prisma-landing .jr-card-cap h3 {
  /* Without this, the sitewide `h3{color:$color-navy}` default (see
     scss/components/_modkit-typography.scss) wins over the white inherited
     from .jr-card-link — a rule that directly matches an element always
     beats an ancestor's inherited value, no matter the ancestor's
     specificity, so the white has to be re-declared here explicitly. */
  color: #fff;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.3rem, 1.9vw, 1.6rem);
  line-height: 1.16;
  margin: 0;
}
/* subtitle now sits BELOW the image */
.prisma-landing .jr-card-sub {
  margin-top: 0.85rem;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 34ch;
}
@media (max-width: 820px) {
  .prisma-landing .jr-cards {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  /* horizontal side-scroll gallery: cards slide one after another (same as Voices) */
  .prisma-landing .jr-cards {
    display: flex;
    grid-template-columns: none;
    gap: 16px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 6px;
    margin-left: calc(var(--gut) * -1);
    margin-right: calc(var(--gut) * -1);
    padding-left: var(--gut);
    padding-right: var(--gut);
  }
  .prisma-landing .jr-cards::-webkit-scrollbar {
    display: none;
  }
  .prisma-landing .jr-cards .jr-card {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }
}
/* Popular now */
.prisma-landing .jr-popular {
  margin-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--line);
  padding-top: clamp(24px, 3vw, 36px);
}
.prisma-landing .jr-pop-label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 600;
  margin-bottom: 1.4rem;
}
.prisma-landing .jr-pop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(22px, 3vw, 44px);
}
.prisma-landing .jr-pop-item {
  text-decoration: none;
  display: block;
}
.prisma-landing .jr-pop-item .jr-pop-meta {
  display: block;
  font-size: 0.74rem;
  color: var(--ink-faint);
  margin-bottom: 0.5rem;
  letter-spacing: 0.02em;
}
.prisma-landing .jr-pop-item h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--ink);
  transition: color 0.2s;
}
.prisma-landing .jr-pop-item:hover h4 {
  color: var(--periwinkle-ink);
}
@media (max-width: 760px) {
  .prisma-landing .jr-pop-grid {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }
}
/* Default (all) view: featured spans 2 cols, horizontal layout */
.prisma-landing #jrGrid {
  align-items: start;
}
.prisma-landing #jrGrid .feature-entry {
  grid-column: span 2;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(20px, 2.4vw, 34px);
  align-items: center;
}
.prisma-landing #jrGrid .feature-entry .fe-photo {
  aspect-ratio: 3/2;
  width: 100%;
}
.prisma-landing #jrGrid .feature-entry .fe-body {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.prisma-landing #jrGrid .feature-entry .feat-label {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--periwinkle);
  font-weight: 600;
}
.prisma-landing #jrGrid .feature-entry .fe-h {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.12;
}
.prisma-landing #jrGrid .feature-entry .with {
  color: var(--ink-faint);
  font-size: 1rem;
}
/* Filtering view: every item is a uniform single-column card */
.prisma-landing #jrGrid.filtering .feature-entry {
  grid-column: span 1;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  align-items: stretch;
}
.prisma-landing #jrGrid.filtering .feature-entry .fe-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.prisma-landing #jrGrid.filtering .feature-entry .fe-h {
  font-size: 1.28rem;
}
.prisma-landing #jrGrid.filtering .feature-entry .feat-label {
  order: -1;
}
@media (max-width: 860px) {
  .prisma-landing #jrGrid .feature-entry {
    grid-column: span 2;
  }
}
@media (max-width: 560px) {
  .prisma-landing #jrGrid .feature-entry {
    grid-column: span 1;
    display: flex;
    flex-direction: column;
  }
}
/* journal thumbnails: same proportion across featured + cards */
.prisma-landing .feature-entry .fe-photo,
.prisma-landing .entry .e-photo {
  aspect-ratio: 3/2;
}

/* reveal */
.prisma-landing .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}
.prisma-landing .reveal.in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .prisma-landing .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  html {
    scroll-behavior: auto;
  }
  .prisma-landing .btn:hover,
  .prisma-landing .voice-card:hover,
  .prisma-landing .entry:hover {
    transform: none;
  }
}

/* ---- Dynamic filtering (js/prisma-filters.js toggles this class) ---- */
.prisma-landing .is-filtered-out {
  display: none !important;
}

/* ---- Dropdown filter (podcast + journal) ---- */
.prisma-landing .filter-dd {
  position: relative;
  display: inline-block;
  font-family: var(--sans);
}
.prisma-landing .filter-dd-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.62em 1.05em;
  border-radius: 100px;
  cursor: pointer;
  border: 1.5px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s;
  min-width: 150px;
  justify-content: space-between;
}
.prisma-landing .filter-dd-btn .dd-caret {
  width: 0.7em;
  height: 0.7em;
  flex: none;
  transition: transform 0.25s ease;
}
.prisma-landing .filter-dd.open .dd-caret {
  transform: rotate(180deg);
}
.prisma-landing .filter-dd-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  min-width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 20px 44px -18px rgba(20, 16, 40, 0.4);
  padding: 0.4rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s;
  max-height: 320px;
  overflow: auto;
}
.prisma-landing .filter-dd.open .filter-dd-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.prisma-landing .filter-dd-menu button {
  display: flex;
  align-items: center;
  gap: 0.6em;
  width: 100%;
  text-align: left;
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--ink-soft);
  padding: 0.6em 0.8em;
  border: 0;
  background: transparent;
  border-radius: 9px;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}
.prisma-landing .filter-dd-menu button:hover {
  background: rgba(20, 16, 40, 0.05);
  color: var(--ink);
}
.prisma-landing .filter-dd-menu button.sel {
  color: var(--ink);
  font-weight: 600;
}
.prisma-landing .filter-dd-menu button .dot {
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  flex: none;
  background: currentColor;
  opacity: 0.55;
}
.prisma-landing .filter-dd-menu button[data-filter="all"] .dot {
  display: none;
}
.prisma-landing .filter-dd-menu button[data-filter="taoism"] .dot {
  background: var(--mint);
  opacity: 1;
}
.prisma-landing .filter-dd-menu button[data-filter="buddhism"] .dot {
  background: var(--amber);
  opacity: 1;
}
.prisma-landing .filter-dd-menu button[data-filter="judaism"] .dot {
  background: var(--sky);
  opacity: 1;
}
.prisma-landing .filter-dd-menu button[data-filter="health"] .dot {
  background: var(--periwinkle);
  opacity: 1;
}
.prisma-landing .filter-dd-menu button[data-filter="marriage"] .dot {
  background: var(--pink);
  opacity: 1;
}
.prisma-landing .filter-dd-menu button.sel[data-filter="taoism"] {
  background: rgba(46, 255, 215, 0.14);
}
.prisma-landing .filter-dd-menu button.sel[data-filter="buddhism"] {
  background: rgba(255, 194, 87, 0.16);
}
.prisma-landing .filter-dd-menu button.sel[data-filter="judaism"] {
  background: rgba(112, 213, 255, 0.16);
}
.prisma-landing .filter-dd-menu button.sel[data-filter="health"] {
  background: rgba(146, 174, 255, 0.16);
}
.prisma-landing .filter-dd-menu button.sel[data-filter="marriage"] {
  background: rgba(255, 184, 189, 0.18);
}
/* podcast context: white-on-gradient trigger */
.prisma-landing .ep-dd .filter-dd-btn {
  border-color: rgba(255, 255, 255, 0.55);
  color: #ffffff;
}
.prisma-landing .ep-dd .filter-dd-btn:hover {
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
}
.prisma-landing .ep-dd.open .filter-dd-btn {
  background: rgba(255, 255, 255, 0.14);
  border-color: #ffffff;
}
/* active pill color on the podcast trigger reflects selection */
.prisma-landing .ep-dd .filter-dd-btn[data-sel="taoism"] {
  background: var(--mint);
  border-color: var(--mint);
  color: #0a3b32;
}
.prisma-landing .ep-dd .filter-dd-btn[data-sel="buddhism"] {
  background: var(--amber);
  border-color: var(--amber);
  color: #4a3200;
}
.prisma-landing .ep-dd .filter-dd-btn[data-sel="judaism"] {
  background: var(--sky);
  border-color: var(--sky);
  color: #0a3550;
}
.prisma-landing .ep-dd .filter-dd-btn[data-sel="health"] {
  background: var(--periwinkle);
  border-color: var(--periwinkle);
  color: #1b2a5e;
}
.prisma-landing .ep-dd .filter-dd-btn[data-sel="marriage"] {
  background: var(--pink);
  border-color: var(--pink);
  color: #5e2230;
}
/* journal context trigger active colors */
.prisma-landing .jr-dd .filter-dd-btn[data-sel="taoism"] {
  background: var(--mint);
  border-color: var(--mint);
  color: #0a3b32;
}
.prisma-landing .jr-dd .filter-dd-btn[data-sel="buddhism"] {
  background: var(--amber);
  border-color: var(--amber);
  color: #4a3200;
}
.prisma-landing .jr-dd .filter-dd-btn[data-sel="judaism"] {
  background: var(--sky);
  border-color: var(--sky);
  color: #0a3550;
}
.prisma-landing .jr-dd .filter-dd-btn[data-sel="health"] {
  background: var(--periwinkle);
  border-color: var(--periwinkle);
  color: #1b2a5e;
}
.prisma-landing .jr-dd .filter-dd-btn[data-sel="marriage"] {
  background: var(--pink);
  border-color: var(--pink);
  color: #5e2230;
}

/* ---- Journal card meta (name + date under category) ---- */
/* guest name matches the date: same size, color, spacing, weight */
.prisma-landing .jr-card-with {
  display: block;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--ink-faint);
  letter-spacing: 0.02em;
  font-weight: 400;
  margin: 0.7rem 0 0;
}
.prisma-landing .jr-card-date {
  display: block;
  font-size: 0.78rem;
  color: var(--ink-faint);
  letter-spacing: 0.02em;
  margin-top: 0.6rem;
}

/* ---- Popular Now: title + subtitle ---- */
.prisma-landing .jr-pop-item h4 {
  margin: 0;
}
.prisma-landing .jr-pop-guest {
  display: block;
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin: 0.35rem 0 0;
  letter-spacing: 0.01em;
}
.prisma-landing .jr-pop-sub {
  margin: 0.4rem 0 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

/* ===================== MOBILE POLISH ===================== */
@media (max-width: 560px) {
  /* tighten vertical rhythm on phones */
  .prisma-landing .band {
    padding: clamp(46px, 13vw, 72px) 0;
  }
  /* hero: full-width stacked CTAs, comfortable tap targets */
  .prisma-landing .hero-cta {
    width: 100%;
  }
  .prisma-landing .hero-cta .btn {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
  }
  /* signup form: stack inputs + button full width */
  .prisma-landing .signup {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0.6rem;
    max-width: 420px;
  }
  .prisma-landing .signup input {
    flex: 1 1 auto;
    width: 100%;
    text-align: center;
  }
  .prisma-landing .signup .btn {
    width: 100%;
    justify-content: center;
  }
  /* CTA socials: give links room to breathe */
  .prisma-landing .cta-socials {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.9rem 1.4rem;
  }
  /* follow row (podcast) label + pill center nicely */
  .prisma-landing .podcast .sec-head .follow-row {
    width: 100%;
    align-items: center;
  }
  .prisma-landing .podcast .sec-head .follow-row .label {
    text-align: center;
  }
  .prisma-landing .podcast .sec-head .follow-row .plat {
    width: fit-content;
    max-width: 100%;
    justify-content: center;
    margin-inline: auto;
  }
  .prisma-landing .plat-row-break {
    display: block;
  }
  /* footer: stack logo, links, copyright, centered */
  body.prisma-landing .foot-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.4rem;
    padding: 2rem var(--gut);
  }
  body.prisma-landing .foot-links {
    justify-content: center;
    gap: 1rem 1.2rem;
  }
  body.prisma-landing .foot-logo {
    margin: 0 auto;
  }
  /* journal + popular meta: a touch more breathing room */
  .prisma-landing .jr-pop-grid {
    gap: 1.6rem;
  }
  /* section headers: keep follow-row / titles from crowding */
  .prisma-landing .sec-head h2 {
    line-height: 1.08;
  }
}
/* very small phones */
@media (max-width: 380px) {
  .prisma-landing .hero h1 {
    font-size: clamp(2.3rem, 10vw, 2.8rem);
  }
  body.prisma-landing .nav .brand-logo {
    height: 30px;
  }
}

/* mobile hero: shrink + fade the play/music control, lengthen banner so CTAs clear it */
@media (max-width: 560px) {
  .prisma-landing .hero-play {
    transform: scale(0.8);
    transform-origin: bottom right;
    opacity: 0.82;
    right: 16px;
    bottom: 16px;
  }
  .prisma-landing .hero-play:hover {
    transform: scale(0.86);
  }
  /* push the eyebrow/heading down so it clears the fixed logo up top */
  .prisma-landing .hero {
    align-items: flex-start;
  }
  .prisma-landing .hero-inner {
    padding-top: 96px;
  }
  /* About: taller banner, push artwork down so it reads under the copy */
  .prisma-landing .about {
    min-height: 640px;
  }
  .prisma-landing .about-bg img {
    object-position: center bottom;
  }
}

/* mobile nav */
@media (max-width: 900px) {
  body.prisma-landing .nav-links,
  body.prisma-landing .nav-right .socials,
  body.prisma-landing .nav-right .btn {
    display: none;
  }
  body.prisma-landing .menu-toggle {
    display: block;
  }
  body.prisma-landing .mobile-menu {
    display: none;
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    flex-direction: column;
    gap: 1rem;
    padding: 1.4rem var(--gut) 2rem;
    background: #ffffff;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: calc(100vh - 72px);
    min-height: calc(100dvh - 72px);
  }
  body.prisma-landing .mobile-menu.open {
    display: flex;
  }
  body.prisma-landing header.menu-open {
    background: #0c0c0e;
    backdrop-filter: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }
  body.prisma-landing header.menu-open .brand-logo,
  body.prisma-landing header.menu-open .menu-toggle {
    color: #ffffff;
  }
  body.prisma-landing .mobile-menu__list,
  body.prisma-landing .mobile-menu .nav-links,
  body.prisma-landing .mobile-menu > .menu-item {
    list-style: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  body.prisma-landing .mobile-menu__list,
  body.prisma-landing .mobile-menu .nav-links {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  body.prisma-landing .mobile-menu__list li,
  body.prisma-landing .mobile-menu .nav-links li,
  body.prisma-landing .mobile-menu > .menu-item {
    list-style: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  body.prisma-landing .mobile-menu__list li::marker,
  body.prisma-landing .mobile-menu .nav-links li::marker,
  body.prisma-landing .mobile-menu > .menu-item::marker {
    content: none;
  }
  body.prisma-landing .mobile-menu a {
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--ink-soft);
  }
  body.prisma-landing .mobile-menu .btn {
    display: inline-flex;
    align-self: flex-start;
  }
}
