/* ═══════════════════════════════════════════════════════════════
   components.css — KB Brand Components
   Nav, project cards, pull quotes, footer, tags, mobile nav
   ═══════════════════════════════════════════════════════════════ */

/* ══ NAVIGATION BAR ══ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  background: var(--color-nav-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--color-border);
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-page);
  transition: height var(--duration-med) var(--ease-out),
              box-shadow var(--duration-med) var(--ease-out);
}
.nav.scrolled {
  height: var(--nav-height-scrolled);
  box-shadow: var(--shadow-nav);
}

.nav-brand {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  text-decoration: none;
  letter-spacing: -0.02em;
  transition: color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.nav-brand:hover {
  color: var(--color-accent);
  transform: scale(1.05);
}

.nav-links {
  display: flex;
  gap: var(--space-md);
  list-style: none;
}
.nav-links a {
  font-family: var(--font-meta);
  font-size: var(--text-small);
  color: var(--color-text-muted);
  text-decoration: none;
  letter-spacing: var(--tracking-wide);
  transition: color var(--duration-fast) var(--ease-out);
  position: relative;
  will-change: color;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0; right: 0;
  height: 1.5px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-fast) var(--ease-out);
}
.nav-links a:hover::after,
.nav-links a.active::after {
  transform: scaleX(1);
}
.nav-links a:hover,
.nav-links a.active {
  color: var(--color-text-primary);
}

.nav-tag {
  font-family: var(--font-meta);
  font-size: var(--text-micro);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

/* ══ DESKTOP DROPDOWN SUBMENU ══ */
.nav-dropdown-wrap { position: relative; }
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--color-overlay-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-xs) 0;
  min-width: var(--dropdown-min-width);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(12px);
  transition: opacity var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out),
              visibility var(--duration-fast);
  z-index: calc(var(--z-nav) + 1);
}
.nav-dropdown-wrap:hover .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(4px);
}
.nav-dropdown a {
  display: block;
  padding: var(--space-xs) var(--space-lg);
  font-family: var(--font-meta);
  font-size: var(--text-small);
  color: var(--color-text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}
.nav-dropdown a:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-subtle);
}

/* ══ MOBILE SUBMENU ACCORDION ══ */
.mobile-submenu-wrap { display: flex; flex-direction: column; align-items: center; }
.mobile-submenu-toggle {
  font-family: var(--font-meta);
  font-size: var(--text-h2);
  color: var(--color-text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out);
}
.mobile-submenu-toggle:hover { color: var(--color-accent); }
.mobile-submenu-arrow {
  display: inline-block;
  font-size: var(--text-meta);
  transition: transform var(--duration-med) var(--ease-out);
}
.mobile-submenu-toggle[aria-expanded="true"] .mobile-submenu-arrow {
  transform: rotate(180deg);
}
.mobile-submenu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--duration-med) var(--ease-out),
              margin var(--duration-med) var(--ease-out);
}
.mobile-submenu.open {
  max-height: 300px;
  margin-top: var(--space-md);
}
.mobile-submenu a {
  font-family: var(--font-meta);
  font-size: var(--text-body);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}
.mobile-submenu a:hover { color: var(--color-accent); }

@media (max-width: 768px) {
  .nav-dropdown-wrap .nav-dropdown { display: none; }
}

/* ══ NAV TOGGLE: hamburger for mobile, hidden on desktop ══ */
.nav-toggle {
  display: none;
  width: 32px; height: 32px;
  background: none; border: none; cursor: pointer;
  position: relative;
  z-index: calc(var(--z-nav) + 1);
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast) var(--ease-out);
}
.nav-toggle:hover {
  background: var(--color-hover-subtle);
}
.nav-toggle span {
  display: block;
  width: 18px; height: 1.5px;
  background: var(--color-text-primary);
  position: absolute;
  left: 7px;
  transition: transform var(--duration-med) var(--ease-out),
              opacity var(--duration-fast);
}
.nav-toggle span:nth-child(1) { top: 11px; transform: rotate(90deg); }
.nav-toggle span:nth-child(2) { top: 11px; }
.nav-toggle.open span:nth-child(1) { transform: rotate(45deg); }
.nav-toggle.open span:nth-child(2) { transform: rotate(-45deg); }

