/* Masthead (spec 5.3, 5.4). The image sets its own height: no fixed height, no cropping. The wordmark and tagline are live text over a scrim. */ .masthead { position: relative; width: fit-content; max-width: 100%; margin-inline: auto; margin-block: 0; } .masthead-picture { display: block; } /* width:auto is load-bearing. The width/height HTML attributes are a presentational hint, so without it the used width is a definite 1792px and max-height clamps the BOX height without narrowing it — object-fit then letterboxes the art inside an over-wide box and the text, anchored to the box, drifts off the picture onto a blank slab (123px bars each side at 1920px). With width:auto the max-height shrinks the width in proportion, so the box always matches the art and the scrim and text stay on it. */ .masthead-img { display: block; width: auto; max-width: 100%; height: auto; max-height: var(--wp--custom--masthead-max-height, 26rem); object-fit: contain; } /* The scrim sits between image and text and must never eat clicks. Weakening it silently breaks WCAG AA: an earlier text-shadow-only overlay looked fine and measured 4.12:1 on the tagline against a 4.5 requirement. Worst-pixel contrast, measured on the rendered page by compositing this gradient over the decoded image (needs 3.0 wordmark / 4.5 tagline): 1280px 10.96 / 8.95 1920px 10.64 / 7.60 390px light 14.76 / 6.46 390px dark 15.01 / 7.98 Below 48rem the text stacks beneath the picture and this scrim is hidden, so the two mobile figures are against the theme's ink tokens, not the gradient. Measure the INKED TEXT (the text node's client rects), never the block box: the title block spans the full container, so most of its box is empty space over bright sky. Scanning the box reported 2.24:1 for text that actually measures 10.64:1 -- a failure that was not there. */ .masthead-scrim { position: absolute; inset: 0; /* Block-gap puts a margin-block-start on every flow sibling, and a margin offsets an absolutely positioned box too — which left the top 24px of the picture unscrimmed. inset:0 alone does not survive that. */ margin: 0; z-index: 1; pointer-events: none; background: linear-gradient(104deg, rgba(7, 11, 15, .88) 0%, rgba(7, 11, 15, .78) 30%, rgba(7, 11, 15, .52) 52%, rgba(7, 11, 15, .16) 72%, rgba(7, 11, 15, 0) 88%); } /* One vertical line down the page: the wordmark and the nav align with the text column, not with the banner edge. The text column is NOT centred on the page -- it sits inside the left column of a wide two-column layout whose right column is the sidebar -- so the indent is derived from the same tokens the layout is built from. Change the sidebar width, the gap or contentSize and this follows them instead of drifting. indent = (wide - sidebar - gap - content) / 2 Measured at 1280px: (1024 - 256 - 24 - 560) / 2 = 92px, putting the wordmark and the nav at 213px, where the headlines and body text start. */ :root { /* Below about 1072px the constrained containers fill the window, which left every line -- wordmark, nav, headlines, body, dates -- flush against the edge. Above it the wide size is already narrower than the window, so this changes nothing. The picture is never guttered: it stays full-bleed. */ --windy-gutter: 1.5rem; /* Everything to the right of the text column's left edge inside the wide container: the sidebar, the gap before it, and the column itself. The indent is half of what is left over. */ --windy-furniture: calc(16rem + var(--wp--preset--spacing--50) + 35rem); } /* Only the content shell is padded. The header must NOT be: the masthead is alignfull, and alignfull escapes a container's max-width but not its padding, so padding here insets the picture and it stops being full-bleed (spec 5.3). The header's two guttered children take the gutter themselves. */ .site-shell { box-sizing: border-box; padding-inline: var(--windy-gutter); } /* nav. is load-bearing: WordPress copies a navigation block's custom class onto BOTH the