*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#E6E4DF;color:#22252A;font:400 18px/1.55 'Barlow',sans-serif}
h1,h2{font-family:'Barlow Condensed',sans-serif;font-weight:700;margin:0}
h1{font-size:60px;line-height:1.05;max-width:900px;text-wrap:balance}
h2{font-size:40px;line-height:1.05;margin-bottom:28px}
.banner{background:#22252A;color:#fff;text-align:center;font-size:14px;line-height:1.3;padding:7px 16px;min-height:32px;border-bottom:2px solid #2F6FB0}
.top{display:flex;justify-content:space-between;align-items:center;padding:16px 6vw;gap:16px}
.brand{font:700 24px 'Barlow Condensed',sans-serif}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;background:#2F6FB0;color:#fff;text-decoration:none;font-weight:500;border-radius:4px;border:0}
.btn:hover{background:#255a92}
a:focus-visible{outline:3px solid #22252A;outline-offset:3px}
.btn:focus-visible,.sticky:focus-visible,.tape:focus-visible{outline:3px solid #22252A;outline-offset:3px}
.hero{padding:48px 6vw 72px}
.intro{max-width:620px;margin:20px 0 36px}
.tape{display:inline-block;background:#2F6FB0;color:#fff;text-decoration:none;transform:rotate(-1.5deg);padding:14px 36px;clip-path:polygon(0 0,100% 0,99% 12%,100% 25%,98.8% 40%,100% 55%,99% 70%,100% 85%,99% 100%,0 100%,1% 86%,0 71%,1.2% 56%,0 41%,1% 26%,0 12%);font:600 76px 'Overpass Mono',monospace;line-height:1.1;white-space:nowrap;word-spacing:-.3em}
.open{font:600 16px 'Overpass Mono',monospace;margin:18px 0 28px}
.actions{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.link{color:#2F6FB0;font-weight:500;min-height:48px;display:inline-flex;align-items:center}
.board{background-color:#A47B4F;background-image:radial-gradient(circle,#7A5A38 3px,transparent 3.5px);background-size:24px 24px;padding:72px 6vw}
.board-inner{max-width:1140px;margin:0}
.board h2{color:#fff;background:#22252A;display:inline-block;padding:8px 18px}
.tags{list-style:none;margin:0;padding:24px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:48px 48px;justify-items:center}
.tags li{width:100%;max-width:260px;border-radius:14px 14px 4px 4px}
.tags li{position:relative;background:#fff;color:#22252A;font-weight:500;font-size:20px;padding:34px 18px 22px;text-align:center;border-radius:4px;box-shadow:2px 2px 0 #22252A;transition:transform .3s}
.tags li::before{content:"";position:absolute;top:10px;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#22252A}
.tags li::after{content:"";position:absolute;bottom:100%;left:50%;width:2px;height:22px;background:#22252A}
.tags li:nth-child(4n+1){transform:rotate(-2deg)}
.tags li:nth-child(4n+2){transform:rotate(1deg)}
.tags li:nth-child(4n+3){transform:rotate(-1deg)}
.tags li:nth-child(4n){transform:rotate(2deg)}
@media (hover:hover){.tags li:hover{transform:rotate(.5deg)}}
.ask{color:#fff;margin:44px 0 0;background:#22252A;display:inline-block;padding:8px 18px}
.ask a{color:#fff;text-decoration:underline}
.traits,.who{padding:72px 6vw 0}
.trait-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px 48px;max-width:900px}
.label{display:inline-block;background:#2F6FB0;color:#fff;font:700 22px 'Barlow Condensed',sans-serif;padding:2px 14px}
.trait-grid p{margin:10px 0 0}
.who p{max-width:640px;margin:0}
.reviews{padding:72px 6vw 0}
.score{margin:0 0 32px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.count{font:600 16px 'Overpass Mono',monospace}
.rev-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:1140px;margin-bottom:28px}
.rev-grid figure{margin:0;background:#fff;border:2px solid #22252A;box-shadow:3px 3px 0 #22252A;padding:24px}
.rev-grid blockquote{margin:0 0 16px;font-size:17px}
.rev-grid figcaption{font-weight:500}
.rev-grid figcaption span{display:inline-block;margin-left:8px;font:600 12px 'Overpass Mono',monospace;background:#22252A;color:#fff;padding:2px 8px}
@media (max-width:700px){.reviews{padding:48px 16px 0}.rev-grid{grid-template-columns:1fr}}
.visit{padding:72px 6vw}
.card{background:#22252A;color:#fff;border:1px solid #fff;padding:44px;max-width:1140px;display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.card h2{font-size:36px;text-wrap:balance}
.mono{font:600 18px/1.7 'Overpass Mono',monospace;margin:0}
.btn-lg{min-height:56px;padding:0 36px;font-size:21px}
footer{background:#22252A;color:#fff;font-size:14px;padding:24px 6vw;text-align:center}
.sticky{display:none}
@media (max-width:1000px){.tape{font-size:clamp(34px,8vw,60px)}}
@media (max-width:700px){
body{font-size:17px}
.banner{font-size:12px}
h1{font-size:40px}
h2{font-size:30px}
.btn-head{display:none}
.top{padding:14px 16px}
.hero{padding:32px 16px 48px}
.tape{font-size:clamp(22px,8.5vw,34px);padding:12px 16px;display:block;text-align:center;margin-right:0}
.board{padding:56px 16px;background-size:18px 18px}
.tags{grid-template-columns:1fr 1fr;gap:36px 16px}
.tags li{font-size:18px;padding:32px 10px 20px;min-height:84px}
.tags li:nth-child(odd){transform:rotate(-1deg)}
.tags li:nth-child(even){transform:rotate(1deg)}
.tags li:last-child{grid-column:1/-1;width:calc(50% - 8px);justify-self:center}
.traits,.who{padding:48px 16px 0}
.trait-grid{grid-template-columns:1fr}
.visit{padding:48px 16px}
.card{padding:24px}
.mono{font-size:14px}
.card .btn{width:100%;padding:0 8px;font-size:19px}
.tape{white-space:normal}
footer{padding:24px 16px 88px}
.sticky{display:flex;position:fixed;left:0;right:0;bottom:0;height:56px;align-items:center;justify-content:center;background:#2F6FB0;color:#fff;font-weight:500;text-decoration:none;z-index:10}
.tags li{display:flex;align-items:center;justify-content:center}
.tags li:last-child{width:calc(50% - 8px)}
}