@layer reset, tokens, base, layout, components, utilities;

/* #region Font Imports */
@font-face {
  font-family: "Editorial New";
  src: url("../fonts/EditorialNew-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Editorial New";
  src: url("../fonts/EditorialNew-Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "error417";
  src: url("../fonts/417Bitnik-Semibold-Standard.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
}
/* #endregion Font Imports */

@layer reset {
  /*! modern css reset | https://piccalil.li/blog/a-more-modern-css-reset/ */
  *,
  ::after,
  ::before {
    box-sizing: border-box;
  }
  html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }
  blockquote,
  body,
  dd,
  dl,
  figure,
  h1,
  h2,
  h3,
  h4,
  p {
    margin-block-end: 0;
  }
  ol[role="list"],
  ul[role="list"] {
    list-style: none;
  }
  body {
    min-height: 100vh;
    line-height: 1.5;
  }
  button,
  h1,
  h2,
  h3,
  h4,
  input,
  label {
    line-height: 1.1;
  }
  h1,
  h2,
  h3,
  h4 {
    text-wrap: balance;
  }
  a:not([class]) {
    text-decoration-skip-ink: auto;
    color: currentColor;
  }
  img,
  picture {
    max-width: 100%;
    display: block;
  }
  button,
  input,
  select,
  textarea {
    font-family: inherit;
    font-size: inherit;
  }
  textarea:not([rows]) {
    min-height: 10em;
  }
  :target {
    scroll-margin-block: 5ex;
  }
}

@layer tokens {
  :root {
    /* z-index rules */
    --z-negative: -1;
    --z-base: 0;
    --z-dropdown: 10;
    --z-overlay: 20;
    --z-sticky: 50;
    --z-tooltip: 100;
    --z-popover: 150;
    --z-top: 200;

    /* color pallette */
    --black: #000000;
    --white: #ffffff;
    --yellow: #ffff00;
    --grey: #7d7d7d;
    --dark-grey: #3b3b3b;

    --light-grey: #dcdcdc;
    --light-light-grey: #f0f0f0;
    /* --blue: #0023f5; */

    --color-primary: var(--yellow);
    --color-surface: var(--light-grey);
    --color-subtle: var(--grey);

    --color-text-default: var(--black);
    --color-text-subtle: var(--grey);

    --color-text-link: var(--grey);

    /* fonts */
    --heading-text: "error417", sans-serif;
    --body-text: "Editorial New", serif;

    /* general styling variables */
    --border-width: calc(4rem / 48);
    /* 1pt or 0.333px */
    --header-footer-padding: 3rem;
    /* 32px */
    --shadow-inset: inset 0px 0px 39px -1px rgba(0, 0, 0, 0.75);
    --shadow-inset-minimal: inset 0px 0px 8px -1px rgba(0, 0, 0, 0.75);
    --shadow-outset: outset 0px 0px 39px -1px rgba(0, 0, 0, 0.75);

    /* web card */
    --card-border: var(--border-width) solid var(--color-subtle) 25px;

    /* font sizes */
    --font-body-size: 2rem; /* 32px */
    --font-body-line-height: 2.5625rem; /* 41px */
    --font-mini-size: 1rem;
    --font-mini-line-height: 1.28rem;

    /* experimental CSS */
    interpolate-size: allow-keywords;

    /* font sizes */
    /* @link https://utopia.fyi/type/calculator?c=320,17,1.2,3280,38,1.125,5,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.7378rem, 0.6147rem + 0.6155vw, 1.8765rem);
    --step--1: clamp(0.8854rem, 0.7529rem + 0.6625vw, 2.1111rem);
    --step-0: clamp(1.0625rem, 0.9206rem + 0.7095vw, 2.375rem);
    --step-1: clamp(1.275rem, 1.124rem + 0.7551vw, 2.6719rem);
    --step-2: clamp(1.53rem, 1.3704rem + 0.7978vw, 3.0059rem);
    --step-3: clamp(1.836rem, 1.6689rem + 0.8355vw, 3.3816rem);
    --step-4: clamp(2.2032rem, 2.0301rem + 0.8655vw, 3.8043rem);
    --step-5: clamp(2.6438rem, 2.467rem + 0.8843vw, 4.2798rem);*/

    /* @link https://utopia.fyi/type/calculator?c=320,10,1.2,1254,20,1.25,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,NaN */
    --step--2: clamp(0.434rem, 0.3086rem + 0.6269vw, 0.8rem);
    --step--1: clamp(0.5208rem, 0.3567rem + 0.8208vw, 1rem);
    --step-0: clamp(0.625rem, 0.4109rem + 1.0707vw, 1.25rem);
    --step-1: clamp(0.75rem, 0.4716rem + 1.3919vw, 1.5625rem);
    --step-2: clamp(0.9rem, 0.5392rem + 1.8041vw, 1.9531rem);
    --step-3: clamp(1.08rem, 0.6136rem + 2.3322vw, 2.4414rem);
    --step-4: clamp(1.296rem, 0.6945rem + 3.0077vw, 3.0518rem);
    --step-5: clamp(1.5552rem, 0.7811rem + 3.8707vw, 3.8147rem);
    --step-6: clamp(1.8662rem, 0.8719rem + 4.9715vw, 4.7684rem);
    --step-7: clamp(2.2395rem, 0.9646rem + 6.3743vw, 5.9605rem);
    --step-8: clamp(2.6874rem, 1.0555rem + 8.1596vw, 7.4506rem);

    /* contents */
    --em-dash-space: "\2014\00a0"; /* Em dash followed by a space */
  }
}

@layer base {
  body {
    font-family: var(--body-text);
    font-size: var(--step-1);
    font-weight: normal;
    word-break: break-word;
    overflow-x: hidden;
    box-shadow: var(--shadow-inset);
    background-color: var(--color-surface);
    margin: 0;
  }

  h1 {
    font-family: var(--heading-text);
    font-size: var(--step-4);
    text-transform: uppercase;
    margin-bottom: var(--step-2);
  }
  h2 {
    text-transform: uppercase;
    color: var(--primary-color);
    text-decoration: none;
    font-style: normal;
  }
  h3 {
    color: var(--color-text-subtle);
    margin-bottom: var(--step-2);
    margin-top: var(--step-4);
    width: 100%;
    font-style: italic;
  }
  h3::before {
    content: var(--em-dash-space);
    display: inline-block;
  }
  h2, h3, h4 {
    font-weight: normal;
  }
  h1, h2, h3, h4, h5, h6, .button {
    /* Make unicode behave like normal text for headings and buttons */
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: normal;
    line-break: strict;
    }

  p {
    line-height: 130%;
    text-align: left;
  }

  sup {
    font-size: var(--step--2);
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    top: -0.5em;
  }

  strong {
    font-weight: normal;
  }

  pre {
    max-width: 100vw;
    overflow: hidden;
    font-size: var(--step-4);
  }

  a {
    color: var(--color-text-link);
    text-decoration: none;
  }
  a:hover {
    color: black;
    text-decoration: none;
  }

  form {
    width: max-content;
  }

  input {
    flex-grow: 1;
    color: var(--primary-color);
  }

  input:focus {
    border: none;
    outline: none;
  }

  button:hover {
    color: var(--primary-color);
  }
}

@layer layout {
  body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }

  h1, h2, h3, h4, h5, h6, p, .block-text {
    align-self: flex-start;
  }

  .block-text {
    width: 100%;
  }

  main {
    flex-grow: 1;
  }

  section {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }

  .section-container {
    scroll-snap-type: y proximity;
    position: relative;
  }

  section.full {
    height: auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Center content vertically */
    /*scroll-snap-align: start;*/
    position: relative;
    padding: 2rem;
    padding-bottom: 5rem;
  }
  section.full::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    pointer-events: none;
    z-index: var(--z-overlay);
    box-shadow: var(--shadow-inset);
  }

  section.full:nth-child(odd) {
    background-color: var(--color-primary);
  }

  section.full:nth-child(even) {
    background-color: var(--color-surface);
  }

  section.full:nth-child(odd) a {
    color: var(--dark-grey);
    text-decoration: underline;
  }

  section.full:nth-child(odd) a:hover {
    color: var(--grey);
    text-decoration: underline;
  }

  section.full:nth-child(odd) h3.block-heading {
    color: var(--dark-grey);
  }


  .content {
    max-width: 80ch;
    padding-top: 2rem;
    padding-bottom: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: auto;
    /* Center content horizontally */
    text-align: left;
  }

  .block-button {
    display: flex;
    justify-content: left;
    width: 100%;
    margin-top: 2rem;
    gap: 2rem;
    align-items: center;
  }

  .block-button > p {
    margin: 0;
  }
}

