/* The vase painter's palette (vase.js, heroes.js, desks.js). Dark: red-figure, the clay's
   terracotta on black glaze, fine black relief lines, brown dilute lines, a little added white and
   added red. Light: white-ground, the same lines on a cream slip with soft washes. */
:root {
  --v-glaze: #17110d; --v-clay: #d4824a; --v-clay-far: #c0713f; --v-line: #120b07; --v-dilute: #6e3315;
  --v-white: #efe3cd; --v-red: #a3352a; --v-gold: #d6a447; --v-wax: #4a2f1c; --v-papyrus: #e9dcc1; --v-hair-fill: #140e0a; --v-relief: #4e3a2b;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --v-glaze: #f1e6d2; --v-clay: #f5ead8; --v-clay-far: #ecdcc2; --v-line: #2a1a10; --v-dilute: #9a6a44;
    --v-white: #fffaf0; --v-red: #b4462f; --v-gold: #c8962f; --v-wax: #6b4a2c; --v-papyrus: #fbf4e4; --v-hair-fill: #2a1a10; --v-relief: #8a6446;
  }
}
:root[data-theme="light"] {
  --v-glaze: #f1e6d2; --v-clay: #f5ead8; --v-clay-far: #ecdcc2; --v-line: #2a1a10; --v-dilute: #9a6a44;
  --v-white: #fffaf0; --v-red: #b4462f; --v-gold: #c8962f; --v-wax: #6b4a2c; --v-papyrus: #fbf4e4; --v-hair-fill: #2a1a10; --v-relief: #8a6446;
}

