/* ==========================================================================
   8X Gear — blog archive ("The Side Quest")
   Ported from blog.html, the `.bl-*` block. Class names are kept from the
   prototype so the two diff line by line; the markup is ours (home.php), so
   nothing here fights the parent theme.
   ========================================================================== */

.bl-wrap{max-width:1280px;margin:0 auto;padding:0 28px;}
.bl-kicker{
  margin:0 0 14px;color:var(--ct-red-ink);
  font-size:10px;font-weight:900;letter-spacing:.22em;text-transform:uppercase;
}

/* ==================================================== 1. hero */
/* `--ct-deep` rather than the page ink: the brand red only reaches 4.29:1 on
   #191D20, which fails AA for the small uppercase kicker. On #0F1113 it clears
   4.78:1. */
.blog .bl-hero,
.bl-hero{background:var(--ct-deep);color:#fff;padding:30px 0 60px;}
.bl-back{
  display:inline-flex;align-items:center;gap:10px;min-height:44px;
  color:rgba(255,255,255,.80);text-decoration:none;
  font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
}
.bl-back svg{width:15px;height:15px;flex:none;}
.bl-back span{white-space:nowrap;}
.bl-back:hover{color:#fff;text-decoration:underline;text-underline-offset:4px;}
.bl-crumb{
  margin:4px 0 34px;
  font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
}
.bl-crumb a{color:rgba(255,255,255,.64);text-decoration:none;}
.bl-crumb a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px;}
.bl-crumb i{font-style:normal;color:rgba(255,255,255,.36);padding:0 9px;}
.bl-crumb span{color:var(--ct-red);}
.bl-hero .bl-kicker{color:var(--ct-red);}
.bl-hero-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:56px;align-items:end;}
.bl-hero-title{
  margin:0;color:var(--ct-cream);font-size:clamp(44px,7.2vw,104px);line-height:.84;
  font-weight:900;letter-spacing:-.055em;text-transform:uppercase;
}
.bl-hero-title b{font-weight:inherit;color:var(--ct-red);}
.bl-hero-lead{
  margin:0 0 10px;padding-left:20px;border-left:3px solid var(--ct-red);
  max-width:44ch;font-size:15px;line-height:1.72;color:rgba(255,255,255,.80);
}

