@charset "UTF-8";
/*
Theme Name: Wild Card Common Theme
Theme URI: https://studiomothership.com
Author: Studio Mothership
Author URI: https://studiomothership.com/
Description: A skeleton theme
Version: 1.0.0
License: 
License URI: 
Text Domain: sm_wccommon-theme
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

*/
/* Box sizing rules */
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  -ms-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  -webkit-margin-after: 0;
  margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role=list],
ol[role=list] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

/* Set shorter line heights on headings and interactive elements */
h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  -webkit-text-decoration-skip: ink;
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

:root {
  --space-s: 20px;
  --space-m: calc(var(--space-s) * 2);
  --space-l: calc(var(--space-s) * 3);
  --neutral: #E8E1CE;
  --blue: #4aceed;
  --fern: #71b320;
  --green: #009c43;
  --orange: #ff6633;
  --pink: #fcb4e6;
  /* @link https://utopia.fyi/type/calculator?c=360,40,1.2,2560,80,1.25,0,0,&s=0.75,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
  --font-card: clamp(1.25rem, -0.4167rem + 2.6042vw, 3.75rem);
  /* @link https: //utopia.fyi/type/calculator?c=360,30,1.2,2555,50,1.25,0,0,&s=0.75,1.5,s-l&g=s,l,xl,12 */
  --font-slide: clamp(1.25rem, 0.9432rem + 1.3636vw, 3.125rem);
}

/* Sans-Serif Font Weights and Styles 
* Brandon Grotesque 
* Thin 100
* Light 300
* Regular 400
* Medium 500
* Bold 700
*/
@-webkit-keyframes bounce {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-25%);
    transform: translateY(-25%);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes bounce {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-25%);
    transform: translateY(-25%);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@-webkit-keyframes ellipsis {
  to {
    width: 1.25em;
  }
}
@keyframes ellipsis {
  to {
    width: 1.25em;
  }
}
@-webkit-keyframes ellipsis-margin {
  to {
    margin-right: 0;
  }
}
@keyframes ellipsis-margin {
  to {
    margin-right: 0;
  }
}
body {
  font-family: "brandon-grotesque", sans-serif;
}

body,
.main {
  scroll-behavior: smooth;
}

.btn {
  border-radius: 0.5rem;
  color: currentColor;
  font-family: "brandon-grotesque", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.cta {
  background-color: white;
  padding: var(--space-s);
  position: relative;
  z-index: 99;
}
@media (min-width: 46.25em) {
  .cta {
    height: 100dvh;
  }
}
.cta .cta__container {
  background-color: var(--neutral);
  border-radius: 20px;
  height: 100%;
  padding: var(--space-m);
  font-family: "brandon-grotesque", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.cta #can_embed_form {
  background: inherit !important;
  border-color: var(--neutral) !important;
  font-family: "brandon-grotesque" !important;
  padding: 0 !important;
}
.cta #can_embed_form h3,
.cta #can_embed_form h4,
.cta #can_embed_form h5,
.cta #can_embed_form h6 {
  font-family: "brandon-grotesque" !important;
}
.cta #can_embed_form h2,
.cta #donate_auto_modal h2,
.cta #donate_make_recurring_modal h2 {
  font-family: "Basteleur" !important;
  font-size: var(--font-slide) !important;
  text-align: center !important;
}
.cta #can_embed_form h3,
.cta .event_campaign #can_embed_form > h2,
.cta .letter #can_embed_form h2.line {
  border: none !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  margin: 3em 0 0 0 !important;
  padding-bottom: 10px !important;
  text-transform: uppercase;
}
.cta .lined_after_title,
.cta #can_embed_form_inner > h2 + h4,
.cta #can_embed_form_inner > .last_line + h4,
.cta #can_embed_form .action_sidebar > h4:not(.sidebartitle),
.cta #can_embed_form #select_tickets > h4,
.cta #can_embed_form #letter-form > div > h4,
.cta #can_embed_form #letter-form #form_col1 > h4,
.cta #can_embed_form #letter-form #form_col2 > h4,
.cta #can_embed_form h3 + h4,
.cta .event_campaign #can_embed_form > h2 + h4,
.cta .letter #can_embed_form h2.line + h4 {
  font-size: var(--font-slide) !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  text-align: left !important;
}
.cta .lined_after_title:after,
.cta #can_embed_form_inner > h2 + h4:after,
.cta #can_embed_form_inner > .last_line + h4:after,
.cta #can_embed_form .action_sidebar > h4:not(.sidebartitle):after,
.cta #can_embed_form #select_tickets > h4:after,
.cta #can_embed_form #letter-form > div > h4:after,
.cta #can_embed_form #letter-form #form_col1 > h4:after,
.cta #can_embed_form #letter-form #form_col2 > h4:after,
.cta #can_embed_form h3 + h4:after,
.cta .event_campaign #can_embed_form > h2 + h4:after,
.cta .letter #can_embed_form h2.line + h4:after {
  content: initial !important;
}
.cta .can_button,
.cta #donate_auto_modal input[type=submit],
.cta #donate_auto_modal .button,
.cta #donate_make_recurring_modal input[type=submit],
.cta #donate_make_recurring_modal .button,
.cta #can_embed_form input[type=submit],
.cta #can_embed_form .button {
  background-color: var(--pink) !important;
  border-radius: 0.5rem !important;
  color: black !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  padding: calc(0.667em + 2px) calc(1.333em + 2px) !important;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.cta .can_button:hover,
