(country, continent, topic, search, 404) -- without this they fell back to the browser default 2em, smaller than the lead story's headline below them. */ .page-header { padding-block: var(--space-4) var(--space-6); } .page-header h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); } .page-header .dek { font-size: 1.05rem; color: var(--color-text-muted); max-width: 65ch; margin-top: var(--space-2); } .section-block { padding-block: var(--space-6); } .section-block--tight { padding-block: var(--space-4) var(--space-7); } /* ============ Header & Nav ============ */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--color-paper); } /* A sticky header this tall (masthead + wrapping region nav) eats a quarter to a third of a phone's viewport permanently. Below 900px it scrolls away like the rest of the page instead. */ @media (max-width: 900px) { .site-header { position: static; } } .masthead { display: flex; align-items: center; justify-content: space-between; padding-block: var(--space-4); gap: var(--space-4); } .logo { display: flex; align-items: center; gap: var(--space-2); } .logo-mark { width: 42px; height: 42px; flex-shrink: 0; } .logo-text { display: flex; flex-direction: column; line-height: 1; } .logo-text .mark { font-family: var(--font-serif); font-weight: 700; font-size: 1.7rem; letter-spacing: .04em; color: var(--color-heading); } .logo-text .full { font-family: var(--font-sans); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--color-text-muted); margin-top: 2px; } .masthead-actions { display: flex; align-items: center; gap: var(--space-3); } .icon-button { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: var(--border); background: transparent; border-radius: var(--radius); cursor: pointer; color: var(--color-heading); } .icon-button:hover { background: var(--color-paper-dim); } /* The trigger's visible label is the raw locale code ("ZH-HANS" for Simplified Chinese) -- let it size to content instead of clipping out of a fixed 40px square. */ .lang-switcher > .icon-button { width: auto; min-width: 40px; padding-inline: var(--space-2); } /* The region bar is a row of folder tabs. The dim fill replaces the rule that used to sit between the masthead and the tabs: the strip is its own surface, so it separates itself from the masthead above and the page below without a line, and unselected tabs read as recessed against it. ::after is the gold rule, drawn edge to edge of the viewport at the bottom of the strip and sitting behind the tabs. Unselected tabs redraw it as their own gold bottom border so it reads as one unbroken line; the selected tab swaps that border for --color-paper, which breaks the line and sends it up the tab's left side, across its top and back down its right. Every gold edge in here is 1px -- the rule and the three sides of the selected tab are the same stroke, so the detour looks like one continuous line rather than a thick baseline meeting thin uprights. */ .primary-nav { background: var(--color-paper-dim); position: relative; } .primary-nav::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px; background: var(--color-gold); z-index: 0; } /* Positioned so the mega-menu can fall back to anchoring against the whole nav row instead of its own item -- see the max-width: 1119px block below. */ .primary-nav .container { display: flex; align-items: stretch; position: relative; } .primary-nav-list { display: flex; flex-wrap: wrap; flex: 1; } /* Tabs butt into each other and overlap by --tab-overlap, each stacked above the one to its right, so the row reads as a fanned stack rather than as separate buttons. Descending z-index produces that; the selected tab and any open dropdown are lifted above the whole run so their gold edge is never clipped by a neighbour, and so a mega-menu (a child of its own li, and therefore trapped in that li's stacking context) cannot be painted under the next tab along. */ /* The base z-index is the safety net. A tab past the end of the ladder below would otherwise resolve to z-index:auto and, being later in the DOM, paint over every tab to its LEFT -- inverting the overlap for exactly the newest item in the bar. Pinning the floor at 1 makes an unenumerated tab land at the bottom of the stack instead, which is the correct direction for something further right. The ladder runs past the current tab count on purpose. */ .primary-nav-list > li { position: relative; z-index: 1; } .primary-nav-list > li + li { margin-inline-start: calc(var(--tab-overlap) * -1); } .primary-nav-list > li:nth-child(1) { z-index: 12; } .primary-nav-list > li:nth-child(2) { z-index: 11; } .primary-nav-list > li:nth-child(3) { z-index: 10; } .primary-nav-list > li:nth-child(4) { z-index: 9; } .primary-nav-list > li:nth-child(5) { z-index: 8; } .primary-nav-list > li:nth-child(6) { z-index: 7; } .primary-nav-list > li:nth-child(7) { z-index: 6; } .primary-nav-list > li:nth-child(8) { z-index: 5; } .primary-nav-list > li:nth-child(9) { z-index: 4; } .primary-nav-list > li:nth-child(10) { z-index: 3; } .primary-nav-list > li:nth-child(11) { z-index: 2; } .primary-nav-list > li.is-current { z-index: 15; } .primary-nav-list > li:hover, .primary-nav-list > li:focus-within, .primary-nav-list > li.is-open { z-index: 20; } /* Opaque fill, not transparent: it is what lets a tab hide the left edge of the tab beneath it. Uniform 1px border on all four sides so every tab keeps identical box metrics in every state -- only the colours change. */ /* .65rem block padding rather than --space-4's 1rem: the bar now carries a second row beneath it (the country strip), so it gives up 20% of its own height -- 56px to 45px -- to keep the pair from dominating the viewport. The two rows together come to roughly 80px, and Global, where the country strip does not render at all, ends up shorter than the single row used to be. */ .primary-nav-list > li > a { display: flex; align-items: center; justify-content: center; height: 100%; padding: .65rem var(--space-5); font-weight: 600; font-size: .88rem; letter-spacing: .02em; color: var(--color-heading); border: 1px solid var(--color-line); border-bottom-color: var(--color-gold); border-radius: var(--radius) var(--radius) 0 0; background: var(--color-paper-dim); transition: background-color .15s ease, border-color .15s ease; } @media (min-width: 1120px) { .primary-nav-list > li { flex: 1 1 auto; } } .primary-nav-list > li > a:hover { background: var(--color-paper); text-decoration: none; } /* The tab "in front": gold on three sides, filled with the page's own paper, and its bottom edge painted paper so the gold rule breaks there and the tab runs continuously into the content below it. */ .primary-nav-list > li.is-open > a, .primary-nav-list > li.is-current > a { border-color: var(--color-gold); border-bottom-color: var(--color-paper); background: var(--color-paper); text-decoration: none; } /* Two-column dropdown anchored to its own nav item: a gold kicker + the "All X Markets" link on the left, a gold "Countries in X" kicker + a single-column country list on the right -- the kickers are what make the link underneath them read as a distinct clickable item rather than a plain heading. Logical properties (inset-inline-start, not left) so it opens on the correct side under RTL automatically; items in the right-hand half of the bar anchor from the end instead so their panel doesn't run past the edge of the viewport. min-width is sized off the widest kicker pair the panel can hold ("Countries in North America" beside "All North American Markets"), both of which are nowrap -- at the old 340px the right-hand kicker wrapped onto a second line. A gold top rule (the same 3px marker .digest-card uses) plus a real drop shadow are what separate the panel from the page: at --shadow-card's 1px hairline on a --color-paper background it read as flat page furniture. */ .mega-menu { display: none; position: absolute; inset-inline-start: 0; top: 100%; min-width: 540px; max-width: calc(100vw - var(--space-6)); /* --color-paper-dim, not --color-paper: the panel opens over a --color-paper page, so matching it left the dropdown reading as a hole cut in the page rather than a surface on top of it. Dim is one step off the page tone in both themes and is already the site's "raised surface" (.digest, tiles). */ background: var(--color-paper-dim); border: var(--border); border-top: 3px solid var(--color-gold); box-shadow: var(--shadow-panel); padding: var(--space-6) var(--space-7) var(--space-7); z-index: 50; } .primary-nav-list > li:nth-last-child(-n+4) .mega-menu { inset-inline-start: auto; inset-inline-end: 0; } .primary-nav-list > li.is-open .mega-menu, .primary-nav-list > li:hover .mega-menu, .primary-nav-list > li:focus-within .mega-menu { display: block; } /* keyboard users can Tab into the dropdown */ .mega-menu-grid { display: grid; grid-template-columns: auto auto; gap: var(--space-8); } .mega-menu-region h3 { font-family: var(--font-sans); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-gold-text); margin-bottom: var(--space-3); white-space: nowrap; } .mega-menu-all-link { display: block; font-size: 1rem; font-weight: 700; color: var(--color-heading); white-space: nowrap; } .mega-menu-all-link:hover { text-decoration: underline; } /* Full-width tappable rows rather than bare text links, matching the language switcher's panel -- the negative inline margin lets the hover fill bleed to the panel's padding edge instead of hugging the word. */ .mega-menu-countries li a { display: block; padding: var(--space-2) var(--space-3); margin-inline: calc(var(--space-3) * -1); border-radius: var(--radius); font-size: .95rem; color: var(--color-text); white-space: nowrap; } /* --color-line rather than --color-paper-dim: the panel itself is now dim, so the usual hover tone would be invisible against it. Line is the next step along the same neutral ramp and keeps body text above 4.5:1 in both themes. */ .mega-menu-countries li a:hover { background: var(--color-line); color: var(--color-heading); text-decoration: none; } /* Below the width where the region bar spreads out, per-item anchoring stops being safe: the bar starts wrapping to a second row, and a 540px panel hung off an item near either edge runs off the viewport (an end-anchored panel under a wrapped item resolves to a negative inline start). Dropping position:relative from the item hands the panel's containing block to the nav container instead, so every panel opens from that one fixed start edge at its natural width and cannot overhang either side. The nth-last-child selector is repeated here because it out-specifies a bare .mega-menu rule and would otherwise keep winning. */ @media (max-width: 1119px) { .primary-nav-list > li { position: static; } .primary-nav-list > li .mega-menu, .primary-nav-list > li:nth-last-child(-n+4) .mega-menu { inset-inline-start: 0; inset-inline-end: auto; } } /* Below 1120px the bar wraps, and the folder-tab illusion above stops being an illusion and starts being a mess: every unselected tab redraws the gold rule as its own bottom border, so a wrapped bar painted a full-width gold line across the middle of the nav as well as along its base -- with the selected tab's detour cut into whichever line it happened to land on. Three rows of tabs on a phone gave three competing baselines and one notch. So the metaphor is dropped rather than patched. Tabs stop overlapping and stop drawing the rule; each is a discrete box, and the selected one is a complete gold rectangle -- all four sides, closed. The nav keeps its own ::after rule edge to edge underneath the whole block, which is what still ties the country strip to the bar below it. */ @media (max-width: 1119px) { .primary-nav-list { gap: 6px; padding-block: 7px; } /* Undoes the -7px that butted each tab into the one before it; `gap` above is what separates them now. */ .primary-nav-list > li + li { margin-inline-start: 0; } .primary-nav-list > li > a { border-color: var(--color-line); border-radius: var(--radius); } .primary-nav-list > li.is-open > a, .primary-nav-list > li.is-current > a { border-color: var(--color-gold); } } /* Country sub-nav — the second row of the region bar (see partials/sub-nav.njk). Flat underline tabs rather than a second run of folder tabs: two overlapping folder rows would read as two peers competing for the same job, where the point is that this row is subordinate to the continent above it. Smaller type, muted until selected, and a gold underline instead of a gold outline. The row only exists on pages that resolve to a region, so it animates itself in on load rather than sitting there. These are static pages -- there is no client-side state change to hang a transition off -- so a keyframe with `both` fill does the job: the wrapper opens from 0 while the inner strip slides down from -100%, and because the wrapper clips its overflow the tabs look like they are emerging from behind the region bar rather than fading in. Landing on a country or article page plays the same motion, which is correct: the row is new to the page either way. */ :root { --sub-nav-h: 35px; } /* +20% on phones (35px -> 42px). This row is the one piece of chrome a touch reader has to both tap AND drag sideways, and at 35px a thumb starting a swipe on "South Africa" could clear the strip's top or bottom edge and take the page with it instead. Everything downstream is expressed in the variable -- the container min-height, the a's height:100%, the opening keyframe -- so only the one number moves. */ @media (max-width: 700px) { :root { --sub-nav-h: 42px; } } .sub-nav { background: var(--color-paper-dim); box-sizing: border-box; overflow: hidden; height: var(--sub-nav-h); border-bottom: 1px solid var(--color-line); animation: sub-nav-open .34s cubic-bezier(.4, 0, .2, 1) both; } /* Horizontal scroll for regions with more countries than fit (and for narrow viewports generally). The scrollbar is hidden rather than thin: at a fixed 35px a visible one would eat a tenth of the row. */ .sub-nav .container { display: flex; align-items: stretch; min-height: calc(var(--sub-nav-h) - 1px); overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; animation: sub-nav-slide .34s cubic-bezier(.4, 0, .2, 1) both; } .sub-nav .container::-webkit-scrollbar { display: none; } .sub-nav-list { display: flex; flex-wrap: nowrap; } .sub-nav-list > li { flex: 0 0 auto; } .sub-nav-list > li > a { display: flex; align-items: center; height: 100%; padding: 6px var(--space-4); font-family: var(--font-sans); font-size: .78rem; font-weight: 600; letter-spacing: .02em; color: var(--color-text-muted); border-bottom: 2px solid transparent; white-space: nowrap; } .sub-nav-list > li > a:hover { color: var(--color-heading); background: var(--color-paper); text-decoration: none; } .sub-nav-list > li.is-current > a { color: var(--color-heading); background: var(--color-paper); border-bottom-color: var(--color-gold); } /* The "All European Markets" item reads as the row's own heading until it is the selected one, at which point it behaves like any other tab. */ .sub-nav-list > .sub-nav-all > a { color: var(--color-gold-text); } .sub-nav-list > .sub-nav-all.is-current > a { color: var(--color-heading); } .sub-nav .flag { width: 18px; height: 13px; margin-inline-end: 6px; border: 1px solid var(--flag-border); border-radius: 1px; } /* border-bottom-width rides along so the rule arrives with the row instead of sitting under the region bar on its own for the first frame. */ @keyframes sub-nav-open { from { height: 0; border-bottom-width: 0; } to { height: var(--sub-nav-h); border-bottom-width: 1px; } } @keyframes sub-nav-slide { from { transform: translateY(-100%); } to { transform: none; } } /* Already down when the reader arrived, so it should not roll out again. Set by assets/js/head.js before first paint on any page whose predecessor in this tab also carried the row -- moving between countries, or between regions, leaves the strip sitting still while only its contents change. Arriving from Global, search or a policy page still plays the motion, because there the row really is new. */ .sub-nav-instant .sub-nav, .sub-nav-instant .sub-nav .container { animation: none; } /* The row still belongs on the page for these readers -- only the travel goes. */ @media (prefers-reduced-motion: reduce) { .sub-nav, .sub-nav .container { animation: none; } } /* Language switcher */ .lang-switcher { position: relative; } .lang-switcher-panel { display: none; position: absolute; inset-inline-end: 0; top: calc(100% + 8px); background: var(--color-paper); border: var(--border); box-shadow: var(--shadow-card); padding: var(--space-2); min-width: 200px; z-index: 60; } .lang-switcher.is-open .lang-switcher-panel { display: block; } .lang-switcher-panel a { display: flex; justify-content: space-between; padding: var(--space-2) var(--space-3); border-radius: var(--radius); color: var(--color-text); font-size: .9rem; } .lang-switcher-panel a:hover { background: var(--color-paper-dim); text-decoration: none; } .lang-switcher-panel a[aria-current="true"] { font-weight: 700; color: var(--color-heading); } /* Mobile nav: no hamburger -- the region bar stays visible and wraps, and the hover mega-menu (no-op on touch) is hidden so a tap always just navigates. The header itself un-sticks below (see .site-header), which is what actually keeps this from eating the screen on a phone. */ @media (max-width: 900px) { .primary-nav-list > li:hover .mega-menu, .primary-nav-list > li:focus-within .mega-menu { display: none; } .primary-nav-list > li > a { padding: var(--space-2) var(--space-3); font-size: .82rem; min-height: 44px; } } /* ============ Hero / Featured ============ */ .hero { padding-block: var(--space-6); } .hero-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--space-6); } .hero-lead { position: relative; } /* Media now follows the headline/dek (see home.njk) rather than leading them, so the lead's own headline is what a reader sees first, not a bare photo. */ .hero-lead .media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-paper-dim); margin-top: var(--space-4); } .hero-lead .media img { width: 100%; height: 100%; object-fit: cover; } .hero-lead h1, .hero-lead h2 { font-size: clamp(1.6rem, 1.1rem + 2.4vw, 2.6rem); margin-top: 0; } .hero-lead .dek { font-size: 1.05rem; color: var(--color-text-muted); max-width: 62ch; } /* Right rail of the hero: compact horizontal cards, each stretching to share the column evenly, so the rail matches the lead's height instead of overshooting it and leaving a gap under the lead. */ .hero-secondary { display: flex; flex-direction: column; } .hero-secondary .article-card { flex: 1 1 0; display: grid; grid-template-columns: 104px 1fr; column-gap: var(--space-3); align-content: center; /* center each card inside its equal share of the rail */ padding-block: var(--space-3); border-bottom: var(--border); } .hero-secondary .article-card:first-child { padding-top: 0; } .hero-secondary .article-card:last-child { border-bottom: none; padding-bottom: 0; } .hero-secondary .article-card .media { grid-column: 1; grid-row: 1 / span 3; aspect-ratio: 1 / 1; margin-bottom: 0; } .hero-secondary .article-card > :not(.media) { grid-column: 2; } .hero-secondary .article-card h3 { font-size: 1.05rem; margin-bottom: var(--space-1); } .hero-secondary .article-card .dek { display: none; } .hero-secondary .article-card .card-meta { margin-bottom: var(--space-1); } @media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } } /* ============ Weekly regional digest ============ */ /* One card per continent (never per-country) -- a gold top-rule marks each as a distinct dispatch, echoing the masthead rule without borrowing any single publisher's specific digest layout. */ .digest { background: var(--color-paper-dim); border: var(--border); padding: var(--space-5); } .digest-header { margin-bottom: var(--space-4); } .digest-header h2 { font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem); margin-bottom: var(--space-1); } /* No max-width: this is one short standfirst line under the section heading, and a 60ch cap was wrapping it onto a second line on a container more than twice that wide. It wraps when the viewport actually runs out, not before. */ .digest-header .dek { font-size: .92rem; color: var(--color-text-muted); margin: 0; } /* Four across at most. At 210px five tracks fitted the desktop row, which squeezed each headline into four or five lines and pushed the date onto its own; the seventh and last card then sat alone in a mostly empty second row. 240px is the number that stops the fifth: the grid's content box tops out at 1200px (1280 container - 2x --space-4 - 2x --space-5 of .digest padding), and five 240px tracks plus four 24px gaps need 1296. Seven cards therefore read 4 + 3, and auto-fit (not auto-fill) still collapses the tracks nothing was placed in, so a three-region week gets three wide cards, not three narrow ones and a hole. Narrower viewports step down to 3 / 2 / 1 on their own. */ .digest-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .digest-card { border-top: 3px solid var(--color-gold); padding-top: var(--space-3); } .digest-card .continent-label { display: block; font-family: var(--font-sans); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-gold-text); margin-bottom: var(--space-1); } .digest-card h3 { font-size: 1rem; margin-bottom: var(--space-1); } .digest-card .dek { font-size: .85rem; color: var(--color-text-muted); margin: 0 0 var(--space-1); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ============ Sector index ============ */ /* A preview grid, not a full listing: cards keep a stable size whatever the section happens to hold, so five sections down the page read as one system. auto-fit still collapses tracks nothing was placed in -- which is what stops a two-article sector ending in three dead columns -- but the 340px ceiling stops those two cards from stretching to half the container and burying the next section below the fold. Out-specifies .card-grid--fit, which main.js adds to any short reveal list. */ .sector-preview .card-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 340px)); } .sector-dek { color: var(--color-text-muted); max-width: 70ch; margin-top: calc(var(--space-3) * -1); margin-bottom: var(--space-5); } /* ============ Cards & Headlines ============ */ /* Container-driven instead of a fixed 3-up: a fixed column count paired with the .two-col breakpoint (960px, by viewport not container width) meant cards got *narrower* on wider viewports whenever the rail was present (961-1150px) than they were just below the breakpoint. auto-fill sizes off the grid's own available width, so it can't invert like that. */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-5); } /* auto-fit for the fixed-size rows that can't be topped up by revealing more (related stories is limit(3)): auto-fill leaves a dead 4th track sitting empty at 1040px, auto-fit collapses it so the three cards divide the row. Only applied when there are enough items that stretching them stays sane -- see the guard in layouts/article.njk. */ .card-grid--fit { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .article-card { display: flex; flex-direction: column; } /* Gives a flat river of identical cards (continent/topic hubs) a single weighted lead instead of every story reading as equally important. Only above 620px: on an auto-fill grid, "span 2" doesn't just clamp to what's there when just ONE 230px column fits -- it forces the grid to create a second, narrow *implicit* column to satisfy the span, squeezing every card after it and overflowing the viewport. Below 620px the grid is already single-column, so a lead treatment has nothing to span across. */ @media (min-width: 620px) { .article-card--lead { grid-column: span 2; } } .article-card--lead .media { aspect-ratio: 21 / 9; } .article-card--lead h3 { font-size: clamp(1.3rem, 1rem + 1.5vw, 1.8rem); } .article-card .media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-paper-dim); margin-bottom: var(--space-3); } .article-card .media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; } .article-card:hover .media img { transform: scale(1.03); } .article-card h3 { font-size: 1.1rem; margin-bottom: var(--space-2); } .article-card .dek { font-size: .92rem; color: var(--color-text-muted); margin-bottom: var(--space-2); /* Hub grids show a dozen-plus cards at once; an unclamped 5-8 line dek made row heights vary wildly and the grid read as a wall of gray text. */ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .card-meta { font-size: .78rem; color: var(--color-text-muted); display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-2); } .headline-list { display: flex; flex-direction: column; } .headline-item { padding-block: var(--space-3); border-bottom: var(--border); } .headline-item:first-child { padding-top: 0; } .headline-item a { color: var(--color-heading); font-weight: 600; font-size: 1rem; } .headline-item .card-meta { margin-top: var(--space-1); } /* The rail is opt-in, exactly like .ad-slot itself. Reserving a 1fr column unconditionally is what left a tall empty gutter down the right of continent, topic and article pages -- their