/* The Studio (studio.html). Flat by default: five level sections of windows, which is the page without JavaScript, under
   reduced motion and on narrow or short screens. studio.js adds .is-3d on wide screens with motion allowed, turning the same
   list into five planes in depth that the visitor moves through by scrolling. Nothing moves on its own. */
.studio-link{margin-top:-24px;margin-bottom:34px}
.studio{position:relative;border-top:1px solid var(--line)}
.studio-levels{position:sticky;top:0;z-index:6;display:flex;overflow-x:auto;background:var(--paper);border-bottom:1px solid var(--line);scrollbar-width:none}
.studio-levels a{flex:1 0 auto;display:flex;flex-direction:column;justify-content:center;gap:1px;min-height:58px;padding:9px 18px;border-right:1px solid var(--line);font-size:15px;line-height:1.25}
.studio-levels a span{font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--muted)}
.studio-levels small{font-size:12px;color:var(--muted)}
.studio-levels a:hover{background:#e9e7df}
.studio-levels a[aria-current=true]{background:var(--ink);color:var(--paper)}
.studio-levels a[aria-current=true] span,.studio-levels a[aria-current=true] small{color:#d9d7cd}
.studio-plane{width:min(1440px,90%);margin:0 auto;padding:54px 0 26px;scroll-margin-top:70px}
.studio-plane h2{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;margin-bottom:22px;font-size:clamp(34px,4vw,56px)}
.studio-plane h2 span{font-size:13px;font-weight:700;letter-spacing:.1em}
.studio-plane h2 small{font-size:14px;letter-spacing:0;color:var(--muted)}
.studio-panes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;list-style:none;margin:0;padding:0}
.studio-pane{position:relative;display:block;overflow:hidden;background:#e9e7df;border:1px solid var(--line)}
.studio-pane img{aspect-ratio:480/282;height:auto;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.studio-pane:hover img,.studio-pane:focus-visible img{transform:scale(1.035)}
.pane-label{display:flex;flex-direction:column;padding:9px 11px;background:var(--paper);font-size:12px;line-height:1.35;color:var(--muted)}
.pane-label b{font-size:14px;color:var(--ink)}
.studio-panel{display:none}
/* Each window's own Save (shortlist.js shows it): top right of the window, after the window in keyboard order. */
.studio-panes li{position:relative}
.studio .pane-save{position:absolute;top:8px;right:8px;z-index:1;min-height:32px;padding:5px 11px;font-size:12px;background:var(--paper)}
.studio .pane-save:hover{background:var(--acid)}
.studio .pane-save[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.pane-more{display:none}
@media (max-width:900px){.studio-panes{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.studio-levels a{padding:9px 14px}}

/* Dimensional mode (set by studio.js). The section becomes a scroll track; the stage sticks and the camera moves in depth. */
.studio.is-3d{--off:min(150px,12vw);height:calc(var(--planes) * 85vh + 100vh);background:#11120e}
.studio.is-3d .studio-levels{background:#11120ee6;border-color:#f4f2eb26;color:var(--paper)}
.studio.is-3d .studio-levels a{border-color:#f4f2eb26}
.studio.is-3d .studio-levels a span,.studio.is-3d .studio-levels small{color:#b9b7ad}
.studio.is-3d .studio-levels a:hover{background:#f4f2eb1a}
.studio.is-3d .studio-levels a[aria-current=true]{background:var(--paper);color:var(--ink)}
.studio.is-3d .studio-levels a[aria-current=true] span,.studio.is-3d .studio-levels a[aria-current=true] small{color:var(--muted)}
.studio.is-3d .studio-stage{position:sticky;top:0;height:100vh;margin-top:-58px;overflow:hidden;perspective:1000px;perspective-origin:50% 46%;
  background:radial-gradient(120% 80% at 50% 38%,#2a2b24 0,#11120e 62%),#11120e}
.studio.is-3d .studio-stage:after{content:"";position:absolute;inset:auto 0 0;height:38%;pointer-events:none;
  background:repeating-linear-gradient(90deg,#f4f2eb0d 0 1px,transparent 1px 8.33%),linear-gradient(#11120e00,#11120e);transform:perspective(600px) rotateX(62deg);transform-origin:bottom}
/* Tilt turns the room around the active plane's centre (not the far-off world origin), so the plane in view never swings out of frame. */
.studio.is-3d .studio-world{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:calc(50% - var(--off) + var(--k,0) * 600px) calc(52% - var(--k,0) * 110px) calc(var(--k,0) * -1100px);transform:translate3d(calc(var(--k,0) * -600px),calc(var(--k,0) * 110px),var(--cam,0px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.studio.is-3d .studio-plane{position:absolute;left:calc(50% - var(--off));top:52%;margin:0;padding:20px 24px 24px;width:min(1000px,66vw,calc((100vh - 220px) * 1.5));
  transform:translate(-50%,-50%) translate3d(calc(var(--i) * 600px),calc(var(--i) * -110px),calc(var(--i) * -1100px));transform-style:preserve-3d;
  background:#f4f2eb0a;border:1px solid #f4f2eb30;box-shadow:0 40px 120px #0008;opacity:var(--o,1);pointer-events:var(--pe,auto)}
.studio.is-3d .studio-plane h2{color:var(--paper);font-size:clamp(26px,2.6vw,40px);margin-bottom:14px}
.studio.is-3d .studio-plane h2 small{color:#b9b7ad}
.studio.is-3d .studio-panes{gap:12px}
.studio.is-3d .studio-pane{border-color:#f4f2eb40;background:#2a2b24}
.studio.is-3d .pane-label{position:absolute;left:0;right:0;bottom:0;transform:translateY(101%);transition:transform .25s ease;background:#11120ee6;color:#d9d7cd}
.studio.is-3d .pane-label b{color:var(--paper)}
.studio.is-3d .studio-pane:hover .pane-label,.studio.is-3d .studio-pane:focus-visible .pane-label{transform:none}
.studio.is-3d .studio-pane:focus-visible{outline:3px solid var(--acid);outline-offset:3px}
/* In depth the windows can be as narrow as about 120px, so the two actions stack at the right edge, compact (28px targets). */
.studio.is-3d .pane-more{display:inline-flex;align-items:center;position:absolute;z-index:1;border:1px solid #f4f2eb66;border-radius:99px;font-weight:600}
.studio.is-3d .pane-save,.studio.is-3d .pane-more{right:6px;min-height:28px;padding:4px 10px;font-size:11px;white-space:nowrap}
.studio.is-3d .pane-save{top:6px}.studio.is-3d .pane-more{top:38px}
.studio.is-3d .pane-save,.studio.is-3d .pane-more{background:#11120ee6;color:var(--paper);border-color:#f4f2eb66;transition:opacity .2s}
@media (hover:hover){.studio.is-3d .pane-save,.studio.is-3d .pane-more{opacity:0}
  .studio.is-3d li:hover>:is(.pane-save,.pane-more),.studio.is-3d li:focus-within>:is(.pane-save,.pane-more),.studio.is-3d .pane-save[aria-pressed=true]{opacity:1}}
.studio.is-3d .pane-save:hover,.studio.is-3d .pane-more:hover{background:var(--acid);color:var(--ink)}
.studio.is-3d .pane-save[aria-pressed=true]{background:var(--paper);color:var(--ink)}
.studio.is-3d :is(.pane-save,.pane-more):focus-visible{outline:3px solid var(--acid);outline-offset:2px}
.studio.is-3d .studio-panel:not([hidden]){display:block;position:fixed;right:24px;bottom:24px;z-index:7;width:min(300px,26vw);padding:16px 18px;background:var(--paper);color:var(--ink);border:1px solid var(--ink);box-shadow:0 18px 50px #0007}
.studio.is-past .studio-panel{display:none!important}
.studio-panel .eyebrow{color:var(--muted)}
.studio-panel h3{font-size:24px;letter-spacing:-.03em;margin:4px 0 2px}
.studio-panel p{font-size:13px;color:var(--muted)}
.studio-panel ul{margin:10px 0 12px;padding-left:18px;font-size:13px;line-height:1.5}
.studio-hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:2;margin:0;color:#b9b7ad;font-size:12px;letter-spacing:.08em;text-transform:uppercase;pointer-events:none;transition:opacity .4s}
.studio.is-3d .studio-world,.studio.is-3d .studio-plane{will-change:transform}
@media (prefers-reduced-motion:reduce){.studio-pane img,.pane-label{transition:none!important}.studio-pane:hover img,.studio-pane:focus-visible img{transform:none}}
/* The style shortlist tray (shortlist.js) moves to the free right-hand column above the detail panel while the stage is in view. */
body:has(.studio.is-3d:not(.is-past)) .shortlist-tray{top:76px;bottom:auto;right:24px;width:min(300px,26vw)}
body:has(.studio.is-3d:not(.is-past)) .st-actions{grid-template-columns:1fr}
@media (max-height:760px){body:has(.studio.is-3d:not(.is-past)) .st-thumbs{display:none}}