/* ==========================================================================
   Arik Housley — tokens.css
   v1.5 · 2026-10-11 · Header breakpoint (Rob, to build later): the menu has 7 items since Blog
     was added and wraps to two rows between 901 and 1074px, so the mock's header switches to the
     phone menu at 1100px and below (was 900px). Layout breakpoints stay at 900px. Mock-only
     classes: the build's header doesn't use .ah-nav__list or .ah-nav__toggle, so copying v1.5 into
     the theme changes nothing until the GenerateBlocks breakpoint moves (DESIGN.md open item 14).
   v1.4 · 2026-10-11 · Bigger reading text (Rob: blog posts read too small). The type scale is
     fluid from a 400px to a 1200px viewport: body 18 -> 20px, ratio 1.15 -> 1.25 (see the scale
     comment under type). Desktop sizes are the old ones x 1.11 (h1 61, h2 39, h3 31.25, lead 25);
     phones keep 18px body with smaller heading steps (h1 36, h3 24). The reading measure drops
     from 66ch to 55ch: in Nunito Sans 66ch held ~82 characters a line, 55ch holds ~68. The
     header menu keeps 14.4px (--ah-fs-nav).
   v1.3 · 2026-10-10 · Type and marks (Rob, 2026-10-10). Headings, the lead line
     and quotes move from Libre Caslon Text to Newsreader (500 headings, 400 lead and
     quotes, optical sizing on; h1 -0.015em, h2 -0.01em, h1 line-height 1.04).
     Eyebrows and footer headings move to Oswald 500 caps, 16px, 0.08em: the book
     cover's condensed capitals. Links: the light-ground hover band is gone; a plain
     underline sits closer (offset 0.12em, was 0.24em) and thickens on hover. The
     page-title bar on dark grounds no longer hangs under the word like an
     underline: it sits behind it, as on light, in deep gold (white on it 3.49:1).
   v1.2 · 2026-10-10 · No italics anywhere (Rob, 2026-10-10). .ah-lead and
     .ah-quote__text keep Libre Caslon Text at the same size but set upright; em and
     cite render upright too (the book title in the story copy was the only em).
     The 400-italic faces in fonts.css stay declared but are no longer requested.
   v1.1 · 2026-10-10 · SHARED SECTIONS added for the audience-page template
     (corporate, faith-community, education) and the Speaking hub: .ah-split,
     .ah-page-hero__*, .ah-section-head, .ah-checklist, .ah-covers (+ --4),
     .ah-voices, .ah-cta-band. Additive: no v1.0 rule changed, so the built
     homepage renders exactly as before. FORMS comment corrected: the build
     kept Gravity Forms' Orbital theme and maps its variables to these values.
     One fix to a v1.0 rule: .ah-btn no longer sets white-space: nowrap (the
     long faith-page CTA overflowed a 375px screen); only the header button
     keeps nowrap. No visible change where labels already fit.
   v1.0 · 2026-10-10 · first cut for the GeneratePress rebuild of arikhousley.com.
     Palette direction A (approved by Rob 2026-10-10): the logo teal leads, the
     book's spine gold accents, the spine slate carries the dark bands. Fonts are
     the current site's (Libre Caslon Text + Nunito Sans). Accent devices adapted
     from robbalucas.com (DESIGN.md v2.5): the title bar, the link mark, the tick.
   Source of truth: ../DESIGN.md. Do not invent values; change them here first,
   bump the version, and add a changelog line above this one.
   Copies that must stay byte-identical once the build starts:
     <rebuild site>/design/design-handoff/tokens.css
     <rebuild site>/app/public/wp-content/themes/generatepress-child/assets/css/arik-tokens.css
   ==========================================================================
   FONTS
   Mock / preview — Google Fonts:
   <link href="https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400..600&family=Nunito+Sans:wght@400;600;700;800&family=Oswald:wght@500&display=swap" rel="stylesheet">
   Production — self-hosted: ../fonts/fonts.css (v2: Newsreader variable 400-600 with
   opsz, Nunito Sans 400/600/700/800, Oswald 500). font-synthesis: none on headings.
   Roles: Newsreader = headings, quotes, the lead line. Nunito Sans = body, nav,
   buttons, form labels. Oswald = eyebrows and footer headings (caps). Nothing else.
   ==========================================================================
   CONTRAST (WCAG 2.2, computed from the hex, floored)
     --ah-text   #38454A on white 9.91 · on mist 9.20
     --ah-text-muted #4F5657 on white 7.49 · on mist 6.96
     --ah-ink    #231F20 on white 16.30 · on mist 15.14 · on gold 8.63
     --ah-teal   #175C67 on white 7.60 · on mist 7.05 · white on teal 7.60
     --ah-teal-deep #194850 on white 10.07 · white on it 10.07 · on gold 5.33
     --ah-gold   #DFB76C on slate 7.81 · on teal 4.02 · on WHITE 1.88 (never text on light)
     --ah-gold-deep #B67E26 on white 3.49 · on mist 3.25 (marks only: underline, tick, quote mark)
       white on gold-deep 3.49: the page-title bar on dark grounds, large text only
     --ah-gold-ink #391904 on gold 8.46 (the only label on a gold fill)
     white on slate 14.75 · --ah-on-dark-muted #C7DBDF on slate 10.27 · on teal 5.29
     --ah-foundation #41BAAE on slate 6.22 · on teal 3.20 · on white 2.37 (decorative on light)
     --ah-line-strong #838A8C on white 3.51 · on mist 3.26 (form field borders)
     gold TYPE: on slate at any size; on teal only at >= 24px (or >= 18.66px bold);
     never on white or mist.
   ==========================================================================
   ICONOGRAPHY — Font Awesome 7 Pro, loaded by the Font Awesome plugin with
   Rob's Pro kit (the mock loads the same kit for preview). Full DESIGN.md table.
     Feature icons  fa-duotone fa-light  .ah-icon .ah-icon--duo   >= 32px
     Inline / list  fa-light             .ah-icon                 any size
     UI controls    fa-solid             inherits currentColor    arrows, menu, form states
   Colors come from the ground (below): teal + gold on light, gold on dark.
   Brands (Amazon, Instagram...) are NOT in the kit as of 2026-10-10.
   ========================================================================== */

