/* ============================================================
   Yunus Emre Usta — Portfolio
   Pixel-art "collection card album" visual system.
   Palette, type, and stepped-corner shapes ported 1:1 from the
   Claude Design reference (Koleksiyon kartı albümü tasarımı).

   Global Game Dev / Backend mode switch: swaps the brand accent
   (--brand-*) and the scene glow tokens site-wide. Category
   accent colors (gold/magenta/green/amber used for skill groups
   and secondary project cards) stay fixed across modes — the
   mode signals relevance instead via opacity dimming (.is-dim).
   ============================================================ */

:root {
  --bg-0: oklch(0.17 0.075 295);
  --bg-1: oklch(0.2 0.06 282);
  --bg-2: oklch(0.16 0.05 292);
  --ink: oklch(0.91 0.02 285);
  --ink-soft: oklch(0.82 0.03 285);
  --ink-dim: oklch(0.74 0.035 285);
  --ink-mono: oklch(0.78 0.04 285);

  /* fixed category accents (do not change with mode) */
  --gold: oklch(0.85 0.16 88);
  --gold-bright: oklch(0.9 0.17 92);
  --gold-deep: oklch(0.78 0.16 78);
  --gold-soft: oklch(0.88 0.16 90);

  --magenta: oklch(0.66 0.22 320);
  --magenta-soft: oklch(0.62 0.24 320);
  --magenta-dim: oklch(0.5 0.2 320);

  --green: oklch(0.82 0.18 150);
  --green-mid: oklch(0.68 0.17 150);

  --amber: oklch(0.6 0.16 40);

  --card-bg: oklch(0.14 0.06 292);
  --card-bg-alt: oklch(0.22 0.07 290);
  --panel: oklch(0.21 0.06 290);
  --panel-alt: oklch(0.23 0.08 292);

  /* mode-reactive brand accent — Game Dev (default) */
  --brand: oklch(0.85 0.16 88);
  --brand-bright: oklch(0.9 0.17 92);
  --brand-deep: oklch(0.78 0.16 78);
  --brand-soft: oklch(0.88 0.16 90);
  --brand-dot: oklch(0.85 0.16 88 / 0.6);
  --glow-a: oklch(0.38 0.16 318 / 0.85);
  --glow-b: oklch(0.3 0.12 268 / 0.9);

  color-scheme: dark;
}

html[data-mode="backend"] {
  --brand: oklch(0.8 0.13 212);
  --brand-bright: oklch(0.87 0.12 206);
  --brand-deep: oklch(0.68 0.14 222);
  --brand-soft: oklch(0.82 0.12 208);
  --brand-dot: oklch(0.8 0.13 212 / 0.55);
  --glow-a: oklch(0.36 0.14 258 / 0.85);
  --glow-b: oklch(0.3 0.12 288 / 0.85);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg-0);
  color: var(--ink);
  font-family: Karla, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

img { image-rendering: pixelated; }

a {
  color: var(--brand);
  text-decoration-color: var(--brand-deep);
  text-underline-offset: 4px;
  transition: color 0.3s ease, text-decoration-color 0.3s ease;
}
a:hover { color: var(--brand-bright); text-decoration-color: var(--brand); }

::selection { background: var(--brand); color: oklch(0.16 0.06 292); }

.font-pixel { font-family: 'Pixelify Sans', monospace; font-weight: 700; }
.font-mono { font-family: 'JetBrains Mono', monospace; }
.font-tiny { font-family: 'Press Start 2P', monospace; }

/* ---------- background scene ---------- */

.scene {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 78% -10%, var(--glow-a), transparent 58%),
    radial-gradient(90% 60% at 8% 6%, var(--glow-b), transparent 60%),
    linear-gradient(var(--bg-0), var(--bg-1) 62%, var(--bg-2));
  transition: background 0.6s ease;
}

.starfield {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: radial-gradient(oklch(0.95 0.02 90 / 0.5) 1px, transparent 1.4px);
  background-size: 46px 46px;
  animation: twinkle 6s ease-in-out infinite;
}
.starfield.gold {
  opacity: 0.28;
  background-image: radial-gradient(var(--brand-dot) 1px, transparent 1.4px);
  background-size: 97px 71px;
  background-position: 23px 11px;
  animation: none;
  transition: background-image 0.6s ease;
}

.cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 720px;
  height: 720px;
  margin: -360px 0 0 -360px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  background: radial-gradient(circle at center, var(--glow-a), var(--glow-b) 44%, transparent 68%);
  transition: opacity 0.4s ease, background 0.6s ease;
  will-change: transform;
}

.wrap {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 44px);
}

@keyframes bob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }
@keyframes twinkle { 0%, 100% { opacity: 0.25 } 50% { opacity: 0.85 } }
@keyframes logoPulse { 0%, 100% { filter: drop-shadow(0 0 18px var(--brand-dot)) } 50% { filter: drop-shadow(0 0 30px var(--brand-dot)) } }
@keyframes faceIn { from { opacity: 0; transform: translateY(6px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* ---------- stepped-corner shapes (pixel-art clip-paths) ---------- */

.notch-12 { clip-path: polygon(0 12px, 6px 12px, 6px 6px, 12px 6px, 12px 0, calc(100% - 12px) 0, calc(100% - 12px) 6px, calc(100% - 6px) 6px, calc(100% - 6px) 12px, 100% 12px, 100% calc(100% - 12px), calc(100% - 6px) calc(100% - 12px), calc(100% - 6px) calc(100% - 6px), calc(100% - 12px) calc(100% - 6px), calc(100% - 12px) 100%, 12px 100%, 12px calc(100% - 6px), 6px calc(100% - 6px), 6px calc(100% - 12px), 0 calc(100% - 12px)); }

.notch-12-no-bl { clip-path: polygon(0 12px, 6px 12px, 6px 6px, 12px 6px, 12px 0, calc(100% - 12px) 0, calc(100% - 12px) 6px, calc(100% - 6px) 6px, calc(100% - 6px) 12px, 100% 12px, 100% calc(100% - 12px), calc(100% - 6px) calc(100% - 12px), calc(100% - 6px) calc(100% - 6px), calc(100% - 12px) calc(100% - 6px), calc(100% - 12px) 100%, 0 100%); }

.notch-12-no-tl { clip-path: polygon(0 0, calc(100% - 12px) 0, calc(100% - 12px) 6px, calc(100% - 6px) 6px, calc(100% - 6px) 12px, 100% 12px, 100% calc(100% - 12px), calc(100% - 6px) calc(100% - 12px), calc(100% - 6px) calc(100% - 6px), calc(100% - 12px) calc(100% - 6px), calc(100% - 12px) 100%, 12px 100%, 12px calc(100% - 6px), 6px calc(100% - 6px), 6px calc(100% - 12px), 0 calc(100% - 12px)); }

.notch-12-no-tr { clip-path: polygon(0 12px, 6px 12px, 6px 6px, 12px 6px, 12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 6px) calc(100% - 12px), calc(100% - 6px) calc(100% - 6px), calc(100% - 12px) calc(100% - 6px), calc(100% - 12px) 100%, 12px 100%, 12px calc(100% - 6px), 6px calc(100% - 6px), 6px calc(100% - 12px), 0 calc(100% - 12px)); }

.notch-8 { clip-path: polygon(0 8px, 4px 8px, 4px 4px, 8px 4px, 8px 0, calc(100% - 8px) 0, calc(100% - 8px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 8px, 100% 8px, 100% calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px), calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) 100%, 8px 100%, 8px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 8px), 0 calc(100% - 8px)); }

/* ---------- header ---------- */

