/* ==========================================================================
   KNOTTY JINI — "The Little Knotty Garden"
   A crochet-native design system: granny squares, scalloped trim,
   V-stitch texture, a yarn spine, and a shade-card palette.
   Hand-built. No framework.
   ========================================================================== */

/* ---------- FONTS ---------- */
@font-face{font-family:"Bricolage";src:url("../fonts/bricolage.woff2") format("woff2-variations");
  font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Hanken";src:url("../fonts/hanken.woff2") format("woff2-variations");
  font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Hanken";src:url("../fonts/hanken-italic.woff2") format("woff2-variations");
  font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"Shantell";src:url("../fonts/shantell.woff2") format("woff2-variations");
  font-weight:300 800;font-style:normal;font-display:swap}

/* ---------- 1 · TOKENS ---------- */
:root{
  color-scheme:light;

  /* the shade card */
  --milk:#FCFAF3;
  --paper:#F5EEE0;
  --pistachio:#D6E2C0;
  --blush:#F6D5D1;
  --butter:#F8E2A8;
  --sky:#C6DCE6;
  --lilac:#E0D3EE;
  --clay:#E9CBB4;

  --ink:#2B1F26;
  --ink-2:#6A5761;
  --ink-3:#94818B;

  --berry:#A62449;
  --berry-deep:#5E1029;
  --forest:#3F5A3A;

  --line:rgba(43,31,38,.15);
  --line-2:rgba(43,31,38,.08);

  --display:"Bricolage","Trebuchet MS",sans-serif;
  --sans:"Hanken",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --hand:"Shantell","Comic Sans MS",cursive;

  --wrap:1220px;
  --gut:clamp(18px,4.6vw,52px);

  --r-s:10px; --r-m:18px; --r-l:26px; --r-xl:38px;

  --sh-1:0 2px 0 rgba(43,31,38,.06);
  --sh-2:0 10px 26px -14px rgba(70,45,55,.4);
  --sh-3:0 26px 60px -28px rgba(70,45,55,.45);

  --e:cubic-bezier(.22,.68,.3,1);
  --e-out:cubic-bezier(.16,1,.3,1);

  /* V-stitch texture — the signature */
  --stitch:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='20'%3E%3Cg fill='none' stroke='%232B1F26' stroke-opacity='.075' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 2 6 8.6 11 2M13 2 18 8.6 23 2'/%3E%3Cpath d='M-11 12 -6 18.6 -1 12M1 12 6 18.6 11 12M13 12 18 18.6 23 12M25 12 30 18.6 35 12'/%3E%3C/g%3E%3C/svg%3E");
  --stitch-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='20'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='.16' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 2 6 8.6 11 2M13 2 18 8.6 23 2'/%3E%3Cpath d='M-11 12 -6 18.6 -1 12M1 12 6 18.6 11 12M13 12 18 18.6 23 12M25 12 30 18.6 35 12'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- 2 · RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--milk);color:var(--ink);
  font-family:var(--sans);font-size:16.5px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:640;line-height:1.02;letter-spacing:-.035em;
  font-variation-settings:"wdth" 96,"opsz" 40;text-wrap:balance}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2.5px solid var(--berry);outline-offset:3px;border-radius:6px}
::selection{background:var(--butter);color:var(--ink)}

/* ---------- 3 · LAYOUT ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wide{max-width:1480px}
.sec{padding-block:clamp(58px,8vw,116px);position:relative}
.sec-s{padding-block:clamp(40px,5.5vw,74px);position:relative}

/* coloured blankets */
.blanket{position:relative;background-color:var(--bg,var(--paper));background-image:var(--stitch)}
.blanket-dark{--bg:var(--berry-deep);background-color:var(--bg);background-image:var(--stitch-light);color:#F7E9E2}
.blanket-dark h1,.blanket-dark h2,.blanket-dark h3{color:#FFF6F0}

/* scalloped crochet trim between blankets */
.trim{position:absolute;left:0;right:0;height:15px;pointer-events:none;z-index:2}
.trim-top{top:-14px;
  background:radial-gradient(circle 15px at 50% 100%,var(--tc) 97%,transparent 98%) repeat-x;
  background-size:30px 15px}
.trim-bot{bottom:-14px;
  background:radial-gradient(circle 15px at 50% 0,var(--tc) 97%,transparent 98%) repeat-x;
  background-size:30px 15px}
.trim::after{content:"";position:absolute;left:0;right:0;height:4px;
  background:radial-gradient(circle 2px at 50% 50%,rgba(43,31,38,.14) 60%,transparent 62%) repeat-x;
  background-size:30px 4px}
.trim-top::after{top:-2px}
.trim-bot::after{bottom:-2px}

/* ---------- 4 · TYPE ---------- */
.d1{font-size:clamp(2.85rem,8.6vw,6rem);line-height:.92;letter-spacing:-.045em;font-weight:700;
  font-variation-settings:"wdth" 92,"opsz" 96}
.d2{font-size:clamp(2rem,4.6vw,3.35rem);line-height:.98;letter-spacing:-.04em;font-weight:680;
  font-variation-settings:"wdth" 94,"opsz" 60}
.d3{font-size:clamp(1.4rem,2.4vw,1.95rem);line-height:1.08;letter-spacing:-.03em;font-weight:640}
.d4{font-size:clamp(1.08rem,1.5vw,1.25rem);line-height:1.2;letter-spacing:-.022em;font-weight:640}
.lead{font-size:clamp(1rem,1.25vw,1.115rem);color:var(--ink-2);line-height:1.62;max-width:54ch}
.tiny{font-size:.83rem;color:var(--ink-3);line-height:1.5}
.hand{font-family:var(--hand);font-weight:500;font-size:1.16rem;line-height:1.35;color:var(--berry)}

/* swatch label — replaces the generic eyebrow rule */
.swatch-label{display:inline-flex;align-items:center;gap:.6em;font-size:.7rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-2)}
.swatch-label::before{content:"";width:15px;height:15px;border-radius:5px;flex:none;
  background:var(--sw,var(--berry));box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55),0 0 0 1px rgba(43,31,38,.14)}
.blanket-dark .swatch-label{color:rgba(247,233,226,.72)}

/* ---------- 5 · BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  padding:.92em 1.6em;border-radius:999px;font-size:.9rem;font-weight:650;letter-spacing:-.01em;
  position:relative;transition:transform .35s var(--e-out),background .3s,color .3s,box-shadow .35s var(--e-out);
  white-space:nowrap}
.btn svg{flex:none;transition:transform .35s var(--e-out)}
.btn:hover svg{transform:translateX(3px)}
.btn::after{content:"";position:absolute;inset:5px;border-radius:999px;border:1.4px dashed transparent;
  transition:border-color .3s;pointer-events:none}
.btn:hover::after{border-color:var(--stitchclr,rgba(255,255,255,.45))}
.btn-p{background:var(--berry);color:#FFF7F2;box-shadow:0 3px 0 var(--berry-deep)}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--berry-deep)}
.btn-p:active{transform:translateY(1px);box-shadow:0 1px 0 var(--berry-deep)}
.btn-g{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.6px var(--ink);--stitchclr:rgba(43,31,38,.35)}
.btn-g:hover{background:var(--ink);color:var(--milk);transform:translateY(-2px);--stitchclr:rgba(255,255,255,.4)}
.btn-cream{background:var(--milk);color:var(--berry-deep);box-shadow:0 3px 0 rgba(0,0,0,.18);--stitchclr:rgba(94,16,41,.3)}
.btn-cream:hover{transform:translateY(-2px)}
.btn-sm{padding:.66em 1.15em;font-size:.8rem}
.btn-sm::after{inset:4px}
.link{display:inline-flex;align-items:center;gap:.4em;font-weight:650;font-size:.88rem;color:var(--berry);
  border-bottom:1.6px solid currentColor;padding-bottom:1px;transition:gap .3s var(--e-out)}
.link:hover{gap:.7em}

/* ---------- 6 · HEADER ---------- */
.ribbon{background:var(--butter);background-image:var(--stitch);padding:9px var(--gut);
  display:flex;justify-content:center;gap:0;flex-wrap:wrap;font-size:.72rem;font-weight:600;
  letter-spacing:.06em;color:#5C4519}
.ribbon span{padding-inline:16px;display:inline-flex;align-items:center;gap:16px}
.ribbon span::after{content:"";width:7px;height:7px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.85),transparent 58%),#C79A3B}
.ribbon span:last-child::after{display:none}
@media(max-width:640px){.ribbon span:nth-child(n+3){display:none}.ribbon span:nth-child(2)::after{display:none}}

.nav{position:sticky;top:0;z-index:140;background:var(--milk);transition:box-shadow .35s}
.nav::after{content:"";position:absolute;left:0;right:0;bottom:-14px;height:15px;pointer-events:none;
  background:radial-gradient(circle 15px at 50% 0,var(--milk) 97%,transparent 98%) repeat-x;background-size:30px 15px}
.nav.stuck{box-shadow:0 12px 26px -24px rgba(70,45,55,.7)}
.nav-row{display:flex;align-items:center;gap:20px;height:68px}
.brand{display:flex;align-items:center;gap:10px;flex:none;font-family:var(--display);font-weight:720;
  font-size:1.14rem;letter-spacing:-.04em}
.brand svg{width:36px;height:36px;flex:none}
.nav-links{display:flex;gap:3px;margin-left:auto}
.nav-links a{padding:.5em .82em;font-size:.875rem;font-weight:550;color:var(--ink-2);border-radius:999px;
  position:relative;transition:color .25s,background .25s}
.nav-links a:hover{color:var(--ink);background:var(--paper)}
.nav-links a[aria-current]{color:var(--berry)}
.nav-links a[aria-current]::after{content:"";position:absolute;left:50%;translate:-50% 0;bottom:.05em;
  width:5px;height:5px;border-radius:50%;background:var(--berry)}
.nav-act{display:flex;align-items:center;gap:8px;flex:none}
.basket-btn{display:inline-flex;align-items:center;gap:.5em;padding:.58em .5em .58em 1em;border-radius:999px;
  font-size:.82rem;font-weight:650;box-shadow:inset 0 0 0 1.5px var(--line);transition:.3s var(--e-out)}
.basket-btn:hover{box-shadow:inset 0 0 0 1.5px var(--berry);color:var(--berry)}
.basket-count{min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--berry);color:#fff;
  font-size:.7rem;font-weight:700;display:grid;place-items:center;font-variant-numeric:tabular-nums}
.basket-count[data-empty="1"]{background:var(--paper);color:var(--ink-3)}
.burger{display:none;width:42px;height:42px;border-radius:50%;place-items:center;box-shadow:inset 0 0 0 1.5px var(--line)}
.burger span{display:block;width:17px;height:1.8px;background:var(--ink);margin:3.2px 0;border-radius:2px;
  transition:.35s var(--e-out)}
.nav.open .burger span:nth-child(1){transform:translateY(8.2px) rotate(45deg)}
.nav.open .burger span:nth-child(2){opacity:0}
.nav.open .burger span:nth-child(3){transform:translateY(-8.2px) rotate(-45deg)}
.drawer{display:none;position:fixed;inset:106px 0 0;background:var(--milk);background-image:var(--stitch);
  z-index:130;padding:22px var(--gut) 40px;overflow-y:auto;opacity:0;pointer-events:none;transition:opacity .28s}
