/* =====================================================================
   PORTFÓLIO — SISTEMA VISUAL "REVISTA"  (identidade única do site)
   Referência: página Sobre. Muda aqui = muda no site inteiro.
   ===================================================================== */
:root{
  --ink:#14161B; --raised:#1A1D24; --paper:#E9E5DC; --muted:#9A9DA6;
  --faint:#6C727C; --gold:#C6A867;
  --line:rgba(233,229,220,.12); --line-strong:rgba(233,229,220,.22);
  --measure:60rem;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--ink); color:var(--paper);
  font-family:"Newsreader",Georgia,serif; font-size:clamp(1.06rem,.62rem+.7vw,1.22rem);
  line-height:1.75; font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit;}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;}
img{max-width:100%;}

/* ---------- masthead ---------- */
.site-top{
  max-width:var(--measure); margin:0 auto;
  padding:1.4rem clamp(1.3rem,6vw,2rem);
  display:flex; align-items:center; justify-content:space-between; gap:1.2rem;
  border-bottom:1px solid var(--line);
}
.brand{display:flex; flex-direction:column; gap:.32rem; text-decoration:none; line-height:1;}
.brand .name{font-size:1.24rem; font-weight:600; letter-spacing:.01em; color:var(--paper);}
.brand .tag{font-family:"IBM Plex Mono",monospace; font-size:.58rem; letter-spacing:.28em; text-transform:uppercase; color:var(--faint);}
.site-nav{display:flex; gap:1.25rem; flex-wrap:wrap; font-family:"IBM Plex Mono",monospace; font-size:.76rem; letter-spacing:.05em;}
.site-nav a{color:var(--muted); text-decoration:none; transition:color .18s ease;}
.site-nav a:hover,.site-nav a:focus-visible{color:var(--gold);}
.site-nav a[aria-current]{color:var(--paper);}
.site-nav a:focus-visible{outline:2px solid var(--gold); outline-offset:4px; border-radius:2px;}
.nav-toggle{display:none; background:none; border:1px solid var(--line-strong); color:var(--paper); font-size:1.1rem; line-height:1; padding:.4rem .6rem; border-radius:3px; cursor:pointer;}

/* ---------- main wrapper ---------- */
main{max-width:var(--measure); margin:0 auto; padding:clamp(2.4rem,6vw,4.6rem) clamp(1.3rem,6vw,2rem) 4.5rem;}
.narrow{max-width:42rem;}

/* ---------- record bar / kicker / titles ---------- */
.record{font-family:"IBM Plex Mono",monospace; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); border-bottom:1px solid var(--line); display:flex; justify-content:space-between; gap:1rem; padding:.85rem 0; margin-bottom:2.4rem;}
.record .status{color:var(--muted); white-space:nowrap;}
.record .dot{color:var(--gold);}
.kicker,.eyebrow{font-family:"IBM Plex Mono",monospace; font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin:0 0 1.2rem;}
h1{font-weight:600; font-size:clamp(2.2rem,1.1rem+4.2vw,3.6rem); line-height:1.05; letter-spacing:-.015em; margin:0 0 1.1rem; color:var(--paper);}
h2{font-weight:600; font-size:clamp(1.5rem,1rem+1.6vw,2rem); line-height:1.15; letter-spacing:-.01em; margin:2.4rem 0 .8rem; color:var(--paper);}
.dek{font-style:italic; font-size:clamp(1.15rem,.9rem+.6vw,1.4rem); line-height:1.5; color:var(--muted); margin:0; max-width:36rem;}
p{margin:0 0 1.3rem;}

/* ---------- ficha ---------- */
.ficha{display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem 1.6rem; margin:2.6rem 0; padding:1.5rem 0; border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong);}
.ficha dt{font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); margin:0 0 .45rem;}
.ficha dd{margin:0; font-size:.98rem; line-height:1.4; color:var(--paper);}

