/* Compact questions retain an editorial photo field; phones use a full-width band. */
@media screen and (min-width:541px) and (max-width:900px) and (min-height:601px){
 body[data-screen=question]{--journey-aside:40%;--journey-pad:20px}
 body[data-screen=question] .identity-scene{top:var(--journey-header);right:0;bottom:0;width:40%;height:auto;z-index:0}
 #shell .question-layout{margin-right:40%}
 #shell .stage-wrap{padding:20px}
 #shell .q-title{font-size:30px;line-height:1.06;margin-top:20px;padding-right:0;min-height:0}
 #shell .q-kicker{font-size:10px;letter-spacing:.03em}
 #shell .q-note{font-size:16px;line-height:1.35;margin-top:12px}
 #shell .opts{grid-template-columns:minmax(0,1fr);margin-top:18px;gap:7px}
 #shell .opt.choice-control{min-height:44px;padding:8px 10px;font-size:16px;line-height:1.25;gap:8px}
 #shell .opt.choice-control .n{flex-basis:20px;height:20px;font-size:12px}
 #shell .opt.choice-control .choice-indicator{width:18px;flex-basis:18px}
}
@media screen and (max-width:540px){
 body[data-screen=question]{--photo-band:200px;--question-pad:20px;--question-rail:44px}
 body[data-screen=question] .identity-scene,
 body[data-screen=question] .identity-scene[data-phase=question-08]{top:var(--journey-header);left:0;right:0;bottom:auto;width:100%;height:max(0px,calc(var(--photo-band) - var(--question-rail)));z-index:2}
 #shell .stage-wrap{padding:calc(var(--photo-band) + 16px) var(--question-pad) 16px}
 #shell .stage,#shell .stage[data-question="8"]{grid-template-columns:1fr;grid-template-rows:none}
 #shell .stage::before{content:'';position:fixed;left:0;right:0;top:calc(var(--journey-header) + var(--photo-band) - var(--question-rail));height:var(--question-rail);z-index:2;background:#fff;border-bottom:1px solid var(--rule)}
 #shell .backlink,#shell .stage[data-question="8"] .backlink{position:fixed;top:calc(var(--journey-header) + var(--photo-band) - var(--question-rail));left:var(--question-pad);z-index:3;height:var(--question-rail);padding:0;border:0;background:none;box-shadow:none}
 #shell .q-kicker,#shell .stage[data-question="8"] .q-kicker{position:fixed;top:calc(var(--journey-header) + var(--photo-band) - var(--question-rail));right:var(--question-pad);z-index:3;height:var(--question-rail);display:flex;align-items:center;justify-content:flex-end;font-size:10px;letter-spacing:.06em;text-align:right}
 #shell .q-title,#shell .stage[data-question="8"] .q-title{grid-column:1;grid-row:auto;margin:0;padding:0;min-height:0;font-size:28px;line-height:1.06}
 #shell .q-note{margin-top:12px;font-size:16px;line-height:1.35}
 #shell .opts,#shell .stage[data-question="8"] .opts{grid-column:1;grid-row:auto;margin-top:14px;gap:6px}
 #shell .opt.choice-control{min-height:44px;padding:8px 10px;gap:8px;font-size:16px;line-height:1.25}
 #shell .opt.choice-control .n{height:20px;flex-basis:20px;font-size:12px}
 #shell .artwork-question-08 img{object-fit:cover}
 /* Keep the face within the shallow band on questions with eight options. */
 .artwork-question-01{--crop:var(--first-question-crop,45%);--crop-x:50%}
 .artwork-question-02{--crop:57%}
 .artwork-question-04{--crop:64%}
 .artwork-question-08 img{--crop:59%}
}
@media screen and (max-width:360px){
 body[data-screen=question]{--question-pad:16px}
 #shell .q-title,#shell .stage[data-question="8"] .q-title{font-size:26px}
}
@media screen and (min-width:541px) and (max-width:900px) and (min-height:601px){
 /* Give the wordmark portrait enough width to preserve its actual subject. */
 body[data-screen=question] .identity-scene[data-phase=question-06]{width:60%}
 #shell:has(.stage[data-question="6"]) .question-layout{margin-right:60%}
 #shell .stage[data-question="6"] .q-title{font-size:26px}
 /* A substantial landscape band keeps the racing car prominent. */
 body[data-screen=question]:has(.stage[data-question="8"]){--question-rail:44px;--question-pad:20px;--photo-band:480px}
 body[data-screen=question] .identity-scene[data-phase=question-08]{top:var(--journey-header);left:0;right:0;bottom:auto;width:100%;height:calc(var(--photo-band) - 44px);z-index:2}
 #shell:has(.stage[data-question="8"]) .question-layout{margin-right:0}
 #shell:has(.stage[data-question="8"]) .stage-wrap{padding:calc(var(--photo-band) + 16px) 20px 16px}
 #shell .stage[data-question="8"]{grid-template-columns:1fr;grid-template-rows:none}
 #shell .stage[data-question="8"]::before{content:'';position:fixed;left:0;right:0;top:calc(var(--journey-header) + var(--photo-band) - 44px);height:44px;z-index:2;background:#fff;border-bottom:1px solid var(--rule)}
 #shell .stage[data-question="8"] .backlink{position:fixed;top:calc(var(--journey-header) + var(--photo-band) - 44px);left:20px;z-index:3;height:44px;padding:0;border:0;background:none;box-shadow:none}
 #shell .stage[data-question="8"] .q-kicker{position:fixed;top:calc(var(--journey-header) + var(--photo-band) - 44px);right:20px;z-index:3;height:44px;display:flex;align-items:center;justify-content:flex-end}
 #shell .stage[data-question="8"] .q-title{grid-column:1;grid-row:auto;margin:0;padding:0;min-height:0}
 #shell .stage[data-question="8"] .opts{grid-column:1;grid-row:auto;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:18px;gap:7px}
}