/* RoseQuiltCo — shared system. Palette from the Etsy shop logo and banner; quilts supply the rest.
   Page families share the mark, type, binding, seams and motion curves, not their layouts. */
@font-face{font-family:'Fraunces';src:url(/assets/fonts/fraunces-variable-latin.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url(/assets/fonts/fraunces-variable-latin-italic.woff2) format('woff2');font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:'Source Sans 3';src:url(/assets/fonts/source-sans-3-variable-latin.woff2) format('woff2');font-weight:200 900;font-style:normal;font-display:swap}
:root{
 /* Logo/banner linen, rose, blush, coral and sage; one restrained deep green for contrast. */
 --paper:#f6eee3;--paper-2:#efe3d3;--mat:#eadfcd;--white:#fffbf5;--linen:#f6eee3;
 --ink:#22302a;--ink-2:#34423b;--muted:#5a6560;
 --raspberry:#a3264a;--rose:#c93359;--rose-ink:#a3243f;--blush:#e7a9ad;--coral:#d8705a;--sage:#8e9b72;--sage-ink:#586a4c;--leaf:#aeb28f;--gold:#b88b41;
 --forest:#1d3a2e;--forest-2:#264a3b;
 --on-dark:#fff8ed;--on-dark-muted:rgba(255,248,237,.76);
 --line:rgba(29,58,46,.14);--line-strong:rgba(29,58,46,.3);
 --display:'Fraunces',Georgia,'Times New Roman',serif;
 --text:'Source Sans 3','Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
 --gutter:clamp(16px,4vw,48px);--max:1280px;--header:74px;
 --ease:cubic-bezier(.22,.78,.25,1);--ease-seam:cubic-bezier(.65,0,.35,1)
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(var(--header) + 16px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--text);text-rendering:optimizeLegibility}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{cursor:default;opacity:.35}
[hidden]{display:none!important}
h1,h2,h3{font-family:var(--display);font-weight:430;line-height:1.04;letter-spacing:-.018em;margin:0;text-wrap:balance}
h1{font-size:clamp(2.4rem,1.5rem + 3vw,4.2rem)}
h2{font-size:clamp(1.7rem,1.25rem + 1.5vw,2.6rem)}
h3{font-size:1.35rem}
p{margin:0 0 1em}
em.rose,.italic-rose{font-style:italic;color:var(--raspberry)}
.lead{font:400 clamp(1.15rem,1rem + .55vw,1.42rem)/1.45 var(--display);color:var(--ink-2)}
/* The banner's letter-spaced line, reused wherever a label names what follows. */
.kicker{margin:0 0 12px;font:600 12.5px/1.3 var(--text);letter-spacing:.16em;text-transform:uppercase;color:var(--sage-ink)}
.kicker [aria-hidden],.ji-date [aria-hidden]{color:var(--rose);letter-spacing:0;margin:0 .35em;font-size:.8em;vertical-align:.08em}
:focus-visible{outline:3px solid var(--rose);outline-offset:3px}
.site-footer :focus-visible,.finished :focus-visible{outline-color:var(--on-dark)}
.wrap{width:min(var(--max),100% - 2*var(--gutter));margin-inline:auto}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;top:-80px;left:16px;z-index:100;background:var(--forest);color:var(--on-dark);padding:12px 18px;border-radius:3px;text-decoration:none;font-weight:600}
.skip:focus{top:10px}

