/* =========================================================
   STORIES INDEX
   Michael McCafferty Fine Art Photography

   Used only by:
   /stories.php
   ========================================================= */


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

.stories-index-intro {
  padding:
    clamp(170px, 18vw, 275px)
    var(--gutter)
    clamp(110px, 12vw, 185px);
}


.stories-index-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;
}


.stories-index-label {
  align-self: start;

  padding-top: 14px;
}


.stories-index-label .section-number {
  margin-top: 32px;
}


.stories-index-heading h1 {
  margin: 0;

  font-family: var(--serif);

  font-size:
    clamp(
      92px,
      10.8vw,
      178px
    );

  font-weight: 400;

  line-height: .73;

  letter-spacing: -.045em;
}


.stories-index-copy {
  max-width: 430px;

  padding-bottom: 10px;
}


.stories-index-copy p {
  margin:
    0 0
    20px;

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

  line-height: 1.8;

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


.stories-index-copy p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   STORY INDEX
   ========================================================= */

.stories-index-feature {
  padding:
    clamp(85px, 9vw, 140px)
    var(--gutter)
    clamp(165px, 19vw, 300px);
}


.stories-index-card {
  max-width: 1540px;

  margin: 0 auto;

  display: grid;

  grid-template-columns:
    repeat(12, minmax(0, 1fr));

  column-gap:
    clamp(30px, 4vw, 65px);

  align-items: center;
}


/* =========================================================
   SPACE BETWEEN STORIES
   ========================================================= */

.stories-index-card + .stories-index-card {
  margin-top:
    clamp(
      155px,
      18vw,
      285px
    );

  padding-top:
    clamp(
      155px,
      18vw,
      285px
    );

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


/* =========================================================
   STORY IMAGE
   ========================================================= */

.stories-index-image {
  grid-column:
    1 / span 7;

  min-width: 0;
}


.stories-index-image > a {
  display: block;

  width: 100%;
}


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

  display: none !important;
}


.stories-index-artwork {
  position: relative;

  display: block;

  width: fit-content;

  max-width: 100%;

  margin:
    0 auto;
}


.stories-index-artwork img {
  display: block;

  width: auto;

  max-width: 100%;

  max-height:
    min(
      76svh,
      1020px
    );

  height: auto;

  object-fit: contain;

  transition:
    opacity .35s ease,
    transform .55s cubic-bezier(.2, .7, .2, 1);
}


.stories-index-image a:hover img {
  opacity: .94;

  transform:
    scale(.995);
}


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

.stories-index-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;
}


/* =========================================================
   STORY COPY
   ========================================================= */

.stories-index-story-copy {
  grid-column:
    9 / span 4;

  max-width: 510px;
}


