/* AG064.eu - Page-Specific Styles */

/* ===== Hero Section (Homepage) ===== */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding-top: 96px; /* navbar height (52 logo + 22 padding * 2) */
}

.hero-bg {
  position: absolute;
  inset: 0;
  /* Radial tint at top + transparent bottom so the body grid shows through,
     keeping hero and Shipped visually consistent (no grid-on/grid-off line).
     Uses --hero-bg token so the radial gradient adapts to the active theme
     (dark navy glow in dark mode, soft cream in light mode). */
  background: var(--hero-bg);
  z-index: -2;
}

/* Hero grid - hidden. The previous grid pattern added visual clutter to
   the hero without helping comprehension. Kept as a no-op in case a
   future redesign wants to reintroduce it deliberately. */
.hero-grid {
  display: none;
}

.hero-orb-1 {
  width: 600px;
  height: 600px;
  top: -200px;
  right: -200px;
}

.hero-orb-2 {
  /* Kept fully inside the hero box so overflow:hidden never clips it into a hard line.
     350px circle, anchored near the bottom-left with 30px margin. */
  width: 350px;
  height: 350px;
  bottom: 30px;
  left: -60px;
}

.hero-content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  padding: var(--space-2xl) 0;
  position: relative;
  z-index: 1;
}

.hero-greeting {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--silver-400);
  margin-bottom: var(--space-lg);
}

.hero-greeting-hi {
  color: var(--accent-text);
}

.hero-title {
  font-size: clamp(3rem, 8vw, 5.5rem);
  font-weight: 700;
  margin-bottom: var(--space-md);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.hero-subtitle {
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  color: var(--silver-300);
  margin-bottom: var(--space-xl);
  font-weight: 400;
  min-height: 2em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.hero-roles {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.hero-roles-text {
  display: inline-block;
  background: var(--gradient-silver);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-roles-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--accent-red);
  margin-left: 2px;
  animation: cursor-blink 1s steps(2) infinite;
  vertical-align: middle;
  /* Hide the literal "|" text character so only the red bar shows */
  overflow: hidden;
  color: transparent;
  font-size: 0;
  line-height: 0;
}

@keyframes cursor-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.hero-description {
  font-size: 1.1rem;
  color: var(--silver-400);
  max-width: 600px;
  margin: 0 auto var(--space-2xl);
  line-height: 1.7;
}

.hero-description a {
  color: var(--silver-100);
  text-decoration: none;
  border-bottom: 1px dashed var(--border-light);
  transition: color var(--transition-base), border-color var(--transition-base);
}

.hero-description a:hover {
  color: var(--accent-text);
  border-bottom-color: var(--accent-red);
}

.hero-buttons {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  justify-items: center;
  gap: var(--space-md);
  max-width: 540px;
  margin: var(--space-3xl) auto 0;
}

.hero-stat-skeleton {
  height: 64px;
  width: 100%;
  max-width: 140px;
  border-radius: var(--border-radius-md);
  opacity: 0.3;
}

.hero-scroll {
  /* Lives inside .hero-content now, in the natural document flow AFTER
     the stats row. Previously this was position:absolute at the bottom
     of the hero, but once the hero text grew tall enough the stats row
     ended up at the same vertical position as the scroll, overlapping.
     Flow layout guarantees the scroll always sits below the stats. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: var(--space-2xl) auto 0;
  padding: var(--space-sm) 0;
  color: var(--silver-400);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  text-decoration: none;
  transition: color var(--transition-base);
  width: max-content;
}

.hero-scroll:hover {
  color: var(--silver-100);
}

.hero-scroll-icon {
  width: 18px;
  height: 18px;
  display: block;
  animation: scroll-bounce 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.hero-scroll > span {
  display: block;
  animation: scroll-label 1.4s ease-in-out infinite;
}

.hero-scroll-icon path {
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

@keyframes scroll-bounce {
  0%   { transform: translateY(-4px); opacity: 0; }
  20%  { transform: translateY(0);    opacity: 1; }
  60%  { transform: translateY(8px);  opacity: 1; }
  100% { transform: translateY(14px); opacity: 0; }
}

@keyframes scroll-label {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

@media (max-width: 768px) {
  .hero {
    padding-top: 100px;
  }

  .hero-stats {
    grid-template-columns: 1fr;
    gap: var(--space-md);
    max-width: 280px;
  }

  .hero-stat-value {
    font-size: 1.5rem;
  }

  .hero-scroll {
    /* Keep visible on mobile so visitors still get a clear cue to scroll.
       The chevron + label are small and centered, so they don't crowd
       the layout on narrow screens. */
    margin-top: var(--space-xl);
    font-size: 0.65rem;
  }
}

/* ===== Now Section ===== */
.now-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--space-3xl);
  align-items: start;
}

.now-header h2 {
  margin: var(--space-sm) 0 var(--space-md);
}

.now-header p {
  margin: 0;
  max-width: 320px;
}

.now-pulse {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--accent-red);
  border-radius: 50%;
  margin-right: var(--space-sm);
  position: relative;
  top: -1px;
  box-shadow: 0 0 0 0 var(--accent-red-glow);
  animation: now-pulse 2s ease-in-out infinite;
}

@keyframes now-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-red-glow); }
  50% { box-shadow: 0 0 0 8px transparent; }
}

