@charset "UTF-8";
body, h1, h2, h3, h4, h5, h6, p,
figure, blockquote, dl, dd {
  margin: 0;
  padding: 0;
}

ul[class],
ol[class] {
  list-style: none;
  padding: 0;
  margin: 0;
}

@layer reset {
  html {
    color-scheme: light dark;
    tab-size: 2;
    hanging-punctuation: first allow-end last;
    word-break: break-word;
  }
  body {
    margin: 0;
  }
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  h1,
  h2 {
    font-weight: 700;
    letter-spacing: -0.02rem;
  }
  h1,
  h2,
  h3 {
    line-height: 1.1;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    text-wrap: balance;
    margin-block-start: 0;
  }
  p,
  li,
  dd {
    text-wrap: pretty;
    max-inline-size: var(--measure-0, 80ch);
  }
  a {
    text-underline-offset: 2px;
  }
  a:not(:is(:hover, :focus)) {
    text-decoration-color: color-mix(in srgb, currentColor, transparent 50%);
  }
  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    inset-block-end: -0.25em;
  }
  sup {
    inset-block-start: -0.5em;
  }
  ul,
  ol,
  dl {
    margin: 0;
    padding: 0;
  }
  img,
  video,
  iframe {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
    border-style: none;
  }
  figure {
    inline-size: fit-content;
    margin-inline: auto;
  }
  figcaption {
    contain: inline-size;
    font-size: 90%;
  }
  input,
  select,
  textarea,
  button {
    font: inherit;
    /* FUTURE: appearance: base; */
  }
  label {
    display: block;
  }
  input:not(:where([type=submit],
  [type=checkbox],
  [type=radio],
  [type=button],
  [type=reset])) {
    inline-size: 100%;
  }
  button,
  input:where([type=submit], [type=reset], [type=button]) {
    border: 1px solid transparent;
  }
  textarea {
    field-sizing: content;
    min-block-size: 5lh;
    inline-size: 100%;
    max-inline-size: 100%;
  }
  pre,
  code,
  kbd,
  samp {
    font-family: ui-monospace, SFMono-Regular, monospace;
  }
  pre {
    white-space: pre-wrap;
    background: CanvasText;
    color: Canvas;
    padding: 1.5rem;
  }
  svg {
    fill: currentColor;
    width: 100%;
    height: auto;
  }
  [aria-disabled=true i],
  [disabled] {
    cursor: not-allowed;
  }
  [disabled],
  label:has(input[disabled]) {
    opacity: 0.5;
  }
  [disabled] [disabled],
  label:has(input[disabled]) [disabled] {
    opacity: 1;
  }
  hr {
    border-style: solid;
    border-width: 1px 0 0;
    color: inherit;
    height: 0;
    overflow: visible;
    margin-block: 2.5rem;
  }
  :target {
    scroll-margin: 3rlh;
  }
  table {
    caption-side: bottom;
    border-collapse: collapse;
  }
  table td {
    font-size: 90%;
  }
  table td,
  table th {
    word-break: normal;
    border: 1px solid gray;
    padding: 0.5rem;
  }
  [role=region][aria-labelledby][tabindex] {
    overflow: auto;
  }
  caption {
    font-size: 90%;
  }
  [hidden] {
    display: none !important;
  }
  .screenreader-only:not(:focus):not(:active) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
  :focus-visible {
    outline-offset: 2px;
  }
  @media (prefers-reduced-motion: no-preference) {
    @view-transition {
      navigation: auto;
    }
    html {
      interpolate-size: allow-keywords;
    }
    html:focus-within {
      scroll-behavior: smooth;
    }
  }
}
:root {
  --step--2: clamp(0.7813rem, 0.7748rem + 0.0325vw, 0.8rem);
  --step--1: clamp(0.9375rem, 0.9159rem + 0.1085vw, 1rem);
  --step-0: clamp(1.125rem, 1.0819rem + 0.2169vw, 1.25rem);
  --step-1: clamp(1.35rem, 1.2767rem + 0.3688vw, 1.5625rem);
  --step-2: clamp(1.62rem, 1.5051rem + 0.5781vw, 1.9531rem);
  --step-3: clamp(1.944rem, 1.7724rem + 0.8632vw, 2.4414rem);
  --step-4: clamp(2.3328rem, 2.0848rem + 1.2476vw, 3.0518rem);
  --step-5: clamp(2.7994rem, 2.4492rem + 1.762vw, 3.8147rem);
  --step-6: clamp(3.3592rem, 2.8732rem + 2.4454vw, 4.7684rem);
  --space-5xs: clamp(0.1875rem, 0.1875rem + 0vw, 0.1875rem);
  --space-4xs: clamp(0.1875rem, 0.1659rem + 0.1085vw, 0.25rem);
  --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
  --space-2xs: clamp(0.5625rem, 0.5409rem + 0.1085vw, 0.625rem);
  --space-xs: clamp(0.875rem, 0.8534rem + 0.1085vw, 0.9375rem);
  --space-s: clamp(1.125rem, 1.0819rem + 0.2169vw, 1.25rem);
  --space-m: clamp(1.6875rem, 1.6228rem + 0.3254vw, 1.875rem);
  --space-l: clamp(2.25rem, 2.1638rem + 0.4338vw, 2.5rem);
  --space-xl: clamp(3.375rem, 3.2457rem + 0.6508vw, 3.75rem);
  --space-2xl: clamp(4.5rem, 4.3275rem + 0.8677vw, 5rem);
  --space-3xl: clamp(6.75rem, 6.4913rem + 1.3015vw, 7.5rem);
  --space-4xl: clamp(9rem, 8.6551rem + 1.7354vw, 10rem);
  /* One-up pairs */
  --space-5xs-4xs: clamp(0.1875rem, 0.1659rem + 0.1085vw, 0.25rem);
  --space-4xs-3xs: clamp(0.1875rem, 0.1444rem + 0.2169vw, 0.3125rem);
  --space-3xs-2xs: clamp(0.3125rem, 0.2047rem + 0.5423vw, 0.625rem);
  --space-2xs-xs: clamp(0.5625rem, 0.4332rem + 0.6508vw, 0.9375rem);
  --space-xs-s: clamp(0.875rem, 0.7457rem + 0.6508vw, 1.25rem);
  --space-s-m: clamp(1.125rem, 0.8663rem + 1.3015vw, 1.875rem);
  --space-m-l: clamp(1.6875rem, 1.4073rem + 1.41vw, 2.5rem);
  --space-l-xl: clamp(2.25rem, 1.7326rem + 2.603vw, 3.75rem);
  --space-xl-2xl: clamp(3.375rem, 2.8145rem + 2.82vw, 5rem);
  --space-2xl-3xl: clamp(4.5rem, 3.4653rem + 5.2061vw, 7.5rem);
  --space-3xl-4xl: clamp(6.75rem, 5.6291rem + 5.6399vw, 10rem);
  /* Custom pairs */
  --space-s-l: clamp(1.125rem, 0.6508rem + 2.3861vw, 2.5rem);
  --space-s-xl: clamp(1.125rem, 0.2196rem + 4.5553vw, 3.75rem);
  --space-m-xl: clamp(1.6875rem, 0.9761rem + 3.5792vw, 3.75rem);
  --space-l-2xl: clamp(2.25rem, 1.3015rem + 4.7722vw, 5rem);
  --space-5xs-4xs: clamp(0.125rem, 0.0906rem + 0.1701vw, 0.25rem);
  --space-4xs-3xs: clamp(0.1875rem, 0.1531rem + 0.1701vw, 0.3125rem);
  --space-3xs-2xs: clamp(0.25rem, 0.1467rem + 0.5102vw, 0.625rem);
  --space-2xs-xs: clamp(0.5rem, 0.3795rem + 0.5952vw, 0.9375rem);
  --space-xs-s: clamp(0.75rem, 0.6122rem + 0.6803vw, 1.25rem);
  --space-s-m: clamp(1rem, 0.7589rem + 1.1905vw, 1.875rem);
  --space-m-l: clamp(1.5rem, 1.2245rem + 1.3605vw, 2.5rem);
  --space-l-xl: clamp(2rem, 1.5179rem + 2.381vw, 3.75rem);
  --space-xl-2xl: clamp(3rem, 2.449rem + 2.7211vw, 5rem);
  --space-2xl-3xl: clamp(4rem, 3.0357rem + 4.7619vw, 7.5rem);
  --space-3xl-4xl: clamp(6rem, 4.898rem + 5.4422vw, 10rem);
  --space-s-l: clamp(1rem, 0.5867rem + 2.0408vw, 2.5rem);
  --space-l-2xl: clamp(2rem, 1.1735rem + 4.0816vw, 5rem);
  --space-m-xl: clamp(1.5rem, 0.8801rem + 3.0612vw, 3.75rem);
  --space-s-xl: clamp(1rem, 0.2423rem + 3.7415vw, 3.75rem);
  --grid-min-width: 39.75rem;
  --grid-max-width: 77.50rem;
  --grid-gutter: var(--space-s-l, clamp(1.125rem, 0.6508rem + 2.3861vw, 2.5rem));
  --grid-columns: 12;
  --color-aqua-100: #a0f8f7;
  --color-aqua-200: #91e8e8;
  --color-aqua-300: #82d9d8;
  --color-aqua-400: #72c9c9;
  --color-aqua-500: #5fbbbb;
  --color-aqua-600: #009d9e;
  --color-aqua-700: #006f6f;
  --color-aqua-800: #004142;
  --color-aqua-050: #d4fffe;
  --color-blue-100: #cee0ff;
  --color-blue-200: #accaff;
  --color-blue-300: #89b4ff;
  --color-blue-400: #709ef0;
  --color-blue-500: #5b89db;
  --color-blue-600: #386dcd;
  --color-blue-700: #0546b4;
  --color-blue-800: #002a76;
  --color-blue-900: #001341;
  --color-blue-050: #f0f5ff;
  --color-cyan-100: #b8f0ff;
  --color-cyan-200: #8be5fc;
  --color-cyan-300: #7cd5eb;
  --color-cyan-400: #6cc5db;
  --color-cyan-500: #57b6cd;
  --color-cyan-600: #0097b2;
  --color-cyan-700: #006b7e;
  --color-cyan-800: #003f4c;
  --color-cyan-900: #001c23;
  --color-cyan-050: #e5f9ff;
  --color-neutral-100: #f0efed;
  --color-neutral-200: #e5e4e0;
  --color-neutral-300: #CBC9C1;
  --color-neutral-400: #BAB7AB;
  --color-neutral-500: #969286;
  --color-neutral-600: #696658;
  --color-neutral-700: #585549;
  --color-neutral-800: #3b3932;
  --color-neutral-900: #292823;
  --color-neutral-950: #23221f;
  --color-neutral-050: #FBF6EA;
  --color-purple-100: #e0dbff;
  --color-purple-200: #ccc3ff;
  --color-purple-300: #b9acf4;
  --color-purple-400: #a599df;
  --color-purple-500: #9285cc;
  --color-purple-600: #7966bc;
  --color-purple-700: #593da1;
  --color-purple-800: #3c0084;
  --color-purple-900: #1d0048;
  --color-purple-050: #f5f3ff;
  --color-rose-100: #ffd6d7;
  --color-rose-200: #ffbabc;
  --color-rose-300: #fe9ca1;
  --color-rose-400: #ea8a8f;
  --color-rose-500: #d8777d;
  --color-rose-600: #c3515c;
  --color-rose-700: #a11534;
  --color-rose-800: #68001b;
  --color-rose-050: #fff1f1;
  --color-orange-100: #ffdcc7;
  --color-orange-200: #ffc4a0;
  --color-orange-300: #eeb38f;
  --color-orange-400: #dda37f;
  --color-orange-500: #cd926d;
  --color-orange-600: #b76e3d;
  --color-orange-700: #8f4500;
  --color-orange-800: #572700;
  --color-orange-900: #2a1000;
  --color-orange-050: #fff2eb;
  --color-ocre-100: #f9e68f;
  --color-ocre-200: #e9d67f;
  --color-ocre-300: #d9c670;
  --color-ocre-400: #c9b660;
  --color-ocre-500: #baa74d;
  --color-ocre-600: #9d8700;
  --color-ocre-700: #6f5e00;
  --color-ocre-800: #423700;
  --color-ocre-050: #fff6cc;
  --color-yellow-100: #fbeba8;
  --color-yellow-200: #f0e09d;
  --color-yellow-300: #e5d593;
  --color-yellow-400: #daca88;
  --color-yellow-500: #d0bf7b;
  --color-yellow-600: #af993c;
  --color-yellow-700: #7d6900;
  --color-yellow-800: #483c00;
  --color-yellow-900: #1e1800;
  --color-yellow-050: #fff6d0;
  --color-blueberry-100: #d4ddff;
  --color-blueberry-200: #b6c5ff;
  --color-blueberry-300: #9aadff;
  --color-blueberry-400: #8296f1;
  --color-blueberry-500: #6e80dc;
  --color-blueberry-600: #5363ce;
  --color-blueberry-700: #353ab6;
  --color-blueberry-800: #200094;
  --color-blueberry-900: #0e0054;
  --color-blueberry-050: #f2f5ff;
  --color-pink-100: #ffd7f3;
  --color-pink-200: #ffbeec;
  --color-pink-300: #f5a9e0;
  --color-pink-400: #e59ad0;
  --color-pink-500: #d68ac1;
  --color-pink-600: #bc63a5;
  --color-pink-700: #962e80;
  --color-pink-800: #630052;
  --color-pink-900: #300027;
  --color-pink-050: #fff0fa;
  --color-darkkhaki-100: #e7eeae;
  --color-darkkhaki-200: #d9e1a1;
  --color-darkkhaki-300: #ccd394;
  --color-darkkhaki-400: #bfc687;
  --color-darkkhaki-500: #b2b978;
  --color-darkkhaki-600: #909840;
  --color-darkkhaki-700: #656b00;
  --color-darkkhaki-800: #3a3e00;
  --color-darkkhaki-900: #181a00;
  --color-darkkhaki-050: #f4fcbb;
  --color-green-100: #d2f3b2;
  --color-green-200: #c3e4a4;
  --color-green-300: #b5d696;
  --color-green-400: #a7c788;
  --color-green-500: #98b978;
  --color-green-600: #729a47;
  --color-green-700: #477000;
  --color-green-800: #284200;
  --color-green-900: #0f1d00;
  --color-green-050: #e6ffd0;
  --color-red-100: #ffd4da;
  --color-red-200: #ffb5c1;
  --color-red-300: #ff93a8;
  --color-red-400: #ea7f94;
  --color-red-500: #d66a81;
  --color-red-600: #c14364;
  --color-red-700: #9e0041;
  --color-red-800: #640026;
  --color-red-900: #350011;
  --color-red-050: #fff1f3;
  --color-seagreen-100: #b7f7c8;
  --color-seagreen-200: #a8e7b8;
  --color-seagreen-300: #99d7a9;
  --color-seagreen-400: #89c89a;
  --color-seagreen-500: #78b98a;
  --color-seagreen-600: #479c63;
  --color-seagreen-700: #007339;
  --color-seagreen-800: #00441f;
  --color-seagreen-900: #001f0b;
  --color-seagreen-050: #deffe6;
  --color-black-015: rgba(0, 0, 0, 0.15);
  --color-black-030: rgba(0, 0, 0, 0.30);
  --color-black-050: rgba(0, 0, 0, 0.5);
  --color-black-070: rgba(0, 0, 0, 0.7);
  --color-black-085: rgba(0, 0, 0, 0.85);
  --color-white-015: rgba(255, 255, 255, 0.15);
  --color-white-030: rgba(255, 255, 255, 0.3);
  --color-white-050: rgba(255, 255, 255, 0.5);
  --color-white-070: rgba(255, 255, 255, 0.7);
  --color-white-085: rgba(255, 255, 255, 0.85);
  --sans-stack: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --serif-stack: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --mono-stack: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --font-weight-bold: 600;
  --list-indent: 1.25em;
  --text-align: start;
  --line-height-1: 1;
  --line-height-heading: 1.05;
  --line-height-heading-minor: 1.25;
  --line-height-base: 1.5;
  --line-height-prose: 1.64;
  --tracking--4: -0.075ch;
  --tracking--3: -0.05ch;
  --tracking--2: -0.025ch;
  --tracking--1: -0.0125ch;
  --tracking-0: normal;
  --tracking-1: 0.0125ch;
  --tracking-2: 0.025ch;
  --tracking-3: 0.05ch;
  --tracking-4: 0.1ch;
  --tracking-5: 0.15ch;
  --measure-0: 65ch;
  --measure-1: 48ch;
  --measure-2: 36ch;
  --measure-3: 24ch;
  --border-hairline: calc(var(--space-3xs)*.05);
  --border-thin: calc(var(--space-3xs)*.125);
  --border-light: calc(var(--space-3xs)*.25);
  --border-regular: calc(var(--space-3xs)*.5);
  --border-bold: var(--space-3xs);
  --gap: var(--space-s-m);
  --space: var(--space-s);
  --border-radius: var(--space-4xs-3xs);
  --input-height: var(--space-l-xl);
  --input-padding: var(--space-xs-s);
  --input-border: .1ch solid var(--color-neutral);
  --transition-base: .25s ease;
  --transition-movement: .2s linear;
  --transition-fade: .2s ease;
  --transition-bounce: .5s cubic-bezier(0.5, 0.05, 0.2, 1.5);
}

