/* ───────────────────────────────────────────────────────────────────────────── DM in the PM — composition layer over the Claude Design export. EVERY RULE HERE NEEDS !important. The export carries an inline style="" on essentially every element, and an inline declaration beats any stylesheet rule that is not marked. This is not defensive habit: an unmarked display:none once lost to an element's own display:flex and collapsed a nav to 0px wide - pixel-identical in a screenshot, with four links still in the tab order pointing at things nobody could see. Assert the COMPUTED value in a browser after changing anything here. ───────────────────────────────────────────────────────────────────────────── */ /* ── always on ─────────────────────────────────────────────────────────────── */ /* The disclosure panels carry inline display:flex, so [hidden] alone loses. */ [hidden] { display: none !important; } /* COLOUR BACK IN THE PHOTOGRAPHS. VJ, 15 Sep 2026: "make all the photos more colorful, bring the color back". The export washed every plate with grayscale(.55-.8) plus sepia on half of them, so Dan's red light and the blue painting read as brown. This replaces the whole inline filter rather than adding to it: a touch of contrast keeps the after-dark punch, saturate lifts the real colour. The inline `transition: filter 1s` still applies. */ picture img { filter: saturate(1.15) contrast(1.08) !important; } /* Pages that do not exist yet: present, legible, plainly not a link. */ [data-pending] { opacity: .5 !important; cursor: default !important; } /* Nothing in the export acknowledged a press, and on a phone there is no hover to fall back on - silence between tap and response reads as "it did not register". Transform and opacity only. */ /* THE !important IS LOAD-BEARING AND WAS MISSING. 94 elements carry an inline `transition`, in a dozen combinations, and an unmarked rule loses to every one of them: the Book Dan pill computed `background, color 0.3s` and the :active scale would have snapped, or crawled at the 0.4-1s some of them declare. Measured, not assumed - the computed transitionProperty said `background, color` while this file said `transform`. The property list keeps what these controls actually animate (background, colour, border) and adds a fast transform, so nothing the export intended is flattened. Plates carry their own `filter 1s, transform 1s` and are not controls, so they are untouched. */ a, button, [role="button"] { transition: transform .16s cubic-bezier(.2, .8, .3, 1), background .3s, color .3s, border-color .3s !important; } a:active, button:active, [role="button"]:active { transform: scale(.97) !important; } /* KEYBOARD FOCUS. Measured 12 Sep 2026: the site had ZERO :focus rules of any kind, across 48 controls - so a keyboard visitor had no idea where they were. WCAG 2.4.7. The ring is the accent already in the palette rather than the browser default blue, offset so it reads on both the ink ground and the light Book Dan panel, and :focus-visible so a mouse press does not leave it behind. */ a:focus-visible, button:focus-visible, [role="button"]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #FFC400 !important; outline-offset: 3px !important; border-radius: 2px; } /* Some controls sit on the gold pill itself, where gold-on-gold would vanish. */ [data-nav-cta]:focus-visible, [data-booking-send]:focus-visible { outline-color: #060509 !important; } @media (prefers-reduced-motion: reduce) { a, button, [role="button"] { transition: none !important; } a:active, button:active, [role="button"]:active { transform: none !important; } /* THE EXPORT'S REDUCED-MOTION RULE DOES NOT REACH THE REVEALS, and measuring is the only way to find that. It sets animation-duration to .001ms, which correctly stops all 34 infinite loops - the pulses, the marquee, the flicker, the equaliser. But 31 elements here animate on `animation-timeline: view()`, and a SCROLL timeline ignores duration entirely: progress comes from scroll position, not time. So a motion-sensitive visitor still got 31 elements sliding and scaling past them. Handing the timeline back to time is what fixes it: with `auto`, the export's own .001ms duration finally applies, and `animation-fill-mode: both` lands each element on its `to` state immediately. Content is present, nothing moves. Measured both ways afterwards. */ * { animation-timeline: auto !important; } } /* HOVER IS NOT A THING A FINGER DOES. The export ships `a:hover{color:#C9A24B}` and no `(hover: hover)` guard anywhere, and on a touch screen :hover LATCHES after a tap - so tapping any link on this page left it gold until you tapped something else. It reads as a selection state the site never meant to have, and nothing measures it: the colour is correct, the contrast is fine, the target is 44px. It is only wrong to a thumb. `:active` already carries the press feedback (scale .97 at 160ms), which is the state a finger should get. So on touch, hover simply stops existing. */ @media (hover: none), (pointer: coarse) { a:hover { color: inherit !important; } [data-band-item]:hover, [data-nav-link]:hover, [data-footer] a:hover { color: inherit !important; } } /* An with no bitmap paints its alt text/* An with no bitmap paints its alt text - a wall of words where the photographs should be. Give it the page's ink and hide only the visual fallback; the alt attribute stays in the accessibility tree. */ img { background-color: #0b0910; color: transparent; } /* ── safe areas ──────────────────────────────────────────────────────────────── The nav is sticky at top:0 and two layers are fixed. Without these the nav sits under the Dynamic Island, and the footer under the home indicator. No media query fires for a hardware cutout, so no emulator will show this - it needs the real Simulator. */ nav { padding-top: calc(15px + env(safe-area-inset-top)) !important; padding-left: calc(clamp(14px, 3.5vw, 52px) + env(safe-area-inset-left)) !important; padding-right: calc(clamp(14px, 3.5vw, 52px) + env(safe-area-inset-right)) !important; } [data-band] { padding-left: calc(16px + env(safe-area-inset-left)) !important; padding-right: calc(16px + env(safe-area-inset-right)) !important; } [data-footer] { padding-bottom: calc(22px + env(safe-area-inset-bottom)) !important; padding-left: calc(clamp(18px, 3.5vw, 52px) + env(safe-area-inset-left)) !important; padding-right: calc(clamp(18px, 3.5vw, 52px) + env(safe-area-inset-right)) !important; } /* LANDSCAPE IS THE ORIENTATION THIS RULE EXISTS FOR. With viewport-fit=cover the page is edge to edge, and in landscape the Dynamic Island is on a SIDE - so the hero's own copy and the privacy notice's text column need the horizontal insets, not just the chrome. A top-inset rule alone would read as correct on every emulator and put the headline under the cutout on a real phone held sideways. */ header[data-screen-label="Hero"] > div:last-of-type, main[data-prose] { /* ADD to the padding that is already there. NEVER REPLACE IT. The first version of this rule set padding-left to env(safe-area-inset-left) alone - and in PORTRAIT that inset is zero, so an !important rule meant to protect content from a cutout instead deleted the hero's 18-52px of horizontal padding and the privacy notice's text column inset. "AFTER DARK" and "DAN" sat flush against the glass. Nothing in the numeric sweep saw it: it clips no control and overflows no text, so mobile-audit read 0/0/0 at every width. A real iPhone showed it in one frame. The value below is the export's own clamp, which both surfaces already used. */ padding-left: calc(clamp(18px, 3.5vw, 52px) + env(safe-area-inset-left)) !important; padding-right: calc(clamp(18px, 3.5vw, 52px) + env(safe-area-inset-right)) !important; } main[data-prose] { padding-bottom: calc(clamp(60px, 10vh, 130px) + env(safe-area-inset-bottom)) !important; } /* NOT on
itself on the home page. That element is a STRUCTURAL wrapper added for the landmark, and it contains the full-bleed hero: horizontal padding on it inset the entire photograph, leaving a black gutter down the left of the image and bleeding it off the right. The first fix for the missing hero padding created that, which is why the rule is scoped to the PROSE column now. A safe-area inset belongs on the block that holds the words, never on a wrapper that also holds something meant to touch the glass. */ /* ── tap targets ─────────────────────────────────────────────────────────────── 35 of 48 controls measured under 44px, most of them 11px tall. Every one is a standalone control rather than a link inside a sentence, so growing them is safe - checked before writing this, not assumed. */ /* WIDTH ALONE CANNOT SEE A PHONE IN LANDSCAPE. An iPhone on its side is 844px wide - past every mobile breakpoint - and still a thumb on glass. So this block asks about the INPUT as well as the width: (pointer: coarse) is true on phones and tablets in any orientation and false on a mouse-driven desktop, which is the distinction the 44px rule actually cares about. Verified under CDP touch emulation at 844x390, not assumed from the query text. */ @media (max-width: 820px), (pointer: coarse) { [data-band-item], [data-footer] a, [data-nav-cta], [data-nav-link], [data-row] a, [data-chip], #work a, #dates a, [data-toggle], #listen a, header a { min-height: 44px !important; display: inline-flex !important; align-items: center !important; } /* The booking form ships COLLAPSED, so its ten controls were in no earlier measurement and sat at 42px - two under the floor, and invisible until the audit learned to open the disclosures first. The textarea is excluded: it is four rows tall already. */ [data-booking-form] input, [data-booking-form] select { min-height: 44px !important; } /* PROSE LINKS ARE THE ONE CASE min-height CANNOT FIX. A link inside a sentence is an inline box: min-height does nothing to it, and turning it inline-flex would break the line. Vertical padding DOES enlarge an inline element's hit box without changing line layout, which is what a thumb needs. Three of these are mine - the privacy link under "Send inquiry" and the two inside the notice itself - and they measured 20-27px tall. */ main p a, main li a, [data-booking-form] ~ p a, [data-booking-send] ~ p a { padding-block: 11px !important; /* the hit box grows upward and downward; the text does not move */ } /* The credit line is a cross-site signature at a fixed size. Never grown. */ /* The credit line is a cross-site signature at a fixed size. Never grown. */ [data-sc-name="Pchol Kollektiv Credit"] * { min-height: 0 !important; } /* THE BAND COMPACTS AT THE SAME BREAKPOINT AS THE TAP TARGETS, and that pairing is the whole point: growing its items to 44px while they were still allowed to wrap sent 768 to 227px of chrome - worse than the fault being fixed. A touch-size rule and the layout that has to absorb it belong in one block. */ [data-band] { gap: 14px !important; padding-top: 0 !important; padding-bottom: 0 !important; font-size: 9.5px !important; letter-spacing: .16em !important; flex-wrap: nowrap !important; overflow-x: auto !important; justify-content: flex-start !important; scrollbar-width: none; } [data-band]::-webkit-scrollbar { display: none; } [data-band-item] { white-space: nowrap !important; flex: 0 0 auto !important; } [data-band-item] [data-tail] { display: none !important; } /* Same reason: the nav must not wrap once its children are 44px tall - and the rule has to reach the INNER box, because flex-wrap on