.now-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.now-item {
  display: block;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-md);
  transition: border-color var(--transition-base), transform var(--transition-base);
}

.now-item:hover {
  border-color: var(--border-glow);
  transform: translateX(4px);
}

.now-bullet {
  width: 8px;
  height: 8px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--silver-400);
}

.now-bullet--red {
  background: var(--accent-red);
  box-shadow: 0 0 10px var(--accent-red-glow);
}

.now-title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.now-title a {
  color: var(--silver-100);
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition: border-color var(--transition-base), color var(--transition-base);
}

.now-title a:hover {
  color: var(--accent-text);
  border-bottom-color: var(--accent-red);
}

.now-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 2px 8px;
  border: 1px solid var(--border-glow);
  border-radius: 100px;
  color: var(--accent-text);
  background: var(--accent-red-subtle);
}

.now-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-red);
  box-shadow: 0 0 8px var(--accent-red-glow);
  animation: now-pulse 1.5s ease-in-out infinite;
}

.now-tba {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 2px 8px;
  border: 1px solid var(--silver-600);
  border-radius: 100px;
  color: var(--silver-300);
  background: transparent;
}

.now-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--silver-100);
  margin-bottom: 4px;
}

.now-meta {
  font-size: 0.9rem;
  color: var(--silver-400);
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .now-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}

/* ===== Connect Menu (homepage) ===== */
.connect-menu {
  display: flex;
  flex-direction: column;
  max-width: 640px;
  margin: 0 auto;
  border-top: 1px solid var(--border);
}

.connect-menu-item {
  display: grid;
  grid-template-columns: 24px 1fr auto 18px;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--silver-200);
  transition: padding-left var(--transition-base), color var(--transition-base);
  position: relative;
}

.connect-menu-item:hover {
  padding-left: var(--space-sm);
  color: var(--silver-100);
}

.connect-menu-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--silver-400);
  transition: color var(--transition-base);
}

.connect-menu-icon svg {
  width: 18px;
  height: 18px;
}

.connect-menu-item:hover .connect-menu-icon {
  color: var(--accent-text);
}

.connect-menu-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.connect-menu-label {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--silver-100);
  line-height: 1.2;
  letter-spacing: -0.005em;
}

.connect-menu-handle {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--silver-500);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.connect-menu-note {
  font-size: 0.85rem;
  color: var(--silver-400);
  text-align: right;
  font-style: italic;
}

.connect-menu-arrow {
  color: var(--silver-500);
  font-size: 0.9rem;
  line-height: 1;
  transition: color var(--transition-base), transform var(--transition-base);
  text-align: right;
}

.connect-menu-item:hover .connect-menu-arrow {
  color: var(--accent-text);
  transform: translate(2px, -2px);
}

.connect-footer-note {
  text-align: center;
  margin-top: var(--space-xl);
  font-size: 0.9rem;
  color: var(--silver-400);
}

.connect-footer-note a {
  color: var(--silver-200);
  border-bottom: 1px dashed var(--border-light);
  text-decoration: none;
  transition: color var(--transition-base), border-color var(--transition-base);
}

.connect-footer-note a:hover {
  color: var(--accent-text);
  border-bottom-color: var(--accent-red);
}

@media (max-width: 640px) {
  .connect-menu-item {
    grid-template-columns: 20px 1fr 16px;
    gap: var(--space-sm);
    padding: var(--space-md) 0;
  }
  .connect-menu-note {
    display: none;
  }
  .connect-menu-icon svg {
    width: 16px;
    height: 16px;
  }
}

/* Footer compact variant. Lives in the footer of every page with the
   same contact items but a horizontal layout and no handles/notes so
   the footer stays short. */
.connect-menu--footer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  max-width: none;
  margin: 0;
  border-top: none;
  padding: 0;
}
.connect-menu--footer .connect-menu-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--border);
  border-radius: 100px;
  color: var(--silver-400);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-decoration: none;
  background: transparent;
  transition: color var(--transition-base), border-color var(--transition-base);
}
.connect-menu--footer .connect-menu-item:hover {
  color: var(--silver-100);
  border-color: var(--silver-400);
  padding-left: var(--space-sm);
}
.connect-menu--footer .connect-menu-icon {
  width: 14px;
  height: 14px;
}
.connect-menu--footer .connect-menu-icon svg {
  width: 14px;
  height: 14px;
}
.connect-menu--footer .connect-menu-main {
  flex-direction: row;
  gap: 0;
}
.connect-menu--footer .connect-menu-label {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: inherit;
}
.connect-menu--footer .connect-menu-arrow {
  display: none;
}
@media (max-width: 640px) {
  .connect-menu--footer {
    gap: var(--space-xs);
  }
  .connect-menu--footer .connect-menu-item {
    padding: 4px var(--space-sm);
    font-size: 0.75rem;
  }
}

/* ===== About Page ===== */
.about-intro {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--space-3xl);
  align-items: start;
}

.about-avatar-wrapper {
  position: relative;
  display: inline-block;
}

.about-avatar {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--border-radius-xl);
  background: var(--gradient-card);
  border: 2px solid var(--border);
  display: block;
  position: relative;
  overflow: hidden;
  object-fit: cover;
  z-index: 1;
}

