/* ============================================================
   Arche Advisory — Design tokens
   v1.1 — DARK GROUND. The page ground is now the darkest ink and
   sections differentiate along the ink scale. Sage-bright
   (#9DBBA0) is the accent, per the design system's rule that sage
   shifts to its bright variant on dark grounds.

   Source: Arche-Advisory-Design-System-v2_20260729_1732.md
   Wordmark values sampled from Arche-Advisory-Wordmark-Dark.png
   (Claude Design export, 29 Jul 2026).
   ============================================================ */

/* ------------------------------------------------------------
   Typefaces — all five are served from fonts/ in this folder.
   Nothing is fetched from Google Fonts, so the page renders
   correctly with no network connection.

   Nevera            — supplied, single weight, CAPS ONLY
   Moon Walk         — supplied, custom, single weight, CAPS ONLY
   Archivo           — SIL Open Font License 1.1
   Playfair Display  — SIL Open Font License 1.1
   IBM Plex Mono     — SIL Open Font License 1.1
   Permanent Marker  — Apache License 2.0

   Moon Walk note: the face has no true lowercase. Its lowercase
   glyphs are duplicates of the capitals, so anything set in it
   renders as capitals regardless of what is typed. Copy is still
   written in sentence case in the HTML so that screen readers,
   search engines and copy-paste get the correct text.
------------------------------------------------------------ */

