/* ── Variables ─────────────────────────────────────────────────── */
:root {
  --sage:          #C8D5B9;
  --forest:        #4A7C59;
  --forest-d:      #3a6347;
  --cream:         #FAF7F0;
  --ink:           #1A1A1A;
  --gray1:         #D8D3CA;
  --gray2:         #BDB8AF;
  --gray3:         #8A857C;
  --dot-red:       #CC3300;
  --dot-yellow:    #D4A017;
  --dot-green:     #5BAD72;
  --term-green:    #7AC47F;
  --shadow:        4px 4px 0 var(--ink);
  --font-head:     'Press Start 2P', monospace;
  --font-body:     'Share Tech Mono', 'Courier New', monospace;
  --nav-h:         44px;
}

/* ── Reset ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Base ──────────────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
}
body {
  font-family: var(--font-body);
  background: var(--sage);
  color: var(--ink);
  overflow-x: hidden;
}

/* ── Navbar ────────────────────────────────────────────────────── */
#menubar {
  position: sticky;
  top: 0;
  z-index: 200;
  height: var(--nav-h);
  background: var(--cream);
  border-bottom: 2px solid var(--forest);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
}

.nav-logo {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--forest);
  text-decoration: none;
  letter-spacing: 0.04em;
  white-space: nowrap;
  font-weight: bold;
}
#logo-cmd {
  cursor: pointer;
  transition: color 0.1s;
  display: inline-block;
}
#logo-cmd:hover {
  color: var(--dot-red);
}

.nav-links {
  display: flex;
  gap: 4px;
  align-items: center;
}
.nav-links a {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  padding: 5px 12px;
  border: 2px solid transparent;
  transition: border-color 0.1s, background 0.1s;
  white-space: nowrap;
}
.nav-links a:hover {
  border-color: var(--ink);
  background: var(--gray1);
}
.nav-links a:active {
  box-shadow: inset 2px 2px 0 rgba(0,0,0,0.25);
}
.nav-links a[data-active] {
  border-color: var(--forest);
  color: var(--forest);
}

/* ── Language switcher ─────────────────────────────────────── */
.lang-switch {
  display: flex;
  gap: 2px;
  align-items: center;
  flex-shrink: 0;
  margin-left: 8px;
}
.lang-btn {
  font-family: var(--font-body);
  font-size: 11px;
  padding: 4px 8px;
  border: 1.5px solid var(--ink);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  letter-spacing: 0.05em;
  line-height: 1;
  transition: background 0.1s, color 0.1s;
}
.lang-btn:hover { background: var(--gray1); }
.lang-btn.active { background: var(--ink); color: var(--cream); }

/* ── Container ─────────────────────────────────────────────────── */
.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Hero ──────────────────────────────────────────────────────── */
#hero {
  border-bottom: 3px solid var(--forest);
  padding: 60px 24px;
  text-align: center;
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero-eyebrow {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--forest);
  letter-spacing: 0.12em;
  margin-bottom: 20px;
}
.hero-name {
  font-family: var(--font-head);
  font-size: clamp(18px, 4vw, 34px);
  color: var(--ink);
  line-height: 1.7;
  margin-bottom: 22px;
}
.hero-role {
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--forest);
  letter-spacing: 0.06em;
  margin-bottom: 18px;
}
.hero-tagline {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--gray3);
  margin-bottom: 40px;
}
.hero-cta {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-pixel {
  font-family: var(--font-body);
  font-size: 14px;
  text-decoration: none;
  padding: 14px 28px;
  border: 2px solid var(--ink);
  background: var(--forest);
  color: var(--cream);
  box-shadow: 3px 3px 0 var(--ink);
  display: inline-block;
  transition: box-shadow 0.08s, transform 0.08s;
  letter-spacing: 0.04em;
}
.btn-pixel:hover {
  box-shadow: 1px 1px 0 var(--ink);
  transform: translate(2px, 2px);
}
.btn-pixel:active {
  box-shadow: none;
  transform: translate(3px, 3px);
}
.btn-pixel.outline {
  background: transparent;
  color: var(--ink);
}
.btn-pixel.outline:hover { background: var(--gray1); }

/* ── Section spacing ───────────────────────────────────────────── */
.section { padding: 24px 0; margin-bottom: 0; }

/* ── Section separator ─────────────────────────────────────────── */
.section-sep {
  border: none;
  border-top: 2px dashed #4A7C59;
  opacity: 0.3;
  max-width: 900px;
  margin: 0 auto 12px;
}

/* ── Hero terminal line ────────────────────────────────────────── */
.hero-terminal {
  margin-top: 28px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--forest);
  letter-spacing: 0.04em;
  opacity: 0.8;
}
.h-cursor {
  display: inline-block;
  width: 9px; height: 15px;
  background: var(--forest);
  vertical-align: text-bottom;
  margin-left: 2px;
  animation: blink 1s step-end infinite;
}