.about-avatar-frame {
  position: absolute;
  inset: 0;
  border-radius: var(--border-radius-xl);
  border: 2px solid var(--accent-red);
  z-index: 2;
  pointer-events: none;
  opacity: 0.55;
  transition: opacity var(--transition-base);
}

.about-avatar-wrapper:hover .about-avatar-frame {
  opacity: 1;
}

.about-avatar-letter {
  position: relative;
  z-index: 1;
}

.about-avatar-decor {
  display: none;
}

.about-content h1,
.about-content .about-name {
  margin-bottom: var(--space-lg);
}

.about-lead {
  font-size: 1.25rem;
  color: var(--silver-200);
  margin-bottom: var(--space-xl);
  line-height: 1.7;
}

.about-bio {
  font-size: 1rem;
  color: var(--silver-300);
  line-height: 1.8;
  margin-bottom: var(--space-xl);
}

.about-bio p {
  margin-bottom: var(--space-lg);
}

.about-bio p:last-child {
  margin-bottom: 0;
}

.about-resilience {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-red);
  border-radius: var(--border-radius-md);
  padding: var(--space-xl);
  margin: var(--space-xl) 0;
}

.about-resilience-title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--accent-text);
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.about-resilience-text {
  color: var(--silver-300);
  line-height: 1.8;
}

@media (max-width: 768px) {
  .about-intro {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  .about-avatar-wrapper {
    max-width: 250px;
    margin: 0 auto;
  }
}

/* Skills Section */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-xl);
}

.skill-category {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-lg);
  padding: var(--space-xl);
  transition: border-color var(--transition-base);
}

.skill-category:hover {
  border-color: var(--border-glow);
}

.skill-category-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--silver-100);
  margin-bottom: var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.skill-category-icon {
  color: var(--accent-text);
  display: inline-flex;
}

.skill-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* Timeline */
.timeline {
  position: relative;
  padding-left: var(--space-2xl);
}

.timeline::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--accent-red), var(--border));
}

.timeline-item {
  position: relative;
  padding-bottom: var(--space-xl);
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-marker {
  position: absolute;
  left: calc(-1 * var(--space-2xl) + 2px);
  top: 4px;
  width: 10px;
  height: 10px;
  background: var(--accent-red);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--accent-red-glow);
}

.timeline-date {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--accent-text);
  margin-bottom: var(--space-xs);
}

.timeline-title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--silver-100);
  margin-bottom: var(--space-xs);
}

.timeline-description {
  font-size: 0.9rem;
  color: var(--silver-400);
  line-height: 1.6;
}

/* ===== Projects Page ===== */
.projects-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-2xl);
  justify-content: center;
}

.filter-btn {
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 500;
  padding: var(--space-sm) var(--space-lg);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 100px;
  color: var(--silver-300);
  cursor: pointer;
  transition: color var(--transition-base), border-color var(--transition-base);
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}

.filter-btn:hover {
  border-color: var(--silver-400);
  color: var(--silver-100);
}

.filter-btn.active {
  background: var(--accent-red);
  border-color: var(--accent-red);
  color: var(--silver-100);
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--space-xl);
}

@media (max-width: 480px) {
  .projects-grid {
    grid-template-columns: 1fr;
  }
}

/* Visually hidden but accessible to screen readers */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Project filter UI: search box, tag chips, count line. */
.projects-filter {
  margin-bottom: var(--space-2xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--border);
}

.projects-filter-search {
  position: relative;
  margin-bottom: var(--space-lg);
}

.projects-filter-search-icon {
  position: absolute;
  left: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  color: var(--silver-400);
  pointer-events: none;
}

.projects-filter-input {
  width: 100%;
  padding: var(--space-md) var(--space-md) var(--space-md) calc(var(--space-md) * 2 + 16px);
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  color: var(--silver-100);
  font-family: inherit;
  font-size: 0.95rem;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.projects-filter-input::placeholder {
  color: var(--silver-400);
}

.projects-filter-input:focus {
  outline: none;
  border-color: var(--accent-red);
  box-shadow: 0 0 0 3px var(--accent-red-glow);
}

.projects-filter-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.projects-filter-tags-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--silver-400);
  margin-right: var(--space-sm);
  font-weight: 600;
}

.filter-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--silver-200);
  font-family: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  transition: color var(--transition-base), border-color var(--transition-base), background-color var(--transition-base);
}

.filter-tag:hover {
  border-color: var(--border-glow);
  color: var(--silver-100);
}

.filter-tag.active {
  background: var(--accent-red);
  border-color: var(--accent-red);
  color: var(--silver-100);
  box-shadow: 0 0 12px var(--accent-red-glow);
}

.filter-tag:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent-red-glow);
}

.filter-clear {
  margin-left: auto;
  padding: 4px 12px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--silver-300);
  font-family: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  transition: color var(--transition-base), border-color var(--transition-base);
}

.filter-clear:hover {
  color: var(--accent-text);
  border-color: var(--accent-red);
}

.filter-clear:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent-red-glow);
}

.projects-filter-meta {
  font-size: 0.85rem;
  color: var(--silver-400);
  margin: 0;
}

