@charset "UTF-8";
:root {
  --amazon: hsl(149deg 28% 34%);
  --anti-flash-white: hsl(45deg 15% 95%);
  --anti-flash-white--dark: color-mix(
    in oklch,
    var(--anti-flash-white) 30%,
    var(--black)
  );
  --black: hsl(0 0% 0%);
  --british-racing-green: hsl(164deg 100% 13%);
  --celadon-blue: hsl(181deg 100% 36%);
  --geranium-lake: hsl(3deg 81% 54%);
  --japanese-indigo: hsl(191deg 45% 21%);
  --mellow-appricot: hsl(36deg 94% 69%);
  --non-photo-blue: hsl(178deg 57% 76%);
  --papaya-whip: hsl(40deg 100% 92%);
  --sea-serpent: hsl(180deg 46% 58%);
  --unbleached-silk: hsl(19deg 83% 89%);
  --white: hsl(0deg 0% 100%);

  --mnml--theme--primary: var(--japanese-indigo);
  --mnml--theme--primary--hover: hsl(192deg 45% 25%);
  --mnml--theme--primary--contrast-color: var(--white);
  --mnml--theme--secondary: hsl(180deg 46% 58%);
  --mnml--theme--secondary--hover: hsl(178deg 57% 72%);

  --mnml--body--text-color: var(--mnml--theme--primary);
  --mnml--body--font-family: canada-type-gibson, var(--mnml--font--sans);
  --mnml--headers--font-family: var(--mnml--body--font-family);
  --mnml--container--max-inline-size: 64rem;
  --mnml--focus-ring--color: var(--mnml--theme--secondary);
}

@media (prefers-reduced-data: reduce) {
  :root {
    --mnml--body--font-family: var(--mnml--font--sans);
  }
}

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

body {
  max-inline-size: 100vw;
  overflow-x: hidden;
  font-weight: 100;
}

svg {
  fill: currentColor;
}

picture {
  display: flow-root;
}

hr {
  margin-block: var(--mnml--spacing);
  border-top: 1pt solid var(--rule-color, var(--mnml--theme--primary));
}

form {
  --input-border-color: var(--mnml--theme--primary);
  --input-border-color--focus: var(--mnml--theme--primary);
  --input-radius: 0;
}

.container {
  padding-inline: var(--block-padding-inline);
}

:where(.site-header, .site-main, .site-footer) {
  padding-block: min(var(--mnml--spacing), 2vh);
}

:where(button, .button) {
  --button-radius: 0;

  border-width: 1pt;
  line-height: 1;
  letter-spacing: 1pt;
  text-transform: uppercase;
}

h2,
.block__label {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 1pt;
  text-transform: uppercase;
}

main {
  padding-block-start: 2rem;
  padding-block-end: 3rem;
}

main:has(iz-page-cta[touches-footer]:last-child) {
  padding-block-end: 0;
}

main:has(> .block:only-child) {
  padding-block: 0;
}

@supports not selector(:has(+ *)) {
  .has-cta main {
    padding-block-end: 0;
  }
}

.page__title {
  margin: 0;
  font-weight: 700;
  font-size: clamp(1.5rem, 5vw, 3.5rem);
}

.clamped-dek,
.clamped-lede {
  --min-font-size: 1.125rem;
  --max-font-size: 1.5rem;

  margin: 0;
  max-width: 55ch;
  font-size: clamp(var(--min-font-size), 0.9545rem + 0.8523vw, var(--max-font-size));
}
.page__title + .clamped-dek,
.page__title + .clamped-lede {
  margin-block-start: 0.75rem;
}

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

iz-sanity-content {
  container-name: sanity-content;
  container-type: inline-size;
}

.block > iz-sanity-content {
  margin-inline: calc(-1 * var(--block-padding-inline));
  padding-inline: var(--block-padding-inline);
  animation-name: none;

  > * {
    @supports (animation-timeline: view()) {
      animation-name: --iz-block-fade-in;
      animation-duration: var(--mnml--animation-duration);
      animation-timing-function: var(--mnml--timing-function--smooth);
      animation-fill-mode: forwards;
      animation-timeline: view();
      transform-origin: center;
    }
  }
}

:where(.prose, @ity-content) {
  font-size: 1.25rem;
}

