/* ------------------------------------------------------------------
   Desk: the page background for index.html and classic.html.
   A solid walnut desk seen from straight above, lit by a desk lamp that
   stands just off-screen to the top-left, so objects on it cast shadows
   toward the bottom-right.

   assets/desk.webp is a photo-style tile of three walnut boards glued into
   one slab (2400x1800 px, drawn at 1600x1200 CSS px so it stays crisp on
   2x screens; boards ~410/375/415 CSS px wide, about 15-17 cm next to the
   9 cm console). Flat-sawn cathedrals, half-cathedrals and straighter grain,
   pores and fibre streaks; it tiles seamlessly both ways (the tile's top and
   bottom edge is a glue joint) and is generated by a script, not a photo.
   The tile is the desk in the room's ambient light. The lamp is CSS,
   layered on top (top layer first):
     1. reflection   the lamp's broad, soft reflection in the satin finish,
                     just inside the top-left corner (screen, faint)
     2. lamp pool    a warm gain on the wood (color-dodge with a fixed tint,
                     so it multiplies the tile: gain = 1 + alpha * c/(1-c)).
                     The alpha stops follow a real lamp's falloff,
                     h / (r^2 + h^2)^1.5, eased to nothing at the shade's
                     cut-off. Centred off-screen top-left, wider than tall.
     3. far side     the right side of the desk sits further from the lamp
                     (multiply), down the whole page
     4. the boards   the tile, repeating both ways
   The lamp layers are sized in --u (1vmax, capped at 15px) and anchored to
   the top-left of the page, so on tall pages (classic.html) the pool stays
   with the first screen and the rest of the desk continues in ambient
   light, without a seam. The tile is authored at the ambient level, so
   --wood (its average) is the colour of the unlit desk.

   The site always shows this light design, even when the device is set
   to dark mode. color-scheme: only light tells browsers not to apply
   their own automatic darkening, which would turn the papers dark.

   Contrast, measured on the bare desk behind the intro and the footer of
   index.html?c=about at 1280x800, 1440x900 and 1920x1080: cream #f4ead8 is
   at least 5.3:1 on the single lightest pixel (top-left, under the lamp)
   and 7-8:1 on the average; muted #cdbda3 is at least 5.0:1 on the
   average desk colour behind the intro paragraph, 5.6:1+ at the footer.
------------------------------------------------------------------- */
:root {
  color-scheme: only light;
  --wood: #452c1b; /* average colour of the tile, also the fallback */
  /* the lamp's tint: at full strength the pool lifts red 1.75x,
     green 1.65x, blue 1.52x (warm tungsten against a neutral room) */
  --lamp: 109, 100, 87;
  --lamp-sheen: 255, 240, 222;
  /* the lamp's unit of size: scales with the screen, but stops growing past
     a 1500px-wide window, like the objects on the desk */
  --u: min(1vmax, 15px);
}

html {
  background-color: var(--wood);
  background-image:
    radial-gradient(calc(34 * var(--u)) calc(22 * var(--u)) at calc(8 * var(--u)) 0, rgba(var(--lamp-sheen), 0.05), rgba(var(--lamp-sheen), 0.02) 50%, rgba(var(--lamp-sheen), 0)),
    radial-gradient(calc(30 * var(--u)) calc(22 * var(--u)) at calc(17 * var(--u)) calc(7 * var(--u)), rgba(var(--lamp-sheen), 0.03), rgba(var(--lamp-sheen), 0)),
    radial-gradient(calc(150 * var(--u)) calc(112 * var(--u)) at calc(-14 * var(--u)) calc(-18 * var(--u)),
      rgba(var(--lamp), 1) 0%,
      rgba(var(--lamp), 0.953) 10%,
      rgba(var(--lamp), 0.831) 20%,
      rgba(var(--lamp), 0.671) 30%,
      rgba(var(--lamp), 0.509) 40%,
      rgba(var(--lamp), 0.367) 50%,
      rgba(var(--lamp), 0.252) 60%,
      rgba(var(--lamp), 0.161) 70%,
      rgba(var(--lamp), 0.085) 80%,
      rgba(var(--lamp), 0.016) 90%,
      rgba(var(--lamp), 0) 100%),
    linear-gradient(to right, rgba(150, 140, 130, 0) 35%, rgba(150, 140, 130, 0.35)),
    url("../assets/desk.webp");
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 1600px auto;
  background-position: 0 0, 0 0, 0 0, 0 0, 50% 0;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
  background-blend-mode: screen, screen, color-dodge, multiply, normal;
  image-rendering: auto;
}

/* the desk lives on the root; the body stays see-through so it shows */
body {
  background: none;
  image-rendering: auto;
}

/* phones: a smaller tile, so the boards stay in scale with the smaller objects */
@media (max-width: 720px) {
  html {
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 1200px auto;
  }
}