/* Luminous X editorial layouts, using the shared site colours and type. */
.blog-skip { position:absolute; left:16px; top:-100px; z-index:10000; background:var(--ink-900); color:#fff; padding:12px 20px; border-radius:8px; }
.blog-skip:focus { top:12px; }
.blog-page main { overflow-wrap:break-word; }
.blog-hero { background:var(--copper-50); padding:calc(var(--header-h) + 44px) 0 52px; border-bottom:1px solid var(--ink-100); }
.blog-hero .breadcrumb,.blog-article-header .breadcrumb { justify-content:flex-start; margin-bottom:28px; flex-wrap:wrap; font-size:.8rem; }
.blog-hero h1 { max-width:900px; font-size:clamp(2.65rem,5vw,4.8rem); line-height:1.06; letter-spacing:-.05em; margin:16px 0 22px; text-wrap:balance; }
.blog-hero h1 span { color:var(--copper-600); }
.blog-hero p { max-width:680px; font-size:var(--fs-lg); color:var(--ink-600); line-height:1.65; margin:0; }
.blog-content { padding-top:32px; padding-bottom:64px; }
.blog-topics { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:32px; }
.blog-topics>span { color:var(--ink-500); font-size:.8rem; margin-right:8px; }
.blog-topics a { color:var(--ink-700); background:#fff; border:1px solid var(--ink-200); padding:11px 16px; border-radius:999px; font-size:.8rem; text-decoration:none; min-height:44px; display:inline-flex; align-items:center; }
.blog-topics a:hover { border-color:var(--copper-500); background:var(--copper-50); }
.blog-card { min-width:0; background:#fff; border:1px solid var(--ink-100); border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .25s,border-color .25s; scroll-margin-top:calc(var(--header-h) + 24px); }
.blog-card:hover,.blog-card:focus-within { box-shadow:var(--sh-md); border-color:var(--copper-200); }
.blog-featured { display:grid; grid-template-columns:1.05fr 1fr; background:var(--copper-50); }
.blog-card-image { display:block; overflow:hidden; aspect-ratio:16/9; }
.blog-card-image img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s; }
.blog-card:hover .blog-card-image img { transform:scale(1.025); }
.blog-featured .blog-card-image { height:100%; aspect-ratio:auto; min-height:390px; }
.blog-card-body { padding:32px; display:flex; flex:1; flex-direction:column; align-items:flex-start; }
.blog-featured .blog-card-body { padding:clamp(28px,3.8vw,52px); justify-content:center; }
.blog-meta { display:flex; flex-wrap:wrap; gap:8px 20px; color:var(--ink-600); font-size:.8rem; line-height:1.6; align-items:center; }
.blog-category { color:var(--copper-800); background:var(--copper-50); border:1px solid var(--copper-200); padding:5px 10px; border-radius:999px; }
.blog-featured .blog-category { background:#fff; }
.blog-feature-label { font-family:var(--font-mono); font-size:.7rem!important; text-transform:uppercase; letter-spacing:.1em; color:var(--copper-700)!important; margin:24px 0 0!important; }
.blog-card h2,.blog-card h3 { line-height:1.2; letter-spacing:-.03em; margin:20px 0 16px; text-wrap:balance; }
.blog-card h2 { font-size:clamp(1.8rem,2.5vw,2.55rem); }
.blog-card h3 { font-size:clamp(1.5rem,2vw,1.85rem); }
.blog-card h2 a,.blog-card h3 a { color:var(--ink-900); text-decoration:none; }
.blog-card h2 a:hover,.blog-card h3 a:hover { color:var(--copper-700); }
.blog-card-body>p { color:var(--ink-600); font-size:1rem; line-height:1.75; margin:0 0 24px; }
.blog-read { display:inline-flex; gap:16px; align-items:center; color:var(--copper-800); font-weight:600; text-decoration:none; margin-top:auto; min-height:44px; }
.blog-read:hover { color:var(--ink-900); text-decoration:underline; text-underline-offset:5px; }
.blog-section-heading { margin:52px 0 24px; }
.blog-section-heading h2 { font-size:var(--fs-2xl); letter-spacing:-.035em; margin:8px 0 0; }
.blog-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
.blog-invitation { border:1px solid var(--ink-100); background:var(--copper-50); border-radius:var(--r-lg); padding:40px; margin-bottom:64px; display:flex; align-items:center; justify-content:space-between; gap:32px; }
.blog-invitation h2 { font-size:var(--fs-xl); letter-spacing:-.03em; margin:8px 0 12px; }
.blog-invitation p { color:var(--ink-600); max-width:650px; margin:0; line-height:1.7; }
.blog-invitation .btn { flex-shrink:0; }
/* A compact image and title share the opening, so the article starts sooner. */
.blog-article-header { padding:calc(var(--header-h) + 32px) 0 40px; border-bottom:1px solid var(--ink-100); background:var(--copper-50); }
.blog-article-hero { display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(32px,4vw,64px); align-items:center; }
.blog-title-block { min-width:0; }
.blog-article-header h1 { max-width:19ch; font-size:clamp(2.2rem,3.7vw,3.65rem); line-height:1.12; letter-spacing:-.045em; margin:14px 0 20px; text-wrap:balance; }
.blog-standfirst { max-width:58ch; font-size:clamp(1rem,1.3vw,1.14rem); color:var(--ink-600); line-height:1.7; margin:0 0 24px; }
.blog-byline { gap:6px 16px; padding-top:18px; border-top:1px solid var(--ink-200); }
.blog-byline>span:first-child { font-weight:600; color:var(--ink-800); flex-basis:100%; }
.blog-hero-photo { margin:0; min-width:0; }
.blog-article-image { display:block; width:100%; height:clamp(320px,30vw,425px); object-fit:cover; border-radius:var(--r-lg); }
.blog-reader-actions { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:24px; }
.blog-reader-actions .btn { font-size:.85rem; }
.blog-copy-link { min-height:44px; padding:10px 14px; color:var(--ink-700); font:inherit; font-size:.85rem; font-weight:600; border:1px solid var(--ink-200); border-radius:var(--r-full); background:transparent; cursor:pointer; }
.blog-copy-link[hidden] { display:none; }
.blog-copy-link:hover { background:#fff; border-color:var(--copper-500); }
.blog-copy-status { color:var(--ink-600); font-size:.78rem; flex-basis:100%; }
.blog-copy-status:empty { display:none; }
.article-progress { position:fixed; top:var(--header-h); left:0; right:0; height:3px; z-index:99; background:var(--ink-100); pointer-events:none; }
.article-progress[hidden] { display:none; }
.article-progress>span { display:block; width:100%; height:100%; background:var(--copper-500); transform:scaleX(0); transform-origin:left; }
/* Readable line length, stronger text contrast, and a quiet section guide. */
.blog-reading-layout { display:grid; grid-template-columns:240px minmax(0,720px); gap:clamp(40px,6vw,88px); padding-top:48px; padding-bottom:64px; justify-content:center; align-items:start; }
.blog-contents { position:sticky; top:calc(var(--header-h) + 28px); font-size:.86rem; min-width:0; }
.blog-contents-panel { border:1px solid var(--ink-100); border-radius:var(--r-md); padding:20px; background:#fff; }
.blog-contents-panel summary { display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:.78rem; font-weight:700; color:var(--ink-800); cursor:pointer; min-height:32px; list-style:none; }
.blog-contents-panel summary::-webkit-details-marker { display:none; }
.blog-contents-panel summary span { transition:transform .2s; }
.blog-contents-panel[open] summary span { transform:rotate(180deg); }
.blog-contents ol { padding:0; margin:16px 0 0; list-style:none; counter-reset:sections; display:grid; gap:4px; }
.blog-contents li { counter-increment:sections; }
.blog-contents ol a { display:flex; align-items:flex-start; gap:10px; padding:10px 8px; min-height:44px; border-radius:8px; color:var(--ink-600); text-decoration:none; line-height:1.5; }
.blog-contents ol a::before { content:counter(sections,decimal-leading-zero); color:var(--copper-700); font-family:var(--font-mono); font-size:.7rem; margin-top:2px; }
.blog-contents ol a:hover { background:var(--copper-50); color:var(--ink-900); }
.blog-contents ol a[aria-current="location"] { background:var(--copper-50); color:var(--copper-800); font-weight:600; }
.blog-back { display:inline-flex; align-items:center; min-height:44px; margin-top:16px; padding:0 8px; color:var(--ink-700); font-weight:600; text-decoration:none; }
.blog-back:hover { color:var(--copper-700); }
.blog-prose { min-width:0; font-size:clamp(1.04rem,1.2vw,1.13rem); line-height:1.85; color:var(--ink-700); scroll-margin-top:calc(var(--header-h) + 28px); }
.blog-prose p { margin:0 0 22px; max-width:68ch; }
.blog-prose .blog-intro { font-size:1.18rem; line-height:1.8; color:var(--ink-800); }
.blog-prose section { margin-top:40px; padding-top:4px; scroll-margin-top:calc(var(--header-h) + 28px); }
.blog-prose h2 { font-size:clamp(1.4rem,1.8vw,1.7rem); line-height:1.3; letter-spacing:-.025em; color:var(--ink-900); margin:0 0 18px; text-wrap:balance; }
.blog-brief { background:var(--ink-50); border:1px solid var(--ink-100); border-radius:var(--r-md); padding:24px 28px; margin:28px 0 40px; }
.blog-brief .eyebrow { font-size:.7rem; margin-bottom:12px; color:var(--copper-700); }
.blog-brief ul { margin:0; padding-left:20px; display:grid; gap:10px; font-size:.98rem; line-height:1.65; }
.blog-brief li::marker { color:var(--copper-600); }
.blog-takeaway { background:var(--copper-50); border-left:3px solid var(--copper-500); padding:28px; margin-top:40px; border-radius:0 var(--r-md) var(--r-md) 0; }
.blog-takeaway h2 { font-size:1.25rem; }
.blog-takeaway p { font-size:1rem; }
.blog-related { margin-top:48px; padding-top:32px; border-top:1px solid var(--ink-100); }
.blog-related h2 { font-size:1.25rem; }
.blog-related ul { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.blog-related a { display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:116px; height:100%; border:1px solid var(--ink-100); border-radius:var(--r-md); padding:20px; color:var(--ink-800); text-decoration:none; font-size:.95rem; line-height:1.55; font-weight:600; }
.blog-related a span { color:var(--copper-600); }
.blog-related a:hover { background:var(--copper-50); border-color:var(--copper-200); }
.blog-page :is(a,button,summary):focus-visible { outline:2px solid var(--copper-600); outline-offset:4px; }
@media(max-width:1000px) { .blog-reading-layout { grid-template-columns:210px minmax(0,1fr); gap:36px; } .blog-article-hero { grid-template-columns:1.2fr 1fr; gap:28px; } }
@media(max-width:900px) {
 .blog-reading-layout { grid-template-columns:minmax(0,720px); gap:28px; }
 .blog-contents { position:static; }
 .blog-contents-panel { padding:14px 20px; background:var(--ink-50); }
 .blog-contents-panel summary { min-height:36px; }
 .blog-contents ol { grid-template-columns:1fr 1fr; column-gap:20px; }
 .blog-contents>.blog-back { display:none; }
 .blog-article-hero { grid-template-columns:1fr; }
 .blog-article-header h1 { max-width:23ch; font-size:clamp(2.2rem,5.5vw,3.4rem); }
 .blog-standfirst { max-width:65ch; }
 .blog-article-image { height:clamp(220px,42vw,320px); }
}
@media(max-width:768px) {
 .blog-hero { padding-top:calc(var(--header-h) + 28px); padding-bottom:36px; }
 .blog-content { padding-top:24px; padding-bottom:40px; }
 .blog-featured,.blog-grid { grid-template-columns:1fr; }
 .blog-featured .blog-card-image { min-height:0; aspect-ratio:16/10; }
 .blog-card-body,.blog-featured .blog-card-body { padding:24px; }
 .blog-section-heading { margin-top:40px; }
 .blog-invitation { flex-direction:column; align-items:flex-start; padding:28px; margin-bottom:40px; width:calc(100% - 40px); }
 .blog-reading-layout { padding-top:28px; padding-bottom:40px; }
 .blog-article-header { padding-top:calc(var(--header-h) + 24px); padding-bottom:28px; }
 .blog-hero .breadcrumb,.blog-article-header .breadcrumb { margin-bottom:24px; }
 .blog-article-image { border-radius:var(--r-md); }
}
@media(max-width:480px) {
 .blog-hero h1 { font-size:2.5rem; }
 .blog-article-header h1 { font-size:2.15rem; }
 .blog-topics { gap:8px; }
 .blog-topics>span { width:100%; }
 .blog-topics a { padding:10px 12px; font-size:.75rem; }
 .blog-contents ol,.blog-related ul { grid-template-columns:1fr; }
 .blog-prose .blog-intro { font-size:1.1rem; }
 .blog-brief,.blog-takeaway { padding:22px; }
 .blog-related a { min-height:80px; }
 .blog-invitation .btn { width:100%; justify-content:center; }
 .blog-reader-actions .btn { flex:1; justify-content:center; }
 .blog-copy-link { flex:1; }
}
@media(prefers-reduced-motion:reduce) { .blog-card,.blog-card-image img,.blog-contents-panel summary span { transition:none; } .blog-card:hover .blog-card-image img { transform:none; } }