/*
 * Ghost compatibility layer
 * - Editor card width classes (.kg-width-wide / .kg-width-full)
 * - Custom-font hooks driven by Ghost admin "Design → Typography"
 * Loaded after pages.css so it can override card widths inside .gh-content.
 */

@layer pages {
  /* Wide image / embed / gallery card — escapes the article column */
  .gh-content .kg-width-wide,
  .article .kg-width-wide,
  .gh-content > figure.kg-width-wide,
  .article > figure.kg-width-wide {
    position: relative;
    width: min(100%, 1100px);
    max-width: 100vw;
    margin-inline: auto;
    margin-block: 2rem;
  }

  /* Full-width card — fills the container (article column / .gh-content)
     rather than bleeding to the viewport edges. Use this for cards that
     should look "wide" relative to the surrounding column without
     breaking the layout. */
  .gh-content .kg-width-full,
  .article .kg-width-full,
  .gh-content > figure.kg-width-full,
  .article > figure.kg-width-full {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    margin-block: 2.5rem;
  }

  /* Default-width image cards: cap at column width and preserve aspect
     ratio. tokens.css only sets `max-inline-size: 100%` on <img>, so
     without `height: auto` the height attr can stick at its declared
     pixel value once the column shrinks the width — squishing the image.  */
  .gh-content figure img,
  .article figure img {
    height: auto;
  }

  .gh-content .kg-width-wide img,
  .gh-content .kg-width-full img,
  .article .kg-width-wide img,
  .article .kg-width-full img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* Comments wrapper — Ghost's {{comments}} widget is wrapped in
       .post-comments. The "// guestbook · N entries" heading should match
       the design's section labels (mono · lime · wide-tracking) used by
       .related-label and friends. Scoped to .post-comments so it can't
       leak into other contexts. */
  .post-comments .comments-label {
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    color: var(--lime);
    letter-spacing: 0.2em;
    margin-block-end: 0.75rem;
  }

  /* meta line under the section heading (// guestbook · N entries). */
  .post-comments .cmt-head .meta {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--ink-3);
    letter-spacing: 0.15em;
    margin-block-start: 0;
  }

  /* The Ghost comments iframe lives inside `.win > .post-comments-frame`.
       Give the iframe room to breathe, fill the window's width, and let the
       widget set its own height. */
  .post-comments .post-comments-frame {
    padding: 1.25rem 1rem 0.5rem;
  }
  .post-comments .post-comments-frame iframe,
  .post-comments .post-comments-frame #ghost-comments-root iframe {
    display: block;
    width: 100%;
    border: 0;
  }

  /* Hide the paywall as we have a custom one */
  .gh-post-upgrade-cta-content,
  .gh-post-upgrade-cta {
    display: none !important;
  }

  /* Revision label fallback: when no internal #rev-* tag is present on the post,
     the [data-stat-rev] element renders empty — show "v1" as the implicit default. */
  [data-stat-rev]:empty::before {
    content: "v1";
  }

  /* ── Adaptive column counts for prev-next & related ──────────────────
       pages.css fixes these grids at 2 cols / 3 cols above 640px regardless
       of how many cards are inside. When prev_post or next_post is missing,
       or when there are fewer than 3 related posts, the unused tracks leave
       awkward gaps. Use :has() so the column count tracks the actual child
       count, capped at the design max. Browsers without :has() fall back to
       the original pages.css rules (acceptable, was the prior behaviour). */
  @media (min-width: 640px) {
    /* prev-next: 1 neighbour → 1 col, 2 → 2 cols. */
    .prev-next:not(:has(> a:nth-child(2))) {
      grid-template-columns: 1fr;
    }
    .prev-next:has(> a:nth-child(2)) {
      grid-template-columns: 1fr 1fr;
    }

    /* related: 1 → 1 col, 2 → 2 cols, 3+ → 3 cols. The :nth-child(3) rule
       comes last so it wins when all three exist (same specificity). */
    .related .related-grid:not(:has(> a:nth-child(2))) {
      grid-template-columns: 1fr;
    }
    .related .related-grid:has(> a:nth-child(2)) {
      grid-template-columns: repeat(2, 1fr);
    }
    .related .related-grid:has(> a:nth-child(3)) {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  /* (Ghost bookmark card overrides live OUTSIDE this @layer — see below.) */
}

/* ── Ghost bookmark card → Atomys terminal window ──────────────────────
   Ghost ships `/public/cards.min.css` after this file and the unlayered
   rules in there (background:#fff on the inner anchor, system-ui font on
   .kg-bookmark-content, opacity:.7 on metadata children, a "•" bullet
   between author/publisher, absolute-positioned thumbnail img, etc.)
   would beat anything written inside `@layer pages` — unlayered styles
   always win against layered ones, regardless of specificity.

   So this block is intentionally unlayered, every selector is prefixed
   with `.gh-content` to outpace Ghost's tightest selector
   (`.kg-bookmark-card a.kg-bookmark-container`, 0-2-1), and we re-set
   each property the cards.min.css defaults trample. */

/* Figure is just a wrapper now — the "window" lives on the inner anchor
   so the figcaption (sibling of the anchor) sits *outside* the chrome. */
.gh-content .kg-bookmark-card,
.article .kg-bookmark-card {
  position: relative;
  margin-block: 2rem;
  background: transparent;
  border: 0;
  padding: 0;
}

/* Inner anchor = the terminal window. Ghost's cards.min.css forces
   background:#fff, color:#222, border-radius:6px, and a gray border on
   this element — the 0-3-1 selectors below beat Ghost's 0-2-1 and re-skin. */
.gh-content .kg-bookmark-card a.kg-bookmark-container,
.gh-content .kg-bookmark-card a.kg-bookmark-container:hover,
.article .kg-bookmark-card a.kg-bookmark-container,
.article .kg-bookmark-card a.kg-bookmark-container:hover {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 0;
  padding-block-start: 30px;
  background: var(--bg-1);
  color: inherit;
  text-decoration: none;
  border: 1px solid color-mix(in oklab, var(--violet) 30%, transparent);
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px color-mix(in oklab, var(--violet) 6%, transparent),
    0 14px 36px rgb(0 0 0 / 0.45);
  min-block-size: clamp(140px, 22vw, 200px);
  transition:
    border-color 220ms ease,
    box-shadow 220ms ease,
    transform 220ms ease;
}

/* tbar in a single pseudo: stacked radial-gradients paint the three
   traffic dots on a violet bar gradient; the `content` string is the
   live URL (pulled from the anchor's href) sitting right-aligned with
   ellipsis. line-height:30px = vertical centering without flex. */
.gh-content .kg-bookmark-card a.kg-bookmark-container::before,
.article .kg-bookmark-card a.kg-bookmark-container::before {
  content: "~/" attr(href);
  position: absolute;
  inset: 0 0 auto 0;
  block-size: 30px;
  padding-inline: 70px 14px;
  background:
    radial-gradient(circle at 14px 50%, var(--danger) 4px, transparent 4.5px),
    radial-gradient(
      circle at 32px 50%,
      color-mix(in oklab, var(--violet) 55%, var(--ink-0)) 4px,
      transparent 4.5px
    ),
    radial-gradient(circle at 50px 50%, var(--lime) 4px, transparent 4.5px),
    linear-gradient(
      180deg,
      color-mix(in oklab, var(--violet) 16%, var(--bg-2)),
      color-mix(in oklab, var(--violet) 5%, var(--bg-1))
    );
  border-block-end: 1px solid
    color-mix(in oklab, var(--violet) 25%, transparent);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  line-height: 30px;
  color: var(--ink-2);
  letter-spacing: 0.12em;
  white-space: nowrap;
  text-align: end;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  z-index: 2;
}

/* CRT scan sweep on hover — clipped by the anchor's overflow:hidden. */
.gh-content .kg-bookmark-card a.kg-bookmark-container::after,
.article .kg-bookmark-card a.kg-bookmark-container::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 42%,
    color-mix(in oklab, var(--lime) 18%, transparent) 50%,
    transparent 58%
  );
  transform: translateX(-110%);
  transition: transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 3;
}

.gh-content .kg-bookmark-card a.kg-bookmark-container:hover,
.gh-content .kg-bookmark-card a.kg-bookmark-container:focus-visible,
.article .kg-bookmark-card a.kg-bookmark-container:hover,
.article .kg-bookmark-card a.kg-bookmark-container:focus-visible {
  border-color: color-mix(in oklab, var(--lime) 55%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in oklab, var(--lime) 10%, transparent),
    0 18px 40px rgb(0 0 0 / 0.55),
    0 0 24px color-mix(in oklab, var(--lime) 14%, transparent);
}
.gh-content .kg-bookmark-card a.kg-bookmark-container:hover::after,
.article .kg-bookmark-card a.kg-bookmark-container:hover::after {
  transform: translateX(110%);
}

/* Ghost forces system-ui + 20px padding here — restore the kit. */
.gh-content .kg-bookmark-card .kg-bookmark-content,
.article .kg-bookmark-card .kg-bookmark-content {
  flex: 1 1 0;
  min-inline-size: 0;
  padding: 1.125rem 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.625rem;
  font-family: var(--font-sans);
  color: var(--ink-0);
  overflow: hidden;
}

.gh-content .kg-bookmark-card .kg-bookmark-title,
.article .kg-bookmark-card .kg-bookmark-title {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink-0);
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.gh-content .kg-bookmark-card .kg-bookmark-title::before,
.article .kg-bookmark-card .kg-bookmark-title::before {
  content: "▸";
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--lime);
  text-shadow: 0 0 8px color-mix(in oklab, var(--lime) 45%, transparent);
}

/* Ghost caps this at 44px / 2 lines / opacity:.7 — undo. */
.gh-content .kg-bookmark-card .kg-bookmark-description,
.article .kg-bookmark-card .kg-bookmark-description {
  margin: 0;
  max-height: none;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink-1);
  opacity: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gh-content .kg-bookmark-card .kg-bookmark-metadata,
.article .kg-bookmark-card .kg-bookmark-metadata {
  margin: auto 0 0;
  padding-block-start: 0.625rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: 400;
  color: var(--lime);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: normal;
  border-block-start: 1px dashed
    color-mix(in oklab, var(--violet) 22%, transparent);
}
/* Ghost dims every non-img child to .7 — restore full opacity. */
.gh-content .kg-bookmark-card .kg-bookmark-metadata > :not(img),
.article .kg-bookmark-card .kg-bookmark-metadata > :not(img) {
  opacity: 1;
}
.gh-content .kg-bookmark-card .kg-bookmark-icon,
.article .kg-bookmark-card .kg-bookmark-icon {
  inline-size: 14px;
  block-size: 14px;
  margin-inline-end: 0;
  border-radius: 2px;
  outline: 1px solid color-mix(in oklab, var(--lime) 50%, transparent);
  outline-offset: 1px;
  flex: 0 0 auto;
}
.gh-content .kg-bookmark-card .kg-bookmark-publisher,
.article .kg-bookmark-card .kg-bookmark-publisher {
  color: var(--ink-2);
  max-inline-size: none;
}
/* Ghost injects "•" between author and publisher via this exact selector —
   match it 1:1 and replace the glyph + spacing with our "//" separator. */
.gh-content
  .kg-bookmark-card
  .kg-bookmark-metadata
  > span:nth-of-type(2)::before,
.article .kg-bookmark-card .kg-bookmark-metadata > span:nth-of-type(2)::before {
  content: "//";
  color: var(--ink-3);
  margin: 0 0.5rem 0 0;
  letter-spacing: 0;
}

/* Thumbnail column. Ghost sets `flex-grow:1; min-width:33%` and absolute-
   positions the inner img with `border-radius:0 2px 2px 0` — neutralize. */
.gh-content .kg-bookmark-card .kg-bookmark-thumbnail,
.article .kg-bookmark-card .kg-bookmark-thumbnail {
  flex: 0 0 38%;
  min-inline-size: 0;
  max-inline-size: 240px;
  align-self: stretch;
  position: relative;
  margin: 0;
  background: var(--bg-2);
  border-inline-start: 1px solid
    color-mix(in oklab, var(--violet) 25%, transparent);
  overflow: hidden;
}
.gh-content .kg-bookmark-card .kg-bookmark-thumbnail img,
.article .kg-bookmark-card .kg-bookmark-thumbnail img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  border-radius: 0;
  filter: contrast(1.05) saturate(0.95);
  transition:
    transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 200ms ease;
}
.gh-content
  .kg-bookmark-card
  a.kg-bookmark-container:hover
  .kg-bookmark-thumbnail
  img,
.article
  .kg-bookmark-card
  a.kg-bookmark-container:hover
  .kg-bookmark-thumbnail
  img {
  transform: scale(1.04);
  filter: contrast(1.1) saturate(1.05);
}
.gh-content
  .kg-bookmark-card
  .kg-bookmark-thumbnail:has(img[style*="display: none"]),
.gh-content .kg-bookmark-card .kg-bookmark-thumbnail:not(:has(img)),
.article
  .kg-bookmark-card
  .kg-bookmark-thumbnail:has(img[style*="display: none"]),
.article .kg-bookmark-card .kg-bookmark-thumbnail:not(:has(img)) {
  display: none;
}

