/* about.css — about-contact-260913. /about, /contact and the four /capabilities/ stubs. Tokens and type come from home.css, which loads first; nothing is redefined here. Same measure as legal.css (68ch) so body copy reads identically across the quiet pages. */ /* round4c fix r1 F7 (G12): the prose column STARTS on the page gutter. `margin:0 auto` centred it, which put /about's left edge at x~215 at 1440 while every other page began at var(--pad) - a second left edge on the same site. A narrower measure is fine; a different left edge is not. */ /* round4c fix r1 F7 (G12) second half: scoped to `main`. `qpage` puts the page class on the BODY as well (`
`), so an unscoped `.abt` applied this padding TWICE and /about's h1 started at x=80 at 1440 - two gutters, not the ruled one. */ main.abt,main.ctc{padding:clamp(48px,7vw,96px) var(--pad) clamp(56px,8vw,104px);max-width:calc(78ch + 2 * var(--pad));margin:0} .abt h1,.ctc h1{font-family:Newsreader,Georgia,serif;font-weight:300;font-size:clamp(30px,4vw,44px);line-height:1.14;letter-spacing:-.01em;margin:0;max-width:17ch} /* round4c-260917 B6 / A2 (LOW, adjacent). 28ch at this size wrapped the subhead at about 200px, * so a 40-character sentence broke into three stub lines. "Same measure as the lede" is a * PHYSICAL line length, not the same ch count: the lede is 68ch of 19px body, and ch is relative * to each element's own font-size, so 68ch here at up to 24px would overrun it. 54ch x 24px is * 68ch x 19px, so the two wrap at the same place on the page. Measured on the rendered page, not * computed and trusted. */ .abt .sub{font-family:Newsreader,Georgia,serif;font-size:clamp(20px,2.6vw,24px);line-height:1.3;color:var(--muted-sm);margin:.5em 0 0;max-width:54ch} .abt p,.ctc p{font-size:19px;line-height:1.62;color:var(--ink);max-width:68ch;margin:1.35em 0 0} /* round4c B9 L3 (FABLE NOTE 9, Thom 21:55 "about and contact should just match the other pages"): scoped to `main`, the same one-shell bleed the padding comment above describes and for the same reason - `qpage` puts the page class on the BODY too, so an unscoped `.abt h2` also matched the SHARED footer's .cols column headings. That overrode home.css:226 `.cols h2` (#a9a3a0 on ink, 4.8:1) with --muted-sm #6B6866 = 2.17:1 at 13px/400, and axe blocked /about and /contact at both widths while the other 71 pages passed. Scope fix, not a colour: nothing here changes what the page's own section labels look like, and home.css is untouched, so the footer simply inherits the shared style again. */ main.abt h2,main.ctc h2{font-size:13px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-sm);margin:0 0 1.1em;padding-bottom:.9em;border-bottom:1px solid var(--hair)} .abt section{margin-top:clamp(48px,7vw,88px)} .abt figure{margin:clamp(40px,6vw,72px) 0 0} .abt figure img{width:100%;height:auto} /* the people wall — about-people-260914. Eight approved portraits (headshots-260914 r5d). COLUMN COUNT IS EXPLICIT, not auto-fill: the wall has to land on 2 at phone and 4 on the desktop measure, and auto-fill makes that a function of the container instead of a rule. The tiles are pre-cut 4:5 at one head scale, so the img is NOT re-cropped here: 4/5 + width:100% is the native frame. object-fit is a guard against a future non-4:5 file, not a crop. Rows stay uniform because every tile carries the same ratio. */ .pplw{list-style:none;margin:0;padding:0;display:grid;gap:clamp(22px,3vw,34px) clamp(14px,2.2vw,26px);grid-template-columns:repeat(2,minmax(0,1fr))} .pplw li{margin:0} .pplw .pplc{margin:0} /* round4c B6 A1 -- 9/11 s6 draws the wall as SQUARES in two rows of 5 + 4; round4b shipped 4/5 * portrait rectangles in rows of 4, which is what orphaned Nosa onto a third row at 1440. The * ratio is 1/1 and the 1440 track count is 5, so nine people land 5 + 4 with no orphan and no * empty cell. object-fit:cover means the existing tiles re-crop rather than distort. */ .pplw .pplc img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;background:var(--hair)} .pplw figcaption{margin-top:12px} .pplw .nm{display:block;font-family:"Inter Tight",system-ui,sans-serif;font-size:17px;font-weight:400;line-height:1.25;color:var(--ink)} .pplw .rl{display:block;font-family:"Inter Tight",system-ui,sans-serif;font-size:14px;line-height:1.4;color:var(--muted-sm);margin-top:3px} /* minmax(0,1fr), not 1fr: a long name in a caption can widen an auto track and make two people * different sizes -- the same defect class as the wall tiles at 390 (R-D). */ @media (min-width:640px){.pplw{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (min-width:1024px){.pplw{grid-template-columns:repeat(5,minmax(0,1fr))}} .abt h3{font-size:13px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-sm);margin:2.4em 0 1.1em} /* brands impacted: text, not logos — the list is a sheet cell (Pages C23). */ /* about-contact-r2-260913: the cell is one sentence and ships as one sentence. Was a grid