/* The original artwork is the visual system; sections now follow its natural height. */
html.portfolio-homepage{background:#fff;scroll-snap-type:none;scroll-padding-top:16px;overflow-x:hidden}
.homepage{overflow-x:hidden;background:#fff}
.homepage .screen{display:block;min-height:0!important;height:auto;padding:0;scroll-snap-align:none}
.homepage .artframe{width:100%;aspect-ratio:16/9;min-height:0;container-type:inline-size}
.homepage .cover{background:#fff}
.homepage .cover-art{border-bottom:1px solid #afc6df35}
.homepage .resume{padding:20px 0 0;background:#fff}
.homepage .resume:not(:target){display:none}
.homepage .desktop-resume,.homepage .resume-power{display:block}
.homepage .mobile-resume{display:none}
.homepage .resume>.scroll-cue{display:none}
.homepage .scroll-cue{bottom:12px;font-size:14px;padding:6px 12px;z-index:5}
.homepage .hotspot:before{content:'';position:absolute;inset:-9px}
.homepage .catalog{padding:30px 0 28px;background:#fff;overflow-anchor:none}
.homepage .catalog-art{aspect-ratio:auto;padding:0;width:100%;overflow:visible;background:#fff}
.homepage .catalog-art:before{display:none}
.homepage .catalog h2{position:relative;inset:auto;margin:0 4.55% 8px;font-size:clamp(28px,3.2vw,46px);line-height:1.3}
.homepage .albums{--card-width:clamp(280px,29vw,420px);position:relative;inset:auto;width:100%;height:auto;min-height:0;display:flex;padding:46px 4.55% 110px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:none;scroll-padding:0;scroll-behavior:auto;touch-action:pan-x pan-y;cursor:grab;mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.homepage .album-page{display:flex;flex:0 0 auto;grid-template:none;gap:0;padding:0;margin-right:0;scroll-snap-align:none}
.homepage .record{flex:0 0 var(--card-width);width:var(--card-width);margin-right:calc(var(--card-width)*-.32);aspect-ratio:418/360;align-self:auto;cursor:pointer;scroll-snap-align:none;transform-origin:50% 125%;transform:translate3d(0,var(--fan-y,0px),0) rotate(var(--fan-angle,0deg)) scale(var(--fan-scale,1));transition:filter .22s;will-change:transform}
.homepage .record:hover,.homepage .record:focus-visible,.homepage .albums.is-dragging .record{transform:translate3d(0,var(--fan-y,0px),0) rotate(var(--fan-angle,0deg)) scale(var(--fan-scale,1))}
.homepage .record.is-current{filter:drop-shadow(0 10px 11px #48669724)}
.homepage .record:active{filter:brightness(1.04) drop-shadow(0 5px 6px #48669730)}
.homepage .record-title{font-size:5.45cqw}
.homepage .record-disc{display:block;aspect-ratio:1;border-radius:50%;overflow:hidden;clip-path:circle(50% at 50% 50%);-webkit-mask-image:-webkit-radial-gradient(white,black);isolation:isolate;transform:translateZ(0)}
.homepage .record-disc img{width:100%;height:100%;max-width:none;object-fit:cover;aspect-ratio:1;border-radius:50%;clip-path:circle(50% at 50% 50%);backface-visibility:hidden}
.homepage .catalog-controls{position:relative;inset:auto;display:flex;gap:16px;flex-wrap:nowrap;margin:0 4.55%;padding:12px 0 0;border-top:1px solid #9fb7d23d}
.homepage .track-control{order:0;flex:1;flex-basis:auto}
.homepage .album-button{background:#fff;order:0;flex:0 0 auto;padding:10px 14px;font-size:14px}
.homepage .selection-label{font-size:14px}
.homepage .directory-hint{font-size:12px;letter-spacing:.05em}
.homepage .touch-hint{display:none}
.homepage .transition-curtain,.homepage .page-dots span{background:#fff}
.homepage .page-dots{right:8px}
.homepage .page-dots a{width:24px;height:24px}
@media(max-width:800px){
 .homepage .resume{padding-top:12px}
 .homepage .catalog{padding-top:22px}
 .homepage .catalog h2{margin:0 5% 4px;font-size:28px}
 .homepage .album-page{gap:0;margin-right:0}
 .homepage .albums{--card-width:min(66vw,330px);padding:38px 5% 72px}
 .homepage .catalog-controls{margin:0 5%;gap:10px;flex-wrap:wrap}
 .homepage .track-control{flex:1 0 100%;order:-1}
 .homepage .album-button{flex:1;padding:9px 10px;min-height:40px}
 .homepage .scroll-cue{font-size:12px;padding:4px 9px;bottom:7px;gap:7px}
 .homepage .scroll-cue i{height:12px}
 .homepage .page-dots{right:1px;gap:5px}
 .homepage .tooltip{display:none}
 .homepage .wheel-hint{display:none}
 .homepage .touch-hint{display:inline}
}
@media(prefers-reduced-motion:reduce){.homepage .record-disc img{transform:none!important}.homepage .record{will-change:auto}}
.homepage .power .tooltip,.homepage .resume-power .tooltip{left:auto;right:0;transform:translateY(6px)}
.homepage .power:hover .tooltip,.homepage .power:focus-visible .tooltip,.homepage .resume-power:hover .tooltip,.homepage .resume-power:focus-visible .tooltip{transform:translateY(0)}
.homepage .hotspot{min-width:0;min-height:0}
.homepage .resume-power:before{left:-20px;right:0;top:-18px;bottom:-18px}

/* Frame the opening video with space for the controls below it. */
.homepage #cover {
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  --cover-space: clamp(36px, 6svh, 50px);
  background: #fff;
}
.homepage #cover .cover-art {
  position: absolute;
  inset: var(--cover-space) 0;
  width: auto;
  aspect-ratio: auto;
  border: 0;
}
.homepage #cover .original-art,
.homepage #cover .cover-video {
  position: absolute;
  inset: 0;
  display: block;
  object-fit: contain;
}
.homepage #cover .cover-video {
  transition-duration: .3s;
}
.homepage #cover .scroll-cue,
.cover-contacts,
.cover-playback {
  position: absolute;
  bottom: max(calc((var(--cover-space) - 32px) / 2), env(safe-area-inset-bottom));
}
.cover-contacts {
  left: 16px;
  display: flex;
  gap: 6px;
}
.cover-playback {
  right: 22px;
}
.cover-contacts a,
.cover-playback {
  display: inline-grid;
  place-items: center;
  min-height: 32px;
  padding: 5px 10px;
  border: 1px solid #ffffff4d;
  border-radius: 3px;
  background: #172436d9;
  color: #fff;
  font-size: 12px;
  text-decoration: none;
}
.cover-contacts a:hover,
.cover-playback:hover {
  background: #172436;
}
.homepage #cover .scroll-cue {
  min-height: 32px;
  white-space: nowrap;
}
@media (max-aspect-ratio: 3/4) {
  .homepage #cover .scroll-cue {
    bottom: calc(max(16px, env(safe-area-inset-bottom)) + 54px);
  }
}
@media (pointer: coarse) {
  .homepage #cover .scroll-cue,
  .cover-contacts a,
  .cover-playback { min-height: 44px; }
  .cover-contacts,
  .cover-playback { bottom: max(12px, env(safe-area-inset-bottom)); }
  .cover-contacts { left: max(12px, env(safe-area-inset-left)); }
  .cover-playback { right: max(12px, env(safe-area-inset-right)); }
  .homepage #cover .scroll-cue { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 54px); }
}
/* Cover is a separate level above the inner page. */
html.intro-open,
html.intro-exiting,
html.intro-returning {
  overflow-y: hidden;
}
.intro-enabled .homepage #cover {
  position: fixed;
  inset: 0;
  z-index: 20;
  height: 100%;
  visibility: hidden;
  transform: translateY(-100%);
  transition: transform .62s cubic-bezier(.32, .72, .22, 1), visibility 0s .62s;
  touch-action: pinch-zoom;
}
.intro-open .homepage #cover {
  visibility: visible;
  transform: none;
  transition: transform .62s cubic-bezier(.32, .72, .22, 1);
}
.intro-exiting .catalog-letter-art h2,
.intro-open .page-dots {
  visibility: hidden;
}
html.portfolio-homepage {
  overscroll-behavior-y: none;
}