/*
 * 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; }

/* ===========================================================================
 * PUBLIC REFRESH (docs/design/public-refresh-spec.md §3.5, 2026-08-24).
 * Composition only, as the rest of this file: no token, no preset, no hue, no
 * @media block, and NOT ONE WORD of the home template — this slice never opens
 * marketing/home.html.erb (the copy was ratified 2026-07-27).
 * ========================================================================= */

/* The display cut — the same register as the author page's name and the share
   card's (public.css §3.4, the `.share-*` block in application.css). Sets no
   font-size: the hero's clamp(34px, 7.5vw, 54px), its -0.02em and its 1.04 all
   stand. The <em> inside the hero inherits font-variation-settings, so the
   italic word takes the display cut with it.

   font-variation-settings names ONLY opsz, never wght: CSS Fonts 4 §6.1 — the
   low-level property only wins for the axes it lists — so font-weight keeps
   driving the wght axis. Naming wght here would freeze every weight in the set. */
.marketing-hero > h1,
.marketing-specimen-name {
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 60;
}
/* the text cut, for the specimen's serif italic at reading size */
.marketing-specimen-tagline { font-variation-settings: "opsz" 14; }

/* THE ROLE LINE (direction §3.3/§5). `.eyebrow` (application.css's base
   typography rules) is 12px/.16em/--ink-soft: the app plane's answer, and an
   AUDITED CROSS-PLANE BORROW (test/assets/cross_plane_class_borrowing_test.rb),
   so it cannot be changed at source without changing the app. Scoping the
   override under the two marketing sections that use it gives the front door
   the same voice as an author's .kicker — 600, --accent-deep — and cannot
   collide off this page. Size/tracking stay: 12px/.16em is inside the
   direction's range and one step wider than .kicker's .09em, which is right
   for a section label as against an identity line. Colour is a token;
   --accent-deep on every ground is the pair .kicker already ships at AA. */
.marketing-what > .eyebrow,
.marketing-who > .eyebrow {
  font-weight: 600;
  color: var(--accent-deep);
}

/* THE HALF-TITLE'S AIR. Book front matter is unhurried above the title; the hero
   currently starts hard under the masthead. This borrows `.landing > h1`'s
   padding-top idiom (public.css:32) rather than inventing an interval, and it is
   padding on the hero itself — the `.page` flex gap still owns every gap BETWEEN
   sections, so nothing below the hero moves and no section rhythm changes. */
.marketing-hero { padding-top: clamp(4px, 2.5vw, 18px); }

/* ===========================================================================
 * RESPONSIVE — marketing home (mobile pass, 2026-08-02).
 * Composition only, as the rest of this file. The 480px CTA rule already in
 * this file (line 53) is the precedent every stretch rule in the pass copies.
 * ========================================================================= */
@media (max-width: 820px) {
  /* design: public.css restates this wash for body.marketing-page; the
     responsive answer has to be restated with it or the front door keeps the
     artefact the author pages just lost. */
  body.marketing-page { background-attachment: scroll; }
}