:root {
  --ink: #111111;
  --paper: #f4efe4;
  --paper-dark: #e4ddcd;
  --red: #ed3d24;
  --red-dark: #b92314;
  --yellow: #ffd84a;
  --cream: #fff8e7;
  --white: #ffffff;
  --muted: #6f6a60;
  --border: 2px solid var(--ink);
  --shadow: 7px 7px 0 var(--ink);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Inter", sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button, input { font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.noise {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  opacity: .065;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' 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='.7'/%3E%3C/svg%3E");
}

.site-header {
  min-height: 88px;
  padding: 16px clamp(20px, 5vw, 80px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: var(--paper);
  border-bottom: var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
}
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-mark { width: 54px; height: 54px; position: relative; display: inline-block; }
.drum-icon { position: absolute; width: 43px; height: 28px; left: 5px; bottom: 4px; border: 3px solid var(--ink); border-radius: 50% 50% 44% 44%; background: var(--red); box-shadow: inset 0 5px 0 rgba(255,255,255,.25); }
.drum-icon::after { content:""; position:absolute; left:4px; right:4px; bottom:6px; border-top:2px solid var(--ink); }
.stick { position:absolute; width: 35px; height: 4px; background: var(--ink); top: 12px; border-radius: 4px; transform-origin: center; }
.stick-left { left: 2px; transform: rotate(35deg); }
.stick-right { right: 2px; transform: rotate(-35deg); }
.brand-copy { display:flex; flex-direction:column; line-height:.8; }
.brand-copy strong, .brand-copy em { font-family:"Anton", sans-serif; font-size: 1.7rem; letter-spacing: .045em; font-style: normal; }
.brand-copy em { color:var(--red); font-size:1.02rem; letter-spacing:.18em; margin-top:7px; }
.primary-nav { display:flex; align-items:center; gap: clamp(18px, 2.8vw, 42px); }
.primary-nav a { font-size:.85rem; font-weight:800; text-decoration:none; text-transform:uppercase; letter-spacing:.08em; }
.primary-nav a:hover { color:var(--red); }
.nav-cta { background:var(--ink); color:var(--white)!important; padding:12px 17px; border:2px solid var(--ink); box-shadow:4px 4px 0 var(--red); }
.nav-cta:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--red); }
.menu-toggle { display:none; background:none; border:0; padding:8px; }
.menu-toggle span:not(.sr-only) { display:block; width:28px; height:3px; background:var(--ink); margin:5px 0; }

