:root {
  --bg:      #f7f5f2;
  --bg2:     #ffffff;
  --bg3:     #f0ede8;
  --border:  #e0dbd4;
  --b2:      #ccc6bc;
  --acc:     #c0392b;
  --acc2:    #e74c3c;
  --dim:     #922b21;
  --fg:      #1a1612;
  --fg2:     #5a5048;
  --fg3:     #a09688;
  --code:    #c0392b;
  --mono: 'Monaco','SF Mono','Fira Code','Cascadia Code',monospace;
  --sans: -apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;
  --sb: 272px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:17px;overflow:hidden}

/* ═══ MOBILE HAMBURGER ═══ */
.mob-bar{
  display:none;position:fixed;top:0;left:0;right:0;z-index:300;
  height:48px;background:rgba(247,245,242,.97);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  align-items:center;justify-content:space-between;
  padding:0 16px;
}
.mob-bar .mob-title{font-size:18px;font-weight:900;letter-spacing:-.02em;
  background:linear-gradient(135deg,var(--fg) 45%,var(--acc));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.ham{background:none;border:none;cursor:pointer;padding:6px;display:flex;flex-direction:column;gap:5px;}
.ham span{display:block;width:22px;height:2px;background:var(--fg);border-radius:1px;transition:transform .2s,opacity .2s;}
.ham.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.ham.open span:nth-child(2){opacity:0;}
.ham.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.sb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:199;}
.sb-overlay.show{display:block;}

/* ═══ LAYOUT ═══ */
.wrap{display:flex;height:100vh;overflow:hidden}

/* ═══ SIDEBAR ═══ */
.sb{
  width:var(--sb);min-width:var(--sb);
  background:var(--bg2);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;overflow:hidden;
  position:relative;
}
.sb::after{
  content:'';position:absolute;top:0;right:0;bottom:0;width:2px;
  background:linear-gradient(180deg,transparent,var(--acc) 20%,var(--acc) 80%,transparent);
}

