/* Drawing layer (assets/js/drawing.js): thin construction lines, circles, the horizon and the plane.
   The SVGs sit behind the page content; the content wraps are lifted above them. */

.drawing { position: absolute; left: 0; pointer-events: none; fill: none; overflow: hidden; z-index: 1; }
.drawing--lines { z-index: 3; }   /* above the content, below the sticky section nav (which is see-through until it sticks) */
.hero .wrap, .statbar .wrap, #work > .wrap, .case-hero .wrap, .part > .wrap, .about-intro > .wrap, .wrap:has(> .deck), .section--dark > .wrap, .next-section > .wrap { position: relative; z-index: 2; }

/* room under the stats for the horizon and the scroll cue */
.scrollzone { height: 130px; }
@media (max-width: 860px) { .scrollzone { height: 96px; } }

.drawing__line { stroke: color-mix(in srgb, var(--color-ink) 13%, transparent); stroke-width: 1; }
.drawing__line-dark { stroke: rgba(255, 255, 255, 0.1); stroke-width: 1; }
.drawing__dash { stroke: color-mix(in srgb, var(--color-ink) 20%, transparent); stroke-width: 1; stroke-dasharray: 8 7; }
.drawing__dash-fine { stroke: color-mix(in srgb, var(--color-ink) 14%, transparent); stroke-width: 1; stroke-dasharray: 4 6; }
.drawing__blue { stroke: var(--color-accent); stroke-width: 1.5; }
.drawing__star { fill: var(--color-accent); }
.drawing__band { fill: color-mix(in srgb, var(--color-accent) 13%, transparent); }
.drawing__band-edge { stroke: var(--color-accent); stroke-width: 1.5; }
.drawing__band-inner { stroke: color-mix(in srgb, var(--color-ink) 45%, transparent); stroke-width: 1.25; }
.drawing__trail { stroke: var(--color-accent); stroke-width: 1.25; stroke-dasharray: 5 5; opacity: 0.8; }
.drawing__cue { font-family: var(--font-mono); font-size: 11px; fill: var(--color-ink); }
@media print { .drawing { display: none; } }