.logo-mark{
  --size:32px;
  --petals:7;
  --orbit:20%;
  --scale:.70;
  width:var(--size);
  height:var(--size);
  position:relative;
  display:inline-block;
  flex:0 0 auto;
  border-radius:50%;
  overflow:hidden;
  background:#0d0a09;
  isolation:isolate;
  filter:drop-shadow(0 8px 16px rgba(120,72,22,.18));
}
.logo-mark::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  z-index:4;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.logo-mark span{
  --turn:calc(360deg / var(--petals) * var(--i));
  position:absolute;
  inset:0;
  border-radius:50%;
  transform:rotate(calc(var(--turn) + 62deg)) translateY(calc(var(--orbit) * -1)) scale(var(--scale));
  background:hsl(var(--h) 94% 50%);
  opacity:.68;
}
.logo-mark span:nth-child(1){--i:0;--h:0}
.logo-mark span:nth-child(2){--i:1;--h:7.7}
.logo-mark span:nth-child(3){--i:2;--h:15.4}
.logo-mark span:nth-child(4){--i:3;--h:23.1}
.logo-mark span:nth-child(5){--i:4;--h:30.9}
.logo-mark span:nth-child(6){--i:5;--h:38.6}
.logo-mark span:nth-child(7){--i:6;--h:46.3}
.logo-mark span:nth-child(8){--i:7;--h:54}
.logo-mark span:nth-child(9){--i:8;--h:31}
.logo-mark span:nth-child(10){--i:9;--h:18}
.logo-mark span:nth-child(11){--i:10;--h:8}
.logo-mark span:nth-child(12){--i:11;--h:48}
.nav-logo{--size:30px;--orbit:20%;--scale:.70}
.hero-logo{--size:220px;--orbit:20%;--scale:.70;margin:0 auto}
.mark-five{--petals:5;--scale:.72}
.mark-six{--petals:6;--scale:.71}
.mark-seven{--petals:7;--scale:.70}
.mark-eight{--petals:8;--scale:.68}
.mark-ten{--petals:10;--scale:.64}
.mark-twelve{--petals:12;--scale:.60}
.mark-glass span{
  opacity:.58;
}
.nav-logo.mark-glass span{opacity:.88}
.mark-venn span{
  opacity:.46;
}
.mark-sun{--scale:.60}
.mark-foil span{opacity:.62}
.logo-stage{
  min-height:220px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:6px;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.72), transparent 38%),
    var(--panel);
}
.logo-stage .logo-mark{--size:150px}
.logo-note{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--grey);
}
@media(max-width:680px){
  .hero-logo{--size:178px}
}