.projects-filter-meta [data-count],
.projects-filter-meta [data-total] {
  color: var(--silver-100);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.projects-no-results {
  margin-top: var(--space-md);
  padding: var(--space-lg);
  background: var(--bg-tertiary);
  border: 1px dashed var(--border);
  border-radius: var(--border-radius);
  color: var(--silver-300);
  text-align: center;
  font-size: 0.9rem;
}

.project-card--hidden {
  display: none !important;
}

@media (max-width: 600px) {
  .projects-filter-tags-label {
    width: 100%;
    margin-bottom: var(--space-xs);
  }
  .filter-clear {
    margin-left: 0;
  }
}

.project-card {
  background: var(--gradient-card);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-lg);
  /* Padding moved to inner sections because the cover is full-bleed on top. */
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Off-screen cards skip rendering until they approach the viewport.
     contain-intrinsic-size tells the browser the card's approximate
     height so the scrollbar stays stable. Chrome 85+. */
  content-visibility: auto;
  contain-intrinsic-size: 0 380px;
  /* Only transition the properties that actually change on hover.
     `transition: all` was the single biggest contributor to scroll
     jank because it queued the browser to animate every property,
     including box-shadow (GPU-hostile). */
  transition:
    border-color var(--transition-base),
    transform var(--transition-base);
}

.project-card:hover {
  border-color: var(--border-glow);
  transform: translateY(-4px);
  /* will-change only on hover so the GPU layer is allocated per
     active card, not for every card on the page. */
  will-change: transform;
}

/* Project card cover: top of card shows a 16:10 preview. If the project
   has a real screenshot (images/projects/<slug>.png), it renders as an
   <img>. Otherwise a tasteful CSS gradient placeholder using the
   project's language accent color. */
.project-card-cover {
  position: relative;
  aspect-ratio: 16 / 10;
  width: 100%;
  background:
    linear-gradient(135deg, var(--cover-accent, var(--silver-400)) 0%, transparent 75%),
    var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}

.project-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* The hover scale uses transform on a child of the card, which
     already gets its own GPU layer on :hover via will-change on the
     parent. No always-on transition needed here, but the transition
     remains so the scale animates in/out instead of snapping. */
  transition: transform 400ms ease;
}

.project-card:hover .project-card-cover img {
  transform: scale(1.03);
}

.project-card-cover-name {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--silver-100);
  opacity: 0.35;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  pointer-events: none;
  user-select: none;
}

/* Inner padding now lives on every text element inside the card, so the
   cover image does not visually crowd the text. The actual rendered
   card uses these class names (not .project-card-body / -meta), so
   each text element gets explicit horizontal padding plus a small
   vertical gap to its neighbour. */
.project-card-header,
.project-card-body,
.project-card-meta,
.project-title,
.project-description,
.project-meta {
  padding-left: var(--space-2xl);
  padding-right: var(--space-2xl);
}
.project-card-header { padding-top: var(--space-xl); padding-bottom: var(--space-sm); }
.project-title      { padding-top: var(--space-xs);  padding-bottom: var(--space-xs); }
.project-description { padding-top: 0; padding-bottom: var(--space-md); }
.project-meta       { padding-top: var(--space-sm);  padding-bottom: var(--space-xl); }

.project-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-md);
}

.project-icon {
  width: 40px;
  height: 40px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--silver-300);
}

.project-stats {
  display: flex;
  gap: var(--space-md);
}

.project-stat {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.8rem;
  color: var(--silver-400);
}

.project-stat svg {
  width: 14px;
  height: 14px;
}

.project-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--silver-100);
  margin-bottom: var(--space-sm);
}

.project-title a {
  color: inherit;
  text-decoration: none;
}

.project-title a:hover {
  color: var(--accent-text);
}

.project-description {
  font-size: 0.9rem;
  color: var(--silver-400);
  line-height: 1.6;
  margin-bottom: var(--space-lg);
  flex-grow: 1;
}

.project-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}

.project-language {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.8rem;
  color: var(--silver-300);
}

.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-left: auto;
}

.project-tag {
  font-size: 0.75rem;
  padding: 4px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 100px;
  color: var(--silver-400);
  line-height: 1.4;
}

.project-links {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.project-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.85rem;
  color: var(--silver-300);
  text-decoration: none;
  padding: var(--space-sm) var(--space-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-sm);
  transition: color var(--transition-base), border-color var(--transition-base), background-color var(--transition-base);
}

.project-link:hover {
  border-color: var(--accent-red);
  color: var(--accent-text);
}

.project-link svg {
  width: 14px;
  height: 14px;
}

/* Project Loading State */
.project-card-skeleton {
  background: var(--gradient-card);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-lg);
  padding: var(--space-xl);
}

.skeleton-line {
  height: 16px;
  margin-bottom: var(--space-md);
  border-radius: var(--border-radius-sm);
}

.skeleton-line.short { width: 40%; }
.skeleton-line.medium { width: 70%; }
.skeleton-line.full { width: 100%; }

.skeleton-line.title {
  height: 24px;
  width: 60%;
  margin-bottom: var(--space-lg);
}

/* Projects Error State */
.projects-error {
  text-align: center;
  padding: var(--space-3xl);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-lg);
}

.projects-error-icon {
  font-size: 3rem;
  margin-bottom: var(--space-lg);
  color: var(--silver-400);
}

.projects-error-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--silver-100);
  margin-bottom: var(--space-sm);
}

