:root{
  --cream:#F9F1DF;
  --cream-2:#F1E4C8;
  --paper:#FFFAEE;
  --ink:#141413;
  --red:#E1411D;
  --red-ink:#B3341A;
  --red-band:#C23A1B;
  --mustard:#EBAA1C;
  --muted:#5D554A;
  --desk:#E4DAC4;
  --night:#0F0B0A;
  --focus:#2F5BFF;
  --o-bg:#F9F1DF;
  --o-bg-2:#F1E4C8;
  --o-card:#FFFAEE;
  --o-ink:#141413;
  --o-muted:#5D554A;
  --o-line:rgba(20,20,19,.14);
  --o-edge:#141413;
  --o-field:#FFFAEE;
  --o-btn-bg:#141413;
  --o-btn-fg:#F9F1DF;
  --danger:#B3341A;
  --display:"Anton","Impact","Arial Narrow",sans-serif;
  --serif:"DM Serif Display",Georgia,"Times New Roman",serif;
  --hand:"Caveat Brush","Bradley Hand","Segoe Print",cursive;
  --ui:"Archivo","Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --desk:#0E0E0D; --focus:#8FA8FF;
    --o-bg:#141312; --o-bg-2:#1F1D1B; --o-card:#1F1D1B; --o-ink:#F4ECDA; --o-muted:#BDB4A4;
    --o-line:rgba(244,236,218,.14); --o-edge:rgba(244,236,218,.45); --o-field:#1A1917;
    --o-btn-bg:#EBAA1C; --o-btn-fg:#141413; --danger:#FF8C6E;
  }
  :root:not([data-theme="light"]) .phone{color-scheme:dark}
}
:root[data-theme="dark"]{
  --desk:#0E0E0D; --focus:#8FA8FF;
  --o-bg:#141312; --o-bg-2:#1F1D1B; --o-card:#1F1D1B; --o-ink:#F4ECDA; --o-muted:#BDB4A4;
  --o-line:rgba(244,236,218,.14); --o-edge:rgba(244,236,218,.45); --o-field:#1A1917;
  --o-btn-bg:#EBAA1C; --o-btn-fg:#141413; --danger:#FF8C6E;
}
:root[data-theme="dark"] .phone{color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0}
body{background:var(--desk); color:var(--ink); font:16px/1.5 var(--ui); -webkit-font-smoothing:antialiased}
button{font:inherit; color:inherit; cursor:pointer}
input,select,textarea{font:inherit; color:inherit}
img{display:block; max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--focus); outline-offset:2px}
[hidden]{display:none !important}
.sr{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; margin:-1px}

/* The website keeps its print colors in both themes; the shop tools follow the viewer's setting. */
.shop-wrap{--fg:var(--ink); --card:var(--paper); --edge:var(--ink); --line:rgba(20,20,19,.16); --field:var(--paper); --btn-bg:var(--ink); --btn-fg:var(--cream); --alt-bg:transparent; --alt-fg:var(--ink); color-scheme:light}
.phone{--fg:var(--o-ink); --card:var(--o-card); --edge:var(--o-edge); --line:var(--o-line); --field:var(--o-field); --btn-bg:var(--o-btn-bg); --btn-fg:var(--o-btn-fg); --alt-bg:transparent; --alt-fg:var(--o-ink)}

