@charset "UTF-8";

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

:root {
  --anti-flash-white: oklch(0.9656 0.0041 106.48); /* #F4F4F1 */
  --anti-flash-white--dark: color-mix(
    in oklch,
    var(--anti-flash-white) 30%,
    var(--black)
  );
  --aurora-orange: oklch(0.686 0.1772 38.75); /* #F26B3D */
  --aztec-sky: oklch(0.7355 0.1229 219.36); /* #2FBBDE */
  --black: oklch(0 0 0); /* #000000 */
  --blushing-apricot: oklch(0.842 0.0811 40.63); /* #FABAA3 */
  --british-racing-green: oklch(0.3377 0.0682 168.22); /* #004230 */
  --chopped-chive: oklch(0.4958 0.0674 160.33); /* #3D6E55 */
  --geranium-lake: oklch(0.6099 0.2172 28.57); /* #E8342A */
  --japanese-indigo: oklch(0.3612 0.044878 216.2283); /* #1E434C */
  --medium-turquoise: oklch(0.7674 0.0941 195.37); /* #61C6C6 */
  --mellow-appricot: oklch(0.8138 0.1535 76.26); /* #FAB338 */
  --papaya-whip: oklch(0.967 0.0401 88.99); /* #FFF3D4 */
  --royal-peacock: oklch(0.5633 0.1135 231.64); /* #0480AC */
  --sea-serpent: oklch(0.8588 0.0555 197.47); /* #A6DCDD */
  --white: oklch(1 0 0); /* #FFFFFF */

  /* old color maps */
  --amazon: var(--chopped-chive);
  --blue-dianne: var(--japanese-indigo);
  --cararra: var(--anti-flash-white);
  --celadon-blue: var(--aztec-sky);
  --cerulean: var(--aztec-sky);
  --crimson: var(--geranium-lake);
  --deep-teal: var(--british-racing-green);
  --killarney: var(--chopped-chive);
  --morning-glory: var(--sea-serpent);
  --non-photo-blue: var(--sea-serpent);
  --rose-bud: var(--papaya-whip);
  --unbleached-silk: var(--papaya-whip);
  --yellow-orange: var(--mellow-appricot);

  --mnml--theme--primary: var(--japanese-indigo);
  --mnml--theme--primary--hover: color-mix(
    in oklch,
    var(--mnml--theme--primary) 88%,
    var(--white)
  );
  --mnml--theme--primary--contrast-color: var(--white);
  --mnml--theme--secondary: var(--medium-turquoise);
  --mnml--theme--secondary--hover: color-mix(
    in oklch,
    var(--mnml--theme--secondary) 88%,
    var(--white)
  ); /* #8FE0DE */

  --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 {
    font: -apple-system-body; /* this lets us support dynamic type sizes and weights for folx who need larger type */
  }

  @supports not (-webkit-touch-callout: none) {
    /* override the font-size on macOS which doesn't support dynamic type sizes yet and sets 13px as the default */
    html {
      font-size: 16px;
    }
  }
}

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

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__header {
  view-transition-name: --page-header;
}

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

.page__header .page__title {
  view-transition-name: --page-title;
}

.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;
  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--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--aurora-orange {
  background-color: var(--aurora-orange);
  color: var(--white);
}

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

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

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

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

.block--chopped-chive {
  background-color: var(--chopped-chive);
  color: var(--white);
}

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

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

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

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

.block--papaya-whip {
  background-color: var(--papaya-whip);
  color: var(--british-racing-green);
}

.block--royal-peacock {
  background-color: var(--royal-peacock);
  color: var(--white);
}

.block--sea-serpent {
  background-color: var(--sea-serpent);
  color: var(--british-racing-green);
}

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

.block--theme-secondary {
  background-color: var(--mnml--theme--secondary);
  color: var(--british-racing-green);
}

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

[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--anti-flash-white + .block--anti-flash-white,
.block--anti-flash-white
  + iz-content-blocks
  > .block--anti-flash-white:first-child,
.block--aurora-orange + .block--aurora-orange,
.block--aurora-orange + iz-content-blocks > .block--aurora-orange:first-child,
.block--aztec-sky + .block--aztec-sky,
.block--aztec-sky + iz-content-blocks > .block--aztec-sky:first-child,
.block--black + .block--black,
.block--black + iz-content-blocks > .block--black:first-child,
.block--blushing-apricot + .block--blushing-apricot,
.block--blushing-apricot
  + iz-content-blocks
  > .block--blushing-apricot:first-child,
.block--british-racing-green
  + iz-content-blocks
  > .block--british-racing-green:first-child,
.block--british-racing-green + .block--british-racing-green,
.block--chopped-chive + .block--chopped-chive,
.block--chopped-chive + iz-content-blocks > .block--chopped-chive: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--medium-turquoise + .block--medium-turquoise,
.block--medium-turquoise
  + iz-content-blocks
  > .block--medium-turquoise:first-child,
.block--mellow-appricot + .block--mellow-appricot,
.block--mellow-appricot
  + iz-content-blocks
  > .block--mellow-appricot:first-child,
.block--papaya-whip + .block--papaya-whip,
.block--papaya-whip + iz-content-blocks > .block--papaya-whip:first-child,
.block--royal-peacock + .block--royal-peacock,
.block--royal-peacock + iz-content-blocks > .block--royal-peacock: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--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;
  }
}