/* @font-face — self-hosted variable fonts, per dev-rules §3.3 (no Google
   Fonts CDN: remote font loading is a GDPR issue in the EU). Latin subset. */
@font-face {
    font-family: 'DM Sans';
    src: url('../fonts/DMSans-Variable.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

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

@font-face {
    font-family: 'Fraunces';
    src: url('../fonts/Fraunces-Italic-Variable.woff2') format('woff2');
    font-weight: 300 600;
    font-style: italic;
    font-display: swap;
}

/* Shorthand aliases for theme.json preset vars */
:root {
    --ink:       var(--wp--preset--color--ink);
    --paper:     var(--wp--preset--color--paper);
    --off-white: var(--wp--preset--color--off-white);
    --surface:   var(--wp--preset--color--surface);
    --accent:    var(--wp--preset--color--accent);
    --line:      var(--wp--preset--color--line);
    /* Editorial direction: deep green accent. #1F5A48 is 7.1:1 on the cream
       paper, so it is safe as small text too (--accent-text = accent).
       On DARK backgrounds use the light sage --accent-on-dark (≈8.5:1 on ink). */
    --accent-text: var(--wp--preset--color--accent);
    --accent-hover: #153F33;
    --accent-on-dark: #9FB8AE;
    --muted:     var(--wp--preset--color--muted);
    --muted-2:   #8A857C;   /* captions / logos — large or decorative text only */
    --font:         var(--wp--preset--font-family--dm-sans);
    --font-display: var(--wp--preset--font-family--fraunces);
    --font-mono:    var(--wp--preset--font-family--dm-sans);

    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-6: 48px;
    --space-8: 64px;
    --space-12: 96px;
    --space-16: 128px;

    --radius: 16px;
    --border: #E4DFD5;
    --max-prose: 68ch;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img, video { display: block; max-width: 100%; height: auto; }
svg { display: block; }

/* Base */
body {
    font-family: var(--font);
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Prose width constraint for readability */
.is-layout-constrained > :where(:not(.alignwide):not(.alignfull):not(.aligncenter)) {
    max-width: var(--max-prose);
}

/* Accessibility — note: WordPress emits its own native skip-link
   (#wp--skip-link--target) automatically, so we don't define one here. */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus visible */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* Mobile typography scaling */
@media (max-width: 768px) {
    h1 { font-size: 42px; }
    h2 { font-size: 30px; }
    h3 { font-size: 18px; }
}