:root {
  /* --- brand palette: the four public colors --------------------------- */
  --ah-teal: #175C67;          /* logo "medium green"; links, buttons, teal bands */
  --ah-slate: #1C2A30;         /* the book spine; header, footer, dark bands */
  --ah-gold: #DFB76C;          /* the spine gold; the accent: marks, icons on dark, gold fills */
  --ah-white: #FFFFFF;

  /* --- derived implementation tokens (not peer colors) ------------------ */
  --ah-teal-deep: #194850;     /* hover for teal buttons and links */
  --ah-gold-deep: #B67E26;     /* gold marks on light grounds (3:1); never text */
  --ah-gold-ink: #391904;      /* label on gold fills */
  --ah-ink: #231F20;           /* logo black; headings on light */
  --ah-text: #38454A;          /* logo "dark green"; body text on light */
  --ah-text-muted: #4F5657;    /* secondary text on light */
  --ah-mist: #F4F7F8;          /* second light band, cards on white */
  --ah-line: #D3D8D9;          /* decorative rules and card borders */
  --ah-line-strong: #838A8C;   /* form-field borders (3:1) */
  --ah-on-dark-muted: #C7DBDF; /* secondary text on slate and teal */
  --ah-foundation: #41BAAE;    /* Alaina's Voice Foundation teal; decorative, or text on slate only */

  /* --- status (Gravity Forms states) ------------------------------------ */
  --ah-error: #A51D23;   --ah-error-bg: #FEF4F3;
  --ah-success: #207F4C; --ah-success-bg: #F1F8F2;
  --ah-warning: #824514; --ah-warning-bg: #FAF6EE;
  --ah-info: #1F71C1;

  /* --- type ------------------------------------------------------------- */
  --ah-font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --ah-font-text: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ah-font-label: 'Oswald', 'Arial Narrow', 'Nunito Sans', sans-serif;  /* the book cover's condensed caps */
  /* scale (v1.4): fluid from a 400px to a 1200px viewport. Base 18 -> 20px, ratio 1.15 -> 1.25,
     so phones keep 18px text with gentler heading steps and desktop gets 20px text with the old
     proportions. Step n = base x ratio^n at each end, linear in between, capped at both ends.
       step  -1     0     1     2     3     4      5
       400  15.65  18   20.7  23.8  27.4  31.5   36.2
       1200 16     20   25    31.25 39.06 48.83  61.04
     Step 4 is deliberately unused (as 43.9 was in v1.0). */
  --ah-fs-meta: clamp(0.9783rem, 0.9674rem + 0.0435vw, 1rem);       /* step -1  15.65 -> 16px  captions, cite, post dates */
  --ah-fs-nav: 0.9rem;         /* 14.4px, fixed: the header menu (7 items) is already tight above 900px */
  --ah-fs-label: 1rem;         /* 16px    eyebrows, footer headings: Oswald is condensed, so it sets at the button size */
  --ah-fs-base: clamp(1.125rem, 1.0625rem + 0.25vw, 1.25rem);       /* step 0   18 -> 20px     body, h5 */
  --ah-fs-lead: clamp(1.2937rem, 1.1594rem + 0.5375vw, 1.5625rem);  /* step 1   20.7 -> 25px   lead line, quotes, h4, card titles */
  --ah-fs-h3: clamp(1.4878rem, 1.2552rem + 0.9306vw, 1.9531rem);    /* step 2   23.8 -> 31.25px */
  --ah-fs-h2: clamp(1.711rem, 1.3458rem + 1.4608vw, 2.4414rem);     /* step 3   27.4 -> 39.06px */
  --ah-fs-h1: clamp(2.2628rem, 1.4868rem + 3.1038vw, 3.8147rem);    /* step 5   36.2 -> 61.04px; one per page */
  --ah-lh-body: 1.65;
  --ah-lh-lead: 1.5;
  --ah-lh-heading: 1.18;
  --ah-lh-display: 1.04;
  --ah-fw-display: 500;        /* Newsreader Medium: headings h1-h6 */
  --ah-fw-quote: 400;          /* Newsreader Regular: the lead line and quotes */
  --ah-fw-text: 400;
  --ah-fw-strong: 700;
  --ah-fw-button: 700;
  --ah-fw-label: 500;          /* Oswald Medium: the only Oswald weight on the server */
  --ah-track-display: -0.015em; /* h1 */
  --ah-track-heading: -0.01em;  /* h2 */
  --ah-track-label: 0.08em;    /* uppercase eyebrows: the book's gold caps lines */
  --ah-track-nav: 0.1em;
  --ah-track-button: 0.02em;

  /* --- space, layout, shape --------------------------------------------- */
  --ah-u: 8px;                 /* ladder: 8 16 24 32 48 64 96 */
  --ah-s-1: 8px;  --ah-s-2: 16px; --ah-s-3: 24px; --ah-s-4: 32px;
  --ah-s-6: 48px; --ah-s-8: 64px; --ah-s-12: 96px;
  --ah-container: 1200px;
  --ah-gutter: 24px;
  --ah-measure: 55ch;          /* ~68 characters a line in Nunito Sans (66ch held ~82: a ch is a zero, wider than the average letter) */
  --ah-radius: 4px;            /* buttons, fields */
  --ah-radius-card: 8px;       /* cards, images */

  /* --- motion ----------------------------------------------------------- */
  --ah-speed: 140ms;           /* every interface state change */
  --ah-speed-lg: 280ms;        /* entrances and reveals: exactly 2x */
  --ah-ease: ease-out;

  /* --- accent devices (geometry from robbalucas.com v2.1.1) -------------- */
  --ah-bar-overhang: 0.055em;
  --ah-bar-overhang-hover: 0.20em;
  --ah-tick-width: 1.7em;
  --ah-tick-height: max(3px, 0.08em);
  --ah-tick-gap: 0.55em;
  --ah-ul-rest: max(2px, 0.1em);   /* the link underline at rest */
  --ah-ul-offset: 0.12em;          /* close to the letters (was 0.24em); skip-ink clears the descenders */
}

