/* Portfólio Maria Costa — estilos. Você não precisa editar este arquivo para trocar conteúdo. */
html,body{margin:0}
[hidden]{display:none!important}
img,video{max-width:100%}
/* Layout: interface monocromática e silenciosa em grade de 12 colunas; a cor vem só dos trabalhos. Home = índice com prévia grande; case = texto fixo numa coluna estreita, imagens na larga. */
:root{
  --bg:#F4F4F2; --fg:#121212; --muted:#75756F; --line:#DCDCD7; --tile:#E8E8E4; --raise:#FFFFFF;
  --sans:"Fluent","Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --xs:12px; --sm:14px; --md:16px; --lg:clamp(20px,1.9vw,28px); --xl:clamp(28px,3.6vw,52px); --xxl:clamp(40px,6.4vw,96px);
  --gut:clamp(16px,2vw,28px); --hdr:56px;
}
:root{color-scheme:light;--grain:none}
/* testes de personalidade */
#bigname span{display:inline-block;transition:font-weight .35s ease}
.fx-react #bigname span{animation:rise .8s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i)*45ms)}
@keyframes rise{from{transform:translateY(35%);opacity:0}}
.fx-paper{--bg:#F4F0E8;--tile:#E9E3D8;--line:#DCD5C8;--muted:#78736A;--raise:#FBF9F5}
.fx-paper body,.fx-paper body::before,.fx-paper .lb{background-image:var(--grain)}
.pn{display:none}
.fx-print .pn{display:block}
.fx-print .pn.ni{display:inline}
.fx-print .pn.reg{display:inline-block}
.reg{width:12px;height:12px;border:1px solid currentColor;border-radius:50%;position:relative;align-self:center;flex:none}
.reg::before,.reg::after{content:"";position:absolute;background:currentColor}
.reg::before{left:50%;top:-4px;bottom:-4px;width:1px;transform:translateX(-50%)}
.reg::after{top:50%;left:-4px;right:-4px;height:1px;transform:translateY(-50%)}
.fx-print .figcap{display:flex;justify-content:space-between;gap:16px;padding-top:12px;font-size:var(--xs);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.slug{letter-spacing:.06em;text-transform:uppercase}
.fx-print .frame.cm{overflow:visible}
.fx-print .frame.cm .art{transform:none}
.fx-print .frame.cm::after{content:"";position:absolute;inset:-14px;pointer-events:none;z-index:3;--cm:var(--muted);background:linear-gradient(var(--cm),var(--cm)) left 0 top 14px/9px 1px,linear-gradient(var(--cm),var(--cm)) left 14px top 0/1px 9px,linear-gradient(var(--cm),var(--cm)) right 0 top 14px/9px 1px,linear-gradient(var(--cm),var(--cm)) right 14px top 0/1px 9px,linear-gradient(var(--cm),var(--cm)) left 0 bottom 14px/9px 1px,linear-gradient(var(--cm),var(--cm)) left 14px bottom 0/1px 9px,linear-gradient(var(--cm),var(--cm)) right 0 bottom 14px/9px 1px,linear-gradient(var(--cm),var(--cm)) right 14px bottom 0/1px 9px;background-repeat:no-repeat}
.fxp{position:fixed;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:70;width:min(270px,calc(100vw - 32px));background:var(--raise);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.12);font-size:13px}
.fxp .hd{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;width:100%}
.fxp .bd{display:flex;flex-direction:column;gap:10px;padding:0 14px 14px}
.fxp label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.fxp input{margin-top:3px;accent-color:var(--fg)}
.fxp small{display:block;color:var(--muted)}
.fxp.min .bd{display:none}
*{box-sizing:border-box}
html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}.lenis.lenis-stopped{overflow:hidden}
body{background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:var(--sm);line-height:1.5;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:40;background:var(--bg)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.wrap{padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px))}
.g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut)}
.lbl{font-size:var(--sm);font-weight:400;color:var(--muted)}
.mut{color:var(--muted)}
.note{display:none}
.note-on{font-size:var(--xs);color:var(--muted);text-align:center;padding-block:7px;border-bottom:1px solid var(--line)}

