/* Animatable custom properties for border rotation */
@property --border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@property --trail-size {
  syntax: '<angle>';
  initial-value: 100deg;
  inherits: false;
}

@property --fill-opacity {
  syntax: '<number>';
  initial-value: 0;
  inherits: false;
}

/* Page-specific body styles */
body {
  width: 100vw;
  height: 100vh;
  background-color: var(--bg-primary);
  color: var(--text-secondary);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fullscreen {
  width: 100%;
  height: 100%;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: clamp(0.25rem, 0.8vw, 0.65rem);
}

/* --- Cards General --- */
.card {
  background: var(--bg-card);
  border-radius: var(--radius-inner);
  overflow: hidden;
  position: relative;
  opacity: 0;
  border: 1px solid var(--border-default);
  transition: 
    border-color var(--transition-medium),
    box-shadow var(--transition-medium),
    transform var(--transition-medium);
}

.card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--glow-white);
}

/* Card glow effect on hover - processor style */
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0) 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;
  opacity: 0;
  transition: opacity var(--transition-medium);
  pointer-events: none;
}

.card:hover::before {
  opacity: 1;
}

/* Rotating border animation on hover */
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  --border-angle: 0deg;
  --trail-size: 100deg;
  --fill-opacity: 0;
  background: conic-gradient(
    from var(--border-angle),
    rgba(255, 255, 255, var(--fill-opacity)) 0deg,
    rgba(255, 255, 255, var(--fill-opacity)) calc(360deg - var(--trail-size)),
    rgba(255, 255, 255, calc(0.1 + var(--fill-opacity) * 0.9)) calc(360deg - var(--trail-size) + 30deg),
    rgba(255, 255, 255, calc(0.4 + var(--fill-opacity) * 0.6)) calc(360deg - var(--trail-size) + 60deg),
    rgba(255, 255, 255, calc(0.8 + var(--fill-opacity) * 0.2)) calc(360deg - 15deg),
    rgba(255, 255, 255, 1) 355deg,
    rgba(255, 255, 255, 1) 360deg
  );
  -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;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

.card:hover::after {
  opacity: 1;
  animation: rotateBorder 3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes rotateBorder {
  0% {
    --border-angle: 0deg;
    --trail-size: 100deg;
    --fill-opacity: 0;
  }
  80% {
    --border-angle: 360deg;
    --trail-size: 100deg;
    --fill-opacity: 0;
  }
  100% {
    --border-angle: 360deg;
    --trail-size: 360deg;
    --fill-opacity: 1;
  }
}

.card-title-bar { 
  opacity: 0;
  animation: slideFromTop 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0s;
  background: transparent;
  border: none;
}

.card-title-bar:hover {
  border-color: transparent;
  box-shadow: none;
}

.card-title-bar::before,
.card-title-bar::after {
  display: none;
}

/* Column 1 (Left side) - cards come from left */
.card-hero {
  animation: slideFromLeft 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.3s;
}

.card-bio {
  animation: slideFromBottomLeft 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.6s;
}

.card-facts {
  animation: slideFromBottomLeft 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.7s;
}

/* Column 2 (Center) - top from top, bottom from bottom */
.card-portrait {
  animation: slideFromTop 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.5s;
}

.card-contact {
  animation: slideFromBottom 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.8s;
}

.card-socials {
  animation: slideFromLeft 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.45s;
}

/* Column 3 (Right side) - cards come from right */
.card-project-feature {
  animation: slideFromTopRight 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.4s;
}

.card-social {
  animation: slideFromBottomRight 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.5s;
}

/* --- Top Title Bar --- */
.card-title-bar {
  flex: 0 0 auto; 
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  width: 100%;
  min-height: clamp(3.75rem, 12vh, 7.5rem);
  padding: 0;
}

.card-title-bar h1 {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  width: 100%;
  margin: 0;
  font-size: min(12.5rem, calc(100vw / 12.5));
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: -0.045em;
  text-align: center;
  white-space: nowrap;
  color: var(--text-primary);
  background: linear-gradient(to right, var(--text-primary), var(--text-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Two-part name: inline (space-separated) on desktop, stacked on mobile */
.card-title-bar h1 .title-first {
  margin-right: 0.35em;
}

.title-distort span {
  display: inline-block;
  position: relative;
  transition: all 0.1s ease;
  transform-origin: center;
}

.theme-toggle {
  background: transparent;
  border: 1px solid var(--border-default);
  cursor: pointer;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: all var(--transition-medium);
  border-radius: 8px;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.theme-toggle:hover {
  background: var(--bg-surface);
  border-color: var(--border-hover);
  color: var(--text-primary);
  transform: scale(1.05);
}

.theme-toggle:active {
  transform: scale(0.95);
}

.social-links {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 0.75rem;
  flex-shrink: 0;
  width: 100%;
}

.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  border: 1px solid var(--border-default);
  transition: all var(--transition-medium);
  color: var(--text-secondary);
  font-size: 24px;
}

.social-links a:hover {
  background: var(--bg-surface);
  border-color: var(--border-hover);
  color: var(--text-primary);
  transform: translateY(-2px);
  box-shadow: var(--glow-white);
}

.social-links svg,
.social-links i {
  display: block;
}

.contact-cta {
  background: var(--text-primary);
  color: var(--text-inverted);
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all var(--transition-medium);
  white-space: nowrap;
  flex-shrink: 0;
}

.contact-cta:hover {
  background: var(--text-secondary);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(255, 255, 255, 0.15);
}

.contact-cta:active {
  transform: translateY(0);
}

/* --- Main Grid Area --- */
.main-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(10, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  gap: var(--gap-size);
  min-height: 0;
}

/* Card positioning in grid */
.card-hero {
  grid-area: 1 / 1 / 6 / 6;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
  background: linear-gradient(145deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
}

.card-portrait {
  grid-area: 1 / 6 / 6 / 9;
  background-color: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
}

.portrait-image {
  width: 120%;
  height: 120%;
  object-fit: cover;
}

.card-bio {
  grid-area: 6 / 5 / 11 / 9;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  overflow: hidden;
  position: relative;
}

.card-facts {
  grid-area: 6 / 1 / 9 / 5;
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  overflow: hidden;
}

.facts-image-container {
  flex: 0 0 55%;
  background-color: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.facts-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
}

.facts-content {
  flex: 1;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-elevated) 100%);
  color: var(--text-secondary);
}

.facts-text {
  font-size: 1rem;
  line-height: 1.5;
  font-family: system-ui, -apple-system, sans-serif;
  font-weight: 500;
  margin-bottom: auto;
  color: var(--text-primary);
}

.facts-number-container {
  position: relative;
  overflow: hidden;
  height: 6rem;
  margin-bottom: 0;
  padding-bottom: 0.5rem;
}

.facts-number {
  font-size: 4rem;
  font-weight: 700;
  line-height: 1;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--text-primary);
  font-family: system-ui, -apple-system, sans-serif;
}

.facts-nav {
  position: absolute;
  bottom: 1.25rem;
  right: 1.25rem;
  display: flex;
  gap: 0.5rem;
}

.facts-nav-btn {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 6px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-medium);
  color: var(--text-secondary);
}

.facts-nav-btn:hover {
  background: var(--bg-muted);
  border-color: var(--border-hover);
  color: var(--text-primary);
  transform: scale(1.05);
}

.facts-nav-btn:active {
  transform: scale(0.95);
}

.card-contact {
  grid-area: 9 / 1 / 11 / 5;
  background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-card) 100%);
  color: var(--text-primary);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-medium);
  position: relative;
  overflow: hidden;
}

/* faint code-snippet background behind contact card */
.contact-bg-image {
  position: absolute;
  right: 0;
  top: 60%;
  transform: translateY(-50%);
  width: 50%;
  height: 70%;
  object-fit: contain;
  opacity: 0.25;  
  pointer-events: none;
  z-index: 0;
}

/* ensure contact card content sits above the background overlay */
.contact-header,
.contact-footer {
  position: relative;
  z-index: 1;
}

.card-project-feature {
  grid-area: 1 / 9 / 10 / 13;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}

.card-social {
  grid-area: 10 / 9 / 11 / 13;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.card-socials {
  grid-area: 1 / 5 / 6 / 6;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* --- Column 1 Styles --- */
.card-hero h2 {
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.1;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.card-hero h2 em {
  font-family: Georgia, serif; 
  font-style: italic;
  color: var(--accent-primary);
}

/* Hero job title section */
.hero-job-title {
  margin-bottom: 0.75rem;
  flex-shrink: 0;
}

.hero-job-title h2 {
  display: block;
  white-space: normal;
  overflow: hidden;
  height: 2.5em;
  line-height: 1.2;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  -webkit-line-clamp: 2;
}

.typing-text {
  color: var(--text-primary);
  font-style: italic;
  font-weight: 300;
  display: inline;
}

.typing-cursor {
  color: var(--text-primary);
  font-weight: 300;
  animation: blink 1s step-end infinite;
}

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

/* Hero about me section */
.hero-about-me {
  max-width: 700px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 0.5rem;
  scrollbar-width: none;
}

.hero-about-me:hover {
  scrollbar-width: thin;
  scrollbar-color: var(--border-hover) transparent;
}

.hero-about-me::-webkit-scrollbar {
  width: 3px;
  display: none;
}

.hero-about-me:hover::-webkit-scrollbar {
  display: block;
}

.hero-about-me::-webkit-scrollbar-track {
  background: transparent;
}

.hero-about-me::-webkit-scrollbar-thumb {
  background: var(--border-hover);
  border-radius: 99px;
}

.hero-about-me p {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0 0 1.4em 0;
  opacity: 0.9;
}

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

.card-top-icon {
  margin-bottom: auto; 
  color: var(--text-tertiary);
}

.tree-icon {
  margin-bottom: 1rem;
}

.card-bio p,
.card-facts p {
  font-size: 0.875rem;
  line-height: 1.6;
  opacity: 0.8;
  margin: 0;
  font-family: sans-serif;
  max-width: 90%;
}

/* =============================================
   BIO CARD — Specialties + Tech Stack
   ============================================= */

/* ensure inner content sits above the background overlay */
.card-bio > * {
  position: relative;
  z-index: 1;
}

/* -- Specialty tiles row -- */
.bio-specialties {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.55rem;
  flex: 0 0 auto;
}

.specialty-tile {
  position: relative;
  background: var(--black-card);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 0.9rem 0.9rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  overflow: hidden;
  cursor: default;
  transition: border-color 0.3s ease, background 0.3s ease;
}

.specialty-tile:hover {
  background: var(--black-card-hover);
  border-color: var(--border-medium);
}

/* icon + title row */
.specialty-header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.25rem;
}

.specialty-header > i {
  font-size: 1.55rem;
  color: var(--white-high);
  flex-shrink: 0;
}

.specialty-name {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* First line — bold white with colored underline */
.specialty-accent {
  font-family: sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--white);
  line-height: 1.2;
}

.specialty-tile[data-color="lang"] .specialty-accent {
  text-decoration: underline;
  text-decoration-color: var(--accent-purple);
  text-decoration-thickness: 2.5px;
  text-underline-offset: 3px;
}

.specialty-tile[data-color="fw"] .specialty-accent {
  text-decoration: underline;
  text-decoration-color: var(--accent-blue);
  text-decoration-thickness: 2.5px;
  text-underline-offset: 3px;
}

.specialty-tile[data-color="design"] .specialty-accent {
  text-decoration: underline;
  text-decoration-color: var(--accent-orange);
  text-decoration-thickness: 2.5px;
  text-underline-offset: 3px;
}

/* Second line — dimmer subtitle */
.specialty-subtitle {
  font-family: sans-serif;
  font-size: 0.8rem;
  color: var(--white-medium);
  line-height: 1.2;
}

/* HTML tag labels */
.html-tag {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.67rem;
  color: var(--white-low);
  line-height: 1;
}

/* Code-style description block */
.specialty-body {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.67rem;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.6;
  border-left: 2px solid rgba(255, 255, 255, 0.12);
  padding-left: 0.6rem;
  margin-left: 0.1rem;
}

/* -- Tech Stack section -- */
.bio-stack {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-height: 0;
}

.bio-stack-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  padding-bottom: 16px;
}

.stack-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--text-primary);
  font-family: system-ui, -apple-system, sans-serif;
}

.stack-filters {
  display: flex;
  gap: 0.4rem;
}

.sf {
  background: none;
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  font-size: 0.7rem;
  font-family: system-ui, -apple-system, sans-serif;
  padding: 0.25rem 0.65rem;
  border-radius: 20px;
  cursor: pointer;
  transition: all var(--transition-medium);
  opacity: 0.5;
  letter-spacing: 0.02em;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.sf:hover { opacity: 0.9; border-color: var(--border-hover); }

.sf.active {
  opacity: 1;
  border-color: var(--accent-glow);
  background: var(--bg-overlay-eng);
}

/* -- Skill tags -- */
.bio-tags {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0.5rem;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.stag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  font-size:0.8rem;
  font-family: system-ui, -apple-system, sans-serif;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--border-default);
  background: var(--bg-overlay-eng);
  color: var(--text-secondary);
  cursor: default;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.28s ease, transform 0.28s ease, border-color 0.22s ease, background 0.22s ease;
}

.stag i {
  font-size: 0.9rem;
  flex-shrink: 0;
}

.stag.tag-visible {
  opacity: 0.92;
  transform: translateY(0);
}

.stag:hover {
  opacity: 1;
  border-color: var(--border-hover);
  background: var(--bg-overlay-eng-medium);
}


/* --- Column 2 Styles --- */
.portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
  /* Placeholder grayscale filter if we don't have a good image yet */
  filter: grayscale(20%) sepia(10%);
}

