:root {
  --container-max-width: 1024px;

  --alabaster--hsl: 42.9 17.9% 92.4%;
  --alabaster: hsl(var(--alabaster--hsl));
  --blue--hsl: 231.5 90.8% 38.2%;
  --blue: hsl(var(--blue--hsl));
  --cheese--hsl: 38.8 99.2% 50.8%;
  --cheese: hsl(var(--cheese--hsl));
  --indigo--hsl: 221.9 60.3% 23.7%;
  --indigo: hsl(var(--indigo--hsl));
  --midnight-green--hsl: 191.8 100% 19%;
  --midnight-green: hsl(var(--midnight-green--hsl));
  --red--hsl: 356.6 100% 48.8%;
  --red: hsl(var(--red--hsl));
  --tiffany-blue--hsl: 181 100% 35.9%;
  --tiffany-blue: hsl(var(--tiffany-blue--hsl));

  --theme-primary: var(--midnight-green);
  --theme-primary--contrast-color: white;
  --theme-primary--hover: hsl(191.8 100% 29%);
  --theme-secondary: var(--cheese);
  --theme-secondary--hover: hsl(38.8 99.2% 60.8%);
  --theme-secondary--contrast-color: var(--theme-primary);
  --link-color: var(--theme-primary);
  --link-color--hover: var(--tiffany-blue);
  --link-color--visited: var(--theme-primary);
  --body-color: var(--midnight-green);

  --font-gibson: canada-type-gibson, var(--ui-font-sans);
  --body-font-family: var(--font-gibson);

  --headers-color: var(--theme-primary);
  --headers-font-family: var(--font-gibson);
  --headers-font-weight: 700;

  --button-padding-inline: 2rem;
  --button-radius: 0;
  --button-font-family: var(--font-gibson);
  --button-font-weight: 400;

  background: var(--alabaster);
}

@supports (font: -apple-system-body) {
  html {
    font: -apple-system-body; /* this lets us support dynamic type sizes and weights for folx who need larger type */
  }
}

body {
  container-type: inline-size;
  font-weight: 100;
}

form {
  --input-border-color: var(--theme-primary);
  --input-border-color--focus: var(--theme-primary);
  --input-radius: 0;
  --input-focus-ring: hsl(var(--midnight-green--hsl) / 0.95);
}

:where(a) {
  text-decoration-color: var(--tiffany-blue);
}

:where(button, .button) {
  gap: var(--button-gap, 0.5em);
  font-size: var(--button-font-size, 1rem);
  letter-spacing: 1px;
}

:where(button, .button) svg {
  width: 1em;
  height: 1em;
}

:where(a):not(.button) {
  transition-property: color, text-decoration-color;
}

:where(a:hover, a:focus-visible) {
  text-decoration-color: var(--tiffany-blue);
}

:where(a, button) svg {
  fill: currentColor;
}

main {
  padding-block: 0;
}

h1,
.page__title {
  --font-size-min: 2rem;
  --font-size-variable: 6vw;
  --font-size-max: 3.75rem;
  font-weight: 700;

  font-size: clamp(
    var(--font-size-min),
    var(--font-size-variable),
    var(--font-size-max)
  );
}

.page__title {
  margin: 0;
}

.clamped-dek,
.clamped-lede,
.prose p,
.prose h3,
h2,
.block__label,
.block blockquote:not(.twitter-tweet) {
  --min-font-size: 1.125rem;
  --font-size-variable: 3vw;
  --max-font-size: 1.5rem;
  margin: 0;
  max-inline-size: 55ch;
  font-weight: 100;

  font-size: clamp(
    var(--min-font-size),
    var(--font-size-variable),
    var(--max-font-size)
  );
  line-height: calc(1em + 1rem);
}

:where(.clamped-dek, .clamped-lede) p {
  line-height: inherit;
}

.prose p {
  margin-block-end: 1rem;
}

.prose p.text--center {
  margin-inline: auto;
}

