/* Editorial first screens. Original layouts remain available in the workshop. */
html[data-opening="poster"] .article-opening:not(.opening-contained){width:100%;max-width:none;margin:0;padding:0;border:0}
html[data-opening="poster"] .opening-hero:not(.opening-contained) .article-hero-frame{border:0;border-radius:0}
html[data-opening="poster"] .opening-hero:not(.opening-contained) .article-hero-frame>img,
html[data-opening="poster"] .opening-hero:not(.opening-contained) .article-animation-video{width:100%;height:auto;max-height:none;object-fit:contain}
html[data-opening="poster"] .article-hero-copy{padding:clamp(32px,5vw,88px)}
html[data-opening="poster"] .article-hero-copy .article-title{font-size:clamp(38px,4.3vw,72px);line-height:1.13;max-width:1120px;letter-spacing:-.035em}
html[data-opening="poster"] [class*="-compact"] .article-hero-copy{width:52%;padding:clamp(28px,4vw,68px)}
html[data-opening="poster"] [class*="-compact"] .article-hero-copy .article-title{font-size:clamp(34px,3.5vw,58px)}
html[data-opening="poster"] .article-hero-details{max-width:850px;margin:38px auto 0;padding:0 28px}
html[data-opening="poster"] .article-hero-caption{margin:12px 32px 0}
html[data-opening="poster"] .opening-wide:not(.opening-contained) .opening-copy{max-width:1040px;margin:0 auto;padding:clamp(35px,5vw,76px) 32px 38px}
html[data-opening="poster"] .opening-wide:not(.opening-contained) .article-title{font-size:clamp(36px,4.6vw,72px);line-height:1.13;letter-spacing:-.035em}
html[data-opening="poster"] .opening-wide:not(.opening-contained) .article-cover{max-width:none;margin:0}
html[data-opening="poster"] .opening-wide:not(.opening-contained) .article-cover img{width:100%;height:auto;max-height:none}
html[data-opening="poster"] .opening-wide:not(.opening-contained) .article-cover figcaption{margin:12px 32px 0}
html[data-opening="poster"] .opening-side:not(.opening-contained){grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;align-items:center;min-height:calc(100svh - 76px)}
html[data-opening="poster"] .opening-side:not(.opening-contained) .opening-copy{padding:clamp(32px,5vw,84px);min-width:0}
html[data-opening="poster"] .opening-side:not(.opening-contained) .article-title{font-size:clamp(34px,3.6vw,60px);line-height:1.15;letter-spacing:-.035em;text-wrap:balance}
html[data-opening="poster"] .opening-side:not(.opening-contained) .article-cover{align-self:center}
html[data-opening="poster"] .opening-side:not(.opening-contained) .article-cover img{width:100%;height:auto;max-height:calc(100svh - 76px);object-fit:contain;object-position:right center}
html[data-opening="poster"] .opening-side:not(.opening-contained) .article-cover figcaption{margin:12px 24px 20px}
@media(max-width:1100px) and (min-width:851px){
 html[data-opening="poster"] .opening-side:not(.opening-contained) .opening-copy{padding:32px}
 html[data-opening="poster"] .opening-side:not(.opening-contained) .article-deck{font-size:20px}
}
@media(max-width:850px){
 html[data-opening="poster"] .opening-side:not(.opening-contained){grid-template-columns:1fr;min-height:0}
 html[data-opening="poster"] .opening-side:not(.opening-contained) .opening-copy{padding:32px 24px}
 html[data-opening="poster"] .opening-side:not(.opening-contained) .article-cover img{max-height:75svh;object-position:center}
 html[data-opening="poster"] .opening-hero:not(.opening-contained) .article-hero-copy{position:static;width:auto;padding:30px 24px 0;color:var(--ink);text-align:left}
 html[data-opening="poster"] .opening-hero:not(.opening-contained) .article-title{font-size:clamp(30px,5vw,42px);color:var(--ink);margin:0 0 20px}
 html[data-opening="poster"] .opening-hero:not(.opening-contained) .article-kicker{color:var(--accent)}
 html[data-opening="poster"] .opening-hero:not(.opening-contained) .article-deck{color:var(--ink);margin:0;max-width:none}
 html[data-opening="poster"] .article-hero-details{margin:24px 0 0;padding:0 24px;text-align:left}
 html[data-opening="poster"] .article-hero-details .article-meta,html[data-opening="poster"] .article-hero-details .related{justify-content:flex-start}
 html[data-opening="poster"] .article-hero-caption{margin:12px 24px 0}
 html[data-opening="poster"] .opening-wide:not(.opening-contained) .opening-copy{padding:32px 24px;text-align:left}
 html[data-opening="poster"] .opening-wide:not(.opening-contained) .article-title{font-size:clamp(30px,5vw,42px)}
 html[data-opening="poster"] .opening-wide:not(.opening-contained) .article-cover figcaption{margin:12px 24px 0}
}