.contact-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-size: 0.85rem;
  font-family: sans-serif;
  opacity: 0.65;
}

.contact-header .pencil-icon {
  opacity: 0.5;
  flex-shrink: 0;
}

.contact-footer h2 {
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 400;
  margin: 0;
  line-height: 1.1;
  color: var(--text-primary);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.contact-footer h2 em {
  font-family: 'Times New Roman', serif;
  font-style: italic;
}

/* --- Column 3 Styles --- */
.project-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.1rem;
  flex: 0 0 auto;
}

.project-header > span {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--text-primary);
  font-family: system-ui, -apple-system, sans-serif;
  letter-spacing: -0.01em;
}

.project-header > i {
  font-size: 0.85rem;
  color: var(--text-tertiary);
}

/* Mini project cards grid */
.project-cards {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-height: 0;
}

.project-mini-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-inner);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
  background: var(--bg-tertiary);
  min-height: 0;
}

.project-mini-card:hover {
  border-color: var(--border-hover);
  background: var(--bg-elevated);
}

.project-mini-thumb {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-surface);
  min-height: 0;
}

.project-mini-thumb > i {
  font-size: 1.4rem;
  color: var(--text-muted);
  opacity: 0.6;
}

.project-mini-card:hover .project-mini-thumb > i {
  opacity: 0.9;
  color: var(--text-tertiary);
}

.project-mini-footer {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.55rem 0.75rem;
  border-top: 1px solid var(--border-subtle);
  font-size: 0.78rem;
  font-family: system-ui, -apple-system, sans-serif;
  color: var(--text-secondary);
  font-weight: 500;
}

.project-mini-footer > i {
  font-size: 0.7rem;
  color: var(--text-muted);
  transition: transform 0.2s ease, color 0.2s ease;
}

.project-mini-card:hover .project-mini-footer > i {
  transform: translateX(3px);
  color: var(--text-secondary);
}

.card-social {
  flex: 0 0 auto;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.social-row {
  display: flex;
  gap: 2rem;
  width: 100%;
  justify-content: space-around;
}

.social-row a {
  color: var(--text-tertiary);
  text-decoration: none;
  font-size: 1.2rem;
  transition: all var(--transition-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border-default);
}

.social-row a:hover {
  color: var(--text-primary);
  background-color: var(--bg-surface);
  border-color: var(--border-hover);
}

/* ===========================================
   CONTENT WRAPPER
   =========================================== */

.content-wrapper {
  flex: 1;
  display: flex;
  flex-direction: row;
  gap: var(--gap-size);
  padding: 0.5rem 2rem 1.5rem 1rem;    
  min-height: 0;
}

/* ===========================================
   VERTICAL TIMELINE
   =========================================== */

.timeline-rail {
  width: 2.75rem;
  flex-shrink: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 3rem 0 3rem 0;
  z-index: 1;
  opacity: 0;
  animation: slideFromLeft 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.1s;
}

/* Vertical connecting line */
.tl-track {
  position: absolute;
  left: 48%;
  top: 3.8rem;
  bottom: 3.5rem;
   width: 2px;
  transform: translateX(-50%);
   background: rgba(255, 255, 255, 0.22);
   border-radius: 999px;
   box-shadow: 0 0 10px rgba(255, 255, 255, 0.08);
  overflow: visible;
}

/* Scanning particle that travels down the line */
@keyframes tl-scan {
  0%   { top: 0;    opacity: 0; }
  5%   { opacity: 0.9; }
  95%  { opacity: 0.9; }
  100% { top: 100%; opacity: 0; }
}

.tl-track::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--timeline-accent);
  transform: translateX(-50%);
  animation: tl-scan 5s ease-in-out infinite;
  animation-delay: 2s;
  box-shadow: 0 0 6px var(--timeline-glow);
}

/* Individual node */
.tl-node {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}

/* Diamond dot wrapper */
.tl-dot-wrap {
  position: relative;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  z-index: 2;
}

/* The diamond */
.tl-dot {
  width: 10px;
  height: 10px;
  background: var(--timeline-dot);
  border: 1px solid var(--timeline-dot-border);
  transform: rotate(45deg);
  transition:
    background 0.4s ease,
    border-color 0.4s ease,
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.4s ease;
  position: relative;
  z-index: 2;
}

/* Expanding pulse ring on hover */
.tl-pulse {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(203, 191, 168, 0);
  transform: scale(0.4);
  transition:
    border-color 0.5s ease,
    transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.5s ease;
  opacity: 0;
  pointer-events: none;
}

/* Active (NOW) node — glowing breathe */
@keyframes tl-breathe {
  0%, 100% { box-shadow: 0 0 5px rgba(255, 255, 255, 0.1); }
  50%       { box-shadow: 0 0 14px rgba(255, 255, 255, 0.6), 0 0 0 4px rgba(255, 255, 255, 0.08); }
}

.tl-node--active .tl-dot {
  background: var(--timeline-active);
  border-color: var(--timeline-active-border);
  animation: tl-breathe 2.8s ease-in-out infinite;
}

/* Professional experience node */
.tl-node--pro .tl-dot {
  background: #c9a84c;
  border-color: rgba(201, 168, 76, 0.9);
  box-shadow:
    0 0 0 3px rgba(201, 168, 76, 0.15),
    0 0 18px rgba(201, 168, 76, 0.35);
}

.tl-node--pro .tl-card {
  border-left-color: rgba(201, 168, 76, 0.85);
}

.tl-node--pro .tl-year {
  color: rgba(201, 168, 76, 0.75);
}

.tl-node--pro .tl-card-line {
  background: linear-gradient(to right, rgba(201, 168, 76, 0.8), transparent);
}

.tl-node--pro:hover .tl-dot {
  background: #e0bb5a;
  border-color: rgba(201, 168, 76, 1);
  box-shadow:
    0 0 0 3px rgba(201, 168, 76, 0.25),
    0 0 28px rgba(201, 168, 76, 0.6);
}

.tl-node--pro:hover .tl-pulse {
  border-color: rgba(201, 168, 76, 0.5);
}

/* Active + pro: breathe in gold */
@keyframes tl-breathe-pro {
  0%, 100% { box-shadow: 0 0 5px rgba(201, 168, 76, 0.2); }
  50%       { box-shadow: 0 0 14px rgba(201, 168, 76, 0.7), 0 0 0 4px rgba(201, 168, 76, 0.12); }
}

.tl-node--active.tl-node--pro .tl-dot {
  background: #c9a84c;
  border-color: rgba(201, 168, 76, 0.9);
  animation: tl-breathe-pro 2.8s ease-in-out infinite;
}

/* --- Hover states --- */
.tl-node:hover .tl-dot {
  background: var(--timeline-hover);
  border-color: var(--timeline-hover-border);
  transform: rotate(45deg) scale(1.65);
  box-shadow:
    0 0 0 3px var(--border-hover),
    0 0 18px var(--accent-glow);
}

.tl-node:hover .tl-pulse {
  border-color: var(--border-active);
  transform: scale(2.6);
  opacity: 1;
}

/* ---- Hover expand card ---- */
.tl-card {
  position: absolute;
  left: calc(100% + 1.25rem);
  top: 50%;
  transform: translateY(-50%) translateX(-6px) scale(0.97);
  width: 500px;
  background: linear-gradient(
    148deg,
    rgba(28, 28, 28, 0.98) 0%,
    rgba(14, 14, 14, 0.98) 100%
  );
  border: 1px solid var(--border-hover);
  border-left: 2px solid rgba(255, 255, 255, 0.75);
  border-radius: 0 10px 10px 0;
  padding: 0.75rem 1rem;
  pointer-events: none;
  clip-path: inset(0 100% 0 0);
  transition:
    clip-path 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    transform  0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity    0.28s ease,
    box-shadow 0.4s ease;
  opacity: 0;
  box-shadow:
    8px 12px 36px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  z-index: 999;
  overflow: hidden;
  backdrop-filter: blur(8px);
}

/* Shimmer sweep after card opens */
.tl-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -80%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.05) 50%,
    transparent 100%
  );
  pointer-events: none;
  transition: left 0s;
}

.tl-node:hover .tl-card {
  clip-path: inset(0 0% 0 0);
  transform: translateY(calc(-50% + var(--tl-card-offset, 0px))) translateX(0) scale(1);
  opacity: 1;
  pointer-events: auto;
  box-shadow:
    10px 16px 44px rgba(0, 0, 0, 0.75),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 0 18px rgba(255, 255, 255, 0.04);
}

/* Shimmer fires after card is fully open */
.tl-node:hover .tl-card::after {
  left: 160%;
  transition: left 0.7s ease 0.35s;
}

/* ---- Background blur when hovering a node ---- */
.main-grid,
.card-title-bar {
  transition: filter 0.4s ease, opacity 0.4s ease;
}

.content-wrapper:has(.tl-node:hover) .main-grid,
.fullscreen:has(.tl-node:hover) .card-title-bar {
  filter: blur(3px);
  opacity: 0.45;
}



/* Year stamp */
.tl-year {
  display: block;
  font-family: 'Courier New', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  margin-bottom: 0.28rem;
}

/* Accent divider line */
.tl-card-line {
  width: 24px;
  height: 1px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.7), transparent);
  margin-bottom: 0.35rem;
}

/* Title */
.tl-title {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 1.05rem;
  font-weight: 650;
  color: #ffffff;
  margin: 0 0 0.32rem 0;
  letter-spacing: 0.015em;
  line-height: 1.35;
}

/* Description */
.tl-desc {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
  white-space: normal;
  line-height: 1.65;
}

/* ============================================================
   Blueprint Gear Train Animation — project-mini-thumb
   Cycle: 8s infinite
   Phase 1  0–10%   : grid fades in
   Phase 2  8–35%   : left small gear draws
   Phase 3  22–48%  : right small gear draws
   Phase 4  38–65%  : main drive gear draws
   Phase 5  65–70%  : annotations fade in
   Phase 6  70–87%  : gears spin (10:6 speed ratio)
   Phase 7  87–100% : everything fades out & resets
============================================================ */

