/* Chris's desk under the Desk's columns (Chris, 29 Oct: "we are wasting place for my desk"; then "the left and right edges are
   cut shorter", an iPad and a phone sideways, a Matrix desk). The picture is Unreal's (tools/desk-photo): a walnut desk seen
   from above, a leather inlay where the columns lie, his things on both sides. desk-photo.js scales the whole 2140 by 1600
   canvas to the window (never cut at its sides) and draws its live parts at the places layout.json gives.
   Shown in the dark theme on a landscape screen 700 px wide or more, on the Desk (never the Yacht). On an iPad sideways the
   columns narrow a little so the desk shows at both edges; on a phone sideways the columns' own 640 px leave it room. Under the
   Matrix switch the desk is the Matrix desk (matrix.webp and a rain of code). */
#desk-photo { display: none; }
/* The fade's place is each column's own (desk-photo.js sets --dp-tuck on the columns, 5 Nov): set on the page's root, as it was, every step
   of the header tucking away restyled the whole page under it, a frame at a time while he scrolled. Neither is handed down to what the
   column holds. */
@property --dp-tuck { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --dp-top { syntax: '<length>'; inherits: false; initial-value: 0px; }
@media (min-width: 700px) and (orientation: landscape) and (prefers-color-scheme: dark) {
  html.desk-photo-on body:not(.in-room):has(#desk:not([hidden])) { background: transparent; }
  html.desk-photo-on:has(body:not(.in-room) #desk:not([hidden])) { background: #0b0907; }
  html.desk-photo-on[data-mx='on']:has(body:not(.in-room) #desk:not([hidden])) { background: #010a05; }
  html.desk-photo-on body:not(.in-room):has(#desk:not([hidden])) #desk-photo { display: block; }
  /* The header lies on the desk itself, no panel behind it (Chris: a blurred glass "doesn't fit in well"): its words carry
     a soft shadow, and the columns fade out as they pass under it, the fade following the header as it tucks away
     (--dp-tuck, copied from the header's own --tuck by desk-photo.js). */
  html.desk-photo-on.desk-fit body:not(.in-room) .page-head { background: transparent; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85); }
  html.desk-photo-on.desk-fit body:not(.in-room) #desk .desk-col {
    --dp-top: calc(var(--head-h, 0px) - var(--dp-tuck, 0px));
    -webkit-mask-image: linear-gradient(to bottom, transparent calc(var(--dp-top) - 22px), #000 calc(var(--dp-top) + 14px));
    mask-image: linear-gradient(to bottom, transparent calc(var(--dp-top) - 22px), #000 calc(var(--dp-top) + 14px));
  }
  html.desk-photo-on.desk-fit body:not(.in-room)::before { background: transparent; }
  /* Under everything: a negative layer paints over the root's background and under the body's own boxes, and the body is
     made transparent above, so no other element's position is touched. */
  #desk-photo { position: fixed; inset: 0; z-index: -1; height: var(--app-h, auto); overflow: hidden; pointer-events: none; background: #0b0907; }
  .dp-canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; background: #0b0907 0 0 / 100% 100% no-repeat; }
  .dp-live { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; }
  .dp-hand { position: absolute; left: 0; top: 0; transform-origin: 0 0; background: #15110c; border-radius: 1px;
    box-shadow: 0.6px 1.2px 1.2px rgba(0, 0, 0, 0.45); }
  .dp-hand.dp-min { width: 1.6px; }
  .dp-hand.dp-hour { width: 2.4px; }
  .dp-pin { position: absolute; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #f3d9a0, #7a5a22); }
  /* The phone's screen: lit only while something waits on him, as a phone on a desk is. */
  .dp-screen { width: 600px; height: 1240px; border-radius: 60px; overflow: hidden; color: #f3f1ed;
    font: 500 40px/1.25 var(--font); background: linear-gradient(170deg, #1b2a36 0%, #0d1319 70%); opacity: 0;
    transition: opacity 1.2s ease; display: flex; flex-direction: column; padding: 90px 44px 0; box-sizing: border-box; gap: 26px;
    mix-blend-mode: screen; }
  .dp-screen.lit { opacity: 0.92; }
  .dp-screen .dp-time { font: 300 150px/1 var(--font); text-align: center; letter-spacing: -2px; }
  .dp-screen .dp-date { text-align: center; font-size: 36px; color: rgba(243, 241, 237, 0.75); margin-top: -10px; }
  .dp-note { background: rgba(243, 241, 237, 0.13); border-radius: 34px; padding: 26px 30px; }
  .dp-note b { display: block; font-size: 32px; color: #e5af4f; font-weight: 600; margin-bottom: 6px; }
  .dp-note span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  /* The yellow pad and the sticky note: in his hand, ink that soaks a little into the paper. */
  .dp-pad { width: 760px; color: #1f2a52; font: 400 40px/1.55 'Segoe Print', 'Bradley Hand', 'Comic Sans MS', cursive;
    mix-blend-mode: multiply; opacity: 0.86; }
  .dp-pad ol { margin: 0; padding: 0 0 0 1.3em; }
  .dp-pad li { margin: 0 0 0.35em; }
  .dp-pad li.done { text-decoration: line-through; text-decoration-thickness: 3px; opacity: 0.55; }
  .dp-pad .dp-pad-head { font-size: 34px; opacity: 0.7; margin-bottom: 0.3em; }
  .dp-sticky { width: 300px; color: #1f2a52; font: 400 44px/1.3 'Segoe Print', 'Bradley Hand', 'Comic Sans MS', cursive;
    mix-blend-mode: multiply; opacity: 0.85; }
  /* His things: a button over each. Pointed at, the thing itself catches the light: its own pixels, seen through its mask,
     brighten and warm a little, and nothing round it changes (Chris: the first glow "isn't natural or blending in"). */
  .dp-spot { position: absolute; border: 0; padding: 0; margin: 0; background: none; cursor: pointer; pointer-events: auto;
    -webkit-tap-highlight-color: transparent; }
  .dp-lit { position: absolute; pointer-events: none; background-repeat: no-repeat; background-size: var(--dp-w, 2140px) var(--dp-h, 1600px);
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    filter: brightness(1.85) saturate(1.1) sepia(0.08); opacity: 0; transition: opacity 0.45s ease; }
  .dp-spot:hover + .dp-lit, .dp-spot:focus-visible + .dp-lit { opacity: 1; }
  .dp-spot:active + .dp-lit { opacity: 1; }
  /* by day the things are lit already: the light they catch is gentler */
  .dp-canvas.day .dp-lit { filter: brightness(1.3) saturate(1.06) sepia(0.05); }
  .dp-name { position: absolute; left: 50%; top: 100%; translate: -50% 6px; white-space: nowrap; pointer-events: none;
    font: 600 12px/1 var(--font); letter-spacing: 0.04em; color: rgba(243, 230, 207, 0.92);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 6px rgba(0, 0, 0, 0.7); opacity: 0; transition: opacity 0.3s ease 0.15s; }
  .dp-spot:hover .dp-name, .dp-spot:focus-visible .dp-name { opacity: 1; }
  .dp-spot:focus-visible { outline: 1px solid rgba(229, 175, 79, 0.7); outline-offset: 4px; border-radius: 8px; }
  /* The magnifying glass is a lens: under the pointer, the desk beneath it larger. */
  .dp-lens { position: absolute; border-radius: 50%; pointer-events: auto; opacity: 0; transition: opacity 0.3s ease;
    background-repeat: no-repeat; box-shadow: inset 0 0 18px 6px rgba(0, 0, 0, 0.45); }
  .dp-lens:hover { opacity: 1; }
  /* The Matrix desk: black glass, his things traced in green, the rain under them. */
  .dp-rain { position: absolute; inset: 0; width: 100%; height: 100%; display: none; opacity: 0.55; mix-blend-mode: screen; }
  .dp-canvas.mx .dp-rain { display: block; }
  .dp-canvas.mx .dp-lit { filter: brightness(2.2); }
  .dp-canvas.mx .dp-hand { background: #36ff8a; box-shadow: 0 0 4px rgba(54, 255, 138, 0.8); }
  .dp-canvas.mx .dp-pin { background: #c8ffe0; }
  .dp-canvas.mx .dp-screen { background: #021008; color: #c8ffe0; font-family: var(--mono); box-shadow: inset 0 0 0 6px rgba(54, 255, 138, 0.5); }
  .dp-canvas.mx .dp-note { background: rgba(54, 255, 138, 0.12); }
  .dp-canvas.mx .dp-note b { color: #36ff8a; }
  .dp-canvas.mx .dp-pad, .dp-canvas.mx .dp-sticky { color: #36ff8a; font-family: var(--mono); mix-blend-mode: screen; opacity: 0.95;
    text-shadow: 0 0 8px rgba(54, 255, 138, 0.6); }
  .dp-canvas.mx .dp-name { color: #c8ffe0; font-family: var(--mono); text-transform: uppercase; }
}
/* On an iPad sideways the three columns would fill the screen: they narrow so the desk shows at both edges. */
@media (min-width: 1000px) and (max-width: 1599px) and (orientation: landscape) and (prefers-color-scheme: dark) {
  html.desk-photo-on body:not(.in-room):has(#desk:not([hidden])) { max-width: calc(100vw - 2 * clamp(48px, 6vw, 120px)); }
}
@media (min-width: 700px) and (orientation: landscape) and (prefers-color-scheme: dark) and (prefers-reduced-motion: reduce) {
  .dp-screen, .dp-lit, .dp-name, .dp-lens { transition: none; }
}