@layer components {
  /* Shared card shell. Layout variants belong to their owning page or feature. */
  .gnostic-card {
    --card-radius: var(--border-radius-base, 16px);
    --card-bdr: var(--section-border, rgba(0,0,0,0.08));
    --card-bg: var(--card-gradient, color-mix(in srgb, var(--bg-secondary) 94%, var(--highlight) 6%));

    position: relative;
    display: block;
    overflow: hidden;
    background: var(--card-bg);
    border: 1px solid var(--card-bdr);
    border-radius: var(--card-radius);
    box-shadow:
      0 10px 24px color-mix(in srgb, var(--bg-primary) 88%, transparent),
      inset 0 1px 0 color-mix(in srgb, var(--highlight) 28%, transparent);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  }

  .gnostic-card .card-link {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    color: inherit;
    text-decoration: none;
    outline: none;
  }

  .gnostic-card .card-media {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    margin: 0;
  }

  .gnostic-card .card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .gnostic-card .card-body {
    flex: 1 1 auto;
    padding: 2.65rem var(--space-md, 1rem) var(--space-lg, 1.25rem);
    text-align: center;
    border-top: 1px solid color-mix(in srgb, var(--section-border) 74%, transparent);
  }

  .gnostic-card .card-glyph,
  .gnostic-card .card-eyebrow {
    display: none;
  }

  .gnostic-card .card-title {
    margin: 0;
    color: var(--text-accent, #222);
    font-family: var(--font-display, "Cormorant Garamond", serif);
    font-size: var(--font-size-md, 1.2rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-shadow: 0 1px 0 color-mix(in srgb, var(--highlight) 22%, transparent);
    text-transform: uppercase;
  }

  .gnostic-card .card-desc {
    max-width: 95%;
    margin: 0.45rem auto 0;
    color: var(--strong-text, rgba(0,0,0,0.72));
    font-size: var(--type-copy-size, 1em);
    line-height: var(--type-copy-line, 1.6);
  }

  /* Older non-editorial cards retain their existing plain-text action. */
  body:not(.home) .gnostic-card > a.card-link[href] .card-body::after {
    content: "Enter";
    display: inline-flex;
    margin-top: var(--space-xs, 0.5rem);
    padding: 0.08rem 0;
    color: var(--text-accent);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1;
    opacity: 0.82;
    text-transform: uppercase;
  }

  body:not(.home) .gnostic-card > a.card-link[href] .card-body[data-card-enter-label]::after {
    content: attr(data-card-enter-label);
  }

  body:not(.home) .gnostic-card.enter-label-disabled > a.card-link[href] .card-body::after {
    content: "";
  }

  .gnostic-card.coming-soon .card-link,
  .gnostic-card.premium.locked .card-link,
  .gnostic-card.archived .card-link {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.8;
  }

  .gnostic-card.coming-soon {
    filter: saturate(0.7) brightness(0.88);
    opacity: 0.85;
  }

  .gnostic-card:hover,
  .gnostic-card:focus-within {
    transform: translateY(-3px);
    box-shadow:
      0 16px 30px color-mix(in srgb, var(--bg-primary) 78%, transparent),
      0 0 18px color-mix(in srgb, var(--shadow-glow) 20%, transparent);
  }

  .gnostic-card .card-link:focus-visible {
    outline: 2px solid var(--highlight, #bfa865);
    outline-offset: 3px;
    border-radius: inherit;
  }

  html[data-theme] body.lightgold { --card-sheen-highlight: 22%; --card-sheen-shadow: 35%; --card-sheen-border: rgba(255,255,255,0.35); --card-sheen-opacity: 0.55; }
  html[data-theme] body.obsidian { --card-sheen-highlight: 26%; --card-sheen-shadow: 40%; --card-sheen-border: color-mix(in srgb, var(--highlight) 40%, transparent); --card-sheen-opacity: 0.6; }
  html[data-theme] body.eye { --card-sheen-highlight: 22%; --card-sheen-shadow: 38%; --card-sheen-border: color-mix(in srgb, var(--highlight) 38%, transparent); --card-sheen-opacity: 0.55; }
  html[data-theme] body.community { --card-sheen-highlight: 20%; --card-sheen-shadow: 36%; --card-sheen-border: color-mix(in srgb, var(--highlight) 34%, transparent); --card-sheen-opacity: 0.55; }

  html[data-theme] :is(body.lightgold, body.obsidian, body.eye, body.community) .gnostic-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--highlight) var(--card-sheen-highlight), transparent), transparent 45%),
      radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--shadow-glow) var(--card-sheen-shadow), transparent), transparent 58%);
    opacity: 0.85;
  }

  html[data-theme] :is(body.lightgold, body.obsidian, body.eye, body.community) .gnostic-card::after {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: 2;
    pointer-events: none;
    border: 1px solid var(--card-sheen-border);
    border-radius: calc(var(--card-radius) - 2px);
    opacity: var(--card-sheen-opacity);
  }

  html[data-theme] body.lightgold .gnostic-card .card-link {
    position: relative;
    z-index: 1;
  }

  html[data-theme] body.lightgold .gnostic-card :is(.card-badges, .card-overlay) {
    z-index: 6;
  }

  @media (max-width: 900px) {
    .gnostic-card .card-body {
      padding: 2.85rem var(--space-md, 0.85rem) 2.75rem;
    }

    .gnostic-card .card-desc {
      margin-bottom: 1.5rem;
    }
  }

  @media (max-width: 600px) {
    .gnostic-card .card-desc {
      margin-bottom: 1.6rem;
    }
  }

  @media (max-width: 390px) {
    .gnostic-card .card-body {
      padding: 2.65rem var(--space-sm, 0.75rem) 2.25rem;
    }

    .gnostic-card .card-desc {
      margin-bottom: 1.75rem;
    }
  }

  @media (max-height: 500px) and (orientation: landscape) {
    .gnostic-card .card-body {
      padding: 2.35rem var(--space-sm, 0.8rem) 2rem;
    }

    .gnostic-card .card-desc {
      margin-bottom: 1.4rem;
    }
  }
}