/* A comic opening page. Portraits and lettering have independent, fixed spaces. */
.opening{padding:1.5rem var(--gut) 2.25rem;background:var(--moss);color:var(--ink)}
.opening-page{position:relative;max-width:1440px;margin:auto;background:var(--paper);border:3px solid var(--ink)}
.opening-heading{display:flex;align-items:end;justify-content:space-between;gap:1.5rem;padding:1.1rem 1.75rem 1.2rem}
.opening-byline{margin:0 0 .85rem;font-size:1rem;line-height:1.3;font-weight:800;display:flex;align-items:baseline;gap:.8rem}
.opening-byline span{font-weight:550;color:var(--moss)}
.opening h1{font-size:clamp(3rem,5.5vw,5.3rem);line-height:.98;letter-spacing:-.045em;margin:0;text-wrap:initial}
.opening h1>span{display:block;white-space:nowrap}
.opening-work{flex:none;margin-bottom:.2rem;background:var(--ink);color:var(--light);border-radius:0;min-height:48px;gap:1.5rem}
.opening-work:is(:hover,:focus-visible){background:var(--yellow);color:var(--ink)}
.opening-figure{margin:0;position:relative;scroll-margin-top:calc(var(--site-header-height) + 1rem)}
.opening-art{display:grid;grid-template-columns:740fr 670fr;border-block:3px solid var(--ink);gap:3px;background:var(--ink)}
.opening-panel{position:relative;overflow:hidden;min-width:0;isolation:isolate}
.opening-panel>svg{display:block;width:100%;height:auto;max-width:none;aspect-ratio:740/430}
.opening-cats>svg{aspect-ratio:670/430}
.opening-human{background:var(--paper)}.opening-cats{background:#c1cdb0}
.opening-lettering{position:absolute;z-index:2}
.opening-human .opening-lettering{top:5%;right:4%;width:43%}
.opening-cats .opening-lettering{top:5%;left:4%;width:38%}
.opening-lettering .balloon{display:block;margin:0;width:100%;max-width:none;padding:.7rem .8rem;font-size:clamp(.95rem,1.25vw,1.15rem);font-weight:700;line-height:1.3;color:var(--ink)}
.opening-lettering .speech-shell path{fill:var(--light);stroke:var(--ink);stroke-width:3}
.opening-toolbar{position:absolute;top:.5rem;right:.7rem;display:flex;gap:1rem;justify-content:space-between;align-items:center;min-height:44px;padding:0;font-size:.875rem;line-height:1.4}
.opening-toolbar .controls{display:flex;align-items:center;gap:.75rem;padding:0;background:none;border:0;flex:none}
.opening-toolbar .controls[hidden]{display:none}
.opening-toolbar button{font:750 .875rem/1.2 var(--body);border:0;border-radius:0;min-height:44px;background:none;color:var(--ink);padding:.4rem .3rem}
.opening-toolbar button:hover{background:none;text-decoration:underline;text-underline-offset:.3em}
.opening-toolbar button:disabled{display:none}
.opening-toolbar button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.opening-figure:focus-visible{outline:3px solid var(--yellow);outline-offset:5px}

@media(max-width:1100px){.opening-heading{padding:1.2rem}.opening h1{font-size:6.6vw}.opening-work{font-size:.95rem;padding:.7rem .9rem;gap:1rem}.opening-lettering .balloon{font-size:.95rem;padding:.55rem .65rem}}
@media(max-width:700px){
 .opening{padding:1rem 1rem 1.5rem}.opening-heading{display:block;padding:1rem}.opening h1{font-size:8vw;letter-spacing:-.045em}.opening-byline{font-size:.875rem;flex-wrap:wrap;gap:.2rem .6rem;margin-bottom:.75rem}.opening-work{margin-top:1rem;font-size:.95rem}
 .opening-art{grid-template-columns:1fr}.opening-panel>svg{aspect-ratio:auto;height:auto}.opening-human{border-bottom:3px solid var(--ink)}
 .opening-lettering .balloon{font-size:1rem;padding:.6rem .65rem}.opening-human .opening-lettering{width:43%;top:5%;right:3%}.opening-cats .opening-lettering{width:38%;top:3%}
 .opening-toolbar{position:static;display:block;padding:.25rem .75rem;min-height:0}.opening-toolbar>span{display:block}.opening-toolbar .controls{justify-content:flex-end;gap:1rem}
}
@media(max-width:360px){.opening{padding-inline:.75rem}.opening-heading{padding:.85rem}.opening-lettering .balloon{font-size:.875rem;line-height:1.3;padding:.45rem .55rem}.opening-toolbar{font-size:.8125rem}}

@media(min-width:701px){.opening-toolbar:has(.controls[hidden]){display:none}.opening-toolbar button{font-size:.8125rem}.opening-heading{min-height:12rem;padding-right:1.75rem}}
@media(max-width:360px){.opening-cats .opening-lettering{top:1%;left:9%;width:45%}}

/* The actual recovered Option B pixels, clipped from the original concept board.
   No hand-drawn replacement emblem or newly generated characters. */
.cover-seal.original-insignia{flex-basis:clamp(9rem,20vw,16rem);aspect-ratio:420/395;transform:rotate(5deg)}
.cover-seal.original-insignia svg{display:block;width:100%;height:100%;fill:none;stroke:none;overflow:hidden}
@media(max-width:640px){.cover-seal.original-insignia{flex-basis:8rem}.cover-story{align-items:center;gap:1rem}.cover-story>p{font-size:clamp(1.15rem,5.6vw,1.6rem)}}
@media(max-width:360px){.cover-seal.original-insignia{flex-basis:6.8rem}}

/* The same cover is recomposed as a horizontal poster for landscape screens. */
@media(min-width:861px) and (min-aspect-ratio:6/5){
 .department-issue{padding-top:1rem}
 .department-cover{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.25fr);grid-template-rows:auto minmax(0,1fr) auto;aspect-ratio:2.1;overflow:visible;width:min(100%,calc((100svh - var(--site-header-height) - 2rem)*2.1));margin-inline:auto;container-type:inline-size}
 .cover-mast{grid-column:1;grid-row:1;padding:1rem 1.25rem 0}
 .issue-line{font-size:.8125rem;letter-spacing:.04em;gap:.6rem;flex-wrap:wrap}
 .agency-lockup{width:100%;max-width:none;margin:.65rem 0 0}
 .agency-tagline{font-size:clamp(.8125rem,1vw,.95rem);letter-spacing:.05em;margin:.25rem -.35rem 0 auto;padding:.4rem .5rem}
 .cover-mast::before{display:none}
 .cover-scene{grid-column:2;grid-row:1/4;margin:0;min-height:0;display:flex;align-items:end;overflow:hidden}
 .cover-scene img{width:100%;height:100%;object-fit:contain;object-position:center bottom}
 .cover-story{grid-column:1;grid-row:2;padding:.75rem 1.25rem .5rem;gap:.7rem;margin:0;min-height:0}
 .cover-story>p{font-size:clamp(1.2rem,2.1cqw,2rem);line-height:1.02}
 .cover-seal.original-insignia{flex-basis:clamp(6rem,9.8cqw,9rem);transform:rotate(5deg)}
 .cover-credit{grid-column:1;grid-row:3;margin:0 1.25rem;padding:.6rem 0;font-size:.8125rem;line-height:1.4;text-align:left;border-top-width:1px}
 .cast-files{grid-template-columns:1fr 1.15fr 1fr}
}