.u-container {
  max-width: var(--grid-max-width);
  padding-inline: var(--grid-gutter);
  margin-inline: auto;
}

.u-grid {
  display: grid;
  gap: var(--grid-gutter);
}

:root {
  /* font fallbacks */
  /* media */
  --object-fit: var(--fit, contain);
  /* borders */
  --border-hairline: calc(var(--space-3xs)*.05);
  --border-thin: calc(var(--space-3xs)*.125);
  --border-light: calc(var(--space-3xs)*.25);
  --border-regular: calc(var(--space-3xs)*.5);
  --border-bold: var(--space-3xs);
  /* --border-radius: var(--space-4xs-3xs); */
  --gap: var(--space-s-m);
  --gap-half: calc(var(--gap)*.5);
  /* --gap: calc(var(--grid-gutter) * .5) */
  --space: var(--space-s);
  --border-radius: var(--space-2xs-xs);
  --input-height: var(--space-l-xl);
  --input-padding: var(--space-xs-s);
  --input-border: .1ch solid var(--color-neutral);
  /* transitions */
  --transition-base: .25s ease;
  --transition-movement: .2s linear;
  --transition-fade: .2s ease;
  --transition-bounce: .5s cubic-bezier(0.5, 0.05, 0.2, 1.5);
  --spc-0: 0rem;
  --spc-4xs: var(--space-4xs);
  --spc-3xs: var(--space-3xs);
  --spc-2xs: var(--space-2xs);
  --spc-xs: var(--space-xs);
  --spc-s: var(--space-s);
  --spc-m: var(--space-m);
  --spc-l: var(--space-l);
  --spc-xl: var(--space-xl);
  --spc-2xl: var(--space-2xl);
  --spc-3xl: var(--space-3xl);
  --spc-4xl: var(--space-4xl);
  --spc-p: var(--space-xs);
  --spc-btn: var(--space-s-m);
  --color-brand: light-dark(var(--color-light-brand),var(--color-dark-brand));
  --color-text: light-dark(var(--color-light-text),var(--color-dark-text));
  --color-back: light-dark(var(--color-light-back),var(--color-dark-back));
  --color-light-accent: oklch(from var(--color-light-brand) calc(l + calc(var(--color-calc-step) * var(--color-calc-light-accent))) c calc(h + 180));
  --color-dark-accent: oklch(from var(--color-dark-brand) calc(l + calc(var(--color-calc-step) * var(--color-calc-dark-accent))) c calc(h + 180));
  --color-accent: light-dark(var(--color-light-accent),var(--color-dark-accent));
  --color-light-focus: oklch(from var(--color-calc-focus) calc(l + calc(var(--color-calc-step) * var(--color-calc-light-focus))) c h);
  --color-dark-focus: oklch(from var(--color-calc-focus) calc(l + calc(var(--color-calc-step) * var(--color-calc-dark-focus))) c h);
  --color-light-boost: oklch(from var(--color-calc-boost) calc(l + calc(var(--color-calc-step) * var(--color-calc-light-boost))) c h);
  --color-dark-boost: oklch(from var(--color-calc-boost) calc(l + calc(var(--color-calc-step) * var(--color-calc-dark-boost))) c h);
  --color-neutral-base: color-mix(in oklab, var(--color-text) 50%, var(--color-back));
  --color-light-neutral: oklch(from var(--color-neutral-base) calc(l + calc(var(--color-calc-step) * var(--color-calc-light-neutral))) c h);
  --color-dark-neutral: oklch(from var(--color-neutral-base) calc(l + calc(var(--color-calc-step) * var(--color-calc-dark-neutral))) c h);
  --color-focus: light-dark(var(--color-light-focus),var(--color-dark-focus));
  --color-boost: light-dark(var(--color-light-boost),var(--color-dark-boost));
  --color-neutral: light-dark(var(--color-light-neutral),var(--color-dark-neutral));
  --font-shortform: var(--font-sans);
  --font-longform: var(--font-serif);
  --font-headline: var(--font-sans);
}

