/* THE STUDIO. Pairs with templates/studio.html and js/studio.js.
   The night room after hours: four phone films hung like canvases, each under its own brass lamp. Exactly one is lit
   (.on) and playing; the rest sit dark and paused. Light switches with opacity only, 450ms, like the wall.
   The films are 576px wide phone captures: never shown past 1.25 CSS px per source px (--w/--h are the source size)
   and never full-bleed. */
.studio{position:relative;overflow-x:clip}   /* the lamp beams spread past the films; they never widen the page */

/* opening: the heading sits on night, left; the first film hangs to its right in the same first screen */
.st-head{padding:clamp(150px,26vh,250px) var(--gut) 0}
.st-head h1{font-family:"Archivo",sans-serif;font-weight:800;font-stretch:112%;font-size:clamp(48px,6vw,88px);line-height:.92;letter-spacing:-.035em;max-width:9.5ch}
.st-head p{margin-top:28px;font-size:18px;line-height:1.55;color:var(--ink-2);max-width:min(40ch,40vw)}

/* ---------- the films ---------- */
/* one width per film: 1.25x its source at most, never taller than 72% of the screen, never wider than the room */
.films{padding:0 var(--gut);display:flex;flex-direction:column}
.clip{--cw:min(calc(var(--w) * 1.25px),calc(72vh * var(--w) / var(--h)),100%);
  width:var(--cw);margin:10vh 0 0 calc((100% - var(--cw)) * var(--x,.5))}
.clip:nth-child(odd){--x:.85}
.clip:nth-child(even){--x:.15}

