@font-face {
font-family: 'FT88';
src: url('FT88-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'FT88';
src: url('FT88-Italic.woff') format('woff');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'FT88';
src: url('FT88-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'FT88-Serif';
src: url('FT88-Serif.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'FT88-School';
src: url('FT88-School.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'FT88-Gothique';
src: url('FT88-Gothique.woff') format('woff');
font-weight: normal;
font-style: normal;
}

*{box-sizing: border-box;}

html{
scroll-behavior: smooth;
}

body{
background: white;
color: black;
background-image: linear-gradient(rgba(0,0,0,.1) 0.5px, transparent 0.5px), linear-gradient(90deg, rgba(0,0,0,.1) 0.5px, transparent 0.5px);
background-size: 4px 4px;
margin: 0;
font-size: 16px;
line-height: 1.55;
font-family: FT88;
image-rendering: pixelated;
}

/* the whole viewport sits inside the stitched frame */
#frame{
position: fixed;
inset: 5px;
pointer-events: none;
z-index: 60;
border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAKqADAAQAAAABAAAAKgAAAADUGqULAAAA+0lEQVRYCe2XgQqDMAxE3dj/f/I2z1GIwfZs0hU3riA2JmnOZ6y4LBoiIAIiIAIi8G8EnusN4agN5q/l7a4/dlbMuJE05ifpeTdIvcwymFuyzG9S+fTOQ6oRIOWF+mDvn0rXk/LimO3Js/jNHyHqSZ4qZIIg9KtksySN1m3aRTZC1Be8rN1F4uAuQk8mQhRCs2PEGlkNyu8mgB7DER2h/EiPjtgDR6xRBRV6W6urfT6/p59MhGij9rVcP7WPZnoMuVP3UU/Wv81HdlhgpkdR1JK189Ks9tp0kkVEOUNwixTzl3Wa5xH/TC2RKM78TYFyioAIiIAIiMA1CbwBvcs9zQEwG+0AAAAASUVORK5CYII=") 14 / 14px / 13px round;
border-width: 1px;
border-style: solid;
}

p{
filter: url("#distort");
overflow-wrap: break-word;
text-wrap: pretty;
}
img, canvas{
max-width: 100%;
}
h1, h2, h3, h4, h5, h6{
font-size: inherit;
font-weight: inherit;
filter: url("#distort");
color: #114826;
}
h1{
font-family: "FT88-Gothique";
font-size: clamp(40px, 5vw, 68px);
margin: 0;
line-height: 1.05;
min-height: 1em;
}
h2{
font-family: FT88-School;
font-size: 30px;
color: #114826;
margin: 0 0 6px;
scroll-margin-top: 40px;
}
h2:hover{
filter: url("#distort2");
}
a{
color: inherit;
}
a[href^="mailto:"]{
cursor: copy;
}
a.copied{
color: #114826;
font-weight: bold;
}

/* ---------------- selvage sidebar ---------------- */

aside{
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 232px;
padding: 34px 18px 34px 32px;
display: flex;
flex-direction: column;
z-index: 20;
}
.wordmark{
font-family: "FT88-Gothique";
font-size: 26px;
color: #114826;
filter: url("#distort");
line-height: 1.1;
margin: 0 0 26px;
}
.legend{
display: flex;
flex-direction: column;
gap: 10px;
filter: url("#distort");
}
.legend a{
text-decoration: none;
color: #114826;
}
.legend a:hover{
filter: url("#distort2");
text-decoration: underline;
}
.legend a .sym{
display: inline-block;
width: 22px;
font-weight: bold;
}
.legend a.active{
font-weight: bold;
text-decoration: underline;
}
#spine-track{
flex: 1;
margin: 26px 0 22px 7px;
border-left: 2px dashed rgba(0,0,0,.18);
position: relative;
min-height: 60px;
}
#spine{
position: absolute;
top: 0;
left: -2px;
width: 0;
height: 0;
border-left: 2px dashed #114826;
}
.side-links{
display: flex;
flex-direction: column;
gap: 6px;
font-size: 12px;
margin-left: -16px;
filter: url("#distort");
}
.side-links a{
color: #114826;
}
.side-links a:hover{
filter: url("#distort2");
}

/* ---------------- main ---------------- */

main{
margin-left: 232px;
padding: 52px 56px 40px 30px;
max-width: 1500px;
}
main > p{
max-width: 68ch;
margin-top: 10px;
}
section{
margin-bottom: 56px;
}
section > p{
max-width: 74ch;
margin-top: 8px;
}
.hero{
margin-bottom: 48px;
}
.hero p{
max-width: 92ch;
margin-top: 20px;
font-size: 17px;
}
@media (max-width: 860px) {
.wide-br{display: none;}
}

/* ---------------- work grid + cards ---------------- */

.display{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr));
gap: 20px;
margin-top: 26px;
}
.item{
border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAKqADAAQAAAABAAAAKgAAAADUGqULAAAA+0lEQVRYCe2XgQqDMAxE3dj/f/I2z1GIwfZs0hU3riA2JmnOZ6y4LBoiIAIiIAIi8G8EnusN4agN5q/l7a4/dlbMuJE05ifpeTdIvcwymFuyzG9S+fTOQ6oRIOWF+mDvn0rXk/LimO3Js/jNHyHqSZ4qZIIg9KtksySN1m3aRTZC1Be8rN1F4uAuQk8mQhRCs2PEGlkNyu8mgB7DER2h/EiPjtgDR6xRBRV6W6urfT6/p59MhGij9rVcP7WPZnoMuVP3UU/Wv81HdlhgpkdR1JK189Ks9tp0kkVEOUNwixTzl3Wa5xH/TC2RKM78TYFyioAIiIAIiMA1CbwBvcs9zQEwG+0AAAAASUVORK5CYII=") 14 / 14px / 13px round;
border-width: 1px;
border-style: solid;
position: relative;
background: rgba(255,255,255,.55);
transform: rotate(var(--tilt, 0deg));
transition: transform .18s ease;
}
.item:hover{
transform: rotate(0deg);
}
.item:hover > .item-title > p:first-child{
filter: url("#distort2");
}
.item p{
margin: 13px;
font-size: 14px;
}
.item figure{
margin: 13px;
display: flex;
height: 250px;
justify-content: start;
overflow-x: scroll;
scroll-snap-type: x mandatory;
gap: 16px;
scroll-behavior: smooth;
}
.item figure > img{
object-fit: contain;
scroll-snap-align: center;
width: 100%;
box-sizing: border-box;
border: 2px solid black;
background: white;
}
.item-title{
margin: 13px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.item-title p{margin: 0; font-size: 15px;}
.arrows{
display: flex;
align-items: center;
}
.arrows > button{
cursor: pointer;
font-family: FT88;
font-size: 100%;
background: none;
border: none;
padding: 0 2px;
}
.arrows > [type="radio"]{
cursor: pointer;
appearance: none;
background: none;
border-radius: 4px;
width: 14px;
height: 14px;
border: 7px solid #a7a7a7;
}
.arrows > [type="radio"]:checked{
border: 7px solid #114826;
}
.arrows > .counter{
font-size: 12px;
min-width: 40px;
text-align: center;
color: #114826;
}

hr{
border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAVKADAAQAAAABAAAAVAAAAAC3aM1AAAABz0lEQVR4Ae3YAU/DIBCG4en//8kalSnNt0s7YMC3Mt8lS6/tUW6P5RK8XPgggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAgggsL7Ax89P+Pr7pvjUn7dTV/dbXMLUz6lrftdKifsFAO03tD+htQdqflzuqfjcT9Oxpqfq82ryu4Ac/SiilOYs5ZfuR5DW/Di+6Zwl38RVTnaAfkoZGsvlm1BzNM5Jek3jfD8eNUfjmMc5AggggAACCCCAAAII3BGw7qV36rDOX9pX79TXfMm6l96pzjq/Y+u58xtf95Ib9Bl76WfMOfSN0Z4Vl9vQiR58WKopf4f/f3RGD42IM+Z40PI6bGp97iXfA7HE2BmgK/WslWrdXqjcr9JxeM/aZjkOrD3d0d+m9qxjx+2Odf4ZS377Jf8xcIBqn9LY5a1zauyan3kQQAABBBBAAAEEEHgJAd1L1+zlS/ml+xGtNT+Obzo/416+tPcu3Y8ArflxfNO5Y+vZVNDqyQ5Q3T9rfGRXk5PH1uRqjsb5GUOPjiXfW7B1yfYW63hDe2tcajygg/9cK4Bq39N4MAWPQwABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQMAj8A1wbmNajOketQAAAABJRU5ErkJggg==") 26 /  26px / 0 round;
border-width:  26px;
border-style:  solid;
filter: url("#distort");
}

.print-item{
max-width: 360px;
}
.print-item figure{
height: 360px;
}

/* ---------------- stitch trail overlay ---------------- */

#trail{
position: fixed;
inset: 0;
width: 100vw;
height: 100vh;
pointer-events: none;
z-index: 40;
}