.stories-index-meta {
  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 8px;

  margin-bottom: 34px;

  font-size: 9px;

  font-weight: 500;

  text-transform: uppercase;

  letter-spacing: .2em;

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


.stories-index-story-copy h2 {
  margin: 0;

  font-family: var(--serif);

  font-size:
    clamp(
      72px,
      7.3vw,
      120px
    );

  font-weight: 400;

  line-height: .78;

  letter-spacing: -.045em;
}


.stories-index-story-copy h2 a {
  display: inline-block;
}


.stories-index-subtitle {
  max-width: 19ch;

  margin:
    32px 0
    0;

  font-family: var(--serif);

  font-size:
    clamp(
      25px,
      2.3vw,
      38px
    );

  font-weight: 400;

  line-height: 1.08;

  letter-spacing: -.015em;
}


.stories-index-description {
  max-width: 37ch;

  margin:
    28px 0
    38px;

  font-size: 15px;

  line-height: 1.75;

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


/* =========================================================
   ALTERNATING SECOND STORY
   ========================================================= */

.stories-index-card-reverse .stories-index-story-copy {
  grid-column:
    1 / span 4;

  grid-row: 1;
}


.stories-index-card-reverse .stories-index-image {
  grid-column:
    6 / span 7;

  grid-row: 1;
}


/* =========================================================
   CLOSING STATEMENT
   ========================================================= */

.stories-index-closing {
  padding:
    clamp(140px, 18vw, 275px)
    var(--gutter);
}


.stories-index-closing-inner {
  max-width: 1240px;

  margin: 0 auto;
}


.stories-index-closing h2 {
  max-width: 13ch;

  margin:
    22px 0
    44px;

  font-family: var(--serif);

  font-size:
    clamp(
      72px,
      9vw,
      145px
    );

  font-weight: 400;

  line-height: .77;

  letter-spacing: -.04em;

  overflow-wrap: normal;

  word-break: normal;
}


.stories-index-closing-inner > p:not(.eyebrow) {
  max-width: 48ch;

  margin:
    0 0
    42px;

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

  font-size:
    clamp(
      15px,
      1.35vw,
      19px
    );

  line-height: 1.8;
}


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

@media (max-width: 980px) {

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


  .stories-index-label {
    display: flex;

    align-items: baseline;

    gap: 35px;
  }


  .stories-index-label .section-number {
    margin: 0;
  }


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


  .stories-index-copy {
    max-width: 620px;
  }


  .stories-index-card,
  .stories-index-card-reverse {
    grid-template-columns: 1fr;

    gap: 75px;
  }


  .stories-index-image,
  .stories-index-story-copy,
  .stories-index-card-reverse .stories-index-image,
  .stories-index-card-reverse .stories-index-story-copy {
    grid-column: auto;

    grid-row: auto;
  }


  .stories-index-story-copy {
    max-width: 620px;

    margin-left: auto;
  }


  /*
     Keep photograph first on smaller screens,
     even for the alternating desktop layout.
  */

  .stories-index-card-reverse .stories-index-image {
    order: 1;
  }


  .stories-index-card-reverse .stories-index-story-copy {
    order: 2;

    margin-left: 0;
  }


  .stories-index-artwork img {
    max-height: none;
  }


  .stories-index-closing h2 {
    max-width: 13ch;
  }

}


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

@media (max-width: 640px) {

  .stories-index-intro {
    padding:
      120px
      var(--gutter)
      95px;
  }


  .stories-index-label {
    display: block;
  }


  .stories-index-label .section-number {
    margin-top: 20px;
  }


  .stories-index-heading h1 {
    font-size: 72px;

    line-height: .79;
  }


  .stories-index-copy {
    margin-top: 8px;
  }


  .stories-index-copy p {
    font-size: 15px;
  }


  .stories-index-feature {
    padding:
      70px
      var(--gutter)
      135px;
  }


  .stories-index-card,
  .stories-index-card-reverse {
    gap: 55px;
  }


  .stories-index-card + .stories-index-card {
    margin-top: 120px;

    padding-top: 120px;
  }


  .stories-index-image > a,
  .stories-index-artwork {
    width: 100%;
  }


  .stories-index-artwork img {
    width: 100%;

    max-height: none;
  }


  .stories-index-story-copy,
  .stories-index-card-reverse .stories-index-story-copy {
    margin-left: 0;
  }


  .stories-index-meta {
    margin-bottom: 24px;

    font-size: 8px;
  }


  .stories-index-story-copy h2 {
    font-size: 65px;
  }


  .stories-index-subtitle {
    font-size: 27px;
  }


  .stories-index-description {
    font-size: 14px;
  }


  .stories-index-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;
  }


  .stories-index-closing {
    padding-top: 125px;

    padding-bottom: 145px;
  }


  .stories-index-closing h2 {
    max-width: 13ch;

    font-size: 64px;

    line-height: .80;
  }

}


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

@media (max-width: 380px) {

  .stories-index-heading h1 {
    font-size: 62px;
  }


  .stories-index-story-copy h2 {
    font-size: 56px;
  }


  .stories-index-subtitle {
    font-size: 25px;
  }


  .stories-index-closing h2 {
    max-width: 13ch;

    font-size: 54px;
  }

}