/* ─────────────────────────────────────────────────────────────────────
 * THE PAWN SHOP
 *
 * The rules this file was built to, because they are easy to drift from:
 *
 *   ONE LIGHT. A bare bulb over the counter. It falls off hard and it
 *   falls off downwards. Everything outside it is black. No ambient glow,
 *   no haloes behind text, no lit edges on things nowhere near the bulb.
 *   Every soft gradient in here is a light falloff and there are no others.
 *
 *   THREE VOICES, ON PURPOSE. A cheap condensed grotesque for anything
 *   painted or printed as signage. A typewriter face for documents: the
 *   slip, the ticket, the day book. A plain sans for the small amount of
 *   actual prose. They do not match and they are not supposed to.
 *
 *   SQUARE. Almost nothing is rounded, because almost nothing in a pawn
 *   shop is. Paper has torn corners, metal has chamfers, and a radius only
 *   appears where a real object would have one.
 *
 *   WORN. Tape, scuffs, a coffee ring, a chipped corner, a sticker
 *   somebody slapped on years ago. Nothing is new and nothing is straight.
 * ───────────────────────────────────────────────────────────────────── */

:root {
  --black:   #060403;
  --black-2: #0C0805;
  --wood-d:  #150D07;
  --wood:    #241608;
  --wood-m:  #33200F;
  --wood-l:  #4A2E16;
  --wood-hi: #7A4E20;

  --brass:   #B8891F;
  --brass-l: #E8C468;
  --brass-d: #6E4D14;
  --amber:   #FFB545;
  --gold-d:  #8A6416;

  --txt:     #E4D2AE;
  --txt-2:   #A98F68;
  --dim:     #7A6547;
  --dim-2:   #574734;

  --paper:   #E3D5AC;      /* manila, the slip and the ticket */
  --paper-d: #CDBB89;
  --lam:     #EDE8D6;      /* the laminated signs */
  --lam-d:   #D6CFB6;
  --ink:     #1D1810;
  --ink-2:   #5A4C32;
  --red:     #B02A1C;
  --red-l:   #D8402C;
  --green:   #5E7D2A;

  --ease:  cubic-bezier(.22, 1, .36, 1);
  --t-fast: .18s var(--ease);

  --shell: 1000px;

  /* three voices */
  --sign: 'Haettenschweiler', 'Arial Narrow', 'Franklin Gothic Heavy', Impact, sans-serif;
  --doc:  'Courier New', Courier, 'Nimbus Mono PS', monospace;
  --body: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --pen:  'Bradley Hand', 'Segoe Print', 'Ink Free', 'Marker Felt', cursive;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; }