/* ══ SIDEBAR MENU (desktop: peeking right, mobile: overlay) ══ */
.nav-sidebar {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 280px;
  z-index: var(--z-overlay);
  background: var(--color-overlay-bg);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border-left: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-3xl) var(--space-xl) var(--space-xl);
  gap: var(--space-sm);
  transform: translateX(100%);
  transition: transform var(--duration-med) var(--ease-out);
  box-shadow: -8px 0 32px rgba(0,0,0,0.08);
}
.nav-sidebar.open { transform: translateX(0); }
.nav-sidebar a {
  font-family: var(--font-meta);
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--duration-med) var(--ease-out),
              padding-left var(--duration-med) var(--ease-out);
  letter-spacing: var(--tracking-wide);
  padding: var(--space-2xs) 0;
}
.nav-sidebar a:hover { color: var(--color-accent); padding-left: var(--space-xs); }
.nav-sidebar a.active { color: var(--color-text-primary); }

.sidebar-divider {
  width: 60px; border: none; height: 1px;
  background: var(--color-border); margin: var(--space-md) 0;
}
.sidebar-section-link {
  font-size: var(--text-body); color: var(--color-text-muted);
}

/* Mobile: wider sidebar */
@media (max-width: 520px) {
  .nav-sidebar {
    width: 100%;
    align-items: center;
    padding-top: var(--space-4xl);
    gap: var(--space-md);
  }
  .nav-sidebar a { font-size: var(--text-h3); }
}

@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-tag { display: none; }
  .nav-toggle { display: block; }
}

/* ══ SECTIONS ══ */
.section {
  padding: var(--space-section) var(--space-page);
  max-width: var(--width-max);
  margin: 0 auto;
  background-color: var(--color-bg);
  color: var(--color-text-primary);
}
/* Collapse vertical padding between consecutive sections */
.section + .section { padding-top: 0; }
.section + .section-full { padding-top: 0; }
.section-full + .section { padding-top: 0; }

.section-full {
  padding: var(--space-section) 0;
  width: 100%;
}
.section-full .section-inner {
  max-width: var(--width-max);
  margin: 0 auto;
  padding: 0 var(--space-page);
}

/* Section header with number */
.section-header {
  display: flex;
  gap: var(--space-xl);
  align-items: baseline;
  margin-bottom: var(--space-2xl);
}
.section-num {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-medium);
  color: var(--color-accent);
  opacity: 0.7;
  min-width: 40px;
  transition: opacity var(--duration-fast) var(--ease-out);
}
.section-header:hover .section-num { opacity: 1; }
.section-title {
  font-family: var(--font-display);
  font-size: var(--text-h2-fluid);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
}
.section-sub {
  font-family: var(--font-meta);
  font-size: var(--text-meta);
  color: var(--color-text-muted);
  margin-top: var(--space-2xs);
  font-style: italic;
}

/* ══ PROJECT CARDS ══ */
.card-grid {
  display: flex;
  gap: var(--grid-gap);
  flex-wrap: wrap;
  justify-content: center;
}
.proj-card {
  width: min(280px, 100%);
  cursor: pointer;
  transition: transform var(--duration-med) var(--ease-out);
  will-change: transform;
}
.proj-card:hover { transform: translateY(-4px); }

.card-thumb {
  width: 100%;
  aspect-ratio: 1.4;
  border-radius: var(--radius-sm);
  position: relative;
  overflow: hidden;
}
.card-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: var(--indicator-bar-height);
  background: linear-gradient(90deg, var(--teal-400), var(--purple-400));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-med) var(--ease-out);
}
.proj-card:hover .card-bar { transform: scaleX(1); }

.card-name {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
  margin-top: var(--space-sm);
  text-align: center;
  color: var(--color-text-primary);
}
.card-tags {
  display: flex;
  gap: var(--space-xs);
  justify-content: center;
  margin-top: var(--space-2xs);
  flex-wrap: wrap;
}

