/* Shared foundations for the PHP and imported page renderers. */
@font-face {
  font-family: "Droid Serif (compressed)";
  src: url(../assets/fonts/droidserif-regular-webfont.woff2)format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat (compressed)";
  src: url(../assets/fonts/montserrat-medium-webfont.woff2)format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat (compressed)";
  src: url(../assets/fonts/montserrat-bold-webfont.woff2)format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Droid Serif (compressed)";
  src: url(../assets/fonts/droidserif-italic-webfont.woff2)format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat (compressed)";
  src: url(../assets/fonts/Montserrat600.woff2)format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Droid Serif (compressed)";
  src: url(../assets/fonts/droid-serif.bold.ttf)format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Type ---------------------------------------------------------------- */
  --font-sans: "Montserrat (compressed)", "Trebuchet MS", sans-serif;
  --font-serif: "Droid Serif (compressed)", Georgia, serif;

  --type-h1: 52px;
  --type-h2: 38px;
  --type-h3: 32px;
  --type-h4: 18px;
  --type-h5: 11px;
  --type-h6: 14px;
  --type-body: 16px;
  --type-lead: 18px;
  --type-quote: 23px;
  --type-action: 15px;
  --type-nav: 11px;
  --type-label: 13px;
  --type-footer-link: 14px;
  --type-small: 12px;
  --leading-h1: 1.1;
  --leading-h2: 1.1;
  --leading-h3: 1.2;
  --leading-h4: 1.33;
  --leading-h5: 1.45;
  --leading-h6: 1.43;
  --leading-body: 1.63;
  --leading-lead: 1.5;
  --leading-quote: 1.65;
  --leading-action: 1.5;
  --leading-label: 1.2;
  --tracking-action: .5px;
  --tracking-label: 1px;

  /* Layout -------------------------------------------------------------- */
  --page-gutter: 64px;
  --content-width: 1400px;
  --interior-hero-height: 600px;
  --label-heading-gap: calc(2 * var(--space-md));
  --reading-width: 700px;

  /* Spacing — five steps, nothing in between. Every margin, padding and gap
     on the page comes from this scale.                                     */
  --space-xs: 8px;    /* icon gaps, label/value pairs, tight stacks         */
  --space-sm: 16px;   /* control padding — buttons                          */
  --space-md: 24px;   /* inside components, prose rhythm, grid gutters      */
  --space-lg: 64px;   /* between blocks within a section                    */
  --space-xl: 128px;  /* section boundaries — the page's vertical rhythm     */

  /* Shape ----------------------------------------------------------------
     iOS uses continuous-curvature corners rather than quarter-circles.
     `border-radius` is the safe fallback; `corner-shape` progressively
     enhances it to the native-style curve in supporting browsers. */
  --corner-radius: 12px;
  --corner-shape: squircle;

  /* Colour --------------------------------------------------------------- */
  --dark-slate: #262427;
  --crimson: #e73536;
  --crimson-dark: #d32d2e;
  --neutral500: #5d5d61;
  --white: white;
  --light-gray: #f6f6f7;
  --gray: #e9e8ea;
  --light-slate: #c9c5cb;
  --warning: #971111;
  --secondary400: #695d6f;
  --secondary200: #b7b2bb;
  --light-crimson: #fad7d7;
  --mulberry: #632f3e;

  /* On dark backgrounds */
  --on-dark: var(--white);
  --link-on-dark: #fac0c1;   /* pink-tinted white; 7.6:1 on the hero */
  --on-dark-muted: #ffffffcc;
  --on-dark-faint: #ffffff1a;
  --on-dark-border: #ffffff40;
  --on-dark-border-strong: #ffffff80;
  --on-dark-surface: #ffffff14;
  --on-dark-surface-hover: #ffffff29;
  --cta-surface: #f1f1f1a1;
  --nav-link-hover: #4c3e54c2;
  --nav-on-light: #4c3e54;
  --nav-surface: #fffffff5;
  --action-shadow: #210c2440;
  --action-shadow-hover: #210c2466;

  /* Interaction --------------------------------------------------------- */
  --transition-fast: 200ms;
  --transition-base: 300ms;
  --transition-slow: 350ms;
  --ease-standard: ease-in-out;
  --ease-emphasized: cubic-bezier(.645, .045, .355, 1);
  --ease-spring: cubic-bezier(.68, -.55, .265, 1.55);
  --focus-ring-width: 2px;
  --focus-ring-offset: 4px;
}


@media (max-width: 991px) {
  :root { --type-h1: 46px; --leading-h1: 1.15; --leading-h2: 1.16; --page-gutter: 24px; }
}
@media (max-width: 767px) {
  :root { --type-h1: 44px; --type-h2: 34px; --type-h3: 24px; --leading-h2: 1.2; }
}
@media (max-width: 479px) {
  :root {
    --type-h1: 32px;
    --type-h2: 28px;
    --type-h3: 22px;
    --type-lead: var(--type-body);
    --leading-h1: 1.2;
  }
}