/* ==========================================================
   The desk
   ========================================================== */

.desk{
  position:relative;
  overflow:hidden;
  padding:clamp(40px,6vw,80px) 0 clamp(50px,7vw,96px);
  background:
    radial-gradient(120% 90% at 30% 8%, rgba(255,236,206,.30), transparent 62%),
    radial-gradient(90% 70% at 82% 92%, rgba(64,38,18,.34), transparent 60%),
    repeating-linear-gradient(92deg,
      rgba(96,60,30,.05) 0 3px, transparent 3px 9px),
    linear-gradient(168deg,#6f4c2c 0%,#5d3e23 42%,#4a2f19 100%);
  box-shadow:0 22px 60px rgba(40,24,12,.30) inset;
  cursor:default;
}
/* the leather edge of the desktop */
.desk::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:0 0 0 1px rgba(255,232,200,.10) inset,
             0 0 90px rgba(28,16,8,.55) inset;
}

.desk-surface{
  position:relative;
  z-index:2;
  width:min(calc(100% - 48px),var(--max,1380px));
  margin-inline:auto;
  height:clamp(520px,58vw,760px);
  touch-action:none;
}

/* ---- an item on the desk ---------------------------------- */
.desk-item{
  position:absolute;
  left:var(--x,50%);
  top:var(--y,50%);
  width:var(--w,190px);
  margin:0;
  transform:translate(-50%,-50%) rotate(var(--rot,0deg)) scale(var(--s,1));
  transform-origin:center;
  z-index:var(--z,1);
  cursor:grab;
  filter:drop-shadow(0 14px 22px rgba(24,12,4,.5));
  transition:filter .3s ease, transform .5s cubic-bezier(.2,.8,.2,1);
  user-select:none;
  -webkit-user-select:none;
}
.desk-item:focus-visible{outline:3px solid #f0c98f;outline-offset:6px}
.desk-item.lifted{
  cursor:grabbing;
  filter:drop-shadow(0 34px 44px rgba(18,9,3,.62));
  transition:filter .2s ease;
}
.desk-item:hover{transform:translate(-50%,-50%) rotate(var(--rot,0deg)) scale(calc(var(--s,1) * 1.03))}

/* ---- a photographic print --------------------------------- */
.desk-item.print{
  background:#fdf9f0;
  padding:9px 9px 30px;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset;
}
.desk-item.print img{
  display:block;width:100%;height:auto;
  aspect-ratio:var(--ratio,4/3);
  object-fit:cover;
  filter:saturate(1.1) contrast(1.05) hue-rotate(-4deg);
}
.desk-item.print figcaption{
  margin-top:8px;
  font:400 .62rem/1.3 var(--sans);
  color:#6a5c4c;
  text-align:center;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

/* ---- a bare plate, no mount ------------------------------- */
.desk-item.plate-bare img{
  display:block;width:100%;height:auto;
  aspect-ratio:var(--ratio,3/4);
  object-fit:cover;
  border:1px solid rgba(60,38,18,.5);
  filter:saturate(1.08) contrast(1.06);
}

/* ---- an index card ---------------------------------------- */
.desk-item.card{
  background:
    repeating-linear-gradient(180deg,
      transparent 0 21px, rgba(120,140,170,.30) 21px 22px),
    linear-gradient(180deg,#fdfaf1,#f4eddd);
  padding:16px 15px 18px;
  border:1px solid rgba(90,66,40,.28);
}
.desk-item.card b{
  display:block;
  font:600 .7rem/1.5 var(--sans);
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#8a3b25;
  margin-bottom:4px;
}
.desk-item.card p{
  margin:0;
  font:400 .78rem/1.55 var(--serif);
  color:#3b332a;
}
.desk-item.card::before{      /* the red margin rule */
  content:"";
  position:absolute;
  left:11px;top:0;bottom:0;
  width:1px;
  background:rgba(168,73,46,.4);
}

/* ---- a torn note ------------------------------------------ */
.desk-item.note{
  background:linear-gradient(170deg,#fbf3df,#f0e3c6);
  padding:18px 17px;
  clip-path:polygon(0 2%,4% 0,26% 3%,52% 0,74% 4%,96% 1%,100% 6%,99% 40%,100% 72%,97% 96%,72% 100%,44% 97%,18% 100%,3% 96%,0 62%,1% 30%);
}
.desk-item.note p{
  margin:0;
  font:400 .82rem/1.6 var(--serif);
  font-style:italic;
  color:#4a3d2c;
}

/* ---- tape and pins ---------------------------------------- */
.desk-item.taped::after{
  content:"";
  position:absolute;
  top:-13px;left:50%;
  width:74px;height:26px;
  margin-left:-37px;
  background:linear-gradient(180deg,rgba(238,222,180,.72),rgba(214,192,142,.62));
  box-shadow:0 2px 5px rgba(30,18,8,.28);
  transform:rotate(var(--tape,-3deg));
  clip-path:polygon(3% 0,97% 4%,100% 96%,0 100%);
}
.desk-item.pinned::before{
  content:"";
  position:absolute;
  top:-9px;left:50%;
  width:15px;height:15px;
  margin-left:-7.5px;
  border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #e2765a, #9c2f1c 62%, #6d1c0e);
  box-shadow:0 5px 8px rgba(20,10,4,.5);
  z-index:4;
}

/* ---- the label plate on the desk -------------------------- */
.desk-label{
  position:relative;
  z-index:3;
  width:min(calc(100% - 48px),var(--max,1380px));
  margin:0 auto clamp(18px,3vw,34px);
  color:#f2e4cd;
}
.desk-label .section-kicker{color:#e2a97e}
.desk-label h2{
  margin:0 0 8px;
  font:500 clamp(1.9rem,3.4vw,3.1rem)/1.08 var(--serif);
  letter-spacing:-.025em;
  color:#fbf1e0;
}
.desk-label p{
  margin:0;
  max-width:52ch;
  font:400 .88rem/1.6 var(--sans);
  color:#cdb99e;
}
.desk-reset{
  margin-top:14px;
  border:1px solid rgba(240,201,143,.45);
  background:transparent;
  color:#f0c98f;
  padding:9px 16px;
  font:600 .68rem/1 var(--sans);
  letter-spacing:.09em;
  text-transform:uppercase;
  cursor:pointer;
}
.desk-reset:hover{background:rgba(240,201,143,.14)}

@media (max-width:820px){
  .desk-surface{height:clamp(560px,120vw,900px)}
  .desk-item{--w:150px}
}
@media (max-width:560px){
  .desk-item{--w:126px}
  .desk-item.card,.desk-item.note{--w:180px}
}

@media (prefers-reduced-motion:reduce){
  .desk-item{transition:none}
  .desk-item:hover{transform:translate(-50%,-50%) rotate(var(--rot,0deg))}
}
html.a11y-motion .desk-item{transition:none !important}
html.a11y-contrast .desk{background:#111}
html.a11y-contrast .desk-item img{filter:none}