/* Layout v2 (preview): utilitarian outfitter layout. Overrides site.css. */
:root{--red:#c41e18;--ink:#111;--mute:#6b6b6b;--line:#e2e2e2}
.promo{background:#111;color:#fff;font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:11px}
.nav{height:68px;padding:0 32px;border-bottom:1px solid var(--line);gap:24px}
.logo img{width:46px}
#mainnav{display:flex;align-items:center;height:100%;flex:1;margin-left:20px}
#mainnav>a,.mmb{margin:0;padding:0 16px;height:100%;display:flex;align-items:center;font:700 13px Inter,sans-serif;text-transform:uppercase;letter-spacing:.08em;background:none;border:0;color:var(--ink);border-bottom:3px solid transparent}
#mainnav>a:hover,.mm.open .mmb{border-bottom-color:var(--red);color:var(--ink)}
.mmb::after{content:"";display:inline-block;margin-left:7px;border:4px solid transparent;border-top:5px solid currentColor;transform:translateY(3px)}
.mm{height:100%}
.mmp{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--line);border-bottom:4px solid var(--ink);padding:32px 48px 40px;grid-template-columns:repeat(3,200px) 1fr;gap:40px;box-shadow:0 18px 30px rgba(0,0,0,.08)}
.mm.open .mmp{display:grid}
.mmc h6{font:700 11px Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.mmc a,.mmc .cs{display:block;font-weight:600;font-size:15px;padding:6px 0;margin:0}.mmc a:hover{color:var(--red)}
.mmc .cs{color:#a3a3a3}.mmc .cs em{font-style:normal;font-size:10px;letter-spacing:.08em;text-transform:uppercase;border:1px solid #d4d4d4;padding:1px 5px;margin-left:6px;vertical-align:2px}
.mmf{position:relative;justify-self:end;width:260px;margin:0}.mmf img{aspect-ratio:4/3;object-fit:cover}.mmf span{position:absolute;left:0;bottom:0;background:var(--ink);color:#fff;font:700 12px Inter;letter-spacing:.08em;text-transform:uppercase;padding:8px 12px}
.tools{font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
/* sections */
.sec{padding:64px 32px 0}
.sec-h{display:flex;justify-content:space-between;align-items:end;border-bottom:3px solid var(--ink);padding-bottom:12px;margin-bottom:20px}
.sec-h h2{font-size:clamp(34px,4vw,52px)}.sec-h a{font:700 12px Inter;letter-spacing:.1em;text-transform:uppercase;border-bottom:2px solid var(--red);padding-bottom:2px}
.cats4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.ct{display:block;background:#f3f3f3;position:relative;overflow:hidden}.ct img{aspect-ratio:1;object-fit:cover;transition:transform .4s}.ct:hover img{transform:scale(1.04)}
.ct span{display:flex;justify-content:space-between;align-items:center;background:var(--ink);color:#fff;font:400 26px Anton,sans-serif;text-transform:uppercase;padding:12px 16px}
.ct span::after{content:"→";font:700 18px Inter}.ct:hover span{background:var(--red)}
.sec .grid{gap:12px}.prod{border:1px solid var(--line);padding-bottom:16px}.prod .tag{font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.story{display:grid;grid-template-columns:1.1fr 1fr;margin-top:72px;background:var(--ink);color:#fff}
.story-img img{height:100%;min-height:440px;object-fit:cover}
.story-txt{padding:72px 56px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;border-left:6px solid var(--red)}
.kick{font:700 12px Inter;letter-spacing:.14em;text-transform:uppercase;color:#bdbdbd;margin-bottom:14px}
.story-txt h2{font-size:clamp(56px,7vw,110px);margin-bottom:22px}.story-txt h2 span{color:var(--red)}.story-txt p:not(.kick){font-size:17px;max-width:380px;margin-bottom:30px;color:#ddd}
.story-txt .btn{background:var(--red)}.story-txt .btn:hover{background:#fff;color:var(--ink)}
.strip{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}
.strip div{padding:26px 32px;border-right:1px solid var(--line)}.strip div:last-child{border:0}
.strip b{display:block;font:700 13px Inter;letter-spacing:.08em;text-transform:uppercase}.strip span{color:var(--mute);font-size:13px}
main.home+.foot{margin-top:0}
.foot{background:#f6f6f6}
/* shop page */
.shop-head h1{font-size:52px}.cats a{font-size:13px;text-transform:uppercase;letter-spacing:.08em;font-weight:700}
/* product */
.fit{margin:20px 0 0;font-size:15px;padding:12px 14px;background:#f5f5f5;border-left:4px solid var(--ink)}
.sclink{background:none;border:0;font-weight:700;text-decoration:underline;margin-left:6px;font-size:15px}
.scd{border:0;padding:32px;max-width:640px;width:calc(100% - 32px);margin:auto}.scd::backdrop{background:rgba(0,0,0,.55)}
.scd h3{font-size:36px}.scn{color:var(--mute);font-size:13px;margin:6px 0 16px}
.scd table{width:100%;border-collapse:collapse;font-size:14px}.scd th,.scd td{border-bottom:1px solid var(--line);padding:10px 8px;text-align:left}.scd th{font-size:11px;letter-spacing:.08em;text-transform:uppercase;background:var(--ink);color:#fff}
.scx{position:absolute;right:14px;top:8px;background:none;border:0;font-size:30px}
@media (max-width:900px){
 .nav{padding:0 16px;height:60px}.tools .dsk{display:none}.menu{display:block;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:12px}
 #mainnav{display:none;margin:0}
 body.navopen #mainnav{display:block;position:fixed;inset:60px 0 0 0;background:#fff;overflow:auto;padding:16px 20px 40px;z-index:6;height:auto}
 body.navopen #mainnav>a{height:auto;padding:16px 0;border-bottom:1px solid var(--line);font:400 30px Anton,sans-serif}
 .mm{height:auto}.mmb{display:none}.mmp{display:block!important;position:static;border:0;box-shadow:none;padding:0 0 8px}
 .mmc{margin-bottom:20px}.mmf{display:none}
 .sec{padding:44px 16px 0}.cats4{grid-template-columns:1fr 1fr;gap:8px}.ct span{font-size:20px;padding:10px 12px}
 .sec .grid{gap:8px}
 .story{grid-template-columns:1fr;margin-top:48px}.story-img img{min-height:0;aspect-ratio:4/3}.story-txt{padding:40px 20px;border-left:0;border-top:6px solid var(--red)}
 .strip{grid-template-columns:1fr}.strip div{border-right:0;border-bottom:1px solid var(--line);padding:18px 16px}
 .scd{padding:24px 14px}.scd th,.scd td{padding:8px 5px;font-size:12px}
}
.mmc .cs{white-space:nowrap}
@media (max-width:900px){
 body.navopen #mainnav{position:absolute;inset:100% 0 auto 0;height:calc(100vh - 60px);border-top:1px solid var(--line)}
 body.navopen #mainnav .mmc a{font:400 26px/1.1 Anton,sans-serif;text-transform:uppercase;margin:0;padding:8px 0}
 body.navopen #mainnav .mmc .cs{font-size:14px;padding:6px 0}
}
@media (max-width:900px){body.navopen #mainnav>a:not([href="/about.html"]){display:none}}
