/* ─── Article (single post) + static page ───────────────────────────────── */

.ha-rp {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 90;
  height: 3px;

  i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--sage), var(--lav), var(--peach));
    transform: scaleX(0);
    transform-origin: left;
  }
}

.ha-post-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 54px;
  align-items: start;
  padding-top: 8px;
  padding-bottom: 80px;

  @media (min-width: 992px) {
    grid-template-columns: minmax(0, 1fr) 320px;
  }
}

.ha-post {
  min-width: 0;
}

.ha-post__h {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 28px;

  h1 {
    font-size: clamp(36px, 5vw, 64px);
    letter-spacing: -0.035em;
  }
}

.ha-post__stand {
  font: italic 300 22px/1.45 var(--f-h);
  color: var(--muted);
}

.ha-post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  padding: 14px 0;
  border-block: 1px solid var(--line);
}

.ha-post__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  @media (min-width: 640px) {
    margin-left: auto;
  }
}

.ha-post__sz {
  display: inline-flex;
  gap: 4px;
}

.ha-chipb {
  padding: 7px 15px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-color) 80%, transparent);
  font-size: 13px;
  transition: box-shadow var(--hover-duration);

  &:hover {
    box-shadow: var(--shadow);
  }
}

.ha-post__img {
  margin: 0 0 34px;

  .ha-art {
    aspect-ratio: 16 / 8;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
  }

  figcaption {
    margin-top: 10px;
    font: 400 11.5px var(--f-m);
    color: var(--muted);
  }
}

/* Body typography (the_content) */
.ha-body {
  --ha-body-step: 0;
  font-size: calc(17.5px + var(--ha-body-step) * 2px);
  line-height: 1.8;

  @media (min-width: 640px) {
    font-size: calc(19px + var(--ha-body-step) * 2px);
  }

  > * + * {
    margin-top: 1.15em;
  }

  > p:first-child::first-letter {
    float: left;
    padding: 8px 12px 0 0;
    font: italic 300 3.8em/0.85 var(--f-h);
    color: var(--deep);
  }

  h2,
  h3,
  h4 {
    margin-top: 1.6em;
  }

  h2 {
    font-size: clamp(28px, 3vw, 38px);
  }

  h3 {
    font-size: clamp(22px, 2.4vw, 28px);
  }

  a {
    color: var(--deep);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--primary-color) 35%, transparent);
    text-underline-offset: 3px;

    &:hover {
      text-decoration-color: currentColor;
    }
  }

  ul,
  ol {
    padding-left: 1.3em;
  }

  ul {
    list-style: disc;
  }

  ol {
    list-style: decimal;
  }

  li + li {
    margin-top: 0.4em;
  }

  li::marker {
    color: var(--deep);
  }

  /* Pull quote */
  blockquote,
  .wp-block-pullquote {
    margin: 1.8em 0;
    padding: 30px 34px;
    border: 0;
    border-radius: 30px;
    font: italic 300 clamp(22px, 2.4vw, 27px)/1.4 var(--f-h);
    background: linear-gradient(140deg, var(--tint-green), var(--tint-lav));

    cite {
      display: block;
      margin-top: 12px;
      font: 400 12px var(--f-m);
      font-style: normal;
      color: var(--muted);
    }
  }

  /* "Key takeaways" box — add the CSS class "ha-takeaways" to any List or
     Group block in the editor (Advanced → Additional CSS class). */
  .ha-takeaways {
    margin: 2em 0;
    padding: 30px;
    list-style: none;
    border-radius: 30px;
    background: linear-gradient(140deg, var(--tint-peach), var(--tint-lav));

    li {
      position: relative;
      padding-left: 28px;
      font-size: 16.5px;

      &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0.55em;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: var(--sage);
      }
    }
  }

  img {
    border-radius: var(--r-sm);
  }

  figure {
    margin: 2em 0;
  }

  figcaption {
    margin-top: 10px;
    font: 400 12px var(--f-m);
    color: var(--muted);
  }

  table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85em;

    th,
    td {
      padding: 10px 12px;
      border-bottom: 1px solid var(--line);
      text-align: left;
    }
  }

  hr {
    border: 0;
    height: 1px;
    background: var(--grad-line);
    margin: 2.4em 0;
  }
}

.ha-body--page > p:first-child::first-letter {
  float: none;
  padding: 0;
  font: inherit;
  color: inherit;
}

.ha-post__disc {
  margin: 30px 0;
  padding: 14px 18px;
  border-radius: 16px;
  background: var(--soft);
}

/* Previous / next */
.ha-pn {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;

  @media (min-width: 640px) {
    grid-template-columns: 1fr 1fr;
  }

  a {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 22px;
    border-radius: 26px;
    background: var(--card);
    border: 1px solid var(--glass-edge);
    box-shadow: var(--shadow);
    transition: transform 0.9s var(--timing);

    &:hover {
      transform: translateY(-4px);
    }

    @media (min-width: 640px) {
      &.is-next {
        grid-column: 2;
        text-align: right;
      }
    }
  }

  small {
    font: 400 11.5px var(--f-m);
    color: var(--deep);
  }

  span {
    font: 400 19px/1.3 var(--f-h);
  }
}

.ha-sec--paper2 {
  background: color-mix(in srgb, var(--bg-light) 70%, transparent);
  border-top: 1px solid var(--line);
}

/* Static page */
.ha-page {
  max-width: 900px;
  padding-bottom: 100px;
}