/* ==========================================================================
   Cueword Blog — Ghost theme stylesheet
   Structure: the CuewordBlog prototype. Skin: original cueword.com palette
   (teal #1A8C7D ramp + warm gold accent) on Cuemath Hive design principles:
   token-first, Athletics headings / Untitled Sans body, binary radius
   (0 or pill), flat cards with interaction shadow, restrained motion.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts (self-hosted, woff2)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Athletics';
  src: local('Athletics Light'), url('../fonts/Athletics-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Athletics';
  src: local('Athletics'), url('../fonts/Athletics-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Athletics';
  src: local('Athletics Medium'), url('../fonts/Athletics-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Athletics';
  src: local('Athletics Bold'), url('../fonts/Athletics-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Untitled Sans';
  src: local('Untitled Sans'), url('../fonts/UntitledSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Untitled Sans';
  src: local('Untitled Sans Medium'), url('../fonts/UntitledSans-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Teal ramp — built from the live cueword.com palette
     (100/200 = primaryLt/primaryMid, 600 = primary, 700 = primaryDark,
      1000 = textDark), intermediate steps interpolated */
  --teal-100: #E4F4F2;
  --teal-200: #C0E8E4;
  --teal-300: #9BDBD3;
  --teal-400: #5FC2B4;
  --teal-500: #35A695;
  --teal-600: #1A8C7D;
  --teal-700: #0D6A5E;
  --teal-800: #0B5A50;
  --teal-900: #0A4A42;
  --teal-1000: #0D3D36;
  --teal-1100: #08302A;

  /* Gold accent ramp — original site accent family */
  --gold-100: #FEF0E4;
  --gold-300: #F5C79A;
  --gold-500: #F4A261;
  --gold-700: #CD7F43;

  /* Semantic — surfaces */
  --bg-page: #F7FAFA;
  --bg-card: #FFFFFF;
  --bg-inset: #EEF9F7;
  --bg-brand: var(--teal-600);
  --bg-brand-hover: var(--teal-700);
  --bg-brand-1: var(--teal-100);
  --bg-brand-2: var(--teal-200);
  --bg-inverse: var(--teal-1000);
  --bg-accent-1: var(--gold-100);

  /* Semantic — text */
  --text-primary: var(--teal-1000);
  --text-secondary: #4A7A72;
  --text-tertiary: #8AADA8;
  --text-brand: var(--teal-700);
  --text-accent: var(--gold-700);
  --text-on-brand: #FFFFFF;
  --text-on-inverse: #E9F5F3;
  --text-on-inverse-dim: #9FC4BD;

  /* Semantic — borders */
  --border-primary: #B9DEDA;
  --border-secondary: #D8EEED;
  --border-brand: var(--teal-300);
  --border-on-inverse: rgba(255, 255, 255, 0.12);

  /* Type — respects Ghost admin custom-font choice, falls back to brand fonts */
  --font-heading: var(--gh-font-heading, 'Athletics', Georgia, serif);
  --font-body: var(--gh-font-body, 'Untitled Sans', -apple-system, system-ui, sans-serif);

  /* Geometry — binary radius per Hive */
  --radius-none: 0;
  --radius-full: 9999px;

  /* Shadows — warm-tinted, interaction only */
  --shadow-sm: 0 1px 3px hsl(174 30% 15% / 0.08), 0 1px 2px hsl(174 30% 15% / 0.04);
  --shadow-md: 0 4px 8px hsl(174 30% 15% / 0.08), 0 2px 4px hsl(174 30% 15% / 0.04);
  --shadow-lg: 0 8px 24px hsl(174 30% 15% / 0.10), 0 4px 8px hsl(174 30% 15% / 0.04);

  /* Spacing — base-4 */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;

  /* Motion */
  --duration-instant: 100ms;
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-default: cubic-bezier(0.25, 0.1, 0.25, 1);

  /* Layout */
  --container-max: 1200px;
  --article-max: 720px;

  /* Focus ring — kept palette-independent per Hive */
  --focus-ring: #5492F1;

  --z-sticky: 200;
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--bg-card); padding: var(--space-8) var(--space-16);
}
.skip-link:focus { left: 0; }

