/* Tejori — single blog article (the hero comes from blog.css, with the
   overrides below: on an article it sits lower, is a little narrower, and
   the share icons are smaller) */

.ap {
  padding-bottom: 2.604vw;
}

.ap .lh {
  margin-top: 3.281vw;
}

.ap .lh__w {
  margin-bottom: 2.604vw;
}

.ap .lh__d {
  margin-bottom: 0;
  padding-right: 0;
}

.ap .lh__img {
  width: 58.281vw;
}

.ap .lh__img img {
  height: 38.438vw;
}

/* a flat pixel offset here, exactly as the original wrote it */
.ap .lh__tags {
  top: 77px;
}

.ap .bi__soc {
  justify-content: flex-start;
  gap: 1.146vw;
  margin-top: 0;
}

.ap .bi__soc a {
  line-height: 1;
}

.ap .bi__soc svg {
  max-width: 1.563vw;
}

/* ---------- date + share row ---------- */

.ap__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 3.646vw;
  padding-bottom: 1.719vw;
}

.ap__date {
  display: flex;
  align-items: center;
  gap: .521vw;
  font-size: .854vw;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  color: #000;
}

.ap__date svg {
  width: 1.042vw;
  height: .99vw;
}

.ap__share {
  display: flex;
  align-items: center;
  gap: 2.083vw;
}

.ap__shr {
  font-size: .854vw;
  font-weight: 600;
  line-height: 0;
  text-transform: uppercase;
  color: #000;
}

/* the caret is turned on its side to point back at the blog. In the original
   it sits on a text baseline, which drops it a few pixels — these offsets put
   it in the same place without the empty line box */
.ap__back {
  position: absolute;
  top: 7px;
  left: 3px;
  transform: rotate(90deg);
}

.ap__back svg {
  width: 30px;
  height: 15px;
}

/* ---------- body copy ---------- */

.at {
  padding-inline: 5.208vw;
}

.at h2 {
  margin: 0 0 2.083vw;
  font-size: 2.763vw;
  font-weight: 600;
  line-height: 3.542vw;
  letter-spacing: .414vw;
  text-transform: uppercase;
  color: #000;
}

.at p {
  margin: 0;
  font-size: 1.146vw;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0;
  color: #000;
}

.at p + h2,
.at p + p {
  margin-top: 2.344vw;
}

.at p.at__lead {
  margin-bottom: 3.646vw;
}

/* ---------- community band ---------- */

.cm__in {
  padding-inline: 5.208vw;
}

.cm__w {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2.083vw;
  margin-top: 4.688vw;
}

.cm__c {
  width: 44.01vw;
}

.cm__img {
  width: 42.708vw;
}

/* inline, so the box keeps the text line's full height — same as the original */
.cm__img img {
  display: inline;
  width: 100%;
  max-width: 100%;
}

.cm__c h2 {
  margin: 3.167vw 0 2.083vw;
  font-size: 2.763vw;
  font-weight: 600;
  line-height: 3.542vw;
  letter-spacing: .414vw;
  text-transform: uppercase;
  color: #000;
}

.cm__c h2:first-child {
  margin-top: 0;
}

.cm__c p {
  margin: 0;
  font-size: 1.146vw;
  font-weight: 400;
  line-height: 150%;
  color: #000;
}

.cm__c p + p {
  margin-top: 2.344vw;
}

.cm__btn {
  position: relative;
  display: block;
  max-width: 10.417vw;
  margin: 2.604vw 0 2.344vw;
  padding: .367vw .321vw;
  font-size: 1.042vw;
  font-weight: 700;
  letter-spacing: .052vw;
  text-decoration: none;
  color: #fff;
  background: #000;
  box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
}

/* green wipes across from the left on hover */
.cm__btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 0;
  height: 100%;
  background: var(--c-green);
  transition: width .4s;
}

.cm__btn:hover::before {
  width: 100%;
}

.cm__btn__in {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .26vw;
}

.cm__btn svg {
  width: 2.187vw;
  height: 1.458vw;
}

.cm__sign h3 {
  margin: 0;
  font-size: 1.042vw;
  font-weight: 400;
  line-height: 150%;
  color: #000;
}

.cm__sign h3 + h3 {
  margin-top: .521vw;
}

@media (max-width: 767px) {
  .ap {
    padding-bottom: 6.818vw;
  }

  .ap .lh {
    margin-top: 0;
  }

  .ap .lh__w {
    margin-bottom: 0;
  }

  .ap .lh__c {
    padding: 4.545vw 4.545vw 0;
  }

  .ap .lh__d {
    max-width: 100%;
    margin-bottom: 0;
    font-size: 3.409vw;
    font-weight: 400;
    line-height: 150%;
    color: #000;
  }

  /* these two repeat the shared mobile rules, which the desktop overrides
     above would otherwise outrank */
  .ap .lh__img {
    width: 100%;
  }

  .ap .lh__img img {
    height: auto;
  }

  .ap .lh__tags {
    top: auto;
  }

  .ap .bi__soc {
    gap: 4.091vw;
  }

  .ap .bi__soc svg {
    max-width: 4.545vw;
  }

  .ap__meta {
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 6.818vw;
  }

  .ap__date {
    gap: 1.705vw;
    font-size: 2.796vw;
  }

  .ap__date svg {
    width: 3.409vw;
    height: 3.239vw;
  }

  .ap__share {
    gap: 4.545vw;
  }

  .ap__shr {
    font-size: 2.796vw;
  }

  .ap__back svg {
    display: none;
  }

  .at {
    padding-inline: 4.545vw;
  }

  .at h2,
  .cm__c h2 {
    margin: 6.818vw 0;
    font-size: 5.029vw;
    line-height: 6.818vw;
    letter-spacing: .754vw;
  }

  .at p,
  .cm__c p {
    font-size: 3.409vw;
  }

  .at p + h2 {
    margin-top: 6.344vw;
  }

  .at p + p,
  .cm__c p + p {
    margin-top: 7.955vw;
  }

  .at p.at__lead {
    margin-top: 6.818vw;
    margin-bottom: 0;
  }

  .cm__in {
    padding-inline: 4.545vw;
  }

  .cm__w {
    flex-direction: column-reverse;
    gap: 0;
  }

  .cm__c,
  .cm__img {
    width: 100%;
  }

  .cm__img {
    margin-bottom: 6.818vw;
  }

  .cm__img img {
    height: 82.955vw;
    object-fit: cover;
    object-position: center top;
  }

  .cm__btn {
    max-width: 100%;
    margin: 6.818vw 0;
    padding: 1.591vw 3.409vw;
    font-size: 4.545vw;
    letter-spacing: .227vw;
  }

  .cm__btn__in {
    gap: 5vw;
  }

  .cm__btn svg {
    width: 8.759vw;
    height: 6.58vw;
  }

  .cm__sign h3 {
    font-size: 3.409vw;
  }

  .cm__sign h3 + h3 {
    margin-top: 1.136vw;
  }
}