/* ── Win-card ──────────────────────────────────────────────────── */
.win-card {
  border: 3px solid var(--ink);
  box-shadow: var(--shadow);
  background: var(--cream);
  display: flex;
  flex-direction: column;
}

/* ── Title bar ─────────────────────────────────────────────────── */
.title-bar {
  background: repeating-linear-gradient(
    0deg,
    var(--forest)   0px, var(--forest)   1px,
    var(--forest-d) 1px, var(--forest-d) 3px
  );
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  border-bottom: 2px solid var(--ink);
  flex-shrink: 0;
  position: relative;
}
.dots {
  display: flex;
  gap: 6px;
  align-items: center;
  z-index: 1;
}
.dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,0.35);
  flex-shrink: 0;
}
.dot.red    { background: #CC3300 !important; }
.dot.yellow { background: var(--dot-yellow); }
.dot.green  { background: var(--dot-green); }

/* Close-dot glow animation */
@keyframes dotPulse {
  0%   { box-shadow: 0 0 0 0px rgba(204,51,0,0.4); }
  50%  { box-shadow: 0 0 12px 3px rgba(204,51,0,0.6); }
  100% { box-shadow: 0 0 0 0px rgba(204,51,0,0.4); }
}

.dot.red[role="button"] {
  cursor: pointer;
  position: relative;
  transition: filter 0.1s, box-shadow 0.1s;
  animation: dotPulse 2s infinite ease-in-out;
  box-shadow: 0 0 4px rgba(204,51,0,0.4);
}
.dot.red[role="button"]::after {
  content: '×';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  color: rgba(0,0,0,0.7);
  opacity: 1; /* Always visible for accessibility */
  transition: opacity 0.12s;
  pointer-events: none;
}
.dot.red[role="button"]:hover {
  filter: brightness(1.1);
  box-shadow: 0 0 10px 3px rgba(204,51,0,0.8);
  animation-play-state: paused;
}

/* game window uses data-action="quit" */
.game-window .title-bar .dot.red {
  position: relative;
  transition: filter 0.1s;
  animation: dotPulse 2s infinite ease-in-out;
}
.game-window .title-bar .dot.red::after {
  content: '×';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  color: rgba(0,0,0,0.7);
  opacity: 1; /* Always visible */
  transition: opacity 0.12s;
  pointer-events: none;
}
.game-window .title-bar .dot.red:hover { 
  filter: brightness(1.1);
  animation-play-state: paused;
}

.title-text {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  font-family: var(--font-head);
  font-size: 11px;
  color: var(--cream);
  background: var(--forest);
  padding: 3px 12px;
  border: 1.5px solid rgba(0,0,0,0.25);
  white-space: nowrap;
  letter-spacing: 0.05em;
  max-width: calc(100% - 80px); /* Prevent overlap with dots */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Toolbar ───────────────────────────────────────────────────── */
.toolbar {
  background: var(--gray1);
  border-bottom: 2px solid var(--ink);
  padding: 4px 10px;
  font-size: 9px;
  font-family: var(--font-body);
  display: flex;
  gap: 20px;
  flex-shrink: 0;
}

/* ── Win body ──────────────────────────────────────────────────── */
.win-body { padding: 28px; }

/* ── About ─────────────────────────────────────────────────────── */
.about-layout {
  display: grid;
  grid-template-columns: 28% 1fr;
  gap: 40px;
  align-items: start;
}
.about-left {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.about-right { min-width: 0; }

.pixel-avatar {
  flex-shrink: 0;
  width: 90px; height: 90px;
  border: 3px solid var(--ink);
  background: var(--forest);
  image-rendering: pixelated;
  position: relative;
  overflow: hidden;
}
/* ── About photo ───────────────────────────────────────────── */
.about-photo {
  width: 150px;
  height: 150px;
  object-fit: cover;
  object-position: center center;
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  display: block;
  flex-shrink: 0;
}

/* CSS pixel-art face (kept for fallback) */
.pixel-avatar::before {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(var(--ink) 0,var(--ink) 12.5%)    0     0/100%   12.5%  no-repeat,
    linear-gradient(var(--ink) 0,var(--ink) 100%)      0     12.5%/12.5% 25% no-repeat,
    linear-gradient(var(--ink) 0,var(--ink) 100%)      87.5% 12.5%/12.5% 25% no-repeat,
    linear-gradient(#F5C89B 0,#F5C89B 100%)            12.5% 12.5%/75%  50%  no-repeat,
    linear-gradient(var(--ink) 0,var(--ink) 100%)      25%   25%/12.5% 12.5% no-repeat,
    linear-gradient(var(--ink) 0,var(--ink) 100%)      62.5% 25%/12.5% 12.5% no-repeat,
    linear-gradient(var(--ink) 0,var(--ink) 100%)      25%   50%/12.5%  6.25% no-repeat,
    linear-gradient(var(--ink) 0,var(--ink) 100%)      62.5% 50%/12.5%  6.25% no-repeat,
    linear-gradient(var(--ink) 0,var(--ink) 100%)      25%   56.25%/50% 6.25% no-repeat,
    linear-gradient(#4466AA 0,#4466AA 100%)            0     62.5%/100% 37.5% no-repeat;
}

.about-name {
  font-family: var(--font-body);
  font-size: 28px;
  font-weight: bold;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 8px;
}
.about-role {
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--forest);
  margin-bottom: 18px;
  letter-spacing: 0.04em;
}
.about-bio {
  font-size: 16px;
  line-height: 1.8;
  color: #3a3a3a;
  margin-bottom: 20px;
}

.meta-list { display: flex; flex-direction: column; gap: 8px; }
.meta-row {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 15px;
  color: var(--ink);
  flex-wrap: wrap;
}
.meta-label {
  font-family: var(--font-body);
  font-size: 13px;
  background: var(--forest);
  color: var(--cream);
  padding: 2px 8px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Skills ────────────────────────────────────────────────────── */
.skills-subhead {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--gray3);
  border-bottom: 2px solid var(--ink);
  padding-bottom: 8px;
  margin-bottom: 16px;
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 32px;
}
.skill-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 10px 6px;
  border: 2px solid transparent;
  cursor: default;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.1s, background 0.1s;
}
.skill-item:hover {
  border-color: var(--forest);
  background: rgba(74,124,89,0.07);
}
.skill-icon { font-size: 48px; line-height: 1; }
.skill-icon-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  display: block;
}
.skill-name {
  font-family: var(--font-body);
  font-size: 14px;
  text-align: center;
  color: var(--ink);
  word-break: break-word;
}

/* ── Certification item ──────────────────────────────────────── */
.skills-grid-certs { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

.skill-cert-item {
  cursor: pointer;
  position: relative;
  border-color: var(--dot-yellow);
  box-shadow: 2px 2px 0 var(--ink);
  gap: 8px;
  padding-bottom: 12px;
}
.skill-cert-item:not(.no-link):hover {
  border-color: var(--dot-yellow);
  background: rgba(212,160,23,0.07);
}
.skill-cert-item.no-link {
  cursor: default;
}

.cert-badge-circle {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid var(--dot-yellow);
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px var(--ink);
}
.cert-py-icon,
.cert-logo-icon {
  width: 32px;
  height: 32px;
  display: block;
  object-fit: contain;
}

.cert-check {
  position: absolute;
  bottom: -4px;
  right: -4px;
  background: var(--dot-green);
  color: #fff;
  font-size: 9px;
  font-weight: bold;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.cert-issuer {
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--gray3);
  text-align: center;
  letter-spacing: 0.04em;
}
.cert-verify-tag {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--forest);
  border-bottom: 1px solid var(--forest);
  padding-bottom: 1px;
}

.skills-sep {
  border: none;
  border-top: 2px solid var(--ink);
  margin: 20px 0 12px;
}
.skills-cat {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--gray3);
  margin-bottom: 12px;
  letter-spacing: 0.06em;
}

/* ── Experience ─────────────────────────────────────────────────── */
.exp-entry {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.exp-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  border-left: 4px solid var(--forest);
  padding-left: 16px;
}
.exp-logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border: 1.5px solid var(--gray1);
  background: #fff;
  flex-shrink: 0;
  padding: 4px;
}
.exp-role {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: bold;
  color: var(--ink);
  margin-bottom: 4px;
  line-height: 1.4;
}
.exp-company {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--forest);
  margin-bottom: 4px;
}
.exp-period {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--gray3);
}
.exp-bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 0;
}
.exp-bullets li {
  font-family: var(--font-body);
  font-size: 15px;
  color: #3a3a3a;
  line-height: 1.7;
  padding-left: 22px;
  position: relative;
}
.exp-bullets li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--forest);
  font-size: 13px;
  top: 2px;
}