/* header */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:transparent;border-bottom:1px solid transparent;transition:border-color .3s,background-color .3s}
.scrolled-y header.top{border-bottom-color:var(--line);background:color-mix(in srgb,var(--bg) 80%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
header.top .in{height:var(--hdr);display:flex;align-items:center;justify-content:space-between;gap:16px}
.id{display:flex;gap:14px;align-items:baseline;min-width:0}
.id b{font-weight:600;font-size:var(--md);letter-spacing:-.01em;white-space:nowrap}
.id span{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav{display:flex;align-items:center;gap:clamp(14px,2vw,28px)}
.nav button{color:var(--muted);transition:color .2s}
.nav button:hover,.nav button[aria-current="page"]{color:var(--fg)}
.lang{display:flex;border:1px solid var(--line);border-radius:99px;padding:2px}
.lang button{font-size:var(--xs);padding:3px 9px;border-radius:99px;color:var(--muted)}
.lang button.on{background:var(--fg);color:var(--bg)}

/* placeholder art (troca por imagem/vídeo real) */
.art{position:absolute;inset:0;overflow:hidden;container-type:size;background:var(--a)}
.art .wm{position:absolute;inset:0;display:grid;place-items:center;color:var(--b);font-weight:600;font-size:13cqmin;letter-spacing:-.045em}
.art .big{position:absolute;right:-4%;bottom:-30%;font-size:118cqmin;line-height:1;font-weight:600;color:var(--a);letter-spacing:-.06em}
.art .cd{position:absolute;width:44cqw;aspect-ratio:85/55;border-radius:1.2cqmin;box-shadow:0 2cqmin 5cqmin rgba(0,0,0,.18);display:grid;place-items:center;font-weight:600;font-size:4cqw;letter-spacing:-.03em}
.art .cd:nth-child(1){left:14%;top:22%;background:var(--a);color:var(--b);transform:rotate(-7deg)}
.art .cd:nth-child(2){left:40%;top:40%;background:var(--b);color:var(--a);transform:rotate(5deg)}
.art .pst{position:absolute;left:50%;top:50%;height:80%;aspect-ratio:2/3;transform:translate(-50%,-50%);background:var(--b);box-shadow:0 2cqmin 6cqmin rgba(0,0,0,.2);overflow:hidden}
.art .pst i{position:absolute;left:8%;right:8%;top:8%;height:1px;background:var(--a);opacity:.6}
.art .pst i+i{top:auto;bottom:8%}
.art .pst span{position:absolute;left:8%;bottom:12%;writing-mode:vertical-rl;transform:rotate(180deg);color:var(--a);font-weight:600;font-size:16cqmin;line-height:.85;letter-spacing:-.05em}
.art .pat{position:absolute;inset:-20%;background:repeating-radial-gradient(circle at 30% 60%,var(--a) 0 4cqmin,var(--b) 4cqmin 8cqmin)}
.art .spr{position:absolute;left:50%;top:50%;width:80%;aspect-ratio:3/2;transform:translate(-50%,-50%);display:grid;grid-template-columns:1fr 1fr;box-shadow:0 2cqmin 6cqmin rgba(0,0,0,.18)}
.art .spr div{background:var(--a);position:relative}
.art .spr div:first-child{display:flex;align-items:flex-end;padding:7%;font-weight:600;font-size:7cqmin;line-height:.95;letter-spacing:-.04em;color:var(--b);border-right:1px solid rgba(0,0,0,.08)}
.art .spr div:last-child{background:var(--a) repeating-linear-gradient(transparent 0 1.6cqmin,color-mix(in srgb,var(--b) 35%,transparent) 1.6cqmin calc(1.6cqmin + 1px)) content-box;padding:9% 9% 14%}
.art .spr div:last-child::before{content:"";position:absolute;right:9%;top:9%;width:3cqmin;height:3cqmin;border-radius:50%;background:var(--c)}
.art.illus{background:radial-gradient(38% 46% at 30% 42%,var(--b),transparent 72%),radial-gradient(42% 42% at 70% 62%,var(--c),transparent 72%),var(--a)}
.art .tag{position:absolute;left:12px;top:12px;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.42);padding:3px 8px;border-radius:99px;z-index:2}
.art.vid .wm,.art.vid .pat,.art.vid .pst,.art.vid .spr,.art.vid .cd{animation:breathe 7s ease-in-out infinite alternate}
.art.vid.illus{background-size:160% 160%;animation:drift 9s ease-in-out infinite alternate}
@keyframes breathe{to{scale:1.05}}
@keyframes drift{from{background-position:0 40%}to{background-position:100% 60%}}
.frame{position:relative;overflow:hidden;background:var(--tile);max-width:100%}

/* home */
.intro{padding-block:clamp(28px,4vw,56px) clamp(48px,7vw,96px);row-gap:20px;align-items:start}
.intro h1{grid-column:1/-1;margin:0;font-weight:400;font-size:clamp(52px,9vw,168px);line-height:1;letter-spacing:-.05em;white-space:nowrap}
.home-top .id{visibility:hidden;opacity:0;transition:opacity .3s,visibility .3s}
.home-top.scrolled .id{visibility:visible;opacity:1}
.home-top .nav{transition:transform .6s cubic-bezier(.65,0,.35,1)}

.intro .role{grid-column:1/7;margin:0}
.intro .caps{grid-column:7/13;display:flex;justify-content:space-between;gap:8px 24px;flex-wrap:wrap}
.story{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px var(--gut);padding-block:clamp(32px,4vw,56px)}
.story h2{margin:0 0 10px;color:var(--muted)}
.story p{margin:0;font-size:var(--md);max-width:40ch}
.index{align-items:start;padding-bottom:clamp(56px,8vw,120px)}
.index .listhead{grid-column:1/6;display:flex;justify-content:space-between;padding-bottom:12px;border-bottom:1px solid var(--line)}
.index ol{grid-column:1/6;grid-row:2;list-style:none;margin:0;padding:0}
.prow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;width:100%;padding-block:18px;border-bottom:1px solid var(--line);color:var(--muted);transition:color .25s}
.prow .n{font-size:var(--xs);padding-top:.55em;font-variant-numeric:tabular-nums}
.prow .nm{font-size:var(--lg);font-weight:500;letter-spacing:-.02em;line-height:1.15}
.prow .yr{padding-top:.4em;font-variant-numeric:tabular-nums}
.prow .sc{grid-column:1/-1;font-size:var(--sm)}
.prow.on,.prow:hover{color:var(--fg)}
.prow.on .sc{color:var(--muted)}
.prow .mth{display:none}
.preview{grid-column:7/13;grid-row:1/3;position:sticky;top:calc(var(--hdr) + 24px + env(safe-area-inset-top,0px));display:flex;flex-direction:column;gap:12px}
.preview .frame{aspect-ratio:5/4;width:100%;display:block}
.preview .frame .art{opacity:0;transition:opacity .45s ease,transform 1.2s cubic-bezier(.2,.7,.2,1);transform:scale(1.03)}
.preview .frame .art.show{opacity:1;transform:none}
.preview .cap{display:flex;justify-content:space-between;gap:12px}
.teaser{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;width:100%;padding-block:22px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.teaser b{font-weight:500;font-size:var(--lg);letter-spacing:-.02em}
.teaser .ths{display:flex;gap:6px}
.teaser .ths .frame{width:56px;aspect-ratio:1}
.teaser:hover b{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}

/* case */
.crumb{display:flex;justify-content:space-between;padding-block:20px}
.crumb button:hover{color:var(--fg)}
.chead{row-gap:32px;padding-block:clamp(24px,4vw,56px) clamp(32px,4vw,56px);align-items:end}
.chead h1{grid-column:1/7;margin:0;font-size:var(--xxl);font-weight:500;letter-spacing:-.045em;line-height:.92;text-wrap:balance}
.chead dl{grid-column:7/13;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px var(--gut)}
.chead dt{margin-bottom:4px}
.chead dd{margin:0;color:var(--muted)}
.cover{aspect-ratio:16/9}
.case{--gg:6px}.case.colado{--gg:0px}
.chap{display:grid;grid-template-columns:minmax(240px,22%) minmax(0,1fr);column-gap:clamp(24px,2.4vw,40px);padding-top:var(--gg);align-items:start}
.chap.first{padding-top:clamp(24px,3vw,40px)}
.chap aside{position:sticky;top:calc(var(--hdr) + 24px + env(safe-area-inset-top,0px));display:flex;flex-direction:column;gap:20px;min-width:0}
.steps{list-style:none;margin:0;padding:0;display:flex;gap:14px;flex-wrap:wrap}
.steps li{color:var(--muted)} .steps li.on{color:var(--fg)}
.chap aside h2{margin:0;font-size:var(--lg);font-weight:500;letter-spacing:-.02em}
.chap aside p{margin:0;font-size:var(--md);color:var(--fg)}
.gal{display:flex;flex-direction:column;min-width:0}
.blk{display:grid;gap:inherit}
.blk.dupla{grid-template-columns:1fr 1fr}
.blk .frame{aspect-ratio:16/10}
.blk.dupla .frame{aspect-ratio:4/5}
.blk .quote{display:grid;place-items:center;padding:clamp(48px,9vw,128px) 24px;background:var(--tile);text-align:center}
.blk .quote p{margin:0;font-size:var(--xl);line-height:1.1;letter-spacing:-.03em;font-weight:500;max-width:18ch;text-wrap:balance}
.gal.respiro,.gal.respiro .blk{gap:var(--gg)}
.gal.respiro .frame,.gal.respiro .quote{border-radius:6px}
.gal.colado,.gal.colado .blk{gap:0}
.nextp{margin-top:clamp(80px,10vw,144px);padding-block:32px clamp(48px,6vw,80px);border-top:1px solid var(--line);align-items:end;row-gap:24px;width:100%}
.nextp .t{grid-column:1/6;display:flex;flex-direction:column;gap:10px}
.nextp .t b{font-size:var(--xxl);font-weight:500;letter-spacing:-.045em;line-height:.92}
.nextp .frame{grid-column:7/13;aspect-ratio:16/9}
.nextp .frame .art{transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.nextp:hover .frame .art{transform:scale(1.03)}

/* archive */
.ahead{padding-block:clamp(48px,7vw,96px) 28px;row-gap:24px;align-items:end}
.ahead h1{grid-column:1/7;margin:0;font-size:var(--xxl);font-weight:500;letter-spacing:-.045em;line-height:.92}
.ahead h1 sup{font-size:.28em;letter-spacing:0;margin-left:.15em;vertical-align:top;position:relative;top:.3em;font-weight:400}
.ahead p{grid-column:9/13;margin:0;max-width:40ch}
.filters{display:flex;gap:6px;flex-wrap:wrap;padding-bottom:24px}
.filters button{border:1px solid var(--line);border-radius:99px;padding:5px 13px;font-size:var(--xs);color:var(--muted)}
.filters button:hover{color:var(--fg)}
.filters button.on{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.sheet{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:28px 10px}
.cell{display:flex;flex-direction:column;gap:10px;width:100%}
.cell .bed{position:relative;aspect-ratio:1;background:var(--tile);display:grid;place-items:center;padding:13%;transition:background .25s}
.cell:hover .bed{background:var(--line)}
.cell .bed .frame{width:100%;max-height:100%;background:transparent}
.cell .cp{display:flex;justify-content:space-between;gap:8px;font-size:var(--xs)}
.cell .cp b{font-weight:500}
.lb{position:fixed;inset:0;z-index:60;background:var(--bg);display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:calc(12px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.lb .bar,.lb .foot2{display:flex;justify-content:space-between;align-items:center;gap:16px}
.lb .stage{display:grid;place-items:center;min-height:0;padding-block:16px}
.lb .stage .frame{height:100%;max-width:100%;max-height:100%}
.lb .ctl{display:flex;gap:6px}
.lb .ctl button,.lb .x{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);font-size:16px;display:grid;place-items:center}
.lb .ctl button:hover,.lb .x:hover{background:var(--tile)}

/* about */
.about{padding-block:clamp(40px,6vw,88px) 40px;row-gap:56px;align-items:start}
.about .ph{grid-column:1/6;aspect-ratio:4/5}
.about .ph span{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted)}
.about .txt{grid-column:7/13;display:flex;flex-direction:column;gap:48px;min-width:0}
.about .st{margin:0;font-size:var(--xl);line-height:1.12;letter-spacing:-.03em;font-weight:500;max-width:24ch;text-wrap:balance}
.about .bio{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gut)}
.about .bio p{margin:0;max-width:44ch}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px var(--gut);border-top:1px solid var(--line);padding-top:24px}
.facts h3{margin:0 0 12px}
.facts ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.facts li span{display:block;color:var(--muted);font-variant-numeric:tabular-nums}

/* footer */
footer.foot{margin-top:clamp(64px,9vw,128px)}
footer.foot::before,footer .base::before{content:"";position:absolute;top:0;left:max(var(--gut),env(safe-area-inset-left,0px));right:max(var(--gut),env(safe-area-inset-right,0px));height:1px;background:var(--line)}
footer.foot{position:relative}
footer .g12{padding-block:clamp(40px,5vw,64px);row-gap:40px;align-items:stretch}
footer .l{grid-column:1/7;display:flex;flex-direction:column;justify-content:space-between;gap:48px;min-width:0}
footer .big{margin:0;font-size:var(--xl);line-height:1.08;letter-spacing:-.03em;font-weight:500;max-width:18ch;text-wrap:balance}
.mailrow{display:flex;align-items:center;gap:12px 20px;flex-wrap:wrap;margin-top:10px}
.mailrow a:hover,.hmail:hover{text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px}
.mailrow a{font-size:var(--xl);font-weight:500;letter-spacing:-.035em;line-height:1.05;user-select:all;overflow-wrap:anywhere}
.mailrow button{border:1px solid var(--line);border-radius:99px;padding:5px 13px;font-size:var(--xs)}
.mailrow button:hover{background:var(--tile)}
footer .cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut)}
footer .cols a,footer .cols span{display:block;color:var(--muted)}
footer .cols a:hover{color:var(--fg)}
footer .r{grid-column:7/13;display:flex;flex-direction:column;gap:10px}
footer .r .frame{aspect-ratio:4/3}
footer .r .frame .art{opacity:0;transition:opacity 1.1s ease}
footer .r .frame .art.show{opacity:1}
footer .r .cap{display:flex;justify-content:space-between;font-size:var(--xs)}
footer .base{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:18px calc(18px + env(safe-area-inset-bottom,0px));position:relative;font-size:var(--xs);color:var(--muted)}
footer .base button:hover{color:var(--fg)}

