/* ---- polish pass (2026-11-10): rounded forms + portrait, header click-through, tap-to-play cue, logo motion, photo viewer ---- */

/* contact + email list: slightly rounded */
.cf input,.cf textarea,.cf button,.nl-f input,.nl-f button{border-radius:10px}

/* portrait: slightly rounded */
.about figure img{border-radius:14px}

/* mini menus (Trailers / Brand films / Featured / Albums ...) never settle under the fixed header; anything that ends up there stays clickable */
html{scroll-padding-top:104px}
@media (max-width:900px){html{scroll-padding-top:96px}}
.v2-chips,.pp,.v2-listen{scroll-margin-top:104px}
#hdr{pointer-events:none}
#hdr .menu,#hdr a,#hdr nav,#hdr.open{pointer-events:auto}

/* "TAP TO PLAY": grey, softly glowing */
.pong-hint{color:#9a9e9b!important;opacity:1!important;letter-spacing:.14em;animation:tapGlow 2.6s ease-in-out infinite!important;text-shadow:0 0 6px rgba(190,196,192,.55),0 0 16px rgba(190,196,192,.3)}
@keyframes tapGlow{0%,100%{opacity:.55;text-shadow:0 0 4px rgba(190,196,192,.35),0 0 10px rgba(190,196,192,.15)}50%{opacity:1;text-shadow:0 0 8px rgba(210,215,212,.8),0 0 22px rgba(190,196,192,.5)}}
@media (prefers-reduced-motion:reduce){.pong-hint{animation:none!important;opacity:.85!important}}

/* brand logos: a brief motion each (entrance once, again on hover / tap) */
.logos .lg2 img{transform-origin:50% 60%;backface-visibility:visible}
.logos .lg2.lg-go[data-a="0"] img{animation:lgPop .75s cubic-bezier(.3,1.5,.5,1)}
.logos .lg2.lg-go[data-a="1"] img{animation:lgWobble .8s ease-in-out}
.logos .lg2.lg-go[data-a="2"] img{animation:lgDrop .8s cubic-bezier(.3,1.4,.5,1)}
.logos .lg2.lg-go[data-a="3"] img{animation:lgFlip .85s ease-in-out}
.logos .lg2.lg-go[data-a="4"] img{animation:lgStretch .8s cubic-bezier(.3,1.6,.5,1)}
.logos .lg2.lg-go[data-a="5"] img{animation:lgSwing .85s ease-out}
.logos .lg2.lg-go[data-a="6"] img{animation:lgGlide .9s ease-out}
@keyframes lgGlide{0%{transform:translateY(6px);opacity:.35}100%{transform:translateY(0);opacity:1}}
@keyframes lgPop{0%{transform:scale(1)}35%{transform:scale(1.22)}65%{transform:scale(.94)}100%{transform:scale(1)}}
@keyframes lgWobble{0%,100%{transform:rotate(0)}20%{transform:rotate(-7deg)}45%{transform:rotate(6deg)}70%{transform:rotate(-3deg)}}
@keyframes lgDrop{0%{transform:translateY(-14px)}45%{transform:translateY(0)}65%{transform:translateY(-5px)}100%{transform:translateY(0)}}
@keyframes lgFlip{0%{transform:perspective(500px) rotateY(0)}100%{transform:perspective(500px) rotateY(360deg)}}
@keyframes lgStretch{0%{transform:scale(1,1)}30%{transform:scale(1.18,.86)}60%{transform:scale(.92,1.1)}100%{transform:scale(1,1)}}
@keyframes lgSwing{0%{transform:rotate(-14deg) scale(.92)}60%{transform:rotate(4deg) scale(1.06)}100%{transform:rotate(0) scale(1)}}
@media (prefers-reduced-motion:reduce){.logos .lg2.lg-go img{animation:none!important}}

/* photo viewer arrows */
.lb .fr.ph{position:relative}
.ph-nav{position:fixed;top:50%;transform:translateY(-50%);width:54px;height:54px;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:rgba(10,10,10,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;font:300 34px/1 Poppins,sans-serif;display:grid;place-items:center;padding:0 0 4px;cursor:pointer;z-index:2;transition:background .2s,border-color .2s}
.ph-nav:hover,.ph-nav:focus-visible{background:rgba(40,40,40,.8);border-color:rgba(255,255,255,.6);outline:none}
.ph-nav.prev{left:clamp(8px,2.5vw,36px)}.ph-nav.next{right:clamp(8px,2.5vw,36px)}
.ph-count{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);font:300 11px/1 Poppins,sans-serif;letter-spacing:.3em;color:#bdb9b0}
@media (max-width:620px){.ph-nav{width:44px;height:44px;font-size:28px}}

/* Thinspace book: an X right on the book block to dismiss it */
.bk-in{position:relative}
.bk-x{position:absolute;top:2px;right:0;width:38px;height:38px;border-radius:50%;border:1px solid rgba(242,239,233,.35);background:rgba(10,10,10,.55);color:#e6e2d9;font:300 22px/1 var(--sans);display:grid;place-items:center;padding:0 0 2px;cursor:pointer;z-index:2;transition:background .2s,border-color .2s}
.bk-x:hover,.bk-x:focus-visible{background:rgba(40,40,40,.85);border-color:rgba(242,239,233,.7);outline:none}
.bk-tx{padding-right:46px}
@media (max-width:620px){.bk-x{top:-2px;width:34px;height:34px}}
.alb-panel.bk .alb-hd .alb-x{display:none}

/* subtle rounding on photos and artwork, site-wide */
.about figure img{border-radius:10px}
.gph,.gph img,.lb .fr.ph img{border-radius:6px}
.card img,.pf .th,.vw,.vw video,.feat .vw{border-radius:6px;overflow:hidden}
.alb .cv,.alb .cv img,.alb-hd img{border-radius:6px}
.lb .fr video,.lb .fr .vf{border-radius:6px;overflow:hidden}

/* CLICK / TAP TO PLAY hint under Brands: big enough to read, always fully visible */
html body .pong-hint,html.re #credits .pong-hint{display:block!important;margin:22px auto 0!important;text-align:center!important;font-size:clamp(11px,1.3vw,14px)!important;letter-spacing:.2em!important;color:#b9bdba!important;opacity:1!important;visibility:visible!important;text-shadow:0 0 8px rgba(200,206,202,.7),0 0 22px rgba(200,206,202,.4)}

/* My Boy + Inevitable: identical size and layout, phone and desktop */
html body #listen .v2-fwrap .pt,html body .v2-fwrap .v2-feature.pt,html body .v2-fwrap .v2-start .pt{display:flex!important;align-items:center!important;gap:14px!important;padding:0!important;border-top:0!important}
html body #listen .v2-fwrap .pt>img,html body .v2-fwrap .v2-feature.pt>img,html body .v2-fwrap .v2-start .pt>img{width:96px!important;height:96px!important;border-radius:8px!important}
html body #listen .v2-fwrap .pt .pp,html body .v2-fwrap .pt .pp{width:96px!important;height:96px!important;top:0!important;border-radius:8px}
html body #listen .v2-fwrap .pt .tt b,html body .v2-fwrap .v2-feature .tt b,html body .v2-fwrap .v2-start .tt b{font:300 22px/1.2 var(--serif)!important}
html body #listen .v2-fwrap .pt .tt small,html body .v2-fwrap .v2-start .tt small{margin-top:4px!important;font-size:12px!important}
html body .v2-fwrap .v2-start{margin-top:12px}

/* hint sits right under the "Brands" label, light yellow, gently pulsing */
html body .pong-hint,html.re #credits .pong-hint{margin:6px 0 16px!important;text-align:center!important;color:#fff0b3!important;font-size:clamp(11px,1.2vw,13px)!important;letter-spacing:.22em!important;animation:hintPulse 1.8s ease-in-out infinite!important;text-shadow:0 0 8px rgba(255,236,160,.75),0 0 20px rgba(255,236,160,.4)}
@keyframes hintPulse{0%,100%{opacity:.45;text-shadow:0 0 4px rgba(255,236,160,.3)}50%{opacity:1;text-shadow:0 0 10px rgba(255,236,160,.9),0 0 26px rgba(255,236,160,.55)}}
@media (prefers-reduced-motion:reduce){html body .pong-hint{animation:none!important;opacity:1!important}}

/* Brands: slightly larger logos, more spread out */
html body #credits .logos{gap:46px clamp(28px,4vw,56px)!important;max-width:1120px!important;width:100%!important;margin-left:auto!important;margin-right:auto!important}
html body #credits .logos .lg2{height:68px!important}
html body #credits .logos .lg2 img{width:calc(var(--w) * 1.7)!important;max-height:calc(var(--h,50px) * 1.2)!important}
@media (max-width:620px){html body #credits .logos{gap:34px 22px!important}html body #credits .logos .lg2{height:52px!important}html body #credits .logos .lg2 img{width:calc(var(--w) * 1.2)!important;max-height:calc(var(--hm,36px) * 1.2)!important}}

/* logo motion never shifts layout or scroll position */
.logos,.logos .lg2{overflow-anchor:none}
.logos .lg2{contain:layout}
@media (hover:none){.lg2:hover,.lg2:nth-child(even):hover{transform:none!important}}