/* ==========================================================================
   GROUNDS — every band declares its ground; devices read these variables.
   Light: white and mist. Dark: slate and teal. Never put a band on a band.
   ========================================================================== */
:root,
.ah-band--white,
.ah-band--mist {
  --ah-bg: var(--ah-white);
  --ah-fg: var(--ah-text);
  --ah-fg-heading: var(--ah-ink);
  --ah-fg-muted: var(--ah-text-muted);
  --ah-link: var(--ah-teal);
  --ah-link-hover: var(--ah-teal-deep);
  --ah-ul-color: var(--ah-gold-deep);
  --ah-ul-hover: 3px;                  /* light: the underline thickens and the word deepens */
  --ah-mark: var(--ah-gold-deep);
  --ah-eyebrow: var(--ah-teal);
  --ah-icon: var(--ah-teal);
  --ah-icon-2: var(--ah-gold);
  --ah-icon-2-opacity: 1;
  --ah-quote-mark: var(--ah-gold-deep);
  --ah-focus: var(--ah-teal);
  --ah-card-bg: var(--ah-mist);
  --ah-bar-color: var(--ah-gold);
  --ah-bar-drop: 0.12em;               /* crosses the baseline, behind the word */
  --ah-bar-height: 0.26em;
  --ah-bar-height-hover: 0.34em;
}
.ah-band--mist {
  --ah-bg: var(--ah-mist);
  --ah-card-bg: var(--ah-white);
}
.ah-band--slate,
.ah-band--teal {
  --ah-bg: var(--ah-slate);
  --ah-fg: var(--ah-white);
  --ah-fg-heading: var(--ah-white);
  --ah-fg-muted: var(--ah-on-dark-muted);
  --ah-link: var(--ah-white);
  --ah-link-hover: var(--ah-white);    /* on dark the word never changes; the mark does */
  --ah-ul-color: var(--ah-gold);
  --ah-ul-hover: 4px;
  --ah-mark: var(--ah-gold);
  --ah-eyebrow: var(--ah-gold);
  --ah-icon: var(--ah-gold);
  --ah-icon-2: var(--ah-foundation);
  --ah-icon-2-opacity: 0.45;
  --ah-quote-mark: var(--ah-gold);
  --ah-focus: var(--ah-gold);
  --ah-card-bg: rgba(255, 255, 255, 0.06);
  --ah-bar-color: var(--ah-gold-deep);  /* behind the word, like light grounds: white on it is 3.49:1, so headings only (>= 24px) */
  --ah-bar-drop: 0.12em;               /* crosses the baseline, behind the word (no longer hangs like an underline) */
  --ah-bar-height: 0.26em;
  --ah-bar-height-hover: 0.34em;
}
.ah-band--teal {
  --ah-bg: var(--ah-teal);
  --ah-eyebrow: var(--ah-on-dark-muted); /* small gold type fails on teal (4.02:1) */
  --ah-icon-2: var(--ah-white);
  --ah-icon-2-opacity: 0.2;
}
.ah-band--white, .ah-band--mist, .ah-band--slate, .ah-band--teal {
  background-color: var(--ah-bg);
  color: var(--ah-fg);
  padding-block: var(--ah-s-12);
}