.projects-error-text {
  color: var(--silver-400);
  margin-bottom: var(--space-xl);
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

/* ===== Contact Page ===== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
}

@media (max-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

.contact-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-lg);
  padding: var(--space-2xl);
}

.contact-form-title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--silver-100);
  margin-bottom: var(--space-sm);
}

.contact-form-note {
  font-size: 0.85rem;
  color: var(--silver-400);
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border);
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.contact-info-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-lg);
  padding: var(--space-xl);
}

.contact-info-title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--silver-100);
  margin-bottom: var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.contact-info-icon {
  color: var(--accent-text);
  display: inline-flex;
}

.contact-info-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--border);
  color: var(--silver-300);
}

.contact-info-item:last-child {
  border-bottom: none;
}

.contact-info-item svg {
  width: 18px;
  height: 18px;
  color: var(--silver-400);
  flex-shrink: 0;
}

.contact-info-item a {
  color: var(--silver-300);
  text-decoration: none;
  transition: color var(--transition-base);
  word-break: break-all;
}

.contact-info-item a:hover {
  color: var(--accent-text);
}

.contact-socials {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-md);
  flex-wrap: wrap;
}

.availability-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 100px;
  font-size: 0.85rem;
  color: #22c55e;
}

.availability-dot {
  width: 8px;
  height: 8px;
  background: #22c55e;
  border-radius: 50%;
  animation: pulse-glow 2s ease-in-out infinite;
}

/* ===== Page Header ===== */
.page-header {
  padding: calc(80px + var(--space-3xl)) 0 var(--space-3xl);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.page-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 300px;
  background: linear-gradient(to bottom, var(--bg-tertiary), transparent);
  z-index: -1;
}

.page-header-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--accent-text);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: var(--space-md);
}

.page-header-title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  margin-bottom: var(--space-md);
  letter-spacing: -0.02em;
}

.page-header-subtitle {
  font-size: 1.1rem;
  color: var(--silver-400);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ===== Not Found / Error Pages ===== */
.error-page {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-3xl) 0;
}

.error-content {
  max-width: 500px;
}

.error-code {
  font-family: var(--font-heading);
  font-size: clamp(6rem, 18vw, 10rem);
  font-weight: 800;
  line-height: 1;
  margin-bottom: var(--space-lg);
  background: linear-gradient(135deg, var(--silver-100) 0%, var(--accent-red) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.05em;
}

.error-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: var(--space-md);
}

.error-description {
  color: var(--silver-400);
  margin-bottom: var(--space-xl);
  line-height: 1.6;
}

/* ----- 404 page extended: actions, quick links, help ----- */
.error-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--accent-text);
  margin-bottom: var(--space-md);
  padding: 4px 12px;
  border: 1px solid var(--border-glow);
  border-radius: 100px;
  background: var(--accent-red-subtle);
}

.error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: center;
  margin-bottom: var(--space-3xl);
}

.error-quicklinks-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--silver-400);
  margin-bottom: var(--space-lg);
  font-weight: 500;
}

.error-quicklinks-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-3xl);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  text-align: left;
}

.error-quicklinks-item {
  margin: 0;
}

.error-quicklinks-link {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--border-radius-md);
  color: var(--silver-100);
  text-decoration: none;
  transition: border-color var(--transition-base), transform var(--transition-base), background var(--transition-base);
  will-change: auto;
}

.error-quicklinks-link:hover {
  border-color: var(--accent-red);
  transform: translateY(-1px);
  background: var(--surface-elevated);
}

.error-quicklinks-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--border-radius-sm);
  background: var(--accent-red-subtle);
  color: var(--accent-text);
  flex-shrink: 0;
}

.error-quicklinks-icon svg {
  width: 18px;
  height: 18px;
}

.error-quicklinks-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.error-quicklinks-name {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.2;
}

.error-quicklinks-desc {
  font-size: 0.8rem;
  color: var(--silver-400);
  line-height: 1.4;
}

.error-quicklinks-arrow {
  color: var(--silver-400);
  font-size: 1.25rem;
  transition: color var(--transition-base), transform var(--transition-base);
}

.error-quicklinks-link:hover .error-quicklinks-arrow {
  color: var(--accent-text);
  transform: translateX(2px);
}

.error-help {
  max-width: 480px;
  margin: 0 auto;
  padding-top: var(--space-xl);
  border-top: 1px solid var(--border-subtle);
  text-align: center;
}

.error-help-title {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.error-help-body {
  font-size: 0.85rem;
  color: var(--silver-400);
  line-height: 1.6;
  margin-bottom: var(--space-md);
}

.error-help-cta {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--accent-text);
  text-decoration: none;
  border-bottom: 1px solid var(--border-glow);
  padding-bottom: 1px;
  transition: color var(--transition-base), border-color var(--transition-base);
}

.error-help-cta:hover {
  color: var(--text-primary);
  border-bottom-color: var(--text-primary);
}

@media (max-width: 640px) {
  .error-quicklinks-list {
    grid-template-columns: 1fr;
  }
  .error-content {
    max-width: 100%;
  }
}

/* ===== Per-Project Page ===== */

.page-header--project {
  text-align: left;
}
.page-header--project .page-header-eyebrow,
.page-header--project .page-header-title,
.page-header--project .page-header-subtitle {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}
.page-header--project .page-header-subtitle {
  max-width: 60ch;
}
.page-header--project::before {
  /* no radial tint under the per-project page header */
  display: none;
}