.cta #donate_auto_modal input[type=submit]:hover,
.cta #donate_auto_modal .button:hover,
.cta #donate_make_recurring_modal input[type=submit]:hover,
.cta #donate_make_recurring_modal .button:hover,
.cta #can_embed_form input[type=submit]:hover,
.cta #can_embed_form .button:hover {
  background-color: black !important;
  color: var(--pink) !important;
}
.cta .report-button {
  display: inline-block;
  margin: 50px 0;
}
.cta .report-button a {
  background-color: var(--pink);
  display: block;
  padding: calc(0.667em + 2px) calc(1.333em + 2px);
}
.cta .report-button a:hover {
  background-color: black !important;
  color: var(--pink) !important;
}

.data-cards {
  background-color: white;
  padding: var(--space-s);
  z-index: 999999;
  position: relative;
  display: grid;
  grid-template-rows: repeat(7, 350px);
  grid-template-columns: 1fr;
  grid-gap: var(--space-s);
}
@media (min-width: 41.25em) {
  .data-cards {
    display: grid;
    grid-template-rows: repeat(4, 300px);
    grid-template-columns: 1fr 1fr;
    grid-gap: var(--space-s);
  }
}
@media (min-width: 81.25em) {
  .data-cards {
    display: grid;
    grid-template-rows: repeat(5, calc((100% - var(--space-m)) / 3));
    grid-template-columns: repeat(4, 1fr);
    grid-gap: var(--space-s);
    height: 100vh;
  }
}

.data-card {
  cursor: pointer;
  grid-column: span 1;
  grid-row: span 1;
  position: relative;
}
@media (max-width: 41.25em) {
  .data-card.column-1, .data-card.column-2, .data-card.column-3 {
    grid-column: span 1;
  }
}
@media (min-width: 81.25em) {
  .data-card.column-1 {
    grid-column: span 1;
  }
}
@media (min-width: 81.25em) {
  .data-card.column-2 {
    grid-column: span 2;
  }
}
@media (min-width: 81.25em) {
  .data-card.column-3 {
    grid-column: span 3;
  }
}
@media (min-width: 81.25em) {
  .data-card.row-1 {
    grid-row: span 1;
  }
}
@media (min-width: 81.25em) {
  .data-card.row-2 {
    grid-row: span 2;
  }
}
@media (min-width: 81.25em) {
  .data-card.row-3 {
    grid-row: span 3;
  }
}
.data-card__front, .data-card__back {
  background-color: var(--neutral);
  border-radius: 20px;
  will-change: transform;
  overflow: hidden;
  background-position: center;
  pointer-events: none;
  padding: var(--space-s) var(--space-l);
  height: 100%;
  width: 100%;
}
.data-card__front {
  position: absolute;
  top: 0;
  left: 0;
}
.data-card__headline {
  font-family: "brandon-grotesque", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: var(--font-card);
  line-height: 1.1;
  margin-top: 0;
  margin-bottom: 1rem;
}
.data-card__text {
  font-family: "brandon-grotesque", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 26px;
  line-height: 1.3;
  margin-top: 0;
  margin-bottom: 0;
}
.data-card__cat {
  position: absolute;
  font-family: "brandon-grotesque", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 16px;
  text-transform: uppercase;
}
.data-card__cat--left {
  top: calc(var(--space-s) + var(--space-s) / 2);
  left: var(--space-s);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}
.data-card__cat--right {
  right: var(--space-s);
  bottom: calc(var(--space-s) + var(--space-s) / 2);
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}

.site-footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  padding: var(--space-s);
}

.map-section {
  background-color: white;
  font-family: "brandon-grotesque", sans-serif;
  font-weight: 700;
  font-style: normal;
  display: grid;
  grid-gap: var(--space-s);
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  font-size: 16px;
  height: 100dvh;
  padding: var(--space-s);
  position: relative;
  width: 100dvw;
  z-index: 99;
}