/* ==========================================================================
   BASE
   ========================================================================== */
body {
  margin: 0;
  background: var(--ah-white);
  color: var(--ah-fg);
  font-family: var(--ah-font-text);
  font-size: var(--ah-fs-base);
  font-weight: var(--ah-fw-text);
  line-height: var(--ah-lh-body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ah-font-display);
  font-weight: var(--ah-fw-display);
  font-optical-sizing: auto;          /* Newsreader's opsz axis follows the size: fine at h1, sturdy at h4 */
  font-synthesis: none;                /* never fake bold again */
  color: var(--ah-fg-heading);
  line-height: var(--ah-lh-heading);
  letter-spacing: 0;
  margin: 0 0 var(--ah-s-3);
  text-wrap: balance;
}
h1 { font-size: var(--ah-fs-h1); line-height: var(--ah-lh-display); letter-spacing: var(--ah-track-display); }
h2 { font-size: var(--ah-fs-h2); letter-spacing: var(--ah-track-heading); }
h3 { font-size: var(--ah-fs-h3); }
h4 { font-size: var(--ah-fs-lead); }
h5, h6 { font-size: var(--ah-fs-base); }
p { margin: 0 0 var(--ah-s-3); text-wrap: pretty; }
em, cite { font-style: normal; }       /* no italics on this site (v1.2) */
img { max-width: 100%; height: auto; display: block; }
strong, b { font-weight: var(--ah-fw-strong); }
:focus-visible { outline: 2px solid var(--ah-focus); outline-offset: 3px; }
::selection { background: var(--ah-gold); color: var(--ah-gold-ink); }

