:root{
  --cloth:#f1efe8;
  --ink:#1d1c20;
  --gutter:clamp(16px,4vw,56px);
  --gap:clamp(160px,38vh,420px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip}
body{
  background:var(--cloth) url(../assets/img/cotton.png) 0 0/512px auto repeat;
  color:var(--ink);overflow-x:clip;min-height:100vh;position:relative;
}
/* soft daylight falling across the cotton */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(130% 100% at 30% 15%,rgba(255,255,255,.3),transparent 55%,rgba(120,105,80,.1) 100%)}
a{color:inherit;text-decoration:none}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.e{display:block;position:relative}
.e canvas{display:block}

main{position:relative;z-index:2}

/* hero: the wordmark, each letter worked in a different way */
.hero{padding:clamp(32px,7vh,90px) var(--gutter) 0;min-height:80vh}
.e-hero{width:min(100%,1300px)}

/* each piece sits alone on the cloth with plenty of room around it */
.piece{padding:var(--gap) var(--gutter) 0;display:flex}
.piece .w,.piece .drawing{flex:none}
.p-foals{padding-left:10vw}                         .p-foals .w{width:min(640px,84vw)}
.p-lambs{justify-content:flex-end;padding-right:8vw} .p-lambs .w{width:min(560px,84vw)}
.p-faces{justify-content:center}                     .p-faces .w{width:min(500px,82vw)}
.p-chairs{justify-content:center}                    .p-chairs .w{width:min(760px,90vw)}
.p-dog{padding-left:14vw}                            .p-dog .w{width:min(540px,84vw)}
.p-rabbits{justify-content:flex-end;padding-right:16vw} .p-rabbits .w{width:min(380px,72vw)}
.p-iskry{justify-content:center}                     .p-iskry .w{width:min(560px,86vw)}
.p-falling{padding-left:16vw}                        .p-falling .w{width:min(520px,84vw)}

/* little sparkles and stars between the pictures, sewn as they scroll into view */
.tiny{display:flex;align-items:flex-start;gap:clamp(18px,3vw,40px);padding:calc(var(--gap) * .5) var(--gutter) 0}
.tiny + .piece,.tiny + .hoop-wrap{padding-top:calc(var(--gap) * .5)}
.t-left{padding-left:22vw}
.t-center{justify-content:center}
.t-right{justify-content:flex-end;padding-right:24vw}
.star{display:block;flex:none;width:var(--s);margin-top:var(--dy)}

/* the loose red thread, laid in as you scroll */
svg.loose{position:absolute;left:0;top:0;width:100%;pointer-events:none;z-index:1}

/* dye bleeding through the cotton */
canvas.bands{position:absolute;left:0;top:0;width:100%;z-index:0;pointer-events:none;mix-blend-mode:multiply;opacity:.74}

/* the hoop: turned beech rings */
.hoop-wrap{padding:var(--gap) var(--gutter) 0;display:flex;flex-direction:column;align-items:center;gap:36px}
.hoop{--d:min(620px,86vw);width:var(--d);height:var(--d);border-radius:50%;position:relative;padding:14px;
  background:
    radial-gradient(circle at 50% 50%,transparent calc(50% - 14px),#7d5532 calc(50% - 13px),#c49563 calc(50% - 11px),#dcb17e calc(50% - 7px),#b9875a calc(50% - 3px),#8a5f38 50%,transparent calc(50% + 1px)),
    conic-gradient(from 20deg,#c99a68,#d9ae7c,#b98a5c,#d4a674,#c39262,#dcb382,#c99a68)}
.hoop-fabric{position:relative;width:100%;height:100%;border-radius:50%;overflow:hidden;
  background:var(--cloth) url(../assets/img/cotton.png) 0 0/440px auto;
  box-shadow:inset 0 0 0 1px rgba(90,70,40,.35),inset 0 0 18px rgba(120,100,70,.18)}
.hoop-pattern{position:absolute;inset:0}
.hoop-cloth{position:absolute;inset:0;cursor:crosshair;touch-action:none}

.tools{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 30px;max-width:100%}
.tool-group{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.tools button{appearance:none;border:0;background:transparent;padding:6px;border-radius:999px;cursor:pointer;color:var(--ink);
  outline:1.5px dashed transparent;outline-offset:-1px;transition:outline-color .2s}
.tools button canvas{display:block}
.tools button[aria-checked="true"]{outline-color:rgba(29,28,32,.7)}
.tools button:hover{outline-color:rgba(29,28,32,.3)}
.tools button:focus-visible{outline:2px solid var(--ink)}
.unpick{width:42px;height:42px;display:grid;place-items:center}

.foot{display:flex;justify-content:center;padding:var(--gap) var(--gutter) 40px}
.e-mail{width:220px}
.e-mail:hover canvas{opacity:.65}

@media (max-width:760px){
  body{background-size:420px auto}
  .hero{min-height:60vh}
  .piece,.tiny{padding-left:var(--gutter)!important;padding-right:var(--gutter)!important}
}