/* =========================================================
   INDIVIDUAL STORY
   Michael McCafferty Fine Art Photography

   Used by:
   /stories/shingle-street.php
   ========================================================= */


/* =========================================================
   STORY INTRODUCTION
   ========================================================= */

.story-intro {
  padding:
    clamp(170px, 18vw, 270px)
    var(--gutter)
    clamp(95px, 10vw, 155px);
}


.story-intro-inner {
  max-width: 1540px;

  margin: 0 auto;

  display: grid;

  grid-template-columns:
    .34fr
    1.05fr
    .61fr;

  gap:
    clamp(40px, 6vw, 100px);

  align-items: end;
}


.story-intro-meta {
  align-self: start;

  padding-top: 14px;
}


.story-intro-meta .section-number {
  margin-top: 32px;
}


.story-intro-heading h1 {
  margin: 0;

  font-family: var(--serif);

  font-size:
    clamp(
      88px,
      10.5vw,
      172px
    );

  font-weight: 400;

  line-height: .74;

  letter-spacing: -.045em;
}


.story-intro-copy {
  padding-bottom: 12px;
}


.story-intro-date {
  margin:
    0 0
    18px;

  font-size: 9px;

  font-weight: 500;

  text-transform: uppercase;

  letter-spacing: .2em;

  color:
    rgba(0, 0, 0, .48);
}


.story-intro-subtitle {
  max-width: 18ch;

  margin: 0;

  font-family: var(--serif);

  font-size:
    clamp(
      26px,
      2.4vw,
      40px
    );

  font-weight: 400;

  line-height: 1.08;

  letter-spacing: -.015em;
}


/* =========================================================
   HERO PHOTOGRAPH
   ========================================================= */

.story-hero {
  padding:
    20px
    var(--gutter)
    clamp(125px, 15vw, 220px);
}


.story-hero-figure {
  width:
    min(
      88vw,
      1380px
    );

  margin: 0 auto;
}


.story-artwork.protected-artwork::after {
  content: none !important;

  display: none !important;
}


.story-artwork {
  position: relative;

  display: block;

  width: fit-content;
  max-width: 100%;

  margin: 0 auto;
}


.story-artwork img {
  display: block;

  width: auto;

  max-width: 100%;

  max-height:
    min(
      82svh,
      1120px
    );

  height: auto;

  object-fit: contain;
}


/* =========================================================
   COPYRIGHT
   ========================================================= */

.story-image-copyright {
  position: absolute;

  right: 10px;
  bottom: 10px;

  z-index: 10;

  display: block;

  padding:
    4px
    7px;

  background:
    rgba(0, 0, 0, .28);

  color:
    rgba(255, 255, 255, .82);

  font-family: var(--sans);

  font-size: 8px;

  font-weight: 500;

  line-height: 1;

  letter-spacing: .11em;

  text-transform: uppercase;

  white-space: nowrap;

  pointer-events: none;

  user-select: none;
  -webkit-user-select: none;
}


/* =========================================================
   HERO CAPTION
   ========================================================= */

.story-hero-figure figcaption {
  width: 100%;

  margin-top: 15px;

  display: flex;

  justify-content: space-between;

  gap: 30px;

  font-size: 9px;

  font-weight: 500;

  text-transform: uppercase;

  letter-spacing: .17em;

  color:
    rgba(0, 0, 0, .52);
}


/* =========================================================
   STORY BODY
   ========================================================= */

.story-body {
  padding:
    clamp(120px, 15vw, 225px)
    var(--gutter);
}


.story-section {
  max-width: 1120px;

  margin:
    0 auto
    clamp(
      115px,
      13vw,
      200px
    );

  display: grid;

  grid-template-columns:
    minmax(145px, .3fr)
    minmax(0, 1fr);

  gap:
    clamp(
      45px,
      7vw,
      105px
    );
}


.story-section-label {
  padding-top: 10px;
}


.story-prose {
  max-width: 670px;
}


.story-prose p {
  margin:
    0 0
    30px;

  font-size:
    clamp(
      16px,
      1.25vw,
      18px
    );

  line-height: 1.9;

  color:
    rgba(0, 0, 0, .72);
}


.story-prose .story-lead {
  margin-bottom: 42px;

  font-family: var(--serif);

  font-size:
    clamp(
      29px,
      3vw,
      46px
    );

  font-weight: 400;

  line-height: 1.17;

  letter-spacing: -.02em;

  color:
    rgba(0, 0, 0, .88);
}


/* =========================================================
   PULL QUOTE
   ========================================================= */

.story-quote {
  max-width: 1120px;

  margin:
    clamp(
      30px,
      5vw,
      70px
    )
    auto
    clamp(
      130px,
      15vw,
      230px
    );

  padding:
    clamp(
      65px,
      8vw,
      115px
    )
    0;

  border-top:
    1px solid
    rgba(0, 0, 0, .15);

  border-bottom:
    1px solid
    rgba(0, 0, 0, .15);
}


