on every page that sets --bleed, and the section is a child of , so it is already the full page width and needs no vw arithmetic at all. The previous `width: 100vw` overhung the viewport by half a scrollbar on Windows and by half the excess above --width-page, and .refusal's overflow: hidden was what hid it. Same correction as .workband; reasoning in base.css .bleed. */ .refusal--bleed .refusal__band { width: auto; margin-inline: 0; } .refusal--bleed .refusal__plate { border-inline: 0; border-radius: var(--radius-sharp); clip-path: none; } /* the plate crosses both viewport edges, so its own padding is the only thing holding the copy clear of a landscape notch under viewport-fit=cover */ .refusal--bleed .refusal__cell { padding-inline: max(var(--card-pad-lg), var(--gutter)); padding-inline: max(var(--card-pad-lg), var(--gutter), env(safe-area-inset-left, 0px)) max(var(--card-pad-lg), var(--gutter), env(safe-area-inset-right, 0px)); } /* -------------------------------------------------------------------------- THE LIGHT BAND. Every other page on the site carries exactly one tonal break — the bone Process band — and the city pages have no Process block, so they ran their whole length on one tone. The plate that takes it is this one: it is the page's spine, it has no hover state and no photograph, and it is the only block whose ink list is short enough to flip without re-inking a component. Construction copied from process.css: bone ground, grain at --grain-opacity-invert, every annotation ink swapped for its -on-invert pair. The accent stays a FILL here (the cell's opening rule) and never sets text — on bone it measures 1.9:1. docs/art-direction.md. -------------------------------------------------------------------------- */ .refusal--light { position: relative; background: var(--surface-invert); color: var(--text-on-invert); --tick-ink: var(--tick-ink-invert); --tick-ink-major: var(--tick-ink-invert-major); --chamfer-edge-ink: var(--chamfer-edge-ink-invert); } .refusal--light::after { content: ""; position: absolute; inset: 0; background-image: var(--grain-image); background-size: var(--grain-size) var(--grain-size); opacity: var(--grain-opacity-invert); pointer-events: none; } .refusal--light > * { position: relative; z-index: var(--z-content); } .refusal--light .sec-title { color: var(--text-on-invert); } .refusal--light .sec-spec { color: var(--text-on-invert-muted); } .refusal--light .sec-spec b { color: var(--text-on-invert-accent); } .refusal--light .eyebrow { color: var(--text-on-invert-muted); --bracket-color: var(--border-on-invert-strong); } .refusal--light .eyebrow__idx { color: var(--text-on-invert); } .refusal--light .refusal__plate { background: var(--surface-invert-raised); border-color: var(--border-on-invert-strong); } .refusal--light .refusal__idx { color: var(--text-on-invert-accent); } .refusal--light .refusal__claim { color: var(--text-on-invert); } .refusal--light .refusal__why { color: var(--text-on-invert-muted); } .refusal--light .refusal__why a { color: var(--text-on-invert); text-decoration-color: var(--text-on-invert-accent); } .refusal--light .refusal__why a:hover { color: var(--text-on-invert-accent); } @media (min-width: 768px) { /* 2x2, never 4-up: the reasons run 20-50 words and are unequal, so four columns set the longest cell at eleven lines beside a three-line one. 1fr rows even the pair: a one-line reason otherwise sits at half the height of its neighbour. In one column the rows stack, so they don't. */ .refusal__plate { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; } /* THE COLUMN SEAM. At 1920 a cell is 960px wide and holds 572px of text, so without a seam the plate read as two rows of prose under two long accent rules rather than as one plate divided into four. This is a hairline in the plate's own border ink, not the accent divider docs/uniqueness.md move 3 killed: it is the same edge the plate already draws around itself, carried inward. Rows need no seam — the accent opening rule already separates them. */ .refusal__cell:nth-child(even) { border-inline-start: var(--border-width-hair) solid var(--border-soft); } .refusal--light .refusal__cell:nth-child(even) { border-inline-start-color: var(--border-on-invert-strong); } } /* -------------------------------------------------------------------------- THE PLATE IS PLACED, NOT PRINTED. clip-path removes box-shadow outright, so on the bone variant the site's one light plate sat flat on the ground it was meant to lift off. --shadow-chamfer-invert is the drop-shadow pair made for a chamfered object on a light surface and was referenced nowhere until now; it goes on the band rather than the plate because a filter on a clipped element is applied after the clip, which is what makes the chamfer cast. -------------------------------------------------------------------------- */ .refusal--light .refusal__band { filter: var(--shadow-chamfer-invert); } /* -------------------------------------------------------------------------- THE HEAD AS THE PLATE'S FIRST CELL. Standing above the plate, the section head left #limits 741px tall around 374px of ink — 136px of bone over the eyebrow, 169px under the plate, and an empty 1180x290 beside a five-word h2 — on the one block on the page that flips to bone, which made the emptiest block the brightest. Set as the plate's opening cell it becomes the block's first column and the accent opening rule runs unbroken across all three. -------------------------------------------------------------------------- */ .refusal--head-in-plate .refusal__head { max-width: none; margin-block-end: 0; padding: var(--card-pad-lg); border-block-start: var(--border-width-bar) solid var(--surface-accent); } /* the plate's own border is the boundary here, so the head does not draw the graduated tick rule .sec-head carries when it stands on the page ground */ .refusal--head-in-plate .refusal__head::before { content: none; } .refusal--bleed .refusal__head { padding-inline: max(var(--card-pad-lg), var(--gutter)); } @media (min-width: 768px) { /* While the plate is two columns wide the head spans them and the refusals take the row underneath: three columns of a 785px plate set 260px tracks and broke "two-year-old car." over four lines. Rows are auto here, not 1fr — the 2x2 rule's even rows would otherwise stretch the head cell to the height of the refusals beside it and put the bone straight back. */ .refusal--head-in-plate .refusal__plate { grid-auto-rows: auto; } .refusal--head-in-plate .refusal__head { grid-column: 1 / -1; } } @media (min-width: 1024px) { /* three equal columns: head, refusal, refusal. The 2x2 rule above cannot see the head, so it would have set the two refusals under it. */ .refusal--head-in-plate .refusal__plate { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; } .refusal--head-in-plate .refusal__head { grid-column: auto; } /* every cell now opens a column, so every cell takes the seam — :nth-child (even) counted from the plate and with the head at index 1 it landed on the first refusal only */ .refusal--head-in-plate .refusal__cell { border-inline-start: var(--border-width-hair) solid var(--border-soft); } .refusal--light.refusal--head-in-plate .refusal__cell { border-inline-start-color: var(--border-on-invert-strong); } }