:root{color-scheme:light;--ivory:#eee9df;--ink:#20211d;--signal:#d44932;--white:#f7f3e9}
*{box-sizing:border-box}
html,body{margin:0;background:#181917;color:var(--ink);font-family:Arial,Helvetica,sans-serif}
button,a{font:inherit}
button{cursor:pointer;color:inherit}
button:focus-visible,a:focus-visible{outline:3px solid var(--signal);outline-offset:6px}
.viewport{position:fixed;inset:0;overflow:hidden;isolation:isolate;background:#22231f}
.environment{position:absolute;inset:0;z-index:0;will-change:transform}
.environment picture,.environment img{display:block}
.environment img{height:100vh;width:auto;max-width:none;filter:saturate(.82) contrast(1.04);transform-origin:0 0}
.grade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#11130fe6 0%,#11130f78 19%,transparent 48%,#f0e9d50d 72%),linear-gradient(180deg,#07090855,transparent 32%,#13140f33);mix-blend-mode:multiply}
body>header{position:fixed;inset:0 0 auto;z-index:100;display:flex;justify-content:space-between;padding:27px 3.3vw;pointer-events:none}
body>header button{pointer-events:auto;background:none;border:0;color:inherit;letter-spacing:.26em;font-size:15px;font-weight:700}
.layer{position:absolute;will-change:transform;z-index:10}
.eyebrow{font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:700}
.title{left:7vw;color:var(--white);text-shadow:0 3px 24px #0009}
.title h1{line-height:.84;letter-spacing:-.075em;margin:18px 0 34px;white-space:nowrap;font-weight:800}
.enter{border:0;border-bottom:3px solid var(--signal);background:none;padding:12px 0;letter-spacing:.34em;font-size:14px;color:inherit}
.education{left:4.5vw;color:var(--white);z-index:13}
.education h2{letter-spacing:-.055em;line-height:.88;margin:18px 0 24px;font-weight:800}
.education p{max-width:390px;font-size:15px;line-height:1.55;margin:0 0 15px}
.education p:first-of-type{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700}
.portrait{overflow:hidden;margin:0}
.portrait img{width:100%;height:100%;display:block;object-fit:cover}
.portrait:after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 0 1px #f7f3e924;background:linear-gradient(180deg,transparent 72%,#171a1688)}
.bio{z-index:14;border-top:1px solid #25251f;overscroll-behavior:contain}
.bio h2{line-height:.92;letter-spacing:-.055em;margin:0 0 27px;font-weight:800}
.bio h2:after{content:'';display:block;background:var(--signal);height:3px;width:38px;margin-top:22px}
.bio p{margin:0 0 17px}
.bio details summary{cursor:pointer;font-size:13px;margin:16px 0;text-decoration:underline;text-underline-offset:5px}
.bio details p{font-size:14px}
.controls{position:fixed;z-index:101;bottom:0;left:0;right:0;display:flex;align-items:center;gap:18px}
.controls button{border:0;background:none;padding:9px 3px;min-height:38px}
.controls button[aria-current=true]{box-shadow:inset 0 -2px var(--signal)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
noscript{display:block;padding:100px 30px;color:white}
@media(max-width:700px){
.environment{left:50%;right:auto;width:auto;height:180vh}
.environment img{height:180vh;width:auto;transform:translateX(-50%)}
}
/* Every chapter shares the same gallery and camera axis. */
.viewport{perspective:1600px}
.chapter{position:absolute;inset:0;z-index:20;will-change:transform}
.chapter-title{position:absolute;left:8vw;top:37vh;margin:0;font-size:clamp(64px,10vw,160px);letter-spacing:-.07em;line-height:.9;font-weight:900}
.experience-track{position:absolute;inset:0;pointer-events:none}
.experience-station{position:absolute;inset:0;pointer-events:auto;perspective:1400px;will-change:transform}
.experience-copy{position:absolute;left:7vw;z-index:3}
.experience-copy>.eyebrow{font-size:12px;letter-spacing:.1em}
.experience-copy h3{letter-spacing:-.06em;line-height:.96;max-width:620px}
.employer{font-size:17px;line-height:1.4;margin:0 0 22px;font-weight:600}
.employer span{display:block;font-size:12px;font-weight:400;margin-top:5px}
.employer:after{content:'';display:block;background:var(--signal);height:3px;width:38px}
.experience-body{overscroll-behavior:contain;padding-right:14px}
.experience-body p{margin:0 0 14px}
.chapter-actions{position:absolute;display:flex;align-items:center;z-index:6}
.chapter-actions button{min-width:44px}
.chapter-actions button:disabled{opacity:.3;cursor:default}
.chapter-actions span{font-size:12px}
.stories-intro{position:absolute;left:7vw}
.stories-intro h2,.projects-heading{line-height:.88;letter-spacing:-.07em;margin:0;font-weight:900}
.stories-intro p{font-size:12px;margin:12px 0;letter-spacing:.13em;text-transform:uppercase}
.editorial-gallery{position:absolute;grid-template-columns:1.7fr 1fr;gap:3vw;perspective:1400px}
.featured-story{position:relative;min-width:0;background:#efece3;transform-origin:left bottom;overflow:hidden}
.story-media{position:absolute;inset:0}
.story-media img,.story-media iframe{display:block;width:100%;height:100%;border:0;object-fit:cover}
.featured-story.has-video .story-media{left:48%;width:52%;background:#0d0f0d}
.featured-story.has-video .featured-copy{width:48%}
.featured-copy{position:relative;height:100%;padding:25px 24px;background:linear-gradient(90deg,rgba(5,7,6,.94) 0%,rgba(7,10,8,.88) 76%,rgba(7,10,8,.72) 100%);box-shadow:18px 0 42px rgba(0,0,0,.28);display:flex;flex-direction:column;align-items:flex-start;color:#f5f1e8}
.featured-copy .eyebrow{font-size:11px;letter-spacing:.12em}
.featured-copy h3{line-height:1.02;letter-spacing:-.05em;margin:20px 0 12px}
.story-summary{font-size:13px;line-height:1.45;margin:0 0 14px;max-width:560px}
.featured-copy a{margin-top:auto;align-self:flex-end;font-size:14px;color:inherit;text-underline-offset:7px;padding:10px 0;text-align:right}
.featured-story>small{position:absolute;bottom:10px;right:12px;background:#171917b8;color:white;font-size:10px;padding:4px 7px}
.stories-note{position:absolute;font-size:12px;line-height:1.5;max-width:680px}
.projects-heading{position:absolute;left:7vw}
.projects-lead{position:absolute;left:7vw;max-width:720px;font-size:13px;line-height:1.5;color:#d7d3ca;margin:0}
.project-gallery{position:absolute;perspective:1600px;transform-style:preserve-3d}
.project{position:absolute;left:7vw;top:0;width:28vw;height:100%;text-decoration:none;color:#20211d;will-change:transform;transform-origin:center center;display:flex;flex-direction:column}
.project-image{flex-shrink:0;overflow:hidden;background:#f5f4ef}
.project-image img{width:100%;height:100%;object-fit:cover;object-position:left top;display:block}.project-slideshow{position:relative;width:100%;height:100%;overflow:hidden}.project-slideshow>[data-project-slide]{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 800ms cubic-bezier(.22,1,.36,1)}.project-slideshow>[data-project-slide].is-active{opacity:1}.project-slideshow img[data-project-slide]{object-fit:cover;object-position:left top}.atmos-slideshow .atmos-cover{width:100%;height:100%}.atmos-cover-secondary{background:linear-gradient(145deg,#0b1528,#111b32 58%,#171c24)}
.project-copy{padding:18px 4px 0;position:relative}
.project-copy>span{font-size:10px;letter-spacing:.09em;text-transform:uppercase}
.project-copy h3{line-height:1;letter-spacing:-.05em;margin:7px 0 10px}
.project-copy p{font-size:14px;line-height:1.4;margin:0;max-width:360px}
.project-copy small{display:block;margin-top:12px;font-size:12px;text-decoration:underline;text-underline-offset:5px}
.atmos-cover{height:100%;background:#0b1528;color:#eceef4;padding:24px;display:flex;flex-direction:column;justify-content:space-between}
.atmos-cover>span{font-size:12px;letter-spacing:.2em}
.atmos-cover strong{font-size:clamp(20px,2.3vw,32px);line-height:1.1;font-weight:500;letter-spacing:-.03em}
.atmos-cover small{font-size:9px;letter-spacing:.12em}
#project-back{position:absolute;bottom:11vh;left:7vw;z-index:50;background:#eee9df;border:0;padding:14px 22px;font-size:14px}
.project.is-focused{z-index:40}
.project.is-focused .project-image{height:72%}
.project.is-focused .project-copy{background:#f1ede4;padding:18px 22px}
.project.is-focused .project-copy p{max-width:none}
.controls{border-top:1px solid #2222}
.controls button{font-size:12px}
.scroll-track{height:1150vh}
body>header{mix-blend-mode:normal;color:var(--header-color,#f5f1e8);transition:color .25s}
.title{width:80vw}
.title h1{font-size:clamp(64px,8.7vw,146px)}
/* Reduced motion retains imagery and uses a normal document flow. */
.static .viewport{position:relative;inset:auto;overflow:visible;perspective:none;background:#eee9df;padding-bottom:90px}
.static .environment,.static .grade,.static .gallery-environment{display:none}
.static .layer,.static .chapter{position:relative;inset:auto!important;transform:none!important;width:auto!important;max-height:none!important}
.static .title{min-height:90svh;padding:120px 7vw 60px;background:linear-gradient(90deg,#1118,transparent),url('./assets/editorial-panorama.webp') left center/auto 100% no-repeat}
.static .education{padding:70px 7vw;background:linear-gradient(#172416aa,#172416aa),url('./assets/editorial-panorama.webp') center/cover}
.static .bio{padding:60px 7vw;overflow:visible}
.static .portrait{margin:auto}
.static #experience-chapter{background:url('./assets/fundo desktop exp.png') center/cover no-repeat!important}
.static .chapter-title,.static .projects-heading,.static .stories-intro{position:relative;inset:auto;padding:70px 7vw 30px}.static .projects-lead{position:relative;inset:auto;padding:0 7vw 10px;max-width:820px}
.static .experience-track{position:relative}
.static .experience-station{position:relative;inset:auto;transform:none!important;min-height:650px}
.static .experience-copy{top:40px}
.static .experience-body{max-height:none}
.static .chapter-actions,.static .scroll-track{display:none}
.static .editorial-gallery{position:relative;inset:auto;height:65vh;padding:0 7vw}
.static .stories-note{position:relative;inset:auto;padding:30px 7vw}
.static .project-gallery{position:relative;inset:auto;display:grid;grid-template-columns:repeat(2,1fr);padding:30px 7vw;gap:50px}
.static .project{position:relative;inset:auto;width:100%;height:480px;transform:none!important}
.static .featured-story{transition:none;transform:none}
@media(max-width:700px){
.controls{flex-wrap:wrap}
.controls button{padding:8px 0}
.controls #motion{font-size:10px;margin-left:auto}
.scroll-track{height:1400vh}
/* Mobile navigation is menu-driven. Do not keep the desktop-style virtual scroll rail:
   during iOS pinch zoom Safari can preserve/re-anchor its position inside that 1400vh
   document and appear to jump to the final section. The fixed viewport and camera state
   are controlled by the menu, so the mobile rail must not create a navigable page axis. */
.mobile-menu-navigation .scroll-track{height:1px}
.chapter-actions span{font-size:10px;max-width:48vw}
.stories-intro p{font-size:10px}
.project-copy p{max-width:none}
.atmos-cover strong{font-size:24px}
.atmos-cover small{font-size:10px}
.static .title{padding:120px 24px 50px;background-image:linear-gradient(#1116,#1116),url('./assets/editorial-mobile.webp')}
.static .education,.static .bio{padding:45px 24px}
.static .experience-station{min-height:0;padding:20px 7vw 40px}
.static .experience-copy{position:relative;inset:auto;width:auto}
.static .project-gallery{grid-template-columns:1fr;padding:30px 7vw}
.static .project{height:440px}
.static .stories-intro,.static .projects-heading,.static .chapter-title{padding:50px 7vw 25px}.static .projects-lead{padding:0 7vw 18px}
}
/* Revision: readable editorial planes and unobtrusive navigation. */
.controls{background:none;border:0;backdrop-filter:none;justify-content:center;padding:12px 180px 16px 30px;color:var(--header-color,#eee);pointer-events:none}
.controls button{pointer-events:auto;text-shadow:0 1px 6px #0005}
.controls [data-stop]{visibility:hidden}
.has-navigation .controls [data-stop]{visibility:visible}
#motion{position:fixed;right:24px;bottom:16px;background:none;color:var(--header-color,#eee);border:0;font-size:12px}
.title{top:36vh}
.education{top:18vh;width:32vw;padding:25px}
.education h2{font-size:clamp(40px,4.4vw,64px)}
.bio{left:45vw;top:23vh;padding:0;max-height:none;overflow:visible}
.bio h2{font-size:clamp(30px,3vw,46px);margin-bottom:20px}
.bio p{font-size:clamp(14px,1.1vw,17px);line-height:1.55}
.portrait{border-radius:50%;box-shadow:none}
.portrait img{object-position:50% 34%;filter:none}
.portrait:after{display:none}
.experience-copy{top:14vh;width:40vw;color:#20211d;padding:20px 24px 20px 0}
.experience-copy h3{font-size:clamp(32px,3.8vw,57px);margin:12px 0 16px}
.experience-body{max-height:none;overflow:visible;font-size:15px;line-height:1.5}
.employer{margin-bottom:15px}
.employer:after{margin-top:12px}
.chapter-actions{bottom:12vh;left:7vw;gap:12px;background:none}
.chapter-actions button{font-size:14px;font-weight:700;background:#f6f2e9;border:1px solid #35362b55;border-radius:3px;padding:12px 18px;min-height:48px;color:#24251e}
.chapter-actions span{display:none}
.stories-intro{top:12vh}
.stories-intro h2,.projects-heading{font-size:clamp(36px,4.5vw,64px)}
.editorial-gallery{top:25vh;bottom:24vh;left:12vw;right:12vw;display:block}
.featured-story{height:100%}
.featured-copy{width:48%}
.featured-copy h3{font-size:clamp(24px,2.8vw,39px)}
.story-actions{bottom:14vh;left:12vw}
.stories-note{bottom:12vh;left:44vw;right:12vw}
.projects-heading{top:17vh}
.projects-lead{top:25vh}
.project-gallery{inset:35vh 0 14vh}
.project-image{height:57%}
.project-actions{bottom:11vh}
.project-copy h3{font-size:clamp(22px,2.2vw,32px)}
.reading-dialog{border:0;background:#f2eee4;color:#24251f;padding:32px;max-width:680px;width:calc(100% - 32px);max-height:85svh;line-height:1.7}
.reading-dialog::backdrop{background:#121610b8;backdrop-filter:blur(6px)}
.reading-dialog button{display:block;margin-left:auto;background:none;border:0;padding:10px;font-weight:bold}
.reading-dialog h2{font-size:28px}
.reading-dialog p{font-size:16px}
.static .portrait{width:240px!important;height:240px;max-width:240px}
.static .story-actions{display:flex;position:relative;inset:auto;padding:20px 7vw}
.static .experience-copy{background:none}
.static .controls{color:#24251f}
.static #motion{color:#24251f}
@media(max-width:700px){
.controls{padding:6px 10px 38px;gap:14px}
.controls button{font-size:10px}
#motion{right:15px;bottom:4px;font-size:10px}
.employer:after{margin-top:8px}
.experience-body p{margin-bottom:9px}
.chapter-actions{left:6vw;bottom:11vh;background:none;padding:0}
.experience-actions,.project-actions{background:none;padding:0}
.chapter-actions button{font-size:12px;padding:9px 16px}
.static .bio h2{max-width:none}
.static .experience-copy{padding:0}
.static .portrait{margin:20px auto}
}
@media(min-width:701px){
.bio p{font-weight:500}
.has-navigation .controls{color:#252a23;text-shadow:0 1px 5px #fff}
.has-navigation #motion{color:#252a23}
.controls button{text-shadow:none}
}
@media(min-width:701px) and (max-height:720px){
.education{top:13vh;padding:18px}
.education h2{font-size:42px;margin:12px 0 16px}
.education p{font-size:13px}
.bio{top:17vh}
.bio h2{font-size:32px;margin-bottom:14px}
.bio p{font-size:13px;line-height:1.5}
.experience-copy{top:11vh;padding-top:12px}
.experience-copy h3{font-size:36px;margin:10px 0}
.experience-body{font-size:13px;line-height:1.42}
.experience-body p{margin-bottom:10px}
.employer{font-size:14px;margin-bottom:10px}
.employer:after{margin-top:9px}
.chapter-actions{bottom:10vh}
.project-copy{padding-top:10px}
.project-copy h3{font-size:24px;margin:5px 0 7px}
.project-copy p{font-size:12px}
.project-copy small{margin-top:8px}
.featured-copy{padding:18px}
.featured-copy h3{font-size:27px;margin:12px 0}
.story-actions{bottom:14vh}
.stories-note{bottom:12vh}
}
@media(min-width:701px){
.project{width:27vw}
.project-gallery{overflow:visible}
}
/* Profile: photographic composition, without panel boundaries. */
.education{background:none;box-shadow:none;border:0;text-shadow:0 2px 16px #0009}
@media(min-width:701px){
.education::before{content:'';position:absolute;pointer-events:none;z-index:-1;inset:-12vh -12vw;background:radial-gradient(ellipse at 40% 45%,#101a14d9 0%,#101a14a6 32%,#101a1452 54%,#101a141a 68%,transparent 82%);filter:blur(18px)}
.bio::before{content:'';position:absolute;pointer-events:none;z-index:-1;filter:blur(18px)}
.bio::before{inset:-14vh -12vw;background:radial-gradient(ellipse at 57% 48%,#111a15d9 0%,#111a15ad 35%,#111a1559 56%,#111a151a 70%,transparent 84%)}
}
.bio{width:45vw;color:#f5f1e8;text-shadow:0 2px 14px #0009;background:none;border:0;box-shadow:none;backdrop-filter:none}
.bio h2{margin-left:calc(clamp(76px,8vw,116px) + 22px);min-height:clamp(76px,8vw,116px);padding-top:6px;max-width:none}
.portrait{z-index:15;left:45vw;top:23vh;width:clamp(76px,8vw,116px);height:clamp(76px,8vw,116px)}
@media(min-width:701px) and (max-height:720px){
.portrait{top:17vh}
}
.static .education::before,.static .bio::before{display:none}
.static .bio{color:#24251f;text-shadow:none}
.static .bio h2{margin-left:0;min-height:0;padding-top:0}
#experience-chapter{background:transparent;color:#20211d}
#stories-chapter{background:transparent}
#projects-chapter{background:radial-gradient(circle at 75% 30%,#293027 0%,#141714 38%,#090b0a 85%);color:#f5f1e8}
#projects-chapter .project{color:#f5f1e8}
#projects-chapter .project-copy small{color:#d9d2c7}
.experience-copy{background:none;padding-left:0}
.featured-story{transform:none;box-shadow:none}
.project-image{box-shadow:none}
@media(max-width:700px){
body>header{display:none}
.chapter-title{left:6vw;color:#20211d}
.experience-copy{left:6vw}
.employer{border-top:1px solid #20211d33}
.employer:after{display:none}
.experience-body{overflow-y:auto}
.experience-actions{left:6vw;right:6vw;bottom:11vh;justify-content:space-between}
.experience-actions button{background:none;border:1px solid #20211d55;color:#20211d;min-height:42px;padding:8px 13px}
.stories-intro{left:6vw}
.project{color:#f5f1e8}
.project-image{background:#171b17}
.project-copy p{color:#d7d3ca}
.controls{overflow-x:auto;justify-content:flex-start;padding-left:6vw;padding-right:6vw;scrollbar-width:none}
.controls::-webkit-scrollbar{display:none}
}
/* mobile-polish-2026-09-20 */
@media(max-width:700px){
/* Chapter/feed polish only; Início and Perfil are consolidated below. */
.chapter-title,.stories-intro h2,.projects-heading{font-size:clamp(38px,11.5vw,50px);letter-spacing:-.055em;line-height:.9}
.chapter-title{top:8.5vh}
.experience-copy{top:20vh}
.experience-copy h3{font-size:clamp(32px,9.2vw,43px);line-height:.96;letter-spacing:-.045em;margin:12px 0 14px}
.experience-copy>.eyebrow{font-size:9px;letter-spacing:.13em}
.employer{font-size:13px;line-height:1.35;padding-top:10px;margin-bottom:12px}
.employer span{font-size:10.5px;margin-top:4px}
.experience-body{font-size:13px;line-height:1.5}
.stories-intro{top:8.5vh}
.stories-intro p{margin-top:9px;letter-spacing:.1em}
.project-copy{padding-top:13px}
.project-copy>span{font-size:9px;letter-spacing:.11em}
.project-copy h3{font-size:clamp(27px,8vw,34px);line-height:.95;margin:7px 0 9px}
.project-copy p{font-size:12.5px;line-height:1.42}
.project-copy small{font-size:11px;margin-top:14px}
}
/* mobile-vertical-feed-2026-09-20 */
@media(max-width:700px){
.experience-station[data-experience-clone]{display:none!important}
/* Mobile feed text colors; each chapter background is controlled by its own layer. */
#experience-chapter,#projects-chapter{color:#f5f1e8}
/* Instagram-like vertical feeds: one continuous column, natural vertical browsing. */
#experience-chapter{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:calc(88px + env(safe-area-inset-top)) 0 32px}
#stories-chapter{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:calc(96px + env(safe-area-inset-top)) 0 32px}
#projects-chapter{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:calc(112px + env(safe-area-inset-top)) 0 32px}
#experience-title{position:relative!important;inset:auto!important;margin:0 6vw 24px!important;padding:0!important;transform:none!important;color:#f5f1e8!important}.projects-heading{position:relative!important;inset:auto!important;margin:0 6vw 14px!important;padding:0!important;transform:none!important;color:#f5f1e8!important}.projects-lead{position:relative!important;inset:auto!important;margin:0 6vw 36px!important;max-width:none;font-size:12.5px;line-height:1.5;color:#d7d3ca}
.stories-intro{position:relative!important;inset:auto!important;margin:0 6vw 36px!important;padding:0!important;transform:none!important;color:#f5f1e8!important}
.stories-intro p{color:#d7d3ca}
.experience-track{position:relative;inset:auto;display:block}
.experience-station{position:relative!important;inset:auto!important;transform:none!important;min-height:0;margin:0 0 16px;padding:0 6vw 24px;perspective:none;border-bottom:1px solid rgba(255,255,255,.18)}
.experience-copy{position:relative!important;inset:auto!important;width:100%!important;transform:none!important;padding:18px!important;background:linear-gradient(135deg,rgba(7,10,8,.86),rgba(9,13,10,.72))!important;box-shadow:0 14px 34px rgba(0,0,0,.22)!important;color:#f5f1e8!important}
.experience-copy>.eyebrow{color:#c8b69f}
.experience-copy h3{max-width:none}
.employer{border-top-color:rgba(255,255,255,.22)}
.experience-body{max-height:none;overflow:visible;padding:0}
.experience-actions{display:none!important}
.editorial-gallery{display:none!important}
.mobile-story-feed{display:block;margin:0 0 20px}
.mobile-story-card{display:block;color:#f5f1e8;text-decoration:none;margin:0 0 16px;padding:0 6vw 22px;border-bottom:1px solid rgba(255,255,255,.18)}
.mobile-story-media{width:100%;background:#171a17}
.mobile-story-media>a{display:block}
.mobile-story-media img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:#171a17}
.mobile-story-media iframe{display:block;width:100%;aspect-ratio:16/9;border:0;background:#0b0d0b}
.mobile-story-card .mobile-story-copy{display:flex;flex-direction:column;min-height:100%;padding:16px;background:linear-gradient(135deg,rgba(4,6,5,.92),rgba(8,11,9,.78));box-shadow:0 14px 34px rgba(0,0,0,.3)}
.mobile-story-card .mobile-story-category{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#c8b69f}
.mobile-story-card h3{font-size:clamp(22px,6.5vw,29px);line-height:1.05;letter-spacing:-.035em;margin:9px 0 12px}
.mobile-story-summary{font-size:12.5px;line-height:1.5;color:#ebe6dc;margin:0 0 14px}
.mobile-story-link{display:inline-block;align-self:flex-end;margin-top:14px;color:#f5f1e8;font-size:11px;text-align:right;text-underline-offset:4px}
.mobile-story-card small{font-size:9px;color:#d7d3ca}
.story-actions,.stories-note{display:none!important}
.project-gallery{position:relative!important;inset:auto!important;display:block;height:auto}
.project{position:relative!important;inset:auto!important;left:auto!important;top:auto!important;width:auto!important;height:auto!important;transform:none!important;visibility:visible!important;margin:0 0 16px;padding:0 6vw 24px;border-bottom:1px solid rgba(255,255,255,.18)}
.project-image{height:auto;aspect-ratio:4/3}
.project-copy{padding:16px}
.project-copy>span{color:#c8b69f}
.project-actions,#project-back{display:none!important}
}
/* mobile-background-longpress-lock-2026-09-20 */
@media(max-width:700px){
/* Keep the existing visual/background behavior, but prevent iOS image long-press actions. */
#environment-image{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;pointer-events:none}
}
/* mobile-navigation-rebuilt-2026-09-20 */
@media(max-width:700px){
/* Opening: no bar, only the discreet motion control. */
body:not(.has-navigation) .controls{display:flex;position:fixed;top:calc(18px + env(safe-area-inset-top));right:5vw;left:auto;bottom:auto;width:auto;height:auto;min-height:0;padding:0;margin:0;align-items:center;justify-content:flex-end;background:transparent;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;overflow:visible;z-index:5000;opacity:1;visibility:visible;transition:opacity .45s ease,transform .45s ease}
body:not(.has-navigation) .controls [data-stop]{display:none}
body:not(.has-navigation) #motion{position:relative;inset:auto;display:flex;align-items:center;gap:9px;width:auto;height:auto;padding:8px 0;border:0;border-radius:0;background:transparent;color:#f5f1e8;font-size:0;opacity:.82}
body:not(.has-navigation) #motion:before{content:'Movimento';font:500 8px/1 Arial,Helvetica,sans-serif;letter-spacing:.16em;text-transform:uppercase;opacity:.62}
body:not(.has-navigation) #motion:after{content:'⏻';font:400 22px/1 Arial,Helvetica,sans-serif;opacity:.95}
body:not(.has-navigation).intro-motion-fade .controls{opacity:0;transform:translateY(-6px);pointer-events:none}
/* Perfil onward: one fixed menu, always above the scene. */
body.has-navigation .controls{display:flex;position:fixed;top:0;right:0;bottom:auto;left:0;width:100%;min-height:58px;box-sizing:border-box;padding:calc(9px + env(safe-area-inset-top)) 10px 9px 10px;margin:0;gap:0;align-items:center;justify-content:space-between;overflow:visible;background:rgba(12,14,12,.84);border:0;border-bottom:1px solid rgba(255,255,255,.12);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#f5f1e8;opacity:1;visibility:visible;pointer-events:auto;z-index:5000;animation:mobileNavEnter .5s cubic-bezier(.22,1,.36,1) both}
body.has-navigation .controls [data-stop]{display:flex;position:relative;flex:1 1 0;min-width:0;align-items:center;justify-content:center;padding:10px 1px 9px;border:0;background:transparent;font:500 11.5px/1 Arial,Helvetica,sans-serif;letter-spacing:-.015em;white-space:nowrap;color:rgba(250,247,240,.78);opacity:1;visibility:visible;pointer-events:auto}
body.has-navigation .controls [data-stop][aria-current=true]{color:#fff;font-weight:700;box-shadow:none}
body.has-navigation .controls [data-stop][aria-current=true]:after{content:'';position:absolute;left:10%;right:10%;bottom:3px;height:2px;border-radius:2px;background:var(--signal)}
body.has-navigation #motion{display:none!important}
body.has-navigation #motion:before,body.has-navigation #motion:after{content:none!important}
@keyframes mobileNavEnter{
    from{opacity:0;transform:translateY(-8px)}
    to{opacity:1;transform:translateY(0)}
  }
}
/* mobile-feed-surface-cleanup-2026-09-20 */
@media(max-width:700px){
/* Keep content surfaces transparent; chapter backgrounds are controlled separately. */
#experience-chapter{box-shadow:none!important}
.project-copy{background:transparent!important;background-image:none!important;box-shadow:none!important}
#experience-chapter:before,#experience-chapter:after,#projects-chapter:before,#projects-chapter:after{background:none!important}
}
/* profile-experience-texture-morph-2026-09-20 */
.profile-experience-morph{position:fixed;inset:0;z-index:24;overflow:hidden;visibility:hidden;opacity:0;pointer-events:none;background:transparent}
/* single-real-background-2026-09-21 */
@media(max-width:700px){
/* Perfil → Experiências → Matérias: no synthetic/upper background layers.
     Keep only the real base environment behind the content. */
.gallery-environment,.grade{display:none!important;visibility:hidden!important;opacity:0!important;background:none!important}
#experience-chapter{background:transparent!important;background-image:none!important}
#experience-chapter::before,#experience-chapter::after{content:none!important;display:none!important;background:none!important}
}
/* mobile-wave-handoff-reset-2026-09-21 — step 3: onda 3 carries Experiências */
.mobile-wave-transition{display:none}
@media(max-width:700px){
.desktop-experience-bg{display:none!important}
html.mobile-menu-navigation,html.mobile-menu-navigation body{height:100%;overflow:hidden!important;overscroll-behavior:none}
.profile-experience-morph{display:block!important;position:fixed!important;inset:0!important;z-index:240!important;overflow:hidden!important;pointer-events:none!important;background:transparent!important}
.profile-experience-morph>.morph-profile,.profile-experience-morph>.morph-experience{display:none!important}
.profile-experience-morph>.mobile-wave-transition{display:block!important;position:absolute!important;inset:0!important;overflow:hidden!important}
.mobile-wave-1,.mobile-wave-2{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;will-change:transform}
.mobile-wave-1{z-index:1}
.mobile-wave-2{z-index:2}
.mobile-final-reveal{position:absolute;inset:0;z-index:3;overflow:hidden;will-change:transform}
.mobile-wave-3{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;z-index:2;will-change:transform}
.mobile-experience-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:1;display:block;will-change:clip-path;clip-path:inset(100% 0 0 0);-webkit-clip-path:inset(100% 0 0 0)}
/* The background is already static before the section content is allowed to appear. */
#experience-chapter{z-index:260!important;opacity:0;filter:blur(.5px);transition:opacity .08s linear,filter .08s linear}
body.mobile-experience-ready #experience-chapter{opacity:1!important;filter:blur(0)}
}
/* mobile-intro-profile-authoritative-2026-09-22 */
@media(max-width:700px){
/* Início */
.title{top:32vh;left:6vw;width:88vw;text-align:left}
.title h1{font-size:clamp(52px,16vw,72px);line-height:.9;letter-spacing:-.065em;margin:0 0 22px;white-space:normal}
.title .enter{text-align:left}
.enter{font-size:12px;letter-spacing:.28em;padding:10px 0}
/* Formação */
.education{top:18vh;left:6vw;width:88vw;padding:0;text-align:left}
.education::before{content:'';position:absolute;z-index:-1;top:-3vh;bottom:-3vh;left:-6vw;right:-6vw;background:linear-gradient(
      180deg,
      rgba(8,14,11,.18) 0%,
      rgba(8,14,11,.24) 24%,
      rgba(8,14,11,.52) 42%,
      rgba(8,14,11,.74) 56%,
      rgba(8,14,11,.78) 72%,
      rgba(8,14,11,.62) 86%,
      rgba(8,14,11,.22) 100%
    );filter:blur(14px);transform:scale(1.03);pointer-events:none}
.education .eyebrow{font-size:9px}
.education h2{font-size:clamp(34px,10vw,44px);line-height:.92;margin:10px 0 15px}
.education p{max-width:84vw;font-size:12.5px;line-height:1.5;margin-bottom:10px}
/* Perfil profissional — single mobile source of truth */
.bio{top:57vh;left:6vw;width:88vw;max-height:none!important;overflow:visible!important;padding:0 0 .5vh;color:#f5f1e8;text-align:left;background:none;border:0;box-shadow:none;backdrop-filter:none}
/* Local contrast support for Perfil: full width, limited vertically,
     with soft fades so the photograph remains visible below the copy. */
.bio::before{content:'';position:absolute;z-index:-1;top:0;height:48vh;left:-6vw;right:-6vw;background:linear-gradient(
      180deg,
      transparent 0,
      rgba(8,14,11,.42) 12%,
      rgba(8,14,11,.68) 34%,
      rgba(8,14,11,.72) 66%,
      rgba(8,14,11,.44) 86%,
      transparent 100%
    );pointer-events:none}
.portrait{top:57vh;left:6vw;width:58px;height:58px;z-index:15;transform:translateY(0);overflow:hidden;margin:0;border-radius:50%;box-shadow:none}
.portrait img{width:100%;height:100%;display:block;object-fit:cover;object-position:50% 34%;filter:none}
.portrait:after{display:none}
.bio h2{margin:0 0 7px 72px;min-height:58px;padding-top:1px;max-width:none;font-size:clamp(21px,6.2vw,27px);line-height:.94;letter-spacing:-.045em;font-weight:800}
.bio h2:after{content:'';display:block;background:var(--signal);margin-top:6px;width:28px;height:2px}
.bio>p,.bio details p{font-size:12.3px;line-height:1.34;margin:0 0 4px;width:88vw;max-width:88vw;color:#f7f4ed;font-weight:500;text-align:left;hyphens:auto;-webkit-hyphens:auto;text-wrap:pretty;text-shadow:0 1px 2px rgba(0,0,0,.32)}
.bio details{display:block!important;margin:6px 0 0!important;width:88vw;max-width:88vw}
.bio details>summary{display:list-item!important;width:max-content;max-width:100%;margin:7px 0 0;color:#f7f4ed;font-size:11.5px;line-height:1.3;font-weight:700;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.bio details>summary::marker{color:var(--signal)}
.bio details>p{margin-left:0;width:100%;max-width:100%;padding-top:7px}
}
/* mobile-stories-background-2026-09-21 — authoritative Matérias background */
@media(max-width:700px){
#stories-chapter{z-index:270!important;background:
      linear-gradient(180deg,rgba(7,10,9,.18),rgba(7,10,9,.34)),
      url('./assets/F9AB8743-B150-4CA4-87FE-BDB29EDB7010.png') center/cover no-repeat!important;background-image:
      linear-gradient(180deg,rgba(7,10,9,.18),rgba(7,10,9,.34)),
      url('./assets/F9AB8743-B150-4CA4-87FE-BDB29EDB7010.png')!important;background-position:center!important;background-size:cover!important;background-repeat:no-repeat!important}
}

@media(prefers-reduced-motion:reduce){.project-slideshow>[data-project-slide]{transition:none}}


/* mobile-projects-loop-layer-2026-09-22 */
.projects-mobile-loop{display:none}
@media(max-width:700px){
.projects-mobile-loop{
  display:block;
  position:absolute;
  inset:0;
  z-index:269;
  overflow:hidden;
  pointer-events:none;
  visibility:hidden;
  opacity:0;
  background:#090b0a;
  will-change:opacity;
}
.projects-mobile-loop img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
#projects-chapter{
  z-index:280!important;
  background:transparent!important;
  background-image:none!important;
}
#projects-chapter>.projects-heading,
#projects-chapter>.projects-lead,
#projects-chapter>.project-gallery{
  position:relative;
  z-index:1;
}
.static .projects-mobile-loop{display:none!important}
.static #projects-chapter{
  background:radial-gradient(circle at 75% 30%,#293027 0%,#141714 38%,#090b0a 85%)!important;
  color:#f5f1e8!important;
}
}

/* projects-single-image-2026-09-23: one visual, no CTA, editorial text shadow */
.project{cursor:default}
.project-copy{isolation:isolate;color:#f5f1e8;text-shadow:0 2px 12px rgba(0,0,0,.78)}
.project-copy::before{content:'';position:absolute;z-index:-1;pointer-events:none;inset:-22px -34px -28px -34px;background:radial-gradient(ellipse at 38% 45%,rgba(0,0,0,.78) 0%,rgba(0,0,0,.62) 38%,rgba(0,0,0,.30) 64%,transparent 82%);filter:blur(10px)}
.project-copy p{color:#f1eee8!important}
.project-copy small{display:none!important}
.project-image>img{width:100%;height:100%;object-fit:cover;object-position:left top;display:block}
@media(max-width:700px){.project-copy{padding:16px 10px}.project-copy::before{inset:-18px -20px -24px -20px;background:radial-gradient(ellipse at 38% 45%,rgba(0,0,0,.84) 0%,rgba(0,0,0,.64) 42%,rgba(0,0,0,.28) 68%,transparent 86%);filter:blur(9px)}}

/* projects-solid-copy-card-2026-09-23 */
.project-copy{background:rgba(8,10,9,.72)!important;background-image:none!important;box-shadow:none!important;text-shadow:none!important;padding:18px 18px 26px!important;margin-top:0}
.project-copy::before{content:none!important;display:none!important}
.project-copy p{color:#eeeae2!important}
@media(max-width:700px){.project-copy{padding:16px 16px 28px!important;margin-top:0!important}}




/* mobile-stories-projects-reveal-mask-2026-09-23
   The Projects background is revealed through a black-to-transparent mask during handoff. */
@media(max-width:700px){
  .projects-mobile-loop::after{
    content:'';
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    background:linear-gradient(180deg,
      #000 0%,
      rgba(0,0,0,.98) 12%,
      rgba(0,0,0,.88) 24%,
      rgba(0,0,0,.64) 36%,
      rgba(0,0,0,.34) 46%,
      rgba(0,0,0,.12) 54%,
      transparent 62%);
    opacity:var(--projects-handoff-mask,0);
    will-change:opacity;
  }
}


/* projects-type-tuning-2026-09-23 */
@media(max-width:700px){
  #projects-chapter .project-copy h3{font-size:clamp(24px,7vw,30px)!important}
  #projects-chapter .project-copy p{font-size:14px!important;line-height:1.46!important}
}

/* desktop-layout-adjustments-2026-09-23 */
@media(min-width:701px){
body>header{display:none!important}
.environment img{height:100vh;width:200vw;min-width:200vw;max-width:none;object-fit:cover;object-position:left center}

/* Perfil: local support behind Formação + continuous gradient across the full right half. */
.bio{isolation:isolate}
.bio::before{display:none!important}
.grade{
  position:fixed!important;
  inset:0!important;
  background:linear-gradient(
    90deg,
    rgba(8,10,9,0) 0%,
    rgba(8,10,9,0) 40%,
    rgba(8,10,9,.12) 45%,
    rgba(8,10,9,.38) 50%,
    rgba(8,10,9,.50) 56%,
    rgba(8,10,9,.62) 64%,
    rgba(8,10,9,.72) 72%,
    rgba(8,10,9,.80) 82%,
    rgba(8,10,9,.86) 92%,
    rgba(8,10,9,.90) 100%
  )!important;
  mix-blend-mode:normal!important;
  pointer-events:none
}

/* Slightly larger, more centered desktop profile composition. */
.education{left:6vw;top:17.5vh;width:34vw;padding:28px;isolation:isolate}
.education::before{
  content:'';
  position:absolute;
  z-index:-1;
  pointer-events:none;
  inset:-7vh -5vw -7vh -7vw;
  background:radial-gradient(
    ellipse at 58% 50%,
    rgba(5,10,8,.60) 0%,
    rgba(5,10,8,.38) 38%,
    rgba(5,10,8,.16) 60%,
    rgba(5,10,8,.04) 76%,
    rgba(5,10,8,0) 92%
  );
  filter:blur(18px)
}
.education h2{font-size:clamp(44px,4.8vw,70px)}
.education p{max-width:430px;font-size:16px;line-height:1.58}
.education p:first-of-type{font-size:11.5px}

.bio{left:48vw;top:21.5vh;width:44vw;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.96),0 1px 4px rgba(0,0,0,.88)}
.bio h2{
  font-size:clamp(34px,3.35vw,52px);
  margin-left:calc(clamp(86px,8.5vw,124px) + 24px);
  min-height:clamp(86px,8.5vw,124px);
  padding-top:5px;
  margin-bottom:22px
}
.bio p{font-size:clamp(15px,1.16vw,18px);line-height:1.58}
.portrait{left:48vw;top:21.5vh;width:clamp(86px,8.5vw,124px);height:clamp(86px,8.5vw,124px)}

body.has-navigation .controls{left:50%;right:auto;bottom:18px;width:max-content;max-width:calc(100vw - 48px);padding:7px 12px;gap:8px;transform:translateX(-50%);background:rgba(12,14,12,.84);border:1px solid rgba(255,255,255,.12);border-radius:16px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 10px 30px rgba(0,0,0,.18);color:#f5f1e8}
body.has-navigation .controls [data-stop]{visibility:visible;color:rgba(250,247,240,.78);padding:9px 10px}
body.has-navigation .controls [data-stop][aria-current=true]{color:#fff}
body.has-navigation #motion{color:#f5f1e8}
body:not(.has-navigation) #motion{display:flex;align-items:center;gap:8px}
body:not(.has-navigation) #motion::after{content:'⏻';font-size:18px;line-height:1}
body.has-navigation #motion{display:none!important}
}

/* desktop-profile-experience-waves-2026-09-23 */
@media(min-width:701px){
  .mobile-experience-bg{display:none!important}
  /* One background only for Experiências: fundo desktop exp.png.
     The same three-wave handoff used on mobile now drives Perfil → Experiências. */
  .gallery-environment{display:none!important}
  .profile-experience-morph{
    display:block!important;
    position:fixed!important;
    inset:0!important;
    z-index:18!important;
    overflow:hidden!important;
    pointer-events:none!important;
    background:transparent!important
  }
  .profile-experience-morph>.mobile-wave-transition{
    display:block!important;
    position:absolute!important;
    inset:0!important;
    overflow:hidden!important
  }
  .mobile-wave-1,.mobile-wave-2,.mobile-wave-3{
    position:absolute;
    inset:auto;
    left:50%;
    top:50%;
    width:100vh;
    height:100vw;
    max-width:none;
    object-fit:fill;
    object-position:center;
    transform-origin:center;
    will-change:transform;
    backface-visibility:hidden
  }
  .mobile-wave-1,.mobile-wave-2{
    transform:translate3d(calc(-50% + var(--wave-x,0px)),-50%,0) rotate(-90deg)
  }
  .mobile-wave-3{
    transform:translate3d(calc(-50% + var(--wave-x,0px)),-50%,0) rotate(90deg) scaleY(-1)
  }
  .mobile-wave-1{z-index:1}
  .mobile-wave-2{z-index:2}
  .mobile-final-reveal{
    position:absolute;
    inset:0;
    z-index:3;
    overflow:hidden;
    will-change:transform
  }
  .mobile-wave-3{z-index:2}
  .desktop-experience-bg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center;
    z-index:1;
    will-change:clip-path;
    clip-path:inset(100% 0 0 0);
    -webkit-clip-path:inset(100% 0 0 0)
  }
  #experience-chapter{
    z-index:20!important;
    background:transparent!important;
    background-image:none!important
  }
  #experience-chapter::before,#experience-chapter::after{
    content:none!important;
    display:none!important;
    background:none!important
  }
}

/* desktop-stories-background-2026-09-23 */
@media(min-width:701px){
  #stories-chapter{
    background:
      linear-gradient(
        90deg,
        rgba(3,5,4,.90) 0%,
        rgba(3,5,4,.78) 12%,
        rgba(3,5,4,.58) 25%,
        rgba(3,5,4,.32) 39%,
        rgba(3,5,4,.12) 52%,
        rgba(3,5,4,0) 66%
      ),
      url('./assets/fundo desk mat.png') center/cover no-repeat!important;
    background-image:
      linear-gradient(
        90deg,
        rgba(3,5,4,.90) 0%,
        rgba(3,5,4,.78) 12%,
        rgba(3,5,4,.58) 25%,
        rgba(3,5,4,.32) 39%,
        rgba(3,5,4,.12) 52%,
        rgba(3,5,4,0) 66%
      ),
      url('./assets/fundo desk mat.png')!important;
    background-position:center,center!important;
    background-size:100% 100%,cover!important;
    background-repeat:no-repeat,no-repeat!important
  }
  #stories-chapter::before,#stories-chapter::after{
    content:none!important;
    display:none!important;
    background:none!important
  }
  .static #stories-chapter{
    background:
      linear-gradient(90deg,rgba(3,5,4,.90) 0%,rgba(3,5,4,.58) 25%,rgba(3,5,4,.12) 52%,rgba(3,5,4,0) 66%),
      url('./assets/fundo desk mat.png') center/cover no-repeat!important
  }
}

/* desktop-experience-horizontal-feed-2026-09-23 */
@media(min-width:701px){
  body:not(.static){overflow:hidden}

  #experience-chapter{
    color:#f5f1e8!important;
    overflow:hidden!important
  }
  #experience-title{
    left:7vw;
    top:9.5vh;
    font-size:clamp(28px,2.55vw,38px);
    line-height:.95;
    letter-spacing:-.045em;
    color:#f5f1e8;
    text-shadow:0 3px 18px rgba(0,0,0,.28)
  }

  /* Native horizontal feed: only this rail moves; section changes remain menu-driven. */
  .experience-track{
    position:absolute!important;
    top:20vh!important;
    right:0!important;
    bottom:4vh!important;
    left:0!important;
    display:flex!important;
    align-items:flex-start;
    gap:clamp(24px,2.4vw,40px);
    padding:0 7vw 2vh;
    box-sizing:border-box;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    overscroll-behavior-x:contain;
    scroll-behavior:auto;
    scroll-snap-type:none;
    scrollbar-width:none;
    -ms-overflow-style:none;
    pointer-events:auto!important;
    touch-action:pan-x;
    cursor:grab
  }
  .experience-track::-webkit-scrollbar{display:none}
  .experience-track.is-dragging{
    cursor:grabbing;
    scroll-behavior:auto;
    user-select:none
  }

  .experience-station{
    position:relative!important;
    inset:auto!important;
    flex:0 0 clamp(430px,34vw,540px);
    width:auto!important;
    height:auto!important;
    min-height:0;
    perspective:none;
    pointer-events:auto;
    will-change:auto;
    transform:none!important;
    scroll-snap-align:none
  }

  /* Fine-tuned widths by experience. Repeated selectors also cover loop clones. */
  .experience-station:nth-child(5n+1){flex-basis:clamp(470px,37vw,590px)}
  .experience-station:nth-child(5n+2){flex-basis:clamp(520px,41vw,650px)}
  .experience-station:nth-child(5n+3){flex-basis:clamp(470px,37vw,590px)}
  .experience-station:nth-child(5n+4){flex-basis:clamp(610px,48vw,740px)}
  .experience-station:nth-child(5n+5){flex-basis:clamp(580px,46vw,700px)}

  .experience-copy{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:auto!important;
    max-height:none!important;
    box-sizing:border-box;
    overflow:visible!important;
    padding:22px 24px!important;
    background:linear-gradient(135deg,rgba(7,10,8,.88),rgba(9,13,10,.74))!important;
    box-shadow:0 18px 46px rgba(0,0,0,.28)!important;
    color:#f5f1e8!important;
    border:1px solid rgba(255,255,255,.08);
    border-radius:2px;
    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px)
  }
  .experience-copy>.eyebrow{
    color:#c8b69f;
    font-size:10px;
    letter-spacing:.13em;
    text-transform:uppercase
  }
  .experience-copy h3{
    max-width:none;
    margin:8px 0 12px;
    font-size:clamp(27px,2.55vw,40px);
    line-height:.97;
    letter-spacing:-.045em
  }
  .employer{
    margin:0 0 14px;
    padding-top:10px;
    border-top:1px solid rgba(255,255,255,.22);
    color:#f5f1e8;
    font-size:14px;
    line-height:1.35
  }
  .employer span{color:#d7d3ca;font-size:11px}
  .employer:after{display:none}
  .experience-body{
    max-height:none!important;
    height:auto!important;
    overflow:visible!important;
    overscroll-behavior:auto;
    padding:0!important;
    color:#ebe6dc;
    font-size:clamp(11.5px,.88vw,13.5px);
    line-height:1.43
  }
  .experience-body p{margin:0 0 9px}
  .experience-actions{display:none!important}
}


/* desktop-stories-projects-horizontal-feeds-2026-09-23 */
@media(min-width:701px){
  /* MATÉRIAS */
  #stories-chapter{
    color:#f5f1e8!important;
    overflow:hidden!important
  }
  .stories-intro{
    position:absolute!important;
    left:7vw!important;
    top:9.5vh!important;
    margin:0!important;
    padding:0!important;
    color:#f5f1e8!important;
    transform:none!important
  }
  .stories-intro h2{
    margin:0!important;
    font-size:clamp(28px,2.55vw,38px)!important;
    line-height:.95!important;
    letter-spacing:-.045em!important;
    color:#f5f1e8!important;
    text-shadow:0 3px 18px rgba(0,0,0,.28)
  }
  .stories-intro p{
    margin:9px 0 0!important;
    font-size:10px!important;
    letter-spacing:.13em!important;
    text-transform:uppercase;
    color:#d7d3ca!important
  }
  #stories-chapter>.editorial-gallery,
  #stories-chapter>.story-actions,
  #stories-chapter>.stories-note{
    display:none!important
  }
  .desktop-story-feed{
    position:absolute;
    top:20vh;
    right:0;
    bottom:4vh;
    left:0;
    display:flex;
    align-items:flex-start;
    gap:clamp(24px,2.4vw,40px);
    padding:0 7vw 2vh;
    box-sizing:border-box;
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    -ms-overflow-style:none;
    touch-action:pan-x;
    cursor:grab
  }
  .desktop-story-feed::-webkit-scrollbar{display:none}
  .desktop-story-feed.is-dragging{cursor:grabbing;user-select:none}
  .desktop-story-card{
    flex:0 0 clamp(420px,34vw,540px);
    display:flex;
    flex-direction:column;
    min-width:0;
    color:#f5f1e8;
    text-decoration:none;
    background:linear-gradient(135deg,rgba(4,6,5,.92),rgba(8,11,9,.80));
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 18px 46px rgba(0,0,0,.28);
    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px)
  }
  .desktop-story-media{
    width:100%;
    aspect-ratio:16/9;
    overflow:hidden;
    background:#171a17
  }
  .desktop-story-media>a{display:block;width:100%;height:100%}
  .desktop-story-media img,
  .desktop-story-media iframe{
    display:block;
    width:100%;
    height:100%;
    border:0;
    object-fit:cover;
    background:#0b0d0b
  }
  .desktop-story-copy{
    display:flex;
    flex-direction:column;
    padding:18px 20px 20px
  }
  .desktop-story-category{
    font-size:9px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:#c8b69f
  }
  .desktop-story-copy h3{
    margin:9px 0 11px;
    font-size:clamp(22px,2vw,30px);
    line-height:1.02;
    letter-spacing:-.035em
  }
  .desktop-story-summary{
    margin:0 0 12px;
    font-size:12.5px;
    line-height:1.45;
    color:#ebe6dc
  }
  .desktop-story-copy small{
    font-size:9px;
    color:#d7d3ca
  }
  .desktop-story-link{
    display:inline-block;
    align-self:flex-end;
    margin-top:13px;
    color:#f5f1e8;
    font-size:11px;
    text-align:right;
    text-underline-offset:4px
  }

  /* PROJETOS */
  #projects-chapter{
    color:#f5f1e8!important;
    overflow:hidden!important;
    background:url('./assets/loop_infinito.gif') center/cover no-repeat!important
  }
  .projects-heading{
    position:absolute!important;
    left:7vw!important;
    top:9.5vh!important;
    margin:0!important;
    font-size:clamp(28px,2.55vw,38px)!important;
    line-height:.95!important;
    letter-spacing:-.045em!important;
    color:#f5f1e8!important;
    text-shadow:0 3px 18px rgba(0,0,0,.28)
  }
  .projects-lead{
    position:absolute!important;
    left:7vw!important;
    top:15vh!important;
    width:min(62vw,820px)!important;
    max-width:none!important;
    margin:0!important;
    font-size:12px!important;
    line-height:1.45!important;
    color:#d7d3ca!important
  }
  .project-gallery{
    position:absolute!important;
    top:25vh!important;
    right:0!important;
    bottom:4vh!important;
    left:0!important;
    display:flex!important;
    align-items:flex-start;
    gap:clamp(24px,2.4vw,40px);
    padding:0 7vw 2vh;
    box-sizing:border-box;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    -ms-overflow-style:none;
    perspective:none!important;
    transform-style:flat!important;
    touch-action:pan-x;
    cursor:grab
  }
  .project-gallery::-webkit-scrollbar{display:none}
  .project-gallery.is-dragging{cursor:grabbing;user-select:none}
  .project{
    position:relative!important;
    inset:auto!important;
    flex:0 0 clamp(390px,31vw,500px);
    width:auto!important;
    height:auto!important;
    min-height:0!important;
    display:flex!important;
    flex-direction:column;
    visibility:visible!important;
    transform:none!important;
    transition:none!important;
    color:#f5f1e8!important;
    background:linear-gradient(135deg,rgba(5,7,6,.91),rgba(9,12,10,.79));
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 18px 46px rgba(0,0,0,.30);
    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px)
  }
  .project-image{
    width:100%;
    height:auto!important;
    aspect-ratio:16/9;
    flex:none!important;
    background:#171a17!important
  }
  .project-copy{
    padding:18px 20px 20px!important
  }
  .project-copy>span{
    color:#c8b69f!important;
    font-size:9px!important;
    letter-spacing:.13em!important
  }
  .project-copy h3{
    margin:8px 0 10px!important;
    font-size:clamp(24px,2.2vw,32px)!important;
    line-height:1!important;
    color:#f5f1e8!important
  }
  .project-copy p{
    max-width:none!important;
    margin:0!important;
    font-size:12.5px!important;
    line-height:1.45!important;
    color:#ebe6dc!important
  }
  .project-actions,#project-back{display:none!important}
}


/* desktop-stories-projects-detail-pass-2026-09-23 */
@media(min-width:701px){
  .stories-meta-mobile{display:none!important}
  .stories-meta-desktop{display:block!important}

  .stories-intro{top:8.2vh!important}
  .desktop-story-feed{
    top:18vh!important;
    bottom:8vh!important;
    gap:clamp(20px,2vw,32px)!important
  }
  .desktop-story-card{
    flex-basis:clamp(360px,29vw,460px)!important
  }
  .desktop-story-copy{padding:15px 17px 17px!important}
  .desktop-story-copy h3{
    margin:8px 0 9px!important;
    font-size:clamp(20px,1.75vw,27px)!important
  }
  .desktop-story-summary{
    margin-bottom:10px!important;
    font-size:11.8px!important;
    line-height:1.42!important
  }
  .desktop-story-link{margin-top:11px!important}

  #projects-chapter{
    background:
      linear-gradient(
        90deg,
        rgba(2,4,3,.90) 0%,
        rgba(2,4,3,.76) 13%,
        rgba(2,4,3,.54) 27%,
        rgba(2,4,3,.30) 41%,
        rgba(2,4,3,.11) 54%,
        rgba(2,4,3,0) 68%
      ),
      url('./assets/loop_infinito.gif') center/cover no-repeat!important;
    background-image:
      linear-gradient(
        90deg,
        rgba(2,4,3,.90) 0%,
        rgba(2,4,3,.76) 13%,
        rgba(2,4,3,.54) 27%,
        rgba(2,4,3,.30) 41%,
        rgba(2,4,3,.11) 54%,
        rgba(2,4,3,0) 68%
      ),
      url('./assets/loop_infinito.gif')!important;
    background-position:center,center!important;
    background-size:100% 100%,cover!important;
    background-repeat:no-repeat,no-repeat!important
  }
  .projects-heading{top:8.4vh!important}
  .projects-lead{display:none!important}
  .project-gallery{
    top:18vh!important;
    bottom:8vh!important;
    gap:clamp(20px,2vw,32px)!important
  }
  .project{
    flex-basis:clamp(350px,28vw,440px)!important
  }
  .project-copy{padding:14px 16px 16px!important}
  .project-copy h3{
    margin:7px 0 8px!important;
    font-size:clamp(21px,1.95vw,28px)!important
  }
  .project-copy p{
    font-size:11.6px!important;
    line-height:1.4!important
  }
}
@media(max-width:700px){
  .stories-meta-desktop{display:none!important}
}


/* stories-projects-contact-pass-2026-09-23 */
@media(min-width:701px){
  /* Matérias: cleaner heading and more vertical clearance from the bottom menu. */
  .stories-intro{top:6.8vh!important}
  .stories-meta-mobile,.stories-meta-desktop{display:none!important}
  .desktop-story-feed{
    top:15.5vh!important;
    bottom:12vh!important
  }

  /* Zoom and shift the Projects background so the lower-right star sits farther right. */
  #projects-chapter{
    background-size:100% 100%,122% 122%!important;
    background-position:center,calc(50% + 7vw) center!important
  }

  /* Contatos */
  #contact-chapter{
    color:#f5f1e8;
    overflow:hidden;
    background:
      linear-gradient(115deg,rgba(6,10,8,.98),rgba(11,18,14,.94) 52%,rgba(17,27,21,.98));
  }
  .contact-inner{
    position:absolute;
    inset:9vh 7vw 12vh;
    display:flex;
    flex-direction:column;
    justify-content:flex-start
  }
  #contact-title{
    margin:0 0 8vh;
    font-size:clamp(34px,4vw,58px);
    line-height:.92;
    letter-spacing:-.055em;
    color:#f5f1e8
  }
  .contact-links{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1px;
    max-width:980px;
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.14)
  }
  .contact-links a{
    min-height:132px;
    box-sizing:border-box;
    padding:24px 26px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:24px;
    color:#f5f1e8;
    text-decoration:none;
    background:rgba(7,11,9,.88);
    transition:background .25s ease,transform .25s ease
  }
  .contact-links a:hover{
    background:rgba(20,29,24,.94);
    transform:translateY(-2px)
  }
  .contact-links span{
    font-size:9px;
    letter-spacing:.15em;
    text-transform:uppercase;
    color:#c8b69f
  }
  .contact-links strong{
    font-size:clamp(18px,1.7vw,26px);
    line-height:1.05;
    font-weight:600;
    overflow-wrap:anywhere
  }
}
@media(max-width:700px){
  #contact-chapter{
    color:#f5f1e8;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    background:linear-gradient(160deg,#080c0a,#101912 58%,#0b100d);
    padding:calc(92px + env(safe-area-inset-top)) 6vw 44px
  }
  .contact-inner{
    position:relative;
    inset:auto
  }
  #contact-title{
    margin:0 0 34px;
    font-size:clamp(38px,11vw,50px);
    line-height:.9;
    letter-spacing:-.055em;
    color:#f5f1e8
  }
  .contact-links{
    display:flex;
    flex-direction:column;
    border-top:1px solid rgba(255,255,255,.18)
  }
  .contact-links a{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:22px;
    padding:22px 0;
    color:#f5f1e8;
    text-decoration:none;
    border-bottom:1px solid rgba(255,255,255,.18)
  }
  .contact-links span{
    flex:0 0 auto;
    font-size:9px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:#c8b69f
  }
  .contact-links strong{
    min-width:0;
    text-align:right;
    font-size:clamp(16px,4.8vw,21px);
    line-height:1.12;
    font-weight:600;
    overflow-wrap:anywhere
  }
}
.static #contact-chapter{
  position:relative!important;
  transform:none!important;
  min-height:100vh
}


/* about-contact-layout-2026-09-23 */
@media(min-width:701px){
  #contact-chapter{
    overflow:hidden!important;
    color:#f5f1e8;
    background:linear-gradient(115deg,rgba(6,10,8,.99),rgba(11,18,14,.96) 54%,rgba(17,27,21,.99))!important
  }
  #contact-chapter .contact-inner{
    position:absolute!important;
    inset:6.5vh 7vw 10.5vh!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important
  }
  .about-contact{
    min-height:0
  }
  #contact-title{
    margin:0 0 3.6vh!important;
    font-size:clamp(30px,3vw,44px)!important;
    line-height:.95!important;
    letter-spacing:-.05em!important;
    color:#f5f1e8!important
  }
  .about-copy{
    column-count:2;
    column-gap:5vw;
    column-fill:balance;
    max-width:1120px;
    font-size:clamp(12px,.93vw,14px);
    line-height:1.52;
    color:#ebe6dc
  }
  .about-copy p{
    margin:0 0 12px;
    break-inside:avoid
  }
  .contact-compact{
    margin-top:auto;
    padding-top:2.4vh;
    border-top:1px solid rgba(255,255,255,.16)
  }
  .contact-compact h3{
    margin:0 0 14px;
    font-size:9px;
    line-height:1;
    letter-spacing:.18em;
    font-weight:600;
    color:#c8b69f
  }
  .contact-icon-links{
    display:flex;
    align-items:center;
    gap:22px
  }
  .contact-icon-links a{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:#f5f1e8;
    text-decoration:none;
    font-size:10px;
    letter-spacing:.03em;
    opacity:.82;
    transition:opacity .2s ease,transform .2s ease
  }
  .contact-icon-links a:hover{
    opacity:1;
    transform:translateY(-1px)
  }
  .contact-icon-links svg{
    width:19px;
    height:19px;
    flex:0 0 19px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round
  }
}

@media(max-width:700px){
  #contact-chapter{
    overflow-y:auto!important;
    overflow-x:hidden!important;
    color:#f5f1e8;
    background:linear-gradient(160deg,#080c0a,#101912 58%,#0b100d)!important;
    padding:calc(92px + env(safe-area-inset-top)) 6vw 48px!important
  }
  #contact-chapter .contact-inner{
    position:relative!important;
    inset:auto!important;
    display:block!important
  }
  #contact-title{
    margin:0 0 28px!important;
    font-size:clamp(38px,11vw,50px)!important;
    line-height:.9!important;
    letter-spacing:-.055em!important;
    color:#f5f1e8!important
  }
  .about-copy{
    font-size:13px;
    line-height:1.58;
    color:#ebe6dc
  }
  .about-copy p{
    margin:0 0 17px
  }
  .contact-compact{
    margin-top:38px;
    padding-top:22px;
    border-top:1px solid rgba(255,255,255,.18)
  }
  .contact-compact h3{
    margin:0 0 18px;
    font-size:9px;
    letter-spacing:.18em;
    color:#c8b69f
  }
  .contact-icon-links{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px
  }
  .contact-icon-links a{
    min-height:54px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:0 2px;
    color:#f5f1e8;
    text-decoration:none;
    font-size:11px;
    border-bottom:1px solid rgba(255,255,255,.12)
  }
  .contact-icon-links svg{
    width:20px;
    height:20px;
    flex:0 0 20px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round
  }
}


/* contact-background-mobile-repair-nav-2026-09-23 */
@media(min-width:701px){
  /* About: use the left/brutalist wall from the opening panorama, darkened. */
  #contact-chapter{
    background:
      linear-gradient(90deg,rgba(19,13,9,.78),rgba(16,12,9,.68) 42%,rgba(8,9,8,.82)),
      linear-gradient(rgba(5,6,5,.36),rgba(5,6,5,.48)),
      url('./assets/joao peossoa.webp') center / cover no-repeat!important
  }
  #contact-chapter .contact-inner{
    inset:8vh 7vw 8.5vh!important
  }
  #contact-title{
    margin-bottom:3.8vh!important
  }
  .about-copy{
    max-width:1180px!important;
    font-size:clamp(13px,1.02vw,15.5px)!important;
    line-height:1.5!important;
    column-gap:4.5vw!important
  }
  .about-copy p{
    margin-bottom:13px!important
  }
  .contact-compact{
    width:max-content;
    max-width:100%;
    margin:2.8vh auto 0!important;
    padding-top:1.8vh!important;
    text-align:center
  }
  .contact-compact h3{
    margin-bottom:16px!important;
    font-size:11px!important
  }
  .contact-icon-links{
    justify-content:center!important;
    gap:clamp(24px,2.6vw,40px)!important
  }
  .contact-icon-links a{
    font-size:12px!important;
    gap:10px!important;
    opacity:.92!important
  }
  .contact-icon-links svg{
    width:24px!important;
    height:24px!important;
    flex-basis:24px!important
  }
}

@media(max-width:700px){
  /* Projects: restore the animated background as a viewport layer. */
  .projects-mobile-loop{
    position:fixed!important;
    inset:0!important;
    width:100vw!important;
    height:100dvh!important;
    z-index:269!important
  }
  .projects-mobile-loop img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center!important
  }
  #projects-chapter{
    z-index:280!important
  }

  /* Contatos must sit above Projects and its background layer. */
  #contact-chapter{
    z-index:300!important;
    min-height:100dvh;
    padding:calc(88px + env(safe-area-inset-top)) 6vw calc(104px + env(safe-area-inset-bottom))!important;
    background:
      linear-gradient(rgba(10,7,5,.72),rgba(7,7,6,.80)),
      url('./assets/joao peossoa.webp') center / cover no-repeat!important
  }

  /* Navigation: desktop-like compact pill at the bottom. */
  body.has-navigation .controls{
    display:flex!important;
    position:fixed!important;
    top:auto!important;
    right:auto!important;
    bottom:calc(12px + env(safe-area-inset-bottom))!important;
    left:50%!important;
    width:max-content!important;
    max-width:calc(100vw - 24px)!important;
    min-height:0!important;
    height:auto!important;
    box-sizing:border-box!important;
    padding:7px 9px!important;
    margin:0!important;
    gap:4px!important;
    align-items:center!important;
    justify-content:flex-start!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    transform:translateX(-50%)!important;
    background:rgba(12,14,12,.88)!important;
    border:1px solid rgba(255,255,255,.12)!important;
    border-radius:16px!important;
    backdrop-filter:blur(14px)!important;
    -webkit-backdrop-filter:blur(14px)!important;
    color:#f5f1e8!important;
    z-index:5000!important;
    animation:none!important
  }
  body.has-navigation .controls::-webkit-scrollbar{display:none}
  body.has-navigation .controls [data-stop]{
    flex:0 0 auto!important;
    min-width:auto!important;
    padding:9px 8px!important;
    font:500 10px/1 Arial,Helvetica,sans-serif!important;
    letter-spacing:-.01em!important;
    white-space:nowrap!important;
    color:rgba(250,247,240,.78)!important
  }
  body.has-navigation .controls [data-stop][aria-current=true]{
    color:#fff!important;
    font-weight:700!important
  }
  body.has-navigation .controls [data-stop][aria-current=true]:after{
    left:8px!important;
    right:8px!important;
    bottom:3px!important
  }
  body.has-navigation #motion{display:none!important}

  /* Reserve space for the bottom menu in scrollable chapters. */
  #experience-chapter,
  #stories-chapter,
  #projects-chapter{
    padding-bottom:calc(104px + env(safe-area-inset-bottom))!important
  }

  /* About + contacts on mobile: readable and definitely visible above the menu. */
  #contact-title{
    margin-top:8px!important
  }
  .contact-compact{
    margin-top:34px!important;
    padding-top:22px!important
  }
  .contact-icon-links{
    gap:14px!important
  }
  .contact-icon-links a{
    min-height:58px!important;
    font-size:12px!important
  }
  .contact-icon-links svg{
    width:22px!important;
    height:22px!important;
    flex-basis:22px!important
  }
}


/* mobile-top-desktop-like-nav-2026-09-23 */
@media(max-width:700px){
  body.has-navigation .controls{
    top:calc(10px + env(safe-area-inset-top))!important;
    bottom:auto!important
  }

  /* The compact menu is now above the content, so restore normal bottom breathing room. */
  #experience-chapter,
  #stories-chapter,
  #projects-chapter{
    padding-bottom:32px!important
  }
  #contact-chapter{
    padding-bottom:48px!important
  }
}


/* motion-control-hidden-2026-09-23 */
#motion{display:none!important}

/* Oylut symbols integrated into the final section */
.contact-symbols{display:block;width:clamp(120px,14vw,220px);height:auto;margin:0 0 18px;pointer-events:none;user-select:none}
@media(max-width:700px){.contact-symbols{width:132px;margin-bottom:14px}}

/* contact-spacing-fix-2026-09-28 */
@media(min-width:701px){
  /* Lift the entire final section so the contact area clears the fixed menu. */
  #contact-chapter .contact-inner{
    inset:3vh 7vw 8.5vh!important
  }

  /* The Oylut symbols sit slightly above the rest of the block. */
  #contact-chapter .contact-symbols{
    transform:translateY(-6px);
    margin-bottom:10px
  }

  #contact-chapter #contact-title{
    margin-bottom:3vh!important
  }

  /* Keep contacts closer to the text and away from the navigation pill. */
  #contact-chapter .contact-compact{
    margin:1.4vh auto 0!important;
    padding-top:1.2vh!important
  }
}

@media(min-width:701px) and (max-height:760px){
  #contact-chapter .contact-inner{
    inset:2vh 7vw 8vh!important
  }

  #contact-chapter .contact-symbols{
    transform:translateY(-8px);
    margin-bottom:8px
  }

  #contact-chapter #contact-title{
    margin-bottom:2.4vh!important
  }

  #contact-chapter .contact-compact{
    margin:.8vh auto 0!important;
    padding-top:.8vh!important
  }
}