/* Klamath feature hero */
:root {
  --klamath-green: #9CB09E;
  --klamath-orange: #DA7030;
  --klamath-wine: #453643;
  --klamath-ink: var(--ink);
  --klamath-paper: var(--paper);
  --klamath-white: var(--white);
}
.klamath-hero {
  background: var(--klamath-orange);
  padding-top: 80px; /* for sticky nav */
}
.klamath-hero h1 {
  color: var(--white);
}
.klamath-hero__frame {
  position: relative;
  min-height: min(696px, 90svh);
  overflow: hidden;
  isolation: isolate;
  border: 20px solid var(--klamath-orange);
  border-bottom-color: var(--klamath-white);
  border-top-width: 20px;
  background: white url(../images/ensm060523_0014-1.jpg) right 10%;
  background-size: cover;
  height: 75vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* media queries for large bp */
@media (min-width: 1200px) {
  .klamath-hero__frame {
    /* height: 65vh; */
    background: white url(../images/ensm060523_0014-1.jpg) left 10%;
    background-size: cover;
    justify-content: flex-start;
    align-items: center;
    padding: 7rem 0 0 10%;

  }
}

.klamath-hero__image {
  position: absolute;
  top: -6.43%;
  left: -2.88%;
  z-index: -1;
  width: 110.02%;
  height: 163.96%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.klamath-hero__frame::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: none;
}

.klamath-hero__title {
  display: flex;
  margin: 0;
  line-height: .8;
  justify-content: center;
  align-items: center;
}
@media (min-width: 1600px) {
  .klamath-hero__title {
    align-items: flex-start;
    justify-content: flex-start;
  }
}

.klamath-hero__title-line {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1.5rem;
}

.klamath-hero__title-main,
.klamath-hero__title-subtitle {
  font-family: "sztos-variable", var(--font-serif);
  font-variation-settings: "wdth" 200;
  font-weight: 400;
  letter-spacing: 0;
}

.klamath-hero__title-main {
  font-size: clamp(4.5rem, 6.55vw, 6rem);
  font-weight: 600;
  line-height: 1.05;
}

.klamath-hero__title-kicker {
  margin: 0;
  font-family: "seaweed-script-pro", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(2rem, 7.125vw, 6.5125rem);
  line-height: .7;
}


.klamath-hero__title-subtitle {
  font-size: clamp(2.5rem, 3.055vw, 5.75rem);
}

@media (max-width: 575.98px) {
  .klamath-hero__frame {
    min-height: 31rem;
    border-width: 10px;
  }

  .klamath-hero__title {
    top: 1.25rem;
    left: 1rem;
    width: 10rem;
  }

  .klamath-hero__title-line {
    gap: .25rem;
  }

  .klamath-hero__title-main {
    font-size: 3.5rem;
  }

  .klamath-hero__title-kicker {
    font-size: 1.75rem;
  }

  .klamath-hero__title-subtitle {
    font-size: 2rem;
  }
}
.klamath-hero__byline {
  font-weight: 700;
  font-size: .88rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
/* base type for article */
body {
  font-size: 1.25rem;
}
h2,h3,h4,h5,h6 {
  font-family: "sztos-variable", var(--font-serif);
  font-weight: 600;
  line-height: 1.2;
  color: #2A3F56;
}
h2 {
  font-size: 3rem;
  text-align: right;
}
h2 span {
    display: block;
  }

/* Klamath map section */
.klamath-map {
  background-color: var(--klamath-orange);
  font-family: "sztos-variable", var(--font-serif);
}

.klamath-map__canvas {
  display: flex;
  justify-content: center;
  position: relative;
  top: -95px;
  padding:0 2rem;
}

.klamath-map__copy {
  max-width: 800px;
  padding: 3.1rem 2.55rem;
  background:  var(--klamath-paper);
  color: var(--klamath-ink);
  font-family: var(--bs-font-sans-serif);
  font-size: clamp(1.25rem, 3.2vw, 1.5rem);
  line-height: 1.18;
  border: solid 10px var(--klamath-orange);
  border-bottom-color:var(--klamath-white) ;
  border-radius: 10px;
  border-left-width: 0;
  border-right-width: 0;
}
.lead {
  font-weight: 400;
  letter-spacing: 0;
  font-size: clamp(1.5rem, 3.2vw, 2.2rem);
}
.klamath-map__copy p {
  margin-bottom: 1.25rem;
}

@media (min-width: 991.98px) {
  .klamath-map__canvas {
    min-height: auto;
    padding-bottom: 0;
    justify-content: flex-start;
    padding-left: 5rem;
  }

  .klamath-map__river {
    top: 0;
    height: 30rem;
  }

  .klamath-map__copy {
    position: relative;
    top: auto;
    width: 100%;
    min-height: 0;
    padding: 2.5rem 1.5rem;
    font-size: 1.25rem;
  }
}
.klamath-parker, .klamath-ward {
  background-color: var(--klamath-green);
}
.klamath-parker {
  position: relative;
  overflow: hidden;
  background-image: url('../images/klamath/orangeFish.png');
  background-blend-mode: luminosity;
  background-repeat: no-repeat;
  background-position: right bottom -300px;
}

.klamath-parker::before {
  position: absolute;
  top: 530px;
  left: 0;
  z-index: 0;
  width: 477px;
  height: 617px;
  background: url('../images/klamath/wineFish.png') left top / contain no-repeat;
  opacity: .3;
  content: '';
  pointer-events: none;
  transform: translateY(100vh);
  transition: transform 1.6s cubic-bezier(.22, .61, .36, 1);
}

.klamath-parker.is-visible::before {
  transform: translateY(0);
}

.klamath-parker > * {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .klamath-parker::before {
    transform: translateY(0);
    transition: none;
  }
}

.klamath-odowd {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--klamath-green);
  color: #fff;
}

/* Keep the river visible without asking the text to compete with its highlights. */
.klamath-odowd::before,
.klamath-odowd::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
}