/* ── Projects section ──────────────────────────────────────────── */
.projects-heading {
  text-align: center;
  margin-bottom: 20px;
}
.projects-heading h2 {
  font-family: var(--font-body);
  font-size: 28px;
  font-weight: bold;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.projects-heading .h-dots { font-size: 20px; letter-spacing: 3px; }

/* ── Carousel wrapper ──────────────────────────────────────────── */
.carousel-wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px;
}

.projects-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 6px;
  /* hide scrollbar */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.projects-track::-webkit-scrollbar { display: none; }

/* desktop: all 3 visible */
.project-win {
  flex: 0 0 calc(33.333% - 14px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}

/* ── Project image area ────────────────────────────────────────── */
.project-img {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-bottom: 2px solid var(--ink);
  background: var(--sage);
  flex-shrink: 0;
  padding: 12px; /* Add padding for the frame */
}

.project-screenshot {
  position: absolute;
  inset: 12px; /* respect padding */
  width: calc(100% - 24px);
  height: calc(100% - 24px);
  object-fit: contain; /* Show the entire image without cropping */
  z-index: 1;
  display: none;
  transition: opacity 0.32s ease;
  border: 2px solid var(--ink); /* Retro border */
  box-shadow: 2px 2px 0 rgba(0,0,0,0.2); /* Depth */
  background: var(--cream);
}
.project-screenshot[src]:not([src=""]) { display: block; }
.project-screenshot[src]:not([src=""]) ~ .project-img-placeholder { display: none; } /* Hide placeholder if img exists */

.project-img-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* subtle Mac-style diagonal hatching */
  background:
    repeating-linear-gradient(
      -45deg,
      transparent 0px,
      transparent 6px,
      rgba(26,26,26,0.04) 6px,
      rgba(26,26,26,0.04) 7px
    ),
    var(--sage);
}
.pip-icon  { font-size: 36px; opacity: 0.55; }
.pip-label {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--gray3);
  letter-spacing: 0.06em;
  border: 1.5px dashed var(--gray2);
  padding: 2px 8px;
}

