/* ============================================================
   Desk hero — work, research, drawings and about laid out as
   real objects around a short headline. A calm, ordered desk:
   folders above, phones below, a column either side.
   Quiet materials only: smoked glass, warm paper, ink.
   Sizes scale with --u (1px on a 1280px-wide desk).
   ============================================================ */

.hero.hero--desk {
  max-width: none;
  padding-block: clamp(8px, 2vw, 24px) var(--section-y);
  padding-inline: 0;
}

.desk {
  /* 1px on a 1280px-wide desk, shrunk further when the window is short so the hero fits */
  --u: clamp(.5px, min(.078vw, calc((100svh - 104px) / 880)), 1.4px);
  --px: 0;
  --py: 0;
  --cx: 50%;
  --cy: 45%;
  --paper: #efebe3;
  --paper-2: #e4dfd4;
  --ink: #2a2723;
  --ink-soft: rgba(42, 39, 35, .62);
  --settle: cubic-bezier(.2, .8, .2, 1);
  position: relative;
  height: calc(880 * var(--u));
  isolation: isolate;
  user-select: none;
  -webkit-user-select: none;
}

/* ── ambient ───────────────────────────────────────────────── */
.desk-rings {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask: radial-gradient(closest-side, #000 55%, #0000);
  mask: radial-gradient(closest-side, #000 55%, #0000);
}
.desk-rings i {
  position: absolute;
  left: 50%;
  top: 43%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .05);
  translate: -50% -50%;
}
.desk-rings i:nth-child(1) { width: 44%; }
.desk-rings i:nth-child(2) { width: 72%; }
.desk-rings i:nth-child(3) { width: 102%; }

.desk-glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
/* a soft static wash behind the headline, and a blurred light that follows the cursor,
   both free to extend up behind the header instead of stopping at the hero's edge */
.desk-glow::before,
.desk-glow::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
}
.desk-glow::before {
  left: 50%;
  top: 46%;
  width: 760px;
  height: 560px;
  translate: -50% -50%;
  background: radial-gradient(closest-side, rgba(238, 78, 196, .07), transparent);
}
.desk-glow::after {
  left: 0;
  top: 0;
  width: 560px;
  height: 560px;
  translate: calc(var(--gx, 50vw) - 50%) calc(var(--gy, 45%) - 50%);
  background: radial-gradient(closest-side, rgba(139, 92, 246, .16), transparent);
  transition: translate .5s cubic-bezier(.23, 1, .32, 1);
  will-change: translate;
}

/* ── headline ──────────────────────────────────────────────── */
.desk-center {
  position: absolute;
  left: 50%;
  top: 43%;
  z-index: 1;
  width: min(34rem, 40%);
  translate: -50% -50%;
  text-align: center;
  pointer-events: none;
}
.desk-center .eyebrow {
  margin-bottom: 20px;
  opacity: 0;
  transition: opacity .8s var(--ease) .1s;
}
.hero.is-ready .desk-center .eyebrow { opacity: 1; }
.hero--desk .hero-title {
  font-size: clamp(30px, calc(58 * var(--u)), 62px);
  line-height: 1.14;
  margin: 0;
}
.hero--desk .hero-title em { pointer-events: auto; }
.desk-stats {
  display: flex;
  justify-content: center;
  align-items: baseline;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: .02em;
  opacity: 0;
  transition: opacity .8s var(--ease) 1s;
}
.hero.is-ready .desk-stats { opacity: 1; }
.desk-stats li { padding: 0 18px; }
.desk-stats li + li { border-left: 1px solid var(--line-2); }
.desk-stats b {
  margin-right: 4px;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-size: 19px;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -.02em;
  color: var(--text);
}
.desk-hint {
  margin: 18px 0 0;
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--muted-2);
  opacity: 0;
  transition: opacity .8s var(--ease) 1.2s;
}
.hero.is-ready .desk-hint { opacity: 1; }
.desk-hint--coarse { display: none; }
@media (hover: none), (pointer: coarse) {
  .desk-hint--fine { display: none; }
  .desk-hint--coarse { display: inline; }
}