html {
  block-size: 100%;
  color-scheme: light;
}
html[data-theme=dark] {
  color-scheme: dark;
}

/* Base styles that apply to the whole project
〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰 */
/* * {
  max-inline-size: var(--measure-0);
}
html,
body,
div,
header,
nav,
main,
footer,
section,
article,
details {
  max-inline-size: none;
} */
body {
  color: var(--color-text);
  background-color: var(--color-back);
  font-size: var(--step-0);
  font-family: var(--font-longform);
  line-height: var(--line-height-base);
  font-weight: 400;
  font-variant-numeric: slashed-zero;
  text-align: var(--text-align);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
  transition: color 1s ease-in-out, background-color 0.5s ease-out;
}
[data-theme=dark] body p {
  font-weight: 350;
}

/* Base typesetting */
h1, h2, h3 {
  line-height: var(--line-height-heading);
  font-weight: 700;
  font-family: var(--font-headline);
}

h4, h5, h6 {
  line-height: var(--line-height-heading-minor);
  font-weight: 400;
}

.h-xl {
  font-size: var(--step-6);
  letter-spacing: var(--tracking--3);
  line-height: var(--line-height-heading);
}

h1, .h1 {
  font-size: var(--step-5);
  letter-spacing: var(--tracking--2);
}

h2, .h2 {
  font-size: var(--step-4);
  letter-spacing: var(--tracking--1);
}

h3, .h3 {
  font-size: var(--step-3);
}

h4, .h4 {
  font-size: var(--step-2);
}

h5, .h5 {
  font-size: var(--step-1);
}

h6, .h6 {
  font-size: var(--step-0);
}

/* Set line lengths */
h1 {
  max-inline-size: var(--measure-3);
}

h2,
h3 {
  max-inline-size: var(--measure-2);
}

h4,
h5 {
  max-inline-size: var(--measure-1);
}

strong {
  font-weight: var(--font-weight-bold);
}

/* blockquote:not([class]) {
  font-family: var(--font-heading);
  font-size: var(--step-2);
} */
/* Markdown blockquote:not([class])s aren't ideal, so we're presuming the person quoted is the last p */
/* blockquote:not([class]) p:last-of-type {
  font-family: var(--font-text);
  font-size: var(--step-1);
  font-weight: normal;
} */
article {
  display: flex;
  flex-direction: column;
}

figure {
  margin-inline: auto;
  width: 100%;
}

figcaption {
  font-size: var(--step--1);
  padding-top: var(--space-2xs);
  letter-spacing: var(--tracking-1);
  color: var(--color-neutral);
}

ul, ol {
  padding-inline-start: var(--list-indent);
  margin-block-end: 0;
  text-align: start;
  display: inline-block;
}

dl {
  font-family: var(--font-shortform);
}

dt {
  text-transform: uppercase;
  font-size: var(--step--1);
  letter-spacing: var(--tracking-5);
  color: var(--color-mix);
  padding-block-end: var(--spc-3xs);
}

dl.metadata {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
}
dl.metadata > * {
  flex-grow: 1;
}
dl.metadata > .full {
  flex-basis: 100%;
}

hr {
  width: 100%;
  margin-block: var(--gap);
  border: 0;
  border-top: var(--border-light) solid var(--color-neutral);
}

mark {
  /* color: var(--color-page); */
  background-color: var(--color-highlight);
  padding: 0.2em 0.25em 0.15em;
}

pre {
  text-align: left;
  text-wrap: wrap;
}

code {
  font-family: var(--font-code);
  letter-spacing: initial;
  line-height: 1.4;
}

s {
  color: var(--color-text-neutral);
}

a, u {
  color: currentcolor;
  text-decoration: underline;
  /* text-decoration-thickness: .1ch; */
}

a[class], nav a {
  text-decoration: none;
}

:target {
  scroll-margin-top: 2ex;
}

button {
  cursor: pointer;
}

main {
  /* margin-block-end: var(--region-space, var(--space-s-m)); */
  flex-grow: 10;
}

main:focus {
  outline: none;
}

/* Base selection styles that invert whatever colours are rendered */
::selection {
  background: var(--color-text);
  color: var(--color-back);
}

/* *:focus-visible {
  outline: 0.2rem solid rgba(var(--color-text), 0.5);
  outline-offset: 0.3rem;
  box-shadow: 0 0 0 0.3rem rgb(var(--color-page)), 0 0 0.5rem 0.4rem rgba(var(--color-text), 0.3);
} */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}

