/* ==========================================================================
   Blog hub page (page-blog-hub.php) — page-specific layout only.
   Requires site-chrome.css (tokens, nav, footer, buttons, tags, cards,
   kicker, .wrap, .rule, base elements) to be enqueued first.
   ========================================================================== */

.hero { padding: calc(3.5 * var(--leading)) 0 calc(2.5 * var(--leading)); }
body.aeo-blank-canvas .display {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(40px, 5.6vw, 76px);
  line-height: clamp(45px, 6.2vw, 84px);
  letter-spacing: -0.015em; margin: 0; margin-left: -0.06em;
}
.display .line { display: block; }
body.aeo-blank-canvas .hero .sub {
  font-size: 17px; line-height: var(--leading); max-width: var(--measure);
  margin: calc(1.5 * var(--leading) - 1cap) 0 0; color: color-mix(in srgb, var(--color-text) 88%, transparent);
}
.hero .row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--leading); }
.hero .row .btn {
  font-size: 17px;
  font-weight: 600;
  padding: 16px 32px;
  min-height: 54px;
}
.hero .row .btn-primary {
  background: var(--color-accent);
  color: var(--color-bg);
  border-color: var(--color-accent);
}
.hero .row .btn-primary:hover { background: var(--color-accent-2); border-color: var(--color-accent-2); }
.hero .row .btn-primary:active { background: var(--color-accent-2); }
.hero .row .btn-ghost { border-width: 2px; }
@media (max-width: 560px) {
  .hero .row { flex-direction: column; align-items: stretch; }
  .hero .row .btn { width: 100%; }
}

.stats {
  background:
    radial-gradient(900px 420px at 85% -40%, color-mix(in srgb, var(--color-section-glow) 70%, transparent), transparent 64%),
    var(--color-section);
  padding: calc(2 * var(--leading)) 0;
}
.stats .grid { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: calc(1.5 * var(--leading)) var(--leading); }
body.aeo-blank-canvas .stat-num {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(30px, 3vw, 44px); line-height: calc(1.6 * var(--leading));
  color: var(--color-text); margin: 0; margin-left: -0.05em;
}
body.aeo-blank-canvas .stat-label {
  font-size: 13px; line-height: var(--half); letter-spacing: 0.06em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 64%, transparent);
  margin: var(--half) 0 0;
}
@media (max-width: 720px) { .stats .grid { grid-template-columns: repeat(2, 1fr); justify-content: start; } }

.cats { padding: calc(2 * var(--leading)) 0 0; }
.cats .row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.cats a.tag { text-decoration: none; }
.cats a.tag-outline:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }

.featured {
  padding: calc(2.5 * var(--leading)) 0; display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--leading) clamp(24px, 5vw, 96px);
  align-items: start;
}
...
.featured-figure { margin: 0; }
.featured-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-lg);
}
body.aeo-blank-canvas .f-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(24px, 2.6vw, 34px); line-height: calc(1.4 * var(--leading)); letter-spacing: -0.012em;
  margin: var(--half) 0 0;
}
.f-title a { color: inherit; text-decoration: none; }
.f-title a:hover { color: var(--color-accent); }
body.aeo-blank-canvas .f-excerpt {
  font-size: 16px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  margin: var(--half) 0 0; max-width: 52ch;
}
.f-meta { font-size: 13px; color: color-mix(in srgb, var(--color-text) 55%, transparent); margin-top: var(--leading); display: flex; gap: var(--space-3); align-items: center; }
.f-meta a { color: var(--color-accent); text-decoration: none; }
.f-meta a:hover { text-decoration: underline; }
@media (max-width: 720px) { .featured { grid-template-columns: 1fr; } }

.posts { padding: 0 0 calc(3 * var(--leading)); }
.posts .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--leading); }
@media (max-width: 880px) { .posts .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .posts .grid { grid-template-columns: 1fr; } }
.post-card { border: 1px solid var(--color-divider); text-decoration: none; color: inherit; transition: border-color 0.15s; }
.post-card:hover { border-color: color-mix(in srgb, var(--color-accent) 55%, transparent); }
.post-card .card-title { margin-top: var(--space-1); }
.post-card .card-meta { margin-top: auto; }

.cta { padding: calc(2.5 * var(--leading)) 0; }
.cta-box {
  border: 1px solid var(--color-divider); border-radius: var(--radius-lg);
  padding: calc(1.75 * var(--leading)) clamp(24px, 4vw, 56px); display: flex; align-items: center;
  justify-content: space-between; gap: calc(1.5 * var(--leading)); flex-wrap: wrap;
  background: radial-gradient(700px 260px at 15% -30%, color-mix(in srgb, var(--color-accent-900) 55%, transparent), transparent 70%);
}
.cta-box .copy { flex: 1 1 360px; min-width: 0; }
body.aeo-blank-canvas .cta-box h3 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(22px, 2.4vw, 28px); line-height: calc(1.2 * var(--leading)); margin: 0;
}
body.aeo-blank-canvas .cta-box .sub {
  font-size: 15.5px; line-height: var(--leading); margin: calc(var(--half) - 1cap) 0 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent); max-width: 46ch;
}
.cta-box .btn-primary { flex: 0 0 auto; font-size: 16px; padding: 16px 32px; border-width: 2px; white-space: nowrap; }
@media (max-width: 640px) {
  .cta-box { flex-direction: column; align-items: stretch; text-align: center; }
  .cta-box .copy { flex-basis: auto; }
  .cta-box .sub { max-width: none; }
  .cta-box .btn-primary { width: 100%; }
}