/* =========================================================
   STILLNESS COLLECTION
   Michael McCafferty Fine Art Photography

   Page-specific styling for:
   /stillness.php
   ========================================================= */


/* =========================================================
   REAL HTML COPYRIGHT
   ========================================================= */

/*
   main.css contains a generic ::after copyright.

   Stillness uses a real HTML element instead so that the
   copyright displays reliably on desktop and mobile and
   therefore remains visible in screenshots.
*/

.stillness-artwork.protected-artwork::after {
  content: none !important;
  display: none !important;
}


.stillness-artwork {
  position: relative;

  display: block;

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


.stillness-artwork-left {
  margin-left: 0;
  margin-right: auto;
}


.stillness-artwork-center {
  margin-left: auto;
  margin-right: auto;
}


.stillness-artwork-right {
  margin-left: auto;
  margin-right: 0;
}


.stillness-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;
}


/* =========================================================
   STILLNESS PAGE HERO
   ========================================================= */

.stillness-page-hero {
  min-height: 100svh;

  padding:
    clamp(125px, 13vw, 190px)
    var(--gutter)
    clamp(85px, 9vw, 135px);

  display: grid;

  grid-template-columns:
    minmax(280px, .72fr)
    minmax(0, 1.28fr);

  gap:
    clamp(55px, 8vw, 135px);

  align-items: center;
}


/* =========================================================
   HERO COPY
   ========================================================= */

.stillness-page-hero-copy {
  max-width: 610px;
}


.stillness-page-hero-copy h1 {
  margin:
    14px 0
    0;

  font-family:
    var(--serif);

  font-size:
    clamp(
      76px,
      9vw,
      155px
    );

  font-weight: 400;

  line-height: .8;

  letter-spacing: -.05em;
}


.stillness-page-tagline {
  margin:
    clamp(32px, 4vw, 56px)
    0
    0;

  font-family:
    var(--serif);

  font-size:
    clamp(
      27px,
      2.8vw,
      46px
    );

  font-weight: 400;

  line-height: 1;

  letter-spacing: -.015em;
}


