/* QuiltPilot Fabric UI v3: shared visual layer for every page.
   Presentation only: no content, markup, script, URL or SEO changes.
   Re-creates the approved template's material system (real relief textures blended into dyed cottons,
   padded edges, running stitches, warm top-left lighting) and its composition, applied to each page type. */

@font-face{font-family:"Lora";src:url("/assets/fabric/fonts/lora-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Lora";src:url("/assets/fabric/fonts/lora-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Nunito Sans";src:url("/assets/fabric/fonts/nunito-sans-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Nunito Sans";src:url("/assets/fabric/fonts/nunito-sans-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Nunito Sans";src:url("/assets/fabric/fonts/nunito-sans-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Satisfy";src:url("/assets/fabric/fonts/satisfy-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}

/* ============================== tokens (template values) ============================== */
:root{
  --cream-50:#fffaf2;--cream:#fbf2e3;--cream-200:#f5e9d7;--cream-300:#e8d8c0;--cream-edge:#d6c1a2;
  --plum:#4b2c3b;--plum-deep:#2f1b28;--mauve:#6e4a66;--teal:#2f5754;--teal-card:#29504d;--teal-deep:#21404a;--teal-green:#22473f;
  --coral:#c8654f;--coral-card:#9f432f;--mustard:#d29a2d;--olive:#5c5c2e;--navy:#263a55;--burgundy:#6a2c3a;--sage:#8ea486;
  --ink:#2a2927;--ink-body:#3a332f;--ink-muted:#5a4d45;--on-dark:#fffaf2;--on-dark-2:#f3e8d9;--accent-script:#c8705e;
  --font-display:"Lora","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --font-body:"Nunito Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-script:"Satisfy","Brush Script MT",cursive;
  --tex-cloth-light:url("/assets/fabric/textures/relief-cloth-light.webp");
  --tex-cloth-dark:url("/assets/fabric/textures/relief-cloth-dark.webp");
  --tex-quilt-light:url("/assets/fabric/textures/relief-quilt-light.webp");
  --tex-quilt-dark:url("/assets/fabric/textures/relief-quilt-dark.webp");
  --tex-hero-light:url("/assets/fabric/textures/relief-hero-light.webp");
  --print-botanical:url("/assets/fabric/textures/print-teal-floral.webp");
  --shadow-color:52 36 24;
  --fabric-shadow:0 1px 1px rgb(var(--shadow-color)/.14),0 3px 6px rgb(var(--shadow-color)/.12),0 12px 24px -8px rgb(var(--shadow-color)/.28);
  --fabric-shadow-lg:0 2px 2px rgb(var(--shadow-color)/.12),0 8px 16px rgb(var(--shadow-color)/.12),0 24px 40px -12px rgb(var(--shadow-color)/.32);
  --padded:inset 0 1px 0 rgb(255 255 255/.5),inset 0 -2px 3px rgb(var(--shadow-color)/.10),inset 0 0 18px rgb(var(--shadow-color)/.08);
  --padded-dark:inset 0 1px 0 rgb(255 255 255/.14),inset 0 -3px 5px rgb(0 0 0/.18),inset 0 0 22px rgb(0 0 0/.16);
  --inset-field:inset 0 2px 3px rgb(var(--shadow-color)/.12),inset 0 0 0 1px rgb(var(--shadow-color)/.14);
  --stitch:rgba(122,96,72,.55);--stitch-light:rgba(247,236,218,.78);
  --focus-ring:0 0 0 3px #fcf7ef,0 0 0 5px #2f5754;
  /* legacy palette remapped so inline rules that read these variables adopt the fabric colours */
  --purple:var(--plum);--lav:var(--cream-200);--border:#b49c7e;--white:var(--cream-50);--red:#8f2a3a;--orange:var(--mustard);--blue:var(--navy);
}

/* ============================== the quilted cloth the whole page sits on ============================== */
html{background:var(--cream)}
body{font-family:var(--font-body);color:var(--ink-body);line-height:1.6;background-color:var(--cream);
  background-image:linear-gradient(rgba(251,244,233,.66),rgba(251,244,233,.66)),var(--tex-quilt-light);
  background-size:auto,576px;background-blend-mode:normal,multiply;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink);line-height:1.2}
a{color:var(--teal);text-underline-offset:3px}
a:hover{color:var(--plum)}
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:8px}
::selection{background:rgb(200 101 79/.25)}
.backdrop{background:rgba(47,27,40,.5)}

section h2,article h2{font-weight:600;letter-spacing:-.005em;color:var(--ink)}
section>.wrap>h2:first-child::after,article h2::after,.cta h2::after{
  content:"";display:block;width:80px;height:16px;margin-top:6px;background:url("/assets/fabric/shapes/flourish.svg") left center/contain no-repeat}
.cta h2::after,.cta-box h2::after{margin-inline:auto}
.panel h2::after,.result h2::after,.faq h2::after,.tool h2::after{display:none}
section .sub{color:var(--ink-body);font-size:1.05rem;text-shadow:0 0 8px rgba(251,244,233,.9),0 0 2px rgba(251,244,233,.9)}
section>.wrap>h2:first-child{text-shadow:0 0 10px rgba(251,244,233,.9),0 1px 0 rgba(255,255,255,.5)}
section p{max-width:75ch}
main>section>.wrap>p a{color:var(--plum-deep);text-decoration-color:rgb(200 101 79/.8)}
main>section>.wrap>p{text-shadow:0 0 8px rgba(251,244,233,.9),0 0 2px rgba(251,244,233,.9)}

/* ============================== header: cream cotton with a stitched hem ============================== */
header{background-color:var(--cream);background-image:var(--tex-cloth-light);background-size:512px;background-blend-mode:multiply;border-bottom:0;position:sticky;
  box-shadow:inset 0 2px 3px rgb(var(--shadow-color)/.12),inset 0 -6px 6px -4px rgb(var(--shadow-color)/.16),0 3px 5px rgb(var(--shadow-color)/.22),0 10px 18px -8px rgb(var(--shadow-color)/.28)}
header::after{content:"";position:absolute;left:0;right:0;bottom:6px;border-bottom:1.5px dashed var(--stitch);pointer-events:none;filter:drop-shadow(.6px .9px 0 rgb(var(--shadow-color)/.2))}
.header-in{padding-bottom:12px}
.logo{font-family:var(--font-display);font-weight:700;font-size:30px;color:var(--plum);letter-spacing:-.01em;gap:12px}
.logo svg{display:none}
.logo::before{content:"";width:54px;height:54px;flex:none;background:url("/assets/fabric/images/logo-quilt-star.svg") center/contain no-repeat}
nav a{color:var(--ink);font-weight:700;border-radius:6px;padding:8px 11px;background:none}
nav a:hover{background:none;color:var(--plum);text-decoration:underline dashed rgb(200 101 79/.8) 1.5px;text-underline-offset:6px}
nav a.active{background:none;color:var(--plum);text-decoration:underline dashed var(--coral) 2px;text-underline-offset:6px;box-shadow:none}
.menu-btn,.drawer-close,#site-search-icon{color:var(--plum)}
.menu-btn,.drawer-close{background-color:var(--cream-50);background-image:var(--tex-cloth-light);background-blend-mode:multiply;border:0;box-shadow:var(--inset-field),0 1px 0 rgba(255,255,255,.7)}
.header-search{background-color:var(--cream-50);background-image:var(--tex-cloth-light);background-blend-mode:multiply;border:0;box-shadow:var(--inset-field),0 1px 0 rgb(255 255 255/.7)}
.header-search input{color:var(--ink)}
/* the thin row under the header is a plum hem tape with a running stitch (the template's announcement bar, without extra copy) */
.ruler{height:14px;background-color:var(--plum);
  background-image:repeating-linear-gradient(90deg,rgba(247,236,218,.7) 0 7px,transparent 7px 13px),var(--tex-cloth-dark);
  background-size:100% 1.5px,512px;background-position:0 50%,0 0;background-repeat:repeat-x,repeat;background-blend-mode:normal,overlay;
  box-shadow:inset 0 3px 4px rgba(0,0,0,.3),inset 0 -2px 3px rgba(0,0,0,.2)}

/* ============================== hero: the template's composition ==============================
   Cream quilted cloth with a cut, stitched wavy hem over a botanical teal band edged with lace;
   props (thread, scissors, button) at left, patchwork quilt at right, title centred. */
.hero{position:relative;isolation:isolate;overflow:hidden;color:var(--ink);padding:54px 0 124px;text-align:center;
  background-color:var(--teal-deep);
  background-image:url("/assets/fabric/shapes/lace-trim.svg"),linear-gradient(0deg,rgba(0,0,0,0) 0,rgba(0,0,0,.35) 100%),var(--tex-cloth-dark),var(--print-botanical);
  background-size:22px 14px,100% 100%,512px,440px;background-position:left bottom,0 0,0 0,0 0;background-repeat:repeat-x,no-repeat,repeat,repeat;
  background-blend-mode:normal,normal,overlay,normal}
.hero::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:0;bottom:56px;width:auto;opacity:1;mix-blend-mode:normal;pointer-events:none;
  background-color:var(--cream-200);
  background-image:url("/assets/fabric/shapes/wave-stitch-dark.svg"),radial-gradient(120% 90% at 42% 30%,rgb(255 251 244/.45),transparent 60%),var(--tex-hero-light);
  background-size:640px 64px,auto,576px;background-position:left bottom,0 0,0 0;background-repeat:repeat-x,no-repeat,repeat;
  background-blend-mode:normal,normal,multiply;
  -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 63px) no-repeat,url("/assets/fabric/shapes/wave-mask-bottom.svg") bottom left/640px 64px repeat-x;
          mask:linear-gradient(#000 0 0) top/100% calc(100% - 63px) no-repeat,url("/assets/fabric/shapes/wave-mask-bottom.svg") bottom left/640px 64px repeat-x}
.hero::after{content:"";position:absolute;z-index:-2;left:0;right:0;bottom:51px;height:64px;pointer-events:none;
  background:url("/assets/fabric/shapes/wave-mask-bottom.svg") bottom left/640px 64px repeat-x;filter:blur(3px);opacity:.45}
.hero .wrap{position:relative;z-index:1;max-width:760px}
.hero h1{color:var(--ink);font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,1.2rem + 2.6vw,3.1rem);line-height:1.1;letter-spacing:-.012em;margin-inline:auto;max-width:none;text-shadow:0 1px 0 rgb(255 255 255/.55)}
.hero p{color:var(--ink-body);margin-inline:auto;font-size:1.15rem;line-height:1.5;text-shadow:0 1px 0 rgb(255 255 255/.4)}
.hero .breadcrumb{color:var(--ink-muted);font-size:.98rem}
.hero .breadcrumb a{color:var(--plum-deep);text-decoration:underline;text-decoration-color:rgb(200 101 79/.7)}
.hero p a{color:var(--plum);text-decoration:underline}
.hero .search{margin-inline:auto;text-align:left}
.hero .search label{color:var(--ink);font-family:var(--font-display);font-size:1.15rem}
.hero .search-note{color:var(--ink-muted);font-size:15px;text-align:center;margin-top:14px}
.hero .search-chips{justify-content:center}
/* template ribbon: teal cotton pennant with stitched ends */
.badge,.hero .badge{position:relative;display:inline-block;padding:7px 34px 8px;margin-bottom:16px;border-radius:0;
  background-color:var(--teal);background-image:var(--tex-cloth-dark);background-size:512px;background-blend-mode:overlay;color:var(--on-dark);
  font-size:.8rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  clip-path:polygon(0 0,100% 0,calc(100% - 14px) 50%,100% 100%,0 100%,14px 50%);box-shadow:none}
.badge::before,.badge::after{content:"";position:absolute;left:20px;right:20px;border-top:1.2px dashed rgb(247 236 218/.6)}
.badge::before{top:3px}.badge::after{bottom:3px}
/* props at the left; the quilt only appears where it cannot reach the (640px, centred) text column */
@media(min-width:1000px){
  .hero .wrap{max-width:640px}
  .hero::before{background-image:url("/assets/fabric/shapes/wave-stitch-dark.svg"),url("/assets/fabric/images/hero-sewing-tools.webp"),radial-gradient(120% 90% at 42% 30%,rgb(255 251 244/.45),transparent 60%),var(--tex-hero-light);
    background-size:640px 64px,300px auto,auto,576px;background-position:left bottom,left -30px bottom -6px,0 0,0 0;background-repeat:repeat-x,no-repeat,no-repeat,repeat;
    background-blend-mode:normal,normal,normal,multiply}
}
@media(min-width:1260px){
  .hero::before{background-image:url("/assets/fabric/shapes/wave-stitch-dark.svg"),url("/assets/fabric/images/hero-quilt.webp"),url("/assets/fabric/images/hero-sewing-tools.webp"),radial-gradient(120% 90% at 42% 30%,rgb(255 251 244/.45),transparent 60%),var(--tex-hero-light);
    background-size:640px 64px,auto 100%,300px auto,auto,576px;background-position:left bottom,right -385px top -6px,left -30px bottom -6px,0 0,0 0;background-repeat:repeat-x,no-repeat,no-repeat,no-repeat,repeat;
    background-blend-mode:normal,normal,normal,normal,multiply}
}
@media(min-width:1500px){
  .hero::before{background-position:left bottom,right -300px top -6px,left -30px bottom -6px,0 0,0 0;background-size:640px 64px,auto 108%,340px auto,auto,576px}
}

/* ============================== fabric surfaces ============================== */
/* the pages' inline CSS sets no-repeat/top on these; fabric must tile from the corner */
.panel,.result,.faq,.callout,.email-box,.cta,.cta-box,.step,.tool,.card,.guide{background-repeat:repeat;background-position:0 0}
.panel,.result,.faq,.callout,.email-box,.cta,.cta-box,.step,.tool,.card,.guide{position:relative;border-radius:10px;overflow:visible}
.panel>*,.result>*,.faq>*,.callout>*,.email-box>*,.cta>*,.cta-box>*,.step>*,.tool>*,.card>*,.guide>*{position:relative;z-index:1}
.panel::after,.result::after,.faq::after,.callout::after,.email-box::after,.cta::after,.cta-box::after,.step::after,.tool::after,.card::after,.guide::after,
article>.wrap::after,.trust>.wrap::after,main>section:not(.hero)>.wrap:not(:has(.calc-grid,.tools,.cards,.guide-list,.steps,.cta-box,.cta,.faq))::after{
  content:"";position:absolute;inset:8px;border:1.5px dashed var(--stitch);border-radius:6px;pointer-events:none;z-index:0;
  filter:drop-shadow(.6px .9px 0 rgb(var(--shadow-color)/.2))}

/* cream cotton: the template's padded cloth, texture un-veiled so the weave reads as real fabric */
.panel,.step,.faq,.email-box{background-color:var(--cream-50);color:var(--ink-body);border:0;padding:26px;
  background-image:var(--tex-cloth-light);background-size:512px;background-blend-mode:multiply;
  box-shadow:var(--padded),var(--fabric-shadow-lg)}
.panel h2,.panel h3,.step h3,.faq h3,.faq-q{color:var(--ink)}
.step p,.faq p,.faq-a,.note{color:var(--ink-body)}
.note{font-size:15px}
.note a,.sub a{color:var(--plum-deep);font-weight:700;text-decoration-color:rgb(200 101 79/.8)}
/* step cards behave like the template's label cards: cream patch over a dyed strip */
.step{padding-bottom:36px}
.step::before{content:"";position:absolute;z-index:1;left:0;right:0;bottom:0;height:16px;border-radius:0 0 10px 10px;background-color:var(--teal);background-image:var(--tex-cloth-dark);background-size:512px;background-blend-mode:overlay;
  box-shadow:inset 0 3px 4px -2px rgba(0,0,0,.4),inset 0 -2px 3px rgba(0,0,0,.2)}
.steps>.step:nth-child(2)::before{background-color:var(--coral-card)}
.steps>.step:nth-child(3)::before{background-color:var(--mauve)}
.step strong{background-color:var(--plum);background-image:var(--tex-cloth-dark);background-size:512px;background-blend-mode:overlay;color:var(--on-dark);
  outline:1.5px dashed rgb(247 236 218/.75);outline-offset:-5px;box-shadow:var(--padded-dark),0 2px 4px rgb(var(--shadow-color)/.35)}
.faq{padding:20px 26px}
.faq-q{font-family:var(--font-display);font-weight:700}
.faq-q::after{color:var(--coral-card);font-family:var(--font-body)}

/* callout: butter cotton with a dyed binding edge */
.callout{background-color:#f2dfae;background-image:var(--tex-cloth-light);background-size:512px;background-blend-mode:multiply;border:0;color:var(--ink);
  padding:20px 24px 20px 32px;box-shadow:var(--padded),var(--fabric-shadow)}
.callout::before{content:"";position:absolute;z-index:1;left:0;top:0;bottom:0;width:12px;border-radius:10px 0 0 10px;background-color:var(--coral-card);background-image:var(--tex-cloth-dark);background-size:512px;background-blend-mode:overlay;box-shadow:inset -3px 0 4px -2px rgba(0,0,0,.4)}
.callout p{color:var(--ink)}

/* --- patch cards: the template's quilted colourways, centred, with a cream arrow patch --- */
.tool,.guide,.card{
  --fc:var(--teal-card);--ft:var(--tex-quilt-dark);--fbl:overlay;--ink-c:var(--on-dark);--ink-p:#fffaf2;--tshadow:0 1px 1px rgba(0,0,0,.3);
  display:flex;flex-direction:column;align-items:center;text-align:center;padding:30px 26px 26px;border:0;text-decoration:none;color:var(--ink-c);border-radius:8px;
  background-color:var(--fc);background-image:var(--ft);background-size:var(--fsz,576px);background-blend-mode:var(--fbl);
  box-shadow:var(--padded-dark),var(--fabric-shadow);transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s cubic-bezier(.2,.7,.2,1)}
.tool::after,.guide::after,.card::after{inset:9px;border-color:rgba(247,236,218,.78);filter:drop-shadow(.6px .9px 0 rgba(0,0,0,.4))}
/* template category icon sits where the emoji used to be; the emoji stays in the DOM but is not painted */
.tool .icon,.card .icon{display:none}
.tool::before,.guide::before,.card::before{content:"";position:relative;z-index:1;display:block;flex:none;width:62px;height:62px;margin-bottom:12px;
  background:no-repeat center/contain;filter:drop-shadow(0 1px 1px rgba(0,0,0,.28))}
.tool:hover,.guide:hover,.card:hover{transform:translateY(-4px) rotate(0);box-shadow:var(--padded-dark),var(--fabric-shadow-lg);color:var(--ink-c)}
.tool h3,.guide h3,.card h3{color:var(--ink-c);font-family:var(--font-display);font-weight:600;font-size:1.32rem;line-height:1.2;margin:0 0 8px;text-shadow:var(--tshadow)}
.tool p,.guide p,.card p{color:var(--ink-p);font-size:.97rem;line-height:1.5;margin:0;flex:1;max-width:none;text-shadow:var(--tshadow)}
.card .count{color:#fff0c4;font-weight:800;margin-top:12px}
/* colourways in the template's order: teal, coral, cream, mustard, olive, navy */
.tools>.tool:nth-child(6n+2),.guide-list>.guide:nth-child(6n+2){--fc:var(--coral-card)}
.tools>.tool:nth-child(6n+3),.guide-list>.guide:nth-child(6n+3){--fc:#f1e6d1;--ft:radial-gradient(ellipse 74% 58% at 50% 60%,rgba(255,250,240,.84),rgba(255,250,240,0) 100%),var(--tex-quilt-light);--fbl:normal,multiply;--fsz:100% 100%,576px;--ink-c:var(--ink);--ink-p:var(--ink-body);--tshadow:0 0 6px rgba(250,242,228,.95),0 0 2px rgba(250,242,228,.9)}
.tools>.tool:nth-child(6n+4),.guide-list>.guide:nth-child(6n+4){--fc:var(--mustard);--ink-c:#0f0a04;--ink-p:#0f0a04;--tshadow:0 1px 0 rgba(255,235,180,.45)}
.tools>.tool:nth-child(6n+5),.guide-list>.guide:nth-child(6n+5){--fc:var(--olive)}
.tools>.tool:nth-child(6n+6),.guide-list>.guide:nth-child(6n+6){--fc:var(--navy)}
.cards>.card.fin{--fc:var(--burgundy)}.cards>.card.fab{--fc:var(--teal-card)}.cards>.card.size{--fc:var(--navy)}
.cards>.card.pie{--fc:var(--mustard);--ink-c:#0f0a04;--ink-p:#0f0a04;--tshadow:0 1px 0 rgba(255,235,180,.45)}
.cards>.card.pie .count{color:#140b03}
.tools>.tool:nth-child(6n+3)::after,.guide-list>.guide:nth-child(6n+3)::after{border-color:var(--stitch);filter:drop-shadow(.6px .9px 0 rgb(var(--shadow-color)/.2))}
.tools>.tool:nth-child(6n+4)::after,.guide-list>.guide:nth-child(6n+4)::after,.cards>.card.pie::after{border-color:rgba(60,38,10,.55);filter:drop-shadow(.6px .9px 0 rgba(255,235,180,.35))}
.tools>.tool:nth-child(6n+3),.guide-list>.guide:nth-child(6n+3){box-shadow:var(--padded),var(--fabric-shadow)}
@media(min-width:900px){
  .tools>.tool:nth-child(3n+1),.guide-list>.guide:nth-child(3n+1),.cards>.card:nth-child(4n+1){transform:rotate(-.45deg)}
  .tools>.tool:nth-child(3n+2),.guide-list>.guide:nth-child(3n+2),.cards>.card:nth-child(4n+2){transform:rotate(.35deg)}
  .tools>.tool:nth-child(3n),.guide-list>.guide:nth-child(3n),.cards>.card:nth-child(4n+3){transform:rotate(-.25deg)}
  .cards>.card:nth-child(4n){transform:rotate(.5deg)}
}
/* "go" label: small cream cloth patch, as the template's arrow patch */
.tool .go,.card .go,.guide .go{align-self:center;display:inline-block;margin-top:18px;padding:8px 18px;border-radius:7px;
  background-color:var(--cream-50);background-image:var(--tex-cloth-light);background-size:256px;background-blend-mode:multiply;color:var(--ink);font-weight:800;font-size:.95rem;text-shadow:none;
  box-shadow:0 2px 3px rgba(0,0,0,.32),inset 0 0 0 1px rgb(var(--shadow-color)/.1);outline:1.2px dashed rgb(122 96 72/.5);outline-offset:-4px;transition:transform .2s ease}
.tool:hover .go,.card:hover .go,.guide:hover .go{background-color:#fff;color:var(--plum-deep);text-decoration:none;transform:translateX(3px)}

/* ============================== long-form reading surface: padded cream cotton ============================== */
article>.wrap,.trust>.wrap,main>section:not(.hero)>.wrap:not(:has(.calc-grid,.tools,.cards,.guide-list,.steps,.cta-box,.cta,.faq)){position:relative;
  background-color:var(--cream-50);background-image:var(--tex-cloth-light);background-size:512px;background-blend-mode:multiply;
  border:0;border-radius:16px;box-shadow:var(--padded),var(--fabric-shadow-lg);padding:38px 46px;width:calc(100% - 40px);max-width:1200px}
/* guide article text sits on a flat solid cream panel: no texture image behind paragraphs */
article>.wrap{background-image:none;background-color:var(--cream-50)}
/* trust pages use the same flat solid panel as guide articles. This selector mirrors the long-form rule below it and adds main.trust, so it wins on specificity regardless of rule order. */
main.trust>section:not(.hero)>.wrap:not(:has(.calc-grid,.tools,.cards,.guide-list,.steps,.cta-box,.cta,.faq)){background-image:none;background-color:var(--cream-50)}
/* keep the scrolled-to outcome visible below the sticky header */
#result-panel,#calc-error{scroll-margin-top:88px}
article p,article li,.trust li{max-width:75ch;color:var(--ink-body)}
.guides,.how{background:transparent}
.trust li::marker,article li::marker{color:var(--coral-card)}

/* ============================== buttons: dyed cotton with a stitched border ============================== */
.btn,.search-go,.unit-btn.active{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:10px 26px;border:0;border-radius:10px;
  font-family:var(--font-body);font-weight:700;text-decoration:none;color:var(--on-dark);
  background-color:var(--plum);background-image:var(--tex-cloth-dark);background-size:512px;background-blend-mode:overlay;
  box-shadow:var(--padded-dark),var(--fabric-shadow);transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s,filter .2s}
.btn::after,.search-go::after,.unit-btn.active::after{content:"";position:absolute;inset:5px;border-radius:6px;border:1.5px dashed rgb(247 236 218/.6);pointer-events:none;filter:drop-shadow(.5px .8px 0 rgba(0,0,0,.35))}
.btn:hover{background-color:var(--plum);color:#fff;text-decoration:none;opacity:1;transform:translateY(-1px);filter:brightness(1.1);box-shadow:var(--padded-dark),var(--fabric-shadow-lg)}
.btn:active{transform:translateY(1px);box-shadow:var(--padded-dark),0 1px 2px rgb(var(--shadow-color)/.3)}
.btn-secondary{background-color:var(--cream-50);background-image:var(--tex-cloth-light);background-blend-mode:multiply;color:var(--ink);
  box-shadow:var(--padded),var(--fabric-shadow),inset 0 0 0 1px rgb(var(--shadow-color)/.12)}
.btn-secondary::after{border-color:rgb(122 96 72/.5);filter:drop-shadow(.5px .8px 0 rgb(var(--shadow-color)/.18))}
.btn-secondary:hover{background-color:#fff;color:var(--plum-deep);filter:none}
.btn-row{gap:12px}
.unit-btn{background-color:var(--cream-50);background-image:var(--tex-cloth-light);background-size:512px;background-blend-mode:multiply;color:var(--ink);border:0;border-radius:10px;font-family:var(--font-body);
  box-shadow:var(--padded),var(--fabric-shadow),inset 0 0 0 1px rgb(var(--shadow-color)/.14)}
.unit-btn:hover{background-color:#fff}
.unit-btn.active{background-color:var(--teal);color:#fff;box-shadow:var(--padded-dark),var(--fabric-shadow)}
.chip,.site-filter{border:0;border-radius:10px;font-weight:700;color:#3c3531;min-height:36px;padding:6px 14px;
  background-color:var(--chip,#b9d0ca);background-image:var(--tex-cloth-light);background-size:256px;background-blend-mode:multiply;
  box-shadow:inset 0 1px 0 rgb(255 255 255/.45),inset 0 -1px 2px rgb(var(--shadow-color)/.12),0 1px 2px rgb(var(--shadow-color)/.25);transition:transform .15s,filter .15s}
.search-chips .chip:nth-child(4n+1){--chip:#b9d0ca}.search-chips .chip:nth-child(4n+2){--chip:#dec9c2}.search-chips .chip:nth-child(4n+3){--chip:#bfd4d2}.search-chips .chip:nth-child(4n){--chip:#efd8a3}
.chip:hover,.site-filter:hover{background-color:var(--chip,#b9d0ca);color:#3c3531;transform:translateY(-1px);filter:brightness(1.05) saturate(1.1)}
.site-filter.site-filter{background-color:#e3d0b4;border:0;color:#3c3531;margin:8px 8px 0 0}
.site-filter.site-filter.active{background-color:var(--teal);color:#fff;border:0;box-shadow:var(--padded-dark),0 1px 2px rgba(0,0,0,.3)}

/* ============================== forms ============================== */
.field label,.unit-label,.search label{color:var(--ink);font-weight:700}
.field input,.field select,.email-box input[type=email],input[type=search],input[type=text],input[type=number],input[type=email],select,textarea{
  background-color:var(--cream-50);background-image:var(--tex-cloth-light);background-size:256px;background-blend-mode:multiply;
  color:var(--ink);border:0;border-radius:10px;font-family:var(--font-body);box-shadow:var(--inset-field),0 1px 0 rgb(255 255 255/.6)}
#site-search{border:0!important;border-radius:12px!important;background-color:var(--cream-50)!important;box-shadow:var(--inset-field),0 1px 0 rgb(255 255 255/.6)}
#site-category{border:0!important;border-radius:10px!important;background-color:var(--cream-50)!important;color:var(--ink);box-shadow:var(--inset-field)}
.field input:focus,.field select:focus,input:focus,select:focus,textarea:focus{outline:none;box-shadow:var(--inset-field),var(--focus-ring)}
input::placeholder,textarea::placeholder{color:#6b5d54;opacity:1}
.search-box{background-color:var(--cream-50);background-image:var(--tex-cloth-light);background-size:256px;background-blend-mode:multiply;border:0;border-radius:14px;box-shadow:var(--inset-field),0 1px 0 rgb(255 255 255/.7)}
.search-box:focus-within{box-shadow:var(--inset-field),var(--focus-ring)}
.search-box input{background:transparent;border:0;box-shadow:none}
.search-clear{color:var(--ink-muted)}
.search-go{min-height:38px;padding:6px 16px;margin:4px}
textarea{font-size:16px;padding:12px 14px;width:100%;max-width:640px}
#contact-name,#contact-message,#chart-email{font-size:16px;padding:11px 14px;min-height:46px;width:100%;max-width:640px;border-radius:10px}
#contact-form label,.email-box label{font-weight:700;color:var(--ink);display:block}
#contact-form button.go,button.go[style],button[style*="5a2fa0"]{position:relative;display:inline-flex!important;align-items:center;justify-content:center;min-height:48px;
  padding:10px 26px!important;border:0!important;border-radius:10px!important;font-family:var(--font-body);font-weight:700!important;font-size:16px!important;color:var(--on-dark)!important;
  background-color:var(--plum)!important;background-image:var(--tex-cloth-dark)!important;background-size:512px!important;background-blend-mode:overlay!important;
  box-shadow:var(--padded-dark),var(--fabric-shadow)!important;cursor:pointer}
#contact-form button.go::after,button[style*="5a2fa0"]::after{content:"";position:absolute;inset:5px;border-radius:6px;border:1.5px dashed rgb(247 236 218/.6);pointer-events:none}
.email-box{padding:22px 26px}

/* ============================== results: the teal quilted patch ============================== */
.result{background-color:var(--teal);color:var(--on-dark);border:0;padding:28px;
  background-image:var(--tex-quilt-dark);background-size:576px;background-blend-mode:overlay;box-shadow:var(--padded-dark),var(--fabric-shadow-lg)}
.result::after{border-color:rgba(247,236,218,.75);filter:drop-shadow(.6px .9px 0 rgba(0,0,0,.4))}
.result h2,.result h3,.result p,.result .big{color:var(--on-dark);text-shadow:0 1px 1px rgba(0,0,0,.35)}
.result .label{color:#f6dfa4;font-weight:800;letter-spacing:.08em}
.result .big{font-family:var(--font-display);font-weight:700}
.result td,.result th{color:var(--on-dark);border-top:1.5px dashed rgba(247,236,218,.4);background:transparent}
.result table{background:transparent;border:0;box-shadow:none}
.result .note,.result .muted{color:var(--on-dark-2)}
.result .success,.result strong{color:#f6dfa4}
.result a{color:#fff}
.error{background:#fbe4e1;color:#7d1f2e;border:1.5px solid #8f2a3a;border-radius:10px}
.success{color:#1f5a3a}

/* ============================== tables ============================== */
table,table.chart,.chart-table{background:var(--cream-50);border:1px solid #b49c7e;border-radius:6px;border-collapse:separate;border-spacing:0;overflow:hidden}
table th,table.chart th,.chart-table th{background-color:var(--teal);background-image:var(--tex-cloth-dark);background-size:512px;background-blend-mode:overlay;color:var(--on-dark);font-weight:700;border:0;border-bottom:1.5px dashed rgba(247,236,218,.6);text-align:left}
table td,table.chart td,.chart-table td{border:0;border-bottom:1px dashed rgba(122,96,72,.4);color:var(--ink-body);background:transparent}
table tbody tr:nth-child(even) td{background:rgba(232,216,192,.45)}
table tbody tr:last-child td{border-bottom:0}
.chart-table td:first-child,table td:first-child{font-weight:700;color:var(--ink)}
.result table,.result table td,.result table th{overflow:visible}
.result table tbody tr td,.result table tbody tr:nth-child(even) td,.result table td:first-child,.result table td{background:transparent;color:var(--on-dark)}
.result table td:first-child{font-weight:600}
.result table td:last-child{font-weight:800}

/* ============================== band: the template's newsletter strip (teal-green cotton, spool and wooden buttons) ============================== */
.cta,.cta-box{background-color:var(--teal-green);color:var(--on-dark);border:0;padding:38px 28px;text-align:center;
  background-image:var(--tex-cloth-dark);background-size:512px;background-blend-mode:overlay;
  box-shadow:inset 0 6px 8px -4px rgba(0,0,0,.4),inset 0 -6px 8px -4px rgba(0,0,0,.4),var(--fabric-shadow-lg)}
.cta::after,.cta-box::after{border-color:rgba(247,236,218,.7);filter:drop-shadow(.6px .9px 0 rgba(0,0,0,.4))}
.cta h2,.cta h3,.cta-box h2,.cta p,.cta-box p{color:var(--on-dark);text-shadow:0 1px 1px rgba(0,0,0,.35);margin-inline:auto}
.cta a:not(.btn),.cta-box a:not(.btn){color:#fff}
.cta .btn,.cta-box .btn{background-color:var(--coral-card);color:#fff}
@media(min-width:900px){
  .cta,.cta-box{background-image:url("/assets/fabric/images/spool-green.webp"),url("/assets/fabric/images/button-wood.webp"),var(--tex-cloth-dark);
    background-size:84px auto,40px auto,512px;background-position:28px 50%,calc(100% - 34px) 26px,0 0;background-repeat:no-repeat,no-repeat,repeat;background-blend-mode:normal,normal,overlay}
}

/* ============================== footer: plum cotton ============================== */
footer{position:relative;margin-top:44px;padding:54px 0 40px;color:var(--on-dark);
  background-color:var(--plum-deep);background-image:var(--tex-cloth-dark);background-size:512px;background-blend-mode:overlay;
  box-shadow:inset 0 8px 8px -4px rgba(0,0,0,.4),0 -3px 6px rgb(var(--shadow-color)/.2)}
footer::before{content:"";position:absolute;left:0;right:0;top:10px;border-top:1.5px dashed var(--stitch-light);pointer-events:none;filter:drop-shadow(.6px .9px 0 rgba(0,0,0,.4))}
footer a{color:var(--on-dark-2);text-decoration:none}
footer a:hover{color:#fff;text-decoration:underline dashed rgb(246 223 164/.8) 1.5px;text-underline-offset:4px}
.foot-grid h3{color:#fff;font-family:var(--font-display);font-weight:600}
.foot-grid>div+div{border-left:1.5px dashed rgba(247,236,218,.25);padding-left:24px}
.foot-note{border-top:1.5px dashed rgba(247,236,218,.3);color:var(--on-dark-2)}

/* ============================== responsive ============================== */
@media(max-width:820px){
  nav{background-color:var(--cream);background-image:var(--tex-cloth-light);background-size:512px;background-blend-mode:multiply;box-shadow:-8px 0 32px rgba(47,27,40,.4)}
  nav a{color:var(--ink);font-size:18px;text-decoration:none}
  nav a.active{background:rgba(232,216,192,.7);text-decoration:none;box-shadow:inset 0 0 0 1.5px var(--stitch)}
  .logo{font-size:24px}.logo::before{width:40px;height:40px}
  .hero{padding:30px 0 108px}
  .hero .wrap{max-width:none}
  article>.wrap,.trust>.wrap,main>section:not(.hero)>.wrap:not(:has(.calc-grid,.tools,.cards,.guide-list,.steps,.cta-box,.cta,.faq)){padding:30px 20px 26px;width:calc(100% - 24px)}
  .panel,.result,.tool,.card,.guide,.step,.cta,.cta-box,.email-box{padding:24px 20px}
  .faq{padding:18px 20px}
  .foot-grid>div+div{border-left:0;padding-left:0;border-top:1.5px dashed rgba(247,236,218,.25);padding-top:18px}
  table:not(.result table){display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  table th,table td{padding:8px 10px}
}

@media print{
  body{background:#fff!important}header,footer,.ruler{display:none!important}
  .hero{background:#fff!important;color:#171C36!important;padding-bottom:20px;text-align:left}
  .hero::before,.hero::after,.panel::after,.result::after,.tool::after,.tool::before,.card::before,.guide::before,.card::after,.guide::after,.step::after,.step::before,.faq::after,.callout::after,.callout::before,.cta::after,.cta-box::after,article>.wrap::after{display:none!important}
  .hero h1,.hero p{color:#171C36!important;text-shadow:none}
  article>.wrap,.panel,.result,.tool,.card,.guide,.step,.faq,.callout,.cta,.cta-box{box-shadow:none!important;background:#fff!important;color:#171C36!important;transform:none!important}
  .result *,.cta *,.tool *,.card *,.guide *{color:#171C36!important;text-shadow:none!important}
}
/* generated: template category icons per calculator / guide, tinted for each fabric colourway */
.tools>.tool:nth-child(6n+1)::before,.guide-list>.guide:nth-child(6n+1)::before{background-image:url("/assets/fabric/icons/cat-blocks-teal.svg")}
.tools>.tool:nth-child(6n+2)::before,.guide-list>.guide:nth-child(6n+2)::before{background-image:url("/assets/fabric/icons/cat-blocks-coral.svg")}
.tools>.tool:nth-child(6n+3)::before,.guide-list>.guide:nth-child(6n+3)::before{background-image:url("/assets/fabric/icons/cat-blocks-cream.svg")}
.tools>.tool:nth-child(6n+4)::before,.guide-list>.guide:nth-child(6n+4)::before{background-image:url("/assets/fabric/icons/cat-blocks-mustard.svg")}
.tools>.tool:nth-child(6n+5)::before,.guide-list>.guide:nth-child(6n+5)::before{background-image:url("/assets/fabric/icons/cat-blocks-olive.svg")}
.tools>.tool:nth-child(6n+6)::before,.guide-list>.guide:nth-child(6n+6)::before{background-image:url("/assets/fabric/icons/cat-blocks-navy.svg")}
.tools>.tool:nth-child(6n+1)[href*="fabric"]::before,.guide-list>.guide:nth-child(6n+1)[href*="fabric"]::before,.tools>.tool:nth-child(6n+1)[href*="yardage"]::before,.guide-list>.guide:nth-child(6n+1)[href*="yardage"]::before,.tools>.tool:nth-child(6n+1)[href*="strip"]::before,.guide-list>.guide:nth-child(6n+1)[href*="strip"]::before,.tools>.tool:nth-child(6n+1)[href*="piece"]::before,.guide-list>.guide:nth-child(6n+1)[href*="piece"]::before,.tools>.tool:nth-child(6n+1)[href*="fat-quarter"]::before,.guide-list>.guide:nth-child(6n+1)[href*="fat-quarter"]::before,.tools>.tool:nth-child(6n+1)[href*="much-fabric"]::before,.guide-list>.guide:nth-child(6n+1)[href*="much-fabric"]::before{background-image:url("/assets/fabric/icons/cat-yardage-teal.svg")}
.tools>.tool:nth-child(6n+2)[href*="fabric"]::before,.guide-list>.guide:nth-child(6n+2)[href*="fabric"]::before,.tools>.tool:nth-child(6n+2)[href*="yardage"]::before,.guide-list>.guide:nth-child(6n+2)[href*="yardage"]::before,.tools>.tool:nth-child(6n+2)[href*="strip"]::before,.guide-list>.guide:nth-child(6n+2)[href*="strip"]::before,.tools>.tool:nth-child(6n+2)[href*="piece"]::before,.guide-list>.guide:nth-child(6n+2)[href*="piece"]::before,.tools>.tool:nth-child(6n+2)[href*="fat-quarter"]::before,.guide-list>.guide:nth-child(6n+2)[href*="fat-quarter"]::before,.tools>.tool:nth-child(6n+2)[href*="much-fabric"]::before,.guide-list>.guide:nth-child(6n+2)[href*="much-fabric"]::before{background-image:url("/assets/fabric/icons/cat-yardage-coral.svg")}
.tools>.tool:nth-child(6n+3)[href*="fabric"]::before,.guide-list>.guide:nth-child(6n+3)[href*="fabric"]::before,.tools>.tool:nth-child(6n+3)[href*="yardage"]::before,.guide-list>.guide:nth-child(6n+3)[href*="yardage"]::before,.tools>.tool:nth-child(6n+3)[href*="strip"]::before,.guide-list>.guide:nth-child(6n+3)[href*="strip"]::before,.tools>.tool:nth-child(6n+3)[href*="piece"]::before,.guide-list>.guide:nth-child(6n+3)[href*="piece"]::before,.tools>.tool:nth-child(6n+3)[href*="fat-quarter"]::before,.guide-list>.guide:nth-child(6n+3)[href*="fat-quarter"]::before,.tools>.tool:nth-child(6n+3)[href*="much-fabric"]::before,.guide-list>.guide:nth-child(6n+3)[href*="much-fabric"]::before{background-image:url("/assets/fabric/icons/cat-yardage-cream.svg")}
.tools>.tool:nth-child(6n+4)[href*="fabric"]::before,.guide-list>.guide:nth-child(6n+4)[href*="fabric"]::before,.tools>.tool:nth-child(6n+4)[href*="yardage"]::before,.guide-list>.guide:nth-child(6n+4)[href*="yardage"]::before,.tools>.tool:nth-child(6n+4)[href*="strip"]::before,.guide-list>.guide:nth-child(6n+4)[href*="strip"]::before,.tools>.tool:nth-child(6n+4)[href*="piece"]::before,.guide-list>.guide:nth-child(6n+4)[href*="piece"]::before,.tools>.tool:nth-child(6n+4)[href*="fat-quarter"]::before,.guide-list>.guide:nth-child(6n+4)[href*="fat-quarter"]::before,.tools>.tool:nth-child(6n+4)[href*="much-fabric"]::before,.guide-list>.guide:nth-child(6n+4)[href*="much-fabric"]::before{background-image:url("/assets/fabric/icons/cat-yardage-mustard.svg")}
.tools>.tool:nth-child(6n+5)[href*="fabric"]::before,.guide-list>.guide:nth-child(6n+5)[href*="fabric"]::before,.tools>.tool:nth-child(6n+5)[href*="yardage"]::before,.guide-list>.guide:nth-child(6n+5)[href*="yardage"]::before,.tools>.tool:nth-child(6n+5)[href*="strip"]::before,.guide-list>.guide:nth-child(6n+5)[href*="strip"]::before,.tools>.tool:nth-child(6n+5)[href*="piece"]::before,.guide-list>.guide:nth-child(6n+5)[href*="piece"]::before,.tools>.tool:nth-child(6n+5)[href*="fat-quarter"]::before,.guide-list>.guide:nth-child(6n+5)[href*="fat-quarter"]::before,.tools>.tool:nth-child(6n+5)[href*="much-fabric"]::before,.guide-list>.guide:nth-child(6n+5)[href*="much-fabric"]::before{background-image:url("/assets/fabric/icons/cat-yardage-olive.svg")}
.tools>.tool:nth-child(6n+6)[href*="fabric"]::before,.guide-list>.guide:nth-child(6n+6)[href*="fabric"]::before,.tools>.tool:nth-child(6n+6)[href*="yardage"]::before,.guide-list>.guide:nth-child(6n+6)[href*="yardage"]::before,.tools>.tool:nth-child(6n+6)[href*="strip"]::before,.guide-list>.guide:nth-child(6n+6)[href*="strip"]::before,.tools>.tool:nth-child(6n+6)[href*="piece"]::before,.guide-list>.guide:nth-child(6n+6)[href*="piece"]::before,.tools>.tool:nth-child(6n+6)[href*="fat-quarter"]::before,.guide-list>.guide:nth-child(6n+6)[href*="fat-quarter"]::before,.tools>.tool:nth-child(6n+6)[href*="much-fabric"]::before,.guide-list>.guide:nth-child(6n+6)[href*="much-fabric"]::before{background-image:url("/assets/fabric/icons/cat-yardage-navy.svg")}
.tools>.tool:nth-child(6n+1)[href*="conversion"]::before,.guide-list>.guide:nth-child(6n+1)[href*="conversion"]::before,.tools>.tool:nth-child(6n+1)[href*="inches-to-yards"]::before,.guide-list>.guide:nth-child(6n+1)[href*="inches-to-yards"]::before{background-image:url("/assets/fabric/icons/cat-ruler-teal.svg")}
.tools>.tool:nth-child(6n+2)[href*="conversion"]::before,.guide-list>.guide:nth-child(6n+2)[href*="conversion"]::before,.tools>.tool:nth-child(6n+2)[href*="inches-to-yards"]::before,.guide-list>.guide:nth-child(6n+2)[href*="inches-to-yards"]::before{background-image:url("/assets/fabric/icons/cat-ruler-coral.svg")}
.tools>.tool:nth-child(6n+3)[href*="conversion"]::before,.guide-list>.guide:nth-child(6n+3)[href*="conversion"]::before,.tools>.tool:nth-child(6n+3)[href*="inches-to-yards"]::before,.guide-list>.guide:nth-child(6n+3)[href*="inches-to-yards"]::before{background-image:url("/assets/fabric/icons/cat-ruler-cream.svg")}
.tools>.tool:nth-child(6n+4)[href*="conversion"]::before,.guide-list>.guide:nth-child(6n+4)[href*="conversion"]::before,.tools>.tool:nth-child(6n+4)[href*="inches-to-yards"]::before,.guide-list>.guide:nth-child(6n+4)[href*="inches-to-yards"]::before{background-image:url("/assets/fabric/icons/cat-ruler-mustard.svg")}
.tools>.tool:nth-child(6n+5)[href*="conversion"]::before,.guide-list>.guide:nth-child(6n+5)[href*="conversion"]::before,.tools>.tool:nth-child(6n+5)[href*="inches-to-yards"]::before,.guide-list>.guide:nth-child(6n+5)[href*="inches-to-yards"]::before{background-image:url("/assets/fabric/icons/cat-ruler-olive.svg")}
.tools>.tool:nth-child(6n+6)[href*="conversion"]::before,.guide-list>.guide:nth-child(6n+6)[href*="conversion"]::before,.tools>.tool:nth-child(6n+6)[href*="inches-to-yards"]::before,.guide-list>.guide:nth-child(6n+6)[href*="inches-to-yards"]::before{background-image:url("/assets/fabric/icons/cat-ruler-navy.svg")}
.tools>.tool:nth-child(6n+1)[href*="hst"]::before,.guide-list>.guide:nth-child(6n+1)[href*="hst"]::before,.tools>.tool:nth-child(6n+1)[href*="half-"]::before,.guide-list>.guide:nth-child(6n+1)[href*="half-"]::before,.tools>.tool:nth-child(6n+1)[href*="qst"]::before,.guide-list>.guide:nth-child(6n+1)[href*="qst"]::before,.tools>.tool:nth-child(6n+1)[href*="flying"]::before,.guide-list>.guide:nth-child(6n+1)[href*="flying"]::before,.tools>.tool:nth-child(6n+1)[href*="square-in"]::before,.guide-list>.guide:nth-child(6n+1)[href*="square-in"]::before,.tools>.tool:nth-child(6n+1)[href*="setting-tri"]::before,.guide-list>.guide:nth-child(6n+1)[href*="setting-tri"]::before,.tools>.tool:nth-child(6n+1)[href*="triangle"]::before,.guide-list>.guide:nth-child(6n+1)[href*="triangle"]::before{background-image:url("/assets/fabric/icons/cat-hst-teal.svg")}
.tools>.tool:nth-child(6n+2)[href*="hst"]::before,.guide-list>.guide:nth-child(6n+2)[href*="hst"]::before,.tools>.tool:nth-child(6n+2)[href*="half-"]::before,.guide-list>.guide:nth-child(6n+2)[href*="half-"]::before,.tools>.tool:nth-child(6n+2)[href*="qst"]::before,.guide-list>.guide:nth-child(6n+2)[href*="qst"]::before,.tools>.tool:nth-child(6n+2)[href*="flying"]::before,.guide-list>.guide:nth-child(6n+2)[href*="flying"]::before,.tools>.tool:nth-child(6n+2)[href*="square-in"]::before,.guide-list>.guide:nth-child(6n+2)[href*="square-in"]::before,.tools>.tool:nth-child(6n+2)[href*="setting-tri"]::before,.guide-list>.guide:nth-child(6n+2)[href*="setting-tri"]::before,.tools>.tool:nth-child(6n+2)[href*="triangle"]::before,.guide-list>.guide:nth-child(6n+2)[href*="triangle"]::before{background-image:url("/assets/fabric/icons/cat-hst-coral.svg")}
.tools>.tool:nth-child(6n+3)[href*="hst"]::before,.guide-list>.guide:nth-child(6n+3)[href*="hst"]::before,.tools>.tool:nth-child(6n+3)[href*="half-"]::before,.guide-list>.guide:nth-child(6n+3)[href*="half-"]::before,.tools>.tool:nth-child(6n+3)[href*="qst"]::before,.guide-list>.guide:nth-child(6n+3)[href*="qst"]::before,.tools>.tool:nth-child(6n+3)[href*="flying"]::before,.guide-list>.guide:nth-child(6n+3)[href*="flying"]::before,.tools>.tool:nth-child(6n+3)[href*="square-in"]::before,.guide-list>.guide:nth-child(6n+3)[href*="square-in"]::before,.tools>.tool:nth-child(6n+3)[href*="setting-tri"]::before,.guide-list>.guide:nth-child(6n+3)[href*="setting-tri"]::before,.tools>.tool:nth-child(6n+3)[href*="triangle"]::before,.guide-list>.guide:nth-child(6n+3)[href*="triangle"]::before{background-image:url("/assets/fabric/icons/cat-hst-cream.svg")}
.tools>.tool:nth-child(6n+4)[href*="hst"]::before,.guide-list>.guide:nth-child(6n+4)[href*="hst"]::before,.tools>.tool:nth-child(6n+4)[href*="half-"]::before,.guide-list>.guide:nth-child(6n+4)[href*="half-"]::before,.tools>.tool:nth-child(6n+4)[href*="qst"]::before,.guide-list>.guide:nth-child(6n+4)[href*="qst"]::before,.tools>.tool:nth-child(6n+4)[href*="flying"]::before,.guide-list>.guide:nth-child(6n+4)[href*="flying"]::before,.tools>.tool:nth-child(6n+4)[href*="square-in"]::before,.guide-list>.guide:nth-child(6n+4)[href*="square-in"]::before,.tools>.tool:nth-child(6n+4)[href*="setting-tri"]::before,.guide-list>.guide:nth-child(6n+4)[href*="setting-tri"]::before,.tools>.tool:nth-child(6n+4)[href*="triangle"]::before,.guide-list>.guide:nth-child(6n+4)[href*="triangle"]::before{background-image:url("/assets/fabric/icons/cat-hst-mustard.svg")}
.tools>.tool:nth-child(6n+5)[href*="hst"]::before,.guide-list>.guide:nth-child(6n+5)[href*="hst"]::before,.tools>.tool:nth-child(6n+5)[href*="half-"]::before,.guide-list>.guide:nth-child(6n+5)[href*="half-"]::before,.tools>.tool:nth-child(6n+5)[href*="qst"]::before,.guide-list>.guide:nth-child(6n+5)[href*="qst"]::before,.tools>.tool:nth-child(6n+5)[href*="flying"]::before,.guide-list>.guide:nth-child(6n+5)[href*="flying"]::before,.tools>.tool:nth-child(6n+5)[href*="square-in"]::before,.guide-list>.guide:nth-child(6n+5)[href*="square-in"]::before,.tools>.tool:nth-child(6n+5)[href*="setting-tri"]::before,.guide-list>.guide:nth-child(6n+5)[href*="setting-tri"]::before,.tools>.tool:nth-child(6n+5)[href*="triangle"]::before,.guide-list>.guide:nth-child(6n+5)[href*="triangle"]::before{background-image:url("/assets/fabric/icons/cat-hst-olive.svg")}
.tools>.tool:nth-child(6n+6)[href*="hst"]::before,.guide-list>.guide:nth-child(6n+6)[href*="hst"]::before,.tools>.tool:nth-child(6n+6)[href*="half-"]::before,.guide-list>.guide:nth-child(6n+6)[href*="half-"]::before,.tools>.tool:nth-child(6n+6)[href*="qst"]::before,.guide-list>.guide:nth-child(6n+6)[href*="qst"]::before,.tools>.tool:nth-child(6n+6)[href*="flying"]::before,.guide-list>.guide:nth-child(6n+6)[href*="flying"]::before,.tools>.tool:nth-child(6n+6)[href*="square-in"]::before,.guide-list>.guide:nth-child(6n+6)[href*="square-in"]::before,.tools>.tool:nth-child(6n+6)[href*="setting-tri"]::before,.guide-list>.guide:nth-child(6n+6)[href*="setting-tri"]::before,.tools>.tool:nth-child(6n+6)[href*="triangle"]::before,.guide-list>.guide:nth-child(6n+6)[href*="triangle"]::before{background-image:url("/assets/fabric/icons/cat-hst-navy.svg")}
.tools>.tool:nth-child(6n+1)[href*="sashing"]::before,.guide-list>.guide:nth-child(6n+1)[href*="sashing"]::before{background-image:url("/assets/fabric/icons/cat-sashing-teal.svg")}
.tools>.tool:nth-child(6n+2)[href*="sashing"]::before,.guide-list>.guide:nth-child(6n+2)[href*="sashing"]::before{background-image:url("/assets/fabric/icons/cat-sashing-coral.svg")}
.tools>.tool:nth-child(6n+3)[href*="sashing"]::before,.guide-list>.guide:nth-child(6n+3)[href*="sashing"]::before{background-image:url("/assets/fabric/icons/cat-sashing-cream.svg")}
.tools>.tool:nth-child(6n+4)[href*="sashing"]::before,.guide-list>.guide:nth-child(6n+4)[href*="sashing"]::before{background-image:url("/assets/fabric/icons/cat-sashing-mustard.svg")}
.tools>.tool:nth-child(6n+5)[href*="sashing"]::before,.guide-list>.guide:nth-child(6n+5)[href*="sashing"]::before{background-image:url("/assets/fabric/icons/cat-sashing-olive.svg")}
.tools>.tool:nth-child(6n+6)[href*="sashing"]::before,.guide-list>.guide:nth-child(6n+6)[href*="sashing"]::before{background-image:url("/assets/fabric/icons/cat-sashing-navy.svg")}
.tools>.tool:nth-child(6n+1)[href*="quilt-size"]::before,.guide-list>.guide:nth-child(6n+1)[href*="quilt-size"]::before,.tools>.tool:nth-child(6n+1)[href*="rag-"]::before,.guide-list>.guide:nth-child(6n+1)[href*="rag-"]::before,.tools>.tool:nth-child(6n+1)[href*="t-shirt"]::before,.guide-list>.guide:nth-child(6n+1)[href*="t-shirt"]::before,.tools>.tool:nth-child(6n+1)[href*="size"]::before,.guide-list>.guide:nth-child(6n+1)[href*="size"]::before{background-image:url("/assets/fabric/icons/cat-quiltsize-teal.svg")}
.tools>.tool:nth-child(6n+2)[href*="quilt-size"]::before,.guide-list>.guide:nth-child(6n+2)[href*="quilt-size"]::before,.tools>.tool:nth-child(6n+2)[href*="rag-"]::before,.guide-list>.guide:nth-child(6n+2)[href*="rag-"]::before,.tools>.tool:nth-child(6n+2)[href*="t-shirt"]::before,.guide-list>.guide:nth-child(6n+2)[href*="t-shirt"]::before,.tools>.tool:nth-child(6n+2)[href*="size"]::before,.guide-list>.guide:nth-child(6n+2)[href*="size"]::before{background-image:url("/assets/fabric/icons/cat-quiltsize-coral.svg")}
.tools>.tool:nth-child(6n+3)[href*="quilt-size"]::before,.guide-list>.guide:nth-child(6n+3)[href*="quilt-size"]::before,.tools>.tool:nth-child(6n+3)[href*="rag-"]::before,.guide-list>.guide:nth-child(6n+3)[href*="rag-"]::before,.tools>.tool:nth-child(6n+3)[href*="t-shirt"]::before,.guide-list>.guide:nth-child(6n+3)[href*="t-shirt"]::before,.tools>.tool:nth-child(6n+3)[href*="size"]::before,.guide-list>.guide:nth-child(6n+3)[href*="size"]::before{background-image:url("/assets/fabric/icons/cat-quiltsize-cream.svg")}
.tools>.tool:nth-child(6n+4)[href*="quilt-size"]::before,.guide-list>.guide:nth-child(6n+4)[href*="quilt-size"]::before,.tools>.tool:nth-child(6n+4)[href*="rag-"]::before,.guide-list>.guide:nth-child(6n+4)[href*="rag-"]::before,.tools>.tool:nth-child(6n+4)[href*="t-shirt"]::before,.guide-list>.guide:nth-child(6n+4)[href*="t-shirt"]::before,.tools>.tool:nth-child(6n+4)[href*="size"]::before,.guide-list>.guide:nth-child(6n+4)[href*="size"]::before{background-image:url("/assets/fabric/icons/cat-quiltsize-mustard.svg")}
.tools>.tool:nth-child(6n+5)[href*="quilt-size"]::before,.guide-list>.guide:nth-child(6n+5)[href*="quilt-size"]::before,.tools>.tool:nth-child(6n+5)[href*="rag-"]::before,.guide-list>.guide:nth-child(6n+5)[href*="rag-"]::before,.tools>.tool:nth-child(6n+5)[href*="t-shirt"]::before,.guide-list>.guide:nth-child(6n+5)[href*="t-shirt"]::before,.tools>.tool:nth-child(6n+5)[href*="size"]::before,.guide-list>.guide:nth-child(6n+5)[href*="size"]::before{background-image:url("/assets/fabric/icons/cat-quiltsize-olive.svg")}
.tools>.tool:nth-child(6n+6)[href*="quilt-size"]::before,.guide-list>.guide:nth-child(6n+6)[href*="quilt-size"]::before,.tools>.tool:nth-child(6n+6)[href*="rag-"]::before,.guide-list>.guide:nth-child(6n+6)[href*="rag-"]::before,.tools>.tool:nth-child(6n+6)[href*="t-shirt"]::before,.guide-list>.guide:nth-child(6n+6)[href*="t-shirt"]::before,.tools>.tool:nth-child(6n+6)[href*="size"]::before,.guide-list>.guide:nth-child(6n+6)[href*="size"]::before{background-image:url("/assets/fabric/icons/cat-quiltsize-navy.svg")}
.tools>.tool:nth-child(6n+1)[href*="block"]::before,.guide-list>.guide:nth-child(6n+1)[href*="block"]::before{background-image:url("/assets/fabric/icons/cat-blocks-teal.svg")}
.tools>.tool:nth-child(6n+2)[href*="block"]::before,.guide-list>.guide:nth-child(6n+2)[href*="block"]::before{background-image:url("/assets/fabric/icons/cat-blocks-coral.svg")}
.tools>.tool:nth-child(6n+3)[href*="block"]::before,.guide-list>.guide:nth-child(6n+3)[href*="block"]::before{background-image:url("/assets/fabric/icons/cat-blocks-cream.svg")}
.tools>.tool:nth-child(6n+4)[href*="block"]::before,.guide-list>.guide:nth-child(6n+4)[href*="block"]::before{background-image:url("/assets/fabric/icons/cat-blocks-mustard.svg")}
.tools>.tool:nth-child(6n+5)[href*="block"]::before,.guide-list>.guide:nth-child(6n+5)[href*="block"]::before{background-image:url("/assets/fabric/icons/cat-blocks-olive.svg")}
.tools>.tool:nth-child(6n+6)[href*="block"]::before,.guide-list>.guide:nth-child(6n+6)[href*="block"]::before{background-image:url("/assets/fabric/icons/cat-blocks-navy.svg")}
.tools>.tool:nth-child(6n+1)[href*="pricing"]::before,.guide-list>.guide:nth-child(6n+1)[href*="pricing"]::before{background-image:url("/assets/fabric/icons/cat-calculator-teal.svg")}
.tools>.tool:nth-child(6n+2)[href*="pricing"]::before,.guide-list>.guide:nth-child(6n+2)[href*="pricing"]::before{background-image:url("/assets/fabric/icons/cat-calculator-coral.svg")}
.tools>.tool:nth-child(6n+3)[href*="pricing"]::before,.guide-list>.guide:nth-child(6n+3)[href*="pricing"]::before{background-image:url("/assets/fabric/icons/cat-calculator-cream.svg")}
.tools>.tool:nth-child(6n+4)[href*="pricing"]::before,.guide-list>.guide:nth-child(6n+4)[href*="pricing"]::before{background-image:url("/assets/fabric/icons/cat-calculator-mustard.svg")}
.tools>.tool:nth-child(6n+5)[href*="pricing"]::before,.guide-list>.guide:nth-child(6n+5)[href*="pricing"]::before{background-image:url("/assets/fabric/icons/cat-calculator-olive.svg")}
.tools>.tool:nth-child(6n+6)[href*="pricing"]::before,.guide-list>.guide:nth-child(6n+6)[href*="pricing"]::before{background-image:url("/assets/fabric/icons/cat-calculator-navy.svg")}
.tools>.tool:nth-child(6n+1)[href*="batting"]::before,.guide-list>.guide:nth-child(6n+1)[href*="batting"]::before{background-image:url("/assets/fabric/icons/cat-batting-teal.svg")}
.tools>.tool:nth-child(6n+2)[href*="batting"]::before,.guide-list>.guide:nth-child(6n+2)[href*="batting"]::before{background-image:url("/assets/fabric/icons/cat-batting-coral.svg")}
.tools>.tool:nth-child(6n+3)[href*="batting"]::before,.guide-list>.guide:nth-child(6n+3)[href*="batting"]::before{background-image:url("/assets/fabric/icons/cat-batting-cream.svg")}
.tools>.tool:nth-child(6n+4)[href*="batting"]::before,.guide-list>.guide:nth-child(6n+4)[href*="batting"]::before{background-image:url("/assets/fabric/icons/cat-batting-mustard.svg")}
.tools>.tool:nth-child(6n+5)[href*="batting"]::before,.guide-list>.guide:nth-child(6n+5)[href*="batting"]::before{background-image:url("/assets/fabric/icons/cat-batting-olive.svg")}
.tools>.tool:nth-child(6n+6)[href*="batting"]::before,.guide-list>.guide:nth-child(6n+6)[href*="batting"]::before{background-image:url("/assets/fabric/icons/cat-batting-navy.svg")}
.tools>.tool:nth-child(6n+1)[href*="backing"]::before,.guide-list>.guide:nth-child(6n+1)[href*="backing"]::before{background-image:url("/assets/fabric/icons/cat-backing-teal.svg")}
.tools>.tool:nth-child(6n+2)[href*="backing"]::before,.guide-list>.guide:nth-child(6n+2)[href*="backing"]::before{background-image:url("/assets/fabric/icons/cat-backing-coral.svg")}
.tools>.tool:nth-child(6n+3)[href*="backing"]::before,.guide-list>.guide:nth-child(6n+3)[href*="backing"]::before{background-image:url("/assets/fabric/icons/cat-backing-cream.svg")}
.tools>.tool:nth-child(6n+4)[href*="backing"]::before,.guide-list>.guide:nth-child(6n+4)[href*="backing"]::before{background-image:url("/assets/fabric/icons/cat-backing-mustard.svg")}
.tools>.tool:nth-child(6n+5)[href*="backing"]::before,.guide-list>.guide:nth-child(6n+5)[href*="backing"]::before{background-image:url("/assets/fabric/icons/cat-backing-olive.svg")}
.tools>.tool:nth-child(6n+6)[href*="backing"]::before,.guide-list>.guide:nth-child(6n+6)[href*="backing"]::before{background-image:url("/assets/fabric/icons/cat-backing-navy.svg")}
.tools>.tool:nth-child(6n+1)[href*="border"]::before,.guide-list>.guide:nth-child(6n+1)[href*="border"]::before{background-image:url("/assets/fabric/icons/cat-borders-teal.svg")}
.tools>.tool:nth-child(6n+2)[href*="border"]::before,.guide-list>.guide:nth-child(6n+2)[href*="border"]::before{background-image:url("/assets/fabric/icons/cat-borders-coral.svg")}
.tools>.tool:nth-child(6n+3)[href*="border"]::before,.guide-list>.guide:nth-child(6n+3)[href*="border"]::before{background-image:url("/assets/fabric/icons/cat-borders-cream.svg")}
.tools>.tool:nth-child(6n+4)[href*="border"]::before,.guide-list>.guide:nth-child(6n+4)[href*="border"]::before{background-image:url("/assets/fabric/icons/cat-borders-mustard.svg")}
.tools>.tool:nth-child(6n+5)[href*="border"]::before,.guide-list>.guide:nth-child(6n+5)[href*="border"]::before{background-image:url("/assets/fabric/icons/cat-borders-olive.svg")}
.tools>.tool:nth-child(6n+6)[href*="border"]::before,.guide-list>.guide:nth-child(6n+6)[href*="border"]::before{background-image:url("/assets/fabric/icons/cat-borders-navy.svg")}
.tools>.tool:nth-child(6n+1)[href*="binding"]::before,.guide-list>.guide:nth-child(6n+1)[href*="binding"]::before{background-image:url("/assets/fabric/icons/cat-binding-teal.svg")}
.tools>.tool:nth-child(6n+2)[href*="binding"]::before,.guide-list>.guide:nth-child(6n+2)[href*="binding"]::before{background-image:url("/assets/fabric/icons/cat-binding-coral.svg")}
.tools>.tool:nth-child(6n+3)[href*="binding"]::before,.guide-list>.guide:nth-child(6n+3)[href*="binding"]::before{background-image:url("/assets/fabric/icons/cat-binding-cream.svg")}
.tools>.tool:nth-child(6n+4)[href*="binding"]::before,.guide-list>.guide:nth-child(6n+4)[href*="binding"]::before{background-image:url("/assets/fabric/icons/cat-binding-mustard.svg")}
.tools>.tool:nth-child(6n+5)[href*="binding"]::before,.guide-list>.guide:nth-child(6n+5)[href*="binding"]::before{background-image:url("/assets/fabric/icons/cat-binding-olive.svg")}
.tools>.tool:nth-child(6n+6)[href*="binding"]::before,.guide-list>.guide:nth-child(6n+6)[href*="binding"]::before{background-image:url("/assets/fabric/icons/cat-binding-navy.svg")}
.cards>.card.fin::before{background-image:url("/assets/fabric/icons/cat-binding-burgundy.svg")}
.cards>.card.fab::before{background-image:url("/assets/fabric/icons/cat-yardage-teal.svg")}
.cards>.card.pie::before{background-image:url("/assets/fabric/icons/cat-blocks-mustard.svg")}
.cards>.card.size::before{background-image:url("/assets/fabric/icons/cat-quiltsize-navy.svg")}

/* ============================== site search button and dialog ============================== */
#site-search-icon{color:var(--plum);min-width:44px;min-height:44px;border-radius:8px}
#site-search-icon svg{stroke:var(--plum)}
#site-search-icon:hover svg{stroke:var(--coral-card,#9f432f)}
#site-search-icon:focus-visible{box-shadow:var(--focus-ring)}
.qp-panel{background-color:var(--cream-50);background-image:var(--tex-cloth-light);background-size:512px;background-blend-mode:multiply;border-radius:14px}
.qp-panel input{background-image:none}
.qp-btn{background-color:var(--cream-50);background-image:var(--tex-cloth-light);background-size:256px;background-blend-mode:multiply;box-shadow:var(--padded),0 1px 2px rgb(var(--shadow-color)/.25);border:0}
.qp-btn.active{background-color:var(--teal);background-image:var(--tex-cloth-dark);background-blend-mode:overlay;color:#fff}
.qp-list a{background-color:var(--cream-50);background-image:var(--tex-cloth-light);background-size:256px;background-blend-mode:multiply;border:0;box-shadow:var(--padded),var(--fabric-shadow)}
.qp-list a h3,.qp-list a p{color:var(--ink);text-shadow:none}
.qp-list a::before,.qp-list a::after{display:none}
.qp-list a .qp-kind{color:var(--teal);text-shadow:none}
mark{background:#f3d98b;color:inherit;border-radius:3px;padding:0 2px;text-shadow:none}
.tool mark,.guide mark,.card mark{color:inherit}
.tools>.tool:nth-child(6n+1) mark,.tools>.tool:nth-child(6n+2) mark,.tools>.tool:nth-child(6n+5) mark,.tools>.tool:nth-child(6n+6) mark{background:rgba(255,236,170,.9);color:#1d1308;text-shadow:none}
.qp-more{margin-top:6px}
@media(max-width:820px){
  #site-search-icon{margin-left:auto!important}
  #site-search-icon + .menu-btn{margin-left:4px}
}