/* ============================================================================
   Matheuso ✦ Art Director — layout fluido escrito à mão.
   Sem breakpoints do Figma: tamanhos interpolam com clamp()/vw entre o visual
   do mobile (≈375px) e o do desktop (≈1920px); as quebras de linha/colunas
   acontecem pelo conteúdo (flex-wrap / grid auto-fill / container queries).
   ========================================================================== */
:root{
  --red:#F6000F; --ink:#000; --paper:#fff;
  /* escala tipográfica única, como num site comum: barras vermelhas 13→16px; texto corrido (ficha técnica, about, home) 15→16px */
  --fs-bar:clamp(13px,11.8px + .3vw,16px);
  --bar-pad:calc(var(--fs-bar)*.2);
  --fs-txt:clamp(15px,14.4px + .15vw,16px);
  /* espaçamentos fluidos: 15px @375 → 25px @800 → 52px @1920 */
  --pad:clamp(15px,6px + 2.4vw,56px);
  --gap:clamp(11px,7.5px + 1.07vw,32px);
  --r:clamp(8px,.9vw,16px);   /* raio único de todas as imagens (home, projetos, stuff) */
  --cellmin:200px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Arimo,"Liberation Sans",Arial,sans-serif;font-size:var(--fs-txt);line-height:1.15;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
img,video,iframe{display:block;border:0}
:focus-visible{outline:2px solid currentColor;outline-offset:2px}
body.pg-home{overflow:hidden}

#app{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
#view{flex:1 0 auto;display:flex;flex-direction:column;view-transition-name:view}
.top{view-transition-name:top}.foot{view-transition-name:foot}
#view.out{opacity:0;transition:opacity .14s ease}
#view.in{animation:pgin .5s cubic-bezier(.2,.7,.2,1)}
@keyframes pgin{from{opacity:0;transform:translateY(14px) scale(.992)}to{opacity:1;transform:none}}

/* troca de página: barras vermelhas ficam paradas (o letreiro não reinicia); só o conteúdo anima.
   A imagem do card "vira" a primeira imagem do projeto (e volta ao fechar). */
::view-transition-old(root),::view-transition-new(root){animation:none}
::view-transition-old(top),::view-transition-old(foot){display:none}
::view-transition-new(top),::view-transition-new(foot),::view-transition-group(top),::view-transition-group(foot){animation:none}
::view-transition-old(view){animation:.18s ease both vt-out}
::view-transition-new(view){animation:.5s cubic-bezier(.2,.7,.2,1) both vt-in}
::view-transition-group(proj){animation-duration:.55s;animation-timing-function:cubic-bezier(.2,.7,.2,1);z-index:5}
::view-transition-old(proj),::view-transition-new(proj){height:100%;width:100%;object-fit:cover}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(16px) scale(.992)}}

