/* =========================================================================
   QPN Catalyst — Hero Email Mock (illustrative compose card).
   A non-interactive, illustration-only email-compose window for the home
   hero. Teaches the entire product in one image: "add a BCC to an email
   you're already sending." The Bcc row is the focal point — it echoes the
   Ledger Row "current/default" highlight motif (gold left-rule + soft gold
   tint, per .qpn-uc--here / .qpn-chero__rail).

   Load order: qpn-shared.css → qpn-cards.css → THIS FILE
   Tokens sourced from qpn-shared.css (--qpn-*). No new color literals —
   the only raw values are gold-tint alphas derived from --qpn-accent
   (#8A6B2E), matching the existing rgba(138,107,46,*) usages in the system.

   Anchored to: docs/brief-website.md §6.1 (Home hero).
   ========================================================================= */

/* ── Hero shell — two-column: serif copy left, compose card right ──────── */
.qpn-email-hero {
  background: var(--qpn-page);
  border-bottom: var(--qpn-rule-hair) solid var(--qpn-rule);
  font-family: var(--qpn-font-body);
}

.qpn-email-hero__wrap {
  max-width: var(--qpn-w-marketing);
  margin: 0 auto;
  padding: 72px var(--qpn-sp-7);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--qpn-sp-8);
  align-items: center;
}

/* Left column — placeholder copy for layout judgment only. */
.qpn-email-hero__copy {
  max-width: 480px;
}

.qpn-email-hero__eyebrow {
  font-family: var(--qpn-font-body);
  font-size: var(--qpn-fs-label);
  letter-spacing: var(--qpn-tracking-label);
  text-transform: uppercase;
  color: var(--qpn-accent);
  font-weight: 600;
  margin-bottom: var(--qpn-sp-4);
}

.qpn-email-hero__title {
  font-family: var(--qpn-font-display);
  font-size: clamp(34px, 4.2vw, 52px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--qpn-ink);
  margin: 0 0 var(--qpn-sp-4);
  text-wrap: balance;
}

.qpn-email-hero__title em {
  font-style: italic;
  color: var(--qpn-accent);
}

.qpn-email-hero__subtitle {
  font-family: var(--qpn-font-display);
  font-size: var(--qpn-fs-lede);
  font-weight: 400;
  line-height: var(--qpn-lh-lede);
  color: var(--qpn-ink-muted);
  margin: 0;
  max-width: 420px;
}

/* Right column — the deliverable. */
.qpn-email-hero__mock {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* ── Compose card ──────────────────────────────────────────────────────── */
.qpn-email {
  background: var(--qpn-surface);
  border: var(--qpn-rule-hair) solid var(--qpn-rule);
  border-radius: 8px;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(11, 31, 58, 0.04),
    0 12px 32px -8px rgba(11, 31, 58, 0.12);
  font-family: var(--qpn-font-body);
}

/* Title bar — neutral "New message" header. Credibly compose-window-like
   without any real product chrome. Window dots are decorative. */
.qpn-email__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--qpn-sp-3);
  padding: 12px var(--qpn-sp-5);
  background: var(--qpn-surface-2);
  border-bottom: var(--qpn-rule-hair) solid var(--qpn-rule);
}

.qpn-email__bar-title {
  font-family: var(--qpn-font-body);
  font-size: var(--qpn-fs-label);
  letter-spacing: var(--qpn-tracking-label);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--qpn-ink-faint);
}

.qpn-email__bar-dots {
  display: flex;
  gap: 6px;
}

.qpn-email__bar-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--qpn-rule);
}

/* ── Field rows — labels + addresses in mono, muted ink ────────────────── */
.qpn-email__fields {
  display: flex;
  flex-direction: column;
}

.qpn-email__row {
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: baseline;
  gap: var(--qpn-sp-4);
  padding: 13px var(--qpn-sp-5);
  border-bottom: var(--qpn-rule-hair) solid var(--qpn-rule-faint);
}

.qpn-email__label {
  font-family: var(--qpn-font-mono);
  font-size: var(--qpn-fs-body-sm);
  letter-spacing: var(--qpn-tracking-mono);
  color: var(--qpn-ink-faint);
  font-weight: 400;
}

.qpn-email__value {
  font-family: var(--qpn-font-mono);
  font-size: var(--qpn-fs-body-sm);
  letter-spacing: var(--qpn-tracking-mono);
  line-height: 1.5;
  color: var(--qpn-ink-muted);
  word-break: break-word;
}

/* Subject reads as the human-legible line — keep it in body sans, full ink,
   so the mono addresses stay clearly "machine" fields by contrast. */
.qpn-email__row--subject .qpn-email__value {
  font-family: var(--qpn-font-body);
  font-size: var(--qpn-fs-body);
  letter-spacing: 0;
  color: var(--qpn-ink);
  font-weight: 500;
}

/* ── Highlighted Catalyst address in the To line (the focal point) ──────── */
/* The recording address is a normal, VISIBLE recipient — a gold chip in the
   To field, with a micro note beneath. Visible To/Cc is the viral default;
   the old hidden-Bcc treatment is gone. */
.qpn-email__addr-hl {
  color: var(--qpn-accent);
  font-weight: 500;
  white-space: nowrap;
  background: rgba(138, 107, 46, 0.10);
  padding: 1px 6px;
  border-radius: 3px;
}

.qpn-email__addr-note {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--qpn-font-body);
  font-size: var(--qpn-fs-micro);
  letter-spacing: var(--qpn-tracking-label);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--qpn-accent);
}

/* ── Body — the one–two line message ───────────────────────────────────── */
.qpn-email__body {
  padding: var(--qpn-sp-5);
  font-family: var(--qpn-font-body);
  font-size: var(--qpn-fs-body);
  line-height: var(--qpn-lh-body);
  color: var(--qpn-ink);
}

.qpn-email__body p {
  margin: 0;
  max-width: 46ch;
}

/* ── Caption — "That's the whole product." ─────────────────────────────── */
.qpn-email__caption {
  font-family: var(--qpn-font-display);
  font-size: var(--qpn-fs-lede);
  font-style: italic;
  font-weight: 400;
  line-height: var(--qpn-lh-lede);
  color: var(--qpn-ink-muted);
  text-align: center;
  margin: var(--qpn-sp-5) 0 0;
}

/* ── Responsive — stacks below the copy on narrow viewports ────────────── */
@media (max-width: 860px) {
  .qpn-email-hero__wrap {
    grid-template-columns: 1fr;
    gap: var(--qpn-sp-6);
    padding: 48px var(--qpn-sp-5);
  }
  .qpn-email-hero__copy { max-width: 560px; }
}

@media (max-width: 480px) {
  .qpn-email-hero__wrap {
    padding: 36px var(--qpn-sp-4);
  }
  .qpn-email__bar,
  .qpn-email__row,
  .qpn-email__body { padding-left: var(--qpn-sp-4); padding-right: var(--qpn-sp-4); }
  .qpn-email__row--bcc { padding-left: calc(var(--qpn-sp-4) - 2px); }
  .qpn-email__row {
    grid-template-columns: 52px 1fr;
    gap: var(--qpn-sp-3);
  }
}