:root {
  --paper: oklch(95.2% 0.014 98);
  --grid: oklch(88.5% 0.016 98);
  --ink: oklch(21% 0.012 70);
  --ink-soft: oklch(42% 0.012 70);
  --card: oklch(99.2% 0.005 90);
  --mustard: oklch(81% 0.15 86);
  --orange: oklch(66% 0.19 40);
  --olive: oklch(57% 0.09 125);
  --violet: oklch(56% 0.12 300);
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --mono: "Space Mono", ui-monospace, monospace;
  --bar-h: 92px;
  --foot-h: 40px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  color: var(--ink);
  font: 400 14px/1.35 var(--mono);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: -1px -1px;
}
a { color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }

/* ---------- bar: big pictograms, small words ---------- */
.bar {
  height: var(--bar-h);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 clamp(16px, 2.6vw, 40px);
}
.mark {
  font: 800 30px/1 var(--display);
  letter-spacing: -0.04em;
  text-decoration: none;
}
.mark span { color: var(--orange); }
.picto { display: flex; gap: clamp(14px, 2.4vw, 40px); }
.picto a {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font: 400 15px/1.05 var(--display);
}
.picto svg { width: 40px; height: 40px; fill: var(--ink); }
.picto span { display: flex; flex-direction: column; }
.picto small { font: 400 11px/1.4 var(--mono); color: var(--ink-soft); }
.picto a:not(.on) svg { fill: none; stroke: var(--ink); stroke-width: 3; }
.picto .bag svg path:first-child { fill: var(--ink); stroke: none; }
.bump small { animation: bump 0.5s var(--ease-out); }
@keyframes bump { 40% { color: var(--orange); transform: translateY(-2px); } }
.picto small { display: inline-block; }

/* ---------- desk ---------- */
.desk {
  height: calc(100vh - var(--bar-h) - var(--foot-h));
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  padding: 0 clamp(16px, 2.6vw, 40px);
}

.wall {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
}
#stickers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: auto auto;
  align-content: center;
  gap: 4.5vh 22px;
  padding: 0 16px 0 0;
  align-items: center;
}
.sticker { position: relative; display: grid; place-items: center; }
.sticker button {
  all: unset;
  cursor: pointer;
  width: 100%;
  display: grid;
  justify-items: center;
  gap: 8px;
  transform: translate(var(--dx), var(--dy)) rotate(var(--rot));
}
.sticker .art {
  width: var(--w, 86%);
  max-height: 26vh;
  object-fit: contain;
  filter: drop-shadow(0 2px 1px rgb(30 25 10 / 0.18)) drop-shadow(0 8px 12px rgb(30 25 10 / 0.1));
  transition: transform 0.35s var(--ease-out), filter 0.35s var(--ease-out);
}
.sticker button:hover .art,
.sticker button:focus-visible .art {
  transform: translateY(-5px) rotate(-1.5deg);
  filter: drop-shadow(0 4px 2px rgb(30 25 10 / 0.16)) drop-shadow(0 16px 18px rgb(30 25 10 / 0.14));
}
.sticker button:focus-visible { outline: 2px dashed var(--ink); outline-offset: 6px; }

.dot {
  position: absolute;
  top: -6px;
  left: -2px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 700 12px/1 var(--mono);
  color: var(--ink);
  background: var(--c);
  transform: rotate(calc(var(--rot) * -1));
}
.tag {
  display: flex;
  gap: 8px;
  align-items: baseline;
  background: var(--card);
  padding: 5px 9px 6px;
  box-shadow: 0 1px 0 rgb(30 25 10 / 0.12);
}
.tag b { font: 600 15px/1 var(--display); letter-spacing: -0.01em; white-space: nowrap; }
.tag i { font: 400 12px/1 var(--mono); font-style: normal; white-space: nowrap; }

/* the empty backing paper a sticker leaves behind */
.sticker.peeled .art,
.sticker.peeled button:hover .art {
  filter: brightness(0) invert(1) drop-shadow(0 0 1px rgb(30 25 10 / 0.25));
  opacity: 0.75;
  transform: none;
}
.sticker.peeled .tag { opacity: 0.5; }
.sticker.peeled .tag i::after { content: " · in"; color: var(--orange); }
.sticker.busy { pointer-events: none; }

.slogan {
  margin: 0 0 1.2vh;
  font: 800 clamp(64px, 7.6vw, 132px)/0.84 var(--display);
  letter-spacing: -0.055em;
  display: flex;
  gap: 0.22em;
  align-items: baseline;
}
.slogan em { font-style: normal; color: var(--orange); }