.drawer.show{opacity:1;pointer-events:auto}
.drawer a{display:flex;align-items:center;gap:14px;font-family:var(--display);font-size:1.8rem;font-weight:660;
  letter-spacing:-.04em;padding:.4em 0;border-bottom:1.5px dashed var(--line-2)}
.drawer a i{width:16px;height:16px;border-radius:5px;flex:none;background:var(--c,var(--blush));
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6)}
@media(max-width:1060px){.nav-links{display:none}.burger{display:grid}.drawer{display:block}}

/* ---------- 7 · GRANNY SQUARE + PATCH ---------- */
.patch{position:relative;border-radius:var(--r-l);background:var(--c,var(--pistachio));
  background-image:var(--stitch);overflow:hidden;box-shadow:var(--sh-1)}
.patch-img{padding:0}
.patch-img img{width:100%;height:100%;object-fit:cover}

/* hero patchwork */
.quilt{display:grid;grid-template-columns:1.35fr 1fr;grid-template-rows:auto auto;gap:clamp(10px,1.4vw,18px);
  aspect-ratio:1/1.02}
.quilt>*{min-width:0}
.q-a{grid-row:1/3;border-radius:var(--r-xl);overflow:hidden;background:var(--paper);box-shadow:var(--sh-2);
  rotate:-1.1deg}
.q-a img{width:100%;height:100%;object-fit:cover}
.q-b{border-radius:var(--r-l);display:grid;place-items:center;rotate:1.6deg;padding:14px}
.q-c{border-radius:var(--r-l);overflow:hidden;rotate:-2deg;position:relative;box-shadow:var(--sh-1)}
.q-c img{width:100%;height:100%;object-fit:cover}
@media(max-width:900px){.quilt{aspect-ratio:1/.82;max-width:520px;margin-inline:auto}}

/* ---------- 8 · HERO ---------- */
.hero{position:relative;padding-block:clamp(30px,4.6vw,64px) clamp(48px,7vw,96px)}
.hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(26px,4.5vw,64px);align-items:center}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:34px}}
.hero h1{margin:.3em 0 0}
.squig{display:block;width:min(340px,72%);height:16px;margin-top:.1em;color:var(--berry)}
.squig path{fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round;
  stroke-dasharray:var(--l,600);stroke-dashoffset:var(--l,600);animation:draw 1.4s .35s var(--e-out) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.squig path{animation:none;stroke-dashoffset:0}}
.hero-cta{display:flex;gap:11px;flex-wrap:wrap;margin-top:2em;align-items:center}
.yarnrow{display:flex;align-items:center;gap:12px;margin-top:2.3em;flex-wrap:wrap}
.yarnrow p{font-size:.8rem;color:var(--ink-3);font-weight:550}
.balls{display:flex;gap:6px}
.ball{width:24px;height:24px;border-radius:50%;background:var(--c);position:relative;
  box-shadow:inset 0 0 0 1px rgba(43,31,38,.13),inset -3px -4px 7px rgba(43,31,38,.13)}
.ball::after{content:"";position:absolute;inset:3px;border-radius:50%;
  background:repeating-linear-gradient(56deg,rgba(255,255,255,.5) 0 1px,transparent 1px 4px)}

/* note pinned with tape */
.note{background:#FFFDF6;padding:13px 16px 15px;border-radius:4px;font-family:var(--hand);font-weight:500;
  font-size:1.06rem;line-height:1.35;color:var(--ink-2);box-shadow:0 8px 20px -12px rgba(70,45,55,.5);position:relative}
.note::before{content:"";position:absolute;top:-8px;left:22px;width:54px;height:16px;
  background:rgba(200,168,116,.4);rotate:-4deg;border-radius:1px}

/* ---------- 9 · CHARM STRING (collections) ---------- */
.string{position:relative;padding-top:36px}
.string::before{content:"";position:absolute;top:16px;left:0;right:0;height:2px;
  background:repeating-linear-gradient(90deg,var(--forest) 0 9px,transparent 9px 15px);opacity:.5;border-radius:2px}
.charms{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(8px,1.6vw,20px)}
@media(max-width:900px){.charms{grid-template-columns:repeat(3,1fr);row-gap:34px}}
@media(max-width:520px){.charms{grid-template-columns:repeat(2,1fr)}}
.charm{display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;
  transform-origin:50% -20px;transition:rotate .6s var(--e-out)}
.charm:hover{rotate:2.4deg}
.charm::before{content:"";width:2px;height:22px;background:var(--forest);opacity:.55;margin-top:-22px}
.charm-o{width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;position:relative;
  background:var(--c,var(--paper));box-shadow:0 0 0 5px var(--milk),0 0 0 6.5px var(--line),var(--sh-2);
  transition:box-shadow .4s var(--e-out)}
.charm:hover .charm-o{box-shadow:0 0 0 5px var(--milk),0 0 0 6.5px var(--berry),var(--sh-2)}
.charm-o img{width:100%;height:100%;object-fit:cover;transition:scale 1s var(--e-out)}
.charm:hover .charm-o img{scale:1.07}
.charm b{font-family:var(--display);font-size:.98rem;font-weight:660;letter-spacing:-.025em;margin-top:14px}
.charm span{font-size:.72rem;color:var(--ink-3);margin-top:1px;line-height:1.3}

/* ---------- 10 · YARN BALL PICKER ---------- */
.picks{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.8vw,22px)}
@media(max-width:720px){.picks{grid-template-columns:repeat(2,1fr)}}
.pick{display:flex;flex-direction:column;align-items:center;gap:12px;padding:22px 14px 20px;border-radius:var(--r-l);
  transition:.4s var(--e-out);text-align:center;position:relative;background:transparent}
.pick:hover,.pick[aria-pressed="true"]{background:var(--c);background-image:var(--stitch);transform:translateY(-4px)}
.pick .yb{width:clamp(58px,7vw,78px);aspect-ratio:1;border-radius:50%;position:relative;background:var(--c);
  box-shadow:inset -6px -8px 14px rgba(43,31,38,.16),inset 0 0 0 1px rgba(43,31,38,.12);
  transition:rotate .7s var(--e-out)}
.pick:hover .yb{rotate:-14deg}
.pick[aria-pressed="true"] .yb{box-shadow:inset -6px -8px 14px rgba(43,31,38,.16),0 0 0 3px var(--milk),0 0 0 5px var(--berry)}
.pick .yb::after{content:"";position:absolute;inset:5px;border-radius:50%;
  background:repeating-linear-gradient(52deg,rgba(255,255,255,.55) 0 1.4px,transparent 1.4px 6px),
             repeating-linear-gradient(-38deg,rgba(43,31,38,.09) 0 1px,transparent 1px 7px)}
.pick b{font-family:var(--display);font-size:1.06rem;font-weight:660;letter-spacing:-.028em}
.pick span{font-size:.78rem;color:var(--ink-3);line-height:1.45;max-width:22ch}

/* ---------- 11 · PRODUCT CARD (pinned to a patch) ---------- */
.grid-p{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:clamp(16px,2.2vw,30px)}
.card{position:relative;display:flex;flex-direction:column}
.card-patch{position:relative;border-radius:var(--r-l);padding:10px;background:var(--c,var(--paper));
  background-image:var(--stitch);rotate:var(--rot,-1deg);
  transition:rotate .5s var(--e-out),transform .5s var(--e-out),box-shadow .5s var(--e-out);
  box-shadow:var(--sh-1)}
.card:hover .card-patch{rotate:0deg;transform:translateY(-6px);box-shadow:var(--sh-2)}
.card-img{position:relative;aspect-ratio:1/1.12;border-radius:var(--r-m);overflow:hidden;background:var(--milk);
  display:block}
.card-img img{width:100%;height:100%;object-fit:cover;transition:scale 1s var(--e-out),opacity .45s}
.card-img img.alt{position:absolute;inset:0;opacity:0}
.card:hover .card-img img{scale:1.05}
.card:hover .card-img img.alt{opacity:1}
.card-tag{position:absolute;top:9px;left:9px;z-index:3;background:var(--milk);color:var(--berry);
  font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;font-weight:750;padding:.42em .7em;
  border-radius:999px;box-shadow:var(--sh-1)}
.card-fav{position:absolute;top:8px;right:8px;z-index:3;width:32px;height:32px;border-radius:50%;
  background:var(--milk);display:grid;place-items:center;box-shadow:var(--sh-1);
  opacity:0;translate:0 -4px;transition:.3s var(--e-out)}
.card:hover .card-fav,.card-fav.on{opacity:1;translate:0}
.card-fav svg{width:15px;height:15px;stroke:var(--berry);fill:none;stroke-width:1.8}
.card-fav.on svg{fill:var(--berry)}
.card-body{padding:14px 4px 0;display:flex;flex-direction:column;gap:4px}
.card-cat{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:650}
.card-body h3{font-size:1.02rem;font-weight:640;letter-spacing:-.028em;line-height:1.18}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px}
/* swing tag price */
.tag{display:inline-flex;align-items:center;padding:.34em .78em .34em 1.15em;background:var(--butter);
  border-radius:4px 999px 999px 4px;font-size:.85rem;font-weight:700;color:#5C4519;position:relative;
  font-variant-numeric:tabular-nums;box-shadow:0 1px 0 rgba(43,31,38,.1)}
.tag::before{content:"";position:absolute;left:.46em;top:50%;translate:0 -50%;width:6px;height:6px;
  border-radius:50%;background:var(--milk);box-shadow:inset 0 0 0 1px rgba(43,31,38,.25)}
.add{font-size:.76rem;font-weight:700;color:var(--berry);padding:.44em .85em;border-radius:999px;
  box-shadow:inset 0 0 0 1.4px var(--line);transition:.28s var(--e-out);white-space:nowrap}
.add:hover{background:var(--berry);color:#fff;box-shadow:inset 0 0 0 1.4px var(--berry)}
.add.done{background:var(--forest);color:#fff;box-shadow:inset 0 0 0 1.4px var(--forest)}
.dots{display:flex;gap:5px;margin-top:8px}
.dot{width:11px;height:11px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(43,31,38,.16),
  inset -2px -2px 4px rgba(43,31,38,.13)}

/* ---------- 12 · SECTION HEAD ---------- */
.head{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:end;margin-bottom:clamp(26px,3.4vw,46px)}
.head p{margin-top:.8em}
.head .swatch-label{margin-bottom:.95em}
@media(max-width:760px){.head{grid-template-columns:1fr}.head>.btn,.head>a.btn{justify-self:start}}

/* ---------- 13 · BEDS (garden) ---------- */
.beds{display:flex;flex-direction:column;gap:clamp(42px,6vw,92px)}
.bed{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,4vw,56px);align-items:center}
.bed:nth-child(even) .bed-media{order:2}
.bed-media{position:relative;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:5/4;background:var(--c,var(--paper));
  padding:12px;background-image:var(--stitch);box-shadow:var(--sh-1);rotate:var(--rot,-.8deg);
  transition:rotate .55s var(--e-out)}
.bed:hover .bed-media{rotate:0deg}
.bed-media img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-l)}
.bed h3{margin-bottom:.45em}
.chipset{display:flex;flex-wrap:wrap;gap:7px;margin:1.1em 0 1.6em}
.chip{font-size:.74rem;font-weight:550;padding:.42em .85em;border-radius:999px;color:var(--ink-2);
  box-shadow:inset 0 0 0 1.4px var(--line)}
