/* Show the work: peek (work-show/peek.js; tokens.css, --work-show). The scene moves up and gets smaller, and the projects
   come up under it, so the top --work-peek-shown of Bento shows on the first screen, from its meeple down. What the card's
   foot cuts off is the cue. The ticker's dots stay off, as on the rest of the site
   (Keyan, 2026-11-10: "we dont have this in latest versions"). The hero keeps its full height, so the wind scene fits itself as it always does; the projects are
   pulled up over its empty foot by --work-peek, which peek.js measures and sets on the panel. */
/* The scene gets smaller (--work-peek-scene smaller), or keeps the Orchard's own size (same; Keyan, 2026-11-10: "make a
   ver of peek that doesnt change the orchards size"). peek.js puts the switch on the html as data-peek-scene. */
html[data-work-show="peek"]:not([data-peek-scene="same"]) {
  --scene-scale: var(--work-peek-scale);
}

/* The scene's middle moves up into the room above the peek: half the peek, less the room the status line takes. */
/* Same size moves nothing of the Orchard's: the scene keeps its place too (Keyan, 2026-11-11: "dont change anything
   like autumn scene position"); only the projects come up under it. */
html[data-work-show="peek"]:not([data-peek-scene="same"]) .hero {
  --scene-y: calc(40px - var(--work-peek, 300px) / 2);
}

html[data-work-show="peek"] .projects {
  position: relative;
  margin-top: calc(-1 * var(--work-peek, 300px));
}

/* The peek is the cue, so the chevron goes. */
html[data-work-show="peek"] .hero .down {
  display: none;
}

/* A phone: the scene is the rock with the sign over it and the red bush under it, whose middle sits 55.5px under the
   box's (wind.js, placeSides, under). */
@media (max-width: 560px) {
  html[data-work-show="peek"]:not([data-peek-scene="same"]) .hero {
    --scene-y: calc(40px - var(--work-peek, 344px) / 2 - 55.5px);
  }
}