/* Shared spacing and borders; sleeves, prints and tapes each have a material. */
.content{--collection-gap:16px}
.home-grid{grid-template-columns:minmax(0,1fr) 200px;gap:var(--collection-gap);align-items:start}
.home-grid .feature-panel{min-width:0}
.panel-bar h2,.section-title h2{font-size:.9375rem;letter-spacing:0;line-height:1.25}
.panel-bar h2{font-size:.875rem}
.home-aside{gap:var(--collection-gap)}
.featured-record{grid-template-columns:minmax(155px,190px) minmax(0,1fr);gap:18px;padding:18px}
.record-sleeve{display:block;position:relative;min-width:0;padding:5px 5px 5px 10px;background:linear-gradient(90deg,#7896a1 0 3px,#e4ede9 3px 6px,#a7bec3 6px 7px,#f8faf2 7px);border:1px solid #365a6d;border-radius:2px;box-shadow:2px 3px 0 #14395044,inset 0 1px #fff}
.record-sleeve .album-art{display:block;width:100%;border:1px solid #284a60;box-shadow:none}
.featured-record>.record-sleeve{align-self:start}
.featured-record .record-side{align-self:center}
.record-side h3{line-height:1.3}
.record-links{display:flex;flex-wrap:wrap;gap:6px 18px;padding:10px 18px;background:#21485e;border-top:1px solid #557c8e;box-shadow:inset 0 1px #113147}
.record-links a{font-size:.8125rem;color:#dfedb1;text-decoration:underline;text-underline-offset:3px}
.mystery-preview{display:block;padding:10px;background:#fff5da}
.mystery-preview img{width:100%;aspect-ratio:2;object-fit:cover;border:1px solid #8a7856}
.mystery-preview strong{display:block;margin-top:8px;font-size:.875rem}
.mystery-preview small{display:block;margin-top:4px;font-size:.75rem;color:#6b5736;line-height:1.4}
.mystery-preview:hover strong{text-decoration:underline;text-underline-offset:3px}
.home-community .discord-body{padding:13px 10px}
.community-link{display:flex;align-items:center;flex-direction:column;gap:9px}
.community-link strong{font-size:.875rem}
.community-link .soon{font-size:.75rem;padding:3px 7px}
.home-discoveries,.home-bottom,.record-extras{margin-top:26px}
.section-title{align-items:center;min-height:29px;margin-bottom:12px}
.discovery-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.capsule{min-width:0;display:flex;flex-direction:column;padding:7px;background:#fcfcf3;border:1px solid #91a7ab;box-shadow:0 2px 0 #b3c1bf}
.image-mount{display:grid;place-items:center;width:100%;aspect-ratio:1.3;overflow:hidden;background:#e2e9e6;border:1px solid #9db1b5}
.capsule .image-mount img{width:100%;height:100%;aspect-ratio:auto;object-fit:contain;border:0}
.capsule strong{font-size:.8125rem;line-height:1.4;margin:8px 2px 2px;overflow-wrap:anywhere}
.capsule .meta{font-size:.75rem;line-height:1.4;margin:3px 2px 2px}
.capsule[data-group="Photos"]{padding:8px 8px 12px;background:#fffdf4;border-color:#b2b6aa;box-shadow:1px 3px 0 #b5beb8}
.capsule[data-group="Photos"] .image-mount{background:#172f3b;border:3px solid #203b49}
.capsule[data-group="Myspace"] .image-mount{background:#24374d}
.capsule[data-group="Merch"] .image-mount{background:repeating-linear-gradient(45deg,#e8e9df 0 3px,#edf0e5 3px 6px)}
.discovery-grid .image-mount{aspect-ratio:1.45}
.image-collection,.keepsake-grid{gap:18px 14px}
.image-collection[data-collection="Photos"]{padding:15px;background:#27495a;border:1px solid #143446;box-shadow:inset 0 2px 6px #0e263b66;border-radius:3px}
.image-collection[data-collection="Photos"] .capsule{box-shadow:0 3px 0 #0f2c3d}
.record-collection{gap:25px 18px;padding:4px 2px 18px}
.album-tile{min-width:0;padding-bottom:12px;border-bottom:3px solid #7b969e;box-shadow:0 1px #fff}
.album-tile strong{font-size:.875rem;line-height:1.4}
.album-tile small{font-size:.75rem;margin-top:4px;line-height:1.4}
.album-tile:hover .record-sleeve{border-color:#e28caa;box-shadow:2px 3px 0 #a8668355}
.album-tile img{transition:none}
.album-tile:hover img{transform:none}
.album-detail{grid-template-columns:220px minmax(0,1fr);gap:24px;align-items:start}
.album-package{min-width:0}
.track-sheet{min-width:0;padding:15px 17px 18px;background:linear-gradient(90deg,#e5ddc7 0 3px,transparent 3px),#fffdf1;border:1px solid #b7b9a6;box-shadow:2px 3px 0 #c5c9b9}
.track-sheet .record-meta{padding-bottom:10px;border-bottom:1px solid #b4bdad}
.track-sheet .song-row{padding:9px 0;gap:7px}
.track-sheet .song-row .song-name{font-size:.875rem}
.record-extras .section-title .meta{font-size:.75rem;color:var(--muted)}
.video-collection{gap:16px}
.tape{padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.tape-image{border:1px solid #102d40;border-radius:2px;box-shadow:none}
.tape-image img{aspect-ratio:1.6;object-fit:contain;background:#102a3b}
.tape-label{display:block;margin-top:8px;padding:0;background:transparent}
.tape strong{margin:0;font-size:.8125rem;line-height:1.4;color:#233d4d;overflow-wrap:anywhere}
.tape .meta{font-size:.75rem;color:#536a70;line-height:1.4;margin-top:4px}
.tape-duration{position:absolute;bottom:5px;right:5px;padding:2px 4px;background:#092737e8;border:1px solid #668088;color:#eef4d9;font:11px/1.3 Consolas,monospace}
.tape:hover{border-color:#799bac}
.tape:hover strong{text-decoration:underline;text-underline-offset:3px}
.more-related{margin-top:15px;border-top:1px solid #a8bdbc;padding-top:12px}
.more-related summary{width:max-content;max-width:100%;cursor:pointer;font-size:.875rem;font-weight:bold;color:#315466;text-decoration:underline;text-underline-offset:3px}
.more-related[open] summary{margin-bottom:15px}
.connected-records,.dialog-related{border-top:1px solid #a9bdbf;margin-top:19px;padding-top:15px}
.connected-records h3,.dialog-related h3{font-size:.875rem;margin-bottom:12px}
.connected-records>div{display:flex;flex-wrap:wrap;gap:9px}
.connected-records a{display:flex;align-items:center;gap:9px;max-width:100%;padding:6px 10px 6px 6px;border:1px solid #78949d;background:#f5f8ed;box-shadow:0 2px #bdcbca;font-size:.8125rem;font-weight:bold}
.connected-records a:hover{background:#e4efc5}
.connected-records img{width:38px;height:38px;object-fit:cover;border:1px solid #42606d}
.dialog-related .image-mount{aspect-ratio:1.8}
.dialog-related .capsule strong{font-size:.75rem}
.dialog-foot .actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.dialog-foot{gap:12px}
.player-copy{position:relative;padding-right:21px}
.playback-bars{position:absolute;right:6px;bottom:7px;display:flex;align-items:flex-end;gap:2px;height:11px;opacity:.35}
.playback-bars i{display:block;width:2px;height:3px;background:#d4ee83;transform-origin:bottom}
.player.is-playing .playback-bars{opacity:1}
.player.is-playing .playback-bars i{height:10px}
.player.is-playing .player-play{box-shadow:inset 0 1px #f7ffd4,0 2px #153548,0 0 6px #d2ec7080}
@keyframes header-drift{from{transform:translateX(-7px)}to{transform:translateX(7px)}}
@keyframes playing-bars{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@media(prefers-reduced-motion:no-preference){
  .header-sweep{animation:header-drift 35s ease-in-out infinite alternate}
  .header-cloud{animation:header-drift 43s ease-in-out infinite alternate-reverse}
  .player.is-playing .playback-bars i{animation:playing-bars 1.1s ease-in-out infinite}
  .player.is-playing .playback-bars i:nth-child(2){animation-delay:-.65s;animation-duration:1.4s}
  .player.is-playing .playback-bars i:nth-child(3){animation-delay:-.3s;animation-duration:.9s}
}
.world.is-still .header-sweep,.world.is-still .header-cloud,.world.is-still .clouds-rise,.world.is-still .playback-bars i{animation-play-state:paused}
@media(hover:hover){
  .record-sleeve{transition:transform .15s,box-shadow .15s}
  .album-tile:hover .record-sleeve{transform:translateY(-2px)}
  .tape .play-stamp .ui-icon{transition:transform .15s}
  .tape:hover .play-stamp .ui-icon{transform:scale(1.125)}
  .lucky:hover .ui-icon{transform:rotate(-8deg)}
}
.capsule:active{transform:translateY(1px);box-shadow:0 1px 0 #496773}
.tape:active{transform:translateY(1px)}
.more-related summary:focus-visible{outline:3px solid #e54b97;outline-offset:4px}
@media(max-width:1150px){
  .home-grid{grid-template-columns:minmax(0,1fr) 180px}
  .featured-record{grid-template-columns:155px minmax(0,1fr);padding:14px;gap:14px}
  .record-links{padding:10px 14px}
}
@media(max-width:980px){
  .home-grid{grid-template-columns:1fr}
  .home-aside{display:grid;grid-template-columns:1fr 1fr}
  .mystery-preview{display:flex;align-items:center;gap:11px}
  .mystery-preview img{width:92px;flex:none;aspect-ratio:1.5}
  .mystery-preview strong{margin-top:0}
  .home-community .discord-body{padding:15px 10px}
  .community-link{flex-direction:row;justify-content:center;flex-wrap:wrap;gap:6px 10px}
  .featured-record{grid-template-columns:190px minmax(0,1fr);padding:17px;gap:19px}
  .discovery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .album-detail{grid-template-columns:175px minmax(0,1fr);gap:17px}
  .track-sheet{padding:13px}
}
@media(max-width:720px){
  .featured-record{grid-template-columns:160px minmax(0,1fr);gap:15px;padding:14px}
  .album-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 12px}
  .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mini-photo-row{grid-template-columns:repeat(3,minmax(0,1fr))}
  .home-discoveries,.home-bottom,.record-extras{margin-top:22px}
}
@media(max-width:460px){
  .featured-record{grid-template-columns:105px minmax(0,1fr);padding:11px;gap:11px}
  .record-sleeve{padding:4px 4px 4px 8px}
  .record-side h3{font-size:.9375rem}
  .record-actions{gap:9px}
  .record-links{padding:10px 11px;gap:7px 14px}
  .home-aside{grid-template-columns:1fr;gap:12px}
  .home-community .discord-body{padding:12px}
  .discovery-grid{gap:12px 9px}
  .capsule:last-child{display:flex;grid-column:auto;grid-template-columns:none}
  .gallery-grid .capsule:last-child{display:flex}
  .mini-photo-row{grid-template-columns:1fr}
  .mini-photo-row .tape{display:grid;grid-template-columns:40% minmax(0,1fr);gap:7px;align-items:stretch}
  .mini-photo-row .tape:last-child{display:grid}
  .mini-photo-row .tape-label{margin:0;padding:3px 0}
  .mini-photo-row .tape-image{display:grid;align-items:center}
  .album-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .album-detail{grid-template-columns:1fr;gap:18px}
  .album-package>.record-sleeve{max-width:205px;margin:auto}
  .album-detail .album-art{width:100%}
  .image-collection[data-collection="Photos"]{padding:9px;gap:13px 9px}
  .track-sheet{padding:12px 10px}
  .track-sheet .lyric-link{margin-left:0}
  .track-sheet .song-row .song-name{font-size:.8125rem}
  .tape-label{padding:0}
  .dialog-related .gallery-grid{grid-template-columns:1fr 1fr}
  .dialog-related .capsule:last-child{grid-column:auto}
}