/* ═══════════════════════ RESET & VARIABLES ═══════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #1b1d2a;
  --bg-card: #232538;
  --bg-topbar: rgba(27,29,42,0.94);
  --text: #e8e4de;
  --text-dim: #8a8a9a;
  --text-dimmer: #55566a;
  --accent: #c8c3bb;
  --border: #2e3045;
  --tag-green: #4ade80;
}

[data-theme="light"] {
  /* Warm cream page (readable on white browser chrome) */
  --bg: #ebe4d9;
  --bg-card: #f5f0e8;
  --bg-topbar: rgba(235, 228, 217, 0.94);
  --text: #2a2826;
  --text-dim: #58544f;
  --text-dimmer: #7a756d;
  --accent: #b07867;
  --border: #d1c9bd;
  /* Cream keyboard case; outer caps use --text like titles */
  --kb-plate: #e3dbd0;
  --kb-plate-border: #c9c1b5;
  --kb-alpha: #faf8f5;
  --kb-silver-cap: #e3dfd6;
  --kb-rose-cap: #d8b4a6;
  --kb-rose-cap-border: #b89586;
  --kb-rose-cap-deep: #9a7868;
  --info-plate: #ded8ce;
  --footer-plate: #2a2826;
}
/* Light: cream page + cream keyboard; footer stays dark for constellation */
[data-theme="light"] .kb-layout-desktop .keyboard {
  background: var(--kb-plate);
  border-color: var(--kb-plate-border);
}
[data-theme="light"] .kb-mod {
  background: var(--kb-plate);
  border-color: var(--kb-plate-border);
}
[data-theme="light"] .info-panel {
  background: var(--info-plate);
  border-color: var(--kb-plate-border);
  color: var(--text);
}
[data-theme="light"] .info-panel .tag { color: var(--text-dimmer); }
[data-theme="light"] .info-panel .val { color: var(--text); }
[data-theme="light"] .info-panel .desc { color: var(--text-dim); }
[data-theme="light"] .site-footer {
  background: var(--footer-plate);
  border-top-color: var(--kb-plate-border);
}
[data-theme="light"] .footer-divider {
  background: #505050;
}
[data-theme="light"] .footer-identity h3 { color: #d8b4a6; }
[data-theme="light"] .footer-col h4 { color: #d8b4a6; }
[data-theme="light"] .footer-bottom span { color: #d8b4a6; }
[data-theme="light"] .footer-col a:hover,
[data-theme="light"] .footer-col span:hover { color: #e8c4b6; }
[data-theme="light"] .footer-id-word:focus-visible { outline-color: #d8b4a6; }
[data-theme="light"] .orion-ambient { animation-name: twinkle-light !important; }
@keyframes twinkle-light {
  0%, 100% { opacity: 0.35; filter: none; }
  50%      { opacity: 1; filter: drop-shadow(0 0 3px rgba(216,180,166,0.6)); }
}
[data-theme="light"] .kb-label {
  color: var(--text-dimmer);
}
[data-theme="light"] .hero-name,
[data-theme="light"] .section-title,
[data-theme="light"] .page-title,
[data-theme="light"] .page-title span,
[data-theme="light"] .typewriter-wrap,
[data-theme="light"] .exp-title {
  color: var(--text);
}

html {
  height: 100%;
  scroll-behavior: smooth;
}
body {
  min-height: 100%;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  transition: background 0.4s, color 0.4s;
}
.site-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.site-main > .page {
  flex: 1 1 auto;
}
a { color: inherit; text-decoration: none; }

/* ═══════════════════════ SPLASH ═══════════════════════ */
#splash {
  position: fixed; inset: 0;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999; opacity: 1;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
#splash.hidden { opacity: 0; }
#splash.hidden .splash-dot { animation: none !important; opacity: 1; }
#splash .splash-name {
  font-size: clamp(1rem, 4.5vw, 1.8rem); font-weight: 300; letter-spacing: 0.15em;
  color: var(--text-dim); opacity: 0;
  animation: splashFade 1s ease forwards;
}
@keyframes splashFade {
  0% { opacity: 0; transform: translateY(10px); }
  40% { opacity: 1; transform: translateY(0); }
  100% { opacity: 1; transform: translateY(0); }
}
#splash .splash-dot {
  opacity: 0;
}
#splash .splash-dot-1 { animation: splashDot1 0.7s steps(1, end) infinite; }
#splash .splash-dot-2 { animation: splashDot2 0.7s steps(1, end) infinite; }
#splash .splash-dot-3 { animation: splashDot3 0.7s steps(1, end) infinite; }
@keyframes splashDot1 {
  0%, 24%   { opacity: 0; }
  25%, 100% { opacity: 1; }
}
@keyframes splashDot2 {
  0%, 49%   { opacity: 0; }
  50%, 100% { opacity: 1; }
}
@keyframes splashDot3 {
  0%, 74%   { opacity: 0; }
  75%, 100% { opacity: 1; }
}

/* ═══════════════════════ PAGE TRANSITION ═══════════════════════ */
.page { will-change: opacity, transform; }
.page.tx-out, .page.tx-in { overflow: hidden; }

/* ── Title: swipe out left / in from right ── */
.page.tx-out .page-title {
  animation: titleOut 0.15s cubic-bezier(0.4, 0, 1, 1) forwards;
}
.page.tx-in .page-title {
  animation: titleIn 0.22s cubic-bezier(0, 0, 0.2, 1) forwards;
}
@keyframes titleOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-60px); }
}
@keyframes titleIn {
  from { opacity: 0; transform: translateX(60px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Content (everything after title): fade + rise ── */
.page.tx-out > *:not(.page-title) {
  animation: contentOut 0.15s cubic-bezier(0.4, 0, 1, 1) forwards;
}
.page.tx-in > *:not(.page-title) {
  animation: contentIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes contentOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(18px); }
}
@keyframes contentIn {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Home page: keep the simple fade (no title swipe) ── */
#page-home.tx-out { animation: pageTxOut 0.15s ease-out forwards; }
#page-home.tx-in  { animation: pageTxIn 0.22s ease-out forwards; }
#page-home.tx-out .page-title,
#page-home.tx-out > *:not(.page-title),
#page-home.tx-in .page-title,
#page-home.tx-in > *:not(.page-title) { animation: none; }
@keyframes pageTxOut {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.985); }
}
@keyframes pageTxIn {
  from { opacity: 0; transform: scale(1.012); }
  to { opacity: 1; transform: scale(1); }
}

/* Reduced motion: simple crossfade only */
@media (prefers-reduced-motion: reduce) {
  .page.tx-out, .page.tx-out .page-title, .page.tx-out > *:not(.page-title) {
    animation: pageTxOut 0.15s ease-out forwards !important;
  }
  .page.tx-in, .page.tx-in .page-title, .page.tx-in > *:not(.page-title) {
    animation: pageTxIn 0.15s ease-out forwards !important;
  }
}

/* ═══════════════════════ TOPBAR (fixed bar; hamburger hidden while dropdown open) ═══════════════════════ */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: var(--bg-topbar);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  z-index: 1000;
  border-bottom: 1px solid var(--border);
  transition: background 0.4s;
}
.topbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1 1 auto;
  min-width: 0;
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 0 0 auto;
  justify-content: flex-end;
  min-width: 0;
}
.topbar-nav {
  display: flex;
  gap: 18px;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  min-width: 0;
  flex: 0 1 auto;
}
/* Closed topbar: extra space after hamburger so tabs sit a bit right */
.topbar-left .topbar-nav {
  margin-left: 12px;
}
.hamburger {
  background: none; border: none; color: var(--text-dim);
  font-size: 22px; cursor: pointer; padding: 4px; transition: color 0.2s;
  letter-spacing: 2px; transform: scaleX(1.4); transform-origin: left;
  flex-shrink: 0;
}
.hamburger:hover { color: var(--text); }
body.nav-menu-open #menuBtn {
  display: none !important;
}
/* Full-bleed menu: hide top bar stripe so list starts at top of viewport */
body.nav-menu-open .topbar {
  height: 0;
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-bottom: none;
  overflow: hidden;
  pointer-events: none;
}
body.nav-menu-open .topbar-nav {
  display: none !important;
}
body.nav-menu-open #topbarClock {
  display: none !important;
}
body.nav-menu-open #themeToggle {
  display: none !important;
}
.topbar-nav a {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-dimmer);
  cursor: pointer;
  transition: color 0.2s;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.topbar-nav a:hover { color: var(--text); }
@media (max-width: 800px) {
  .topbar-nav { display: none; }
}
@media (min-width: 801px) and (max-width: 1100px) {
  .topbar { padding: 0 20px; }
  .topbar-nav { gap: 14px; }
  .topbar-nav a { font-size: 13px; letter-spacing: 0.01em; }
  .topbar-clock-time { font-size: 15px; }
}
/* Watch-style stack: time over date + temp */
.topbar-clock {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  text-align: right;
  line-height: 1.05;
  font-family: 'Inter', system-ui, sans-serif;
  margin-left: 8px;
}
.topbar-clock-time {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: nowrap;
  font-family: 'Orbitron', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1;
  color: var(--text);
  text-transform: uppercase;
}
.topbar-clock-time.topbar-clock-time--plain .topbar-clock-colon {
  display: none;
}
.topbar-clock-colon {
  margin: 0 0.02em;
  animation: topbar-colon-blink 2s step-end infinite;
}
@keyframes topbar-colon-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.2; }
}
@media (prefers-reduced-motion: reduce) {
  .topbar-clock-colon {
    animation: none;
    opacity: 1;
  }
}
[data-theme="light"] .topbar-clock-time {
  letter-spacing: 0.1em;
}
.topbar-clock-sub {
  display: block;
  margin-top: 2px;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--text-dimmer);
}
.topbar-clock-sub .topbar-clock-sep {
  opacity: 0.45;
  font-weight: 400;
  padding: 0 0.35em;
}
.topbar-clock-sub .topbar-clock-temp {
  color: var(--text-dim);
  font-weight: 600;
}
.topbar-right .topbar-clock {
  margin-left: 0;
  margin-right: 4px;
}
.theme-toggle {
  font-family: 'Inter', sans-serif; font-size: 13px;
  color: var(--text-dimmer); cursor: pointer; user-select: none;
}
.theme-toggle span {
  transition: color 0.2s, opacity 0.2s; padding: 2px 1px;
  cursor: pointer;
}
.theme-toggle span:hover { color: var(--text); }
.theme-toggle .active-theme { color: var(--text); opacity: 1; }
.theme-toggle .inactive-theme { color: var(--text-dimmer); opacity: 0.5; }

