/* =========================================================================
   Cold Anvil Studios — Marketing atoms (.mk-*)

   Translated from Design_Handoffs/marketing-site/mk-primitives.jsx
   (COL-72, 2026-04-24). The handoff ships the primitives as JSX
   components with inline styles; the marketing site is static HTML,
   so each primitive lands here as class-based CSS that downstream
   HTML sections can consume.

   Depends on ./tokens.css — requires the Bullfinch Forge palette,
   type faces, and .wk-* atoms. Load tokens.css first.

   ─────────────────────────────────────────────────────────────────────
   NAMESPACE BOUNDARY (decided 2026-04-24 after the cold-anvil-design
   audit of Phase 1).

   The `.mk-*` namespace here is scoped to the **waitlist holding page
   + teaser-canvas one-offs**. It was born from a direct JSX → CSS port
   of the handoff primitives, *not* extracted from
   `design-system/project/ui_kits/marketing_site/` (the canonical kit).

   For Home C (COL-75) and every marketing page after: **use the kit's
   `.ca-*` classes, not `.mk-*`.** The kit is the source of truth for
   reusable page primitives (nav, hero, cards, footer, composer,
   sections). New additions ratify there and propagate back.

   One consequence to accept:

     1. `.mk-card` duplicates `.ca-card`. Do not reach for `.mk-card`
        in new HTML; prefer `.ca-card`. Kept only because the waitlist
        already composes it.

   (Previously `.mk-footer` was also richer than `.ca-footer`. On
   2026-04-24 that pattern was migrated into the canonical
   `.ca-footer` in `design-system/project/ui_kits/marketing_site/
   styles.css`, and the `.mk-footer` classes were removed from this
   file — it was never referenced in live HTML.)
   ─────────────────────────────────────────────────────────────────────

   UNRECONCILED PRIMITIVES — not yet used in live HTML:

     .mk-workshop-window (the documentary-placeholder frame) uses
       radial-gradient + linear-gradient backgrounds. README §235
       ("No gradient orbs, no bluish-purple gradients") is a rule
       against *decorative* gradients. This frame is a visible
       "real photo coming soon" placeholder — a handoff-driven
       exception until COL-86 (workshop photograph) resolves.
       When COL-86 ships, the gradient stack gets replaced with
       the real `<img>`; the carve-out disappears.

     .mk-note (rationale sticker with solid dark fill + accent/tone
       left-border) uses a solid fill. README §182 "Cards use borders,
       not fills" applies to *cards*. A note is not a card — it's an
       inline annotation. The fill is a subtle lift (#2a2725 against
       the --ca-bg0s page bg), contextually appropriate. Kept as-is
       until the ui_kit ratifies a `.ca-note` pattern.

   Anything else flagged here either reconciles to the kit in COL-75
   prep or gets flagged in its own row above.
   ========================================================================= */

/* ───── Wordmark ─────────────────────────────────────────────────────── */
.mk-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--cream);
  font-family: var(--font-display-b);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.01em;
  line-height: 1;
  text-decoration: none;
}
.mk-wordmark--accent { color: var(--accent); }
.mk-wordmark .mk-anvil-mark { display: block; flex-shrink: 0; color: inherit; }
.mk-wordmark__studios {
  color: var(--ink-muted);
  font-style: italic;
  font-weight: 400;
  margin-left: 5px;
  font-size: 0.88em;
}

/* ───── Nav ──────────────────────────────────────────────────────────── */
.mk-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 48px;
  border-bottom: 1px solid var(--border-subtle);
}
.mk-nav__left {
  display: flex;
  align-items: center;
  gap: 24px;
}
.mk-nav__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-left: 1px solid var(--border-subtle);
  padding-left: 20px;
  color: var(--ink-muted);
  font-family: var(--font-body-b);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
}
.mk-nav__status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--secondary);
  box-shadow: 0 0 0 4px rgba(140, 148, 92, 0.08);
  flex-shrink: 0;
}
.mk-nav__links {
  display: flex;
  align-items: center;
  gap: 28px;
  font-family: var(--font-body-b);
  font-size: 14px;
  font-weight: 500;
  list-style: none;
  margin: 0;
  padding: 0;
}
.mk-nav__link {
  color: var(--ink-muted);
  text-decoration: none;
  letter-spacing: -0.003em;
  transition: color var(--dur-base) var(--easing);
}
.mk-nav__link:hover,
.mk-nav__link[aria-current="page"] { color: var(--cream); }
.mk-nav__cta { margin-left: 8px; }