nav {
  font-family: var(--font-shortform);
}

section[data-theme], footer[data-theme] {
  background-color: var(--color-back);
  color: var(--color-text);
}
section[data-theme=dark], footer[data-theme=dark] {
  color-scheme: dark;
}
section[data-theme=light], footer[data-theme=light] {
  color-scheme: light;
}

html[data-theme=dark] [data-theme=invert] {
  color-scheme: light;
}

html[data-theme=light] [data-theme=invert] {
  color-scheme: dark;
}

@custom-media --motionOK (prefers-reduced-motion: no-preference);
@custom-media --motionNotOK (prefers-reduced-motion: reduce);
@custom-media --opacityOK (prefers-reduced-transparency: no-preference);
@custom-media --opacityNotOK (prefers-reduced-transparency: reduce);
@custom-media --useDataOK (prefers-reduced-data: no-preference);
@custom-media --useDataNotOK (prefers-reduced-data: reduce);
@custom-media --OSdark (prefers-color-scheme: dark);
@custom-media --OSlight (prefers-color-scheme: light);
@custom-media --highContrast (prefers-contrast: more);
@custom-media --lowContrast (prefers-contrast: less);
@custom-media --invertedColors (inverted-colors: inverted);
@custom-media --forcedColors (forced-colors: active);
@custom-media --portrait (orientation: portrait);
@custom-media --landscape (orientation: landscape);
@custom-media --HDcolor (dynamic-range: high) or (color-gamut: p3);
@custom-media --touch (hover: none) and (pointer: coarse);
@custom-media --stylus (hover: none) and (pointer: fine);
@custom-media --pointer (hover) and (pointer: coarse);
@custom-media --mouse (hover) and (pointer: fine);
@custom-media --xxs-only (0px <= width < 240px);
@custom-media --xxs-n-above (width >= 240px);
@custom-media --xxs-n-below (width < 240px);
@custom-media --xxs-phone (--xxs-only) and (--portrait);
@custom-media --xs-only (240px <= width < 360px);
@custom-media --xs-n-above (width >= 360px);
@custom-media --xs-n-below (width < 360px);
@custom-media --xs-phone (--xs-only) and (--portrait);
@custom-media --sm-only (360px <= width < 480px);
@custom-media --sm-n-above (width >= 480px);
@custom-media --sm-n-below (width < 480px);
@custom-media --sm-phone (--sm-only) and (--portrait);
@custom-media --md-only (480px <= width < 768px);
@custom-media --md-n-above (width >= 768px);
@custom-media --md-n-below (width < 768px);
@custom-media --md-phone (--md-only) and (--portrait);
@custom-media --lg-only (768px <= width < 1024px);
@custom-media --lg-n-above (width >= 1024px);
@custom-media --lg-n-below (width < 1024px);
@custom-media --lg-phone (--lg-only) and (--portrait);
@custom-media --xl-only (1024px <= width < 1440px);
@custom-media --xl-n-above (width >= 1440px);
@custom-media --xl-n-below (width < 1440px);
@custom-media --xxl-only (1440px <= width < 1920px);
@custom-media --xxl-n-above (width >= 1920px);
@custom-media --xxl-n-below (width < 1920px);
:where(html) {
  --ease-1: cubic-bezier(.25, 0, .5, 1);
  --ease-2: cubic-bezier(.25, 0, .4, 1);
  --ease-3: cubic-bezier(.25, 0, .3, 1);
  --ease-4: cubic-bezier(.25, 0, .2, 1);
  --ease-5: cubic-bezier(.25, 0, .1, 1);
  --ease-in-1: cubic-bezier(.25, 0, 1, 1);
  --ease-in-2: cubic-bezier(.50, 0, 1, 1);
  --ease-in-3: cubic-bezier(.70, 0, 1, 1);
  --ease-in-4: cubic-bezier(.90, 0, 1, 1);
  --ease-in-5: cubic-bezier(1, 0, 1, 1);
  --ease-out-1: cubic-bezier(0, 0, .75, 1);
  --ease-out-2: cubic-bezier(0, 0, .50, 1);
  --ease-out-3: cubic-bezier(0, 0, .3, 1);
  --ease-out-4: cubic-bezier(0, 0, .1, 1);
  --ease-out-5: cubic-bezier(0, 0, 0, 1);
  --ease-in-out-1: cubic-bezier(.1, 0, .9, 1);
  --ease-in-out-2: cubic-bezier(.3, 0, .7, 1);
  --ease-in-out-3: cubic-bezier(.5, 0, .5, 1);
  --ease-in-out-4: cubic-bezier(.7, 0, .3, 1);
  --ease-in-out-5: cubic-bezier(.9, 0, .1, 1);
  --ease-elastic-out-1: cubic-bezier(.5, .75, .75, 1.25);
  --ease-elastic-out-2: cubic-bezier(.5, 1, .75, 1.25);
  --ease-elastic-out-3: cubic-bezier(.5, 1.25, .75, 1.25);
  --ease-elastic-out-4: cubic-bezier(.5, 1.5, .75, 1.25);
  --ease-elastic-out-5: cubic-bezier(.5, 1.75, .75, 1.25);
  --ease-elastic-in-1: cubic-bezier(.5, -0.25, .75, 1);
  --ease-elastic-in-2: cubic-bezier(.5, -0.50, .75, 1);
  --ease-elastic-in-3: cubic-bezier(.5, -0.75, .75, 1);
  --ease-elastic-in-4: cubic-bezier(.5, -1.00, .75, 1);
  --ease-elastic-in-5: cubic-bezier(.5, -1.25, .75, 1);
  --ease-elastic-in-out-1: cubic-bezier(.5, -.1, .1, 1.5);
  --ease-elastic-in-out-2: cubic-bezier(.5, -.3, .1, 1.5);
  --ease-elastic-in-out-3: cubic-bezier(.5, -.5, .1, 1.5);
  --ease-elastic-in-out-4: cubic-bezier(.5, -.7, .1, 1.5);
  --ease-elastic-in-out-5: cubic-bezier(.5, -.9, .1, 1.5);
  --ease-step-1: steps(2);
  --ease-step-2: steps(3);
  --ease-step-3: steps(4);
  --ease-step-4: steps(7);
  --ease-step-5: steps(10);
  --ease-elastic-1: var(--ease-elastic-out-1);
  --ease-elastic-2: var(--ease-elastic-out-2);
  --ease-elastic-3: var(--ease-elastic-out-3);
  --ease-elastic-4: var(--ease-elastic-out-4);
  --ease-elastic-5: var(--ease-elastic-out-5);
  --ease-squish-1: var(--ease-elastic-in-out-1);
  --ease-squish-2: var(--ease-elastic-in-out-2);
  --ease-squish-3: var(--ease-elastic-in-out-3);
  --ease-squish-4: var(--ease-elastic-in-out-4);
  --ease-squish-5: var(--ease-elastic-in-out-5);
  --ease-spring-1: linear(
    0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%,
    0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%,
    1.001
  );
  --ease-spring-2: linear(
    0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962,
    1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%,
    0.999 61.6%, 0.995 71.2%, 1
  );
  --ease-spring-3: linear(
    0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077,
    1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%,
    1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%,
    0.997 69.8%, 1.003 76.9%, 1
  );
  --ease-spring-4: linear(
    0, 0.009, 0.037 1.7%, 0.153 3.6%, 0.776 10.3%, 1.001, 1.142 16%, 1.185,
    1.209 19%, 1.215 19.9% 20.8%, 1.199, 1.165 25%, 1.056 30.3%, 1.008 33%, 0.973,
    0.955 39.2%, 0.953 41.1%, 0.957 43.3%, 0.998 53.3%, 1.009 59.1% 63.7%,
    0.998 78.9%, 1
  );
  --ease-spring-5: linear(
    0, 0.01, 0.04 1.6%, 0.161 3.3%, 0.816 9.4%, 1.046, 1.189 14.4%, 1.231,
    1.254 17%, 1.259, 1.257 18.6%, 1.236, 1.194 22.3%, 1.057 27%, 0.999 29.4%,
    0.955 32.1%, 0.942, 0.935 34.9%, 0.933, 0.939 38.4%, 1 47.3%, 1.011,
    1.017 52.6%, 1.016 56.4%, 1 65.2%, 0.996 70.2%, 1.001 87.2%, 1
  );
  --ease-bounce-1: linear(
    0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141, 0.191, 0.25, 0.316, 0.391 36.8%,
    0.563, 0.766, 1 58.8%, 0.946, 0.908 69.1%, 0.895, 0.885, 0.879, 0.878, 0.879,
    0.885, 0.895, 0.908 89.7%, 0.946, 1
  );
  --ease-bounce-2: linear(
    0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141 15.1%, 0.25, 0.391, 0.562, 0.765,
    1, 0.892 45.2%, 0.849, 0.815, 0.788, 0.769, 0.757, 0.753, 0.757, 0.769, 0.788,
    0.815, 0.85, 0.892 75.2%, 1 80.2%, 0.973, 0.954, 0.943, 0.939, 0.943, 0.954,
    0.973, 1
  );
  --ease-bounce-3: linear(
    0, 0.004, 0.016, 0.035, 0.062, 0.098, 0.141 11.4%, 0.25, 0.39, 0.562, 0.764,
    1 30.3%, 0.847 34.8%, 0.787, 0.737, 0.699, 0.672, 0.655, 0.65, 0.656, 0.672,
    0.699, 0.738, 0.787, 0.847 61.7%, 1 66.2%, 0.946, 0.908, 0.885 74.2%, 0.879,
    0.878, 0.879, 0.885 79.5%, 0.908, 0.946, 1 87.4%, 0.981, 0.968, 0.96, 0.957,
    0.96, 0.968, 0.981, 1
  );
  --ease-bounce-4: linear(
    0, 0.004, 0.016 3%, 0.062, 0.141, 0.25, 0.391, 0.562 18.2%, 1 24.3%, 0.81,
    0.676 32.3%, 0.629, 0.595, 0.575, 0.568, 0.575, 0.595, 0.629, 0.676 48.2%,
    0.811, 1 56.2%, 0.918, 0.86, 0.825, 0.814, 0.825, 0.86, 0.918, 1 77.2%,
    0.94 80.6%, 0.925, 0.92, 0.925, 0.94 87.5%, 1 90.9%, 0.974, 0.965, 0.974, 1
  );
  --ease-bounce-5: linear(
    0, 0.004, 0.016 2.5%, 0.063, 0.141, 0.25 10.1%, 0.562, 1 20.2%, 0.783, 0.627,
    0.534 30.9%, 0.511, 0.503, 0.511, 0.534 38%, 0.627, 0.782, 1 48.7%, 0.892,
    0.815, 0.769 56.3%, 0.757, 0.753, 0.757, 0.769 61.3%, 0.815, 0.892, 1 68.8%,
    0.908 72.4%, 0.885, 0.878, 0.885, 0.908 79.4%, 1 83%, 0.954 85.5%, 0.943,
    0.939, 0.943, 0.954 90.5%, 1 93%, 0.977, 0.97, 0.977, 1
  );
  --ease-circ-in: cubic-bezier(.6,.04,.98,.335);
  --ease-circ-in-out: cubic-bezier(.785,.135,.15,.86);
  --ease-circ-out: cubic-bezier(.075,.82,.165,1);
  --ease-cubic-in: cubic-bezier(.55,.055,.675,.19);
  --ease-cubic-in-out: cubic-bezier(.645,.045,.355,1);
  --ease-cubic-out: cubic-bezier(.215,.61,.355,1);
  --ease-expo-in: cubic-bezier(.95,.05,.795,.035);
  --ease-expo-in-out: cubic-bezier(1,0,0,1);
  --ease-expo-out: cubic-bezier(.19,1,.22,1);
  --ease-quad-in: cubic-bezier(.55,.085,.68,.53);
  --ease-quad-in-out: cubic-bezier(.455,.03,.515,.955);
  --ease-quad-out: cubic-bezier(.25,.46,.45,.94);
  --ease-quart-in: cubic-bezier(.895,.03,.685,.22);
  --ease-quart-in-out: cubic-bezier(.77,0,.175,1);
  --ease-quart-out: cubic-bezier(.165,.84,.44,1);
  --ease-quint-in: cubic-bezier(.755,.05,.855,.06);
  --ease-quint-in-out: cubic-bezier(.86,0,.07,1);
  --ease-quint-out: cubic-bezier(.23,1,.32,1);
  --ease-sine-in: cubic-bezier(.47,0,.745,.715);
  --ease-sine-in-out: cubic-bezier(.445,.05,.55,.95);
  --ease-sine-out: cubic-bezier(.39,.575,.565,1);
}

