, then exempt the exceptions. Specificity is the safety mechanism — this selector is (0,0,2), so all 13 deliberately-centred patterns (.badges-sub, .press-harvard, .ti-lede, .solp-lead, .off-note, .ty-lede, .cta-band p …) still out-specify it and keep their design alignment. They were enumerated first, with probe-align.mjs, rather than assumed. Justifying a one-line block is a no-op — the last line of a justified block is never stretched, and a single-line block is all last line — so the blast radius is exactly the multi-line prose Derren is asking about. That is why "over-justify rather than under-justify" is safe to follow literally here. hyphens:auto is not optional: justified text without hyphenation opens rivers of white space at narrow widths. */ main :is(p, li, dd){ text-align:justify; text-justify:inter-word; -webkit-hyphens:auto; hyphens:auto; } /* Structural lists are navigation, not prose. A wrapped contents row or credential line stretched to both margins reads as a layout bug. */ main :is(.toc, .geo-toc, .el-index, .blg-pager, .register-list, .cred-list, .trust-line, .badge-row, .persona-grid, .breadcrumbs, .press-card, .press-grid, .press-quote, .press-issn, .dj-actions, .dj-act, .yt-card, .yt-grid, .zoomlb) :is(p, li), main :is(.toc, .geo-toc, .el-index, .blg-pager, .register-list, .cred-list) li{ text-align:left; -webkit-hyphens:manual; hyphens:manual; } /* Never justify short display copy — a card blurb or a pull quote set justified opens gaps you can drive a bus through. 2026-07-29: .solp-lede / .solp-sub / .geo-sub / .article li were on this list and have been REMOVED from it deliberately. The lede is the first paragraph under every H1 — large, ragged, and the single most likely thing Derren was looking at when he said justification was missing. His instruction outranks the typographic preference; hyphens:auto keeps it clean. */ .article .a-excerpt, .article figcaption, .article blockquote p{ text-align:left; -webkit-hyphens:manual; hyphens:manual; } /* Item 10, Derren 2026-07-28: "the reverse side of these tiles need to be justified...as is the rest of the website....justify justify justify pls" */ .flip-back p{ text-align:justify; text-justify:inter-word; -webkit-hyphens:auto; hyphens:auto; } /* Static press row for inner pages (the homepage uses the scrolling .marquee; a second marquee on a bio page would fight the reading rhythm). Same .press-mark glyphs, laid out as a single wrapped row. */ .press-row{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 40px; } .press-row .press-mark{display:inline-flex;align-items:center} .press-row .press-mark svg{height:26px;width:auto;display:block} .press-row .press-mark img{height:30px;width:auto;display:block} @media (max-width:640px){ .press-row{gap:12px 26px} .press-row .press-mark svg{height:20px} .press-row .press-mark img{height:24px} } /* Single HTJ.Tax + Moores Rowland International lockup (supplied by the client 2026-07-28, replacing the two separate logo pills). Sized so the "member of Moores Rowland International" sub-line stays legible; the two-pill version made the footer look misaligned. */ .footer-logos .logo-pill-lockup{padding:10px 16px} .footer-logos .logo-pill-lockup img{height:96px} @media (max-width:640px){ .footer-logos .logo-pill-lockup img{height:76px} } /* ---------- shared trust band (htj_trust_block / ) ---------- Money pages were carrying the argument with none of the proof: press marks, Derren's credentials and the since-1980 line all lived on the homepage only. One block, one stylesheet, every page. */ .trust-band .trust-creds{margin-top:34px} .trust-band .trust-creds-lead{ font-family:var(--f-head);font-size:15px;letter-spacing:.04em; color:var(--navy);margin:0 0 16px; } .trust-band .cred-list{ list-style:none;margin:0;padding:0; display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 40px; } .trust-band .cred-list li{ display:flex;align-items:flex-start;gap:10px;margin:0; font-size:15px;line-height:1.5;color:var(--ink); } .trust-band .cred-list li svg{width:19px;height:19px;flex:0 0 19px;margin-top:3px} .trust-band .trust-line{ margin:22px 0 0;padding-top:18px;border-top:1px solid var(--line,#e7e9f0); font-family:var(--f-head);font-size:13px;letter-spacing:.1em; text-transform:uppercase;color:#5c6690; } .trust-band .trust-line .dot{margin:0 10px;color:var(--gold)} @media (max-width:760px){ .trust-band .cred-list{grid-template-columns:1fr} .trust-band .trust-line{display:flex;flex-wrap:wrap;gap:4px 0} .trust-band .trust-line .dot{margin:0 8px} } /* --- memberships + verified reviews inside the shared trust band ----------- Added 2026-07-29. The band now stacks four layers of proof, so each one needs a visible seam or it reads as one undifferentiated wall of logos. Each layer gets a hairline rule and its own quiet label; the label is what tells a reader these are memberships rather than more press. */ .trust-band .trust-members{margin-top:40px;padding-top:34px;border-top:1px solid rgba(11,26,74,.10)} .trust-band .trust-sublabel{ font-family:var(--f-head);font-size:12.5px;font-weight:500;letter-spacing:.2em; text-transform:uppercase;color:#5a6491;text-align:center;margin:0 0 26px; } /* The homepage badge wall is the hero of its own section and can breathe. In the middle of a long read it is a supporting element, so the CARD is scaled down with the caption and mark — .badge-card is a fixed box, so shrinking only the artwork would leave twelve hollow rectangles. Same badges, less shouting: five to a row here against the homepage's four. The caption row shrinks with everything else, but it stays FIXED so the marks keep sharing a line. */ .trust-band .badge-row{gap:16px} /* Six columns => twelve is an exact 6x2, at every container width. */ .trust-band .badge-row{grid-template-columns:repeat(6,1fr);gap:16px} .trust-band .badge-card{height:150px;padding:14px 11px 15px;grid-template-rows:48px 1fr;gap:8px} .trust-band .bc-cap{font-size:11.5px;line-height:1.22} .trust-band .trust-reviews{margin-top:40px} @media (max-width:760px){ .trust-band .trust-members{margin-top:30px;padding-top:26px} .trust-band .trust-sublabel{letter-spacing:.14em;margin-bottom:18px} } @media (max-width:1080px){ .trust-band .badge-row{grid-template-columns:repeat(4,1fr)} } @media (max-width:760px){ .trust-band .badge-row{grid-template-columns:repeat(3,1fr);gap:12px} } @media (max-width:520px){ .trust-band .badge-row{grid-template-columns:repeat(2,1fr);gap:12px} .trust-band .badge-card{height:140px;padding:12px 10px 13px;grid-template-rows:46px 1fr;gap:7px} .trust-band .bc-cap{font-size:10.5px;line-height:1.2} } .post-video-cap{ font-family:var(--f-head);font-size:14px;letter-spacing:.05em; color:var(--navy);margin:0 0 10px; } /* Nested contents entries. The live page lists all 20 destinations flat; a flat 20 in a two-column box reads as noise, so the nine Willfulness sub-sections sit under their parent instead. Same coverage, less shouting. */ .geo-toc .toc-sub{list-style:none;margin:8px 0 4px;padding:0 0 0 26px;columns:1} .geo-toc .toc-sub li{margin:0 0 7px;font-size:13.5px;counter-increment:none} .geo-toc .toc-sub a{color:#4a5480} .geo-toc .toc-sub a::before{content:"— ";color:var(--gold-ink,#b9832a);font-size:11px} .geo-toc .toc-sub a:hover{color:var(--gold-ink,#b9832a)} /* A video dropped into a full-width prototype section would stretch the 480px YouTube thumbnail across the whole container and go soft. Cap it at the thumbnail's own useful width; the blog's narrower article column is unaffected because it never reaches this size. */ .section .container > .post-video{max-width:640px;margin-left:0} /* Country headings inside a "Read more" fold need their own rhythm - without this the first one collides with the summary row. */ .geo-more-body h3{margin:26px 0 10px} .geo-more-body > h3:first-child{margin-top:20px} /* ============================================================================ ACCORDION SUMMARY — split-title fix (round 38) ---------------------------------------------------------------------------- The page-level accordions lay

out as display:flex; justify-content:space-between which silently assumes the summary has exactly TWO flex items: the title text and the ::after "+" marker. Put a link inside a title and it becomes three — so space-between throws the title's own words to opposite margins. On /us-pre-immigration-tax-planning/ item 5 rendered as "5. Foreign Tax Credit +" 1 summary of 45 on that page; the same latent trap sits on all 24 pages that use this pattern, waiting for anyone to add a link to a heading. Fix the assumption, not the instance: pack the title left and push ONLY the marker right. Any number of inline children now behaves. Specificity note: these rules live in the stylesheet () while the page rules are inline in the body, so equal specificity would lose on document order. `:is(...)` adds a class-level weight, making these (0,1,2) against the page's (0,1,1). Do not simplify this to a bare `summary` selector — it will silently stop applying. */ main :is(.geo-why, .faq-item, .geo-faq, .geo-law) summary{ justify-content:flex-start; /* The flex `gap` existed to hold the marker off the title. margin-left:auto does that now, and leaving it would indent a split title by 16px against its single-text-node neighbours. */ gap:0; } main :is(.geo-why, .faq-item, .geo-faq, .geo-law) summary::after{ margin-left:auto; padding-left:16px; flex:0 0 auto; } /* ============================================================================ DERREN — PRINCIPAL PAGE COMPONENTS (round 38c) ---------------------------------------------------------------------------- All of this lives here rather than in a