.site-header {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding: 26px 0 0;
}
.brand { font-size: 23px; color: var(--brand); letter-spacing: 0.01em; transition: color 0.5s ease; }
.header-controls { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.site-nav { display: flex; gap: 20px; font-size: 13px; }
.site-nav a { text-decoration: none; color: var(--ink-soft); }
.site-nav a:hover { color: var(--brand); }

.lang-switch { display: flex; border: 2px solid oklch(0.45 0.08 292); }
.lang-switch button {
  cursor: pointer; border: none; background: transparent; color: var(--ink-dim);
  font: inherit; font-size: 11.5px; padding: 5px 9px; letter-spacing: 0.03em;
}
.lang-switch button.active { background: var(--brand); color: oklch(0.16 0.06 292); }

/* ---------- mode switch ---------- */

.mode-switch { display: inline-flex; margin-bottom: 22px; background: var(--card-bg); padding: 4px; }
.mode-btn {
  cursor: pointer; border: none; background: transparent; color: var(--ink-dim);
  font: inherit; font-size: 13px; padding: 10px 18px;
  transition: background 0.3s ease, color 0.3s ease;
}
.mode-btn.active { background: linear-gradient(var(--brand-soft), var(--brand-deep)); color: oklch(0.16 0.06 292); }

/* ---------- hero ---------- */

.hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  gap: clamp(26px, 5vw, 60px);
  align-items: center;
  padding: clamp(34px, 6vw, 74px) 0 clamp(38px, 6vw, 78px);
}
.hero-copy { min-width: 0; }
.hero-title {
  margin: 0;
  font-size: clamp(32px, 5.4vw, 62px);
  line-height: 1.12;
  color: var(--brand);
  text-shadow: 4px 4px 0 var(--bg-2);
  text-wrap: pretty;
  max-width: 16ch;
  transition: opacity 0.25s ease, color 0.5s ease;
}
.hero-body {
  margin: 22px 0 0;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.6;
  max-width: 30em;
  color: oklch(0.89 0.02 285);
  text-wrap: pretty;
  transition: opacity 0.25s ease;
}
.hero-fading { opacity: 0; }

.hero-stats { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 30px; padding-top: 22px; border-top: 3px solid oklch(0.35 0.08 292); }
.stat-value { font-size: 32px; line-height: 1; color: var(--green); }
.stat-label { font-size: 11.5px; color: var(--ink-dim); margin-top: 6px; }

.btn-face {
  display: block;
  padding: 12px 22px;
  background: linear-gradient(var(--brand-soft), var(--brand-deep));
  color: oklch(0.16 0.06 292);
  font-family: 'Pixelify Sans', monospace;
  font-weight: 700;
  font-size: 19px;
  transition: background 0.5s ease;
}
.btn-face-solid { background: oklch(0.22 0.07 290); color: var(--brand); }

/* ---------- hero visual (no-flip, swappable faces) ---------- */

.hero-card-slot { min-width: 0; padding: 12px; }
.hero-card-bob { animation: bob 7s ease-in-out infinite; }
.hero-visual { position: relative; }
.hero-visual-face { aspect-ratio: 3 / 3.55; padding: 5px; animation: faceIn 0.5s ease; }

.face-front-frame { background: linear-gradient(var(--brand-soft), var(--brand-deep)); transition: background 0.5s ease; }
.face-back-frame { background: linear-gradient(oklch(0.5 0.15 22), oklch(0.3 0.11 20)); }

.face-surface { position: relative; width: 100%; height: 100%; overflow: hidden; }

.logo-face {
  background:
    radial-gradient(120% 90% at 50% 8%, oklch(0.3 0.1 292), transparent 62%),
    linear-gradient(oklch(0.2 0.08 292), var(--card-bg) 70%);
}
.logo-face-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(oklch(0.95 0.02 90 / 0.35) 1.5px, transparent 2px);
  background-size: 22px 22px;
}
.logo-face-frame { position: absolute; inset: 12px; border: 3px solid oklch(0.86 0.12 88 / 0.4); }
.face-col { position: relative; height: 100%; display: flex; flex-direction: column; padding: 16px; }
.logo-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 6% 8%; min-height: 0; }
.logo-wrap img {
  width: 100%;
  max-width: 340px;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  animation: logoPulse 4.5s ease-in-out infinite;
}
.logo-face-badge { align-self: flex-start; padding: 3px; background: var(--card-bg); }
.logo-face-badge span {
  display: block;
  padding: 5px 9px;
  background: var(--green);
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: oklch(0.16 0.06 292);
}

.back-surface {
  background: linear-gradient(oklch(0.34 0.13 22), oklch(0.26 0.1 20));
  background-image: radial-gradient(oklch(0.9 0.12 88 / 0.22) 1.5px, transparent 2px);
  background-size: 18px 18px;
}
.back-inset-border { position: absolute; inset: 10px; border: 3px solid oklch(0.86 0.12 88 / 0.55); }
.back-content { position: relative; height: 100%; display: flex; flex-direction: column; padding: clamp(16px, 2.4vw, 24px) clamp(14px, 2.2vw, 22px); gap: 8px; }
.back-eyebrow { font-family: 'Press Start 2P', monospace; font-size: 8.5px; line-height: 1.7; color: oklch(0.9 0.14 88); }
.back-title { font-size: clamp(22px, 2.8vw, 30px); line-height: 1; color: oklch(0.96 0.03 88); text-shadow: 3px 3px 0 oklch(0.2 0.08 20); margin: 2px 0 0; }