.stillness-page-intro {
  max-width: 47ch;

  margin:
    30px 0
    38px;

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

  line-height: 1.8;

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


/* =========================================================
   01 — CARLINGFORDS GUIDING LIGHT
   ========================================================= */

.stillness-page-hero-image {
  width:
    min(
      100%,
      930px
    );

  margin: 0;

  justify-self: end;
}


.stillness-page-hero-image img {
  display: block;

  width: auto;

  max-width: 100%;

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

  height: auto;

  object-fit: contain;
}


/* =========================================================
   CAPTIONS
   ========================================================= */

.stillness-page-hero-image figcaption,
.stillness-work-figure figcaption {
  margin-top: 14px;

  display: flex;

  align-items: baseline;

  gap: 18px;

  font-size: 9px;

  font-weight: 500;

  line-height: 1.4;

  letter-spacing: .18em;

  text-transform: uppercase;

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


.stillness-page-hero-image figcaption span:first-child,
.stillness-work-figure figcaption span:first-child {
  color:
    rgba(0, 0, 0, .42);
}


.stillness-caption-light {
  color:
    rgba(255, 255, 255, .80) !important;
}


.stillness-caption-light span:first-child {
  color:
    rgba(255, 255, 255, .42) !important;
}


/* =========================================================
   SHARED STILLNESS SECTIONS
   ========================================================= */

.stillness-work {
  position: relative;

  min-height: 100svh;

  padding:
    clamp(105px, 12vw, 190px)
    var(--gutter);

  display: flex;

  align-items: center;
}


.stillness-work-figure {
  margin: 0;
}


.stillness-work-figure img {
  display: block;

  width: auto;

  max-width: 100%;

  max-height:
    min(
      80svh,
      1080px
    );

  height: auto;

  object-fit: contain;
}


/* =========================================================
   02 — KINNEGAR JETTY
   ========================================================= */

.stillness-work-kinnegar {
  justify-content: center;
}


.stillness-work-kinnegar .stillness-work-figure {
  width:
    min(
      88vw,
      1280px
    );

  margin:
    0 auto;
}


/* =========================================================
   03 — BLUE RAIL
   ========================================================= */

.stillness-work-blue {
  justify-content: flex-start;
}


.stillness-work-blue .stillness-work-figure {
  width:
    min(
      78vw,
      1160px
    );

  margin-left:
    clamp(
      0px,
      5vw,
      100px
    );

  margin-right: auto;
}


/* =========================================================
   04 — STIX
   A deliberate visual pause
   ========================================================= */

.stillness-work-stix {
  min-height:
    115svh;

  display: grid;

  grid-template-columns:
    minmax(220px, .38fr)
    minmax(0, 1fr);

  gap:
    clamp(
      70px,
      10vw,
      170px
    );

  align-items: center;

  padding-top:
    clamp(
      145px,
      17vw,
      260px
    );

  padding-bottom:
    clamp(
      145px,
      17vw,
      260px
    );
}


.stillness-work-stix .stillness-work-figure {
  width:
    min(
      100%,
      1040px
    );

  justify-self: end;
}


.stillness-work-text {
  max-width: 380px;
}


.stillness-work-text > p:last-child {
  margin:
    20px 0
    0;

  font-family:
    var(--serif);

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

  font-weight: 400;

  line-height: 1.07;

  letter-spacing: -.025em;

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


/* =========================================================
   05 — SUNSET STRAND
   ========================================================= */

.stillness-work-sunset {
  justify-content: center;

  padding-top:
    clamp(
      125px,
      15vw,
      220px
    );

  padding-bottom:
    clamp(
      125px,
      15vw,
      220px
    );
}


.stillness-work-sunset .stillness-work-figure {
  width:
    min(
      90vw,
      1420px
    );

  margin:
    0 auto;
}


/* =========================================================
   06 — CUTTING THROUGH CALM
   ========================================================= */

.stillness-work-finale {
  min-height: auto;

  display: block;

  padding-top:
    clamp(
      120px,
      14vw,
      210px
    );

  padding-bottom:
    clamp(
      105px,
      13vw,
      190px
    );
}


.stillness-work-finale .stillness-work-figure {
  width:
    min(
      88vw,
      1320px
    );

  margin:
    0 auto;
}


/* =========================================================
   SERIES CLOSE
   ========================================================= */

.stillness-series-end {
  width:
    min(
      88vw,
      1320px
    );

  margin:
    clamp(
      85px,
      10vw,
      150px
    )
    auto
    0;

  padding-top: 30px;

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

  display: grid;

  grid-template-columns:
    .38fr
    1fr
    auto;

  gap: 30px;

  align-items: end;
}


.stillness-series-end > p:nth-child(2) {
  margin: 0;

  font-family:
    var(--serif);

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

  font-weight: 400;

  line-height: .95;

  letter-spacing: -.025em;
}


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

@media (max-width: 980px) {


  .stillness-page-hero {
    min-height: auto;

    padding-top: 130px;

    grid-template-columns: 1fr;

    gap: 75px;
  }


  .stillness-page-hero-copy {
    max-width: 720px;
  }


  .stillness-page-hero-copy h1 {
    font-size:
      clamp(
        84px,
        15vw,
        138px
      );
  }


  .stillness-page-hero-image {
    width:
      min(
        90vw,
        820px
      );

    justify-self: center;
  }


  .stillness-page-hero-image img,
  .stillness-work-figure img {
    max-height: none;
  }


  .stillness-work {
    min-height: auto;
  }


  .stillness-work-kinnegar .stillness-work-figure,
  .stillness-work-blue .stillness-work-figure,
  .stillness-work-sunset .stillness-work-figure,
  .stillness-work-finale .stillness-work-figure {
    width:
      min(
        90vw,
        1100px
      );

    margin-left: auto;
    margin-right: auto;
  }


  .stillness-work-stix {
    min-height: auto;

    grid-template-columns: 1fr;

    gap: 70px;
  }


  .stillness-work-text {
    max-width: 560px;
  }


  .stillness-work-stix .stillness-work-figure {
    width:
      min(
        90vw,
        980px
      );

    justify-self: center;
  }


  .stillness-series-end {
    grid-template-columns: 1fr;

    align-items: start;

    gap: 25px;
  }

}


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

@media (max-width: 640px) {


  .stillness-page-hero {
    padding:
      108px
      var(--gutter)
      82px;

    gap: 58px;
  }


  .stillness-page-hero-copy h1 {
    font-size:
      clamp(
        70px,
        21vw,
        96px
      );

    line-height: .82;
  }


  .stillness-page-tagline {
    margin-top: 30px;

    font-size: 29px;
  }


  .stillness-page-intro {
    margin-top: 24px;

    font-size: 15px;

    line-height: 1.75;
  }


  .stillness-page-hero-image {
    width: 100%;
  }


  .stillness-work {
    padding:
      82px
      var(--gutter);
  }


  .stillness-work-kinnegar .stillness-work-figure,
  .stillness-work-blue .stillness-work-figure,
  .stillness-work-stix .stillness-work-figure,
  .stillness-work-sunset .stillness-work-figure,
  .stillness-work-finale .stillness-work-figure {
    width: 100%;

    margin-left: 0;
    margin-right: 0;
  }


  .stillness-work-figure img {
    width: auto;

    max-width: 100%;

    max-height: none;

    margin:
      0 auto;
  }


  .stillness-page-hero-image figcaption,
  .stillness-work-figure figcaption {
    margin-top: 11px;

    gap: 12px;

    font-size: 8px;
  }


  .stillness-work-stix {
    padding-top: 120px;

    padding-bottom: 120px;

    gap: 58px;
  }


  .stillness-work-text > p:last-child {
    font-size:
      clamp(
        29px,
        9vw,
        39px
      );

    max-width: 16ch;
  }


  .stillness-work-sunset {
    padding-top: 105px;

    padding-bottom: 105px;
  }


  .stillness-work-finale {
    padding-top: 95px;

    padding-bottom: 110px;
  }


  .stillness-series-end {
    width: 100%;

    margin-top: 75px;

    padding-top: 24px;
  }


  .stillness-series-end > p:nth-child(2) {
    font-size: 38px;
  }


  /*
     Mobile copyright remains deliberately visible so that
     screenshots retain the photographer credit.
  */

  .stillness-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;
  }

}


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

@media (max-width: 380px) {

  .stillness-page-hero-copy h1 {
    font-size: 66px;
  }


  .stillness-page-tagline {
    font-size: 26px;
  }


  .stillness-work-text > p:last-child {
    font-size: 29px;
  }


  .stillness-series-end > p:nth-child(2) {
    font-size: 34px;
  }

}