/* NEWS — EDITORIAL SYSTEM Loaded only by the pre-rendered /news/ pages, after style.css; all rules are scoped to .news-page / .nw-*. --nw-top (header bottom) is written on by news-ui.js: never redeclare it on a descendant. Site tokens: navy #1B3A5B, text #1D2A3A, muted #5E7184, AA blues #2F72B4/#3178B4, logo gold #EFB700; Manrope headlines, Inter text. Stories use hairlines, not boxes; glass only on what floats. */ .news-page{ --nw-ink:var(--o-head,#1B3A5B); --nw-text:var(--o-text,#1D2A3A); --nw-muted:var(--o-muted,#5E7184); --nw-blue:var(--o-blue-text,#2F72B4); --nw-navy:#1B3A5B; --nw-gold:#EFB700; --nw-tint:#E9F2FB; --nw-line:rgba(27,58,91,.11); --nw-line-strong:rgba(27,58,91,.22); --nw-radius:14px; --nw-radius-sm:8px; --nw-gap:clamp(28px,3.2vw,48px); --nw-sec-pad:clamp(64px,7vw,104px); --nw-head-gap:clamp(20px,2.2vw,28px); } /* ---- Calmer reveal than the rest of the site ---- */ .news-page .reveal{transform:translateY(10px);transition:opacity .7s var(--ease-v3),transform .7s var(--ease-v3)} .news-page .reveal.in{transform:none} /* Story primitives */ .nw .st{position:relative;min-width:0} .nw .st-kicker{ font-family:'Manrope',sans-serif;font-weight:700;font-size:13px;line-height:1.3; color:var(--nw-blue);margin:0 0 7px;letter-spacing:.005em; } .nw .st-kicker a{color:inherit;position:relative;z-index:2} .nw .st-kicker a:hover{text-decoration:underline;text-underline-offset:3px} .nw .st-title{ font-family:'Manrope',sans-serif;color:var(--nw-ink);font-weight:700; letter-spacing:-.015em;line-height:1.26;font-size:1.08rem;margin:0; text-wrap:balance; } /* The headline link covers the whole story: one tab stop, big target. */ .nw .st-link{ color:inherit; text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.15em; text-decoration-color:transparent; transition:text-decoration-color .3s ease; } .nw .st-link::after{content:"";position:absolute;inset:0;z-index:1} .nw .st:hover .st-link{text-decoration-color:rgba(27,58,91,.55)} .nw .st-link:focus-visible{outline:none} .nw .st:has(.st-link:focus-visible){outline:3px solid var(--o-blue-deep);outline-offset:6px;border-radius:6px} .nw .st-sum{color:var(--nw-muted);font-size:1rem;line-height:1.55;margin:10px 0 0;max-width:60ch} .nw .st-meta{ display:flex;flex-wrap:wrap;align-items:center;gap:3px 12px; margin:12px 0 0;font-size:13.6px;line-height:1.4;color:var(--nw-muted); } .nw .st-src{font-weight:600;color:var(--nw-text);display:inline-flex;align-items:center;gap:6px} .nw .st-src.is-editorial{color:var(--nw-blue)} .nw .st-src-mark{width:16px;height:16px;border-radius:4px;flex:none} .nw .st-media{ overflow:hidden;border-radius:var(--nw-radius);background:#e4edf6; margin-bottom:16px; } .nw .st-media img{ width:100%;height:100%;object-fit:cover;display:block; transition:transform 1.2s var(--ease-v3); } .nw .st:hover .st-media img{transform:scale(1.02)} /* ---- FEATURE ---- */ .nw .st--feature .st-title{font-size:clamp(1.22rem,1rem + .55vw,1.45rem);line-height:1.2;letter-spacing:-.02em} /* ---- COMPACT ---- */ .nw .st--compact{display:flex;gap:18px;align-items:flex-start;padding:17px 0;border-top:1px solid var(--nw-line)} .nw .st--compact .st-body{flex:1;min-width:0} .nw .st--compact .st-media{flex:none;width:80px;margin:3px 0 0;border-radius:var(--nw-radius-sm);aspect-ratio:1/1 !important} .nw .st--compact .st-meta{margin-top:7px} .nw .st--compact .st-kicker{margin-bottom:5px} /* ---- TEXT ---- */ .nw .st--text .st-title{font-size:clamp(1.2rem,1rem + .5vw,1.38rem);line-height:1.22;letter-spacing:-.02em} .nw .st--textlead .st-title{ font-size:clamp(1.85rem,1.1rem + 1.9vw,2.65rem);font-weight:800;line-height:1.06;letter-spacing:-.032em;max-width:18ch; } .nw .st--textlead .st-sum{font-size:1.1rem;margin-top:16px;max-width:44ch} /* Masthead + section bar */ .nw-demo{ display:inline-flex;align-items:center;gap:9px;margin:20px 0 0; padding:6px 13px;border-radius:var(--radius-pill); background:rgba(255,255,255,.72);box-shadow:inset 0 0 0 1px var(--nw-line); font-size:12.8px;color:var(--nw-muted);line-height:1.4; } .nw-demo[hidden]{display:none} .nw-demo-dot{width:7px;height:7px;border-radius:50%;background:var(--nw-gold);flex:none} .nw-noscript{padding:24px 0;color:var(--nw-muted)} /* Section bar: quiet text links on one hairline, directly under the primary navigation. The header itself is Home's, untouched: news-ui.js copies the header's own scroll variables (--nav-p/q/tint/light) and its theme class onto the bar, so the bar wears exactly the header's glass at every scroll position and both read as one surface. */ .nw-subnav{position:sticky;top:var(--nw-top,75px);z-index:50;margin-top:clamp(22px,2.6vw,34px);--nav-p:0;--nav-q:0;--nav-tint:1;--nav-light:1} .nw-subnav::before,.nw-subnav::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none} .nw-subnav::before{ background: linear-gradient(rgba(255,255,255, calc(.58 * var(--nav-p) * var(--nav-tint))), rgba(255,255,255, calc(.58 * var(--nav-p) * var(--nav-tint)))), linear-gradient(rgba(27,58,91, calc(.46 * var(--nav-p) * (1 - var(--nav-tint)))), rgba(27,58,91, calc(.46 * var(--nav-p) * (1 - var(--nav-tint))))); -webkit-backdrop-filter:blur(calc(16px * var(--nav-q))) saturate(calc(100% + 15% * var(--nav-q))); backdrop-filter:blur(calc(16px * var(--nav-q))) saturate(calc(100% + 15% * var(--nav-q))); } .nw-subnav::after{ opacity:var(--nav-p); box-shadow:inset 0 -1px 0 rgba(27,58,91, calc(.10 + .06 * (1 - var(--nav-light)))),0 6px 16px -14px rgba(31,73,128,.26); } @media (max-width:1149px){ .nw-subnav::before{ -webkit-backdrop-filter:blur(calc(12px * var(--nav-q))) saturate(calc(100% + 12% * var(--nav-q))); backdrop-filter:blur(calc(12px * var(--nav-q))) saturate(calc(100% + 12% * var(--nav-q))); } } /* News home: the bar opens right under the header, over the cover. */ .news-home .nw-subnav{margin-top:var(--o-header-h)} /* One editorial frame: cover text, Top stories and this hairline share one inset; the links stay centred (auto margins in a symmetric box). */ .news-home{--news-editorial-inset:max(clamp(24px,4.4vw,72px), calc((100% - 1640px) / 2))} @media (min-width:601px){ .news-home .nw-subnav .wrap{max-width:none;padding-left:var(--news-editorial-inset);padding-right:var(--news-editorial-inset)} } .nw-subnav .wrap{position:relative} .nw-subnav ul{ list-style:none;display:flex;gap:0 26px;margin:0;padding:0; border-bottom:1px solid rgba(27,58,91, calc(.11 * (1 - var(--nav-p)))); overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch; } .nw-subnav ul::-webkit-scrollbar{display:none} /* Overflow hint: fade only the edge that hides items (news.js sets the classes). */ .nw-subnav.has-more-end ul{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent)} .nw-subnav.has-more-start ul{-webkit-mask-image:linear-gradient(90deg,transparent,#000 44px);mask-image:linear-gradient(90deg,transparent,#000 44px)} .nw-subnav.has-more-start.has-more-end ul{-webkit-mask-image:linear-gradient(90deg,transparent,#000 44px,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,transparent,#000 44px,#000 calc(100% - 44px),transparent)} .nw-subnav li{flex:none} /* Desktop and tablet: the row is centred on the page axis, the same axis as the primary navigation (both measured at 0px from the viewport centre). Auto margins instead of justify-content:center so that, if a row ever overflows, it still starts at the left edge and scrolls. */ @media (min-width:901px){ .nw-subnav li:first-child{margin-left:auto} .nw-subnav li:last-child{margin-right:auto} } .nw-subnav a{ display:flex;align-items:center;height:42px;position:relative; font-family:'Manrope',sans-serif;font-weight:600;font-size:14px;color:var(--nw-muted); white-space:nowrap;transition:color .2s ease; } .nw-subnav a::after{ content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px; background:var(--o-blue-cta);transform:scaleX(0);transform-origin:left; transition:transform .35s var(--ease-v3); } /* Once the glass is there the idle links darken with it (to the header's link colour), so they keep AA even over the navy Policy band. */ .nw-subnav a{color:color-mix(in srgb, #133250 calc(var(--nav-p) * 100%), var(--nw-muted))} .nw-subnav a:hover{color:var(--nw-ink)} .nw-subnav a[aria-current]{color:var(--nw-ink)} .nw-subnav a[aria-current]::after{transform:scaleX(1)} .nw-subnav a:focus-visible{outline-offset:-3px;border-radius:6px} /* Over the cover photo, before the glass arrives (header in its dark state, exactly as on Home). */ .nw-subnav.is-over-dark ul{border-bottom-color:rgba(255,255,255,.2)} .nw-subnav.is-over-dark a{color:#fff} .nw-subnav.is-over-dark a:hover,.nw-subnav.is-over-dark a[aria-current]{color:#fff} .nw-subnav.is-over-dark a::after{background:#fff} .nw-subnav.is-over-dark a:focus-visible{outline-color:#fff} /* Sections: opener + composition as one piece */ .nw-sec{padding:var(--nw-sec-pad) 0 0;scroll-margin-top:calc(var(--nw-top,75px) + 46px)} .nw-sec-head{ display:flex;align-items:baseline;justify-content:space-between;gap:8px 32px;flex-wrap:wrap; margin:0 0 var(--nw-head-gap);padding-top:16px;border-top:1px solid var(--nw-line-strong); } .nw-sec-head h2{ font-family:'Manrope',sans-serif;font-weight:800;color:var(--nw-ink); font-size:clamp(1.7rem,1.2rem + 1.3vw,2.3rem);letter-spacing:-.03em;line-height:1.05;margin:0; } .nw-sec-head h2:focus{outline:none} .nw-sec-head p{color:var(--nw-muted);font-size:1rem;line-height:1.5;margin:0;max-width:46ch;text-align:right} .nw .nw-mini-head{ font-family:'Manrope',sans-serif;font-weight:700;font-size:15px;color:var(--nw-blue); margin:0 0 14px;line-height:1.3; } .nw-textrow{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:clamp(44px,4.6vw,64px);border-top:1px solid var(--nw-line-strong); } .nw-textrow .st--text{padding:22px var(--nw-gap) 0 0} .nw-textrow .st--text + .st--text{padding-left:var(--nw-gap);border-left:1px solid var(--nw-line)} .nw-textrow .st--text:last-child{padding-right:0} /* ---- Grids ---- */ .nw-grid{display:grid;gap:var(--nw-gap);align-items:start} .nw-list > .st--compact:first-child{border-top:0;padding-top:0} .nw-grid--leadleft{grid-template-columns:minmax(0,7fr) minmax(0,5fr)} .nw-grid--leadleft .nw-lead .st-title{font-size:clamp(1.55rem,1rem + 1.2vw,2.05rem);font-weight:800;letter-spacing:-.028em;line-height:1.1} .nw-grid--leadleft .nw-lead .st-sum{font-size:1.05rem} /* Markets: the text-led story anchors the left with its briefs below; one photo feature at its side, so it never reads as a product grid. */ .nw-grid--textlead{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,4.4vw,72px)} .nw-grid--textlead .nw-lead .nw-list{margin-top:26px} .nw-grid--textlead .nw-lead .nw-list > .st--compact:first-child{border-top:1px solid var(--nw-line);padding-top:17px} /* ---- POLICY: special section on the navy band ---- */ .nw-band{ background:var(--nw-navy);color:#fff; margin-top:var(--nw-sec-pad);padding:clamp(56px,6vw,88px) 0 clamp(64px,7vw,96px); } .nw-band .nw-sec-head{border-top-color:rgba(255,255,255,.18);position:relative} .nw-band .nw-sec-head::before{content:"";position:absolute;left:0;top:-1px;width:56px;height:2px;background:var(--nw-gold)} .nw-band .nw-sec-head h2, .nw-band .st-title{color:#fff} .nw-band .nw-sec-head p, .nw-band .st-sum, .nw-band .st-meta{color:rgba(255,255,255,.76)} .nw-band .st-kicker{color:#9CC8EE} .nw-band .st-src{color:#fff} .nw-band .st-src.is-editorial{color:#CFE4F7} .nw-band .st--compact{border-top-color:rgba(255,255,255,.15)} .nw-band .st:hover .st-link{text-decoration-color:rgba(255,255,255,.6)} .nw-grid--band{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,4.4vw,72px)} .nw-band .st--textlead .st-title{font-size:clamp(1.95rem,1.1rem + 2vw,2.8rem);max-width:17ch} .nw-band .st:has(.st-link:focus-visible){outline-color:#8FD0F0} .nw-band + .nw-sec{padding-top:var(--nw-sec-pad)} /* ---- LOGISTICS: cinematic image, split text ---- */ .nw-logistics .st--wide .st-media{margin-bottom:24px} .nw-logistics .st--wide .st-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--nw-gap);align-items:start} .nw-logistics .st--wide .st-title{font-size:clamp(1.7rem,1.05rem + 1.6vw,2.4rem);font-weight:800;letter-spacing:-.03em;line-height:1.08} .nw-logistics .st--wide .st-sum{margin-top:2px;font-size:1.06rem} .nw-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--nw-gap);margin-top:30px} /* ---- PERU + GLOBAL ---- */ .nw-duo-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--nw-gap)} .nw-duo-col{min-width:0} .nw-duo-col .st--feature .st-title{font-size:clamp(1.35rem,1rem + .9vw,1.7rem);font-weight:800;letter-spacing:-.025em;line-height:1.14} .nw-duo-col .nw-list{margin-top:22px} .nw-duo-col .nw-list > .st--compact:first-child{border-top:1px solid var(--nw-line);padding-top:17px} /* ---- LATEST: an editorial list, not a table ---- */ .nw-latest{padding-bottom:var(--nw-sec-pad)} .nw-latest-inner{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,4vw,64px);align-items:start} .nw-latest-side{position:sticky;top:calc(var(--nw-top,75px) + 66px)} .nw-latest-side .nw-sec-head{display:block} .nw-latest-side .nw-sec-head p{text-align:left;margin-top:8px} .nw-howto{margin-top:22px;padding-top:16px;border-top:1px solid var(--nw-line)} .nw-howto h3{font-family:'Manrope',sans-serif;font-size:14.5px;font-weight:700;color:var(--nw-ink);margin:0 0 8px} .nw-howto p{font-size:14px;line-height:1.6;color:var(--nw-muted);margin:0;max-width:40ch} .nw-howto p + p{margin-top:8px} .nw-howto .st-src{display:inline-flex;vertical-align:-3px} .nw-briefs{list-style:none;margin:0;padding:0;border-top:1px solid var(--nw-line-strong)} .nw-briefs .st--brief{padding:19px 0 18px;border-bottom:1px solid var(--nw-line)} .nw-briefs .st-line{display:flex;align-items:baseline;gap:10px;margin:0 0 5px;font-size:13.6px;line-height:1.3;color:var(--nw-muted)} .nw-briefs .st-kicker-inline{font-family:'Manrope',sans-serif;font-weight:700;color:var(--nw-blue)} .nw-briefs .st-line time{font-variant-numeric:tabular-nums} .nw-briefs .st-line time::before{content:"";display:inline-block;width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.6;margin-right:10px;vertical-align:middle} .nw-briefs .st-title{font-size:1.14rem;line-height:1.3;max-width:52ch} .nw-briefs .st-meta{margin-top:6px;font-size:13.6px} /* Article */ .nw-article-page{padding-top:var(--o-header-h)} .nw-article-page .nw-subnav{margin-top:0} .nw-demo--article{margin-top:20px} .nw-narrow{max-width:720px;margin-left:auto;margin-right:auto;padding-left:26px;padding-right:26px} .nw-art-head{padding-top:clamp(26px,3.6vw,48px)} .nw-back{ display:inline-flex;align-items:center;gap:6px;margin-bottom:26px; font-family:'Manrope',sans-serif;font-weight:600;font-size:14px;color:var(--nw-blue); } .nw-back:hover{color:var(--nw-ink)} .nw-art-head .st-kicker{font-size:14px;margin-bottom:12px} .nw .nw-art-title{ font-family:'Manrope',sans-serif;font-weight:800;color:var(--nw-ink); font-size:clamp(2.3rem,1.2rem + 3vw,3.6rem);line-height:1.04;letter-spacing:-.035em;margin:0; text-wrap:balance; } .nw-dek{font-size:clamp(1.15rem,1rem + .45vw,1.32rem);line-height:1.5;color:var(--nw-muted);margin:20px 0 0} .nw-art-meta{ display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px; margin:28px 0 0;padding-top:16px;border-top:1px solid var(--nw-line); font-size:14px;color:var(--nw-muted); } .nw-ext-flag{ display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:var(--radius-pill); background:rgba(62,134,201,.1);color:var(--nw-blue);font-weight:600;font-size:12.8px; } .nw-art-figure{max-width:1128px;margin:clamp(32px,4vw,52px) auto 0;padding:0 26px} .nw-art-figure .st-media{margin:0;border-radius:var(--nw-radius)} .nw-art-figure figcaption{font-size:13px;color:var(--nw-muted);margin-top:10px;line-height:1.4} .nw-art-body{padding-top:clamp(36px,4.4vw,56px)} .nw-art-body > p, .nw-art-body > ul{font-size:1.16rem;line-height:1.78;color:var(--nw-text);margin:0 0 1.4em} .nw-art-body > ul{padding-left:1.15em} .nw-art-body > ul li{margin-bottom:.5em;padding-left:.2em} .nw-art-body > ul li::marker{color:var(--o-blue)} .nw-art-body > h2{ font-family:'Manrope',sans-serif;font-weight:800;color:var(--nw-ink); font-size:clamp(1.45rem,1.15rem + .7vw,1.7rem);letter-spacing:-.022em;line-height:1.2;margin:2em 0 .6em; } .nw-art-body .nw-lede{font-size:1.28rem;line-height:1.65;color:var(--nw-text)} .nw-art-body .nw-muted{color:var(--nw-muted);font-size:1rem} .nw-pull{margin:2.4em 0;padding:26px 0;border-top:1px solid var(--nw-line-strong);border-bottom:1px solid var(--nw-line-strong)} .nw-pull p{ font-family:'Manrope',sans-serif;font-weight:700;color:var(--nw-blue); font-size:clamp(1.5rem,1.1rem + 1.2vw,2rem);line-height:1.26;letter-spacing:-.022em;margin:0; } /* Why it matters: the Neptunus reading of an external story, set apart from the source's reporting by colour, byline and position. */ .nw-why{margin:0 0 44px;padding:26px 28px 28px;border-radius:var(--nw-radius);background:var(--nw-tint)} .nw-why-by{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-family:'Manrope',sans-serif;font-weight:700;font-size:13.5px;color:var(--nw-blue)} .nw-why-h{font-family:'Manrope',sans-serif;font-weight:800;font-size:clamp(1.4rem,1.15rem + .6vw,1.65rem);letter-spacing:-.022em;line-height:1.15;color:var(--nw-ink);margin:0} .nw-why-for{font-size:14px;color:#4B5E72;margin:6px 0 14px} /* 5.6:1 on the tint; muted gives 4.5 */ .nw-why p:last-child{font-size:1.1rem;line-height:1.7;color:var(--nw-text);margin:0} .nw-source{margin:48px 0 0;padding:20px 0 0;border-top:1px solid var(--nw-line-strong)} .nw-art-body > .nw-why + .nw-source{margin-top:0} .nw-source-h{font-family:'Manrope',sans-serif;font-size:13.5px;font-weight:700;color:var(--nw-muted);margin:0 0 8px;letter-spacing:0} .nw-source-name{display:flex;align-items:center;gap:8px;font-family:'Manrope',sans-serif;font-weight:800;font-size:1.2rem;color:var(--nw-ink);margin:0} .nw-source-name a{color:var(--nw-ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;text-decoration-color:var(--nw-line-strong)} .nw-source-name a:hover{text-decoration-color:currentColor} .nw-source.is-editorial .nw-source-name{color:var(--nw-blue)} .nw-source-name .st-src-mark{width:20px;height:20px} .nw-source-note{font-size:.95rem;color:var(--nw-muted);line-height:1.6;margin:8px 0 0;max-width:58ch} .nw-source-dates{display:flex;flex-wrap:wrap;gap:6px 28px;margin:14px 0 0;font-size:.9rem} .nw-source-dates dt{color:var(--nw-muted);display:inline} .nw-source-dates dd{display:inline;margin:0 0 0 6px;color:var(--nw-text);font-weight:600} .nw-source-cta{margin:22px 0 0} .nw-src-btn{gap:8px} .nw-tags ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0;padding:0} .nw-tags li{font-size:13px;color:var(--nw-blue);padding:5px 12px;border-radius:var(--radius-pill);background:rgba(62,134,201,.08)} .nw-related{padding-bottom:var(--nw-sec-pad)} .nw-related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--nw-gap)} .nw-related-grid .st-media{border-radius:12px} .nw-related-grid .st--feature .st-title{font-size:1.2rem} .nw-backrow{margin:clamp(40px,4.4vw,60px) 0 0;text-align:center} /* Tablet landscape (1024): designed, not shrunk */ @media (max-width:1099px){ .nw-grid--textlead{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px} .nw-latest-inner{grid-template-columns:minmax(0,5fr) minmax(0,7fr)} .nw-grid--band{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)} } /* Tablet portrait and below: recompose, do not just stack */ @media (max-width:900px){ .nw-sec-head{flex-direction:column;align-items:flex-start} .nw-sec-head p{text-align:left} .nw-textrow{grid-template-columns:1fr;border-top:0;margin-top:34px} .nw-textrow .st--text, .nw-textrow .st--text + .st--text{padding:20px 0;border-left:0;border-top:1px solid var(--nw-line)} .nw-grid--leadleft, .nw-grid--band, .nw-duo-inner, .nw-latest-inner, .nw-grid--textlead{grid-template-columns:1fr} .nw-grid{gap:24px} .nw-grid--leadleft .nw-list > .st--compact:first-child, .nw-grid--band .nw-list > .st--compact:first-child{border-top:1px solid var(--nw-line);padding-top:17px} .nw-band .nw-grid--band .nw-list > .st--compact:first-child{border-top-color:rgba(255,255,255,.15)} .nw-logistics .st--wide .st-body{grid-template-columns:1fr;gap:10px} .nw-pair{grid-template-columns:1fr;margin-top:16px} .nw-duo-inner{gap:var(--nw-sec-pad)} .nw-latest-side{position:static} .nw-howto{display:none} .nw-latest-inner{gap:0} .nw-related-grid{grid-template-columns:1fr 1fr} .nw-related-grid > :nth-child(3){display:none} } /* Phones: 430 / 390 / 375 — a dedicated composition */ @media (max-width:600px){ .news-page{--o-pad-x:20px;--nw-sec-pad:56px;--nw-head-gap:18px} .news-page .wrap,.nw-narrow,.nw-art-figure{padding-left:20px;padding-right:20px} .nw-demo{margin-top:14px;font-size:12.5px} /* Section bar runs edge to edge and scrolls sideways */ .nw-subnav{margin-top:20px} .nw-subnav .wrap{padding-left:0;padding-right:0} .nw-subnav ul{gap:0 22px;padding:0 20px;scroll-padding-inline:20px} .nw-subnav a{height:44px} .nw .st--compact .st-media{width:72px} .nw .st-sum{font-size:.98rem} .nw-textrow .st--text .st-title{font-size:1.2rem} .nw-sec-head{padding-top:14px} .nw-sec-head h2{font-size:1.7rem} .nw-sec-head p{font-size:.95rem} .nw .st-media{border-radius:12px} .nw-grid--leadleft .nw-lead .st-title{font-size:1.5rem} .nw .st--textlead .st-title{font-size:1.75rem} .nw-logistics .st--wide .st-media{aspect-ratio:3/2 !important} .nw-logistics .st--wide .st-title{font-size:1.6rem} .nw-band{padding:52px 0 56px} .nw-band .st--textlead .st-title{font-size:1.8rem} .nw-briefs .st--brief{padding:16px 0 15px} .nw-briefs .st-title{font-size:1.06rem} .nw .nw-art-title{font-size:clamp(1.95rem,1.25rem + 3.2vw,2.4rem);line-height:1.06} .nw-dek{font-size:1.1rem} .nw-art-figure{padding:0} .nw-art-figure .st-media{border-radius:0;aspect-ratio:3/2 !important} .nw-art-figure figcaption{padding:0 20px} .nw-art-body > p,.nw-art-body > ul{font-size:1.09rem;line-height:1.74} .nw-pull p{font-size:1.45rem} .nw-why{padding:22px 20px 24px;margin-bottom:36px} .nw-why p:last-child{font-size:1.04rem} /* Related: an editorial list with thumbnails, not big tiles */ .nw-related-grid{grid-template-columns:1fr;gap:0} .nw-related-grid > :nth-child(3){display:grid} .nw-related-grid .st--feature{display:grid;grid-template-columns:minmax(0,1fr) 72px;gap:16px;align-items:start;padding:16px 0;border-top:1px solid var(--nw-line)} .nw-related-grid .st--feature:first-child{border-top:0;padding-top:0} .nw-related-grid .st--feature .st-media{order:2;margin:3px 0 0;border-radius:var(--nw-radius-sm);aspect-ratio:1/1 !important} .nw-related-grid .st--feature .st-title{font-size:1.06rem} } @media (prefers-reduced-motion:reduce){ .nw .st-media img,.nw .st:hover .st-media img{transition:none;transform:none} .nw-subnav a::after{transition:none} } /* ---- Pre-rendered pages (news engine) ---- Images are served as (AVIF, WebP, JPEG fallback). The wrapper must not add a box of its own, so the frame and crop stay exactly as designed. Text-only stories simply have no .st-media. */ .nw .st-media picture{display:contents} /* Local preview of unapproved stories (never released). */ .nw-preview-banner{background:#7a1f1f;color:#fff;font-size:13.5px;line-height:1.4;text-align:center;padding:8px 16px;position:fixed;left:0;right:0;bottom:0;z-index:120} /* TODAY — the cover (owner review, 2026-09-23) Home's hero geometry (846px). Photo: subject left, headline low left, five boxes right, centred under the section bar; one editorial inset. No rights-cleared image: the typographic cover (navy, gold rule). */ .nw-cover{ --cv-top:calc(var(--o-header-h) + 43px); /* header + section bar */ --cv-pad:var(--news-editorial-inset); /* shared with the section bar */ --cv-aside:clamp(320px,26vw,400px); --cv-shade:8,24,42; --cv-h:846px; /* = Home hero height */ --cv-gap:clamp(12px,4px + .8vw,16px); /* story column rhythm */ --cv-hx:20%;--cv-hx2:14%;--cv-veil:270deg; /* scrims follow the headline side */ position:relative;margin-top:calc(-1 * var(--cv-top));color:#fff; } .nw-cover-stage{ position:relative;isolation:isolate; display:grid;grid-template-columns:minmax(0,1fr) var(--cv-aside);grid-template-rows:1fr auto; column-gap:clamp(40px,5vw,96px); min-height:var(--cv-h); padding:var(--cv-top) var(--cv-pad) 0; } .nw-cover--right .nw-cover-stage{grid-template-columns:var(--cv-aside) minmax(0,1fr)} .nw-cover-art{position:absolute;inset:0;z-index:-1;overflow:hidden;background:#12304E} .nw-cover-art picture{display:contents} .nw-cover-art img{ width:100%;height:100%;object-fit:cover;display:block; object-position:var(--cover-pos,50% 50%); transition:transform 1.4s var(--ease-v3); } .nw-cover--right{--cv-hx:80%;--cv-hx2:86%;--cv-veil:90deg} .nw-cover--photo .nw-cover-art::after{ content:"";position:absolute;inset:0;pointer-events:none; background: linear-gradient(180deg, rgba(var(--cv-shade),.74) 0, rgba(var(--cv-shade),.6) 118px, rgba(var(--cv-shade),.18) 205px, rgba(var(--cv-shade),0) 280px), linear-gradient(0deg, rgba(var(--cv-shade),.66) 0, rgba(var(--cv-shade),.4) 24%, rgba(var(--cv-shade),.16) 44%, rgba(var(--cv-shade),0) 58%), radial-gradient(48% 56% at var(--cv-hx) 66%, rgba(var(--cv-shade),.6) 0, rgba(var(--cv-shade),.3) 55%, rgba(var(--cv-shade),0) 88%), radial-gradient(58% 52% at var(--cv-hx2) 90%, rgba(var(--cv-shade),.5) 0, rgba(var(--cv-shade),0) 72%), linear-gradient(var(--cv-veil), rgba(12,12,12,.42) 0, rgba(12,12,12,.26) 26%, rgba(12,12,12,0) 42%); } .nw-cover-stage:has(.st--cover .st-link:hover) .nw-cover-art img{transform:scale(1.015)} /* Typographic cover: navy, depth contours, the logo gold */ .nw-cover--type .nw-cover-stage{min-height:min(max(560px,70svh),780px);padding:calc(var(--cv-top) + clamp(24px,4svh,52px)) var(--cv-pad) clamp(34px,5.4svh,62px)} .nw-cover--type .nw-cover-art{ background: radial-gradient(80% 110% at 88% 108%, rgba(49,120,180,.55) 0, rgba(49,120,180,0) 62%), linear-gradient(162deg,#17395B 0,#0E2842 100%); } .nw-cover-lines{position:absolute;right:0;bottom:0;width:72%;height:100%} .nw-cover-lines path{fill:none;stroke:rgba(156,200,238,.15);stroke-width:1.1} .nw-cover--type .st--cover::before{content:"";display:block;width:56px;height:2px;background:var(--nw-gold);margin-bottom:22px} /* The cover story: low on its side, one link stretched over the stage */ .nw .st--cover{position:static;grid-row:2;grid-column:1;align-self:end;max-width:720px} .nw .nw-cover--photo .st--cover .st-sum{display:none} /* Photo cover, desktop: rows 1fr / stack / 1fr keep the story column centred, and the story block closes on the same bottom edge as the fifth story. A longer measure: fewer, longer lines for any headline. */ @media (min-width:900px){ .nw-cover--photo .nw-cover-stage{grid-template-rows:1fr auto 1fr} .nw-cover--photo .nw-cover-top{grid-row:2} .nw .nw-cover--photo:not(.nw-cover--middle) .st--cover{grid-row:1 / 3} .nw .nw-cover--photo .st--cover{max-width:none} .nw .nw-cover--photo .st--cover .st-title{max-width:15em} } .nw-cover--middle .st--cover{grid-row:1 / -1;align-self:center} .nw-cover--right .st--cover{grid-column:2;justify-self:end;text-align:right} .nw .st--cover .st-link::after{top:var(--cv-top);z-index:1} .nw .st--cover .st-kicker{color:var(--nw-gold);font-size:13.5px;letter-spacing:.01em;margin-bottom:12px} .nw .nw-cover--photo .st--cover .st-kicker{color:#fff} .nw .st--cover .st-title{ color:#fff;font-weight:800;font-size:clamp(2.5rem,1.2rem + 1.95vw,3.5rem); line-height:1.06;letter-spacing:-.028em;max-width:13em; text-shadow:0 1px 18px rgba(var(--cv-shade),.3); } .nw .st--cover .st-sum{ color:rgba(255,255,255,.86);font-size:15.5px;line-height:1.5;margin-top:14px;max-width:46ch; display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden; } .nw .st--cover .st-meta{color:rgba(255,255,255,.78);margin-top:12px;font-size:12.5px;gap:3px 10px} .nw .st--cover .st-src{color:#fff} .nw .st--cover .st-src.is-editorial{color:#CFE4F7} .nw .st--cover .st-src-mark{width:14px;height:14px} /* Never underlined: the whole story is the link */ .nw .st--cover .st-link, .nw .st--cover:hover .st-link, .nw .st--cover .st-link:visited{text-decoration:none} .nw .st--cover .st-title{transition:color .3s ease} .nw .st--cover:hover .st-title{color:rgba(255,255,255,.88)} .nw .nw-cover--photo .st--cover .st-title{font-weight:700} .nw .st--cover:has(.st-link:focus-visible){outline:none} .nw .st--cover .st-link:focus-visible::after{outline:3px solid #fff;outline-offset:-3px;box-shadow:inset 0 0 0 5px rgba(var(--cv-shade),.55)} /* Right column: edition line, then five story boxes: a thin white mist that brightens the photo behind it (no edge), white text. For the text, one faint wide gradient darkens the photo's stack side; nothing follows the boxes. Off the photo (tablet band, phones) the same roles use a warm light band with dark text. */ .nw-cover-top{grid-row:1 / -1;grid-column:2;align-self:end;position:relative;z-index:2} .nw-cover--right .nw-cover-top{grid-column:1} .nw-cover{ --cv-card:255,255,255;--cv-card-a:.14; --cv-title:#fff;--cv-meta:rgba(255,255,255,.82);--cv-cat:rgba(255,255,255,.92);--cv-today:#fff;--cv-head:#fff; --cv-tile:transparent;--cv-tile-ink:#fff;--cv-focus:#fff;--cv-ts:0 1px 2px rgba(0,0,0,.35); } .nw-cover-head, .nw .st--box{ background:rgba(var(--cv-card),var(--cv-card-a)); -webkit-backdrop-filter:blur(2px) saturate(.75);backdrop-filter:blur(2px) saturate(.75); border-radius:1px; } .nw-cover-head *,.nw .st--box .st-body *,.nw .st--box .st-media--mark span{text-shadow:var(--cv-ts)} @media (min-width:900px){ .nw .nw-cover--photo .st--box .st-line time{font-weight:600} .nw-cover--photo .nw-cover-art::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(var(--cv-side,90deg),rgba(14,20,30,0) 50%,rgba(14,20,30,.12) 78%)} .nw-cover--right{--cv-side:270deg} } .nw-cover-head{display:flex;align-items:baseline;justify-content:space-between;gap:4px 14px;flex-wrap:wrap;margin:0 0 5px;padding:7px 13px} .nw-cover-label{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin:0} .nw-cover-today{margin:0;font-family:'Manrope',sans-serif;font-weight:800;font-size:12.5px;line-height:1.3;letter-spacing:.01em;color:var(--cv-today)} .nw-cover-date{margin:0;font-family:'Manrope',sans-serif;font-weight:600;font-size:12.5px;line-height:1.3;color:var(--cv-meta)} .nw .nw-cover-top .nw-mini-head{color:var(--cv-head);font-size:12.5px;line-height:1.3;margin:0} .nw-boxes{display:grid;gap:5px} .nw .st--box{ display:grid;grid-template-columns:30% minmax(0,1fr);align-items:stretch; min-height:clamp(84px,11svh,104px);overflow:hidden;transition:background-color .25s ease; } .nw .st--box:hover{background:rgba(var(--cv-card),.2)} .nw .st--box .st-media{margin:0;height:100%;border-radius:0;aspect-ratio:auto !important;background:var(--cv-tile)} /* No rights-cleared thumbnail: the same slot, the section's initial, a gold rule */ .nw .st--box .st-media--mark{position:relative;display:grid;place-items:center;background:var(--cv-tile)} .nw .st--box .st-media--mark span{font-family:'Manrope',sans-serif;font-weight:800;font-size:26px;line-height:1;letter-spacing:-.02em;color:var(--cv-tile-ink)} .nw .st--box .st-media--mark::after{content:"";position:absolute;left:12px;bottom:12px;width:14px;height:2px;background:var(--nw-gold)} .nw .st--box .st-body{align-self:center;padding:12px 16px 12px 15px;min-width:0} .nw .st--box .st-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 7px;margin:0 0 5px;font-size:11.5px;line-height:1.3;color:var(--cv-meta)} .nw .st--box .st-line > span{font-family:'Manrope',sans-serif;font-weight:700;color:var(--cv-cat)} .nw .st--box .st-line time::before{content:"·";margin-right:7px;color:var(--cv-meta)} .nw .st--box .st-title{ color:var(--cv-title);font-size:clamp(.9rem,.8rem + .2vw,1.02rem);font-weight:700;line-height:1.32;letter-spacing:-.01em; display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden; } .nw .st--box .st-link,.nw .st--box:hover .st-link{text-decoration:none} .nw .st--box:has(.st-link:focus-visible){outline:2px solid var(--cv-focus);outline-offset:-2px} /* Typographic cover: the same smoke over navy, and its own approved metrics, so its geometry does not move */ .nw .nw-cover--type .st--box .st-title{line-height:1.24;-webkit-line-clamp:3} @media (min-width:701px){ .nw .nw-cover--type .st--box .st-title{font-size:clamp(.94rem,.78rem + .26vw,1.06rem)} .nw .nw-cover--type .st--box .st-body{padding:10px 14px 11px 13px} } @media (min-width:1100px){.nw-cover--type .nw-cover-head{padding:8px 13px}} /* Photo cover: gaps 10% tighter, thumbnails 30.5% (reference: 0.125, 32%); the boxes take back what the gaps give (+0.08 gap), so the stack keeps its height, centre and bottom edge. */ .nw-cover--photo .nw-cover-head{margin:0 0 var(--cv-gap)} .nw-cover--photo .nw-boxes{gap:calc(var(--cv-gap) * .9)} .nw .nw-cover--photo .st--box{height:calc(clamp(96px,84px + 1.2vw,102px) + var(--cv-gap) * .08);min-height:0;grid-template-columns:30.5% minmax(0,1fr)} .nw-cover-credit{ position:absolute;z-index:2;right:var(--cv-pad);bottom:12px;margin:0; font-size:11px;line-height:1.3;color:rgba(255,255,255,.86); } /* After the cover: demo note and, in full editions, the row of text stories */ .nw-today-more .nw-demo--cover{margin-top:22px} .nw-today-more .nw-textrow{margin-top:clamp(28px,3vw,40px)} /* ---- 900–1099: the desktop composition, a narrower column ---- */ @media (max-width:1099px){ .news-home{--news-editorial-inset:clamp(24px,4.4vw,48px)} .nw-cover{--cv-aside:340px} .nw-cover-stage{column-gap:36px} .nw .st--cover .st-title{font-size:clamp(2.1rem,1rem + 2.6vw,2.7rem)} } /* typographic cover: v3 tablet arrangement from 900 to 1099 */ @media (min-width:900px) and (max-width:1099px){ .nw-cover--type .nw-cover-stage{ display:grid;min-height:0;padding:0;column-gap:0; grid-template-columns:var(--cv-pad) minmax(0,1fr) var(--cv-pad); grid-template-rows:var(--cv-top) minmax(0,1fr) auto 36px auto; } .nw-cover--type .nw-cover-art{position:relative;inset:auto;grid-column:1 / -1;grid-row:1 / 5;min-height:0} .nw .nw-cover--type .st--cover{grid-column:2;grid-row:3;align-self:end;justify-self:start;text-align:left;max-width:640px;padding-top:44px} .nw-cover--type{--cv-title:#1B3A5B;--cv-meta:#55595F;--cv-cat:#1B3A5B;--cv-today:#1B3A5B;--cv-head:#1B3A5B;--cv-tile:#E6E2DB;--cv-tile-ink:#1B3A5B;--cv-focus:#1B3A5B;--cv-ts:none} .nw-cover--type .nw-cover-top{grid-column:1 / -1;grid-row:5;align-self:start;padding:22px var(--cv-pad) 30px;background:#F3F1ED} .nw-cover--type .nw-boxes{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px} .nw-cover--type .nw-cover-head{background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0 0 12px;margin:0} .nw .nw-cover--type .st--box{background:none;box-shadow:inset 0 1px 0 rgba(58,54,49,.16);border-radius:0;-webkit-backdrop-filter:none;backdrop-filter:none;min-height:92px} .nw .nw-cover--type .st--box:hover{background:rgba(58,54,49,.04)} } /* ---- ≤899: photo with the story; rows on a warm light band below it (photo: 2 + 3) ---- */ @media (max-width:899px){ .news-home{--news-editorial-inset:clamp(20px,4.4vw,48px)} .nw-cover-stage,.nw-cover--right .nw-cover-stage{ display:grid;min-height:0;padding:0;column-gap:0; grid-template-columns:var(--cv-pad) minmax(0,1fr) var(--cv-pad); grid-template-rows:var(--cv-top) minmax(0,1fr) auto 36px auto; } .nw-cover-art{position:relative;inset:auto;grid-column:1 / -1;grid-row:1 / 5;min-height:var(--cv-h)} .nw-cover--type .nw-cover-art{min-height:0} .nw-cover--type .nw-cover-stage{padding:0} .nw .st--cover,.nw-cover--right .st--cover,.nw-cover--middle .st--cover{grid-column:2;grid-row:3;align-self:end;justify-self:start;text-align:left;max-width:640px} .nw-cover--type .st--cover{padding-top:44px} .nw .st--cover .st-title{font-size:clamp(2.1rem,1rem + 2.6vw,2.7rem)} .nw-cover--photo .nw-cover-head{background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0 0 12px} .nw .nw-cover--photo .st--box{height:auto;min-height:90px} .nw-cover--photo .nw-boxes{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px} .nw-cover--photo .nw-boxes > :nth-child(-n+2){grid-column:span 3} .nw-cover--photo .nw-boxes > :nth-child(n+3){grid-column:span 2} .nw-cover-credit{position:static;grid-column:2;grid-row:4;align-self:center;justify-self:end} .nw-cover-top,.nw-cover--right .nw-cover-top{ grid-column:1 / -1;grid-row:5;align-self:start; padding:22px var(--cv-pad) 30px;background:#F3F1ED; /* warm light band, off the photo */ } .nw-boxes{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px} .nw-cover-head{background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0 0 12px;margin:0} .nw-cover{--cv-title:#1B3A5B;--cv-meta:#55595F;--cv-cat:#1B3A5B;--cv-today:#1B3A5B;--cv-head:#1B3A5B;--cv-tile:#E6E2DB;--cv-tile-ink:#1B3A5B;--cv-focus:#1B3A5B;--cv-ts:none} .nw .st--box{background:none;box-shadow:inset 0 1px 0 rgba(58,54,49,.16);border-radius:0;-webkit-backdrop-filter:none;backdrop-filter:none;min-height:92px} .nw .st--box:hover{background:rgba(58,54,49,.04)} .nw-cover--photo .nw-cover-art::after{ background: linear-gradient(180deg, rgba(var(--cv-shade),.74) 0, rgba(var(--cv-shade),.6) 120px, rgba(var(--cv-shade),.18) 205px, rgba(var(--cv-shade),0) 270px), linear-gradient(0deg, rgba(var(--cv-shade),.84) 0, rgba(var(--cv-shade),.6) 26%, rgba(var(--cv-shade),.24) 46%, rgba(var(--cv-shade),0) 62%); } } /* ---- Phones (≤700): tall crop, headline on the photo, compact rows ---- */ @media (max-width:700px){ .news-home{--news-editorial-inset:20px} .nw-cover{--cv-top:calc(var(--o-header-h) + 45px)} /* --cv-h stays 846px, as Home's mobile hero */ .nw-cover-art img{object-position:var(--cover-pos-m,var(--cover-pos,50% 50%))} .nw-cover-stage,.nw-cover--right .nw-cover-stage{grid-template-rows:var(--cv-top) minmax(0,1fr) auto 28px auto} .nw .st--cover .st-kicker{font-size:12.5px;margin-bottom:9px} .nw .st--cover .st-title{font-size:clamp(1.8rem,1.1rem + 3.2vw,2.2rem);line-height:1.06;max-width:none} .nw .st--cover .st-meta{margin-top:10px;font-size:12px} .nw-cover--type .st--cover{padding-top:32px} .nw-cover--type .st--cover .st-sum{display:-webkit-box;font-size:1rem} .nw-cover-top,.nw-cover--right .nw-cover-top{padding:18px var(--cv-pad) 22px} .nw-boxes{grid-template-columns:1fr;gap:0} .nw .st--box{ grid-template-columns:76px minmax(0,1fr);min-height:0;padding:12px 0; background:none;box-shadow:none;border-radius:0;border-top:1px solid rgba(58,54,49,.16); } .nw .st--box:first-child{border-top:0;padding-top:4px} .nw .st--box:hover{background:none} .nw .st--box .st-media{height:76px;border-radius:3px} .nw .st--box .st-body{padding:0 0 0 14px} .nw .st--box .st-title{font-size:1rem} .nw-cover--photo .nw-boxes{grid-template-columns:1fr;gap:0} .nw-cover--photo .nw-boxes > *{grid-column:auto} .nw .nw-cover--photo .st--box{grid-template-columns:76px minmax(0,1fr);min-height:0;padding:14px 0;background:none;box-shadow:none;border-radius:0} .nw .nw-cover--photo .st--box:first-child{padding-top:4px} .nw .nw-cover--photo .st--box:hover{background:none} .nw .nw-cover--photo .st--box .st-title{font-size:1rem;-webkit-line-clamp:3} .nw .nw-cover--photo .st--box .st-media--mark span{font-size:22px} /* No photo: a small quiet square */ .nw .st--box .st-media--mark{width:52px;height:52px;align-self:start;margin-top:2px;background:#ECE8E2;border-radius:2px} .nw .st--box .st-media--mark span, .nw .nw-cover--photo .st--box .st-media--mark span{font-size:17px} .nw .st--box .st-media--mark::after{left:8px;bottom:8px;width:10px;height:1.5px} } @media (prefers-reduced-motion:reduce){ .nw-cover-art img,.nw-cover-stage:has(.st--cover .st-link:hover) .nw-cover-art img{transition:none;transform:none} .nw .st--box{transition:none} }