@media (max-width:960px){
  .id span{display:none}
  .intro .role,.intro .caps{grid-column:1/-1}.intro .caps{justify-content:flex-start}
  .story{grid-template-columns:minmax(0,1fr)}
  .index .listhead,.index ol{grid-column:1/-1}
  .preview{display:none}
  .prow{color:var(--fg);grid-template-columns:minmax(0,1fr) auto}
  .prow .mth{display:block;grid-column:1/-1;aspect-ratio:4/3;margin-bottom:12px}
  .chead h1,.chead dl{grid-column:1/-1}
  .chap{grid-template-columns:minmax(0,1fr);padding-top:40px}
  .chap aside{position:static;margin-bottom:20px}
  .nextp .t,.nextp .frame{grid-column:1/-1}
  .ahead h1,.ahead p{grid-column:1/-1}
  .sheet{grid-template-columns:repeat(3,minmax(0,1fr))}
  .about .ph{grid-column:1/-1;max-width:420px;width:100%}
  .about .txt{grid-column:1/-1}
  footer .l,footer .r{grid-column:1/-1}
}
@media (max-width:600px){
  .nav{gap:12px}
  .chead dl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .blk.dupla{grid-template-columns:1fr}
  .sheet{grid-template-columns:repeat(2,minmax(0,1fr))}
  .about .bio,.facts{grid-template-columns:1fr}
  footer .cols{grid-template-columns:1fr 1fr}
  .teaser .ths .frame:nth-child(n+3){display:none}
}

