/* HowToTactical homepage (Field Kit design) */

.htt-home{--bg:#F4F2EC;--surface:#FFFFFF;--ink:#1D211B;--muted:#5B6255;--olive:#3A4630;--olive-dark:#20271B;--line:#DAD7CC;--accent:#D9701C;--display:"Barlow Condensed","Arial Narrow",sans-serif;--body:"Barlow",system-ui,sans-serif;--r-sm:4px;--r-md:6px;--wrap:1200px;font-family:var(--body);color:var(--ink);background:var(--bg)}
body.home{overflow-x:hidden;background:#F4F2EC}
body.home .site-content{display:block;padding:0}
body.home #primary,body.home .content-area{width:100%;float:none;padding:0;margin:0}
.htt-home :where(h1,h2,h3,p,ul,figure,form){margin:0;padding:0}
.htt-home :where(ul){list-style:none}
.htt-bleed{width:100vw;margin-left:calc(50% - 50vw)}
.htt-wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* Hero */
.htt-hero{background:var(--olive-dark);color:#F4F2EC;padding:72px 0 0}
.htt-hero__grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:48px;align-items:end}
.htt-hero__copy{padding-bottom:88px}
.htt-hero h1{font-family:var(--display);font-weight:700;font-size:clamp(40px,4.4vw,60px);line-height:1;text-transform:uppercase;letter-spacing:.005em;color:#F4F2EC}
.htt-hero h1 em{font-style:normal;color:var(--accent)}
.htt-hero__sub{margin-top:20px;max-width:30em;font-size:19px;line-height:1.55;color:#C9CDBF}
.htt-search{margin-top:32px;display:flex;max-width:520px;background:#F4F2EC;border-radius:var(--r-sm);overflow:hidden}
.htt-search input[type=search]{flex:1;min-width:0;border:0;background:transparent;padding:16px 18px;font:400 17px/1.2 var(--body);color:var(--ink)}
.htt-search input[type=search]::placeholder{color:var(--muted)}
.htt-search input[type=search]:focus{outline:none}
.htt-search:focus-within{box-shadow:0 0 0 3px var(--accent)}
.htt-search button{border:0;border-radius:0;background:var(--accent);color:var(--ink);font:700 18px/1 var(--display);text-transform:uppercase;letter-spacing:.06em;padding:0 26px;cursor:pointer}
.htt-search button:hover{background:#C2611A}
.htt-hero__link{display:inline-block;margin-top:18px;color:#F4F2EC;font-weight:600;text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:2px}
.htt-hero__link:hover{color:var(--accent)}
.htt-hero__media{position:relative;align-self:stretch;margin-bottom:-64px}
.htt-hero__media img{display:block;width:100%;height:100%;min-height:420px;object-fit:cover;border-radius:var(--r-md);filter:saturate(.85) contrast(1.05)}
.htt-hero__media::after{content:"";position:absolute;left:-14px;bottom:-14px;width:46%;height:46%;border-left:6px solid var(--accent);border-bottom:6px solid var(--accent);border-radius:0 0 0 var(--r-md);pointer-events:none}

/* Categories bento */
.htt-cats{padding:128px 0 72px}
.htt-cats h2,.htt-latest h2{font-family:var(--display);font-weight:700;font-size:clamp(34px,3.6vw,48px);line-height:1.05;text-transform:uppercase;color:var(--ink)}
.htt-cats__intro{margin-top:10px;max-width:38em;font-size:18px;line-height:1.6;color:var(--muted)}
.htt-bento{margin-top:36px;display:grid;grid-template-columns:1.25fr 1fr 1fr;grid-template-rows:260px 260px;gap:14px}
.htt-tile{position:relative;display:block;overflow:hidden;border-radius:var(--r-md);background:var(--olive);text-decoration:none!important}
.htt-tile--lead{grid-row:span 2}
.htt-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.htt-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(32,39,27,.92) 0%,rgba(32,39,27,.45) 45%,rgba(32,39,27,.05) 100%)}
.htt-tile__body{position:absolute;left:22px;right:22px;bottom:20px;z-index:1;color:#F4F2EC}
.htt-tile__title{display:block;font-family:var(--display);font-weight:700;font-size:30px;line-height:1;text-transform:uppercase;letter-spacing:.01em}
.htt-tile--lead .htt-tile__title{font-size:48px}
.htt-tile__meta{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:15px;color:#C9CDBF}
.htt-tile__meta::before{content:"";width:22px;height:3px;background:var(--accent)}
.htt-tile--lead .htt-tile__desc{display:block;margin-top:12px;max-width:26em;font-size:17px;line-height:1.5;color:#C9CDBF}
.htt-tile:hover img,.htt-tile:focus-visible img{transform:scale(1.04)}
.htt-tile:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* Latest */
.htt-latest{padding:8px 0 88px}
.htt-latest__head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;border-bottom:3px solid var(--ink);padding-bottom:12px}
.htt-latest__all{font-weight:600;color:var(--olive);text-decoration:none;white-space:nowrap}
.htt-latest__all:hover{color:var(--accent)}
.htt-list{display:grid;grid-template-columns:1fr 1fr;column-gap:48px}
.htt-list li{border-bottom:1px solid var(--line)}
.htt-list a{display:grid;grid-template-columns:96px 1fr;gap:18px;align-items:center;padding:18px 0;text-decoration:none;color:var(--ink)}
.htt-list img{width:96px;height:64px;object-fit:cover;border-radius:var(--r-sm);background:var(--line)}
.htt-list__cat{display:block;font:600 13px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--olive)}
.htt-list__title{display:block;margin-top:6px;font-weight:600;font-size:18px;line-height:1.3}
.htt-list a:hover .htt-list__title{color:var(--accent)}

@media (max-width:900px){
 .htt-hero{padding-top:48px}
 .htt-hero__grid{grid-template-columns:1fr;gap:32px}
 .htt-hero__copy{padding-bottom:0}
 .htt-hero__media{margin-bottom:-48px}
 .htt-hero__media img{min-height:260px;max-height:340px}
 .htt-cats{padding-top:96px}
 .htt-bento{grid-template-columns:1fr 1fr;grid-template-rows:none;grid-auto-rows:200px}
 .htt-tile--lead{grid-column:1 / -1;grid-row:auto}
 .htt-tile--lead .htt-tile__title{font-size:40px}
 .htt-list{grid-template-columns:1fr}
}
@media (max-width:560px){
 .htt-bento{grid-template-columns:1fr;grid-auto-rows:180px}
 .htt-tile--lead .htt-tile__desc{display:none}
 .htt-search button{padding:0 18px}
}
@media (prefers-reduced-motion:reduce){.htt-tile img{transition:none}.htt-tile:hover img{transform:none}}
.htt-list__ph{display:block;width:96px;height:64px;border-radius:var(--r-sm);background:var(--olive)}
@media (max-width:560px){.htt-br{display:none}}