:root {
  --color-news-red: #c70000;
  --color-feature-red: #880105;
  --color-inverted-red: #ff4e36;
  --color-live-pink: #ffbac8;
  --color-live-red: #ad0006;
  --color-opinion-orange: #e05e00;
  --color-feature-orange: #bd5318;
  --color-inverted-orange: #ff7f0f;
  --color-background-orange: #fef9f5;
  --color-sport-blue: #0084c6;
  --color-feature-blue: #005689;
  --color-inverted-blue: #00b2ff;
  --color-live-blue: #90dcff;
  --color-culture-gold: #a1845c;
  --color-feature-gold: #6b5840;
  --color-inverted-gold: #eacca0;
  --color-live-gold: #e7d4b9;
  --color-lifestyle-pink: #bb3b80;
  --color-feature-pink: #7d0068;
  --color-inverted-pink: #ffabdb;
  --color-live-pink: #ffbac8;
  --color-gray-7: #121212;
  --color-gray-20: #333333;
  --color-gray-46: #767676;
  --color-gray-60: #999999;
  --color-gray-86: #dcdcdc;
  --color-gray-92: #eaeaea;
  --color-gray-96: #f6f6f6;
  --color-gray-100: #ffffff;

  --font-family-sans: "Guardian Text Sans Web", Helvetica, Arial, sans-serif;
  --font-family-serif: GuardianTextEgyptian, Guardian Text Egyptian Web, Georgia,serif;
  --font-family-headline: GH Guardian Headline, Guardian Egyptian Web, Georgia,serif;
  --font-size-12: 0.75rem; /* 12px */
  --font-size-13: 0.8125rem; /* 13px */
  --font-size-14: 0.875rem; /* 14px */
  --font-size-15: 0.9375em; /* 15px */
  --font-size-16: 1rem; /* 16px */
  --font-size-17: 1.0625rem; /* 17px */
  --font-size-20: 1.25rem; /* 20px */
  --font-size-32: 2rem; /* 32px */
}

/********************************************************
Base styles and typography
********************************************************/
html,
body {
  color: var(--color-gray-7);
  background-color: var(--color-gray-100);
  font-feature-settings: 'kern';
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  font-size: var(--font-size-16);
  font-family: var(--font-family-serif);
  margin: 0;
  padding: 0;
  height: auto;
  width: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body,
.map-container {
  @media (min-width: 500px) {
    width: 100%;
  }

  @media (min-width: 620px) {
    width: 620px;
  }

  @media (min-width: 860px) {
    width: 860px;
  }
}

.body-with-rules {
  padding-top: 10px;
  border-top: 1px solid var(--color-gray-86);
}

.headline {
  font-family: var(--font-family-headline);
  font-size: var(--font-size-20);
  line-height: 1.25;
  font-weight: 500;
  margin-bottom: 10px;
}

.standfirst {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-14);
  line-height: 1.35;
  margin-bottom: 10px;
}

.subhead {
  font-size: var(--font-size-14);
  font-weight: bold;
  line-height: 1.2;
  margin-bottom: 8px;
}

.source {
  color: var(--color-gray-60);
  font-size: var(--font-size-12);
  font-family: var(--font-family-sans);
  line-height: 1.2;
  padding-top: 10px;
  margin-bottom: 10px;
}

/********************************************************
Project specific styles
********************************************************/

.map-container {
  aspect-ratio: 0.8024054983;
  position: relative;

  @media(min-width: 500px) {
    aspect-ratio: 1.6991869919;
  }
}

.map-image {
  position: absolute;
  opacity: 1;
  transition: opacity 0.75s ease-out;
}

.map-image.hide {
  opacity: 0;
}

.anno-container {
  user-select: none;
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 1;
}

.anno-container.after {
  .copko,
  .iron-gate {
    opacity: 0;
  }
  .removed {
    display: block;
  }
  .dam-iron-gate,
  .dam-copko {
    color: #ffb680;
  }
  .dam-image {
    animation: blowUp 0.3s ease;
    background-image: url("./dam-exploded.svg");
  }
}

.anno {
  color: #fff;
  position: absolute;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-13);
  line-height: 1.3;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.75), -1px -1px 0 rgba(0,0,0,0.75), 1px -1px 0 rgba(0,0,0,0.75), -1px 1px 0 rgba(0,0,0,0.75), 1px 1px 0 rgba(0,0,0,0.75);
  opacity: 1;
  transition: opacity 0.35s ease, color 0.35s ease;

  @media (min-width: 500px) {
    font-size: var(--font-size-15);
  }
}

