.logo-10x-course {
  display: inline-block;
  line-height: 0;
}

.logo-10x-course svg {
  display: block;
  height: 100%;
  width: auto;
}

/* Inline variant for use within text - rendered as a true inline so it
   sits inside a text flow without forcing its own line box. */
.logo-10x-course-inline {
  display: inline;
  line-height: inherit;
}

/* The combined lockup is the widest mark in the family and it is one atomic
   inline box - a line cannot break inside it. On a 320px phone a display-sized
   heading therefore pushed it past both edges of the section, clipping the
   terminal prompt on one side and "Architect" on the other. max-width lets it
   scale down to whatever the line has left, and does not take effect while it
   fits.

   The height MUST stay definite (1.25em), never `height: auto` under a
   `max-height`. This SVG carries a viewBox and no width/height attributes, so
   it has a ratio but no intrinsic size: with both axes auto, a browser sizing
   the box from its content resolves `max-width: 100%` against a width that is
   itself still being measured, and settles the cycle at ZERO. Every ancestor
   that measures its children that way - a flex parent (the case that bit us:
   `.page-subtitle` on /curriculum and the course rows in the enrollment-page
   modal), a grid or table cell, a float, any shrink-to-fit box - therefore
   rendered the lockup as a 0x0 invisible element. A stated height gives the
   measurement something real to start from; the two sibling marks
   (`.logo-10x-inline` at 1.1em, `.logo-10x-architect-inline` at 1.05em) have
   always stated theirs, which is why only this one vanished. When the width
   does bind, the drawing scales inside the box and stays centred - the ratio
   is preserved either way. */
.logo-10x-course-inline svg {
  display: inline;
  width: auto;
  height: 1.25em;
  max-width: 100%;
  vertical-align: middle;
  position: relative;
  top: -2px;
}