:root{
  --bg:#ffffff;
  --ink:#1a1a1a;
  --muted:#5c5c5c;
  --accent:#2563eb;
  --accent-rgb:37,99,235;
  --line:#e6e6e6;
  --card:#f7f8fa;
  --contrast-bg:#1a1a1a;
  --max:1180px;
}
:root[data-theme="dark"]{
  --bg:#121317;
  --ink:#f0f0f2;
  --muted:#9a9aa2;
  --accent:#2596be;
  --accent-rgb:37,150,190;
  --line:#2b2c33;
  --card:#1b1c22;
  --contrast-bg:#06070a;
}

*{box-sizing:border-box;}
html,body{height:100%;}
:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--accent-rgb),0.35);}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.5;
  overflow:hidden;
}
a, a:visited{color:inherit;}
button{font-family:inherit;}

/* ---------- App shell: fixed viewport, no page scroll (desktop) ---------- */
.app{
  height:100dvh;
  width:100%;
  position:relative;
}

/* ---------- Bottom dock nav (floating, replaces the old side nav) ---------- */
.nav-dock{
  position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:30;
  display:flex;align-items:center;gap:4px;padding:7px;border-radius:20px;
  background:var(--card);border:1px solid var(--line);
  box-shadow:0 14px 34px rgba(0,0,0,0.12);
}
.dock-item{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:14px;border:none;background:none;
  color:var(--muted);cursor:pointer;padding:0;
  transition:background .15s,color .15s,transform .15s;
}
.dock-item svg{width:19px;height:19px;}
.dock-item:hover{background:var(--bg);color:var(--ink);transform:translateY(-2px);}
.dock-item.active{background:var(--accent);color:#fff;}
.dock-divider{width:1px;height:26px;background:var(--line);margin:0 3px;flex:none;}

.dock-tooltip{
  position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(4px);
  padding:6px 10px;border-radius:7px;background:var(--contrast-bg);color:#fff;
  font-size:0.72rem;font-weight:600;white-space:nowrap;pointer-events:none;
  opacity:0;transition:opacity .15s,transform .15s;
}
.dock-item:hover .dock-tooltip,.dock-item:focus-visible .dock-tooltip{
  opacity:1;transform:translateX(-50%) translateY(0);
}

.theme-icon{display:none;}
.theme-icon-dark{display:inline-flex;}
:root[data-theme="dark"] .theme-icon-dark{display:none;}
:root[data-theme="dark"] .theme-icon-light{display:inline-flex;}

/* ---------- Pages + transition ---------- */
.stage{width:100%;height:100%;position:relative;}
.page{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  padding:44px 40px;
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(10px);
  transition:opacity .32s cubic-bezier(.2,.7,.3,1),transform .32s cubic-bezier(.2,.7,.3,1),visibility 0s linear .32s;
}
.page.active{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);
  transition:opacity .32s cubic-bezier(.2,.7,.3,1),transform .32s cubic-bezier(.2,.7,.3,1),visibility 0s linear 0s;
}
@media (prefers-reduced-motion:reduce){
  .page{transition:opacity .15s linear,visibility 0s linear;transform:none;}
}
.page-inner{max-width:var(--max);margin:0 auto;width:100%;height:100%;display:flex;flex-direction:column;min-height:0;}

.page-head{flex:none;margin-bottom:28px;}
.page-head h2{font-size:2.2rem;font-weight:800;margin:0;letter-spacing:-0.03em;}
.page-head p{margin:6px 0 0;color:var(--muted);font-size:0.92rem;}

