/* Safe speech-bubble zones are set per panel so faces remain visible. */
.art[data-panel] .bubble{right:auto;overflow-wrap:anywhere;hyphens:auto;font-size:clamp(.78rem,2.8vw,.98rem)}

/* 1: open sky above Alex; keep the face and body clear. */
.art[data-issue="night-noir"][data-panel="0"] .bubble{top:14px;bottom:auto;left:14px;max-width:calc(100% - 28px)}

/* 2: the lower-left corner is clear of Alex's face. */
.art[data-issue="night-noir"][data-panel="1"] .bubble{top:auto;bottom:14px;left:14px;max-width:78%}
.art[data-issue="night-noir"][data-panel="1"] .bubble:after{top:-10px;bottom:auto;left:32px;right:auto;border-width:0 9px 11px;border-color:transparent transparent #fff}

/* 3: Max's helmet is on the right, so use a narrow upper-left bubble. */
.art[data-issue="night-noir"][data-panel="2"] .bubble{top:14px;bottom:auto;left:14px;max-width:60%}

/* 4: Max's head and chest stay visible in the upper-right area. */
.art[data-issue="night-noir"][data-panel="3"] .bubble{top:auto;bottom:14px;left:14px;max-width:78%}
.art[data-issue="night-noir"][data-panel="3"] .bubble:after{top:-10px;bottom:auto;left:auto;right:28px;border-width:0 9px 11px;border-color:transparent transparent #fff}

/* 5: both faces are at the top; dialogue moves below them. */
.art[data-issue="night-noir"][data-panel="4"] .bubble{top:auto;bottom:14px;left:14px;max-width:calc(100% - 28px)}
.art[data-issue="night-noir"][data-panel="4"] .bubble:after{top:-10px;bottom:auto;left:48%;right:auto;border-width:0 9px 11px;border-color:transparent transparent #fff}

/* 6: no character faces; place the bubble over the darker foreground. */
.art[data-issue="night-noir"][data-panel="5"] .bubble{top:auto;bottom:14px;left:14px;max-width:78%}
.art[data-issue="night-noir"][data-panel="5"] .bubble:after{top:-10px;bottom:auto;left:auto;right:28px;border-width:0 9px 11px;border-color:transparent transparent #fff}

/* Issue 02: every bubble sits in a deliberately empty image zone. */
.art[data-issue="eclipse-protocol"][data-panel="0"] .bubble{top:auto;bottom:14px;left:14px;max-width:58%}
.art[data-issue="eclipse-protocol"][data-panel="1"] .bubble{top:auto;bottom:14px;left:auto;right:14px;max-width:58%}
.art[data-issue="eclipse-protocol"][data-panel="2"] .bubble{top:auto;bottom:14px;left:14px;max-width:54%}
.art[data-issue="eclipse-protocol"][data-panel="3"] .bubble{top:14px;bottom:auto;left:14px;max-width:50%}
.art[data-issue="eclipse-protocol"][data-panel="4"] .bubble{top:auto;bottom:14px;left:auto;right:14px;max-width:58%}
.art[data-issue="eclipse-protocol"][data-panel="5"] .bubble{top:14px;bottom:auto;left:14px;max-width:40%}
.art[data-issue="eclipse-protocol"] .bubble:after{display:none}

/* Issue 03: portrait-safe zones selected from each source frame. */
.art[data-issue="anatomy-of-feelings"][data-panel="0"] .bubble{top:14px;bottom:auto;left:14px;max-width:38%}
.art[data-issue="anatomy-of-feelings"][data-panel="1"] .bubble{top:14px;bottom:auto;left:14px;max-width:38%}
.art[data-issue="anatomy-of-feelings"][data-panel="2"] .bubble{top:14px;bottom:auto;left:auto;right:14px;max-width:36%}
.art[data-issue="anatomy-of-feelings"][data-panel="3"] .bubble{top:auto;bottom:14px;left:14px;max-width:38%}
.art[data-issue="anatomy-of-feelings"][data-panel="4"] .bubble{top:14px;bottom:auto;left:14px;max-width:34%}
.art[data-issue="anatomy-of-feelings"][data-panel="5"] .bubble{top:auto;bottom:14px;left:14px;max-width:46%}
.art[data-issue="anatomy-of-feelings"] .bubble:after{display:none}

.catalog-head{margin:34px 0 18px}.catalog-head h1{margin:5px 0;font-size:clamp(2.2rem,7vw,4.8rem);letter-spacing:-.05em}.catalog-head p{margin:0;color:#b7bed0}.issue-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:18px 0 48px}.issue-picker a{display:block;overflow:hidden;border:1px solid #283249;border-radius:18px;color:#eef3ff;text-decoration:none;background:#101622;transition:.18s}.issue-picker a:hover{transform:translateY(-3px);border-color:#8257ff}.issue-picker a.active{border-color:#b26cff;box-shadow:0 0 0 2px #7c3aed66}.issue-picker img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}.issue-picker span{display:grid;grid-template-columns:auto 1fr;gap:5px 10px;align-items:center;padding:12px}.issue-picker b{grid-row:1/3;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:#7c3aed}.issue-picker strong{font-size:.9rem;line-height:1.15}.issue-picker small{color:#35dcff;font-weight:800}

@media(max-width:720px){.issue-picker{grid-template-columns:1fr;gap:12px;margin-bottom:38px}.issue-picker a{display:grid;grid-template-columns:42% 1fr}.issue-picker img{height:100%;aspect-ratio:16/10}.issue-picker span{padding:10px}.catalog-head{margin:24px 6px 14px}}

/* Keep the complete source frame visible and dialogue consistently below faces. */
.art img{aspect-ratio:auto!important;height:auto!important;object-fit:contain!important}
.art[data-panel] .bubble{top:auto!important;right:auto!important;bottom:12px!important;left:12px!important;max-width:min(58%,360px)!important;font-size:clamp(.72rem,2.35vw,.94rem)}
.art[data-panel] .bubble:after{display:none}
@media(max-width:420px){.art[data-panel] .bubble{bottom:9px!important;left:9px!important;max-width:60%!important;padding:7px 9px;font-size:clamp(.68rem,2.9vw,.78rem);line-height:1.15}}