.article-engagement {
  padding:clamp(34px,5vw,68px) var(--pad) clamp(60px,8vw,104px);
  overflow:hidden;
  background:#d7ccba;
  color:var(--ink);
}

.article-engagement-visual {
  position:relative;
  max-width:1320px;
  height:clamp(320px,34vw,500px);
  margin:0 auto;
  overflow:hidden;
  border:1px solid rgba(17,17,15,.16);
  border-radius:clamp(20px,2.5vw,34px);
  background:#cfc2ac;
  box-shadow:0 24px 60px rgba(43,34,22,.18);
}

.article-engagement-visual::after {
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:24%;
  pointer-events:none;
  background:linear-gradient(transparent,rgba(29,24,18,.2));
}

.article-engagement-visual img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 12%;
}

.article-engagement-panel {
  position:relative;
  z-index:1;
  width:min(1080px,calc(100% - clamp(20px,5vw,72px)));
  margin:clamp(-76px,-5.4vw,-52px) auto 0;
  padding:clamp(26px,3.3vw,44px);
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(330px,.92fr);
  align-items:center;
  gap:clamp(28px,4.6vw,62px);
  background:var(--paper);
  border:1px solid rgba(17,17,15,.16);
  border-radius:clamp(18px,2vw,28px);
  box-shadow:0 22px 54px rgba(43,34,22,.22);
}

.article-engagement-copy > span {
  display:inline-block;
  margin-bottom:15px;
  padding:6px 9px;
  background:var(--acid);
  font-size:10px;
  font-weight:850;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.article-engagement-copy h2 {
  max-width:610px;
  margin:0;
  font-size:clamp(31px,3.75vw,50px);
  line-height:.97;
  letter-spacing:-.045em;
}

.article-engagement-copy p {
  max-width:560px;
  margin:17px 0 0;
  color:var(--muted);
  font-family:var(--serif);
  font-size:15px;
  line-height:1.48;
}

.article-engagement-controls {
  display:grid;
  align-content:center;
  gap:13px;
}

.engagement-button,
.engagement-helpful {
  appearance:none;
  border:0;
  font:inherit;
  cursor:pointer;
}

.engagement-button {
  min-height:54px;
  padding:0 18px;
  display:grid;
  grid-template-columns:22px minmax(0,1fr) 22px;
  align-items:center;
  gap:12px;
  border:1px solid var(--ink);
  border-radius:999px;
  font-size:10px;
  font-weight:850;
  letter-spacing:.1em;
  text-decoration:none;
  text-transform:uppercase;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease;
}

.engagement-button::after {
  content:"";
  width:22px;
  height:1px;
}

.engagement-button > span,
.engagement-helpful > span {
  min-width:0;
  text-align:center;
  line-height:1.25;
}

.engagement-button svg,
.engagement-helpful svg {
  width:22px;
  height:22px;
  flex:none;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.engagement-button-primary {
  min-height:70px;
  padding-inline:24px;
  background:var(--acid);
  color:var(--ink);
  box-shadow:6px 6px 0 var(--ink);
  font-size:13px;
  letter-spacing:.075em;
}

.engagement-button-primary::after {
  content:none;
}

.engagement-button-primary strong {
  min-width:1.6em;
  justify-self:end;
  text-align:center;
  color:var(--violet);
}

.engagement-button-copy {
  background:transparent;
  color:var(--ink);
}

.engagement-button-rss {
  background:var(--coral);
  color:var(--ink);
}

.engagement-button:hover,
.engagement-button:focus-visible {
  transform:translate(-3px,-3px);
  box-shadow:7px 7px 0 var(--violet);
  outline:none;
}

.engagement-button-copy:hover,
.engagement-button-copy:focus-visible {
  background:var(--ink);
  color:var(--paper);
}

.article-engagement-secondary {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:10px;
}

.article-engagement-secondary .engagement-button,
.article-engagement-secondary .engagement-helpful {
  min-width:0;
  padding-inline:13px;
}

.engagement-helpful {
  min-height:54px;
  padding:0 16px;
  display:grid;
  grid-template-columns:22px minmax(0,1fr) 22px;
  align-items:center;
  gap:12px;
  background:transparent;
  border:1px solid var(--ink);
  border-radius:999px;
  color:var(--ink);
  font-size:10px;
  font-weight:850;
  letter-spacing:.065em;
  text-transform:uppercase;
}

.engagement-helpful strong {
  min-width:1.6em;
  justify-self:end;
  text-align:center;
  color:var(--violet);
}

.engagement-helpful:hover,
.engagement-helpful:focus-visible,
.engagement-helpful[aria-pressed="true"] {
  background:var(--violet);
  border-color:var(--violet);
  color:#fff;
  outline:none;
}

.engagement-helpful[aria-pressed="true"] strong {
  color:var(--acid);
}

.engagement-helpful:disabled {
  cursor:default;
}

.article-engagement-status {
  min-height:1.4em;
  margin:0;
  color:var(--muted);
  font-size:11px;
  line-height:1.4;
}

@media (max-width:900px) {
  .article-engagement-panel {
    grid-template-columns:minmax(0,1fr);
  }

  .article-engagement-controls {
    max-width:540px;
  }
}

@media (max-width:700px) {
  .article-engagement {
    padding-left:var(--pad);
    padding-right:var(--pad);
  }

  .article-engagement-visual {
    width:100%;
    height:auto;
    aspect-ratio:3/2;
    border-radius:20px;
  }

  .article-engagement-visual img {
    object-position:center;
  }

  .article-engagement-panel {
    width:calc(100% - 18px);
    margin:-18px auto 0;
    padding:24px 20px 20px;
    gap:24px;
    border-radius:18px;
  }

  .article-engagement-copy h2 {
    font-size:clamp(31px,9.5vw,43px);
    overflow-wrap:anywhere;
  }

  .article-engagement-secondary {
    grid-template-columns:minmax(0,1fr);
  }
}

@media (max-width:360px) {
  .engagement-button {
    min-height:54px;
    padding:0 17px;
    font-size:10px;
  }

  .engagement-button-primary {
    min-height:66px;
    font-size:12px;
  }
}

@media (prefers-reduced-motion:reduce) {
  .engagement-button {
    transition:none;
  }
}