h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 400; }

.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-32); }
@media (max-width: 1023px) { .container { padding: 0 var(--space-24); } }
@media (max-width: 767px) { .container { padding: 0 var(--space-16); } }

/* --------------------------------------------------------------------------
   4. Buttons (pill — original-site convention within Hive's binary rule)
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8);
  font-family: var(--font-body); font-weight: 500; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--radius-full);
  transition: background var(--duration-instant) var(--ease-default),
              box-shadow var(--duration-fast) var(--ease-default),
              transform var(--duration-instant) var(--ease-default);
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--bg-brand); color: var(--text-on-brand); }
.btn-primary:hover { background: var(--bg-brand-hover); box-shadow: var(--shadow-md); }
.btn-secondary { background: transparent; color: var(--text-brand); border-color: var(--border-primary); }
.btn-secondary:hover { background: var(--bg-inset); }
.btn-on-inverse { background: #FFFFFF; color: var(--teal-800); }
.btn-on-inverse:hover { background: var(--teal-100); box-shadow: var(--shadow-md); }
.btn-md { height: 40px; padding: 0 var(--space-20); font-size: 14px; }
.btn-lg { height: 48px; padding: 0 var(--space-24); font-size: 16px; }

.arrow { display: inline-block; transition: transform var(--duration-fast) var(--ease-out); }
a:hover > .arrow, .btn:hover .arrow { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   5. Chips (filter pills) & badges
   -------------------------------------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; height: 32px; padding: 0 var(--space-12);
  font-size: 14px; font-weight: 500; color: var(--text-secondary);
  background: var(--bg-card); border: 1px solid var(--border-secondary);
  border-radius: var(--radius-full);
  transition: background var(--duration-instant) var(--ease-default),
              border-color var(--duration-instant) var(--ease-default);
}
.chip:hover { border-color: var(--border-primary); background: var(--bg-inset); }
.chip.is-active { background: var(--bg-inverse); border-color: var(--bg-inverse); color: var(--text-on-inverse); }
.chip-group { display: flex; flex-wrap: wrap; gap: var(--space-8); }

.badge {
  display: inline-flex; align-items: center; gap: var(--space-4);
  font-size: 12px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 2px var(--space-8); border: 1px solid var(--border-brand);
  background: var(--bg-brand-1); color: var(--text-brand);
}
.badge-accent { background: var(--bg-accent-1); color: var(--text-accent); border-color: var(--gold-300); }

/* --------------------------------------------------------------------------
   6. Header / nav
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: rgba(247, 250, 250, 0.94);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-secondary);
}
.header-inner {
  max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-32);
  height: 64px; display: flex; align-items: center; gap: var(--space-24);
}
.logo { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo-mark { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; }
.logo-text { font-family: var(--font-heading); font-weight: 500; font-size: 20px; }
.logo-text .accent { color: var(--text-brand); }
.logo-blog-label {
  font-size: 12px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-tertiary); border-left: 1px solid var(--border-primary);
  padding-left: 10px; margin-left: 2px;
}
.site-nav { display: flex; align-items: center; gap: var(--space-4); list-style: none; margin-left: auto; }
.site-nav a {
  display: inline-block; padding: var(--space-8) var(--space-12);
  font-size: 14px; color: var(--text-secondary); white-space: nowrap;
  transition: background var(--duration-instant) var(--ease-default), color var(--duration-instant) var(--ease-default);
}
.site-nav a:hover { background: var(--bg-inset); color: var(--text-primary); }
.site-nav a.nav-current { color: var(--text-brand); font-weight: 500; }
.header-cta { flex-shrink: 0; white-space: nowrap; }

.nav-toggle {
  flex-shrink: 0;
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; padding: 0 var(--space-8);
  background: none; border: 1px solid var(--border-secondary); cursor: pointer;
}
.nav-toggle span { display: block; height: 2px; background: var(--text-primary); transition: transform var(--duration-fast) var(--ease-default), opacity var(--duration-fast); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Binary header: full nav ≥1200px, hamburger below. The CTA is the only
   conversion path — it stays visible at EVERY width, next to the toggle. */