/* Optional figcaption (kg-card-hascaption variant) — aligned with the
   inner .kg-bookmark-content padding so the caption hangs flush with the
   title/description column at every viewport. */
.gh-content .kg-bookmark-card.kg-card-hascaption > figcaption,
.article .kg-bookmark-card.kg-card-hascaption > figcaption {
  margin-block-start: 0.625rem;
  padding-inline: 1.25rem;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  color: var(--ink-3);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: start;
}
.gh-content .kg-bookmark-card.kg-card-hascaption > figcaption p,
.article .kg-bookmark-card.kg-card-hascaption > figcaption p {
  margin: 0;
}

/* Stack on narrow viewports — thumbnail above content. */
@media (max-width: 540px) {
  .gh-content .kg-bookmark-card a.kg-bookmark-container,
  .article .kg-bookmark-card a.kg-bookmark-container {
    flex-direction: column-reverse;
  }
  .gh-content .kg-bookmark-card .kg-bookmark-thumbnail,
  .article .kg-bookmark-card .kg-bookmark-thumbnail {
    flex-basis: auto;
    max-inline-size: none;
    aspect-ratio: 16 / 8;
    border-inline-start: none;
    border-block-end: 1px solid
      color-mix(in oklab, var(--violet) 25%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gh-content .kg-bookmark-card a.kg-bookmark-container,
  .gh-content .kg-bookmark-card a.kg-bookmark-container::after,
  .gh-content .kg-bookmark-card .kg-bookmark-thumbnail img,
  .article .kg-bookmark-card a.kg-bookmark-container,
  .article .kg-bookmark-card a.kg-bookmark-container::after,
  .article .kg-bookmark-card .kg-bookmark-thumbnail img {
    transition: none;
  }
  .gh-content .kg-bookmark-card a.kg-bookmark-container:hover::after,
  .article .kg-bookmark-card a.kg-bookmark-container:hover::after {
    transform: translateX(-110%);
  }
  .gh-content
    .kg-bookmark-card
    a.kg-bookmark-container:hover
    .kg-bookmark-thumbnail
    img,
  .article
    .kg-bookmark-card
    a.kg-bookmark-container:hover
    .kg-bookmark-thumbnail
    img {
    transform: none;
  }
}

/* ── Ghost CTA card → Atomys terminal panel ────────────────────────────
   Same window language as the bookmark card (tbar + dots + lime accents)
   but with content-aware tbar labels and a hex-notched cyberpunk button
   matching the kit's `.btn-primary`. All `.kg-cta-bg-*` tints from
   cards.min.css are overridden — every CTA renders on `--bg-1` regardless
   of which background variant the editor picked. */

.gh-content .kg-cta-card,
.article .kg-cta-card {
  position: relative;
  margin-block: 2rem;
  display: flex;
  flex-direction: column;
  padding-block-start: 30px;
  background: var(--bg-1);
  border: 1px solid color-mix(in oklab, var(--violet) 30%, transparent);
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px color-mix(in oklab, var(--violet) 6%, transparent),
    0 14px 36px rgb(0 0 0 / 0.45);
  color: var(--ink-0);
  transition:
    border-color 220ms ease,
    box-shadow 220ms ease;
}

/* tbar — same look as the bookmark card, content-aware label. */
.gh-content .kg-cta-card::before,
.article .kg-cta-card::before {
  content: "~/cta";
  position: absolute;
  inset: 0 0 auto 0;
  block-size: 30px;
  padding-inline: 70px 14px;
  background:
    radial-gradient(circle at 14px 50%, var(--danger) 4px, transparent 4.5px),
    radial-gradient(
      circle at 32px 50%,
      color-mix(in oklab, var(--violet) 55%, var(--ink-0)) 4px,
      transparent 4.5px
    ),
    radial-gradient(circle at 50px 50%, var(--lime) 4px, transparent 4.5px),
    linear-gradient(
      180deg,
      color-mix(in oklab, var(--violet) 16%, var(--bg-2)),
      color-mix(in oklab, var(--violet) 5%, var(--bg-1))
    );
  border-block-end: 1px solid
    color-mix(in oklab, var(--violet) 25%, transparent);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  line-height: 30px;
  color: var(--ink-2);
  letter-spacing: 0.12em;
  white-space: nowrap;
  text-align: end;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  z-index: 2;
}
.gh-content .kg-cta-card.kg-cta-immersive::before,
.article .kg-cta-card.kg-cta-immersive::before {
  content: "~/cta/immersive";
}
.gh-content .kg-cta-card.kg-cta-minimal::before,
.article .kg-cta-card.kg-cta-minimal::before {
  content: "~/cta/minimal";
}
/* :has() wins because it adds another class slot to the selector. */
.gh-content .kg-cta-card:has(.kg-cta-sponsor-label)::before,
.article .kg-cta-card:has(.kg-cta-sponsor-label)::before {
  content: "~/cta/sponsored";
}

/* Sponsor strip — Ghost gives it grey margin/border; restyle as a row
   between the tbar and the content. */
.gh-content .kg-cta-card .kg-cta-sponsor-label-wrapper,
.article .kg-cta-card .kg-cta-sponsor-label-wrapper {
  margin: 0;
  padding: 0.5rem clamp(1rem, 2.5vw, 1.5rem);
  border-block-end: 1px dashed
    color-mix(in oklab, var(--violet) 22%, transparent);
}
.gh-content .kg-cta-card .kg-cta-sponsor-label,
.article .kg-cta-card .kg-cta-sponsor-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: 700;
  color: var(--lime);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.gh-content .kg-cta-card .kg-cta-sponsor-label::before,
.article .kg-cta-card .kg-cta-sponsor-label::before {
  content: "●";
  color: var(--lime);
  font-size: 0.75em;
  text-shadow: 0 0 8px color-mix(in oklab, var(--lime) 55%, transparent);
}
/* Ghost dims `.kg-cta-sponsor-label span` to 45% via color-mix — restore. */
.gh-content .kg-cta-card .kg-cta-sponsor-label span:not(a span),
.article .kg-cta-card .kg-cta-sponsor-label span:not(a span) {
  color: var(--lime);
}

/* Content padding (Ghost: 1.5em desktop / 1.25em mobile via media query). */
.gh-content .kg-cta-card .kg-cta-content,
.article .kg-cta-card .kg-cta-content {
  padding: clamp(1rem, 2.5vw, 1.5rem);
  gap: clamp(1rem, 2vw, 1.5rem);
}
.gh-content .kg-cta-card .kg-cta-content-inner,
.article .kg-cta-card .kg-cta-content-inner {
  gap: clamp(0.875rem, 1.6vw, 1.25rem);
}

/* Image — keep Ghost's per-variant width/height (full-width for immersive,
   64px for minimal); only retouch radius + tint + outline. */
.gh-content .kg-cta-card .kg-cta-image-container img,
.article .kg-cta-card .kg-cta-image-container img {
  border-radius: var(--radius-s);
  outline: 1px solid color-mix(in oklab, var(--violet) 25%, transparent);
  outline-offset: -1px;
  filter: contrast(1.05) saturate(0.95);
  transition: filter 200ms ease;
}
.gh-content .kg-cta-card:hover .kg-cta-image-container img,
.article .kg-cta-card:hover .kg-cta-image-container img {
  filter: contrast(1.1) saturate(1.05);
}
.gh-content .kg-cta-card.kg-cta-minimal .kg-cta-image-container img,
.article .kg-cta-card.kg-cta-minimal .kg-cta-image-container img {
  border-radius: var(--radius-s);
  outline-color: color-mix(in oklab, var(--lime) 35%, transparent);
}

/* Body copy — first paragraph reads as a lede, follow-ups as body. */
.gh-content .kg-cta-card .kg-cta-text p,
.article .kg-cta-card .kg-cta-text p {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-lede);
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink-0);
}
.gh-content .kg-cta-card .kg-cta-text p + p,
.article .kg-cta-card .kg-cta-text p + p {
  margin-block-start: 0.875rem;
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--ink-1);
}
.gh-content .kg-cta-card.kg-cta-minimal .kg-cta-text p,
.article .kg-cta-card.kg-cta-minimal .kg-cta-text p {
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--ink-1);
}
.gh-content .kg-cta-card .kg-cta-text a,
.article .kg-cta-card .kg-cta-text a {
  color: var(--lime);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--lime) 50%, transparent);
  text-underline-offset: 3px;
  transition:
    color 200ms ease,
    text-decoration-color 200ms ease;
}
.gh-content .kg-cta-card .kg-cta-text a:hover,
.article .kg-cta-card .kg-cta-text a:hover {
  color: var(--lime-hi);
  text-decoration-color: var(--lime);
  opacity: 1; /* Ghost sets opacity:.85 on hover — undo */
}

/* Centered immersive variant — Ghost handles `.kg-cta-text` align;
   we just re-center the button. */
.gh-content .kg-cta-card.kg-cta-immersive.kg-cta-centered a.kg-cta-button,
.article .kg-cta-card.kg-cta-immersive.kg-cta-centered a.kg-cta-button {
  margin-inline: auto;
}

/* Button — kit's hex-notched primary CTA, with the same scan strip +
   glitch-nudge animations as `.btn-primary` in tokens.css.

   Two cards.min.css obstacles to dodge:
     1) Ghost's editor lets the author pick custom button colors and emits
        them as `style="background-color: #...; color: #..."` on the <a>.
        Inline styles beat external selectors at any specificity, so the
        bg-color and color longhands need `!important` to enforce the kit.
     2) cards.min.css sets `a.kg-cta-button:hover { opacity: .85 }`, which
        would dim our hover state — undone below with `opacity: 1`.

   `clip-path` clips box-shadow to the polygon (so the inset shadow becomes
   a polygonal border), while `filter: drop-shadow()` follows the clipped
   silhouette so the outer glow stays visible. */
.gh-content .kg-cta-card a.kg-cta-button,
.gh-content .kg-cta-card a.kg-cta-button.kg-style-accent,
.article .kg-cta-card a.kg-cta-button,
.article .kg-cta-card a.kg-cta-button.kg-style-accent {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  inline-size: max-content;
  max-inline-size: 100%;
  block-size: auto;
  min-block-size: 44px;
  padding-block: 0.75rem;
  padding-inline: 1.375rem;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.22em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  /* !important defeats Ghost editor inline styles like
     `style="background-color:#000;color:#fff"`. */
  color: color-mix(in oklab, var(--violet) 25%, var(--ink-0)) !important;
  background-color: var(--bg-1) !important;
  background-image: linear-gradient(
    180deg,
    color-mix(in oklab, var(--violet) 22%, transparent) 0%,
    color-mix(in oklab, var(--violet) 6%, transparent) 100%
  );
  border: 0;
  border-radius: 0;
  clip-path: polygon(
    12px 0,
    100% 0,
    100% calc(100% - 12px),
    calc(100% - 12px) 100%,
    0 100%,
    0 12px
  );
  box-shadow: inset 0 0 0 1px
    color-mix(in oklab, var(--violet) 35%, transparent);
  filter: drop-shadow(
    0 0 14px color-mix(in oklab, var(--violet) 30%, transparent)
  );
  overflow: hidden;
  isolation: isolate;
  transition:
    color 200ms ease,
    background-image 200ms ease,
    transform 120ms ease,
    text-shadow 200ms ease,
    filter 200ms ease;
}
/* Lime ▸ glyph, painted in the regular text flow. */
.gh-content .kg-cta-card a.kg-cta-button::before,
.article .kg-cta-card a.kg-cta-button::before {
  content: "▸";
  flex: 0 0 auto;
  color: var(--lime);
  font-size: 0.95em;
  text-shadow: 0 0 8px color-mix(in oklab, var(--lime) 45%, transparent);
  z-index: 1;
}
/* Vertical scan strip — animates top→bottom on hover via `btnScan`. */
.gh-content .kg-cta-card a.kg-cta-button::after,
.article .kg-cta-card a.kg-cta-button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgb(255 255 255 / 0.14) 50%,
    transparent 100%
  );
  transform: translateY(-100%);
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 0;
}
.gh-content .kg-cta-card a.kg-cta-button:hover,
.gh-content .kg-cta-card a.kg-cta-button.kg-style-accent:hover,
.article .kg-cta-card a.kg-cta-button:hover,
.article .kg-cta-card a.kg-cta-button.kg-style-accent:hover {
  color: #fff !important;
  opacity: 1; /* cards.min.css sets opacity:.85 on hover — undo */
  background-image: linear-gradient(
    180deg,
    color-mix(in oklab, var(--violet) 38%, transparent) 0%,
    color-mix(in oklab, var(--violet) 12%, transparent) 100%
  );
  text-shadow:
    0 0 10px color-mix(in oklab, var(--violet) 60%, transparent),
    -1px 0 0 rgb(211 254 62 / 0.55),
    1px 0 0 rgb(255 59 107 / 0.55);
  filter: drop-shadow(
    0 0 22px color-mix(in oklab, var(--violet) 45%, transparent)
  );
  /* one-shot glitch nudge; defined in tokens.css. */
  animation: btnGlitchNudge 220ms steps(4) 1;
}
.gh-content .kg-cta-card a.kg-cta-button:hover::after,
.article .kg-cta-card a.kg-cta-button:hover::after {
  /* looping vertical scan; `btnScan` defined in tokens.css. */
  animation: btnScan 900ms linear infinite;
}
.gh-content .kg-cta-card a.kg-cta-button:active,
.article .kg-cta-card a.kg-cta-button:active {
  transform: translate(1px, 1px);
}
.gh-content .kg-cta-card a.kg-cta-button:focus-visible,
.article .kg-cta-card a.kg-cta-button:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 1px var(--lime);
  filter: drop-shadow(
    0 0 18px color-mix(in oklab, var(--lime) 45%, transparent)
  );
}

