/* ============================================================
   UsdtFreeze Notes — blog-specific overrides
   Loaded AFTER base.css (main site CSS verbatim).
   Adds only what the blog needs: card grid, single/archive
   scaffolding, hero spotlight card (mirrors .checker), footer
   grid tweaks. Uses base.css tokens throughout.
   ============================================================ */

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-text);
  color: var(--color-bg);
  padding: 0.75rem 1rem;
  z-index: 200;
  border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus { left: 0; outline: none; }

/* ---------- Brand — align sub label with main site ---------- */
.brand-sub {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  padding-left: 0.75rem;
  margin-left: 0.25rem;
  border-left: 1px solid rgba(255,255,255,0.24);
  line-height: 1;
  align-self: center;
}
.site-header.is-scrolled .brand-sub {
  color: var(--color-text-muted);
  border-left-color: rgba(15,30,43,0.18);
}
.brand-mark { line-height: 1; }

/* Highlight current nav item */
.nav__link.is-current {
  color: rgba(255,255,255,0.98);
  background: rgba(255,255,255,0.06);
}
.site-header.is-scrolled .nav__link.is-current {
  color: var(--color-primary-active);
  background: rgba(20,184,166,0.08);
}

/* ---------- Hero spotlight card (mirrors .checker styling) ---------- */
.hero__spotlight {
  position: relative;
  background: linear-gradient(165deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-2xl);
  padding: clamp(1.5rem, 3vw, 2rem);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 30px 80px rgba(0,0,0,0.4);
  z-index: 1;
  color: white;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}
.hero__spotlight::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(20,184,166,0.5) 0%, transparent 40%, rgba(217,184,127,0.4) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.hero__spotlight-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.68);
}
.hero__spotlight-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.hero__spotlight-eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  background: #2dd4bf;
  border-radius: 999px;
  box-shadow: 0 0 0 3px rgba(45,212,191,0.18);
}
.hero__spotlight-thumb {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, rgba(20,184,166,0.14), rgba(184,148,92,0.10));
  border: 1px solid rgba(255,255,255,0.08);
}
.hero__spotlight-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.hero__spotlight-body { display: flex; flex-direction: column; gap: 0.6rem; }
.hero__spotlight-cat {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #d9b87f;
}
.hero__spotlight-title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.1vw, 1.7rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: white;
  margin: 0;
}
.hero__spotlight-title a { color: inherit; text-decoration: none; }
.hero__spotlight-title a:hover { color: #5eead4; }
.hero__spotlight-excerpt {
  color: rgba(255,255,255,0.72);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
}
.hero__spotlight-read {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #2dd4bf;
  text-decoration: none;
  margin-top: 0.25rem;
}
.hero__spotlight-read:hover { color: #5eead4; }
.hero__spotlight-read::after {
  content: '→'; transition: transform 0.2s;
}
.hero__spotlight-read:hover::after { transform: translateX(3px); }

/* Hero meta shown as flex row of stat blocks — align to base */
.hero__meta { list-style: none; padding: 0; margin: 0; }
.hero__meta div,
.hero__meta li {
  min-width: 0;
}

/* ---------- Section wrappers ---------- */
.section {
  padding-top: clamp(var(--space-16), 8vw, var(--space-24));
  padding-bottom: clamp(var(--space-16), 8vw, var(--space-24));
  background: var(--color-bg);
}
.section-title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: clamp(var(--space-8), 3vw, var(--space-12));
  flex-wrap: wrap;
}
.section-title-row p {
  color: var(--color-text-muted);
  max-width: 32rem;
  font-size: var(--text-base);
  margin: 0;
}
.section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.85rem, 3.6vw, 2.85rem);
  letter-spacing: -0.03em;
  line-height: 1.02;
  color: var(--color-text);
  margin: 0;
}
.section-title em {
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(120deg, #14b8a6 0%, #0a6d65 60%, #b8945c 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ---------- Card grid ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(var(--space-5), 2.4vw, var(--space-8));
}
@media (max-width: 960px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cards { grid-template-columns: 1fr; } }

.card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.28s, box-shadow 0.28s;
  display: flex;
  flex-direction: column;
}
.card:hover {
  transform: translateY(-3px);
  border-color: rgba(20,184,166,0.4);
  box-shadow: 0 20px 40px -20px rgba(10,23,33,0.18);
}
.card__link {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  height: 100%;
}
.card__thumb {
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, #edeae2 0%, #dcd6c7 100%);
  overflow: hidden;
  position: relative;
}
.card__thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.card:hover .card__thumb img { transform: scale(1.03); }
.card__thumb--empty {
  width: 100%; height: 100%;
  background:
    radial-gradient(circle at 30% 30%, rgba(20,184,166,0.18), transparent 55%),
    radial-gradient(circle at 75% 65%, rgba(184,148,92,0.14), transparent 55%),
    linear-gradient(135deg, #edeae2, #dcd6c7);
}
.card__body {
  padding: clamp(1.1rem, 1.6vw, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}
.card__meta {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.card__cat { color: var(--color-primary-active); }
.card__dot { opacity: 0.5; }
.card__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--color-text);
  margin: 0.15rem 0 0.1rem;
}
.card__excerpt {
  color: var(--color-text-muted);
  font-size: 0.94rem;
  line-height: 1.55;
  margin: 0;
  flex: 1;
}
.card__read {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary-active);
  margin-top: 0.6rem;
}
.card__read::after { content: '→'; transition: transform 0.2s; }
.card:hover .card__read::after { transform: translateX(3px); }

