/* Catalogue Club — visual gloss layer
   Brand direction: editorial record shop, built for mobile capture and TikTok.
   This is intentionally additive so roulette/data logic stays untouched.
*/
:root{
  --cc-black:#080807;
  --cc-ink:#11110f;
  --cc-paper:#f4ead7;
  --cc-muted:#a89d8c;
  --cc-line:rgba(244,234,215,.14);
  --cc-orange:#e49a3a;
  --cc-red:#a94a40;
  --cc-teal:#3f8b90;
}

html{background:var(--cc-black)}
body{
  background:
    radial-gradient(circle at 50% -10%,rgba(63,139,144,.08),transparent 32rem),
    radial-gradient(circle at 90% 45%,rgba(228,154,58,.045),transparent 28rem),
    var(--cc-black);
  color:var(--cc-paper);
  letter-spacing:.005em;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  z-index:999;
}

.app{width:min(1180px,100%);padding:22px 28px 72px}
header{
  position:relative;
  padding-bottom:18px;
  border-bottom:1px solid var(--cc-line);
}
.masthead-title{
  font-size:26px;
  letter-spacing:-.065em;
}
.masthead-sub{font-size:7px;letter-spacing:.42em;margin-top:10px;color:var(--cc-teal)}
.history{font-size:8px;letter-spacing:.25em;text-transform:uppercase}
.rule{height:3px;margin-top:11px;background:linear-gradient(90deg,var(--cc-teal) 0 34%,var(--cc-red) 34% 67%,var(--cc-orange) 67%)}

.home{
  min-height:calc(100svh - 150px);
  padding:clamp(45px,8vh,100px) 0 70px;
  gap:clamp(45px,7vw,105px);
}
.home h1{
  font-size:clamp(58px,7.8vw,104px);
  line-height:.84;
  text-wrap:balance;
}
.home h1 em{color:var(--cc-paper)}
.home-copy{
  font-size:9px;
  line-height:1.95;
  max-width:480px;
  color:var(--cc-muted);
}
.micro{font-size:7px;letter-spacing:.24em}

