@import url('https://fonts.googleapis.com/css2?family=DM+Mono:ital@0;1&family=Manrope:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

:root { --ink:#201c17; --paper:#f3eee5; --paper-deep:#e8dfd1; --moss:#334638; --sun:#dba91d; --rust:#ae5638; --line:rgba(32,28,23,.22); --serif:'Playfair Display', Georgia, serif; --sans:Manrope,Arial,sans-serif; --mono:'DM Mono',monospace; }
* { box-sizing:border-box; }
html { background:var(--paper); scroll-behavior:smooth; }
body { margin:0; color:var(--ink); font-family:var(--sans); font-size:15px; line-height:1.55; overflow-x:hidden; }
button,input,textarea { font:inherit; }
button { color:inherit; }
a { color:inherit; text-decoration:none; }
img,video { display:block; max-width:100%; }
[hidden] { display:none !important; }
.skip-link { position:fixed; top:-100%; left:1rem; z-index:99; padding:.6rem .9rem; background:var(--ink); color:var(--paper); }
.skip-link:focus { top:1rem; }
.page { overflow:hidden; }
.site-header { position:fixed; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; width:100%; padding:1.35rem clamp(1.25rem,3vw,3.8rem); color:#fff; }
.brand,.nav,.menu-toggle,.language-code { mix-blend-mode:difference; }
.flag { display:block; width:1.15rem; height:1.15rem; flex:0 0 auto; overflow:hidden; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(255,255,255,.4),0 0 0 1px rgba(32,28,23,.25); }
.flag svg { display:block; width:100%; height:100%; }
.brand { font-family:var(--serif); font-size:1.28rem; letter-spacing:-.04em; white-space:nowrap; }
.nav { display:flex; align-items:center; gap:1.65rem; font-size:.69rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; }
.nav a { position:relative; }
.nav a:after { position:absolute; content:''; right:0; bottom:-.35rem; left:0; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .25s; }
.nav a:hover:after,.nav a:focus:after { transform:scaleX(1); }
.menu-toggle { display:none; border:0; background:none; color:inherit; cursor:pointer; }
.language { position:relative; z-index:25; margin-left:1rem; }
.language-toggle { display:flex; align-items:center; gap:.45rem; padding:.4rem; border:0; background:none; color:inherit; font-size:.73rem; font-weight:700; letter-spacing:.06em; cursor:pointer; }
.language-menu { position:absolute; top:calc(100% + .55rem); right:0; min-width:11.25rem; padding:.35rem; background:var(--paper); color:var(--ink); border:1px solid var(--line); box-shadow:0 12px 28px rgba(0,0,0,.16); opacity:0; visibility:hidden; transform:translateY(-.35rem); transition:.2s; }
.language.open .language-menu { opacity:1; visibility:visible; transform:translateY(0); }
.language-menu a { display:flex; align-items:center; gap:.65rem; padding:.55rem .7rem; font-size:.74rem; }
.language-menu .flag { width:1.05rem; height:1.05rem; }
.language-menu a:hover,.language-menu a:focus,.language-menu a[aria-current=true] { background:var(--paper-deep); }
.hero { position:relative; display:grid; grid-template-columns:1fr minmax(16rem,.85fr); min-height:100svh; align-items:end; color:var(--ink); background:var(--paper); }
.hero-media { grid-area:1 / 2; align-self:stretch; overflow:hidden; background:var(--paper-deep); }
.hero-media img { width:100%; height:100%; object-fit:cover; object-position:52% 40%; filter:saturate(.94); transform:scale(1.03); transition:transform 1.2s ease-out; }
.hero-copy { grid-area:1 / 1; align-self:end; padding:clamp(7rem,13vw,11rem) clamp(2rem,4.5vw,4.5rem) clamp(3rem,6vw,5.5rem) clamp(1.25rem,5vw,5.75rem); }
.eyebrow,.section-kicker,.project-number { margin:0; font-family:var(--mono); font-size:.65rem; letter-spacing:.09em; text-transform:uppercase; }
.hero h1 { max-width:9ch; margin:.8rem 0 1.3rem; font-family:var(--serif); font-size:clamp(3.6rem,8.6vw,9rem); font-weight:400; letter-spacing:-.075em; line-height:.8; }
.hero h1 em { font-style:italic; }
.hero-subtitle { max-width:29rem; margin:0 0 2rem; font-size:clamp(.98rem,1.55vw,1.2rem); line-height:1.55; }
.text-link { display:inline-flex; align-items:center; gap:.7rem; padding-bottom:.2rem; border-bottom:1px solid currentColor; font-size:.74rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; transition:gap .2s; }
.text-link:hover { gap:1.1rem; }
.button { display:inline-flex; align-items:center; gap:.7rem; padding:.9rem 1.35rem; border:1px solid currentColor; font-size:.72rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; cursor:pointer; transition:background .2s,color .2s,border-color .2s,transform .2s,box-shadow .2s; }
.button .icon { width:1.05rem; height:1.05rem; flex:0 0 auto; }
.arrow { position:relative; display:inline-block; width:1rem; height:1rem; flex:0 0 auto; font-size:0!important; line-height:1; }
.text-link .arrow:before,#instagram-cta .arrow:before { position:absolute; width:.78rem; height:1.5px; left:.08rem; top:.46rem; background:currentColor; content:''; transform:rotate(45deg); }
.text-link .arrow:after { position:absolute; width:.4rem; height:.4rem; right:.05rem; bottom:.05rem; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; content:''; }
#instagram-cta .arrow:before { transform:rotate(-45deg); }
#instagram-cta .arrow:after { position:absolute; width:.4rem; height:.4rem; top:.05rem; right:.05rem; border-top:1.5px solid currentColor; border-right:1.5px solid currentColor; content:''; }
.ghost-button .arrow:before { position:absolute; width:.4rem; height:.4rem; left:.29rem; bottom:.08rem; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; content:''; transform:rotate(45deg); }
.ghost-button .arrow:after { position:absolute; width:1.5px; height:.72rem; left:.47rem; top:.05rem; background:currentColor; content:''; }
.button--lg { padding:1.15rem 1.75rem; font-size:.82rem; letter-spacing:.1em; }
.button--lg .icon { width:1.3rem; height:1.3rem; }
.button--ink { border-color:var(--ink); background:var(--ink); color:var(--paper); box-shadow:0 .85rem 1.7rem rgba(32,28,23,.28); }
.button--ink:hover,.button--ink:focus-visible { background:transparent; color:var(--ink); transform:translateY(-2px); }
.button--outline { border-color:var(--line); background:transparent; color:var(--ink); }
.button--outline:hover,.button--outline:focus-visible { border-color:var(--ink); background:var(--ink); color:var(--paper); }
.button--whatsapp { border-color:#128c7e; background:#128c7e; color:#fff; }
.button--whatsapp:hover,.button--whatsapp:focus-visible { background:#0f7166; border-color:#0f7166; transform:translateY(-2px); }
.ghost-button { display:inline-flex; align-items:center; gap:.7rem; padding:.95rem 1.6rem; border:1px solid var(--ink); background:transparent; color:var(--ink); font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; transition:background .2s,color .2s; }
.ghost-button:hover,.ghost-button:focus-visible { background:var(--ink); color:var(--paper); }
.ghost-button .arrow { transition:transform .25s; }
.ghost-button[aria-expanded=true] .arrow { transform:rotate(180deg); }
.hero-side { position:absolute; z-index:2; right:clamp(.9rem,1.8vw,1.6rem); bottom:clamp(2rem,5vw,4.2rem); writing-mode:vertical-rl; transform:rotate(180deg); font-family:var(--mono); font-size:.63rem; letter-spacing:.06em; text-transform:uppercase; opacity:.88; }
.intro { display:grid; grid-template-columns:repeat(12,1fr); gap:1rem; padding:clamp(5.75rem,12vw,12rem) clamp(1.25rem,8vw,9rem); }
.intro .section-kicker { grid-column:1 / span 3; padding-top:.8rem; }
.intro-copy { grid-column:4 / span 8; }
.intro h2 { max-width:17ch; margin:0; font-family:var(--serif); font-size:clamp(2.5rem,5.4vw,6rem); font-weight:400; letter-spacing:-.06em; line-height:.94; }
.intro p { max-width:34rem; margin:2rem 0 0 auto; font-size:1.03rem; }
.portfolio { padding:clamp(4.5rem,10vw,9rem) clamp(1.25rem,3vw,3.8rem) 5rem; background:var(--paper-deep); }
.section-head { display:flex; justify-content:space-between; gap:1.5rem; align-items:flex-end; padding-bottom:2rem; border-bottom:1px solid var(--line); }
.section-note { margin:0; font-family:var(--mono); font-size:.62rem; letter-spacing:.07em; text-transform:uppercase; opacity:.72; }
.work-more { display:flex; justify-content:center; margin:clamp(2.5rem,6vw,4.5rem) 0 0; }
.section-title { margin:.35rem 0 0; font-family:var(--serif); font-size:clamp(2.5rem,5vw,5rem); font-weight:400; letter-spacing:-.06em; line-height:.92; }
.filter-dock { position:sticky; top:1rem; z-index:14; display:flex; align-items:center; gap:1.3rem; width:fit-content; max-width:100%; margin:1.25rem 0 .6rem auto; padding:.65rem .75rem .65rem 1rem; background:var(--ink); color:var(--paper); box-shadow:0 .85rem 1.8rem rgba(32,28,23,.18); }
.filter-dock > p { flex:0 0 auto; margin:0; font-family:var(--mono); font-size:.58rem; letter-spacing:.075em; text-transform:uppercase; }
.filters { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.3rem; }
.filter { padding:.5rem .6rem; border:1px solid transparent; border-radius:0; background:transparent; color:inherit; font-size:.62rem; font-weight:700; letter-spacing:.075em; text-transform:uppercase; cursor:pointer; transition:background .2s,color .2s,border-color .2s; }
.filter:hover,.filter:focus-visible { border-color:rgba(243,238,229,.55); outline:0; }
.filter[aria-pressed=true] { background:var(--sun); color:var(--ink); }
.work-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(.85rem,2vw,1.8rem); padding-top:clamp(2.5rem,5vw,4rem); }
.project { grid-column:span 4; position:relative; transition:opacity .32s,transform .32s; }
.project:nth-child(2) { grid-column:span 5; margin-top:10vw; } .project:nth-child(3) { grid-column:span 3; margin-top:3vw; } .project:nth-child(4) { grid-column:2 / span 5; margin-top:1vw; } .project:nth-child(5) { grid-column:8 / span 4; margin-top:-4vw; }
.project.is-hidden { display:none; }
.project-link { display:block; width:100%; padding:0; border:0; background:none; color:inherit; font:inherit; text-align:inherit; cursor:pointer; }
.project-media { overflow:hidden; background:#c8b9a5; aspect-ratio:3/4; }
.project:nth-child(2) .project-media,.project:nth-child(4) .project-media { aspect-ratio:4/5; }
.project:nth-child(3) .project-media { aspect-ratio:2/3; }
.project-media img { width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.65,.2,1),filter .4s; }
[data-lightbox] { cursor:zoom-in; }
[data-lightbox]:focus-visible { outline:3px solid var(--sun); outline-offset:4px; }
.project-link:hover img,.project-link:focus img { transform:scale(1.045); filter:saturate(1.1); }
.project-meta { display:flex; justify-content:space-between; gap:.5rem; padding-top:.8rem; }
.project-meta h3 { margin:0; font-family:var(--serif); font-size:clamp(1.35rem,2vw,2rem); font-weight:400; letter-spacing:-.04em; line-height:1.05; }
.project-meta p { margin:.25rem 0 0; font-family:var(--mono); font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; }
.project-index { font-family:var(--mono); font-size:.65rem; }
.latest { padding:clamp(4.5rem,9vw,8rem) clamp(1.25rem,3vw,3.8rem); background:var(--paper); }
.latest-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(11rem,1fr)); justify-content:start; gap:clamp(.85rem,2vw,1.6rem) clamp(.7rem,1.6vw,1.2rem); padding-top:clamp(2rem,4vw,3rem); }
.latest-item { margin:0; max-width:22rem; }
.latest-media { display:block; width:100%; padding:0; border:0; aspect-ratio:4/5; overflow:hidden; background:var(--paper-deep); cursor:zoom-in; }
.latest-media:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
.latest-item img { width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.65,.2,1); }
.latest-item:hover img { transform:scale(1.04); }
.latest-item figcaption { padding-top:.6rem; }
.latest-item h3 { margin:0; font-family:var(--serif); font-size:1.05rem; font-weight:400; letter-spacing:-.02em; line-height:1.2; }
.latest-item p { margin:.25rem 0 0; font-family:var(--mono); font-size:.6rem; letter-spacing:.06em; text-transform:uppercase; opacity:.6; }
.image-constellation { display:grid; grid-template-columns:1.15fr .7fr 1fr; gap:clamp(.75rem,2vw,2rem); align-items:center; padding:clamp(4rem,8vw,7rem) clamp(1.25rem,8vw,9rem); background:var(--paper); }
.image-constellation img { width:100%; height:clamp(15rem,24vw,25rem); object-fit:cover; box-shadow:0 1rem 2.2rem rgba(32,28,23,.13); }
.image-constellation img:first-child { height:clamp(17rem,28vw,29rem); transform:rotate(-3deg); }
.image-constellation img:nth-child(2) { height:clamp(13rem,20vw,21rem); transform:translateY(3rem); }
.image-constellation img:last-child { height:clamp(15rem,23vw,24rem); transform:rotate(2deg); }
.frase { display:flex; flex-direction:column; align-items:center; gap:.55rem; padding:clamp(2.2rem,4.5vw,3.6rem) clamp(1.25rem,8vw,9rem); border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--paper); text-align:center; }
.frase:before { content:'»3'; color:var(--rust); font-family:var(--serif); font-size:1.05rem; line-height:1; }
.frase-texto { max-width:30ch; margin:0; font-family:var(--serif); font-size:clamp(1.2rem,2.1vw,1.8rem); font-style:italic; letter-spacing:-.02em; line-height:1.2; }
.frase-gloss { max-width:34ch; margin:0; font-size:.9rem; line-height:1.45; opacity:.62; }
.frase-fonte { font-family:var(--mono); font-size:.6rem; font-style:normal; letter-spacing:.08em; text-transform:uppercase; opacity:.55; }
.feature { display:grid; grid-template-columns:1fr 1.35fr; gap:clamp(2rem,6vw,6rem); padding:clamp(5rem,10vw,10rem) clamp(1.25rem,5vw,5.75rem); background:var(--ink); color:var(--paper); }
.feature-copy { align-self:center; }
.feature-label { margin:1.15rem 0 0; color:var(--sun); font-family:var(--mono); font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; }
.feature h2 { max-width:14ch; margin:.9rem 0 1.4rem; font-family:var(--serif); font-size:clamp(2.6rem,4.6vw,4.8rem); font-weight:400; letter-spacing:-.06em; line-height:.92; }
#feature-copy { max-width:34rem; margin:0 0 2.1rem; color:rgba(243,238,229,.82); font-size:1.02rem; }
.feature-gallery { display:grid; grid-template-columns:1fr 1fr; gap:clamp(.7rem,1.5vw,1.2rem); align-content:start; }
.feature-shot { position:relative; margin:0; aspect-ratio:3/4; overflow:hidden; background:#100e0c; }
.feature-shot img { width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.65,.2,1); }
.feature-shot:hover img { transform:scale(1.045); }
/* O fonte tem 720x794, quase quadrado: numa faixa larga o corte comia os
   bailarinos. Limitando a largura, a proporcao fica perto da do celular. */