/* ══ TAGS ══ */
.tag {
  font-family: var(--font-meta);
  font-size: var(--text-small);
  color: var(--color-text-muted);
  transition: color var(--duration-fast) var(--ease-out),
              letter-spacing var(--duration-fast) var(--ease-out);
  will-change: color;
}
.tag:hover { color: var(--teal-500); letter-spacing: 0.04em; }

/* ══ PROJECT HERO (full-width title above two columns) ══ */
.project-hero {
  padding-bottom: var(--space-lg);
}
.project-hero__title {
  font-family: var(--font-display);
  font-size: var(--text-h2-fluid);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-sm) 0;
}
.project-hero__tags {
  display: flex;
  gap: var(--space-xs);
  margin-bottom: var(--space-xl);
}

/* ══ TWO-COLUMN PROJECT HEADER ══ */
.project-header {
  display: flex;
  gap: var(--header-gap);
  align-items: flex-start;
  margin-bottom: var(--space-xl);
}
.project-header__left { flex: 0 0 var(--header-left); }
.project-header__right { flex: 0 0 var(--header-right); }
.project-header__title {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-sm) 0;
}
.project-header__link {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-style: italic;
  color: var(--color-text-secondary);
}
.project-header__meta {
  font-family: var(--font-meta);
  font-size: var(--text-meta);
  color: var(--color-text-muted);
  line-height: var(--leading-body);
}
.project-header__description {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-text-secondary);
}

/* Small CTA variant */
.cta--sm {
  font-size: var(--text-small);
  padding: var(--space-xs) var(--space-md);
}

@media (max-width: 768px) {
  .project-header { flex-direction: column; gap: var(--space-md); }
  .project-header__left,
  .project-header__right { flex: 1 1 100%; }
  .project-header__description { font-size: var(--text-body); }
  .project-hero__title { font-size: var(--text-h3-fluid); }
  .exp-bullets li { font-size: var(--text-body); }
  .section-header { gap: var(--space-md); margin-bottom: var(--space-xl); }
}

/* ══ PULL QUOTE ══ */
.pull-quote {
  text-align: center;
  max-width: 720px;
  margin: var(--space-lg) auto var(--space-xl);
  padding: 0 var(--space-lg);
}
.pull-quote p {
  font-family: var(--font-meta);
  font-size: var(--text-body);
  font-style: italic;
  color: var(--color-text-muted);
  line-height: var(--leading-loose);
}

/* ══ HERO ══ */
#hero {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--nav-height) var(--space-page) var(--space-2xl);
  position: relative;
  background-color: var(--color-bg);
  color: var(--color-text-primary);
}
@media (max-width: 768px) {
  #hero { min-height: 50vh; padding-bottom: var(--space-xl); }
}
.hero-over {
  font-family: var(--font-meta);
  font-size: var(--text-small);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  margin-bottom: var(--space-lg);
  opacity: 0;
  animation: fadeUp 800ms var(--ease-out) 200ms forwards;
}
.hero-h1 {
  font-family: var(--font-display);
  font-size: var(--text-display-fluid);
  font-weight: var(--weight-medium);
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin-bottom: var(--space-lg);
  opacity: 0;
  animation: fadeUp 1000ms var(--ease-out) 400ms forwards;
}
.hero-desc {
  font-family: var(--font-body);
  font-size: clamp(18px, 2.5vw, var(--text-h3));
  font-weight: 300;
  color: var(--color-text-secondary);
  line-height: var(--leading-body);
  max-width: 600px;
  opacity: 0;
  animation: fadeUp 1000ms var(--ease-out) 600ms forwards;
}
.hero-meta {
  font-family: var(--font-meta);
  font-size: var(--text-meta);
  color: var(--color-text-muted);
  margin-top: var(--space-xl);
  opacity: 0;
  animation: fadeUp 800ms var(--ease-out) 900ms forwards;
}
.hero-line {
  position: absolute;
  bottom: var(--space-xl);
  left: var(--space-page);
  width: 48px; height: 1px;
  background: var(--color-accent);
  opacity: 0;
  animation: lineIn 600ms var(--ease-out) 1200ms forwards;
  transform-origin: left;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes lineIn {
  from { opacity: 0; transform: scaleX(0); }
  to   { opacity: 1; transform: scaleX(1); }
}

/* ══ FOOTER ══ */
footer {
  padding: var(--space-3xl) var(--space-page) var(--space-2xl);
  text-align: center;
  background-color: var(--color-bg);
  color: var(--color-text-primary);
}
.ft-brand {
  font-family: var(--font-display);
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2xs);
  transition: color var(--duration-med) var(--ease-out);
}
.ft-brand:hover { color: var(--color-accent); }
.ft-meta {
  font-family: var(--font-meta);
  font-size: var(--text-small);
  color: var(--color-text-muted);
  transition: color var(--duration-med) var(--ease-out);
}
.ft-meta:hover { color: var(--color-text-secondary); }

