/* * USOHONTO header wordmark — Phase 1.5: the logo as the creature's initial * typography form. Enlarged specifically because a legible point-and-line * "USOHONTO" needs real pixels to trace letterforms in — the rest of the * header, and the footer's own separate large wordmark, are untouched. */ .wordmark.wordmark-creature { align-items: center; display: inline-flex; font-size: 2.75rem; justify-self: start; min-height: 3.5rem; position: relative; width: fit-content; } .wordmark-creature .wordmark-canvas { display: none; } .wordmark-creature.is-creature-ready .wordmark-text { border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; } .wordmark-creature.is-creature-ready .wordmark-canvas { display: block; } /* Phase 1.6: hero field mode hides the real text the same way, but must not also reveal the small header canvas — that stays unused, still display:none, while a separate full-Hero canvas (appended to ) does the drawing. */ .wordmark-creature.is-hero-field-ready .wordmark-text { border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; } .creature-field-canvas { left: 0; pointer-events: none; position: absolute; z-index: 10; } @media (max-width: 45rem) { .wordmark.wordmark-creature { font-size: 2.1rem; min-height: 2.7rem; } }