@media(max-width:820px){.bed{grid-template-columns:1fr}.bed:nth-child(even) .bed-media{order:0}}

/* ---------- 14 · YARN SPINE ---------- */
.spine{position:fixed;left:16px;top:0;bottom:0;width:34px;z-index:90;pointer-events:none}
.spine svg{width:100%;height:100%}
.spine .track{fill:none;stroke:var(--line-2);stroke-width:2.4;stroke-linecap:round}
.spine .live{fill:none;stroke:var(--berry);stroke-width:2.6;stroke-linecap:round;opacity:.8}
.spine .bead{fill:var(--berry)}
@media(max-width:1320px){.spine{display:none}}

/* ---------- 15 · STEPS ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,26px)}
@media(max-width:880px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.steps{grid-template-columns:1fr}}
.step{position:relative}
.step figure{margin:0 0 15px;border-radius:var(--r-l);overflow:hidden;aspect-ratio:4/3;background:var(--c,var(--paper));
  padding:9px;background-image:var(--stitch)}
.step figure img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-m)}
.step-n{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;
  background:var(--ink);color:var(--milk);font-size:.7rem;font-weight:700;margin-bottom:.7em;
  font-variant-numeric:tabular-nums}
.step h3{font-size:1.1rem;font-weight:640;margin-bottom:.35em}
.step p{font-size:.87rem;color:var(--ink-2);line-height:1.58}

/* ---------- 16 · TRACKER ---------- */
.track{display:flex;flex-direction:column;max-width:660px}
.tstep{display:grid;grid-template-columns:46px 1fr;gap:18px;padding-bottom:32px;position:relative}
.tstep:last-child{padding-bottom:0}
.tstep::before{content:"";position:absolute;left:22px;top:38px;bottom:-4px;width:2px;
  background:repeating-linear-gradient(180deg,var(--line) 0 5px,transparent 5px 11px)}
.tstep:last-child::before{display:none}
.tstep.done::before{background:var(--forest);opacity:.45}
.tdot{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--paper);
  box-shadow:inset 0 0 0 1.6px var(--line);position:relative;z-index:1;transition:.45s var(--e-out)}
.tstep.done .tdot{background:var(--forest);color:#fff;box-shadow:none}
.tstep.now .tdot{background:var(--berry);color:#fff;box-shadow:0 0 0 6px rgba(166,36,73,.14)}
.tstep h4{font-family:var(--display);font-size:1.05rem;font-weight:660;letter-spacing:-.028em;margin-bottom:.18em}
.tstep p{font-size:.86rem;color:var(--ink-3)}
.tstep:not(.done):not(.now) h4{color:var(--ink-3)}

/* ---------- 17 · FORMS ---------- */
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.field label{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.input{width:100%;padding:.88em 1.1em;border:0;border-radius:14px;background:var(--milk);
  box-shadow:inset 0 0 0 1.6px var(--line);font:inherit;font-size:.93rem;color:var(--ink);transition:.25s}
.input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--berry)}
textarea.input{min-height:104px;resize:vertical;line-height:1.55}
select.input{appearance:none;padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394818B' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center}

/* ---------- 18 · PANELS ---------- */
.panel{border-radius:var(--r-xl);padding:clamp(20px,3vw,36px);background:var(--c,var(--paper));
  background-image:var(--stitch)}
.panel-plain{background:var(--milk);background-image:none;box-shadow:inset 0 0 0 1.6px var(--line)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,60px);align-items:center}
@media(max-width:880px){.split{grid-template-columns:1fr}}
.frame{border-radius:var(--r-xl);overflow:hidden;background:var(--c,var(--paper));padding:12px;
  background-image:var(--stitch)}
.frame img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-l)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2.2vw,26px)}
@media(max-width:700px){.two{grid-template-columns:1fr}}

/* ---------- 19 · GIFT CARDS ---------- */
.gifts{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,24px)}
@media(max-width:900px){.gifts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.gifts{grid-template-columns:1fr}}
.gift{border-radius:var(--r-xl);overflow:hidden;background:var(--c,var(--paper));background-image:var(--stitch);
  display:flex;flex-direction:column;transition:.45s var(--e-out);padding:10px}
.gift:hover{transform:translateY(-5px);box-shadow:var(--sh-2)}
.gift figure{margin:0;aspect-ratio:1;overflow:hidden;border-radius:var(--r-l);background:var(--milk)}
.gift figure img{width:100%;height:100%;object-fit:cover;transition:scale 1s var(--e-out)}
.gift:hover figure img{scale:1.05}
.gift-b{padding:16px 12px 14px;display:flex;flex-direction:column;gap:.3em;flex:1}
.gift-b h3{font-size:1.1rem;font-weight:660}
.gift-b p{font-size:.83rem;color:var(--ink-2);line-height:1.5}

/* ---------- 20 · PHOTO WALL ---------- */
.wall{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(8px,1.2vw,15px)}
@media(max-width:1000px){.wall{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.wall{grid-template-columns:repeat(2,1fr)}}
.wall-i{margin:0;position:relative;border-radius:var(--r-m);overflow:hidden;aspect-ratio:4/5;background:var(--paper);
  rotate:var(--rot,0deg);transition:rotate .5s var(--e-out),transform .5s var(--e-out)}
.wall-i:hover{rotate:0deg;transform:translateY(-4px);z-index:2}
.wall-i img{width:100%;height:100%;object-fit:cover}
.wall-i figcaption{position:absolute;inset:auto 0 0;padding:24px 11px 9px;font-size:.7rem;color:#fff;font-weight:600;
  background:linear-gradient(to top,rgba(35,22,28,.68),transparent);opacity:0;transition:opacity .35s}
.wall-i:hover figcaption{opacity:1}

/* ---------- 21 · PDP ---------- */
.pdp{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,4vw,64px);align-items:start}
@media(max-width:940px){.pdp{grid-template-columns:1fr}}
.gal-main{border-radius:var(--r-xl);overflow:hidden;aspect-ratio:1/1.12;background:var(--c,var(--pistachio));
  padding:14px;background-image:var(--stitch)}
.gal-main img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-l)}
.gal-thumbs{display:flex;gap:9px;margin-top:12px;flex-wrap:wrap}
.gal-thumbs button{width:70px;aspect-ratio:1;border-radius:14px;overflow:hidden;background:var(--paper);
  box-shadow:inset 0 0 0 2px transparent;transition:.28s;padding:3px}
.gal-thumbs button img{width:100%;height:100%;object-fit:cover;border-radius:11px}
.gal-thumbs button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--berry)}
.pdp-info{position:sticky;top:92px}
@media(max-width:940px){.pdp-info{position:static}}
.opt-row{display:flex;gap:9px;flex-wrap:wrap;margin-top:.75em}
.swatch{width:36px;height:36px;border-radius:12px;background:var(--c);transition:.28s var(--e-out);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5),0 0 0 1px rgba(43,31,38,.14)}
.swatch[aria-pressed="true"]{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5),0 0 0 2.5px var(--berry);
  transform:translateY(-2px)}
.acc{border-top:1.5px dashed var(--line)}
.acc button{width:100%;display:flex;justify-content:space-between;align-items:center;padding:1.05em 0;
  font-size:.93rem;font-weight:650;text-align:left;gap:12px}
.acc button svg{transition:rotate .35s var(--e-out);flex:none}
.acc button[aria-expanded="true"] svg{rotate:45deg}
.acc-p{max-height:0;overflow:hidden;transition:max-height .45s var(--e-out)}
.acc-p div{padding-bottom:1.2em;font-size:.89rem;color:var(--ink-2);line-height:1.62}
.assure{display:grid;gap:.7em;margin-top:1.5em;padding-top:1.4em;border-top:1.5px dashed var(--line)}
.assure li{display:flex;gap:.7em;align-items:flex-start;font-size:.86rem;color:var(--ink-2);line-height:1.5}
.assure .ic{color:var(--berry);margin-top:.12em}

/* ---------- 22 · BASKET ---------- */
.brow{display:grid;grid-template-columns:92px 1fr auto;gap:18px;padding:18px 0;align-items:center;
  border-bottom:1.5px dashed var(--line-2)}
.brow figure{margin:0;aspect-ratio:1;border-radius:16px;overflow:hidden;background:var(--c,var(--paper));padding:6px;
  background-image:var(--stitch)}
.brow figure img{width:100%;height:100%;object-fit:cover;border-radius:11px}
.qty{display:inline-flex;align-items:center;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--line);overflow:hidden}
.qty button{width:32px;height:32px;display:grid;place-items:center;font-size:1.05rem;color:var(--ink-2);transition:.2s}
.qty button:hover{background:var(--paper)}
.qty span{min-width:26px;text-align:center;font-size:.86rem;font-weight:700;font-variant-numeric:tabular-nums}
@media(max-width:620px){.brow{grid-template-columns:74px 1fr}.brow>div:last-child{grid-column:1/-1;
  display:flex;justify-content:space-between;align-items:center}}

/* ---------- 23 · FOOTER ---------- */
.foot{position:relative;background:var(--berry-deep);background-image:var(--stitch-light);color:#EFD9D0;
  padding-block:clamp(52px,7vw,90px) 0;margin-top:auto}
