/* Three real captures stay in the document. Tall desktops let their headers
   gather into a stack; other viewports keep an ordinary vertical reading order. */
.setup-gallery { padding-block:clamp(85px,9vw,135px); background:var(--page); color:var(--ink); }
.setup-shell { width:calc(100% - clamp(32px,6vw,96px)); max-width:1440px; margin-inline:auto; }
.setup-heading { display:grid; grid-template-columns:.9fr 1fr; align-items:end; gap:10%; margin-bottom:40px; }
.setup-gallery .setup-heading h2 { margin:0; color:var(--ink); font:400 clamp(46px,5.6vw,86px)/1.03 var(--sans); letter-spacing:-.05em; }
.setup-heading > p { max-width:36em; margin:0 0 4px; color:var(--muted); font-size:clamp(18px,1.5vw,20px); line-height:1.65; }
.setup-selectors { display:flex; flex-wrap:wrap; gap:12px 34px; margin-bottom:35px; }
.setup-selectors a { display:inline-flex; align-items:center; min-height:48px; padding:8px 0; color:var(--muted); font-size:18px; line-height:1.4; text-decoration:underline; text-underline-offset:6px; text-decoration-color:var(--rule); }
.setup-selectors a::after { content:'↓'; margin-left:12px; color:var(--signal); }
.setup-selectors a:hover { color:var(--ink); text-decoration-color:var(--signal); }
.setup-gallery :focus-visible { outline:3px solid var(--signal); outline-offset:5px; }
.setup-panels { position:relative; display:grid; gap:clamp(38px,5vw,75px); align-items:start; }
.setup-card { --setup-index:0; position:relative; min-width:0; padding:0 26px 25px; background:var(--panel); border:1px solid var(--rule); border-radius:10px; box-shadow:0 30px 65px -45px #0008; scroll-margin-top:115px; }
.setup-card:nth-child(2) { --setup-index:1; }
.setup-card:nth-child(3) { --setup-index:2; }
.setup-card-heading { display:flex; align-items:center; justify-content:space-between; gap:25px; min-height:66px; padding:14px 0; }
.setup-card-heading h3 { margin:0; color:var(--ink); font:400 clamp(26px,2.4vw,34px)/1.05 var(--sans); letter-spacing:-.035em; }
.setup-card-heading > p { margin:0; color:var(--muted); font-size:16px; line-height:1.4; text-align:right; }
.setup-figure { margin:0; }
.setup-open { position:relative; display:block; padding:4px; border:1px solid var(--rule); border-radius:6px; background:var(--page); }
.setup-image-window { display:block; width:100%; margin-inline:auto; overflow:hidden; border-radius:3px; }
.setup-capture { display:block; width:100%; }
.setup-capture img { display:block; width:100%; height:auto; max-width:none; }
.setup-enlarge { position:absolute; right:18px; bottom:18px; display:flex; align-items:center; gap:11px; min-height:44px; padding:10px 14px; border:1px solid var(--rule); border-radius:4px; background:var(--page); color:var(--ink); font-size:16px; line-height:1.3; box-shadow:0 4px 16px #0003; }
.setup-open:hover .setup-enlarge { color:var(--page); border-color:var(--signal); background:var(--signal); }
.setup-figure figcaption { max-width:70em; margin:19px 0 0; color:var(--ink); font-size:clamp(18px,1.5vw,20px); line-height:1.6; }
.setup-rehearsal { margin:34px 0 0; padding-top:27px; border-top:1px solid var(--rule); color:var(--muted); font-size:18px; line-height:1.65; max-width:65em; }

/* Fit the image, heading and full caption below the final stacked header.
   Keyboard focus raises its card so an overlapping card cannot hide a link;
   the raise is released once the visitor scrolls on by wheel or touch. */
@media (min-width:1000px) and (min-height:900px) and (prefers-reduced-motion:no-preference) {
  html:not([data-motion='paused']) .setup-card { position:sticky; top:calc(104px + var(--setup-index) * 66px); z-index:calc(1 + var(--setup-index)); }
  html:not([data-motion='paused']) .setup-card .setup-image-window { max-width:min(100%,calc((100svh - 470px) * 1.92513)); }
  html:not([data-motion='paused']) .setup-card:has(:focus-visible):not([data-lowered]) { z-index:5; }
}

/* Native dialog: fit by default, original pixel width on request. */
.setup-viewer { width:min(96vw,1720px); max-width:96vw; height:94svh; max-height:94svh; padding:0; border:1px solid var(--rule); border-radius:10px; background:var(--page); color:var(--ink); overflow:hidden; box-shadow:0 24px 100px #0006; }
body.setup-viewer-open { overflow:hidden; }
.setup-viewer[open] { display:flex; flex-direction:column; }
.setup-viewer::backdrop { background:#000c; }
.setup-viewer-bar { display:flex; align-items:center; justify-content:space-between; flex:none; gap:20px; padding:18px 24px; border-bottom:1px solid var(--rule); }
.setup-viewer-bar h3 { margin:0; color:var(--ink); font:400 22px/1.25 var(--sans); letter-spacing:-.025em; }
.setup-viewer-controls { display:flex; gap:9px; flex:none; }
.setup-viewer-controls button { display:flex; align-items:center; gap:15px; min-height:44px; padding:9px 14px; border:1px solid var(--rule); border-radius:4px; background:transparent; color:var(--ink); font:400 16px/1.4 var(--sans); cursor:pointer; }
.setup-viewer-controls button:hover,.setup-size[aria-pressed='true'] { background:var(--signal); border-color:var(--signal); color:var(--page); }
.setup-close span { font-size:24px; line-height:1; }
.setup-viewer-scroll { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; padding:20px; background:var(--panel); }
.setup-viewer-capture { width:100%; max-width:min(var(--capture-width,1920px),calc((94svh - 245px) * var(--capture-ratio,1.92513))); margin-inline:auto; box-shadow:0 16px 32px -20px #0006; }
.setup-viewer[data-size='actual'] .setup-viewer-capture { width:var(--capture-width,1920px); max-width:none; }
.setup-viewer-foot { flex:none; display:flex; align-items:center; justify-content:space-between; gap:30px; padding:17px 24px; border-top:1px solid var(--rule); }
.setup-viewer-foot p { margin:0; max-width:65em; font-size:18px; line-height:1.5; color:var(--ink); }
.setup-original { flex:none; min-height:44px; display:inline-flex; align-items:center; font-size:16px; color:var(--signal); text-decoration:underline; text-underline-offset:4px; }
@media (prefers-reduced-motion:no-preference) {
  html:not([data-motion='paused']) .setup-selectors a,
  html:not([data-motion='paused']) .setup-enlarge,
  html:not([data-motion='paused']) .setup-viewer-controls button { transition:color .18s,border-color .18s,background .18s; }
}
@media (max-width:760px) {
  .setup-gallery { padding-block:75px; }
  .setup-heading { grid-template-columns:1fr; gap:24px; margin-bottom:25px; }
  .setup-gallery .setup-heading h2 { font-size:clamp(43px,10.5vw,70px); }
  .setup-heading > p { font-size:18px; }
  .setup-selectors { gap:4px 23px; margin-bottom:24px; }
  .setup-selectors a { font-size:16px; }
  .setup-selectors a::after { margin-left:8px; }
  .setup-card { padding:0 14px 21px; border-radius:7px; }
  .setup-card-heading { flex-wrap:wrap; gap:8px; padding-block:19px; }
  .setup-card-heading h3 { font-size:28px; }
  .setup-card-heading > p { text-align:left; font-size:15px; }
  .setup-open { padding:2px; border-radius:4px; }
  .setup-image-window { border-radius:2px; }
  .setup-enlarge { right:9px; bottom:9px; gap:7px; font-size:14px; padding:8px 10px; }
  .setup-figure figcaption { margin-top:20px; font-size:18px; }
  .setup-rehearsal { margin-top:28px; font-size:18px; }
  .setup-viewer { width:100vw; max-width:100vw; height:100svh; max-height:100svh; border:0; border-radius:0; }
  .setup-viewer-bar { padding:14px; gap:10px; flex-wrap:wrap; }
  .setup-viewer-bar h3 { font-size:20px; }
  .setup-viewer-controls { margin-left:auto; }
  .setup-viewer-controls button { font-size:15px; padding-inline:11px; }
  .setup-viewer-scroll { padding:10px; }
  .setup-viewer-capture { max-width:min(var(--capture-width,1920px),calc((100svh - 300px) * var(--capture-ratio,1.92513))); }
  .setup-viewer-foot { display:block; padding:16px; }
  .setup-viewer-foot p { font-size:18px; }
  .setup-original { margin-top:8px; }
}
@media (max-width:380px) {
  .setup-selectors { gap:4px 19px; }
  .setup-selectors a { font-size:15px; }
  .setup-enlarge { right:6px; bottom:6px; min-height:38px; }
}