/* The Catalogue Club — 2026 visual direction
   Bold editorial record-shop language, optimised for mobile capture.
   Presentation only: no roulette/data behaviour lives here.
*/

::selection{background:var(--cc-orange);color:#17110b}
html{scroll-behavior:smooth}
body{overflow-x:hidden}

/* Give every page a little more deliberate art-direction without adding markup. */
.app{position:relative}
.app:before{
  content:"CATALOGUE CLUB / RANDOM ALBUM DISCOVERY";
  position:absolute;
  top:22px;
  right:28px;
  font:500 6px 'DM Mono',monospace;
  letter-spacing:.22em;
  color:rgba(244,234,215,.32);
  pointer-events:none;
}

header{z-index:2}
.masthead-title,.brand-title{position:relative;text-transform:uppercase}
.masthead-title:after,.brand-title:after{
  content:"";
  display:inline-block;
  width:7px;height:7px;
  margin:0 0 2px 7px;
  border-radius:50%;
  background:var(--cc-orange);
  box-shadow:0 0 0 2px rgba(228,154,58,.14);
}

/* The wheel gets the visual weight of a real record rather than a generic CTA. */
.spin-wrap:before{
  content:"RANDOM / NO ALGORITHM";
  display:block;
  position:absolute;
  top:-27px;
  left:50%;
  transform:translateX(-50%);
  white-space:nowrap;
  font:500 6px 'DM Mono',monospace;
  letter-spacing:.28em;
  color:var(--cc-teal);
}
.spin-wrap:after{
  content:"SPIN THE WHEEL. TAKE THE RECORD.\A GIVE IT A PROPER LISTEN.";
  white-space:pre;
  display:block;
  margin:17px auto 0;
  font:500 6px/1.8 'DM Mono',monospace;
  letter-spacing:.2em;
  color:#756c5f;
}
.record-button{
  isolation:isolate;
  transform:translateZ(0);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.record-button:focus-visible{outline:2px solid var(--cc-orange);outline-offset:7px}
.record-button:hover{transform:translateY(-4px) rotate(.35deg)}
.record-button:active{transform:scale(.955) rotate(-.5deg)}
.label{letter-spacing:.02em}
.label strong{font-weight:600;text-shadow:0 1px 0 rgba(255,255,255,.12)}

/* Supporting blocks read more like a magazine index. */
.below{position:relative}
.item{min-height:92px}
.item label{display:inline-block;padding-bottom:5px;border-bottom:1px solid rgba(228,154,58,.28)}
.item h2{text-transform:uppercase}
.item p{max-width:280px}

/* Album artwork should feel like an object on a table, not an app thumbnail. */
.cover-frame{position:relative;isolation:isolate}
.cover-frame:after{
  content:"";
  position:absolute;
  inset:7px;
  border:1px solid rgba(244,234,215,.09);
  pointer-events:none;
}
.cover{position:relative}
.album-stage .meta.title div{font-weight:700}
.service{position:relative;overflow:hidden}
.service:after{
  content:"↗";
  position:absolute;
  right:10px;
  opacity:.38;
}

/* Results get a stronger poster-like hierarchy for screenshots/shares. */
.result .verdict-card{position:relative;overflow:hidden}
.result .verdict-card:before{
  content:"CATALOGUE";
  position:absolute;
  right:-18px;
  top:8px;
  font:700 48px/1 'Oswald',sans-serif;
  letter-spacing:.05em;
  color:rgba(244,234,215,.025);
  transform:rotate(90deg);
  pointer-events:none;
}
.result .big{position:relative}
.again{min-width:220px;text-transform:uppercase}

/* Keep the sticky rating bar feeling like part of the record-player UI. */
.rate-area{box-shadow:0 -18px 35px rgba(0,0,0,.18)}
.progress{overflow:hidden}
.progress i{box-shadow:0 0 12px rgba(228,154,58,.35)}
.r{min-height:42px;border-radius:0}
.r:focus-visible{outline:2px solid var(--cc-orange);outline-offset:2px}

@media(max-width:760px){
  .app:before{top:11px;right:17px;font-size:4.5px;letter-spacing:.16em;opacity:.65}
  .masthead-title:after,.brand-title:after{width:5px;height:5px;margin-left:5px}
  .spin-wrap:before{top:-20px;font-size:5px;letter-spacing:.24em}
  .spin-wrap:after{margin-top:13px;font-size:5px;letter-spacing:.16em;line-height:1.9}
  .record-button:hover{transform:none}
  .record-button:active{transform:scale(.955)}
  .item{min-height:0}
  .cover-frame:after{inset:6px}
  .service:after{right:7px}
  .result .verdict-card:before{font-size:34px;right:-23px}
  .home{padding-bottom:2vh}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .record-button{transition:none}
}