/* CRT scan sweep on hover — same `::after` as the bookmark card so both
   surfaces share the same hover language. */
.gh-content .kg-cta-card::after,
.article .kg-cta-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 42%,
    color-mix(in oklab, var(--lime) 18%, transparent) 50%,
    transparent 58%
  );
  transform: translateX(-110%);
  transition: transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 3;
}
.gh-content .kg-cta-card:hover::after,
.article .kg-cta-card:hover::after {
  transform: translateX(110%);
}

/* Card hover — exact match with the bookmark card: violet edge → lime,
   inset highlight + outer halo at the same intensities. */
.gh-content .kg-cta-card:hover,
.gh-content .kg-cta-card:focus-within,
.article .kg-cta-card:hover,
.article .kg-cta-card:focus-within {
  border-color: color-mix(in oklab, var(--lime) 55%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in oklab, var(--lime) 10%, transparent),
    0 18px 40px rgb(0 0 0 / 0.55),
    0 0 24px color-mix(in oklab, var(--lime) 14%, transparent);
}

/* Mobile: keep Ghost's column-stacking on .kg-cta-minimal, just shrink
   the image outline / tighten paddings (already handled via clamp). */
@media (max-width: 540px) {
  .gh-content .kg-cta-card.kg-cta-minimal .kg-cta-content,
  .article .kg-cta-card.kg-cta-minimal .kg-cta-content {
    align-items: flex-start;
  }
  .gh-content .kg-cta-card a.kg-cta-button,
  .article .kg-cta-card a.kg-cta-button {
    inline-size: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gh-content .kg-cta-card,
  .gh-content .kg-cta-card::after,
  .gh-content .kg-cta-card .kg-cta-image-container img,
  .gh-content .kg-cta-card a.kg-cta-button,
  .gh-content .kg-cta-card a.kg-cta-button::after,
  .article .kg-cta-card,
  .article .kg-cta-card::after,
  .article .kg-cta-card .kg-cta-image-container img,
  .article .kg-cta-card a.kg-cta-button,
  .article .kg-cta-card a.kg-cta-button::after {
    transition: none;
    animation: none !important;
  }
  .gh-content .kg-cta-card:hover::after,
  .article .kg-cta-card:hover::after {
    transform: translateX(-110%);
  }
  .gh-content .kg-cta-card a.kg-cta-button:active,
  .article .kg-cta-card a.kg-cta-button:active {
    transform: none;
  }
}

/* ── Ghost signup card → Atomys broadcast bulletin ─────────────────────
   Deliberately *not* the terminal-window treatment used by the bookmark
   and CTA cards. This is an open-edge composition: a 2px lime stripe
   across the top, a 1px dashed violet line across the bottom, layered
   radial blooms (lime top-right + violet bottom-left), and four
   L-shaped pixel corner ticks instead of a continuous border.

   cards.min.css obstacles:
     - `.kg-signup-card.kg-style-accent { background: var(--ghost-accent-color) }`
        ties on specificity with `.gh-content .kg-signup-card`, so the
        rules below chain `.kg-card.kg-signup-card` for 0-3-0 specificity.
     - The wrapper itself often carries inline styles
       (`style="background-color: #F0F0F0"`) emitted by the editor —
       defeated with `!important` on the background longhands.
     - Inner h2/p/button/disclaimer/success/error all carry inline
       `style="color: #..."` — same `!important` strategy.
     - `.kg-signup-card-fields` ships `background:#fff; border:1px solid #e6e6e6;
       border-radius:4px` and `.kg-signup-card-input { background:#fff }` — both
       reset to dark.
     - `.kg-signup-card-button:hover { opacity: .85 }` — undone via `opacity: 1`. */

.gh-content .kg-card.kg-signup-card,
.article .kg-card.kg-signup-card {
  position: relative;
  margin-block: 2.5rem;
  padding: 0;
  background:
    radial-gradient(
      circle at 100% 0%,
      color-mix(in oklab, var(--lime) 12%, transparent),
      transparent 55%
    ),
    radial-gradient(
      circle at 0% 100%,
      color-mix(in oklab, var(--violet) 16%, transparent),
      transparent 55%
    ),
    var(--bg-1) !important;
  border: 0;
  border-radius: 0;
  border-block-start: 2px solid var(--lime);
  border-block-end: 1px dashed
    color-mix(in oklab, var(--violet) 35%, transparent);
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 0 0 1px transparent,
    0 -8px 28px -8px color-mix(in oklab, var(--lime) 22%, transparent),
    0 14px 36px rgb(0 0 0 / 0.4);
}

/* Soft top halo that bleeds down from the lime stripe. */
.gh-content .kg-card.kg-signup-card::before,
.article .kg-card.kg-signup-card::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 90px;
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--lime) 14%, transparent),
    transparent
  );
  pointer-events: none;
  z-index: 0;
}

/* Four L-shaped pixel corner ticks, painted as 8 background-image layers.
   Top corners are lime (matches the top stripe), bottom corners violet. */
.gh-content .kg-card.kg-signup-card::after,
.article .kg-card.kg-signup-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--lime), var(--lime)),
    linear-gradient(var(--lime), var(--lime)),
    linear-gradient(var(--lime), var(--lime)),
    linear-gradient(var(--lime), var(--lime)),
    linear-gradient(var(--violet-hi), var(--violet-hi)),
    linear-gradient(var(--violet-hi), var(--violet-hi)),
    linear-gradient(var(--violet-hi), var(--violet-hi)),
    linear-gradient(var(--violet-hi), var(--violet-hi));
  background-position:
    /* TL: H · V */
    10px 10px,
    10px 10px,
    /* TR */ calc(100% - 10px) 10px,
    calc(100% - 10px) 10px,
    /* BL */ 10px calc(100% - 10px),
    10px calc(100% - 10px),
    /* BR */ calc(100% - 10px) calc(100% - 10px),
    calc(100% - 10px) calc(100% - 10px);
  background-size:
    18px 2px,
    2px 18px,
    18px 2px,
    2px 18px,
    18px 2px,
    2px 18px,
    18px 2px,
    2px 18px;
  background-repeat: no-repeat;
  pointer-events: none;
  opacity: 0.85;
  z-index: 1;
}

/* Content + text wrappers — strip Ghost's huge billboard padding and
   Ghost's `text-align: center` from .kg-align-center. The display: block
   override is scoped *out* of `.kg-layout-split` so split layouts keep
   their grid. */
.gh-content .kg-card.kg-signup-card:not(.kg-layout-split) .kg-signup-card-content,
.article .kg-card.kg-signup-card:not(.kg-layout-split) .kg-signup-card-content {
  display: block;
}
.gh-content .kg-card.kg-signup-card .kg-signup-card-content,
.article .kg-card.kg-signup-card .kg-signup-card-content {
  position: relative;
  z-index: 2;
}
.gh-content .kg-card.kg-signup-card .kg-signup-card-text,
.article .kg-card.kg-signup-card .kg-signup-card-text {
  position: relative;
  display: block;
  height: auto;
  padding: clamp(1.5rem, 4vmax, 3rem);
  background: transparent;
  text-align: left;
  align-items: stretch;
}

/* When a picture is present, switch the content wrapper to flex-row so
   the image sits beside the text instead of stacking on top. Wins over
   Ghost's `.kg-layout-split { display: grid }` thanks to the +1 class
   slot from `:has()`. */
.gh-content .kg-card.kg-signup-card:has(.kg-signup-card-content > picture) .kg-signup-card-content,
.article .kg-card.kg-signup-card:has(.kg-signup-card-content > picture) .kg-signup-card-content {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
}
/* `.kg-swapped` reverses author preference (text-left, image-right). */
.gh-content .kg-card.kg-signup-card.kg-swapped:has(.kg-signup-card-content > picture) .kg-signup-card-content,
.article .kg-card.kg-signup-card.kg-swapped:has(.kg-signup-card-content > picture) .kg-signup-card-content {
  flex-direction: row-reverse;
}

/* Optional picture — mirror the theme's `.cover` decoration:
   21:9 violet-bordered frame, saturate/contrast filter on the image,
   grain + vignette overlay (::before, multiply blend), and a lime
   scan hairline at 32% from top with 4 L-shaped corner brackets at
   4px inset (::after, painted as 9 stacked background-image layers).
   Ghost ships a thicket of conflicting rules on the image
   (`aspect-ratio: 1/1; height: 0; min-height: 100%; padding: 5.6em 0`)
   that combine to hide it inside our redesigned card — the rules below
   reset all of them via `!important`. */
.gh-content .kg-card.kg-signup-card .kg-signup-card-content > picture,
.article .kg-card.kg-signup-card .kg-signup-card-content > picture {
  position: relative;
  display: block;
  margin: clamp(1.5rem, 4vmax, 3rem) clamp(1.5rem, 4vmax, 3rem) 0;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: var(--bg-1);
  border: 1px solid color-mix(in oklab, var(--violet) 28%, transparent);
  border-radius: var(--radius-s);
  --bk: color-mix(in oklab, var(--lime) 55%, transparent);
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

/* In flex-row mode, picture stretches to the text column's height
   instead of using a fixed aspect-ratio; outer border becomes a single
   right-edge hairline so picture + text feel like one continuous panel. */
.gh-content .kg-card.kg-signup-card:has(.kg-signup-card-content > picture) .kg-signup-card-content > picture,
.article .kg-card.kg-signup-card:has(.kg-signup-card-content > picture) .kg-signup-card-content > picture {
  flex: 0 0 clamp(220px, 38%, 380px);
  align-self: stretch;
  margin: 0;
  aspect-ratio: auto;
  min-block-size: clamp(200px, 28vw, 320px);
  border: 0;
  border-inline-end: 1px solid color-mix(in oklab, var(--violet) 28%, transparent);
  border-radius: 0;
}
.gh-content .kg-card.kg-signup-card.kg-swapped:has(.kg-signup-card-content > picture) .kg-signup-card-content > picture,
.article .kg-card.kg-signup-card.kg-swapped:has(.kg-signup-card-content > picture) .kg-signup-card-content > picture {
  border-inline-end: 0;
  border-inline-start: 1px solid color-mix(in oklab, var(--violet) 28%, transparent);
}

.gh-content .kg-card.kg-signup-card .kg-signup-card-content > picture > img.kg-signup-card-image,
.article .kg-card.kg-signup-card .kg-signup-card-content > picture > img.kg-signup-card-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  aspect-ratio: auto !important;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: saturate(0.92) contrast(1.04);
  transition:
    transform 0.5s ease,
    filter 0.3s ease;
}

/* Grain + vignette overlay. */
.gh-content .kg-card.kg-signup-card .kg-signup-card-content > picture::before,
.article .kg-card.kg-signup-card .kg-signup-card-content > picture::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    repeating-linear-gradient(
      0deg,
      rgb(0 0 0 / 0.18) 0 1px,
      transparent 1px 3px
    ),
    linear-gradient(
      180deg,
      rgb(7 6 13 / 0.35) 0%,
      transparent 30%,
      transparent 65%,
      rgb(7 6 13 / 0.7) 100%
    );
  mix-blend-mode: multiply;
  opacity: 0.85;
}

/* Scan hairline at 32% + four L-brackets at 4px inset, painted as a
   single 9-layer background-image stack on the picture's `::after`. */
.gh-content .kg-card.kg-signup-card .kg-signup-card-content > picture::after,
.article .kg-card.kg-signup-card .kg-signup-card-content > picture::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background-image:
    /* scan hairline */
    linear-gradient(
      90deg,
      transparent,
      color-mix(in oklab, var(--lime) 55%, transparent),
      transparent
    ),
    /* TL bracket: H · V */
    linear-gradient(var(--bk), var(--bk)),
    linear-gradient(var(--bk), var(--bk)),
    /* TR */
    linear-gradient(var(--bk), var(--bk)),
    linear-gradient(var(--bk), var(--bk)),
    /* BL */
    linear-gradient(var(--bk), var(--bk)),
    linear-gradient(var(--bk), var(--bk)),
    /* BR */
    linear-gradient(var(--bk), var(--bk)),
    linear-gradient(var(--bk), var(--bk));
  background-position:
    0 32%,
    4px 4px,
    4px 4px,
    calc(100% - 4px) 4px,
    calc(100% - 4px) 4px,
    4px calc(100% - 4px),
    4px calc(100% - 4px),
    calc(100% - 4px) calc(100% - 4px),
    calc(100% - 4px) calc(100% - 4px);
  background-size:
    100% 1px,
    7px 1px, 1px 7px,
    7px 1px, 1px 7px,
    7px 1px, 1px 7px,
    7px 1px, 1px 7px;
  background-repeat: no-repeat;
}