.klamath-odowd::before {
  z-index: -2;
  background: url(../images/klamath/ensm060523_0632.jpg) center center / cover no-repeat;
  opacity: .5;
}

.klamath-odowd::after {
  z-index: -1;
  background:
    linear-gradient(90deg,
      rgba(9, 35, 32, .78) 0%,
      rgba(9, 35, 32, .62) 40%,
      rgba(9, 35, 32, .42) 100%),
    linear-gradient(180deg,
      rgba(9, 35, 32, .18) 0%,
      rgba(9, 35, 32, .42) 100%);
}

.klamath-odowd > .container {
  position: relative;
  z-index: 1;
}

.klamath-odowd h2 {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

.klamath-odowd p {
  text-shadow: 0 1px 2px rgba(0, 0, 0, .28);
}
.klamath-odowd .card-body p, .klamath-odowd a.btn-secondary {
  color:var(--klamath-ink);
  text-shadow: none;

}

@media (max-width: 767.98px) {
  .klamath-odowd::after {
    background:
      linear-gradient(180deg,
        rgba(9, 35, 32, .72) 0%,
        rgba(9, 35, 32, .58) 100%);
  }
}
.klamath-kinziger {
  background-image: url('../images/klamath/dna1.png'), url('../images/klamath/dna2.png'), url('../images/klamath/dna3.png');
  background-color: var(--klamath-wine) ;
  background-position: -120px -213px, -460px 500px, bottom right;
  background-repeat: no-repeat;
  background-size: 70%, 50%, 50%;
  color: var(--white);
}
 .klamath-kinziger h2, .klamath-kinziger a.text-link {
    color: var(--white);
  }
 .klamath-kinziger a.btn-secondary, .card-body {
    color:var(--klamath-ink);
  }
.klamath-ward {
  background-image: url('../images/klamath/mapBack.jpg');
  background-blend-mode: hard-light;
  background-size: cover;
}
.btn-secondary {
  color: var(--klamath-ink);
  background: var(--klamath-paper);
  border-color: var(--klamath-paper);
  box-shadow: var(--klamath-ink) 4px 4px 0 0;
}
/* Figures */
figcaption {
    background: var(--white);
    padding: .5rem;
    font-size: 1.125rem;
    border-radius: 0 0 3px 3px;
    line-height: 1.2;
    color: var(--ink);
}