:root {
  /* Typography compliance tokens from DESIGN.md: IBM Plex Sans** Sans* from Google Fonts for clarity; Space Mono** Mono* from Google Fonts for receipt codes. */
  --honey: #E8C77A;
  --oat: #F6E9C8;
  --espresso: #4A2C1B;
  --green: #3F6F4E;
  --rust: #C65A2E;
  --blue: #2D6F8F;
  --ink: #17130F;
  --cream: #FFF4D8;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--honey);
  color: var(--ink);
  font-family: "IBM Plex Sans", Inter, system-ui, sans-serif;
}

body {
  background:
    radial-gradient(circle at 16% 34%, rgba(74, 44, 27, .14) 0 34px, transparent 35px),
    radial-gradient(circle at 83% 18%, rgba(198, 90, 46, .15) 0 22px, transparent 24px),
    linear-gradient(100deg, #E8C77A 0%, #F6E9C8 52%, #E8C77A 100%);
}

button { font: inherit; color: inherit; }

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .42;
  background-image:
    repeating-linear-gradient(38deg, rgba(23,19,15,.045) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-3deg, rgba(255,244,216,.35) 0 2px, transparent 2px 13px);
  mix-blend-mode: multiply;
}

.counter-tabs {
  position: fixed;
  left: 24px;
  right: 24px;
  bottom: 22px;
  display: flex;
  gap: 10px;
  z-index: 30;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.tab-token {
  pointer-events: auto;
  border: 3px solid var(--ink);
  background: var(--cream);
  padding: 9px 13px;
  box-shadow: 4px 5px 0 var(--espresso);
  transform: skew(-9deg) rotate(-1deg);
  cursor: pointer;
  font-family: "Archivo Black", Impact, sans-serif;
  text-transform: uppercase;
  letter-spacing: -.04em;
  font-size: clamp(10px, 1.1vw, 14px);
  transition: transform .18s steps(2), background .18s, color .18s;
}

.tab-token span {
  font-family: "Space Mono", monospace;
  margin-right: 7px;
  color: var(--rust);
}

.tab-token.active {
  background: var(--blue);
  color: var(--cream);
  transform: skew(-9deg) rotate(2deg) translateY(-7px);
}

.tab-token.active span { color: var(--cream); }

.counter-scroll {
  height: 100vh;
  width: 100vw;
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

.counter-scroll::-webkit-scrollbar { height: 0; }

.station {
  position: relative;
  flex: 0 0 100vw;
  height: 100vh;
  scroll-snap-align: start;
  overflow: hidden;
  padding: clamp(34px, 5vw, 78px);
  background:
    linear-gradient(180deg, rgba(255,244,216,.74), transparent 42%),
    linear-gradient(92deg, rgba(74,44,27,.05), transparent 52%);
}

.station::after {
  content: attr(data-station);
  position: absolute;
  top: 28px;
  right: -22px;
  padding: 8px 40px;
  background: var(--rust);
  color: var(--cream);
  border: 3px solid var(--ink);
  font-family: "Archivo Black", Impact, sans-serif;
  transform: rotate(8deg);
  text-transform: uppercase;
  letter-spacing: -.05em;
}

.counter-rail {
  position: absolute;
  left: -4vw;
  right: -4vw;
  top: 64%;
  height: 18px;
  background: var(--espresso);
  border-top: 4px solid var(--ink);
  border-bottom: 4px solid var(--ink);
  transform: rotate(-1.2deg);
  z-index: 0;
}

.counter-rail i {
  display: inline-block;
  height: 34px;
  width: 4px;
  margin-left: 12vw;
  background: var(--cream);
  transform: translateY(-10px);
}

h1, h2, h3 {
  font-family: "Fraunces", Georgia, serif;
  line-height: .86;
  margin: 0;
  color: var(--espresso);
}

h1 { font-size: clamp(74px, 14vw, 190px); letter-spacing: -.08em; }
h2 { font-size: clamp(45px, 7vw, 118px); letter-spacing: -.06em; }
h3 { font-size: clamp(34px, 4vw, 70px); }
em { color: var(--rust); }

.hero-counter {
  position: absolute;
  left: 6vw;
  bottom: 18vh;
  width: 74vw;
  padding: 34px 44px 42px;
  background: linear-gradient(90deg, var(--honey), var(--cream));
  border: 5px solid var(--ink);
  box-shadow: 12px 14px 0 var(--espresso);
  transform: rotate(-1.4deg) skew(-2deg);
}

.hero-note {
  width: min(620px, 70vw);
  font-size: clamp(18px, 2vw, 30px);
  margin: 16px 0 0;
  color: var(--espresso);
}

.stamp, .station-label, .ticket {
  font-family: "Archivo Black", Impact, sans-serif;
  text-transform: uppercase;
  letter-spacing: -.05em;
}

.rotated { transform: rotate(-5deg); display: inline-block; background: var(--blue); color: var(--cream); padding: 6px 12px; }

.crooked-mark {
  position: absolute;
  right: 10vw;
  top: 15vh;
  width: 210px;
  height: 210px;
  filter: drop-shadow(6px 7px 0 rgba(74,44,27,.45));
}

.arrow-piece {
  position: absolute;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: 78px;
  color: var(--green);
  -webkit-text-stroke: 2px var(--ink);
  animation: tremble 1.4s steps(2) infinite;
}

.piece-a { left: 48px; top: 5px; transform: rotate(34deg); }
.piece-b { left: 112px; top: 86px; transform: rotate(154deg); color: var(--blue); animation-delay: .16s; }
.piece-c { left: 16px; top: 108px; transform: rotate(270deg); color: var(--rust); animation-delay: .31s; }

.scrap { position: absolute; border: 3px solid var(--ink); box-shadow: 4px 5px 0 rgba(23,19,15,.35); animation: settle 2.6s steps(3) infinite; }
.scrap-one { left: 13vw; top: 18vh; width: 54px; height: 82px; background: var(--blue); clip-path: polygon(0 12%,100% 0,88% 100%,12% 83%); }
.scrap-two { right: 31vw; top: 53vh; width: 82px; height: 45px; background: var(--rust); clip-path: polygon(14% 0,100% 18%,78% 100%,0 78%); animation-delay: .2s; }
.scrap-three { right: 8vw; bottom: 23vh; width: 66px; height: 66px; background: var(--green); clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); animation-delay: .4s; }

.flip-card { perspective: 900px; }
.flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.2,1.3,.45,.95);
}
.flip-card.flipped .flip-inner, .flip-card:hover .flip-inner { transform: rotateY(180deg) rotate(-1deg); }
.flip-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  display: grid;
  place-content: center;
  padding: 24px;
  border: 4px solid var(--ink);
  box-shadow: 8px 9px 0 var(--espresso);
  background: var(--oat);
  color: var(--ink);
  font-family: "Archivo Black", Impact, sans-serif;
  text-align: center;
  text-transform: uppercase;
  font-size: clamp(22px, 3vw, 48px);
  line-height: .95;
}
.flip-face small { display: block; margin-top: 16px; font-family: "IBM Plex Sans", sans-serif; font-size: 16px; text-transform: none; line-height: 1.2; }
.flip-face.back { transform: rotateY(180deg); background: var(--green); color: var(--cream); }

