.contextual-thread {
  position: relative;
  margin: -4px 0 34px;
  padding: 16px 20px 15px 24px;
  border-left: 7px solid #f58220;
  background: #fff;
  box-shadow: 5px 5px 0 #111;
}

.contextual-thread::before {
  content: '↳';
  position: absolute;
  left: -4px;
  top: -20px;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: 34px;
  line-height: 1;
  color: #111;
}

.contextual-thread p {
  margin: 0;
  font-size: 17px;
  font-weight: 730;
  line-height: 1.48;
}

.contextual-thread a {
  color: #111;
  font-weight: 950;
  text-decoration-thickness: 3px;
  text-decoration-color: #f58220;
  text-underline-offset: 3px;
}

.contextual-thread a:hover,
.contextual-thread a:focus-visible {
  background: #fff5e9;
  outline: 3px solid #111;
  outline-offset: 2px;
}

.contextual-thread span {
  display: block;
  margin-top: 9px;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .09em;
  text-transform: uppercase;
}

@media (max-width: 560px) {
  .contextual-thread {
    margin-bottom: 28px;
    padding: 15px 16px 14px 20px;
    border-left-width: 5px;
    box-shadow: 4px 4px 0 #111;
  }

  .contextual-thread p { font-size: 15px; }
}