/* Award banner (between title-bar and image) */
.project-award-banner {
  background: var(--dot-yellow);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: bold;
  padding: 5px 14px;
  border-bottom: 2px solid var(--ink);
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Expand hint overlay on image */
.project-expand-hint {
  position: absolute;
  bottom: 8px;
  right: 10px;
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--ink);
  background: rgba(250,247,240,0.88);
  border: 1px solid var(--ink);
  padding: 2px 6px;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
  letter-spacing: 0.04em;
}

/* Clickable card affordance */
.project-win {
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
}
.project-win:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--ink);
}
.project-win:hover .project-expand-hint { opacity: 1; }
.project-win:active { transform: translate(0,0); box-shadow: var(--shadow); }

/* ── Project card body ─────────────────────────────────────────── */
.project-win .win-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.project-name {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: bold;
  color: var(--ink);
  line-height: 1.4;
  margin-bottom: 10px;
}
.project-desc {
  font-family: var(--font-body);
  font-size: 14px;
  color: #3a3a3a;
  line-height: 1.7;
  flex: 1;
  margin-bottom: 14px;
}
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.tag {
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 12px;
  padding: 2px 8px;
}
.project-link {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--forest);
  text-decoration: none;
  border-bottom: 1.5px solid var(--forest);
  padding-bottom: 1px;
  align-self: flex-start;
}
.project-link:hover { color: var(--ink); border-color: var(--ink); }

/* ── Carousel controls ─────────────────────────────────────────── */
.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 18px;
}

.carousel-arrow {
  font-family: var(--font-body);
  font-size: 16px;
  width: 36px;
  height: 36px;
  border: 2px solid var(--ink);
  background: var(--cream);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.08s, box-shadow 0.08s, background 0.08s;
  flex-shrink: 0;
}
.carousel-arrow:hover  { background: var(--gray1); }
.carousel-arrow:active { box-shadow: none; transform: translate(2px, 2px); }
.carousel-arrow:disabled { opacity: 0.3; pointer-events: none; }

.carousel-dots {
  display: flex;
  gap: 8px;
  align-items: center;
}
.c-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s;
}
.c-dot.active  { background: var(--ink); }
.c-dot:hover:not(.active) { background: var(--gray2); }

/* ── Contact / Terminal ────────────────────────────────────────── */
.terminal-body {
  background: #0e1812;
  color: var(--term-green);
  font-family: var(--font-body);
  font-size: 12px;
  padding: 22px;
  line-height: 2.2;
}
.t-prompt  { color: var(--term-green); opacity: 0.5; }
.t-cmd     { color: var(--cream); }
.t-comment { color: var(--gray3); font-style: italic; }
.terminal-body a {
  color: var(--term-green);
  text-decoration: none;
}
.terminal-body a:hover {
  color: #ffffff;
  text-decoration: underline;
}

.cursor {
  display: inline-block;
  width: 9px; height: 14px;
  background: var(--term-green);
  vertical-align: text-bottom;
  animation: blink 1s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ── Footer ────────────────────────────────────────────────────── */
footer {
  border-top: 2px solid var(--forest);
  padding: 22px 24px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--gray3);
  letter-spacing: 0.04em;
}
footer a {
  color: var(--forest);
  text-decoration: none;
}
footer a:hover { text-decoration: underline; }

/* ── Scroll reveal (CSS-only, scroll-driven — modern browsers) ──── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0);    }
}

@supports (animation-timeline: view()) {
  .reveal {
    animation: fadeUp 0.55s ease both;
    animation-timeline: view();
    animation-range: entry 0% entry 20%;
  }
  /* Staggered project cards via offset animation range */
  .reveal-d1 { animation-range: entry  8% entry 28%; }
  .reveal-d2 { animation-range: entry 16% entry 36%; }
}

/* ── Mobile ─────────────────────────────────────────────────────── */