/* ══ PROJECT HEADER LINK HOVER ══ */
.project-header__link {
  transition: color var(--duration-fast) var(--ease-out);
}
.project-header__link:hover {
  color: var(--color-accent);
}

/* ══ BREADCRUMB HOVER ══ */
a[style*="All Projects"]:hover,
.breadcrumb:hover {
  color: var(--color-text-primary) !important;
}

/* ══ ABOUT PAGE: EXPERIENCE, SKILLS, CERTIFICATIONS ══ */
.exp-item { margin-bottom: var(--space-2xl); padding-bottom: var(--space-2xl); border-bottom: 1px solid var(--color-border); }
.exp-item:last-child { border-bottom: none; }
.exp-role { font-family: var(--font-body); font-size: var(--text-body); font-weight: var(--weight-bold); color: var(--color-text-primary); }
.exp-org { font-family: var(--font-body); font-size: var(--text-body); font-weight: var(--weight-medium); color: var(--color-text-secondary); }
.exp-date { font-family: var(--font-meta); font-size: var(--text-meta); color: var(--color-text-muted); margin-top: var(--space-2xs); }
.exp-bullets { list-style: none; padding: 0; margin-top: var(--space-md); }
.exp-bullets li { font-family: var(--font-body); font-size: var(--text-meta); line-height: var(--leading-body); color: var(--color-text-secondary); padding-left: var(--space-md); position: relative; margin-bottom: var(--space-xs); }
.exp-bullets li::before { content: ''; position: absolute; left: 0; top: 9px; width: 4px; height: 4px; border-radius: 50%; background: var(--color-accent); }
.skills-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-xl); }
.skill-label { font-family: var(--font-meta); font-size: var(--text-micro); color: var(--teal-500); letter-spacing: var(--tracking-caps); text-transform: uppercase; margin-bottom: var(--space-xs); }
.skill-list { font-family: var(--font-body); font-size: var(--text-meta); color: var(--color-text-secondary); line-height: var(--leading-loose); }
.cert-list { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.cert-item { font-family: var(--font-meta); font-size: var(--text-small); color: var(--color-text-muted); border: 1px solid var(--color-border); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-full); text-decoration: none; }
.contact-row { display: flex; gap: var(--space-xl); flex-wrap: wrap; margin-top: var(--space-lg); }
.contact-row a { font-family: var(--font-meta); font-size: var(--text-meta); color: var(--color-text-secondary); text-decoration: none; transition: color var(--duration-fast); }
.contact-row a:hover { color: var(--color-accent); }

/* Experience item hover */
.exp-item {
  transition: background var(--duration-med) var(--ease-out),
              border-color var(--duration-med) var(--ease-out);
  border-left: 3px solid transparent;
  border-radius: var(--radius-sm);
  padding: var(--space-md) var(--space-lg);
  will-change: background, border-color;
}
.exp-item:hover {
  background: var(--color-bg-subtle);
  border-left-color: var(--color-accent);
}

/* ══ ABOUT PAGE: SKILL GROUPS ══ */
.skill-group {
  transition: background var(--duration-med) var(--ease-out);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  will-change: background;
}
.skill-group:hover {
  background: var(--color-bg-subtle);
}
.skill-group:hover .skill-label {
  color: var(--teal-400);
}