.foot h2,.foot h3,.foot h4{color:#FFF4EE}
.foot a{transition:color .25s}
.foot a:hover{color:#fff}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:clamp(22px,3vw,44px)}
@media(max-width:880px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:500px){.foot-grid{grid-template-columns:1fr}}
.foot h4{font-family:var(--sans);font-size:.68rem;letter-spacing:.17em;text-transform:uppercase;
  color:rgba(239,217,208,.5);margin-bottom:1em;font-weight:700}
.foot li{margin-bottom:.5em;font-size:.9rem}
.foot .btn-cream{color:var(--berry-deep)}
.foot-bottom{margin-top:clamp(34px,5vw,56px);padding:20px 0 34px;border-top:1.5px dashed rgba(239,217,208,.2);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.78rem;color:rgba(239,217,208,.6)}
/* crochet fringe along the very bottom */
.fringe{height:26px;background:
  repeating-linear-gradient(90deg,rgba(239,217,208,.32) 0 2px,transparent 2px 9px);
  -webkit-mask:linear-gradient(180deg,#000 25%,transparent 100%);
          mask:linear-gradient(180deg,#000 25%,transparent 100%)}

/* ---------- 24 · TOAST ---------- */
.toast{position:fixed;left:50%;bottom:24px;translate:-50% 130%;z-index:400;background:var(--ink);color:#FFF6F0;
  padding:.85em 1.3em;border-radius:999px;font-size:.86rem;font-weight:600;box-shadow:var(--sh-3);
  transition:translate .45s var(--e-out);display:flex;align-items:center;gap:.6em;max-width:calc(100vw - 36px)}
.toast.show{translate:-50% 0}
.toast .ic{color:var(--butter)}

/* ---------- 25 · REVEAL & MISC ---------- */
.rv{opacity:0;translate:0 18px;transition:opacity .7s var(--e-out),translate .7s var(--e-out)}
.rv.in{opacity:1;translate:0}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;translate:0;transition:none}
  .charm,.card-patch,.bed-media{transition:none}}
.crumbs{font-size:.78rem;color:var(--ink-3);display:flex;gap:.5em;align-items:center;flex-wrap:wrap;font-weight:550}
.crumbs a:hover{color:var(--berry)}
.center{text-align:center}
.mx{margin-inline:auto}
.mt-s{margin-top:1em}.mt-m{margin-top:1.7em}.mt-l{margin-top:2.6em}
.hide{display:none!important}
.empty{padding:clamp(36px,6vw,72px) 0;text-align:center}
.filters{display:flex;gap:7px;flex-wrap:wrap}
.f{font-size:.8rem;font-weight:600;padding:.55em 1.05em;border-radius:999px;transition:.28s var(--e-out);
  box-shadow:inset 0 0 0 1.5px var(--line)}
.f:hover{box-shadow:inset 0 0 0 1.5px var(--berry);color:var(--berry)}
.f[aria-pressed="true"]{background:var(--ink);color:var(--milk);box-shadow:inset 0 0 0 1.5px var(--ink)}
.toolbar{display:flex;gap:16px;justify-content:space-between;align-items:center;flex-wrap:wrap;
  margin-bottom:clamp(22px,3vw,34px)}
.ic{display:block;flex:none}
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--berry);color:#fff;padding:.7em 1.1em;
  font-size:.85rem;font-weight:650;border-radius:0 0 12px 0}
.skip:focus{left:0}
.stat{display:flex;gap:26px;flex-wrap:wrap;margin-top:2.2em;padding-top:1.4em;border-top:1.5px dashed var(--line)}
.stat div{min-width:0}
.stat strong{display:block;font-family:var(--display);font-size:1.4rem;font-weight:700;letter-spacing:-.04em;line-height:1}
.stat span{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:650}
@media(max-width:460px){.stat{gap:16px}.stat div{flex:1}}

/* ---------- 26 · REFINEMENTS ---------- */
/* hero patch: granny square + pinned note */
.q-b{position:relative;overflow:visible;display:block;padding:16px 16px 30px}
.q-b .granny{width:100%;height:auto;max-width:118px;margin-inline:auto;display:block;
  filter:drop-shadow(0 6px 14px rgba(63,90,58,.22))}
.q-b .note{font-size:.95rem;padding:11px 14px 12px;z-index:3}
.q-b .note::before{left:18px;width:44px;height:14px}
@media(max-width:900px){.q-b .note{font-size:.86rem}}

/* yarn balls with more presence */
.pick{gap:14px}
.pick:hover,.pick[aria-pressed="true"]{background:rgba(255,255,255,.62);background-image:none}
.pick[aria-pressed="true"]{background:#fff;box-shadow:var(--sh-2)}
.pick .yb{width:clamp(66px,7.4vw,88px);
  box-shadow:inset -8px -10px 18px rgba(43,31,38,.22),inset 5px 6px 12px rgba(255,255,255,.75),
             0 6px 14px -8px rgba(43,31,38,.4)}
.pick .yb::after{inset:0;
  background:repeating-linear-gradient(48deg,rgba(255,255,255,.75) 0 2px,transparent 2px 8px),
             repeating-linear-gradient(-42deg,rgba(43,31,38,.14) 0 1.4px,transparent 1.4px 9px);
  -webkit-mask:radial-gradient(circle at 50% 50%,#000 66%,transparent 71%);
          mask:radial-gradient(circle at 50% 50%,#000 66%,transparent 71%)}
.pick .yb::before{content:"";position:absolute;right:-9px;bottom:12%;width:26px;height:22px;
  border-right:2px solid var(--c);border-bottom:2px solid var(--c);border-radius:0 0 14px 0;
  filter:brightness(.82)}
.pick b{font-size:1.1rem}
.pick span{font-size:.79rem;max-width:23ch}

/* softer, friendlier yarn spine */
.spine{left:12px;width:38px}
.spine .track{stroke:rgba(43,31,38,.13);stroke-width:2;stroke-dasharray:5 8}
.spine .live{stroke:var(--berry);stroke-width:3;opacity:.55}
.spine .bead{fill:var(--berry);stroke:var(--milk);stroke-width:3}

/* charm string: make the hanging thread read properly */
.string::before{background:repeating-linear-gradient(90deg,rgba(63,90,58,.55) 0 10px,transparent 10px 17px);opacity:1}
.charm::before{background:rgba(63,90,58,.55);opacity:1;border-radius:2px}
.charm b{font-size:1rem}

/* the granny motif reused as a divider */
.motif{display:block;width:34px;height:34px;margin:0 auto}

/* ---------- 27 · YARN BALL (svg) + hero note ---------- */
.pick .yb{background:none;box-shadow:none;width:clamp(72px,8vw,96px);height:auto;aspect-ratio:1;
  display:block;overflow:visible}
.pick .yb::before,.pick .yb::after{display:none}
.pick .yb svg{width:100%;height:100%;overflow:visible;
  filter:drop-shadow(0 7px 12px rgba(43,31,38,.22));transition:rotate .7s var(--e-out)}
.pick:hover .yb svg{rotate:-12deg}
.yb-body{fill:var(--c)}
.yb-tail{stroke:var(--c);filter:brightness(.86)}
.pick[aria-pressed="true"] .yb svg{rotate:-12deg}

.quilt{position:relative}
.q-note{position:absolute;left:-16px;bottom:5%;z-index:6;rotate:-3.5deg;max-width:212px;font-size:1rem}
@media(max-width:900px){.q-note{left:-6px;bottom:2%;max-width:160px;font-size:.88rem}}
.q-b{padding:18px;display:grid;place-items:center}
.q-b .granny{max-width:min(140px,68%)}

.spine .live{opacity:.4;stroke-width:2.6}
/* picks read as four soft cards at rest */
.pick{background:rgba(255,255,255,.34);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6)}
.pick span{color:var(--ink-2)}
.panel .pick{background:rgba(255,255,255,.45)}

/* ==========================================================================
   28 · OCCASION BAR
   ========================================================================== */
.occ{background:var(--forest);color:#EAF0E0;display:flex;justify-content:center;align-items:center;
  gap:14px;flex-wrap:wrap;padding:10px var(--gut);font-size:.82rem;font-weight:550;text-align:center}
.occ b{font-family:var(--display);font-weight:680;letter-spacing:-.02em;font-size:.95rem;color:#fff}
.occ .cd{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.16);
  padding:.24em .7em;border-radius:999px;font-variant-numeric:tabular-nums;font-weight:700}
.occ a{text-decoration:underline;text-underline-offset:3px;font-weight:650}
.occ .dot{width:6px;height:6px;border-radius:50%;background:#F8E2A8;flex:none}
@media(max-width:600px){.occ{font-size:.76rem;gap:9px;padding-block:9px}}

/* ==========================================================================
   29 · COLOUR STUDIO
   ========================================================================== */
.studio-grid{display:grid;grid-template-columns:1fr .92fr;gap:clamp(22px,3.4vw,50px);align-items:start}
@media(max-width:940px){.studio-grid{grid-template-columns:1fr}}
.stage{border-radius:var(--r-xl);padding:clamp(16px,2.4vw,26px);background:var(--c,#D6E2C0);
  background-image:var(--stitch);position:sticky;top:92px}
@media(max-width:940px){.stage{position:static}}
.stage-card{background:var(--milk);border-radius:var(--r-l);aspect-ratio:1;display:grid;place-items:center;
  padding:clamp(16px,3vw,40px);box-shadow:inset 0 0 0 1.5px rgba(43,31,38,.07)}
.stage-card svg{width:100%;height:auto;max-width:400px;filter:drop-shadow(0 10px 20px rgba(43,31,38,.14))}
.stage-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap}
.stage-foot .recipe{font-size:.78rem;color:rgba(43,31,38,.6);font-weight:600}

.motif-row{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:14px 0 26px}
@media(max-width:520px){.motif-row{grid-template-columns:repeat(3,1fr)}}
.motif-b{border-radius:16px;padding:8px 6px 9px;background:var(--milk);box-shadow:inset 0 0 0 1.6px var(--line);
  transition:.28s var(--e-out);display:flex;flex-direction:column;align-items:center;gap:5px}
.motif-b svg{width:100%;height:auto}
.motif-b span{font-size:.6rem;font-weight:650;letter-spacing:.02em;color:var(--ink-3);line-height:1.15;text-align:center}
.motif-b:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1.6px var(--berry)}
.motif-b[aria-pressed="true"]{box-shadow:inset 0 0 0 2.4px var(--berry);background:#fff}
.motif-b[aria-pressed="true"] span{color:var(--ink)}

.parts{display:grid;gap:9px;margin:14px 0 26px}
.part{border-radius:16px;background:var(--milk);box-shadow:inset 0 0 0 1.6px var(--line);overflow:hidden}
.part-b{width:100%;display:flex;align-items:center;gap:12px;padding:.72em .9em;text-align:left}
.part-b .sw{width:30px;height:30px;border-radius:10px;flex:none;background:var(--c);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5),0 0 0 1px rgba(43,31,38,.16)}
.part-b .nm{font-size:.86rem;font-weight:650}
.part-b .cl{font-size:.74rem;color:var(--ink-3);margin-left:auto;font-weight:600}
.part-b .cv{transition:rotate .3s var(--e-out);flex:none;color:var(--ink-3)}
.part[open] .part-b .cv{rotate:180deg}
.part-pick{display:none;padding:4px 10px 12px}
.part[open] .part-pick{display:block}
.pick-g{display:grid;grid-template-columns:repeat(12,1fr);gap:5px;margin-top:6px}
@media(max-width:640px){.pick-g{grid-template-columns:repeat(8,1fr)}}
.pick-g button{aspect-ratio:1;border-radius:7px;background:var(--c);transition:.2s var(--e-out);
  box-shadow:inset 0 0 0 1px rgba(43,31,38,.15)}
.pick-g button:hover{transform:scale(1.18);z-index:2;box-shadow:0 0 0 2px var(--berry)}
.pick-g button[aria-pressed="true"]{box-shadow:0 0 0 2.4px var(--berry)}
.pick-gh{font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:700;
  margin-top:12px}

/* shade card */
.shade-g{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(9px,1.4vw,16px)}
@media(max-width:900px){.shade-g{grid-template-columns:repeat(4,1fr)}}
@media(max-width:520px){.shade-g{grid-template-columns:repeat(2,1fr)}}
.shade{border-radius:16px;overflow:hidden;background:var(--milk);box-shadow:var(--sh-1)}
.shade i{display:block;height:64px;background:var(--c)}
.shade div{padding:9px 10px 11px}
.shade b{display:block;font-size:.84rem;font-weight:650;letter-spacing:-.015em}
.shade span{font-size:.66rem;color:var(--ink-3);font-weight:650;letter-spacing:.06em}
.shade-head{display:flex;align-items:baseline;gap:12px;margin:clamp(22px,3vw,34px) 0 14px}
.shade-head h3{font-size:1.15rem}
.shade-head span{font-size:.72rem;color:var(--ink-3);font-weight:600}

/* ==========================================================================
   30 · REVIEWS
   ========================================================================== */
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px)}
@media(max-width:880px){.revs{grid-template-columns:1fr}}
.rev{border-radius:var(--r-xl);padding:clamp(18px,2.4vw,26px);background:var(--c,var(--paper));
  background-image:var(--stitch);display:flex;flex-direction:column;gap:14px;position:relative}
.rev-q{font-family:var(--display);font-size:1.06rem;font-weight:560;line-height:1.34;letter-spacing:-.02em}
.rev-who{display:flex;align-items:center;gap:11px;margin-top:auto}
.rev-who img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none;
  box-shadow:0 0 0 3px var(--milk)}
.rev-who b{display:block;font-size:.84rem;font-weight:700}
.rev-who span{font-size:.72rem;color:var(--ink-3);font-weight:600}
.rev-tag{position:absolute;top:12px;right:12px;font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;
  font-weight:750;color:var(--ink-3);background:var(--milk);padding:.32em .6em;border-radius:999px}
.stars{display:flex;gap:2px;color:var(--berry)}
.stars svg{width:14px;height:14px;fill:currentColor}

/* ==========================================================================
   31 · BASKET EXTRAS — pay, delivery, gift hint
   ========================================================================== */
.pay{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center}
@media(max-width:520px){.pay{grid-template-columns:1fr}}
.qr{background:#fff;border-radius:16px;padding:10px;box-shadow:var(--sh-1);width:150px;height:150px;
  display:grid;place-items:center}
.qr svg{width:100%;height:100%;border-radius:6px}
.upi-id{display:inline-flex;align-items:center;gap:.6em;font-family:var(--display);font-weight:680;
  font-size:1rem;letter-spacing:-.02em;background:var(--milk);padding:.5em .9em;border-radius:999px;
  box-shadow:inset 0 0 0 1.5px var(--line);word-break:break-all}
.eta{display:flex;align-items:center;gap:10px;margin-top:.7em;font-size:.85rem;font-weight:600}
.eta i{width:9px;height:9px;border-radius:50%;background:var(--forest);flex:none}
.hint-row{display:flex;align-items:center;gap:13px;padding:12px 0;border-bottom:1.5px dashed var(--line-2)}
.hint-row figure{margin:0;width:56px;aspect-ratio:1;border-radius:14px;overflow:hidden;background:var(--c);
  padding:4px;background-image:var(--stitch);flex:none}
.hint-row figure img{width:100%;height:100%;object-fit:cover;border-radius:10px}
.hint-row b{font-size:.9rem;font-weight:650;display:block}
.hint-row span{font-size:.76rem;color:var(--ink-3)}

/* ==========================================================================
   32 · PAPER GRAIN + DOODLES
   ========================================================================== */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:500;opacity:.042;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}
