:root {
	/* 	Fluid type scale calculator: Calculated font sizes
		@link https://utopia.fyi/type/calculator?c=320,18,1.2,1920,32,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

	/* Step -2      : 12.5px → 20.48px */
	 --step--2      : clamp(0.7813rem, 0.6815rem + 0.4988vw, 1.28rem);
	/* Step -1      : 15px → 25.6px */
	 --step--1      : clamp(0.9375rem, 0.805rem + 0.6625vw, 1.6rem);
	/*  Step 0      : 18px → 32px */
	  --step-0      : clamp(1.125rem, 0.95rem + 0.875vw, 2rem);
	/*  Step 1      : 21.6px → 40px */
	  --step-1      : clamp(1.35rem, 1.12rem + 1.15vw, 2.5rem);
	/*  Step 2      : 25.92px → 50px */
	  --step-2      : clamp(1.62rem, 1.319rem + 1.505vw, 3.125rem);
	/*  Step 3      : 31.104px → 62.5px */
	  --step-3      : clamp(1.944rem, 1.5516rem + 1.9623vw, 3.9063rem);
	/*  Step 4      : 37.3248px → 78.125px */
	  --step-4      : clamp(2.3328rem, 1.8228rem + 2.55vw, 4.8828rem);
	/*  Step 5      : 44.7898px → 97.6563px */
	  --step-5      : clamp(2.7994rem, 2.1385rem + 3.3042vw, 6.1035rem);



	/* 	Fluid Space Calculator: Individual space values
		@link https://utopia.fyi/space/calculator?c=320,18,1.2,1920,32,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

	/* Space 3xs    : 5px → 8px */
	 --space-3xs    : clamp(0.3125rem, 0.275rem + 0.1875vw, 0.5rem);
	/* Space 2xs    : 9px → 16px */
	 --space-2xs    : clamp(0.5625rem, 0.475rem + 0.4375vw, 1rem);
	/* Space xs     : 14px → 24px */
	 --space-xs     : clamp(0.875rem, 0.75rem + 0.625vw, 1.5rem);
	/* Space s      : 18px → 32px */
	 --space-s      : clamp(1.125rem, 0.95rem + 0.875vw, 2rem);
	/* Space m      : 27px → 48px */
	 --space-m      : clamp(1.6875rem, 1.425rem + 1.3125vw, 3rem);
	/* Space l      : 36px → 64px */
	 --space-l      : clamp(2.25rem, 1.9rem + 1.75vw, 4rem);
	/* Space xl     : 54px → 96px */
	 --space-xl     : clamp(3.375rem, 2.85rem + 2.625vw, 6rem);
	/* Space 2xl    : 72px → 128px */
	 --space-2xl    : clamp(4.5rem, 3.8rem + 3.5vw, 8rem);
	/* Space 3xl    : 108px → 192px */
	 --space-3xl    : clamp(6.75rem, 5.7rem + 5.25vw, 12rem);

	/* One-up pairs */
	/* Space 3xs-2xs: 5px → 16px */
	 --space-3xs-2xs: clamp(0.3125rem, 0.175rem + 0.6875vw, 1rem);
	/* Space 2xs-xs : 9px → 24px */
	 --space-2xs-xs : clamp(0.5625rem, 0.375rem + 0.9375vw, 1.5rem);
	/* Space xs-s   : 14px → 32px */
	 --space-xs-s   : clamp(0.875rem, 0.65rem + 1.125vw, 2rem);
	/* Space s-m    : 18px → 48px */
	 --space-s-m    : clamp(1.125rem, 0.75rem + 1.875vw, 3rem);
	/* Space m-l    : 27px → 64px */
	 --space-m-l    : clamp(1.6875rem, 1.225rem + 2.3125vw, 4rem);
	/* Space l-xl   : 36px → 96px */
	 --space-l-xl   : clamp(2.25rem, 1.5rem + 3.75vw, 6rem);
	/* Space xl-2xl : 54px → 128px */
	 --space-xl-2xl : clamp(3.375rem, 2.45rem + 4.625vw, 8rem);
	/* Space 2xl-3xl: 72px → 192px */
	 --space-2xl-3xl: clamp(4.5rem, 3rem + 7.5vw, 12rem);

	/* Custom pairs */
	/* Space s-l    : 18px → 64px */
	 --space-s-l    : clamp(1.125rem, 0.55rem + 2.875vw, 4rem);
}



