/* The provenance rail belongs to the page, below the sticky navigation.
   One quiet pieced rule; the individual page families keep their own materials. */
.provenance{background:var(--paper);border-bottom:1px solid var(--line);position:relative}
.provenance-inner{width:min(1400px,100% - 2*var(--gutter));margin-inline:auto;padding:14px 0 13px}
.provenance-inner::before{content:'';position:absolute;left:0;top:0;width:100%;height:3px;background:linear-gradient(90deg,var(--rose) 0 12%,var(--sage) 12% 18%,var(--coral) 18% 21%,transparent 21%)}
.provenance-desktop{display:grid;grid-template-columns:1.12fr 1fr 1fr;gap:clamp(20px,4vw,64px)}
.provenance h2{font:600 11px/1.3 var(--text);letter-spacing:.15em;text-transform:uppercase;color:var(--sage-ink);margin-bottom:5px}
.provenance p{font:400 15px/1.35 var(--text);margin:0;max-width:51ch;text-wrap:pretty}
.provenance a{display:inline-flex;align-items:center;gap:7px;font:600 14px/1.5 var(--text);text-underline-offset:.25em;color:var(--forest)}
.provenance-desktop a{margin-top:6px}
.provenance a:hover{color:var(--rose-ink)}
.provenance-mobile{display:none}
/* Blue Ridge horizon: one static, decorative SVG behind the lower edge of the rail. It is sized by the
   viewport width (the art's own 25:1 shape), so wide screens see more of the same horizon, never a stretched one.
   The text keeps the paper above it; the pale far ridges only reach the link row. */
