/* Home — the most kinetic page family. A pieced block fills the first screen; its colours are
   measured from whichever listing sits at its centre (data/product-palettes.json). */

.page-home .site-header{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:0}
.page-home .site-header.menu-open{background:var(--paper)}

/* --lb: the label ends short of the binding, and never grows taller than its words need (tall monitors).
   --copy is kept narrow enough that the label frames the ring rather than competing with it. */
.stage{--lb:7%;--cx:60%;--cy:51%;--s:min(60svh,36vw);--copy:clamp(340px,33.5vw,596px);--edge:max(var(--gutter),calc((100vw - 2240px)/2));
 --env:color-mix(in oklab,var(--p1) 42%,#26302a);
 position:relative;height:calc(100svh - var(--header) - var(--provenance-height,120px));min-height:570px;overflow:clip;isolation:isolate;background:var(--paper);touch-action:pan-y}
/* Straight-line quilting across the whole block: the surface is stitched, not printed. */
.stage::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
 background:repeating-linear-gradient(-45deg,rgba(255,252,245,.075) 0 1px,transparent 1px 26px)}

/* ---- The pieced field ---- */
.field{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.field polygon{transform-box:fill-box;transform-origin:center;stroke:var(--paper);stroke-width:2.5;vector-effect:non-scaling-stroke;transition:fill 1s var(--ease-seam) calc(var(--o,0)*120ms)}
.field .o1{--o:0}.field .o2{--o:1}.field .o3{--o:2}.field .o4{--o:3}.field .o5{--o:4}.field .o6{--o:5}
/* Two measured colours near full strength, two softer; the photograph stays the richest thing on screen. */
.f1{fill:color-mix(in oklab,var(--p1) 84%,var(--paper))}
.f2{fill:color-mix(in oklab,var(--p2) 74%,var(--paper))}
.f3{fill:var(--p3)}
.f4{fill:color-mix(in oklab,var(--p4) 62%,var(--paper))}
.fl{fill:color-mix(in oklab,var(--p1) 38%,var(--paper))}
.field-tall{display:none}
.field-wide{top:-12.36%;height:112.36%}

/* ---- The copy label: a linen piece sewn onto the block. The ring passes behind it; its binding
   takes the listing's colours, the same as the product label on the right. ---- */
.stage-copy{--lx:max(14px,calc(var(--edge) - 30px));position:absolute;left:var(--lx);top:0;bottom:var(--lb);z-index:6;width:calc(var(--edge) + var(--copy) - var(--lx));
 padding:clamp(30px,5.4svh,68px) clamp(28px,3.6vw,64px) 0 calc(var(--edge) - var(--lx));
 filter:drop-shadow(14px 12px 22px rgba(28,32,24,.26))}
.stage-copy::before{content:'';position:absolute;inset:0;z-index:-1;clip-path:polygon(0 0,100% 0,calc(100% - 7vw) 100%,0 100%);
 background:linear-gradient(90deg,var(--p1) 0 38%,var(--p2) 38% 66%,var(--p3) 66% 86%,var(--p4) 86%) top/100% 9px no-repeat,
 repeating-linear-gradient(-45deg,rgba(29,58,46,.03) 0 1px,transparent 1px 26px),#fbf6ee}
.stage h1{font-size:min(clamp(3rem,1.1rem + 4vw,8rem),6.8svh);font-weight:400;line-height:.94;letter-spacing:-.032em;max-width:5.2em}
.stage h1 span{display:block}
.stage h1 .l2{font-style:italic;color:var(--raspberry);font-weight:370;margin-top:.1em;letter-spacing:-.04em}
.stage-credit{margin:clamp(16px,2.4svh,26px) 0 0;max-width:30ch;font-size:clamp(16px,1.1vw,19px);color:var(--muted)}
.stage-credit strong{color:var(--ink);font-weight:600}

/* Section index: the seven Etsy sections, with the current piece's section lit. */
.stage-index{position:absolute;z-index:7;left:var(--edge);bottom:calc(var(--lb) + clamp(20px,3.4svh,44px));width:calc(var(--copy) - 8vw)}
.index-all{display:inline-flex;align-items:center;gap:.5em;margin-bottom:12px;font:600 17px/1.2 var(--text);color:var(--forest);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em}
.index-all:hover{color:var(--rose-ink)}
.stage-index ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.stage-index li a{display:inline-flex;align-items:baseline;gap:6px;min-height:38px;padding:8px 11px;border:1px solid var(--line-strong);border-radius:3px;background:var(--white);color:var(--ink);text-decoration:none;font-size:15px;font-weight:600;line-height:1.1;transition:background-color .35s,border-color .35s,color .35s}
.stage-index li a::before{content:'';align-self:center;width:11px;height:11px;flex:none;background:linear-gradient(135deg,var(--p1) 50%,var(--p3) 50%);box-shadow:0 0 0 1px rgba(29,58,46,.16)}
.stage-index li a:focus-visible{outline-offset:-3px}
.stage-index li b{font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.stage-index li a:hover{border-color:var(--forest)}
.stage-index li a.is-live{border-color:var(--forest);background:var(--forest);color:var(--on-dark);box-shadow:inset 0 -3px 0 color-mix(in oklab,var(--p3) 85%,white)}
.stage-index li a.is-live b{color:var(--on-dark-muted)}

/* Short desktop screens keep chips, compact enough to stay clear of the credit line on the narrower label. */
@media (min-width:761px) and (min-aspect-ratio:21/20) and (max-height:819px){
 .stage-index{width:calc(var(--copy) - 6.5vw)}
 .stage-index ul{gap:5px}
 .stage-index li a{min-height:34px;padding:6px 9px;font-size:14px}
}
/* The header's wordmark line already says "quilts & quilted goods"; the narrower label keeps its kicker to one line. */
@media (min-width:761px) and (max-width:1400px){.kicker-more{display:none}}
/* Tall enough desktop: the index becomes the shop's pattern key. One row per Etsy section, each with a
   half-square-triangle swatch in the colours measured from that section's own lead piece; no row rules. */
@media (min-width:761px) and (min-aspect-ratio:21/20) and (min-height:820px){
 .stage-index ul{display:grid;gap:0;padding:7px 0 6px;border-block:1px solid var(--line-strong)}
 .stage-index li a{display:flex;align-items:center;gap:11px;width:100%;min-height:27px;padding:2px 0;border:0;border-radius:0;background:none;font-size:15.5px}
 .stage-index li a span{flex:1}
 .stage-index li a::before{width:13px;height:13px}
 .stage-index li a:focus-visible{outline-offset:3px}
 .stage-index li a:hover{border-color:transparent;color:var(--rose-ink)}
 .stage-index li a.is-live{background:none;color:var(--raspberry);box-shadow:none}
 .stage-index li a.is-live::before{box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--raspberry)}
 .stage-index li a.is-live b{color:var(--raspberry)}
}
/* ---- The ring: 41 real listings on a convex cylinder, one shared camera ---- */
.ring{position:absolute;inset:0;z-index:auto;cursor:grab}
.ring.is-dragging{cursor:grabbing}
.card{position:absolute;left:calc(var(--cx) - var(--s)/2);top:calc(var(--cy) - var(--s)/2);width:var(--s);height:var(--s);z-index:2;
 overflow:hidden;border-radius:2px;background:color-mix(in oklab,var(--p4) 30%,var(--paper));
 box-shadow:0 28px 50px -30px rgba(28,32,24,.6),0 6px 14px -8px rgba(28,32,24,.35);
 transform-origin:50% 50%;backface-visibility:hidden;text-decoration:none;color:var(--ink);user-select:none;-webkit-user-drag:none;-webkit-tap-highlight-color:transparent}
/* Without script only the first listing shows; the others wait for the ring. */
.card:not(:first-child){display:none}
.card img{width:100%;height:100%;object-fit:contain;pointer-events:none}
/* Depth dims through an overlay in the scene's own colour; the photograph itself is never filtered. */
.card::after{content:'';position:absolute;inset:0;background:var(--env);opacity:var(--dim,0);pointer-events:none;transition:opacity .25s}
.card:not(.is-active):hover::after{opacity:calc(var(--dim,0)*.55)}
.card.is-active{z-index:9;box-shadow:0 60px 90px -44px rgba(28,32,24,.7),0 18px 34px -20px rgba(28,32,24,.45)}
.card.is-active::after{opacity:0}
.card:focus-visible{outline:4px solid var(--rose);outline-offset:5px}
.card-fallback{position:absolute;inset:0;display:none;place-items:center;padding:24px;text-align:center;font:600 16px/1.4 var(--text);color:var(--ink);background:var(--paper-2)}
.card.is-broken img{display:none}.card.is-broken .card-fallback{display:grid}

/* ---- The quilt label: the same linen as the copy label, laid over the active piece's lower corner.
   It is bound on the two edges that meet the quilt, with a mitred corner, in the piece's own colours,
   and lies close to the cloth (a short, low shadow) rather than floating above it. ---- */
.tag{--bind:8px;position:absolute;z-index:10;left:calc(var(--cx) + var(--s)/2 - 30px);top:calc(var(--cy) + var(--s)/2 + 30px);translate:0 -100%;
 width:min(clamp(270px,20vw,350px),calc(100vw - var(--gutter) - (var(--cx) + var(--s)/2 - 30px)));padding:25px 24px 19px calc(24px + var(--bind));background:#fbf6ee;overflow:hidden;
 box-shadow:0 1px 1px rgba(28,32,24,.14),0 20px 26px -20px rgba(28,32,24,.6)}
.tag::before,.tag::after{content:'';position:absolute;left:0;top:0;transition:background .6s}
.tag::before{right:0;height:var(--bind);clip-path:polygon(0 0,100% 0,100% 100%,var(--bind) 100%);
 background:linear-gradient(90deg,var(--p1) 0 38%,var(--p2) 38% 66%,var(--p3) 66% 86%,var(--p4) 86%)}
.tag::after{bottom:0;width:var(--bind);clip-path:polygon(0 0,100% var(--bind),100% 100%,0 100%);
 background:linear-gradient(180deg,var(--p1) 0 30%,var(--p4) 30% 58%,var(--p2) 58%)}
.tag-section{margin:0 0 8px;font:600 12px/1.2 var(--text);letter-spacing:.16em;text-transform:uppercase;color:var(--sage-ink)}
.tag-name{font-size:clamp(1.7rem,1.1rem + 1vw,2.25rem);line-height:1.02;font-weight:420}
.tag-descriptor{display:block;margin-top:7px;font:400 15px/1.35 var(--text);letter-spacing:0;color:var(--muted)}
.tag-descriptor:empty{display:none}
.tag-meta{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;margin:14px 0 16px;font-variant-numeric:tabular-nums}
.tag-meta [data-t-price]{font:700 22px/1 var(--text)}
.tag-meta [data-t-size]{font-size:15px;color:var(--muted)}
.tag-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0}
.tag-etsy{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;background:var(--forest);color:var(--on-dark);font-weight:600;text-decoration:none;border-radius:3px;box-shadow:inset 0 -4px 0 color-mix(in oklab,var(--p3) 80%,var(--rose))}
.tag-etsy:hover{background:var(--forest-2)}
.tag-details{font-weight:600;color:var(--forest);text-underline-offset:.28em}
.tag-details:hover{color:var(--rose-ink)}
/* Changing pieces: the previous label is cloned as an inert ghost and wiped away over the new one, so the
   label is never empty and what it says is always what its links open. The ghost sits inside the binding. */
.tag-ghost{position:absolute;inset:var(--bind) 0 0 var(--bind);z-index:1;padding:calc(25px - var(--bind)) 24px 19px 24px;background:#fbf6ee;pointer-events:none;animation:tag-out .5s var(--ease) both}
.tag.is-sewn{animation:tag-in .5s var(--ease) both}
@keyframes tag-out{to{clip-path:inset(0 0 0 100%)}}
@keyframes tag-in{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}

/* ---- Controls: under the active piece, left of its label ---- */
.ring-controls{position:absolute;z-index:10;left:calc(var(--cx) - var(--s)/2);top:calc(var(--cy) + var(--s)/2 + 18px);display:flex;align-items:center;gap:8px}
.ring-controls button{display:grid;place-items:center;min-width:46px;height:46px;padding:0 12px;border:1.5px solid var(--forest);border-radius:999px;background:var(--white);color:var(--forest);font-size:19px;font-weight:600}
.ring-controls button:hover{background:var(--forest);color:var(--on-dark)}
.ring-controls .ring-pause{font-size:14px;border-color:var(--line-strong);background:var(--white);min-width:0}
.ring-count{margin:0 6px;font:600 15px/1 var(--text);font-variant-numeric:tabular-nums;color:var(--ink);min-width:62px;text-align:center}
.ring-count strong{font:500 24px/1 var(--display)}
.stage-noscript{position:absolute;z-index:10;left:var(--edge);bottom:18px;margin:0}

/* ---- Tall stage: phones and portrait screens get their own composition ---- */
@media (max-width:760px),(max-aspect-ratio:21/20){
 /* A column that owns the screen: words, then the piece, its label, controls and sections. */
 .stage{--s:min(74vw,42svh,560px);height:auto;min-height:max(100svh,640px);display:flex;flex-direction:column;border-bottom:10px solid color-mix(in oklab,var(--p2) 70%,var(--paper));transition:border-color 1s var(--ease-seam)}
 .field-wide{display:none}
 .field-tall{display:block;top:calc(var(--cy,50%) - var(--s)*.64);height:calc(var(--s)*1.5)}
 /* The ring's centre is only known once home.js measures it; showing the field before then made it jump (CLS). */
 .stage:not([style*="--cy"]) .field-tall{visibility:hidden}
 .stage-copy{position:relative;left:auto;top:auto;bottom:auto;width:auto;padding:18px var(--gutter) 0;filter:none}
 .stage-copy::before{display:none}
 .stage h1{font-size:clamp(2.3rem,10.2vw,4rem);max-width:none}
 .stage .kicker{margin-bottom:10px}
 .stage-credit{margin-top:10px;font-size:15px}
 .ring{position:relative;inset:auto;flex:none;height:calc(var(--s) + 34px);margin-top:max(26px,calc(var(--s)*.14 - 9px))}
 .card{left:calc(50% - var(--s)/2);top:calc(50% - var(--s)/2)}
 .tag{position:relative;left:auto;top:auto;translate:none;width:auto;min-height:204px;margin:-26px var(--gutter) 0;padding:20px 18px 16px calc(18px + var(--bind))}
 .tag-ghost{padding:calc(20px - var(--bind)) 18px 16px 18px}
 .tag-name{font-size:1.65rem}
 .tag-meta{margin:10px 0 12px}
 .tag-etsy{flex:1 1 auto;max-width:360px;justify-content:center}
 .ring-controls{position:relative;left:auto;top:auto;margin:14px var(--gutter) 0;justify-content:space-between}
 .ring-count{flex:1}
 .stage-index{position:relative;left:auto;bottom:auto;width:auto;margin:16px 0 0;padding:0 var(--gutter) 24px}
 .stage-index ul{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(-1*var(--gutter));padding:0 var(--gutter) 4px;scrollbar-width:none}
 .stage-index ul::-webkit-scrollbar{display:none}
 .stage-index li{flex:none}
 .stage-index li a{min-height:44px}
}
@media (max-width:400px){.kicker-more{display:none}}
@media (max-width:360px){.tag-actions{flex-direction:column;align-items:stretch}.tag-etsy{max-width:none;white-space:nowrap}}
@media (min-width:761px) and (min-aspect-ratio:21/20){
 .stage{--s:min(60svh,36vw,calc(100svh - var(--header) - var(--provenance-height,120px) - 136px))}
}
@media (min-width:761px) and (max-width:1100px) and (min-aspect-ratio:21/20){
 .stage h1{font-size:6.1svh}
}
@media (max-width:760px),(max-aspect-ratio:21/20){
 .stage-credit{max-width:none}
 .stage .kicker{display:none}
}
@media (max-width:360px){
 .stage{--s:min(66vw,38svh,560px)}
 .stage-copy{padding-top:10px}
 .stage h1{font-size:2.1rem}
 .ring{margin-top:18px}
}

/* Very wide screens keep the three anchors across the available width. The ring's
   untransformed resting cards and source tiers remain the same. */
@media (min-width:1800px) and (min-aspect-ratio:21/20){
 .stage{--cx:56%;--cy:50%;--s:min(64svh,37vw);--copy:clamp(596px,27vw,700px)}
 .stage-copy{padding-top:clamp(48px,6svh,88px)}
 .stage h1{font-size:min(clamp(5rem,5vw,8rem),7.9svh)}
 .stage-index{width:calc(var(--copy) - 9vw)}
 .tag{left:calc(var(--cx) + var(--s)/2 - 30px);width:clamp(350px,17vw,450px);padding:30px 30px 26px 38px}
 .tag-name{font-size:clamp(2.25rem,2vw,3rem)}
 .tag-descriptor{font-size:17px;line-height:1.4}
 .tag-meta [data-t-price]{font-size:28px}
 .tag-meta [data-t-size]{font-size:17px}
 .tag-actions{gap:14px 20px}
 .tag-ghost{padding:22px 30px 26px}
}

/* ---- Below the stage: a colour-blocked band for the studio (teal sampled from the Blue Ridge
   behind the fence in Aaron's photographs), then the shop by section, then Quilt Studio. ---- */

/* The studio as one scene rather than three equal cards: Bre is the anchor, the cutting is a narrow
   strip of action set lower, and the longarm note sits under it as evidence. The photographs are
   pieced into the band with pressed seams and run to its lower edge. */
.home-studio-strip{padding-top:clamp(56px,7.5vw,108px);background:#2c4a4b;color:var(--on-dark)}
.home-studio-strip .kicker{color:#bfd6c9}
.home-studio-strip .text-link{color:var(--on-dark)}
.strip-layout{display:grid;grid-template-columns:minmax(0,4.3fr) minmax(0,4.2fr) minmax(0,2.3fr);grid-template-rows:minmax(0,1fr) auto;column-gap:6px;row-gap:6px}
.strip-copy{grid-column:1;grid-row:1 / 3;align-self:center;padding:0 clamp(28px,5vw,80px) clamp(40px,5vw,72px) 0}
.strip-copy h2{color:var(--on-dark);font-size:clamp(2rem,1.3rem + 2vw,3.1rem)}
.strip-copy p:not(.kicker){margin:16px 0 20px;color:var(--on-dark-muted);font-size:18px;max-width:40ch}
.strip-links{display:flex;flex-wrap:wrap;gap:8px 24px;margin:0}
/* The credit is the shop's local anchor, set in the display italic. */
.strip-copy .strip-credit{font:italic 400 1.15rem/1.4 var(--display)}
.strip-layout figure{position:relative;margin:0;min-height:0;overflow:hidden;background:#24403f}
.strip-layout img{width:100%;height:100%;object-fit:cover}
.strip-bre{grid-column:2;grid-row:1 / 3;aspect-ratio:3/4;align-self:stretch}
.strip-bre img{object-position:40% 50%}
.strip-layout .strip-cut{grid-column:3;grid-row:1;margin-top:clamp(40px,5.5vw,88px)}
.strip-cut img{object-position:59% 50%}
.strip-needle{grid-column:3;grid-row:2;aspect-ratio:4/3}
.strip-layout figcaption{position:absolute;left:0;bottom:0;margin:0;padding:7px 12px 6px;background:#fbf6ee;font-size:14px;font-weight:600;line-height:1.25;color:var(--ink)}
/* The process pieces are sewn down in order when the band comes into view (home.js; never under reduced motion). */
.home-studio-strip.will-reveal .strip-cut img,.home-studio-strip.will-reveal .strip-needle img{clip-path:inset(0 0 100% 0)}
.home-studio-strip.is-seen .strip-cut img,.home-studio-strip.is-seen .strip-needle img{clip-path:inset(0);transition:clip-path 1s var(--ease-seam) .15s}
.home-studio-strip.is-seen .strip-needle img{transition-delay:.55s}
@media (max-width:860px){
 .strip-layout{grid-template-columns:minmax(0,3fr) minmax(0,2fr);grid-template-rows:auto}
 .strip-copy{grid-column:1 / -1;grid-row:1;padding:0 0 30px}
 .strip-bre{grid-column:1 / -1;grid-row:2;aspect-ratio:4/5}
 .strip-layout .strip-cut{grid-column:1;grid-row:3;margin-top:0;aspect-ratio:3/4}
 .strip-needle{grid-column:2;grid-row:3;aspect-ratio:auto}
 .strip-layout figcaption{font-size:13px;padding:6px 9px 5px}
}

/* Shop by section: a sampler pieced by object shape. Quilts are the large square, runners a wide
   strip, pillowcases near-square, the tote upright, the small goods small squares; every object
   stays whole in its piece. Rows are square units of the container's own width. */
.home-sections{padding-block:clamp(40px,5vw,72px) clamp(56px,8vw,104px);container-type:inline-size}
.home-sections h2{font-size:clamp(2rem,1.3rem + 2vw,3.1rem)}
.sampler{--g:6px;--u:calc((100cqw - 11*var(--g))/12);list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:var(--u);gap:var(--g)}
.sampler>:where(li){grid-column:span 4;grid-row:span 4;min-width:0}
.s-quilts{grid-area:1/1/13/13}.s-table-runners{grid-area:13/1/19/13}.s-pillowcases{grid-area:19/1/25/8}.s-tote-bags{grid-area:19/8/25/13}
.s-hot-pads{grid-area:25/1/29/5}.s-quilted-bags{grid-area:25/5/29/9}.s-e-reader-cases{grid-area:25/9/29/13}
.sampler a{position:relative;display:block;height:100%;overflow:hidden;color:var(--ink);text-decoration:none}
.piece-photo{display:block;height:100%;background:color-mix(in oklab,var(--p1) 22%,var(--paper))}
.piece-photo img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.s-hot-pads .piece-photo img{object-position:50% 100%}
.sampler a:hover .piece-photo img{transform:scale(1.025)}
/* Each section is labelled like the pieces themselves: a small label sewn on, bound in that piece's colours. */
.section-label{position:absolute;left:8px;bottom:8px;max-width:calc(100% - 16px);display:grid;gap:1px;padding:10px 11px 7px;background:#fbf6ee;box-shadow:0 12px 22px -14px rgba(28,32,24,.6)}
.section-label::before{content:'';position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,var(--p1) 0 55%,var(--p3) 55%)}
.section-name{font:430 1rem/1.08 var(--display);margin-top:3px}
.section-count{font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.is-medium .section-name{font-size:1.25rem}
.is-large .section-label{left:12px;bottom:12px;padding:14px 18px 11px}
.is-large .section-label::before{height:7px}
.is-large .section-name{font-size:1.7rem}
.is-medium .section-count,.is-large .section-count{font-size:15px}
.sampler a:hover .section-name{color:var(--rose-ink)}
@media (max-width:999px){
 /* Narrow: a label laid over a small square would hide the object, so small goods carry theirs below. */
 .sampler>.is-small{grid-row-end:span 7}
 .is-small a{display:flex;flex-direction:column}
 .is-small .piece-photo{position:relative;flex:none;height:auto;aspect-ratio:1}
 .is-small .piece-photo img{position:absolute;inset:0}
 .is-small .section-label{position:relative;left:0;bottom:0;max-width:none;padding:9px 2px 0;background:none;box-shadow:none}
 .is-small .section-label::before{height:4px}
}
@media (min-width:1000px){
 /* Wide: the heading takes the first piece of the block, top left; quilts fill the right half. */
 .home-sections{display:grid}
 .home-sections>*{grid-area:1/1}
 .sections-head{position:relative;z-index:1;align-self:start;display:block;width:calc(50% - 3px);margin:0;padding-top:clamp(4px,1.6cqw,26px)}
 .sections-head .text-link{display:inline-block;margin-top:16px}
 .sampler{--u:calc((100cqw - 23*var(--g))/24);grid-template-columns:repeat(24,minmax(0,1fr))}
 .s-quilts{grid-area:1/13/13/25}.s-table-runners{grid-area:5/1/11/13}.s-pillowcases{grid-area:11/1/17/8}.s-tote-bags{grid-area:11/8/17/13}
 .s-hot-pads{grid-area:13/13/17/17}.s-quilted-bags{grid-area:13/17/17/21}.s-e-reader-cases{grid-area:13/21/17/25}
 .section-label{left:10px;bottom:10px;padding:11px 14px 8px}
 .is-small .section-label{top:10px;bottom:auto}
 .section-name{font-size:1.2rem}
 .is-medium .section-name{font-size:clamp(1.3rem,.9rem + .7vw,1.6rem)}
 .is-large .section-label{left:16px;bottom:16px;padding:16px 22px 13px}
 .is-large .section-name{font-size:clamp(1.8rem,1.1rem + 1.2vw,2.4rem)}
}

/* Quilt Studio: the Studio page's own design wall (the cutting-mat grid on the warm mat), so the two read as
   one tool and Home ends on a light band before the forest footer. The sketch and its controls share one panel;
   the headline ends the way the stage's does. Light controls come from .studio-wall in rqc.css. */
.home-studio{padding-block:clamp(48px,6vw,80px) clamp(64px,8vw,112px);border-top:2px solid var(--ink);color:var(--ink);
 background:linear-gradient(rgba(29,58,46,.075) 1px,transparent 1px) 0 0/32px 32px,linear-gradient(90deg,rgba(29,58,46,.075) 1px,transparent 1px) 0 0/32px 32px,
 linear-gradient(rgba(29,58,46,.12) 1px,transparent 1px) 0 0/160px 160px,linear-gradient(90deg,rgba(29,58,46,.12) 1px,transparent 1px) 0 0/160px 160px,color-mix(in oklab,var(--sage) 14%,var(--paper))}
.home-studio .kicker{color:var(--sage-ink)}
.home-studio h2{color:var(--ink);font-size:clamp(2.4rem,1.3rem + 3vw,4.1rem);line-height:.96;letter-spacing:-.03em}
.home-studio h2 span,.home-studio h2 em{display:block}
.home-studio h2 em{margin-top:.06em;font-style:italic;font-weight:370;color:var(--raspberry)}
.home-studio .studio-copy p:not(.kicker){margin-top:20px;font-size:18px;max-width:38ch}
.home-studio .studio-launch{margin-top:28px}
.home-studio .story-preview{padding:clamp(16px,2vw,28px);background:rgba(255,253,248,.5);box-shadow:inset 0 0 0 1px var(--line)}
@media (scripting:none){.stage .field-tall{visibility:visible}}