.page-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--silver-400);
  text-decoration: none;
  margin-bottom: var(--space-lg);
  transition: color var(--transition-base);
}
.page-back-link:hover {
  color: var(--accent-text);
}

.project-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-md) var(--space-xl);
  margin-bottom: var(--space-md);
}
.project-header .page-header-title {
  margin-bottom: 0;
}
.project-header-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  color: var(--silver-400);
  font-size: 0.9rem;
}

.project-tags--hero {
  margin-top: var(--space-md);
  margin-bottom: var(--space-lg);
  justify-content: flex-start;
}

.project-header-actions {
  margin-top: var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.project-demo {
  padding: var(--space-2xl) 0;
}

.demo-frame {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.demo-frame-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border);
}
.demo-frame-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--silver-600);
}
.demo-frame-dot--red { background: #ff5f57; }
.demo-frame-dot--yellow { background: #febc2e; }
.demo-frame-dot--green { background: #28c840; }
.demo-frame-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-text);
}
.demo-frame-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-red);
  box-shadow: 0 0 8px var(--accent-red-glow);
  animation: now-pulse 1.5s ease-in-out infinite;
}
.demo-frame-url {
  flex: 1;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--silver-400);
  padding: 0 var(--space-md);
}
.demo-frame-open {
  color: var(--silver-500);
  display: inline-flex;
  align-items: center;
  transition: color var(--transition-base);
}
.demo-frame-open:hover {
  color: var(--accent-text);
}
.demo-frame iframe {
  display: block;
  width: 100%;
  height: 720px;
  border: 0;
  background: #fff;
}
.demo-caption {
  text-align: center;
  font-size: 0.85rem;
  color: var(--silver-500);
  margin-top: var(--space-md);
}

.demo-empty {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-lg);
  padding: var(--space-2xl);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}
.demo-empty-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--accent-red-subtle);
  color: var(--accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
}
.demo-empty h3 {
  font-size: 1.25rem;
  margin: 0;
}
.demo-empty p {
  color: var(--silver-400);
  max-width: 56ch;
  margin: 0;
}

.project-lede {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--silver-200);
}

.project-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.project-features li {
  position: relative;
  padding-left: 28px;
  color: var(--silver-300);
  line-height: 1.6;
}
.project-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 14px;
  height: 2px;
  background: var(--accent-red);
}

/* "From the README" auto-fetched excerpt. Slightly muted to signal it
   is auto-sourced, not hand-written. The source link at the bottom is
   the on-page credit. */
.project-readme {
  color: var(--silver-300);
  line-height: 1.7;
}
.project-readme p {
  margin: 0 0 var(--space-md);
}
.project-readme p:last-child {
  margin-bottom: 0;
}
.project-readme h1,
.project-readme h2,
.project-readme h3,
.project-readme h4 {
  color: var(--silver-100);
  font-family: var(--font-heading);
  margin: var(--space-lg) 0 var(--space-sm);
  line-height: 1.3;
}
.project-readme h2 { font-size: 1.25rem; }
.project-readme h3 { font-size: 1.1rem; }
.project-readme h4 { font-size: 1rem; }
.project-readme ul,
.project-readme ol {
  margin: 0 0 var(--space-md);
  padding-left: 1.5rem;
}
.project-readme li {
  margin-bottom: var(--space-xs);
}
.project-readme code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-tertiary);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--silver-100);
}
.project-readme pre {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  padding: var(--space-md);
  overflow-x: auto;
  margin: 0 0 var(--space-md);
}
.project-readme pre code {
  background: transparent;
  padding: 0;
  font-size: 0.85rem;
  color: var(--silver-200);
}
.project-readme blockquote {
  border-left: 3px solid var(--accent-red);
  padding-left: var(--space-md);
  margin: 0 0 var(--space-md);
  color: var(--silver-400);
  font-style: italic;
}
.project-readme a {
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.project-readme a:hover {
  text-decoration-thickness: 2px;
}
.project-readme-source {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px dashed var(--border);
  font-size: 0.85rem;
  color: var(--silver-400);
}
.project-readme-source a {
  color: var(--silver-300);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 0.8rem;
}
.project-readme-source a:hover {
  color: var(--accent-text);
  text-decoration: underline;
}

.section-title-small {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: var(--space-md);
  color: var(--silver-100);
}

.code-block {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  padding: var(--space-md) var(--space-lg);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--silver-200);
}
.code-block code {
  font-family: inherit;
  background: transparent;
  padding: 0;
  color: inherit;
  white-space: pre;
}

.project-pager {
  border-top: 1px solid var(--border);
  padding: var(--space-xl) 0;
  margin-top: var(--space-2xl);
}
.project-pager .container {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
}
.project-pager-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  color: var(--silver-300);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--border-radius);
  transition: color var(--transition-base), background var(--transition-base);
  max-width: 45%;
}
.project-pager-link:hover {
  color: var(--accent-text);
  background: var(--surface);
}
.project-pager-link--next {
  text-align: right;
  margin-left: auto;
}
.project-pager-direction {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--silver-500);
}
.project-pager-name {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: inherit;
}

/* Project card on projects list - make the whole card clickable */
.project-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 100%;
  position: relative;
}
.project-card-link:hover {
  color: inherit;
}
.project-card-link:hover .project-title {
  color: var(--accent-text);
}
.project-card-badge {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border: 1px solid var(--border-glow);
  border-radius: 100px;
  color: var(--accent-text);
  background: var(--accent-red-subtle);
}