/* ---------- Pagination ---------- */
.pagination {
  margin-top: clamp(var(--space-8), 3vw, var(--space-12));
  display: flex; justify-content: center;
}
.pagination .nav-links,
.pagination .page-numbers { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.pagination .page-numbers:hover { border-color: var(--color-primary); color: var(--color-primary-active); }
.pagination .page-numbers.current {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

/* ---------- Single post ---------- */
.single {
  padding-top: clamp(var(--space-12), 6vw, var(--space-20));
  padding-bottom: clamp(var(--space-16), 8vw, var(--space-24));
  background: var(--color-bg);
}
.single__head {
  max-width: 44rem;
  margin: 0 auto var(--space-10);
  text-align: left;
}
.single__meta {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.single__cat { color: var(--color-primary-active); }
.single__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.4rem);
  letter-spacing: -0.03em;
  line-height: 1.04;
  color: var(--color-text);
  margin: 0 0 var(--space-4);
}
.single__title em {
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(120deg, #14b8a6 0%, #0a6d65 60%, #b8945c 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.single__lead {
  color: var(--color-text-muted);
  font-size: 1.15rem;
  line-height: 1.5;
  margin: 0;
}
.single__thumb {
  max-width: 60rem;
  margin: 0 auto var(--space-10);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  border: 1px solid var(--color-border);
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #edeae2, #dcd6c7);
}
.single__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.single__body {
  max-width: 44rem;
  margin: 0 auto;
  font-size: 1.075rem;
  line-height: 1.72;
  color: var(--color-text);
}
.single__body > * + * { margin-top: 1.2em; }
.single__body h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.65rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-top: 2.5em;
  color: var(--color-text);
}
.single__body h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.28rem;
  letter-spacing: -0.015em;
  margin-top: 2em;
  color: var(--color-text);
}
.single__body p { margin: 0; }
.single__body a { color: var(--color-primary-active); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.single__body a:hover { color: var(--color-primary); }
.single__body ul, .single__body ol { padding-left: 1.4em; }
.single__body li + li { margin-top: 0.4em; }
.single__body blockquote {
  border-left: 3px solid var(--color-primary);
  padding-left: 1.4em;
  margin-left: 0;
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
}
.single__body code {
  font-family: var(--font-mono);
  background: var(--color-surface-offset);
  border: 1px solid var(--color-border);
  padding: 0.12em 0.4em;
  border-radius: var(--radius-sm);
  font-size: 0.88em;
}
.single__body pre {
  background: var(--color-dark);
  color: #edeae2;
  padding: 1.2rem;
  border-radius: var(--radius-lg);
  overflow-x: auto;
  font-size: 0.9rem;
}
.single__body pre code { background: transparent; border: none; padding: 0; color: inherit; }
.single__body img { max-width: 100%; height: auto; border-radius: var(--radius-lg); }

/* NDA callout inside single body */
.nda-callout {
  margin: 2.5em 0;
  padding: 1.5rem 1.6rem;
  background: linear-gradient(135deg, rgba(20,184,166,0.06), rgba(184,148,92,0.05));
  border: 1px solid rgba(20,184,166,0.28);
  border-radius: var(--radius-xl);
  font-size: 0.98rem;
  color: var(--color-text);
}
.nda-callout strong { color: var(--color-primary-active); }

/* CTA card at end of single */
.cta-card {
  max-width: 44rem;
  margin: var(--space-16) auto 0;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--color-dark);
  color: white;
  border-radius: var(--radius-2xl);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-card::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(20,184,166,0.28), transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(184,148,92,0.20), transparent 55%);
}
.cta-card > * { position: relative; z-index: 1; }
.cta-card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 0.5rem;
}
.cta-card p {
  color: rgba(255,255,255,0.75);
  margin: 0 0 1.4rem;
  font-size: 1rem;
}
.cta-card .btn { display: inline-flex; }
/* Ghost buttons on dark cta look correct */
.cta-card .btn--ghost {
  color: white;
  border-color: rgba(255,255,255,0.28);
}
.cta-card .btn--ghost:hover { border-color: white; background: rgba(255,255,255,0.06); }

