/* ============================================================
   LAYOUT — Header, Footer, Page hero, Nav
   ============================================================ */

/* ── Site header ────────────────────────────────────────────── */
.site-header{position:sticky;top:0;z-index:100;
  background:color-mix(in oklab,var(--surface) 94%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);transition:box-shadow var(--ease-slow)}
.site-header.scrolled{box-shadow:var(--shadow-sm)}
.header-inner{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp8);height:64px}

/* ── Logo — typographic only, no square mark ────────────────── */
.site-logo{display:flex;align-items:baseline;gap:var(--sp2);
  text-decoration:none;flex-shrink:0}
.site-logo__name{font-family:var(--font-display);font-size:var(--tx-base);
  font-weight:700;color:var(--text);letter-spacing:-.015em;line-height:1}
.site-logo__sep{color:var(--border);font-weight:300;font-size:var(--tx-sm)}
.site-logo__role{font-size:var(--tx-xs);color:var(--text-muted);font-weight:400}

/* ── Main nav ───────────────────────────────────────────────── */
.site-nav{display:flex;align-items:center;gap:var(--sp1)}
.site-nav__list{display:flex;align-items:center;gap:var(--sp1);list-style:none}
.site-nav__link{display:inline-block;padding:var(--sp2) var(--sp3);
  font-size:var(--tx-sm);font-weight:500;color:var(--text-muted);
  text-decoration:none;border-radius:var(--r-md);
  transition:color var(--ease),background var(--ease)}
.site-nav__link:hover,.site-nav__link.active{color:var(--text);background:var(--surface-off)}
.site-nav__link.active{color:var(--teal)}

/* ── Header controls ────────────────────────────────────────── */
.header-controls{display:flex;align-items:center;gap:var(--sp3)}
.lang-toggle{display:flex;align-items:center;gap:2px;
  border:1px solid var(--border);border-radius:var(--r-full);overflow:hidden}
.lang-toggle__btn{padding:.3em .75em;background:transparent;color:var(--text-muted);
  cursor:pointer;border:none;font-size:var(--tx-xs);font-weight:700;
  font-family:var(--font-body);letter-spacing:.05em;text-transform:uppercase;
  text-decoration:none;transition:background var(--ease),color var(--ease)}
.lang-toggle__btn.active,.lang-toggle__btn:hover{background:var(--teal);color:var(--text-inv)}
.theme-toggle{display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:var(--r-full);border:1px solid var(--border);
  background:transparent;color:var(--text-muted);cursor:pointer;flex-shrink:0;
  transition:background var(--ease),color var(--ease)}
.theme-toggle:hover{background:var(--surface-off);color:var(--text)}
.mobile-menu-btn{display:none;flex-direction:column;justify-content:center;
  gap:5px;width:36px;height:36px;border:1px solid var(--border);
  border-radius:var(--r-md);padding:var(--sp2);background:transparent;cursor:pointer}
.mobile-menu-btn span{display:block;width:100%;height:1.5px;
  background:var(--text);border-radius:2px;transition:transform var(--ease),opacity var(--ease)}
.mobile-menu-btn[aria-expanded='true'] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.mobile-menu-btn[aria-expanded='true'] span:nth-child(2){opacity:0}
.mobile-menu-btn[aria-expanded='true'] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ── Mobile nav ─────────────────────────────────────────────── */
.mobile-nav{display:none;position:fixed;inset:64px 0 0;background:var(--surface);
  z-index:90;padding:var(--sp6) var(--sp4);overflow-y:auto;
  border-top:1px solid var(--border)}
.mobile-nav.open{display:block}
.mobile-nav__list{list-style:none;display:flex;flex-direction:column;gap:var(--sp1)}
.mobile-nav__link{display:block;padding:var(--sp3) var(--sp4);
  font-size:var(--tx-lg);font-family:var(--font-display);color:var(--text);
  text-decoration:none;border-radius:var(--r-md);font-weight:600}
.mobile-nav__link:hover,.mobile-nav__link.active{background:var(--surface-off);color:var(--teal)}
.mobile-nav__controls{margin-top:var(--sp6);padding-top:var(--sp6);
  border-top:1px solid var(--border);display:flex;gap:var(--sp3);align-items:center}

/* ── Footer ─────────────────────────────────────────────────── */
.site-footer{background:var(--surface);border-top:1px solid var(--border);
  padding-block:clamp(var(--sp12),6vw,var(--sp20))}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--sp12)}
.footer-brand__name{font-family:var(--font-display);font-size:var(--tx-lg);
  font-weight:700;color:var(--text);margin-bottom:var(--sp1)}
.footer-brand__role{font-size:var(--tx-sm);color:var(--text-muted);margin-bottom:var(--sp5)}
.footer-social{display:flex;gap:var(--sp3);flex-wrap:wrap}
.footer-social__link{display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:var(--r-full);border:1px solid var(--border);
  color:var(--text-muted);text-decoration:none;
  transition:background var(--ease),color var(--ease),border-color var(--ease)}
.footer-social__link:hover{background:var(--teal);color:var(--text-inv);border-color:var(--teal)}
.footer-nav__heading{font-size:var(--tx-xs);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-faint);margin-bottom:var(--sp4)}
.footer-nav__list{list-style:none;display:flex;flex-direction:column;gap:var(--sp2)}
.footer-nav__link{font-size:var(--tx-sm);color:var(--text-muted);text-decoration:none;
  transition:color var(--ease)}
.footer-nav__link:hover{color:var(--teal)}
.footer-bottom{margin-top:var(--sp12);padding-top:var(--sp6);
  border-top:1px solid var(--border);display:flex;justify-content:space-between;
  align-items:center;gap:var(--sp4);flex-wrap:wrap}
.footer-bottom__copy{font-size:var(--tx-xs);color:var(--text-faint)}

/* ── Page hero ──────────────────────────────────────────────── */
.page-hero{padding-block:clamp(var(--sp10),7vw,var(--sp20));
  border-bottom:1px solid var(--border)}
.page-hero__eyebrow{font-size:var(--tx-xs);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--teal);margin-bottom:var(--sp3)}
.page-hero__title{font-size:var(--tx-2xl);color:var(--text);margin-bottom:var(--sp4)}
.page-hero__intro{font-size:var(--tx-lg);color:var(--text-muted);
  max-width:60ch;line-height:1.6}

/* ── CV subnav ──────────────────────────────────────────────── */
.cv-subnav{position:sticky;top:64px;z-index:40;background:var(--surface);
  border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none}
.cv-subnav::-webkit-scrollbar{display:none}
.cv-subnav__list{display:flex;gap:0;list-style:none;white-space:nowrap}
.cv-subnav__link{display:block;padding:var(--sp3) var(--sp5);font-size:var(--tx-sm);
  color:var(--text-muted);text-decoration:none;border-bottom:2px solid transparent;
  transition:color var(--ease),border-color var(--ease)}
.cv-subnav__link:hover,.cv-subnav__link.active{color:var(--teal);border-bottom-color:var(--teal)}

/* ── Responsive ─────────────────────────────────────────────── */
@media(max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .site-logo__role{display:none}
}
@media(max-width:700px){
  .site-nav{display:none}
  .mobile-menu-btn{display:flex}
  .footer-grid{grid-template-columns:1fr;gap:var(--sp8)}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:var(--sp2)}
}