h2,
.block__label,
.prose h3 {
  --headers-font-family: var(--ui-font-sans);
  --max-font-size: 1.25rem;

  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.prose h3 {
  --max-font-size: 1.125rem;

  text-transform: none;
}

.prose :where(ol, ul) {
  margin-block-end: 1rem;
}

.block > :is(h2, .block__label) {
  margin-block-end: 0;
}

.block > :is(h2, .block__label):first-child {
  margin-block-start: -6px;
}

b,
strong {
  font-weight: 400;
}

.page__title + :is(.clamped-dek, .clamped-lede) {
  margin-block-start: 0.75rem;
}

.clamped-lede {
  --max-font-size: 1.25rem;
}

.prose {
  font-size: 1.25rem;
}

.prose :is(p, ul, ol) {
  margin-inline: 0;
  max-inline-size: 55ch;
}

.prose :is(p, ul, ol):empty {
  display: none;
}

.prose :is(p, ul, ol):last-child,
.prose :is(ul, ol):last-child li:last-child {
  margin-block-end: 0;
}

.prose :is(ul, ol) {
  margin-inline-start: 1.5rem;
}

.prose > ul {
  list-style-type: "- ";
}

.prose :is(ul, ol) :is(ul, ol) {
  margin-block-start: 0.5rem;
}

.text--caps {
  letter-spacing: 2px;
  text-transform: uppercase;
}

/*
 * Blocks
 */

:root {
  --block-padding-inline--start: clamp(
    calc(var(--spacing) * 1),
    5vw,
    calc(var(--spacing) * 4.5)
  );
  --block-padding-inline--end: clamp(
    calc(var(--spacing) * 1),
    5vw,
    calc(var(--spacing) * 4.5)
  );
  --block-padding-block--start: clamp(
    calc(var(--spacing) * 2),
    5vw,
    calc(var(--spacing) * 4.5)
  );
  --block-padding-block--end: clamp(
    calc(var(--spacing) * 2),
    5vw,
    calc(var(--spacing) * 4.5)
  );
}

.block {
  display: flow-root;
  position: relative;
  content-visibility: auto;
  z-index: 1;
  margin-inline: -1rem;
  padding-inline-start: var(--block-padding-inline--start);
  padding-inline-end: var(--block-padding-inline--end);
  padding-block-start: var(--block-padding-block--start);
  padding-block-end: var(--block-padding-block--end);
}

.block--white + .block--white {
  --block-padding-block--start: 0;
}

.block--alabaster {
  background-color: var(--alabaster);
  color: var(--midnight-green);
}

.block--alabaster + .block--alabaster {
  --block-padding-block--start: 0;
}

.block--blue {
  --headers-color: white;

  background-color: var(--blue);
  color: white;
}

.block--blue + .block--blue {
  --block-padding-block--start: 0;
}

.block--cheese {
  background-color: var(--cheese);
  color: black;
}

.block--cheese + .block--cheese {
  --block-padding-block--start: 0;
}

.block--indigo {
  --headers-color: white;

  background-color: var(--indigo);
  color: white;
}

.block--indigo + .block--indigo {
  --block-padding-block--start: 0;
}

.block--midnight-green {
  --headers-color: white;

  background-color: var(--midnight-green);
  color: white;
}

.block--midnight-green + .block--midnight-green {
  --block-padding-block--start: 0;
}

.block--red {
  --headers-color: white;

  background-color: var(--red);
  color: white;
}

.block--red + .block--red {
  --block-padding-block--start: 0;
}

.block--tiffany-blue {
  --headers-color: white;

  background-color: var(--tiffany-blue);
  color: white;
}

.block--tiffany-blue + .block--tiffany-blue {
  --block-padding-block--start: 0;
}

.block :where(.video-embed__wrapper, .image) {
  margin-inline-start: calc(var(--block-padding-inline--start) * -1);
  margin-inline-end: calc(var(--block-padding-inline--end) * -1);
  margin-block: calc(var(--spacing) * 2);
  text-align: center;
}

@container (width < 768px) {
  .block .image[data-layout="centered"] {
    padding-inline: 1rem;
  }
}

.block .image img {
  display: block;
  margin-inline: auto;
}

.block .image img[data-layout="full-bleed"] {
  width: 100%;
}

@container (width >= 768px) {
  .block .image self:is(.layout--left-aligned, .layout--right-aligned) {
    margin-inline: 0;
    width: calc(50% - var(--spacing));
  }

  .block .image.layout--left-aligned {
    float: inline-start;
    margin-inline-end: var(--spacing-double);
    margin-block: 0;
  }

  @supports not (float: inline-start) {
    float: left;
  }

  .block .image.layout--right-aligned {
    float: inline-end;
    margin-inline-start: var(--spacing-double);
    margin-block: 0;
  }

  @supports not (float: inline-end) {
    float: right;
  }
}

.block > :first-child,
.block__content > :first-child {
  margin-block-start: 0;
}

.block > :last-child,
.block__content > :last-child {
  margin-block-end: 0;
}

.block blockquote:not(.twitter-tweet) {
  --max-font-size: 2rem;
  --font-size-variable: 3vw;
  display: grid;
  position: relative;
  gap: 1rem;
  z-index: 1;
  margin-inline: 1rem;

  background: white;
  padding-inline: 2rem;
  padding-block-start: 4rem;
  padding-block-end: 2rem;
  max-inline-size: 100%;
  color: var(--midnight-green);
  line-height: 1.75;
}

.block .block__label + .block__content > blockquote:not(.twitter-tweet):first-child {
  margin-block-start: 3rem;
}

.block blockquote:not(.twitter-tweet)::before {
  position: absolute;
  translate: -42px 0;
  inset-block-start: 0;
  inset-inline-start: 0;
  background: url("/il-pennant--blue.svg") no-repeat;
  background-size: contain;
  width: 122px;
  height: 73px;
  content: "";
}

@media (max-width: 600px) {
  .block blockquote:not(.twitter-tweet)::before {
    translate: -30px 0;
    scale: 0.9;
  }
}

@media (min-width: 600.5px) {
  .block blockquote:not(.twitter-tweet) {
    margin-inline: 2rem;
    padding-block-start: 6rem;
  }
}

.block blockquote:not(.twitter-tweet) > * {
  margin-block: 0;
}

.block blockquote:not(.twitter-tweet) cite {
  align-self: end;
  margin-inline-start: auto;
  font-style: italic;
}

.block blockquote:not(.twitter-tweet) + blockquote:not(.twitter-tweet) {
  margin-block-start: var(--spacing-double);
}

.block--white + .block--white {
  border-top: 1px solid var(--theme-secondary);
  padding-block-start: var(--block-padding-block--start);
}

img[data-display="block"] {
  display: block;
}

img[data-layout="centered"] {
  margin-inline: auto;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: auto;
  align-items: center;
  justify-items: center;
  gap: 4rem 5rem;
}

.block .image-grid {
  margin-block: 2rem;
}

.block .image-grid .image {
  margin: 0;
}