main {
      max-width: 72rem;
      margin: 0 auto;
      }

  body {
    font-size: 1rem;
    background-color: #fcfdfd;
  }

   body p {
    font-size: 1.4rem;
  }

  #content {
    margin-left: 3rem;
  }

  #intro {
    margin-left: 5rem;
  }

  h1 {
    margin-bottom: 1rem;
  }

  h2 {
    font-weight: 450;
    font-size: 1.6rem;
    margin-bottom: .5rem;
    margin-top: 0rem;
  }

 .subtitle {
    font-weight: 950;
    font-size: 1.6rem;
    margin-bottom: .5rem;
    margin-top: 0rem;
  }

  h3 {
    font-weight: 650;
    margin-top: 1.5rem;
    margin-bottom: 0.1rem;
  }

  .date  {
    font-weight: 100;
    margin: 0rem 0rem;
  }

.static-chart  {
  display: flex;
  /* margin: 3rem auto; */
}

/* size for mobile screens */
@media only screen and (min-width: 350px) {
  .static-chart {
    margin: 3rem auto;
    width: 100%;
  }
}

/* size for laptop screens */
@media only screen and (min-width: 550px) {
  .static-chart {
    margin: 3rem auto;
    width: 50%;
  }
}

/* size for large screens */
@media only screen and (min-width: 1340px) {
  .static-chart {
    margin: 3rem auto;
    width: 65%;
  }
}

/* buttons for incoming and outgoing transfer maps */
.button {
  border: .5px solid #202020;
  padding: 5px 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius: 4px;
  transition-duration: 0.2s;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
 
.button:hover {
  background-color:  #e3e3e6;
} 

.maps{
  margin: .25rem 0rem 0rem 0rem;
  display: inline-block;
  font-size: .9rem;
  font-family:Helvetica Neue  
}

.method {
  margin-bottom: 9rem;
}



/* scrolly components */

#intro {
    max-width: 72rem;
    margin: 0rem 0rem;
    margin-bottom: 0rem;
    margin-top: 5rem;
    text-align: left;
  }
  
  .intro__hed {
    font-size: 1.5em;
    margin: 2rem auto 0.5rem auto;
    font-family:Helvetica Neue 
  }
  
  .intro__dek {
    font-size: 1.3rem;
    color: #8a8a8a; 
    margin: 0 auto 0 auto;
  }
  
    .intro__body {
    color: #525252;
    margin: 1rem 5rem 0rem 0rem;
    max-width: 72rem;
    font-size:1.2rem;
  }

#outro {
    height: 10px; /* sets gap between bottom of scrolly and next element */
    color: #525252; 
    /* margin: 2rem 1rem 0.5rem 1rem; */
    margin: 2rem 1rem 0rem 1rem;
    max-width: 72rem;
    font-size:1.4rem;
  }

#scrolly {
  margin-left: 3rem;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-color: #fcfdfd;
  padding: 0rem; /* space on left of scrolling article text block */
  }

#scrolly > * {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

/* scroll-2 section rules */
#scrolly2 {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: #fcfdfd;
    margin-left: 3rem;
    padding: 0rem; /* space on left of scrolling article text block */
    }
  
  #scrolly2 > * {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }

  /* scroll-3 section rules */
#scrolly3 {
  position: relative; 
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-color: #fcfdfd;
  margin-left: 3rem; 
  padding: 0rem; /* space on left of scrolling article text block */
}

#scrolly3 > * {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
  } 


/* applies to side column of vertical scrolling text */
article { 
  position: relative;
  padding: 0 0rem;
  max-width: 20rem;
}


/*graphics container*/
@media only screen and (min-device-width: 550px) {
  .sticky-thing { 
    position: -webkit-sticky;
    position: sticky;
    width:  auto;
    height: auto;
    margin: 0;
    background-color: #fcfdfd;
    z-index: 0;
    top: 12.5vh; /*shifts graphic up and down within visible page */
    height: 45vh; /* adjusts height at which scroll section begins ascent up page on last step. */
    /* Center everything inside */
    display: flex;
    align-items: top;
    justify-content: left;
  }
  }

/* adjust graphics container for larger screens*/
@media only screen and (min-device-width: 1340px) {
.sticky-thing { 
  position: -webkit-sticky;
  position: sticky;
  width:  auto;
  height: auto;
  margin: 0;
  background-color: #fcfdfd;
  z-index: 0;
  top: 12.5vh; /*shifts graphic up and down within visible page */
  height: 60vh; /* adjusts height at which scroll section begins ascent up page on last step. */
  /* Center everything inside */
  display: flex;
  align-items: top;
  justify-content: left;
}
}

/* size for laptop screens */
@media only screen and (min-device-width: 550px) {
  .sticky-thing img { 
    padding: 0 rem;
    width:  808px; /*900; */
    height: 404px;/*450px;*/
    border:#f6f8f8
    } 
}
 /* size for large screens */
@media only screen and (min-device-width: 1340px) {
  .sticky-thing img { 
    padding: 0 rem;
    width:  900px;   /*900; */
    height: 450px;  /*450px;*/
    border:#f6f8f8
    } 
}

    
/* settings for non-active vertical scrolling elements */

.step { 
  margin: 0 auto 5rem auto;
  background-color: #f8fafa;
  color: #eae9e9 !important;
  
}

.step:last-child {
  margin-bottom: 2;
}

/* settings for active vertical scrolling text elements */
.step.is-active p { 
  background-color: #f6f8f8;
  color: #646363;
  text-align: left;
}

.step p {
  padding: 1rem;
  font-size: 1.2rem;
  text-align: left;
  line-height: auto;
  }

/* ── Mobile: waterStudy pattern — sticky image above, steps scroll up ─ */
@media only screen and (max-width: 767px) {

  #content {
    margin-left: 0;
  }

  #intro {
    margin-left: 0;
  }

  /* switch to block so sticky-thing (now first in DOM) pins naturally */
  #scrolly, #scrolly2, #scrolly3 {
    display: block;
    margin-left: 0;
  }

  .sticky-thing {
    position: -webkit-sticky;
    position: sticky;
    top: 15vh;
    width: 100%;
    height: 75vh;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fcfdfd;
  }

  /* override hard-coded 808px desktop width */
  .sticky-thing img {
    width: 100% !important;
    height: 100%;
    object-fit: contain;
  }

  article {
    position: relative;
    z-index: 1;
    max-width: 100%;
  }

  /* generous bottom margin for scroll pacing; solid bg to read over image */
  .step {
    margin: 0 0.5rem 20rem;
    background-color: #f8fafa;
    color: #eae9e9 !important;
  }

  .step:last-child {
    margin-bottom: 5rem;
  }

  /* iframes — responsive wrapper */
  div.maps {
    display: block;
    width: 100%;
  }

  .iframe-wrap {
    position: relative;
    width: 100%;
    height: 420px;
  }

  .iframe-wrap--wide {
    height: 380px;
  }

  .iframe-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

/* Desktop: restore article-left / image-right order after HTML swap */
@media only screen and (min-width: 768px) {
  #scrolly article, #scrolly2 article, #scrolly3 article { order: -1; }
  #scrolly .sticky-thing, #scrolly2 .sticky-thing, #scrolly3 .sticky-thing { order: 0; }
}


/* alt text screen reader only */
.sr-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
}