/* ==========================================================================
   ParkSyde Memorabilia — the inside of the shop.

   23 October 2026, the owner: "make it aesthetically look like a memorabilia
   shop found on the streets of high quality memorabilia ... when someone
   enters the shop it becomes a real memorabilia shop." The park outside keeps
   its own design; through this door the page is a shop and nothing else.

   THE ROOM, IN FOUR MATERIALS. Dark walnut for the walls and cases, brass for
   the fittings and the sign, glass lit from above for the cabinets, and ivory
   card for the price tags and labels, the way a good collectors' shop or a
   museum case does it. One accent (brass), used for the things you touch.
   Fonts are the site's own copies (campaign/fonts): Bitter for the sign and
   headings, Plex Sans for reading, Plex Mono for ticket numbers and tags.
   Nothing here is fetched from another site.
   ========================================================================== */
:root{
  --wal-0:#0d0a07; --wal-1:#15100b; --wal-2:#1d160f; --wal-3:#281e15; --wal-4:#3a2b1e;
  --brass:#c9a45c; --brass-hi:#e6c98a; --brass-lo:#8a6d36;
  --ivory:#f3ece0; --ivory-2:#e6dccb; --ink:#1b140d;
  --paper:#efe7d8; --muted:rgba(239,231,216,.68); --hair:rgba(201,164,92,.22);
  --glass:rgba(255,248,232,.05);
  --serif:'Bitter',Georgia,'Times New Roman',serif;
  --sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --wrap:min(1180px,calc(100vw - 32px));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--wal-1);color:var(--paper);font:400 16px/1.6 var(--sans);
  /* the wall: walnut, with a faint vertical grain and the warmth of the lamps */
  background-image:
    radial-gradient(1200px 500px at 50% -120px,rgba(230,201,138,.10),transparent 70%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.012) 0 2px,transparent 2px 7px),
    linear-gradient(180deg,var(--wal-2),var(--wal-1) 40%,var(--wal-0));}
a{color:var(--brass-hi)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{outline:2px solid var(--brass-hi);outline-offset:3px}
.wrap{width:var(--wrap);margin:0 auto}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--brass);color:var(--ink);padding:8px 12px;border-radius:6px;z-index:50}
.skip:focus{left:12px}