/* ── item shell ────────────────────────────────────────────── */
.desk-item {
  --dx: 0px;
  --dy: 0px;
  --dr: 0deg;
  --d: 10;
  --r: 0deg;
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: var(--z, 2);
  width: calc(var(--w) * var(--u) * var(--scale, 1.1));
  display: block;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: grab;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
  transform:
    translate3d(
      calc(var(--dx) + var(--px) * var(--d) * 1px),
      calc(var(--dy) + var(--py) * var(--d) * 1px),
      0
    )
    rotate(calc(var(--r) + var(--dr)));
  transition: transform .8s var(--ease);
  opacity: 0;
  translate: var(--fx, 0px) var(--fy, 14px);
  scale: var(--fs, 1);
}
.hero.is-ready .desk-item {
  animation: desk-deal 1s var(--settle) forwards;
  animation-delay: calc(.35s + var(--k, 0) * 70ms);
}
/* each object is dealt out from the centre of the desk to its place */
@keyframes desk-deal {
  0%   { opacity: 0; translate: var(--fx, 0px) var(--fy, 14px); scale: var(--fs, 1); }
  25%  { opacity: 1; }
  100% { opacity: 1; translate: 0 0; scale: 1; }
}
.desk-item:is(:hover, :focus-within) { z-index: 40; }

/* aurora glow behind the object on hover, as on the hero on main */
.desk-item {
  --glow-a: 139, 92, 246;
  --glow-b: 214, 36, 159;
}
.desk-item::before {
  content: "";
  position: absolute;
  inset: -22%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--glow-a), .62) 0%, rgba(var(--glow-b), .3) 42%, transparent 70%);
  filter: blur(30px);
  opacity: 0;
  scale: .8;
  pointer-events: none;
  transition: opacity .5s var(--ease), scale .7s var(--settle);
}
.desk-item:is(:hover, :focus-visible, :focus-within, .is-dragging)::before {
  opacity: 1;
  scale: 1;
}
.desk-item--plotline   { --glow-a: 99, 102, 241;  --glow-b: 167, 139, 250; }
.desk-item--mira       { --glow-a: 139, 92, 246;  --glow-b: 214, 36, 159; }
.desk-item--vera       { --glow-a: 124, 109, 240; --glow-b: 94, 207, 176; }
.desk-item--client     { --glow-a: 47, 165, 150;  --glow-b: 212, 178, 106; }
.desk-item--cipherpal  { --glow-a: 91, 140, 255;  --glow-b: 224, 92, 200; }
.desk-item--builds     { --glow-a: 107, 92, 255;  --glow-b: 167, 139, 250; }
.desk-item--stats      { --glow-a: 89, 70, 178;   --glow-b: 224, 122, 79; }
.desk-item--papers     { --glow-a: 196, 181, 253; --glow-b: 243, 234, 216; }
.desk-item--sketchbook { --glow-a: 139, 92, 246;  --glow-b: 58, 51, 72; }
.desk-item.is-dragging {
  z-index: 41;
  cursor: grabbing;
  /* follow the cursor 1:1; any transition here reads as lag */
  transition: none;
}
/* its own layer before it's picked up, so moving it never repaints the shadows and glow */
@media (hover: hover) and (pointer: fine) {
  .desk-item:hover,
  .desk-item.is-dragging { will-change: transform; }
}
.desk-item:focus-visible { outline: none; }
.desk-item:focus-visible .desk-obj {
  outline: 1px solid var(--line-2);
  outline-offset: 10px;
  border-radius: 14px;
}

.desk-obj {
  position: relative;
  display: block;
  filter: drop-shadow(0 calc(4 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, .4))
          drop-shadow(0 calc(16 * var(--u)) calc(28 * var(--u)) rgba(0, 0, 0, .32));
  transition:
    translate .6s var(--settle),
    rotate .6s var(--settle),
    filter .6s var(--ease);
}
.desk-item:is(:hover, :focus-visible) .desk-obj,
.desk-item.is-dragging .desk-obj {
  translate: 0 calc(-8 * var(--u));
  rotate: calc(var(--r) * -1);
  filter: drop-shadow(0 calc(8 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, .36))
          drop-shadow(0 calc(30 * var(--u)) calc(44 * var(--u)) rgba(0, 0, 0, .38));
}

