/*
 * Awdur marketing home — the apex front door (awdur.com, signed out).
 * Loaded by layouts/marketing.html.erb AFTER application.css (tokens, .card,
 * .preset-grid, .button, .eyebrow-row, .meter, .app-header) and public.css
 * (.page, .capture, .fineprint, .rise, .author-monogram, the footer treatment).
 *
 * COMPOSITION ONLY. Every value below is an existing token or geometry: no hue
 * is minted, no --token is declared, no `.palette-*` preset is defined here (the
 * layout's body class owns the palette), and no raw hex / rgb() / hsl() / named
 * colour appears anywhere in this file. Everything keys off --accent, so the
 * page recolours with the preset for free.
 */

/* The public plane's paper wash. public.css binds it to `body.public-page`; this
   plane's body is `.marketing-page`, so the same two radial gradients are
   restated here rather than adding a class to a file the theming slice owns.
   Both gradients are color-mix()es of existing accent tokens — no hue minted. */
body.marketing-page {
  background-image:
    radial-gradient(1100px 560px at 82% -10%, color-mix(in srgb, var(--accent-hi) 14%, transparent), transparent 60%),
    radial-gradient(820px 480px at -6% 106%, color-mix(in srgb, var(--accent-deep) 10%, transparent), transparent 60%);
  background-attachment: fixed;
}

/* Masthead aligned to the .page column without extra markup. Geometry only. */
.marketing-header { padding-inline: max(22px, calc((100% - 720px) / 2)); }

/* ---- hero: the .auth-hero-h treatment at marketing scale ---- */
/* .eyebrow-row's stock 30px bottom margin is tuned for the auth split-shell; the
   hero sits tighter to its pill. */
.marketing-hero .eyebrow-row { margin-bottom: 18px; }
.marketing-hero > h1 {
  font-size: clamp(34px, 7.5vw, 54px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
.marketing-hero > h1 em { font-style: italic; color: var(--accent); }
.marketing-lede {
  font-size: clamp(17px, 2.2vw, 19px);
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 18px 0 0;
  max-width: 46ch;
}
.marketing-lede em { font-style: italic; }
.marketing-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.marketing-hero .fineprint { margin-top: 12px; max-width: 46ch; }

/* Thumb targets on a phone: the CTA row stacks and each control spans the column
   (the base .button padding already clears 44px tall). */
@media (max-width: 480px) {
  .marketing-cta > * { width: 100%; text-align: center; }
}

/* ---- reader note: the .callout inset well at BODY scale ----
   .callout is 14px because it is an aside; this band is the primary content for
   the majority audience (badge-clicking readers), so it gets the same well and
   one step more voice. */
.reader-note {
  background: var(--paper-in);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(16px, 3vw, 22px);
}
.reader-note h2 { font-size: clamp(20px, 3vw, 24px); margin: 0 0 8px; }
.reader-note p { font-size: 15px; color: var(--ink-soft); margin: 0 0 .7rem; }
.reader-note p:last-child { margin-bottom: 0; }
.reader-note strong { color: var(--ink); }

/* ---- prose sections ---- */
.marketing-what > h2,
.marketing-who > h2,
.marketing-caps-h { margin: 6px 0 0; }
.marketing-what > p,
.marketing-who > p { margin: 14px 0 0; max-width: var(--measure); color: var(--ink); }
.marketing-about h2 { margin: 0; }
.marketing-about p { margin: 14px 0 0; max-width: var(--measure); color: var(--ink); }

/* Cards carry a marketing headline, not the 18px app-chrome .card h2. */
.marketing-caps .preset-grid { margin-top: 20px; }
.marketing-caps .card h3 { font-size: 22px; margin: 0 0 8px; }
.marketing-caps .card p { margin: 0; font-size: 15px; color: var(--ink-soft); }

/* The subdomain example reads as an address, not as prose. */
.marketing-mono { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 500; }

/* The honesty paragraph — the page's credibility beat. */
.marketing-honesty { margin: 20px 0 0; font-size: 15px; color: var(--ink-soft); max-width: var(--measure); }
.marketing-honesty strong { color: var(--ink); }

/* ---- the specimen: a labelled diagram of an author page, from real components ----
   Inert by construction — the "button" is a <span>. Nothing here is interactive,
   so nothing here needs a hover, focus or active state.

   NAMESPACED, and it must stay that way. These were `.specimen-*` until the
   theming slice (PR #59) shipped a theme-picker specimen into application.css
   claiming `.specimen-name`, `.specimen-button` and `.specimen-meter`. Load order
   did not save it: marketing.css only restates the properties it cares about, so
   application.css's `.specimen-meter { height: 8px; overflow: hidden; ... }` came
   straight through and collapsed this diagram's meter. `.specimen` is too generic
   a name for a shared design system to leave unclaimed — hence the prefix.
   test/assets/marketing_css_namespace_test.rb keeps it honest. */
.marketing-specimen { margin: clamp(20px, 4vw, 28px) 0 0; }
.marketing-specimen-page {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  background: var(--paper-hi);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(20px, 4vw, 28px);
}
/* .author-monogram ships at clamp(96px, 22vw, 160px) for a real author page;
   inside a diagram it is a token, not a portrait. */
.marketing-specimen-page .author-monogram { width: 56px; font-size: 26px; }
.marketing-specimen-name { font-family: var(--serif); font-size: 28px; line-height: 1.1; color: var(--ink); }
.marketing-specimen-tagline {
  font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--ink-soft);
}
.marketing-specimen-button {
  font-family: var(--sans); font-size: 15px; font-weight: 600;
  color: var(--paper-hi); background: var(--accent);
  border-radius: var(--radius);
  padding: 10px 18px;
}
.marketing-specimen-meter { width: 100%; max-width: 240px; }
.marketing-specimen-meter .meter-track { height: 6px; }
.marketing-specimen figcaption { margin-top: 10px; }

/* ---- footer link row (the .page footer flex row already wraps) ---- */
.marketing-footer-links { display: flex; gap: 16px; flex-wrap: wrap; }