/* ---------- article building blocks ---------- */
.beat{font-family:"IBM Plex Mono",monospace; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin:3rem 0 1rem; display:flex; align-items:center; gap:.8rem;}
.beat::after{content:""; flex:1; height:1px; background:var(--line);}
.lead::first-letter{float:left; font-size:3.4rem; line-height:.82; font-weight:600; padding:.28rem .55rem 0 0; color:var(--paper);}
.stat{margin:2.4rem 0; padding:1.4rem 1.5rem; background:var(--raised); border:1px solid var(--line); border-radius:2px; display:flex; flex-wrap:wrap; gap:.6rem 2.2rem;}
.stat span{font-family:"IBM Plex Mono",monospace; font-size:.92rem; color:var(--paper);}
.stat b{color:var(--gold); font-weight:500;}
.corp,blockquote{margin:3.2rem 0 1rem; padding:1.5rem 1.6rem; background:var(--raised); border-left:3px solid var(--gold); border-radius:0 3px 3px 0;}
.corp .tag{font-family:"IBM Plex Mono",monospace; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin:0 0 .7rem;}
.corp p,blockquote{font-style:italic; font-size:1.16rem; line-height:1.55; margin:0;}
blockquote{color:var(--paper);}
.principios{margin:1.4rem 0 0;}
.principio{display:grid; grid-template-columns:2.4rem 1fr; gap:1rem; align-items:baseline; padding:1rem 0; border-top:1px solid var(--line);}
.principio .n{font-family:"IBM Plex Mono",monospace; font-size:.85rem; color:var(--gold);}
.principio p{margin:0; font-size:1.06rem; line-height:1.45;} .principio b{font-weight:600;}
.credo{margin:3.2rem 0 1rem; padding:1.5rem 1.6rem; background:var(--raised); border-left:3px solid var(--gold); border-radius:0 3px 3px 0;}
.credo .tag{font-family:"IBM Plex Mono",monospace; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin:0 0 .7rem;}
.credo p{margin:0; font-style:italic; font-size:1.18rem; line-height:1.55;}
.cta{margin-top:2.2rem;}
.cta a{font-family:"IBM Plex Mono",monospace; font-size:.85rem; letter-spacing:.03em; color:var(--gold); text-decoration:none; border-bottom:1px solid var(--line-strong); padding-bottom:.15rem;}
.cta a:hover{border-color:var(--gold);}

/* ---------- Sobre hero (foto) ---------- */
.about-hero{display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(1.8rem,5vw,3.2rem); align-items:center;}
.about-photo{margin:0;}
.about-photo img{display:block; width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 16%;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 11%,#000 89%,transparent),linear-gradient(to bottom,transparent,#000 9%,#000 91%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 11%,#000 89%,transparent),linear-gradient(to bottom,transparent,#000 9%,#000 91%,transparent);
  mask-composite:intersect;}

/* ---------- page hero (listas / seções simples) ---------- */
.pageHero{margin-bottom:2.6rem;}
.pageHero h1{margin-bottom:.8rem;}
.pageHero p{color:var(--muted); max-width:40rem;}

/* ---------- métricas (índice de números) ---------- */
.metrics{display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; border-top:1px solid var(--line-strong); padding-top:1.6rem; margin:2.4rem 0;}
.metrics article b{display:block; font-size:2rem; font-weight:600; color:var(--gold); line-height:1;}
.metrics article span{font-family:"IBM Plex Mono",monospace; font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-top:.5rem; display:block;}

/* ---------- grid de cards (Biblioteca / Projetos / Cases) ---------- */
.section{margin-top:1.5rem;}
#search{width:100%; max-width:24rem; background:var(--raised); border:1px solid var(--line-strong); color:var(--paper); font-family:"IBM Plex Mono",monospace; font-size:.85rem; padding:.7rem .9rem; border-radius:3px; margin-bottom:1.8rem;}
#search:focus{outline:none; border-color:var(--gold);}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(17rem,1fr)); gap:1.1rem;}
.card{background:var(--raised); border:1px solid var(--line); border-radius:3px; padding:1.4rem 1.4rem 1.5rem; transition:border-color .18s ease,transform .18s ease; text-decoration:none; color:inherit; display:block;}
.card:hover{border-color:var(--gold); transform:translateY(-2px);}
.card em,.card>b{font-family:"IBM Plex Mono",monospace; font-style:normal; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold);}
.card h3{font-size:1.3rem; font-weight:600; line-height:1.2; margin:.5rem 0 .5rem; color:var(--paper);}
.card p{font-size:.98rem; line-height:1.45; color:var(--muted); margin:0;}

/* ---------- fluxo mono (Sobre antigo etc.) ---------- */
.flow{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .7rem; font-family:"IBM Plex Mono",monospace; font-size:.72rem; letter-spacing:.1em; color:var(--muted); margin:1.2rem 0;}
.flow b{color:var(--gold); font-weight:400;}

