@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

:root {
  --container-max-width: 1024px;
  --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)
  );
  --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.8deg 100% 29%);
  --theme-secondary: var(--cheese);
  --theme-secondary--hover: hsl(38.8deg 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 {
    /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
    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;
  view-transition-name: --ju-body;
}

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) / 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-size: clamp(
    var(--font-size-min),
    var(--font-size-variable),
    var(--font-size-max)
  );
  font-weight: 700;
}

.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;

  max-inline-size: 55ch;
  margin: 0;
  font-size: clamp(
    var(--min-font-size),
    var(--font-size-variable),
    var(--max-font-size)
  );
  font-weight: 100;
  line-height: calc(1em + 1rem);
}

.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;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.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) {
  max-inline-size: 55ch;
  margin-inline: 0;
}

.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 {
  text-transform: uppercase;
  letter-spacing: 2px;
}

/*
 * Blocks
 */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.block :where(.video-embed__wrapper, .image) {
  margin-block: calc(var(--spacing) * 2);
  margin-inline: calc(var(--block-padding-inline--start) * -1)
    calc(var(--block-padding-inline--end) * -1);
  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:is(.layout--left-aligned, .layout--right-aligned) {
    width: calc(50% - var(--spacing));
    margin-inline: 0;
  }

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

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

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

    @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;

  position: relative;
  z-index: 1;
  display: grid;
  gap: 1rem;
  max-inline-size: 100%;
  padding-block: 4rem 2rem;
  padding-inline: 2rem;
  margin-inline: 1rem;
  line-height: 1.75;
  color: var(--midnight-green);
  background: white;
}

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

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

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

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

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

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

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

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;
  gap: 4rem 5rem;
  place-items: center center;
}

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

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