/* ============================================================================ TALANTON — responsive.css RC1 SCOPE: DEFENSIVE SAFEGUARDS ONLY — NOT A RESPONSIVE DESIGN ---------------------------------------------------------------------------- READ THIS BEFORE ADDING ANYTHING TO THIS FILE The approved v7 design is a fixed desktop layout and contains no media queries of its own. RC1's mandate is a visually identical reproduction, so this file does NOT adapt the design for tablet or mobile. It only prevents outright rendering failures — content escaping the viewport, text clipping, and page-level horizontal scroll. Every rule in this file obeys three constraints: 1. It is inert at the approved desktop width. The first breakpoint fires at 1296px, which is the design's own natural width (1200px measure + two 48px gutters). At or above that, this file changes nothing. 2. It never repositions, restacks, or re-proportions an approved layout. Fixed-width diagram blocks are allowed to scroll inside their own container rather than being reflowed into a different arrangement. 3. It is documented. Each block states what failure it prevents. A dedicated tablet and mobile redesign is Phase 2 and will be reviewed separately. Do not pre-empt it here. ---------------------------------------------------------------------------- CONTENTS 01 Universal guards (all widths) 02 <= 1296px gutter reduction 03 <= 1180px fixed-width diagram containment 04 <= 900px headline clipping 05 <= 640px narrow-viewport last resort ========================================================================== */ /* ============================================================================ 01 UNIVERSAL GUARDS (active at every width, including desktop) These are inert on the approved design — nothing currently violates them. They exist so that content added later cannot silently break the page. ========================================================================== */ /* PREVENTS: a wide image, video, or embed pushing the page wider than the viewport. The approved design ships no raster assets, so this is purely a guard for future content. */ img, svg, video, canvas, iframe, embed, object { max-width: 100%; } img, video { height: auto; } /* PREVENTS: an unbroken string — a long URL, hash, or ID with no spaces — forcing its container wider than the viewport. Applied to the text holders that render user- or data-supplied strings. */ .record__val, .meta-row__val, .ask__body, .ask__rec, .ask__gov, .detail-panel__body, .card__body { overflow-wrap: break-word; } /* PREVENTS: grid and flex children refusing to shrink below their intrinsic content width, which is the most common cause of overflow in this layout. The default `min-width: auto` on a grid/flex item blocks shrinking; these are the items whose siblings are fixed-width. */ .detail-panel, .ask__panel, .maturity__detail-col, .meta-row__val, .impact__panel, .trust__record { min-width: 0; } /* ============================================================================ 02 <= 1296px — GUTTER REDUCTION 1296px is the design's natural width: a 1200px measure plus two 48px gutters. Below it, the gutters are the first thing to give, so the 1200px measure survives ~96px longer before anything has to compress. PREVENTS: premature compression of the main content column. ========================================================================== */ @media (max-width: 1296px) { :root { --gutter: 32px; } /* PREVENTS: every gutter-padded wrapper overflowing the viewport by exactly its own two gutters — the single largest source of horizontal scroll on this page. `.container` declares `width: 100%`, and the design deliberately uses the browser-default content-box (see the note at the top of style.css). A percentage width resolves against the containing block, so a container that also carries `padding: 0 var(--gutter)` — every `.section.container`, and the closing `.cta container` — occupies 100% PLUS both gutters. At the approved widths `max-width: 1200px` caps the width long before that matters, so the overflow is invisible; below ~1264px the cap stops applying and the page starts scrolling sideways. Restoring `width: auto` makes the box subtract its own padding and border from the available space instead of adding to it — the correct behaviour for a block-level element, and identical to `width: 100%` for the unpadded `.container` wrappers. `max-width` and the auto side margins are untouched, so a container still measures 1200px and still centres wherever there is room for it. Above this breakpoint the rule does not apply at all. */ .container { width: auto; } } /* ============================================================================ 03 <= 1180px — FIXED-WIDTH DIAGRAM CONTAINMENT Four blocks in the approved design have hard pixel widths that cannot compress: the Loop dial (520px + a 64px gap + its detail panel), the Fragments-to-Memory rail (220 + 1fr + 220 + 1fr + 240), the era timeline, and the decision-record table. Rather than restack them — which would be a redesign — each is allowed to scroll horizontally inside its own container. The diagram keeps its exact approved proportions; only the page stops overflowing. PREVENTS: page-level horizontal scroll and clipped diagrams. NOTE: `overflow-x` is deliberately NOT applied to `.stack`. That container holds `.detail-panel--sticky`, and an overflow value on an ancestor silently disables `position: sticky` on its descendants. `.stack` uses fractional columns and compresses safely on its own. ========================================================================== */ @media (max-width: 1180px) { .loop, .flow, .era, .record__grid, .trust__head, .maturity { overflow-x: auto; /* Reserves room for the scrollbar so it cannot overlap content. */ padding-bottom: 4px; /* An overflow value alone does not contain absolutely positioned descendants — only a positioned ancestor does. Without this, the visually-hidden `.sr-only` labels inside the maturity bars keep the page as their containing block, so they are laid out at the bars' unscrolled coordinates and drag the document's scrollable width out with them. The chart appeared to scroll correctly while the page still scrolled sideways by 158px at 360px wide. `position: relative` with no offsets moves nothing and, at `z-index: auto`, creates no stacking context. */ position: relative; } /* Each block keeps its approved intrinsic width while it scrolls. The floor is always placed on the block's TRACKS or ITEMS, never on the scrolling block itself. `min-width` on a scroll container raises the floor of the container's own border box, which is precisely the overflow being prevented — the block would simply push the page wide instead of scrolling. Sizing the contents lets them overflow a container that is still free to shrink to the viewport. The frozen values below are the widths these tracks resolve to at the approved 1200px measure, so each diagram scrolls at exactly its approved proportions rather than at an arbitrary minimum. */ /* Dial 520px + 64px gap + detail panel. The panel's floor is a track minimum, so the grid overflows rather than the container growing. */ .loop { grid-template-columns: 520px minmax(360px, 1fr); } /* 220 + 1fr + 220 + 1fr + 240 across 1200px resolves each 1fr to 260px. */ .flow { grid-template-columns: 220px 260px 220px 260px 240px; } /* Five `flex: 1` eras across 1200px resolve to 240px each. */ .era__item { flex: 0 0 240px; } /* The maturity chart is seven labelled columns whose labels ("Institutional Intelligence") set a hard minimum width. As flex items they refuse to shrink past it, so the chart pushes its section — and the page — wider than the viewport. It scrolls within itself instead, at its approved size. */ .maturity { min-width: 0; } /* The nav is seven links plus two actions on one row and stops fitting at roughly this width. `overflow-x` is safe here because `.nav` is itself the sticky element, not an ancestor of one. */ .nav { overflow-x: auto; gap: 24px; } /* The network graph is a fixed 360x230 canvas with absolutely positioned nodes; it cannot reflow, so it is centred and allowed to clip its own container rather than the page. */ .impact__stage--net { overflow: hidden; } } /* ============================================================================ 04 <= 900px — HEADLINE CLIPPING The 80px hero headline and 44px section headlines are set in fixed px and will overflow a narrow viewport before any other text does. clamp() is used here and nowhere else. The upper bound of each clamp is the approved size, so these rules are a no-op above this breakpoint and the approved desktop typography is never altered. PREVENTS: headline text clipping and overflowing the viewport. ========================================================================== */ @media (max-width: 900px) { .hero__title { font-size: clamp(40px, 8.5vw, 80px); } .section__title, .cta__title { font-size: clamp(30px, 5vw, 44px); } .philosophy__statement { font-size: clamp(22px, 3.6vw, 32px); } } /* ============================================================================ 05 <= 640px — NARROW-VIEWPORT LAST RESORT Below 640px the approved desktop layout cannot be preserved intact. These rules are damage limitation only: they keep the page readable and scrollable rather than attempting a phone layout. Building a real mobile experience is Phase 2. PREVENTS: the navigation bar and multi-column grids forcing page-level horizontal scroll on phones. ========================================================================== */ @media (max-width: 640px) { :root { --gutter: 20px; --section-y: 88px; } /* The nav already scrolls from 1180px down; tighten its spacing here so the scroll distance stays short. */ .nav__links { gap: 20px; } /* Fixed-column grids that would otherwise overflow. Single column is a containment measure, not a designed mobile layout. `minmax(0, 1fr)` rather than `1fr` so the track may shrink below its content's intrinsic width, which is what actually stops the overflow. `.stack` is here rather than in the scrolling group above because it holds `.detail-panel--sticky`: an overflow value on it would silently kill `position: sticky` inside it (see the note in 03). Stacking its two columns costs nothing — the panel simply follows the list instead of sitting beside it — and it keeps sticky working. */ .reality__grid, .trust__pillars, .ask__layout, .trace, .impact, .maturity__detail, .stack, .footer__grid { grid-template-columns: minmax(0, 1fr); } }