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

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


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

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

   Solitude uses a real HTML copyright element so the credit
   renders consistently on desktop and mobile and therefore
   remains visible in screenshots.
*/

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


.solitude-artwork {
  position: relative;

  display: block;

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


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


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


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


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


/* =========================================================
   SOLITUDE PAGE HERO
   ========================================================= */

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

  padding:
    clamp(125px, 13vw, 190px)
    var(--gutter)
    clamp(90px, 10vw, 145px);

  display: grid;

  grid-template-columns:
    minmax(280px, .7fr)
    minmax(0, 1.3fr);

  gap:
    clamp(60px, 8vw, 140px);

  align-items: center;
}


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

.solitude-page-hero-copy {
  max-width: 625px;
}


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

  font-family:
    var(--serif);

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

  font-weight: 400;

  line-height: .8;

  letter-spacing: -.05em;
}


.solitude-page-tagline {
  max-width: 12ch;

  margin:
    clamp(32px, 4vw, 56px)
    0
    0;

  font-family:
    var(--serif);

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

  font-weight: 400;

  line-height: 1.04;

  letter-spacing: -.015em;
}


.solitude-page-intro {
  max-width: 48ch;

  margin:
    30px 0
    38px;

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

  line-height: 1.8;

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


/* =========================================================
   01 — LITTLE TREE HIDE
   ========================================================= */

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

  margin: 0;

  justify-self: end;
}


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

  width: auto;

  max-width: 100%;

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

  height: auto;

  object-fit: contain;
}


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

.solitude-page-hero-image figcaption,
.solitude-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);
}


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


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


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


/* =========================================================
   SHARED SOLITUDE SECTIONS
   ========================================================= */

.solitude-work {
  position: relative;

  min-height: 100svh;

  padding:
    clamp(110px, 13vw, 200px)
    var(--gutter);

  display: flex;

  align-items: center;
}


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


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

  width: auto;

  max-width: 100%;

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

  height: auto;

  object-fit: contain;
}


/* =========================================================
   02 — NEBULOUS
   First atmospheric pause
   ========================================================= */

.solitude-work-nebulous {
  min-height: 115svh;

  display: grid;

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

  gap:
    clamp(
      65px,
      9vw,
      155px
    );

  align-items: center;

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

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


.solitude-work-nebulous .solitude-work-figure {
  width:
    min(
      100%,
      1080px
    );

  justify-self: end;
}


.solitude-nebulous-intro {
  max-width: 350px;
}


.solitude-nebulous-intro > p:last-child {
  margin:
    20px 0
    0;

  font-family:
    var(--serif);

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

  font-weight: 400;

  line-height: 1.06;

  letter-spacing: -.025em;

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


/* =========================================================
   03 — STANDING IN SILENCE
   ========================================================= */

.solitude-work-standing {
  justify-content: flex-start;
}


.solitude-work-standing .solitude-work-figure {
  width:
    min(
      76vw,
      1040px
    );

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

  margin-right: auto;
}


/* =========================================================
   04 — ISLAND IN THE MIST
   Darker tonal interruption
   ========================================================= */

.solitude-work-island {
  justify-content: center;

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

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


.solitude-work-island .solitude-work-figure {
  width:
    min(
      88vw,
      1360px
    );

  margin:
    0 auto;
}


/* =========================================================
   05 — BENT, NOT BROKEN
   ========================================================= */

.solitude-work-bent {
  display: grid;

  grid-template-columns:
    minmax(230px, .4fr)
    minmax(0, 1fr);

  gap:
    clamp(
      60px,
      9vw,
      150px
    );

  align-items: center;
}


.solitude-work-bent .solitude-work-figure {
  width:
    min(
      100%,
      940px
    );

  justify-self: end;
}


.solitude-work-text {
  max-width: 390px;
}


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

  font-family:
    var(--serif);

  font-size:
    clamp(
      30px,
      3.1vw,
      52px
    );

  font-weight: 400;

  line-height: 1.06;

  letter-spacing: -.025em;

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


/* =========================================================
   06 — BIRD HOUSE
   ========================================================= */

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

  display: block;

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

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


.solitude-work-finale .solitude-work-figure {
  width:
    min(
      86vw,
      1260px
    );

  margin:
    0 auto;
}


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

.solitude-series-end {
  width:
    min(
      86vw,
      1260px
    );

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


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

  font-family:
    var(--serif);

  font-size:
    clamp(
      32px,
      3.8vw,
      60px
    );

  font-weight: 400;

  line-height: .98;

  letter-spacing: -.025em;
}


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

@media (max-width: 980px) {


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

    padding-top: 130px;

    grid-template-columns: 1fr;

    gap: 75px;
  }


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


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


  .solitude-page-tagline {
    max-width: none;
  }


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

    justify-self: center;
  }


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


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


  .solitude-work-nebulous {
    min-height: auto;

    grid-template-columns: 1fr;

    gap: 70px;
  }


  .solitude-nebulous-intro {
    max-width: 560px;
  }


  .solitude-work-nebulous .solitude-work-figure,
  .solitude-work-standing .solitude-work-figure,
  .solitude-work-island .solitude-work-figure,
  .solitude-work-finale .solitude-work-figure {
    width:
      min(
        90vw,
        1060px
      );

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

    justify-self: center;
  }


  .solitude-work-bent {
    grid-template-columns: 1fr;

    gap: 70px;
  }


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


  .solitude-work-bent .solitude-work-figure {
    width:
      min(
        90vw,
        920px
      );

    justify-self: center;
  }


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

    align-items: start;

    gap: 25px;
  }

}


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

@media (max-width: 640px) {


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

    gap: 58px;
  }


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

    line-height: .82;
  }


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

    font-size: 29px;

    max-width: 12ch;
  }


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

    font-size: 15px;

    line-height: 1.75;
  }


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


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


  .solitude-work-nebulous .solitude-work-figure,
  .solitude-work-standing .solitude-work-figure,
  .solitude-work-island .solitude-work-figure,
  .solitude-work-bent .solitude-work-figure,
  .solitude-work-finale .solitude-work-figure {
    width: 100%;

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


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

    max-width: 100%;

    max-height: none;

    margin:
      0 auto;
  }


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

    gap: 12px;

    font-size: 8px;
  }


  /* NEBULOUS */

  .solitude-work-nebulous {
    padding-top: 120px;

    padding-bottom: 120px;

    gap: 58px;
  }


  .solitude-nebulous-intro > p:last-child {
    font-size:
      clamp(
        29px,
        9vw,
        39px
      );

    max-width: 15ch;
  }


  /* ISLAND */

  .solitude-work-island {
    padding-top: 105px;

    padding-bottom: 105px;
  }


  /* BENT NOT BROKEN */

  .solitude-work-bent {
    gap: 55px;
  }


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

    max-width: 16ch;
  }


  /* FINAL */

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

    padding-bottom: 110px;
  }


  /* SERIES CLOSE */

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

    margin-top: 75px;

    padding-top: 24px;
  }


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


  /*
     Keep copyright clearly visible on phones so that
     screenshots retain the photographer credit.
  */

  .solitude-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) {

  .solitude-page-hero-copy h1 {
    font-size: 64px;
  }


  .solitude-page-tagline {
    font-size: 25px;
  }


  .solitude-nebulous-intro > p:last-child,
  .solitude-work-text > p:last-child {
    font-size: 29px;
  }


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

}