/* Identity block */
.sb-id{padding:28px 22px 20px;border-bottom:1px solid var(--border);}
.sb-name{
  font-size:38px;font-weight:900;letter-spacing:-.02em;
  line-height:1;margin-bottom:4px;
  background:linear-gradient(135deg,var(--fg) 45%,var(--acc));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.sb-role{
  font-family:var(--mono);font-size:11px;color:var(--acc);
  letter-spacing:.18em;text-transform:uppercase;margin-bottom:18px;
}
.sb-contacts{list-style:none;display:flex;flex-direction:column;gap:5px;}
.sb-contacts li{
  display:flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:12px;color:var(--fg2);
}
.sb-contacts li b{color:var(--acc);font-weight:400;width:12px;text-align:center;flex-shrink:0;}

/* Nav */
.sb-nav{flex:1;overflow-y:auto;padding:10px 0;}
.sb-nav::-webkit-scrollbar{width:2px;}
.sb-nav::-webkit-scrollbar-thumb{background:var(--b2);}
.ng{padding:10px 22px 3px;font-family:var(--mono);font-size:10px;color:var(--fg3);letter-spacing:.18em;text-transform:uppercase;}
.ni{
  display:flex;align-items:center;gap:10px;
  padding:9px 22px;cursor:pointer;
  border-left:2px solid transparent;
  transition:background .1s,border-color .1s;
  position:relative;
}
.ni:hover{background:rgba(192,57,43,.05);border-left-color:rgba(192,57,43,.35);}
.ni.on{background:rgba(192,57,43,.08);border-left-color:var(--acc);}
.ni.on .nl{color:var(--fg);}
.ni.on .nn{border-color:var(--dim);color:var(--acc);}
.ni-ic{font-family:var(--mono);font-size:10px;color:var(--fg3);width:14px;text-align:center;flex-shrink:0;}
.ni.on .ni-ic{color:var(--acc);}
.nl{font-size:14px;color:var(--fg2);flex:1;letter-spacing:.01em;}
.nn{font-family:var(--mono);font-size:11px;color:var(--fg3);background:var(--bg3);border:1px solid var(--border);padding:1px 5px;border-radius:2px;}

/* Skills */
.sb-skills{padding:12px 22px 14px;border-top:1px solid var(--border);}
.sb-lbl{font-family:var(--mono);font-size:10px;color:var(--fg3);letter-spacing:.18em;text-transform:uppercase;margin-bottom:9px;}
.sk{margin-bottom:8px;}
.sk-h{display:flex;justify-content:space-between;margin-bottom:3px;}
.sk-h span:first-child{font-family:var(--mono);font-size:12px;color:var(--fg2);}
.sk-h span:last-child{font-family:var(--mono);font-size:12px;color:var(--acc);}
.bar{height:2px;background:var(--border);border-radius:1px;overflow:hidden;}
.bf{height:100%;background:linear-gradient(90deg,var(--dim),var(--acc2));border-radius:1px;}

/* Langs */
.sb-langs{padding:0 22px 14px;border-top:1px solid var(--border);padding-top:10px;}
.lr{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;}
.lr span{font-family:var(--mono);font-size:12px;color:var(--fg2);}
.dots{display:flex;gap:3px;}
.d{width:7px;height:7px;border-radius:50%;border:1px solid var(--dim);}
.d.on{background:var(--acc);border-color:var(--acc);}

/* ═══ MAIN ═══ */
.main{flex:1;overflow-y:auto;background:var(--bg);scroll-behavior:smooth;}
.main::-webkit-scrollbar{width:3px;}
.main::-webkit-scrollbar-thumb{background:var(--b2);border-radius:2px;}

/* Topbar */
.top{
  position:sticky;top:0;z-index:100;
  height:48px;padding:0 48px;
  background:rgba(247,245,242,.97);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
}
.tp{font-family:var(--mono);font-size:13px;color:var(--fg3);display:flex;align-items:center;gap:5px;}
.tp .cur{color:var(--fg2);}
.tm{font-family:var(--mono);font-size:12px;color:var(--fg3);display:flex;gap:14px;align-items:center;}
.blink{display:inline-block;width:5px;height:5px;border-radius:50%;background:#c0392b;margin-right:4px;animation:bl 2s infinite;}
@keyframes bl{0%,100%{opacity:1}50%{opacity:.2}}

/* ═══ PAGES ═══ */
.page{
  min-height:calc(100vh - 48px);
  padding:48px 48px 64px;
  display:flex;flex-direction:column;justify-content:flex-start;padding-top:10vh;
  border-bottom:1px solid var(--border);
  position:relative;overflow:hidden;
}

/* page bg number */
.page::before{
  content:attr(data-n);
  position:absolute;right:-20px;top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:200px;font-weight:900;
  color:rgba(192,57,43,.06);line-height:1;pointer-events:none;
  user-select:none;letter-spacing:-.05em;
}

/* Page header */
.ph{margin-bottom:40px;}
.ph-tag{
  display:inline-block;font-family:var(--mono);font-size:12px;
  color:var(--acc);background:rgba(192,57,43,.06);
  border:1px solid rgba(192,57,43,.22);padding:3px 10px;border-radius:2px;
  letter-spacing:.1em;margin-bottom:14px;
}
.ph-title{
  font-size:62px;font-weight:900;letter-spacing:-.03em;line-height:.95;
  color:var(--fg);
}
.ph-title .acc{color:var(--acc);}
.ph-sub{
  font-family:var(--mono);font-size:11px;color:var(--fg3);
  margin-top:10px;letter-spacing:.05em;
}
.ph-line{
  width:48px;height:2px;background:var(--acc);margin-top:14px;
}

/* ── ABOUT page ── */
#about .about-body{
  display:grid;grid-template-columns:1.5fr 1fr;gap:48px;
  align-items:start;max-width:90%;
}
.about-text{
  font-size:18px;line-height:1.9;color:#4a4038;
  border-left:2px solid var(--acc);padding-left:20px;
}
.about-text .hl{color:var(--acc2);font-weight:700;}
.about-aside{display:flex;flex-direction:column;gap:16px;}
.aside-card{
  background:var(--bg2);border:1px solid var(--border);
  border-left:2px solid var(--acc);
  padding:14px 16px;border-radius:0 3px 3px 0;
}
.aside-card-t{font-family:var(--mono);font-size:9px;color:var(--acc);letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px;}
.aside-card-v{font-size:15px;color:var(--fg2);line-height:1.6;}

/* ── STATS page ── */
#stats .stats-body{max-width:900px;}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-bottom:40px;}
.stat{
  background:var(--bg2);border:1px solid var(--border);
  padding:32px 20px;text-align:center;position:relative;overflow:hidden;
}
.stat::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--acc);}
.stat-n{font-family:var(--mono);font-size:64px;font-weight:900;color:var(--acc);line-height:1;margin-bottom:6px;}
.stat-l{font-family:var(--mono);font-size:12px;color:var(--fg3);letter-spacing:.1em;text-transform:uppercase;}
.stats-quote{
  font-size:22px;font-weight:700;color:var(--fg2);
  border-left:3px solid var(--acc);padding-left:22px;line-height:1.75;
  max-width:700px;
}
.stats-quote .hl{color:var(--fg);}

