/* ---- final pass (2026-11-09): menu links land on the section itself, phone pages fit one screen,
   tighter desktop spacing, brighter reel, bigger brand field, identical featured tracks, smoother logo motion ---- */

/* 1. About / Portfolio / Listen / Contact land with the section at the very top of the screen,
      so nothing from the section above (e.g. "Show more") peeks in over its heading */
html body main>section{scroll-margin-top:-104px}
@media (max-width:900px){html body main>section{scroll-margin-top:-96px}}

/* 2. hero reel */
/*    brightness is set per clip in js/reel-framing.js (piano clips lifted most, everything else +7%), drawn on a canvas over the video.
      The rule below only covers the still photo shown before the reel starts. */
.hero .reel{filter:brightness(1.07)}
.hero .reel.reel-off{opacity:0!important}
@supports (animation-timeline:scroll()){.hero .reel-cv{animation:flReel linear both;animation-timeline:scroll(root);animation-range:0 90vh}}
@media (prefers-reduced-motion:reduce){.hero .reel-cv{animation:none!important}}

/* 3. header never blocks what is under it: only the wordmark, menu button and links take taps */
#hdr{pointer-events:none!important}
#hdr .menu,#hdr a,#hdr.open,#hdr.open nav{pointer-events:auto!important}

/* 4. My Boy + Inevitable: one fixed row size for both, whatever element each one is */
html body #listen .v2-fwrap .pt{-webkit-appearance:none;appearance:none;box-sizing:border-box!important;width:100%!important;height:96px!important;min-height:96px!important;max-height:96px!important;margin:0!important;background:none!important;border:0!important;border-radius:0!important;text-align:left!important;font:inherit;color:inherit;position:relative}
html body #listen .v2-fwrap .pt>img{flex:0 0 96px!important;min-width:96px!important;object-fit:cover!important;display:block!important}
html body #listen .v2-fwrap .pt .tt{flex:1 1 auto!important;min-width:0!important;display:block!important;text-align:left!important}
html body #listen .v2-fwrap .pt .tt b,html body #listen .v2-fwrap .pt .tt small{display:block!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
html body #listen .v2-fwrap .pt .tm{flex:0 0 auto!important;min-width:34px;text-align:right}
html body #listen .v2-fwrap .v2-start{margin:14px 0 0!important;padding:14px 0 0!important;border-top:1px solid rgba(242,239,233,.09)!important}
html body #listen .v2-fwrap .v2-feature{margin:0!important}

/* 5. brand field: bigger logos with room around them */
html body #credits .logos{gap:54px clamp(32px,4.5vw,64px)!important;max-width:1240px!important}
html body #credits .logos .lg2{height:84px!important}
html body #credits .logos .lg2 img{width:calc(var(--w) * 2.05)!important;max-height:calc(var(--h,50px) * 1.45)!important}
@media (max-width:620px){
  html body #credits .logos{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px 18px!important}
  html body #credits .logos .lg2{height:74px!important}
  html body #credits .logos .lg2 img{width:calc(var(--w) * 1.25)!important;max-width:92%!important;max-height:calc(var(--hm,36px) * 1.45)!important}
}