/* Links and buttons: ↗ only marks links that leave the site. Buttons carry a binding strip. */
.text-link{color:var(--forest);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.28em}
.text-link:hover{color:var(--rose-ink)}
.button{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:48px;padding:0 22px;border:1.5px solid var(--forest);border-radius:3px;background:transparent;color:var(--forest);font:600 16px/1.1 var(--text);text-decoration:none;text-align:center;transition:background-color .18s,color .18s,border-color .18s,box-shadow .18s}
.button:hover{background:rgba(29,58,46,.07)}
.button.primary{background:var(--forest);color:var(--on-dark);box-shadow:inset 0 -4px 0 var(--rose)}
.button.primary:hover{background:var(--forest-2);box-shadow:inset 0 -6px 0 var(--rose)}
.button.rose{background:var(--rose);border-color:var(--rose);color:#fff;box-shadow:inset 0 -4px 0 var(--raspberry)}
.button.rose:hover{background:#b72a4f;border-color:#b72a4f}
.breadcrumbs{display:flex;flex-wrap:wrap;gap:6px 8px;font-size:15px;color:var(--muted);padding:14px 0 0}
.breadcrumbs a{color:var(--muted);text-underline-offset:.22em}
.breadcrumbs a:hover{color:var(--ink)}
.block-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px 24px;margin-bottom:24px}
.block-head p{margin:0;max-width:60ch;color:var(--muted)}
.block-head .kicker{margin-bottom:10px}

/* Header: the real Etsy logo and the banner's three-colour wordmark. */
.site-header{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:1px solid var(--line)}
.nav-wrap{width:min(1400px,100% - 2*var(--gutter));height:var(--header);margin:auto;display:flex;align-items:center;gap:30px}
.brand{display:inline-flex;align-items:center;gap:11px;margin-right:auto;text-decoration:none;white-space:nowrap}
.brand img{width:48px;height:48px;border-radius:10px;box-shadow:0 0 0 1px rgba(29,58,46,.1),0 3px 8px -4px rgba(29,58,46,.35)}
.wordmark{display:grid;gap:3px}
.wm{font:430 29px/1 var(--display);letter-spacing:-.012em}
.wm b,.wm i,.wm em{font-weight:400;font-style:normal}
.wm b{color:#ae3455}.wm i{color:#697765}.wm em{color:#be5849}
.wordmark small{font:600 11px/1 var(--text);letter-spacing:.18em;text-transform:uppercase;color:var(--sage-ink)}
.nav-main{display:flex;align-items:center;gap:30px}
.nav-main a{position:relative;display:inline-flex;align-items:center;gap:7px;padding:10px 0;font:600 17px/1 var(--text);color:var(--ink);text-decoration:none}
.nav-main a:hover{color:var(--rose-ink)}
.nav-main a[aria-current="page"]::after{content:'';position:absolute;left:0;right:0;bottom:2px;height:3px;background:var(--rose)}
.nav-count{font-weight:500;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.nav-main .nav-tool{padding:10px 17px 10px 12px;border:1.5px solid var(--forest);border-radius:999px;background:var(--white)}
.nav-main .nav-tool:hover{background:var(--forest);color:var(--on-dark)}
.nav-main .nav-tool[aria-current="page"]{background:var(--forest);color:var(--on-dark)}
.nav-main .nav-tool[aria-current="page"]::after{display:none}
.hst{width:16px;height:16px;border-radius:2px}
.mobile-shop,.menu-toggle{display:none}
@media (max-width:999px){.nav-optional{display:none}}
main:focus{outline:none}
.mobile-menu{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--line-strong);padding:6px var(--gutter) 22px;min-height:calc(100svh - var(--header));max-height:calc(100svh - var(--header));overflow:auto;box-shadow:0 18px 30px rgba(20,49,38,.12)}
.mobile-menu a{display:flex;align-items:center;gap:9px;min-height:52px;border-bottom:1px solid var(--line);font:500 19px/1.2 var(--text);text-decoration:none}
.mobile-menu a:last-child{border-bottom:0}
/* Where you are: the page itself, or the family it belongs to, carries a rose bar. */
.mobile-menu a[aria-current]{font-weight:600;color:var(--forest);box-shadow:inset 4px 0 0 var(--rose);padding-left:14px}
.mobile-menu .nav-count{margin-left:8px}
/* The seven Etsy sections, one tap from anywhere, keyed like the Home ledger. */
.menu-heading{margin:0;padding:12px 0 0;font:600 12.5px/1.3 var(--text);letter-spacing:.16em;text-transform:uppercase;color:var(--sage-ink)}
.menu-sections{list-style:none;margin:0;padding:8px 0 12px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;border-bottom:1px solid var(--line)}
.mobile-menu .menu-sections a{gap:8px;min-height:44px;padding:0 10px;border:1px solid var(--line-strong);border-radius:3px;background:var(--white);font:600 15px/1.15 var(--text)}
.menu-sections a::before{content:'';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)}
.menu-sections b{margin-left:auto;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.menu-sections a:focus-visible{outline-offset:-3px}
.mobile-menu .menu-sections a[aria-current]{padding-left:10px;border-color:var(--forest);box-shadow:inset 0 -3px 0 var(--rose)}
.menu-more{display:flex;flex-wrap:wrap;column-gap:22px;border-bottom:1px solid var(--line)}
.mobile-menu .menu-more a{min-height:48px;border:0;font-size:17px;color:var(--ink-2)}
.mobile-menu .menu-more a[aria-current]{padding-left:0;box-shadow:inset 0 -3px 0 var(--rose)}
@media (max-width:980px){.wordmark small{display:none}}
@media (max-width:860px){
 :root{--header:62px}
 .nav-wrap{gap:8px}
 .brand{gap:8px}.brand img{width:36px;height:36px;border-radius:8px}
 /* 24px keeps the three-colour wordmark in WCAG large-text range. */
 .wm{font-size:24px}
 .nav-main{display:none}
 .mobile-shop{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1.5px solid var(--forest);border-radius:3px;color:var(--forest);font-weight:600;text-decoration:none}
 .menu-toggle{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 12px;border:1.5px solid var(--forest);border-radius:3px;background:transparent;font-weight:600}
 .menu-icon{position:relative;width:16px;height:2px;background:currentColor;box-shadow:0 -5px 0 currentColor,0 5px 0 currentColor}
 .menu-open .menu-icon{box-shadow:none;background:transparent}
 .menu-open .menu-icon::before,.menu-open .menu-icon::after{content:'';position:absolute;inset:0;background:var(--ink);transform:rotate(45deg)}
 .menu-open .menu-icon::after{transform:rotate(-45deg)}
 body.menu-is-open{overflow:hidden}
}
@media (max-width:380px){.wm{font-size:22px}.brand{gap:6px}.brand img{width:32px;height:32px}.mobile-shop{padding:0 11px}}
@media (max-width:340px){.wm{font-size:21px}.nav-wrap{gap:6px}}
@media (max-width:368px){.menu-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.menu-toggle{min-width:44px;justify-content:center}}

/* Footer: bound like a quilt, with one flat pieced strip in the logo's colours. */
.site-footer{margin-top:clamp(56px,8vw,104px);background:var(--forest);color:var(--on-dark)}
.page-home .site-footer,.page-about .site-footer{margin-top:0}
.footer-binding{height:10px;background:linear-gradient(90deg,var(--rose) 0 31%,var(--coral) 31% 47%,var(--sage) 47% 78%,var(--blush) 78%) 0 0/560px 10px}
.footer-top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:32px 48px;padding:clamp(40px,6vw,64px) 0 36px;border-bottom:1px solid rgba(255,248,237,.16)}
.site-footer .brand img{width:52px;height:52px}
.site-footer .wm{font-size:34px}
.site-footer .wm b{color:#f59bb4}.site-footer .wm i{color:#b4d19c}.site-footer .wm em{color:#f7a386}
.footer-line{font:italic 400 1.5rem/1.25 var(--display);margin:18px 0 8px;text-wrap:balance}
.footer-brand small{display:block;font-size:15px;color:var(--on-dark-muted);line-height:1.5}
.footer-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 24px;align-content:start}
.footer-links{row-gap:20px}
.footer-group{display:grid;align-content:start}
.footer-group h2{margin:0 0 4px;font:600 12.5px/1.3 var(--text);letter-spacing:.16em;text-transform:uppercase;color:#bccdb2}
.footer-links a{display:flex;align-items:center;gap:.3em;min-height:40px;text-decoration:none;font-size:16px}
.footer-links a[aria-current]{justify-self:start;box-shadow:inset 0 -3px 0 var(--rose)}
.to-top{color:var(--on-dark);text-decoration:none}
.footer-links a:hover,.footer-bottom a:hover{text-decoration:underline;text-underline-offset:.25em}
.footer-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;padding-block:20px 28px;font-size:15px;color:var(--on-dark-muted)}
.footer-bottom a{color:var(--on-dark);text-decoration:none}
#motion-toggle{min-height:40px;padding:0;border:0;background:transparent;color:var(--on-dark);font-size:15px;text-decoration:underline;text-underline-offset:.25em}
#motion-toggle:hover{text-decoration-thickness:2px}
.footer-note{flex-basis:100%;margin:0;font-size:14px;line-height:1.5}
@media (max-width:700px){.footer-top{grid-template-columns:1fr}.footer-links{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* Quilt Studio preview — a design wall in the app's own colors. */
.story-preview{display:grid;grid-template-columns:minmax(0,1fr) minmax(252px,.66fr);grid-template-areas:"board controls" "note controls";gap:12px clamp(20px,3vw,36px);align-items:start}
.story-quilt-board{grid-area:board;background:#fbf8f3;padding:clamp(10px,1.6vw,20px);border-radius:4px;box-shadow:0 24px 60px rgba(0,0,0,.28)}
.story-quilt-board svg{width:100%;height:auto}
[data-preview-canvas] polygon,[data-preview-canvas] rect{transform-box:fill-box;transform-origin:center;transition:fill .35s var(--ease)}
.story-preview-controls{grid-area:controls}
.story-preview fieldset{border:0;margin:0 0 20px;padding:0;min-width:0}
.story-preview legend{padding:0;margin-bottom:10px;font-weight:600;font-size:15px;color:var(--on-dark-muted)}
.story-block-choices{display:grid;gap:8px}
.story-block-choices button{display:flex;align-items:center;gap:12px;min-height:50px;padding:6px 14px 6px 8px;border:1.5px solid rgba(255,248,237,.28);border-radius:4px;background:transparent;color:var(--on-dark);font-weight:600;font-size:16px;text-align:left;transition:border-color .18s,background-color .18s}
.story-block-choices button:hover{border-color:rgba(255,248,237,.6)}
.story-block-choices button[aria-pressed="true"]{border-color:var(--on-dark);background:rgba(255,248,237,.1)}
.story-block-choices svg{flex:none;width:32px;height:32px;color:var(--rose);border-radius:2px;outline:1px solid rgba(255,248,237,.25)}
.story-color-choices{display:flex;flex-wrap:wrap;gap:10px 8px}
.story-color-choices button{display:grid;justify-items:center;gap:6px;min-width:44px;padding:0;border:0;background:none;color:var(--on-dark)}
.story-color-choices span{display:block;width:40px;height:40px;border-radius:50%;border:2px solid rgba(255,248,237,.4);transition:box-shadow .18s}
.story-color-choices b{font-weight:500;font-size:14px;color:var(--on-dark-muted)}
.story-color-choices button[aria-pressed="true"] span{box-shadow:0 0 0 3px var(--forest),0 0 0 5px var(--on-dark)}
.story-color-choices button[aria-pressed="true"] b{color:var(--on-dark)}
[data-preview-color="#C93359"] span{background:#C93359}[data-preview-color="#B88B41"] span{background:#B88B41}[data-preview-color="#6F8568"] span{background:#6F8568}[data-preview-color="#3F7590"] span{background:#3F7590}[data-preview-color="#24342C"] span{background:#24342C}
.story-preview-status{margin:0;font-weight:600;color:var(--on-dark)}
.story-preview-note{grid-area:note;margin:4px 0 0;font-size:15px;color:var(--on-dark-muted)}
@media (max-width:700px){
 .story-preview{grid-template-columns:1fr;grid-template-areas:"controls" "board" "note"}
 .story-block-choices{grid-template-columns:repeat(3,minmax(0,1fr))}
 .story-block-choices button{flex-direction:column;justify-content:center;gap:6px;padding:10px 4px;text-align:center;font-size:15px}
 .story-preview fieldset{margin-bottom:14px}
}

/* ===== Quilt Studio bridge: a design wall. The grid is the one on Bre's cutting mat and on every
   flannel design wall; the preview is real engine output. Playful, but the tool itself lives elsewhere. ===== */
.studio-wall{padding-bottom:clamp(48px,7vw,96px);
 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))}
.studio-hero{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,5vw,72px);align-items:start;margin-top:clamp(18px,3vw,36px)}
.studio-copy h1,.studio-copy h2{color:inherit}
.studio-wall .studio-copy h1{font-size:clamp(3rem,1.6rem + 3.6vw,5.4rem);line-height:.92;letter-spacing:-.03em}
.studio-wall .studio-copy .lead{margin-top:18px;color:var(--ink-2)}
.studio-copy p:not(.kicker){font-size:18px;margin-top:14px}
.studio-launch{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:24px}
.studio-launch .button{min-height:56px;padding:0 26px;font-size:17px}
.story-storage-note{font-size:15px;color:var(--muted);margin-top:14px}
.home-studio .studio-copy p{color:var(--ink-2)}
.studio-layout{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:center}
@media (max-width:860px){.studio-layout,.studio-hero{grid-template-columns:1fr}}
/* On the light wall, the preview's controls become fabric swatches pinned beside the board. */
.studio-wall .story-quilt-board{background:#fffdf8;box-shadow:0 2px 0 rgba(29,58,46,.08),0 34px 60px -30px rgba(29,58,46,.5)}
.studio-wall .story-preview legend,.studio-wall .story-preview-note{color:var(--muted)}
.studio-wall .story-block-choices button{border-color:var(--line-strong);background:var(--white);color:var(--ink)}
.studio-wall .story-block-choices button:hover{border-color:var(--forest)}
.studio-wall .story-block-choices button[aria-pressed="true"]{border-color:var(--forest);background:var(--white);box-shadow:inset 0 -4px 0 var(--rose)}
.studio-wall .story-block-choices svg{outline-color:var(--line)}
.studio-wall .story-color-choices button{color:var(--ink)}
.studio-wall .story-color-choices span{border-radius:3px;width:44px;height:44px;border-color:rgba(29,58,46,.2)}
.studio-wall .story-color-choices b{color:var(--muted)}
.studio-wall .story-color-choices button[aria-pressed="true"] span{box-shadow:0 0 0 3px color-mix(in oklab,var(--sage) 14%,var(--paper)),0 0 0 5px var(--forest)}
.studio-wall .story-color-choices button[aria-pressed="true"] b{color:var(--ink)}
.studio-wall .story-preview-status{color:var(--ink);font-size:18px}
.studio-evidence{padding-top:clamp(52px,7vw,92px)}
.evidence-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start}
.evidence-pair figure,.about-page figure{margin:0}
.evidence-pair img{width:100%}
figcaption{margin-top:8px;font-size:15px;color:var(--muted)}
.studio-after{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 24px;margin-top:40px;padding-top:22px;border-top:1px solid var(--line)}
.studio-after p{margin:0;font:400 1.3rem/1.4 var(--display);max-width:48ch}
.studio-after-links{display:flex;flex-wrap:wrap;gap:8px 24px}
@media (max-width:860px){.evidence-pair{grid-template-columns:1fr}}

/* ===== Shop: the seller mirror. One shelf per Etsy section; the interest comes from the inventory,
   and every mat is tinted with colour measured from its own piece. Motion only when asked (sorting). ===== */
.shop-page{padding-top:clamp(10px,1.6vw,22px)}
.shop-heading{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:end;gap:10px clamp(24px,4vw,56px);padding:12px 0 22px}
.shop-heading .kicker{margin-bottom:6px}
.shop-heading h1{font-size:clamp(2.6rem,1.4rem + 3.4vw,4.8rem);line-height:.92;letter-spacing:-.03em}
.shop-intro{margin:0 0 4px;max-width:50ch;color:var(--muted)}
.shop-observed{margin:6px 0 0;font-size:15px;color:var(--muted)}
.shop-observed strong{color:var(--ink);font-weight:600}
.shop-browse{position:sticky;top:var(--header);z-index:20;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px 24px;padding:12px 0;background:var(--paper);border-block:1px solid var(--line);box-shadow:0 0 0 100vmax var(--paper);clip-path:inset(0 -100vmax)}
.category-nav{display:flex;flex-wrap:wrap;gap:6px}
.category-nav a{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 11px;border:1px solid var(--line-strong);border-radius:3px;text-decoration:none;font-weight:600;font-size:15px;white-space:nowrap;background:var(--white)}
.category-nav a:hover{border-color:var(--forest)}
.category-nav a span{font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.category-nav a[aria-current="page"]{background:var(--forest);border-color:var(--forest);color:var(--on-dark);box-shadow:inset 0 -3px 0 var(--rose)}
.category-nav a[aria-current="page"] span{color:var(--on-dark-muted)}
.browse-row{display:flex;align-items:center;gap:18px}
.result-count{margin:0;font-size:15px;color:var(--muted);white-space:nowrap}
.browse-disclosure summary{display:none}
.shop-tools{display:flex;gap:10px;align-items:center}
.shop-tools label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.shop-tools input,.shop-tools select{min-height:42px;padding:0 12px;border:1px solid var(--line-strong);border-radius:3px;background:var(--white);font-size:16px}
.shop-tools input{width:min(230px,100%)}
@media (min-width:821px){.shop-tools{align-items:end}.shop-tools>div{display:grid;gap:3px}.shop-tools label{position:static;width:auto;height:auto;overflow:visible;clip:auto;font-size:13px;font-weight:600;color:var(--muted)}}
.shelves{display:flex;flex-wrap:wrap;align-items:flex-start;gap:clamp(44px,5vw,68px) clamp(28px,3vw,44px);margin-top:clamp(28px,4vw,48px)}
.shelf{--tile:220px;flex:1 1 calc(var(--n) * var(--tile) + (var(--n) - 1) * 14px);min-width:min(100%,var(--tile))}
.n1{--n:1}.n2{--n:2}.n3{--n:3}.n4{--n:4}.n5{--n:5}.n6{--n:6}.n7{--n:7}.n8{--n:8}.n9{--n:9}.n10{--n:10}.n11{--n:11}.n12{--n:12}
.shelf-quilt,.shelf-runner{flex-basis:100%}
.shelf-quilt{--tile:270px}.shelf-runner{--tile:380px}.shelf-small{--tile:205px}
.shop-all .shelf-small .product-card{max-width:270px}
.shop-section .shelf.n1,.shop-section .shelf.n2,.shop-section .shelf.n3{--tile:340px}
.shop-section .shelf.n1 .product-card{max-width:420px}
.shelf-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding-bottom:10px;margin-bottom:18px;border-bottom:2px solid var(--ink)}
.shelf-head h2{font-size:clamp(1.55rem,1.15rem + 1.1vw,2.2rem)}
.shelf-key{align-self:center;width:15px;height:15px;margin-right:2px;background:linear-gradient(135deg,var(--p1) 50%,var(--p3) 50%);box-shadow:0 0 0 1px rgba(29,58,46,.16)}
.shelf-count{font:600 15px/1 var(--text);color:var(--muted);font-variant-numeric:tabular-nums}
.shelf-link{margin-left:auto;font-weight:600;font-size:15px;color:var(--forest);text-underline-offset:.25em}
.shelf-range{font-size:15px;color:var(--muted);font-variant-numeric:tabular-nums}
.shelf-count.is-filtered{color:var(--rose-ink)}
.shelf-link:hover{color:var(--rose-ink)}
.shelf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--tile),1fr));gap:28px 14px}
.shop-flat{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:28px 14px;margin-top:32px}
.shop-flat .kind-runner{grid-column:span 2}
.product-card{min-width:0}
.product-link{display:block;color:var(--ink);text-decoration:none}
.product-image{position:relative;aspect-ratio:1;overflow:hidden;background:color-mix(in oklab,var(--p1,#d9c9b3) 26%,var(--paper));transition:background-color .3s}
.product-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:3%}
.kind-small .product-image img{padding:0}
.kind-runner .product-image{aspect-ratio:2.35}
.kind-runner .product-image img{padding:4% 3%}
.product-link:hover .product-image{background:color-mix(in oklab,var(--p1,#d9c9b3) 40%,var(--paper))}
.card-alternate{clip-path:inset(0 100% 0 0);transition:clip-path .32s cubic-bezier(.4,0,.2,1)}
.product-link:hover .card-alternate.alternate-ready,.product-link:focus-visible .card-alternate.alternate-ready{clip-path:inset(0)}
.product-meta{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:10px}
.product-meta h3{font:600 16px/1.3 var(--text);letter-spacing:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.product-link:hover h3{color:var(--rose-ink)}
.product-price{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.product-category{margin:3px 0 0;font-size:14px;line-height:1.4;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kind-small .product-meta h3{font-size:15px}
/* On its own shelf a card does not repeat the shelf's name; in a sorted, mixed grid it does. */
.shelves .fact-section,.related-grid .fact-section{display:none}
.card-swatches{display:flex;align-items:center;gap:5px;margin-top:8px;max-width:100%;overflow:hidden}
.card-swatches img{width:30px;height:30px;object-fit:cover;object-view-box:inset(0 0 20% 0);border-radius:2px;box-shadow:0 0 0 1px rgba(29,58,46,.18)}
.card-swatches span{margin-left:3px;font-size:13px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.empty-results{padding:48px 0;text-align:center}
.empty-results h2{margin-bottom:8px}
.empty-results .button{margin:12px 16px 0 0}
.shop-handoff{margin:clamp(28px,4vw,40px) 0 0;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:15px}
.other-shelves{margin-top:clamp(48px,6vw,72px);padding-top:22px;border-top:2px solid var(--ink)}
.other-shelves h2{font-size:clamp(1.5rem,1.1rem + 1vw,2rem);margin-bottom:16px}
.other-shelves ul{list-style:none;margin:0 0 16px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.other-shelves li a{display:flex;align-items:center;gap:14px;padding:8px 14px 8px 8px;background:var(--white);color:var(--ink);text-decoration:none;box-shadow:inset 0 -4px 0 color-mix(in oklab,var(--p1) 85%,var(--ink))}
.other-shelves img{width:72px;height:72px;flex:none;object-fit:cover;background:color-mix(in oklab,var(--p1) 22%,var(--paper))}
.other-shelves strong{display:block;font:430 1.25rem/1.1 var(--display)}
.other-shelves li a>span>span{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.other-shelves li a:hover strong{color:var(--rose-ink)}
.shop-next{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:clamp(48px,6vw,72px)}
.shop-next .route{min-height:130px;background:var(--white)}
.shop-next .route-studio{background:var(--rose)}
@media (max-width:820px){.shop-next{grid-template-columns:1fr}.shop-next .route{min-height:96px}}
@media (max-width:1100px){.shop-heading{grid-template-columns:minmax(0,1fr) auto}.shop-about{grid-column:1 / -1;grid-row:2}
 .category-nav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);padding-right:24px}
 .category-nav::-webkit-scrollbar{display:none}}
@media (max-width:820px){
 .shop-heading{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:6px 12px;padding-bottom:12px}
 .shop-about{grid-column:1 / -1}
 .shop-heading h1{font-size:2.7rem}
 .shop-about{grid-row:auto}.shop-intro{display:none}.shop-observed{margin-top:0}
 .shop-heading .kicker,.shop-observed .facts-more{display:none}
 .shelf-head{margin-bottom:12px;padding-bottom:8px}.shelf-head h2{font-size:1.6rem}
 .shelf-link{margin-left:0;flex-basis:100%}
 .card-swatches{gap:4px}.card-swatches img{width:24px;height:24px}
 .shop-heading .browse-disclosure{grid-column:2;grid-row:1;text-align:right}
 .shop-heading .browse-disclosure[open]{grid-column:1 / -1;grid-row:3;text-align:left}
 .shop-observed{text-align:left;font-size:14px}
 .shop-browse{top:var(--header);grid-template-columns:1fr;padding:6px 0;gap:6px}
 .category-nav{margin-inline:calc(-1*var(--gutter));padding:0 calc(var(--gutter) + 24px) 2px var(--gutter)}
 .category-nav::-webkit-scrollbar{display:none}
 .browse-row{justify-content:space-between}
 .browse-disclosure{flex:1 1 auto;text-align:right}
 .browse-disclosure summary{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;border:1px solid var(--line-strong);border-radius:3px;font-weight:600;font-size:15px;cursor:pointer;list-style:none}
 .browse-disclosure summary::-webkit-details-marker{display:none}
 .plus::before{content:'+';font-size:18px;line-height:1}
 .browse-disclosure[open] .plus::before{content:'–'}
 .browse-disclosure[open]{flex-basis:100%}
 .shop-tools{margin-top:10px;text-align:left}
 .shop-tools>div{flex:1 1 150px}
 .shop-tools input{width:100%}
 .shelves{gap:40px}
 .shelf{flex-basis:100%}
 .shelf-grid,.shop-flat{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}
 .shelf-runner .shelf-grid .kind-runner,.shop-flat .kind-runner{grid-column:1 / -1}
 .product-meta{display:block;margin-top:9px}
 .product-meta h3{font-size:15px}
 .product-price{display:block;margin-top:2px;font-size:15px}
 .product-category{font-size:13.5px}
}

/* ===== Product pages: one data model, three object families. ===== */
.product-page .breadcrumbs{padding-top:14px}
/* Product pages: breadcrumb left, section pager right (previous, position, next). */
.crumb-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:4px 16px}
.product-pager{display:flex;align-items:center;gap:4px;margin-left:auto;font-size:15px}
.product-pager a{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px;border:1px solid var(--line-strong);border-radius:3px;background:var(--white);color:var(--ink);font-weight:600;text-decoration:none}
.product-pager a:hover{border-color:var(--forest);color:var(--rose-ink)}
.pager-count{padding:0 8px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.inspect{margin-top:10px}
.product-layout{display:grid;grid-template-columns:minmax(0,7fr) minmax(320px,5fr);gap:clamp(24px,4vw,64px);align-items:start}
.gallery{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"main" "thumbs" "desc" "scope";gap:12px;min-width:0}
.gallery-main{grid-area:main;position:relative;overflow:hidden;background:color-mix(in oklab,var(--p1,#d9c9b3) 16%,var(--paper))}
.gallery-viewport{display:flex;aspect-ratio:1;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.gallery-viewport::-webkit-scrollbar{display:none}
.gallery-slide{position:relative;flex:0 0 100%;min-width:0;scroll-snap-align:start;overflow:hidden}
.gallery-zoom{position:relative;display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in}
.gallery-viewport:focus-visible,.gallery-zoom:focus-visible{outline-offset:-4px}
.category-nav a:focus-visible,.gallery-thumb:focus-visible{outline-offset:-3px}
.gallery-zoom img{width:100%;height:100%;object-fit:contain}
.zoom-hint{position:absolute;left:12px;bottom:12px;padding:6px 10px;border-radius:3px;background:rgba(255,251,245,.95);font-weight:600;font-size:14px;opacity:0;transition:opacity .2s}
.gallery-zoom:hover .zoom-hint,.gallery-zoom:focus-visible .zoom-hint{opacity:1}
.gallery-count{position:absolute;left:12px;top:12px;margin:0;padding:5px 11px;border-radius:3px;background:rgba(255,251,245,.95);font-weight:600;font-size:14px;font-variant-numeric:tabular-nums;pointer-events:none}
.gallery-arrows{position:absolute;right:12px;bottom:12px;display:flex;gap:8px}
.gallery-arrows button{display:grid;place-items:center;width:46px;height:46px;border:0;border-radius:50%;background:rgba(255,251,245,.97);font-size:20px;box-shadow:0 1px 3px rgba(29,58,46,.25)}
.gallery-thumbnails{grid-area:thumbs;display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.gallery-thumb{flex:none;display:grid;gap:5px;justify-items:center;width:84px;padding:4px 4px 6px;border:1.5px solid transparent;border-radius:3px;background:transparent;color:var(--muted)}
.gallery-thumb img{width:74px;height:74px;object-fit:cover;background:var(--mat)}
.thumb-label{min-height:2.3em;font:600 11.5px/1.15 var(--text);letter-spacing:.06em;text-transform:uppercase;text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gallery-thumb:hover{color:var(--ink)}
.gallery-thumb[aria-pressed="true"]{border-color:var(--forest);background:var(--white);color:var(--ink)}
.image-description{grid-area:desc;margin:0;font-size:15px;color:var(--muted)}
.gallery-scope{grid-area:scope;margin:0;font-size:15px;font-weight:600;color:var(--ink-2)}
.product-story{position:sticky;top:calc(var(--header) + 20px);min-width:0}
.product-section{margin:0 0 12px;font-weight:600;font-size:15px;color:var(--muted)}
.product-section a{color:var(--muted)}
.product-story h1{font-size:clamp(2.2rem,1.3rem + 2.2vw,3.6rem);line-height:1;letter-spacing:-.025em}
.title-descriptor{display:block;margin-top:12px;font:400 clamp(1.05rem,.95rem + .35vw,1.25rem)/1.35 var(--text);letter-spacing:0;color:var(--muted)}
.product-story .product-price{display:block;margin:20px 0;font:700 clamp(1.6rem,1.3rem + .8vw,2rem)/1 var(--text);font-variant-numeric:tabular-nums}
.product-story .product-price span{font:500 15px var(--text);color:var(--muted);margin-left:4px}
.product-facts{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:10px 22px;margin:0 0 22px;padding:14px 0;border-block:1px solid var(--line)}
.product-facts div{display:contents}
.product-facts dt{font-weight:600;font-size:15px;color:var(--muted);padding-top:1px}
.product-facts dd{margin:0;text-wrap:pretty}
.product-facts .nw{white-space:nowrap}
.buy-button{width:100%;min-height:56px;font-size:17px}
.checkout-note{margin:9px 0 18px;font-size:14px;color:var(--muted)}
.inspect-hint{margin:0;padding:12px 14px;border-left:4px solid color-mix(in oklab,var(--p1) 80%,var(--paper));background:var(--white);font-size:15px;color:var(--ink-2)}
.product-choices{margin:6px 0 22px}
.product-choices h2{font:600 16px/1.3 var(--text);letter-spacing:0;margin-bottom:10px}
.product-choices h2 span{font-weight:500;color:var(--muted)}
.fabric-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px;padding:0}
.fabric-chip{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:4px 12px 4px 4px;border:1px solid var(--line-strong);border-radius:3px;background:var(--white);font-weight:500;font-size:15px;text-align:left}
.fabric-chip img{width:36px;height:36px;object-fit:cover;border-radius:2px}
.thumb-fabric img,.fabric-chip img{object-view-box:inset(0 0 20% 0)}
span.fabric-chip{padding-left:12px}
button.fabric-chip:hover{border-color:var(--forest)}
.fabric-chip.is-shown{border-color:var(--forest);box-shadow:inset 0 0 0 1px var(--forest);font-weight:600}
.product-choices p{margin:0;font-size:14px;color:var(--muted)}
.product-more{display:grid;grid-template-columns:minmax(0,7fr) minmax(280px,5fr);gap:clamp(24px,4vw,64px);align-items:start;margin-top:clamp(40px,5vw,72px)}
.description-details{border-top:1px solid var(--line)}
.description-details:last-of-type{border-bottom:1px solid var(--line)}
.description-details summary{display:flex;align-items:center;justify-content:space-between;min-height:56px;font:430 1.3rem/1.2 var(--display);cursor:pointer;list-style:none}
.description-details summary::-webkit-details-marker{display:none}
.description-details summary::after{content:'+';font:400 24px/1 var(--text)}
.description-details[open] summary::after{content:'–'}
.description-details .prose,.description-details>p{padding-bottom:18px;font-size:17px;max-width:66ch}
.prose p{margin:0 0 .9em}
.prose .etsy-h{margin:1.4em 0 .5em;font:600 12.5px/1.3 var(--text);letter-spacing:.16em;text-transform:uppercase;color:var(--sage-ink)}
.prose .etsy-h:first-child{margin-top:0}
.more-side{display:grid;gap:16px}
.maker-note{display:grid;grid-template-columns:120px minmax(0,1fr);gap:4px 16px;align-items:start;padding:16px;background:var(--white)}
.maker-note img{grid-row:span 3;width:120px;aspect-ratio:1;object-fit:cover}
.maker-note p{margin:0}
.maker-links{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:8px!important;font-size:15px}
.journal-link{display:grid;gap:4px;padding:18px 20px;background:color-mix(in oklab,var(--p1) 16%,var(--paper));border-left:5px solid color-mix(in oklab,var(--p1) 85%,var(--ink));color:var(--ink);text-decoration:none}
.journal-link .kicker{margin:0}
.journal-link.has-photo{grid-template-columns:120px minmax(0,1fr);gap:16px;align-items:center;padding:12px 16px 12px 12px}
.journal-photo img{width:120px;height:120px;object-fit:cover}
.journal-text{display:grid;gap:4px}
.journal-link strong{font:430 1.5rem/1.1 var(--display)}
.journal-go{font-weight:600;color:var(--forest)}
.journal-link:hover strong{color:var(--rose-ink)}
.archive-product-view{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(20px,4vw,56px);margin-top:clamp(56px,7vw,88px);padding-top:28px;border-top:2px solid var(--ink)}
.archive-product-view-copy p{color:var(--muted);margin-top:10px}
.archive-product-view-photos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.archive-product-view-photos figure{margin:0}
.archive-product-view-photos img{width:100%}
.related{margin-top:clamp(56px,7vw,88px);padding-top:26px;border-top:2px solid var(--ink)}
.related-grid{--tile:200px;grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:820px){.related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Long Etsy titles (40+ characters) step down one size so the decision stays in the first screen; the title itself is unchanged. */
.product-story h1.title-long{font-size:clamp(1.8rem,1.1rem + 1.5vw,2.6rem)}
/* Quilts: the whole object first, large, on a stage tinted with the quilt's own colours. */
.product-quilt .inspect{padding-block:clamp(18px,2.6vw,36px) clamp(28px,3.4vw,48px);
 background:linear-gradient(to top left,color-mix(in oklab,var(--p2) 26%,var(--paper)) 50%,transparent 50.2%) right bottom/min(46vw,720px) 100% no-repeat,
 color-mix(in oklab,var(--p1) 13%,var(--paper))}
.product-quilt .product-layout{grid-template-columns:minmax(0,8fr) minmax(300px,4fr)}
.product-quilt .gallery-main{background:color-mix(in oklab,var(--p1) 22%,var(--paper));box-shadow:0 40px 70px -48px rgba(28,32,24,.55)}
.product-quilt .gallery-viewport{aspect-ratio:auto;height:min(calc(100svh - var(--header) - 250px),860px);min-height:420px}
.product-quilt .gallery-thumb{width:81px}.product-quilt .gallery-thumb img{width:71px;height:71px}
.product-quilt .product-story{padding:30px 28px 26px;background:var(--white);box-shadow:0 26px 44px -30px rgba(28,32,24,.45)}
.product-quilt .product-story::before{content:'';position:absolute;left:0;right:0;top:0;height:8px;background:linear-gradient(90deg,var(--p1) 0 38%,var(--p2) 38% 66%,var(--p3) 66% 86%,var(--p4) 86%)}
.loupe{position:absolute;z-index:3;width:230px;height:230px;border-radius:4px;pointer-events:none;background-repeat:no-repeat;box-shadow:0 0 0 3px var(--white),0 18px 34px -10px rgba(0,0,0,.45);opacity:0;transition:opacity .15s}
.loupe.is-on{opacity:1}

/* Small goods: a faster decision. Smaller photo, fabric swatches up front. */
.product-small .inspect{padding-block:clamp(16px,2.4vw,32px);background:color-mix(in oklab,var(--p1) 10%,var(--paper))}
.product-small .product-layout{grid-template-columns:minmax(0,6fr) minmax(320px,5fr)}
/* Wide screens show every fabric view at once; phones keep one scrolling row so the decision stays near the top. */
@media (min-width:821px){.product-small .gallery-thumbnails{flex-wrap:wrap;overflow:visible}}
.product-small .fabric-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}
.product-small .fabric-chip{width:100%}
.product-small .product-story{padding-top:4px}
.product-small .product-story h1{font-size:clamp(2rem,1.3rem + 1.6vw,3rem)}

/* Runners: read across the page. */
.product-runner .product-layout{grid-template-columns:minmax(0,1fr);row-gap:32px}
.product-runner .gallery-thumb{width:126px}.product-runner .gallery-thumb img{width:116px;height:52px}
.product-runner .product-story{order:-1;padding-bottom:6px}
.product-runner .product-story h1{font-size:clamp(2rem,1.3rem + 1.6vw,3rem)}
.product-runner .product-story .product-price{margin:12px 0}
.product-runner .gallery-viewport{aspect-ratio:var(--ar,2.6)}
.product-runner .product-story{position:static;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(24px,5vw,72px);align-items:start}
.product-runner .product-story>:not(.product-facts):not(.buy-button):not(.checkout-note){grid-column:1}
.product-runner .product-facts,.product-runner .buy-button,.product-runner .checkout-note{grid-column:2}
.product-runner .product-facts{grid-row:1 / span 3}
@media (max-width:980px){.product-more{grid-template-columns:minmax(0,1fr)}}
@media (max-width:820px){
 .product-pager{font-size:14px}.product-pager a{min-height:32px;padding:0 10px}
 @media (max-width:400px){.pager-count{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}.pager-word{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
 .product-layout,.product-quilt .product-layout,.product-small .product-layout,.product-runner .product-story{grid-template-columns:minmax(0,1fr)}
 .product-layout{gap:16px}
 .inspect{margin-top:6px}
 .product-quilt .inspect{padding-block:0 24px;background:color-mix(in oklab,var(--p1) 12%,var(--paper))}
 /* Empty caption rows must not add gaps above the decision. */
 .gallery{margin-inline:calc(-1*var(--gutter));row-gap:0}
 .gallery-thumbnails{margin-top:10px}
 .gallery-scope{margin-top:8px}
 .gallery-thumbnails{padding-inline:var(--gutter)}
 .image-description,.gallery-scope{padding-inline:var(--gutter)}
 .image-description{display:none}
 .product-quilt .gallery-viewport{height:auto;min-height:0;aspect-ratio:8/7}
 .gallery-thumb{width:72px}.gallery-thumb img{width:62px;height:62px}
 .product-runner .gallery-viewport{aspect-ratio:1.6}
 .product-story,.product-quilt .product-story{position:static}
 /* Phones: the quilt first, then its name, price and the Etsy button inside the first screen; facts follow. */
 .product-quilt .product-story{display:flex;flex-direction:column;padding:20px 18px 20px}
 .product-quilt .product-facts{order:1;margin:0}
 .product-quilt .inspect-hint{order:2;margin-top:16px}
 /* Small goods: price and the Etsy button share one row, so the decision sits under the photo. */
 .product-small .inspect{padding-top:6px}
 .product-small .product-story{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:center}
 .product-small .product-story>*{grid-column:1 / -1}
 .product-small .product-story .product-price{grid-column:1;margin:0}
 .product-small .product-story .buy-button{grid-column:2;margin:10px 0;padding:0 14px;font-size:16px}
 .product-runner .product-story{display:flex;flex-direction:column}
 .product-runner .product-facts{order:1;margin:0}
 .product-runner .gallery-thumb{width:104px}.product-runner .gallery-thumb img{width:96px;height:44px}
 .product-story h1{font-size:2.3rem}
 .product-story h1.title-long{font-size:1.6rem}
 /* Small-good thumbnails are one-line labels (Fabric 1, Inside); no second line is reserved on phones. */
 /* Phones: fabric thumbnails are named on the photo's own pill and in the fabric list, so they drop their labels. */
 .product-small .thumb-label{display:none}
 .product-story .product-price{margin:14px 0}
 .archive-product-view{grid-template-columns:1fr}
 .maker-note{grid-template-columns:88px minmax(0,1fr)}.maker-note img{width:88px}
}

@media (min-width:700px) and (max-width:820px){.gallery-viewport,.product-quilt .gallery-viewport{max-height:52svh}}

/* ===== Journal: the quiet room. Reading first, photographs where they exist, no motion. ===== */
.journal-head{padding:14px 0 clamp(28px,4vw,48px)}
.journal-head .kicker{margin-top:18px}
.journal-head h1{font-size:clamp(2.8rem,1.4rem + 3.8vw,5.4rem);line-height:.95;letter-spacing:-.03em;max-width:12em}
.journal-head .lead{margin-top:18px;max-width:44ch}
.journal-lead a{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(22px,4vw,56px);align-items:center;color:var(--ink);text-decoration:none}
.lead-photo img{width:100%;aspect-ratio:3/2;object-fit:cover}
.lead-text{display:grid;gap:10px;padding-bottom:6px}
.lead-title{font:430 clamp(2.4rem,1.5rem + 2.4vw,3.8rem)/1 var(--display);letter-spacing:-.025em}
.journal-lead a:hover .lead-title{color:var(--rose-ink)}
.ji-date{font:600 12.5px/1.3 var(--text);letter-spacing:.16em;text-transform:uppercase;color:var(--sage-ink)}
.ji-dek{font-size:17px;line-height:1.5;color:var(--ink-2)}
.journal-index-title{margin:clamp(56px,7vw,96px) 0 0;padding-bottom:12px;border-bottom:2px solid var(--ink);font-size:1.4rem}
.journal-index{list-style:none;margin:0;padding:0}
.journal-index a{display:grid;grid-template-columns:170px minmax(0,1fr) 220px;gap:6px 32px;align-items:start;padding:24px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
.journal-index .ji-date{padding-top:9px}
.ji-text{display:grid;gap:6px;max-width:62ch}
.ji-title{font:430 clamp(1.5rem,1.2rem + .9vw,2.1rem)/1.1 var(--display);letter-spacing:-.015em}
.ji-type{font-size:14px;color:var(--muted)}
.ji-photo{grid-column:3}
.ji-photo img{width:100%;aspect-ratio:4/3;object-fit:cover}
.journal-index a:hover .ji-title{color:var(--rose-ink)}
.journal-article{padding-bottom:8px}
.article-head{width:min(820px,100% - 2*var(--gutter));margin:0 auto;padding:14px 0 30px}
.article-head .ji-date{display:block;margin-top:20px}
.article-head h1{font-size:clamp(2.8rem,1.5rem + 3.4vw,5rem);line-height:.96;letter-spacing:-.03em;margin-top:12px}
.article-head .lead{margin-top:18px}
.article-photo{width:min(1120px,100% - 2*var(--gutter));margin:0 auto 40px}
.article-photo img{width:100%}
.article-body{width:min(680px,100% - 2*var(--gutter));margin:0 auto;font:400 1.24rem/1.65 var(--display);color:var(--ink)}
.article-body:not(.no-cap) p:first-child::first-letter{float:left;margin:.08em .08em 0 0;font-size:3.4em;line-height:.8;color:var(--raspberry)}
.article-listing{width:min(680px,100% - 2*var(--gutter));margin:40px auto 0;padding-top:20px;border-top:2px solid var(--ink)}
.article-listing .product-card{max-width:none}
@media (min-width:600px){.article-listing .product-link{display:grid;grid-template-columns:220px minmax(0,1fr);gap:0 22px;align-content:center}.article-listing .product-image{grid-row:span 3}.article-listing .product-link>:not(.product-image){grid-column:2}.article-listing .product-meta{margin-top:0;justify-content:flex-start;gap:16px}}
.article-nav{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center;width:min(1120px,100% - 2*var(--gutter));margin:clamp(48px,6vw,80px) auto 0;padding-top:20px;border-top:1px solid var(--line)}
.article-neighbour{display:grid;gap:4px;color:var(--ink);text-decoration:none}
.article-neighbour:last-child{text-align:right}
.article-neighbour span{font-size:14px;color:var(--muted)}
.article-neighbour strong{font:430 1.3rem/1.2 var(--display)}
.article-neighbour:hover strong{color:var(--rose-ink)}
@media (max-width:820px){
 .journal-lead a{grid-template-columns:1fr}
 .journal-index a{grid-template-columns:minmax(0,1fr) 110px;gap:6px 16px}
 .journal-index .ji-date{grid-column:1 / -1;padding-top:0}
 .ji-photo{grid-column:2;grid-row:2}
 .article-nav{grid-template-columns:1fr 1fr}.article-nav .text-link{grid-column:1 / -1;grid-row:2}
}

/* Gallery: finished work over time. */
.page-head{max-width:800px;padding:16px 0 30px}
.page-head .lead{margin-top:14px}
.archive-card a{display:block;color:var(--ink);text-decoration:none}
.card-photo{display:block;overflow:hidden}
.card-photo img{width:100%;height:100%}
.archive-card .card-photo{aspect-ratio:4/3;background:color-mix(in oklab,var(--p1,#d9c9b3) 22%,var(--paper))}
.archive-card .card-photo img{object-fit:contain;padding:3%}
.archive-card.is-live .card-meta{color:var(--forest)}
.gallery-note{margin:10px 0 14px;font-size:15px;color:var(--muted)}
.archive-card a:hover h2{color:var(--rose-ink)}
.card-meta{margin:14px 0 6px;font-weight:600;font-size:14px;color:var(--muted)}
.archive-card h2{font-size:1.5rem;margin-bottom:8px}
.archive-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 22px;margin-top:8px}
.archive-card .card-meta{display:block}
.archive-card .text-link{display:inline-block;margin-top:4px}
@media (max-width:980px){.archive-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.archive-grid{gap:24px 12px}.archive-card h2{font-size:1.15rem}.archive-card .card-meta{margin-top:8px;font-size:13px}.archive-card .text-link{font-size:14px}}

/* Care, FAQ, Contact, 404 — quiet and short. */
.info-page{padding-bottom:8px}
.info-columns{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,80px);align-items:start;margin-top:18px}
.info-head{position:sticky;top:calc(var(--header) + 24px)}
.info-head h1{font-size:clamp(2.2rem,1.5rem + 2.2vw,3.35rem)}
.info-head .lead{margin-top:16px}
.faq-item,.care-item,.contact-routes li{padding:22px 0;border-top:1px solid var(--line)}
.faq-item:first-child,.care-item:first-child,.contact-routes li:first-child{border-top:0;padding-top:4px}
.faq-item h2,.care-item h2,.contact-routes h2{font-size:1.4rem;margin-bottom:8px}
.faq-jump{display:grid;margin-top:24px;border-top:1px solid var(--line)}
.faq-jump a{display:flex;align-items:center;min-height:44px;padding:6px 0;border-bottom:1px solid var(--line);font-weight:600;color:var(--ink);text-decoration:none}
.faq-jump a:hover{color:var(--rose-ink)}
.faq-item{scroll-margin-top:calc(var(--header) + 20px)}
.faq-item:target{box-shadow:inset 5px 0 0 var(--rose);padding-left:18px}
.care-item h2{display:flex;align-items:center;gap:10px}
.care-item .text-link{display:inline-block;margin-top:12px}
/* Contact: three routes as cards across the page, bound like the Meet Bre route cards. */
.info-contact .info-columns{grid-template-columns:minmax(0,1fr)}
.info-contact .info-head{position:static;max-width:64ch}
.info-contact .contact-routes{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.info-contact .contact-routes li,.info-contact .contact-routes li:first-child{display:flex;flex-direction:column;align-items:flex-start;padding:24px;border:0;background:var(--white);box-shadow:inset 0 -6px 0 var(--coral)}
.info-contact .contact-routes li:first-child{box-shadow:inset 0 -6px 0 var(--rose)}
.info-contact .contact-routes .button{margin-top:auto}
.info-contact .contact-routes p{margin-bottom:18px}
/* 404: tinted with Mirage's own colours; the photograph is a way into the shop. */
.info-missing{margin-bottom:calc(-1*clamp(56px,8vw,104px));padding-bottom:clamp(40px,6vw,72px);background:color-mix(in oklab,var(--p1) 13%,var(--paper))}
.missing-photo a{position:relative;display:block;color:var(--ink);text-decoration:none}
.missing-photo .section-label{position:absolute;left:12px;bottom:12px;display:grid;gap:1px;padding:12px 16px 9px;background:#fbf6ee;box-shadow:0 12px 22px -14px rgba(28,32,24,.6)}
.missing-photo .section-label::before{content:'';position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(90deg,var(--p1) 0 38%,var(--p2) 38% 66%,var(--p3) 66% 86%,var(--p4) 86%)}
.missing-photo .section-name{font:430 1.5rem/1.1 var(--display);margin-top:4px}
.missing-photo a:hover .section-name{color:var(--rose-ink)}
.missing-shelves{margin-top:30px}
.missing-shelves .menu-sections{border:0;padding-top:4px}
.missing-shelves .menu-sections a{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 10px;border:1px solid var(--line-strong);border-radius:3px;background:var(--white);color:var(--ink);font:600 15px/1.15 var(--text);text-decoration:none}
.missing-shelves .menu-sections a:hover{border-color:var(--forest)}
.faq-item p,.care-item p,.contact-routes p{margin:0;color:var(--ink-2)}
.contact-routes{list-style:none;margin:0;padding:0}
.contact-routes .button{margin-top:14px}
.info-aside{margin:34px 0 0;color:var(--muted)}
.info-care .info-aside{margin-top:12px;padding-top:22px;border-top:1px solid var(--line)}
.missing-layout{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,5vw,72px);align-items:center;padding-top:clamp(28px,5vw,64px)}
.missing-layout .info-head{position:static}
.contact-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.missing-photo{margin:0}
.missing-photo img{width:100%;border-radius:3px}
@media (max-width:860px){.info-columns,.missing-layout{grid-template-columns:minmax(0,1fr)}.info-head{position:static}.info-contact .contact-routes{grid-template-columns:1fr}.contact-actions .button{flex:1 1 200px}}

/* Enlarged photograph */
#image-dialog{max-width:min(96vw,1200px);max-height:94vh;padding:0;border:0;border-radius:4px;background:var(--paper)}
#image-dialog::backdrop{background:rgba(16,28,22,.82)}
#image-dialog img{max-height:82vh;width:auto;margin:auto}
#image-dialog p{margin:0;padding:10px 16px 14px;font-size:15px}
.dialog-close{position:absolute;top:10px;right:10px;min-height:42px;padding:0 14px;border:0;border-radius:4px;background:var(--white);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.2)}



.info-head h1{font-size:clamp(1.9rem,1.4rem + 1.4vw,2.6rem)}
.page-head h1{font-size:clamp(2rem,1.4rem + 1.7vw,2.9rem)}

/* ===== Meet Bre: the most human page. A candid photograph with a label sewn on, then the
   worktable, where every finished step becomes a strip beside the next, like strip piecing. ===== */
.threshold-scene{height:min(66svh,720px);min-height:420px;overflow:hidden;background:var(--mat)}
.threshold-scene img{width:100%;height:100%;object-fit:cover;object-position:58% 26%}
.threshold-row{position:relative;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,4fr);gap:clamp(24px,5vw,72px);align-items:end;margin-top:-110px}
.threshold-label{position:relative;padding:36px 38px 32px;background:var(--white);box-shadow:0 34px 56px -36px rgba(28,32,24,.6)}
.threshold-label::before{content:'';position:absolute;left:0;right:0;top:0;height:9px;background:linear-gradient(90deg,var(--rose) 0 38%,var(--coral) 38% 60%,var(--sage) 60% 86%,var(--blush) 86%)}
.threshold-label .breadcrumbs{padding:0;margin-bottom:18px}
.threshold h1{font-size:clamp(3rem,1.3rem + 4vw,5.6rem);line-height:.94;letter-spacing:-.032em}
.threshold h1 em{display:block;font-style:italic;font-weight:370;color:var(--raspberry)}
.threshold-label>p:not(.kicker){margin:18px 0 0;font-size:18px;color:var(--ink-2);max-width:46ch}
.threshold-aside{padding-bottom:30px}
.threshold-aside p{margin:0 0 10px;color:var(--ink-2);font-size:18px}
.threshold-aside .threshold-small{font:italic 400 1.2rem/1.35 var(--display);color:var(--raspberry)}

.process{margin-top:clamp(64px,9vw,120px)}
.process-stage{display:grid;grid-template-columns:minmax(290px,4fr) minmax(0,8fr);gap:clamp(24px,4vw,60px);align-items:start}
.process-copy h2{font-size:clamp(2.3rem,1.4rem + 2.2vw,3.6rem);letter-spacing:-.025em}
.process-invite{margin:12px 0 22px;color:var(--muted);max-width:36ch}
.steps{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.step{display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 10px;align-items:baseline;width:100%;padding:13px 6px 13px 0;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;color:var(--ink)}
.step-number{grid-row:span 2;font:430 21px/1 var(--display);color:var(--muted)}
.step-name{font:600 18px/1.2 var(--text)}
.step-text{display:none;font-size:16px;line-height:1.45;color:var(--ink-2)}
.step:hover .step-name{color:var(--rose-ink)}
.step[aria-pressed="true"]{box-shadow:inset 0 -3px 0 var(--rose)}
.step[aria-pressed="true"] .step-number{color:var(--rose-ink)}
.step[aria-pressed="true"] .step-text{display:block}
.process-strips{display:flex;height:min(74svh,720px);background:var(--paper)}
.strip{position:relative;margin:0;flex:0 0 0%;min-width:0;overflow:hidden;background:var(--mat);transition:flex-grow .85s var(--ease-seam),flex-basis .85s var(--ease-seam)}
/* A pressed seam between strips. */
.strip+.strip::before{content:'';position:absolute;left:0;top:0;bottom:0;width:6px;z-index:2;background:var(--paper)}
.strip[data-state="done"]{flex:0 0 7.5%}
.strip[data-state="active"]{flex:1 1 0%}
.strip img{width:100%;height:100%;object-fit:cover}
.pos-a img{object-position:50% 50%}.pos-b img{object-position:58% 42%}.pos-c img{object-position:64% 45%}.pos-d img{object-position:50% 36%}
.strip figcaption{position:absolute;left:18px;bottom:18px;z-index:2;max-width:calc(100% - 36px);margin:0;padding:8px 13px;background:var(--white);font-weight:600;font-size:15px;color:var(--ink);opacity:0;transition:opacity .3s}
.strip[data-state="active"] figcaption{opacity:1;transition-delay:.45s}
.cap-step{display:none}
.strip-number{position:absolute;left:50%;top:16px;z-index:2;translate:-50% 0;font:430 20px/1 var(--display);color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.6);opacity:0;transition:opacity .3s}
.strip[data-state="done"] .strip-number{opacity:1}
/* Wide screens with script: the stage holds still while the page scrolls through the six steps. */
.process.is-enhanced .process-track{height:calc(100svh + 6 * 32svh)}
.process.is-enhanced .process-stage{position:sticky;top:calc(var(--header) + 28px)}
/* Without script, and on narrow screens: every step in order, photograph and words together. */
.process:not(.is-enhanced) .steps,.process:not(.is-enhanced) .process-invite{display:none}
.process:not(.is-enhanced) .process-stage{grid-template-columns:minmax(0,1fr)}
.process:not(.is-enhanced) .process-strips{flex-direction:column;height:auto;gap:28px}
.process:not(.is-enhanced) .strip{flex:none;overflow:visible;background:none}
.process:not(.is-enhanced) .strip::before,.process:not(.is-enhanced) .strip-number{display:none}
.process:not(.is-enhanced) .strip img{aspect-ratio:4/3;height:auto}
.process:not(.is-enhanced) .strip figcaption{position:static;opacity:1;padding:12px 0 0;background:none;max-width:60ch;font-weight:400;font-size:17px}
.process:not(.is-enhanced) .cap-step{display:block}
.process:not(.is-enhanced) .cap-step b{display:block;font:430 1.45rem/1.2 var(--display);margin-bottom:4px}
.process:not(.is-enhanced) .cap-photo{display:block;margin-top:6px;font-size:15px;color:var(--muted)}

.finished{margin-top:clamp(64px,9vw,120px);padding-block:clamp(52px,7vw,96px);background:#2c4a4b;color:var(--on-dark)}
.finished .kicker{color:#bccdb2}
.finished-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:center}
.finished .story-video{position:relative;margin:0;max-width:420px;width:100%;justify-self:center}
/* The source frame carries pale side bars (x 160–919 of 1080); cropping to 759:1350 shows only the scene. No pixels are edited. */
.finished .story-video video{width:100%;height:auto;aspect-ratio:759/1350;object-fit:cover;background:#132b25;box-shadow:0 0 0 8px color-mix(in oklab,var(--rose) 80%,var(--forest))}
.finished .story-video figcaption{margin-top:16px;color:var(--on-dark-muted)}
.finished .story-video-toggle{position:absolute;left:18px;top:18px;min-height:44px;padding:0 16px;border:0;border-radius:3px;background:var(--white);color:var(--ink);font-weight:600}
.finished-copy h2{color:var(--on-dark);font-size:clamp(2.2rem,1.4rem + 2vw,3.4rem)}
.finished-copy>p:not(.kicker){margin:16px 0 0;color:var(--on-dark-muted);font-size:18px;max-width:46ch}
.routes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:28px}
.route{display:flex;flex-direction:column;justify-content:flex-end;min-height:170px;padding:24px;background:var(--paper);color:var(--ink);text-decoration:none;box-shadow:inset 0 -6px 0 var(--coral)}
.route strong{font:430 clamp(1.45rem,1.1rem + .9vw,1.9rem)/1.05 var(--display)}
.route>span{margin-top:8px;color:var(--muted)}
.route:hover strong{color:var(--rose-ink)}
.route-studio{background:var(--rose);color:#fff;box-shadow:inset 0 -6px 0 var(--raspberry)}
.route-studio>span{color:#fff}
.route-studio:hover strong{color:#fff;text-decoration:underline;text-underline-offset:.2em}
.bob{display:grid;grid-template-columns:130px minmax(0,1fr);gap:16px;align-items:center;margin:22px 0 0}
.bob img{width:130px;aspect-ratio:1;object-fit:cover;object-position:35% 60%}
.bob figcaption{margin:0;color:var(--on-dark-muted)}
@media (max-width:980px){
 .threshold-scene{height:auto;min-height:0;aspect-ratio:4/5}
 .threshold-scene img{object-position:62% 30%}
 .threshold-row{grid-template-columns:minmax(0,1fr);gap:18px;margin-top:-80px}
 .threshold-label{padding:30px 22px 24px}
 .finished-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:620px){.routes{grid-template-columns:1fr}.route{min-height:120px}.bob{grid-template-columns:110px 1fr}.bob img{width:110px}}

/* Motion: continuity only. Reduced motion and the pause control stop all of it. */
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
html[data-motion="paused"] *,html[data-motion="paused"] *::before,html[data-motion="paused"] *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}

/* Touch targets on phones: every primary control reaches 44 px (declared last so it wins over the family rules above). */
@media (max-width:860px){.category-nav a,.browse-disclosure summary,.shop-tools input,.shop-tools select,.dialog-close,.footer-links a,#motion-toggle{min-height:44px}}