/* =========================================================================
   Design tokens — the single source of truth for the visual system.
   Every value below is lifted from the design handoff. Nothing in the site
   should hardcode a colour, type spec or spacing step; reach for a token.
   ========================================================================= */

:root {
    /* ---- Colour -------------------------------------------------------- */
    --ivory:            #F7F3ED;  /* page background (warm ivory); light text on dark */
    --sand:             #EDE7DE;  /* secondary surface — banded sections, inset panels */
    --ink:              #171717;  /* near-black — dark sections, primary text */
    --ink-raised:       #242424;  /* raised surface on dark (cards, success panel) */
    --ink-slot:         #1D1D1D;  /* image-slot fill on dark */

    --terracotta:       #C85A3F;  /* primary accent — CTAs, hero italic, focus ring */
    --terracotta-dark:  #9F3F2C;  /* accent dark — links, kickers on light */
    --terracotta-light: #E4A18E;  /* accent light — kickers and links on dark */

    --text:             #202020;  /* body text default */
    --text-body:        #3A3833;  /* body text on light */
    --text-muted:       #6F6A63;  /* muted text / labels */
    --text-placeholder: #A39C93;  /* placeholder text */

    /* Hairlines and borders on light */
    --rule-08:  rgba(23, 23, 23, .08);
    --rule-10:  rgba(23, 23, 23, .10);
    --rule-12:  rgba(23, 23, 23, .12);
    --rule-14:  rgba(23, 23, 23, .14);
    --rule-16:  rgba(23, 23, 23, .16);
    --rule-18:  rgba(23, 23, 23, .18);
    --rule-22:  rgba(23, 23, 23, .22);
    --rule-28:  rgba(23, 23, 23, .28);

    /* Hairlines, surfaces and text on dark */
    --on-dark-06:  rgba(247, 243, 237, .06);
    --on-dark-11:  rgba(247, 243, 237, .11);
    --on-dark-12:  rgba(247, 243, 237, .12);
    --on-dark-14:  rgba(247, 243, 237, .14);
    --on-dark-16:  rgba(247, 243, 237, .16);
    --on-dark-18:  rgba(247, 243, 237, .18);
    --on-dark-25:  rgba(247, 243, 237, .25);
    --on-dark-30:  rgba(247, 243, 237, .30);
    --on-dark-40:  rgba(247, 243, 237, .40);
    --on-dark-42:  rgba(247, 243, 237, .42);
    --on-dark-45:  rgba(247, 243, 237, .45);
    --on-dark-55:  rgba(247, 243, 237, .55);
    --on-dark-60:  rgba(247, 243, 237, .60);
    --on-dark-66:  rgba(247, 243, 237, .66);
    --on-dark-68:  rgba(247, 243, 237, .68);
    --on-dark-70:  rgba(247, 243, 237, .70);
    --on-dark-72:  rgba(247, 243, 237, .72);
    --on-dark-74:  rgba(247, 243, 237, .74);

    --header-bg:        rgba(247, 243, 237, .92);
    --header-bg-scroll: rgba(247, 243, 237, .97);
    --bar-bg:           rgba(247, 243, 237, .96);
    --lightbox-veil:    rgba(15, 14, 13, .9);

    /* ---- Type ---------------------------------------------------------- */
    --font-sans:  'Manrope', system-ui, -apple-system, sans-serif;
    --font-serif: 'DM Serif Display', Georgia, 'Times New Roman', serif;
    --font-mono:  ui-monospace, Menlo, Consolas, monospace;

    /* Display — headlines only. */
    --t-h1:      400 clamp(42px, 12.6cqi, 86px)/1.03 var(--font-serif);
    --t-h2:      400 clamp(30px, 7.2vw, 54px)/1.12 var(--font-serif);
    --t-h2-lg:   400 clamp(32px, 7.6vw, 56px)/1.10 var(--font-serif);
    --t-h2-sm:   400 clamp(26px, 6vw, 42px)/1.15 var(--font-serif);
    --t-h2-why:  400 clamp(28px, 6.6vw, 46px)/1.14 var(--font-serif);
    --t-h3:      400 clamp(24px, 5.6vw, 36px)/1.15 var(--font-serif);
    --t-h3-card: 400 clamp(22px, 5.4vw, 26px)/1.22 var(--font-serif);
    --t-h4:      400 21px/1.25 var(--font-serif);
    --t-figure:  400 clamp(30px, 7.4vw, 44px)/1 var(--font-serif);

    /* Text — everything else. */
    --t-body-hero: 400 clamp(16px, 4.2vw, 19px)/1.62 var(--font-sans);
    --t-body-lg:   400 clamp(15.5px, 4vw, 17.5px)/1.7 var(--font-sans);
    --t-body-md:   400 15px/1.7 var(--font-sans);
    --t-body:      400 14px/1.65 var(--font-sans);
    --t-body-em:   500 14px/1.6 var(--font-sans);
    --t-body-sm:   400 13.5px/1.65 var(--font-sans);
    --t-kicker:    700 10.5px/1 var(--font-sans);
    --t-label:     700 10px/1.5 var(--font-sans);
    --t-nav:       600 12.5px/1 var(--font-sans);
    --t-wordmark:  700 12px/1.1 var(--font-sans);
    --t-button:    700 14px/1 var(--font-sans);
    --t-button-sm: 700 13px/1 var(--font-sans);
    --t-button-xs: 700 12px/1 var(--font-sans);
    --t-meta:      600 11.5px/1.5 var(--font-sans);
    --t-mono:      700 9px/1 var(--font-mono);
    --t-mono-lg:   600 12px/1.6 var(--font-mono);

    /* Letter-spacing. `font:` shorthand does not reset these, so they pair up. */
    --ls-kicker:   .22em;
    --ls-label:    .16em;
    --ls-wordmark: .2em;
    --ls-spec:     .12em;
    --ls-button:   .05em;
    --ls-tight:    -.01em;
    --ls-h1:       -.015em;

    /* ---- Spacing ------------------------------------------------------- */
    --gutter:        clamp(20px, 5vw, 64px);
    --gutter-header: clamp(18px, 5vw, 64px);
    --section-y:     clamp(56px, 9vw, 110px);
    --band-y:        clamp(48px, 7vw, 84px);
    --col-gap:       clamp(28px, 5vw, 56px);
    --col-gap-sm:    clamp(28px, 4vw, 56px);
    --panel-pad:     clamp(24px, 4vw, 44px);
    --hero-y-top:    clamp(34px, 6vw, 72px);
    --hero-y-bottom: clamp(44px, 6vw, 72px);

    /* Bottom padding that clears the fixed CTA bar. The bar is mobile-only, so
       both of these collapse to ordinary spacing at 1024px — see the media
       query at the foot of this file. */
    --bar-clearance: clamp(90px, 10vw, 110px);
    --footer-bottom: 110px;

    /* ---- Shape --------------------------------------------------------- */
    /* Near-square by design — a deliberate editorial choice. Don't soften it. */
    --radius: 2px;

    /* The only shadow in the whole design. */
    --shadow-header: 0 1px 26px rgba(23, 23, 23, .09);

    --page-max: 1440px;

    /* ---- Motion -------------------------------------------------------- */
    --ease: cubic-bezier(.22, .7, .24, 1);

    /* Reveal timings, read by motion.css and assets/js/motion.js. */
    --reveal-duration:       900ms;
    --reveal-duration-media: 1080ms;
    --reveal-distance:       26px;
    --reveal-scale:          .985;
    --reveal-blur:           9px;
    --reveal-blur-media:     14px;

    /* ---- Placeholder frame fills --------------------------------------
       Hatched fills that read as "asset pending" rather than as artwork.
       Delete these once real photography is in.                          */
    --hatch-light: repeating-linear-gradient(135deg, rgba(23, 23, 23, .028) 0 10px, transparent 10px 22px);
    --hatch-dark:  repeating-linear-gradient(135deg, rgba(247, 243, 237, .04) 0 10px, transparent 10px 22px);
}

/* The single hard breakpoint. Above it the fixed CTA bar is hidden — the header
   carries its own CTA there — so the space reserved for it collapses. Redefining
   the tokens here keeps the breakpoint out of the component stylesheets. */
@media (min-width: 1024px) {
    :root {
        --bar-clearance: var(--section-y);
        --footer-bottom: 44px;
    }
}