/* =========================================================
   Ian Lucarelli — Art Director
   Cores, fontes e espaçamentos: edite os tokens abaixo
   ========================================================= */
:root{
  --cream:#faf8f0;
  --cream-2:#e9e4d4;
  --green:#0a5a13;
  --ink:#1a1a1a;
  --gap:clamp(6px,0.78vw,12px);
  --pad:clamp(12px,1.2vw,20px);
  --serif:"Instrument Serif", Georgia, serif;
  --mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;
  --cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect x='.5' y='.5' width='15' height='15' fill='%230a5a13' stroke='%23faf8f0'/%3E%3C/svg%3E") 8 8, auto;
  --cursor-hover:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='.5' y='.5' width='23' height='23' fill='%230a5a13' stroke='%23faf8f0'/%3E%3C/svg%3E") 12 12, pointer;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--cream);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{font-family:var(--mono);font-size:13px;line-height:1.55;background:var(--cream);cursor:var(--cursor);overflow-x:hidden}
a{color:inherit;text-decoration:none;cursor:var(--cursor-hover)}
img,video{display:block;width:100%;height:auto}
::selection{background:var(--green);color:var(--cream)}

/* ---------- topo ---------- */
.top{position:sticky;top:0;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:var(--pad);pointer-events:none}
.top>*{pointer-events:auto}
.top .l,.top .r{display:flex;gap:4px;flex-wrap:wrap}
.top .r{justify-content:flex-end}
.pill{display:inline-flex;align-items:center;height:20px;padding:0 7px;background:var(--green);color:var(--cream);font:500 10px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;transition:opacity .2s}
.pill.soft{background:var(--cream-2);color:var(--green)}
a.pill:hover{opacity:.82}
.horse{width:44px;display:block;transition:transform .4s}
.horse:hover{transform:translateX(3px)}

/* ---------- header da home ---------- */
.hero{position:relative;padding:clamp(10px,2vw,30px) var(--pad) clamp(40px,5vw,80px);text-align:center}
.card{width:clamp(220px,34vw,600px);margin:0 auto -3.2vw;transform:rotate(-8deg);position:relative;z-index:2;pointer-events:none}
.hero h1{position:relative;z-index:1;font:italic 400 clamp(26px,4.3vw,78px)/.92 var(--serif);letter-spacing:-.01em;text-transform:uppercase;color:var(--green)}

/* ---------- grade de projetos ---------- */
.work{padding:0 var(--pad);display:flex;flex-direction:column;gap:var(--gap)}
.block{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
.w3{grid-column:span 3}.w4{grid-column:span 4}.w6{grid-column:span 6}.w8{grid-column:span 8}
.tile.ar{aspect-ratio:1.28}
.tile.fill{min-height:100%}
.block.r4{grid-template-rows:1fr 1fr}
.block.r4 .big{grid-column:5 / span 8;grid-row:1 / span 2}
.block.r4 .s1{grid-column:1 / span 4;grid-row:1}
.block.r4 .s2{grid-column:1 / span 4;grid-row:2}
.tile .ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#5b0c2e;color:#f7e9ee;text-align:center}
.tile .ph b{font:italic 400 clamp(28px,3.4vw,58px)/1 var(--serif)}
.tile .ph small{font:500 10px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;opacity:.7}
.vbox{position:relative}
.vbox video{cursor:var(--cursor-hover)}
.snd{position:absolute;right:8px;bottom:8px;border:0;background:var(--cream);color:var(--green);font:500 10px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;padding:5px 7px;cursor:var(--cursor-hover)}
.igrid{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--gap)}
.tile{position:relative;overflow:hidden;background:var(--cream-2);display:block}
.tile .m{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);transition:transform .8s cubic-bezier(.2,.7,.2,1),opacity .4s}
.tile:hover .m{transform:scale(1.03);opacity:.9}
.tile .pill{position:absolute;left:8px;bottom:8px;background:var(--cream);color:var(--green)}
.tile .pill .arr{display:inline-block;width:0;overflow:hidden;transition:width .25s}
.tile:hover .pill .arr{width:14px}

/* ---------- rodapé ---------- */
.foot{padding:clamp(60px,8vw,140px) var(--pad) var(--pad);overflow:hidden}
.foot .big{font:italic 400 clamp(44px,11.5vw,210px)/.82 var(--serif);letter-spacing:-.02em;text-transform:uppercase;color:var(--green);white-space:nowrap}
.foot .row{display:flex;justify-content:space-between;gap:12px;margin-top:22px;color:var(--green);font-size:11px;letter-spacing:.03em;text-transform:uppercase}