:where(.prose, iz-sanity-content) :is(p, ul, ol, blockquote) {
  margin-inline: 0;
  max-width: 55ch;
  font-size: clamp(1rem, 0.858rem + 0.7102vw, 1.3125rem);
  line-height: 1.57;
}

:where(.clamped-dek, .clamped-lede, .page__dek, .page__lede)
  :where(.prose, iz-sanity-content)
  :is(p, ul, ol, blockquote) {
  font-size: inherit;
}

:where(.prose, iz-sanity-content) :is(p, ul, ol):empty {
  display: none;
}

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

@keyframes toast-appear {
  from {
    transform: translateY(1rem);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes toast-disappear {
  from {
    scale: 1;
    opacity: 1;
  }
  to {
    scale: 0;
    opacity: 0;
  }
}

.toaster {
  display: grid;
  position: fixed;
  bottom: 1rem;
  gap: 1rem;
  z-index: 100;
  inset-inline-end: 1rem;
  max-width: 20rem;
}

.toaster .toast {
  animation-duration: var(--mnml--animation-duration);
  animation-timing-function: ease-out;
  animation-iteration-count: 1;
  animation-name: toast-appear;
  box-shadow:
    rgba(0, 0, 0, 0.2) 0 0.1875rem 0.3125rem -0.0625rem,
    rgba(0, 0, 0, 0.14) 0 0.375rem 0.625rem 0,
    rgba(0, 0, 0, 0.12) 0 0.0625rem 1.125em 0;
  border-radius: 0.25rem;
  padding: 1rem;
  color: white;
  font-weight: bolder;
}

.toaster .toast.info {
  background-color: var(--celadon-blue);
}

.toaster .toast.success {
  background-color: var(--british-racing-green);
}

.toaster .toast.error {
  background-color: var(--geranium-lake);
}

.toaster .toast.warning {
  background-color: var(--mellow-appricot);
  color: var(--mnml--body--text-color);
}

.toaster .toast.removing {
  animation-name: toast-disappear;
}

:root {
  --block-padding-inline: clamp(0.5rem, 5vw, 2rem);
  --block-padding-block: clamp(
    var(--mnml--spacing),
    5vh,
    calc(var(--mnml--spacing) * 3)
  );
}

.block {
  position: relative;
  content-visibility: auto;
  z-index: 1;
  /* margin-inline: calc(var(--block-padding-inline) * -1); */
  padding-inline: var(--block-padding-inline);
  padding-block: var(--block-padding-block);
  container-name: block;
  container-type: inline-size;

  &:not([data-fade="false"]) > * {
    @supports (animation-timeline: view()) {
      animation-name: --iz-block-fade-in;
      animation-duration: var(--mnml--animation-duration);
      animation-timing-function: var(--mnml--timing-function--smooth);
      animation-fill-mode: forwards;
      animation-timeline: view();
      transform-origin: center;
    }
  }
}

.block--amazon {
  background-color: var(--amazon);
  color: #fff;
}

.block--anti-flash-white {
  background-color: var(--anti-flash-white);
  color: var(--mnml--theme--primary);
}

[data-theme="dark"] .block--anti-flash-white {
  @supports (color: color-mix(in oklch, white, black)) {
    --__background-color: var(--anti-flash-white--dark);

    background-color: var(--__background-color);
    color: color-mix(in oklch, var(--white) 95%, var(--__background-color));
  }
}

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

.block--british-racing-green {
  background-color: var(--british-racing-green);
  color: #fff;
}

.block--celadon-blue {
  background-color: var(--celadon-blue);
  color: #1d434c;
}

.block--geranium-lake {
  background-color: var(--geranium-lake);
  color: #fff;
}

.block--japanese-indigo {
  background-color: var(--japanese-indigo);
  color: #fff;
}

.block--mellow-appricot {
  background-color: var(--mellow-appricot);
  color: #000;
}

.block--non-photo-blue {
  background-color: var(--non-photo-blue);
  color: #000;
}

.block--papaya-whip {
  background-color: var(--papaya-whip);
  color: #1d434c;
}

.block--sea-serpent {
  background-color: var(--sea-serpent);
  color: #1d434c;
}

.block--theme-primary {
  background-color: var(--mnml--theme--primary);
  color: #fff;
}

.block--theme-secondary {
  background-color: var(--mnml--theme--secondary);
  color: #1d434c;
}

.block--unbleached-silk {
  background-color: var(--unbleached-silk);
  color: #1d434c;
}

.block--white {
  background-color: var(--white);
  color: #1d434c;
}

[data-theme="dark"] .block--white {
  @supports (color: color-mix(in oklch, white, black)) {
    --__background-color: color-mix(in oklch, var(--white) 20%, var(--black));
    background-color: var(--__background-color);
    color: color-mix(in oklch, var(--white) 95%, var(--__background-color));
  }
}

.block--amazon + .block--amazon,
.block--amazon + iz-content-blocks > .block--amazon:first-child,
.block--anti-flash-white + .block--anti-flash-white,
.block--anti-flash-white + iz-content-blocks > .block--anti-flash-white:first-child,
.block--black + .block--black,
.block--black + iz-content-blocks > .block--black:first-child,
.block--british-racing-green
  + iz-content-blocks
  > .block--british-racing-green:first-child,
.block--british-racing-green + .block--british-racing-green,
.block--celadon-blue + .block--celadon-blue,
.block--celadon-blue + iz-content-blocks > .block--celadon-blue:first-child,
.block--geranium-lake + .block--geranium-lake,
.block--geranium-lake + iz-content-blocks > .block--geranium-lake:first-child,
.block--japanese-indigo + .block--japanese-indigo,
.block--japanese-indigo + iz-content-blocks > .block--japanese-indigo:first-child,
.block--mellow-appricot + .block--mellow-appricot,
.block--mellow-appricot + iz-content-blocks > .block--mellow-appricot:first-child,
.block--non-photo-blue + .block--non-photo-blue,
.block--non-photo-blue + iz-content-blocks > .block--non-photo-blue:first-child,
.block--papaya-whip + .block--papaya-whip,
.block--papaya-whip + iz-content-blocks > .block--papaya-whip:first-child,
.block--sea-serpent + .block--sea-serpent,
.block--sea-serpent + iz-content-blocks > .block--sea-serpent:first-child,
.block--theme-primary + .block--theme-primary,
.block--theme-primary + iz-content-blocks > .block--theme-primary:first-child,
.block--theme-secondary + .block--theme-secondary,
.block--theme-secondary + iz-content-blocks > .block--theme-secondary:first-child,
.block--unbleached-silk + .block--unbleached-silk,
.block--unbleached-silk + iz-content-blocks > .block--unbleached-silk:first-child,
.block--white + .block--white,
.block--white + iz-content-blocks > .block--white:first-child {
  margin-block-start: -1pt;
  padding-block-start: 1pt;
}

.block iz-video-card,
.block .image {
  margin-inline: 0;
  margin-block: var(--mnml--spacing--double);
  text-align: center;
}

.block > iz-sanity-content .image[data-layout="full-bleed"] {
  margin-inline: calc(-1 * var(--block-padding-inline));
}

.block > iz-sanity-content:last-child .image[data-layout="full-bleed"]:last-child {
  margin-block-end: calc(-1 * var(--block-padding-block));
}

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

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

@media (min-width: 48rem) {
  .block .image:is(.layout--left-aligned, .layout--right-aligned) {
    margin-inline: 0;
    width: calc(50% - var(--mnml--spacing));
  }

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

  @supports not (float: inline-start) {
    .block .image.layout--left-aligned {
      float: left;
    }
  }

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

  @supports not (float: inline-end) {
    .block .image.layout--right-aligned {
      float: right;
    }
  }
}

.block h3 {
  margin-inline: 0;
  margin-block-start: 0;
  margin-block-end: 1rem;
  font-weight: 700;
  font-size: clamp(1.5rem, 5vw, 3.5rem);
}

.block blockquote {
  display: grid;
  position: relative;
  gap: 1rem;
  z-index: 1;
  margin-inline-start: 2rem;
  max-width: 55ch;
}

.block blockquote::before {
  position: absolute;
  top: 0;
  translate: -125% 0.6rem;
  inset-inline-start: 0;
  content: "“";
  font-weight: 700;
  font-size: 3rem;
}

.block blockquote > * {
  margin-block: 0;
}

.block blockquote cite {
  align-self: end;
  margin-inline-start: auto;
  font-style: italic;
}

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

.block--white + .block--white {
  border-top: 1pt solid transparent;
  padding-block-start: var(--block-padding-block);
}

.block--white + .block--white::before {
  position: absolute;
  translate: -50% 0;
  inset-block-start: 0;
  inset-inline-start: 50%;
  background-color: var(--mnml--theme--secondary);
  inline-size: 100%;
  max-inline-size: var(--mnml--container--max-inline-size);
  block-size: 1pt;
  content: "";
}

.text--upper {
  text-transform: uppercase;
}

.text--spread {
  letter-spacing: 1pt;
}

.no-js .requires-js {
  display: none;
}

figure.image {
  display: flow-root;
  margin-bottom: var(--mnml--spacing);
  line-height: 0;
}

figure.image figcaption {
  display: flow-root;
  padding-block-start: 1rem;
  font-size: 0.875rem;
  line-height: normal;
  text-align: start;
}

figure.image[data-layout="centered"][data-narrow="true"] figcaption {
  display: inline-block;
}

.block > :first-child,
iz-sanity-content > :first-child,
.block .image:first-child {
  margin-block-start: 0;
}

.block > :last-child,
iz-sanity-content > :last-child,
.block .image:last-child {
  margin-block-end: 0;
}

.mbe-4 {
  margin-block-end: 4rem;
}

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

@container sanity-content (width <= 12.5rem) {
  .image-grid {
    grid-template-columns: 1fr;
  }
}

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

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

/* https://css-tricks.com/full-bleed/ */
:where(.container--grid, .block, iz-sanity-content) {
  display: grid;
  grid-template-columns:
    1fr calc(
      min(var(--mnml--container--max-inline-size), 100%) -
        (2 * var(--block-padding-inline))
    )
    1fr;
}

:where(.container--grid, .block, iz-sanity-content) > * {
  grid-column: 2;
}

:where(.container--grid, .block) [data-layout="full-bleed"],
:where(.container--grid, .block) > iz-sanity-content {
  grid-column: 1 / -1;
}

:where(.container--grid, .block) [data-layout="full-bleed"] {
  margin-inline: 0;
}

:where(.container--grid, .block) [data-layout="full-bleed"] figcaption {
  margin-inline: auto;
  padding-inline: var(--block-padding-inline);
  max-inline-size: var(--mnml--container--max-inline-size);
}

:where(.clamped-dek, .clamped-lede, .page__dek, .page__lede) iz-sanity-content {
  display: flow-root;
}

.heroshot {
  display: flex;
  position: relative;
  flex-direction: column;
  z-index: 1;
  margin-block-end: 4rem;
  aspect-ratio: var(--aspect-ratio);
  inline-size: 100%;
  max-block-size: 60vh;
  line-height: 1;
}

.heroshot :where(picture, img) {
  display: flow-root;
}

.heroshot .pennant {
  position: absolute;
  inset-block-end: -2.75rem;
  inset-inline-start: 0;
}

.heroshot .pennant svg,
.heroshot .pennant:is(img),
.heroshot .pennant:is(svg) {
  inline-size: 8.9375rem;
  block-size: 5.5rem;
}

@media (max-width: 37.5rem) {
  .heroshot .pennant {
    bottom: -1.375rem;
  }

  .heroshot .pennant svg,
  .heroshot .pennant:is(img) {
    width: 4.46875rem;
    height: 2.75rem;
  }
}

.heroshot .heroshot__img {
  position: absolute;
  z-index: -1;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  animation-name: --iz-fade-in;
  animation-duration: calc(3 * var(--mnml--animation-duration));
  animation-timing-function: var(--mnml--timing-function--smooth);
  animation-fill-mode: forwards;
  transform-origin: top center;
}

.heroshot__caption {
  align-self: start;
  margin-block-start: auto;
  padding-inline: var(--block-padding-inline);
  padding-block-end: var(--block-padding-block);
  width: 100%;
  color: white;
  text-shadow: 0 0 1rem #000;
}

@keyframes --iz-block-fade-in {
  0% {
    opacity: 0;
    scale: 0.95;
    filter: grayscale(50%);
  }

  50% {
    opacity: 1;
    scale: 1;
    filter: grayscale(0%);
  }

  100% {
    opacity: 1;
    scale: 1;
  }
}

@keyframes --iz-block-fade-in--zoom-in {
  0% {
    opacity: 0;
    scale: 1.2;
  }

  50% {
    opacity: 1;
    scale: 1;
  }

  100% {
    opacity: 1;
    scale: 1;
  }
}

@keyframes --iz-fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}