/* ---------- layout: website + shop tools ---------- */
.panes{max-width:1400px; margin:0 auto}
.shop-wrap{position:relative; background:var(--cream); color:var(--ink); min-height:100vh}
.shop-scroll{container-type:inline-size}
.owner-wrap{display:none}
body[data-view="owner"] .owner-wrap{display:block}
body[data-view="owner"] .shop-wrap{display:none}
.phone{position:fixed; inset:0; z-index:5; display:flex; flex-direction:column; background:var(--o-bg); color:var(--o-ink)}
.owner-body{flex:1; overflow:auto; -webkit-overflow-scrolling:touch; padding:16px 16px 28px}
@media (min-width:1100px){
  body{overflow:hidden}
  .panes{display:grid; grid-template-columns:minmax(0,1fr) 392px; grid-template-rows:minmax(0,1fr); gap:26px; height:100vh; padding:18px 24px}
  .shop-wrap{display:block !important; min-height:0; height:100%; overflow:hidden; border-radius:14px; border:1.5px solid var(--ink)}
  .shop-scroll{height:100%; overflow:auto}
  .owner-wrap{display:block !important; min-height:0}
  body[data-owner="hidden"] .panes{grid-template-columns:minmax(0,1fr)}
  body[data-owner="hidden"] .owner-wrap{display:none !important}
  .phone{position:relative; inset:auto; height:100%; border-radius:40px; border:10px solid #111; box-shadow:0 24px 50px -28px rgba(0,0,0,.45); overflow:hidden}
  .only-narrow{display:none !important}
}

/* ---------- shared type, buttons, doodles ---------- */
.label{margin:0 0 10px; font:700 12px/1.2 var(--ui); letter-spacing:.11em; text-transform:uppercase; color:var(--red-ink)}
.mustard-t{color:var(--mustard)}
.ink-t{color:var(--ink)}
.serif-h{margin:0; font:400 44px/1.03 var(--serif); letter-spacing:-.005em; color:inherit}
.serif-h em{font-style:italic; color:var(--red-ink)}
.sec-head{margin-bottom:24px}
.mini-swash{display:block; width:160px; height:16px; margin-top:9px; color:var(--red)}
.mini-swash svg{display:block; width:100%; height:100%}
/* the lightning bolt: a masked shape so the charge can run inside it */
:root{--bolt:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%2034'%20preserveAspectRatio='none'%3E%3Cpath%20d='M300%2022L194%2013L200%2019.5L92%2010L98%2016.5L0%207L17%2028.5L100%2030.5L94%2025L202%2027L196%2022L290%2025Z'/%3E%3C/svg%3E")}
.mini-swash, .hero-swash{position:relative}
.bolt{position:absolute; inset:0; display:block; overflow:hidden; background:currentColor; -webkit-mask:var(--bolt) 0 0 / 100% 100% no-repeat; mask:var(--bolt) 0 0 / 100% 100% no-repeat}
.bolt::after{content:''; position:absolute; top:0; bottom:0; left:0; width:42%; background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.95) 55%, rgba(255,255,255,0)); transform:translateX(-110%); opacity:0; pointer-events:none}
@keyframes zap{0%, 80%{transform:translateX(-110%); opacity:0} 81%{opacity:1} 93%{transform:translateX(250%); opacity:1} 94%, 100%{transform:translateX(250%); opacity:0}}
@keyframes strike{0%{opacity:1; filter:none} 9%{opacity:.2} 17%{opacity:1; filter:drop-shadow(0 0 6px currentColor) brightness(1.5)} 29%{opacity:.4; filter:none} 41%{opacity:1; filter:drop-shadow(0 0 9px currentColor) brightness(1.7)} 100%{opacity:1; filter:none}}
.motion-ok .bolt::after{animation:zap 7s linear var(--zd, 0s) infinite}
.motion-ok .sec-head.in:not(.was) .mini-swash{animation:strike .75s var(--ease-std) .88s both}
.motion-ok .piece.enter .piece-info .mini-swash{animation:strike .75s var(--ease-std) .45s both}
.mini-swash.squig{width:150px; height:16px; color:var(--mustard)}
.pill-btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:12px 24px; background:var(--btn-bg); color:var(--btn-fg); border:1.5px solid var(--btn-bg); border-radius:999px; font:700 12.5px/1.1 var(--ui); letter-spacing:.08em; text-transform:uppercase; text-decoration:none; text-align:center}
.pill-btn.ink{background:var(--ink); color:var(--cream); border-color:var(--ink)}
.pill-btn.mustard{background:var(--mustard); color:var(--ink); border-color:var(--mustard)}
.pill-btn.outline{background:transparent; color:var(--ink); border-color:var(--ink)}
.pill-btn.alt{background:var(--alt-bg); color:var(--alt-fg); border-color:var(--edge)}
.pill-btn.danger{background:transparent; color:var(--danger); border-color:var(--danger)}
.pill-btn.block{display:flex; width:100%}
.pill-btn.big{min-height:56px; font-size:13.5px}
.pill-btn.small{min-height:40px; padding:9px 16px; font-size:11.5px}
.pill-btn[disabled]{opacity:.5; cursor:not-allowed}
.arr{flex:none; width:20px; height:11px}
.text-link{display:inline-flex; align-items:center; gap:8px; padding:4px 0 6px; background:linear-gradient(var(--mustard),var(--mustard)) 0 100%/100% 6px no-repeat; border:0; color:var(--ink); font:700 12.5px/1.1 var(--ui); letter-spacing:.08em; text-transform:uppercase; text-decoration:none}
.doodle{display:block}
.sparkle{color:var(--red)}
.badge-ring{display:block; color:var(--red)}
.badge-ring text{font:700 9.8px var(--ui); letter-spacing:.16em; text-transform:uppercase; fill:currentColor}
.spin{transform-origin:60px 60px}
@keyframes spin{to{transform:rotate(360deg)}}
.art{display:block; width:100%; height:100%}
.hicon{display:block}
.print{position:relative; display:block; margin:0; padding:10px; background:#FFFDF6; box-shadow:0 18px 40px -22px rgba(0,0,0,.55)}
.print > img, .print > svg{display:block; width:100%; height:auto; object-fit:cover}
.tape{position:absolute; z-index:3; width:92px; height:27px; background:rgba(240,228,198,.86); box-shadow:0 1px 2px rgba(0,0,0,.12); clip-path:polygon(2% 8%,98% 0,100% 45%,97% 100%,3% 94%,0 55%)}
.print .tape-a{left:-26px; top:14px; transform:rotate(-34deg)}
.print .tape-b{right:-26px; top:14px; transform:rotate(34deg)}

/* ---------- top strip and header ---------- */
/* ticker + header stay pinned while the page scrolls; a shadow appears once you've scrolled */
:root{padding-top:env(safe-area-inset-top, 0px); padding-bottom:env(safe-area-inset-bottom, 0px)}
html{scroll-padding-top:env(safe-area-inset-top, 0px)}
.top-sentinel{height:0}
.site-top{position:sticky; top:env(safe-area-inset-top, 0px); z-index:20; view-transition-name:site-top}
.site-top .head{transition:box-shadow .25s var(--ease-std)}
.site-top.is-scrolled .head{box-shadow:inset 0 -1.5px 0 var(--ink)}
.site-top::after{content:''; position:absolute; left:0; right:0; top:100%; height:16px; pointer-events:none; background:linear-gradient(rgba(20,20,19,.16), rgba(20,20,19,0)); opacity:0; transition:opacity .25s var(--ease-std)}
.site-top.is-scrolled::after{opacity:1}
#shopBody [id]{scroll-margin-top:calc(var(--top-h, 0px) + 14px)}
@media (max-width:1099px){ .fab-root{bottom:calc(16px + env(safe-area-inset-bottom, 0px))} }
.topbar{display:flex; justify-content:center; align-items:center; gap:14px; padding:9px 16px; background:var(--ink); color:var(--cream); font:600 11px/1.2 var(--ui); letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; overflow:hidden}
.topbar .sparkle{flex:none; width:12px; height:12px; color:var(--mustard)}
@container (max-width:700px){ .topbar .tb-1, .topbar .tb-2, .topbar .sparkle{display:none} }
.head{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px 26px; padding:18px 30px; background:var(--cream)}
.logo{display:inline-flex; align-items:center; gap:8px; padding:0; background:none; border:0; color:var(--ink)}
.logo-t{font:400 26px/1 var(--display); letter-spacing:.012em; text-transform:uppercase; white-space:nowrap}
.logo .sparkle, .foot-logo .sparkle{width:24px; height:24px}
.ea-logo{display:block; aspect-ratio:3841.04 / 1583.76; height:auto}
.logo-mark{width:136px}
.foot-mark{width:214px; color:var(--cream)}
.slip-mark{width:168px; margin-bottom:2px}
.nav{display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:6px 24px}
.nav > button{padding:6px 1px 7px; background:none; border:0; font:700 12.5px/1 var(--ui); letter-spacing:.08em; text-transform:uppercase; color:var(--ink); white-space:nowrap}
.nav > button[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--red)}
.head-cta{min-height:44px; padding:10px 20px}
@container (max-width:820px){
  .head{grid-template-columns:minmax(0,1fr) auto; padding:14px 16px}
  .nav{grid-column:1 / -1; order:3; justify-content:flex-start; flex-wrap:nowrap; overflow-x:auto; gap:20px; padding:2px 2px 6px; scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .logo-t{font-size:22px}
  .logo-mark{width:108px}
  .head-cta{min-height:40px; padding:8px 14px; font-size:11px}
}

/* ---------- hero ---------- */
.hero{position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:10px 22px; padding:26px 30px 52px; background:var(--cream)}
.hero-copy{position:relative; z-index:2; display:flex; flex-direction:column; justify-content:center; padding:10px 0}
.hero-name{margin:0; font:400 120px/.86 var(--display); font-size:min(150px, calc(86cqi / var(--len))); letter-spacing:.004em; text-transform:uppercase; color:var(--ink)}
.hero-swash{display:block; width:min(430px, 92%); height:18px; margin:14px 0 20px; color:var(--red)}
.hero-swash svg{display:block; width:100%; height:100%}
.hero-sub{margin:0; max-width:34ch; font:400 17.5px/1.55 var(--ui); color:#2A2622}
.hero-cta{display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px; margin-top:26px}
.hero-copy .hero-badge{position:absolute; right:-46px; top:44%; z-index:3; width:112px; height:112px}
.hero-name.is-logo{margin:4px 0 24px; line-height:0}
.hero-logo{width:min(100%, 540px); margin-left:-4px}
.hero-copy .hero-name.is-logo ~ .hero-badge{top:57%; right:-8px}
.hero-art{position:relative; min-height:560px}
.crown-wrap{display:block; color:var(--ink)}
.crown-wrap .crown{width:100%; height:auto}
.hero-art .crown-wrap{position:absolute; left:17%; top:0; z-index:3; width:62px; transform:rotate(-12deg)}
.hero-spark{position:absolute; right:5%; top:4%; z-index:3; width:78px; height:78px}
.hero-brush{position:absolute; right:-1%; top:56%; z-index:1; width:36%; height:auto; color:var(--ink)}
.hero-art .dots{position:absolute; right:7%; bottom:9%; width:62px; height:62px; color:var(--ink)}
.justin{position:absolute; left:2%; bottom:1%; z-index:4; width:min(370px, 94%); background:var(--ink); color:var(--cream); box-shadow:5px 5px 0 var(--mustard); transform:rotate(-2deg)}
.justin-track{display:grid}
.justin-slide{grid-area:1 / 1; display:grid; grid-template-columns:74px minmax(0,1fr); align-items:center; gap:14px; width:100%; padding:12px 16px 12px 12px; text-align:left; background:none; border:0; color:inherit; visibility:hidden; opacity:0}
.justin-slide.on{visibility:visible; opacity:1}
.justin.anim .justin-slide.on{animation:jin .34s cubic-bezier(.2,.8,.3,1) both}
.justin.anim[data-dir="prev"] .justin-slide.on{animation-name:jinprev}
@keyframes jin{from{opacity:0; transform:translateX(22px)} to{opacity:1; transform:none}}
@keyframes jinprev{from{opacity:0; transform:translateX(-22px)} to{opacity:1; transform:none}}
.justin-img{display:block; width:74px; height:74px; overflow:hidden; background:var(--cream-2)}
.justin-img > img, .justin-img > svg{display:block; width:100%; height:100%; object-fit:cover}
.justin-body{display:grid; gap:4px; min-width:0}
.justin-k{font:700 10px/1 var(--ui); letter-spacing:.15em; text-transform:uppercase; color:var(--mustard)}
.justin-title{font:400 18px/1.15 var(--serif)}
.justin-price{display:flex; align-items:center; gap:8px; font:400 20px/1 var(--display); letter-spacing:.03em}
.justin-price .arr{transition:transform .15s}
@media (hover:hover){ .justin-slide:hover .justin-price .arr{transform:translateX(4px)} }
.justin-ctrl{display:flex; align-items:center; gap:10px; padding:9px 12px 11px; border-top:1px solid rgba(249,241,223,.2)}
.justin-count{flex:none; font:400 15px/1 var(--display); letter-spacing:.06em; color:rgba(249,241,223,.62)}
.justin-count b{font-weight:400; color:var(--cream)}
.justin-bars{display:flex; flex:1; gap:4px; margin:0 4px}
.justin-bars i{flex:1; height:3px; border-radius:2px; background:rgba(249,241,223,.24); transition:background .2s}
.justin-bars i.on{background:var(--mustard)}
.justin-arr{display:grid; place-items:center; flex:none; width:42px; height:42px; padding:0; border-radius:50%; background:var(--mustard); color:var(--ink); border:0}
.justin-arr .arr{width:18px; height:10px}
.justin-arr:focus-visible, .justin-slide:focus-visible{outline:3px solid var(--cream); outline-offset:-3px}
@media (hover:hover){ .justin-arr:hover{background:var(--cream)} }
@container (max-width:820px){
  .hero{grid-template-columns:1fr; padding:20px 16px 34px}
  .hero-name{font-size:min(118px, calc(150cqi / var(--len)))}
  .hero-copy .hero-badge{right:-4px; top:30px; bottom:auto; width:78px; height:78px}
  .hero-logo{width:min(74%, 400px)}
  .hero-copy .hero-name.is-logo ~ .hero-badge{top:30px; right:-4px}
  .hero-art{min-height:560px; margin-top:8px}
  .hero-brush{width:44%}
  .justin{left:0; width:min(370px, 96%)}
}

/* ---------- sections and bands ---------- */
.section{position:relative; padding:48px 30px 54px}
.band{position:relative; padding:52px 30px}
.ink-band{background:var(--ink); color:var(--cream)}
.red-band{background:var(--red-band); color:var(--cream)}
.mustard-band{background:var(--mustard); color:var(--ink)}
.ink-band .serif-h em{color:var(--mustard)}
.red-band .label{color:var(--cream)}
.red-band .serif-h em, .red-band .mini-swash{color:#FFD86B}
@container (max-width:780px){
  .section{padding:38px 16px 44px}
  .band{padding:42px 16px}
  .serif-h{font-size:36px}
}

.cats{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(160px,1fr); gap:16px; overflow-x:auto; padding:4px 4px 14px; scroll-snap-type:x mandatory; scrollbar-width:thin}
.cat{display:flex; flex-direction:column; justify-content:flex-start; padding:0; text-align:left; background:none; border:0; color:var(--ink); scroll-snap-align:start}
.cat-img{display:block; aspect-ratio:1; overflow:hidden; border-radius:6px; background:var(--cream-2); transition:transform .18s, box-shadow .18s}
.cat-img > img, .cat-img > svg{display:block; width:100%; height:100%; object-fit:cover}
.cat-name{display:block; margin-top:11px; font:800 13px/1.2 var(--ui); letter-spacing:.07em; text-transform:uppercase}
.cat-count{display:flex; align-items:center; gap:8px; margin-top:4px; font-size:13px; color:var(--muted)}
@container (max-width:820px){ .cats{grid-auto-columns:minmax(150px,46%)} }

.floor-top{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px 24px; margin-bottom:26px}
.floor-top .sec-head{margin-bottom:0}
.chips{display:flex; gap:8px; overflow-x:auto; padding:2px; scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none; padding:8px 14px; background:transparent; color:var(--ink); border:1.5px solid var(--ink); border-radius:999px; font:700 11.5px/1 var(--ui); letter-spacing:.06em; text-transform:uppercase}
.chip[aria-pressed="true"]{background:var(--ink); color:var(--cream)}
.pgrid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px 16px}
@container (min-width:640px){ .pgrid{grid-template-columns:repeat(3,minmax(0,1fr)); gap:36px 22px} }
@container (min-width:1060px){ .pgrid{grid-template-columns:repeat(4,minmax(0,1fr))} }
.pcard{display:flex; flex-direction:column; justify-content:flex-start; width:100%; padding:0; text-align:left; background:none; border:0; color:var(--ink)}
.pimg{position:relative; display:block; aspect-ratio:1; overflow:hidden; border-radius:6px; background:var(--cream-2); transition:transform .18s, box-shadow .18s}
.pimg > img, .pimg > svg{display:block; width:100%; height:100%; object-fit:cover}
@media (hover:hover){
  .pcard:hover .pimg, .cat:hover .cat-img, .crow:hover .pimg{transform:translate(-3px,-3px); box-shadow:6px 6px 0 var(--ink)}
}
.pcard.sold .pimg > img, .crow.sold .pimg > img{filter:grayscale(.7); opacity:.78}
.ptag{position:absolute; left:10px; bottom:10px; z-index:2; padding:5px 9px; background:var(--cream); color:var(--ink); border:1.5px solid var(--ink); border-radius:999px; font:700 9.5px/1 var(--ui); letter-spacing:.08em; text-transform:uppercase}
.pbody{display:flex; flex:1; flex-direction:column; padding-top:12px}
.pmeta{display:block; font:700 10.5px/1.2 var(--ui); letter-spacing:.1em; text-transform:uppercase; color:var(--red-ink)}
.ptitle{display:block; margin-top:5px; font:400 19px/1.2 var(--serif)}
.pera{display:block; margin:4px 0 10px; font-size:12.5px; color:var(--muted)}
.pfoot{display:flex; align-items:center; justify-content:space-between; margin-top:auto; margin-bottom:0; padding-top:9px; border-top:1.5px solid var(--ink)}
.pprice{font:400 21px/1 var(--display); letter-spacing:.03em}
.pfoot .arr{width:22px; height:12px}
.sold-head{margin:56px 0 22px}
.empty-note{padding:14px 0; font-size:15px; color:var(--muted)}
.clist{display:grid; gap:16px}
.crow{display:grid; grid-template-columns:130px minmax(0,1fr); gap:18px; align-items:center; width:100%; padding:12px; text-align:left; background:var(--paper); color:var(--ink); border:1.5px solid var(--ink); border-radius:10px}
.crow-body{display:block; min-width:0}
.crow-no{display:block; font:700 11px/1.3 var(--ui); letter-spacing:.1em; text-transform:uppercase; color:var(--red-ink)}
.crow-title{display:block; margin:3px 0 5px; font:400 24px/1.1 var(--serif)}
.crow-story{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:14px; line-height:1.45; color:var(--muted)}
.crow-price{display:inline-block; margin-top:9px; padding:5px 10px 4px; font:400 19px/1 var(--display); letter-spacing:.03em; background:var(--mustard)}

/* sold stamps and hold labels */
.sticker{position:absolute; z-index:2; pointer-events:none}
.stamp-mark.is-sold{left:50%; top:47%; padding:6px 14px 3px; border:3.5px solid var(--red); border-radius:8px; color:var(--red); background:rgba(249,241,223,.62); font:400 30px/1 var(--display); letter-spacing:.1em; text-transform:uppercase; transform:translate(-50%,-50%) rotate(-12deg)}
.stamp-mark.is-hold{left:12px; top:12px; padding:7px 10px; background:var(--ink); color:var(--cream); font:700 10.5px/1 var(--ui); letter-spacing:.12em; text-transform:uppercase; transform:rotate(-3deg)}
.stamp-mark.big.is-sold{font-size:58px; border-width:5px}
.stamp-mark.big.is-hold{left:22px; top:22px; padding:9px 12px; font-size:12.5px}
.stamp-mark.huge{position:relative; left:auto; top:auto; display:inline-block; margin:8px 0 16px; font-size:70px; border-width:5px; background:transparent; transform:rotate(-10deg)}
.stamp-mark.stamp.is-sold{animation:stampin .45s cubic-bezier(.2,.9,.3,1.3) both}
.stamp-mark.huge.stamp{animation-name:stampin2}
@keyframes stampin{from{opacity:0; transform:translate(-50%,-50%) rotate(-12deg) scale(2)} to{opacity:1; transform:translate(-50%,-50%) rotate(-12deg) scale(1)}}
@keyframes stampin2{from{opacity:0; transform:rotate(-10deg) scale(2)} to{opacity:1; transform:rotate(-10deg) scale(1)}}

.ways-band{display:grid; grid-template-columns:1.25fr repeat(4,minmax(0,1fr)); align-items:start}
.wb-head{padding-right:26px}
.wb-head .serif-h{color:var(--cream)}
.wb-item{padding:0 20px; border-left:1px solid rgba(249,241,223,.2)}
.wb-item .hicon{width:44px; height:44px; color:var(--mustard)}
.wb-item:nth-child(3) .hicon, .wb-item:nth-child(5) .hicon{color:#FF7650}
.wb-item h3{margin:12px 0 8px; font:400 21px/1.15 var(--serif)}
.wb-item p{margin:0; font-size:14px; line-height:1.52; color:rgba(249,241,223,.74)}
@container (max-width:900px){
  .ways-band{grid-template-columns:1fr 1fr; gap:30px 0}
  .wb-head{grid-column:1 / -1}
  .wb-item:nth-child(even){border-left:0; padding-left:0}
}

.aboutband{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); background:var(--cream)}
.ab-photo{position:relative; min-height:440px; overflow:hidden; background:var(--cream-2)}

.ab-edge{position:absolute; left:0; top:0; bottom:0; z-index:2; width:30px; background:var(--red); clip-path:polygon(0 0,100% 0,62% 6%,100% 14%,70% 22%,96% 31%,66% 40%,100% 49%,72% 58%,98% 67%,64% 76%,100% 85%,70% 93%,100% 100%,0 100%)}
.ab-crown{position:absolute; right:10%; top:8%; z-index:2; width:64px; transform:rotate(10deg)}
.ab-copy{position:relative; padding:56px 44px 60px}
.ab-text{margin:0 0 18px; max-width:min(46ch, calc(100% - 150px)); font-size:16.5px; line-height:1.65}
.signature{margin:0 0 22px; font:400 34px/1 var(--hand); color:var(--ink); transform:rotate(-3deg); transform-origin:left center}
.ab-badge{position:absolute; right:30px; top:52%; z-index:3; display:grid; place-items:center; align-content:center; gap:3px; width:134px; height:134px; padding:14px; border-radius:50%; background:var(--mustard); color:var(--ink); text-align:center; font:700 10px/1.2 var(--ui); letter-spacing:.09em; text-transform:uppercase; transform:rotate(8deg); box-shadow:0 10px 24px -14px rgba(0,0,0,.5)}
.ab-badge b{font:400 14px/1.15 var(--serif); letter-spacing:0; text-transform:none}
.ab-badge .hicon{width:22px; height:22px}
@container (max-width:860px){
  .aboutband{grid-template-columns:1fr}
  .ab-photo{min-height:300px}
  .ab-copy{padding:36px 16px 42px}
  .ab-text{max-width:46ch}
  .ab-badge{position:relative; right:auto; top:auto; margin-top:26px; transform:rotate(-4deg)}
}

.words-band{display:grid; grid-template-columns:1.1fr repeat(3,minmax(0,1fr)); gap:0 24px; align-items:start}
.wd-head .serif-h{color:var(--cream)}
.bigquote{display:block; margin-top:14px; font:400 120px/.62 var(--serif); color:var(--ink)}
.wd{margin:0; padding:4px 0 0 22px; border-left:1px solid rgba(249,241,223,.32)}
.wd blockquote{margin:0 0 16px; font:400 15.5px/1.58 var(--ui)}
.wd figcaption b{display:block; font:700 11.5px/1.2 var(--ui); letter-spacing:.1em; text-transform:uppercase}
.wd figcaption span{display:block; margin-top:3px; font-size:12.5px; color:rgba(249,241,223,.85)}
.words-band .words-badge{position:absolute; right:30px; bottom:26px; width:104px; height:104px; color:var(--cream)}
@container (max-width:900px){
  .words-band{grid-template-columns:1fr; gap:22px}
  .wd{padding:18px 0 0; border-left:0; border-top:1px solid rgba(249,241,223,.32)}
  .words-band .words-badge{display:none}
}

.sell-band{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); align-items:center; gap:24px 44px; overflow:hidden}
.sb-copy, .sb-side{position:relative; z-index:2}
.sell-band .serif-h em{color:var(--ink)}
.sell-band .mini-swash{width:190px; color:var(--ink)}
.sb-side p{margin:0 0 18px; max-width:44ch; font-size:16px; line-height:1.58}
.sb-spark{position:absolute; right:4%; top:12%; z-index:1; width:70px; height:70px}
.sb-brush{position:absolute; right:3%; bottom:-10px; z-index:1; width:230px; color:var(--ink); opacity:.85}
@container (max-width:860px){ .sell-band{grid-template-columns:1fr} .sb-spark{top:8%; width:54px; height:54px} .sb-brush{width:170px} }

.foot{position:relative; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,2.4fr); gap:28px 40px; padding:50px 30px 24px; background:var(--ink); color:var(--cream)}
.foot-logo{display:flex; align-items:center; gap:8px; font:400 32px/1 var(--display); letter-spacing:.01em; text-transform:uppercase}
.foot-brand p{margin:12px 0 0; max-width:32ch; font-size:14px; line-height:1.55; color:rgba(249,241,223,.72)}
.foot-cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:18px 26px; padding-right:130px}
.foot-cols p{margin:0; font-size:14px; line-height:1.6; color:rgba(249,241,223,.84)}
.foot-cols b{display:block; margin-bottom:8px; font:700 11.5px/1.2 var(--ui); letter-spacing:.12em; text-transform:uppercase; color:var(--mustard)}
.foot a{color:var(--cream)}
.foot .foot-badge{position:absolute; right:28px; top:44px; width:110px; height:110px; color:var(--cream)}
.foot-demo{grid-column:1 / -1; margin:8px 0 0; padding-top:16px; border-top:1px solid rgba(249,241,223,.18); font-size:12.5px; color:rgba(249,241,223,.62)}
@container (max-width:860px){
  .foot{grid-template-columns:1fr; padding:42px 16px 22px}
  .foot-cols{padding-right:0}
  .foot .foot-badge{position:relative; right:auto; top:auto; width:92px; height:92px}
}

