/* ---------- NAV ---------- */
nav{
  display:flex; justify-content:space-between; align-items:center; padding:16px 64px; gap:24px; flex-wrap:wrap;
  border-bottom:1px solid var(--line); position:sticky; top:0;
  background:color-mix(in srgb, var(--bg0) 90%, transparent); backdrop-filter:blur(6px); z-index:20;
}
.nav-left{ display:flex; align-items:center; gap:16px; }
.navbrand{ display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0; }
.navbrand .navphoto{ width:44px; height:44px; border-radius:50%; overflow:hidden; border:1.5px solid var(--line); flex-shrink:0; }
.navbrand .navphoto img{ display:block; width:100%; height:100%; object-fit:cover; }
.wordmark{ font-family:'Zilla Slab', serif; font-size:1.25rem; font-weight:700; letter-spacing:-0.02em; }
.wordmark span{ color:var(--accent); }
.nav-identity{ display:flex; flex-direction:column; gap:2px; padding-left:16px; border-left:1px solid var(--line); }
.nav-name{ font-family:'Zilla Slab', serif; font-size:1.3rem; font-weight:700; color:var(--ink); line-height:1.15; }
.nav-edu{ display:flex; flex-direction:column; }
.nav-edu span{ font-family:'Inter', sans-serif; font-size:0.72rem; font-weight:600; color:var(--ink-muted); line-height:1.4; }
.nav-right{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.nav-linkedin{
  display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--ink);
  border:1px solid var(--line); border-radius:20px; padding:6px 14px 6px 6px; font-family:'IBM Plex Mono', monospace; font-size:0.8125rem;
}
.nav-linkedin:hover{ border-color:var(--accent); }
.nav-linkedin .li-icon{
  display:flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:5px;
  background:var(--accent); color:var(--bg0); font-family:'Inter',sans-serif; font-weight:700; font-size:0.68rem;
}
.navlinks{ display:flex; gap:8px; align-items:center; }
.navlinks a.tab{
  font-family:'IBM Plex Mono', monospace; font-size:0.8125rem; letter-spacing:0.03em; color:var(--ink-muted);
  text-decoration:none; padding:9px 14px; border-radius:6px; border:1px solid transparent;
}
.navlinks a.tab[aria-current="true"]{ background:var(--bg1); color:var(--accent); border-color:var(--line); }
.gearbtn{ background:var(--bg1); border:1px solid var(--line); color:var(--ink); width:36px; height:36px; border-radius:8px; cursor:pointer; font-size:1rem; }

