/* Yilume brand lockup — mark (Ember) + wordmark (Lit Tittle) */
:root{ --light:#f6b731; }

.logo{ gap:11px; }

/* the Ember mark; overrides the global img{width:100%} rule */
.logo .mark{
  flex:none;
  width:32px; height:32px;
  object-fit:contain;
}

/* the wordmark: a serif "Yilume" whose i-dot is the light */
.logo .word{
  display:inline-flex;
  align-items:baseline;
  line-height:1;
  font-family:var(--serif);
  font-style:normal;
  font-weight:600;
  font-size:21px;
  letter-spacing:-.015em;
}
.logo .word i{
  position:relative;
  display:inline-block;
  font-style:normal;
  line-height:1;
}
.logo .word i b{
  position:absolute;
  left:50%; top:-.03em;
  transform:translate(-50%,-50%);
  width:.17em; height:.17em;
  border-radius:50%;
  background:var(--light);
  box-shadow:0 0 .30em .06em rgba(246,183,49,.55),
             0 0 .85em .14em rgba(246,183,49,.32);
}

/* footer sits on --ink; the light stays warm against it */
footer .logo .word i b{
  box-shadow:0 0 .34em .07em rgba(246,183,49,.7),
             0 0 1em .18em rgba(246,183,49,.4);
}

@media (max-width:760px){
  .logo .word{ font-size:19px; }
  .logo .mark{ width:28px; height:28px; }
}