/*	Fluid Grid Calculator: 
	@link https://utopia.fyi/grid/calculator?c=320,18,1.2,1920,32,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
	--grid-max-width: 124.00rem;
	--grid-gutter   : var(--space-s-l, clamp(1.125rem, 0.5721rem + 2.7644vw, 4rem));
	--grid-columns : 12;
}

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

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

html {
	text-size-adjust: none;
}

input,
button,
textarea,
select {
	font-family: inherit;
	font-size: inherit;
}



/* Global defaults */

body {
	text-decoration-skip-ink: auto;
	font-optical-sizing: auto;
	font-variant-ligatures: common-ligatures no-discretionary-ligatures no-historical-ligatures contextual;
	font-kerning: normal;
}

button, input, label {
	line-height: 1.1;
}

/* Headings */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-weight: 300;
	font-stretch: condensed;
	font-size-adjust: 0.514;
	font-variant-numeric: lining-nums;
	text-wrap: balance;
}

h1 {
	/* font-variant-ligatures: discretionary-ligatures; */
	font-size-adjust: 0.521; /* check if this changes with an optical sizing axis */
}

h1.uppercase {
	font-variant-caps: titling-caps;
}

h1, .h1 {
	font-size: var(--step-4);
	font-weight: 400;
}
h2, .h2 {
	font-size: var(--step-2);
}
h3, .h3 {
	font-size: var(--step-1);
}
h4, .h4 {
	font-size: var(--step-1);
}
h5, .h5 {
	font-size: var(--step-0);
}

/* spacing */
.sb-xs { padding-block-start: var(--space-xs); }
.sb-s  { padding-block-start: var(--space-s); }
.sb-m  { padding-block-start: var(--space-m); }
.sb-l  { padding-block-start: var(--space-l); }
.sb-xl { padding-block-start: var(--space-xl); }

.sa-xs { padding-block-end: var(--space-xs); }
.sa-s  { padding-block-end: var(--space-s); }
.sa-m  { padding-block-end: var(--space-m); }
.sa-l  { padding-block-end: var(--space-l); }
.sa-xl { padding-block-end: var(--space-xl); }

/* OpenType utility classes */

.dlig           { font-variant-ligatures: discretionary-ligatures; }
.hlig           { font-variant-ligatures: historical-ligatures; }
.dlig.hlig      { font-variant-ligatures: discretionary-ligatures historical-ligatures; }
.pnum           { font-variant-numeric: proportional-nums; }
.tnum           { font-variant-numeric: tabular-nums;    }
.lnum           { font-variant-numeric: lining-nums; }
.onum           { font-variant-numeric: oldstyle-nums; }
.zero           { font-variant-numeric: slashed-zero; }
.pnum.zero      { font-variant-numeric: proportional-nums slashed-zero; }
.tnum.zero      { font-variant-numeric: tabular-nums slashed-zero; }
.onum.zero      { font-variant-numeric: oldstyle-nums slashed-zero; }
.lnum.zero      { font-variant-numeric: lining-nums slashed-zero; }
.tnum.lnum.zero { font-variant-numeric: tabular-nums lining-nums slashed-zero; }
.frac           { font-variant-numeric: diagonal-fractions; }
.afrc           { font-variant-numeric: stacked-fractions; }
.ordn           { font-variant-numeric: ordinal; }
.smcp           { font-variant-caps: small-caps; }
.hist           { font-variant-alternates: historical-forms; }