@layer components {
  .button {
    color: black;
    font-family: var(--heading-text);
    font-style: normal;
    text-transform: uppercase;
  }
  a.black {
    color: black;
    font-style: normal;
    font-family: var(--heading-text);
  }

  .subtitle {
    font-family: var(--body-text);
    color: var(--color-text-subtle);
    font-style: italic;
    text-transform: none;
  }
  .subtitle::before {
    content: var(--em-dash-space);
  }

  .cover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    background-color: #000;
    z-index: var(--z-top);
  }

  /* #region Header & Footer Styles */
  .site-header {
    position: fixed;
    z-index: var(--z-sticky);
    top: 1rem;
    left: 1rem;
    right: 1rem;

    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    transition: background-color 0.3s ease;
    pointer-events: none;
  }

  .header__location-button {
    transition: transform 0.4s ease, opacity 0.35s ease 0.05s;
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }

  .site-header:has(.header__nav-hamburger[aria-expanded="true"])
  .header__location-button {
    transform: translateX(-50%);
    opacity: 0;
    pointer-events: none;
  }

  .header__location-button.hide {
    transform: translateX(-50%);
    opacity: 0;
    pointer-events: none;
  }

  .header__nav {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    position: absolute;
    right: 1rem;
    margin-right: -1rem;
    opacity: 1;
    transition:
      transform 0.5s ease,
      opacity 0.5s ease;
    max-width: calc(100vw - 2rem);
    justify-content: flex-end;
    pointer-events: none;
    flex-direction: row;
  }

  .header__nav.hide {
    transform: translateX(50%);
    opacity: 0;
    pointer-events: none;
  }

  .header__nav-hamburger {
    height: 100%;
    aspect-ratio: 1 / 1;   /* keeps it a perfect circle */
    padding: 1.1rem!important;

    border-radius: 50%;
    display: grid;
    place-items: center;
    pointer-events: auto;
  }

  /* baseline state */
  .header__nav-hamburger > i.fa-xmark {
    display: none!important;
  }

  .header__nav-hamburger > i.fa-bars {
    display: inline-block!important;
  }

  /* expanded state */
  .header__nav-hamburger[aria-expanded="true"] > i.fa-bars {
    display: none!important;
  }

  .header__nav-hamburger[aria-expanded="true"] > i.fa-xmark {
    display: inline-block!important;
  }

  .header__nav-hamburger[aria-expanded="false"] > i.fa-solid.fa-bars {
    display: inline-block!important;
  }

  .header__nav-hamburger[aria-expanded="false"] > i.fa-solid.fa-xmark {
    display: none!important;
  }

  .header__nav-wrapper {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    order: 0; /* sits before the hamburger */
  }

  .header__nav-cta-list {
    list-style: none;
    display: flex;
    gap: 1rem;
    align-items: center;
    margin: 0;
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
    transition:
      transform 0.5s ease,
      opacity 0.5s ease;
  }

  .header__nav-cta-list.hide {
    transform: translateX(50%);
    opacity: 0;
    pointer-events: none;
  }

  .header__nav-cta-list,
  .header__nav-list {
    padding: 0;
  }

  .header__nav-list {
    list-style: none;
    display: flex;
    gap: 1rem;
    align-items: center;
    margin: 0;

    /* hide nav on default */
    transition: transform 0.4s ease, opacity 0.2s ease;
    transform: translateX(+25%);
    opacity: 0;
    pointer-events: none;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .header__nav-hamburger[aria-expanded="true"] ~ .header__nav-wrapper .header__nav-list {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
    transition: transform 0.4s ease 0.05s, opacity 0.35s ease 0.15s;
  }

  .header__nav-item,
  .header__nav-cta-item {
    transition: 0.1s ease-in-out 0s;
    margin-left: 1rem;
  }

  .header__nav-hamburger  { order: 1; }
  .header__nav-wrapper    { order: 0; }
  .header__nav-cta-list   { order: 1; }
  .header__nav-list       { order: 0; }

  @media (max-width: 1367px) {
    .header__nav-cta-list   { order: 0; }
    .header__nav-list       { order: 1; }
  }

  /* mobile nav */
  @media (max-width: 768px) {
    .site-header {
      position: fixed;
      display: block;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;
    }

    .site-header:has(.header__nav-hamburger[aria-expanded="true"]) {
      background-color: var(--color-primary);
    }

    .header__location-button {
      position: fixed;
      top: 1rem;
      left: 1rem;
    }

    .site-header:has(.header__nav-hamburger[aria-expanded="true"]) .header__location-button {
      transform: translateX(0);
      opacity: 1;
      pointer-events: auto;
  }

    .header__nav {
      padding-top: 1rem;
      padding-right: 1rem;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }

    .header__nav-hamburger {
      order: 0;
      pointer-events: auto;
      display: grid;
    }

    .header__nav-wrapper {
      order: 1;
    }

    .header__nav-cta-list {
      flex-wrap: wrap-reverse;
      justify-content: flex-end;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.5s ease 0.05s;
    }

    .site-header:has(.header__nav-hamburger[aria-expanded="true"]) .header__nav-cta-list {
      opacity: 1;
      pointer-events: auto;
    }
  }

  #spin-logo {
    position: fixed;
    bottom: 3rem;
    left: 3rem;
    width: 8rem;
    transition: transform 0.3s ease-out;
    z-index: var(--z-sticky);
  }

  #nav-footer-right {
    position: fixed;
    bottom: 3rem;
    right: 3rem;
    z-index: var(--z-sticky);
    font-family: "error417";
    opacity: 1;
    transition:
      transform 0.5s ease,
      opacity 0.5s ease;
    z-index: var(--z-sticky);
    text-align: right;
    line-height: 120%;
  }
  #nav-footer-right.hide {
    transform: translateX(50%);
    opacity: 0;
    pointer-events: none;
  }

  #nav-footer-right a,
  #nav-header-left a {
    color: black;
    text-decoration: none;
    transition:
      transform 0.1s ease,
      opacity 0.1s ease;
    margin-bottom: 0;
    margin-top: 0;
  }
  #nav-footer-right a {
    color: black;
    text-transform: uppercase;

    background: none;
    border: none;
    transition: 0.1s ease-in-out 0s;
    box-shadow: none;
    display: inline-block;
    line-height: 130%;
    font-size: var(--step-2);
    padding: 0;

    transform-origin: bottom right;
  }
  #nav-footer-right a:hover {
    transform: scale(1.4);
  }
  #nav-header-left a {
    font-size: var(--step-1);
  }
  /* #endregion Header & Footer Styles */

  .content h2 {
    margin-bottom: 2rem;
  }

  /* #region Article Styles */
  .author {
    margin-bottom: 3rem;
  }
  .date {
    margin-top: 3rem;
  }
  .author,
  .date {
    font-size: var(--step-0);
  }

  .lead {
    font-size: var(--step-3);
    font-family: var(--body-text);
    color: var(--primary-color);
    line-height: 130%;
    margin-bottom: var(--step-5);
  }

  .meta {
    font-size: var(--step-0);
  }
  .references {
    font-size: var(--step-0);
  }

  .back {
    margin-top: var(--step-7);
    font-style: italic;
  }
  /* #endregion Article Styles */

  /* #region Essay Styles */
  .essays h1 {
    margin-bottom: 1rem;
  }
  .essays h2 {
    color: var(--color-text-subtle);
    font-size: var(--step-3);
    margin-bottom: 2rem;
  }

  .essays p {
    text-indent: 2ch;
  }

  /* Don't indent the first paragraph in the essay */
  .essays p:first-of-type {
    text-indent: 0;
  }

  /* Don't indent paragraphs immediately following h3 headings */
  .essays h3 + p {
    text-indent: 0;
  }

  .essays .back {
    font-size: var(--step-0);
  }
  /* #endregion Essay Styles */

  .text hr {
    margin-bottom: 2rem;
    color: var(--color-text-subtle);
  }

  .block-list {
    width: 98%;
    /* margin-bottom: 2rem; */
    /* padding: 0; */
    /* padding-left: 2rem; */
    /* text-align: left; */
  }

  .text ul li {
    list-style-type: circle;
  }

  .text #faq {
    margin: auto;
    margin-bottom: 2rem;
  }

  .button {
    border-radius: 2em;
    background: var(--light-light-grey);
    border: none;
    font-size: var(--step-1);
    padding: 0.7em 1.5em;
    cursor: pointer;
    transition: 0.1s ease-in-out 0s;
    box-shadow: var(--shadow-inset-minimal);
    display: inline-block;
    line-height: 130%;
    text-decoration: none;
  }
  .button:hover {
    transform: scale(1.2);

  }

  .button--big {
    font-size: var(--step-3);
    /* background: var(--color-primary); */
  }

  img.arrow-out {
    display: inline-block;
    vertical-align: text-top;
    width: var(--step-4);
    pointer-events: none;
  }

  span.arrow-out-icon {
    display: inline-block;
    width: var(--step-4);
    min-width: var(--step-4);

    -webkit-mask-image: url("/assets/images/arrow-out.svg");
    mask-image: url("/assets/images/arrow-out.svg");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: right center;
    mask-position: right center;

    background-color: var(--color-text-default);
  }

  span.arrow-right {
  display: inline-block;
  background-image: url("/assets/images/arrow-right.svg");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: text-bottom;
  width: var(--step-2);
  min-width: 1rem;
  }

  /* #region (Block)quote Styles */
  blockquote {
    display: flex;
    justify-content: center;
    color: var(--black);

  }

  blockquote p {
    margin-bottom: 0;
    font-style: italic;
  }

  blockquote > div {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    width: 95%;
  }

  blockquote > div > div {
    display: flex;
    flex-direction: column;
    width: 100%;
    font-size: var(--step-2);
  }

  blockquote > div > div > p:last-of-type {
    align-self: flex-end;
  }

  .page-article blockquote {
    margin-bottom: var(--step-5);
  }
  /* #endregion (Block)quote Styles */

  /* #region Code Block Styles */
  .code-block {
    border: solid var(--color-subtle) var(--border-width);
    border-radius: 1.5625rem;
    padding: 2rem 4%;
    overflow: auto;
    margin: 0 8% 2rem 8%;
  }

  .code-block * {
    background: transparent;
  }
  .code-block-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    font-family: sans-serif;
    font-size: 0.875em;
  }

  .code-block pre > code {
    font-size: 0.875em;
  }

  .code-block pre {
    order: 2;
    max-width: 70rem;
  }
  .code-toolbar {
    display: flex;
    flex-direction: column;
  }

  .code-block .toolbar {
    order: 1;
    position: relative;
    opacity: 1;
    display: flex;
    justify-content: space-between;
    font-family: sans-serif;
  }

  .code-block .toolbar *,
  .code-block .toolbar *:hover {
    color: inherit;
    border-radius: unset;
    box-shadow: unset;
    padding: 0;
  }
  /* #endregion Code Block Styles */

  /* #region Image & Video Styles */
  .block-image,
  .block-video {
    padding: 1rem 8% 1.2rem 8%;
  }

  .block-image img,
  .block-video video {
    display: block;
    height: auto;
    max-height: 80vh;
    aspect-ratio: auto;
    object-fit: contain;
    margin: auto;
  }

  .block-video video {
    width: 100%;
  }

  .block-image img,
  .block-video video,
  .block-video iframe,
  .block-gallery img {
    border-radius: 1.5625rem;
    border: 1px var(--color-subtle) solid;
  }

  .block-video:has(iframe) {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
  }

  .block-video iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 84%;
    height: 84%;
    transform: translate(-50%, -50%);
  }

  /* Caption Styles */
  .block-video:has(iframe) figcaption {
    position: absolute;
    bottom: 0;
    width: 84%;
    height: auto;
    left: 50%;
    transform: translateX(-50%);
  }

  .block-image figcaption,
  .block-video figcaption,
  .block-gallery figcaption {
    font-family: "Editorial New", serif;
    font-size: var(--step--1);
    margin-top: 1rem;
    max-width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }

  /* Responsive styling for iframe figcaptions */
  @media only screen and (max-width: 412px) {
    section .block-video:has(iframe) {
      overflow: visible;
      margin-bottom: 2.5rem;
    }

    section .block-video:has(iframe) figcaption {
      bottom: -3.5rem;
    }
  }

  @media only screen and (max-width: 768px) {
    section .block-video:has(iframe) {
      overflow: visible;
      margin-bottom: 0.5rem;
    }

    section .block-video:has(iframe) figcaption {
      bottom: -1rem;
    }
  }
  /* #endregion Image & Video Styles */

   /* #region Gallery Styles */
  .block-gallery {
    position: relative;
    width: 115%;
    margin-left: -7.5%;
    overflow: hidden;
  }

  .gallery-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    overflow: hidden;
  }

  .gallery-list {
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: none;
    will-change: transform;
  }

  .gallery-item {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 60vh;
    max-width: 45vw;
  }

  .block-gallery img {
    width: 100%;
    height: 100%;
    max-height: 60vh;
    max-width: 45vw;
    object-fit: contain;
    border-radius: 1.5625rem;
    border: 1px solid var(--color-subtle);
  }

  .block-gallery .carousel__navigation .arrow-left,
  .block-gallery .carousel__navigation .arrow-right {
    border: none;
  }

  .no-transition,
  .no-transition * {
    transition: none !important;
  }

  .no-snap {
    scroll-snap-type: none !important;
  }
  /* #endregion Gallery Styles */

  /* #region Carousel Styles */
  .carousel {
    max-width: 100vw;
    width: 100%;
    position: relative;

    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .carousel__scroll-wrapper {
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;

    scrollbar-width: none; /* Firefox & Chromium */
  }

  .carousel__scroll-wrapper::-webkit-scrollbar {
    display: none; /* Safari & legacy Chromium */
  }

  .carousel__slides,
  .carousel__slide {
    width: 100%;
  }

  .carousel__slides {
    height: 100%;
    display: flex;
    column-gap: var(--carousel-slide-gap);

    align-items: stretch;
    overflow: visible;
    padding: var(--carousel-padding-y, 7rem) 0;
  }

  .carousel__scroll-wrapper.no-transition {
    scroll-behavior: auto;
  }

  .carousel__scroll-wrapper.no-animation .carousel__slide {
    transition: none;
  }

  .carousel__scroll-wrapper.no-snap {
    scroll-snap-type: none;
  }

  .carousel__slide {
    scroll-snap-align: center;
    padding: 0 calc(var(--carousel-slide-gap) / 2);
    display: flex;
    align-items: stretch;
  }

  .carousel__slide-inner {
    transform-origin: center center;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: 100%;
    flex: 1;
  }

  .carousel__slide-inner.is-active {
    cursor: pointer;
  }

  .carousel__navigation {
    position: absolute;
    top: 50%;
    left: var(--carousel-nav-inset, 1.5rem);
    right: var(--carousel-nav-inset, 1.5rem);
    transform: translateY(-50%);
    z-index: var(--z-popover);
    display: flex;
    justify-content: space-between;
    pointer-events: none; /* track doesn't block scroll/clicks */
  }

  .carousel__navigation button {
    pointer-events: all; /* but buttons still work */
    cursor: pointer;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.25));
    aspect-ratio: 1 / 1;
    padding: 1rem;
    border-radius: 9999px;
    display: block;
  }

  .block-highlight {
    --carousel-nav-inset: clamp(1rem, 3vw, 3rem);
  }

  .carousel__navigation button .arrow-right, .carousel__navigation button .arrow-left {
    width: 3rem;
  }

  .carousel__navigation button .arrow-left {
    transform: rotate(180deg);
  }

  .carousel__slides[style*="--disable-transitions"] .carousel__slide-inner {
    transition: none;
  }
  /* #endregion Carousel Styles */

  /* #region Highlight Block Styles */
  .block-highlight {
    --carousel-slide-gap: clamp(0.5rem, 5vw, 1rem);
    position: relative;
    left: 0;
    /* left: 50%; */
    /* right: 50%; */
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
  }

  .block-highlight .carousel__slide-inner {
    background-color: var(--color-surface);
    border-radius: 1.5625rem;
    border: 1px var(--color-subtle) solid;
    padding: 2rem 3rem;
    box-shadow: var(--shadow-inset);
    transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
    transform: scale(0.95);
    filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
  }

  .block-highlight .carousel__slide-inner.is-active {
      transform: scale(1.05);
      filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.25));
      border: solid #5A5A5A 2px;
  }

  .block-highlight .highlight-meta-info,
  .block-highlight .highlight-meta-info * {
    margin: 0;
  }

  .block-highlight .highlight-meta-info {
    margin-bottom: var(--step--1);
    display: flex;
    gap: var(--step-1);
    color: rgba(0, 0, 0, 0.67);
  }

  .block-highlight .highlight-meta-info div {
    display: flex;
    gap: calc(var(--step--2) / 4);
    align-items: baseline;
  }

  .block-highlight .highlight-meta-info i {
    font-size: 0.73em;
  }

  .block-highlight h1 {
    margin-bottom: var(--step-2);
    font-size: var(--step-2);
  }

  .block-highlight h3 {
    margin-bottom: var(--step-3);
  }

  .highlight-image {
    margin: 0;
    margin-bottom: var(--step-3);
    height: calc(30vw * (2/3));
  }

  .highlight-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1.5625rem;
    border: 1px var(--color-subtle) solid;
  }

  .block-highlight .button-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  .block-highlight a.button {
    align-self: flex-start;
    margin-bottom: 0;
  }

  .block-highlight .carousel__slide-inner > *:not(a.button) {
    width: 30vw;
  }

  .block-highlight .carousel__slide-inner > * {
    margin-top: 0;
  }

  .block-highlight h2, .block-highlight p {
    font-size: var(--step-1);
  }

  .highlight-external-link-wrapper {
    flex-grow: 1;
    justify-content: flex-end;
  }

  @media screen and (max-width: 992px) {
    .block-highlight {
    --carousel-slide-gap: clamp(0.5rem, 5vw, 1rem);
    }

    .block-highlight .carousel__slide-inner {
      padding: 1.25rem;
    }

    .block-highlight .carousel__slide-inner > *:not(a.button) {
      width: 60vw;
    }

    .highlight-image {
      height: calc(60vw * (2/3));
    }

    .carousel__navigation, .block-highlight .carousel__slide-inner a.button {
      display: none;
    }
  }

  @media screen and (min-width: 993px) {
    .block-highlight {
      --step--2: clamp(0.434em, 0.3086em + 0.6269vw, 0.8em);
      --step--1: clamp(0.5208em, 0.3567em + 0.8208vw, 1em);
      --step-0: clamp(0.625em, 0.4109em + 1.0707vw, 1.25em);
      --step-1: clamp(0.75em, 0.4716em + 1.3919vw, 1.5625em);
      --step-2: clamp(0.9em, 0.5392em + 1.8041vw, 1.9531em);
      --step-3: clamp(1.08em, 0.6136em + 2.3322vw, 2.4414em);
      --step-4: clamp(1.296em, 0.6945em + 3.0077vw, 3.0518em);
      --step-5: clamp(1.5552em, 0.7811em + 3.8707vw, 3.8147em);
      --step-6: clamp(1.8662em, 0.8719em + 4.9715vw, 4.7684em);
      --step-7: clamp(2.2395em, 0.9646em + 6.3743vw, 5.9605em);
      --step-8: clamp(2.6874em, 1.0555em + 8.1596vw, 7.4506em);

      font-size: 0.9rem;
    }

    .block-highlight .highlight-meta-info {
      margin-bottom: var(--step--2);
      gap: var(--step-0);
      font-size: 1.27rem;
    }

    .block-highlight h1 {
      margin-bottom: var(--step--1);
      font-size: var(--step-1);
    }

    .block-highlight h3 {
      margin-bottom: var(--step-2);
    }

    .highlight-image {
      margin-bottom: var(--step-2);
    }

    .block-highlight p {
      margin-bottom: var(--step-3);
    }

    .block-highlight h2, .block-highlight p {
      font-size: var(--step-0);
    }
  }
  /* #endregion Highlight Block Styles */

  /* #region Expand/Collapse Styles */
  .btn-toggle > img.arrow-down {
    transition: transform 0.3s ease;
  }

  .btn-toggle {
    order: 2;
  }

  .faq-answer-inner,
  .article-inner {
    overflow: clip;
    height: 0;
    visibility: hidden;
    opacity: 0;
    order: 1;
    transition:
      opacity 0.5s ease,
      height 0.5s ease,
      visibility 0.5s ease;
  }

  .btn-toggle[aria-expanded="true"] + .faq-answer-inner,
  .btn-toggle[aria-expanded="true"] + .article-inner {
    height: auto;
    visibility: visible;
    opacity: 1;

    transition:
      opacity 0.5s ease,
      height 0.5s ease,
      visibility 0.5s ease;
  }

  .btn-toggle[aria-expanded="true"] > img.arrow-down {
    transform: rotate(180deg);
  }
  /* #endregion Expand/Collapse Styles */

  /* #region Marquee Styles */
  section:has(h1:hover) .marquee > .marquee-inner-wrapper,
  section:has(h2:hover) .marquee > .marquee-inner-wrapper,
  section:has(h3:hover) .marquee > .marquee-inner-wrapper,
  section:has(p:hover) .marquee > .marquee-inner-wrapper {
    /* animation-play-state: paused; */
    opacity: 0;
  }

  .marquee {
    position: absolute;

    top: 50%;
    left: 50%;

    white-space: nowrap;
    /* overflow: hidden; */

    /* reset width value */
    width: auto;

    transform: translate(-50%, -50%) rotate(-18deg);

    -webkit-user-select: none;
    /* Chrome, Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer */
    user-select: none;
    /* Standard syntax */
    pointer-events: none;

    z-index: var(--z-negative);
  }

  .marquee-inner-wrapper {
    display: inline-block;
    animation: marquee-text 30s linear infinite;
    white-space: nowrap;

    transform: translateY(-50%);
    transition: opacity 0.5s ease;
  }

  .marquee-inner {
    font-family: var(--heading-text);
    font-size: 11rem;
    /* 176px */
    line-height: 13.125rem;
    /* 210px */
    text-transform: uppercase;
    display: inline-block;
  }

  @keyframes marquee-text {
    0% {
      transform: translateX(20%);
    }

    100% {
      transform: translateX(-110%);
    }
  }
  /* #endregion Marquee Styles */

  /* #region Form Styles */
  .input-field {
    display: flex;
    justify-content: stretch;
    gap: 1rem;
    border-bottom: 1px solid var(--color-subtle);
    margin-bottom: 1.5rem;
  }

  .input-field:last-of-type {
    margin-bottom: 2rem;
  }

  .input-field > label {
    flex-shrink: 0;
  }

  .form-content {
    display: flex;
    flex-direction: column;
  }

  .form-btn-wrapper {
    align-self: center;
    width: min-content;
  }

  .form-btn-wrapper > button {
    display: flex;
    white-space: nowrap;
  }
  /* #endregion Form Styles */

  /* #region Contact Section Styles */
  #contact > div {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  /* #endregion Contact Section Styles */

  /* #region FAQ Page Styles */
  #faq > div {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .faq-item:not(:last-of-type),
  #essays-section > div:not(:last-of-type),
  #news-section > div:not(:last-of-type) {
    border-bottom: 1px solid var(--color-subtle);
  }

  .faq-question {
    font-style: italic;
    color: var(--color-text-subtle);
    cursor: pointer;
  }

  .faq-answer {
    color: var(--black);
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
  }

  img.arrow-down {
    width: 3rem;
  }

  #faq .faq-question p::before {
    content: var(--em-dash-space);
  }
  .btn-toggle {
    border: 0;
    background-color: transparent;
    cursor: pointer;
  }

  /* Glow effect for the arrow image when hovering over either the button or question */
  .faq-question:hover + .faq-answer .btn-toggle img,
  .btn-toggle:hover img {
    filter: invert(0.4);
    opacity: 0.9;
  }
  /* #endregion FAQ Section Styles */

  #foundation h3 {
    font-style: normal;
  }

  #team,
  #news,
  #essays,
  section.full,
  #section-faq {
    padding: 5vw;
  }

  #team .content {
    max-width: 60ch;
  }

  #team h3 {
  margin-top: var(--step-5);
  }

  /* #region Article List Styles */
  #news, #essays {
    justify-content: flex-start; /* have tag filters stay at the top of the page */
  }

  section:has(.article-list) {
    background-color: var(--color-surface);
  }
  .article-list {
    --grid-max-column-count: 3; /* fallback value */
    --grid-min-col-size: 20rem;
    --grid-column-gap: clamp(1rem, 2vw, 2rem);
    --grid-row-gap: clamp(1.5rem, 3vw, 3rem);

    /* grid calculations, do not touch */
    --grid-col-size-calc: calc(
      (100% - var(--grid-column-gap) * (var(--grid-max-column-count) - 1))
      / var(--grid-max-column-count)
    );
    --grid-col-min-size-calc: min(100%, max(var(--grid-min-col-size), var(--grid-col-size-calc)));

    display: grid;

    column-gap: var(--grid-column-gap);
    row-gap: var(--grid-row-gap);

    grid-template-columns: repeat(
      auto-fill,
      minmax(var(--grid-col-min-size-calc), 1fr)
    );

    grid-auto-rows: auto;

    font-size: var(--step-1);
    margin: 2rem 0 8rem 0;
  }

  .article-card {
    display: grid;
    gap: 0;
    grid-row: span 3;
    grid-template-rows: subgrid;
    grid-auto-rows: auto auto auto;

    padding: clamp(1rem, 2vw, 1.2rem);
    box-shadow: var(--shadow-inset);
    border-radius: 1.5625rem;
    border: transparent solid 1px;
    transition: transform 0.1s ease, border-color 0.1s ease;
    text-decoration: none;
  }

  .article-card:hover {
    transform: scale(1.05);
    border: solid #5A5A5A 1px;
  }

  .article-card[hidden] {
    display: none;
  }

  .article-card__link {
    color: var(--color-text-default);
    display: grid;

    gap: 0;

    grid-row: span 3;

    grid-template-rows: subgrid;

    grid-auto-rows: auto auto auto;
    text-decoration: none;
  }
  .article-card__link:hover {
    color: var(--color-text-default);
  }

  .article-card__image {
    margin: 0;
    object-fit: cover;
    border-radius: 1.5625rem;
    border: 1px var(--color-subtle) solid;

    aspect-ratio: 3 / 2;

    overflow: hidden;
    position: relative;

    align-self: start;

    margin-bottom: var(--step--1);
  }

  .article-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: var(--color-surface);
  }

  .article-card__metadata {
    font-size: var(--step-0);
    margin-bottom: var(--step--1);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: var(--step--2);
    color: rgba(0, 0, 0, 0.67);
  }

  .article-card__metadata-wrapper {
    display: flex;
    flex-direction: column;
    /* flex-wrap: wrap; */
  }

  .article-card__external-link-wrapper {
    display: flex;
    justify-content: flex-end;
    flex-grow: 1;
  }

  .article-card__external-link-wrapper .arrow-out-icon {
    background-color: var(--color-subtle);
  }

  .article-card__title {
    margin: 0;
    font-family: var(--heading-text);
    font-size: 1.25em;

    margin-bottom: var(--step--2);
  }

  .article-card__subtitle {
    margin: 0;
    font-size: 1.1em;
    font-style: italic;
    text-transform: none;
  }

  .article-card__tags {
    font-family: var(--heading-text);
    font-size: var(--step--1);
    color: var(--white);
    text-decoration: none;
    display: inline-flex;
    gap: 0.5rem;
    padding-left: 0;
    flex-wrap: wrap;

    li {
      display: inline-block;
      padding: 0.25rem 0.75rem;
      border-radius: 9999px;
      background-color: var(--color-subtle);
    }
  }

  .tag-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2rem;
    margin-top: 6rem;
    justify-self: flex-start;
  }

  .tag-filter__tag {
    font-family: var(--heading-text);
    font-size: var(--step-0);
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    border: 1px solid var(--color-subtle);
    background-color: transparent;
    color: inherit;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .tag-filter__tag:hover {
    background-color: color-mix(in srgb, var(--color-subtle) 20%, transparent);
  }

  .tag-filter__tag.is-active {
    background-color: var(--color-subtle);
    color: var(--white);
  }

  .article-list__empty-message {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, 0%);
    display: none;
    grid-column: 1 / -1; /* span full grid width */
    text-align: center;
    color: var(--color-text-subtle);
    font-size: var(--step-2);
    padding: 2rem 0;
  }

  .article-list[data-empty] .article-list__empty-message {
    display: block;
  }

  .tag-filter__reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    border: 1px solid var(--color-subtle);
    background-color: transparent;
    color: inherit;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .tag-filter__reset:hover {
    background-color: color-mix(in srgb, var(--color-subtle) 20%, transparent);
  }

  .tag-filter__reset i {
    font-size: 0.67em;
    line-height: 1;
  }
  /* #endregion Article List Styles */

  /* #region Instrument Page Styles */
  .call-open {
    font-family: var(--heading-text);
    font-size: var(--step-1);
    /* background-color: var(--color-primary); */
  }

  .instrument-logo {
    margin-top: 4rem;
    transform: translateX(-5%);
  }

  .instrument .content {
    margin-top: 0;
  }

  .instrument h3 {
    font-style: normal;
  }

  .content:has(.programs-year) {
    container-type: inline-size;
    container-name: content;
    width: 100%;
  }

  .programs-year {
    display: flex;
    flex-direction: row;
    gap: clamp(1rem, 5vw, 4rem);
  }

  .program-year {
    align-self: flex-start;
    /* border: 1px solid var(--color-subtle); */
    /* background-color: transparent; */
    box-shadow: none;
  }

  .program-year:hover {
    transform: scale(1);
    pointer-events: none;
  }

  .program {
    position: relative;
    margin-bottom: 6rem;
  }

  .program a {
    display: block;
    color: var(--primary-color);
  }

  .program h2 {
    font-family: var(--heading-text);
    margin-top: 0;
    margin-bottom: 0;
  }

  .program .manicule {
    position: absolute;
    font-size: calc(var(--step-6) * 1.2);
    /* transition: opacity 0.2s ease, transform 0.2s ease; */
    opacity: 0;
  }

  .program:hover .manicule {
    opacity: 1;
  }

  /* responsive design for smaller screens */
  @container content (max-width: 640px) {
    .programs-year {
      flex-direction: column;
    }

    .program {
      margin-bottom: 3rem;
    }

    .manicule {
      display: none;
    }
  }
  /* #endregion Instrument Page Styles */

  /* #region Pop-Up Styles */
  .block-popup-button {
    margin: 1.5rem 0;
  }

  /* Centered Popup Styles with Blur Background */
  .popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 100vw;
    max-height: 100vh;
    z-index: var(--z-overlay);
    align-items: center;
    justify-content: center;
  }

  .popup-overlay-with-close-button > .popup-container {
    width: 65vw;
    height: 90vh;
  }

  .popup-overlay.active {
    display: flex;
  }

  body > .popup-overlay.active {
    z-index: var(--z-popover);
  }

  .popup-backdrop {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 130vw;
    height: 100%;
    backdrop-filter: blur(3px); /* Blur effect */
    -webkit-backdrop-filter: blur(3px); /* For Safari */
    /* background-color: rgba(255, 255, 0, 0.4); */
  }

  .popup-container {
    position: relative;
    width: 75vw;
    height: 95vh;
    border-radius: 3rem;
    overflow: hidden;
    z-index: var(--z-overlay);
    display: flex;
    flex-direction: column;
    background-color: var(--color-surface);
  }

  .popup-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    box-shadow: var(--shadow-inset);
    pointer-events: none;
    z-index: calc(var(--z-overlay) + 1);
  }

  #popup-navigation > .popup-containter {
    width: 90vw;
  }

  .popup-close {
    font-family: var(--heading-text);
    position: absolute;
    top: 2rem;
    right: 2rem;
    background: none;
    border: none;
    font-size: var(--step-5);
    cursor: pointer;
    color: var(--color-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-overlay);
    border-radius: 50%;
    transition: all 0.2s ease;
  }

  .popup-close:hover {
    /*background-color: rgba(1, 1, 1, 0.1); /* red-500 with opacity */
    color: black; /* red-500 */
    transform: scale(1.3);
    transform: rotate(180deg);
  }

  .popup-content {
    flex: 1;
    overflow-y: auto;
    padding: 4rem;
    position: relative;
    margin: 0 auto;
    width: 100%;
    scrollbar-color: var(--color-subtle) var(--color-surface);
    scrollbar-width: thin;
  }

  /* Make sure images don't overflow */
  .popup-content img {
    max-width: 100%;
    height: auto;
  }

  .popup-content .block-highlight {
    margin-left: 0;
    margin-right: 0;
    width: 120%;
  }

  /* Lock body scroll when popup is open */
  body.popup-open {
    overflow: hidden;
  }
  /* #endregion Pop-Up Styles */

  /* #region Transition Screen Styles */
  #t-container {
    background-color: var(--black);
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-top);
  }

  #t-container-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    transform: rotate(-25deg) translate3d(67%, -25%, 0);

    /* Optimizations */
    will-change: transform;
    /* Hint the browser to optimize */
    contain: layout paint;
    /* Limit the scope of influence to this element */
  }

  .t-marquee {
    /* width: min-content; */
    width: calc((100svw / 7 + 2rem) * 32);
    /* Total width based on logo size */
    animation: marquee 10s linear infinite;

    /* Optimizations */
    transform: translate3d(0, -25%, 0);
    /* Use translate3d for GPU acceleration */
    will-change: transform;
    /* Hint the browser to optimize */
    contain: layout paint;
    /* Limit the scope of influence to this element */
  }

  .t-marquee.reverse {
    animation-direction: reverse;
  }

  @keyframes marquee {
    0% {
      transform: translate3d(0, -25%, 0);
    }

    100% {
      transform: translate3d(0, 25%, 0);
    }
  }

  .logo-vertical {
    width: calc(100svw / 7);
    padding: 1rem;
    box-sizing: border-box;
    /* Ensure consistent sizing */
  }

  .logo-vertical-inner {
    width: calc(100svw / 7 - 2rem);
    box-sizing: border-box;
    /* Ensure consistent sizing */
    /* padding: 2rem 0; */
  }

  .fade-out {
    animation: fadeOut 1s forwards;
    pointer-events: none;
  }

  .zoom-in {
    animation: zoomIn 1s forwards;
  }

  @keyframes fadeOut {
    0% {
      opacity: 1;
    }

    100% {
      opacity: 0;
    }
  }

  @keyframes zoomIn {
    0% {
      transform: scale(1) rotate(-25deg) translate3d(67%, -25%, 0);
    }

    100% {
      transform: rotate(-25deg) translate3d(67%, -25%, 0) scale(3);
    }
  }
  /* #endregion Transition Screen Styles */

  /* #region Spinning Animation */
  img.spinning {
    width: 100%;
    height: 100%;
    animation: rotate-animation 3s ease-in-out forwards;
    transform-origin: center;
  }

  @keyframes rotate-animation {
    0% {
      transform: rotate(0deg);
    }
    10% {
      transform: rotate(-45deg);
    }
    25% {
      transform: rotate(0deg);
    }
    35% {
      transform: rotate(45deg);
    }
    50% {
      transform: rotate(0deg);
    }
    75% {
      transform: rotate(1485deg);
    }
    90% {
      transform: rotate(1420deg);
    }

    100% {
      transform: rotate(1440deg);
    }
  }
  /* #endregion Spinning Animation */

  /* #region Responsive Design Styles */
  /* On screens that are 992px or less, set the background color to blue */
  @media screen and (max-width: 992px) {

    #spin-logo {
      bottom: 1.5rem;
      left: 1.5rem;
      width: 6rem;
    }

    #nav-footer-right {
      bottom: 1.5rem;
      right: 1.5rem;
    }
    #nav-header-left {
      top: 1.5rem;
      left: 1.5rem;
    }

    .popup-container {
      width: 90vw;
    }

    body {
      font-size: var(--step-2);
    }
  }

  /* On screens that are 600px or less, set the background color to olive */
  @media screen and (max-width: 600px) {
    body {
      font-size: var(--step-2);
    }
    h1 {
      margin-bottom: 2rem;
    }

    #spin-logo {
      bottom: 1rem;
      left: 1rem;
      width: 4rem;
    }

    #nav-footer-right {
      bottom: 1rem;
      right: 1rem;
    }

    #nav-header-left {
      top: 0.5rem;
      left: 0.5rem;
    }

    img.arrow-down {
      width: 2rem;
    }

    .popup-container {
      width: 90vw;
    }

    .popup-content {
      padding: 1.5rem;
    }

    .block-image,
    .block-video {
      padding: 0;
      margin: 0;
    }

    .block-line-spacing {
      padding-top: 1rem;
      padding-bottom: 1rem;
    }
  }
  /* #endregion Responsive Design Styles */

  /* ================ Front Page ================= */
  #front-logo {
    width: auto;
    max-width: 60vw;
    max-height: 60vh;
  }

  #front-logo img {
    height: 60vw;
    max-height: 60vh;
    max-width: 60vw;
  }

  #front-logo img:not(.current) {
    opacity: 0.3;
    display: none;
  }

  #front-logo img.current {
    opacity: 1;
    display: auto;
  }
}

@layer utilities {
  .hidden {
    display: none;
  }

  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .upper {
    text-transform: uppercase;
  }

  .grey {
    color: var(--color-subtle);
  }

  /* .unicode-nowrap {
    display: inline-block;
    white-space: nowrap;
  } */

  /* distance holder */
  .block-line-spacing {
    display: block;
    width: 100%;
    clear: both;
    height: 1rem;
    padding-top: var(--step-4);
    padding-bottom: var(--step-4);
  }

  /* Visible line */
  .block-line-visible {
    display: block;
    width: 100%;
    clear: both;
    margin: var(--step-7) 0;
    border-bottom: 1px solid var(--color-subtle);
  }

  .glyph-word {
    display: inline-block;
    hyphens: auto;
    overflow-wrap: break-word;
  }
}