@media (max-width: 1199px) {
  .header-inner { padding: 0 var(--space-16); }
  .site-nav {
    display: none; position: absolute; top: 64px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg-card); border-bottom: 1px solid var(--border-secondary);
    padding: var(--space-8) 0; box-shadow: var(--shadow-lg);
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: var(--space-12) var(--space-24); font-size: 16px; }
  .header-cta { margin-left: auto; }
  .nav-toggle { display: flex; }
}
@media (max-width: 640px) {
  .logo-blog-label { display: none; }
  .header-cta.btn-md { padding: 0 var(--space-12); font-size: 13px; }
}
@media (max-width: 400px) {
  .logo-text { display: none; }
}

/* --------------------------------------------------------------------------
   7. Blog hero (homepage)
   -------------------------------------------------------------------------- */
.blog-hero {
  text-align: center; padding: var(--space-64) var(--space-24) var(--space-40);
  background: linear-gradient(180deg, var(--bg-inset) 0%, var(--bg-page) 100%);
  border-bottom: 1px solid var(--border-secondary);
}
.blog-hero-label {
  display: inline-block; padding: var(--space-4) var(--space-12);
  background: var(--bg-card); border: 1px solid var(--border-secondary); border-radius: var(--radius-full);
  font-size: 12px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-brand); margin-bottom: var(--space-20);
}
.blog-hero h1 {
  font-size: clamp(32px, 5vw, 64px); line-height: 1.12; font-weight: 300;
  letter-spacing: -0.01em; margin-bottom: var(--space-16);
}
.blog-hero h1 em, .blog-hero h1 .accent { font-style: normal; color: var(--text-brand); font-weight: 500; }
.blog-hero p { max-width: 540px; margin: 0 auto var(--space-32); font-size: 18px; color: var(--text-secondary); }
.hero-filter-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-8); }

/* --------------------------------------------------------------------------
   8. Section labels + card grids
   -------------------------------------------------------------------------- */
.blog-main { padding: var(--space-24) 0 var(--space-96); }
.section-label {
  display: flex; align-items: center; gap: var(--space-16);
  font-family: var(--font-heading); font-size: 24px; font-weight: 500;
  margin: var(--space-48) 0 var(--space-24);
}
.blog-main > .section-label:first-child { margin-top: 0; }
.section-label::after { content: ''; flex: 1; height: 1px; background: var(--border-secondary); }

/* Featured post — split card */
.featured-post {
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--bg-card); border: 1px solid var(--border-secondary);
  transition: box-shadow var(--duration-fast) var(--ease-default), border-color var(--duration-fast) var(--ease-default);
}
.featured-post:hover { box-shadow: var(--shadow-lg); border-color: var(--border-primary); }
.featured-img { position: relative; min-height: 380px; overflow: hidden; }
.featured-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.featured-content { padding: var(--space-40); display: flex; flex-direction: column; justify-content: center; gap: var(--space-16); align-items: flex-start; }
.featured-content h2 { font-size: clamp(24px, 2.5vw, 32px); line-height: 1.25; }
.featured-content .excerpt { font-size: 16px; color: var(--text-secondary); }
.featured-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12); font-size: 14px; color: var(--text-tertiary); }
@media (max-width: 960px) {
  .featured-post { grid-template-columns: 1fr; }
  .featured-img { min-height: 240px; }
  .featured-content { padding: var(--space-24); }
}

/* Post cards */
.post-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-24); }
.post-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-24); }
.post-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-20); }
@media (max-width: 960px) { .post-grid-3, .post-grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .post-grid-2, .post-grid-3, .post-grid-4 { grid-template-columns: 1fr; } }

