:root{--bg:#faf7f2;--ink:#151515;--soft:#5d5856;--line:#e4dfd8;--red:#c8202f;--red-dark:#a01824;--yellow:#f6b712;--black:#111;--card:#fff}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.65 "Open Sans",Arial,sans-serif}
img{max-width:100%;height:auto}
a{color:var(--red)}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
h1,h3,.big{font-family:"Playfair Display",Georgia,serif;font-weight:700}
h3{font-size:28px;line-height:1.2;margin:0 0 10px}
.kicker{font:700 13px/1 "Open Sans",Arial,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--red);margin:0 0 14px}
.small{font-size:14px;color:var(--soft)}

.topbar{background:var(--black);position:sticky;top:0;z-index:5}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:8px;padding-bottom:8px}
.brand img{display:block;width:96px;height:auto}
.nav{display:flex;flex-wrap:wrap;gap:6px 22px}
.nav a{color:#e8e5e1;text-decoration:none;font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:4px 0;border-bottom:2px solid transparent}
.nav a:hover{color:#fff;border-color:var(--yellow)}

.hero{background:var(--black);color:#fff;position:relative;padding:0}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding-top:56px;padding-bottom:64px}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--yellow);margin:0 0 14px}
.hero h1{font-size:52px;line-height:1.1;margin:0 0 18px}
.hero h1 em{font-weight:400;color:#f1ece6}
.lede{color:#d9d4cf;font-size:18px;max-width:560px;margin:0 0 26px}
.hero-art img{display:block}
.stripes{height:10px;background:linear-gradient(90deg,var(--red) 0 60%,var(--yellow) 60% 80%,#fff 80% 100%)}

.actions{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-block;text-decoration:none;font:700 14px/1 "Open Sans",Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;padding:16px 24px;border:2px solid transparent}
.btn.primary{background:var(--red);color:#fff}
.btn.primary:hover{background:var(--red-dark)}
.btn.ghost{color:#fff;border-color:#fff}
.btn.ghost:hover{background:#fff;color:var(--black)}

section{padding:72px 0}
section.band{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

.feature{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:center}
.ticks{padding:0;list-style:none;margin:18px 0 26px}
.ticks li{padding-left:28px;position:relative;margin:8px 0}
.ticks li::before{content:"";position:absolute;left:0;top:.55em;width:14px;height:8px;border-left:3px solid var(--red);border-bottom:3px solid var(--red);transform:rotate(-45deg)}
.plate{background:linear-gradient(145deg,#d9d6d2,#b9b5b0);border:3px solid #8f8a85;border-radius:6px;padding:26px 22px;display:flex;flex-direction:column;gap:10px;box-shadow:inset 0 0 0 4px #e9e6e2,0 10px 24px rgba(0,0,0,.15);transform:rotate(-2deg)}
.plate-label{font-size:12px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:#4a4643}
.plate-num{font:700 30px/1.1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.12em;color:#222;word-break:break-all}
.plate-foot{font-size:13px;color:#4a4643}

.two{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:start}
.big{font-size:34px;line-height:1.25;margin:0 0 18px}
.card{background:var(--card);border:1px solid var(--line);border-top:6px solid var(--yellow);padding:26px 26px 18px}

.merch{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.merch p{margin:0;max-width:560px}

.social{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-wrap:wrap;gap:12px}
.social a{display:inline-block;border:2px solid var(--ink);padding:12px 22px;text-decoration:none;color:var(--ink);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:13px}
.social a:hover{background:var(--ink);color:#fff}

/* contact */
.email{margin:26px 0 0;font-size:18px}
.email a{font-weight:700}

footer{background:var(--black);color:#bdb8b3;text-align:center;padding:28px 0;font-size:14px}
footer p{margin:4px 0}footer .small{color:#8e8984}

@media (max-width:820px){
  .hero-grid,.feature,.two{grid-template-columns:1fr;gap:28px}
  .hero-grid{padding-top:36px;padding-bottom:44px}
  .hero-art{order:-1;max-width:320px}
  .hero h1{font-size:38px}
  section{padding:52px 0}
}
@media (max-width:520px){
  .wrap{padding:0 16px}
  .nav{gap:4px 14px}.nav a{font-size:11px;letter-spacing:.1em}
  .brand img{width:72px}
  .hero h1{font-size:32px}
  .big{font-size:27px}
  .btn{width:100%;text-align:center}
}