/* ==========================================================================
   Theme A -- Restrained editorial
   --------------------------------------------------------------------------
   Typography-led. Serif headlines, generous whitespace, near-monochrome with
   a single navy accent. Rules instead of cards: the page reads as a document
   rather than a dashboard. Aims to read senior and consultative.

   Colour, type and logo rules are specified in ../../BRAND.md -- change them
   there first, then mirror the tokens here. The previous site's banner navy
   (#003B6D) was a Site Builder default, not a chosen colour; the brand navy
   is #0B2E4A. Paper stays warm and the ink is cooled to navy-black, so the
   two temperatures read as deliberate rather than accidental.
   ========================================================================== */

:root {
  /* Literata + IBM Plex Sans, self-hosted (see @font-face in base.css).
   * Literata was chosen over Newsreader and Fraunces on its figures: it is the
   * only candidate carrying the full set -- lnum, onum, tnum, pnum, frac, zero.
   * Fraunces has none at all, which on a site made of financial numbers means
   * columns that cannot be made to align. */
  --font-head: "Literata", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --head-weight: 600;
  --head-tracking: -.015em;
  --brand-weight: 600;
  --brand-tracking: -.005em;

  /* Fluid type -- scales with the viewport, no breakpoint jumps. */
  --text-base: 1.0625rem;
  --text-brand: clamp(1.05rem, 1.6vw, 1.2rem);
  --text-h1: clamp(2.4rem, 5.2vw, 3.9rem);
  --text-h2: clamp(1.75rem, 3.2vw, 2.5rem);
  --text-h3: clamp(1.2rem, 1.9vw, 1.4rem);
  --text-lede: clamp(1.1rem, 1.6vw, 1.28rem);

  --header-h: 5rem;
  --measure: 40rem;
  --measure-wide: 74rem;
  --section-gap: clamp(4rem, 8vw, 7rem);
  --hero-gap: clamp(5rem, 12vw, 10rem);
  --card-gap: clamp(2.25rem, 4vw, 3.5rem);

  --radius-sm: 3px;
  --shadow: 0 12px 32px rgba(11, 46, 74, .10);

  /* Warm paper, cool navy ink, one accent plus a brass counterpoint. */
  --bg: #fbfaf8;
  --surface: #ffffff;
  --surface-alt: #f1efeb;
  --header-bg: rgba(251, 250, 248, .88);
  --input-bg: #ffffff;

  --heading: #101a24;
  --text: #2c3742;
  --muted: #5f6972;

  --rule: #e2dfd9;
  --rule-strong: #c9c5bd;

  --accent: #0b2e4a;
  --accent-strong: #071f33;
  --on-accent: #ffffff;
  --link: #0b2e4a;
  --focus: #0b2e4a;

  /* Counterpoint, used sparingly. Teal since 2026-08-05, replacing brass --
   * navy and gold is the finance default and this practice is differentiating
   * on not being a consultancy. --counter carries graphics and chart bars at
   * 3.5:1 on the tint; --counter-deep carries small text at 8.0:1, which has
   * far more headroom than the 5.2:1 brass it replaced. */
  --counter: #2a8c86;
  --counter-deep: #175754;

  /* Inverted band. Navy ground; brass becomes the accent because navy-on-navy
   * has nowhere to go. All four pass AA on #0b2e4a: text 10.9:1, muted 6.9:1,
   * accent 6.3:1, headings 13.8:1. */
  --invert-bg: #0b2e4a;
  --invert-heading: #ffffff;
  --invert-text: #dde5ec;
  --invert-muted: #a6bacb;
  --invert-rule: rgba(255, 255, 255, .20);
  --invert-rule-strong: rgba(255, 255, 255, .34);
  --invert-accent: #6fc0bb;

  /* Categorical series for charts. Ordered by intended use -- take them in
   * sequence, do not cherry-pick, or two adjacent series stop being telling
   * apart at a glance. */
  --viz-1: #0b2e4a;
  --viz-2: #2a8c86;
  --viz-3: #c9a16a;
  --viz-4: #9a5b36;
  --viz-5: #5e7a94;
  --viz-6: #9fd3cd;

  --ok-bg: #edf6f1;  --ok-border: #bcdccb;  --ok-text: #1c5238;
  --bad-bg: #fbeeee; --bad-border: #e3c2c2; --bad-text: #7d2b2b;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1218;
    --surface: #141b22;
    --surface-alt: #1b242c;
    --header-bg: rgba(13, 18, 24, .88);
    --input-bg: #141b22;

    --heading: #edeff2;
    --text: #cbd3da;
    --muted: #8e99a4;

    --rule: #253039;
    --rule-strong: #37444f;

    /* The brand navy is far too dark to serve as an accent here, so dark mode
     * uses a light tint of it (7.2:1 on --bg) rather than the navy itself. */
    /* Dark mode promotes the counterpoint to primary: teal carries links and
     * buttons here, where it reads at 8.89:1 on near-black. The light-navy tint
     * this replaced was fine but generic. Adam's call, 2026-08-05. */
    --accent: #6fc0bb;
    --accent-strong: #8fd3ce;
    --on-accent: #08121b;
    --link: #6fc0bb;
    --focus: #6fc0bb;

    --counter: #6fc0bb;
    --counter-deep: #6fc0bb;

    /* The light-mode navy is nearly invisible against a near-black page, so the
     * band lifts to a paler navy to stay readable as a band at all. */
    --invert-bg: #17374e;
    --invert-heading: #ffffff;
    --invert-text: #dde5ec;
    --invert-muted: #a6bacb;
    --invert-rule: rgba(255, 255, 255, .20);
    --invert-rule-strong: rgba(255, 255, 255, .34);
    --invert-accent: #6fc0bb;

    /* viz-1 is a slate, not the light blue it used to be. The home chart's
     * unit bars take viz-1 and its flag bar takes --counter; a light blue put
     * the bars BRIGHTER than the flag, which is the rule backwards and left
     * them 1.22 apart. A slate restores "bars recede, flag advances" at 2.03. */
    --viz-1: #6e7c88;
    --viz-2: #5fbdb5;
    --viz-3: #d9b47a;
    --viz-4: #c08a5e;
    --viz-5: #8fa2b3;
    --viz-6: #b8e3de;

    --shadow: 0 12px 32px rgba(0, 0, 0, .5);

    --ok-bg: #14261e;  --ok-border: #2c4a3a;  --ok-text: #9fd9bb;
    --bad-bg: #2a1717; --bad-border: #4d2c2c; --bad-text: #e2a5a5;
  }
}

