:root{
  --ink:#F4F4F4;      /* texto · 17,90:1 sobre o fundo */
  --paper:#0B0B0B;    /* preto, cor principal */
  --paper2:#161616;   /* superfície */
  --grey:#9A9A9A;     /* secundário · 6,99:1 */
  --navy:#7FA0E0;     /* estrutura · 7,50:1 */
  --bordo:#E5959D;    /* ênfase · 8,55:1 */
  --yellow:#F2C10D;   /* marcador · 11,63:1, e no preto pode ser texto */
  --red:#C1121F;     /* destaque de frase: 3,16:1 no fundo, 5,90:1 com branco */
  --line:#2A2A2A;
  --f-display:"Comfortaa","Trebuchet MS",sans-serif;
  --f-head:"Questrial","Helvetica Neue",Arial,sans-serif;
  --f-label:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --f-body:"Poppins","Helvetica Neue",Arial,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-body); font-size:14.5px; line-height:1.62; font-weight:300;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--red); color:#FFFFFF}
a{color:inherit}
:focus-visible{outline:2px solid var(--red); outline-offset:3px}

.arc{font-family:var(--f-label)}
.lbl{font-family:var(--f-label); font-weight:700; font-size:9.5px;
     letter-spacing:.14em; text-transform:uppercase; color:var(--navy)}
.grey{color:var(--grey)}
mark{background:var(--red); color:#FFFFFF; padding:.08em .26em}

/* ---------- shell ---------- */
.wrap{max-width:1280px; margin:0 auto; padding-inline:24px}
@media(min-width:1100px){ .wrap{padding-inline:56px} }

nav{border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--paper); z-index:20}
.navin{display:flex; align-items:baseline; justify-content:space-between; gap:20px;
       padding-block:18px; flex-wrap:wrap}
.brand{font-family:var(--f-display); font-weight:700; font-size:18px;
       letter-spacing:-.02em; text-decoration:none}
.brand i{font-style:normal; color:var(--grey); font-weight:600}
.navlinks{display:flex; gap:26px; align-items:baseline}
.navlinks a{font-family:var(--f-label); font-weight:700; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none; color:var(--ink);
  padding-bottom:3px; border-bottom:2px solid transparent}
.navlinks a:hover{border-bottom-color:var(--line)}
.navlinks a.on{color:var(--ink); border-bottom-color:var(--red)}

main{padding-block:0 110px; min-height:70vh}

/* ---------- grid ---------- */
.g12{display:grid; grid-template-columns:repeat(12,1fr); column-gap:24px}
.col-text{grid-column:1 / span 7}
.col-side{grid-column:9 / span 4}
.col-wide{grid-column:1 / span 10}
.col-full{grid-column:1 / -1}
@media(max-width:900px){
  .col-text,.col-side,.col-wide,.col-full{grid-column:1 / -1}
  .g12{row-gap:0}
}

/* ---------- type ---------- */
h1{font-family:var(--f-display); font-weight:700;
   font-size:clamp(30px,4.6vw,54px); line-height:1.04; letter-spacing:-.022em;
   margin:0; text-wrap:balance}
h2{font-family:var(--f-display); font-weight:600;
   font-size:clamp(19px,2.1vw,26px); line-height:1.18; letter-spacing:-.014em; margin:0; text-wrap:balance}
h3{font-family:var(--f-head); font-weight:400; font-size:17px;
   line-height:1.2; letter-spacing:0; margin:0}
p{margin:0 0 15px; max-width:60ch}
.big{font-size:16.5px; line-height:1.5; font-weight:400}
hr.rule{border:0; border-top:1px solid var(--line); margin:0}

/* ---------- home ---------- */
.heroacts{margin-top:34px; display:flex; gap:28px; flex-wrap:wrap; align-items:baseline}
.link-em{font-family:var(--f-label); font-weight:700; font-size:11.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink); text-decoration:none;
  border-bottom:2px solid var(--red); padding-bottom:2px}