/* The cover starts behind the sticky navigation, which gains a paper background at the reading column. */
.side-poster-details,.poster-signature{display:none}
html[data-opening="poster"] .article-opening:not(.opening-contained){margin-top:calc(-1 * var(--reading-header-height,76px))}
html[data-opening="poster"] .reading-header.over-cover{background:transparent;border-color:transparent;box-shadow:none}
html[data-opening="poster"] .over-cover .brand,
html[data-opening="poster"] .over-cover .section-nav a,
html[data-opening="poster"] .over-cover .reading-header-title{color:white;text-shadow:0 1px 12px #0009}
html[data-opening="poster"] .over-cover .section-nav a::after{background:currentColor}
html[data-opening="poster"] .over-cover .reading-header-progress{opacity:0}
html[data-opening="poster"] .opening-hero:not(.opening-contained) .article-hero-frame::before,
html[data-opening="poster"] .opening-wide:not(.opening-contained) .article-cover::before{content:"";position:absolute;inset:0 0 auto;height:140px;background:linear-gradient(#0009,transparent);pointer-events:none;z-index:1}
html[data-opening="poster"] .opening-hero:not(.opening-contained) .article-hero-copy{padding-top:max(100px,7vw)}
html[data-opening="poster"] .opening-wide:not(.opening-contained){display:flex;flex-direction:column}
html[data-opening="poster"] .opening-wide:not(.opening-contained) .article-cover{order:-1;position:relative}
html[data-opening="poster"] .opening-side:not(.opening-contained){min-height:100svh}
html[data-opening="poster"] .opening-side:not(.opening-contained) .opening-copy{padding-top:calc(var(--reading-header-height,76px) + 32px);padding-bottom:64px}
html[data-opening="poster"] .opening-side:not(.opening-contained) .article-cover{position:relative}
html[data-opening="poster"] .opening-side:not(.opening-contained) .article-cover img{max-height:100svh}
html[data-opening="poster"] .opening-side:not(.opening-contained) .article-cover::before{content:"";position:absolute;inset:0 0 auto;height:130px;background:linear-gradient(#0008,transparent);pointer-events:none}
html[data-opening="poster"] .over-side-cover .brand{color:var(--accent);text-shadow:none}
html[data-opening="poster"] .over-side-cover .reading-header-title{color:var(--ink);text-shadow:none}
html[data-opening="poster"] .side-previous-head{display:none}
html[data-opening="poster"] .poster-signature{display:flex;gap:10px 22px;flex-wrap:wrap;align-items:baseline;font:400 17px/1.5 var(--body);margin-top:28px}
html[data-opening="poster"] .poster-signature a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line)}
html[data-opening="poster"] .poster-signature a:hover{color:var(--accent)}
html[data-opening="poster"] .side-poster-details{display:block;max-width:850px;margin:40px auto 0;padding:0 28px}
html[data-opening="poster"] .side-poster-details .article-deck{max-width:none}
@media(max-width:850px){
 html[data-opening="poster"] .opening-side:not(.opening-contained){min-height:0}
 html[data-opening="poster"] .opening-side:not(.opening-contained) .opening-copy{padding:calc(var(--reading-header-height,70px) + 30px) 24px 36px}
 html[data-opening="poster"] .over-side-cover .section-nav a{color:var(--ink);text-shadow:none}
 html[data-opening="poster"] .opening-side:not(.opening-contained) .article-cover::before{display:none}
 html[data-opening="poster"] .opening-side:not(.opening-contained) .article-cover img{max-height:80svh}
 html[data-opening="poster"] .side-poster-details{margin-top:28px;padding:0 24px}
 html[data-opening="poster"] .opening-hero:not(.opening-contained) .article-hero-copy{padding-top:30px}
 html[data-opening="poster"] .opening-hero:not(.opening-contained) .article-hero-frame::after{display:none}
}

/* Side images and videos occupy exactly the same panel; no gradient seam. */
html[data-opening="poster"] .opening-side:not(.opening-contained) .article-cover::before{display:none}
@media(min-width:851px){
 html[data-opening="poster"] .opening-side:not(.opening-contained){align-items:stretch}
 html[data-opening="poster"] .opening-side:not(.opening-contained) .article-cover{align-self:stretch;height:100svh;position:relative}
 html[data-opening="poster"] .opening-side:not(.opening-contained) .article-cover img,
 html[data-opening="poster"] .opening-side:not(.opening-contained) .article-cover .article-animation-video{display:block;width:100%;height:100%;max-height:none;margin:0;object-fit:cover;object-position:center}
 html[data-opening="poster"] .opening-side:not(.opening-contained) .article-cover figcaption{position:absolute;top:100%;left:0;right:0;font-size:12px;line-height:1.4;margin:10px 24px 0}
 html[data-opening="poster"] .side-poster-details{margin-top:64px}
 html[data-opening="poster"] .opening-side:not(.opening-contained) .animation-toggle{position:absolute;right:18px;bottom:18px;z-index:2}
}
@media(max-width:850px){
 html[data-opening="poster"] .opening-side:not(.opening-contained) .article-cover .article-animation-video{display:block;width:100%;height:auto;max-height:80svh;object-fit:contain}
}

/* A calm image can carry its deck; other compact covers retain title only. */
@media(min-width:851px){
 html[data-opening="poster"] .article-hero-top-left-compact .article-hero-copy .article-deck{margin:24px 0 0;max-width:30em;font-size:clamp(20px,1.6vw,25px);line-height:1.45}
}
.opening-contained{margin:0 auto;}
.opening-contained .article-cover img,.opening-contained .article-cover .article-animation-video{object-fit:contain}

/* Center the title block; alternate the image side only when its composition supports it. */
@media(min-width:851px){
 html[data-opening="poster"] .opening-side:not(.opening-contained) .opening-copy{display:flex;flex-direction:column;justify-content:center;padding-top:var(--reading-header-height,76px);padding-bottom:0}
 html[data-opening="poster"] .side-cover-left .article-cover{grid-column:1;grid-row:1}
 html[data-opening="poster"] .side-cover-left .opening-copy{grid-column:2;grid-row:1}
 html[data-opening="poster"] .over-side-left-cover .brand{color:#fff;text-shadow:0 1px 12px #0009}
 html[data-opening="poster"] .over-side-left-cover .section-nav{visibility:hidden;pointer-events:none}
}

.poster-signature .external-link-icon{display:inline-block;width:.95em;height:.95em;vertical-align:-.12em;margin-left:.15em;flex:none}

/* Desktop preferences follow the transparent-cover state of the reading header. */
@media(min-width:851px){
 html:has(.reading-header.over-cover) #reader-preferences > *{opacity:0;visibility:hidden;pointer-events:none}
}