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

   Page-specific styling for:
   /form.php

   Shared site styling remains in:
   /css/main.css
   ========================================================= */


/* =========================================================
   FORM PAGE INTRO / HERO
   ========================================================= */

.form-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(50px, 7vw, 120px);

  align-items: center;
}


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

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


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

  font-family: var(--serif);

  font-size:
    clamp(
      82px,
      10vw,
      165px
    );

  font-weight: 400;

  line-height: .78;

  letter-spacing: -.05em;
}


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


.form-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 — SPIRALS / HERO IMAGE
   ========================================================= */

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

  margin: 0;

  justify-self: end;
}


.form-page-hero-image img {
  width: auto;

  max-width: 100%;

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

  height: auto;

  margin-left: auto;

  object-fit: contain;
}


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

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


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


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


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


/* =========================================================
   SHARED FORM IMAGE SECTIONS
   ========================================================= */

.form-work {
  position: relative;

  min-height: 100svh;

  padding:
    clamp(95px, 11vw, 175px)
    var(--gutter);

  display: flex;

  align-items: center;
}


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


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

  max-width: 100%;

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

  height: auto;

  object-fit: contain;
}


/* =========================================================
   02 — BLACK RAIL
   Wide, calm presentation
   ========================================================= */

.form-work-wide {
  justify-content: center;
}


.form-work-wide .form-work-figure {
  width: min(100%, 1500px);

  margin: 0 auto;
}


.form-work-wide .form-work-figure img {
  margin: 0 auto;
}


/* =========================================================
   03 — ASCENSION
   More contained with asymmetric placement
   ========================================================= */

.form-work-contained {
  justify-content: flex-start;
}


.form-work-contained .form-work-figure {
  width:
    min(
      76vw,
      980px
    );
}


.form-work-figure-left {
  margin-left:
    clamp(
      0px,
      4vw,
      90px
    );

  margin-right: auto;
}


/* =========================================================
   04 — CONCOURSE
   Dark visual interruption
   ========================================================= */

.form-work-charcoal {
  justify-content: flex-end;

  padding-top:
    clamp(
      115px,
      13vw,
      200px
    );

  padding-bottom:
    clamp(
      115px,
      13vw,
      200px
    );
}


.form-work-charcoal .form-work-figure {
  width:
    min(
      72vw,
      980px
    );

  margin-left: auto;

  margin-right:
    clamp(
      0px,
      5vw,
      110px
    );
}


.form-work-charcoal .form-work-figure img {
  margin-left: auto;
}


/* =========================================================
   05 — SOLITAIRE
   Reduction / breathing space
   ========================================================= */

.form-work-solitaire {
  display: grid;

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

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

  align-items: center;
}


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

  justify-self: end;
}


.form-work-solitaire .form-work-figure img {
  margin-left: auto;
}


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


.form-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 — WHAT LIES BENEATH
   Closing image
   ========================================================= */

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

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

  padding-bottom:
    clamp(
      100px,
      12vw,
      180px
    );

  display: block;
}


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

  margin: 0 auto;
}


.form-work-finale .form-work-figure img {
  margin: 0 auto;
}


/* =========================================================
   FORM SERIES CLOSING
   ========================================================= */

.form-series-end {
  width:
    min(
      88vw,
      1280px
    );

  margin:
    clamp(
      75px,
      9vw,
      135px
    )
    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;
}


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


/* =========================================================
   COPYRIGHT POSITIONING
   FORM PAGE

   main.css supplies the actual watermark styling.

   Because each figure includes a caption below the image,
   the watermark is positioned just above that caption.
   ========================================================= */

.form-page-hero-image.protected-artwork::after,
.form-work-figure.protected-artwork::after {
  right: 12px;

  bottom: 34px;
}


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

@media (max-width: 980px) {


  /* HERO */

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

    padding-top: 130px;

    grid-template-columns: 1fr;

    gap: 70px;
  }


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


  .form-page-hero-copy h1 {
    font-size:
      clamp(
        90px,
        16vw,
        145px
      );
  }


  .form-page-hero-image {
    width:
      min(
        88vw,
        800px
      );

    justify-self: center;
  }


  .form-page-hero-image img {
    max-height: none;

    margin: 0 auto;
  }


  /* SHARED WORK */

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


  .form-work-contained .form-work-figure,
  .form-work-charcoal .form-work-figure,
  .form-work-finale .form-work-figure {
    width:
      min(
        90vw,
        1050px
      );

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


  .form-work-figure img {
    max-height: none;
  }


  /* SOLITAIRE */

  .form-work-solitaire {
    grid-template-columns: 1fr;

    gap: 65px;
  }


  .form-work-text {
    max-width: 570px;
  }


  .form-work-solitaire .form-work-figure {
    width:
      min(
        90vw,
        900px
      );

    justify-self: center;
  }


  .form-work-solitaire .form-work-figure img {
    margin: 0 auto;
  }


  /* SERIES CLOSE */

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

    align-items: start;

    gap: 25px;
  }

}


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

@media (max-width: 640px) {


  /* HERO */

  .form-page-hero {
    padding:
      108px
      var(--gutter)
      78px;

    gap: 55px;
  }


  .form-page-hero-copy h1 {
    font-size:
      clamp(
        78px,
        25vw,
        108px
      );

    line-height: .8;
  }


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

    font-size: 29px;
  }


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

    font-size: 15px;

    line-height: 1.75;
  }


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


  /* SHARED WORK */

  .form-work {
    padding:
      78px
      var(--gutter);
  }


  .form-work-wide .form-work-figure,
  .form-work-contained .form-work-figure,
  .form-work-charcoal .form-work-figure,
  .form-work-solitaire .form-work-figure,
  .form-work-finale .form-work-figure {
    width: 100%;

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


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

    max-width: 100%;

    max-height: none;

    margin: 0 auto;
  }


  /* CAPTIONS */

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

    gap: 12px;

    font-size: 8px;
  }


  /* CONCOURSE */

  .form-work-charcoal {
    padding-top: 95px;

    padding-bottom: 95px;
  }


  /* SOLITAIRE */

  .form-work-solitaire {
    gap: 48px;
  }


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

    max-width: 15ch;
  }


  /* FINAL IMAGE */

  .form-work-finale {
    padding-top: 90px;

    padding-bottom: 105px;
  }


  /* SERIES CLOSE */

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

    margin-top: 70px;

    padding-top: 24px;
  }


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


  /* COPYRIGHT */

  .form-page-hero-image.protected-artwork::after,
  .form-work-figure.protected-artwork::after {
    right: 8px;

    bottom: 30px;

    font-size: 7px;

    padding:
      3px
      5px;
  }

}


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

@media (max-width: 380px) {

  .form-page-hero-copy h1 {
    font-size: 72px;
  }


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


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


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

}