.desk-tag {
  position: absolute;
  left: 50%;
  top: calc(100% + 14 * var(--u));
  display: block;
  width: max-content;
  max-width: 280px;
  padding: 9px 14px 10px;
  border-radius: 12px;
  border: 1px solid var(--line-2);
  background: rgba(16, 16, 21, .88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  translate: -50% 4px;
  rotate: calc(var(--r) * -1);
  transition: opacity .3s var(--ease), translate .4s var(--ease);
}
/* name on its own line, description below, status as a small pill */
.desk-tag b {
  display: block;
  margin-bottom: 2px;
  font-family: "Fraunces", Georgia, serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--text);
}
.desk-tag .live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 8px;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  letter-spacing: 0;
  padding: 1px 7px;
  border: 1px solid rgba(74, 222, 128, .35);
  border-radius: 100px;
  font-size: 10.5px;
  font-style: normal;
  color: #4ade80;
  vertical-align: 3px;
}
.desk-tag .live::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
}
.desk-item:is(:hover, :focus-visible) .desk-tag {
  opacity: 1;
  translate: -50% 0;
}
.desk-item.is-dragging .desk-tag { opacity: 0; }

/* ── placements (desktop) ──────────────────────────────────
   Products on the left and right shoulders, research and
   personal things lower down.                               */
/* top left — the phones, larger, Plotline in front, Vera raised */
.desk-item--mira       { --x: 6.5%;  --y: 5%; --w: 140; --r: -9deg;   --k: 0; --d: 14; }
.desk-item--plotline   { --x: 12.6%; --y: 6%; --w: 146; --r: -3deg;   --k: 1; --d: 18; --z: 3; }
.desk-item--vera       { --x: 20.8%; --y: 2%;  --w: 140; --r: 10deg;   --k: 2; --d: 14; }
/* lower left — the device, nudged in toward the headline for balance */
.desk-item--cipherpal  { --x: 21%;   --y: 53%; --w: 290; --r: 0deg;    --k: 3; --d: 20; }
/* centre — the key stats, just under the headline */
.desk-item--stats      { --x: 44.5%; --y: 63%; --w: 250; --r: 0deg;    --k: 4; --d: 16; --z: 3; }
/* top right — Spacio raised, the weekend builds lower beside it */
.desk-item--client     { --x: 67.5%; --y: 11%;  --w: 222; --r: -4deg;   --k: 5; --d: 16; --z: 3; }
.desk-item--builds     { --x: 79.5%;   --y: 23%; --w: 232; --r: 4deg;    --k: 6; --d: 12; }
/* right — the papers, the sketchbook below */
.desk-item--papers     { --x: 82.5%;   --y: 58%; --w: 200; --r: -4deg;   --k: 7; --d: 12; }
.desk-item--sketchbook { --x: 67%;   --y: 60%; --w: 172; --r: -7deg;   --k: 8; --d: 10; }