.ah-container { max-width: var(--ah-container); margin-inline: auto; padding-inline: var(--ah-gutter); }
.ah-measure { max-width: var(--ah-measure); }
.ah-lead {
  font-family: var(--ah-font-display);
  font-weight: var(--ah-fw-quote);
  font-optical-sizing: auto;
  font-style: normal;                 /* upright: no italics (v1.2) */
  font-size: var(--ah-fs-lead);
  line-height: var(--ah-lh-lead);
  color: var(--ah-fg);
}
.ah-muted { color: var(--ah-fg-muted); }
.ah-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ==========================================================================
   ACCENT DEVICES — one mark per job, one job per mark.
   1. .ah-bar   the page title only, once per page. Gold. Wrap the key word.
   2. links     a plain underline, close to the letters. Hover thickens it
                (3px light, 4px dark); on light the word also deepens. No band.
   3. .ah-tick  in-content h2s. Never on a heading that carries the bar.
   4. .ah-eyebrow  small caps line above a heading: the book's gold caps.
   Gold stays under a sixth of any screen.
   ========================================================================== */
.ah-bar {
  position: relative;
  z-index: 0;                          /* own stacking context: the bar paints behind its word, never behind the band */
  /* Same geometry on every ground since v1.3: the bar crosses the baseline behind
     the word. Light: gold under ink (8.63:1). Dark: deep gold under white (3.49:1,
     large text only, which a page title always is). */
  display: inline-block;
  line-height: 0.98;
}
.ah-bar::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: calc(-1 * var(--ah-bar-overhang));
  right: calc(-1 * var(--ah-bar-overhang));
  bottom: var(--ah-bar-drop);
  height: var(--ah-bar-height);
  background: var(--ah-bar-color);
  transition: height var(--ah-speed) var(--ah-ease), left var(--ah-speed) var(--ah-ease), right var(--ah-speed) var(--ah-ease);
}
a.ah-bar { color: inherit; text-decoration: none; }
a.ah-bar:hover::before,
a.ah-bar:focus-visible::before {
  height: var(--ah-bar-height-hover);
  left: calc(-1 * var(--ah-bar-overhang-hover));
  right: calc(-1 * var(--ah-bar-overhang-hover));
}