/* ---------- settings panel ---------- */
.settings{
  position:fixed; top:100px; right:64px; width:300px; background:var(--bg1); border:1px solid var(--line);
  border-radius:12px; padding:20px; box-shadow:var(--shadow); z-index:30; display:none;
}
.settings.open{ display:block; }
.settings h4{ font-family:'IBM Plex Mono',monospace; font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-muted); margin:14px 0 8px; }
.settings h4:first-child{ margin-top:0; }
.swatchrow{ display:flex; gap:8px; flex-wrap:wrap; }
.swatch{ width:28px; height:28px; border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0; }
.swatch[aria-pressed="true"]{ border-color:var(--ink); }
.sw-teal{background:#22A47E;} .sw-slate{background:#6C9BD1;} .sw-amber{background:#D99A3C;} .sw-forest{background:#5FA35A;} .sw-indigo{background:#8B7FD1;}
.segrow{ display:flex; gap:6px; }
.seg{ flex:1; font-family:'IBM Plex Mono',monospace; font-size:0.72rem; padding:7px 4px; border-radius:6px; border:1px solid var(--line); background:var(--bg2); color:var(--ink-muted); cursor:pointer; }
.seg[aria-pressed="true"]{ background:var(--accent); color:var(--bg0); border-color:var(--accent); }
.togglerow{ display:flex; align-items:center; justify-content:space-between; }
.togglerow label{ font-size:0.85rem; }
.modeStatus{ font-family:'IBM Plex Mono',monospace; font-size:0.68rem; color:var(--ink-muted); margin-top:8px; line-height:1.5; }
.switch{ position:relative; width:38px; height:22px; }
.switch input{ opacity:0; width:0; height:0; }
.slider{ position:absolute; inset:0; background:var(--bg2); border:1px solid var(--line); border-radius:22px; cursor:pointer; transition:.2s; }
.slider::before{ content:""; position:absolute; width:16px; height:16px; left:2px; top:2px; background:var(--ink-muted); border-radius:50%; transition:.2s; }
input:checked + .slider{ background:var(--accent); }
input:checked + .slider::before{ transform:translateX(16px); background:var(--bg0); }

/* ---------- shared "screen" wrapper used by L0 / L1 / L2 ---------- */
.divider{ display:flex; align-items:center; gap:18px; padding:0 64px; max-width:1280px; margin:60px auto 0; }
.divider .line{ flex:1; height:1px; background:var(--line); }
.divider .label{ font-family:'IBM Plex Mono', monospace; font-size:0.6875rem; color:var(--ink-muted); letter-spacing:0.1em; text-transform:uppercase; }
.screenwrap{ padding:24px 64px 100px; max-width:1280px; margin:0 auto; }
.screen{ background:var(--bg1); border:1px solid var(--line); border-radius:10px; overflow:hidden; position:relative; }
.screen-photo{ position:absolute; top:0; right:0; width:290px; height:230px; z-index:1; }
.screen-photo img{ display:block; width:100%; height:100%; object-fit:cover; }
@media (max-width:900px){ .screen-photo{ display:none; } }
.screen-chrome{ display:flex; gap:6px; padding:14px 18px; border-bottom:1px solid var(--line); }
.dot{ width:9px; height:9px; border-radius:50%; background:var(--line); }

footer{ text-align:center; padding:40px; color:var(--ink-muted); font-size:0.75rem; font-family:'IBM Plex Mono',monospace; }
footer .last-updated{ margin-top:6px; opacity:0.7; font-size:0.7rem; }

/* ---------- shared photo header, used on home / L0 / L1 / L2 ---------- */
.page-header{ margin-bottom:6px; }
.page-header-text{ min-width:0; }
.page-bio-inline{ display:flex; align-items:baseline; flex-wrap:wrap; gap:10px; margin:10px 0 18px; }
.bio-name{ font-family:'Zilla Slab',serif; font-weight:600; font-size:1.25rem; color:var(--ink); }
.bio-link{ font-family:'IBM Plex Mono',monospace; font-size:0.75rem; color:var(--accent); text-decoration:none; }
.bio-link:hover{ text-decoration:underline; }
.bio-edu{ display:flex; flex-wrap:wrap; gap:4px 14px; font-size:0.75rem; color:var(--ink-muted); width:100%; margin-top:2px; }
.bio-edu-item{ white-space:nowrap; }
.bio-edu-item::before{ content:"—"; margin-right:6px; color:var(--accent); }

/* ---------- certification badges, shown above the footer on every page ---------- */
.badges{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:28px; padding:36px 24px; border-top:1px solid var(--line); }
.badges img{ height:80px; width:auto; opacity:0.88; transition:opacity .2s ease; }
.badges img:hover{ opacity:1; }
.badges:empty{ display:none; }

@media (max-width:900px){
  nav{ padding:14px 20px; }
  .nav-identity{ display:none; }
  .nav-linkedin span:not(.li-icon){ display:none; }
  .nav-linkedin{ padding:6px; }
  .divider,.screenwrap{ padding-left:24px; padding-right:24px; }
  .settings{ top:76px; right:20px; left:20px; width:auto; }
  .badges{ gap:20px; padding:28px 20px; }
  .badges img{ height:64px; }
}