.insight {
  --insight-thumb: #ededf2;
  --insight-meta: #727272;
}

.insight-section {
  padding-top: clamp(40px, 4.6vw, 88px);
}

.insight-section + .insight-section {
  padding-top: clamp(88px, 9.4vw, 180px);
}

.insight-section:last-child {
  padding-bottom: clamp(88px, 9.4vw, 180px);
}

.insight-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: clamp(24px, 2.4vw, 46px);
}

.insight-head__title {
  font-size: clamp(34px, 2.9vw, 55px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #000;
}

.insight-head__more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  font-size: clamp(16px, 1.1vw, 21px);
  font-weight: 600;
  color: #000;
  white-space: nowrap;
}

.insight-head__more svg {
  transition: transform 0.16s ease;
}

.insight-head__more:hover svg {
  transform: translateX(3px);
}

.insight-empty {
  padding-block: 48px;
  color: var(--insight-meta);
}

.card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card__thumb {
  overflow: hidden;
  aspect-ratio: 425 / 240;
  border-radius: 8px;
  background: var(--insight-thumb);
}

.card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.card__link:hover .card__thumb img {
  transform: scale(1.03);
}

.card__text {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-top: 18px;
}

.card__title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: clamp(17px, 1.1vw, 21px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: #000;
}

.card__link:hover .card__title {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.card__meta {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--insight-meta);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(40px, 3.6vw, 70px) clamp(16px, 1.7vw, 33px);
}

.card-grid--list {
  row-gap: clamp(48px, 4.2vw, 80px);
}

.card[data-variant='feature'] .card__thumb {
  aspect-ratio: 667 / 375;
}

.card[data-variant='feature'] .card__text {
  padding-top: clamp(20px, 1.6vw, 30px);
}

.card[data-variant='feature'] .card__title {
  font-size: clamp(22px, 1.9vw, 36px);
  line-height: 1.3;
}

.card[data-variant='feature'] .card__meta {
  margin-top: auto;
  padding-top: 20px;
}

.card[data-variant='row'] .card__link {
  flex-direction: row;
  gap: 15px;
}

.card[data-variant='row'] .card__thumb {
  flex: 0 0 43%;
  aspect-ratio: 274 / 154;
}

.card[data-variant='row'] .card__text {
  padding-top: 10px;
  padding-bottom: 4px;
}

.card[data-variant='row'] .card__meta {
  margin-top: auto;
  padding-top: 8px;
}

.insight-feature {
  display: grid;
  grid-template-columns: minmax(0, 667fr) minmax(0, 638fr);
  gap: 35px;
}

.insight-feature__rows {
  display: grid;
  align-content: start;
  gap: 27px;
}

.pager {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: clamp(56px, 4.4vw, 84px);
}

.pager a {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  font-size: 20px;
  font-weight: 600;
  color: #000;
}

.pager a[aria-current='page'] {
  color: var(--red);
}

.pager a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.post-hero {
  position: relative;
  isolation: isolate;
  display: grid;

  margin-top: calc(var(--header-h) * -1);
  min-height: clamp(400px, 28.9vw, 555px);
  padding-top: var(--header-h);
  overflow: hidden;
  background: #0b0716;
  color: #fff;
  text-align: center;
}

.post-hero__cover {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.18) 45%, rgba(0, 0, 0, 0.38) 100%);
}

.post-hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding-block: 104px 32px;
}

.post-hero__eyebrow {
  font-size: clamp(16px, 1.05vw, 20px);
  font-weight: 500;
  letter-spacing: -0.03em;
}