/* ══ ABOUT PAGE: CERTIFICATION PILLS ══ */
.cert-item {
  transition: border-color var(--duration-med) var(--ease-out),
              background var(--duration-med) var(--ease-out),
              transform var(--duration-med) var(--ease-out);
  will-change: border-color, background, transform;
}
.cert-item:hover {
  border-color: var(--color-accent);
  background: var(--teal-overlay-06);
  transform: translateY(-2px);
}

/* ══ GALLERY DOT HOVER ══ */
.gallery-dot:not(.active):hover {
  background: var(--color-text-muted);
  transform: scale(1.3);
}

/* ══ PULL QUOTE HOVER ══ */
.pull-quote p {
  transition: opacity var(--duration-med) var(--ease-out);
  opacity: 0.85;
}
.pull-quote:hover p { opacity: 1; }

/* ══ CARD IMAGE ZOOM ══ */
.proj-card .card-thumb img,
.gallery-card img {
  transition: transform var(--duration-med) var(--ease-out),
              filter var(--duration-med) var(--ease-out);
}
.proj-card:hover .card-thumb img,
.gallery-card.active img {
  transform: scale(1.03);
  filter: brightness(1.05);
}

/* ══ CTA BUTTONS ══ */
.cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-meta);
  font-size: var(--text-small);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-primary);
  text-decoration: none;
  padding: var(--space-sm) var(--space-lg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  transition: all var(--duration-med) var(--ease-out);
  will-change: transform, box-shadow, border-color;
}
.cta:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--teal-overlay-15);
}
.cta-primary {
  background: var(--color-text-primary);
  color: var(--color-bg);
  border-color: var(--color-text-primary);
}
.cta-primary:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}
.cta .arrow {
  display: inline-block;
  transition: transform var(--duration-fast) var(--ease-out);
}
.cta:hover .arrow { transform: translateX(4px); }

/* ══ FOOTER LINK (replaces inline hover handlers) ══ */
.footer-link {
  font-family: var(--font-meta);
  font-size: var(--text-small);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--duration-med) var(--ease-out);
}
.footer-link:hover { color: var(--color-accent); }

/* ══ BREADCRUMB LINK ══ */
.back-link {
  font-family: var(--font-meta);
  font-size: var(--text-small);
  color: var(--color-text-muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--space-lg);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  transition: color var(--duration-fast) var(--ease-out),
              gap var(--duration-fast) var(--ease-out);
}
.back-link::before {
  content: '←';
  transition: transform var(--duration-fast) var(--ease-out);
}
.back-link:hover { color: var(--color-text-primary); gap: 8px; }
.back-link:hover::before { transform: translateX(-2px); }

/* ══ UTILITY CLASSES ══ */
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }
.mb-lg { margin-bottom: var(--space-lg); }
.text-center { text-align: center; }
.pt-0 { padding-top: 0; }
.flex-center { display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap; }
.flex-between { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-md); }
.max-narrow { max-width: var(--width-narrow); margin: 0 auto; }
.viz-text { color: var(--viz-text-primary); }
.viz-text-muted { color: var(--viz-text-muted); }
.viz-text-secondary { color: var(--viz-text-secondary); }

/* ══ VISUALLY HIDDEN (screen reader only) ══ */
.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;
}

/* ══ SKIP LINK ══ */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-md);
  z-index: calc(var(--z-nav) + 10);
  background: var(--color-text-primary);
  color: var(--color-bg);
  padding: var(--space-xs) var(--space-md);
  font-family: var(--font-meta);
  font-size: var(--text-small);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: top var(--duration-fast) var(--ease-out);
}
.skip-link:focus {
  top: var(--space-xs);
}

/* ══ CALLOUT ══ */
.callout {
  border-left: 3px solid var(--color-accent);
  background: var(--color-bg-muted);
  padding: var(--space-md) var(--space-lg);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: var(--space-lg) 0;
  font-family: var(--font-body);
  font-size: var(--text-meta);
  line-height: var(--leading-body);
  color: var(--color-text-secondary);
}
.callout--info { border-left-color: var(--teal-400); }
.callout--warning { border-left-color: var(--cat-gold); }
.callout--tip { border-left-color: var(--cat-sage); }

