/* ── projects 02 Hero — projects/sections/02-hero/brief.md ──
   Figma (y relative to the hero top = page y 103): 1:1152 "projects" 80 #fc898a @ (96,232) · 1:1139 coral rule 60×4 @ 335 ·
   1:1140 intro 26/37.5 #4b4949 w462 @ 386 · 1:1141 round building 1006×694 @ (772,193) · 1:1142 Valencia 578×299 @ (1287,574) ·
   birds 64×46 @ (513,701) + 36×26 @ (592,675) · 1:1201 strip #d9d9d9 29px at the bottom (page y 976)
   Shared helpers for the projects page (.pj-stage, .pj-box, .pj-rule) live here. */

:root { --pj-coral: #fc898a; --pj-text: #4b4949; }

/* 1920-wide decorative/photo stage (design px × --u), centred over its section */
.pj-stage {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: calc(1920 * var(--u));
    margin: 0;
    padding: 0;
    list-style: none;
    translate: -50% 0;
}
.pj-stage img { position: absolute; max-width: none; height: auto; }
/* Text box: x 96 → 1824 */
.pj-box { position: relative; z-index: 2; width: min(1728px, calc(1728 * var(--u))); margin-inline: auto; }
.pj-rule { display: block; width: calc(61 * var(--u)); height: max(3px, calc(7 * var(--u))); background: var(--pj-coral); }
.page-projects main > section { overflow-x: clip; }

.pj-hero {
    min-height: calc(902 * var(--u));
    padding: calc(232 * var(--u)) 0 calc(120 * var(--u));
    background: var(--skin-canvas);
    border-bottom: max(12px, calc(29 * var(--u))) solid #d9d9d9;
}
.pj-hero__title { font-size: var(--fs-display); font-weight: 400; line-height: 1; color: var(--pj-coral); text-transform: lowercase; }
.pj-hero .pj-rule { width: calc(60 * var(--u)); height: max(2px, calc(4 * var(--u))); margin-top: calc(23 * var(--u)); }
.pj-hero__intro {
    max-width: calc(462 * var(--u));
    margin-top: calc(47 * var(--u));
    font-size: var(--fs-body);
    line-height: calc(37.5 / 26);
    color: var(--pj-text);
}
.pj-hero__building  { left: calc(772 * var(--u));  top: calc(193 * var(--u)); width: calc(1006 * var(--u)); }
.pj-hero__valencia  { left: calc(1287 * var(--u)); top: calc(574 * var(--u)); width: calc(578 * var(--u)); }
.pj-hero__bird      { left: calc(513 * var(--u));  top: calc(701 * var(--u)); width: calc(64 * var(--u)); }
.pj-hero__bird-small{ left: calc(592 * var(--u));  top: calc(675 * var(--u)); width: calc(36 * var(--u)); }

@media (max-width: 991.98px) {
    .pj-box { width: calc(100% - 2 * var(--skin-gutter)); }
    .pj-hero { display: flex; flex-direction: column-reverse; min-height: 0; padding: 64px 0 0; }
    .pj-hero__title { font-size: 56px; }
    .pj-hero .pj-rule { width: 48px; margin-top: 18px; }
    .pj-hero__intro { max-width: 560px; margin-top: 28px; font-size: 18px; line-height: 1.5; }
    .pj-hero .pj-stage { position: relative; left: auto; translate: none; width: 100%; height: 66vw; margin-top: 24px; }
    .pj-hero__building { left: 4%; top: 0; width: 70%; }
    .pj-hero__valencia { left: 52%; top: 52%; width: 46%; }
    .pj-hero__bird { left: 8%; top: 58%; width: 44px; }
    .pj-hero__bird-small { left: 15%; top: 52%; width: 26px; }
}
@media (max-width: 575.98px) {
    .pj-hero__title { font-size: 44px; }
}