/* The drawn sketchbook: menorah, moons, circles. Owner: lane "scene". Uses tokens only.
   Every drawing is stacked SVG layers (wash, then line and gold, then light), so a flickering flame
   repaints a small layer and never the filtered watercolour under it. Ink takes the page's text colour:
   wax on the night page, fineliner on the day page. */
.scene:empty { display: none; }

[data-scene="menorah"], [data-scene="circle"] { position: relative; width: 100%; margin-inline: auto; }
[data-scene="menorah"] { max-width: 34rem; aspect-ratio: 360 / 300; }
[data-scene="circle"] { max-width: 24rem; aspect-ratio: 1; }
/* Inside the hero circle the content lane sizes and places the menorah in the flow (base.css,
   .hero-circle [data-scene="menorah"]). Nothing here overrides that. */
.scene-layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }

/* line */
.scene .ink { fill: none; stroke: var(--fg); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.scene .ink.fine { stroke-width: 1.15; }
.scene .ink.hair { stroke-width: 0.8; }
.scene .ink.vine { stroke-width: 1.35; }

/* gold: the arms, cups and foot, then the flames and sparks (night page only) */
.scene .gold { fill: none; stroke: var(--gold); stroke-linecap: butt; }
.scene .gold-fill > path:not(.gold) { fill: var(--gold); }
.scene .spark, .scene .flame-outer { fill: var(--gold); }
.scene .flame-core { fill: var(--flame); }

/* watercolour, inside drawings only */
.scene .w-ultra { fill: var(--ultra); opacity: 0.34; }
.scene .w-violet { fill: var(--wash-violet); opacity: 0.32; }
.scene .w-violet-deep { fill: var(--wash-violet); opacity: 0.9; }
.scene .w-vine { fill: var(--wash-vine); opacity: 0.95; }
.scene .w-orange { fill: var(--wash-orange); opacity: 0.9; }
.scene .w-plum { fill: var(--plum); opacity: 0.32; }
[data-scene="circle"] .w-vine { opacity: 0.45; }
.scene .moon-dark { fill: var(--ink); opacity: 0.85; }

/* The reading band: a strip with its own room in the page, pinned to the top edge while you read. It has
   a solid page-coloured backing and a drawn rule, so text scrolls under it like under a page edge, and
   nothing ever sits beneath it at rest. Left: the small menorah, which is the basket. Right: the moons,
   which are the progress. It never takes a tap. */
.scene-moons {
  --band: 3rem;
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  height: var(--band); padding-block: var(--s-1) calc(var(--s-1) - 1.5px);
  background: var(--bg); border-bottom: 1.5px solid var(--fg-soft); pointer-events: none;
}
.scene-moons:empty { display: none; }
.scene-moons .scene-layer { position: static; display: block; height: 100%; width: auto; flex: none; }
.scene-mini-menorah { display: block; height: 100%; width: auto; flex: none; overflow: visible; }
.scene .moon-lit { fill: var(--fg); }
.scene .mini-gold { fill: none; stroke: var(--gold); stroke-width: 2.6; stroke-linecap: round; }
.scene .mini-candle { fill: none; stroke: var(--fg); stroke-width: 3.2; stroke-linecap: butt; }
/* Anchors and focused controls land below the band, not under it. */
html:has(.scene-moons:not(:empty)) { scroll-padding-top: calc(3rem + env(safe-area-inset-top, 0px) + var(--s-2)); }