/* Curio Bazaar landing. Theme + page composition on top of scrollcraft.css.
   Palette from mobile/src/app/ui/theme.ts (COLOR, RARITY_COLOR, WHEEL_COLOR)
   and mobile/src/app/startup.ts (#123c35). */

@font-face {
  font-family: "M PLUS Rounded 1c";
  src: url("fonts/mplus-rounded-1c-medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "M PLUS Rounded 1c";
  src: url("fonts/mplus-rounded-1c-extrabold.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}

:root {
  --sc-canvas: #123c35;
  --sc-surface: #0d2e29;
  --sc-ink: #fff3d6;
  --sc-ink-soft: #dccba6;
  --sc-accent: #e8b94a;
  --sc-accent-ink: #3b230c;
  --sc-font-display: "M PLUS Rounded 1c", ui-rounded, system-ui, sans-serif;
  --sc-font-text: "M PLUS Rounded 1c", ui-rounded, system-ui, sans-serif;
  --sc-font-mono: "M PLUS Rounded 1c", ui-rounded, system-ui, sans-serif;
  --sc-shadow-color: 168 60% 4%;
  --sc-track-tight: -0.022em;
  --sc-track-snug: -0.012em;

  --cb-wood: #5a3d22;
  --cb-wood-deep: #3a2614;
  --cb-cream: #fff3d6;
  --cb-paper: #f6e7c4;
  --cb-brass: #e8b94a;
  --cb-brass-deep: #8a5a0c;
  --cb-legend: #b8790f;
  --cb-seal: #a8402e;
  --cb-stamp: #4f7356;
  --cb-felt: #0f3a26;
  --cb-r: 12px;
  --cb-bar: 60px;
  --cb-index: 0px;
}

body { font-weight: 500; }
h1, h2, h3 { font-weight: 800; }

.skip {
  position: fixed; left: 12px; top: 12px; z-index: 100;
  padding: 10px 14px; border-radius: var(--cb-r);
  background: var(--cb-cream); color: var(--cb-wood-deep); font-weight: 800;
  transform: translateY(-160%);
}
.skip:focus-visible { transform: none; }

/* ------------------------------------------------------------- chrome -- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: calc(var(--sc-z-chrome) + 1); /* language menu above the index rail */
  height: var(--cb-bar);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--sc-gutter);
  pointer-events: none;
}
.bar > * { pointer-events: auto; }
.bar__mark, .bar__langs {
  background: color-mix(in oklab, var(--sc-surface) 88%, transparent);
  box-shadow: var(--sc-e1), var(--sc-edge);
  border-radius: var(--cb-r);
}
.bar__mark {
  padding: 7px 14px; font-weight: 800; font-size: var(--sc-t-sm);
  color: var(--cb-cream); text-decoration: none; letter-spacing: 0.01em;
}
/* Language switcher: 9 languages do not fit as pills on a phone, so a native
   <details> disclosure holds them. Works without script; curio.js closes it
   on outside click and Escape. */
.bar__langs { padding: 3px; }
.langs { position: relative; }
.langs__btn {
  min-height: 34px; display: flex; align-items: center; gap: 6px;
  padding: 0 10px; border-radius: 9px; cursor: pointer; list-style: none;
  font-size: var(--sc-t-xs); font-weight: 800; color: var(--cb-cream);
  transition: background-color 160ms var(--sc-ease-out);
}
.langs__btn::-webkit-details-marker { display: none; }
.langs__btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.langs__btn::after {
  content: ""; width: 6px; height: 6px; margin: -3px 2px 0;
  border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg);
  transition: transform 160ms var(--sc-ease-out);
}
.langs[open] .langs__btn { background: color-mix(in oklab, var(--cb-cream) 10%, transparent); }
.langs[open] .langs__btn::after { transform: translateY(3px) rotate(-135deg); }
.langs__btn:focus-visible { outline: 2px solid var(--cb-brass); outline-offset: 2px; }
.langs__menu {
  position: absolute; right: -3px; top: calc(100% + 9px);
  min-width: 13.5rem; max-height: calc(100vh - var(--cb-bar) - 16px); overflow-y: auto;
  margin: 0; padding: 4px; list-style: none;
  background: var(--sc-surface); border-radius: var(--cb-r);
  box-shadow: var(--sc-e1), var(--sc-edge);
}
.langs__menu a {
  min-height: 40px; display: flex; align-items: center;
  padding: 0 12px; border-radius: 9px; font-size: var(--sc-t-sm); font-weight: 500;
  color: var(--sc-ink-soft); text-decoration: none;
  transition: background-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out);
}
.langs__menu a[aria-current="page"] { background: var(--cb-brass); color: var(--sc-accent-ink); font-weight: 800; }
@media (hover: hover) and (pointer: fine) {
  .langs__btn:hover, .langs__menu a:not([aria-current]):hover { color: var(--cb-cream); background: color-mix(in oklab, var(--cb-cream) 10%, transparent); }
}

