/* Georgia, scaled to Cormorant's widths, so text does not reflow when the web font arrives.
   Measured: Cormorant sets 88.5% as wide as Georgia upright, 79% in italic. */
@font-face { font-family: 'Cormorant Fallback'; font-style: normal; src: local('Georgia'); size-adjust: 88.5%; }
@font-face { font-family: 'Cormorant Fallback'; font-style: italic; src: local('Georgia Italic'), local('Georgia-Italic'); size-adjust: 79%; }

/* ============================================================
   MISOGI WORKS · DESIGN TOKENS
   Loaded first on every page. Every colour, size, space, radius,
   shadow and timing on the site comes from here.
   Contrast notes are measured against the background named.
   ============================================================ */
:root {
    /* ── Colour ─────────────────────────────────────────────── */
    --bg:            #faf9f5;   /* page background (off-white) */
    --surface:       #ffffff;   /* cards on the page */
    --surface-2:     #f4ede0;   /* cream bands */
    --stone:         #e2d5c3;   /* mountain stone, for illustrations (the trail) */
    --stone-soft:    #ede4d8;
    --stone-light:   #efe7dc;
    --ink:           #1a1a1a;   /* body text. 16.1:1 on --bg */
    --ink-muted:     #5c5a55;   /* secondary text. 6.5:1 on --bg, 5.9:1 on --surface-2 */
    --line:          rgba(26, 26, 26, 0.12);
    --brand:         #1e3a4a;   /* navy. 11.3:1 on --bg */
    --accent:        #e9821e;   /* orange, for fills and lines only. 2.6:1 as text on --bg: never small text on light */
    --accent-text:   var(--accent-ink); /* orange text that adapts: --accent-ink on light, --accent on dark */
    --accent-ink:    #9a570b;   /* orange for text on light. 5.3:1 on --bg, 4.8:1 on --surface-2 */
    --accent-hover:  #f39c49;   /* button hover. Text on it: 8.9:1 */
    --accent-soft:   rgba(233, 130, 30, 0.12);
    --on-accent:     #070707;   /* text on an orange fill. 7.4:1 */
    --dark:          #111111;   /* dark bands */
    --dark-2:        #1a1a1a;   /* cards on dark bands */
    --black:         #070707;   /* hero and nav base */
    --on-dark:       #ffffff;
    --on-dark-muted: rgba(255, 255, 255, 0.68); /* 9.0:1 on --dark */
    --on-dark-cream: #f4ede0;
    --line-on-dark:  rgba(255, 255, 255, 0.12);
    --sky:           #8dc9de;   /* second accent line on dark cards. 10.4:1 on --dark */

    /* ── Type ───────────────────────────────────────────────── */
    --font-display: 'Cormorant Garamond', 'Cormorant Fallback', Georgia, serif;
    --font-body:    'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* One scale, seven steps. Body is 16px on phones, 18px on desktop. */
    --text-xs:   0.75rem;                                    /* 12px  eyebrows, labels, fine print */
    --text-sm:   0.875rem;                                   /* 14px  nav, notes, captions */
    --text-base: clamp(1rem, 0.94rem + 0.25vw, 1.125rem);    /* 16-18 body */
    --text-lg:   clamp(1.15rem, 1rem + 0.5vw, 1.4rem);       /* 18-22 lead, quotes */
    --text-xl:   clamp(1.5rem, 1.1rem + 1.6vw, 2.75rem);     /* 24-44 h3 */
    --text-2xl:  clamp(2.25rem, 1.4rem + 3.4vw, 4.5rem);     /* 36-72 h2 */
    --text-3xl:  clamp(2.5rem, 1.5rem + 4.8vw, 6rem);        /* 40-96 h1 */

    --leading-body:    1.6;
    --leading-display: 1.1;
    --tracking-label:  0.2em;

    /* ── Space ──────────────────────────────────────────────── */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 72px;
    /* Section rhythm: one to two steps of the largest space */
    --section-y: clamp(var(--space-8), 9vw, calc(var(--space-8) * 2));
    --gutter:    8vw;       /* side margin: 8% of the width, 6% on phones (below) */

    /* ── Shape ──────────────────────────────────────────────── */
    --radius:    8px;
    --radius-lg: 14px;
    --shadow:    0 2px 8px rgba(7, 7, 7, 0.08);
    --shadow-lg: 0 24px 60px rgba(7, 7, 7, 0.28);

    /* ── Motion ─────────────────────────────────────────────── */
    --dur-fast: 160ms;
    --dur:      240ms;
    --ease:     cubic-bezier(.2, .7, .2, 1);

    /* ── Layout ─────────────────────────────────────────────── */
    --nav-h: 72px;
    --tap:   44px;   /* minimum tap target */

    /* ── Older names, kept as aliases so existing sections keep their look.
       New work uses the names above. Remove an alias once nothing uses it. ── */
    --f-black:      var(--black);
    --f-dark:       var(--dark);
    --f-charcoal:   var(--dark-2);
    --f-navy:       var(--brand);
    --f-orange:     var(--accent);
    --f-orange-dim: rgba(233, 130, 30, 0.15);
    --f-cream:      var(--surface-2);
    --f-off-white:  var(--bg);
    --f-white:      var(--surface);
    --f-gray:       #888888;
    --f-gray-lt:    rgba(255, 255, 255, 0.12);
}

@media (max-width: 640px) {
    :root { --gutter: 6vw; }
}