/* Redesigned Mobile Navbar: Pill + Liquid Glass Retro */
@media (max-width: 640px) {
  html { scroll-padding-top: 220px; }
  
  #menubar {
    position: fixed;
    top: 12px;
    left: 12px;
    right: 12px;
    height: auto;
    background: rgba(250, 247, 240, 0.95); /* Even more opaque for retro feel */
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    border: 3px solid var(--ink);
    border-radius: 20px;
    padding: 32px 16px 44px; /* MASSIVE padding: 32px top, 44px bottom */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px; /* Increased gap */
    box-shadow: 4px 4px 0 var(--ink);
    z-index: 1000;
    transition: all 0.2s ease-out; /* Snappier, faster transition */
    overflow: hidden;
  }

  /* Compact state on scroll */
  #menubar.scrolled {
    padding: 12px 16px;
    gap: 0;
    border-radius: 30px;
    top: 10px;
    box-shadow: 2px 2px 0 var(--ink);
  }
  
  #menubar.scrolled .nav-logo,
  #menubar.scrolled .lang-switch {
    max-height: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
    border: none;
  }

  .nav-logo { 
    font-size: 14px;
    width: 100%;
    display: flex;
    justify-content: center;
    border-bottom: 2px dashed var(--gray2);
    padding-bottom: 12px;
    margin-top: 4px; /* Extra space from top border */
    max-height: 38px; /* Tighter max-height for instant transition */
    transition: all 0.2s ease-out;
    opacity: 1;
  }
  
  .nav-links {
    width: 100%;
    display: flex;
    flex-wrap: nowrap; /* Force single line to fix Safari wrapping */
    justify-content: center;
    gap: 6px;
    padding: 0;
    overflow-x: auto; /* Allow scrolling if it truly doesn't fit on tiny screens */
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  
  .nav-links a {
    font-size: 10px;
    padding: 6px 8px; /* Slightly reduced horizontal padding to fit better */
    border: 2px solid var(--ink);
    background: var(--cream);
    box-shadow: 2px 2px 0 var(--ink);
    flex-shrink: 0; /* Prevent buttons from squishing text too much */
    white-space: nowrap;
  }
  .nav-links a[data-active] {
    background: var(--forest);
    color: var(--cream);
  }

  .lang-switch { 
    position: static;
    margin-left: 0;
    justify-content: center;
    width: 100%;
    gap: 8px;
    padding-top: 8px;
    margin-bottom: 8px; /* Extra space from bottom border */
    max-height: 44px; /* Tighter max-height for instant transition */
    transition: all 0.2s ease-out;
    opacity: 1;
  }
  .lang-btn {
    font-size: 11px;
    padding: 5px 12px;
    border: 2px solid var(--ink) !important;
    background: var(--cream);
    box-shadow: 2px 2px 0 var(--ink);
  }
}

@media (max-width: 768px) {
  #menubar  { padding: 0 14px; gap: 8px; }
  .nav-logo { font-size: 13px; }
  .nav-links a { font-size: 12px; padding: 4px 8px; }

  #hero { 
    padding: 190px 20px 40px; /* Reduced further to tighten the gap */
    min-height: auto; 
  }
  .hero-name { font-size: clamp(16px, 6vw, 26px); }
  .hero-role { font-size: 15px; }

  .section { padding: 20px 0; margin-bottom: 0; }

  .about-layout { grid-template-columns: 1fr; }
  .about-left { align-items: center; text-align: center; }
  .about-right { text-align: center; }
  .meta-row { justify-content: center; }

  /* tablet: 2 visible */
  .project-win { flex: 0 0 calc(50% - 10px); }

  .win-body { padding: 18px; }
  .project-win .win-body { padding: 20px; }

  .skills-grid { grid-template-columns: repeat(3, minmax(100px, 1fr)); gap: 16px; }
  .skill-icon { font-size: 36px; }
  .skill-name { font-size: 12px; }
}

@media (max-width: 480px) {
  .nav-logo { font-size: 12px; }
  .nav-links a { font-size: 11px; padding: 4px 6px; }
  .lang-btn { font-size: 10px; padding: 3px 6px; }
  .skills-grid { grid-template-columns: repeat(2, minmax(100px, 1fr)); }
  .about-name { font-size: 22px; }
  .project-name { font-size: 16px; }
  /* mobile: 1 card full width */
  .project-win { flex: 0 0 85%; }
  .carousel-wrap { padding: 0 12px; }
  .modal-body { grid-template-columns: 1fr; }
  .modal-img-wrap { min-height: 160px; border-right: none; border-bottom: 2px solid var(--ink); }
  .exp-role { font-size: 16px; }
  .exp-bullets li { font-size: 14px; }
}

/* ── Interactive terminal ─────────────────────────────────────── */
#terminal {
  cursor: text;
  position: relative;
  max-height: 460px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
#terminal::-webkit-scrollbar { width: 8px; }
#terminal::-webkit-scrollbar-track { background: #0a1410; }
#terminal::-webkit-scrollbar-thumb { background: var(--forest); }

.t-input-line {
  position: relative;
  display: block;
  line-height: 2.2;
}

#t-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  font-family: inherit;
  font-size: inherit;
  color: transparent;
  caret-color: transparent;
  outline: none;
}