/* ═══════════════════════ NAV DROPDOWN (full height from top when open; topbar collapsed) ═══════════════════════ */
.nav-dropdown {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding-top: calc(env(safe-area-inset-top, 0px) + 8px);
  max-height: calc(100vh - env(safe-area-inset-bottom, 0px));
  max-height: calc(100dvh - env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  backdrop-filter: blur(14px);
  border: none;
  border-radius: 0;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
  opacity: 0;
  transform: translateY(-6px);
  visibility: hidden;
  pointer-events: none;
  overflow-x: hidden;
  overflow-y: auto;
  transition:
    opacity 0.22s ease,
    transform 0.24s cubic-bezier(0.34, 1.15, 0.55, 1),
    visibility 0.24s;
}
.nav-dropdown.open {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: all;
}
.nav-dropdown-body {
  flex: 0 0 auto;
  overflow-x: hidden;
  overflow-y: visible;
  overscroll-behavior: contain;
  /* Inset so row :hover backgrounds aren't clipped by .nav-dropdown overflow-y */
  padding: 8px 32px 12px;
}
.nav-dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: lowercase;
  color: var(--text-dim);
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 9px 8px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.nav-dropdown-item:first-child {
  border-top: none;
}
.nav-dropdown-item:hover {
  color: var(--text);
  background: rgba(128, 128, 160, 0.06);
}
.nav-dropdown-bottom {
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 32px max(10px, env(safe-area-inset-bottom, 0px));
}
.nav-dropdown-bottom .hamburger.nav-dropdown-close {
  transform: scaleX(1.4);
  transform-origin: left;
  flex-shrink: 0;
}
.nav-dropdown-bottom-right {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 14px;
  margin-left: auto;
  flex-shrink: 0;
}
.nav-dropdown-time-corner {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  pointer-events: none;
}
.nav-dropdown-time-corner .topbar-clock {
  align-items: flex-end;
  text-align: right;
  margin: 0;
  pointer-events: none;
}
.nav-dropdown-time-corner .topbar-clock-time {
  font-size: clamp(13px, 2.8vw, 16px);
}
.nav-dropdown-time-corner .topbar-clock-sub {
  font-size: 8px;
}
.nav-dropdown-socials {
  margin: 0 0 0 10px !important;
  gap: clamp(8px, 1.2vw, 14px) !important;
  align-items: center;
  flex-shrink: 0;
}
.nav-dropdown-socials a { font-size: clamp(16px, 2vw, 22px) !important; }
.nav-dropdown-bottom .theme-toggle {
  font-size: 12px;
  flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) {
  .nav-dropdown {
    transition: opacity 0.15s ease;
  }
  .nav-dropdown.open {
    transform: translateY(0);
  }
}

/* ═══════════════════════ PAGES ═══════════════════════ */
.page {
  display: none; padding: 80px 48px 56px;
  max-width: 1400px; margin: 0 auto;
}
#page-home { max-width: 100%; padding: 56px clamp(40px, 4.2vw, 80px) 0; overflow: hidden; }
.page.active { display: block; }
/* Subpages: centered column; flex only when .active (don't override display:none on hidden pages) */
.page.active:not(#page-home) {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.page.active:not(#page-home) > * {
  width: min(52rem, 100%);
}
/* ═══════════════════════ HOME TWO-COLUMN ═══════════════════════ */
.home-layout {
  display: flex; gap: 0; align-items: stretch;
}
.home-left {
  flex: 1; padding-right: 48px;
  display: flex; flex-direction: column; justify-content: flex-start;
  min-height: 0;
}
.home-right {
  flex: 1; padding-left: 48px;
  display: flex; flex-direction: column; justify-content: flex-start;
  min-height: 0;
}

/* ═══════════════════════ SCROLL ANIM ═══════════════════════ */
/* Default: simple fade. Home hero uses .anim-rise; experiences use .anim-exp */
.anim {
  --td: calc(var(--tier, 0s) + var(--d, 0s));
  opacity: 0;
  transition: opacity 1.05s cubic-bezier(0.33, 0.02, 0.2, 1) var(--td);
}
.anim.visible { opacity: 1; }
.anim-delay-1 { --d: 0.1s; }
.anim-delay-2 { --d: 0.2s; }
.anim-delay-3 { --d: 0.3s; }
.anim-delay-4 { --d: 0.4s; }
.anim-delay-5 { --d: 0.5s; }
.anim-seq-profile { --tier: 0s; }
.anim-seq-exp { --tier: 0.38s; }
/* Profile / hero — lift up + fade */
.anim.anim-rise {
  transform: translateY(24px);
  transition:
    opacity 0.7s ease var(--td),
    transform 0.7s ease var(--td);
}
.anim.anim-rise.visible {
  opacity: 1;
  transform: translateY(0);
}
/* Keyboard — quicker, different feel: subtle zoom + settle (not the same as profile) */
.anim.anim-kb {
  transform: scale(0.97) translateY(10px);
  transition:
    opacity 0.48s cubic-bezier(0.22, 1, 0.36, 1) var(--td),
    transform 0.48s cubic-bezier(0.22, 1, 0.36, 1) var(--td);
}
.anim.anim-kb.visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}
/* Experiences — slide in from the right, one after another */
.anim.anim-exp {
  transform: translateX(28px);
  transition:
    opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1) var(--td),
    transform 0.72s cubic-bezier(0.22, 1, 0.36, 1) var(--td);
}
.anim.anim-exp.visible {
  opacity: 1;
  transform: translateX(0);
}
.exp-grid > .exp-card:nth-child(1) { --d: 0.08s; }
.exp-grid > .exp-card:nth-child(2) { --d: 0.2s; }
.exp-grid > .exp-card:nth-child(3) { --d: 0.34s; }
.exp-grid > .exp-card:nth-child(4) { --d: 0.48s; }
@media (prefers-reduced-motion: reduce) {
  .anim {
    opacity: 1;
    transition: none;
  }
  .anim.anim-rise,
  .anim.anim-rise.visible,
  .anim.anim-exp,
  .anim.anim-exp.visible {
    transform: none;
  }
}

/* ═══════════════════════ HOME ═══════════════════════ */
.social-icons { display: flex; gap: 8px; margin-top: 15px; margin-bottom: -12px; }
.social-icons a { color: var(--text-dim); font-size: 18px; transition: color 0.2s; }
.social-icons a:hover { color: var(--text); }
/* Inline X logo — same em box as Basicons icons */
.social-icons a.social-icon-x {
  margin-left: -0.10em;
  margin-right: -0.10em;
}
.social-icons a .social-x-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.12em;
}

.hero-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: -8px; flex-wrap: nowrap; }
.hero-name { font-size: 2.6rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; flex-shrink: 0; min-width: 0; }
.hero-graphic {
  height: 70px; opacity: 0.45;
  flex: 0 1 auto; min-width: 0; max-width: 50%;
  object-fit: contain;
  animation: cloudFloat 6s ease-in-out infinite;
  transition: opacity 0.3s, transform 0.3s;
}
.hero-graphic:hover { opacity: 0.7; transform: translateY(-3px); }
[data-theme="light"] .hero-graphic { filter: invert(1); }
@keyframes cloudFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.typewriter-wrap { font-size: 1rem; font-weight: 300; color: var(--text-dim); margin-bottom: 12px; height: 1.6em; }
.typewriter-cursor {
  display: inline-block; width: 2px; height: 1em;
  background: var(--text-dim); margin-left: 2px; vertical-align: text-bottom;
  animation: blink 1.2s step-end infinite;
}
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }

.bio { font-size: 0.88rem; color: var(--text-dim); margin-top: 20px; margin-bottom: 18px; line-height: 1.6; font-weight: 300; }
.bio-secondary { font-size: 0.88rem; color: var(--text-dim); margin-bottom: 20px; line-height: 1.6; font-weight: 300; }

.explore-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff; color: #111; border: none; padding: 11px 26px;
  font-family: 'Inter', sans-serif; font-size: 0.82rem; font-weight: 500;
  cursor: pointer; border-radius: 24px; transition: background 0.2s, transform 0.15s;
  margin-bottom: 28px; outline: none; box-shadow: none;
}
.explore-btn:hover { background: #f0f0f0; transform: translateX(4px); }
.explore-btn:focus, .explore-btn:active { outline: none; box-shadow: none; }
.explore-btn .arrow { font-size: 1rem; transition: transform 0.2s; }
.explore-btn:hover .arrow { transform: translateX(4px); }
[data-theme="light"] .explore-btn {
  background: #d8b4a6;
  color: #2a201c;
  border: 1px solid #b89586;
}
[data-theme="light"] .explore-btn:hover {
  background: #c9a090;
  color: #1a1513;
  border-color: #9a7868;
}

.portrait-section { display: flex; gap: 0; margin-top: 20px; margin-bottom: 0; align-items: stretch; flex-shrink: 1; min-height: 0; }
.personal-info {
  flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
  font-size: 0.85rem; color: var(--text-dim); font-weight: 300;
  padding-bottom: 8px; margin-right: 20px;
}
.info-row {
  display: flex; flex-direction: column; padding: 10px 0 0;
}
.info-row .info-text { margin-bottom: 10px; }
.info-row .info-line {
  width: 100%; height: 1px; background: var(--border);
}
.portrait-container { position: relative; display: flex; align-items: flex-start; gap: 6px; }
.portrait-clip {
  position: relative;
  width: clamp(240px, 22vw, 380px); aspect-ratio: 1 / 1;
  border-radius: 12px; overflow: hidden; background: var(--bg-card); flex-shrink: 0;
}
.portrait-clip .portrait-img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 55%;
  transform: scale(1.15); transform-origin: center 55%;
}
.portrait-clip .portrait-img.portrait-img--theme-light {
  display: none;
}
[data-theme="light"] .portrait-clip .portrait-img--theme-dark {
  display: none;
}
[data-theme="light"] .portrait-clip .portrait-img--theme-light {
  display: block;
}
/* Postcard location label — text + line above top-right of portrait */
.portrait-label {
  position: absolute;
  top: 0;
  right: 0;
  transform: translateY(-100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  z-index: 2;
}
.portrait-label-line {
  width: 1px;
  height: 40px;
  background: var(--border);
  flex-shrink: 0;
}
.portrait-label-text {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--text-dim);
  white-space: nowrap;
  padding-bottom: 8px;
}
.portrait-label--dark { display: flex; }
.portrait-label--light { display: none; }
[data-theme="light"] .portrait-label--dark { display: none; }
[data-theme="light"] .portrait-label--light { display: flex; }

