/* ============================================================
   Velia static site: fonts, tokens and the document base.
   One file shared by every page, so a palette or type change is
   made here once. Order in the page: this file, then Dawn's
   base.css (kept for its resets), then velia.css.
   Fonts are self-hosted: the cookie policy states that this site
   calls no third party, and that includes type.
   ============================================================ */

@font-face {
  font-family: Archivo;
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url(fonts/archivo_n4.dc8d917cc69af0a65ae04d01fd8eeab28a3573c9.woff2) format("woff2"),
       url(fonts/archivo_n4.bd6b9c34fdb81d7646836be8065ce3c80a2cc984.woff) format("woff");
}
@font-face {
  font-family: Archivo;
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url(fonts/archivo_n5.272841b6d6b831864f7fecfa55541752bb399511.woff2) format("woff2"),
       url(fonts/archivo_n5.27fb58a71a175084eb68e15500549a69fe15738e.woff) format("woff");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url(fonts/ibmplexmono_n4.d7299acf9bbb54fdf0e44c1227f98684451f21b6.woff2) format("woff2"),
       url(fonts/ibmplexmono_n4.fbe61363adf4e4ea2f451d0b71ac4286985c06a3.woff) format("woff");
}
@font-face {
  font-family: Cormorant;
  font-weight: 600;
  font-style: italic;
  font-display: swap;
  src: url(fonts/cormorant_i6.d9cec4523bc4837b1c96b94ecf1a29351fbd8199.woff2) format("woff2"),
       url(fonts/cormorant_i6.d18564a4f17d4e508a5eefe333645fbb7817d176.woff) format("woff");
}

:root {
  /* The handful of Dawn variables that base.css still reads for the
     rules this site keeps (selection colour, details and summary resets).
     Everything commerce-related is gone with the components that used it. */
  --color-background: 255, 255, 255;
  --gradient-background: #ffffff;
  --color-foreground: 22, 22, 22;
  --font-body-family: Archivo, sans-serif;
  --font-body-style: normal;
  --font-body-weight: 400;
  --font-body-weight-bold: 500;
  --font-heading-family: Archivo, sans-serif;
  --font-heading-style: normal;
  --font-heading-weight: 500;
  --font-body-scale: 1;
  --font-heading-scale: 1;
  --page-width: 120rem;
  --page-width-margin: 0rem;
  --duration-short: 100ms;
  --duration-default: 200ms;
  --duration-long: 500ms;

  /* Color. Brand book v2.2 tokens: grey is --v-ink-soft, hair is --v-line,
     pearl is --v-wash. */
  --v-ink: #161616;
  --v-paper: #ffffff;
  --v-ink-soft: #767676;
  --v-line: #e8e6e1;
  --v-wash: #f8f7f4;
  --v-sand: #f3f0ea;
  --v-accent: #7f8f82;

  /* Contrast-safe variants of grey for the tinted grounds. #767676 is
     4.55:1 on paper only: on pearl it drops to 4.24:1 and fails AA, so
     tinted grounds swap in #6b6b6b (4.97:1 on pearl, 4.69:1 on sand) and
     the ink band swaps in #a3a3a3 (7.2:1 on ink). Re-measure if the
     palette moves. */
  --v-ink-soft-tinted: #6b6b6b;
  --v-ink-soft-inverse: #a3a3a3;

  /* Focus outline. Sage on paper is 3.41:1; on the tinted grounds the
     darkened cut keeps it above 3:1 (3.96:1 on pearl, 3.73:1 on sand). */
  --v-focus: #7f8f82;
  --v-focus-tinted: #6f7f72;

  /* Type */
  --v-font-system: Archivo, sans-serif;
  --v-font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --v-font-serif: Cormorant, serif;
  --v-text-xs: 1.2rem;
  --v-text-s: 1.4rem;
  --v-text-base: 1.6rem;
  --v-text-m: 1.8rem;
  --v-text-l: 1.9rem;
  --v-text-xl: 2.6rem;
  --v-text-2xl: clamp(3rem, 4vw, 4.6rem);
  --v-text-num: clamp(4rem, 5vw, 6rem);
  --v-text-display: clamp(4.4rem, 6vw, 7.4rem);
  --v-text-hero: clamp(3.4rem, 8vw, 6.6rem);

  /* Space, 4px scale */
  --v-space-1: 0.4rem;
  --v-space-2: 0.8rem;
  --v-space-3: 1.2rem;
  --v-space-4: 1.6rem;
  --v-space-5: 2.4rem;
  --v-space-6: 3.2rem;
  --v-space-7: 4.8rem;
  --v-space-8: 6.4rem;
  --v-space-9: 9.6rem;

  /* Shape and layout. Buttons and inputs nearly sharp at 4px, the label
     frame at 10px, photographic panels at 12px. Anything rounder is
     off-system. */
  --v-radius: 0.4rem;
  --v-radius-frame: 1rem;
  --v-radius-panel: 1.2rem;
  --v-page-max: 112rem;
  --v-page-pad: 2rem;

  /* Vertical rhythm and the nav bar. velia.css raises the section pad to
     11.2rem at 750px. */
  --v-section-pad: 7.2rem;
  --v-nav-h: 8rem;

  /* Motion. One curve for the whole layer. */
  --v-ease: cubic-bezier(0.65, 0, 0.35, 1);
}

*,
*::before,
*::after {
  box-sizing: inherit;
}
html {
  box-sizing: border-box;
  /* 1rem = 10px throughout velia.css. */
  font-size: 62.5%;
  height: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  margin: 0;
  background: var(--v-paper);
  color: var(--v-ink);
  font-family: var(--v-font-system);
  font-size: 1.5rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
@media screen and (min-width: 750px) {
  body {
    font-size: 1.6rem;
  }
}
main {
  flex: 1 0 auto;
}