#t-typed {
  color: var(--cream);
  white-space: pre;
}

.t-out-line { display: block; white-space: pre-wrap; word-break: break-word; }

/* clickable contact links in terminal */
a.t-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--term-green);
  text-decoration: underline;
  text-decoration-color: rgba(122,196,127,0.5);
  text-underline-offset: 3px;
  padding: 3px 10px;
  margin: 2px 0;
  border: 1px dashed rgba(122,196,127,0.4);
  border-radius: 2px;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
a.t-link:hover,
a.t-link:focus-visible {
  color: var(--cream);
  background: rgba(122,196,127,0.18);
  border-color: var(--cream);
  border-style: solid;
  text-decoration-color: var(--cream);
  outline: none;
}
a.t-link svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  flex-shrink: 0;
}
.t-link-arrow {
  margin-left: 4px;
  opacity: 0.55;
  font-size: 11px;
}
a.t-link:hover .t-link-arrow { opacity: 1; }

.t-mac-art {
  display: block;
  white-space: pre;
  color: var(--cream);
  line-height: 1.15;
  font-size: 12px;
  margin: 4px 0;
}

.t-bomb {
  display: block;
  white-space: pre;
  color: #ff7a59;
  line-height: 1.15;
  font-size: 12px;
  margin: 4px 0;
}

.t-mobile-hint {
  display: none;
  color: var(--gray3);
  font-style: italic;
  font-size: 11px;
  margin-bottom: 8px;
}
@media (max-width: 768px) {
  .t-mobile-hint { display: block; }
  .t-mobile-hint.is-hidden { display: none; }
}

/* ── Project modal ────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000; /* Above navbar */
  background: rgba(26,26,26,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.modal-overlay.is-open {
  opacity: 1;
  pointer-events: all;
}
.modal-window {
  background: var(--cream);
  border: 3px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
  width: min(720px, 100%);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(12px) scale(0.97);
  transition: transform 0.22s cubic-bezier(.2,.9,.3,1.15);
}
.modal-overlay.is-open .modal-window {
  transform: translateY(0) scale(1);
}

.modal-window .title-bar .dot.red { cursor: pointer; }

.modal-award-bar {
  background: var(--dot-yellow);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: bold;
  padding: 6px 16px;
  border-bottom: 2px solid var(--ink);
  letter-spacing: 0.04em;
  display: none;
}
.modal-award-bar.visible { display: block; }

.modal-body {
  display: grid;
  grid-template-columns: 48% 1fr;
  overflow: auto;
  flex: 1;
}

.modal-img-wrap {
  border-right: 2px solid var(--ink);
  position: relative;
  background: var(--sage);
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.modal-img-wrap .project-img-placeholder {
  position: absolute;
  inset: 0;
}
/* modal carousel images */
.modal-carr-track {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
}
.modal-carr-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}
.modal-carr-img.active { display: block; cursor: zoom-in; }

.modal-carr-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(250,247,240,0.92);
  border: 2px solid var(--ink);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 2px 2px 0 var(--ink);
  padding: 0;
  transition: background 0.1s;
}
.modal-carr-btn:hover { background: var(--gray1); }
.modal-carr-btn:disabled { opacity: 0.3; pointer-events: none; }
.modal-carr-prev { left: 6px; }
.modal-carr-next { right: 6px; }

.modal-carr-dots {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 10;
}
.modal-c-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  background: rgba(250,247,240,0.75);
  cursor: pointer;
  padding: 0;
  transition: background 0.15s;
}
.modal-c-dot.active { background: var(--ink); }

.modal-info {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
}
.modal-name {
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: bold;
  color: var(--ink);
  line-height: 1.3;
}
.modal-desc-text {
  font-family: var(--font-body);
  font-size: 14px;
  color: #3a3a3a;
  line-height: 1.8;
  flex: 1;
}
.modal-link {
  font-size: 14px;
  align-self: flex-start;
  margin-top: auto;
}

.modal-linkedin {
  font-family: var(--font-body);
  font-size: 13px;
  color: #0077b5;
  text-decoration: none;
  border-bottom: 1.5px solid #0077b5;
  padding-bottom: 1px;
  align-self: flex-start;
}
.modal-linkedin:hover { opacity: 0.75; }

@media (max-width: 600px) {
  .modal-body { grid-template-columns: 1fr; }
  .modal-img-wrap { border-right: none; border-bottom: 2px solid var(--ink); min-height: 180px; }
  .modal-info { padding: 16px; }
  .modal-name { font-size: 18px; }
}

/* ── Snake game window ────────────────────────────────────────── */
.game-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(26, 26, 26, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: gameFadeIn 0.18s ease;
}
@keyframes gameFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.game-window {
  background: var(--cream);
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  width: min(480px, 100%);
  display: flex;
  flex-direction: column;
  animation: gamePop 0.22s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes gamePop {
  from { transform: translateY(8px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0)   scale(1);    opacity: 1; }
}

.game-window .title-bar .dot.red { cursor: pointer; }
.game-window .title-bar .dot.red:hover { box-shadow: 0 0 0 2px rgba(204, 51, 0, 0.4); }

.game-body { padding: 18px; }

.game-hud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0.06em;
  padding: 6px 14px;
  border: 2px solid var(--ink);
  background: var(--sage);
  margin-bottom: 14px;
}
.game-hud b { font-weight: bold; color: var(--ink); }

