/* ═══════════════════════════════════════════════════════════════════════
   THE DESK — Eulogize Memorials' evidence (mediaComposition "project-desktop")

   A cutting mat with five folders on it. Each folder holds a sheet printed
   with a sliver of that project's real capture; the sheet slides out when
   the folder is pointed at, focused or picked up. The folders are ordinary
   links: this file gives them their static scatter, so with JavaScript off
   the desk is already composed and every folder already works.
   ev-desk.js adds the physics (drag, keyboard nudge, remembered layout,
   double-click to open) and the tidy-desk note.

   Sizes are container-relative (cqw), so the composition scales as one
   object instead of reflowing. Two compositions: wide (the desktop column)
   and narrow (a phone), switched on the desk's OWN width, not the viewport.
   ev-desk.js reads the same 560px threshold.
   ═══════════════════════════════════════════════════════════════════════ */

.evidence-desk {
  container: desk / inline-size;
  /* This is a contents page, not a pile of evidence: the authored folders
     begin tidy and stay inside the mat. They can still be moved as a small
     Easter egg, but the first read is deliberately calm. */
  margin-bottom: clamp(18px, 3cqw, 32px);
  --desk-shadow: rgba(8, 11, 10, .5);
  --mat: #27302d;
  --mat-line: rgba(233, 240, 236, .07);
  --mat-line-major: rgba(233, 240, 236, .15);
  --mat-unit: calc(100cqw / 30);
  --fw: 28cqw;
}

.desk-mat {
  position: relative;
  aspect-ratio: 1.45;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background-color: var(--mat);
  /* Self-healing mat: a fine grid, a heavier line every five squares, and
     the 45° guide every mat carries. The grid is drawn in container units,
     so it scales with the folders and a squared folder sits square on it. */
  background-image:
    linear-gradient(135deg, transparent calc(50% - .75px), var(--mat-line-major) calc(50% - .75px) calc(50% + .75px), transparent calc(50% + .75px)),
    linear-gradient(to right, var(--mat-line-major) 1px, transparent 1px),
    linear-gradient(to bottom, var(--mat-line-major) 1px, transparent 1px),
    linear-gradient(to right, var(--mat-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--mat-line) 1px, transparent 1px);
  background-size:
    78cqw 78cqw,
    calc(var(--mat-unit) * 5) calc(var(--mat-unit) * 5),
    calc(var(--mat-unit) * 5) calc(var(--mat-unit) * 5),
    var(--mat-unit) var(--mat-unit),
    var(--mat-unit) var(--mat-unit);
  background-position: 100% 100%, -1px -1px, -1px -1px, -1px -1px, -1px -1px;
  background-repeat: no-repeat, repeat, repeat, repeat, repeat;
  box-shadow: 14px 16px 0 rgba(38, 51, 59, .18);
}

/* Label-maker tape, stuck across the mat's top edge. */
.desk-tape {
  position: absolute;
  left: 4.5%;
  top: -13px;
  z-index: 0;
  padding: 7px 13px 6px;
  background: var(--ink);
  color: #f5f7f6;
  font: 700 clamp(.62rem, 1.55cqw, .74rem) / 1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 3px 4px 0 rgba(38, 51, 59, .22);
  rotate: -1.8deg;
  clip-path: polygon(0 4%, 100% 0, 99% 100%, 1% 96%);
  pointer-events: none;
  white-space: nowrap;
}

.desk-files { position: absolute; inset: 0; isolation: isolate; }