/* Hover: image scales subtly, border lifts to lime, scan stays put. */
.gh-content .kg-card.kg-signup-card:hover .kg-signup-card-content > picture,
.article .kg-card.kg-signup-card:hover .kg-signup-card-content > picture {
  border-color: color-mix(in oklab, var(--lime) 55%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--lime) 10%, transparent),
    0 0 24px color-mix(in oklab, var(--lime) 14%, transparent);
}
/* In row mode the picture has no full border — lift the right-edge
   divider hairline to lime instead of trying to render a four-sided ring. */
.gh-content .kg-card.kg-signup-card:has(.kg-signup-card-content > picture):hover .kg-signup-card-content > picture,
.article .kg-card.kg-signup-card:has(.kg-signup-card-content > picture):hover .kg-signup-card-content > picture {
  box-shadow: none;
  border-inline-end-color: color-mix(in oklab, var(--lime) 55%, transparent);
}
.gh-content .kg-card.kg-signup-card.kg-swapped:has(.kg-signup-card-content > picture):hover .kg-signup-card-content > picture,
.article .kg-card.kg-signup-card.kg-swapped:has(.kg-signup-card-content > picture):hover .kg-signup-card-content > picture {
  border-inline-end-color: transparent;
  border-inline-start-color: color-mix(in oklab, var(--lime) 55%, transparent);
}
.gh-content .kg-card.kg-signup-card:hover .kg-signup-card-content > picture > img.kg-signup-card-image,
.article .kg-card.kg-signup-card:hover .kg-signup-card-content > picture > img.kg-signup-card-image {
  transform: scale(1.04);
  filter: saturate(1) contrast(1.08);
}

/* Re-stack vertically when the row would crush the columns. Below 720px
   the picture goes back to a 21:9 banner above the text. */
@media (max-width: 720px) {
  .gh-content .kg-card.kg-signup-card:has(.kg-signup-card-content > picture) .kg-signup-card-content,
  .article .kg-card.kg-signup-card:has(.kg-signup-card-content > picture) .kg-signup-card-content {
    flex-direction: column;
  }
  .gh-content .kg-card.kg-signup-card.kg-swapped:has(.kg-signup-card-content > picture) .kg-signup-card-content,
  .article .kg-card.kg-signup-card.kg-swapped:has(.kg-signup-card-content > picture) .kg-signup-card-content {
    flex-direction: column;
  }
  .gh-content .kg-card.kg-signup-card:has(.kg-signup-card-content > picture) .kg-signup-card-content > picture,
  .article .kg-card.kg-signup-card:has(.kg-signup-card-content > picture) .kg-signup-card-content > picture {
    flex: 0 0 auto;
    aspect-ratio: 21 / 9;
    min-block-size: 0;
    margin: clamp(1.5rem, 4vmax, 3rem) clamp(1.5rem, 4vmax, 3rem) 0;
    border: 1px solid color-mix(in oklab, var(--violet) 28%, transparent);
    border-radius: var(--radius-s);
  }
}

/* Mono lime eyebrow above the heading. */
.gh-content .kg-card.kg-signup-card .kg-signup-card-text::before,
.article .kg-card.kg-signup-card .kg-signup-card-text::before {
  content: "● TRANSMISSION · ENROLL";
  display: block;
  margin-block-end: 1rem;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: 700;
  color: var(--lime);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-shadow: 0 0 10px color-mix(in oklab, var(--lime) 45%, transparent);
}

/* Headline — chroma gradient sans, defeats `style="color:#000"`. */
.gh-content .kg-card.kg-signup-card h2.kg-signup-card-heading,
.article .kg-card.kg-signup-card h2.kg-signup-card-heading {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(1.75rem, 5vw, 3rem) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -0.04em !important;
  color: transparent !important;
  background: linear-gradient(
    135deg,
    var(--ink-0) 0%,
    var(--lime-hi) 55%,
    var(--violet-hi) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
}
.gh-content .kg-card.kg-signup-card h2.kg-signup-card-heading span,
.article .kg-card.kg-signup-card h2.kg-signup-card-heading span {
  color: inherit !important;
  background: inherit;
  -webkit-background-clip: inherit;
  background-clip: inherit;
}

/* Subheading — calm lede, ink-1. */
.gh-content .kg-card.kg-signup-card .kg-signup-card-subheading,
.article .kg-card.kg-signup-card .kg-signup-card-subheading {
  margin: 0.75rem 0 0 !important;
  max-width: 40em;
  font-family: var(--font-sans);
  font-size: var(--fs-lede) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: var(--ink-1) !important;
}
.gh-content .kg-card.kg-signup-card .kg-signup-card-subheading span,
.article .kg-card.kg-signup-card .kg-signup-card-subheading span {
  color: inherit !important;
}

/* Form layout. */
.gh-content .kg-card.kg-signup-card .kg-signup-card-form,
.article .kg-card.kg-signup-card .kg-signup-card-form {
  position: relative;
  margin-block-start: clamp(1.25rem, 2.5vw, 1.75rem) !important;
  width: 100%;
  max-width: 36rem;
}

/* Drop Ghost's white pill, let input + button breathe. */
.gh-content .kg-card.kg-signup-card .kg-signup-card-fields,
.article .kg-card.kg-signup-card .kg-signup-card-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  width: 100%;
  max-width: none;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

/* Input — dark mono, lime focus ring. */
.gh-content .kg-card.kg-signup-card .kg-signup-card-input,
.article .kg-card.kg-signup-card .kg-signup-card-input {
  flex: 1 1 16rem;
  min-width: 0;
  height: auto;
  min-height: 44px;
  margin: 0;
  padding: 0.75rem 0.875rem;
  background: var(--bg-1);
  color: var(--ink-0);
  border: 1px solid color-mix(in oklab, var(--violet) 35%, transparent);
  border-radius: var(--radius-s);
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  letter-spacing: 0.04em;
  transition:
    border-color 200ms ease,
    box-shadow 200ms ease;
}
.gh-content .kg-card.kg-signup-card .kg-signup-card-input::placeholder,
.article .kg-card.kg-signup-card .kg-signup-card-input::placeholder {
  color: color-mix(in oklab, var(--ink-3) 80%, var(--ink-0));
  font-style: italic;
}
.gh-content .kg-card.kg-signup-card .kg-signup-card-input:focus,
.gh-content .kg-card.kg-signup-card .kg-signup-card-input:focus-visible,
.article .kg-card.kg-signup-card .kg-signup-card-input:focus,
.article .kg-card.kg-signup-card .kg-signup-card-input:focus-visible {
  outline: 0;
  border-color: var(--lime);
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--lime) 18%, transparent),
    0 0 18px color-mix(in oklab, var(--lime) 25%, transparent);
}

/* Button — kit's hex-notched primary, same animations as the CTA. */
.gh-content .kg-card.kg-signup-card .kg-signup-card-button,
.gh-content .kg-card.kg-signup-card .kg-signup-card-button.kg-style-accent,
.article .kg-card.kg-signup-card .kg-signup-card-button,
.article .kg-card.kg-signup-card .kg-signup-card-button.kg-style-accent {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  height: auto;
  min-height: 44px;
  padding: 0 1.375rem;
  font-family: var(--font-mono);
  font-size: var(--fs-meta) !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  line-height: 1 !important;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  color: color-mix(in oklab, var(--violet) 25%, var(--ink-0)) !important;
  background-color: var(--bg-1) !important;
  background-image: linear-gradient(
    180deg,
    color-mix(in oklab, var(--violet) 22%, transparent) 0%,
    color-mix(in oklab, var(--violet) 6%, transparent) 100%
  );
  border: 0;
  border-radius: 0;
  clip-path: polygon(
    12px 0,
    100% 0,
    100% calc(100% - 12px),
    calc(100% - 12px) 100%,
    0 100%,
    0 12px
  );
  box-shadow: inset 0 0 0 1px
    color-mix(in oklab, var(--violet) 35%, transparent);
  filter: drop-shadow(
    0 0 14px color-mix(in oklab, var(--violet) 30%, transparent)
  );
  overflow: hidden;
  text-overflow: clip;
  transition:
    color 200ms ease,
    background-image 200ms ease,
    transform 120ms ease,
    text-shadow 200ms ease,
    filter 200ms ease;
}

/* Style the inner default-state span so we can prefix ▸ via ::before. */
.gh-content .kg-card.kg-signup-card .kg-signup-card-button-default,
.article .kg-card.kg-signup-card .kg-signup-card-button-default {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  z-index: 1;
}
.gh-content .kg-card.kg-signup-card .kg-signup-card-button-default::before,
.article .kg-card.kg-signup-card .kg-signup-card-button-default::before {
  content: "▸";
  color: var(--lime);
  font-size: 0.95em;
  text-shadow: 0 0 8px color-mix(in oklab, var(--lime) 45%, transparent);
}

/* Loading-state spinner — the SVG fills currentColor. */
.gh-content .kg-card.kg-signup-card .kg-signup-card-button-loading,
.article .kg-card.kg-signup-card .kg-signup-card-button-loading {
  color: var(--lime);
  z-index: 1;
}
.gh-content
  .kg-card.kg-signup-card
  .kg-signup-card-form.loading
  .kg-signup-card-button,
.article
  .kg-card.kg-signup-card
  .kg-signup-card-form.loading
  .kg-signup-card-button {
  animation: none;
}

/* Vertical scan strip — same `btnScan`/`btnGlitchNudge` as the CTA. */
.gh-content .kg-card.kg-signup-card .kg-signup-card-button::after,
.article .kg-card.kg-signup-card .kg-signup-card-button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgb(255 255 255 / 0.14) 50%,
    transparent 100%
  );
  transform: translateY(-100%);
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 0;
}
.gh-content .kg-card.kg-signup-card .kg-signup-card-button:hover,
.article .kg-card.kg-signup-card .kg-signup-card-button:hover {
  color: #fff !important;
  opacity: 1; /* cards.min.css hover dim — undo */
  background-image: linear-gradient(
    180deg,
    color-mix(in oklab, var(--violet) 38%, transparent) 0%,
    color-mix(in oklab, var(--violet) 12%, transparent) 100%
  );
  text-shadow:
    0 0 10px color-mix(in oklab, var(--violet) 60%, transparent),
    -1px 0 0 rgb(211 254 62 / 0.55),
    1px 0 0 rgb(255 59 107 / 0.55);
  filter: drop-shadow(
    0 0 22px color-mix(in oklab, var(--violet) 45%, transparent)
  );
  animation: btnGlitchNudge 220ms steps(4) 1;
}
.gh-content .kg-card.kg-signup-card .kg-signup-card-button:hover::after,
.article .kg-card.kg-signup-card .kg-signup-card-button:hover::after {
  animation: btnScan 900ms linear infinite;
}
.gh-content .kg-card.kg-signup-card .kg-signup-card-button:active,
.article .kg-card.kg-signup-card .kg-signup-card-button:active {
  transform: translate(1px, 1px);
}
.gh-content .kg-card.kg-signup-card .kg-signup-card-button:focus-visible,
.article .kg-card.kg-signup-card .kg-signup-card-button:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 1px var(--lime);
  filter: drop-shadow(
    0 0 18px color-mix(in oklab, var(--lime) 45%, transparent)
  );
}

/* Error state — danger glow on the input + uppercase mono error label. */
.gh-content
  .kg-card.kg-signup-card
  .kg-signup-card-form.error
  .kg-signup-card-fields,
.article
  .kg-card.kg-signup-card
  .kg-signup-card-form.error
  .kg-signup-card-fields {
  border: 0;
  box-shadow: none;
}
.gh-content
  .kg-card.kg-signup-card
  .kg-signup-card-form.error
  .kg-signup-card-input,
.article
  .kg-card.kg-signup-card
  .kg-signup-card-form.error
  .kg-signup-card-input {
  border-color: var(--danger);
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--danger) 20%, transparent),
    0 0 18px color-mix(in oklab, var(--danger) 30%, transparent);
}
.gh-content .kg-card.kg-signup-card .kg-signup-card-error,
.article .kg-card.kg-signup-card .kg-signup-card-error {
  position: static;
  display: block;
  margin-block-start: 0.625rem;
  font-family: var(--font-mono);
  font-size: var(--fs-meta) !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--danger-hi) !important;
}
.gh-content .kg-card.kg-signup-card .kg-signup-card-error:not(:empty)::before,
.article .kg-card.kg-signup-card .kg-signup-card-error:not(:empty)::before {
  content: "✗ ";
  color: var(--danger);
}

/* Success state — lime status pill that replaces the form. */
.gh-content .kg-card.kg-signup-card .kg-signup-card-success,
.article .kg-card.kg-signup-card .kg-signup-card-success {
  display: none;
  align-items: center;
  gap: 0.625rem;
  height: auto !important;
  margin: 0;
  padding: 0.875rem 1rem;
  background: color-mix(in oklab, var(--lime) 8%, transparent);
  border: 1px solid color-mix(in oklab, var(--lime) 35%, transparent);
  border-radius: var(--radius-s);
  font-family: var(--font-mono);
  font-size: var(--fs-sm) !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  color: var(--lime) !important;
  letter-spacing: 0.06em;
}
.gh-content
  .kg-card.kg-signup-card
  .kg-signup-card-form.success
  .kg-signup-card-success,