.link-q{font-family:var(--f-label); font-weight:700; font-size:11.5px;
  letter-spacing:.1em; text-transform:uppercase; text-decoration:none;
  border-bottom:1px solid var(--line); padding-bottom:2px}

/* ---------- work list ---------- */
.worklist{display:grid; grid-template-columns:repeat(12,1fr); column-gap:24px; row-gap:56px; padding-block:12px 0}
.w-item{text-decoration:none; display:block}
.w-a{grid-column:1 / span 7}
.w-b{grid-column:8 / span 5; padding-top:76px}
.w-c{grid-column:1 / span 5}
.w-d{grid-column:7 / span 6; padding-top:40px}
.w-half{grid-column:span 6}
.w-third{grid-column:span 4}
@media(max-width:900px){ .w-a,.w-b,.w-c,.w-d,.w-half{grid-column:1 / -1; padding-top:0} .w-third{grid-column:span 6} }

.frame{background:var(--paper2); border:1px solid #333; aspect-ratio:4/3;
  display:flex; align-items:flex-end; padding:12px; max-width:100%; margin-bottom:14px}
.frame.tall{aspect-ratio:3/4}
.frame.wide{aspect-ratio:16/9}
.frame span{font-family:var(--f-label); font-weight:600; font-size:10px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--grey)}
.w-item:hover .frame{border-color:var(--ink)}
.w-meta{display:flex; justify-content:space-between; gap:16px; align-items:baseline; margin-top:7px}
.w-item h3{margin-bottom:2px; font-family:var(--f-head); font-size:16px}
.w-cat{font-family:var(--f-label); font-weight:700; font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--navy)}
.w-year{font-family:var(--f-label); font-weight:600; font-size:10px;
  letter-spacing:.08em; color:var(--grey)}
.w-note{color:var(--grey); font-size:13.5px; margin:5px 0 0; max-width:46ch}