body {
  margin: 0; min-height: 100vh; overflow-x: clip;
  background: var(--black);
  color: var(--txt);
  font: 400 15px/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

.shell { width: min(var(--shell), calc(100vw - 26px)); margin: 0 auto; position: relative; }

/* ── the board over the door ─────────────────────────────────────────
   A plank, not a frosted bar. Solid, with a hard shadow line under it. */

.fascia {
  position: sticky; top: 0; z-index: 60;
  background: var(--wood);
  background-image: var(--grain),
    repeating-linear-gradient(90deg, transparent 0 91px, rgba(0,0,0,.55) 91px 93px);
  border-bottom: 3px solid var(--black);
  box-shadow: 0 3px 0 rgba(122,78,32,.22), 0 10px 18px -8px #000;
}
.fascia-in { display: flex; align-items: center; gap: 9px; height: 54px; }

.mark { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.balls { width: 23px; height: 19px; fill: var(--brass); flex-shrink: 0; }
.mark b {
  font: 400 19px/1 var(--sign); letter-spacing: .04em; color: var(--txt);
  text-transform: uppercase; white-space: nowrap;
}
/* THE rides small and high, so the bar keeps the whole name without
   spending the width that BUY and the address need */
.mark i {
  font: 700 8px/1 var(--body); font-style: normal; letter-spacing: .2em;
  color: var(--brass); vertical-align: .62em; margin-right: .3em;
}

/* painted on the fascia where a real one says the hours. Off on a phone,
   where the bar has no room for anything that is not a control. */
.fascia-hours { display: none; }
@media (min-width: 900px) {
  .fascia-hours {
    display: block; margin: 0 auto; white-space: nowrap;
    font: 700 9px/1 var(--body); letter-spacing: .24em; color: rgba(122,101,71,.55);
  }
}

/* the contract address, felt tip on a strip of tape */
.tape-ca {
  position: relative; display: inline-flex; align-items: baseline; gap: 6px;
  min-width: 0; margin-left: auto; padding: 5px 11px 6px;
  background: rgba(226, 214, 176, .82);
  color: #2A2114;
  transform: rotate(-1.1deg);
  /* torn ends, so it is a piece of tape rather than a chip */
  clip-path: polygon(3px 0, 100% 2px, calc(100% - 4px) 100%, 0 calc(100% - 2px));
  box-shadow: 1px 2px 0 rgba(0,0,0,.45);
}
.tape-ca:active { transform: rotate(-1.1deg) translateY(1px); }
.ca-lab { font: 700 9px/1 var(--body); letter-spacing: .16em; color: #7A6947; flex-shrink: 0; }
.ca-val {
  font: 700 12px/1 var(--doc); letter-spacing: -.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ca-done {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  background: var(--green); color: #F0EDD8; font: 700 11px/1 var(--body); letter-spacing: .2em;
}
.tape-ca.done .ca-done { display: flex; }
.tape-ca.soon { cursor: default; }
.tape-ca.soon .ca-val { font-family: var(--pen); font-weight: 400; font-size: 13px; color: #6B5A3C; }
/* On a phone the bar carries five things and the address is the one that
   has to stay legible, so the label on the tape goes first. */
@media (max-width: 439px) {
  .fascia-in { gap: 6px; }
  /* the balls and PAWN SHOP are enough to know where you are, and the
     address needs the width more than the definite article does */
  .mark i { display: none; }
  .mark b { font-size: 18px; }
  .tape-ca .ca-lab { display: none; }
  .tape-ca { padding: 5px 8px 6px; }
  .plate-sm { padding: 7px 9px; }
  .xlink { width: 28px; height: 28px; }
}

/* ── brass plate buttons ─────────────────────────────────────────────
   A stamped plate screwed to the counter. Hard chamfer, no radius, one
   specular line along the top where the bulb hits it. */

.plate {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; background: var(--brass); color: #1A1104;
  font: 400 17px/1 var(--sign); letter-spacing: .07em; text-transform: uppercase;
  border: 0;
  box-shadow:
    inset 0 2px 0 var(--brass-l),
    inset 0 -2px 0 var(--brass-d),
    inset 2px 0 0 rgba(255,232,180,.3),
    inset -2px 0 0 rgba(0,0,0,.3),
    2px 3px 0 rgba(0,0,0,.6);
  transition: background var(--t-fast), transform .1s var(--ease), box-shadow var(--t-fast);
}
.plate:hover { background: #CE9C2A; }
.plate:active {
  transform: translate(1px, 2px);
  box-shadow: inset 0 2px 0 var(--brass-l), inset 0 -2px 0 var(--brass-d), 1px 1px 0 rgba(0,0,0,.6);
}
.plate[disabled] { background: #5E4A22; color: #2A2114; box-shadow: inset 0 2px 0 #7A6436, inset 0 -2px 0 #3A2C14; cursor: default; }
.plate-sm { padding: 7px 12px; font-size: 14px; }
.plate-lg { width: 100%; padding: 15px 18px; font-size: 21px; }
.plate-bell { width: 100%; padding: 14px 18px; font-size: 20px; }
.plate-bell svg { width: 19px; height: 19px; flex-shrink: 0; }

.xlink {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 30px; height: 30px; color: var(--dim);
  border: 1px solid var(--wood-l); background: var(--wood-d);
}
.xlink svg { width: 13px; height: 13px; }
.xlink:hover { color: var(--txt-2); border-color: var(--brass-d); }

/* the speaker. Crossed out until it is on. */
.mute svg { width: 15px; height: 15px; }
.mute .mute-on { display: none; }
.mute.on { color: var(--brass-l); border-color: var(--brass-d); }
.mute.on .mute-off { display: none; }
.mute.on .mute-on { display: block; }

/* ── the shopfront ───────────────────────────────────────────────── */

.room { padding: 18px 0 0; }

.signwall { position: relative; padding: 34px 0 4px; }

/* the painted sign. Chipped, grimy, and lit from the bulb below it, so
   the top edge is the dark one and the bottom edge catches. */
.sign {
  position: relative; max-width: 420px; padding: 20px 16px 11px;
  background: var(--wood-m);
  background-image: var(--grain);
  border: 3px solid #0A0604;
  box-shadow: 4px 5px 0 rgba(0,0,0,.7), inset 0 -3px 0 rgba(122,78,32,.45);
  transform: rotate(-.7deg);
}
/* the three balls, hanging off the corner on their bracket */
.sign-balls {
  position: absolute; left: 10px; top: -34px; width: 54px; height: 48px;
  overflow: visible; z-index: 2;
}
.sign-balls circle { fill: var(--brass); }
.sign-balls circle:first-of-type { fill: var(--brass-l); }
/* the iron bracket they hang off. Dull metal, not black, or it vanishes
   into the wall and the balls look like they are floating. */
.sign-balls .bracket { stroke: #6B5330; stroke-width: 4.5; fill: none; stroke-linecap: square; }
/* Three words, no ampersand. THE gets its own line between two rules, the
   way a real fascia sets it: small enough not to fight PAWN SHOP, big
   enough to be part of the name rather than a decoration. */
.sign h1 {
  margin: 0; text-transform: uppercase; color: #E9DCBA;
  text-shadow: 0 2px 0 #0A0604, 0 3px 0 rgba(122,78,32,.4);
}
.sign h1 i {
  display: flex; align-items: center; gap: 8px;
  font: 700 13px/1 var(--body); font-style: normal;
  letter-spacing: .42em; color: var(--brass);
  text-shadow: none; margin-bottom: 3px;
}
.sign h1 i::before, .sign h1 i::after {
  content: ''; flex: 1; height: 2px; background: var(--brass-d);
}
.sign h1 b {
  display: block; font: 400 clamp(38px, 12vw, 58px)/.84 var(--sign);
  letter-spacing: .012em; font-weight: 400;
}
.sign-est {
  margin: 5px 0 0; font: 700 8px/1.4 var(--body); letter-spacing: .16em;
  color: var(--dim);
}
/* two scratches through the paint */
.scratch { position: absolute; background: rgba(233,220,186,.14); pointer-events: none; }
.s1 { left: 12%; top: 30%; width: 62%; height: 1px; transform: rotate(-2.4deg); }
.s2 { left: 44%; top: 62%; width: 38%; height: 1px; transform: rotate(1.6deg); }

.sign-say {
  margin: 14px 0 0; font: 400 clamp(21px, 6.4vw, 30px)/1.1 var(--pen);
  color: var(--amber); transform: rotate(-1.4deg); transform-origin: left;
  padding-left: 6px;
}

/* OPEN, on a bit of string against the glass */
.hanger {
  position: absolute; right: 2px; top: 30px; width: 84px; text-align: center;
  transform: rotate(2.6deg); z-index: 3;
}
.hanger-str { display: block; width: 1px; height: 16px; margin: 0 auto; background: var(--dim-2); }
.hanger-card {
  display: block; padding: 7px 4px 6px; background: var(--lam); color: var(--red);
  border: 2px solid #2A2114; box-shadow: 2px 3px 0 rgba(0,0,0,.6);
}
.hanger-card b { display: block; font: 400 22px/1 var(--sign); letter-spacing: .06em; }
.hanger-card i {
  display: block; margin-top: 2px; font: 400 10px/1.2 var(--body);
  font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: #6B5A3C;
}
.hanger.shut .hanger-card { background: var(--lam-d); }
.hanger.shut .hanger-card b { color: #2A2114; }

/* notices taped up wherever they fit */
.notice {
  position: absolute; padding: 6px 8px; background: var(--lam); color: #2A2114;
  font: 400 12px/1.05 var(--sign); letter-spacing: .05em; text-align: center;
  box-shadow: 1px 2px 0 rgba(0,0,0,.6);
  z-index: 2;
}
.notice::before {
  content: ''; position: absolute; left: 50%; top: -7px; width: 30px; height: 12px;
  margin-left: -15px; background: rgba(226,214,176,.5); transform: rotate(-3deg);
}
.n1 { right: 92px; top: 0; transform: rotate(-4.5deg); font-size: 13px; }
.n2 { right: 6px; top: 142px; transform: rotate(3.2deg); }
.n3 { display: none; }
.n4 { display: none; }

@media (min-width: 640px) {
  .signwall { padding-bottom: 12px; }
  .n1 { right: 232px; top: 6px; }
  .n2 { right: 122px; top: 124px; }
  .n3 { display: block; right: 10px; top: 152px; transform: rotate(-2.4deg); }
  .n4 { display: block; right: 118px; top: 8px; transform: rotate(2deg); font-size: 11px; }
}

/* ── the back of the shop ────────────────────────────────────────── */

.scene { position: relative; margin-top: 14px; }
.scene-art {
  display: block; width: 100%; height: 170px;
  /* the room runs off into the dark at the sides rather than stopping at
     an edge. One mask, because the two-mask composite keywords differ
     between the prefixed and unprefixed properties and Chrome takes both. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
}
@media (min-width: 720px) { .scene-art { height: 230px; } }

#keeper { transform-origin: 533px 250px; transition: transform 1.05s var(--ease); }
.scene[data-beat="pick"]  #keeper { transform: translate(-16px, 10px) rotate(-2deg) scale(1.03); }
.scene[data-beat="turn"]  #keeper { transform: translate(-26px, 16px) rotate(-3deg) scale(1.05); }
.scene[data-beat="loupe"] #keeper { transform: translate(-30px, 20px) rotate(-3.4deg) scale(1.06); }
.scene[data-beat="think"] #keeper { transform: translate(-22px, 13px) rotate(-2.2deg) scale(1.04); }

#loupe {
  transform-origin: 462px 194px; transform: rotate(48deg) translateY(26px); opacity: 0;
  transition: transform .6s var(--ease), opacity .25s linear;
}
.scene[data-beat="loupe"] #loupe, .scene[data-beat="think"] #loupe,
.scene[data-beat="hold"] #loupe { transform: none; opacity: 1; }
.scene[data-beat="hold"] #keeper { transform: translate(-30px, 20px) rotate(-3.4deg) scale(1.06); }
/* the one he has to go out the back for */
.scene[data-beat="hold"][data-react="safe"] #keeper {
  transform: translate(58px, -34px) rotate(3deg); opacity: .22;
  transition: transform 1.5s var(--ease), opacity 1.5s var(--ease);
}

/* ── how hard the room takes it ──────────────────────────────────────
 * The reaction scales with the number. Under 0.5x the light drops a touch
 * and nothing else happens, and the lack of reaction is the joke. From 2x
 * the bulb gets knocked and every shadow in the room moves with it.
 */
.scene[data-react="dud"] #bulb { animation: sway 14s ease-in-out infinite; }
.scene[data-react="big"]  #bulb,
.scene[data-react="huge"] #bulb,
.scene[data-react="safe"] #bulb { animation: knock 3s cubic-bezier(.36,.07,.19,.97) 1 forwards; }
@keyframes knock {
  0%   { transform: rotate(0); }
  10%  { transform: rotate(-9deg); }
  26%  { transform: rotate(7deg); }
  42%  { transform: rotate(-4.6deg); }
  58%  { transform: rotate(3deg); }
  74%  { transform: rotate(-1.7deg); }
  100% { transform: rotate(0); }
}
.scene[data-react="huge"] #bulb,
.scene[data-react="safe"] #bulb { animation-duration: 3.6s; }
/* he looks up, and keeps looking */
.scene[data-react="ok"]   #keeper,
.scene[data-react="big"]  #keeper { animation: none; transform: translate(-6px, -5px) rotate(-1deg); }
.scene[data-react="huge"] #keeper { animation: none; transform: translate(-10px, -9px) rotate(-1.6deg) scale(1.02); }

#bulb { transform-origin: 292px 0; animation: sway 11s ease-in-out infinite; }
@keyframes sway { 0%, 100% { transform: rotate(-.7deg); } 50% { transform: rotate(.7deg); } }
.scene[data-beat="pick"] #bulb { animation: sway 2.4s ease-in-out infinite; }

/* ── the room, left alone ────────────────────────────────────────────
 * Idle life on the things that are already in here. Slow, small, and it
 * must never pull the eye off the counter while a number is landing.
 */

/* The beam. Its opacity lives here and NOT on the element, because a
   keyframe that animates opacity beats a presentation attribute outright
   and the first version of this quietly turned a four percent wedge into
   a solid orange triangle across the whole shop. */
.beam { opacity: .04; }
.beam-hot { opacity: .045; }

/* the filament is not a steady thing, and the beam goes with it */
.filament { animation: flicker 19s linear infinite; }
@keyframes flicker {
  0%, 71%, 100% { opacity: 1; }
  71.6% { opacity: .42; } 72.1% { opacity: 1; }
  72.9% { opacity: .58; } 73.4% { opacity: 1; }
  88%   { opacity: .74; } 88.5% { opacity: 1; }
}
.beam { animation: beamflick 19s linear infinite; }
@keyframes beamflick {
  0%, 71%, 100% { opacity: .04; }
  71.6% { opacity: .018; } 72.1% { opacity: .04; }
  72.9% { opacity: .024; } 73.4% { opacity: .04; }
  88%   { opacity: .03; }  88.5% { opacity: .04; }
}

/* he shifts about back there. Only while nothing is happening, so the
   beat transitions never fight an animation for the same transform. */
.scene[data-beat="idle"] #keeper { animation: idle 13s ease-in-out infinite; }
@keyframes idle {
  0%, 100% { transform: none; }
  22%  { transform: translate(-3px, 1px) rotate(-.4deg); }
  48%  { transform: translate(2px, -1px) rotate(.3deg); }
  74%  { transform: translate(-1px, 2px) rotate(-.2deg); }
}
/* and he looks up when you touch something */
.scene[data-look] #keeper { animation: none; transform: translate(-5px, -3px) rotate(-.8deg); }

/* The smoke off his cigarette. Two wisps on different clocks, rising and
   drifting toward the bulb, and deliberately the slowest thing in the
   building: it is the only motion in an idle shop and it must never pull
   the eye off the counter when a number is landing.
   The base opacity is what is left when the motion is turned off, so a
   reduced motion visitor gets a still wisp rather than nothing. */
.smoke path {
  opacity: .16;
  stroke-width: 2.4;
  transform-origin: 499px 171px;
  animation: puff 12s ease-in-out infinite;
}
.smoke path:nth-child(2) { animation-duration: 16s; animation-delay: -7s; }
@keyframes puff {
  0%   { opacity: 0;   transform: translate(0, 16px) scale(.72); }
  20%  { opacity: .4;  }
  68%  { opacity: .22; }
  100% { opacity: 0;   transform: translate(-14px, -28px) scale(1.16); }
}

/* the end of it going, very slightly, as he breathes */
.ember { animation: ember 5.5s ease-in-out infinite; }
@keyframes ember {
  0%, 100% { opacity: .78; r: 2.2; }
  48%      { opacity: 1;   r: 2.7; }
}

/* somebody walks past outside now and then */
.passer { animation: passby 23s linear infinite; }
@keyframes passby {
  0%, 82%, 100% { transform: translateX(-40px); opacity: 0; }
  84% { opacity: .9; }
  92% { transform: translateX(150px); opacity: .9; }
  93% { opacity: 0; transform: translateX(160px); }
}

.motes circle { opacity: 0; animation: mote 12s ease-in-out infinite; }
.motes circle:nth-child(2n) { animation-duration: 16s; animation-delay: -4s; }
.motes circle:nth-child(3n) { animation-duration: 14s; animation-delay: -9s; }
@keyframes mote {
  0% { opacity: 0; transform: translateY(6px); }
  25% { opacity: .5; } 70% { opacity: .3; }
  100% { opacity: 0; transform: translate(9px, -30px); }
}

/* ── the counter ─────────────────────────────────────────────────────
   A slab of wood with a bulb over it. The light pool is the only soft
   thing in the file and it is soft because that is what light does. */

.counter {
  position: relative; margin-top: -2px; padding: 20px 14px 22px;
  background: var(--wood);
  background-image:
    var(--grain),
    repeating-linear-gradient(91deg, transparent 0 116px, rgba(0,0,0,.5) 116px 119px, rgba(122,78,32,.14) 119px 120px);
  border-top: 3px solid var(--wood-hi);
  box-shadow: inset 0 4px 0 rgba(0,0,0,.35), 0 26px 40px -20px #000;
}
/* the pool the bulb throws. Hard core, one step of penumbra, then nothing. */
.counter::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(58% 40% at 42% -3%,
    rgba(255,184,86,.22) 0 42%, rgba(255,170,60,.08) 42% 68%, transparent 69%);
}
/* everything below the pool goes black, because that is where the light stops */
.counter::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(to bottom, transparent 42%, rgba(6,4,3,.62) 100%);
}
.counter > * { position: relative; z-index: 1; }

/* the ring somebody's mug left */
.ring {
  position: absolute; z-index: 0; right: 16px; top: 52px;
  width: 74px; height: 66px; border: 5px solid rgba(58,30,8,.55);
  border-radius: 50%; transform: rotate(-12deg); pointer-events: none;
}
.ring::after {
  content: ''; position: absolute; inset: 7px; border: 2px solid rgba(58,30,8,.3); border-radius: 50%;
}
/* scratches in the varnish */
.scuff { position: absolute; z-index: 0; height: 1px; background: rgba(233,220,186,.055); pointer-events: none; }
.u1 { left: 4%; top: 30%; width: 44%; transform: rotate(-1.4deg); }
.u2 { right: 8%; top: 61%; width: 36%; transform: rotate(2.2deg); }
.u3 { left: 22%; bottom: 14%; width: 52%; transform: rotate(-.7deg); background: rgba(0,0,0,.4); }

/* what he is saying right now */
.says {
  margin: 0 0 16px; text-align: center; min-height: 1.3em;
  font: 400 clamp(19px, 5.6vw, 26px)/1.25 var(--pen);
  color: #F2E2BE; text-shadow: 0 2px 3px rgba(0,0,0,.8);
}
.says.bad { color: #E8A290; }

.stage { position: relative; }
.stage > .pane { display: none; }
.stage[data-view="counter"]    [data-pane="counter"],
.stage[data-view="appraising"] [data-pane="appraising"],
.stage[data-view="quote"]      [data-pane="quote"],
.stage[data-view="ticket"]     [data-pane="ticket"],
.stage[data-view="cooldown"]   [data-pane="cooldown"] { display: block; }
.pane { animation: land .3s var(--ease) both; }
@keyframes land { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; } }

/* ── the slip ────────────────────────────────────────────────────────
   Manila paper on wood: a hard offset shadow, a torn bottom corner, and
   it is not straight because nobody ever puts paper down straight. */

.slip-wrap { position: relative; max-width: 430px; margin: 0 auto; }
.slip {
  position: relative; padding: 16px 16px 14px;
  background: var(--paper);
  background-image:
    var(--grain),
    repeating-linear-gradient(to bottom, transparent 0 24px, rgba(90,76,50,.15) 24px 25px);
  color: var(--ink); transform: rotate(-.8deg);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 16px) 100%, 0 100%);
  box-shadow: 4px 6px 0 rgba(0,0,0,.6);
}
.slip-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  /* the sticker sits over the top right corner, so the header keeps out
     of its way rather than being printed underneath it */
  padding: 0 52px 7px 0; margin-bottom: 13px; border-bottom: 2px solid var(--ink);
  font: 400 19px/1 var(--sign); letter-spacing: .1em;
}
.slip-no { font: 400 12px/1 var(--doc); color: var(--ink-2); letter-spacing: 0; white-space: nowrap; }

.fld { display: block; }
.fld-lab {
  display: block; margin-bottom: 2px;
  font: 700 9.5px/1 var(--body); letter-spacing: .18em; color: var(--ink-2);
}
.fld-lab i { font-style: normal; color: var(--ink); }
.fld input {
  width: 100%; padding: 5px 2px 7px; border: 0; background: transparent; border-radius: 0;
  border-bottom: 1.5px solid rgba(90,76,50,.5);
  color: var(--ink); font: 400 15px/1.3 var(--doc); letter-spacing: -.02em;
}
.fld input::placeholder { color: rgba(90,76,50,.4); }
/* a whole address is 42 characters and it has to sit inside the paper,
   so this one field runs smaller than the rest of the slip */
#addr { font-size: 12px; letter-spacing: -.045em; }
@media (min-width: 420px) { #addr { font-size: 13.5px; letter-spacing: -.02em; } }
.fld input:focus { outline: 0; border-bottom: 2px solid var(--red); background: rgba(176,42,28,.05); }
.fld input.bad { border-bottom: 2px solid var(--red); background: rgba(176,42,28,.1); }
.amt-in { font-size: 24px !important; font-weight: 700 !important; }

.fld-note { margin: 5px 0 12px; font: 400 11.5px/1.4 var(--body); color: var(--ink-2); }
.fld-note b { color: var(--ink); font-family: var(--doc); font-weight: 700; }
.fld-note.warn { color: var(--red); }

.chips { display: flex; gap: 5px; flex-wrap: wrap; margin: 10px 0 15px; }
.chip {
  padding: 4px 9px; background: transparent; border: 1.5px solid rgba(90,76,50,.5);
  font: 700 11.5px/1 var(--doc); color: var(--ink-2); letter-spacing: -.02em;
}
.chip:hover { background: rgba(90,76,50,.14); color: var(--ink); }
.chip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.err {
  margin: 10px 0 0; padding: 7px 10px; background: rgba(176,42,28,.12);
  border-left: 4px solid var(--red); font: 400 12.5px/1.4 var(--body); color: #7A1D13;
}
.slip-foot { margin: 11px 0 0; text-align: center; font: 400 11px/1.4 var(--body); color: var(--ink-2); }
.slip-foot span { font-family: var(--doc); font-weight: 700; color: var(--ink); }
/* your own afternoon, pencilled along the bottom of the slip */
.tally {
  margin: 3px 0 0; text-align: center;
  font: 400 12.5px/1.3 var(--pen); color: var(--red);
  transform: rotate(-.6deg);
}

/* the sticker somebody slapped on years ago */
.sticker {
  position: absolute; right: -6px; top: -14px; z-index: 3;
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--red); color: #F3E6C8;
  display: grid; place-items: center; text-align: center;
  font: 400 15px/.95 var(--sign); letter-spacing: .04em;
  transform: rotate(13deg);
  box-shadow: 2px 3px 0 rgba(0,0,0,.55);
}

/* ── the appraisal ───────────────────────────────────────────────── */

.appraise { max-width: 430px; margin: 0 auto; text-align: center; }
.tag-rig { position: relative; width: 200px; height: 128px; margin: 0 auto; perspective: 760px; }
.tag-string {
  position: absolute; left: 50%; top: -4px; width: 1.5px; height: 30px;
  background: #C4B183; transform: translateX(-56px) rotate(5deg);
  opacity: 0; transition: opacity .35s var(--ease);
}
.stage[data-view="appraising"] .tag-string { opacity: .85; }

.tag-flip {
  position: absolute; inset: 24px 0 0; transform-style: preserve-3d;
  transition: transform .85s var(--ease);
  transform: translateY(24px) scale(.86) rotateX(46deg);
}
.tag {
  position: absolute; inset: 0; backface-visibility: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 8px 12px 8px 30px; color: var(--ink);
  background: var(--paper); background-image: var(--grain);
  clip-path: polygon(0 50%, 22px 1px, 100% 0, 100% 100%, 22px calc(100% - 1px));
  box-shadow: 5px 8px 0 rgba(0,0,0,.55);
}
.tag-back { transform: rotateY(180deg); }
.tag-hole {
  position: absolute; left: 29px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px;
  border-radius: 50%; background: var(--wood); box-shadow: 0 0 0 1.5px rgba(90,76,50,.55);
}
.tag-amt { font: 700 28px/1 var(--doc); letter-spacing: -.05em; }
.tag-sym { margin-top: 4px; font: 700 9px/1 var(--body); letter-spacing: .24em; color: var(--ink-2); }
.tag-back-l { font: 700 8.5px/1 var(--body); letter-spacing: .2em; color: var(--ink-2); }
.tag-back-a { margin-top: 6px; font: 700 12px/1 var(--doc); }

/* the loupe's glint travelling over it */
.glint {
  position: absolute; inset: 24px 0 0; pointer-events: none; opacity: 0;
  background: radial-gradient(46px 46px at 0% 50%, rgba(255,244,214,.9) 0 34%, rgba(255,206,126,.3) 35% 60%, transparent 61%);
}
.counter[data-beat="pick"]  .tag-flip { transform: translateY(0) scale(1) rotateX(0) rotate(-2.4deg); }
.counter[data-beat="turn"]  .tag-flip { transform: rotateY(180deg) rotate(1.6deg); }
.counter[data-beat="loupe"] .tag-flip { transform: rotateY(360deg) rotate(-1deg) scale(1.06); }
.counter[data-beat="think"] .tag-flip { transform: rotateY(360deg) rotate(-1deg) scale(1.02); }
.counter[data-beat="loupe"] .glint { animation: glint 1.4s var(--ease) forwards; }
@keyframes glint {
  0% { opacity: 0; transform: translateX(-26%); }
  20%, 78% { opacity: 1; }
  100% { opacity: 0; transform: translateX(94%); }
}

.beat-line {
  margin: 16px 0 0; min-height: 1.4em;
  font: 400 19px/1.3 var(--pen); color: #EFDDB8;
  text-shadow: 0 2px 3px rgba(0,0,0,.8);
  animation: beatin .36s var(--ease);
}
@keyframes beatin { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; } }
.beat-dots { display: flex; gap: 6px; justify-content: center; margin-top: 11px; }
.beat-dots i { width: 5px; height: 5px; background: var(--dim-2); animation: pulse 1.35s ease-in-out infinite; }
.beat-dots i:nth-child(2) { animation-delay: .17s; }
.beat-dots i:nth-child(3) { animation-delay: .34s; }
@keyframes pulse {
  0%, 100% { opacity: .3; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.4); background: var(--brass); }
}

/* ── the number ──────────────────────────────────────────────────────
   A price gun comes down, hits the card, goes back up. The card shakes,
   the number lands misregistered, and the till underneath says what it
   comes to. Nothing here fades in. */

.quote { position: relative; max-width: 430px; margin: 0 auto; padding-top: 4px; }
.gun {
  position: absolute; z-index: 3; width: 70px; height: 65px;
  left: 50%; margin-left: -4px; top: -78px; opacity: 0; pointer-events: none;
  filter: drop-shadow(3px 6px 0 rgba(0,0,0,.5));
}
.quote.firing .gun { animation: gunfire .95s var(--ease) forwards; }
@keyframes gunfire {
  0%   { transform: translateY(-56px) rotate(-22deg); opacity: 0; }
  26%  { transform: translateY(0)     rotate(-7deg);  opacity: 1; }
  33%  { transform: translateY(24px)  rotate(-3deg);  opacity: 1; }
  45%  { transform: translateY(0)     rotate(-9deg);  opacity: 1; }
  100% { transform: translateY(-68px) rotate(-20deg); opacity: 0; }
}

.ratecard {
  position: relative; padding: 20px 14px 16px; text-align: center; color: var(--ink);
  background: var(--paper);
  background-image: var(--grain),
    repeating-linear-gradient(to bottom, transparent 0 25px, rgba(90,76,50,.12) 25px 26px);
  transform: rotate(-.9deg);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 13px 100%, 0 calc(100% - 13px));
  box-shadow: 4px 6px 0 rgba(0,0,0,.6);
}
/* a chip out of the corner */
.rc-chip {
  position: absolute; right: -1px; top: -1px; width: 16px; height: 16px;
  background: var(--wood); clip-path: polygon(100% 0, 100% 100%, 0 0);
}
.quote.firing .ratecard { animation: hit .34s var(--ease) .29s; }
@keyframes hit {
  0%   { transform: rotate(-.9deg) translateY(0) scaleY(1); }
  17%  { transform: rotate(-.9deg) translateY(6px) scaleY(.978); }
  45%  { transform: rotate(-.5deg) translateY(-3px) scaleY(1.01); }
  100% { transform: rotate(-.9deg) translateY(0) scaleY(1); }
}
.rc-lab { font: 700 10px/1 var(--body); letter-spacing: .22em; color: var(--ink-2); }
.rc-num {
  position: relative; display: inline-block; margin: 6px 0 3px;
  font: 400 clamp(64px, 19vw, 92px)/.9 var(--sign); letter-spacing: .01em;
  color: var(--red); transform: rotate(-1.8deg);
}
/* The second pull. A rubber stamp never lands clean and this misregistered
   ghost is most of why the number looks physical instead of typeset.
   A text-shadow rather than a z-index:-1 pseudo element: same result, no
   extra box to escape its ancestor's stacking context and no second thing
   for the compositor to lose hold of during the reveal. */
.rc-num { text-shadow: 2px 2px 0 rgba(107, 26, 17, .34); }
/* No blur in here. An animated `filter` promotes the figure to its own
   compositing layer and the layer does not always get rasterised again
   once the animation is removed, which leaves the one number the whole
   site exists for showing as an empty card. The hard landing comes off
   scale and rotation, which composite safely. */
.quote.firing .rc-num { animation: stamp .26s cubic-bezier(.2,.9,.2,1) .29s both; }
@keyframes stamp {
  0%   { opacity: 0; transform: rotate(-10deg) scale(2.2); }
  55%  { opacity: 1; transform: rotate(-.4deg) scale(.95); }
  100% { opacity: 1; transform: rotate(-1.8deg) scale(1); }
}
.rc-on { font: 400 12.5px/1.3 var(--body); color: var(--ink-2); }
.rc-on b { font-family: var(--doc); font-weight: 700; color: var(--ink); }

/* ── how hard the number lands ───────────────────────────────────────
 * A 0.4x and a 12x cannot arrive the same way or the whole thing is a
 * form again. Under 0.5x the figure is small, the card barely moves and
 * the light drops: he is not impressed and neither is the shop. From 2x
 * up it slams, the card jumps, and the counter takes the hit with it.
 * All of it happens in place, so not one pixel of layout moves.
 */
.quote[data-tier="dud"]  .rc-num {
  font-size: clamp(46px, 13.5vw, 64px); color: #8A4137;
  text-shadow: 2px 2px 0 rgba(107, 26, 17, .18);   /* a lighter pull, too */
}
.quote[data-tier="big"]  .rc-num { font-size: clamp(70px, 21vw, 104px); }
.quote[data-tier="huge"] .rc-num { font-size: clamp(74px, 23vw, 116px); }
.quote[data-tier="safe"] .rc-num { font-size: clamp(74px, 24vw, 124px); }

/* he barely reacts, and the counter goes a shade darker with him */
.counter[data-react="dud"]::before { opacity: .55; transition: opacity .6s linear; }
.counter[data-react="huge"]::before,
.counter[data-react="safe"]::before { opacity: 1.35; transition: opacity .4s linear; }

/* the flat one: it lands, nothing jumps */
.quote[data-tier="dud"].firing .ratecard { animation: hit-soft .3s var(--ease) .29s; }
@keyframes hit-soft {
  0%, 100% { transform: rotate(-.9deg); }
  35% { transform: rotate(-.9deg) translateY(2px); }
}
/* the ones worth reacting to: it slams and the whole counter takes it */
.quote[data-tier="big"].firing .ratecard,
.quote[data-tier="huge"].firing .ratecard,
.quote[data-tier="safe"].firing .ratecard { animation: slam .52s var(--ease) .29s; }
@keyframes slam {
  0%   { transform: rotate(-.9deg) translateY(0) scaleY(1); }
  12%  { transform: rotate(-.2deg) translateY(11px) scaleY(.94); }
  34%  { transform: rotate(-2.4deg) translateY(-7px) scaleY(1.03); }
  56%  { transform: rotate(-.4deg) translateY(3px) scaleY(.99); }
  100% { transform: rotate(-1.6deg) translateY(0) scaleY(1); }
}
.quote[data-tier="big"].firing  .counter,
.counter[data-react="big"].shook,
.counter[data-react="huge"].shook,
.counter[data-react="safe"].shook { animation: jolt .4s var(--ease); }
@keyframes jolt {
  0%, 100% { transform: none; }
  20% { transform: translateY(3px); }
  50% { transform: translateY(-2px); }
  75% { transform: translateY(1px); }
}

/* the overprint, inked on afterwards, only on the ones that earn it */
.overstamp {
  position: absolute; right: -6px; top: 8px; z-index: 3;
  padding: 3px 9px 4px; transform: rotate(-9deg);
  font: 400 15px/1 var(--sign); letter-spacing: .09em;
  color: var(--red); border: 2.5px solid var(--red); opacity: .8;
}
.quote.firing .overstamp { animation: overink .3s cubic-bezier(.2,.9,.2,1) .62s both; }
@keyframes overink {
  0%   { opacity: 0; transform: rotate(-20deg) scale(2.1); }
  60%  { opacity: .9; transform: rotate(-7deg) scale(.94); }
  100% { opacity: .8; transform: rotate(-9deg) scale(1); }
}

/* the till drawer under it */
.till {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 2px 10px 0; padding: 11px 14px;
  background: var(--wood-m); border-top: 2px solid var(--wood-hi);
  box-shadow: inset 0 5px 10px rgba(0,0,0,.65), 3px 5px 0 rgba(0,0,0,.5);
  transform-origin: top center;
}
.quote.firing .till { animation: drawer .42s var(--ease) .55s both; }
@keyframes drawer {
  0%   { opacity: 0; transform: translateY(-22px) scaleY(.35); }
  72%  { opacity: 1; transform: translateY(4px) scaleY(1.02); }
  100% { opacity: 1; transform: none; }
}
.till-lab { font: 700 9px/1 var(--body); letter-spacing: .2em; color: var(--dim); }
.till-num { font: 700 20px/1 var(--doc); color: var(--brass-l); letter-spacing: -.045em; }
.till-band { margin-left: auto; text-align: right; font: 400 10.5px/1.3 var(--body); color: var(--dim); }

.keeper-line {
  margin: 15px 2px 16px; text-align: center;
  font: 400 21px/1.3 var(--pen); color: #F2E2BE; text-shadow: 0 2px 3px rgba(0,0,0,.8);
}

/* TAKE IT is brass. WALK is the red steel plate on the door frame. They
   are different objects, not the same button in two colours, and neither
   is an outline of the other. */
/* the decision keeps clear of the ticker even when something scrolls it
   to the bottom of the viewport */
.acts { display: grid; grid-template-columns: 1.45fr 1fr; gap: 8px;
        scroll-margin-bottom: calc(var(--tick-h) + 16px); }
.take, .walkoff {
  padding: 15px 10px; font: 400 23px/1 var(--sign); letter-spacing: .06em;
  transition: background var(--t-fast), transform .1s var(--ease);
}
.take {
  background: var(--brass); color: #1A1104;
  box-shadow: inset 0 3px 0 var(--brass-l), inset 0 -3px 0 var(--brass-d),
              inset 3px 0 0 rgba(255,232,180,.3), inset -3px 0 0 rgba(0,0,0,.3),
              3px 4px 0 rgba(0,0,0,.65);
}
.take:hover { background: #D09E2A; }
.take:active { transform: translate(2px, 3px); box-shadow: inset 0 3px 0 var(--brass-l), inset 0 -3px 0 var(--brass-d), 1px 1px 0 rgba(0,0,0,.65); }
.take[disabled] { background: #5A4620; color: #2A2114; box-shadow: inset 0 3px 0 #756033, inset 0 -3px 0 #38290F; cursor: default; }
.walkoff {
  background: var(--red); color: #F3E2C4;
  box-shadow: inset 0 3px 0 var(--red-l), inset 0 -3px 0 #6E1A10,
              inset 3px 0 0 rgba(255,200,180,.2), inset -3px 0 0 rgba(0,0,0,.3),
              3px 4px 0 rgba(0,0,0,.65);
}
.walkoff:hover { background: #C33223; }
.walkoff:active { transform: translate(2px, 3px); box-shadow: inset 0 3px 0 var(--red-l), inset 0 -3px 0 #6E1A10, 1px 1px 0 rgba(0,0,0,.65); }

.acts-note { margin: 10px 0 0; text-align: center; font: 400 11.5px/1.4 var(--body); color: var(--dim); }
.acts-note span { color: var(--txt-2); }
.shut-note {
  margin: 0 0 10px; padding: 9px 11px; background: rgba(176,42,28,.16);
  border-left: 4px solid var(--red); font: 400 12.5px/1.45 var(--body); color: #E8A290;
}

/* ── the ticket ──────────────────────────────────────────────────────
   The thing people screenshot. It has to survive being cropped to a
   phone, so it carries its own paper edge all the way round. */

.ticketwrap { max-width: 420px; margin: 0 auto; }
.ticket {
  position: relative; padding: 26px 15px 13px; color: var(--ink);
  background: var(--paper);
  background-image: var(--grain),
    repeating-linear-gradient(to bottom, transparent 0 23px, rgba(90,76,50,.13) 23px 24px);
  transform: rotate(-.6deg);
  box-shadow: 3px 4px 0 rgba(90,76,50,.3), 6px 8px 0 rgba(0,0,0,.6);
}
/* The perforation. The holes are painted in the colour of the counter the
   ticket is lying on, because a hole shows you what is behind the paper.
   Masking the element instead would take the hard drop shadow with it. */
.perf {
  position: absolute; left: 0; right: 0; top: 0; height: 10px;
  background: radial-gradient(circle at 5.5px 0, var(--wood) 0 4.4px, transparent 4.9px);
  background-size: 11px 11px; background-repeat: repeat-x;
}
.ticket::after {
  content: ''; position: absolute; left: 0; right: 0; top: 11px; height: 1px;
  background: repeating-linear-gradient(90deg, rgba(90,76,50,.55) 0 4px, transparent 4px 9px);
}

.tk-top { display: flex; align-items: center; gap: 10px; padding-bottom: 9px; border-bottom: 2px solid var(--ink); }
.tk-balls { width: 28px; height: 24px; fill: var(--ink); flex-shrink: 0; }
.tk-titles { flex: 1; min-width: 0; }
.tk-title { font: 400 24px/1 var(--sign); letter-spacing: .07em; }
.tk-sub {
  margin-top: 3px; font: 700 7.5px/1 var(--body); letter-spacing: .1em; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* the serial, rubber stamped on afterwards and not quite straight */
.tk-serial {
  flex-shrink: 0; padding: 3px 7px; font: 700 12.5px/1 var(--doc); letter-spacing: -.02em;
  color: var(--red); border: 2px solid var(--red); transform: rotate(3.6deg); opacity: .86;
}

.tk-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 8px 0; border-bottom: 1px dotted rgba(90,76,50,.5);
}
.tk-row span { font: 700 9px/1 var(--body); letter-spacing: .16em; color: var(--ink-2); }
.tk-row b { font: 700 15px/1.2 var(--doc); letter-spacing: -.035em; text-align: right; }
.tk-mult { color: var(--red) !important; font-size: 19px !important; }
.tk-row-big b { font-size: 22px; }

.tk-dep { margin-top: 12px; padding: 10px; border: 2px dashed rgba(90,76,50,.55); background: rgba(90,76,50,.05); }
.tk-dep-lab { font: 700 8.5px/1.3 var(--body); letter-spacing: .15em; color: var(--ink-2); margin-bottom: 7px; }
.tk-copy {
  position: relative; display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px 8px; border: 1px solid rgba(90,76,50,.45); background: rgba(255,252,240,.4);
  color: var(--ink); text-align: left;
}
.tk-copy:hover { background: rgba(255,252,240,.85); border-color: var(--ink-2); }
.tk-copy span { flex: 1; min-width: 0; font: 700 12px/1.35 var(--doc); overflow-wrap: anywhere; }
.tk-copy svg { width: 13px; height: 13px; flex-shrink: 0; color: var(--ink-2); }
.tk-copy.done { background: rgba(94,125,42,.22); border-color: var(--green); }
.tk-copy-sm { margin-top: 5px; }
.tk-copy-sm span { font-size: 10px; font-weight: 400; color: var(--ink-2); }
.tk-from { margin-top: 7px; font: 400 10px/1.4 var(--doc); color: var(--ink-2); overflow-wrap: anywhere; }

.tk-line {
  margin: 13px 0 0; padding-left: 9px; border-left: 4px solid rgba(176,42,28,.35);
  font: 400 18px/1.3 var(--pen); color: var(--ink);
}
.tk-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 13px; padding-top: 10px; border-top: 2px solid var(--ink);
}
.tk-status { display: flex; align-items: center; gap: 7px; font: 700 10px/1.2 var(--body); letter-spacing: .1em; color: var(--ink-2); }
.tk-status b { color: var(--ink); font-weight: 700; }
.tk-pip { width: 8px; height: 8px; background: var(--red); flex-shrink: 0; animation: blink 1.5s steps(1) infinite; }
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .2; } }
.tk-status.ok .tk-pip { background: var(--green); animation: none; }
.tk-status.dead .tk-pip { background: var(--ink-2); animation: none; }
.tk-clock { font: 700 18px/1 var(--doc); letter-spacing: -.05em; color: var(--ink); }
.tk-clock.low { color: var(--red); }

.tk-warn {
  margin: 14px 0 0; padding: 9px 11px; background: rgba(184,137,31,.1);
  border-left: 4px solid var(--brass-d); font: 400 12px/1.5 var(--body); color: var(--txt-2);
}
.tk-acts { display: flex; gap: 14px; margin-top: 12px; flex-wrap: wrap; justify-content: center; }
.claimbox { display: flex; gap: 7px; margin-top: 9px; }
.claimbox input {
  flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--wood-l);
  background: var(--black-2); color: var(--txt); font: 400 12px/1 var(--doc);
}
.claimbox input:focus { outline: 0; border-color: var(--brass); }

/* the plain worn-out text link. Not a ghost button. */
.walk {
  padding: 0; font: 400 13px/1.4 var(--body); color: var(--dim);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-style: dotted;
}
.walk:hover { color: var(--txt-2); }

/* ── three minutes ───────────────────────────────────────────────── */

.cool { max-width: 480px; margin: 0 auto; }
.cool-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.cool-dial { position: relative; width: 78px; height: 78px; flex-shrink: 0; display: grid; place-items: center; }
.cool-dial svg { position: absolute; inset: 0; width: 100%; height: 100%; }
#coolRing { transition: stroke-dashoffset 1s linear; }
.cool-num { position: relative; font: 700 18px/1 var(--doc); color: var(--brass-l); letter-spacing: -.05em; }
.cool-txt h3 { margin: 0 0 4px; font: 400 23px/1 var(--sign); letter-spacing: .06em; color: var(--txt); }
.cool-txt p { margin: 0; font: 400 12.5px/1.5 var(--body); color: var(--txt-2); }
.cool .plate-lg { margin-top: 12px; }

/* ── how the existing things answer back ─────────────────────────────
 * Polish on what is already on the page. Not one pixel of layout moves:
 * the paper lifts a little under a finger, the plate depresses, the bell
 * on it rings, the taped signs peel at a corner. Nothing new got added to
 * the room to make this happen.
 */

/* the bell on the plate actually rings when the plate is pressed */
.plate-bell svg { transform-origin: 50% 20%; }
.plate-bell.ping svg { animation: bellswing .5s cubic-bezier(.36,.07,.19,.97); }
@keyframes bellswing {
  0%, 100% { transform: rotate(0); }
  18% { transform: rotate(-17deg); }
  42% { transform: rotate(13deg); }
  68% { transform: rotate(-6deg); }
  86% { transform: rotate(3deg); }
}
.plate-bell.ping { animation: platehit .34s var(--ease); }
@keyframes platehit {
  0%, 100% { transform: none; } 30% { transform: translateY(2px) scaleY(.97); }
}

/* laminated signs lift off the glass under a finger */
.lam { transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.lam:hover { transform: rotate(-.2deg) translateY(-2px); box-shadow: 4px 7px 0 rgba(0,0,0,.6); }
.lam:hover .lam-curl { width: 30px; height: 30px; }
.lam-curl { transition: width .3s var(--ease), height .3s var(--ease); }

/* the slip is paper: it sits crooked, it lifts when you are writing on it,
   and it slides off the counter when he takes it */
.slip { transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.slip:focus-within { transform: rotate(-.35deg) translateY(-2px); box-shadow: 5px 8px 0 rgba(0,0,0,.6); }
.slip-wrap.away .slip { transform: translate(26px, 42px) rotate(4deg); opacity: 0; transition: all .26s var(--ease); }
.slip-wrap.away .sticker { opacity: 0; transition: opacity .2s linear; }

/* ── the day book ────────────────────────────────────────────────────
   A page out of a ledger. Ruled paper, typed entries, the multiplier
   stamped in red down the right hand column. */

.book {
  background: var(--paper);
  background-image: var(--grain);
  color: var(--ink); box-shadow: 4px 6px 0 rgba(0,0,0,.6);
  transform: rotate(-.3deg);
}
.book-live { margin-bottom: 12px; transform: none; }
.book-head {
  display: flex; align-items: baseline; gap: 9px; padding: 9px 12px 7px;
  border-bottom: 2px solid var(--ink);
}
.book-head b { font: 400 19px/1 var(--sign); letter-spacing: .1em; }
.book-head span { font: 700 8.5px/1 var(--body); letter-spacing: .17em; color: var(--ink-2); }
.book-live .rows { max-height: 268px; overflow-y: auto; }
/* a default scrollbar on a sheet of manila looks like a browser, so it
   gets dressed as part of the page */
.rows { scrollbar-width: thin; scrollbar-color: rgba(90,76,50,.55) rgba(90,76,50,.12); }
.rows::-webkit-scrollbar { width: 9px; }
.rows::-webkit-scrollbar-track { background: rgba(90,76,50,.12); }
.rows::-webkit-scrollbar-thumb { background: rgba(90,76,50,.55); }
.totals { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid var(--ink); }
.tot { padding: 8px 10px; border-right: 1px solid rgba(90,76,50,.3); border-bottom: 1px solid rgba(90,76,50,.3); }
.tot span { display: block; font: 700 8px/1 var(--body); letter-spacing: .14em; color: var(--ink-2); }
.tot b { display: block; margin-top: 4px; font: 700 15px/1 var(--doc); letter-spacing: -.04em; }
.tot:last-child b { color: var(--red); }

/* ── laminated signs ─────────────────────────────────────────────────
   Printed, laminated, taped up crooked, curling at one corner. */

.wallsec { padding: 34px 0; }
.wallsec.last { padding-bottom: 46px; }

.lam {
  position: relative; padding: 15px 16px 16px; background: var(--lam); color: var(--ink);
  box-shadow: 3px 5px 0 rgba(0,0,0,.6);
  transform: rotate(-.6deg);
}
/* the tape holding it up */
.lam::before, .lam::after {
  content: ''; position: absolute; top: -9px; width: 46px; height: 17px;
  background: rgba(226,214,176,.42); box-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.lam::before { left: 14px; transform: rotate(-5deg); }
.lam::after { right: 14px; transform: rotate(4deg); }
/* the corner that has started to lift */
.lam-curl {
  position: absolute; right: 0; bottom: 0; width: 22px; height: 22px;
  background: #C9C3AB; clip-path: polygon(100% 0, 100% 100%, 0 100%);
  box-shadow: -2px -2px 3px rgba(0,0,0,.25) inset;
}
.lam b {
  display: block; font: 400 clamp(20px, 5.6vw, 26px)/1.05 var(--sign);
  letter-spacing: .05em; color: var(--ink);
}
.lam-sub { display: block; margin-top: 2px; font: 700 8.5px/1 var(--body); letter-spacing: .17em; color: var(--ink-2); }
.lam p { margin: 8px 0 0; font: 400 13px/1.5 var(--body); color: #3E3524; }
.lam-end { font-weight: 700; color: var(--ink) !important; }

.trust { margin-top: 20px; transform: rotate(.5deg); }
@media (min-width: 720px) { .trust { max-width: 640px; margin-left: auto; margin-right: auto; } }

/* ── the rate card ────────────────────────────────────────────────────
 *
 * One row per band, read down: the band on the left, the bar across the
 * middle, the percentage on the right. Nothing is ever rotated and
 * nothing sits on top of a bar.
 *
 * Ten bands running left to right could only be made to fit on a phone by
 * turning every label on its side, which made the published odds
 * unreadable, which defeats the point of publishing them. Down the page
 * the hump shows up as a bulge in the left hand edge, every label is real
 * horizontal text, and it works the same at four bands or at twelve.
 *
 * No gridlines, no axis, no marker for evens. It is a sign taped to the
 * glass, not a chart widget.
 */

.rates { padding-bottom: 20px; }
.odds { margin-top: 12px; }
.chart { border-top: 2px solid var(--ink); }

.orow {
  display: grid; align-items: center; gap: 8px;
  grid-template-columns: 92px minmax(0, 1fr) 40px;
  padding: 5px 0 5px 4px; margin-left: -4px;
  border-bottom: 1px solid rgba(90,76,50,.3);
  border-left: 4px solid transparent;
}
.orow:last-child { border-bottom: 0; }

.orow-band { font: 700 11px/1.2 var(--doc); letter-spacing: -.055em; color: var(--ink-2); }
.orow-bar { display: block; height: 11px; }
.orow-bar i {
  display: block; height: 100%; min-width: 3px;
  background: var(--ink-2);
  border-right: 2px solid var(--ink);
}
.orow-pct {
  font: 700 11px/1.2 var(--doc); letter-spacing: -.05em; color: var(--ink);
  text-align: right;
}

/* The row people actually land in. Somebody has marked it in the margin,
   because it is the answer to the only question anybody has. */
.orow.hump { border-left-color: var(--red); background: rgba(176,42,28,.07); }
.orow.hump .orow-band { color: var(--ink); }
.orow.hump .orow-bar i { background: var(--red); border-right-color: #6E1A10; }
.orow.hump .orow-pct { color: var(--red); font-size: 13px; }

/* off at the amount currently in the box, and only at that amount */
.orow.off { opacity: .5; }
.orow.off .orow-band { text-decoration: line-through; }
.orow.off .orow-bar i {
  background-image: repeating-linear-gradient(45deg,
    rgba(237,232,214,.9) 0 2px, transparent 2px 5px);
}

/* the row this quote landed in */
.orow.hit { background: rgba(29,24,16,.12); border-left-color: var(--ink); }
.orow.hit .orow-band, .orow.hit .orow-pct { color: var(--ink); }
.orow.hit .orow-bar i { background: var(--ink); border-right-color: var(--ink); }

.chart-say {
  margin: 10px 0 0 !important; font-size: 12px !important; line-height: 1.5 !important;
  color: #3E3524 !important;
}
.chart-say b { display: inline; font: 700 12.5px/1 var(--doc); color: var(--red); letter-spacing: -.03em; }
.chart-cap {
  margin: 7px 0 0 !important; padding: 6px 8px;
  background: rgba(176,42,28,.1); border-left: 3px solid var(--red);
  font-size: 11px !important; line-height: 1.45 !important; color: #7A1D13 !important;
}

.rates-small { margin-top: 10px !important; font-size: 11.5px !important; color: var(--ink-2) !important; }
.rates-small b { display: inline; font: 700 12px/1 var(--doc); color: var(--ink); letter-spacing: -.03em; }

/* the price sticker, written on in marker and stuck on at an angle */
.marker {
  position: absolute; right: -6px; top: -20px; z-index: 3;
  padding: 7px 12px 8px; background: #E8E3CE; color: var(--red);
  text-align: center; transform: rotate(6.5deg);
  box-shadow: 2px 3px 0 rgba(0,0,0,.55);
  border: 1px solid rgba(90,76,50,.4);
}
.marker-l { display: block; font: 700 8px/1 var(--body); letter-spacing: .16em; color: #6B5A3C; }
.marker-n { display: block; margin-top: 1px; font: 400 27px/1 var(--pen); letter-spacing: -.01em; }
/* nobody has had a good one yet today, so it does not pretend otherwise */
.marker.empty .marker-n { font-size: 15px; color: #6B5A3C; }

@media (min-width: 560px) {
  .orow { grid-template-columns: 112px minmax(0, 1fr) 52px; padding: 6px 0 6px 4px; }
  .orow-band, .orow-pct { font-size: 12.5px; letter-spacing: -.03em; }
  .orow.hump .orow-pct { font-size: 15px; }
  .orow-bar { height: 13px; }
}

/* ── by the till ─────────────────────────────────────────────────── */

.tillsec { display: grid; gap: 34px; }
.steps ol { margin: 10px 0 0; padding: 0 0 0 26px; counter-reset: s; list-style: none; }
.steps li {
  position: relative; counter-increment: s; padding: 4px 0;
  font: 400 13px/1.5 var(--body); color: #3E3524;
}
.steps li::before {
  content: counter(s); position: absolute; left: -26px; top: 4px;
  width: 18px; height: 18px; display: grid; place-items: center;
  background: var(--ink); color: var(--lam); font: 700 10px/1 var(--doc);
}

.tillside { display: grid; gap: 26px; align-content: start; }
/* felt tip on the wall */
.scrawl {
  transform: rotate(-3deg); padding-left: 4px;
  font: 400 clamp(26px, 7.6vw, 38px)/1 var(--pen); color: var(--amber);
}
.scrawl span { display: block; }
.scrawl span:nth-child(2) { margin-left: 14px; transform: rotate(1.2deg); }
.scrawl span:nth-child(3) { margin-left: 4px; transform: rotate(-.8deg); color: var(--red-l); }

.fair { transform: rotate(.8deg); }
.fair-seed { font: 700 11px/1 var(--doc); color: var(--ink); overflow-wrap: anywhere; }

/* ── foot ────────────────────────────────────────────────────────── */

.foot {
  border-top: 3px solid var(--wood-d); padding: 20px 0 32px;
  background: var(--wood-d); background-image: var(--grain);
}
.foot-in { display: flex; flex-direction: column; gap: 10px; }
.foot-mark { display: flex; align-items: center; gap: 8px; font: 400 15px/1 var(--sign); letter-spacing: .1em; color: var(--dim); }
.foot-mark svg { width: 19px; height: 16px; fill: var(--brass-d); }
.foot-note { font: 400 11.5px/1.5 var(--body); color: var(--dim-2); max-width: 52ch; }
.foot-links { display: flex; gap: 15px; font: 700 10px/1 var(--body); letter-spacing: .16em; color: var(--dim); }
.foot-links a:hover { color: var(--txt-2); }

/* ── over the counter, along the bottom ──────────────────────────────
 *
 * The one live surface on the site. A strip of the same wood as the board
 * over the door, with a brass edge where the light catches it.
 *
 * It is fixed, so every pixel of it is a pixel taken off the shop. Forty
 * on a phone is the ceiling and the body carries matching padding, so it
 * can never end up sitting on top of TAKE IT and WALK.
 */

:root { --tick-h: 40px; }

body { padding-bottom: calc(var(--tick-h) + env(safe-area-inset-bottom, 0px)); }

.ticker {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: flex; align-items: stretch;
  height: calc(var(--tick-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--wood);
  background-image: var(--grain),
    repeating-linear-gradient(90deg, transparent 0 91px, rgba(0,0,0,.55) 91px 93px);
  border-top: 2px solid var(--brass-d);
  box-shadow: 0 -8px 18px -10px #000, inset 0 2px 0 rgba(122,78,32,.3);
  transition: height .28s var(--ease);
}

.tick-tab {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
  padding: 0 10px; border-right: 2px solid rgba(0,0,0,.5);
  font: 400 12px/1 var(--sign); letter-spacing: .13em; color: var(--brass-l);
}
.tick-tab svg { width: 12px; height: 12px; transition: transform .28s var(--ease); }
.tick-tab:hover { color: #F6DFA6; }

.tick-body { flex: 1; min-width: 0; display: flex; align-items: center; overflow: hidden; }
.tick-track { display: flex; align-items: center; gap: 7px; padding: 0 9px; }

/* one entry, printed like a line out of the book */
.tk {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
  padding: 4px 8px 5px; background: rgba(0,0,0,.34);
  border-left: 3px solid var(--dim-2);
  font: 400 11px/1 var(--doc); letter-spacing: -.03em; color: var(--txt-2);
  animation: tickin .42s var(--ease);
}
@keyframes tickin {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: none; }
}
.tk.going { animation: tickout .4s var(--ease) forwards; }
@keyframes tickout {
  to { opacity: 0; transform: translateX(22px) scaleX(.85); }
}
.tk-who { color: var(--dim); }
.tk-amt { font-weight: 700; }
.tk-x { font-weight: 700; color: var(--brass-l); }
/* took against walked, readable without reading any of it */
.tk.took { border-left-color: var(--green); }
.tk.took .tk-act { color: #9DBF55; }
.tk.walked { border-left-color: #7A3225; opacity: .74; }
.tk.walked .tk-act { color: #B5705F; }
.tk-act { font: 700 8.5px/1 var(--body); letter-spacing: .1em; }

/* nothing has happened, so nothing is invented */
.tick-empty {
  padding: 0 4px; font: 400 15px/1 var(--pen); color: var(--dim);
  white-space: nowrap;
}

/* collapsed to a strip, and it stays collapsed next time */
.ticker.shut { height: calc(20px + env(safe-area-inset-bottom, 0px)); }
.ticker.shut .tick-body { opacity: 0; }
.ticker.shut .tick-tab svg { transform: rotate(180deg); }
.ticker.shut .tick-tab { font-size: 10px; padding: 0 8px; }
body.tickshut { padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }

@media (min-width: 720px) {
  :root { --tick-h: 44px; }
  .tick-tab { padding: 0 14px; font-size: 14px; }
  .tk { font-size: 12px; padding: 5px 10px 6px; }
}

/* a figure that changed on a poll says so rather than swapping silently */
.bump { animation: bump .7s var(--ease); }
@keyframes bump {
  0% { color: var(--brass-l); transform: translateY(-2px); }
  100% { transform: none; }
}

/* ── toasts ──────────────────────────────────────────────────────── */

.toasts {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 90;
  display: flex; flex-direction: column; gap: 7px; align-items: center;
  width: min(400px, calc(100vw - 24px)); pointer-events: none;
}
.toast {
  padding: 10px 14px; background: var(--paper); color: var(--ink);
  font: 400 12.5px/1.4 var(--body); box-shadow: 3px 4px 0 rgba(0,0,0,.7);
  transform: rotate(-.5deg); animation: toastin .28s var(--ease);
}
.toast.good { border-left: 5px solid var(--green); }
.toast.bad { border-left: 5px solid var(--red); }
.toast.out { opacity: 0; transition: opacity .3s linear; }
@keyframes toastin { from { opacity: 0; transform: translateY(12px) rotate(-.5deg); } to { opacity: 1; } }

/* ── wider than a phone ──────────────────────────────────────────────
   The shop gets deeper, not tidier. Nothing gains a radius and nothing
   straightens up. */

@media (min-width: 720px) {
  .fascia-in { height: 60px; gap: 13px; }
  .mark b { font-size: 24px; }
  .room { padding-top: 26px; }
  .counter { padding: 26px 28px 30px; }
  .slip-wrap, .quote, .appraise { max-width: 470px; }
  .ticketwrap { max-width: 440px; }
  .totals { grid-template-columns: repeat(5, 1fr); }
  .tillsec { grid-template-columns: 1.15fr .85fr; gap: 40px; }
  .wallsec { padding: 46px 0; }
  .foot-in { flex-direction: row; align-items: center; justify-content: space-between; }
  .foot-note { flex: 1; padding: 0 20px; }
  .sign-say { padding-left: 14px; }
}

/* ── the counter, with room on it ────────────────────────────────────
   Past this width the counter stops being a column and becomes a
   surface: the slip in front of you, the rules taped to the glass on
   your right, and the mug ring between them. A wide empty slab with one
   small card floating in the middle of it is a landing page, not a shop. */
@media (min-width: 880px) {
  .counter {
    display: grid; grid-template-columns: minmax(0, 1fr) 286px;
    column-gap: 34px; align-items: start;
    padding: 28px 34px 34px;
  }
  .says  { grid-column: 1; grid-row: 1; }
  .stage { grid-column: 1; grid-row: 2; }
  .trust {
    grid-column: 2; grid-row: 1 / span 2; margin: 14px 0 0;
    max-width: none; transform: rotate(1.3deg);
  }
  .trust p { font-size: 12.5px; }
  .ring { right: 302px; top: 74px; width: 88px; height: 78px; }
  .u2 { right: 24%; top: 74%; }

  /* the rate card and the book, side by side on the same bit of wall */
  .wall { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 40px; align-items: start; }
  .rates { transform: rotate(-1.1deg); }
  .book { transform: rotate(.6deg); margin-top: 10px; }
  .book .rows { max-height: 330px; overflow-y: auto; }
}

@media (min-width: 900px) {
  .tag-rig { width: 226px; height: 142px; }
  .tag-amt { font-size: 32px; }
  .sign { padding: 10px 34px 14px; }
}

/* ── less motion ─────────────────────────────────────────────────────
 * The beat stays. It is the product, and a pause is not motion. What goes
 * is everything that moves: the flip, the sway, the gun, the drawer. The
 * number still arrives after the same three seconds, it just is not
 * thrown at you on the way in.
 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    /* the staged delays are zeroed too, or a keyframe set with `both` fill
       holds its opacity:0 first frame and the number is briefly missing */
    animation-delay: 0ms !important;
    transition-duration: .01ms !important;
  }
  .tag-flip { transform: none !important; }
  .glint { display: none; }
  #loupe { opacity: 1; transform: none; }
  .gun { display: none; }
  .rc-num { transform: rotate(-1.8deg) !important; opacity: 1 !important; }
}