.article
  .kg-card.kg-signup-card
  .kg-signup-card-form.success
  .kg-signup-card-success {
  display: flex;
}
.gh-content .kg-card.kg-signup-card .kg-signup-card-success::before,
.article .kg-card.kg-signup-card .kg-signup-card-success::before {
  content: "●";
  color: var(--lime);
  text-shadow: 0 0 8px color-mix(in oklab, var(--lime) 50%, transparent);
}

/* Disclaimer — mono micro at the bottom, `// ` lime prefix. */
.gh-content .kg-card.kg-signup-card .kg-signup-card-disclaimer,
.article .kg-card.kg-signup-card .kg-signup-card-disclaimer {
  margin: 1.25rem 0 0 !important;
  font-family: var(--font-mono);
  font-size: var(--fs-meta) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: var(--ink-3) !important;
  letter-spacing: 0.12em;
}
.gh-content .kg-card.kg-signup-card .kg-signup-card-disclaimer::before,
.article .kg-card.kg-signup-card .kg-signup-card-disclaimer::before {
  content: "// ";
  color: var(--lime);
  margin-inline-end: 0.25rem;
}
.gh-content .kg-card.kg-signup-card .kg-signup-card-disclaimer span,
.article .kg-card.kg-signup-card .kg-signup-card-disclaimer span {
  color: inherit !important;
}

/* Mobile — stack input + button vertically, both full-width. */
@media (max-width: 540px) {
  .gh-content .kg-card.kg-signup-card .kg-signup-card-input,
  .gh-content .kg-card.kg-signup-card .kg-signup-card-button,
  .article .kg-card.kg-signup-card .kg-signup-card-input,
  .article .kg-card.kg-signup-card .kg-signup-card-button {
    flex: 1 1 100%;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gh-content .kg-card.kg-signup-card .kg-signup-card-input,
  .gh-content .kg-card.kg-signup-card .kg-signup-card-button,
  .gh-content .kg-card.kg-signup-card .kg-signup-card-button::after,
  .gh-content .kg-card.kg-signup-card .kg-signup-card-content > picture,
  .gh-content .kg-card.kg-signup-card .kg-signup-card-content > picture > img.kg-signup-card-image,
  .article .kg-card.kg-signup-card .kg-signup-card-input,
  .article .kg-card.kg-signup-card .kg-signup-card-button,
  .article .kg-card.kg-signup-card .kg-signup-card-button::after,
  .article .kg-card.kg-signup-card .kg-signup-card-content > picture,
  .article .kg-card.kg-signup-card .kg-signup-card-content > picture > img.kg-signup-card-image {
    transition: none;
    animation: none !important;
  }
  .gh-content .kg-card.kg-signup-card:hover .kg-signup-card-content > picture > img.kg-signup-card-image,
  .article .kg-card.kg-signup-card:hover .kg-signup-card-content > picture > img.kg-signup-card-image {
    transform: none;
  }
  .gh-content .kg-card.kg-signup-card .kg-signup-card-button:active,
  .article .kg-card.kg-signup-card .kg-signup-card-button:active {
    transform: none;
  }
}

/* ── Ghost header card → Atomys mainframe section break ────────────────
   The fourth distinct treatment in this file: a full-bleed cinematic
   banner. No terminal window, no broadcast bulletin — this one is a
   grand section divider. Scan-line overlay + ambient corner blooms +
   massive chroma-gradient heading + mono corner labels.

   cards.min.css obstacles to defeat (all unlayered):
     - `.kg-header-card.kg-style-accent { background: var(--ghost-accent-color) }`
        — beaten by `.gh-content .kg-card.kg-header-card` 0-3-0.
     - `.kg-header-card:not(.kg-style-light) h2.kg-header-card-heading`
        forces `color: #fff`. The chroma gradient needs
        `color: transparent` so we override with `!important`.
     - Editor inline `style="color:#FFFFFF"` on h2/p — same `!important`.
     - The wrapper carries `style="background-color:#000000"` from the
        editor; left intact so authors can still pick a color, with
        scan-lines and corner blooms layered as `background-image`. */

.gh-content .kg-card.kg-header-card,
.article .kg-card.kg-header-card {
  position: relative;
  margin-block: 3rem;
  /* `background-color` left to whatever the editor stored inline so the
     color picker still functions; everything below paints on top via
     `background-image` longhands.
     Layers (top → bottom):
       - violet bloom from top-left corner
       - lime bloom from bottom-right corner
       - vertical data grid (every 80px)
       - horizontal CRT scan-lines (every 4px) */
  background-image:
    radial-gradient(
      ellipse at 0% 0%,
      color-mix(in oklab, var(--violet) 28%, transparent),
      transparent 60%
    ),
    radial-gradient(
      ellipse at 100% 100%,
      color-mix(in oklab, var(--lime) 14%, transparent),
      transparent 60%
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 79px,
      rgb(255 255 255 / 0.014) 79px,
      rgb(255 255 255 / 0.014) 80px
    ),
    repeating-linear-gradient(
      180deg,
      transparent 0,
      transparent 3px,
      rgb(255 255 255 / 0.022) 3px,
      rgb(255 255 255 / 0.022) 4px
    );
  border: 0;
  border-radius: 0;
  border-block-start: 2px solid var(--lime);
  border-block-end: 1px dashed
    color-mix(in oklab, var(--violet) 40%, transparent);
  overflow: hidden;
  isolation: isolate;
  /* Subtle pixel-corner notches (4×4) — same shape vocabulary as the
     kit's `.pixel-corners` but dialed down so the silhouette feels
     like a tick, not a chunk. */
  clip-path: polygon(
    0 4px,
    4px 4px,
    4px 0,
    calc(100% - 4px) 0,
    calc(100% - 4px) 4px,
    100% 4px,
    100% calc(100% - 4px),
    calc(100% - 4px) calc(100% - 4px),
    calc(100% - 4px) 100%,
    4px 100%,
    4px calc(100% - 4px),
    0 calc(100% - 4px)
  );
  /* clip-path clips box-shadow flat to the polygon; drop-shadow follows
     the silhouette so the outer halo survives the pixel notches. */
  filter: drop-shadow(
      0 -10px 28px color-mix(in oklab, var(--lime) 22%, transparent)
    )
    drop-shadow(0 18px 40px rgb(0 0 0 / 0.5));
}

/* Top-left eyebrow with Japanese accent — anchors the whole composition. */
.gh-content .kg-card.kg-header-card::before,
.article .kg-card.kg-header-card::before {
  content: "アトミス · //§SECTION_BREAK";
  position: absolute;
  inset-block-start: 18px;
  inset-inline-start: clamp(1rem, 4vw, 2rem);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  color: var(--lime);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-shadow: 0 0 10px color-mix(in oklab, var(--lime) 45%, transparent);
  z-index: 3;
  pointer-events: none;
}

/* Bottom-right signature with pulsing dot on the trailing ●. */
.gh-content .kg-card.kg-header-card::after,
.article .kg-card.kg-header-card::after {
  content: "END_TRANSMISSION · 0xDEADBEEF";
  position: absolute;
  inset-block-end: 16px;
  inset-inline-end: clamp(1rem, 4vw, 2rem);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: color-mix(in oklab, var(--ink-3) 80%, var(--violet));
  letter-spacing: 0.22em;
  text-transform: uppercase;
  z-index: 3;
  pointer-events: none;
}

/* Content wrapper hosts the top-right [● TRANSMITTING] indicator
   (::before) and the moving CRT scan line (::after). */
.gh-content .kg-card.kg-header-card .kg-header-card-content,
.article .kg-card.kg-header-card .kg-header-card-content {
  position: relative;
  z-index: 2;
}

/* Top-right pulsing indicator. */
.gh-content .kg-card.kg-header-card .kg-header-card-content::before,
.article .kg-card.kg-header-card .kg-header-card-content::before {
  content: "[● REC]";
  position: absolute;
  inset-block-start: 18px;
  inset-inline-end: clamp(1rem, 4vw, 2rem);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  color: var(--lime);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-shadow: 0 0 8px color-mix(in oklab, var(--lime) 50%, transparent);
  animation: blink calc(var(--fx-vhs, 7s) / 5) step-end infinite;
  z-index: 3;
  pointer-events: none;
}

/* Moving CRT scan line — uses the kit's `crt-scan` keyframe + its
   speed/opacity vars (gated by reduced-motion in tokens.css). */
.gh-content .kg-card.kg-header-card .kg-header-card-content::after,
.article .kg-card.kg-header-card .kg-header-card-content::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  block-size: 80px;
  background: linear-gradient(
    180deg,
    transparent,
    color-mix(in oklab, var(--lime) 10%, transparent),
    transparent
  );
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 1;
  opacity: var(--fx-crt-scan, 1);
  animation: crt-scan var(--fx-crt-scan-speed, 6s) linear infinite;
}

.gh-content .kg-card.kg-header-card .kg-header-card-text,
.article .kg-card.kg-header-card .kg-header-card-text {
  background: transparent;
  font-family: var(--font-sans);
  /* Halve Ghost's billboard padding (was min(12vmax, 260px) 0 for
     `.kg-width-full`, min(6.4vmax, 120px) min(4vmax, 80px) default).
     Inline padding kept tight so corner labels never collide with text. */
  padding: clamp(2.5rem, 5vmax, 5rem) clamp(1.5rem, 3vw, 2.5rem) !important;
}
.gh-content .kg-card.kg-header-card.kg-width-wide .kg-header-card-text,
.article .kg-card.kg-header-card.kg-width-wide .kg-header-card-text {
  padding: clamp(3rem, 6vmax, 6rem) clamp(2rem, 4vw, 3rem) !important;
}
.gh-content .kg-card.kg-header-card.kg-width-full .kg-header-card-text,
.article .kg-card.kg-header-card.kg-width-full .kg-header-card-text {
  padding: clamp(3.5rem, 7vmax, 7rem) clamp(2rem, 4vw, 3rem) !important;
}

/* Massive chroma-gradient heading + VHS flicker. Defeats Ghost's
   `:not(.kg-style-light) { color:#fff }` AND the editor inline
   `style="color:#FFFFFF"` via `!important`. The `vhs-shift` animation
   from tokens.css fires every 7s for a quick chromatic-aberration jolt. */