.back-stats { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 4px; }
.back-stat { min-width: 0; }
.back-stat-value { font-family: 'Pixelify Sans', monospace; font-weight: 700; font-size: clamp(15px, 1.9vw, 19px); line-height: 1.15; color: var(--brand-soft); word-break: break-word; }
.back-stat-label { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: oklch(0.9 0.04 88); margin-top: 2px; }
.logo-wrap ~ .back-stats { margin-top: auto; }

.back-stack { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.back-stack span {
  padding: 6px 9px;
  background: oklch(0.22 0.07 290);
  border: 2px solid oklch(0.86 0.12 88 / 0.5);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: oklch(0.93 0.02 285);
}
.back-stack span.hl { background: oklch(0.86 0.15 88); border-color: oklch(0.2 0.08 20); color: oklch(0.18 0.07 290); }
.back-stack span.dash { background: transparent; border-style: dashed; border-color: oklch(0.86 0.12 88 / 0.6); color: oklch(0.9 0.04 88); }

.back-note { margin-top: auto; padding-top: 10px; border-top: 2px solid oklch(0.86 0.12 88 / 0.25); font-size: 12.5px; line-height: 1.5; color: oklch(0.93 0.02 88); }

.back-badge { position: absolute; top: 14px; right: 14px; padding: 3px; background: var(--bg-2); }
.back-badge span {
  width: 30px; height: 30px;
  background: var(--magenta-soft);
  display: grid; place-items: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  color: oklch(0.97 0.02 90);
}

/* ---------- section heading ---------- */

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  border-bottom: 4px solid var(--brand);
  padding-bottom: 14px;
  transition: border-color 0.5s ease;
}
.section-title { margin: 0; font-size: clamp(30px, 4.2vw, 50px); line-height: 1; color: oklch(0.92 0.02 285); text-shadow: 4px 4px 0 var(--bg-2); }
.section-tag { font-family: 'Press Start 2P', monospace; font-size: 9px; line-height: 1.8; color: var(--green); padding-bottom: 6px; }

section#projects { padding: clamp(18px, 3vw, 36px) 0 20px; }
section#experience,
section#skills { padding: clamp(44px, 6vw, 84px) 0 10px; }
section#skills { padding-bottom: 0; }
section#contact { padding: clamp(48px, 7vw, 92px) 0 clamp(48px, 7vw, 88px); }

/* ---------- relevance dimming ---------- */

.stack-offset, .secondary-offset, .compact-card, .skill-card {
  transition: opacity 0.45s ease;
}
.is-dim { opacity: 0.32; }
.is-dim:hover { opacity: 0.55; }

/* ---------- featured project card ---------- */

.stack-offset { position: relative; margin-top: 36px; }
.stack-offset .offset-bg {
  position: absolute;
  inset: 0;
  transform: translate(14px, 14px);
  background: oklch(0.48 0.19 320 / 0.55);
}
.featured-card {
  position: relative;
  padding: 4px;
  background: var(--gold);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.featured-card-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr));
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  padding: clamp(20px, 3vw, 34px);
  background: linear-gradient(150deg, oklch(0.26 0.09 292), oklch(0.21 0.07 288) 55%, oklch(0.24 0.1 320));
}

.pill { display: inline-block; padding: 3px; background: var(--bg-2); }
.pill span { display: block; padding: 6px 11px; font-family: 'Press Start 2P', monospace; font-size: 8.5px; }
.pill-live span { background: var(--green); color: oklch(0.16 0.06 292); }
.pill-dev span { background: var(--card-bg-alt); color: oklch(0.86 0.1 320); }
.pill-preview span { background: var(--card-bg-alt); color: oklch(0.88 0.1 88); }

.card-title { margin: 16px 0 0; font-size: clamp(30px, 3.6vw, 44px); line-height: 1; color: var(--gold-bright); text-shadow: 4px 4px 0 var(--bg-2); }
.card-desc { margin: 16px 0 0; font-size: 16.5px; line-height: 1.6; color: oklch(0.9 0.02 285); text-wrap: pretty; }

.tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.tag { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; padding: 5px 9px; background: oklch(0.3 0.08 290); border: 2px solid oklch(0.5 0.1 292); color: oklch(0.92 0.02 285); }

.stat-line { margin: 20px 0 0; font-family: 'JetBrains Mono', monospace; font-size: 12.5px; line-height: 1.7; color: var(--ink-mono); }

.play-btn { display: inline-block; margin-top: 18px; text-decoration: none; padding: 3px; background: var(--card-bg); }
.play-btn-inner {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  background: linear-gradient(var(--green), var(--green-mid));
  color: oklch(0.14 0.06 292);
  font-size: 13.5px;
}
.play-btn-inner::before { content: "▶"; font-size: 10px; }

.featured-gallery { min-width: 0; display: grid; grid-template-columns: 1.35fr 1fr; gap: 14px; align-items: start; }
.gallery-main { padding: 4px; background: var(--gold); }
.gallery-main-frame { position: relative; aspect-ratio: 9 / 16; overflow: hidden; background: var(--card-bg-alt); }
.gallery-main-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.gallery-side { display: grid; gap: 14px; }
.gallery-side-img { padding: 4px; background: oklch(0.5 0.15 22); }
.gallery-side-img-frame { position: relative; aspect-ratio: 9 / 13; overflow: hidden; background: oklch(0.3 0.1 25); }
.gallery-side-img-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }

.gallery-note { padding: 13px; background: oklch(0.3 0.1 320); border: 2px solid var(--magenta-soft); }
.gallery-note-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: oklch(0.86 0.1 320); }
.gallery-note-text { font-size: 13.5px; line-height: 1.45; margin-top: 6px; color: oklch(0.93 0.02 285); }

/* ---------- secondary project cards ---------- */

.secondary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(22px, 2.6vw, 30px);
  margin-top: clamp(28px, 3vw, 40px);
}
.secondary-offset { position: relative; }
.secondary-offset .offset-bg { position: absolute; inset: 0; transform: translate(12px, 12px); }
.offset-gold .offset-bg { background: oklch(0.6 0.14 78 / 0.45); }
.offset-magenta .offset-bg { background: oklch(0.5 0.2 320 / 0.5); }

