/* Rocknbake — Editorial Edition.
   Inspirada na serenidade tipográfica do Holistic, não uma reprodução do template.
   Fontes gratuitas via Google Fonts; fallback instalado no sistema para uso offline.
*/
:root {
 --paper: #F7F4EE;
 --white: #FCFAF5;
 --ink: #272D2D;
 --charcoal: #303A3C;
 --muted: #636A69;
 --line: #D9D7CE;
 --yellow: #C18663;
 --clay: #B97654;
 --slate: #758185;
 --cream: #F8F3E9;
 --font: 'DM Sans','Inter',Arial,sans-serif;
 --display: 'Instrument Serif','GFS Didot','Bodoni MT','Didot',Georgia,serif;
}
body{background:var(--paper);font-weight:400;letter-spacing:-.016em}
::selection{background:#E8BFA7;color:#263033}
.scroll-track span{background:var(--clay)}
.header{top:18px;left:3.2vw;right:3.2vw;border:1px solid rgba(39,45,45,.09);border-radius:100px;padding:9px 11px 9px 23px;background:rgba(251,249,245,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 12px 44px rgba(28,31,31,.09)}
.header.scrolled{top:10px;left:3.2vw;right:3.2vw;background:rgba(252,250,245,.96);padding:7px 10px 7px 23px;border:1px solid rgba(39,45,45,.11)}
.logo img{width:150px}.nav{gap:40px}.nav a{font-size:12px;font-weight:550;color:#373E3D}
.header-link{border-radius:99px;background:var(--clay);color:#fff;padding:14px 20px;min-height:45px;font-size:12px;font-weight:650}
.header-link:hover{background:#9D603F}
.eyebrow,.section-top,.small-label,.micro-heading{font-size:10px;letter-spacing:.135em;font-weight:650}
.hero{background:var(--slate);color:var(--cream);min-height:max(100svh,760px);padding:142px 5vw 54px}
.hero:before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 86% 25%,rgba(255,243,225,.12),transparent 42%),linear-gradient(115deg,rgba(38,49,50,.13),transparent 60%)}
.hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(350px,.85fr);gap:5vw;min-height:calc(100svh - 200px);max-width:1700px}
.hero-label{margin-bottom:49px;display:inline-flex;max-width:max-content;padding:11px 16px;border:1px solid rgba(255,252,243,.4);border-radius:40px;color:#F6F1E9;font-size:10px;font-weight:600;letter-spacing:.08em}
.live-dot{background:#E1B08F;border:0;width:7px;height:7px;box-shadow:0 0 0 4px rgba(220,173,146,.12)}
.hero-title{font-family:var(--display);font-size:clamp(7.3rem,10.5vw,13rem);font-weight:400;line-height:.89;letter-spacing:-.052em;word-spacing:0;color:var(--cream);white-space:nowrap}
.hero-title .marked{font-style:italic;margin-left:0;letter-spacing:-.065em;white-space:nowrap}
.hero-title .period{color:#E0AF8E}
.hero-bottom{margin-top:55px;max-width:620px}
.hero-bottom p{font-size:clamp(17px,1.45vw,20px);line-height:1.52;font-weight:400;letter-spacing:-.022em;color:#F0F0EA}
.scroll-prompt{font-size:11px;font-weight:500;max-width:200px;color:#F7F0E9}
.arrow-box{border-color:rgba(255,255,255,.52);width:48px;height:48px;background:rgba(255,255,255,.07)}
.scroll-prompt:hover .arrow-box{background:var(--clay)}
.hero-picture{margin-top:15px}
.hero-picture-inner{height:min(70svh,675px);min-height:480px;border-radius:19px;box-shadow:0 25px 80px rgba(38,43,42,.22);background:#877a6c}
.hero-picture img{filter:saturate(.77) contrast(.92) sepia(.045);object-position:center 37%}
.hero-picture:after{content:'';position:absolute;inset:0 0 39px;pointer-events:none;border-radius:19px;box-shadow:inset 0 0 100px rgba(50,50,50,.07)}
.hero-picture figcaption{font-size:10px;font-weight:550;letter-spacing:.065em;border-color:rgba(255,255,255,.4);color:#F3EEE6}
.hero-picture figcaption span:nth-child(2){opacity:.85}
.hero-photo-side{right:-17px;opacity:.75;font-size:9px}
.hero-marquee{display:none}
/* The family archive: light, spacious and editorial. */
.forty-chapter{background:var(--paper);padding:156px 5vw 160px}
.section-top{font-weight:600;letter-spacing:.11em;border-color:var(--line)}
.micro-heading{color:#92745F;font-weight:650;margin-bottom:36px}
.forty-layout{gap:6vw}
.forty-title{font-family:var(--display);font-weight:400;font-size:clamp(7rem,12vw,14.5rem);line-height:.91;letter-spacing:-.055em;word-spacing:0}
.forty-title>span{font-weight:400;font-size:.57em;letter-spacing:-.045em;font-style:italic}
.forty-title .light-word{font-size:.69em;font-style:normal;letter-spacing:-.045em;color:#8B9A9A}
.chapter-intro{font-size:clamp(20px,2.1vw,29px);font-weight:400;line-height:1.45;letter-spacing:-.028em;max-width:540px;margin-top:62px}
.forty-side{gap:32px}
.archive-block{border-radius:16px;background:#E0E5E2;border:1px solid #C9D2CF;max-width:430px}
.archive-content{padding:25px;color:#68736F}
.archive-symbol{color:#ADB7B3;font-family:var(--display);font-size:9rem}
.archive-description{font-family:var(--display);font-size:clamp(24px,2.5vw,34px);font-weight:400;letter-spacing:-.02em}
.forty-text{font-size:clamp(22px,2.1vw,29px);font-weight:400;line-height:1.42;letter-spacing:-.025em}
.forty-last{font-family:var(--display);font-size:clamp(37px,4.5vw,72px);font-weight:400;line-height:1.13;letter-spacing:-.036em;max-width:1120px;margin-top:125px}
/* The original topper takes over the canvas, maintaining the scroll interaction. */
.first-story,.eyes{background:var(--charcoal);color:var(--cream)}
.first-photo{border-radius:15px;box-shadow:0 38px 100px rgba(0,0,0,.28)}
.first-copy h2{font-family:var(--display);font-weight:400;font-size:clamp(7rem,11vw,13rem);line-height:.87;letter-spacing:-.05em}
.first-copy h2 span{color:#E2AE90}
.first-counter{font-weight:500}
.eyes .section-top{border-color:#596266}
.eyes-before{color:#CFD3D0;font-size:clamp(20px,2vw,31px);font-weight:400}
.eyes-title{font-family:var(--display);font-size:clamp(7rem,10.8vw,15rem);font-weight:400;letter-spacing:-.055em;word-spacing:0;line-height:.95}
.eyes-title span{color:#E2B89B;font-style:italic}
.eyes-after{color:#F2EBE3;font-size:clamp(18px,1.65vw,24px);font-weight:400;max-width:470px}
.eyes-footer span{color:#CBA185}
/* Growth: warm light canvas and calm photographic composition. */
.growth{background:#F8F5EF}
.growth-main{padding-left:5vw}
.growth-pre{font-size:clamp(19px,2vw,28px);font-weight:400}
.growth-steps{height:clamp(230px,24vw,370px)}
.growth-step{font-family:var(--display);font-weight:400;font-size:clamp(5rem,7.9vw,11rem);line-height:.97;letter-spacing:-.055em;word-spacing:0}
.growth-step span{color:#B57B59;font-style:italic}
.growth-visual{background:#DDE1DD}
.growth-tile{border-radius:15px;box-shadow:0 24px 65px rgba(32,41,41,.15)}
.growth-shape{background:#B77855;color:white;border-radius:50%;box-shadow:0 15px 30px rgba(74,54,37,.1)}
.growth-dots i{background:#D0C8C0;border-radius:5px}.growth-dots i.active{background:#A96E4F}
.growth-foot p{font-weight:400;color:#656E6A}
/* Quiet portfolio cards with photos as the hero. */
.work{background:#FCFAF6;padding:152px 5vw 165px}
.work-heading{margin-top:100px}
.work-title{font-family:var(--display);font-weight:400;line-height:.9;letter-spacing:-.048em;word-spacing:0;font-size:clamp(6rem,10.5vw,13rem)}
.work-title span{color:#B87857;font-style:italic}
.work-text{font-size:clamp(18px,1.65vw,24px);font-weight:400;color:#626C6B;line-height:1.5;letter-spacing:-.018em}
.work-pic{border-radius:17px;background:#E8E6E0}
.work-pic-1{background:#D7DDDA}.work-pic-2{background:#E3D6CB}.work-pic-3{background:#C4C9C7}
.work-placeholder>span{font-family:var(--display);font-size:clamp(40px,4.1vw,70px);font-weight:400;letter-spacing:-.035em}
.work-item figcaption{color:#4B5653}
.work-foot p{font-family:var(--display);font-weight:400}
/* Personal, warm, grounded. */
.sara{background:#566267;color:#FCF8F2}
.sara-image{background:#786A5C}
.sara-content>.small-label{color:#D3DAD6}
.sara-title{font-family:var(--display);font-size:clamp(7.2rem,10vw,13rem);font-weight:400;line-height:.85;letter-spacing:-.059em;word-spacing:0;margin-top:56px;margin-bottom:45px}
.sara-title span{color:#E6C5AF;font-style:italic}
.sara-body{font-size:clamp(19px,1.65vw,25px);line-height:1.52;letter-spacing:-.02em;color:#F1ECE7;font-weight:400}
.sara-quote{font-family:var(--display);font-size:clamp(26px,2.3vw,38px);font-style:italic;line-height:1.18;letter-spacing:-.012em;color:#E6C5AF;border-color:rgba(246,241,235,.24);margin-top:56px;padding-top:30px}
.sara-signature{color:#D1D9D4;font-weight:500}
.sara-image-tag{border-radius:30px;background:#F6F2EA;padding:12px 17px;font-weight:600;letter-spacing:.08em}
/* Gentle, inviting ending instead of a bright billboard. */
.contact{background:#E8D7C9;color:#293131;padding:110px 5vw 126px}
.contact .section-top{border-color:#C2A99B}
.contact-kicker{font-size:clamp(18px,1.8vw,25px);font-weight:400;color:#655C53}
.contact-title{font-family:var(--display);font-weight:400;line-height:.94;letter-spacing:-.052em;word-spacing:0;font-size:clamp(7rem,12vw,15rem)}
.contact-title span,.contact-title span:first-child{color:#A46140;font-style:italic;-webkit-text-stroke:0!important}
.contact-desc{font-size:clamp(17px,1.5vw,22px);line-height:1.55;color:#5F5B56;font-weight:400}
.contact-buttons a{border-radius:100px;font-size:13px;font-weight:600;min-width:235px;padding:18px 25px}
.contact-primary{background:#A46140;color:#FFFCF7}
.contact-primary:hover{background:#874F34}
.contact-secondary{border-color:#977767;color:#493B34}
.contact-secondary:hover{background:rgba(255,255,255,.35)}
.footer{background:#283233;color:#F9F2E8}
.footer-meta{border-color:#546062}.footer-bottom{border-color:#546062}
.footer-meta a:hover,.footer-big span{color:#D8A583}
.footer-big{font-family:var(--display);font-weight:400;letter-spacing:-.057em;line-height:1.15}
/* Light utility details and refined corners across the page. */
.scroll-prompt:hover .arrow-box{transform:translateY(4px)}
.reveal.visible{transition-duration:1.05s}
@media(max-width:1120px){
 .hero-title{font-size:10.8vw}
 .hero-grid{grid-template-columns:minmax(0,1.04fr) minmax(300px,.96fr);gap:4vw}
 .forty-title{font-size:11.9vw}
 .growth-step{font-size:7.8vw}
 .work-title{font-size:10vw}
 .sara-title{font-size:9.5vw}
}
@media(max-width:760px){
 .header,.header.scrolled{top:9px;left:11px;right:11px;border-radius:100px;padding:7px 9px 7px 15px;background:rgba(251,249,245,.96)}
 .logo,.logo img{width:114px;min-width:114px}
 .header-link{font-size:10px;padding:10px 13px;min-height:36px}
 .hero{min-height:100svh;padding:105px 22px 60px}
 .hero-grid{display:flex;flex-direction:column;gap:24px;min-height:0}
 .hero-copy{padding-top:29px}
 .hero-label{font-size:9px;margin-bottom:24px;padding:9px 12px}
 .hero-title{font-size:clamp(4.7rem,18.2vw,8rem);letter-spacing:-.059em;line-height:.92}
 .hero-title .marked{letter-spacing:-.064em}
 .hero-bottom{margin-top:24px}
 .hero-bottom p{font-size:16px;line-height:1.42}
 .scroll-prompt{margin-top:16px;font-size:10px}
 .arrow-box{width:36px;height:36px;font-size:19px}
 .hero-picture{margin:6px auto 0;width:100%}
 .hero-picture-inner{min-height:0;height:33svh;max-height:400px;border-radius:15px}
 .hero-picture img{object-position:center 33%}
 .hero-picture figcaption{font-size:9px}
 .hero-photo-side{right:6px;color:white}
 .forty-chapter{padding:100px 22px 100px}
 .forty-layout{margin-top:64px}
 .micro-heading{margin-bottom:29px}
 .forty-title{font-size:clamp(6.7rem,24vw,12rem);letter-spacing:-.058em}
 .forty-title .light-word{letter-spacing:-.03em}
 .chapter-intro{font-size:22px;margin-top:38px;line-height:1.5}
 .archive-block{border-radius:15px;width:81%;height:330px}
 .archive-description{font-size:23px}
 .forty-text{font-size:23px}
 .forty-last{font-size:clamp(37px,9.2vw,55px);margin-top:90px}
 .first-copy h2{font-size:clamp(5.4rem,17.5vw,9rem)}
 .first-photo{border-radius:12px}
 .eyes-title{font-size:clamp(4.1rem,14vw,7rem);letter-spacing:-.04em}
 .growth-main{padding:95px 22px 28px}
 .growth-pre{font-size:17px}
 .growth-steps{height:150px}
 .growth-step{font-size:clamp(3.35rem,13.5vw,7rem);line-height:.95}
 .growth-visual{height:36svh}
 .growth-tile{border-radius:12px}
 .work{padding:105px 22px 100px}
 .work-title{font-size:clamp(5.2rem,17.5vw,9rem)}
 .work-text{font-size:18px;line-height:1.55}
 .work-pic{border-radius:12px}
 .sara{grid-template-columns:1fr}
 .sara-image{height:70svh}
 .sara-content{padding:95px 23px 115px}
 .sara-title{font-size:clamp(5.8rem,18vw,9rem);margin:40px 0 35px}
 .sara-body{font-size:20px}
 .sara-quote{font-size:29px;line-height:1.23;margin-top:50px}
 .contact{padding:95px 22px 115px}
 .contact-title{font-size:clamp(5.2rem,17.2vw,9rem);letter-spacing:-.04em}
 .contact-desc{font-size:17px}
 .contact-buttons a{border-radius:100px}
 .footer-big{font-size:14vw}
}
@media(max-width:390px){
 .hero-title{font-size:17.8vw}
 .forty-title{font-size:24.1vw}
 .growth-step{font-size:13.1vw}
 .contact-title{font-size:16.6vw}
}
@media(prefers-reduced-motion:reduce){.hero-picture img{transition:none}}