.sign-card { position: absolute; right: 16vw; bottom: 14vh; width: 330px; height: 190px; transform: rotate(4deg); }

.station-label {
  position: absolute;
  left: 7vw;
  top: 10vh;
  color: var(--cream);
  background: var(--blue);
  border: 4px solid var(--ink);
  padding: 9px 18px;
  transform: rotate(-4deg);
  font-size: clamp(26px, 4vw, 62px);
  box-shadow: 7px 8px 0 var(--espresso);
}
.station-label.rust { background: var(--rust); }
.station-label.green { background: var(--green); }

.slanted-board {
  position: absolute;
  left: 9vw;
  top: 28vh;
  width: min(620px, 52vw);
  transform: rotate(-3deg) skew(-3deg);
  background: var(--cream);
  border: 5px solid var(--ink);
  padding: 34px;
  box-shadow: 10px 12px 0 var(--espresso);
}
.slanted-board p, .margin-note, .chalk-note { font-size: clamp(18px, 2vw, 27px); color: var(--espresso); }

.sorting-tray {
  position: absolute;
  right: 6vw;
  top: 25vh;
  width: min(530px, 43vw);
  height: 380px;
  border: 5px solid var(--ink);
  background: linear-gradient(135deg, rgba(246,233,200,.72), rgba(74,44,27,.12));
  transform: rotate(2deg);
  box-shadow: 11px 13px 0 var(--espresso);
}
.chip {
  position: absolute;
  min-width: 96px;
  padding: 16px;
  border: 4px solid var(--ink);
  font-family: "Space Mono", monospace;
  font-weight: 700;
  text-align: center;
  transition: transform .55s steps(4);
}
.paper { background: var(--oat); left: 8%; top: 14%; transform: rotate(-12deg); }
.glass { background: var(--green); color: var(--cream); right: 10%; top: 16%; clip-path: polygon(20% 0,100% 10%,80% 100%,0 86%); }
.tin { background: var(--rust); color: var(--cream); left: 22%; bottom: 14%; transform: rotate(9deg); }
.ink { background: var(--ink); color: var(--cream); right: 26%; bottom: 22%; }
.bottle { background: var(--blue); color: var(--cream); left: 42%; top: 44%; transform: rotate(22deg); }
.sorting-tray.sorted .paper { transform: translate(-20px, 120px) rotate(-3deg); }
.sorting-tray.sorted .glass { transform: translate(-190px, -20px) rotate(3deg); }
.sorting-tray.sorted .tin { transform: translate(130px, -135px) rotate(-6deg); }
.sorting-tray.sorted .ink { transform: translate(68px, 42px) rotate(5deg); }
.sorting-tray.sorted .bottle { transform: translate(-15px, -90px) rotate(-14deg); }

