:root {
  --color--bg-off-white: var(--swatch--light);
  --text--font-serif: dashiell-bright, sans-serif;
  --color--text: var(--swatch--dark);
  --text--body-desktop: 1.15rem;
  --color--bg-white: var(--swatch--white);
  --text--heading-desktop: 1.5rem;
  --size--border: 1px;
  --color--border: var(--swatch--dark);
  --text--font-sans: archivo-narrow-variable, sans-serif;
  --swatch--white: white;
  --padding--section-desktop: var(--size--medium-desktop);
  --swatch--dark-20o: #3e502733;
  --padding--site-desktop: var(--size--large-desktop);
  --leading-trim--serif-heading-top: -.35em;
  --leading-trim--serif-heading-bottom: -.35em;
  --leading-trim--sans-body-top: -.2em;
  --leading-trim--sans-body-bottom: -.45em;
  --size--regular: 1rem;
  --text--heading-mobile: 1.25rem;
  --text--subheading-desktop: var(--text--body-desktop);
  --text--subheading-mobile: var(--text--body-desktop);
  --text--blurb-desktop: var(--text--heading-desktop);
  --text--blurb-mobile: var(--text--heading-mobile);
  --text--body-mobile: 1rem;
  --swatch--dark: #3e5027;
  --swatch--light: #f8fded;
  --padding--site-mobile: var(--size--large-desktop);
  --padding--section-mobile: var(--size--medium-desktop);
  --size--large-desktop: 2.5rem;
  --size--medium-desktop: 1.5rem;
  --size--small: .75rem;
  --color--shadow: var(--swatch--dark-20o);
  --swatch--dark-50t: #3e502780;
  --size--large-mobile: 1.5rem;
  --size--medium-mobile: 1rem;
}

body {
  background-color: var(--color--bg-off-white);
  font-family: var(--text--font-serif);
  color: var(--color--text);
  font-size: var(--text--body-desktop);
  font-feature-settings: "pnum" on, "onum" on, "ordn" on, "liga" on, "ss02" on, "ss03" on;
  line-height: 1.4;
}

h1 {
  font-size: var(--text--heading-desktop);
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 400;
  line-height: 1.4;
  block-size: inherit !important;
}

h2 {
  border-bottom-style: solid;
  border-bottom-width: var(--size--border);
  border-bottom-color: var(--color--border);
  font-size: var(--text--heading-desktop);
  margin-top: calc(6 * var(--padding--section-desktop));
  margin-left: calc(-1 * var(--padding--section-desktop));
  margin-right: calc(-1 * var(--padding--section-desktop));
  padding-left: var(--padding--section-desktop);
  padding-right: var(--padding--section-desktop);
  margin-bottom: calc(var(--padding--section-desktop)  + var(--leading-trim--serif-heading-top));
  padding-bottom: calc(var(--padding--section-desktop)  + var(--leading-trim--serif-heading-bottom));
  padding-top: calc(var(--padding--section-desktop)  + var(--leading-trim--serif-heading-top));
  font-style: italic;
  font-weight: 400;
  line-height: 1.4;
}

h3 {
  font-size: var(--text--heading-desktop);
  margin-bottom: .8rem;
  margin-top: calc(4 * var(--padding--section-desktop));
  font-style: italic;
  font-weight: 400;
  line-height: 1.3;
}

h4 {
  font-family: var(--text--font-serif);
  font-size: var(--text--heading-desktop);
  margin-bottom: -1.8rem;
  margin-top: calc(2 * var(--padding--section-desktop));
  max-width: 29%;
  padding-top: 0;
  font-weight: 400;
  line-height: 1.4;
}

p {
  font-size: var(--text--body-desktop);
  margin-bottom: 1rem;
  margin-left: 33%;
  line-height: 1.6;
}

a {
  color: inherit;
  text-underline-offset: .15em;
  text-decoration: none;
  text-decoration-thickness: 1px !important;
}

a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
  display: inline-block;
}

figure {
  margin-left: auto;
  margin-top: calc(2 * var(--padding--section-desktop));
  margin-bottom: calc(3 * var(--padding--section-desktop));
  width: 100%;
  max-width: 67% !important;
}

figcaption {
  border-top: var(--size--border) none var(--color--border);
  font-family: var(--text--font-sans);
  text-align: left;
  margin-top: .5rem;
  padding-left: 0%;
  line-height: 1.3;
}

