/* Traces of Origin — Artwork page
   Purpose: shared styling for /artworks/<slug>/
   Doctrine: quiet, restrained, image-first, premium.
*/

@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400&family=Cormorant+Garamond:wght@300;400;500&display=swap");

:root {
  --bg: #0f0d0b;
  --text: #d4cabd;
  --text-soft: #a99f93;
  --gold: #c9a55b;
  --line: rgba(201, 165, 91, 0.34);
  --max-width: 1380px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;

  background:
    radial-gradient(
      circle at 20% 15%,
      rgba(255, 255, 255, 0.025),
      transparent 34%
    ),
    var(--bg);

  color: var(--text);

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main {
  width:
    min(
      calc(100% - 80px),
      var(--max-width)
    );

  min-height: 100vh;

  margin: 0 auto;

  padding: 42px 0 54px;

  display: grid;

  grid-template-columns:
    minmax(0, 1.35fr)
    minmax(320px, 0.85fr);

  grid-template-rows:
    auto
    1fr;

  column-gap:
    clamp(
      64px,
      7vw,
      120px
    );

  align-items: center;
}

/* Brand */

.brand {
  grid-column: 1;
  grid-row: 1;

  justify-self: center;

  margin: 0 0 34px;

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-size:
    clamp(
      2rem,
      3.2vw,
      3rem
    );

  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.001em;

  background:
    linear-gradient(
      180deg,
      #f5d98a 0%,
      #ddb75d 58%,
      #c89b3c 100%
    );

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Artwork */

.artwork {
  grid-column: 1;
  grid-row: 2;

  margin: 0;
  min-width: 0;

  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.artwork img {
  display: block;

  width: auto;
  max-width: 100%;

  max-height:
    calc(
      100vh - 150px
    );

  object-fit: contain;

  box-shadow:
    0 22px 65px
    rgba(0, 0, 0, 0.32);
}

/* Artwork content */

.artwork-content {
  grid-column: 2;
  grid-row: 2;

  align-self: center;

  width:
    min(
      100%,
      480px
    );

  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

h1 {
  margin: 0 0 28px;

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size:
    clamp(
      50px,
      5vw,
      78px
    );

  line-height: 0.96;
  font-weight: 300;
  letter-spacing: 0.01em;

  color: #e2d9ce;
}

h1::after {
  content: "";

  display: block;

  width: 100%;
  height: 1px;

  margin-top: 28px;

  background:
    linear-gradient(
      to right,
      rgba(201, 165, 91, 0.58),
      rgba(201, 165, 91, 0.12)
    );
}

p {
  margin: 0;

  max-width: 460px;

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size: 21px;
  line-height: 1.55;
  font-weight: 300;

  color: var(--text-soft);
}

/* View in Gallery */

.button {
  display: inline-flex;

  min-height: 48px;
  margin-top: 40px;

  align-items: center;
  justify-content: center;

  padding: 0 26px;

  border:
    1px solid
    rgba(221, 183, 93, 0.68);

  text-decoration: none;

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size: 16px;
  font-weight: 400;

  letter-spacing: 0.13em;

  text-transform: uppercase;

  color: #e7c86f;

  background:
    rgba(
      201,
      165,
      91,
      0.025
    );

  transition:
    border-color 160ms ease,
    color 160ms ease,
    background-color 160ms ease;
}

.button:hover {
  border-color:
    rgba(
      245,
      217,
      138,
      0.92
    );

  color: #f0d889;

  background:
    rgba(
      201,
      165,
      91,
      0.065
    );
}

/* Intermediate width — still two columns */

@media (max-width: 1050px) and (min-width: 781px) {
  main {
    width:
      min(
        calc(100% - 56px),
        1080px
      );

    grid-template-columns:
      minmax(0, 1.18fr)
      minmax(300px, 0.82fr);

    column-gap:
      clamp(
        38px,
        5vw,
        64px
      );
  }

  .artwork img {
    max-height:
      calc(
        100vh - 140px
      );
  }

  .artwork-content {
    width:
      min(
        100%,
        420px
      );
  }

  h1 {
    font-size:
      clamp(
        46px,
        5.4vw,
        64px
      );
  }

  p {
    font-size: 19px;
  }
}

/* Tablet — single centered axis */

@media (max-width: 780px) {
  main {
    width:
      min(
        calc(100% - 48px),
        720px
      );

    padding: 30px 0 42px;

    grid-template-columns: 1fr;
    grid-template-rows: auto;

    row-gap: 0;
  }

  .brand,
  .artwork,
  .artwork-content {
    grid-column: 1;
    grid-row: auto;
  }

  .brand {
    justify-self: center;
    margin-bottom: 28px;
  }

  .artwork {
    justify-content: center;
  }

  .artwork img {
    max-height: 68vh;
  }

  .artwork-content {
    width: min(100%, 620px);

    margin: 38px auto 0;

    align-self: auto;
    align-items: center;

    text-align: center;
  }

  h1 {
    width: fit-content;

    margin: 0 auto 24px;

    font-size:
      clamp(
        44px,
        8vw,
        64px
      );
  }

  h1::after {
    margin-left: auto;
    margin-right: auto;
  }

  p {
    max-width: 620px;

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

    font-size: 20px;

    text-align: center;
  }

  .button {
    margin-top: 32px;
  }
}

/* Mobile */

@media (max-width: 560px) {
  main {
    width:
      calc(
        100% - 32px
      );

    padding:
      22px 0 34px;
  }

  .brand {
    margin-bottom: 22px;
    font-size: 2rem;
  }

  .artwork img {
    width: 100%;
    max-height: none;
  }

  .artwork-content {
    width: 100%;
    margin-top: 30px;
  }

  h1 {
    margin-bottom: 20px;
    font-size: 44px;
  }

  h1::after {
    margin-top: 22px;
  }

  p {
    font-size: 18px;
    line-height: 1.5;
  }

  .button {
    width: 100%;
    margin-top: 28px;
  }
}

/* Accessibility */

.button:focus-visible {
  outline:
    1px solid
    var(--gold);

  outline-offset: 4px;
}