/* ---------- Home ---------- */
#page-home .page-inner{align-items:center;justify-content:center;text-align:center;gap:22px;}
.location{margin:0;color:var(--muted);font-size:1.05rem;font-weight:600;}
#page-home h1{
  font-size:clamp(2.4rem,6vw,4rem);margin:0;letter-spacing:-0.03em;line-height:1.05;
  text-wrap:balance;
}
#page-home .lead{font-size:1.15rem;color:var(--muted);max-width:560px;margin:0;}
.home-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:6px;}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 26px;border-radius:10px;border:none;background:none;
  text-decoration:none;font-weight:700;font-size:0.98rem;cursor:pointer;
  transition:transform .15s,box-shadow .15s,background .15s;
}
.btn-primary{background:var(--contrast-bg);color:#fff;}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(0,0,0,0.16);}
.btn-secondary{background:var(--card);color:var(--ink);border:1px solid var(--line);}
.btn-secondary:hover{border-color:var(--accent);color:var(--accent);}

/* ---------- Resume: bigger headers, per-column timeline, column dividers ---------- */
#page-resume .cols{
  flex:1;min-height:0;display:grid;
  grid-template-columns:1.15fr 0.85fr 1fr;
}
.col{min-height:0;display:flex;flex-direction:column;padding:0 32px;}
.col:first-child{padding-left:0;}
.col:last-child{padding-right:0;}
.col h3{font-size:1.3rem;font-weight:800;letter-spacing:-0.02em;margin:0 0 20px;color:var(--ink);}
.col-scroll{flex:1;min-height:0;overflow-y:auto;padding-right:6px;}
.res-list{position:relative;padding-left:22px;}
.res-list::before{content:"";position:absolute;top:6px;bottom:6px;left:5px;width:2px;background:var(--line);}
.res-item{position:relative;padding-bottom:18px;margin-bottom:18px;}
.res-item:last-child{padding-bottom:0;margin-bottom:0;}
.res-item::before{
  content:"";position:absolute;top:5px;left:-22px;width:11px;height:11px;
  border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--bg);
}
.res-date{font-size:0.72rem;color:var(--muted);font-variant-numeric:tabular-nums;}
.res-item h4{margin:2px 0 1px;font-size:0.95rem;line-height:1.3;}
.res-org{color:var(--accent);font-size:0.8rem;font-weight:600;margin:0 0 8px;}
.res-item ul{margin:0;padding-left:16px;color:var(--muted);font-size:0.8rem;line-height:1.55;}
.res-item li{margin-bottom:3px;}

/* ---------- Projects: internal scroll only ---------- */
.proj-scroll{flex:1;min-height:0;overflow-y:auto;padding-right:6px;}
.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.project-card{
  border:1px solid var(--line);border-radius:12px;padding:22px;
  background:var(--card);transition:transform .15s,box-shadow .15s;
  display:flex;flex-direction:column;min-height:0;
}
.project-card:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,0.06);}
.project-card h3{margin:0 0 8px;font-size:1.05rem;line-height:1.3;}
.project-card p{margin:0 0 14px;color:var(--muted);font-size:0.87rem;line-height:1.5;flex:1;}
.project-card a{font-size:0.85rem;font-weight:600;text-decoration:none;color:var(--ink);white-space:nowrap;}
.project-card a:hover{color:var(--accent);}
.project-card a:visited{color:var(--ink);}

/* ---------- Contact ---------- */
#page-contact .page-inner{align-items:center;justify-content:center;text-align:center;gap:22px;}
#page-contact h2{
  font-size:clamp(2.4rem,6vw,4rem);margin:0;letter-spacing:-0.03em;line-height:1.05;
  text-wrap:balance;
}
#page-contact p{color:var(--muted);margin:0;max-width:440px;font-size:1.1rem;}
.contact-links{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:10px;}
.contact-links a{
  color:var(--ink);border:1px solid var(--line);padding:11px 22px;
  border-radius:8px;text-decoration:none;font-size:0.92rem;font-weight:600;
  transition:border-color .15s,color .15s;
}
.contact-links a:hover{border-color:var(--accent);color:var(--accent);}
.contact-links a:visited{color:var(--ink);}

/* ---------- Mobile: content this dense can't stay no-scroll on a phone,
   so the app shell becomes a normal scrolling page below this width.
   The dock stays as a floating bottom bar — same pattern as a native
   iOS/Android tab bar, so it just needs a bit less padding and room
   left underneath so scrolled content doesn't hide behind it. ---------- */
@media (max-width:820px){
  body{overflow:auto;}
  .app{height:auto;min-height:100dvh;}
  .page{
    position:relative;inset:auto;padding:32px 20px 110px;
    opacity:1;visibility:visible;transform:none;display:none;transition:none;
  }
  .page.active{display:flex;}
  .page-inner{height:auto;}
  #page-home .page-inner,#page-contact .page-inner{min-height:calc(100dvh - 32px - 110px);}
  #page-resume .cols{grid-template-columns:1fr;gap:28px;}
  .col,.col:first-child,.col:last-child{padding:0;}
  .col-scroll{overflow-y:visible;}
  .proj-scroll{overflow-y:visible;}
  .projects-grid{grid-template-columns:repeat(2,1fr);}
  .nav-dock{bottom:16px;padding:6px;}
  .dock-item{width:42px;height:42px;}
  .dock-tooltip{display:none;}
}
@media (max-width:520px){
  .projects-grid{grid-template-columns:1fr;}
}