/* A quieter, more natural typographic treatment across the site. */
:root { --display: 'Manrope', Arial, sans-serif; --body: 'Manrope', Arial, sans-serif; }
body { font-family: var(--body); }
.sidebar-nav a[aria-current="page"] { color: #fff; }
.sidebar-nav a[aria-current="page"] span { color: #fff; }
h1, h2.display, .shop-banner h2, .repack-gallery h2, .repack-contact h2,
.hits-heading h3, .shop-page .shop-copy h2, .cart-head h2 {
  font-family: var(--display); font-weight: 700; letter-spacing: -.045em; line-height: 1.06; text-transform: none;
}
.brand-mark { font-family: var(--display); font-weight: 800; letter-spacing: -.06em; font-size: 20px; }
.hero h1 { font-size: clamp(53px, 5.5vw, 84px); line-height: 1.06; margin: 30px 0 25px; letter-spacing: -.055em; }
.hero-copy p { max-width: 410px; }
.hero-copy > * { animation: hero-arrive 1.5s both; }
.hero-copy > :nth-child(2) { animation-delay: .12s; }
.hero-copy > :nth-child(3) { animation-delay: .25s; }
.hero-copy > :nth-child(4) { animation-delay: .38s; }
.hero-copy > :nth-child(5) { animation-delay: .48s; }
@keyframes hero-arrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.section-top h2, .story h2, .contact h2, .shop-banner h2,
.repack-teaser h2, .guide h2 { font-size: clamp(39px, 4.15vw, 62px); line-height: 1.08; }
.repack-hero h1, .shop-hero h1 { font-family: var(--display); font-weight: 700; font-size: clamp(52px, 6vw, 86px); line-height: 1.06; letter-spacing: -.05em; text-transform: none; }
.repack-gallery h2, .repack-contact h2, .hits-heading h3 { font-size: clamp(37px, 4vw, 58px); line-height: 1.1; }
.shop-page .shop-copy h2 { font-size: clamp(37px, 4vw, 56px); }
.hero-photo-main, .hero-photo-inset { box-shadow: none; }
.hero-photo:after { display: block; pointer-events: none; background: linear-gradient(90deg, #141414 0%, rgba(20,20,20,.45) 9%, transparent 28%); }
.repack-teaser-image { position: relative; }
.repack-teaser-image:after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, #1c1c1c 0%, transparent 24%); }
.story-image { position: relative; }
.story-image:after { display: block; pointer-events: none; background: linear-gradient(90deg, transparent 90%, #1c1c1c 100%); }
.mystery-stage:after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent 75%, #e9e9e7 100%); }
.reveal-ready { opacity: 0; transform: translateY(18px); transition: opacity .85s ease, transform .85s ease; }
.reveal-ready.is-visible { opacity: 1; transform: translateY(0); }
@media (max-width: 760px) {
  .hero h1 { font-size: clamp(48px, 10vw, 68px); }
  .hero-photo:after { background: linear-gradient(180deg, #141414 0%, transparent 25%); }
  .repack-teaser-image:after { background: linear-gradient(180deg, #1c1c1c 0%, transparent 22%); }
  .story-image:after { background: linear-gradient(0deg, #1c1c1c 0%, transparent 10%); }
  .section-top h2, .story h2, .contact h2, .shop-banner h2, .repack-teaser h2, .guide h2 { font-size: clamp(37px, 8vw, 53px); }
  .repack-hero h1, .shop-hero h1 { font-size: clamp(48px, 10vw, 68px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-copy > * { animation: none; }
  .reveal-ready { opacity: 1; transform: none; transition: none; }
}