/* 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. Desktop amended per brief §5. Tablet band unlocked (Ruling 3). ====
   The mark's left and the headline's left/right read --margin, so in the 768–1087 band they move to 40
   with the rest of the page rather than sitting alone at the phone's 24 — the whole edge moves together
   and the mark and headline stay aligned to each other. The band was never specified for this section;
   the Product Owner unlocked it for the band only (SPEC-section-1-band.md). Phone (24) and the ratified
   desktop (>=1088: mark left 64, headline left 252) are untouched. */
.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:var(--margin);width:104px;height:auto;display:block}
.hero__head{position:absolute;top:202px;left:var(--margin);right:var(--margin);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}
/* Above phone portrait: cover the full width (Build 3 gap fix). The base rule (left:-22px; width:457px;
   min-width:100%) is the phone crop; above ~430px the box is viewport-wide but shifted left 22px, so
   the right edge lands at viewport-22 and the #E7E9EC ground shows through a 22px strip. Pre-existing,
   live on production since before this build, unseen because phones in portrait (<=430, the 457 box
   covers) and desktop (>=1088, left:0/width:100% below) do not show it. Floor is 431 (was 768,
   revised): the gap is width-driven, so it hits portrait tablets AND landscape phones alike, from the
   phone-portrait ceiling up. Keeps object-position 27% 20% here (the portrait crop); landscape-shaped
   viewports re-crop it in the orientation rule below. See SPEC-section-1-band.md. */
@media(min-width:431px) and (max-width:1087.98px){
.hero__photo{left:0;width:100%;min-width:0}
}
/* Near-square-and-wider viewports below desktop (landscape phones/tablets, and portrait-but-near-square
   foldables/windows) get the LANDSCAPE source (see the <picture>: media includes min-aspect-ratio:4/5)
   and its centred crop. Without this, the portrait source in a short/wide box pushes the runners to the
   bottom edge (sky-heavy, then cut) — a pre-existing Build 1 issue that assumed "below 1088 = portrait
   orientation." Threshold 4/5 (0.8), keyed to aspect not width because rotation/shape is the variable:
   above the tallest iPad portrait (~0.75, which stays on the portrait crop) and below the near-square
   zone (>=0.8) where the portrait crop reads wrong. A tall desktop window (>=1088) is caught by the
   >=1088 rule below. Source and crop share the 4/5 threshold, so they agree. See
   SPEC-hero-orientation.md. */
@media(min-aspect-ratio:4/5) and (max-width:1087.98px){
.hero__photo{left:0;width:100%;min-width:0;object-position:50% 50%}
}

/* ============ TRANSITION LEDE — between sections 1 and 2 (Build 3, Ruling 5). ============
   The club-voice hand-off from the hero's claims to section 2's first-person introduction. No id, so
   it is not a nav target or a scroll-spy section; cream ground with no hairline, continuous with the
   hero above (which has none) and section 2 below (which it hands off to). Left on the page margin.
   BOLD, and NOT held to --measure — it is a statement, not reading copy, so it stretches to fill the
   width at every size (section 2/3 body copy keeps the 640 measure). Top padding frames it below the
   hero; no bottom padding, so it hands into section 2's own top space (24 phone / 64 desktop) rather
   than opening a second gap. This exact string is also the home page's <meta name="description">
   (build.mjs) — one copy of record in two places. */
.lede{background:#F9F7F4;padding:40px var(--margin) 0}
.lede p{max-width:none;margin:0;font-size:var(--fs-lede);font-weight:600;line-height:1.5;color:#1A1A1A;text-wrap:pretty}

/* ============ SECTION 2 — bound to --measure, left on the page margin (Build 3, Ruling 1, amended). ==
   The photograph and the copy are both capped to --measure (640px) and left-aligned, so the copy ends
   exactly where the image ends — the alignment Ruling 1 asked for — AND section 2 lines up with section
   3, the lede and the footer, all left at the same 24/64 margin. Centring was tried and REMOVED at the
   PO's preview review: both being 640 delivers copy-ends-where-photo-ends whether centred or left, so
   centring bought nothing and cost alignment with the rest of the page. In the band the photo was
   full-bleed and the copy stopped ~200px short of it; now both are 640, left. Phone unchanged (both
   fill a <640 viewport); desktop unchanged (the >=1088 row pins photo 400 / copy 480, both < 640). */
.s2{background:#F9F7F4;padding:24px var(--margin);display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.s2__photo{width:100%;max-width:var(--measure);aspect-ratio:327/510;border-radius:12px;object-fit:cover;object-position:50% 76%;display:block;background:#DDE0DA}
.s2__copy{width:100%;max-width:var(--measure)}
.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:var(--measure)}

/* Tablet band only: a square, face-forward crop (Build 3, crop ruling). The portrait aspect
   (327/510) at the band's 640px width is ~998px tall — taller than an iPad-portrait viewport, so it
   could not be seen whole (the deferred tablet crop, now un-deferred). A 1/1 crop from the SAME source
   (900x1599) is 640x640, head-to-thighs, and fits every iPad portrait with §3 still in view.
   object-position 25% frames the face (was 76%, which showed the legs). This is a DELIBERATE divergence:
   phone keeps the full-figure portrait (327/510, which fits a phone), desktop keeps the ratified
   400/624 row image; three widths show three crops of one photograph. See SPEC-section-2-crop.md. */
@media(min-width:768px) and (max-width:1087.98px){
.s2__photo{aspect-ratio:1/1;object-position:50% 25%}
}

@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:var(--margin);width:144px}
.hero__head{top:64px;left:252px;right:auto;font-size:56px}

/* ---------- transition lede desktop ---------- */
/* Uncapped from the base, so on a wide screen it fills the content width (2 lines on a normal desktop,
   1 on ultra-wide) rather than stranding in a 640 column. */
.lede{padding:64px var(--margin) 0}
.lede p{font-size:var(--fs-lede-d);line-height:1.55}

/* ---------- 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}
}