/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

:root {
  --content-width: 54rem; /* 1080 = 54x20 */
  --copy-width: 50ch;

/* Text sizes *****************************************/
  /* smallest target screen is 360 https://mediag.com/blog/popular-screen-resolutions-designing-for-all/ */
  /* @link https://utopia.fyi/type/calculator?c=320,16,1.2,1240,20,1.414,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
  /* Step -2: 10.08px → 13.8px */
  --step--2: clamp(0.63rem, calc(0.72rem + -0.12vw), 0.69rem);
  /* Step -1: 13.33px → 14.14px */
  --step--1: clamp(0.83rem, calc(0.82rem + 0.09vw), 0.88rem);
  /* Step 0: 16.00px → 20.00px */
  --step-0: clamp(1.00rem, calc(0.91rem + 0.43vw), 1.25rem);
  /* Step 1: 19.20px → 28.28px */
  --step-1: clamp(1.20rem, calc(1.00rem + 0.99vw), 1.77rem);
  /* Step 2: 23.04px → 39.99px */
  --step-2: clamp(1.44rem, calc(1.07rem + 1.84vw), 2.50rem);
  /* Step 3: 27.65px → 56.54px */
  --step-3: clamp(1.73rem, calc(1.10rem + 3.14vw), 3.53rem);
  /* Step 4: 33.18px → 79.95px */
  /* --step-4: clamp(2.07rem, calc(1.06rem + 5.08vw), 5.00rem); */
  /* Step 5: 39.81px → 113.05px */
  /* --step-5: clamp(2.49rem, calc(0.90rem + 7.96vw), 7.07rem); */

  /* Minor Third => Perfect Fourth */
  /* @link https://utopia.fyi/type/calculator?c=360,16,1.2,1240,20,1.333,3,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
  /* Step -2: 11.11px → 11.26px */
  /* --step--2: clamp(0.69rem, 0.69rem + 0.02vw, 0.70rem); */
  /* Step -1: 13.33px → 15.00px */
  /* --step--1: clamp(0.83rem, 0.79rem + 0.19vw, 0.94rem); */
  /* Step 0: 16.00px → 20.00px */
  /* --step-0: clamp(1.00rem, 0.90rem + 0.45vw, 1.25rem); */
  /* Step 1: 19.20px → 26.66px */
  /* --step-1: clamp(1.20rem, 1.01rem + 0.85vw, 1.67rem); */
  /* Step 2: 23.04px → 35.54px */
  /* --step-2: clamp(1.44rem, 1.12rem + 1.42vw, 2.22rem); */
  /* Step 3: 27.65px → 47.37px */
  /* --step-3: clamp(1.73rem, 1.22rem + 2.24vw, 2.96rem); */

  /* Spacing ********************************************/
  /* https://buildexcellentwebsit.es/ => https://www.youtube.com/watch?v=5uhIiI9Ld5M */
  /* @link https://utopia.fyi/space/calculator?c=360,16,1.2,1240,20,1.414,5,1,&s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,s-l&g=s,l,xl,12 */
  --space-3xs: clamp(0.25rem, calc(0.22rem + 0.11vw), 0.31rem);
  --space-2xs: clamp(0.50rem, calc(0.45rem + 0.23vw), 0.63rem);
  --space-xs: clamp(0.75rem, calc(0.67rem + 0.34vw), 0.94rem);
  --space-s: clamp(1.00rem, calc(0.90rem + 0.45vw), 1.25rem);
  --space-m: clamp(1.50rem, calc(1.35rem + 0.68vw), 1.88rem);
  --space-l: clamp(2.00rem, calc(1.80rem + 0.91vw), 2.50rem);
  --space-xl: clamp(3.00rem, calc(2.69rem + 1.36vw), 3.75rem);
  --space-2xl: clamp(4.00rem, calc(3.59rem + 1.82vw), 5.00rem);
  --space-3xl: clamp(6.00rem, calc(5.39rem + 2.73vw), 7.50rem);

  /* One-up pairs */
  --space-3xs-2xs: clamp(0.25rem, calc(0.10rem + 0.68vw), 0.63rem);
  --space-2xs-xs: clamp(0.50rem, calc(0.32rem + 0.80vw), 0.94rem);
  --space-xs-s: clamp(0.75rem, calc(0.55rem + 0.91vw), 1.25rem);
  --space-s-m: clamp(1.00rem, calc(0.64rem + 1.59vw), 1.88rem);
  --space-m-l: clamp(1.50rem, calc(1.09rem + 1.82vw), 2.50rem);
  --space-l-xl: clamp(2.00rem, calc(1.28rem + 3.18vw), 3.75rem);
  --space-xl-2xl: clamp(3.00rem, calc(2.18rem + 3.64vw), 5.00rem);
  --space-2xl-3xl: clamp(4.00rem, calc(2.57rem + 6.36vw), 7.50rem);

  /* Custom pairs */
  --space-s-l: clamp(1.00rem, calc(0.39rem + 2.73vw), 2.50rem);  /* Spacing roles */

  /* Spacing roles */
  --space-side: var(--space-s-m);

  /* Fonts *******************************************/
  --system-font-stack: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
  'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';

  --type-text-font: 'Inter V', var(--system-font-stack);

  --type-display-font: 'Inter V', var(--system-font-stack);
  --type-display-weight: 700;

  --type-weight: var(--theme-type-text-weight);
  --type-slant: 0;

  /* Theme stubbed until we get light/dark themes */
  --theme-accent-colour: #f0f;
  --theme-bg-colour: #fff;
  --theme-fg-colour: #330300;

}