.main {
  background-color: var(--swatch--white);
  flex-flow: column;
  flex: 1;
  justify-content: space-between;
  display: flex;
  overflow: clip;
}

.aside-header {
  border-bottom: var(--size--border) solid var(--color--border);
  background-color: var(--swatch--white);
  font-size: var(--text--heading-desktop);
  text-align: center;
  justify-content: center;
  align-items: center;
  font-style: italic;
  display: flex;
}

.aside-subheader {
  background-color: var(--swatch--white);
  flex: 1;
  justify-content: center;
  align-items: center;
  display: flex;
  overflow: scroll;
}

.aside-nav {
  background-color: var(--color--bg-white);
  font-family: var(--text--font-sans);
  margin-top: auto;
}

.main-nav {
  z-index: 100;
  grid-column-gap: var(--padding--section-desktop);
  grid-row-gap: var(--padding--section-desktop);
  border-bottom-style: solid;
  border-bottom-width: var(--size--border);
  border-bottom-color: var(--color--border);
  background-color: var(--swatch--white);
  box-shadow: 0 2px 0 0 var(--swatch--dark-20o);
  font-size: var(--text--heading-desktop);
  top: var(--padding--site-desktop);
  max-width: 100vw;
  position: sticky;
}

.main-footer {
  font-family: var(--text--font-sans);
  flex-flow: column;
  display: flex;
}

.border {
  z-index: 100;
  border: var(--padding--site-desktop) solid var(--color--bg-off-white);
  pointer-events: none;
  position: fixed;
  inset: 0%;
}

.border--inner {
  border: var(--size--border) solid var(--color--border);
  width: 100%;
  height: 100%;
}

.background {
  z-index: 100;
  pointer-events: none;
  mix-blend-mode: exclusion;
  padding: var(--padding--site-desktop);
  position: fixed;
  inset: 0%;
}

.padding--section {
  padding: var(--padding--section-desktop);
}

.aside-nav__links {
  grid-column-gap: var(--padding--section-desktop);
  grid-row-gap: var(--padding--section-desktop);
  border-top: var(--size--border) solid var(--color--border);
  display: flex;
}