/* ---------- rodapé de folhear ---------- */
.flip{max-width:var(--measure); margin:0 auto; padding:1.5rem clamp(1.3rem,6vw,2rem); border-top:1px solid var(--line-strong); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1rem; font-family:"IBM Plex Mono",monospace;}
.flip a{text-decoration:none; color:var(--muted); font-size:.82rem; transition:color .18s ease; display:block;}
.flip a:hover,.flip a:focus-visible{color:var(--gold);}
.flip .prev{text-align:left;} .flip .next{text-align:right;}
.flip .lbl{font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); display:block; margin-bottom:.25rem;}
.flip .pos{font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--faint);}
.colophon{max-width:var(--measure); margin:0 auto; padding:1.8rem clamp(1.3rem,6vw,2rem) 3rem; display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem 1.2rem; border-top:1px solid var(--line); font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.08em; color:var(--faint);}
.colophon strong{font-family:"Newsreader",serif; font-size:1rem; font-weight:600; letter-spacing:0; color:var(--paper);}
.colophon .sep{color:var(--muted);}

/* ---------- responsivo ---------- */
@media(max-width:820px){
  .about-hero{grid-template-columns:1fr; gap:1.8rem;}
  .about-photo{max-width:22rem; margin:0 auto;}
  .ficha,.metrics{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:640px){
  .nav-toggle{display:block;}
  .site-nav{display:none; width:100%; flex-direction:column; gap:.9rem; padding-top:1rem;}
  .site-top{flex-wrap:wrap;}
  .site-nav.open{display:flex;}
  .flip{grid-template-columns:1fr 1fr;} .flip .pos{display:none;}
}

/* ---------- home enriquecida ---------- */
.cta{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:1.5rem;}
.btn{font-family:"IBM Plex Mono",monospace;font-size:.8rem;letter-spacing:.04em;text-decoration:none;padding:.8rem 1.3rem;border-radius:2px;border:1px solid transparent;transition:all .18s ease;}
.btn.primary{background:var(--gold);color:#1a1206;font-weight:500;}
.btn.primary:hover{background:#d4b877;}
.btn.ghost{border-color:var(--line-strong);color:var(--paper);}
.btn.ghost:hover{border-color:var(--gold);color:var(--gold);}
.hero-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(1.8rem,5vw,3.5rem);align-items:center;}
.herocard{background:var(--raised);border:1px solid var(--line);border-radius:4px;padding:1.6rem 1.7rem;}
.herocard .hc-name{font-size:1.35rem;font-weight:600;color:var(--paper);}
.herocard .hc-role{font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.08em;color:var(--gold);margin:.3rem 0 1.2rem;}
.herocard ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem;}
.herocard li{font-size:.96rem;color:var(--muted);padding-left:1.1rem;position:relative;}
.herocard li::before{content:"\203A";position:absolute;left:0;color:var(--gold);}
.libhead{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin:3.8rem 0 .3rem;}
.libhead h2{margin:0;}
.libhead .all{font-family:"IBM Plex Mono",monospace;font-size:.76rem;color:var(--gold);text-decoration:none;white-space:nowrap;}
.libhead .all:hover{text-decoration:underline;}
.libsub{color:var(--muted);margin:0 0 1.6rem;max-width:40rem;}
.destaques{display:flex;gap:1rem;overflow-x:auto;padding-bottom:.9rem;scroll-snap-type:x proximity;}
.destaques::-webkit-scrollbar{height:6px;}
.destaques::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:3px;}
.dcard{flex:0 0 16.5rem;scroll-snap-align:start;background:var(--raised);border:1px solid var(--line);border-radius:3px;padding:1.3rem;display:flex;flex-direction:column;gap:.55rem;text-decoration:none;color:inherit;transition:border-color .18s ease,transform .18s ease;}
.dcard:hover{border-color:var(--gold);transform:translateY(-3px);}
.dcard .badge{font-family:"IBM Plex Mono",monospace;font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);}
.dcard h3{font-size:1.16rem;font-weight:600;line-height:1.2;margin:.05rem 0;color:var(--paper);}
.dcard p{font-size:.92rem;line-height:1.4;color:var(--muted);margin:0;flex:1;}
.dcard .tags{font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.04em;color:var(--faint);}
.dcard .go{font-family:"IBM Plex Mono",monospace;font-size:.85rem;color:var(--gold);align-self:flex-end;margin-top:.2rem;}
.contato{margin:4rem 0 1rem;padding:2.2rem clamp(1.4rem,4vw,2.4rem);background:var(--raised);border:1px solid var(--line);border-radius:4px;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;}
.contato h2{margin:0 0 .5rem;}
.contato p{color:var(--muted);margin:0 0 1.2rem;max-width:32rem;}
.contato .loc{font-family:"IBM Plex Mono",monospace;font-size:.78rem;letter-spacing:.08em;color:var(--faint);}
@media(max-width:820px){.hero-grid{grid-template-columns:1fr;}.contato{flex-direction:column;align-items:flex-start;}}