/* =============================================
   ARCHITECTURE — Figma "3rd - 2" (175:3851), 1920×1080
   Cream canvas: two Neue Haas paragraphs, a Loren Blake tagline and two photos.
   Rectangle 6 (small photo) is authored at its resting Variant8 position (y 704);
   js/sections/architecture.js scrubs it up from y 964 while the section scrolls in.
   Every measurement is Figma px × --dpx so the composition scales 992px → 4K.
   ============================================= */

.sec-architecture .sec-canvas {
  height: calc(1080 * var(--dpx));
}

/* ---- Copy ---- */

.sec-architecture .arch-copy {
  position: absolute;
  color: var(--dark);
  overflow-wrap: break-word;
}

/* 175:3852 — 913 wide @ 114,50 · Neue Haas 45 Light 23/34, tracking 1.15 */
.sec-architecture .arch-copy--lead {
  left: calc(114 * var(--dpx));
  top: calc(50 * var(--dpx));
  width: calc(913 * var(--dpx));
  font-size: calc(23 * var(--dpx));
  line-height: calc(34 * var(--dpx));
  letter-spacing: calc(1.15 * var(--dpx));
}

/* 175:3853 — 711 wide @ 1099,277 · Neue Haas 45 Light 18/28, tracking 0.9 */
.sec-architecture .arch-copy--detail {
  left: calc(1099 * var(--dpx));
  top: calc(277 * var(--dpx));
  width: calc(711 * var(--dpx));
  font-size: max(calc(18 * var(--dpx)), 13px);
  line-height: 1.556;
  letter-spacing: calc(0.9 * var(--dpx));
}

/* 175:3854 — 341 wide @ 1099,848 · Loren Blake Hybrid 30/41, gold "Light." via .text-gold */
.sec-architecture .arch-tagline {
  position: absolute;
  left: calc(1099 * var(--dpx));
  top: calc(848 * var(--dpx));
  width: calc(341 * var(--dpx));
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(30 * var(--dpx));
  line-height: calc(41 * var(--dpx));
  letter-spacing: 0;
  color: var(--dark);
  text-transform: none;
}

/* ---- Photos ---- */

.sec-architecture .arch-photo {
  position: absolute;
  margin: 0;
  overflow: hidden;
  background: var(--cream-dark);
}

/* 175:3855 — Rectangle 5, 871×669 @ 114,343 (photo: centred cover) */
.sec-architecture .arch-photo--main {
  left: calc(114 * var(--dpx));
  top: calc(343 * var(--dpx));
  width: calc(871 * var(--dpx));
  height: calc(669 * var(--dpx));
}


/* 175:3856 — Rectangle 6, 245×308 @ 1561,704 (resting position; photo: centred cover) */
.sec-architecture .arch-photo--small {
  left: calc(1561 * var(--dpx));
  top: calc(704 * var(--dpx));
  width: calc(245 * var(--dpx));
  height: calc(308 * var(--dpx));
  will-change: transform;
}


/* =============================================
   STACKED LAYOUT — below 992px
   Order: lead paragraph → big photo → detail paragraph → tagline beside the small photo.
   No parallax here (JS only runs the fade-up reveals).
   ============================================= */

@media (max-width: 991px) {
  .sec-architecture .sec-canvas {
    height: auto;
    padding: 64px 20px;
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  .sec-architecture .arch-copy,
  .sec-architecture .arch-photo,
  .sec-architecture .arch-tagline {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
  }

  .sec-architecture .arch-copy--lead {
    font-size: 1.0625rem;
    line-height: 1.55;
    letter-spacing: 0.05em;
  }

  .sec-architecture .arch-copy--detail {
    font-size: 1rem;
    line-height: 1.55;
    letter-spacing: 0.05em;
  }

  .sec-architecture .arch-photo--main {
    aspect-ratio: 871 / 669;
  }

  /* Tagline on the left, small photo pinned to the right, bottoms aligned as in the desktop composition */
  .sec-architecture .arch-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
  }

  .sec-architecture .arch-tagline {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 1.5rem;
    line-height: 1.35;
  }

  .sec-architecture .arch-photo--small {
    flex: 0 0 45%;
    width: 45%;
    max-width: 45%;
    margin-left: auto;
    aspect-ratio: 245 / 308;
    will-change: auto;
  }
}

@media (max-width: 767px) {
  .sec-architecture .sec-canvas {
    padding: 48px 20px;
    gap: 28px;
  }

  .sec-architecture .arch-tagline {
    font-size: 1.25rem;
  }
  .sec-architecture .arch-photo--small {
    flex: 0 0 38%;
    width: 38%;
    max-width: 38%;
  }
}