/* ===== Design tokens ===== */
:root{
  --bg:#f7f4ef; --surface:#ffffff; --text:#1b1a18; --muted:#6b6660;
  --border:#e4ded4; --accent:#9a3328; --accent-weak:#9a332814;
}
html.dark{
  --bg:#141310; --surface:#1b1916; --text:#ece7dd; --muted:#928b7e;
  --border:#2a2620; --accent:#c4634f; --accent-weak:#c4634f1a;
}

/* ===== Reset ===== */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }
html{ scroll-behavior:smooth; }

/* ===== Base ===== */
body{
  background:var(--bg); color:var(--text);
  font-family:'IBM Plex Sans',system-ui,sans-serif; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background-color .2s ease,color .2s ease;
}
.mono{ font-family:'IBM Plex Mono',ui-monospace,monospace; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:3px; }
.page{ max-width:680px; margin:0 auto; padding:0 24px 80px; }

/* ===== Header ===== */
header.site{ display:flex; justify-content:space-between; align-items:center;
  padding:26px 0; border-bottom:1px solid var(--border); }
header.site .name{ font-weight:600; font-size:15px; }
.nav{ display:flex; align-items:center; }
.nav .links a{ color:var(--text); font-size:14px; margin-left:20px; }
.nav .links a:hover{ color:var(--accent); text-decoration:none; }
.toggle{ background:none; border:1px solid var(--border); color:var(--muted);
  font-family:'IBM Plex Mono',monospace; font-size:12px; padding:5px 9px;
  border-radius:6px; cursor:pointer; margin-left:20px; }
.toggle:hover{ color:var(--text); border-color:var(--muted); }
.nav-toggle{ display:none; }

/* ===== Intro ===== */
.intro{ padding:48px 0 8px; }
.intro h1{ font-size:30px; font-weight:600; letter-spacing:-.01em; margin-bottom:6px; }
.intro .role{ color:var(--muted); font-size:16px; margin-bottom:20px; }
.intro p{ margin-bottom:16px; max-width:62ch; }
.intro .links{ font-size:14px; color:var(--muted); margin-top:22px; }
.intro .links a{ margin-right:14px; }
.intro .links .avail{ margin-top:8px; }

/* ===== Sections ===== */
section{ padding:34px 0; border-top:1px solid var(--border); }
section h2{ font-size:15px; font-weight:600; margin-bottom:20px; }

/* ===== Experience ===== */
.job{ margin-bottom:26px; }
.job:last-child{ margin-bottom:0; }
.job .line{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; }
.job .title{ font-weight:600; font-size:15px; }
.job .when{ color:var(--muted); font-size:12.5px; white-space:nowrap; }
.job .co{ color:var(--accent); font-size:14px; margin:1px 0 8px; }
.job p{ color:var(--muted); font-size:14.5px; }
.job.sub{ margin-left:18px; padding-left:16px; border-left:1px solid var(--border); }

/* ===== Skills ===== */
.skills .row{ display:grid; grid-template-columns:120px 1fr; gap:8px 18px;
  padding:9px 0; border-bottom:1px solid var(--border); font-size:14.5px; }
.skills .row:last-child{ border-bottom:none; }
.skills .k{ color:var(--muted); }

/* ===== Projects ===== */
.proj{ display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:11px 0; border-bottom:1px solid var(--border); }
.proj:last-child{ border-bottom:none; }
.proj .pn{ font-weight:500; font-size:15px; color:var(--text); }
.proj .pd{ color:var(--muted); font-size:14px; }
.proj a{ font-size:13px; white-space:nowrap; }

/* ===== Beyond work ===== */
.facts p{ font-size:14.5px; color:var(--muted); margin-bottom:10px; }
.facts p:last-child{ margin-bottom:0; }
.facts b{ color:var(--text); font-weight:500; }

/* ===== Contact form ===== */
.contact-lead{ color:var(--muted); font-size:14.5px; max-width:58ch; margin-bottom:18px; }
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:13px; margin-bottom:5px; }
.field input,.field select,.field textarea{
  width:100%; background:var(--surface); color:var(--text);
  border:1px solid var(--border); border-radius:6px; padding:9px 11px;
  font-family:inherit; font-size:14px; }
.field textarea{ resize:vertical; min-height:96px; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-weak); }
.btn{ background:var(--accent); color:#fff; border:none; border-radius:6px;
  padding:10px 18px; font-family:inherit; font-size:14px; font-weight:500; cursor:pointer; }
.btn:hover{ opacity:.92; }
.btn:disabled{ opacity:.6; cursor:not-allowed; }
.form-note{ font-size:13px; margin-top:10px; min-height:18px; }
.email-line{ margin-top:16px; font-size:14px; color:var(--muted); }

/* ===== Footer ===== */
footer.site{ padding:34px 0 0; border-top:1px solid var(--border); color:var(--muted); font-size:13px; }
footer.site .row{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.nar{ color:var(--accent); }

/* ===== Music control ===== */
.music{ position:fixed; right:18px; bottom:18px; z-index:20;
  background:var(--surface); border:1px solid var(--border); color:var(--muted);
  font-family:'IBM Plex Mono',monospace; font-size:12px; padding:7px 11px;
  border-radius:6px; cursor:pointer; display:flex; align-items:center; gap:7px; }
.music:hover{ color:var(--text); border-color:var(--muted); }
.music .dot{ width:6px; height:6px; border-radius:50%; background:var(--muted); }
.music.playing .dot{ background:var(--accent); }

/* ===== Responsive ===== */
@media (max-width:640px){
  .nav .links{ display:none; position:absolute; top:62px; right:24px; left:24px;
    flex-direction:column; background:var(--surface); border:1px solid var(--border);
    border-radius:8px; padding:8px; z-index:30; }
  .nav .links.open{ display:flex; }
  .nav .links a{ margin:0; padding:8px; }
  .nav-toggle{ display:inline-block; background:none; border:1px solid var(--border);
    color:var(--text); border-radius:6px; padding:5px 10px; cursor:pointer; margin-left:14px;
    font-size:14px; line-height:1; }
  .intro h1{ font-size:26px; }
  .job .line{ flex-direction:column; gap:2px; }
  .skills .row{ grid-template-columns:1fr; gap:2px; }
}