/* Ledger thumb-index: paper tabs cut into the page edge. They get stamped as
   the visitor passes each scene and they jump. */
.index { position: fixed; z-index: var(--sc-z-chrome); }
.index ol { list-style: none; margin: 0; padding: 0; display: flex; }
.index a {
  position: relative; display: flex; align-items: center; gap: 8px;
  background: var(--cb-cream); color: var(--cb-wood-deep);
  font-size: var(--sc-t-xs); font-weight: 800; text-decoration: none; white-space: nowrap;
  box-shadow: var(--sc-e1);
  transition: transform 220ms var(--sc-ease-out), background-color 220ms var(--sc-ease-out);
}
.index a::before {
  content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid color-mix(in oklab, var(--cb-wood-deep) 45%, transparent);
  transition: background-color 220ms var(--sc-ease-out), border-color 220ms var(--sc-ease-out);
}
.index a.is-passed::before { background: var(--cb-stamp); border-color: var(--cb-stamp); }
.index a[aria-current="true"] { background: var(--cb-brass); }
.index a[aria-current="true"]::before { background: var(--cb-seal); border-color: var(--cb-seal); }
.index a:active { transform: translateY(1px); }

@media (min-width: 861px) {
  .index { right: 0; top: 50%; transform: translateY(-50%); }
  .index ol { flex-direction: column; gap: 6px; align-items: flex-end; }
  .index a { padding: 9px 18px 9px 12px; border-radius: 10px 0 0 10px; transform: translateX(10px); }
  .index a[aria-current="true"] { transform: translateX(0); }
  @media (hover: hover) and (pointer: fine) { .index a:hover { transform: translateX(2px); } }
}
/* Phones: the ledger index becomes progress dots on the right edge. Each link
   keeps a 44 x 44 tap target; only the current scene shows its name. The
   content columns keep --cb-rail clear so the dots never sit on copy. */
@media (max-width: 860px) {
  :root { --cb-bar: 54px; --cb-index: env(safe-area-inset-bottom); --cb-rail: 30px; }
  .index { right: 9px; top: 50%; transform: translateY(-50%); }
  .index ol {
    flex-direction: column; align-items: center; width: 26px; padding: 2px 0; border-radius: 13px;
    background: rgb(13 46 41 / 0.72); box-shadow: 0 2px 8px rgb(4 18 15 / 0.35);
  }
  .index li { position: static; }
  .index a {
    position: static; width: 44px; height: 44px; justify-content: center; padding: 0; gap: 0;
    background: transparent; box-shadow: none; border-radius: 12px; font-size: 0.7rem;
  }
  .index a[aria-current="true"] { background: transparent; }
  .index a::before {
    width: 8px; height: 8px; border: 0; border-radius: 4px;
    background: rgb(255 243 214 / 0.55);
    transition: height 220ms var(--sc-ease-out), background-color 220ms var(--sc-ease-out);
  }
  .index a.is-passed::before { background: #6f9a76; }
  .index a[aria-current="true"]::before { height: 22px; background: var(--cb-brass); }
  /* The current scene's name lives inside the pill, under the dots, set
     vertically, so it never reaches into the content. All names share one
     slot and crossfade as the scene changes. */
  .index ol { position: relative; padding-bottom: 78px; }
  .index a > span {
    position: absolute; left: 50%; bottom: 8px; pointer-events: none;
    writing-mode: vertical-rl; transform: translateX(-50%) rotate(180deg);
    color: var(--cb-cream); font-weight: 800; letter-spacing: 0.02em; white-space: nowrap;
    opacity: 0; transition: opacity 260ms var(--sc-ease-out);
  }
  .index a[aria-current="true"] > span { opacity: 1; }
  .index a:active { transform: none; }
  .index a:focus-visible { outline-offset: -4px; }
}
@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .index a::before, .index a > span { transition: none; }
}

/* ------------------------------------------------------- shared scene -- */
.scene { position: relative; }
.scene__h2 {
  font-size: var(--sc-t-2xl); line-height: 1.08; letter-spacing: var(--sc-track-snug);
  text-wrap: balance; margin: 0;
}
.scene__body { color: var(--sc-ink-soft); max-width: 40ch; text-wrap: pretty; margin: 0; font-size: var(--sc-t-base); }

/* Store buttons: links filled in landing.py (STORE_IOS_URL / STORE_ANDROID_URL). */
.stores__note { margin: 0 0 10px; color: var(--cb-brass); font-weight: 800; font-size: var(--sc-t-sm); }
.stores__row { display: flex; flex-wrap: wrap; gap: 10px; }
.store {
  display: inline-flex; align-items: center; gap: 10px;
  min-width: 168px; padding: 9px 18px 9px 14px;
  border-radius: var(--cb-r);
  background: #1b120b; color: var(--cb-cream); text-decoration: none;
  border: 1px solid color-mix(in oklab, var(--cb-brass) 70%, transparent);
  box-shadow: var(--sc-e2), var(--sc-edge);
  transition: transform .15s ease, border-color .15s ease;
}
.store:hover { transform: translateY(-1px); border-color: var(--cb-brass); }
.store:focus-visible { outline: 2px solid var(--cb-brass); outline-offset: 3px; }
.store svg { width: 26px; height: 26px; flex: none; }
.store span { display: flex; flex-direction: column; line-height: 1.1; font-weight: 800; font-size: 1.12rem; }
.store small { font-size: 0.7rem; font-weight: 700; opacity: .8; }

