/* ==================================================================
   CORNER APPROVED — "PICKED FROM THE LINE"
   Hanging-gear shop section + bench (360-style viewer).
   Loaded after site.css. Reuses: .btn .sw .size .opt .opt-label
   .swatches .sizes .link-btn .help-size .h (all from site.css).
   Performance notes:
   - Only transform / opacity / rotate / translate / scale animate.
   - Idle sway is a CSS animation that pauses when the section is
     off-screen (.line-sec:not(.live)).
   - Product shadows are baked into the cut-out WebPs, so no
     runtime filter: drop-shadow() on moving elements.
   ================================================================== */

.line-sec{
  --paper:#EEE9E0; --paper-2:#E3DCCF; --paper-hi:#FAF8F4;
  --rope:#6B573D; --rope-hi:#B39A74; --tape:rgba(224,211,182,.86);
  --line-ink:#2B2925;
  position:relative; isolation:isolate; overflow:hidden;
  background-color:var(--paper);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .27 0 0 0 0 .2 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(60% 50% at 12% 18%,rgba(255,255,255,.55),transparent 70%),
    radial-gradient(50% 60% at 88% 70%,rgba(120,100,70,.08),transparent 70%);
  padding:84px 0 72px;
}
.line-wrap{max-width:1360px}

/* ---------- collage decor (static, aria-hidden) ---------- */
.deco{position:absolute;z-index:-1;pointer-events:none}
.deco-torn{top:-10px;left:-3%;width:44%;height:150px;background:var(--paper-2);transform:rotate(-2deg);
  clip-path:polygon(0 0,100% 0,100% 62%,96% 70%,92% 64%,87% 76%,81% 69%,76% 82%,70% 74%,63% 86%,57% 77%,50% 90%,44% 80%,37% 92%,30% 83%,24% 95%,17% 86%,10% 97%,5% 88%,0 96%);
  box-shadow:0 2px 0 rgba(0,0,0,.03)}
.deco-grid{top:120px;right:2.5%;width:min(430px,34vw);height:520px;transform:rotate(2.4deg);
  background-color:rgba(255,255,255,.55);
  background-image:linear-gradient(rgba(36,70,150,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(36,70,150,.14) 1px,transparent 1px);
  background-size:16px 16px;
  clip-path:polygon(3% 2%,22% 0,41% 3%,63% 0,82% 2%,100% 0,98% 21%,100% 44%,97% 66%,100% 87%,98% 100%,74% 98%,52% 100%,31% 97%,9% 100%,0 98%,2% 76%,0 52%,3% 29%,0 8%)}
.deco-strip{bottom:40px;left:-4%;width:38%;height:64px;background:#D7CEBE;opacity:.75;transform:rotate(1.6deg);
  clip-path:polygon(0 18%,6% 8%,13% 20%,21% 6%,30% 16%,39% 4%,48% 14%,58% 2%,67% 15%,76% 5%,85% 17%,93% 6%,100% 14%,100% 86%,92% 95%,84% 84%,75% 97%,66% 86%,57% 98%,48% 85%,39% 96%,30% 84%,21% 95%,12% 83%,5% 94%,0 86%)}
.deco-ink{position:absolute;z-index:-1;pointer-events:none;color:var(--red)}
.deco-ink.a{top:58px;left:min(372px,52vw);width:46px;height:34px;transform:rotate(-8deg)}
.deco-ink.b{bottom:120px;right:6%;width:70px;height:46px;color:var(--line-ink);opacity:.55}
@media (max-width:960px){.deco-grid,.deco-ink.b{display:none}.deco-torn{width:80%;height:120px}}

/* ---------- head ---------- */
.line-head{align-items:flex-end;margin-bottom:26px}
.line-head .eyebrow{display:inline-flex;align-items:center;gap:10px;font:600 14px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--line-ink);margin-bottom:16px}
.line-head .eyebrow i{font-style:normal;color:var(--red);font-weight:700;letter-spacing:-.1em}
.line-head p{color:#5E5A53}

/* ---------- layout: lines + bench ---------- */
.line-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,404px);gap:34px;align-items:start}
@media (max-width:960px){.line-grid{grid-template-columns:minmax(0,1fr);gap:18px}}
.lines,.bench{min-width:0}