/* ---------- case ---------- */
.caseback{padding-block:34px 0}
.caseback a{font-family:var(--f-label); font-weight:700; font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; text-decoration:none; color:var(--grey)}
.caseback a:hover{color:var(--ink)}
.casehero{margin:14px 0 0; padding:0}
.casehero img{width:100%; aspect-ratio:16/8.4; max-height:74vh; object-fit:cover; object-position:center;
  display:block; border:1px solid #333; background:#0F0F0F}
.casehead{padding-block:26px 40px}
.casehead h1{font-size:clamp(24px,3.2vw,38px)}
.casehead .sum{margin-top:18px; font-size:15.5px; max-width:56ch; font-weight:300}

.meta{border-top:1px solid var(--ink); border-bottom:1px solid var(--line);
  padding-block:18px; display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:20px 24px}
.meta div span{display:block; margin-bottom:5px}
.meta div p{margin:0; font-size:13.5px; line-height:1.45}

.body{padding-block:44px 0}
.body h2{margin-block:64px 16px}
.body h2:first-child{margin-top:0}
.body h3{margin-block:34px 10px}

.shot{margin-block:26px 44px}
.shot img{width:100%; display:block; border:1px solid #333}
.shot figcaption{font-size:13px; color:var(--grey); margin-top:9px; max-width:56ch}
.strip{display:grid; gap:12px; margin-block:34px}
.strip.c2{grid-template-columns:repeat(2,1fr)}
.strip.c3{grid-template-columns:repeat(3,1fr)}
.strip.c4{grid-template-columns:repeat(4,1fr)}
.strip img{width:100%; display:block; border:1px solid #333}
.strip figcaption{grid-column:1 / -1; font-size:15px; color:var(--grey); margin-top:-2px; max-width:52ch}
@media(max-width:700px){ .strip.c3,.strip.c4{grid-template-columns:repeat(2,1fr)} }
.figure{margin-block:40px}
.figure figcaption{font-size:13px; color:var(--grey); margin-top:9px; max-width:56ch}

/* ---------- mosaico (tipos) ---------- */
/* linhas justificadas: cada imagem mantem a proporcao dela, nada e cortado */
.mos{margin:0}
.shot,.figure,.strip{margin-inline:0}
.mos-grid{display:flex; flex-wrap:wrap; gap:9px}
.mos-fill{flex-grow:0; flex-basis:0; height:0; padding:0; margin:0; border:0}
.mos-t{position:relative; flex:1 1 276px; padding:0; border:1px solid #333; background:#0F0F0F;
  display:block; cursor:zoom-in; overflow:hidden; line-height:0}
.mos-t:hover{border-color:var(--ink)}
.mos-t:focus-visible{outline:2px solid var(--yellow); outline-offset:2px}
.mos-t img,.mos-t video{width:100%; height:auto; display:block}

/* ---------- faixa (serie) ---------- */
.serie{margin:10px 0 0; position:relative; padding:0}
.serie-win{display:flex; gap:8px; overflow-x:auto; scroll-behavior:smooth;
  scroll-snap-type:x proximity; padding:0 0 6px; scrollbar-width:thin}
.serie-t{flex:0 0 auto; padding:0; border:1px solid #333; background:#0F0F0F;
  cursor:zoom-in; scroll-snap-align:start; display:block}
.serie-t:hover{border-color:var(--ink)}
.serie-t:focus-visible{outline:2px solid var(--yellow); outline-offset:2px}
.serie-t img,.serie-t video{height:clamp(196px,24vw,334px); width:auto; display:block}
.serie-btn{position:absolute; top:calc(clamp(98px,12vw,167px) - 32px); width:44px; height:64px;
  background:var(--navy); color:#0B0B0B; border:0; cursor:pointer; padding:0;
  font-family:var(--f-label); font-weight:700; font-size:20px; line-height:1; z-index:3}
.serie-btn:hover{background:var(--ink)}
.serie-btn.prev{left:-6px}
.serie-btn.next{right:-6px}
.serie-n{font-family:var(--f-label); font-weight:600; font-size:9.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--grey); margin-top:8px; display:block}

.mos-bar{display:flex; align-items:baseline; gap:14px; margin-top:8px; flex-wrap:wrap}
.mos-n{font-family:var(--f-label); font-weight:600; font-size:9.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--grey); font-variant-numeric:tabular-nums}
.mos-hint{font-family:var(--f-label); font-weight:600; font-size:9.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--grey); margin-left:auto}
.mos figcaption{font-size:13px; color:var(--grey); margin-top:10px; max-width:56ch}
@media(max-width:700px){
  .mos-grid,.mos-grid.g3,.mos-grid.g4{grid-template-columns:repeat(2,1fr)}
  .serie-btn{display:none}
}

/* ---------- case, novo esquema ---------- */
.casetitle{padding-block:28px 0}
.casetitle h1{text-transform:uppercase; letter-spacing:-.01em; margin-top:12px}
.caseintro{font-size:15px; line-height:1.6; max-width:96ch; margin:18px 0 0}
.caseflag{margin:16px 0 0; max-width:88ch; font-size:16px; line-height:1.5}
.metabar{background:var(--paper2); border:1px solid var(--line); margin-top:30px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px 26px; padding:20px 22px}
.metabar div p{margin:5px 0 0; font-size:13px; line-height:1.45; max-width:32ch}
@media(max-width:820px){ .metabar{grid-template-columns:repeat(2,1fr)} }
.block{margin-top:70px}
.block h2{margin:0 0 18px; font-family:var(--f-head); font-weight:400; letter-spacing:0}
.block .bt{font-size:14px; line-height:1.6; color:var(--grey); max-width:96ch; margin:16px 0 0}

.car-btn{font-family:var(--f-label); font-weight:700; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink); background:none; border:1px solid var(--line);
  padding:8px 14px; cursor:pointer; line-height:1}
.car-btn:hover{border-color:var(--ink)}
.car-n{font-family:var(--f-label); font-weight:600; font-size:11px; letter-spacing:.1em;
  color:var(--grey); font-variant-numeric:tabular-nums}

