/* ---------------------------------------------------------------------------
 * THE BRAND FACES (2026-09-29). Archivo for everything; Source Serif 4 for
 * large quiet serif headings. From the brand standard:
 *
 *   Display   Archivo 900   88px / 1.04 / -0.03em
 *   H1        Archivo 800   64px / 1.04 / -0.03em
 *   Serif     Source Serif 4 600   30px / 1.2 / 0   (a substitute -- the brand
 *             is still waiting on its real serif; swap the file when it lands)
 *   Body      Archivo 400   16px / 1.55 / 0
 *   Eyebrow   Archivo 600 CAPS   11px / 1.2 / +0.08em
 *
 * This replaced Anton, the condensed hero face, and Arial / Georgia / Segoe UI
 * everywhere else. The same two @font-face rules are in chatceo.css, and in
 * _404.html inline, since that page loads no stylesheet.
 *
 * SELF-HOSTED, Latin subset, from Google's own latin slice (fonts.gstatic.com,
 * fetched 2026-09-29). Not from Google's CDN at run time: two extra origins on
 * every load and a privacy question this site does not need to answer.
 * VERIFIED WITH fontTools that each file carries all 95 basic Latin characters
 * plus the em dash and curly quotes. The three woff2 this site once shipped
 * were Google's VIETNAMESE slices, with 1 of 62 Latin letters; nothing caught
 * it until someone asked why chatceo never rendered in its own face. Check the
 * cmap again if either file is ever replaced.
 *
 * BOTH ARE VARIABLE FONTS, one file each. Archivo: weight 100-900 and WIDTH
 * 62-125% (font-stretch), so a condensed Archivo needs no second file. Source
 * Serif 4: weight 200-900, optical size automatic. The weight and stretch
 * ranges below MUST match the file's axes or the browser synthesises bold.
 *
 * font-display: swap -- a hundred milliseconds of the fallback beats a hundred
 * of nothing on the headline.
 * ------------------------------------------------------------------------- */