/* @import 'props.media.css'; */
:where(html) {
  --animation-fade-in: fade-in .5s var(--ease-3);
  --animation-fade-in-bloom: fade-in-bloom 2s var(--ease-3);
  --animation-fade-out: fade-out .5s var(--ease-3);
  --animation-fade-out-bloom: fade-out-bloom 2s var(--ease-3);
  --animation-scale-up: scale-up .5s var(--ease-3);
  --animation-scale-down: scale-down .5s var(--ease-3);
  --animation-slide-out-up: slide-out-up .5s var(--ease-3);
  --animation-slide-out-down: slide-out-down .5s var(--ease-3);
  --animation-slide-out-right: slide-out-right .5s var(--ease-3);
  --animation-slide-out-left: slide-out-left .5s var(--ease-3);
  --animation-slide-in-up: slide-in-up .5s var(--ease-3);
  --animation-slide-in-down: slide-in-down .5s var(--ease-3);
  --animation-slide-in-right: slide-in-right .5s var(--ease-3);
  --animation-slide-in-left: slide-in-left .5s var(--ease-3);
  --animation-shake-x: shake-x .75s var(--ease-out-5);
  --animation-shake-y: shake-y .75s var(--ease-out-5);
  --animation-shake-z: shake-z 1s var(--ease-in-out-3);
  --animation-spin: spin 2s linear infinite;
  --animation-ping: ping 5s var(--ease-out-3) infinite;
  --animation-blink: blink 1s var(--ease-out-3) infinite;
  --animation-float: float 3s var(--ease-in-out-3) infinite;
  --animation-bounce: bounce 2s var(--ease-squish-2) infinite;
  --animation-pulse: pulse 2s var(--ease-out-3) infinite;
}

@keyframes fade-in {
  to {
    opacity: 1;
  }
}
@keyframes fade-in-bloom {
  0% {
    opacity: 0;
    filter: brightness(1) blur(20px);
  }
  10% {
    opacity: 1;
    filter: brightness(2) blur(10px);
  }
  100% {
    opacity: 1;
    filter: brightness(1) blur(0);
  }
}
@keyframes fade-out {
  to {
    opacity: 0;
  }
}
@keyframes fade-out-bloom {
  100% {
    opacity: 0;
    filter: brightness(1) blur(20px);
  }
  10% {
    opacity: 1;
    filter: brightness(2) blur(10px);
  }
  0% {
    opacity: 1;
    filter: brightness(1) blur(0);
  }
}
@keyframes scale-up {
  to {
    transform: scale(1.25);
  }
}
@keyframes scale-down {
  to {
    transform: scale(0.75);
  }
}
@keyframes slide-out-up {
  to {
    transform: translateY(-100%);
  }
}
@keyframes slide-out-down {
  to {
    transform: translateY(100%);
  }
}
@keyframes slide-out-right {
  to {
    transform: translateX(100%);
  }
}
@keyframes slide-out-left {
  to {
    transform: translateX(-100%);
  }
}
@keyframes slide-in-up {
  from {
    transform: translateY(100%);
  }
}
@keyframes slide-in-down {
  from {
    transform: translateY(-100%);
  }
}
@keyframes slide-in-right {
  from {
    transform: translateX(-100%);
  }
}
@keyframes slide-in-left {
  from {
    transform: translateX(100%);
  }
}
@keyframes shake-x {
  0%, 100% {
    transform: translateX(0%);
  }
  20% {
    transform: translateX(-5%);
  }
  40% {
    transform: translateX(5%);
  }
  60% {
    transform: translateX(-5%);
  }
  80% {
    transform: translateX(5%);
  }
}
@keyframes shake-y {
  0%, 100% {
    transform: translateY(0%);
  }
  20% {
    transform: translateY(-5%);
  }
  40% {
    transform: translateY(5%);
  }
  60% {
    transform: translateY(-5%);
  }
  80% {
    transform: translateY(5%);
  }
}
@keyframes shake-z {
  0%, 100% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(-2deg);
  }
  40% {
    transform: rotate(2deg);
  }
  60% {
    transform: rotate(-2deg);
  }
  80% {
    transform: rotate(2deg);
  }
}
@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}
@keyframes ping {
  90%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}