.gh-content .kg-card.kg-header-card h2.kg-header-card-heading,
.article .kg-card.kg-header-card h2.kg-header-card-heading {
  position: relative;
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(2.5rem, 8vw, 6rem) !important;
  font-weight: 800 !important;
  line-height: 0.95 !important;
  letter-spacing: -0.045em !important;
  color: transparent !important;
  background: linear-gradient(
    135deg,
    var(--ink-0) 0%,
    var(--lime-hi) 50%,
    var(--violet-hi) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  text-wrap: balance;
  animation: vhs-shift var(--fx-vhs, 7s) infinite;
}
.gh-content .kg-card.kg-header-card.kg-width-full h2.kg-header-card-heading,
.article .kg-card.kg-header-card.kg-width-full h2.kg-header-card-heading {
  font-size: clamp(3rem, 10vw, 5rem) !important;
}
.gh-content .kg-card.kg-header-card h2.kg-header-card-heading span,
.article .kg-card.kg-header-card h2.kg-header-card-heading span {
  color: inherit !important;
  background: inherit;
  -webkit-background-clip: inherit;
  background-clip: inherit;
}

/* Subheading — italic mono lede that contrasts with the bold sans heading. */
.gh-content .kg-card.kg-header-card .kg-header-card-subheading,
.article .kg-card.kg-header-card .kg-header-card-subheading {
  margin: 1rem 0 0 !important;
  max-width: min(48em, 90%);
  font-family: var(--font-mono);
  font-size: clamp(1rem, 1.6vw, 1.2rem) !important;
  font-weight: 400 !important;
  font-style: italic;
  line-height: 1.55 !important;
  color: var(--ink-1) !important;
  letter-spacing: 0.02em;
}
.gh-content .kg-card.kg-header-card .kg-header-card-subheading span,
.article .kg-card.kg-header-card .kg-header-card-subheading span {
  color: inherit !important;
}
/* Blinking lime cursor at the end of the subheading — reuses the kit's
   `blink` keyframe from tokens.css. */
.gh-content .kg-card.kg-header-card .kg-header-card-subheading::after,
.article .kg-card.kg-header-card .kg-header-card-subheading::after {
  content: " ▋";
  display: inline-block;
  margin-inline-start: 0.2em;
  color: var(--lime);
  font-style: normal;
  text-shadow: 0 0 8px color-mix(in oklab, var(--lime) 50%, transparent);
  animation: blink 1.05s step-end infinite;
}

/* Optional `.kg-header-card-button` (when authors add a CTA) — same
   hex-notched primary as elsewhere, scaled up a touch for the banner. */
.gh-content .kg-card.kg-header-card a.kg-header-card-button,
.article .kg-card.kg-header-card a.kg-header-card-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  height: auto;
  min-height: 48px;
  margin-block-start: 1.5rem !important;
  padding: 0 1.5rem;
  font-family: var(--font-mono);
  font-size: var(--fs-meta) !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  line-height: 1 !important;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: color-mix(in oklab, var(--violet) 25%, var(--ink-0)) !important;
  background-color: var(--bg-1) !important;
  background-image: linear-gradient(
    180deg,
    color-mix(in oklab, var(--violet) 22%, transparent) 0%,
    color-mix(in oklab, var(--violet) 6%, transparent) 100%
  ) !important;
  fill: currentColor;
  border: 0;
  border-radius: 0;
  clip-path: polygon(
    14px 0,
    100% 0,
    100% calc(100% - 14px),
    calc(100% - 14px) 100%,
    0 100%,
    0 14px
  );
  box-shadow: inset 0 0 0 1px
    color-mix(in oklab, var(--violet) 35%, transparent);
  filter: drop-shadow(
    0 0 16px color-mix(in oklab, var(--violet) 30%, transparent)
  );
  overflow: hidden;
  cursor: pointer;
  transition:
    color 200ms ease,
    background-image 200ms ease,
    transform 120ms ease,
    text-shadow 200ms ease,
    filter 200ms ease;
}
.gh-content .kg-card.kg-header-card a.kg-header-card-button::before,
.article .kg-card.kg-header-card a.kg-header-card-button::before {
  content: "▸";
  color: var(--lime);
  font-size: 0.95em;
  text-shadow: 0 0 8px color-mix(in oklab, var(--lime) 45%, transparent);
}
.gh-content .kg-card.kg-header-card a.kg-header-card-button::after,
.article .kg-card.kg-header-card a.kg-header-card-button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgb(255 255 255 / 0.14) 50%,
    transparent 100%
  );
  transform: translateY(-100%);
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 0;
}
.gh-content .kg-card.kg-header-card a.kg-header-card-button:hover,
.article .kg-card.kg-header-card a.kg-header-card-button:hover {
  color: #fff !important;
  opacity: 1;
  background-image: linear-gradient(
    180deg,
    color-mix(in oklab, var(--violet) 38%, transparent) 0%,
    color-mix(in oklab, var(--violet) 12%, transparent) 100%
  ) !important;
  text-shadow:
    0 0 10px color-mix(in oklab, var(--violet) 60%, transparent),
    -1px 0 0 rgb(211 254 62 / 0.55),
    1px 0 0 rgb(255 59 107 / 0.55);
  filter: drop-shadow(
    0 0 22px color-mix(in oklab, var(--violet) 45%, transparent)
  );
  animation: btnGlitchNudge 220ms steps(4) 1;
}
.gh-content .kg-card.kg-header-card a.kg-header-card-button:hover::after,
.article .kg-card.kg-header-card a.kg-header-card-button:hover::after {
  animation: btnScan 900ms linear infinite;
}
.gh-content .kg-card.kg-header-card a.kg-header-card-button:active,
.article .kg-card.kg-header-card a.kg-header-card-button:active {
  transform: translate(1px, 1px);
}
.gh-content .kg-card.kg-header-card a.kg-header-card-button:focus-visible,
.article .kg-card.kg-header-card a.kg-header-card-button:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 1px var(--lime);
  filter: drop-shadow(
    0 0 18px color-mix(in oklab, var(--lime) 45%, transparent)
  );
}

/* Image-style header (`.kg-style-image`) — when an author drops a hero
   image, darken the gradient overlay so the chroma heading stays
   readable, and lift the corner labels above the picture layer. */
.gh-content .kg-card.kg-header-card.kg-style-image::before,
.gh-content .kg-card.kg-header-card.kg-style-image::after,
.article .kg-card.kg-header-card.kg-style-image::before,
.article .kg-card.kg-header-card.kg-style-image::after {
  z-index: 1000;
}

/* ── Layout-split header with image → flex-row picture beside text ────
   Same `:has(picture)`-driven flex-row strategy as the signup card,
   plus the cover decoration (saturate filter, grain + vignette overlay,
   lime scan hairline at 32%, four 7×7 L-brackets at 4px inset). Wins
   over Ghost's `.kg-layout-split .kg-header-card-content { display: grid }`
   thanks to the `:has()` slot. */

.gh-content .kg-card.kg-header-card:has(.kg-header-card-content > picture) .kg-header-card-content,
.article .kg-card.kg-header-card:has(.kg-header-card-content > picture) .kg-header-card-content {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
}
.gh-content .kg-card.kg-header-card.kg-swapped:has(.kg-header-card-content > picture) .kg-header-card-content,
.article .kg-card.kg-header-card.kg-swapped:has(.kg-header-card-content > picture) .kg-header-card-content {
  flex-direction: row-reverse;
}

/* Picture frame — fills the column height, no aspect ratio (let flex
   stretch handle it), single divider hairline between picture and text. */
.gh-content .kg-card.kg-header-card .kg-header-card-content > picture,
.article .kg-card.kg-header-card .kg-header-card-content > picture {
  position: relative;
  display: block;
  flex: 0 0 clamp(260px, 44%, 520px);
  align-self: stretch;
  margin: 0;
  min-block-size: clamp(240px, 32vw, 420px);
  overflow: hidden;
  background: var(--bg-1);
  border: 0;
  border-inline-end: 1px solid color-mix(in oklab, var(--violet) 30%, transparent);
  border-radius: 0;
  z-index: 2;
  --bk: color-mix(in oklab, var(--lime) 55%, transparent);
  transition:
    border-inline-end-color 0.3s ease,
    border-inline-start-color 0.3s ease;
}
.gh-content .kg-card.kg-header-card.kg-swapped .kg-header-card-content > picture,
.article .kg-card.kg-header-card.kg-swapped .kg-header-card-content > picture {
  border-inline-end: 0;
  border-inline-start: 1px solid color-mix(in oklab, var(--violet) 30%, transparent);
}

/* Image — defeat Ghost's confusing rules
   (`width:100%; height:0; min-height:100%; padding:5.6em 0; object-fit:contain`
   for kg-content-wide and the absolute positioning for direct-child case). */
.gh-content .kg-card.kg-header-card .kg-header-card-content > picture > img.kg-header-card-image,
.article .kg-card.kg-header-card .kg-header-card-content > picture > img.kg-header-card-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  aspect-ratio: auto !important;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: saturate(0.92) contrast(1.04);
  transition:
    transform 0.5s ease,
    filter 0.3s ease;
}

/* Grain + vignette overlay. */
.gh-content .kg-card.kg-header-card .kg-header-card-content > picture::before,
.article .kg-card.kg-header-card .kg-header-card-content > picture::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    repeating-linear-gradient(
      0deg,
      rgb(0 0 0 / 0.18) 0 1px,
      transparent 1px 3px
    ),
    linear-gradient(
      180deg,
      rgb(7 6 13 / 0.35) 0%,
      transparent 30%,
      transparent 65%,
      rgb(7 6 13 / 0.7) 100%
    );
  mix-blend-mode: multiply;
  opacity: 0.85;
}

/* Scan hairline at 32% + four corner brackets (9-layer background-image). */
.gh-content .kg-card.kg-header-card .kg-header-card-content > picture::after,
.article .kg-card.kg-header-card .kg-header-card-content > picture::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background-image:
    linear-gradient(
      90deg,
      transparent,
      color-mix(in oklab, var(--lime) 55%, transparent),
      transparent
    ),
    linear-gradient(var(--bk), var(--bk)),
    linear-gradient(var(--bk), var(--bk)),
    linear-gradient(var(--bk), var(--bk)),
    linear-gradient(var(--bk), var(--bk)),
    linear-gradient(var(--bk), var(--bk)),
    linear-gradient(var(--bk), var(--bk)),
    linear-gradient(var(--bk), var(--bk)),
    linear-gradient(var(--bk), var(--bk));
  background-position:
    0 32%,
    4px 4px, 4px 4px,
    calc(100% - 4px) 4px, calc(100% - 4px) 4px,
    4px calc(100% - 4px), 4px calc(100% - 4px),
    calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) calc(100% - 4px);
  background-size:
    100% 1px,
    7px 1px, 1px 7px,
    7px 1px, 1px 7px,
    7px 1px, 1px 7px,
    7px 1px, 1px 7px;
  background-repeat: no-repeat;
}

/* Hover — image scales subtly, divider hairline lifts to lime. */
.gh-content .kg-card.kg-header-card:hover .kg-header-card-content > picture,
.article .kg-card.kg-header-card:hover .kg-header-card-content > picture {
  border-inline-end-color: color-mix(in oklab, var(--lime) 55%, transparent);
}
.gh-content .kg-card.kg-header-card.kg-swapped:hover .kg-header-card-content > picture,
.article .kg-card.kg-header-card.kg-swapped:hover .kg-header-card-content > picture {
  border-inline-end-color: transparent;
  border-inline-start-color: color-mix(in oklab, var(--lime) 55%, transparent);
}
.gh-content .kg-card.kg-header-card:hover .kg-header-card-content > picture > img.kg-header-card-image,
.article .kg-card.kg-header-card:hover .kg-header-card-content > picture > img.kg-header-card-image {
  transform: scale(1.03);
  filter: saturate(1) contrast(1.08);
}

/* Re-stack vertically when the column would crush. */
@media (max-width: 720px) {
  .gh-content .kg-card.kg-header-card:has(.kg-header-card-content > picture) .kg-header-card-content,
  .gh-content .kg-card.kg-header-card.kg-swapped:has(.kg-header-card-content > picture) .kg-header-card-content,
  .article .kg-card.kg-header-card:has(.kg-header-card-content > picture) .kg-header-card-content,
  .article .kg-card.kg-header-card.kg-swapped:has(.kg-header-card-content > picture) .kg-header-card-content {
    flex-direction: column;
  }
  .gh-content .kg-card.kg-header-card .kg-header-card-content > picture,
  .article .kg-card.kg-header-card .kg-header-card-content > picture {
    flex: 0 0 auto;
    aspect-ratio: 21 / 9;
    min-block-size: 0;
    border: 1px solid color-mix(in oklab, var(--violet) 30%, transparent);
    border-radius: var(--radius-s);
    margin: 0 clamp(1rem, 3vw, 2rem);
  }
}

/* Mobile — shrink the corner labels so they don't crowd a small heading,
   and tighten the heading's outsize clamp at the low end. */
@media (max-width: 640px) {
  .gh-content .kg-card.kg-header-card::before,
  .article .kg-card.kg-header-card::before {
    font-size: var(--fs-micro);
    inset-block-start: 12px;
  }
  .gh-content .kg-card.kg-header-card::after,
  .article .kg-card.kg-header-card::after {
    font-size: var(--fs-nano);
    inset-block-end: 10px;
  }
  .gh-content .kg-card.kg-header-card a.kg-header-card-button,
  .article .kg-card.kg-header-card a.kg-header-card-button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gh-content .kg-card.kg-header-card h2.kg-header-card-heading,
  .gh-content .kg-card.kg-header-card .kg-header-card-subheading::after,
  .gh-content .kg-card.kg-header-card .kg-header-card-content::before,
  .gh-content .kg-card.kg-header-card .kg-header-card-content::after,
  .gh-content .kg-card.kg-header-card .kg-header-card-content > picture,
  .gh-content .kg-card.kg-header-card .kg-header-card-content > picture > img.kg-header-card-image,
  .gh-content .kg-card.kg-header-card a.kg-header-card-button,
  .gh-content .kg-card.kg-header-card a.kg-header-card-button::after,
  .article .kg-card.kg-header-card h2.kg-header-card-heading,
  .article .kg-card.kg-header-card .kg-header-card-subheading::after,
  .article .kg-card.kg-header-card .kg-header-card-content::before,
  .article .kg-card.kg-header-card .kg-header-card-content::after,
  .article .kg-card.kg-header-card .kg-header-card-content > picture,
  .article .kg-card.kg-header-card .kg-header-card-content > picture > img.kg-header-card-image,
  .article .kg-card.kg-header-card a.kg-header-card-button,
  .article .kg-card.kg-header-card a.kg-header-card-button::after {
    transition: none;
    animation: none !important;
  }
  .gh-content .kg-card.kg-header-card:hover .kg-header-card-content > picture > img.kg-header-card-image,
  .article .kg-card.kg-header-card:hover .kg-header-card-content > picture > img.kg-header-card-image {
    transform: none;
  }
  .gh-content .kg-card.kg-header-card a.kg-header-card-button:active,
  .article .kg-card.kg-header-card a.kg-header-card-button:active {
    transform: none;
  }
}

/* ── Ghost toggle card → subtle Atomys retint ──────────────────────────
   Light touch only: replace Ghost's gray inset border with violet,
   lime the chevron, lift the heading lime on hover. Ghost handles the
   open/close state via `data-kg-toggle-state` and the rotate transform
   on the SVG — that logic stays intact. */

.gh-content .kg-card.kg-toggle-card,
.article .kg-card.kg-toggle-card {
  margin-block: 1.5rem;
  padding: 1rem 1.25rem;
  background: color-mix(in oklab, var(--violet) 4%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--violet) 28%, transparent);
  border-radius: var(--radius-s);
  transition:
    box-shadow 200ms ease,
    background 200ms ease;
}
.gh-content .kg-card.kg-toggle-card:hover,
.gh-content .kg-card.kg-toggle-card:focus-within,
.article .kg-card.kg-toggle-card:hover,
.article .kg-card.kg-toggle-card:focus-within {
  background: color-mix(in oklab, var(--violet) 6%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--lime) 32%, transparent);
}