.post-card-wrap { display: flex; }
.post-card {
  display: flex; flex-direction: column; flex: 1; width: 100%;
  background: var(--bg-card); border: 1px solid var(--border-secondary);
  transition: box-shadow var(--duration-fast) var(--ease-default), border-color var(--duration-fast) var(--ease-default);
}
.post-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-primary); }
.post-card-img { aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-inset); }
.post-grid-2 .post-card-img { aspect-ratio: 4 / 3; }
.post-card-img img { width: 100%; height: 100%; object-fit: cover; }
.post-card-body { display: flex; flex-direction: column; align-items: flex-start; flex: 1; gap: var(--space-12); padding: var(--space-20); }
.post-card-body .post-card-excerpt, .post-card-body .post-card-footer { align-self: stretch; }
.post-card-title { font-family: var(--font-heading); font-size: 20px; line-height: 1.3; font-weight: 500; }
.post-grid-4 .post-card-title { font-size: 17px; }
.post-card-excerpt { font-size: 14px; color: var(--text-secondary); flex: 1; }
.post-grid-4 .post-card-excerpt {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.post-card-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: var(--space-12); border-top: 1px solid var(--border-secondary);
  font-size: 13px; color: var(--text-tertiary);
}
.post-card-footer .read-link { color: var(--text-brand); font-weight: 500; }

/* Pagination */
.pagination { display: flex; justify-content: center; gap: var(--space-16); margin-top: var(--space-48); }

/* --------------------------------------------------------------------------
   9. Newsletter strip (Ghost members form)
   -------------------------------------------------------------------------- */
