@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Mulish:wght@300;400&display=swap');

*{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#fff;--fg:#1c1c1c;--mid:#777;--faint:#bbb;
  --meta:#555;--tag-text:#555;
  --rule:#e8e8e8;--rule2:#efefef;--tag-bg:#e8e8e8;
  --btn-bg:#1c1c1c;--btn-fg:#fff;
}
@media(prefers-color-scheme:dark){
  :root{
    --bg:#141414;--fg:#e4e0d8;--mid:#888;--faint:#555;
    --meta:#aaa;--tag-text:#bbb;
    --rule:#252525;--rule2:#1f1f1f;--tag-bg:#272727;
    --btn-bg:#e4e0d8;--btn-fg:#141414;
  }
}
html.dark{
  --bg:#141414;--fg:#e4e0d8;--mid:#888;--faint:#555;
  --meta:#aaa;--tag-text:#bbb;
  --rule:#252525;--rule2:#1f1f1f;--tag-bg:#272727;
  --btn-bg:#e4e0d8;--btn-fg:#141414;
}
html.light{
  --bg:#fff;--fg:#1c1c1c;--mid:#777;--faint:#bbb;
  --meta:#555;--tag-text:#555;
  --rule:#e8e8e8;--rule2:#efefef;--tag-bg:#e8e8e8;
  --btn-bg:#1c1c1c;--btn-fg:#fff;
}

body{
  background:var(--bg);
  color:var(--fg);
  font-family:'Mulish',sans-serif;
  font-weight:300;
  font-size:14px;
  transition:background .25s,color .25s;
  scroll-behavior:smooth;
}

/* Toggle */
.toggle{
  position:fixed;top:16px;right:16px;z-index:99;
  background:var(--rule);border:none;
  padding:6px 12px;font-size:11px;
  font-family:'Mulish',sans-serif;
  color:var(--meta);cursor:pointer;
  border-radius:2px;letter-spacing:.04em;
  transition:background .25s,color .25s;
}

/* Layout */
.w{display:grid;grid-template-columns:220px 1fr;min-height:100vh}

/* Sidebar */
.sidebar{
  border-right:1px solid var(--rule);
  padding:36px 28px;
  display:flex;flex-direction:column;gap:40px;
  position:sticky;top:0;height:100vh;
  overflow-y:auto;
}
.s-name{
  font-family:'Libre Baskerville',serif;
  font-size:26px;line-height:1.25;font-weight:400;
}
.s-name em{font-style:italic;color:var(--faint)}
.s-label{
  font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);
  margin-bottom:10px;
}
.s-links{display:flex;flex-direction:column;gap:8px}
.s-links a{
  font-size:12px;color:var(--meta);
  text-decoration:none;transition:color .15s;
}
.s-links a:hover{color:var(--fg)}
.ext{display:inline-flex;align-items:center;gap:3px}
.link-icon{opacity:.4;flex-shrink:0}

/* Main */
.main{padding:40px 44px}

/* Hero */
.hero{
  padding-bottom:40px;
  border-bottom:1px solid var(--rule);
  margin-bottom:40px;
}
h1{
  font-family:'Libre Baskerville',serif;
  font-size:48px;font-weight:400;
  line-height:1.05;letter-spacing:-.02em;
  margin-bottom:20px;
}
h1 em{font-style:italic;color:var(--faint)}
.hero-p{
  font-size:14px;color:var(--mid);
  line-height:1.8;max-width:480px;
  margin-bottom:10px;
}
.btns{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.b1{
  background:var(--btn-bg);color:var(--btn-fg);
  padding:9px 18px;font-size:12px;
  font-family:'Mulish',sans-serif;
  text-decoration:none;display:inline-block;
  transition:opacity .15s;
}
.b1:hover{opacity:.75}
.b2{
  border:1px solid var(--rule);color:var(--meta);
  padding:9px 18px;font-size:12px;
  text-decoration:none;display:inline-block;
  transition:border-color .15s,color .15s;
}
.b2:hover{border-color:var(--meta);color:var(--fg)}

/* Contact links in main */
.contact-link{
  font-size:13px;color:var(--meta);
  text-decoration:none;transition:color .15s;
}
.contact-link:hover{color:var(--fg)}

/* Sections */
.sec{margin-bottom:40px}
.sec-t{
  font-family:'Libre Baskerville',serif;
  font-style:italic;font-size:18px;font-weight:400;
  color:var(--faint);margin-bottom:16px;
}

/* Items */
.item{padding:14px 0}
.item + .item{border-top:1px solid var(--rule2)}

/* Role — primary label, full fg */
.item-role{
  font-size:14px;font-weight:400;
  margin-bottom:5px;
  display:flex;align-items:center;gap:6px;
  color:var(--fg);
}
.item-role a{
  color:var(--fg);text-decoration:none;
  display:inline-flex;align-items:center;gap:4px;
}
.item-role a:hover{color:var(--mid)}

/* Meta — company · date · links */
.item-meta{
  font-size:11.5px;color:var(--meta);
  margin-bottom:8px;
  display:flex;gap:9px;flex-wrap:wrap;align-items:center;
  line-height:1.5;
}
.item-meta a{
  color:var(--meta);text-decoration:none;
  transition:color .15s;
  display:inline-flex;align-items:center;gap:3px;
}
.item-meta a:hover{color:var(--fg)}

/* Description */
.item-desc{font-size:12.5px;color:var(--mid);line-height:1.75}

/* Tags */
.tags{display:flex;gap:4px;margin-top:9px;flex-wrap:wrap}
.tag{
  font-size:11px;padding:2px 8px;
  background:var(--tag-bg);
  color:var(--tag-text);
  border-radius:2px;
  font-weight:400;
}

/* Skills groups */
.skills-group{
  display:flex;align-items:flex-start;
  gap:16px;padding:11px 0;
}
.skills-group + .skills-group{border-top:1px solid var(--rule2)}
.skills-label{
  font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);
  min-width:88px;flex-shrink:0;padding-top:4px;
}

/* Human languages row */
.lang-list{display:flex;gap:20px;flex-wrap:wrap;align-items:center;padding-top:2px}
.lang-item{font-size:12px;color:var(--fg)}
.lang-level{color:var(--meta);font-size:11px;margin-left:4px}

/* Footer */
.footer{
  padding-top:32px;
  border-top:1px solid var(--rule);
  font-size:11px;color:var(--faint);
  margin-top:4px;
}

/* ── Mobile ── */
@media(max-width:640px){
  .w{grid-template-columns:1fr}

  .sidebar{
    position:static;height:auto;
    flex-direction:column;gap:20px;
    padding:24px 20px 20px;
    border-right:none;
    border-bottom:1px solid var(--rule);
  }
  .s-name{font-size:28px}

  .s-nav{
    flex-direction:row;flex-wrap:wrap;
    gap:6px 16px;
  }

  .main{padding:28px 20px}
  h1{font-size:34px}
  .hero-p{max-width:100%}
  .toggle{top:12px;right:12px}
}