/* ========================================================================== AlAli Holdings — Global Stylesheet -------------------------------------------------------------------------- Design tokens (colors, type, spacing) live in :root below. Sections: Tokens · Base · Typography · Header · Menu overlay · Hero · Layout primitives · Home index · Footer · Motion · Responsive ========================================================================== */ /* -------------------------------------------------------------------------- Tokens -------------------------------------------------------------------------- */ :root { --color-bg: #F8F8F6; --color-ink: #222222; --color-muted: #777777; --color-white: #FAFAF8; --color-hairline: rgba(34, 34, 34, 0.14); --color-footer-bg: #EFF0F1; --color-footer-line: #DBDCDE; /* The site's principal reading and editorial voice — the majority of sentences, paragraphs, statements and body copy. This is the role Modern MT Pro used to hold; it is a straight substitution, Scotch Modern standing exactly where Modern MT Pro stood, not a new role of its own. Modern MT Pro has dropped out of the stack entirely — it is a distinct display face drawn for the wordmark, not a stylistic sibling of Scotch Modern, so keeping it as a fallback would hand the role back to it the moment Scotch Modern failed to load. Falls straight to system serifs. */ --font-serif: "Scotch Modern", "Times New Roman", Georgia, serif; /* The secondary, functional voice — standing in for Dia until it is licensed. Kept to its earlier limited roles: navigation, labels, metadata, small uppercase titles, captions, footer headings. It is the exception here, not the default. Self-hosted now, not a system-font request. The stack used to read "Helvetica Neue", Helvetica, Arial — every one of those names only renders correctly on macOS/iOS; Windows and Android have never had Helvetica Neue installed, so seven of this token's eight consumers (everything except the hero statement) were silently substituting to Arial or a generic sans on those platforms, at a weight-matching outcome the CSS spec leaves unspecified for 500 against a family with no real Medium. Helvetica Now Text is licensed and self-hosted, so the same two weights render identically everywhere instead. No named system fallback is kept — that would just reintroduce the same platform-dependent substitution one link down the chain; the generic keyword is the only fallback that can't misrepresent the family. */ --font-sans: "Helvetica Now Text", sans-serif; /* The page's column. Widened from 1200px, which left 1056px of content inside the gutters — the paired photographs came out at 496px, narrower than the opening statement's own 753px, so the images read as insets on the page rather than as structure. 1328px puts 1184px between the gutters and 128px of margin outside them at 1440, which is the reference's own column to the pixel. Only what is laid out grows with it: the splits, the index of pages, the footer's two blocks. Every run of text on the site is capped by its own measure in ch or em, so no line length and no type size moves. Below roughly 1470px the viewport is narrower than the column anyway and this changes nothing at all — tablets and phones are untouched by it. */ --container-max: 1328px; --gutter: clamp(1.25rem, 5vw, 4.5rem); /* Fixed rather than viewport-relative: one section interval that holds at every breakpoint, so the rhythm no longer shifts with window height. */ --section-space: 7rem; --section-space-sm: 4.5rem; /* There was a second neutral here — #F2F2F0 — for the architectural fields, a step below the page background. It is gone. Measured against the footer it was the wrong temperature: #F2F2F0 is rgb(242,242,240), warm, with blue lowest, while the footer's #EFF0F1 is rgb(239,240,241), cool, with blue highest. Set one directly above the other, as the closing chapters were, the eye read the pair as a single surface drifting from cool grey into beige. The system now holds one grey, the footer's, used by every architectural surface, and separation between a field and the footer is made with clean white space instead of with a second colour. */ /* Sticky (compact) masthead band. Desktop values only — the tablet and mobile blocks below set their own and are untouched by these. Measured against the reference's sticky header at 1440x900: its band is 106.6px with the wordmark centred on the midline, 35.2px clear above and below. Ours was 96px, about 11% shorter, and the wordmark sat small inside it — the compression the band reads with. 6.65rem lands the band on 106.4px, within a pixel of the reference. The wordmark is opened 9% to carry the taller band; it is not taken to the reference's share of band height, because that mark is 6.5:1 and ours is 13.6:1 — matching the ratio would mean a wordmark half again as wide as theirs. By width against the viewport, which is the comparable measure, ours already sits ahead of the reference. */ --header-height: 6.65rem; --brand-w: 21.8rem; /* Adaptive sticky surface. The low alpha is deliberate: the page and photography passing underneath are what give the bar its tone, so it darkens over dark content, warms over warm photography and settles cool and neutral over the page background. */ --surface-tint: rgba(248, 248, 246, 0.58); --surface-tint-fallback: rgba(248, 248, 246, 0.94); --surface-blur: blur(45px) saturate(160%); --surface-edge: rgba(34, 34, 34, 0.06); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --dur-slow: 1.1s; --dur-med: 0.6s; --dur-fast: 0.3s; } /* Modern MT Pro's @font-face is gone. The wordmark never depended on it — every instance on the site is pre-drawn vector outlines ( elements), never live text — so once --font-serif stopped naming it, nothing on the site referenced this file at all. Its preload links are removed with it; serving an @font-face and preloading a file that renders nowhere would just be wasted bytes on every page load. */ @font-face { font-family: "Scotch Modern"; src: url("../fonts/ScotchModern-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } /* Helvetica Now Text — Monotype, licensed. Two weights, the only two the site uses (see --font-sans above): Regular for the hero statement, Medium for every other functional/navigational role. Both files declare the same font-family with a different font-weight, exactly like the pattern above, so the existing font-weight: 400 / 500 declarations throughout the stylesheet resolve to the correct file without any of them changing. */ @font-face { font-family: "Helvetica Now Text"; src: url("../fonts/HelveticaNowText-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Helvetica Now Text"; src: url("../fonts/HelveticaNowText-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } /* -------------------------------------------------------------------------- Base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; /* Matches body's own background so iOS Safari's elastic overscroll bounce reveals the page's canonical light tone instead of the browser's default white canvas. */ background: var(--color-bg); } body { background: var(--color-bg); color: var(--color-ink); /* Serif by default — Scotch Modern is the site's principal voice, the role Modern MT Pro used to hold here. Every text role sets its own font-family explicitly, so this is only ever a fallback, but the fallback should match the majority of the text on the page. */ font-family: var(--font-serif); font-size: 1rem; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh; } img, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } /* Page fade-in / fade-out for editorial page transitions */ body { opacity: 1; transition: opacity 0.35s ease; } body.is-leaving { opacity: 0; } ::selection { background: var(--color-ink); color: var(--color-bg); } /* -------------------------------------------------------------------------- Typography -------------------------------------------------------------------------- */ .label { font-family: var(--font-sans); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-muted); } /* Type scale — three tiers roughly 1.37x apart, so each is clearly a step down from the one above rather than competing with it. Leading opens as the sizes fall, toward the reference's 1.5. */ .display { font-family: var(--font-serif); font-weight: 400; /* The reference renders Scotch Modern at the browser default (no forced grayscale smoothing, no optimizeLegibility). Forcing antialiased here thins the strokes; matching the default is the one rendering property that differs once cut, weight and metrics are ruled out. */ -webkit-font-smoothing: auto; text-rendering: auto; /* Stepped down about a tenth at the top. At 2.5rem the opening statements read as headlines; the intent is an architectural proportion, where the statement occupies the page by breadth rather than by size. The reference sets its equivalent smaller still, and wider. One curve for every width. The scale used to be set twice — a phone rule under 560 and a base rule above it — and the two did not meet: at 560 the statement stood at 25.6px and at 561 it fell to 20.8px, shrinking as the window grew. Drawn as a single ramp between the 1.3rem floor and the 2.25rem cap, the type only ever grows with the page, and a phone shows a smaller copy of the same composition rather than a different one. */ font-size: clamp(1.3rem, 0.91rem + 1.488vw, 2.25rem); line-height: 1.38; /* Restored to -0.004em, the tracking this rule carried before Scotch Modern replaced Modern MT Pro. This is a substitution, not a retuning — the surrounding values (size, leading, tracking) carry over unchanged as the baseline; they are only revisited if the new face genuinely needs it, not by default. */ letter-spacing: -0.004em; } /* Scotch Modern's text cut, not the Display one — one tier down in scale from .display, so the general-purpose weight is correct here. No change to the property itself: --font-serif now names Scotch Modern directly. */ .lead { font-family: var(--font-serif); font-size: clamp(1.2rem, 2.2vw, 1.8rem); line-height: 1.45; -webkit-font-smoothing: auto; text-rendering: auto; } /* Restored to serif. This is the site's long-form descriptive copy — the split paragraphs explaining what the Group does — and belongs to Scotch Modern's principal reading role, the same as every other paragraph and statement on the site. Size and leading restored to their original values, unchanged since before Modern MT Pro was replaced. */ .body-editorial { font-family: var(--font-serif); font-size: clamp(1.0625rem, 1.45vw, 1.3125rem); line-height: 1.62; -webkit-font-smoothing: auto; text-rendering: auto; } /* -------------------------------------------------------------------------- Header brand — shared with the full-screen menu overlay -------------------------------------------------------------------------- Once the header itself for every page; now only the mobile/tablet menu overlay uses it (.menu-overlay__top .site-header__brand below), since every page's sticky header runs on .masthead. Kept under its original name rather than renamed, to avoid touching the overlay markup shared across all eight pages for a purely cosmetic class rename. The markup is now the exact same inline as .masthead__brand — same viewBox, same path data — rather than an loading wordmark-dark.svg as a separate file. The two were nominally the same size (same computed width/height) but rendered through different browser code paths, which produced a visible sub-pixel jump when the menu opened on real devices. Using the identical element removes that gap entirely: this rule tracks var(--brand-w) exactly like the sticky header's own wordmark, at every breakpoint the overlay can actually open at (≤900px — it's display:none above that). */ .site-header__brand { display: inline-flex; align-items: center; color: inherit; } .site-header__brand svg { width: var(--brand-w); height: auto; display: block; } /* Hamburger — three lines, no box */ .menu-toggle { appearance: none; background: none; border: 0; cursor: pointer; color: inherit; display: none; flex-direction: column; justify-content: center; gap: 6px; width: 2.25rem; height: 2.25rem; padding: 0.35rem 0; } .menu-toggle span { display: block; width: 100%; height: 1px; background: currentColor; transition: transform 0.45s var(--ease-out), opacity 0.3s ease; } /* The middle rule is inset, giving the mark a quiet editorial asymmetry */ .menu-toggle span:nth-child(2) { width: 66%; margin-left: auto; transition: width 0.45s var(--ease-out); } .menu-toggle:hover span:nth-child(2) { width: 100%; } /* -------------------------------------------------------------------------- Full-screen menu overlay (mobile / tablet) -------------------------------------------------------------------------- */ .menu-overlay { position: fixed; inset: 0; z-index: 70; background: var(--color-bg); color: var(--color-ink); display: flex; flex-direction: column; padding: var(--gutter); /* Extra bottom padding, so the flex-centred navigation sits higher in the frame rather than on the screen's true centre — the quieter, more restrained placement. (Originally sized to the contact block this overlay no longer carries; kept now because it produced the preferred composition on its own merits, independent of that history.) */ padding-bottom: calc(var(--gutter) + 3.64rem); opacity: 0; visibility: hidden; transition: opacity 0.45s ease, visibility 0s linear 0.45s; } .menu-overlay.is-open { opacity: 1; visibility: visible; transition: opacity 0.45s ease; } .menu-overlay__top { /* Same reasoning as .masthead: grows by the top inset so the wordmark and close control — the open-menu equivalent of the header's wordmark and hamburger — clear the notch/Dynamic Island here too. */ height: calc(var(--header-height) + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); margin: calc(-1 * var(--gutter)) calc(-1 * var(--gutter)) 0; padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)); display: flex; align-items: center; justify-content: space-between; } .menu-close { appearance: none; background: none; border: 0; cursor: pointer; color: inherit; width: 2.25rem; height: 2.25rem; position: relative; } .menu-close::before, .menu-close::after { content: ""; position: absolute; top: 50%; left: 50%; width: 1.5rem; /* Drawn a hair lighter than the toggle it replaces. At 1.5px the cross carried more colour than the wordmark opposite it and read as the loudest mark on the screen. 1px lets it sit back without losing the arm length, so the 2.25rem hit area and the icon's legibility are both unchanged. */ height: 1px; background: currentColor; } .menu-close::before { transform: translate(-50%, -50%) rotate(45deg); } .menu-close::after { transform: translate(-50%, -50%) rotate(-45deg); } .menu-overlay__nav { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 2.25rem; } /* Restored to serif, at its original editorial-statement scale. This full- screen menu is the mobile equivalent of the site's declarative statements, not the compact persistent nav bars, so it keeps the principal reading voice rather than the secondary functional one. */ .menu-overlay__nav a { font-family: var(--font-serif); font-size: clamp(2rem, 8vw, 3.25rem); line-height: 1.1; /* Kept on the pre-change rendering deliberately: unlike the editorial roles, the auto/auto match read worse here and was reverted. */ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; opacity: 0; transform: translateY(1.25rem); transition: opacity 0.6s ease, transform 0.7s var(--ease-out); } .menu-overlay.is-open .menu-overlay__nav a { opacity: 1; transform: translateY(0); } .menu-overlay.is-open .menu-overlay__nav a:nth-child(1) { transition-delay: 0.10s; } .menu-overlay.is-open .menu-overlay__nav a:nth-child(2) { transition-delay: 0.18s; } .menu-overlay.is-open .menu-overlay__nav a:nth-child(3) { transition-delay: 0.26s; } /* -------------------------------------------------------------------------- Home hero — full viewport, edge-to-edge video -------------------------------------------------------------------------- */ .hero { position: relative; height: 100vh; height: 100lvh; /* Floor borrowed from the reference: below this the composition breaks down on very short landscape viewports. */ min-height: 430px; width: 100%; overflow: hidden; color: var(--color-white); background: var(--color-ink); } .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Flat scrim for legibility of white typography over footage */ .hero__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.30); } .hero__content { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; align-items: center; } /* The home hero statement and the interior opening-plate statements are one and the same composition — shared here so they can never drift apart. */ .hero__tagline, .plate__statement { position: absolute; /* The reference's hero statement resolves to an optical centre of 48.44% of the viewport at every breakpoint. Measured, not estimated. */ top: 48.4%; left: 50%; transform: translate(-50%, -50%); z-index: 2; /* The measure is set in em, so it scales with the type itself. Because the tracking is em-based too, every width in this block keeps a fixed ratio to the font size — which makes the line breaks identical at every breakpoint instead of collapsing on tablet. 24em sits inside the window that keeps the one-line statement on one line and the two-line statements on two. */ /* Measure in em keeps line breaking scale-invariant. Narrowed from 24em to hold the existing line breaks at the reference's tighter tracking. */ width: min(18em, 90vw); /* A one-line statement needs a reserved box, or centring drops it half a line below where a two-line statement begins. But reserving the full two lines (3em) over-corrects: the single line then sits on the others' first line with its band empty beneath, and reads high. 2.25em splits the two anchors — half a line above the block's centre, half a line below its first line — which is where a single line looks level with a two-line one. A no-op at two lines, whose height is 3em. */ min-height: 2.25em; text-align: center; font-family: var(--font-sans); /* One continuous curve, no breakpoints. 1.38vw alone reaches the 0.82rem floor at 950px, so every viewport from 320 to 950 rendered at a flat 13.12px. Phones carry that well — the statement holds half the frame — but by 768–1023 the photograph has doubled while the type has not, and the statement, which below 1024 is the only centred element in the hero, falls to a fifth of the frame and recedes out of the composition. The second ramp lifts that middle range. It is drawn through two fixed points so both established endpoints survive untouched: it equals the floor exactly at 430px, so 320–430 stay pinned at 13.12px, and it meets 1.38vw exactly at 1280px, so every width from 1280 up is the desktop curve unchanged. max() rather than a media query, because the desktop ramp is only 14.13px at 1024 — below any honest tablet size. Merging there would mean shrinking the statement as the viewport grew. Taking whichever ramp is larger keeps the size monotonic across the compact-to-expanded masthead breakpoint: 1023 → 1024 rises, it never steps back. */ font-size: clamp(0.82rem, max(1.38vw, 0.676rem + 0.535vw), 1.25rem); /* Tested at Medium (500) and reverted. Compared directly against Regular at real production scale, on the live composition, not just enlarged: Medium reads as a visibly heavier, more solid mark against the photograph — closer to a headline announcing itself than a caption dissolving into the image. That's a real change of character, not a lift in confidence, and it works against everything the rest of this statement's typography has been tuned toward — quiet, embedded, receding into the photograph rather than sitting on top of it. Regular is what keeps that. */ font-weight: 400; /* Tracking taken from the reference at 0.1em, held there through the Helvetica Neue → Helvetica Now Text switch. Nudged 0.01em tighter here — a conservative, single-step test of whether closing the tracking slightly recovers some of the presence the wider Helvetica Now outlines cost the statement, without touching weight, size or leading. Leading is unchanged at 1.5. */ letter-spacing: 0.09em; text-transform: uppercase; line-height: 1.5; color: var(--color-white); } /* Gentle entrance for the hero statement */ .hero__tagline { animation: hero-rise-centered 1.4s var(--ease-out) 0.5s both; } @keyframes hero-rise-centered { from { opacity: 0; transform: translate(-50%, calc(-50% + 1.5rem)); } to { opacity: 1; transform: translate(-50%, -50%); } } /* -------------------------------------------------------------------------- Home masthead — a single header that transforms between two states -------------------------------------------------------------------------- Two independent axes: LAYOUT — `.is-compact`. Absent only on desktop, only until the visitor first scrolls: the oversized wordmark centred across the hero with the navigation beneath. Once set the class is never removed for the rest of the visit, so returning to the top keeps the compact bar. SURFACE — `.is-lifted`. Tracks scroll position both ways: off at the very top (transparent, #FAFAF8 type over the hero), on everywhere else (the adaptive translucent surface with #222222 type). Both states share the same DOM nodes; only `top`, `width` and `transform` change, so the wordmark appears to scale and travel rather than being swapped for a second header. Children are absolutely positioned inside a fixed container, so nothing here contributes to layout or causes shift. -------------------------------------------------------------------------- */ :root { /* Wordmark aspect ratio is 1743.863 / 128.155 = 13.608 : 1 */ --mh-duration: 280ms; --ease-mh: cubic-bezier(0.4, 0, 0.2, 1); } .masthead { position: fixed; inset: 0 0 auto 0; z-index: 60; /* Grows by the notch/Dynamic Island inset (0 on unsupported browsers and non-notched devices, via the env() fallback) so the bar's own surface still fully contains the wordmark/nav once they're pushed clear of it below. */ height: calc(var(--header-height) + env(safe-area-inset-top, 0px)); /* Hero state: white type floating directly on the photography — no surface, no panel, no edge. */ color: var(--color-white); background-color: transparent; border-bottom: 1px solid transparent; pointer-events: none; /* backdrop-filter is deliberately NOT transitioned. The reference toggles its sticky surface with transition-duration: 0s — animating a large blur forces a full-surface recomposite every frame, which is what produced the delayed reveal, flicker and repaint strip on the way back to the top. Geometry still animates; the surface simply switches. */ transition: height var(--mh-duration) var(--ease-mh), background-color var(--mh-duration) var(--ease-mh), color var(--mh-duration) var(--ease-mh), border-color var(--mh-duration) var(--ease-mh); } .masthead > * { pointer-events: auto; } /* Suppresses the transition while the initial state is resolved on load, so a page opened part-way down never animates into place. */ .masthead.is-preload, .masthead.is-preload .masthead__brand, .masthead.is-preload .masthead__nav { transition: none; } /* Compact geometry (also the default on tablet and mobile). The wordmark, the navigation and the menu toggle all hang from the same axis — the bar's midline — and are pulled back by half their own height, so their optical centres coincide exactly whatever their individual heights are. No per-element top offsets are involved. */ .masthead__brand, .masthead__nav, .masthead .menu-toggle { position: absolute; /* Same optical centre as before, just carried down by the safe-area inset so it clears the notch/Dynamic Island — 0 on devices/browsers without one, so this is a no-op there. */ top: calc(env(safe-area-inset-top, 0px) + var(--header-height) / 2); } /* Wordmark ------------------------------------------------------------- */ .masthead__brand { left: 50%; width: var(--brand-w); /* left edge lands on the gutter (or the safe-area inset, if a landscape notch/rounded corner would otherwise demand more room than the gutter already gives); pulled onto the shared midline */ transform: translate(calc(max(var(--gutter), env(safe-area-inset-left, 0px)) - 50vw), -50%); transition: top var(--mh-duration) var(--ease-mh), width var(--mh-duration) var(--ease-mh), transform var(--mh-duration) var(--ease-mh); } .masthead__brand svg { display: block; width: 100%; height: auto; } /* Navigation ----------------------------------------------------------- */ .masthead__nav { left: 50%; display: flex; align-items: center; gap: clamp(1.75rem, 3.5vw, 3.25rem); /* right edge lands on the gutter; pulled onto the shared midline */ transform: translate(calc(50vw - var(--gutter) - 100%), -50%); transition: top var(--mh-duration) var(--ease-mh), gap var(--mh-duration) var(--ease-mh), transform var(--mh-duration) var(--ease-mh); } .masthead__nav a { font-family: var(--font-sans); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; position: relative; /* Symmetric padding keeps the link box centred on its own text, so centring the box centres the lettering rather than the underline. */ padding-block: 0.35rem; } .masthead__nav a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease-out); } .masthead__nav a:hover::after { transform: scaleX(1); } /* Menu toggle ---------------------------------------------------------- */ .masthead .menu-toggle { /* Same landscape-notch allowance as the wordmark's left edge, above. */ right: max(var(--gutter), env(safe-area-inset-right, 0px)); transform: translateY(-50%); } /* Lifted state: the adaptive surface and the ink colours. Tracks scroll in both directions, so returning to the very top hands the hero back its #FAFAF8 type without disturbing the compact layout. --------------------- */ .masthead.is-lifted { color: var(--color-ink); background-color: var(--surface-tint-fallback); border-bottom-color: var(--surface-edge); } @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .masthead.is-lifted { background-color: var(--surface-tint); -webkit-backdrop-filter: var(--surface-blur); backdrop-filter: var(--surface-blur); } } /* STATE A — desktop masthead ------------------------------------------- */ @media (min-width: 1024px) { /* Measured against the reference at 1440x900: its wordmark occupies 82.2% of the viewport and ours 80.0% — so the wordmark is not oversized and is left at 80vw. What differed was the space around it: its top padding was 1.88x the reference's, and the gap beneath it 3.2x looser relative to wordmark height. Both were corrected against the reference, then eased back for this composition: the wordmark sits a little lower (3.25rem) and the interval beneath it is opened to 2.75rem. The navigation stays on the wordmark's centre axis rather than being pulled under its first letter; proximity and scale do the anchoring. */ .masthead:not(.is-compact) { /* 3.25rem top + wordmark + 2.75rem row gap + nav + foot */ height: calc(9.5rem + 5.879vw); } .masthead:not(.is-compact) .masthead__brand { /* Set a little lower in the frame so the wordmark sits within the composition rather than against its top edge. Scale unchanged. */ top: 3.25rem; width: 80vw; transform: translate(-50%, 0); } /* The sticky navigation is the canonical one. This state overrides only placement — where the navigation sits in the two-row opening composition. Size, weight, tracking, leading, item spacing and padding are inherited from .masthead__nav / .masthead__nav a above, so both states are one navigation on two surfaces. Colour is the sole remaining difference and it comes free: the links use currentColor, and .masthead flips between #FAFAF8 and the ink tone with the surface. */ .masthead:not(.is-compact) .masthead__nav { /* 3.25rem brand top + 5.879vw wordmark height + 2.75rem row gap. Only this interval widens — item spacing, typography and the centre axis all still come from the canonical (sticky) navigation rules. */ top: calc(6rem + 5.879vw); transform: translate(-50%, 0); } /* Entrance: the masthead settles in with the hero statement */ .masthead__brand, .masthead__nav { animation: mh-rise 1.2s var(--ease-out) both; } .masthead__nav { animation-delay: 0.18s; } } @keyframes mh-rise { from { opacity: 0; } to { opacity: 1; } } /* -------------------------------------------------------------------------- Opening plate — the full-screen editorial opening of an interior page -------------------------------------------------------------------------- The image is the introduction: a full viewport of atmosphere carrying the transparent masthead and a single statement, with the article beginning only once the visitor scrolls past it. -------------------------------------------------------------------------- */ .plate { position: relative; width: 100%; /* The same floor the hero uses, so all four pages size their opening identically. Written with max() because a plain later declaration overrides the 430px floor instead of combining with it. */ min-height: 100vh; min-height: max(430px, 100lvh); overflow: hidden; color: var(--color-white); background: var(--color-ink); } .plate__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Flat scrim — legibility only, no gradient. Slightly stronger than the hero's: several plate images are busier behind the masthead. */ .plate__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.34); } /* Composition and typography are inherited from the shared rule alongside .hero__tagline; only the reveal belongs to the plate. The statement resolves in place rather than arriving: opacity and a half-step of blur, with no transform of any kind, so it never leaves the position it holds in the composition. */ .plate__statement { animation: plate-resolve 520ms cubic-bezier(0.33, 1, 0.68, 1) 120ms both; } @keyframes plate-resolve { from { opacity: 0; filter: blur(2px); } to { opacity: 1; filter: blur(0); } } /* -------------------------------------------------------------------------- Layout primitives -------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section-space); } /* A closing movement once carried extra top padding here to mark itself as a conclusion. It no longer does: the change of surface says it far better than space could, and the two together said it twice. The closing chapters now take the ordinary section rhythm on the neutral field, which is also the rhythm the home page's field has always used. */ /* -------------------------------------------------------------------------- Introductory statements — the home declaration and the interior ledes -------------------------------------------------------------------------- These once carried asymmetric padding, sized on the assumption of a particular neighbour: more space above than below, on the theory that the section following would contribute its own share and the two together would balance. That assumption broke the first time a neighbour's own spacing or background changed — which is exactly what happened when the grey field moved earlier in each page's composition — and it had already produced four different top/bottom ratios across four pages, none of them symmetric. The fix does not re-tune the numbers again. It removes the dependency: the section centres its content vertically and no longer needs to know what follows it. padding-block is symmetric and acts only as a floor, so the statement sits exactly as far from the top of its field as from the bottom regardless of how many lines it wraps to or what comes next. calc(var(--section-space) + 1rem) — one step more generous than an ordinary section, which is what an opening statement is. Measured against the reference's own centred statement at 1440 (389px total, split exactly 123/123 around 143px of text): our home statement at the same width now runs 128/128 around 149px of text, the same proportion by the same method, not the same numbers copied over. Because it is expressed against the token, it resolves to 8rem on desktop and tablet and steps down to 6rem under the mobile block below with it — one rule for every width, the same principle the type scale already uses. */ .section--intro, .page-lede { display: flex; flex-direction: column; justify-content: center; padding-block: calc(var(--section-space) + 1rem); } /* Kuwait's lede runs into the Exchange composition below it with the same 8rem it opens with (128px), plus that section's own 7rem top padding (112px) — 240px total, the widest gap on the page before any image or grey field has appeared to justify it. First trimmed to 212px (128 + 84 bottom... since revised below), for a tighter transition while the lede's own internal rhythm (label, headline, paragraph) is untouched — only the space after the paragraph, before the next composition, changes. A second, smaller pass takes both ends down further: the top (before "Kuwait") from 128px to 114px, a restrained ~11% so the page still opens on institutional, unhurried whitespace under the hero, not a noticeably tighter one. The bottom goes from 100px to 88px; paired with the Exchange section's own top-padding trim below, the total gap before "Over many decades" lands at 184px, ~13% under the first pass's 212px — again small enough to read as resolved rather than redesigned. */ .page-kuwait .page-lede { padding-top: 7.125rem; padding-bottom: 5.5rem; } /* Desktop half of the same second pass, paired with .page-lede's own bottom trim above: 112px down to 96px, a ~14% cut that — combined with the lede's 88px — brings the full pause before "Over many decades" to 184px (was 212px). Tablet and mobile take their own, independently-sized cuts from their own current numbers in the breakpoint blocks below, not this figure scaled down. */ .page-kuwait .section--exchange { padding-top: 6rem; } /* Size and leading come from .display itself, so the homepage statement and the interior page ledes are one tier doing one job. Only the measure is specific here. Opened from 15.7em. Held in em, so the measure keeps a fixed ratio to the type and the composition survives the change of scale rather than being re-tuned per breakpoint. At 21em it lands within a few pixels of the interior ledes' 40ch, so both opening statements take the same breadth. The .statement descendant is in the selector to carry it past `.statement .display`, which sets the 30ch measure for the centred statements further down the page and would otherwise tie with this rule and win on order alone. This statement is the page's opening, not one of those, and takes the wider measure. */ .section--intro .statement .display { max-width: 21em; margin-inline: auto; } /* The home introduction's own type scale — larger than the shared .display/ .body-editorial clamps used everywhere else, because this is the site's one true identification of the Group, not an interior page's opening or a reflective aside, and the previous sizes (36px/20.88px at 1440) read as too quiet for that role. 2.75rem (44px) for the statement — a fifth larger, chosen as the point where the line clearly gains authority without tipping into a hero-scale headline the restrained page doesn't want. 1.5rem (24px) for the paragraph beneath it — proportionately smaller so the hierarchy holds, but a real size in its own right rather than a caption's. Both max-widths are already held in em/ch (21em above, 50ch on the paragraph below), so they scale with these new sizes automatically: every line breaks exactly where it did before, just larger — confirmed by measuring each candidate size directly rather than assumed. Tablet and mobile take their own independently-judged sizes below, not this figure scaled down. */ .section--intro .statement .display { font-size: 2.75rem; } .section--intro .statement .body-editorial { font-size: 1.5rem; } /* The home introduction carries a supporting paragraph beneath its statement — the account of how the Group works, which used to sit on the grey field below. Two properties are specific to it; everything else comes from the shared .statement composition. The gap first. .statement's own 2.25rem is the interval between parts of a single utterance, and at that distance the paragraph read as a fourth line of the statement rather than an answer to it. 3.5rem — the interval the legal pages already use between blocks that are related but distinct — separates the two levels without opening a section break between them. Then the measure. The shared rule sets 56ch, tuned for the reflective statements further down where the paragraph sits under a smaller .lead. Here it sits under the page's largest type, and the measure is chosen for whichever setting closes on a full line rather than stranding a tail. 65ch (679px at 1440) did that for the previous wording. It no longer does: the finalized copy sets 635/571/153 there, stranding its last line at under a quarter of the measure. Re-measured across the range, 50ch (522px) is the value that resolves it — 437/467/454, three lines within 30px of each other, closing at 87% of the measure. The intervening values are worse, not better: 58ch and 56ch close at 259px, 54ch and 52ch at 297px. Tablet follows the same curve from the same rule (356/380/370 at 834), and on a phone the container is already narrower than either measure, so the mobile composition is untouched. It stays narrower than the statement above it, which is the opposite of the reflective statements' order and is meant to be: there the .lead and its paragraph are close enough in size that the wider block reads as the base of the composition, while here the display statement is large enough to be the base itself, and the paragraph tapers beneath it — more so now that the statement resolves to two lines rather than four. Held in ch, so the measure counts characters rather than pixels and the line breaks above hold as the type scales down with the viewport. Scoped to .section--intro so the 56ch composition elsewhere is untouched. */ .section--intro .statement { gap: 3.5rem; } .section--intro .statement .body-editorial { max-width: 50ch; } /* The introduction's lower margin, and the reason it is not symmetric with its upper one. The shared rule above sets padding-block symmetrically, on the principle that a statement should sit as far from the top of its field as from the bottom. That principle is right, but on this page the field is not the section. The section below the introduction is also white and carries no edge of its own, so the canvas the eye actually reads runs from the hero's bottom edge — a hard boundary — down to the first navigation image, the next thing on the page with an edge. Symmetric section padding therefore produced an asymmetric canvas: 128px of white above the statement against 240px below it, and the introduction sat visibly high in its own space. The space above is the reference and does not move. A first pass closed the gap below to 48px, carrying the canvas to 160px against the 128 above — a quarter more, on the reasoning that true mathematical centring reads low and so needs a margin to correct for it. Set against the page at full scale, that margin overshot: 160 still read as its own pause before the navigation rather than as the floor of one continuous composition. 24px closes the canvas to 136px, the point where the panels begin to read as the next thing the eye meets rather than a section away from it — still a hair more than the 128 above, so the statement doesn't fall into exact, mechanical symmetry, but no longer enough to register as its own interval. The navigation keeps its own section spacing untouched and simply arrives sooner. */ .section--intro { padding-bottom: 1.5rem; } /* The page's closing white, between the last navigation panel and the footer's grey edge. The footer is a different surface, so this interval is the whole of the separation between them. Widened four times now, each pass smaller than the last as the composition settled: 28% over the original 4.5rem to reach 92px, a further 12% to 103px, then 12% again to 115px. This fourth pass is the smallest correction yet — 5% more, taking 1.6x to 1.68x and the desktop gap to 121px. Expressed against the token rather than as a fixed length, so the phone takes the same proportional increase from its own smaller 3.5rem. */ .page-home main > section:last-child { padding-bottom: calc(var(--section-space-sm) * 1.68); } /* Interior page opener — sits below the fixed header */ .page-opener { padding-top: calc(var(--header-height) + 6rem); padding-bottom: var(--section-space-sm); } /* Lede — the article's opening section, following an opening plate. No header clearance is needed: the plate has already carried it. Padding and vertical centring now come from the shared rule above, so the lede takes the same treatment whether the page continues into a photograph, a grey field, or another white section — one composition, not three. */ .page-opener .label, .page-lede .label { display: block; margin-bottom: 2.25rem; } /* Opened from 24ch. At 24 characters the ledes broke into five and six short lines and read as a narrow stack; at 40 they settle into three or four full ones. The unit is ch, so the measure counts characters rather than pixels and holds the same line economy as the type scales down — and on a phone, where 40ch exceeds the column, the container takes over and the statement simply fills its page. */ .page-opener .display, .page-lede .display { max-width: 40ch; } /* Legal-page title, mobile/tablet only: the shared .display curve above, scaled by a flat 1.11 (11%) at every width, so it's still one continuous ramp — not a new size — just proportionally larger. Scoped to .page-opener only, so .page-lede (the interior hero pages' own ledes) is untouched. Bounded at 1439px, the same "everything narrower than desktop" cutoff already used elsewhere in this file for .display-adjacent sizing, so desktop's own 2.25rem cap is reached exactly as before above that width. */ @media (max-width: 1439px) { .page-opener .display { font-size: clamp(1.443rem, 1.0101rem + 1.652vw, 2.4975rem); } } /* The Group's lede takes a wider measure than the shared 40ch, for the same reason the shared value exists at all: to hold the statement to three full lines rather than letting it break into a short stack. Its finalized sentence is the longest of the three ledes, and at 40ch (720px at 1440) it breaks to four with a weak tail — 692/702/489/370. The previous, shorter wording set three even lines at that measure (692/652/666), and that three-line rhythm is what the page's opening was built around. 46ch (828px) restores it: 797/801/666, closing at 80% of the measure. 42ch and 44ch still give the four-line break, so this is a threshold rather than a preference. Scoped to this page so Kuwait and Activities keep the shared 40ch their own ledes are set for, and placed above the tablet block so that range's own 68% — an established refinement measured against its own column, and one the finalized copy does not disturb — continues to win below 1025px. On a phone the container is narrower than either measure and takes over, exactly as the shared rule intends. */ .page-the-group .page-lede .display { max-width: 46ch; } /* This lede carries a "The Group" label above the statement that Kuwait, Activities and the home intro don't have visible here, so the shared symmetric padding-block above reads as tighter below the statement than above it: the label's own line plus its 2.25rem margin adds ~54px (3.375rem) of content into the top half that the bottom half doesn't carry, pushing the statement below true centre. Restoring that same 3.375rem to the bottom brings the statement back to sitting in the middle of its white space — the same fix already applied at mobile below, extended here to desktop, so all three breakpoints use the identical formula against their own token values. */ .page-the-group .page-lede { padding-bottom: calc(var(--section-space) + 1rem + 3.375rem); } /* Centered editorial statement */ .statement { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2.25rem; } /* Opened from 30ch. At that measure the reflective statements held 452px in a 1440px page and sat marooned in it — and where one is followed by its muted paragraph, the quieter 21px text ran 612px wide beneath a 29px statement pinched to 452px, so the smaller type was the broader block and the composition read narrow-over-wide. 38ch brings the statement to roughly 572px: just inside the paragraph below it, as a larger size should be, and still well short of the opening statement's 756px, so the tiers stay in their order. The measure is in ch, so it holds its line economy as the type scales down and needs no breakpoint of its own. */ .statement .lead, .statement .display { max-width: 38ch; margin-inline: auto; } .statement .body-editorial { max-width: 56ch; margin-inline: auto; } /* A broader measure for a closing statement long enough that 38ch turns it into a column. The Group's closing belief runs to eight lines at 38ch, the last of them a third of the measure, and the block reads as a tall narrow stack rather than a settled statement. 52ch is the first measure that resolves it into five, and the setting is unusually even at that width — 721/736/724/721/689 of rendered text at 1440, a spread of under 7% with a nearly full closing line. Six lines is what every narrower value gives, and each of them strands the last line at 335px, so this is not a matter of taste between adjacent options: below 740px the paragraph does not resolve, and above it the closing line starts shortening again (60ch returns to 335px, 64ch to 177px). Held in ch so it scales with the type — tablet lands on the same five even lines — and on a phone the container is narrower than the measure anyway, so the mobile composition is untouched. A modifier rather than a change to .statement .lead, which is shared with the closing statements on Kuwait and Activities; those are shorter and sit correctly at 38ch. */ .statement--wide .lead { max-width: 52ch; } /* The Group's closing belief, given more presence. font-weight is set explicitly to 400 — the same weight the page's own opening statement (.page-lede .display) carries — rather than left to synthesize a heavier one: Scotch Modern loads a single 400 file, and any weight at or above 600 triggers the browser's own faux-bold, which read as overly heavy against the rest of the page's single-weight type. 400 matches the intro statement's own rendering exactly, so the two read as the same visual weight; the presence instead comes from size alone. Font-size 31px (1.9375rem), up from the shared clamp's 28.8px ceiling. The max-width above is already held in ch, so it grows with the type automatically — 806px at this size, wider than before without a separate edit — and the five-line, even-margined break the ch value was tuned for holds exactly as it did at 28.8px. Tablet and mobile take their own sizes below, not this figure scaled down. */ .section--conclusion .lead { font-weight: 400; font-size: 1.9375rem; } /* Activities' closing Principles statement: widened from the shared 38ch/56ch so the belief and its supporting paragraph read as more settled, less narrow blocks. 48ch (694px at 1440, up from the previous pass's 44ch/634px) is the measure that resolves the finalized copy to three even lines — 685/664/520, the last line at 76% — rather than four with a short 98px tail; 62ch (+10.7%, 585→647px) for the body-editorial is unchanged. Both held in ch, so tablet gets the same proportionate widening from its own current measure, well inside its own container. On a phone the container is already narrower than 38ch, so neither reaches a wider rendered width there and the mobile composition is untouched — one rule serves all three breakpoints without a query. A modifier rather than a change to the shared rule above, which the "Through these activities" statement on this same page also uses and takes its own, separate widening below. font-weight is set explicitly to 400 here too — matching the Activities intro statement (.page-lede .display) exactly, the same fix already made to The Group's closing belief. Both this lead and the intro statement already computed to 400 by default (neither inherits a heavier weight from anywhere), so this doesn't change the rendered result; it pins it, so the match holds regardless of whatever else changes on the page later. */ .statement--principles .lead { max-width: 48ch; font-weight: 400; } .statement--principles .body-editorial { max-width: 62ch; } /* The Principles supporting paragraph, given slightly more size than the shared body-editorial clamp's 20.88px — enough to read as considered against the page's other running copy, while staying well short of the main belief above it (28.8px) so the hierarchy holds. font-size 22px (1.375rem) is the same modest lift used for The Group's editorial paragraphs. font-weight is explicitly 400 — not the 600 an earlier pass tried here for extra presence. Scotch Modern loads a single 400 file, so 600 forced the browser's own synthetic bold, which at this size read as heavy and slightly blurred rather than genuinely strengthened — a real typographic cost the shared "The Group undertakes its activities…" paragraph elsewhere on this page (plain .body-editorial, no override) never pays. Pinning it to 400 here matches that rendering exactly: same weight, same -webkit-font-smoothing/ text-rendering (both already inherited from .body-editorial), same color (var(--color-ink), inherited, never overridden here). Only the size stays lifted. */ .statement--principles .body-editorial { font-size: 1.375rem; font-weight: 400; } /* "Through these activities" — the page's centred mid-statement, widened on its own so a genuinely long sentence settles into three lines instead of five. The shared .statement .lead rule's 38ch held it to five, the last a bare 117px, 21% of the measure — an unsettled stack rather than a resolved statement. 50ch (720px at 1440) is the first measure that resolves it into three: 699/691/570, the closing line at 81% of the width, evenly built. Font-size, weight, alignment and the section's own height are all untouched — only the measure changes, so the block simply re-centres itself narrower inside the same fixed white field via the shared .statement's own margin-inline: auto. Scoped with :not(.statement--principles) so this doesn't reach the Principles belief further down the same page, which keeps its own 48ch above; both are plain .statement elements and would otherwise collide on one shared selector. Held in ch, so tablet inherits the same proportionate widening from its own current measure; on a phone the container is already narrower than 38ch, so this never reaches it and the mobile composition is untouched. */ .page-activities .statement:not(.statement--principles) .lead { max-width: 50ch; } /* The Principles section's entrance, desktop only: the bridge image unmodified handed off to "PRINCIPLES" with the plain, shared 112px every ordinary section transition on the site gets, no more pause than any other — not the deliberate arrival the image's own "held breath" pause (see the HTML comment above .band--short) already sets up. 9rem (144px) gives it one. Scoped to true desktop (≥1025px) only: tablet and mobile keep this entrance exactly as it was and instead rebalance their own *lower* whitespace below, each against its own unchanged top figure rather than this one. */ @media (min-width: 1025px) { .page-activities main > section:last-child { padding-top: 9rem; } } /* The same section's close, every width: unmodified it closed on the tightened 72px (desktop/tablet) or 56px (mobile) every page's final section gets from main > section:last-child — noticeably less than it opens on, so the belief ends abruptly against the footer rather than settling. 9rem (144px) matches the desktop entrance above so the composition opens and closes on the same weight. The compound selector is needed to outrank both source rules — the plain .section's padding-block and main > section:last-child's own padding-bottom — on specificity alone. Tablet and mobile take their own balanced figures, weighed against their own unchanged entrance, in the responsive blocks below rather than this desktop number scaled down. */ .page-activities main > section:last-child { padding-bottom: 9rem; } /* Kuwait's reflection, on the grey field: widened from the shared 38ch so the paragraph reads as a settled horizontal block instead of a narrow column adrift in the field's full width. 60ch resolves it to 5 lines at 864px — an 11% wider measure than the previous 54ch/778px pass, still comfortably inside the field's own width. The field itself is also slightly shorter than that first pass left it: 508px, a 9% cut from 558px, enough to feel resolved against the now-shorter text rather than merely re-centred in the old envelope. flex + justify-content: center still does the vertical placement, so the 5-line block centers in the new 508px automatically. Tablet gets its own independently-measured width and height below; on a phone the container is already narrower than the measure, so nothing here reaches mobile and the field is left exactly as it was. */ .page-kuwait .section--field { display: flex; flex-direction: column; justify-content: center; min-height: 508px; } .page-kuwait .section--field .lead { max-width: 60ch; } /* Two-column editorial split */ .split { display: grid; /* Even columns, following the reference's image-and-copy pairing. This is also the remaining lever on image height: a narrower media column brings the interior frames down without cropping the photographs further. PROVISIONAL — was minmax(0, 5fr) minmax(0, 6fr). */ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 4rem; } .split--reverse { /* Mirrors .split, so both directions share one column system. PROVISIONAL — was minmax(0, 6fr) minmax(0, 5fr). */ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .split--reverse .split__media { order: -1; } .split__text { display: flex; flex-direction: column; gap: 2rem; max-width: 34rem; } .split__media { position: relative; } /* Image reveal frame: clip + slow settle */ .media-frame { overflow: hidden; position: relative; } .media-frame img { width: 100%; height: 100%; object-fit: cover; } /* Some source photographs carry a camera watermark across their foot. This source fits its frame at exactly 4:5, so `cover` leaves nothing to pan. Giving the image a little extra height and anchoring it to the top of the frame lifts the crop just enough for the footer to fall outside it. The frame, its aspect ratio and its dimensions are untouched. */ .media-frame--lift img { height: 105%; object-position: 50% 0; } /* Eased back from 4:5 so these frames stay portrait — their subjects are upright — without regaining the height the narrower column gutter added. */ .media-frame--45 { aspect-ratio: 5 / 6; } .media-frame--34 { aspect-ratio: 3 / 4; } .media-frame--43 { aspect-ratio: 4 / 3; } /* Full-bleed photographic band */ .band { width: 100%; /* Fixed, like the section rhythm: a band that no longer grows and shrinks with window height, and reads closer to the reference's image scale. */ height: 34rem; overflow: hidden; position: relative; } .band img { width: 100%; height: 100%; object-fit: cover; } .band--short { height: 26rem; } /* Activities' overpass band, desktop only: at the shared 26rem/416px height, object-fit: cover (full viewport width, centred) shows only the middle ~43% of the source photograph's vertical extent, cropping off both the rising, diverging tops of the two roadways and the lower run of their supporting pillars — the two things that make the structure read as rising and converging in the first place. 32rem (512px) opens that to ~53%, enough to bring back a real sense of both without approaching the full frame. Scoped to true desktop only (≥1025px): at tablet and mobile widths the same full-bleed-width, fixed-height band already reveals ~75% and ~86% of the photograph respectively (a narrower viewport needs proportionately less width-led scaling to fill), so both breakpoints already show the architecture this pass is restoring on desktop and are left exactly as they were — forcing this same height onto them would just add empty sky. */ @media (min-width: 1025px) { .page-activities .band--short { height: 32rem; } } /* The Group's stone-steps band: shorter than the shared .band default so less scroll separates the opening statement from what follows it, while still reading as a substantial editorial image rather than a thin banner. vh is a deliberate, one-off exception to this file's usual fixed-rem sizing, scoped to this image only. 53vh (rather than this band's usual ~38vh) because the diagonal source needs real room for its receding planes to read as architecture rather than a strip — still clearly secondary to the full-viewport hero above it. The source is a close, diagonal shot with shallow depth of field — at this band's wide/short proportions object-fit: cover always shows its full width, so object-position's vertical value is what selects between its softer receding steps (top) and its sharper foreground slab (bottom); each tier below is tuned independently for that balance. */ .band--group { height: 53vh; } .band--group img { object-position: 50% 31%; } /* Tablet and mobile tune this independently — see the responsive sections below — rather than inheriting this value, since a much taller container at those breakpoints reveals a different balance of the same source photograph. */ /* Tighten the transition into the footer: the final section before it closes with the smaller section spacing */ main > section:last-child { padding-bottom: var(--section-space-sm); } /* Kuwait's closing composition — the paragraph and bridge image are one locked group (the split's own align-items: center already holds their internal relationship; nothing here touches that). Unmodified, this section carries 112px above the group and only 72px below it, from the plain .section top padding and the tightened last-child bottom above — a visible lean toward the top rather than a settled, centred composition. Splitting the same 184px total evenly (92/92) shifts the group up within the section without changing the section's own height by a single pixel: 604px at 1440, before and after. Desktop and tablet currently share identical padding here, so one unscoped rule serves both; mobile's own numbers differ and get their own rule in the phone breakpoint below. */ .page-kuwait main > section:last-child { padding-block: 5.75rem; } /* The article ends where the page's surface changes. Nothing marks the close but the footer's own field arriving underneath it — the change of ground is the punctuation, and it needs no help. */ /* There was a rule here holding a band of white between a closing grey field and the footer. It is gone, and nothing replaces it: an empty strip separates two surfaces without saying anything, which is a patch rather than a composition. The problem it papered over was structural — the grey was in the wrong place. No page closes on the field any more, so no page needs parting from the footer; the last block on every page is white and the footer rises out of the same ground it has been standing on. */ /* -------------------------------------------------------------------------- Legal pages (Terms of Use, Privacy Policy, Cookie Policy, Disclaimer) -------------------------------------------------------------------------- */ .legal-content { max-width: 46rem; padding-bottom: var(--section-space-sm); display: flex; flex-direction: column; gap: 3.5rem; } .legal-section h2 { font-family: var(--font-sans); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 1.1rem; } /* Restored to serif, at its original size. Legal reading text belongs to Scotch Modern's principal voice along with every other paragraph. */ .legal-section p { font-family: var(--font-serif); font-size: clamp(1.0625rem, 1.35vw, 1.25rem); line-height: 1.65; -webkit-font-smoothing: auto; text-rendering: auto; color: var(--color-ink); } .legal-section p + p { margin-top: 1rem; } .legal-section a { border-bottom: 1px solid var(--color-hairline); transition: border-color 0.3s ease; } .legal-section a:hover { border-bottom-color: currentColor; } .legal-meta { display: block; margin-top: 1.75rem; } /* A single neutral field, one step below the page background. The field is a canvas, not a separator. It carries a spread that can hold it — copy set against a photograph, or a statement given the width of the page — and it is never used to divide two things that simply follow one another. Two rules govern where it goes, and they are what keep the pages cadenced: 1. Once per page, in the middle or upper-middle. Home and Activities each set their first paired spread on it — the passage where the article stops introducing itself and begins its argument. Kuwait sets its reflection on it instead, further down, because that is where its own change of register falls. The Group no longer uses it at all: its editorial chapter stands on white, distinguished from what surrounds it by rhythm rather than surface. 2. Never last. Every page returns to white for its concluding block, so the footer rises out of the same ground the page has been standing on and needs nothing between them. A field that ended a page would either run into the footer's identical grey as one undifferentiated slab, or have to be fenced off from it with an empty white strip — and an empty strip is a patch, not a composition. Placing the grey early removes the problem instead of dressing it. */ .section--field { /* The footer's grey, not a second one. One architectural surface for the whole site: every field and the footer stand on the same ground. */ background: var(--color-footer-bg); } /* Activities' ship field: the section's own 7rem padding-block reads as real whitespace beside most content, but beside its own 5:6 image — 672px tall at 1440 — it's only a quarter of the section's height, so trimming it barely moves the section at all in isolation. Cut to 3.625rem (58px) a side, it takes the section from 896px to 788px, a ~12% reduction, without touching the image itself or its centred pairing with the text (.split's own align-items: center is untouched). Tablet inherits this same value — its own image runs even taller (900px, full width once .split stacks below 900px), so the same cut reads as proportionately smaller there (~8%) rather than needing its own figure. Mobile gets a lighter cut in the phone breakpoint below, sized against its own smaller 5rem baseline instead of scaled down from this one. */ .page-activities .section--field { padding-block: 3.625rem; } /* The Group's editorial chapter — Presence and Exchange as one grid, not two sections. See the HTML comment above .chapter-grid for why: source order is the mobile order, and desktop/tablet re-pair the same four items with `order`, scoped in the responsive rules below. Vertical rhythm is expressed as fractions of the existing tokens rather than fixed lengths, so the phone and the tablet — which each redefine --section-space/--section-space-sm to their own values — inherit proportional reductions automatically rather than desktop's absolute pixels carried straight down. Top: 0.86 of --section-space, a moderate cut (96px at 1440, ~14% below the ordinary 112px) so the full-bleed photograph above doesn't hand off to an overly generous gap before the chapter begins. Bottom: the plain --section-space-sm, unchanged, which combines with the closing statement's own top (also untouched) to hold that interval at its original 184px (136px on the phone) — visibly greater than the interior row-gap below, so the statement still reads as a separate conclusion rather than a third exhibit in the chapter. */ .section--chapter { padding-top: calc(var(--section-space) * 0.86); padding-bottom: var(--section-space-sm); } /* The two split paragraphs, given a slight lift off the shared body-editorial clamp's 20.88px ceiling at this width — enough to read as a considered size rather than the site's default running copy, short of disturbing the column they sit in (.split__text's own 34rem cap is unscoped and untouched, so the extra size simply adds a line where the column was already close to full, which it does for the first paragraph and not the second). Tablet and mobile take their own sizes below. */ .section--chapter .body-editorial { font-size: 1.375rem; } /* Four items, two rows, one grid. Equal columns — kept exactly at the desktop ratio that was already working — rather than an asymmetric split, which would put the image on the *narrow* column in whichever row runs image-left (text and image trade sides between the two rows, but a grid's column widths can't). Text is instead kept narrower than its column by its own max-width (.split__text, and further capped for tablet below), which achieves the same "text narrower than the image field" reading regardless of which side a given row puts it on. column-gap keeps the .split system's original 4rem, the horizontal interval between a paragraph and its own image. row-gap is the interval between the two compositions — 1.8x --section-space-sm, i.e. twice the 0.9x each side carried when this was two sections with their own touching edges (0.9 + 0.9 = 1.8), so the number is unchanged, only where it's declared. */ .chapter-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: 4rem; row-gap: calc(var(--section-space-sm) * 1.8); } /* Re-pairs the chapter's four DOM-order items — text, building, text, door — into the desktop/tablet grouping (text+building, then door+text) above the mobile breakpoint. Below it, no order is set, so the grid's own single-column stacking (see the mobile block) falls back to the plain DOM order, which already *is* the mobile sequence — the whole reason the markup is ordered this way. */ @media (min-width: 561px) { .chapter-grid > :nth-child(1) { order: 1; } /* text 1 */ .chapter-grid > :nth-child(2) { order: 2; } /* building */ .chapter-grid > :nth-child(3) { order: 4; } /* text 2 */ .chapter-grid > :nth-child(4) { order: 3; } /* door */ } /* The closing statement's own field, top and bottom — balanced against what the visitor actually sees on each side, not just this section's own box. The previous pass split this section's own padding evenly, but the gap a visitor reads as "above the statement" runs from the chapter's last image, through .section--chapter's own padding-bottom (var(--section-space-sm)) and then this section's padding-top — two paddings, not one — while "below the statement" is this section's padding-bottom alone, immediately against the footer. Solved so both totals land equal: with the chapter's own --section-space-sm fixed and unscoped, this section's padding-top and padding-bottom are set so (chapter's padding-bottom + this padding-top) equals this padding-bottom exactly, at every breakpoint, via the same tokens tablet and mobile already redefine for themselves. The combined total is held to what the previous pass already established (the original padding-top plus its 3.25x padding-bottom), just redivided across three intervals instead of two. The compound class selector remains necessary against `main > section:last-child` below, which would otherwise outrank the bottom half on specificity alone. */ .section.section--conclusion { padding-top: calc(var(--section-space) / 2 + var(--section-space-sm) * 1.125); padding-bottom: calc(var(--section-space) / 2 + var(--section-space-sm) * 2.125); } /* -------------------------------------------------------------------------- Home — editorial index of pages -------------------------------------------------------------------------- */ .index-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); } .index-card { display: block; } .index-card .media-frame { aspect-ratio: 4 / 5; } .index-card img { transition: transform 1.4s var(--ease-out); } .index-card:hover img { transform: scale(1.04); } .index-card__label { margin-top: 1.25rem; display: inline-block; font-family: var(--font-sans); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-ink); position: relative; padding-bottom: 0.4rem; } .index-card__label::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--ease-out); } .index-card:hover .index-card__label::after { transform: scaleX(1); } /* -------------------------------------------------------------------------- Footer — editorial closing section -------------------------------------------------------------------------- */ .site-footer { background: var(--color-footer-bg); padding-top: 6rem; padding-bottom: 7rem; } /* The footer breathes on a slightly wider grid than the page content */ .site-footer .container { max-width: 1600px; padding-inline: clamp(1.25rem, 4vw, 3.5rem); } /* Information row — two equally weighted blocks at the margins */ .site-footer__meta { display: flex; justify-content: space-between; gap: clamp(2.5rem, 6vw, 6rem); } .site-footer__heading { display: block; font-family: var(--font-sans); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 1.1rem; } /* Restored to serif, at its original size. The footer's headings above these values stay sans (secondary/functional); the values themselves are reading text, in the principal voice with the rest of the site. */ .site-footer__item p, .site-footer__item a { font-family: var(--font-serif); font-size: clamp(1.125rem, 1.5vw, 1.375rem); /* Kept on the pre-change rendering deliberately: unlike the editorial roles, the auto/auto match read worse here and was reverted. */ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; color: var(--color-ink); } .site-footer__item a { border-bottom: 1px solid transparent; transition: border-color 0.3s ease; } /* Optical alignment only: Scotch Modern's round lowercase (as in "office@…") naturally overshoots the left edge, while a capital K's straight stem sits closer to true. Measured ink-bounds delta at this role's font-size; nudges "Kuwait" to read as flush as its neighbour. */ .site-footer__item:first-child p { margin-left: -0.02em; } .site-footer__item a:hover { border-bottom-color: currentColor; } /* Copyright line above a centered legal row — one connected cluster */ .site-footer__legal-nav { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; column-gap: clamp(1rem, 2.5vw, 1.75rem); row-gap: 1.1rem; margin-top: 11rem; padding-inline: var(--gutter); } .site-footer__legal-nav a, .site-footer__copyright { font-family: var(--font-sans); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-ink); } .site-footer__copyright { flex-basis: 100%; text-align: center; white-space: nowrap; } .site-footer__copyright + .site-footer__sep { display: none; } .site-footer__legal-nav a { transition: color 0.3s ease; } .site-footer__legal-nav a:hover { color: var(--color-muted); } .site-footer__sep { width: 1px; height: 0.8em; background: var(--color-footer-line); } /* Engraved wordmark — the closing signature of every page */ .site-footer__wordmark { margin-top: 4.5rem; padding-inline: var(--gutter); } .site-footer__wordmark img { display: block; width: min(84vw, 980px); height: auto; margin-inline: auto; } /* -------------------------------------------------------------------------- Motion — scroll reveals -------------------------------------------------------------------------- */ /* Reveals resolve on opacity alone — no travel. Text never rises into position, matching the reference's restraint, at its 500ms. */ .rv { opacity: 0; transition: opacity 0.5s ease; } .rv.is-visible { opacity: 1; } /* Image settle: a much quieter relax from a slight zoom */ .rv-media img { transform: scale(1.03); transition: transform 1.2s var(--ease-out); } .rv-media.is-visible img { transform: scale(1); } .rv-media { opacity: 0; transition: opacity 0.5s ease; } .rv-media.is-visible { opacity: 1; } /* Stagger groups — opacity only, as above */ [data-stagger] > * { opacity: 0; transition: opacity 0.5s ease; } [data-stagger].is-visible > * { opacity: 1; } [data-stagger].is-visible > *:nth-child(1) { transition-delay: 0s; } [data-stagger].is-visible > *:nth-child(2) { transition-delay: 0.12s; } [data-stagger].is-visible > *:nth-child(3) { transition-delay: 0.24s; } [data-stagger].is-visible > *:nth-child(4) { transition-delay: 0.36s; } /* -------------------------------------------------------------------------- Responsive — tablet -------------------------------------------------------------------------- */ @media (max-width: 900px) { .masthead__nav { display: none; } .menu-toggle { display: flex; } .split, .split--reverse { grid-template-columns: 1fr; gap: 3rem; align-items: start; } .split--reverse .split__media { order: 0; } .split__text { max-width: 40rem; } .index-grid { grid-template-columns: 1fr; gap: 3.75rem; } .index-card .media-frame { aspect-ratio: 4 / 3; } /* Tablet: the masthead is compact from the start (see the base rules), so the hero carries only its statement. Sizes come from the tokens. */ :root { --header-height: 6.1rem; --brand-w: 19.5rem; } } /* -------------------------------------------------------------------------- The Group — tablet composition -------------------------------------------------------------------------- 561–1024px, so it covers every width the brief names (768/820/834/1024) as one deliberate range rather than splitting at the site's ordinary 900px nav breakpoint, which has nothing to do with this page's own composition. The upper bound sits where the desktop rules already stop naming the page specifically, so above 1024 this block simply stops applying and desktop's untouched values take over — there is no seam to tune, because nothing here overrides anything desktop sets past that width. Scoped to .page-the-group throughout, so none of it reaches Kuwait or Activities, which keep the site's ordinary 900px stacking exactly as it already was. The token redefinition is the load-bearing part: --section-space and --section-space-sm drive .page-lede's padding, .section--chapter's own padding, .chapter-grid's row-gap and .section--conclusion's — all of them recalculate from these two numbers, the same way the phone's own redefinition already recalculates all of them for mobile. 6rem/4rem sit between desktop's 7rem/4.5rem and the phone's 5rem/3.5rem — a real third step, not desktop scaled down or mobile scaled up. */ @media (min-width: 561px) and (max-width: 1024px) { .page-the-group { --section-space: 6rem; --section-space-sm: 4rem; } /* The chapter stays two columns the whole way through this range — the 900px stacking that the rest of the site still uses for .split is exactly the bug being fixed here: a single-column building photograph at, say, 768px runs the full 691px content width at a 3:4 ratio, which is 922px tall — taller than most tablets are. Held at two columns, the same photograph runs at most ~430px wide and ~570px tall across this entire range: an editorial plate, not a screen-filling one. */ .chapter-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } /* Text narrower than its own column — and so narrower than the image, whichever side of a given row it falls on, which a column-width asymmetry can't guarantee once the same two columns carry both an image-left and a text-left row (see the .chapter-grid comment). Percentage rather than a fixed measure because this range runs from a 561px column near 220px wide to a 1024px column near 430px — no single rem or ch value reads right at both ends, while a consistent inset off the column's own width does. */ .chapter-grid .split__text { max-width: 85%; } /* The opening statement, widened and enlarged together so the sentence settles into three lines instead of four. 68% (the previous value) held to a 65–75% brief aimed at a quieter statement than this range now wants; at the shared clamp's own 26.97px, no width in that band resolves it below four lines — measured directly, not assumed, up to 100%. 85% paired with a real size increase is what does: 28px is a restrained step up (~4% over 26.97px) and the two together settle the sentence at 620/623/518, an even three-line break with the last line at 84% of the measure, not a stray tail. Scoped to .page-the-group: Kuwait and Activities share .page-lede and keep the site's ordinary 40ch here. */ .page-the-group .page-lede .display { font-size: 1.75rem; max-width: 85%; } /* Same label-compensation fix as desktop and mobile, in this range's own tokens (see the unscoped rule above for the full reasoning). */ .page-the-group .page-lede { padding-bottom: calc(var(--section-space) + 1rem + 3.375rem); } /* The two split paragraphs, tablet: its own slight lift rather than the desktop 22px scaled down. 17.5px holds the same eight-line break this range already sets at 17px for both paragraphs — measured directly — so the increase is real but doesn't ripple into the column. */ .section--chapter .body-editorial { font-size: 1.09375rem; } /* The closing belief, tablet: its own size, not desktop's scaled down. 21px keeps the same even five-line break the shared clamp's 19.2px floor already gives at this width (526/536/529/478/502, measured directly), just larger — a proportionate step to match desktop's own ~7.6% increase. font-weight is set once, unscoped, above. */ .section--conclusion .lead { font-size: 1.3125rem; } .band--group { height: 26rem; } .band--group img { object-position: 50% 40%; } } /* -------------------------------------------------------------------------- Kuwait — tablet composition -------------------------------------------------------------------------- Kuwait keeps the site's ordinary 900px .split stacking throughout this range, but five things need their own tablet-specific figures rather than inheriting the desktop tokens unchanged: 1. The lede's own top padding sits directly under a full 100svh hero at every tablet height, and on this range's shorter, narrower canvas that reads as a stalled beat before the page even starts rather than a considered pause. First cut from 128px to 96px; a second, smaller pass takes it to 88px (~8%) — this range's own hero-to-content proportion tightened a little further, not re-derived from desktop's own (differently-sized) trim. 2. & the exchange section below: the first pass cut 212px of empty canvas between "the Gulf." and "Over many decades" (sized for a two-column desktop pairing this range never renders) down to 72px + 64px = 136px, then 60px + 52px = 112px, then 49px + 43px = 92px. A fourth pass takes that to 45px + 40px = 85px, ~8% tighter again — still a clear, deliberate pause before the next movement, just a little less of one each time. 3. The grey field's statement: at 834px the paragraph still runs 38ch/8 lines before this rule. 60ch is the same measure desktop now uses, and independently resolves this range to 5 lines at 576px — comfortably inside the 750px column, not crowding the gutters. min-height is relocked to the shorter result: 363px (112px padding a side plus the new 5-line 139px), a real cut from the previous 446.75px rather than the old pass's re-centring in place, so the field visibly resolves around its shorter text. 4. The ordinary paragraphs beside the Exchange and Heritage photographs share the site's plain 900px stacking rule, which gives every such paragraph 40rem regardless of what page it's on — a fine default, but at this range's own column width (roughly 750px) it runs close to the full measure, leaving the photograph below it no room to read as narrower than the text above it. 35.2rem (88% of 40rem) pulls it in without touching the shared rule other pages still use; .split__text carries no centring of its own (no margin-inline auto, no justify-self), so this narrows it from its unchanged left edge, exactly as before — only the right-hand slack changes. */ @media (min-width: 561px) and (max-width: 1024px) { .page-kuwait .page-lede { padding-top: 5.5rem; padding-bottom: 2.8125rem; } .page-kuwait .section--exchange { padding-top: 2.5rem; } .page-kuwait .split__text { max-width: 35.2rem; } .page-kuwait .section--field { min-height: 363px; } .page-kuwait .section--field .lead { max-width: 60ch; } } /* -------------------------------------------------------------------------- Activities — tablet composition -------------------------------------------------------------------------- */ @media (min-width: 561px) and (max-width: 1024px) { /* The ship field's own grey, tablet: a first pass took this to 5rem (80px) a side, up from the desktop-derived 58px, so the grey reads as a real field before its content starts. A second, smaller pass takes it further: 5.375rem (86px), a further ~7.5% — still just the internal padding, so the paragraph, the image, their relationship and everything outside this section stay exactly as they were. */ .page-activities .section--field { padding-block: 5.375rem; } /* "Through these activities", tablet: a modest lift so the statement carries more presence at this range's own scale, not desktop's scaled down. 21px (1.3125rem) holds the same three-line break the 50ch measure above already resolves to at this width (510/504/416, measured directly) — the measure and the weight/alignment/section height are all otherwise untouched. */ .page-activities .statement:not(.statement--principles) .lead { font-size: 1.3125rem; } /* The Principles supporting paragraph, tablet: its own slight lift from this range's own 17px clamp floor, not the desktop 22px carried down. 17.5px is the same modest step The Group's tablet editorial paragraphs already take from the identical floor. */ .statement--principles .body-editorial { font-size: 1.09375rem; } /* The Principles section's close, tablet: rebalanced against this range's own unchanged 112px entrance (the desktop-only 9rem increase above doesn't reach this range — see its own media query), not desktop's 144px carried down. 7rem (112px) matches that entrance exactly, so the belief sits centred between the bridge image and the footer at this width too. */ .page-activities main > section:last-child { padding-bottom: 7rem; } } /* Home's introduction, tablet: its own size rather than the desktop pair scaled down. 2rem (32px) for the statement and 1.25rem (20px) for the paragraph — up from the shared clamp's 26.97px/17px at 834, independently judged against this range's own 750px column rather than derived from the desktop 44px/24px. Both hold their existing 2-line/3-line breaks (measured directly, not assumed) since the em/ch measures they sit in scale with them. */ @media (min-width: 561px) and (max-width: 1024px) { .section--intro .statement .display { font-size: 2rem; } .section--intro .statement .body-editorial { font-size: 1.25rem; } } /* Footer, tablet: same two zones widened as on mobile — more grey before HEADQUARTERS, more room between the correspondence line and the legal block — scaled to this range's own (larger) baseline rather than mobile's figures carried up. Nothing else in the footer changes here. */ @media (min-width: 561px) and (max-width: 1024px) { .site-footer { padding-top: 6.75rem; } .site-footer__legal-nav { margin-top: 12rem; } } /* -------------------------------------------------------------------------- Hero/plate statement — tablet-to-desktop plateau -------------------------------------------------------------------------- Measured, not estimated: the statement sits on a full-bleed image whose effective crop tightens continuously as the viewport narrows (object-fit: cover responds to aspect ratio, width and height together), while the statement's own font-size responds to width alone. The two were never linked, and measurement confirmed they'd drifted apart — at tablet, the statement's height relative to a fixed point in the image had fallen to about 62% of its desktop ratio; the deepest divergence of any breakpoint. This is not an attempt to mathematically re-link them — that would mean closing the gap entirely, which would put tablet's type at ~24.6px, larger than desktop's own 19.87px, and inconsistent with everything else about this statement's quiet character. Instead this recovers roughly half the measured deficit: enough to visibly restore presence, short of the point where it would announce itself. One rule, scoped to everything narrower than desktop, so nothing above 1440px is touched — the clamp() below continues to govern the desktop value exactly as before, and this block's own curve is drawn to meet it there rather than compete with it: 19.2px at 834px (this range's own anchor), rising to within 0.02px of the desktop value by 1439px, so the handoff at 1440 is invisible. It has to be a separate block rather than a third term folded into the desktop clamp(): max() of straight lines can only produce an accelerating curve, and this one needs to decelerate — a fast rise from mobile, then nearly flat into desktop — which only a scoped, independent formula can do. */ @media (max-width: 1439px) { .hero__tagline, .plate__statement { font-size: calc(1.143rem + 0.11vw); } } /* -------------------------------------------------------------------------- Responsive — mobile -------------------------------------------------------------------------- */ @media (max-width: 560px) { :root { --header-height: 5.5rem; --brand-w: 15.75rem; /* Still fixed, one step down for the phone */ --section-space: 5rem; --section-space-sm: 3.5rem; } /* Wordmark only, phone: pulled ~7px left of the shared gutter/safe-area formula above, for slightly stronger left-edge alignment. The hamburger's own right-edge position is untouched. */ .masthead__brand { transform: translate(calc(max(var(--gutter), env(safe-area-inset-left, 0px)) - 50vw - 7px), -50%); } /* Open-menu wordmark, phone: same 7px left nudge as the closed masthead's .masthead__brand above, so the wordmark doesn't shift when the menu opens. Only the left inset changes here; height, padding-top and the close button's right inset are untouched. */ .menu-overlay__top { padding-left: calc(max(var(--gutter), env(safe-area-inset-left, 0px)) - 7px); } /* Activities' ship field, phone: cut once, to 2.5rem (40px) a side (taking the section from 848px to 768px, a ~9.4% reduction), that pass has since proven too tight against this range's own stacked, full-width layout — the grey barely shows before the paragraph starts or after the image ends. A first correction took it to 3.5rem (56px). A second, smaller pass takes it further: 3.75rem (60px), a further ~7.1% — still just the internal padding, so the paragraph, the image, their relationship and everything outside this section stay exactly as they were. */ .page-activities .section--field { padding-block: 3.75rem; } /* .page-lede still needs no general mobile override: it is symmetric and expressed against --section-space, which this block has already stepped down to 5rem, so it resolves to 6rem a side on its own — true for Kuwait, whose lede is only the statement. Activities' own lede takes a small addition below, for a later, separate reason. The home introduction does need one, for the same reason it is asymmetric on desktop and not by simply scaling that figure. The canvas here runs 96px above the statement against 176px below, so the imbalance is proportionally worse than the desktop's, while the section rhythm beneath it is smaller (5rem, not 7rem). Carried through the same second pass as the desktop rule above, in the same proportion — 22px leaves 22 + 80 = 102px of canvas below against 96 above, the same close-but-not-equal relationship the desktop composition now holds, reached from this breakpoint's own numbers rather than scaled from the desktop ones. A further, smaller pass takes just this interval down again: 7px (0.4375rem) leaves 7 + 80 = 87px of canvas below the paragraph before the index photographs, a ~15% cut of the 102px total — the index section's own top padding is the shared, unscoped .section rhythm every plain section on every page uses, so it stays untouched and the whole reduction comes out of this section's own close. The 96px above the statement, the gap between the statement and its paragraph, and every desktop/tablet value are all unrelated rules and are left exactly as they were. */ .section--intro { padding-bottom: 0.4375rem; } /* Home's introduction, phone: its own sizes again, not the desktop or tablet pair scaled down. Both lines are container-bound here (21em and 50ch both exceed the 358px column), so growing the type changes the wrap itself rather than just scaling it — each candidate size was measured directly rather than assumed. 1.5rem (24px) for the statement holds 3 lines with no short orphan (312/214/274, the 3-line break the previous 20.8px also gave, just larger — one size step up, 25px, changes nothing further; two steps, 28px, does force a weak 4th line, so 24px is the ceiling this wrap allows). 1.2rem (19.2px) for the paragraph is the point its own 4-line wrap resolves to a nearly full closing line (296/282/315/351) rather than the 217px it strands one step down or the 40px orphan two steps up. */ .section--intro .statement .display { font-size: 1.5rem; } .section--intro .statement .body-editorial { font-size: 1.2rem; } /* The Group's own lede carries a "The Group" label above the statement (see .page-lede .label) that Kuwait, Activities and the home intro don't have visible here, so its symmetric 96px/96px reads as tighter below than above: the label's own line plus its 2.25rem margin adds ~54px on top of the 96px padding, for ~150px above against 96px below. Restoring that ~54px to the bottom brings the statement back to sitting in the middle of its white space, matched to this page only since Kuwait and Activities have no label to compensate for. */ .page-the-group .page-lede { padding-bottom: 9.375rem; } /* The opening statement, phone: its own modest lift so it reads as the page's institutional opening rather than a line of body copy — not forced to a specific line count. 22px keeps the same five-line break the shared clamp's 20.8px floor already gives here (334/323/314/174/ 226, measured directly), just larger. */ .page-the-group .page-lede .display { font-size: 1.375rem; } /* The two split paragraphs, phone: 18px against the shared clamp's 17px floor. Both paragraphs are container-bound here (see the tablet rule above), so the extra size adds a line to the first paragraph and leaves the second unchanged — measured directly, not assumed. */ .section--chapter .body-editorial { font-size: 1.125rem; } /* The closing belief, phone: 20px against the shared clamp's 18.4px floor. The measure is already container-bound here, so growing the type reflows the wrap itself; 20px was the point that setting resolves an even eight lines with the fullest closing line of the sizes tested (261px of 335px, ~78%) rather than a thin one — no count was targeted going in. font-weight is set once, unscoped, above. */ .section--conclusion .lead { font-size: 1.25rem; } /* Kuwait's intro-to-exchange transition, mobile: unmodified this ran 96px lede bottom + 80px Exchange top = 176px of empty canvas between "the Gulf." and "Over many decades" — sized for the desktop pairing that never renders here, not deliberate editorial pacing. Cut to 48px + 24px = 72px: still visibly more than the ~34px gap between the lede's own internal paragraphs (so "Over many decades" still reads as the start of the next movement, not just another line), but no longer an unexplained void before it. This transition is since confirmed correct at 72px and is intentionally left alone here — only the hero-to-"Kuwait" gap gets a further, separate cut below, matching the same restrained pass desktop and tablet take to their own top padding. */ .page-kuwait .page-lede { padding-top: 5.625rem; padding-bottom: 3rem; } .page-kuwait .section--exchange { padding-top: 1.5rem; } /* The grey field's widened measure doesn't reach the phone — the container is already narrower than the measure here (confirmed even at zero side padding the paragraph still wraps to 8 lines, so no margin adjustment within reason changes it), meaning the statement was never at fewer than 8 lines to begin with — but the desktop min-height above is unscoped and would otherwise leak in and force the field taller than its natural content height. Cancelled back to auto so the field is exactly what it was before any of this rule set existed. */ .page-kuwait .section--field { min-height: 0; } /* Kuwait's closing composition, mobile: the same 92/92 desktop/tablet split doesn't apply here — this range's own numbers are 80px above the paragraph+image group and 56px below it (.section's 5rem top against main > section:last-child's 3.5rem bottom), not 112/72, so centring it means splitting 136px down the middle at 68/68 instead. */ .page-kuwait main > section:last-child { padding-block: 4.25rem; } /* Both paragraphs are bound by the container on a phone, not by their own measures — 65ch and 21em are far wider than the column — so the gutter is the only lever on how wide they read. 1rem instead of the global 1.25rem returns 8px to the line, and is scoped to this section so the page's gutter system is unchanged everywhere else. The body size is left at 17px: at 358px the paragraph sets around forty characters to the line, which is already inside the comfortable range, and raising the size would have narrowed it again. */ .section--intro .container { padding-inline: 1rem; } /* A crop chosen for the portrait frame rather than the desktop centre */ .hero__video { object-position: 46% 42%; } /* The statement sits lower in the mobile hero composition */ /* A real mobile override now, where none existed before. It's justified by the same measurement as the tablet plateau above: a portrait phone crops the hero image nearly as aggressively as tablet does, and the statement's presence was falling behind it here too, just by a smaller margin (mobile's own deficit measured shallower than tablet's). 1rem (16px) recovers roughly the same proportion of that shortfall as the tablet figure does — a real, visible lift, deliberately kept short of tablet's own size so the two remain distinct steps rather than collapsing into one. This overrides the block above for ≤560px. */ .hero__tagline, .plate__statement { font-size: 1rem; } /* No phone override of the opening statement's measure or scale any more. It used to be pinned to 11.2em here, which stacked it into six short lines while the column beside it sat empty. Its 21em now simply exceeds the phone's column and the container takes over, so the statement fills the page it has — exactly as the interior ledes' 40ch does. One measure, one scale, one composition, narrowing with the device. */ .display { /* Leading only. The scale is one continuous curve set on .display. */ line-height: 1.34; } .lead { font-size: 1.15rem; } .band { height: 17rem; } .band--short { height: 14rem; } /* The Group — mobile composition. The chapter's DOM order already *is* the mobile sequence (paragraph, building, paragraph, door — see the HTML comment above .chapter-grid), so no reordering is needed here at all: a single column with no `order` set simply renders the four items in source order. Only the grid itself needs to drop to one column; the row-gap this produces is the same token-driven value as desktop and tablet (--section-space-sm, redefined above for the phone), which already lands at 100.8px between each item — enough that the paragraph reads as a real interruption between the two photographs rather than a caption tucked against one of them. */ .chapter-grid { grid-template-columns: 1fr; } /* The first paragraph's interlude — between the stairs band and the building photograph — splits unevenly: .section--chapter's own 68.8px top padding against the grid's 100.8px row-gap below, so the paragraph sits noticeably closer to the stairs image than to the building. Shifting it down 1rem (matching top and bottom margins, one positive and one negative) redistributes that same 169.6px of existing white space to 84.8px on each side without adding any — the grid row's own outer size, and so the interlude's total height, is unchanged since the two margins cancel out. */ .chapter-grid > :first-child { margin-top: 1rem; margin-bottom: -1rem; } .band--group { height: 15rem; } .band--group img { object-position: 50% 45%; } /* Activities' own lede, phone: a small addition to the symmetric 96px the shared rule above already gives it. The gap into the grey ship field that follows read as slightly tight against the paragraph's close; 6.375rem (102px) is a 6.25% increase — inside the 5–8% target — and touches nothing else: the statement's own typography, the ship field's relationship to its image, and every tablet/desktop value are all unrelated rules, left exactly as they were. */ .page-activities .page-lede { padding-bottom: 6.375rem; } /* "Through these activities", phone: the measure above (50ch) already exceeds this range's own 350px column, so the statement is already container-bound at the full width the page's gutters allow — there is no further width to give without touching the shared container padding every other block on the page also uses. The shared clamp's 18.4px wrap resolves to five lines with a bare 75px orphan on the last, so a very slight reduction is the only remaining lever: 17.6px (1.1rem) is the smallest step down that resolves it, to four lines at 324/350/339/180 — measured directly, this is the exact threshold, not a rounder number chosen for its own sake. The section's own padding is untouched; the block is simply shorter by one line and re-centres in the same fixed field via the shared .statement's own margin-inline: auto. */ .page-activities .statement:not(.statement--principles) .lead { font-size: 1.1rem; } /* The Principles supporting paragraph, phone: its own slight lift from this range's own 17px clamp floor, not the desktop 22px or tablet 17.5px carried down — 18px is the same modest step The Group's mobile editorial paragraphs already take from the identical floor. */ .statement--principles .body-editorial { font-size: 1.125rem; } /* The Principles section's close, phone: rebalanced against this range's own unchanged 80px entrance (the desktop-only 9rem increase doesn't reach this range), not the desktop/tablet figures carried down. 5rem (80px) matches that entrance exactly, so the belief sits centred between the bridge image and the footer here too. */ .page-activities main > section:last-child { padding-bottom: 5rem; } /* Footer becomes a centered colophon on mobile */ .site-footer { padding-top: 5.5rem; } .site-footer__meta { flex-direction: column; align-items: center; gap: 2.75rem; text-align: center; } .site-footer__legal-nav { flex-direction: column; gap: 1rem; margin-top: 9.5rem; } .site-footer__sep { display: none; } /* Keep the copyright on a single line: scale it gently to the viewport */ .site-footer__copyright { font-size: clamp(0.52rem, 2.8vw, 0.68rem); letter-spacing: 0.12em; } .site-footer__wordmark { margin-top: 3.5rem; } .site-footer__wordmark img { width: 92vw; } .site-footer { padding-bottom: 4.5rem; } } /* -------------------------------------------------------------------------- Reduced motion -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001s !important; animation-delay: 0s !important; transition-duration: 0.001s !important; transition-delay: 0s !important; } .rv, .rv-media, [data-stagger] > * { opacity: 1; transform: none; } }