/* Tweed Yard: a mill's swatch book */
:root{
--moss:#36412a;--moss2:#465438;--loden:#5d6b45;--peat:#2b2318;--bark:#5c3f25;--bracken:#8a5a2e;--rust:#9c4a22;
--straw:#dcc78f;--oat:#efe7d5;--card:#f8f2e4;--line:#c9bb9c;--ink2:#54493a;
--disp:"Young Serif",Georgia,"Times New Roman",serif;--txt:"Newsreader",Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background-color:var(--oat);color:var(--peat);font:400 1.125rem/1.62 var(--txt);
background-image:repeating-linear-gradient(0deg,#6b5a3a0a 0 1px,#0000 1px 3px),repeating-linear-gradient(90deg,#6b5a3a0a 0 1px,#0000 1px 3px)}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--rust);text-underline-offset:.16em;text-decoration-thickness:1px}
a:hover{color:var(--moss);text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--rust);outline-offset:2px}
h1,h2,h3{font-family:var(--disp);font-weight:400;line-height:1.14;color:var(--moss);margin:0}
.jump{position:absolute;left:8px;top:-60px;background:var(--straw);color:var(--peat);padding:.5rem .9rem;z-index:30}
.jump:focus{top:8px}
.smallcap{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600}

/* cloth: broken twill drawn with two opposed gradients */
.wv{--a:#2c3522;--b:#55634a;--c:9px;--f:#0000;position:relative;isolation:isolate;
background:radial-gradient(circle at 30% 40%,var(--f) 0 1.2px,#0000 1.6px) 0 0/37px 41px,radial-gradient(circle at 70% 60%,var(--f) 0 1px,#0000 1.4px) 0 0/53px 29px,repeating-linear-gradient(45deg,var(--a) 0 2px,var(--b) 2px 5px)}
.wv::before{content:"";position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(-45deg,var(--a) 0 2px,var(--b) 2px 5px);
-webkit-mask:repeating-linear-gradient(90deg,#000 0 calc(var(--c)*2),#0000 calc(var(--c)*2) calc(var(--c)*4));mask:repeating-linear-gradient(90deg,#000 0 calc(var(--c)*2),#0000 calc(var(--c)*2) calc(var(--c)*4))}
.c-moss{--a:#2c3522;--b:#5a6a48;--f:#d6b86a}
.c-peat{--a:#3a2a1a;--b:#8a6a44;--f:#c9d2a8;--c:6px}
.c-salt{--a:#46402f;--b:#b9ad8d;--f:#9c4a22;--c:11px}
.c-rust{--a:#5b2e16;--b:#a96a38;--f:#e8d7a0;--c:7px}
.c-lod{--a:#3c4a2f;--b:#8a9468;--f:#7a3d1c;--c:14px}
.c-bark{--a:#2b2318;--b:#6e5536;--f:#dcc78f;--c:5px}
/* other cloths for the chips */
.c-twill{background:repeating-linear-gradient(45deg,#3a2a1a 0 3px,#a07c4f 3px 6px)}
.c-plain{background:repeating-linear-gradient(0deg,#5d6b45 0 2px,#0000 2px 4px),repeating-linear-gradient(90deg,#2f3a24 0 2px,#a3ad86 2px 4px)}
.c-tooth{background:#e7dcc0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%2336412a' d='M0 0h1v1h-1zM1 0h1v1h-1zM2 0h1v1h-1zM3 0h1v1h-1zM6 0h1v1h-1zM7 0h1v1h-1zM0 1h1v1h-1zM1 1h1v1h-1zM2 1h1v1h-1zM3 1h1v1h-1zM5 1h1v1h-1zM6 1h1v1h-1zM0 2h1v1h-1zM1 2h1v1h-1zM2 2h1v1h-1zM3 2h1v1h-1zM4 2h1v1h-1zM5 2h1v1h-1zM0 3h1v1h-1zM1 3h1v1h-1zM2 3h1v1h-1zM3 3h1v1h-1zM4 3h1v1h-1zM7 3h1v1h-1zM0 4h1v1h-1zM1 4h1v1h-1zM0 5h1v1h-1zM3 5h1v1h-1zM2 6h1v1h-1zM3 6h1v1h-1zM1 7h1v1h-1zM2 7h1v1h-1z'/%3E%3C/svg%3E") 0 0/24px 24px}
.c-check{background:linear-gradient(90deg,#9c4a2255 0 2px,#0000 2px) 0 0/44px 44px,linear-gradient(0deg,#9c4a2255 0 2px,#0000 2px) 0 0/44px 44px,repeating-linear-gradient(90deg,#4d5a3c 0 3px,#d8cdb0 3px 6px,#4d5a3c 6px 9px,#d8cdb0 9px 22px),repeating-linear-gradient(0deg,#4d5a3c33 0 3px,#0000 3px 6px)}

/* pinking-shear edge, top and bottom */
.pink{--z:14px;-webkit-mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/var(--z) 51% repeat-x,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/var(--z) 51% repeat-x;mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/var(--z) 51% repeat-x,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/var(--z) 51% repeat-x}

/* the binding down the left */
.book{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh}
.spine{--c:12px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:1.2rem;padding:1.4rem 0 1.2rem 1.2rem;z-index:5;box-shadow:inset -10px 0 14px -10px #0009,3px 0 0 #1c2315}
.spine::after{content:"";position:absolute;top:0;bottom:0;right:7px;border-right:2px dashed var(--straw);opacity:.7;pointer-events:none}
.brand{display:block;width:176px;filter:drop-shadow(1px 2px 2px #0007)}
.navx{position:absolute;opacity:0;width:1px;height:1px}
.navbtn{display:none}
.tabs{display:flex;flex-direction:column;gap:.45rem;position:relative;z-index:1}
.tabs ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem}
.tabs a{display:block;position:relative;margin-right:-14px;padding:.38rem .8rem;background:var(--card);color:var(--peat);text-decoration:none;font-size:1rem;line-height:1.25;border-radius:3px 0 0 3px;border:1px solid #1c231555;border-right:0;box-shadow:1px 1px 2px #0005}
.tabs a:hover{background:var(--straw)}
.tabs a[aria-current]{background:var(--straw);font-weight:600;margin-right:-22px}
.tabs .sub{margin-top:.6rem}
.tabs .sub a{background:#e4d9bf;font-size:.92rem;padding:.26rem .8rem;margin-right:-6px}
.tabs .tag{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--straw);font-weight:600;margin:.5rem 0 0;text-shadow:0 1px 2px #000}
.leaf{min-width:0;padding:2.4rem clamp(1.4rem,4vw,3.4rem) 0 clamp(2.2rem,4vw,3.8rem);display:flex;flex-direction:column;min-height:100vh}
.leaf main{flex:1}
.page{max-width:1020px}

/* front page */
.cover{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:2.6rem;align-items:start;padding-bottom:2.6rem;border-bottom:2px dashed var(--line)}
.cover h1{font-size:clamp(2.3rem,4.3vw,3.5rem);margin:.5rem 0 1rem}
.cover p{margin:0 0 .9rem}
.cover .smallcap{color:var(--bracken)}
.pinned{transform:rotate(1.2deg);background:var(--card);padding:.75rem .75rem .55rem;box-shadow:2px 4px 12px #4a381f40}
.pinned::before{content:"";display:block;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#d68a5a,#7b2f10);margin:-1.3rem auto .3rem;box-shadow:1px 2px 3px #0007}
.credit{font-size:.8rem;line-height:1.35;color:var(--ink2);margin:.45rem 0 0}
.credit a{color:inherit}
.band{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin:2.4rem 0 1.3rem}
.band h2{font-size:clamp(1.6rem,2.8vw,2.2rem)}
.bunch{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:2.2rem 1.6rem}
.sw{grid-column:span 2;display:block;color:inherit;text-decoration:none}
.sw:nth-child(1){grid-column:span 3}
.sw:nth-child(6){grid-column:span 6}
.sw:nth-child(6) .tick{max-width:520px;margin-left:1.4rem}
.sw:nth-child(2){grid-column:span 3;margin-top:2.6rem}
.sw:nth-child(5){margin-top:-1.4rem}
.sw:hover{color:inherit}
.sw .wv{height:190px;display:block}
.sw:nth-child(n+3):nth-child(-n+5) .wv{height:150px}
.sw:hover .tick{background:var(--straw)}
.tick{position:relative;display:block;margin:-2.2rem .9rem 0;padding:.7rem .85rem .75rem;background:var(--card);box-shadow:1px 3px 7px #3a2a1a44;outline:1.5px dashed var(--bracken);outline-offset:-5px}
.tick b{display:block;font:400 1.24rem/1.2 var(--disp);color:var(--moss)}
.tick i{display:block;font-style:normal;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--bracken);font-weight:600;margin-bottom:.2rem}
.tick span{display:block;font-size:.98rem;line-height:1.38;margin-top:.3rem;color:var(--ink2)}
.reader{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:2.4rem;margin-top:3rem;padding-top:2rem;border-top:2px dashed var(--line)}
.reader h2{font-size:1.75rem;margin-bottom:.6rem}
.chips{list-style:none;margin:1rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem}
.chips div{height:74px;--c:6px;outline:1.5px dashed #f8f2e4aa;outline-offset:-4px}
.chips span{display:block;font-size:.86rem;margin-top:.25rem;line-height:1.2}
.ledger{width:100%;border-collapse:collapse;font-size:1rem}
.ledger td,.ledger th{border-bottom:1px solid var(--line);padding:.45rem .4rem .45rem 0;text-align:left;vertical-align:top}
.ledger th{font-weight:600;white-space:nowrap;padding-right:1rem;color:var(--moss)}
.sewn{display:flex;gap:1.1rem;align-items:center;margin-top:2.6rem;padding:1rem 1.3rem;background:var(--moss);color:var(--oat);outline:2px dashed var(--straw);outline-offset:-7px;max-width:640px}
.sewn a{color:var(--straw)}
.sewn p{margin:0;font-size:1.03rem;line-height:1.45}
.sewn svg{flex:none;width:44px}

/* selvedge foot */
.selv{--c:8px;margin:3rem calc(-1*clamp(1.4rem,4vw,3.4rem)) 0 calc(-1*clamp(2.2rem,4vw,3.8rem));padding:.95rem clamp(1.4rem,4vw,3.4rem) .95rem clamp(2.2rem,4vw,3.8rem);color:var(--oat);font-size:.96rem}
.selv p{margin:0;display:inline-block;background:var(--moss);padding:.2rem .7rem;line-height:1.5}
.selv a{color:var(--straw)}

/* inside pages */
.crumb{font-size:.9rem;margin:0 0 1rem;color:var(--ink2)}
.crumb a{color:inherit}
.intro h1{font-size:clamp(2.1rem,4.3vw,3.3rem);margin-bottom:.7rem}
.intro .lede{font-size:1.28rem;line-height:1.45;margin:0 0 1.4rem;color:var(--ink2);max-width:40em}
.cuff{display:grid;grid-template-columns:minmax(0,1fr) 214px;gap:2.6rem}
.prose{max-width:41em;min-width:0}
article.prose>p:first-of-type:first-letter{font:400 3.3em/.86 var(--disp);float:left;padding:.08em .1em 0 0;color:var(--bracken)}
.prose h2{font-size:clamp(1.5rem,2.6vw,1.95rem);margin:2.2rem 0 .7rem;padding-bottom:.4rem;border-bottom:2px dashed var(--line)}
.prose h3{font-size:1.2rem;margin:1.5rem 0 .4rem;color:var(--bark)}
.prose p{margin:0 0 1rem}
.prose ul,.prose ol{padding-left:1.35rem;margin:0 0 1.1rem}
.prose li{margin-bottom:.45rem}
.prose ol>li::marker{font-family:var(--disp);color:var(--bracken)}
.plate{margin:1.6rem 0}
.plate img,.plate svg{width:100%}
.plate figcaption{font-size:.92rem;line-height:1.4;color:var(--ink2);margin-top:.5rem}
.headimg{margin:0 0 1.8rem;max-width:940px}
.headimg img{width:100%}
.patch{background:var(--card);padding:1rem 1.2rem;outline:1.5px dashed var(--bracken);outline-offset:-6px;margin:1.5rem 0}
.patch p:last-child{margin:0}
.patch b:first-child{font-family:var(--disp);font-weight:400;color:var(--moss)}
.tbl{overflow-x:auto;margin:1.3rem 0}
.tbl table{border-collapse:collapse;width:100%;font-size:1rem;line-height:1.4;background:var(--card)}
.tbl th{font-weight:600;text-align:left;background:var(--moss);color:var(--oat);padding:.5rem .7rem}
.tbl td{padding:.55rem .7rem;border-top:1px solid var(--line);vertical-align:top}
.draws{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.9rem;margin:1.4rem 0 .5rem}
.draws figure{margin:0}
.draws figcaption{font-size:.92rem;line-height:1.3;margin-top:.35rem}
.draws b{display:block;font:400 1.05rem var(--disp);color:var(--moss)}
.paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem;margin:1.3rem 0}
.paths div{background:var(--card);padding:.8rem .9rem;border-top:6px solid var(--loden);font-size:1rem;line-height:1.4}
.paths div:nth-child(2){border-color:var(--bracken)}
.paths div:nth-child(3){border-color:var(--rust)}
.paths b{display:block;font:400 1.08rem/1.2 var(--disp);color:var(--moss);margin-bottom:.3rem}
.rota{list-style:none;padding:0!important;margin:1.3rem 0!important;border-left:3px dashed var(--bracken)}
.rota li{padding:0 0 .9rem 1.1rem;margin:0}
.rota b{display:block;font-family:var(--disp);font-weight:400;font-size:1.1rem;color:var(--moss)}
.refs{margin-top:2.4rem;padding:1rem 1.2rem;border:1px solid var(--line);font-size:.98rem;line-height:1.45}
.refs h2{font-size:1.15rem;border:0;margin:0 0 .4rem;padding:0}
.refs ul{margin:0;padding-left:1.1rem}
.margin{align-self:start;position:sticky;top:1.4rem;font-size:.98rem;line-height:1.35}
.card{background:var(--card);padding:.9rem .95rem 1rem;outline:1.5px dashed var(--bracken);outline-offset:-5px;box-shadow:1px 3px 7px #3a2a1a30;margin-bottom:1.1rem}
.card .wv{height:46px;margin:-.9rem -.95rem .7rem;--c:6px}
.card dl{margin:0}
.card dt{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--bracken);margin-top:.5rem}
.card dd{margin:0}
.margin h2{font:600 .72rem var(--txt);letter-spacing:.13em;text-transform:uppercase;color:var(--bracken);margin:0 0 .4rem}
.margin ul{list-style:none;margin:0;padding:0}
.margin li{padding:.4rem 0;border-top:1px dashed var(--line)}

/* article list */
.jumpers{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1rem;padding:0;list-style:none}
.jumpers a{display:block;padding:.28rem .8rem;background:var(--moss);color:var(--oat);text-decoration:none;border-radius:3px 3px 0 0;font-size:.98rem}
.jumpers a:hover{background:var(--bracken);color:#fff}
.rack{margin-top:2.2rem}
.rack>h2{font-size:1.75rem;margin-bottom:.2rem}
.rack>p{margin:0 0 1rem;color:var(--ink2)}
.hang{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:1.4rem;padding:1.2rem 0;border-top:2px dashed var(--line)}
.hang img{width:100%}
.hang h3{font-size:1.45rem;margin-bottom:.35rem}
.hang h3 a{color:inherit;text-decoration:none}
.hang h3 a:hover{color:var(--rust)}
.hang p{margin:0 0 .4rem}
.hang .when{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--bracken)}
.creds{font-size:.95rem;line-height:1.4}
.creds li{margin-bottom:.45rem}

@media (max-width:1120px){.cuff{grid-template-columns:minmax(0,1fr)}.margin{position:static;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;max-width:41em;margin-top:1.8rem}}
@media (max-width:980px){
.cover,.reader{grid-template-columns:minmax(0,1fr);gap:1.8rem}
.bunch{grid-template-columns:repeat(2,minmax(0,1fr))}
.sw,.sw:nth-child(n){grid-column:span 1;margin-top:0}
.sw:nth-child(6) .tick{margin-left:.9rem}
}
@media (max-width:820px){
body{font-size:1.09rem}
.book{display:block}
.spine{position:relative;height:auto;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:.7rem 16px;gap:.6rem;box-shadow:0 3px 0 #1c2315}
.spine::after{top:auto;left:0;right:0;bottom:5px;border-right:0;border-bottom:2px dashed var(--straw)}
.brand{width:128px}
.navbtn{display:block;padding:.35rem .85rem;background:var(--card);border-radius:3px;font-size:1rem;cursor:pointer;color:var(--peat);box-shadow:1px 1px 2px #0005}
.navx:focus-visible+.navbtn{outline:3px solid var(--straw);outline-offset:2px}
.tabs{display:none;width:100%;padding-bottom:.6rem}
.navx:checked~.tabs{display:flex}
.navx:checked+.navbtn{background:var(--straw)}
.tabs a,.tabs .sub a,.tabs a[aria-current]{margin-right:0;border-radius:3px;border:1px solid #1c231555}
.leaf{padding:1.5rem 16px 0}
.selv{margin:2.4rem -16px 0;padding:.8rem 16px}
.pinned{transform:none}
.draws{grid-template-columns:repeat(2,minmax(0,1fr))}
.paths{grid-template-columns:minmax(0,1fr)}
.hang{grid-template-columns:minmax(0,1fr);gap:.7rem}
}
@media (max-width:520px){
.bunch{grid-template-columns:minmax(0,1fr)}
.sw .wv,.sw:nth-child(n+3):nth-child(-n+5) .wv{height:120px}
.chips{grid-template-columns:repeat(2,minmax(0,1fr))}
.sewn{flex-direction:column;align-items:flex-start}
.tick{margin:-1.8rem .6rem 0}
.intro .lede{font-size:1.16rem}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}