@font-face{
  font-family:'Brother Garage Rough';
  src:url(/assets/fonts/bgs-rough.woff2) format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}

.hb{
  --hb-mono:'Courier Prime','Courier New',ui-monospace,monospace;
  --hb-slab:'Brother Garage Rough','Familjen Grotesk',Georgia,serif;
  --hb-red:#AF3E24;
  position:relative; overflow:hidden; isolation:isolate;
  border-radius:clamp(20px,2.2vw,32px);
  background:#241D19; color:#F6EFE1;
}
.hb__media{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;
  filter:grayscale(.5) contrast(1.08) brightness(.64);
}
.hb__scrim{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(180deg,rgba(18,14,11,.6) 0%,rgba(18,14,11,.2) 40%,rgba(18,14,11,.58) 80%,rgba(18,14,11,.82) 100%),
    radial-gradient(ellipse 72% 56% at 50% 48%,rgba(18,14,11,.12) 0%,rgba(18,14,11,.44) 100%);
}
.hb__grain{
  position:absolute; inset:-18%; z-index:-1; pointer-events:none;
  opacity:.16; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  animation:hb-grain 1.1s steps(3) infinite;
}
@keyframes hb-grain{
  0%{transform:translate3d(0,0,0)}
  33%{transform:translate3d(-2%,1.5%,0)}
  66%{transform:translate3d(1.5%,-1%,0)}
  100%{transform:translate3d(0,0,0)}
}

.hb__in{
  position:relative; z-index:1;
  padding:clamp(38px,5vw,72px) clamp(24px,4vw,64px);
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--sp-md);
}
.hb__kicker{
  font-family:var(--hb-mono); font-size:clamp(11px,1.15vw,13px); letter-spacing:.2em;
  text-transform:uppercase; color:rgba(246,239,225,.86); margin:0;
}
.hb__titluWrap{ position:relative; display:inline-block; }
.hb__titlu{
  font-family:var(--hb-slab); font-weight:400; text-transform:uppercase;
  font-size:clamp(44px,8vw,104px); line-height:.96; letter-spacing:.005em; margin:0;
  color:#F6EFE1; text-shadow:0 20px 70px rgba(0,0,0,.8);
}
.hb__stamp{
  position:absolute; right:-7%; top:-40%;
  display:inline-block; font-family:var(--hb-mono); font-weight:700; text-transform:uppercase;
  letter-spacing:.18em; color:var(--hb-red); border:2.5px solid currentColor; border-radius:3px;
  padding:7px 15px; font-size:clamp(10.5px,1.3vw,16px); line-height:1.2;
  box-shadow:inset 0 0 0 1px rgba(175,62,36,.35); opacity:.92; transform:rotate(-9deg);
  background:rgba(36,29,25,.3); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.hb__sub{
  font-family:var(--hb-mono); font-size:clamp(14px,1.35vw,16.5px); line-height:1.75;
  color:#F6EFE1; text-shadow:0 2px 22px rgba(0,0,0,.75); margin:0; max-width:52ch;
}

.hb__pills{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.hb__pills li{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--hb-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:#F6EFE1; background:rgba(18,14,11,.55); border:1px solid rgba(246,239,225,.2);
  border-radius:8px; padding:7px 14px 6px 11px;
}
.hb__pills li::before{
  content:""; flex:0 0 auto; width:5px; height:5px; border-radius:50%; background:var(--hb-red);
}

.hb__cd{ display:flex; flex-direction:column; align-items:center; gap:var(--sp-xs); }
.hb__cdLabel{
  margin:0; font-family:var(--hb-mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(246,239,225,.74);
}
.hb__tags{ display:flex; gap:var(--sp-2xs); flex-wrap:wrap; justify-content:center; }
.hb__tag{
  background:rgba(246,239,225,.12); border:1px solid rgba(246,239,225,.22);
  border-radius:8px; padding:10px 10px 9px; text-align:center; min-width:66px;
}
.hb__tag b{
  display:block; font-family:var(--hb-slab); font-weight:400; font-size:clamp(24px,2.6vw,31px);
  line-height:1; color:#F6EFE1; font-variant-numeric:tabular-nums;
}
.hb__tag span{
  display:block; margin-top:5px; font-family:var(--hb-mono); font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(246,239,225,.86);
}

@media (max-width:560px){
  .hb__stamp{ right:-5%; top:-46%; padding:5px 11px; border-width:2px; letter-spacing:.14em; }
  .hb__pills li{ font-size:11px; padding:6px 11px 5px 9px; }
  .hb__tags{ width:100%; flex-wrap:nowrap; gap:6px; }
  .hb__tag{ flex:1 1 0; min-width:0; padding:9px 4px 8px; }
  .hb__tag span{ font-size:9.5px; letter-spacing:.1em; }
}