:root{
  --ink:#16181c; --paper:#dce8f3; --paper-2:#e7f0f8; --line:#1d1d1b;
  --band:#123f9b; --band-2:#0c2d73; --yellow:#ffcd1c; --sweep:#ece6dc;
  --chip:#ffffff; --chip-ink:#1b1d22;
  /* the shelf at the foot of the stage: box width, then the room above the boxes, the deck in front of them and the
     price strip on the shelf's edge */
  --box:clamp(84px,10.4vh,122px); --tr-top:13px; --tr-deck:9px; --tr-ledge:22px;
  --tray:calc(var(--tr-top) + var(--box) * .78 + var(--tr-deck) + var(--tr-ledge) + env(safe-area-inset-bottom,0px));
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--sweep);color:var(--ink);font-family:Figtree,system-ui,-apple-system,Segoe UI,sans-serif;overflow:hidden;-webkit-font-smoothing:antialiased;overscroll-behavior:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block}
:focus-visible{outline:3px solid #ffb400;outline-offset:3px}
[hidden]{display:none!important}

/* ---- the brand mark: two studs and the name, stacked ------------------------------------------- */
.brandmark{display:inline-flex;align-items:center;gap:.4em;line-height:.84;font-weight:900;font-style:italic;letter-spacing:.005em;color:#fff;white-space:nowrap}
.bm-brick{width:1.55em;height:1.2em;flex:none;fill:var(--yellow);stroke:#9a7200;stroke-width:1;filter:drop-shadow(0 .06em 0 rgba(0,0,0,.35))}
.bm-name{font-size:1em;text-shadow:0 .06em 0 rgba(0,0,0,.35)}
.brandmark.one .bm-name br{display:none}
.brandmark.one .bm-name{font-size:1.05em}


/* ---- the stage ------------------------------------------------------------------------------------ */
#stage{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent}
.no-gl #stage{display:none}
#still{position:fixed;inset:0;display:none;place-items:center;padding:80px 24px calc(160px + var(--tray))}
.no-gl #still{display:grid}
#still img{max-width:min(900px,100%);max-height:100%;border-radius:4px;box-shadow:0 30px 50px -20px rgba(0,0,0,.4)}
#still .brandmark{font-size:clamp(40px,9vw,120px);color:#d7261e}

#header{position:fixed;left:0;right:0;top:0;z-index:7;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(16px + env(safe-area-inset-top,0px)) max(18px,2.6vw) 16px;pointer-events:none}
#header>*{pointer-events:auto}
.home{display:block;border-radius:8px;transition:opacity .4s,transform .4s}
.at-name .home{opacity:0;transform:translateY(-6px);pointer-events:none}
.mark{display:block;width:clamp(40px,3.4vw,50px);height:clamp(40px,3.4vw,50px);filter:drop-shadow(0 3px 5px rgba(60,40,20,.28))}
.mark svg{display:block;width:100%;height:100%}
.nav{display:flex;gap:8px}
.chip{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 15px;border-radius:19px;background:var(--chip);color:var(--chip-ink);font-weight:800;font-size:14px;letter-spacing:.01em;box-shadow:0 1px 0 rgba(0,0,0,.14),0 4px 14px rgba(60,40,20,.12);white-space:nowrap}
.chip:hover{background:#fff7d6}
.chip:active{transform:translateY(1px)}
.chip svg{width:18px;height:18px;flex:none}
.chip.snd{width:38px;padding:0;justify-content:center}
.chip.snd[aria-pressed=true]{background:var(--yellow)}
.chip.x{width:38px;padding:0;justify-content:center}

/* flip: round arrows at the sides, the neighbour's name beside them */
.flip{position:fixed;z-index:4;top:calc(50% - var(--tray) / 2 - 14px);display:flex;align-items:center;gap:10px;height:52px;margin-top:-26px;padding:0;color:var(--ink);font-weight:800;font-size:14px;transition:opacity .35s}
.flip svg{width:52px;height:52px;padding:15px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 1px 0 rgba(0,0,0,.12),0 6px 18px rgba(60,40,20,.16);flex:none;transition:transform .2s}
.flip:hover svg{transform:scale(1.07)}
.flip span{opacity:0;transform:translateX(var(--sx,-6px));transition:opacity .25s,transform .25s;white-space:nowrap;max-width:28vw;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 0 rgba(255,255,255,.7)}
.flip:hover span,.flip:focus-visible span{opacity:1;transform:none}
.flip.prev{left:max(14px,1.6vw)}
.flip.next{right:max(14px,1.6vw);--sx:6px}
.reading .flip{opacity:0;pointer-events:none}
.at-name .flip.next svg{background:var(--yellow)}
.at-name .flip.next span{opacity:1;transform:none}

/* the set's name, printed like the corner of its box */
#caption{position:fixed;z-index:4;left:max(22px,3vw);right:max(22px,3vw);bottom:calc(var(--tray) + 16px);display:flex;align-items:flex-end;justify-content:space-between;gap:20px;pointer-events:none;opacity:0;transform:translateY(10px);transition:opacity .45s,transform .45s}
#caption.on{opacity:1;transform:none}
#caption>*{pointer-events:auto}
.at-name #caption{opacity:0!important;pointer-events:none}
.cp-text{display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-width:0}
.cp-client{font-size:12px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--band-2);background:var(--yellow);padding:4px 9px 3px;border-radius:4px}
.cp-title{font-size:clamp(30px,4.2vw,58px);font-weight:900;line-height:.96;letter-spacing:-.025em;color:var(--ink)}
.cp-meta{font-size:12px;font-weight:900;letter-spacing:.08em;color:rgba(22,24,28,.55);white-space:pre}
.cp-open{display:inline-flex;align-items:center;gap:8px;height:50px;padding:0 20px 0 24px;border-radius:25px;background:var(--band);color:#fff;font-weight:900;font-size:16px;box-shadow:0 4px 0 var(--yellow),0 10px 24px rgba(12,45,115,.3);white-space:nowrap;flex:none;transition:transform .2s}
.cp-open svg{width:18px;height:18px}
.cp-open:hover{transform:translateY(-2px)}
.reading #caption{opacity:0;pointer-events:none}
.night .cp-title{color:#f4f1ea}
.night .cp-meta{color:rgba(244,241,234,.6)}
.night .flip span{color:#f4f1ea;text-shadow:0 1px 2px rgba(0,0,0,.5)}
body.night{background:#2a2e36}

/* the shelf: every box standing face out along the foot of the stage, its set number on the price strip */
#tray{position:fixed;z-index:4;left:0;right:0;bottom:0;height:var(--tray);transform:translateY(calc(100% + 14px));transition:transform .7s cubic-bezier(.2,.8,.2,1);-webkit-user-select:none;user-select:none}
.shelf #tray{transform:none}
.reading #tray{transform:translateY(calc(100% + 14px));transition-duration:.45s}
#tray::before{content:"";position:absolute;left:0;right:0;bottom:calc(var(--tr-ledge) + env(safe-area-inset-bottom,0px));height:calc(var(--tr-deck) + var(--box) * .3);
  background:linear-gradient(rgba(226,222,214,0),#e6e2db 45%,#f6f4f0)}
#tray::after{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(var(--tr-ledge) + env(safe-area-inset-bottom,0px));
  background:linear-gradient(#fff 0 1.5px,#e4e1db 1.5px,#d6d3cd 70%,#cbc8c2);box-shadow:0 -1px 0 rgba(70,50,30,.1)}
.tr-scroll{position:absolute;z-index:1;inset:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent)}
.tr-scroll::-webkit-scrollbar{display:none}
.tr-scroll.dragging,.tr-scroll.dragging .tr-box{cursor:grabbing}
.tr-row{list-style:none;display:flex;gap:calc(var(--box) * .15);width:max-content;height:100%;margin:0 auto;padding:var(--tr-top) max(22px,3vw) 0}
.tr-item{flex:none;width:var(--box);display:flex;flex-direction:column;align-items:center}
/* stocking the shelf: the boxes drop onto it one after another as it slides in (the labels are already in the strip) */
.shelf .tr-box{animation:tr-stock .5s cubic-bezier(.25,.9,.35,1.25) backwards;animation-delay:calc(min(var(--i),16) * 36ms + 260ms)}
@keyframes tr-stock{from{translate:0 calc(var(--box) * -.32);opacity:0}}
.tr-box{position:relative;z-index:0;display:block;width:100%;aspect-ratio:1/.78;transform-origin:50% 100%;transition:transform .3s cubic-bezier(.2,.8,.2,1);-webkit-tap-highlight-color:transparent}
.tr-box .bx-front{border-radius:1.5px;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.3)}
.tr-box .bx-band,.tr-box .bx-client{display:none}
.tr-box .bx-title{left:5cqw;right:5cqw;bottom:4.5cqw}
.tr-box .bx-title b{font-size:10cqw;-webkit-text-stroke:.4cqw rgba(12,20,40,.55)}
/* the top of the box (its print carried over the edge, catching the key light) and its shadow on the shelf */
.tr-box::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:calc(var(--box) * .055);clip-path:polygon(3% 0,97% 0,100% 100%,0 100%);
  background:linear-gradient(rgba(255,255,255,.3),rgba(255,255,255,.12)),var(--art) 50% 0/100% auto no-repeat,#2a2e36}
.tr-box::after{content:"";position:absolute;z-index:-1;left:6%;right:-4%;bottom:-5px;height:10px;border-radius:50%;background:radial-gradient(closest-side,rgba(40,26,12,.4),rgba(40,26,12,0));transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .3s}
@media (hover:hover){ .tr-box:hover{transform:translateY(-3px)} .tr-box:hover::after{transform:translateY(3px)} }
.tr-item.on .tr-box{transform:translateY(-7px) scale(1.05)}
.tr-item.on .tr-box::after{transform:translateY(8px) scaleX(.9);opacity:.6}
.tr-label{margin:auto 0 calc(3px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:5px;height:calc(var(--tr-ledge) - 6px);padding:0 6px;border-radius:2px;background:#fff;color:#1d2126;font-size:10.5px;line-height:1;white-space:nowrap;box-shadow:0 1px 1.5px rgba(0,0,0,.2);transition:background .3s}
.tr-label b{font-weight:900;letter-spacing:.03em}
.tr-label span{font-size:9.5px;font-weight:700;color:#6c747c}
.tr-item.on .tr-label{background:var(--yellow);color:var(--band-2)}
.tr-item.on .tr-label span{color:rgba(12,45,115,.72)}
/* the set's name on a tag above the box under the pointer */
.tr-tag{position:absolute;z-index:2;left:0;top:0;display:flex;flex-direction:column;align-items:center;gap:4px;padding:7px 12px 8px;border-radius:10px;background:#fff;white-space:nowrap;pointer-events:none;
  box-shadow:0 1px 0 rgba(0,0,0,.12),0 8px 20px rgba(60,40,20,.2);opacity:0;transform:translate(-50%,-100%) translateY(5px);transition:opacity .16s,transform .16s}
.tr-tag.on{opacity:1;transform:translate(-50%,-100%)}
.tr-tag::after{content:"";position:absolute;left:50%;bottom:-5px;width:10px;height:10px;margin-left:-5px;background:#fff;transform:rotate(45deg);border-radius:0 0 2px 0}
.tr-tag span{font-size:9.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--band-2);background:var(--yellow);padding:3px 6px 2px;border-radius:3px}
.tr-tag b{font-size:14px;font-weight:900;letter-spacing:-.01em;color:var(--ink)}
/* on the night papers the shelf is graphite */
.night #tray::before{background:linear-gradient(rgba(40,44,52,0),#353a43 45%,#424852)}
.night #tray::after{background:linear-gradient(#6a717c 0 1.5px,#30343c 1.5px,#272b32 70%,#21242a);box-shadow:0 -1px 0 rgba(0,0,0,.3)}

/* the work: a page of the instruction booklet that slides in beside the finished set */
#sheet{position:fixed;z-index:6;top:0;right:0;bottom:0;width:min(50vw,760px);display:flex;flex-direction:column;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),var(--paper-2);
  box-shadow:-2px 0 0 rgba(0,0,0,.08),-30px 0 60px rgba(60,40,20,.18);transform:translateX(104%);transition:transform .55s cubic-bezier(.2,.8,.2,1);visibility:hidden}
#sheet::before{content:"";position:absolute;left:0;top:0;bottom:0;width:30px;background:linear-gradient(90deg,rgba(0,0,0,.1),rgba(0,0,0,0));pointer-events:none}
.reading #sheet{transform:none;visibility:visible}
#sheet:focus{outline:none}
.sh-bar{display:flex;justify-content:flex-start;align-items:center;gap:8px;padding:16px 300px 8px clamp(18px,5%,48px);min-height:70px}
.sh-r{display:flex;gap:8px;min-width:0}
.sh-prev span,.sh-next span{max-width:14vw;overflow:hidden;text-overflow:ellipsis}
.sh-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding-bottom:env(safe-area-inset-bottom,0px)}
.loading #caption .cp-title::after{content:"";display:inline-block}

/* ---- the box front (All work) -------------------------------------------------------------- */
.bx-front,.bx-side,.bx-top{position:absolute;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.bx-front{inset:0;overflow:hidden;border-radius:2px;background:#123;container-type:inline-size;box-shadow:0 22px 30px -18px rgba(0,0,0,.55)}
.bx-art{position:absolute;inset:0;overflow:hidden}
.bx-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none}
.bx-band{position:absolute;right:2.6cqw;top:2.6cqw;z-index:1;display:flex}
.bx-num{display:flex;flex-direction:column;align-items:flex-end;color:#fff;line-height:1;background:rgba(10,13,20,.78);padding:1.3cqw 1.9cqw 1.1cqw;border-radius:1.2cqw;box-shadow:0 .3cqw 1cqw rgba(0,0,0,.3)}
.bx-num b{font-size:5cqw;font-weight:900;letter-spacing:.02em}
.bx-num span{font-size:2.1cqw;font-weight:800;opacity:.9;margin-top:.4cqw}
.bx-title{position:absolute;z-index:1;left:3cqw;bottom:2.8cqw;right:20cqw;display:flex;flex-direction:column;align-items:flex-start;gap:.5cqw;text-align:left}
.bx-title b{font-size:6.4cqw;font-weight:900;line-height:.98;color:#fff;letter-spacing:-.01em;text-shadow:0 .35cqw 0 rgba(0,0,0,.45),0 0 2.4cqw rgba(0,0,0,.45);-webkit-text-stroke:.28cqw rgba(12,20,40,.55);paint-order:stroke fill}
.bx-client{font-size:2.1cqw;font-weight:900;letter-spacing:.14em;color:var(--band-2);background:var(--yellow);padding:.45cqw 1.3cqw .35cqw;border-radius:.6cqw}
.bx-gloss{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,0) calc(var(--mx,.5) * 100% - 40%),rgba(255,255,255,.22) calc(var(--mx,.5) * 100% - 8%),rgba(255,255,255,0) calc(var(--mx,.5) * 100% + 22%));mix-blend-mode:screen;opacity:.7;transition:opacity .3s}

/* ---- the real work -------------------------------------------------------------------------- */
/* right page: the real thing */
.work{padding:8px clamp(18px,5%,48px) 48px}
.wk-head{margin-bottom:22px;padding-bottom:18px;border-bottom:3px solid #141414}
.wk-client{display:inline-block;font-size:12px;font-weight:900;letter-spacing:.16em;color:var(--band-2);background:var(--yellow);padding:4px 9px 3px;border-radius:4px}
.wk-title{margin-top:10px;font-size:clamp(28px,4.4vh,50px);font-weight:900;line-height:1;letter-spacing:-.02em}
.wk-desc{margin-top:12px;font-size:clamp(14px,1.9vh,17px);line-height:1.45;color:#2a3038;max-width:60ch}
.wk-sec{margin:26px 0 0}
.wk-h{font-size:clamp(16px,2.1vh,19px);font-weight:900;margin-bottom:6px;display:flex;align-items:center;gap:8px}
.wk-h::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--band);box-shadow:inset 0 -3px 0 rgba(0,0,0,.25);flex:none}
.wk-p{font-size:14px;line-height:1.45;color:#39414b;margin-bottom:12px;max-width:62ch}
.wk-films{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.wk-films.one{grid-template-columns:1fr}
.wk-film{margin:0}
.wk-film.tall{max-width:240px}
.wk-frame{position:relative;display:block;width:100%;background:#0d0f12;border-radius:6px;overflow:hidden;box-shadow:0 0 0 4px #fff,0 6px 16px rgba(20,40,70,.22)}
.wk-frame img{width:100%;height:100%;object-fit:cover}
.wk-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.wk-frame .glyph{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:var(--yellow);box-shadow:0 4px 12px rgba(0,0,0,.35)}
.wk-frame .glyph::after{content:"";position:absolute;left:23px;top:18px;border-left:18px solid #141414;border-top:11px solid transparent;border-bottom:11px solid transparent}
button.wk-frame:hover .glyph{transform:scale(1.08)}
.wk-cap{display:flex;justify-content:space-between;gap:8px;margin-top:9px;font-size:13px}
.wk-cap b{font-weight:800}
.wk-cap span{color:#5a6570;font-variant-numeric:tabular-nums}
.wk-imgs{display:grid;gap:12px;margin-top:6px}
.wk-imgs.full{grid-template-columns:1fr}
.wk-imgs.row-2{grid-template-columns:repeat(2,1fr)}
.wk-imgs.row-3{grid-template-columns:repeat(3,1fr)}
.wk-img{margin:0;background:#fff;padding:5px;border-radius:4px;box-shadow:0 4px 12px rgba(20,40,70,.16)}
.wk-img img{width:100%;height:auto}
.wk-audio{list-style:none;display:grid;gap:8px;margin-top:6px}
.wk-track{display:grid;grid-template-columns:40px 26px 1fr;grid-template-rows:auto 5px;column-gap:10px;align-items:center;padding:8px 12px 10px 8px;background:#fff;border-radius:8px;box-shadow:0 2px 6px rgba(20,40,70,.12)}
.wk-ap{grid-row:1/3;width:40px;height:40px;border-radius:50%;background:var(--yellow);position:relative}
.wk-ap::after{content:"";position:absolute;left:15px;top:12px;border-left:13px solid #141414;border-top:8px solid transparent;border-bottom:8px solid transparent}
.wk-track.on .wk-ap::after{left:13px;top:13px;width:14px;height:14px;border:0;background:linear-gradient(90deg,#141414 0 36%,transparent 36% 64%,#141414 64%)}
.wk-n{font-weight:900;color:#6a7682;font-size:12px}
.wk-at{font-weight:800;font-size:14px}
.wk-bar{grid-column:2/4;height:4px;border-radius:2px;background:#e1e7ed;overflow:hidden}
.wk-bar i{display:block;height:100%;width:0;background:var(--band)}
.wk-credits{margin-top:30px;padding-top:12px;border-top:1px solid #aab6c2;font-size:12px;line-height:1.5;color:#4c5763}
.wk-fine{margin-top:16px;display:flex;gap:14px;font-size:11px;font-weight:900;color:#7a8692;letter-spacing:.06em}

/* ---- the catalogue (All work) and the designer's page -------------------------------------------- */
.ov{position:fixed;inset:0;z-index:50;background:rgba(14,22,36,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);overflow-y:auto;padding:24px 16px}
.ov[hidden]{display:none}
.catalog,.designer{position:relative;margin:0 auto;max-width:1240px;background:var(--paper-2);border-radius:6px;box-shadow:0 30px 60px rgba(0,0,0,.4);overflow:hidden}
.designer{max-width:760px}
.cat-top{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:linear-gradient(var(--band),var(--band-2));box-shadow:0 4px 0 var(--yellow);font-size:22px}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:22px 18px;padding:28px 22px 30px}
.cat-item{display:flex;flex-direction:column;gap:8px;text-align:left}
.cat-item .bx-front{position:relative;inset:auto;width:100%;aspect-ratio:1/.78;height:auto;box-shadow:0 10px 18px -8px rgba(0,0,0,.45);transition:transform .2s}
.cat-item:hover .bx-front,.cat-item:focus-visible .bx-front{transform:translateY(-4px)}
.cat-cap{display:flex;gap:8px;align-items:baseline;font-size:14px}
.cat-cap b{font-weight:900}
.cat-cap span{font-weight:700}
.ds-body{padding:28px 30px 34px}
.ds-name{font-size:clamp(30px,5vw,48px);font-weight:900;letter-spacing:-.02em;line-height:1}
.ds-role{margin-top:8px;font-weight:800;font-size:17px;color:var(--band)}
.ds-bio{margin-top:14px;font-size:16px;line-height:1.5;max-width:56ch}
.ds-contact{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:16px;font-weight:700}
.ds-contact a{color:var(--band);text-decoration:underline;text-underline-offset:3px}
.ds-xp{list-style:none;margin-top:24px;border-top:3px solid #141414}
.ds-xp li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #b8c4cf;font-size:14px}
.ds-xp b{font-weight:800}
.ds-xp span{font-weight:900;letter-spacing:.08em;font-size:12px;color:#4a5663;text-align:right}


/* ---- phones ---------------------------------------------------------------------------------------- */
@media (max-width:760px){
  #header{padding:calc(12px + env(safe-area-inset-top,0px)) 12px 12px}
  .chip{height:36px;padding:0 13px;font-size:13px}
  .chip.snd,.chip.x{width:36px}
  :root{--box:76px;--tr-top:11px;--tr-deck:8px;--tr-ledge:20px}
  .flip{top:auto;bottom:calc(var(--tray) + 14px);margin:0;height:44px}
  .flip svg{width:44px;height:44px;padding:12px}
  .flip span{display:none}
  .flip.prev{left:auto;right:66px}
  .flip.next{right:14px}
  .at-name .flip.next{right:50%;transform:translateX(50%);bottom:calc(var(--tray) + 22px)}
  .at-name .flip.next span{display:inline;max-width:60vw}
  #caption{left:16px;right:16px;bottom:calc(var(--tray) + 12px);flex-direction:column;align-items:flex-start;gap:12px}
  .cp-title{font-size:clamp(28px,8.4vw,40px);max-width:calc(100vw - 150px)}
  .cp-open{height:44px;font-size:15px;padding:0 16px 0 18px}
  #sheet{top:40%;width:100%;border-radius:14px 14px 0 0;transform:translateY(104%);box-shadow:0 -20px 50px rgba(60,40,20,.2)}
  #sheet::before{display:none}
  .sh-bar{padding:10px 12px 4px;justify-content:flex-end;min-height:0}
  .sh-prev span,.sh-next span{display:none}
  .work{padding:4px 16px 60px}
  .wk-imgs.row-3{grid-template-columns:repeat(2,1fr)}
  .cat-grid{grid-template-columns:repeat(2,1fr);gap:16px 12px;padding:18px 12px}
  .cat-cap{font-size:12px;flex-direction:column;gap:0}
  .tr-label{font-size:10px;padding:0 5px}
  .tr-label span{display:none}
  .tr-row{padding-left:16px;padding-right:16px}
}
@media (max-height:500px){ :root{--box:62px;--tr-top:10px;--tr-deck:6px;--tr-ledge:18px} .tr-label span{display:none} }
@media (max-height:500px) and (min-width:761px){
  #header{padding-top:calc(10px + env(safe-area-inset-top,0px));padding-bottom:10px}
  .cp-title{font-size:28px} .cp-text{gap:5px} .cp-client{font-size:10px;padding:3px 7px 2px} .cp-open{height:42px;font-size:15px}
}
@media (max-width:760px) and (max-height:500px){ #sheet{top:0;left:45%;width:auto;border-radius:0} }
@media (prefers-reduced-motion:reduce){
  *{transition-duration:0s!important;animation-duration:0s!important}
  .shelf .tr-box{animation:none}
}