/* the hang: lamp bar 44px above the canvas, its conic beam behind (same cone as the list wall in css/wall.css) */
.hang{position:relative;isolation:isolate;padding-top:52px}
.lamp{position:absolute;left:21%;right:21%;top:8px;height:8px;border-radius:6px;
  background:linear-gradient(180deg,#d9c79f 0%,var(--lamp) 35%,#7a6a4e 70%,#4a4031 100%);box-shadow:0 1px 0 rgba(255,240,210,.5) inset}
.lamp::before{content:"";position:absolute;left:50%;top:-8px;width:2px;height:8px;transform:translateX(-50%);background:linear-gradient(180deg,#5c5142,#9a8866)}
.lamp::after{content:"";position:absolute;left:4%;right:4%;bottom:-2px;height:2px;border-radius:2px;background:rgba(255,236,205,.95);opacity:0;transition:opacity .45s var(--ease)}
.beam{position:absolute;z-index:-1;left:-50%;right:-50%;top:12px;bottom:-16%;pointer-events:none;opacity:0;transition:opacity .45s var(--ease);
  background:conic-gradient(from 145deg at 50% -8%,rgba(var(--light),0) 0deg,rgba(var(--light),0) 8deg,rgba(var(--light),.22) 12deg,rgba(var(--light),.32) 22deg,rgba(var(--light),.34) 35deg,rgba(var(--light),.32) 48deg,rgba(var(--light),.22) 58deg,rgba(var(--light),0) 62deg,rgba(var(--light),0) 70deg);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 3%,#000 15%,rgba(0,0,0,.6) 45%,rgba(0,0,0,.25) 75%,transparent 100%),linear-gradient(90deg,transparent 0%,#000 14%,#000 86%,transparent 100%);-webkit-mask-composite:source-in;
          mask-image:linear-gradient(180deg,transparent 0%,#000 3%,#000 15%,rgba(0,0,0,.6) 45%,rgba(0,0,0,.25) 75%,transparent 100%),linear-gradient(90deg,transparent 0%,#000 14%,#000 86%,transparent 100%);mask-composite:intersect}

/* the screen: a canvas on the wall. Square corners, the plate shadow, a lit top edge when its lamp is on */
.screen{position:relative;aspect-ratio:var(--w)/var(--h);background:#151412;cursor:pointer;
  box-shadow:0 40px 60px -30px rgba(0,0,0,.6),0 12px 20px -12px rgba(0,0,0,.45)}
.screen img,.screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.screen video{background:transparent}
.screen::before{content:"";position:absolute;z-index:2;left:0;right:0;top:0;height:2px;background:rgba(var(--light),.6);opacity:0;transition:opacity .45s var(--ease)}
/* darkness over the canvas, and the light falling off toward its bottom once lit */
.dim{position:absolute;inset:0;z-index:1;background:rgba(9,8,7,.86);transition:opacity .45s var(--ease),background-color .45s var(--ease)}
.dim::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--light),.08) 0%,rgba(0,0,0,0) 24%,rgba(0,0,0,.26) 100%)}
.clip.on .beam,.clip.on .lamp::after,.clip.on .screen::before{opacity:1}
.clip.on .dim{background:transparent}
@media (hover:hover) and (pointer:fine){
  .clip:not(.on) .screen:hover .dim{opacity:.55}   /* an unlit film answers the pointer: it can still be opened */
}

/* the caption: a small printed museum label (css/label.css colours) and the Watch pill beside it */
.cap-row{display:flex;align-items:flex-end;gap:16px;margin-top:28px;width:max-content;max-width:calc(100vw - 2 * var(--gut))}
.tag{width:260px;flex:none;padding:15px 18px 14px;color:var(--board-ink);font-family:"Archivo",sans-serif;font-stretch:100%;
  background:linear-gradient(160deg,var(--board) 0%,var(--board-2) 100%);
  box-shadow:inset 0 1px 0 var(--board-top),0 1px 0 var(--board-side),4px 7px 3px -1px rgba(5,4,3,.78);
  opacity:.7;transition:opacity .45s var(--ease)}   /* out of the light it is dimmer; ink still holds 6:1 on it */
.clip.on .tag{opacity:1}
.tag ::selection{background:var(--board-ink);color:var(--board)}
.tag .t{font-size:15px;line-height:21px}
.tag .t cite{font-style:italic}
.tag .nw{white-space:nowrap}
.tag p:not(.t){font-size:13.5px;line-height:19px;margin-top:2px}
.tag .onwall,.tag .offwall{display:inline-block;margin-top:8px}
.tag .onwall{color:var(--board-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;padding:10px 0;margin-bottom:-10px;margin-top:-2px;cursor:pointer;transition:text-decoration-thickness .2s ease}
.tag .onwall:hover{text-decoration-thickness:2px}
.tag .onwall:focus-visible{outline:2px solid var(--board-ink);outline-offset:2px}
.tag .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.play{flex:none}
html:not(.js) .play{display:none}   /* without JS the films cannot play: the posters stand in */

/* closing: back to the lit wall */
.st-end{padding:30vh var(--gut) 18vh}
.st-end h2{font-family:"Archivo",sans-serif;font-weight:800;font-stretch:112%;font-size:clamp(40px,5vw,72px);line-height:.95;letter-spacing:-.035em;max-width:14ch}
.st-end .btn{margin-top:34px}


/* ---------- the focused view: one film, larger, with controls and sound ---------- */
html:has(.watch[open]){overflow:hidden}
.watch{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;padding:20px var(--gut);
  background:var(--night);color:var(--ink);place-items:center;
  opacity:0;transition:opacity .25s cubic-bezier(.23,1,.32,1),display .25s allow-discrete,overlay .25s allow-discrete}
.watch[open]{display:grid;opacity:1}
@starting-style{.watch[open]{opacity:0}}
.watch::backdrop{background:transparent}
.watch:focus{outline:none}   /* a mouse-opened view parks focus here (js/studio.js) */
.w-in{display:flex;flex-direction:column;gap:18px;transition:transform .3s cubic-bezier(.23,1,.32,1)}
@starting-style{.watch[open] .w-in{transform:translateY(10px)}}
.w-film{box-shadow:0 40px 60px -30px rgba(0,0,0,.6),0 12px 20px -12px rgba(0,0,0,.45)}
/* 1.25x the source at most, and room for the bar under it */
.w-film video{display:block;height:min(calc(var(--h,768) * 1.25px),calc(100dvh - 140px),calc((100vw - 2 * var(--gut)) * var(--h,768) / var(--w,576)));width:auto;aspect-ratio:var(--w,576)/var(--h,768);background:#151412}
.w-bar{display:flex;align-items:center;justify-content:space-between;gap:16px}
.w-title{font:700 22px/1.15 "Archivo",sans-serif;font-stretch:112%;letter-spacing:-.02em}
.w-close .kbd{margin-left:4px}
.btn2 .kbd{color:var(--ink-2)}

/* stacked (under 1024px): the first film hangs under the heading */
@media (max-width:1023px){
  .st-head p{max-width:40ch}
}
/* desktop: the first film rises into the opening screen beside the heading */
@media (min-width:1024px){
  .st-head{position:absolute;left:0;top:0}
  .films{padding-top:120px}
  .clip:nth-child(1){margin-top:0}
}
@media (min-width:1024px) and (max-width:1279px){.clip:nth-child(1){--x:1}}   /* hang it flush right so it clears the heading */
@media (max-width:767px){
  .st-head{padding-top:116px}
  .st-head p{font-size:16px;max-width:40ch}
  .clip,.clip:nth-child(n){--x:.5;--cw:min(calc(var(--w) * 1.25px),calc(62vh * var(--w) / var(--h)),100%);margin-top:96px}
  .clip:nth-child(1){margin-top:64px}
  .cap-row{flex-direction:column;align-items:flex-start;width:auto;max-width:none}
  .tag{width:auto;max-width:300px}
  .tag .onwall{display:inline-flex;align-items:center;min-height:44px;padding:12px 0;margin:-12px 0}   /* 44px touch target, no extra space */
  .st-end{padding:22vh var(--gut) 14vh}
  .w-bar{flex-wrap:wrap}
  .w-title{font-size:18px}
  .btn2 .kbd{display:none}
}
@media (prefers-reduced-motion:reduce){
  .lamp::after,.beam,.screen::before,.dim,.tag{transition:opacity .2s linear,background-color .2s linear}
  .w-in{transition:none}
  .watch{transition:opacity .2s linear,display .2s allow-discrete,overlay .2s allow-discrete}
}