/* Kara Katz: the embroidery layer.
   Linen, hoops, floss, a cross-stitch sampler and one magenta thread that sews the home page together.
   Loaded after kara.css and overrides its plainer pieces. */
:root{
  --thread:#d6337d;            /* the running thread: reads on linen and on ink */
  --linen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45  0 0 0 0 .36  0 0 0 0 .3  0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3Cg stroke='%238a6a52' stroke-opacity='.05'%3E%3Cpath d='M0 .5h260M0 3.5h260M0 6.5h260' /%3E%3C/g%3E%3C/svg%3E");
  --weave:repeating-linear-gradient(0deg,rgba(120,90,70,.035) 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,rgba(120,90,70,.035) 0 1px,transparent 1px 4px);
  --linen-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
  --wood:conic-gradient(from 210deg,#7a5410,#c99a45,#e6c37a,#b8862a,#8a6216,#d9ad5c,#a77822,#7a5410);
}
body{background-color:var(--paper);background-image:var(--linen),var(--weave)}
.dark,.site-foot,.mnav{background-image:var(--linen-dark),var(--kilim-faint)}
.blush{background:var(--linen),linear-gradient(180deg,var(--blush-2),var(--blush))}
.paper2{background:var(--linen),var(--paper-2)}
main{position:relative}

/* buttons get an inner running stitch */
.btn{position:relative}
.btn::after{content:"";position:absolute;inset:4px;border-radius:inherit;border:1.5px dashed rgba(255,255,255,.55);pointer-events:none;opacity:.9}
.btn.line::after,.btn.gold::after{border-color:rgba(27,35,48,.35)}
.btn.light::after{border-color:rgba(255,255,255,.35)}
.btn.sm::after{inset:3px}

/* stitched underline for emphasized words */
.h1 em,.h2 em{background:linear-gradient(90deg,currentColor 0 60%,transparent 60% 100%) left calc(100% - .02em)/14px 3px repeat-x;padding-bottom:.06em}
.dark .h2 em{background-image:linear-gradient(90deg,var(--pink) 0 60%,transparent 60% 100%)}

/* ---------- the hoop: a real embroidery hoop as a photo frame ---------- */
.hoopf{position:relative;aspect-ratio:1;border-radius:50%;padding:clamp(12px,1.9vw,20px);background:var(--wood);box-shadow:0 34px 60px -28px rgba(27,35,48,.55),inset 0 0 0 2px rgba(255,255,255,.25)}
.hoopf::before{content:"";position:absolute;inset:clamp(6px,1vw,10px);border-radius:50%;box-shadow:inset 0 0 0 2px rgba(122,84,16,.55),inset 0 3px 0 rgba(255,255,255,.35);pointer-events:none}
.hoopf .cloth{position:relative;width:100%;height:100%;border-radius:50%;overflow:hidden;background:var(--paper);box-shadow:inset 0 6px 18px rgba(0,0,0,.25)}
.hoopf .cloth img{width:100%;height:100%;object-fit:cover}
.hoopf .cloth::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 6px rgba(251,247,242,.0),inset 0 0 40px rgba(27,35,48,.25);pointer-events:none}
.hoopf .clamp{position:absolute;top:-5%;left:50%;width:15%;height:11%;transform:translateX(-50%);z-index:2}
.hoopf .clamp::before{content:"";position:absolute;left:0;right:0;bottom:0;height:62%;border-radius:6px 6px 3px 3px;background:linear-gradient(180deg,#e9c77f,#a77822);box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.hoopf .clamp::after{content:"";position:absolute;left:50%;top:0;width:44%;height:52%;transform:translateX(-50%);border-radius:50% 50% 30% 30%;background:radial-gradient(circle at 40% 35%,#f6dfa8,#b8862a 60%,#7a5410)}
.hoopf .tail{position:absolute;left:50%;top:-4%;width:46%;height:60%;overflow:visible;pointer-events:none}
.hoopf .tail path{fill:none;stroke:var(--thread);stroke-width:2.4;stroke-linecap:round}

/* ---------- home hero ---------- */
.hero2{position:relative;overflow:hidden;padding-block:clamp(36px,5vw,64px) clamp(70px,8vw,110px)}
.hero2 .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,60px);align-items:center}
.hero2 .creds-line{font:700 13px/1.4 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin-bottom:22px;display:flex;align-items:center;gap:12px}
.hero2 .creds-line::before{content:"";width:34px;height:2px;background:repeating-linear-gradient(90deg,var(--teal) 0 7px,transparent 7px 12px)}
.hero2 h1{font:300 clamp(48px,7.4vw,112px)/.95 var(--display);letter-spacing:-.03em;color:var(--ink);margin-bottom:28px;font-variation-settings:"SOFT" 30}
.hero2 h1 .l1{display:block}
.hero2 h1 .stitched{display:block;margin-top:.04em}
.hero2 h1 .stitched svg{display:block;width:100%;max-width:640px;height:auto;overflow:visible}
.hero2 h1 .stitched text{font-family:var(--display);font-style:italic;font-weight:500;font-variation-settings:"SOFT" 100,"WONK" 1;font-size:150px;fill:var(--magenta);stroke:var(--magenta);stroke-width:2.2;stroke-dasharray:9 6;paint-order:stroke}
.hero2 h1 .stitched{position:relative}
.js.motion .hero2 h1 .stitched text{fill:rgba(176,24,94,0);animation:fillText 1s 2.3s ease forwards}
.js.motion .hero2 h1 .stitched svg{clip-path:inset(-20% 100% -20% 0);animation:sewClip 2.3s .3s cubic-bezier(.55,.1,.25,1) forwards}
.hero2 h1 .sew-needle{position:absolute;left:0;top:42%;width:60px;height:14px;pointer-events:none;opacity:0}
.js.motion .hero2 h1 .sew-needle{animation:sewNeedle 2.3s .3s cubic-bezier(.55,.1,.25,1) forwards}
@keyframes sewClip{to{clip-path:inset(-20% -5% -20% 0)}}
@keyframes fillText{to{fill:var(--magenta)}}
@keyframes sewNeedle{0%{opacity:1;left:0;transform:translateY(0)}20%{transform:translateY(-14px)}40%{transform:translateY(10px)}60%{transform:translateY(-12px)}80%{transform:translateY(8px)}95%{opacity:1}100%{opacity:0;left:calc(min(100%,640px) - 10px);transform:translateY(0)}}
.hero2 .lede{max-width:44ch;margin-bottom:30px}
.hero2 .stage{position:relative;justify-self:center;width:min(100%,520px)}
.hero2 .stage .hoopf{transform:rotate(-4deg)}
.hero2 .stage .tag-k{position:absolute;right:-6px;bottom:8%;z-index:3}
.hero2 .stage .floss-mini{position:absolute;left:-30px;top:18%;z-index:3}
@media (max-width:900px){.hero2 .wrap{grid-template-columns:1fr}.hero2 .stage{order:-1;width:min(86%,400px);margin-bottom:10px}.hero2 .stage .floss-mini{display:none}}

