:root{
  --black:#0d0d0d; --ink:#181818; --cream:#f4f0e8; --paper:#fbfaf7;
  --gold:#e2b84b; --muted:#777; --line:#d9d4ca;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans",Arial,sans-serif}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}

.site-header{
  height:82px;background:var(--black);color:white;display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;padding:0 4vw;position:sticky;top:0;z-index:20;border-bottom:1px solid #292929
}
.brand{display:flex;align-items:center;gap:12px;justify-self:start}
.brand strong{font:600 20px/0.9 "Oswald",sans-serif;letter-spacing:.08em}
.brand small{display:block;font-size:8px;letter-spacing:.32em;margin-top:8px;color:#aaa}
.record-dot{width:34px;height:34px;border-radius:50%;background:var(--gold);position:relative;flex:none}
.record-dot:after{content:"";position:absolute;width:10px;height:10px;border-radius:50%;background:var(--black);inset:0;margin:auto}
.nav{display:flex;gap:28px;align-items:center;font:600 13px "Oswald",sans-serif;letter-spacing:.06em;text-transform:uppercase}
.nav a{opacity:.86}
.nav a:hover,.discogs-link{color:var(--gold)}
.lang-switch{justify-self:end;display:flex;gap:8px;align-items:center;color:#777}
.lang{border:0;background:none;color:#aaa;cursor:pointer;padding:8px 2px;font-weight:700}
.lang.active{color:var(--gold)}

.hero{height:min(78vh,790px);min-height:590px;position:relative;overflow:hidden;background:#111}
.hero-image{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 56%;
  opacity:0;transition:opacity 2.5s ease-in-out;will-change:opacity
}
.hero-image.active{opacity:1}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.75),rgba(0,0,0,.28) 58%,rgba(0,0,0,.08))}
.hero-content{position:absolute;left:7vw;top:50%;transform:translateY(-50%);color:white;max-width:760px}
.eyebrow,.kicker{font:600 12px "Oswald",sans-serif;letter-spacing:.19em;text-transform:uppercase}
.hero h1{font:700 clamp(58px,8vw,120px)/.87 "Oswald",sans-serif;letter-spacing:-.015em;margin:16px 0 22px}
.hero-sub{font:600 16px "Oswald",sans-serif;letter-spacing:.08em;text-transform:uppercase}
.hero-actions{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:45px;padding:0 20px;border:1px solid currentColor;font:600 12px "Oswald",sans-serif;letter-spacing:.08em;text-transform:uppercase;transition:.2s}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--gold);border-color:var(--gold);color:#111}
.btn-ghost{background:rgba(0,0,0,.22);color:white}
.btn-dark{background:#111;color:white;border-color:#111}

.section{padding:80px 4vw}
.section-heading{display:flex;justify-content:space-between;gap:40px;align-items:flex-end;margin-bottom:30px}
.section h2,.visit h2,.shop-story h2{font:700 clamp(36px,5vw,66px)/1 "Oswald",sans-serif;text-transform:uppercase;margin:6px 0}
.kicker{color:#9b7422;margin:0 0 8px}
.section-note{max-width:480px;color:var(--muted);font-size:14px;margin:0 0 6px}

.arrival-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px 18px}
.arrival-card{position:relative}
.arrival-image{aspect-ratio:1/1;overflow:hidden;background:#eee}
.arrival-image img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.arrival-card:hover img{transform:scale(1.025)}
.arrival-tag{position:absolute;top:10px;left:10px;background:var(--black);color:white;padding:6px 9px;font:600 10px "Oswald";letter-spacing:.08em;text-transform:uppercase}
.arrival-card h3{font-size:16px;margin:12px 0 2px}
.arrival-card p{margin:0;color:#666;font-size:14px}

.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding-top:12px}
.feature-card{min-height:440px;padding:34px;display:flex;align-items:flex-end;position:relative;overflow:hidden;color:white}
.feature-card:before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.9),rgba(0,0,0,.15)),var(--bg);background-size:cover;background-position:center}
.feature-card>div{position:relative;z-index:2}
.feature-card.dark{background:#171717}
.feature-card.dark:before{display:none}
.feature-card h3{font:700 34px/1.05 "Oswald";text-transform:uppercase;margin:8px 0 16px}
.feature-card p{line-height:1.55;color:#eee}
.feature-card .btn{margin-top:15px}
.highlight{display:block;color:var(--gold);font-size:15px;margin-top:15px}

.shop-story{display:grid;grid-template-columns:1fr 1fr;min-height:620px;background:var(--cream)}
.story-copy{padding:8vw;align-self:center}
.story-copy p:not(.kicker){line-height:1.7;color:#555;max-width:600px}
.shop-story>img{width:100%;height:100%;object-fit:cover;max-height:700px}
.text-link{font-weight:700;border-bottom:1px solid #999}

.visit{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:stretch}
.visit-info>p{line-height:1.6}
.hours{margin:34px 0}
.hours h3{font:600 22px "Oswald";text-transform:uppercase}
.hours div{display:flex;justify-content:space-between;gap:22px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}
.contact-buttons{display:flex;gap:10px;flex-wrap:wrap}
.visit-visual iframe{width:100%;height:100%;min-height:500px;border:0;filter:grayscale(.15)}

footer{background:#0b0b0b;color:white;min-height:190px;padding:48px 4vw;display:grid;grid-template-columns:1fr 1fr auto;gap:30px;align-items:center}
footer p{color:#999;font-size:13px;margin:0}
.footer-brand{justify-self:start}

@media (max-width:1000px){
  .site-header{grid-template-columns:1fr auto}
  .nav{display:none}
  .arrival-grid{grid-template-columns:repeat(2,1fr)}
  .feature-grid{grid-template-columns:1fr}
  .feature-card{min-height:380px}
  .shop-story,.visit{grid-template-columns:1fr}
  .shop-story>img{max-height:500px}
}
@media (max-width:640px){
  .site-header{height:72px;padding:0 18px}
  .brand strong{font-size:16px}
  .record-dot{width:28px;height:28px}
  .hero{min-height:640px;height:82vh}
  .hero-image{object-position:62% center}
  .hero-content{left:22px;right:22px}
  .hero h1{font-size:58px}
  .hero-sub{font-size:13px}
  .section{padding:60px 20px}
  .section-heading{display:block}
  .section-note{margin-top:16px}
  .arrival-grid{grid-template-columns:1fr 1fr;gap:22px 10px}
  .arrival-card h3{font-size:14px}
  .arrival-card p{font-size:12px}
  .feature-grid{padding-left:20px;padding-right:20px}
  .feature-card{padding:26px;min-height:420px}
  .feature-card h3{font-size:30px}
  .story-copy{padding:60px 24px}
  .visit{gap:30px}
  .hours div{display:block}
  .hours strong{display:block;margin-top:3px}
  footer{grid-template-columns:1fr;min-height:auto}
}