/* case com margens largas */
main.case{--side:clamp(16px,7.5vw,150px);padding-left:max(var(--side),env(safe-area-inset-left,0px));padding-right:max(var(--side),env(safe-area-inset-right,0px));max-width:1800px;margin-inline:auto}
.ctitle{margin:0;padding-block:clamp(40px,6vw,96px) clamp(32px,4vw,56px);font-size:var(--xxl);font-weight:500;letter-spacing:-.045em;line-height:.92;text-wrap:balance}
.cinfo{padding-block:clamp(64px,8vw,128px);row-gap:48px;align-items:start}
.cspec{grid-column:1/5;margin:0;display:flex;flex-direction:column;gap:22px}
.cspec dt{margin-bottom:4px}.cspec dd{margin:0;color:var(--fg)}
.cstory{grid-column:7/13;display:flex;flex-direction:column;gap:40px;min-width:0}
.cstory h2{margin:0 0 10px;color:var(--muted)}
.cstory p{margin:0;font-size:clamp(17px,1.35vw,21px);line-height:1.45;letter-spacing:-.005em;max-width:48ch}
.case .nextp{margin-top:clamp(96px,12vw,176px)}
/* archive em mosaico */
.mosaic{columns:3;column-gap:var(--gut)}
.tile{display:block;width:100%;break-inside:avoid;margin-bottom:clamp(32px,3.4vw,56px);position:relative}
.tile .frame{width:100%}
.tile .frame .art{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.tile:hover .frame .art{transform:scale(1.025)}
.tile .cp{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-top:12px}
.tile .cp b{font-weight:500;font-size:var(--md)}
.tile .cnt{position:absolute;top:12px;right:12px;font-size:11px;letter-spacing:.04em;background:rgba(255,255,255,.85);color:#121212;padding:3px 9px;border-radius:99px}
.lb .thumbs{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.lb .thumbs button{width:46px;opacity:.45;transition:opacity .2s}
.lb .thumbs button.on,.lb .thumbs button:hover{opacity:1}
.lb .thumbs button.on{outline:1px solid var(--fg);outline-offset:2px}
@media (max-width:960px){.cspec,.cstory{grid-column:1/-1}.cspec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px var(--gut)}.mosaic{columns:2}}
@media (max-width:600px){.mosaic{columns:1}}

/* home: layouts */
.index{padding-top:clamp(32px,5vw,72px)}
.namebox{grid-column:1/6;padding-bottom:28px;border-bottom:1px solid var(--line)}
.namebox h1{margin:0;font-weight:400;font-size:clamp(44px,5vw,88px);line-height:1;letter-spacing:-.045em}
.namebox p{margin:14px 0 0}
.hero-direto .index{padding-top:clamp(24px,3vw,40px)}
.reel{padding-top:clamp(16px,2vw,28px)}
.reelbox{display:block;width:100%}
.reel .frame{aspect-ratio:16/8;max-height:78vh;width:100%}
.reel .frame .art{opacity:0;transition:opacity 1.1s ease}
.reel .frame .art.show{opacity:1}
.reelcap{display:flex;justify-content:space-between;gap:16px;padding-top:12px}
.cover .art,.reel .frame .art{inset:-8% 0}
#herosw{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:70;display:flex;align-items:center;gap:2px;padding:5px 5px 5px 14px;background:var(--raise);border:1px solid var(--line);border-radius:99px;box-shadow:0 8px 24px rgba(0,0,0,.1);font-size:13px;max-width:calc(100vw - 32px);white-space:nowrap}
#herosw[hidden]{display:none}
#herosw span{margin-right:8px}
#herosw button{padding:6px 12px;border-radius:99px}
#herosw button.on{background:var(--fg);color:var(--bg)}
/* movimento */
#app{transition:opacity .4s ease,transform .7s cubic-bezier(.16,1,.3,1)}
#app.leaving{opacity:0}
#app.entering{opacity:0;transform:translateY(14px);transition:none}
.rv{translate:0 36px;transition:translate 1.1s cubic-bezier(.16,1,.3,1)}
.rv.in{translate:none}
.frame.rv .art{scale:1.07;transition:scale 1.5s cubic-bezier(.16,1,.3,1),opacity .5s ease,transform 1.2s cubic-bezier(.2,.7,.2,1)}
.frame.rv.in .art{scale:1}
#cur{position:fixed;left:0;top:0;z-index:80;pointer-events:none;width:0;height:0}
#cur span{position:absolute;left:-26px;top:-26px;width:52px;height:52px;border-radius:50%;background:var(--fg);color:var(--bg);display:grid;place-items:center;font-size:12px;transform:scale(0);transition:transform .4s cubic-bezier(.16,1,.3,1)}
#cur.on span{transform:scale(1)}
.has-cur [data-cur]{cursor:none}
@media (max-width:960px){.namebox{grid-column:1/-1}}

/* home: novas opções */
.pcard{display:flex;flex-direction:column;gap:12px;width:100%;min-width:0}
.pcard .frame{width:100%}
.pcard:hover .frame .art{transform:scale(1.03)}
.pc{display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.pc .pn2{display:flex;gap:4px 12px;flex-wrap:wrap;align-items:baseline;min-width:0}
.pc b{font-weight:500;font-size:var(--md)}
.ged{row-gap:clamp(48px,7vw,112px);padding-block:clamp(32px,4vw,56px) clamp(64px,8vw,120px);align-items:start}
.ged .g0{grid-column:1/8}.ged .g0 .frame{aspect-ratio:4/3}
.ged .g1{grid-column:9/13;align-self:end}.ged .g1 .frame{aspect-ratio:4/5}
.ged .g2{grid-column:1/6}.ged .g2 .frame{aspect-ratio:4/5}
.ged .g3{grid-column:7/13;align-self:center}.ged .g3 .frame{aspect-ratio:3/2}
.ged .g4{grid-column:3/10}.ged .g4 .frame{aspect-ratio:16/10}
.ged .g5{grid-column:10/13;align-self:end}.ged .g5 .frame{aspect-ratio:3/4}
.car{padding-block:clamp(32px,4vw,56px) clamp(64px,8vw,120px)}
.carhead{display:flex;justify-content:space-between;align-items:center;padding-bottom:16px}
.carhead .ctl{display:flex;gap:6px}
.carhead .ctl button{width:40px;height:40px;border-radius:50%;border:1px solid var(--line)}
.carhead .ctl button:hover{background:var(--tile)}
.strip{display:flex;gap:12px;overflow-x:auto;padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px));scrollbar-width:none;user-select:none}
.strip::-webkit-scrollbar{display:none}
.strip .pcard{flex:0 0 clamp(280px,32vw,540px)}
.strip .frame{aspect-ratio:4/5}
.strip .frame .art{pointer-events:none}
.stack{display:flex;flex-direction:column;gap:24px;padding-block:clamp(12px,2vw,24px) clamp(64px,8vw,120px)}
.pcard.st{position:sticky;top:calc(var(--hdr) + env(safe-area-inset-top,0px));height:min(calc(100vh - var(--hdr) - 24px),900px);background:var(--bg) var(--grain);gap:0}
.pcard.st .pc{order:-1;padding-block:12px}
.pcard.st .frame{flex:1;min-height:0}
.central{padding-block:clamp(48px,7vw,104px) clamp(64px,8vw,120px)}
.cname{text-align:center;padding-bottom:clamp(40px,6vw,88px)}
.cname h1{margin:0;font-weight:400;font-size:clamp(44px,5.4vw,96px);letter-spacing:-.045em;line-height:1}
.cname p{margin:14px 0 0}
.cgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px var(--gut)}
.cgrid .frame{aspect-ratio:4/5}
@media (max-width:960px){.ged>*{grid-column:1/-1!important;align-self:start!important}.cgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.cgrid{grid-template-columns:minmax(0,1fr)}.strip .pcard{flex-basis:80vw}.pcard.st{height:78vh}}