.feature-video { grid-column:1 / -1; width:100%; max-width:34rem; margin:clamp(1.5rem,3vw,2.5rem) auto 0; }
.feature-video video { width:100%; height:min(62vh,34rem); object-fit:cover; background:#100e0c; }
.feature-anterior { grid-column:1 / -1; display:grid; grid-template-columns:1fr 1.35fr; gap:clamp(1.5rem,5vw,5rem); align-items:center; margin-top:clamp(2.5rem,5vw,4rem); padding-top:clamp(1.6rem,3vw,2.4rem); border-top:1px solid rgba(243,238,229,.25); }
.feature-anterior p { margin:0; }
#feature-anterior-copy { max-width:30rem; margin-top:.7rem; color:rgba(243,238,229,.72); font-size:.95rem; }
.feature-anterior-fotos { display:grid; grid-template-columns:1fr 1fr; gap:clamp(.7rem,1.5vw,1.2rem); }
.feature-anterior-fotos .feature-shot { aspect-ratio:4/5; }
.feature-credit { grid-column:1 / -1; margin:clamp(1.5rem,3vw,2.6rem) 0 0; padding-top:.75rem; border-top:1px solid rgba(243,238,229,.25); color:rgba(243,238,229,.7); font-family:var(--mono); font-size:.62rem; letter-spacing:.07em; text-transform:uppercase; }
.video-band { padding:clamp(3.5rem,8vw,7rem) clamp(1.25rem,5vw,5.75rem); }
.video-band--moss { background:var(--moss); color:var(--paper); }
.video-band--ink { background:var(--ink); color:var(--paper); }
.video-frame { height:min(70vh,44rem); overflow:hidden; background:rgba(0,0,0,.35); }
.video-frame video { width:100%; height:100%; object-fit:cover; }
.video-caption { display:flex; justify-content:space-between; gap:1rem; margin:0; padding-top:.7rem; border-top:1px solid rgba(243,238,229,.37); font-family:var(--mono); font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; }
.process { position:relative; min-height:min(88svh,58rem); padding:clamp(6rem,13vw,12rem) clamp(1.25rem,5vw,5.75rem) clamp(3rem,6vw,5rem); overflow:hidden; background:var(--moss); color:var(--paper); isolation:isolate; display:flex; flex-direction:column; justify-content:space-between; gap:clamp(3rem,8vw,7rem); }
.process-backdrop { position:absolute; z-index:-2; inset:0; }
.process-backdrop video { width:100%; height:100%; object-fit:cover; }
.process:after { position:absolute; z-index:-1; inset:0; content:''; background:linear-gradient(180deg,rgba(35,48,38,.86) 0%,rgba(35,48,38,.6) 45%,rgba(35,48,38,.92) 100%); }
.process-grid { display:grid; grid-template-columns:1fr 1.25fr; gap:clamp(2rem,7vw,8rem); align-items:end; }
.process h2 { max-width:5ch; margin:.6rem 0 0; font-family:var(--serif); font-size:clamp(3.5rem,8vw,8.5rem); font-weight:400; letter-spacing:-.07em; line-height:.82; }
.process-copy { max-width:33rem; margin-bottom:1rem; }
.process-copy p { font-size:1.05rem; }
.process-caption { display:flex; justify-content:space-between; gap:1rem; margin:0; padding-top:.7rem; border-top:1px solid rgba(243,238,229,.37); font-family:var(--mono); font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; }
.project-modal { position:fixed; z-index:100; display:flex; align-items:center; justify-content:center; inset:0; padding:clamp(1rem,4vw,3rem); background:rgba(10,9,8,.94); opacity:0; visibility:hidden; pointer-events:none; cursor:zoom-out; transition:opacity .25s,visibility 0s linear .25s; }
.project-modal.open { opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s; }
.modal-gallery { position:relative; display:flex; width:100%; height:100%; margin:0; align-items:center; justify-content:center; }
.modal-gallery img { display:block; width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; cursor:default; box-shadow:0 1.5rem 4rem rgba(0,0,0,.45); user-select:none; }
.modal-caption { position:absolute; bottom:0; left:50%; max-width:min(36rem,calc(100vw - 8rem)); padding:.55rem .8rem; border-radius:.2rem .2rem 0 0; background:rgba(10,9,8,.72); color:#fff; font-family:var(--sans); font-size:.78rem; line-height:1.35; text-align:center; transform:translateX(-50%); backdrop-filter:blur(6px); }
.modal-caption[hidden] { display:none; }
.modal-nav { position:fixed; z-index:2; top:50%; display:grid; width:3rem; height:3rem; padding:0; place-items:center; border:1px solid rgba(255,255,255,.65); border-radius:50%; background:rgba(10,9,8,.58); color:#fff; cursor:pointer; font-size:1.5rem; line-height:1; transform:translateY(-50%); backdrop-filter:blur(6px); }
.modal-nav[hidden] { display:none; }
.modal-previous { left:clamp(.75rem,2vw,1.35rem); }
.modal-next { right:clamp(.75rem,2vw,1.35rem); }
.modal-close { position:fixed; z-index:2; top:clamp(.75rem,2vw,1.35rem); right:clamp(.75rem,2vw,1.35rem); width:2.8rem; height:2.8rem; border:1px solid rgba(255,255,255,.65); border-radius:50%; background:rgba(10,9,8,.58); color:#fff; cursor:pointer; font-size:1.65rem; line-height:1; backdrop-filter:blur(6px); }
.modal-close:hover,.modal-close:focus-visible,.modal-nav:hover,.modal-nav:focus-visible { border-color:#fff; background:#fff; color:#111; outline:0; }
.instagram { display:grid; grid-template-columns:1fr 1fr; min-height:42rem; background:var(--sun); }
.instagram-copy { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:clamp(3rem,8vw,8rem); }
.instagram h2 { max-width:7ch; margin:.6rem 0 1.15rem; font-family:var(--serif); font-size:clamp(3.5rem,7vw,7.8rem); font-weight:400; letter-spacing:-.07em; line-height:.82; }
.instagram-image { min-height:30rem; overflow:hidden; }
.instagram-image img { width:100%; height:100%; object-fit:cover; object-position:50% 26%; }
.instagram-note { max-width:26rem; margin:0 0 2.2rem; font-size:1rem; }
.contact { padding:clamp(5rem,10vw,10rem) clamp(1.25rem,8vw,9rem); }
.contact-grid { display:grid; grid-template-columns:1fr 1.5fr; gap:clamp(3rem,10vw,10rem); }
.contact h2 { margin:.5rem 0 0; font-family:var(--serif); font-size:clamp(3rem,6vw,6.5rem); font-weight:400; letter-spacing:-.07em; line-height:.83; }
.contact-copy { max-width:28rem; }
.contact-channels { display:grid; gap:.6rem; max-width:22rem; margin-top:2.2rem; }
.contact-channels .button { width:100%; justify-content:center; }
.contact-note { margin:.95rem 0 0; font-family:var(--mono); font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; opacity:.72; }
.site-footer { display:flex; justify-content:space-between; gap:2rem; padding:1.35rem clamp(1.25rem,3vw,3.8rem); border-top:1px solid var(--line); font-family:var(--mono); font-size:.61rem; letter-spacing:.055em; text-transform:uppercase; }
.anima .reveal { opacity:0; transform:translateY(1.5rem); transition:opacity .75s ease,transform .75s ease; }
.reveal.visible { opacity:1; transform:none; }
@media (max-width:760px) { .site-header { padding:1rem 1.25rem; } .menu-toggle { display:block; } .nav { position:absolute; top:0; left:0; display:flex; width:100%; min-height:100vh; padding:6.5rem 1.25rem 2rem; flex-direction:column; align-items:flex-start; justify-content:flex-start; background:var(--ink); color:var(--paper); transform:translateY(-110%); transition:transform .3s; } .nav { mix-blend-mode:normal; } .nav.open { transform:none; } .nav a { font-family:var(--serif); font-size:2rem; font-weight:400; letter-spacing:-.04em; text-transform:none; } .language { margin-left:auto; margin-right:.5rem; } .hero { grid-template-columns:1fr; min-height:auto; } .hero-media { grid-area:1 / 1; height:58svh; } .hero-copy { grid-area:2 / 1; padding:2.6rem 1.25rem 3.2rem; } .hero-side { display:none; } .intro { display:block; } .intro .section-kicker { margin-bottom:2rem; } .intro p { margin-left:0; } .section-head { display:block; } .filter-dock { top:.5rem; display:block; width:calc(100% + 2.5rem); max-width:none; margin:1rem -1.25rem .8rem; padding:.8rem 1.25rem; } .filter-dock > p { margin-bottom:.45rem; } .filters { flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; padding-bottom:.2rem; } .filter { flex:0 0 auto; } .work-grid { grid-template-columns:repeat(2,1fr); gap:1.3rem .8rem; } .project,.project:nth-child(n) { grid-column:span 1; margin-top:0; } .project:nth-child(2),.project:nth-child(5) { margin-top:3.5rem; } .project:nth-child(3) .project-media { aspect-ratio:3/4; } .latest { padding:3.5rem 1.25rem; } .latest-grid { grid-template-columns:1fr 1fr; gap:.8rem; } .image-constellation { grid-template-columns:1fr 1fr; gap:.7rem; padding:3rem 1.25rem; align-items:start; } .image-constellation img { height:10rem; box-shadow:0 .5rem 1.2rem rgba(32,28,23,.12); } .image-constellation img:first-child { height:10rem; transform:none; } .image-constellation img:nth-child(2) { height:10rem; transform:none; } .image-constellation img:last-child { grid-column:1 / span 2; width:100%; height:11rem; margin-top:0; justify-self:auto; transform:none; } .frase { padding:2rem 1.25rem; } .video-band { padding:3rem 1.25rem; } .video-frame { height:26rem; } .feature { grid-template-columns:1fr; } .feature-gallery { grid-template-columns:1fr 1fr; } .feature-anterior { grid-template-columns:1fr; gap:1.4rem; } .feature-video video { height:20rem; } .section-note { margin-top:.9rem; } .contact-channels .button { width:100%; justify-content:center; } .work-more .ghost-button { width:100%; justify-content:center; } .process-grid,.contact-grid { grid-template-columns:1fr; } .process-copy { margin-top:2rem; } .project-modal { grid-template-columns:1fr; overflow:auto; } .modal-gallery { display:block; min-height:0; overflow:visible; padding:.75rem; } .modal-gallery img { width:100%; height:auto; max-width:100%; max-height:none; } .modal-close { position:fixed; top:1rem; right:1rem; z-index:2; background:var(--paper); box-shadow:0 .3rem .9rem rgba(32,28,23,.35); } .modal-info { min-height:auto; padding-top:2rem; } .modal-info p { margin-top:2.5rem; } .instagram { grid-template-columns:1fr; } .instagram-copy { min-height:31rem; } .instagram-image { min-height:26rem; } .site-footer { display:block; } .site-footer p + p { margin-top:.5rem; } }
@media (max-width:760px) { .project-modal { overflow:hidden; padding:.75rem 3.35rem; } .modal-gallery { display:flex; min-height:auto; overflow:hidden; padding:0; } .modal-gallery img { width:auto; height:auto; max-width:100%; max-height:100%; } .modal-close { top:.75rem; right:.75rem; background:rgba(10,9,8,.58); box-shadow:none; } .modal-nav { width:2.7rem; height:2.7rem; } }
@media (max-width:760px) { .modal-caption { max-width:calc(100vw - 7rem); font-size:.72rem; } }
@media (max-width:760px) { .hero-copy { padding-bottom:1.5rem; } .intro { padding-top:2.25rem; } }
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } .anima .reveal { opacity:1; transform:none; } }