.ss01           { font-variant-alternates: styleset(cursive); }
.ss02           { font-variant-alternates: styleset(swoopy); }

.cv01           { font-variant-alternates: character-variant(ampersand); }
.cv02           { font-variant-alternates: character-variant(capital-q); }

.salt1          { font-variant-alternates: stylistic(two-story-g); }
.salt2          { font-variant-alternates: stylistic(straight-y); }

.swsh1          { font-variant-alternates: swash(swishy); }
.swsh2          { font-variant-alternates: swash(flowing); }

.ornm1          { font-variant-alternates: ornaments(clover); }
.ornm2          { font-variant-alternates: ornaments(fleuron); }

.nalt1          { font-variant-alternates: annotation(circled); }
.nalt2          { font-variant-alternates: annotation(boxed); }


:root {
	--opentype-case: off;
	--opentype-sinf: off;
}

.case { --opentype-case: on; }
.sinf { --opentype-sinf: on; }

* {
	font-feature-settings: "case" var(--opentype-case, off), "sinf" var(--opentype-sinf, off);
}


/* Generic helper classes */

.centered {
	text-align: center;
	text-wrap: balance;
}

.uppercase {
	text-transform: uppercase;
	--opentype-case: on;
}

.smallcaps {
	font-variant-caps: all-small-caps;
	font-variant-numeric: oldstyle-nums;
}


/* Prose styling defaults */

.prose {
	text-wrap: pretty;
	font-variant-numeric: oldstyle-nums proportional-nums;
	font-size-adjust: 0.507;
}

strong, b, th {
	font-weight: 500;
	font-size-adjust: 0.514; /* Check for the different weights you may be using */
}


/* Sup and sub */

@supports ( font-variant-position: sub ) {
	sub, .sub {
		vertical-align: baseline;
		font-size: 100%;
		line-height: inherit;
		font-variant-position: sub;
	}
}
@supports ( font-variant-position: super ) {
	sup, .sup {
		vertical-align: baseline;
		font-size: 100%;
		line-height: inherit;
		font-variant-position: super;
	}
}

.chemical {
	--opentype-sinf: on;
}

/* Tables, times and maths */

td, math, time[datetime*=":"] {
	font-variant-numeric: tabular-nums lining-nums slashed-zero;
}


/* Quotes */

/* :lang(en) > * { quotes: '“' '”' '‘' '’'  ; } /* “Generic English ‘style’” */
:lang(fr) > * { quotes: '«\00202F' '\00202F»' '“' '”'; } /* « French “style” » */
:lang(en-GB) > * { quotes: '‘' '’' '“' '”' ; } /* ‘British “style”’ */

q::before { content: open-quote }
q::after  { content: close-quote }

.quoted p:first-of-type::before {
	content: '“';
}
.quoted p:last-of-type::after  {
	content: '”';
}

.quoted p:first-of-type::before {
	margin-inline-start: -0.87ch;
}
.quoted p {
	hanging-punctuation: first last;
}
@supports(hanging-punctuation: first last) {
	.quoted p:first-of-type::before {
		margin-inline-start: 0;
	}
}


/* Hyphenation - Remember to set lang */

.prose {
	hyphens: auto;
	hyphenate-limit-chars: 7 4 3;
	hyphenate-limit-lines: 2;
	hyphenate-limit-zone: 8%;
	hyphenate-limit-last: always;
}

.prose pre, .prose code, .prose var, .prose samp, .prose kbd,
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
	-webkit-hyphens: manual;
	hyphens: manual;
}


/* Dark mode and inverted text */

:root {
	--vf-grad: 0;
}

@media (prefers-color-scheme: dark) {
	:root {
		--vf-grad: -100; /* Grade is font-specific. */
	}
}

.inverted {
	--vf-grad: -100;
}

* {
	font-variation-settings: "GRAD" var(--vf-grad, 0);
}