/* Post nav (prev / next) */
.postnav {
  max-width: 44rem;
  margin: var(--space-12) auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
@media (max-width: 640px) { .postnav { grid-template-columns: 1fr; } }
.postnav a {
  display: flex; flex-direction: column; gap: 0.35rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  text-decoration: none;
  color: var(--color-text);
  transition: border-color 0.2s;
}
.postnav a:hover { border-color: var(--color-primary); }
.postnav span {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.postnav strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  color: var(--color-text);
  letter-spacing: -0.01em;
}
.postnav--next { text-align: right; }

/* ---------- Archive / search head ---------- */
.archive-head {
  padding-top: clamp(var(--space-16), 10vw, var(--space-24));
  padding-bottom: clamp(var(--space-8), 4vw, var(--space-12));
  background: var(--color-dark);
  color: white;
  position: relative;
  overflow: hidden;
}
.archive-head::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background-image:
    radial-gradient(circle at 78% 32%, rgba(20,184,166,0.22), transparent 55%),
    radial-gradient(circle at 20% 82%, rgba(184,148,92,0.15), transparent 55%),
    linear-gradient(180deg, #0a1721, #0f2030 60%, #0a1721);
}
.archive-head > .container { position: relative; z-index: 1; }
.archive-head .eyebrow {
  color: #d9b87f;
  background: rgba(217,184,127,0.08);
  border: 1px solid rgba(217,184,127,0.25);
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-full);
  display: inline-block;
  margin-bottom: var(--space-5);
}
.archive-head h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4.8vw, 3.2rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: white;
  margin: 0 0 var(--space-3);
  max-width: 40rem;
}
.archive-head p {
  color: rgba(255,255,255,0.72);
  font-size: 1.1rem;
  max-width: 34rem;
  margin: 0;
}

/* 404 / notfound */
.notfound {
  text-align: center;
  padding: clamp(var(--space-16), 10vw, var(--space-24)) var(--space-4);
  max-width: 32rem;
  margin: 0 auto;
}
.notfound .eyebrow { color: var(--color-primary-active); margin-bottom: var(--space-4); }
.notfound h1, .notfound h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--color-text);
  margin: 0 0 var(--space-3);
}
.notfound p { color: var(--color-text-muted); margin: 0 0 var(--space-6); font-size: 1.05rem; }

