:root {
  color-scheme: light;
  --paper: #f8f7f3;
  --ink: #222820;
  --muted: #515b50;
  --line: #ced3c9;
  --accent: #344e37;
  --on-accent: #fff;
  --wash: #eaf0e5;
}
[data-theme="dark"] {
  color-scheme: dark;
  --paper: #191e1a;
  --ink: #edf0e9;
  --muted: #bdc6bb;
  --line: #424b42;
  --accent: #c2d5b6;
  --on-accent: #182119;
  --wash: #232d24;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 1.0625rem/1.6 system-ui, sans-serif; }
.wrap { width: min(100% - 2.5rem, 68rem); margin-inline: auto; }
a { color: inherit; text-underline-offset: .22em; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
header { border-bottom: 1px solid var(--line); }
.top, nav, .tools, .languages { display:flex; align-items:center; }
.top { min-height:5rem; gap:2rem; }
.name { margin-right:auto; font-size:1.3rem; font-weight:650; letter-spacing:-.045em; }
.name span { color:var(--accent); }
nav { gap:1.5rem; }
nav a, .languages a, .name { text-decoration:none; }
nav a, .languages a { padding-block:.65rem; }
nav, .tools, footer { font-size:.9375rem; }
.tools { gap:.8rem; }
.languages { gap:.6rem; }
.languages [aria-current] { text-decoration:underline; font-weight:650; }
.hero { padding-block:clamp(3rem,6vw,5.5rem); }
.role { color:var(--muted); font-size:1rem; margin:0 0 1.4rem; }
h1,h2,h3,p { margin:0; }
h1,h2,h3 { font-weight:580; text-wrap:balance; }
h1 { font-size:clamp(2.3rem,5vw,4rem); line-height:1.09; letter-spacing:-.045em; }
.intro { margin:1.35rem 0 1.65rem; max-width:56ch; }
p { color:var(--muted); max-width:63ch; }
.button { display:inline-block; padding:.7rem 1.25rem; background:var(--accent); color:var(--on-accent); text-decoration:none; border-radius:3px; }
.split { padding-block:clamp(2.5rem,5vw,4.25rem); display:grid; grid-template-columns:1fr 1.55fr; gap:3rem; }
.hero + .split { border-top:1px solid var(--line); }
h2 { font-size:clamp(1.5rem,3vw,2rem); line-height:1.2; letter-spacing:-.035em; }
h3 { font-size:1.25rem; line-height:1.35; letter-spacing:-.02em; margin-bottom:.5rem; }
article + article { margin-top:1.5rem; padding-top:1.5rem; border-top:1px solid var(--line); }
.work { background:var(--wash); }
.contact { background:#314733; color:#f7f8f3; }
.contact p { color:#e2e9df; margin-bottom:1.2rem; }
.contact a { display:table; padding-block:.25rem; }
footer { color:var(--muted); padding-block:1.5rem; }
@media(max-width:680px) {
  .top { flex-wrap:wrap; gap:0; padding-top:.65rem; }
  nav { order:3; width:100%; gap:1.5rem; }
  .split { grid-template-columns:1fr; gap:1.6rem; }
}
@media(max-width:480px) {
  h1 { font-size:clamp(1.875rem,8.2vw,2.3rem); text-wrap:initial; }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { color-scheme: dark; --paper: #191e1a; --ink: #edf0e9; --muted: #bdc6bb; --line: #424b42; --accent: #c2d5b6; --on-accent: #182119; --wash: #232d24; }
}