/* daviddonoso.com — v2 design system (12 Oct 2026)
   Register: slick, minimal, badge-and-grid modernism (Allan Peters direction).
   Paper + ink, one accent, hairline rules, heavy grotesk display, mono eyebrows. */
:root{
  --paper:#F4F1EA; --paper-2:#ECE8DF; --ink:#141414; --ink-2:#3A3A3A; --mute:#6F6B64; --line:#D9D3C7;
  --acc:#E4572E; --acc-ink:#B83F1B; --white:#FFFFFF;
  --d:"Archivo","Inter Tight",system-ui,sans-serif; --b:"Inter",system-ui,sans-serif; --m:"JetBrains Mono",Consolas,monospace;
  --r:6px; --wrap:1180px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#121212; --paper-2:#1B1B1B; --ink:#F2EFE8; --ink-2:#CFCBC2; --mute:#8F8A80; --line:#2A2A2A; --white:#1B1B1B; --acc:#FF6A3D; --acc-ink:#FF8A64;
  }
}
:root[data-theme="dark"]{
  --paper:#121212; --paper-2:#1B1B1B; --ink:#F2EFE8; --ink-2:#CFCBC2; --mute:#8F8A80; --line:#2A2A2A; --white:#1B1B1B; --acc:#FF6A3D; --acc-ink:#FF8A64;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font:16px/1.6 var(--b);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--ink);color:var(--paper)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(16px,4vw,48px)}

/* eyebrow labels */
.k{font:600 11px/1 var(--m);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.k.acc{color:var(--acc)}
.num{font:700 11px/1 var(--m);letter-spacing:.2em;color:var(--acc)}

/* nav */
nav{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:66px;gap:14px}
.mark{display:flex;align-items:center;gap:12px;font:800 15px var(--d);letter-spacing:.06em;text-transform:uppercase}
.mark .badge{width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font:800 12px var(--d);letter-spacing:.02em}
.links{display:flex;gap:clamp(12px,2.4vw,28px);font:600 11px var(--m);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);flex-wrap:wrap}
.links a{padding:6px 0;border-bottom:2px solid transparent}
.links a:hover{color:var(--ink)}
.links a.on{color:var(--ink);border-bottom-color:var(--acc)}
.links a.lang{margin-left:6px;padding:4px 9px;border:1px solid var(--line);border-radius:99px;color:var(--ink)}
.links a.lang:hover{background:var(--ink);color:var(--paper)}

/* type */
h1{font:800 clamp(40px,7.2vw,88px)/.98 var(--d);letter-spacing:-.035em;text-wrap:balance;text-transform:uppercase}
h1 i{font-style:normal;color:var(--acc)}
h2{font:800 clamp(26px,3.6vw,40px)/1.05 var(--d);letter-spacing:-.025em;text-transform:uppercase;margin:0 0 14px}
h3{font:700 20px/1.25 var(--d);letter-spacing:-.01em;margin:0 0 6px}
p.t,.sub{color:var(--ink-2);max-width:62ch}
.sub{font-size:clamp(16px,1.6vw,19px);line-height:1.55;margin-top:22px}
.lead{font:500 clamp(18px,2vw,24px)/1.4 var(--d);letter-spacing:-.01em;max-width:30ch}

/* page header */
header.page{padding:clamp(56px,9vw,120px) 0 clamp(28px,4vw,56px);border-bottom:1px solid var(--line)}
.page .meta{display:flex;gap:18px;align-items:center;margin-bottom:22px}
.rule{height:1px;background:var(--line);flex:1}

/* hero (home) */
.hero{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,5vw,72px);align-items:end;padding:clamp(48px,8vw,110px) 0 clamp(32px,5vw,64px)}
.hero .portrait{position:relative;aspect-ratio:1/1;border-radius:50%;overflow:hidden;background:var(--ink);max-width:420px;justify-self:end;width:100%}
.hero .portrait img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.hero .portrait::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.hero .stamp{position:absolute;right:6%;bottom:6%;width:92px;height:92px;border-radius:50%;background:var(--acc);color:#fff;display:grid;place-items:center;text-align:center;font:800 9.5px/1.25 var(--m);letter-spacing:.14em;text-transform:uppercase;transform:rotate(-12deg);padding:12px}
.hero .roles{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:26px;font:600 11px var(--m);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.hero .roles span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--acc);margin-right:10px;vertical-align:middle}
@media(max-width:820px){.hero{grid-template-columns:1fr}.hero .portrait{max-width:280px;justify-self:start;order:-1}}

/* section frame */
section{padding:clamp(44px,6vw,84px) 0;border-bottom:1px solid var(--line)}
.sec-head{display:grid;grid-template-columns:168px 1fr;gap:22px;align-items:start;margin-bottom:28px}
.sec-head .k{display:block;margin-top:8px;line-height:1.7;letter-spacing:.14em}
@media(max-width:640px){.sec-head{grid-template-columns:1fr;gap:6px}}

