@charset "UTF-8";
/* CSS Document */

:root {
  /* colours - base palette */
  --darkGreen: 123, 64%, 18%;
  --lime: 76, 72%, 44%;
  --magenta: 327, 100%, 45%;
  --pink: 333, 76%, 79%;
  --white: 0, 0%, 100%;

  --fs-200: clamp(0.64rem, 0.5825rem + 0.2807vw, 0.8rem);
  --fs-300: clamp(0.8rem, 0.7281rem + 0.3509vw, 1rem);
  --fs-400: clamp(1rem, 0.9101rem + 0.4386vw, 1.25rem);
  --fs-500: clamp(1.25rem, 1.1376rem + 0.5482vw, 1.5625rem);
  --fs-600: clamp(1.5625rem, 1.422rem + 0.6853vw, 1.9531rem);
  --fs-700: clamp(1.9531rem, 1.7775rem + 0.8566vw, 2.4414rem);
  --fs-800: clamp(2.4414rem, 2.2219rem + 1.0708vw, 3.0518rem);
  --fs-900: clamp(3.0518rem, 2.7774rem + 1.3385vw, 3.8147rem);

  --space-3xs: clamp(0.25rem, 0.2275rem + 0.1096vw, 0.3125rem);
  --space-2xs: clamp(0.5rem, 0.455rem + 0.2193vw, 0.625rem);
  --space-xs: clamp(0.75rem, 0.6826rem + 0.3289vw, 0.9375rem);
  --space-s: clamp(1rem, 0.9101rem + 0.4386vw, 1.25rem);
  --space-m: clamp(1.5rem, 1.3651rem + 0.6579vw, 1.875rem);
  --space-l: clamp(2rem, 1.8202rem + 0.8772vw, 2.5rem);
  --space-xl: clamp(3rem, 2.7303rem + 1.3158vw, 3.75rem);
  --space-2xl: clamp(4rem, 3.6404rem + 1.7544vw, 5rem);
  --space-3xl: clamp(6rem, 5.4605rem + 2.6316vw, 7.5rem);

  --grid-max-width: 80rem;
  --grid-gutter: var(--space-s-l, clamp(1rem, 0.4605rem + 2.6316vw, 2.5rem));
  --grid-columns: 12;
}

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

img,
picture {
  max-width: 100%;
  display: block;
  height: auto;
}

body {
  font-family: "barlow", sans-serif;
  font-size: var(--fs-400);
  font-weight: 400;
  background-color: hsl(var(--lime));
  color: hsl(var(--darkGreen));
}

h1,
h2,
h3 {
  margin: 0;
}

/*.white {
  color: hsl(var(--white));
}*/

.fs-900 {
  font-weight: normal;
  font-size: var(--fs-900);
  line-height: 1.2;
  color: hsl(var(--subtle));
  max-width: 25ch;
  margin-block: 0.5rem;
}

.fs-800 {
  font-weight: normal;
  font-size: var(--fs-800);
  line-height: 1.2;
  color: hsl(var(--subtle));
  max-width: 25ch;
  margin-block: 0.5rem;
}
.fs-700 {
  font-weight: normal;
  font-size: var(--fs-700);
  line-height: 1.3;
  max-width: 30ch;
  margin-block: 0.5rem;
}

.fs-600 {
  font-weight: normal;
  font-size: var(--fs-600);
  line-height: 1.4;
  max-width: 40ch;
}

.fs-500 {
  font-size: var(--fs-500);
  line-height: 1.5;
  max-width: 60ch;
}

.fs-400,
p,
a {
  font-size: var(--fs-400);
  line-height: 1.6;
  max-width: 60ch;
}

.fs-300 {
  font-size: var(--fs-300);
  line-height: 1;
}

.fs-200 {
  font-size: var(--fs-200);
  line-height: 1;
}

.subheading {
  /**/
  font-style: italic;
}

a {
  color: hsl(var(--darkGreen));
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3rem;
  text-decoration-color: hsl(var(--neonYellow));
}

a:hover {
  opacity: 0.6;
}

.flow > * + * {
  margin-top: var(--space-s);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0 var(--grid-gutter);
  max-width: var(--grid-max-width);
  margin-inline: auto;
  padding: 1rem;
  margin-block: 3rem;
}

.grid > * {
  grid-column: span 12;
}

header.grid {
  margin-top: 0;
}

header .logo {
  display: block;
  grid-column: span 9;
  margin-top: 3rem;
}

header .logo img {
  width: 100%;
  max-width: 400px;
}

header .est {
  grid-column: span 3;
  justify-self: end;
  color: hsl(var(--white));
}

/*footer {
  color: hsl(var(--white));
}*/