/* ── EXP page ── */
.exp-page .exp-inner{max-width:900px;display:grid;grid-template-columns:200px 1fr;gap:0;}
.exp-left{
  border-right:1px solid var(--border);
  padding-right:32px;padding-top:4px;
}
.exp-co-big{font-size:34px;font-weight:900;color:var(--fg);letter-spacing:-.02em;margin-bottom:4px;}
.exp-co-sub{font-family:var(--mono);font-size:12px;color:var(--fg3);line-height:1.5;margin-bottom:20px;}
.exp-period-big{
  font-family:var(--mono);font-size:13px;color:var(--acc);
  border:1px solid rgba(192,57,43,.3);background:rgba(192,57,43,.06);
  padding:4px 10px;border-radius:2px;display:inline-block;margin-bottom:12px;
}
.exp-duration{font-family:var(--mono);font-size:11px;color:var(--fg3);letter-spacing:.08em;}
.exp-right{padding-left:36px;padding-top:4px;}
.exp-role-big{font-size:27px;font-weight:800;color:var(--fg);margin-bottom:12px;}
.exp-desc{font-size:17px;line-height:1.85;color:#5a5048;margin-bottom:20px;text-align:justify;}
.bullets{display:flex;flex-direction:column;gap:10px;}
.bullet{display:flex;gap:10px;font-size:16px;color:#6a6058;line-height:1.75;}
.bullet::before{content:'▸';color:var(--acc);flex-shrink:0;font-size:10px;margin-top:4px;}
.em{color:#1a1612;font-weight:700;}

/* ── EDU page ── */
#education .edu-inner{max-width:900px;}
.edu-big{
  display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;
}
.edu-left-num{
  font-family:var(--mono);font-size:140px;font-weight:900;color:var(--acc);
  line-height:1;margin-bottom:8px;opacity:.85;
}
.edu-left-label{font-size:16px;color:var(--fg3);font-family:var(--mono);letter-spacing:.06em;}
.edu-card{
  background:var(--bg2);border:1px solid var(--border);
  border-left:3px solid var(--acc);
  padding:28px 28px;border-radius:0 4px 4px 0;
}
.edu-deg{font-size:26px;font-weight:800;color:var(--fg);margin-bottom:6px;}
.edu-yr{font-family:var(--mono);font-size:15px;color:var(--acc);margin-bottom:8px;}
.edu-sch{font-family:var(--mono);font-size:14px;color:var(--fg2);margin-bottom:14px;}
.edu-note{font-size:16px;color:#7a7068;border-left:1px solid var(--border);padding-left:12px;}

/* ── TECH page ── */
#tech .tech-inner{max-width:900px;}
.tech-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:2px;
  margin-top:8px;
}
.t-cell{
  background:var(--bg2);border:1px solid var(--border);
  padding:16px 18px;position:relative;overflow:hidden;
  transition:background .15s,border-color .15s;cursor:default;
}
.t-cell:hover{background:rgba(192,57,43,.05);border-color:rgba(192,57,43,.3);}
.t-cell.core{border-color:rgba(192,57,43,.3);background:rgba(192,57,43,.04);}
.t-cell.core:hover{background:rgba(192,57,43,.09);}
.t-cell::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--acc);opacity:0;transition:opacity .15s;
}
.t-cell:hover::before{opacity:1;}
.t-name{font-family:var(--mono);font-size:16px;color:var(--fg2);font-weight:500;}
.t-cell.core .t-name{color:var(--acc);font-weight:700;}
.t-cat{font-size:13px;color:var(--fg3);margin-top:4px;font-family:var(--mono);}

/* ═══ COVER PAGE ═══ */
.cover{
  min-height:calc(100vh - 48px);
  padding:0 56px;
  display:flex;flex-direction:column;justify-content:center;
  position:relative;overflow:hidden;
  background:var(--bg);
  border-bottom:1px solid var(--border);
}
/* subtle grid pattern */
.cover::before{
  content:'';
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(192,57,43,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(192,57,43,.06) 1px,transparent 1px);
  background-size:48px 48px;
  pointer-events:none;
}
/* big decorative letter */
.cover-deco{
  position:absolute;right:-40px;top:50%;
  transform:translateY(-50%);
  font-family:var(--mono);font-size:360px;font-weight:900;
  line-height:1;color:rgba(192,57,43,.05);
  pointer-events:none;user-select:none;letter-spacing:-.05em;
}
.cover-inner{
  position:relative;z-index:1;
  max-width:780px;
}
.cover-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11px;color:var(--acc);
  letter-spacing:.2em;text-transform:uppercase;
  border:1px solid rgba(192,57,43,.28);background:rgba(192,57,43,.06);
  padding:4px 12px;border-radius:2px;margin-bottom:28px;
}
.cover-eyebrow .blink{margin-right:0;}
.cover-name{
  font-size:clamp(52px,8vw,96px);font-weight:900;
  letter-spacing:-.04em;line-height:.9;
  color:var(--fg);
  margin-bottom:10px;
}
.cover-name .k{color:var(--acc);}
.cover-role{
  font-family:var(--mono);font-size:15px;color:var(--fg3);
  letter-spacing:.12em;text-transform:uppercase;
  margin-bottom:28px;
}
.cover-desc{
  font-size:17px;line-height:1.85;color:var(--fg2);
  max-width:580px;
  border-left:2px solid var(--acc);
  padding-left:18px;
  margin-bottom:40px;
}
.cover-stats{
  display:flex;gap:0;margin-bottom:40px;
  border:1px solid var(--border);
  background:var(--bg2);
  width:fit-content;
  border-radius:2px;
  overflow:hidden;
}
.cv-stat{
  padding:16px 28px;text-align:center;
  border-right:1px solid var(--border);
  position:relative;
}
.cv-stat:last-child{border-right:none;}
.cv-stat::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--dim),var(--acc2));
}
.cv-stat-n{
  font-family:var(--mono);font-size:32px;font-weight:900;
  color:var(--acc);line-height:1;margin-bottom:4px;
}
.cv-stat-l{
  font-family:var(--mono);font-size:10px;color:var(--fg3);
  letter-spacing:.12em;text-transform:uppercase;
}
/* Section jump links */
.cover-nav{
  display:flex;flex-wrap:wrap;gap:10px;
}
.cv-link{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:13px;
  color:var(--fg2);
  background:var(--bg2);
  border:1px solid var(--border);
  padding:8px 16px;
  border-radius:2px;
  cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;
  text-decoration:none;
  position:relative;overflow:hidden;
}
.cv-link::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--acc);opacity:0;transition:opacity .15s;
}
.cv-link:hover{background:rgba(192,57,43,.06);border-color:rgba(192,57,43,.35);color:var(--fg);}
.cv-link:hover::before{opacity:1;}
.cv-link .cv-link-ic{color:var(--acc);font-size:10px;}
/* Scroll hint */
.cover-scroll{
  position:absolute;bottom:28px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:4px;
  font-family:var(--mono);font-size:10px;color:var(--fg3);
  letter-spacing:.1em;cursor:pointer;
  animation:fadeUp 2.5s ease infinite;
}
@keyframes fadeUp{
  0%,100%{opacity:.4;transform:translateX(-50%) translateY(0);}
  50%{opacity:.9;transform:translateX(-50%) translateY(-5px);}
}
.cover-scroll-line{
  width:1px;height:36px;
  background:linear-gradient(180deg,var(--acc),transparent);
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 768px) {
  html,body{overflow:auto;height:auto;}

  /* Show mobile bar */
  .mob-bar{display:flex;}

  /* Sidebar: hidden off-screen, slide in as overlay */
  .sb{
    position:fixed;top:0;left:0;bottom:0;z-index:200;
    transform:translateX(-100%);transition:transform .25s ease;
    width:min(var(--sb), 88vw) !important;min-width:0 !important;
    overflow-y:auto;
  }
  .sb.open{transform:translateX(0);}

  /* Layout */
  .wrap{display:block;height:auto;overflow:visible;}
  .main{overflow:visible;padding-top:48px;}

  /* Topbar */
  .top{padding:0 16px;height:44px;}
  .tm{gap:8px;font-size:11px;}

  /* Cover */
  .cover{padding:0 20px;min-height:100svh;justify-content:center;}
  .cover-deco{font-size:180px;right:-20px;}
  .cover-name{margin-bottom:8px;}
  .cover-stats{width:100%;}
  .cv-stat{flex:1;padding:12px 10px;}
  .cv-stat-n{font-size:24px;}
  .cover-desc{font-size:15px;margin-bottom:28px;}
  .cover-scroll{display:none;}

  /* Pages */
  .page{padding:32px 16px 48px;min-height:auto;padding-top:32px;}
  .page::before{font-size:100px;right:-10px;}

  /* Page header */
  .ph-title{font-size:38px;}

  /* About */
  #about .about-body{grid-template-columns:1fr;gap:24px;max-width:100%;}

  /* Stats */
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .stat-n{font-size:42px;}
  .stats-quote{font-size:17px;}

  /* Experience */
  .exp-page .exp-inner{grid-template-columns:1fr;gap:0;}
  .exp-left{border-right:none;border-bottom:1px solid var(--border);padding-right:0;padding-bottom:16px;margin-bottom:20px;}
  .exp-right{padding-left:0;}
  .exp-co-big{font-size:26px;}
  .exp-role-big{font-size:21px;}

  /* Education */
  .edu-big{grid-template-columns:1fr;gap:20px;}
  .edu-left-num{font-size:80px;}

  /* Tech */
  .tech-grid{grid-template-columns:repeat(2,1fr);}
}

@media (max-width: 480px) {
  .stats-grid{grid-template-columns:1fr 1fr;}
  .tech-grid{grid-template-columns:1fr 1fr;}
  .ph-title{font-size:30px;}
  .top .tm{display:none;}
}