.receipt-roll {
  position: absolute;
  left: 16vw;
  bottom: 12vh;
  width: 520px;
  max-width: 50vw;
  background: var(--cream);
  border: 3px dashed var(--espresso);
  padding: 16px 24px;
  font-family: "Space Mono", monospace;
  transform: rotate(1.5deg);
}
.receipt-roll span { display: inline-block; margin-right: 18px; }

.cup-wrap { position: absolute; left: 10vw; top: 19vh; width: 360px; height: 510px; }
.cup-body { position: absolute; left: 68px; top: 86px; width: 220px; height: 330px; background: var(--cream); border: 5px solid var(--ink); clip-path: polygon(8% 0,92% 0,78% 100%,22% 100%); box-shadow: 11px 12px 0 var(--espresso); }
.sleeve { position: absolute; left: 44px; top: 226px; width: 272px; height: 94px; border: 4px solid var(--ink); background: var(--rust); color: var(--cream); font-family: "Archivo Black", Impact, sans-serif; transform: rotate(-8deg); cursor: pointer; box-shadow: 6px 7px 0 var(--espresso); }
.cup-wrap.rotated .sleeve { transform: rotate(8deg) translateX(18px); background: var(--green); }
.steam { position: absolute; width: 34px; height: 96px; border-left: 8px solid var(--blue); border-top: 8px solid var(--blue); transform: skew(-22deg); animation: steam 1.8s steps(3) infinite; }
.zig-a { left: 118px; top: 0; }
.zig-b { left: 204px; top: 20px; animation-delay: .4s; }
.tall-card { position: absolute; right: 10vw; top: 20vh; width: 390px; height: 430px; transform: rotate(3deg); }
.margin-note { position: absolute; left: 43vw; bottom: 18vh; width: 300px; font-family: "Space Mono", monospace; transform: rotate(-7deg); }

.parts-station h2 { position: absolute; left: 9vw; top: 25vh; width: 520px; transform: rotate(-2deg); }
.shelves { position: absolute; right: 8vw; top: 20vh; width: 52vw; display: grid; grid-template-columns: repeat(2, minmax(190px, 1fr)); gap: 28px; transform: rotate(2deg); }
.part-card { height: 180px; background: transparent; border: 0; cursor: pointer; }
.part-card .flip-inner { display: block; }
.part-card .flip-face { font-size: clamp(20px, 2.4vw, 40px); }
.part-card:nth-child(2) .back { background: var(--blue); }
.part-card:nth-child(3) .back { background: var(--rust); }
.part-card:nth-child(4) .back { background: var(--espresso); }
.barcode-note { position: absolute; left: 12vw; bottom: 18vh; font-family: "Space Mono", monospace; font-size: 24px; background: var(--cream); padding: 16px; border: 3px solid var(--ink); }