/* --- theme-specific treatment ------------------------------------------- */

/* Headline gets an old-style feel: tighter tracking, optical sizing. */
.hero-title { font-variant-numeric: oldstyle-nums; }

.hero-lede, .lede { font-family: var(--font-head); font-style: italic; }

/* A thin rule above each expertise column instead of a card. */
.expertise-item { border-top: 2px solid var(--heading); padding-top: 1.4rem; }

.expertise-title { letter-spacing: -.01em; }

/* Section headings sit under a hairline, like a printed masthead. */
.section-head { border-bottom: 1px solid var(--rule); padding-bottom: 1.5rem; }

.approach-step { border-left: 1px solid var(--rule); padding-left: 1.4rem; }

/* Portrait sits under a rule like a plate in a printed document -- square
 * corners, never a circle, which would fight the whole hairline system. */
.bio-card { border-top: 2px solid var(--accent); padding-top: 1.1rem; }

.bio-name { letter-spacing: -.01em; }

/* Contact details read as a printed listing. */
.contact-block { border-top: 1px solid var(--rule); padding-top: 1rem; }
.contact-block:first-child { border-top: 2px solid var(--heading); }

/* Listings take the same hairline treatment as the contact details: each entry
 * under a rule, the first heavier so the group has a top edge. */
.listing-item { border-top: 1px solid var(--rule); padding-top: 1.5rem; }
.listing-item:first-child { border-top: 2px solid var(--heading); }
.listing-label { letter-spacing: -.01em; }

.cta { background: var(--surface-alt); }
.cta .section-head { border-bottom: none; padding-bottom: 0; }

.btn { border-radius: 2px; letter-spacing: .01em; }