too and a blanket rule outguns it: `.beat p` is (0,1,1) against `.beat-eyebrow`'s (0,1,0), so the eyebrow silently rendered at body size in Slate with no gap beneath it. Exactly the collision `.pair-row > div p` exists to avoid over on Product Judgment — a class name in the selector keeps the two rules from ever addressing the same element. */ .beat p:not(.beat-eyebrow) { font-size: clamp(15px, 1.2vw, 16px); line-height: 1.62; color: var(--ink); text-wrap: pretty; } /* RHYTHM is kept separate from typography, and every labelled paragraph is excluded from the default. The two got tangled once already: `.beat-p` set its own 22px gaps and never won, because `.beat p:not(...) + p` is (0,2,2) against `.beat-p + .beat-p` at (0,2,0), so beat 03 ran at a flat 18px. Add any new labelled paragraph class to BOTH :not() lists. */ .beat p:not(.beat-eyebrow):not(.beat-p):not(.callout-primary) { margin: 0; } /* The callout is excluded as a TARGET so its own 24px wins, but it must stay eligible as a PREDECESSOR — excluding it from both halves left the sentence after it matching nothing, so it fell back to margin: 0 and sat flush against the rule. */ .beat p:not(.beat-eyebrow):not(.beat-p) + p:not(.beat-p):not(.callout-primary) { margin-top: 18px; } /* Cap every measure, including ones that look like they can't need it: a 300px column still needs a ch cap for its wrapped state, where it runs full width and would otherwise pass 90 characters. */ .beat-outcome { max-width: 74ch; } /* Beat 03 sets its own rhythm — it opens at 22px and tightens to 18px after the ruled paragraph. Each selector names the class explicitly so it outranks the beat-wide default above rather than relying on source order. */ .beat p.beat-p { max-width: 74ch; margin: 0 0 22px; } .beat p.beat-p.beat-p-tight { margin-bottom: 18px; } .beat p.beat-p:last-child { margin-bottom: 0; } /* One ruled paragraph per case. Only the indent changes — the type does not — and that is what distinguishes it from the callout, where the typeface does change. It marks the general case, the part a reader skims; the specific decisions around it stay flush. */ .beat-ruled { max-width: 72ch; padding-left: clamp(18px, 1.8vw, 24px); border-left: 3px solid var(--orange); } /* The case's thesis, and the two paragraphs the plate illustrates. It changes typeface because of that. The four-side navy rule echoes the plate's own frame beside it, and the fill is one step down from the linen — essentially the plate's ground. */ /* TWO callout treatments, told apart by size alone. Both take the same 3px Rust rule and nothing else: no tint, no border, no face change. A tinted #EFE7DF ground with negative margins was built and cut — on linen it needs height and bleed to register at all, and then it reads as a quotation. Serif went with it: face + size + rule is three signals for one emphasis. */ /* PRIMARY — the claim the case turns on, one per case. Sans, not serif, at 125% of body. It CLOSES the beat it belongs to rather than sitting in its own grid row, where it would inherit the 40–60px beat gap on both sides and read as a stranded pull-quote — hence a margin-top of its own. */ .beat p.callout-primary { margin: 24px 0 0; padding-left: clamp(18px, 1.8vw, 24px); border-left: 3px solid var(--orange); font-weight: 400; font-size: clamp(18.75px, 1.5vw, 20px); line-height: 1.5; color: var(--navy); /* no measure of its own — it takes the column's */ } /* SECONDARY — the general principle, one per case, inside 03. Body size. */ .callout-secondary { max-width: 72ch; padding-left: clamp(18px, 1.8vw, 24px); border-left: 3px solid var(--orange); } /* A MAT, not a frame: no border, so the artwork's own hairline reads as its edge. No caption either — a plate's label is drawn into the artwork. #F8F1EC IS A SITE COLOUR, not a per-file property. Both plates export on it, and a graphic that arrives on anything else gets re-exported rather than accommodated. That replaces the old rule of sampling each plate's own ground, which put two plates on one page on two different grounds — and it ends a swap-by-swap chase that moved this value three times in two days. No mix-blend-mode, unlike every other image on the site: the plate's ground is opaque by design and multiplying it against the mat muddies it. PLATES MUST BE PORTRAIT, no wider than 3:4. A landscape export shipped for one revision and failed twice — it covered a third of the case, left the lower beats beside empty ground, and rendered its labels near 8px because the column is narrower than the figure is wide. */ .case-plate { /* span 4, never 1 / -1. The rows are implicit, so -1 resolves against an explicit grid with no rows and the plate collapses into a single row partway down the case — which shipped once and read as a figure floating loose in the middle of the argument. */ grid-column: 2; grid-row: 1 / span 4; align-self: start; /* Lets the plate overrun its column into the page gutter, never past the page edge. */ width: calc(100% + var(--plate-slack)); margin-right: calc(-1 * var(--plate-slack)); background: #F8F1EC; padding: clamp(16px, 1.8vw, 24px); } .case-panel { --plate-slack: max(0px, (100vw - 1240px) / 2 + clamp(20px, 4vw, 48px) - 10px); } /* The plate is a control. Full-width transparent button inside the mat. */ .plate-trigger { position: relative; display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; cursor: zoom-in; } .plate-trigger img { display: block; width: 100%; height: auto; } /* The badge is the whole affordance — without it nothing announced the plate was enlargeable except the cursor, which touch and keyboard users never see. No help text under the mat. aria-hidden so it doesn't double the button's accessible name. */ .plate-zoom { position: absolute; top: 0; right: 0; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: rgba(241, 232, 226, 0.92); border: 1px solid rgba(27, 35, 64, 0.22); } /* ---- The enlarge overlay ------------------------------------------------- Deliberately NO height cap on the figure. max-height: 100% caps a 1000px portrait plate at the window, which on a 900px laptop renders it near half size and the overlay buys nothing. The figure exceeds the viewport and the scrim scrolls instead. And capped at NATIVE width, never above: upscaling a raster only interpolates and softens the labels the overlay exists to make readable. A new export means revisiting 764px here and on the diagrams page. */ .zoom { position: fixed; inset: 0; z-index: 120; overflow-y: auto; overflow-x: hidden; padding: clamp(16px, 3vw, 56px); background: rgba(27, 35, 64, 0.94); cursor: zoom-out; } .zoom[hidden] { display: none; } .zoom img { display: block; width: 100%; max-width: 764px; height: auto; margin: 0 auto; background: #F8F1EC; } /* Shares the image's width so the two right edges line up. */ .zoom-all { max-width: 764px; margin: clamp(14px, 2vw, 20px) auto 0; text-align: right; font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; } .zoom-all a { color: var(--orange-brt); padding-bottom: 2px; border-bottom: 1px solid rgba(240, 135, 60, 0.5); cursor: pointer; } .zoom-all a:hover { color: var(--white); border-bottom-color: var(--white); } .zoom-close { position: fixed; top: clamp(12px, 2vw, 24px); right: clamp(12px, 2vw, 24px); min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; background: rgba(27, 35, 64, 0.9); border: 1px solid rgba(255, 255, 255, 0.45); color: #F3EFE9; font-size: 18px; line-height: 1; cursor: pointer; } .zoom-close:hover { border-color: var(--orange-brt); color: var(--orange-brt); } /* ============================================================================ CASE STUDY DIAGRAMS PAGE Deliberately unlinked from the nav — no slot, no footer row, no dropdown entry. The diagrams are its only entrance, via the link under the enlarged figure. It is a place to go from a figure, not a section of the site. ============================================================================ */ .diagrams { background: var(--linen); color: var(--navy); } .diagram-stack { display: flex; flex-direction: column; gap: clamp(56px, 6vw, 84px); max-width: var(--content-max); margin: 0 auto; padding: clamp(34px, 3.4vw, 46px) var(--pad-x) clamp(40px, 3.6vw, 50px); } /* A shared link to a figure lands on the figure, not the top of the page. The site's own rule only covers section[id] and footer[id], and these are divs. Written against the header token plus 24px of air rather than a flat 96px — same value today, and it can't drift if the header height changes. */ .diagram[id] { scroll-margin-top: calc(var(--header-h) + 24px); } .diagram h2 { margin: 0 0 16px; font-family: var(--font-head); font-weight: 400; font-size: clamp(23px, 2.4vw, 30px); line-height: 1.16; letter-spacing: -0.015em; color: var(--navy); } .diagram-copy { margin: 0; max-width: 74ch; font-size: clamp(15px, 1.2vw, 16px); line-height: 1.62; color: var(--ink); text-wrap: pretty; } .diagram-cta { margin: 18px 0 0; } .diagram-cta a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange-deep); border-bottom: 1px solid rgba(176, 78, 25, 0.45); transition: color var(--ease), border-color var(--ease); } .diagram-cta a:hover { color: var(--orange-deep-hover); border-bottom-color: var(--orange-deep-hover); } /* Same mat as the case plates, and the same site ground — but static. These are already at full size, which is the reason this page exists, so there is nothing to enlarge. Capped at the artwork's native width: scaling a raster up only softens the labels. */ .diagram-plate { margin-top: clamp(20px, 2.2vw, 28px); max-width: 764px; background: #F8F1EC; padding: clamp(16px, 1.8vw, 24px); } .diagram-plate img { display: block; width: 100%; height: auto; } /* ============================================================================ ARTIFACT BANDS A section of supplied imagery, and the site's third interior ground. Linen rather than navy, which is what the interior pattern would predict. Both images arrive on their own near-white grounds: on navy they sit as bright rectangles with hard edges and the plate reads louder than the artifact, and on pure white the screenshot's tan ground floats with no edge at all. Linen takes both — the illustration dissolves into it under multiply, and the screenshot needs only a hairline. It is also the warmest, least formal material on the site, which is what this section wants. Linen is the ground for a section carrying supplied imagery and is NOT an alternative to navy anywhere else. Navy stays meaningful by staying rare. The section is deliberately unfinished — see the reserved slot at the foot of the markup. There is no rule after band 3: the section ends on copy, and a fourth band drops in bringing one more rule above it. ============================================================================ */ .artifacts { background: var(--linen); color: var(--navy); } /* The gap is smaller than it looks like it should be because each rule is a flex child and therefore eats a gap on BOTH sides. At the old clamp(52px, 6vw, 88px) the three rules added roughly 150px of dead air. */ .artifact-stack { display: flex; flex-direction: column; gap: clamp(34px, 4vw, 56px); max-width: var(--content-max); margin: 0 auto; padding: clamp(38px, 4vw, 56px) var(--pad-x); } /* A section eyebrow, not a headline — a serif h2 here competed with the band titles, which is also why those stay h2 and this stays a
. The negative bottom margin cancels most of the column gap so the label sits 16px above its rule and reads as attached to the section rather than as a band of its own. Roughly -21px at desktop. */ .artifact-eyebrow { margin: 0 0 calc(16px - clamp(34px, 4vw, 56px)); } /* Flex children of the column, not borders on the bands — a border would move with its band and leave the eyebrow unruled. Composited on Linen this is #D3D1CF, 1.36:1 against the ground. */ .artifact-rule { margin: 0; border: 0; border-top: 1px solid rgba(27, 35, 64, 0.16); width: 100%; } /* Each band is a wrapping flex row with both halves on the same basis, and the image is FIRST IN THE DOM in both. Band 2 sets row-reverse, so on desktop its image renders right; when the row wraps, the first DOM child takes the first line and the image lands above the copy either way. One rule therefore produces image-left, image-right and image-above-copy with no breakpoint of its own and no second markup path. The alternation carries no meaning, so nothing is lost when it collapses. The wrap lands near 910px — a consequence of the basis, not a declared breakpoint. Don't convert it to a media query. */ .artifact { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(28px, 4vw, 64px); } .artifact-flip { flex-direction: row-reverse; } .artifact-media, .artifact-copy { flex: 1 1 380px; min-width: 0; } .artifact-copy, .artifact-wide { display: flex; flex-direction: column; gap: clamp(16px, 1.7vw, 22px); } .artifact-copy h2, .artifact-wide h2 { margin: 0; font-size: clamp(26px, 3.1vw, 38px); line-height: 1.14; letter-spacing: -0.02em; } .artifact-copy p, .artifact-wide p { margin: 0; max-width: 54ch; font-size: clamp(15.5px, 1.35vw, 18px); line-height: 1.66; color: var(--ink); text-wrap: pretty; } /* Emphasis inside body copy is navy 600, never a colour — rust is 4.25:1 on Linen and fails AA at body size. Same treatment as the interior lead-ins. */ .artifact-copy strong { font-weight: 600; color: var(--navy); } /* Full width is the BAND, not the line. With no image there is no half-column, so the copy starts at the band's left edge — but the measure still caps, visibly wider than the paired bands and short of the ~80ch where lines stop being findable. Running body copy to the full 1144px would be unreadable. */ .artifact-wide p { max-width: 72ch; } /* The illustration's near-white ground disappears into Linen and the linework sits on the page rather than on a plate. No border: a border would put it back on a plate. */ .artifact-art { display: block; width: 100%; height: auto; mix-blend-mode: multiply; } /* A screenshot is framed, not blended. Multiply would multiply its palette against the ground and shift its colours, at which point it stops being evidence of a real interface. */ .artifact-shot { display: block; width: 100%; height: auto; border: 1px solid rgba(27, 35, 64, 0.18); } .artifact-link-row { margin: clamp(2px, 0.6vw, 6px) 0 0; max-width: none; } .artifact-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--orange-deep); /* 5.4:1 on Linen — measured */ font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; border-bottom: 1px solid rgba(176, 78, 25, 0.45); transition: color var(--ease), border-color var(--ease); } .artifact-link:hover { color: var(--orange-deep-hover); border-bottom-color: var(--orange-deep-hover); } /* The mobile crop is off by default; the full figure is on. */ .art-crop { display: none; } /* Band 4's slot documents itself in the markup and must contribute NOTHING to the layout. An empty div still has zero height but a flex gap either side of it, which put 144px under band 3 where the section's own 72px is the whole of the space — reading as a closing flourish, which is exactly what this section must not have. display:none takes it out of the flex flow entirely. When band 4's copy lands, replace the div with a real band and delete this rule. */ .artifact-stack > [data-band="4-reserved"] { display: none; } /* ============================================================================ PAIRED COLUMNS Two halves of one argument in one navy section. A ground change would mark a change of subject; these are the same subject seen twice. ============================================================================ */ .paired { position: relative; overflow: hidden; background: var(--navy); color: var(--white); } .pair-grid { display: grid; /* Equal tracks, and min-width:0 on both so one long string can't widen its half against the other. Gutter is roughly twice a normal section gap, so the halves read as adjacent arguments rather than one block of text. */ grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(44px, 6.5vw, 116px); } .pair-half { min-width: 0; } .pair-heading { margin: 0 0 clamp(22px, 2.6vw, 32px); font-size: clamp(26px, 3.1vw, 38px); line-height: 1.18; letter-spacing: -0.02em; color: var(--white); } /* Both halves share one row structure — a mark or a numeral in a fixed track, then a title on its own line, then body. A bold lead-in on one side against titled rows on the other reads as two different components. Every row opens with a hairline, including the first: it's what separates the rows without a gap doing the work, and it runs in both columns. */ .pair-row { display: grid; grid-template-columns: 52px 1fr; /* fixed, so both columns share one text indent. 52px is the icon diameter, and the numeral opposite is ringed to the same 52px — a bare numeral facing a 52px icon left the right column reading as the lighter of the two. */ column-gap: clamp(14px, 1.6vw, 20px); padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.22); margin-bottom: clamp(24px, 2.8vw, 34px); } .pair-row:last-child { margin-bottom: 0; } .pair-row h3 { margin: 0 0 8px; font-weight: 500; font-size: clamp(20px, 2vw, 25px); line-height: 1.25; color: var(--white); } /* Scoped to the text column, NOT `.pair-row p`. The numeral is also a
and a direct child of the row, so the looser selector beat .pair-num on specificity and silently reset it to body size and body colour — which is how the numeral treatment went missing. */ .pair-row > div p { margin: 0; font-size: var(--t-body); line-height: 1.68; color: var(--off-white); text-wrap: pretty; } /* A ringed disc matching the icon diameter opposite, so the two columns read as one system rather than art on the left and type on the right. `padding-top: 3px` is load-bearing, not a spacing preference. Satisfy's numerals carry their optical mass below the geometric centre of the em box, so a flex-centred numeral sits visibly high in the ring. Under border-box this nets out to roughly half its value as a downward nudge, which is the amount that reads as centred. `line-height: 1` is required for the same reason — an inherited line-height reintroduces the drift. This is the second use of Satisfy on the site and the only one that is not the signature. See the header note: the face is otherwise the signature alone. */ .pair-num { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin: 0; padding-top: 3px; border: 1px solid var(--linen); border-radius: 50%; font-family: var(--font-script); font-weight: 400; font-size: clamp(23px, 2.3vw, 28px); line-height: 1; color: var(--orange-brt); } /* Supplied PNG art now, not a drawn mark — the ring is inside the artwork. So this takes NO border, background or tint: anything behind it produces two concentric rings. The three files are cropped to their own ring rather than to a common canvas, which is why their source sizes differ and why they must not be re-cropped or padded — scale by width/height only. Exported at 3x (156px) rather than the site's usual 2x. These render at 52px with ring strokes around 1.6px, and a hairline is exactly where the extra density shows; the whole set costs 36KB. */ .signal-mark { display: block; width: 52px; height: 52px; margin-top: 0; } /* One thesis per section, spanning both columns. This is the sitewide callout-primary treatment on a dark ground — see `.beat p.callout-primary`, which is the same treatment on light. Two substitutions and no others: the text is white rather than navy, one step brighter than the --off-white body copy around it, and the rule is Rust, which on navy is a border colour. NOT Ember: Ember is action text on dark grounds, so a 3px Ember bar reads as a control. Do not scale it up to fill the wider column. That was the previous treatment and it read as a pull-quote closing the page rather than as the claim the section turns on. 88ch caps the line while the rule still spans the section. */ .pair-thesis { max-width: 88ch; margin: clamp(48px, 5.5vw, 80px) 0 0; padding-left: clamp(18px, 2.2vw, 24px); border-left: 3px solid var(--orange); font-family: var(--font-body); font-weight: 400; font-size: clamp(18.75px, 1.6vw, 20px); line-height: 1.5; color: var(--white); } /* ============================================================================ RING MOTIF The hero draws three rings around the headshot at 260% / 172% / 128%. Interior sections reuse that figure at background scale, holding the same radius steps (1.51× and 1.34×) with rust innermost. These are NOT hero alphas dimmed down. One hairline circle can sit near-invisible and still work; three concentric rings at this scale read as an accident unless they're deliberately visible. Not every section gets a set — a dense one goes bare. The motif marks a page's openings and closings, not its working middle. (The paired section on this page has none.) ============================================================================ */ .rings { position: absolute; top: 50%; width: 0; height: 0; pointer-events: none; } .rings-right { right: 0; } .rings-left { left: 0; } .rings span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid; display: block; } .ring-a { width: 900px; height: 900px; } /* 1.51× the next */ .ring-b { width: 596px; height: 596px; } /* 1.34× the next */ .ring-c { width: 445px; height: 445px; } /* rust, innermost, as in the hero */ /* The light-ground ring colours are gone with the set they coloured: the interior opening carries the figure now, and art and rings never stack. The values are recorded in design_handoff_interior_opening if a light section ever needs them back. */ .closing .ring-a { border-color: rgba(255, 255, 255, 0.22); } .closing .ring-b { border-color: rgba(255, 255, 255, 0.25); } .closing .ring-c { border-color: rgba(200, 90, 30, 0.31); } /* ============================================================================ INTERIOR OPENING ART The same motif as the rings, supplied as a drawing instead of drawn in CSS — its outer arcs are the ring set at a wider radius. It stands in for the ring set on an opening; the two never share a section. TWO elements, and that is the whole trick. The box clips; the image inside it is deliberately taller than the box. Do NOT collapse this to one image with `object-fit: cover`. It looks equivalent and is not. At narrow desktop widths the box is nearly square and the artwork is 4:3, so cover crops horizontally only, and the figure then lands pixel-flush against the section's top and bottom edges — measured at 924px, the image's top, the section's top and the header's bottom were all 72.94, and the image's bottom, the section's bottom and the navy band's top were all 436.61. It read as neatly boxed inside the white band, which is the opposite of the intent. `top: 0; height: 100%` inside `overflow: hidden` can only ever produce edge-to-edge; nothing extends past an edge, so nothing is cut. Oversizing the image inside its own clip severs both edges at EVERY width: 130 / 2 = 65px of artwork above the section's top edge and 65px below its bottom, so the outer arcs are cut mid-curve at the header line and at the navy band. The cut is what the visitor sees. The figure MEETS those boundaries and does not cross them, on purpose. The header is navy at 0.94 with a 10px blur, so artwork passing under it renders at roughly 6% — invisible. Downward, `multiply` against the navy section renders this file's near-white ground as no change at all. A visible crossing would need either a nav we're willing to cover or a second asset with a transparent ground, and neither exists. ============================================================================ */ .open-art { position: absolute; top: 0; height: 100%; /* Scales with the viewport, not fixed. A fixed offset against a fluid section closed the gap between the copy and the figure to roughly nothing through the 900–1100px band; the two have to move apart together. */ right: clamp(-150px, -8vw, -40px); width: clamp(320px, 40vw, 860px); overflow: hidden; pointer-events: none; display: block; } .open-art img { position: absolute; /* Pinned right. The focal point and its bracket are the subject; the lines entering from the left are approach. As the space narrows the left is given up and the focal point stays in the section at every width. */ right: 0; top: 50%; transform: translateY(-50%); height: calc(100% + 130px); width: auto; max-width: none; /* Required, not cosmetic: the file has no alpha. Multiply drops its near-white ground onto the section's white instead of drawing a visible plate over it. */ mix-blend-mode: multiply; user-select: none; } /* ============================================================================ ONWARD LIST The closing component for a screen that argues and needs to route the reader to the evidence. Sits inside the closing section on its existing ground — it is not an interruption band, and Linen stays reserved for the Right Place band. ============================================================================ */ .closing { position: relative; overflow: hidden; background: var(--white); color: var(--navy); } .onward-rule { display: block; width: 100%; height: 2px; background: var(--orange); margin-bottom: clamp(20px, 2.4vw, 30px); } .onward-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px; margin-bottom: clamp(18px, 2vw, 26px); } .onward-head h2 { margin: 0; font-size: clamp(24px, 2.8vw, 34px); letter-spacing: -0.02em; } .onward-head p { margin: 0; font-size: var(--t-body); color: var(--ink); } .onward-list { margin: 0; padding: 0; list-style: none; } .onward-list li { border-top: 1px solid rgba(27, 35, 64, 0.18); } .onward-list li:last-child { border-bottom: 1px solid rgba(27, 35, 64, 0.18); } /* Text links, not buttons. The whole row is the target. */ .onward-list a, .onward-pending { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; min-height: 44px; padding: 14px 0; color: var(--orange-deep); transition: color var(--ease); } .onward-list a:hover { color: var(--orange-deep-hover); } .onward-name { font-family: var(--font-head); font-weight: 500; font-size: clamp(19px, 1.9vw, 22px); } .onward-desc { flex: 1; font-size: var(--t-body); color: var(--ink); } .onward-arrow { font-size: 18px; } /* Newsreader 500 at 20px isn't WCAG bold, so the large-text 3:1 allowance doesn't apply and this has to clear 4.5:1. #6B7285 measures 4.85:1 on white; an earlier #8A90A2 measured 3.19:1 and failed. */ .onward-pending { color: #6B7285; } .onward-pending .onward-desc { color: #5A6178; } .onward-tag { flex-shrink: 0; padding: 4px 8px; border: 1px solid rgba(27, 35, 64, 0.28); font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; } /* ============================================================================ RESPONSIVE HEADER The site has no breakpoints anywhere else — type is clamp() and grids are auto-fit. The header is the exception, and it's a replacement rather than a reflow: below 900px the logo lockup, four tracked-caps destinations, three pipes and the bordered action stop fitting on one line even at the clamp floor, and wrapping is what the spec forbids. Standing rule: below 900px the nav is replaced, never wrapped. ============================================================================ */ .nav-burger, .mobile-menu { display: none; } @media (max-width: 899px) { .nav-links { display: none; } .nav-burger { display: flex; } .mobile-menu { display: block; } /* The hero's credentials strip goes. It's a fixed 11px tracked-caps string between two rules, and at phone width it ran to four lines of very small caps for a line that reads as a claim, not as information someone needs here. The same string still ships in the footer as plain caption copy — one string, one setting, on mobile. */ .credentials { display: none; } /* Touch sizing for the tabs: 14px of vertical padding against 13px, and a 44px floor against 40px. Keyed to the site's one breakpoint rather than to (hover: none), because the site models "phone" at 899px everywhere else and a second query would be a second breakpoint. */ .case-tab { min-height: 44px; } .case-tab[aria-selected="true"] { padding-top: 14px; padding-bottom: 14px; } /* One column, same row gap. */ .case-panel { grid-template-columns: 1fr; } /* The plate still drops, and the distinction is deliberate: a case plate is load-bearing CONTENT that cannot be read at phone width, where the opening art is decoration that only has to register. Its alt text carries the reading. */ .case-plate { display: none; } /* The band stacks instead of squeezing the row. The ±18px pull aligns the DRAWING to the text edge rather than the file's transparent margin — the marks are mostly margin, so without it they sit visibly inset. */ .fit-band-inner { max-width: var(--content-max); padding: 8px 20px 12px; flex-direction: column; align-items: stretch; gap: 4px; } .quote-mark { width: 150px; } .quote-open { align-self: flex-start; margin-left: -18px; } .quote-close { align-self: flex-end; margin-right: -18px; } .fit-copy { font-size: 17px; } /* Simplify, don't scale: one mark, no connector, no node. The portrait's own rings stay at every width — they belong to this system rather than being a separate ornament. */ .hero-art img:last-of-type, .hero-connector, .hero-node { display: none; } .hero-art img:first-of-type { left: -16%; top: -2%; width: 230px; opacity: 0.22; } /* The opening art now HOLDS at every width — it is the only thing telling one interior opening from another, and a phone reader who loses it lands on three pages that look identical. These are a second, tuned instance rather than the desktop values scaled down. The desktop clamp floors at 320px, which on a phone puts a near-full-strength figure directly behind the headline. Narrowing the box, cutting the overhang and halving the strength keeps the mark present as a watermark behind the right edge without touching the text. */ .open-art { right: -46px; width: 230px; opacity: 0.42; } .open-art img { height: calc(100% + 60px); } /* The Living PRD figure crops to the component that carries the meaning. At phone width the full figure renders every part too small to read, so the band swaps to a fixed box holding an oversized image — the same technique as the opening art. The window lands on 14–80% across and 22–58% down: the tabbed panel with its active tab and both inactive ones, plus the first journey lanes. The header, stakeholder and timeline zones are given up on purpose. Known limitation, flagged to design: even cropped, the tab labels land around 5px. The component is recognisable by shape and by the rust active tab, but the words are not readable. Landing the labels needs a simplified variant of the asset, not a different crop. */ .art-full { display: none; } .art-crop { display: block; position: relative; width: 100%; padding-bottom: 41%; overflow: hidden; } .art-crop img { position: absolute; left: -21.2%; top: -61%; width: 151.5%; max-width: none; height: auto; mix-blend-mode: multiply; } } /* Three bars in a 44px target. No border and no fill — Get in touch stays the only bordered element in the header at every width. The negative margin aligns the bars with the header's content edge rather than the target's. */ .nav-burger { width: 44px; height: 44px; margin-right: -11px; align-items: center; justify-content: center; background: none; border: none; padding: 0; cursor: pointer; } .nav-burger-bars { display: flex; flex-direction: column; gap: 5px; } .nav-burger-bars i { display: block; width: 22px; height: 2px; background: var(--white); transition: transform 180ms ease, opacity 120ms ease; } .nav-burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; } .nav-burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* An overlay, not a push: content below the header must not reflow when it opens. Always in the DOM — unmounting it kills the close transition. */ .mobile-menu { position: absolute; left: 0; right: 0; top: 100%; z-index: 60; max-height: calc(100vh - 72px); overflow-y: auto; padding: 6px clamp(20px, 4vw, 48px) 22px; background: var(--navy-deep); border-top: 1px solid rgba(200, 90, 30, 0.55); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity var(--ease), transform var(--ease); } .mobile-menu.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; } /* Rows carry their own dividers — no pipes, and no hover states, because there is no hover here. */ .m-row { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 54px; padding: 0; background: none; border: none; border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: var(--white); font-family: var(--font-body); font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; text-align: left; cursor: pointer; } .m-row-trigger { justify-content: space-between; } /* Current page: Ember plus a rust bar on the row's left edge. The desktop underline doesn't survive a full-bleed row; a left bar is the same rust doing the same job in a layout that has an edge to hang it on. */ .m-row.is-current, .m-child.is-current { color: var(--orange-brt); box-shadow: inset 2px 0 0 var(--orange); padding-left: 12px; } .m-caret { font-size: 9px; line-height: 1; transition: transform var(--ease); } [aria-expanded="true"] > .m-caret { transform: rotate(180deg); } .m-row-trigger[aria-expanded="true"] { color: var(--orange-brt); } .m-children { display: none; margin-left: 16px; padding-left: 16px; border-left: 2px solid var(--orange); } .m-children.is-open { display: block; } .m-child { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 50px; margin: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: var(--white); font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; } .m-child:last-child { border-bottom: 0; } .m-child-soon { color: #8E95A8; } .m-soon-tag { flex-shrink: 0; padding: 4px 8px; border: 1px solid rgba(255, 255, 255, 0.28); font-size: 10px; font-weight: 600; letter-spacing: 0.14em; } /* The one action, below its own rule. */ .m-action { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(200, 90, 30, 0.55); padding-bottom: 20px; } .m-touch { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 52px; padding: 0 16px; background: none; border: 1px solid var(--orange); color: var(--orange-brt); font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; } .m-touch-panel { display: none; padding-top: 14px; } .m-touch-panel.is-open { display: block; } .m-label { margin: 0 0 4px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--orange-brt); } .m-phone, .m-email { display: flex; align-items: center; min-height: 48px; color: var(--white); } .m-phone { font-size: 17px; } .m-email { font-size: 16px; word-break: break-all; margin-bottom: 6px; } .m-actions { display: flex; gap: 10px; } /* White text on a rust fill always uses the deep value — and this is the only filled action in the panel. */ .m-send, .m-copy { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 48px; font-family: var(--font-body); font-size: 11.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; } .m-send { background: var(--orange-deep); border: 1px solid var(--orange-deep); color: var(--white); } .m-copy { background: none; border: 1px solid rgba(255, 255, 255, 0.35); color: var(--sand); } /* Not in the mobile-nav handoff, but found while verifying it: the hero's Get in touch panel is 290px wide and left-anchored to its button, which sits mid-row. On a 390px phone that put its right edge at 477px and gave the home page a horizontal scrollbar — and the panel itself ran off screen when opened. Below the breakpoint it spans the CTA row instead of hanging off the button: .contact-wrap goes static so the panel resolves against .cta-row. */ @media (max-width: 899px) { .hero .cta-row { position: relative; } .hero .contact-wrap { position: static; } .hero .contact-panel { left: 0; right: 0; } .hero .contact-card { min-width: 0; } }