/* ══ PROSE (blog post body) ══ */
.prose {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-text-secondary);
}
.prose p {
  margin-bottom: var(--space-lg);
}
.prose h2 {
  font-family: var(--font-body);
  font-size: var(--text-h3);
  font-weight: var(--weight-semi);
  color: var(--color-text-primary);
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-md);
  letter-spacing: var(--tracking-tight);
}
.prose h3 {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-semi);
  color: var(--color-text-primary);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
}
.prose ul, .prose ol {
  margin-bottom: var(--space-lg);
  padding-left: var(--space-lg);
}
.prose li {
  margin-bottom: var(--space-xs);
}
.prose code {
  font-family: var(--font-meta);
  font-size: var(--text-meta);
  background: var(--color-bg-muted);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}
.prose pre {
  background: var(--dark-bg);
  color: var(--viz-text-primary);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin-bottom: var(--space-lg);
}
.prose pre code {
  background: none;
  padding: 0;
  font-size: var(--text-small);
}
.prose blockquote {
  border-left: 3px solid var(--color-accent);
  padding-left: var(--space-lg);
  color: var(--color-text-muted);
  font-style: italic;
  margin: var(--space-xl) 0;
}
.prose a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.prose a:hover {
  color: var(--color-link-hover);
}
.prose img {
  border-radius: var(--radius-md);
  margin: var(--space-lg) 0;
}
.prose hr {
  margin: var(--space-2xl) 0;
}

/* ══ BLOG CARD ══ */
.blog-card:hover {
  background: var(--color-hover-subtle);
}
@media (max-width: 480px) {
  .blog-card {
    flex-direction: column !important;
  }
  .blog-card img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 2 / 1;
  }
}

/* ══ HR ══ */
hr {
  border: none;
  height: 1px;
  background-color: var(--color-border);
  margin: var(--space-xl) 0;
}

/* ══ REVEAL ANIMATIONS ══ */
.reveal {
  opacity: 0;
  transform: translate3d(0, var(--reveal-distance), 0);
  transition: opacity var(--duration-reveal) var(--ease-out),
              transform var(--duration-reveal) var(--ease-out);
  will-change: opacity, transform;
}
.reveal.vis { opacity: 1; transform: translate3d(0, 0, 0); }

.stagger > * {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  will-change: opacity, transform;
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}
.stagger.vis > * { opacity: 1; transform: translate3d(0, 0, 0); }
.stagger.vis > *:nth-child(1) { transition-delay: 0ms; }
.stagger.vis > *:nth-child(2) { transition-delay: calc(var(--reveal-stagger) * 1); }
.stagger.vis > *:nth-child(3) { transition-delay: calc(var(--reveal-stagger) * 2); }
.stagger.vis > *:nth-child(4) { transition-delay: calc(var(--reveal-stagger) * 3); }
.stagger.vis > *:nth-child(5) { transition-delay: calc(var(--reveal-stagger) * 4); }
.stagger.vis > *:nth-child(6) { transition-delay: calc(var(--reveal-stagger) * 5); }

/* ══ CSS SCROLL-DRIVEN ANIMATIONS (progressive enhancement) ══ */
@supports (animation-timeline: view()) {
  .scroll-reveal {
    animation: scrollFadeUp linear both;
    animation-timeline: view();
    animation-range: entry 10% entry 60%;
  }
  .scroll-reveal-slow {
    animation: scrollFadeUp linear both;
    animation-timeline: view();
    animation-range: entry 5% entry 40%;
  }
  .scroll-scale {
    animation: scrollScaleIn linear both;
    animation-timeline: view();
    animation-range: entry 10% entry 50%;
  }
  @keyframes scrollFadeUp {
    from { opacity: 0; transform: translate3d(0, 30px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
  }
  @keyframes scrollScaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
  }
}

/* ══ ACCESSIBILITY ══ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .stagger > * { opacity: 1; transform: none; }
}
/* No-JS fallback — content visible without JavaScript */
.no-js .reveal,
.no-js .stagger > * { opacity: 1; transform: none; }

:focus-visible {
  outline: 2px solid var(--teal-400);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.nav-toggle:focus-visible { outline-offset: 4px; }
a:focus-visible { outline-offset: 3px; }