.secondary-card { position: relative; padding: 4px; transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
.secondary-card.gold-frame { background: var(--gold); }
.secondary-card.magenta-frame { background: var(--magenta); }
.secondary-card-inner { background: var(--card-bg-alt); }

.secondary-visual { position: relative; height: 260px; overflow: hidden; }
.secondary-visual-dots { position: absolute; inset: 0; background-image: radial-gradient(oklch(0.95 0.02 90 / 0.55) 1px, transparent 1.4px); background-size: 34px 30px; }
.secondary-visual-dots.warm { background-image: radial-gradient(oklch(0.9 0.12 88 / 0.35) 1px, transparent 1.4px); background-size: 26px 26px; }

.bloxx-scene { background: linear-gradient(var(--bg-1) 0%, oklch(0.3 0.11 285) 58%, oklch(0.24 0.08 260)); }
.bloxx-buildings { position: absolute; inset: 0; display: flex; align-items: end; justify-content: center; gap: 12px; padding-bottom: 30px; will-change: transform; }
.bloxx-buildings > div { background: linear-gradient(oklch(0.3 0.07 275), oklch(0.24 0.06 272)); }
.bloxx-stack { position: absolute; inset: 0; display: flex; align-items: end; justify-content: center; padding-bottom: 30px; will-change: transform; }
.bloxx-stack-col { display: grid; gap: 4px; justify-items: center; }
.bloxx-block { border: 3px solid var(--card-bg); }
.bloxx-crane { position: absolute; right: 20px; top: 18px; width: 122px; height: 100px; will-change: transform; }
.bloxx-crane .mast { position: absolute; right: 0; top: 0; width: 4px; height: 66px; background: var(--card-bg); }
.bloxx-crane .arm { position: absolute; right: 0; top: 0; width: 98px; height: 4px; background: var(--card-bg); }
.bloxx-crane .cable { position: absolute; left: 0; top: 4px; width: 3px; height: 34px; background: oklch(0.78 0.05 285); }
.bloxx-crane .hook { position: absolute; left: -14px; top: 38px; width: 30px; height: 18px; background: linear-gradient(var(--gold-soft), oklch(0.7 0.14 74)); border: 3px solid var(--card-bg); }

.story-bubbles { position: relative; display: grid; gap: 10px; padding: 26px 22px; }
.bubble { padding: 10px 12px; font-size: 13.5px; }
.bubble-npc { background: oklch(0.28 0.08 290); border: 3px solid oklch(0.62 0.12 292); color: oklch(0.93 0.02 285); }
.bubble-choice { margin-left: 26px; background: linear-gradient(var(--gold-soft), oklch(0.76 0.15 78)); border: 3px solid var(--card-bg); color: oklch(0.17 0.06 292); font-weight: 700; }
.bubble-hidden { border: 3px dashed oklch(0.6 0.1 292); color: oklch(0.82 0.04 285); }

.secondary-body { padding: 22px; border-top: 4px solid var(--gold); }
.secondary-title { margin: 14px 0 0; font-size: 30px; line-height: 1; color: oklch(0.93 0.02 285); text-shadow: 3px 3px 0 var(--bg-2); }
.secondary-desc { margin: 12px 0 0; font-size: 15.5px; line-height: 1.55; color: oklch(0.88 0.02 285); text-wrap: pretty; }
.tag-row.tight { margin-top: 16px; }
.tag-ghost { border: 2px solid oklch(0.5 0.1 292); color: oklch(0.9 0.02 285); font-family: 'JetBrains Mono', monospace; font-size: 11.5px; padding: 5px 9px; background: transparent; }

.feature-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 7px; }
.feature-list li {
  position: relative;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.5;
  color: oklch(0.85 0.03 285);
}
.feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 8px;
  height: 8px;
  background: var(--gold);
}
#bloxxCard .feature-list li::before { background: var(--gold); }
#storyWrap .feature-list li::before { background: var(--magenta); }

/* ---------- compact project cards ---------- */

.compact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(18px, 2.4vw, 26px);
  margin-top: clamp(28px, 3vw, 40px);
}
.compact-card { background: var(--panel); padding: 22px 24px; }
.compact-card.magenta { border-left: 8px solid var(--magenta); }
.compact-card.gold { border-left: 8px solid var(--gold); }
.compact-kicker { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; }
.compact-card.magenta .compact-kicker { color: oklch(0.82 0.12 320); }
.compact-card.gold .compact-kicker { color: oklch(0.88 0.12 88); }
.compact-title { margin: 10px 0 0; font-size: 25px; line-height: 1.05; color: oklch(0.93 0.02 285); }
.compact-desc { margin: 10px 0 0; font-size: 15.5px; line-height: 1.55; color: oklch(0.86 0.02 285); text-wrap: pretty; }
.compact-stack { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--ink-mono); margin-top: 14px; line-height: 1.8; }

/* ---------- experience ---------- */

.experience-title { margin: 0 0 34px; font-size: clamp(30px, 4.2vw, 50px); line-height: 1; color: oklch(0.92 0.02 285); text-shadow: 4px 4px 0 var(--bg-2); border-bottom: 4px solid var(--brand); padding-bottom: 14px; transition: border-color 0.5s ease; }
.experience-list { display: grid; gap: 24px; }
.experience-row { display: grid; grid-template-columns: minmax(0, 160px) minmax(0, 1fr); gap: clamp(14px, 3vw, 36px); align-items: start; }
.experience-period { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: oklch(0.8 0.13 88); padding-top: 8px; }
.experience-body { border-top: 4px solid oklch(0.4 0.1 292); padding-top: 14px; }
.experience-role { margin: 0; font-size: 26px; line-height: 1.05; color: oklch(0.93 0.02 285); }
.experience-org { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: var(--ink-mono); margin-top: 6px; }
.experience-desc { margin: 12px 0 0; font-size: 16px; line-height: 1.6; max-width: 46em; color: oklch(0.88 0.02 285); text-wrap: pretty; }

/* ---------- skills ---------- */