.ah-prose a,
a.ah-link {
  /* The mark is a real underline (text-decoration), not a background image or
     a band: it survives Windows High Contrast / forced-colors mode and skip-ink
     keeps it clear of descenders. v1.3 dropped the light-ground hover band and
     moved the line closer to the letters (Rob, 2026-10-10). */
  color: var(--ah-link);
  text-decoration-line: underline;
  text-decoration-color: var(--ah-ul-color);
  text-decoration-thickness: var(--ah-ul-rest);
  text-underline-offset: var(--ah-ul-offset);
  text-decoration-skip-ink: auto;
  transition: text-decoration-thickness var(--ah-speed) var(--ah-ease), color var(--ah-speed) var(--ah-ease);
}
.ah-prose a:hover,
.ah-prose a:focus-visible,
a.ah-link:hover,
a.ah-link:focus-visible {
  color: var(--ah-link-hover);
  text-decoration-thickness: var(--ah-ul-hover);
}

.ah-tick::before {
  content: "";
  display: block;
  width: var(--ah-tick-width);
  height: var(--ah-tick-height);
  background: var(--ah-mark);
  margin-bottom: var(--ah-tick-gap);
}

.ah-eyebrow {
  font-family: var(--ah-font-label);
  font-size: var(--ah-fs-label);
  font-weight: var(--ah-fw-label);
  letter-spacing: var(--ah-track-label);
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--ah-eyebrow);
  margin: 0 0 var(--ah-s-2);
}

/* ==========================================================================
   BUTTONS — contrast rises on hover, never falls.
   --primary  light grounds   teal -> teal-deep, white label (7.60 -> 10.07)
   --gold     dark grounds    gold -> white, gold-ink label (8.46 -> 15.97)
   --ghost    light grounds   teal outline -> teal fill
   --ghost-dark dark grounds  white outline -> white fill, slate label (14.75)
   ========================================================================== */
.ah-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--ah-font-text);
  font-size: 1rem;
  font-weight: var(--ah-fw-button);
  letter-spacing: var(--ah-track-button);
  line-height: 1.2;
  padding: 14px 26px;
  border: 2px solid transparent;
  border-radius: var(--ah-radius);
  text-decoration: none;
  cursor: pointer;
  max-width: 100%;
  transition: background-color var(--ah-speed) var(--ah-ease), color var(--ah-speed) var(--ah-ease), border-color var(--ah-speed) var(--ah-ease);
}
.ah-btn .fa-solid { transition: transform var(--ah-speed) var(--ah-ease); }
.ah-btn:hover .fa-arrow-right, .ah-btn:focus-visible .fa-arrow-right { transform: translateX(4px); }
.ah-btn--primary { background: var(--ah-teal); color: var(--ah-white); }
.ah-btn--primary:hover, .ah-btn--primary:focus-visible { background: var(--ah-teal-deep); }
.ah-btn--gold { background: var(--ah-gold); color: var(--ah-gold-ink); }
.ah-btn--gold:hover, .ah-btn--gold:focus-visible { background: var(--ah-white); }
.ah-btn--ghost { border-color: var(--ah-teal); color: var(--ah-teal); background: transparent; }
.ah-btn--ghost:hover, .ah-btn--ghost:focus-visible { background: var(--ah-teal); color: var(--ah-white); }
.ah-btn--ghost-dark { border-color: var(--ah-white); color: var(--ah-white); background: transparent; }
.ah-btn--ghost-dark:hover, .ah-btn--ghost-dark:focus-visible { background: var(--ah-white); color: var(--ah-slate); }
.ah-btn-row { display: flex; flex-wrap: wrap; gap: var(--ah-s-2); }

/* ==========================================================================
   ICONS — Font Awesome 7 Pro (see ICONOGRAPHY above and DESIGN.md)
   ========================================================================== */
.ah-icon { color: var(--ah-icon); }
.ah-icon--duo {
  --fa-primary-color: var(--ah-icon);
  --fa-secondary-color: var(--ah-icon-2);
  --fa-secondary-opacity: var(--ah-icon-2-opacity);
}
.ah-icon--feature { font-size: 2.5rem; }   /* 40px: duotone needs >= 32px to read */

/* ==========================================================================
   CARDS, QUOTES
   ========================================================================== */
