.hba-roundup-intro{
  position:relative;
  margin:2rem 0 1.25rem;
  padding:25px 30px 23px;
  overflow:hidden;
  color:#e8dfcc;
  background:
    linear-gradient(103deg,transparent 0 72%,rgba(229,165,54,.035) 72% 73%,transparent 73%),
    radial-gradient(circle at 78% 22%,rgba(229,165,54,.09),transparent 22%),
    #101a15;
  border:1px solid rgba(229,165,54,.48);
  box-shadow:inset 0 0 0 6px rgba(0,0,0,.18),0 10px 24px rgba(9,14,11,.13);
}
.hba-roundup-intro:before{
  content:"CELLAR LIST  /  HOUSE PICKS  /  POUR DEEPER";
  position:absolute;
  right:24px;
  top:12px;
  color:rgba(244,234,214,.075);
  font:800 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.18em;
  transform:rotate(-2deg);
}
.hba-roundup-intro>span{
  display:block;
  margin-bottom:12px;
  color:#e5a536;
  font:900 12px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.2em;
}
.hba-roundup-intro p{margin:0 0 9px!important;font-size:16px;line-height:1.6}
.hba-roundup-intro p:last-child{margin-bottom:0!important}
.hba-roundup-list-title{
  margin:1.45rem 0 1rem!important;
  font-size:clamp(34px,5vw,58px)!important;
  letter-spacing:-.035em;
}

.hba-beer-context{
  position:relative;
  margin:22px 20px 50px;
  padding:4px 18px 2px 22px;
  border-left:3px solid rgba(198,123,44,.58);
  color:#292925;
}
.hba-beer-context__label{
  display:block;
  margin:0 0 8px!important;
  color:#8f4f17!important;
  font:900 10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace!important;
  letter-spacing:.16em;
  text-transform:uppercase;
}
body.single-post .single-content .hba-beer-context p:not(.hba-beer-context__label){
  margin:0 0 .85em;
  font-size:17px;
  line-height:1.72;
  color:#3a3832;
}
body.single-post .single-content .hba-beer-context p:last-child{margin-bottom:0}
.hba-beer-context:after{
  content:"";
  position:absolute;
  left:-2px;
  bottom:-17px;
  width:74px;
  height:10px;
  border-bottom:2px solid rgba(36,55,43,.18);
  border-radius:50%;
  transform:rotate(-2deg);
}

.hba-roundup-endcap{
  position:relative;
  margin:3.2rem 0 2.5rem;
  padding:34px;
  overflow:hidden;
  color:#f4ead6;
  background:
    radial-gradient(circle at 88% 15%,transparent 0 84px,rgba(229,165,54,.11) 85px 89px,transparent 90px),
    radial-gradient(circle at 88% 15%,transparent 0 112px,rgba(229,165,54,.045) 113px 116px,transparent 117px),
    linear-gradient(114deg,transparent 0 68%,rgba(125,79,47,.07) 68% 69%,transparent 69%),
    #0d1712;
  border:1px solid rgba(229,165,54,.52);
  box-shadow:inset 0 0 0 7px rgba(0,0,0,.22),0 15px 34px rgba(9,14,11,.18);
}
.hba-roundup-endcap:before{
  content:"AFTER HOURS  ·  KEEP POURING";
  position:absolute;
  right:26px;
  top:17px;
  color:rgba(244,234,214,.07);
  font:800 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.2em;
  transform:rotate(-2deg);
}
.hba-roundup-endcap__head{position:relative;z-index:1;max-width:760px;margin-bottom:27px}
.hba-roundup-endcap__head>span{
  display:block;
  margin-bottom:10px;
  color:#e5a536;
  font:900 12px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.22em;
}
.hba-roundup-endcap__head h2{
  margin:0 0 10px!important;
  color:#fff6e8!important;
  font-size:clamp(31px,4vw,48px)!important;
  line-height:1.02!important;
  letter-spacing:-.035em;
}
.hba-roundup-endcap__head p{margin:0!important;color:rgba(244,234,214,.76);font-size:16px;line-height:1.55}
.hba-roundup-link-section{position:relative;z-index:1;margin-top:24px;padding-top:19px;border-top:1px solid rgba(244,234,214,.18)}
.hba-roundup-link-section h3{
  margin:0 0 12px!important;
  color:#e5a536!important;
  font:900 11px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace!important;
  letter-spacing:.2em!important;
}
.hba-roundup-link-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.hba-roundup-link-grid a{
  position:relative;
  min-height:94px;
  padding:16px 15px 14px;
  color:#f4ead6!important;
  text-decoration:none!important;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(244,234,214,.2);
  border-left:3px solid rgba(169,97,43,.8);
  box-shadow:2px 3px 0 rgba(0,0,0,.18);
  transition:transform .16s ease,border-color .16s ease,background .16s ease;
}
.hba-roundup-link-grid a:nth-child(even){transform:rotate(.35deg)}
.hba-roundup-link-grid a:nth-child(odd){transform:rotate(-.25deg)}
.hba-roundup-link-grid a:hover,.hba-roundup-link-grid a:focus-visible{
  transform:translateY(-3px) rotate(0);
  border-color:rgba(229,165,54,.72);
  background:rgba(229,165,54,.07);
  outline:none;
}
.hba-roundup-link-grid strong{display:block;margin-bottom:6px;color:#fff6e8;font-size:16px;line-height:1.15}
.hba-roundup-link-grid small{display:block;color:rgba(244,234,214,.59);font-size:12px;line-height:1.35}
.hba-roundup-link-section--brew{margin-top:20px}
.hba-roundup-link-grid--brew{grid-template-columns:repeat(4,minmax(0,1fr))}
.hba-roundup-link-grid--brew a{border-left-color:rgba(229,165,54,.78)}

@media(max-width:760px){
  .hba-roundup-intro{padding:23px 20px 21px}
  .hba-roundup-intro:before{display:none}
  .hba-roundup-endcap{padding:27px 20px}
  .hba-roundup-endcap:before{display:none}
  .hba-roundup-link-grid,.hba-roundup-link-grid--brew{grid-template-columns:1fr 1fr}
  .hba-roundup-link-grid a{min-height:88px}
  .hba-beer-context{margin:18px 4px 42px;padding-left:17px;padding-right:4px}
  body.single-post .single-content .hba-beer-context p:not(.hba-beer-context__label){font-size:16px;line-height:1.68}
}

@media(max-width:440px){
  .hba-roundup-link-grid,.hba-roundup-link-grid--brew{grid-template-columns:1fr}
}