.cta-button {
  margin: 0 auto;
  width: 100%;
  grid-column: 1/-1;
  text-align: center;
}
.cta-button a {
  background-color: var(--pink);
  display: block;
  padding: calc(0.667em + 2px) calc(1.333em + 2px);
}
.cta-button a:hover {
  background-color: black !important;
  color: var(--pink) !important;
}

.map {
  border-radius: 20px;
  grid-column: 1/5;
  grid-row: 1/4;
  height: 100%;
  width: 100%;
}
@media (min-width: 46.25em) {
  .map {
    grid-column: 1/4;
    grid-row: 1/4;
  }
}

.leaflet-touch .leaflet-bar {
  border: none;
}
.leaflet-touch .leaflet-bar a {
  border-radius: 5px !important;
  border: none;
  line-height: 27px;
  margin-bottom: 5px;
  height: 30px;
  width: 30px;
}

.leaflet-left .leaflet-control {
  margin-top: var(--space-s);
  margin-left: var(--space-s);
}

.map-card {
  background-color: var(--neutral);
  border-radius: 20px;
  display: none;
  grid-column: 1/5;
  grid-row: 2/4;
  position: relative;
  padding: 30px var(--space-l);
  text-transform: uppercase;
  z-index: 999999999999;
}
.map-card.show {
  display: block;
}
@media (max-width: 46.24em) {
  .map-card.show {
    margin: var(--space-s);
  }
}
@media (min-width: 46.25em) {
  .map-card {
    display: block;
    grid-column: 4/5;
    grid-row: 1/3;
  }
}
.map-card:before, .map-card:after {
  content: "Details";
  position: absolute;
  text-transform: uppercase;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}