.skills-title { margin: 0 0 30px; font-size: clamp(30px, 4.2vw, 50px); line-height: 1; color: oklch(0.92 0.02 285); text-shadow: 4px 4px 0 var(--bg-2); border-bottom: 4px solid var(--brand); padding-bottom: 14px; transition: border-color 0.5s ease; }
.skills-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 258px), 1fr)); gap: 20px; align-items: stretch; }
.skill-card { display: flex; padding: 4px; }
.skill-card.gold { background: var(--gold); }
.skill-card.magenta { background: var(--magenta); }
.skill-card.green { background: var(--green-mid); }
.skill-card.amber { background: var(--amber); }
.skill-card-inner { flex: 1; padding: 20px; background: var(--panel-alt); }
.skill-title { margin: 0 0 14px; font-size: 21px; }
.skill-card.gold .skill-title { color: var(--gold-bright); }
.skill-card.magenta .skill-title { color: oklch(0.86 0.12 320); }
.skill-card.green .skill-title { color: var(--green); }
.skill-card.amber .skill-title { color: oklch(0.82 0.13 45); }
.skill-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.skill-tag { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; padding: 5px 9px; color: oklch(0.93 0.02 285); border: 2px solid; }
.skill-card.gold .skill-tag { background: oklch(0.3 0.09 290); border-color: oklch(0.85 0.16 88 / 0.6); }
.skill-card.magenta .skill-tag { border-color: oklch(0.66 0.22 320 / 0.7); }
.skill-card.green .skill-tag { background: oklch(0.3 0.09 290); border-color: oklch(0.68 0.17 150 / 0.7); }
.skill-card.amber .skill-tag { border-color: oklch(0.6 0.16 40 / 0.8); }

.education-row {
  margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px 36px; align-items: baseline;
  border-top: 4px solid oklch(0.4 0.1 292); padding-top: 18px;
}
.education-degree { font-size: 21px; color: oklch(0.93 0.02 285); }
.education-school { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: var(--ink-mono); }
.education-gpa { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: oklch(0.8 0.13 88); }

/* ---------- contact ---------- */

.contact-offset { position: relative; }
.contact-offset .offset-bg { position: absolute; inset: 0; transform: translate(14px, 14px); background: oklch(0.5 0.2 320 / 0.5); }
.contact-card { position: relative; padding: 4px; background: var(--brand); transition: background 0.5s ease; }
.contact-card-inner {
  position: relative; overflow: hidden;
  padding: clamp(24px, 4vw, 46px);
  background: linear-gradient(150deg, oklch(0.26 0.1 300), oklch(0.2 0.07 285) 60%, oklch(0.24 0.1 322));
}
.contact-bg-img { position: absolute; inset: 0; opacity: 0.16; }
.contact-bg-img img { width: 100%; height: 100%; object-fit: cover; }
.contact-grid { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 32px; align-items: center; }
.contact-title { margin: 0; font-size: clamp(30px, 4vw, 46px); line-height: 1.02; color: var(--brand-bright); text-shadow: 4px 4px 0 var(--bg-2); transition: color 0.5s ease; }
.contact-sub { margin: 16px 0 0; font-size: 16.5px; line-height: 1.6; color: oklch(0.91 0.02 285); max-width: 26em; text-wrap: pretty; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.contact-actions a { text-decoration: none; padding: 4px; display: inline-block; }
.contact-actions a.primary { background: var(--card-bg); }
.contact-actions a.secondary { background: var(--brand); transition: background 0.5s ease; }

.contact-details { display: grid; gap: 11px; font-size: 15.5px; }
.contact-detail { display: flex; gap: 12px; flex-wrap: wrap; border-bottom: 2px solid oklch(0.45 0.1 292); padding-bottom: 10px; }
.contact-detail:last-child { border-bottom: none; padding-bottom: 0; }
.contact-detail-label { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--ink-mono); min-width: 70px; }
.contact-detail span.plain { color: oklch(0.9 0.02 285); }

/* ---------- footer ---------- */

.site-footer {
  padding: 24px 0 40px;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: var(--ink-dim);
}

/* ---------- responsive ---------- */

@media (max-width: 640px) {
  .experience-row { grid-template-columns: 1fr; }
  .experience-period { padding-top: 0; }
  .hero-title { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-card-bob, .starfield, .logo-wrap img, .hero-visual-face { animation: none !important; }
  .secondary-card, .featured-card { transition: none !important; }
}