:root { --pine:#20291c; --paper:#fff5da; --lime:#d8ee71; --orange:#fd8e50; }
* { box-sizing:border-box; }
body { margin:0; color:var(--pine); background:var(--paper); font-family:system-ui,sans-serif; }
a { color:inherit; text-decoration:none; }
a:focus-visible { outline:3px solid #c84d23; outline-offset:5px; }
header, footer { padding:19px 5%; background:var(--pine); color:var(--paper); display:flex; justify-content:space-between; align-items:center; gap:14px; }
.brand, footer { font-weight:900; letter-spacing:.04em; }
.brand span { color:var(--lime); margin-right:5px; }
.button { display:inline-flex; align-items:center; justify-content:space-between; gap:20px; padding:13px 19px; background:var(--orange); color:var(--pine); border:2px solid var(--pine); border-radius:6px; font-size:14px; font-weight:850; transition:transform .18s; }
.button:hover { transform:translateY(-3px); }
.lime { background:var(--lime); box-shadow:4px 5px 0 var(--pine); }
.hero { display:grid; grid-template-columns:.85fr 1.15fr; gap:4%; align-items:center; padding:42px 5% 48px; max-width:1600px; margin:auto; }
.name { font-size:12px; letter-spacing:.22em; font-weight:900; }
h1,h2 { margin:0; font-family:"Arial Black",Impact,system-ui,sans-serif; font-weight:950; letter-spacing:-.065em; line-height:.88; }
h1 { font-size:clamp(72px,12vw,185px); }
h1 span { color:#bd481e; }
.lead { font-size:clamp(17px,2.1vw,29px); line-height:1.35; margin:25px 0; }
figure { position:relative; margin:0; border:2px solid var(--pine); border-radius:12px; background:#9cbdca; box-shadow:8px 8px 0 var(--pine); overflow:hidden; }
figure img { display:block; width:100%; height:auto; aspect-ratio:1.08; object-fit:cover; }
figcaption { position:absolute; bottom:15px; right:14px; padding:8px 11px; border-radius:5px; background:var(--paper); font-size:11px; font-weight:800; transform:rotate(-4deg); }
.stripe { overflow:hidden; white-space:nowrap; text-align:center; background:var(--lime); border-block:2px solid var(--pine); padding:13px; font-size:clamp(16px,2.4vw,33px); font-weight:950; }
.stripe span { color:#b54624; margin:0 18px; }
.story { display:grid; grid-template-columns:1fr 1fr; gap:35px; align-items:start; background:var(--orange); padding:64px 7%; }
h2 { font-size:clamp(48px,7vw,105px); }
.story p { margin:0 0 16px; font-size:clamp(17px,1.7vw,23px); }
.story a { display:inline-block; font-weight:850; text-decoration:underline; text-underline-offset:4px; }
footer { flex-wrap:wrap; font-size:12px; }
@media(max-width:720px) { .hero,.story { grid-template-columns:1fr; } .hero { gap:30px; padding:26px 6% 38px; } h1 { font-size:clamp(70px,17vw,114px); } .lead { margin:17px 0; } .story { padding:42px 6%; gap:21px; } .brand { font-size:13px; } header .button { padding:8px 11px; font-size:12px; } }
@media(prefers-reduced-motion:reduce) { .button { transition:none; } }