.reactions-zone{
  border-top:2px solid var(--ink);
  border-bottom:2px solid var(--ink);
  background:var(--paper);
}
.reactions-zone .section{padding-top:74px;padding-bottom:74px}
.reactions-intro{max-width:760px}
.reactions-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin-top:32px;
}
.reaction-card{
  position:relative;
  min-height:310px;
  display:flex;
  flex-direction:column;
  background:var(--bone);
  border:2px solid var(--ink);
  box-shadow:7px 7px 0 rgba(17,21,18,.1);
  padding:22px;
}
.reaction-card::before{
  content:"";
  position:absolute;
  left:-2px;
  top:-2px;
  bottom:-2px;
  width:7px;
  background:var(--red);
  border-right:2px solid var(--ink);
}
.reaction-meta{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  margin-left:4px;
}
.reaction-date,.reaction-source{
  font:800 10px/1.25 "IBM Plex Mono",monospace;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.reaction-date{color:var(--red)}
.reaction-source{text-align:right;color:var(--green)}
.reaction-tag{
  display:inline-flex;
  align-self:flex-start;
  margin:20px 0 0 4px;
  border:1.5px solid var(--ink);
  background:var(--paper);
  padding:5px 7px;
  font:800 9px/1 "IBM Plex Mono",monospace;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.reaction-card h3{
  margin:15px 0 10px 4px;
  font-family:"Archivo Black",Impact,sans-serif;
  font-size:clamp(22px,2.4vw,32px);
  line-height:1.02;
  letter-spacing:-.035em;
  text-transform:uppercase;
}
.reaction-card p{
  margin:0 0 20px 4px;
  color:#4d514c;
  font-size:13px;
  line-height:1.55;
}
.reaction-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:flex-start;
  margin:auto 0 0 4px;
  min-height:42px;
  border:2px solid var(--ink);
  background:var(--ink);
  color:white;
  padding:10px 13px;
  text-decoration:none;
  font:900 10px/1 "IBM Plex Mono",monospace;
  text-transform:uppercase;
  letter-spacing:.04em;
  box-shadow:3px 3px 0 var(--red);
}
.reaction-link:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--red)}
.reactions-more{
  display:flex;
  justify-content:center;
  margin-top:34px;
}
.reactions-more .cta{background:var(--green)}

.reactions-page{
  min-height:100vh;
  background:
    linear-gradient(rgba(17,21,18,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(17,21,18,.028) 1px,transparent 1px),
    var(--bone);
  background-size:24px 24px;
}
.reactions-page-hero{
  border-bottom:2px solid var(--ink);
  background:var(--red);
  color:white;
}
.reactions-page-hero-inner{
  width:min(1320px,calc(100% - 32px));
  margin:auto;
  padding:68px 0 58px;
}
.reactions-page-hero .section-kicker{color:#b8ffc9}
.reactions-page-hero h1{
  max-width:980px;
  margin:10px 0 18px;
  font-family:"Archivo Black",Impact,sans-serif;
  font-size:clamp(56px,9vw,118px);
  line-height:.82;
  letter-spacing:-.065em;
  text-transform:uppercase;
}
.reactions-page-hero p{
  max-width:760px;
  margin:0;
  font-size:17px;
  line-height:1.6;
  font-weight:650;
}
.reactions-page-toolbar{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:center;
  flex-wrap:wrap;
  margin:0 0 28px;
}
.reactions-page-count{
  font:800 10px/1 "IBM Plex Mono",monospace;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
}
.reactions-page-back{
  display:inline-flex;
  border:2px solid var(--ink);
  background:var(--paper);
  color:var(--ink);
  padding:10px 13px;
  text-decoration:none;
  font-weight:900;
  box-shadow:3px 3px 0 var(--ink);
}
.reactions-page .reactions-grid{margin-top:0}
.reaction-card.featured{background:#f7d9d9}
.reaction-card.featured::before{background:var(--green)}

@media(max-width:900px){
  .reactions-grid{grid-template-columns:1fr}
  .reaction-card{min-height:0}
}
@media(max-width:780px){
  .reactions-zone .section{padding-top:58px;padding-bottom:58px}
  .reactions-page-hero-inner{padding:48px 0 42px}
}
@media(max-width:480px){
  .reaction-card{padding:18px 16px 18px 18px}
  .reaction-card h3{font-size:24px}
  .reaction-meta{display:grid;grid-template-columns:1fr;gap:4px}
  .reaction-source{text-align:left}
  .reactions-page-hero-inner{width:min(100% - 20px,1320px)}
  .reactions-page-hero h1{font-size:clamp(46px,16vw,70px)}
}