/* Live demo tag - same shape as a normal tag, red border + soft red bg + dot */
.project-tag--live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent-text) !important;
  border-color: var(--border-glow) !important;
  background: var(--accent-red-subtle) !important;
}
.project-tag--live .now-live-dot {
  width: 6px;
  height: 6px;
}

@media (max-width: 768px) {
  .project-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }
  .project-pager .container {
    flex-direction: column;
  }
  .project-pager-link {
    max-width: 100%;
  }
  .project-pager-link--next {
    text-align: left;
    align-items: flex-start;
  }
  .demo-frame iframe {
    height: 560px;
  }
}



/* ===== Project hero cover (project detail page) =====
   Full-width image at the top of each project page. Same convention as
   the project card cover: real <img> if images/projects/<slug>.png
   exists, otherwise a tasteful gradient placeholder. */
.project-hero-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  background:
    linear-gradient(135deg, var(--cover-accent, var(--silver-400)) 0%, transparent 70%),
    var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  margin-top: 0;
}
.project-hero-cover img.project-hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.project-hero-cover-name {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  color: var(--silver-100);
  opacity: 0.18;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  pointer-events: none;
  user-select: none;
}

/* ===== Flagship project landing (used by Argentum) =====
   Adds structured sections below the project hero: why I built it,
   what it does, tech stack, roadmap, big CTA. Reads like a real
   product landing, not a GitHub README. */
.flagship-section {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-secondary);
}
.flagship-intro {
  max-width: 760px;
  margin: 0 auto var(--space-4xl);
  text-align: center;
}
.flagship-h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  margin-top: var(--space-sm);
  margin-bottom: var(--space-md);
}
.flagship-h3 {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  margin-top: var(--space-sm);
  margin-bottom: var(--space-md);
}
.flagship-lead {
  font-size: 1.125rem;
  color: var(--silver-300);
  line-height: 1.7;
}

.flagship-split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-3xl);
  align-items: start;
  margin-bottom: var(--space-4xl);
}
@media (max-width: 900px) {
  .flagship-split {
    grid-template-columns: 1fr;
  }
}
.flagship-split-text p {
  font-size: 1.05rem;
  color: var(--silver-300);
  line-height: 1.7;
}

.flagship-stack-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-lg);
  padding: var(--space-xl);
  position: relative;
  overflow: hidden;
}
.flagship-stack-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cover-accent, var(--silver-400)), transparent);
  opacity: 0.4;
}
.flagship-stack-note {
  font-size: 0.95rem;
  margin: var(--space-sm) 0 var(--space-md);
}
.flagship-stack-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.flagship-stack-chip {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  padding: 6px 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 100px;
  color: var(--silver-200);
}

.flagship-roadmap {
  margin-bottom: var(--space-4xl);
}
.flagship-roadmap-list {
  list-style: none;
  padding: 0;
  margin: var(--space-lg) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-md);
  counter-reset: roadmap;
}
.flagship-roadmap-item {
  position: relative;
  padding: var(--space-md) var(--space-md) var(--space-md) var(--space-2xl);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-md);
  counter-increment: roadmap;
}
.flagship-roadmap-item::before {
  content: counter(roadmap);
  position: absolute;
  left: var(--space-md);
  top: var(--space-md);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-faint);
  font-weight: 600;
}
.flagship-roadmap-label {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-xs);
}
.flagship-roadmap-text {
  display: block;
  font-size: 0.95rem;
  color: var(--silver-300);
  line-height: 1.55;
}

.flagship-cta {
  text-align: center;
  padding: var(--space-3xl) var(--space-xl);
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-lg);
  max-width: 720px;
  margin: 0 auto;
}
.flagship-cta .flagship-h3 {
  margin-bottom: var(--space-md);
}
.flagship-cta-actions {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  margin-top: var(--space-xl);
  flex-wrap: wrap;
}




/* ===== Testimonial block (about page) =====
   Renders only when about.testimonialQuote is set in the I18N. Pull-quote
   style, with attribution below. The page is calm and quiet; this is
   the one place that gets to be slightly more typographic. */
.testimonial {
  margin: 0 auto;
  text-align: center;
  max-width: 720px;
}
.testimonial-quote {
  margin: 0 0 var(--space-lg);
  padding: 0;
  border: 0;
}
.testimonial-quote p {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-primary);
  font-style: italic;
  margin: 0;
}
.testimonial-quote p::before {
  content: '\201C';
  display: block;
  font-size: 3rem;
  line-height: 0.5;
  color: var(--text-faint);
  margin-bottom: var(--space-md);
}
.testimonial-cite {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-style: normal;
}
.testimonial-name {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.testimonial-role {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-faint);
}




/* ===== Writing list (home page, conditional on having posts) =====
   Two-column grid of date + title + excerpt. Quiet typography, the
   goal is "I write sometimes" not "look at my blog". */
.writing-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-md);
  max-width: 920px;
  margin: 0 auto;
}
.writing-item {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: var(--space-xs);
  padding: var(--space-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-md);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition-base), background-color var(--transition-base);
}
.writing-item:hover {
  border-color: var(--border-default);
  transform: translateY(-2px);
  color: inherit;
}
.writing-date {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.writing-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}
.writing-excerpt {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin-top: var(--space-xs);
}