.newsletter-strip {
  margin-top: var(--space-64); padding: var(--space-40);
  background: var(--bg-inverse); color: var(--text-on-inverse);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-32); flex-wrap: wrap;
}
.newsletter-strip h3 { font-size: 24px; font-weight: 500; margin-bottom: var(--space-4); }
.newsletter-strip p { font-size: 14px; color: var(--text-on-inverse-dim); }
.newsletter-form { display: flex; gap: var(--space-8); flex-wrap: wrap; }
.newsletter-input {
  height: 48px; min-width: 260px; padding: 0 var(--space-16);
  font-family: var(--font-body); font-size: 15px; color: var(--text-primary);
  background: #FFFFFF; border: 1px solid transparent; border-radius: var(--radius-full);
}
.newsletter-input:focus { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.newsletter-form .btn-primary { background: var(--teal-500); }
.newsletter-form .btn-primary:hover { background: var(--teal-400); }
form[data-members-form] .form-msg { display: none; width: 100%; font-size: 14px; margin-top: var(--space-8); }
form[data-members-form].success .form-msg-success { display: block; color: var(--teal-300); }
form[data-members-form].error .form-msg-error { display: block; color: var(--gold-300); }
form[data-members-form].loading button { opacity: 0.45; pointer-events: none; }
@media (max-width: 767px) { .newsletter-strip { padding: var(--space-24); } .newsletter-input { min-width: 0; flex: 1; } }

/* --------------------------------------------------------------------------
   10. Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--bg-inverse); color: var(--text-on-inverse-dim); margin-top: var(--space-96); }
.footer-inner { max-width: var(--container-max); margin: 0 auto; padding: var(--space-48) var(--space-32) var(--space-32); }
.footer-top-row {
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-32);
  padding-bottom: var(--space-32); border-bottom: 1px solid var(--border-on-inverse); flex-wrap: wrap;
}
.footer-brand .logo-text { color: #FFFFFF; }
.footer-brand .logo-text .accent { color: var(--teal-300); }
.footer-tagline { margin-top: var(--space-8); font-size: 14px; max-width: 340px; }
.footer-eval { text-align: right; }
.footer-eval p { font-size: 14px; margin-bottom: var(--space-12); }
.footer-links-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-32);
  padding: var(--space-32) 0;
}
.footer-col-title {
  font-size: 12px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-on-inverse); margin-bottom: var(--space-16);
}
.footer-tags { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.footer-tag {
  display: inline-block; padding: var(--space-4) var(--space-12);
  font-size: 13px; color: var(--text-on-inverse-dim);
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border-on-inverse);
  border-radius: var(--radius-full);
  transition: background var(--duration-instant) var(--ease-default), color var(--duration-instant) var(--ease-default);
}
.footer-tag:hover { background: var(--teal-600); color: #FFFFFF; border-color: var(--teal-600); }
.footer-links-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-8); font-size: 14px; }
.footer-links-list a:hover { color: #FFFFFF; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-16);
  padding-top: var(--space-24); border-top: 1px solid var(--border-on-inverse);
  font-size: 13px; flex-wrap: wrap;
}
.footer-legal-links { display: flex; gap: var(--space-16); }
.footer-legal-links a:hover { color: #FFFFFF; }
@media (max-width: 960px) { .footer-links-grid { grid-template-columns: 1fr 1fr; } .footer-eval { text-align: left; } }
@media (max-width: 600px) { .footer-links-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   11. Post page — breadcrumb, hero, article
   -------------------------------------------------------------------------- */
.breadcrumb-bar { background: var(--bg-inset); border-bottom: 1px solid var(--border-secondary); padding: var(--space-8) 0; }
.breadcrumb-inner {
  max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-32);
  font-size: 13px; color: var(--text-tertiary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.breadcrumb-inner a { color: var(--text-brand); }
.bc-sep { margin: 0 var(--space-8); }

.post-hero { max-width: 860px; margin: var(--space-48) auto 0; padding: 0 var(--space-24); text-align: center; }
.post-hero .badge { margin-bottom: var(--space-16); }
.post-title { font-size: clamp(28px, 4vw, 48px); line-height: 1.15; font-weight: 400; letter-spacing: -0.01em; margin-bottom: var(--space-20); }
.post-meta {
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: var(--space-12);
  font-size: 14px; color: var(--text-tertiary);
}
.meta-author { display: flex; align-items: center; gap: var(--space-8); color: var(--text-secondary); }
.author-avatar {
  width: 32px; height: 32px; border-radius: var(--radius-full);
  background: var(--bg-brand-2); color: var(--text-brand);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 500; overflow: hidden;
}
.author-avatar img { width: 100%; height: 100%; object-fit: cover; }
.meta-sep { color: var(--border-primary); }

.feature-image-wrap { max-width: 920px; margin: var(--space-32) auto 0; padding: 0 var(--space-24); }
.feature-image-wrap img { width: 100%; }
.feature-image-wrap figcaption { text-align: center; font-size: 13px; color: var(--text-tertiary); margin-top: var(--space-8); }

.post-body-wrap { max-width: var(--article-max); margin: 0 auto; padding: var(--space-40) var(--space-24) 0; }

/* Article content — styles Koenig output AND legacy prototype classes */
.post-content { font-size: 19px; line-height: 1.7; color: var(--text-primary); }
.post-content > * + * { margin-top: var(--space-20); }
.post-content h2 {
  font-size: clamp(24px, 2.5vw, 30px); line-height: 1.3; font-weight: 500;
  margin-top: var(--space-48);
}
.post-content h3 { font-size: 22px; line-height: 1.35; font-weight: 500; margin-top: var(--space-32); }
.post-content p, .post-content li { color: #2B4B45; }
.post-content strong { font-weight: 500; color: var(--text-primary); }
.post-content a { color: var(--text-brand); font-weight: 500; position: relative; }
.post-content a:hover { border-bottom: 1.5px solid var(--text-brand); }
.post-content ul, .post-content ol { margin-left: var(--space-24); }
.post-content li + li { margin-top: var(--space-8); }
.post-content blockquote {
  border-left: 3px solid var(--teal-400); padding: var(--space-8) 0 var(--space-8) var(--space-20);
  color: var(--text-secondary); font-style: italic;
}
.post-content hr { border: none; border-top: 1px solid var(--border-secondary); margin: var(--space-48) 0; }
.post-content figure { margin: var(--space-32) 0; }
.post-content figcaption { text-align: center; font-size: 13px; color: var(--text-tertiary); margin-top: var(--space-8); font-style: italic; }
.post-content .kg-image { margin: 0 auto; }
.post-content .kg-width-wide { position: relative; width: min(920px, 92vw); margin-left: 50%; transform: translateX(-50%); }
.post-content .kg-width-full { position: relative; width: 100vw; margin-left: 50%; transform: translateX(-50%); }
.post-content .kg-width-full img { width: 100%; }
.post-content .kg-callout-card {
  display: flex; gap: var(--space-12); padding: var(--space-20);
  background: var(--bg-inset); border-left: 3px solid var(--teal-500);
}
.post-content .kg-button-card a { border-bottom: none; }

/* Table of contents */
.post-content .toc, .toc {
  background: var(--bg-inset); border-left: 3px solid var(--teal-600);
  padding: var(--space-20) var(--space-24); margin-top: var(--space-32);
  font-size: 16px;
}
.toc-label { font-size: 12px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-brand); margin-bottom: var(--space-12); }
.toc ol { margin-left: var(--space-20); }
.toc a { color: var(--text-secondary); font-weight: 400; }
.toc a:hover { color: var(--text-brand); }

/* Exercise / prompt / strategy cards (legacy component family) */
.exercise-card, .game-card {
  background: var(--bg-card); border: 1px solid var(--border-secondary); border-top: 3px solid var(--teal-600);
  padding: var(--space-24); margin-top: var(--space-24); font-size: 16px;
}
.exercise-header { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-12); margin-bottom: var(--space-12); }
.exercise-num {
  display: inline-block; padding: 2px var(--space-8);
  background: var(--bg-brand-1); color: var(--text-brand);
  font-size: 12px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase;
}
.exercise-title { font-family: var(--font-heading); font-size: 19px; font-weight: 500; }
.exercise-time { margin-left: auto; font-size: 13px; color: var(--text-tertiary); }
.exercise-try, .stop-ask { background: var(--bg-inset); padding: var(--space-12) var(--space-16); margin-top: var(--space-12); font-size: 15px; }
.stop-ask { background: var(--bg-brand-1); }
.exercise-builds { border-top: 1px solid var(--border-secondary); padding-top: var(--space-12); margin-top: var(--space-16); font-size: 14px; color: var(--text-secondary); }
.passage-excerpt { background: var(--bg-inset); border-left: 3px solid var(--teal-300); padding: var(--space-16) var(--space-20); margin-top: var(--space-12); }
.passage-label { font-size: 12px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: var(--space-8); }
.passage-text { border: none; padding: 0; font-size: 16px; }
.research-callout { background: var(--bg-inset); border-left: 3px solid var(--teal-500); padding: var(--space-16) var(--space-20); margin-top: var(--space-20); font-size: 15px; }
.pullquote {
  border-left: 3px solid var(--teal-400); padding-left: var(--space-20);
  font-family: var(--font-heading); font-size: 24px; line-height: 1.4; color: var(--text-secondary);
  margin: var(--space-32) 0;
}

/* Checklist / steps / skills (post-01 family) */
.checklist-item, .step-card { display: flex; gap: var(--space-16); padding: var(--space-16); background: var(--bg-inset); margin-top: var(--space-12); font-size: 16px; }
.check-num, .step-num {
  flex-shrink: 0; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-brand); color: var(--text-on-brand); font-weight: 500; font-size: 14px;
}
.skills-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-12); margin-top: var(--space-20); }
.skill-card { background: var(--bg-card); border: 1px solid var(--border-secondary); padding: var(--space-16); font-size: 14px; }

