:root{
  --bg:#F1F0EB; --surface:#FFFFFF; --ink:#0A0A0A; --muted:#68675F;
  --line:#0A0A0A; --accent:#FFFFFF; --accent-soft:#FFFFFF;
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --body:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0A0A0A; --surface:#141414; --ink:#F5F4EF; --muted:#8C8B83;
    --line:#F5F4EF; --accent:#FFFFFF; --accent-soft:#FFFFFF; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0A0A0A; --surface:#141414; --ink:#F5F4EF; --muted:#8C8B83;
  --line:#F5F4EF; --accent:#FFFFFF; --accent-soft:#FFFFFF; color-scheme:dark;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:16px/1.6 var(--body);padding-inline:20px;padding-block:0}
.wrap{max-width:760px;margin:0 auto}
a{color:var(--ink);text-underline-offset:3px}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.site-header{padding-block:20px;border-bottom:4px solid var(--line)}
nav{display:flex;align-items:center;gap:.4rem;font:14px/1.45 var(--mono);text-transform:lowercase;white-space:nowrap;overflow-x:auto;color:var(--muted)}
nav a{color:var(--muted);text-decoration:none}
nav a:hover,nav a:focus-visible{color:var(--ink);text-decoration:underline}
nav a[aria-current="page"]{color:var(--ink);font-weight:700}

header:not(.site-header){padding-block:56px 64px;border-bottom:2px solid var(--line)}
h1{font:700 clamp(1.9rem,5.5vw,2.9rem)/1.08 var(--display);letter-spacing:-.02em;margin:0 0 20px;text-wrap:balance;text-transform:uppercase}
h1 span{background:var(--accent);color:var(--ink);border:2px solid var(--ink);padding:0 10px}
.lede{font-size:1.15rem;color:var(--muted);max-width:58ch;margin:0}
.meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px;font:600 13px var(--mono);text-transform:uppercase;letter-spacing:.04em}
.meta span{background:var(--accent);color:#0A0A0A;border:2px solid var(--ink);padding:4px 10px}

section{padding-block:56px;border-bottom:2px solid var(--line)}
section:last-child{border-bottom:0}
h2{font:700 13px var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--ink);margin:0 0 28px}
section > p{max-width:62ch;margin:0 0 14px}

.projects{display:grid;gap:0}
.project{display:grid;grid-template-columns:1fr auto;gap:6px 24px;padding-block:22px;border-top:2px solid var(--line)}
.project:first-child{border-top:0;padding-top:0}
.project h3{font:700 1.3rem/1.25 var(--display);margin:0;text-transform:uppercase}
.project .yr{font:600 14px var(--mono);color:var(--muted);font-variant-numeric:tabular-nums}
.project p{grid-column:1/-1;margin:0;color:var(--muted);max-width:62ch}
.tree{grid-column:1/-1;margin:12px 0 0;padding:14px 16px;background:#D9D9D4;border:2px solid var(--line);color:#0A0A0A;font:13px/1.6 var(--mono);overflow-x:auto}
.tags{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.tags li{list-style:none;font:700 12px var(--mono);text-transform:uppercase;letter-spacing:.03em;background:var(--accent);color:#0A0A0A;border:2px solid var(--ink);padding:3px 10px}
.tags{padding:0}

.skills{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:28px}
.skills h3{font:700 1.05rem var(--display);margin:0 0 10px;text-transform:uppercase}
.skills ul{margin:0;padding:0;list-style:none;font:14px/1.9 var(--mono);color:var(--muted)}

.contact{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.mail{font:600 1.1rem var(--mono);background:var(--surface);border:2px solid var(--line);padding:10px 16px;user-select:all;word-break:break-all}
button{font:700 13px var(--mono);text-transform:uppercase;letter-spacing:.06em;background:var(--accent);color:#0A0A0A;border:2px solid var(--ink);padding:12px 18px;cursor:pointer}
button:hover{background:var(--ink);color:var(--accent)}
/* .home-btn xa non se usa */
.home-btn{font:700 13px var(--mono);text-transform:uppercase;letter-spacing:.06em;background:var(--accent);color:#0A0A0A;text-decoration:none;padding:8px 16px;border:2px solid var(--ink)}
.home-btn:hover{background:var(--ink);color:var(--accent)}
.links{display:flex;gap:24px;margin-top:20px;font:600 13px var(--mono);text-transform:uppercase;letter-spacing:.04em}

@media (max-width:520px){
  .project{grid-template-columns:1fr}
  .project .yr{order:-1}
}

.photo{display:block;width:100%;max-width:420px;height:auto;max-height:70vh;object-fit:cover;border:2px solid var(--line)}