/*
 * Design tokens: colours, type, spacing, widths and motion.
 * The editable colour palette (--palette-*) is printed in the <head> (inc/builder/palette.php);
 * these are the fixed values the components are drawn with.
 */

/* Newsreader (h1–h4) and Inter (everything else): variable Google fonts (SIL Open Font
   License, in each folder), Latin and Latin Extended only. */

@font-face {
    font-family: "Newsreader";
    src: url("../fonts/newsreader/Newsreader-Italic-latin.woff2") format("woff2");
    font-style: italic;
    font-weight: 200 800;
    font-display: swap;
    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: "Newsreader";
    src: url("../fonts/newsreader/Newsreader-Italic-latin-ext.woff2") format("woff2");
    font-style: italic;
    font-weight: 200 800;
    font-display: swap;
    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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Newsreader";
    src: url("../fonts/newsreader/Newsreader-latin.woff2") format("woff2");
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    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: "Newsreader";
    src: url("../fonts/newsreader/Newsreader-latin-ext.woff2") format("woff2");
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter/Inter-Italic-latin.woff2") format("woff2");
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    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: "Inter";
    src: url("../fonts/inter/Inter-Italic-latin-ext.woff2") format("woff2");
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter/Inter-latin.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    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: "Inter";
    src: url("../fonts/inter/Inter-latin-ext.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* The previous fonts, Helvetica Neue and IvyPresto (kept for now: --font-helvetica,
   --font-ivy). Only fonts in use are downloaded. */
@font-face {
    font-family: "Helvetica Neue";
    src: url("../fonts/HelveticaNeueThin.otf") format("opentype");
    font-weight: 100;
    font-display: swap;
    ascent-override: 92%;
    descent-override: 22%;
    line-gap-override: 0%;
}

@font-face {
    font-family: "Helvetica Neue";
    src: url("../fonts/HelveticaNeueUltraLight.otf") format("opentype");
    font-weight: 200;
    font-display: swap;
    ascent-override: 92%;
    descent-override: 22%;
    line-gap-override: 0%;
}

@font-face {
    font-family: "Helvetica Neue";
    src: url("../fonts/HelveticaNeueLight.otf") format("opentype");
    font-weight: 300;
    font-display: swap;
    ascent-override: 92%;
    descent-override: 22%;
    line-gap-override: 0%;
}

@font-face {
    font-family: "Helvetica Neue";
    src: url("../fonts/HelveticaNeueRegular.otf") format("opentype");
    font-weight: 400 700;
    font-display: swap;
    ascent-override: 92%;
    descent-override: 22%;
    line-gap-override: 0%;
}

@font-face {
    font-family: "IvyPresto Headline";
    src: url("../fonts/IvyPrestoHeadlineLight.otf") format("opentype");
    font-weight: 300 400;
    font-display: swap;
}

@font-face {
    font-family: "IvyPresto Headline";
    src: url("../fonts/IvyPrestoHeadlineThin.otf") format("opentype");
    font-weight: 100 200;
    font-display: swap;
}

@font-face {
    font-family: "IvyPresto Headline";
    src: url("../fonts/IvyPrestoHeadlineSemiBold.otf") format("opentype");
    font-weight: 500 700;
    font-display: swap;
}

:root {
    /* Type */
    --font-sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;    /* body, buttons, labels */
    --font-serif: "Newsreader", Georgia, serif;                              /* h1–h4 */
    --font-helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif;     /* the previous sans */
    --font-ivy: "IvyPresto Headline", Georgia, serif;                       /* the previous serif */

    /* Colour scales (from the design: ◆ marks its own values). Editable colours: --palette-* */
    /* Primary: blush, the action colour: buttons, selected states, controls (100 and 300 from
       the design's arched sections; 700 the buttons) */
    --primary-50: #F9F5F1;
    --primary-100: #F1E9E2;      /* ◆ the arched section's background */
    --primary-200: #DFC9BA;
    --primary-300: #CFA894;      /* ◆ the arch's line */
    --primary-400: #B58873;
    --primary-500: #996B57;      /* the first with white text at 4.5:1 */
    --primary-600: #805443;      /* buttons and controls (white text 6.4:1) */
    --primary-700: #654033;
    --primary-800: #4A2D24;
    --primary-900: #321C17;

    /* Secondary: plum, the supporting colour. Each step as light as the same step of blush
       (perceived lightness, OKLCH), so the scales match: 500 and up carry white text alike. */
    --secondary-50: #F9F4F8;
    --secondary-100: #F0E7EE;
    --secondary-200: #D9C8D7;
    --secondary-300: #C1A8BF;
    --secondary-400: #A788A5;
    --secondary-500: #8B6B8A;      /* the first with white text at 4.5:1 */
    --secondary-600: #745373;
    --secondary-700: #5D3E5C;
    --secondary-800: #472947;      /* dark sections, plum cards, the top bar */
    --secondary-900: #2F1A2F;      /* the deepest plum (glows, shadows) */

    /* Tertiary: gold, the accent: subheadings, highlight text, small details. Each step as
       light as the same step of blush. Gold text uses 600 (the design's gold, 4.5:1 on the
       light tinted backgrounds too); 500 is for fills and large text. */
    --tertiary-50: #FAF5EA;
    --tertiary-100: #F3EAD6;
    --tertiary-200: #DFCCA6;       /* gold text on dark backgrounds */
    --tertiary-300: #CAAD7C;
    --tertiary-400: #B18D52;
    --tertiary-500: #976F2E;       /* fills and large text (4.5:1 with white) */
    --tertiary-600: #88602A;       /* gold text: subheadings and links (a little lighter than blush's 600: dark gold reads heavier) */
    --tertiary-700: #6D491C;       /* (likewise a little lighter) */
    --tertiary-800: #4C2E0C;
    --tertiary-900: #331D05;

    --neutral-50: #FAFAFA;
    --neutral-100: #F6F6F6;       /* ◆ */
    --neutral-200: #E6E6E6;
    --neutral-300: #D5D5D5;       /* ◆ */
    --neutral-400: #B1B1B1;
    --neutral-500: #767676;       /* as light as the other scales' 500: white text from here up, as theirs */
    --neutral-600: #707070;
    --neutral-700: #505152;       /* ◆ */
    --neutral-800: #373838;       /* ◆ paragraphs */
    --neutral-900: #212121;       /* ◆ headings */
    --white: #FFFFFF;
    --black: #000000;

    --success: #067A57;
    --success-bg: #E6FAF4;
    --warning: #FFB23D;
    --warning-bg: #FFEBC6;
    --error: #D92D20;
    --error-bg: #FEF3F2;

    --gradient-accent: #8142D2 0%, #FEF0A3 100%;                                         /* logo circle: purple → yellow */
    --gradient-brand: #8142D2 0%, #F9A4B8 50%, #FEF0A3 100%;                             /* purple → pink → yellow */
    --gradient-logo: #8243D2 0%, #CBA0B9 30%, #FFF2A3 55%, #FCD0AC 75%, #F9A4B8 100%;  /* the full logo mark */
    --gradient-dark: linear-gradient(180deg, var(--black) 35%, var(--secondary-800) 100%);
    /* [highlight] text: the design's gold gradient on dark backgrounds; on light ones a deeper
       run of the same golds, so it stays readable (3.7:1 at its lightest) */
    --gradient-highlight: linear-gradient(90deg, #9E803C 0%, #CAB177 26.44%, #F4E6B0 50.96%, #B49D59 89.42%); /* the design's own colours */
    --gradient-highlight-ink: linear-gradient(90deg, var(--tertiary-700) 0%, var(--tertiary-600) 26.44%, var(--tertiary-500) 50.96%, var(--tertiary-600) 89.42%);

    /* Roles: what the scales are used for. Controls use these rather than a scale step,
       so a change of colour is made here once. */
    --color-action: var(--primary-600);        /* buttons, chosen options, switches */
    --color-action-hover: var(--primary-500);
    --color-action-active: var(--primary-600);
    --color-accent: var(--tertiary-600);       /* gold text: subheadings, links, small gold details */

    /* Text colours (light backgrounds; .is-dark switches them) */
    --text: var(--neutral-800);
    --text-strong: var(--neutral-900);
    --heading: var(--neutral-900);
    --subheading: var(--color-accent);
    --highlight: var(--gradient-highlight-ink);
    --link: var(--color-accent);
    --link-hover: var(--tertiary-700);

    /* Widths */
    --page-width: 1440px;          /* content box incl. gutters */
    --gutter: 80px;                /* page side padding */
    --content-width: calc(var(--page-width) - var(--gutter) * 2);
    --prose-width: 760px;

    /* Spacing: the xs–xl scale (sections, gaps) and a fixed step scale (components) */
    --space-xs: 40px;
    --space-sm: 64px;
    --space-md: 80px;
    --space-lg: 104px;
    --space-xl: 120px;
    --subheading-gap: var(--step-5);   /* between a subheading and the heading under it, everywhere */
    --step-1: 4px;
    --step-2: 8px;
    --step-3: 12px;
    --step-4: 16px;
    --step-5: 20px;
    --step-6: 24px;
    --step-7: 32px;
    --step-8: 40px;
    --step-9: 48px;
    --step-10: 60px;

    --radius: 10px;
    --radius-lg: 16px;
    --pill: 999px;

    --header-height: 80px;

    /* Entrance animations (assets/js/reveal.js) */
    --reveal-ease: cubic-bezier(.2, .7, .2, 1);
    --reveal-shift: 56px;           /* sideways moves */
    --reveal-rise: 40px;            /* upward moves */
    --reveal-text: 1.1s;            /* text and rows */
    --reveal-media: 1.8s;           /* images settling */
    --reveal-zoom: 1.06;            /* how zoomed in an image starts */
    --reveal-stagger: .16s;         /* gap between items in a sequence */
}

@media (max-width: 1024px) {
    :root {
        --gutter: 48px;
        --space-xs: 32px;
        --space-sm: 48px;
        --space-md: 60px;
        --space-lg: 80px;
        --space-xl: 80px;
    }
}

@media (max-width: 860px) {
    :root {
        --header-height: 72px;
    }
}

@media (max-width: 600px) {
    :root {
        --gutter: 24px;
        --space-xs: 24px;
        --space-sm: 48px;
        --space-md: 48px;
        --space-lg: 64px;
        --space-xl: 64px;
    }
}

/* One animated number drives an image's zoom and the clip that holds its edges in place
   (scale(--mz) with the clip inset by (1 - 1/--mz)/2), so the two can't drift apart. */
@property --mz {
    syntax: '<number>';
    inherits: false;
    initial-value: 1;
}


/*
 * Block colour themes. A block's Settings → Colour theme puts one of these classes on it
 * (inc/builder/render.php); its styles use --theme-50 … --theme-900, so the same shades
 * come out in blush, plum, gold or grey. Neutral's greys are matched step for step to the
 * lightness of blush (and so of plum and gold) (so white text reads the same on each), and kept
 * apart from the --neutral-* greys used for text across the site.
 */
.theme-primary {
    --theme-50: var(--primary-50);
    --theme-100: var(--primary-100);
    --theme-200: var(--primary-200);
    --theme-300: var(--primary-300);
    --theme-400: var(--primary-400);
    --theme-500: var(--primary-500);
    --theme-600: var(--primary-600);
    --theme-700: var(--primary-700);
    --theme-800: var(--primary-800);
    --theme-900: var(--primary-900);
}

.theme-secondary {
    --theme-50: var(--secondary-50);
    --theme-100: var(--secondary-100);
    --theme-200: var(--secondary-200);
    --theme-300: var(--secondary-300);
    --theme-400: var(--secondary-400);
    --theme-500: var(--secondary-500);
    --theme-600: var(--secondary-600);
    --theme-700: var(--secondary-700);
    --theme-800: var(--secondary-800);
    --theme-900: var(--secondary-900);
}

.theme-tertiary {
    --theme-50: var(--tertiary-50);
    --theme-100: var(--tertiary-100);
    --theme-200: var(--tertiary-200);
    --theme-300: var(--tertiary-300);
    --theme-400: var(--tertiary-400);
    --theme-500: var(--tertiary-500);
    --theme-600: var(--tertiary-600);
    --theme-700: var(--tertiary-700);
    --theme-800: var(--tertiary-800);
    --theme-900: var(--tertiary-900);
}

.theme-neutral {
    --theme-50: #F6F6F6;
    --theme-100: #EAEAEA;
    --theme-200: #CECECE;
    --theme-300: #B1B1B1;
    --theme-400: #939393;
    --theme-500: #767676;          /* (a hair darker than blush's lightness: white text 4.5:1) */
    --theme-600: #606060;
    --theme-700: #4B4B4B;
    --theme-800: #353535;
    --theme-900: #232323;
}