.post-hero__eyebrow a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.post-hero__title {
  max-width: 780px;
  margin-top: clamp(14px, 1.2vw, 22px);
  font-size: clamp(26px, 2.35vw, 45px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.post-hero__date {
  margin-top: clamp(20px, 1.9vw, 36px);
  font-size: clamp(15px, 0.95vw, 18px);
  font-weight: 400;
  letter-spacing: -0.03em;
}

.post-hero__author {
  margin-left: 0.9em;
}

.share {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #f0f0f0;
  color: #555;
  transition: background-color 0.16s ease;
}

.share:hover {
  background: #e4e4e4;
}

.share--hero {
  position: absolute;

  right: max(var(--gutter), calc(50% - 372.5px));
  bottom: 20px;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  backdrop-filter: blur(6px);
}

.share--hero:hover {
  background: rgba(255, 255, 255, 0.34);
}

.hp-container.post-body {
  max-width: calc(745px + var(--gutter) * 2);
  padding-block: clamp(56px, 7vw, 136px) clamp(88px, 10vw, 200px);
  font-size: clamp(16px, 1vw, 19px);
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: -0.03em;
  color: #000;

  --post-gap: clamp(12px, 0.75vw, 14px);
}

.post-body > :not(.post-foot) + :not(.post-foot),
.post-summary > * + *,
.post-list li + li,
.post-list__title + ul,
.post-list__title + ol {
  margin-top: var(--post-gap);
}

.post-summary {
  padding-bottom: var(--post-gap);
  border-bottom: 1px solid #e5e5e5;
}

.post-summary__title {
  font-size: clamp(22px, 1.45vw, 28px);
  font-weight: 700;
  line-height: 1.4;
}

.post-h2 {
  font-size: 1em;
  font-weight: 700;
  line-height: 1.9;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1.5px;
}

.post-p strong,
.post-list strong {
  font-weight: 700;
}

.post-p a,
.post-list a,
.post-callout a,
.post-table a,
.post-quote a {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.post-body code {
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: #f3f4f6;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86em;
}

.post-list {
  padding-left: clamp(16px, 1.6vw, 30px);
}

.post-list__title {
  font-weight: 700;
}

.post-list ul[data-titled='true'] {
  padding-left: clamp(16px, 1.6vw, 30px);
}

.post-figure img,
.post-figure__empty {
  width: 100%;
  border-radius: 8px;
}

.post-figure__empty {
  aspect-ratio: 745 / 421;
  background: var(--insight-thumb);
}

.post-figure figcaption {
  margin-top: 12px;
  font-size: 14px;
  color: var(--insight-meta);
  text-align: center;
}

.post-quote {
  padding-left: 20px;
  border-left: 3px solid #000;
  font-weight: 600;
}

.post-h1 {
  font-size: 1.45em;
  font-weight: 700;
  line-height: 1.5;
}

.post-h3 {
  font-size: 1em;
  font-weight: 700;
  line-height: 1.9;
}

.post-list ol {
  padding-left: 1.4em;
  list-style: decimal;
}

.post-p em,
.post-list em,
.post-callout em,
.post-table em {
  font-style: italic;
}

.post-callout {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  border-radius: 8px;
}

.post-callout__icon {
  flex: none;
  font-size: 1.2em;
  line-height: 1.6;
}

.post-body .post-code {
  padding: 18px 20px;
  overflow-x: auto;
  border-radius: 8px;
  background: #f3f4f6;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82em;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0;
  white-space: pre;
}

.post-body .post-code code {
  padding: 0;
  background: none;
  font-size: inherit;
}

.post-table {
  overflow-x: auto;
}

.post-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9em;
  line-height: 1.6;
}

.post-table th,
.post-table td {
  padding: 10px 12px;
  border: 1px solid #e5e5e5;
  text-align: left;
  vertical-align: top;
}

:where(.post-table) th {
  background: #f7f7f7;
}

.post-table th {
  font-weight: 700;
}

.post-table .post-bg-red {
  background-color: #fff6f6;
}

.post-c-gray { color: #9b9a97; }
.post-c-brown { color: #64473a; }
.post-c-red { color: #e03e3e; }
.post-c-orange { color: #d9730d; }
.post-c-yellow { color: #dfab01; }
.post-c-green { color: #4d6461; }
.post-c-blue { color: #0b6e99; }
.post-c-purple { color: #6940a5; }
.post-c-pink { color: #ad1a72; }
.post-bg-gray { background-color: #ebeced; }
.post-bg-brown { background-color: #e9e5e3; }
.post-bg-red { background-color: #fbe4e4; }
.post-bg-orange { background-color: #f6e9d9; }
.post-bg-yellow { background-color: #fbf3db; }
.post-bg-green { background-color: #ddedea; }
.post-bg-blue { background-color: #ddebf1; }
.post-bg-purple { background-color: #eae4f2; }
.post-bg-pink { background-color: #f4dfeb; }

.post-callout.post-bg-gray { background-color: #f5f6f6; }
.post-callout.post-bg-brown { background-color: #f4f2f1; }
.post-callout.post-bg-red { background-color: #fff6f6; }
.post-callout.post-bg-orange { background-color: #faf4ec; }
.post-callout.post-bg-yellow { background-color: #fdf9ed; }
.post-callout.post-bg-green { background-color: #eef6f4; }
.post-callout.post-bg-blue { background-color: #eef5f8; }
.post-callout.post-bg-purple { background-color: #f4f2f8; }
.post-callout.post-bg-pink { background-color: #faeff5; }

.post-hr {
  border: 0;
  border-top: 1px solid #e5e5e5;
}

.post-cta {

  padding-block: clamp(18px, 1.6vw, 28px);
  text-align: center;
}

.post-cta--left {
  text-align: left;
}

.post-cta--row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  text-align: left;
}

.post-cta--row .post-cta__copy {
  flex: 1 1 280px;
}

.post-cta--gray,
.post-cta--pink,
.post-cta--dark {
  padding-inline: clamp(20px, 2vw, 32px);
  border-radius: 10px;
}

.post-cta--gray {
  background: #f4f4f4;
}

.post-cta--pink {
  background: #fff6f6;
}

.post-cta--dark {
  background: #000;
  color: #fff;
}

.post-cta__title {
  font-weight: 700;
}

.post-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 250px;
  min-height: 44px;
  padding: 8px 24px;
  border-radius: 8px;
  background: #000;
  color: #fff;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.04em;
}

.post-cta__copy + .post-cta__btn {
  margin-top: 16px;
}

.post-cta--row .post-cta__btn {
  flex: none;
  min-width: 0;
  margin-top: 0;
}

.post-cta--red .post-cta__btn,
.post-cta--pink .post-cta__btn {
  background: #f30000;
}

.post-cta--dark .post-cta__btn {
  background: #fff;
  color: #000;
}

.post-foot {
  display: grid;
  justify-items: center;
  margin-top: clamp(64px, 5.2vw, 100px);
}

.post-foot__back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: clamp(32px, 2.6vw, 50px);
  padding-top: clamp(24px, 1.6vw, 30px);
  width: 100%;
  justify-content: center;
  border-top: 1px solid #e5e5e5;
  font-size: 16px;
  color: var(--insight-meta);
}

.post-foot__back:hover {
  color: #000;
}

.related {
  padding-block: clamp(88px, 7.8vw, 150px) clamp(88px, 9.4vw, 180px);
  background: #f8f8f8;
}

.related__title {
  margin-bottom: clamp(32px, 2.6vw, 50px);
  font-size: clamp(26px, 2.5vw, 48px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
  text-align: center;
  color: #000;
}

@media (max-width: 1024px) {
  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .insight-feature {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
}

@media (max-width: 640px) {
  .card-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .insight-head {
    align-items: center;
  }

  .insight-head__more {
    font-size: 15px;
  }

  .card[data-variant='row'] .card__thumb {
    flex-basis: 40%;
  }

  .card[data-variant='row'] .card__text {
    padding-top: 0;
  }

  .card[data-variant='row'] .card__title {
    font-size: 16px;
  }

  .card[data-variant='row'] .card__meta {
    font-size: 13px;
  }

  .post-hero__inner {
    padding-block: 64px 76px;
  }

  .share--hero {
    right: 50%;
    transform: translateX(50%);
  }

  .post-cta__btn {
    min-width: 0;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card__thumb img,
  .insight-head__more svg {
    transition: none;
  }
}