@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
@keyframes float {
  50% {
    transform: translateY(-25%);
  }
}
@keyframes bounce {
  25% {
    transform: translateY(-20%);
  }
  40% {
    transform: translateY(-3%);
  }
  0%, 60%, 100% {
    transform: translateY(0);
  }
}
@keyframes pulse {
  50% {
    transform: scale(0.9, 0.9);
  }
}
@media (--OSdark) {
  @keyframes fade-in-bloom {
    0% {
      opacity: 0;
      filter: brightness(1) blur(20px);
    }
    10% {
      opacity: 1;
      filter: brightness(0.5) blur(10px);
    }
    100% {
      opacity: 1;
      filter: brightness(1) blur(0);
    }
  }
}
@media (--OSdark) {
  @keyframes fade-out-bloom {
    100% {
      opacity: 0;
      filter: brightness(1) blur(20px);
    }
    10% {
      opacity: 1;
      filter: brightness(0.5) blur(10px);
    }
    0% {
      opacity: 1;
      filter: brightness(1) blur(0);
    }
  }
}
.columns {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  column-gap: var(--gap, var(--grid-gutter));
}

.column {
  grid-column: span var(--span, 12);
  display: grid;
}

@media screen and (width <= 50rem) {
  .column.is-3 {
    grid-column: span 6;
  }
}
@media screen and (width <= 39.75rem) {
  .column.is-4, .column.is-6, .column.is-8 {
    grid-column: span 12;
  }
}
@media screen and (width <= 30rem) {
  .column.is-3 {
    grid-column: span 12;
  }
}
/* https://every-layout.dev/layouts/icon/ */
.icon {
  --size: var(--spc-l);
  width: var(--size);
  height: var(--size);
}

.with-icon {
  display: inline-flex;
  align-items: baseline;
}

.with-icon .icon {
  margin-inline-end: 1rem;
}

/* <span class="with-icon">
  <svg class="icon">
    <use href="/path/to/icons.svg#my-icon"></use>
  </svg>
  Close
</span> */
.wrapper,
.breakout-grid {
  --_gap: var(--grid-gutter);
  --content-size: var(--measure-0);
  --popout-size: var(--_gap);
  --feature-size: calc(var(--popout-size) * 1.5);
  --breakout-full: full;
  --breakout-wrap: wrap;
  --breakout-feature: feature;
  --breakout-popout: popout;
  --breakout-content: content;
  --content: min(100% - (var(--_gap) * 2), var(--content-size));
  --content-half: calc(var(--content) / 2);
  --popout: minmax(0, var(--popout-size));
  --feature: minmax(0, var(--feature-size));
  --wrap: minmax(
  	0,
  	calc((var(--grid-max-width) - var(--content) - (var(--_gap) * 4)) / 2)
  );
  --full: minmax(var(--_gap), 1fr);
  --content-width: var(--content-size);
  --popout-width: calc(var(--content-width) + (var(--popout-size) * 2));
  --feature-width: calc(var(--content-width) + (var(--feature-size) * 2));
  --wrap-width: var(--grid-max-width);
  --full-width: calc(var(--grid-max-width) + (var(--_gap) * 2));
  display: grid;
  grid-template-columns: [full-start] var(--full) [wrap-start] var(--wrap) [feature-start] var(--feature) [popout-start] var(--popout) [content-start] 0 [left] var(--content-half) [right] var(--content-half) 0 [content-end] var(--popout) [popout-end] var(--feature) [feature-end] var(--wrap) [wrap-end] var(--full) [full-end];
  margin-inline: auto;
  width: 100%;
}
.wrapper > .grid,
.breakout-grid > .grid {
  grid-column: full;
  display: grid;
  grid-template-columns: inherit;
}
.wrapper > .grid > *,
.breakout-grid > .grid > * {
  grid-column: wrap;
}
.wrapper .span-full,
.breakout-grid .span-full {
  grid-column: full;
}
.wrapper .span-wrap,
.breakout-grid .span-wrap {
  grid-column: wrap;
}
.wrapper .span-feature,
.breakout-grid .span-feature {
  grid-column: feature;
}
.wrapper .span-popout,
.breakout-grid .span-popout {
  grid-column: popout;
}
.wrapper .span-content,
.breakout-grid .span-content {
  grid-column: content;
}

.standfirst > p:first-of-type {
  font-size: var(--step-1);
  /* max-width: var(--max-width-p1); */
  /* line-height: 1.44; */
}

h1, h2, h3, h4, h5, h6, p {
  margin-block-end: var(--spc-p);
}

p:last-child {
  margin-block-end: 0rem;
}

.site-header {
  padding-block: var(--region-space, var(--space-s-m));
}

.site-navigation, .footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gap);
}

.site-navigation {
  position: relative;
}

.logo {
  font-family: var(--font-headline);
  font-weight: 700;
}
.logo .img {
  max-inline-size: var(--logo-width, var(--spc-3xl));
  color: var(--color-brand);
  transform: rotate(-15deg);
  transition: all 0.5s ease-out 0.2s;
}
.logo:hover .img, .logo:focus .img {
  transform: rotate(-5deg);
  color: var(--color-focus);
}

.header-menu {
  display: block;
}
.header-menu a {
  transition: color 0.25s ease-out;
}
.header-menu a:hover, .header-menu a:focus {
  text-decoration: underline;
  color: var(--color-focus);
}
.header-menu a[aria-current=page] {
  color: var(--color-brand);
}

.header-menu, .footer-menu {
  font-family: var(--font-shortform);
}
.header-menu .nav, .footer-menu .nav {
  display: flex;
  align-items: center;
  gap: var(--space-xs-s);
  line-height: 1;
}

.site-footer {
  padding-block: var(--spc-m) var(--spc-xs);
}
.site-footer a {
  display: inline-block;
  line-height: var(--line-height-heading);
  text-decoration: none;
}
.site-footer a svg {
  vertical-align: bottom;
}

.footer-content {
  align-items: flex-end;
  flex-wrap: wrap;
  color: var(--color-mix-more);
}
.footer-content .nav, .footer-content .footer-contact {
  padding-block-start: var(--spc-xs);
}
.footer-content a {
  transition: color 0.25s ease-out;
}
.footer-content a:hover, .footer-content a:focus {
  color: var(--color-focus);
}

.footer-social {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  gap: var(--space-3xs);
  text-align: right;
}

.footer-connections {
  font-family: var(--font-shortform);
}

.footer-legal {
  font-size: var(--step--1);
  color: var(--color-mix);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--spc-2xs);
  margin-block-start: var(--spc-s);
  text-wrap: balance;
}