@font-face {
  font-family: 'Archivo';
  src: url('assets/fonts/archivo-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('assets/fonts/source-serif-4-latin.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
/* Anton -- the headline face, restored 2026-09-29 after Archivo was tried for
   headlines and rejected on sight. Self-hosted Latin subset, 12 KB, one weight
   (400). Archivo stays the body face. */
@font-face {
  font-family: 'Anton';
  src: url('assets/fonts/anton-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   THE HEADLINE SWITCH -- one block decides every heading's face.
   The SAME block is in chatceo.css; keep the two identical.

   Every h1-h6 on the site takes these through the rule under
   "Headings" below, which uses !important so it beats the weights
   written inline on individual headings (500 to 900). That matters
   because ANTON HAS ONE WEIGHT: any heading asking it for 700 would
   get a synthesised fake bold, smeared and wider.

   TO SWITCH FACES: comment out the active set and uncomment another. Also move the hero's phone breakpoint in index.html
   (432px Archivo, 402px Segoe UI, 346px Anton) -- a media query cannot read
   a variable, so that one number has to be changed by hand.
   _archivotest.html is the homepage with this switch already thrown.

   The numbers:
     --hero-fit     px of line per px of type for "how CEOs use AI."
                    in that face, from the font file (fontTools).
     --hero-cap     largest hero size. Anton is condensed and needs
                    more nominal size to fill the same width.
     --tracking     0 for both. Archivo at 75% width with the brand's
                    -0.03em overlaps the "rt" of "experts".
     --leading      line-height for the big headlines. Anton's ink
                    runs 0.923em up and 0.127em down, so it needs
                    about 1.1; Archivo takes the brand's 1.04.
   ============================================================ */
:root {
  /* ---- ARCHIVO (active, 2026-09-29, second time) ----
     Self-hosted, so identical on every device. NORMAL WIDTH: the 75%
     condensed version was tried the same morning and rejected. Headings
     800, heroes 900 -- side by side on an iPhone 15, Archivo 800-900 matched
     San Francisco's weight, and its wider letters balance SF's heavier ones.
     TRACKING 0: at -0.01em the "ay" of "Always" touches (-5/1000 em in 900).
     Fit 9.187 = "how CEOs use AI." in Archivo 900 at 100% width, fontTools.
     Title 72px = what the ChatCEO title was showing when every hero was set
     to match it; the homepage may go bigger later. */
  --font-headline:     'Archivo', 'Arial Black', Arial, sans-serif;
  --headline-weight:   800;
  --hero-weight:       900;
  --headline-stretch:  100%;
  --headline-tracking: 0;
  --headline-leading:  1.04;
  --hero-fit:          9.187;
  --hero-cap:          72px;
  --title-size:        72px;

  /* ---- SEGOE UI (inactive) ----
     The system UI stack the ChatCEO hero title always used: Macs and iPhones
     get San Francisco, Windows gets Segoe UI, Android gets Roboto. Neither
     SF nor Segoe may be self-hosted (Apple's and Microsoft's licences), so
     this is the ONLY set that renders differently per device.

     WEIGHT 800, AND ON WINDOWS THAT MEANS BLACK (900). Segoe UI Black
     (seguibl.ttf) declares itself as the 900 weight of the Segoe UI family,
     so a request for 800 rounds UP to Black -- which is what the ChatCEO
     title always showed. 700 gives plain Bold and looks thin; that was tried
     2026-09-29 and rejected on sight. Macs get SF Heavy (a real 800), Android
     Roboto 800.

     TRACKING -0.01em. The tight pair in Black is the "xt" of "next": at the
     old -0.04em it overlaps by 28/1000 em (2px at 80px); at -0.01em it clears
     (+2). Fit 8.287 = Segoe UI Black advance 8.447 minus 16 x 0.01, measured
     from the font file. SF cannot be measured here; a Mac may differ a little.
     Title 72px: at 80px, Black ran "next move." into the ChatCEO mark. */
  /* ---- SEGOE UI variables ----
  --font-headline:     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --headline-weight:   800;
  --hero-weight:       800;
  --headline-stretch:  100%;
  --headline-tracking: -0.01em;
  --headline-leading:  1.04;
  --hero-fit:          8.287;
  --hero-cap:          80px;
  --title-size:        72px;
  */

  /* ---- ANTON (inactive) ----
  --font-headline:     'Anton', 'Arial Black', Arial, sans-serif;
  --headline-weight:   400;
  --hero-weight:       400;
  --headline-stretch:  100%;
  --headline-tracking: 0;
  --headline-leading:  1.1;
  --hero-fit:          6.650;
  --hero-cap:          100px;
  --title-size:        80px;
  */

  /* ---- ARCHIVO CONDENSED 75% (inactive, rejected 2026-09-29) ----
  --font-headline:     'Archivo', 'Arial Black', Arial, sans-serif;
  --headline-weight:   800;
  --hero-weight:       900;
  --headline-stretch:  75%;
  --headline-tracking: 0;
  --headline-leading:  1.04;
  --hero-fit:          7.122;
  --hero-cap:          88px;
  --title-size:        64px;
  */
}

/* ============================================================
   XpertLoop -- site stylesheet.

   Flattened out of _ds/ on 2026-09-15. It was a GUID-named directory
   holding one entry point that @imported five token files -- and three of
   the four pages using it linked all six by hand as well, so every token
   file downloaded twice on those pages.

   Same rules, same order, same cascade: colors, typography, spacing and
   base, concatenated in the order styles.css imported them.

   FONTS: self-hosted since 2026-09-29 (Archivo, Source Serif 4, Anton,
   in assets/fonts/, declared at the top of this file). The Google @import
   that fonts.css once held is gone; no page requests a font from Google.

   The topographic-triangle motif (the .u-topo-bg utility and the <img>
   copies on Joel, Masterclass and Operators) was removed 2026-09-29: the
   only triangle art on the site is now the animated hub on ChatCEO/Talk.
   ============================================================ */

/* ============================================================
   CEO-S / ChatCEO — Color tokens
   Light, editorial, executive. Deep navy ink + brass gold accent.
   ============================================================ */
:root {
  /* ---- Base palette ---- */
  --navy-900: #0c182a;   /* primary ink, dark surfaces, buttons */
  --navy-800: #14161b;   /* near-black button fill */
  --navy-700: #222d3a;
  --navy-500: #3a4655;

  --gold-600: #8a6c28;   /* darker brass (hover) */
  --gold-500: #9a7a2f;   /* brand brass accent */
  --gold-300: #c9af6f;
  --gold-100: #f3ead6;   /* brass tint surface */

  /* Slate blue = SECONDARY accent. Use VERY sparingly — the occasional pop only
     (a success tick, one confirmation bar, a single figure). Navy + brass carry the page. */
  --slate-600: #264b70;
  --slate-500: #2f5d8c;
  --slate-100: #d5dfeb;

  --red-500: #c00;    /* required / destructive */
  --red-100: #f7dada;

  --gray-0:  #ffffff;
  --gray-25: #fefefe;    /* near-white canvas (just off pure white) */
  --gray-50: #fafafa;    /* subtle fill */
  --gray-100:#f1f1f2;
  --gray-125:#eee;       /* brand light (Elana) -- the page ground */
  --gray-150:#eaeaec;
  --gray-200:#e5e5e7;    /* hairline border */
  --gray-300:#d9d9da;    /* strong border */
  --gray-400:#b4b5bc;
  --gray-500:#959494;
  --gray-600:#7a808a;    /* muted text */
  --gray-700:#5a5c64;    /* body text */
  --gray-900:#0c182a;

  /* ---- Semantic: surfaces ---- */
  --canvas:          var(--gray-125);   /* page background -- Elana's #eee */
  --surface:         var(--gray-0);
  --surface-sunken:  var(--gray-50);
  --surface-inverse: var(--navy-900);
  --surface-brass:   var(--gold-100);

  /* ---- Semantic: text ---- */
  --text-strong:  var(--navy-900);
  --text-body:    var(--gray-700);
  --text-muted:   var(--gray-600);
  --text-subtle:  var(--gray-500);
  --text-accent:  var(--gold-500);
  --text-on-dark: var(--gray-50);
  --text-positive:var(--slate-500);

  /* ---- Semantic: borders ---- */
  --border:        var(--gray-200);
  --border-strong: var(--gray-300);
  --border-focus:  var(--navy-900);

  /* ---- Semantic: interactive ---- */
  --accent:          var(--gold-500);
  --accent-hover:    var(--gold-600);
  --action:          var(--navy-800);
  --action-hover:    #000000;
  --positive:        var(--slate-500);
  --positive-surface:var(--slate-100);
  --danger:          var(--red-500);

  /* ---- Focus ring ---- */
  --ring: 0 0 0 3px rgba(12, 24, 42, 0.14);
  --ring-accent: 0 0 0 3px rgba(154, 122, 47, 0.22);
}

/* ============================================================
   CEO-S / ChatCEO — Typography tokens
   ============================================================ */
:root {
  /* ---- Families ---- */
  /* Archivo everywhere, per the brand standard (see the @font-face note at the
     top). Arial stays last as the fallback while the file loads. */
  --font-sans:  'Archivo', Arial, Helvetica, sans-serif;
  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  /* Headings. Archivo is ONE variable family, so 800 and 900 are real weights
     of the same face. Arial Black stays only as the load-time fallback. */
  --font-display: 'Archivo', 'Arial Black', Arial, Helvetica, sans-serif;

  /* ---- Weights ---- */
  --fw-regular: 400; /* @kind font */
  --fw-medium:  500; /* @kind font */
  --fw-semibold:600; /* @kind font */
  --fw-bold:    700; /* @kind font */
  --fw-extra:   800; /* @kind font */
  --fw-black:   900; /* @kind font */

  /* ---- Type scale (px) ---- */
  --fs-micro:  11px;  /* mono labels */
  --fs-caption:13px;
  --fs-small:  14px;
  --fs-body:   16px;
  --fs-lead:   18px;
  --fs-h6:     20px;
  --fs-h5:     24px;
  --fs-h4:     30px;
  --fs-h3:     38px;
  --fs-h2:     48px;
  --fs-h1:     64px;
  --fs-display:88px;  /* hero grotesque */

  /* ---- Line heights ---- */
  --lh-tight:   1.04; /* @kind font */
  --lh-snug:    1.15; /* @kind font */
  --lh-heading: 1.2; /* @kind font */
  --lh-body:    1.55; /* @kind font */
  --lh-relaxed: 1.7; /* @kind font */

  /* ---- Letter spacing ---- */
  --ls-tight:   -0.03em; /* @kind font */
  --ls-snug:    -0.015em; /* @kind font */
  --ls-normal:   0; /* @kind font */
  --ls-wide:     0.04em; /* @kind font */
  --ls-mono:     0.08em; /* @kind font */

  /* ---- Semantic roles ---- */
  --type-display:   var(--fw-black) var(--fs-display)/var(--lh-tight) var(--font-sans);
  --type-h1:        var(--fw-extra) var(--fs-h1)/var(--lh-tight) var(--font-sans);
  --type-h2:        var(--fw-bold) var(--fs-h2)/var(--lh-snug) var(--font-sans);
  --type-serif-h:   var(--fw-semibold) var(--fs-h4)/var(--lh-heading) var(--font-serif);
  --type-body:      var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-sans);
  --type-label:     var(--fw-semibold) var(--fs-small)/1.3 var(--font-sans);
  /* Eyebrow / micro-label: uppercase, wide tracking (set text-transform + letter-spacing where used). */
  --type-mono-label:var(--fw-semibold) var(--fs-micro)/1.2 var(--font-sans);
}

/* ============================================================
   CEO-S / ChatCEO — Spacing, radius, shadow, layout tokens
   4px base grid.
   ============================================================ */
:root {
  /* ---- Spacing ---- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---- Radius ---- */
  --radius-xs:  4px;
  --radius-sm:  6px;   /* inputs */
  --radius-md:  8px;   /* buttons, chips */
  --radius-lg:  12px;
  --radius-xl:  16px;  /* goal cards */
  --radius-2xl: 24px;  /* large panels / hero form */
  --radius-pill:999px;

  /* ---- Elevation (soft, cool navy-tinted) ---- */
  --shadow-xs: 0 1px 2px rgba(12, 24, 42, 0.05);
  --shadow-sm: 0 1px 3px rgba(12, 24, 42, 0.07), 0 1px 2px rgba(12, 24, 42, 0.04);
  --shadow-md: 0 6px 20px rgba(12, 24, 42, 0.08);
  --shadow-lg: 0 18px 50px rgba(12, 24, 42, 0.10);
  --shadow-focus-dark: 0 8px 24px rgba(12, 24, 42, 0.22);

  /* ---- Layout ---- */
  --container: 1240px; /* @kind other */
  --container-narrow: 760px; /* @kind other */
  --gutter: var(--space-6); /* @kind other */
  --border-width: 1px; /* @kind other */

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.45, 0, 0.2, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 320ms; /* @kind other */
}

/* ============================================================
   CEO-S / ChatCEO — base element defaults & helpers.
   Light-touch: sets canvas, type, selection. No heavy reset.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--gold-100); color: var(--navy-900); }

@keyframes ds-fade { from { opacity: 0; } to { opacity: 1; } }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--text-strong);
  line-height: var(--lh-heading);
  text-wrap: balance;
}

/* EVERY HEADING TAKES THE HEADLINE SWITCH (the :root block near the top).
   !important because headings across the pages carry inline font-weight
   (500-900) and inline font-family; without it Anton would be asked for
   weights it does not have and synthesise a fake bold. Size and colour are
   NOT forced -- each heading keeps its own. The same rule is in chatceo.css.

   Tracking measured for Archivo at 75% width: the "rt" of "experts" clears
   by +14/1000 em at tracking 0 and overlaps (-16/1000 em) at the brand's
   -0.03em. fontTools, against assets/fonts/archivo-latin.woff2. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-headline) !important;
  font-weight: var(--headline-weight) !important;
  font-stretch: var(--headline-stretch) !important;
  letter-spacing: var(--headline-tracking) !important;
}
/* EVERY PAGE'S HERO TITLE (its h1) -- one size and weight site-wide,
   2026-09-29. Before this the four pages using this stylesheet each set
   their own inline: Joel 64px/900, Masterclass 32-46px/500, Operators
   32-56px/600, homepage by formula. Now all take --hero-weight and
   --title-size from the switch, and step down at the same widths as the
   ChatCEO title (chatceo.css: 56px under 980px, 44px under 760px), so every
   hero on the site matches. !important beats the inline styles.
   The homepage hero is NOT sized here: .xl-display.xl-hero-h1 in index.html
   is more specific and keeps its fit-to-width formula, capped at --hero-cap. */
h1 {
  font-weight: var(--hero-weight) !important;
  font-size: var(--title-size) !important;
  line-height: var(--headline-leading) !important;
}
@media (max-width: 980px) { h1 { font-size: 56px !important; } }
@media (max-width: 760px) { h1 { font-size: 44px !important; } }

p { margin: 0; text-wrap: pretty; }

a { color: var(--text-accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

/* ---- Utility roles available to consumers ---- */
.u-eyebrow {
  font: var(--type-mono-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-mono);
  color: var(--text-accent);
}
.u-serif { font-family: var(--font-serif); letter-spacing: 0; }
.u-display {
  font-family: var(--font-sans);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  color: var(--text-strong);
}