.doodle{position:absolute;pointer-events:none;z-index:0;opacity:.5;color:var(--berry)}
.doodle svg{width:100%;height:auto;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}

/* gentle sway on the hanging charms, once, on entry */
@keyframes sway{0%{rotate:-3deg}55%{rotate:2deg}100%{rotate:0deg}}
.charm.in{animation:sway 1.5s var(--e-out) both}
@media (prefers-reduced-motion:reduce){.charm.in{animation:none}}

/* ==========================================================================
   33 · PHONE — the whole thing re-tuned for a small screen
   ========================================================================== */

/* one bar of chrome instead of three */
@media(max-width:760px){
  .ribbon{display:none}
  .drawer{inset:calc(var(--chrome,106px)) 0 0}
  .occ{padding:8px 14px;gap:8px;font-size:.74rem;line-height:1.25}
  .occ b{font-size:.86rem}
  .occ .cd{padding:.2em .6em;font-size:.7rem}
  .occ a{font-size:.74rem}
}
@media(max-width:420px){
  .occ span:not(.cd):not(.dot){display:none}
  .occ .dot{display:none}
}

/* floating tab bar — the thing that makes it feel like an app you'd keep */
.tabbar{
  position:fixed;left:50%;bottom:max(10px,env(safe-area-inset-bottom));translate:-50% 0;z-index:200;
  display:none;align-items:center;gap:2px;padding:6px;border-radius:999px;
  background:rgba(252,250,243,.9);backdrop-filter:blur(16px) saturate(1.6);
  -webkit-backdrop-filter:blur(16px) saturate(1.6);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 10px 30px -10px rgba(70,45,55,.42),
             0 0 0 1.4px rgba(43,31,38,.09);
  transition:translate .45s var(--e-out),opacity .3s;
  max-width:calc(100vw - 20px)
}
.tabbar.down{translate:-50% 160%;opacity:0;pointer-events:none}
.tabbar a,.tabbar button{display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:8px 11px 7px;border-radius:999px;position:relative;transition:.25s var(--e-out);min-width:58px}
.tabbar a svg{width:21px;height:21px;stroke:var(--ink-2);fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .25s}
.tabbar a em{font-style:normal;font-size:.6rem;font-weight:700;letter-spacing:.02em;color:var(--ink-3);
  transition:color .25s}
.tabbar a[aria-current]{background:var(--paper)}
.tabbar a[aria-current] svg{stroke:var(--berry)}
.tabbar a[aria-current] em{color:var(--berry)}
.tabbar a:active{scale:.93}
.tb-badge{position:absolute;top:3px;right:8px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;
  background:var(--berry);color:#fff;font-size:.6rem;font-weight:800;display:grid;place-items:center;
  font-variant-numeric:tabular-nums;box-shadow:0 0 0 2.5px rgba(252,250,243,.95)}
.tb-badge[data-empty="1"]{display:none}
/* product page: the bar becomes the buy button */
.tabbar-buy{padding:7px 7px 7px 18px;gap:12px}
.tabbar-buy .tb-price{font-family:var(--display);font-weight:720;font-size:1.02rem;letter-spacing:-.03em;
  white-space:nowrap}
.tabbar-buy .tb-add{background:var(--berry);color:#fff;border-radius:999px;padding:.78em 1.3em;
  font-size:.86rem;font-weight:700;box-shadow:0 3px 0 var(--berry-deep);white-space:nowrap}
.tabbar-buy .tb-add:active{translate:0 2px;box-shadow:0 1px 0 var(--berry-deep)}
@media(max-width:900px){
  .tabbar{display:flex}
  body{padding-bottom:88px}
}

/* two little things side by side reads better than one big one */
@media(max-width:640px){
  .grid-p{grid-template-columns:1fr 1fr;gap:12px}
  .card-patch{padding:7px;border-radius:20px}
  .card-img{border-radius:14px;aspect-ratio:1/1.1}
  .card-body{padding:11px 3px 0}
  .card-body h3{font-size:.9rem;min-height:2.3em}
  .card-cat{font-size:.6rem}
  .tag{font-size:.78rem;padding:.3em .62em .3em .95em}
  .tag::before{width:5px;height:5px;left:.4em}
  .add{font-size:.68rem;padding:.4em .62em}
  .card-tag{font-size:.55rem;padding:.34em .55em;top:7px;left:7px}
  .dots{gap:4px}.dot{width:9px;height:9px}
}

/* the charms become a string you swipe */
@media(max-width:820px){
  .string{padding-top:30px;margin-inline:calc(var(--gut) * -1);}
  .string::before{left:var(--gut);right:var(--gut)}
  .charms{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
    padding:0 var(--gut) 4px;scrollbar-width:none;-ms-overflow-style:none}
  .charms::-webkit-scrollbar{display:none}
  .charm{flex:0 0 40%;scroll-snap-align:center;min-width:132px}
}
@media(max-width:520px){.charm{flex:0 0 46%}}

/* hero, tightened */
@media(max-width:900px){
  .hero{padding-block:22px 40px}
  .d1{font-size:clamp(2.6rem,11.4vw,3.6rem);line-height:.94}
  .hero .lead{font-size:1rem}
  .quilt{aspect-ratio:1/.9;max-width:none;gap:10px}
  .q-a{border-radius:26px}
  .q-b{padding:12px}
  .q-b .granny{max-width:min(104px,62%)}
  .q-note{left:-4px;bottom:4%;max-width:172px;font-size:.85rem;padding:9px 12px 10px}
  .q-note::before{width:38px;height:12px;left:14px;top:-6px}
  .hero-cta{margin-top:1.6em;gap:9px}
  .hero-cta .btn{flex:1;min-width:150px}
  .yarnrow{margin-top:1.8em;gap:10px}
  .doodle{display:none}
}

/* everything else, breathing room trimmed a touch */
@media(max-width:640px){
  .sec{padding-block:52px}
  .sec-s{padding-block:38px}
  .head{margin-bottom:22px}
  .picks{gap:9px}
  .pick{padding:16px 10px 15px;gap:10px}
  .pick .yb{width:62px}
  .pick b{font-size:.98rem}
  .pick span{font-size:.73rem}
  .split{gap:26px}
  .steps{gap:20px}
  .wall{gap:8px}
  .panel{padding:18px 16px 20px;border-radius:26px}
  .brow{padding:14px 0}
  .gal-thumbs button{width:58px}
  .stage{padding:12px}
  .stage-card{padding:16px;border-radius:20px}
  .motif-row{gap:6px}
  .pick-g{grid-template-columns:repeat(6,1fr);gap:6px}
  .shade i{height:52px}
  .foot-bottom{padding-bottom:20px}
}

/* touch: no hover, so give a press */
@media(hover:none){
  .btn:active{scale:.97}
  .card:active .card-patch{scale:.985}
  .charm:active .charm-o{scale:.96}
  .f:active,.chip:active,.swatch:active,.motif-b:active{scale:.95}
  .card-fav{opacity:1;translate:0}
  .card-img img.alt{display:none}
  .wall-i figcaption{opacity:1;background:linear-gradient(to top,rgba(35,22,28,.55),transparent)}
}

/* mini yarn balls in the hero row */
.balls{gap:7px}
.ball{width:26px;height:26px;background:none;box-shadow:none;overflow:visible}
.ball::after{display:none}
.ball svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 3px 5px rgba(43,31,38,.2))}