/* entrada suave dos elementos ao aparecer na tela (escalonada) */
.rv-on .rv{opacity:0;transform:translateY(22px) scale(.985);transition:opacity .6s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform .75s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.rv-on .rv.in{opacity:1;transform:none}
.rv-on .rv.done{transition:transform .25s cubic-bezier(.2,.7,.2,1)}

/* ---------------------------------------------------------------- barras */
.top{background:var(--red);color:#fff;font-size:var(--fs-bar);container-type:inline-size;flex:none}
.top-in{display:flex;align-items:center;gap:calc(var(--fs-bar)*1.9);padding:var(--bar-pad) var(--pad);min-height:calc(var(--fs-bar)*1.55)}
.mq{flex:1 1 0;min-width:0;overflow:hidden;white-space:nowrap;text-transform:uppercase;line-height:1.15}
.mq .lp-g{letter-spacing:-.03em}
.nav{flex:none;display:flex;align-items:center;gap:calc(var(--fs-bar)*1.9);font-weight:700;text-transform:uppercase;letter-spacing:-.08em;line-height:1.15}
.nav::before{content:"";width:.1em;min-width:2px;height:1em;background:currentColor;border-radius:2px;margin-right:calc(var(--fs-bar)*-.9)}
.nav a{text-decoration:underline;text-underline-offset:.12em}
.nav a:hover{opacity:.72}
@container (max-width:640px){
  .mq,.nav::before{display:none}
  .top-in{gap:0}
  .nav{flex:1;justify-content:space-between;gap:calc(var(--fs-bar)*.6)}
}
.foot{background:var(--red);color:#fff;font-size:var(--fs-bar);overflow:hidden;flex:none;padding:var(--bar-pad) 0}
.lp{display:flex;width:max-content;animation:mq var(--dur,14s) linear infinite;will-change:transform}
.lp-g{display:flex;flex:none;white-space:nowrap;text-transform:uppercase;line-height:1.15}
.foot .lp-g{letter-spacing:-.08em}
.lp-g>span{display:block;white-space:pre}
@keyframes mq{to{transform:translateX(-50%)}}
/* tudo que está nas barras vermelhas em CAIXA ALTA, inclusive o trecho em negrito "matheuso ✦ art director" */
.top,.top *,.foot,.foot *{text-transform:uppercase!important}

/* ---------------------------------------------------------------- páginas de projeto / a.r. */
.page{flex:1 0 auto;display:flex;flex-direction:column}
.gal{display:flex;flex-direction:column;gap:var(--gap);padding:calc(var(--gap)*1.25) var(--pad) calc(var(--gap)*1.1)}
.row{display:flex;flex-wrap:wrap;gap:var(--gap)}
.cell{position:relative;flex:calc(var(--a)*1000) 1 0;min-width:var(--cellmin);aspect-ratio:var(--a);border-radius:var(--r);overflow:hidden;background:rgba(0,0,0,.06)}
.cell>img,.cell>video,.cell>iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cell>iframe{background:#000}
.cell.v{background:#000}
.cell.crop>img{inset:auto;max-width:none;object-fit:fill}
.col{display:flex;flex-direction:column;gap:var(--gap);flex:calc(var(--a)*1000) 1 0;min-width:var(--cellmin)}
.col>.cell{flex:none;width:100%;min-width:0}
.ar .cell{--cellmin:min(220px,100%)}

.cred{padding:8px var(--pad) 40px}
.cred-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:calc(var(--gap)*.95) 24px}
.sec{border-top:1px solid #000;padding-top:12px;display:flex;flex-direction:column;gap:12px;min-width:0}
.sec-l,.t.b{font-weight:700;line-height:1}
.sec-l{text-transform:uppercase}
.sec.caps,.sec.caps *{text-transform:uppercase!important}
.cred a{text-decoration:underline;text-underline-offset:.14em}
.cred a:hover{opacity:.7}
.emo{display:none;font-size:.85em;margin-right:.4em;font-weight:400;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.emoji-ok .emo{display:inline}
.sec:not(.caps) .t,.sec:not(.caps) .t *{text-transform:none!important}
.sec-l{font-size:var(--fs-txt)}
.t{font-size:var(--fs-txt);line-height:1.15;overflow-wrap:break-word;margin:0}
.t.j{text-align:justify}
.t.o{letter-spacing:-.005em}

/* ---------------------------------------------------------------- stuff */
.stuff{--spad:clamp(15px,-35px + 7.6vw,110px);flex:1 0 auto}
.st-intro{display:flex;flex-direction:column;align-items:center;gap:clamp(15px,10px + 1.9vw,53px);padding:clamp(26px,5.6vw,108px) var(--spad) clamp(19px,2vw + 12px,66px);overflow:hidden}
.st-title{margin:0;font-weight:400;text-transform:uppercase;text-align:center;letter-spacing:-.05em;line-height:1;font-size:clamp(30px,14px + 4.3vw,56px)}
.art{margin:0;font-family:Arimo,"Segoe UI Symbol","Apple Symbols","Noto Sans Symbols 2","DejaVu Sans",sans-serif;font-weight:400;white-space:pre;text-transform:uppercase;line-height:.99;text-align:left;max-width:100%;overflow:hidden}
.st-intro .art{font-size:min(26.76px,calc((100vw - 2*var(--spad)) / 33.9))}
.st-gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(128px,26vw,480px),1fr));gap:clamp(10px,7px + 1.1vw,28px) clamp(10px,5px + .8vw,20px);padding:clamp(8px,1vw,12px) var(--spad) clamp(31px,20px + 2.5vw,62px);align-items:start}
.st-gal img{width:100%;aspect-ratio:var(--a);object-fit:cover;background:rgba(0,0,0,.05);border-radius:var(--r)}
.st-gal .crop{position:relative;aspect-ratio:var(--a);overflow:hidden;border-radius:var(--r)}
.st-gal .crop img{position:absolute;max-width:none;aspect-ratio:auto;object-fit:fill;border-radius:0}
.st-outro{display:flex;justify-content:center;padding:0 var(--spad) clamp(31px,20px + 1.5vw,49px);overflow:hidden}
.st-outro .art{font-size:10px}

/* ---------------------------------------------------------------- about */
.about{flex:1 0 auto;container:about / inline-size;overflow-x:clip;padding:clamp(16px,1vw + 8px,17px) var(--pad) 0}
.collage{display:flex;flex-direction:column;gap:var(--gap);padding-bottom:calc(var(--gap)*1.8)}
.col-l,.col-r{display:contents}
.portrait{position:relative;order:1;margin:0;aspect-ratio:var(--a);container-type:inline-size;width:100%;max-width:828px;margin-inline:auto}
.pfig{position:absolute;inset:0;transform:scale(var(--pz,1));transform-origin:50% 100%}
.pfig>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.orn{position:absolute;margin:0;white-space:pre;text-transform:uppercase;font-weight:400;pointer-events:none;font-family:Arimo,"Segoe UI Symbol","Apple Symbols","Noto Sans Symbols 2","DejaVu Sans",sans-serif}
.ab-t{position:relative;z-index:1;font-size:var(--fs-txt);line-height:1.147;margin:0;overflow-wrap:break-word}
.ab-t.bio{order:2}.ab-t.exp{order:3}.ab-t.form{order:4}.ab-t.awd{order:5}
/* iPod sobreposto à base do retrato: 356×198 é o tamanho natural do player; --ps (JS) escala conforme a largura do retrato */
.player{position:absolute;left:63%;top:3%;z-index:3;width:calc(356px*var(--ps,.6));height:calc(198px*var(--ps,.6));transform:translateX(-50%)}
.player iframe{position:absolute;left:0;top:0;width:356px;height:198px;border:0;background:transparent;transform:scale(var(--ps,.6));transform-origin:0 0}
.li{order:6;position:relative;z-index:1;width:clamp(28px,27px + .1vw,30px);height:auto}
.li img{width:100%;height:auto}
@container about (min-width:1000px){
  .collage{flex:1 0 auto;padding-bottom:0;display:grid;grid-template-columns:minmax(240px,440px) minmax(280px,828px) minmax(260px,438px);justify-content:center;align-items:start;gap:clamp(16px,1.5vw,28px)}
  .col-l,.col-r{display:flex;flex-direction:column;gap:clamp(20px,1.65vw,32px)}
  .col-l{container-type:inline-size}
  .col-l .ab-t,.col-r .ab-t,.col-r .li{order:0}
  .portrait{order:0;margin:0;justify-self:center;align-self:end;width:min(100%,max(280px,calc((100dvh - var(--fs-bar)*3.3 - 40px) * var(--a))))}
  .col-l .awd{order:1}.col-l .form{order:2}
}

/* ---------------------------------------------------------------- home: tela fixa, só a coluna de projetos rola */
.home{height:100vh;height:100dvh;overflow:hidden}
.home .page{flex:1 1 0;min-height:0;display:grid;grid-template-columns:minmax(200px,min(34vw,640px)) minmax(0,1fr);gap:clamp(18px,2.6vw,94px);padding:clamp(12px,2.4vw,40px) clamp(12px,2.4vw,40px) 0 clamp(12px,2.25vw,40px);overflow:hidden}
.face{display:flex;flex-direction:column;justify-content:space-between;gap:clamp(10px,1.4vw,21px);min-height:0;min-width:0}
.meta{font-size:var(--fs-txt);line-height:1.15;text-transform:uppercase;letter-spacing:-.025em;margin:0}
.portrait-h{flex:1 1 0;min-height:0;display:flex;align-items:flex-end}
.portrait-h img{height:100%;width:auto;max-width:100%;object-fit:contain;object-position:left bottom;animation:fadein .9s ease both}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.pane{min-height:0;min-width:0;overflow-y:auto;overscroll-behavior:contain;display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(240px,22vw,520px),1fr));gap:clamp(10px,1.4vw,21px);grid-auto-rows:max-content;align-content:start;padding:0 2px clamp(12px,2.4vw,40px) 0}
.pane::-webkit-scrollbar{width:6px}
.pane::-webkit-scrollbar-track{background:rgba(0,0,0,.045);border-radius:6px}
.pane::-webkit-scrollbar-thumb{background:#fff;border-radius:6px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
@supports not selector(::-webkit-scrollbar){.pane{scrollbar-width:thin;scrollbar-color:#fff rgba(0,0,0,.06)}}
.card{position:relative;display:block;aspect-ratio:var(--a);border-radius:var(--r);overflow:hidden;background:#000}
.card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){.card:hover>img{transform:scale(1.035)}}
.rv-on .card.rv.done:active{transform:scale(.985)}
.badge{position:absolute;overflow:hidden;pointer-events:none}
.badge img{position:absolute;max-width:none}
@media (max-aspect-ratio:1/1){
  .home .page{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  .face{flex-direction:row;justify-content:flex-start;align-items:stretch;gap:clamp(12px,4vw,32px);height:clamp(150px,30dvh,420px)}
  .face .portrait-h{flex:none;height:100%}
}

/* about/Formação: a linha do curso fica inteira numa linha só (encolhe no máximo ~1px se a coluna for estreita);
   em colunas muito estreitas (celular) volta a quebrar normalmente */
@container (min-width:390px){
  .nw{white-space:nowrap;font-size:max(15px,min(1em,3.85cqw))}
}