/* ---------- lightbox ---------- */
#lb{position:fixed; inset:0; z-index:200; background:#080808; display:none}
#lb.on{display:grid; grid-template-rows:1fr auto}
#lb .lb-stage{display:grid; place-items:center; padding:24px 20px 0; min-height:0; touch-action:pan-y}
#lb img,#lb video{max-width:min(96vw,1500px); max-height:calc(100vh - 150px); object-fit:contain; display:block; background:#0B0B0B}
#lb .lb-bar{display:flex; align-items:center; gap:14px; justify-content:center;
  padding:18px 20px 26px; flex-wrap:wrap}
#lb .lb-cap{width:100%; text-align:center; font-size:13px; color:var(--grey); margin:0 0 4px}
.lb-close{position:absolute; top:16px; right:18px}

/* numbers as typographic lines, not tiles */
.num{border-top:1px solid var(--ink); padding-top:14px; margin-block:34px; max-width:60ch}
.num b{display:block; font-family:var(--f-label); font-weight:800;
  font-size:clamp(28px,4.4vw,46px); line-height:1.02; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.num b em{font-style:normal; color:var(--grey)}
.num p{margin:10px 0 0; font-size:16.5px; color:var(--grey); max-width:52ch}

.plain{padding-left:0; list-style:none; margin:0 0 20px; max-width:64ch}
.plain li{padding-left:22px; position:relative; margin-bottom:11px}
.plain li:before{content:"-"; position:absolute; left:4px; color:var(--navy); font-family:var(--f-label); font-weight:700}

.pend{border:1px dashed var(--line); padding:16px 18px; margin-block:26px; max-width:60ch}
.pend p{margin:0; font-size:15.5px; color:var(--grey)}
.pend p:first-child{color:var(--bordo); font-family:var(--f-label);
  font-weight:700; font-size:10px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:7px}

.nextcase{border-top:1px solid var(--ink); margin-top:80px; padding-top:26px;
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:baseline;
  text-decoration:none}
.nextcase a{text-decoration:none}
.nextcase .lbl{display:block; margin-bottom:6px}
.nextcase h3:hover{color:var(--bordo)}

/* ---------- sobre / contato ---------- */
.kv{display:grid; grid-template-columns:150px 1fr; gap:14px 28px; max-width:70ch; margin-bottom:34px}
.kv dt{margin:0}
.kv dd{margin:0; font-size:16.5px}
@media(max-width:640px){ .kv{grid-template-columns:1fr; gap:4px 0} .kv dd{margin-bottom:14px} }

.job{border-top:1px solid var(--line); padding-block:26px}
.job:first-of-type{border-top:1px solid var(--ink)}
.job .top{display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; align-items:baseline; margin-bottom:10px}
.job .top h3{font-size:19px}
.job .when{font-family:var(--f-label); font-weight:600; font-size:11px;
  letter-spacing:.08em; color:var(--grey); text-transform:uppercase}
.job p{font-size:16.5px; margin-bottom:0; max-width:62ch}

.contact{padding-block:70px 0}
.contact h1{max-width:16ch}
.clist{border-top:1px solid var(--ink); margin-top:44px; max-width:60ch}
.clist a, .clist span.row{display:flex; justify-content:space-between; gap:18px;
  border-bottom:1px solid var(--line); padding-block:15px; text-decoration:none; align-items:baseline}
.clist a:hover{background:var(--paper2)}
.meta{border-top-color:var(--ink)}
.clist .what{font-family:var(--f-label); font-weight:700; font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--navy)}
.clist .val{font-size:16.5px}

footer{border-top:1px solid var(--line); padding-block:30px 40px; margin-top:20px}
.footin{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:baseline}
.footin p{margin:0; font-size:14.5px; color:var(--grey)}
.footin nav{border:0; position:static}
.footlinks{display:flex; gap:22px}
.footlinks a{font-family:var(--f-label); font-weight:700; font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase; text-decoration:none; color:var(--grey)}
.footlinks a:hover{color:var(--ink)}