/* ───── Eyebrow rule (number · label · trailing rule) ────────────────── */
.mk-eyebrow-rule {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}
.mk-eyebrow-rule__num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-dim);
  letter-spacing: 0.04em;
}
.mk-eyebrow-rule__label {
  /* Inherits .wk-eyebrow typography; add on the element when using. */
  color: var(--ink-muted);
}
.mk-eyebrow-rule__rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--border-subtle), transparent);
}

/* ───── Section head ─────────────────────────────────────────────────── */
.mk-section-head {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 64px;
  align-items: start;
  margin-bottom: 56px;
  max-width: 1120px;
}
.mk-section-head--split { grid-template-columns: 1.1fr 0.9fr; }
.mk-section-head__eyebrow {
  color: var(--ink-muted);
  margin-bottom: 18px;
}
.mk-section-head__title {
  font-family: var(--font-display-b);
  font-weight: 500;
  font-size: 44px;
  line-height: 1.12;
  letter-spacing: -0.018em;
  color: var(--cream);
  margin: 0;
  max-width: 22ch;
  text-wrap: balance;
}
.mk-section-head__body {
  font-family: var(--font-body-b);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  max-width: 56ch;
  margin-top: 22px;
}
.mk-section-head--split .mk-section-head__body {
  max-width: 52ch;
  margin-top: 8px;
}

/* ───── Outlined card (marketing) ────────────────────────────────────── */
.mk-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 32px;
  background: transparent;
}
.mk-card--accent { border-color: var(--accent); }

/* ───── Live composer — the signature moment ─────────────────────────── */
.mk-live-composer {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.mk-live-composer--compact { gap: 14px; }

.mk-live-composer__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 22px 24px;
  background: transparent;
}
.mk-live-composer--compact .mk-live-composer__form { padding: 16px 18px; }

.mk-live-composer__label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body-b);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
}
.mk-live-composer__pulse {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 8px;
  flex-shrink: 0;
}
.mk-live-composer__pulse::before,
.mk-live-composer__pulse::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.mk-live-composer__pulse::before {
  inset: 0;
  background: var(--secondary);
  animation: mkPulseCore 2.4s ease-in-out infinite;
}
.mk-live-composer__pulse::after {
  inset: -3px;
  border: 1px solid var(--secondary);
  opacity: 0.5;
  animation: mkPulseRing 2.4s ease-out infinite;
}
.mk-live-composer__label-rule {
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
  margin-inline: 4px;
}
.mk-live-composer__availability {
  color: var(--ink-dim);
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-body-b);
  font-size: 12px;
  font-style: italic;
  font-weight: 400;
}

.mk-live-composer__textarea {
  background: transparent;
  border: none;
  outline: none;
  color: var(--cream);
  font-family: var(--font-body-b);
  font-size: 19px;
  line-height: 1.55;
  resize: none;
  width: 100%;
  padding: 0;
  margin-top: 2px;
}
.mk-live-composer__textarea::placeholder { color: var(--ink-muted); }
.mk-live-composer--compact .mk-live-composer__textarea { font-size: 17px; }

.mk-live-composer__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}
.mk-live-composer__helper {
  font-family: var(--font-body-b);
  font-size: 12px;
  color: var(--ink-dim);
  line-height: 1.4;
}
.mk-live-composer__submit {
  /* Compose with .wk-btn.wk-btn--primary on the button element.
     These rules only refine the typography to match the handoff. */
  font-family: var(--font-body-b);
  font-size: 14px;
  font-weight: 500;
  padding: 10px 18px;
  flex-shrink: 0;
}

.mk-live-composer__thread {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 4px 0;
}
.mk-live-composer--compact .mk-live-composer__thread { padding: 14px 0 0; }