.game-stage {
  position: relative;
  border: 2px solid var(--ink);
  background: var(--cream);
  display: flex;
  justify-content: center;
  overflow: hidden;
}
#g-canvas {
  display: block;
  image-rendering: pixelated;
  width: 100%;
  height: auto;
  max-width: 400px;
}

.game-screen {
  position: absolute;
  inset: 0;
  background: rgba(250, 247, 240, 0.94);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  text-align: center;
}
.g-screen-title {
  font-family: var(--font-head);
  font-size: 18px;
  color: var(--ink);
  letter-spacing: 0.08em;
}
.g-screen-sub {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--gray3);
}
.g-screen-hint {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--gray3);
  letter-spacing: 0.04em;
  margin-top: 4px;
}

.game-buttons {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 14px;
}
.game-btn {
  font-family: var(--font-body);
  font-size: 13px;
  padding: 8px 18px;
  border: 2px solid var(--ink);
  background: var(--cream);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--ink);
  letter-spacing: 0.05em;
  transition: transform 0.08s, box-shadow 0.08s, background 0.08s;
}
.game-btn:hover { background: var(--gray1); }
.game-btn:active {
  box-shadow: none;
  transform: translate(2px, 2px);
}
.game-btn.primary {
  background: var(--forest);
  color: var(--cream);
}
.game-btn.primary:hover { background: var(--forest-d); }

@media (max-width: 480px) {
  .game-body { padding: 12px; }
  .game-hud  { padding: 5px 10px; font-size: 12px; }
  .g-screen-title { font-size: 14px; }
  .game-btn  { padding: 7px 14px; font-size: 12px; }
}

/* ── Credly badge wrapper ─────────────────────────────────────── */
.credly-badge-wrap {
  display: flex;
  justify-content: flex-start;
  margin-top: 8px;
}
.credly-badge-wrap > div { max-width: 150px; }

/* ── LinkedIn mini window ─────────────────────────────────────── */
.li-mini-win {
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  background: var(--cream);
  margin-top: 28px;
  max-width: 100%;
}
.li-mini-bar {
  background: #0077b5;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-bottom: 2px solid var(--ink);
}
.li-logo {
  width: 18px; height: 18px;
  fill: #fff;
  flex-shrink: 0;
}
.li-mini-title {
  font-family: var(--font-head);
  font-size: 9px;
  color: #fff;
  flex: 1;
  letter-spacing: 0.06em;
}
.li-mini-ext {
  font-family: var(--font-body);
  font-size: 11px;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.5);
  padding: 2px 8px;
  transition: background 0.1s;
  white-space: nowrap;
}
.li-mini-ext:hover { background: rgba(255,255,255,0.2); }

.li-mini-body { padding: 16px 20px; }

.li-profile-row {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: inherit;
  padding: 6px 0;
}
.li-profile-row:hover .li-profile-name { color: #0077b5; }

.li-avatar {
  width: 44px; height: 44px;
  object-fit: cover;
  border: 2px solid var(--ink);
  border-radius: 50%;
  flex-shrink: 0;
}
.li-profile-name {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: bold;
  color: var(--ink);
  transition: color 0.1s;
}
.li-profile-role {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--gray3);
  margin-top: 2px;
  line-height: 1.4;
}
.li-profile-info { display: flex; flex-direction: column; }

.li-divider {
  border: none;
  border-top: 1.5px solid var(--gray1);
  margin: 12px 0;
}

.li-see-all {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 12px;
  color: #0077b5;
  text-decoration: none;
  border-bottom: 1px solid #0077b5;
  padding-bottom: 1px;
  transition: opacity 0.1s;
}
.li-see-all:hover { opacity: 0.7; }

/* ── Projects heading expand button ──────────────────────────── */
.projects-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}
.projects-expand-btn {
  font-family: var(--font-body);
  font-size: 13px;
  padding: 6px 14px;
  border: 2px solid var(--ink);
  background: var(--cream);
  color: var(--forest);
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--ink);
  letter-spacing: 0.04em;
  transition: transform 0.08s, box-shadow 0.08s, background 0.08s;
}
.projects-expand-btn:hover { background: var(--gray1); }
.projects-expand-btn:active { box-shadow: none; transform: translate(2px,2px); }

/* ── Projects full-page overlay ──────────────────────────────── */
.proj-page-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000; /* Above navbar */
  background: rgba(26,26,26,0.55);
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s;
}
.proj-page-overlay.is-open {
  opacity: 1;
  pointer-events: all;
}

