@font-face{font-family:Archivo;src:url("./assets/fonts/archivo-latin.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"DM Mono";src:url("./assets/fonts/dm-mono-400-latin.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"DM Mono";src:url("./assets/fonts/dm-mono-500-latin.woff2") format("woff2");font-weight:500;font-display:swap}

:root{--preto:#050505;--branco:#f4f4f2;--azul:#2b4bff;--azul-claro:#6a80ff;--cinza:#8b8b90;--linha:#1e1e22;--card:#0b0b0d;--gutter:clamp(20px,4.5vw,64px);--mono:"DM Mono",ui-monospace,Menlo,monospace;color-scheme:dark}
*{box-sizing:border-box}
html{background:var(--preto);color:var(--branco);font:400 16px/1.6 Archivo,system-ui,sans-serif;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--azul);outline-offset:5px}
::selection{background:var(--azul);color:#fff}
h1,h2,p,figure,ul{margin:0}
ul{padding:0;list-style:none}
img{display:block;max-width:100%}
.azul{color:var(--azul)}
.label{font:400 11px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--cinza)}
.label span{display:block}
.label .strong{color:var(--branco)}

/* Topo */
.topbar{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:start;padding:22px var(--gutter)}
.label-center{text-align:center}
.label-link{justify-self:end;text-align:right}
.label-link:hover .azul{color:var(--azul-claro)}

/* Abertura: nome gigante à esquerda, apresentação à direita */
.hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) clamp(240px,26vw,360px);column-gap:40px;align-items:end;min-height:78svh;padding:clamp(24px,6vh,64px) var(--gutter) 40px}
.name{grid-column:1;display:flex;flex-direction:column;font:800 clamp(64px,10.6vw,170px)/.86 Archivo,system-ui,sans-serif;font-stretch:125%;letter-spacing:-.03em;text-transform:uppercase}
.intro{grid-column:2;padding-bottom:6px}
.intro .label{margin-bottom:14px}
.lead{font:600 clamp(20px,1.7vw,24px)/1.3 Archivo,system-ui,sans-serif;letter-spacing:-.01em;margin-bottom:14px}
.text{font-size:14px;line-height:1.65;color:var(--cinza);margin-bottom:22px}
.cta{display:inline-flex;align-items:center;gap:10px;font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--azul);padding-bottom:6px;border-bottom:1px solid var(--azul);transition:color .2s,border-color .2s}
.cta:hover{color:var(--azul-claro);border-color:var(--azul-claro)}
.skills{grid-column:1;display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:28px;font:400 11px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--cinza)}
.skills li{display:flex;align-items:center;gap:10px}
.skills li::before{content:"";width:6px;height:6px;background:var(--azul)}

/* Projetos: cada card mostra a abertura do site rolando, gravada em 1440 × 960 */
.work{padding:20px var(--gutter) 64px}
.section-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid var(--linha);padding-block:16px 20px}
.section-heading h2{font-weight:400}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.card{position:relative;min-width:0;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--linha);transition:border-color .2s,transform .3s cubic-bezier(.2,.7,.2,1)}
.card:hover{border-color:var(--azul);transform:translateY(-3px)}
.card:has(.card-link:focus-visible){border-color:var(--azul)}
.preview{position:relative;aspect-ratio:3/2;overflow:hidden;background:#111;border-bottom:1px solid var(--linha)}
.preview video{display:block;width:100%;height:100%;object-fit:cover}
.num{position:absolute;top:12px;left:12px;z-index:2;padding:4px 7px;background:var(--preto);font:500 11px/1 var(--mono);letter-spacing:.1em;color:var(--azul)}
.meta{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:14px 16px 16px}
.title{font:600 17px/1.2 Archivo,system-ui,sans-serif;letter-spacing:-.01em}
.arrow{grid-column:2;grid-row:1/3;align-self:start;color:var(--azul);font-size:18px;line-height:1;transition:transform .3s}
.card:hover .arrow{transform:translate(3px,-3px)}
.tag{font:400 11px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--cinza)}
.desc{padding:0 16px 16px;font-size:13px;line-height:1.55;color:var(--cinza)}
.card-link{position:absolute;inset:0;z-index:3}
.card-link:focus-visible{outline:none}

/* Contato */
.contact{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end;border-top:1px solid var(--linha);padding:56px var(--gutter) 64px}
.contact h2{font:800 clamp(44px,6.5vw,96px)/.9 Archivo,system-ui,sans-serif;font-stretch:125%;letter-spacing:-.03em;text-transform:uppercase}
.pills{display:flex;flex-direction:column;gap:10px;min-width:280px}
.pills a{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:14px 16px;border:1px solid var(--linha);font-size:14px;transition:border-color .2s,background-color .2s,color .2s}
.pills a:hover{border-color:var(--azul);background:var(--azul);color:#fff}
.pill-label{font:400 11px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--cinza);transition:color .2s}
.pills a:hover .pill-label{color:#fff}
footer{display:flex;justify-content:space-between;gap:16px;padding:18px var(--gutter) 28px;border-top:1px solid var(--linha);font:400 11px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--cinza)}

@media (max-width:900px){
  .topbar{grid-template-columns:1fr auto}
  .label-center{display:none}
  .hero{grid-template-columns:minmax(0,1fr);min-height:0;padding-top:16px;row-gap:24px}
  .name{font-size:clamp(52px,15.5vw,120px);font-stretch:115%}
  .intro{grid-column:1;max-width:520px}
  .grid{grid-template-columns:minmax(0,1fr)}
  .contact{grid-template-columns:minmax(0,1fr)}
  .contact h2{font-size:clamp(36px,10.5vw,96px);font-stretch:112%}
  .pills a{min-width:0}
  .pills a span:last-child{overflow-wrap:anywhere;text-align:right}
  .pills{min-width:0}
  footer{flex-direction:column;gap:4px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .card,.arrow,.cta,.pills a,.pill-label{transition:none}
  .card:hover{transform:none}
}