:root {
  /* Font Size Scaling Tokens - https://utopia.fyi/type/calculator?c=320,20,1.2,888,24,1.25,8,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
  --step--2: clamp(0.8681rem, 0.8163rem + 0.259vw, 0.96rem);
  --step--1: clamp(1.0417rem, 0.9525rem + 0.446vw, 1.2rem);
  --step-0: clamp(1.25rem, 1.1092rem + 0.7042vw, 1.5rem);
  --step-1: clamp(1.5rem, 1.2887rem + 1.0563vw, 1.875rem);
  --step-2: clamp(1.8rem, 1.4937rem + 1.5317vw, 2.3438rem);
  --step-3: clamp(2.16rem, 1.7264rem + 2.1681vw, 2.9297rem);
  --step-4: clamp(2.592rem, 1.9891rem + 3.0144vw, 3.6621rem);
  --step-5: clamp(3.1104rem, 2.2838rem + 4.1331vw, 4.5776rem);
  --step-6: clamp(3.7325rem, 2.6116rem + 5.6044vw, 5.722rem);
  --step-7: clamp(4.479rem, 2.9727rem + 7.5312vw, 7.1526rem);
  --step-8: clamp(5.3748rem, 3.3658rem + 10.0449vw, 8.9407rem);

  /* Space Scaling Tokens - https://utopia.fyi/space/calculator?c=320,20,1.2,888,24,1.25,8,2,&s=0.75|0.5|0.25,1.5|2|3|4|5|6|7|8|9|10|11|12,s-l&g=s,s,l,12 */
  --space-3xs: clamp(0.3125rem, 0.2773rem + 0.1761vw, 0.375rem);
  --space-2xs: clamp(0.625rem, 0.5546rem + 0.3521vw, 0.75rem);
  --space-xs: clamp(0.9375rem, 0.8319rem + 0.5282vw, 1.125rem);
  --space-s: clamp(1.25rem, 1.1092rem + 0.7042vw, 1.5rem);
  --space-m: clamp(1.875rem, 1.6637rem + 1.0563vw, 2.25rem);
  --space-l: clamp(2.5rem, 2.2183rem + 1.4085vw, 3rem);
  --space-xl: clamp(3.75rem, 3.3275rem + 2.1127vw, 4.5rem);
  --space-2xl: clamp(5rem, 4.4366rem + 2.8169vw, 6rem);
  --space-3xl: clamp(6.25rem, 5.5458rem + 3.5211vw, 7.5rem);
  --space-4xl: clamp(7.5rem, 6.6549rem + 4.2254vw, 9rem);
  --space-5xl: clamp(8.75rem, 7.7641rem + 4.9296vw, 10.5rem);
  --space-6xl: clamp(10rem, 8.8732rem + 5.6338vw, 12rem);
  --space-7xl: clamp(11.25rem, 9.9824rem + 6.338vw, 13.5rem);
  --space-8xl: clamp(12.5rem, 11.0915rem + 7.0423vw, 15rem);
  --space-9xl: clamp(13.75rem, 12.2007rem + 7.7465vw, 16.5rem);
  --space-10xl: clamp(15rem, 13.3099rem + 8.4507vw, 18rem);

  /* One-up pairs */
  --space-3xs-2xs: clamp(0.3125rem, 0.066rem + 1.2324vw, 0.75rem);
  --space-2xs-xs: clamp(0.625rem, 0.3433rem + 1.4085vw, 1.125rem);
  --space-xs-s: clamp(0.9375rem, 0.6206rem + 1.5845vw, 1.5rem);
  --space-s-m: clamp(1.25rem, 0.6866rem + 2.8169vw, 2.25rem);
  --space-m-l: clamp(1.875rem, 1.2412rem + 3.169vw, 3rem);
  --space-l-xl: clamp(2.5rem, 1.3732rem + 5.6338vw, 4.5rem);
  --space-xl-2xl: clamp(3.75rem, 2.4824rem + 6.338vw, 6rem);
  --space-2xl-3xl: clamp(5rem, 3.5915rem + 7.0423vw, 7.5rem);
  --space-3xl-4xl: clamp(6.25rem, 4.7007rem + 7.7465vw, 9rem);
  --space-4xl-5xl: clamp(7.5rem, 5.8099rem + 8.4507vw, 10.5rem);
  --space-5xl-6xl: clamp(8.75rem, 6.919rem + 9.1549vw, 12rem);
  --space-6xl-7xl: clamp(10rem, 8.0282rem + 9.8592vw, 13.5rem);
  --space-7xl-8xl: clamp(11.25rem, 9.1373rem + 10.5634vw, 15rem);
  --space-8xl-9xl: clamp(12.5rem, 10.2465rem + 11.2676vw, 16.5rem);
  --space-9xl-10xl: clamp(13.75rem, 11.3556rem + 11.9718vw, 18rem);

  /* Custom pairs */
  --space-s-l: clamp(1.25rem, 0.2641rem + 4.9296vw, 3rem);

  /* Fluid Grid Tokens - https://utopia.fyi/grid/calculator?c=320,20,1.2,888,24,1.25,8,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,s,l,12 */
  --grid-max-width: 55.5rem;
  --grid-gutter: var(--space-s-s, clamp(1.25rem, 1.1092rem + 0.7042vw, 1.5rem));
  --grid-columns: 12;

  /* Utilities */
  --span-grid: 1 / span 12;

  /* Color Tokens */
  --card-color: rgba(250, 250, 250, 1);
  --contrast-color: rgba(253, 81, 88, 1);
  --contrast-color-translucent: rgba(2, 94, 74, 0.5);
  --background-color: rgba(175, 209, 210, 1);
  --text-color: var(--color-gray-90);
  --text-color-link: var(--text-color);

  /* Shape Tokens */
  --border-radius: 0.3rem;
  --large-rounded-radius: 1rem;

  /* Type Tokens */
  --line-height--2: calc(var(--step--2) * 1.25);
  --line-height--1: calc(var(--step--1) * 1.25);
  --line-height-0: calc(var(--step-0) * 1.25);
  --line-height-1: calc(var(--step-1) * 1.25);
  --line-height-2: calc(var(--step-2) * 1.25);
  --line-height-3: calc(var(--step-3) * 1.25);
  --line-height-4: calc(var(--step-4) * 1.25);
  --line-height-5: calc(var(--step-5) * 1.25);
  --line-height-6: calc(var(--step-6) * 1.25);
  --line-height-7: calc(var(--step-7) * 1.25);
  --line-height-8: calc(var(--step-8) * 1.25);

  --wide-letter-spacing: 15%;

  /* Other Style Tokens and Utilities */
  --box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

/* d-din */
@font-face {
  font-family: "D-DIN";
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  src:
    local("D-DIN"),
    url(d-din.woff2) format("woff2");
}
/* d-din-din-bold */
@font-face {
  font-family: "D-DIN";
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  src:
    local("D-DIN Bold"),
    local("D-DIN-Bold"),
    url(d-din-din-bold.woff2) format("woff2");
}
/* d-din-din-italic */
@font-face {
  font-family: "D-DIN";
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  src:
    local("D-DIN Italic"),
    local("D-DIN-Italic"),
    url(d-din-din-italic.woff2) format("woff2");
}

/* Base Styles */
html {
  background-color: rgba(175, 209, 210, 1);
  font-family: "D-DIN";
  & a.button {
    background-color: var(--contrast-color);
    border-bottom: 3px solid rgba(56, 15, 10, 1);
    border-right: 3px solid rgba(56, 15, 10, 1);
    border-radius: var(--border-radius);
    color: white;
    font-size: var(--step--2);
    letter-spacing: var(--wide-letter-spacing);
    margin: var(--space-xs) var(--space-xs) 0 0;
    padding: var(--space-2xs) var(--space-xs);
    text-decoration: none;
    text-transform: uppercase;
    transition: var(--transition-normal);
    white-space: nowrap;
    & .button_secondary {
    }
  }
  & aside p {
    font-size: var(--step--2);
    font-style: italic;
    line-height: var(--line-height--2);
    margin-top: var(--space-m);
  }
  & a,
  li,
  p,
  td {
    font-size: var(--step-0);
    line-height: var(--line-height-0);
  }
  & footer {
    background-color: var(--contrast-color);
    width: 100vw;
    & .footer_inner {
      color: white;
      min-height: var(--space-2xl);
      margin: auto;
      max-width: var(--grid-max-width);
      padding: var(--space-m) var(--space-s);
      & p {
        margin-block: 0;
      }
    }
  }
  & h1,
  h2,
  h3,
  h4 {
    font-weight: normal;
  }
  & h1 {
    font-size: var(--step-3);
    line-height: var(--line-height-3);
  }
  & h2 {
    font-size: var(--step-2);
    line-height: var(--line-height-2);
  }
  & h3 {
    font-size: var(--step-1);
    line-height: var(--line-height-1);
  }
  & header {
    background-color: var(--contrast-color);
    width: 100vw;
    & .header_inner {
      align-items: center;
      color: white;
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      height: var(--space-3xl);
      margin: auto;
      max-width: var(--grid-max-width);
      padding-left: var(--space-s);
      padding-right: var(--space-s);
      & #countdown {
        font-weight: bold;
      }
      p {
        margin-block: 0;
      }
      .TCN_Logo {
        fill: white;
        margin-left: var(--space-3xs);
        max-height: var(--space-xl);
        max-width: var(--space-8xl);
      }
    }
  }
  & main {
    margin: auto;
    max-width: var(--grid-max-width);
    padding-top: var(--space-l);
    & section {
      background-color: var(--card-color);
      border-radius: var(--large-rounded-radius);
      box-shadow: var(--box-shadow);
      margin: 0 0 var(--space-s) 0;
      padding: var(--space-s) var(--space-xl) var(--space-m) var(--space-xl);
      width: 100%;
      &.hero h1 {
        & span {
          display: inline-block;
          font-size: var(--step-1);
          letter-spacing: 15%;
          line-height: var(--line-height-1);
          margin-bottom: var(--space-s);
          text-transform: uppercase;
          &::before {
            border-style: solid;
            border-width: 0.2em 0.2em 0 0; /* Line thickness */
            color: var(--contrast-color);
            content: "";
            display: inline-block;
            height: var(
              --space-s
            ); /* Arrow size; Height & Width must remain equal */
            left: 0.15em;
            margin-left: calc(var(--space-2xs) * -1);
            margin-right: var(--space-xs);
            position: relative;
            transform: rotate(45deg);
            width: var(--space-s);
          }
        }
      }
    }
  }
  & p {
    margin-block: 0 1lh;
  }
}

/* Overrides */
section.hero {
  background-color: var(--background-color);
  box-shadow: inherit;
  padding: var(--space-s) 1.1rem var(--space-s) 1.1rem;
  & img {
    width: 100%;
    margin-bottom: var(--space-l);
  }
}

@media screen and (max-width: 460px) {
  html header .header_inner {
    flex-flow: column nowrap;
    height: var(--space-3xl);
    padding-bottom: var(--space-m);
    padding-top: var(--space-m);
    & p {
      text-align: center;
    }
    & svg {
      display: none;
    }
  }
}