:root{
  color-scheme:light;
  --paper:#F7F8F3; --paper-raised:#FFFFFF; --ink:#171F30; --ink-soft:#4B5464;
  --navy:#1B2B5C; --lime:#C5F02C; --seal:#71531A;
  --line:#DCE0D2; --line-soft:#EAEDE3;
  --display:'IBM Plex Serif',ui-serif,Georgia,serif;
  --body:'IBM Plex Sans',ui-sans-serif,system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box;}
html,body{height:100%;}
/* Rodape colado no fim: as paginas de projeto sao curtas e o rodape ficava
   boiando no meio da tela, com um vazio enorme embaixo. */
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--body);
     -webkit-font-smoothing:antialiased; line-height:1.5;
     min-height:100%; display:flex; flex-direction:column;}
body > footer{margin-top:auto;}
img{max-width:100%; display:block;}
a{color:inherit;}
.wrap{max-width:1000px; margin:0 auto; padding:0 24px;}

/* topo */
.masthead{padding:20px 0; border-bottom:2px solid var(--ink); background:var(--paper);}
.masthead .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.brand{font-family:var(--display); font-weight:600; font-size:19px; text-decoration:none;}
.brand b{color:var(--navy);}
.masthead nav{display:flex; gap:20px; font-family:var(--mono); font-size:12px;
              letter-spacing:1.2px; text-transform:uppercase; color:var(--ink-soft); flex-wrap:wrap;}
.masthead nav a{text-decoration:none;}
.masthead nav a:hover{color:var(--navy);}

/* hero */
/* O retrato tinha 750px de altura e virava a primeira coisa que a pessoa via --
   maior que o proprio titulo, e o texto flutuava centralizado contra ele, deixando
   um vazio de 330px acima da manchete. Num portfolio quem manda sao os projetos:
   a foto entra recortada, com altura fixa, e as duas colunas comecam juntas. */
.hero{padding:48px 0 40px;}
.hero-grid{display:grid; grid-template-columns:1fr 300px; gap:48px; align-items:start;}
.eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:1.6px; text-transform:uppercase;
         color:var(--navy);}
h1{font-family:var(--display); font-weight:700; font-size:44px; line-height:1.12;
   letter-spacing:-.4px; margin:14px 0 0; text-wrap:balance;}
h1 .hl{background-image:linear-gradient(var(--lime),var(--lime)); background-repeat:no-repeat;
       background-size:100% 12px; background-position:0 88%; padding:0 2px;
       box-decoration-break:clone; -webkit-box-decoration-break:clone;}
.lede{font-size:17.5px; color:var(--ink-soft); margin:20px 0 0; max-width:52ch;}
.frase{margin:26px 0 0; padding-left:16px; border-left:3px solid var(--lime);
       font-family:var(--display); font-size:17px; line-height:1.5; color:var(--ink);}
.retrato img{border:2px solid var(--ink); border-radius:4px; width:100%; height:380px;
              object-fit:cover; object-position:50% 22%;}
.retrato .cap{font-family:var(--mono); font-size:11px; letter-spacing:.6px; color:var(--ink-soft);
              margin-top:10px; text-align:right;}

/* secoes de projeto */
.area{padding:14px 0 40px;}
.area-label{font-family:var(--mono); font-size:12px; letter-spacing:2px; text-transform:uppercase;
            color:var(--seal); display:flex; align-items:center; gap:12px; margin:0 0 18px;}
.area-label::after{content:""; flex:1; height:1px; background:var(--line);}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:16px;}
.proj{background:var(--paper-raised); border:1px solid var(--line); border-radius:4px;
      padding:20px 20px 18px; text-decoration:none; display:flex; flex-direction:column; gap:8px;
      transition:border-color .15s ease, transform .15s ease;}
.proj:hover{border-color:var(--navy); transform:translateY(-2px);}
.proj h3{font-family:var(--display); font-size:19px; margin:0; font-weight:600;}
.proj p{margin:0; font-size:14.5px; color:var(--ink-soft); line-height:1.5;}
.proj .go{margin-top:auto; padding-top:10px; font-family:var(--mono); font-size:12px;
          letter-spacing:.8px; color:var(--navy);}
