/* ============================================================================
   The Focused Method — tokens + self-hosted faces
   "Deep Work" (house-design.md override, direction B; Stitch project
   12788853676311251838, design system assets/2771155916466138030,
   2026-09-02). Loads FIRST, before main.css and tfm.css.
   ========================================================================= */

/* --- Faces ----------------------------------------------------------------
   Space Grotesk carries headlines, labels, navigation and numerals; Source
   Serif 4 is the reading face. Variable woff2 subsets served from the theme;
   latin-ext is loaded so diacritics never fall back mid-word. */

@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/space-grotesk-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/space-grotesk-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Source Serif 4';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/source-serif-4-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Source Serif 4';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/source-serif-4-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Source Serif 4';
    font-style: italic;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/source-serif-4-italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Source Serif 4';
    font-style: italic;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/source-serif-4-italic-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* --- Deep Work palette ----------------------------------------------- */
    --tfm-paper:         #FAFAF7;   /* page ground */
    --tfm-ink:           #111827;   /* headings + body text */
    --tfm-primary:       #2563EB;   /* links, numerals, labels, buttons — 5:1 on paper */
    --tfm-primary-dark:  #1D4ED8;   /* hover */
    --tfm-meta:          #4B5563;   /* meta text — never lighter */
    --tfm-rule:          #D9DBD5;   /* hairlines, column rules, image frames */
    --tfm-band:          #F0F1EC;   /* tonal band: contents box, newsletter, masthead */
    --tfm-footer-bg:     #111827;
    --tfm-footer-text:   #E5E7EB;
    --tfm-footer-muted:  #9CA3AF;
    --tfm-footer-rule:   #2A3140;

    /* --- Type: Space Grotesk display/UI, Source Serif 4 reading ----------- */
    --tfm-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
    --tfm-ui:      'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
    --tfm-text:    'Source Serif 4', Georgia, 'Times New Roman', serif;

    --tfm-size-body:    clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);   /* 18–20px serif */
    --tfm-size-body-sm: 1.0625rem;
    --tfm-size-meta:    0.8125rem;   /* 13px small caps */
    --tfm-lh-body:      1.65;
    --tfm-lh-head:      1.05;
    --tfm-track-meta:   0.1em;
    --tfm-track-head:   -0.02em;

    /* Short titles (archive, pages) may go big; article and lead headlines
       run 10–14 words in a 560–740px column, so they cap at 44px — the
       68px H1 pushed the article four lines deep (user, 2026-09-02). */
    --tfm-h1:      clamp(2.25rem, 1.5rem + 2.4vw, 3.5rem);
    --tfm-h1-lead: clamp(1.9rem, 1.3rem + 1.7vw, 2.75rem);
    --tfm-title:   clamp(1.9rem, 1.3rem + 1.7vw, 2.75rem);
    --tfm-h2:      clamp(1.6rem, 1.3rem + 1vw, 2rem);
    --tfm-h3:      clamp(1.3rem, 1.15rem + 0.5vw, 1.5rem);
    --tfm-card-title: 1.25rem;

    /* --- Shape & metrics: square corners, rules, no shadows ---------------- */
    --tfm-radius-sm: 0;
    --tfm-radius:    0;
    --tfm-radius-lg: 0;
    --tfm-page-max:  1200px;
    --tfm-content-max: 740px;
    --tfm-sidebar:   304px;   /* 300px ad unit + the frame's 1px borders; narrowed from 336 (user, 2026-09-02) */
    --tfm-side-gap:  2rem;    /* gutter each side of the column rule */
    --tfm-measure:   68ch;
    --tfm-gutter:    clamp(1rem, 3vw, 2.5rem);
    --tfm-col-gap:   clamp(1.5rem, 3vw, 3rem);
    --tfm-grid-gap:  clamp(1.25rem, 2.5vw, 2rem);   /* half-gutter each side of a column rule */
    --tfm-tap:       44px;
    --tfm-nav-tap:   48px;

    /* --- Bridge to main.css ----------------------------------------------
       main.css is the shared core and names its own variables. Point every
       one of them at the tokens above so the core inherits the palette
       instead of fighting it. Do not restyle main.css. */
    --font-size-body-min: 1.125rem;
    --font-size-body-max: 1.25rem;
    --font-size-body-fluid: calc(1.05rem + 0.4vw);
    --font-size-h1-min: 2.25rem;
    --font-size-h1-max: 3.5rem;
    --font-size-h1-fluid: calc(1.5rem + 2.4vw);
    --font-size-h2-min: 1.6rem;
    --font-size-h2-max: 2rem;
    --font-size-h2-fluid: calc(1.3rem + 1vw);
    --font-size-h3-min: 1.3rem;
    --font-size-h3-max: 1.5rem;
    --font-size-h3-fluid: calc(1.15rem + 0.5vw);
    --font-size-h4-min: 1.15rem;
    --font-size-h4-max: 1.3rem;
    --font-size-h4-fluid: calc(1.05rem + 0.35vw);
    --font-size-h5-min: 1.0625rem;
    --font-size-h5-max: 1.15rem;
    --font-size-h5-fluid: calc(1rem + 0.2vw);
    --font-size-h6-min: 1rem;
    --font-size-h6-max: 1.0625rem;
    --font-size-h6-fluid: calc(0.96rem + 0.12vw);
    --line-height-body: 1.65;
    --line-height-heading: 1.05;

    --color-primary: #2563EB;
    --color-primary-hover: #1D4ED8;
    --color-heading: #111827;
    --color-accent: #2563EB;
    --color-text-dark: #111827;
    --color-text-medium: #4B5563;
    --color-text-light: #4B5563;
    --color-background: #FAFAF7;
    --color-background-light: #F0F1EC;
    --color-border-light: #D9DBD5;
    --color-border: #D9DBD5;
    --color-footer-bg: #111827;
    --color-footer-border: #2A3140;
    --color-footer-text: #E5E7EB;
    --color-copyright: #9CA3AF;

    --color-facebook: #E5E7EB;
    --color-facebook-hover: #FFFFFF;
    --color-twitter: #E5E7EB;
    --color-twitter-hover: #FFFFFF;
    --color-pinterest: #E5E7EB;
    --color-pinterest-hover: #FFFFFF;
    --color-linkedin: #E5E7EB;
    --color-linkedin-hover: #FFFFFF;

    --color-error: #B91C1C;
    --color-error-bg: #FEE2E2;
    --color-error-text: #991B1B;
    --color-warning: #92400E;
    --color-warning-bg: #FEF3C7;
    --color-warning-text: #78350F;
}