/* ═══════════════════════════════════════════════════════════════════════════ #seg-hero — fluid-ink statement panel above // selected.work Everything is scoped to #seg-hero. No global resets, no html font-size override: the standalone version set html{font-size:calc(100vw/172.8)} for its 1728 design grid, which would have resized the entire site. That unit lives on --u here instead. ═══════════════════════════════════════════════════════════════════════════ */ #seg-hero{ /* --u is the LAYOUT grid (1u = 10px at the 1728 design width). It is clamped: unclamped it drove type down to 8.5px at 861px wide, because every size in here was a multiple of it. Type now has its own fluid scale below, so geometry and legibility no longer fight. */ --u:clamp(6.6px, 100vw / 172.8, 10px); --pad:calc(2.4 * var(--u)); /* type: continuous across the breakpoint, with a readable floor and a cap */ --fs-body:clamp(13px, 0.55vw + 9.5px, 17px); --fs-title:clamp(28px, 3.4vw, 54px); --fs-small:clamp(12px, 0.4vw + 9.5px, 15px); --fg:#00031f; --muted:rgba(0,3,31,.42); /* tall outer: the panel below pins while you scroll through it, the same shape as #cs-sticky on the carousel underneath */ position:relative; height:260vh; color:var(--fg); font-family:'Space Grotesk',-apple-system,BlinkMacSystemFont,sans-serif; font-weight:500; font-size:var(--fs-body); line-height:1.2; letter-spacing:-.006em; /* main.css has `section{padding:clamp(80px,12vw,140px) var(--pad)}` — a bare element selector, which class scoping cannot stop. Undo it here. */ box-sizing:border-box; padding:0; } #seg-hero *{box-sizing:border-box;margin:0;padding:0} #seg-hero .seg-sticky{ position:sticky;top:0; /* min-height must never exceed the viewport, or a landscape phone gets a panel taller than the screen and the sticky stops behaving */ height:100vh;min-height:min(560px, 100vh); overflow:hidden; background:#fff; isolation:isolate; } @supports (height:100dvh){ #seg-hero .seg-sticky{ height:100dvh;min-height:min(560px, 100dvh) } } #seg-hero .seg-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block} #seg-hero .seg-fallback{position:absolute;inset:0;z-index:0;display:none;place-items:center; color:var(--muted);font-size:var(--fs-small);text-align:center;padding:4rem} /* real DOM, above the canvas */ #seg-hero .seg-page{position:absolute;inset:0;z-index:5;pointer-events:none} #seg-hero .seg-page a,#seg-hero .seg-page button{pointer-events:auto} /* main.css also styles the bare `nav` element: fixed, left:0/right:0, flex with justify-content:space-between, its own height and padding. Both the top nav and the Index are