.provenance{isolation:isolate;--ridge:clamp(64px,100vw/25.45,110px)}
.provenance::after{content:'';position:absolute;inset:auto 0 0;height:var(--ridge);z-index:-1;pointer-events:none;background:url(/assets/provenance-ridge.svg) center bottom/cover no-repeat}
.provenance .provenance-inner{padding-bottom:calc(var(--ridge)*.58)}
.provenance-quiet{--ridge:clamp(34px,100vw/34,80px)}
.provenance-quiet::after{opacity:.62}
@media(forced-colors:active),print{.provenance::after{display:none}.provenance .provenance-inner{padding-bottom:13px}}
.info-faq .info-aside .text-link{display:inline-block;margin-inline-end:14px;min-height:44px;line-height:44px}
.page-home .nav-wrap,.page-home .provenance-inner{width:calc(100% - 2*var(--gutter));max-width:2240px}
/* Photo names and arrows sit below the image, clear of faces and printed fabric labels. */
.gallery-main{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center}
.gallery-viewport{grid-column:1/-1;grid-row:1;min-width:0}
.gallery-count{position:static;grid-column:1;grid-row:2;padding:8px 12px;background:none;border-radius:0}
.gallery-arrows{position:static;grid-column:2;grid-row:2;padding:4px 8px;gap:6px}
.gallery-arrows button{width:44px;height:44px}
@media(max-width:860px){
 .provenance-inner{padding:9px 0 10px}
 .provenance{--ridge:clamp(22px,100vw/15,40px)}
 .provenance::after{background-image:url(/assets/provenance-ridge-sm.svg)}
 .provenance .provenance-inner{padding-top:6px;padding-bottom:calc(var(--ridge)*.52)}
 .provenance-quiet{--ridge:clamp(18px,100vw/19,32px)}
 .provenance-desktop{display:none}
 .provenance-mobile{display:block;position:relative}
 .provenance .provenance-made{font-weight:600;font-size:15px;line-height:1.25;min-height:44px;max-width:calc(100% - 123px);display:flex;align-items:center}
 .provenance .provenance-short{font-size:13px;line-height:1.3;margin-top:3px;max-width:none;color:var(--ink-2)}
 .provenance summary{position:absolute;top:0;right:0;display:flex;align-items:center;gap:7px;width:113px;min-height:44px;font:600 13px/1.2 var(--text);color:var(--rose-ink);cursor:pointer;list-style:none}
 .provenance summary::-webkit-details-marker{display:none}
 .provenance summary>span{font-size:20px;font-weight:400}
 .provenance details[open] summary>span{font-size:0}
 .provenance details[open] summary>span::after{content:'−';font-size:20px}
 .provenance-more{padding-top:16px}
 .provenance-more p+p{margin-top:9px}
 .provenance-more nav{display:flex;flex-wrap:wrap;gap:0 22px;margin-top:6px}
 .provenance-more a{min-height:44px}
}
/* The introduction replaces repeated setup space, preserving quick access to inventory. */
@media(max-width:820px){
 .shop-page{padding-top:0}
 .shop-page>.breadcrumbs{padding-top:6px;font-size:14px;line-height:1.3}
 .shop-heading{padding:4px 0}
 .shop-heading h1{font-size:2.35rem}
 .shelves{margin-top:12px}
 .shelf-head{gap:2px 12px;margin-bottom:4px;padding-bottom:4px}
 .shop-browse{padding-block:2px}
 .product-section{display:none}
 .product-quilt .gallery-viewport,.product-small .gallery-viewport{height:calc(min(31svh,300px) - 16px);min-height:0;aspect-ratio:auto}
 .product-layout{gap:12px}
 .gallery-arrows{padding-block:0}
 .product-quilt .gallery-thumb{width:66px}
 .product-quilt .gallery-thumb img{width:56px;height:56px}
 .product-quilt .thumb-label{font-size:10.5px}
 .product-quilt .product-story{padding:14px 18px 18px}
 .product-story .product-price{margin-block:10px}
}
/* Two short intro lines, never a one-word orphan. */
.shop-intro{text-wrap:balance}
/* Final-gate fixes (two independent critics). Rail links share one baseline even when a column wraps. */
.provenance-desktop>div{display:flex;flex-direction:column;align-items:flex-start}
.provenance-desktop a{margin-top:auto;padding-top:6px}
@media(min-width:861px) and (max-width:999px){.provenance p{font-size:14px}.provenance-desktop{gap:20px}}
/* Home: a soft paper edge between the rail's pieced foreground and the stage's own pieced binding. */
.page-home .provenance::after{-webkit-mask-image:linear-gradient(to top,transparent,#000 9px);mask-image:linear-gradient(to top,transparent,#000 9px)}
/* 861-899px: the full nav fits on one line (Meet Bre and Quilt Studio used to wrap). */
.nav-main a{white-space:nowrap}
@media(min-width:861px) and (max-width:899px){.nav-main{gap:18px}.nav-main .nav-tool{padding-inline:10px 12px}}
/* Short desktop screens: keep the quilt page's Etsy button above the fold (1280x720). */
@media(min-width:861px) and (max-height:760px){.product-quilt .inspect{margin-top:0;padding-top:10px}}

/* 2026-10-03 phone pass (owner approved). The whole quilt as large as the screen allows: never cropped (contain), the
   pale pad only where the photo's shape differs from the frame. */
@media(max-width:820px){
 .product-quilt .gallery-viewport,.product-small .gallery-viewport{height:auto;aspect-ratio:1;max-height:66svh}
 body:has(.buy-bar) .site-footer{padding-bottom:76px}
}
/* Slim buy bar: phones only, shown by commerce.js once the main Etsy button has scrolled away. */
.buy-bar{display:none}
@media(max-width:820px){
 .buy-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;gap:12px;padding:10px var(--gutter,16px) calc(10px + env(safe-area-inset-bottom));
  background:var(--white,#fffdf8);border-top:1px solid rgba(28,40,32,.14);box-shadow:0 -10px 24px -18px rgba(16,28,22,.45);transform:translateY(110%);transition:transform .22s ease;visibility:hidden}
 .buy-bar.is-on{transform:none;visibility:visible}
 .buy-bar-text{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.2}
 .buy-bar-name{font-size:14px;color:var(--ink-2,#3d4842);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .buy-bar-price{font-weight:700;font-size:18px}
 .buy-bar-cta{min-height:46px;padding:0 16px;white-space:nowrap;font-size:16px}
}
@media(prefers-reduced-motion:reduce){.buy-bar{transition:none}}
/* Full-screen photo viewer: Close and the counter sit in a bar above the photo, never on it. */
#image-dialog{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:#101c16;color:#f6efe2;overflow:hidden}
#image-dialog[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
#image-dialog::backdrop{background:#101c16}
.zv-bar{display:flex;align-items:center;gap:12px;padding:calc(8px + env(safe-area-inset-top)) 12px 8px 16px}
.zv-count{font-weight:700;font-variant-numeric:tabular-nums}
.zv-hint{flex:1;font-size:14px;opacity:.75}
#image-dialog .dialog-close{position:static;min-height:44px;box-shadow:none}
.zv-stage{position:relative;overflow:hidden;touch-action:none;display:grid;place-items:center;cursor:zoom-in}
.zv-stage.is-zoomed{cursor:grab}
#image-dialog .zv-stage img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transform-origin:center;transition:transform .18s ease;user-select:none;-webkit-user-drag:none}
.zv-cap{margin:0;padding:10px 16px calc(12px + env(safe-area-inset-bottom));font-size:15px;line-height:1.4;opacity:.9}
.zv-prev,.zv-next{position:absolute;top:50%;width:48px;height:48px;margin-top:-24px;border:0;border-radius:50%;background:rgba(246,239,226,.9);color:#1c2620;font-size:20px;z-index:2}
.zv-prev{left:10px}.zv-next{right:10px}
@media(hover:none){.zv-prev,.zv-next{background:rgba(246,239,226,.55)}}
@media(prefers-reduced-motion:reduce){#image-dialog .zv-stage img{transition:none}}
#image-dialog .dialog-close{color:var(--ink,#22302a);background:var(--white,#fffbf5)}
@media(hover:hover) and (pointer:fine){.zv-hint{font-size:0}.zv-hint::after{content:"Click to zoom, drag to look around";font-size:14px}}

/* 2026-10-03 phone pass B (owner approved): easier to get around. */
@media(max-width:860px){
 .site-header{transition:transform .22s ease}
 .site-header.header-away{transform:translateY(-100%)}
 body.header-away .shop-browse{top:0}
 .shop-browse{transition:top .22s ease}
 /* Every link gets a 44px tap area; inline text links grow their hit area without moving the text around them. */
 .breadcrumbs{padding-top:2px;row-gap:0}
 .breadcrumbs a{display:inline-flex;align-items:center;min-height:44px}
 .product-pager a{min-height:44px;min-width:44px;justify-content:center}
 .text-link,.to-top,.footer-bottom a,.maker-links a,.info-aside a,.journal-go,.tag-details,.index-all{position:relative}
 .text-link::before,.to-top::before,.footer-bottom a::before,.maker-links a::before,.info-aside a::before,.journal-go::before,.tag-details::before,.index-all::before{content:"";position:absolute;inset:-11px -4px}
 .menu-more a{min-width:44px;padding-inline:12px}
 /* Category chips: they snap into place and the row ends with breathing room. */
 .category-nav{scroll-snap-type:x proximity;scroll-padding-inline:var(--gutter)}
 .category-nav a{scroll-snap-align:start}
 /* Photo labels and small grey notes stay readable. */
 .product-quilt .thumb-label,.thumb-label{font-size:12px}
}
@media(prefers-reduced-motion:reduce){.site-header,.shop-browse{transition:none}}
@media(max-width:860px){

 .breadcrumbs a{padding-inline:4px;margin-inline:-4px}
}

/* 2026-10-03 phone pass C: while a photo loads, its frame shows a soft linen tone instead of an empty dark block. */
.card-photo img,.journal-photo img,.strip-needle img,.strip-bre img,[data-journal-slug] img,.ji-photo img,.archive-card img,.product-card img,.maker-note img,.journal-lead img{background-color:#e9dfcf}

.zv-stage.is-gesturing img{transition:none!important}
.buy-bar{transition:transform .22s ease,visibility 0s linear .22s}.buy-bar.is-on{transition:transform .22s ease,visibility 0s}

/* QC 2026-10-03: the buy bar never sits over the open menu; tablets centre the square photo; breadcrumbs line up; loading tone on the Meet-Bre strip too. */
body.menu-is-open .buy-bar{display:none}
@media(max-width:820px){.product-quilt .gallery-viewport,.product-small .gallery-viewport{justify-self:center;width:100%}}
@media(max-width:860px){.breadcrumbs{align-items:center}.breadcrumbs>span{display:inline-flex;align-items:center;min-height:44px}}
.strip img,.strip-bre img,.strip-needle img{background-color:#e9dfcf}

/* First-visitor pass (2026-10-03): runners lead with the photo on phones like every other piece; journal entries
   without a photo use the full width; the visible email under "Ask about this piece". */
@media(max-width:820px){.product-runner .product-story{order:0}}
@media(max-width:820px){.journal-index li:not(:has(img)) a{grid-template-columns:minmax(0,1fr)}}
.ask-address{margin:6px 0 0;font-size:15px;color:var(--ink-2,#34423b)}
.ask-address strong{user-select:all;font-weight:600}

/* Owner-approved first-visitor pass (2026-10-03): the buying basics and the shop's Etsy rating sit by the button;
   phones keep one pair of arrows (the photo's); photo labels drop the shouty caps. */
.buy-basics{margin:10px 0 0;font-size:15px;line-height:1.45;color:var(--ink-2,#34423b)}
.trust-line{margin:6px 0 0;font-size:15px;line-height:1.45;color:var(--ink-2,#34423b)}
.trust-line a{color:inherit;font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em}
.trust-line span[aria-hidden]{color:#c9890b}
.trust-shop{margin-top:4px}
.trust-home{margin:6px 0 0}
.thumb-label{text-transform:none;letter-spacing:0}
.provenance-mobile .provenance-made a{margin-left:6px;font-weight:600;white-space:nowrap}
@media(max-width:820px){.crumb-row .product-pager{display:none}.thumb-label,.product-quilt .thumb-label{display:none}}
/* The one-line phone strip uses the full width (its old two-column layout reserved room for the removed toggle). */
.provenance .provenance-mobile .provenance-made{max-width:none;display:block;min-height:0;padding-block:10px;font-weight:600}
/* Desktop home: the hero card is laid out exactly, so the rating lives on shop and product pages there. */
@media(min-width:821px){.trust-home{display:none}}