/* =====================================================
   studio.css  (load after upgrade.css)
   designer's artboard + inline gallery + lightbox
   ===================================================== */
.studio{margin-top:5rem;padding:3.5rem 0 3.5rem;background:var(--band);color:#F1F1EE;overflow:hidden}
.st-wrap{width:min(1160px,100% - 2.5rem);margin-inline:auto}
.st-head{display:grid;gap:.9rem;margin-bottom:1.6rem}
.st-head h2{font-size:clamp(1.5rem,3.2vw,2.3rem);font-weight:500;max-width:20ch}
.st-head p{color:#A2A29D;max-width:46ch}

/* ----- artboard ----- */
.board{--px:0px;--py:0px;position:relative;height:400px;border-radius:20px;border:1px solid #2e2e2e;overflow:hidden;
  background:radial-gradient(circle,#333 1px,transparent 1.6px) 0 0/22px 22px,#1a1a1a;touch-action:pan-y}
.board::before,.board::after{content:"";position:absolute;background-color:#222;z-index:6;pointer-events:none}
.board::before{left:0;right:0;top:0;height:20px;border-bottom:1px solid #2e2e2e;
  background-image:repeating-linear-gradient(90deg,#4a4a4a 0 1px,transparent 1px 12px)}
.board::after{left:0;top:0;bottom:0;width:20px;border-right:1px solid #2e2e2e;
  background-image:repeating-linear-gradient(0deg,#4a4a4a 0 1px,transparent 1px 12px)}
.pc{--d:1;--r:0deg;position:absolute;margin:0;border-radius:8px;background:#2a2a2a;box-shadow:0 24px 50px rgba(0,0,0,.55);
  transform:translate(calc(var(--px)*var(--d)),calc(var(--py)*var(--d))) rotate(var(--r));transition:box-shadow .3s,z-index 0s}
.pc img{width:100%;height:100%;object-fit:cover;border-radius:8px;display:block}
.pc.noimg::after{content:attr(data-name);position:absolute;inset:0;display:grid;place-items:center;color:#8a8a85;font:500 .85rem Manrope}
.pc:hover{z-index:5;box-shadow:0 30px 60px rgba(0,0,0,.7)}
.p1{left:9%;top:20%;width:clamp(120px,14.5vw,172px);aspect-ratio:4/5;--r:-7deg;--d:.7}
.p2{left:34%;top:11%;width:clamp(150px,18.5vw,222px);aspect-ratio:4/5;--d:1.2;z-index:3}
.p3{left:61%;top:18%;width:clamp(120px,14.5vw,172px);aspect-ratio:4/5;--r:7deg;--d:.8}
.p4{left:53%;top:56%;width:clamp(90px,10vw,122px);aspect-ratio:1;--r:-5deg;--d:1.7;z-index:4}
/* selection box like a design tool */
.sel{position:absolute;inset:-7px;border:1.5px solid var(--gold);pointer-events:none}
.sel i{position:absolute;width:9px;height:9px;background:#161616;border:1.5px solid var(--gold);border-radius:2px}
.sel i:nth-child(1){left:-5px;top:-5px}.sel i:nth-child(2){right:-5px;top:-5px}
.sel i:nth-child(3){left:-5px;bottom:-5px}.sel i:nth-child(4){right:-5px;bottom:-5px}
.sel b{position:absolute;left:50%;top:calc(100% + 10px);translate:-50% 0;padding:.15rem .55rem;border-radius:4px;background:var(--gold);color:#161616;font:600 .7rem Manrope;white-space:nowrap}
/* palette + type specimen + pen path */
.sw{position:absolute;left:5%;bottom:9%;display:flex;gap:.45rem;z-index:2}
.sw i{width:26px;height:26px;border-radius:50%;border:2px solid #1a1a1a;box-shadow:0 0 0 1px #3a3a3a}
.ty{position:absolute;right:6%;bottom:8%;padding:.7rem 1rem;border-radius:12px;background:#F1F1EE;color:#161616;z-index:2;
  transform:translate(calc(var(--px)*1.4),calc(var(--py)*1.4)) rotate(3deg)}
.ty b{display:block;font:500 2.6rem/1 'Bricolage Grotesque',sans-serif;letter-spacing:-.03em}
.ty span{font:500 .68rem Manrope;color:#6B6B67}
.pen{position:absolute;left:3%;top:46%;width:min(300px,42%);overflow:visible;z-index:2}
.pen path{fill:none;stroke:var(--gold);stroke-width:2.2;stroke-dasharray:420;stroke-dashoffset:420}
.pen .h{stroke:#6a6a66;stroke-width:1;stroke-dasharray:none;stroke-dashoffset:0}
.pen rect{fill:#161616;stroke:var(--gold);stroke-width:1.5}
.pen circle{fill:#F1F1EE}
.board.on .pen path.draw{animation:draw 2.2s .3s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
/* cursor with name tag */
.cur{position:absolute;left:0;top:0;z-index:7;pointer-events:none;will-change:transform}
.cur svg{display:block;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}
.cur span{position:absolute;left:16px;top:20px;padding:.15rem .6rem;border-radius:99px;background:var(--gold);color:#161616;font:600 .72rem Manrope}

/* ----- gallery ----- */
.gal-bar{display:flex;gap:.5rem;overflow-x:auto;padding:3rem 0 1.4rem;scrollbar-width:none}
.gal-bar::-webkit-scrollbar{display:none}
.gal-bar button{flex:none;font:500 .85rem Manrope;color:#A2A29D;padding:.55rem 1.05rem;border-radius:99px;border:1.5px solid #333;background:transparent;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.gal-bar button:hover{border-color:#777;color:#F1F1EE}
.gal-bar button[aria-pressed="true"]{background:#F1F1EE;color:#161616;border-color:#F1F1EE}
.gal-grid{columns:2;column-gap:.8rem}
.gi{display:block;width:100%;margin:0 0 .8rem;padding:0;border:0;border-radius:12px;overflow:hidden;background:#262626;cursor:zoom-in;break-inside:avoid;position:relative}
.gi img{width:100%;height:auto;display:block;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.gi:hover img,.gi:focus-visible img{transform:scale(1.05)}
.gi::after{content:attr(data-t);position:absolute;left:0;right:0;bottom:0;padding:1.6rem .8rem .6rem;background:linear-gradient(transparent,rgba(0,0,0,.7));color:#fff;font:500 .76rem Manrope;opacity:0;transition:opacity .3s}
.gi:hover::after,.gi:focus-visible::after{opacity:1}
.gal-foot{display:flex;align-items:center;gap:1rem;margin-top:1.4rem;color:#A2A29D;font-size:.85rem}

/* ----- lightbox ----- */
.lbx{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100%;height:100%;margin:0;touch-action:pan-y}
.lbx::backdrop{background:rgba(10,10,10,.92)}
.lbx[open]{display:grid;place-items:center;animation:pop .3s cubic-bezier(.2,.8,.2,1)}
@keyframes pop{from{opacity:0;transform:scale(.97)}}
.lbx img{max-width:min(92vw,760px);max-height:80vh;border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.6);-webkit-user-drag:none}
.lbx p{position:absolute;bottom:1.1rem;left:0;right:0;text-align:center;color:#ddd;font:500 .9rem Manrope}
.lbx button{position:absolute;width:48px;height:48px;border-radius:50%;border:0;background:#F1F1EE;color:#161616;font-size:1.25rem;cursor:pointer}
.lbx .x{top:1rem;right:1rem}.lbx .pv{left:.8rem}.lbx .nx{right:.8rem}

@media(min-width:760px){.gal-grid{columns:3;column-gap:1rem}.gi{margin-bottom:1rem}}
@media(min-width:1100px){.gal-grid{columns:4}}
@media(max-width:759px){
  .board{height:300px}
  .p3,.cur,.pen{display:none}
  .p1{left:5%;top:24%}.p2{left:30%}.p4{left:56%;top:60%}
  .sw{bottom:6%}.ty b{font-size:2rem}
}
@media(prefers-reduced-motion:reduce){.board .pen path{stroke-dashoffset:0;animation:none!important}.cur{display:none}}

/* phone: keep the artboard uncluttered */
@media(max-width:759px){.ty{display:none}.p4{left:60%;top:56%;width:92px}.p1{left:6%}.sw{left:7%}}

/* nav logo mark (svg) */
.pill .mark{padding:.2rem .55rem;display:grid;place-items:center}
.pill .mark svg{display:block;width:30px;height:30px}

/* ----- homepage gallery: short, 8 pieces + a button ----- */
.gal-grid[data-home]{margin-top:1.4rem}
@media(min-width:760px){.gal-grid[data-home]{columns:4}}
.gal-foot a.btn{text-decoration:none}

/* ----- full design page ----- */
.dpage{margin-top:0;padding-top:8.5rem;min-height:100svh}
.dpage .st-head{margin-bottom:0}
.dpage h1{font-size:clamp(1.9rem,4.4vw,3.2rem);font-weight:500;max-width:20ch}
.dpage .note{color:var(--gold)}
.dpage .gal-bar{padding-top:2rem}
.closing{padding-bottom:1rem}.closing .cta{margin-top:1.6rem}

/* ----- project buttons: live site / code / prototype ----- */
.acts{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:auto}
.acts .btn{margin-top:0;align-self:auto;padding:.7rem 1.1rem;font-size:.85rem}
.btn svg{width:15px;height:15px;vertical-align:-2px;margin-right:.45rem}

/* ----- thank-you page ----- */
.done{min-height:100svh;display:grid;place-items:center;text-align:center;padding:7rem 1.25rem 3rem}
.done .tick{display:grid;place-items:center;width:72px;height:72px;margin:0 auto 1.6rem;border-radius:50%;background:var(--ink);color:var(--paper)}
.done h1{font-size:clamp(2rem,5vw,3rem);font-weight:500;margin-bottom:.8rem}
.done p{color:var(--mute);max-width:40ch;margin:0 auto}
.done .cta{justify-content:center}
/* ----- homepage: the artboard is the whole section, and it is a link ----- */
a.board{display:block;color:inherit;text-decoration:none;cursor:pointer}
.studio .gal-foot{margin-top:1.6rem}