/* -- Container: position:relative so SVG can fill absolutely -- */
.project-mini-thumb--blueprint {
  padding: 0;
  overflow: hidden;
  position: relative;    /* needed for absolute child */
  background: linear-gradient(145deg, #000000 40%, #0d0d0d 100%);
}

.blueprint-anim {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ---- Shared dash draw utility ---- */
/* All drawn paths start hidden (dashoffset = dasharray = 100 via pathLength=100) */

/* Grid */
.bp-grid-layer {
  animation: bp-grid 8s ease-in-out infinite;
}
@keyframes bp-grid {
  0%, 5%     { opacity: 0; }
  14%, 87%   { opacity: 0.75; }
  98%, 100%  { opacity: 0; }
}

/* Centrelines */
.bp-path-cl {
  animation: bp-fade-cl 8s ease-in-out infinite;
}
@keyframes bp-fade-cl {
  0%, 6%     { opacity: 0; }
  14%, 87%   { opacity: 0.75; }
  98%, 100%  { opacity: 0; }
}

/* -- LEFT small gear outline -- */
.bp-path-gl {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: bp-draw-gl 8s ease-in-out infinite;
}
@keyframes bp-draw-gl {
  0%, 8%     { stroke-dashoffset: 100; }
  35%, 87%   { stroke-dashoffset: 0;   }
  98%, 100%  { stroke-dashoffset: 100; opacity: 0; }
}

/* Left gear pitch circle */
.bp-path-pc-l {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: bp-draw-pc-l 8s ease-in-out infinite;
}
@keyframes bp-draw-pc-l {
  0%, 28%    { stroke-dashoffset: 100; opacity: 1; }
  38%, 87%   { stroke-dashoffset: 0;   opacity: 1; }
  98%, 100%  { stroke-dashoffset: 100; opacity: 0; }
}

/* Left gear bore + hub */
.bp-path-bore-l {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: bp-draw-bore-l 8s ease-in-out infinite;
}
@keyframes bp-draw-bore-l {
  0%, 30%    { stroke-dashoffset: 100; opacity: 1; }
  40%, 87%   { stroke-dashoffset: 0;   opacity: 1; }
  98%, 100%  { stroke-dashoffset: 100; opacity: 0; }
}

/* -- RIGHT small gear outline -- */
.bp-path-gr {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: bp-draw-gr 8s ease-in-out infinite;
}
@keyframes bp-draw-gr {
  0%, 22%    { stroke-dashoffset: 100; }
  48%, 87%   { stroke-dashoffset: 0;   }
  98%, 100%  { stroke-dashoffset: 100; opacity: 0; }
}

.bp-path-pc-r {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: bp-draw-pc-r 8s ease-in-out infinite;
}
@keyframes bp-draw-pc-r {
  0%, 40%    { stroke-dashoffset: 100; opacity: 1; }
  52%, 87%   { stroke-dashoffset: 0;   opacity: 1; }
  98%, 100%  { stroke-dashoffset: 100; opacity: 0; }
}

.bp-path-bore-r {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: bp-draw-bore-r 8s ease-in-out infinite;
}
@keyframes bp-draw-bore-r {
  0%, 42%    { stroke-dashoffset: 100; opacity: 1; }
  54%, 87%   { stroke-dashoffset: 0;   opacity: 1; }
  98%, 100%  { stroke-dashoffset: 100; opacity: 0; }
}

/* -- MAIN drive gear outline -- */
.bp-path-gm {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: bp-draw-gm 8s ease-in-out infinite;
}
@keyframes bp-draw-gm {
  0%, 38%    { stroke-dashoffset: 100; }
  65%, 87%   { stroke-dashoffset: 0;   }
  98%, 100%  { stroke-dashoffset: 100; opacity: 0; }
}

.bp-path-pc-m {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: bp-draw-pc-m 8s ease-in-out infinite;
}
@keyframes bp-draw-pc-m {
  0%, 55%    { stroke-dashoffset: 100; opacity: 1; }
  65%, 87%   { stroke-dashoffset: 0;   opacity: 1; }
  98%, 100%  { stroke-dashoffset: 100; opacity: 0; }
}

.bp-path-bore-m {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: bp-draw-bore-m 8s ease-in-out infinite;
}
@keyframes bp-draw-bore-m {
  0%, 57%    { stroke-dashoffset: 100; opacity: 1; }
  67%, 87%   { stroke-dashoffset: 0;   opacity: 1; }
  98%, 100%  { stroke-dashoffset: 100; opacity: 0; }
}

/* Spoke lines on main gear */
.bp-path-spokes {
  opacity: 0;
  animation: bp-fade-spokes 8s ease-in-out infinite;
}
@keyframes bp-fade-spokes {
  0%, 60%    { opacity: 0; }
  68%, 87%   { opacity: 0.8; }
  98%, 100%  { opacity: 0; }
}

/* Annotations: text, dims, arrows, title block, border */
.bp-path-ann {
  opacity: 0;
  animation: bp-fade-ann 8s ease-in-out infinite;
}
@keyframes bp-fade-ann {
  0%, 64%    { opacity: 0; }
  72%, 87%   { opacity: 1; }
  98%, 100%  { opacity: 0; }
}

/* ==== GEAR SPIN PHASE (70–87% of cycle) ==== */
/* Main drive gear: clockwise.  70%=5.6s of 8s. Spins ~540° CW in 1.36s. */
.bp-gear-spin-m {
  transform-origin: 80px 50px;
  animation: bp-spin-m 8s linear infinite;
}
@keyframes bp-spin-m {
  0%, 70%   { transform: rotate(0deg);   }
  87%       { transform: rotate(540deg); }
  100%      { transform: rotate(540deg); }
}

/* Left driven gear: counter-clockwise, 10/6 × faster (900° CCW) */
.bp-gear-spin-l {
  transform-origin: 52px 50px;
  animation: bp-spin-l 8s linear infinite;
}
@keyframes bp-spin-l {
  0%, 70%   { transform: rotate(30deg);    }
  87%       { transform: rotate(-870deg);  }
  100%      { transform: rotate(-870deg);  }
}

/* Right driven gear: counter-clockwise, same ratio */
.bp-gear-spin-r {
  transform-origin: 108px 50px;
  animation: bp-spin-r 8s linear infinite;
}
@keyframes bp-spin-r {
  0%, 70%   { transform: rotate(30deg);    }
  87%       { transform: rotate(-870deg);  }
  100%      { transform: rotate(-870deg);  }
}

/* =============================================
   Code Editor Mini — Software Engineering card
   ============================================= */

.project-mini-thumb--coding {
  padding: 0;
  overflow: hidden;
  background: var(--bg-secondary);
    align-items: stretch;
  justify-content: flex-start;
}

.code-win {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  font-family: 'Courier New', Courier, monospace;
}

/* Title bar */
.code-win-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: #161b22;
  border-bottom: 1px solid #21262d;
}

.cw-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cw-red   { background: #ff5f57; }
.cw-amber { background: #febc2e; }
.cw-green { background: #28c840; }

.cw-filename {
  font-size: 0.57rem;
  color: #7d8590;
  margin-left: 5px;
  font-family: 'Courier New', monospace;
  min-width: 44px;
}

/* Scrollable code area */
.code-scroll-track {
  flex: 1;
  overflow: hidden;
  position: relative;
  min-height: 0;
}

.code-scroll-inner {
  padding: 4px 8px 0;
}

/* Scroll animation — always running */
.project-mini-card--coding .code-scroll-inner {
  animation: codeScroll 15s linear infinite;
}

@keyframes codeScroll {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

/* Code line */
.cl {
  font-size: 0.58rem;
  line-height: 1.55;
  white-space: nowrap;
  color: #c9d1d9;
}
.cl.pl1 { padding-left: 13px; }

/* Syntax token colours */
.ck { color: #ff7b72; }  /* keyword   */
.cv { color: #79c0ff; }  /* variable  */
.cs { color: #a5d6ff; }  /* string    */
.cf { color: #d2a8ff; }  /* function  */
.cn { color: #f0883e; }  /* number    */
.co { color: #ff7b72; }  /* operator  */

/* Active typing line at bottom */
.code-active-line {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 2px 8px 4px;
  background: #161b22;
  border-top: 1px solid #21262d;
  min-height: 1.25rem;
}

.ca-ln {
  color: #3fb950;
  font-size: 0.58rem;
  font-family: 'Courier New', monospace;
  flex-shrink: 0;
}

#typed-target {
  font-size: 0.58rem;
  font-family: 'Courier New', monospace;
  color: #e6edf3;
  white-space: nowrap;
}

/* Typed.js cursor — blinks only while hovered */
.project-mini-card--coding .typed-cursor {
  color: #58a6ff;
  font-size: 0.65rem;
  animation: typedBlink 0.65s step-end infinite;
}

.project-mini-card--coding:not(:hover) .typed-cursor {
  display: none;
}

@keyframes typedBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* =====================================================
   Puzzle Pieces Animation — project-mini-thumb--puzzle
   Symbolism: assembling pieces = solving client problems
   ===================================================== */

.project-mini-thumb--puzzle {
  background: var(--bg-secondary);
  overflow: hidden;
  padding: 0;
}

.puzzle-anim {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── Piece backgrounds: scattered tint → assembled neutral ── */
/* TL = green (#3ecf8e) */
.pz-bg-tl   { fill: rgba(62, 207, 142, 0.10); animation: pz-bg-tl-color   9s ease-in-out infinite 0s; }
/* TR = blue (#0ea5e9) */
.pz-bg-tr   { fill: rgba(14, 165, 233, 0.10); animation: pz-bg-tr-color   9s ease-in-out infinite 0.28s; }
/* BL = purple (#a855f7) */
.pz-bg-bl   { fill: rgba(168, 85, 247, 0.10); animation: pz-bg-bl-color   9s ease-in-out infinite 0.16s; }
/* BR = amber (#f59e0b) */
.pz-bg-br   { fill: rgba(245, 158, 11, 0.10); animation: pz-bg-br-color   9s ease-in-out infinite 0.44s; }

/* ── Piece outlines: scattered color → assembled white ── */
.pz-outline-tl { stroke: #3ecf8e; animation: pz-stroke-tl 9s ease-in-out infinite 0s; }
.pz-outline-tr { stroke: #0ea5e9; animation: pz-stroke-tr 9s ease-in-out infinite 0.28s; }
.pz-outline-bl { stroke: #a855f7; animation: pz-stroke-bl 9s ease-in-out infinite 0.16s; }
.pz-outline-br { stroke: #f59e0b; animation: pz-stroke-br 9s ease-in-out infinite 0.44s; }

/* ── Detail accents (fill) per piece ── */
.pz-detail-tl { fill: #3ecf8e; animation: pz-detail-tl-color 9s ease-in-out infinite 0s; }
.pz-detail-tr { fill: #0ea5e9; animation: pz-detail-tr-color 9s ease-in-out infinite 0.28s; }
.pz-detail-bl { fill: #a855f7; animation: pz-detail-bl-color 9s ease-in-out infinite 0.16s; }
.pz-detail-br { fill: #f59e0b; animation: pz-detail-br-color 9s ease-in-out infinite 0.44s; }

/* BG color keyframes — converge to faint white when assembled */
@keyframes pz-bg-tl-color {
  0%,  24% { fill: rgba(62,  207, 142, 0.12); }
  30%, 58% { fill: rgba(255, 255, 255, 0.05); }
  64%,100% { fill: rgba(62,  207, 142, 0.12); }
}
@keyframes pz-bg-tr-color {
  0%,  24% { fill: rgba(14,  165, 233, 0.12); }
  30%, 58% { fill: rgba(255, 255, 255, 0.05); }
  64%,100% { fill: rgba(14,  165, 233, 0.12); }
}
@keyframes pz-bg-bl-color {
  0%,  24% { fill: rgba(168,  85, 247, 0.12); }
  30%, 58% { fill: rgba(255, 255, 255, 0.05); }
  64%,100% { fill: rgba(168,  85, 247, 0.12); }
}
@keyframes pz-bg-br-color {
  0%,  24% { fill: rgba(245, 158,  11, 0.12); }
  30%, 58% { fill: rgba(255, 255, 255, 0.05); }
  64%,100% { fill: rgba(245, 158,  11, 0.12); }
}

/* Outline stroke keyframes — all converge to white */
@keyframes pz-stroke-tl {
  0%,  24% { stroke: #3ecf8e; opacity: 0.65; }
  30%, 58% { stroke: #fafafa; opacity: 0.30; }
  64%,100% { stroke: #3ecf8e; opacity: 0.65; }
}
@keyframes pz-stroke-tr {
  0%,  24% { stroke: #0ea5e9; opacity: 0.65; }
  30%, 58% { stroke: #fafafa; opacity: 0.30; }
  64%,100% { stroke: #0ea5e9; opacity: 0.65; }
}
@keyframes pz-stroke-bl {
  0%,  24% { stroke: #a855f7; opacity: 0.65; }
  30%, 58% { stroke: #fafafa; opacity: 0.30; }
  64%,100% { stroke: #a855f7; opacity: 0.65; }
}
@keyframes pz-stroke-br {
  0%,  24% { stroke: #f59e0b; opacity: 0.65; }
  30%, 58% { stroke: #fafafa; opacity: 0.30; }
  64%,100% { stroke: #f59e0b; opacity: 0.65; }
}

/* Detail accent fill keyframes — converge to white */
@keyframes pz-detail-tl-color {
  0%,  24% { fill: #3ecf8e; }
  30%, 58% { fill: #fafafa; }
  64%,100% { fill: #3ecf8e; }
}
@keyframes pz-detail-tr-color {
  0%,  24% { fill: #0ea5e9; }
  30%, 58% { fill: #fafafa; }
  64%,100% { fill: #0ea5e9; }
}
@keyframes pz-detail-bl-color {
  0%,  24% { fill: #a855f7; }
  30%, 58% { fill: #fafafa; }
  64%,100% { fill: #a855f7; }
}
@keyframes pz-detail-br-color {
  0%,  24% { fill: #f59e0b; }
  30%, 58% { fill: #fafafa; }
  64%,100% { fill: #f59e0b; }
}

/* Shared piece defaults */
.pz-piece {
  transform-box: view-box;
  transform-origin: center;
}

/* ── Individual piece fly-in directions ── */
.pz-tl {
  animation: pz-fly-tl 9s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  animation-delay: 0s;
}
.pz-tr {
  animation: pz-fly-tr 9s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  animation-delay: 0.28s;
}
.pz-bl {
  animation: pz-fly-bl 9s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  animation-delay: 0.16s;
}
.pz-br {
  animation: pz-fly-br 9s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  animation-delay: 0.44s;
}

@keyframes pz-fly-tl {
  0%,  6%  { transform: translate(-62px, -52px) rotate(-6deg); opacity: 0; }
  10%      { opacity: 1; }
  26%      { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  62%      { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  78%      { transform: translate(-62px, -52px) rotate(-6deg); opacity: 0; }
  100%     { transform: translate(-62px, -52px) rotate(-6deg); opacity: 0; }
}
@keyframes pz-fly-tr {
  0%,  6%  { transform: translate(62px, -52px) rotate(6deg);  opacity: 0; }
  10%      { opacity: 1; }
  26%      { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  62%      { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  78%      { transform: translate(62px, -52px) rotate(6deg);  opacity: 0; }
  100%     { transform: translate(62px, -52px) rotate(6deg);  opacity: 0; }
}
@keyframes pz-fly-bl {
  0%,  6%  { transform: translate(-62px, 52px) rotate(6deg);  opacity: 0; }
  10%      { opacity: 1; }
  26%      { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  62%      { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  78%      { transform: translate(-62px, 52px) rotate(6deg);  opacity: 0; }
  100%     { transform: translate(-62px, 52px) rotate(6deg);  opacity: 0; }
}
@keyframes pz-fly-br {
  0%,  6%  { transform: translate(62px, 52px) rotate(-6deg); opacity: 0; }
  10%      { opacity: 1; }
  26%      { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  62%      { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  78%      { transform: translate(62px, 52px) rotate(-6deg); opacity: 0; }
  100%     { transform: translate(62px, 52px) rotate(-6deg); opacity: 0; }
}

/* Assembled glow ring — pulses white once locked */
.pz-glow {
  transform-box: view-box;
  transform-origin: center;
  stroke: var(--text-primary);
  animation: pz-glow-pulse 9s ease-in-out infinite;
  animation-delay: 0.5s;
}

@keyframes pz-glow-pulse {
  0%,  28% { opacity: 0; }
  36%      { opacity: 0.55; }
  58%      { opacity: 0.30; }
  68%      { opacity: 0; }
  100%     { opacity: 0; }
}

/* --- Main grid layout --- */
.main-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(10, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  gap: var(--gap-size);
  min-height: 0;
}

/* Card positioning in grid */
.card-hero {
  grid-area: 1 / 1 / 6 / 6;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
  background: linear-gradient(145deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
}

.card-portrait {
  grid-area: 1 / 6 / 6 / 9;
  background-color: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
}

.portrait-image {
  width: 120%;
  height: 120%;
  object-fit: cover;
}

.card-bio {
  grid-area: 6 / 5 / 11 / 9;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  overflow: hidden;
  position: relative;
}

.card-facts {
  grid-area: 6 / 1 / 9 / 5;
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  overflow: hidden;
}

.facts-image-container {
  flex: 0 0 55%;
  background-color: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.facts-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
}

.facts-content {
  flex: 1;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-elevated) 100%);
  color: var(--text-secondary);
}

.facts-text {
  font-size: 1rem;
  line-height: 1.5;
  font-family: system-ui, -apple-system, sans-serif;
  font-weight: 500;
  margin-bottom: auto;
  color: var(--text-primary);
}

.facts-number-container {
  position: relative;
  overflow: hidden;
  height: 6rem;
  margin-bottom: 0;
  padding-bottom: 0.5rem;
}

.facts-number {
  font-size: 4rem;
  font-weight: 700;
  line-height: 1;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--text-primary);
  font-family: system-ui, -apple-system, sans-serif;
}

.facts-nav {
  position: absolute;
  bottom: 1.25rem;
  right: 1.25rem;
  display: flex;
  gap: 0.5rem;
}

.facts-nav-btn {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 6px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-medium);
  color: var(--text-secondary);
}

.facts-nav-btn:hover {
  background: var(--bg-muted);
  border-color: var(--border-hover);
  color: var(--text-primary);
  transform: scale(1.05);
}

.facts-nav-btn:active {
  transform: scale(0.95);
}

.card-contact {
  grid-area: 9 / 1 / 11 / 5;
  background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-card) 100%);
  color: var(--text-primary);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-medium);
  position: relative;
  overflow: hidden;
}

/* faint code-snippet background behind contact card */
.contact-bg-image {
  position: absolute;
  right: 0;
  top: 60%;
  transform: translateY(-50%);
  width: 50%;
  height: 70%;
  object-fit: contain;
  opacity: 0.25;  
  pointer-events: none;
  z-index: 0;
}

/* ensure contact card content sits above the background overlay */
.contact-header,
.contact-footer {
  position: relative;
  z-index: 1;
}

.card-project-feature {
  grid-area: 1 / 9 / 10 / 13;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}

.card-social {
  grid-area: 10 / 9 / 11 / 13;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.card-socials {
  grid-area: 1 / 5 / 6 / 6;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* --- Column 1 Styles --- */
.card-hero h2 {
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.1;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.card-hero h2 em {
  font-family: Georgia, serif; 
  font-style: italic;
  color: var(--accent-primary);
}

/* Hero job title section */
.hero-job-title {
  margin-bottom: 0.75rem;
  flex-shrink: 0;
}

.hero-job-title h2 {
  display: block;
  white-space: normal;
  overflow: hidden;
  height: 2.5em;
  line-height: 1.2;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  -webkit-line-clamp: 2;
}

.typing-text {
  color: var(--text-primary);
  font-style: italic;
  font-weight: 300;
  display: inline;
}

.typing-cursor {
  color: var(--text-primary);
  font-weight: 300;
  animation: blink 1s step-end infinite;
}

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

/* Hero about me section */
.hero-about-me {
  max-width: 700px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 0.5rem;
  scrollbar-width: none;
}

.hero-about-me:hover {
  scrollbar-width: thin;
  scrollbar-color: var(--border-hover) transparent;
}

.hero-about-me::-webkit-scrollbar {
  width: 3px;
  display: none;
}

.hero-about-me:hover::-webkit-scrollbar {
  display: block;
}

.hero-about-me::-webkit-scrollbar-track {
  background: transparent;
}

.hero-about-me::-webkit-scrollbar-thumb {
  background: var(--border-hover);
  border-radius: 99px;
}

.hero-about-me p {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0 0 1.4em 0;
  opacity: 0.9;
}

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

.card-top-icon {
  margin-bottom: auto; 
  color: var(--text-tertiary);
}

.tree-icon {
  margin-bottom: 1rem;
}

.card-bio p,
.card-facts p {
  font-size: 0.875rem;
  line-height: 1.6;
  opacity: 0.8;
  margin: 0;
  font-family: sans-serif;
  max-width: 90%;
}

/* =============================================
   BIO CARD — Specialties + Tech Stack
   ============================================= */

/* ensure inner content sits above the background overlay */
.card-bio > * {
  position: relative;
  z-index: 1;
}

/* -- Specialty tiles row -- */
.bio-specialties {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.55rem;
  flex: 0 0 auto;
}

.specialty-tile {
  position: relative;
  background: var(--black-card);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 0.9rem 0.9rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  overflow: hidden;
  cursor: default;
  transition: border-color 0.3s ease, background 0.3s ease;
}

.specialty-tile:hover {
  background: var(--black-card-hover);
  border-color: var(--border-medium);
}

/* icon + title row */
.specialty-header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.25rem;
}

.specialty-header > i {
  font-size: 1.55rem;
  color: var(--white-high);
  flex-shrink: 0;
}

.specialty-name {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* First line — bold white with colored underline */
.specialty-accent {
  font-family: sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--white);
  line-height: 1.2;
}

.specialty-tile[data-color="lang"] .specialty-accent {
  text-decoration: underline;
  text-decoration-color: var(--accent-purple);
  text-decoration-thickness: 2.5px;
  text-underline-offset: 3px;
}

.specialty-tile[data-color="fw"] .specialty-accent {
  text-decoration: underline;
  text-decoration-color: var(--accent-blue);
  text-decoration-thickness: 2.5px;
  text-underline-offset: 3px;
}

.specialty-tile[data-color="design"] .specialty-accent {
  text-decoration: underline;
  text-decoration-color: var(--accent-orange);
  text-decoration-thickness: 2.5px;
  text-underline-offset: 3px;
}

/* Second line — dimmer subtitle */
.specialty-subtitle {
  font-family: sans-serif;
  font-size: 0.8rem;
  color: var(--white-medium);
  line-height: 1.2;
}

/* HTML tag labels */
.html-tag {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.67rem;
  color: var(--white-low);
  line-height: 1;
}

/* Code-style description block */
.specialty-body {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.67rem;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.6;
  border-left: 2px solid rgba(255, 255, 255, 0.12);
  padding-left: 0.6rem;
  margin-left: 0.1rem;
}

/* -- Tech Stack section -- */
.bio-stack {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-height: 0;
}

.bio-stack-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  padding-bottom: 16px;
}

.stack-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--text-primary);
  font-family: system-ui, -apple-system, sans-serif;
}

.stack-filters {
  display: flex;
  gap: 0.4rem;
}

.sf {
  background: none;
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  font-size: 0.7rem;
  font-family: system-ui, -apple-system, sans-serif;
  padding: 0.25rem 0.65rem;
  border-radius: 20px;
  cursor: pointer;
  transition: all var(--transition-medium);
  opacity: 0.5;
  letter-spacing: 0.02em;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.sf:hover { opacity: 0.9; border-color: var(--border-hover); }

.sf.active {
  opacity: 1;
  border-color: var(--accent-glow);
  background: var(--bg-overlay-eng);
}

/* -- Skill tags -- */
.bio-tags {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0.5rem;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.stag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  font-size:0.8rem;
  font-family: system-ui, -apple-system, sans-serif;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--border-default);
  background: var(--bg-overlay-eng);
  color: var(--text-secondary);
  cursor: default;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.28s ease, transform 0.28s ease, border-color 0.22s ease, background 0.22s ease;
}

.stag i {
  font-size: 0.9rem;
  flex-shrink: 0;
}

.stag.tag-visible {
  opacity: 0.92;
  transform: translateY(0);
}

.stag:hover {
  opacity: 1;
  border-color: var(--border-hover);
  background: var(--bg-overlay-eng-medium);
}


/* --- Column 2 Styles --- */
.portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
  /* Placeholder grayscale filter if we don't have a good image yet */
  filter: grayscale(20%) sepia(10%);
}

.contact-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-size: 0.85rem;
  font-family: sans-serif;
  opacity: 0.65;
}

.contact-header .pencil-icon {
  opacity: 0.5;
  flex-shrink: 0;
}

.contact-footer h2 {
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 400;
  margin: 0;
  line-height: 1.1;
  color: var(--text-primary);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.contact-footer h2 em {
  font-family: 'Times New Roman', serif;
  font-style: italic;
}

/* --- Column 3 Styles --- */
.project-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.1rem;
  flex: 0 0 auto;
}

.project-header > span {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--text-primary);
  font-family: system-ui, -apple-system, sans-serif;
  letter-spacing: -0.01em;
}

.project-header > i {
  font-size: 0.85rem;
  color: var(--text-tertiary);
}

/* Mini project cards grid */
.project-cards {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-height: 0;
}

.project-mini-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-inner);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
  background: var(--bg-tertiary);
  min-height: 0;
}

.project-mini-card:hover {
  border-color: var(--border-hover);
  background: var(--bg-elevated);
}

.project-mini-thumb {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-surface);
  min-height: 0;
}

.project-mini-thumb > i {
  font-size: 1.4rem;
  color: var(--text-muted);
  opacity: 0.6;
}

.project-mini-card:hover .project-mini-thumb > i {
  opacity: 0.9;
  color: var(--text-tertiary);
}

.project-mini-footer {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.55rem 0.75rem;
  border-top: 1px solid var(--border-subtle);
  font-size: 0.78rem;
  font-family: system-ui, -apple-system, sans-serif;
  color: var(--text-secondary);
  font-weight: 500;
}

.project-mini-footer > i {
  font-size: 0.7rem;
  color: var(--text-muted);
  transition: transform 0.2s ease, color 0.2s ease;
}

.project-mini-card:hover .project-mini-footer > i {
  transform: translateX(3px);
  color: var(--text-secondary);
}

.card-social {
  flex: 0 0 auto;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.social-row {
  display: flex;
  gap: 2rem;
  width: 100%;
  justify-content: space-around;
}

.social-row a {
  color: var(--text-tertiary);
  text-decoration: none;
  font-size: 1.2rem;
  transition: all var(--transition-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border-default);
}

.social-row a:hover {
  color: var(--text-primary);
  background-color: var(--bg-surface);
  border-color: var(--border-hover);
}

/* ===========================================
   CONTENT WRAPPER
   =========================================== */

.content-wrapper {
  flex: 1;
  display: flex;
  flex-direction: row;
  gap: var(--gap-size);
  padding: 0.5rem 2rem 1.5rem 1rem;    
  min-height: 0;
}

/* ===========================================
   VERTICAL TIMELINE
   =========================================== */

.timeline-rail {
  width: 2.75rem;
  flex-shrink: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 3rem 0 3rem 0;
  z-index: 1;
  opacity: 0;
  animation: slideFromLeft 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.1s;
}

/* Vertical connecting line */
.tl-track {
  position: absolute;
  left: 48%;
  top: 3.8rem;
  bottom: 3.5rem;
   width: 2px;
  transform: translateX(-50%);
   background: rgba(255, 255, 255, 0.22);
   border-radius: 999px;
   box-shadow: 0 0 10px rgba(255, 255, 255, 0.08);
  overflow: visible;
}

/* Scanning particle that travels down the line */
@keyframes tl-scan {
  0%   { top: 0;    opacity: 0; }
  5%   { opacity: 0.9; }
  95%  { opacity: 0.9; }
  100% { top: 100%; opacity: 0; }
}

.tl-track::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--timeline-accent);
  transform: translateX(-50%);
  animation: tl-scan 5s ease-in-out infinite;
  animation-delay: 2s;
  box-shadow: 0 0 6px var(--timeline-glow);
}

/* Individual node */
.tl-node {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}

/* Diamond dot wrapper */
.tl-dot-wrap {
  position: relative;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  z-index: 2;
}

/* The diamond */
.tl-dot {
  width: 10px;
  height: 10px;
  background: var(--timeline-dot);
  border: 1px solid var(--timeline-dot-border);
  transform: rotate(45deg);
  transition:
    background 0.4s ease,
    border-color 0.4s ease,
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.4s ease;
  position: relative;
  z-index: 2;
}

/* Expanding pulse ring on hover */
.tl-pulse {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(203, 191, 168, 0);
  transform: scale(0.4);
  transition:
    border-color 0.5s ease,
    transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.5s ease;
  opacity: 0;
  pointer-events: none;
}

/* Active (NOW) node — glowing breathe */
@keyframes tl-breathe {
  0%, 100% { box-shadow: 0 0 5px rgba(255, 255, 255, 0.1); }
  50%       { box-shadow: 0 0 14px rgba(255, 255, 255, 0.6), 0 0 0 4px rgba(255, 255, 255, 0.08); }
}

.tl-node--active .tl-dot {
  background: var(--timeline-active);
  border-color: var(--timeline-active-border);
  animation: tl-breathe 2.8s ease-in-out infinite;
}

/* Professional experience node */
.tl-node--pro .tl-dot {
  background: #c9a84c;
  border-color: rgba(201, 168, 76, 0.9);
  box-shadow:
    0 0 0 3px rgba(201, 168, 76, 0.15),
    0 0 18px rgba(201, 168, 76, 0.35);
}

.tl-node--pro .tl-card {
  border-left-color: rgba(201, 168, 76, 0.85);
}

.tl-node--pro .tl-year {
  color: rgba(201, 168, 76, 0.75);
}

.tl-node--pro .tl-card-line {
  background: linear-gradient(to right, rgba(201, 168, 76, 0.8), transparent);
}

.tl-node--pro:hover .tl-dot {
  background: #e0bb5a;
  border-color: rgba(201, 168, 76, 1);
  box-shadow:
    0 0 0 3px rgba(201, 168, 76, 0.25),
    0 0 28px rgba(201, 168, 76, 0.6);
}

.tl-node--pro:hover .tl-pulse {
  border-color: rgba(201, 168, 76, 0.5);
}

/* Active + pro: breathe in gold */
@keyframes tl-breathe-pro {
  0%, 100% { box-shadow: 0 0 5px rgba(201, 168, 76, 0.2); }
  50%       { box-shadow: 0 0 14px rgba(201, 168, 76, 0.7), 0 0 0 4px rgba(201, 168, 76, 0.12); }
}

.tl-node--active.tl-node--pro .tl-dot {
  background: #c9a84c;
  border-color: rgba(201, 168, 76, 0.9);
  animation: tl-breathe-pro 2.8s ease-in-out infinite;
}

/* --- Hover states --- */
.tl-node:hover .tl-dot {
  background: var(--timeline-hover);
  border-color: var(--timeline-hover-border);
  transform: rotate(45deg) scale(1.65);
  box-shadow:
    0 0 0 3px var(--border-hover),
    0 0 18px var(--accent-glow);
}

.tl-node:hover .tl-pulse {
  border-color: var(--border-active);
  transform: scale(2.6);
  opacity: 1;
}

/* ---- Hover expand card ---- */
.tl-card {
  position: absolute;
  left: calc(100% + 1.25rem);
  top: 50%;
  transform: translateY(-50%) translateX(-6px) scale(0.97);
  width: 600px;
  background: linear-gradient(
    148deg,
    rgba(28, 28, 28, 0.98) 0%,
    rgba(14, 14, 14, 0.98) 100%
  );
  border: 1px solid var(--border-hover);
  border-left: 2px solid rgba(255, 255, 255, 0.75);
  border-radius: 0 10px 10px 0;
  padding: 0.75rem 1rem;
  pointer-events: none;
  clip-path: inset(0 100% 0 0);
  transition:
    clip-path 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    transform  0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity    0.28s ease,
    box-shadow 0.4s ease;
  opacity: 0;
  box-shadow:
    8px 12px 36px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  z-index: 999;
  overflow: hidden;
  backdrop-filter: blur(8px);
}

.tl-list {
  padding-left: 1.2rem;
  margin: 0.4rem 0 0;
  list-style: disc;
}

.tl-list li {
  margin-bottom: 0.4rem;
}

/* Tech stack pills inside timeline cards */
.tl-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.65rem;
  padding-top: 0.55rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.tl-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.72rem;
  font-family: 'Courier New', monospace;
  letter-spacing: 0.04em;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.tl-node--pro .tl-tag {
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.6);
}

.tl-node:hover .tl-tag {
  border-color: rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.08);
}

/* Shimmer sweep after card opens */
.tl-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -80%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.05) 50%,
    transparent 100%
  );
  pointer-events: none;
  transition: left 0s;
}

.tl-node:hover .tl-card {
  clip-path: inset(0 0% 0 0);
  transform: translateY(calc(-50% + var(--tl-card-offset, 0px))) translateX(0) scale(1);
  opacity: 1;
  pointer-events: auto;
  box-shadow:
    10px 16px 44px rgba(0, 0, 0, 0.75),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 0 18px rgba(255, 255, 255, 0.04);
}

/* Shimmer fires after card is fully open */
.tl-node:hover .tl-card::after {
  left: 160%;
  transition: left 0.7s ease 0.35s;
}

/* ---- Background blur when hovering a node ---- */
.main-grid,
.card-title-bar {
  transition: filter 0.4s ease, opacity 0.4s ease;
}

.content-wrapper:has(.tl-node:hover) .main-grid,
.fullscreen:has(.tl-node:hover) .card-title-bar {
  filter: blur(3px);
  opacity: 0.45;
}



/* Year stamp */
.tl-year {
  display: block;
  font-family: 'Courier New', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  margin-bottom: 0.28rem;
}

/* Accent divider line */
.tl-card-line {
  width: 24px;
  height: 1px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.7), transparent);
  margin-bottom: 0.35rem;
}

/* Title */
.tl-title {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 1.05rem;
  font-weight: 650;
  color: #ffffff;
  margin: 0 0 0.32rem 0;
  letter-spacing: 0.015em;
  line-height: 1.35;
}

/* Description */
.tl-desc {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
  white-space: normal;
  line-height: 1.65;
}

/* ============================================================
   Blueprint Gear Train Animation — project-mini-thumb
   Cycle: 8s infinite
   Phase 1  0–10%   : grid fades in
   Phase 2  8–35%   : left small gear draws
   Phase 3  22–48%  : right small gear draws
   Phase 4  38–65%  : main drive gear draws
   Phase 5  65–70%  : annotations fade in
   Phase 6  70–87%  : gears spin (10:6 speed ratio)
   Phase 7  87–100% : everything fades out & resets
============================================================ */

/* -- Container: position:relative so SVG can fill absolutely -- */
.project-mini-thumb--blueprint {
  padding: 0;
  overflow: hidden;
  position: relative;    /* needed for absolute child */
  background: linear-gradient(145deg, #000000 40%, #0d0d0d 100%);
}

.blueprint-anim {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ---- Shared dash draw utility ---- */
/* All drawn paths start hidden (dashoffset = dasharray = 100 via pathLength=100) */

/* Grid */
.bp-grid-layer {
  animation: bp-grid 8s ease-in-out infinite;
}
@keyframes bp-grid {
  0%, 5%     { opacity: 0; }
  14%, 87%   { opacity: 0.75; }
  98%, 100%  { opacity: 0; }
}

/* Centrelines */
.bp-path-cl {
  animation: bp-fade-cl 8s ease-in-out infinite;
}
@keyframes bp-fade-cl {
  0%, 6%     { opacity: 0; }
  14%, 87%   { opacity: 0.75; }
  98%, 100%  { opacity: 0; }
}

/* -- LEFT small gear outline -- */
.bp-path-gl {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: bp-draw-gl 8s ease-in-out infinite;
}
@keyframes bp-draw-gl {
  0%, 8%     { stroke-dashoffset: 100; }
  35%, 87%   { stroke-dashoffset: 0;   }
  98%, 100%  { stroke-dashoffset: 100; opacity: 0; }
}

/* Left gear pitch circle */
.bp-path-pc-l {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: bp-draw-pc-l 8s ease-in-out infinite;
}
@keyframes bp-draw-pc-l {
  0%, 28%    { stroke-dashoffset: 100; opacity: 1; }
  38%, 87%   { stroke-dashoffset: 0;   opacity: 1; }
  98%, 100%  { stroke-dashoffset: 100; opacity: 0; }
}

/* Left gear bore + hub */
.bp-path-bore-l {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: bp-draw-bore-l 8s ease-in-out infinite;
}
@keyframes bp-draw-bore-l {
  0%, 30%    { stroke-dashoffset: 100; opacity: 1; }
  40%, 87%   { stroke-dashoffset: 0;   opacity: 1; }
  98%, 100%  { stroke-dashoffset: 100; opacity: 0; }
}

/* -- RIGHT small gear outline -- */
.bp-path-gr {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: bp-draw-gr 8s ease-in-out infinite;
}
@keyframes bp-draw-gr {
  0%, 22%    { stroke-dashoffset: 100; }
  48%, 87%   { stroke-dashoffset: 0;   }
  98%, 100%  { stroke-dashoffset: 100; opacity: 0; }
}

.bp-path-pc-r {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: bp-draw-pc-r 8s ease-in-out infinite;
}
@keyframes bp-draw-pc-r {
  0%, 40%    { stroke-dashoffset: 100; opacity: 1; }
  52%, 87%   { stroke-dashoffset: 0;   opacity: 1; }
  98%, 100%  { stroke-dashoffset: 100; opacity: 0; }
}

.bp-path-bore-r {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: bp-draw-bore-r 8s ease-in-out infinite;
}
@keyframes bp-draw-bore-r {
  0%, 42%    { stroke-dashoffset: 100; opacity: 1; }
  54%, 87%   { stroke-dashoffset: 0;   opacity: 1; }
  98%, 100%  { stroke-dashoffset: 100; opacity: 0; }
}

/* -- MAIN drive gear outline -- */
.bp-path-gm {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: bp-draw-gm 8s ease-in-out infinite;
}
@keyframes bp-draw-gm {
  0%, 38%    { stroke-dashoffset: 100; }
  65%, 87%   { stroke-dashoffset: 0;   }
  98%, 100%  { stroke-dashoffset: 100; opacity: 0; }
}

.bp-path-pc-m {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: bp-draw-pc-m 8s ease-in-out infinite;
}
@keyframes bp-draw-pc-m {
  0%, 55%    { stroke-dashoffset: 100; opacity: 1; }
  65%, 87%   { stroke-dashoffset: 0;   opacity: 1; }
  98%, 100%  { stroke-dashoffset: 100; opacity: 0; }
}

.bp-path-bore-m {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: bp-draw-bore-m 8s ease-in-out infinite;
}
@keyframes bp-draw-bore-m {
  0%, 57%    { stroke-dashoffset: 100; opacity: 1; }
  67%, 87%   { stroke-dashoffset: 0;   opacity: 1; }
  98%, 100%  { stroke-dashoffset: 100; opacity: 0; }
}

/* Spoke lines on main gear */
.bp-path-spokes {
  opacity: 0;
  animation: bp-fade-spokes 8s ease-in-out infinite;
}
@keyframes bp-fade-spokes {
  0%, 60%    { opacity: 0; }
  68%, 87%   { opacity: 0.8; }
  98%, 100%  { opacity: 0; }
}

/* Annotations: text, dims, arrows, title block, border */
.bp-path-ann {
  opacity: 0;
  animation: bp-fade-ann 8s ease-in-out infinite;
}
@keyframes bp-fade-ann {
  0%, 64%    { opacity: 0; }
  72%, 87%   { opacity: 1; }
  98%, 100%  { opacity: 0; }
}

/* ==== GEAR SPIN PHASE (70–87% of cycle) ==== */
/* Main drive gear: clockwise.  70%=5.6s of 8s. Spins ~540° CW in 1.36s. */
.bp-gear-spin-m {
  transform-origin: 80px 50px;
  animation: bp-spin-m 8s linear infinite;
}
@keyframes bp-spin-m {
  0%, 70%   { transform: rotate(0deg);   }
  87%       { transform: rotate(540deg); }
  100%      { transform: rotate(540deg); }
}

/* Left driven gear: counter-clockwise, 10/6 × faster (900° CCW) */
.bp-gear-spin-l {
  transform-origin: 52px 50px;
  animation: bp-spin-l 8s linear infinite;
}
@keyframes bp-spin-l {
  0%, 70%   { transform: rotate(30deg);    }
  87%       { transform: rotate(-870deg);  }
  100%      { transform: rotate(-870deg);  }
}

/* Right driven gear: counter-clockwise, same ratio */
.bp-gear-spin-r {
  transform-origin: 108px 50px;
  animation: bp-spin-r 8s linear infinite;
}
@keyframes bp-spin-r {
  0%, 70%   { transform: rotate(30deg);    }
  87%       { transform: rotate(-870deg);  }
  100%      { transform: rotate(-870deg);  }
}

/* =============================================
   Code Editor Mini — Software Engineering card
   ============================================= */

.project-mini-thumb--coding {
  padding: 0;
  overflow: hidden;
  background: var(--bg-secondary);
    align-items: stretch;
  justify-content: flex-start;
}

.code-win {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  font-family: 'Courier New', Courier, monospace;
}

/* Title bar */
.code-win-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: #161b22;
  border-bottom: 1px solid #21262d;
}

.cw-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cw-red   { background: #ff5f57; }
.cw-amber { background: #febc2e; }
.cw-green { background: #28c840; }

.cw-filename {
  font-size: 0.57rem;
  color: #7d8590;
  margin-left: 5px;
  font-family: 'Courier New', monospace;
  min-width: 44px;
}

/* Scrollable code area */
.code-scroll-track {
  flex: 1;
  overflow: hidden;
  position: relative;
  min-height: 0;
}

.code-scroll-inner {
  padding: 4px 8px 0;
}

/* Scroll animation — always running */
.project-mini-card--coding .code-scroll-inner {
  animation: codeScroll 15s linear infinite;
}

@keyframes codeScroll {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

/* Code line */
.cl {
  font-size: 0.58rem;
  line-height: 1.55;
  white-space: nowrap;
  color: #c9d1d9;
}
.cl.pl1 { padding-left: 13px; }

/* Syntax token colours */
.ck { color: #ff7b72; }  /* keyword   */
.cv { color: #79c0ff; }  /* variable  */
.cs { color: #a5d6ff; }  /* string    */
.cf { color: #d2a8ff; }  /* function  */
.cn { color: #f0883e; }  /* number    */
.co { color: #ff7b72; }  /* operator  */

/* Active typing line at bottom */
.code-active-line {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 2px 8px 4px;
  background: #161b22;
  border-top: 1px solid #21262d;
  min-height: 1.25rem;
}

.ca-ln {
  color: #3fb950;
  font-size: 0.58rem;
  font-family: 'Courier New', monospace;
  flex-shrink: 0;
}

#typed-target {
  font-size: 0.58rem;
  font-family: 'Courier New', monospace;
  color: #e6edf3;
  white-space: nowrap;
}

/* Typed.js cursor — blinks only while hovered */
.project-mini-card--coding .typed-cursor {
  color: #58a6ff;
  font-size: 0.65rem;
  animation: typedBlink 0.65s step-end infinite;
}

.project-mini-card--coding:not(:hover) .typed-cursor {
  display: none;
}

@keyframes typedBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* =====================================================
   Puzzle Pieces Animation — project-mini-thumb--puzzle
   Symbolism: assembling pieces = solving client problems
   ===================================================== */

.project-mini-thumb--puzzle {
  background: var(--bg-secondary);
  overflow: hidden;
  padding: 0;
}

.puzzle-anim {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── Piece backgrounds: scattered tint → assembled neutral ── */
/* TL = green (#3ecf8e) */
.pz-bg-tl   { fill: rgba(62, 207, 142, 0.10); animation: pz-bg-tl-color   9s ease-in-out infinite 0s; }
/* TR = blue (#0ea5e9) */
.pz-bg-tr   { fill: rgba(14, 165, 233, 0.10); animation: pz-bg-tr-color   9s ease-in-out infinite 0.28s; }
/* BL = purple (#a855f7) */
.pz-bg-bl   { fill: rgba(168, 85, 247, 0.10); animation: pz-bg-bl-color   9s ease-in-out infinite 0.16s; }
/* BR = amber (#f59e0b) */
.pz-bg-br   { fill: rgba(245, 158, 11, 0.10); animation: pz-bg-br-color   9s ease-in-out infinite 0.44s; }

/* ── Piece outlines: scattered color → assembled white ── */
.pz-outline-tl { stroke: #3ecf8e; animation: pz-stroke-tl 9s ease-in-out infinite 0s; }
.pz-outline-tr { stroke: #0ea5e9; animation: pz-stroke-tr 9s ease-in-out infinite 0.28s; }
.pz-outline-bl { stroke: #a855f7; animation: pz-stroke-bl 9s ease-in-out infinite 0.16s; }
.pz-outline-br { stroke: #f59e0b; animation: pz-stroke-br 9s ease-in-out infinite 0.44s; }

/* ── Detail accents (fill) per piece ── */
.pz-detail-tl { fill: #3ecf8e; animation: pz-detail-tl-color 9s ease-in-out infinite 0s; }
.pz-detail-tr { fill: #0ea5e9; animation: pz-detail-tr-color 9s ease-in-out infinite 0.28s; }
.pz-detail-bl { fill: #a855f7; animation: pz-detail-bl-color 9s ease-in-out infinite 0.16s; }
.pz-detail-br { fill: #f59e0b; animation: pz-detail-br-color 9s ease-in-out infinite 0.44s; }

/* BG color keyframes — converge to faint white when assembled */
@keyframes pz-bg-tl-color {
  0%,  24% { fill: rgba(62,  207, 142, 0.12); }
  30%, 58% { fill: rgba(255, 255, 255, 0.05); }
  64%,100% { fill: rgba(62,  207, 142, 0.12); }
}
@keyframes pz-bg-tr-color {
  0%,  24% { fill: rgba(14,  165, 233, 0.12); }
  30%, 58% { fill: rgba(255, 255, 255, 0.05); }
  64%,100% { fill: rgba(14,  165, 233, 0.12); }
}
@keyframes pz-bg-bl-color {
  0%,  24% { fill: rgba(168,  85, 247, 0.12); }
  30%, 58% { fill: rgba(255, 255, 255, 0.05); }
  64%,100% { fill: rgba(168,  85, 247, 0.12); }
}
@keyframes pz-bg-br-color {
  0%,  24% { fill: rgba(245, 158,  11, 0.12); }
  30%, 58% { fill: rgba(255, 255, 255, 0.05); }
  64%,100% { fill: rgba(245, 158,  11, 0.12); }
}

/* Outline stroke keyframes — all converge to white */
@keyframes pz-stroke-tl {
  0%,  24% { stroke: #3ecf8e; opacity: 0.65; }
  30%, 58% { stroke: #fafafa; opacity: 0.30; }
  64%,100% { stroke: #3ecf8e; opacity: 0.65; }
}
@keyframes pz-stroke-tr {
  0%,  24% { stroke: #0ea5e9; opacity: 0.65; }
  30%, 58% { stroke: #fafafa; opacity: 0.30; }
  64%,100% { stroke: #0ea5e9; opacity: 0.65; }
}
@keyframes pz-stroke-bl {
  0%,  24% { stroke: #a855f7; opacity: 0.65; }
  30%, 58% { stroke: #fafafa; opacity: 0.30; }
  64%,100% { stroke: #a855f7; opacity: 0.65; }
}
@keyframes pz-stroke-br {
  0%,  24% { stroke: #f59e0b; opacity: 0.65; }
  30%, 58% { stroke: #fafafa; opacity: 0.30; }
  64%,100% { stroke: #f59e0b; opacity: 0.65; }
}

/* Detail accent fill keyframes — converge to white */
@keyframes pz-detail-tl-color {
  0%,  24% { fill: #3ecf8e; }
  30%, 58% { fill: #fafafa; }
  64%,100% { fill: #3ecf8e; }
}
@keyframes pz-detail-tr-color {
  0%,  24% { fill: #0ea5e9; }
  30%, 58% { fill: #fafafa; }
  64%,100% { fill: #0ea5e9; }
}
@keyframes pz-detail-bl-color {
  0%,  24% { fill: #a855f7; }
  30%, 58% { fill: #fafafa; }
  64%,100% { fill: #a855f7; }
}
@keyframes pz-detail-br-color {
  0%,  24% { fill: #f59e0b; }
  30%, 58% { fill: #fafafa; }
  64%,100% { fill: #f59e0b; }
}

/* Shared piece defaults */
.pz-piece {
  transform-box: view-box;
  transform-origin: center;
}

/* ── Individual piece fly-in directions ── */
.pz-tl {
  animation: pz-fly-tl 9s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  animation-delay: 0s;
}
.pz-tr {
  animation: pz-fly-tr 9s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  animation-delay: 0.28s;
}
.pz-bl {
  animation: pz-fly-bl 9s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  animation-delay: 0.16s;
}
.pz-br {
  animation: pz-fly-br 9s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  animation-delay: 0.44s;
}

@keyframes pz-fly-tl {
  0%,  6%  { transform: translate(-62px, -52px) rotate(-6deg); opacity: 0; }
  10%      { opacity: 1; }
  26%      { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  62%      { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  78%      { transform: translate(-62px, -52px) rotate(-6deg); opacity: 0; }
  100%     { transform: translate(-62px, -52px) rotate(-6deg); opacity: 0; }
}
@keyframes pz-fly-tr {
  0%,  6%  { transform: translate(62px, -52px) rotate(6deg);  opacity: 0; }
  10%      { opacity: 1; }
  26%      { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  62%      { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  78%      { transform: translate(62px, -52px) rotate(6deg);  opacity: 0; }
  100%     { transform: translate(62px, -52px) rotate(6deg);  opacity: 0; }
}
@keyframes pz-fly-bl {
  0%,  6%  { transform: translate(-62px, 52px) rotate(6deg);  opacity: 0; }
  10%      { opacity: 1; }
  26%      { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  62%      { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  78%      { transform: translate(-62px, 52px) rotate(6deg);  opacity: 0; }
  100%     { transform: translate(-62px, 52px) rotate(6deg);  opacity: 0; }
}
@keyframes pz-fly-br {
  0%,  6%  { transform: translate(62px, 52px) rotate(-6deg); opacity: 0; }
  10%      { opacity: 1; }
  26%      { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  62%      { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  78%      { transform: translate(62px, 52px) rotate(-6deg); opacity: 0; }
  100%     { transform: translate(62px, 52px) rotate(-6deg); opacity: 0; }
}

/* Assembled glow ring — pulses white once locked */
.pz-glow {
  transform-box: view-box;
  transform-origin: center;
  stroke: var(--text-primary);
  animation: pz-glow-pulse 9s ease-in-out infinite;
  animation-delay: 0.5s;
}

@keyframes pz-glow-pulse {
  0%,  28% { opacity: 0; }
  36%      { opacity: 0.55; }
  58%      { opacity: 0.30; }
  68%      { opacity: 0; }
  100%     { opacity: 0; }
}

/* --- Main grid layout --- */
.main-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(10, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  gap: var(--gap-size);
  min-height: 0;
}

/* Card positioning in grid */
.card-hero {
  grid-area: 1 / 1 / 6 / 6;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
  background: linear-gradient(145deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
}

.card-portrait {
  grid-area: 1 / 6 / 6 / 9;
  background-color: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
}

.portrait-image {
  width: 120%;
  height: 120%;
  object-fit: cover;
}

.card-bio {
  grid-area: 6 / 5 / 11 / 9;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  overflow: hidden;
  position: relative;
}

.card-facts {
  grid-area: 6 / 1 / 9 / 5;
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  overflow: hidden;
}

.facts-image-container {
  flex: 0 0 55%;
  background-color: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.facts-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
}

.facts-content {
  flex: 1;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-elevated) 100%);
  color: var(--text-secondary);
}

.facts-text {
  font-size: 1rem;
  line-height: 1.5;
  font-family: system-ui, -apple-system, sans-serif;
  font-weight: 500;
  margin-bottom: auto;
  color: var(--text-primary);
}

.facts-number-container {
  position: relative;
  overflow: hidden;
  height: 6rem;
  margin-bottom: 0;
  padding-bottom: 0.5rem;
}

.facts-number {
  font-size: 4rem;
  font-weight: 700;
  line-height: 1;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--text-primary);
  font-family: system-ui, -apple-system, sans-serif;
}

.facts-nav {
  position: absolute;
  bottom: 1.25rem;
  right: 1.25rem;
  display: flex;
  gap: 0.5rem;
}

.facts-nav-btn {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 6px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-medium);
  color: var(--text-secondary);
}

.facts-nav-btn:hover {
  background: var(--bg-muted);
  border-color: var(--border-hover);
  color: var(--text-primary);
  transform: scale(1.05);
}

.facts-nav-btn:active {
  transform: scale(0.95);
}

.card-contact {
  grid-area: 9 / 1 / 11 / 5;
  background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-card) 100%);
  color: var(--text-primary);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-medium);
  position: relative;
  overflow: hidden;
}

/* faint code-snippet background behind contact card */
.contact-bg-image {
  position: absolute;
  right: 0;
  top: 60%;
  transform: translateY(-50%);
  width: 50%;
  height: 70%;
  object-fit: contain;
  opacity: 0.25;  
  pointer-events: none;
  z-index: 0;
}

/* ensure contact card content sits above the background overlay */
.contact-header,
.contact-footer {
  position: relative;
  z-index: 1;
}

.card-project-feature {
  grid-area: 1 / 9 / 10 / 13;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}

.card-social {
  grid-area: 10 / 9 / 11 / 13;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.card-socials {
  grid-area: 1 / 5 / 6 / 6;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* --- Column 1 Styles --- */
.card-hero h2 {
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.1;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.card-hero h2 em {
  font-family: Georgia, serif; 
  font-style: italic;
  color: var(--accent-primary);
}

/* Hero job title section */
.hero-job-title {
  margin-bottom: 0.75rem;
  flex-shrink: 0;
}

.hero-job-title h2 {
  display: block;
  white-space: normal;
  overflow: hidden;
  height: 2.5em;
  line-height: 1.2;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  -webkit-line-clamp: 2;
}

.typing-text {
  color: var(--text-primary);
  font-style: italic;
  font-weight: 300;
  display: inline;
}

.typing-cursor {
  color: var(--text-primary);
  font-weight: 300;
  animation: blink 1s step-end infinite;
}

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

/* Hero about me section */
.hero-about-me {
  max-width: 700px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 0.5rem;
  scrollbar-width: none;
}

.hero-about-me:hover {
  scrollbar-width: thin;
  scrollbar-color: var(--border-hover) transparent;
}

.hero-about-me::-webkit-scrollbar {
  width: 3px;
  display: none;
}

.hero-about-me:hover::-webkit-scrollbar {
  display: block;
}

.hero-about-me::-webkit-scrollbar-track {
  background: transparent;
}

.hero-about-me::-webkit-scrollbar-thumb {
  background: var(--border-hover);
  border-radius: 99px;
}

.hero-about-me p {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0 0 1.4em 0;
  opacity: 0.9;
}

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

.card-top-icon {
  margin-bottom: auto; 
  color: var(--text-tertiary);
}

.tree-icon {
  margin-bottom: 1rem;
}

.card-bio p,
.card-facts p {
  font-size: 0.875rem;
  line-height: 1.6;
  opacity: 0.8;
  margin: 0;
  font-family: sans-serif;
  max-width: 90%;
}

/* =============================================
   BIO CARD — Specialties + Tech Stack
   ============================================= */

/* ensure inner content sits above the background overlay */
.card-bio > * {
  position: relative;
  z-index: 1;
}

/* -- Specialty tiles row -- */
.bio-specialties {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.55rem;
  flex: 0 0 auto;
}

.specialty-tile {
  position: relative;
  background: var(--black-card);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 0.9rem 0.9rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  overflow: hidden;
  cursor: default;
  transition: border-color 0.3s ease, background 0.3s ease;
}

.specialty-tile:hover {
  background: var(--black-card-hover);
  border-color: var(--border-medium);
}

/* icon + title row */
.specialty-header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.25rem;
}

.specialty-header > i {
  font-size: 1.55rem;
  color: var(--white-high);
  flex-shrink: 0;
}

.specialty-name {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* First line — bold white with colored underline */
.specialty-accent {
  font-family: sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--white);
  line-height: 1.2;
}

.specialty-tile[data-color="lang"] .specialty-accent {
  text-decoration: underline;
  text-decoration-color: var(--accent-purple);
  text-decoration-thickness: 2.5px;
  text-underline-offset: 3px;
}

.specialty-tile[data-color="fw"] .specialty-accent {
  text-decoration: underline;
  text-decoration-color: var(--accent-blue);
  text-decoration-thickness: 2.5px;
  text-underline-offset: 3px;
}

.specialty-tile[data-color="design"] .specialty-accent {
  text-decoration: underline;
  text-decoration-color: var(--accent-orange);
  text-decoration-thickness: 2.5px;
  text-underline-offset: 3px;
}

/* Second line — dimmer subtitle */
.specialty-subtitle {
  font-family: sans-serif;
  font-size: 0.8rem;
  color: var(--white-medium);
  line-height: 1.2;
}

/* HTML tag labels */
.html-tag {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.67rem;
  color: var(--white-low);
  line-height: 1;
}

/* Code-style description block */
.specialty-body {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.67rem;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.6;
  border-left: 2px solid rgba(255, 255, 255, 0)
}

/* =============================================
   Stronger dark theme — Mechanical Engineering
   ============================================= */

.project-mini-card--blueprint {
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-base, #0a0a0a) 100%);
  border-color: var(--border-default);
}

.project-mini-card--blueprint:hover {
  background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-card) 100%);
  border-color: var(--border-hover);
}

.project-mini-card--blueprint .project-mini-thumb--blueprint {
  position: relative;
  background:
    radial-gradient(circle at 50% 44%, rgba(255, 255, 255, 0.06) 0%, rgba(20, 20, 20, 0.72) 36%, rgba(8, 8, 8, 0.96) 74%, #000000 100%);
  box-shadow:
    inset 0 0 0 1px rgba(40, 84, 134, 0.22),
    inset 0 -24px 40px rgba(0, 0, 0, 0.72),
    inset 0 18px 32px rgba(0, 0, 0, 0.34);
}

.project-mini-card--blueprint .project-mini-thumb--blueprint::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0.08) 28%, rgba(0, 0, 0, 0.28) 70%, rgba(0, 0, 0, 0.54) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0) 18%, rgba(0, 0, 0, 0) 82%, rgba(0, 0, 0, 0.28) 100%);
}

.project-mini-card--blueprint .blueprint-anim {
  filter: saturate(0.82) brightness(0.82) contrast(1.08);
}

.project-mini-card--blueprint .project-mini-footer {
  background: linear-gradient(180deg, #111111 0%, #080808 100%);
  border-top-color: var(--border-default);
  color: var(--text-secondary);
}

.project-mini-card--blueprint .project-mini-footer > i {
  color: var(--text-tertiary);
}

.project-mini-card--blueprint:hover .project-mini-footer {
  border-top-color: var(--border-hover);
  color: var(--text-primary);
}

.project-mini-card--blueprint:hover .project-mini-footer > i {
  color: var(--text-secondary);
}

/* =============================================
   PROJECTS MODAL — split panel layout
   ============================================= */

.pm-shell {
  position: relative;
  display: flex;
  width: 94vw;
  max-width: 1320px;
  height: 88vh;
  max-height: 900px;
  border-radius: 18px;
  overflow: hidden;
  background: #111111;
  border: 2px solid rgba(255, 255, 255, 0.15);
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.8),
    0 0 60px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  animation: pmSlideIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 1;
}

@keyframes pmSlideIn {
  from { transform: translateY(24px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

/* Close button */
.pm-close {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 10;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  font-size: 1.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  line-height: 1;
}

.pm-close:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--border-hover);
  color: var(--text-primary);
  transform: rotate(90deg);
}

/* ---- Left Sidebar ---- */
.pm-sidebar {
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  background: #0d0d0d;
  overflow: hidden;
}

.pm-sidebar-header {
  padding: 1.25rem 1.5rem 1rem;
  border-bottom: 1px solid var(--border-subtle);
}

.pm-sidebar-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  font-weight: 600;
}

.pm-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
}

.pm-list::-webkit-scrollbar { width: 4px; }
.pm-list::-webkit-scrollbar-track { background: transparent; }
.pm-list::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: 99px; }

/* Single project item in sidebar */
.pm-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.18s ease;
  border: 1px solid transparent;
  margin-bottom: 2px;
}

.pm-item:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-subtle);
}

.pm-item.active {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--border-hover);
}

.pm-item-icon {
  flex: 0 0 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: #fff;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  transition: all 0.2s ease;
}

.pm-item.active .pm-item-icon {
  border-color: var(--border-hover);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.08);
}

.pm-item-icon.icon-green  { background: rgba(62, 207, 142, 0.15); color: #3ecf8e; }
.pm-item-icon.icon-blue   { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.pm-item-icon.icon-purple { background: rgba(168, 85, 247, 0.15); color: #a855f7; }
.pm-item-icon.icon-orange { background: rgba(249, 115, 22, 0.15); color: #f97316; }
.pm-item-icon.icon-pink   { background: rgba(236, 72, 153, 0.15); color: #ec4899; }
.pm-item-icon.icon-cyan   { background: rgba(6, 182, 212, 0.15); color: #06b6d4; }

.pm-item-info {
  flex: 1;
  min-width: 0;
}

.pm-item-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.18s ease;
}

.pm-item.active .pm-item-name,
.pm-item:hover .pm-item-name {
  color: var(--text-primary);
}

.pm-item-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.pm-item-arrow {
  flex: 0 0 auto;
  font-size: 0.65rem;
  color: var(--text-muted);
  opacity: 0;
  transform: translateX(-4px);
  transition: all 0.18s ease;
}

.pm-item:hover .pm-item-arrow,
.pm-item.active .pm-item-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* Category divider */
.pm-category {
  padding: 0.85rem 1rem 0.4rem;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  font-weight: 600;
}

.pm-category:not(:first-child) {
  margin-top: 0.5rem;
  border-top: 1px solid var(--border-subtle);
  padding-top: 1rem;
}

/* ---- Right Detail Panel ---- */
.pm-detail {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  position: relative;
  background: var(--bg-secondary);
}

.pm-detail::-webkit-scrollbar { width: 5px; }
.pm-detail::-webkit-scrollbar-track { background: transparent; }
.pm-detail::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: 99px; }

/* Empty state */
.pm-detail-empty {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: var(--text-muted);
}

.pm-detail-empty i {
  font-size: 2rem;
  opacity: 0.3;
  animation: pmBounceLeft 2s ease-in-out infinite;
}

@keyframes pmBounceLeft {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-8px); }
}

.pm-detail-empty p {
  font-size: 0.92rem;
}

/* Detail content wrapper */
.pm-detail-content {
  animation: pmFadeIn 0.35s ease;
}

@keyframes pmFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Showcase / Hero image */
.pm-showcase {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
  background: var(--bg-tertiary);
}

.pm-showcase-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pm-showcase-illustration {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
}

.pm-showcase-illustration::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.06) 0%, transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(255, 255, 255, 0.04) 0%, transparent 50%);
  pointer-events: none;
}

.pm-showcase-illustration svg {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
}

.pm-illu-float {
  animation: pmIlluFloat 6s ease-in-out infinite;
  transform-origin: center;
}

.pm-illu-float--slow {
  animation: pmIlluFloat 9s ease-in-out infinite;
}

.pm-illu-spin {
  animation: pmIlluSpin 18s linear infinite;
  transform-origin: center;
  transform-box: fill-box;
}

.pm-illu-spin--rev {
  animation: pmIlluSpin 24s linear infinite reverse;
  transform-origin: center;
  transform-box: fill-box;
}

.pm-illu-pulse {
  animation: pmIlluPulse 3.6s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}

@keyframes pmIlluFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes pmIlluSpin {
  to { transform: rotate(360deg); }
}

@keyframes pmIlluPulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

.pm-showcase-gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(transparent, var(--bg-secondary));
  pointer-events: none;
}

/* Status badge overlay */
.pm-status {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 99px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.pm-status--live        { background: rgba(62, 207, 142, 0.2); color: #3ecf8e; }
.pm-status--wip         { background: rgba(249, 115, 22, 0.2); color: #f97316; }
.pm-status--archived    { background: rgba(113, 113, 122, 0.2); color: #a1a1aa; }
.pm-status--private     { background: rgba(168, 85, 247, 0.2); color: #a855f7; }

.pm-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.pm-status--live .pm-status-dot {
  animation: pmPulse 2s ease-in-out infinite;
}

@keyframes pmPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Body section */
.pm-body {
  padding: 1.5rem 2rem 2rem;
}

.pm-title {
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.25rem;
  letter-spacing: -0.02em;
}

.pm-subtitle {
  font-size: 0.88rem;
  color: var(--text-tertiary);
  margin: 0 0 1.5rem;
}

/* Description */
.pm-desc {
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 1.75rem;
}

/* Section headings */
.pm-section-title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  font-weight: 600;
  margin: 0 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-subtle);
}

/* Tech stack pills */
.pm-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 1.75rem;
}

.pm-stack-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 500;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  transition: all 0.2s ease;
}

.pm-stack-pill:hover {
  border-color: var(--border-hover);
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.pm-stack-pill i {
  font-size: 0.82rem;
  opacity: 0.7;
}

/* Key features list */
.pm-features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.75rem;
}

.pm-features li {
  position: relative;
  padding: 0.5rem 0 0.5rem 1.5rem;
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

.pm-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.85rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-primary);
  opacity: 0.6;
}

.pm-features li + li {
  border-top: 1px solid var(--border-subtle);
}

/* Links / Actions */
.pm-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
}

.pm-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
}

.pm-link--primary {
  background: var(--text-primary);
  color: var(--bg-primary);
  border: 1px solid transparent;
}

.pm-link--primary:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
  border-color: var(--border-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.pm-link--secondary {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
}

.pm-link--secondary:hover {
  border-color: var(--border-hover);
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.04);
  transform: translateY(-1px);
}

/* Metadata grid */
.pm-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 1.75rem;
}

.pm-meta-item {
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
}

.pm-meta-label {
  display: block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 4px;
  font-weight: 600;
}

.pm-meta-value {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
}

.pm-case-study {
  display: flex;
  flex-direction: column;
}

.pm-case-hero-body {
  padding-bottom: 0.5rem;
}

.pm-case-meta-block {
  margin-bottom: 1rem;
}

.pm-case-section {
  padding: 0 2rem 2rem;
}

.pm-case-section + .pm-case-section {
  padding-top: 0.25rem;
}

.pm-case-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-subtle);
}

.pm-case-section-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  font-weight: 700;
}

.pm-case-section-index {
  font-size: 0.78rem;
  color: var(--text-tertiary);
  letter-spacing: 0.08em;
}

.pm-case-brief {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--border-subtle);
}

.pm-case-brief-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 1.25rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border-subtle);
}

.pm-case-brief-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-primary);
}

.pm-case-brief-content {
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--text-secondary);
}

.pm-case-brief-content strong {
  color: var(--text-primary);
  font-weight: 700;
}

.pm-case-walkthrough {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.pm-case-tabs {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.pm-case-tab {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  padding: 0.9rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.pm-case-tab:hover {
  border-color: var(--border-hover);
  background: var(--bg-elevated);
  color: var(--text-primary);
  transform: translateX(4px);
}

.pm-case-tab.active {
  border-color: rgba(62, 207, 142, 0.4);
  background: rgba(62, 207, 142, 0.08);
  color: var(--text-primary);
  box-shadow: inset 0 0 0 1px rgba(62, 207, 142, 0.12);
}

.pm-case-tab-index {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  flex: 0 0 auto;
}

.pm-case-tab-label {
  font-size: 0.84rem;
  font-weight: 600;
}

.pm-case-stage {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.pm-case-stage-media {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: #05070a;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.pm-case-stage-image {
  width: 100%;
  max-height: 600px;
  display: block;
  object-fit: contain;
}

.pm-case-stage-copy {
  display: grid;
  gap: 0.5rem;
}

.pm-case-stage-caption {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--text-primary);
}

.pm-case-stage-note {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.65;
  color: var(--text-tertiary);
}

.pm-case-specs {
  display: grid;
  border-top: 1px solid var(--border-subtle);
}

.pm-case-spec-row {
  display: grid;
  grid-template-columns: 72px 160px minmax(0, 1fr);
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border-subtle);
  align-items: start;
}

.pm-case-spec-index {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}

.pm-case-spec-key {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.pm-case-spec-value {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.pm-case-outcomes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.pm-case-outcome {
  padding: 1.2rem;
  border-radius: 16px;
  border: 1px solid var(--border-subtle);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
}

.pm-case-outcome-number {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.15rem;
  margin-bottom: 0.85rem;
  color: var(--text-primary);
}

.pm-case-outcome-number span {
  font-size: 2rem;
  font-weight: 700;
  line-height: 0.9;
}

.pm-case-outcome-number small {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text-tertiary);
}

.pm-case-outcome-label {
  margin: 0 0 0.5rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pm-case-outcome-desc {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.pm-case-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 2rem 2rem;
  margin-top: -0.25rem;
}

.pm-case-footer-meta {
  font-size: 0.84rem;
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
}

.pm-case-footer-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Screenshots carousel */
.pm-screenshots {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 1.75rem;
  scroll-snap-type: x mandatory;
}

.pm-screenshots::-webkit-scrollbar { height: 4px; }
.pm-screenshots::-webkit-scrollbar-track { background: transparent; }
.pm-screenshots::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: 99px; }

.pm-screenshot {
  flex: 0 0 auto;
  width: 240px;
  height: 150px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  scroll-snap-align: start;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.pm-screenshot:hover {
  border-color: var(--border-hover);
  transform: scale(1.02);
}

.pm-screenshot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Showcase placeholder (no image) */
.pm-showcase-placeholder {
  width: 100%;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.5rem;
  background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-elevated) 100%);
  position: relative;
  overflow: hidden;
}

.pm-showcase-placeholder::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 50%, rgba(62, 207, 142, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(59, 130, 246, 0.08) 0%, transparent 50%);
}

/* Responsive: collapse sidebar on narrow viewports */
@media (max-width: 700px) {
  .pm-shell {
    flex-direction: column;
    height: 90vh;
    max-height: none;
    width: 95vw;
  }

  .pm-sidebar {
    flex: 0 0 auto;
    max-height: 200px;
    border-right: none;
    border-bottom: 1px solid var(--border-default);
  }

  .pm-detail {
    flex: 1;
  }

  .pm-case-section,
  .pm-case-footer,
  .pm-body {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .pm-case-walkthrough {
    grid-template-columns: 1fr;
  }

  .pm-case-tabs {
    overflow-x: auto;
    flex-direction: row;
    padding-bottom: 0.25rem;
  }

  .pm-case-tab {
    min-width: 180px;
    transform: none;
  }

  .pm-case-tab:hover {
    transform: translateY(-2px);
  }

  .pm-case-brief-row,
  .pm-case-spec-row {
    grid-template-columns: 1fr;
  }

  .pm-case-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .pm-case-footer-actions {
    justify-content: flex-start;
  }

  .pm-case-outcomes {
    grid-template-columns: 1fr;
  }
}

/* ======================================================
   Engineering Project — Extended Detail Styles
   ====================================================== */

/* Overview highlights grid */
.pm-eng-highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin-bottom: 1.75rem;
}

.pm-eng-highlight {
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  transition: border-color 0.2s ease;
}

.pm-eng-highlight:hover {
  border-color: var(--border-hover);
}

.pm-eng-highlight-label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-primary);
  font-weight: 700;
  margin-bottom: 4px;
}

.pm-eng-highlight-value {
  font-size: 0.84rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Project Timeline */
.pm-eng-timeline {
  position: relative;
  padding-left: 28px;
  margin-bottom: 1.75rem;
}

.pm-eng-timeline::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--border-subtle);
  border-radius: 2px;
}

.pm-eng-tl-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 20px;
}

.pm-eng-tl-item:last-child {
  padding-bottom: 0;
}

.pm-eng-tl-icon {
  position: absolute;
  left: -28px;
  top: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 2px solid var(--accent-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.pm-eng-tl-icon i {
  font-size: 0.55rem;
  color: var(--accent-primary);
}

.pm-eng-tl-content {
  flex: 1;
  padding-top: 1px;
}

.pm-eng-tl-weeks {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-primary);
  background: rgba(62, 207, 142, 0.1);
  padding: 2px 10px;
  border-radius: 99px;
  margin-bottom: 4px;
}

.pm-eng-tl-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 4px 0 2px;
}

.pm-eng-tl-desc {
  font-size: 0.82rem;
  color: var(--text-tertiary);
  line-height: 1.55;
  margin: 0;
}

/* Design sections with images */
.pm-eng-design-text {
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin-bottom: 1rem;
}

.pm-eng-design-images {
  display: grid;
  gap: 10px;
  margin-bottom: 1.75rem;
}

.pm-eng-design-images--one {
  grid-template-columns: 1fr;
}

.pm-eng-design-images--two {
  grid-template-columns: repeat(2, 1fr);
}

.pm-eng-design-images--three {
  grid-template-columns: repeat(3, 1fr);
}

.pm-eng-design-img {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: var(--bg-tertiary);
  transition: border-color 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}

.pm-eng-design-img:hover {
  border-color: var(--border-hover);
  transform: scale(1.02);
}

.pm-eng-design-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Image gallery / carousel */
.pm-eng-gallery {
  position: relative;
  width: 100%;
  margin-bottom: 1.75rem;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: var(--bg-tertiary);
}

.pm-eng-gallery-track {
  display: flex;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.pm-eng-gallery-item {
  flex: 0 0 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.pm-eng-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  display: block;
}

.pm-eng-gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-default);
  background: rgba(13, 17, 23, 0.85);
  backdrop-filter: blur(8px);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  transition: all 0.2s ease;
}

.pm-eng-gallery-nav:hover {
  border-color: var(--border-hover);
  color: var(--text-primary);
  background: rgba(13, 17, 23, 0.95);
}

.pm-eng-gallery-prev { left: 12px; }
.pm-eng-gallery-next { right: 12px; }

.pm-eng-gallery-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 10px 0;
  background: var(--bg-tertiary);
}

.pm-eng-gallery-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--border-default);
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}

.pm-eng-gallery-dot:hover {
  border-color: var(--text-tertiary);
}

.pm-eng-gallery-dot.active {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
}

/* Responsive: stack design images on small viewports */
@media (max-width: 700px) {
  .pm-eng-design-images--two,
  .pm-eng-design-images--three {
    grid-template-columns: 1fr;
  }

  .pm-eng-highlights {
    grid-template-columns: 1fr;
  }
}

/* Engineering image lightbox */
.pm-eng-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.pm-eng-lightbox.active {
  opacity: 1;
  pointer-events: auto;
}

.pm-eng-lightbox-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(12px);
}

.pm-eng-lightbox-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  z-index: 1;
}

.pm-eng-lightbox-content img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
}

.pm-eng-lightbox-close {
  position: absolute;
  top: -40px;
  right: -4px;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.pm-eng-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.4);
}

/* ============================================================
   RESPONSIVE — Tablet & Mobile
   Desktop keeps the fixed fullscreen grid. At <=1024px we
   release the viewport lock, let the page scroll, and stack
   every card into a single vertical column. The timeline turns
   into a tap-to-expand accordion (no hover dependency on touch).
============================================================ */

/* ---------- TABLET & MOBILE shared (<=1024px) ---------- */
@media (max-width: 1024px) {
  /* Release the fixed-viewport lock so content can flow & scroll */
  body {
    width: 100%;
    height: auto;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    display: block;
  }

  .fullscreen {
    height: auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    box-sizing: border-box;
  }

  /* Title bar fluid down */
  .card-title-bar {
    min-height: auto;
  }
  .card-title-bar h1 {
    font-size: min(5rem, calc(100vw / 7.5));
    line-height: 1;
    white-space: normal;
    text-align: center;
  }
  /* Stack first / last name onto two lines */
  .card-title-bar h1 .title-first,
  .card-title-bar h1 .title-last {
    display: block;
  }
  .card-title-bar h1 .title-first {
    margin-right: 0;
  }

  /* Content wrapper: timeline on top, cards below */
  .content-wrapper {
    flex-direction: column;
    padding: 0;
    gap: 1.25rem;
  }

  /* Main grid -> single stacked column */
  .main-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  /* Card stacking order:
     picture -> description -> projects -> skills -> facts -> contact -> links
     (timeline already sits above .main-grid in the content wrapper) */
  .card-portrait        { order: 1; }
  .card-hero            { order: 2; }
  .card-project-feature { order: 3; }
  .card-bio             { order: 4; }
  .card-facts           { order: 5; }
  .card-contact         { order: 6; }
  .card-social          { order: 7; }

  /* Every card spans full width, auto height, no grid-area constraint */
  .main-grid > .card {
    grid-area: auto !important;
    width: 100%;
  }

  /* Cards animate in once but should be visible even if JS/anim is skipped */
  .main-grid > .card {
    opacity: 1;
    animation: fadeInUp 0.6s ease both;
  }

  /* Per-card sizing in the stack */
  .card-hero {
    min-height: auto;
  }
  .hero-about-me {
    overflow-y: visible;   /* let the bio flow naturally on mobile */
    max-width: none;
  }

  .card-portrait {
    min-height: 320px;
    max-height: 70vh;
    aspect-ratio: 4 / 5;
  }
  .portrait-image {
    width: 100%;
    height: 100%;
  }

  .card-bio {
    min-height: auto;
    overflow: visible;
  }
  .bio-tags {
    overflow: visible;   /* don't clip skill tags when stacked */
  }

  .card-facts {
    min-height: 220px;
  }

  .card-contact {
    min-height: 180px;
  }

  .card-project-feature {
    min-height: auto;   /* height comes from the cards inside */
  }
  .project-cards {
    gap: 0.85rem;
    flex: none;         /* don't stretch to a (nonexistent) parent height */
  }
  /* Fix each mini card to a set height so the scrolling code / SVG
     animations are clipped instead of stretching the card */
  .project-mini-card {
    flex: 0 0 auto;
    height: 200px;
    min-height: 0;
  }
  .project-mini-thumb {
    flex: 1 1 auto;
    min-height: 0;
  }

  .card-social {
    min-height: 80px;
  }

  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ----- TIMELINE -> vertical tap-to-expand accordion ----- */
  .timeline-rail {
    width: 100%;
    flex-shrink: 0;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding: 0.5rem 0 0.5rem 0;
    gap: 0.4rem;
  }

  /* Vertical rail line, pinned to the left under the dots */
  .tl-track {
    left: 6px;
    top: 1.25rem;
    bottom: 1.25rem;
    right: auto;
    width: 2px;
    height: auto;
    transform: none;
    background: rgba(255, 255, 255, 0.18);
  }
  .tl-track::after { display: none; }

  /* Each node is a full-width row: dot on the left, card to the right */
  .tl-node {
    width: 100%;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.85rem;
    padding-left: 2px;
    cursor: pointer;          /* tappable */
  }

  .tl-dot-wrap {
    margin-top: 0.55rem;
  }

  /* Card becomes an inline, always-laid-out block (collapsed by default) */
  .tl-card {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
    transform: none;
    opacity: 1;
    clip-path: none;
    pointer-events: auto;
    border-radius: 10px;
    border-left-width: 2px;
    backdrop-filter: none;
    background: linear-gradient(148deg, rgba(28,28,28,0.96) 0%, rgba(14,14,14,0.96) 100%);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
    /* Collapsed: card sizes to its header; body is removed from flow
       (no clipping — the title can wrap to any number of lines) */
    overflow: visible;
    padding: 0.7rem 1rem;
  }
  .tl-card::after { display: none; }   /* kill the hover shimmer */

  /* Collapsed: hide the body entirely so nothing is clipped */
  .tl-card-line,
  .tl-desc,
  .tl-list,
  .tl-tags {
    display: none;
  }

  /* A chevron affordance via the title row */
  .tl-title {
    position: relative;
    padding-right: 1.5rem;
    margin-bottom: 0;
  }
  .tl-title::after {
    content: '\f078';   /* fa chevron-down */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: 0;
    top: 0.15rem;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
    transition: transform 0.35s ease;
  }

  /* Expanded state (toggled by JS via .tl-node--open) */
  .tl-node--open .tl-card {
    padding-bottom: 0.85rem;
  }
  .tl-node--open .tl-card-line {
    display: block;
    margin-top: 0.4rem;
  }
  .tl-node--open .tl-desc {
    display: block;
  }
  .tl-node--open .tl-list {
    display: block;
  }
  .tl-node--open .tl-tags {
    display: flex;
  }
  .tl-node--open .tl-title {
    margin-bottom: 0.32rem;
  }
  .tl-node--open .tl-title::after {
    transform: rotate(180deg);
  }

  /* Disable the desktop hover-reveal & background-blur on touch layout */
  .tl-node:hover .tl-card {
    clip-path: none;
    transform: none;
  }
  .content-wrapper:has(.tl-node:hover) .main-grid,
  .fullscreen:has(.tl-node:hover) .card-title-bar {
    filter: none;
    opacity: 1;
  }

  .tl-list {
    margin: 0.4rem 0 0;
    padding-left: 1.1rem;
  }
  .tl-list li {
    font-size: 0.82rem;
    line-height: 1.55;
    margin-bottom: 0.4rem;
    color: rgba(255, 255, 255, 0.6);
  }

  /* ----- PROJECTS MODAL -> stacked, near full-screen ----- */
  .pm-shell {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    flex-direction: column;
    border: none;
  }

  .pm-sidebar {
    flex: 0 0 auto;
    max-height: 38vh;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .pm-list {
    /* horizontal-friendly but still scroll vertically; keep simple list */
    padding: 0.5rem 0.75rem;
  }
  .pm-detail {
    flex: 1 1 auto;
    min-height: 0;
  }
  .pm-close {
    top: 10px;
    right: 10px;
  }
}

/* ---------- MOBILE refinements (<=768px) ---------- */
@media (max-width: 768px) {
  .fullscreen {
    gap: 0.85rem;
    padding: 0.75rem;
  }

  .card-title-bar h1 {
    font-size: min(3.25rem, calc(100vw / 6.5));
  }

  /* Facts card: stack image over text instead of side-by-side */
  .card-facts {
    flex-direction: column;
    min-height: auto;
  }
  .facts-image-container {
    flex: 0 0 180px;
    width: 100%;
  }
  .facts-content {
    flex: 1 1 auto;
  }
  .facts-number-container {
    height: 4.5rem;
  }
  .facts-number {
    font-size: 3rem;
  }

  /* Bio specialties: 1 column so text isn't cramped */
  .bio-specialties {
    grid-template-columns: 1fr;
  }

  /* Tech-stack filter buttons wrap nicely */
  .bio-stack-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    padding-bottom: 0.75rem;
  }
  .stack-filters {
    flex-wrap: wrap;
  }

  .card-portrait {
    aspect-ratio: 1 / 1;
    max-height: 60vh;
  }

  .card-project-feature {
    min-height: 480px;
  }

  /* Contact modal: tighter padding & full-bleed on phones */
  .modal-content {
    width: 94%;
    padding: 1.75rem 1.25rem;
    max-height: 88vh;
  }
  .modal-title {
    font-size: 1.6rem;
    margin-bottom: 1.25rem;
  }
  .form-group {
    margin-bottom: 1.1rem;
  }
  .form-group textarea {
    min-height: 110px;
  }

  .pm-sidebar {
    max-height: 34vh;
  }
}

/* ---------- SMALL PHONES (<=480px) ---------- */
@media (max-width: 480px) {
  .fullscreen {
    padding: 0.6rem;
  }
  .card-title-bar h1 {
    font-size: min(2.5rem, calc(100vw / 6.2));
    letter-spacing: -0.03em;
  }
  .card-hero {
    padding: 1.1rem;
  }
  .hero-job-title h2 {
    height: auto;
  }
  .card-bio,
  .card-contact {
    padding: 1.1rem;
  }
  .tl-card {
    padding: 0.65rem 0.85rem;
  }
  .tl-title {
    font-size: 0.98rem;
  }
  .modal-content {
    padding: 1.4rem 1rem;
  }
  .submit-btn {
    font-size: 0.95rem;
    padding: 0.9rem 1.25rem;
  }
}