/* hero patches settle in on load */
@keyframes settle{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
.quilt>.q-a,.quilt>.q-b,.quilt>.q-c{animation:settle .8s var(--e-out) both}
.quilt>.q-b{animation-delay:.12s}
.quilt>.q-c{animation-delay:.22s}
.q-note{animation:settle .7s .38s var(--e-out) both}
@media (prefers-reduced-motion:reduce){
  .quilt>*,.q-note{animation:none}
}

/* drawer, friendlier on a thumb */
@media(max-width:1060px){
  .drawer a{font-size:1.6rem;padding:.52em 0}
  .drawer a i{width:14px;height:14px}
}

/* ---------- 34 · phone fixes ---------- */
.tabbar a svg{stroke:var(--ink);opacity:.62;stroke-width:1.7}
.tabbar a em{color:var(--ink-2);opacity:.85}
.tabbar a[aria-current]{background:var(--blush)}
.tabbar a[aria-current] svg{stroke:var(--berry-deep);opacity:1}
.tabbar a[aria-current] em{color:var(--berry-deep);opacity:1;font-weight:800}
.tabbar{padding:7px;gap:1px}
.tabbar a,.tabbar button{padding:8px 9px 7px;min-width:56px}

/* charm captions stay on one line so the string reads evenly */
.charm span{display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;
  overflow:hidden;max-width:100%}

/* filters become a swipeable row on a phone */
@media(max-width:760px){
  .toolbar{flex-direction:column;align-items:stretch;gap:12px}
  .filters{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;
    margin-inline:calc(var(--gut) * -1);padding:2px var(--gut);
    scrollbar-width:none;-ms-overflow-style:none}
  .filters::-webkit-scrollbar{display:none}
  .f{flex:0 0 auto;scroll-snap-align:start}
  .toolbar>div:last-child{display:flex;justify-content:space-between;align-items:center}
}

/* the buy bar needs the price to breathe */
@media(max-width:400px){
  .tabbar-buy{padding-left:14px;gap:8px}
  .tabbar-buy .tb-price{font-size:.95rem}
  .tabbar-buy .tb-add{padding:.74em 1.05em;font-size:.82rem}
}
/* the toast sits above the floating bar on a phone */
@media(max-width:900px){ .toast{bottom:calc(88px + max(10px,env(safe-area-inset-bottom)))} }

/* ==========================================================================
   35 · PHONE, ROUND TWO — real-device fixes
   ========================================================================== */

/* the burger was laid out on a grid, so the rows were never the height the
   close-cross assumed. Flex with a fixed gap makes the geometry exact. */
.burger{display:none;flex-direction:column;align-items:center;justify-content:center;gap:4.4px}
.burger span{width:17px;height:1.8px;margin:0}
.nav.open .burger span:nth-child(1){transform:translateY(6.2px) rotate(45deg)}
.nav.open .burger span:nth-child(3){transform:translateY(-6.2px) rotate(-45deg)}
@media(max-width:1060px){.burger{display:flex}}

/* drawer: never under the header, and nicer to use */
.drawer{padding-top:8px;background:var(--milk);background-image:var(--stitch)}
.drawer-in{display:flex;flex-direction:column;min-height:100%}
.drawer a{gap:16px;padding:.46em 0;align-items:center}
.drawer a i{width:18px;height:18px;border-radius:6px;
  box-shadow:inset 0 0 0 1.6px rgba(255,255,255,.7),0 0 0 1px rgba(43,31,38,.12)}
.drawer a::after{content:"";margin-left:auto;width:7px;height:7px;border-right:2px solid var(--ink-3);
  border-bottom:2px solid var(--ink-3);rotate:-45deg;opacity:.5;flex:none}
.drawer a:active{color:var(--berry)}
.drawer-foot{margin-top:auto;padding-top:26px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.drawer-foot .yb-mini{width:52px;height:52px;flex:none}
.drawer-foot .yb-mini svg{width:100%;height:100%;overflow:visible}

/* the hero photos come first on a phone, not after a wall of words */
@media(max-width:900px){
  .hero-grid{display:flex;flex-direction:column;gap:0}
  .hero-copy{display:contents}
  .hero-copy .h-label{order:1}
  .hero-copy .h-title{order:2}
  .hero-copy .h-squig{order:3;margin-bottom:20px}
  .quilt{order:4;margin-bottom:24px}
  .hero-copy .h-lead{order:5}
  .hero-copy .h-cta{order:6}
  .hero-copy .h-yarn{order:7}
  .quilt{aspect-ratio:1/.78}
  .q-note{bottom:6%}
}

/* basket: one column, and rows that fit a thumb */
@media(max-width:880px){
  #bLayout{grid-template-columns:1fr!important;gap:24px!important}
  #bSide{position:static!important}
  .brow{grid-template-columns:66px 1fr;column-gap:14px;row-gap:10px;align-items:start}
  .brow figure{width:66px}
  .brow>div:nth-child(2) h3{font-size:.98rem;line-height:1.2}
  .brow>div:last-child{grid-column:2/-1;display:flex;justify-content:space-between;align-items:center;
    width:100%;margin-top:2px}
}

/* studio on a phone: the stage shouldn't eat the whole screen */
@media(max-width:640px){
  .stage-card{aspect-ratio:1/.86}
  .stage-card svg{max-width:230px}
  .motif-row{grid-template-columns:repeat(3,1fr)}
  .motif-b span{font-size:.58rem}
}

/* gentle page-to-page fade */
@keyframes pgin{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
.pg:not([hidden]){animation:pgin .4s var(--e-out) both}
@media (prefers-reduced-motion:reduce){.pg:not([hidden]){animation:none}}

/* a slot where a drawn graphic can be swapped for a real photo */
.slot-img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
.q-b.has-photo{padding:0;overflow:hidden}
.q-b.has-photo .slot-img{border-radius:var(--r-l)}
.pick .yb.has-photo{border-radius:50%;overflow:hidden;box-shadow:0 6px 14px -8px rgba(43,31,38,.45)}
.pick .yb.has-photo .slot-img{border-radius:50%}
.tdot.has-photo{overflow:hidden;padding:0;box-shadow:inset 0 0 0 1.6px var(--line)}
.tdot.has-photo .slot-img{border-radius:50%}
.brand.has-photo svg{display:none}
.brand .slot-img{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:none}
.motif-b .slot-img,.stage-card .slot-img{border-radius:14px}
.stage-card.has-photo{padding:10px}
.stage-card.has-photo .slot-img{border-radius:16px;aspect-ratio:1;object-fit:cover}
/* the floating bar steps aside while the menu is open */
body.menu-open .tabbar{translate:-50% 160%;opacity:0;pointer-events:none}
.drawer-in{padding-bottom:24px}
/* a small back-to-top, tucked in the footer */
.totop{display:inline-flex;align-items:center;gap:.5em;font-size:.78rem;font-weight:650;
  color:rgba(239,217,208,.72);transition:color .25s}
.totop:hover{color:#fff}
.totop svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 36 · last polish ---------- */
/* swipeable rows fade at the edge so it reads as "there is more" */
@media(max-width:820px){
  .string{-webkit-mask:linear-gradient(90deg,transparent 0,#000 22px,#000 calc(100% - 26px),transparent 100%);
          mask:linear-gradient(90deg,transparent 0,#000 22px,#000 calc(100% - 26px),transparent 100%)}
}
@media(max-width:760px){
  .filters{-webkit-mask:linear-gradient(90deg,#000 calc(100% - 30px),transparent 100%);
           mask:linear-gradient(90deg,#000 calc(100% - 30px),transparent 100%)}
}
/* a tiny nudge the first time the charm string appears */
@keyframes nudge{0%,72%,100%{translate:0 0}80%{translate:-16px 0}88%{translate:0 0}}
@media(max-width:820px){
  .charms.nudge{animation:nudge 2.4s .6s var(--e-out) 1}
}
@media (prefers-reduced-motion:reduce){.charms.nudge{animation:none}}

.occ .oic{width:15px;height:15px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.drawer-foot .yb-mini{--c:#A62449}
.drawer-foot .yb-mini svg{filter:drop-shadow(0 4px 8px rgba(43,31,38,.22))}
.drawer-foot a::after{display:none}
.drawer-foot a{gap:0;padding:0;border:0}
.drawer-foot .link{border-bottom:1.6px solid currentColor;display:inline-flex}

/* ==========================================================================
   37 · PHONE, ROUND THREE
   The whole hero has to land in one screenful on any handset, the header
   controls belong on the right, and every picture is a size down.
   ========================================================================== */

/* --- header: menu and basket sit at the right edge --- */
@media(max-width:1060px){.nav-act{margin-left:auto}}
.basket-btn{gap:.45em;padding:.55em .95em}
.bk-ic{width:19px;height:19px;flex:none;display:none}
@media(max-width:1060px){
  .basket-btn{padding:0;width:42px;height:42px;justify-content:center;position:relative;
    box-shadow:inset 0 0 0 1.5px var(--line);border-radius:50%}
  .bk-ic{display:block}
  .bk-label{display:none}
  .basket-btn .basket-count{position:absolute;top:-3px;right:-3px;min-width:19px;height:19px;
    font-size:.63rem;box-shadow:0 0 0 2.5px var(--milk)}
  .basket-btn .basket-count[data-empty="1"]{display:none}
}

/* --- the hero, sized to the screen instead of to its contents --- */
@media(max-width:900px){
  .hero{padding-block:8px 18px}
  .hero-grid{gap:0}
  .d1{font-size:clamp(2rem,9.2vw,2.95rem);line-height:.95}
  .hero-copy .h-label{margin-bottom:2px}
  .hero h1{margin:.16em 0 0}
  .hero-copy .h-squig{margin-bottom:12px}
  .squig{height:13px;width:min(300px,68%)}

  .quilt{aspect-ratio:auto;height:clamp(158px,25vh,236px);height:clamp(158px,25dvh,236px);
    grid-template-rows:1fr 1fr;margin-bottom:14px;gap:8px}
  .q-a{border-radius:20px}
  .q-b{padding:9px;border-radius:16px}
  .q-b .granny{max-width:min(78px,58%)}
  .q-c{border-radius:16px}
  .q-note{left:-3px;bottom:5%;max-width:150px;font-size:.76rem;padding:7px 10px 8px;line-height:1.3}
  .q-note::before{width:32px;height:10px;left:12px;top:-5px}

  .hero .lead{font-size:.93rem;line-height:1.48;margin-top:.85em}
  .hero-cta{margin-top:1em;gap:8px}
  .hero-cta .btn{flex:1;min-width:0;padding:.82em 1em;font-size:.86rem}
  .yarnrow{margin-top:1em;gap:9px}
  .yarnrow p{font-size:.74rem;line-height:1.35}
  .ball{width:23px;height:23px}
  .balls{gap:6px}
}
/* very short handsets: trim a little more */
@media(max-width:900px) and (max-height:680px){
  .d1{font-size:clamp(1.85rem,8.4vw,2.5rem)}
  .quilt{height:clamp(140px,22dvh,190px)}
  .hero .lead{font-size:.88rem;margin-top:.7em}
  .q-note{font-size:.7rem;max-width:132px}
}

/* --- a slimmer floating bar --- */
@media(max-width:900px){
  .tabbar{padding:5px;gap:0;bottom:max(8px,env(safe-area-inset-bottom))}
  .tabbar a,.tabbar button{padding:6px 8px 5px;min-width:52px;gap:2px;border-radius:999px}
  .tabbar a svg{width:19px;height:19px}
  .tabbar a em{font-size:.55rem;letter-spacing:.01em}
  .tb-badge{top:1px;right:6px;min-width:15px;height:15px;font-size:.55rem;box-shadow:0 0 0 2px rgba(252,250,243,.95)}
  .tabbar-buy{padding:5px 5px 5px 15px;gap:10px}
  .tabbar-buy .tb-add{padding:.68em 1.1em;font-size:.82rem}
  body{padding-bottom:78px}
  .toast{bottom:calc(76px + max(8px,env(safe-area-inset-bottom)))}
}

/* --- every picture, one size down on a phone --- */
@media(max-width:640px){
  .card-img{aspect-ratio:1/1.02}
  .gal-main{aspect-ratio:1/1;padding:9px}
  .gal-thumbs button{width:52px}
  .bed-media{aspect-ratio:4/3;padding:8px;border-radius:22px}
  .frame{aspect-ratio:4/3!important;padding:8px}
  .two .frame{aspect-ratio:1/1!important}
  .two .frame[style*="margin-top"]{margin-top:0!important}
  .step figure{aspect-ratio:16/10;padding:7px}
  .gifts{grid-template-columns:1fr 1fr}
  .gift{padding:7px;border-radius:22px}
  .gift figure{aspect-ratio:1/1;border-radius:16px}
  .gift-b{padding:11px 8px 9px}
  .gift-b h3{font-size:.98rem}
  .gift-b p{font-size:.76rem}
  .wall{grid-template-columns:repeat(3,1fr);gap:7px}
  .wall-i{border-radius:12px}
  .charm{flex:0 0 38%;min-width:118px}
  .brow figure{width:58px}
  .brow{grid-template-columns:58px 1fr}
  .stage-card{aspect-ratio:1/.8}
  .stage-card svg{max-width:200px}
}
@media(max-width:400px){
  .charm{flex:0 0 42%}
  .gifts{gap:10px}
}

/* --- 37b · the hero's rhythm scales with the height of the screen --- */
@media(max-width:900px){
  .hero{padding-block:clamp(4px,0.9dvh,10px) clamp(12px,2.2dvh,22px)}
  .d1{font-size:clamp(1.72rem,8.5vw,2.95rem);line-height:.96}
  .hero h1{margin:clamp(2px,0.5dvh,7px) 0 0}
  .hero-copy .h-label{margin-bottom:0}
  .hero-copy .h-squig{margin-bottom:clamp(5px,1.3dvh,13px)}
  .squig{height:clamp(9px,1.6dvh,14px)}

  .quilt{height:clamp(116px,23.5dvh,236px);margin-bottom:clamp(8px,1.6dvh,16px)}

  .hero .lead{font-size:clamp(.82rem,2.45vw,.95rem);line-height:1.45;
    margin-top:clamp(5px,1.2dvh,13px)}
  .hero-cta{margin-top:clamp(7px,1.5dvh,16px);gap:8px}
  .hero-cta .btn{padding:clamp(.62em,1.5dvh,.84em) 1em;font-size:clamp(.8rem,2.3vw,.88rem)}
  .yarnrow{margin-top:clamp(7px,1.4dvh,15px);gap:8px;flex-wrap:nowrap;align-items:center}
  .yarnrow p{font-size:clamp(.66rem,2vw,.76rem);line-height:1.3;flex:1;min-width:0}
  .ball{width:clamp(19px,3.4dvh,25px);height:clamp(19px,3.4dvh,25px)}
  .balls{gap:5px;flex:none}
  .q-note{max-width:clamp(120px,38vw,168px);font-size:clamp(.68rem,2vw,.82rem)}
}
/* extreme-short viewports (small phone + big browser chrome) */
@media(max-width:900px) and (max-height:565px){
  .occ{padding-block:5px;font-size:.7rem}
  .occ b{font-size:.8rem}
  .nav-row{height:56px}
  .brand{font-size:1.05rem}.brand svg{width:31px;height:31px}
  .basket-btn,.burger{width:38px;height:38px}
  .quilt{height:clamp(96px,19dvh,140px)}
  .hero .lead{font-size:.79rem;line-height:1.4}
}
.tabbar a em{white-space:nowrap}
@media(max-width:900px){
  .tabbar a,.tabbar button{min-width:0;padding:6px 10px 5px}
  .tabbar{max-width:calc(100vw - 16px)}
}
@media(max-width:360px){.tabbar a em{font-size:.52rem}.tabbar a,.tabbar button{padding:6px 7px 5px}}

/* ==========================================================================
   38 · HERO, FIXED
   The desktop grid centres its two columns. When the phone layout turns that
   grid into a column, that same rule was centring every line instead — which
   is why the label, the headline, the squiggle and the buttons all sat in the
   middle while the paragraph stayed left. Everything hangs off the left edge.
   ========================================================================== */
@media(max-width:900px){
  .hero-grid{align-items:stretch;text-align:left}
  .hero-copy .h-label{align-self:flex-start}
  .hero h1,.hero .lead{width:100%;max-width:none}
  .squig{margin-left:0;margin-right:auto}
  .hero-cta{justify-content:flex-start}
  .hero-cta .btn{flex:1 1 0;min-width:0}
  .yarnrow{justify-content:flex-start}

  /* the bar is out of the way in the hero, so the pictures get more room */
  .quilt{height:clamp(150px,28dvh,262px)}
}
@media(max-width:900px) and (max-height:680px){
  .quilt{height:clamp(132px,24dvh,200px)}
}
@media(max-width:900px) and (max-height:565px){
  .quilt{height:clamp(104px,20dvh,150px)}
}

/* the floating bar stays out of the opening screen */
.tabbar.at-hero{translate:-50% 190%;opacity:0;pointer-events:none}

/* --- 38b · hero, final trim --- */
@media(max-width:900px){
  .hero{padding-block:clamp(10px,1.8dvh,18px) clamp(12px,2.2dvh,22px)}
  .squig{width:min(340px,82%);margin-top:.06em}
  .hero-copy .h-squig{margin-bottom:clamp(10px,2dvh,18px)}
  .hero .lead{margin-top:clamp(9px,1.8dvh,16px);max-width:none}
  .hero-cta{margin-top:clamp(11px,2dvh,18px)}
  .yarnrow{margin-top:clamp(10px,1.8dvh,16px)}
  .q-note{bottom:6%;left:-2px}
}

/* ==========================================================================
   39 · THE HERO OWNS THE OPENING SCREEN
   The pictures are given whatever height is left after the words, measured
   in the browser (see heroFit in app.js), so the hero is exactly one
   screenful and "Six little collections" starts at the fold. The values
   below are the fallback for the moment before that measurement lands.
   ========================================================================== */
@media(max-width:900px){
  .hero{padding-block:clamp(10px,1.8dvh,18px) clamp(14px,2.6dvh,26px)}
  .quilt{height:clamp(168px,30dvh,300px)}
  .q-a,.q-b,.q-c{min-height:0}
}
@media(max-width:900px) and (max-height:680px){ .quilt{height:clamp(140px,25dvh,210px)} }
@media(max-width:900px) and (max-height:565px){ .quilt{height:clamp(108px,20dvh,160px)} }

/* ==========================================================================
   40 · NO COUNTDOWN ON A PHONE
   The occasion bar wrapped onto two lines on narrow screens and ate the
   hero's budget. It stays on tablets and desktops, where there is room.
   ========================================================================== */
@media(max-width:900px){ .occ{display:none!important} }

/* ==========================================================================
   41 · MOTION
   Six small pieces of motion, each tied to something real: the headline
   arriving, a photograph loading, how far down the page you are, and the
   fact that charms on a string actually swing.
   ========================================================================== */

/* --- the headline rises a word at a time --- */
.hero h1 .wd{display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-bottom:.14em;margin-bottom:-.14em}
.hero h1 .wd i{display:inline-block;font-style:inherit;translate:0 105%;
  animation:wordUp .85s var(--e-out) both}
@keyframes wordUp{to{translate:0 0}}

/* --- photographs arrive instead of appearing --- */
html.js .card-img img,html.js .gal-main img,html.js .bed-media img,html.js .charm-o img,
html.js .wall-i img,html.js .gift figure img,html.js .frame img,html.js .step figure img,
html.js .q-a img,html.js .q-c img,html.js .brow figure img{
  opacity:0;scale:1.04;transition:opacity .7s var(--e-out),scale 1.1s var(--e-out)}
html.js img.ph-in{opacity:1;scale:1}

/* --- how far down the page you are --- */
.prog{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;overflow:hidden}
.prog i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--berry),var(--marigold,#E8A33B));
  transform-origin:0 50%;transform:scaleX(0);transition:transform .12s linear;border-radius:0 2px 2px 0}
@media(min-width:901px){.prog{display:none}}

/* --- charms hang, so they swing --- */
@keyframes hang{0%,100%{rotate:-1.1deg}50%{rotate:1.1deg}}
.charm{animation:hang 6s ease-in-out infinite;transform-origin:50% -18px}
.charm:nth-child(2){animation-duration:6.8s;animation-delay:-1.2s}
.charm:nth-child(3){animation-duration:5.6s;animation-delay:-2.4s}
.charm:nth-child(4){animation-duration:7.2s;animation-delay:-.6s}
.charm:nth-child(5){animation-duration:6.2s;animation-delay:-3.1s}
.charm:nth-child(6){animation-duration:5.9s;animation-delay:-1.8s}
.charm:hover{animation-play-state:paused}

/* --- the swatch chip on a section label pops in --- */
.rv .swatch-label::before,.swatch-label.rv::before{animation:chipIn .5s .1s var(--e-out) both}
@keyframes chipIn{from{scale:.4;rotate:-18deg}to{scale:1;rotate:0deg}}

/* --- a button you press --- */
.btn-p::before{content:"";position:absolute;inset:0;border-radius:inherit;background:#fff;
  opacity:0;transition:opacity .35s}
.btn-p:active::before{opacity:.14;transition:none}

/* --- respect the setting --- */
@media (prefers-reduced-motion:reduce){
  .hero h1 .wd i{animation:none;translate:0 0}
  .charm{animation:none}
  html.js .card-img img,html.js .gal-main img,html.js .bed-media img,html.js .charm-o img,
  html.js .wall-i img,html.js .gift figure img,html.js .frame img,html.js .step figure img,
  html.js .q-a img,html.js .q-c img,html.js .brow figure img{opacity:1;scale:1;transition:none}
  .rv .swatch-label::before,.swatch-label.rv::before{animation:none}
  .prog i{transition:none}
}

/* ==========================================================================
   42 · BUG FIXES
   ========================================================================== */

/* 1. The filter row would not shrink inside the column toolbar, so it sat
      598px wide on a 390px screen and the whole shop page scrolled sideways. */
.filters{min-width:0;max-width:100%}
@media(max-width:760px){ .toolbar>div:last-child{min-width:0} }
html{overflow-x:clip}

/* 2. The standalone `translate` property is not understood by older phone
      browsers, so anything centred with it landed off to one side — the
      "added to your basket" note in particular. Use transform, which every
      browser has. */
.toast{translate:none;transform:translate(-50%,130%)}
.toast.show{translate:none;transform:translate(-50%,0)}
.tabbar{translate:none;transform:translate(-50%,0)}
.tabbar.down{translate:none;transform:translate(-50%,160%)}
.tabbar.at-hero{translate:none;transform:translate(-50%,190%)}
body.menu-open .tabbar{translate:none;transform:translate(-50%,160%)}
.hero h1 .wd i{translate:none;transform:translateY(105%);animation-name:wordUpT}
@keyframes wordUpT{to{transform:translateY(0)}}
.rv{translate:none;transform:translateY(18px)}
.rv.in{transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{transform:none}
  .hero h1 .wd i{transform:none;animation:none}
}

/* 3. A finger cannot hover, but a phone browser keeps the last :hover state
      stuck on whatever you tapped. Neutralise them on touch. */
@media(hover:none){
  .add:hover{background:transparent;color:var(--berry);box-shadow:inset 0 0 0 1.4px var(--line)}
  .add.done{background:var(--forest);color:#fff;box-shadow:inset 0 0 0 1.4px var(--forest)}
  .f:hover{box-shadow:inset 0 0 0 1.5px var(--line);color:var(--ink)}
  .f[aria-pressed="true"]{background:var(--ink);color:var(--milk);box-shadow:inset 0 0 0 1.5px var(--ink)}
  .btn-g:hover{background:transparent;color:var(--ink);transform:none}
  .btn-p:hover{transform:none;box-shadow:0 3px 0 var(--berry-deep)}
  .btn-cream:hover{transform:none}
  .btn:hover::after{border-color:transparent}
  .btn:hover svg{transform:none}
  .gift:hover{transform:none;box-shadow:none}
  .gift:hover figure img{scale:1}
  .card:hover .card-patch{transform:none;box-shadow:var(--sh-1)}
  .card:hover .card-img img{scale:1}
  .charm:hover .charm-o{box-shadow:0 0 0 5px var(--milk),0 0 0 6.5px var(--line),var(--sh-2)}
  .charm:hover .charm-o img{scale:1}
  .bed:hover .bed-media{rotate:var(--rot,-.8deg)}
  .motif-b:hover{transform:none;box-shadow:inset 0 0 0 1.6px var(--line)}
  .motif-b[aria-pressed="true"]{box-shadow:inset 0 0 0 2.4px var(--berry);background:#fff}
  .pick:hover{background:rgba(255,255,255,.34);transform:none;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6)}
  .pick:hover .yb svg{rotate:0deg}
  .pick[aria-pressed="true"]{background:#fff;box-shadow:var(--sh-2)}
  .pick[aria-pressed="true"] .yb svg{rotate:-12deg}
  .pick-g button:hover{transform:none;box-shadow:inset 0 0 0 1px rgba(43,31,38,.15)}
  .pick-g button[aria-pressed="true"]{box-shadow:0 0 0 2.4px var(--berry)}
  .basket-btn:hover{box-shadow:inset 0 0 0 1.5px var(--line);color:inherit}
  .nav-links a:hover{background:transparent;color:var(--ink-2)}
  .wall-i:hover{transform:none;rotate:var(--rot,0deg)}
  .link:hover{gap:.4em}
}

/* 4. The skip link sat 9999px off-screen, which some browsers count as page
      width. Hide it the modern way instead. */
.skip{left:0;clip-path:inset(50%);white-space:nowrap}
.skip:focus{clip-path:none}

/* ==========================================================================
   43 · A HEAVIER VISUAL LAYER
   Motifs that repeat the way a hand-made thing repeats: a drawn motif behind
   the hero, a squiggle that draws itself under every section heading, a
   stitched divider, and a coloured stitch that flies to the basket.
   ========================================================================== */

/* --- the motif behind the hero --- */
.hero{position:relative;isolation:isolate}
.hero>.wrap{position:relative;z-index:1}
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero-bg svg{position:absolute;width:min(78vw,540px);height:auto;
  top:-7%;right:-20%;opacity:.075;color:var(--forest);
  animation:turn 90s linear infinite}
.hero-bg .b2{top:auto;bottom:-16%;right:auto;left:-24%;width:min(52vw,340px);
  color:var(--berry);opacity:.06;animation-duration:120s;animation-direction:reverse}
@keyframes turn{to{transform:rotate(360deg)}}
@media(max-width:900px){
  .hero-bg svg{width:min(96vw,460px);top:-4%;right:-30%;opacity:.06}
  .hero-bg .b2{display:none}
}

/* --- every section heading gets a drawn underline --- */
.uline{display:block;width:min(280px,62%);height:12px;margin-top:.32em;color:var(--berry);
  opacity:.85;overflow:visible}
.uline path{fill:none;stroke:currentColor;stroke-width:4.5;stroke-linecap:round;
  stroke-dasharray:var(--l,400);stroke-dashoffset:var(--l,400)}
.uline.drawn path{animation:drawLine 1s var(--e-out) forwards}
@keyframes drawLine{to{stroke-dashoffset:0}}
.blanket-dark .uline{color:#F8E2A8;opacity:.9}
@media(max-width:640px){.uline{width:min(210px,68%);height:10px}.uline path{stroke-width:5}}

/* --- a stitched divider with a small motif --- */
.stitchrow{display:flex;align-items:center;gap:16px;margin-block:clamp(26px,4vw,48px)}
.stitchrow::before,.stitchrow::after{content:"";flex:1;height:2px;
  background:repeating-linear-gradient(90deg,var(--line) 0 8px,transparent 8px 15px)}
.stitchrow svg{width:26px;height:26px;flex:none;opacity:.6;color:var(--berry)}

/* --- the stitch that flies to the basket --- */
.fly{position:fixed;z-index:500;width:16px;height:16px;border-radius:50%;pointer-events:none;
  box-shadow:inset -3px -4px 7px rgba(43,31,38,.28),0 3px 8px -3px rgba(43,31,38,.5)}
.basket-btn.pop{animation:pop .45s var(--e-out)}
.tabbar a.pop{animation:pop .45s var(--e-out)}
@keyframes pop{40%{transform:scale(1.18)}100%{transform:scale(1)}}

/* --- the studio preview changes over instead of snapping --- */
#stagePreview.swap{animation:swapIn .5s var(--e-out)}
@keyframes swapIn{from{opacity:0;transform:scale(.92) rotate(-4deg)}to{opacity:1;transform:none}}

/* --- richer surfaces --- */
.blanket::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 0,transparent 55%,rgba(43,31,38,.05) 100%)}
.card-patch{box-shadow:0 1px 0 rgba(255,255,255,.55) inset,var(--sh-1)}
.card:hover .card-patch{box-shadow:0 1px 0 rgba(255,255,255,.6) inset,var(--sh-2)}

@media (prefers-reduced-motion:reduce){
  .hero-bg svg{animation:none}
  .uline path{stroke-dashoffset:0;animation:none}
  .basket-btn.pop,.tabbar a.pop,#stagePreview.swap{animation:none}
}

/* --- 43b · small corrections --- */
.charm b{display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;
  overflow:hidden;max-width:100%}
/* keep the new surface shading strictly behind the words */
.blanket::after{z-index:0}
.blanket>.wrap,.blanket-dark>.wrap{position:relative;z-index:1}
.trim{z-index:3}

/* ==========================================================================
   44 · THE MARQUEE
   One strip at the top, running right to left forever. The track holds the
   same set of phrases twice and slides exactly half its width, so the loop
   has no seam. It runs on phones and on desktops alike.
   ========================================================================== */
.occ{display:none!important}          /* the countdown bar is retired */

.ribbon{background:var(--butter);background-image:var(--stitch);overflow:hidden;
  padding:0;display:block;position:relative;
  box-shadow:inset 0 -1.5px 0 rgba(92,69,25,.16)}
.ribbon-track{display:flex;width:max-content;animation:marq 38s linear infinite;
  will-change:transform}
.ribbon:hover .ribbon-track{animation-play-state:paused}
.ribbon-set{display:flex;align-items:center;flex:none}
.ribbon-set span{display:inline-flex;align-items:center;gap:15px;padding-inline:17px;
  white-space:nowrap;font-size:.72rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:#6B5119;line-height:1;padding-block:11px}
.ribbon-set svg{width:12px;height:12px;flex:none;opacity:.55;color:#A87F24}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:900px){
  .ribbon{display:block}
  .ribbon-set span{font-size:.66rem;letter-spacing:.09em;gap:12px;padding-inline:14px;padding-block:9px}
  .ribbon-set svg{width:10px;height:10px}
  .ribbon-track{animation-duration:30s}
}
@media (prefers-reduced-motion:reduce){ .ribbon-track{animation:none} }

/* ==========================================================================
   45 · THE COLLECTION STRING, PROPERLY MADE
   Each collection hangs off the thread on its own little knot. Titles wrap
   instead of being cut in half, and the note underneath is trimmed to two
   tidy lines rather than a word ending in "fully…".
   ========================================================================== */
.string{padding-top:44px}
.string::before{top:20px;height:2.5px;
  background:repeating-linear-gradient(90deg,rgba(63,90,58,.6) 0 11px,transparent 11px 19px)}
.charm{transform-origin:50% -26px}
.charm::before{width:2.5px;height:26px;margin-top:-26px;background:rgba(63,90,58,.6)}
.charm .knot{position:absolute;top:-31px;left:50%;transform:translateX(-50%);
  width:11px;height:11px;border-radius:50%;background:var(--c,var(--berry));
  box-shadow:0 0 0 2.5px var(--milk),inset -2px -2px 4px rgba(43,31,38,.28);z-index:2}
.charm b{display:block;-webkit-line-clamp:2;line-clamp:2;font-size:.95rem;line-height:1.15;
  margin-top:13px;text-wrap:balance}
.charm span{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;font-size:.7rem;line-height:1.35;margin-top:3px}
.charm-o{box-shadow:0 0 0 5px var(--milk),0 0 0 6.5px rgba(43,31,38,.1),0 12px 24px -14px rgba(70,45,55,.55)}
.charm:hover .charm-o,.charm:focus-visible .charm-o{
  box-shadow:0 0 0 5px var(--milk),0 0 0 6.5px var(--berry),0 16px 30px -14px rgba(70,45,55,.6)}
@media(max-width:820px){
  .string{padding-top:40px}
  .charms{gap:18px;padding-bottom:6px}
  .charm{flex:0 0 44%;min-width:136px}
}
@media(max-width:400px){ .charm{flex:0 0 50%} }

/* a stitched divider, used where two sections meet without a colour change */
.stitchrow{margin-block:clamp(22px,3.4vw,40px)}
/* the old static ribbon rules were still hiding most phrases on small screens
   and adding a second set of dots — retire them */
.ribbon-set span::after{content:none;display:none}
@media(max-width:640px){ .ribbon-set span:nth-child(n+3){display:inline-flex} }

/* --- 45b · the hanging thread has to live INSIDE the scroller, or the
       horizontal overflow clips it away --- */
.string{padding-top:0}
.string::before{top:10px}
.charms{padding-top:36px}
.charm::before{position:absolute;top:-26px;left:50%;transform:translateX(-50%);
  width:2.5px;height:26px;margin:0;border-radius:2px}
.charm .knot{top:-32px}
@media(max-width:820px){
  .charms{padding-top:36px;padding-inline:var(--gut)}
  .string{margin-inline:calc(var(--gut) * -1)}
}

/* ==========================================================================
   46 · BIG SCREENS GET A BIGGER SITE
   The layout was pinned to 1240px and 16px no matter how large the display
   was, so on a 1920px monitor everything sat small in the middle. The
   container and the root type size now step up with the screen — the same
   effect as zooming the browser, but automatic and on every desktop.
   ========================================================================== */
:root{
  --wrap:77.5rem;                                  /* 1240px at 16px root */
  --gut:clamp(1.125rem,4.6vw,3.25rem);             /* 18px … 52px */
}
html{font-size:16px}
@media(min-width:1400px){ html{font-size:16.6px} }
@media(min-width:1600px){ html{font-size:17.2px} }
@media(min-width:1800px){ html{font-size:17.6px} }
@media(min-width:2200px){ html{font-size:18.6px} }
body{font-size:1.03rem}

/* the wide container tracks it too */
.wide{max-width:97.5rem}

/* on a big monitor the hero deserves more of the width */
@media(min-width:1650px){
  .hero{padding-block:clamp(30px,4vw,72px) clamp(48px,7vw,104px)}
  .hero-grid{gap:clamp(34px,5vw,76px)}
}

/* ==========================================================================
   47 · DESKTOP TOUCHES
   ========================================================================== */
/* the hero photographs drift a few pixels with the cursor */
@media(pointer:fine){
  .q-a,.q-b,.q-c{transition:transform .45s cubic-bezier(.16,1,.3,1)}
}
/* a stitched underline runs under a nav link on hover */
.nav-links a{overflow:hidden}
.nav-links a::before{content:"";position:absolute;left:.82em;right:.82em;bottom:.3em;height:2px;
  border-radius:2px;background:repeating-linear-gradient(90deg,var(--berry) 0 4px,transparent 4px 8px);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .38s var(--e-out)}
@media(hover:hover){ .nav-links a:hover::before{transform:scaleX(1)} }
.nav-links a[aria-current]::before{display:none}
@media (prefers-reduced-motion:reduce){
  .nav-links a::before{transition:none}
  .q-a,.q-b,.q-c{transition:none}
}