/* ── The folder ─────────────────────────────────────────────────────── */
.desk-file {
  --front: #ffdcd7; --back: #efb3ab; --tab: var(--red);
  --x: 0; --y: 0; --r: 0;
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: var(--fw);
  aspect-ratio: 1 / .68;
  rotate: calc(var(--r) * 1deg);
  container-type: inline-size;
  display: block;
  color: var(--ink);
  text-decoration: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  /* Vertical swipes still scroll the page on a phone. A folder is picked up
     only by a long press (ev-desk.js), so the desk is never a scroll trap. */
  touch-action: pan-y;
  filter: drop-shadow(4px 5px 0 var(--desk-shadow));
  transition:
    scale 420ms var(--ease-spring),
    filter 240ms var(--ease-drawer),
    rotate 560ms var(--ease-spring);
}
.desk-file.file-blue   { --front: #dfe6ff; --back: #afc0f5; --tab: var(--blue); }
.desk-file.file-green  { --front: #d9f0e3; --back: #a7d4b9; --tab: var(--green); }
.desk-file.file-yellow { --front: #fff0b8; --back: #e5cb75; --tab: var(--yellow); }

/* A quiet 3 + 2 contents layout. The tiny rotations keep the physical-folder
   character without making five separate projects compete as a collage. */
.desk-file:nth-child(1) { --x: 4;  --y: 19; --r: -1; }
.desk-file:nth-child(2) { --x: 36; --y: 13; --r: .7; }
.desk-file:nth-child(3) { --x: 68; --y: 19; --r: -.5; }
.desk-file:nth-child(4) { --x: 20; --y: 58; --r: .8; }
.desk-file:nth-child(5) { --x: 52; --y: 58; --r: -.7; }

.desk-back {
  position: absolute;
  inset: 0;
  border: 2px solid var(--ink);
  border-radius: 3px 5px 5px 5px;
  background: var(--back);
}
/* Third-cut tabs, staggered left, middle, right like a real box of folders. */
.desk-back::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 4%;
  width: 36%;
  height: 10cqw;
  border: 2px solid var(--ink);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  background: var(--tab);
}
.desk-file.tab-mid .desk-back::before { left: 31%; }
.desk-file.tab-right .desk-back::before { left: 58%; }

.desk-sheet {
  position: absolute;
  left: 8%;
  width: 84%;
  top: 5%;
  height: 90%;
  display: flex;
  flex-direction: column;
  gap: 2.4cqw;
  padding: 3.6cqw;
  overflow: hidden;
  background: #fff;
  border: 1.5px solid var(--ink);
  border-radius: 1px;
  rotate: -1.2deg;
  transition: translate 380ms var(--ease-spring);
}
.desk-file:nth-child(even) .desk-sheet { rotate: 1.4deg; left: 7%; }

.desk-print {
  position: relative;
  display: block;
  flex: none;
  width: 100%;
  aspect-ratio: var(--ar);
  overflow: hidden;
  background: #f4f5f6;
}
.desk-print img {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(100% / var(--cw));
  max-width: none;
  height: auto;
  translate: calc(var(--cx) * -100%) calc(var(--cy) * -100%);
  pointer-events: none;
}
/* The component sheet prints real components on white, not screens. */
.desk-sheet:has(.desk-print + .desk-print) .desk-print { background: #fff; }

.desk-front {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 66%;
  overflow: visible;
}
.desk-front path {
  fill: var(--front);
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linejoin: round;
}

/* The label is a real sticker on the front: the link's visible name. */
.desk-label {
  position: absolute;
  left: 9%;
  right: 16%;
  bottom: 10%;
  display: block;
  padding: 2.4cqw 3.2cqw 2.8cqw;
  background: #fff;
  border: 1.5px solid var(--ink);
  rotate: -.8deg;
  text-align: left;
}
.desk-file:nth-child(even) .desk-label { rotate: .9deg; left: 15%; right: 10%; }
.desk-label-name {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(10.5px, 6.5cqw, 15px);
  line-height: 1.02;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.desk-label small {
  display: block;
  margin-top: 1.6cqw;
  color: var(--muted);
  font: 700 clamp(7.5px, 3.6cqw, 9.5px) / 1.1 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── The loose printout ─────────────────────────────────────────────── */
/* The product itself, printed and clipped to a second page, lying under the
   folders. Not a link and not draggable: it is what the folders came from. */
.desk-loose {
  position: absolute;
  z-index: 0;
  left: 59%;
  top: 5%;
  width: 37%;
  margin: 0;
  padding: 2.2cqw;
  background: #fff;
  border: 1.5px solid var(--ink);
  rotate: 4deg;
  box-shadow: 5px 6px 0 var(--desk-shadow);
}
.desk-loose::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #f1f3f4;
  border: 1.5px solid var(--ink);
  rotate: -5deg;
  translate: -3% 4%;
  box-shadow: 4px 5px 0 var(--desk-shadow);
}
.desk-loose .desk-print { background: #fff; }
.desk-clip {
  position: absolute;
  z-index: 2;
  left: 9%;
  top: -3.6cqw;
  width: 3.4cqw;
  min-width: 14px;
  rotate: -8deg;
  overflow: visible;
}
.desk-clip path {
  fill: none;
  stroke: var(--steel-dark);
  stroke-width: 2.4;
  stroke-linecap: round;
  paint-order: stroke;
  filter: drop-shadow(0 0 .6px var(--ink)) drop-shadow(0 0 .4px var(--ink));
}

/* ── States ─────────────────────────────────────────────────────────── */
/* Pointing at a folder slides its sheet a third of the way out. Pointer
   hover only on devices that really hover, so a tap never leaves it stuck. */
@media (hover: hover) {
  .desk-file:hover .desk-sheet { translate: 0 -38%; }
}
.desk-file.is-peek .desk-sheet { translate: 0 -24%; }
.desk-file:focus-visible .desk-sheet,
.desk-file.is-selected .desk-sheet,
.desk-file.is-lifted .desk-sheet { translate: 0 -38%; }

/* White on the mat, with an ink edge for the stretch of the ring that sits
   over the drawer when a folder hangs off the mat. */
.desk-file:focus-visible {
  outline: 3px solid #f5f7f6;
  outline-offset: 6px;
  border-radius: 4px;
  box-shadow: 0 0 0 11px var(--ink);
}
.desk-file.is-selected .desk-label { background: var(--ink); color: #fff; }
.desk-file.is-selected .desk-label small { color: rgba(255, 255, 255, .72); }

/* Picked up: it comes off the mat toward you. */
.desk-file.is-lifted {
  scale: 1.045;
  cursor: grabbing;
  filter: drop-shadow(15px 19px 0 var(--desk-shadow));
}
/* While a hand is on it, rotation follows the hand, not a transition. */
.desk-file.is-dragging { transition: scale 160ms var(--ease-drawer), filter 160ms var(--ease-drawer); }

/* Opening: the sheet is pulled all the way out before the folder changes. */
.desk-file.is-opening .desk-sheet {
  translate: 0 -82%;
  transition: translate 200ms var(--ease-drawer);
}

/* ── The tidy-desk note ─────────────────────────────────────────────── */
.desk-note {
  position: absolute;
  z-index: 0;
  width: 23cqw;
  min-height: 21cqw;
  padding: 2.4cqw 2.6cqw 3cqw;
  background: #fff1a0;
  border: 2px solid var(--ink);
  box-shadow: 5px 6px 0 var(--desk-shadow);
  rotate: -3deg;
  color: var(--ink);
  font-family: var(--hand);
  font-size: clamp(15px, 2.9cqw, 22px);
  line-height: 1.02;
  pointer-events: none;
}
.desk-note p { margin: 0; }
.desk-note p + p { margin-top: .35em; }
.desk-note.is-new { animation: desk-note-stick 620ms var(--ease-spring) both; }
@keyframes desk-note-stick {
  from { scale: 1.3; rotate: -11deg; translate: 0 -10px; }
  to   { scale: 1;   rotate: -3deg;  translate: 0 0; }
}

/* ── Narrow: a phone's column ───────────────────────────────────────── */
@container desk (max-width: 559.98px) {
  .desk-mat { aspect-ratio: .9; border-radius: 12px; }
  .evidence-desk, .desk-mat { --fw: 44cqw; --mat-unit: calc(100cqw / 16); }
  .desk-file:nth-child(1) { --x: 4;  --y: 11; --r: -.8; }
  .desk-file:nth-child(2) { --x: 52; --y: 11; --r: .7; }
  .desk-file:nth-child(3) { --x: 4;  --y: 40; --r: .5; }
  .desk-file:nth-child(4) { --x: 52; --y: 40; --r: -.6; }
  .desk-file:nth-child(5) { --x: 28; --y: 69; --r: .4; }
  .desk-loose { left: 5%; top: 66%; width: 56%; rotate: -3deg; }
  .desk-note { width: 38cqw; min-height: 34cqw; font-size: 15px; }
  .desk-label, .desk-file:nth-child(even) .desk-label { left: 7%; right: 7%; bottom: 9%; }
  .desk-tape { top: -11px; }
}

@media (prefers-reduced-motion: reduce) {
  .desk-file, .desk-sheet, .desk-file.is-opening .desk-sheet { transition: none; }
  .desk-note.is-new { animation: none; }
}