/* The Community Thrift Store. The first screen's rules are inline in the page, so it can draw before this file arrives. */

/* Evening and after hours: the wall changes color in its own sheet, with its seams, so changing the light costs almost nothing.
   The stack, bottom to top: the wall and its sheets, the plants and carpet at 1, the name at 2, the doors and the lamp at 4,
   the small controls at 5, and the words at 6. */
.wall-sheet { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; visibility: hidden; pointer-events: none; }
.wall-eve {
  background-color: #efc472;
  background-image:
    repeating-linear-gradient(90deg, transparent 0, transparent 151px, rgba(130, 80, 20, .2) 151px, rgba(130, 80, 20, .2) 152.5px, rgba(255, 240, 190, .3) 152.5px, rgba(255, 240, 190, .3) 154px, transparent 154px, transparent 233px),
    repeating-linear-gradient(90deg, transparent 0, transparent 468px, rgba(130, 80, 20, .2) 468px, rgba(130, 80, 20, .2) 470px, rgba(255, 240, 190, .3) 470px, rgba(255, 240, 190, .3) 472px);
}
.wall-night {
  background-color: #1b1d52;
  background-image:
    repeating-linear-gradient(90deg, transparent 0, transparent 151px, rgba(6, 6, 30, .5) 151px, rgba(6, 6, 30, .5) 152.5px, rgba(140, 150, 240, .2) 152.5px, rgba(140, 150, 240, .2) 154px, transparent 154px, transparent 233px),
    repeating-linear-gradient(90deg, transparent 0, transparent 468px, rgba(6, 6, 30, .5) 468px, rgba(6, 6, 30, .5) 470px, rgba(140, 150, 240, .2) 470px, rgba(140, 150, 240, .2) 472px);
}
.layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; overflow: visible; pointer-events: none; }
/* The records in the bay and the legs: quiet targets. The bay's sits behind the name, so the letters still get their taps. */
.bay-hit { position: absolute; z-index: 1; margin: 0; padding: 0; background: none; border: 0; cursor: pointer; }
/* The bird gets its own layer, and the letters over it get theirs, so the back of the hutch never has to redraw. */
.layer-bird, .layer-front { will-change: transform; }
.layer-front [id^="lt-"] { pointer-events: auto; cursor: pointer; }
.layer-skin [id], .layer-skin [data-rock] { pointer-events: none !important; }
.layer-sheet { opacity: 0; visibility: hidden; }
.rec-o { position: absolute; display: block; pointer-events: none; overflow: visible; will-change: transform; }

/* The word starts plain, before anything has had a chance to paint. */
#plain-i { display: none; }
.play #plain-i { display: inline; }
.play #bird > [data-k="root"] { display: none; }

/* The hutch's paint. Classes, so a Look only has to change the colors above. */
.p { fill: var(--paint); }
.pl { fill: var(--paint-l); }
.pd { fill: var(--paint-d); }
.pdd { fill: var(--paint-dd); }
.sl { stroke: var(--paint-l); fill: none; }
.sd { stroke: var(--paint-d); fill: none; }
.sdd { stroke: var(--paint-dd); fill: none; }
.door-field { fill: var(--door-field); }
.navy { fill: var(--navy); }
.w-pine { fill: var(--pine); }
.w-pine-l { fill: var(--pine-l); }
.w-lip { fill: var(--paint-dd); }

/* A big soft target over the bird. Invisible, because the bird is the button. */
.bird-btn, .rec-hit, .chain-hit {
  position: absolute;
  z-index: 5;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.bird-btn:focus-visible, .rec-hit:focus-visible, .chain-hit:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; border-radius: 12px; }
