*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;min-width:20rem;overflow-x:clip}
body,button{font:inherit}
img,picture,video,iframe{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button,a{touch-action:manipulation}
button{min-width:44px;min-height:44px}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
main h1[tabindex="-1"]:focus{outline:none}
::selection{background:var(--accent);color:var(--accent-ink)}
.skip-link{position:fixed;inset-block-start:.5rem;inset-inline-start:.5rem;z-index:6;transform:translateY(-150%);padding:.7rem 1rem;background:var(--paper);color:var(--ink)}
.skip-link:focus{transform:none}
.topbar,.footer,main>section,.case-end{padding-inline:clamp(1rem,4vw,4.5rem)}
.topbar{position:relative;z-index:4;display:flex;align-items:center;justify-content:space-between;min-height:72px}
.monogram,.menu-toggle,.button,.quiet,.back,.index-open,.index-profile,.reel,.contact-links a{text-decoration:none}
.monogram,.menu-toggle,.quiet,.back,.index-profile{white-space:nowrap}
.index-open em,.reel span,.reel i{white-space:nowrap}
.monogram{display:inline-flex;align-items:center;min-height:44px}
.menu-toggle{border:0;background:transparent;color:inherit;cursor:pointer}
.menu{display:none}
.menu.open{display:grid;position:fixed;inset:72px 0 auto;max-height:calc(100dvh - 72px);overflow:auto;z-index:5}
.menu a{display:grid;grid-template-columns:2.5rem 1fr auto;gap:1rem;align-items:center;min-height:52px;padding:.7rem clamp(1rem,4vw,4.5rem);text-decoration:none}
.menu a i{font-style:normal}
main{min-height:70dvh}
h1,h2,p{overflow-wrap:break-word}
h1,h2{hyphens:manual}
/* no celular a palavra longa nao cabe na linha: hifeniza em vez de cortar no meio */
@media (max-width:63.99rem){h1,h2,.index-name{hyphens:auto}}
h1,h2{margin-block:0;min-width:0}
p{margin-block:0}
.cover,.intro,.page-head,.project-list,.index-list,.case-head,.case-facts,.numbers,.media-block,.case-gallery,.reels-block,.photo-lead,.photo-wall,.film,.film-notes,.timeline,.skills-band,.contact{position:relative}
.button{display:inline-flex;align-items:center;justify-content:space-between;gap:clamp(.75rem,4vw,1.5rem);max-width:100%;min-height:48px;padding:.75rem 1rem}
.button span{flex:0 0 auto}
.cover-copy,.film-copy,.project-copy,.intro-body,.case-head,.page-head,.contact{min-width:0}
.actions,.cover-actions,.contact-links,.case-end{display:flex;flex-wrap:wrap;gap:.75rem}
.cover-media img,.intro-portrait img,.case-gallery img,.photo-wall img,.photo-lead img{width:100%;height:100%;object-fit:cover}
.project-image img,.case-cover img{width:100%;height:auto}
.intro-portraits{min-width:0}
.intro-portrait{margin:0;min-width:0;overflow:hidden}
.project-image,.index-open,.photo-open{min-width:0}
.photo-open{display:block;width:100%;padding:0;border:0;background:transparent;color:inherit;text-align:inherit;cursor:pointer}
.project-image>span,.photo-open>span{white-space:nowrap}
@media (max-width:39.99rem){.kit-grid .photo-open>span{padding:.3rem .4rem;font-size:.55rem;letter-spacing:.02em}}
.photo-dialog{position:fixed;inset:0;margin:auto;width:min(92%,80rem);height:fit-content;max-height:90dvh;padding:3.5rem 1rem 1rem;border:0;background:var(--paper);color:var(--ink)}
.photo-dialog::backdrop{background:rgb(0 0 0 / .82)}
.photo-dialog .photo-close{position:absolute;inset-block-start:.5rem;inset-inline-end:.5rem;border:0;background:transparent;color:inherit;cursor:pointer}
.photo-stage{display:grid;place-items:center;max-height:calc(90dvh - 5rem)}
.photo-stage img{max-height:calc(90dvh - 5rem);object-fit:contain}
.footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;padding-block:2rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@media (min-width:60rem){.menu.open{grid-template-columns:repeat(2,minmax(0,1fr));inset-inline-start:50%}}
@media (min-width:68rem){.menu-toggle{display:none}.menu,.menu.open{display:flex;flex-wrap:wrap;justify-content:flex-end;position:static;inset:auto;max-height:none;overflow:visible;gap:.1rem}.menu a{display:inline-flex;grid-template-columns:none;gap:0;min-height:44px;padding:.35rem .6rem}.menu a b,.menu a i{display:none}.topbar{gap:1.5rem}body.menu-open{overflow:auto}}