/* The wheel is the hero: bigger, cleaner, and deliberately record-like. */
.spin-wrap{position:relative}
.record-button{
  width:min(460px,40vw);
  height:min(460px,40vw);
  padding:17%;
  background:
    radial-gradient(circle at 35% 30%,#272622 0,#151512 22%,#090908 65%,#050504 100%);
  border:1px solid rgba(244,234,215,.26);
  box-shadow:
    0 45px 100px rgba(0,0,0,.7),
    0 0 0 1px rgba(228,154,58,.08),
    inset 0 0 70px rgba(0,0,0,.7);
}
.record-button:before{
  inset:10px;
  background:repeating-radial-gradient(circle,transparent 0 7px,rgba(255,255,255,.045) 8px 9px,transparent 10px 16px);
  opacity:.9;
}
.record-button:after{
  inset:22px;
  border-color:rgba(244,234,215,.08);
}
.record-button:hover{transform:translateY(-3px);box-shadow:0 52px 110px rgba(0,0,0,.76),0 0 0 1px rgba(228,154,58,.14),inset 0 0 70px rgba(0,0,0,.7)}
.record-button:active{transform:scale(.965)}
.label{
  background:
    radial-gradient(circle at 35% 28%,#f1b864,#e49a3a 60%,#c87922 100%);
  box-shadow:inset 0 0 0 1px rgba(255,248,226,.62),0 7px 25px rgba(0,0,0,.55);
}
.label:before{width:24px;height:24px;margin-bottom:18px;background:#17130f;border:0;box-shadow:inset 0 0 0 6px #e8b665}
.label strong{font-size:clamp(24px,2.4vw,31px);letter-spacing:.14em}
.label small{font-size:6px;letter-spacing:.3em;margin-top:10px}
.spin-note{font-size:7px;letter-spacing:.28em;color:#857a6b;margin-top:20px}

/* Make the supporting content feel like editorial sections rather than UI panels. */
.below{padding-top:28px;grid-template-columns:repeat(3,1fr)}
.item{padding-right:30px}
.item+.item{padding-left:30px}
.item label{color:var(--cc-orange);font-size:7px}
.item h2{font-size:15px;letter-spacing:.1em;margin-top:10px}
.item p{font-size:7px;color:#857b6d}

/* Spin/reveal states */
.loading{padding:15vh 0}
.loader{width:130px;height:130px;border-color:var(--cc-orange);box-shadow:0 20px 60px rgba(0,0,0,.5)}
.loading h2{font-size:18px;letter-spacing:.18em;margin-top:25px}
.loading p{font-size:8px;color:#857b6d}

.reveal,.result{padding:60px 0 50px}
.review-title,.result h1{font-size:clamp(52px,7vw,88px)}
.album-stage{max-width:900px;gap:55px;padding-bottom:38px}
.cover-frame{padding:8px;border-color:rgba(244,234,215,.24);box-shadow:0 30px 75px rgba(0,0,0,.6)}
.album-info{text-align:left}
.meta{padding:17px 0}
.meta label{font-size:7px;letter-spacing:.3em;color:var(--cc-orange)}
.meta div{font-size:16px}
.meta.title div{font-size:clamp(23px,3.2vw,36px)}
.services{gap:8px}
.service{padding:13px;border-color:var(--cc-line);font-size:8px;letter-spacing:.18em;transition:transform .15s ease,border-color .15s ease}
.service:hover{transform:translateY(-1px);border-color:rgba(244,234,215,.35)}

.section-title{max-width:900px;margin-top:38px}
.track-panel{max-width:900px}
.track{padding:14px 3px;font-size:12px}
.track.active{background:rgba(228,154,58,.06);border-left-color:var(--cc-orange)}

.rate-area{margin-left:-28px;margin-right:-28px;padding-left:28px;padding-right:28px;background:linear-gradient(180deg,rgba(8,8,7,.4),#080807 25%);border-top-color:var(--cc-line)}
.progress{max-width:900px}
.progress i{background:var(--cc-orange)}
.ratings{max-width:900px;gap:7px}
.r{padding:13px 3px;background:#121210;border-color:#302c25;transition:background .15s ease,transform .15s ease}
.r:hover{transform:translateY(-1px);background:#181713}

.result h1{margin-bottom:30px}
.verdict-card{max-width:700px;padding:32px 24px;background:linear-gradient(180deg,#131310,#0e0e0c);box-shadow:0 25px 70px rgba(0,0,0,.45)}
.result .big{font-size:clamp(76px,13vw,130px)}
.again{padding:14px 28px;background:var(--cc-orange);box-shadow:0 12px 30px rgba(0,0,0,.35);transition:transform .15s ease}
.again:hover{transform:translateY(-2px)}

.modal{background:rgba(5,5,4,.96)}
.modal-box{max-width:700px;padding:28px}

/* Mobile is the primary content surface. */
@media(max-width:760px){
  .app{padding:17px 17px 58px}
  header{padding-bottom:14px}
  .masthead-title{font-size:21px}
  .history{font-size:7px}
  .home{
    min-height:auto;
    display:flex;
    flex-direction:column;
    gap:0;
    padding:42px 0 48px;
  }
  .home .spin-wrap{order:-1;width:100%;margin-bottom:42px}
  .home-copy-wrap{order:1}
  .eyebrow{font-size:7px}
  .home h1{font-size:clamp(52px,15.5vw,78px);margin-top:15px}
  .home-copy{font-size:8px;line-height:1.85;margin-top:21px}
  .micro{margin-top:25px}
  .record-button{
    width:min(350px,84vw);
    height:min(350px,84vw);
    margin:auto;
  }
  .spin-note{font-size:6.5px;margin-top:17px}
  .below{margin-top:5px}
  .item{padding:18px 0}
  .item+.item{padding:18px 0 0}
  .item h2{font-size:14px}
  .item p{font-size:7px;line-height:1.7}
  .reveal,.result{padding:42px 0 35px}
  .review-title,.result h1{font-size:clamp(48px,14vw,70px)}
  .album-stage{gap:25px}
  .album-info{text-align:center}
  .meta.title div{font-size:27px}
  .services{flex-direction:row}
  .service{padding:12px 7px}
  .section-title{margin-top:30px}
  .rate-area{margin-left:-17px;margin-right:-17px;padding-left:17px;padding-right:17px}
}

@media(min-width:761px){
  .home-copy-wrap{align-self:center}
}

@media(prefers-reduced-motion:reduce){
  .record-button,.service,.again,.r{transition:none!important}
  .loader{animation:none!important}
}