/* ==========================================================
   thiagolavado.com — estilo compartilhado (home + portfólio)
   Fontes servidas do próprio domínio, sem dependência externa.
   ========================================================== */

@font-face{
  font-family:'Oswald';
  src:url('fontes/Oswald-Variable.woff2') format('woff2-variations');
  font-weight:200 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('fontes/InterVariable.woff2') format('woff2-variations');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('fontes/InterVariable-Italic.woff2') format('woff2-variations');
  font-weight:100 900; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'Source Serif 4';
  src:url('fontes/SourceSerif4Variable-Roman.woff2') format('woff2-variations');
  font-weight:200 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Source Serif 4';
  src:url('fontes/SourceSerif4Variable-Italic.woff2') format('woff2-variations');
  font-weight:200 900; font-style:italic; font-display:swap;
}

:root{
  --bg:#0d0d0d;
  --bg-lift:#151515;
  --text:#b9b6b0;
  --text-strong:#e8e6e1;
  --dim:#6f6c67;
  --accent:#c1462f;
  --hair:#2a2927;
  --display:'Oswald', 'Arial Narrow', 'Helvetica Neue Condensed', sans-serif;
  --sans:'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --serif:'Source Serif 4', Georgia, 'Times New Roman', serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--serif);
  font-size:1.06rem;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:52rem; margin:0 auto; padding:0 1.5rem;}

/* ---------- cabeçalho ---------- */
.masthead{padding:3.2rem 0 0;}
.sitename{
  font-family:var(--display);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.01em;
  font-size:clamp(2.6rem, 9vw, 5rem);
  line-height:0.92;
  color:var(--text-strong);
  margin:0;
}
.sitename a{color:inherit; text-decoration:none;}
.tagline{
  font-family:var(--sans);
  font-size:0.82rem;
  letter-spacing:0.02em;
  color:var(--dim);
  margin:0.7rem 0 0;
}
nav.main{
  margin-top:2rem;
  border-bottom:1px solid var(--hair);
  padding-bottom:0.85rem;
}
nav.main ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:1.6rem;}
nav.main a{
  font-family:var(--sans);
  font-size:0.7rem;
  font-weight:500;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--text);
  text-decoration:none;
  padding-bottom:0.2rem;
  border-bottom:1px solid transparent;
}
nav.main a:hover, nav.main a:focus-visible{color:var(--accent); border-bottom-color:var(--accent);}
nav.main a[aria-current="page"]{color:var(--text-strong); border-bottom-color:var(--accent);}

/* ---------- conteúdo ---------- */
main{padding:3.2rem 0 5rem;}
.lede{display:grid; grid-template-columns:11rem 1fr; gap:2.4rem; align-items:start;}
.portrait{width:100%; height:auto; filter:grayscale(1) contrast(1.05); background:var(--bg-lift);}
.portrait-empty{
  width:100%; aspect-ratio:3/4; background:var(--bg-lift);
  border:1px dashed var(--hair);
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:var(--sans); font-size:0.6rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--dim); padding:0.6rem;
}
.portrait-caption{
  font-family:var(--sans); font-size:0.66rem; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--dim); margin-top:0.5rem;
}
p{margin:0 0 1.3em;}
a{color:var(--accent);}
a:hover{color:var(--text-strong);}

h2.section{
  font-family:var(--sans);
  font-size:0.7rem; font-weight:600; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--dim);
  margin:4rem 0 1.4rem;
  padding-bottom:0.7rem;
  border-bottom:1px solid var(--hair);
}

/* ---------- destaque da reportagem ---------- */
.feature{
  display:block;
  text-decoration:none;
  border:1px solid var(--hair);
  padding:1.6rem 1.7rem;
  transition:border-color .18s ease, background .18s ease;
}
.feature:hover{border-color:var(--accent); background:var(--bg-lift);}
.feature .kicker{
  font-family:var(--sans); font-size:0.62rem; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--dim); display:block; margin-bottom:0.5rem;
}
.feature h3{
  font-family:var(--display); font-weight:600; text-transform:uppercase;
  letter-spacing:0.01em; font-size:1.9rem; line-height:1;
  color:var(--accent); margin:0 0 0.6rem;
}
.feature p{color:var(--text); margin:0; font-size:0.98rem;}

/* ---------- cartões do portfólio ---------- */
.cards{margin:0; padding:0; list-style:none;}
.card{border-bottom:1px solid var(--hair); padding:1.5rem 0;}
.card:first-child{padding-top:0;}
.card .meta{
  font-family:var(--sans); font-size:0.64rem; font-weight:500;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--dim);
  margin:0 0 0.45rem;
}
.card .meta .outlet{color:var(--text);}
.card h3{
  font-family:var(--serif); font-weight:600; font-size:1.24rem; line-height:1.25;
  margin:0 0 0.45rem;
}
.card h3 a{color:var(--accent); text-decoration:none;}
.card h3 a:hover{color:var(--text-strong); text-decoration:underline; text-underline-offset:3px;}
.card p{margin:0; font-size:0.97rem; color:var(--text);}

/* ---------- rodapé ---------- */
footer{
  border-top:1px solid var(--hair);
  padding:2rem 0 3.5rem;
  font-family:var(--sans); font-size:0.72rem; letter-spacing:0.04em; color:var(--dim);
}
footer p{margin:0 0 0.5rem;}
footer a{color:var(--dim); text-decoration:underline; text-underline-offset:3px;}
footer a:hover{color:var(--accent);}

/* ---------- responsivo / acessibilidade ---------- */
@media (max-width:640px){
  .lede{grid-template-columns:1fr; gap:1.4rem;}
  .lede .portrait-col{max-width:9rem;}
  nav.main ul{gap:1.1rem;}
}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto;}}