/* sewn-on woven label */
.wlabel{position:relative;display:inline-grid;gap:2px;background:#fffaf2;color:var(--ink);padding:14px 22px 12px;border-radius:3px;box-shadow:0 14px 26px -16px rgba(27,35,48,.6);transform:rotate(3deg);text-align:center}
.wlabel::before{content:"";position:absolute;inset:5px;border:1.5px dashed var(--magenta);border-radius:2px;opacity:.7;pointer-events:none}
.wlabel small{font:700 10px/1.2 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.wlabel b{font:500 22px/1.1 var(--display);font-variation-settings:"SOFT" 100}
.wlabel .n42{font:italic 400 44px/1 var(--display);color:var(--magenta)}
.wlabel.ink{background:var(--ink);color:#fff}.wlabel.ink::before{border-color:var(--pink)}.wlabel.ink small{color:#cfc6d6}
/* availability as small sewn tags */
.avail2 .avail{gap:10px}
.avail2 .avail li{border-radius:4px;border:0;background:#fffaf2;box-shadow:0 8px 16px -12px rgba(27,35,48,.5);position:relative;padding:9px 14px 9px 12px}
.avail2 .avail li::after{content:"";position:absolute;inset:3px;border:1px dashed rgba(27,35,48,.22);border-radius:3px;pointer-events:none}
.avail2 .avail li:nth-child(2){transform:rotate(-1deg)}.avail2 .avail li:nth-child(3){transform:rotate(1.2deg)}

/* ---------- the scroll thread (home) ---------- */
.thread-layer{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.thread-layer svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.thread-layer .tpath{fill:none;stroke:var(--thread);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:12 8}
.thread-layer .needle{position:absolute;left:0;top:0;width:46px;height:12px;margin:-6px 0 0 -40px;transform-origin:40px 6px;will-change:transform}
.lift{position:relative;z-index:3}
@media (prefers-reduced-motion:reduce){.thread-layer .needle{display:none}}
@media (max-width:759px){.thread-layer{display:none!important}}

/* ---------- the four hoops ---------- */
.hoops4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,3vw,40px)}
.hdoor{display:grid;gap:12px;justify-items:center;text-align:center;text-decoration:none;color:#fff}
.hdoor .hoopf{width:min(100%,220px);padding:12px;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.hdoor .cloth{display:grid;place-items:center;background:var(--linen),#f7efe4}
.hdoor .cloth svg{width:62%;height:62%;overflow:visible}
.hdoor .cloth svg *{fill:none;stroke:var(--magenta);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:7 5}
.hdoor .cloth svg .g{stroke:var(--teal)}
.hdoor .cloth svg .o{stroke:var(--gold)}
.js.motion .hdoor .cloth svg *{stroke-dashoffset:300;transition:stroke-dashoffset 1.6s cubic-bezier(.4,.1,.2,1)}
.js.motion .hdoor.in .cloth svg *{stroke-dashoffset:0}
.hdoor:hover .hoopf,.hdoor:focus-visible .hoopf{transform:rotate(-8deg) translateY(-6px)}
.hdoor .door-k{font:700 12px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-top:10px}
.hdoor h3{font-size:clamp(25px,2.2vw,30px);color:#fff}
.hdoor p{color:#cfc6d6;font-size:16px;line-height:1.5;max-width:26ch}
.hdoor .go{font-weight:700;color:var(--pink);border-bottom:2px dashed currentColor;padding-bottom:2px}
@media (max-width:1000px){.hoops4{grid-template-columns:1fr 1fr;row-gap:44px}}
@media (max-width:480px){.hdoor .hoopf{width:min(100%,170px)}}

/* ---------- path: held hoop portrait while the chapters stitch in ---------- */
.path{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,6vw,96px);align-items:start}
.path .held{position:sticky;top:120px}
.path .held .hoopf{width:min(100%,460px);transform:rotate(3deg)}
.path .held .wlabel{position:absolute;left:-10px;bottom:6%;transform:rotate(-5deg)}
.chapters{list-style:none;padding:0;margin-top:36px;position:relative}
.chapters::before{content:"";position:absolute;left:23px;top:10px;bottom:10px;border-left:3px dashed var(--thread);opacity:.55}
.chapters li{position:relative;padding:0 0 46px 74px}
.chapters li:last-child{padding-bottom:0}
.chapters .knot{position:absolute;left:4px;top:2px;width:42px;height:42px;border-radius:50%;background:var(--paper);border:3px solid var(--thread);display:grid;place-items:center}
.chapters .knot::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--thread);transform:scale(.3);transition:transform .6s cubic-bezier(.3,1.6,.5,1)}
.chapters li.in .knot::after,.chapters li:not(.rv) .knot::after{transform:scale(1)}
.chapters .yr{font:700 13px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--teal);display:block;margin-bottom:8px;padding-top:12px}
.chapters h3{font-size:clamp(28px,2.8vw,38px);margin-bottom:10px}
.chapters p{color:var(--text);max-width:52ch}
@media (max-width:900px){.path{grid-template-columns:1fr}.path .held{position:relative;top:0;justify-self:center;width:min(80%,380px)}}

/* ---------- the sampler ---------- */
.sampler-sec{padding-block:clamp(72px,9vw,120px)}
.sampler{position:relative;max-width:1060px;margin:0 auto;padding:clamp(16px,2.2vw,26px);background:linear-gradient(135deg,#2a1f19,#4a3424 40%,#2a1f19);border-radius:6px;box-shadow:0 50px 90px -40px rgba(27,35,48,.7)}
.sampler .cloth{position:relative;background:var(--linen),var(--weave),#f6eddd;padding:clamp(28px,5vw,64px) clamp(22px,5vw,72px);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15),inset 0 0 50px rgba(110,80,50,.18)}
.sampler .cloth::before{content:"";position:absolute;inset:14px;border:12px solid transparent;border-image:var(--kilim) 8 round;opacity:.85;pointer-events:none}
.sampler .xs{display:block;margin:0 auto;max-width:100%;height:auto}
.sampler .xs-title{margin-bottom:10px}
.sampler .xs-abc{margin:0 auto 26px;opacity:.85}
.sampler .lead{font:400 clamp(19px,1.8vw,23px)/1.45 var(--display);color:var(--ink);text-align:center;max-width:46ch;margin:0 auto 26px;font-style:italic}
.sampler ul{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 48px;max-width:860px;margin:0 auto}
.sampler li{display:flex;gap:14px;align-items:baseline;padding:14px 0;border-top:1.5px dashed rgba(27,35,48,.16);font:400 clamp(19px,1.75vw,24px)/1.3 var(--display);color:var(--ink)}
.sampler li::before{content:"\2715";flex:none;color:var(--magenta);font:700 15px/1 var(--body);transform:translateY(-2px)}
.sampler li span{flex:1}
.sampler li em{color:var(--magenta);font-style:italic}
.sampler .sign{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:30px;flex-wrap:wrap}
.sampler .sign p{font:italic 400 18px/1.4 var(--display);color:var(--muted);max-width:44ch}
@media (max-width:760px){.sampler ul{grid-template-columns:1fr}.sampler .cloth::before{inset:8px;border-width:8px}}

/* ---------- the floss box ---------- */
.flossbox{display:flex;flex-wrap:wrap;gap:22px 18px;justify-content:center;padding:clamp(24px,4vw,44px);border-radius:24px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1)}
.skein{--c1:#b0185e;--c2:#8f1149;position:relative;display:inline-flex;align-items:center;justify-content:center;height:58px;padding:0 64px;border-radius:30px;background:radial-gradient(120% 70% at 50% 15%,rgba(255,255,255,.35),transparent 55%),repeating-linear-gradient(118deg,var(--c1) 0 4px,var(--c2) 4px 7px);box-shadow:0 14px 24px -14px rgba(0,0,0,.8),inset 0 -6px 10px rgba(0,0,0,.22);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.skein:nth-child(3n){transform:rotate(-2.2deg)}.skein:nth-child(4n+1){transform:rotate(1.6deg)}
.skein:hover{transform:translateY(-5px) rotate(0)}
.skein span{position:relative;background:#fffaf2;color:var(--ink);font:700 14px/1.15 var(--body);padding:9px 14px;border-radius:2px;box-shadow:0 2px 0 rgba(0,0,0,.12);white-space:nowrap}
.skein span::before{content:"";position:absolute;inset:3px;border:1px dashed rgba(27,35,48,.25);pointer-events:none}
.skein.c-ruby{--c1:#a3133f;--c2:#7c0d30}.skein.c-mag{--c1:#c21d6b;--c2:#8f1149}.skein.c-rose{--c1:#ec7fae;--c2:#cf5b8f}
.skein.c-gold{--c1:#d4a03c;--c2:#a77822}.skein.c-teal{--c1:#2a7a7c;--c2:#1f5c5e}.skein.c-emer{--c1:#2d7f5e;--c2:#1d5a41}
.skein.c-sapph{--c1:#3456a3;--c2:#22397a}.skein.c-ameth{--c1:#7d4b8f;--c2:#5a3168}.skein.c-coral{--c1:#e2725b;--c2:#c2533f}
@media (max-width:560px){.skein{height:50px;padding:0 34px}.skein span{font-size:13px;padding:8px 10px}}

/* ---------- three hoops for how it starts ---------- */
.start3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,4vw,56px);position:relative}
.start3 .st{display:grid;gap:14px;justify-items:center;text-align:center}
.start3 .st .hoopf{width:min(100%,200px);padding:11px}
.start3 .st .cloth{display:grid;place-items:center;background:var(--linen),#f7efe4}
.start3 .st .cloth b{font:italic 400 clamp(64px,7vw,92px)/1 var(--display);color:var(--magenta);-webkit-text-stroke:0}
.start3 h3{font-size:26px}
.start3 p{color:var(--muted);max-width:30ch;font-size:16.5px}
@media (max-width:860px){.start3{grid-template-columns:1fr}}

/* ---------- final hoop CTA ---------- */
.bighoop{display:grid;grid-template-columns:1fr auto;gap:clamp(30px,5vw,70px);align-items:center}
.bighoop .hoopf{width:clamp(260px,32vw,420px)}
.bighoop .hoopf .cloth{display:grid;place-items:center;text-align:center;background:var(--linen),#f7efe4;padding:14%}
.bighoop .hoopf .cloth p{font:italic 400 clamp(30px,3.4vw,46px)/1.05 var(--display);color:var(--ink)}
.bighoop .hoopf .cloth p em{color:var(--magenta)}
.bighoop .hoopf .cloth small{display:block;margin-top:12px;font:700 11px/1.3 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
@media (max-width:820px){.bighoop{grid-template-columns:1fr}.bighoop .hoopf{justify-self:center;width:min(86%,340px)}}

/* pinned paper notes (groups, notes) */
.pinned{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,36px)}
.paper{position:relative;background:#fffaf2;padding:36px 32px 30px;box-shadow:0 26px 40px -26px rgba(27,35,48,.55);display:grid;gap:12px;align-content:start}
.paper:nth-child(1){rotate:-1.2deg}.paper:nth-child(2){rotate:1deg}
.pinned{align-items:start}
.paper .pin{position:absolute;top:-12px;left:50%;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff9cc4,var(--magenta) 55%,#6e0b37);box-shadow:0 6px 8px -3px rgba(0,0,0,.45);transform:translateX(-50%)}
.paper h3{font-size:30px}
.paper.ink{background:var(--ink);color:#e9e2ec;background-image:var(--linen-dark)}
.paper.ink h3{color:#fff}.paper.ink p{color:#d9d0dc}.paper.ink .tlink{color:var(--pink)}
.paper .ph{margin:-6px -6px 6px;aspect-ratio:16/9;overflow:hidden}
.paper .ph img{width:100%;height:100%;object-fit:cover}
@media (max-width:820px){.pinned{grid-template-columns:1fr}}

/* ---------- inner pages ---------- */
.p-hero .media.hoop-media{border-radius:0;box-shadow:none;aspect-ratio:auto;overflow:visible;max-width:380px}
.p-hero .media.hoop-media .hoopf{transform:rotate(3deg)}
.p-hero{background:radial-gradient(60% 70% at 100% 0%,rgba(240,139,184,.18),transparent 65%)}
.p-hero .h1{font-weight:300;letter-spacing:-.028em}
.side-card{border-radius:4px;background:#fffaf2;border:0;box-shadow:0 18px 34px -24px rgba(27,35,48,.55);position:relative}
.side-card::before{content:"";position:absolute;inset:6px;border:1.5px dashed rgba(176,24,94,.45);border-radius:3px;pointer-events:none}
.side-card.ink{border-radius:4px}
.side-card.ink::before{border-color:rgba(240,139,184,.5)}
.price-card{border-radius:6px;position:relative;transform:rotate(-1.5deg)}
.price-card::before{content:"";position:absolute;inset:8px;border:2px dashed rgba(240,139,184,.55);border-radius:4px;pointer-events:none}
.callout{border-radius:6px;background:var(--linen),#fffaf2}
.myth div{border-radius:6px;background:#fffaf2}
.myth div.is{background:var(--linen),var(--teal-soft)}
.chips li{border-radius:4px;background:#fffaf2}
.path-card,.pt-card,.tcard,.quote-card,.group-card,.cf-card,.shelf{border-radius:8px}
.route figure{border-radius:2px;background:#fff;padding:10px 10px 30px;box-shadow:0 22px 40px -24px rgba(27,35,48,.6);overflow:visible;position:relative;aspect-ratio:auto}
.route figure img{aspect-ratio:4/3}
.route figure.tall img{aspect-ratio:3/4}
.route figure::before{content:"";position:absolute;top:-10px;left:50%;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff9cc4,var(--magenta) 55%,#6e0b37);box-shadow:0 5px 7px -3px rgba(0,0,0,.45);transform:translateX(-50%);z-index:1}
.route>li:nth-child(odd) figure{rotate:1.6deg}.route>li:nth-child(even) figure{rotate:-1.4deg}
.route::before{border-left-color:var(--thread)}
.access{border-radius:6px;background:var(--linen),var(--gold-soft)}
.wlabel .hoop-k{font:700 10px/1.25 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);max-width:16ch;margin:0 auto}
.wlabel b{max-width:14ch;margin:0 auto}

.xcloth{display:grid;place-items:center;background:var(--linen),var(--weave),#f6eddd!important}
.xcloth canvas{max-width:78%;height:auto}
/* cross-stitch bullets everywhere */
.stitch-list li::before,.prose ul li::before,.note-body ul li::before,.policy ul li::before{content:"\2715";background:none;width:auto;height:auto;top:.05em;color:var(--magenta);font:700 14px/1.6 var(--body)}
.stitch-list{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0 32px}
.stitch-list li{padding:12px 0 12px 28px;border-top:1.5px dashed var(--line);font:400 19px/1.35 var(--display);color:var(--ink)}
.stitch-list li::before{top:.75em}
/* patches: small woven labels in a loose grid */
.patches{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:26px 22px;counter-reset:pq;margin-top:12px}
.patches li{counter-increment:pq;position:relative;background:#fffaf2;padding:28px 22px 22px;box-shadow:0 18px 30px -22px rgba(27,35,48,.6);font:400 19px/1.35 var(--display);color:var(--ink)}
.patches li::before{content:counter(pq);position:absolute;top:-16px;left:18px;width:36px;height:36px;border-radius:50%;background:var(--magenta);color:#fff;display:grid;place-items:center;font:italic 500 18px/1 var(--display);z-index:1}
.patches li::after{content:"";position:absolute;inset:6px;border:1.5px dashed rgba(176,24,94,.35);pointer-events:none}
.patches li:nth-child(odd){rotate:-1deg}.patches li:nth-child(even){rotate:1.2deg}
.block h2{font-size:clamp(30px,3.4vw,44px);font-weight:400;letter-spacing:-.015em}
.tmark{display:block;height:1px}
@media (min-width:760px){.js [data-thread-page] .chapters::before{opacity:0}}