/* 6. logo motion: still until touched, then one smooth move */
/* flat 2D moves only: no 3D or pre-promoted layers, so hovering a logo never re-tints the black of the page */
.logos .lg2 img{will-change:auto!important;backface-visibility:visible;transform-style:flat}
.logos .lg2.lg-go[data-a="0"] img{animation:lg2Pop .7s cubic-bezier(.22,1,.36,1)!important}
.logos .lg2.lg-go[data-a="1"] img{animation:lg2Tilt .8s cubic-bezier(.22,1,.36,1)!important}
.logos .lg2.lg-go[data-a="2"] img{animation:lg2Hop .75s cubic-bezier(.22,1,.36,1)!important}
.logos .lg2.lg-go[data-a="3"] img{animation:lg2Turn .9s cubic-bezier(.45,0,.2,1)!important}
.logos .lg2.lg-go[data-a="4"] img{animation:lg2Squash .75s cubic-bezier(.22,1,.36,1)!important}
.logos .lg2.lg-go[data-a="5"] img{animation:lg2Sway .85s cubic-bezier(.22,1,.36,1)!important}
.logos .lg2.lg-go[data-a="6"] img{animation:lg2Rise .8s cubic-bezier(.22,1,.36,1)!important}
@keyframes lg2Pop{0%{transform:scale(1)}30%{transform:scale(1.16)}60%{transform:scale(.97)}100%{transform:scale(1)}}
@keyframes lg2Tilt{0%{transform:rotate(0)}25%{transform:rotate(-6deg) scale(1.06)}55%{transform:rotate(4deg) scale(1.03)}80%{transform:rotate(-1.5deg)}100%{transform:rotate(0)}}
@keyframes lg2Hop{0%{transform:translateY(0)}30%{transform:translateY(-10px) scale(1.05)}60%{transform:translateY(2px) scale(.99)}100%{transform:translateY(0)}}
@keyframes lg2Turn{0%{transform:scaleX(1)}25%{transform:scaleX(.08) scaleY(1.06)}50%{transform:scaleX(1) scaleY(1.06)}75%{transform:scaleX(.08) scaleY(1.03)}100%{transform:scaleX(1)}}
@keyframes lg2Squash{0%{transform:scale(1,1)}28%{transform:scale(1.14,.9)}58%{transform:scale(.96,1.06)}100%{transform:scale(1,1)}}
@keyframes lg2Sway{0%{transform:rotate(0)}30%{transform:rotate(-9deg) scale(1.05)}65%{transform:rotate(3deg) scale(1.02)}100%{transform:rotate(0)}}
@keyframes lg2Rise{0%{transform:translateY(0);opacity:1}35%{transform:translateY(-7px) scale(1.06);opacity:1}100%{transform:translateY(0);opacity:1}}
@media (prefers-reduced-motion:reduce){.logos .lg2.lg-go img{animation:none!important}}
/* no hover lift on touch screens, and no leftover colour state after a tap */
@media (hover:none){.lg2,.lg2:hover{transform:none!important;transition:none!important}}

/* 7. phones: each page fits one screen */
@media (max-width:620px){
  /* Portfolio (option A): the lead film full width with its title and a silent moving preview,
     then three films across with no text. "Show more" adds the rest in even rows of two. */
  html body #portfolio .pg{padding-top:92px!important;padding-bottom:22px!important;justify-content:flex-start!important}
  html body #portfolio h2.pp-lbl{margin-bottom:16px!important}
  html body #portfolio .pp>.pp-chips{margin-bottom:16px!important}
  html body #portfolio .pp .pp-panel.on{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;align-items:start}
  html body #portfolio .pp .pp-feat,html body #portfolio .pp .pp-grid{display:contents!important}
  /* the lead film */
  html body #portfolio .pp-feat>.pp-hero:first-child,html body #portfolio .pp-ads>.pf:first-child{grid-column:1/-1!important;margin:0 calc(-1 * var(--pad)) 8px!important;width:auto!important}
  html body #portfolio .pp-feat>.pp-hero:first-child .vw,html body #portfolio .pp-ads>.pf:first-child .th{aspect-ratio:16/9!important;border-radius:0!important;margin:0!important;position:relative;overflow:hidden}
  html body #portfolio .pp-feat>.pp-hero:first-child .pp-cap{padding:0 var(--pad)!important;margin-top:11px!important}
  html body #portfolio .pp-feat>.pp-hero:first-child .pp-cap b,html body #portfolio .pp-ads>.pf:first-child b{display:block!important;font:300 21px/1.2 var(--serif)!important;color:var(--fg)!important}
  html body #portfolio .pp-ads>.pf:first-child b{margin:11px var(--pad) 0!important}
  html body #portfolio .pp-ads>.pf:first-child .pp-sub{display:block!important;margin:5px var(--pad) 0!important}
  /* everything under it: small, even, no text */
  html body #portfolio .pp-feat>.pp-hero:nth-child(n+2),html body #portfolio .pp-grid>.pf{grid-column:span 2!important;margin:0!important;min-width:0}
  html body #portfolio .pp-cards>.pf.pp-x,html body #portfolio .pp-ads>.pf:nth-child(n+5){grid-column:span 3!important}
  html body #portfolio .pp-feat>.pp-hero:nth-child(n+2) .vw,html body #portfolio .pp-grid>.pf:not(:first-child) .th,html body #portfolio .pp-cards>.pf .th{aspect-ratio:16/9!important;border-radius:6px!important;margin:0!important;top:0!important;transform:none!important}
  html body #portfolio .pp-feat>.pp-hero:nth-child(n+2) .pp-cap,html body #portfolio .pp-cards>.pf b,html body #portfolio .pp-ads>.pf:not(:first-child) b,html body #portfolio .pp-ads>.pf:not(:first-child) .pp-sub{display:none!important}
  html body #portfolio .pp-feat>.pp-hero:nth-child(n+2) .pl{width:26px!important;height:26px!important;left:6px!important;bottom:6px!important}
  html body #portfolio .pp-feat>.pp-hero:nth-child(n+2) .pl svg{width:9px!important}
  html body #portfolio .pp-panel>.pp-feat>*,html body #portfolio .pp-panel>.pp-grid>*{order:0!important}
  html body #portfolio .pp-more{grid-column:1/-1!important;justify-self:center;margin:14px auto 0!important;order:100!important}
  /* silent moving preview on the lead film */
  #portfolio .pp-pv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;pointer-events:none;opacity:0;transition:opacity .5s}
  #portfolio .pp-pv.on{opacity:1}

  /* Listen */
  html body #listen:not(.hero){padding-top:92px!important;padding-bottom:26px!important}
  html body #listen>h2.lbl{margin-bottom:16px!important}
  html body #listen .v2-chips{margin-top:18px!important}

  /* Email list + Contact */
  html body #contact:not(.hero){padding-top:92px!important;padding-bottom:26px!important;text-align:center}
  html body #contact .nl{padding-bottom:18px!important;margin-bottom:18px!important}
  html body #contact .cf-h{margin-bottom:14px!important}
  html body #contact .cf{gap:12px!important;margin-top:0!important;text-align:left}
  html body #contact .cf-row{gap:12px!important}
  html body #contact .cf input{padding-top:11px!important;padding-bottom:11px!important}
  html body #contact .cf textarea{height:62px!important;min-height:62px!important;padding-top:11px!important;padding-bottom:11px!important}
  html body #contact .cf-foot{justify-content:center!important}
  html body #contact .em-line{margin-top:14px!important;justify-content:center!important;text-align:center!important}

  /* Credits */
  html body #credits:not(.hero){padding-top:92px!important}
}