/* grade de 4 colunas: cabeçalho e topo da home alinhados */
.home-top:not(.scrolled) .nav{transform:translateX(calc(var(--shift,0px) * -1))}
header.top .in{display:grid;grid-template-columns:1fr auto 1fr;column-gap:var(--gut)}
header.top .id{grid-column:1;justify-self:start}
header.top .nav{grid-column:2;justify-self:center}
.hright{grid-column:3;justify-self:end;display:flex;align-items:center;gap:20px}
.hmail{color:var(--fg)}
.hero4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gut);row-gap:24px;padding-block:clamp(56px,9vw,136px) clamp(48px,6vw,96px);align-items:end}
.hero4 h1{grid-column:1/3;margin:0;font-weight:400;font-size:clamp(52px,6.4vw,128px);line-height:.9;letter-spacing:-.05em;white-space:nowrap}
.hero4 .desc{grid-column:3;margin:0;max-width:36ch;padding-bottom:.35em}
.hero4 .soc{grid-column:4;justify-self:end;display:flex;gap:20px;padding-bottom:.35em}
.hero4 .soc a:hover{color:var(--muted)}
.index4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gut);align-items:start;padding-bottom:clamp(56px,8vw,120px)}
.index4 .lcol{grid-column:1/3;min-width:0;padding-right:clamp(0px,4vw,72px)}
.index4 ol{list-style:none;margin:0;padding:0}
.index4 .listhead{display:flex;justify-content:space-between;padding-bottom:12px;border-bottom:1px solid var(--line)}
.index4 .preview{grid-column:3/5;grid-row:auto}
@media (max-width:960px){
 header.top .in{display:flex;justify-content:space-between}
 .hmail{display:none}
 header.top .nav{margin-left:auto;margin-right:16px}
 .hero4 h1,.hero4 .desc,.hero4 .soc{grid-column:1/-1;justify-self:start}
 .hero4 h1{font-size:14.5vw}
 .index4 .lcol{grid-column:1/-1;padding-right:0}
}