.gh-content .kg-card.kg-toggle-card .kg-toggle-heading,
.article .kg-card.kg-toggle-card .kg-toggle-heading {
  align-items: center;
  gap: 0.75rem;
}
.gh-content .kg-card.kg-toggle-card h4.kg-toggle-heading-text,
.article .kg-card.kg-toggle-card h4.kg-toggle-heading-text {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink-0);
  transition: color 200ms ease;
}
.gh-content .kg-card.kg-toggle-card:hover h4.kg-toggle-heading-text,
.article .kg-card.kg-toggle-card:hover h4.kg-toggle-heading-text {
  color: var(--lime-hi);
}

/* Chevron — lime instead of gray, soft glow that strengthens on hover. */
.gh-content .kg-card.kg-toggle-card .kg-toggle-heading svg,
.article .kg-card.kg-toggle-card .kg-toggle-heading svg {
  color: var(--lime);
  filter: drop-shadow(0 0 4px color-mix(in oklab, var(--lime) 35%, transparent));
}
.gh-content .kg-card.kg-toggle-card:hover .kg-toggle-heading svg,
.article .kg-card.kg-toggle-card:hover .kg-toggle-heading svg {
  filter: drop-shadow(0 0 8px color-mix(in oklab, var(--lime) 55%, transparent));
}

/* Content prose — sans body in ink-1, hairline lime divider above. */
.gh-content .kg-card.kg-toggle-card .kg-toggle-content,
.article .kg-card.kg-toggle-card .kg-toggle-content {
  font-family: var(--font-sans);
}
.gh-content .kg-card.kg-toggle-card[data-kg-toggle-state="open"] .kg-toggle-content,
.article .kg-card.kg-toggle-card[data-kg-toggle-state="open"] .kg-toggle-content {
  border-block-start: 1px dashed color-mix(in oklab, var(--violet) 22%, transparent);
  margin-block-start: 0.875rem;
  padding-block-start: 0.5rem;
}
.gh-content .kg-card.kg-toggle-card .kg-toggle-content p,
.gh-content .kg-card.kg-toggle-card .kg-toggle-content ul,
.gh-content .kg-card.kg-toggle-card .kg-toggle-content ol,
.article .kg-card.kg-toggle-card .kg-toggle-content p,
.article .kg-card.kg-toggle-card .kg-toggle-content ul,
.article .kg-card.kg-toggle-card .kg-toggle-content ol {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink-1);
}

@media (prefers-reduced-motion: reduce) {
  .gh-content .kg-card.kg-toggle-card,
  .gh-content .kg-card.kg-toggle-card h4.kg-toggle-heading-text,
  .gh-content .kg-card.kg-toggle-card .kg-toggle-heading svg,
  .article .kg-card.kg-toggle-card,
  .article .kg-card.kg-toggle-card h4.kg-toggle-heading-text,
  .article .kg-card.kg-toggle-card .kg-toggle-heading svg {
    transition: none;
  }
}

/* ── Ghost product card → Atomys terminal window ───────────────────────
   Reuses the bookmark/CTA window vocabulary: tbar with three traffic
   dots + `~/inventory` URL line, violet border, lime CRT scan sweep on
   hover. cards.min.css forces white bg + system-ui + gray inset border
   on `.kg-product-card-container`, tints the description `opacity: .7`,
   and gives the rating SVGs `currentColor; opacity: .15` (.kg-product-
   card-rating-active overrides to opacity:1) — every one of those is
   reset below at higher specificity. */

.gh-content .kg-card.kg-product-card,
.article .kg-card.kg-product-card {
  display: block;
  width: 100%;
  margin-block: 2rem;
}

.gh-content .kg-card.kg-product-card .kg-product-card-container,
.article .kg-card.kg-product-card .kg-product-card-container {
  position: relative;
  display: grid;
  grid-template-columns: 1fr min-content;
  grid-row-gap: 1rem;
  align-items: center;
  max-inline-size: 550px;
  margin-inline: auto;
  padding: 30px 1.25rem 1.25rem;
  background: var(--bg-1);
  color: var(--ink-0);
  font-family: var(--font-sans);
  border: 1px solid color-mix(in oklab, var(--violet) 30%, transparent);
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px color-mix(in oklab, var(--violet) 6%, transparent),
    0 14px 36px rgb(0 0 0 / 0.45);
  transition:
    border-color 220ms ease,
    box-shadow 220ms ease;
}

/* tbar — same gradient + 3-dot stack as bookmark/CTA, label `~/inventory`. */
.gh-content .kg-card.kg-product-card .kg-product-card-container::before,
.article .kg-card.kg-product-card .kg-product-card-container::before {
  content: "~/inventory";
  position: absolute;
  inset: 0 0 auto 0;
  block-size: 30px;
  padding-inline: 70px 14px;
  background:
    radial-gradient(circle at 14px 50%, var(--danger) 4px, transparent 4.5px),
    radial-gradient(
        circle at 32px 50%,
        color-mix(in oklab, var(--violet) 55%, var(--ink-0)) 4px,
        transparent 4.5px
      ),
    radial-gradient(circle at 50px 50%, var(--lime) 4px, transparent 4.5px),
    linear-gradient(
      180deg,
      color-mix(in oklab, var(--violet) 16%, var(--bg-2)),
      color-mix(in oklab, var(--violet) 5%, var(--bg-1))
    );
  border-block-end: 1px solid color-mix(in oklab, var(--violet) 25%, transparent);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  line-height: 30px;
  color: var(--ink-2);
  letter-spacing: 0.12em;
  white-space: nowrap;
  text-align: end;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  z-index: 2;
}

/* CRT scan sweep on hover. */
.gh-content .kg-card.kg-product-card .kg-product-card-container::after,
.article .kg-card.kg-product-card .kg-product-card-container::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 42%,
    color-mix(in oklab, var(--lime) 18%, transparent) 50%,
    transparent 58%
  );
  transform: translateX(-110%);
  transition: transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 3;
}

.gh-content .kg-card.kg-product-card:hover .kg-product-card-container,
.gh-content .kg-card.kg-product-card:focus-within .kg-product-card-container,
.article .kg-card.kg-product-card:hover .kg-product-card-container,
.article .kg-card.kg-product-card:focus-within .kg-product-card-container {
  border-color: color-mix(in oklab, var(--lime) 55%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in oklab, var(--lime) 10%, transparent),
    0 18px 40px rgb(0 0 0 / 0.55),
    0 0 24px color-mix(in oklab, var(--lime) 14%, transparent);
}
.gh-content .kg-card.kg-product-card:hover .kg-product-card-container::after,
.article .kg-card.kg-product-card:hover .kg-product-card-container::after {
  transform: translateX(110%);
}

/* Product image — full-width, violet hairline frame, subtle desat filter. */
.gh-content .kg-card.kg-product-card .kg-product-card-image,
.article .kg-card.kg-product-card .kg-product-card-image {
  grid-column: 1 / 3;
  justify-self: stretch;
  inline-size: 100%;
  block-size: auto;
  margin: 0;
  background: var(--bg-2);
  border: 1px solid color-mix(in oklab, var(--violet) 28%, transparent);
  border-radius: var(--radius-s);
  filter: saturate(0.92) contrast(1.04);
  transition:
    filter 200ms ease,
    transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.gh-content .kg-card.kg-product-card:hover .kg-product-card-image,
.article .kg-card.kg-product-card:hover .kg-product-card-image {
  filter: saturate(1) contrast(1.08);
}

/* Title — sans bold, full-row span. */
.gh-content .kg-card.kg-product-card .kg-product-card-title-container,
.article .kg-card.kg-product-card .kg-product-card-title-container {
  grid-column: 1 / 3;
}
.gh-content .kg-card.kg-product-card h4.kg-product-card-title,
.article .kg-card.kg-product-card h4.kg-product-card-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink-0);
}

/* Rating row — lime stars on ink-3 inactive base, glow on the actives. */
.gh-content .kg-card.kg-product-card .kg-product-card-rating,
.article .kg-card.kg-product-card .kg-product-card-rating {
  grid-column: 1 / 3;
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  justify-self: start;
}
.gh-content .kg-card.kg-product-card .kg-product-card-rating-star,
.article .kg-card.kg-product-card .kg-product-card-rating-star {
  inline-size: 18px;
  block-size: 18px;
}
.gh-content .kg-card.kg-product-card .kg-product-card-rating-star svg,
.article .kg-card.kg-product-card .kg-product-card-rating-star svg {
  fill: var(--ink-3);
  opacity: 0.4;
  inline-size: 16px;
  block-size: 16px;
}
.gh-content .kg-card.kg-product-card .kg-product-card-rating-active.kg-product-card-rating-star svg,
.article .kg-card.kg-product-card .kg-product-card-rating-active.kg-product-card-rating-star svg {
  fill: var(--lime);
  opacity: 1;
  filter: drop-shadow(0 0 4px color-mix(in oklab, var(--lime) 40%, transparent));
}

/* Description — sans body, ink-1, full opacity. */
.gh-content .kg-card.kg-product-card .kg-product-card-description,
.article .kg-card.kg-product-card .kg-product-card-description {
  grid-column: 1 / 3;
}
.gh-content .kg-card.kg-product-card .kg-product-card-description p,
.gh-content .kg-card.kg-product-card .kg-product-card-description ul,
.gh-content .kg-card.kg-product-card .kg-product-card-description ol,
.article .kg-card.kg-product-card .kg-product-card-description p,
.article .kg-card.kg-product-card .kg-product-card-description ul,
.article .kg-card.kg-product-card .kg-product-card-description ol {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--ink-1);
  opacity: 1;
}

/* Button — same hex-notched primary as the CTA card, with the kit's
   `btnScan` + `btnGlitchNudge` animations on hover. */
.gh-content .kg-card.kg-product-card a.kg-product-card-button,
.gh-content .kg-card.kg-product-card a.kg-product-card-btn-accent,
.article .kg-card.kg-product-card a.kg-product-card-button,
.article .kg-card.kg-product-card a.kg-product-card-btn-accent {
  position: relative;
  grid-column: 1 / 3;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  inline-size: max-content;
  max-inline-size: 100%;
  block-size: auto;
  min-block-size: 44px;
  padding: 0 1.375rem;
  font-family: var(--font-mono);
  font-size: var(--fs-meta) !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  line-height: 1 !important;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: color-mix(in oklab, var(--violet) 25%, var(--ink-0)) !important;
  background-color: var(--bg-1) !important;
  background-image: linear-gradient(
    180deg,
    color-mix(in oklab, var(--violet) 22%, transparent) 0%,
    color-mix(in oklab, var(--violet) 6%, transparent) 100%
  );
  border: 0;
  border-radius: 0;
  clip-path: polygon(
    12px 0,
    100% 0,
    100% calc(100% - 12px),
    calc(100% - 12px) 100%,
    0 100%,
    0 12px
  );
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--violet) 35%, transparent);
  filter: drop-shadow(0 0 14px color-mix(in oklab, var(--violet) 30%, transparent));
  overflow: hidden;
  transition:
    color 200ms ease,
    background-image 200ms ease,
    transform 120ms ease,
    text-shadow 200ms ease,
    filter 200ms ease;
}
.gh-content .kg-card.kg-product-card a.kg-product-card-button > span,
.article .kg-card.kg-product-card a.kg-product-card-button > span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  z-index: 1;
}
.gh-content .kg-card.kg-product-card a.kg-product-card-button > span::before,
.article .kg-card.kg-product-card a.kg-product-card-button > span::before {
  content: "▸";
  color: var(--lime);
  font-size: 0.95em;
  text-shadow: 0 0 8px color-mix(in oklab, var(--lime) 45%, transparent);
}
.gh-content .kg-card.kg-product-card a.kg-product-card-button::after,
.article .kg-card.kg-product-card a.kg-product-card-button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgb(255 255 255 / 0.14) 50%,
    transparent 100%
  );
  transform: translateY(-100%);
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 0;
}
.gh-content .kg-card.kg-product-card a.kg-product-card-button:hover,
.article .kg-card.kg-product-card a.kg-product-card-button:hover {
  color: #fff !important;
  opacity: 1;
  background-image: linear-gradient(
    180deg,
    color-mix(in oklab, var(--violet) 38%, transparent) 0%,
    color-mix(in oklab, var(--violet) 12%, transparent) 100%
  );
  text-shadow:
    0 0 10px color-mix(in oklab, var(--violet) 60%, transparent),
    -1px 0 0 rgb(211 254 62 / 0.55),
    1px 0 0 rgb(255 59 107 / 0.55);
  filter: drop-shadow(0 0 22px color-mix(in oklab, var(--violet) 45%, transparent));
  animation: btnGlitchNudge 220ms steps(4) 1;
}
.gh-content .kg-card.kg-product-card a.kg-product-card-button:hover::after,
.article .kg-card.kg-product-card a.kg-product-card-button:hover::after {
  animation: btnScan 900ms linear infinite;
}
.gh-content .kg-card.kg-product-card a.kg-product-card-button:active,
.article .kg-card.kg-product-card a.kg-product-card-button:active {
  transform: translate(1px, 1px);
}
.gh-content .kg-card.kg-product-card a.kg-product-card-button:focus-visible,
.article .kg-card.kg-product-card a.kg-product-card-button:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 1px var(--lime);
  filter: drop-shadow(0 0 18px color-mix(in oklab, var(--lime) 45%, transparent));
}