/* ---------- the car, as a postage stamp ---------- */
.stamp-wrap { position: relative; display: grid; place-items: center; }
.stamp {
  --r: 7px;
  --rot: -3deg;
  position: relative;
  padding: calc(2.4 * var(--r)) calc(2.4 * var(--r)) 44px;
  background:
    radial-gradient(var(--r), #0000 97%, var(--card)) round calc(-1.5 * var(--r)) calc(-1.5 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)),
    linear-gradient(var(--card) 0 0) no-repeat 50% / calc(100% - 3 * var(--r)) calc(100% - 3 * var(--r));
  filter: drop-shadow(0 2px 1px rgb(30 25 10 / 0.12)) drop-shadow(0 18px 24px rgb(30 25 10 / 0.12));
  transform: rotate(var(--rot));
  animation: stamp-in 0.9s var(--ease-out) both;
}
@keyframes stamp-in { from { opacity: 0; transform: rotate(-9deg) translateY(30px) scale(0.97); } }
.stamp-face {
  position: relative;
  height: min(calc(100vh - var(--bar-h) - var(--foot-h) - 110px), 780px);
  aspect-ratio: 2 / 3;
  overflow: hidden;
}
.car-img, .layers img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.layers img { opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
.layers img.on { opacity: 1; }
.layers .landed { height: auto; inset: auto; object-fit: initial; opacity: 1; pointer-events: auto; cursor: pointer; }
.stamp-meta {
  position: absolute;
  left: calc(2.4 * var(--r));
  right: calc(2.4 * var(--r));
  bottom: 12px;
  margin: 0;
  display: flex;
  justify-content: space-between;
  font: 400 11px/1 var(--mono);
  color: var(--ink-soft);
}
.stamp-meta span:first-child { font-weight: 700; color: var(--ink); }

.postmark {
  position: absolute;
  right: 2%;
  top: 6%;
  width: 128px;
  transform: rotate(14deg);
  pointer-events: none;
  mix-blend-mode: multiply;
}
.postmark svg { width: 100%; fill: none; stroke: var(--orange); stroke-width: 2.5; }
.postmark text { fill: var(--orange); stroke: none; font: 700 10.5px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.postmark .pm-big { font: 800 22px/1 var(--display); letter-spacing: -0.02em; }

.hint {
  position: absolute;
  bottom: 0;
  margin: 0;
  font: 400 12px/1 var(--mono);
  color: var(--ink-soft);
  transition: opacity 0.4s;
}
.hint.gone { opacity: 0; }

.foot {
  height: var(--foot-h);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 clamp(16px, 2.6vw, 40px);
  font: 400 11px/1 var(--mono);
  color: var(--ink-soft);
}

/* ---------- entrance: stickers slapped on one by one ---------- */
.sticker { animation: slap 0.55s var(--ease-out) both; animation-delay: calc(0.25s + var(--i) * 80ms); }
@keyframes slap { from { opacity: 0; transform: scale(1.18) translateY(-10px); } }

@media (max-width: 900px) {
  body { overflow: auto; }
  .bar { height: auto; flex-direction: column; align-items: flex-start; gap: 14px; padding-top: 16px; padding-bottom: 8px; }
  .picto { gap: 16px; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .picto svg { width: 28px; height: 28px; }
  .picto small { display: none; }
  .desk { height: auto; grid-template-columns: 1fr; }
  .stamp-wrap { grid-row: 1; padding: 16px 0 28px; }
  .stamp-face { height: min(52vh, calc((100vw - 96px) * 1.5)); }
  body { overflow-x: hidden; }
  .picto a:not(.bag) span { display: none; }
  .postmark { width: 74px; right: 4px; top: 4px; }
  .stamp-meta span:last-child { display: none; }
  #stickers { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; gap: 22px 12px; padding: 0; }
  .picto .bag small { display: inline-block; }
  .sticker button { transform: rotate(calc(var(--rot) * 0.5)); }
  .sticker .art { width: 84%; max-height: 150px; }
  .tag { flex-wrap: wrap; justify-content: center; max-width: 100%; }
  .tag b { font-size: 13px; }
  .slogan { font-size: 17vw; flex-direction: column; gap: 0; margin: 24px 0; }
  .hint { position: static; text-align: center; margin-top: 12px; }
  .foot { height: auto; flex-direction: column; gap: 8px; padding-bottom: 20px; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}