/* =========================================================
   HOMEPAGE
   ========================================================= */


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

.home-hero {
  width: 100%;

  padding:
    clamp(70px, 8vw, 130px)
    clamp(28px, 4vw, 72px)
    clamp(80px, 9vw, 150px);
}


.home-hero__inner {
  width: 100%;
  max-width: 1700px;

  margin: 0 auto;

  display: grid;
  grid-template-columns:
    minmax(0, 1.25fr)
    minmax(300px, 0.75fr);

  gap: clamp(45px, 6vw, 120px);

  align-items: center;
}



/* =========================================================
   HERO ARTWORK
   ========================================================= */

.home-hero__artwork {
  min-width: 0;
}


.home-hero__artwork img {
  display: block;

  width: 100%;
  height: auto;

  max-height: 78vh;

  object-fit: contain;
  object-position: left center;
}



/* =========================================================
   HERO INFORMATION
   ========================================================= */

.home-hero__info {
  display: flex;
  flex-direction: column;

  align-items: flex-start;

  max-width: 520px;
}


.home-hero__eyebrow {
  margin: 0 0 22px;

  color: var(--accent);

  font-size: clamp(0.7rem, 0.7vw, 0.82rem);
  font-weight: 700;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}


.home-hero__title {
  margin: 0;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size:
    clamp(
      3.4rem,
      7vw,
      8.5rem
    );

  font-weight: 800;

  line-height: 0.86;

  letter-spacing: -0.065em;

  text-transform: uppercase;
}


.home-hero__meta {
  margin-top: 34px;

  display: flex;
  flex-wrap: wrap;

  gap: 8px 18px;

  font-size: clamp(0.68rem, 0.65vw, 0.8rem);

  font-weight: 600;

  letter-spacing: 0.02em;

  text-transform: uppercase;
}


.home-hero__statement {
  margin:
    clamp(40px, 4vw, 68px)
    0
    0;

  max-width: 440px;

  font-size:
    clamp(
      1rem,
      1.25vw,
      1.32rem
    );

  line-height: 1.5;
}



/* =========================================================
   PRIMARY ROUTES
   ========================================================= */

.home-hero__links {
  width: 100%;

  margin-top:
    clamp(
      36px,
      4vw,
      64px
    );

  display: flex;
  flex-direction: column;

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


.home-hero__link {
  width: 100%;

  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 16px 0;

  border-bottom:
    1px solid
    rgba(0, 0, 0, 0.15);

  color: inherit;

  font-size:
    clamp(
      0.78rem,
      0.9vw,
      0.98rem
    );

  font-weight: 700;

  letter-spacing: 0.035em;

  text-decoration: none;

  text-transform: uppercase;

  transition:
    color 160ms ease,
    padding-left 200ms ease;
}


.home-hero__link::after {
  content: "→";

  color: var(--accent);

  font-size: 1.2em;

  font-weight: 400;
}


.home-hero__link:hover,
.home-hero__link:focus-visible {
  color: var(--accent);

  padding-left: 5px;
}


.home-hero__link:focus-visible {
  outline: none;
}



/* =========================================================
   PRACTICE / STUDIO SECTION
   ========================================================= */

.home-practice {
  width: 100%;

  padding:
    clamp(110px, 13vw, 220px)
    clamp(28px, 4vw, 72px)
    clamp(120px, 14vw, 240px);
}


.home-practice__inner {
  width: 100%;
  max-width: 1500px;

  margin: 0 auto;
}


.home-practice__heading {
  width: min(100%, 950px);

  margin: 0 auto
    clamp(70px, 8vw, 130px);

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size:
    clamp(
      2.5rem,
      5vw,
      6rem
    );

  font-weight: 800;

  line-height: 0.96;

  letter-spacing: -0.05em;

  text-align: center;
}


.home-practice__heading em {
  color: var(--accent);

  font-style: normal;
}



/* =========================================================
   STUDIO IMAGE
   ========================================================= */

.home-practice__image {
  width: 100%;

  margin: 0;
}


.home-practice__image img {
  display: block;

  width: 100%;
  height: auto;
}


.home-practice__image figcaption {
  margin-top: 8px;

  font-size: 0.62rem;
  font-weight: 500;

  letter-spacing: 0.04em;

  opacity: 0.55;

  text-transform: uppercase;
}



/* =========================================================
   ABOUT LINK
   ========================================================= */

.home-practice__about {
  width: min(100%, 720px);

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

  text-align: center;
}


.home-practice__about p {
  margin: 0;

  font-size:
    clamp(
      1rem,
      1.3vw,
      1.3rem
    );

  line-height: 1.55;
}


.home-practice__about a {
  display: inline-block;

  margin-top: 30px;

  color: inherit;

  font-size: 0.78rem;
  font-weight: 700;

  letter-spacing: 0.05em;

  text-decoration: none;

  text-transform: uppercase;
}


.home-practice__about a::after {
  content: " →";

  color: var(--accent);
}


.home-practice__about a:hover,
.home-practice__about a:focus-visible {
  color: var(--accent);
}


.home-practice__about a:focus-visible {
  outline: none;
}



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

@media (max-width: 1000px) {

  .home-hero__inner {
    grid-template-columns: 1fr;

    gap: 60px;
  }


  .home-hero__artwork img {
    width: min(100%, 760px);

    margin: 0 auto;

    max-height: none;

    object-position: center;
  }


  .home-hero__info {
    width: min(100%, 760px);

    max-width: none;

    margin: 0 auto;
  }


  .home-hero__title {
    font-size:
      clamp(
        4rem,
        13vw,
        8rem
      );
  }

}



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

@media (max-width: 600px) {

  .home-hero {
    padding:
      55px
      18px
      90px;
  }


  .home-hero__inner {
    gap: 42px;
  }


  .home-hero__title {
    font-size:
      clamp(
        3.1rem,
        16vw,
        5rem
      );
  }


  .home-hero__statement {
    margin-top: 30px;
  }


  .home-hero__links {
    margin-top: 34px;
  }


  .home-practice {
    padding:
      100px
      18px
      120px;
  }


  .home-practice__heading {
    margin-bottom: 60px;

    font-size:
      clamp(
        2.35rem,
        11vw,
        4rem
      );
  }


  .home-practice__about {
    margin-top: 60px;
  }

}