@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* ---------- video na pagina ---------- */
.vid-flag{position:absolute; left:0; bottom:0; background:var(--yellow); color:#0B0B0B;
  font-family:var(--f-label); font-weight:700; font-size:9px; letter-spacing:.14em;
  text-transform:uppercase; padding:4px 8px; line-height:1; pointer-events:none}
.serie-t{position:relative}

/* ---------- modo galeria ---------- */
.gal-btn{font-family:var(--f-label); font-weight:700; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink); background:none; border:1px solid var(--red);
  padding:8px 13px; cursor:pointer; line-height:1; align-self:center}
.gal-btn:hover{background:var(--red); color:#FFFFFF}
.gal-btn[aria-pressed="true"]{background:var(--red); border-color:var(--red); color:#FFFFFF}
.navlinks{align-items:center}
@media(max-width:520px){ .gal-btn{font-size:9px; padding:7px 10px; letter-spacing:.1em} }

#app.galon .block,
#app.galon .metabar,
#app.galon .caseflag,
#app.galon .pend,
#app.galon .casehero{display:none}
#app.galon .casetitle{padding-bottom:6px}
/* o proximo projeto desce para depois do mosaico */
#app.galon{display:flex; flex-direction:column}
#app.galon .galmos{order:1}
#app.galon .nextcase{order:2}
.galmos{margin-top:34px}
.galmos[hidden]{display:none}

/* categoria ao lado do titulo do bloco, na pagina de arquivo */
.blk-cat{font-family:var(--f-label); font-weight:700; font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--navy); margin-left:12px; white-space:nowrap}

/* ---------- cabecalho com a marca no centro ---------- */
.navin{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:18px}
.navlinks{justify-self:end}
.navacts{justify-self:start; display:flex}
.brand{justify-self:center; display:block; line-height:0; color:var(--ink)}
.brand .logo{height:44px; width:auto; display:block}
.brand:hover{color:var(--red)}
@media(max-width:820px){
  .brand .logo{height:34px}
  .navlinks{gap:16px}
  .navlinks a{font-size:10px; letter-spacing:.1em}
}
@media(max-width:560px){
  .navin{grid-template-columns:auto 1fr; gap:12px; row-gap:12px}
  .brand{grid-column:1; grid-row:1; justify-self:start}
  .navlinks{grid-column:2; grid-row:1; justify-self:end}
  .navacts{grid-column:1 / -1; grid-row:2; justify-self:stretch}
  .navacts .gal-btn{width:100%}
}

/* ---------- hero da home ---------- */
.hero{position:relative; margin-top:0; margin-inline:calc(50% - 50vw); padding:0; overflow:hidden;
  border-block:1px solid var(--line)}
.hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:center 38%; display:block}
.hero-scrim{position:absolute; inset:0; background:rgba(11,11,11,.58)}
.hero-in{position:relative; display:grid; grid-template-columns:minmax(0,7fr) minmax(0,4fr);
  width:calc(100% - 112px); max-width:1168px; margin:0 auto; gap:40px; align-items:center; padding:54px 44px}
.hero-text{padding-bottom:0}
.hero .lbl{display:block; margin-bottom:22px}
.hero h1{letter-spacing:-.03em}
.hero p{margin-top:20px; font-size:16px; max-width:52ch; font-weight:300}
.hero-foto{margin:0; align-self:center}
.hero-foto img{display:block; width:100%; height:auto; max-height:420px; object-fit:cover;
  object-position:center top}
.about .hero-foto{align-self:start; margin-top:36px}
@media(max-width:900px){
  .hero-in{width:100%; grid-template-columns:1fr; gap:0; padding:44px 26px 0}
  .hero-text{padding-bottom:36px}
  .hero-foto{margin-inline:-26px}
  .hero-foto img{max-height:340px; object-position:center 20%}
  .about .hero-foto{margin-top:0}
}