/* Home (batch 1, screen 1): poster week navigation + the "out this week" new-arrivals bin. Loaded after styles.css; tokens only, flat. */

/* ---- poster: sized and ruled like the mockup, week navigation in the bottom rule ---- */
.psm{font-size:clamp(20px,2vw,26px)}
.pbig{font-size:clamp(72px,8.6vw,136px);line-height:.9;letter-spacing:-.07em;margin:2px 0 0 -4px;padding-bottom:.22em}
.pmeta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;border-top:3px solid var(--ink);padding-top:10px;font:600 13px Outfit,sans-serif}
.pmeta b{font-weight:800}
.pmeta .rated{margin-left:auto}
.wkn{display:flex;align-items:center;gap:6px}
.wkb{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--ink);background:none;font:700 16px Outfit,sans-serif;color:var(--ink);text-decoration:none;cursor:pointer;transition:background .15s,color .15s}
a.wkb:hover,a.wkb:focus-visible{background:var(--ink);color:var(--paper)}
.wkb:disabled{opacity:.3;cursor:default}
.wkjw{position:relative}
.wkj{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border:1.5px solid var(--ink);border-radius:var(--r-sm);background:none;font:700 13px Outfit,sans-serif;color:var(--ink);cursor:pointer;transition:background .15s,color .15s}
.wkj:hover,.wkj[aria-expanded=true]{background:var(--ink);color:var(--paper)}
.poster{overflow:visible;z-index:3}.poster::before,.poster::after{border-radius:inherit}   /* the jump menu drops below the poster, over the picks */
.wkm{position:absolute;left:0;top:calc(100% + 6px);z-index:8;max-height:min(320px,60vh);overflow-y:auto;min-width:172px;display:flex;flex-direction:column;padding:4px;background:var(--paper);border:1.5px solid var(--ink);border-radius:var(--r-sm);box-shadow:var(--offset-sm)}
.wkm[hidden]{display:none}
.wkm a{padding:8px 10px;border-radius:3px;font:700 13px Outfit,sans-serif;color:var(--ink);text-decoration:none;white-space:nowrap}
.wkm a:hover,.wkm a:focus-visible{background:var(--ink);color:var(--paper)}
.wkm a[aria-current]{box-shadow:inset 3px 0 0 var(--signal)}
@media(max-width:620px){
  .pmeta{flex-wrap:nowrap;gap:8px}.pmeta .rated{white-space:nowrap;font-size:12px}.wkj b{display:none}
}
@media(pointer:coarse){.wkb{width:44px;height:44px}.wkj{height:44px}.wkm a{padding:12px 10px}}

/* ---- out this week: the new-arrivals bin. Numbered dividers, tilted sleeves, a rubber-stamped release day ---- */
.k4.nw{overflow:visible;--pc:color-mix(in srgb,color-mix(in srgb,var(--dom,var(--gc,var(--paper))) 55%,var(--paper)) 9%,transparent);background-color:color-mix(in srgb,var(--dom,var(--gc,var(--paper))) 7%,var(--surface));column-gap:clamp(30px,2.6vw,40px);transition:transform .22s cubic-bezier(.3,1.3,.5,1),border-color .2s,background-color .5s}   /* column gap: room for the record sliding out of the sleeve, it never covers the text */
/* one printed pattern per card (a stable hash of the album id picks it), inked in the cover's colour, very faint */
.nw.pat-lines{background-image:repeating-linear-gradient(0deg,var(--pc) 0 1px,transparent 1px 9px)}
.nw.pat-dots{background-image:radial-gradient(circle,var(--pc) 1.2px,transparent 1.6px);background-size:12px 12px}
.nw.pat-grid{background-image:linear-gradient(var(--pc) 1px,transparent 1px),linear-gradient(90deg,var(--pc) 1px,transparent 1px);background-size:16px 16px}
.nw.pat-rings{background-image:repeating-radial-gradient(circle at 100% 0,var(--pc) 0 1px,transparent 1px 11px)}
.nw.pat-diag{background-image:repeating-linear-gradient(-45deg,var(--pc) 0 1px,transparent 1px 8px)}
.nw.pat-cross{background-image:repeating-linear-gradient(45deg,var(--pc) 0 1px,transparent 1px 10px),repeating-linear-gradient(-45deg,var(--pc) 0 1px,transparent 1px 10px)}
.k4.nw:nth-child(9n+1){--tilt:-1.6deg}.k4.nw:nth-child(9n+2){--tilt:1.2deg}.k4.nw:nth-child(9n+3){--tilt:-.8deg}.k4.nw:nth-child(9n+4){--tilt:1.5deg}.k4.nw:nth-child(9n+5){--tilt:-1.3deg}
.k4.nw:nth-child(9n+6){--tilt:.9deg}.k4.nw:nth-child(9n+7){--tilt:-1.1deg}.k4.nw:nth-child(9n+8){--tilt:1.4deg}.k4.nw:nth-child(9n+9){--tilt:-.7deg}
.k4.nw .cw{align-self:center;rotate:var(--tilt,0deg);box-shadow:var(--offset-sm);outline:3px solid var(--paper);outline-offset:-3px;border-radius:3px;transition:rotate .3s cubic-bezier(.3,1.3,.5,1)}
.k4.nw:hover .cw{rotate:0deg}
.k4.nw .k4-x{position:relative}
.k4.nw .k4-st{align-self:flex-start;margin:2px 0 4px;font:700 11px/1 Outfit,sans-serif;letter-spacing:.06em;color:var(--gc,var(--text-muted));border:1.5px solid var(--gc,var(--text-muted));border-radius:3px;padding:4px 6px 3px;rotate:-3deg;opacity:.92}
/* your rating: a paper ticket taped to the card, the number big in signal (you) */
.yrt{position:relative;display:flex;flex-direction:column;align-items:center;color:var(--ink);padding:9px 12px 7px;border-radius:4px;rotate:3deg;box-shadow:var(--offset-sm);transition:rotate .25s cubic-bezier(.3,1.3,.5,1)}
.yrt .tape{left:50%;top:-8px;width:34px;height:13px;margin-left:-17px;rotate:-4deg}
.yrt small{font:700 10px/1 Outfit,sans-serif;letter-spacing:.02em;color:#5e5a4c}
.yrt b{font:900 26px/1 Unbounded,sans-serif;letter-spacing:-.05em;color:var(--signal);margin-top:3px;text-shadow:1.5px 1.5px 0 var(--ink)}   /* painted in its tier colour; a flat ink offset keeps light tiers readable on paper (tierCol); classic = the .holo shimmer clipped to the digits */
.k4.nw:hover .yrt{rotate:0deg}
.k4.nw>.cw,.k4.nw .yrt{z-index:6}   /* above the card's paper grain: cover and ticket stay clean */
@media(max-width:620px){.yrt b{font-size:22px}.k4.nw{column-gap:26px}}
@media(prefers-reduced-motion:reduce){.k4.nw,.k4.nw .cw,.yrt,.wkb,.wkj{transition:none}}

.yrt b.holo,.pk-yv.holo{-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;-webkit-text-fill-color:transparent;-webkit-text-stroke:.6px var(--ink);filter:drop-shadow(1.5px 1.5px 0 var(--ink))}   /* .holo's shorthand resets the clip: re-assert it */
.pk-yv.holo{filter:url(#inkbleed-sm) drop-shadow(1.5px 1.5px 0 var(--ink))}
.pk-yv{text-shadow:1.5px 1.5px 0 var(--ink)}.yrt b.holo,.pk-yv.holo{text-shadow:none}