/* ---------- Search form ---------- */
.search-form {
  display: flex; gap: 0.5rem;
  max-width: 32rem;
  margin: var(--space-6) auto 0;
}
.search-form input[type="search"] {
  flex: 1;
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font: inherit;
  color: var(--color-text);
}
.search-form input[type="search"]:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(20,184,166,0.15);
}

/* ---------- Static page ---------- */
.static-page {
  padding-top: clamp(var(--space-12), 6vw, var(--space-20));
  padding-bottom: clamp(var(--space-16), 8vw, var(--space-24));
}
.static-page__body {
  max-width: 42rem;
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-text);
}
.static-page__body h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 2.8rem);
  letter-spacing: -0.03em;
  margin: 0 0 var(--space-6);
  color: var(--color-text);
}
.static-page__body h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  margin-top: 2em;
}

/* ---------- Small-screen fixes ---------- */
@media (max-width: 640px) {
  .section-title-row { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .single__head, .single__body, .cta-card, .postnav { padding-left: 0; padding-right: 0; }
}

/* ---------- Ensure hero__meta as UL renders nicely ---------- */
.hero__meta li strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: white;
  line-height: 1;
  margin-bottom: 0.25rem;
}

/* ============================================================
   Extra BEM class aliases used by templates
   ============================================================ */

/* Archive head BEM aliases */
.archive-head__inner { max-width: var(--content-wide); margin: 0 auto; padding-left: var(--space-4); padding-right: var(--space-4); }
.archive-head__eyebrow {
  color: #d9b87f;
  background: rgba(217,184,127,0.08);
  border: 1px solid rgba(217,184,127,0.25);
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-full);
  display: inline-block;
  margin-bottom: var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.archive-head__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4.8vw, 3.2rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: white;
  margin: 0;
  max-width: 40rem;
}

/* Single inner */
.single__inner {
  max-width: var(--content-wide);
  margin: 0 auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}
.single__dateline {
  display: inline-flex;
  gap: 0.55rem;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-8);
}
.single__dateline > * { display: inline-flex; align-items: center; }

/* Extra single__meta cat inline */
.single__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary-active);
  margin: 0 0 var(--space-4);
}

/* NDA callout label */
.nda-callout__label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary-active);
  margin-bottom: 0.6rem;
}
.nda-callout p { margin: 0; color: var(--color-text); }

/* CTA card BEM */
.cta-card__eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #d9b87f;
  margin: 0 0 0.75rem;
}
.cta-card__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0 0 0.75rem;
  color: white;
}
.cta-card__title em {
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(120deg, #2dd4bf 0%, #5eead4 50%, #d9b87f 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.cta-card__actions {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}
.cta-card__meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-top: 1.25rem !important;
}

/* Post nav BEM */
.postnav__prev, .postnav__next {
  display: flex; flex-direction: column; gap: 0.35rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  text-decoration: none;
  color: var(--color-text);
  transition: border-color 0.2s, transform 0.2s;
}
.postnav__prev:hover, .postnav__next:hover { border-color: var(--color-primary); transform: translateY(-2px); }
.postnav__next { text-align: right; }
.postnav__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.postnav__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  color: var(--color-text);
  letter-spacing: -0.01em;
}

/* Notfound code (404 large numerals) */
.notfound__code {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(5rem, 14vw, 9rem);
  letter-spacing: -0.05em;
  line-height: 0.9;
  color: transparent;
  background: linear-gradient(120deg, #14b8a6 0%, #0a6d65 60%, #b8945c 100%);
  -webkit-background-clip: text; background-clip: text;
  margin: 0 0 var(--space-4);
}

/* Section within single doesn't get white bg from .section */
.single .cta-card { background: var(--color-dark); }

/* Nav toggle color follows header state so it's visible on the dark hero */
.site-header .nav-toggle { color: white; }
.site-header.is-scrolled .nav-toggle { color: var(--color-text); }