/* Studio: the work-in-progress notice (a notice from chris-weber.org, laid on top of every Studio view)
   It is deliberately NOT Studio glass: solid, light, the site's own paper colours, one typeface, a pill button.
   spacing scale: 4 8 12 16 20 24 */
@property --wip{syntax:'<length>';inherits:true;initial-value:48px}
:root{--wip:48px}
html.wip-off{--wip:0px}
html.wip-going{transition:--wip .36s cubic-bezier(.2,.8,.2,1)}
.wip{--paper:#f6efe9;--paper-2:#ede3de;--ink:#2a1840;--ink-2:#4a3666;--rule:rgba(42,24,64,.14);--amber:#bf6812;--amber-hi:#f2a650;
  position:fixed;z-index:400;top:0;left:0;right:0;height:48px;display:flex;align-items:center;justify-content:center;padding:0 104px 0 24px;overflow:hidden;isolation:isolate;contain:layout paint;
  color:var(--ink);
  /* paper: a soft top-to-bottom fall of light, and a fine grain so it reads as a real surface, not a flat fill */
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .16 0 0 0 0 .09 0 0 0 0 .25 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E"),linear-gradient(var(--paper),var(--paper-2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 var(--rule),0 1px 0 rgba(20,8,34,.35),0 6px 20px -4px rgba(12,4,24,.55);
  animation:wipIn .6s cubic-bezier(.2,.8,.2,1) backwards;
  transition:transform .36s cubic-bezier(.2,.8,.2,1),opacity .28s ease}
@keyframes wipIn{from{transform:translateY(-100%)}}
html.wip-off .wip{display:none}
html.wip-going .wip{transform:translateY(-100%);opacity:0}
/* the seam: a fine warm line along the bottom edge, always drawn (the still state is finished on its own) */
.wip:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,rgba(210,122,34,0) 0,rgba(210,122,34,.5) 18%,rgba(210,122,34,.5) 82%,rgba(210,122,34,0) 100%);pointer-events:none}
/* motion on top: one warm glint travels along the seam every 9 s */
.wip-edge{position:absolute;z-index:1;left:0;bottom:0;height:2px;width:28%;pointer-events:none;
  background:linear-gradient(90deg,rgba(242,166,80,0),#f2a650 45%,#ffe1b8 50%,#f2a650 55%,rgba(242,166,80,0));
  transform:translateX(-110%);animation:wipGlint 9s cubic-bezier(.45,0,.25,1) 1.4s infinite;will-change:transform}
@keyframes wipGlint{0%{transform:translateX(-110%)}46%,100%{transform:translateX(370%)}}
.wip-in{position:relative;display:flex;align-items:center;gap:12px;min-width:0}
/* the lamp: a solid amber status light in a fine ring; with motion, the ring breathes outward every 3.2 s */
.wip-dot{position:relative;flex:none;width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 3px var(--paper),0 0 0 4px rgba(191,104,18,.45)}
.wip-dot:after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid rgba(191,104,18,.7);opacity:0;animation:wipLamp 3.2s cubic-bezier(.3,0,.3,1) .6s infinite;will-change:transform,opacity}
@keyframes wipLamp{0%{opacity:0;transform:scale(.8)}20%{opacity:.8}100%{opacity:0;transform:scale(2.1)}}
/* type: one face (Jost) so it reads as a plain site notice, not Studio display type */
.wip-t{margin:0;font:400 .94rem/1 Jost,sans-serif;letter-spacing:.015em;white-space:nowrap;transform:translateY(var(--wip-oy,0px))}
.wip-n{font-weight:500;color:var(--ink)}
.wip-s{color:var(--ink-2)}
.wip{--wip-oy:1px;--wip-hy:1px}
/* Hide: a pill (the Studio's buttons are 9 px squares-with-corners), ink on paper */
.wip-x{position:absolute;right:12px;top:0;height:48px;display:flex;align-items:center;padding:0;border:0;background:none;color:var(--ink);font:500 .82rem/1 Jost,sans-serif;letter-spacing:.03em;cursor:pointer;-webkit-tap-highlight-color:transparent}
.wip-x>span{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 14px 0 12px;border-radius:999px;border:1px solid rgba(42,24,64,.5);background:rgba(255,255,255,.55);transition:background .2s,color .2s,border-color .2s}
.wip-x .l{transform:translateY(var(--wip-hy,0px))}
.wip-x svg{width:9px;height:9px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round}
.wip-x:hover>span{background:var(--ink);color:#fff;border-color:var(--ink)}
.wip-x:focus{outline:none}
.wip-x:focus-visible>span{outline:2px solid var(--ink);outline-offset:2px}
/* Dawn (the desktop's light theme): the notice turns to ink so it still stands apart */
body.th-dawn .wip{--paper:#2e1b45;--paper-2:#24143a;--ink:#fbf6f9;--ink-2:#e6dcee;--rule:rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 1px 0 rgba(42,24,64,.25),0 6px 20px -4px rgba(42,24,64,.35)}
body.th-dawn .wip-x>span{border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.06)}
body.th-dawn .wip-x:hover>span{background:#fbf6f9;color:#2a1840;border-color:#fbf6f9}
body.th-dawn .wip-dot{background:var(--amber-hi);box-shadow:0 0 0 3px var(--paper),0 0 0 4px rgba(242,166,80,.5)}
/* phones: the words sit left so they never meet Hide */
@media (max-width:560px){
  .wip{justify-content:flex-start;padding:0 88px 0 16px;--wip-oy:.5px;--wip-hy:1.5px}
  .wip-in{gap:10px}
  .wip-t{font-size:.88rem;letter-spacing:.01em}
  .wip-x{right:8px}
  .wip-x>span{padding:0 12px 0 10px}
}
@media (max-width:359px){.wip{padding:0 76px 0 12px;--wip-oy:1px;--wip-hy:1px}.wip-in{gap:8px}.wip-t{font-size:.8rem;letter-spacing:0}.wip-x{right:6px}.wip-x>span{gap:6px;padding:0 10px 0 9px}}
/* still: reduced motion, or the Studio's own Pause motion. The seam, lamp and ring stay; only the moving parts go */
@media (prefers-reduced-motion:reduce){.wip{animation:none}.wip-edge,.wip-dot:after{display:none}.wip,html.wip-going{transition:none}}
html.still .wip{animation:none}
html.still .wip-edge,html.still .wip-dot:after{display:none}

/* the views make room for it (unchanged from Update 194) */
.toprac{top:calc(16px + var(--wip))}
.stage{padding-top:calc(76px + var(--wip))}
.desk{top:var(--wip)}
@media (max-width:700px){.desk{top:max(56px,calc(var(--wip) + 8px))}}
.top{top:var(--wip)}
.arena{top:calc(52px + var(--wip))}