/* Client merch as a clothes rail (a proposal for Omer, not approved): shirts on hangers along a steel rail; drag the rail
   sideways and the shirts swing; pull one off to see it whole, turn it to its back. Reduced motion: no swing. */
.rail-room { background: #ddd6c8; color: #141414; padding: 96px 0 72px; scroll-margin-top: 52px; overflow: hidden; position: relative; }
.rail-head { display: flex; align-items: baseline; justify-content: space-between; gap: 32px; padding: 0 var(--pad); margin-bottom: 28px; }
.rail-head h2 { font-size: clamp(56px, 8vw, 120px); line-height: .9; letter-spacing: -.05em; margin: 0; font-weight: 600; }
.rail-head p { max-width: 34ch; margin: 0; color: #4a4639; font-size: 17px; }
.rail-stage { position: relative; height: clamp(500px, 64vh, 620px); touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.rail-stage.drag { cursor: grabbing; }
.rail-bar { position: absolute; left: 0; right: 0; top: 34px; height: 12px; border-radius: 6px; background: linear-gradient(#f4f1ea, #9b9588 55%, #6e6a5e); box-shadow: 0 6px 10px rgba(60, 50, 30, .3), 0 1px 0 #fff8 inset; z-index: 2; }
.rail-bar::before, .rail-bar::after { content: ''; position: absolute; top: -34px; width: 10px; height: 34px; background: linear-gradient(90deg, #8a8478, #d8d3c6 50%, #8a8478); }
.rail-bar::before { left: 8%; } .rail-bar::after { right: 8%; }
.rail-track { position: absolute; left: 0; top: 0; height: 100%; will-change: transform; }
.rail-hang { all: unset; position: absolute; top: 34px; width: var(--w, 250px); margin-left: calc(var(--w, 250px) / -2); transform-origin: 50% 0; cursor: pointer; z-index: 1; outline-offset: 6px; }
.rail-hang .hook { position: absolute; left: 50%; top: -22px; width: 24px; height: 40px; margin-left: -12px; z-index: 3; }
.rail-hang .shirt { display: block; width: 100%; height: auto; margin-top: 26px; filter: drop-shadow(0 18px 14px rgba(60, 50, 30, .38)); pointer-events: none; -webkit-user-drag: none; }
.rail-hang .arm { position: absolute; left: 50%; top: 12px; width: 62%; margin-left: -31%; height: 22px; z-index: 1; }
.rail-hang .tag { position: absolute; left: 50%; top: calc(100% - 8px); transform: translateX(-50%) rotate(-3deg); transform-origin: 50% 0; padding: 7px 12px 8px; background: #f3efe4; color: #141414; font: 600 13px/1.1 'Inter Tight', system-ui, sans-serif; letter-spacing: -.01em; white-space: nowrap; border-radius: 3px; box-shadow: 0 6px 10px rgba(60, 50, 30, .25); }
.rail-hang .tag::before { content: ''; position: absolute; left: 50%; top: -14px; width: 1px; height: 14px; background: #6e6a5e; }
.rail-hang:focus-visible .tag { outline: 2px solid #2b6cff; outline-offset: 3px; }
.rail-ctl { display: flex; gap: 10px; align-items: center; padding: 18px var(--pad) 0; }
.rail-ctl button { all: unset; box-sizing: border-box; min-width: 44px; min-height: 44px; display: grid; place-items: center; border-radius: 99px; background: #141414; color: #f3efe4; cursor: pointer; font-size: 18px; transition: transform .2s; }
.rail-ctl button:active { transform: scale(.94); } .rail-ctl button:focus-visible { outline: 2px solid #2b6cff; outline-offset: 3px; }
.rail-ctl span { margin-left: 8px; font-size: 14px; color: #4a4639; }
.rail-next { display: inline-block; margin: 36px var(--pad) 0; color: #141414; }
/* the shirt pulled off the rail */
.rail-pull { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(221, 214, 200, .0); backdrop-filter: blur(0); visibility: hidden; transition: background .45s, backdrop-filter .45s, visibility 0s .45s; }
.rail-pull.on { visibility: visible; background: rgba(221, 214, 200, .92); backdrop-filter: blur(14px); transition: background .45s, backdrop-filter .45s; }
.rail-pull-in { display: grid; grid-template-columns: minmax(0, auto) minmax(220px, 320px); gap: 48px; align-items: center; max-width: min(1100px, 92vw); padding: 24px; }
.rail-fl { position: relative; width: min(62vh, 80vw); aspect-ratio: var(--ar, 1 / 1.05); perspective: 1400px; }
.rail-fl .card { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.77, 0, .175, 1); }
.rail-fl.back .card { transform: rotateY(180deg); }
.rail-fl img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; backface-visibility: hidden; filter: drop-shadow(0 30px 24px rgba(60, 50, 30, .4)); }
.rail-fl img.b { transform: rotateY(180deg); }
.rail-info h3 { margin: 0 0 10px; font-size: clamp(30px, 4vw, 56px); letter-spacing: -.04em; line-height: .98; font-weight: 500; }
.rail-info p { margin: 0 0 22px; color: #4a4639; font-size: 16px; }
.rail-info .row { display: flex; gap: 10px; flex-wrap: wrap; }
.rail-info button { all: unset; box-sizing: border-box; min-height: 44px; padding: 0 20px; display: inline-flex; align-items: center; border-radius: 99px; cursor: pointer; font-size: 15px; background: #141414; color: #f3efe4; transition: transform .2s; }
.rail-info button.ghost { background: transparent; box-shadow: inset 0 0 0 1.5px #141414; color: #141414; }
.rail-info button:active { transform: scale(.97); } .rail-info button:focus-visible { outline: 2px solid #2b6cff; outline-offset: 3px; }
@media (max-width: 760px) { .rail-room { padding: 112px 0 48px; scroll-margin-top: 88px; } .rail-head { display: block; } .rail-head p { margin-top: 16px; }
  .rail-stage { height: min(520px, 70svh); } .rail-pull-in { grid-template-columns: 1fr; gap: 20px; justify-items: center; text-align: center; } .rail-fl { width: min(44svh, 78vw); } .rail-info .row { justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .rail-fl .card, .rail-pull, .rail-pull.on { transition: none; } }

.rail-info button[hidden], .rail-fl img[hidden] { display: none; }