/* ── key stats (about): three paper cards, same size ──────── */
.stats {
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  position: relative;
  display: block;
  aspect-ratio: 250 / 168;
  transition: scale 160ms var(--ease-out);
}
.stat {
  --tx: 0px;
  --ty: 0px;
  --rot: 0deg;
  --lift: 0px;
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: calc(96 * var(--u));
  aspect-ratio: 1;
  padding: calc(11 * var(--u)) calc(12 * var(--u));
  border-radius: calc(9 * var(--u));
  color: #2f2a24;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .7),
    inset 0 0 0 1px rgba(40, 30, 20, .06),
    0 1px 2px rgba(0, 0, 0, .18),
    0 6px 18px rgba(0, 0, 0, .28);
  transform: translate(var(--tx), calc(var(--ty) - var(--lift))) rotate(var(--rot));
  transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out);
}
.stat:nth-child(1) { --rot: -6deg; left: 0; top: calc(34 * var(--u)); background: #f3ead8; z-index: 1; }
.stat:nth-child(2) { --rot: 5deg; left: calc(78 * var(--u)); top: 0; background: #e8e4f2; color: #3a3348; z-index: 2; transition-delay: 30ms; }
.stat:nth-child(3) { --rot: -3deg; left: calc(152 * var(--u)); top: calc(62 * var(--u)); background: #e3ece6; color: #2e4a3a; z-index: 3; transition-delay: 60ms; }
.stat__num {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-size: calc(30 * var(--u));
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1;
  letter-spacing: -.03em;
}
.stat__label {
  margin-top: calc(6 * var(--u));
  font-size: calc(7.5 * var(--u));
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .58;
}
@media (hover: hover) and (pointer: fine) {
  .desk-item--stats:hover .stat:nth-child(1) { --rot: -9deg; --tx: calc(-8 * var(--u)); --ty: calc(4 * var(--u)); }
  .desk-item--stats:hover .stat:nth-child(2) { --rot: 8deg;  --tx: calc(4 * var(--u));  --ty: calc(-12 * var(--u)); }
  .desk-item--stats:hover .stat:nth-child(3) { --rot: -6deg; --tx: calc(12 * var(--u)); --ty: calc(8 * var(--u)); }
  /* the card under the cursor is picked up */
  .desk-item--stats .stat:hover {
    --lift: calc(8 * var(--u));
    z-index: 4;
    transition-delay: 0ms;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .7),
      inset 0 0 0 1px rgba(40, 30, 20, .06),
      0 2px 4px rgba(0, 0, 0, .18),
      0 14px 30px rgba(0, 0, 0, .34);
  }
}
.desk-item--stats:focus-visible .stat:nth-child(1) { --rot: -9deg; --tx: calc(-8 * var(--u)); --ty: calc(4 * var(--u)); }
.desk-item--stats:focus-visible .stat:nth-child(2) { --rot: 8deg;  --tx: calc(4 * var(--u));  --ty: calc(-12 * var(--u)); }
.desk-item--stats:focus-visible .stat:nth-child(3) { --rot: -6deg; --tx: calc(12 * var(--u)); --ty: calc(8 * var(--u)); }
.desk-item--stats:active .stats { scale: .97; }
@media (prefers-reduced-motion: reduce) {
  .stat { transition: box-shadow 200ms ease; }
}

/* ── publications (paper cards, as in the hero stats on main) ── */
.papers {
  position: relative;
  display: block;
  aspect-ratio: 200 / 150;
}
.paper {
  position: absolute;
  bottom: 0;
  left: calc(50% - 52 * var(--u));
  display: flex;
  flex-direction: column;
  width: calc(104 * var(--u));
  height: calc(136 * var(--u));
  padding: calc(11 * var(--u)) calc(12 * var(--u));
  border-radius: calc(9 * var(--u));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .1) inset, 0 6px 18px rgba(0, 0, 0, .28);
  transform-origin: 50% 100%;
  transition: translate .55s var(--settle), rotate .55s var(--settle);
}
.paper--a { background: #f3ead8; color: #4a4030; rotate: -9deg; translate: calc(-30 * var(--u)) 0; z-index: 1; }
.paper--b { background: #e8e4f2; color: #3a3348; rotate: 8deg;  translate: calc(30 * var(--u)) 0;  z-index: 2; }
.paper--c { background: #e3ece6; color: #2e4a3a; rotate: 0deg;  translate: 0 calc(-10 * var(--u)); z-index: 0; }
.paper__title {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-size: calc(12 * var(--u));
  line-height: 1.15;
  letter-spacing: -.02em;
}
.paper__body {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--u));
  margin-top: calc(12 * var(--u));
  opacity: .48;
}
.paper__body i {
  display: block;
  height: 1px;
  background: currentColor;
}
.paper__body i:nth-child(1) { width: 100%; }
.paper__body i:nth-child(2) { width: 84%; }
.paper__body i:nth-child(3) { width: 68%; }
.paper__body i:nth-child(4) { width: 90%; }
.desk-item--papers:is(:hover, :focus-visible) .paper--a { rotate: -15deg; translate: calc(-46 * var(--u)) calc(-4 * var(--u)); }
.desk-item--papers:is(:hover, :focus-visible) .paper--b { rotate: 14deg;  translate: calc(46 * var(--u)) calc(-4 * var(--u)); }
.desk-item--papers:is(:hover, :focus-visible) .paper--c { translate: 0 calc(-24 * var(--u)); }
.papers__count {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: calc(8 * var(--u));
  margin-top: calc(14 * var(--u));
  font-size: calc(10 * var(--u));
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.papers__count b {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-size: calc(19 * var(--u));
  letter-spacing: -.02em;
  text-transform: none;
  color: var(--text);
}
.desk-item--papers .desk-tag { top: calc(100% + 8 * var(--u)); }

/* ── phones (Mira, Spacio) ─────────────────────────────────── */
.phone {
  position: relative;
  display: block;
  aspect-ratio: 854 / 1744;
}
.phone__poster,
.phone__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* ── device (Vera, Android) ────────────────────────────────── */
.device {
  position: relative;
  display: block;
  aspect-ratio: 854 / 1744;
  padding: calc(5 * var(--u));
  border-radius: calc(20 * var(--u));
  background: linear-gradient(150deg, #3a3a40, #1b1b1f 45%, #2a2a30);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}
.device__screen {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  border-radius: calc(15 * var(--u));
  background: #f4f2f8;
}
.device__screen::after {
  content: "";
  position: absolute;
  top: calc(7 * var(--u));
  left: 50%;
  z-index: 2;
  width: calc(7 * var(--u));
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  background: #111;
}

/* ── folders (Plotline, Murmur) ────────────────────────────── */
.folder {
  --tint-a: rgba(120, 118, 190, .42);
  --tint-b: rgba(48, 46, 82, .62);
  --back: #2c2d3e;
  position: relative;
  display: block;
  aspect-ratio: 290 / 228;
  perspective: 900px;
}
.desk-item--builds .folder {
  --tint-a: rgba(84, 72, 230, .42);
  --tint-b: rgba(22, 16, 92, .66);
  --back: #23214a;
}
.desk-item--client .folder {
  --tint-a: rgba(46, 140, 128, .4);
  --tint-b: rgba(8, 52, 48, .68);
  --back: #173634;
}
.folder__back {
  position: absolute;
  inset: 8% 0 0;
  border-radius: calc(14 * var(--u));
  background: linear-gradient(var(--back), color-mix(in srgb, var(--back) 70%, #000));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.folder__back::before {
  content: "";
  position: absolute;
  left: calc(10 * var(--u));
  top: calc(-14 * var(--u));
  width: 36%;
  height: calc(28 * var(--u));
  border-radius: calc(10 * var(--u)) calc(10 * var(--u)) 0 0;
  background: var(--back);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.folder__sheet {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 4%;
  height: 62%;
  overflow: hidden;
  border-radius: calc(6 * var(--u));
  background: #0f0f14;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08);
  transition: translate .6s var(--settle), rotate .6s var(--settle);
}
.folder__sheet video,
.folder__sheet img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.folder__sheet--b {
  left: 13%;
  right: 4%;
  top: 7%;
  rotate: 3deg;
  opacity: .7;
}
.folder__front {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 64%;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 calc(20 * var(--u)) calc(18 * var(--u));
  border-radius: calc(14 * var(--u));
  background:
    radial-gradient(120% 90% at 25% 0%, rgba(255, 255, 255, .16), transparent 55%),
    linear-gradient(165deg, var(--tint-a), var(--tint-b));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    inset 0 0 0 1px rgba(255, 255, 255, .07);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  transform-origin: 50% 100%;
  transition: transform .6s var(--settle);
}
.folder__name {
  font-family: "Fraunces", Georgia, serif;
  font-size: calc(26 * var(--u));
  color: var(--text);
  letter-spacing: -.01em;
}
.folder__arrow {
  display: grid;
  place-items: center;
  width: calc(28 * var(--u));
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .2);
  color: var(--text);
  font-size: calc(13 * var(--u));
}
.desk-item--folder:is(:hover, :focus-visible) .folder__sheet--a { translate: 0 calc(-30 * var(--u)); }
.desk-item--folder:is(:hover, :focus-visible) .folder__sheet--b { translate: calc(6 * var(--u)) calc(-16 * var(--u)); rotate: 5deg; }
.desk-item--folder:is(:hover, :focus-visible) .folder__front { transform: rotateX(-12deg); }

/* weekend builds: three projects in one folder; on hover they rise into a fan above it */
.desk-fan { cursor: grab; }
.desk-fan .folder__sheet--link {
  cursor: pointer;
  opacity: 1;
  left: 16%;
  right: 16%;
  top: 6%;
  height: 54%;
  transform-origin: 50% 100%;
  transition: translate .65s var(--settle), rotate .65s var(--settle), scale .65s var(--settle), box-shadow .3s var(--ease);
}
.desk-fan .folder__sheet--c { rotate: -4deg; translate: calc(-8 * var(--u)) 0; background: #0b0b0f; }
.desk-fan .folder__sheet--b { rotate: 4deg;  translate: calc(8 * var(--u)) 0; }
.desk-fan .folder__sheet--a { rotate: 0deg; }
.desk-fan:is(:hover, :focus-within, .is-open) .folder__sheet--c { translate: calc(-92 * var(--u)) calc(-96 * var(--u)); rotate: -11deg; scale: 1.08; }
.desk-fan:is(:hover, :focus-within, .is-open) .folder__sheet--a { translate: 0 calc(-128 * var(--u)); rotate: 0deg; scale: 1.08; }
.desk-fan:is(:hover, :focus-within, .is-open) .folder__sheet--b { translate: calc(92 * var(--u)) calc(-96 * var(--u)); rotate: 11deg; scale: 1.08; }
.desk-fan:is(:hover, :focus-within, .is-open) .folder__front { transform: rotateX(-10deg); }
.desk-fan .folder__sheet--link:is(:hover, :focus-visible) {
  z-index: 3;
  outline: none;
  scale: 1.16 !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .45), 0 16px 34px rgba(0, 0, 0, .5);
}
.folder__chip {
  position: absolute;
  left: calc(8 * var(--u));
  top: calc(8 * var(--u));
  z-index: 2;
  padding: calc(3 * var(--u)) calc(8 * var(--u));
  border-radius: 999px;
  background: rgba(12, 12, 16, .78);
  color: var(--text);
  font-size: calc(10 * var(--u));
  line-height: 1.3;
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.folder__chip .live { font-style: normal; color: #4ade80; font-size: .8em; }
.desk-fan:is(:hover, :focus-within, .is-open) .folder__chip { opacity: 1; transition-delay: .15s; }
.desk-fan .folder__name { font-size: calc(21 * var(--u)); white-space: nowrap; }

/* client work holds two sheets: they fan to either side */
.desk-item--client .folder__sheet--c { translate: calc(-6 * var(--u)) 0; }
.desk-item--client:is(:hover, :focus-within, .is-open) .folder__sheet--c { translate: calc(-70 * var(--u)) calc(-92 * var(--u)); rotate: -8deg; }
.desk-item--client:is(:hover, :focus-within, .is-open) .folder__sheet--b { translate: calc(70 * var(--u)) calc(-92 * var(--u)); rotate: 8deg; }

/* ── sketchbook ────────────────────────────────────────────── */
.sketchbook-obj {
  position: relative;
  display: block;
  aspect-ratio: 200 / 266;
}
.sketchbook-obj__sheet {
  position: absolute;
  right: -7%;
  top: -5%;
  width: 72%;
  aspect-ratio: 3 / 2.2;
  padding: calc(5 * var(--u));
  background: var(--paper);
  rotate: 6deg;
  transition: translate .6s var(--settle), rotate .6s var(--settle);
}
.sketchbook-obj__sheet--2 {
  right: auto;
  left: -5%;
  top: 10%;
  width: 52%;
  aspect-ratio: 3 / 3.8;
  rotate: -8deg;
}
.sketchbook-obj__sheet img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(.35);
}
.sketchbook-obj__cover {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  border-radius: 0 calc(10 * var(--u)) calc(10 * var(--u)) 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .12) calc(18 * var(--u)), transparent calc(28 * var(--u))),
    radial-gradient(ellipse at 30% 16%, rgba(139, 92, 246, .26), transparent 42%),
    radial-gradient(ellipse at 88% 92%, rgba(0, 0, 0, .4), transparent 48%),
    linear-gradient(165deg, #3a3348 0%, #221c2c 46%, #16131c 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .16),
    inset 0 1px 0 rgba(255, 255, 255, .22);
}
.sketchbook-obj__stamp {
  display: grid;
  gap: calc(9 * var(--u));
  color: #efe7d8;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-size: calc(24 * var(--u));
  letter-spacing: -.04em;
  line-height: 1;
  text-align: center;
}
.sketchbook-obj__stamp small {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: calc(9 * var(--u));
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(239, 231, 216, .58);
}
.desk-item--sketchbook:is(:hover, :focus-visible) .sketchbook-obj__sheet { translate: calc(18 * var(--u)) calc(-20 * var(--u)); rotate: 9deg; }
.desk-item--sketchbook:is(:hover, :focus-visible) .sketchbook-obj__sheet--2 { translate: calc(-16 * var(--u)) calc(-10 * var(--u)); rotate: -12deg; }

/* ── CipherPal (3D) ────────────────────────────────────────── */
.desk-item--cipherpal .desk-obj { filter: none; }
.cipherpal-3d {
  position: relative;
  display: block;
  aspect-ratio: 1;
}
.cipherpal-3d canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}
.cipherpal-3d__fallback {
  position: absolute;
  left: 12%;
  top: 22%;
  width: 76%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
}
.cipherpal-3d:is(.is-loading, .is-live) .cipherpal-3d__fallback { display: none; }
.cipherpal-3d.is-live canvas { animation: cipherpal-in .6s var(--ease) both; }
@keyframes cipherpal-in { from { opacity: 0; } }

/* ── mobile: the whole desk in one screen ─────────────────────
   The stage takes the screen's height; one unit scales every
   object so folders, phones, headline and the rest all fit.  */
@media (max-width: 899px) {
  .hero.hero--desk { padding: 4px 0 0; overflow: visible; }
  .desk {
    --u: calc(100vw / 512);
    height: calc(100svh - var(--site-header-h) - 8px);
    min-height: 560px;
    max-height: 900px;
  }
  .desk-rings i { top: 49%; }
  .desk-center { top: 46.5%; width: 88%; }
  .desk-center .eyebrow { margin-bottom: 10px; font-size: 10px; }
  .hero--desk .hero-title { font-size: clamp(24px, 7.2vw, 32px); }
  .desk-center .eyebrow { letter-spacing: .12em; }
  .desk-stats li { padding: 0 11px; }
  .desk-hint { display: none; }
  .desk-stats { margin-top: 14px; }
  .desk-stats li { display: grid; justify-items: center; gap: 1px; padding: 0 14px; font-size: 10.5px; }
  .desk-stats b { margin: 0; font-size: 17px; }

  .desk-item { --scale: 1; --u: calc(min(100vw / 600, (100svh - 80px) / 1250)); cursor: pointer; }
  .desk-tag { display: none; }

  /* the desktop quadrants, each a small overlapping cluster */
  /* top left — phones fanned, Plotline in front */
  .desk-item--mira       { --x: 6.5%; --y: 7%;   --w: 122; --r: -13deg; --k: 0; }
  .desk-item--plotline   { --x: 19%;  --y: 4%;   --w: 128; --r: -3deg;  --k: 1; --z: 4; }
  .desk-item--vera       { --x: 32.5%; --y: 2%;   --w: 122; --r: 9deg;   --k: 2; }
  /* top right — the folders stacked, Weekend builds in front */
  .desk-item--client     { --x: 57%;  --y: 4%;   --w: 186; --r: -5deg;  --k: 3; }
  .desk-item--builds     { --x: 62%;  --y: 16%;  --w: 192; --r: 6deg;   --k: 4; --z: 3; }
  /* bottom — the puck left, the sketchbook right,
     the papers centred below them */
  .desk-item--cipherpal  { --x: 3%;   --y: 63%;  --w: 250; --r: 0deg;   --k: 5; }
  .desk-item--sketchbook { --x: 63%;  --y: 61.5%;  --w: 150; --r: -3deg;  --k: 6; }
  .desk-item--papers     { --x: 32%;  --y: 76.5%;  --w: 226; --r: 0deg;   --k: 7; --z: 3; }
  .desk-item--cipherpal .cipherpal-3d { aspect-ratio: 1.25; }
  .desk-item--papers .papers__count { display: none; }
  .desk-fan .folder__name { font-size: calc(17 * var(--u)); }
}

/* mobile stats: three equal columns, so the dividers sit symmetric around the centre */
@media (max-width: 899px) {
  .desk-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(100%, 300px);
    margin-inline: auto;
  }
  .desk-stats li { padding: 0 6px; text-align: center; }
}

/* touch: no text selection or callout while holding an object */
@media (hover: none) {
  .desk-item { -webkit-touch-callout: none; }
  .desk-item img, .desk-item video { -webkit-user-drag: none; }
  /* a carried object moves on its own layer; its shadow and glow stay as they are,
     so nothing has to repaint while it follows the finger */
  .desk-item.is-dragging { will-change: transform; }
  .desk-item.is-dragging .desk-obj {
    filter: drop-shadow(0 calc(4 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, .4))
            drop-shadow(0 calc(16 * var(--u)) calc(28 * var(--u)) rgba(0, 0, 0, .32));
    transition: translate .3s var(--settle), rotate .3s var(--settle);
  }
  .desk-item.is-dragging::before { display: none; }
}
/* the page holds still while an object is carried */
.is-desk-carrying,
.is-desk-carrying body {
  overflow: hidden;
  overscroll-behavior: none;
}

/* an open folder lifts above everything on the desk, its sheets above its own front */
.desk-fan.is-open { z-index: 60 !important; }
.desk-fan.is-open .folder__sheet--link { z-index: 3; }
.desk-fan.is-open .folder__chip { opacity: 1; }

/* mobile: the folders sit at the top, so their sheets fan down over the headline */
@media (max-width: 899px) {
  .desk-fan.is-open .folder__front { transform: none; }
  .desk-item--builds.is-open .folder__sheet--c { translate: calc(-150 * var(--u)) calc(150 * var(--u)); rotate: -3deg; scale: 1.3; }
  .desk-item--builds.is-open .folder__sheet--a { translate: calc(-140 * var(--u)) calc(265 * var(--u)); rotate: 2deg;  scale: 1.3; }
  .desk-item--builds.is-open .folder__sheet--b { translate: calc(-150 * var(--u)) calc(380 * var(--u)); rotate: -2deg; scale: 1.3; }
  .desk-item--client.is-open .folder__sheet--c { translate: calc(-140 * var(--u)) calc(210 * var(--u)); rotate: -3deg; scale: 1.3; }
  .desk-item--client.is-open .folder__sheet--b { translate: calc(-130 * var(--u)) calc(325 * var(--u)); rotate: 2deg;  scale: 1.3; }
  .desk-fan.is-open .folder__sheet--link { box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 18px 40px rgba(0, 0, 0, .6); }
}

/* while a folder is open, the rest of the desk steps back */
.desk-item,
.desk-center { transition-property: transform, opacity, filter; }
.desk:has(.desk-fan.is-open) :is(.desk-item:not(.is-open), .desk-center) {
  filter: blur(1.5px) brightness(.32) saturate(.6);
  transition: filter .25s cubic-bezier(.23, 1, .32, 1), transform .8s var(--ease);
}

/* ── hover label: one shared card, same gap and shape for every object ── */
.desk-tag { display: none !important; }
.desk-label {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 70;
  min-width: 200px;
  max-width: 280px;
  padding: 10px 14px 11px;
  border-radius: 12px;
  border: 1px solid var(--line-2);
  background: rgba(16, 16, 21, .9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.4;
  text-align: left;
  pointer-events: none;
  opacity: 0;
  translate: -50% 4px;
  transition: opacity 180ms cubic-bezier(.23, 1, .32, 1), translate 220ms cubic-bezier(.23, 1, .32, 1);
}
.desk-label.is-on { opacity: 1; translate: -50% 0; }
.desk-label b {
  display: flex;
  align-items: center;
  margin-bottom: 2px;
  font-family: "Fraunces", Georgia, serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--text);
}
.desk-label .live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 8px;
  padding: 1px 7px;
  border: 1px solid rgba(74, 222, 128, .35);
  border-radius: 100px;
  font-family: "Inter", sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  font-style: normal;
  color: #4ade80;
}
.desk-label .live::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
}
@media (max-width: 899px) { .desk-label { display: none; } }

/* phones keep some of their tilt when lifted */
.desk-item--phone:is(:hover, :focus-visible) .desk-obj,
.desk-item--phone.is-dragging .desk-obj { rotate: calc(var(--r) * -.4); }

/* About: no rule under the last item of each list */
.about-block li:last-child { border-bottom: 0; }

/* homepage: the header is always a light frosted glass, so the desk and its glow
   read through it rather than stopping at a hard edge */
body:has(.hero--desk) .site-header {
  background: color-mix(in srgb, var(--bg) 40%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
}