.tag-prod{align-self:flex-start; font-family:var(--mono); font-size:10.5px; letter-spacing:1px;
          text-transform:uppercase; color:var(--seal); border:1px solid var(--seal);
          border-radius:2px; padding:2px 7px;}

/* pagina de projeto */
.voltar{font-family:var(--mono); font-size:12px; letter-spacing:1px; text-transform:uppercase;
        color:var(--ink-soft); text-decoration:none; display:inline-block; margin:32px 0 0;}
.voltar:hover{color:var(--navy);}
/* A coluna de leitura estava colada a esquerda dentro de um wrap de 1000px, com
   metade da tela vazia do lado direito. Centralizada, o texto respira e a pagina
   para de parecer inacabada. */
.projeto{padding:20px 0 56px;}
.projeto .wrap{max-width:720px;}
.projeto h1{font-size:38px;}
.projeto .tagline{font-size:19px; color:var(--ink-soft); margin:16px 0 0;}
.projeto h2{font-family:var(--mono); font-size:12px; letter-spacing:2px; text-transform:uppercase;
            color:var(--seal); margin:40px 0 12px;}
.projeto p.corpo{font-size:16.5px; line-height:1.7; margin:0 0 14px;}
.acoes{display:flex; gap:12px; flex-wrap:wrap; margin-top:14px;}
.btn{font-weight:700; font-size:15.5px; padding:14px 24px; border-radius:3px;
     border:2px solid var(--ink); text-decoration:none; display:inline-flex; align-items:center;}
.btn-primario{background:var(--ink); color:var(--paper);}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line);}
.aviso{background:var(--paper-raised); border:1px dashed var(--seal); border-radius:4px;
       padding:16px 18px; font-size:15px; color:var(--ink-soft);}

/* Fim da pagina de projeto: leva pra outro projeto em vez de terminar em beco. */
.tambem{border-top:1px solid var(--line); padding:34px 0 8px;}
.tambem .wrap{max-width:720px;}
.tambem .area-label{margin-bottom:14px;}
.tambem ul{list-style:none; margin:0; padding:0; display:grid;
           grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px 22px;}
.tambem a{font-size:15px; text-decoration:none; border-bottom:1px solid var(--line-soft);
          padding-bottom:7px; display:block;}
.tambem a:hover{border-color:var(--navy); color:var(--navy);}

/* capa do produto na pagina de projeto */
.capa{float:right; width:200px; margin:6px 0 20px 28px;}
.capa img{border:2px solid var(--ink); border-radius:3px;}

/* blog na home */
.blog .wrap{max-width:1000px;}
.blog ul{list-style:none; margin:0; padding:0; display:grid;
         grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px;}
.blog li{background:var(--paper-raised); border:1px solid var(--line); border-radius:4px; padding:18px 20px;}
.blog li a{text-decoration:none; font-family:var(--display); font-size:17px; font-weight:600;
           display:block; margin-bottom:6px;}
.blog li a:hover{color:var(--navy);}
.blog li p{margin:0; font-size:14.5px; color:var(--ink-soft);}
.blog .data{font-family:var(--mono); font-size:11.5px; color:var(--ink-soft); margin-top:9px;}
.blog .vazio{border:1px dashed var(--line); border-radius:4px; padding:22px 24px;
             color:var(--ink-soft); font-size:15.5px;}
.blog .todos{margin-top:16px; display:inline-block; font-family:var(--mono); font-size:12px;
             letter-spacing:1px; text-transform:uppercase; color:var(--navy);}

@media (max-width:640px){ .capa{float:none; width:180px; margin:0 0 20px;} }

footer{border-top:2px solid var(--ink); padding:26px 0; margin-top:20px;}
footer .wrap{display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; align-items:center;}
footer .meta{font-family:var(--mono); font-size:12px; color:var(--ink-soft);}
footer a{color:var(--navy);}

@media (max-width:800px){
  .hero-grid{grid-template-columns:1fr; gap:28px;}
  .retrato{max-width:280px;}
  h1{font-size:34px;}
  .projeto h1{font-size:30px;}
}