/* ══════════════════════════════════════════════════════════════════════════ css/storm-tier1.css — the four Tier-1 storm pages /technology · /media · /apps · /newsroom Linked ONLY from those four. Nothing here is global: every rule is scoped either to a page-group class or to a component this group mounts. It exists because those pages may not edit a shared stylesheet. ══════════════════════════════════════════════════════════════════════════ */ /* ── THE DISENGAGED-STORM COLLAPSE ──────────────────────────────────────── MEASURED, not assumed. css/chrome.css sets `body { display: flex; flex-direction: column }`, which puts every ancestor of a scene body in a SHRINK-TO-FIT context. While `html.sc-live` is on, `.sc-live .sc__body` in css/scene.css pins each plate `position: absolute` at `width: min(var(--sc-w), 88vw)` and the question never arises. Below roughly 880px — and with JavaScript off at any width — the storm disengages, `sc-live` comes off , that rule stops applying, and the plates fall back into ordinary flow as flex items whose width resolves against their own content. At a 390px viewport on /technology that gave: 342 who 342 photo-office 342 offer-web 163 offers-hd 268 offer-store 215 offer-custom 145 unit-api 154 ex-count 280 proof Two plates with the SAME classes (`offer-web` and `offer-store`) landing on 342 and 268 is what proves this is content-driven shrink-to-fit rather than a deliberate narrow caption style. A 145px-wide plate of running text on a 390px phone is not a design decision. The laptop made the worst case of it much worse. Its non-live stack has an intrinsic max-content contribution of ZERO — every capture is `width: 100%` inside a grid track that carries no intrinsic size — so its plate resolved to 38px and the six screenshots rendered 36px wide. The outgoing carousel measured 342 there, so this is a regression the swap introduced and this rule is its fix. A FLOOR, NOT A FIXED WIDTH — and that distinction cost a round. The first version was `width: 100%`, which does fix every collapse, and it also blew /newsroom's deliberately narrow portrait plate (`--sc-w: min(12rem, 14vw)`, the mic-flag frame) from a 330px portrait sitting beside two full-width landscapes to 810x1013 at an 860px viewport. That is a redesign of a photo section Ethan has said he likes, which is exactly what this pass is told not to do. A floor rescues the collapsed plates and leaves the rhythm alone: plate before width:100% min-width floor /newsroom mic flag @860 332 810 352 /technology ex-car @390 38 342 342 /technology unit-api @390 145 342 342 Note §7's warning that `min-width: 0` cannot make a strip SHRINK in a column flex container. That is about shrinking; a floor that widens works fine, and is measured above rather than assumed. The `max-width` already in css/scene.css still caps everything, so no plate gets wider than it could. */ html:not(.sc-live) .sc__body { min-width: min(100%, 22rem); box-sizing: border-box; } /* ── THE LAPTOP'S NO-JS STACK ───────────────────────────────────────────── Belt and braces for the same trap one level down: with the plate sized, the stack still has to fill it rather than shrink to its own zero max-content. */ html:not(.sc-live) .lt:not(.is-live), html:not(.sc-live) .lt:not(.is-live) .lt__machine, html:not(.sc-live) .lt:not(.is-live) .lt__lid, html:not(.sc-live) .lt:not(.is-live) .lt__screen { width: 100%; box-sizing: border-box; } /* ── THE LAPTOP MUST STAY SHORT, AND THAT IS A HARD ENGINE LIMIT ────────── MEASURED. A scene body is rotated in 3D inside the `perspective` that js/camera.js writes onto `.sc__space`. Past a certain BOX HEIGHT the near edge of that rotated box crosses the projection plane, its projected geometry goes degenerate, and Chrome stops hit-testing the element — while still painting it perfectly. The plate looks completely normal and none of its controls can be clicked. js/bodies.js already flags the same class of problem ("+z becomes parallel to the view direction and degenerate"). Swept at 1440 across the act's settled scroll range, counting how many of 13 settled samples let a real click reach a tab: plate 537px -> 10/13 plate 599px -> 1/13 plate 557px -> 6/13 plate 640px -> 0/13 plate 578px -> 4/13 plate 743px -> 0/13 The outgoing carousel measured 13/101 clickable samples across the whole page scroll; the first laptop build measured 1/101, because it stood 624px tall. Depth is NOT the cause — `data-dist` 30 -> 10 -> 0 changed nothing (1/13 in all three). Height is the whole of it. So this block is not styling, it is a fit constraint: keep the plate under roughly 540px. Two lines came out of the markup for the same reason — the caption, and a `.lt__name` on every card that repeated its own tab label word for word — and the rest is here. IT IS HEIGHT *AND* ROTATION, not height alone — measured across all four pages. /apps' booking panel is 686px tall and clicks perfectly, because it carries `data-anchor` and `data-spin="0"` and therefore rests DEAD FLAT: a flat box has no Z spread, so nothing crosses the plane. Every other body on /apps, /media and /newsroom is 100% clickable in its settled window; the tallest rotated ones are /media's `retainer` (483px) and `ex-car` (473px) and /apps' `shots-carousel` (488px), all comfortably under the limit. So: a ROTATED body on these pages wants to stay under roughly 540px. If a later pass adds rows to this component, re-measure; do not assume. */ .sc-live .lt__tabs { margin-top: .6rem; gap: .3rem; } .sc-live .lt__tab { padding-block: .3rem; } .sc-live .lt__meta { margin-top: .55rem; } .sc-live .lt__kind { margin-bottom: .2rem; } .sc-live .lt__desc { margin-top: .3rem; } /* The laptop's no-JS stack has NO intrinsic width of its own — every capture is `width: 100%` inside a grid track that carries no max-content — so the floor above is the only thing sizing it, and it landed on 352px inside an 864px column at 1440 while every neighbouring plate sat at the full 864. Give this one plate the same ceiling the others reach on their own content. Scoped to the plate, not the component, because it is a fact about this page's rig. */ html:not(.sc-live) .sc__body[data-name="ex-car"] { min-width: min(100%, 54rem); }