.proj-page-win {
  background: var(--sage);
  border: 3px solid var(--ink);
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 100vh;
  overflow: hidden;
  transform: translateY(20px);
  transition: transform 0.25s cubic-bezier(.2,.9,.3,1.1);
}
.proj-page-overlay.is-open .proj-page-win {
  transform: translateY(0);
}

.proj-page-body {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 40px;
}
.proj-page-body::-webkit-scrollbar { width: 8px; }
.proj-page-body::-webkit-scrollbar-track { background: var(--sage); }
.proj-page-body::-webkit-scrollbar-thumb { background: var(--forest); }

/* ── Spotlight carousel ──────────────────────────────────────── */
.spotlight-section {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 28px 16px 20px;
  background: var(--cream);
  border-bottom: 3px solid var(--ink);
}

.spotlight-track {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.spotlight-card {
  background: var(--cream);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(.2,.9,.3,1.1),
              opacity 0.25s,
              flex 0.25s cubic-bezier(.2,.9,.3,1.1),
              box-shadow 0.1s;
  overflow: hidden;
  min-width: 0;
}
.spotlight-card.spot-center {
  flex: 2.4;
  opacity: 1;
  box-shadow: 6px 6px 0 var(--ink);
}
.spotlight-card.spot-side {
  flex: 1;
  opacity: 0.6;
}
.spotlight-card:hover { opacity: 1; }
.spotlight-card.spot-center:hover { box-shadow: 8px 8px 0 var(--ink); transform: translate(-2px,-2px); }

.spot-img {
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--sage);
  border-bottom: 2px solid var(--ink);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  padding: 12px; /* Requadre */
}
.spot-img img {
  position: absolute;
  inset: 12px;
  width: calc(100% - 24px); 
  height: calc(100% - 24px);
  object-fit: contain; /* Show entire image */
  display: block;
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 rgba(0,0,0,0.2);
  background: var(--cream);
}
.spot-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  opacity: 0.45;
  background: repeating-linear-gradient(
    -45deg, transparent 0, transparent 6px,
    rgba(26,26,26,0.04) 6px, rgba(26,26,26,0.04) 7px
  );
}
.spot-award {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: var(--dot-yellow);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: bold;
  padding: 3px 8px;
  border-top: 1.5px solid var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.spot-info {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.spot-name {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: bold;
  color: var(--ink);
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.spot-desc {
  font-family: var(--font-body);
  font-size: 13px;
  color: #3a3a3a;
  line-height: 1.6;
  margin-bottom: 12px;
  flex: 1;
}
.spotlight-card.spot-center .spot-name { font-size: 18px; margin-bottom: 10px; }
.spot-info .tag-list { margin-bottom: 0; margin-top: auto; }
.spot-info .tag { font-size: 11px; }
.spotlight-card.spot-center .spot-info { padding: 16px 20px; }

.spotlight-arrow {
  font-family: var(--font-body);
  font-size: 18px;
  width: 40px; height: 40px;
  border: 2px solid var(--ink);
  background: var(--cream);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.08s, box-shadow 0.08s, background 0.08s;
}
.spotlight-arrow:hover { background: var(--gray1); }
.spotlight-arrow:active { box-shadow: none; transform: translate(2px,2px); }

/* ── All projects grid ───────────────────────────────────────── */
.proj-page-all-wrap {
  padding: 24px 28px 0;
}
.proj-page-all-head {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: bold;
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
  padding-bottom: 8px;
  margin-bottom: 20px;
  letter-spacing: 0.03em;
}

.proj-page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}
.proj-page-grid .project-win {
  flex: none;
  width: 100%;
  cursor: pointer;
}
.proj-page-grid .project-win.spot-active {
  outline: 3px solid var(--forest);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .spotlight-card.spot-side { display: none; }
  .spotlight-card.spot-center { flex: 1; }
  .proj-page-all-wrap { padding: 16px 12px 0; }
  .proj-page-grid { grid-template-columns: 1fr; }
  .spotlight-section { padding: 16px 10px 14px; }
}

/* ── Fullscreen Image Lightbox ────────────────────────────────── */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.lightbox-overlay.is-open {
  opacity: 1;
  pointer-events: all;
}
.lightbox-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  border: 2px solid var(--ink);
  background: var(--cream);
  transform: scale(0.95);
  transition: transform 0.25s cubic-bezier(.2,.9,.3,1.15);
}
.lightbox-overlay.is-open .lightbox-img {
  transform: scale(1);
}
.lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: var(--cream);
  color: var(--ink);
  border: 2px solid var(--ink);
  width: 44px;
  height: 44px;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform 0.1s, box-shadow 0.1s;
  z-index: 10000;
  line-height: 1;
}
.lightbox-close:active {
  box-shadow: none;
  transform: translate(4px, 4px);
}
@media (max-width: 600px) {
  .lightbox-close {
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    font-size: 24px;
    box-shadow: 2px 2px 0 var(--ink);
  }
  .lightbox-close:active { transform: translate(2px, 2px); }
}