/*
  The pencil sketch (generated by scripts/iso-scene.mjs into src/partials/scene.svg.njk and glyphs.svg.njk).
  Hatch <pattern>s fill the faces and the ink paths draw the edges, all baked into the SVG: by day the drawing needs
  nothing but the stroke styles below. .is-dusk / .is-night on a layer (site.js sets them one layer at a time) swap the
  window panes and the lamps (generated scene-vars.css); on the scene itself the same classes drive the desk-lamp
  overlay (base.css). Only fill, opacity and transform change at page time.
  The stroke rules carry no ancestor: the service glyphs are <symbol>s drawn through <use>, and a rule reaches their
  clones only when it matches the symbol content where it stands.
*/
/* A stack of sheets, one <svg> per layer (plus the ghost outlines), all on the same viewBox: a sheet moves and fades on the
   compositor alone and no other sheet repaints. The first sheet stays in flow and gives the stack its height. */
.iso { display: block; position: relative; width: 100%; }
.iso .sheet { display: block; width: 100%; height: 100%; overflow: visible; }
.iso .sheet + .sheet { position: absolute; inset: 0; }

/* Ink: a wobbly stroke on every edge, a lighter offset pass on the long ones, construction lines, scribbled canopies */
.ink, .ink2, .cl, .scr, .dim { fill: none; stroke: var(--sheet-ink); stroke-linecap: round; stroke-linejoin: round; }
.ink { stroke-width: 2.1; stroke-opacity: .85; }
.ink2 { stroke-width: 1.3; stroke-opacity: .45; }
.cl { stroke-width: .7; stroke-opacity: .35; }
.scr { stroke-width: 1.7; stroke-opacity: .72; }
.scr2 { stroke-width: 1.2; stroke-opacity: .45; }

/* Ruled lines: deck joints, board cladding, the solar panel grid, vine wires, pool ripples, mullions, posts, rails */
.joint, .board, .panel-line, .wire, .ripple { stroke: var(--sheet-ink); stroke-opacity: .35; stroke-width: .8; stroke-linecap: round; }
.mullion { stroke: var(--sheet-ink); stroke-opacity: .6; stroke-width: 1.1; }
.handle { stroke: var(--sheet-ink); stroke-opacity: .7; stroke-width: 1.3; stroke-linecap: round; }
.post { stroke: var(--sheet-ink); stroke-opacity: .75; stroke-width: 1.3; stroke-linecap: round; }
.rail { fill: none; stroke: var(--sheet-ink); stroke-opacity: .8; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.trunk { stroke: var(--sheet-ink); stroke-opacity: .8; stroke-width: 2.6; stroke-linecap: round; }
.trunk-sh { stroke: var(--sheet-ink); stroke-opacity: .3; stroke-width: 2.2; stroke-linecap: round; }
.lamp { stroke: var(--sheet-ink); stroke-opacity: .7; stroke-width: 1; }

/* Dimension lines under the island: thin graphite, the sizes in the page's serif */
.dim { stroke-opacity: .6; stroke-width: 1.1; }
.dim-t { fill: var(--sheet-ink); fill-opacity: .7; font: italic 500 24px var(--font-serif); letter-spacing: .04em; }

/* Ghost massing: dashed graphite outlines, shown by site.js where a layer has still to land (motion.css) */
.iso .ghost { opacity: 0; }
.gh { fill: none; stroke: var(--sheet-ink); stroke-opacity: .4; stroke-width: 1; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }

/* The service glyphs: the same sketch at 3–4 rem on the dark rows, so the paper reads as a small cut-out and the lines a touch heavier */
.glyph-defs .ink { stroke-width: 2.6; stroke-opacity: .9; }
.glyph-defs .ink2 { stroke-width: 1.6; }