/* ==================================================== 2. filter bar */
.bl-bar{background:#fff;border-bottom:3px solid var(--ct-ink);padding:18px 0;}
.bl-bar-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.bl-chips{display:flex;flex-wrap:wrap;gap:7px;}
.bl-chip{
  margin:0;min-height:38px;padding:0 11px;
  background:#fff;border:1px solid var(--ct-ink);border-radius:0;color:#0E1013;cursor:pointer;
  font-family:inherit;font-size:10px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;
  transition:background .16s ease;
}
.bl-chip:hover{background:var(--ct-cream);}
.bl-chip[aria-pressed="true"]{background:var(--ct-red-ink);color:#fff;border-color:var(--ct-red-ink);}
.bl-chip[aria-pressed="true"]:hover{background:#A50A0A;}
/* margin-left:auto keeps the field pinned right even on the row it wraps onto. */
.bl-search{position:relative;flex:0 1 240px;min-width:200px;margin-left:auto;margin-bottom:0;}
.bl-search svg{
  position:absolute;left:13px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;color:var(--ct-quiet);pointer-events:none;z-index:1;
}
.bl-search input{
  width:100%;height:44px;margin:0;padding:0 14px 0 38px;
  background:#fff;border:1px solid var(--ct-ink);border-radius:0;box-shadow:none;color:#0E1013;
  font-family:inherit;font-size:14px;font-weight:600;
}
.bl-search input::placeholder{color:rgba(0,0,0,.46);font-weight:500;}

/* ==================================================== 3. featured */
.bl-feat{background:var(--ct-cream);padding:44px 0 52px;}
.bl-feat-card{
  display:grid;grid-template-columns:1.05fr 1fr;
  border:1px solid var(--ct-ink);background:#fff;text-decoration:none;
}
/* The lead shot is portrait; left uncapped it stretches the card to twice the
   height of the copy beside it. Capping the media and cropping from the centre
   keeps the subject and holds the two columns in proportion. */
.bl-feat-media{background:var(--ct-cream);overflow:hidden;max-height:500px;}
.bl-feat-media img{width:100%;height:100%;min-height:340px;object-fit:cover;object-position:center 45%;display:block;}
/* A post with no lead shot drops the media column rather than showing an empty
   frame, so the copy runs the full width of the card. */
.bl-feat-card:not(:has(.bl-feat-media)){grid-template-columns:1fr;}
.bl-feat-body{display:flex;flex-direction:column;padding:32px 34px 28px;}
.bl-feat-meta{
  margin:0 0 16px;color:var(--ct-red-ink);
  font-size:10px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;
}
.bl-feat-title{
  margin:0 0 18px;color:#0E1013;font-size:clamp(26px,3.1vw,42px);line-height:1.02;
  font-weight:900;letter-spacing:-.04em;text-transform:uppercase;
}
.bl-feat-card:hover .bl-feat-title{text-decoration:underline;text-underline-offset:5px;}
.bl-feat-ex{margin:0;max-width:56ch;font-size:15px;line-height:1.72;color:var(--ct-quiet);}
.bl-feat-foot{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:auto;padding-top:22px;border-top:1px solid var(--ct-ink);
  color:#0E1013;font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
}
.bl-feat-foot svg{width:20px;height:20px;color:var(--ct-red-ink);flex:none;}

/* ==================================================== 4. feed */
.bl-feed{padding:52px 0 76px;}
.bl-feed-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  padding-bottom:16px;border-bottom:2px solid var(--ct-ink);
}
.bl-feed-h{
  margin:0;color:#0E1013;font-size:clamp(30px,4vw,52px);line-height:.94;
  font-weight:900;letter-spacing:-.05em;text-transform:uppercase;
}
.bl-count{
  flex:none;margin:0;color:#0E1013;
  font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  font-variant-numeric:tabular-nums;
}
.bl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:30px;}

.bl-card{
  display:flex;flex-direction:column;
  border:1px solid var(--ct-line);background:var(--ct-cream);text-decoration:none;
  transition:border-color .16s ease,transform .16s ease;
}
.bl-card[hidden]{display:none;}
.bl-card:hover{border-color:var(--ct-ink);transform:translateY(-3px);}
.bl-card-media{position:relative;background:#fff;}
/* Portrait sources cropped to a landscape card: bias upward so faces and the
   top of a product stay in frame. */
.bl-card-media img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:center 40%;display:block;}
.bl-no{
  position:absolute;left:0;top:0;
  min-width:34px;padding:6px 9px;background:var(--ct-red-ink);color:#fff;
  font-size:11px;font-weight:900;letter-spacing:.06em;
  font-variant-numeric:tabular-nums;text-align:center;
}
/* A card without a photograph is a text-only variant carrying its own number,
   not a grey placeholder box. */
.bl-card-plain .bl-card-media{
  aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
  border-bottom:1px solid var(--ct-line);
}
.bl-card-plain .bl-plainmark{
  color:rgba(0,0,0,.10);font-size:86px;font-weight:900;letter-spacing:-.06em;
  line-height:1;font-variant-numeric:tabular-nums;
}
.bl-card-body{display:flex;flex-direction:column;flex:1 1 auto;padding:18px 19px 20px;}
.bl-card-meta{
  margin:0 0 10px;color:var(--ct-red-ink);
  font-size:10px;font-weight:900;letter-spacing:.15em;text-transform:uppercase;
}
.bl-card-title{
  margin:0 0 10px;color:#0E1013;font-size:16px;line-height:1.24;
  font-weight:900;letter-spacing:-.015em;text-transform:uppercase;
}
.bl-card:hover .bl-card-title{text-decoration:underline;text-underline-offset:4px;}
.bl-card-ex{margin:0 0 18px;font-size:13px;line-height:1.62;color:var(--ct-quiet);}
.bl-card-more{
  display:inline-flex;align-items:center;gap:8px;margin-top:auto;
  color:#0E1013;font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
}
.bl-card-more svg{width:15px;height:15px;color:var(--ct-red-ink);flex:none;}

.bl-empty{padding:64px 0;text-align:center;}
.bl-empty[hidden]{display:none;}
.bl-empty h3{margin:0 0 10px;color:#0E1013;font-size:20px;font-weight:900;letter-spacing:-.02em;text-transform:uppercase;}
.bl-empty p{margin:0 0 20px;font-size:15px;color:var(--ct-quiet);}
.bl-reset{
  min-height:48px;margin:0;padding:0 24px;border-radius:0;
  background:var(--ct-ink);color:#fff;border:0;cursor:pointer;
  font-family:inherit;font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
  transition:background .16s ease;
}
.bl-reset:hover{background:#000;}

.bl-hero :focus-visible{outline-color:#fff;}

/* ==================================================== responsive */
@media (max-width:1020px){
  .bl-hero-grid{grid-template-columns:1fr;gap:26px;align-items:start;}
  .bl-hero-lead{margin-bottom:0;}
  .bl-feat-card{grid-template-columns:1fr;}
  .bl-feat-media img{min-height:280px;}
  .bl-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:880px){
  .bl-wrap{padding:0 20px;}
  .bl-hero{padding:22px 0 44px;}
  .bl-bar-inner{gap:16px;}
  .bl-search{flex:1 1 100%;}
  .bl-feat-body{padding:24px 20px 22px;}
  .bl-grid{grid-template-columns:1fr;}
  .bl-feed{padding:40px 0 56px;}
}
@media (prefers-reduced-motion:reduce){
  .bl-card,.bl-chip,.bl-reset{transition:none;}
  .bl-card:hover{transform:none;}
}