:root { --ink:#07110f; --panel:#0c1c18; --green:#173e36; --mint:#9cf0b4; --gold:#b59b18; --paper:#f4f2e9; --muted:#a8b5b0; --line:rgba(255,255,255,.14); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--ink); color:var(--paper); font-family:Arial,Helvetica,sans-serif; font-size:16px; line-height:1.6; }
a { color:inherit; }
.skip-link { position:absolute; left:-999px; top:1rem; z-index:99; background:var(--mint); color:var(--ink); padding:.7rem 1rem; }
.skip-link:focus { left:1rem; }
.site-header { min-height:86px; padding:12px clamp(18px,4vw,64px); display:flex; align-items:center; justify-content:space-between; gap:28px; border-bottom:1px solid var(--line); position:relative; z-index:10; background:rgba(7,17,15,.94); }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; font-family:"Arial Narrow",Impact,sans-serif; font-weight:900; font-size:1.35rem; letter-spacing:.02em; line-height:.9; }
.brand img { border-radius:12px; object-fit:cover; }
.brand small { display:block; color:var(--gold); font-size:.62rem; letter-spacing:.28em; margin-top:8px; }
nav { display:flex; gap:30px; }
nav a { color:#c5cfcb; text-decoration:none; font-size:.92rem; font-weight:600; }
nav a:hover, nav a:focus-visible { color:var(--mint); }
.button { display:inline-flex; align-items:center; justify-content:center; gap:.7rem; min-height:52px; padding:.85rem 1.25rem; text-decoration:none; text-transform:uppercase; font:800 1rem/1 "Arial Narrow",Impact,sans-serif; letter-spacing:.08em; border:1px solid transparent; transition:transform .2s, background .2s, color .2s; }
.button:hover { transform:translateY(-2px); }
.button-small { min-height:44px; padding:.65rem 1rem; color:var(--mint); border-color:rgba(156,240,180,.5); }
.button-primary { background:var(--mint); color:var(--ink); box-shadow:7px 7px 0 var(--gold); }
.button-outline { border-color:var(--paper); }
.hero { min-height:760px; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr); align-items:center; gap:5vw; padding:clamp(60px,8vw,120px) clamp(20px,7vw,110px); position:relative; overflow:hidden; background:radial-gradient(circle at 80% 45%,#17463a 0,transparent 38%),linear-gradient(130deg,#07110f 20%,#0b211b 100%); }
.hero::before { content:""; position:absolute; inset:0; background:repeating-linear-gradient(105deg,transparent 0 90px,rgba(255,255,255,.025) 91px 92px); pointer-events:none; }
.hero-noise { position:absolute; width:420px; height:420px; border:2px solid rgba(181,155,24,.4); transform:rotate(18deg); right:-170px; top:30px; box-shadow:0 0 0 45px rgba(181,155,24,.035),0 0 0 90px rgba(181,155,24,.025); }
.hero-copy,.hero-mark { position:relative; z-index:1; }
.eyebrow { margin:0 0 1rem; color:var(--mint); text-transform:uppercase; font:800 .95rem/1 "Arial Narrow",Impact,sans-serif; letter-spacing:.22em; }
h1,h2,h3 { font-family:"Arial Narrow",Impact,sans-serif; text-transform:uppercase; margin-top:0; }
h1 { max-width:800px; margin-bottom:1.25rem; font-size:clamp(3.8rem,7.3vw,7.8rem); line-height:.82; letter-spacing:-.035em; }
h1 span { color:transparent; -webkit-text-stroke:1px var(--mint); }
.intro { max-width:650px; color:#c5cfcb; font-size:clamp(1.05rem,1.6vw,1.25rem); }
.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:28px; margin-top:2.4rem; }
.text-link { color:var(--paper); font-weight:700; text-underline-offset:6px; text-decoration-color:var(--gold); }
.stats { display:flex; gap:clamp(18px,4vw,48px); margin:4rem 0 0; }
.stats div { border-left:2px solid var(--gold); padding-left:14px; }
.stats dt { font:800 clamp(1.6rem,3vw,2.5rem)/1 "Arial Narrow",Impact,sans-serif; }
.stats dd { margin:.4rem 0 0; color:var(--muted); font-size:.84rem; }
.hero-mark { display:flex; justify-content:center; }
.logo-frame { width:min(100%,560px); aspect-ratio:1; position:relative; background:#f4f2e9; padding:5%; transform:rotate(2deg); box-shadow:24px 24px 0 rgba(0,0,0,.32),0 0 0 1px rgba(255,255,255,.2); }
.logo-frame::after { content:""; position:absolute; inset:16px; border:2px dashed rgba(7,17,15,.2); pointer-events:none; }
.logo-frame img { width:100%; height:100%; object-fit:contain; }
.tape { position:absolute; width:110px; height:34px; background:rgba(181,155,24,.8); top:-15px; left:calc(50% - 55px); transform:rotate(-5deg); z-index:2; }
.stamp { position:absolute; right:-34px; bottom:35px; width:110px; height:110px; border:3px solid var(--mint); border-radius:50%; display:grid; place-items:center; color:var(--mint); background:var(--ink); text-align:center; font:800 .86rem/1.15 "Arial Narrow",Impact,sans-serif; letter-spacing:.08em; transform:rotate(-10deg); }
.collection { padding:clamp(70px,9vw,130px) clamp(20px,7vw,110px); background:#0a1714; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:2rem; margin-bottom:3rem; }
.section-heading h2,.about h2 { font-size:clamp(2.8rem,5vw,5.5rem); line-height:.95; margin-bottom:0; }
.category-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.category { min-height:350px; padding:30px; display:flex; flex-direction:column; text-decoration:none; position:relative; overflow:hidden; background:var(--panel); transition:background .25s,transform .25s; }
.category:hover { background:var(--green); transform:translateY(-5px); z-index:2; }
.category-featured { background:#102b25; }
.number { color:var(--muted); font:.8rem/1 Arial,sans-serif; }
.category-code { margin:auto 0; color:transparent; -webkit-text-stroke:1px rgba(156,240,180,.38); font:900 clamp(4.5rem,7vw,7rem)/1 "Arial Narrow",Impact,sans-serif; transform:rotate(-5deg); }
.category-logo { width:min(100%,210px); aspect-ratio:1; margin:auto; display:block; overflow:hidden; background:#fff; border:1px solid rgba(181,155,24,.7); transform:rotate(-3deg); box-shadow:9px 9px 0 rgba(0,0,0,.28); }
.category-logo img { width:100%; height:100%; object-fit:contain; display:block; }
.category h3 { font-size:1.8rem; line-height:1; margin:0 0 .7rem; }
.category p { color:var(--muted); margin:0; font-size:.9rem; }
.arrow { position:absolute; right:24px; top:24px; color:var(--mint); font-size:1.4rem; }
.about { display:grid; grid-template-columns:.75fr 1.25fr; min-height:650px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.about-label { min-height:520px; padding:38px; display:flex; flex-direction:column; justify-content:space-between; align-items:center; gap:24px; background:linear-gradient(160deg,rgba(181,155,24,.3),rgba(12,28,24,.9)); font:800 1rem/1 "Arial Narrow",Impact,sans-serif; letter-spacing:.18em; overflow:hidden; }
.about-label span { writing-mode:vertical-rl; transform:rotate(180deg); }
.about-label img { width:min(82%,320px); height:auto; display:block; background:#f4f2e9; border:1px solid rgba(181,155,24,.7); box-shadow:14px 14px 0 rgba(0,0,0,.28); transform:rotate(-3deg); }
.about-copy { padding:clamp(70px,9vw,130px) clamp(30px,9vw,150px); align-self:center; }
.about-copy p:not(.eyebrow) { max-width:700px; color:#c5cfcb; font-size:1.1rem; }
.about-copy .button { margin-top:1.5rem; }
footer { padding:0 clamp(20px,7vw,110px); background:#050c0a; }
.footer-top { min-height:260px; display:grid; grid-template-columns:1fr 1fr auto; gap:30px; align-items:center; border-bottom:1px solid var(--line); }
.footer-brand { font:900 2.5rem/.9 "Arial Narrow",Impact,sans-serif; }
.footer-brand small { display:block; color:var(--gold); font-size:.75rem; letter-spacing:.3em; margin-top:10px; }
.footer-top>p { font:800 clamp(2.2rem,4vw,4rem)/.9 "Arial Narrow",Impact,sans-serif; text-transform:uppercase; margin:0; }
details { border-bottom:1px solid var(--line); }
summary { cursor:pointer; padding:24px 0; font:800 1.2rem/1 "Arial Narrow",Impact,sans-serif; text-transform:uppercase; letter-spacing:.08em; }
.legal-grid { display:grid; grid-template-columns:1fr 1fr; gap:50px; padding:10px 0 45px; color:#c5cfcb; }
.legal-grid h2,.legal-grid h3,.legal-copy h2 { color:var(--paper); }
.legal-copy { max-width:900px; padding:10px 0 45px; color:#c5cfcb; }
.footer-bottom { min-height:90px; display:flex; justify-content:space-between; align-items:center; gap:20px; color:#82918b; font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; }
:focus-visible { outline:3px solid var(--mint); outline-offset:4px; }
@media (max-width:1000px) { nav { display:none; } .hero { grid-template-columns:1fr; } .hero-mark { margin-top:30px; } .logo-frame { width:min(82vw,520px); } .category-grid { grid-template-columns:1fr 1fr; } .footer-top { grid-template-columns:1fr 1fr; padding:55px 0; } .footer-top .button { grid-column:1/-1; justify-self:start; } }
@media (max-width:640px) { .site-header>.button { display:none; } .brand img { width:52px; height:52px; } .hero { padding-top:70px; min-height:auto; } h1 { font-size:3.85rem; } .stats { flex-direction:column; margin-top:3rem; } .stamp { right:-8px; bottom:14px; width:90px; height:90px; } .category-grid { grid-template-columns:1fr; } .category { min-height:270px; } .section-heading { align-items:start; flex-direction:column; } .about { grid-template-columns:1fr; } .about-label { min-height:180px; flex-direction:row; align-items:center; padding:24px; } .about-label span { writing-mode:horizontal-tb; transform:none; font-size:.78rem; } .about-label img { width:min(42%,180px); } .footer-top { grid-template-columns:1fr; } .footer-top .button { grid-column:auto; } .legal-grid { grid-template-columns:1fr; gap:10px; } .footer-bottom { align-items:flex-start; flex-direction:column; justify-content:center; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none !important; } }