/* A quieter, architectural visual system for the Barchinet project family. */
:root{--ink:#222c2b;--paper:#f4f1e9;--line:#cecfc5;--accent:#8d6244}html{scroll-behavior:smooth}body{background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}header,main,footer{max-width:1440px;padding-left:clamp(22px,5vw,80px);padding-right:clamp(22px,5vw,80px)}header{height:88px;border-color:var(--line)}.logo{font-weight:800;letter-spacing:-.055em}.logo b,.logo span{color:#867c6b}nav{align-items:center;gap:clamp(18px,3vw,42px)}nav a{position:relative;font-size:12px;font-weight:600}nav a:after{content:'';position:absolute;bottom:-7px;left:0;width:0;height:1px;background:currentColor;transition:width .25s}nav a:hover:after{width:100%}.eyebrow{font-size:10px;letter-spacing:.19em;color:#836d5c}.hero{padding:clamp(55px,7vw,110px) 0 clamp(40px,5vw,72px)}.hero h1,h1,.section-head h2,.contact h2,.sections h2{font-family:Georgia,serif;letter-spacing:-.045em}.hero h1{font-size:clamp(50px,7.5vw,112px);line-height:.97;max-width:1050px}.hero h1 em,h1 em{color:var(--accent)}.hero p,.lead{line-height:1.65;color:#626c66;max-width:560px}.btn{background:#263733;border-radius:2px;padding:16px 24px;transition:background .2s,transform .2s}.btn:hover{background:#9a6d4a;transform:translateY(-2px)}.textlink{text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:5px}.banner{padding:0;border:0;border-radius:0;background:transparent;gap:4px;grid-template-columns:1.25fr 1fr .8fr;min-height:480px}.scene{border-radius:0;min-height:480px}.scene .editorial-image{transition:transform .7s ease}.scene:hover .editorial-image{transform:scale(1.035)}.scene .label{left:0;right:0;bottom:0;color:white;background:linear-gradient(transparent,rgba(15,25,22,.78));backdrop-filter:none;border-radius:0;padding:48px 24px 22px}.scene .label small{color:#e4e6dc}.label strong{font:400 25px Georgia,serif}.minigrid{min-height:480px;gap:4px}.mini{border-radius:0;background:#e8e8de}.mini:after{border-radius:0;font-size:10px;background:#f4f1e9eb}.section-head{margin:clamp(70px,9vw,130px) 0 32px;border-top:1px solid var(--line);padding-top:22px}.section-head h2{font-size:clamp(38px,5vw,70px)}.projects{gap:0;border-bottom:1px solid var(--line)}.project{padding:30px 28px 45px 0;border-color:var(--line)}.project+.project{padding-left:35px;border-left:1px solid var(--line)}.project h3{font-size:clamp(32px,4vw,52px)}.pill{border:0;padding:0;color:#98735a;letter-spacing:.12em;text-transform:uppercase}.tools{background:#e7e5dc;border-radius:0;padding:clamp(24px,4vw,60px);margin:90px 0}.tools .section-head{border:0;padding:0}.tool-grid{gap:3px}.tool{border:0!important;border-radius:0;background:#f6f4ed;transition:transform .25s,box-shadow .25s}.tool:hover{transform:translateY(-4px);box-shadow:0 12px 35px #29342a1c}.tool .screen{height:260px;background:#d8e3db}.tool:nth-child(2) .screen{background:#e8ddd2}.tool:nth-child(3) .screen{background:#d9e2e9}.tool:nth-child(4) .screen{background:#e2ddec}.tool img{height:100%;object-fit:cover;object-position:top}.tool .copy{padding:22px}.tool h3{font-size:18px}.tool .policy{color:#675b4a}.contact{border-color:var(--line);padding:55px 0 80px}.contact h2{font-size:clamp(38px,5vw,64px)}footer{border-color:var(--line)}
/* The project pages get individual material palettes and a more immersive opening. */
body.project-page .hero{grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,80px);padding:clamp(45px,6vw,85px) 0 55px}body.project-page h1{font-size:clamp(52px,6.3vw,92px);line-height:.98}body.project-page .visual{border-radius:0;height:clamp(430px,55vw,680px)}body.project-page .visual img{transition:transform .8s}body.project-page .visual:hover img{transform:scale(1.025)}body.project-page .caption{text-transform:uppercase;letter-spacing:.12em;font-size:10px}.sections{gap:0;padding:0;border-bottom:1px solid var(--line)}.sections article{padding:40px 45px 50px 0}.sections article+article{padding-left:45px;border-left:1px solid var(--line)}.sections h2{font-size:clamp(31px,3.3vw,46px)}.bottom{background:#dfdfd5;border-radius:0;padding:clamp(28px,4vw,55px);margin:70px 0}.bottom a{text-underline-offset:5px}body.pattern-page{--paper:#f3eee6;--accent:#a05b3c}body.pattern-page .bottom{background:#e7dbcb}body.pattern-page .btn{background:#754c3a}body.pattern-page .eyebrow{color:#a05b3c}
@media(max-width:800px){.banner{grid-template-columns:1fr 1fr;min-height:0}.scene{min-height:330px}.banner>.minigrid{grid-column:1/-1;min-height:230px;grid-template-columns:repeat(4,1fr)}.section-head{margin-top:75px}.projects{grid-template-columns:1fr}.project+.project{border-left:0;padding-left:0}.tool-grid{grid-template-columns:repeat(2,1fr)}body.project-page .hero{grid-template-columns:1fr}.sections{grid-template-columns:1fr}.sections article+article{border-left:0;border-top:1px solid var(--line);padding-left:0}}
@media(max-width:480px){header{height:72px;gap:12px}.logo{font-size:15px}nav{gap:13px}nav a{font-size:11px}.hero h1,body.project-page h1{font-size:clamp(43px,12vw,60px)}.hero h1 br{display:none}.hero p,.lead{font-size:16px}.hero .actions{flex-wrap:wrap}.banner{gap:3px}.scene{min-height:240px}.scene .label{left:0;right:0;bottom:0;padding:38px 12px 12px}.label strong{font-size:18px}.banner>.minigrid{min-height:135px}.mini:after{font-size:9px}.tools{padding:22px;margin:60px 0}.tool-grid{gap:4px}.tool .screen{height:180px}.tool .copy{padding:14px}.tool h3{font-size:15px}.tool p{font-size:12px}body.project-page .visual{height:380px;min-height:0}.sections article{padding:30px 0}.contact{padding:40px 0 60px}footer{display:block}footer div{margin-top:12px}footer a{margin:0 12px 0 0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}
body.project-page .hero>div{min-width:0}body.project-page h1{overflow-wrap:anywhere}