@media (max-width: 540px) {
  .gh-content .kg-card.kg-product-card a.kg-product-card-button,
  .article .kg-card.kg-product-card a.kg-product-card-button {
    inline-size: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gh-content .kg-card.kg-product-card .kg-product-card-container,
  .gh-content .kg-card.kg-product-card .kg-product-card-container::after,
  .gh-content .kg-card.kg-product-card .kg-product-card-image,
  .gh-content .kg-card.kg-product-card a.kg-product-card-button,
  .gh-content .kg-card.kg-product-card a.kg-product-card-button::after,
  .article .kg-card.kg-product-card .kg-product-card-container,
  .article .kg-card.kg-product-card .kg-product-card-container::after,
  .article .kg-card.kg-product-card .kg-product-card-image,
  .article .kg-card.kg-product-card a.kg-product-card-button,
  .article .kg-card.kg-product-card a.kg-product-card-button::after {
    transition: none;
    animation: none !important;
  }
  .gh-content .kg-card.kg-product-card:hover .kg-product-card-container::after,
  .article .kg-card.kg-product-card:hover .kg-product-card-container::after {
    transform: translateX(-110%);
  }
  .gh-content .kg-card.kg-product-card a.kg-product-card-button:active,
  .article .kg-card.kg-product-card a.kg-product-card-button:active {
    transform: none;
  }
}

/* ── Ghost file card → Atomys terminal window ──────────────────────────
   Same terminal vocabulary as bookmark/CTA/product cards: violet-bordered
   window, traffic-dot tbar, ~/dl/<filename> URL string, CRT scan sweep on
   hover. The Ghost markup is `.kg-card.kg-file-card > a.kg-file-card-container`
   with `.kg-file-card-contents` (title/caption/metadata) on the left and
   `.kg-file-card-icon` (download SVG) on the right. cards.min.css ships
   white bg + gray border + system-ui font + opacity:.7 metadata children
   + a "·" pseudo between filename/filesize — every default is re-skinned
   below. Selectors are unlayered and prefixed with `.gh-content` /
   `.article` to outpace Ghost's unlayered rules. */

.gh-content .kg-card.kg-file-card,
.article .kg-card.kg-file-card {
  position: relative;
  margin-block: 2rem;
  background: transparent;
  border: 0;
  padding: 0;
}

/* Inner anchor = the terminal window. Override Ghost's white bg, gray
   border, padding, border-radius, color, and text-decoration. */
.gh-content .kg-card.kg-file-card a.kg-file-card-container,
.gh-content .kg-card.kg-file-card a.kg-file-card-container:hover,
.article .kg-card.kg-file-card a.kg-file-card-container,
.article .kg-card.kg-file-card a.kg-file-card-container:hover {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 30px 0 0;
  background: var(--bg-1);
  color: inherit;
  text-decoration: none;
  border: 1px solid color-mix(in oklab, var(--violet) 30%, transparent);
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px color-mix(in oklab, var(--violet) 6%, transparent),
    0 14px 36px rgb(0 0 0 / 0.45);
  transition:
    border-color 220ms ease,
    box-shadow 220ms ease,
    transform 220ms ease;
}

/* tbar — three traffic dots + a `~/dl/<filename>` label pulled from a CSS
   custom property (set inline in the `content` string below as a literal
   `~/dl/` prefix since attr() can't read children). The filename itself is
   shown in the metadata row, so the tbar stays generic. */
.gh-content .kg-card.kg-file-card a.kg-file-card-container::before,
.article .kg-card.kg-file-card a.kg-file-card-container::before {
  content: "~/dl";
  position: absolute;
  inset: 0 0 auto 0;
  block-size: 30px;
  padding-inline: 70px 14px;
  background:
    radial-gradient(circle at 14px 50%, var(--danger) 4px, transparent 4.5px),
    radial-gradient(
      circle at 32px 50%,
      color-mix(in oklab, var(--violet) 55%, var(--ink-0)) 4px,
      transparent 4.5px
    ),
    radial-gradient(circle at 50px 50%, var(--lime) 4px, transparent 4.5px),
    linear-gradient(
      180deg,
      color-mix(in oklab, var(--violet) 16%, var(--bg-2)),
      color-mix(in oklab, var(--violet) 5%, var(--bg-1))
    );
  border-block-end: 1px solid
    color-mix(in oklab, var(--violet) 25%, transparent);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  line-height: 30px;
  color: var(--ink-2);
  letter-spacing: 0.12em;
  white-space: nowrap;
  text-align: end;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  z-index: 2;
}

/* CRT scan sweep on hover — clipped by the anchor's overflow:hidden. */
.gh-content .kg-card.kg-file-card a.kg-file-card-container::after,
.article .kg-card.kg-file-card a.kg-file-card-container::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 42%,
    color-mix(in oklab, var(--lime) 18%, transparent) 50%,
    transparent 58%
  );
  transform: translateX(-110%);
  transition: transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 3;
}

.gh-content .kg-card.kg-file-card a.kg-file-card-container:hover,
.gh-content .kg-card.kg-file-card a.kg-file-card-container:focus-visible,
.article .kg-card.kg-file-card a.kg-file-card-container:hover,
.article .kg-card.kg-file-card a.kg-file-card-container:focus-visible {
  border-color: color-mix(in oklab, var(--lime) 55%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in oklab, var(--lime) 10%, transparent),
    0 18px 40px rgb(0 0 0 / 0.55),
    0 0 24px color-mix(in oklab, var(--lime) 14%, transparent);
}
.gh-content .kg-card.kg-file-card a.kg-file-card-container:hover::after,
.article .kg-card.kg-file-card a.kg-file-card-container:hover::after {
  transform: translateX(110%);
}

/* Left column: title + caption + metadata. Ghost forces system-ui +
   gray colors here — restore the kit fonts/colors. */
.gh-content .kg-card.kg-file-card .kg-file-card-contents,
.article .kg-card.kg-file-card .kg-file-card-contents {
  flex: 1 1 0;
  min-inline-size: 0;
  padding: 1.125rem 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  color: var(--ink-0);
  overflow: hidden;
}

/* Title — sans h3-ish, with the ▸ marker that bookmark/CTA cards share. */
.gh-content .kg-card.kg-file-card .kg-file-card-title,
.article .kg-card.kg-file-card .kg-file-card-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink-0);
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gh-content .kg-card.kg-file-card .kg-file-card-title::before,
.article .kg-card.kg-file-card .kg-file-card-title::before {
  content: "▸";
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--lime);
  text-shadow: 0 0 8px color-mix(in oklab, var(--lime) 45%, transparent);
}

/* Caption — body sans, ink-1, hide when empty. */
.gh-content .kg-card.kg-file-card .kg-file-card-caption,
.article .kg-card.kg-file-card .kg-file-card-caption {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--ink-1);
  opacity: 1;
}
.gh-content .kg-card.kg-file-card .kg-file-card-caption:empty,
.article .kg-card.kg-file-card .kg-file-card-caption:empty {
  display: none;
}

/* Metadata row — mono · lime · wide-tracking, like bookmark metadata. */
.gh-content .kg-card.kg-file-card .kg-file-card-metadata,
.article .kg-card.kg-file-card .kg-file-card-metadata {
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: 400;
  color: var(--lime);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
/* Ghost dims metadata children — restore. */
.gh-content .kg-card.kg-file-card .kg-file-card-metadata > *,
.article .kg-card.kg-file-card .kg-file-card-metadata > * {
  opacity: 1;
}
.gh-content .kg-card.kg-file-card .kg-file-card-filename,
.article .kg-card.kg-file-card .kg-file-card-filename {
  color: var(--lime);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-inline-size: 0;
}
/* Replace Ghost's "·" pseudo between filename and filesize with our "//". */
.gh-content .kg-card.kg-file-card .kg-file-card-filesize,
.article .kg-card.kg-file-card .kg-file-card-filesize {
  color: var(--ink-2);
  flex: 0 0 auto;
}
.gh-content .kg-card.kg-file-card .kg-file-card-filesize::before,
.article .kg-card.kg-file-card .kg-file-card-filesize::before {
  content: "//";
  color: var(--ink-3);
  margin: 0 0.5rem;
  letter-spacing: 0;
}

/* Right column: download icon panel. Ghost forces 80×80 with a tinted
   bg — re-skin to a violet-bordered cell with a lime SVG that shifts
   downward on hover (download motion). */
.gh-content .kg-card.kg-file-card .kg-file-card-icon,
.article .kg-card.kg-file-card .kg-file-card-icon {
  flex: 0 0 auto;
  inline-size: 88px;
  block-size: auto;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  background: color-mix(in oklab, var(--violet) 7%, transparent);
  border-inline-start: 1px solid
    color-mix(in oklab, var(--violet) 25%, transparent);
  border-radius: 0;
  color: var(--lime);
  position: relative;
  overflow: hidden;
}
.gh-content .kg-card.kg-file-card .kg-file-card-icon svg,
.article .kg-card.kg-file-card .kg-file-card-icon svg {
  inline-size: 32px;
  block-size: 32px;
  color: var(--lime);
  filter: drop-shadow(0 0 6px color-mix(in oklab, var(--lime) 35%, transparent));
  transition:
    transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 220ms ease;
}
.gh-content .kg-card.kg-file-card a.kg-file-card-container:hover .kg-file-card-icon svg,
.gh-content .kg-card.kg-file-card a.kg-file-card-container:focus-visible .kg-file-card-icon svg,
.article .kg-card.kg-file-card a.kg-file-card-container:hover .kg-file-card-icon svg,
.article .kg-card.kg-file-card a.kg-file-card-container:focus-visible .kg-file-card-icon svg {
  transform: translateY(2px);
  filter: drop-shadow(0 0 12px color-mix(in oklab, var(--lime) 60%, transparent));
}
.gh-content .kg-card.kg-file-card a.kg-file-card-container:active .kg-file-card-icon svg,
.article .kg-card.kg-file-card a.kg-file-card-container:active .kg-file-card-icon svg {
  transform: translateY(4px);
}

/* Stack on narrow viewports — icon below content. */
@media (max-width: 540px) {
  .gh-content .kg-card.kg-file-card a.kg-file-card-container,
  .article .kg-card.kg-file-card a.kg-file-card-container {
    flex-direction: column;
  }
  .gh-content .kg-card.kg-file-card .kg-file-card-icon,
  .article .kg-card.kg-file-card .kg-file-card-icon {
    inline-size: 100%;
    block-size: auto;
    padding: 0.875rem;
    border-inline-start: 0;
    border-block-start: 1px dashed
      color-mix(in oklab, var(--violet) 22%, transparent);
  }
  .gh-content .kg-card.kg-file-card .kg-file-card-icon svg,
  .article .kg-card.kg-file-card .kg-file-card-icon svg {
    inline-size: 28px;
    block-size: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gh-content .kg-card.kg-file-card a.kg-file-card-container,
  .gh-content .kg-card.kg-file-card a.kg-file-card-container::after,
  .gh-content .kg-card.kg-file-card .kg-file-card-icon svg,
  .article .kg-card.kg-file-card a.kg-file-card-container,
  .article .kg-card.kg-file-card a.kg-file-card-container::after,
  .article .kg-card.kg-file-card .kg-file-card-icon svg {
    transition: none;
  }
  .gh-content .kg-card.kg-file-card a.kg-file-card-container:hover::after,
  .article .kg-card.kg-file-card a.kg-file-card-container:hover::after {
    transform: translateX(-110%);
  }
  .gh-content .kg-card.kg-file-card a.kg-file-card-container:hover .kg-file-card-icon svg,
  .gh-content .kg-card.kg-file-card a.kg-file-card-container:active .kg-file-card-icon svg,
  .article .kg-card.kg-file-card a.kg-file-card-container:hover .kg-file-card-icon svg,
  .article .kg-card.kg-file-card a.kg-file-card-container:active .kg-file-card-icon svg {
    transform: none;
  }
}

/*
 * Custom-font support — Ghost emits body classes for the picked typography
 * setting (e.g. "site-typography-modern-sans-serif"). Map them to CSS
 * variables that the rest of the theme can opt into.
 *
 * Defaults preserve the handoff (Space Grotesk + JetBrains Mono).
 */
:root {
  --gh-font-heading: "Space Grotesk", system-ui, sans-serif;
  --gh-font-body: "Space Grotesk", system-ui, sans-serif;
  --gh-font-mono: "JetBrains Mono", ui-monospace, monospace;
}

body.has-serif-title {
  --gh-font-heading: "Iowan Old Style", "Palatino", Georgia, serif;
}
body.has-serif-body {
  --gh-font-body: "Iowan Old Style", "Palatino", Georgia, serif;
}
body.has-sans-title {
  --gh-font-heading: "Space Grotesk", system-ui, sans-serif;
}
body.has-sans-body {
  --gh-font-body: "Space Grotesk", system-ui, sans-serif;
}