/* ----------------------------------------------------------- 1 shop --- */
.scene--shop { background: var(--sc-canvas); overflow: clip; }
.shop {
  min-height: 100vh; min-height: 100svh;
  max-width: var(--sc-maxw); margin-inline: auto;
  padding: calc(var(--cb-bar) + var(--sc-6)) calc(var(--sc-gutter) + 64px) var(--sc-8) var(--sc-gutter);
  display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: var(--sc-8);
}
.shop__copy > * + * { margin-top: var(--sc-5); }
.shop__copy .stores { margin-top: var(--sc-7); }
.shop__h1 {
  font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.9rem); line-height: 1.02;
  letter-spacing: var(--sc-track-tight); margin: 0; max-width: 11ch; text-wrap: balance;
}
.shop__body { font-size: var(--sc-t-lg); line-height: 1.5; color: var(--sc-ink-soft); max-width: 30ch; margin-bottom: 0; text-wrap: pretty; }

.window {
  --w: min(38vw, 33rem, calc((100svh - var(--cb-bar) - 7rem) * 0.72));
  position: relative; margin: 0; justify-self: center;
  width: var(--w); aspect-ratio: 0.72;
}
.window__glass, .window__frame { position: absolute; inset: 0; border-radius: 999px 999px 22px 22px; }
.window__glass { overflow: hidden; background: #2a3b45; isolation: isolate; }
.window__scene { position: absolute; left: 0; top: -12.5%; width: 100%; aspect-ratio: 1080 / 2341; container-type: inline-size; }
.window__scene img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
/* The shop sign in frame-1 is blank wood; the name is real text set on it.
   Box = the gold inner border of the plank, measured on the 1290 px source:
   x 632-1002, centre y 701 of 2796; top/bottom edges fall ~7.3deg to the left,
   the sides stay vertical, so the text is skewed, not rotated. */
.window__sign {
  position: absolute; left: 49%; top: 22.07%; width: 28.7%; height: 6%;
  display: grid; place-items: center;
  transform: skewY(-7.3deg); transform-origin: 50% 50%;
}
.window__sign span {
  font-size: 3.4cqi; font-weight: 800; line-height: 1; letter-spacing: 0.03em; white-space: nowrap;
  color: #f3d58a;
  text-shadow: 0 -1px 0 rgb(40 22 8 / 0.9), 0 1px 0 rgb(255 230 170 / 0.35), 0 2px 5px rgb(40 22 8 / 0.55);
}
/* Breathing light over the lamps in the art. The image is untouched. */
.lamp {
  position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%);
  width: calc(var(--r) * 100%); aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgb(255 222 150 / 0.85), rgb(255 176 84 / 0.32) 42%, transparent 72%);
  animation: cb-breathe 5.6s ease-in-out var(--d) infinite;
}
.lamp--door { background: radial-gradient(closest-side, rgb(255 200 115 / 0.55), rgb(255 160 70 / 0.2) 50%, transparent 75%); animation-duration: 7.2s; }
@keyframes cb-breathe {
  0%, 100% { opacity: 0.2; transform: scale(0.92); }
  50% { opacity: 1; transform: scale(1.06); }
}
.window__rain { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.window__glow {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(60% 40% at 42% 38%, rgb(255 200 120 / 0.18), transparent 70%),
              linear-gradient(to bottom, rgb(18 60 53 / 0) 60%, rgb(18 60 53 / 0.35));
}
.window__frame {
  z-index: 4; pointer-events: none;
  border: 12px solid var(--cb-wood);
  box-shadow:
    inset 0 0 0 3px var(--cb-brass),
    inset 0 10px 26px rgb(20 10 4 / 0.45),
    0 2px 0 1px #2a190c,
    var(--sc-e3);
  background: linear-gradient(to bottom, transparent calc(46% - 5px), var(--cb-wood) calc(46% - 5px), var(--cb-wood) calc(46% + 5px), transparent calc(46% + 5px));
}
.window__frame::after {
  content: ""; position: absolute; left: -26px; right: -26px; bottom: -22px; height: 22px;
  border-radius: 8px; background: linear-gradient(#6b4a2b, #3a2614);
  box-shadow: var(--sc-e2);
}
.window__crate {
  position: absolute; z-index: 5; width: 47%; max-width: none; height: auto;
  left: -16%; bottom: -9.5%;
  filter: drop-shadow(0 18px 18px rgb(6 20 18 / 0.55));
}

@media (max-width: 860px) {
  .shop {
    grid-template-columns: 1fr; gap: var(--sc-6); align-content: start;
    padding: calc(var(--cb-bar) + var(--sc-4)) calc(var(--sc-gutter) + var(--cb-rail)) calc(var(--cb-index) + var(--sc-6)) var(--sc-gutter);
  }
  .window { order: -1; --w: min(78vw, calc(86vw - var(--cb-rail) - var(--sc-gutter)), 24rem, calc((100svh - var(--cb-bar) - var(--cb-index)) * 0.5 * 0.78)); aspect-ratio: 0.78; margin-left: 14vw; justify-self: start; }
  .window__scene { top: -16%; }
  .window__crate { width: 43%; left: -20%; bottom: -7.8%; }
  .shop__copy > * + * { margin-top: var(--sc-4); }
  .shop__copy .stores { margin-top: var(--sc-5); }
  .shop__h1 { font-size: clamp(2rem, 1.3rem + 3.4vw, 2.6rem); max-width: 14ch; }
  .shop__body { font-size: var(--sc-t-base); }
}

/* -------------------------------------------------------- 2 auction --- */
.scene--auction { background: #2a170b; }
.auction { background: #2a170b; }
.auction__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 34%; }
.auction__shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgb(30 15 6 / 0.92) 0%, rgb(30 15 6 / 0.66) 30%, rgb(30 15 6 / 0.05) 52%, rgb(30 15 6 / 0.05) 66%, rgb(30 15 6 / 0.55) 100%);
}
.auction__copy {
  position: absolute; z-index: 6;
  left: var(--sc-gutter); top: 50%; translate: 0 -50%;
  width: min(26rem, 26vw);
}
.auction__copy > * + * { margin-top: var(--sc-4); }
.auction__copy .scene__h2 { font-size: clamp(2rem, 1.4rem + 1.8vw, 3rem); }
.clue {
  margin: var(--sc-6) 0 0; padding: 12px 14px; border-radius: var(--cb-r);
  background: rgb(255 243 214 / 0.94); color: var(--cb-wood-deep); font-size: var(--sc-t-sm);
  box-shadow: var(--sc-e2); max-width: 34ch;
}
.clue__k { display: block; font-weight: 800; color: var(--cb-seal); font-size: var(--sc-t-xs); letter-spacing: 0.04em; margin-bottom: 2px; }

.auction__lot {
  position: absolute; z-index: 4;
  left: 50%; top: 54%; translate: -44% -50%;
  width: min(34vw, 30rem); aspect-ratio: 1;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
}
/* The crate's base sits on the pedestal's felt top: both images are cropped to
   their alpha bbox, so the overlap is a fixed share of the pedestal width
   (margin-top % resolves against the lot's width at every breakpoint). */
.auction__crate { position: relative; z-index: 2; width: 64%; height: auto; filter: drop-shadow(0 12px 10px rgb(20 8 2 / 0.55)); }
.auction__pedestal { position: relative; z-index: 1; width: 100%; height: auto; max-width: none; margin-top: -16%; }
.auction__timer { position: absolute; z-index: 3; width: 24%; right: -4%; top: -4%; aspect-ratio: 1; }
.auction__timer img { position: absolute; inset: 0; width: 100%; height: 100%; }
.auction__timer svg { position: absolute; inset: 14%; width: 72%; height: 72%; transform: rotate(-90deg); }
.auction__timer circle { fill: none; stroke: var(--cb-brass); stroke-width: 12; stroke-linecap: round; }
.caller {
  position: absolute; z-index: 5; left: 50%; top: 30%; translate: -50% 0; margin: 0;
  padding: 10px 20px; border-radius: var(--cb-r); white-space: nowrap;
  background: rgb(30 15 6 / 0.86); color: var(--cb-cream);
  font-size: var(--sc-t-xl); font-weight: 800; letter-spacing: var(--sc-track-snug);
  box-shadow: var(--sc-e2);
}
.caller--sold {
  background: var(--cb-cream); color: var(--cb-seal);
  border: 3px solid var(--cb-seal); rotate: -6deg; font-size: var(--sc-t-2xl);
}

.bids {
  position: absolute; z-index: 6; right: calc(var(--sc-gutter) + 64px); top: 50%; translate: 0 -50%;
  width: min(21rem, 24vw);
  padding: var(--sc-4); border-radius: var(--cb-r);
  background: rgb(255 243 214 / 0.96); color: var(--cb-wood-deep);
  box-shadow: var(--sc-e3);
}
.bids__title { margin: 0 0 var(--sc-3); font-weight: 800; font-size: var(--sc-t-sm); color: var(--cb-seal); display: flex; align-items: center; gap: 8px; }
.bids__title::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cb-seal); }
.bids__log { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bid {
  display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px;
  min-height: 42px; padding: 4px 10px 4px 4px; border-radius: 10px;
  background: rgb(58 38 20 / 0.06); font-size: var(--sc-t-sm);
}
.bid img, .bid__you { width: 34px; height: 34px; border-radius: 50%; }
.bid__you { display: grid; place-items: center; background: var(--cb-felt); }
.bid__you img { width: 24px; height: 24px; border-radius: 0; }
.bid__who { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bid__amt { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--cb-brass-deep); }
.bid--open { grid-template-columns: 1fr auto; padding-left: 12px; background: transparent; border: 1px dashed rgb(58 38 20 / 0.3); }
.bid--you { background: rgb(232 185 74 / 0.32); }

@media (max-width: 860px) {
  .auction__shade { background: linear-gradient(180deg, rgb(30 15 6 / 0.92) 0%, rgb(30 15 6 / 0.7) 26%, rgb(30 15 6 / 0.1) 46%, rgb(30 15 6 / 0.3) 100%); }
  .auction__copy { top: calc(var(--cb-bar) + 4px); translate: none; width: auto; right: calc(var(--sc-gutter) + var(--cb-rail)); }
  .auction__copy .scene__h2 { font-size: clamp(1.5rem, 1.1rem + 2vw, 2rem); }
  .auction__copy .scene__body { display: none; }
  .clue { margin-top: var(--sc-3); padding: 8px 12px; }
  .auction__lot { width: min(48vw, 28svh); left: 4%; top: 37%; translate: 0 0; }
  .caller { top: 24%; font-size: var(--sc-t-lg); padding: 8px 14px; }
  .caller--sold { font-size: var(--sc-t-xl); }
  .bids { right: calc(var(--sc-gutter) + var(--cb-rail)); left: auto; top: auto; bottom: calc(var(--cb-index) + 12px); translate: none; width: min(56vw, 15rem); padding: 10px; }
  .bids__title { margin-bottom: 6px; }
  .bid { grid-template-columns: 26px 1fr auto; min-height: 32px; gap: 6px; padding: 3px 8px 3px 3px; font-size: 0.78rem; }
  .bid img, .bid__you { width: 26px; height: 26px; }
  .bid__you img { width: 18px; height: 18px; }
  .bid--open { grid-template-columns: 1fr auto; }
}
@media (max-width: 380px) {
  .auction__lot { width: 46vw; }
  .bids { width: 60vw; }
}

/* ---------------------------------------------------------- 3 crate --- */
.scene--crate { background: #0b2622; overflow: clip; }
.crate {
  min-height: 130vh; min-height: 130svh;
  max-width: var(--sc-maxw); margin-inline: auto;
  padding: var(--sc-9) calc(var(--sc-gutter) + 64px) var(--sc-9) var(--sc-gutter);
  display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: var(--sc-8);
}
.crate__art { position: relative; width: min(34vw, 28rem); aspect-ratio: 640 / 706; justify-self: center; }
.crate__glow {
  position: absolute; inset: -18%; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 214 120 / 0.42), rgb(232 185 74 / 0.12) 55%, transparent 75%);
}
/* Closed and open crates share one body footprint. Body box measured on the
   WebPs over the straight side-flank rows (lid excluded):
     crate-closed.webp 640x516  body x 10..628 (618 px), baseline y 511
     crate-opened.webp 720x734  body x 11..654 (643 px), baseline y 729
   The art box is the closed image's width; the open image is scaled by
   618/643 (720 * 0.9611 = 692 px = 108.13%) and shifted so its body's left
   edge lands on the closed body's (10 - 11 * 0.9611 = -0.57 px = -0.09%).
   Both have ~4 px under the baseline, so both sit on bottom: 0. */
.crate__shut, .crate__open { position: absolute; bottom: 0; height: auto; max-width: none; }
.crate__shut { left: 0; width: 100%; opacity: clamp(0, calc((0.4 - var(--sc-p, 0)) * 10), 1); filter: drop-shadow(0 24px 30px rgb(0 0 0 / 0.45)); }
.crate__open { left: -0.09%; width: 108.13%; opacity: clamp(0, calc((var(--sc-p, 0) - 0.32) * 10), 1); }
.crate__open img { display: block; width: 100%; height: auto; filter: drop-shadow(0 24px 30px rgb(0 0 0 / 0.45)); }
/* The muddy lantern sits in the straw. Its wrapper is clipped along the crate's
   front and right wall tops (measured on crate-opened.webp, 720x734), so the
   walls hide its base. */
.crate__inner {
  position: absolute; inset: 0; pointer-events: none;
  clip-path: polygon(0 0, 100% 0, 100% 52.5%, 88.2% 52.5%, 66.7% 64.7%, 2.1% 53.1%, 0 53.1%);
}
.crate__inner canvas { position: absolute; left: 21%; top: 18%; width: 50%; height: auto; aspect-ratio: 1; filter: drop-shadow(0 6px 6px rgb(30 15 5 / 0.45)); }
.crate__copy > * + * { margin-top: var(--sc-5); }
.crate__quote {
  margin: var(--sc-7) 0 0; padding-left: var(--sc-4);
  border-left: 1px solid color-mix(in oklab, var(--cb-brass) 60%, transparent);
  color: var(--cb-cream); font-size: var(--sc-t-lg); line-height: 1.45; max-width: 30ch;
}
.crate__quote p { margin: 0; }
@media (max-width: 860px) {
  .crate { grid-template-columns: 1fr; padding: var(--sc-8) calc(var(--sc-gutter) + var(--cb-rail)) calc(var(--sc-8) + var(--cb-index)) var(--sc-gutter); gap: var(--sc-6); min-height: 120svh; }
  .crate__art { width: min(70vw, 20rem); }
}

/* ------------------------------------------------------ 4 workbench --- */
.scene--bench { background: var(--cb-felt); }
.bench {
  background: var(--cb-felt);
  display: grid; grid-template-columns: 1.15fr 0.85fr; align-items: center;
  gap: var(--sc-7);
  padding: calc(var(--cb-bar) + var(--sc-4)) calc(var(--sc-gutter) + 64px) var(--sc-6) var(--sc-gutter);
}
.bench__felt {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(70% 60% at 38% 52%, rgb(60 120 80 / 0.30), transparent 70%),
    radial-gradient(130% 100% at 50% 50%, transparent 55%, rgb(3 16 10 / 0.6)),
    url("img/bench-bg.webp") center / cover;
}
.bench__stage {
  position: relative; z-index: 1; justify-self: center;
  width: min(74vh, 74svh, 46vw); aspect-ratio: 1;
}
.bench__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  touch-action: none; cursor: grab;
  filter: drop-shadow(0 22px 22px rgb(2 14 8 / 0.5));
}
.bench__canvas:active { cursor: grabbing; }
.bench__tool, .bench__foam {
  position: absolute; left: 0; top: 0; width: 22%; height: auto; pointer-events: none; z-index: 2;
  opacity: 0; will-change: transform, opacity;
}
.bench__foam { width: 26%; z-index: 1; }
.bench__sparkles { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.bench__sparkles img { position: absolute; width: 16%; height: auto; opacity: 0; }
.bench__sparkles img:nth-child(1) { left: 30%; top: 14%; }
.bench__sparkles img:nth-child(2) { left: 60%; top: 34%; width: 11%; }
.bench__sparkles img:nth-child(3) { left: 22%; top: 56%; width: 12%; }
.bench__sparkles img:nth-child(4) { left: 52%; top: 70%; }
.bench.is-legend .bench__sparkles img { animation: cb-sparkle 1.4s var(--sc-ease-out) both; }
.bench.is-legend .bench__sparkles img:nth-child(2) { animation-delay: 120ms; }
.bench.is-legend .bench__sparkles img:nth-child(3) { animation-delay: 240ms; }
.bench.is-legend .bench__sparkles img:nth-child(4) { animation-delay: 360ms; }
@keyframes cb-sparkle {
  0% { opacity: 0; transform: scale(0.6) rotate(0deg); }
  35% { opacity: 1; transform: scale(1.1) rotate(25deg); }
  100% { opacity: 0.0; transform: scale(0.9) rotate(45deg); }
}
.stamp {
  position: absolute; z-index: 4; right: -4%; bottom: 8%; margin: 0;
  display: grid; justify-items: center; gap: 2px;
  padding: 12px 22px 14px; border-radius: var(--cb-r);
  background: rgb(59 35 12 / 0.92); color: #ffe9a2;
  border: 3px solid var(--cb-legend);
  box-shadow: inset 0 0 0 3px rgb(59 35 12 / 0.92), inset 0 0 0 5px var(--cb-brass), var(--sc-e3);
  opacity: 0; transform: rotate(-9deg) scale(1.6);
  will-change: transform, opacity;
}
.stamp__k { font-size: var(--sc-t-xs); color: var(--cb-brass); letter-spacing: 0.06em; }
.stamp__v { font-size: var(--sc-t-2xl); font-weight: 800; line-height: 1; letter-spacing: var(--sc-track-snug); }

.bench__side { position: relative; z-index: 1; display: grid; gap: var(--sc-6); align-content: center; }
.label__item { margin: var(--sc-3) 0 0; font-weight: 800; color: var(--cb-cream); font-size: var(--sc-t-lg); }
.label__item span { display: block; font-weight: 500; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.step {
  display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 12px;
  padding: 6px 14px 6px 6px; border-radius: var(--cb-r);
  background: rgb(4 24 14 / 0.55); border: 1px solid rgb(255 243 214 / 0.12);
  transition: background-color 200ms var(--sc-ease-out), border-color 200ms var(--sc-ease-out);
}
.step img { width: 48px; height: 48px; }
.step__tool { font-weight: 800; }
.step__layer { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.step.is-on { background: rgb(232 185 74 / 0.22); border-color: var(--cb-brass); }
.step.is-done .step__layer { text-decoration: line-through; text-decoration-color: var(--cb-brass); }
.bench__hint { margin: 0; color: var(--cb-cream); font-size: var(--sc-t-base); min-height: 3.2em; max-width: 34ch; }
.find {
  display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: start;
  padding: 14px; border-radius: var(--cb-r);
  background: rgb(255 243 214 / 0.95); color: var(--cb-wood-deep);
  box-shadow: var(--sc-e3);
  opacity: 0; transform: translateY(10px);
  transition: opacity 320ms var(--sc-ease-out), transform 320ms var(--sc-ease-out);
}
.find img { width: 72px; height: 72px; }
.find p { margin: 0; }
.find__badge { font-weight: 800; color: var(--cb-legend); font-size: var(--sc-t-base); }
.find__text { font-size: var(--sc-t-sm); margin-top: 4px !important; }
.find__text span { font-weight: 800; }
.find__lost { font-size: var(--sc-t-sm); margin-top: 6px !important; color: #5a3d22; }
.bench.is-legend .find { opacity: 1; transform: none; }

@media (max-width: 860px) {
  .bench {
    grid-template-columns: 1fr; align-content: start; gap: var(--sc-3);
    padding: calc(var(--cb-bar) + 2px) calc(var(--sc-gutter) + var(--cb-rail)) calc(var(--cb-index) + 10px) var(--sc-gutter);
  }
  .bench__stage { width: min(calc(100vw - 2 * var(--sc-gutter) - var(--cb-rail)), 48svh); }
  .bench__side { gap: var(--sc-3); }
  .bench, .shop { grid-template-columns: minmax(0, 1fr); }
  .bench > *, .shop > * { min-width: 0; }
  .bench__h2 { font-size: 1.45rem; }
  .label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
  .label__item { margin: 0; font-size: var(--sc-t-sm); text-align: right; }
  .label__item span { font-size: 0.75rem; }
  .steps { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .step { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 0; padding: 4px 4px 6px; }
  .step img { width: 34px; height: 34px; }
  .step__tool { font-size: 0.8rem; }
  .step__layer { font-size: 0.72rem; }
  .bench__hint { min-height: 2.8em; font-size: var(--sc-t-sm); }
  .steps, .bench__hint { transition: opacity 240ms var(--sc-ease-out); }
  .bench.is-legend .steps, .bench.is-legend .bench__hint { opacity: 0; }
  .find { position: absolute; left: 0; right: 0; bottom: 0; grid-template-columns: 52px 1fr; padding: 10px 12px; gap: 10px; }
  .find img { width: 52px; height: 52px; }
  .find__lost { display: none; }
  .stamp { right: 0; bottom: 4%; padding: 8px 14px 10px; }
  .stamp__v { font-size: var(--sc-t-xl); }
}

/* ----------------------------------------------------------- 5 tour --- */
.scene--tour { background: var(--cb-paper); }
.tour {
  --sc-ink: #3a2614; --sc-ink-soft: #5a3d22; --sc-accent: #8a5a0c; --sc-accent-ink: #fff3d6;
  color: var(--sc-ink);
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 60%, rgb(140 100 40 / 0.18)),
    var(--cb-paper);
}
.rail {
  height: 100%; align-items: center; gap: clamp(2.5rem, 5vw, 6rem);
  padding: calc(var(--cb-bar) + var(--sc-4)) calc(var(--sc-gutter) + 80px) var(--sc-6) var(--sc-gutter);
  width: max-content;
}
.rail > * { flex: none; }
.rail__lead { width: min(28rem, 78vw); }
.rail__lead > * + * { margin-top: var(--sc-5); }
.map { margin: 0; display: flex; align-items: center; gap: var(--sc-6); height: calc(100svh - var(--cb-bar) - 5rem); }
.map__art {
  position: relative; height: 100%;
  border-radius: var(--cb-r); box-shadow: var(--sc-e3);
  outline: 6px solid #fffaf0; outline-offset: -1px;
}
.map__art img { height: 100%; width: auto; max-width: none; border-radius: var(--cb-r); }
.pin {
  position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%);
  translate: -50% calc(-100% - 10px);
  padding: 3px 9px; border-radius: 9px;
  background: #fffaf0; color: #3a2614; border: 1.5px solid var(--cb-brass-deep);
  font-size: 0.72rem; font-weight: 800; white-space: nowrap; line-height: 1.4;
  box-shadow: var(--sc-e1);
}
.pin::after {
  content: ""; position: absolute; left: 50%; top: 100%; width: 9px; height: 9px; margin: 4px 0 0 -4.5px;
  border-radius: 50%; background: var(--cb-seal); box-shadow: 0 0 0 2px #fffaf0;
}
.pin--grand { background: var(--cb-brass); border-color: #3a2614; }
.map__cap { display: grid; gap: 6px; width: 14rem; }
.map__country { font-size: var(--sc-t-2xl); font-weight: 800; line-height: 1; letter-spacing: var(--sc-track-snug); }
.map__tag { color: var(--sc-ink-soft); }
.map__lost { margin-top: var(--sc-4); padding-top: var(--sc-4); border-top: 1px solid rgb(58 38 20 / 0.25); color: #3a2614; font-size: var(--sc-t-sm); line-height: 1.5; }
.rail__note { width: min(24rem, 74vw); }
.rail__note img { width: 160px; height: auto; margin-bottom: var(--sc-4); }
.rail__h3 { font-size: var(--sc-t-xl); margin: 0 0 var(--sc-3); }
@media (prefers-reduced-motion: no-preference) {
  .rail > :not(:first-child) {
    opacity: clamp(0.55, calc(0.55 + (var(--sc-p, 0) * 3 - var(--i, 1) * 0.6) ), 1);
  }
  /* --i (arrival order) is set inline per map by site/_build/landing.py. */
}
@media (max-width: 860px) {
  .rail { padding: calc(var(--cb-bar) + 8px) 18vw calc(var(--cb-index) + 12px) var(--sc-gutter); }
  /* The rail slides sideways; it fades out before the dots' column, so nothing
     travels under them (the section's own paper shows through the mask). */
  .tour {
    -webkit-mask-image: linear-gradient(to left, transparent calc(var(--cb-rail) + 14px), #000 calc(var(--cb-rail) + 38px));
    mask-image: linear-gradient(to left, transparent calc(var(--cb-rail) + 14px), #000 calc(var(--cb-rail) + 38px));
  }
  .map { flex-direction: column; align-items: flex-start; gap: var(--sc-3); height: calc(100svh - var(--cb-bar) - var(--cb-index) - 2.5rem); }
  .map__art { height: auto; flex: 1 1 auto; min-height: 0; }
  .map__cap { width: min(76vw, 18rem); gap: 2px; }
  .map__country { font-size: var(--sc-t-xl); }
  .map__lost { display: none; }
  .pin { font-size: 0.62rem; padding: 2px 6px; }
}

/* --------------------------------------------------------- 6 ledger --- */
.scene--ledger { background: #1c120a; }
.ledger { background: #1c120a; }
.ledger__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 54%; }
.ledger__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgb(14 40 35 / 0.97) 0%, rgb(14 40 35 / 0.93) 40%, rgb(14 40 35 / 0.6) 56%, transparent 74%);
}
.ledger__copy {
  position: absolute; z-index: 5; left: 50%; bottom: calc(var(--sc-9) + 10px); translate: -50% 0;
  width: min(44rem, calc(100% - 2 * var(--sc-gutter))); text-align: center;
  display: grid; justify-items: center; gap: var(--sc-5);
}
.ledger__quote { margin: 0; }
.ledger__quote p {
  margin: 0; font-size: var(--sc-t-2xl); font-weight: 800; line-height: 1.12; letter-spacing: var(--sc-track-snug);
  color: var(--cb-cream); text-wrap: balance;
}
.ledger__quote footer { margin-top: var(--sc-3); color: var(--cb-brass); font-weight: 800; font-size: var(--sc-t-sm); }
.ledger__h2 { margin: 0; font-size: var(--sc-t-base); font-weight: 500; color: var(--sc-ink-soft); }
.foot {
  position: absolute; z-index: 5; left: 0; right: 0; bottom: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px;
  padding: var(--sc-4) var(--sc-gutter) calc(var(--sc-4) + var(--cb-index));
  font-size: var(--sc-t-xs);
}
.foot__mark { font-weight: 800; color: var(--cb-cream); margin-right: var(--sc-3); align-self: center; }
.foot a {
  min-height: 34px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 9px;
  color: var(--sc-ink-soft); text-decoration-color: color-mix(in oklab, var(--cb-brass) 60%, transparent);
}
@media (hover: hover) and (pointer: fine) { .foot a:hover { color: var(--cb-cream); } }
@media (max-width: 860px) {
  .ledger__bg { height: 132%; top: -36%; bottom: auto; object-position: 50% 50%; }
  .ledger__copy { bottom: calc(var(--cb-index) + 64px); gap: var(--sc-4); width: calc(100% - 2 * (var(--sc-gutter) + var(--cb-rail))); }
  .ledger__quote p { font-size: clamp(1.4rem, 1.1rem + 2vw, 1.9rem); }
  .stores--close .store { min-width: 148px; padding: 7px 14px 7px 12px; }
  .stores--close .store span { font-size: 1rem; }
}
@media (max-width: 380px) {
  .ledger__copy { bottom: calc(var(--cb-index) + 92px); gap: var(--sc-3); }
  .ledger__quote p { font-size: 1.3rem; }
  .foot__mark { display: none; }
  .ledger__scrim { background: linear-gradient(to top, rgb(14 40 35 / 0.97) 0%, rgb(14 40 35 / 0.95) 50%, rgb(14 40 35 / 0.6) 64%, transparent 80%); }
}

/* ------------------------------------------------------ reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .lamp { animation: none; opacity: 0.6; }
  .bench.is-legend .bench__sparkles img { animation: none; opacity: 0.85; }
  .find { transition-duration: 200ms; transform: none; }
  .index a, .index a[aria-current="true"] { transition: none; }
  /* The rail becomes a native scroll region (engine floor). Keep it legible. */
  .tour .rail { padding-right: var(--sc-gutter); }
}