/* 8. desktop: less empty space above each page's heading */
@media (min-width:901px){
  html body #listen,html body #contact,html body #credits:not(.hero){padding-top:118px!important;padding-bottom:64px!important;justify-content:flex-start!important;min-height:0!important}
  html body #portfolio .pg{padding-top:44px!important;padding-bottom:56px!important;justify-content:flex-start!important;min-height:0!important}
}

/* 9. Thinspace: once the book is dismissed, the album keeps its own close button */
.alb-panel.bk.nobook .alb-hd .alb-x{display:inline-block!important}

/* 10. page headings are links to their own page (same as the menu) */
main>section h2.lbl,main>section>.pg>h2{cursor:pointer}

/* 11. footer wordmark: back to top */
footer .fwm-top{-webkit-appearance:none;appearance:none;background:none;border:0;padding:6px 10px;margin:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;color:inherit;font:inherit}
footer .fwm-top .fwm{display:block;transition:opacity .25s,transform .25s cubic-bezier(.22,1,.36,1)}
footer .fwm-tip{font:300 9px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:#b9b4ab;opacity:0;transform:translateY(-3px);transition:opacity .25s,transform .25s}
@media (hover:hover) and (pointer:fine){
  footer .fwm-top:hover .fwm,footer .fwm-top:focus-visible .fwm{opacity:1!important;transform:translateY(-2px)}
  footer .fwm-top:hover .fwm-tip,footer .fwm-top:focus-visible .fwm-tip{opacity:1;transform:none}
}
@media (hover:none){footer .fwm-tip{display:none}}
footer .fwm-top:focus-visible{outline:1px solid rgba(242,239,233,.5);outline-offset:4px;border-radius:6px}

/* 12. Portfolio text: only the two lead films carry a title; the rest let their artwork speak */
@media (min-width:621px){
  html body #portfolio .pp-cards>.pf b,html body #portfolio .pp-ads>.pf:not(.pp-f) b{display:none!important}
}