:root {
  --blog-paper: #f1efe7;
  --blog-paper-deep: #dfdcd1;
  --blog-ink: #11110f;
  --blog-muted: #66655e;
  --blog-rule: #c9c6bc;
  --blog-dark: #0d0d0c;
}

.blog-page {
  background: var(--bg);
  color: #f5f4ef;
}

.blog-page main { overflow: clip; }

.blog-page :where(h1, h2, h3, p, a, span, strong, small, div, article, section, li, ol, ul, nav, figure, figcaption) {
  min-width: 0;
}

.blog-page :where(a, button):focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 4px;
}

.blog-page [data-reveal],
.blog-page [data-reveal-part] {
  --reveal-blur: 12px;
  --reveal-y: 30px;
}

.blog-page [data-reveal-part="title"] { --reveal-y: 38px; }

.blog-page .breadcrumbs { margin-bottom: clamp(42px, 6vw, 82px); }

.blog-page .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #777670;
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.blog-page .breadcrumbs li + li::before {
  content: "/";
  margin-right: 10px;
  color: #4e4d49;
}

.blog-page .breadcrumbs a:hover,
.blog-page .breadcrumbs a:focus-visible { color: var(--yellow); }

.blog-page .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Blog hub */
.blog-hero {
  position: relative;
  min-height: min(760px, 90svh);
  padding: 138px 0 72px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.blog-hero::before,
.article-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 24.96%, rgba(255,255,255,.05) 25%, transparent 25.04%),
    linear-gradient(90deg, transparent 74.96%, rgba(245,189,22,.1) 75%, transparent 75.04%);
}

.blog-hero .container,
.article-hero .container { position: relative; z-index: 1; }

.blog-hero__heading {
  display: grid;
  grid-template-columns: minmax(150px, .62fr) minmax(0, 3.38fr);
  align-items: start;
}

.blog-hero__heading .kicker { margin: 15px 0 0; }

.blog-hero h1 {
  max-width: 1080px;
  margin: 0;
  font-size: clamp(56px, 7.6vw, 112px);
  line-height: .91;
  letter-spacing: -.045em;
  text-transform: uppercase;
  text-wrap: balance;
}

.blog-hero h1 span { color: var(--yellow); }

.blog-hero__lead {
  max-width: 700px;
  margin: clamp(64px, 8vw, 108px) 0 0 25%;
  color: #c9c8c1;
  font-size: clamp(18px, 1.65vw, 24px);
  line-height: 1.6;
}

.blog-feed {
  padding: clamp(84px, 9vw, 136px) 0;
  background: var(--blog-paper);
  color: var(--blog-ink);
}

.blog-entry {
  display: grid;
  grid-template-columns: minmax(130px, .7fr) minmax(340px, 1.65fr) minmax(300px, 1fr);
  gap: clamp(30px, 5vw, 78px);
  align-items: start;
  padding: clamp(42px, 5vw, 74px) 0;
  border-top: 1px solid var(--blog-rule);
  border-bottom: 1px solid var(--blog-rule);
}

