/* The house drawings: brass line on paper, palette fills only. */
.art { display: block; inline-size: 100%; block-size: 100%; }
.art *, .badge-art * { vector-effect: non-scaling-stroke; }
.a-ln { fill: none; stroke: var(--brass); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.a-lt { fill: none; stroke: var(--brass); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }   /* the second line: the same brass, finer */
.a-dash { stroke-dasharray: 4 5; }
.a-w, .a-1, .a-2, .a-3, .a-4, .a-p, .a-d { stroke: var(--brass); stroke-width: 2; stroke-linejoin: round; }
.a-w { fill: var(--white); } .a-1 { fill: var(--l1); } .a-2 { fill: var(--l2); } .a-3 { fill: var(--l3); } .a-4 { fill: var(--brass); } .a-p { fill: var(--paper); }
.a-d { fill: var(--deep); stroke: var(--deep); }
.a-okc { fill: var(--brass); } .a-noc { fill: var(--deep); }
.a-okt { fill: none; stroke: var(--paper); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.a-tx { font-family: var(--sans); font-size: 12px; fill: var(--brass); letter-spacing: .06em; }
.a-txb { font-family: var(--serif); font-size: 20px; fill: var(--deep); }
.badge-art { display: block; inline-size: 100%; block-size: 100%; }
.b-ring { fill: var(--white); stroke: var(--hair); stroke-width: 1; }
.b-face { fill: var(--l1); stroke: var(--brass); stroke-width: 1.5; }
.b-s1, .b-s2, .b-s3, .b-s4, .b-s5 { fill: none; stroke-width: 4; stroke-linecap: round; }
.b-s1, .b-s2, .b-s3, .b-s4, .b-s5 { stroke: var(--brass); }   /* a plain brass ring: the five tones belong to the strip, which is never rounded */
.badge-art[data-state="locked"] { opacity: .45; }
.badge-art[data-state="pending"] .b-face { fill: var(--white); stroke-dasharray: 3 3; }