@font-face {
  font-family: 'Moon Walk';
  src: url('../fonts/MoonWalk.woff2') format('woff2'),
       url('../fonts/MoonWalk.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/Archivo-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/Archivo-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/Archivo-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/PlayfairDisplay-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/PlayfairDisplay-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/IBMPlexMono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/IBMPlexMono-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Nevera';
  src: url('../fonts/Nevera.woff2') format('woff2'),
       url('../fonts/Nevera.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Permanent Marker';
  src: url('../fonts/PermanentMarker-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Ink scale ---------- */
  --ink:         #0E0F0D;   /* darkest — the page ground          */
  --ink-750:     #191B1C;   /* derived: between ink and ink-700   */
  --ink-700:     #26282A;   /* lifted — anchor sections           */
  --ink-600:     #3D3F41;   /* borders and raised surfaces        */
  --slate:       #565A5C;
  --slate-400:   #6E716F;

  /* ---------- Section grounds (dark theme) ----------
     Two working grounds plus a lifted anchor, all from the ink
     scale. Order across the page:
       ground-1 → ground-2 → ground-1 → ANCHOR
       → ground-1 → ground-2 → ground-1 → ANCHOR              */
  --ground-1: var(--ink);
  --ground-2: var(--ink-750);
  --ground-3: var(--ink-700);   /* the two anchor sections      */

  /* ---------- Accent — sage, sole accent ----------
     On a dark ground the design system specifies the bright
     variant. --sage stays available for pressed states.        */
  --sage:        #7A9E7E;
  --sage-700:    #5F7F63;
  --sage-bright: #9DBBA0;   /* primary accent on this site       */
  --sage-dim:    #7E9C81;   /* pressed / settled                 */
  --sage-tint:   rgba(157,187,160,0.12);

  /* ---------- Light surfaces (used sparingly) ---------- */
  --paper:       #FFFFFF;   /* scheduler panel only              */
  --paper-warm:  #F7F4EE;

  /* ---------- Lines ---------- */
  --line:        rgba(246,244,239,0.13);
  --line-strong: rgba(246,244,239,0.22);

  /* ---------- Text ---------- */
  --fg-1: #F6F4EF;                      /* headings, primary     */
  --fg-2: rgba(246,244,239,0.80);       /* body                  */
  --fg-3: rgba(246,244,239,0.56);       /* muted, captions       */
  --fg-on-accent: #0E0F0D;              /* text on a sage fill   */

  /* ---------- Text on the white scheduler panel ---------- */
  --on-paper-1: #0E0F0D;
  --on-paper-2: #3A3B39;
  --on-paper-3: #6E716F;

  /* ---------- Type families ---------- */
  /* v4.1 — Nevera replaces Permanent Marker as the display face
     across the whole site. Moon Walk survives only in the
     "Arche Advisory" wordmark in the footer, via --font-wordmark.

     Nevera is CAPS ONLY, like Moon Walk, and measured 30% WIDER
     than Permanent Marker — wider than Moon Walk too. Every
     display size set in v4.0 had to come back down; see the
     stage-title and section-title caps below and in stages.css. */
  /* v6.0 — the footer wordmark moves from Moon Walk to Nevera on
     instruction. Moon Walk was the last thing on the site still set in
     it, so as of this version the face is UNUSED. The @font-face block
     and fonts/MoonWalk.woff2 are kept rather than removed: the bundler
     checks that every declared face is embedded, older versions still
     reference it, and it costs 12 KB.

     Measured with fontTools before making the swap, rather than
     guessed. For the string "ARCHE ADVISORY":

       Moon Walk   9.6130 em wide, cap height 714/1000
       Nevera      9.6420 em wide, cap height 800/1000

     So the two are within 0.3% on width — the footer lockup keeps its
     footprint at the same 21px — but Nevera's caps stand 12% taller.
     Left alone, that would make the rule beneath the wordmark read as
     too thin against a heavier mark. The .lockup-mini rule and gap are
     re-derived from cap height in base.css to hold the sampled
     proportion. */
  --font-display:  'Nevera', 'Moon Walk', Georgia, serif;
  --font-marker:   'Nevera', 'Moon Walk', Georgia, serif;
  --font-wordmark: 'Nevera', 'Moon Walk', 'Playfair Display', Georgia, serif;
  --font-serif:   'Playfair Display', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-sans:    'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- Type scale ----------
     Reference model: body and UI type is FIXED per breakpoint,
     only display headings scale with the viewport. Fluid body
     type was the previous approach; it is dropped because at a
     2560px measure a vw-scaled paragraph becomes unreadable.

     Display headings stay fluid but are capped well below the
     reference's 108px, because Moon Walk is caps-only and the
     hero sentence is fifteen words rather than four.            */
  --fs-display: clamp(46px, 5vw, 88px);
  --fs-h1:      clamp(32px, 3.6vw, 64px);
  --fs-h2:      clamp(26px, 2.6vw, 44px);
  --fs-h3:      22px;
  --fs-h4:      18px;
  --fs-lead:    20px;
  --fs-body:    17px;
  --fs-small:   15px;
  --fs-caption: 13px;
  --fs-eyebrow: 12.5px;

  /* ---------- Controls (fixed height, reference model) -------- */
  --btn-h:    58px;
  --btn-h-sm: 44px;
  --btn-pad:  30px;

  /* ---------- Weights ---------- */
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;

  /* ---------- Line heights ---------- */
  --lh-tight:   1.08;
  --lh-snug:    1.22;
  --lh-body:    1.62;
  --lh-relaxed: 1.7;

  /* ---------- Letterspacing ---------- */
  --ls-display: -0.015em;
  --ls-heading: -0.01em;
  --ls-eyebrow: 0.16em;

  /* ---------- Spacing (4px base) ---------- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;
  --sp-9: 96px;  --sp-10: 128px;

  /* ---------- Radii ---------- */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 8px;
  --r-panel: 10px;

  /* ---------- Borders ---------- */
  --bw: 1px;
  --rule-w: 2px;          /* the section rule — thin, per system */
  --rule-len: 56px;

  /* ---------- Wordmark lockup ----------
     Sampled from Arche-Advisory-Wordmark-Dark.png (875x280):
       cap height 56px, rule 10px thick spanning the full
       wordmark width, 16px above the rule, 17px below,
       tagline at roughly half the wordmark cap height.
     Expressed against the wordmark font-size so it scales.     */
  --lockup-rule-w:   0.126em;
  --lockup-gap-top:  0.202em;
  --lockup-gap-bot:  0.214em;
  --lockup-tag-size: 0.516em;
  --lockup-tag-lh:   1.44;

  /* ---------- Shadows ---------- */
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.30);
  --shadow-card:  0 1px 0 rgba(0,0,0,0.20), 0 8px 28px rgba(0,0,0,0.30);
  --shadow-lift:  0 1px 0 rgba(0,0,0,0.20), 0 16px 40px rgba(0,0,0,0.42);
  --shadow-panel: 0 24px 64px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.35);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 130ms;
  --dur-base: 180ms;
  --dur-slow: 420ms;

  /* ---------- Layout ----------
     Adopted from effica.framer.ai on Ganaesh's instruction, and
     overriding the design system's "content max-width ~1200px".

     Sections are full-bleed with a flat 40px gutter. Content is
     capped far wider — 2560px for full-width bands, 1920px for
     the reading column — so a large screen is used rather than
     letterboxed. Prose keeps its own cap because line length is
     a legibility limit, not a layout one.                        */
  --pad-x: 40px;
  --maxw: 2560px;         /* full-width bands                     */
  --maxw-content: 1920px; /* the reading column                   */
  --maxw-prose: 680px;    /* paragraphs, unchanged                */
  --sec-y: 120px;

  /* ---------- Focus ---------- */
  --focus-ring: 0 0 0 3px rgba(157,187,160,0.36);
}

/* Two breakpoints only, matching the reference: 1200px and 810px. */
@media (max-width: 1199.98px) {
  :root {
    --pad-x: 32px;
    --sec-y: 96px;
  }
}
@media (max-width: 809.98px) {
  :root {
    --pad-x: 20px;
    --sec-y: 72px;
  }
}