/* dark by default — deliberate; toggle flips to light and is remembered */
:root{
  --bg:#17171A; --ink:#E6E4E1; --muted:#9B9691; --faint:#6E6A66;
  --rule:#2A2A2E; --accent:#FF7A4D; --accent-dim:#FF7A4D33;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
:root[data-theme="light"]{
  --bg:#FBFAF8; --ink:#1C1A18; --muted:#655F5A; --faint:#8E8781;
  --rule:#E6E1DA; --accent:#C2461F; --accent-dim:#C2461F26;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:15.5px; line-height:1.62;
  -webkit-font-smoothing:antialiased; font-feature-settings:"liga" 1,"kern" 1;
  transition:background .25s ease,color .25s ease;
}
a{color:inherit}
.wrap{max-width:36rem; margin:0 auto; padding:0 1.75rem}

/* ---------- header ---------- */
.top{display:flex; align-items:center; gap:1.15rem; padding:4.5rem 0 2.25rem}
@media (max-width:32rem){.top{padding-top:3rem}}
.top img{
  width:6rem; height:6rem; border-radius:50%;
  object-fit:cover; flex:none; display:block;
}
@media (max-width:26rem){.top img{width:4.5rem; height:4.5rem}}
.who{margin-right:auto; min-width:0}
.who h1{font-size:1.1875rem; font-weight:600; margin:0; letter-spacing:-.015em}
.who p{
  margin:.2rem 0 0; font-size:.8125rem; color:var(--faint);
  font-family:var(--mono); letter-spacing:-.01em;
}
.icons{display:flex; align-items:center; gap:.1rem; flex:none}
.icons a,.toggle{
  display:grid; place-items:center; width:1.85rem; height:1.85rem;
  border:0; background:none; color:var(--faint); cursor:pointer;
  padding:0; border-radius:.35rem; transition:color .18s,background .18s;
}
.icons a:hover,.toggle:hover{color:var(--accent); background:var(--accent-dim)}
.icons svg{width:.95rem;height:.95rem;fill:currentColor}
.toggle svg{width:.95rem;height:.95rem;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.moon{display:none}
:root[data-theme="light"] .sun{display:none}
:root[data-theme="light"] .moon{display:block}

/* ---------- intro ---------- */
.intro{margin:0 0 .85rem; font-size:.9688rem; text-wrap:pretty}
.intro a,.career a{
  color:var(--accent); text-decoration:none;
  border-bottom:1px solid var(--accent-dim);
}
.intro a:hover,.career a:hover{border-color:var(--accent)}

/* ---------- sections ---------- */
h2{
  font-size:.75rem; font-weight:600; margin:2.9rem 0 1.15rem;
  text-transform:uppercase; letter-spacing:.11em; color:var(--faint);
  padding-bottom:.6rem; border-bottom:1px solid var(--rule);
}

/* ---------- dated rows ---------- */
.item{margin-bottom:1.3rem}
.item:last-child{margin-bottom:0}
.item-head{
  display:flex; align-items:baseline; gap:.75rem;
  justify-content:space-between;
}
.item .t{
  font-size:.9688rem; font-weight:500; text-decoration:none;
  transition:color .15s; min-width:0;
}
a.t:hover{color:var(--accent)}
a.t::after{content:" ↗"; font-size:.75em; color:var(--faint); opacity:0; transition:opacity .15s}
a.t:hover::after{opacity:1}
.date{
  font-family:var(--mono); font-size:.75rem; color:var(--faint);
  white-space:nowrap; flex:none; letter-spacing:-.01em;
}
.stars{
  font-family:var(--mono); font-size:.75rem; color:var(--faint);
  white-space:nowrap; flex:none; letter-spacing:-.01em;
  margin-left:auto; opacity:.85;
}
.stars + .date{margin-left:.7rem}
.item p{margin:.15rem 0 0; font-size:.9375rem; color:var(--muted); line-height:1.55}

/* ---------- prose blocks ---------- */
.career p{margin:0 0 .6rem; font-size:.9375rem; color:var(--muted)}
.career p:last-child{margin-bottom:0}
.career p b{color:var(--ink); font-weight:500}

/* ---------- footer ---------- */
.quip{
  margin:0; font-size:.8125rem; color:var(--faint);
  font-style:italic; line-height:1.5; letter-spacing:-.005em;
}
footer{
  margin-top:3.5rem; padding:1.4rem 0 3.5rem; border-top:1px solid var(--rule);
  font-family:var(--mono); font-size:.75rem; color:var(--faint);
  display:flex; flex-wrap:wrap; gap:.5rem 1.15rem;
}
footer a{color:var(--faint); text-decoration:none}
footer a:hover{color:var(--accent)}

/* ================= CV page ================= */
.cvhead{padding:.5rem 0 0}
.cvhead h1{font-size:1.375rem; font-weight:600; margin:0 0 .5rem; letter-spacing:-.015em}
.cvhead .sum{font-size:.9375rem; color:var(--muted); margin:0}
.back{
  display:inline-block; font-family:var(--mono); font-size:.75rem;
  color:var(--faint); text-decoration:none; margin-bottom:1.1rem;
}
.back:hover{color:var(--accent)}
.job{margin-bottom:1.9rem}
.job:last-child{margin-bottom:0}
.job-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:.2rem .55rem}
.job h3{font-size:.9688rem; font-weight:600; margin:0}
.job .at{color:var(--muted); font-size:.9375rem; font-weight:400}
.job .when{font-family:var(--mono); font-size:.75rem; color:var(--faint); margin:.15rem 0 .55rem}
.job ul{margin:0; padding:0; list-style:none}
.job li{
  position:relative; padding-left:.95rem; font-size:.9375rem;
  color:var(--muted); margin-bottom:.3rem; line-height:1.55;
}
.job li::before{content:""; position:absolute; left:0; top:.66em; width:4px; height:1px; background:var(--faint)}
.job li b{color:var(--ink); font-weight:500}
.tag{
  font-family:var(--mono); font-size:.6875rem; color:var(--accent);
  background:var(--accent-dim); border-radius:.25rem; padding:.1rem .4rem;
}
.skills p,.edu{font-size:.9375rem; color:var(--muted); margin:0 0 .55rem}
.skills p b,.edu b{color:var(--ink); font-weight:500}

@media print{
  .icons,.toggle,footer,.back{display:none!important}
  :root{--bg:#fff;--ink:#000;--muted:#333;--faint:#666;--rule:#ccc;--accent:#000;--accent-dim:#eee}
  body{font-size:10.5pt}
  .wrap{max-width:none}
  .job,.cvhead{break-inside:avoid}
  h2{margin-top:1.2rem}
  a{text-decoration:none}
  .js .rise{opacity:1!important;transform:none!important}
}

/* ---------- motion (only once JS confirms it is running) ---------- */
.js .rise{opacity:0; transform:translateY(10px); transition:opacity .5s ease,transform .5s ease}
.js .rise.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important; animation:none!important}
  .js .rise{opacity:1; transform:none}
}