@media (max-width: 39.75rem) {
  .footer-social, .footer-content, .footer-legal {
    display: block;
    text-align: center;
  }
  .footer-social {
    padding-block-start: var(--spc-s);
  }
  .footer-menu .nav {
    justify-content: center;
    flex-wrap: wrap;
  }
}
.theme-toggle {
  --size: 1.5em;
  --icon-fill: var(--color-text);
  --icon-fill-hover: var(--color-focus);
  --movement: ease-in-out;
  background: none;
  border: none;
  padding: 0;
  inline-size: var(--size);
  block-size: var(--size);
  aspect-ratio: 1;
  border-radius: 50%;
  color: var(--icon-fill);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle > svg {
  inline-size: 100%;
  block-size: 100%;
}
@media (hover: none) {
  .theme-toggle {
    --size: 48px;
  }
}

.theme-icon > :is(.moon, .sun, .rays) {
  transform-origin: center center;
}
.theme-toggle > .theme-icon {
  transition: color 0.5s ease-in-out, opacity 0.25s ease-in-out;
}
.theme-toggle:is(:hover, :focus-visible) > .theme-icon {
  color: var(--icon-fill-hover);
  opacity: 1;
}
[data-theme=dark] .theme-icon {
  opacity: 0.5;
}
[data-theme=dark] .theme-icon > .sun {
  transform: scale(1.5);
}
[data-theme=dark] .theme-icon > .rays {
  opacity: 0;
}
[data-theme=dark] .theme-icon > .moon > circle {
  transform: translateX(-7px) translateY(-1px);
}
@supports (cx: 1px) {
  [data-theme=dark] .theme-icon > .moon > circle {
    transform: translateX(0) translateY(0);
    cx: 17px;
    cy: 9px;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .theme-icon > .sun {
    transition: transform 0.5s var(--movement);
  }
  .theme-icon > .rays {
    transition: transform 0.5s var(--movement), opacity 0.5s var(--movement);
  }
  .theme-icon .moon > circle {
    transition: transform 0.25s var(--movement);
  }
  @supports (cx: 1px) {
    .theme-icon .moon > circle {
      transition: cx 0.25s var(--movement);
    }
  }
  [data-theme=dark] .theme-icon > .sun {
    transform: scale(1.5);
    transition-timing-function: var(--movement);
    transition-duration: 0.25s;
  }
  [data-theme=dark] .theme-icon > .rays {
    transform: rotateZ(-25deg);
    transition-duration: 0.25s;
  }
  [data-theme=dark] .theme-icon > .moon > circle {
    transition-delay: 0.25s;
    transition-duration: 0.5s;
  }
}

.button {
  display: inline-block;
  min-inline-size: 12ch;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding-block: var(--spc-xs);
  padding-inline: var(--spc-s);
  background-color: var(--color-link);
  color: var(--color-back);
  font-family: var(--font-longform);
  border-radius: var(--border-radius);
  transition: transform 0.25s ease-out, background-color 0.5s ease-in, color 0.25s ease-in-out;
}
.button:hover, .button:focus {
  color: var(--color-back);
  background-color: var(--color-text);
  transform: scale(1.03);
}

.spc-btn-start {
  margin-block-start: var(--spc-btn);
}

.block-type-hero figure, .block-type-hero img, .block-type-hero .image-placeholder {
  height: 100%;
}
.block-type-hero .text {
  display: grid;
}

.text {
  text-wrap: pretty;
}

@media (max-width: 39.75rem) {
  .block-layout-offset .media-element, .block-layout-offset .text-element, .block-layout-split .media-element, .block-layout-split .text-element {
    grid-column: full !important;
    padding-inline: var(--inline-spc);
  }
}
.gallery {
  --_col: 4;
}
.gallery a, .gallery img, .gallery svg, .gallery .image-placeholder, .gallery .overlay {
  height: 100%;
}
.gallery > * {
  display: flex;
  max-inline-size: unset;
}
.gallery img {
  max-inline-size: unset;
  width: 100%;
}
.gallery .img-svg {
  block-size: 100%;
}
.gallery .img-svg > * {
  display: flex;
  block-size: 100%;
  inline-size: 100%;
}
.gallery svg {
  color: var(--color-svg, var(--color-text));
}
.gallery .svg-tile {
  background-position: center;
  background-repeat: repeat;
}
.parent .gallery .overlay {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--space-m-l);
  overflow: hidden;
  z-index: 22;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
.parent .gallery .overlay::after {
  background-image: linear-gradient(var(--color-boost), var(--color-boost));
  content: "";
  position: absolute;
  inset: 0;
  opacity: 1;
  z-index: -1;
  mask-image: url("/media/plugins/designlodge/dl-base/images/grit.png");
}
.parent .gallery .overlay .label {
  text-align: center;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  color: var(--color-brand);
  font-size: var(--step-1);
  text-wrap: balance;
  transform: scale(0.95);
  transition: transform 0.5s var(--ease-bounce-1), color 1.25s ease-in-out;
}
.gallery a:hover .overlay {
  opacity: 1;
}
.gallery a:hover .overlay .label {
  transform: scale(1.05);
  color: var(--color-text);
}

/* .grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-placement, auto-fill), minmax(var(--grid-min-item-size, var(--min-grid-size, 16rem)), 1fr));
  gap: var(--gap);
}
.grid[data-rows=masonry] {
  grid-template-rows: masonry;
  align-items: start;
} */
/* .dangle-centre {
  justify-content: center;
}

.dangle-right {
  justify-content: right;
} */
.gallery-flex, .gallery-reel, .gallery-rows {
  display: flex;
  justify-content: center;
  gap: var(--gap);
}
.gallery-flex > *, .gallery-reel > *, .gallery-rows > * {
  aspect-ratio: var(--aspect-ratio, 1);
  flex-grow: 1;
  flex-basis: calc((var(--grid-max-width) / var(--gallery-columns) - var(--gap, var(--_gap)) / (var(--gallery-columns) - 1) - var(--grid-gutter)) * var(--aspect-ratio));
}

.gallery-flex {
  flex-wrap: wrap;
}

.gallery-rows {
  flex-direction: column;
}

.gallery-grid, .gallery-masonry {
  --min: calc(calc(var(--grid-max-width) / calc(var(--gallery-columns, var(--col)) * 1.2)));
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--min), 100%), 1fr));
  gap: var(--gap);
}

.gallery-masonry {
  grid-template-rows: masonry;
  justify-content: center;
}

/* .slides > * {
  transition: height 0.25s;
}
.slides > * > * > * {
  width: 100%;
  margin-right: var(--gap);
} */
/* [loading="lazy"] {
  image-rendering: pixelated;
} */
.block-type-video iframe {
  aspect-ratio: var(--ratio, 16/9);
}
.block-type-video video:fullscreen {
  object-fit: contain !important;
}

.relative {
  position: relative;
}

:root {
  --parvus-transition-duration: 0.3s;
  --parvus-transition-timing-function: cubic-bezier(0.62, 0.16, 0.13, 1.01);
  --parvus-background-color: hsl(23deg 44% 96%);
  --parvus-color: hsl(228deg 24% 23%);
  --parvus-btn-background-color: hsl(228deg 24% 23%);
  --parvus-btn-color: hsl(0deg 0% 100%);
  --parvus-btn-hover-background-color: hsl(229deg 24% 33%);
  --parvus-btn-hover-color: hsl(0deg 0% 100%);
  --parvus-btn-disabled-background-color: hsl(229deg 24% 33% / 60%);
  --parvus-btn-disabled-color: hsl(0deg 0% 100%);
  --parvus-caption-background-color: transparent;
  --parvus-caption-color: hsl(228deg 24% 23%);
  --parvus-copyright-background-color: hsl(0deg 0% 100% / 80%);
  --parvus-copyright-color: hsl(228deg 24% 23%);
  --parvus-loading-error-background-color: hsl(0deg 0% 100%);
  --parvus-loading-error-color: hsl(228deg 24% 23%);
  --parvus-loader-background-color: hsl(23deg 40% 96%);
  --parvus-loader-color: hsl(228deg 24% 23%);
}

::view-transition-group(lightboximage) {
  animation-duration: var(--parvus-transition-duration);
  animation-timing-function: var(--parvus-transition-timing-function);
  z-index: 7;
}

::view-transition-group(toolbar) {
  z-index: 8;
}

body:has(.parvus[open]) {
  touch-action: none;
}

/**
 * Parvus trigger
 *
 */
.parvus-trigger:has(img) {
  display: block;
  position: relative;
}
.parvus-trigger:has(img) .parvus-zoom__indicator {
  align-items: center;
  background-color: var(--parvus-btn-background-color);
  color: var(--parvus-btn-color);
  display: flex;
  justify-content: center;
  padding: 0.5rem;
  position: absolute;
  inset-inline-end: 0.5rem;
  inset-block-start: 0.5rem;
}
.parvus-trigger:has(img) img {
  display: block;
}

/**
 * Parvus
 *
 */