/* ---- the street door and the sign -------------------------------------- */
.door{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;font-size:.86rem}
.door a{color:var(--muted);text-decoration:none}
.door a:hover{color:var(--paper)}
.door .exit::before{content:"\2190\00a0"}
.shopnav{position:sticky;top:0;z-index:20;background:rgba(13,10,7,.92);border-bottom:1px solid var(--hair);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.shopnav .wrap{display:flex;align-items:center;gap:18px;min-height:56px}
.shopnav .mark{font:600 1rem/1 var(--serif);letter-spacing:.02em;color:var(--brass-hi);text-decoration:none;white-space:nowrap}
.shopnav ul{display:flex;gap:4px;list-style:none;margin:0 0 0 auto;padding:0;overflow-x:auto;scrollbar-width:none}
.shopnav ul::-webkit-scrollbar{display:none}
.shopnav li a{display:block;padding:8px 10px;color:var(--paper);text-decoration:none;font-size:.9rem;border-radius:6px;white-space:nowrap}
.shopnav li a:hover{background:rgba(201,164,92,.12)}
@media (max-width:560px){.shopnav .mark{display:none}.shopnav ul{margin-left:0}}

/* ---- the entrance: the fascia sign over a lit window --------------------- */
.entrance{position:relative;padding:28px 0 44px;overflow:hidden}
.fascia{position:relative;margin:6px auto 0;max-width:820px;text-align:center;padding:26px 18px 22px;
  background:linear-gradient(180deg,#0b0907,#17110b);border:1px solid var(--brass-lo);border-radius:4px;
  box-shadow:inset 0 0 0 4px #0b0907,inset 0 0 0 5px rgba(201,164,92,.35),0 30px 60px rgba(0,0,0,.45)}
.fascia .est{font:500 .72rem/1 var(--mono);letter-spacing:.32em;text-transform:uppercase;color:var(--brass)}
.fascia h1{margin:10px 0 6px;font:600 clamp(2rem,6.4vw,3.6rem)/1.02 var(--serif);letter-spacing:.01em;
  color:var(--brass-hi);text-shadow:0 1px 0 #6d5428,0 0 24px rgba(230,201,138,.25)}
.fascia .trade{font:400 clamp(.86rem,2.4vw,1rem)/1.4 var(--serif);font-style:italic;color:var(--ivory-2)}
/* two lamps over the sign */
.fascia::before,.fascia::after{content:"";position:absolute;top:-18px;width:10px;height:10px;border-radius:50%;
  background:var(--brass-hi);box-shadow:0 0 18px 6px rgba(230,201,138,.35)}
.fascia::before{left:22%}.fascia::after{right:22%}
.welcome{max-width:720px;margin:26px auto 0;text-align:center;font-size:1.05rem;color:var(--ivory-2)}
.welcome strong{color:var(--paper)}
.entrance .cta{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:20px}

/* the window display: one piece on a plinth, under a spotlight */
.window{margin:36px auto 0;max-width:980px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:center}
@media (max-width:760px){.window{grid-template-columns:1fr}}
.window-stage{position:relative;aspect-ratio:1/1;border-radius:6px;overflow:hidden;
  background:radial-gradient(60% 55% at 50% 30%,rgba(255,240,210,.22),transparent 70%),linear-gradient(180deg,#120d08,#0a0705);
  border:1px solid var(--hair);box-shadow:inset 0 -60px 80px rgba(0,0,0,.55)}
.window-stage::before{content:"";position:absolute;left:50%;top:-10%;width:70%;height:80%;transform:translateX(-50%);
  background:radial-gradient(50% 60% at 50% 0,rgba(255,236,200,.18),transparent 70%);pointer-events:none}
.window-stage img{position:absolute;left:12%;right:12%;top:8%;width:76%;height:72%;object-fit:contain;filter:drop-shadow(0 18px 22px rgba(0,0,0,.6))}
.window-stage .plinth{position:absolute;left:18%;right:18%;bottom:6%;height:12%;border-radius:3px;
  background:linear-gradient(180deg,#e9e1d1,#bfb4a0);box-shadow:0 -2px 0 rgba(255,255,255,.4) inset,0 14px 30px rgba(0,0,0,.6)}
.window-copy .kicker{font:500 .72rem/1 var(--mono);letter-spacing:.28em;text-transform:uppercase;color:var(--brass)}
.window-copy h2{margin:10px 0 8px;font:600 clamp(1.4rem,3.6vw,2rem)/1.15 var(--serif);color:var(--paper)}
.window-copy p{color:var(--ivory-2);margin:0 0 12px}

/* ---- buttons ------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:999px;
  font:600 .95rem/1.1 var(--sans);text-decoration:none;cursor:pointer;border:1px solid transparent;transition:transform .15s ease,background .15s ease}
.btn-gold{background:linear-gradient(180deg,var(--brass-hi),var(--brass));color:var(--ink);box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 8px 22px rgba(201,164,92,.18)}
.btn-gold:hover{transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--paper);border-color:rgba(239,231,216,.35)}
.btn-ghost:hover{border-color:var(--brass-hi);color:var(--brass-hi)}

/* ---- sections ------------------------------------------------------------ */
.room{padding:46px 0;border-top:1px solid rgba(201,164,92,.12)}
.room-h{display:flex;align-items:baseline;gap:14px;margin:0 0 6px}
.room-h h2{margin:0;font:600 clamp(1.5rem,3.6vw,2.1rem)/1.1 var(--serif);color:var(--paper)}
.room-h .no{font:500 .72rem/1 var(--mono);letter-spacing:.24em;color:var(--brass);text-transform:uppercase}
.room-lede{max-width:760px;color:var(--ivory-2);margin:6px 0 20px}

/* the house promises, as brass plaques on the wall */
.plaques{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin:0;padding:0;list-style:none}
.plaques li{padding:16px 16px 14px;border-radius:4px;background:linear-gradient(180deg,rgba(201,164,92,.10),rgba(201,164,92,.04));
  border:1px solid var(--hair)}
.plaques b{display:block;font:600 1rem/1.25 var(--serif);color:var(--brass-hi);margin-bottom:4px}
.plaques span{font-size:.92rem;color:var(--ivory-2)}

/* ---- THE CABINETS (markup from tools/stock-build.js) ----------------------- */
.stock-h{display:none}                 /* the section has its own heading */
.stock-lede{max-width:760px;color:var(--ivory-2);margin:0 0 6px}
.stock-terms{max-width:760px;color:var(--muted);font-size:.92rem;margin:0 0 18px}
.case-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.case-filter button{font:500 .86rem/1 var(--sans);padding:9px 14px;border-radius:999px;cursor:pointer;
  background:transparent;color:var(--paper);border:1px solid rgba(239,231,216,.28)}
.case-filter button[aria-pressed="true"]{background:var(--brass);color:var(--ink);border-color:var(--brass)}
.cabinets{display:flex;flex-direction:column;gap:30px}
.cabinet[hidden]{display:none}
/* a wall case: walnut frame, a lit top rail, glass, shelves */
.cabinet{position:relative;padding:18px 16px 8px;border-radius:6px;
  background:linear-gradient(180deg,rgba(255,240,210,.07),rgba(0,0,0,0) 26%),linear-gradient(180deg,#1a130c,#120d08);
  border:10px solid var(--wal-4);border-image:linear-gradient(180deg,#4a3725,#2a1f15) 1;
  box-shadow:inset 0 3px 0 rgba(255,236,200,.35),inset 0 0 0 1px rgba(255,255,255,.04),0 24px 50px rgba(0,0,0,.5)}
.cabinet::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.05) 0 16%,transparent 16% 58%,rgba(255,255,255,.035) 58% 63%,transparent 63%)}
.cabinet h4{margin:0 0 2px;font:600 1.15rem/1.2 var(--serif);color:var(--brass-hi)}
.cabinet-intro{margin:0 0 16px;font-size:.92rem;color:var(--muted);max-width:640px}
.cabinet-shelf{list-style:none;margin:0;padding:0;display:grid;gap:22px 16px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
@media (max-width:460px){.cabinet-shelf{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 10px}}
.piece{position:relative;display:flex;flex-direction:column;min-width:0;padding-bottom:12px}
/* each shelf is a lit glass edge under the row */
.piece::after{content:"";position:absolute;left:-8px;right:-8px;bottom:0;height:3px;border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(255,236,200,.45),transparent)}
.piece-glass{margin:0}
.piece-photo{display:flex;align-items:center;justify-content:center;aspect-ratio:4/5;border-radius:4px;overflow:hidden;
  background:radial-gradient(70% 55% at 50% 18%,rgba(255,240,215,.16),transparent 70%),#0e0a07;
  border:1px solid rgba(255,255,255,.05)}
.piece-photo img{width:100%;height:100%;object-fit:contain;padding:8px;transition:transform .5s cubic-bezier(.2,.7,.2,1),filter .5s ease;
  filter:drop-shadow(0 10px 12px rgba(0,0,0,.55))}
/* MEMORABILIA THAT COMES ALIVE (23 October 2026): every case has its own
   light, and a slow band of it passes over the glass now and then, each
   case at its own moment; a piece lifts towards you when you reach for it.
   All of it stops for anyone whose device asks for less motion (line 30). */
.piece-photo{position:relative;perspective:900px}
.piece-photo::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(201,164,92,.18),inset 0 18px 30px -18px rgba(255,236,200,.35)}
.piece-photo::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-60%;width:40%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,244,222,.10) 40%,rgba(255,244,222,.22) 50%,rgba(255,244,222,.10) 60%,transparent);
  transform:skewX(-12deg);animation:case-sheen 9s ease-in-out infinite}
.piece:nth-child(2n) .piece-photo::after{animation-delay:-3s}
.piece:nth-child(3n) .piece-photo::after{animation-delay:-6s}
@keyframes case-sheen{0%,62%{left:-60%}88%,100%{left:130%}}
.piece-photo:hover img,.piece-photo:focus-visible img{transform:translateY(-6px) rotateX(6deg) scale(1.045);
  filter:drop-shadow(0 22px 22px rgba(0,0,0,.6)) brightness(1.06)}
.piece-nophoto{font:500 .8rem/1 var(--mono);color:var(--muted);letter-spacing:.08em}
.piece-glass figcaption{margin-top:10px;font-size:.92rem;line-height:1.35}
.piece-glass figcaption b{display:block;font-weight:600;color:var(--paper)}
.piece-ticket{display:inline-block;margin-top:4px;font:500 .72rem/1 var(--mono);letter-spacing:.08em;color:var(--muted)}
.piece-tag{display:inline-block;margin-left:6px;font:700 .72rem/1 var(--mono);padding:3px 7px;border-radius:2px;background:var(--ivory);color:var(--ink)}
/* the price tag: ivory card on a brass string */
.piece-price{position:relative;display:inline-flex;flex-direction:column;align-self:flex-start;margin:10px 0 8px;padding:7px 12px 7px 20px;
  background:var(--ivory);color:var(--ink);border-radius:2px 6px 6px 2px;box-shadow:0 6px 14px rgba(0,0,0,.35)}
.piece-price::before{content:"";position:absolute;left:7px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;
  background:var(--wal-1);box-shadow:0 0 0 1px var(--brass-lo)}
.piece-price b{font:700 1.15rem/1.1 var(--serif)}
.piece-price span{font-size:.72rem;line-height:1.3;color:#5b4a35}
.piece-buy{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin:0 0 6px}
.piece-buy .btn{min-height:42px;padding:9px 16px;font-size:.9rem}
.piece-buy span{font-size:.74rem;color:var(--muted)}
.piece-sold{align-self:flex-start;margin:10px 0 6px;font:700 .8rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  padding:6px 10px;border:1px solid var(--paper);border-radius:2px;transform:rotate(-3deg)}
.piece-label{margin-top:2px;font-size:.9rem}
.piece-label summary{cursor:pointer;color:var(--brass-hi);font-weight:600;padding:6px 0;min-height:36px;list-style:none}
.piece-label summary::-webkit-details-marker{display:none}
.piece-label summary::before{content:"+ ";font-family:var(--mono)}
.piece-label[open] summary::before{content:"\2212 "}
/* an opened label is the museum card: ivory, set on the shelf */
.piece:has(.piece-label[open]){grid-column:1/-1}
.piece:has(.piece-label[open]) .piece-glass{max-width:340px}
.piece-label dl{margin:8px 0 10px;padding:14px 16px;display:grid;gap:8px;background:var(--ivory);color:var(--ink);border-radius:3px;box-shadow:0 10px 24px rgba(0,0,0,.35)}
.piece-label dt{font:600 .68rem/1 var(--mono);text-transform:uppercase;letter-spacing:.14em;color:#7a6446}
.piece-label dd{margin:2px 0 0;line-height:1.45}
.piece-more{display:flex;gap:8px;overflow-x:auto;padding:4px 0 10px}
.piece-more img{height:110px;width:auto;border-radius:3px;display:block;background:#0e0a07}
.piece-acts{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0}
.piece-acts .btn{min-height:40px;padding:8px 14px;font-size:.86rem}
.piece.merle-shown .piece-photo{outline:2px solid var(--brass-hi);outline-offset:3px}

/* ---- the counter, and Merle behind it ------------------------------------ */
.counter-wrap{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:760px){.counter-wrap{grid-template-columns:1fr}}
.merle-card{padding:18px;border-radius:4px;background:linear-gradient(180deg,#22190f,#160f09);border:1px solid var(--hair)}
.merle-fig{width:96px;height:96px;margin:0 0 10px}
.merle-fig svg{width:100%;height:100%}
.merle-card h3{margin:0 0 6px;font:600 1.15rem/1.2 var(--serif);color:var(--brass-hi)}
.merle-card ul{margin:0;padding-left:18px;font-size:.9rem;color:var(--ivory-2)}
.merle-card li{margin:4px 0}
.merle-card .sig{margin:10px 0 0;font:500 .74rem/1.4 var(--mono);color:var(--muted)}
/* the counter top itself: a polished walnut slab with a brass edge */
.countertop{border-radius:4px;padding:16px;background:linear-gradient(180deg,#2b2016,#1b140d);
  border-top:3px solid var(--brass-lo);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.counter{margin:0}
.counter-log{display:flex;flex-direction:column;gap:10px;padding:4px 2px 10px;min-height:120px}
.counter-say{max-width:92%;padding:10px 12px;border-radius:10px;line-height:1.45;font-size:.94rem}
.counter-say.merle{background:var(--ivory);color:var(--ink);align-self:flex-start;border-radius:2px 10px 10px 10px}
.counter-say.guest{background:rgba(201,164,92,.16);border:1px solid var(--hair);align-self:flex-end}
.counter-say .who{display:block;font:600 .66rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;opacity:.65;margin-bottom:4px}
.counter-say.crisis{background:#3a1515;color:#fff;border:1px solid #c66}
.counter-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.counter-chips a,.counter-chips button{font:inherit;font-size:.82rem;padding:6px 10px;border-radius:999px;cursor:pointer;
  background:rgba(0,0,0,.06);border:1px solid rgba(0,0,0,.2);color:inherit;text-decoration:none}
.counter-say.crisis .counter-chips a{border-color:#e9a;color:#fff}
.counter-form{display:flex;gap:8px}
.counter-form input{flex:1;min-width:0;font:inherit;padding:11px 12px;border-radius:999px;border:1px solid rgba(239,231,216,.3);background:rgba(0,0,0,.3);color:var(--paper)}
.counter-suggest{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.counter-suggest .btn{min-height:34px;padding:6px 12px;font-size:.82rem}
.counter-wait{font-size:.9rem;color:var(--muted)}

/* ---- buying and delivery: the questions people ask at a counter ----------- */
.faq{display:grid;gap:8px;max-width:860px}
.faq details{border:1px solid var(--hair);border-radius:4px;background:rgba(255,255,255,.02)}
.faq summary{cursor:pointer;padding:14px 16px;font:600 1rem/1.3 var(--serif);color:var(--paper);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;font-family:var(--mono);color:var(--brass)}
.faq details[open] summary::after{content:"\2212"}
.faq details > div{padding:0 16px 14px;color:var(--ivory-2)}
.faq p{margin:0 0 8px}

/* ---- visit and contact ----------------------------------------------------- */
.visit{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.visit .card{padding:18px;border-radius:4px;border:1px solid var(--hair);background:rgba(255,255,255,.02)}
.visit h3{margin:0 0 6px;font:600 1.05rem/1.2 var(--serif);color:var(--brass-hi)}
.visit p{margin:0 0 12px;color:var(--ivory-2)}
.visit .cta{display:flex;flex-wrap:wrap;gap:8px}

/* the forms life/park-ask.js opens in place */
.ps-ask{margin:14px 0 0;padding:16px;border-radius:4px;background:var(--ivory);color:var(--ink)}
.ps-ask h3,.ps-ask .t{font:600 1rem/1.2 var(--serif);margin:0 0 8px}
.ps-ask label,.ps-ask legend{display:block;font:600 .74rem/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#6b5638;margin:10px 0 4px}
.ps-ask input,.ps-ask textarea{width:100%;font:inherit;padding:10px 12px;border-radius:4px;border:1px solid #b9a98e;background:#fffaf0;color:var(--ink)}
.ps-ask textarea{min-height:96px}
.ps-ask .row{margin-top:12px}
.ps-ask p{font-size:.88rem}
.ps-ask a{color:#6b4a14}

/* ---- the back of the shop ------------------------------------------------- */
.crew-note{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-radius:4px;
  border:1px dashed rgba(201,164,92,.35);color:var(--ivory-2)}
.crew-note b{color:var(--paper);font-family:var(--serif)}
footer.shopfoot{padding:34px 0 60px;border-top:1px solid var(--hair);color:var(--muted);font-size:.88rem}
footer.shopfoot .cols{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between}
footer.shopfoot a{color:var(--ivory-2)}
footer.shopfoot .aoc{max-width:760px;margin-top:16px;font-size:.84rem}
/* ---- the three numbers, at a size a thumb can actually hit ---------------
   44 px, 28 OCTOBER 2026, AND THE STORE IS THE LAST PAGE TO GET IT. Every
   clearing page has had `min-height:44px` on these three links since August,
   for a reason life/park-clearing.css states plainly: they were the smallest
   touch targets on the site and they are the one link on a page somebody may
   be reaching for with a shaking hand. The store kept them as bare inline
   anchors in a sentence, so the target was just the line box.

   MEASURED, NOT GUESSED. tools/help-reach-check.js has been reporting it on
   every run for weeks, as a note rather than a failure, which is exactly how
   a thing stays unfixed: "park-store.html [phone/bottom] Lifeline target is
   102x18, under 44", and the same for 13YARN and Emergency, at phone and at
   laptop. 18 px does not clear WCAG 2.2's 24x24 floor, let alone the 44 the
   rest of the site holds to.

   WHY THEY GET A BORDER TOO. The clearing pages draw these as outlined pills
   rather than underlined words, and a number you are meant to press should
   look pressable before you press it. Two shops that read differently for no
   reason is how a site stops feeling like one place - the same argument that
   put life/park-page.css together. The brass is the store's own, not the
   clearings' gold. */
footer.shopfoot .help{margin-top:12px;font-size:.84rem;
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
footer.shopfoot .help a{color:var(--ivory-2);white-space:nowrap;
  display:inline-flex;align-items:center;min-height:44px;padding:0 12px;
  border:1px solid var(--hair);border-radius:8px;text-decoration:none;
  font-family:var(--mono);font-size:.8rem}
footer.shopfoot .help a:hover{border-color:var(--brass-hi);color:var(--brass-hi)}
footer.shopfoot .help a:focus-visible{outline:3px solid var(--brass-hi);outline-offset:2px}

@media print{.shopnav,.door,.counter-wrap,.case-filter{display:none}body{background:#fff;color:#000}}

/* ---- fixes after the first look on a phone and a laptop ------------------ */
.window-copy .piece-price{color:var(--ink)}
.window-copy .piece-price b{color:var(--ink)}
.window-copy .cta{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-start;margin-top:4px}
/* the sticky menu must not sit over the heading you jumped to */
.room,[id="ask-a-time"],.piece{scroll-margin-top:72px}
@media (max-width:560px){
  .door .since{display:none}
  .shopnav li a{padding:8px 8px;font-size:.86rem}
  /* the chat first, the note about Merle after it */
  .countertop{order:-1}
  .merle-card ul{font-size:.86rem}
  .merle-fig{width:64px;height:64px}
  .window-stage{aspect-ratio:4/3}
}