.blog-entry__meta {
  display: grid;
  gap: 14px;
  color: #77756d;
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.blog-entry h2 {
  margin: 0;
  font-size: clamp(38px, 4.4vw, 66px);
  line-height: .98;
  letter-spacing: -.035em;
  text-transform: uppercase;
  text-wrap: balance;
}

.blog-entry__copy { align-self: end; }

.blog-entry__copy p {
  margin: 0 0 34px;
  color: var(--blog-muted);
  font-size: 15px;
  line-height: 1.75;
}

.blog-entry__copy strong {
  display: inline-flex;
  gap: 28px;
  align-items: center;
  color: var(--yellow-dark);
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.blog-entry:hover h2 { color: #35342f; }
.blog-entry:hover strong span { transform: translate(3px, -3px); }
.blog-entry strong span { transition: transform var(--motion-fast) var(--motion-ease-out); }

/* Article hero */
.article-hero {
  position: relative;
  padding: 138px 0 clamp(72px, 8vw, 118px);
  border-bottom: 1px solid var(--line);
}

.article-hero__heading {
  display: grid;
  grid-template-columns: minmax(150px, .62fr) minmax(0, 3.38fr);
  align-items: start;
}

.article-hero__heading .kicker { margin: 15px 0 0; }

.article-hero h1 {
  max-width: 1110px;
  margin: 0;
  font-size: clamp(52px, 7vw, 101px);
  line-height: .92;
  letter-spacing: -.04em;
  text-transform: uppercase;
  text-wrap: balance;
}

.article-hero h1 em { color: var(--yellow); font-style: normal; }

.article-hero__bottom {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(210px, .55fr);
  gap: clamp(48px, 8vw, 120px);
  align-items: end;
  margin: clamp(64px, 8vw, 112px) 0 0 25%;
}

.article-hero__lead {
  max-width: 770px;
  margin: 0;
  color: #cfcec7;
  font-size: clamp(19px, 1.7vw, 25px);
  line-height: 1.62;
}

.article-hero__lead + .article-hero__lead { margin-top: 18px; }

.article-hero__byline {
  display: grid;
  gap: 8px;
  margin: 0;
  color: #777670;
  font-size: 10px;
  line-height: 1.45;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.article-hero__byline strong { color: #f2f1eb; font-size: 12px; }

/* Repeatable article blocks */
.article-body {
  padding: clamp(88px, 9vw, 142px) 0;
  background: var(--blog-paper);
  color: var(--blog-ink);
}

.article-block {
  width: min(720px, 100%);
  margin-inline: auto;
}

.article-block--paragraph p {
  margin: 0 0 1.45em;
  color: #2f2f2b;
  font-size: clamp(18px, 1.3vw, 20px);
  line-height: 1.72;
  letter-spacing: -.008em;
}

.article-block--paragraph p:last-child { margin-bottom: 0; }

.article-block--heading {
  width: min(900px, 100%);
  margin-top: clamp(96px, 9vw, 138px);
  margin-bottom: clamp(32px, 4vw, 48px);
}

.article-block--heading h2 {
  max-width: 860px;
  margin: 0;
  font-size: clamp(36px, 3.8vw, 54px);
  line-height: 1.06;
  letter-spacing: -.025em;
  text-transform: uppercase;
  text-wrap: balance;
}

.article-block--subheading {
  margin-top: 46px;
  margin-bottom: 14px;
}

.article-block--subheading h3 {
  margin: 0;
  font-size: clamp(22px, 1.9vw, 28px);
  line-height: 1.12;
  letter-spacing: -.015em;
  text-transform: uppercase;
}

.article-block--list { margin-top: 32px; margin-bottom: 38px; }

.article-block--list :where(ul, ol) {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: article-list;
}

.article-block--list li {
  position: relative;
  min-height: 42px;
  padding: 9px 0 9px 38px;
  border-top: 1px solid var(--blog-rule);
  color: #34332f;
  font-size: 17px;
  line-height: 1.55;
}

.article-block--list li:last-child { border-bottom: 1px solid var(--blog-rule); }

.article-block--list ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 20px;
  width: 14px;
  height: 2px;
  background: var(--yellow-dark);
}

.article-block--list ol li { counter-increment: article-list; padding-left: 52px; }

.article-block--list ol li::before {
  content: counter(article-list, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 11px;
  color: #87857c;
  font-size: 10px;
  letter-spacing: .12em;
}

.article-block--quote {
  width: min(780px, 100%);
  margin-top: clamp(42px, 5vw, 68px);
  margin-bottom: clamp(42px, 5vw, 68px);
  padding: clamp(28px, 3.5vw, 42px) clamp(26px, 4vw, 48px);
  background: #ebe8df;
  border-left: 3px solid var(--yellow-dark);
}

.article-block--quote blockquote {
  max-width: 690px;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.3vw, 32px);
  line-height: 1.2;
  letter-spacing: -.018em;
  text-transform: none;
}

.article-block--quote.is-featured {
  padding: clamp(52px, 8vw, 104px);
  background: var(--blog-dark);
  color: #f5f4ef;
  border: 0;
}

.article-block--quote.is-featured blockquote em { color: var(--yellow); font-style: normal; }

.article-block--metrics {
  width: min(1100px, 100%);
  display: grid;
  grid-template-columns: repeat(var(--metric-columns, 2), minmax(0, 1fr));
  margin-top: clamp(54px, 6vw, 82px);
  margin-bottom: clamp(54px, 7vw, 96px);
  border-top: 1px solid var(--blog-rule);
  border-bottom: 1px solid var(--blog-rule);
}

.article-metric {
  min-height: 230px;
  padding: clamp(26px, 3vw, 42px);
  border-right: 1px solid var(--blog-rule);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.article-metric:last-child { border-right: 0; }

.article-metric strong {
  font-family: var(--font-display);
  font-size: clamp(48px, 6.2vw, 88px);
  line-height: .92;
  letter-spacing: -.045em;
  text-transform: uppercase;
}

.article-metric span {
  max-width: 300px;
  color: var(--blog-muted);
  font-size: 12px;
  line-height: 1.55;
}

.article-block--metrics.is-dark {
  background: var(--blog-dark);
  color: #f5f4ef;
  border-color: rgba(255,255,255,.14);
}

.article-block--metrics.is-dark .article-metric { border-color: rgba(255,255,255,.14); }
.article-block--metrics.is-dark .article-metric strong { color: var(--yellow); }
.article-block--metrics.is-dark .article-metric span { color: #aaa9a2; }

.article-block--image {
  width: min(1200px, 100%);
  margin-top: clamp(50px, 6vw, 78px);
  margin-bottom: clamp(66px, 7vw, 96px);
}

.article-block--image a {
  display: block;
  background: #242422;
  border: 1px solid #d1cec4;
}

.article-block--image img {
  width: 100%;
  height: auto;
}

.article-block--image figcaption {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 13px;
  color: #77756d;
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.article-block--video {
  width: min(1100px, 100%);
  aspect-ratio: 16 / 9;
  margin-top: 72px;
  margin-bottom: 92px;
  background: var(--blog-dark);
}

.article-block--video :where(video, iframe) { width: 100%; height: 100%; border: 0; }

.article-block--divider {
  width: min(1100px, 100%);
  height: 1px;
  margin-top: clamp(94px, 10vw, 150px);
  margin-bottom: 0;
  border: 0;
  background: var(--blog-rule);
}

.article-topic-grid {
  width: min(1100px, 100%);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 58px;
  background: var(--blog-rule);
  border: 1px solid var(--blog-rule);
}

.article-topic {
  padding: clamp(30px, 4vw, 54px);
  background: var(--blog-paper);
}

.article-topic h3 {
  margin: 0 0 30px;
  font-size: clamp(25px, 2.7vw, 38px);
  line-height: 1;
  text-transform: uppercase;
}

.article-topic ul { margin: 0; padding-left: 18px; }
.article-topic li { margin-top: 10px; color: var(--blog-muted); line-height: 1.55; }

.article-block--cta {
  width: min(1200px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(250px, .45fr);
  gap: clamp(42px, 5vw, 72px);
  align-items: end;
  margin-top: clamp(110px, 13vw, 190px);
  padding: clamp(44px, 7vw, 94px);
  background: var(--yellow);
  color: var(--blog-ink);
}

.article-block--cta .kicker { color: #66500a; }

.article-block--cta h2 {
  margin: 24px 0 30px;
  font-size: clamp(44px, 4.5vw, 64px);
  line-height: .92;
  letter-spacing: -.04em;
  text-transform: uppercase;
}

.article-block--cta p:not(.kicker) {
  max-width: 680px;
  margin: 0;
  font-size: 17px;
  line-height: 1.65;
}

.article-final-thought {
  margin-top: 2.1em !important;
  padding-top: 1.8em;
  border-top: 1px solid var(--blog-rule);
  color: var(--blog-ink) !important;
  font-weight: 700;
}

.article-cta__actions { display: grid; gap: 12px; }
.article-cta__actions .button { width: 100%; }
.article-cta__actions .button-primary { background: var(--blog-dark); color: #fff; }
.article-cta__actions .button-secondary { border-color: rgba(17,17,15,.45); color: var(--blog-ink); }

.article-related {
  padding: clamp(74px, 8vw, 112px) 0;
  background: var(--blog-dark);
}

.article-related__inner {
  display: grid;
  grid-template-columns: minmax(130px, .5fr) minmax(0, 2fr);
  gap: clamp(40px, 7vw, 110px);
}

.article-related__inner > .kicker { margin: 8px 0 0; }

.article-related__links { border-top: 1px solid rgba(255,255,255,.16); }

.article-related__links a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 30px;
  padding: 28px 0;
  border-bottom: 1px solid rgba(255,255,255,.16);
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 42px);
  line-height: 1;
  text-transform: uppercase;
}

.article-related__links a span { color: var(--yellow); }
.article-related__links a:hover { color: var(--yellow); }

@media (max-width: 1024px) {
  .blog-entry { grid-template-columns: 120px minmax(0, 1.45fr) minmax(250px, .8fr); gap: 34px; }
  .article-hero__bottom { margin-left: 0; }
  .article-block--cta { grid-template-columns: 1fr; }
  .article-cta__actions { max-width: 430px; }
}

@media (max-width: 768px) {
  .blog-hero { min-height: 680px; padding-top: 120px; }
  .blog-hero__heading,
  .article-hero__heading { grid-template-columns: 1fr; gap: 26px; }
  .blog-hero__heading .kicker,
  .article-hero__heading .kicker { margin: 0; }
  .blog-hero__lead { margin-left: 0; }
  .blog-entry { grid-template-columns: 1fr; min-height: 0; }
  .blog-entry__meta { grid-template-columns: auto 1fr; }
  .blog-entry__copy { max-width: 600px; }
  .article-hero__bottom { grid-template-columns: 1fr; }
  .article-block--metrics { grid-template-columns: 1fr; }
  .article-metric { min-height: 180px; border-right: 0; border-bottom: 1px solid var(--blog-rule); }
  .article-metric:last-child { border-bottom: 0; }
  .article-block--metrics.is-dark .article-metric { border-color: rgba(255,255,255,.14); }
  .article-topic-grid { grid-template-columns: 1fr; }
  .article-related__inner { grid-template-columns: 1fr; }
}

@media (max-width: 580px) {
  .blog-page .breadcrumbs { margin-bottom: 38px; }
  .blog-page .breadcrumbs ol { font-size: 9px; }
  .blog-hero { min-height: 620px; padding-bottom: 58px; }
  .blog-hero h1 { font-size: clamp(36px, 10vw, 52px); line-height: .95; }
  .blog-hero__lead { margin-top: 54px; font-size: 17px; }
  .blog-feed { padding-block: 70px; }
  .blog-entry { padding-block: 34px; }
  .blog-entry h2 { font-size: clamp(32px, 9.5vw, 44px); }
  .article-hero { padding-top: 120px; }
  .article-hero h1 { font-size: clamp(38px, 10.8vw, 58px); line-height: .96; }
  .article-hero__bottom { margin-top: 52px; gap: 38px; }
  .article-hero__lead { font-size: 17px; }
  .article-body { padding-block: 72px; }
  .article-block--paragraph p { font-size: 17px; line-height: 1.72; }
  .article-block--heading { margin-top: 82px; margin-bottom: 30px; }
  .article-block--heading h2 { font-size: clamp(30px, 8.2vw, 38px); line-height: 1.08; }
  #count-market-title { font-size: 22px; }
  #beyond-doors-title,
  #presentation-title { font-size: 24px; }
  .article-block--subheading { margin-top: 38px; margin-bottom: 12px; }
  .article-block--subheading h3 { font-size: 19px; }
  .article-block--quote { padding: 26px 24px; }
  .article-block--quote blockquote { font-size: clamp(22px, 6.2vw, 27px); }
  .article-block--quote.is-featured { padding: 34px 24px; }
  .article-block--metrics { width: calc(100% + 34px); margin-inline: -17px; }
  .article-metric { padding-inline: 17px; }
  .article-block--image { width: calc(100% + 34px); margin-inline: -17px; }
  .article-block--image figcaption { padding-inline: 17px; flex-direction: column; gap: 5px; }
  .article-block--cta { width: calc(100% + 34px); margin-inline: -17px; padding: 54px 17px; }
  .article-block--cta h2 { font-size: clamp(32px, 8vw, 40px); }
  .article-block--cta p:not(.kicker) { font-size: 16px; }
  .article-related__links a { font-size: 24px; }
}

@media (max-width: 340px) {
  .article-block--heading h2 { font-size: 27px; }
  .article-block--cta h2 { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .blog-entry strong span { transition: none; }
}