/* ---------- página de projeto ---------- */
.proj{padding:clamp(10px,2vw,30px) var(--pad) 0}
.proj h1{font:italic 400 clamp(38px,7vw,128px)/.9 var(--serif);letter-spacing:-.01em;text-transform:uppercase;color:var(--green)}
.proj .meta{margin-top:10px;color:var(--green);font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.proj .sum{margin-top:clamp(20px,2.4vw,40px);max-width:30ch;font:400 clamp(22px,2.4vw,40px)/1.12 var(--serif);letter-spacing:-.01em;color:var(--green)}
.proj .info{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,80px);margin:clamp(24px,3vw,48px) 0 clamp(36px,4vw,64px)}
.proj .desc p{max-width:58ch;font-size:13px}
.proj .desc p+p{margin-top:1em}
.proj .cred{color:var(--green);font-size:12.5px;white-space:pre-line;justify-self:end;min-width:min(100%,330px)}
.media{display:flex;flex-direction:column;gap:var(--gap)}
.media .row{display:grid;gap:var(--gap)}
.media .row.c2{grid-template-columns:1fr 1fr}
.media .row.c3{grid-template-columns:1fr 1fr 1fr}
.embed{position:relative;width:100%;aspect-ratio:16/9;background:#8f8e8a}
.embed.v{aspect-ratio:9/16}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.next{display:block;margin:clamp(60px,7vw,120px) 0 0;padding:0 0 var(--pad)}
.next small{display:block;color:var(--green);font-size:11px;letter-spacing:.05em;text-transform:uppercase;margin-bottom:6px}
.next b{display:inline-block;font:italic 400 clamp(38px,7vw,128px)/.9 var(--serif);text-transform:uppercase;color:var(--green);transition:transform .4s}
.next:hover b{transform:translateX(12px)}
.copy{padding:28px var(--pad) var(--pad);color:var(--green);font-size:11px;letter-spacing:.03em;text-transform:uppercase}

/* ---------- about ---------- */
.about{padding:clamp(20px,4vw,70px) var(--pad) 0}
.lead{position:relative;font:400 clamp(26px,3.75vw,68px)/1.02 var(--serif);letter-spacing:-.012em;color:var(--green)}
.lead .lbl{position:absolute;left:0;top:.62em;font:400 11px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase}
.lead .ind{display:inline-block;width:16.5%}
.ab-grid{display:grid;grid-template-columns:16.5% 31% 1fr;gap:0;margin:clamp(60px,8vw,140px) 0}
.ab-grid .lbl{color:var(--green);font-size:11px;letter-spacing:.05em;text-transform:uppercase}
.ab-lists{grid-column:1 / span 2;display:grid;grid-template-columns:16.5fr 31fr;row-gap:44px;align-content:start}
.ab-lists ul{list-style:none;font-size:13px;line-height:1.6}
.ab-photo{grid-column:3}
.ab-photo img{width:62%}
.ab-photo .contact{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px;font-size:12px}
.ab-photo .contact a{color:var(--green);text-transform:uppercase;letter-spacing:.04em;display:block}
.ab-photo .contact a:hover{text-decoration:underline}
.bigcta{display:flex;align-items:center;justify-content:flex-start;gap:.12em;border-top:1px solid var(--green);border-bottom:1px solid var(--green);margin-top:clamp(70px,9vw,150px);padding:1vw 0 2.4vw;font:italic 400 clamp(84px,20vw,360px)/.85 var(--serif);letter-spacing:-.02em;color:var(--green)}
.bigcta .arw{font:300 .62em/1 var(--mono);transition:transform .4s}
.bigcta:hover .arw{transform:translate(8px,8px)}

/* ---------- animação de entrada ---------- */
.rv{opacity:0;transform:translateY(16px);transition:opacity .8s ease,transform .8s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ---------- celular ---------- */
@media (max-width:760px){
  .top .hide-m{display:none}
  .horse{width:36px}
  .card{width:74vw;margin-bottom:-5vw}
  .hero h1{font-size:7.6vw}
  .block{grid-template-columns:1fr 1fr}
  .w8,.w6,.block.r4 .big{grid-column:1 / -1;grid-row:auto}
  .w4,.w3,.block.r4 .s1,.block.r4 .s2{grid-column:span 1;grid-row:auto}
  .block.r4{grid-template-rows:none}
  .tile.fill{min-height:0;aspect-ratio:1.28}
  .block.r1 .fill{grid-column:1 / -1;aspect-ratio:.8}
  .block.r4 .big{order:-1}
  .igrid{grid-template-columns:repeat(2,1fr)}
  .block.r3 .w4:first-child,.block.r5 .w4:first-child{grid-column:1 / -1}
  .block.r3 .pill,.block.r4 .s1 .pill,.block.r4 .s2 .pill{font-size:9px}
  .proj .info{grid-template-columns:1fr;gap:22px}
  .proj .cred{justify-self:start}
  .media .row.c2,.media .row.c3{grid-template-columns:1fr;justify-items:center}
  .media .row.c2 .embed.v,.media .row.c3 .embed.v{width:78%}
  .lead .ind{width:28%}
  .ab-grid{grid-template-columns:1fr;row-gap:40px}
  .ab-lists{grid-column:auto;grid-row:2;grid-template-columns:30% 1fr;row-gap:28px}
  .ab-photo{grid-column:auto;grid-row:1}
  .ab-photo img{width:70%}
  .foot .row{flex-direction:column;gap:6px}
}