.story-quote blockquote {
  max-width: 18ch;

  margin: 0 auto;

  font-family: var(--serif);

  font-size:
    clamp(
      42px,
      5.8vw,
      86px
    );

  font-weight: 400;

  line-height: .97;

  letter-spacing: -.035em;

  text-align: center;

  color:
    rgba(0, 0, 0, .82);
}


/* =========================================================
   FINAL REFLECTION
   ========================================================= */

.story-reflection {
  max-width: 900px;

  margin:
    clamp(
      60px,
      8vw,
      120px
    )
    auto
    0;

  padding-top:
    clamp(
      70px,
      9vw,
      135px
    );

  border-top:
    1px solid
    rgba(0, 0, 0, .16);
}


.story-reflection > p:not(.eyebrow) {
  max-width: 30ch;

  margin:
    26px 0
    0;

  font-family: var(--serif);

  font-size:
    clamp(
      30px,
      3.6vw,
      58px
    );

  font-weight: 400;

  line-height: 1.09;

  letter-spacing: -.025em;

  color:
    rgba(0, 0, 0, .82);
}


/* =========================================================
   STORY NAVIGATION
   ========================================================= */

.story-navigation {
  padding:
    clamp(110px, 13vw, 195px)
    var(--gutter);
}


.story-navigation-inner {
  width:
    min(
      88vw,
      1320px
    );

  margin: 0 auto;

  padding-top: 30px;

  border-top:
    1px solid
    rgba(0, 0, 0, .16);

  display: grid;

  grid-template-columns:
    1fr
    auto;

  gap: 40px;

  align-items: end;
}


.story-navigation-title {
  margin:
    18px 0
    0;

  font-family: var(--serif);

  font-size:
    clamp(
      36px,
      4vw,
      64px
    );

  font-weight: 400;

  line-height: 1;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 980px) {

  .story-intro-inner {
    grid-template-columns: 1fr;
  }


  .story-intro-meta {
    display: flex;

    gap: 35px;

    align-items: baseline;
  }


  .story-intro-meta .section-number {
    margin: 0;
  }


  .story-intro-heading h1 {
    font-size:
      clamp(
        86px,
        15vw,
        145px
      );
  }


  .story-intro-copy {
    max-width: 620px;
  }


  .story-section {
    grid-template-columns:
      minmax(110px, .22fr)
      minmax(0, 1fr);
  }


  .story-navigation-inner {
    width: 90vw;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

  .story-intro {
    padding:
      120px
      var(--gutter)
      90px;
  }


  .story-intro-meta {
    display: block;
  }


  .story-intro-meta .section-number {
    margin-top: 20px;
  }


  .story-intro-heading h1 {
    font-size: 68px;

    line-height: .8;
  }


  .story-intro-subtitle {
    font-size: 27px;
  }


  .story-hero {
    padding:
      10px
      var(--gutter)
      105px;
  }


  .story-hero-figure {
    width: 100%;
  }


  .story-artwork {
    width: 100%;
  }


  .story-artwork img {
    width: 100%;

    max-height: none;
  }


  .story-image-copyright {
    right: 7px;
    bottom: 7px;

    padding:
      4px
      6px;

    background:
      rgba(0, 0, 0, .30);

    color:
      rgba(255, 255, 255, .88);

    font-size: 7px;

    letter-spacing: .09em;
  }


  .story-hero-figure figcaption {
    flex-direction: column;

    gap: 6px;

    font-size: 8px;
  }


  .story-body {
    padding:
      100px
      var(--gutter)
      125px;
  }


  .story-section {
    margin-bottom: 110px;

    grid-template-columns: 1fr;

    gap: 30px;
  }


  .story-prose .story-lead {
    font-size:
      clamp(
        29px,
        9vw,
        38px
      );
  }


  .story-prose p {
    font-size: 16px;

    line-height: 1.82;
  }


  .story-quote {
    margin-bottom: 120px;

    padding:
      70px
      0;
  }


  .story-quote blockquote {
    font-size:
      clamp(
        39px,
        12vw,
        58px
      );
  }


  .story-reflection {
    padding-top: 70px;
  }


  .story-reflection > p:not(.eyebrow) {
    font-size:
      clamp(
        29px,
        9vw,
        39px
      );
  }


  .story-navigation {
    padding:
      95px
      var(--gutter)
      115px;
  }


  .story-navigation-inner {
    width: 100%;

    grid-template-columns: 1fr;

    align-items: start;

    gap: 42px;
  }


  .story-navigation-title {
    font-size: 38px;
  }

}


/* =========================================================
   VERY SMALL SCREENS
   ========================================================= */

@media (max-width: 380px) {

  .story-intro-heading h1 {
    font-size: 60px;
  }


  .story-intro-subtitle {
    font-size: 25px;
  }


  .story-prose .story-lead {
    font-size: 28px;
  }


  .story-quote blockquote {
    font-size: 37px;
  }


  .story-reflection > p:not(.eyebrow) {
    font-size: 28px;
  }

}