/* The record and the chain: at least a thumb wide, whatever the size of the hutch. */
.rec-hit { width: 44px; height: 44px; width: max(44px, calc(var(--hutch-w) * .092)); height: max(44px, calc(var(--hutch-w) * .092)); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border-radius: 50%; touch-action: none; }
.chain-hit { width: 44px; height: 44px; width: max(44px, calc(var(--hutch-w) * .06)); height: max(44px, calc(var(--hutch-w) * .09)); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

/* The pause button: a small brass tack on the side of the hutch, in a spot with nothing else to tap. */
.pause-btn {
  position: absolute;
  z-index: 5;
  width: calc(var(--hutch-w) * .036);
  height: calc(var(--hutch-w) * .036);
  min-width: 15px; min-height: 15px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: none; border: 0; padding: 0;
  cursor: pointer;
}
.pause-btn svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* Its target is a thumb wide, and it grows inward, so it can never poke past the hutch and widen the page on a small phone. */
.pause-btn::after { content: ""; position: absolute; right: calc(var(--hutch-w) * -.03); top: 50%; width: 44px; height: 44px; width: max(44px, 100%); height: max(44px, 100%); -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.pause-btn:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; border-radius: 50%; }
.pause-play { display: none; }
.pause-btn[aria-pressed="true"] .pause-play { display: inline; }
.pause-btn[aria-pressed="true"] .pause-bars { display: none; }
[data-day="night"] .pause-btn { opacity: .78; }

/* ---------- the lamp's own light, laid over the room ---------- */
.lamp-glow { position: absolute; z-index: 4; opacity: 0; visibility: hidden; pointer-events: none; }
.lamp-glow svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* The words on the wall flip to light once the wall goes dark. */
.hello, .lede, .address, .caption { transition: color .9s ease; }
[data-day="night"] .room { --ink: #e9eeff; }
[data-day="night"] .hello { color: #e9eeff; }
[data-day="night"] .caption { color: #e9eeff; }
.topnav, .topnav a { transition: background-color .9s ease, color .9s ease; }
[data-day="night"] .topnav { background: #1b1d52; }
[data-day="night"] .topnav a { color: #e9eeff; }
[data-day="night"] body { background: #1b1d52; }
[data-day="evening"] .topnav { background: #efc472; }
[data-day="evening"] body { background: #efc472; }
body { transition: background-color .9s ease; }
.record-cloud, .room-plant { transition: opacity .9s ease; }
[data-day="evening"] .record-cloud { opacity: .92; }
[data-day="night"] .record-cloud { opacity: .4; }
[data-day="night"] .room-plant { opacity: .42; }
.hours-card { transition: opacity .9s ease; }
[data-day="night"] .hours-card { opacity: .94; }
[data-day="night"] .rack { opacity: .5; }

/* The Looks: only the hutch's paint and a few accents change. Yellow and Pine are light enough to need dark lettering. */
[data-look="flamingo"] { --paint: #e8619c; --paint-l: #ff9cc4; --paint-d: #c23d7c; --paint-dd: #8c2c5e; --door-field: #e25a97; --door-ink: #2a0a1c; --door-shade: #ffb7d3; }
[data-look="yellow"] { --paint: #e8c547; --paint-l: #f7e08a; --paint-d: #c49f2a; --paint-dd: #8f7218; --door-field: #e0bb3c; --door-ink: #1f2f5c; --door-shade: #f7e08a; }
[data-look="pine"] { --paint: #c89a5b; --paint-l: #e3bd84; --paint-d: #9c713a; --paint-dd: #6d4c22; --door-field: #bf8f50; --door-ink: #2a1a0a; --door-shade: #e3bd84; --pine: #f1d7a6; --pine-l: #fbeccd; }

/* ---------- every section ---------- */
section { position: relative; }
.more { width: 104px; width: clamp(104px, 7.4vw, 210px); }
h2, h3 { margin: 0; font-weight: 400; }
h2 { font-family: var(--font-name); font-size: 38px; font-size: clamp(36px, 5.6vw, 130px); line-height: 1.05; }
h3 { font-family: var(--font-name); font-size: 34px; font-size: clamp(32px, 4.2vw, 100px); line-height: 1.08; }
.marker { font-family: var(--font-hand); font-size: 27px; font-size: clamp(25px, 2.5vw, 60px); line-height: 1.1; }
.tip { display: inline-block; font-size: 15.5px; font-size: clamp(15.5px, 1.05vw, 26px); line-height: 1.35; font-style: normal; padding: .35em .7em; background: rgba(255, 250, 215, .9); color: var(--ink); -webkit-transform: rotate(-.5deg); transform: rotate(-.5deg); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }

.burst { position: relative; display: inline-block; margin: 0; padding: .72em 1.5em .8em; color: var(--marker); font-family: var(--font-hand); line-height: 1.04; text-align: center; text-decoration: none; -webkit-transform: rotate(-3deg); transform: rotate(-3deg); }
.burst span { position: relative; display: block; }
.burst-bg { position: absolute; left: -4%; top: -10%; width: 108%; height: 120%; display: block; }
.burst-lime, .burst-pink { font-size: 32px; font-size: clamp(30px, 3.4vw, 84px); }
.burst-pink { -webkit-transform: rotate(2.4deg); transform: rotate(2.4deg); }
.burst-green, .burst-yellow { font-size: 21px; padding: 1em 1.7em 1.05em; width: 232px; }

.yellow-card { position: relative; background: var(--pale-yellow); color: var(--marker); font-family: var(--font-hand); }
.item:focus-visible, .thing:focus-visible, .stamp:focus-visible, .pv-btn:focus-visible, .burst:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }

/* ---------- Shop: the hutch carries on down the page ---------- */
.shop {
  --su: 1vw;
  z-index: 1;
  overflow: hidden;
  color: var(--cream);
  background-color: var(--navy);
  background-image:
    linear-gradient(90deg, rgba(4, 9, 32, .34), transparent 7%, transparent 93%, rgba(4, 9, 32, .34)),
    repeating-linear-gradient(90deg, transparent 0, transparent 400px, rgba(10, 18, 50, .9) 400px, rgba(10, 18, 50, .9) 403px, rgba(70, 90, 150, .4) 403px, rgba(70, 90, 150, .4) 405px);
}
/* The cabinet's sides. */
.shop::before, .shop::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 5; width: var(--stile); background: linear-gradient(90deg, var(--paint-l), var(--paint) 26%, var(--paint-d)); pointer-events: none; }
.shop::before { left: 0; }
.shop::after { right: 0; }
.shelf { position: relative; z-index: 4; height: 16px; height: clamp(14px, 1.9vw, 28px); background: linear-gradient(180deg, var(--paint-l) 0, var(--paint-l) 16%, var(--paint) 16%, var(--paint) 70%, var(--paint-d) 70%, var(--paint-d) 100%); box-shadow: 0 10px 20px -6px rgba(2, 5, 20, .8); }

/* Through the clothes: their real store, big, with the rail hanging in front of it. */
.store { --sh: 112vw; --gh: calc(var(--sh) * .98); --by: calc(var(--sh) * .03); position: relative; z-index: 1; height: var(--sh); overflow: hidden; background: #6f6a58; }
.store-photo { display: block; width: 100%; height: 100%; max-width: none; -o-object-fit: cover; object-fit: cover; -o-object-position: 62% 40%; object-position: 62% 40%; }
.store-light { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; background: linear-gradient(180deg, rgba(16, 10, 0, .58) 0, rgba(16, 10, 0, .2) 8%, rgba(16, 10, 0, 0) 22%), linear-gradient(0deg, rgba(10, 12, 30, .34) 0, rgba(10, 12, 30, 0) 12%); }
.rail { position: absolute; top: 0; left: 0; right: 0; height: 100%; }
.rail-bar { position: absolute; z-index: 1; left: 0; right: 0; top: var(--by); height: 7px; height: max(7px, calc(var(--sh) * .013)); background: linear-gradient(180deg, #f7f8fb, #bcbcc4 40%, #6d6d74); box-shadow: 0 3px 5px rgba(10, 8, 0, .5); pointer-events: none; }
.garment { position: absolute; z-index: var(--z); top: calc(var(--by) + 3px - var(--gh) * .042); left: calc(var(--p) * 1%); width: calc(var(--gh) * .5454); height: var(--gh); margin-left: calc(var(--gh) * -.2727); -webkit-transform-origin: 50% 4.2%; transform-origin: 50% 4.2%; cursor: pointer; -ms-touch-action: pan-y; touch-action: pan-y; }
.garment img { display: block; width: 100%; height: 100%; max-width: none; pointer-events: none; }
.g-w { display: none; }

.shop-lead { position: relative; z-index: 2; width: var(--content); margin: 0 auto; padding: 14px 8px 4px; text-align: center; }
.shop-lead h2 { margin: .1em 0 .1em; }
.shop-note { margin: .3em auto .5em; padding: 0 8px; color: var(--cream); font-family: var(--font-read); font-size: 17px; font-size: clamp(16px, 1.3vw, 32px); line-height: 1.35; }

/* The shelves. Everything stands on a board, in hundredths of the page's width, so it all scales up together. */
.stock { position: relative; z-index: 2; --tf: 2.2; --bt: 3.2; --st: 4.6; }
.stock-stage { position: relative; height: calc(var(--sp) * var(--su)); }
.for-w { display: none; }
.b-top, .b-front { position: absolute; left: 0; right: 0; }
.b-top { z-index: 1; bottom: calc(var(--b) * var(--su)); height: calc(var(--tf) * var(--su)); background: linear-gradient(180deg, var(--paint-d), var(--paint) 80%, var(--paint-l)); }
.b-front { z-index: 3; bottom: calc((var(--b) - var(--bt)) * var(--su)); height: calc(var(--bt) * var(--su)); background: linear-gradient(180deg, var(--paint-l) 0, var(--paint-l) 14%, var(--paint) 14%, var(--paint) 74%, var(--paint-d) 74%, var(--paint-d) 100%); box-shadow: 0 calc(var(--su) * 1.4) calc(var(--su) * 2.6) calc(var(--su) * -.5) rgba(2, 5, 20, .85); }
.item, .pallet { position: absolute; z-index: 2; left: calc(var(--x) * var(--su)); bottom: calc((var(--b) + var(--tf) * .36) * var(--su)); }
.item { -webkit-transform: rotate(var(--lean, 0deg)); transform: rotate(var(--lean, 0deg)); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; display: block; width: calc(var(--h) * var(--ar) * var(--su)); height: calc(var(--h) * var(--su)); margin: 0; padding: 0; background: none; border: 0; cursor: pointer; }
.it { display: block; position: relative; width: 100%; height: 100%; -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; }
.it img { display: block; width: 100%; height: 100%; max-width: none; pointer-events: none; -webkit-filter: drop-shadow(calc(var(--su) * .5) calc(var(--su) * .35) calc(var(--su) * .7) rgba(2, 5, 22, .5)); filter: drop-shadow(calc(var(--su) * .5) calc(var(--su) * .35) calc(var(--su) * .7) rgba(2, 5, 22, .5)); }
/* Where it meets the board. The light comes from the upper left, so the shadow leans right. */
.contact { position: absolute; left: 4%; right: -5%; bottom: calc(var(--su) * -.7); height: calc(var(--su) * 1.9); border-radius: 50%; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(2, 5, 18, .82), rgba(2, 5, 18, .5) 55%, rgba(2, 5, 18, 0) 100%); }
.item-hang .contact { display: none; }
/* The lips hang on the back wall, from one tack. */
.item-tack .it::before { content: ""; position: absolute; z-index: 1; left: 50%; top: calc(var(--su) * -.3); width: calc(var(--su) * 1); height: calc(var(--su) * 1); min-width: 7px; min-height: 7px; margin-left: calc(var(--su) * -.5); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fbeeb2, #d9b65c 45%, #94712a); box-shadow: 1px 1px 2px rgba(2, 5, 20, .6); }
.pallet { width: calc(var(--su) * 48); height: auto; max-width: none; }
.stock-sign, .pallet-card { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; position: absolute; font-family: var(--font-hand); line-height: 1; color: var(--marker); }
.stock-sign { z-index: 2; left: calc(var(--x) * var(--su)); top: calc(var(--t) * var(--su)); -webkit-transform: rotate(var(--d)); transform: rotate(var(--d)); -webkit-transform-origin: 50% 0; transform-origin: 50% 0; }
/* Two short strings, up behind the board above. */
.stock-sign::before, .stock-sign::after { content: ""; position: absolute; bottom: calc(100% - 3px); width: 2px; width: max(1.5px, calc(var(--su) * .2)); height: calc(var(--st) * var(--su) + 3px); background: linear-gradient(90deg, #f3ecd6, #cfc5a6); }
.stock-sign::before { left: 15%; }
.stock-sign::after { right: 15%; }
.pallet-card { z-index: 2; left: calc(var(--x) * var(--su)); bottom: calc(var(--b) * var(--su)); -webkit-transform: rotate(var(--d)); transform: rotate(var(--d)); -webkit-transform-origin: 0 100%; transform-origin: 0 100%; }
.s-cut { display: block; }
.stock-sign, .pallet-card { -webkit-filter: drop-shadow(calc(var(--su) * .22) calc(var(--su) * .3) calc(var(--su) * .28) rgba(2, 5, 20, .55)); filter: drop-shadow(calc(var(--su) * .22) calc(var(--su) * .3) calc(var(--su) * .28) rgba(2, 5, 20, .55)); }
.stock-sign { font-size: calc(var(--su) * 5.6); white-space: nowrap; }
.stock-sign .s-cut { padding: .3em .62em .36em; }
.stock-sign .zero { width: .5em; height: .72em; }
.pallet-card { width: calc(var(--su) * 44); font-size: calc(var(--su) * 6); line-height: 1.04; }
.pallet-card .s-cut { padding: .55em .7em .6em; }

/* It comes in from behind the cabinet's side. */
.peek { position: absolute; display: block; overflow: hidden; pointer-events: none; }
#peek-shop { z-index: 3; right: calc(var(--stile) - 6px); top: 0; width: 190px; width: clamp(170px, 42vw, 320px); height: 190px; height: clamp(170px, 42vw, 320px); }
#peek-shop.peek-left { right: auto; left: calc(var(--stile) - 6px); -webkit-transform: scaleX(-1); transform: scaleX(-1); }

/* What a thing says when you tap it: a tag swinging from it on a string. */
.swing-tag { position: absolute; z-index: 7; left: 0; top: 0; width: 50vw; -webkit-transform-origin: 50% 0; transform-origin: 50% 0; pointer-events: none; }
.swing-string { display: block; width: 2px; height: 30px; margin: 0 auto -5px; background: linear-gradient(90deg, #f3ecd6, #cfc5a6); }
.swing-paper { position: relative; z-index: 0; padding: .72em .9em .78em; color: var(--marker); font-family: var(--font-hand); font-size: 23px; font-size: clamp(20px, 5.6vw, 32px); line-height: 1.06; text-align: center; }
.swing-paper::before, .swing-paper::after { content: ""; position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; left: 0; -webkit-clip-path: polygon(9% 0, 91% 0, 100% 22%, 99% 97%, 96% 100%, 3% 99%, 0 96%, 0 22%); clip-path: polygon(9% 0, 91% 0, 100% 22%, 99% 97%, 96% 100%, 3% 99%, 0 96%, 0 22%); }
.swing-paper::before { background: #f5ecd0; background-image: radial-gradient(circle at 50% .55em, #1f2f5c 0, #1f2f5c .16em, #b89a5c .17em, #b89a5c .27em, transparent .28em); }
.swing-paper::after { z-index: -2; background: rgba(2, 5, 20, .5); -webkit-transform: translate(4px, 7px); transform: translate(4px, 7px); }

/* Marked by hand: their real marks, laid out big. */
.cab { position: relative; z-index: 2; width: var(--content); margin: 0 auto; padding: 22px 8px 30px; }
.marked { width: 100%; padding: 26px 0 28px; overflow: visible; }
.marked h3 { position: relative; z-index: 2; width: var(--content); margin: 0 auto 14px; padding: 0 8px; text-align: center; }
.marks { position: relative; height: calc(var(--mp) * var(--su)); }
.mark { position: absolute; display: block; left: calc(var(--x) * var(--su)); top: calc(var(--t) * var(--su)); width: calc(var(--w) * var(--su)); max-width: none; height: auto; -webkit-transform: rotate(var(--r)); transform: rotate(var(--r)); -webkit-filter: drop-shadow(calc(var(--su) * .35) calc(var(--su) * .6) calc(var(--su) * .6) rgba(2, 5, 20, .55)); filter: drop-shadow(calc(var(--su) * .35) calc(var(--su) * .6) calc(var(--su) * .6) rgba(2, 5, 20, .55)); }

/* What people say. */
.say { padding-top: 26px; text-align: center; }
.say-bursts { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; align-items: center; -webkit-justify-content: center; justify-content: center; margin: 14px 0 12px; }
.say-bursts .burst { margin: 4px 10px 10px; }
.burst-yellow { -webkit-transform: rotate(2.2deg); transform: rotate(2.2deg); }
.say-most { font-size: 20px; line-height: 1.3; }
.say-most strong { font-weight: 700; }
.say .marker { margin: 10px 0 8px; font-size: 26px; color: var(--lime); -webkit-transform: rotate(-1deg); transform: rotate(-1deg); }
.shop > .more { margin: 0 auto 18px; }

/* ---------- Donate: a big open corrugated box ---------- */
.donate { z-index: 1; overflow: hidden; background: var(--kraft); }
.box-top { --bh: 50vw; position: relative; height: var(--bh); background: var(--navy-d); overflow: hidden; }
.flap { position: absolute; bottom: 0; background-color: var(--kraft-d); background-image: repeating-linear-gradient(90deg, rgba(60, 36, 12, .16) 0, rgba(60, 36, 12, .16) 2px, transparent 2px, transparent 11px); }
.flap-back { left: 3%; right: 3%; top: 22%; background-color: #7a5428; -webkit-clip-path: polygon(2% 0, 98% 0, 100% 100%, 0 100%); clip-path: polygon(2% 0, 98% 0, 100% 100%, 0 100%); }
.flap-l { left: -1%; width: 20%; top: 58%; background-color: var(--kraft-l); -webkit-clip-path: polygon(0 0, 100% 84%, 100% 100%, 0 100%); clip-path: polygon(0 0, 100% 84%, 100% 100%, 0 100%); }
.flap-r { right: -1%; width: 20%; top: 54%; background-color: var(--kraft-l); -webkit-clip-path: polygon(0 86%, 100% 0, 100% 100%, 0 100%); clip-path: polygon(0 86%, 100% 0, 100% 100%, 0 100%); }
.box-item { position: absolute; display: block; max-width: none; width: auto; height: calc(var(--bh) * var(--bk)); bottom: calc(var(--bh) * var(--bb)); left: var(--bx); -webkit-transform: rotate(var(--br)); transform: rotate(var(--br)); -webkit-filter: drop-shadow(2px 3px 4px rgba(10, 6, 0, .5)); filter: drop-shadow(2px 3px 4px rgba(10, 6, 0, .5)); }
.bi-china { --bk: .94; --bb: -.14; --bx: 6%; --br: -3deg; }
.bi-bunny { --bk: .86; --bb: -.12; --bx: 46%; --br: 4deg; }
.bi-sandals { --bk: .44; --bb: -.02; --bx: 32%; --br: -8deg; }
.box-body {
  position: relative;
  padding: 26px 0 26px;
  border-top: 10px solid var(--kraft-l);
  box-shadow: inset 0 3px 0 rgba(90, 60, 20, .3);
  color: #21160a;
  background-color: var(--kraft);
  background-image: repeating-linear-gradient(90deg, rgba(120, 84, 40, .13) 0, rgba(120, 84, 40, .13) 2px, transparent 2px, transparent 10px);
}
.box-tape { position: absolute; left: 50%; top: -10px; width: 92px; width: clamp(80px, 10vw, 170px); height: 150px; height: clamp(130px, 16vw, 260px); margin-left: -46px; background: rgba(226, 197, 146, .62); box-shadow: inset 2px 0 0 rgba(255, 255, 255, .34), inset -2px 0 0 rgba(255, 255, 255, .34); }
.box-scribble { position: absolute; right: 4%; top: 14px; width: 120px; width: clamp(100px, 13vw, 240px); opacity: .9; }
.box-scribble svg { display: block; width: 100%; height: auto; }
.don-grid, .don-end { position: relative; width: var(--content); margin: 0 auto; padding: 0 8px; }
.don-lead h2 { margin: .3em 0 .1em; }
.tap-a-thing { margin-bottom: 6px; }
.things { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -4px; }
.thing { position: relative; width: 25%; margin: 0; padding: 6px 2px 4px; background: none; border: 0; cursor: pointer; color: #21160a; }
.thing-hop { display: block; position: relative; }
.thing-art { display: block; width: 100%; height: auto; }
.thing-name { display: block; margin-top: 2px; font-family: var(--font-hand); font-size: 18.5px; font-size: clamp(17px, 2vw, 44px); line-height: 1; }
.thing[aria-pressed="true"] .thing-name { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 3px; }
.thing-stamp { position: absolute; right: 8%; top: 4px; width: 22%; height: 0; padding-bottom: 22%; min-width: 15px; min-height: 15px; border-radius: 50%; border: 3px solid transparent; opacity: 0; -webkit-transform: rotate(-12deg); transform: rotate(-12deg); }
.thing[data-stamped="yes"] .thing-stamp { opacity: 1; border-color: #1f7a4d; background: rgba(31, 122, 77, .2); }
.thing[data-stamped="call"] .thing-stamp { opacity: 1; border-color: #27368f; background: rgba(39, 54, 143, .2); }
.thing[data-stamped="no"] .thing-stamp { opacity: 1; border-color: #c02030; background: rgba(192, 32, 48, .2); }

.don-tool { margin-top: 18px; }
.answer-wrap { --pk: 206px; --pk: clamp(206px, 18vw, 440px); position: relative; }
/* It pops up out of the box behind the card, so the card covers where its neck comes from. Its head gets its room over the things. */
#peek-donate { z-index: 1; left: 50%; top: calc(var(--pk) * -.96); width: var(--pk); height: calc(var(--pk) * 1.15); margin-left: 10px; }
.answer { z-index: 2; padding: 16px 22px 18px; min-height: 124px; -webkit-transform: rotate(-1.2deg); transform: rotate(-1.2deg); box-shadow: 2px 4px 10px rgba(0, 0, 0, .34); }
.answer-name { font-size: 44px; font-size: clamp(40px, 4.4vw, 110px); line-height: 1; }
.answer-line { margin-top: 8px; font-size: 27px; font-size: clamp(25px, 2.5vw, 60px); line-height: 1.05; color: #27368f; }
.stamp-mark { position: absolute; right: 16px; bottom: 16px; padding: .22em .5em .26em; border: 4px solid currentColor; border-radius: 6px; font-family: var(--font-read); font-weight: 700; font-size: 26px; font-size: clamp(25px, 2.4vw, 60px); line-height: 1.1; background: rgba(247, 239, 168, .4); }
.stamp-mark.st-yes { color: #1f7a4d; }
.stamp-mark.st-call { color: #27368f; }
.stamp-mark.st-no { color: #b81d2d; }
.stamps { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; margin: 14px 0 12px; }
.stamp { -webkit-flex: 1 1 0; flex: 1 1 0; display: block; margin: 0 4px; padding: 0; background: none; border: 0; cursor: pointer; }
.stamp-handle { display: block; width: 62%; margin: 0 auto -1px; height: auto; }
.stamp span { display: block; padding: .46em .2em .5em; background: #fbf9f1; border-radius: 4px; border-bottom: 4px solid rgba(0, 0, 0, .25); font-family: var(--font-read); font-weight: 700; font-size: 15px; font-size: clamp(14px, 1.35vw, 32px); line-height: 1.05; }
.st-yes span { color: #1f7a4d; }
.st-call span { color: #27368f; }
.st-no span { color: #b81d2d; }
.don-end { margin-top: 26px; }
.don-lines { margin: 0; font-size: 17px; font-size: clamp(17px, 1.25vw, 32px); line-height: 1.4; }
.don-lines > div { margin-bottom: 12px; }
.don-lines dt { display: inline; font-weight: 700; }
.don-lines dd { display: inline; margin: 0; }
.big-call { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; display: block; margin: 20px auto 8px; max-width: 520px; max-width: max(520px, 30vw); padding: .5em .6em .55em; background: var(--hot-pink); color: var(--card-ink); text-align: center; text-decoration: none; font-family: var(--font-hand); line-height: 1.02; -webkit-transform: rotate(-1deg); transform: rotate(-1deg); -ms-touch-action: manipulation; touch-action: manipulation; }
.bc-1 { display: block; font-size: 34px; font-size: clamp(32px, 3.4vw, 84px); }
.bc-2 { display: block; font-size: 44px; font-size: clamp(40px, 4.6vw, 112px); white-space: nowrap; }
.donate .more { margin: 14px auto 0; }

/* ---------- The Community Wall: their cream wall, their 45s, and notices on hand-cut neon ---------- */
.wall { z-index: 1; overflow: hidden; color: var(--ink); background-color: var(--wall); background-image: repeating-linear-gradient(90deg, transparent 0, transparent 151px, var(--wall-seam) 151px, var(--wall-seam) 152.5px, var(--wall-seam-lit) 152.5px, var(--wall-seam-lit) 154px, transparent 154px, transparent 233px), repeating-linear-gradient(90deg, transparent 0, transparent 468px, var(--wall-seam) 468px, var(--wall-seam) 470px, var(--wall-seam-lit) 470px, var(--wall-seam-lit) 472px); }
/* The top edge is a real piece of trim, and it throws a shadow down the wall. */
.crown { position: relative; z-index: 3; height: 26px; height: clamp(24px, 2.9vw, 50px); background: linear-gradient(180deg, #7d5529 0, #a97a44 8%, #e6c084 16%, #d9ae70 34%, #a97a44 44%, #eac88f 50%, #c89a5b 72%, #94693b 92%, #5f4220 100%); box-shadow: 0 7px 14px rgba(70, 48, 16, .42); }
.crown::after { content: ""; position: absolute; left: 0; right: 0; top: 16%; bottom: 8%; opacity: .28; background: repeating-linear-gradient(92deg, rgba(70, 40, 10, .5) 0, rgba(70, 40, 10, 0) 3px, rgba(70, 40, 10, 0) 23px, rgba(70, 40, 10, .34) 26px, rgba(70, 40, 10, 0) 31px, rgba(70, 40, 10, 0) 67px); }
.wall-in { position: relative; padding: 22px 0 26px; }
.wall h2 { position: relative; z-index: 2; width: var(--content); margin: 0 auto 8px; padding: 0 8px; color: var(--navy); text-align: center; }
.notices { position: relative; height: calc(var(--np) * 1vw); margin: 0 auto; }
.wall-45s { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.wrec { position: absolute; display: block; margin: 0; padding: 0; background: none; border: 0; cursor: pointer; }
.wrec-d, .wrec-l { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; max-width: none; pointer-events: none; }
/* Their band: small, touching, each one a thumb's target even where it's smaller than a thumb. */
.wrec.for-w { display: none; }
.rec-w { left: calc(var(--x) * 1vw); top: calc(var(--y) * 1vw); width: calc(var(--s) * 1vw); height: calc(var(--s) * 1vw); background: url(../img/rec/d.svg) center / 100% 100% no-repeat; }
.rec-w::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; }
.rl0 { background: url(../img/rec/l0.svg) center / 100% 100% no-repeat; }
.rl1 { background: url(../img/rec/l1.svg) center / 100% 100% no-repeat; }
.rl2 { background: url(../img/rec/l2.svg) center / 100% 100% no-repeat; }
.rl3 { background: url(../img/rec/l3.svg) center / 100% 100% no-repeat; }
.rl4 { background: url(../img/rec/l4.svg) center / 100% 100% no-repeat; }
.rl5 { background: url(../img/rec/l5.svg) center / 100% 100% no-repeat; }
.rl6 { background: url(../img/rec/l6.svg) center / 100% 100% no-repeat; }
.rl7 { background: url(../img/rec/l7.svg) center / 100% 100% no-repeat; }
.rl8 { background: url(../img/rec/l8.svg) center / 100% 100% no-repeat; }
.rl9 { background: url(../img/rec/l9.svg) center / 100% 100% no-repeat; }
.rl10 { background: url(../img/rec/l10.svg) center / 100% 100% no-repeat; }
.rl11 { background: url(../img/rec/l11.svg) center / 100% 100% no-repeat; }
.pinned { position: absolute; z-index: 2; display: block; margin: 0; color: var(--marker); font-family: var(--font-hand); font-size: 24px; font-size: clamp(20px, 5.8vw, 38px); line-height: 1.06; text-align: center; cursor: -webkit-grab; cursor: grab; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-filter: drop-shadow(1px 3px 4px rgba(70, 48, 16, .5)); filter: drop-shadow(1px 3px 4px rgba(70, 48, 16, .5)); }
.pinned p { margin: 0; }
.pinned img { display: block; width: 100%; height: auto; pointer-events: none; }
.n-cut { display: block; padding: .6em .7em .66em; }
.tape { position: absolute; z-index: 1; top: -9px; width: 26%; height: 22px; background: rgba(250, 244, 196, .78); box-shadow: 0 1px 2px rgba(40, 30, 10, .22); }
.tape-a { left: 6%; -webkit-transform: rotate(-4deg); transform: rotate(-4deg); }
.tape-b { right: 6%; -webkit-transform: rotate(3deg); transform: rotate(3deg); }
.p-flyer { padding: 6px; background: #fff; }
.p-label { font-size: 20px; font-size: clamp(18px, 4.8vw, 32px); }
/* That one was a typed post, so it's set in type. */
.p-hello { padding: 10px 12px 12px; background: #fbf9f1; font-family: var(--font-read); font-size: 16px; font-size: clamp(15px, 3.9vw, 24px); line-height: 1.3; text-align: left; }
.pin-flower { float: left; width: 44px; width: clamp(40px, 11vw, 70px); height: 36px; height: clamp(33px, 9vw, 58px); margin: 0 8px 2px 0; overflow: visible; }
.pin-bird { position: absolute; left: 50%; bottom: calc(100% - 3px); width: 46px; height: 66px; width: clamp(46px, 4.2vw, 110px); height: clamp(66px, 6vw, 158px); margin-left: -18px; overflow: visible; pointer-events: none; }
/* Where they're put up, in the band's hole. Dragging only ever moves them from here. */
.p-flyer { left: 5vw; top: 21.5vw; width: 64vw; }
.p-sale { left: 71vw; top: 23vw; width: 25.5vw; }
.p-event { left: 5vw; top: 46.5vw; width: 34vw; }
.p-label { left: 41vw; top: 45.5vw; width: 55vw; }
.p-hello { left: 5vw; top: 67vw; width: 62vw; }
.p-news { left: 65vw; top: 85vw; width: 31vw; }
.tip-wall { display: block; position: relative; z-index: 2; width: -webkit-max-content; width: max-content; max-width: 90%; margin: 6px auto 0; }
.wall .more { margin: 16px auto 0; }

/* ---------- Visit: their wall again ---------- */
.visit { z-index: 1; padding: 26px 0 30px; color: var(--ink); background-color: var(--wall); background-image: repeating-linear-gradient(90deg, transparent 0, transparent 151px, var(--wall-seam) 151px, var(--wall-seam) 152.5px, var(--wall-seam-lit) 152.5px, var(--wall-seam-lit) 154px, transparent 154px, transparent 233px); }
.visit-in { width: var(--content); margin: 0 auto; padding: 0 8px; }
.visit h2 { color: var(--navy); margin-bottom: .3em; }
/* The picture's room is kept for it, so nothing jumps when it arrives. */
.bld-wrap { position: relative; height: 0; padding-top: 52%; margin: 0 -8px; background: #bcd7e6; box-shadow: 0 2px 0 rgba(70, 54, 30, .3); overflow: hidden; }
.bld { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; }
.look-for { margin-top: 12px; font-weight: 700; font-size: 18px; font-size: clamp(18px, 1.4vw, 36px); line-height: 1.3; }
.hang-sign { position: relative; width: 100%; max-width: 360px; margin: 16px auto 0; }
.hang-chain { display: block; width: 72%; margin: 0 auto -3px; height: auto; }
.hang-board { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; padding: 14px 20px 14px; background: #fbf9f1; border: 7px solid #8a5a2b; border-radius: 6px; box-shadow: 2px 5px 12px rgba(50, 38, 20, .45); -webkit-transform: rotate(.8deg); transform: rotate(.8deg); -webkit-transform-origin: 50% -30px; transform-origin: 50% -30px; font-family: var(--font-hand); color: var(--marker); }
.hang-board ul { list-style: none; margin: 0; padding: 0; }
.hang-board li { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; white-space: nowrap; font-size: 24px; font-size: clamp(23px, 1.9vw, 31px); line-height: 1.22; }
.hang-board li:last-child { color: #b81d2d; }
.holiday { margin-top: 12px; text-align: center; font-size: 15.5px; font-size: clamp(15.5px, 1.05vw, 28px); }
.address-big { margin-top: 14px; text-align: center; font-weight: 700; font-size: 22px; font-size: clamp(21px, 1.9vw, 48px); line-height: 1.25; }
.visit-btns { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; justify-content: center; margin-top: 16px; }
.visit-btns .card { margin: 5px; padding: .34em .7em .4em; font-size: 27px; font-size: clamp(26px, 2.3vw, 60px); }

/* The building through the day. After hours the windows go dark, and only the sign and one small light stay on. */
.sky-eve, .sky-night, .bld-dim, .bld-eve, .bld-glow, .bld-lit { opacity: 0; transition: opacity 1.4s ease; }
.tiny-tucked { opacity: 0; }
[data-day="evening"] .sky-eve { opacity: 1; }
[data-day="evening"] .bld-eve { opacity: .2; }
[data-day="evening"] .bld-glow { opacity: .55; }
[data-day="night"] .sky-night { opacity: 1; }
[data-day="night"] .bld-dim { opacity: .68; }
[data-day="night"] .bld-lit { opacity: 1; }
[data-day="night"] .tiny-tucked { opacity: 1; }
[data-day="night"] .tiny-awake { opacity: 0; }

/* ---------- Footer: the carpet again ---------- */
.foot { position: relative; z-index: 1; padding: 22px 16px 24px; text-align: center; color: var(--ink); background: var(--carpet) url(../img/carpet.webp); background-size: 320px 320px; box-shadow: inset 0 3px 0 rgba(70, 54, 30, .34); }
/* Whatever's fixed at the bottom of the screen, the page ends above it. */
@media (max-width: 699px) { .foot { padding-bottom: 78px; padding-bottom: calc(var(--bar-h) + 16px + env(safe-area-inset-bottom, 0px)); } }
@media (min-width: 700px) { .foot { padding-bottom: 84px; } }
.foot-scrap { display: inline-block; padding: 12px 22px 12px; background: #fbf9f1; -webkit-transform: rotate(.8deg); transform: rotate(.8deg); }
.foot-scrap img { display: block; width: 300px; width: clamp(280px, 30vw, 760px); max-width: 78vw; height: auto; }
/* The way the card prints it. */
.foot-c { font-size: 15px; font-size: clamp(15px, .8vw, 22px); }
.credit { display: inline-block; margin-top: 6px; color: var(--ink); font-size: 15px; font-size: clamp(15px, .8vw, 22px); text-decoration: none; }
.credit img { vertical-align: -5px; margin-right: 6px; }

/* ---------- Design preview. Not on the finished site. ---------- */
.preview { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; color: var(--cream); background: var(--navy-d); box-shadow: 0 -3px 12px rgba(0, 0, 0, .4); font-size: 13px; line-height: 1.2; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.pv-label { font-weight: 700; color: var(--lime); }
.pv-h { font-weight: 700; }
.pv-note { color: #d8dcf0; }
.pv-btns { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.pv-btn { display: -webkit-inline-flex; display: inline-flex; align-items: center; margin: 2px 4px 2px 0; padding: 6px 9px; min-height: 32px; border: 2px solid #4a5688; border-radius: 6px; background: #22306a; color: var(--cream); font-family: var(--font-read); font-weight: 700; font-size: 13px; line-height: 1; cursor: pointer; }
.pv-btn i { display: inline-block; width: 12px; height: 12px; margin-right: 5px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .6); }
.pv-btn[aria-pressed="true"] { background: var(--lime); border-color: var(--lime); color: #101407; }
.pv-close { position: absolute; right: 4px; top: 2px; width: 34px; height: 34px; border: 0; background: none; color: var(--cream); font-size: 24px; line-height: 1; cursor: pointer; }
.pv-tab { position: fixed; z-index: 30; right: 10px; bottom: 8px; padding: 7px 11px; border: 2px solid #4a5688; border-radius: 6px; background: var(--navy-d); color: var(--lime); font-family: var(--font-read); font-weight: 700; font-size: 13px; cursor: pointer; }
@media (min-width: 700px) {
  /* One row if it all fits, two tidy rows if it doesn't: nothing wraps inside a group. */
  .preview { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; align-items: center; padding: 6px 44px 6px 14px; }
  .pv-label { margin-right: 16px; -webkit-flex: none; flex: none; white-space: nowrap; }
  .pv-group { display: -webkit-flex; display: flex; align-items: center; -webkit-flex: none; flex: none; margin: 1px 22px 1px 0; }
  .pv-h { margin-right: 8px; -webkit-flex: none; flex: none; white-space: nowrap; }
  .pv-note { margin-right: 10px; font-size: 12.5px; -webkit-flex: none; flex: none; white-space: nowrap; }
  .pv-btns { -webkit-flex-wrap: nowrap; flex-wrap: nowrap; }
  .pv-btn { white-space: nowrap; min-height: 28px; padding: 4px 8px; }
}
/* A fold-open phone: the day's row is too long for one line, so its heading goes, and the note sits over its buttons. */
@media (min-width: 700px) and (max-width: 819.98px) {
  .pv-day { -webkit-flex-wrap: wrap; flex-wrap: wrap; margin-right: 0; }
  .pv-day .pv-h { display: none; }
  .pv-note { -webkit-flex-basis: 100%; flex-basis: 100%; margin: 0 0 2px; }
}
@media (min-width: 1100px) and (max-width: 1299.98px) {
  :root { --floor-h: 92px; --floor-h: clamp(92px, 11vh, 150px); }
}
/* On a phone it's a sheet above the bar, as short as it can be, so the hutch stays in view. */
@media (max-width: 699px) {
  .preview { bottom: var(--bar-h); bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px)); padding: 8px 10px 8px; border-top: 3px solid var(--lime); }
  .pv-label { margin-bottom: 4px; }
  .pv-group { margin-bottom: 4px; }
  .pv-h { display: none; }
  .pv-note { margin: 2px 26px 2px 0; font-size: 12.5px; }
  .pv-btn { padding: 6px 8px; font-size: 12.5px; min-height: 34px; }
}
/* A short phone: tighter still, so the name and the top of the doors stay in view while a Look is being picked. */
@media (max-width: 699px) and (max-height: 680px) {
  .preview { padding: 5px 8px 5px; }
  .pv-label { display: none; }
  .pv-group { margin-bottom: 2px; }
  .pv-btn { padding: 4px 6px; margin: 1px 3px 1px 0; font-size: 12px; min-height: 30px; }
  .pv-btn i { width: 10px; height: 10px; margin-right: 4px; }
  .pv-note { margin: 1px 26px 1px 0; font-size: 11.5px; line-height: 1.15; }
}

/* ---------- from a fold-open phone up: longer shelves, and bigger things ---------- */
@media (min-width: 700px) {
  .store { --sh: 47vw; }
  .garment { left: calc(var(--pw) * 1%); z-index: var(--zw); }
  .g-w { display: block; }
  .stock { --tf: 1; --bt: 1.5; --st: 2.2; }
  .swing-tag { width: 196px; width: clamp(196px, 21vw, 460px); }
  .swing-paper { font-size: 23px; font-size: clamp(20px, 2vw, 46px); }
  .stock-stage { height: calc(var(--sw) * var(--su)); }
  .for-p { display: none; }
  .for-w { display: block; }
  .item, .pallet { left: calc(var(--X) * var(--su)); bottom: calc((var(--B) + var(--tf) * .36) * var(--su)); }
  .item { width: calc(var(--H) * var(--ar) * var(--su)); height: calc(var(--H) * var(--su)); }
  .stock-sign { left: calc(var(--X) * var(--su)); top: calc(var(--T) * var(--su)); -webkit-transform: rotate(var(--D)); transform: rotate(var(--D)); }
  .pallet-card { left: calc(var(--X) * var(--su)); bottom: calc(var(--B) * var(--su)); -webkit-transform: rotate(var(--D)); transform: rotate(var(--D)); }
  .stock-sign { font-size: 18px; font-size: max(18px, calc(var(--su) * 2.5)); }
  .pallet { width: calc(var(--su) * 19); }
  .pallet-card { width: calc(var(--su) * 17); font-size: 18px; font-size: max(18px, calc(var(--su) * 2.3)); }
  .contact { bottom: calc(var(--su) * -.3); height: calc(var(--su) * .9); }
  #peek-shop { width: 240px; width: clamp(190px, 17vw, 400px); height: 240px; height: clamp(190px, 17vw, 400px); }
  .marks { height: calc(var(--mw) * var(--su)); }
  .mark { left: calc(var(--X) * var(--su)); top: calc(var(--T) * var(--su)); width: calc(var(--W) * var(--su)); }
  .shop-lead { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; align-items: center; -webkit-justify-content: center; justify-content: center; }
  .shop-lead h2 { margin: 0 0 0 .5em; }
  .shop-note { -webkit-flex-basis: 100%; flex-basis: 100%; }
  .box-top { --bh: 26vw; }
  .bi-china { --bk: .92; --bx: 26%; }
  .bi-bunny { --bk: .8; --bx: 50%; }
  .bi-sandals { --bk: .46; --bx: 36%; }
  .notices { height: calc(var(--nw) * 1vw); }
  .wrec.for-w { display: block; }
  .wrec.for-p { display: none; }
  .pinned { font-size: 18px; font-size: clamp(18px, 2.1vw, 58px); }
  .p-label { font-size: 16px; font-size: clamp(16px, 1.7vw, 46px); }
  .p-hello { font-size: 14px; font-size: clamp(14px, 1.25vw, 34px); }
  .pin-flower { width: 36px; width: clamp(30px, 3.4vw, 92px); height: 30px; height: clamp(25px, 2.8vw, 76px); }
  .n-cut { padding: .5em .6em .54em; }
  .p-flyer { left: 24vw; top: 11.8vw; width: 25vw; }
  .p-hello { left: 50.6vw; top: 11.6vw; width: 22.6vw; }
  .p-label { left: 25vw; top: 20.8vw; width: 15vw; }
  .p-event { left: 41vw; top: 21.8vw; width: 11.6vw; }
  .p-sale { left: 53vw; top: 22.4vw; width: 11vw; }
  .p-news { left: 64.4vw; top: 24.2vw; width: 11vw; }
  .pin-bird { left: 62%; }
  /* What people say fills its shelf, however wide the shelf gets. */
  .say { padding-top: 3vw; padding-bottom: 3vw; }
  .say-bursts .burst { margin: .4vw 1.4vw; }
  .burst-green, .burst-yellow { font-size: 2.5vw; width: 30vw; }
  .say-most { font-size: 2.7vw; }
  .say .marker { margin: 1vw 0 .6vw; font-size: 3.2vw; }
}
@media (min-width: 900px) {
  .cab { padding: 30px 12px 40px; }
  .don-grid { display: -webkit-flex; display: flex; align-items: flex-start; }
  .don-lead { -webkit-flex: 1 1 56%; flex: 1 1 56%; padding-right: 4%; }
  .don-tool { -webkit-flex: 1 1 44%; flex: 1 1 44%; margin-top: 0; -webkit-align-self: center; align-self: center; }
  .don-end { display: -webkit-flex; display: flex; align-items: center; }
  .don-lines { -webkit-flex: 1 1 56%; flex: 1 1 56%; padding-right: 4%; }
  .big-call { -webkit-flex: 1 1 44%; flex: 1 1 44%; margin: 0; }
  /* The picture and its buttons on the left, the hanging sign and the address on the right, both ending at about the same place. */
  .visit-in { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; align-items: flex-start; }
  .visit-main { -webkit-flex: 0 0 64%; flex: 0 0 64%; min-width: 0; padding-right: 3.4%; }
  .visit-side { -webkit-flex: 0 0 36%; flex: 0 0 36%; min-width: 0; padding-top: 2%; }
  .bld-wrap { margin: 0; }
  .hang-sign { margin-top: 0; max-width: 420px; max-width: max(420px, 30vw); }
  .hang-board li { font-size: 27px; font-size: clamp(23px, 2.15vw, 54px); }
  .holiday { font-size: 15.5px; font-size: clamp(15.5px, 1.15vw, 28px); }
  .address-big { font-size: 23px; font-size: clamp(22px, 2.1vw, 52px); }
  @supports (display: grid) {
    .visit-in { display: grid; grid-template-columns: minmax(0, 64fr) minmax(0, 36fr); grid-template-rows: auto 1fr; }
    .visit-main { grid-column: 1; grid-row: 1; }
    .visit-side { grid-column: 2; grid-row: 1 / span 2; }
    .visit-btns { grid-column: 1; grid-row: 2; -webkit-justify-content: flex-start; justify-content: flex-start; margin: 8px 0 0 -5px; padding-right: 3.4%; }
  }
}

/* Motion off: a still bird, so there's nothing to pause, and nothing popping up down the page. */
@media (prefers-reduced-motion: reduce) {
  .pause-btn, .peek { display: none; }
  .hello, .lede, .address, .caption, .topnav, .topnav a, body, .record-cloud, .room-plant, .hours-card, .door-words, .lazy.in { transition: none; }
}