.menu-board { position: absolute; left: 8vw; top: 13vh; width: 68vw; min-height: 56vh; background: var(--espresso); color: var(--cream); border: 6px solid var(--ink); box-shadow: 14px 15px 0 rgba(23,19,15,.55); padding: 44px 54px; transform: rotate(-1deg); }
.menu-board h2 { color: var(--cream); width: 80%; }
.menu-board h2 span { color: var(--rust); text-decoration: line-through; }
.menu-board ul { margin: 30px 0 0; padding: 0; list-style: none; columns: 2; font-size: clamp(18px, 2vw, 29px); }
.menu-board li { margin: 0 0 16px; padding-left: 32px; position: relative; }
.menu-board li::before { content: "◆"; position: absolute; left: 0; color: var(--honey); }
.ticket { display: inline-block; background: var(--honey); color: var(--ink); border: 3px solid var(--ink); padding: 6px 14px; transform: rotate(3deg); margin-bottom: 18px; }
.deconstructed-arrows { position: absolute; right: 6vw; bottom: 18vh; width: 260px; height: 220px; }
.deconstructed-arrows b { position: absolute; font-family: "Archivo Black", Impact, sans-serif; font-size: 86px; -webkit-text-stroke: 2px var(--ink); color: var(--green); animation: reassemble 2.2s steps(4) infinite; }
.deconstructed-arrows b:nth-child(1) { left: 20px; top: 0; transform: rotate(32deg); }
.deconstructed-arrows b:nth-child(2) { left: 120px; top: 78px; transform: rotate(155deg); color: var(--blue); animation-delay: .2s; }
.deconstructed-arrows b:nth-child(3) { left: 16px; top: 112px; transform: rotate(270deg); color: var(--rust); animation-delay: .4s; }
.chalk-note { position: absolute; right: 13vw; top: 18vh; width: 230px; background: var(--cream); border: 3px solid var(--ink); padding: 18px; transform: rotate(8deg); }

.last-card { position: absolute; left: 12vw; top: 17vh; width: min(680px, 62vw); height: 480px; transform: rotate(-3deg); }
.last-card .flip-face { font-family: "IBM Plex Sans", sans-serif; text-transform: none; }
.last-card .front { background: var(--cream); }
.last-card .back { background: var(--blue); }
.last-card h2, .last-card h3 { color: inherit; }
.last-card p { font-size: clamp(21px, 2.3vw, 33px); line-height: 1.12; margin: 20px; }
.coffee-ring { position: absolute; right: 16vw; top: 22vh; width: 280px; height: 280px; border: 23px solid rgba(74,44,27,.28); border-radius: 50%; transform: rotate(20deg) scaleX(1.15); }
.coffee-ring::after { content: ""; position: absolute; right: 20px; bottom: -42px; width: 62px; height: 24px; background: rgba(74,44,27,.22); border-radius: 50%; }
.closing-tag { position: absolute; right: 8vw; bottom: 23vh; max-width: 440px; background: var(--rust); color: var(--cream); border: 4px solid var(--ink); padding: 18px 26px; font-family: "Archivo Black", Impact, sans-serif; text-transform: uppercase; font-size: clamp(22px, 3vw, 48px); transform: rotate(5deg); box-shadow: 8px 9px 0 var(--espresso); }

@keyframes tremble { 0%,100% { margin: 0; } 35% { margin-left: 4px; margin-top: -2px; } 70% { margin-left: -3px; margin-top: 3px; } }
@keyframes settle { 0%,100% { transform: translate(0,0) rotate(0); } 50% { transform: translate(8px,-5px) rotate(4deg); } }
@keyframes steam { 0%,100% { opacity: .25; transform: translateY(12px) skew(-22deg); } 50% { opacity: .85; transform: translateY(-8px) skew(-22deg); } }
@keyframes reassemble { 0%,100% { margin: 0; } 50% { margin-left: -12px; margin-top: 10px; } }

@media (max-width: 760px) {
  .counter-tabs { left: 8px; right: 8px; overflow-x: auto; justify-content: flex-start; bottom: 10px; }
  .tab-token { flex: 0 0 auto; }
  .station { padding: 28px; }
  .hero-counter { width: 86vw; left: 5vw; padding: 24px; }
  .crooked-mark, .sorting-tray, .tall-card, .shelves, .coffee-ring { transform: scale(.7); transform-origin: top right; }
  .slanted-board, .menu-board, .last-card { width: 86vw; max-width: 86vw; }
  .menu-board ul { columns: 1; }
  .station::after { display: none; }
}