/* ===== Blog Index ===== */
.blog-list-section {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-3xl);
}

.blog-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.blog-card {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  transition: border-color var(--transition-base), transform var(--transition-base);
  will-change: auto;
}

.blog-card:hover {
  border-color: var(--accent-red);
  transform: translateY(-2px);
}

.blog-card-link {
  display: block;
  padding: var(--space-xl);
  text-decoration: none;
  color: inherit;
}

.blog-card-link:focus-visible {
  outline: 2px solid var(--accent-red);
  outline-offset: -2px;
  border-radius: var(--border-radius-lg);
}

.blog-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
}

.blog-card-date {
  font-variant-numeric: tabular-nums;
}

.blog-card-reading {
  color: var(--text-faint);
}

.blog-card-title {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--space-sm);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.blog-card-desc {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 var(--space-md);
}

.blog-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 var(--space-md);
}

.blog-card-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: lowercase;
  color: var(--silver-400);
  padding: 2px 10px;
  border: 1px solid var(--border-default);
  border-radius: 100px;
  background: var(--bg-elevated);
}

.blog-card-cta {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--accent-text);
  margin-top: var(--space-xs);
}

.blog-empty {
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
  padding: var(--space-3xl) 0;
}

/* ===== Blog Post (long-form typography) =====
   The .blog-post-body styles target the HTML emitted by
   src/blog/markdown.ts. The selector is the article body
   wrapper so the styles only apply inside a post, not to
   the page header or the back/forward nav. */
.blog-post-header {
  padding: var(--space-3xl) 0 var(--space-xl);
  border-bottom: 1px solid var(--border-subtle);
}

.blog-post-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-md);
}

.blog-post-eyebrow a {
  color: var(--accent-text);
  text-decoration: none;
}

.blog-post-eyebrow a:hover {
  text-decoration: underline;
}

.blog-post-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0 0 var(--space-md);
  max-width: 28ch;
}

.blog-post-meta {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-faint);
  margin: 0 0 var(--space-md);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.blog-post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}

.blog-post-section {
  padding: var(--space-3xl) 0;
}

.blog-post-body {
  /* The body width is set by .container-narrow in main.css.
     This block adds typographic polish on top. */
  font-size: 1.1rem;
  line-height: 1.75;
  color: var(--text-primary);
}

.blog-post-body > * + * {
  margin-top: var(--space-md);
}

.blog-post-body h2 {
  font-family: var(--font-heading);
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin-top: var(--space-2xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-subtle);
}

.blog-post-body h2:first-child {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

.blog-post-body h3 {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-primary);
  margin-top: var(--space-xl);
}

.blog-post-body p {
  color: var(--text-secondary);
}

.blog-post-body strong {
  color: var(--text-primary);
  font-weight: 600;
}

.blog-post-body em {
  font-style: italic;
  color: var(--text-primary);
}

.blog-post-body a {
  color: var(--accent-text);
  text-decoration: none;
  border-bottom: 1px solid var(--border-glow);
  transition: border-color var(--transition-base);
}

.blog-post-body a:hover {
  border-bottom-color: var(--accent-red);
}

.blog-post-body code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-elevated);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
}

.blog-post-body pre {
  background: var(--c-ink-900);
  border: 1px solid var(--border-default);
  border-radius: var(--border-radius-md);
  padding: var(--space-lg);
  overflow-x: auto;
  font-size: 0.9rem;
  line-height: 1.6;
  margin: var(--space-lg) 0;
}

.blog-post-body pre code {
  background: transparent;
  border: 0;
  padding: 0;
  font-size: inherit;
  color: var(--c-ink-050);
}

.blog-post-body pre code.language-typescript::before,
.blog-post-body pre code.language-ts::before,
.blog-post-body pre code.language-javascript::before,
.blog-post-body pre code.language-js::before {
  /* tiny syntax-coloring hint: keywords in red, comments in faint.
     The framework's own run-time does not tokenize code; this is
     just enough to make snippets scan-readable on dark backgrounds. */
  content: '';
}

.blog-post-body ul,
.blog-post-body ol {
  padding-left: var(--space-lg);
  color: var(--text-secondary);
}

.blog-post-body ul li,
.blog-post-body ol li {
  margin-bottom: var(--space-xs);
}

.blog-post-body ul li::marker {
  color: var(--accent-text);
}

.blog-post-body blockquote {
  margin: var(--space-lg) 0;
  padding: var(--space-md) var(--space-lg);
  border-left: 3px solid var(--accent-red);
  background: var(--bg-elevated);
  border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
  color: var(--text-muted);
  font-style: italic;
}

.blog-post-body blockquote p {
  margin: 0;
}

.blog-post-body hr {
  border: 0;
  height: 1px;
  background: var(--border-subtle);
  margin: var(--space-2xl) auto;
  width: 60%;
}

.blog-post-footer-section {
  padding: var(--space-xl) 0 var(--space-3xl);
  border-top: 1px solid var(--border-subtle);
}

.blog-post-footer-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: center;
}

@media (max-width: 640px) {
  .blog-post-title {
    font-size: 2rem;
  }
  .blog-post-body {
    font-size: 1rem;
  }
  .blog-post-meta {
    flex-direction: column;
    gap: 0;
  }
}