/* Match the article pages’ paper background across the homepage. */
body[data-page="home"] { background:#eeeae2 url("assets/eggshell-newsprint.webp") center top / 1200px auto repeat; }

/* Section showcases beneath the homepage lead. */
.section-showcases { padding-top: 18px; }
.section-showcase { margin: 36px 0 52px; }
.showcase-heading { position:relative; isolation:isolate; display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:12px; padding:30px 20px 16px; color:#fff; background:var(--section-backdrop); clip-path:polygon(0 0, 32% 0, calc(32% + 22px) 14px, 100% 14px, 100% 100%, 0 100%); }
.showcase-heading::after { content:""; position:absolute; inset:0; z-index:-1; background:rgba(0,0,0,.32); pointer-events:none; }
.showcase-mix { position:absolute; inset:0; z-index:-2; background:var(--section-backdrop); -webkit-mask-image:linear-gradient(to right, transparent 25%, #000 80%); mask-image:linear-gradient(to right, transparent 25%, #000 80%); pointer-events:none; }
.showcase-heading h2 { margin:0; font:400 clamp(32px,4vw,46px)/1 var(--head); text-transform:uppercase; }
.showcase-links { display:flex; flex-wrap:wrap; gap:8px 18px; }
.showcase-links a { color:#fff; font:700 13px var(--label); text-transform:uppercase; letter-spacing:.04em; }
.showcase-content { display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr); gap:28px; padding:24px; background:#fff; }
.showcase-leads { display:grid; grid-template-columns:minmax(0,1fr); gap:28px; align-content:start; }
.showcase-lead { min-width:0; }
.showcase-image { aspect-ratio:16/9; overflow:hidden; background:var(--section-backdrop); }
.showcase-image img { display:block; width:100%; height:100%; object-fit:cover; }
.showcase-placeholder { display:flex; align-items:end; height:100%; padding:14px; color:white; font:400 24px var(--head); text-transform:uppercase; }
.showcase-lead h3 { margin:12px 0 6px; font:400 clamp(23px,2.2vw,31px)/1.05 var(--head); text-transform:uppercase; overflow-wrap:anywhere; }
.showcase-lead a:hover h3, .showcase-list a:hover { color:var(--hl); text-decoration:underline; }
.showcase-lead time, .showcase-list time { color:#666; font:400 13px/1.3 var(--label); white-space:nowrap; }
.showcase-list { list-style:none; margin:0; padding:0; columns:1; }
.showcase-list li { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:6px 16px; padding:10px 0; border-bottom:1px solid #d4cfc8; }
.showcase-list li:first-child { padding-top:0; }
.showcase-list a { font:700 20px/1.3 var(--body); text-transform:none; overflow-wrap:anywhere; }
.showcase-list time { text-align:right; }
.showcase-list a:focus-visible, .showcase-lead a:focus-visible, .showcase-links a:focus-visible { outline:3px solid var(--red); outline-offset:3px; }
@media(max-width:760px) { .showcase-content { grid-template-columns:minmax(0,1fr); gap:22px; padding:18px; } .section-showcase { margin:30px 0 40px; } }
@media(max-width:420px) { .showcase-leads { gap:14px; } .showcase-lead h3 { font-size:21px; } .showcase-heading { clip-path:polygon(0 0, 48% 0, calc(48% + 18px) 14px, 100% 14px, 100% 100%, 0 100%); padding-left:14px; padding-right:14px; } .showcase-list li { gap:6px 10px; } .showcase-list time { font-size:12px; } }