/* VHS filmography shelf, re-skinned as the course shelf (attachment A). All geometry scales from --H. */
.shelf-root{position:fixed;inset:0;overflow:hidden}
.s-bar{position:fixed;left:0;right:0;top:0;height:84px;padding:0 32px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;z-index:30}
.s-bar .l{display:flex;gap:8px;justify-self:start}.s-bar .r{justify-self:end}
.s-bar a,.s-bar button{color:var(--ink)}

/* decade -> module tabs */
.s-tabs{position:fixed;left:50%;transform:translateX(-50%);top:calc(50% - var(--H)/2 - 86px);display:flex;z-index:30;white-space:nowrap}
.s-tabs button{position:relative;z-index:1;height:23px;padding:0 11px;margin-left:-1px;border:1px solid var(--rule);white-space:nowrap;
  transition:color .45s var(--ease)}
.s-tabs button:first-of-type{margin-left:0}
.s-tabs button.on{color:#fff}
.s-tabs .ind{position:absolute;left:0;top:0;height:23px;background:var(--cobalt);width:0;transition:width .6s var(--ease),transform .6s var(--ease);z-index:0}

/* 3D stage */
.s-shelf{position:fixed;left:0;right:0;top:calc(50% - var(--H)/2 - 40px);height:calc(var(--H) + 80px);perspective:2200px;perspective-origin:50% 50%;touch-action:pan-y;z-index:10}
.s-stage{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d}
.tape{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;will-change:transform}
.face{position:absolute;height:var(--Hp);top:calc(var(--Hp)/-2);backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:2px;
  background-size:100% 100%;background-repeat:no-repeat;background-color:transparent}
.face::after{content:"";position:absolute;inset:0;background:#000;opacity:var(--shade,0);border-radius:2px;pointer-events:none}
.sp{width:var(--ws);left:calc(var(--ws)/-2);transform:translateZ(calc(var(--d)/2))}
.cv{width:var(--d);left:calc(var(--d)/-2);transform:rotateY(90deg) translateZ(calc(var(--ws)/2));box-shadow:0 30px 60px -28px rgba(20,16,10,.55)}
.tape img{display:none}

/* play ring */
.s-play{position:fixed;width:42px;height:42px;margin:-21px 0 0 -21px;border:1px solid var(--cobalt);border-radius:50%;color:var(--cobalt);background:rgba(237,235,230,.75);
  display:grid;place-items:center;z-index:31;transform:scale(0)}
.s-play::before{content:"";border-left:12px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:4px}

/* caption */
.s-cap{position:fixed;left:50%;transform:translateX(-50%);top:calc(50% + var(--H)/2 + 30px);display:flex;flex-direction:column;align-items:center;gap:9px;pointer-events:none;z-index:20}
.s-cap .m{overflow:hidden;position:relative;width:min(92vw,760px);text-align:center}
.s-cap .m>span{display:block}
.s-cap .m>span:not(:last-child){position:absolute;left:0;right:0;top:0}
.s-cap .t{font:400 31px/1.12 var(--cn);letter-spacing:-.01em;padding:2px 0}
.s-cap .t span{font-family:"Noto Sans SC",var(--cn)}
.s-cap .sb{color:var(--cobalt);font-weight:500}
.s-cap .yr{font:500 11px/1.4 var(--sans);letter-spacing:.08em;font-family:var(--cn)}
@media (max-width:767px){.s-cap .t{font-size:24px}}

/* arrows */
.s-arrow{position:fixed;top:calc(50% + var(--H)/2 + 40px);width:44px;height:44px;display:grid;place-items:center;z-index:31}
.s-arrow.l{left:20px}.s-arrow.r{right:20px}
.s-arrow svg{width:18px;height:10px;fill:none;stroke:currentColor;stroke-width:1.2}
@media (max-width:767px){.s-arrow.l{left:6px}.s-arrow.r{right:6px}}

.s-foot{position:fixed;left:32px;right:32px;bottom:26px;display:flex;justify-content:space-between;z-index:30}
.s-foot a{text-decoration:none}
@media (max-width:767px){.s-bar .r{display:none}.s-foot{left:16px;right:16px;bottom:18px}.s-tabs{top:calc(50% - var(--H)/2 - 70px)}.s-tabs button{padding:0 7px;font-size:9px}.s-bar{height:64px;padding:0 16px}}

/* custom cursor */
.s-cursor{position:fixed;left:0;top:0;width:58px;height:58px;margin:-29px 0 0 -29px;z-index:100;pointer-events:none;display:none;will-change:transform}
@media (pointer:fine){.s-cursor{display:block}}
.s-cursor .ring{position:absolute;inset:0;border:1.5px solid var(--ink);border-radius:50%;background:transparent;transition:transform .5s var(--ease),background-color .4s var(--ease),border-color .4s var(--ease)}
.s-cursor .dot{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--ink);border-radius:50%;transition:transform .4s var(--ease)}
.s-cursor .txt{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:#fff;font:600 10px/1.25 var(--sans);letter-spacing:.1em;transform:scale(0);transition:transform .45s var(--ease)}
.s-cursor.spine .ring{transform:scale(.72)}
.s-cursor.btn .ring{transform:scale(.55)}.s-cursor.btn .dot{transform:scale(0)}
.s-cursor.open .ring{transform:scale(1.75);background:var(--cobalt);border-color:var(--cobalt)}
.s-cursor.open .dot{transform:scale(0)}.s-cursor.open .txt{transform:scale(1)}
.s-cursor.hide{display:none!important}

/* detail sheet */
.s-detail{position:fixed;inset:0;z-index:60;background:var(--sheet);visibility:hidden;display:grid;grid-template-columns:1fr 1fr;gap:4vw;padding:110px 6vw 56px 7vw;overflow:hidden}
.s-detail .dtop{position:absolute;left:0;right:0;top:0;height:84px;display:grid;place-items:center}
.s-detail .dclose{position:absolute;left:32px;top:31px}
.s-detail .dleft{display:flex;flex-direction:column;justify-content:center;gap:18px;max-width:520px;min-width:0}
.dl{overflow:hidden}.dl>*{display:block}
.d-sub{color:var(--cobalt)}
.d-title{font:400 clamp(40px,4.6vw,72px)/1.08 var(--cn);letter-spacing:-.02em;margin:0;padding:.04em 0;text-wrap:balance}
.d-meta{color:var(--muted)}
.d-syn{font:400 17px/1.55 var(--cn);max-width:42ch;margin:0}
.d-pts{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px 14px;font:400 14px/1.6 var(--cn);color:var(--ink)}
.d-pts li::before{content:"· ";color:var(--cobalt)}
.d-credit{font:italic 400 15px/1.5 var(--serif);color:var(--muted);margin:0}
.d-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.dbtn{height:44px;padding:0 20px;border:1px solid var(--cobalt);color:var(--cobalt);display:inline-flex;align-items:center;white-space:nowrap;transition:background .35s var(--ease),color .35s var(--ease)}
.dbtn:hover{background:var(--cobalt);color:#fff}
.dbtn.fill{background:var(--cobalt);color:#fff}.dbtn.fill:hover{background:var(--ink);border-color:var(--ink)}
.dright{display:grid;place-items:center;min-height:0}
.dright svg{height:min(100%,78vh);aspect-ratio:474/900;width:auto;max-width:100%}
@media (max-width:767px){
  .s-detail{grid-template-columns:1fr;gap:24px;padding:84px 22px 40px;overflow-y:auto;align-content:start}
  .s-detail .dtop{height:64px}.s-detail .dclose{left:16px;top:21px}
  .dright{order:-1}.dright svg{height:46svh}
  .d-title{font-size:42px}.d-syn{font-size:16px}
}
.s-hint{position:fixed;left:50%;transform:translateX(-50%);bottom:64px;z-index:25;pointer-events:none;color:var(--muted)}
@media (max-width:767px){.s-hint{display:none}}

/* QR code to the platform address (shelf home, desktop only, hidden on short viewports so it never meets the arrows) */
.s-qr{position:fixed;right:32px;bottom:58px;z-index:30;display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 8px 6px;background:rgba(237,235,230,.9);border:1px solid var(--rule);text-decoration:none;color:var(--ink)}
.s-qr img{display:block;width:72px;height:72px}
@media (max-width:1100px),(max-height:780px){.s-qr{display:none}}