/* 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; }

/* Section hero: mirrors the main index hero inside each section showcase. */
.showcase-hero { position:relative; background:#fbf9f4; border-top:5px solid var(--red); border-bottom:1px solid #dfd9cf; overflow:hidden; }
.showcase-hero .hero-main { position:relative; display:grid; grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr); min-height:360px; overflow:hidden; }
.showcase-hero .hero-field { inset:0 0 0 38%; }
.showcase-hero .hero-paper { position:relative; z-index:2; background:#fbf9f4; padding:28px 46px 30px 28px; margin-right:-36px; display:flex; flex-direction:column; justify-content:center; gap:16px; container-type:inline-size; }
.showcase-hero .hero-paper::before { display:none; }
.showcase-hero .hero-paper .label-bar { align-self:flex-start; }
.showcase-hero .hero-paper .mega { font-size:min(58px,10cqw); line-height:.93; }
.showcase-hero .hero-paper .mega a { text-decoration:underline transparent; text-decoration-thickness:.055em; text-underline-offset:.1em; transition:text-decoration-color .2s; }
.showcase-hero .hero-paper .mega a:hover { text-decoration-color:var(--hl); }
.showcase-hero .hero-paper .dek { max-width:46ch; font-size:17px; line-height:1.45; margin:0; }
.showcase-hero .hero-media { position:relative; z-index:1; display:flex; align-items:center; padding:24px 24px 24px 52px; }
.showcase-hero a:focus-visible { outline:3px solid var(--hl); outline-offset:3px; }

.showcase-hero .hero-main.has-art { --art-seam:46%; --art-fade:300px; --bleed:0px; }
.showcase-hero .has-art .hero-art { display:block; position:absolute; inset:0; z-index:0; pointer-events:none; }
.showcase-hero .art-tile { position:absolute; top:0; bottom:0; left:var(--art-seam); right:var(--bleed); overflow:hidden; container-type:size; }
.showcase-hero .art-tile img {
  --w:max(250cqw, 241cqh); --h:calc(var(--w) * .5625);
  position:absolute; max-width:none; width:var(--w); height:var(--h); object-fit:cover;
  left:clamp(calc(100cqw - var(--w)), calc(50cqw - var(--w) * .79), calc(var(--w) * -.6));
  top:clamp(calc(100cqh - var(--h) * .91), calc((100cqh - var(--h)) * .7), calc(var(--h) * -.165));
}
.showcase-hero .hero-art-photo {
  -webkit-mask-image:linear-gradient(90deg, transparent 0, rgba(0,0,0,.2) calc(var(--art-fade) * .3), rgba(0,0,0,.75) calc(var(--art-fade) * .7), #000 var(--art-fade));
          mask-image:linear-gradient(90deg, transparent 0, rgba(0,0,0,.2) calc(var(--art-fade) * .3), rgba(0,0,0,.75) calc(var(--art-fade) * .7), #000 var(--art-fade));
}
.showcase-hero .has-art .hero-field { display:none; }
.showcase-hero .has-art .hero-paper { background:none; clip-path:none !important; }
.showcase-hero .has-art .hero-media { padding:0; align-items:stretch; }
.showcase-hero .has-art .media-card { display:flex; flex-direction:column; height:100%; background:none; box-shadow:none; padding:0; }
.showcase-hero .has-art .media-card .card-bar { display:none; }
.showcase-hero .has-art .media-card .frame { flex:1; margin:0; aspect-ratio:auto; background:none; overflow:visible; }
.showcase-hero .has-art .media-card .frame > img { display:none; }
.showcase-hero .has-art .media-card .play { left:58%; }
.showcase-hero .has-art .media-card .credit { align-self:flex-end; margin:0 16px 14px 0; padding:5px 9px; color:#fff; background:rgba(0,0,0,.62); text-shadow:none; }
.showcase-hero .has-art .media-card .art-note { background:rgba(12,12,12,.78); }
.showcase-hero .has-art .media-card .image-label { left:auto; right:0; bottom:14px; font-size:11px; padding:5px 9px; }
.showcase-hero .has-art .media-card .credit + .art-note { margin-top:-10px; }

@media (min-width:761px) {
  .showcase-hero .hero-main.has-art { grid-template-columns:minmax(0,1fr) minmax(0,1fr); --art-seam:46%; }
  .showcase-hero .has-art .hero-paper { margin-right:0; padding:28px 28px 30px; }
  .showcase-hero .has-art .hero-paper .dek { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
}
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .showcase-hero .art-tile img { transition:transform .7s cubic-bezier(.2,.7,.2,1); transform-origin:70% 50%; }
  .showcase-hero .hero-main:has(.media-card:hover) .art-tile img,
  .showcase-hero .hero-main:has(.hero-paper a:hover) .art-tile img { transform:scale(1.035); }
}

/* Below the section hero: 2 thumbnail cards in one column left, headline-only list right. */
.showcase-content { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; padding:24px; background:#fff; }
.showcase-content.showcase-content-single { grid-template-columns:minmax(0,1fr); }
.showcase-leads { display:grid; grid-template-columns:minmax(0,1fr); gap:26px; align-content:start; }
.showcase-lead { min-width:0; }
.showcase-image { position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--section-backdrop); }
.showcase-image img { display:block; width:100%; height:100%; object-fit:cover; }
.showcase-image .play { width:48px; height:48px; margin:-24px 0 0 -24px; box-shadow:0 0 0 4px rgba(255,255,255,.9); }
.showcase-image .play svg { width:18px; height:18px; margin-left:3px; }
.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-hero .hero-main { grid-template-columns:minmax(0,1fr); min-height:0; }
  .showcase-hero .hero-main.has-art { --band:calc(60vw + 28px); }
  .showcase-hero .has-art .hero-media { order:-1; height:var(--band); padding:0; }
  .showcase-hero .has-art .media-card .play { left:50%; }
  .showcase-hero .has-art .media-card .credit { margin:0 12px 10px 0; }
  .showcase-hero .art-tile { left:0; right:0; top:0; bottom:auto; height:var(--band); }
  .showcase-hero .hero-art-photo {
    -webkit-mask-image:linear-gradient(180deg, #000 0, #000 calc(100% - 110px), rgba(0,0,0,.3) calc(100% - 38px), transparent 100%);
            mask-image:linear-gradient(180deg, #000 0, #000 calc(100% - 110px), rgba(0,0,0,.3) calc(100% - 38px), transparent 100%);
  }
  .showcase-hero .hero-paper { padding:20px 18px 22px; margin-right:0; }
  .showcase-hero .has-art .hero-paper { padding-top:8px; }
  .showcase-hero .hero-paper .mega { font-size:min(48px,11.5cqw); line-height:.94; }
  .showcase-hero .hero-field { inset:0; }
  .showcase-hero .hero-media { padding:18px; }
  .showcase-hero .has-art .hero-media { padding:0; }
  .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; } }