/* home: grade grande de trabalhos */
.works{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,4.5vw,72px) var(--gut);padding-bottom:clamp(72px,9vw,136px)}
.wcard{display:flex;flex-direction:column;gap:14px;width:100%;min-width:0}
.wcard .frame{aspect-ratio:5/4;width:100%}
.wcard:hover .frame .art{transform:scale(1.03)}
@media (max-width:700px){.works{grid-template-columns:minmax(0,1fr)}}

@media (max-width:600px){header.top .nav{gap:10px;font-size:12.5px;margin-right:8px;padding-left:12px}header.top .lang button{padding:3px 7px}header.top .id b{font-size:14px}#herosw{overflow-x:auto;font-size:12px}}
/* opção 2: lista em largura total com imagem flutuante */
.flist{padding-bottom:clamp(72px,9vw,136px)}
.flist ol{list-style:none;margin:0;padding:0}
.fhead,.frow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gut);align-items:baseline}
.fhead{padding-bottom:12px;border-bottom:1px solid var(--line)}
.fhead span:nth-child(1){grid-column:1/3}.fhead span:nth-child(3){justify-self:end}
.frow{width:100%;padding-block:clamp(18px,2vw,28px);border-bottom:1px solid var(--line);transition:color .3s}
.frow .nm{grid-column:1/3;font-size:clamp(28px,3.4vw,56px);font-weight:400;letter-spacing:-.035em;line-height:1.05}
.frow .yr{justify-self:end;font-variant-numeric:tabular-nums}
.frow .mth{display:none}
.frow .sc,.frow .yr{transition:color .3s}
.flist ol:hover .frow{color:var(--muted)}
.flist ol:hover .frow.on{color:var(--fg)}
.flist ol:hover .frow.on .sc,.flist ol:hover .frow.on .yr{color:var(--fg)}
#float{position:fixed;left:0;top:0;z-index:75;pointer-events:none;width:0;height:0}
#float .art{position:absolute;inset:auto;left:calc(clamp(220px,20vw,340px) / -2);top:calc(clamp(220px,20vw,340px) * -.625);width:clamp(220px,20vw,340px);aspect-ratio:4/5;height:auto;opacity:0;transform:scale(.85);transition:opacity .35s ease,transform .5s cubic-bezier(.16,1,.3,1)}
#float.on .art.show{opacity:1;transform:none}
@media (max-width:960px){
 .fhead{display:none}
 .frow{grid-template-columns:minmax(0,1fr) auto;row-gap:6px}
 .frow .mth{display:block;grid-column:1/-1;aspect-ratio:4/3;margin-bottom:12px}
 .frow .nm{grid-column:1}.frow .yr{grid-column:2;grid-row:2}.frow .sc{grid-column:1/-1;grid-row:3}
}