/* ---------- a row (one product) ---------- */
.hrow{position:relative}
.hrow+.hrow{margin-top:4px}
.hrow-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 0 4px;position:relative;z-index:3}
.tape-label{display:inline-flex;align-items:baseline;gap:8px;font:800 italic 21px/1 var(--head);text-transform:uppercase;color:var(--line-ink);
  background:var(--tape);padding:8px 16px 7px;transform:rotate(-1.4deg);
  clip-path:polygon(1.5% 0,98.5% 0,100% 18%,98% 38%,100% 58%,98% 80%,99.5% 100%,1% 100%,2.5% 80%,0 60%,2% 40%,0 20%)}
.tape-label i{font-style:inherit;color:var(--red)}
.hrow-meta{font-size:14.5px;color:#5E5A53}
.hrow-meta b{font-weight:600;color:var(--ink)}
.hrow-meta s{color:#8C877E;margin-right:4px}
.hrow-body{position:relative}
/* edge fades show only when the line scrolls (mask, so it matches the paper texture) */
.hrow-body.fade-r .track{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent)}
.hrow-body.fade-l .track{-webkit-mask-image:linear-gradient(90deg,transparent,#000 48px);mask-image:linear-gradient(90deg,transparent,#000 48px)}
.hrow-body.fade-l.fade-r .track{-webkit-mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent)}

.track{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.track::-webkit-scrollbar{display:none}
.hrow-body.scrolls .track{cursor:grab}
.track.dragging{cursor:grabbing}
.rail{position:relative;display:flex;align-items:flex-start;justify-content:space-evenly;gap:var(--gap);
  width:max-content;min-width:100%;padding:26px 36px 34px;list-style:none;margin:0}

/* rope (SVG drawn by hang.js so the sag matches the real width) */
.rope{position:absolute;left:0;top:0;pointer-events:none;overflow:visible;clip-path:inset(-20px 100% -20px 0);transition:clip-path .55s var(--ease)}
.hrow.in .rope{clip-path:inset(-20px 0 -20px 0)}
.rope .rs{fill:none;stroke:rgba(70,52,30,.14);stroke-width:5;transform:translateY(8px)}
.rope .ra{fill:none;stroke:var(--rope);stroke-width:3.4;stroke-linecap:round}
.rope .rb{fill:none;stroke:var(--rope-hi);stroke-width:1.5;stroke-dasharray:2.5 4.5;stroke-linecap:round}
.rope .hk{fill:#4A4740}
.rope .hk2{fill:none;stroke:#7E7A72;stroke-width:1.6}

/* sizes per row (pairs for gloves + shins, a single roll for wraps) */
.r-bgv1{--h:clamp(90px,7.8vw,110px);--gap:10px;--mass:.8}
.r-sp5{--h:clamp(120px,10.6vw,150px);--gap:20px;--mass:.7}
.r-hw180{--h:clamp(48px,4.2vw,58px);--gap:6px;--mass:1.25}
@media (max-width:960px){
  .r-bgv1{--h:100px}.r-sp5{--h:132px}.r-hw180{--h:54px}
  .rail{padding:24px 22px 30px;justify-content:flex-start}
}

/* ---------- one hanging item ---------- */
.hg{position:relative;flex:none;width:calc(var(--h) * var(--ar));height:calc(var(--h) * (1 - var(--pt)) + 12px)}
.peg{position:absolute;top:-8px;width:9px;margin-left:-4.5px;height:calc(25px + var(--ex) * var(--h));z-index:3;
  border-radius:2px 2px 3px 3px;transform-origin:50% 8px;
  background:linear-gradient(90deg,#A97E50,#D9B98C 42%,#BE9363 62%,#9C7144);
  box-shadow:0 3px 3px -1px rgba(50,35,20,.35);
  opacity:0;transition:opacity .25s ease calc(var(--i) * 25ms + .1s)}
.peg::before{content:"";position:absolute;left:-2px;right:-2px;top:9px;height:4px;border-radius:2px;background:linear-gradient(#D2D2CE,#8E8E89)}
.hrow.in .peg{opacity:1}
.hg.taken .peg{animation:pegsnap .45s var(--ease)}
@keyframes pegsnap{30%{rotate:-11deg}65%{rotate:6deg}100%{rotate:0deg}}

.hg-btn{position:absolute;inset:0;display:block;border-radius:10px;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:pan-x pan-y}
.hg-btn:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.hg-swing{position:absolute;left:0;right:0;top:calc(12px - var(--pt) * var(--h));height:var(--h);display:block;
  transform-origin:50% calc(var(--pt) * var(--h));
  animation:sway var(--dur) ease-in-out var(--del) infinite alternate;
  transition:translate .55s cubic-bezier(.34,1.45,.64,1) calc(var(--i) * 25ms),opacity .25s ease calc(var(--i) * 25ms),scale .25s var(--ease) 0s}
.hrow.settled .hg-swing{transition-delay:0s,0s,0s}
.hrow:not(.in) .hg-swing{translate:0 -26px;opacity:0}
.hg-body{display:block;width:100%;height:100%;transform-origin:50% calc(var(--pt) * var(--h))}
.hg-body img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-select:none;user-select:none}
@keyframes sway{from{rotate:calc(var(--amp) * -1)}to{rotate:var(--amp)}}
.line-sec:not(.live) .hg-swing{animation-play-state:paused}
@media (hover:hover) and (pointer:fine){ .hg-btn:hover .hg-swing{scale:1.035} }

/* colour chip on hover / keyboard focus */
.hg-name{position:absolute;left:50%;bottom:-24px;translate:-50% 4px;white-space:nowrap;background:var(--ink);color:#fff;font-size:12px;font-weight:600;padding:4px 9px;border-radius:999px;opacity:0;transition:opacity .2s,translate .25s var(--ease);pointer-events:none;z-index:5}
@media (hover:hover) and (pointer:fine){ .hg-btn:hover .hg-name{opacity:1;translate:-50% 0} }
.hg-btn:focus-visible .hg-name{opacity:1;translate:-50% 0}

/* taken off the line → sits on the bench */
.hg.taken .hg-swing{translate:0 -28px;opacity:0;transition:translate .35s var(--ease),opacity .25s ease}
.hg.taken .hg-btn{cursor:default}
.hg.taken .hg-name{display:none}
.hg-empty{position:absolute;left:50%;top:30px;translate:-50% 0;font:600 10.5px/1.2 var(--body);letter-spacing:.12em;text-transform:uppercase;color:#8A847A;white-space:nowrap;opacity:0;transition:opacity .3s .25s;pointer-events:none}
.hg.taken .hg-empty{opacity:1}
.hg.lifting .hg-swing{translate:0 -16px;rotate:-3deg;transition:translate .2s var(--ease),rotate .2s var(--ease)}

/* fallback for a colour with no cut-out yet: product photo pegged like a print */
.hg-card{display:block;height:100%;background:#fff;padding:6% 6% 12%;box-shadow:0 6px 12px -6px rgba(40,30,20,.35)}
.hg-card img{width:100%;height:100%;object-fit:contain}

/* the flying copy while an item travels to the bench */
.fly{position:fixed;z-index:60;margin:0;pointer-events:none;object-fit:contain;will-change:transform,opacity;transform-origin:0 0}

/* ---------- bench (viewer + buy box) ---------- */
.bench{position:sticky;top:84px}
@media (max-width:960px){.bench{position:relative;top:auto;scroll-margin-top:84px}}
.bench-card{position:relative;background:var(--paper-hi);border-radius:6px;padding:14px 14px 22px;
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 22px 44px -18px rgba(50,38,24,.32),0 2px 6px rgba(50,38,24,.08)}
.bench-card::before,.bench-card::after{content:"";position:absolute;top:-12px;width:92px;height:26px;background:var(--tape);z-index:2;
  clip-path:polygon(2% 0,98% 0,100% 25%,97% 50%,100% 75%,98% 100%,2% 100%,0 75%,3% 50%,0 25%)}
.bench-card::before{left:-14px;transform:rotate(-24deg)}
.bench-card::after{right:-14px;transform:rotate(22deg)}
.bench-top{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:4px 4px 12px}
.bench-tag{font:600 12.5px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:#6F6A61}
.bench-tag b{color:var(--red);font-weight:700}
.bench-back{display:none;white-space:nowrap;font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
@media (max-width:960px){.bench-back{display:inline}}

.stage{position:relative;aspect-ratio:1/1;border-radius:4px;overflow:hidden;perspective:1100px;touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none;
  background:radial-gradient(120% 90% at 50% 28%,#fff 0%,#F7F4EF 52%,#ECE6DB 100%)}
.stage:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.stage.grabbing{cursor:grabbing}
.stage .floor{position:absolute;left:20%;right:20%;bottom:8.5%;height:18px;border-radius:50%;background:radial-gradient(closest-side,rgba(45,33,20,.26),rgba(45,33,20,0));will-change:transform}
.spin{position:absolute;inset:7% 9% 11%;transition:opacity .22s ease}
.face{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;will-change:transform,opacity;-webkit-user-select:none;user-select:none;pointer-events:none}
.stage.incoming .spin{opacity:0;transition:none}
.spin.drop{animation:drop .7s cubic-bezier(.34,1.5,.64,1)}
.spin.settle{animation:settle .35s var(--ease)}
@keyframes drop{from{translate:0 -46px;opacity:0}to{translate:0 0;opacity:1}}
@keyframes settle{0%{scale:1.035}55%{scale:.992}100%{scale:1}}
.stage-hint{position:absolute;left:50%;bottom:12px;translate:-50% 0;display:flex;align-items:center;gap:7px;background:rgba(23,23,26,.84);color:#fff;font-size:12.5px;font-weight:600;padding:6px 12px 6px 10px;border-radius:999px;transition:opacity .4s;white-space:nowrap}
.stage-hint svg{width:16px;height:16px}
.stage.touched .stage-hint{opacity:0}
.stage-note{position:absolute;right:10px;top:10px;font-size:11.5px;color:#7A756C;background:rgba(255,255,255,.7);padding:4px 8px;border-radius:999px}

/* angle ruler */
.dial{position:relative;height:20px;margin:12px 4px 0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
.dial-track{position:absolute;top:4px;left:-40px;right:-40px;height:12px;will-change:transform;
  background:repeating-linear-gradient(90deg,rgba(23,23,26,.32) 0 1px,transparent 1px 10px) 0 4px/100% 8px no-repeat,
             repeating-linear-gradient(90deg,rgba(23,23,26,.55) 0 1px,transparent 1px 40px) 0 0/100% 12px no-repeat}
.dial::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--red);border-radius:1px}
.turn{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:6px}
.turn button{width:38px;height:38px;border-radius:50%;border:1px solid rgba(23,23,26,.14);display:grid;place-items:center;font-size:20px;line-height:1;transition:border-color .15s,background .15s}
.turn button:hover{border-color:var(--ink);background:#fff}
.turn span{min-width:112px;text-align:center;font:600 12.5px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:#6F6A61}

.bench-info{padding:16px 6px 0}
.bench-info .row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.bench-info h3{font:700 23px/1.12 var(--body);letter-spacing:-.01em}
.bench-info .price{font-weight:600;font-size:19px;white-space:nowrap}
.bench-info .price s{color:var(--muted);font-weight:400;font-size:15px;margin-right:6px}
.bench-info .line{color:var(--muted);margin-top:4px}
.bench-info .opt{margin-top:14px}
.bench-info .acts{display:flex;gap:10px;margin-top:18px;align-items:center}
.bench-info .acts .btn{flex:1}
.bench-kit{display:block;margin-top:12px;font-size:14px;color:var(--muted)}
.bench-kit a{color:var(--ink);font-weight:600;text-underline-offset:3px}

/* reduced motion: everything still works, nothing sways or flies */
@media (prefers-reduced-motion:reduce){
  .hg-swing{animation:none}
  .hrow:not(.in) .hg-swing{translate:none;opacity:1}
  .rope{clip-path:none}
  .peg{opacity:1}
}

/* ==================================================================
   BENCH EXTRAS — sound, strike counter, impact ring, quantity, 3D
   ================================================================== */
.bench-tools{display:flex;align-items:center;gap:12px}
.snd-btn{display:inline-flex;align-items:center;gap:6px;font:600 12px/1 var(--body);color:#6F6A61;padding:6px 10px 6px 8px;border-radius:999px;border:1px solid rgba(23,23,26,.14);transition:background .15s,color .15s,border-color .15s}
.snd-btn svg{width:14px;height:14px}
.snd-btn[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.strike-count{position:absolute;left:12px;top:12px;font:800 italic 22px/1 var(--head);text-transform:uppercase;color:var(--red);opacity:0;translate:0 -6px;transition:opacity .2s,translate .25s var(--ease);pointer-events:none}
.strike-count.on{opacity:1;translate:0 0}
.hit-ring{position:absolute;left:50%;top:46%;width:46%;aspect-ratio:1;border-radius:50%;border:3px solid var(--red);box-shadow:0 0 0 8px rgba(208,32,46,.10);pointer-events:none;z-index:2}
.qty--big{margin-top:0}
.qty--big button{width:44px;height:44px;font-size:20px}
.qty--big span{min-width:30px;font-size:17px}
.mv{display:block;width:100%;height:100%;background:transparent;--poster-color:transparent}
.stage.is-model{cursor:auto}
.stage.is-model + .dial{visibility:hidden}
.stage.is-model .stage-hint #hint-verb{display:none}

/* mouse spotlight (shop) */
.line-sec::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .45s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,30%),rgba(255,251,238,.75),rgba(255,251,238,0) 70%)}
.line-sec.spot::before{opacity:1}

/* ==================================================================
   SITE-WIDE — paper, rope, pegs and tape everywhere
   ================================================================== */
:root{--bg:#F2EEE7;--panel:#E8E2D7;--line:#DCD4C6;--paper-hi:#FAF8F4;--tape:rgba(224,211,182,.86);--rope:#6B573D}
body{background-color:var(--bg);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .27 0 0 0 0 .2 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.top{background:rgba(242,238,231,.88)}
.stats div,.pov-chart,.pov-side div,.tab-panel,.tabs{background:var(--paper-hi)}
.rope-css{background:repeating-linear-gradient(90deg,var(--rope) 0 5px,#A48B66 5px 8px);height:3px;border-radius:2px;box-shadow:0 7px 5px -5px rgba(40,30,20,.25)}

/* hero: the photo hangs as a print; a pair of gloves hangs by its lace */
.hero-print{position:relative;padding-top:22px;min-width:0}
.hero-rope{position:absolute;top:10px;left:-28px;right:-44px;z-index:1}
.hero-print>.peg{opacity:1;top:0;--ex:0;--h:0px;z-index:4}
.hero-photo{background:var(--paper-hi);padding:12px 12px 46px;border-radius:3px;overflow:visible;rotate:1.1deg;
  box-shadow:0 30px 44px -26px rgba(40,30,20,.55),0 2px 6px rgba(40,30,20,.08);transition:transform .5s var(--ease)}
.hero-photo img{inset:12px 12px 46px;width:calc(100% - 24px);height:calc(100% - 58px);border-radius:2px}
.hero-photo .angles{left:12px;bottom:7px;background:transparent;padding:0}
@media (prefers-reduced-motion:no-preference){
  .hero-photo{opacity:1;transform:none;animation:printin .5s 0s var(--ease) backwards}
  @keyframes printin{from{opacity:0;transform:translateY(-34px) rotate(-3deg)}}
}
.hero-hang{position:absolute;top:10px;right:-14px;width:150px;z-index:5;pointer-events:none}
.hh-body{display:flex;flex-direction:column;align-items:center;transform-origin:50% 0;will-change:transform}
.hh-body::before{content:"";width:9px;height:24px;margin-top:-8px;position:relative;z-index:2;border-radius:2px 2px 3px 3px;
  background:linear-gradient(90deg,#A97E50,#D9B98C 42%,#BE9363 62%,#9C7144);box-shadow:0 3px 3px -1px rgba(50,35,20,.35)}
.hh-lace{width:3px;height:56px;margin-top:-10px;border-radius:2px;background:linear-gradient(90deg,#141416,#3B3B40,#141416)}
.hh-glove{width:150px;margin-top:-8px;pointer-events:auto;cursor:grab;touch-action:none;border-radius:12px}
.hh-glove:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.hh-glove img{width:100%;display:block;-webkit-user-select:none;user-select:none;pointer-events:none}
.hero-hang.grab .hh-glove{cursor:grabbing}
.hh-tag{pointer-events:auto;position:relative;margin-top:-6px;rotate:-4deg;background:var(--paper-hi);color:var(--ink);font:600 12px/1 var(--body);
  padding:7px 11px 7px 18px;border-radius:3px;box-shadow:0 8px 12px -8px rgba(0,0,0,.4);white-space:nowrap}
.hh-tag::before{content:"";position:absolute;left:6px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #8C857A}
.hh-tag:hover{background:var(--ink);color:#fff}
@media (max-width:860px){
  .hero-print{order:-1;padding-top:20px}
  .hero-rope{left:-30px;right:-30px}
  .hero-hang{width:100px;right:-4px}.hh-glove{width:100px}.hh-lace{height:26px}
}

/* trust strip: four tags hanging off a line */
.strip{border-block:0}
.strip .wrap{position:relative;padding-block:30px 22px}
.strip .wrap::before{content:"";position:absolute;left:22px;right:22px;top:14px;height:3px;border-radius:2px;
  background:repeating-linear-gradient(90deg,var(--rope) 0 5px,#A48B66 5px 8px)}
.strip span{position:relative;background:var(--paper-hi);padding:9px 14px 9px 12px;border-radius:3px;box-shadow:0 8px 14px -10px rgba(40,30,20,.5);
  transform-origin:50% -14px;--amp:1.1deg;animation:sway 4.6s ease-in-out infinite alternate}
.strip span:nth-child(2){--amp:-1.4deg;animation-duration:5.3s}
.strip span:nth-child(3){--amp:.9deg;animation-duration:4.1s}
.strip span:nth-child(4){--amp:-1deg;animation-duration:5.8s}
.strip span::before{content:"";position:absolute;left:50%;top:-14px;width:1.5px;height:14px;background:var(--rope)}
@media (max-width:640px){.strip span:nth-child(n+3)::before{display:none}}

/* the kit: pieces hang on a line inside the dark card */
.kit-pieces.hung{display:block;margin:22px -10px 0}
.kit-pieces.hung div{flex:none;aspect-ratio:auto;background:none;border-radius:0;overflow:visible}
.kit-pieces.hung img{padding:0}
.kit .kit-row .rail{padding:26px 12px 18px;justify-content:space-evenly}
.kit .rope .ra{stroke:#C9B48E}.kit .rope .rb{stroke:#7D6A4C}.kit .rope .rs{stroke:rgba(0,0,0,.4)}.kit .rope .hk{fill:#cfcac0}.kit .rope .hk2{stroke:#8f8a80}
.kit .hg-empty{display:none}
.kit .hg-name{background:#fff;color:var(--ink)}
.kit .hrow-body::before,.kit .hrow-body::after{display:none}

/* story + Isan: photos and videos become pegged / taped prints */
.story .story-vid{background:var(--paper-hi);padding:10px 10px 44px;border-radius:3px;rotate:-.8deg;overflow:visible;box-shadow:0 26px 40px -26px rgba(40,30,20,.55);transition:transform .5s var(--ease)}
.story-vid video{inset:10px 10px 44px;width:calc(100% - 20px);height:calc(100% - 54px);border-radius:2px}
.story .story-vid figcaption{padding:0 14px 13px;background:none;color:var(--ink);text-shadow:none;font:600 13.5px/1.2 var(--body)}
.story-vid .snd{top:18px;right:18px}
.story-vid::before,.isan-hero::before,.isan-hero::after{content:"";position:absolute;width:96px;height:26px;background:var(--tape);z-index:3;
  clip-path:polygon(2% 0,98% 0,100% 25%,97% 50%,100% 75%,98% 100%,2% 100%,0 75%,3% 50%,0 25%)}
.story-vid::before{top:-12px;left:50%;margin-left:-48px;rotate:-3deg}
.isan-hero{position:relative;overflow:visible;background:var(--paper-hi);padding:10px;border-radius:3px;box-shadow:0 26px 40px -28px rgba(40,30,20,.5);transition:transform .5s var(--ease)}
.isan-hero img{border-radius:2px}
.isan-hero::before{top:-12px;left:-18px;rotate:-28deg}
.isan-hero::after{top:-12px;right:-18px;rotate:26deg}
.reel{position:relative;padding-top:20px}
.reel::before{content:"";position:absolute;left:-10px;right:-10px;top:8px;height:3px;border-radius:2px;background:repeating-linear-gradient(90deg,var(--rope) 0 5px,#A48B66 5px 8px)}
.reel figure{background:var(--paper-hi);padding:8px 8px 40px;border-radius:3px;overflow:visible;transform-origin:50% 0;box-shadow:0 18px 28px -18px rgba(40,30,20,.55);transition:transform .5s var(--ease)}
.reel figure:nth-child(1){rotate:-1.2deg}.reel figure:nth-child(2){rotate:.9deg}.reel figure:nth-child(3){rotate:-.6deg}.reel figure:nth-child(4){rotate:1.3deg}
.reel figure::before{content:"";position:absolute;left:50%;top:-14px;width:9px;height:24px;margin-left:-4.5px;z-index:3;border-radius:2px 2px 3px 3px;
  background:linear-gradient(90deg,#A97E50,#D9B98C 42%,#BE9363 62%,#9C7144);box-shadow:0 3px 3px -1px rgba(50,35,20,.35)}
.reel video,.reel img{border-radius:2px}
.reel figcaption{padding:0 12px 12px;background:none;color:var(--ink);font:600 13px/1.25 var(--body)}
.reel .snd{top:16px;right:16px}
@media (max-width:860px){.reel::before{display:none}.reel{padding-top:16px}}
@media (prefers-reduced-motion:reduce){.strip span{animation:none}}

/* "you can scroll this line" hint — quiet, no looping motion */
.hrow-swipe{display:none;align-items:center;gap:6px;margin-left:auto;padding-right:6px;font:600 11.5px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:#7A746A;transition:opacity .4s}
.hrow-swipe i{font-style:normal;font-size:15px;letter-spacing:0}
.hrow.can-scroll .hrow-swipe{display:inline-flex}
.hrow.swiped .hrow-swipe{opacity:0}
@media (max-width:640px){.hrow-head{row-gap:6px}.hrow-swipe{margin-left:4px;padding-right:0}}

/* ==================================================================
   OPEN ON THE LINE — the tapped piece opens right where you are
   (replaces the separate bench column). Lines now use the full width.
   ================================================================== */
.line-grid{display:block}
.r-bgv1{--h:clamp(96px,9.6vw,138px)}
.r-sp5{--h:clamp(124px,12.4vw,178px)}
.r-hw180{--h:clamp(50px,5vw,70px)}
@media (max-width:960px){.r-bgv1{--h:100px}.r-sp5{--h:132px}.r-hw180{--h:54px}}
.hg.instant .hg-swing{transition:none!important}
html.focus-open{overflow:hidden}
.fly--top{z-index:95}

.focus{position:fixed;inset:0;z-index:85;display:grid;place-items:center;padding:28px 84px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.focus[hidden]{display:none}
.focus-scrim{position:fixed;inset:0;background:rgba(236,231,222,.62);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);opacity:0;transition:opacity .18s ease}
.focus.on .focus-scrim{opacity:1}
.focus .bench{position:relative;top:auto;z-index:1;width:min(1000px,100%);opacity:0;transform:translateY(16px);transition:opacity .16s ease,transform .26s var(--ease)}
.focus.on .bench{opacity:1;transform:none}
.focus .bench-card{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);grid-template-areas:"top top" "stage info" "dial info" "turn info";gap:0 30px;align-items:start;padding:16px 18px 22px}
.focus .bench-top{grid-area:top}
.focus .stage{grid-area:stage}
.focus .dial{grid-area:dial}
.focus .turn{grid-area:turn}
.focus .bench-info{grid-area:info;padding:6px 4px 0}
.bench-tag b{color:var(--red)}
.focus-x,.focus-nav{position:fixed;z-index:3;display:grid;place-items:center;border-radius:50%;opacity:0;transition:opacity .15s ease,background .15s,transform .15s}
.focus.on .focus-x,.focus.on .focus-nav{opacity:1}
.focus-x{top:calc(16px + env(safe-area-inset-top,0px));right:18px;width:48px;height:48px;background:var(--ink);color:#fff;font-size:28px;line-height:1}
.focus-x:hover{background:var(--red)}
.focus-nav{top:50%;margin-top:-26px;width:52px;height:52px;background:rgba(255,255,255,.94);color:var(--ink);font-size:28px;line-height:1;box-shadow:0 8px 20px -8px rgba(40,30,20,.35)}
.focus-nav:hover{transform:scale(1.06)}
#focus-prev{left:18px}#focus-next{right:18px}
.focus-x:focus-visible,.focus-nav:focus-visible{outline:2px solid var(--red);outline-offset:3px}
@media (max-width:760px){
  .focus{padding:70px 12px 28px;place-items:start center}
  .focus .bench-card{grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "stage" "dial" "turn" "info";padding:14px 12px 20px}
  .focus-nav{top:calc(70px + 50vw);width:44px;height:44px;margin-top:-22px;font-size:24px}
  #focus-prev{left:4px}#focus-next{right:4px}
  .focus-x{width:44px;height:44px;right:12px;top:calc(12px + env(safe-area-inset-top,0px))}
}
@media (prefers-reduced-motion:reduce){.focus .bench{transform:none}}