@layer base {

* {
  font-family: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  accent-color: var(--theme-accent-colour);
}

html {
  font-family: var(--type-text-font);
  font-variation-settings: "wght" var(--type-weight), "slnt" var(--type-slant);
  font-size: var(--step-0);
  line-height: 1.5;

  /* See light.css and dark.css to which values are used */
  background: var(--theme-bg-colour);
  color: var(--theme-fg-colour);
}

/*
  universal box-sizing w/ inheritance
  https://css-tricks.com/box-sizing/#article-header-id-6
*/
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  transition: color var(--colour-scheme-anim-duration) var(--colour-scheme-anim-timing),
    background-color var(--colour-scheme-anim-duration) var(--colour-scheme-anim-timing);
}

h1,
h2,
h3 {
  line-height: 1.2;
  text-wrap: balance;
}

h1,
h2 {
  max-width: 20ch;
}

h1, h2, h3, h4, h5, h6 {
  --type-weight: var(--type-display-weight);
  /* WTF should it not use the declaration in html above? */
  font-variation-settings: "wght" var(--type-weight), "slnt" var(--type-slant);
}

h1 {
  font-size: var(--step-3)
}
h2 {
  font-size: var(--step-2)
}
h3 {
  font-size: var(--step-1)
}
h4 {
  font-size: var(--step-0)
}
}

@layer base {
/* Inter variable */
@font-face {
  font-family: 'Inter V';
  src: local('Inter V'), url("/assets/Inter.var-48ada4b7.woff2") format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

html {
  /*                     4          6          9          3          0          */
  font-feature-settings: "cv02" on, "cv03" on, "cv04" on, "cv09" on, "zero" on;
}
}

@layer layouts {
/*
  sticky footer with grid
*/
body {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    'header'
    'main'
    'footer';
}

header {
  grid-area: header;
}

main {
  grid-area: main;
}

footer {
  grid-area: footer;
}
}

@layer components {
.Header-content {
  display: grid;
  align-items: center;
  max-width: var(--content-width);
  height: var(--space-2xl-3xl);
  margin: auto;
}
}

@layer components {
.Logo svg {
  width: 200px;
  height: auto;
}
}