.portrait-icons { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.portrait-icons i { color: var(--text-dim); font-size: 20px; transition: color 0.2s; cursor: pointer; }
.portrait-icons i:hover { color: var(--text); }
.portrait-icons-row { display: none; gap: 16px; margin-bottom: 12px; }
.portrait-icons-row i { color: var(--text-dim); font-size: 20px; transition: color 0.2s; cursor: pointer; }
.portrait-icons-row i:hover { color: var(--text); }

/* Portrait interest icons — smooth wave through crest (row: up, column: right) */
@keyframes iconWaveY {
  0% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
  }
  50% {
    transform: translateY(-10px);
    animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
  }
  100% { transform: translateY(0); }
}
@keyframes iconWaveX {
  0% {
    transform: translateX(0);
    animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
  }
  50% {
    transform: translateX(8px);
    animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
  }
  100% { transform: translateX(0); }
}
.portrait-icons-row.icon-wave i {
  animation: iconWaveY 0.75s both;
  will-change: transform;
}
.portrait-icons.icon-wave i {
  animation: iconWaveX 0.75s both;
  will-change: transform;
}
.portrait-icons-row.icon-wave i:nth-child(1) { animation-delay: 0s; }
.portrait-icons-row.icon-wave i:nth-child(2) { animation-delay: 0.09s; }
.portrait-icons-row.icon-wave i:nth-child(3) { animation-delay: 0.18s; }
.portrait-icons-row.icon-wave i:nth-child(4) { animation-delay: 0.27s; }
.portrait-icons-row.icon-wave i:nth-child(5) { animation-delay: 0.36s; }
.portrait-icons-row.icon-wave i:nth-child(6) { animation-delay: 0.45s; }
.portrait-icons.icon-wave i:nth-child(1) { animation-delay: 0s; }
.portrait-icons.icon-wave i:nth-child(2) { animation-delay: 0.1s; }
.portrait-icons.icon-wave i:nth-child(3) { animation-delay: 0.2s; }
.portrait-icons.icon-wave i:nth-child(4) { animation-delay: 0.3s; }
.portrait-icons.icon-wave i:nth-child(5) { animation-delay: 0.4s; }
.portrait-icons.icon-wave i:nth-child(6) { animation-delay: 0.5s; }
@media (prefers-reduced-motion: reduce) {
  .portrait-icons-row.icon-wave i,
  .portrait-icons.icon-wave i {
    animation: none !important;
    will-change: auto;
  }
}

/* ═══════════════════════ EXPERIENCES ═══════════════════════ */
.section-title { font-size: 1.8rem; font-weight: 700; margin-bottom: 16px; }
.home-right .section-title { margin-top: 8px; }
.exp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 12px; }
.exp-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.exp-num { font-size: 0.82rem; color: var(--text-dim); font-weight: 500; }
.exp-title { font-size: 0.95rem; font-weight: 600; }
.exp-tag { display: inline-block; background: rgba(74,222,128,0.15); color: var(--tag-green); font-size: 0.68rem; padding: 2px 8px; border-radius: 10px; font-weight: 500; }
[data-theme="light"] .exp-tag {
  background: rgba(176, 120, 103, 0.22);
  color: #5a3028;
  border: 1px solid rgba(176, 120, 103, 0.35);
}
.exp-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 0.75rem; color: var(--text-dimmer); margin-bottom: 8px; }
.exp-meta span { display: flex; align-items: center; gap: 4px; }
.exp-meta i { font-size: 0.75rem; color: var(--text-dimmer); }
.exp-desc { font-size: 0.82rem; color: var(--text-dim); font-weight: 300; line-height: 1.6; }