.map-card:before {
  top: calc(var(--space-s) + var(--space-s) / 2);
  left: var(--space-s);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.map-card:after {
  right: var(--space-s);
  bottom: calc(var(--space-s) + var(--space-s) / 2);
}
.map-card__close {
  background-color: var(--neutral);
  background-image: url("../images/close-icon.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 20px 20px;
  border: none;
  font-size: 18px;
  font-weight: bold;
  height: 40px;
  width: 40px;
  position: absolute;
  top: var(--space-s);
  right: var(--space-s);
  cursor: pointer;
}
@media (min-width: 46.25em) {
  .map-card__close {
    display: none;
  }
}
.map-card__name {
  font-size: 18px;
  font-weight: bold;
}
.map-card__content {
  line-height: 1;
  overflow: scroll;
}
.map-card__content div {
  margin-bottom: 1em;
}

.map-controls {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  grid-column: 1/5;
  grid-row: 1;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  margin: var(--space-s) var(--space-s) 0 var(--space-s);
  max-width: 500px;
  z-index: 99999999999;
}
@media (min-width: 46.25em) {
  .map-controls {
    grid-column: 2/4;
    left: initial;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    gap: var(--space-s);
    margin-left: auto;
  }
}
.map-controls .map-controls-icon {
  background-color: var(--neutral);
  background-image: url("../images/control-icon.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 30px 30px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  display: block;
  width: 40px;
  height: 40px;
  margin-left: auto;
  position: relative;
  z-index: 99999999999;
}
@media (min-width: 46.25em) {
  .map-controls .map-controls-icon {
    display: none;
  }
}
.map-controls .geocode {
  background-color: var(--neutral);
  border-radius: 10px;
  display: none;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  padding: 15px;
  position: relative;
  min-width: 250px;
  width: 100%;
}
@media (min-width: 46.25em) {
  .map-controls .geocode {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
.map-controls .geocode-label {
  display: block;
  font-family: "brandon-grotesque", sans-serif;
  font-size: 16px;
  text-transform: uppercase;
  margin-bottom: 15px;
}
.map-controls .geocode-results {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute;
  top: calc(100% - 15px);
  left: 0;
  background: var(--neutral);
  width: 100%;
  overflow-y: auto;
  z-index: 1000;
}
.map-controls .geocode-result-item {
  padding: 15px;
  cursor: pointer;
}
.map-controls .geocode-result-item:hover {
  background: #f0f0f0;
}
.map-controls #geocode-input {
  border: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  line-height: 1;
  padding: 15px;
  width: 100%;
}
.map-controls .layer-control {
  background-color: var(--neutral);
  padding: 15px;
  border-radius: 10px;
  cursor: pointer;
  display: none;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  text-transform: uppercase;
  width: 100%;
}
@media (min-width: 46.25em) {
  .map-controls .layer-control {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
.map-controls .layer-control__title {
  font-family: "brandon-grotesque", sans-serif;
  font-size: 16px;
}
.map-controls .layer-control input {
  margin-bottom: 0.5em;
}
.map-controls.show .map-controls-icon {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.map-controls.show .geocode,
.map-controls.show .layer-control {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.map-controls.show .geocode {
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.map-controls.show .layer-control {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.map-key {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -ms-flex-flow: column-reverse wrap;
  flex-flow: column-reverse wrap;
  grid-column: 1/5;
  grid-row: 3/4;
  position: relative;
  margin: 0 var(--space-s) var(--space-s) var(--space-s);
  z-index: 999;
}
@media (min-width: 46.25em) {
  .map-key {
    grid-column: 4/5;
    grid-row: 3/4;
    margin: 0;
  }
}
.map-key.carbon-key .map-key__content::before, .map-key.carbon-key .map-key__content::after {
  content: "Key - Carbon Score";
}
.map-key.nature-key .map-key__content::before, .map-key.nature-key .map-key__content::after {
  content: "Key - Nature Score";
}
.map-key .map-key-icon {
  background-color: var(--neutral);
  background-image: url("../images/info-icon.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 25px 25px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  display: block;
  width: 40px;
  height: 40px;
  position: relative;
  z-index: 99999999999;
}
@media (min-width: 46.25em) {
  .map-key .map-key-icon {
    display: none;
  }
}
.map-key__content {
  background-color: var(--neutral);
  border-radius: 20px;
  display: none;
  min-height: calc(100% - 40px);
  overflow: scroll;
  padding: 30px var(--space-l);
}
@media (min-width: 46.25em) {
  .map-key__content {
    display: block;
    min-height: 100%;
  }
}
.map-key__content:before, .map-key__content:after {
  content: "Commons Health Map";
  position: absolute;
  text-transform: uppercase;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}
.map-key__content:before {
  top: var(--space-s);
  left: var(--space-s);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.map-key__content:after {
  right: var(--space-s);
  bottom: calc(var(--space-s) + 40px);
}
@media (min-width: 46.25em) {
  .map-key__content:after {
    bottom: var(--space-s);
  }
}
.map-key__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row;
  flex-flow: row;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  line-height: 1;
  margin-bottom: 15px;
}
.map-key__item:last-child {
  margin-bottom: 0;
}
.map-key__color-box {
  display: inline-block;
  margin-right: 0.5em;
  height: 1em;
  width: 1em;
}
@media (max-width: 46.24em) {
  .map-key.show .map-key-icon {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}
@media (max-width: 46.24em) {
  .map-key.show .map-key__content {
    border-bottom-left-radius: 0;
    display: block;
  }
}

.jump-button {
  background-color: var(--neutral);
  padding: 5px 10px;
  position: fixed;
  top: var(--space-s);
  left: var(--space-s);
  z-index: 9;
}

.narrative {
  background-image: url("../images/sky.webp");
  background-attachment: fixed;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  position: relative;
}
.narrative .scroll {
  display: block;
  background-color: var(--neutral);
  top: calc(100dvh - 6em);
  left: calc(50% - 40px);
  position: absolute;
  padding: 10px 30px;
  z-index: 9999999;
}
.narrative .scroll:after {
  content: "";
  display: block;
  margin: 0 auto;
  width: 40px;
  height: 28px;
  background-image: url("../images/Arrow.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}
.narrative .loader {
  background-color: var(--neutral);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row;
  flex-flow: row;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 100dvh;
  width: 100dvw;
  position: fixed;
  z-index: 999999999;
}
.narrative .loader-header {
  font-family: "Basteleur", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: var(--font-slide);
  line-height: 1.5;
  margin-bottom: 0;
  margin-right: 1.25em;
  -webkit-animation: ellipsis-margin steps(3, jump-both) 3s infinite;
  animation: ellipsis-margin steps(3, jump-both) 3s infinite;
  width: 100%;
  text-align: center;
}
.narrative .loader-header::after {
  display: inline-block;
  content: "…";
  -webkit-animation: ellipsis steps(3, jump-both) 3s infinite;
  animation: ellipsis steps(3, jump-both) 3s infinite;
  overflow: hidden;
  width: 0;
  vertical-align: bottom;
}
.narrative.loaded .scene-svg {
  opacity: 1;
}
.narrative.loaded .loader {
  display: none;
}
.narrative .scene-svg {
  display: block;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  opacity: 0;
  z-index: 2;
}
.narrative .scene-svg svg {
  height: 100dvh;
  width: 100dvw;
}
@media (min-width: 61.25em) {
  .narrative .mobile-scene {
    display: none;
  }
}
@media (max-width: 61.24em) {
  .narrative .desktop-scene {
    display: none;
  }
}
.narrative #Wall_1,
.narrative #Wall_2,
.narrative #Fence_1,
.narrative #Invasive_Plant_1,
.narrative #Invasive_Plant_2,
.narrative #Tree_Fence,
.narrative #Fox_Hunter,
.narrative #Tool_1,
.narrative #Goose,
.narrative #Sheep_1,
.narrative #Sheep_2,
.narrative #Sheep_3,
.narrative #Fish,
.narrative #Squirrel_1,
.narrative #Berries_1,
.narrative #Berries_2,
.narrative #Sheep_4,
.narrative #Sheep_5,
.narrative #Sheep_6,
.narrative #Sheep_7,
.narrative #Sheep_8,
.narrative #Land_Owner,
.narrative #Landowners_1,
.narrative #Hunter,
.narrative #Commoners_1,
.narrative #Commoners_2,
.narrative #Tree_Back_1,
.narrative #Bees,
.narrative #Gatherer_1,
.narrative #Gatherers_2,
.narrative #Flowers_1,
.narrative #Flowers_2,
.narrative #Flowers_3,
.narrative #Oak_Tree,
.narrative #Owl,
.narrative #Otter {
  opacity: 0;
}

.slides {
  position: relative;
  z-index: 1;
  margin-top: -100dvh;
}

.logo {
  background-image: url("../images/WC_logo.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  aspect-ratio: 385/87;
  margin-bottom: 0.25em;
  width: 192px;
}
@media (min-width: 61.25em) {
  .logo {
    height: 87px;
    width: 385px;
  }
}

.slide {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row;
  flex-flow: row;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  font-size: var(--font-slide);
  height: 100dvh;
  z-index: -1;
  -webkit-transition: 0s;
  transition: 0s;
}
.slide--0 {
  opacity: 0;
}
.slide--0 .slide__content {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.slide__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-family: "Basteleur", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: var(--font-slide);
  min-height: 15em;
  line-height: 1.5;
  padding: 1em;
  margin-top: 3em;
  text-align: center;
}
@media (min-width: 46.25em) {
  .slide__content {
    margin-top: 2em;
    min-height: 40dvh;
    max-width: 60vw;
    padding: 0;
  }
}
.slide__content .headline,
.slide__content .title {
  font-family: "Basteleur", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: var(--font-slide);
  line-height: 1.5;
  margin-bottom: 0;
}

.video {
  background-color: white;
  height: 80dvw;
  padding: var(--space-s);
  position: relative;
  z-index: 99;
}
@media (min-width: 81.25em) {
  .video {
    height: 100dvh;
  }
}

.video__container {
  background-color: var(--green);
  border-radius: 20px;
  display: grid;
  grid-template-rows: -webkit-min-content 1fr;
  grid-template-rows: min-content 1fr;
  grid-template-columns: 1fr;
  grid-gap: 0;
  padding: var(--space-s);
  min-height: 100%;
}
@media (min-width: 61.25em) {
  .video__container {
    padding: var(--space-l);
  }
}

.video-title {
  font-family: "Basteleur";
  font-size: var(--font-slide);
  text-align: center;
  margin-bottom: var(--space-l);
}

.video-wrapper {
  border-radius: 20px;
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
@media (max-width: 61.24em) {
  .video-wrapper {
    width: 100%;
  }
}

.video-wrapper iframe,
.video-wrapper object,
.video-wrapper embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Text meant only for screen readers. */
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
}
.screen-reader-text:focus {
  background-color: inherit;
  border-radius: 3px;
  -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  color: inherit;
  display: block;
  font-family: inherit;
  font-weight: bold;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000; /* Above WP toolbar. */
}

/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
  outline: 0;
}

embed,
iframe,
object {
  max-width: 100%;
}

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

figure {
  margin: 1em 0;
}

@font-face {
  font-family: "Basteleur";
  src: url("../fonts/basteleur-master/Basteleur-Bold.woff2") format("woff2"), url("../fonts/basteleur-master/Basteleur-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-decoration-skip: ink;
  text-decoration-skip-ink: auto;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 1em;
  text-rendering: optimizelegibility;
}

/* Copy */
p {
  font-size-adjust: auto;
  margin-top: 0;
  margin-bottom: 1em;
  -webkit-font-feature-settings: "liga", "dlig";
  -ms-font-feature-settings: "liga", "dlig";
  -o-font-feature-settings: "liga", "dlig";
  font-feature-settings: "liga", "dlig";
}

dfn, cite, em, i {
  font-style: italic;
}