/* opção 3: lista que expande */
.xlist ol{list-style:none;margin:0;padding:0}
.xrow{border-bottom:1px solid var(--line)}
.xhead{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gut);align-items:baseline;width:100%;padding-block:clamp(16px,1.7vw,24px);color:var(--muted);transition:color .3s}
.xhead:hover,.xrow.open .xhead{color:var(--fg)}
.xhead .nm{grid-column:1/3;font-size:clamp(26px,2.8vw,46px);font-weight:400;letter-spacing:-.035em;line-height:1.05}
.xhead .yr{justify-self:end;display:flex;align-items:center;gap:14px;font-variant-numeric:tabular-nums}
.pm{position:relative;width:12px;height:12px;display:inline-block}
.pm::before,.pm::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:currentColor;transition:transform .45s cubic-bezier(.65,0,.35,1)}
.pm::after{transform:rotate(90deg)}
.xrow.open .pm::after{transform:rotate(0deg)}
.xbody{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.4,0,.2,1)}
.xrow.open .xbody{grid-template-rows:1fr}
.xbody>div{overflow:hidden;min-height:0}
.xin{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gut);row-gap:12px;padding-top:4px;padding-bottom:clamp(20px,2.4vw,32px);opacity:0;translate:0 14px;transition:opacity .35s ease,translate .55s cubic-bezier(.16,1,.3,1)}
.xrow.open .xin{opacity:1;translate:none;transition-delay:.08s}
.xim{display:block;height:clamp(200px,22vw,400px);min-width:0}
@media (hover:none){.pm{display:none}}
.xim .frame{width:100%;height:100%}
.xim:hover .frame .art{transform:scale(1.03)}
.xim.x0{grid-column:1/3}
.xgo{grid-column:4;justify-self:end;color:var(--muted)}
.xgo:hover{color:var(--fg)}
@media (max-width:960px){
 .xhead{grid-template-columns:minmax(0,1fr) auto;row-gap:6px}
 .xhead .nm{grid-column:1}.xhead .yr{grid-column:2;grid-row:1}.xhead .sc{grid-column:1/-1;grid-row:2}
 .xin{grid-template-columns:1fr 1fr}
 .xin{grid-template-columns:minmax(0,1fr);padding-bottom:20px}
 .xim{height:auto}.xim.x0{grid-column:1/-1;aspect-ratio:4/3}.xim.x1,.xim.x2,.xgo{display:none}
}