/* In-article CTA panels */
.cta-inline {
  background: var(--bg-brand-1); border: 1px solid var(--border-brand);
  padding: var(--space-24); margin-top: var(--space-32); text-align: center; font-size: 16px;
}
.cta-inline .btn, .cta-inline .btn-primary { margin-top: var(--space-16); }
.cta-bottom {
  background: var(--bg-inverse); color: var(--text-on-inverse);
  padding: var(--space-48) var(--space-32); margin-top: var(--space-64); text-align: center;
}
.cta-bottom h2 { color: #FFFFFF; font-size: clamp(24px, 2.5vw, 32px); font-weight: 500; margin-top: 0; }
.cta-bottom p { color: var(--text-on-inverse-dim); margin-top: var(--space-8); font-size: 16px; }
.cta-bottom .btn { margin-top: var(--space-24); }
.cta-fine { margin-top: var(--space-12); font-size: 13px; color: var(--text-on-inverse-dim); }

/* Legacy prototype CTA classes (inside imported post HTML) → same treatment */
.post-content .btn-primary, .btn-cta-large, .btn-read {
  display: inline-flex; align-items: center; gap: var(--space-8);
  background: var(--bg-brand); color: var(--text-on-brand);
  height: 48px; padding: 0 var(--space-24); font-size: 16px; font-weight: 500;
  border-radius: var(--radius-full);
}
.post-content .btn-primary:hover, .btn-cta-large:hover, .btn-read:hover { background: var(--bg-brand-hover); box-shadow: var(--shadow-md); }
.post-content .cta-inline a.btn-primary { border-bottom: none; }

/* FAQ accordion */
.faq-list { border: 1px solid var(--border-secondary); margin-top: var(--space-24); background: var(--bg-card); font-size: 16px; }
.faq-item + .faq-item { border-top: 1px solid var(--border-secondary); }
.faq-q {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-16);
  padding: var(--space-16) var(--space-20); cursor: pointer; font-weight: 500;
  transition: color var(--duration-instant) var(--ease-default);
}
.faq-q:hover, .faq-q.faq-open { color: var(--text-brand); }
.faq-arrow { transition: transform var(--duration-normal) var(--ease-out); font-size: 12px; color: var(--text-tertiary); }
.faq-q.faq-open .faq-arrow { transform: rotate(180deg); }
.faq-a { display: none; padding: 0 var(--space-20) var(--space-16); background: var(--bg-inset); padding-top: var(--space-16); color: var(--text-secondary); }
.faq-a.faq-open { display: block; }

