/* Conservative responsive layer — fine-tune per-section live on staging. */ .sec img,.post-body img,.final img,article img{max-width:100%;height:auto} @media (max-width:768px){ .wrap{padding-left:22px;padding-right:22px} /* Align the fixed nav bar's gutter to .wrap so the logo/hamburger line up with section content on phones. nav#nav (1,1,0) beats per-page #nav base. */ nav#nav,nav#nav.scrolled{padding-left:22px;padding-right:22px} } @media (max-width:600px){ .wrap{padding-left:16px;padding-right:16px} nav#nav,nav#nav.scrolled{padding-left:16px;padding-right:16px} [class*="grid"]:not(.mega-grid){grid-template-columns:1fr !important} .cta-row{flex-wrap:wrap} .cta-row > *{flex:1 1 100%;text-align:center} body{overflow-x:hidden} } /* ---- Reduced-motion guard (global; theme shipped without one) ---- Honour the OS setting without trapping content that relies on entrance animations: forwards keyframes jump to their visible end-state instead of being disabled, and reveal-on-scroll content is forced visible. */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } .reveal{opacity:1 !important;transform:none !important} } /* ---- Hero TYPE: unified with the homepage hero via the shared :root tokens (one source of truth). header.ac-hero out-specifies the per-page .ac-hero base, so every page's hero heading/sub/accent now matches the homepage at every width. Computed H1 (clamp(2.2rem,1.5rem+2.3vw,4rem)): 390->35px, 768->41.7px, 1024->47.6px, 1366->55.4px, 1920->64px. ("chips" = the serves-line.) */ header.ac-hero h1{ font-size:var(--hero-h1); line-height:1.12; } header.ac-hero h1 em{ font-size:var(--hero-em); } header.ac-hero .sub{ font-size:var(--hero-sub); } header.ac-hero .servesline{ font-size:clamp(.82rem, 0.74rem + 0.35vw, .92rem); } /* ---- Hero LAYOUT relaxation (mobile/tablet, <=860) ---- Relax the forced 100vh so the bottom-aligned hero can't overlap the logo or overflow; clear the fixed nav with top padding. (Type is fluid, above.) */ @media (max-width:860px){ .hero-unit{ min-height:0; } header.ac-hero{ min-height:auto; } header.ac-hero .inner{ padding-top:108px; padding-bottom:48px; } header.ac-hero .crumb{ margin-bottom:18px; } header.ac-hero h1{ margin-bottom:16px; } header.ac-hero .sub{ margin-bottom:14px; } header.ac-hero .servesline{ line-height:1.5; } header.ac-hero .cta-row{ margin-top:22px; gap:12px; } } /* ---- Homepage hero stat band (2009 / Triple ISO / In-house): reduce on phone so it is not oversized at narrow widths. Size only; copy unchanged. ---- */ @media (max-width:600px){ .hero-meta{ gap:26px; } .hero-meta .n{ font-size:1.15rem; } .hero-meta .t{ font-size:0.66rem; } /* ---- Phone hero (item C): the hero fills the first 100dvh so the stat band (.stats) drops BELOW the fold, revealed on scroll. Overrides the <=860 relaxation above (0,2,0 beats header.ac-hero 0,1,1). Desktop hero-unit unchanged. dvh, not vh, so the mobile URL bar doesn't clip it. */ .hero-unit > .ac-hero{ min-height:100dvh; } /* Darken the hero image so the white hero text clears AA. The bottom ~half (where the bottom-aligned text sits) reaches >=0.6 overlay alpha, which gives >=4.5:1 for #fff even over a pure-white image region. header.ac-hero .scrim (0,2,1) out-specifies the per-page .ac-hero .scrim (0,2,0). */ header.ac-hero .scrim{ background: linear-gradient(180deg, rgba(17,13,9,0) 0%, rgba(17,13,9,.6) 50%, rgba(17,13,9,.88) 100%); } } /* ---- Tablet / laptop band (861-1600): type step-down + hero full-bleed ---- Slots ABOVE the <=860 relaxation and BELOW big screens (>1600); both untouched (non-overlapping widths, so this band never co-applies with <=860 or <=600). Part A (type): the per-page and service sheets load AFTER this file, so an equal specificity would lose; each selector carries a body/extra-class prefix to sit strictly above its base (the standing lesson). Bases that live in style.css load BEFORE this file and are overridden at equal specificity. Part B (hero): mirror the phone rule. Release the shared 100vh so the hero image (already inset:0 with object-fit cover) fills its own viewport and the stat band reflows below. Only the 18 .hero-unit templates match. Scrim + crop kept as-is. */ @media (min-width:861px) and (max-width:1600px){ /* Part B: base .hero-unit lives in style.css (loads first), so equal specificity wins */ .hero-unit{ min-height:0; } .hero-unit > .ac-hero{ min-height:100svh; flex:0 0 auto; } /* hero fills the first viewport; stats reveal on scroll, matching phone (peek removed 2026-07-06) */ /* Part A0 (2026-07-05): hero display tier steps DOWN in-band (tops 3.5rem=56px exactly at 1600 -> base ramp resumes at 60.8, a <=5px step). :root ties style.css:31 at (0,1,0) and wins by load order; service.css / page-water.css :root blocks are palette-only — no clash. Continuous at the 860 edge (44.2 vs 43.8). Consumers: header.ac-hero h1, .hero h1 (+ em via --hero-em). */ :root{ --hero-h1: clamp(2.75rem, 1.9rem + 1.6vw, 3.5rem); } /* Part A: (a,b,c) specificity of each selector vs its base noted inline */ /* Full in-band type ladder (Step 8, 2026-07-06): every rung keeps its shipped 861px value (860 edge unchanged) and ramps so the 1600 -> 1601 step to EVERY base fork is <=5px. Desktop rank preserved: final/filter 3.6 tops out with the sec-head tier (equal at 1600), then section-head/photoband/member 3.4 > people (split rung, forks 2.6-3.2) > proof-text 3.1 > oli/diff/next 3.0 > calm 2.8 > mirror/levels 2.7 > domain h3 2.7 sub-tier > data tier 2.6 > reach 2.5 > group-head 2.4. section.final h2 uses the same 0,1,2 form as style.css:476 so it beats the 27 per-page .final h2 forks; all others body-prefixed to 0,1,2 to out-specify their 0,1,1 bases. */ section.final h2{ font-size:clamp(2.05rem, 0.59rem + 2.71vw, 3.3rem); } /* desktop 3.6 -> 57.6; 52.8 at 1600, 4.8 step; wins style.css:476 by load order + .final forks by spec */ body .filter h2{ font-size:clamp(2.05rem, 0.59rem + 2.71vw, 3.3rem); } /* desktop 3.6 */ body .section-head h2{ font-size:clamp(2rem, 0.72rem + 2.38vw, 3.1rem); } /* desktop 3.4 -> 54.4; 49.6 at 1600, 4.8 step */ body .photoband h2{ font-size:clamp(2rem, 0.72rem + 2.38vw, 3.1rem); } /* desktop 3.4 */ body .sec-head h2{ font-size:clamp(2.2rem, 1.05rem + 2.25vw, 3.3rem); } /* desktop forks 3.0-3.2; 52.8 at 1600, steps -1.6 / -4.8 */ body .proof-text h2{ font-size:clamp(1.9rem, 0.85rem + 1.95vw, 2.8rem); } /* desktop 3.1 -> 49.6; 44.8 at 1600, 4.8 step */ body .oli h2{ font-size:clamp(1.9rem, 0.91rem + 1.84vw, 2.75rem); } /* desktop 3.0 -> 48; 44 at 1600, 4 step */ body .diff h2{ font-size:clamp(1.9rem, 0.91rem + 1.84vw, 2.75rem); } /* desktop 3.0 */ body .calm h2{ font-size:clamp(1.8rem, 0.75rem + 1.95vw, 2.7rem); } /* desktop 2.8 (page-smart 3.0 fork still <=5); 43.2 at 1600 */ body .domain h3{ font-size:clamp(1.7rem, 0.83rem + 1.62vw, 2.45rem); } /* desktop 2.7 sub-tier -> 43.2; 39.2 at 1600, 4 step */ /* Coverage gap-fill: three same-tier mirrors surfaced by the homepage/FAQ audit (2026-07-02). */ body .faq h2{ font-size:clamp(2.2rem, 1.05rem + 2.25vw, 3.3rem); } /* = sec-head tier (base 3.2); matches .sec-head exactly */ body .member h2{ font-size:clamp(2rem, 0.72rem + 2.38vw, 3.1rem); } /* = section-head tier (base 3.4) */ body .labband .lb-txt h2{ font-size:clamp(1.65rem, 0.78rem + 1.62vw, 2.4rem); } /* = data tier (base 2.6); 0,2,2 beats base 0,2,1 */ /* Group A: remaining per-page section-h2 vocab from the full sweep (2026-07-02). */ body .stakes h2{ font-size:clamp(2.2rem, 1.05rem + 2.25vw, 3.3rem); } /* base 3.2 (= sec-head tier) */ body .close h2{ font-size:clamp(2.2rem, 1.05rem + 2.25vw, 3.3rem); } /* base 3.0-3.2 varies, stepped to the larger (= sec-head tier) */ body .people h2{ font-size:clamp(2.2rem, 1.52rem + 1.38vw, 2.9rem); } /* SPLIT rung (Step 8): forks 2.6 / 3.2, 46.4 at 1600 sits 4.8 from both */ body .next h2{ font-size:clamp(1.9rem, 0.91rem + 1.84vw, 2.75rem); } /* base 3.0 (= oli/diff rung) */ body .mirror h2{ font-size:clamp(1.7rem, 0.77rem + 1.73vw, 2.5rem); } /* base 2.7 (= levels rung); 40 at 1600, 3.2 step */ body .levels h2{ font-size:clamp(1.7rem, 0.77rem + 1.73vw, 2.5rem); } /* base 2.7 */ body .data h2{ font-size:clamp(1.65rem, 0.78rem + 1.62vw, 2.4rem); } /* base 2.6 (= data tier); 38.4 at 1600, 3.2 step */ body .why h2{ font-size:clamp(1.65rem, 0.78rem + 1.62vw, 2.4rem); } /* base 2.6 */ body .reserved h2{ font-size:clamp(1.65rem, 0.78rem + 1.62vw, 2.4rem); } /* base 2.6 */ body .reach h2{ font-size:clamp(1.6rem, 0.78rem + 1.52vw, 2.3rem); } /* base 2.5; 36.8 at 1600, 3.2 step */ body .group-head h2{ font-size:clamp(1.55rem, 0.79rem + 1.41vw, 2.2rem); } /* base 2.4, smallest h2; 35.2 at 1600, 3.2 step */ /* Group B: scoped .sec-head variants out-specify body .sec-head h2 (base 0,2,1 > 0,1,2), so mirror at 0,2,2 */ body .proofs .sec-head h2{ font-size:clamp(2.2rem, 1.05rem + 2.25vw, 3.3rem); } /* base 3.2; mirrors .sec-head above */ body .evidence .sec-head h2{ font-size:clamp(1.8rem, 0.75rem + 1.95vw, 2.7rem); } /* base 2.8 (= calm rung) */ body .authors .sec-head h2{ font-size:clamp(1.65rem, 0.78rem + 1.62vw, 2.4rem); } /* base 2.6 (= data rung) */ body .why .sec-head h2{ font-size:clamp(2.2rem, 1.05rem + 2.25vw, 3.3rem); } /* smart only: its why h2 sits inside .sec-head (base 3.2, page css recolors only), so 0,2,2 keeps it on the cluster over body .why h2. radon's why h2 is direct and keeps the data tier */ body .dial .score{ font-size:3.2rem; } /* 0,2,1 beats base 0,2,0; 6rem read as 96px on laptop */ body .cap h3{ font-size:1.4rem; } /* 0,1,2 beats 0,1,1; base 1.7, 4.8 step both edges */ body .svc h3{ font-size:1.15rem; } /* 0,1,2 beats 0,1,1 */ /* Group C: uncovered h3 with base >=1.6rem (fixed rem, at or below the h2 rungs they share a page with; base 1.7 -> 1.4 matches the cap h3). */ body .feature .panel h3{ font-size:1.8rem; } /* base 2.1; 0,2,2 beats base 0,2,1; 4.8 step both edges */ body .specialist h3{ font-size:1.6rem; } /* base 1.9 */ body .layer h3{ font-size:1.4rem; } /* base 1.7 (= cap h3) */ body .proof h3{ font-size:1.4rem; } /* base 1.7 (1.55 fork also steps down) */ body .tie h3{ font-size:1.4rem; } /* base 1.7 */ body .ftest h3{ font-size:1.4rem; } /* base 1.7 */ body .prod-card h3{ font-size:1.4rem; } /* base 1.7 */ body .reason h3{ font-size:1.35rem; } /* base 1.65 (1.6 fork too) */ body .idx-band h3{ font-size:1.3rem; } /* base 1.6 */ body .mult-head h3{ font-size:1.3rem; } /* base 1.6 */ body .next-card h3{ font-size:1.3rem; } /* base 1.6 */ body .lead-prose p{ font-size:1.02rem; } /* 0,1,2 beats 0,1,1 */ body .node .name{ font-size:1.05rem; } /* 0,2,1 beats base 0,2,0 */ .stats .stat .n{ font-size:1.8rem; } /* 0,3,0 beats base 0,2,0 (service fixed 2.1rem + page clamp); base cap 33.6, 4.8 step */ .oli .num{ font-size:3.1rem; } /* 0,2,0 equals base, but base is style.css (loads first): wins; base 3.4, 4.8 step */ }