.parvus {
  background-color: transparent;
  block-size: 100%;
  border: 0;
  box-sizing: border-box;
  color: var(--parvus-color);
  contain: strict;
  inline-size: 100%;
  inset: 0;
  margin: 0;
  max-block-size: unset;
  max-inline-size: unset;
  overflow: hidden;
  overscroll-behavior: contain;
  padding: 0;
  position: fixed;
}
.parvus::backdrop {
  display: none;
}
.parvus *, .parvus *::before, .parvus *::after {
  box-sizing: border-box;
}
.parvus__overlay {
  background-color: var(--parvus-background-color);
  color: var(--parvus-color);
  inset: 0;
  position: absolute;
}
.parvus__slider {
  inset: 0;
  position: absolute;
  transform: translateZ(0);
}
@media screen and (prefers-reduced-motion: no-preference) {
  .parvus__slider--animate:not(.parvus__slider--is-dragging) {
    transition: transform var(--parvus-transition-duration) var(--parvus-transition-timing-function);
    will-change: transform;
  }
}
.parvus__slider--is-draggable {
  cursor: grab;
  touch-action: pan-y pinch-zoom;
}
.parvus__slider--is-dragging {
  cursor: grabbing;
  touch-action: none;
}
.parvus__slide {
  block-size: 100%;
  contain: layout;
  display: grid;
  inline-size: 100%;
  padding-block: 1rem;
  padding-inline: 1rem;
  place-items: center;
}
.parvus__slide img {
  block-size: auto;
  display: block;
  inline-size: auto;
  margin-inline: auto;
  transform: translateZ(0);
}
.parvus__content {
  position: relative;
}
.parvus__content--error {
  background-color: var(--parvus-loading-error-background-color);
  color: var(--parvus-loading-error-color);
  padding-block: 0.5rem;
  padding-inline: 1rem;
}
.parvus__caption {
  background-color: var(--parvus-caption-background-color);
  color: var(--parvus-caption-color);
  padding-block-start: 0.5rem;
  text-align: start;
}
.parvus__copyright {
  background-color: var(--parvus-copyright-background-color);
  color: var(--parvus-copyright-color);
  inset-block-end: 0;
  inset-inline-end: 0;
  padding-inline: 0.25rem;
  position: absolute;
}
.parvus__loader {
  display: inline-block;
  block-size: 6.25rem;
  inset-inline-start: 50%;
  position: absolute;
  inset-block-start: 50%;
  transform: translate(-50%, -50%);
  inline-size: 6.25rem;
}
.parvus__loader::before {
  animation: spin 1s infinite linear;
  border-radius: 100%;
  border: 0.25rem solid var(--parvus-loader-background-color);
  border-block-start-color: var(--parvus-loader-color);
  content: "";
  inset: 0;
  position: absolute;
  z-index: 1;
}
.parvus__toolbar {
  align-items: center;
  display: flex;
  inset-block-start: 1rem;
  inset-inline: 1rem;
  justify-content: space-between;
  pointer-events: none;
  position: absolute;
  view-transition-name: toolbar;
  z-index: 8;
}
.parvus__toolbar > * {
  pointer-events: auto;
}
.parvus__controls {
  align-items: center;
  display: flex;
  gap: 0.5rem;
}
.parvus__btn {
  appearance: none;
  background-color: var(--parvus-btn-background-color);
  background-image: none;
  border-radius: 0;
  border: 0.0625rem solid transparent;
  color: var(--parvus-btn-color);
  cursor: pointer;
  display: flex;
  font: inherit;
  padding: 0.3125rem;
  position: relative;
  touch-action: manipulation;
  will-change: transform, opacity;
  z-index: 7;
}
.parvus__btn:hover, .parvus__btn:focus-visible {
  background-color: var(--parvus-btn-hover-background-color);
  color: var(--parvus-btn-hover-color);
}
.parvus__btn--previous {
  inset-inline-start: 0;
  position: absolute;
  inset-block-start: calc(50svh - 1rem);
  transform: translateY(-50%);
}
.parvus__btn--next {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: calc(50svh - 1rem);
  transform: translateY(-50%);
}
.parvus__btn svg {
  pointer-events: none;
}
.parvus__btn[aria-hidden=true] {
  display: none;
}
.parvus__btn[aria-disabled=true] {
  background-color: var(--parvus-btn-disabled-background-color);
  color: var(--parvus-btn-disabled-color);
}
.parvus__counter {
  position: relative;
  z-index: 7;
}
.parvus__counter[aria-hidden=true] {
  display: none;
}
@media screen and (prefers-reduced-motion: no-preference) {
  .parvus__overlay, .parvus__counter, .parvus__btn, .parvus__caption, .parvus__copyright {
    transition: transform var(--parvus-transition-duration) var(--parvus-transition-timing-function), opacity var(--parvus-transition-duration) var(--parvus-transition-timing-function);
    will-change: transform, opacity;
  }
  .parvus__copyright {
    transition-delay: var(--parvus-transition-duration);
  }
  .parvus--is-closing .parvus__copyright, .parvus--is-vertical-closing .parvus__copyright, .parvus--is-zooming .parvus__copyright {
    transition-delay: 0s;
    transition-duration: 0s;
  }
  .parvus--is-opening .parvus__overlay, .parvus--is-opening .parvus__counter, .parvus--is-opening .parvus__btn, .parvus--is-opening .parvus__caption, .parvus--is-opening .parvus__copyright, .parvus--is-closing .parvus__overlay, .parvus--is-closing .parvus__counter, .parvus--is-closing .parvus__btn, .parvus--is-closing .parvus__caption, .parvus--is-closing .parvus__copyright {
    opacity: 0;
  }
  .parvus--is-vertical-closing .parvus__counter, .parvus--is-vertical-closing .parvus__btn:not(.parvus__btn--previous, .parvus__btn--next), .parvus--is-zooming .parvus__counter, .parvus--is-zooming .parvus__btn:not(.parvus__btn--previous, .parvus__btn--next) {
    transform: translateY(-100%);
    opacity: 0;
  }
  .parvus--is-vertical-closing .parvus__btn--previous, .parvus--is-zooming .parvus__btn--previous {
    transform: translate(-100%, -50%);
    opacity: 0;
  }
  .parvus--is-vertical-closing .parvus__btn--next, .parvus--is-zooming .parvus__btn--next {
    transform: translate(100%, -50%);
    opacity: 0;
  }
  .parvus--is-vertical-closing .parvus__caption, .parvus--is-zooming .parvus__caption {
    transform: translateY(100%);
    opacity: 0;
  }
  .parvus--is-vertical-closing .parvus__copyright, .parvus--is-zooming .parvus__copyright {
    opacity: 0;
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@font-face {
  font-family: "Sans";
  font-weight: 300 700;
  font-style: normal;
  font-optical-sizing: auto;
  src: url("/assets/fonts/InterVariable.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Sans";
  font-weight: 300 700;
  font-style: italic;
  font-optical-sizing: auto;
  src: url("/assets/fonts/InterVariable-Italic.woff2") format("woff2-variations");
}
:is([class*=u-text-style-], h1, h2, h3, h4, h5, h6, p, blockquote) {
  display: flow-root;
}

:is([class*=u-text-style-], h1, h2, h3, h4, h5, h6, p, blockquote)::before {
  content: "";
  display: table;
  margin-bottom: calc(-0.5lh + 0.365em);
}

:is([class*=u-text-style-], h1, h2, h3, h4, h5, h6, p, blockquote)::after {
  content: "";
  display: table;
  margin-bottom: calc(-0.5lh + 0.365em);
}

:root {
  --font-sans: "Sans", var(--sans-stack);
  --font-serif: var(--serif-stack);
  --font-code: var(--mono-stack);
  --parvus-transition-duration: 0.5s;
  --parvus-transition-timing-function: cubic-bezier(0.62, 0.16, 0.13, 1.01);
  --parvus-background-color: hsl(0, 0%, 0%, 1);
  --parvus-color: var(--color-dark-text);
  --parvus-btn-background-color: transparent;
  --parvus-btn-color: var(--color-dark-text);
  --parvus-btn-hover-background-color: var(--color-white-030);
  --parvus-btn-hover-color: #ffffff;
  --parvus-btn-disabled-background-color: transparent;
  --parvus-btn-disabled-color: var(--color-neutral);
  --parvus-caption-background-color: transparent;
  --parvus-caption-color: var(--color-dark-text);
  --parvus-copyright-background-color: hsl(0deg 0% 100% / 80%);
  --parvus-copyright-color: hsl(228deg 24% 23%);
  --parvus-loading-error-background-color: hsl(0deg 0% 100%);
  --parvus-loading-error-color: hsl(228deg 24% 23%);
  --parvus-loader-background-color: var(--color-white-030);
  --parvus-loader-color: var(--color-dark-text);
}

.parvus {
  font-family: var(--font-sans);
}

.parvus__btn--previous, .parvus__btn--next {
  border-radius: 50%;
}

.parvus svg {
  fill: none;
}

.parvus-trigger:hover {
  cursor: zoom-in;
}

.parvus__slide:hover {
  cursor: zoom-out;
}

.parvus__content:hover {
  cursor: grab;
}

.parvus__counter {
  color: var(--color-neutral);
}

.parvus__caption {
  padding-block-start: var(--spc-s);
  padding-block-end: var(--spc-2xs);
  font-size: var(--step--1);
  font-family: var(--font-serif);
}

.lazyload,
.lazyloading {
  opacity: 0;
}

.lazyloaded {
  opacity: 1;
  transition-property: opacity;
  transition-duration: 1s;
  transition-timing-function: ease-in-out;
  transition-delay: calc(50ms + 200ms * var(--n, 0));
}

.image-placeholder {
  position: absolute;
  width: 100%;
  opacity: 1;
  transition-property: opacity;
  transition-duration: 1s;
  transition-timing-function: ease-out;
  transition-delay: calc(200ms * var(--n, 0) * 0.75);
}
@starting-style {
  .image-placeholder {
    opacity: 0;
  }
}

picture {
  position: relative;
  z-index: 0;
}

.blocks img {
  width: 100%;
}

.gallery svg {
  width: 100%;
}

.text-align--left {
  text-align: left;
  margin-inline-end: auto;
}

.text-align--right {
  text-align: right;
  margin-inline-start: auto;
}

.text-align--center {
  text-align: center;
  margin-inline: auto;
}

[data-block-type=video] iframe {
  inline-size: 100%;
}

/*# sourceMappingURL=base.css.map */