/* Show the work: meeple (work-show/meeple.js; tokens.css, --work-show; Keyan, 2026-11-11: "mkae a new ver of home w no
   text at the top, and the bento meeple peeking above the fold. give controls voer space between projects and orchard").
   Only two things change: the line over the scene leaves the screen, and the projects come up by --work-meeple-pull,
   which meeple.js measures so Bento's meeple sits --work-meeple-gap under the scene. The scene and the rest
   stay as they are (Keyan, 2026-11-11: "dont change anything like autumn scene position"). */

/* The line stays for screen readers and search, as the page's heading; it only leaves the screen. --work-meeple-text on
   keeps it (Keyan, 2026-11-11: "give a toggle for the text at the top"); meeple.js puts the token on the html as
   data-meeple-text. */
html[data-work-show="meeple"]:not([data-meeple-text="on"]) .hero .status {
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* No down chevron in meeple (Keyan, 2026-11-12: "remove this chevron on meeple ver"): Bento's meeple over the card's
   foot already says there is more below. Diagonal peek keeps it, as its Figma frame does. */
html[data-work-show="meeple"] .hero .down {
  display: none;
}

/* Diagonal peek (meeple.js) pulls the projects up the same way and keeps the line. */
html:is([data-work-show="meeple"], [data-work-show="diagonal"]) .projects {
  position: relative;
  margin-top: calc(-1 * var(--work-meeple-pull, 0px));
}