.ah-card {
  display: flex;
  flex-direction: column;
  gap: var(--ah-s-2);
  background: var(--ah-card-bg);
  border-radius: var(--ah-radius-card);
  padding: var(--ah-s-4);
}
.ah-card__title { font-size: var(--ah-fs-lead); margin: 0; }
.ah-card__body { color: var(--ah-fg-muted); margin: 0; flex-grow: 1; }

.ah-quote { margin: 0; display: flex; flex-direction: column; gap: var(--ah-s-2); }
.ah-quote__mark { font-size: 2rem; color: var(--ah-quote-mark); }
.ah-quote__text {
  font-family: var(--ah-font-display);
  font-weight: var(--ah-fw-quote);
  font-optical-sizing: auto;
  font-style: normal;                 /* upright: no italics (v1.2) */
  font-size: var(--ah-fs-lead);
  line-height: 1.55;
  color: var(--ah-fg);
  margin: 0;
}
.ah-quote__cite { font-style: normal; font-size: var(--ah-fs-meta); font-weight: var(--ah-fw-strong); color: var(--ah-fg); }
.ah-quote__role { display: block; font-weight: var(--ah-fw-text); color: var(--ah-fg-muted); }

/* ==========================================================================
   FORMS — Gravity Forms keeps its Orbital theme; the build maps Orbital's
   variables to these values (generatepress-child/assets/css/arik-build.css)
   ========================================================================== */
.ah-field { display: flex; flex-direction: column; gap: var(--ah-s-1); }
.ah-field__label { font-size: 1rem; font-weight: var(--ah-fw-strong); color: var(--ah-fg); }
.ah-field__req { font-weight: var(--ah-fw-text); color: var(--ah-fg-muted); }
.ah-field__input {
  font: inherit;
  font-size: 1rem;
  color: var(--ah-text);
  background: var(--ah-white);
  border: 1px solid var(--ah-line-strong);
  border-radius: var(--ah-radius);
  padding: 12px 14px;
}
.ah-field__input:focus-visible { outline: 2px solid var(--ah-teal); outline-offset: 2px; border-color: var(--ah-teal); }
.ah-field--error .ah-field__input { border-color: var(--ah-error); }
.ah-field__error { color: var(--ah-error); font-size: var(--ah-fs-meta); font-weight: var(--ah-fw-strong); display: flex; gap: 0.5em; align-items: baseline; }

/* ==========================================================================
   SHARED SECTIONS (v1.1) — the audience template and the Speaking hub.
   Used by more than one page, so they live here (contract Rule 0.5).
   Grounds: hero slate · why white · covers mist · story white · voices teal ·
   CTA slate. The hub: hero slate · story white · tiles mist · covers white.
   ========================================================================== */
.ah-split { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--ah-s-8); align-items: center; }
.ah-split--media-first { grid-template-columns: 0.85fr 1.15fr; }
.ah-split--top { align-items: start; }
.ah-split__media { margin: 0; }
.ah-split__img { width: 100%; border-radius: var(--ah-radius-card); }
.ah-split__img--portrait { max-width: 340px; justify-self: end; }
.ah-page-hero__title { margin-bottom: var(--ah-s-3); }
.ah-page-hero__lead { font-size: var(--ah-fs-lead); line-height: var(--ah-lh-lead); color: var(--ah-fg); max-width: 40ch; margin-bottom: var(--ah-s-4); }
.ah-section-head { max-width: 46rem; margin-bottom: var(--ah-s-6); }
.ah-section-foot { margin-top: var(--ah-s-6); }

.ah-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ah-s-2); }
.ah-checklist__item { display: flex; gap: 0.75em; align-items: baseline; }
.ah-checklist__item .ah-icon { flex: none; }
.ah-panel__title { font-size: var(--ah-fs-lead); margin-bottom: var(--ah-s-3); }