/* Related posts */
.related-section { max-width: var(--article-max); margin: var(--space-64) auto 0; padding: 0 var(--space-24); }
.related-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); }
@media (max-width: 900px) { .related-grid { grid-template-columns: 1fr; } }
.related-card {
  display: flex; gap: var(--space-16); align-items: center;
  background: var(--bg-card); border: 1px solid var(--border-secondary); padding: var(--space-12);
  transition: box-shadow var(--duration-fast) var(--ease-default), border-color var(--duration-fast) var(--ease-default);
}
.related-card:hover { box-shadow: var(--shadow-sm); border-color: var(--border-primary); }
.related-card-img { flex-shrink: 0; width: 72px; height: 72px; overflow: hidden; background: var(--bg-inset); }
.related-card-img img { width: 100%; height: 100%; object-fit: cover; }
.related-card-cat { font-size: 11px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-brand); }
.related-card-title { font-size: 15px; font-weight: 500; line-height: 1.35; margin-top: 2px; }

/* --------------------------------------------------------------------------
   12. Tag (category) pages
   -------------------------------------------------------------------------- */
.tag-hero { text-align: center; padding: var(--space-48) var(--space-24); background: var(--bg-inset); border-bottom: 1px solid var(--border-secondary); }
.tag-hero h1 { font-size: clamp(28px, 3.5vw, 40px); font-weight: 400; }
.tag-hero p { max-width: 560px; margin: var(--space-12) auto 0; color: var(--text-secondary); }
.tag-count { margin-top: var(--space-12); font-size: 13px; color: var(--text-tertiary); }
.empty-state { text-align: center; padding: var(--space-64) var(--space-24) var(--space-24); }
.empty-state p { font-size: 18px; color: var(--text-secondary); max-width: 480px; margin: 0 auto; }
.explore-row { margin-top: var(--space-48); }
.topic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-16); }
@media (max-width: 960px) { .topic-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .topic-grid { grid-template-columns: 1fr; } }
.topic-card {
  display: flex; flex-direction: column; gap: var(--space-8);
  background: var(--bg-card); border: 1px solid var(--border-secondary);
  padding: var(--space-20);
  transition: box-shadow var(--duration-fast) var(--ease-default), border-color var(--duration-fast) var(--ease-default);
}
.topic-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-primary); }
.topic-card-name { font-size: 20px; font-weight: 500; }
.topic-card-desc { font-size: 14px; color: var(--text-secondary); flex: 1; }
.topic-card-count {
  font-size: 12px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-brand);
}

/* --------------------------------------------------------------------------
   13. Static pages + 404
   -------------------------------------------------------------------------- */
.page-single .post-hero { text-align: left; margin-left: 0; }
.error-page { text-align: center; padding: var(--space-96) var(--space-24); }
.error-page h1 { font-size: clamp(40px, 6vw, 72px); font-weight: 300; }
.error-page p { color: var(--text-secondary); margin: var(--space-16) 0 var(--space-32); }