.v-ground { fill: var(--v-glaze); }
.v-clay { fill: var(--v-clay); }
.v-far.v-clay, .v-clay.v-far { fill: var(--v-clay-far); }
.v-line { stroke: var(--v-line); stroke-width: 0.85px; stroke-linejoin: round; stroke-linecap: round; }
.v-line-thin { stroke: var(--v-line); stroke-width: 0.6px; stroke-linejoin: round; }
.v-line-clay { fill: none; stroke: var(--v-clay); stroke-width: 0.6px; }
.v-none { fill: none; }
.v-dilute { fill: none; stroke: var(--v-dilute); stroke-opacity: 0.85; stroke-width: 0.65px; stroke-linecap: round; }
.v-dilute.faint { stroke-opacity: 0.6; stroke-width: 0.5px; }
.v-dilute.linen { stroke-opacity: 0.75; stroke-width: 0.5px; }
.v-fold { fill: none; stroke: var(--v-line); stroke-width: 0.65px; stroke-linecap: round; }
.v-fold.fine { stroke-width: 0.45px; stroke-opacity: 0.8; }
.v-hoof-leg { fill: none; stroke: var(--v-gold); stroke-width: 0.9; stroke-linecap: round; }
.v-hem { fill: none; stroke: var(--v-line); stroke-width: 0.34; stroke-linecap: round; }
.v-hem.v-zig { stroke-width: 0.3; stroke-linejoin: miter; stroke-linecap: butt; }
.v-roll { fill: none; stroke: var(--v-line); stroke-width: 0.5; stroke-linecap: round; }
.v-belt { fill: none; stroke: var(--v-line); stroke-width: 0.46; stroke-linecap: round; }
.v-white { fill: var(--v-white); }
.v-glaze { fill: var(--v-line); }
.v-hair { fill: var(--v-hair-fill); }
.v-hair-edge { stroke: var(--v-clay); stroke-width: 0.9px; }
.v-hair-white { fill: var(--v-white); }
.v-hair-line { fill: none; stroke: var(--v-clay); stroke-opacity: 0.5; stroke-width: 0.5px; stroke-linecap: round; }
.v-hair-lock { fill: none; stroke: var(--v-line); stroke-width: 0.6; stroke-linecap: round; }
.v-curl-black { fill: none; stroke: var(--v-line); stroke-width: 0.7px; stroke-linecap: round; }
.v-lid { fill: none; stroke: var(--v-line); stroke-width: 1.5px; stroke-linecap: round; }
.v-brow { fill: none; stroke: var(--v-line); stroke-width: 1.1px; stroke-linecap: round; }
.v-fillet.thin { stroke-width: 0.3; }
/* Relief and dilute lines keep one width at any size, as the real relief line does. */
.v-line, .v-line-thin, .v-line-clay, .v-dilute, .v-fold, .v-hair-edge, .v-hair-line, .v-curl-black, .v-lid, .v-brow, .v-curl,
.v-relief, .v-strand, .v-stem { vector-effect: non-scaling-stroke; }
.v-relief { fill: none; stroke: var(--v-relief); stroke-width: 0.55px; stroke-linecap: round; }
.v-strand { fill: none; stroke: var(--v-white); stroke-opacity: 0.9; stroke-width: 0.7px; stroke-linecap: round; }
.v-stem { fill: none; stroke: var(--v-clay); stroke-width: 0.7px; }
.v-lock { fill: none; stroke: var(--v-hair-fill); stroke-width: 0.34; stroke-linecap: round; }
.v-hair-curl { fill: none; stroke: var(--v-line); stroke-width: 0.5; stroke-linecap: round; }
.v-moustache { fill: none; stroke: var(--v-line); stroke-width: 0.42; stroke-linecap: round; }
.v-moustache-white { fill: none; stroke: var(--v-white); stroke-width: 0.42; stroke-linecap: round; }
.v-fillet { fill: none; stroke: var(--v-red); stroke-width: 0.62; stroke-linecap: round; }
.v-leaf { fill: var(--v-clay); }
.v-strap { fill: none; stroke: var(--v-line); stroke-width: 0.24; stroke-linecap: round; }
.v-strap-thin { fill: none; stroke: var(--v-line); stroke-width: 0.14; stroke-linecap: round; }
.v-staff { fill: none; stroke: var(--v-clay); stroke-width: 0.72; stroke-linecap: round; }
.v-chair { fill: none; stroke: var(--v-clay); stroke-width: 1.15; stroke-linecap: round; }
.v-gold { fill: var(--v-gold); }
.v-red { fill: var(--v-red); }
.v-purple { fill: #5d2a55; }
.v-cup { fill: var(--v-white); }
.v-fold.light { stroke: #c79bc0; stroke-opacity: 0.7; }
.v-collar { fill: none; stroke: var(--v-red); stroke-width: 1.6; stroke-linecap: round; }
.v-ribbon { fill: none; stroke: var(--v-white); stroke-width: 0.42; stroke-linecap: round; }
.v-chirho { fill: none; stroke: var(--v-gold); stroke-width: 0.9; stroke-linecap: round; }
.v-band-out { fill: none; stroke: var(--v-line); stroke-linecap: round; stroke-linejoin: round; }
.v-band-in { fill: none; stroke: var(--v-clay); stroke-linecap: round; stroke-linejoin: round; }
.v-twig { fill: none; stroke: var(--v-clay); stroke-width: 0.55; stroke-linecap: round; }
.v-thread { fill: none; stroke: var(--v-red); stroke-width: 0.32; stroke-linecap: round; }
.v-string { fill: none; stroke: var(--v-white); stroke-opacity: 0.75; stroke-width: 0.4px; vector-effect: non-scaling-stroke; }
.v-maze { fill: none; stroke: var(--v-line); stroke-width: 0.7; stroke-linecap: square; stroke-linejoin: miter; }
.v-ring-arm { fill: none; stroke: var(--v-clay); stroke-width: 0.55; }
.v-staff.thin { stroke-width: 0.45; }
.v-strand.faint { stroke-opacity: 0.45; }
.v-strand.grey { stroke-opacity: 0.5; }
.v-hem.v-thin-band { stroke-width: 0.26; }
.v-horn { fill: none; stroke: var(--v-gold); stroke-width: 0.95; stroke-linecap: round; }
.v-shine { fill: var(--v-white); fill-opacity: 0.55; }
.v-papyrus { fill: var(--v-papyrus); }
.v-wax { fill: var(--v-wax); }
.v-stylus { fill: none; stroke: var(--v-line); stroke-width: 0.3; stroke-linecap: round; }
.v-sweat { fill: var(--v-white); }
.v-card-mark { font: 700 7.4px Georgia, 'Times New Roman', serif; fill: var(--v-gold); }
.v-z { font: 600 4.4px Georgia, serif; fill: var(--v-white); }
.v-z.two { font-size: 3.4px; }
.v-inscription { font: 600 4.2px Georgia, 'Times New Roman', serif; letter-spacing: 0.7px; fill: var(--v-red); }
.v-smoke { fill: none; stroke: rgba(239, 227, 205, 0.35); stroke-width: 0.35; stroke-linecap: round; }

/* The tablet that shows the run: the clay board, writing in glaze, the marks. */
.v-panel { fill: var(--v-wax); }
.v-panel.off { fill: #33200f; }
.v-panel.dim { fill: #3e2716; }
.v-writing { fill: none; stroke: var(--v-clay); stroke-width: 1.0; stroke-linecap: round; }
.v-writing.red { stroke: var(--v-gold); }
.v-mark { fill: none; stroke: var(--v-clay); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.v-mark.red { stroke: var(--v-red); }
.v-mark-dot { fill: var(--v-red); }
.v-curl { fill: none; stroke: var(--v-line); stroke-width: 0.6px; stroke-linecap: round; }
.v-badge { fill: var(--v-red); stroke: var(--v-line); stroke-width: 0.35; }
.v-badge-n { font: 700 4.4px Georgia, serif; fill: var(--v-white); }

/* Laelaps: asleep on his mat; sitting up to watch when someone needs a look; tapped, he sits up and
   turns to you, panting. Claude's spark at your shoulder. */
.v-dog { fill: var(--v-clay); }
/* Laelaps in red-figure (his medallion): flat clay and glaze; the light and shade are the colour room's. */
.v-dog-shade, .v-dog-light, .v-dog-mask { fill: none; }
.v-dog-inner, .v-dog-white { fill: var(--v-clay); }
.v-dog-nose, .v-dog-mouth { fill: var(--v-glaze); }
.v-dog-eye { fill: var(--v-white); }
.v-dog-glint { fill: none; }
.v-dog-collar { fill: none; stroke: var(--v-line); stroke-width: 1.1; stroke-linecap: round; }
.v-dog-collar-light { fill: none; stroke: #e2b45c; stroke-width: 0.34; stroke-linecap: round; }
.v-mat { fill: var(--v-clay-far); stroke: var(--v-line); stroke-width: 0.6px; vector-effect: non-scaling-stroke; }
.v-hound .v-dog-sit, .v-hound .v-dog-front, .v-hound .v-dog-sphinx { display: none; }
.v-hound.alert .v-dog-sit { display: inline; }
.v-hound.alert .v-dog-lie { display: none; }
.facing .v-hound .v-dog-lie, .facing .v-hound .v-dog-side { display: none; }
.facing .v-hound .v-dog-sit, .facing .v-hound .v-dog-front { display: inline; }
.v-spark { fill: none; stroke: var(--v-gold); stroke-width: 0.9; stroke-linecap: round; }
.v-spark-glow { fill: var(--v-gold); fill-opacity: 0.18; }
@media (prefers-reduced-motion: no-preference) {
  .facing .v-dog-front .v-tongue { transform-box: fill-box; transform-origin: 50% 0; animation: pant 0.5s ease-in-out infinite alternate; }
}
@keyframes pant { to { transform: scaleY(1.35); } }
/* A crew whose run has just begun appears at his desk (stage 8 brings the walking); the chair stays. */
@media (prefers-reduced-motion: no-preference) { .o-arriving .o-person { animation: arrive 1.6s ease-out both; } }
@keyframes arrive { from { opacity: 0; } to { opacity: 1; } }
@keyframes hover { to { transform: translate(0, -1.6px); } }

/* The lamp's flame and its light. */
.v-flame.lamp-on { fill: #ffe6a8; }
.v-flame.lamp-warn { fill: #f0a03a; }
.v-flame.lamp-stop { fill: #c9412d; }
.v-glow-in.lamp-on { stop-color: rgba(255, 214, 140, 0.5); }
.v-glow-in.lamp-warn { stop-color: rgba(240, 160, 58, 0.45); }
.v-glow-in.lamp-stop { stop-color: rgba(201, 65, 45, 0.45); }
.v-glow-out { stop-color: rgba(255, 214, 140, 0); }

/* The vase's surface over each scene: a studio highlight, a fine grain, a darkening at the curve. */
.v-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.v-surface { pointer-events: none; }
.v-sheen-stop { stop-color: #fff8ec; }
.v-vig-stop { stop-color: #000; }
.v-grain { opacity: 0.9; mix-blend-mode: overlay; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .v-vig-stop { stop-color: #7a5a3a; } }
:root[data-theme="light"] .v-vig-stop { stop-color: #7a5a3a; }

/* Ornament bands. */
.v-band { fill: var(--v-clay); }
.v-band-dark { fill: var(--v-glaze); }
.v-key { fill: none; stroke: var(--v-line); stroke-linecap: square; }
.v-clay-dark { fill: var(--v-line); }

/* The medallion: a cup's tondo ringed with the key in the company's colour. */
.v-ring.c-symposio { fill: var(--symposio); } .v-ring.c-argo { fill: var(--argo); } .v-ring.c-sympan { fill: var(--sympan); }
.v-ring.c-engino { fill: var(--engino); } .v-ring.c-constans { fill: #6b3f8a; } .v-ring.c-factories { fill: var(--factories); } .v-ring.c-studio { fill: var(--studio); }
.v-ring.c-band { fill: var(--band); }
.v-ring-band { fill: var(--v-clay); }
.v-ring-key { fill: none; stroke: var(--v-line); stroke-width: 0.55; stroke-linejoin: miter; stroke-linecap: square; }
.v-ring-key.thin { stroke-width: 0.32; }
.v-ring-dot { fill: var(--v-line); }
.v-ring-rule { fill: none; stroke: var(--v-line); stroke-width: 0.32; }
.v-tondo { fill: var(--v-glaze); }

@media (prefers-reduced-motion: no-preference) {
  .v-flame.lamp-on, .v-flame.lamp-warn { transform-box: fill-box; transform-origin: 50% 100%; animation: flicker 1.8s ease-in-out infinite alternate; }
  .v-figure .v-z { animation: zfloat 3.2s ease-in-out infinite; }
  .v-figure .v-z.two { animation-delay: 1.6s; }
}
@keyframes flicker { 50% { transform: scaleY(1.08) scaleX(0.94); } 100% { transform: scaleY(0.95) scaleX(1.03); } }
@keyframes zfloat { 0% { opacity: 0; transform: translate(0, 1px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(2px, -4px); } }

/* Arion (Chris, 17 Oct evening): his locs and his red, gold and green tam (heads.js); his phone (heroes.js). */
.v-loc { fill: none; stroke: #3b2a1d; stroke-width: 1.15; stroke-linecap: round; }
.v-tam-r { fill: #c0303a; } .v-tam-y { fill: #e2b23a; } .v-tam-g { fill: #2c8a46; }
.o-phone { fill: #15181d; stroke: #3a414b; stroke-width: 0.25; }
.o-phone-glow { fill: #7cc0ff; opacity: 0.85; }

/* Petted on the visitors' page (stage 5, audit of 18 Oct): his tail comes up out behind him and wags
   from its root, a dozen beats, then lies round him again. With reduced motion it is up, and still. */
.v-dog-tail-up { display: none; }
.wagging .v-dog-tail { display: none; }
.wagging .v-dog-tail-up { display: inline; }
@media (prefers-reduced-motion: no-preference) {
  .wagging .v-dog-tail-up { transform-box: fill-box; transform-origin: 0% 100%; animation: dog-wag 0.26s ease-in-out 12 alternate; }
}
@keyframes dog-wag { from { transform: rotate(-18deg); } to { transform: rotate(14deg); } }
.v-hoop { fill: none; stroke: var(--v-gold); stroke-width: 0.38; }
.v-frame { fill: none; stroke: var(--v-gold); stroke-width: 0.2; stroke-linejoin: round; stroke-linecap: round; }
.v-lens { fill: rgba(150, 175, 225, 0.22); stroke: none; }