/* wordmark.css · the two-label stacked building wordmarks and the top wordmark (D-014, corrected by D-016).
   Both labels are the Universes tape (kit/reference.css .tape: cuts, curl, contact shadow, embossed type), the canon label for this site.
   Values come from data/wordmarks.json. The letter outlines are the kit's .digital-letter-outline (reference.css L1063) and the design system's lighter-plate bevel. */
.wm { display: inline-flex; flex-direction: column; align-items: center; gap: 0; font-size: var(--wm-size, 1.05rem); line-height: 1; vertical-align: middle; }
.wm .wm-plate.tape { display: inline-block; font-family: 'EmbossT1', monospace; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; padding: .3em .95em .26em; border-radius: 0; box-shadow: none; color: #fff; }   /* thinner plates (MSG-0145) */
.wm .wm-top { font-size: 1.5em; --tape-tilt: -1.2deg; --curl-depth: -2px; position: relative; z-index: 1; }        /* Breaks and Brain Buddy clearly bigger; Playhouse and Dream Shop stay (MSG-20260919-0005 point 6) */
.wm .wm-bottom { --tape-tilt: 1deg; --curl-depth: -2.5px; position: relative; z-index: 2; margin-top: -.34em; font-size: 1.1em; }   /* Play·house and Dream·shop: up from 1em (MSG-0145), then slightly down again (MSG-0225) */   /* the lower label tucks under the upper one: together, slightly overlapping */
.wm i { font-style: normal; }
/* coloured letters on the white tape: the design system's lighter-plate bevel */
.wm-plate[data-bevel="light"] i.wm-l { text-shadow: 1px 0 0 rgba(255,255,255,.7), 0 2px 0 rgba(255,255,255,.9), 0 3px 2px rgba(58,58,58,.34), 1px 1px 0 rgba(58,58,58,.14); }   /* a firmer contact shadow under the white lift so the rainbow Breaks reads on the white tape (MSG-0410: "better shadowing so it's visible") */
/* coloured letters on the grey tape: the kit's digital letter outline, the white outlining Deesil asked to be stronger */
.wm-plate[data-bevel="grey"] i.wm-l { text-shadow: 1px 0 0 #ffffffcc, -1px 0 0 #ffffffb3, 0 1px 0 #ffffffb3, 0 -1px 0 #ffffffcc, 0 2px 0 #ffffffe6, -1px -1px 0 #ffffff99, 1px 1px 0 #ffffffb3; }
/* white embossed text on a coloured tape: the tape's own treatment (kit reference.css L181) */
.wm-plate[data-bevel="emboss"] i.wm-l, .wm-plate i.wm-rest { color: #fff; text-shadow: 0 -1px 0 #163657aa, 0 1px 0 #ffffff77; }
.wm-plate[data-bevel="light"] i.wm-rest { color: #8A8580; text-shadow: 0 1px 0 #fff; }
.wm i.wm-space { display: inline-block; width: .45em; }
/* the dot: EmbossT1's own period lifted to the cap middle, 0.27 of the cap height, white, the tape's emboss pair, no ring, no shadow (MSG-0200: 'just a dot that makes sense, that matches the font aesthetic'; measured 19 Sept against the design site 0.18 and Universes 0.32) */
.wm i.wm-dot-period { display: inline-block; font-family: 'EmbossT1', monospace; font-size: 1em; line-height: 1; color: #fff; text-shadow: 0 -1px 0 #163657aa, 0 1px 0 #ffffff77; vertical-align: baseline; margin: 0 .02em; transform: translateY(-.27em); }
/* the earlier dots stay as alternates on variants/signage.html */
.wm i.wm-dot { display: inline-block; vertical-align: middle; margin: 0 .18em; }
.wm i.wm-dot-sticker { width: .14em; height: .14em; border-radius: 50%; background: radial-gradient(circle at 35% 32%, #ffffff 0 28%, #ECE8E0 62%, #CFCABF 100%); box-shadow: 0 1px 0 rgba(0,0,0,.28), 0 0 0 1.5px rgba(255,255,255,.85), 0 2px 3px rgba(0,0,0,.18); transform: translateY(-.06em) rotate(-8deg); }
.wm i.wm-dot-brand { font-family: Avenir, 'Avenir Next', Arial, sans-serif; font-weight: 900; font-size: 1em; line-height: 0; color: #B0ACA5; text-shadow: 0 -1px 0 #ffffffcc, 0 1px 1px rgba(0,0,0,.28); transform: translateY(-.08em); }
.wm-plate[data-bevel="grey"] i.wm-dot-brand { color: #E6E3DC; }
.wm.wm-inline { flex-direction: row; align-items: center; gap: .5em; }

/* the top wordmark: Builderhood and Blvd the same size with a foam emoji between (Universes .brand idiom: per-letter spans, no inline colour) */
.bb { display: inline-flex; align-items: center; gap: .28em; white-space: nowrap; line-height: 1; }
.bb-chalk { font-family: 'Chalkduster', cursive; font-size: 1.6rem; letter-spacing: .01em; }
.bb-emboss { font-family: 'EmbossT1', monospace; font-size: 1.34rem; letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 1px 0 rgba(0,0,0,.06); }
.bb i { font-style: normal; }
.bb .bb-foam { font-size: 1.72rem; display: inline-block; position: relative; z-index: 2; line-height: 1; }   /* the hammer and wrench keep the size they had on the 1.5rem plate */
.bb .bb-foam-start, .bb .bb-foam-end { font-size: 2.5rem; position: absolute; top: 50%; }   /* the crane and the house hang off the plate's edges WITHOUT growing it: out of the line box, so the plate keeps its thin padding (MSG-20260919-0050) */
.bb .bb-foam-start { left: -1.55rem; transform: translateY(-50%) rotate(-9deg); }
.bb .bb-foam-mid { transform: rotate(5deg); }
.bb .bb-foam-end { right: -1.55rem; transform: translateY(-50%) rotate(9deg); }
@media (max-width: 560px) { .bb-emboss { font-size: .82rem; letter-spacing: .05em; gap: .18em; } .bb .bb-foam { font-size: 1.05rem; } .bb .bb-foam-start, .bb .bb-foam-end { font-size: 1.5rem; } .bb .bb-foam-start { left: -1rem; } .bb .bb-foam-end { right: -1rem; } .nav-title-label { padding: 7px 12px; max-width: calc(100vw - 24px); } }