/* ===========================================================
   Desire Lines — portfolio page
   Design canvas reference width: 1920px
   Fonts:  Kolker Brush (display/script) · Helvetica (body/caption)
   =========================================================== */

:root {
  --color-bg: #F0E8E5;
  --color-title: #DED285;
  --color-text: #C1B566;

  --font-script: 'Kolker Brush', cursive;
  --font-body: 'Afacad Flux', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Fluid type scale — clamp(min, viewport-relative, max-at-1920) */
  --size-hero-title: clamp(48px, 11.82vw, 227px);
  --size-quote: clamp(26px, 5.1vw, 98px);
  --size-body: clamp(18px, 2.81vw, 24px);
  --size-caption: clamp(10px, 2.03vw, 16px);

  --max-width: 1920px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

.page {
  max-width: var(--max-width);
  margin: 0 auto;
  position: relative;
  padding: 0 4%;
}

p { margin: 0 0 1.4em 0; }
p:last-child { margin-bottom: 0; }

/* ===================== SECTION 1 — Hero ===================== */

.hero {
  padding-top: 4vw;
}

.hero-image-wrap {
  position: relative;
  height: 42vw;
  min-height: 320px;
}

/* Arm_cutout.png's intrinsic long axis runs near-vertical (head up-right,
   tail down-left) — rotated here to lay diagonally across the hero,
   matching the original mockup's angle. */
.hero-image {
  position: absolute;
  top: 54%;
  left: 60%;
  height:378%;
  width: auto;
  max-width: none;
  object-fit: contain;
  transform: translate(-50%, -50%) rotate(42deg);
  transform-origin: center;
}

.hero-title {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: var(--size-hero-title);
  color: var(--color-title);
  position: absolute;
  top: 2%;
  left: 0;
  margin: 0;
  transform: rotate(15deg);
  transform-origin: left top;
  line-height: 1;
  white-space: nowrap;
  z-index: 2;
}

.hero-text {
  width: 36%;
  margin: 3vw 0 0 auto;
  text-align: left;
  font-size: var(--size-body);
  line-height: 1.0;
}

/* ===================== SECTION 2 — Gallery 1 ===================== */

.gallery-1 {
  display: grid;
  grid-template-columns: 38% 1fr;
  gap: 4%;
  margin-top: 3vw;
  align-items: start;
}

.gallery-1-left {
  display: flex;
  flex-direction: column;
  gap: 25vw;
}

.caption-bold {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--size-caption);
  line-height: 1.25;
  margin: 0;
  width: 60%;
}

.gallery-1-right {
  display: flex;
  flex-direction: column;
  gap: 45vw;
}

.img-install { width: 100%; }
.img-banner { width: 98%; margin-left: auto; }
.img-visitor { width: 100%; }

/* ===================== SECTION 3 — Quotes ===================== */

.quotes {
  margin-top: 12vw;
  padding: 2vw 0;
}

.quote {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: var(--size-quote);
  line-height: 1.15;
  margin: 0;
  transform: rotate(-6deg);
}

.quote-1 {
  width: 78%;
  transform-origin: left center;
}

/* ===================== SECTION 4 — Audio block ===================== */

.audio-block {
  margin-top: 15vw;
  display: grid;
  grid-template-columns: 22% 1fr 28%;
  grid-template-rows: auto auto;
  column-gap: 4%;
}

.img-wire {
  grid-column: 2;
  grid-row: 1;
  width: 80%;
}

.audio-text {
  grid-column: 2 / 4;
  grid-row: 1;
  justify-self: end;
  text-align: left;
  font-size: var(--size-body);
  line-height: 1.0;
  align-self: center;
  width: 45%;
}

.img-rollercoaster {
  grid-column: 3;
  grid-row: 2;
  width: 100%;
  margin-top: 12vw;
  justify-self: end;
}

/* ===================== SECTION 5 — Metaphor block ===================== */

.metaphor-block {
  margin-top: 8vw;
}

.metaphor-text {
  width: 55%;
  margin: 0 0 4vw auto;
  text-align: left;
  font-size: var(--size-body);
  line-height: 1.0;
}

.img-tent {
  width: 56%;
  margin-left: 39%;
}

/* ===================== SECTION 6 — Closeups ===================== */

.closeups {
  margin-top: 6vw;
  display: flex;
  flex-direction: column;
}

.img-closeup { margin-top: 6vw; }
.closeups img:first-child { margin-top: 0; }

.img-closeup-1 { width: 33.2%; margin-left: 10.4%; }
.img-closeup-2 { width: 60%;   margin-left: 34.9%; }
.img-closeup-3 { width: 82.6%; margin-left: 10.2%; }
.img-closeup-4 { width: 47.9%; margin-left: 44.8%; }

/* ===================== SECTION 7 — Workshop block ===================== */

.workshop-block {
  margin-top: 6vw;
}

.img-building {
  width: 28%;
}

.workshop-row {
  display: flex;
  align-items: flex-end;
  gap: 4%;
  margin-top: 4vw;
}

.img-workshop {
  width: 55%;
}

.workshop-caption {
  width: 30%;
  margin-bottom: 0;
}

/* ===================== SECTION 8 — Behind the scenes ===================== */

.behind-scenes {
  margin-top: 6vw;
  margin-bottom: 4vw;
}

.behind-scenes img {
  width: 100%;
}

/* ===================== Hover (basic, per brief) ===================== */

.page img {
  transition: opacity 0.2s ease;
}

.page img:hover {
  opacity: 0.88;
}

/* ===================== Responsive ===================== */

@media (max-width: 900px) {
  .hero-text {
    width: 90%;
    padding-top: 2em;
    padding-bottom: 2em;
  }

  .gallery-1 {
    grid-template-columns: 1fr;
    gap: 1em
  }

  .gallery-1-left {
    gap: 1em;
  }

    .gallery-1-right {
    gap: 1em;
  }


  .img-banner {
    width: 100%;
    gap: 1em;
  }

  .quote-1, .quote-2 {
    width: 100%;
    margin-left: 0;
  }

  .audio-block {
    grid-template-columns: 1fr;
  }

  .img-wire {
    width: 100%;
    gap: 1em;
  }

  .audio-text {
    grid-column: 1/4;
    grid-row: 2;
    width: 70%;
    padding-top: 2em;
  }

  .img-rollercoaster {
    grid-column: 1;
    grid-row: 3;
    width: 70%;
    margin-top: 0;
  }

  .metaphor-text,
  .img-tent {
    width: 70%;
    margin-left: 0;
  }

  .img-closeup-1,
  .img-closeup-2,
  .img-closeup-3,
  .img-closeup-4 {
    width: 100%;
    margin-left: 0;
  }

  .workshop-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .img-workshop,
  .workshop-caption,
  .img-building {
    width: 100%;
  }

  .workshop-caption {
  width: 50%;
  margin-bottom: 0;
  padding-top: 1em;
}
}

@media (max-width: 500px) {
  .hero-image-wrap {
    height: 60vw;
  }

  .hero-title {
    position: static;
    transform: rotate(-4deg);
    transform-origin: left center;
    margin-bottom: 4vw;
  }

  .quote-1, .quote-2 {
    transform: rotate(-3deg);
  }
}