.cover-story>p>span,.cover-story>p>em{display:block}

/* Compact landscape posters use a full-width closing row rather than squeezing
   slogan, badge and credit into the remaining height of the title column. */
@media(min-width:861px) and (min-aspect-ratio:6/5) and (max-width:1100px),
      (min-width:861px) and (min-aspect-ratio:6/5) and (max-height:620px){
 .department-cover{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);grid-template-rows:auto minmax(0,1fr) auto auto auto}
 .cover-mast{display:contents}
 .issue-line{grid-column:1/-1;grid-row:1;margin:.7rem 1.1rem .3rem;flex-wrap:nowrap}
 .agency-lockup{grid-column:1;grid-row:2;width:calc(100% - 2rem);height:100%;min-height:0;margin:0 1rem}
 .agency-lockup img{display:block;width:100%;height:100%;object-fit:contain}
 .agency-tagline{grid-column:1;grid-row:3;justify-self:center;margin:.1rem 0 .4rem;padding:.3rem .4rem;font-size:.8125rem;letter-spacing:.025em;transform:none;max-width:calc(100% - 1.3rem)}
 .cover-scene{grid-column:2;grid-row:2/4}
 .cover-story{grid-column:1/-1;grid-row:4;padding:.35rem 1.1rem;gap:1rem}
 .cover-story>p{font-size:clamp(1.2rem,2.4cqw,1.7rem);line-height:1.05;transform:none}
 .cover-story>p>span{display:inline}
 .cover-story>p em{display:block}
 .cover-seal.original-insignia{flex-basis:6rem;transform:rotate(3deg)}
 .cover-credit{grid-column:1/-1;grid-row:5;margin:0 1.1rem;padding:.45rem 0;font-size:.8125rem}
}
@media(max-width:360px){.opening-human .opening-lettering{width:47%}}