/* ============================================================ mobile.css — sitewide mobile retrofit layer. Loaded LAST on every page (except index.html + design.html) via _tools/wire-mobile-css.mjs, which also stamps . Rules: see MOBILE-RULES.md. Everything lives inside the 760px query; desktop rendering is untouched by design. Round 1 (2026-07-19): legibility floors from _qa/mobile-audit.js data. Round 2 (2026-07-22): floor raise per MOBILE-RULES.md v2 — micro-labels 11px->12px, reading-size floors (max() rules) 12-13px->15-16px. Selectors untouched (page-verified). ============================================================ */ @media (max-width: 760px) { /* ---- shared: the gutter .wrap promises, restored ---------------- Round 3 (2026-08-01). P-A: "the padding on the website is still odd on mobile." He was right, and it was one bug wearing two names. .wrap sets padding-left/right to the page gutter. Several pages then declare a padding SHORTHAND on the same element, AFTER it: .head { padding: clamp(50px,8vh,90px) 0 clamp(10px,2vh,18px) } main.stage { padding: clamp(60px,10vh,120px) 0 } The shorthand's `0` wipes left and right, so the heading, the eyebrow and the lede sit flush on the screen edge. Twelve pages did it: projects, resources, detail, inspiration, talkpieces, themes, designers, networks, how-to, community, separation, arts. It hides on desktop only because .wrap is max-width and centred there. Fixed here rather than in twelve files so it cannot come back the next time someone writes a padding shorthand. Vertical padding, which is what those rules are actually for, is left alone. Measured by _qa/probe-gutter.js — run it after touching any hero. */ main.wrap, header.wrap, section.wrap, div.wrap, article.wrap, .wrap.head, .wrap.stage { padding-left: var(--gutter, 20px); padding-right: var(--gutter, 20px); } /* ---- shared: micro-label floor (kickers/eyebrows are 8.6-11.2px) ---- */ .eyebrow, .kicker, #eyebrow, #turnKicker, #lensKicker, #waysKicker, #closeKicker, #fKicker, #cdKicker, #clKicker, #pEyebrow, #dEyebrow, #tEyebrow { font-size: 12px !important; } /* ---- story.html ---- */ html.m-story .v-kicker, html.m-story .chap-kicker, html.m-story .i-kicker, html.m-story .gb-kicker { font-size: 12px !important; } html.m-story .ph-k, html.m-story .v-years, html.m-story .stayed-label { font-size: 12px !important; } html.m-story .b-theme { font-size: 12px !important; } /* ---- work.html ---- */ html.m-work .gb-kicker { font-size: 12px !important; } html.m-work .exp-org { font-size: 12px !important; } html.m-work .exp-go { font-size: 12px !important; } /* ---- project.html ---- */ html.m-project .p-kicker, html.m-project .t-kicker { font-size: 12px !important; } html.m-project .s-label { font-size: 12px !important; } /* the photo caption was 11.5px, under the 12px label floor */ html.m-project .hero-cap { font-size: 12px !important; } html.m-project .pg-dir { font-size: 12px !important; } /* ---- why.html ---- */ html.m-why #vCredit { font-size: 12px !important; } html.m-why .go { font-size: 12px !important; } html.m-why figcaption { font-size: 12px !important; } /* ---- map.html (Atlas) ---- */ html.m-map label { font-size: 12px !important; } html.m-map .lab { font-size: 12px !important; } html.m-map .da { font-size: 12px !important; } /* ---- type.html (field guides) ---- */ html.m-type figcaption { font-size: 12px !important; } html.m-type .k { font-size: 12px !important; } html.m-type .who { font-size: 13px !important; } html.m-type .badge { font-size: 12px !important; } html.m-type .fk { font-size: 12px !important; } html.m-type .e, html.m-type .e.r { font-size: 12px !important; } /* ---- manifesto.html ---- */ html.m-manifesto #heroCredit { font-size: 12px !important; } html.m-manifesto .stagenote { font-size: 12px !important; } html.m-manifesto .deep { font-size: 12px !important; } /* ---- about.html ---- */ html.m-about .b-theme { font-size: 12px !important; } /* ---- resources.html ---- */ html.m-resources .tag { font-size: 12px !important; } /* ---- inspiration.html ---- */ html.m-inspiration .flag { font-size: 12px !important; } html.m-inspiration .tg { font-size: 12px !important; } html.m-inspiration .meta { font-size: 12px !important; } /* ---- round 1b: reading-size floors (max() can only grow, never shrink) ---- */ html.m-themes main a { font-size: max(16px, 1em) !important; } /* NOT the injected pill. This rule exists for reading links inside the prose, but `a` also catches site-nav.js's "back to the tower" pill, and !important beat the shared rule — so about.html rendered its pill at 18px while every other page rendered 12px. That is the "odd random size" P-A saw, 2026-08-01. Any future blanket `a` rule needs the same exclusion. */ html.m-about a:not(.wback) { font-size: max(16px, 1em) !important; } html.m-work b { font-size: max(15px, 1em) !important; } html.m-map b { font-size: max(15px, 1em) !important; } html.m-type .pl, html.m-type .lab, html.m-type .tip { font-size: 12px !important; } /* ---- shared safety nets ---- */ /* keep long words/urls from forcing horizontal scroll */ html[class*="m-"] body { overflow-wrap: break-word; } } /* ============================================================ ROUND 2 (2026-07-22): per-page layout/impact pass — folded from _mobile/.css fragments (10 parallel agents, see _mobile/*-REPORT.md). Shared-component fixes (.wback, .btn-pill, footer) live in site-nav.js + the shared section below — per-page duplicates pruned at fold time. ============================================================ */ @media (max-width: 760px) { /* ---- shared: email CTA pill wraps instead of overflowing viewport ---- */ .btn-pill { max-width: 100%; white-space: normal; overflow-wrap: anywhere; word-break: break-word; text-align: center; line-height: 1.35; font-size: .72rem; letter-spacing: .06em; } } /* ================= about.css (round 2) ================= */ /* _mobile/about.css — Round-2 mobile pass, about.html Selector prefix: html.m-about. Entire file lives inside max-width:760px. */ @media (max-width: 760px) { /* --------------------------------------------------------------------- 1) CRITICAL FIX — scroll-reveal sections were rendering fully invisible (opacity:0, never flipped to .in) on the phone capture, wiping out .trans, .bring, .doors and .contact (~2240px of blank cream between the quote card and the footer — see report). Neutralise the fade-in on mobile so content is never hidden; matches the site's own prefers-reduced-motion fallback already defined for .reveal. */ /* --------------------------------------------------------------------- 2) Body/reading text floor — several paragraph classes clamp to a vw-driven preferred value that resolves under the vw floor at 390px (e.g. clamp(.95rem,1.15vw,1.08rem) -> 1.15vw is ~4.5px at 390px, so the MIN of .95rem/15.2px wins), landing under the 16px reading floor. Bump to the playbook's fluid body formula (16px -> 18px). */ html.m-about .thread-body, html.m-about .trans .t-body, html.m-about .bcard .b-line, html.m-about .door .d-desc, html.m-about .contact .c-sub{ font-size: clamp(1rem, 0.954rem + 0.19vw, 1.125rem); } /* --------------------------------------------------------------------- 3) Micro-label floor — kickers/eyebrows currently render at .62rem/ .72rem (9.9px/11.5px), under the 12px micro-label floor. */ html.m-about .eyebrow, html.m-about .trans .kicker, html.m-about .bcard .b-theme, html.m-about .door .d-link{ font-size: .75rem; } /* --------------------------------------------------------------------- 4) Contact CTA pill overflow — the email-address button has no inline text-wrap safety valve, so the full uppercase, letter-spaced email renders on one line at ~430px wide inside a ~350px content column (confirmed by report.json: a.btn-pill right:545 vs 390 viewport). Let it wrap onto 2 lines instead of hanging off-canvas. */ /* --------------------------------------------------------------------- 5) Headline overflow safety — defensive wrap guard, no visual change unless a long word would otherwise force scroll (playbook recipe 1). */ html.m-about .hero h1, html.m-about .thread-line, html.m-about .trans .t-line, html.m-about .contact .c-line, html.m-about .door .d-title{ overflow-wrap: break-word; } /* --------------------------------------------------------------------- 6) Tap target — the "what I bring" card's proof-link ("That story", "Design for Connection", etc.) is a bare inline with only a 10px margin-top from its inline style, no padding of its own: real hit area is ~15px tall, under the 44px floor (recipe 8). */ html.m-about .bcard a{ display: inline-block; padding: 12px 0; } } /* ================= credits.css (round 2) ================= */ /* ============================================================ credits.css — mobile fragment for credits.html Scope: html.m-credits only. Lives entirely inside the 760px query. See MOBILE-RULES.md for the numbered recipes referenced below. ============================================================ */ @media (max-width: 760px) { /* Recipe 1 — body/reading text floor: p/li are .98rem (~15.7px), just under the 16px floor. Bump without touching desktop. */ html.m-credits p, html.m-credits li { font-size: max(16px, 1rem); line-height: 1.6; } /* .note re-uses the same floor (was .95rem, ~15.2px). */ html.m-credits .note { font-size: max(16px, 1rem); line-height: 1.55; } /* Recipe 9 — whitespace rhythm: give each source-family section a touch more breathing room between ideas (h2 was 34px top margin, tight for a one-idea-per-scroll feel). */ html.m-credits h2 { margin: 44px 0 10px; } /* First h2 shouldn't double up with the intro paragraph's own bottom spacing — keep it a bit tighter right after the intro. */ html.m-credits h1 + p + h2 { margin-top: 40px; } /* List items in "Community & project photos" run link-dense — add a little vertical separation so each source reads as its own line rather than a wall of text. */ html.m-credits ul li { margin-bottom: 10px; } html.m-credits ul li:last-child { margin-bottom: 0; } /* Recipe 8 — tap targets: inline citation links sit close together in the dense list; give them a hair of extra tap padding without disturbing text flow. */ html.m-credits ul a, html.m-credits .note a { padding: 2px 0; display: inline-block; } /* .note box: slightly roomier on phone widths so the mailto CTA doesn't feel cramped against the border. */ html.m-credits .note { padding: 20px; margin: 28px 0; } } /* ================= design.css (round 2) ================= */ /* _mobile/design.css — mobile pass for design.html (Design for Connection) Scope: html.m-design only, inside @media (max-width:760px). Desktop untouched. See _mobile/design-REPORT.md for what was fixed vs proposed vs flagged. */ @media (max-width: 760px) { /* ---- Recipe 1 / micro-label floor: tags & kickers must ship >=12px. These five ship 8-10.2px on the live page (report.json tinyText: c-tag@9.9, w-scale@10.2, n-k@9.6, b-theme@9.9, plus pk-name which the page's own 680px query drops to 8px). Bumping to .75rem (12px) meets the floor without touching layout. */ html.m-design .c-tag, html.m-design .w-scale, html.m-design .n-k, html.m-design .b-theme, html.m-design .peek .pk-name { font-size: .75rem; } html.m-design .peek .pk-name { letter-spacing: .06em; line-height: 1.35; } /* ---- Recipe 2 / gap-fill: the page's own inline