/* Front Counter AI: the drawn world, for the inner pages.
   Every rule here is lifted from home.css (the home page is the standard and keeps its own copy):
   the sunset street, one drawn shop and the row of five, our storefront with the signs on chains,
   the enamel sign and the black board, the back office, the counter, the phone in a hand.
   Loads after chrome.css (tokens, gold leaf, buttons) and before site.css (the page layouts).
   Change a drawing on the home page: copy the change here. Plan: _panel/design/PLAN.md.
   Numbers the drawings read:
     --o  one shop, 0 (awning up, glass cool) to 1 (awning down, glass warm); set once on load
     --g  a storefront, 0 (gate down) to 1 (open) */

:root {
  --brick-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='16'%3E%3Crect width='44' height='16' fill='%23b5563a'/%3E%3Crect x='2' y='1' width='18' height='5.5' fill='%23c4643f' opacity='.55'/%3E%3Crect x='25' y='9' width='17' height='5.5' fill='%23a64c32' opacity='.6'/%3E%3Crect y='6.8' width='44' height='1.3' fill='%2393432e'/%3E%3Crect y='14.8' width='44' height='1.3' fill='%2393432e'/%3E%3Crect x='21.5' width='1.3' height='7' fill='%2393432e'/%3E%3Crect y='8' width='1.3' height='7' fill='%2393432e'/%3E%3C/svg%3E");
  --wash: linear-gradient(90deg, rgba(255, 216, 160, .34), rgba(255, 216, 160, .05) 40%, rgba(58, 22, 48, .16));
  --walk-bg:
    linear-gradient(180deg, rgba(93, 53, 80, .34) 0, rgba(93, 53, 80, 0) 8px) 0 0 / 100% 8px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 119px, rgba(120, 78, 50, .26) 119px 120px) 0 0 / 100% calc(var(--walk) * .78) no-repeat,
    linear-gradient(180deg, #e8c99f 0, #dfbb8d 78%, #f6e2c0 78% 86%, #b98f68 86% 100%) 0 0 / 100% var(--walk) no-repeat;
  --wood: linear-gradient(180deg, #d79a62 0, #b97c4a 30%, #9a6339 100%);
  --brass: linear-gradient(180deg, #f6dc8a, #d9a441 55%, #b8862e);
  --signboard: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='64' viewBox='0 0 120 64'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23306e55'/%3E%3Cstop offset='.5' stop-color='%23215240'/%3E%3Cstop offset='1' stop-color='%23163a2b'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M10 0H110A10 10 0 0 0 120 10V54A10 10 0 0 0 110 64H10A10 10 0 0 0 0 54V10A10 10 0 0 0 10 0Z' fill='url(%23a)'/%3E%3Cpath d='M13.78 4.5H106.22A14.5 14.5 0 0 0 115.5 13.78V50.22A14.5 14.5 0 0 0 106.22 59.5H13.78A14.5 14.5 0 0 0 4.5 50.22V13.78A14.5 14.5 0 0 0 13.78 4.5Z' fill='none' stroke='%23e2b04c' stroke-width='1.8'/%3E%3Cpath d='M15.81 7.5H104.19A17.5 17.5 0 0 0 112.5 15.81V48.19A17.5 17.5 0 0 0 104.19 56.5H15.81A17.5 17.5 0 0 0 7.5 48.19V15.81A17.5 17.5 0 0 0 15.81 7.5Z' fill='none' stroke='%23e2b04c' stroke-opacity='.45' stroke-width='1'/%3E%3C/svg%3E");
  --chain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12'%3E%3Cellipse cx='4' cy='4' rx='2.3' ry='3.3' fill='none' stroke='%232a241d' stroke-width='1.5'/%3E%3Crect x='3.2' y='7' width='1.6' height='5.6' rx='.8' fill='%234a3d2f'/%3E%3C/svg%3E");
  --enamel: radial-gradient(120% 80% at 30% 0, #2a6650 0, var(--green) 46%, var(--green-dk) 100%);
  --enamel-rim: inset 0 0 0 10px #173d2e, inset 0 0 0 12.5px rgba(217, 164, 65, .9), inset 0 0 0 17px #173d2e, inset 0 0 0 18px rgba(217, 164, 65, .45);
  --inkboard: radial-gradient(120% 70% at 30% 0, #2c2924 0, var(--ink) 60%);
  --ink-rim: inset 0 0 0 6px var(--ink), inset 0 0 0 8px rgba(217, 164, 65, .85), inset 0 0 0 12px var(--ink), inset 0 0 0 13px rgba(217, 164, 65, .4);
  --wall: repeating-linear-gradient(90deg, rgba(143, 63, 42, .05) 0 2px, transparent 2px 48px), linear-gradient(180deg, #fbefdb 0, #f6e2c2 100%);
  --brick-wall: radial-gradient(60% 70% at 50% 45%, rgba(255, 226, 170, .38), rgba(255, 226, 170, 0) 70%), linear-gradient(180deg, rgba(58, 22, 48, .2), rgba(58, 22, 48, 0) 18%, rgba(58, 22, 48, 0) 80%, rgba(58, 22, 48, .25)), var(--wash), var(--brick-img);
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.6 7.4l3 3 5.8-6.8' fill='none' stroke='%231b1a17' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

button { font: inherit; color: inherit; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.gold { -webkit-text-fill-color: transparent; }
.o-go, .go { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

@property --o { syntax: "<number>"; inherits: true; initial-value: 1; }

/* =====================================================================================
   THE STREET: sunset sky, the sun low behind the shop, the row of roofs, the sidewalk
   ===================================================================================== */
.street {
  --g: 1; --b: 1;
  --gate: min(1, max(0, var(--g) / .8));
  --flip: min(1, max(0, (var(--g) - .8) * 6));
  --awn: min(1, max(0, (var(--g) - .3) * 1.8));
  --warm: min(1, max(0, (var(--g) - .15) * 1.6));
  position: relative; isolation: isolate; overflow: clip;
  padding: calc(var(--head-h) + var(--st-top, 40px)) var(--gut) var(--walk);
  background: var(--sky);
}
.street::after { content: ""; position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; height: var(--walk); background: var(--walk-bg); }
.sky { position: absolute; z-index: -1; inset: 0; pointer-events: none; }
.sun { position: absolute; left: var(--sun-x, 47%); bottom: calc(var(--walk) + var(--sun-y, 96px)); width: 0; height: 0; }
.sun::before { content: ""; position: absolute; left: -480px; top: -480px; width: 960px; height: 960px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 246, 222, .95) 0, rgba(255, 234, 186, .6) 8%, rgba(255, 216, 156, .28) 24%, rgba(255, 204, 140, 0) 58%); }
.sun i { position: absolute; left: -54px; top: -54px; width: 108px; height: 108px; border-radius: 50%; background: radial-gradient(circle at 45% 42%, #fffbf2 0, #fff1cc 55%, #ffe1a2 100%); box-shadow: 0 0 60px rgba(255, 236, 190, .9); }
.backrow { position: absolute; left: 0; bottom: var(--walk); width: 100%; height: 170px; object-fit: cover; object-position: 64% bottom; }

/* =====================================================================================
   AWNINGS (every shop's, and our storefront's)
   ===================================================================================== */
.awning { position: relative; z-index: 4; transform-origin: 50% 0; scale: 1 calc(.08 + .92 * var(--aw, 1)); }
.aw-slope { display: block; height: var(--aw-h, 34px); clip-path: polygon(1.6% 0, 98.4% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, rgba(27, 26, 23, .24), rgba(27, 26, 23, 0) 50%, rgba(255, 243, 214, .14)), linear-gradient(90deg, rgba(255, 244, 214, .4), rgba(255, 244, 214, 0) 40%), repeating-linear-gradient(90deg, var(--s1) 0 var(--sw, 14px), var(--s2) var(--sw, 14px) calc(var(--sw, 14px) * 2)); }
.aw-val { position: relative; display: grid; place-items: center; height: var(--val-h, 14px); background: var(--s1); box-shadow: inset 0 2px 0 rgba(27, 26, 23, .18); }
.aw-val::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: var(--sc, 12px); background: radial-gradient(circle at 50% 0, var(--s1) calc(var(--sc, 12px) - .5px), transparent var(--sc, 12px)) 0 0 / calc(var(--sc, 12px) * 2) var(--sc, 12px) repeat-x; }
.aw-green { --s1: var(--green); --s2: var(--linen); }
.aw-brick { --s1: var(--brick); --s2: var(--linen); }
.aw-thin { --sw: 8px; }
.valance { font: 800 max(8px, 1.3cqw)/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--linen); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 92%; }

/* =====================================================================================
   ONE DRAWN SHOP: roofline, the black name board, the awning, the lit window with every
   offer painted on the glass as a link, the sill. Five of them make the street.
   ===================================================================================== */
.shop {
  --o: 1;
  --awo: min(1, max(0, var(--o) * 2.2));
  --wm: min(1, max(0, (var(--o) - .36) * 1.65));
  display: flex; flex-direction: column; justify-content: flex-end; min-width: 0;
}
/* the awning drops and the glass warms once, as the page arrives */
.shop { animation: shop-warm 1.5s cubic-bezier(.3, .75, .3, 1) calc(.3s + var(--i, 0) * .14s) both; }
@keyframes shop-warm { from { --o: 0; } to { --o: 1; } }
.still .shop { animation: none; }
@media (prefers-reduced-motion: reduce) { .shop { animation: none; } }

.shop-face { --pad: max(10px, min(1vw, 16px)); --frame: var(--green); --frame-in: var(--green-dk); position: relative; margin: 0 5px; padding: 0 var(--pad); background: var(--wash), var(--brick-img); box-shadow: inset 6px 0 0 rgba(255, 217, 168, .38), inset -6px 0 0 rgba(27, 26, 23, .16); }
.shop-2 .shop-face { --frame: var(--brick-dk); --frame-in: var(--brick-lo); background: var(--wash), repeating-linear-gradient(180deg, rgba(143, 63, 42, .07) 0 1px, transparent 1px 22px), #f0d3a6; }
.shop-3 .shop-face { --frame: #efdcb6; --frame-in: #d9c193; background: var(--wash), repeating-linear-gradient(90deg, rgba(0, 0, 0, .14) 0 2px, transparent 2px 30px), var(--green); }
.shop-4 .shop-face { background: var(--wash), linear-gradient(rgba(93, 53, 80, .16), rgba(93, 53, 80, .16)), var(--brick-img); }
.shop-5 .shop-face { background: var(--wash), repeating-linear-gradient(180deg, rgba(143, 63, 42, .06) 0 1px, transparent 1px 18px), #e8c88a; }

/* rooflines: a cornice, an arched parapet, a stepped false front, dentils, a gable */
.roof { position: relative; margin: 0 calc(var(--pad) * -1); }
.roof svg { width: 100%; height: 100%; }
.roof-flat { height: 34px; margin: 0 calc(var(--pad) * -1 - 6px); background: linear-gradient(rgba(255, 217, 168, .55) 0 3px, transparent 3px), linear-gradient(var(--green-dk) 0 12px, var(--green) 12px 26px, transparent 26px), repeating-linear-gradient(90deg, var(--green-dk) 0 7px, transparent 7px 14px) 0 26px / 100% 7px no-repeat; }
.roof-arch { height: 62px; margin: -24px calc(var(--pad) * -1 - 6px) 0; }
.roof-step { height: 54px; margin-top: -26px; }
.roof-step::before { content: ""; position: absolute; inset: 0 -6px; clip-path: polygon(0 100%, 0 52%, 18% 52%, 18% 22%, 34% 22%, 34% 0, 66% 0, 66% 22%, 82% 22%, 82% 52%, 100% 52%, 100% 100%); background: linear-gradient(rgba(255, 217, 168, .6) 0 3px, var(--green-dk) 3px 100%); }
.roof-step::after { content: ""; position: absolute; left: -6px; right: -6px; bottom: 0; height: 9px; background: var(--linen); box-shadow: 0 3px 0 rgba(27, 26, 23, .2); }
.roof-dentil { height: 40px; margin: 0 calc(var(--pad) * -1 - 6px); background: linear-gradient(rgba(255, 233, 196, .8) 0 3px, #efdcb6 3px 15px, transparent 15px), repeating-linear-gradient(90deg, #efdcb6 0 9px, transparent 9px 15px) 0 18px / 100% 10px no-repeat, linear-gradient(transparent 31px, #efdcb6 31px 37px, transparent 37px); box-shadow: 0 3px 0 rgba(27, 26, 23, .12); }
.roof-gable { height: 64px; margin: -30px calc(var(--pad) * -1 - 6px) 0; }
.oculus { position: absolute; left: 50%; bottom: 10px; width: 26px; height: 26px; translate: -50% 0; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff6dc, #ffe3a3 55%, #f3bb62); box-shadow: 0 0 0 4px var(--brick-dk), 0 0 0 6px rgba(255, 217, 168, .6); }

/* the name board: gold leaf on black */
.shop-sign { position: relative; margin-top: 16px; min-height: 66px; display: grid; place-items: center; padding: 10px 10px; border-radius: 4px; background: var(--ink); box-shadow: inset 0 0 0 5px var(--ink), inset 0 0 0 6.5px rgba(217, 164, 65, .75), 0 8px 14px -8px rgba(60, 20, 10, .7); }
.shop-5 .shop-sign { background: var(--green); box-shadow: inset 0 0 0 5px var(--green), inset 0 0 0 6.5px rgba(217, 164, 65, .8), 0 8px 14px -8px rgba(60, 20, 10, .6); }
.shop-name { font: 700 max(14.5px, min(1.12vw, 17px))/1.18 var(--disp); letter-spacing: -.015em; text-align: center; text-wrap: balance; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .55)); }
.shop-sign a { text-decoration: none; }
.shop-sign a::after { content: ""; position: absolute; inset: 0; border-radius: 4px; }
.shop-sign:has(a):hover { background: #2b2925; }
.shop-5 .shop-sign:has(a):hover { background: #24573f; }
.shop-sign:has(a:focus-visible) { outline: 3px solid var(--glow); outline-offset: 3px; }
.shop-sign a:focus-visible { outline: none; }
.shop-awning { --aw: var(--awo); --aw-h: 30px; --val-h: 11px; --sc: 10px; margin: 14px -8px 0; }
.shop-front { position: relative; margin-top: 16px; padding: 7px; background: var(--frame); box-shadow: inset 0 0 0 1px rgba(27, 26, 23, .3); }
.shop-front::after { content: ""; position: absolute; inset: 0 0 auto; height: 50px; pointer-events: none; background: linear-gradient(rgba(74, 31, 51, .38), rgba(74, 31, 51, 0)); opacity: var(--awo); }
.shop-win { min-width: 0; padding: 5px; background: var(--frame-in); }
.glass { position: relative; isolation: isolate; container-type: inline-size; min-height: 330px; display: grid; place-items: center; padding: 14px 6px; overflow: hidden; text-align: center; background: linear-gradient(180deg, #fae0c4, #e7b8a0 45%, #b68e8c); }
.glass::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(90% 70% at 50% 30%, #fffaf0 0, rgba(255, 246, 220, 0) 70%), linear-gradient(180deg, #fff6dc, #ffe3a3 55%, #f3bb62); opacity: var(--wm); }
.glass::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(112deg, transparent 20%, rgba(255, 246, 230, .32) 28%, transparent 38%, transparent 62%, rgba(255, 246, 230, .22) 66%, transparent 71%); opacity: calc(.95 - var(--wm) * .6); }
.paint { position: relative; width: 100%; min-width: 0; display: grid; justify-items: stretch; gap: 0; opacity: calc(.26 + var(--wm) * .74); translate: 0 calc((1 - var(--wm)) * 10px); }

/* one offering painted on the glass: the whole line is the link */
.offer { position: relative; display: grid; justify-items: center; gap: 6px; padding: 12px 6px 12px; border-radius: 10px; color: var(--ink); text-decoration: none; transition: background .2s ease, box-shadow .2s ease; }
.offer + .offer { margin-top: 10px; }
.offer + .offer::before { content: ""; position: absolute; left: 12%; right: 12%; top: -6px; border-top: 2px dotted rgba(27, 26, 23, .32); }
a.offer:hover { background: rgba(255, 250, 241, .62); box-shadow: 0 8px 18px -14px rgba(70, 25, 10, .8); }
a.offer:focus-visible { outline: 3px solid var(--ink); outline-offset: 0; }
.o-name { font: 700 min(15px, 8.4cqw)/1.22 var(--disp); letter-spacing: -.02em; text-wrap: balance; }
.o-price { font: 800 min(40px, 21cqw)/1 var(--disp); letter-spacing: -.04em; white-space: nowrap; }
.o-price .gold { padding: 0 .04em; }
.o-word { margin: 2px 0; font: 800 min(21px, 11.5cqw)/1.1 var(--disp); letter-spacing: -.03em; color: var(--brick-dk); text-wrap: balance; }
.o-note { display: block; max-width: 15em; font: 700 13.5px/1.4 var(--body); color: var(--ink-2); text-wrap: balance; }
.o-note b { color: var(--ink); font-weight: 800; }
.o-go { display: inline-block; flex: none; width: 15px; height: 15px; margin-left: 4px; vertical-align: -3px; color: var(--brick-dk); transition: transform .2s var(--ease); }
a.offer:hover .o-go { transform: translateX(3px); }
.shop-sill { height: 34px; margin: 0 calc(var(--pad) * -1); background: linear-gradient(#f6e2c0 0, #ead2aa 8px, var(--frame) 8px, var(--frame) calc(100% - 9px), var(--brick-lo) calc(100% - 9px)); }

/* the street: five shops side by side on the sidewalk, a caption under each */
.row-wrap { --cap-h: 118px; position: relative; isolation: isolate; padding: 46px var(--gut) 0; }
.row-wrap::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: var(--cap-h); background: var(--walk-bg), var(--sand); }
.row-back { position: absolute; z-index: -1; left: 0; right: 0; bottom: var(--cap-h); width: 100%; height: 170px; object-fit: cover; object-position: left bottom; opacity: .8; }
.shops { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; }
.shop-cap { height: var(--cap-h); margin: 0 5px; padding: calc(var(--walk) + 10px) 8px 0; font-size: 14.5px; line-height: 1.42; font-weight: 600; color: var(--ink-2); text-align: center; text-wrap: balance; }

/* one shop on its own, large: the hero of a service page */
.shop-solo .shop-face { --pad: 18px; margin: 0; box-shadow: inset 7px 0 0 rgba(255, 217, 168, .4), inset -7px 0 0 rgba(27, 26, 23, .16), 0 30px 60px -40px rgba(70, 25, 10, .6); }
.shop-solo .roof-flat { height: 40px; background: linear-gradient(rgba(255, 217, 168, .55) 0 3px, transparent 3px), linear-gradient(var(--green-dk) 0 14px, var(--green) 14px 31px, transparent 31px), repeating-linear-gradient(90deg, var(--green-dk) 0 8px, transparent 8px 16px) 0 31px / 100% 8px no-repeat; }
.shop-solo .roof-arch { height: 78px; margin-top: -30px; }
.shop-solo .roof-step { height: 66px; margin-top: -30px; }
.shop-solo .roof-gable { height: 80px; margin-top: -36px; }
.shop-solo .oculus { width: 30px; height: 30px; bottom: 12px; }
.shop-solo .shop-sign { margin-top: 20px; min-height: 84px; padding: 12px 18px; box-shadow: inset 0 0 0 7px var(--ink), inset 0 0 0 8.5px rgba(217, 164, 65, .75), 0 12px 18px -10px rgba(60, 20, 10, .7); }
.shop-solo.shop-5 .shop-sign { box-shadow: inset 0 0 0 7px var(--green), inset 0 0 0 8.5px rgba(217, 164, 65, .8), 0 12px 18px -10px rgba(60, 20, 10, .6); }
.shop-solo .shop-name { font-size: max(19px, min(1.85vw, 26px)); }
.shop-solo .shop-awning { --aw-h: 42px; --val-h: 15px; --sc: 13px; --sw: 19px; margin: 18px -12px 0; }
.shop-solo .aw-thin { --sw: 11px; }
.shop-solo .shop-front { margin-top: 22px; padding: 10px; }
.shop-solo .shop-front::after { height: 70px; }
.shop-solo .shop-win { padding: 7px; }
.shop-solo .glass { min-height: 300px; padding: 26px 16px; }
.shop-solo .offer { gap: 10px; padding: 0; }
.shop-solo .o-name { font-size: min(21px, 6cqw); }
.shop-solo .o-price { font-size: min(86px, 23cqw); }
.shop-solo .o-word { font-size: min(40px, 11cqw); }
.shop-solo .o-note { max-width: 17em; font-size: 17px; line-height: 1.35; }
.shop-solo .o-extra { display: block; max-width: 16em; margin-top: 4px; padding-top: 12px; border-top: 2px dotted rgba(27, 26, 23, .32); font: 700 max(15px, min(1.25vw, 17.5px))/1.3 var(--disp); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.shop-solo .shop-sill { height: 44px; }

/* =====================================================================================
   OUR STOREFRONT: the name board, the awning, the window with the five signs on chains,
   the door, the gate (down on the page that is not there)
   ===================================================================================== */
.sf {
  container-type: inline-size; position: relative; padding: 0 3cqw;
  background: var(--wash), var(--brick-img);
  box-shadow: inset 7px 0 0 rgba(255, 217, 168, .4), inset -7px 0 0 rgba(27, 26, 23, .16), 0 30px 60px -40px rgba(70, 25, 10, .6);
}
.sf-cornice {
  height: 4.4cqw; margin: 0 calc(-3cqw - 8px);
  background:
    linear-gradient(rgba(255, 217, 168, .55) 0 .35cqw, transparent .35cqw),
    linear-gradient(var(--green-dk) 0 1.6cqw, var(--green) 1.6cqw 3.6cqw, transparent 3.6cqw),
    repeating-linear-gradient(90deg, var(--green-dk) 0 .9cqw, transparent .9cqw 1.8cqw) 0 3.6cqw / 100% .8cqw no-repeat;
}
.sf-signrow { position: relative; padding: 2cqw 1.8cqw 0; }
.sf-sign { container-type: inline-size; height: 9.4cqw; display: grid; place-items: center; padding: 0 4%; border-radius: 4px; background: var(--ink); box-shadow: inset 0 0 0 7px var(--ink), inset 0 0 0 8.5px rgba(217, 164, 65, .75), 0 1.2cqw 1.6cqw -.8cqw rgba(60, 20, 10, .7); }
.sf-name { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 min(6.6cqw, calc(138cqw / var(--len, 18)))/1.15 var(--disp); letter-spacing: -.01em; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .6)); }
.sf-tag { position: absolute; right: .4cqw; top: .9cqw; rotate: 5deg; padding: .5cqw 1cqw .45cqw; border-radius: 3px; background: var(--linen); color: var(--brick-dk); font: 800 max(9px, 1.2cqw)/1 var(--body); letter-spacing: .16em; text-transform: uppercase; box-shadow: 0 .4cqw .8cqw -.2cqw rgba(27, 26, 23, .5); }
.sf-rail { height: 1cqw; margin: 2cqw -1.6cqw 0; background: var(--green); box-shadow: 0 .35cqw 0 rgba(27, 26, 23, .22); }
.sf-awning { --aw: var(--awn); --sw: 1.8cqw; --aw-h: 5.2cqw; --val-h: 2.6cqw; --sc: 1.5cqw; margin: 0 -1.8cqw; }
.sf-front { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 12.5cqw; gap: 1.3cqw; margin-top: 2.2cqw; padding: 1.2cqw; background: var(--green); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(27, 26, 23, .35); }
.sf-front::after { content: ""; position: absolute; z-index: 6; inset: 0 0 auto; height: 7cqw; pointer-events: none; background: linear-gradient(rgba(74, 31, 51, .42), rgba(74, 31, 51, 0)); opacity: var(--awn); }
.win { padding: .8cqw; background: var(--green-dk); border-radius: 2px; }
.door { position: relative; display: grid; grid-template-rows: 9% 44% 1fr; gap: .9cqw; padding: .9cqw; background: var(--green-dk); border-radius: 2px; }
.door i { display: block; border-radius: 1px; }
.door-transom, .door-glass { background: linear-gradient(180deg, #fae0c4, #e7b8a0 45%, #b68e8c); position: relative; overflow: hidden; }
.door-transom::after, .door-glass::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #fff6dc, #ffe3a3 55%, #f3bb62); opacity: var(--warm); }
.door-panel { box-shadow: inset 0 0 0 1.5px rgba(27, 26, 23, .35); }
.door-knob { position: absolute; right: 1.6cqw; top: 54%; width: .7cqw; height: 2.6cqw; min-width: 3px; border-radius: 4px; background: var(--gold); }
.open-sign { position: absolute; z-index: 4; top: 5.6cqw; right: calc(1.2cqw + 6.25cqw); width: 11.4cqw; translate: 50% 0; display: grid; justify-items: center; perspective: 460px; pointer-events: none; }
.os-string { width: 100%; height: auto; overflow: visible; }
.os-string path { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.os-string circle { fill: var(--gold); }
.os-card { display: grid; width: 96%; height: 3.8cqw; margin-top: -1px; transform-style: preserve-3d; transform: rotateY(calc(var(--flip) * 180deg)); }
.os-card b { grid-area: 1 / 1; display: grid; place-items: center; border-radius: 3px; backface-visibility: hidden; -webkit-backface-visibility: hidden; font: 800 max(8px, 1.5cqw)/1 var(--body); letter-spacing: .16em; text-transform: uppercase; padding-left: .16em; }
.os-closed { background: var(--ink); color: var(--linen); box-shadow: inset 0 0 0 1.5px rgba(243, 227, 195, .35), 0 6px 10px -4px rgba(0, 0, 0, .6); }
.os-open { transform: rotateY(180deg); background: var(--linen); color: var(--brick-dk); box-shadow: inset 0 0 0 1.5px rgba(143, 63, 42, .5), 0 6px 10px -4px rgba(0, 0, 0, .4), 0 0 22px rgba(255, 227, 163, .8); }
.gate { position: absolute; inset: 0; z-index: 5; translate: 0 calc(var(--gate) * -102%);
  background:
    linear-gradient(transparent 40%, rgba(255, 214, 150, .22)),
    linear-gradient(90deg, rgba(27, 26, 23, .3), transparent 10%, transparent 90%, rgba(27, 26, 23, .3)),
    repeating-linear-gradient(180deg, #f6e8cc 0 1px, #dcc59c 1px 7px, #b49668 7px 11px, #6e5a40 11px 12px); }
.gate-bar { position: absolute; left: 0; right: 0; bottom: 0; height: max(16px, 3cqw); display: flex; justify-content: space-between; padding: 0 22%; background: linear-gradient(var(--green-hi), var(--green-dk)); box-shadow: 0 -1px 0 rgba(27, 26, 23, .6); }
.gate-bar i { width: 5cqw; height: .9cqw; min-height: 5px; margin-top: .9cqw; border-radius: 4px; background: var(--gold); }
.sf-sill { position: relative; z-index: 7; height: 1.5cqw; margin: 0 -1.4cqw; background: linear-gradient(#f6e2c0, #ead2aa); box-shadow: 0 .35cqw 0 rgba(27, 26, 23, .22); }
.sill-bell { position: absolute; bottom: 70%; right: 20cqw; width: 6.4cqw; height: auto; }
.sf-bulk { display: grid; place-items: center; height: 6.6cqw; background: var(--green); box-shadow: inset 0 0 0 .6cqw var(--green), inset 0 0 0 .8cqw rgba(27, 26, 23, .3); border-bottom: 1.4cqw solid var(--brick-lo); }

.sf-ours .sf-signrow { padding-top: 1.6cqw; }
.sf-ours .sf-sign { height: 8.2cqw; }
.sf-ours .sf-awning { --aw-h: 4.4cqw; --val-h: 3.4cqw; --sc: 1.6cqw; }
.sf-ours .valance { font-size: max(9.5px, 1.62cqw); letter-spacing: .2em; max-width: 94%; color: var(--glow); }
.sf-ours .sf-front { grid-template-columns: minmax(0, 1fr) 13cqw; }
.sf-ours .door { grid-template-rows: 9% 40% 1fr; }
.sf-ours .open-sign { right: calc(1.2cqw + 6.5cqw); }
.sf-ours .sill-bell { right: 7.5cqw; }
.sf-ours .sf-bulk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.2cqw; place-items: stretch; padding: 1.1cqw 3.2cqw; height: 6.2cqw; }
.sf-ours .sf-bulk i { border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(27, 26, 23, .35), inset 1px 1px 0 2px rgba(21, 54, 40, .9), inset -1px -1px 0 2px rgba(255, 217, 168, .16); }

/* the window: warm glass, a brass rod across the top, signs on chains */
.shopwin { position: relative; isolation: isolate; height: 100%; padding: 5.6cqw 0 3.8cqw; overflow: hidden; border-radius: 3px; background: linear-gradient(180deg, #fae0c4, #e7b8a0 45%, #b68e8c); box-shadow: inset 0 0 0 1.5px rgba(27, 26, 23, .7); }
.shopwin::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(70% 56% at 50% 40%, #fffaf0 0, rgba(255, 246, 220, 0) 72%), linear-gradient(180deg, #fff3d6 0, #ffe3a3 52%, #f3bb62 100%); opacity: var(--warm); }
.shopwin::after { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: linear-gradient(112deg, transparent 8%, rgba(255, 250, 238, .5) 15%, transparent 24%, transparent 72%, rgba(255, 250, 238, .34) 77%, transparent 83%); }
.sw-rod { position: absolute; z-index: 2; left: 5cqw; right: 5cqw; top: 2.1cqw; height: max(4px, .8cqw); border-radius: 99px; background: linear-gradient(180deg, #fff3cf 0, #e7b955 45%, #8a5f22 100%); box-shadow: 0 .3cqw .4cqw rgba(27, 26, 23, .35); }
.sw-rod::before, .sw-rod::after { content: ""; position: absolute; bottom: 30%; width: max(4px, .8cqw); height: 3cqw; border-radius: 2px 2px 3px 3px; background: linear-gradient(90deg, #2a241d, #4e453c 50%, #2a241d); }
.sw-rod::before { left: 1.2cqw; }
.sw-rod::after { right: 1.2cqw; }

.signs { --gap: max(10px, 2.2cqw); --sw: 84%; --drop: 3.1cqw; --b: max(11px, 1.9cqw); position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--gap); filter: drop-shadow(0 max(5px, .8cqw) max(4px, .6cqw) rgba(40, 14, 4, .36)); }
.signs::before { content: ""; position: absolute; z-index: -1; top: calc(var(--drop) * -1); bottom: 30%; left: calc((100% - var(--sw)) / 2 + var(--sw) * .12 - 4px); right: calc((100% - var(--sw)) / 2 + var(--sw) * .12 - 4px); pointer-events: none; background: var(--chain) 0 0 / 8px 12px repeat-y, var(--chain) 100% 0 / 8px 12px repeat-y; }
.sign {
  position: relative; display: flex; align-items: center; gap: max(10px, 1.6cqw);
  width: var(--sw); min-height: max(46px, 8.6cqw); padding: 0 max(4px, .8cqw) 0 0;
  border: var(--b) solid transparent; border-image: var(--signboard) 22 fill / var(--b) / 0 stretch;
  color: var(--glow); text-decoration: none;
  transition: translate .25s var(--ease), filter .2s ease;
}
.sign::before, .sign::after { content: ""; position: absolute; top: calc(var(--b) * -1 - max(4px, .6cqw)); width: max(9px, 1.35cqw); height: max(9px, 1.35cqw); border-radius: 50%; pointer-events: none; background: radial-gradient(circle closest-side, #2a1d10 0 34%, #fff1c4 40%, #e2b04c 58%, #8a5f22 86%, rgba(138, 95, 34, 0) 100%); }
.sign::before { left: calc(12% - var(--b) * .76 - max(4.5px, .675cqw)); }
.sign::after { right: calc(12% - var(--b) * .76 - max(4.5px, .675cqw)); }
.sign-ic { flex: none; display: grid; place-items: center; width: max(30px, 5.2cqw); height: max(30px, 5.2cqw); border-radius: 50%; color: var(--green-dk); background: radial-gradient(circle at 36% 30%, #fffaf0 0, #f3e3c3 58%, #e2c690 100%); box-shadow: inset 0 0 0 max(1.5px, .25cqw) rgba(184, 134, 46, .9), 0 1px 2px rgba(0, 0, 0, .4); }
.sign-ic svg { width: 58%; height: 58%; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.sign-t { flex: 1; min-width: 0; font: 700 max(14px, 2.7cqw)/1.15 var(--disp); letter-spacing: -.022em; text-wrap: balance;
  background: linear-gradient(180deg, #fff7dc 0, #f7da86 46%, #e3ae48 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .5)); }
.sign-go { flex: none; width: max(13px, 2cqw); height: auto; fill: none; stroke: var(--gold); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease); }
.sign:hover, .sign:focus-visible { translate: 0 -3px; filter: brightness(1.12); }
.sign:hover .sign-go, .sign:focus-visible .sign-go { transform: translateX(4px); }
.sign:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
@media (min-width: 641px) {
  @container (max-width: 610px) {
    .sf-ours .sf-front { grid-template-columns: minmax(0, 1fr) 11cqw; }
    .sf-ours .open-sign { right: calc(1.2cqw + 5.5cqw); width: 10cqw; }
    .sf-ours .signs { --sw: 90%; }
  }
}

/* =====================================================================================
   THE ENAMEL SIGN (green, screws, gold type) and THE BLACK BOARD (gold double rim)
   ===================================================================================== */
.brickwall { position: relative; padding: max(64px, min(6.4vw, 104px)) var(--gut); background: var(--brick-wall); }
.enamel { position: relative; max-width: 800px; margin: 0 auto; padding: max(44px, min(5vw, 68px)) max(26px, min(6vw, 84px)) max(36px, min(4vw, 56px)); border-radius: 18px; background: var(--enamel); box-shadow: var(--enamel-rim), 0 40px 60px -30px rgba(40, 10, 5, .75), 0 0 0 1px rgba(27, 26, 23, .4); }
.screw { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff3cf, #d9a441 45%, #8a5f22); box-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.screw::after { content: ""; position: absolute; left: 3px; right: 3px; top: 7px; height: 2px; background: rgba(60, 40, 10, .7); rotate: 35deg; }
.s1 { left: 28px; top: 28px; } .s2 { right: 28px; top: 28px; } .s3 { left: 28px; bottom: 28px; } .s4 { right: 28px; bottom: 28px; }
.s2::after { rotate: -20deg; } .s3::after { rotate: 80deg; }
.enamel-h { font: 800 max(26px, min(3.2vw, 44px))/1.12 var(--disp); letter-spacing: -.03em; text-align: center; text-wrap: balance; }
.enamel-h .gold { filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .45)); }
.enamel-say { max-width: 34em; margin: 14px auto 0; color: rgba(243, 227, 195, .9); font: 500 17px/1.5 var(--body); text-align: center; text-wrap: balance; }
.enamel-list { margin-top: max(26px, min(3vw, 40px)); }
.enamel-list li { padding: 16px 6px; border-top: 1.5px dashed rgba(217, 164, 65, .42); color: var(--linen); font: 600 var(--t-m)/1.4 var(--body); text-align: center; text-wrap: balance; }
.enamel-list li:last-child { border-bottom: 1.5px dashed rgba(217, 164, 65, .42); }
.enamel-pairs li b { display: block; font-weight: 700; color: var(--cream); }
.enamel-pairs li span { display: block; margin-top: 4px; font-size: 16.5px; font-weight: 500; color: rgba(243, 227, 195, .86); }
.inkboard { position: relative; border-radius: 14px; background: var(--inkboard); box-shadow: var(--ink-rim), 0 30px 44px -26px rgba(60, 20, 10, .75); color: var(--linen); }
.plate { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 5px 12px 4px; border-radius: 3px; background: var(--brass); color: var(--ink); font: 800 13.5px/1.15 var(--body); letter-spacing: .01em; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 2px 0 rgba(27, 26, 23, .35); }

/* =====================================================================================
   THE BACK OFFICE: the striped wall, a window on the street and its beam, a shelf, a desk
   ===================================================================================== */
.office { position: relative; isolation: isolate; overflow: clip; background: var(--wall); }
.of-window { position: absolute; left: 0; top: 0; width: 30%; height: 184px; padding: 9px; border-radius: 4px 4px 2px 2px; background: var(--green); box-shadow: inset 0 0 0 1px rgba(27, 26, 23, .35), 0 18px 26px -20px rgba(70, 25, 10, .7); }
.of-window::before { content: ""; position: absolute; z-index: 2; left: 9px; right: 9px; top: 50%; height: 7px; translate: 0 -50%; background: var(--green); }
.of-window::after { content: ""; position: absolute; left: -10px; right: -10px; bottom: -12px; height: 12px; border-radius: 2px; background: linear-gradient(#f6e2c0, #ead2aa); box-shadow: 0 4px 0 rgba(27, 26, 23, .18); }
.of-glass { position: relative; height: 100%; overflow: hidden; border-radius: 2px; background: var(--sky); }
.of-glass::after { content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; left: 50%; width: 7px; translate: -50% 0; background: var(--green); }
.of-glass img { position: absolute; left: -40%; bottom: 0; width: 260%; max-width: none; height: 66%; object-fit: cover; object-position: 30% bottom; }
.of-sun { position: absolute; left: 66%; top: 50%; width: 52px; height: 52px; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle at 45% 42%, #fffbf2 0, #fff1cc 55%, #ffe1a2 100%); box-shadow: 0 0 46px 14px rgba(255, 236, 190, .85); }
.of-beam { position: absolute; z-index: 0; left: 6%; top: 60px; width: 22%; height: 400px; background: linear-gradient(180deg, rgba(255, 226, 158, .62), rgba(255, 226, 158, 0) 88%); transform: skewX(28deg); transform-origin: 0 0; filter: blur(5px); pointer-events: none; }
.of-pin { position: absolute; z-index: 2; left: 50%; top: -9px; width: 20px; height: 20px; translate: -50% 0; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff3cf, #d9a441 45%, #8a5f22); box-shadow: 0 3px 4px rgba(27, 26, 23, .45); }
.floor { position: absolute; z-index: -1; left: 50%; width: 300vw; height: 1400px; translate: -50% 0; background: linear-gradient(180deg, rgba(27, 26, 23, .22), rgba(27, 26, 23, 0) 26px), repeating-linear-gradient(90deg, rgba(143, 63, 42, .1) 0 1px, transparent 1px 84px), linear-gradient(180deg, #e3c79a, #ecd6ad 400px); }

/* =====================================================================================
   THE COUNTER: a bell, a desk phone, a microphone on a wood top over a green front
   ===================================================================================== */
.counter { position: relative; isolation: isolate; overflow: clip; }
.ct-wall { position: absolute; z-index: -2; inset: 0; background: linear-gradient(180deg, #fbefdb 0, #f7e3c3 100%); overflow: hidden; }
.ct-beam { position: absolute; top: -12%; left: 6%; width: 17%; height: 110%; background: linear-gradient(180deg, rgba(255, 228, 160, .75), rgba(255, 228, 160, 0) 82%); transform: skewX(-26deg); filter: blur(3px); }
.ct-beam-2 { left: 30%; width: 7%; opacity: .7; }
.ct-desk { --obj: 210px; --top: 30px; --front: 156px; position: relative; max-width: 1060px; margin: max(40px, min(4vw, 60px)) auto 0; }
.ct-desk::before { content: ""; position: absolute; z-index: 1; left: -40px; right: -40px; top: var(--obj); height: var(--top); border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #d0935d 0, #b4774a 30%, #94603a 100%); box-shadow: inset 0 2px 0 rgba(255, 233, 196, .7), 0 10px 14px -6px rgba(27, 26, 23, .55); }
.ct-desk::after { content: ""; position: absolute; z-index: 0; left: -26px; right: -26px; top: calc(var(--obj) + var(--top)); height: var(--front); background: linear-gradient(180deg, rgba(27, 26, 23, .3), rgba(27, 26, 23, 0) 18px), var(--green); }
.ct-items { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ct-item { position: relative; display: grid; grid-template-rows: var(--obj) var(--top) var(--front); justify-items: center; padding: 0; border: 0; background: none; cursor: pointer; text-align: center; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.ct-item::after { content: ""; position: absolute; left: 7%; right: 7%; top: calc(var(--obj) + var(--top) + 18px); bottom: 20px; border: 1.5px solid rgba(217, 164, 65, .5); border-radius: 4px; pointer-events: none; }
.ct-item:focus-visible { outline: none; }
.ct-item:focus-visible .ct-plate { outline: 3px solid var(--glow); outline-offset: 4px; }
.ct-obj { grid-row: 1; align-self: end; display: block; width: var(--w); margin-bottom: -10px; transition: transform .25s var(--ease); }
.ct-obj svg { width: 100%; height: auto; overflow: visible; }
.ct-item:hover .ct-obj { transform: translateY(-5px); }
.ct-bell { --w: 190px; }
.ct-phone { --w: 250px; }
.ct-mic { --w: 124px; }
.ct-plate { grid-row: 3; align-self: center; position: relative; z-index: 1; display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 8px; max-width: 82%; padding: 12px 18px; border-radius: 6px; background: var(--brass); color: var(--ink); font: 800 16.5px/1.25 var(--body); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -1px 0 rgba(27, 26, 23, .25), 0 3px 0 rgba(27, 26, 23, .35); }
.ct-plate .sl-chip-ai { background: var(--ink); color: var(--glow); }
.bell-body, .bell-knob, .bell-ring, .handset, .cord, .mic-wave { transform-box: fill-box; }
.bell-ring { opacity: 0; }
.mic-wave { opacity: 0; transform-origin: 50% 50%; }
.ct-mic.is-on .mic-wave, .ct-mic:hover .mic-wave { opacity: 1; }
.handset { transform-origin: 0% 100%; transition: transform .5s var(--ease); }
.ct-phone:hover .handset { transform: translate(-3px, -12px) rotate(-5deg); }
.ct-floor { top: calc(var(--obj) + var(--top) + var(--front)); }

/* =====================================================================================
   THE PHONE IN A HAND, and the text thread on its screen
   ===================================================================================== */
.hand-stage { position: relative; display: grid; place-items: center; }
.hand-sun { position: absolute; width: 560px; height: 560px; max-width: 130%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #fff3d6 0, #ffe6b4 30%, rgba(255, 214, 150, .5) 52%, rgba(255, 214, 150, 0) 70%); }
.hand { position: relative; width: min(420px, 100%); aspect-ratio: 420 / 640; rotate: -6deg; }
.hand-back, .hand-front { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hand-front { z-index: 2; pointer-events: none; }
.hand .phone { position: absolute; z-index: 1; left: 22.6%; top: 6.25%; width: 57.2%; height: 78.2%; rotate: 0deg; }
.phone { padding: 3.6%; border-radius: 13% / 6.4%; background: var(--ink); box-shadow: inset 0 0 0 2px #3d362f, inset 0 0 0 4px #121110, 0 40px 60px -34px rgba(70, 25, 10, .7); }
.phone-glass { position: relative; height: 100%; overflow: hidden; border-radius: 10.5% / 5%; background: var(--paper); container-type: inline-size; }
.phone-isle { position: absolute; z-index: 5; top: 2.2%; left: 50%; width: 30%; height: 4.4%; max-height: 22px; translate: -50% 0; border-radius: 99px; background: var(--ink); }
.sp { position: absolute; inset: 0; display: flex; flex-direction: column; padding-top: 13cqw; font-size: 4.8cqw; line-height: 1.35; color: var(--ink); }
.sp-top { display: flex; align-items: center; gap: .5em; padding: .2em .9em .7em; border-bottom: 1px solid rgba(27, 26, 23, .08); }
.sp-back { color: var(--brick); font-size: 1.9em; line-height: .8; font-weight: 600; }
.sp-av { display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: 50%; background: var(--brick); }
.sp-av svg { width: 62%; height: auto; }
.sp-who { display: grid; }
.sp-who b { font-weight: 800; font-size: .98em; }
.sp-who span { font-size: .74em; color: var(--ink-3); }
.sp-log { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: .55em; padding: .8em; }
.sp-day { margin-bottom: auto; align-self: center; font-weight: 700; font-size: .72em; color: var(--ink-3); }
.sp-in { align-self: flex-start; max-width: 88%; padding: .6em .8em; border-radius: 1.1em 1.1em 1.1em .3em; background: #efe3cf; font-size: .9em; line-height: 1.38; }
.sp-in b { font-weight: 800; }
.sp-out { align-self: flex-end; max-width: 80%; padding: .6em .8em; border-radius: 1.1em 1.1em .3em 1.1em; background: var(--green); color: var(--cream); font-size: .9em; line-height: 1.38; }
.sp-img { position: relative; align-self: flex-start; width: 74%; border-radius: 1em; overflow: hidden; border: 1px solid rgba(27, 26, 23, .14); box-shadow: 0 .6em 1.2em -.8em rgba(70, 25, 10, .5); }
.sp-shot { height: 13em; overflow: hidden; background: var(--paper); }
.sp-shot .mock { font-size: 1.75cqw; height: auto; }
.sp-tag { position: absolute; left: .5em; bottom: .5em; padding: .3em .45em .25em; border-radius: .3em; background: var(--ink); color: var(--glow); font-weight: 800; font-size: .58em; letter-spacing: .12em; text-transform: uppercase; }
.sp-bar { display: flex; align-items: center; margin: 0 .7em .9em; height: 2.6em; padding: 0 .3em 0 .9em; border-radius: 99px; border: 1.5px solid rgba(27, 26, 23, .18); background: #fff; }
.sp-bar span { font-size: .84em; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-bar i { margin-left: auto; display: grid; place-items: center; width: 1.9em; height: 1.9em; flex: none; border-radius: 50%; background: var(--green); color: var(--cream); font-style: normal; font-weight: 800; font-size: .9em; }
.mock { --m-ink: #1b1a17; --m-bg: #fffaf1; --m-bg-2: #f4e5cc; --m-accent: #1f4d3a; --m-accent-ink: #ffe3a3; }

/* =====================================================================================
   tablets and phones (the same steps as the home page)
   ===================================================================================== */
@media (max-width: 1199px) {
  /* the street becomes cards: three, then two, then one */
  .row-wrap { --cap-h: auto; padding: 30px var(--gut) 0; }
  .row-wrap::after, .row-back { display: none; }
  .shops { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px 22px; max-width: 980px; align-items: stretch; }
  .shops > .shop { grid-column: span 2; padding-top: 40px; border-radius: 18px; overflow: hidden; background: linear-gradient(180deg, #fbdcbc 0, #f4b986 100%); }
  .shops > .shop-4 { grid-column: 2 / span 2; }
  .shops .shop-face { margin: 0 12px; }
  .shops .shop-cap { height: auto; margin: 0; padding: calc(var(--walk) + 12px) 16px 20px; background: var(--walk-bg), var(--sand); }
  .shops .shop-name { font-size: 17px; }
}
@media (max-width: 1023px) {
  .ct-desk { --obj: 150px; --front: 130px; }
  .ct-bell { --w: 130px; }
  .ct-phone { --w: 176px; }
  .ct-mic { --w: 86px; }
  .ct-plate { font-size: 15px; padding: 10px 12px; }
}
@media (max-width: 759px) {
  .shops { grid-template-columns: minmax(0, 1fr); max-width: 440px; gap: 26px; }
  .shops > .shop, .shops > .shop-4 { grid-column: auto; }
  .shops .glass { min-height: 0; padding: 20px 12px; }
  .shops .o-name { font-size: 16px; }
  .shops .o-note { font-size: 14px; }
}
@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .sf { padding: 0 3.4cqw; }
  .sf-cornice { height: 5.6cqw; }
  .sf-signrow { padding: 2.6cqw 1cqw 0; }
  .sf-sign { height: 13cqw; box-shadow: inset 0 0 0 5px var(--ink), inset 0 0 0 6.5px rgba(217, 164, 65, .75); }
  .sf-name { font-size: min(9cqw, calc(150cqw / var(--len, 18))); }
  .sf-tag { font-size: 9px; padding: 4px 6px 3px; top: 0; }
  .sf-awning { --sw: 3.2cqw; --aw-h: 7cqw; --val-h: 4.6cqw; --sc: 2.4cqw; }
  .valance { font-size: 2.6cqw; }
  .sf-front { grid-template-columns: minmax(0, 1fr); margin-top: 3.6cqw; padding: 1.8cqw; }
  .door { display: none; }
  .win { padding: 1.2cqw; }
  .open-sign { top: 1.2cqw; right: 30cqw; width: 19cqw; translate: 0 0; }
  .os-card { height: 6cqw; }
  .os-card b { font-size: 3cqw; }
  .gate-bar i { width: 9cqw; height: 1.6cqw; margin-top: 1.4cqw; }
  .sf-sill { height: 2.4cqw; }
  .sill-bell { width: 11cqw; right: 8cqw; }
  .sf-bulk { height: 11cqw; }
  .sf-ours .sf-front { grid-template-columns: minmax(0, 1fr); }
  .sf-ours .open-sign { display: none; }
  .sf-ours .valance { font-size: 2.55cqw; letter-spacing: .14em; }
  .sf-ours .sf-awning { --val-h: 5.2cqw; --aw-h: 5.4cqw; }
  .sf-ours .sf-bulk { height: 10cqw; padding: 2cqw 4cqw; }
  .sf-ours { padding: 0 1.8cqw; }
  .sf-ours .sf-signrow { padding-top: 2cqw; }
  .sf-ours .sf-sign { height: 9.4cqw; }
  .shopwin { padding: 22px 0 16px; }
  .sw-rod { top: 8px; left: 12px; right: 12px; }
  .sw-rod::before, .sw-rod::after { height: 10px; }
  .signs { --sw: 96%; --gap: max(8px, 1.6cqw); --drop: 2.4cqw; --b: 10px; }
  .sign { min-height: 44px; gap: 9px; padding-right: 4px; }
  .sign-ic { width: 29px; height: 29px; }
  .sign-t { font-size: 13.5px; letter-spacing: -.026em; }
  .sign-go { width: 12px; }

  .shop-solo .shop-face { --pad: 14px; }
  .shop-solo .shop-sign { min-height: 68px; margin-top: 16px; }
  .shop-solo .shop-name { font-size: 19px; }
  .shop-solo .shop-awning { --aw-h: 34px; --val-h: 12px; --sc: 11px; --sw: 16px; margin-top: 14px; }
  .shop-solo .shop-front { margin-top: 16px; }
  .shop-solo .glass { min-height: 0; padding: 28px 14px; }
  .shop-solo .o-price { font-size: min(72px, 23cqw); }
  .shop-solo .o-note { font-size: 16px; }
  .shop-solo .shop-sill { height: 36px; }

  .ct-desk { --obj: 112px; --top: 22px; --front: 118px; }
  .ct-desk::before { left: -24px; right: -24px; }
  .ct-items { gap: 4px; }
  .ct-bell { --w: 94px; }
  .ct-phone { --w: 124px; }
  .ct-mic { --w: 62px; }
  .ct-obj { margin-bottom: -6px; }
  .ct-item::after { left: 3%; right: 3%; top: calc(var(--obj) + var(--top) + 10px); bottom: 10px; }
  .ct-plate { max-width: 94%; padding: 8px 6px; font-size: 13px; line-height: 1.2; }
  .ct-plate .sl-chip-ai { font-size: 9.5px; }

  .enamel-list li { padding: 14px 2px; }
  .s1, .s3 { left: 18px; } .s2, .s4 { right: 18px; } .s1, .s2 { top: 18px; } .s3, .s4 { bottom: 18px; }
}
@media (max-width: 430px) { .sign-go { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .sign, .ct-obj, .handset, .o-go { transition: none; }
  .sign:hover, .sign:focus-visible { translate: none; }
  .ct-item:hover .ct-obj, .ct-phone:hover .handset { transform: none; }
}