/* numbers strip */
.figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.figures div{padding:22px 22px 20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--white)}
.figures b{display:block;font:800 clamp(28px,3.2vw,40px)/1 var(--d);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.figures span{display:block;margin-top:8px;font:600 10.5px var(--m);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}

/* work grid */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.card{background:var(--white);padding:26px 26px 24px;display:flex;flex-direction:column;gap:8px;min-height:230px;transition:background .2s}
.card:hover{background:var(--paper-2)}
.card .num{margin-bottom:auto}
.card h3{font-size:22px;margin-top:18px}
.card p{color:var(--ink-2);font-size:14.5px}
.card .go{font:700 11px var(--m);letter-spacing:.14em;text-transform:uppercase;color:var(--acc);margin-top:10px}

/* cases */
.case{display:grid;grid-template-columns:200px 1fr;gap:24px;padding:28px 0;border-top:1px solid var(--line)}
.case:last-of-type{border-bottom:1px solid var(--line)}
.case .role{font:600 11px/1.6 var(--m);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.case p{color:var(--ink-2);font-size:15px;max-width:68ch}
.case p+p{margin-top:8px}
@media(max-width:760px){.case{grid-template-columns:1fr;gap:8px}}
.stat{display:flex;flex-wrap:wrap;gap:0;margin:14px 0 14px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;width:fit-content}
.stat div{padding:12px 18px;border-right:1px solid var(--line);background:var(--white)}
.stat div:last-child{border-right:0}
.stat b{display:block;font:800 22px/1 var(--d);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat span{font:600 10px var(--m);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.chip{font:600 10.5px var(--m);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);border:1px solid var(--line);border-radius:99px;padding:7px 12px;background:var(--white)}

/* media */
.vid{position:relative;aspect-ratio:16/9;background:#000;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:16px 0}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}
.vgrid .vid{margin:0}
.gal{columns:3 280px;column-gap:14px;margin-top:18px}
.gal img{break-inside:avoid;margin-bottom:14px;border-radius:var(--r);border:1px solid var(--line);cursor:zoom-in;transition:opacity .25s}
.gal img:hover{opacity:.9}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-top:18px}
.grid2 img{border-radius:var(--r);border:1px solid var(--line);width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
figure.shot{margin:0}
figure.shot figcaption{font:600 10.5px var(--m);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-top:8px}

/* brand wall */
.logo-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.logo-wall figure{margin:0;background:#fff;padding:18px 14px 12px;text-align:center}
.logo-wall img{display:block;margin:0 auto;height:64px;width:100%;object-fit:contain}
.logo-wall figcaption{margin-top:10px;font:600 10px/1.35 var(--m);letter-spacing:.06em;color:#4a4a4a;text-transform:uppercase}

/* timeline (experience) */
.tl{border-top:1px solid var(--line)}
.tl .row{display:grid;grid-template-columns:150px 1fr;gap:24px;padding:24px 0;border-bottom:1px solid var(--line)}
.tl .when{font:600 11px/1.6 var(--m);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.tl h3{font-size:19px}
.tl .org{font:600 12px var(--m);letter-spacing:.08em;text-transform:uppercase;color:var(--acc);margin-bottom:8px}
.tl ul{list-style:none;color:var(--ink-2);font-size:14.5px}
.tl li{padding-left:16px;position:relative;margin:4px 0}
.tl li::before{content:"";position:absolute;left:0;top:10px;width:6px;height:1px;background:var(--acc)}
@media(max-width:700px){.tl .row{grid-template-columns:1fr;gap:6px}}
.skills{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.skills div{background:var(--white);padding:18px 20px}
.skills b{display:block;font:700 11px var(--m);letter-spacing:.14em;text-transform:uppercase;color:var(--acc);margin-bottom:8px}
.skills p{font-size:14px;color:var(--ink-2)}

/* buttons / cta / footer */
.btn{display:inline-block;background:var(--ink);color:var(--paper);font:700 11.5px var(--m);letter-spacing:.14em;text-transform:uppercase;padding:16px 26px;border-radius:99px;border:1px solid var(--ink)}
.btn:hover{background:var(--acc);border-color:var(--acc);color:#fff}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.cta{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;padding:clamp(44px,6vw,84px) 0}
.cta h2{margin:0}
@media(max-width:700px){.cta{grid-template-columns:1fr}}
footer{border-top:1px solid var(--line);padding:26px 0 44px;color:var(--mute);font:500 12px var(--m);letter-spacing:.06em}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
footer a:hover{color:var(--ink)}
#lb{position:fixed;inset:0;z-index:90;background:rgba(10,10,10,.94);display:none;align-items:center;justify-content:center;padding:3vh 3vw;cursor:zoom-out}
#lb.open{display:flex}
#lb img{max-width:96vw;max-height:94vh;object-fit:contain;border-radius:var(--r)}
@media(max-width:760px){.nav-in{height:60px}.links{flex-wrap:nowrap;overflow-x:auto;gap:16px;padding-bottom:2px;scrollbar-width:none;-webkit-overflow-scrolling:touch;max-width:62vw}.links::-webkit-scrollbar{display:none}.links a{white-space:nowrap}.mark{font-size:13px}.mark .badge{width:30px;height:30px;font-size:11px}}