.mk-live-composer__echo,
.mk-live-composer__reply {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 14px;
  align-items: start;
}
.mk-live-composer__echo-label {
  font-family: var(--font-body-b);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding-top: 6px;
}
.mk-live-composer__echo-body {
  font-family: var(--font-body-b);
  font-size: 15px;
  color: var(--ink);
  border-left: 1px solid var(--ink-dim);
  padding-left: 16px;
  line-height: 1.55;
}
.mk-live-composer__reply-avatar {
  width: 24px;
  height: 24px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--accent);
  font-family: var(--font-display-b);
  font-style: italic;
  font-size: 13px;
  font-weight: 500;
  margin-top: 2px;
}
.mk-live-composer__reply-body {
  font-family: var(--font-body-b);
  font-size: 16px;
  color: var(--ink-bright);
  line-height: 1.62;
}
.mk-live-composer__thinking {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-muted);
}
.mk-live-composer__thinking-dots {
  display: inline-flex;
  gap: 3px;
}
.mk-live-composer__thinking-dots i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  animation: mkDot 1.2s ease-in-out infinite;
}
.mk-live-composer__thinking-dots i:nth-child(2) { animation-delay: 0.15s; }
.mk-live-composer__thinking-dots i:nth-child(3) { animation-delay: 0.3s; }

.mk-live-composer__actions {
  display: flex;
  gap: 12px;
  padding-left: 46px;
  padding-top: 4px;
}

/* ───── Workshop window (documentary placeholder frame) ─────────────── */
.mk-workshop-window {
  margin: 0;
  position: relative;
}
.mk-workshop-window__frame {
  position: relative;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse at 72% 40%, rgba(216, 166, 92, 0.22), transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(140, 148, 92, 0.12), transparent 50%),
    linear-gradient(180deg, #1e1c1b 0%, #2a2725 40%, #201e1d 100%);
}
.mk-workshop-window__plate-mark {
  position: absolute;
  top: 18px;
  left: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.mk-workshop-window__plate-mark::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid var(--accent);
}
.mk-workshop-window__tick {
  position: absolute;
  bottom: 18px;
  right: 22px;
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
}
.mk-workshop-window__caption {
  margin-top: 14px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  font-family: var(--font-body-b);
  font-size: 12px;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
}
.mk-workshop-window__caption-text { font-style: italic; }
.mk-workshop-window__caption-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-dim);
}

/* ───── Note (rationale sticker, three tones) ────────────────────────── */
.mk-note {
  display: flex;
  gap: 12px;
  padding: 10px 14px;
  border-left: 2px solid var(--accent);
  background: #2a2725;
  border-radius: 0 6px 6px 0;
  font-family: var(--font-body-b);
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-bright);
  max-width: 360px;
}
.mk-note--dissent { border-left-color: #c57b4e; }
.mk-note--signal  { border-left-color: var(--secondary); }
.mk-note__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ink-dim);
  padding-top: 1px;
  white-space: nowrap;
}

/* ───── Footer ───────────────────────────────────────────────────────── */
/* Migrated 2026-04-24 to the canonical `.ca-footer` in
   `design-system/project/ui_kits/marketing_site/styles.css`. The richer
   4-col + meta-row structure now lives there and `Sections.jsx`'s
   Footer() component renders the HTML. No `.mk-footer` classes are
   referenced in live HTML, so removal is a cleanup, not a visual change. */

/* ───── Claim (alias of .wk-claim) ───────────────────────────────────── */
.mk-claim { /* compose with .wk-claim on the element */ cursor: default; }

/* ───── Annie avatar (diamond glyph, idle / listening) ───────────────── */
.mk-annie {
  --mk-annie-size: 32px;
  width: var(--mk-annie-size);
  height: var(--mk-annie-size);
  border-radius: 50%;
  border: 1px solid var(--accent);
  background: color-mix(in oklab, var(--accent) 8%, transparent);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  position: relative;
}
.mk-annie__glyph {
  font-family: var(--font-display-b);
  font-style: italic;
  font-size: calc(var(--mk-annie-size) * 0.5);
  color: var(--cream);
  line-height: 1;
  transform: translateY(-1px);
}
.mk-annie--idle::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-dim);
}
.mk-annie--listening::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  opacity: 0.5;
  animation: mkAnniePulse 2.4s ease-out infinite;
}

/* ───── Keyframes ────────────────────────────────────────────────────── */
@keyframes mkPulseCore {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}
@keyframes mkPulseRing {
  0%   { transform: scale(1);   opacity: 0.5; }
  100% { transform: scale(1.8); opacity: 0; }
}
@keyframes mkDot {
  0%, 60%, 100% { opacity: 0.25; }
  30%           { opacity: 1; }
}
@keyframes mkAnniePulse {
  0%   { transform: scale(0.85); opacity: 0.6; }
  70%  { transform: scale(1.6);  opacity: 0; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mk-live-composer__pulse::before,
  .mk-live-composer__pulse::after,
  .mk-live-composer__thinking-dots i,
  .mk-annie--listening::after { animation: none; }
}