/* ═══════════════════════ KEYBOARD (inline) ═══════════════════════ */
.kb-section { margin-bottom: 0; flex-shrink: 1; min-height: 0; min-width: 0; }
/* Fade only — same duration/easing as .anim-rise (profile), same stagger base as .anim-seq-profile */
.kb-section.anim { transition: opacity 0.7s ease var(--td); }
.kb-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 6px; overflow: hidden; }
.kb-header-left { flex: 1 1 auto; min-width: 0; }
.kb-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  color: #aaa;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.legend { display: flex; gap: 16px; flex-wrap: wrap; }
.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.04em;
}
/* Legend swatches — light grey languages vs almost-white tools */
.legend-item.legend-lang { color: #b0b0b8; }
.legend-item.legend-tools { color: #d8d8e0; }
.legend-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.dot-lang { background: #b4b4bc; border: 1px solid rgba(255,255,255,0.12); }
.dot-tools { background: #e8e8ee; border: 1px solid rgba(0,0,0,0.18); }
[data-theme="light"] .legend-item.legend-lang { color: #4e4b47; }
[data-theme="light"] .legend-item.legend-tools { color: #5c5853; }
[data-theme="light"] .dot-lang { background: var(--kb-silver-cap); border-color: rgba(0,0,0,0.12); }
[data-theme="light"] .dot-tools { background: #f5f1ec; border-color: rgba(0,0,0,0.1); }

/* Full + split keyboards share this plate + keycap look (split uses slightly smaller caps below) */
.kb-layout-desktop .keyboard {
  background: #080808;
  border-radius: 14px;
  padding: 14px 16px;
  width: 100%;
  border: 1px solid #262626;
  overflow-x: visible;
  overflow-y: visible;
}
.keyboard { border-radius: 14px; width: 100%; }
.kb-row { display: flex; gap: 5px; margin-bottom: 5px; justify-content: center; }
.key {
  background: #c8c8c8;
  color: #1a1a1a;
  border: 0.5px solid #8a8a8a;
  border-bottom: 2.5px solid #5c5c5c;
  border-radius: 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 42px;
  min-width: 42px;
  flex: 0 0 42px;
  transition: background 0.12s, color 0.12s, transform 0.08s, box-shadow 0.12s;
  user-select: none;
}
.key:hover { background: #d6d6d6; color: #000; }
.key:active { transform: translateY(1px); border-bottom-width: 1px; }
.key.active {
  box-shadow: 0 0 0 2px rgba(200, 195, 180, 0.45);
  background: #ececec;
  color: #000;
  border-color: #6a6a6a;
}
.key-lit-mod {
  background: #2e2e2e;
  color: #e8e8e8;
  border-color: #444;
  border-bottom-color: #161616;
}
.key-lit-mod:hover { background: #3a3a3a; color: #fff; }
.key.key-lit-mod .subtext { color: #d0d0d0; }
.key-lit-mod.active {
  box-shadow: 0 0 0 2px rgba(255,255,255,0.2);
  background: #454545;
  color: #fff;
  border-color: #666;
}
.key .subtext { font-size: 7px; overflow: hidden; max-width: 40px; text-overflow: ellipsis; white-space: nowrap; color: #444; margin-top: 1px; }
.kb-book-icon { width: 9px; height: 9px; display: inline-block; vertical-align: middle; }
/* Languages (1–7, SQL, etc.) — lighter neutral grey */
.key.lit-silver {
  background: #b4b4bc;
  color: #101014;
  border-color: #888892;
  border-bottom-color: #65656e;
}
.key.lit-silver .subtext { color: #2a2a32; }
.key.lit-silver:hover { background: #bebec6; color: #08080c; }
.key.lit-silver.active {
  background: #c8c8d0;
  color: #08080c;
  border-color: #6a6a74;
  box-shadow: 0 0 0 2px rgba(80, 82, 92, 0.5);
}
/* Tools & software — very light grey, almost white */
.key.lit-white {
  background: #e8e8ee;
  color: #12121a;
  border-color: #c6c6ce;
  border-bottom-color: #a6a6ae;
}
.key.lit-white .subtext { color: #383840; }
.key.lit-white:hover { background: #efeff4; color: #0a0a10; }
.key.lit-white.active {
  background: #f5f5f8;
  color: #0a0a10;
  border-color: #9898a2;
  box-shadow: 0 0 0 2px rgba(100, 102, 115, 0.4);
}
/* Unmapped keys — same dark caps as esc / shift / mods */
.key[data-key="blank"]:not(.key-lit-mod) {
  background: #2e2e2e;
  color: #e8e8e8;
  border-color: #444;
  border-bottom-color: #161616;
}
.key[data-key="blank"]:not(.key-lit-mod) .subtext { color: #a0a0a0; }
.key[data-key="blank"]:not(.key-lit-mod):hover {
  background: #3a3a3a;
  color: #fff;
}
.key[data-key="blank"]:not(.key-lit-mod).active {
  box-shadow: 0 0 0 2px rgba(255,255,255,0.2);
  background: #454545;
  color: #fff;
  border-color: #666;
}
.key.k-wide    { flex: 0 0 66px; min-width: 66px; }
.key.k-wider   { flex: 0 0 76px; min-width: 76px; }
.key.k-tab     { flex: 0 0 66px; min-width: 66px; }
.key.k-tab .subtext { font-size: 9px; }
.key.k-caps    { flex: 0 0 76px; min-width: 76px; }
.key.k-enter   { flex: 0 0 88px; min-width: 88px; }
.key.k-shift-l { flex: 0 0 88px; min-width: 88px; }
.key.k-shift-r { flex: 0 0 110px; min-width: 110px; }
.key.k-bksp    { flex: 0 0 88px; min-width: 88px; }
.key.k-space   { flex: 0 0 240px; min-width: 240px; }
.key.k-space-l { flex: 1 1 72px; min-width: 56px; max-width: 120px; }
.key.k-space-r { flex: 1 1 100px; min-width: 72px; max-width: 160px; }
/* Full-width space — same blue-grey as split halves */
.kb-layout-desktop .key.k-space {
  background: #9eb0c4;
  color: #1a2430;
  border-color: #6a7a8c;
  border-bottom-color: #4a5a6a;
}
.kb-layout-desktop .key.k-space .subtext { color: #2a3848; }
.kb-layout-desktop .key.k-space:hover { background: #aebfd0; }
.kb-layout-desktop .key.k-space.active {
  background: #c2d2e4;
  box-shadow: 0 0 0 2px rgba(70, 90, 110, 0.4);
  border-color: #5a6d82;
}
.kb-layout-mobile { display: none; }
.keyboard.keyboard--split {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  background: transparent;
  border: none;
  padding: 0;
  overflow: visible;
  width: max-content;
  min-width: 100%;
}
.kb-mod {
  border-radius: 14px;
  padding: 13px 11px;
  background: #080808;
  border: 1px solid #262626;
}
.kb-mod--split-left {
  align-self: flex-start;
  width: max-content;
  flex-shrink: 0;
  padding-right: 28px;
  overflow: visible;
  border-radius: 14px;
}
.kb-mod--split-right {
  align-self: flex-end;
  width: max-content;
  flex-shrink: 0;
  margin-top: 14px;
  padding-left: 28px;
  overflow: visible;
  border-radius: 14px;
}
.keyboard.keyboard--split .kb-row {
  justify-content: flex-start;
  margin-bottom: 5px;
}
/* Physical row stagger (standard OEM column offset) — keys line up with Y / H / N seam */
.keyboard.keyboard--split .kb-mod--split-left > .kb-row:nth-child(1) { transform: translateX(0); }
.keyboard.keyboard--split .kb-mod--split-left > .kb-row:nth-child(2) { transform: translateX(11px); }
.keyboard.keyboard--split .kb-mod--split-left > .kb-row:nth-child(3) { transform: translateX(22px); }
.keyboard.keyboard--split .kb-mod--split-left > .kb-row:nth-child(4) { transform: translateX(33px); }
.keyboard.keyboard--split .kb-mod--split-left > .kb-row:nth-child(5) { transform: translateX(8px); }
.keyboard.keyboard--split .kb-mod--split-right > .kb-row:nth-child(1) { transform: translateX(0); margin-top: 0; }
/* Right half: stair step — Y leftmost, then H, then N each shifted right (matches OEM column stagger) */
.keyboard.keyboard--split .kb-mod--split-right > .kb-row:nth-child(2) { transform: translateX(-18px); margin-top: 0; }
.keyboard.keyboard--split .kb-mod--split-right > .kb-row:nth-child(3) { transform: translateX(-6px); margin-top: 5px; }
.keyboard.keyboard--split .kb-mod--split-right > .kb-row:nth-child(4) { transform: translateX(8px); margin-top: 5px; }
.keyboard.keyboard--split .kb-mod--split-right > .kb-row:nth-child(5) { transform: translateX(12px); margin-top: 4px; }
.keyboard.keyboard--split .kb-mod--split-left > .kb-row,
.keyboard.keyboard--split .kb-mod--split-right > .kb-row {
  transition: transform 0.15s ease;
}
/* Split spacebars — cool blue-grey like reference boards */
.keyboard.keyboard--split .key.k-space-l,
.keyboard.keyboard--split .key.k-space-r {
  background: #9eb0c4;
  color: #1a2430;
  border-color: #6a7a8c;
  border-bottom-color: #4a5a6a;
}
.keyboard.keyboard--split .key.k-space-l .subtext,
.keyboard.keyboard--split .key.k-space-r .subtext { color: #2a3848; }
.keyboard.keyboard--split .key.k-space-l:hover,
.keyboard.keyboard--split .key.k-space-r:hover { background: #aebfd0; }
.keyboard.keyboard--split .key.k-space-l.active,
.keyboard.keyboard--split .key.k-space-r.active {
  background: #c2d2e4;
  box-shadow: 0 0 0 2px rgba(70, 90, 110, 0.4);
  border-color: #5a6d82;
}
/* Split halves: slightly smaller keycaps only (colors from shared .key rules) */
.keyboard.keyboard--split .key {
  height: 38px;
  min-width: 36px;
  flex: 0 0 36px;
  font-size: 9px;
}
.keyboard.keyboard--split .key.k-wide {
  flex: 0 0 48px;
  min-width: 48px;
}
.keyboard.keyboard--split .key.k-tab { flex: 0 0 50px; min-width: 50px; }
.keyboard.keyboard--split .key.k-caps { flex: 0 0 58px; min-width: 58px; }
.keyboard.keyboard--split .key.k-enter { flex: 0 0 52px; min-width: 52px; }
.keyboard.keyboard--split .key.k-shift-l { flex: 0 0 62px; min-width: 62px; }
.keyboard.keyboard--split .key.k-shift-r { flex: 0 0 76px; min-width: 76px; }
.keyboard.keyboard--split .key.k-bksp { flex: 0 0 58px; min-width: 58px; }
.keyboard.keyboard--split .key.k-wider { flex: 0 0 58px; min-width: 58px; }
.keyboard.keyboard--split .key.k-space-l {
  flex: 1 0 72px;
  min-width: 72px;
  max-width: 130px;
}
.keyboard.keyboard--split .key.k-space-r {
  flex: 1 0 56px;
  min-width: 56px;
  max-width: 108px;
}

.info-panel-mobile { display: none; margin-top: 14px; width: 100%; max-width: 100%; flex: none; }
@media (max-width: 924px) {
  .kb-layout-desktop { display: none !important; }
  .kb-layout-mobile {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    scrollbar-width: thin;
  }
  .kb-header .info-panel { display: none; }
  .info-panel.info-panel-mobile { display: block; width: 100%; max-width: 100%; }
}

/* Light: cream keycaps — outers = title text on cap; esc = rose; space = blue-grey */
[data-theme="light"] .key:not(.key-lit-mod):not(.lit-silver):not(.lit-white):not(.k-space):not(.k-space-l):not(.k-space-r) {
  background: var(--kb-alpha);
  color: var(--text);
  border-color: #d0cbc4;
  border-bottom-color: #b0aaa0;
}
[data-theme="light"] .key:not(.key-lit-mod):not(.lit-silver):not(.lit-white):not(.k-space):not(.k-space-l):not(.k-space-r):hover {
  background: #f2efe8;
  color: var(--text);
}
[data-theme="light"] .key:not(.key-lit-mod):not(.lit-silver):not(.lit-white):not(.k-space):not(.k-space-l):not(.k-space-r).active {
  background: #ebe6dd;
  color: var(--text);
  border-color: #a0988c;
  box-shadow: 0 0 0 2px rgba(176, 120, 103, 0.3);
}
[data-theme="light"] .key:not(.key-lit-mod):not(.lit-silver):not(.lit-white):not(.k-space):not(.k-space-l):not(.k-space-r) .subtext { color: var(--text-dim); }
[data-theme="light"] .key.lit-silver {
  background: var(--kb-silver-cap);
  color: var(--text);
  border-color: #c5bfb4;
  border-bottom-color: #a69f92;
}
[data-theme="light"] .key.lit-silver .subtext { color: var(--text-dim); }
[data-theme="light"] .key.lit-silver:hover {
  background: #ece8df;
  color: var(--text);
}
[data-theme="light"] .key.lit-silver.active {
  background: #ded8cc;
  color: var(--text);
  border-color: #958d80;
  box-shadow: 0 0 0 2px rgba(176, 120, 103, 0.3);
}
[data-theme="light"] .key.lit-white {
  background: #f5f1ec;
  color: var(--text);
  border-color: #ddd8d0;
  border-bottom-color: #c0b8ac;
}
[data-theme="light"] .key.lit-white .subtext { color: var(--text-dim); }
[data-theme="light"] .key.lit-white:hover {
  background: #eee9e2;
  color: var(--text);
}
[data-theme="light"] .key.lit-white.active {
  background: #ebe6dd;
  color: var(--text);
  border-color: #a0988c;
  box-shadow: 0 0 0 2px rgba(176, 120, 103, 0.3);
}
[data-theme="light"] .key[data-key="blank"]:not(.key-lit-mod) {
  background: var(--kb-alpha);
  color: var(--text);
  border-color: #d0cbc4;
  border-bottom-color: #b0aaa0;
}
[data-theme="light"] .key[data-key="blank"]:not(.key-lit-mod) .subtext { color: var(--text-dim); }
[data-theme="light"] .key[data-key="blank"]:not(.key-lit-mod):hover {
  background: #f2efe8;
  color: var(--text);
}
[data-theme="light"] .key[data-key="blank"]:not(.key-lit-mod).active {
  background: #ebe6dd;
  color: var(--text);
  border-color: #a0988c;
  box-shadow: 0 0 0 2px rgba(176, 120, 103, 0.3);
}
/* Modifiers / wide outers: same hue as title text */
[data-theme="light"] .key.key-lit-mod:not([data-key="esc"]) {
  background: var(--text);
  color: #f5f0e8;
  border-color: #1a1917;
  border-bottom-color: #0d0c0b;
}
[data-theme="light"] .key.key-lit-mod:not([data-key="esc"]) .subtext { color: #c9c4bc; }
[data-theme="light"] .key.key-lit-mod:not([data-key="esc"]):hover {
  background: #353230;
  color: #faf8f5;
}
[data-theme="light"] .key.key-lit-mod:not([data-key="esc"]).active {
  background: #3d3a38;
  color: #faf8f5;
  border-color: #0d0c0b;
  box-shadow: 0 0 0 2px rgba(42, 40, 38, 0.35);
}
[data-theme="light"] .key[data-key="esc"].key-lit-mod {
  background: var(--kb-rose-cap);
  color: #2a201c;
  border-color: var(--kb-rose-cap-border);
  border-bottom-color: var(--kb-rose-cap-deep);
}
[data-theme="light"] .key[data-key="esc"].key-lit-mod .subtext { color: #4a3028; }
[data-theme="light"] .key[data-key="esc"].key-lit-mod:hover {
  background: #c9a090;
  color: #1a1513;
}
[data-theme="light"] .key[data-key="esc"].key-lit-mod.active {
  background: #d4bbae;
  border-color: var(--kb-rose-cap-deep);
  box-shadow: 0 0 0 2px rgba(154, 120, 104, 0.4);
}
[data-theme="light"] .kb-layout-desktop .key.k-space,
[data-theme="light"] .keyboard.keyboard--split .key.k-space-l,
[data-theme="light"] .keyboard.keyboard--split .key.k-space-r {
  background: #9eb0c4;
  color: #1a2430;
  border-color: #6a7a8c;
  border-bottom-color: #4a5a6a;
}
[data-theme="light"] .kb-layout-desktop .key.k-space .subtext,
[data-theme="light"] .keyboard.keyboard--split .key.k-space-l .subtext,
[data-theme="light"] .keyboard.keyboard--split .key.k-space-r .subtext { color: #2a3848; }
[data-theme="light"] .kb-layout-desktop .key.k-space:hover,
[data-theme="light"] .keyboard.keyboard--split .key.k-space-l:hover,
[data-theme="light"] .keyboard.keyboard--split .key.k-space-r:hover { background: #aebfd0; }
[data-theme="light"] .kb-layout-desktop .key.k-space.active,
[data-theme="light"] .keyboard.keyboard--split .key.k-space-l.active,
[data-theme="light"] .keyboard.keyboard--split .key.k-space-r.active {
  background: #c2d2e4;
  box-shadow: 0 0 0 2px rgba(70, 90, 110, 0.35);
  border-color: #5a6d82;
}

.info-panel {
  flex: 0 0 auto;
  width: 45%;
  min-width: 0;
  background: #080808;
  border: 1px solid #262626;
  border-radius: 14px;
  padding: 12px 16px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 400;
  color: #b8b8b8;
  font-size: 13px;
  line-height: 1.6;
  overflow: hidden;
  transition: background 0.15s, border-color 0.15s;
}
.info-panel .tag {
  font-size: 10px;
  font-weight: 500;
  color: #7a7a8a;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.info-panel .val {
  color: #e4e4e4; font-size: 14px; font-weight: 600;
  white-space: nowrap; display: inline-block;
  position: absolute; left: 0; top: 0;
  will-change: transform;
}
.info-panel .val-wrap {
  position: relative;
  overflow: hidden;
  height: 1.6em;
  mask-image: linear-gradient(to right, black 0%, black 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, black 0%, black 88%, transparent 100%);
}
.info-panel .desc { color: #8a8a9a; font-size: 11px; margin-top: 6px; }

/* ═══════════════════════ FOOTER (full-width HTML) ═══════════════════════ */
/* Matches keyboard plate; vertical breathing room mirrors topbar (48px) + page rhythm (56px gutter) */
.site-footer {
  width: 100%;
  background: #080808;
  border-top: 1px solid #262626;
  margin-top: clamp(40px, 3.5vw, 80px);
  padding: clamp(48px, 4vw, 80px) clamp(48px, 5vw, 120px) clamp(32px, 3vw, 72px);
  font-family: 'Inter', sans-serif;
  transition: background 0.4s, border-color 0.4s;
  flex-shrink: 0;
}

.footer-inner {
  max-width: none; margin: 0;
  display: flex; gap: 32px; align-items: flex-start; flex-wrap: wrap;
}

/* Orion — per-star hover + knock physics (JS); lines brighten when a star is hot */
.footer-constellation {
  flex: 0 0 clamp(120px, 40vw, 252px); height: clamp(95px, 31vw, 196px); position: relative;
  margin-right: -20px;
}
.footer-constellation svg { width: 100%; height: 100%; overflow: visible; }
.footer-constellation svg line {
  pointer-events: none;
}
.footer-constellation svg circle.orion-star {
  pointer-events: all;
  cursor: default;
  transform-box: fill-box;
  transform-origin: center;
}

/* Ambient twinkle — only the 4 outer background stars */
@keyframes twinkle {
  0%, 100% { opacity: 0.35; filter: none; }
  50%      { opacity: 1; filter: drop-shadow(0 0 3px rgba(200,215,240,0.6)); }
}
.orion-ambient:nth-child(1 of .orion-ambient) { animation: twinkle 3.2s ease-in-out infinite; }
.orion-ambient:nth-child(2 of .orion-ambient) { animation: twinkle 4.1s ease-in-out 1.4s infinite; }
.orion-ambient:nth-child(3 of .orion-ambient) { animation: twinkle 2.8s ease-in-out 0.7s infinite; }
.orion-ambient:nth-child(4 of .orion-ambient) { animation: twinkle 3.7s ease-in-out 2.1s infinite; }
@media (prefers-reduced-motion: reduce) { .orion-ambient { animation: none !important; } }

.footer-identity {
  flex: 1; min-width: 200px;
  margin-left: -12px;
}
/* Name / title buttons → home */
.footer-id-word {
  font: inherit;
  color: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  vertical-align: baseline;
  border-radius: 2px;
}
.footer-id-word:focus-visible {
  outline: 2px solid #9eb0c4;
  outline-offset: 3px;
}
.footer-id-letter {
  display: inline-block;
}
.footer-id-letter.footer-id-space {
  width: 0.28em;
}
/* Name: white. Subtitle: mod-key grey. Columns + bottom bar: space-bar blue-grey */
.footer-identity h3 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.2rem, 5.5vw, 2.45rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.08;
  color: #9eb0c4;
  margin-bottom: 10px;
  text-transform: uppercase;
  display: flex;
  flex-wrap: wrap;
  gap: 0.28em;
  align-items: baseline;
}
.footer-identity p {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.6rem, 2.4vw, 1.05rem);
  font-weight: 300;
  color: #ffffff;
  letter-spacing: 0.14em;
  line-height: 1.45;
  text-transform: uppercase;
}
.footer-col { min-width: 100px; }
.footer-col h4 {
  font-size: 0.82rem; color: #9eb0c4; letter-spacing: 0.1em;
  font-weight: 600; text-transform: uppercase; margin-bottom: 12px;
}
.footer-col a, .footer-col span {
  display: block; font-size: 0.7rem; color: #e8e8e8;
  letter-spacing: 0.05em; font-weight: 300;
  padding: 3px 0; cursor: pointer; transition: color 0.2s;
}
.footer-col a:hover, .footer-col span:hover { color: #aebfd0; }

.footer-divider {
  width: 100%; height: 1px; background: #262626; margin: 24px 0 24px;
}

.footer-bottom {
  max-width: none; margin: 0;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;
}
.footer-bottom span {
  font-size: 0.7rem; color: #9eb0c4;
  letter-spacing: 0.04em; font-weight: 300;
}
/* Verse hover popup — single source of truth for both values & footer.
   !important on the visual-identity props to defeat any ancestor selectors
   (e.g. `.footer-bottom span { font-size: 0.7rem; color: #9eb0c4 }`) that would
   otherwise win on specificity and make the two popups render differently. */
.verse-pop-wrap {
  position: relative;
  cursor: pointer;
}
.verse-pop {
  position: absolute;
  bottom: calc(100% + 10px);
  width: max-content;
  max-width: min(360px, calc(100vw - 32px));
  background: #1a1a1a !important;
  color: #fff !important;
  font-family: 'Inter', sans-serif !important;
  font-size: clamp(0.72rem, 0.55rem + 0.6vw, 0.88rem) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: 0.02em !important;
  line-height: 1.55 !important;
  text-transform: none !important;
  padding: 10px 14px !important;
  border-radius: 8px;
  border: 1px solid #555;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 10;
}
.verse-pop-right { right: 0; }
.verse-pop-left  { left: 0; }
.verse-pop::before,
.verse-pop::after {
  content: '';
  position: absolute;
  top: 100%;
  border: 6px solid transparent;
}
.verse-pop::before { border-top-color: #555; }
.verse-pop::after  { border-top-color: #1a1a1a; margin-top: -1px; }
.verse-pop-right::before,
.verse-pop-right::after { right: 18px; }
.verse-pop-left::before,
.verse-pop-left::after  { left: 18px; }
.verse-pop-wrap:hover .verse-pop,
.verse-pop-wrap:focus-within .verse-pop {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════ PROJECTS ═══════════════════════ */
.page-title { font-size: 2.85rem; font-weight: 700; margin-bottom: 36px; color: #fff; }
.page-title span { color: #fff; }
.project-list { display: flex; flex-direction: column; gap: 14px; }
.project-card {
  display: flex; align-items: flex-start; gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--border);
}
.project-card:last-child { border-bottom: none; }
.project-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem; font-weight: 500;
  color: var(--text-dimmer);
  flex-shrink: 0; padding-top: 3px;
  letter-spacing: 0.02em;
}
.project-body { flex: 1; min-width: 0; }
.project-name {
  font-weight: 700; font-size: 1.25rem;
  color: #fff; margin: 0 0 6px; line-height: 1.3;
}
.project-desc {
  font-size: 0.88rem; color: var(--text-dim);
  font-weight: 300; line-height: 1.6; margin: 0;
}
.project-side {
  display: flex; flex-direction: column;
  align-items: flex-end; justify-content: space-between;
  flex-shrink: 0; padding-top: 2px;
  align-self: stretch;
}
.project-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.52rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 3px;
  border: none;
  white-space: nowrap;
  background: #2e3045;
  color: #fff;
}
.project-year {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem; color: var(--text-dimmer);
  text-align: right; letter-spacing: 0.04em;
}
.tag-purple { color: #9eb0c4; }
.tag-green  { color: #81c995; }
.tag-teal   { color: #facc15; }
.tag-blue   { color: #fff; }
.tag-orange { color: #fff; }
.tag-yellow { color: #9eb0c4; }
.tag-pink   { color: #e8a0a0; }
[data-theme="light"] .project-tag { background: #33302d; color: #e8e4de; }
[data-theme="light"] .project-name { color: var(--text); }

@media (max-width: 640px) {
  .project-card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto;
    gap: 4px 14px;
    padding: 18px 0;
  }
  .project-num { grid-row: 1; grid-column: 1; padding-top: 0; }
  .project-body { grid-row: 2; grid-column: 1 / -1; }
  .project-side {
    display: contents;
  }
  .project-year {
    grid-row: 1; grid-column: 2;
    text-align: right; align-self: center;
  }
  .project-tag {
    grid-row: 3; grid-column: 1 / -1;
    justify-self: start; margin-top: 6px;
  }
}

/* ═══════════════════════ VALUES ═══════════════════════ */
.values-list {
  display: flex; flex-direction: column; gap: 0;
  position: relative;
  padding: 0 12px;
  margin-top: 4px;
}
.value-item {
  display: grid;
  grid-template-columns: 80px 1fr;
  align-items: baseline;
  gap: 32px;
  padding: 26px 12px;
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
  color: var(--text);
  border-top: 1px solid var(--border);
}
.value-item:first-child { border-top: none; }
.value-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-dimmer);
  letter-spacing: 0.05em;
  justify-self: start;
  margin-right: 0;
}
.value-text { color: var(--text-dim); }
.value-text strong { color: var(--text); font-weight: 600; }
.value-sup {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55em;
  font-weight: 500;
  color: inherit;
  margin-left: 6px;
  vertical-align: super;
  line-height: 0;
}
.value-refs {
  margin-top: 28px;
  padding: 14px 12px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.value-ref-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--text-dim);
  line-height: 1.4;
}
.value-ref-item .value-sup {
  font-size: 0.85em;
  vertical-align: baseline;
  margin-left: 0;
}
.value-ref {
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  color: inherit;
  transition: color 0.2s;
}
.value-ref:hover { color: #d8dde6; }
[data-theme="light"] .value-ref:hover { color: var(--text); }
@media (max-width: 640px) {
  .value-item {
    grid-template-columns: 48px 1fr;
    gap: 18px;
    padding: 20px 4px;
    font-size: 0.95rem;
  }
}

/* ═══════════════════════ TESTIMONY ═══════════════════════ */
.testimony-text {
  font-size: 0.9rem; color: var(--text-dim); font-weight: 300; line-height: 1.85; white-space: pre-line;
  margin: 0; padding: 22px 28px 22px 26px;
  position: relative;
}
.testimony-text::before,
.testimony-text::after {
  content: '';
  position: absolute;
  pointer-events: none;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
}
.testimony-text::before {
  top: 0; left: 0;
  border-left: 1.5px solid #aaa;
  border-top: 1.5px solid #aaa;
}
.testimony-text::after {
  bottom: 0; right: 0;
  border-right: 1.5px solid #aaa;
  border-bottom: 1.5px solid #aaa;
}
/* Match projects: no extra gap above first line (browser p margins); space only from .page-title */
.testimony-text p {
  margin-top: -20px;
  margin-bottom: 18px;
}
.testimony-text p:last-of-type { margin-bottom: 0; }
.testimony-scroll-section {
  position: relative;
  min-height: 300vh;
  margin-top: -20px;
  margin-bottom: 18px;
  white-space: normal;
}
.testimony-scroll-section p {
  margin-top: 0;
  margin-bottom: 0;
}
.testimony-scroll-sticky {
  position: sticky;
  top: 50vh;
}
@media (max-width: 640px) {
  .testimony-scroll-section { min-height: 200vh; }
}
.testimony-text em .testimony-hover-sentence {
  transition: color 0.35s ease;
  cursor: pointer;
}
.testimony-text em .testimony-hover-sentence:hover,
.testimony-text em .testimony-hover-sentence.scroll-lit {
  color: #fff;
}
[data-theme="light"] .testimony-text em .testimony-hover-sentence:hover,
[data-theme="light"] .testimony-text em .testimony-hover-sentence.scroll-lit {
  color: var(--text);
  text-decoration: underline;
}
[data-theme="light"] .testimony-text::before,
[data-theme="light"] .testimony-text::after { border-color: #111; }
@media (prefers-reduced-motion: reduce) {
  .testimony-scroll-section { min-height: auto; }
  .testimony-scroll-sticky { position: static; transform: none; }
}
.testimony-yt {
  display: block;
  text-align: right;
  margin-top: -3px;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 1.85rem;
  line-height: 1;
  transition: color 0.2s;
}
[data-theme="light"] .testimony-yt { color: #222; }
.testimony-yt:hover { color: var(--text); }
.testimony-yt .basicons { display: inline-block; vertical-align: middle; }

/* ═══════════════════════ CONTACT ═══════════════════════ */
#page-contact.page.active {
  display: block;
  max-width: 100%;
}
#page-contact .page-title {
  white-space: nowrap;
}
.contact-split {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  grid-template-areas:
    "form handles"
    "form footer";
  grid-template-rows: auto 1fr;
  column-gap: 96px;
  width: 100%;
}
.contact-handles {
  grid-area: handles;
  align-self: start;
  justify-self: end;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 320px;
}
.contact-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 0.95rem;
  font-weight: 300;
  transition: color 0.2s;
}
.contact-row:last-of-type { border-bottom: none; }
.contact-row:hover { color: var(--text); }
.contact-row-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  color: var(--text-dimmer);
  font-size: 1em;
}
.contact-row-icon i { font-size: 1em; }
.contact-row-icon svg { display: block; }
.contact-row-value {
  flex: 1;
  min-width: 0;
  text-align: right;
}
[data-theme="light"] .contact-row:hover { color: #000; }
.contact-footer {
  grid-area: footer;
  align-self: end;
  justify-self: end;
  margin: 0;
  font-size: 0.78rem; color: var(--text-dimmer); font-weight: 300;
  line-height: 1.6; font-style: italic;
  display: flex; align-items: center; gap: 6px;
}
.contact-note-icons {
  display: inline-flex; align-items: center; gap: 6px;
  font-style: normal;
}
.contact-note-icon {
  font-size: 0.78rem;
  display: inline-block;
  vertical-align: middle;
}
svg.contact-note-icon {
  width: 0.78rem; height: 0.78rem;
}
.contact-note-dot {
  font-size: 0.5em;
  font-style: normal;
  line-height: 1;
}
.contact-form {
  grid-area: form;
  display: flex; flex-direction: column; gap: 0;
  background: #2a2d3a;
  border-radius: 12px;
  padding: 28px 28px 24px;
  width: 100%;
}
.contact-form input,
.contact-form textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  color: #e8e4de;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 300;
  padding: 18px 0;
  outline: none;
  transition: border-color 0.3s;
  width: 100%;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #55566a;
  font-weight: 400;
  text-transform: lowercase;
  letter-spacing: 0.03em;
}
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: rgba(255,255,255,0.25);
}
.contact-form textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.6;
}
.contact-form button {
  align-self: flex-end;
  margin-top: 24px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  color: #8a8a9a;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 400;
  padding: 10px 28px;
  cursor: pointer;
  transition: border-color 0.3s, color 0.3s;
  text-transform: lowercase;
  letter-spacing: 0.05em;
}
.contact-form button:hover {
  border-color: #e8e4de;
  color: #e8e4de;
}
[data-theme="light"] .contact-form {
  background: var(--footer-plate);
}
[data-theme="light"] .contact-form input,
[data-theme="light"] .contact-form textarea {
  color: #e8e4de;
  border-bottom-color: rgba(255,255,255,0.12);
}
[data-theme="light"] .contact-form input::placeholder,
[data-theme="light"] .contact-form textarea::placeholder {
  color: #8a8580;
}
[data-theme="light"] .contact-form input:focus,
[data-theme="light"] .contact-form textarea:focus {
  border-bottom-color: rgba(255,255,255,0.3);
}
[data-theme="light"] .contact-form button {
  border-color: rgba(255,255,255,0.15);
  color: #b0a89e;
}
[data-theme="light"] .contact-form button:hover {
  border-color: #e8e4de;
  color: #e8e4de;
}
@media (max-width: 720px) {
  .contact-split {
    grid-template-columns: 1fr;
    grid-template-areas:
      "form"
      "footer"
      "handles";
    grid-template-rows: auto auto auto;
    column-gap: 0;
  }
  .contact-handles {
    justify-self: stretch;
    width: 100%;
    max-width: none;
  }
  .contact-footer {
    justify-self: stretch;
    width: 100%;
    margin: 44px 0 26px;
    justify-content: center;
    text-align: center;
    gap: 6px;
  }
  .contact-footer::before,
  .contact-footer::after {
    content: '';
    flex: 1;
    height: 1px;
    margin: 0 8px;
    background: linear-gradient(to var(--dir), transparent, var(--text-dimmer) 40%);
  }
  .contact-footer::before { --dir: right; }
  .contact-footer::after { --dir: left; }
}

/* ═══════════════════════ RESPONSIVE ═══════════════════════ */
@media (max-width: 1400px) {
  .home-layout { flex-direction: column; min-height: auto; }
  .home-left { padding-right: 0; border-right: none; border-bottom: 1px solid var(--border); padding-bottom: 48px; margin-bottom: 40px; }
  .home-right { padding-left: 0; padding-bottom: 40px; }
  .home-right .kb-section { margin-top: 40px; padding-top: 48px; border-top: 1px solid var(--border); }
  .home-left .portrait-section { margin-top: 8px; }
  .portrait-clip { width: clamp(260px, 40vw, 380px); }
  /* Match wide-layout optical alignment: SVG sat slightly high vs Basicons once column layout kicks in */
  .social-icons { align-items: center; }
  .social-icons a .social-x-icon { transform: translateY(2px); }
}
/* Two-column home: left column narrows — scale text down fluidly */
@media (max-width: 1528px) and (min-width: 1401px) {
  .hero-name { font-size: clamp(1.6rem, 1.5vw, 2.25rem); }
  .typewriter-wrap { font-size: 0.9rem; }
  .social-icons { gap: 7px; }
  .social-icons a { font-size: 16px; }
}
@media (max-width: 680px) {
  .portrait-section {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: 24px;
  }
  /* Labels in a row; each column: word on top, vertical line down to meet photo */
  .personal-info {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 6px;
    justify-content: stretch;
    margin-right: 0;
    padding-bottom: 0;
    min-height: 104px;
  }
  .personal-info .info-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0;
    min-height: 100px;
  }
  .personal-info .info-text {
    margin-bottom: 0;
    text-align: center;
    font-size: 0.68rem;
    line-height: 1.25;
    max-width: 100%;
  }
  /* Word sits above the line; line grows down so all bases align with the image top */
  .personal-info .info-line {
    width: 1px;
    flex: 1 1 auto;
    min-height: 28px;
    margin-top: 10px;
    align-self: center;
    background: var(--border);
  }
  .personal-info .info-row:nth-child(1) .info-text,
  .personal-info .info-row:nth-child(4) .info-text {
    margin-top: 0;
  }
  .personal-info .info-row:nth-child(2) .info-text,
  .personal-info .info-row:nth-child(3) .info-text {
    margin-top: 18px;
  }
  .portrait-container {
    width: 100%;
    flex-direction: column;
    margin-top: 0;
    border-top: 1px solid var(--border);
    padding-top: 0;
  }
  .portrait-clip {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    max-height: 280px;
  }
  [data-theme="light"] .portrait-clip .portrait-img--theme-light {
    object-position: center 35%;
    transform-origin: center 35%;
  }
  .portrait-label {
    position: relative;
    transform: none;
    top: auto; right: auto;
    padding-top: 8px;
  }
  .portrait-label-line { display: none; }
  .portrait-label-text { padding-bottom: 0; white-space: normal; font-size: 0.88rem; color: var(--text-dim); }
  .portrait-icons { display: none !important; }
  .home-left-top { display: flex; flex-wrap: wrap; align-items: center; }
  .home-left-top > * { width: 100%; }
  .home-left-top > .anim-delay-5:has(.explore-btn) { width: auto; }
  .portrait-icons-row {
    display: flex !important;
    width: auto !important;
    gap: 12px;
    align-items: center;
    margin-bottom: 28px;
    margin-left: auto;
  }
}
/* ≤600px: hero block switches to compact mode and starts shrinking. Name + cloud scale down via
   clamp() — cloud carries most of the shrinking work, name only gently shrinks. */
@media (max-width: 600px) {
  .hero-name { font-size: clamp(1.7rem, 1.24rem + 2.29vw, 2.1rem); line-height: 1.1; }
  .social-icons { gap: 8px; margin-bottom: 2px; }
  .social-icons a { font-size: 16px; }
  .hero-header { align-items: flex-start; margin-bottom: clamp(-6px, 16px - 4.4vw, 2px); gap: clamp(10px, 4vw, 16px); }
  .hero-graphic { height: clamp(38px, 17px + 6.43vw, 56px); max-width: min(180px, 45vw); margin-top: -8px; }
  .typewriter-wrap { font-size: 0.88rem; height: 1.1em; margin-bottom: 8px; }
}
@media (max-width: 640px) {
  .topbar { padding: 0 16px; }
  .nav-dropdown {
    padding-top: calc(env(safe-area-inset-top, 0px) + 8px);
  }
  .nav-dropdown-body {
    padding: 8px 16px 10px;
  }
  .nav-dropdown-item {
    font-size: 0.88rem;
    padding: 8px 4px;
  }
  .nav-dropdown-bottom {
    padding: 6px 16px max(10px, env(safe-area-inset-bottom, 0px));
  }
  .topbar-clock-time { font-size: 15px; }
  .topbar-clock-sub { font-size: 8px; }
  .social-icons { gap: 8px; }
  .exp-grid { grid-template-columns: 1fr; }
  .page { padding: 70px 20px 70px; max-width: 100%; }
  .site-footer { padding: 32px 20px 32px; }
  .footer-inner {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 20px 24px;
  }
  .footer-constellation { grid-row: 1; grid-column: 1; width: min(200px, 40vw); height: clamp(120px, 32vw, 156px); margin-right: 0; }
  .footer-identity { grid-row: 1; grid-column: 2; margin-left: 0; align-self: center; }
  .footer-identity h3 { font-size: 1.9rem; letter-spacing: 0.05em; }
  .footer-identity p { font-size: 0.88rem; letter-spacing: 0.12em; }
  .footer-col:first-of-type { grid-row: 2; grid-column: 1; }
  .footer-col:last-of-type { grid-row: 2; grid-column: 2; }
}
@media (max-width: 480px) {
  .hero-header { flex-wrap: nowrap; }
  .kb-layout-mobile {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }
  #page-home { padding-left: 20px; padding-right: 20px; }
  .footer-identity { min-width: 0; }
  .footer-col { min-width: 0; }
}
/* Ultra-narrow phones (≤360px): collapse footer to a single stacked column and tighten gutters */
@media (max-width: 360px) {
  #page-home { padding-left: 16px; padding-right: 16px; }
  .site-footer { padding: 28px 16px 28px; }
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .footer-constellation { grid-row: 1; grid-column: 1; width: min(160px, 60vw); height: clamp(100px, 38vw, 130px); }
  .footer-identity { grid-row: 2; grid-column: 1; }
  .footer-col:first-of-type { grid-row: 3; grid-column: 1; }
  .footer-col:last-of-type { grid-row: 4; grid-column: 1; }
  .footer-identity h3 { font-size: 1.6rem; }
  .footer-identity p { font-size: 0.78rem; }
}
@media (prefers-reduced-motion: reduce) {
  .footer-constellation svg circle.orion-star:hover {
    transform: scale(1.35);
    filter: drop-shadow(0 0 8px rgba(174, 191, 208, 0.45));
  }
}
@media (min-width: 1401px) {
  /* ── Viewport-scaled topbar ── */
  .topbar {
    height: clamp(48px, 3.4vw, 68px);
    padding: 0 clamp(32px, 2.2vw, 56px);
  }
  .hamburger { font-size: clamp(22px, 1.5vw, 32px); }
  .topbar-nav { gap: clamp(18px, 1.3vw, 30px); }
  .topbar-nav a { font-size: clamp(13px, 0.88vw, 19px); }
  .topbar-left .topbar-nav { margin-left: clamp(12px, 0.9vw, 22px); }
  .topbar-right { gap: clamp(18px, 1.3vw, 30px); }
  .topbar-clock-time { font-size: clamp(17px, 1.15vw, 24px); }
  .topbar-clock-sub { font-size: clamp(9px, 0.6vw, 13px); }
  .theme-toggle { font-size: clamp(13px, 0.88vw, 19px); }

  /* ── Viewport-scaled nav dropdown ── */
  .nav-dropdown { padding-top: calc(env(safe-area-inset-top, 0px) + clamp(8px, 0.6vw, 16px)); }
  .nav-dropdown-body { padding: clamp(8px, 0.6vw, 16px) clamp(32px, 2.2vw, 56px) clamp(12px, 0.85vw, 22px); }
  .nav-dropdown-item { font-size: clamp(0.95rem, 0.88vw, 1.5rem); padding: clamp(9px, 0.7vw, 18px) clamp(8px, 0.6vw, 16px); }
  .nav-dropdown-bottom { padding: clamp(8px, 0.6vw, 16px) clamp(32px, 2.2vw, 56px) max(10px, env(safe-area-inset-bottom, 0px)); gap: clamp(16px, 1.1vw, 28px); }
  .nav-dropdown-bottom .hamburger.nav-dropdown-close { font-size: clamp(22px, 1.5vw, 32px); }
  .nav-dropdown-bottom .theme-toggle { font-size: clamp(12px, 0.82vw, 18px); }
  .nav-dropdown-time-corner .topbar-clock-time { font-size: clamp(13px, 1.15vw, 24px); }
  .nav-dropdown-time-corner .topbar-clock-sub { font-size: clamp(8px, 0.6vw, 13px); }

  /* ── Viewport-scaled home layout ── */
  #page-home { padding-top: clamp(48px, 3.4vw, 68px); }
  .home-layout {
    min-height: calc(100dvh - clamp(48px, 3.4vw, 68px));
    overflow: hidden;
  }
  .portrait-icons-row { display: flex; }
  .portrait-icons { display: none; }
  .home-left {
    border-right: 1px solid var(--border);
    padding-right: clamp(48px, 3.2vw, 72px);
    padding-top: clamp(16px, 1.4vw, 32px);
    padding-bottom: clamp(28px, 2.4vw, 52px);
    justify-content: space-between;
  }
  .home-right {
    padding-left: clamp(48px, 3.2vw, 72px);
    padding-top: clamp(16px, 1.4vw, 32px);
    padding-bottom: clamp(28px, 2.4vw, 52px);
    justify-content: space-between;
  }
  .home-left-top {
    margin-top: 0;
  }
  .home-right .section-title { margin-top: clamp(0px, 0.3vw, 8px); margin-bottom: clamp(8px, 0.6vw, 14px); }
  .home-left .portrait-section { margin-top: auto; }
  .home-right .kb-section { margin-top: clamp(8px, 0.6vw, 16px); }
  .exp-desc { line-height: 1.45; }
  .exp-meta { margin-bottom: clamp(4px, 0.3vw, 6px); }
  .exp-header { margin-bottom: clamp(2px, 0.2vw, 4px); }

  /* ── Viewport-scaled typography ── */
  .hero-name { font-size: clamp(1.8rem, 2.2vw, 4.2rem); }
  .typewriter-wrap { font-size: clamp(1rem, 0.9vw, 1.5rem); }
  .bio, .bio-secondary { font-size: clamp(0.88rem, 0.82vw, 1.2rem); }
  .explore-btn { font-size: clamp(0.82rem, 0.75vw, 1.1rem); }
  .explore-btn .arrow { font-size: clamp(1rem, 0.9vw, 1.4rem); }
  .social-icons a { font-size: clamp(18px, 1.2vw, 28px); }
  .portrait-icons-row i { font-size: clamp(20px, 1.35vw, 32px); }
  .personal-info { font-size: clamp(0.85rem, 0.78vw, 1.15rem); }
  .section-title { font-size: clamp(1.8rem, 1.8vw, 3rem); }
  .exp-title { font-size: clamp(0.95rem, 0.85vw, 1.35rem); }
  .exp-num { font-size: clamp(0.82rem, 0.72vw, 1.1rem); }
  .exp-desc { font-size: clamp(0.82rem, 0.75vw, 1.12rem); }
  .exp-meta { font-size: clamp(0.75rem, 0.66vw, 1rem); }
  .exp-meta i { font-size: clamp(0.75rem, 0.66vw, 1rem); }
  .exp-tag { font-size: clamp(0.68rem, 0.58vw, 0.92rem); }
  .exp-grid { gap: clamp(8px, 0.6vw, 14px); margin-bottom: clamp(10px, 0.7vw, 16px); }
  .kb-header { gap: clamp(12px, 1vw, 24px); overflow: visible; }
  .kb-header-left { padding-top: 2.2em; position: relative; }
  .kb-header-left .kb-label { position: absolute; top: 0; left: 0; margin-bottom: 0; }
  .kb-label { font-size: clamp(11px, 0.72vw, 16px); }
  .legend-item { font-size: clamp(10px, 0.66vw, 15px); }

  /* ── Viewport-scaled portrait & graphic ── */
  .portrait-clip { width: clamp(240px, 18vw, 380px); }
  .portrait-label-text { font-size: clamp(0.85rem, 0.78vw, 1.15rem); }
  .portrait-label-line { height: clamp(40px, 3.2vw, 68px); }
  .hero-graphic { height: clamp(70px, 4.8vw, 110px); }
  .bio { margin-top: clamp(20px, 1.4vw, 36px); margin-bottom: clamp(18px, 1.2vw, 32px); }
  .bio-secondary { margin-bottom: clamp(20px, 1.4vw, 36px); }
  .explore-btn { padding: clamp(11px, 0.75vw, 18px) clamp(26px, 1.7vw, 40px); margin-bottom: clamp(28px, 1.8vw, 44px); }
  .portrait-icons-row { gap: clamp(16px, 1.1vw, 28px); margin-bottom: clamp(12px, 0.9vw, 22px); }
  .social-icons { gap: clamp(8px, 0.55vw, 14px); margin-top: 0; margin-bottom: clamp(-24px, -1.5vw, -16px); }
  .hero-header { margin-bottom: clamp(-16px, -1.1vw, -8px); }

  /* ── Viewport-scaled keyboard: scale with both width and height ── */
  .kb-layout-desktop {
    font-size: clamp(7px, 0.58vw, 15.5px);
  }
  .kb-layout-desktop .keyboard {
    padding: 1.4em 1.6em;
    border-radius: 1.4em;
  }
  .kb-layout-desktop .kb-row { gap: 0.5em; margin-bottom: 0.5em; }
  .kb-layout-desktop .key {
    height: 4.2em; min-width: 4.2em; flex: 0 0 4.2em;
    border-radius: 0.4em; font-size: 1em;
    border-bottom-width: 0.25em;
  }
  .kb-layout-desktop .key span { font-size: 1em; }
  .kb-layout-desktop .key .subtext { font-size: 0.7em; max-width: 6em; }
  .kb-layout-desktop .key.k-tab { flex: 0 0 6.6em; min-width: 6.6em; }
  .kb-layout-desktop .key.k-caps { flex: 0 0 7.6em; min-width: 7.6em; }
  .kb-layout-desktop .key.k-shift-l { flex: 0 0 8.8em; min-width: 8.8em; }
  .kb-layout-desktop .key.k-shift-r { flex: 0 0 11em; min-width: 11em; }
  .kb-layout-desktop .key.k-bksp { flex: 0 0 8.8em; min-width: 8.8em; }
  .kb-layout-desktop .key.k-enter { flex: 0 0 8.8em; min-width: 8.8em; }
  .kb-layout-desktop .key.k-space { flex: 0 0 24em; min-width: 24em; }
  .kb-layout-desktop .key.kb-mod { min-width: 4.4em; flex: 0 0 4.4em; }
  /* Info panel scales too */
  .info-panel {
    font-size: clamp(10px, 0.72vw, 16px);
    padding: 0.9em 1.2em;
    border-radius: 1em;
  }
  .info-panel .tag { font-size: 0.8em; margin-bottom: 0.4em; }
  .info-panel .val { font-size: 1.1em; }
  .info-panel .desc { font-size: 0.85em; margin-top: 0.5em; }

  /* ── Viewport-scaled footer ── */
  .site-footer { padding: clamp(48px, 3.2vw, 72px) clamp(48px, 4.2vw, 80px); }
  .footer-inner { max-width: none; gap: clamp(32px, 2.2vw, 52px); }
  .footer-identity h3 { font-size: clamp(2.45rem, 2.4vw, 4rem); }
  .footer-identity p { font-size: clamp(1.05rem, 0.9vw, 1.5rem); }
  .footer-col h4 { font-size: clamp(0.82rem, 0.72vw, 1.1rem); margin-bottom: clamp(12px, 0.85vw, 20px); }
  .footer-col a, .footer-col span { font-size: clamp(0.7rem, 0.6vw, 0.95rem); }
  .footer-divider { margin: clamp(24px, 1.6vw, 40px) 0; }
  .footer-bottom { max-width: none; }
  .footer-bottom span { font-size: clamp(0.7rem, 0.6vw, 0.95rem); }
  .footer-constellation { flex: 0 0 clamp(252px, 16vw, 360px); height: clamp(196px, 13vw, 280px); }

  /* ── Viewport-scaled subpages ── */
  .page:not(#page-home) {
    padding: clamp(80px, 5.5vw, 120px) clamp(48px, 4.2vw, 80px) clamp(56px, 4vw, 88px);
  }
  .page.active:not(#page-home) > * {
    width: min(clamp(52rem, 50vw, 68rem), 100%);
  }
  .page-title { font-size: clamp(2.85rem, 3.4vw, 4.25rem); margin-bottom: clamp(36px, 2.4vw, 60px); }

  /* Projects */
  .project-list { gap: clamp(14px, 1vw, 20px); }
  .project-card { padding: clamp(22px, 1.5vw, 36px) 0; }
  .project-num { font-size: clamp(0.78rem, 0.7vw, 1rem); }
  .project-name { font-size: clamp(1.05rem, 0.95vw, 1.5rem); }
  .project-desc { font-size: clamp(0.88rem, 0.82vw, 1.2rem); }
  .project-tag { font-size: clamp(0.62rem, 0.55vw, 0.8rem); }
  .project-year { font-size: clamp(0.7rem, 0.62vw, 0.9rem); }

  /* Values */
  .values-list {
    gap: 0;
    padding: 0 clamp(8px, 0.8vw, 18px);
  }
  .value-item {
    grid-template-columns: clamp(70px, 5vw, 110px) 1fr;
    gap: clamp(28px, 2vw, 48px);
    padding: clamp(24px, 1.7vw, 38px) clamp(8px, 0.8vw, 18px);
    font-size: clamp(0.95rem, 0.85vw, 1.35rem);
  }
  .value-num { font-size: clamp(0.78rem, 0.65vw, 1rem); }

  /* Testimony */
  .testimony-text {
    font-size: clamp(0.9rem, 0.82vw, 1.2rem);
    padding: clamp(22px, 1.5vw, 36px) clamp(28px, 2vw, 44px);
  }
  .testimony-yt {
    font-size: clamp(1.85rem, 2.2vw, 2.5rem);
    margin-top: clamp(-4px, -0.15vw, 0px);
  }
  .testimony-text::before,
  .testimony-text::after {
    width: clamp(20px, 1.4vw, 28px);
    height: clamp(20px, 1.4vw, 28px);
  }
  .testimony-text p { margin-bottom: clamp(18px, 1.2vw, 30px); }
  .testimony-scroll-section { margin-bottom: clamp(18px, 1.2vw, 30px); }
  .testimony-scroll-section p { margin: 0; }

  /* Contact */
  .contact-split { column-gap: clamp(72px, 6vw, 144px); }
  .contact-handles { max-width: clamp(280px, 22vw, 380px); }
  .contact-footer { font-size: clamp(0.78rem, 0.68vw, 1rem); }
  .contact-row { padding: clamp(18px, 1.2vw, 30px) 0; font-size: clamp(0.95rem, 0.85vw, 1.3rem); gap: clamp(18px, 1.2vw, 28px); }
  .contact-row-icon { width: clamp(22px, 1.6vw, 32px); }
  .contact-form { padding: clamp(28px, 2vw, 40px); }
  .contact-form input,
  .contact-form textarea { font-size: clamp(0.92rem, 0.82vw, 1.2rem); padding: clamp(18px, 1.2vw, 30px) 0; }
  .contact-form button { font-size: clamp(0.82rem, 0.72vw, 1.05rem); padding: clamp(10px, 0.7vw, 16px) clamp(28px, 2vw, 44px); }
}