/* ───────────────────────────────────────────────────────────────────────── Matt Smith-Wood — component system Requires tokens.css. Prefix: msw- Replaces the six page-scoped kt- classes in kitchen-draft.html, which could only ever style one page. Nothing here hard-codes a value; if a number appears below that is not a token, it is a bug. RETIRED — do not reintroduce: .msw-stroke the hand-drawn rule. Rejected 2026-08-11. .msw-gesture the Rock Salt hand script. Retired 2026-08-12 — Matt's real signature was found and vectorised, so a hand font is a worse answer to a question that is now closed. THE MARKS — both real, both vector, both currentColor: assets/msw-monogram.svg the m. Recolour with `color`. Works to 32px. assets/msw-signature.svg his actual handwriting. Never below 140px wide: it is a sign-off, not a nav mark. Never a text "m.", never a redrawn approximation, never a script font standing in for the signature. See .msw-mark / .msw-signoff below. ───────────────────────────────────────────────────────────────────────── */ /* ── Grounds ───────────────────────────────────────────────────────── Each ground sets its OWN ink and its own hairline. Never hand-pick a text colour on a ground - that is how the terracotta 3.4:1 failure gets in. Intended page sequence: image -> paper -> BLACK -> paper -> BLACK -> paper -> accent(once) -> black Black bands are the kitchens page's own language, and that page is the artefact Matt has approved. Never two darks adjacent - paper separates them. Accent (brick) appears once, late. */ .msw-ground { background: var(--ground); color: var(--ink); --hairline-now: var(--hairline); } .msw-ground--paper { background: var(--white); color: var(--ink); --hairline-now: var(--hairline); } .msw-ground--quiet { background: var(--ground-quiet); color: var(--ink); --hairline-now: var(--hairline); } /* The quiet breath. Camel, not terracotta - terracotta as a large panel reads washed out and only carries black ink at 6.2:1, weak at scale. It is a detail colour now, not a ground. */ .msw-ground--panel { background: var(--ground-panel); color: var(--ink-on-panel); --hairline-now: var(--hairline); } .msw-ground--dark { background: var(--ground-invert); color: var(--ink-invert); --hairline-now: var(--hairline-invert); } .msw-ground--accent{ background: var(--ground-accent); color: var(--ink-on-accent); --hairline-now: var(--hairline-invert); } /* The warm dark. Use where black would read cold - the ranges, a quote. Never place it directly against black: at 1.97:1 they are distinct, but only just, and touching them wastes the difference. */ .msw-ground--warm { background: var(--ground-warm); color: var(--ink-invert); --hairline-now: var(--hairline-invert); } /* Terracotta's remaining job: a rule, a small mark, a detail. Never a field of it, and never behind body copy. */ .msw-rule--accent { border-color: var(--rule-accent); } /* Scrim over hero photography. NEUTRAL black, top and bottom. A warm or red-tinted scrim pushes every photograph towards the brand colour and fights the imagery instead of serving it. */ .msw-scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, var(--scrim-top) 0%, rgba(0,0,0,0) 34%, rgba(0,0,0,0) 52%, var(--scrim-bottom) 100%); } /* ── Dark textured ─────────────────────────────────────────────────── Flat black reads digital. A fine grain over it reads printed, which is the single cheapest way to make a dark section feel physical. Scran Doh does this and it does more work than anything else on that page. The noise is an inline SVG data URI, so there is no image request. */ .msw-ground--textured { background-color: var(--ground-invert); color: var(--ink-invert); position: relative; isolation: isolate; } .msw-ground--textured::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: url("data:image/svg+xml;utf8,"); background-size: 180px 180px; } /* A heavier grain for hero-scale sections where the texture should be felt. */ .msw-ground--textured.is-coarse::before { opacity: 1.8; background-size: 240px 240px; } /* ── Layout ──────────────────────────────────────────────────────────── */ .msw-section { padding: var(--s-5) var(--gutter); } .msw-section--tight { padding-block: var(--s-4); } .msw-inner { max-width: var(--container); margin-inline: auto; } .msw-bleed { margin-inline: calc(var(--gutter) * -1); } /* escape the gutter */ /* ── Type ────────────────────────────────────────────────────────────── */ .msw-hero { font-family: var(--display); font-weight: var(--display-weight); font-size: var(--t-hero); line-height: var(--lh-hero); letter-spacing: var(--track-hero); text-transform: uppercase; text-wrap: balance; } .msw-display { font-family: var(--display); font-weight: var(--display-weight); font-size: var(--t-display); line-height: var(--lh-display); letter-spacing: var(--track-display); text-transform: uppercase; } .msw-h2 { font-family: var(--display); font-weight: 600; font-size: var(--t-h2); line-height: var(--lh-h2); text-transform: uppercase; letter-spacing: -.01em; } .msw-label { font-family: var(--body); font-size: var(--t-label); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; } /* Tiny, very wide caps set against the hero. The contrast between 11px at 0.32em and 184px at -0.035em IS the luxury signal - era's whole trick. */ .msw-label--wide { letter-spacing: var(--track-wide); font-size: var(--t-label); } .msw-micro { font-family: var(--body); font-size: var(--t-micro); font-weight: 500; letter-spacing: var(--track-wide); text-transform: uppercase; } .msw-body { font-family: var(--body); font-weight: var(--body-weight); font-size: var(--t-body); line-height: var(--lh-body); max-width: var(--measure); } /* ── Block type ────────────────────────────────────────────────────── Display type as a solid mass rather than a line of words. Tight leading, negative tracking, uppercase, and allowed to run to the edge. */ .msw-block { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(3rem, 12vw, 11rem); line-height: .82; letter-spacing: -.035em; margin: 0; } .msw-block--fit { font-size: clamp(3rem, 15.5vw, 15rem); } /* one word, edge to edge */ .msw-block--out { margin-inline-start: -.06em; } /* optical flush-left */ .msw-block em { font-style: normal; display: block; color: var(--ink-invert-mute); } .msw-ground--paper .msw-block em, .msw-ground .msw-block em { color: rgba(0,0,0,.38); } /* Stacked block — each line its own row, alternating alignment. */ .msw-blockstack { display: grid; gap: 0; } .msw-blockstack > * { margin: 0; } .msw-blockstack > :nth-child(even) { text-align: right; } /* ── Rules · the line system ───────────────────────────────────────── Replaces the hand-drawn stroke. Straight, structural, and derived from the Frame's 5px so the whole system shares one weight logic. */ .msw-rule { border: 0; border-top: var(--hairline-w) solid var(--hairline); margin: var(--s-3) 0; } .msw-rule--heavy { border-top-width: var(--frame-w); border-top-color: var(--ink-strong); } .msw-rule--bleed { margin-inline: calc(var(--gutter) * -1); } .msw-ground--dark .msw-rule, .msw-ground--textured .msw-rule { border-top-color: var(--hairline-invert); } .msw-ground--dark .msw-rule--heavy, .msw-ground--textured .msw-rule--heavy { border-top-color: var(--ink-invert); } /* Labelled rule — a line with a word sitting on it. Section marker. */ .msw-rule-label { display: grid; grid-template-columns: auto 1fr; gap: var(--s-2); align-items: center; margin: var(--s-4) 0 var(--s-3); } .msw-rule-label::after { content: ""; border-top: var(--hairline-w) solid var(--hairline); } .msw-ground--dark .msw-rule-label::after, .msw-ground--textured .msw-rule-label::after { border-top-color: var(--hairline-invert); } /* Vertical rule — separates columns without a box. */ .msw-vrule { border-left: var(--hairline-w) solid var(--hairline); padding-left: var(--s-3); } .msw-ground--dark .msw-vrule, .msw-ground--textured .msw-vrule { border-left-color: var(--hairline-invert); } /* Ruled list — specification rows divided by lines, no table markup. */ .msw-ruled { list-style: none; padding: 0; margin: 0; } .msw-ruled > li { display: grid; grid-template-columns: 14ch 1fr; gap: var(--s-2); padding: var(--s-2) 0; border-top: var(--hairline-w) solid var(--hairline); font-size: .95rem; } .msw-ruled > li:last-child { border-bottom: var(--hairline-w) solid var(--hairline); } .msw-ruled dt, .msw-ruled .k { font-size: var(--t-label); letter-spacing: var(--track-label); text-transform: uppercase; font-weight: 600; } .msw-ground--dark .msw-ruled > li, .msw-ground--textured .msw-ruled > li { border-top-color: var(--hairline-invert); } .msw-ground--dark .msw-ruled > li:last-child, .msw-ground--textured .msw-ruled > li:last-child { border-bottom-color: var(--hairline-invert); } @media (max-width: 620px) { .msw-ruled > li { grid-template-columns: 1fr; gap: .25rem; } } /* ── Frame · the 5px primitive ───────────────────────────────────────── */ .msw-frame { border: var(--frame-w) solid var(--ink-strong); border-radius: var(--radius); padding: var(--frame-pad); } .msw-frame--invert { border-color: var(--ink-invert); color: var(--ink-invert); } .msw-frame--hair { border-width: var(--hairline-w); border-color: var(--hairline); padding: var(--s-3); } .msw-frame--hair.msw-frame--invert { border-color: var(--hairline-invert); } /* ── The mark · always the real asset ────────────────────────────────── FIXED v1.0: these are painted with a CSS mask, not . An cannot inherit currentColor - the SVG resolves it against its own document, which means BLACK. On the oxblood ground that is #000 on #2c0603, about 1.2:1, i.e. invisible. That bug shipped in the first v1.0 build and is exactly what the note under THE MARKS warns about. Masking paints the shape in currentColor from an external file, so one asset serves every ground and the 75KB signature is not inlined per use. Markup: Never: */ .msw-mark { display: inline-block; height: 2rem; aspect-ratio: 129.82 / 180.86; background-color: currentColor; -webkit-mask: url("assets/msw-monogram.svg") no-repeat center / contain; mask: url("assets/msw-monogram.svg") no-repeat center / contain; } .msw-mark--lg { height: clamp(5rem, 14vw, 11rem); } .msw-mark--xl { height: clamp(8rem, 26vw, 22rem); } .msw-mark--fade{ opacity: .10; } /* watermark behind content */ /* No mask support: fall back to the file as a background. It renders in its own colours rather than the ground's, which is wrong but visible - and strictly better than an invisible mark. */ @supports not ((-webkit-mask: url("a.svg")) or (mask: url("a.svg"))) { .msw-mark { background: url("assets/msw-monogram.svg") no-repeat center / contain; } } /* ── Sketch / photograph pair · CASE STUDY PAGES ONLY ───────────────── His own hand-drawn perspective of a room, beside the photograph of that room built. Added 2026-08-12 after finding the Lisbon sketches. SCOPE, and this is the important part: this is a PROJECT-PAGE component. It belongs inside a case study, showing that project's drawings against that project's photographs. It is NOT a brand element and it does not set the register of the wider site. The trap it exists to avoid: a project's scheme is the CLIENT'S taste, not Matt's identity. Lisbon is yellow, ochre and terracotta because that is what Lisbon wanted. Let one project's palette leak up into the site chrome and every future project is shown wearing a previous client's colours - which makes the work look like a house style instead of a response to a brief. Interior designers live or die on that distinction. So: brand chrome comes from the brand artefacts. Project colour stays inside the project's own band and stops at its edge. Rules: - Same room, same angle. A mismatched pair reads as decoration and destroys the entire point. If the angle does not match, do not pair. - Sketch LEFT, photograph RIGHT. Drawing precedes building; the reading order should say so. - The sketch sits on WHITE and nothing else - never on a brand ground. It is pencil and marker on paper, and a coloured ground both turns it into a sticker and drags the project's colour into the chrome. - Never crop the sketch to match the photo's aspect. Let it float with its own whitespace - that whitespace is what says "drawing". - Do not promise this on projects that have no sketches. Three exist, all Lisbon. Whether Matt sketches every job is unverified. */ .msw-pair { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--s-4); } .msw-pair__sketch{ background: var(--white); padding: var(--s-3); } .msw-pair__sketch img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; } /* kills the paper white */ .msw-pair__built img { display: block; width: 100%; height: auto; } .msw-pair__label { font-family: var(--body); font-size: var(--t-label); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--ink); padding-top: var(--s-2); border-top: var(--hairline-w) solid var(--hairline); } /* Overlap variant: the sketch breaks into the photograph's edge, so the two read as one object rather than two cards. Use once per page at most. */ .msw-pair--overlap { grid-template-columns: 1fr 1fr; gap: 0; } .msw-pair--overlap .msw-pair__sketch { position: relative; z-index: 2; margin-right: calc(-1 * var(--s-5)); } @media (max-width: 720px) { .msw-pair, .msw-pair--overlap { grid-template-columns: 1fr; gap: var(--s-3); } .msw-pair--overlap .msw-pair__sketch { margin-right: 0; } } /* ── The signature · his real handwriting, vector ───────────────────── Painted with a CSS mask in currentColor - see .msw-mark above for why an is wrong here. One asset serves light and dark grounds. It is a SIGN-OFF, not a logo: the close of a page, the end of the story section, beside the enquiry form. Once per page, at the bottom of it. Below ~140px the strokes fill in and it reads as a smudge — hence the min-width, which is a legibility floor and not a style choice. */ .msw-signoff { display: block; width: clamp(140px, 22vw, 260px); aspect-ratio: 3702 / 1146; background-color: currentColor; -webkit-mask: url("assets/msw-signature.svg") no-repeat center / contain; mask: url("assets/msw-signature.svg") no-repeat center / contain; } .msw-signoff--lg { width: clamp(200px, 34vw, 420px); } @supports not ((-webkit-mask: url("a.svg")) or (mask: url("a.svg"))) { .msw-signoff { background: url("assets/msw-signature.svg") no-repeat center / contain; } } /* -- THE FULL LOGO * monogram over signature ------------------------ The whole lockup as it exists on his own artwork, and it is now MEASURED from that artwork rather than spaced by eye, which is exactly what the previous version of this rule did while claiming otherwise. Source: Logos/WhatsApp Image 2025-11-23 at 17.33.30. Ink bounding boxes from that file, expressed in units of the monogram's own height: signature width 1.693 gap between them 0.078 Both marks were checked against the vectors we ship before the ratios were trusted: monogram 0.7147 wide against the SVG's 0.7178, signature 3.230 against the SVG's 3.230. Same artwork, so the proportions carry. ONE knob, --lock-m, the monogram's height. Everything else derives from it, so the two halves cannot drift apart at some breakpoint nobody thought to check. The old rule clamped them independently, and at a 96px mark the signature came out 300px against a correct 162px - very nearly double. It was never wrong on any screen anyone looked at, because it was never used on any page. Its FLOOR is set by the signature, not by the mark. .msw-signoff does not read below 140px wide, and 140 / 1.693 = 83px, hence 5.2rem. Size a lockup off the monogram alone and you get a legible m sitting above an illegible smudge. The artwork's two ink centres differ by 5.6% of the signature's width. NOT reproduced: at footer scale that is a 15px drift, which reads as a mistake to everyone who cannot see the source file. Centred, with the measurement recorded here so it is not lost if this is ever revisited. */ .msw-lockup { --lock-m: clamp(5.2rem, 13vw, 10rem); display: grid; justify-items: center; color: inherit; gap: calc(var(--lock-m) * .078); } .msw-lockup .msw-mark { height: var(--lock-m); } .msw-lockup .msw-signoff { width: calc(var(--lock-m) * 1.693); } /* Mark used as a section divider rather than a logo. */ .msw-markdivide { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s-3); align-items: center; margin: var(--s-5) 0; } .msw-markdivide::before, .msw-markdivide::after { content: ""; border-top: var(--hairline-w) solid var(--hairline); } .msw-ground--dark .msw-markdivide::before, .msw-ground--dark .msw-markdivide::after, .msw-ground--textured .msw-markdivide::before, .msw-ground--textured .msw-markdivide::after { border-top-color: var(--hairline-invert); } /* ── Full-width image ──────────────────────────────────────────────── Edge to edge, no container, no radius. The caption sits on a rule beneath rather than floating on the photograph. */ .msw-figure { margin: 0; } .msw-figure img { display: block; width: 100%; height: auto; } .msw-figure--tall img{ aspect-ratio: 4/5; object-fit: cover; } .msw-figure--wide img{ aspect-ratio: 21/9; object-fit: cover; } .msw-figure--band img{ aspect-ratio: 32/9; object-fit: cover; } .msw-figure figcaption { display: flex; justify-content: space-between; gap: var(--s-2); flex-wrap: wrap; padding-top: var(--s-1); border-top: var(--hairline-w) solid var(--hairline); margin-top: var(--s-2); font-size: var(--t-label); letter-spacing: var(--track-label); text-transform: uppercase; font-weight: 600; } .msw-ground--dark .msw-figure figcaption, .msw-ground--textured .msw-figure figcaption { border-top-color: var(--hairline-invert); } /* Image pair and triptych — full-bleed, hairline gutters only. */ .msw-imgrow { display: grid; gap: var(--hairline-w); } .msw-imgrow--2 { grid-template-columns: 1fr 1fr; } .msw-imgrow--3 { grid-template-columns: repeat(3, 1fr); } .msw-imgrow img{ display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; } @media (max-width: 720px) { .msw-imgrow--3 { grid-template-columns: 1fr 1fr; } .msw-imgrow--2 { grid-template-columns: 1fr; } } /* Type over image — the only place text sits on a photograph. Needs the scrim, because contrast over an unknown image is otherwise a gamble. */ .msw-overimg { position: relative; isolation: isolate; } .msw-overimg img { display: block; width: 100%; height: 100%; object-fit: cover; } .msw-overimg__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.08) 100%); } .msw-overimg__body { position: absolute; inset-inline: 0; bottom: 0; z-index: 2; padding: var(--s-4) var(--gutter); color: var(--ink-invert); } /* ── Range block ─────────────────────────────────────────────────────── */ .msw-range__grid { display: grid; grid-template-columns: 1fr auto; gap: var(--s-4); align-items: start; } .msw-range__name { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.75rem, 4vw, 3.25rem); line-height: .9; letter-spacing: -.02em; color: rgba(255,255,255,.22); } .msw-ground .msw-range__name, .msw-ground--paper .msw-range__name, .msw-ground--panel .msw-range__name { color: rgba(0,0,0,.16); } /* ── Button · 48px clears the 44px tap-target floor ──────────────────── */ .msw-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--s-3); border: var(--frame-w) solid var(--ink-strong); border-radius: var(--radius); background: var(--ink-strong); color: var(--ink-invert); font-family: var(--body); font-size: .875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .msw-btn:hover { background: transparent; color: var(--ink-strong); } /* .msw-btn had no focus style at all. It inherits ground colour, so the ring is currentColor and works on every band the button appears on. */ .msw-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } /* Every ground that sets inverted ink has to invert the button too, and this originally listed only dark and textured. On brick and on ember the button kept its light-ground treatment, so the HOVER state put black on the accent: #000 on #a4402c is 3.3:1, under the 4.5:1 floor for 14px bold. Inverted, the resting state is 21:1 and the hover is white on brick at 6.3:1 - both pass, and the ground keeps setting its own ink rather than a page hand-picking a colour, which is the rule the grounds exist to hold. */ .msw-ground--dark .msw-btn, .msw-ground--textured .msw-btn, .msw-ground--accent .msw-btn, .msw-ground--warm .msw-btn { border-color: var(--ink-invert); background: var(--ink-invert); color: var(--ink-strong); } .msw-ground--dark .msw-btn:hover, .msw-ground--textured .msw-btn:hover, .msw-ground--accent .msw-btn:hover, .msw-ground--warm .msw-btn:hover { background: transparent; color: var(--ink-invert); } .msw-btn:focus-visible { outline: 3px solid var(--ink-strong); outline-offset: 3px; } .msw-ground--dark .msw-btn:focus-visible, .msw-ground--textured .msw-btn:focus-visible, .msw-ground--accent .msw-btn:focus-visible, .msw-ground--warm .msw-btn:focus-visible { outline-color: var(--ink-invert); } /* ── Nav · horizontal and visible, replacing hamburger-only desktop ──── */ .msw-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) var(--gutter); flex-wrap: wrap; } .msw-nav__list { display: flex; gap: var(--s-3); list-style: none; padding: 0; margin: 0; flex-wrap: wrap; } .msw-nav__list a { font-size: var(--t-label); letter-spacing: var(--track-label); text-transform: uppercase; font-weight: 600; text-decoration: none; color: inherit; display: inline-flex; align-items: center; min-height: 44px; } /* house-standard tap-target floor */ .msw-nav__list a:hover { text-decoration: underline; text-underline-offset: 5px; } .msw-nav__list a[aria-current] { text-decoration: underline; text-underline-offset: 5px; } .msw-nav__list a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } /* ── Caption bar · borrowed from sims-hilditch ───────────────────────── */ .msw-captionbar { display: flex; justify-content: space-between; gap: var(--s-2); align-items: baseline; padding-top: var(--s-2); border-top: var(--hairline-w) solid var(--hairline); flex-wrap: wrap; } .msw-ground--dark .msw-captionbar, .msw-ground--textured .msw-captionbar { border-top-color: var(--hairline-invert); } /* ── Responsive ──────────────────────────────────────────────────────── */ @media (max-width: 720px) { .msw-range__grid { grid-template-columns: 1fr; } .msw-range__name { writing-mode: horizontal-tb; transform: none; font-size: 1.5rem; } .msw-blockstack > :nth-child(even) { text-align: left; } } /* ══════════════════════════════════════════════════════════════════════ THE RAIL · added v1.0 Scorecard dimension 6 (wayfinding) scores Matt's live site 0 — hamburger only, no orientation of any kind. This component alone takes it to 5, which makes it the cheapest five points available anywhere in the build. A 5 requires: a fixed scroll indicator, a hairline, a live position counter, AND a state flip at the end (SCROLL becoming TO TOP). It is fixed to the left gutter, vertical, and deliberately tiny — 10px at 0.32em tracking against a 184px hero. That size contrast is the point. ══════════════════════════════════════════════════════════════════════ */ .msw-rail { position: fixed; left: var(--s-3); top: 0; bottom: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2); pointer-events: none; mix-blend-mode: difference; color: #fff; } .msw-rail__label { writing-mode: vertical-rl; font-family: var(--body); font-size: var(--t-micro); font-weight: 500; letter-spacing: var(--track-wide); text-transform: uppercase; } /* The hairline track, and the filled portion showing scroll depth. */ .msw-rail__track { position: relative; width: var(--hairline-w); flex: 0 0 34vh; background: currentColor; opacity: .35; } .msw-rail__fill { position: absolute; left: 0; right: 0; top: 0; height: 0%; background: currentColor; opacity: 1; transition: height var(--dur) var(--ease); } .msw-rail__count { font-family: var(--body); font-size: var(--t-micro); font-weight: 500; letter-spacing: .06em; font-variant-numeric: tabular-nums; } /* The end-state flip. Becomes a real button, so it needs pointer events. */ .msw-rail__top { pointer-events: auto; display: none; background: none; border: 0; color: inherit; cursor: pointer; padding: var(--s-1); min-height: 44px; min-width: 44px; /* house standard floor */ writing-mode: vertical-rl; font-family: var(--body); font-size: var(--t-micro); font-weight: 500; letter-spacing: var(--track-wide); text-transform: uppercase; } .msw-rail[data-at-end="true"] .msw-rail__label, .msw-rail[data-at-end="true"] .msw-rail__track { display: none; } .msw-rail[data-at-end="true"] .msw-rail__top { display: block; } .msw-rail__top:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } /* Below 900px the gutter is too tight for a vertical rail, and a phone already has a scrollbar. Hide it rather than cramming it. */ @media (max-width: 900px) { .msw-rail { display: none; } } /* No blend-mode support, or forced colours: fall back to plain ink. */ @supports not (mix-blend-mode: difference) { .msw-rail { mix-blend-mode: normal; color: var(--ink); } } /* ── NOTE for anyone opening this library locally ───────────────────── The masked marks do NOT render over file:// — Chromium blocks mask-image fetches from a file origin, so they silently vanish rather than erroring. That is a browser restriction, not a bug in this system. Serve over HTTP to see them: python -m http.server 8791 Verified over HTTP: both marks paint white on oxblood at 18.5:1. */ /* ══════════════════════════════════════════════════════════════════════ v1.1 · the three components that carry the remaining scorecard points Added 2026-08-12. Each exists to move one dimension, and says which. ══════════════════════════════════════════════════════════════════════ */ /* ── .msw-hrail DELETED 2026-08-13 ─────────────────────────────────── It was a horizontal strip inside a vertical page. The across section does that job properly - the content travels rather than the user dragging a scrollbar - so keeping both was two devices for one idea. Codex flagged exactly this: "the page keeps introducing a new interaction grammar instead of building one." */ /* ── BOUNDARY TYPE · scorecard 4 (edge behaviour) 2 -> 4 ────────────── "Display type crosses section boundaries - cut by the edge above or below." One word, set enormous, straddling two grounds so the ground change slices it. Purely decorative, so it is aria-hidden in markup and the real heading is set normally elsewhere. Put .msw-cross on a section that follows the one being crossed into. */ .msw-cross { position: relative; } .msw-cross__word { position: absolute; left: var(--gutter); top: 0; transform: translateY(-50%); margin: 0; pointer-events: none; font-family: var(--display); font-weight: var(--display-weight); font-size: clamp(3.5rem, 15vw, 13rem); line-height: .8; letter-spacing: var(--track-hero); text-transform: uppercase; white-space: nowrap; color: currentColor; } @media (max-width: 700px) { .msw-cross__word { font-size: clamp(2.75rem, 17vw, 5rem); } } /* ── SELECTOR · scorecard 7 (signature moment) 2 -> 4 ───────────────── "One genuine interaction that only this brand would have." Tabs that swap the imagery and copy IN PLACE rather than linking away - era-residence's amenity selector, mapped to the four services the live site already publishes. Built as real tabs so it works with a keyboard and a screen reader; without JS every panel is simply visible. */ .msw-sw__tabs { display: flex; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; list-style: none; border-bottom: var(--hairline-w) solid var(--hairline-now, var(--hairline)); } .msw-sw__tab { appearance: none; background: none; border: 0; color: inherit; cursor: pointer; font-family: var(--display); font-weight: 600; font-size: clamp(1.05rem, 2.4vw, 1.6rem); text-transform: uppercase; letter-spacing: -.01em; padding: var(--s-2) var(--s-3) var(--s-2) 0; margin-right: var(--s-3); min-height: 44px; opacity: .42; border-bottom: 3px solid transparent; margin-bottom: -1px; transition: opacity var(--dur) var(--ease); } .msw-sw__tab:hover { opacity: .75; } .msw-sw__tab[aria-selected="true"] { opacity: 1; border-bottom-color: currentColor; } .msw-sw__tab:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } .msw-sw__panel[hidden] { display: none; } .msw-sw__panel { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--s-4); align-items: center; padding-top: var(--s-4); } .msw-sw__panel img { width: 100%; aspect-ratio: 5/4; object-fit: cover; display: block; } .msw-sw__count { font-family: var(--body); font-size: var(--t-micro); font-weight: 500; letter-spacing: var(--track-wide); text-transform: uppercase; opacity: .6; } @media (max-width: 820px) { .msw-sw__panel { grid-template-columns: 1fr; } } /* ── QUOTE · his own words, set at display scale ────────────────────── The live site already carries this line; here it gets the room it was always owed. Serif quotes would be a lie - the system has no serif. */ .msw-quote { margin: 0; max-width: 26ch; font-family: var(--display); font-weight: 600; font-size: clamp(1.6rem, 4.4vw, 3.4rem); line-height: 1.06; letter-spacing: -.02em; } .msw-quote__cite { display: block; margin-top: var(--s-3); font-family: var(--body); font-size: var(--t-label); font-weight: 500; font-style: normal; letter-spacing: var(--track-wide); text-transform: uppercase; opacity: .7; } /* ══════════════════════════════════════════════════════════════════════ v1.2 · THE ARCH, THE SEAM, THE DOT, BRASS Small craft. Each of these is his, not borrowed: arch an arched doorway, an arched kitchen opening and a circular mirror all appear in his own Lisbon photography. Era uses an arch; Matt already builds them. seam Fabbrica Group, one of his five client-locked June references. His note: "two-image curtain line using light and interiors". dot his mark is "m." The full stop is half the logo. brass his kitchens are full of it. A grey rule is a default. ══════════════════════════════════════════════════════════════════════ */ /* ── 1 · THE ARCH ───────────────────────────────────────────────────── One geometry at several scales. A semicircular head on straight jambs, because a stadium shape is what you get when nobody looked at a building. */ :root { --arch-r: 50% 50% 0 0 / 36% 36% 0 0; /* the arch, expressed as a radius */ } /* Imagery masked into an arch. Chapter openings, gallery heads. */ .msw-arch { border-radius: var(--arch-r); overflow: hidden; } .msw-arch > img { display: block; width: 100%; height: 100%; object-fit: cover; } /* The opening. A black shutter with a real arch-shaped hole punched in it, widening until its edges leave the viewport. FIXED after review: v1.2 used `mix-blend-mode: destination-out`, which is NOT a CSS blend mode - it is a Canvas composite operation. It computed to `normal`, so instead of cutting a hole it painted a white arch onto a black shutter. And the shutter was VISIBLE BY DEFAULT with only JS removing it, so with JavaScript off the entire site was a black screen. That is the opposite of progressive enhancement. Now: display:none by default, JS opts IN, and the hole is a real CSS mask. No JS, no overlay, no way to break the page. */ .msw-reveal { display: none; position: fixed; inset: 0; z-index: 90; pointer-events: none; background: var(--black); -webkit-mask: radial-gradient(circle, #000 100%, #000 100%); mask-composite: exclude; -webkit-mask-composite: xor; } .msw-reveal[data-play="true"] { display: block; /* Two mask layers: the full field minus an arch. The arch is the hole. */ -webkit-mask: linear-gradient(#000, #000), url("assets/shapes/arch.svg") no-repeat bottom center / var(--rev, 22vmin) auto; mask: linear-gradient(#000, #000), url("assets/shapes/arch.svg") no-repeat bottom center / var(--rev, 22vmin) auto; -webkit-mask-composite: xor; mask-composite: exclude; animation: msw-arch-open 1100ms var(--ease) forwards; } .msw-reveal[data-play="done"] { display: none; } @keyframes msw-arch-open { 0% { --rev: 22vmin; opacity: 1; } 70% { --rev: 170vmax; opacity: 1; } 100% { --rev: 300vmax; opacity: 0; } } @property --rev { syntax: ""; inherits: false; initial-value: 22vmin; } /* The mark waits inside the arch, then goes. */ .msw-reveal__mark { position: absolute; left: 50%; bottom: 13vmin; transform: translateX(-50%); height: 7vmin; color: #fff; background-color: currentColor; aspect-ratio: 129.82 / 180.86; -webkit-mask: url("assets/msw-monogram.svg") no-repeat center / contain; mask: url("assets/msw-monogram.svg") no-repeat center / contain; } /* Below 600 the nav has shed its 4th item and the remaining three spread wide enough that "Kitchens" reaches the centre - where this mark is pinned at left:50%. Measured at 360/390/430: the boxes intersect by 1074px sq, and the mark is drawn straight through the word. It is aria-hidden decoration and the word is not, so the decoration goes. */ .msw-reveal[data-play="true"] .msw-reveal__mark { animation: msw-mark-out 620ms var(--ease) forwards; } @keyframes msw-mark-out { to { opacity: 0; transform: translateX(-50%) scale(1.4); } } /* Reduced motion gets no reveal at all. Not a faster one - none. */ @media (prefers-reduced-motion: reduce) { .msw-reveal { display: none !important; } } /* ── 2 · THE SEAM · Fabbrica ────────────────────────────────────────── 50/50, and the seam is made by the PHOTOGRAPH - a flute, a jamb, a wall corner. No divider rule: a CSS line down the middle is precisely the thing this reference is not. The mark sits centred on the join. */ /* grid-template-rows is load-bearing: without it the row is sized by the taller photograph's aspect ratio. A 1000x1500 image in a 720px column makes the row 1080px, which on a 900px viewport pushed the hero name 180px below the fold - a gate failure (primary action in the first screen) that no amount of padding would have fixed. */ .msw-seam { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 100svh; min-height: 100svh; background: var(--black); } .msw-seam > figure { margin: 0; position: relative; overflow: hidden; min-height: 0; height: 100%; } .msw-seam img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Each half is pushed towards the join so the vertical inside each photograph lands on it. Tune per pair with --l and --r. */ .msw-seam__l img { object-position: var(--l, 78% 50%); } .msw-seam__r img { object-position: var(--r, 22% 50%); } /* .msw-seam__mark was deleted with the homepage nav rewrite: the signature in .msw-pagenav--over is the brand mark now, and two in one band was the inconsistency. Its rules went with it rather than being left to rot. */ @media (max-width: 820px) { .msw-seam { grid-template-columns: 1fr; grid-template-rows: 88svh; min-height: 88svh; } .msw-seam__r { display: none; } /* one photograph beats a squeezed two */ } /* ── 3 · THE DOT ────────────────────────────────────────────────────── His mark ends in a full stop. Reuse it: the end of a chapter, the hover state of a link, the rail's marker. One shape, three jobs. */ .msw-dot { display: inline-block; width: .34em; height: .34em; border-radius: 50%; background: currentColor; } .msw-dot--end { display: block; width: 10px; height: 10px; margin: var(--s-5) 0 0; border-radius: 50%; background: var(--brass); } .msw-ground--dark .msw-dot--end, .msw-ground--warm .msw-dot--end, .msw-ground--accent .msw-dot--end { background: var(--brass-invert); } /* Links take the dot instead of an underline. */ .msw-dotlink { text-decoration: none; color: inherit; position: relative; padding-right: .85em; } .msw-dotlink::after { content: ""; position: absolute; right: 0; bottom: .14em; width: .32em; height: .32em; border-radius: 50%; background: currentColor; transform: scale(0); transition: transform var(--dur) var(--ease); } .msw-dotlink:hover::after, .msw-dotlink:focus-visible::after { transform: scale(1); } /* ── 4 · BRASS ──────────────────────────────────────────────────────── Every rule was grey, which is a default rather than a decision. His kitchens are full of brass, so the rules are brass. Deliberately low-chroma: bright gold reads as a bad 2013 gradient. */ :root { --brass: #a98545; --brass-invert: #c9a969; /* lifted, for dark grounds */ } .msw-rule--brass { border: 0; border-top: var(--hairline-w) solid var(--brass); margin: 0; } .msw-ground--dark .msw-rule--brass, .msw-ground--warm .msw-rule--brass, .msw-ground--accent .msw-rule--brass { border-top-color: var(--brass-invert); } .msw-ground--dark .msw-sw__tabs, .msw-ground--warm .msw-sw__tabs { border-bottom-color: var(--brass-invert); } /* Scoped: unscoped, this overwrote the correct currentColor underline on PAPER grounds with the light brass, about 2:1 - under the 3:1 floor for non-text contrast. */ .msw-ground--dark .msw-sw__tab[aria-selected="true"], .msw-ground--warm .msw-sw__tab[aria-selected="true"] { border-bottom-color: var(--brass-invert); } /* Living corners: see v7 at the end of this file. The version that stood here animated the shadow's opacity and transform on a 26s loop, which silently overrode the v7 rules - a CSS animation beats a normal declaration, so the new opacity never applied and the shadow drifted. Deleted rather than left as a comment, because that is exactly the kind of dormant rule that comes back. */ /* ══════════════════════════════════════════════════════════════════════ v1.3 · SCRUBBED SEQUENCE · CONTINUOUS GROUND · VIEW TRANSITIONS ══════════════════════════════════════════════════════════════════════ */ /* ── VIEW TRANSITIONS ───────────────────────────────────────────────── Cross-document, so moving between pages morphs rather than blinks. Named elements persist across the navigation. */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 320ms; animation-timing-function: var(--ease); } /* A view-transition-name must be UNIQUE in the document. Naming both the nav mark and the seam mark "msw-mark" threw a duplicate-name error on every single transition - nine of them across one scrub. The nav mark keeps the name because it is the element that persists across pages; the seam mark exists only on the homepage hero and does not need one. */ .nav .msw-mark { view-transition-name: msw-mark; } @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } /* ── SCRUBBED RANGE SEQUENCE ────────────────────────────────────────── A tall track that pins one viewport-high stage. Scrolling the track scrubs the collection: the name steps, the imagery cross-fades, and the ground interpolates continuously between the two ranges either side of the playhead. Sticky rather than fixed, so it releases naturally at both ends and needs no scroll maths to un-pin. */ /* The ground follows the range. The 120ms linear step is deliberate and is The ground is static and there is no transition on it: a scroll-driven section restarting a background transition on every frame is what strobed. */ /* colour belongs on the SECTION, not only on the stage. It used to sit solely on .msw-seq__stage, so anything else in this dark section inherited the page ink #333 and rendered at 1.43:1 on #16161a. That took out the visualiser CTA - the only link from the homepage to the thing the site exists to sell - and the whole no-JS nine-range fallback with it. The identical component higher up the page measures 19.17:1. I caused it by moving that CTA out of the stage to fix a grid bug, which is the shape of the trap: an element that is correct in one parent and invisible in its sibling. Ink on the ground that owns the background. */ .msw-seq { background: #16161a; color: #fff; } .msw-seq__track { position: relative; height: 420svh; } /* 9 ranges of travel */ .msw-seq__stage { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--s-5); padding: var(--s-5) var(--gutter); color: #fff; overflow: hidden; } .msw-seq__figs { position: relative; height: min(74svh, 620px); } .msw-seq__fig { position: absolute; inset: 0; opacity: 0; transition: opacity 520ms var(--ease), transform 900ms var(--ease); transform: scale(1.04); } .msw-seq__fig.is-on { opacity: 1; transform: scale(1); } .msw-seq__fig img { width: 100%; height: 100%; object-fit: cover; display: block; } .msw-seq__name { font-family: var(--display); font-weight: var(--display-weight); font-size: clamp(2.5rem, 7.5vw, 6rem); line-height: .9; letter-spacing: var(--track-display); text-transform: uppercase; margin: 0; view-transition-name: seq-name; } .msw-seq__copy { font-size: 1rem; line-height: 1.62; max-width: 46ch; margin: var(--s-3) 0 0; opacity: .9; } .msw-seq__num { font-family: var(--body); font-size: var(--t-micro); font-weight: 500; letter-spacing: var(--track-wide); text-transform: uppercase; opacity: .6; } /* A brass progress hairline across the foot of the stage. */ .msw-seq__bar { position: absolute; left: var(--gutter); right: var(--gutter); bottom: var(--s-4); height: 1px; background: rgba(255,255,255,.22); } .msw-seq__bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--seq-p, 0%); background: var(--brass-invert); transition: width 120ms linear; } /* --seq-p is written every frame by ranges.js. It was declared here with a 0% fallback and never written by anything for two releases, so the bar sat permanently empty - decoration pretending to be a progress indicator. */ /* Without JS the stage is not sticky and every range is simply listed. */ .msw-seq:not([data-enhanced]) .msw-seq__track { height: auto; } .msw-seq:not([data-enhanced]) .msw-seq__stage { position: static; height: auto; } .msw-seq:not([data-enhanced]) .msw-seq__fig { position: static; opacity: 1; transform: none; margin-bottom: var(--s-3); } .msw-seq:not([data-enhanced]) .msw-seq__figs { height: auto; } .msw-seq__list { margin: 0; padding: 0; list-style: none; } .msw-seq[data-enhanced] .msw-seq__list { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } /* stays for screen readers */ @media (max-width: 820px) { .msw-seq__stage { grid-template-columns: 1fr; gap: var(--s-3); align-content: center; } .msw-seq__figs { height: 40svh; } .msw-seq__track { height: 340svh; } } @media (prefers-reduced-motion: reduce) { .msw-seq__fig { transition: opacity 1ms; transform: none; } .msw-seq { transition: none; } } /* ══════════════════════════════════════════════════════════════════════ v2 · THE ACROSS · one section, not the whole site ────────────────────────────────────────────────────────────────────── The page reads DOWN, then ACROSS, then DOWN. One axis change, in one place, doing one job: walking the length of a collection. This supersedes .msw-seq, which pinned a stage and CROSS-FADED nine images in place. Cross-fading is not traversal - nothing travels, so the section reads as a slideshow that happens to be pinned. Here the bays physically move past you. The pinned-translateX technique was rejected for a whole site (it breaks find-in-page and scroll restoration and needs a fake scroll height). For ONE section those costs are bounded and the payoff is real: the browser keeps normal vertical scrolling, so wheel, trackpad, keyboard, scrollbar and touch all behave, and the content is still a normal document. ══════════════════════════════════════════════════════════════════════ */ /* One static ground. The --across-ground custom property and the 140ms background transition are both gone: nothing wrote the property once the section stopped interpolating, and a background transition on a scroll-driven section is the shape of the strobe that cost three rounds to find. Left dormant it was an invitation to reintroduce it. */ .msw-across { position: relative; background: var(--black); } /* Travel = one viewport per bay, plus one to read the last one. Set from the bay count in markup so the maths lives in one place. */ .msw-across__travel { height: calc(var(--bays, 9) * 62svh + 100svh); } .msw-across__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; gap: var(--s-3); padding: var(--s-5) 0 var(--s-4); color: #fff; } .msw-across__head { padding: 0 var(--gutter); } /* The row that actually moves. translate3d keeps it on the compositor. */ .msw-across__row { display: flex; gap: var(--s-3); align-items: stretch; min-height: 0; height: 100%; padding: 0 var(--gutter); will-change: transform; transform: translate3d(var(--x, 0px), 0, 0); } /* The bay must FIT the stage row, not overflow it. With a fixed 4/5 aspect the image plus name plus copy plus finish ran taller than the available height and overflow:hidden simply cut the copy off mid-sentence. The image now flexes and the text is what sets the floor. */ .msw-across__bay { flex: 0 0 clamp(240px, 30vw, 420px); display: flex; flex-direction: column; height: 100%; min-height: 0; } .msw-across__bay img { width: 100%; flex: 1 1 auto; min-height: 0; object-fit: cover; display: block; filter: saturate(.94); } .msw-across__name, .msw-across__copy, .msw-across__finish { flex: 0 0 auto; } .msw-across__name { font-family: var(--display); font-weight: var(--display-weight); font-size: clamp(1.1rem, 2vw, 1.6rem); text-transform: uppercase; letter-spacing: -.01em; margin: var(--s-2) 0 var(--s-1); } .msw-across__copy { font-size: .82rem; line-height: 1.55; opacity: .82; margin: 0; } .msw-across__finish { font-family: var(--body); font-size: var(--t-micro); font-weight: 500; letter-spacing: var(--track-wide); text-transform: uppercase; opacity: .6; display: block; margin-top: var(--s-2); } /* Foot: a brass hairline that fills, and the count. No rail - this is inside one section and it is the only place a progress line is honest. */ .msw-across__foot { display: flex; align-items: center; gap: var(--s-3); padding: 0 var(--gutter); } .msw-across__bar { flex: 1; height: 1px; background: rgba(255,255,255,.22); position: relative; } .msw-across__bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); background: var(--brass-invert); } .msw-across__count { font-family: var(--body); font-size: var(--t-micro); font-weight: 500; letter-spacing: var(--track-wide); text-transform: uppercase; opacity: .7; font-variant-numeric: tabular-nums; white-space: nowrap; } /* ── No JS, small screens, reduced motion: no pinning, no travel. The bays become a plain vertical list. Same DOM, nothing hidden. ── */ .msw-across:not([data-enhanced]) .msw-across__travel { height: auto; } .msw-across:not([data-enhanced]) .msw-across__stage { position: static; height: auto; overflow: visible; } .msw-across:not([data-enhanced]) .msw-across__row { flex-wrap: wrap; transform: none; } .msw-across:not([data-enhanced]) .msw-across__bay { flex: 1 1 260px; } @media (max-width: 900px) { .msw-across__travel { height: auto !important; } .msw-across__stage { position: static !important; height: auto !important; overflow: visible !important; } .msw-across__row { flex-wrap: wrap; transform: none !important; } .msw-across__bay { flex: 1 1 260px; } .msw-across__foot { display: none; } } @media (prefers-reduced-motion: reduce) { .msw-across__travel { height: auto; } .msw-across__stage { position: static; height: auto; overflow: visible; } .msw-across__row { flex-wrap: wrap; transform: none; } .msw-across { transition: none; } } /* ── The across, flat variant ───────────────────────────────────────── Constant ground. Used for Selected work, where the photographs carry the colour and drifting the ground through each project's scheme would break the rule above: a project's palette is the client's taste, not Matt's identity. */ .msw-across--flat { background: var(--black); } .msw-across--flat .msw-across__bay { flex: 0 0 clamp(260px, 34vw, 520px); } .msw-across__cap { flex: 0 0 auto; font-family: var(--body); font-size: var(--t-label); letter-spacing: .04em; opacity: .82; margin-top: var(--s-2); } .msw-across__cap b { font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; } /* The nine range names, set as a plain confident list. */ .msw-names { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); list-style: none; margin: var(--s-4) 0 0; padding: var(--s-3) 0 0; border-top: var(--hairline-w) solid var(--brass-invert); } .msw-names li { font-family: var(--display); font-weight: 600; font-size: clamp(1.1rem, 2.2vw, 1.7rem); text-transform: uppercase; letter-spacing: -.01em; } /* ══════════════════════════════════════════════════════════════════════ v2.1 · BAY VARIANTS · ARCH DOORWAYS · THE HORIZONTAL WIPE Read off era-residence: bays are not a uniform carousel. Widths vary, images go full bleed, type is staggered rather than centred, and a quote lands over imagery instead of beside it. ══════════════════════════════════════════════════════════════════════ */ /* ── Bay widths. A uniform strip reads as a carousel; varied widths read as a walk past a building. ── */ .msw-across__bay--wide { flex: 0 0 min(92vw, 1180px); } /* No negative margin: inside a flex row it pulls the bay over BOTH neighbours, and the text column next to it was being sat on. A 100vw bay is already full bleed relative to the stage - the row's own gutter padding is the only offset needed. */ .msw-across__bay--full { flex: 0 0 min(100vw, 1400px); } .msw-across__bay--full img { object-position: 50% 42%; } .msw-across__bay--narrow{ flex: 0 0 clamp(190px, 20vw, 300px); } /* ── The doorway. An arch cut into a bay, so moving past it reads as stepping through rather than sliding by. This is the arch promoted from a one-off opening to the transition device it should always have been. ── */ .msw-across__bay--arch img { border-radius: var(--arch-r); } .msw-across__bay--arch .msw-across__cap { text-align: center; } /* ── The text bay. Keeps the vertical rhythm inside a horizontal walk: a tall, narrow column of type between two images, which is what stops the section reading as pure gallery. ── */ .msw-across__bay--text { flex: 0 0 clamp(300px, 32vw, 480px); justify-content: center; } .msw-across__say { font-family: var(--display); font-weight: 600; font-size: clamp(1.35rem, 2.6vw, 2.35rem); line-height: 1.1; letter-spacing: -.02em; margin: 0; } .msw-across__by { display: block; margin-top: var(--s-3); font-family: var(--body); font-size: var(--t-micro); font-weight: 500; letter-spacing: var(--track-wide); text-transform: uppercase; opacity: .6; } /* ── A quote laid OVER a full-bleed image, era's move. The scrim is only under the text, so the photograph is not dimmed as a whole. ── */ .msw-across__bay--quote { position: relative; } .msw-across__bay--quote .msw-across__over { position: absolute; right: 6%; bottom: 12%; max-width: 30ch; z-index: 2; } .msw-across__mark { display: block; font-family: var(--display); font-weight: 800; font-size: 2.4rem; line-height: .6; opacity: .8; margin-bottom: var(--s-2); } @media (max-width: 900px) { .msw-across__bay--full { flex: 1 1 260px; margin-inline: 0; } .msw-across__bay--quote .msw-across__over { position: static; max-width: none; margin-top: var(--s-2); } } /* ══════════════════════════════════════════════════════════════════════ THE HORIZONTAL WIPE — replaces the arch reveal The arch opening was a flop: a shape expanding from the bottom centre reads as a spotlight, not a door, and at full size it is just a fade. A horizontal sweep suits a site whose whole idea is moving sideways, and it previews the gesture before the visitor has made it. Two panels part from a seam, on an expo-out curve so almost all the travel happens in the first third and the last of it glides. ══════════════════════════════════════════════════════════════════════ */ .msw-wipe { display: none; position: fixed; inset: 0; z-index: 90; pointer-events: none; } .msw-wipe__panel { position: absolute; top: 0; bottom: 0; width: 50.5vw; background: var(--black); will-change: transform; } .msw-wipe__panel--l { left: 0; transform: translate3d(0,0,0); } .msw-wipe__panel--r { right: 0; transform: translate3d(0,0,0); } .msw-wipe__mark { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); height: 8vmin; color: #fff; background-color: currentColor; aspect-ratio: 129.82 / 180.86; -webkit-mask: url("assets/msw-monogram.svg") no-repeat center / contain; mask: url("assets/msw-monogram.svg") no-repeat center / contain; } .msw-wipe[data-play="true"] { display: block; } .msw-wipe[data-play="true"] .msw-wipe__panel--l { animation: msw-wipe-l 2050ms cubic-bezier(.16,1,.3,1) 380ms forwards; } .msw-wipe[data-play="true"] .msw-wipe__panel--r { animation: msw-wipe-r 2050ms cubic-bezier(.16,1,.3,1) 380ms forwards; } .msw-wipe[data-play="true"] .msw-wipe__mark { animation: msw-wipe-mark 900ms cubic-bezier(.16,1,.3,1) 120ms forwards; } .msw-wipe[data-play="done"] { display: none; } @keyframes msw-wipe-l { to { transform: translate3d(-101%,0,0); } } @keyframes msw-wipe-r { to { transform: translate3d(101%,0,0); } } @keyframes msw-wipe-mark { to { opacity: 0; transform: translate(-50%,-50%) scale(.82); } } @media (prefers-reduced-motion: reduce) { .msw-wipe { display: none !important; } } /* ── FULL-SCREEN PANELS ─────────────────────────────────────────────── Dex: fewer, bolder, full screen. Six panels, each a whole viewport. The image is ABSOLUTELY POSITIONED to fill, not a flex child. The flex version fought the absolute overlays: the quote panel's image collapsed to nothing and the display-scale caption landed on top of the quote. Absolute fill removes the sizing negotiation entirely - the panel is a frame, everything else is layered on it. */ /* Specificity: `.msw-across--flat .msw-across__bay` is two classes and was beating this one-class rule, so every "full screen" panel came out at 34vw (490px of 1440). Matched here rather than reaching for !important. */ .msw-across .msw-across__bay--screen, .msw-across--flat .msw-across__bay--screen { flex: 0 0 100vw; position: relative; display: block; height: 100%; padding: 0; overflow: hidden; } .msw-across__bay--screen > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .msw-across__bay--screen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 34%, rgba(0,0,0,0) 46%, rgba(0,0,0,.62) 100%); } .msw-across__bay--screen .msw-across__cap { position: absolute; left: var(--gutter); bottom: var(--s-4); margin: 0; z-index: 3; opacity: 1; display: grid; gap: 4px; border: 0; padding: 0; } .msw-across__bay--screen .msw-across__cap b { font-family: var(--display); font-weight: var(--display-weight); font-size: clamp(2.4rem, 7vw, 6rem); line-height: .9; letter-spacing: var(--track-display); text-transform: uppercase; } .msw-across__bay--screen .msw-across__cap span { font-family: var(--body); font-size: var(--t-label); font-weight: 500; letter-spacing: var(--track-wide); text-transform: uppercase; opacity: .9; } /* The quote panel carries the quote INSTEAD of a display-scale name - two things at display scale in one frame is one too many. */ .msw-across__bay--quote .msw-across__cap b { font-size: var(--t-label); font-family: var(--body); font-weight: 500; letter-spacing: var(--track-wide); } /* MEASURE. The cap used to sit here as max-width:22ch, and ch resolves against the element's OWN font - which on .msw-across__over is the body font at 16px, not the display font the quote is set in. So the column was pinned at a fixed 232px while the type inside it grew from 27px to 42px: six lines at 901, ten from 1280 up, for a 103-character quote. The cap belongs on the element that carries the display font, where ch tracks the type. Measured after: five lines from 901 to 2560. */ .msw-across__bay--screen .msw-across__over { position: absolute; z-index: 3; left: var(--gutter); right: auto; top: 50%; transform: translateY(-50%); max-width: min(46vw, 40rem); } .msw-across__bay--screen .msw-across__say { font-size: clamp(1.5rem, 3vw, 2.6rem); line-height: 1.12; max-width: 24ch; } /* CONTRAST. The bay scrim above is a top-and-bottom gradient with a clear window between 34% and 46%, and this block is centred at top:50% - i.e. inside the clear window. On the Lisbon frame that window is a bright cream wall, so white display type was landing on near-white. It gets its own plate: a soft ellipse with no hard edge, sized off the text box, so the photograph is not dimmed as a whole. */ .msw-across__bay--screen .msw-across__over::before { content: ""; position: absolute; z-index: -1; inset: -16% -18% -20% -18%; pointer-events: none; background: radial-gradient(115% 100% at 32% 50%, rgba(0,0,0,.66) 0%, rgba(0,0,0,.46) 48%, rgba(0,0,0,0) 78%); } /* The text panel: no image, so it needs its own ground and no scrim. Its breathing room belongs INSIDE the 100vw bay. External margins change the bay pitch and desynchronise the viewport-based traverse. */ /* Anchored LOW, not centred. Widening the measure made the quote taller and, centred in the stage, it ran up into "WALK THROUGH IT." - which is fixed furniture at the top of the section, not part of this bay's box. The previous attempt at this targeted .msw-across__over, which does not exist inside a text bay, so it governed nothing. */ .msw-across__bay--screen.msw-across__bay--text { display: grid; box-sizing: border-box; place-content: end start; padding: 0 var(--s-5) clamp(56px, 11vh, 120px); background: var(--black); } .msw-across__bay--screen.msw-across__bay--text::after { content: none; } /* Measured at 1920: a fixed 20ch measure put this quote on TEN lines in a ~500px column with roughly a thousand pixels of empty black beside it. Both the measure and the size scale now, so the line count stays near five wherever it is read. */ .msw-across__bay--screen.msw-across__bay--text .msw-across__say { font-size: clamp(1.6rem, 3.6vw, 4.4rem); max-width: min(26ch, 46vw); } @media (max-width: 900px) { /* Two classes, to match the specificity of the 100vw rule above. With one it lost the cascade and the bays stayed a full viewport wide inside a padded row, so their right-hand side was clipped rather than shown. */ .msw-across .msw-across__bay--screen, .msw-across--flat .msw-across__bay--screen { flex: 1 1 260px; height: auto; aspect-ratio: 3/4; } .msw-across__bay--screen.msw-across__bay--text { aspect-ratio: auto; padding: var(--s-5) var(--gutter); } .msw-across__bay--screen .msw-across__cap b { font-size: 1.7rem; } /* THE QUOTE COMES OFF THE IMAGE HERE, rather than being tuned to fit. Below 900 the traverse stops being a horizontal walk of 100vw frames and wraps into cards, and a card is 270-350px wide - NARROWER at 900 (three per row) than at 390 (one per row). So no viewport-based size works: every rule that improves 390 makes 900 worse. Measured with the block still in: 4 lines at 390, 8 at 600, 13 at 900, over a photograph with nowhere for a scrim to sit. The quote is not lost. It appears a second time further down the page on its own plate, where it reads in six lines at every width from 390 to 900 and carries the same attribution. One good telling beats two, and the bay goes back to being a photograph like its seven siblings. */ .msw-across__bay--screen .msw-across__over { display: none; } } /* ── FULL-BLEED STAGE · the screen variant ──────────────────────────── Dex: "full section height and width". With the heading occupying a grid row the panels only got the middle band, and the row gap cut black stripes between them. For the screen variant the stage becomes ONE frame: panels fill it edge to edge, and the heading and foot are laid over the top rather than taking space from it. */ .msw-across--flat .msw-across__stage { display: block; padding: 0; gap: 0; } .msw-across--flat .msw-across__head { position: absolute; top: var(--s-5); left: 0; right: 0; z-index: 4; pointer-events: none; padding: 0 var(--gutter); } .msw-across--flat .msw-across__row { height: 100%; gap: 0; padding: 0; align-items: stretch; } .msw-across--flat .msw-across__foot { position: absolute; left: 0; right: 0; bottom: var(--s-3); z-index: 4; padding: 0 var(--gutter); } /* The heading needs its own scrim or it sits on whatever the panel shows. */ .msw-across--flat .msw-across__stage::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 34vh; z-index: 3; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,0) 100%); } /* Caption clears the right edge and the foot. */ .msw-across__bay--screen .msw-across__cap { right: var(--gutter); bottom: calc(var(--s-5) + var(--s-3)); } @media (max-width: 900px) { .msw-across--flat .msw-across__stage { display: grid; } .msw-across--flat .msw-across__head { position: static; padding: 0 var(--gutter); } .msw-across--flat .msw-across__row { gap: var(--s-3); padding: 0 var(--gutter); } .msw-across--flat .msw-across__stage::before { content: none; } } /* height:100% did not resolve through the block-level stage (panel came out 600 of 900). The stage is exactly one viewport, so state that directly rather than relying on a percentage chain. */ .msw-across--flat .msw-across__row { height: 100svh; } .msw-across .msw-across__bay--screen, .msw-across--flat .msw-across__bay--screen { height: 100svh; } @media (max-width: 900px) { .msw-across--flat .msw-across__row { height: auto; } .msw-across .msw-across__bay--screen, .msw-across--flat .msw-across__bay--screen { height: auto; } } /* Reduced motion (or no JS) above 900: across.js never pins, so the row wraps. The generic `:not([data-enhanced])` bay rule then squeezed these full-screen frames to 288px columns, clipping the quotes mid-word and splitting LISBON across two frames. Here each frame keeps its full width and they stack, which is the same walk read downwards. The foot's "01 / 06" counter has nothing to count without the traverse. */ @media (min-width: 901px) { .msw-across:not([data-enhanced]) .msw-across__row { height: auto; } .msw-across:not([data-enhanced]) .msw-across__bay--screen { flex: 0 0 100%; margin-block: 0; } .msw-across:not([data-enhanced]) .msw-across__foot { display: none; } } /* ══════════════════════════════════════════════════════════════════════ v3 · SCRIPT COUNTERPOINT · EDGE TYPE · CHAPTER MARK ══════════════════════════════════════════════════════════════════════ */ /* ── 1 · THE SCRIPT COUNTERPOINT ────────────────────────────────────── Era sets a hard serif headline and drops one script word into it ("THE COAST YOU WANTED / yours / THIS YEAR"). We retired script FONTS, correctly - a font imitating handwriting next to real handwriting is the worse answer. But he HAS handwriting, so the version of this idea that is actually his is one word of his own signature set inside the headline. Inline, baseline-aligned, and masked so it takes the heading's colour. Optical size is tuned to the cap height either side, not to the line box, or it reads as a sticker dropped into the sentence. */ .msw-script { display: inline-block; vertical-align: baseline; width: var(--script-w, 4.2em); height: 0.92em; margin: 0 .06em -0.06em; background-color: currentColor; -webkit-mask: url("assets/msw-signature.svg") no-repeat center / contain; mask: url("assets/msw-signature.svg") no-repeat center / contain; } /* Never below 140px wide, the legibility floor from the mark rules. */ @media (max-width: 640px) { .msw-script { width: var(--script-w-sm, 3.6em); } } /* ── 2 · EDGE TYPE ──────────────────────────────────────────────────── Era runs "NEW GOLDEN MILE" into the photograph's edge. We removed the boundary-crossing word because it did not work vertically; horizontally, against a full-bleed panel, it does - the type is cut by the frame rather than by a colour change, which is a real edge instead of an implied one. Sits on the panel and deliberately overruns it. The panel's own overflow:hidden does the cutting. */ .msw-edgetype { position: absolute; z-index: 3; margin: 0; left: calc(-1 * var(--s-4)); bottom: 8%; font-family: var(--display); font-weight: var(--display-weight); font-size: clamp(3rem, 11vw, 9.5rem); line-height: .84; letter-spacing: var(--track-hero); text-transform: uppercase; white-space: nowrap; pointer-events: none; } .msw-edgetype--right { left: auto; right: calc(-1 * var(--s-4)); text-align: right; } .msw-edgetype--top { bottom: auto; top: 12%; } @media (max-width: 900px) { .msw-edgetype { position: static; font-size: clamp(2rem, 9vw, 3rem); white-space: normal; margin-bottom: var(--s-2); } } /* ── 3 · THE CHAPTER MARK ───────────────────────────────────────────── Dex killed the rail and was right - a progress bar is not orientation. But era keeps a page number and a vertical SCROLL mark, which tells you where you are without pretending to be navigation. This is that: a chapter number and name, fixed to the left gutter, that changes as chapters pass. No track, no fill, no percentage. It states a position rather than measuring one. */ .msw-chapter { position: fixed; left: var(--gutter); bottom: var(--s-4); z-index: 40; display: flex; align-items: center; gap: var(--s-2); pointer-events: none; mix-blend-mode: difference; color: #fff; font-family: var(--body); font-size: var(--t-micro); font-weight: 500; letter-spacing: var(--track-wide); text-transform: uppercase; font-variant-numeric: tabular-nums; opacity: 0; transition: opacity 420ms var(--ease); } .msw-chapter[data-on="true"] { opacity: .82; } .msw-chapter__n { position: relative; padding-right: var(--s-2); } .msw-chapter__n::after { content: ""; position: absolute; right: 0; top: 50%; width: 10px; height: 1px; background: currentColor; } .msw-chapter__name { transition: opacity 220ms var(--ease); } @media (max-width: 900px) { .msw-chapter { display: none; } } @supports not (mix-blend-mode: difference) { .msw-chapter { mix-blend-mode: normal; color: var(--ink); } } /* v3.1 - the shadow system is GONE, at Dex's instruction: the two-layer plant shadows, the --shadow-x/-blur/-alpha tokens, and the display-type text-shadow that shared them. A cast shadow under a cut-out is the tell that a cut-out is what it is; without it the object simply sits on the ground, which is the more confident answer. */ /* ══════════════════════════════════════════════════════════════════════ v4 · THE DOORWAY · CORNER MARKS · THE INDEX ══════════════════════════════════════════════════════════════════════ */ /* ── 1 · THE DOORWAY ────────────────────────────────────────────────── The arch, stuck to scroll. It pins and the aperture widens as you move through, with what is beyond visible through it the whole way. You do not watch a transition, you walk through one. Unenhanced (no JS, reduced motion, narrow) the aperture is simply open at full size and the section is a normal full-bleed image. */ .msw-door { position: relative; background: var(--black); } .msw-door__travel { height: 100svh; } .msw-door[data-enhanced] .msw-door__travel { height: 220svh; } .msw-door__stage { position: relative; height: 100svh; overflow: hidden; display: grid; place-items: center; } .msw-door[data-enhanced] .msw-door__stage { position: sticky; top: 0; } .msw-door__aperture { position: absolute; inset: 0; --open: 320vmax; -webkit-mask: url("assets/shapes/arch.svg") no-repeat center bottom / var(--open) auto; mask: url("assets/shapes/arch.svg") no-repeat center bottom / var(--open) auto; } .msw-door__aperture img { width: 100%; height: 100%; object-fit: cover; display: block; } .msw-door__label { position: relative; z-index: 2; margin: 0; text-align: center; color: #fff; opacity: var(--label-o, 1); pointer-events: none; font-family: var(--body); font-size: var(--t-label); font-weight: 500; letter-spacing: var(--track-wide); text-transform: uppercase; } /* Sits below the arch spring line so it reads as a sign over a door. */ .msw-door[data-enhanced] .msw-door__label { align-self: end; margin-bottom: 12vh; } @media (max-width: 900px) { .msw-door__travel, .msw-door__stage { height: 62svh; } .msw-door__aperture { --open: 320vmax; } } /* ── 2 · CORNER MARKS ───────────────────────────────────────────────── Four brass crop marks at the frame of a full-bleed panel. These are the register marks off his own printed brochure - print furniture on screen, taken from his artefact rather than invented. One element, four gradients. Anything else needs four spans in markup for something purely decorative. */ .msw-marks { position: absolute; inset: var(--s-3); z-index: 4; pointer-events: none; opacity: .72; --m: 16px; --w: 1px; --c: var(--brass-invert); background: linear-gradient(var(--c),var(--c)) left top / var(--w) var(--m) no-repeat, linear-gradient(var(--c),var(--c)) left top / var(--m) var(--w) no-repeat, linear-gradient(var(--c),var(--c)) right top / var(--w) var(--m) no-repeat, linear-gradient(var(--c),var(--c)) right top / var(--m) var(--w) no-repeat, linear-gradient(var(--c),var(--c)) left bottom / var(--w) var(--m) no-repeat, linear-gradient(var(--c),var(--c)) left bottom / var(--m) var(--w) no-repeat, linear-gradient(var(--c),var(--c)) right bottom / var(--w) var(--m) no-repeat, linear-gradient(var(--c),var(--c)) right bottom / var(--m) var(--w) no-repeat; } @media (max-width: 900px) { .msw-marks { display: none; } } /* ── 3 · THE INDEX ──────────────────────────────────────────────────── Six full-bleed panels earn a quiet moment. This is it: dense, purely typographic, no imagery at all. After a sequence of photographs a page of type is the strongest available change of pace, and it is the one layout on the site with no picture in it. Rows are a grid so the columns align exactly - a list that almost lines up reads as a mistake, where one that lines up reads as a document. */ .msw-index { border-top: var(--hairline-w) solid var(--brass); } .msw-index__row { display: grid; grid-template-columns: 3.5rem 1fr 1fr 1fr; gap: var(--s-3); align-items: baseline; padding: var(--s-3) 0; border-bottom: var(--hairline-w) solid var(--hairline); text-decoration: none; color: inherit; } a.msw-index__row:hover { background: rgba(0,0,0,.03); } a.msw-index__row:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } .msw-index__n { font-family: var(--body); font-size: var(--t-micro); font-weight: 500; letter-spacing: .1em; color: var(--brass); font-variant-numeric: tabular-nums; } .msw-index__name { font-family: var(--display); font-weight: 600; font-size: clamp(1.15rem, 2.4vw, 1.9rem); text-transform: uppercase; letter-spacing: -.01em; } .msw-index__meta { font-family: var(--body); font-size: .82rem; opacity: .72; } .msw-index__head { display: grid; grid-template-columns: 3.5rem 1fr 1fr 1fr; gap: var(--s-3); padding-bottom: var(--s-2); font-family: var(--body); font-size: var(--t-micro); font-weight: 500; letter-spacing: var(--track-wide); text-transform: uppercase; opacity: .55; } @media (max-width: 720px) { .msw-index__row, .msw-index__head { grid-template-columns: 2.5rem 1fr; } .msw-index__meta:last-child { display: none; } } /* ══════════════════════════════════════════════════════════════════════ v5 · Dex's review list ══════════════════════════════════════════════════════════════════════ */ /* 2 · KITCHENS: no per-range ground. The colour change between ranges is jarring — it reads as a fault, not a transition. One ground, and the imagery carries the change. Light-and-shadow still moves the rest of the site; this section opts out because it is scroll-driven and any ground change here lands on top of the scrub. */ /* (kitchens ground is set statically on the base .msw-seq rule now) */ /* 3 · SELECTED WORK: butt the imagery up. A gutter between two full-bleed photographs is a seam that means nothing. Gaps only where text sits between images, because there the space is doing a job. */ /* Dex: "butt up the selected works so the imagery is touching - remove the gutter unless text is between." The first attempt only zeroed margin-LEFT, so every bay kept its 40px margin-right and the gutters came out exactly inverted: 40px between two photographs, and 0 either side of the text bay, which is the one place a gutter does a job. Measured 40/40/0/0/0 where it should read 0/0/40/40/0. Stated positively this time: bays have no margin at all. The text bay's own inner padding supplies the pause on both sides without changing its 100vw pitch, so image bays touch and the traverse stays in step. */ .msw-across--flat .msw-across__row { gap: 0; } .msw-across__bay { margin-inline: 0; } /* 5 · THE TRACKER, back on the left edge. The bottom-left counter collided with body copy and with the door label. Vertical, in the gutter, out of the way of everything — which is where it was before and why it worked. Not a progress bar: no fill, no percentage. */ .msw-chapter { position: fixed; left: var(--s-3); top: 50%; bottom: auto; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; align-items: center; gap: var(--s-2); writing-mode: vertical-rl; text-orientation: mixed; pointer-events: none; mix-blend-mode: difference; color: #fff; font-family: var(--body); font-size: var(--t-micro); font-weight: 500; letter-spacing: var(--track-wide); text-transform: uppercase; font-variant-numeric: tabular-nums; opacity: 0; transition: opacity 420ms var(--ease); } .msw-chapter[data-on="true"] { opacity: .8; } .msw-chapter__n { padding: 0; } .msw-chapter__n::after { content: ""; position: absolute; left: 50%; bottom: -14px; width: 1px; height: 26px; background: currentColor; } .msw-chapter__name { margin-top: 28px; } @media (max-width: 1100px) { .msw-chapter { display: none; } } /* 6 · EDGE TYPE above the frame furniture. It was sitting under the panel scrim and the caption, so the overlap read as a mistake. */ .msw-edgetype { z-index: 5; } .msw-across__bay--screen::after { z-index: 1; } .msw-across__bay--screen .msw-across__cap { z-index: 4; } /* 7 · THE DIMENSION MARK — replaces the dot. A dot is a full stop with nothing to do. This is the mark an architect puts under a measurement: a rule with tick ends. It comes from drawings, which is his world, and unlike the dot it can carry a label. Used to close a passage of copy, or to underline a statement. */ .msw-dim { display: block; position: relative; height: 1px; width: 96px; margin: var(--s-4) 0 0; background: var(--brass); } .msw-dim::before, .msw-dim::after { content: ""; position: absolute; top: -4px; width: 1px; height: 9px; background: var(--brass); } .msw-dim::before { left: 0; } .msw-dim::after { right: 0; } .msw-dim--wide { width: 190px; } .msw-ground--dark .msw-dim, .msw-ground--warm .msw-dim, /* NOT brass on brick: #c9a969 against #a4402c is two warm mid-tones and the mark came out olive. On the accent ground it takes the ink. */ .msw-ground--accent .msw-dim { background: var(--ink-on-accent); opacity: .5; } .msw-ground--dark .msw-dim::before, .msw-ground--dark .msw-dim::after, .msw-ground--warm .msw-dim::before, .msw-ground--warm .msw-dim::after { background: var(--brass-invert); } .msw-ground--accent .msw-dim::before, .msw-ground--accent .msw-dim::after { background: var(--ink-on-accent); } /* Underline variant: sits under a heading like a drawn rule. */ .msw-dim--under { margin-top: var(--s-2); width: min(100%, 320px); } /* 8 - speech marks: the single definition now lives further down, next to the clipping fix. Two competing rules for one component is how a doubled-backslash content value survived three passes: the later rule masked it, so the broken one never showed itself. */ /* 9 · THE LAST THREE SECTIONS. They were the same height as everything above and read as an afterthought. Room is the cheapest luxury signal there is — the close should feel like it takes its time. */ .pad--tall { padding-top: clamp(6rem, 16vh, 12rem); padding-bottom: clamp(6rem, 16vh, 12rem); } .msw-close { min-height: 78svh; display: grid; align-content: center; } /* minmax(0, 1fr), and it is load-bearing. An `auto` column is sized by its items' MAX-CONTENT, and .msw-cred's content when it is crawling is two full copies of the run - measured at 2719px against a 990px viewport. The track grew to fit it, the footer grew with the track, and the whole document picked up 1.7 screens of horizontal scroll. overflow:hidden on the strip's own viewport does not prevent this: it clips the paint, it does not remove the intrinsic contribution. The fix has to be on the track. */ .msw-signoff-band { min-height: 46svh; display: grid; align-content: center; grid-template-columns: minmax(0, 1fr); padding: var(--s-5) 0; } /* The footer supplies its OWN padding instead of borrowing .pad--t, and that is not tidying. .pad--t is defined per page, in each page's inline