/* v61: compact product tiles on small screens (the fuller "what you walk away with" list lives on the flip side) */
@media (max-width:720px){
  .bento .product .pf{padding:14px 14px 14px!important;gap:6px!important}
  .bento .product .product-art{aspect-ratio:16/9!important}
  .bento .product .ptype{font-size:10px!important;letter-spacing:.14em!important}
  .bento .product .product-meta{display:flex!important;align-items:center;justify-content:space-between;gap:10px;flex-wrap:nowrap;margin:2px 0 0!important}
  .bento .product .product-meta>span{font-size:12px!important;line-height:1.3;flex:1 1 auto;min-width:0}
  .bento .product .product-meta>strong{flex:none}
  .bento .product .product-meta a,.bento .product .product-meta .is-soon{font-size:12px!important;padding:8px 14px!important;letter-spacing:.08em!important}
  .bento .product .pf>h3{font-size:19px!important;line-height:1.15!important;margin:2px 0 0!important}
  .bento .product .pf>p{font-size:14px!important;line-height:1.4!important;margin:0!important;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
  .bento .product .wy{display:none!important}
  .bento .product .pb{position:absolute!important;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:18px 16px 16px!important;gap:8px!important}
  .bento .product .pb li,.bento .product .pb p{font-size:13px!important;line-height:1.35!important}
}

/* v61b: "next masterpiece." never splits (no widow), and the line lands on its period */
.mp-say h2 em .mp-nw{white-space:nowrap}
.mp-say h2 .mp-per{position:relative;display:inline-block}
html.sl-on .mp-say:not(.per-on) .mp-per{opacity:.35}
.mp-say .mp-per{transition:opacity .5s ease}
.mp-say.per-on .mp-per::after{content:"";position:absolute;left:46%;top:80%;width:.34em;height:.34em;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,#fffbe2,#f7dc7e 55%,transparent 72%);box-shadow:0 0 .5em .12em rgba(255,214,120,.8);animation:mpPer 1.6s cubic-bezier(.2,.7,.2,1) both;-webkit-text-fill-color:initial}
@keyframes mpPer{0%{scale:.2;opacity:0}30%{scale:1.5;opacity:1}100%{scale:1;opacity:.9}}

/* v61c: the full-guide bar blooms out from the point where the gold line touches it */
@property --gr{syntax:"<percentage>";inherits:false;initial-value:0%}
@media(min-width:761px){
  html.sl-on #gcolH{--tx:50%;--ty:0px;opacity:0;filter:blur(10px);-webkit-mask-image:radial-gradient(circle at var(--tx) var(--ty),#000 var(--gr),transparent calc(var(--gr) + 22%));mask-image:radial-gradient(circle at var(--tx) var(--ty),#000 var(--gr),transparent calc(var(--gr) + 22%));-webkit-mask-clip:no-clip;mask-clip:no-clip;transition:opacity .3s ease}
  html.sl-on #gcolH.gcol-on{opacity:1;filter:none;animation:gcolReveal 1.5s cubic-bezier(.2,.7,.2,1) both}
}
@keyframes gcolReveal{0%{--gr:0%;filter:blur(8px) brightness(1.6)}100%{--gr:140%;filter:none}}
@media(prefers-reduced-motion:reduce){html.sl-on #gcolH{opacity:1!important;filter:none!important;-webkit-mask-image:none!important;mask-image:none!important;animation:none!important}}

/* v61d: no scroll snapping at all: the glass layers scrub continuously and the page never grabs or traps the scroll */
html.bbb-stops{scroll-snap-type:none!important}
.bbb-stop{scroll-snap-stop:normal!important}

/* v61e: the timeline rail finally draws. --p is a registered non-inheriting property, so the gold fill and head never saw it; they read --frp instead */
.fr-l::after{height:calc(var(--frp,0)*100%)}
.fr-d{top:calc(var(--frp,0)*100% - 7px);opacity:calc(1 - clamp(0,(var(--frp,0) - .985)*70,1))}

/* v61f: timeline rail is only a short fading tail behind its glowing head (no long line left behind), and the first-beat headline sits lower, clear of the menu bar */
.fr-l{background:none}
.fr-l::after{top:max(0px,calc(var(--frp,0)*100% - 190px));height:min(190px,calc(var(--frp,0)*100%));background:linear-gradient(180deg,rgba(255,233,168,0),#ffe9a8);box-shadow:none;filter:drop-shadow(0 0 6px rgba(255,214,120,.6))}
html.anim .s-flow .beat.k0 .bt{padding-top:clamp(36px,9svh,96px)}