/* ---------- piece page ---------- */
.back-link{display:inline-flex; align-items:center; gap:8px; margin-bottom:26px; padding:4px 0 6px; background:linear-gradient(var(--mustard),var(--mustard)) 0 100%/100% 5px no-repeat; border:0; color:var(--ink); font:700 12px/1.1 var(--ui); letter-spacing:.08em; text-transform:uppercase}
.piece{display:grid; gap:44px}
@container (min-width:800px){ .piece{grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start} }
.piece-img{position:relative}
.piece-print{transform:rotate(-1.2deg)}
.piece-print > img, .piece-print > svg{aspect-ratio:1}
.piece.sold .piece-print > img{filter:grayscale(.7); opacity:.8}
.piece-spark{position:absolute; right:-14px; top:-22px; z-index:4; width:72px; height:72px}
.piece-title{margin:0 0 14px; font:400 48px/1.02 var(--serif); letter-spacing:-.01em}
.piece-price{margin:0; font:400 46px/1 var(--display); letter-spacing:.02em}
.piece-info .mini-swash.red{width:170px; margin:10px 0 20px}
.piece-story{margin:0 0 18px; max-width:58ch; font-size:17px; line-height:1.62}
.details{margin:0 0 20px; font-size:15px}
.details > div{display:grid; grid-template-columns:120px minmax(0,1fr); gap:12px; padding:9px 0; border-top:1px dashed rgba(20,20,19,.3)}
.details dt{margin:0; font:700 11px/1.8 var(--ui); letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.details dd{margin:0}
.acts{display:flex; flex-wrap:wrap; gap:12px; margin:8px 0 4px}
.note{margin:0 0 12px; font-weight:700}
.ebay-note{margin:10px 0 0; font-size:13px; color:var(--muted)}
.ways{margin-top:28px; padding-top:20px; border-top:1.5px solid var(--ink)}
.ways h2{margin:0 0 14px; font:400 25px/1.1 var(--serif)}
.ways ul{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.ways li{display:grid; grid-template-columns:32px minmax(0,1fr); gap:12px; align-items:start; font-size:15px; line-height:1.5}
.ways .hicon{width:30px; height:30px; color:var(--red)}
.ways b{font-weight:700}
@container (max-width:780px){ .piece-title{font-size:38px} .piece-price{font-size:40px} }

/* ---------- visit, about and sell pages ---------- */
.page > .sec-head{margin-bottom:36px; text-align:center}
.page > .sec-head .mini-swash{margin-left:auto; margin-right:auto}
.page > .sec-head .serif-h{font-size:58px}
.panel{max-width:780px; margin:0 auto; padding:30px 28px; background:var(--paper); color:var(--ink); border:1.5px solid var(--ink); border-radius:12px; box-shadow:7px 7px 0 var(--mustard)}
.panel.narrow{max-width:640px}
.panel h2{margin:0 0 8px; font:400 25px/1.1 var(--serif)}
.lede{margin:0 0 18px; font-size:17px; line-height:1.6}
.visit-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-bottom:34px}
.info-card{padding:22px 22px 24px; background:var(--paper); border:1.5px solid var(--ink); border-radius:12px}
.info-card .hicon{width:38px; height:38px; color:var(--red)}
.info-card h2{margin:10px 0 6px; font:400 25px/1.1 var(--serif)}
.info-card p{margin:0 0 14px; line-height:1.6}
.mustard-card{background:var(--mustard)}
.mustard-card .hicon{color:var(--ink)}
.visit-row{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:36px; align-items:center}
.visit-row .panel{margin:0}
.visit-print{transform:rotate(-1.5deg)}

.about-row{display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:46px; align-items:start}
.about-print{transform:rotate(1.5deg)}

.about-p{margin:0 0 16px; max-width:62ch; font-size:17px; line-height:1.68}
.sell-row{display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:36px; align-items:start}
.sell-row .panel{margin:0; max-width:none}
.sell-side{position:relative; padding-top:14px}
.sell-print{transform:rotate(2.5deg)}
.sell-print > img{aspect-ratio:1}
.hand-note{margin:24px 0 0; font:400 34px/1 var(--hand); color:var(--red-ink); text-align:center; transform:rotate(-4deg)}
@container (max-width:860px){
  .visit-grid, .visit-row, .about-row, .sell-row{grid-template-columns:1fr}
  .page > .sec-head .serif-h{font-size:44px}
}

/* ---------- forms ---------- */
.field{display:block; margin:0 0 14px}
.field > span, .field > .label{display:block; margin-bottom:7px; font:700 11.5px/1.2 var(--ui); letter-spacing:.08em; text-transform:uppercase}
.field > small.hint{display:block}
.field input, .field select, .field textarea{width:100%; padding:11px 13px; background:var(--field); color:var(--fg); border:1.5px solid var(--edge); border-radius:10px; font:400 16px/1.4 var(--ui)}
.field input, .field select{height:48px}
.field textarea{resize:vertical; min-height:96px}
.two{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.hint{margin:6px 0 0; font-size:13.5px; line-height:1.45; opacity:.8}
.err{margin:4px 0 12px; font-weight:700; color:var(--danger)}
fieldset.field{border:0; padding:0; margin:0 0 14px}
fieldset.field legend{padding:0; margin-bottom:8px; font:700 11.5px/1.2 var(--ui); letter-spacing:.08em; text-transform:uppercase}
.choice{display:flex; gap:12px; align-items:flex-start; margin-bottom:8px; padding:12px 14px; background:var(--field); border:1.5px solid var(--edge); border-radius:12px; cursor:pointer}
.choice input{flex:none; width:18px; height:18px; margin:3px 0 0; accent-color:var(--ink)}
.choice b{display:block; font-weight:700}
.choice .hint{display:block; margin-top:2px}
.choice.on{background:var(--mustard); color:var(--ink); border-color:var(--ink)}
.check{display:flex; gap:10px; align-items:center; font-weight:700}
.check input{width:20px; height:20px; accent-color:var(--red)}
.thumbs{display:flex; flex-wrap:wrap; gap:10px}
.thumbwrap{position:relative; width:84px; height:84px}
.thumbwrap img{width:100%; height:100%; object-fit:cover; border:1.5px solid var(--edge); border-radius:8px}
.thumb-x{position:absolute; top:-8px; right:-8px; display:grid; place-items:center; width:28px; height:28px; padding:0; border-radius:50%; background:var(--ink); color:var(--cream); border:2px solid var(--cream)}
.thumb-x svg{width:14px; height:14px}
.addthumb{display:grid; place-items:center; width:84px; height:84px; padding:6px; text-align:center; border:1.5px dashed var(--edge); border-radius:8px; font:700 10.5px/1.2 var(--ui); letter-spacing:.05em; text-transform:uppercase; cursor:pointer}
.addthumb:focus-within, .photo-pick:focus-within{outline:3px solid var(--focus); outline-offset:2px}

/* ---------- sheets ---------- */
.sheet-root{position:fixed; inset:0; z-index:30; pointer-events:none}
.sheet-root.open{pointer-events:auto}
.phone .sheet-root{position:absolute}
@media (min-width:1100px){ .shop-wrap > .sheet-root{position:absolute} }
.backdrop{position:absolute; inset:0; background:rgba(23,20,16,.45); opacity:0; transition:opacity .2s}
.sheet-root.open .backdrop{opacity:1}
.sheet{position:absolute; left:0; right:0; bottom:0; max-height:92%; overflow:auto; padding:22px 18px 26px; background:var(--card); color:var(--fg); border-top:1.5px solid var(--edge); border-radius:20px 20px 0 0; transform:translateY(100%); transition:transform .24s ease}
.sheet-root.open .sheet{transform:none}
.sheet:focus{outline:none}
.sheet-x{position:absolute; top:12px; right:12px; display:grid; place-items:center; width:40px; height:40px; padding:0; border-radius:50%; background:transparent; color:var(--fg); border:1.5px solid var(--edge)}
.sheet-x svg{width:18px; height:18px}
.sheet-h{margin:0 48px 12px 0; font:400 30px/1.05 var(--serif)}
.center-h{margin-right:0}
@media (min-width:700px){
  .shop-wrap > .sheet-root .sheet{left:50%; right:auto; top:50%; bottom:auto; width:min(560px,92%); max-height:88%; border:1.5px solid var(--ink); border-radius:14px; box-shadow:8px 8px 0 var(--mustard); transform:translate(-50%,-46%); opacity:0; transition:transform .2s, opacity .2s}
  .shop-wrap > .sheet-root.open .sheet{transform:translate(-50%,-50%); opacity:1}
}
.sheet-item{display:flex; align-items:center; gap:12px; margin:0 0 14px; padding:0 0 14px; border-bottom:1px dashed var(--line)}
.sheet-item .mid{flex:1; min-width:0}
.sheet-item b{display:block; font-weight:700}
.total{display:flex; justify-content:space-between; align-items:center; margin:6px 0 14px; padding-top:12px; border-top:1.5px solid var(--edge); font:700 12px/1 var(--ui); letter-spacing:.08em; text-transform:uppercase}
.total b{font:400 30px/1 var(--display); letter-spacing:.02em}
.center{text-align:center}
.stack{display:grid; gap:10px; margin-top:14px}

/* ---------- shop tools ---------- */
.owner-top{flex:none; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px 16px 13px; background:var(--ink); color:var(--cream)}
.ot-title{display:flex; align-items:center; gap:7px; margin:0; font:400 26px/1 var(--display); letter-spacing:.01em; text-transform:uppercase}
.ot-title svg{width:20px; height:20px}
.sync{display:inline-flex; align-items:center; gap:6px; margin-top:6px; font:500 11.5px/1 var(--ui); color:rgba(250,242,223,.75)}
.sync i{width:8px; height:8px; border-radius:50%; background:rgba(250,242,223,.5)}
.sync.live i{background:#5BD68A}
.mini-pill{padding:10px 14px; background:var(--mustard); color:var(--ink); border:0; border-radius:999px; font:700 11px/1 var(--ui); letter-spacing:.07em; text-transform:uppercase}
.tabbar{flex:none; display:grid; grid-template-columns:repeat(5,1fr); background:#111; padding-bottom:env(safe-area-inset-bottom)}
.tabbar button{position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; padding:9px 2px 10px; background:none; border:0; color:rgba(250,242,223,.68); font:500 10.5px/1.1 var(--ui)}
.tabbar svg{width:22px; height:22px}
.tabbar button[aria-current="page"]{color:var(--mustard); font-weight:700}
.badge{position:absolute; top:5px; left:calc(50% + 6px); min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--red); color:#fff; font:700 11px/18px var(--ui); text-align:center}
.o-h{margin:2px 0 14px; font:400 30px/1.05 var(--serif)}
.o-sub{margin:22px 0 6px; font:400 21px/1.1 var(--serif)}
.o-empty{padding:10px 0; opacity:.8}
.today{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px}
.today > div{padding:11px 13px; border-radius:12px}
.today > div:first-child{background:var(--mustard); color:var(--ink)}
.today > div:last-child{background:var(--red-band); color:var(--cream)}
.today-l{display:block; font:700 10.5px/1.2 var(--ui); letter-spacing:.09em; text-transform:uppercase}
.today-n{display:block; margin-top:4px; font:400 30px/1 var(--display); letter-spacing:.02em}
.search{display:flex; align-items:center; gap:8px; margin-bottom:6px; padding:0 14px; background:var(--field); border:1.5px solid var(--edge); border-radius:999px}
.search svg{flex:none; width:18px; height:18px; opacity:.7}
.search input{flex:1; min-width:0; padding:11px 0; background:none; border:0; font:400 16px var(--ui); color:inherit}
.search input:focus{outline:none}
.search:focus-within{outline:3px solid var(--focus); outline-offset:2px}
.row{display:grid; grid-template-columns:56px minmax(0,1fr) auto; gap:12px; align-items:center; width:100%; padding:10px 0; text-align:left; background:none; border:0; border-bottom:1px dashed var(--line); color:inherit}
.thumb{display:block; flex:none; width:56px; height:56px; overflow:hidden; border-radius:8px; background-color:var(--mat,#EFE2C8)}
.thumb > img{display:block; width:100%; height:100%; object-fit:cover}
.thumb.cut > img{object-fit:contain}
.row.sold .thumb > *{filter:grayscale(.8); opacity:.6}
.row-mid{display:block; min-width:0}
.row-title{display:block; font:700 15px/1.25 var(--ui)}
.row-sub{display:block; margin-top:2px; font:500 12px/1.5 var(--ui); opacity:.78}
.row-price{font:400 20px/1 var(--display); letter-spacing:.02em}
.o-pill{display:inline-block; margin-left:4px; padding:3px 7px; font:700 9.5px/1 var(--ui); letter-spacing:.07em; text-transform:uppercase; vertical-align:1px; background:var(--o-bg-2); color:var(--fg); border:1px solid var(--edge); border-radius:999px}
.o-pill.feat{background:var(--mustard); color:var(--ink); border-color:var(--ink)}
.o-pill.sold{background:var(--red-band); color:#fff; border-color:var(--red-band)}
.o-pill.ebay{background:transparent; border-style:dashed}
.photo-pick{position:relative; display:block; aspect-ratio:4/3; margin-bottom:6px; overflow:hidden; background:var(--o-bg-2); border:1.5px dashed var(--edge); border-radius:14px; cursor:pointer}
.photo-pick.has{border-style:solid}
.photo-pick img{width:100%; height:100%; object-fit:cover}
.photo-cta{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; font:700 12px/1.2 var(--ui); letter-spacing:.07em; text-transform:uppercase}
.photo-cta svg{width:40px; height:40px}
.ai-row{margin:-2px 0 16px}
.added{padding:10px 0; text-align:center}
.added .thumb{width:124px; height:124px; margin:0 auto 12px; border-radius:14px}
.added-time{margin:6px 0 10px; font:400 34px/1.05 var(--serif)}
.sku-chip{display:inline-block; padding:5px 10px 4px; font:400 20px/1 var(--display); letter-spacing:.03em; background:var(--mustard); color:var(--ink)}
.card{margin-bottom:14px; padding:14px; background:var(--card); border:1.5px solid var(--edge); border-radius:14px}
.card.new{box-shadow:4px 4px 0 var(--mustard)}
.card-top{display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:10px}
.kind{font:700 11px/1 var(--ui); letter-spacing:.08em; text-transform:uppercase}
.card-item{display:flex; align-items:center; gap:12px; margin-bottom:8px}
.card-item b{display:block; font-weight:700}
.card p{margin:0 0 6px}
.card-acts{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.card-acts .pill-btn{min-height:42px; padding:9px 16px; font-size:11.5px}
.lead-photos{display:flex; flex-wrap:wrap; gap:8px; margin:8px 0}
.lead-photos img{width:76px; height:76px; object-fit:cover; border:1.5px solid var(--edge); border-radius:8px}
.paygrid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:4px 0 10px}
.pay{min-height:58px; background:var(--field); color:inherit; border:1.5px solid var(--edge); border-radius:12px; font:700 12.5px var(--ui); letter-spacing:.07em; text-transform:uppercase}
.pay.on{background:var(--mustard); color:var(--ink); border-color:var(--ink)}
.done{padding:6px 0 0; text-align:center}
.done p{margin:0 0 8px}
.ebay-line{margin:0 0 12px; font-size:13px; line-height:1.45; color:var(--fg); opacity:.85}
.slip{padding:18px; background:#FFFDF6; color:#171717; border:1.5px dashed #171717; border-radius:10px; font-size:14px; line-height:1.5}
.slip-shop{font:400 26px/1 var(--display); letter-spacing:.01em; text-transform:uppercase}
.slip-addr{margin-top:6px; opacity:.75}
.slip-rule{margin:12px 0; border-top:1px dashed rgba(23,23,23,.4)}
.slip-grid{display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 16px}
.slip-grid span:nth-child(odd){font:700 10.5px/1.9 var(--ui); letter-spacing:.08em; text-transform:uppercase; opacity:.7}
.slip-line{display:flex; justify-content:space-between; gap:12px; margin:4px 0}
.slip-line small{opacity:.7}
.slip-thanks{margin:14px 0 0; font:italic 400 24px/1 var(--serif); color:#B3341A}
.set{padding:16px 0; border-top:1px dashed var(--line)}
.set:first-of-type{padding-top:0; border-top:0}
.set h4{margin:0 0 10px; font:400 21px/1.1 var(--serif)}

.toast{position:fixed; left:50%; bottom:22px; z-index:60; padding:11px 18px; background:var(--ink); color:var(--cream); border-radius:999px; box-shadow:4px 4px 0 var(--mustard); font:700 12.5px/1 var(--ui); letter-spacing:.03em; opacity:0; pointer-events:none; transform:translate(-50%,16px); transition:opacity .2s, transform .2s}
.toast.show{opacity:1; transform:translate(-50%,0)}

.thumb > svg{display:block; width:100%; height:100%}

/* ---------- messages (ticket system) ---------- */
.msg-row{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:28px; align-items:start}
.msg-row .panel{margin:0; max-width:none}
.msg-side{display:grid; gap:20px}
.msg-side h2, .ticket-page h2{margin:0 0 6px; font:400 25px/1.1 var(--serif)}
.topic-chips, .quick{display:flex; flex-wrap:wrap; gap:8px}
.quick{margin:4px 0 12px}
.msg-piece{display:grid; grid-template-columns:56px minmax(0,1fr) auto; gap:12px; align-items:center; margin:0 0 16px; padding:10px 12px; background:#FFFDF6; border:1.5px solid var(--ink); border-radius:12px; color:var(--ink); text-align:left}
.msg-piece .thumb{width:56px; height:56px}
.msg-piece .mid{min-width:0}
.msg-piece b{display:block; font:400 18px/1.15 var(--serif)}
.msg-piece .thumb-x{position:static; background:var(--ink)}
.msg-piece.link{width:100%; max-width:460px; margin:6px 0 4px}
@media (hover:hover){ .msg-piece.link:hover .arr{transform:translateX(4px)} }
.t-row{display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%; padding:12px 0; text-align:left; background:none; border:0; border-top:1px dashed rgba(20,20,19,.28); color:var(--ink)}
.t-row b{display:block; font:400 18px/1.2 var(--serif)}
.t-state{display:inline-flex; align-items:center; gap:6px; flex:none; padding:6px 10px 5px; border-radius:999px; font:700 10px/1 var(--ui); letter-spacing:.08em; text-transform:uppercase; background:var(--mustard); color:var(--ink)}
.t-state.replied{background:var(--red); color:#fff}
.t-state.closed{background:transparent; color:var(--muted); box-shadow:inset 0 0 0 1.5px currentColor}
.t-state .dot{width:8px; height:8px; border-radius:50%; background:#fff}
.email-demo{margin-top:16px; padding:12px; border:1.5px dashed var(--ink); border-radius:12px; background:rgba(234,174,36,.12)}
.email-tag{margin:0 0 8px; font:700 10.5px/1.3 var(--ui); letter-spacing:.1em; text-transform:uppercase; color:var(--red-ink)}
.email-card{padding:14px 16px; background:#fff; color:#1b1b1b; border-radius:8px; box-shadow:0 8px 20px -14px rgba(0,0,0,.5); font-size:14px}
.email-card p{margin:0 0 8px}
.email-subj{font-weight:700}
.email-link{display:flex; justify-content:space-between; align-items:center; gap:10px; width:100%; margin-top:6px; padding:10px 12px; background:var(--ink); color:var(--cream); border:0; border-radius:8px; font:700 12px/1.3 var(--ui); text-align:left}
.talk-card p{margin:0 0 8px; line-height:1.55}
.ticket-page{max-width:840px; margin:0 auto}
.sent-note{display:grid; gap:4px; margin:0 0 22px; padding:14px 16px; background:var(--mustard); border:1.5px solid var(--ink); border-radius:12px; box-shadow:5px 5px 0 var(--ink)}
.sent-note span{font-size:14.5px; line-height:1.5}
.ticket-head{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:6px 0 8px}
.t-code{font:400 18px/1 var(--display); letter-spacing:.08em}
.ticket-title{margin:0 0 10px; font:400 42px/1.05 var(--serif)}
.thread{display:flex; flex-direction:column; gap:14px; margin:20px 0 20px}
.t-start{align-self:center; margin:0 0 4px; font:700 10.5px/1.3 var(--ui); letter-spacing:.1em; text-transform:uppercase; opacity:.6}
.msg{display:flex; align-items:flex-end; gap:10px; max-width:84%}
.msg.mine{align-self:flex-end; flex-direction:row-reverse}
.msg.theirs{align-self:flex-start}
.msg-col{min-width:0}
.msg-b{padding:12px 16px; border-radius:18px; font-size:15.5px; line-height:1.52; overflow-wrap:anywhere}
.from-customer .msg-b{background:var(--mustard); color:var(--ink)}
.from-shop .msg-b{background:var(--ink); color:var(--cream)}
.msg.mine .msg-b{border-bottom-right-radius:6px}
.msg.theirs .msg-b{border-bottom-left-radius:6px}
.msg-meta{margin:5px 8px 0; font-size:12px; opacity:.7}
.msg.mine .msg-meta{text-align:right}
.msg-av{display:grid; place-items:center; flex:none; width:32px; height:32px; border-radius:50%; background:var(--ink); color:var(--mustard)}
.msg-av svg{width:18px; height:18px}
.composer{display:flex; align-items:flex-end; gap:10px; padding:10px 10px 10px 16px; background:#FFFDF6; border:1.5px solid var(--ink); border-radius:18px; box-shadow:5px 5px 0 var(--mustard)}
.composer textarea{flex:1; min-width:0; min-height:48px; padding:10px 0; background:none; border:0; resize:vertical; font:400 16px/1.45 var(--ui); color:var(--ink)}
.composer textarea:focus{outline:none}
.composer:focus-within{outline:3px solid var(--focus); outline-offset:2px}
.closed-note{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border:1.5px dashed var(--ink); border-radius:14px}
.closed-note p{margin:0; font-weight:700}
.ask-link{display:inline-flex; align-items:center; gap:9px; margin:16px 0 0; padding:6px 0; background:none; border:0; color:var(--ink); font:700 12.5px/1.2 var(--ui); letter-spacing:.06em; text-transform:uppercase; text-decoration:underline; text-decoration-color:var(--mustard); text-decoration-thickness:3px; text-underline-offset:5px}
.ask-link .speech{width:22px; height:22px; color:var(--red)}
.foot-link{padding:0; background:none; border:0; color:var(--cream); font:inherit; text-decoration:underline; text-underline-offset:3px; cursor:pointer}
.fab-root{position:absolute; right:22px; bottom:22px; z-index:25}
.ask-fab{position:relative; display:inline-flex; align-items:center; gap:9px; padding:12px 18px 12px 14px; background:var(--ink); color:var(--cream); border:0; border-radius:999px; box-shadow:4px 4px 0 var(--mustard); font:700 12px/1 var(--ui); letter-spacing:.09em; text-transform:uppercase; transition:transform .2s var(--ease-out), box-shadow .2s var(--ease-out)}
.ask-fab .speech{width:22px; height:22px; color:var(--mustard)}
.fab-dot{position:absolute; top:-7px; right:-7px; min-width:21px; height:21px; padding:0 5px; border-radius:11px; background:var(--red); color:#fff; font:700 11px/21px var(--ui); font-style:normal; text-align:center}
@media (hover:hover){ .ask-fab:hover{transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--mustard)} }
.ask-fab:active{transform:scale(.96)}
.motion-ok .ask-fab{animation:popin .5s var(--ease-back) .9s both}
.motion-ok .msg.fresh{animation:msg-in .5s var(--spring) both; animation-delay:calc(var(--k, 0) * 80ms)}
.msg.mine.fresh{transform-origin:right bottom}
.msg.theirs.fresh{transform-origin:left bottom}
@keyframes msg-in{from{opacity:0; transform:translateY(14px) scale(.94)}}
@media (max-width:1099px){ .fab-root{position:fixed; right:16px; bottom:16px} }
@container (max-width:860px){ .msg-row{grid-template-columns:1fr} .ticket-title{font-size:34px} .msg{max-width:92%} }
/* owner inbox */
.tcard{display:block; width:100%; margin-bottom:14px; padding:14px; text-align:left; background:var(--card); color:inherit; border:1.5px solid var(--edge); border-radius:14px; font:inherit}
.tcard.new{box-shadow:4px 4px 0 var(--mustard)}
.tcard .card-top{display:flex; justify-content:space-between; align-items:baseline; gap:10px}
.tcard-mid{display:flex; gap:12px; align-items:center; margin:8px 0 10px}
.tcard-mid .mid{display:block; min-width:0}
.tcard .thumb, .tcard-ic{width:48px; height:48px; flex:none}
.tcard-ic{display:grid; place-items:center; border-radius:8px; background:var(--o-bg-2)}
.tcard-ic .speech{width:24px; height:24px}
.tcard .kind{display:block; margin-bottom:3px}
.tcard-last{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:13.5px; line-height:1.4; opacity:.85}
.card .kind{margin:0 0 4px}
.o-chips{margin:0 0 14px; flex-wrap:wrap}
.phone .chip{color:var(--fg); border-color:var(--edge); background:transparent}
.phone .chip[aria-pressed="true"]{background:var(--fg); color:var(--card)}
.t-contact{margin:4px 0 12px; font-size:14px}
.o-thread{margin:12px 0 16px}
.o-thread .msg{max-width:92%}
.o-thread .from-shop .msg-b{box-shadow:inset 0 0 0 1.5px var(--edge)}

/* ---------- best-practice features ---------- */
.head-right{display:flex; align-items:center; gap:8px}
html.live .owner-wrap{display:none !important}
.preview-note{margin:0; padding:7px 16px; background:var(--red); color:#fff; font:700 11px/1.4 var(--ui); letter-spacing:.07em; text-transform:uppercase; text-align:center}
/* the real site is a normal web page, not the demo's two-pane app layout */
@media (min-width:1100px){
  html.live .panes{display:block; max-width:none; height:auto; padding:0}
  html.live .shop-wrap{height:auto; overflow:visible; border:0; border-radius:0}
  html.live .shop-scroll{overflow:visible}
  html.live body{overflow:visible; height:auto}
  html.live .shop-wrap > .sheet-root, html.live .zoom-root, html.live .fab-root{position:fixed}
}
html.live .fab-root{z-index:25}
.icon-btn{position:relative; display:grid; place-items:center; width:42px; height:42px; padding:0; border:1.5px solid var(--ink); border-radius:50%; background:transparent; color:var(--ink); transition:background .2s var(--ease-std), transform .15s var(--ease-out)}
.icon-btn svg{width:19px; height:19px}
.icon-btn:active{transform:scale(.94)}
@media (hover:hover){ .icon-btn:hover{background:var(--mustard)} }
.saved-btn svg path{fill:var(--red)}
.saved-count{position:absolute; top:-6px; right:-6px; min-width:19px; height:19px; padding:0 5px; border-radius:10px; background:var(--red); color:#fff; font:700 10.5px/19px var(--ui); font-style:normal; text-align:center}
.saved-count:empty{display:none}
@container (max-width:470px){ .icon-btn{width:36px; height:36px} .icon-btn svg{width:17px; height:17px} .head-right{gap:6px} .head-cta{padding:9px 13px; min-height:38px} .head-cta span{font-size:10.5px} }
/* cards with a heart */
.pcell{position:relative}
.motion-ok .pcell[data-rv]:not(.in){transform:translateY(34px) rotate(-1.2deg)}
.heart{position:absolute; top:10px; right:10px; z-index:4; display:grid; place-items:center; width:40px; height:40px; padding:0; border:1.5px solid var(--ink); border-radius:50%; background:rgba(255,253,246,.94); color:var(--ink); transition:transform .15s var(--ease-out)}
.heart svg{width:19px; height:19px}
.heart path{fill:transparent; stroke:var(--ink); stroke-width:2}
.heart.on path{fill:var(--red); stroke:var(--red)}
.heart:active{transform:scale(.9)}
.heart.big{top:18px; right:18px; width:50px; height:50px}
.heart.big svg{width:23px; height:23px}
.motion-ok .heart.pop{animation:heartpop .5s var(--ease-back)}
@keyframes heartpop{0%{transform:scale(1)} 35%{transform:scale(1.35)} 100%{transform:scale(1)}}
.pcard .pimg::after{top:auto; bottom:12px}
.ptrade{display:block; margin-top:3px; font:700 10.5px/1.2 var(--ui); letter-spacing:.08em; text-transform:uppercase; color:var(--red-ink)}
/* floor tools */
.floor-tools{display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; margin:0 0 20px}
.floor-search{display:flex; align-items:center; gap:8px; flex:1 1 240px; max-width:380px; height:46px; padding:0 16px; border:1.5px solid var(--ink); border-radius:999px; background:#FFFDF6}
.floor-search svg{width:18px; height:18px; flex:none}
.floor-search input{flex:1; min-width:0; height:100%; border:0; background:none; font:500 16px var(--ui); color:var(--ink)}
.floor-search input:focus{outline:none}
.floor-search:focus-within{outline:3px solid var(--focus); outline-offset:2px}
.price-chips{flex:1 1 auto}
.floor-sort{display:flex; align-items:center; gap:8px; font:700 11px var(--ui); letter-spacing:.08em; text-transform:uppercase}
.floor-sort select{height:42px; padding:0 12px; border:1.5px solid var(--ink); border-radius:999px; background:#FFFDF6; font:600 13px var(--ui); color:var(--ink)}
.floor-count{margin:0 0 14px; font:700 11px/1 var(--ui); letter-spacing:.1em; text-transform:uppercase; opacity:.6}
.empty-note{padding:26px; border:1.5px dashed var(--ink); border-radius:14px; text-align:center; font-size:16px}
.chip-saved svg{width:13px; height:13px; margin-right:6px; vertical-align:-2px; color:var(--red)}
/* gallery, size view, zoom */
.piece-print .pv-stage{position:relative}
.pv-main{position:relative; display:block; width:100%; aspect-ratio:1; padding:0; border:0; overflow:hidden; background:#EDE6D6; cursor:zoom-in}
.pv-main > img, .pv-main > svg{display:block; width:100%; height:100%; object-fit:cover}
.piece.sold .pv-main > img{filter:grayscale(.7); opacity:.8}
.crop{position:absolute; inset:0; display:block; background-repeat:no-repeat}
.pv-zoomhint{position:absolute; right:10px; bottom:10px; z-index:2; display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:rgba(255,253,246,.92); color:var(--ink); opacity:0; transition:opacity .2s}
.pv-zoomhint svg{width:17px; height:17px}
.pv-main:focus-visible .pv-zoomhint{opacity:1}
@media (hover:hover){ .pv-main:hover .pv-zoomhint{opacity:1} }
.pv-thumbs{position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 0}
.pv-thumb{display:grid; justify-items:center; gap:6px; width:72px; padding:0; border:0; background:none; color:var(--ink); font:700 9.5px/1.2 var(--ui); letter-spacing:.07em; text-transform:uppercase}
.pv-tim{position:relative; display:block; width:72px; height:72px; overflow:hidden; border:1.5px solid rgba(20,20,19,.3); border-radius:9px; background:#fff}
.pv-tim > img, .pv-tim > svg{display:block; width:100%; height:100%; object-fit:cover}
.pv-thumb.on .pv-tim{border:2.5px solid var(--ink); box-shadow:3px 3px 0 var(--mustard)}
.pv-ruler{display:grid; place-items:center; width:100%; height:100%; background:var(--mustard); color:var(--ink)}
.pv-ruler svg{width:32px; height:32px}
.pv-sizenote{margin:10px 0 0; font-size:13.5px}
.dimv{position:absolute; inset:0; pointer-events:none; font:700 12px/1 var(--ui); color:var(--ink)}
.dimv i{display:inline-block; padding:5px 9px; font-style:normal; white-space:nowrap; background:#FFFDF6; border:1.5px solid var(--ink); border-radius:999px; box-shadow:2px 2px 0 var(--red)}
.dimv small{margin-left:3px; font-weight:500; opacity:.7}
.dim-w{position:absolute; left:calc(var(--x0) * 100%); width:calc((var(--x1) - var(--x0)) * 100%); top:min(calc(var(--y1) * 100% + 10px), calc(100% - 40px)); border-top:2px solid var(--red)}
.dim-w::before, .dim-w::after{content:''; position:absolute; top:-8px; height:14px; border-left:2px solid var(--red)}
.dim-w::before{left:0} .dim-w::after{right:0}
.dim-w i{position:absolute; left:50%; top:7px; transform:translateX(-50%)}
.dim-h{position:absolute; top:calc(var(--y0) * 100%); height:calc((var(--y1) - var(--y0)) * 100%); left:min(calc(var(--x1) * 100% + 12px), calc(100% - 14px)); border-left:2px solid var(--red)}
.dim-h::before, .dim-h::after{content:''; position:absolute; left:-8px; width:14px; border-top:2px solid var(--red)}
.dim-h::before{top:0} .dim-h::after{bottom:0}
.dim-h i{position:absolute; top:50%; right:8px; transform:translateY(-50%)}
.dim-d{position:absolute; left:12px; top:12px}
.zoom-root{position:fixed; inset:0; z-index:70; display:none}
.zoom-root.open{display:block}
@media (min-width:1100px){ .zoom-root{position:absolute} }
.zoom-bg{position:absolute; inset:0; background:rgba(20,20,19,.88)}
.zoom-box{position:absolute; inset:18px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; pointer-events:none}
.zoom-box:focus{outline:none}
.zoom-img{position:relative; width:min(100%, calc(100vh - 150px)); max-width:880px; aspect-ratio:1; overflow:hidden; border-radius:6px; background:#fff; cursor:zoom-in; pointer-events:auto}
.zoom-img > *{transform-origin:var(--zx) var(--zy); transition:transform .35s var(--ease-out)}
.zoom-img > img, .zoom-img > svg{display:block; width:100%; height:100%; object-fit:cover}
.zoom-img.on{cursor:zoom-out}
.zoom-img.on > *{transform:scale(2.2)}
.zoom-bar{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; margin:0; color:var(--cream); font:700 11.5px var(--ui); letter-spacing:.08em; text-transform:uppercase; pointer-events:auto}
.zoom-bar .justin-arr{width:42px; height:42px}
.zoom-x{position:static; background:var(--cream); color:var(--ink)}
/* condition, delivery ZIP, notify */
.cond{margin:26px 0 0; padding:18px 20px; border:1.5px solid var(--ink); border-radius:14px; background:#FFFDF6}
.cond h2, .ways h2{margin:0 0 8px; font:400 24px/1.1 var(--serif)}
.cond-grade{display:flex; align-items:baseline; gap:10px; margin:0 0 8px}
.cond-grade span{font:700 10.5px var(--ui); letter-spacing:.1em; text-transform:uppercase; opacity:.6}
.cond ul{margin:0 0 12px; padding-left:18px; line-height:1.6}
.zipbox{margin-top:16px; padding-top:14px; border-top:1px dashed rgba(20,20,19,.3)}
.zipbox > label{display:block; margin-bottom:8px; font:700 11.5px var(--ui); letter-spacing:.07em; text-transform:uppercase}
.zip-row{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.zip-row input{flex:1 1 160px; min-width:0; height:44px; padding:0 16px; border:1.5px solid var(--ink); border-radius:999px; background:#FFFDF6; font:500 16px var(--ui); color:var(--ink)}
.zipbox .zip-row input{flex:0 1 150px}
.zip-ok, .zip-far{margin:12px 0 8px; padding:11px 14px; border-radius:10px; font-size:14.5px; line-height:1.5}
.zip-ok{background:rgba(234,174,36,.22)}
.zip-far{background:rgba(225,65,29,.1)}
.notify{margin-top:18px; padding:16px 18px; border-radius:14px; background:var(--ink); color:var(--cream)}
.notify p{margin:0 0 10px; line-height:1.5}
.notify .zip-row input{background:#FFFDF6; border-color:#FFFDF6}
.notify .pill-btn.ink{background:var(--mustard); color:var(--ink)}
.notify .err{color:#FFB199}
/* weekly drop */
.drop-band{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:30px 44px; align-items:end}
.drop-when{margin:14px 0 0; font:700 12px var(--ui); letter-spacing:.1em; text-transform:uppercase; color:var(--mustard)}
.countdown{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px}
.countdown span{display:grid; justify-items:center; min-width:70px; padding:10px 8px 8px; border:1.5px solid rgba(249,241,223,.25); border-radius:10px; background:#232220}
.countdown b{font:400 38px/1 var(--display); color:var(--mustard); font-variant-numeric:tabular-nums}
.countdown i{margin-top:5px; font:700 9.5px var(--ui); font-style:normal; letter-spacing:.12em; text-transform:uppercase; opacity:.75}
.countdown.small{margin:6px 0 4px}
.countdown.small span{min-width:52px; padding:7px 6px 6px; background:var(--ink); color:var(--cream); border-color:var(--ink)}
.countdown.small b{font-size:24px}
.drop-peek{grid-column:1 / -1}
.peek-row{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:16px}
.peek{padding:0; border:0; background:none; color:inherit; text-align:left}
.peek .pimg{position:relative; display:block; aspect-ratio:1; overflow:hidden; border-radius:8px}
.peek .pimg > img, .peek .pimg > svg{display:block; width:100%; height:100%; object-fit:cover}
.peek-stamp{position:absolute; left:8px; bottom:8px; z-index:3; padding:5px 9px; border-radius:999px; background:var(--mustard); color:var(--ink); font:700 10.5px/1.1 var(--ui); letter-spacing:.08em; text-transform:uppercase; transform:rotate(-3deg)}
.peek-stamp.big{left:auto; bottom:auto; right:14px; top:14px; padding:8px 14px; font-size:13px}
.peek-t{display:block; margin-top:8px; font:400 17px/1.2 var(--serif)}
.drop-join p{margin:0 0 10px}
.drop-join .hint{margin:10px 0 0; opacity:.7}
.drop-join .err{color:#FFB199}
.drop-done{padding:12px 14px; border-radius:10px; background:rgba(234,174,36,.15)}
@container (max-width:860px){ .drop-band{grid-template-columns:1fr} .countdown span{min-width:60px} .countdown b{font-size:30px} }
/* reviews band */
.reviews-band{position:relative}
.reviews-band.rev-empty{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:24px 44px; align-items:center}
.rev-ask p{max-width:46ch; margin:0 0 16px; font-size:17px; line-height:1.55}
.reviews-band .words-badge{position:absolute; right:30px; bottom:26px; width:104px; height:104px; color:var(--cream)}
.rev-empty .rev-ask{padding-right:120px}
.stars{display:block; margin-bottom:10px; color:#FFD86B; font-size:18px; letter-spacing:2px}
.stars i{font-style:normal; opacity:.35}
.rev-all{display:inline-block; margin-top:14px; color:var(--cream); font:700 11.5px var(--ui); letter-spacing:.07em; text-transform:uppercase}
@container (max-width:860px){ .reviews-band.rev-empty{grid-template-columns:1fr} .rev-empty .rev-ask{padding-right:0} .reviews-band .words-badge{display:none} }
/* shoppable photos */
.spotwrap{position:relative; display:block}
.ab-media{position:absolute; inset:0}
.ab-media > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.about-print img, .visit-print img{display:block; width:100%; object-fit:cover}
.about-print img{aspect-ratio:4/5}
.visit-print img{aspect-ratio:14/9}
.spot{position:absolute; z-index:3; width:36px; height:36px; margin:-18px 0 0 -18px; padding:0; border:0; background:none; cursor:pointer}
.spot-dot{position:absolute; inset:8px; border-radius:50%; background:var(--mustard); border:2.5px solid var(--ink); box-shadow:0 0 0 4px rgba(255,253,246,.75); transition:background .2s, transform .2s var(--ease-back)}
.spot-dot::after{content:''; position:absolute; inset:-9px; border-radius:50%; border:2px solid var(--mustard); opacity:0}
.motion-ok .spot-dot::after{animation:spotpulse 2.6s var(--ease-out) infinite}
@keyframes spotpulse{0%{transform:scale(.55); opacity:.9} 100%{transform:scale(1.5); opacity:0}}
.spot-tag{position:absolute; left:50%; bottom:calc(100% + 4px); display:grid; gap:2px; padding:8px 12px; border-radius:10px; background:var(--ink); color:var(--cream); font:700 11px/1.3 var(--ui); text-align:left; white-space:nowrap; opacity:0; pointer-events:none; transform:translate(-50%, 6px); transition:opacity .2s, transform .25s var(--ease-out)}
.spot-tag b{font:400 15px/1.2 var(--serif)}
.spot:focus-visible .spot-tag{opacity:1; transform:translate(-50%, 0)}
.spot:focus-visible .spot-dot{background:var(--red); transform:scale(1.15)}
@media (hover:hover){ .spot:hover .spot-tag{opacity:1; transform:translate(-50%, 0)} .spot:hover .spot-dot{background:var(--red); transform:scale(1.15)} }
.spot-hint{position:absolute; left:16px; bottom:16px; z-index:3; display:flex; align-items:center; gap:6px; margin:0; padding:7px 12px; border-radius:999px; background:rgba(255,253,246,.94); color:var(--ink); font:700 10.5px var(--ui); letter-spacing:.08em; text-transform:uppercase}
.spot-hint svg{width:14px; height:14px}
/* visit booking */
.book{max-width:none; margin-top:30px}
.book h2{margin:0 0 4px; font:400 30px/1.1 var(--serif)}
.book-days{margin:16px 0 14px}
.book-times{display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:10px}
.slot{display:grid; place-items:center; gap:2px; height:56px; padding:0; border:1.5px solid var(--ink); border-radius:12px; background:#FFFDF6; color:var(--ink); font:700 15px var(--ui)}
.slot small{font-size:9.5px; letter-spacing:.08em; text-transform:uppercase}
.slot.on{background:var(--ink); color:var(--cream); box-shadow:3px 3px 0 var(--mustard)}
.slot:disabled{opacity:.45; cursor:not-allowed}
.book-form{margin-top:18px}
.book-pick{margin:0 0 12px; font:400 22px/1.2 var(--serif)}
/* trade */
.trade-perks{display:grid; gap:12px; margin:0 0 22px; padding:0; list-style:none}
.trade-perks li{display:grid; grid-template-columns:30px 1fr; gap:10px; align-items:start; line-height:1.5}
.trade-perks svg{width:26px; height:26px}
.trade-price{margin:4px 0 0; font:700 11.5px var(--ui); letter-spacing:.08em; text-transform:uppercase; color:var(--red-ink)}
.trade-price b{margin-left:6px; font:400 24px/1 var(--display); letter-spacing:.02em; color:var(--ink)}
/* offers and conversation panels */
.money-in{display:flex; align-items:center; gap:6px; height:48px; padding:0 14px; border:1.5px solid var(--ink); border-radius:12px; background:#fff}
.field .money-in{display:flex; margin:0; font:500 17px var(--ui); letter-spacing:0; text-transform:none; opacity:1}
.field .money-in input, .money-in input{width:auto; height:100%; padding:0; border:0; border-radius:0; box-shadow:none; background:none}
.money-in i{font-style:normal; font-weight:700}
.money-in input{flex:1; min-width:0; height:100%; border:0; background:none; font:500 17px var(--ui); color:var(--ink)}
.money-in input:focus{outline:none}
.money-in:focus-within{outline:3px solid var(--focus); outline-offset:2px}
.t-panel{display:grid; gap:8px; margin:12px 0; padding:14px 16px; border:1.5px solid var(--ink); border-radius:14px; background:#FFFDF6}
.t-panel.ok{background:rgba(234,174,36,.25)}
.t-panel b{font:700 15px/1.4 var(--ui)}
.t-panel .card-acts{display:flex; flex-wrap:wrap; gap:8px}
.t-panel .zip-row .money-in{flex:1 1 140px; height:44px}
.phone .t-panel{background:var(--card); border-color:var(--edge); color:var(--fg)}
.phone .t-panel.ok{background:rgba(234,174,36,.18)}
.phone .money-in{background:var(--o-bg-2); border-color:var(--edge)}
.phone .money-in input{color:var(--fg)}
.tcard.is-offer .kind{color:var(--red-ink)}
/* owner additions */
.flabel{display:block; margin-bottom:8px; font:700 11px var(--ui); letter-spacing:.08em; text-transform:uppercase; opacity:.75}
.xthumbs{display:flex; flex-wrap:wrap; gap:10px}
.xthumb{position:relative; width:76px; height:76px}
.xthumb img{width:100%; height:100%; object-fit:cover; border-radius:10px}
.xthumb .thumb-x{position:absolute; top:-7px; right:-7px}
.xadd{display:grid; place-items:center; align-content:center; gap:4px; width:76px; height:76px; border:1.5px dashed var(--edge); border-radius:10px; font:700 10.5px var(--ui); letter-spacing:.06em; text-transform:uppercase; cursor:pointer}
.xadd svg{width:22px; height:22px}
.added-alert{padding:10px 12px; border-radius:10px; background:rgba(234,174,36,.2)}
.rev-row{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; padding:10px 0; border-top:1px dashed var(--edge); font-size:13.5px; line-height:1.45}
.rev-row .thumb-x{position:static; flex:none}
.qr-wrap{display:grid; place-items:center; margin:8px 0 14px}
.qr{width:min(250px, 78%); height:auto; border-radius:12px; box-shadow:0 12px 30px -16px rgba(0,0,0,.6)}

/* =========================================================
   Motion
   Durations: feedback 100-200ms, standard 250-500ms, hero showpiece up to ~1s.
   Easing: arriving = decelerate, leaving = accelerate (Material 3 emphasized curves),
   spatial moves get a light spring (about 8% overshoot). Only transform, opacity and clip-path move.
   ========================================================= */
:root{
  --ease-out:cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-in:cubic-bezier(0.3, 0, 0.8, 0.15);
  --ease-std:cubic-bezier(0.2, 0, 0, 1);
  --ease-back:cubic-bezier(0.34, 1.56, 0.64, 1);
  --spring:linear(0, 0.045, 0.154, 0.299, 0.455, 0.605, 0.739, 0.851, 0.939, 1.003, 1.046, 1.071, 1.082, 1.083, 1.076, 1.065, 1.053, 1.04, 1.028, 1.017, 1.009, 1.002, 0.998, 0.995, 0.993, 0.993, 0.993, 0.994, 0.995, 0.996, 0.997, 0.998, 0.999, 1, 1, 1, 1);
}

/* ---- hero stage ---- */
.hero{background:var(--tint, var(--cream)); isolation:isolate}
.hero-wash{position:absolute; inset:0; z-index:0; pointer-events:none; clip-path:circle(0px at 50% 50%)}
.hero > .hero-copy, .hero > .hero-art{position:relative; z-index:1}
.hero-paint{position:absolute; left:14%; top:5%; width:62%; height:84%; transform:rotate(-2.5deg)}
.hero-paint > span{position:absolute; inset:0; display:block}
.hero-paint .paint{display:block; width:100%; height:100%}
.hero-paint .pb{color:var(--pc, var(--mustard))}
.hero-paint .pw{visibility:hidden}
.hs-prints{position:absolute; left:20%; top:9%; z-index:2; width:58%; aspect-ratio:1}
.hs-print{position:absolute; left:0; top:0; width:100%; margin:0; transform:rotate(var(--r, 2deg)); visibility:hidden}
.hs-print.on{visibility:visible; z-index:2}
.hs-print.leaving{visibility:visible; z-index:1}
.hs-print > img, .hs-print > svg{aspect-ratio:1}
.hero-art .crown-wrap{transform:none; rotate:-12deg}
.justin-play{display:grid; place-items:center; flex:none; width:34px; height:34px; padding:0; border-radius:50%; background:transparent; color:var(--cream); border:1.5px solid rgba(249,241,223,.45)}
.justin-play svg{width:13px; height:13px}
.justin-play .pp-play, .justin-play.is-paused .pp-pause{display:none}
.justin-play.is-paused .pp-play{display:block}
.justin-play:focus-visible{outline:3px solid var(--cream); outline-offset:1px}
.justin-bars i{position:relative; overflow:hidden}
.justin-bars i.on{background:rgba(249,241,223,.24)}
.justin-bars i b{position:absolute; inset:0; background:var(--mustard); transform:scaleX(0); transform-origin:left center}
.hero-idle .justin-bars i.on b, .motion-off .justin-bars i.on b{transform:scaleX(1)}
.motion-off .justin-play{display:none}
@container (max-width:820px){ .hero-paint{left:6%; width:80%} .hs-prints{left:13%; width:70%} }

/* first visit: the hero builds itself (offset & delay, masking) */
@keyframes rise{from{opacity:0; transform:translateY(16px)}}
@keyframes popin{from{opacity:0; transform:scale(.6)}}
@keyframes wipe-in{from{clip-path:inset(0 100% 0 0)} to{clip-path:inset(0 0 0 0)}}
@keyframes paint-in{from{opacity:0; transform:rotate(-9deg) scale(.82)}}
@keyframes drop-in{from{opacity:0; transform:translateY(-70px) rotate(calc(var(--r, 2deg) + 14deg)) scale(1.06)}}
@keyframes tape-in{from{opacity:0; scale:.3 0}}
@keyframes card-in{from{opacity:0; transform:translateY(40px) rotate(3deg)}}
.motion-ok .hero.intro .hero-copy .label{animation:rise .5s var(--ease-out) .05s both}
.motion-ok .hero.intro .hero-logo, .motion-ok .hero.intro .hero-name:not(.is-logo){animation:wipe-in 1s var(--ease-out) .12s both}
.motion-ok .hero.intro .hero-sub{animation:rise .6s var(--ease-out) .45s both}
.motion-ok .hero.intro .hero-cta > *{animation:rise .55s var(--spring) .6s both}
.motion-ok .hero.intro .hero-cta > *:last-child{animation-delay:.7s}
.motion-ok .hero.intro .hero-badge{animation:popin .7s var(--spring) .85s both}
.motion-ok .hero.intro .hero-paint{animation:paint-in .8s var(--spring) .15s both}
.motion-ok .hero.intro .hs-print.on{animation:drop-in 1s var(--spring) .3s both}
.motion-ok .hero.intro .hs-print.on .tape{animation:tape-in .3s var(--ease-back) both}
.motion-ok .hero.intro .hs-print.on .tape-a{animation-delay:1.05s}
.motion-ok .hero.intro .hs-print.on .tape-b{animation-delay:1.15s}
.motion-ok .hero.intro .justin{animation:card-in .8s var(--spring) .75s both}
.motion-ok .hero.intro .hero-brush{animation:wipe-in .7s var(--ease-out) 1s both}
.motion-ok .hero.intro .dots{animation:popin .5s var(--ease-back) 1.1s both, floaty 6.5s ease-in-out 1.6s infinite}
.motion-ok .hero.intro .hero-spark{animation:popin .6s var(--ease-back) .95s both, twinkle 6s ease-in-out 1.6s infinite}
.motion-ok .hero.intro .crown-wrap{animation:popin .5s var(--ease-back) 1.2s both, rock 5s ease-in-out 1.8s infinite}

/* ambient loops (paused by the motion switch and by reduce-motion) */
@keyframes twinkle{0%,100%{rotate:0deg; scale:1} 50%{rotate:22deg; scale:1.12}}
@keyframes rock{0%,100%{rotate:-12deg} 50%{rotate:-3deg}}
@keyframes floaty{0%,100%{translate:0 0} 50%{translate:0 -8px}}
.spin{animation:none}
.motion-ok .spin{animation:spin 26s linear infinite}
.motion-ok .hero-spark, .motion-ok .sb-spark, .motion-ok .piece-spark{animation:twinkle 6s ease-in-out infinite}
.motion-ok .hero-art .crown-wrap{animation:rock 5s ease-in-out infinite}
.motion-ok .hero-art .dots{animation:floaty 6.5s ease-in-out infinite}

/* ---- topbar marquee + motion switch ---- */
.topbar{justify-content:space-between; gap:10px; padding:0 0 0 0}
.tb-marquee{flex:1; min-width:0; overflow:hidden; padding:9px 0}
.tb-track{display:flex; width:max-content}
.tb-set{display:flex; align-items:center; gap:14px; padding-right:14px}
.motion-ok .tb-track{animation:marquee 34s linear infinite}
.motion-ok .tb-marquee:hover .tb-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.motion-off .tb-track{width:auto; justify-content:center}
.motion-off .tb-set[aria-hidden], .motion-off .tb-3{display:none}
.motion-off .tb-set{flex-wrap:wrap; justify-content:center; padding:0 12px}
.motion-off .tb-set > .sparkle:last-child{display:none}
@container (max-width:700px){ .topbar .tb-1, .topbar .tb-2, .topbar .sparkle{display:revert} .motion-off .tb-1, .motion-off .tb-2, .motion-off .tb-set .sparkle{display:none} }
.motion-btn{flex:none; display:inline-flex; align-items:center; gap:7px; align-self:stretch; padding:0 14px; background:#262320; color:var(--cream); border:0; font:600 10.5px/1 var(--ui); letter-spacing:.1em; text-transform:uppercase}
.motion-btn svg{width:11px; height:11px}
@media (hover:hover){ .motion-btn:hover{background:var(--red)} }
.motion-btn:focus-visible{outline:3px solid var(--mustard); outline-offset:-3px}
@container (max-width:520px){ .motion-btn span{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)} .motion-btn{padding:0 12px} }

/* ---- scroll reveals (each element once per visit) ---- */
.motion-ok [data-rv]{transition:opacity .6s var(--ease-out) var(--rvd, 0ms), transform .9s var(--spring) var(--rvd, 0ms)}
.motion-ok [data-rv]:not(.in){opacity:0; transform:translateY(28px)}
.motion-ok .pcard[data-rv]:not(.in){transform:translateY(34px) rotate(-1.2deg)}
.motion-ok .sec-head[data-rv]:not(.in){opacity:1; transform:none}
.sec-head .label{transition:opacity .5s var(--ease-out), transform .6s var(--ease-out)}
.motion-ok .sec-head[data-rv]:not(.in) .label{opacity:0; transform:translateY(10px)}
.serif-h .w{display:inline-block; overflow:hidden; vertical-align:top; padding:0 .08em .14em 0; margin:0 -.08em -.14em 0}
.serif-h .w > span{display:inline-block; transition:transform .85s var(--ease-out) calc(var(--i, 0) * 60ms + 90ms)}
.motion-ok .sec-head[data-rv]:not(.in) .w > span{transform:translateY(112%)}
.mini-swash{transition:clip-path .38s cubic-bezier(0.2, 0, 0, 1) .5s}
.motion-ok .sec-head[data-rv]:not(.in) .mini-swash{clip-path:inset(0 100% 0 0)}
.ab-media{transform:scale(1.12); transition:clip-path 1.1s var(--ease-out), transform 1.5s var(--ease-out)}
.motion-ok .ab-photo[data-rv]:not(.in){opacity:1; transform:none}
.motion-ok .ab-photo[data-rv]:not(.in) > .ab-media{clip-path:inset(0 0 100% 0); transform:scale(1.3)}

/* ---- micro-interactions ---- */
.arr{transition:transform .25s var(--ease-out)}
.shop-wrap .pill-btn{position:relative; overflow:hidden; isolation:isolate; transition:color .28s var(--ease-std), border-color .28s var(--ease-std), transform .12s var(--ease-std)}
.shop-wrap .pill-btn::before{content:''; position:absolute; inset:-2px; z-index:-1; border-radius:inherit; background:var(--sweep, var(--ink)); transform:translateX(-102%); transition:transform .42s var(--ease-out)}
.shop-wrap .pill-btn.mustard{--sweep:var(--ink); --sweep-fg:var(--cream)}
.shop-wrap .pill-btn.ink{--sweep:var(--mustard); --sweep-fg:var(--ink)}
.shop-wrap .pill-btn.outline{--sweep:var(--ink); --sweep-fg:var(--cream)}
@media (hover:hover){
  .shop-wrap .pill-btn:not([disabled]):hover{color:var(--sweep-fg, var(--cream))}
  .shop-wrap .pill-btn:not([disabled]):hover::before{transform:none}
  .pill-btn:hover .arr, .text-link:hover .arr, .back-link:hover .arr{transform:translateX(4px)}
  .back-link:hover .arr{transform:translateX(-4px)}
}
.pill-btn:not([disabled]):active, .chip:active, .justin-arr:active, .justin-play:active{transform:scale(.96)}
.text-link{background-size:100% 6px; transition:background-size .3s var(--ease-out)}
@media (hover:hover){ .text-link:hover{background-size:100% 100%} }
.nav > button{position:relative}
.nav > button[aria-current="page"]{box-shadow:none}
.nav > button::after{content:''; position:absolute; left:0; right:0; bottom:-1px; height:3px; background:var(--red); transform:scaleX(0); transform-origin:right center; transition:transform .3s var(--ease-out)}
.nav > button[aria-current="page"]::after{transform:scaleX(1)}
@media (hover:hover){ .nav > button:hover::after{transform:scaleX(1); transform-origin:left center} }
.chip{transition:background .2s var(--ease-std), color .2s var(--ease-std), transform .12s var(--ease-std)}
.pimg > img, .cat-img > img{transition:transform .7s var(--ease-out)}
.pimg::after{content:'Take a look'; position:absolute; right:10px; top:10px; z-index:3; display:grid; place-items:center; width:78px; height:78px; padding:8px; border-radius:50%; background:var(--mustard); color:var(--ink); text-align:center; font:700 10px/1.15 var(--ui); letter-spacing:.08em; text-transform:uppercase; box-shadow:0 6px 16px -8px rgba(0,0,0,.45); transform:scale(0) rotate(-50deg); transition:transform .38s var(--ease-back); pointer-events:none}
.pcard.sold .pimg::after, .crow .pimg::after{content:none}
@media (hover:hover){
  .pcard:hover .pimg > img, .cat:hover .cat-img > img{transform:scale(1.07)}
  .pcard:hover .pimg::after{transform:scale(1) rotate(-12deg)}
  .pcard:hover .pfoot .arr, .cat:hover .cat-count .arr{transform:translateX(5px)}
}
.pcard:focus-visible .pimg::after{transform:scale(1) rotate(-12deg)}
html[data-vt] .pimg::after{transform:scale(0) !important; transition:none}
.justin-arr, .justin-play{transition:background .2s var(--ease-std), transform .12s var(--ease-std)}

/* piece page arrives in a short stagger */
.motion-ok .piece.enter .piece-info > *{animation:rise .55s var(--ease-out) both}
.motion-ok .piece.enter .piece-info > *:nth-child(2){animation-delay:.05s}
.motion-ok .piece.enter .piece-info > *:nth-child(3){animation-delay:.1s}
.motion-ok .piece.enter .piece-info > *:nth-child(4){animation-delay:.14s}
.motion-ok .piece.enter .piece-info > *:nth-child(5){animation-delay:.18s}
.motion-ok .piece.enter .piece-info > *:nth-child(6){animation-delay:.22s}
.motion-ok .piece.enter .piece-info > *:nth-child(n+7){animation-delay:.26s}
.motion-ok .piece.enter .piece-spark{animation:popin .6s var(--ease-back) .35s both, twinkle 6s ease-in-out 1s infinite}

/* ---- page transitions (View Transitions API) ---- */
:root{view-transition-name:none}
.shop-wrap{view-transition-name:shop}
.piece-print{view-transition-name:piece-img}
::view-transition-group(*){animation-duration:.5s; animation-timing-function:var(--ease-std)}
::view-transition-group(piece-img){animation-duration:.55s; z-index:5}
html[data-vt="page"]::view-transition-old(shop), html[data-vt="open"]::view-transition-old(shop){animation:vt-out .22s var(--ease-in) both}
html[data-vt="page"]::view-transition-new(shop), html[data-vt="open"]::view-transition-new(shop){animation:vt-in .48s var(--ease-out) .08s both}
html[data-vt="filter"]::view-transition-old(shop), html[data-vt="filter"]::view-transition-new(shop){animation-duration:.25s}
@keyframes vt-out{to{opacity:0; transform:translateY(-14px)}}
@keyframes vt-in{from{opacity:0; transform:translateY(22px)}}

/* ---- celebrations ---- */
.burst-layer{position:fixed; z-index:90; width:0; height:0; pointer-events:none}
.burst-bit{position:absolute; left:0; top:0; width:11px; height:11px; border-radius:2px}
.burst-bit:nth-child(odd){border-radius:50%}
.burst-bit.spark{width:20px; height:20px; background:none}
.burst-bit.spark svg{width:100%; height:100%}

/* ---- scroll-linked drift where the browser supports it (Chrome, Edge, Safari 26+) ---- */
@supports (animation-timeline: view()){
  @keyframes drift{from{translate:0 -5%} to{translate:0 5%}}
  @keyframes drift-up{from{translate:0 36px} to{translate:0 -36px}}
  @keyframes turn{from{rotate:-40deg} to{rotate:40deg}}
  .motion-ok .ab-media{animation:drift linear both; animation-timeline:view(); animation-range:cover 0% cover 100%}
  .motion-ok .bigquote, .motion-ok .sb-brush{animation:drift-up linear both; animation-timeline:view()}
  .motion-ok .sb-spark{animation:turn linear both; animation-timeline:view()}
}

/* ---- reduce motion: keep feedback, drop movement ---- */
@media (prefers-reduced-motion: reduce){
  .shop-wrap .pill-btn::before{transition:none}
  .pimg > img, .cat-img > img, .serif-h .w > span, .mini-swash, .arr, .pimg::after{transition:none}
  .spot-dot::after, .heart.pop{animation:none !important}
  .bolt::after, .mini-swash{animation:none !important}
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*){animation:none !important}
}

@media (prefers-reduced-motion: reduce){
  .spin, .stamp-mark.stamp, .justin.anim .justin-slide.on{animation:none}
  .sheet, .backdrop, .toast, .pimg, .cat-img{transition:none}
}

/* ---------- finger-sized tap areas on touch screens (kept last so nothing overrides them) ---------- */
@media (pointer: coarse){
  .nav{padding-top:2px; padding-bottom:2px}
  .nav button{padding-top:15px; padding-bottom:15px}
  .chips .chip{padding-top:15px; padding-bottom:15px}
  .foot-link{position:relative; display:inline-block}
  .foot-link::after{content:''; position:absolute; inset:-11px -4px}
  .text-link{position:relative; display:inline-block}
  .text-link::after{content:''; position:absolute; inset:-11px -4px}
  .motion-btn{position:relative}
  .motion-btn::after{content:''; position:absolute; inset:-8px -8px}
  .justin-play{width:44px; height:44px}
  .justin-play svg{width:15px; height:15px}
  .heart{width:44px; height:44px}
  .heart.big{width:52px; height:52px}
  .pv-thumb{position:relative}
  .pv-thumb::after{content:''; position:absolute; inset:-6px -4px}
  .spot{width:44px; height:44px; margin:-22px 0 0 -22px}
  .spot-dot{inset:12px}
}