:root { --orange: #f15a24; --ink: #0b0b0b; --paper: #fbfaf8; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Inter, Arial, sans-serif; }
.site-header { height: 92px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(24px, 6vw, 90px); border-bottom: 1px solid #e9e7e3; }
.wordmark { color: var(--ink); font-family: "Archivo Black", Impact, sans-serif; font-size: clamp(1.35rem, 2vw, 1.75rem); letter-spacing: -1.7px; text-decoration: none; }
.wordmark span { color: var(--orange); }
.header-note { font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.hero { min-height: calc(100svh - 145px); position: relative; display: grid; place-items: center; overflow: hidden; padding: 80px 24px; background: radial-gradient(circle at 48% 45%, #fff 0 28%, transparent 62%); }
.hero-copy { width: min(900px, 100%); position: relative; z-index: 2; text-align: center; }
.eyebrow { margin: 0 0 20px; color: var(--orange); font-size: .78rem; font-weight: 800; letter-spacing: .18em; }
h1 { margin: 0; font-family: "Archivo Black", Impact, sans-serif; font-size: clamp(3.5rem, 12vw, 9.5rem); letter-spacing: -.085em; line-height: .83; }
h1 span { color: var(--orange); }
.subtitle { margin: 30px 0 34px; font-size: clamp(1rem, 1.7vw, 1.35rem); font-weight: 600; }
.shop-button { display: inline-flex; align-items: center; gap: .7rem; padding: 19px 31px; color: #fff; background: var(--ink); border: 2px solid var(--ink); box-shadow: 7px 7px 0 var(--orange); font-size: .95rem; font-weight: 800; letter-spacing: .08em; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.shop-button:hover, .shop-button:focus-visible { transform: translate(3px, 3px); box-shadow: 4px 4px 0 var(--orange); }
.fallback { margin: 35px auto 0; font-size: .78rem; }
.fallback p { margin: 0 0 8px; color: #666; }
#copy-link { display: inline-flex; align-items: center; gap: 14px; max-width: 100%; padding: 8px 10px 8px 15px; background: #fff; border: 1px solid #d8d5d0; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
#shop-url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#copy-label { padding: 5px 7px; background: var(--orange); color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .08em; }
.brush { position: absolute; width: 65vw; height: 20vw; min-height: 180px; background: var(--orange); opacity: .98; transform: rotate(-28deg); filter: contrast(1.1); }
.brush::after, .brush::before { content: ""; position: absolute; inset: 12% -6%; background: var(--paper); clip-path: polygon(0 13%, 100% 0, 97% 18%, 4% 38%, 100% 53%, 98% 64%, 8% 70%, 100% 87%, 0 100%); }
.brush-top { top: -7vw; right: -22vw; }
.brush-bottom { bottom: -17vw; left: -33vw; background: var(--ink); transform: rotate(-28deg) scale(.82); }
footer { padding: 18px 24px; background: var(--ink); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-align: center; }
@media (max-width: 560px) { .site-header { height: 74px; padding: 0 22px; } .header-note { display: none; } .hero { min-height: calc(100svh - 119px); } h1 { font-size: clamp(3.15rem, 18vw, 5rem); } .brush { width: 110vw; } .brush-top { top: -5vw; right: -59vw; } .brush-bottom { bottom: -29vw; left: -68vw; } }