/* ajustes: setas, menu mobile, archive mobile */
.ext,footer .cols a.ext{display:flex;align-items:center;gap:5px;width:max-content}
.arr{width:.62em;height:.62em;flex:none}
.mbtn{display:none;width:40px;height:40px;margin-right:-10px;place-items:center}
.burg{position:relative;display:block;width:22px;height:9px}
.burg::before,.burg::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;border-radius:1px}
.burg::before{top:0}.burg::after{bottom:0}
.burg.x{height:14px}
.burg.x::before{top:50%;transform:translateY(-50%) rotate(45deg)}.burg.x::after{bottom:auto;top:50%;transform:translateY(-50%) rotate(-45deg)}
#mnav .mx{display:grid}
#mnav{position:fixed;inset:0;z-index:90;background:var(--bg) var(--grain);display:flex;flex-direction:column;justify-content:flex-start;padding-top:env(safe-area-inset-top,0px);padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
#mnav[hidden]{display:none}
#mnav .mtop{height:var(--hdr);display:flex;justify-content:space-between;align-items:center}
#mnav .mtop b{font-weight:600}
#mnav .mlinks{display:flex;flex-direction:column;gap:6px;padding-top:28px}
#mnav .mlinks button{font-size:clamp(40px,12vw,64px);letter-spacing:-.04em;line-height:1.05;color:var(--muted);text-align:left}
#mnav .mlinks button[aria-current="page"]{color:var(--fg)}
#mnav .mbot{display:flex;flex-direction:column;gap:16px;margin-top:auto}
#mnav .mlang{display:flex;gap:22px;padding-top:24px;margin-top:12px;border-top:1px solid var(--line)}
#mnav .mlang button{font-size:22px;letter-spacing:-.02em;color:var(--muted);padding-bottom:2px;border-bottom:1.5px solid transparent}
#mnav .mlang button.on{color:var(--fg);border-color:var(--fg)}
#mnav .mbot>a{font-size:20px;letter-spacing:-.02em}
#mnav .msoc{display:flex;gap:18px;color:var(--muted)}
#mnav .lang{align-self:flex-start}
.menu-open #cur{display:none}
@media (max-width:600px){
 header.top .nav,header.top .hright{display:none}
 .mbtn{display:grid;margin-left:auto}
 .case .gal,.case .cover{margin-left:calc(-1 * max(var(--side),env(safe-area-inset-left,0px)));margin-right:calc(-1 * max(var(--side),env(safe-area-inset-right,0px)))}
 .case .gal .blk:not(.dupla) .frame,.case .cover{aspect-ratio:4/3}
 .case .cover{max-width:none}
 .gal.respiro .frame,.gal.respiro .quote{border-radius:0}
 .hero4{padding-block:8px 44px;row-gap:18px}
 .mosaic{columns:2;column-gap:10px}
 .tile{margin-bottom:22px}
 .tile .cp{flex-direction:column;gap:2px;padding-top:8px;font-size:12px}
 .tile .cp b{font-size:13px}
 .tile .cnt{top:8px;right:8px;font-size:10px;padding:2px 7px}
 .art .tag{left:8px;top:8px;font-size:9px;padding:2px 6px}
}
@media (prefers-reduced-motion:reduce){*,*::before{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ================= site real: imagens e vídeos ================= */
@font-face{font-family:"Fluent";src:local("Fluent"),local("Fluent Regular"),url("../fonts/Fluent-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Fluent";src:local("Fluent Medium"),url("../fonts/Fluent-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Fluent";src:local("Fluent SemiBold"),url("../fonts/Fluent-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}
.art{container-type:normal}
.art>img,.art>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.art.empty{display:grid;place-items:center;background:var(--tile);color:var(--muted);font-size:var(--xs)}
.art.empty span{position:static}
.frame.nat .art{position:relative;inset:auto}
.frame.nat .art>img,.frame.nat .art>video{position:static;height:auto}
.frame.nat .art.empty{aspect-ratio:4/5}
.lb .stage .frame{width:100%;height:100%;background:none;overflow:visible}
.lb .stage .art{position:relative;inset:auto;height:100%;background:none;display:flex;align-items:center;justify-content:center}
.lb .stage .art>img,.lb .stage .art>video{position:static;width:auto;height:auto;max-width:100%;max-height:calc(100vh - 170px);max-height:calc(100dvh - 170px);object-fit:contain}
.lb .thumbs .frame{aspect-ratio:1}
.boot{padding:48px max(var(--gut),env(safe-area-inset-left,0px));color:var(--muted)}