:root { color-scheme: dark; --bg:#0f1211; --surface:#181d1a; --muted:#b7c2bb; --text:#f4f5ef; --accent:#6ef0aa; --line:#344239; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:1.5rem; }
body { margin:0; background:var(--bg); color:var(--text); font:17px/1.65 Arial,Helvetica,sans-serif; }
a { color:var(--accent); text-underline-offset:4px; }
a:hover { color:#c5ffdf; }
a:focus-visible { outline:3px solid var(--accent); outline-offset:5px; }
.wrap { width:min(1120px,calc(100% - 48px)); margin-inline:auto; }
.skip { position:absolute; left:16px; top:-100px; z-index:10; padding:12px; background:var(--accent); color:#102117; }
.skip:focus { top:10px; }
.site-header { border-bottom:1px solid var(--line); background:#111713; }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:94px; padding-block:18px; }
.brand { display:flex; flex-direction:column; color:var(--text); text-decoration:none; line-height:1.1; white-space:nowrap; }
.brand strong { font-size:23px; letter-spacing:-.6px; }
.brand span { font-size:11px; letter-spacing:3.1px; text-transform:uppercase; color:var(--accent); margin-top:7px; }
.main-nav { display:flex; flex-wrap:wrap; align-items:center; gap:5px; }
.main-nav a { color:var(--muted); padding:8px 11px; font-size:14px; text-decoration:none; border-radius:5px; }
.main-nav a:hover,.main-nav a[aria-current=page] { color:var(--text); background:#26372c; }
.main-nav .shop-link { color:var(--accent); border:1px solid var(--line); margin-left:5px; }
.eyebrow { color:var(--accent); text-transform:uppercase; letter-spacing:2.3px; font-size:12px; font-weight:700; margin:0 0 20px; }
h1,h2,h3,p { margin-top:0; }
h1,h2 { font-family:Georgia,'Times New Roman',serif; font-weight:400; letter-spacing:-1.5px; line-height:1.08; }
h1 { font-size:clamp(43px,6.1vw,76px); margin-bottom:24px; }
h2 { font-size:clamp(31px,3.7vw,43px); margin-bottom:16px; }
h3 { font-size:20px; line-height:1.35; letter-spacing:-.3px; margin-bottom:10px; }
.muted,.intro { color:var(--muted); }
.intro { font-size:18px; max-width:610px; }
.hero { display:grid; grid-template-columns:1.2fr .8fr; gap:60px; align-items:center; padding-block:76px 68px; }
.hero h1 em { color:var(--accent); font-weight:400; }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:27px; }
.button { display:inline-flex; justify-content:center; align-items:center; min-height:48px; padding:11px 20px; border:1px solid var(--line); border-radius:5px; background:transparent; color:var(--text); text-decoration:none; font-size:15px; font-weight:700; }
.button:hover { border-color:var(--accent); background:#223128; color:var(--text); }
.button.primary { background:var(--accent); border-color:var(--accent); color:#102117; }
.button.primary:hover { background:#a0f9c8; }
.record-art { position:relative; min-height:355px; display:grid; place-items:center; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:radial-gradient(ellipse at top right,#264d35,transparent 70%),#142219; }
.record { width:260px; height:260px; border-radius:50%; display:grid; place-items:center; background:repeating-radial-gradient(circle,#101512 0 3px,#27302a 4px,#101512 6px); box-shadow:0 20px 40px #0008; transform:rotate(-12deg); }
.record-label { width:108px; height:108px; border-radius:50%; background:var(--accent); color:#12311f; display:flex; flex-direction:column; justify-content:center; align-items:center; font-size:13px; font-weight:700; line-height:1.4; text-align:center; }
.record-label::after { content:''; width:10px; height:10px; background:#142219; border-radius:50%; margin-top:8px; }
.record-caption { position:absolute; bottom:17px; left:21px; right:21px; display:flex; justify-content:space-between; gap:12px; font-size:10px; letter-spacing:1.9px; text-transform:uppercase; color:#c7dbc9; }
.section { padding-block:58px; border-top:1px solid var(--line); }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:26px; }
.section-heading h2 { margin-bottom:0; }
.section-heading p { margin:12px 0 0; max-width:560px; color:var(--muted); }
.text-link { font-size:14px; white-space:nowrap; }
.music-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.music-grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.track { background:var(--surface); border:1px solid var(--line); border-radius:8px; overflow:hidden; min-width:0; }
.player { width:100%; aspect-ratio:16 / 9; display:block; border:0; background:#080b09; }
.track-copy { padding:22px; }
.track-copy .tag { color:var(--accent); font-size:11px; letter-spacing:1.6px; text-transform:uppercase; margin-bottom:10px; }
.track-copy p { color:var(--muted); font-size:14px; margin-bottom:14px; }
.track-copy a { font-size:14px; }
.genre-list { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; border-block:1px solid var(--line); }
.genre { padding:26px 20px; text-decoration:none; color:var(--text); border-right:1px solid var(--line); }
.genre:first-child { padding-left:0; }
.genre:last-child { border-right:0; }
.genre:hover { background:#1a291f; color:var(--accent); }
.genre strong { display:block; font-family:Georgia,'Times New Roman',serif; font-size:26px; font-weight:400; margin-bottom:5px; }
.genre span { display:block; font-size:13px; color:var(--muted); }
.shop-banner { display:grid; grid-template-columns:1fr auto; align-items:center; gap:30px; padding:38px; background:#1b2d21; border:1px solid #3c6148; border-radius:8px; }
.shop-banner h2 { margin-bottom:12px; }
.shop-banner p { max-width:620px; margin-bottom:0; color:#cad8ce; }
.page-intro { padding-block:62px 42px; max-width:810px; }
.page-intro h1 { font-size:clamp(42px,6vw,64px); }
.page-intro .intro { margin-bottom:0; }
.collection { padding-bottom:60px; }
.artist-layout { display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center; padding-bottom:65px; }
.artist-layout .record-art { min-height:340px; }
.artist-layout p { color:var(--muted); }
.quiet-panel { max-width:850px; padding:35px; margin-bottom:64px; border:1px solid var(--line); background:var(--surface); border-radius:8px; }
.quiet-panel p { color:var(--muted); }
.site-footer { border-top:1px solid var(--line); background:#0b0f0c; margin-top:10px; padding-block:34px; }
.footer-inner { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:start; gap:24px; }
.footer-name { font-size:16px; font-weight:700; margin-bottom:8px; }
.footer-note { color:var(--muted); font-size:12px; margin-bottom:0; max-width:380px; }
.footer-links { display:flex; flex-wrap:wrap; gap:12px 20px; max-width:510px; }
.footer-links a { color:var(--muted); font-size:13px; }
@media (max-width:950px) {
 .header-inner { flex-direction:column; align-items:start; gap:18px; }
 .main-nav { margin-left:-11px; }
 .hero { gap:30px; padding-top:50px; }
 .record-art { min-height:310px; }
 .record { width:225px; height:225px; }
 .music-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .shop-banner { grid-template-columns:1fr; }
 .shop-banner .button { justify-self:start; }
}
@media (max-width:620px) {
 .wrap { width:calc(100% - 36px); }
 .main-nav { gap:2px; }
 .main-nav a { padding:8px 9px; }
 .main-nav .shop-link { margin-left:0; }
 .hero { grid-template-columns:1fr; padding-block:40px; gap:32px; }
 .hero .record-art { min-height:280px; }
 .record-caption { font-size:9px; letter-spacing:1.2px; }
 .section { padding-block:38px; }
 .section-heading { display:block; }
 .section-heading .text-link { display:inline-block; margin-top:14px; }
 .music-grid,.music-grid.two { grid-template-columns:1fr; gap:20px; }
 .genre-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .genre { padding:22px 14px; }
 .genre:first-child { padding-left:14px; }
 .genre:nth-child(2) { border-right:0; }
 .genre:nth-child(-n+2) { border-bottom:1px solid var(--line); }
 .genre strong { font-size:23px; }
 .shop-banner { padding:27px; gap:23px; }
 .artist-layout { grid-template-columns:1fr; gap:32px; }
 .page-intro { padding-top:40px; }
 .quiet-panel { padding:26px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }