/* the wall of vibers: an endless board you drag; the stickers exist only where you look. Needs css/shell.css first. */
  /* ───────── THE WALL: an endless board you drag; the stickers exist only where you look ───────── */
  .wallhead { padding-block: calc(var(--hdr) + 150px) 34px; display: grid; gap: 18px; position: relative; z-index: 3; }
  @media (min-width: 1100px) { .wallhead { padding-top: 82px; } }
  .wallhead h1 { font-size: clamp(2.2rem, 4.15vw, 4.6rem); line-height: 1; font-weight: 800; }
  .wallhead .lede { max-width: 58ch; }
  .wallhead .row { display: flex; gap: 12px 18px; flex-wrap: wrap; align-items: center; }
  .count { font: 500 9.5px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dust-2); }
  .board { position: relative; height: max(560px, calc(100vh - 120px)); overflow: hidden; cursor: grab; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background-color: #0b0f16; background-image: radial-gradient(circle, rgba(255,255,255,.13) 1px, transparent 1.6px); background-size: 28px 28px; touch-action: none; user-select: none; -webkit-user-select: none; }
  .board.dragging { cursor: grabbing; }
  .board::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 60% at 50% 50%, transparent 60%, rgba(10,13,18,.7) 100%); }
  .plane { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; will-change: transform; }
  .stk { position: absolute; left: 0; top: 0; width: 456px; transform-origin: center; filter: drop-shadow(0 18px 30px rgba(0,0,0,.55)); cursor: pointer; }
  .stk .hero { display: block; width: 456px; height: 271px; background: #05070d; box-shadow: 0 0 0 6px #eef1f6; border-radius: 2px; object-fit: cover; }
  .stk .tape { position: absolute; left: 50%; top: -14px; width: 96px; height: 24px; transform: translateX(-50%) rotate(-2deg); background: rgba(238,241,246,.28); border: 1px solid rgba(255,255,255,.18); }
  .stk .tag { position: absolute; left: 10px; bottom: 10px; font: 600 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #eef1f6; background: rgba(12,18,30,.78); padding: 4px 8px; border-radius: 999px; max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .stk .face { position: absolute; right: -14px; top: -14px; width: 54px; height: 54px; border-radius: 50%; background: #141a24 center/cover; box-shadow: 0 0 0 3px #eef1f6, 0 8px 18px rgba(0,0,0,.5); }
  .stk.you .hero { box-shadow: 0 0 0 6px #eef1f6, 0 0 0 9px var(--tint); }
  .stk.you .tag { background: var(--tint); color: #141a24; }
  .stk.draft .tag { background: #ffd23f; color: #141a24; }
  .stk.open { cursor: default; filter: none; }
  .stk.open .hero { background: transparent; box-shadow: none; border: 2px dashed rgba(238,241,246,.22); border-radius: 6px; display: grid; place-items: center; font: 500 9.5px var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--dust-2); }
  .stk.open .tape, .stk.open .face { display: none; }
  .stk.yours .hero { border-color: var(--vibe); color: var(--vibe); }
  .stk:not(.open):hover { z-index: 9; filter: drop-shadow(0 34px 44px rgba(0,0,0,.7)); }
  .peek { position: fixed; z-index: 70; width: 340px; pointer-events: none; animation: peek .3s var(--ease); }
  @keyframes peek { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
  /* the collapsed card: what the person entered, nothing that identifies them (no handle, no email, no X) */
  .mini { border-radius: 22px; padding: 10px; background: #0b0e14; box-shadow: 0 40px 80px -30px rgba(0,0,0,.9); }
  .mini .in { border-radius: 14px; overflow: hidden; background: #eef1f6; color: #141a24; }
  .mini .top { position: relative; aspect-ratio: 456 / 271; background: #05070d center/cover; clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%); }
  .mini .top .org { position: absolute; left: 10px; top: 10px; display: grid; place-items: center; background: #141a24; border: 1px solid rgba(255,255,255,.14); padding: 5px 6px; border-radius: 5px; }
  .mini .top .org img { display: block; height: 9px; width: auto; }
  .mini .top .tier { position: absolute; right: 10px; top: 10px; font: 600 8px var(--mono); letter-spacing: .22em; color: #eef1f6; padding: 4px 7px; border-radius: 999px; border: 1px solid rgba(238,241,246,.5); }
  .mini .av { position: absolute; left: 14px; bottom: -26px; width: 60px; height: 60px; border-radius: 50%; background: #141a24 center/cover; box-shadow: 0 0 0 3px #eef1f6; display: grid; place-items: center; color: #eef1f6; font: 800 22px var(--display); }
  .mini .sheet { padding: 42px 16px 16px; display: grid; gap: 5px; }
  .mini .pres { font: 800 8.5px var(--body); letter-spacing: .14em; text-transform: uppercase; color: #6b7581; }
  .mini .disc { font: 750 10px var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--tint-ink); }
  .mini .tagline { font: 500 13px/1.4 var(--body); margin: 3px 0 4px; max-width: none; }
  .mini .tagline .dim { color: #6b7581; }
  .mini .rows > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid rgba(20,26,36,.12); font-size: 12px; }
  .mini .rows span { font: 500 8.5px var(--mono); letter-spacing: .22em; text-transform: uppercase; color: #6b7581; }
  .mini .rows b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mini .plabel { margin-top: 8px; padding-top: 8px; border-top: 2px solid #141a24; font: 700 8.5px var(--mono); letter-spacing: .22em; text-transform: uppercase; }
  .mini .proj { display: grid; grid-template-columns: 24px 1fr; gap: 8px; align-items: start; padding: 7px 8px; border-radius: 8px 3px 8px 3px; background: rgba(20,26,36,.05); font-size: 12px; }
  .mini .proj + .proj { margin-top: 4px; }
  .mini .proj svg { width: 24px; height: 24px; border-radius: 6px; }
  .mini .proj b { display: block; } .mini .proj small { color: #6b7581; display: block; } .mini .proj em { display: block; font: 500 8.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--tint-ink); font-style: normal; margin-top: 2px; }
  .lb { position: fixed; inset: 0; z-index: 80; background: rgba(6,8,12,.82); backdrop-filter: blur(10px); display: grid; place-items: center; padding: 24px; overflow: auto; }
  .lb[hidden] { display: none; }
  .lb .box { width: min(440px, 100%); display: grid; gap: 14px; justify-items: center; }
  .lb .box > img { width: 100%; border-radius: 26px; box-shadow: 0 60px 120px -40px rgba(0,0,0,1); }
  .lb .box .mini { width: 100%; box-sizing: border-box; }
  .lb .say { color: var(--dust); text-align: center; max-width: 40ch; }
  .lb .x { position: fixed; right: 22px; top: calc(var(--hdr) + 18px); background: transparent; border: 1px solid var(--line-2); color: var(--bone); border-radius: 999px; padding: 8px 14px; font: 600 .9rem var(--body); cursor: pointer; }
  .hint { font: 500 9.5px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dust-2); }
  @media (max-width: 719px) { .peek { display: none; } }