.hero { min-height: 690px; display:grid; grid-template-columns: 1.02fr .98fr; background:var(--cream); border-bottom:var(--border); overflow:hidden; }
.hero-copy { padding: clamp(70px, 9vw, 125px) clamp(28px, 7vw, 100px); align-self:center; position:relative; z-index:2; }
.eyebrow { display:flex; align-items:center; gap:10px; margin:0 0 18px; font-size:.78rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.eyebrow span { width:38px; height:4px; background:var(--red); display:inline-block; }
.eyebrow.light { color:var(--cream); }
.eyebrow.light span { background:var(--yellow); }
h1,h2,h3 { line-height:1.02; margin-top:0; }
h1,h2 { font-family:"Anton", sans-serif; font-weight:400; letter-spacing:.02em; }
h1 { font-size:clamp(4.2rem, 8vw, 8.4rem); max-width:800px; margin-bottom:28px; }
h1 em { display:block; color:var(--red); font-style:normal; -webkit-text-stroke:2px var(--ink); text-shadow:5px 5px 0 var(--yellow); }
.hero-text { max-width:650px; font-size:clamp(1rem, 1.5vw, 1.2rem); color:#403d37; }
.hero-actions { display:flex; flex-wrap:wrap; gap:16px; margin-top:34px; }
.button { display:inline-flex; justify-content:center; align-items:center; min-height:52px; padding:14px 22px; border:var(--border); text-decoration:none; font-weight:800; text-transform:uppercase; letter-spacing:.07em; font-size:.82rem; transition:.2s ease; }
.button-primary { background:var(--red); color:var(--white); box-shadow:var(--shadow); }
.button-secondary { background:var(--yellow); box-shadow:5px 5px 0 var(--ink); }
.button:hover { transform:translate(-2px,-2px); box-shadow:9px 9px 0 var(--ink); }
.trust-row { display:flex; flex-wrap:wrap; gap:26px; margin-top:42px; font-size:.76rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.trust-row span::before { content:"✓"; color:var(--red); margin-right:7px; }

.hero-art { position:relative; min-height:690px; background:var(--red); border-left:var(--border); overflow:hidden; }
.sunburst { position:absolute; inset:-20%; background:repeating-conic-gradient(from 4deg, rgba(255,216,74,.95) 0deg 10deg, transparent 10deg 22deg); opacity:.5; }
.kick-drum { position:absolute; width:320px; height:320px; border-radius:50%; background:#232323; border:12px solid #101010; left:20%; bottom:80px; box-shadow: 14px 18px 0 rgba(0,0,0,.23), inset 0 0 0 12px #555; z-index:5; }
.kick-ring { position:absolute; inset:28px; border:4px solid #888; border-radius:50%; }
.kick-logo { position:absolute; inset:0; display:grid; place-items:center; font-family:"Anton"; font-size:5rem; color:var(--red); text-shadow:3px 3px 0 var(--yellow); transform:rotate(-7deg); }
.tom, .floor-tom, .snare { position:absolute; background:linear-gradient(90deg,#762116,#ef4a32 45%,#792015); border:5px solid #111; box-shadow:8px 10px 0 rgba(0,0,0,.2); z-index:6; }
.tom::before, .floor-tom::before, .snare::before { content:""; position:absolute; left:-3px; right:-3px; top:-9px; height:16px; background:#ddd; border:3px solid #111; border-radius:50%; }
.tom span, .floor-tom span, .snare span { position:absolute; left:10px; right:10px; top:45%; border-top:3px solid rgba(255,255,255,.55); }
.tom-one { width:120px; height:90px; left:24%; top:210px; transform:rotate(8deg); }
.tom-two { width:128px; height:96px; left:48%; top:185px; transform:rotate(-8deg); }
.floor-tom { width:150px; height:175px; right:7%; bottom:100px; }
.snare { width:145px; height:82px; left:2%; bottom:150px; background:linear-gradient(90deg,#bbb,#f7f7f7 45%,#888); }
.cymbal { position:absolute; height:22px; border:4px solid #111; border-radius:50%; background:radial-gradient(circle at 50% 50%, #6f4a04 0 5%, #ffd95d 6% 38%, #ba7d0b 62%, #ffe892 100%); z-index:7; box-shadow:6px 8px 0 rgba(0,0,0,.18); }
.cymbal-top { width:250px; right:4%; top:90px; transform:rotate(-8deg); }
.cymbal-side { width:190px; left:0; top:130px; transform:rotate(10deg); }
.stand { position:absolute; width:5px; background:#1d1d1d; transform-origin:bottom; z-index:3; }
.stand::after { content:""; position:absolute; width:100px; height:5px; background:#1d1d1d; bottom:0; left:-47px; transform:rotate(15deg); }
.stand-a { height:380px; right:21%; top:110px; transform:rotate(8deg); }
.stand-b { height:385px; left:13%; top:145px; transform:rotate(-8deg); }
.stand-c { height:280px; left:28%; bottom:45px; transform:rotate(3deg); }
.deal-badge { position:absolute; right:7%; bottom:35px; width:120px; height:120px; border-radius:50%; background:var(--yellow); border:5px solid var(--ink); display:flex; flex-direction:column; align-items:center; justify-content:center; transform:rotate(10deg); box-shadow:8px 8px 0 var(--ink); z-index:10; }
.deal-badge strong { font-family:"Anton"; font-size:2rem; line-height:.9; }
.deal-badge span { font-weight:900; letter-spacing:.14em; font-size:.78rem; }

.ticker { background:var(--ink); color:var(--cream); padding:14px 0; overflow:hidden; border-bottom:var(--border); }
.ticker-track { width:max-content; display:flex; gap:24px; align-items:center; padding-left:5vw; font-family:"Anton"; letter-spacing:.08em; animation:ticker 28s linear infinite; }
.ticker-track b { color:var(--red); }
@keyframes ticker { to { transform:translateX(-25%); } }

.section { padding:clamp(74px, 9vw, 120px) clamp(22px, 6vw, 88px); }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:40px; margin-bottom:48px; }
.section-heading h2 { font-size:clamp(3.2rem, 6.5vw, 6.3rem); margin-bottom:0; }
.section-heading > p { max-width:520px; color:var(--muted); margin:0 0 10px; }
.deal-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.deal-card { min-height:470px; border:var(--border); background:var(--cream); display:flex; flex-direction:column; position:relative; box-shadow:5px 5px 0 var(--ink); overflow:hidden; }
.deal-card:hover { transform:translateY(-5px); box-shadow:8px 12px 0 var(--ink); }
.featured-card { grid-column:span 2; }
.card-label, .discount-tag { position:absolute; top:14px; left:14px; z-index:4; background:var(--yellow); border:2px solid var(--ink); padding:5px 10px; font-weight:900; text-transform:uppercase; font-size:.72rem; letter-spacing:.08em; }
.discount-tag { left:auto; right:14px; background:var(--red); color:white; }
.product-art { height:220px; background:var(--paper-dark); border-bottom:var(--border); position:relative; overflow:hidden; }
.featured-card .product-art { height:245px; }
.product-kit { background:linear-gradient(135deg,var(--yellow),#f6a81a); }
.mini-kick { position:absolute; width:140px; height:140px; border-radius:50%; background:#242424; border:8px solid #111; left:38%; bottom:-15px; box-shadow:inset 0 0 0 8px #555; }
.mini-tom { position:absolute; width:85px; height:67px; background:var(--red); border:5px solid #111; left:29%; top:55px; transform:rotate(9deg); }
.mini-cymbal { position:absolute; width:150px; height:18px; border-radius:50%; border:4px solid #111; background:#e9ae24; right:12%; top:35px; transform:rotate(-10deg); }
.cymbal-art { background:radial-gradient(circle at center,#ffe382 0 8%,#efb320 9% 47%,#bd7706 48% 60%,#f9ca42 61%); }
.cymbal-art span { position:absolute; inset:28px; border:3px solid rgba(17,17,17,.35); border-radius:50%; }
.snare-art { background:linear-gradient(145deg,#b7b7b7,#f7f7f7 35%,#686868); }
.snare-art::before { content:""; position:absolute; width:160px; height:100px; left:50%; top:54%; transform:translate(-50%,-50%); background:linear-gradient(90deg,#999,#fff,#777); border:6px solid #111; }
.snare-art span { position:absolute; left:15%; right:15%; top:35%; height:18px; border-radius:50%; background:#e5e5e5; border:4px solid #111; z-index:2; }
.pedal-art { background:var(--red); }
.pedal-art::before { content:""; position:absolute; width:90px; height:150px; border:7px solid #111; border-radius:45% 45% 12px 12px; background:#333; left:42%; top:36px; transform:rotate(8deg); }
.pedal-art span { position:absolute; width:90px; height:18px; background:var(--yellow); border:4px solid #111; left:24%; bottom:38px; transform:rotate(-18deg); }
.deal-content { padding:24px; display:flex; flex-direction:column; flex:1; }
.deal-type { color:var(--red); font-size:.75rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; margin:0 0 10px; }
.deal-content h3 { font-size:clamp(1.45rem, 2.2vw, 2.15rem); margin-bottom:14px; }
.deal-content p { color:var(--muted); }
.text-link { margin-top:auto; font-weight:900; text-decoration:none; text-transform:uppercase; font-size:.78rem; letter-spacing:.08em; }
.text-link span { color:var(--red); font-size:1.2rem; }

.categories-section { background:var(--ink); color:var(--cream); border-top:var(--border); border-bottom:var(--border); }
.compact-heading { margin-bottom:36px; }
.category-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #444; border-left:1px solid #444; }
.category-card { min-height:210px; padding:28px; border-right:1px solid #444; border-bottom:1px solid #444; text-decoration:none; display:flex; flex-direction:column; transition:.2s ease; }
.category-card > span { color:var(--red); font-family:"Anton"; font-size:1.5rem; }
.category-card strong { margin-top:auto; font-family:"Anton"; font-size:clamp(1.8rem,3vw,3.1rem); font-weight:400; }
.category-card em { color:#aaa; font-style:normal; font-size:.88rem; }
.category-card:hover { background:var(--red); color:white; transform:translate(-4px,-4px); box-shadow:7px 7px 0 var(--yellow); }
.category-card:hover > span, .category-card:hover em { color:white; }

.guide-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.guide-card { border-top:8px solid var(--red); padding:28px; background:var(--cream); box-shadow:5px 5px 0 var(--ink); }
.guide-number { font-family:"Anton"; font-size:3rem; color:var(--yellow); -webkit-text-stroke:1px var(--ink); }
.guide-card h3 { font-size:1.75rem; margin:10px 0; }
.guide-card p { color:var(--muted); }

.newsletter-section { background:var(--red); color:white; padding:clamp(70px,8vw,110px) clamp(24px,8vw,120px); display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; border-top:var(--border); border-bottom:var(--border); }
.newsletter-copy h2 { font-family:"Anton"; font-size:clamp(3.1rem,5vw,5.6rem); margin-bottom:20px; }
.newsletter-copy p { max-width:620px; }
.newsletter-form { background:var(--cream); color:var(--ink); border:var(--border); padding:30px; box-shadow:9px 9px 0 var(--ink); }
.newsletter-form label { display:block; font-weight:900; text-transform:uppercase; font-size:.8rem; letter-spacing:.08em; margin-bottom:10px; }
.form-row { display:flex; }
.form-row input { flex:1; min-width:0; border:2px solid var(--ink); padding:15px; background:white; }
.form-row button { border:2px solid var(--ink); border-left:0; background:var(--yellow); font-weight:900; text-transform:uppercase; padding:0 20px; cursor:pointer; }
.newsletter-form small { display:block; color:var(--muted); margin-top:12px; }

.site-footer { padding:55px clamp(22px,6vw,88px) 28px; background:var(--paper); display:grid; grid-template-columns:1fr auto; gap:28px 50px; align-items:start; }
.footer-brand strong { font-family:"Anton"; font-size:2.6rem; letter-spacing:.04em; }
.footer-brand strong span { color:var(--red); }
.footer-brand p { margin:0; color:var(--muted); }
.footer-links { display:flex; flex-wrap:wrap; gap:24px; }
.footer-links a { font-weight:800; text-transform:uppercase; text-decoration:none; font-size:.76rem; }
.disclaimer { grid-column:1/-1; border-top:1px solid #b9b2a4; padding-top:22px; color:var(--muted); font-size:.78rem; }
.copyright { grid-column:1/-1; font-size:.78rem; margin:0; }

@media (max-width: 1080px) {
  .hero { grid-template-columns:1fr; }
  .hero-art { min-height:570px; border-left:0; border-top:var(--border); }
  .hero-copy { padding-bottom:75px; }
  .deal-grid { grid-template-columns:repeat(2,1fr); }
  .featured-card { grid-column:span 2; }
  .category-grid { grid-template-columns:repeat(2,1fr); }
  .newsletter-section { grid-template-columns:1fr; }
}

@media (max-width: 760px) {
  .site-header { min-height:74px; padding:10px 18px; }
  .brand-mark { width:46px; height:46px; }
  .brand-copy strong { font-size:1.35rem; }
  .brand-copy em { font-size:.82rem; }
  .menu-toggle { display:block; z-index:2; }
  .primary-nav { position:absolute; top:100%; left:0; right:0; display:none; flex-direction:column; align-items:stretch; background:var(--paper); border-bottom:var(--border); padding:20px; }
  .primary-nav.open { display:flex; }
  .primary-nav a { padding:12px; }
  .nav-cta { text-align:center; }
  h1 { font-size:clamp(3.7rem, 17vw, 5.4rem); }
  h1 em { -webkit-text-stroke:1px var(--ink); text-shadow:3px 3px 0 var(--yellow); }
  .hero-art { min-height:480px; }
  .kick-drum { width:240px; height:240px; left:21%; bottom:80px; }
  .tom-one { left:18%; top:155px; }
  .tom-two { left:48%; top:145px; }
  .floor-tom { width:120px; right:3%; bottom:75px; }
  .cymbal-top { width:180px; top:62px; }
  .cymbal-side { width:150px; top:90px; }
  .snare { width:115px; left:-3%; bottom:105px; }
  .deal-badge { width:95px; height:95px; right:4%; bottom:18px; }
  .section-heading { align-items:start; flex-direction:column; gap:15px; }
  .deal-grid, .guide-grid, .category-grid { grid-template-columns:1fr; }
  .featured-card { grid-column:span 1; }
  .category-card { min-height:175px; }
  .site-footer { grid-template-columns:1fr; }
  .disclaimer, .copyright { grid-column:1; }
}

@media (max-width: 520px) {
  .hero-actions { flex-direction:column; }
  .button { width:100%; }
  .hero-art { min-height:410px; }
  .kick-drum { width:190px; height:190px; left:23%; bottom:70px; }
  .kick-logo { font-size:3.4rem; }
  .tom { transform:scale(.8); }
  .tom-one { left:9%; top:125px; }
  .tom-two { left:43%; top:120px; }
  .floor-tom { transform:scale(.8); right:-2%; bottom:45px; }
  .snare { transform:scale(.8); left:-10%; bottom:75px; }
  .form-row { flex-direction:column; gap:10px; }
  .form-row button { border:2px solid var(--ink); min-height:50px; }
}