/* Kleiderstange hero (Tom 2026-09-30 "ja", look A/studio wall live 2026-10-08). Linked from club.html's head only when the
   hero renders (≥3 M shirts), so every other page keeps its bytes. A full-bleed shop window: the club's 3D shirts hang
   side-on, slightly overlapping, on a drawn metal rail in front of a lit wall. Hover or keyboard focus swings one shirt to
   the front (rotateY on .st-turn, a damped rotateZ sway on .st-sway), its neighbours part (translateX). Transforms only:
   the stage has a fixed height (--st-h) and no width ever changes, so the layout never shifts (CLS 0).
   Look a: studio wall (warm paper light, wooden hangers, the club name as a giant stencil behind the rack).
   The chrome and wood are neutral ramps of our own; no brand, no crest. Under prefers-reduced-motion nothing moves. */
html:has(.st-hero){overflow-x:clip}             /* the full-bleed stage is 100vw wide; a vertical scrollbar must not add a page scroll */
.stange{
  --st-img:300px;                    /* the shirt picture's square on desktop */
  --st-side:118px;                   /* one shirt's slot on the rail: narrower than the side-on picture, so they overlap */
  --st-front:340px;                  /* the room a shirt swung to the front takes; the neighbours part by --st-push */
  --st-push:calc((var(--st-front) - var(--st-side)) / 2);
  --st-turn:64deg;                   /* side-on angle */
  --st-h:clamp(460px,66vh,700px);    /* the stage height: fixed for a given viewport, never content-driven */
  --st-rail-y:84px;                  /* the rail's distance from the stage top */
  --st-wall:#EFE7D8; --st-wall-2:#D9CDB6; --st-floor:#CDBFA6;
  --st-c1:#2B2B2E; --st-c2:#2B2B2E;   /* club colours (checked hex, set inline): the b scoreboard strip */
  --st-wallc:#3A3D44;                 /* the b wall: the club's more saturated colour (atmos.club_tint), else a neutral slate */
  --st-chrome:linear-gradient(180deg,#FFFFFF 0,#D7DADF 22%,#9EA3AB 50%,#EEF0F2 64%,#6D727A 100%);
  --st-ease-swing:cubic-bezier(.34,1.45,.5,1);
  position:relative;margin:8px 0 0;width:100vw;margin-left:calc(50% - 50vw)}
.st-defs{position:absolute;width:0;height:0;overflow:hidden}
.st-stage{position:relative;height:var(--st-h);overflow:hidden;isolation:isolate;
  background:radial-gradient(120% 90% at 50% 18%,var(--st-wall) 0,var(--st-wall-2) 70%,#BFAF93 100%)}
/* floor line + soft vignette */
.st-stage::before{content:"";position:absolute;inset:auto 0 0 0;height:22%;z-index:-1;
  background:linear-gradient(180deg,rgba(0,0,0,.10) 0,transparent 6px),linear-gradient(180deg,var(--st-floor),#B9A98C)}
.st-stage::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(130% 100% at 50% 40%,transparent 60%,rgba(11,11,12,.22) 100%)}
/* the club name as a giant stencil on the wall, behind the rack (decoration; the h1 below is the page's name) */
.st-clubname{position:absolute;left:0;right:0;bottom:21%;z-index:-1;margin:0;text-align:center;white-space:nowrap;
  font-family:var(--f-poster);font-stretch:62%;font-weight:900;text-transform:uppercase;line-height:.8;
  font-size:clamp(88px,15vw,240px);letter-spacing:-.01em;color:rgba(11,11,12,.07);overflow:hidden;text-overflow:clip}
/* rail box: arrows at both ends, the list scrolls sideways, its edges fade */
.st-railbox{position:absolute;left:0;right:0;top:0;bottom:0}
.st-rail{list-style:none;margin:0;height:100%;box-sizing:border-box;display:flex;align-items:flex-start;justify-content:safe center;
  padding:calc(var(--st-rail-y) - 30px) max(48px,calc(50vw - 560px)) 0;overflow-x:auto;overflow-y:hidden;
  overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;cursor:grab;
  background:var(--st-chrome) 0 var(--st-rail-y)/100% 12px no-repeat local;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)}
.st-rail::-webkit-scrollbar{display:none}
.st-rail.dragging{cursor:grabbing;scroll-snap-type:none}
.st-item{position:relative;flex:0 0 var(--st-side);width:var(--st-side);scroll-snap-align:center;
  transition:transform var(--dur-stage) var(--ease-kick)}
.st-item[hidden]{display:none}
.st-shirt{display:block;width:100%;color:inherit;outline-offset:4px;-webkit-user-drag:none}
.st-sway{display:block;transform-origin:50% 0}
.st-turn{display:block;position:relative;width:var(--st-img);margin-left:calc((var(--st-side) - var(--st-img)) / 2);
  transform:perspective(900px) rotateY(var(--st-turn));transform-origin:50% 0;
  transition:transform 700ms var(--st-ease-swing)}
.st-hanger{display:block;width:58%;height:auto;margin:0 auto -26px;position:relative;z-index:1;
  filter:drop-shadow(0 2px 1px rgba(0,0,0,.25))}
.st-img{display:block;width:var(--st-img);height:var(--st-img);position:relative}
/* contact shadow on the wall behind each shirt */
.st-img::before{content:"";position:absolute;left:14%;right:14%;top:10%;bottom:4%;z-index:-1;border-radius:40%;
  background:radial-gradient(closest-side,rgba(11,11,12,.28),transparent);transform:translate(10px,14px);filter:blur(6px)}
.st-img img,.st-img picture{display:block;width:100%;height:100%;object-fit:contain;-webkit-user-drag:none;user-select:none}
.st-img img{filter:drop-shadow(0 10px 10px rgba(11,11,12,.25))}
/* hang-tag on the hook: a paper tag on a string, the season in mono; shown on hover/focus (always on a phone) */
.st-tag{position:absolute;left:calc(50% + 14px);top:6px;z-index:2;padding:4px 7px 3px;background:var(--white);color:var(--away);
  font-family:var(--f-mono);font-stretch:100%;font-size:var(--t12);line-height:1;border:1px solid rgba(11,11,12,.25);
  border-radius:2px 8px 8px 2px;box-shadow:0 2px 4px rgba(0,0,0,.18);transform:rotate(8deg) scale(.6);transform-origin:0 50%;
  visibility:hidden;transition:transform 300ms var(--st-ease-swing),visibility 0s 300ms}
.st-tag::before{content:"";position:absolute;left:-14px;top:50%;width:14px;border-top:1px solid rgba(11,11,12,.45)}
/* front: hover (real pointers) and keyboard focus; the neighbours part, the shirt swings in and settles */
@keyframes st-swing{0%{transform:rotateZ(0)}30%{transform:rotateZ(3.5deg)}55%{transform:rotateZ(-2deg)}75%{transform:rotateZ(.9deg)}100%{transform:rotateZ(0)}}
@keyframes st-idle{0%,100%{transform:rotateZ(-.7deg)}50%{transform:rotateZ(.7deg)}}
@media (hover:hover){
  .st-item:hover{z-index:4}
  .st-item:hover .st-turn{transform:perspective(900px) rotateY(0) scale(1.06)}
  .st-item:hover .st-sway{animation:st-swing 1.4s ease-out}
  .st-item:hover .st-tag{visibility:visible;transform:rotate(8deg) scale(1);transition-delay:0s}
  .st-item:hover ~ .st-item{transform:translateX(var(--st-push))}
  .st-item:has(~ .st-item:hover){transform:translateX(calc(-1 * var(--st-push)))}
}
.st-item:focus-within{z-index:4}
.st-item:focus-within .st-turn{transform:perspective(900px) rotateY(0) scale(1.06)}
.st-item:focus-within .st-tag{visibility:visible;transform:rotate(8deg) scale(1);transition-delay:0s}
.st-item:focus-within ~ .st-item{transform:translateX(var(--st-push))}
.st-item:has(~ .st-item:focus-within){transform:translateX(calc(-1 * var(--st-push)))}
/* ambient: two shirts sway very slowly while nothing is touched */
.st-item:nth-child(4n+2):not(:hover):not(:focus-within) .st-sway{animation:st-idle 7s ease-in-out infinite}
.st-item:nth-child(4n+4):not(:hover):not(:focus-within) .st-sway{animation:st-idle 9s ease-in-out -3s infinite}
/* arrows: 48 px, over the rail ends */
.st-arrow{position:absolute;top:calc(var(--st-rail-y) + 120px);z-index:5;width:48px;height:48px;border-radius:50%;
  border:1px solid var(--line);background:var(--white);color:var(--away);font-size:22px;line-height:1;cursor:pointer;
  display:grid;place-items:center;padding:0;box-shadow:var(--float)}
.st-arrow-l{left:16px}.st-arrow-r{right:16px}
.st-arrow[disabled]{visibility:hidden}
/* floor strip: facts + the one disclosure */
.st-floor{position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px;padding:0 max(16px,calc(50vw - 640px)) 16px}
.st-facts{margin:0;font-family:var(--f-mono);font-stretch:100%;font-size:var(--t14);color:var(--away);
  background:color-mix(in oklab,var(--home) 86%,transparent);padding:6px 10px 5px}
.st-floor .st-ai,.st-focus .st-ai{position:static;display:inline-block}
@keyframes st-in{from{transform:translateY(-18px)}to{transform:none}}
.st-item.st-in .st-sway{animation:st-in 420ms var(--st-ease-swing)}
/* ---------- phone: one big shirt centred, neighbours peeking; swipe with snap; tags always on ---------- */
@media (hover:none),(max-width:700px){
  .stange{--st-img:min(64vw,260px);--st-side:min(56vw,230px);--st-turn:38deg;--st-h:clamp(440px,70svh,620px);--st-rail-y:72px}
  .st-rail{padding-inline:calc(50% - var(--st-side) / 2);scroll-snap-type:x mandatory;cursor:auto;
    -webkit-mask-image:none;mask-image:none}
  .st-item .st-turn{transform:perspective(900px) rotateY(var(--st-turn)) scale(.86)}
  .st-item.is-center ~ .st-item .st-turn{transform:perspective(900px) rotateY(calc(-1 * var(--st-turn))) scale(.86)}
  .st-item.is-center .st-turn{transform:perspective(900px) rotateY(0) scale(1)}
  .st-tag{visibility:visible;transform:rotate(8deg) scale(1)}
  .st-item:hover ~ .st-item,.st-item:has(~ .st-item:hover),.st-item:focus-within ~ .st-item,.st-item:has(~ .st-item:focus-within){transform:none}
  .st-arrow{display:none}
  .st-floor{flex-direction:column;align-items:flex-start;gap:6px}
  .st-clubname{font-size:clamp(64px,22vw,120px)}
}
/* ---------- focus view: side sheet (a, c) or centred fitting room (b); a bottom sheet on a phone ---------- */
.st-focus{padding:0;border:0;background:transparent;color:var(--away);max-width:none;max-height:none;overflow:visible}
.st-focus::backdrop{background:var(--scrim)}
.st-sheet{position:fixed;top:0;right:0;bottom:0;width:min(640px,100vw);box-sizing:border-box;overflow:auto;
  background:var(--home);box-shadow:var(--float);padding:20px 24px 24px;display:flex;flex-direction:column;gap:16px;
  animation:st-sheet-in 360ms var(--ease-kick)}
@keyframes st-sheet-in{from{transform:translateX(40px)}to{transform:none}}
.st-x{position:absolute;right:12px;top:12px;width:44px;height:44px;display:grid;place-items:center;padding:0;border:1px solid var(--line);
  background:var(--white);color:var(--away);font-size:24px;line-height:1;cursor:pointer;z-index:2}
.st-fitting{position:relative;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:8px;margin-top:36px;perspective:1000px}
.st-nav{width:44px;height:44px;display:grid;place-items:center;padding:0;border:1px solid var(--line);background:var(--white);color:var(--away);
  font-size:22px;line-height:1;cursor:pointer;border-radius:50%}
.st-fig{aspect-ratio:1;width:min(100%,46dvh,460px);margin:0 auto;display:grid;place-items:center;touch-action:pan-y;
  transform:rotateX(var(--st-ty,0deg)) rotateY(var(--st-tx,0deg));transition:transform 200ms ease-out}
.st-fig .st-img{width:100%;height:100%}
.st-fig .st-img::before{display:none}
.st-fig .st-img img{filter:drop-shadow(0 24px 24px rgba(11,11,12,.3))}
.st-fig.st-slide-l{animation:st-slide-l 380ms var(--ease-kick)}
.st-fig.st-slide-r{animation:st-slide-r 380ms var(--ease-kick)}
@keyframes st-slide-l{from{transform:translateX(-60px)}to{transform:none}}
@keyframes st-slide-r{from{transform:translateX(60px)}to{transform:none}}
.st-kicker{margin:0;font-family:var(--f-mono);font-stretch:100%;font-size:var(--t14);letter-spacing:.06em;text-transform:uppercase;color:var(--terrace)}
.st-name{font-family:var(--f-poster);font-stretch:62%;font-weight:900;font-size:var(--d2);line-height:.95;text-transform:uppercase;margin:6px 0 0}
.st-price{margin:12px 0 0;font-family:var(--f-poster);font-stretch:62%;font-weight:900;font-size:var(--d2);line-height:1}
.st-meta{margin:6px 0 0;color:var(--terrace)}
.st-ctas{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}
.st-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0 0}
.st-pos{font-family:var(--f-mono);font-stretch:100%;font-size:var(--t12);color:var(--terrace)}
@keyframes st-sheet-up{from{transform:translateY(40px)}to{transform:none}}
@media (max-width:700px){
  .st-sheet{left:0;right:0;top:auto;bottom:0;width:100vw;max-height:92dvh;transform:none;display:flex;
    border-radius:16px 16px 0 0;padding:16px;animation:st-sheet-up 320ms var(--ease-kick)}
  .st-fitting{margin-top:40px}
  .st-name,.st-price{font-size:var(--d3)}
}
@media (prefers-reduced-motion:reduce){
  .st-item,.st-turn,.st-tag,.st-fig{transition:none}
  .st-sway,.st-item:hover .st-sway,.st-item.st-in .st-sway,.st-fig.st-slide-l,.st-fig.st-slide-r,.st-sheet{animation:none!important}
  .st-fig{transform:none}
}