/* ---------------- guest sampler ---------------- */

#sampler-item{
max-width: 820px;
}
#sampler-canvas{
display: block;
margin: 13px;
border: 2px solid black;
background: white;
touch-action: none;
cursor: crosshair;
image-rendering: auto;
}
.sampler-tools{
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.sampler-tools button{
cursor: pointer;
font-family: FT88;
font-size: 13px;
background: none;
border: 2px solid black;
padding: 2px 8px;
}
.sampler-tools .swatch{
width: 20px;
height: 20px;
padding: 0;
border: 2px solid rgba(0,0,0,.35);
}
.sampler-tools .swatch[aria-pressed="true"]{
border: 2px solid black;
outline: 2px solid #114826;
}
.sampler-tools #tool-eraser[aria-pressed="true"]{
outline: 2px solid #114826;
}
.sampler-actions{
margin: 0 13px 13px;
display: flex;
gap: 10px;
flex-wrap: wrap;
filter: url("#distort");
}
.sampler-actions button{
cursor: pointer;
font-family: FT88;
font-size: 13px;
background: none;
border: 2px solid black;
padding: 3px 10px;
}
.sampler-actions button:hover{
background: #114826;
color: white;
}

/* pinned sampler gallery */
#sampler-gallery{
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 20px;
}
.pinned{
position: relative;
border: 2px solid black;
background: white;
transform: rotate(var(--tilt, 0deg));
}
.pinned canvas{
display: block;
cursor: pointer;
}
.pinned .unpin{
position: absolute;
top: -10px;
right: -10px;
width: 20px;
height: 20px;
line-height: 1;
font-family: FT88;
font-size: 11px;
cursor: pointer;
background: white;
border: 2px solid black;
padding: 0;
}
.gallery-hint{
font-size: 12px;
opacity: .75;
}

footer{
margin-top: 40px;
}

/* ---------------- small screens ---------------- */

@media (max-width: 860px) {
aside{
position: static;
width: auto;
padding: 26px 22px 0;
}
.wordmark{margin-bottom: 12px;}
.legend{flex-direction: row; flex-wrap: wrap; gap: 6px 20px;}
.legend a .sym{width: auto; margin-right: 5px;}
#spine-track{display: none;}
.side-links{flex-direction: row; gap: 18px; margin-top: 12px; margin-left: 0;}
main{margin-left: 0; padding: 30px 22px;}
.hero{margin-bottom: 56px;}
section{margin-bottom: 56px;}
}
@media (max-width: 550px) {
body{font-size: 15px;}
.h1-last{display: none;}
h1{white-space: nowrap; font-size: 34px; text-align: center;}
}