.album-page{max-width:1000px;margin:auto;padding:180px 28px 100px}.album-page h1{font-family:"Polar Vertex",var(--sans);font-weight:400;font-size:clamp(44px,8vw,90px);margin:0;line-height:1.2}.album-intro{color:var(--muted);margin:24px 0 48px}.album-tracks{list-style:none;padding:0}.album-tracks li{border-top:1px solid var(--line)}.album-tracks li:last-child{border-bottom:1px solid var(--line)}.album-track{display:grid;grid-template-columns:40px 1fr auto;gap:20px;align-items:center;width:100%;padding:23px 0;background:none;border:0;color:var(--paper);text-align:left;font:inherit;cursor:pointer}.album-track[data-unavailable]{color:var(--muted)}.album-track[aria-current=true]{color:var(--gold-light)}.track-number,.track-state{font-size:12px;color:var(--muted)}.track-title{font-size:clamp(16px,2.5vw,22px);font-weight:300}#uf-drone-toggle{position:fixed;bottom:20px;right:24px;z-index:50;background:var(--ink);border:1px solid var(--line);border-radius:24px;color:var(--paper);padding:10px 18px;cursor:pointer}.site-nav{flex-wrap:wrap;align-items:center}@media(max-width:700px){.site-header{gap:20px;align-items:flex-start}.site-nav{gap:10px 18px;justify-content:flex-end}.site-nav a,.site-nav button{font-size:13px}.album-page{padding-top:190px}.album-track{gap:10px;grid-template-columns:25px 1fr}.track-state{grid-column:2}}

/* Selection reveals the story entry; playback alone owns the gold highlight. */
.track-select { grid-column:1 / 3; display:grid; grid-template-columns:40px minmax(0,1fr); gap:20px; align-items:center; align-self:stretch; padding:0; border:0; background:none; color:inherit; text-align:left; font:inherit; cursor:pointer; }
.track-play { display:flex; align-items:center; padding:0; border:0; background:none; color:inherit; font:inherit; cursor:pointer; }
.track-play:disabled { cursor:default; }
.track-select:focus-visible,.track-play:focus-visible { outline:1px solid var(--muted); outline-offset:5px; }
.album-track-item.is-selected:has(.track-story) .album-track { padding-bottom:10px; }
.track-story { margin:0 0 22px 60px; }
.track-story[hidden] { display:none; }
.track-story-label { color:var(--muted); font-size:11px; letter-spacing:.04em; }
@media(max-width:700px) { .track-select { grid-template-columns:25px minmax(0,1fr); gap:10px; } .track-story { margin-left:35px; } }
/* Compact per-track transport, with elapsed time appearing for the selected song. */
.track-state { display:flex; align-items:center; justify-content:flex-end; gap:14px; }
.track-icon { display:flex; align-items:center; justify-content:center; width:32px; height:32px; border:1px solid var(--line); color:var(--paper); }
.album-track[aria-current=true] .track-icon { color:var(--gold-light); border-color:currentColor; }
.track-elapsed { font-variant-numeric:tabular-nums; min-width:3ch; }
.track-elapsed[hidden] { display:none; }
@media(max-width:700px) { .album-track { grid-template-columns:25px minmax(0,1fr) auto; } .track-state { grid-column:auto; gap:8px; } }

/* Center transport across the complete expanded row, including its story entry. */
.album-track-item:has(.track-story) { position:relative; display:flow-root; box-sizing:border-box; }
.album-track-item:has(.track-story) .album-track { padding-right:110px; box-sizing:border-box; }
.album-track-item:has(.track-story) .track-state { position:absolute; right:0; top:50%; transform:translateY(-50%); }

/* Keep the compact SVG time legible beside the transport. */
.track-elapsed.uf-morph-counter{font-size:14px;color:var(--paper)}

/* The background follows the intro and playlist, including expanded stories. */
.album-listening-room{position:relative;isolation:isolate;display:flow-root;margin-top:12px;padding-top:12px;padding-bottom:64px}
.album-listening-content{position:relative;z-index:1;display:flow-root;opacity:var(--uf-album-content-opacity,1)}
.album-intro-space{height:1lh;margin-bottom:48px}
.uf-album-background{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:var(--uf-ab-opacity,.35);overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--uf-ab-top,15%),#000 calc(100% - var(--uf-ab-bottom,20%)),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 var(--uf-ab-top,15%),#000 calc(100% - var(--uf-ab-bottom,20%)),transparent 100%)}
.uf-album-background-horizontal{position:absolute;inset:0;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--uf-ab-left,10%),#000 calc(100% - var(--uf-ab-right,10%)),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 var(--uf-ab-left,10%),#000 calc(100% - var(--uf-ab-right,10%)),transparent 100%)}
.uf-album-background video{position:absolute;left:0;top:0;display:block;width:100%;height:100%;object-fit:cover;object-position:top left;pointer-events:none}
.album-listening-room .uf-album-background{left:-48px;right:-48px}
@media(max-width:700px){.album-listening-room .uf-album-background{left:-16px;right:-16px}}


/* Keep the page backdrop on the same compositing path as its masked media. */
.album-body{isolation:isolate}
.album-body::before{content:"";position:fixed;inset:0;z-index:-1;background:var(--ink);transform:translateZ(0);pointer-events:none}

/* The row echoes share the list's measured coordinates and never receive input. */
.album-tracks{position:relative}
[data-album-entrance-ghost]{pointer-events:none!important}

/* Anchor the temporary heading echo without changing normal document flow. */
.album-page{position:relative}

.track-story-label{background:none;border:0;border-bottom:1px solid var(--line);padding:4px 0;font:inherit;font-size:11px;color:var(--muted);cursor:pointer}
.track-story-label:hover{color:var(--paper)}
body.story-modal-open{overflow:hidden;padding-right:var(--support-scrollbar-compensation,0px)}
.album-story-modal .support-modal__backdrop{background:rgba(3,3,3,.55)}
.album-story-modal .support-modal__panel{isolation:isolate;border:0}
.album-story-modal .support-modal__content{box-sizing:border-box}
.album-story-modal [data-story-body]{line-height:1.75;font-size:16px;overflow-wrap:anywhere}
.album-story-video{position:absolute;inset:0;pointer-events:none;opacity:var(--story-opacity,.35);mask-image:linear-gradient(to bottom,transparent,#000 var(--story-top),#000 calc(100% - var(--story-bottom)),transparent)}
.album-story-video>div{position:absolute;inset:0;mask-image:linear-gradient(to right,transparent,#000 var(--story-left),#000 calc(100% - var(--story-right)),transparent)}
.album-story-video video{width:100%;height:100%;object-fit:cover}
.album-story-modal .support-modal__content{z-index:1}

/* Keep long stories inside the capped panel instead of shrinking flex children. */
.album-story-modal .support-modal__content > *{flex-shrink:0}