/* HOME — sections 1 and 2, lifted VERBATIM from their locked comps (index.css), with section 1's
   desktop block amended per the brief's §5 and only that. Section 3 and section 4 have their own
   stylesheets. Nothing here is run through any transform — the hand-measured values are byte-exact. */

/* ============ SECTION 1 — locked, verbatim. Desktop amended per brief §5 only. ============ */
.hero{position:relative;height:100svh;overflow:hidden;background:#E7E9EC}
.hero__photo{position:absolute;top:0;left:-22px;width:457px;min-width:100%;height:100%;object-fit:cover;object-position:27% 20%}
.hero__mark{position:absolute;top:24px;left:24px;width:104px;height:auto;display:block}
.hero__head{position:absolute;top:202px;left:24px;right:24px;margin:0;font-family:'Barlow Semi Condensed',Impact,sans-serif;font-weight:700;font-size:35px;line-height:1.02;letter-spacing:-.01em;text-transform:uppercase;color:#1A1A1A}

/* ============ SECTION 2 — locked, verbatim. ============ */
.s2{background:#F9F7F4;padding:24px;display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.s2__photo{width:100%;aspect-ratio:327/510;border-radius:12px;object-fit:cover;object-position:50% 76%;display:block;background:#DDE0DA}
.s2__title{margin:0 0 16px;font-family:'Barlow Semi Condensed',Impact,sans-serif;font-weight:700;font-size:35px;line-height:1.02;letter-spacing:-.01em;text-transform:uppercase;color:#1A1A1A}
.s2__body{margin:0;font-size:17px;line-height:1.5;color:#1A1A1A;text-wrap:pretty;max-width:34em}

@media(min-width:1088px){
/* ---------- section 1 desktop — RATIFIED, brief §5 ----------
   Direction A's fixed terms are untouched: landscape asset full bleed, #1A1A1A type, no scrim, mark
   beside the headline, 56px headline, runners in the lower third.
   Two values change from what was implemented in principle:
   · the block sits 64px below the bar rather than 32px. 64px is the desktop page margin and section
     4's own desktop top padding, so the page's opening block and its closing block stand off their
     edges by the same measure. 32px derived from nothing and read tight under opaque chrome.
   · the mark is 144px rather than 132px. On phone the opening mark is 104px and the closing mark is
     288px, a ratio of 1:2.77. At desktop the closing mark is 400px, so 144px holds the same ratio
     (1:2.78) and the page opens and closes on one relationship rather than two unrelated sizes.
   The mark-to-headline gap stays 44px, so the headline moves from x240 to x252.
   Re-sampled on hero-riverside-landscape.png: minimum luminance behind the three lines 215 / 208 /
   197, which is 12.04 / 11.34 / 10.05:1 against #1A1A1A. Floor is 7:1. See SPEC §9. */
.hero{height:calc(100svh - 64px);margin-top:64px}
/* One <img> in a <picture>, so only the frame in use is fetched — see REPORT §2. The desktop crop is
   full bleed, which means overriding the portrait rule's pinned 457px box rather than hiding it. */
.hero__photo{left:0;width:100%;min-width:0;object-position:50% 50%}
.hero__mark{top:64px;left:64px;width:144px}
.hero__head{top:64px;left:252px;right:auto;font-size:56px}

/* ---------- section 2 desktop — locked, verbatim ---------- */
.s2{flex-direction:row;align-items:center;justify-content:center;gap:80px;padding:64px}
.s2__photo{width:400px;aspect-ratio:400/624}
.s2__copy{width:480px;flex:none}
.s2__title{font-size:56px;margin-bottom:20px}
.s2__body{font-size:18px;line-height:1.55}
}