.aside-nav__links.padding--section {
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.aside-nav__footer {
  border-top: var(--size--border) solid var(--color--border);
  justify-content: space-between;
  align-items: baseline;
  display: flex;
}

.leading-trim.serif-heading {
  margin-top: var(--leading-trim--serif-heading-top);
  margin-bottom: var(--leading-trim--serif-heading-bottom);
}

.leading-trim.sans-body {
  margin-top: var(--leading-trim--sans-body-top);
  margin-bottom: var(--leading-trim--sans-body-bottom);
}

.main-nav__link {
  white-space: nowrap;
  font-style: italic;
}

.main-nav__link.w--current {
  text-decoration: underline;
}

.main-nav__container {
  grid-column-gap: var(--padding--section-desktop);
  grid-row-gap: var(--padding--section-desktop);
  display: flex;
}

.background--exclusion {
  background-color: #000;
  width: 100%;
  height: 100%;
}

.footer__clock {
  text-transform: capitalize;
}

.footer__buttons {
  grid-column-gap: var(--padding--section-desktop);
  grid-row-gap: var(--padding--section-desktop);
  text-transform: uppercase;
  align-items: baseline;
  display: flex;
}

.footer__menu {
  display: none;
}

.nav__header {
  text-transform: uppercase;
}

.nav__links-container {
  grid-column-gap: .75rem;
  grid-row-gap: .75rem;
  flex-flow: wrap;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  grid-auto-flow: row;
  align-self: stretch;
  display: grid;
}

.nav__link {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  text-transform: capitalize;
  justify-content: flex-start;
  align-items: baseline;
  display: flex;
}

.nav__icon {
  border: var(--size--border) solid var(--color--border);
  background-color: var(--color--bg-off-white);
  justify-content: center;
  align-items: center;
  width: 1.5rem;
  height: .75rem;
  display: flex;
  position: relative;
  overflow: hidden;
}

.main-footer__breadcrumbs {
  flex-flow: row;
  justify-content: space-between;
  align-items: baseline;
  display: flex;
}

.subheader__container {
  margin-bottom: var(--padding--section-desktop);
  grid-column-gap: var(--padding--site-desktop);
  grid-row-gap: var(--padding--site-desktop);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.subheader__image {
  width: 75%;
  position: relative;
}

.subheader__text {
  font-size: var(--text--heading-desktop);
  text-align: center;
  font-style: italic;
}

.subheader__image-src {
  aspect-ratio: 1;
  object-fit: contain;
}

.subheader__image-colour {
  background-color: var(--color--text);
  pointer-events: none;
  mix-blend-mode: screen;
  position: absolute;
  inset: 0%;
}

.nav__icon-image {
  display: none;
}

.font__serif-detail {
  font-family: Dashiell Bright, sans-serif;
  line-height: 1;
}

.video-wrapper {
  z-index: 100;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  display: flex;
  position: fixed;
  inset: 0%;
}

.video-splash {
  z-index: 101;
  padding: var(--padding--site-desktop);
  justify-content: center;
  align-items: center;
  margin-top: auto;
  margin-bottom: auto;
  font-size: 2.25vw;
  font-style: italic;
  display: flex;
}

.video-controls {
  z-index: 102;
  padding: var(--padding--site-desktop);
  justify-content: center;
  align-items: center;
  display: flex;
}

.main-footer__content {
  gap: calc(4 * var(--padding--section-desktop));
  flex-flow: column;
  height: 100%;
  display: flex;
}

.main-footer__small-print {
  grid-column-gap: var(--size--regular);
  grid-row-gap: var(--size--regular);
  flex-flow: column;
  margin-top: auto;
  display: flex;
}

.main-footer__contact {
  font-family: var(--text--font-serif);
  font-size: var(--text--heading-desktop);
}

.main-footer__breadcrumbs-wrapper {
  border-top: var(--size--border) solid var(--color--border);
  border-bottom: var(--size--border) solid var(--color--border);
}

.main-footer__content-wrapper {
  background-color: var(--color--bg-off-white);
  flex: 1;
  display: flex;
}

.comment {
  z-index: 1000;
  margin-top: var(--padding--site-desktop);
  margin-right: var(--padding--site-desktop);
  color: red;
  text-align: left;
  background-color: #fff;
  border-style: solid;
  border-width: 2px;
  max-width: 250px;
  padding: .5rem 1rem;
  font-family: Inconsolata, monospace;
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
  position: fixed;
  inset: 1rem 1rem auto auto;
  box-shadow: 0 2px 5px #0003;
}

.nav__page-link.w--current {
  text-decoration: underline;
}

.main-nav__slider {
  overflow: scroll;
}

@media screen and (max-width: 991px) {
  .video-splash__text {
    font-size: var(--text--heading-desktop);
  }
}

@media screen and (max-width: 767px) {
  body {
    background-color: var(--color--bg-white);
  }

  h4 {
    max-width: none;
    margin-bottom: .5rem;
  }

  p {
    margin-left: 0%;
  }

  .main {
    border-top: var(--size--border) solid var(--color--border);
  }

  .aside-subheader {
    aspect-ratio: 1;
  }

  .aside-nav {
    z-index: 100;
    border-bottom: var(--size--border) solid var(--color--border);
    background-color: #0000;
    position: fixed;
    inset: auto 0% 0%;
  }

  .main-nav {
    top: 0;
  }

  .border {
    display: none;
  }

  .aside-nav__links {
    z-index: 1;
    background-color: var(--color--bg-white);
    box-shadow: 0 -3px 0 0 var(--swatch--dark-20o);
    position: relative;
  }

  .aside-nav__footer {
    z-index: 2;
    background-color: var(--color--bg-white);
    box-shadow: 0 -3px 0 0 var(--swatch--dark-20o);
    position: relative;
  }

  .footer__menu {
    display: block;
  }

  .nav__links-container {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  .comment {
    margin-top: 4rem;
    margin-right: 0;
  }

  .video-controls__play {
    text-transform: capitalize;
  }
}

@media screen and (max-width: 479px) {
  .main-nav__container {
    width: auto;
  }

  .nav__links-container {
    grid-template-columns: 1fr 1fr 1fr;
  }
}


@font-face {
  font-family: 'Dashiell Bright';
  src: url('../fonts/dashiellbright-regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}