/* ============================================================ READING VIEW Long-form articles, activity guides and service pages. Sticky contents rail + measured prose column. ============================================================ */ /* ---------- ARTICLE HERO — REMOVED, 31 Aug ---------- ~60 lines styling .cz-insight__hero/__hero-media/__title/__standfirst/ __byline/__author/__updated: the full-bleed dark hero the masthead replaced (B36, R31). Deleted, not left inert. Verified dead first, because a class that only looks dead has cost this project a component before (23.15): 0 emitters in PHP and JS, 0 rendered on six routes. Contrast .cz-postnav below — equally absent from four of those six, emitted by single.php:95 on every `post`. It stays. */ /* ---------- Three-column reading layout ---------- */ /* Three columns, not two. The old grid was `260px | 1fr` with the prose inside capped at 72ch. On a 1720px container that left roughly 630px of dead margin on the right, and a full-width figure inside the body column floated in that void, misaligned with the text it belonged to. The third column gives that space a job: figures, key numbers and asides sit in it, next to the paragraph they relate to, instead of interrupting the column. */ .cz-reading { /* Named so elements inside the prose can compute their own bleed into the margin column — see .cz-bleed below. */ --cz-margin-col: clamp(240px, 21vw, 380px); --cz-read-gap: clamp(28px, 3.2vw, 64px); display: grid; /* The measure is capped on .cz-prose, NOT on this track. Capping the track at 74ch meant the three tracks stopped summing to the container: nothing absorbed the remainder, so a bleeding table finished 64px short of the container's right edge at 1600px and 207px short once the container hit its 1720px ceiling — while every other .container section on the page ran the full width. A 1fr middle track always consumes the remainder, so the three tracks sum to the container again and the reading measure is enforced where it belongs. STILL OPEN, measured 31 Aug on /uae-corporate-tax/. This comment used to end "lands exactly on the container edge at every width" — a pass condition written as a result (10-BUGS pattern 53). It does not. The bleed is applied to an element inside .cz-prose, so its origin is the MEASURE, not the track. While 74ch exceeds the track they are the same box and the arithmetic is exact; once the track outgrows 74ch the bleed falls short by the difference: vw container track prose short of container edge 1600 1512.8 824.4 824.4 0.0 1650 1563.2 861.0 861.0 0.0 1700 1612.8 897.0 878.7 18.3 1792 1704.8 963.8 878.7 85.1 1905 1720.0 968.1 878.9 89.2 2560 1720.0 962.0 878.7 83.3 Shortfall equals (track - prose) exactly at every width — the proof of cause. Onset 1650-1700, so every desktop from 1680 up shows it. Do NOT fix by widening .cz-prose: 74ch is the measure R19 fixes, and the track is ~81ch at 1905. The fix needs the bleeding element to reference the track — emit .cz-tablewrap under .cz-reading__body rather than .cz-prose (content-enrich.php), or cap the track and let the margin column absorb the surplus (which changes what --cz-margin-col means, so article.css and figures.css move with it). Both cross a file boundary: reported, not fixed. The margin column is minmax(0, …) rather than a bare length so it can give way instead of crushing the prose in the 1px band between this rule and the 1000px one, where neither media query below matches. */ grid-template-columns: minmax(0, 250px) minmax(0, 1fr) minmax(0, var(--cz-margin-col)); gap: var(--cz-read-gap); align-items: start; padding-block: clamp(44px, 5vw, 84px); } .cz-reading__rail { position: sticky; top: 110px; display: grid; gap: 28px; } .cz-reading__body { min-width: 0; grid-column: 2; } /* The margin column. This comment used to promise "content is placed into it from the body flow ... see .cz-prose--article > .cz-aside below" — both halves false, and no such rule is in this file (23.14). Measured 31 Aug: cz-reading__margin and cz-aside each have 0 emitters in PHP and JS, so nothing is ever placed here and these rules match no element on any route. Kept anyway: the third TRACK is load-bearing even while empty, because --cz-margin-col is what .cz-tablewrap and the strip/pair figures compute their bleed from. The missing half is an emitter, in inc/content-enrich.php. Reported, not fixed. 18 Sep 2026: still 0 emitters for .cz-reading__margin. The .cz-aside rules in article.css were deleted (0 emitters, re-verified). The margin exhibit content-enrich.php did go on to build is cz_open_marginalia()'s `.cz-marginalia` figure, which bleeds out of the BODY column into this track (editorial.css:227) rather than being placed in this element — so this rule is still unreached. */ .cz-reading__margin { grid-column: 3; position: sticky; top: 110px; display: grid; gap: 22px; min-width: 0; } /* Bounded at both ends. Written open-ended as `max-width: 1400px` it also matched 375px, and because it is printed after the single-column rule below it won there too — leaving the prose column 135px wide on a phone. A range query keeps each breakpoint responsible for exactly its own band. */ @media (min-width: 1001px) and (max-width: 1400px) { /* Not enough room for a genuine third column — fold it back under the rail rather than squeezing it to an unreadable width. */ .cz-reading { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); } .cz-reading__body { grid-column: 2; } .cz-reading__margin { grid-column: 1; position: static; } } /* ---------- Contents ---------- */ /* GOLD-ON-LIGHT, the reading rail's three sites. Measured 1 Sep across the 8 routes that render this rail, at 1600x1000 and 375x812. --cz-gold is #c7a36b. It was chosen against ink and it is correct there; on the light grounds this view actually uses it is 2.365:1 on --cz-paper (#ffffff) and 2.164:1 on --cz-paper-2 (#f3f5f7). WCAG 1.4.3 asks 4.5:1 of text this size — all three of these are 12-12.5px, nowhere near the 18.66px bold that would let them count as large text. So: a real failure, at roughly half the required ratio, on every route the rail appears on. The value below is --cz-gold with its hue and saturation held exactly (36.52deg, 45.1%) and lightness taken from 60% down to 36%. It is the same gold, darkened until it clears — not a second gold. It measures 5.38:1 on #ffffff and 4.921:1 on #f3f5f7, so it passes on the tighter of the two grounds with 0.42 in hand rather than sitting on the line. Written as a var() with a literal fallback ON PURPOSE, and the fallback is load-bearing — do NOT read it as the misinformation the scroll-margin-top comments below describe. That case is a fallback behind a token that IS defined at :root, so it can never fire and can therefore lie freely. This one is the reverse: the fallback is the value that ships on every route this file serves. Re-checked 1 Sep, because the sentence here used to read "--cz-gold-on-light is NOT defined anywhere yet" and that is no longer true — the kind of stale claim this file deletes elsewhere (23.14). It IS declared, exactly once, at listing.css:60 on :root at #8a6730. It still never reaches these rules: inc/enqueue.php:103–108 gates listing.css on is_home() || is_search() || is_404() || a non-CPT archive, and enqueue.php:132 gates this file on is_singular(post|page|cz_activity|cz_service) && ! is_front_page(), plus the two free zone views. Those two sets cannot both match one request, so listing.css is absent wherever reading.css is present and the fallback resolves. Both values pass anyway (#8a6730 is 5.169:1 on #ffffff and 4.729:1 on #f3f5f7), so if the two ever do meet, the worst case is two shades of the same dark gold, not a regression. The token name is the one the contrast audit uses for this same failure in five other stylesheets; it belongs at :root in main.css, which this file does not own. When main.css declares it, all six files converge on that value with no further edit here and this fallback goes quiet. Nothing is out-specified. All three edits change a `color` value inside a rule that already exists and already declares that property, so no selector is added and no specificity moves. Checked against every other rule in play: main.css:4114 lists .cz-toc__label at (0,1,0) but declares only font-size and letter-spacing; article.css:467 styles .cz-toc/.cz-toc__list layout and no colour; zones.css:464 colours .cz-toc__item a, a different element. No rule in any stylesheet declares colour on these three. Dark contexts checked, because .cz-zone/.cz-guide once put this rail on ink and line 148 below still carries that assumption. They do not any more — zones.css:457 records the rail moving to paper, and both a zone route (/free-zones/ifza/) and a guide route (/activity-guides/photography-services/) measured this label on #ffffff. Every ground this gold now lands on is light. */ .cz-toc__label { margin: 0 0 14px; font-size: 12px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; /* 2.365:1 on #ffffff at 1600px. See the block above. */ color: var(--cz-gold-on-light, #856532); } .cz-toc__toggle { display: none; } .cz-toc__list { margin: 0; padding: 0; list-style: none; counter-reset: cztoc; border-left: 1px solid var(--cz-line); } .cz-toc__item a { display: block; padding: 8px 0 8px 16px; margin-left: -1px; border-left: 1px solid transparent; font-size: 13.5px; line-height: 1.45; color: var(--cz-mid); transition: color .25s var(--cz-ease), border-color .25s var(--cz-ease); } /* NO `opacity` HERE, and that is the whole fix. Third-level entries were de-emphasised with opacity:.82, which is not a colour change — it composites the declared rgb(91,101,112) against the white behind it and ships #79818a. Measured in the browser 1 Sep on the four routes whose rail has h3 entries — /about-us/ (1 entry), the general trading post (5), /business-setup-services-in-dubai/ (6) and the licence category post (7), 19 in all — at 13px weight 400, against the 4.5:1 WCAG 1.4.3 asks: 1600px ground #ffffff ships #79818a 3.947:1 -> #5b6570 5.932:1 375px ground #f3f5f7 ships #767f88 3.723:1 -> #5b6570 5.428:1 The 375px row is the worse of the two and is the one the audit missed: below 1001px the rail becomes the disclosure above the article and .cz-toc fills itself with --cz-paper-2, so the same .82 composites against a darker ground and lands further under. Both bands pass on the one deletion. The declared colour on its own is 5.932:1 and never failed, so reading the colour value in isolation does not find this; only the composited result does. Deleting the opacity restores --cz-mid. The de-emphasis survives without it: the 30px indent and the 13px/13.5px step are what actually rank these below the h2 entries, and neither is a colour. It also stops fading two things it was never meant to touch — the .is-current/:hover ink and the gold border-left beside it, both of which were being composited at .82 as well. Nothing is out-specified: this deletes a declaration from a rule that already exists, at (0,1,1), and adds no selector. Every rule in play still wins where it did — .cz-toc__item a (0,1,1) above supplies the colour, the :hover and .is-current pair is (0,2,1), and the .cz-zone/.cz-guide rule below is (0,2,1) — itself overridden by zones.css:557 to #21262d, which is why the zone rail composited to #494d53, measured 8.505:1, and was never part of this failure. opacity was theme-wide unique to this rule: no other stylesheet declares it on any .cz-toc element. */ .cz-toc__item--h3 a { padding-left: 30px; font-size: 13px; } .cz-toc__item a:hover, .cz-toc__item a.is-current { color: var(--cz-text); border-left-color: var(--cz-gold); } .cz-toc__meta { margin: 14px 0 0; font-size: 12px; letter-spacing: .04em; color: var(--cz-mid); } /* Dark contexts */ .cz-zone .cz-toc__item a, .cz-guide .cz-toc__item a { color: var(--cz-lt); } .cz-zone .cz-toc__item a:hover, .cz-guide .cz-toc__item a:hover { color: #fff; } /* ---------- Rail CTA ---------- */ .cz-reading__cta { padding: 20px; background: var(--cz-paper-2); border-left: 2px solid var(--cz-gold); } .cz-reading__cta p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.5; font-weight: 600; color: var(--cz-text); } .cz-reading__cta .cz-btn { width: 100%; justify-content: center; font-size: 12.5px; padding-inline: 16px; } /* ---------- Prose ---------- */ .cz-prose { /* THE MEASURE IS NO LONGER DECLARED HERE IN ANY MEANINGFUL SENSE, and the sentence that used to sit on this line said the opposite: "the reading measure, and the only place it is declared ... 74ch came out at 64 characters of 18.5px body copy". Both halves are false, so both are gone (23.14 — this file deletes stale claims rather than leaving them to be trusted). Where the measure actually comes from: placement.css:103 declares `.cz-reading__body .cz-prose { max-width: none }` at (0,2,0), from the file that prints LAST. This rule is (0,1,0). So on every route that renders a reading body — every article, service page, guide and free zone profile — the value below never wins and never has since that block was written. placement.css:118 caps the CHILDREN at 74ch instead, and placement.css:124 hands the same 74ch to --cz-fig-measure. Those two are the measure. What 74ch is worth, measured, so the number is not re-trusted: `ch` is the advance of the digit zero, and in Overpass at 18.5px that is 11.825px while the average prose character measures 8.403px. `ch` therefore overstates a line by 41%, and 74ch licenses ~104 characters against a 60-80 comfort band. `em` is no better — like `ch` it resolves against the ELEMENT'S own font-size, which is why one declared value produces four right edges (74ch computes 1766px on an h2, 998px on the 21px lead, 879px on a body paragraph: an 88.5px ragged step between a heading and the text under it). A root-relative length is the only unit that gives every child one edge; 40rem is 640px, 76.2 characters. NOT changed here, deliberately. Editing this line fixes no article, because of the specificity above; it would only move the secondary branches — the heading-less .cz-page__single branch of page.php, the free zone "In detail" prose and .cz-prose--dossier — and would leave the site running two different measures, which is the drift this project keeps paying for. The fix is one edit in placement.css (lines 118 and 124) with this line following it, not this line on its own. Reported, not fixed. */ max-width: 74ch; font-size: clamp(16px, .4vw + 15px, 17.5px); line-height: 1.75; color: var(--cz-text); /* R5, zero horizontal overflow at 375px. A URL, an unspaced authority name or one of the run-together tokens the import leaves behind cannot be broken by the normal wrapping algorithm, and in the 343px column a phone gives this view it paints straight out of the container with nothing to scroll it back. `break-word` and not `anywhere`: it fires only on a word that genuinely cannot fit on a line of its own, so it changes no line of ordinary prose at any width, and unlike `anywhere` it does not alter min-content sizing, so no table or grid track quietly resizes underneath it. Declared once here because the property inherits — paragraphs, list items, blockquotes and table cells are all covered by this one line. */ overflow-wrap: break-word; } /* Rhythm measured against the targets in the design system: P→P about 20px, P→H3 about 25px, P→H2 about 41px. The heading margins were 2.2em and 1.8em, which at the desktop maxima put 70px above an H2 and 41px above an H3 — roughly three blank lines where the brief asks for one. */ /* Declared per element, never as `> * + *` — R5 bans that selector and B33 records both failures: bare it prints after the break elements and collapses every chapter opener to 21px; guarded with :not() the negations inherit their arguments' specificity and collapse H2 spacing 94px -> 41px. This file still carried the bare form. Inert today — every shipped .cz-prose also carries .cz-prose--article (4 of 4 measured) and article.css declares .cz-prose--article > * at the same (0,1,0) and always prints later (inc/enqueue.php gates cz-reading:135 and cz-article:154 on the same $cz_reading_view expression, so they cannot load apart). But "inert today" is how a landmine reads the day before it fires. Same computed result. */ .cz-prose > * { margin-top: 1.15em; } .cz-prose > *:first-child { margin-top: 0; } .cz-prose h2 { margin-top: 1.3em; margin-bottom: .5em; font-size: clamp(23px, 1.3vw + 18px, 32px); font-weight: 700; line-height: 1.18; letter-spacing: -.026em; /* 70px, because that is what main.css:40 declares. Written 66px here and at 21 other sites across four stylesheets (08 14.6). The token is always defined at :root so no fallback ever fires — misinformation, not a bug. This file's two are now right; 19 remain in article/activity/listing.css. */ scroll-margin-top: calc(var(--header-h-compact) + 24px); } .cz-prose h3 { margin-top: 1.1em; margin-bottom: .4em; font-size: clamp(18px, .8vw + 15px, 23px); font-weight: 700; letter-spacing: -.018em; /* 70px, because that is what main.css:40 declares. Written 66px here and at 21 other sites across four stylesheets (08 14.6). The token is always defined at :root so no fallback ever fires — misinformation, not a bug. This file's two are now right; 19 remain in article/activity/listing.css. */ scroll-margin-top: calc(var(--header-h-compact) + 24px); } /* Body copy is near-black. --cz-mid (#5b6570) is the caption and meta grey; setting the reading column in it is what made the articles look washed out, and it was corrected for .cz-prose--article only — every other prose variant in this view was still grey. */ .cz-prose p { color: #21262d; text-wrap: pretty; } .cz-prose strong { color: var(--cz-text); font-weight: 700; } .cz-prose a { color: var(--cz-text); text-decoration: underline; text-decoration-color: var(--cz-gold); text-underline-offset: 3px; text-decoration-thickness: 1.5px; transition: color .25s var(--cz-ease); } /* Gold-on-light — full reasoning at .cz-toc__label above. This is the last `color: var(--cz-gold)` left in this file, and the only rule in the theme that colours a prose link on hover. The rest state is --cz-text (#14181c), so pointing at a link took body copy from 17.8:1 to 2.365:1 on #ffffff, and from 16.3:1 to 2.164:1 inside a blockquote or a header cell, both of which this file fills with --cz-paper-2 (.cz-prose blockquote and .cz-prose th below) — at 16-17.5px, which owes 4.5:1 in every state, hover included. Every one of the 24 prose links measured across the four article routes 1 Sep resolved a #ffffff ground; the table header cells beside them resolved #f3f5f7. The hover made the link harder to read than the sentence it sits in. The replacement is 5.378:1 and 4.921:1 on those two grounds, so the link now darkens toward gold instead of washing out, and still reads as a state change against a near-black rest colour. The gold underline below is untouched: it is a decoration, and the change of colour is not what identifies the link. */ .cz-prose a:hover { color: var(--cz-gold-on-light, #856532); } .cz-prose ul, .cz-prose ol { padding-left: 22px; color: #21262d; } .cz-prose li + li { margin-top: .5em; } .cz-prose ul { list-style: none; padding-left: 0; } .cz-prose ul li { position: relative; padding-left: 24px; } .cz-prose ul li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--cz-gold); } .cz-prose blockquote { margin-inline: 0; padding: 20px 24px; background: var(--cz-paper-2); border-left: 3px solid var(--cz-gold); font-size: clamp(17px, .6vw + 15px, 20px); line-height: 1.55; color: var(--cz-text); } .cz-prose blockquote p { color: inherit; } .cz-prose figure { margin-inline: 0; } .cz-prose img { width: 100%; height: auto; } .cz-prose figcaption { margin-top: 10px; font-size: 12.5px; color: var(--cz-mid); } .cz-prose table { width: 100%; border-collapse: collapse; font-size: 14.5px; } /* The inline padding is fluid because on a phone it is the single biggest consumer of the column. Measured 31 Aug at 375px, where .cz-prose is 343px: a 3-column table spent 6 x 14px = 84px — a quarter of the whole measure — on cell padding alone, which pushed its min-content width past the column and made it scroll. Across five documents, twelve 3-column tables were hiding 3.8-36.7px behind the right edge; none of them needed to. The reader got a scroll region that returns a hairline of the last column's border. The clamp saturates at 14px by 562.5px of viewport (3.2 x 562.5 / 100 - 4 = 14), so every desktop width is byte-identical to the flat value it replaces — no breakpoint, and nothing to leak upward. The 8px floor holds below 320px. Verified at 375px: the twelve near-misses go to zero or under a pixel, and the 4- and 6-column tables that genuinely cannot compress still scroll, now with the edge shadow above to say so. */ .cz-prose th, .cz-prose td { padding-block: 12px; padding-inline: clamp(8px, 3.2vw - 4px, 14px); border: 1px solid var(--cz-line); text-align: left; vertical-align: top; } .cz-prose th { background: var(--cz-paper-2); font-weight: 700; } /* The wrapper cz_enrich_article() puts around every table. It ships with tabindex="0" and role="region" — it was built to be a scroll region — but no stylesheet ever declared the overflow, so a table wider than the column was simply cut off: `main` clips horizontally, so nothing scrolled anywhere and the far columns were unreachable. A five-column comparison table measured 556px of content in a 343px column at 375px; 213px of it could not be read. No min-width is forced on the table. A table that fits stays put and does not scroll for no reason; one that cannot compress below the column already overflows to its min-content width, and now that overflow scrolls. */ .cz-tablewrap { overflow-x: auto; overscroll-behavior-x: contain; /* The scroll worked; nothing said so. Measured 31 Aug at 375px on /product-setup/: 4 of the 9 tables hide 8–28px behind the right edge, and the wrapper stops 16px inside the viewport because that is the container gutter — so a table that is cut reads exactly like a table that is finished. `pageOverflow` was 0 and the region scrolled correctly; the defect was discoverability, not overflow. Four background layers do it with no markup, no script and no media query: two COVERS in the page ground, attached `local`, so they travel with the table and sit at the content's two ends; two SHADOWS, attached `scroll`, so they stay pinned to the scrollport. At rest the left cover lies exactly over the left shadow and hides it. Scroll right and the cover travels away, revealing the shadow — so an edge shows a shadow only while something is genuinely hidden on that side, and a table that fits (every table at 1600px) shows neither. Self-hiding at both ends, which is why this needs no breakpoint and cannot leak onto desktop. Painted BEHIND the cells, so it reads down the table body; the header row carries an opaque --cz-paper-2 fill of its own and covers the shadow for its one row. Accepted: the alternative is a second wrapper element on 184 tables. */ --cz-tablewrap-shadow: rgba(8, 10, 13, .17); background: linear-gradient(to right, var(--cz-paper), transparent) 0 0 / 30px 100% no-repeat local, linear-gradient(to left, var(--cz-paper), transparent) 100% 0 / 30px 100% no-repeat local, radial-gradient(farthest-side at 0 50%, var(--cz-tablewrap-shadow), transparent) 0 0 / 15px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, var(--cz-tablewrap-shadow), transparent) 100% 0 / 15px 100% no-repeat scroll; } .cz-tablewrap:focus-visible { outline: 2px solid var(--cz-gold); outline-offset: 3px; } .cz-prose hr { border: 0; border-top: 1px solid var(--cz-line); margin-block: 2.2em; } /* ---------- Sources — REMOVED, 1 Sep ---------- 9 rules for `.cz-sources` and its `h2`, `ol`, `li` and `a` descendants, including the `grid-template-columns: minmax(0, 1fr)` track that fixed a real 375px overflow (a citation laying itself out on one 1206px line inside a 343px list, 866px of it clipped and unreachable). That fix was correct and it is only being deleted because there is no longer anything to apply it to. Nothing emits the class. `template-parts/content/sources.php` is a deliberate `return;` — R11: references and citations are never printed — so the six templates that include it render nothing. Verified: zero PHP and JS emitters theme-wide, and zero occurrences in the served HTML of six routes including /free-zones/dmcc/ and /business-setup-in-uae/. Deleted in the same edit as the 13-rule block in article.css, and the pair is the reason why. This file's `.cz-sources ol` carried a comment saying it had to out-specify `.cz-sources__list` over there; two files describing one dead component, each written at a different time, is exactly how they came to disagree. If R11 is reversed, both come back from git together with the `return;` in sources.php. */ /* ---------- Post navigation ---------- */ .cz-postnav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: clamp(40px, 4vw, 64px); background: var(--cz-line); border: 1px solid var(--cz-line); } .cz-postnav a { display: block; padding: 20px 22px; background: #fff; transition: background .3s var(--cz-ease); } /* --cz-paper is #ffffff, the same white the card already sits on, so this hover changed nothing at all. The cool grey is the one that reads as a hover. */ .cz-postnav a:hover { background: var(--cz-paper-2); } .cz-postnav small { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; /* Gold-on-light — full reasoning at .cz-toc__label above. This one has two grounds, not one: .cz-postnav a is #fff at rest and --cz-paper-2 on hover, so the PREVIOUS/NEXT label was 2.365:1 sitting still and 2.164:1 under the cursor. The replacement clears 4.5:1 on both, so the hover no longer degrades it. */ color: var(--cz-gold-on-light, #856532); } .cz-postnav strong { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--cz-text); } .cz-postnav__next { text-align: right; } /* Topics from the original blog — the category and tag links the old site printed under every post (template-parts/content/legacy-topics.php). A hairline and text, no box (R51); each link keeps a 44px target (R7); the label takes the gold-on-light that .cz-postnav small uses, so the pair reads as one family. 17 September 2026. */ .cz-topics { margin-top: clamp(32px, 3vw, 48px); padding-top: 16px; border-top: 1px solid var(--cz-line); } .cz-topics__label { margin: 0 0 4px; font-size: 12px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: var(--cz-gold-on-light, #856532); } .cz-topics__list { display: flex; flex-wrap: wrap; gap: 0 22px; margin: 0; padding: 0; list-style: none; } .cz-topics__list a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; line-height: 1.35; color: var(--cz-blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .cz-topics__list a:hover { text-decoration-thickness: 2px; } /* ---------- Responsive ---------- */ @media (max-width: 1000px) { .cz-reading { grid-template-columns: 1fr; gap: 28px; } .cz-reading__body { grid-column: 1; } .cz-reading__margin { grid-column: 1; position: static; } .cz-reading__rail { position: static; } /* Contents becomes a disclosure above the article. */ .cz-toc { border: 1px solid var(--cz-line); background: var(--cz-paper-2); } .cz-toc__label { display: none; } .cz-toc__toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 52px; padding: 0 18px; background: transparent; border: 0; font-family: inherit; font-size: 12.5px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; /* Gold-on-light — full reasoning at .cz-toc__label above. The worst of the three: this control only exists below 1001px, where .cz-toc fills itself with --cz-paper-2, so the old gold measured 2.164:1 at 375px. It also carries the chevron, which `.cz-toc__toggle span` draws from currentColor — a non-text control that owes 3:1 under WCAG 1.4.11 and was failing that too. Both clear on the one value; the chevron needs no rule of its own. */ color: var(--cz-gold-on-light, #856532); cursor: pointer; } .cz-toc__toggle span { width: 10px; height: 10px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .3s var(--cz-ease); } .cz-toc__toggle[aria-expanded="true"] span { transform: rotate(-135deg) translateY(-2px); } .cz-toc__list { display: none; border-left: 0; border-top: 1px solid var(--cz-line); padding: 8px 18px 14px; } /* R7 — the contents entries are the only real controls in this panel and they were 43.6px tall, which fails a floor that R7 says is measured rather than estimated. The arithmetic: 13.5px x 1.45 line-height = 19.575px of text inside article.css:509's `padding-block: 12px` = 43.575px, and the h3 entries at 13px are 42.85px. main.css:4105 already declares `.cz-toc__list a { min-height: 44px }` — but only below 900px, so the band 901–1000px, where this panel is ALREADY the touch accordion, had no floor at all. min-height rather than more padding because article.css:509 declares padding-block at the same (0,1,1) and prints later; min-height is a property no other stylesheet declares on this element, so this wins on its own terms instead of starting a specificity war over the box. Note for whoever reads main.css:4106 next: its `display: flex; align-items: center` on the same element is dead. `.cz-toc__item a` above declares `display: block` at the same (0,1,1) from a file that prints after main.css, so the label is top-aligned in the 44px box, not centred. The residual is 0.4px on an h2 entry and 1.2px on an h3 — invisible, and not worth reopening a cross-file rule to correct. margin-left is zeroed here for two reasons. The -1px exists to lap the item's border onto .cz-toc__list's own border-left, and this width drops that border, so it laps onto nothing. More importantly the open list below is now a scroll box: -1px puts the gold .is-current indicator — which is exactly 1px wide — outside the padding box, where the overflow would clip it away entirely and the reader would lose the only mark of where they are. */ .cz-toc__item a { min-height: 44px; margin-left: 0; } /* The open accordion is capped, because it was not. The desktop rail is capped at calc(100vh - 130px) with its own scroll (article.css:531) and the phone form — the one that actually has no room — had nothing at all. A 37-entry contents list at the 44px target above is 1628px tall, so opening it pushed the first paragraph roughly two screens down a 375x812 phone and the reader had to scroll back up past the entire list to reach the article they were already standing on. That is a control covering its own content. Affordance by the four-layer background .cz-tablewrap uses further down, turned through 90 degrees: two COVERS in the panel's own ground, attached `local` so they travel with the list and sit at its two ends, over two SHADOWS attached `scroll` so they stay pinned to the scrollport. An edge shows a shadow only while entries are genuinely hidden past it, so a list short enough to fit — anything under ~11 entries at 812px — shows neither and this needs no breakpoint of its own and cannot leak upward. The ground is --cz-paper-2, not --cz-paper: .cz-toc fills itself with paper-2 at this width, so paper would print a white band across a grey panel. Keyboard reach needs no tabindex and no role. WCAG 2.1.1 asks that a scrolling region be operable from the keyboard; the only content here is links, so Tab moves through them and the browser scrolls each into view. The two diagram scrollers the audit flagged fail that test because their content is drawn, not focusable. This one does not. */ .cz-toc.is-open .cz-toc__list { display: block; max-height: min(58vh, 520px); overflow-y: auto; overscroll-behavior-y: contain; --cz-toc-shadow: rgba(8, 10, 13, .15); background: linear-gradient(to bottom, var(--cz-paper-2), transparent) 0 0 / 100% 26px no-repeat local, linear-gradient(to top, var(--cz-paper-2), transparent) 0 100% / 100% 26px no-repeat local, radial-gradient(farthest-side at 50% 0, var(--cz-toc-shadow), transparent) 0 0 / 100% 13px no-repeat scroll, radial-gradient(farthest-side at 50% 100%, var(--cz-toc-shadow), transparent) 0 100% / 100% 13px no-repeat scroll; } .cz-toc__meta { display: none; } .cz-reading__cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .cz-reading__cta p { margin: 0; flex: 1 1 220px; } .cz-reading__cta .cz-btn { width: auto; } } @media (max-width: 620px) { .cz-postnav { grid-template-columns: 1fr; } .cz-postnav__next { text-align: left; } /* Load-bearing only outside .cz-reading__body — placement.css:103 already releases it there at (0,2,0). It is what frees the dossier and free zone prose from the 40rem measure on a phone. */ .cz-prose { max-width: none; } /* The rail CTA reverts to a stack, and its button to the full width every other button on a small phone already has. The ≤1000px rule above lays this block out as a wrapping flex row. That is right for a tablet and wrong here: at 375px the CTA's inner box is 301px (343 - 2x20px padding - the 2px gold border), so `flex: 1 1 220px` puts the kicker on one line and the sentence on the next regardless, and the only thing the row still does is leave the button at its intrinsic width, stranded against the left edge underneath two full-width paragraphs. That is the client's "no proper allignment" on the one control in the rail he is meant to press. main.css:4197 already makes every .cz-btn full width below 420px. This button was the single exception on the page, and the reason is in this file: `.cz-reading__cta .cz-btn { width: auto }` at (0,2,0) out-specifies main.css's `.cz-btn` at (0,1,0). Corrected here rather than by deleting the ≤1000px rule, which is still correct for 621–1000px, and set at 620 rather than 420 so the button and .cz-postnav collapse on the same line. article.css:508 keeps its `min-height: 48px` — it declares no width, so there is nothing to fight. Grid, not block: the ≤1000px rule zeroes the paragraph margins and hands the rhythm to the gap, and that stays true here. `align-items: stretch` restores the initial value over the `center` inherited from that rule — inert either way in a grid whose rows are sized to their single item, and declared so the block reads as what it is rather than as flex leftovers. */ .cz-reading__cta { display: grid; align-items: stretch; gap: 12px; } /* 12.5px is a DESKTOP-RAIL size. The base rule shrinks this button a point under main.css's own 13.5px because the rail it sits in is 250px wide and the label would otherwise wrap. There is no 250px rail at this width — the block is the full column — so the shrink buys nothing and leaves the one action in the rail set smaller than the sentence above it. Returned to the size every other button on the site uses; measured, "Talk to a consultant" is ~138px of label plus 10px gap, a 17px arrow and 52px of padding = 217px inside a 301px button at 375px, so it cannot wrap. */ .cz-reading__cta .cz-btn { width: 100%; justify-content: center; font-size: 13.5px; } } /* ---------- Bleeding into the margin column ---------- Prose sits at a 74ch measure because that is what reads well. Anything that is not prose — a chapter opener, a wide comparison table — has no reason to obey it, and looked stranded with 400px of empty column beside it. These elements extend across the margin column instead. The arithmetic is the margin column plus the grid gap, which is why both are declared as custom properties on .cz-reading. This list reads as three selectors and behaves as one. Measured 31 Aug, so nobody "fixes" the other two and undoes a deliberate decision: .cz-tablewrap bleeds — margin-right computes -387.2px at 1600px. .cz-chapter computes 0px. article.css:663 overrides it at the same (0,2,0) and later, on purpose ("rule openers are type, not imagery"), and --rule is the only style cz_open_chapter() is ever called with (08 14.11). No chapter bleeds. Intended. .cz-bleed 0 emitters in PHP and JS. .cz-stat is deliberately absent too — figures.css:213 pins it to the prose column. 08 5.9 still says it "bleeds into the margin column like the strip"; that sentence is stale and the code is right. Above ~1675px this does not reach the container edge. Numbers and cause are in the grid comment at the top of this file. */ .cz-reading__body .cz-chapter, .cz-reading__body .cz-tablewrap, .cz-reading__body .cz-bleed { margin-right: calc(-1 * (var(--cz-margin-col) + var(--cz-read-gap))); } /* Open-ended on purpose, and the one place in this file where that is safe: zero is the correct margin at every width below 1400px, phones included, because the third column is gone in both bands underneath. It has to reach 375px — the negative margin above is still in scope there, and left in place it would drag every table 387px off the right of a phone screen. Matches the 1400px boundary article.css uses to unbleed the strip and pair figures, so the two never disagree about which side of it they are on. */ @media (max-width: 1400px) { .cz-reading__body .cz-chapter, .cz-reading__body .cz-tablewrap, .cz-reading__body .cz-bleed { margin-right: 0; } }