/* ==========================================================================
   GAMBAR — meja sketsa & arsip
   ========================================================================== */

.toolbar {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-block: 1px solid var(--line);
}
.toolbar .wrap { display: flex; align-items: center; gap: 12px 20px; padding-block: 12px; }
.toolbar .chips { flex: 1; }
@media (max-width: 760px) {
  .toolbar { position: static; }
  .toolbar .wrap { flex-direction: column; align-items: stretch; }
  .toolbar .chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .toolbar .seg { align-self: flex-start; }
}

.desk-hint { font-family: var(--hand); font-size: 28px; color: var(--ink); opacity: .8; margin: 26px 0 -10px; }
.desk {
  /* isolation: z-index kertas yang digeser tetap terkurung di dalam meja,
     jadi penampil (lightbox) selalu berada di atasnya */
  position: relative; z-index: 0; isolation: isolate; margin-top: 28px;
  background: radial-gradient(ellipse at 30% 20%, rgb(255 255 255 / .35), transparent 60%), #ddd3bf;
  border-radius: var(--radius); overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line);
  touch-action: pan-y;
}
.paper {
  position: absolute; left: 0; top: 0; padding: 0; border: 0; background: var(--sheet);
  box-shadow: var(--shadow-paper); cursor: grab;
  transform: translate(var(--x), var(--y)) rotate(var(--rot));
  transition: box-shadow .25s, transform .7s var(--ease);
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.paper img { width: 100%; height: auto; pointer-events: none; -webkit-user-drag: none; }
.paper:hover { box-shadow: var(--shadow-lift); }
.paper.is-dragging { cursor: grabbing; box-shadow: var(--shadow-lift); transition: box-shadow .25s; transform: translate(var(--x), var(--y)) rotate(calc(var(--rot) * .4)) scale(1.03); }

.archive { columns: 4 240px; column-gap: 22px; margin-top: 28px; }
.archive figure { break-inside: avoid; margin: 0 0 26px; }
.archive button { display: block; width: 100%; padding: 0; border: 0; background: var(--sheet); box-shadow: var(--shadow-paper); cursor: zoom-in; }
.archive button:hover { box-shadow: var(--shadow-lift); }
.archive figcaption { display: flex; justify-content: space-between; gap: 10px; font-family: var(--mono); font-size: 12px; color: var(--muted); padding-top: 8px; }
.archive .draft-tag { color: var(--sodium); }