cannot match it however it is written; a prose link always is. `p a:not([class])` over plain `p a` is deliberate: a link in prose that carries a class — a .btn, say — has already opted out. */ .lk, p a:not([class]){ color:var(--cy2); font-weight:600; text-decoration:none; padding-bottom:1px; background-image:linear-gradient(90deg,var(--red),var(--cy)); background-repeat:no-repeat; background-position:0 100%; background-size:0% 2px; transition:background-size .34s var(--ease),color .2s var(--ease); } .lk:hover,.lk:focus-visible, p a:not([class]):hover, p a:not([class]):focus-visible{ background-size:100% 2px; } html:not([data-theme="dark"]) .lk:hover, html:not([data-theme="dark"]) p a:not([class]):hover{ color:var(--red2); } /* --- 3. .go — the arrow already slides; the tracking opens with it ------ */ .go{transition:color .25s var(--ease),letter-spacing .3s var(--ease)} .go:hover,.go:focus-visible{letter-spacing:.18em} /* --- 4. Ledger rows — an accent rail grows down the row ---------------- The row already tints and its Inquire label already lifts. The rail marks which row is live at a glance, which matters most on the 14-row books ledger where the tint alone is faint. Colour is inherited per ledger via the existing .ledger.grn overrides, so Sharia runs green and Finance runs yolk without another rule. */ .led-r{position:relative} .led-r::before{ content:''; position:absolute; left:0;top:0;bottom:0;width:3px; background:currentColor; transform:scaleY(0); transform-origin:top; transition:transform .32s var(--ease); } .ledger .led-r{color:var(--ykd)} .ledger.grn .led-r{color:var(--grnd)} .led-r:hover::before,.led-r:focus-visible::before{transform:scaleY(1)} /* --- 5. Case cards — the plate breathes -------------------------------- */ .ccard{transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)} .ccard:hover{box-shadow:var(--cardsh)} .cthumb img,.cthumb img.real{transition:transform .6s var(--ease)} .ccard:hover .cthumb img,.ccard:hover .cthumb img.real{transform:scale(1.055)} .ccard h3{transition:color .25s var(--ease)} .ccard:hover h3{color:var(--cy2)} /* --- 6. Sector bands --------------------------------------------------- */ .tri{transition:background .3s var(--ease)} .tri:hover{background:var(--pan2)} /* --- 7. A chosen chip keeps an edge in greyscale ----------------------- Selection currently reads through colour and background alone. A 3px inset edge on the leading side survives greyscale, low vision and the washed-out projector a client meeting usually runs on. */ .chip.on{box-shadow:inset 3px 0 0 0 var(--red)} .dchip.sel{box-shadow:inset 3px 0 0 0 var(--cy)} .dchip.ssel{box-shadow:inset 3px 0 0 0 var(--grn)} .dchip.ysel{box-shadow:inset 3px 0 0 0 var(--yk)} /* --- 8. The mark in chrome --------------------------------------------- The mark is the founder's portrait inside the brand hexagon — what the site shipped with, and what the client asked to have back. It had been replaced by the M/W monogram masked to currentColor, which hid the portrait outright (@supports .brandmark img{display:none}). The monogram is still the brand's mark: it stays on /404.html and it is what the favicon, the OG card and the manifest are built from. It is just not the header. The hexagon is drawn as two clipped layers rather than border + clip-path. clip-path clips the border too, so a bordered hexagon loses its top and bottom edges and keeps only the two vertical sides — a rectangle's outline with the corners sliced off. An inner layer inset by 1px gives a true 1px hexagon frame. --hex is defined once in :root so the mark and the theme toggle cannot drift apart. Browsers without clip-path get a plain 40px square portrait: the photograph still shows. The rule it replaced could only fail to a hidden image. */ .brandmark::before{background:var(--line)} .brandmark img{object-position:center 18%} /* The theme toggle: the same hexagon, now carrying the mark itself. mark-ink is the black face for the bone page, mark-bone the white face for the charcoal one, so the glyph is the brand at rest and the theme in passing. Both files are 900x573 and OPAQUE, which is worth stating because it is easy to get wrong from the outside: they are RGBA, but measuring the alpha channel through a canvas puts ink across the whole frame — x 0..899, y 0..572 — so the plate is a filled field, not a transparent monogram. Only the favicon is genuinely transparent (its ink sits at x 51..460, y 126..386 of 512). That is why the crop is object-fit:contain and not cover. cover takes the middle square of the plate, which cuts the monogram's outer wings off at the hexagon's vertical edges — bold, but a form sliced in half. contain fits the whole plate, so the monogram reads complete. The bands it leaves above and below cost nothing, because the plate's own field matches the page in each theme, and the inner layer is filled with --bg so the gap and the field agree either way. Which face shows is a CSS decision keyed off html[data-theme], not script: the theme is already on the element before first paint, so the right mark is there from the first frame with no flash and nothing to keep in sync. The button's aria-label still carries the state and the action, and so does its title, because a mark alone no longer says "switch to dark". */ .hx{position:relative;display:block;width:24px;height:24px;flex:none} .hx::before{content:'';position:absolute;inset:0;background:var(--line);clip-path:var(--hex);transition:background .25s var(--ease)} .hxi{position:absolute;inset:1px;background:var(--bg);clip-path:var(--hex);overflow:hidden} .hxi img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 50%} .hx-d{display:none} html[data-theme="dark"] .hx-l{display:none} html[data-theme="dark"] .hx-d{display:block} .tgl button:hover .hx::before{background:var(--cy)} /* --- 9. Anchor targets clear the fixed header --------------------------- */ :target,h2[id],h3[id],section[id],div[id]{scroll-margin-top:100px} /* --- 10. Print — keep the record, drop the chrome ----------------------- */ @media print{ .bar,.menu,.drawer,.scrim,.skip,.pdots,.hix,#burger{display:none!important} .rv,.packflow .pn{opacity:1!important;transform:none!important} body{background:#fff;color:#000} body::before,body::after{display:none} a[href^="http"]::after{content:" (" attr(href) ")";font-size:10px;color:#555} .sec{padding:20px 0;break-inside:avoid} } /* --- 11. Corridor list ------------------------------------------------- The travel page lists destinations as plain text. It was reusing .dchip, which is the diagnostic's selectable chip: it lifts on hover and stands 44px tall, so a static list read as clickable controls that did nothing. .corr keeps the shape and drops every interactive affordance. */ .corr{ font:600 11px var(--mono); letter-spacing:.08em; text-transform:uppercase; border:1px solid var(--hair); background:var(--pan); color:var(--mut); padding:9px 13px; display:inline-block; }