.anno.klamath {
  position: relative;
  color: #abe9ff;
  font-weight: bold;
  font-style: italic;
  top: 50%;
  left: calc(48% + 5px);

  &:before {
    box-shadow: 0 0 2px black;
    background-color: #abe9ff;
    content: "";
    position: absolute;
    height: 1px;
    width: 15px;
    left: -17px;
    top: 7px;
  }

  @media (min-width: 500px) {
    left: 41%;
    top: 53%;

    &:before {
      top: -30px;
      display: block;
      left: 42px;
      width: 1px;
      height: 31px;
    }
  }

  @media (min-width: 859px) {
    &:before {
      top: -34px;
    }
  }
}

.anno.copko {
  color: #abe9ff;
  top: 20%;
  left: 29%;
  text-align: center;
  font-style: italic;

  @media(min-width: 500px) {
    top: 28.5%;
    left: 66%;
  }

  @media(min-width: 859px) {
    top: 30%;
  }
}

.anno.iron-gate {
  color: #abe9ff;
  top: 88%;
  left: 52%;
  text-align: center;
  font-style: italic;

  @media (min-width: 500px) {
    top: 55%;
    left: 16.5%;
  }
}

.anno.dam-iron-gate {
  font-weight: bold;
  bottom: 5%;
  right: 7%;
  display: flex;
  flex-direction: column-reverse;

  @media (min-width: 500px) {
    bottom: 16%;
    right: unset;
    left: 17%;
  }
}

.anno.dam-copko {
  font-weight: bold;
  top: 33%;
  left: 37%;
  display: flex;
  align-items: flex-start;

  @media (min-width: 500px) {
    top: 36%;
    left: 57%;
    flex-direction: column;
  }

  @media (min-width: 859px) {
    left: 59%;
    top: 37%;
  }
}

.anno.canyon {
  color: #e0dcd2;
  top: 44.5%;
  left: 42%;
  font-style: italic;

  &:before {
    box-shadow: 0 0 2px black;
    background-color: #e0dcd2;
    content: "";
    position: absolute;
    height: 1px;
    width: 15px;
    left: -17px;
    top: 7px;
  }

  @media (min-width: 500px) {
    top: 24%;
    left: 44%;

    &:before {
      display: block;
      top: 17px;
      left: 50px;
      height: 25px;
      width: 1px;
    }
  }

  @media (min-width: 859px) {
    top: 28%;
    left: 46.5%;
  }
}

.anno.north {
  color: #e0dcd2;
  position: relative;
  top: 47%;
  left: 25px;

  &:before {
    content: "";
    display: block;
    top: 4px;
    left: -9px;
    height: 8px;
    width: 8px;
    position: absolute;
    border-top: 2px solid;
    border-right: 2px solid;
    border-bottom: 2px transparent;
    border-left: 2px transparent;
    rotate: -135deg;
    box-shadow: 1px -1px 0px black;
  }

  @media(min-width: 500px) {
    opacity: 0;
  }
}

.anno.year {
  background-color: var(--color-gray-7);
  color: #fff;
  font-family: var(--font-family-headline);
  font-weight: 500;
  font-size: var(--font-size-20);
  line-height: 1;
  padding: 6px 10px 8px 10px;
  top: 0;
  left: 0;
  z-index: 1;
}

.dam-image {
  background-image: url("./dam.svg");
  background-repeat: none;
  background-position: center;
  margin-right: 1px;
  height: 24px;
  width: 24px;
  transform-origin: center;
  position: relative;
  top: -4px;
  filter: drop-shadow(0 0 2px #31312780);

  @media (min-width: 500px) {
    top: unset;
  }
}

.removed {
  color: #ffb680;
  display: block;
  display: none;
  font-weight: normal;
  font-style: italic;
}

.locator {
  bottom: 10px;
  left: 10px;
  position: absolute;
  height: 63px;
  width: 102px;
  scale: 0.9;
  transform-origin: bottom left;

  @media (min-width: 500px) {
    scale: 1;
    left: unset;
    bottom: -20px;
    right: 10px;
  }
}

br.hide {
  @media(min-width: 500px) {
    display: none;
  }
}

@keyframes blowUp {
  0% {
    scale: 0.1;
  }
  100% {
    scale: 1;
  }
  70% {
    scale: 1.3;
  }
}