.ah-covers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ah-s-3); }
.ah-covers--4 { grid-template-columns: repeat(4, 1fr); }
.ah-covers__link { margin: 0; font-weight: var(--ah-fw-strong); }

.ah-voices { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ah-s-6) var(--ah-s-8); }

.ah-cta-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ah-s-4); }
.ah-cta-band__text { max-width: 44rem; margin: 0; }

/* ==========================================================================
   CHROME — header and footer (GeneratePress: Header Element + Footer Element)
   ========================================================================== */
.ah-header { background: var(--ah-slate); padding-block: var(--ah-s-2); }
.ah-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--ah-s-4); }
.ah-header__logo img { width: 168px; height: auto; }
.ah-nav { display: flex; align-items: center; gap: var(--ah-s-3); }
.ah-nav__list { display: flex; gap: var(--ah-s-3); list-style: none; margin: 0; padding: 0; }
.ah-nav__link {
  position: relative;
  display: inline-block;
  padding-block: 6px;
  font-size: var(--ah-fs-nav);
  font-weight: var(--ah-fw-strong);
  letter-spacing: var(--ah-track-nav);
  text-transform: uppercase;
  color: var(--ah-white);
  text-decoration: none;
}
.ah-nav__link::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 0;
  height: 2px;
  background: var(--ah-gold);
  transition: left var(--ah-speed) var(--ah-ease), right var(--ah-speed) var(--ah-ease);
}
.ah-nav__link:hover::after,
.ah-nav__link:focus-visible::after,
.ah-nav__link[aria-current="page"]::after { left: 0; right: 0; }
.ah-nav__toggle { display: none; }
.ah-header .ah-btn { white-space: nowrap; }   /* only the short header button never wraps */

.ah-footer { padding-block: var(--ah-s-8) var(--ah-s-4); }
.ah-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--ah-s-6); }
.ah-footer__logo img { width: 200px; height: auto; }
.ah-footer__heading { font-family: var(--ah-font-label); font-size: var(--ah-fs-label); font-weight: var(--ah-fw-label); letter-spacing: var(--ah-track-label); text-transform: uppercase; color: var(--ah-gold); margin: 0 0 var(--ah-s-2); }
.ah-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ah-s-1); }
a.ah-footer__foundation { color: var(--ah-foundation); }  /* 6.22:1 on slate */
.ah-footer__bottom { margin-top: var(--ah-s-6); padding-top: var(--ah-s-3); border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: var(--ah-fs-meta); color: var(--ah-on-dark-muted); }

@media (max-width: 900px) {
  .ah-band--white, .ah-band--mist, .ah-band--slate, .ah-band--teal { padding-block: var(--ah-s-8); }
  .ah-header { padding-block: var(--ah-s-1); }
  .ah-header .ah-btn { padding: 10px 16px; }
  .ah-header__logo img { width: 132px; }
  .ah-footer { padding-block: var(--ah-s-8) var(--ah-s-4); }
  :root { --ah-gutter: 16px; }
  .ah-footer__grid { grid-template-columns: 1fr 1fr; }
  .ah-split, .ah-split--media-first, .ah-voices { grid-template-columns: 1fr; gap: var(--ah-s-6); }
  .ah-split__img--portrait { justify-self: start; }
  .ah-covers, .ah-covers--4 { grid-template-columns: 1fr; }
}
/* The header menu (7 items) needs ~1075px on one row, and a comfortable logo gap from ~1090px
   (measured on the build 2026-10-11): at 1100px and below the header shows the phone menu
   (logo, Buy Book, menu button). Production: the GenerateBlocks Navigation's mobile breakpoint
   is 1100px (see DESIGN.md open item 14). Re-measure if a menu item is added or renamed. */
@media (max-width: 1100px) {
  .ah-nav__list { display: none; }       /* production: the GenerateBlocks phone menu (full overlay) */
  .ah-nav__toggle { display: inline-flex; color: var(--ah-white); background: none; border: 0; font-size: 1.5rem; padding: 8px; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .ah-covers--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}