.pattern-library{color:var(--ink);background:#ede6d5}.pattern-library .site-header{position:relative}.pattern-header-name{font:8px var(--mono);letter-spacing:.16em}.pattern-hero{background:#c9bd9e;grid-template-columns:1.15fr .65fr;align-items:center;gap:8vw;min-height:760px;padding:110px clamp(24px,8vw,130px);display:grid;position:relative;overflow:hidden}.pattern-hero>div:first-child{z-index:2;position:relative}.pattern-hero p,.pattern-standard header>p,.browser-head>div>p,.pattern-north-star>p{font:8px var(--mono);letter-spacing:.17em}.pattern-hero h1{letter-spacing:-.065em;margin:34px 0;font-size:clamp(78px,10vw,150px);font-weight:500;line-height:.78}.pattern-hero h1 em,.pattern-promise h2 em,.pattern-standard h2 em,.browser-head h2 em,.pattern-north-star em{font-family:var(--serif);color:#8a5542;font-weight:400}.pattern-hero blockquote{border-left:1px solid var(--ink);max-width:600px;font-family:var(--serif);margin:0 0 42px;padding-left:20px;font-size:22px;line-height:1.55}.pattern-hero a,.pattern-north-star a{font:8px var(--mono);letter-spacing:.1em;border:1px solid #1b362d73;padding:13px 16px;display:inline-block}.pattern-hero a span,.pattern-north-star a span{margin-left:24px}.pattern-orbit{border:1px solid #1f3f3447;border-radius:50%;height:480px;position:relative}.pattern-orbit:before,.pattern-orbit:after{content:"";border:1px solid #1f3f3433;border-radius:50%;position:absolute}.pattern-orbit:before{inset:16%}.pattern-orbit:after{inset:34%}.pattern-orbit>span{font:100px var(--serif);color:#8a5542;place-items:center;display:grid;position:absolute;inset:0}.pattern-orbit i,.pattern-orbit b{border-radius:50%;position:absolute}.pattern-orbit i{background:#d39d42;width:14px;height:14px}.pattern-orbit i:first-child{top:35%;left:13%}.pattern-orbit i:nth-child(2){top:12%;right:23%}.pattern-orbit i:nth-child(3){bottom:27%;right:12%}.pattern-orbit b{background:#71866d;border-radius:100% 0;width:45px;height:58px}.pattern-orbit b:first-of-type{bottom:16%;left:20%;transform:rotate(-15deg)}.pattern-orbit b:nth-of-type(2){top:25%;right:25%;transform:rotate(70deg)}.pattern-orbit b:nth-of-type(3){top:45%;right:5%;transform:rotate(25deg)}.pattern-promise{text-align:center;color:#f2eddf;background:#2e4b40;padding:120px clamp(24px,8vw,130px)}.pattern-promise>p{font-family:var(--serif);font-size:20px}.pattern-promise h2{letter-spacing:-.05em;margin:25px 0 70px;font-size:clamp(55px,7vw,100px);font-weight:500;line-height:.86}.pattern-promise h2 em{color:#d9ab57}.pattern-promise>div{grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:25px;max-width:900px;margin:auto;display:grid}.pattern-promise span{font:8px var(--mono);letter-spacing:.15em;color:#a9bab2}.pattern-promise span b{font:19px var(--serif);letter-spacing:0;color:#f2eddf;margin-top:10px;display:block}.pattern-promise i{color:#d9ab57;font-style:normal}.pattern-standard{background:#ded3bb;padding:120px clamp(24px,8vw,130px)}.pattern-standard header{max-width:850px}.pattern-standard h2,.browser-head h2{letter-spacing:-.055em;margin:30px 0;font-size:clamp(55px,7vw,98px);font-weight:500;line-height:.86}.pattern-standard header>span{max-width:670px;font-family:var(--serif);color:#52675f;font-size:20px;line-height:1.6;display:block}.pattern-standard ol{border-top:1px solid var(--line);border-left:1px solid var(--line);grid-template-columns:repeat(4,1fr);margin:75px 0 0;padding:0;list-style:none;display:grid}.pattern-standard li{border-right:1px solid var(--line);border-bottom:1px solid var(--line);flex-direction:column;min-height:210px;padding:22px;display:flex}.pattern-standard li>b{font:8px var(--mono);color:#9a6249}.pattern-standard li>strong{font-family:var(--serif);margin-top:auto;font-size:26px;font-weight:500}.pattern-standard li>span{color:#5e7068;margin-top:7px;font-size:11px;line-height:1.5}.pattern-browser{padding:120px clamp(20px,6vw,100px) 150px}.browser-head{grid-template-columns:1fr 360px;align-items:end;gap:70px;display:grid}.pattern-search{border:1px solid var(--line);background:#f4efe3;padding:18px 20px;display:block}.pattern-search span{font:7px var(--mono);letter-spacing:.15em;margin-bottom:10px;display:block}.pattern-search input{width:100%;color:var(--ink);font:18px var(--serif);background:0 0;border:0;border-bottom:1px solid #7e8b84;outline:none;padding:8px 0}.pattern-search input:focus{border-color:#9a6249}.pattern-filters{border-top:1px solid var(--line);border-left:1px solid var(--line);flex-wrap:wrap;margin:70px 0 25px;display:flex}.pattern-filters button{text-align:left;border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-width:145px;min-height:70px;color:var(--ink);font:9px var(--mono);letter-spacing:.08em;cursor:pointer;background:0 0;flex:1;grid-template-columns:1fr auto;padding:13px 16px;display:grid}.pattern-filters button small{font:11px var(--serif);letter-spacing:0;color:#6a7a72;grid-row:2}.pattern-filters button b{font:26px var(--serif);grid-area:1/2/3;align-self:center;font-weight:400}.pattern-filters button.active{color:#f4efe2;background:#2e4b40}.pattern-filters button.active small{color:#b9c6bf}.pattern-results{font:8px var(--mono);letter-spacing:.12em;color:#64756d;margin:0 0 25px}.pattern-grid{grid-template-columns:1fr 1fr;align-items:start;gap:18px;display:grid}.pattern-card{border:1px solid var(--line);background:#f2ecde;scroll-margin-top:20px;box-shadow:5px 6px #3d352817}.pattern-card[hidden]{display:none}.pattern-card summary{cursor:pointer;grid-template-columns:1fr auto;align-content:start;min-height:355px;padding:28px;list-style:none;display:grid;position:relative}.pattern-card summary::-webkit-details-marker{display:none}.pattern-id,.pattern-family{font:7px var(--mono);letter-spacing:.13em}.pattern-family{color:#8c5a47}.pattern-card h3{letter-spacing:-.045em;grid-column:1/-1;margin:62px 0 18px;font-size:clamp(40px,4vw,62px);font-weight:500;line-height:.9}.pattern-card summary p{max-width:580px;font-family:var(--serif);color:#51665d;grid-column:1/-1;margin:0;font-size:20px;line-height:1.45}.pattern-card summary>i{border:1px solid var(--line);border-radius:50%;width:30px;height:30px;position:absolute;bottom:27px;right:28px}.pattern-card summary>i:before,.pattern-card summary>i:after{content:"";background:var(--ink);height:1px;position:absolute;top:14px;left:8px;right:8px}.pattern-card summary>i:after{transition:transform .2s;transform:rotate(90deg)}.pattern-card[open] summary>i:after{transform:rotate(0)}.open-label{font:7px var(--mono);letter-spacing:.13em;position:absolute;bottom:32px;left:28px}.pattern-body{grid-template-columns:1fr 1fr;gap:12px;padding:0 28px 34px;display:grid}.pattern-body section{background:#e5dcc9;padding:20px}.pattern-body h4{font:7px var(--mono);letter-spacing:.14em;color:#7a6558;margin:0 0 14px}.pattern-body p,.pattern-body li{color:#496057;font-size:12px;line-height:1.65}.pattern-body ul{margin:0;padding-left:17px}.pattern-body .unlock{background:#c6b590;grid-column:1/-1}.pattern-body blockquote{font-family:var(--serif);margin:0;font-size:24px;line-height:1.4}.pattern-body .anti{background:#dac7b9}.pattern-links{grid-column:1/-1}.pattern-links>div{flex-wrap:wrap;gap:7px;display:flex}.pattern-links>div a{font:7px var(--mono);letter-spacing:.06em;border:1px solid #324b4140;padding:7px 9px}.source-story{font:8px var(--mono);letter-spacing:.08em;border-top:1px solid #324b4133;margin-top:18px;padding-top:16px;display:block}.source-story em{font-family:var(--serif);letter-spacing:0;font-size:14px}.source-story span{float:right}.no-patterns{text-align:center;border:1px solid var(--line);padding:90px 20px}.no-patterns h3{font-family:var(--serif);font-size:35px;font-weight:500}.pattern-north-star{text-align:center;color:#f3ecdc;background:#9c745d;place-content:center;min-height:650px;padding:100px 24px;display:grid}.pattern-north-star blockquote{letter-spacing:-.055em;margin:32px auto 55px;font-size:clamp(50px,7vw,105px);line-height:.84}.pattern-north-star em{color:#f0d69b}.pattern-north-star a{border-color:#ffffff73;justify-self:center}@media (width<=900px){.pattern-hero{grid-template-columns:1fr .45fr}.pattern-standard ol{grid-template-columns:repeat(2,1fr)}.browser-head{grid-template-columns:1fr}.pattern-search{max-width:500px}.pattern-grid{grid-template-columns:1fr}}@media (width<=680px){.pattern-header-name{display:none}.pattern-hero{min-height:700px;padding:95px 20px 110px;display:block}.pattern-hero h1{font-size:70px}.pattern-hero blockquote{font-size:18px}.pattern-orbit{opacity:.25;width:280px;height:280px;position:absolute;bottom:45px;right:-105px}.pattern-promise,.pattern-standard,.pattern-browser{padding:80px 20px}.pattern-promise h2,.pattern-standard h2,.browser-head h2{font-size:55px}.pattern-promise>div{grid-template-columns:1fr}.pattern-promise i{transform:rotate(90deg)}.pattern-standard ol{grid-template-columns:1fr 1fr}.pattern-standard li{min-height:175px;padding:16px}.pattern-filters{grid-template-columns:1fr 1fr;display:grid}.pattern-filters button{min-width:0}.pattern-card summary{min-height:330px;padding:22px}.pattern-card h3{margin-top:55px;font-size:43px}.pattern-card summary p{font-size:17px}.pattern-body{grid-template-columns:1fr;padding:0 14px 18px}.pattern-body .unlock,.pattern-links{grid-column:auto}.pattern-north-star{min-height:560px}.pattern-north-star blockquote{font-size:52px}.pattern-library footer{text-align:center;grid-template-columns:1fr}.pattern-library .footer-brand,.pattern-library .footer-meta{justify-self:center}}