/* The masthead art's colours, from the host's theme. A host sets these on the masthead (or any
   ancestor) from its own tokens; the fallbacks are a plain light theme.

     --masthead-accent    the animation's colour
     --masthead-bg        the page behind it
     --masthead-border    faint lines and flap edges
     --masthead-surface   the Solari board's flaps
     --masthead-mono      the Solari board's font
     --masthead-strength  the art's opacity: 0.55 sits behind a masthead's text; 1 is full
     --masthead-paint-1 to --masthead-paint-9
                          the paint palette, for the one animation in real colours (drips):
                          artists' pigments that read at half strength on light and dark alike

   The art fills its container, so the host places and sizes the container. */
.masthead-art {
  --_accent: var(--masthead-accent, #2563eb);
  --_bg: var(--masthead-bg, #ffffff);
  --_border: var(--masthead-border, #d4d4d8);
  --_surface: var(--masthead-surface, #f4f4f5);
  --_paint-1: var(--masthead-paint-1, #d4422f); /* cadmium red */
  --_paint-2: var(--masthead-paint-2, #e97a26); /* cadmium orange */
  --_paint-3: var(--masthead-paint-3, #e6b323); /* cadmium yellow */
  --_paint-4: var(--masthead-paint-4, #5e9b3c); /* sap green */
  --_paint-5: var(--masthead-paint-5, #23917a); /* viridian */
  --_paint-6: var(--masthead-paint-6, #2b8dc8); /* cerulean */
  --_paint-7: var(--masthead-paint-7, #4a52c4); /* ultramarine */
  --_paint-8: var(--masthead-paint-8, #8146b0); /* dioxazine violet */
  --_paint-9: var(--masthead-paint-9, #cc3f7e); /* quinacridone rose */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  color: color-mix(in srgb, var(--_accent) 25%, var(--_border));
  opacity: var(--masthead-strength, 0.55);
}

/* Where the page says it's dark (color-scheme: dark), the default paints are lifted a little, so
   they read at half strength on a dark page as on a light one. A site's own paints are kept. */
@supports (color: light-dark(#000, #fff)) {
  .masthead-art {
    --_paint-1: var(--masthead-paint-1, light-dark(#d4422f, #f2735e));
    --_paint-2: var(--masthead-paint-2, light-dark(#e97a26, #f7a04e));
    --_paint-3: var(--masthead-paint-3, light-dark(#e6b323, #f5cf55));
    --_paint-4: var(--masthead-paint-4, light-dark(#5e9b3c, #8cc767));
    --_paint-5: var(--masthead-paint-5, light-dark(#23917a, #4cc4a4));
    --_paint-6: var(--masthead-paint-6, light-dark(#2b8dc8, #5bb6ea));
    --_paint-7: var(--masthead-paint-7, light-dark(#4a52c4, #8790f0));
    --_paint-8: var(--masthead-paint-8, light-dark(#8146b0, #b483e0));
    --_paint-9: var(--masthead-paint-9, light-dark(#cc3f7e, #f07aaa));
  }
}

/* The circuit. #masthead-pulse, the glow, is art.svg's; #masthead-fade is the circuit's own. */
.masthead-circuit-traces { fill: none; stroke: url(#masthead-fade); stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; }
.masthead-circuit-nodes circle { fill: color-mix(in srgb, var(--_accent) 18%, var(--_bg)); opacity: 0.5; }
.masthead-glow { stop-color: var(--_accent); }
.masthead-spark { fill: var(--_accent); }
.masthead-trace { fill: none; stroke: color-mix(in srgb, var(--_accent) 45%, var(--_border)); stroke-width: 1; }
.masthead-circuit-lit { fill: none; stroke: var(--_accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0.75; }

/* The variants. */
.masthead-boids { opacity: 0.8; }
.masthead-terrainflight { opacity: 0.78; }
.masthead-terrain-horizon { fill: none; stroke: color-mix(in srgb, var(--_accent) 54%, var(--_bg)); stroke-width: 1.25; opacity: 0.48; }
.masthead-terrain-ridge { fill: none; stroke: color-mix(in srgb, var(--_accent) 68%, var(--_bg)); stroke-linecap: round; stroke-linejoin: round; }
.masthead-terrain-glow { fill: none; stroke: var(--_accent); stroke-linecap: round; stroke-linejoin: round; filter: blur(2px); }
.masthead-life { opacity: 0.5; }
.masthead-life-cells { fill: color-mix(in srgb, var(--_accent) 52%, var(--_bg)); shape-rendering: crispEdges; }
.masthead-signalnoise { fill: color-mix(in srgb, var(--_accent) 66%, var(--_bg)); shape-rendering: crispEdges; }
.masthead-noise-line { opacity: 0.35; }
.masthead-noise-scan { opacity: 0.3; }
.masthead-noise-band { opacity: 0.22; }
.masthead-fractal { fill: none; stroke: var(--_accent); stroke-linecap: round; stroke-linejoin: round; }
/* The fractal's lines are fine and the art is squashed to fit, so it's lifted out of the art's
   fade and its lines are a little heavier (ui-pudl #98). */
.masthead-art[data-masthead="fractal"] { opacity: max(var(--masthead-strength, 0.55), 0.85); }
.masthead-fractal-glow { opacity: 0.2; stroke-width: 5; }
.masthead-fractal-trunk { opacity: 0.8; stroke-width: 2; }
.masthead-fractal-branches { opacity: 0.66; stroke-width: 1.4; }
.masthead-fractal-twigs { opacity: 0.5; stroke-width: 1; }
.masthead-fractal-tips { opacity: 0.82; stroke: none; }
/* The Solari board, lifted out of the art's fade but kept behind the name: at the usual strength
   the layer holds it at 0.2, as approved on bytecode.news, rising to 1 at full strength. */
.masthead-art[data-masthead="solari"] { opacity: 1; }
.masthead-solari { opacity: clamp(0.2, (var(--masthead-strength, 0.55) - 0.55) / 0.45, 1); font: 700 20px var(--masthead-mono, ui-monospace, monospace); }
.masthead-solari-cell { fill: var(--_surface); stroke: var(--_border); stroke-width: 0.7; }
.masthead-solari-hinge { stroke: var(--_border); stroke-width: 0.6; }
.masthead-solari-glyph { fill: var(--_accent); }

/* Bytecode: hex in the accent, its heads brightest, and an instruction decoded now and then. */
.masthead-bytecode { font: 600 16px var(--masthead-mono, ui-monospace, monospace); }
.masthead-bytecode-glyph { fill: color-mix(in srgb, var(--_accent) 72%, var(--_bg)); }
.masthead-bytecode-head { fill: var(--_accent); filter: drop-shadow(0 0 1.5px color-mix(in srgb, var(--_accent) 70%, transparent)); }
.masthead-bytecode-note { fill: var(--_accent); font-size: 14px; font-weight: 500; }

/* Chase: the bird and the canine as cutouts, their legs, the dust behind them, and what befalls
   the canine (stars, an anvil, the train). */
.masthead-chase-piece { fill: color-mix(in srgb, var(--_accent) 14%, var(--_bg)); stroke: var(--_accent); stroke-width: 1.4; stroke-linejoin: round; }
.masthead-chase-legs, .masthead-chase-alarm, .masthead-chase-stars { fill: none; stroke: var(--_accent); stroke-width: 2.2; stroke-linecap: round; }
.masthead-chase-blur { fill: color-mix(in srgb, var(--_accent) 8%, transparent); stroke: var(--_accent); stroke-width: 1; stroke-opacity: 0.35; }
.masthead-chase-streaks { fill: none; stroke: var(--_accent); stroke-width: 1.2; stroke-linecap: round; stroke-opacity: 0.55; }
.masthead-chase-tunnel-mouth { fill: color-mix(in srgb, var(--_accent) 72%, var(--_bg)); stroke: var(--_accent); stroke-width: 1.4; }
.masthead-chase-ribs { fill: none; stroke: var(--_accent); stroke-width: 1.1; stroke-linecap: round; stroke-opacity: 0.8; }
.masthead-chase-eye { fill: var(--_accent); }
.masthead-chase-dust { fill: color-mix(in srgb, var(--_accent) 35%, var(--_border)); }
.masthead-chase-anvil { fill: color-mix(in srgb, var(--_accent) 55%, var(--_bg)); stroke: var(--_accent); stroke-width: 1.6; stroke-linejoin: round; }
.masthead-chase-train { fill: color-mix(in srgb, var(--_accent) 85%, var(--_bg)); font: 600 12px var(--masthead-mono, ui-monospace, monospace); }
.masthead-chase-words { fill: var(--_accent); font: 700 17px var(--masthead-mono, ui-monospace, monospace); }
.masthead-chase-marks { fill: none; stroke: var(--_accent); stroke-width: 3.2; stroke-linecap: round; }

/* City defense: trails from the top, rings where counter-missiles burst, cities along the foot. */
.masthead-citydefense { fill: none; }
.masthead-citydefense-ground { stroke: color-mix(in srgb, var(--_accent) 50%, var(--_border)); stroke-width: 1.2; }
.masthead-citydefense-base { stroke: color-mix(in srgb, var(--_accent) 70%, var(--_bg)); stroke-width: 1.3; }
.masthead-citydefense-city { fill: color-mix(in srgb, var(--_accent) 30%, var(--_bg)); stroke: var(--_accent); stroke-width: 1; }
.masthead-citydefense-rubble { fill: none; opacity: 0.6; }
.masthead-citydefense-trail { stroke: color-mix(in srgb, var(--_accent) 75%, var(--_bg)); stroke-width: 1; }
.masthead-citydefense-counter { stroke: color-mix(in srgb, var(--_accent) 45%, var(--_border)); stroke-width: 1; stroke-dasharray: 3 3; }
.masthead-citydefense-burst { fill: url(#masthead-pulse); stroke: var(--_accent); stroke-width: 1.2; }

/* Deadline: flat cutout pieces, outlined, with a paper-pale fill; the writer's limbs as strokes. */
.masthead-deadline-piece { fill: color-mix(in srgb, var(--_accent) 14%, var(--_bg)); stroke: var(--_accent); stroke-width: 1.4; stroke-linejoin: round; }
.masthead-deadline-limb { fill: none; stroke: var(--_accent); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.masthead-deadline-hair, .masthead-deadline-eye { fill: var(--_accent); }
.masthead-deadline-screen { fill: none; stroke: color-mix(in srgb, var(--_accent) 70%, var(--_bg)); stroke-width: 1.6; stroke-linecap: round; }
.masthead-deadline-bang { fill: none; stroke: var(--_accent); stroke-width: 2; stroke-linecap: round; }
.masthead-deadline-anvil { fill: color-mix(in srgb, var(--_accent) 55%, var(--_bg)); stroke: var(--_accent); stroke-width: 1.6; stroke-linejoin: round; }

/* Duel: two fencers on the ground line, their blades, and the spark where they meet. */
.masthead-duel-ground { fill: none; stroke: color-mix(in srgb, var(--_accent) 45%, var(--_border)); stroke-width: 1.2; }
.masthead-duel-body { fill: none; stroke: var(--_accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.masthead-duel-head { stroke: var(--_accent); stroke-width: 2; }
.masthead-duel-fencer-0 .masthead-duel-head { fill: var(--_accent); }
.masthead-duel-fencer-1 .masthead-duel-head { fill: var(--_bg); }
.masthead-duel-blade { fill: none; stroke: color-mix(in srgb, var(--_accent) 70%, var(--_bg)); stroke-width: 1.3; stroke-linecap: round; }
.masthead-duel-spark { fill: none; stroke: var(--_accent); stroke-width: 1.4; stroke-linecap: round; }

/* Ghostrider: a wireframe road toward a high horizon, hills along it. */
.masthead-ghostrider { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.masthead-ghostrider-edge { stroke: color-mix(in srgb, var(--_accent) 80%, var(--_bg)); stroke-width: 1.4; }
.masthead-ghostrider-rumble { stroke: var(--_accent); stroke-width: 2; }
.masthead-ghostrider-dash { stroke: color-mix(in srgb, var(--_accent) 70%, var(--_bg)); stroke-width: 1.2; }
.masthead-ghostrider-post { stroke: color-mix(in srgb, var(--_accent) 55%, var(--_bg)); stroke-width: 1.2; }
.masthead-ghostrider-hills { stroke: color-mix(in srgb, var(--_accent) 50%, var(--_border)); stroke-width: 1.1; }
.masthead-ghostrider-horizon { stroke: color-mix(in srgb, var(--_accent) 35%, var(--_border)); stroke-width: 1; opacity: 0.6; }

/* Night city: wireframe towers either side, fainter with distance; lit windows, roof lights, and
   the city floor's lights far below. */
.masthead-nightcity { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.masthead-nightcity-skyline { stroke: color-mix(in srgb, var(--_accent) 40%, var(--_border)); stroke-width: 0.9; opacity: 0.45; }
.masthead-nightcity-haze { stroke: var(--_accent); stroke-width: 1.3; opacity: 0.3; }
.masthead-nightcity-flare { stroke: var(--_accent); stroke-width: 1.1; }
.masthead-nightcity-tower { fill: var(--_bg); stroke: color-mix(in srgb, var(--_accent) 70%, var(--_bg)); stroke-width: 1.2; }
.masthead-nightcity-windows { stroke: var(--_accent); }
.masthead-nightcity-band-0 .masthead-nightcity-tower, .masthead-nightcity-band-0 .masthead-nightcity-windows { stroke-opacity: 0.9; }
.masthead-nightcity-band-0 .masthead-nightcity-windows { stroke-width: 2; }
.masthead-nightcity-band-1 .masthead-nightcity-tower, .masthead-nightcity-band-1 .masthead-nightcity-windows { stroke-opacity: 0.46; }
.masthead-nightcity-band-1 .masthead-nightcity-windows { stroke-width: 1.9; }
.masthead-nightcity-band-2 .masthead-nightcity-tower, .masthead-nightcity-band-2 .masthead-nightcity-windows { stroke-opacity: 0.3; }
.masthead-nightcity-band-2 .masthead-nightcity-windows { stroke-width: 1.5; }
.masthead-nightcity-band-3 .masthead-nightcity-tower, .masthead-nightcity-band-3 .masthead-nightcity-windows { stroke-opacity: 0.2; }
.masthead-nightcity-band-3 .masthead-nightcity-windows { stroke-width: 1.2; }
.masthead-nightcity-band-4 .masthead-nightcity-tower, .masthead-nightcity-band-4 .masthead-nightcity-windows { stroke-opacity: 0.12; }
.masthead-nightcity-beacon { stroke: var(--_accent); stroke-width: 4; }
.masthead-nightcity-car { stroke: var(--_accent); stroke-width: 2; }
.masthead-nightcity-far-car { stroke: var(--_accent); stroke-width: 1.4; opacity: 0.6; }

/* Grass: three depths of blade, the nearest strongest. */
.masthead-grass { fill: none; stroke-linecap: round; }
.masthead-grass-blades { stroke: color-mix(in srgb, var(--_accent) 70%, var(--_bg)); }
.masthead-grass-depth-0 { stroke-width: 0.9; opacity: 0.45; }
.masthead-grass-depth-1 { stroke-width: 1.1; opacity: 0.7; }
.masthead-grass-depth-2 { stroke-width: 1.4; }
.masthead-grass-heads { stroke: var(--_accent); stroke-width: 2; }

/* Lander: jagged ground, its pad, and the lander with its flame. */
.masthead-lander { fill: none; stroke-linejoin: round; }
.masthead-lander-ground { stroke: color-mix(in srgb, var(--_accent) 60%, var(--_border)); stroke-width: 1.2; }
.masthead-lander-pad { stroke: var(--_accent); stroke-width: 2.5; }
.masthead-lander-ship { stroke: var(--_accent); stroke-width: 1.3; }
.masthead-lander-flame { stroke: color-mix(in srgb, var(--_accent) 60%, var(--_bg)); stroke-width: 1.2; }

/* Paddles: the net, two paddles, the ball, the scores. */
.masthead-paddles-net { stroke: color-mix(in srgb, var(--_accent) 45%, var(--_border)); stroke-width: 2; }
.masthead-paddles-paddle, .masthead-paddles-ball { fill: var(--_accent); }
.masthead-paddles-score { fill: color-mix(in srgb, var(--_accent) 60%, var(--_bg)); font: 700 28px var(--masthead-mono, ui-monospace, monospace); }

/* Pong wars: one side a faint wash of the accent, the other the page; a ball of each. */
.masthead-pongwars-cell { fill: color-mix(in srgb, var(--_accent) 22%, var(--_bg)); }
.masthead-pongwars-ball-1 { fill: var(--_accent); }
.masthead-pongwars-ball-0 { fill: var(--_bg); stroke: var(--_accent); stroke-width: 1.5; }

/* Rocks: outlines drifting, the ship, its shots and the dust of a broken rock. */
.masthead-rocks { fill: none; stroke-linejoin: round; }
.masthead-rocks-rock { stroke: color-mix(in srgb, var(--_accent) 75%, var(--_bg)); stroke-width: 1.3; }
.masthead-rocks-ship { stroke: var(--_accent); stroke-width: 1.4; }
.masthead-rocks-shot { stroke: var(--_accent); stroke-width: 1.6; stroke-linecap: round; }
.masthead-rocks-dust { fill: var(--_accent); }

/* Stix: claimed ground hatched, the field's border, the cut, the Stix and its fading copies. */
.masthead-stix { fill: none; }
.masthead-stix-hatching { stroke: color-mix(in srgb, var(--_accent) 45%, var(--_bg)); stroke-width: 1; }
.masthead-stix-border { stroke: color-mix(in srgb, var(--_accent) 60%, var(--_border)); stroke-width: 1.2; }
.masthead-stix-cut { stroke: var(--_accent); stroke-width: 1.6; stroke-linejoin: round; }
.masthead-stix-line { stroke: var(--_accent); stroke-width: 1.3; }
.masthead-stix-marker { fill: var(--_accent); }

/* Grid: lines of three weights in one ink, and the toned blocks: a faint tint, a hatching, a
   stronger tint. */
.masthead-grid-line { stroke: color-mix(in srgb, var(--_accent) 70%, var(--_bg)); stroke-linecap: butt; vector-effect: non-scaling-stroke; }
.masthead-grid-thin { stroke-width: 1.25; }
.masthead-grid-mid { stroke-width: 2.5; }
.masthead-grid-heavy { stroke-width: 5; }
.masthead-grid-tint { fill: color-mix(in srgb, var(--_accent) 14%, var(--_bg)); }
.masthead-grid-strong { fill: color-mix(in srgb, var(--_accent) 30%, var(--_bg)); }
.masthead-grid-hatch-ground { fill: var(--_surface); }
.masthead-grid-hatching { fill: none; stroke: color-mix(in srgb, var(--_accent) 55%, var(--_bg)); stroke-width: 1; }

/* Train: ASCII art along a track at the foot of the masthead, trailing smoke. */
.masthead-train { font: 600 12px var(--masthead-mono, ui-monospace, monospace); }
.masthead-train-cars { fill: color-mix(in srgb, var(--_accent) 85%, var(--_bg)); }
.masthead-train-track { fill: none; stroke: color-mix(in srgb, var(--_accent) 45%, var(--_border)); stroke-width: 1.2; opacity: 0.7; }
.masthead-train-smoke { fill: color-mix(in srgb, var(--_accent) 40%, var(--_border)); }

/* Water: lines across a surface, nearer ones stronger. */
.masthead-blockpeek-patch { fill: none; }
.masthead-blockpeek-wall { stroke: color-mix(in srgb, var(--_accent) 40%, var(--_border)); stroke-width: 1; vector-effect: non-scaling-stroke; }
.masthead-blockpeek-block { fill: color-mix(in srgb, var(--_accent) 8%, var(--_bg)); stroke: color-mix(in srgb, var(--_accent) 75%, var(--_bg)); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.masthead-blockpeek-crack { stroke: var(--_accent); stroke-linecap: round; }
.masthead-blockpeek-hole path { fill: color-mix(in srgb, var(--_accent) 22%, var(--_bg)); stroke: color-mix(in srgb, var(--_accent) 75%, var(--_bg)); stroke-width: 1; fill-rule: evenodd; vector-effect: non-scaling-stroke; }
.masthead-blockpeek-face { fill: color-mix(in srgb, var(--_accent) 30%, var(--_bg)); stroke: var(--_accent); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.masthead-blockpeek-eye { fill: var(--_accent); }
/* Flow field: faint strokes turning with the current, strongest low, and the motes riding it. */
.masthead-flowfield { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.masthead-flowfield-grid { stroke: color-mix(in srgb, var(--_accent) 55%, var(--_border)); stroke-width: 1; vector-effect: non-scaling-stroke; }
.masthead-flowfield-band-0 { opacity: 0.32; }
.masthead-flowfield-band-1 { opacity: 0.4; }
.masthead-flowfield-band-2 { opacity: 0.45; }
.masthead-flowfield-mote { stroke: var(--_accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.masthead-flyby-stars circle { fill: color-mix(in srgb, var(--_accent) 45%, var(--_border)); opacity: 0.6; }
.masthead-flyby-orbit { fill: none; stroke: color-mix(in srgb, var(--_accent) 55%, var(--_bg)); stroke-width: 1; stroke-linejoin: round; opacity: 0.7; }
.masthead-flyby-sun { fill: color-mix(in srgb, var(--_accent) 35%, var(--_bg)); stroke: var(--_accent); stroke-width: 1.2; }
.masthead-flyby-disc { fill: color-mix(in srgb, var(--_accent) 18%, var(--_bg)); stroke: color-mix(in srgb, var(--_accent) 85%, var(--_bg)); stroke-width: 1.1; }
.masthead-flyby-ring { fill: none; stroke: color-mix(in srgb, var(--_accent) 70%, var(--_bg)); stroke-width: 1; }
.masthead-football { fill: none; }
.masthead-football-field { stroke: color-mix(in srgb, var(--_accent) 45%, var(--_border)); stroke-width: 1; opacity: 0.7; }
.masthead-football-body, .masthead-football-mask { stroke: color-mix(in srgb, var(--_accent) 85%, var(--_bg)); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.masthead-football-mask { stroke-width: 1; }
.masthead-football-pads, .masthead-football-helmet { fill: color-mix(in srgb, var(--_accent) 20%, var(--_bg)); stroke: color-mix(in srgb, var(--_accent) 85%, var(--_bg)); stroke-width: 1.2; }
.masthead-football-ball ellipse { fill: color-mix(in srgb, var(--_accent) 35%, var(--_bg)); stroke: var(--_accent); stroke-width: 1; }
.masthead-football-ball path { stroke: var(--_accent); stroke-width: 0.7; }
/* The harmonograph's line is thin and clear of the name, so it's lifted a little out of the art's
   strength, as the fractal's is. Its strokes don't widen when the figure is counter-scaled. */
.masthead-art[data-masthead="harmonograph"] { opacity: max(var(--masthead-strength, 0.55), 0.8); }
.masthead-harmonograph-line { fill: none; stroke: var(--_accent); stroke-width: 1; stroke-linejoin: round; stroke-linecap: round; opacity: 0.62; }
.masthead-harmonograph-line path { vector-effect: non-scaling-stroke; }
.masthead-ships { fill: none; }
.masthead-ships-horizon { stroke: color-mix(in srgb, var(--_accent) 45%, var(--_border)); stroke-width: 1; opacity: 0.6; }
.masthead-ships-wave { stroke: color-mix(in srgb, var(--_accent) 55%, var(--_bg)); stroke-width: 1; stroke-linecap: round; }
.masthead-ships-ship path { fill: color-mix(in srgb, var(--_accent) 10%, var(--_bg)); stroke: color-mix(in srgb, var(--_accent) 85%, var(--_bg)); stroke-width: 1.1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.masthead-ships-puff { fill: color-mix(in srgb, var(--_accent) 30%, var(--_border)); }
.masthead-ships-dolphin { fill: color-mix(in srgb, var(--_accent) 25%, var(--_bg)); stroke: var(--_accent); stroke-width: 1.2; stroke-linejoin: round; }
.masthead-ships-splash { fill: none; stroke: var(--_accent); stroke-width: 1; }
.masthead-triangles { fill: none; }
.masthead-triangles-edge { stroke: color-mix(in srgb, var(--_accent) 60%, var(--_border)); stroke-width: 0.8; stroke-linecap: round; }
.masthead-triangles-fill, .masthead-triangles-ring { fill: var(--_accent); stroke: none; }
.masthead-water-line { fill: none; stroke: color-mix(in srgb, var(--_accent) 70%, var(--_bg)); stroke-width: 1.1; stroke-linejoin: round; }

/* Truchet: quarter-circle tiles in fine lines, a turning tile a little brighter, and a soft glow
   run along a path now and then. The tiles are scaled to their cells, so their lines keep their
   width. */
.masthead-truchet { fill: none; stroke-linecap: round; }
.masthead-truchet-tile { stroke: color-mix(in srgb, var(--_accent) 62%, var(--_bg)); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.masthead-truchet-turning { stroke: color-mix(in srgb, var(--_accent) 85%, var(--_bg)); }
.masthead-truchet-glow { stroke: var(--_accent); stroke-width: 6; stroke-opacity: 0.35; filter: blur(3px); }
.masthead-truchet-lit { stroke: var(--_accent); stroke-width: 1.8; }
/* Skyline: two rows of buildings in outline, lit windows, rain, and now and then lightning. */
.masthead-skyline { fill: none; }
.masthead-skyline-building { fill: color-mix(in srgb, var(--_accent) 6%, var(--_bg)); stroke: color-mix(in srgb, var(--_accent) 75%, var(--_bg)); stroke-width: 1.1; }
.masthead-skyline-roof { fill: none; stroke: color-mix(in srgb, var(--_accent) 75%, var(--_bg)); stroke-width: 1.1; stroke-linejoin: round; }
.masthead-skyline-far .masthead-skyline-building, .masthead-skyline-far .masthead-skyline-roof { stroke: color-mix(in srgb, var(--_accent) 35%, var(--_bg)); stroke-width: 1; }
.masthead-skyline-window { fill: var(--_accent); fill-opacity: 0.55; }
.masthead-skyline-ground { stroke: color-mix(in srgb, var(--_accent) 55%, var(--_border)); stroke-width: 1.2; }
.masthead-skyline-glint { stroke: color-mix(in srgb, var(--_accent) 55%, var(--_bg)); stroke-width: 1; stroke-linecap: round; }
.masthead-skyline-rain { stroke: color-mix(in srgb, var(--_accent) 45%, var(--_border)); stroke-width: 0.9; stroke-linecap: round; opacity: 0.6; }
.masthead-skyline-bolt { stroke: var(--_accent); stroke-width: 1.3; stroke-linejoin: round; }
/* Lighthouse: the headland and tower in outline, the sea in lines, and the beam the one faint fill. */
.masthead-lighthouse { fill: none; }
.masthead-lighthouse-star { fill: color-mix(in srgb, var(--_accent) 75%, var(--_border)); }
.masthead-lighthouse-fog { stroke: color-mix(in srgb, var(--_accent) 45%, var(--_border)); stroke-width: 1.4; stroke-linecap: round; }
.masthead-lighthouse-horizon { stroke: color-mix(in srgb, var(--_accent) 40%, var(--_border)); stroke-width: 1; opacity: 0.6; }
.masthead-lighthouse-glow { stop-color: var(--_accent); }
.masthead-lighthouse-beam { opacity: 0.3; }
.masthead-lighthouse-rock { fill: var(--_bg); stroke: color-mix(in srgb, var(--_accent) 65%, var(--_bg)); stroke-width: 1.2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.masthead-lighthouse-crag { stroke: color-mix(in srgb, var(--_accent) 45%, var(--_bg)); stroke-width: 1; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.masthead-lighthouse-tower { fill: var(--_bg); stroke: color-mix(in srgb, var(--_accent) 85%, var(--_bg)); stroke-width: 1.1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.masthead-lighthouse-wave { stroke: color-mix(in srgb, var(--_accent) 55%, var(--_bg)); stroke-width: 1; stroke-linecap: round; }

/* Wind farm: low hills, towers, and turning rotors. */
.masthead-windfarm { fill: none; }
.masthead-windfarm-hills { stroke: color-mix(in srgb, var(--_accent) 55%, var(--_border)); stroke-width: 1.2; }
.masthead-windfarm-tower { fill: color-mix(in srgb, var(--_accent) 55%, var(--_bg)); }
.masthead-windfarm-blade { fill: color-mix(in srgb, var(--_accent) 35%, var(--_bg)); stroke: color-mix(in srgb, var(--_accent) 80%, var(--_bg)); stroke-width: 0.9; }
.masthead-windfarm-hub { fill: var(--_accent); }

/* Drips: the one animation in real colours, from the paint palette above. Each colour's paint is
   a group of its own, held at half strength, so paint of one colour runs together seamlessly and
   paint of two colours multiplies where they overlap, as pigment mixes (blue over yellow goes
   green). The wet paint is isolated, so it multiplies only with other paint, never with the page:
   that reads on a light theme and a dark one alike, without knowing which it is. */
/* The paint is held at half strength itself, so it is lifted out of the art's fade, as the
   fractal is. */
.masthead-art[data-masthead="drips"] { opacity: max(var(--masthead-strength, 0.55), 0.85); }
.masthead-drips-wet { isolation: isolate; }
.masthead-drips-paint { stroke: none; opacity: 0.5; mix-blend-mode: multiply; }
.masthead-drips-paint-1 { fill: var(--_paint-1); }
.masthead-drips-paint-2 { fill: var(--_paint-2); }
.masthead-drips-paint-3 { fill: var(--_paint-3); }
.masthead-drips-paint-4 { fill: var(--_paint-4); }
.masthead-drips-paint-5 { fill: var(--_paint-5); }
.masthead-drips-paint-6 { fill: var(--_paint-6); }
.masthead-drips-paint-7 { fill: var(--_paint-7); }
.masthead-drips-paint-8 { fill: var(--_paint-8); }
.masthead-drips-paint-9 { fill: var(--_paint-9); }

/* October. */
/* Bats: dark wings against the masthead. */
.masthead-bats-bat { fill: color-mix(in srgb, var(--_accent) 55%, var(--_bg)); stroke: var(--_accent); stroke-width: 0.6; }
/* Eyes: pale whites with dark pupils, in the accent. */
.masthead-eyes-white { fill: color-mix(in srgb, var(--_accent) 30%, var(--_bg)); stroke: var(--_accent); stroke-width: 1; }
.masthead-eyes-pupil { fill: var(--_accent); }
/* Ghosts: pale sheets, outlined, with dark eyes and mouths. */
.masthead-ghosts-sheet { fill: color-mix(in srgb, var(--_accent) 12%, var(--_bg)); stroke: color-mix(in srgb, var(--_accent) 80%, var(--_bg)); stroke-width: 1.2; }
.masthead-ghosts-face { fill: var(--_accent); }
/* Graveyard: the moon, wisps of cloud and fog, the hill, its stones and trees. */
.masthead-graveyard-face { fill: color-mix(in srgb, var(--_accent) 18%, var(--_bg)); stroke: color-mix(in srgb, var(--_accent) 70%, var(--_bg)); stroke-width: 1.2; }
.masthead-graveyard-halo { opacity: 0.35; }
.masthead-graveyard-crater { fill: none; stroke: color-mix(in srgb, var(--_accent) 45%, var(--_bg)); stroke-width: 0.9; }
.masthead-graveyard-cloud, .masthead-graveyard-fog { fill: none; stroke: color-mix(in srgb, var(--_accent) 40%, var(--_border)); stroke-width: 1.4; stroke-linecap: round; }
.masthead-graveyard-fog { opacity: 0.6; }
.masthead-graveyard-hill, .masthead-graveyard-tree { fill: none; stroke: color-mix(in srgb, var(--_accent) 65%, var(--_bg)); stroke-width: 1.2; stroke-linecap: round; }
.masthead-graveyard-stone { fill: color-mix(in srgb, var(--_accent) 15%, var(--_bg)); stroke: color-mix(in srgb, var(--_accent) 70%, var(--_bg)); stroke-width: 1.1; }
.masthead-graveyard-bat { fill: var(--_accent); }
.masthead-graveyard-sheet { fill: color-mix(in srgb, var(--_accent) 12%, var(--_bg)); stroke: color-mix(in srgb, var(--_accent) 80%, var(--_bg)); stroke-width: 1; }
.masthead-graveyard-eyes { fill: var(--_accent); }
/* Pumpkins: outlined bodies and stems, faces lit from inside. */
.masthead-pumpkins-body { fill: color-mix(in srgb, var(--_accent) 18%, var(--_bg)); stroke: var(--_accent); stroke-width: 1.2; }
.masthead-pumpkins-stem { fill: none; stroke: color-mix(in srgb, var(--_accent) 70%, var(--_border)); stroke-width: 1.4; }
.masthead-pumpkins-face { fill: var(--_accent); }
/* Spider: its web, its thread, and the spider. */
.masthead-spider-web, .masthead-spider-thread { fill: none; stroke: color-mix(in srgb, var(--_accent) 45%, var(--_border)); stroke-width: 0.8; }
.masthead-spider-body { fill: var(--_accent); }
.masthead-spider-legs { fill: none; stroke: var(--_accent); stroke-width: 1.2; stroke-linejoin: round; stroke-linecap: round; }

/* ?ambientDebug=1 names the running animation and its seed in the masthead's corner. */
.masthead-debug {
  position: absolute;
  right: 0.5rem;
  bottom: 0.25rem;
  margin: 0;
  font: 0.625rem var(--masthead-mono, ui-monospace, monospace);
  opacity: 0.7;
}