:root{--brick:#962715;--brick2:#b43b28;--white:#fff;--black:#1e1e20;--gray:#bbc3c6;--light:#eef0f0;--line:rgba(30,30,32,.2);--shell:min(1240px,calc(100% - 48px))}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--black);font:16px/1.55 Arial,Helvetica,sans-serif}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
.shell{width:var(--shell);margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.eyebrow{margin:0 0 18px;font-size:.65rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--brick)}
.eyebrow.light{color:var(--gray)}
.site-header{position:relative;z-index:20;background:var(--white);border-bottom:1px solid var(--black)}
.header-row{height:80px;display:flex;align-items:center}
.brand{display:grid;grid-template-columns:44px auto auto;align-items:center;gap:11px;min-width:max-content}
.brand>span{display:grid;place-items:center;width:44px;height:44px;background:var(--brick);color:#fff;font-size:1.35rem;font-weight:900}
.brand>b{font-size:1.2rem;letter-spacing:.18em}
.brand>small{padding-left:12px;border-left:1px solid var(--black);font-size:.53rem;letter-spacing:.15em;text-transform:uppercase;line-height:1.35}
.main-nav{display:flex;align-items:center;gap:32px;margin-left:auto}
.main-nav a{position:relative;padding:30px 0;font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.main-nav a:before{content:"";position:absolute;left:0;right:100%;bottom:21px;height:3px;background:var(--brick);transition:.2s}
.main-nav a:hover:before{right:0}
.header-index{height:80px;margin-left:40px;padding:19px 22px;border-left:1px solid var(--black);display:flex;flex-direction:column;font-size:.55rem;letter-spacing:.14em}
.header-index b{margin-top:4px;font-size:.72rem;letter-spacing:.07em;color:var(--brick)}
.nav-toggle{display:none;margin-left:auto;padding:10px;border:0;background:none}
.nav-toggle i{display:block;width:27px;height:2px;margin:6px;background:var(--black)}
.hero{padding:28px 0 75px;background:var(--light)}
.hero-frame{position:relative;display:grid;grid-template-columns:1.05fr .95fr;min-height:650px;background:var(--white);border:1px solid var(--black)}
.hero-copy{position:relative;padding:96px 58px 76px;z-index:2}
.hero-copy:before{content:"";position:absolute;top:0;bottom:0;left:119px;width:1px;background:rgba(150,39,21,.16);z-index:-1}
.hero h1{margin:0;font-size:clamp(4.8rem,8.8vw,9rem);line-height:.78;letter-spacing:-.075em;font-weight:900}
.hero h1 span{display:block;margin-left:7vw;color:var(--brick)}
.hero-copy>p:not(.eyebrow){max-width:520px;margin:46px 0 31px;font-size:1.06rem;color:#55585a}
.hero-actions{display:flex;align-items:center;gap:28px}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;background:var(--black);color:#fff;font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;transition:.2s}
.button:hover{background:var(--brick);transform:translateY(-2px)}
.hero-actions>a:last-child{font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid var(--black);padding:12px 0 6px}
.construct{position:relative;min-height:650px;background:var(--gray);border-left:1px solid var(--black);overflow:hidden}
.construct:after{content:"";position:absolute;inset:24px;background-image:linear-gradient(rgba(30,30,32,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(30,30,32,.12) 1px,transparent 1px);background-size:36px 36px}
.measure{position:absolute;z-index:2;left:23px;right:23px;top:23px;display:flex;justify-content:space-between;padding-bottom:7px;border-bottom:1px solid var(--black);font-size:.52rem}
.wall{position:absolute;z-index:3;background:var(--brick)}
.wall-a{left:75px;bottom:74px;width:42%;height:68%}
.wall-b{right:60px;bottom:74px;width:30%;height:42%;background:var(--black)}
.beam{position:absolute;z-index:4;left:49px;right:45px;top:148px;height:42px;background:var(--white);border:1px solid var(--black);transform:rotate(-8deg)}
.window{position:absolute;z-index:5;left:126px;bottom:164px;width:135px;height:190px;border:15px solid var(--black);background:var(--white)}
.window:before,.window:after{content:"";position:absolute;background:var(--black)}
.window:before{width:9px;top:0;bottom:0;left:48px}.window:after{height:9px;left:0;right:0;top:75px}
.construct>b{position:absolute;z-index:6;right:58px;top:215px;font-size:10rem;line-height:1;color:var(--white)}
.construct>small{position:absolute;z-index:6;right:70px;bottom:94px;color:var(--white);font-size:.58rem;letter-spacing:.18em;text-align:right}
.hero-count{position:absolute;z-index:8;right:-1px;bottom:-41px;width:270px;height:82px;padding:14px 23px;display:grid;grid-template-columns:1fr auto;align-items:center;background:var(--brick);color:#fff}
.hero-count span,.hero-count i{font-size:.54rem;letter-spacing:.15em;text-transform:uppercase;font-style:normal}.hero-count i{grid-column:1/2}.hero-count b{grid-row:1/3;grid-column:2;font-size:2.9rem;line-height:1}
.directions{padding:120px 0;background:var(--white)}
.section-head{display:grid;grid-template-columns:75px 1.2fr .8fr;gap:40px;align-items:end;margin-bottom:55px}
.section-head>span{align-self:start;font-size:4rem;font-weight:900;color:var(--gray);line-height:1}
.section-head h2,.materials h2,.practice h2,.system h2,.article-head h1{margin:0;font-size:clamp(3.8rem,6.4vw,6.4rem);line-height:.88;letter-spacing:-.065em;text-transform:uppercase}
.section-head>p{margin:0 0 8px;max-width:420px;color:#676a6c}
.direction-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--black);border-left:1px solid var(--black)}
.direction-grid a{position:relative;min-height:310px;padding:25px;border-right:1px solid var(--black);border-bottom:1px solid var(--black);transition:.22s;overflow:hidden}
.direction-grid a:before{content:"";position:absolute;left:-60px;bottom:-60px;width:130px;height:130px;background:var(--gray);transform:rotate(45deg);transition:.22s}
.direction-grid a:hover{background:var(--black);color:#fff;transform:translateY(-8px)}
.direction-grid a:hover:before{background:var(--brick);transform:rotate(45deg) scale(1.35)}
.direction-grid>a>b{display:grid;place-items:center;width:50px;height:50px;background:var(--brick);color:#fff;font-size:.85rem;letter-spacing:.08em}
.direction-grid h3{margin:75px 0 12px;font-size:1.7rem;text-transform:uppercase;letter-spacing:-.04em}
.direction-grid p{margin:0;color:#6f7273;font-size:.84rem}.direction-grid a:hover p{color:var(--gray)}
.direction-grid span{position:absolute;right:21px;bottom:15px;font-size:.6rem;font-weight:800;letter-spacing:.12em}
.materials{padding:115px 0;background:var(--black);color:#fff}
.materials-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:48px}
.search{display:flex;width:min(390px,100%);border-bottom:1px solid var(--gray)}
.search input{width:100%;padding:13px 4px;border:0;outline:0;background:transparent;color:#fff}.search input::placeholder{color:#92989a}.search b{padding:13px 6px;color:var(--brick2);font-size:1.1rem}
.material-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#4b4b4d;border:1px solid #4b4b4d}
.material-card{min-height:430px;padding:22px 24px 27px;background:var(--black);display:flex;flex-direction:column;transition:.2s}
.material-card:hover{background:#28282a}
.material-card.featured{grid-column:span 2;display:grid;grid-template-columns:46% 1fr;grid-template-rows:auto auto 1fr auto;gap:0 30px}
.material-card header{display:flex;justify-content:space-between;margin-bottom:19px;font-size:.53rem;letter-spacing:.14em;color:var(--gray)}
.material-card.featured header{grid-column:1/-1}.material-card.featured .sample{grid-row:2/5;min-height:330px}
.sample{position:relative;height:155px;margin-bottom:22px;display:grid;place-items:center;background:var(--gray);overflow:hidden;color:var(--black)}
.sample:before{content:"";position:absolute;inset:0;background-image:linear-gradient(90deg,transparent 48%,rgba(30,30,32,.25) 49%,rgba(30,30,32,.25) 51%,transparent 52%),linear-gradient(transparent 48%,rgba(30,30,32,.25) 49%,rgba(30,30,32,.25) 51%,transparent 52%);background-size:84px 54px}
.sample b{position:relative;z-index:2;font-size:5rem}.sample i{position:absolute;z-index:1;width:170px;height:170px;background:var(--brick);transform:rotate(45deg);right:-90px;bottom:-90px}
.material-card h3{margin:0 0 13px;font-size:1.65rem;line-height:1.03;text-transform:uppercase;letter-spacing:-.04em}
.material-card>p{margin:0 0 22px;color:#aeb3b5;font-size:.84rem}.details{margin-top:auto;padding-top:15px;border-top:1px solid #4b4b4d;font-size:.64rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--gray)}.details span{float:right;color:var(--brick2)}
.empty{padding:28px;border:1px solid currentColor;color:#9fa4a6}
.practice{background:var(--brick);color:#fff}
.practice-grid{display:grid;grid-template-columns:.9fr 1.1fr}
.practice header{position:relative;min-height:650px;padding:92px 70px 70px 0;border-right:1px solid rgba(255,255,255,.45);overflow:hidden}.practice header>span{position:absolute;right:25px;top:20px;font-size:7rem;font-weight:900;color:rgba(255,255,255,.14)}.practice h2{font-size:clamp(4rem,7vw,7rem)}.practice header>p:not(.eyebrow){max-width:390px;margin-top:29px;color:#e8c2bb}
.brick-stack{position:absolute;left:0;bottom:48px;width:80%;display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.brick-stack i{display:block;height:42px;border:2px solid #fff}.brick-stack i:nth-child(4){margin-left:50%}.brick-stack i:nth-child(6){margin-right:-50%}
.article-list{padding:70px 0 70px 70px}.article-list>a{display:grid;grid-template-columns:105px 1fr auto;gap:25px;align-items:center;padding:28px 0;border-bottom:1px solid rgba(255,255,255,.42)}.article-list>a:first-child{border-top:1px solid rgba(255,255,255,.42)}.article-list span,.article-list b{font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;color:#e7beb7}.article-list h3{margin:0;font-size:1.35rem;line-height:1.1;text-transform:uppercase}.article-list a:hover h3{color:var(--black)}
.system{padding:115px 0;background:var(--light)}
.system-grid{display:grid;grid-template-columns:1fr 1fr .75fr;gap:55px}.system h2{font-size:clamp(3.5rem,5.8vw,5.8rem)}.system ol{margin:0;padding:0;list-style:none;border-top:1px solid var(--black)}.system li{display:grid;grid-template-columns:44px 1fr;gap:16px;padding:17px 0;border-bottom:1px solid var(--line)}.system li>b{font-size:.58rem;color:var(--brick)}.system li span{font-size:.8rem;color:#696d6f}.system li strong{display:block;font-size:1rem;text-transform:uppercase;color:var(--black)}
.drawing{position:relative;min-height:325px;padding:23px;background:var(--white);border:1px solid var(--black);overflow:hidden}.drawing:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(30,30,32,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(30,30,32,.1) 1px,transparent 1px);background-size:25px 25px}.drawing span,.drawing b,.drawing i{position:relative;z-index:2}.drawing span{font-size:.55rem;letter-spacing:.14em}.drawing div{position:absolute;z-index:2;width:170px;height:170px;border-left:22px solid var(--brick);border-bottom:22px solid var(--black);right:40px;bottom:51px}.drawing b{position:absolute;right:23px;top:22px;font-size:2rem}.drawing i{position:absolute;left:23px;bottom:18px;font-size:.55rem;letter-spacing:.12em;text-transform:uppercase}
.site-footer{padding:55px 0;background:var(--white);border-top:1px solid var(--black)}.footer-grid{display:grid;grid-template-columns:auto 1fr auto auto;gap:55px;align-items:center}.site-footer p{font-size:.75rem;color:#686b6d}.site-footer nav{display:grid;grid-template-columns:1fr 1fr;gap:8px 25px;font-size:.58rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase}.footer-code{display:flex;align-items:center;gap:12px;font-size:.6rem;letter-spacing:.13em}.footer-code b{font-size:2.5rem;color:var(--brick)}
.cookie{position:fixed;z-index:100;left:24px;right:24px;bottom:20px;max-width:760px;margin:auto;padding:18px 20px;display:flex;justify-content:space-between;gap:25px;align-items:center;background:#fff;border:1px solid var(--black);box-shadow:8px 8px 0 var(--brick)}.cookie[hidden]{display:none}.cookie strong,.cookie span{display:block}.cookie strong{font-size:.9rem;text-transform:uppercase}.cookie span{font-size:.72rem;color:#666}.cookie>div:last-child{display:flex;gap:8px}.cookie button{padding:10px 13px;border:1px solid var(--black);background:#fff;font-size:.65rem;font-weight:800;cursor:pointer}.cookie button:last-child{background:var(--black);color:#fff}
.content-page{padding:70px 0 110px;background:var(--light);min-height:70vh}.page-grid{display:grid;grid-template-columns:175px 1fr;gap:70px}.page-grid>aside{padding-top:48px;border-right:1px solid var(--black)}.page-code{width:110px;height:165px;padding:12px;background:var(--brick);color:#fff;display:flex;flex-direction:column;justify-content:space-between}.page-code b{font-size:5rem;line-height:1}.page-code span{font-size:.52rem;letter-spacing:.14em}.page-grid>aside>i{display:block;margin-top:14px;font-size:2rem;font-weight:900;font-style:normal}.breadcrumbs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:36px;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:#696d6f}.article{max-width:900px}.article-head{padding-bottom:37px;border-bottom:2px solid var(--black)}.article-head h1{font-size:clamp(3.5rem,7vw,7rem)}.article-head>p:last-child:not(.eyebrow){max-width:720px;margin:27px 0 0;font-size:1.1rem;color:#5b5f61}.article-body{padding:42px 0;font-size:1rem;line-height:1.75}.article-body h2,.article-body h3{margin:1.8em 0 .65em;line-height:1.05;text-transform:uppercase}.article-body h2{font-size:2.2rem}.article-body h3{font-size:1.45rem}.article-body a{color:var(--brick);text-decoration:underline;text-underline-offset:3px}.article-body img{max-width:100%;height:auto}.article-body blockquote{margin:35px 0;padding:24px 28px;border-left:8px solid var(--brick);background:#fff;font-size:1.15rem}.article-body table{width:100%;border-collapse:collapse}.article-body th,.article-body td{padding:12px;border-bottom:1px solid var(--line);text-align:left}.article-foot{display:flex;justify-content:space-between;padding-top:21px;border-top:1px solid var(--black);font-size:.61rem;letter-spacing:.1em;text-transform:uppercase}.article-foot a{color:var(--brick);font-weight:800}
@media(max-width:980px){.main-nav{position:absolute;display:none;top:80px;left:0;right:0;padding:20px 24px;background:#fff;border-bottom:1px solid var(--black);flex-direction:column;align-items:flex-start;gap:0}.main-nav.is-open{display:flex}.main-nav a{padding:12px 0}.nav-toggle{display:block}.header-index{display:none}.hero-frame{grid-template-columns:1fr}.construct{border-left:0;border-top:1px solid var(--black)}.direction-grid{grid-template-columns:1fr 1fr}.material-grid{grid-template-columns:1fr 1fr}.material-card.featured{grid-column:span 2}.practice-grid{grid-template-columns:1fr}.practice header{min-height:570px;border-right:0;border-bottom:1px solid rgba(255,255,255,.45);padding-right:0}.article-list{padding-left:0}.system-grid{grid-template-columns:1fr 1fr}.drawing{grid-column:1/-1}.footer-grid{grid-template-columns:auto 1fr}.site-footer nav,.footer-code{display:none}}
@media(max-width:680px){:root{--shell:calc(100% - 28px)}body{font-size:15px}.header-row{height:70px}.brand>small{display:none}.main-nav{top:70px}.hero{padding-top:14px}.hero-frame{min-height:0}.hero-copy{padding:65px 24px 50px}.hero-copy:before{left:70px}.hero h1{font-size:4.25rem}.hero h1 span{margin-left:0}.hero-actions{align-items:flex-start;flex-direction:column;gap:8px}.construct{min-height:470px}.construct>b{font-size:7rem}.hero-count{bottom:-41px}.directions,.materials,.system{padding:90px 0}.section-head{display:block}.section-head>span{display:block;margin-bottom:25px}.section-head>p{margin-top:25px}.direction-grid{grid-template-columns:1fr}.direction-grid a{min-height:245px}.direction-grid h3{margin-top:38px}.materials-head{display:block}.search{margin-top:30px}.material-grid{grid-template-columns:1fr}.material-card.featured{grid-column:auto;display:flex}.material-card.featured .sample{height:180px;min-height:0}.material-card{min-height:390px}.practice header{min-height:530px;padding-top:75px}.article-list>a{grid-template-columns:1fr auto;gap:10px}.article-list>a span{grid-column:1/-1}.system-grid{grid-template-columns:1fr}.drawing{grid-column:auto}.page-grid{grid-template-columns:1fr;gap:20px}.page-grid>aside{display:none}.article-head h1{font-size:3.4rem}.article-foot{gap:20px;flex-direction:column}.footer-grid{grid-template-columns:1fr}.site-footer p{margin:0}.cookie{align-items:stretch;flex-direction:column}.cookie>div:last-child{justify-content:flex-end}}